🏷️ JavaScript, beginner
📌 Juniors and Seniors omit this post 😉

Concepts:

Today I continued with the introductory course JavaScript Total by Federico Garay included in the Udemy Business scholarship I received from Ruta N Medellin.

In a break, I realized that in some similar way, as Tkinter provides a GUI to Python scripts, HTML and CSS do the same for JS.

This idea made me ease to do the course tasks: First build the logic, then translate the input and outputs of the JS code into <input> and <p>, <h1...h6> HTML elements. The <input> elements will feed our JS scripts, and after they do their work, the website will render those outputs using, for example, paragraphs or header elements.

As a mnemonic for the <input> element, I write it as if I were declaring a C/C++/Java variable, where first goes the data type and then the variable name:

int short my_variable = 10;

So for <input> would be the type attribute and then its id:

<input type="number" id="my_variable">

Cheat sheet:

How to include JS files in the HTML docs:

<!DOCTYPE html>
<html>
    <head>
        <script src="my_script.js"></script>
    </head>
</html>

How to read inputs from HTML:

<input type="text" id="userAge">

function printUserData(){
    let userAge = document.getByElementId("userAge").value;
    alert("The user is " + userAge + " years old");
}

How to generate a random integer number in a given range:

function giveRandomInteger(min, max){
    let max = max + 1; // adding 1 avoids to exclude the max value in range.
    let number = Math.floor(Math.range() * (max - min) + min);
    return number
}

What are the most used methods of a Math object:

Math.pow(base, exp) // returns the power = base ^ exp
Math.sqrt() // returns the square root of a number
Math.round() // round a number
Math.floor() // rounds down a decimal number (i.e. removes its decimal part)
Math.ceil() // rounds up a decimal number

HTML and CSS are the I/O of JS

Concepts:

Cheat sheet: