Categories
JavaScript Web development

JavaScript Statements

In HTML, JavaScript statements are “instructions” to be “executed” by the web browser. In a programming language, these programming instructions are called statements.

JavaScript program is a list of programming statements. In HTML, JavaScript programs are executed by the web browser.

JavaScript Statements

JavaScript statements are composed of:

Values, Operators, Expressions, Keywords, and Comments.

Example:

This statement tells the browser to write “How are you?” inside an HTML element with id=”demo”:

<!DOCTYPE html>
<html>
<body>

<h1>My Web Site</h1>

<p id="demo">My first paragraph.</p>

<script>
document.getElementById("demo").innerHTML = "How are you?";
</script>

</body>
</html>

Output:

Most JavaScript programs contain 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 separate JavaScript statements. Add a semicolon at the end of each executable statement:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Statements</h2>

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

<p id="demo1"></p>

<script>
var a, b, c;
a = 7;
b = 7;
c = a + b;
document.getElementById("demo1").innerHTML = c;
</script>

</body>
</html>

Output:

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

<!DOCTYPE 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 = 7; b = 7; c = a + b;
document.getElementById("demo1").innerHTML = c;
</script>

</body>
</html>

Output:

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";

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

var x = y + z;

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:

<!DOCTYPE html>
<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 =
"How are you?";
</script>

</body>
</html>

Output:

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:

<!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:

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:

breakTerminates a switch or a loop
continueJumps out of a loop and starts at the top
debuggerStops the execution of JavaScript, and calls (if available) the debugging function
do … whileExecutes a block of statements, and repeats the block, while a condition is true
forMarks a block of statements to be executed, as long as a condition is true
functionDeclares a function
if … elseMarks a block of statements to be executed, depending on a condition
returnExits a function
switchMarks a block of statements to be executed, depending on different cases
try … catchImplements error handling to a block of statements
varDeclares a variable

Enjoy coding!

Leave a Reply