JavaScript

console.log("Hello World!");

’ ‘ can be used instead of “ “ and ; is optional

Datatypes

var myNum = 5; //global variable
let myString = "Hello"; //local variable
const myBool = true; //local constant

var myNumbrs[] = {1,2,3}; //array
var dict = {name:"John", age:30, city:"New York"}; //dictionary

Operators

Arithmetic

Operator	Name	Example
+	Addition	x + y
-	Subtraction	x - y
*	Multiplication	x * y
**	Exponentiation	x ** y
/	Division	x / y
%	Modulus	x % y
++	Increment	i++
–	Decrement	i--

Assignment

Operator	Example	Same As
=	x = 5	x + y
+=	x += 5	x = x + 5
-=	x -= 5	x = x - 5
*=	x *= 5	x = x * 5
**=	x **= 5	x = x ** 5
/=	x /= 5	x = x / 5
%=	x %= 5	x = x % 5

Comparison

Operator	Name	Example
==	equal to (same value)	x == y
===	equal to (same value and type)	x === y
!=	not equal to	x != y
>	greater than	x > y
<	less than	x < y
>=	greater than or equal to	x >= y
<=	less than or equal to	x <= y

Logical

Operator	Name	Description	Example
&&	AND	returns true if both statements are true	x < 5 && x < 10
||	OR	returns true if one of the statements is true	x < 5 || x < 4
!	NOT	reverse the result, returns false if the result is true	!(x < 5 && x < 10)

Casting

change the data type of a variable

var x = 3
var x_as_string = String(x)
var x_as_int = Number(x_as_string)

String Operations

var a = "Hello, World!"
var b = 420
a += b //Hello, World!420

a.length //16
a.slice(0, 5) //returns the first 5 letters (Hello)
a.charAt(1) //returns the second letter (e)
a.toUpperCase() //sets all letters as upper case
a.toLowerCase() //sets all letters as lower case
a.trim() //removes all whitespaces
a.replace("H", "J") //replase a letter

Arrays

can contain different data types

var cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel"; //change value
cars.push("Audi"); //add value
cars.pop(); //remove last value
cars.shift(); //remove first value
cars.length; //returns the length
cars.sort((a, b) => a - b); //sorts the array

If you just use the sort() function, the array will be sorted alphabetically.

Flow Control

if else statement

if (time < 10) {
  greeting = "Good morning";
} else if (time < 20) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

switch statement

works with int and char

let x = "0";
switch (x) {
  case 0:
    text = "Off";
    break;
  case 1:
    text = "On";
    break;
  default:
    text = "No value found";
}

if there is no ‘break’ the next case will be executed too

for loop

for (var i = 0; i < 5; i++) {
  console.log("helloworld"); //prints helloworld 5 times
}

loop through array

for (var i = 0; i < cars.length; i++) {
  console.log(cars[i]);
}

forEach

cars.forEach((item, index, array) => {
  console.log(item, index);
})

functions

function myFunction(a, b) {
  return a * b;             // Function returns the product of a and b
}

let x = myFunction(4, 3);   // Function is called, return value will end up in x

arrow function

var hello = () => {
  return "Hello World!";
}

Query selectors

select DOM elements

selects the first element with the tag body

var body = document.querySelector('body');

selects the element with the id button

var button = document.querySelector('#button');

selects all elements with the class someclass and returns an array

var classElements = document.querySelectorAll('.someclass');

Create elements

var newElement = document.createElement('div'); //creates a new div element
var text = document.createTextNode('Hello World!'); //creates a text node
newElement.appendChild(text); //adds the text node to the div element
document.querySelector('body').appendChild(newElewment); //adds the div element to the body

inner HTML

var div = document.querySelectorAll('div')[0];
div.innerHTML = '<p>some text</p>'; //replaces the content of the div with a paragraph

HTML attributes

change HTML attributes (attribute names are written in camelCase)

var img = document.querySelectorAll('img')[0]; //selects the first image
body.class += 'someclass'; //adds the class someclass to existing classes
img.src = 'path/to/image.jpg';
img.alt = '#';

var a = document.querySelectorAll('a')[0];
a.href = 'https://github.com/SaracenRhue';

CSS attributes

change CSS attributes (attribute names are written in camelCase)

var body = document.querySelector('body');
body.style.backgroundColor = 'red';

JSON fetch

get data from a JSON file json files are formatted lika a dictionary {} or multiple dictionaries in an array [{},{}]

fetch("./src/data.json").then((response) => {
      return response.json();
    }).then((json) => {
      json.forEach((object) => {
        console.log(object.name);
      });
    });