Data types and variables

Variables are containers for storing data. Three Methods for declaring a JavaScript Variable are:

var x = 5;
var y = 6;
var z = x + y;

let x = 5;
let y = 6;
let z = x + y; 

const x = 5;
const y = 6;
let z = x + y;

The Difference between let and var is the variables defined with ‘let’ cannot be re-declared while the variables defined with ‘const’ can be re-declared.

Example:
let x = "John Doe";
let x = 0;				(NOT ALLOWED)

var x = "John Doe";
var x = 0;				(ALLOWED)

A ‘const’ variable cannot be reassigned

Example

const PI = 3.141592653589793;
PI = 3.14;      // This will give an error
PI = PI + 10;   // This will also give an error

Console

In this section we will learn how to run JavaScript in the Chrome Console. We can open our console in the web browser by pressing Ctrl + Shift + K, or by right-clicking on any webpage and selecting Inspect, from which we can see the site's source code, CSS code and JavaScript code that powers animations and more. It also includes a console option where we can run our JavaScript code. A console is a JavaScript object that provides access to the browser's debugging console. This object provides us with a variety of methods such as log(), error(), table() and so on. Each method can use for different purposes. These methods are mentioned below:

This method prints a warning message to the console. The warning message is highlighted with yellow by default.

The console.count() method is used to count the number of times for which function is called.

for (let i = 0; i < 5; i++) {
  console.count();
}

This function is used to log error messages to the console. This is useful for code testing. The error message will be highlighted in red by default.

The console object's group() and groupEnd() methods allow us to group contents in a separate indented block. They accept the label, which has the same value as time() and timeEnd().

console.log("Hello world!");
console.group();
console.log("Hello again, this time inside a group!");
console.groupEnd();
console.log("and we are back.");

The method log() prints the output to the console. We can print anything by writing inside the log (“......”). It could be an array, object, string, boolean, or something else.

We use the console.table() method to create a table within a console. The input must be an array or an object that will be displayed in the form of a table. In this example, the object is used as an input.

The time and timeEnd() function is used to start and end a timer in the javascript console.

operators

Operators are the building blocks of any programming language. Operators can be defined as symbols that allow us to perform specific mathematical and logical computations on operands. To put it another way, an operator controls the operands.

Types of operator:
• Arithmetic Operators
• Assignment Operators
• Comparison Operators
• Logical Operators

Arithmetic operators are the operator used for arithmetic operations like addition, subtraction, multiplication, division etc.

      let a = 3;
      let x = (100 + 50) * a;

Assignment operators are used for assigning values in javascript.

        let x = 10;
        x += 5;

Comparison operators are used for comparing the operand of the given expression.

DOM - Documemt Object Model

The Document Object Model (DOM) is a data representation of the objects that make up a web document's structure and content. The DOM is a web document programming interface. It represents the page so that programmes can change the structure, style, and content of the document. The document is represented by the DOM as nodes and objects, allowing programming languages to interact with the page. A web page is a document that can be viewed in the browser window or as HTML source code. It is the same document in both cases, but the Document Object Model (DOM) representation allows it to be manipulated. It can be modified with a scripting language such as JavaScript because it is an object-oriented representation of the web page.

The method getElementById() returns an element with the specified value. If the element does not exist, the getElementById() method returns null. One of the most common methods in the HTML DOM is getElementById(). It is almost always used when you want to read or edit an HTML element.

  const myElement = document.getElementById("demo");
  myElement.style.color = "red";

The getElementsByName() method returns a list of elements with the specified names. The method getElementsByName() returns a live NodeList.

NodeList: A NodeList is a collection (list) of nodes that looks like an array. The nodes in the list are accessible via index. The index begins at 0.

  let elements = document.getElementsByName("fname");

The method getElementsByTagName() returns a collection of all elements that have the specified tag name. The method getElementsByTagName() returns an HTMLCollection. The property getElementsByTagName() is read-only.

  const collection = document.getElementsByTagName("li");

