0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<h2>JavaScript: what it is, and how it can be included in a page</h2>
1
<h2>JavaScript: what it is, and how it can be included in a page</h2>
2
<p>The JavaScript programming language was invented specifically for the purpose of creating interactive websites.</p>
2
<p>The JavaScript programming language was invented specifically for the purpose of creating interactive websites.</p>
3
<p>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:</p>
3
<p>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:</p>
4
<script src="file_address"></script><p>The script is usually included at the very end of the page, before the closing tag </body>.</p>
4
<script src="file_address"></script><p>The script is usually included at the very end of the page, before the closing tag </body>.</p>
5
<p>A JavaScript program is a sequence of instructions that tell the browser to take certain actions. Instructions are executed sequentially, from top to bottom.</p>
5
<p>A JavaScript program is a sequence of instructions that tell the browser to take certain actions. Instructions are executed sequentially, from top to bottom.</p>
6
<p>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 <i>most cases</i>, but the semicolon<b>always</b>works. Therefore, it is better to write a semicolon at the end of each instruction.</p>
6
<p>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 <i>most cases</i>, but the semicolon<b>always</b>works. Therefore, it is better to write a semicolon at the end of each instruction.</p>
7
<p>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.</p>
7
<p>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.</p>
8
<h2>Comments</h2>
8
<h2>Comments</h2>
9
<p>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.</p>
9
<p>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.</p>
10
<p>JavaScript has two kinds of comments:</p>
10
<p>JavaScript has two kinds of comments:</p>
11
// Single-line comments /* And multi-line comments. These can deactivate several lines of code at once. */<h2>QuerySelector method</h2>
11
// Single-line comments /* And multi-line comments. These can deactivate several lines of code at once. */<h2>QuerySelector method</h2>
12
<p>To find an element on a page, you need to use the querySelector method. It searches by selector:</p>
12
<p>To find an element on a page, you need to use the querySelector method. It searches by selector:</p>
13
document.querySelector('selector');<p>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.</p>
13
document.querySelector('selector');<p>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.</p>
14
<p>The second part of the instruction is what needs to be done. It is called the method.</p>
14
<p>The second part of the instruction is what needs to be done. It is called the method.</p>
15
<h2>Console</h2>
15
<h2>Console</h2>
16
<p>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:</p>
16
<p>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:</p>
17
console.log('Hello from JavaScript!'); // Displays: Hello from JavaScript! console.log(document.querySelector('.page')); // Displays the found element in the console<h2>Variable</h2>
17
console.log('Hello from JavaScript!'); // Displays: Hello from JavaScript! console.log(document.querySelector('.page')); // Displays the found element in the console<h2>Variable</h2>
18
<p>A variable is a way of storing data by giving it an understandable name.</p>
18
<p>A variable is a way of storing data by giving it an understandable name.</p>
19
<p>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 <b>assign</b>some value to the variable:</p>
19
<p>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 <b>assign</b>some value to the variable:</p>
20
let header = document.querySelector('header');<p>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<a>reserved words</a>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.</p>
20
let header = document.querySelector('header');<p>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<a>reserved words</a>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.</p>
21
<p>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:</p>
21
<p>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:</p>
22
console.log(header);<p>The keyword let appeared in JavaScript in 2015. Before that, the word var was used to declare variables.</p>
22
console.log(header);<p>The keyword let appeared in JavaScript in 2015. Before that, the word var was used to declare variables.</p>
23
<h2>Methods for changing classes</h2>
23
<h2>Methods for changing classes</h2>
24
<p>To remove a class from an element, use the classList.remove method. It removes the class that is indicated in parentheses from the element:</p>
24
<p>To remove a class from an element, use the classList.remove method. It removes the class that is indicated in parentheses from the element:</p>
25
element.classList.remove('class');<p>To add a class to an element, you need to use the classList.add method:</p>
25
element.classList.remove('class');<p>To add a class to an element, you need to use the classList.add method:</p>
26
element.classList.add('class');<p>The classList.toggle switcher removes the specified class from the element, if any exists, and adds it if this class does not exist:</p>
26
element.classList.add('class');<p>The classList.toggle switcher removes the specified class from the element, if any exists, and adds it if this class does not exist:</p>
27
element.classList.toggle('class');<h2>The textContent property</h2>
27
element.classList.toggle('class');<h2>The textContent property</h2>
28
<p>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:</p>
28
<p>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:</p>
29
let paragraph = document.querySelector('p'); paragraph.textContent = 'Muffin was here. Meow!';<h2>Property value</h2>
29
let paragraph = document.querySelector('p'); paragraph.textContent = 'Muffin was here. Meow!';<h2>Property value</h2>
30
<p>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:</p>
30
<p>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:</p>
31
let input = document.querySelector('input'); paragraph.textContent = input.value;<h2>Concatenation</h2>
31
let input = document.querySelector('input'); paragraph.textContent = input.value;<h2>Concatenation</h2>
32
<p>The operation when we “glue” several values together is called<b>concatenation</b>, and in JavaScript it is executed using the plus sign.</p>
32
<p>The operation when we “glue” several values together is called<b>concatenation</b>, and in JavaScript it is executed using the plus sign.</p>
33
let name = 'Muffin'; paragraph.textContent = 'Your name is' + name + '. Good day!'; console.log(paragraph.textContent); // Displays: Your name is Muffin. Good day!<h2>Event handlers onclick and onsubmit</h2>
33
let name = 'Muffin'; paragraph.textContent = 'Your name is' + name + '. Good day!'; console.log(paragraph.textContent); // Displays: Your name is Muffin. Good day!<h2>Event handlers onclick and onsubmit</h2>
34
<p>JavaScript can track everything that happens on the page. When a user clicks on a button or submits a form, this is an <i>event</i>. 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.</p>
34
<p>JavaScript can track everything that happens on the page. When a user clicks on a button or submits a form, this is an <i>event</i>. 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.</p>
35
<p>The onclick property means “when clicked”:</p>
35
<p>The onclick property means “when clicked”:</p>
36
let button = document.querySelector('button'); button.onclick = function() { console.log('Button pressed!'); };<p>Each time you click on a button, a new message will appear in the console: Button pressed!.</p>
36
let button = document.querySelector('button'); button.onclick = function() { console.log('Button pressed!'); };<p>Each time you click on a button, a new message will appear in the console: Button pressed!.</p>
37
<p>The onsubmit property is responsible for processing the form submission:</p>
37
<p>The onsubmit property is responsible for processing the form submission:</p>
38
let form = document.querySelector('form'); form.onsubmit = function() { console.log('Form submitted!'); };<p>After the form is submitted, the message Form submitted! will be displayed in the console.</p>
38
let form = document.querySelector('form'); form.onsubmit = function() { console.log('Form submitted!'); };<p>After the form is submitted, the message Form submitted! will be displayed in the console.</p>
39
<a>Continue</a>
39
<a>Continue</a>