Websites are made of three layers.

1. Content layer ⇾ Informationes ⇾ HTML
2. Presentation layer ⇾ Layout ⇾ CSS
3. Behavior layer ⇾ Interactions ⇾ Java Script

Running / executing the program

The web browser reads each statemant from the top down to the bottom.

If you want your content displayed in a special order you need to write them exactly like that.

Variables

A variable is like a box.

You can put something inside, look into it and empty it out.

Write a variable like this:

var ( = key word ) score ( = specific name of variable ) = Value;

You can even keep the box empty. ( var score; )

Unusable variable names:

1. break
2. case
3. catch
4. class
5. const
6. continue
7. debugger
8. default
9. delete
10. do
11. else
12. enum
13. export
14. extend
15. finally
16. for
17. function
18. if
19. import
20. in
21. instanceof
22. let
23. new
24. return
25. super
26. switch
27. this
28. throw
29. try
30. typeof
31. var
32. void
33. while
34. with
35. yield

Those names are reserved for JavaScript. When you use them you'll get a system error.

There might be more in the future.

You can also not use numbers in the beginning of the name.

Values

There are multiple value types:

1. Numbers
2. Strings
3. Booleans

and more.

Concatenation

Combining multiple strings is called concatenation.

You can eather write varName = varName + "add text";

or varName += "add text";

Last one is the shortcut. It takes the varName and adds to whatever is in the "box".

Objects

can be a string, the document, the browser's console, etc

Objects have properties, such as the length of a string.

Objects have methodes, which are actions the object can perform.

Numbers

Integer are whole numbers (like 46).

Floating Point Numbers are numbers with a dezimal point
(like 45.813).

Scientific Notations are used to represent realy small or realy large numbers (like 9e+5 instead of 900 000).

Functions

Functions are used to define a way of doing.

You first tell the program how it has to do the task. Then you can just tell it to execute it.

With this you can run multiple lines of code with only one command as often as you like.

Example:

function name (i){
console.log(i);
}

Excess the functin with name(parameter);

You even can call a function within a function.

Scope

Global Scope: When you're starting to write in your document, you are in the global scope. There is only one global scope throughout a JavaScript document. A variable is in the Global scope if it's defined outside of a function. Variables inside the Global scope can be accessed and altered in any other scope.

Local Scope: Variables defined inside a function are in the local scope. And they have a different scope for every call of that function. This means that variables having the same name can be used in different functions. This is because those variables are bound to their respective functions, each having different scopes, and are not accessible in other functions.

Loops

Loops are used to do a task multiple times without repeating your code.

Repeating code snippets would make your code iternaly long and sometimes you don't even know how often the task is supposed to run because it depends on the user's behavior.

There are multiple options for loops.

1. for-Loop
2. forEach-Loop
3. for...of-Loop
4. for...in-Loop
5. while-Loop
6. do...while-Loop

Never run a loop without a stopping condition. This can end in a brackdown of the browser.

for-Loop

for (var i = 0; i < object.length; i++) {
··code··
return ...;
}

forEach-Loop

var array1 = [‘ a’, ‘ b’, ‘ c’];

array1.forEach(function(element) {
··code··
});

for...of-Loop

for (variable of object) {
··code··
}

for...in-Loop

for (variable in object) {
··code··
}

while-Loop

var n = 0;
var x = 0;

while (n < 3) {
n++;
x += n;
}

do...while-Loop

var i = 0;
do {
i += 1;
··code··
} while (i < 5);