JS Statements

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

JavaScript Statements

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Statements</h2>

<p>A <b>JavaScript program</b> is a list of <b>statements</b> to be executed by a computer.</p>

<p id=”demo”></p>

<script>

let x, y, z;  // Statement 1

x = 5;        // Statement 2

y = 6;        // Statement 3

z = x + y;    // Statement 4

document.getElementById(“demo”).innerHTML =

“The value of z is ” + z + “.”; 

</script>

</body>

</html>

Output

JavaScript Statements

A JavaScript program is a list of statements to be executed by a computer.

JavaScript Programs

A computer program is a set of “instructions” that is “executed” by a computer.

In a programming language, these programming instructions are called statements.

A JavaScript program is a list of programming statements.

In HTML, JavaScript programs are executed by the web browser.

JavaScript Statements

JavaScript statements are consist of:

Values, Operators, Expressions, Keywords, and Comments.

This statement indicates the browser to write “Webhostguru.” within an HTML element with id=”demo”:

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 = “Webhostguru.”;

</script>

</body>

</html>

Output

JavaScript Statements

In HTML, JavaScript statements are executed by the browser.

Most JavaScript programs consist of many JavaScript statements.

The statements are executed, one by one, in the same order as they are written.

JavaScript programs (and JavaScript statements) are often called JavaScript code.

Semicolons ;

Semicolons divides the JavaScript statements.

A  semicolon is added at the end of each executable statement:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Statements</h2>

<p>JavaScript statements are separated by semicolons.</p>

<p id=”demo1″></p>

<script>

let a, b, c;

a = 5;

b = 6;

c = a + b;

document.getElementById(“demo1”).innerHTML = c;

</script>

</body>

</html>

Output

JavaScript Statements

JavaScript statements are separated by semicolons.

11

When separated by semicolons, multiple statements on one line are allowed:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Statements</h2>

<p>Multiple statements on one line are allowed.</p>

<p id=”demo1″></p>

<script>

let a, b, c;

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

document.getElementById(“demo1”).innerHTML = c;

</script>

</body>

</html>

Output

JavaScript Statements

Multiple statements on one line are allowed.

11

JavaScript White Space

JavaScript does not consider multiple spaces. The white space can also be added to the script to make it more readable.

The following lines are equivalent:

let person = “Hege”;

let person=”Hege”;

A good practice is to put spaces around operators ( = + – * / ):

let x = y + z;

JavaScript Line Length and Line Breaks

For best readability, programmers often avoid code lines longer than 80 characters.

In case the JavaScript statement does not fit on one line, the best place to break it is after an operator:

JavaScript Code Blocks

JavaScript statements can be combined in code blocks, within the curly brackets {…}.

The purpose of code blocks is to specify the statements to be executed together.

One place to find statements are combined in blocks, is in JavaScript functions:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Statements</h2>

<p>JavaScript code blocks are written between { and }</p>

<button type=”button” onclick=”myFunction()”>Click Me!</button>

<p id=”demo1″></p>

<p id=”demo2″></p>

<script>

function myFunction() {

  document.getElementById(“demo1”).innerHTML = “Hello!”;

  document.getElementById(“demo2”).innerHTML = “How are you?”;

}

</script>

</body>

</html>

Output

JavaScript Statements

JavaScript code blocks are written between { and }