JavaScript Statements
In HTML, JavaScript statements are "instructions" to be "executed" by the web browser.
JavaScript Statements
This statement tells the browser to write "Hello Dolly." inside an HTML element with id="demo":Example
<html><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 Dolly.";
</script>
</body>
</html>
JavaScript Programs
Most JavaScript programs contain many JavaScript statements.The statements are executed, one by one, in the same order as they are written.
In this example x, y, and z are given values, and finally z is displayed:
Example
<html>
<body>
<h2>JavaScript Statements</h2>
<p>JavaScript code (or just JavaScript) is a sequence of JavaScript statements.</p>
<p id="demo"></p>
<script>
var x, y, z;
x = 5;
y = 6;
z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
JavaScript programs (and JavaScript statements) are often called JavaScript code.
Semicolons ;
Semicolons separate JavaScript statements.Add a semicolon at the end of each executable statement:
<html>
<body>
<h2>JavaScript Statements</h2>
<p>JavaScript statements are separated by semicolons.</p>
<p id="demo1"></p>
<script>
var a, b, c;
a = 1;
b = 2;
c = a + b;
document.getElementById("demo1").innerHTML = c;
</script>
</body>
</html>
<html>
<body>
<h2>JavaScript Statements</h2>
<p>Multiple statements on one line is allowed.</p>
<p id="demo1"></p>
<script>
var a, b, c;
a = 1; b = 2; c = a + b;
document.getElementById("demo1").innerHTML = c;
</script>
</body>
</html> On the web, you might see examples without semicolons.
Ending statements with semicolon is not required, but highly recommended.
Ending statements with semicolon is not required, but highly recommended.
JavaScript White Space
JavaScript ignores multiple spaces. You can add white space to your script to make it more readable.The following lines are equivalent:
var person = "Hege";
var person="Hege"; var x = y + z; JavaScript Line Length and Line Breaks
For best readability, programmers often like to avoid code lines longer than 80 characters.If a JavaScript statement does not fit on one line, the best place to break it, is after an operator:
Example
<html>
<body>
<h2>JavaScript Statements</h2>
<p>
The best place to break a code line is after an operator or a comma.
</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Hello Dolly!";
</script>
</body>
</html>JavaScript Code Blocks
JavaScript statements can be grouped together in code blocks, inside curly brackets {...}.The purpose of code blocks is to define statements to be executed together.
One place you will find statements grouped together in blocks, is in JavaScript functions:
Example
<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 Dolly!";
document.getElementById("demo2").innerHTML = "How are you?";
}
</script>
</body>
</html>
In this tutorial we use 4 spaces of indentation for code blocks.
You will learn more about functions later in this tutorial.
You will learn more about functions later in this tutorial.
JavaScript Keywords
JavaScript statements often start with a keyword to identify the JavaScript action to be performed.Here is a list of some of the keywords you will learn about in this tutorial:
| Keyword | Description |
|---|---|
| break | Terminates a switch or a loop |
| continue | Jumps out of a loop and starts at the top |
| debugger | Stops the execution of JavaScript, and calls (if available) the debugging function |
| do ... while | Executes a block of statements, and repeats the block, while a condition is true |
| for | Marks a block of statements to be executed, as long as a condition is true |
| function | Declares a function |
| if ... else | Marks a block of statements to be executed, depending on a condition |
| return | Exits a function |
| switch | Marks a block of statements to be executed, depending on different cases |
| try ... catch | Implements error handling to a block of statements |
| var | Declares a variable |
