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.
11When 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.
11JavaScript 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 }