Summary of “Introduction to JavaScript”

JavaScript: what it is, and how it can be included in a page

JavaScript was created specifically to make websites interactive.

We call JavaScript code a script. It is saved in a separate file with the extension js, and in order to launch it, the file must be included on a page. HTML has a special tag for adding JavaScript:

<script src="file_address"></script>

The script is usually included at the very end of the page, before the closing tag </body>.

A JavaScript program is a sequence of instructions that tell the browser to take certain actions. Instructions are executed sequentially, from top to bottom.

We end the instructions in our examples with a semicolon. JavaScript can often work out where an instruction ends without one, but a line break is not always enough. Using semicolons consistently makes the boundaries of these instructions clear.

JavaScript does not change the source file with the markup, but rather it changes the page directly in the user’s browser in the process of following instructions.

Comments

A comment is text that provides an explanation of the code. It is not displayed in the browser and does not affect the operation of the program. Any instructions inside the comment are not executed, so comments are often used if you need to temporarily disable part of the code.

JavaScript has two kinds of comments:

// Single-line comments

/*
And multi-line comments.
These can deactivate several lines of code at once.
*/

The querySelector method

To find an element on a page, you need to use the querySelector method. It searches by selector:

document.querySelector('selector');

This instruction has two main parts. The first is the object to search: document represents the web page that includes the script. The HTML file can have any name; document still gives us access to its elements. The second part tells JavaScript what to do. It calls the querySelector method to find the first element matching the selector in parentheses.

Console

The console is a developer tool that will help us to test our code. If an error occurs during the execution of the script, an error message will appear in the console. You can also output text messages to the console. To output a message to the console, call console.log:

console.log('Hello from JavaScript!');
// Displays: Hello from JavaScript!

console.log(document.querySelector('.page'));
// Displays the found element in the console

Variable

A variable is a way of storing data by giving it an understandable name.

You can create a variable or declare one using the keyword let. It is followed by the name of the variable. After the declaration, we need to add or assign some value to the variable:

let header = document.querySelector('header');

The variable name can be almost anything, but it should not start with a number, and '_' and '$' are the only allowed special characters. In addition, JavaScript has reserved words that cannot be used to name variables. Variable names are case sensitive: header, Header and HEADER are different variables. The variable name should describe what is stored in it.

When a variable occurs in the code, the browser substitutes the value assigned to it instead of its name. When we use the variable, there is no need to write let again:

console.log(header);

The keyword let appeared in JavaScript in 2015. Before that, the word var was used to declare variables.

Methods for changing classes

To remove a class from an element, use the classList.remove method. It removes the class that is indicated in parentheses from the element:

element.classList.remove('class');

To add a class to an element, you need to use the classList.add method:

element.classList.add('class');

The classList.toggle method removes the specified class if the element has it, and adds it otherwise:

element.classList.toggle('class');

The textContent property

Elements have many properties that we can read or change. The textContent property holds an element’s text content. Properties can be assigned new values:

let paragraph = document.querySelector('p');
paragraph.textContent = 'Muffin was here. Meow!';

The value property

Input fields have a special property — value. It stores the data that was entered in the field. We can display this value directly on the page:

let input = document.querySelector('input');
paragraph.textContent = input.value;

Concatenation

Joining several strings together is called concatenation. In JavaScript, we use the plus sign to do this.

let name = 'Muffin';
paragraph.textContent = 'Your name is ' + name + '. Good day!';
console.log(paragraph.textContent);
// Displays: Your name is Muffin. Good day!

Event handlers onclick and onsubmit

JavaScript can respond to events on the page. When a user clicks on a button or submits a form, this is an event. We can tell JavaScript what to do when an event occurs. Event handlers are used to do this. The instructions that will be executed when the event occurs are placed between curly braces.

The onclick property means “when clicked”:

let button = document.querySelector('button');
button.onclick = function() {
  console.log('Button pressed!');
};

Each time you click on a button, a new message will appear in the console: Button pressed!.

The onsubmit property is responsible for processing the form submission:

let form = document.querySelector('form');
form.onsubmit = function() {
  console.log('Form submitted!');
};

After the form is submitted, the message Form submitted! will be displayed in the console.