The getElementsByClassName() method returns a collection of elements that belong to the specified class(s). The method getElementsByClassName() returns an HTML collection. The property getElementsByClassName() is read-only.

  const collection = document.getElementsByClassName("example color");

Events

An Event is a change in the state of an object. There are various events in HTML that represent some activity performed by the user or the browser. When javascript code is embedded in HTML, it reacts to these events and allows the code to run. Event Handling refers to the process of reacting to events. Thus, JavaScript handles HTML events through event handlers.

An HTML event can be initiated by the browser or by the user.

Here are some HTML event examples:

• An HTML web page has completed loading.
• An HTML input field was modified.
• An HTML button was pressed.

Loops

Loops are a quick and easiest way to repeat functions/events. This section will guide JavaScript's various loop statements. A loop can be thought of as a computerised version of the game where you tell someone to take X steps in one direction, then Y steps in the opposite direction. For example, "Go five steps to the east" could be expressed as a loop in this manner.

Types of loops

• For loop
• For in loop
• For of loop
• While loops

‘For’ loop statement creates a loop with 3 optional expressions.

  for (let i = 0; i < 5; i++) {
    text += "The number is " + i + "
";
  }

The JavaScript for in statement loops through the properties of an Object.

const person = {fname:"John", lname:"Doe", age:25};
  
  let text = "";
  for (let x in person) {
    text += person[x];
  }

The JavaScript for of statement loops through the values of an iterable object.

  const cars = ["BMW", "Volvo", "Mini"];
  let text = "";
  for (let x of cars) {
    text += x;
  }

The while loop statement loops through a block of code as long as a specified condition is true.

  while (i < 10) {
    text += "The number is " + i;
    i++;
  }

Conditions

By using the ‘if’ statement a block of statements will be executed until the condition is true. If the condition is false, then the block of statements will not be executed. If we want to execute more than one condition, then we use ‘else’/’’else if’ statement with ‘if’.

  let hour = new Date().getHours();
  if (hour < 20) {
    greeting = "Good day";
  } else {
    greeting = "Good evening";
  }

  if (condition1) {
    // block of code to be executed if condition1 is true
  } else if (condition2) {
    // block of code to be executed if the condition1 is false and condition2 is true
  } else {
    // block of code to be executed if the condition1 is false and condition2 is false
  }

The switch statement is a type of conditional statement in JavaScript, which is used to perform one condition out of different conditions. This is an excellent choice for long, nested if/else statements. The switch statement is used to evaluate an expression. The expression's value is then compared to the values of each case in the structure. If a match is found, the associated block of code is executed.

  switch(expression) {
    case n:
      code block
      break;
    case n:
      code block
      break;
    default:
      default code block
  }

Function

A JavaScript function is a piece of code that is designed to perform a specific task. When someone calls a JavaScript function, it executes it (calls it). The function keyword is followed by a name, followed by parentheses, to define a JavaScript function(). Letters, digits, underscores, and dollar signs can be used in function names (same rules as variables). Parameter names separated by commas may be included in the parentheses. The function's code to be executed is enclosed in curly brackets {}

  function myFunction(p1, p2) {
    return p1 * p2;
  }
  function name(parameter1, parameter2, parameter3) {
    // code to be executed
  }

The function will stop executing when it reaches a return statement in JavaScript. If the function was called from a statement, JavaScript will "return" to run the code after the statement that called it. Functions frequently generate a return value. The result is "returned" to the "caller."

  let x = myFunction(4, 3);   // Function is called, return value will end up in x
  function myFunction(a, b) {
    return a * b;             // Function returns the product of a and b
  }
  

Array

A JavaScript array is a single variable that stores multiple elements. It is frequently used when we need to store a list of elements and access them using a single variable. In contrast to most languages, where an array is a reference to multiple variables, an array in JavaScript is a single variable that stores multiple elements. Arrays allow us to store multiple values of the same data type in a single variable name; otherwise, we have to declare separate variables for each value. If you want to loop over a larger number of elements, it is more efficient to store the values in an array rather than writing the same code for each value repeatedly.

 const cars = ["Saab", "Volvo", "BMW"];

