The User Maldito's Web

It has 3 type of variables: let, var and const.

Basic example:

const firstNumber = 5; //Can't change
let secondNumber = 3;
secondNumber = 5; //Changed the data stored
var result = firstNumber + secondNumber;
console.log(result);
//Expected output: 13
                                    

Function: piece of encapsulated code

Defined with function, FunctionName, "()" followed by "{}". The "return" keyword (inside, in the end of {}) gives you back the value (made to be stored in a variable)

Advanced Example:

function FastCalc(firstNumber, secondNumber){
    //This variable does not exist outside the brackets
    let resultCalc = firstNumber + secondNumber;
    return resultCalc;
}

var result = FastCalc(2, 7);
                                

Or like a variable:

const fastCalc = (firstNumber, secondNumber) => {
    return firstNumber + secondNumber;
}

var result = fastCalc(2, 7);
                                

Conditionals: "If something happens, I will do this". There is 2 type of conditional if else and switch

let number = 28;
let isNumber = true;

//Only enter if the statement is true
if (isNumber) { 
    alert("Is a number!");
}
else{
    alert("Is not a number :c");
}

//The question mark "!" announce that is the oposite
if (!isNumber) {    //If is NOT a number... 
    //Only go here if the statement is NOT true or if it's false, it's the same
    alert("Is a number!");
}

// && = and -> || = or
//If is a number and is 18 or higher...
if ((isNumber) && (number >= 18)) { 
    alert("The number inserted is correct. You can go inside...")
}
if ((isNumber) || (number != 0)){
    alert("You can see this text if "isNumber" is true OR the variable number is NOT 0);
}
                                

//Switch case with numbers
let number = 2; //Number goes 1 to 3
switch (number) {
    case 1:
        BadScore();
    break;
    case 2:
        MediumScore();
    break;
    case 3:
        PerfectScore();
    break;
    default:
        console.log("The default "gateway" happens when none of the other cases is true");
    break;
}

//Switch case with boolean values (true or false)
let number = 2; //Number goes 1 to 3
switch (true) {
    case (number < 0):
        BadScore();
    break;
    case (number == 0):
        MediumScore();
    break;
    case (number > 0):
        PerfectScore();
    break;
    default:
        console.log("Innecesary default case because you have cover the 3 scenarios:
        when the number is LESS THAN 0, when IS 0 and when is MORE THAN 0");
    break;
}
                                

There are 3 types of logic loops: while, do while and for

//dowhile
function DoWhileLoop(){
    let index = 1;
    do{
        //The first iteration is free
        //Repeat the code while the index is less than 3
        console.log(index);
        index++;//IMPORTANT to iterate correctly
        //when the index is more than 4, the loop will break
    } while (index < 4);
}

//while
function WhileLoop(){
    let startIndex = 0;
    let endIndex = 5;
    const number = 3;
    var isMyNumber = false;

    while (startIndex <= endIndex){
        //if 0 is less or equal than 5? yes -> execute the code inside
        if (startIndex >= number){
            //when the index is EQUAL or MORE than 13, isNumber will be true
            isMyNumber = true;
        }
        console.log(startIndex);
        startIndex++;//IMPORTANT to iterate correctly
    }

    console.log("My number was found?: " + isMyNumber);
}

//for loop
function CountingLoop(){
    console.log("Counting 0 to 10");
    for (let index = 0; index < 11; index++){//Auto-Increment (index++)
        console.log(index);
    }
}

What will be the output?

(PC Only) Copy the function code > press f12 > Go to Console
> Paste the code > Call the function --> CountingLoop()

Try differents number and see the output!
                                    

//Do you understand this code?
let a = 100;
let b = 14;
let c = a-b;
console.log(c);

//And this code?
let maxHealth = 100;
let damage = 14;
let currentHealth = maxHealth - damage;
console.log(currentHealth);

//The main difference is the variable names!

for (let i = 0; i < 4; i++) {
    for (let j = 0; j < 4; j++) {
        //Code Here
    }
    //Code Here
}

for (let firstIndex = 0; firstIndex < 4; firstIndex++) {
    for (let secondIndex = 0; secondIndex < 4; secondIndex++) {
        //Code Here
    }
    //Code Here
}

//The variable names can tell you with 2-3 words
//the CONTEXT of the code with no knowledge
                                    

Like the CSS method, JS have 2 methods:

//index.html:
<body>
    .
    .
    .
    .
    <p onclick="ClickEvent()">
        Click Me!
    </p>

    <script>
    function ClickEvent(){
        alert("I was clicked!");
    }
    </script>
</body>
                                        

//index.html:
<body>
    .
    .
    .
    .
    <p onclick="ClickEvent()">
        Click Me!
    </p>

    <script src="/folder/js/script.js">
    </script>
</body>

//script.js:
function ClickEvent(){
    alert("I was clicked!");
}
                                        

I will always recommend using CSS and JS using the "outside method" (linking the document in the HTML and modifying the content outside). Why? My reason is: Scalability and Modularization, Performance and Clean Workplace

//Transform the For loop To a While Loop
1. For Loop
    for (let index = 0; index < 11; index++){
        console.log(index);
    }

2. let index = 0; this go up like this:
    let index = 0;
    for (index < 11; index++){
        console.log(index);
    }

3. The Auto-Increment Goes Inside (IMPORTANT: always in the bottom part)
    let index = 0;
    for (index < 11){
        console.log(index);
        index++;
    }

4. Change the keyword for to while (and Voilà!)
    let index = 0;
    while (index < 11){
        console.log(index);
        index++;
    }

//Transform the While Loop into the Do-While loop
1. While Loop
    let index = 0;
    while (index < 11){
        console.log(index);
        index++;
    }

2. Copy the While part and put it on the bottom like this:
    let index = 0;
    {
        console.log(index);
        index++;
    }while (index < 11);//REMEMBER TO PUT ";" AT THE VERY END

3. Put the keyword Do:
    let index = 0;
    do{
        console.log(index);
        index++;
    }while (index < 11);