JavaScript Section

Purpose

Considering you’re on this section, you likely have learned that HTML is what structures website and CSS is what styles and adds design to websites. JavaScript add to this list: It makes the website interactive.

This guide will go over some of the most fundamental concepts relating to JavaScript.

Variables

Variables are essentially how data is stored in usable containers in code.

There are 4 ways this can be done, but only two are recommended.

The first of these methods is let. It allows the variable to be changed after it is defined:

let x = 5;
x = 6; // Successfully changes value

The second of these methods is const. After the variable is defined, it cannot be changed:

const x = 5;
x = 6; // WILL NOT WORK

Checkpoint: Practice Variables

Define at least three variables using either let or const and initialize each variable with a different data type.

Operators

Mathematical operators are often used in JavaScript and other programming languages. Below is a handful of operators:

Addition operator:

let x = 5;
let y = 3;

let z = x + y

// z will output 8
console.log(z);

Subtraction operator:

let x = 5;
let y = 3;

let z = x - y;

// z will output 3
console.log(z);

Multiplication operator:

let x = 5;
let y = 2;

let z = x * y;

// z will output 10
console.log(z);

Division operator:

let x = 10;
let y = 2;

let z = x / y;

// z will output 20
console.log(z);

Modulus operator:

let x = 10;
let y = 2;

let z = x % y;

// z will output 0
console.log(z);

Exponential operator:

let x = 2;
let y = 4;

let z = 2**4;

// z will output 16
console.log(z);

Checkpoint: Practice JavaScript Operators

Define two variables and use JavaScript operators such as +, -, *, and % to perform calculations. Use the buttons below to save your code locally or reload it later.

Function

Functions are reusable blocks of code that code to be more efficiently and concisely managed. In JavaScript, they are formatted like the following:

function name(p1, p2) {
    // Code here
}

These are each of the individual components of a function:

Each function must be initialized with the keyword 'function'

Next comes the name of the function followed by a pair of parentheses ()

Inside the parentheses are optional parameters that can be used in the function

After the function name and possible parameters have been established, curly brackets { } are used to hold the code

At this point, you write the code you want to reuse!

Checkpoint: Practice Functions

Make a function that takes two parameters, n1 & n2, and returns the multiplied value of those parameters.

DOM Basics

JavaScript can be used to edit dynamically edit HTML content as well!

Here is an example of how that can be done:

<p id="change-content"></p>

<script>
    const element = document.getElementById("change-content");
    element.innerHTML = "Hello, World!"
</script>

Essentially, in order to change the content of an HTML tag, you must first apply an identifier to the certain tag. This allows us to identify and access that tag in JavaScript via the ID.

Once an ID is in place, in JavaScript, a variable is defined that retrieves the element via its id with the code document.getElementById("id-here");

Now, at this point, the variable can be used to access the HTML by using .innerHTML = " "; allowing for the text of the HTML tag to be directly modified.

Console and console.log()

A very useful part of JavaScript is the tools it provides to help developers debug their code.

The most prominent of these ‘tools’ is console.log(), while allow developers to output and record how their code works and reacts in a special place on a web page called the console.

The console can be accessed by the shortcut Control+Shift+J for Windows and Linux or Command+Option+J for Mac.

Using console.log() outputs stuff straight here to the console. You can only use console.log() in the console itself! Try it out by typing the following code in the console: console.log("Hello, World!");.

It should output Hello World.

console.log() is used in many applications beyond this, and is helpful for debugging certain parts of your code. So, when trying to identify why certain parts of the codes are acting in an unintended manner, consider using console.log() to help out.

Checkpoint: Practice console.log()

Define two variables and add their values to together. Use console.log() to output the value of the variables individually as well as their combined value.

← Previous Lesson Next Lesson →