JavaScript and its relationship to HTML and CSS.
First things first, we need to think of HTML as the building blocks of the website. This is the basic website structure and content (but it doesn’t have to have all of the content). In its rendered form, it will just show what was in the HTML file without our Element Tags. This could have paragraphs, headings, tables, buttons, and inputs. The CSS then adds styling to these building blocks. This can include changing where the HTML elements are positioned, what colour they are, picking our fonts and giving a site its overall design.
JavaScript is then added to make this page interactive. For example, we could use it to make a button say something else when we click it, help us change the colours of elements when we hover over them, or even move the position of an element when an action is taking place. The limits of what you can do with JavaScript on a page are essentially endless. If you can think of it, JavaScript can probably do this.
Control Flow
The way our JavaScript is read by a computer is the same as how we read a book. The computer will read it from the first line down to the last line (unless there is something telling it to do otherwise). This is called the control flow.
We can alter this by adding things like loops. This is telling the computer to read the same piece of code multiple times with a subtle change. For example, your daily chores could be like a control flow. You first have to eat breakfast, then count your cash, and then go to sleep. You're going to do these things in that order, but when you get to the chore of counting your cash, it’s going to act as our JavaScript. You’re going to have to do the same thing over and over again until there is no more cash left uncounted. The subtle change each time you’ve counted a piece of cash is that there is one fewer cash item to count.
The DOM
When we load a website, what you are seeing is called the DOM, or Document Object Model. This is the rendered version of the website. We can interact with this and make changes to it, and without getting technical, when you reload this website it will be the same as when you first accessed it. You’re not actually making changes to the ‘master’ website.
Arrays and Objects
The best way to think of arrays and objects is that anything that can be a basic list can be an array. Think of a grocery shopping list. Each of the items on your list can be a key in an array. An object could then be as if the supermarket were taking each customer's shopping list and keeping it on a list. Each customer's list will live under the customer. So then we can access individuals' shopping lists and not have all of them under one giant list.
Functions
A function in JavaScript is something we use to group together what we are going to do with JavaScript. If we didn’t list JavaScript out into its own functions, then when we loaded the site it would all load at once. This would be like opening a basic web game and you’ve won as soon as you’ve loaded it. With functions, we can then define when we want to use them. So now when we load a game, you have to click ‘Start Game’ and the function will run to start the game. Once we’ve completed a level, the function will run to move on to the next level. Without using functions, we can still write JavaScript, but the website we’re interacting with would essentially have as much interactivity for our use as if we had never added it all.