Statements and Engine in JavaScript By albro

Statements and Engine in JavaScript

A computer program is a list of "instructions" to be executed by the computer. Now, in programming languages, these instructions are called statement, and accordingly, a JavaScript program is a list of statements (remember that statement is actually what we call code in common language!

JavaScript programs in HTML are executed by the browser and all browsers have a JavaScript engine with which they execute statements.

Do you know anything about the JavaScript engine?

JavaScript engines are actually virtual machines. You must be saying to yourself what kind of definition it was that was no different from not having it!

strong>To put it more simply, virtual machines are software simulators that run on a system.

For example, if you are a Mac system user (Apple computers), you are probably familiar with Parallels virtual machine. This virtual machine allows you to run Windows software on Mac. If you are a Linux user, you are probably familiar with the Wine virtual machine that allows you to run Windows software on Linux. If I want to explain more precisely, I would say that Wine is a processing virtual machine.

Now back to JavaScript! JavaScript engines are actually processing virtual machines that are specifically designed to run JavaScript code.

Every JavaScript engine implements some kind of ECMAScript standard and executes the codes based on it.

ECMAScript is a coding standard that JavaScript follows.

What have we said now? Why should these things matter to us?

The purpose of JavaScript engines is to analyze and execute the code in the shortest possible time and in the most optimal way possible. As a web developer, you should at least be familiar with such concepts to be able to compare JavaScript engines.

One of the famous websites that conducts various tests is the website arewefastyet. You can visit this website and see the performance of different browsers in different windows and in different contexts. Do not worry!

There is no need to memorize or even learn these things, but a minimal familiarity with them is even more important.

Let's go back to the statements! First, see an example of statements:

var x, y, z;    // Statement 1
x = 5;          // Statement 2
y = 6;          // Statement 3
z = x + y;      // Statement 4

You can see four different statements!

I said that statements are instructions that are executed, so each of these lines is a statement. For example, the first line says define the variables x, y and z. Naturally, this is a statement. The second line says to set variable x equal to 5. This is also a statement until the end...

statement in JavaScript includes the following:

  • Values
  • Operators
  • Expressions
  • Keywords
  • Comments

For example, the statement below takes a p tag with the ID demo and sets its value to "Hello From Hive Blockchain".

document.getElementById("demo").innerHTML = "Hello From Hive Blockchain";

See this code in the form of a complete example:

< !DOCTYPE html>
< html>
< body>
< h2>JavaScript Statements< /h2>
< p>In HTML, JavaScript statements are executed by the browser.< /p>

< p id="demo">< /p>
< script> document.getElementById("demo").innerHTML = "Hello From Hive Blockchain"; < /script>
< /body> < /html>

You should also know that statements in JavaScript are separated by semicolons, so you must put a semicolon at the end of each statement. Look at the following example:

var a, b, c;     // Declare 3 variables
a = 5;           // Assign the value 5 to a
b = 6;           // Assign the value 6 to b
c = a + b;       // Assign the sum of a and b to c

If the semicolon is removed in any of the above statements, the whole code will have problems and will not be executed!

One of the most common problems of new programmers in JavaScript is observing the semicolon. Imagine a semicolon missing in a 900-line script! It's like finding a needle in a haystack!

How to execute statements in JavaScript

Statements in JavaScript are executed one by one in the order they are written!

What is the importance of this issue? If we put the code that I wrote in the previous part with the phrase "Hello From Hive Blockchain" after the p tag, there will be no problem, but if we put it before it, nothing will be executed! Consider the following examples:

First case: the phrase "Hello From Hive Blockchain" after the p tag

< !DOCTYPE html>
< html>
< body>
< h2>JavaScript Statements< /h2>
< p>In HTML, JavaScript statements are executed by the browser.< /p>
< p id="demo">< /p>
< script> document.getElementById("demo").innerHTML = "Hello From Hive Blockchain"; < /script>
< /body> < /html>

statement after html tag

Second case: the phrase "Hello From Hive Blockchain" before the p tag

< !DOCTYPE html>
< html>
< body>
< script>
document.getElementById("demo").innerHTML = "Hello From Hive Blockchain";
< /script>
< h2>JavaScript Statements< /h2>
< p>In HTML, JavaScript statements are executed by the browser.< /p>
< p id="demo">< /p>
< /body> < /html>

statement befor html tag.png

You'll see that the phrase "Hello From Hive Blockchain" won't be displayed.

Why? Because this code is not valid! I said that the statements are executed in order and we haven't reached the p tag yet, so there is no such tag in computer logic yet!

So how do we change a tag that doesn't exist? it's not possible. So be very careful in writing your codes.

What if we put the codes in a separate file? You said that it's possible to put the codes in a separate file and load them in the head tag, that is, before all the main tags! How is it possible?

In normal mode, the browser does not move forward until it receives the CSS and JavaScript files! But when it downloads these files, it will run quickly! Even before your page is loaded.

So many times your javascript file will be loaded before your entire page is loaded. A method is provided to avoid this problem. Lazy loading javascript! That is, tell the browser to go to JavaScript after the entire page is loaded! This is done as follows:

< script src="demo_defer.js" defer>< /script>
< script src="demo_defer.js" async>< /script>

Here, as before, I have uploaded my code file in the < script> tags, but there is a difference. After addressing my script, I've used the defer keyword.

In the second example, the keyword async (abbreviation of asynchronously) is used. What do these mean?

  • If you've given the async attribute to the script tag, your script will run asynchronously with the rest of the page (that is, as the page is loading, your script will run).
  • If you've given the defer attribute to the script tag, your script will be executed when the page has finished parsing and loading.
  • If you don't give the async and defer attributes to the script tag, your script will execute immediately before the page loads.

These are very important. Many novice JavaScript programmers write perfect codes, but their code does not run, so they spend hours with complete fatigue and helplessness to see where the codes are wrong, not knowing that the codes have no defects and only the way of loading They have a problem.

Internet Explorer or Edge browsers support this feature from version 10 or later. Therefore, these tips are meaningless in versions before 10

Since statements are separated by semicolons, it is obvious that white space has no effect on your code! That is, if you write the above code as follows, you will not see any changes in the execution of the codes.

a = 5; b = 6; c = a + b;

To put it in common language; Your browser does not understand enter and space! Enter and spaces are only for the ease of reading me and you (humans), not computers!

Important note: In recent years, you no longer have to put semicolons and JavaScript engines are able to recognize the end of statements, but always try to end codes with semicolons for three reasons:

First, the standard way of coding is like this. JavaScript is not the only language that has a semicolon at the end of its statements; PHP and many other languages do the same.

Secondly, in some cases, this will cause defects in your code.

Thirdly, seeing codes without semicolons in bulky files will make you dizzy. Why should you risk the sanity and standardization of your code for something that doesn't matter much?

So with this account, if you mix several spaces in your codes, nothing will happen. For example, both the following codes work the same:

var platform = "Hive Blockchain";
var platform="Hive Blockchain";

But the standard and more beautiful way is to put a space after and before the operators (= + - * /).

The information I said about space is also true about enter and both codes below are the same:

document.getElementById("demo").innerHTML = "Hello Hive Blockchain!";
document.getElementById("demo").innerHTML =
"Hello Hive Blockchain!";