• Converting Arrays to Strings
• Popping and Pushing
• Shifting Elements
• JavaScript Array length
• JavaScript Array delete()
• Merging Arrays
• Splicing and Slicing Arrays
• Sorting an array
• Reversing an array

  const fruits = ["Banana", "Orange", "Apple", "Mango"];
  document.getElementById("demo").innerHTML = fruits.toString();
  

The pop() method removes the last element from an array.

  const fruits = ["Banana", "Orange", "Apple", "Mango"];
  fruits.pop();

  const fruits = ["Banana", "Orange", "Apple", "Mango"];
  fruits.push("Kiwi");

The shift() method removes the first array element and "shifts" all other elements to a lower index.

  const fruits = ["Banana", "Orange", "Apple", "Mango"];
  fruits.shift();

The unshift() method adds a new element to an array (at the beginning), and "unshifts" older elements.

  const fruits = ["Banana", "Orange", "Apple", "Mango"];
  fruits.unshift("Lemon");

The length property provides an easy way to append a new element to an array.

  const fruits = ["Banana", "Orange", "Apple", "Mango"];
  fruits[fruits.length] = "Kiwi";

Array elements can be deleted using the JavaScript operator delete.

const fruits = ["Banana", "Orange", "Apple", "Mango"];
  delete fruits[0];

The concat() method creates a new array by merging (concatenating) existing arrays

  const myGirls = ["Cecilie", "Lone"];
  const myBoys = ["Emil", "Tobias", "Linus"];
  const myChildren = myGirls.concat(myBoys);

The splice() method adds new items to an array.

  const fruits = ["Banana", "Orange", "Apple", "Mango"];
  fruits.splice(2, 0, "Lemon", "Kiwi");

The slice() method slices out a piece of an array.

  const fruits = ["Banana", "Orange", "Apple", "Mango"];
  fruits.splice(2, 2, "Lemon", "Kiwi");

The sort() method sorts an array alphabetically.

  const fruits = ["Banana", "Orange", "Apple", "Mango"];
  fruits.sort();

The reverse() method reverses the elements in an array.

  const fruits = ["Banana", "Orange", "Apple", "Mango"];
  fruits.sort();
  fruits.reverse();

String

Strings can be used to store data that can be represented in text form. Some of the most common string operations are length checking, building and concatenating strings with the + and += string operators, checking for the existence or location of substrings with the indexOf() method, and extracting substrings with the substring() method.

    let text = "John Doe";

Escape Sequence

• String length
• String slice()
• String substring()
• String substr()
• String replace()
• String replaceAll()
• String toUpperCase()
• String toLowerCase()
• String concat()
• String trim()
• String trimStart()
• String trimEnd()
• String padStart()
• String padEnd()
• String charAt()
• String charCodeAt()
• String split()
• String indexOf()
• String lastIndexOf()
• String search()
• String match()
• String matchAll()
• String includes()
• String startsWith()
• String endsWith()
String length()

let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let length = text.length;

Slice property extracts a portion of a string and returns it in a new string.

let text = "Apple, Banana, Kiwi";
let part = text.slice(7, 13);

Substring property is similar to slice. The difference is that in substring, start and end values less than 0 are treated as 0.

let str = "Apple, Banana, Kiwi";
let part = str.substring(7, 13);

Substring function is similar to slice function. The second parameter, on the other hand, specifies the length of the extracted part.

let str = "Apple, Banana, Kiwi";
let part = str.substr(7, 6);

The replace() method in a string replaces a specified value with another value.

let text = "Please visit Microsoft!";
let newText = text.replace("Microsoft", "W3Schools");

Instead of a string to be replaced, the replaceAll() method allows you to specify a regular expression.

text = text.replaceAll(/Cats/g,"Dogs");
text = text.replaceAll(/cats/g,"dogs");

A string is converted to upper case with toUpperCase()

let text1 = "Hello World!";
let text2 = text1.toUpperCase();

A string is converted to lower case with toLowerCase()

let text1 = "Hello World!";     
let text2 = text1.toLowerCase();

concat() joins two or more strings

