Javascript Tutorial 3: JavaScript Statement and Comments

JavaScript Statement

JavaScript is a sequence of statements to be executed by the browser.

---

JavaScript Statements

JavaScript statements are "commands" to the browser. The purpose of the statements is to tell the browser what to do.

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

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

---

Semicolon ;

Semicolon separates JavaScript statements.

Normally you add a semicolon at the end of each executable statement.

Using semicolons also makes it possible to write many statements on one line.

---

JavaScript Code

JavaScript code (or just JavaScript) is a sequence of JavaScript statements.

Each statement is executed by the browser in the sequence they are written.

This example will manipulate two HTML elements:

Example

document.getElementById("demo").innerHTML="Hello Dolly";
document.getElementById("myDIV").innerHTML="How are you?";

---

JavaScript Code Blocks

JavaScript statements can be grouped together in blocks.

Blocks start with a left curly bracket, and end with a right curly bracket.

The purpose of a block is to make the sequence of statements execute together.

An good example of statements grouped together in blocks, are JavaScript functions.

This example will run a function that will manipulate two HTML elements:

Example

function myFunction()
{
document.getElementById("demo").innerHTML="Hello Dolly";
document.getElementById("myDIV").innerHTML="How are you?";
}

You will learn more about functions in later chapters.

---

JavaScript is Case Sensitive

JavaScript is case sensitive.

Watch your capitalization closely when you write JavaScript statements:

A function getElementById is not the same as getElementbyID.

A variable named myVariable is not the same as MyVariable.

---

White Space

JavaScript ignores extra spaces. You can add white space to your script to make it more readable. The following lines are equivalent:

var name="Hege";
var name = "Hege";

---

Break up a Code Line

You can break up a code line within a text string with a backslash. The example below will be displayed properly:

document.write("Hello \
World!");

However, you cannot break up a code line like this:

document.write \
("Hello World!");

JavaScript Comments

JavaScript comments can be used to make the code more readable.

---

JavaScript Comments

Comments will not be executed by JavaScript.
Comments can be added to explain the JavaScript, or to make the code more readable.
Single line comments start with //.
The following example uses single line comments to explain the code:

Example

// Write to a heading:
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
// Write to a paragraph:
document.getElementById("myP").innerHTML="This is my first paragraph.";

---

JavaScript Multi-Line Comments

Multi line comments start with /* and end with */.
The following example uses a multi line comment to explain the code:

Example

/*
The code below will write
to a heading and to a paragraph,
and will represent the start of
my homepage:
*/
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
document.getElementById("myP").innerHTML="This is my first paragraph.";

---

Using Comments to Prevent Execution

In the following example the comment is used to prevent the execution of one of the codelines (can be suitable for debugging):

Example

//document.getElementById("myH1").innerHTML="Welcome to my Homepage";
document.getElementById("myP").innerHTML="This is my first paragraph.";

In the following example the comment is used to prevent the execution of a code block (can be suitable for debugging):

Example

/*
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
document.getElementById("myP").innerHTML="This is my first paragraph.";
*/

---

Using Comments at the End of a Line

In the following example the comment is placed at the end of a code line:

Example

var x=5;    // declare x and assign 5 to it
var y=x+2;  // declare y and assign x+2 to it