JavaScript Fundamentals

Picture your website as a house. You start with a foundation, a bunch of walls, a roof, windows, doorways, and whatever else you need for a sound structure. That's your HTML.

You go into your house and think, ew. Ugly. So you add some curtains, carpet, art, and plants. Maybe a couch and a bed. Way nicer. That's your CSS.

Then you think, wow this house is nice but I can't really do a lot in here. So you put in all your furniture, tools, and appliances: your heating system, your fridge, your lights, phone, and coffee machine. That's JavaScript.

Basically, HTML is your website's foundation, CSS is its deco, and JavaScript is its functionality and Pizzazz.

Control flow: in JavaScript is the flow your computer runs through when reading code. Starting from the top of the code and ending at the bottom, your computer follows each statement and only changes what the control flow does when it hits a statement (e.g. a function) that changes it. You could think of it as that bucket fountain in Wellington, and the changes are the buckets that change the flow.

Loops: are statements that keep running until the condition you set is no longer true or there is nothing left that you can loop. There are several types of loops, but we are focusing on for loops at the moment, which loops through code blocks whatever number of times you specify. It's like a wheel on a bike that will keep spinning depending on how much you push it.

The DOM

JavaScript is what makes your page interactive.

The document object model ties JavaScript, HTML, and CSS so they can all work together.

The DOM is a Web API that builds websites, the structural representation of your entire HTML document - picture it in a tree view where the window is the parent of the document, which is the parent of the HTML, which parents the head & body, etc.

Nodes: the browser automatically makes a bunch of other stuff whenever you add an HTML element.

The DOM allows you to manipulate documents in the browser window. Since it is an object oriented representation, you can modify it using JavaScript.

When you enter document.something into your console, that is the DOM specifying for the code snippet to return something to you. For example document.querySelector(‘#test-button’) is the DOM telling the code to pay attention to your page’s theoretical test button id.

The DOM is not a programming language in itself. Often you will write JavaScript commands to use the DOM to access the document, and without the DOM, JavaScript would have no idea what is going on with your web pages.

Events:

When events happen, they pass through the DOM between the different codes you use.

Arrays vs Objects

Objects are things in your code that you can attach properties to. For example:

Arrays are more like a list of items (such as booleans, numbers, strings, objects) in an order, often sharing a category of some sort. For example:

You can have an array in an object, and you can have objects in an array.

Functions

Functions are pieces of code that perform tasks. Then, by calling the function, you can make the thing happen.

Some things you can do with functions include addition, multiplication, and other simple math equations, plus conversions, make alerts, reactions in your code, and much more.

Go back to Home