Skip to main content

JavaScript Statements

 

 
JavaScript Statements

Example

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

JavaScript Programs

A computer program is a list of "instructions" to be "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 composed of:

Values, Operators, Expressions, Keywords, and Comments.

This statement tells the browser to write "Hello Dolly." inside an HTML element with id="demo":

Example

document.getElementById("demo").innerHTML = "Hello Dolly.";

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 ;

Semicolons separate JavaScript statements.

Add a semicolon at the end of each executable statement:

Examples

let 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

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

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

On the web, you might see examples without semicolons.
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:

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

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

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

function myFunction() {
  document.getElementById("demo1").innerHTML = "Hello Dolly!";
  document.getElementById("demo2").innerHTML = "How are you?";
}

In this tutorial we use 2 spaces of indentation for code blocks.
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.

Our Reserved Words Reference lists all JavaScript keywords.

Here is a list of some of the keywords you will learn about in this tutorial:

Keyword Description
var Declares a variable
let Declares a block variable
const Declares a block constant
if Marks a block of statements to be executed on a condition
switch Marks a block of statements to be executed in different cases
for Marks a block of statements to be executed in a loop
function Declares a function
return Exits a function
try Implements error handling to a block of statements

JavaScript keywords are reserved words. Reserved words cannot be used as names for variables.

Labels:

Comments

Post a Comment

Popular posts from this blog

JavaScript Const

  The const keyword was introduced in ES6 (2015) . Variables defined with const cannot be Redeclared. Variables defined with const cannot be Reassigned. Variables defined with const have Block Scope. Cannot be Reassigned A const variable cannot be reassigned : Example const PI = 3.141592653589793 ; PI = 3.14 ;      // This will give an error PI = PI + 10 ;   // This will also give an error Must be Assigned JavaScript const variables must be assigned a value when they are declared: Correct const PI = 3.14159265359 ; Incorrect const PI; PI = 3.1 4159 265359 ; When to use JavaScript const? As a general rule, always declare a variable with const unless you know that the value will change. Use const when you declare: A new Array A new Object A new Function A new RegExp Constant Objects and Arrays The keyword const is a little misleading. It does not define a constant value. It def...
Post a Comment
Read more

JavaScript Introduction

    This page contains some examples of what JavaScript can do. JavaScript Can Change HTML Content One of many JavaScript HTML methods is getElementById() . The example below "finds" an HTML element (with id="demo"), and changes the element content (innerHTML) to "Hello JavaScript": Example document. getElementById ( "demo" ). innerHTML = "Hello JavaScript" ; JavaScript accepts both double and single quotes: Example document. getElementById ( 'demo' ). innerHTML = 'Hello JavaScript' ; JavaScript Can Change HTML Attribute Values In this example JavaScript changes the value of the src (source) attribute of an <img> tag:   JavaScript Can Change HTML Styles (CSS) Changing the style of an HTML element, is a variant of changing an HTML attribute: Example document. getElementById ( "demo" ). style . fontSize = "35px" ; JavaScript Can Hide HTML Elements Hidin...
Post a Comment
Read more

JavaScript Output

  JS Output   JavaScript Display Possibilities JavaScript can "display" data in different ways: Writing into an HTML element, using innerHTML . Writing into the HTML output using document.write() . Writing into an alert box, using window.alert() . Writing into the browser console, using console.log() . Using innerHTML To access an HTML element, JavaScript can use the document.getElementById(id) method. The id attribute defines the HTML element. The innerHTML property defines the HTML content: Example < !DOCTYPE html > < html > < body > < h1 > My First Web Page < /h1 > < p > My First Paragraph < /p > < p id ="demo" > < /p > < script > document. getElementById ( "demo" ). innerHTML = 5 + 6 ; < /script > < /body > < /html > Changing the innerHTML property of an HTML element is a common way to display data in HTML. Using document.wr...
Post a Comment
Read more