let text1 = "Hello";
let text2 = "World";
let text3 = text1.concat(" ", text2);

Trim() removes all whitespace from both sides of a string.

let text1 = "     Hello World!     ";
let text2 = text1.trimStart();

The trimStart() method works like trim(), but removes whitespace only from the start of a string.

let text1 = "     Hello World!     ";
let text2 = text1.trimStart();

The trimEnd() method works like trim(), but removes whitespace only from the end of a string.

let text1 = "     Hello World!     ";
let text2 = text1.trimEnd();

The padStart() method pads a string with another string

let text = "5";
let padded = text.padStart(4,"x");

let text = "5";
let padded = text.padEnd(4,"x");

The charAt() method returns the character at a specified index (position) in a string.

let text = "HELLO WORLD";
let char = text.charAt(0);

The charCodeAt() method returns the unicode of the character at a specified index in a string

let text = "HELLO WORLD";
let char = text.charCodeAt(0);

A string can be converted to an array with the split() method.

text.split(",")    // Split on commas
text.split(" ")    // Split on spaces
text.split("|")    // Split on pipe

The indexOf() method returns the index of (position of) the first occurrence of a string in a string

let str = "Please locate where 'locate' occurs!";
str.indexOf("locate");

The lastIndexOf() method returns the index of the last occurrence of a specified text in a string

let text = "Please locate where 'locate' occurs!";
text.lastIndexOf("locate");

The search() method searches a string for a string (or a regular expression) and returns the position of the match

let str = "Please locate where 'locate' occurs!";
str.search("locate");

The match() method returns an array containing the results of matching a string against a string

let text = "The rain in SPAIN stays mainly in the plain";
text.match("ain");

The matchAll() method returns an iterator containing the results of matching a string against a string

const iterator = text.matchAll("Cats");

The includes() method returns true if a string contains a specified value

let text = "Hello world, welcome to the universe.";
text.includes("world");

The startsWith() method returns true if a string begins with a specified value

let text = "Hello world, welcome to the universe.";
text.startsWith("Hello");

The endsWith() method returns true if a string ends with a specified value

let text = "John Doe";
text.endsWith("Doe");

Classes

Classes serve as a starting point for the creation of objects. They encapsulate data with code that allows them to work with it. Classes in JS are built on prototypes, but they also have their own syntax and semantics.

    class Car {
      constructor(name, year) {
        this.name = name;
        this.year = year;
      }
    }
    
    let myCar1 = new Car("Ford", 2014);
    let myCar2 = new Car("Audi", 2019);

Class methods are created in the same way that object methods are. To create a class, use the keyword class. Include a function Object() { [native code] }() method at all times. Then you can add as many methods as you want.

    class ClassName {
      constructor() { ... }
      method_1() { ... }
      method_2() { ... }
      method_3() { ... }
    }

Object

Objects, in JavaScript are the most important data type and form the building blocks for modern JavaScript. These objects are quite different from JavaScript’s primitive data types (Number, String, Boolean, null, undefined, and symbol) in the sense that these primitive data types all store a single value each.

    const person = {
      firstName: "John",
      lastName: "Doe",
      age: 50,
      eyeColor: "blue"
    };

Date and Time

setDate method allow to set the date values (years, months, days, hours, minutes, seconds, milliseconds) for a Date Object

The setDate() method sets the day of a date object (1-31).

  const d = new Date();
  d.setDate(15);

The setFullYear() method can optionally set month and day

  const d = new Date();
  d.setFullYear(2020, 11, 3);

The setHours() method sets the hours of a date object (0-23).

  const d = new Date();
  d.setHours(22);

getMilliseconds() returns the milliseconds (0 to 999) of a date.

  const d = new Date("July 21, 1983 01:15:00:526");
  let ms = d.getMilliseconds();

The setMinutes() method sets the minutes of a date object (0-59).

  const d = new Date();
  d.setMinutes(30);

The setMonth() method sets the month of a date object (0-11)

  const d = new Date();
  d.setMonth(11);

  const d = new Date();
  d.setSeconds(30);

  const d = new Date();
  d.setTime(1332403882588);