2. What are differents ways of running JavaScript ?

Introduction


In the previous section we learn that javascript is execute by the javascript engine inside the browser. So How to we write javascript code and send it to the engine ? and which browser to use ?

Well it's easy, you can use any browser you want, i will use chrome browser my self, but you can use any browser you want.


There is 3 differents main ways of running javascript :


JavaScript in browser console


This method is mainly use for debugging. To run javascript in the console :

1 - Open the browser, right click on the mouse, and select Inspect.


2 - Switch to console tab :


3 - Write some javascript code.

Eg after the prompt (>), declare a variable :

let variable = 2024;


And in the second prompt, read the variable by calling it's name :

variable;


The code will be execute by the internal javascipt engine and the result display in the next line. See fig below.


JavaScript in html


You use this method when you want to write code small code to do small stuffs. To write javascript code inside the html page :

1 - open your code editor and create an html file, i will call mine index.html and place the following code inside the file :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grenier du dev demo</title>
</head>
<body>
    <h1 id="calculResult"></h1>
    <script>
        let res = 2024;
        document.getElementById("calculResult").innerText = res;
    </script>
</body>
</html>


Code explication :

a. Inside the html body we have 2 elements : h1 tag with id (calculResult) and a script tag which contains our javascript code

b. Javascript code (inside the script tag) : first line, we declare a variable res, second line, we get the text inside the h1 tag with document.getElementById("calculResult").innerText and we assign the value of the res variable to it.

c. When we drop this html in the browser, this code will be executed and show the result 2024.


2 - drag and drop the html file in the browser and you will see the result to the screen : 2024.


JavaScript in separate file


This is the most popular method, developers create a dedicated file in which they write all thier javascript code and insert that file in the html file.

When the browser takes the html file and parse the html content and meet the html file it will fetch the file from the server.

To use this method :

1 - open your code editor create a new file hello.js and write this code inside : 

let txt = "Hello, world";
document.getElementById("hi").innerText = txt;

document.body.style.backgroundColor = "yellow";

We declare a variable of type string called txt and get the html tag that has an id called hi and replace it content by the variable value.

We also set the background color of the body tag to yellow.


2 - create another file hello.html for the html content and write this code inside :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello</title>
</head>
<body>
    <p id="hi"></p>
    <script src="./hello.js"></script>
</body>
</html>

in this file we write an html content a p html tag with an id hi, and the <script src="./hello.js"></script> content will insert the javascript file called hello.js which is in the same file as hello.html file.


if you open the html file, you will get :


Prev Next