Summary of “Conditions and creating elements”

How to include several scripts on a page

In order to include yet another file with JavaScript code on a page, use the script tag again:

<body>

  <script src="themes.js"></script>
  <script src="likes.js"></script>
</body>

The browser processes the instructions sequentially: first in the first file, then in the second, as though they were located in a single place. Applications are often divided into several files, where usually one task corresponds to one file: for example, managing themes or subscribing to a newsletter.

Numbers

A variable can be assigned a value. Numbers do not need to be enclosed in quotation marks:

let number = 0;

To increase or decrease the number in JavaScript, you can use various entries:

// Fully entry
number = number + 2; // Variable value: 2
number = number - 2; // Variable value: 0

// Short entry
number += 2; // Variable value: 2
number -= 2; // Variable value: 0

// Increase the number by 1
number++; // Variable value: 1

// Decrease the number by 1
number--; // Variable value: 0

classList.contains method

The classList.contains method checks if an element has a class:

element.classList.contains('class');

The method will return true if the element has a class, and false if there is no class. The true and false values are called boolean values. There are only two such values.

Conditional statement

A conditional statement allows you to perform actions depending on a condition. A condition is an instruction that returns true or false. A conditional statement looks like the following:

if (condition) {
  // Instructions that are executed if the condition is true
} else {
  // Instructions that are executed if the condition is false
}

if

The condition is written in parentheses after the word if. After that, instructions that will be executed if the condition is true are written inside the curly braces. A condition is considered true if the statement inside the parentheses returns true.

else

The statement else tells JavaScript what to do if the condition is false. Instructions that should be executed if the condition returns false are written inside the curly braces after else.

The use of conditional statements in a script is also called branching, and the code inside the curly braces is called a branch.

append method

parent-element.append(element to be added);

The append method adds the element in parentheses to the end of the parent element. However, the contents of the parent element are not overwritten. You can use this method to add elements and strings of text.

createElement method

document.createElement('tag name');

To create a new element on the page where the script is included, you need to use the word document. Indicate the element to be created inside the quotation marks in parentheses. For example:

// Create a new element <div> and write it to the variable
let newElement = document.createElement ('div');

The new element will be accessible from the script, but it will not appear in the markup until we tell JavaScript where to place the new element. To do this, you can use append method:

// Find the parent element
let parent = document.querySelector('.parent');

// Add a new element to the page
parent.append(newElement);

Elements that were created using the createElement method can be changed in the same way as any others.

Clearing the input field

To prevent the user from mistakenly submitting the form several times, it is better to clear the input field after it is submitted. To do this, write an empty string to its value property. Like this:

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

Continue