Summary of “Introduction to JavaScript”

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

The JavaScript programming language was invented specifically for the purpose of creating interactive websites.

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.

To tell JavaScript that the instruction is complete, you need to write a semicolon or make a line break. The line break works correctly in most cases, but the semicolon always works. Therefore, it is better to write a semicolon at the end of each instruction.

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.
*/

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 consists of two parts. The first part is the element that JavaScript will search inside. The word document indicates the web page where the script is included. It really doesn’t matter what the name of the file is. In JavaScript it is always a “document”. It is the parent element of any other element on the page.

The second part of the instruction is what needs to be done. It is called the method.

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. And you can also output text prompts to the console. To output a message to the console, you need to use the 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 switcher removes the specified class from the element, if any exists, and adds it if this class does not exist:

element.classList.toggle('class');

The textContent property

Each element has many properties, including size, color, and so on. The textContent property is used to contain the textual content of the element. Properties can be assigned new values:

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

Property value

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

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

Concatenation

The operation when we “glue” several values together is called concatenation, and in JavaScript it is executed using the plus sign.

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 track everything that happens 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.