Javascript TUTORIAL
Javascript Statements and Comments
We will now discuss the basic fabrics of javascripts. We will explore the nuts and bolts syntax and structures in the next few chapters.
Javascript Statements
Take a look at the following line below again
|
document.write("This is a reference designer tutorial");
|
The line is called a javascript statement. It tells browser what to do. Statements are used in JavaScript to control its program flow. "Usually", there is a semicolon at the end of each executable statement. It is a good programming practise to add a semicolon at the end of the statement to make it more readable. The semicolon is, however, optional , and you may find examples without the semicolon at the end.
Javascript Code
The Javascript code or simply javascript is a sequence of the statements. Take a look at the following javascript code.
|
document.write("<p>This is a reference designer tutorial Line 1</p>");
document.write("<p>This is a reference designer tutorial Line 2</p>"); document.write("<p>This is a reference designer tutorial Line 3</p>"); |
As expected this this produces the following lines
|
This is a reference designer tutorial Line 1
This is a reference designer tutorial Line 2 This is a reference designer tutorial Line 3 |
Javascript Comments
A single line comment in javascript starts with //. Take a look at the following example.
|
document.write("<p>This is a reference designer tutorial Line 1</p>");
document.write("<p>This is a reference designer tutorial Line 2</p>"); //document.write("<p>This is a reference designer tutorial Line 3</p>"); |
The third line is now a comment instead of a statement. As a result the above javascript code produces following output.
|
This is a reference designer tutorial Line 1
This is a reference designer tutorial Line 2 |
Comments are also used to make the code more readable. Take the following example
|
// Name
document.write("<p>Name : Michael Johnson</p>"); // Address document.write("<p>Address : 123 Main Street</p>"); document.write("<p>Austin, TX </p>"); |
The comments should be profusely used for better understanding of the code. The above code produces the following result
|
Name : Michael Johnson
Address : 123 Main Street Austin, TX |
Multiline Comments
If we have multiple lines that we want to comment, then we can elcose them between /* and */. Take a look at the following example
|
/*
********************************************** This is just another example To show you how to use a multiline comment ********************************************** */ document.write("<p>This is a reference designer tutorial Line 1</p>"); document.write("<p>This is a reference designer tutorial Line 2</p>"); document.write("<p>This is a reference designer tutorial Line 3</p>"); |
The above javascript code produces following output.
|
This is a reference designer tutorial Line 1
This is a reference designer tutorial Line 2 This is a reference designer tutorial Line 3 |
Comments at the end of Line
Sometimes, to preserve the continuity of readability, especially during mathematical statements, it is a good practice to put comments at the end of a line or a statement.
|
document.write("<p>This is a reference designer tutorial Line 1</p>"); //this is line 1 document.write("<p>This is a reference designer tutorial Line 2</p>"); // this is line 2 document.write("<p>This is a reference designer tutorial Line 3</p>"); // this is line 3 |
This makes the progam more readable in many circumstance. As expected it produces the following result.
|
This is a reference designer tutorial Line 1
This is a reference designer tutorial Line 2 This is a reference designer tutorial Line 3 |
Nested Comments
Javascript does not allow nested multi line comments. As an example consider this following code with multiline comment.
<html>
<body>
<script type="text/javascript">
/*
document.write("Under comment");
*/
document.write("Hello World!");
</script>
</body>
</html> |
The code executed perfectly well and you can try this example here. However, if you add nested multilibe comment something like
<html>
<body>
<script type="text/javascript">
/*
/*
document.write("Under comment");
*/
*/
document.write("Hello World!");
</script>
</body>
</html> |
It will make the whole code incorrect, syntax wise. Make sure you experiment by trying to add the nested comment in the example here to see its effect.
In actual practice we will be using a mix of all three comments to make program more readable. Many programming practice decorate the coding using * at the start of functions etc and give it a better look.