In the previous lesson, we mentioned that JavaScript
code should be included in a section between the <Script> and
the </Script> tag. On either part of the script section of your file, that is, before or
after the section that includes your script, you can naturally include
HTML code as you see fit. This allows you to mix HTML and JavaScript in
your code as you see fit. Here is an example:

This means that you can add your script anywhere in
the file and among HTML code sections as long as you let the browser know
where your script starts and where it ends. Since you can have different script
sections in a file, you can also add HTML code between scripts. Everything you learned in
HTML is readily available in JavaScript.
JavaScript allows you
to mix its own syntax with HTML tags. In order to use this more
efficiently, you should understand the mechanics of JavaScript.

When
you include a string in your JavaScript code and send it to the browser,
everything that is part of the string is sent to the browser "as
is". Once the browser receives your string from the document.write()
method, it gets rid of the document.write, the parentheses, and
double-quotes. Then it treats the rest, the part of the string, as HTML
code. If the string that was sent is just text, the browser would
display it. If you sent any special character, the browser would
analyze it to find out if the character is a special HTML symbol. If it
is, it would be treated appropriately. A script can
result in complex code or difficult to interpret errors. Based
on this, you can include any HTML tag as part of the string. Here is an
example:

When the browser receives this script,
it gets rid of everything that is not part of the string. After this
operation, the remaining text becomes:

Book Title: JavaScript Programming<br>

This is what the browser would try to display. As it
happens, there is an HTML tag in the code, namely the break tag <br>.
Therefore, the break tag would be applied. Based on this, you can include any HTML tag as part of
your script. Make sure you use the HTML tags appropriately. JavaScript will
not correct or interpret your tags, it would send them as they are
provided.

Practical Learning: Including HTML Tags in a Script

Start your text editor such as Notepad and type the following:

<Script Language="JavaScript">
document.write("Leaving Sydney<br>")
document.write("When we decided to leave, we knew we were ")
document.write("making a hard decision. We had spent so much ")
document.write("time this had become our new home. A few weeks ")
document.write("or months before, we wanted to make Sydney ")
document.write("our newly found settlement, a permanent place ")
document.write("we could proudly call ours. It appeared that, ")
document.write("unpredictably, fate had decided otherwise.")
</Script>

Save the file as exercise2.htm if the
folder you created in the previous lesson

Preview the page in your browser

After previewing the page, return to your text editor

To make the file more attractive, change it as follows:

<Script Language="JavaScript">
document.write("<h1><font face=Verdana color=red>Leaving Sydney</font></h1>")
document.write("<p>When we decided to leave, we knew we were ")
document.write("making a hard decision. We had spent so much ")
document.write("time this had become our new home. A few weeks ")
document.write("or months before, we wanted to make <b>Sydney</b> ")
document.write("our newly found settlement, a permanent place ")
document.write("we could proudly call ours. It appeared that, ")
document.write("<i>unpredictably</i>, fate had decided otherwise.</p>")
</Script>

Save the file. Return to your browser and preview the file

To use more tags, for example to create a table in your script,
change the file as follows:

A comment is text in your code that is not examined, read, or
interpreted by the browser. This means that the browser doesn't display
anything that is part of a comment. Therefore, a comment can be written however you want
it.

There are two ways you can write a comment in JavaScript. To create a
comment on one line, start it with two forward slashes //.
Everything on the right side of // is part of the comment. Here is an
example:

<SCRIPT LANGUAGE="JavaScript">
// This line is ignored. I can write it however I want.
document.write("2002 FIFA World Cup")
</SCRIPT>

Using the //, you can add as many lines of comments as you want. A comment
doesn't have to stand on its own line. It can be part of a line of code as long as
it start with //. To add a comment to a
line that contains code already, type // and include your comment. Once again,
anything on the right side of // would be ignored by the browser. Here is an
example:

<SCRIPT LANGUAGE="JavaScript">
// This line is ignored. I can write it however I want.
document.write("2002 FIFA World Cup") // The 2002 World Cup was in Rep Korea and Japan
</SCRIPT>

Besides using the //, you can start a comment with /* and end it with */.
Everything between /* and */ is part of the comment.

Here is an example:

<SCRIPT LANGUAGE="JavaScript">
/* Anything on this side is part of a comment */
document.write("They scored two soft goals")
</SCRIPT>

You can use the /* and */ combination the same way you would use the forward
slash comment //. To add
a comment on a line that already has code, type /* followed by the desired
text and ending with */.
You can also use this technique to span a comment on various lines.
This is because, when the interpreter encounters /*, it would ignore
everything and consider it as not part of the code, until it finds */.

You can also mix both techniques to create your
comments. Here is an example:

<SCRIPT LANGUAGE="JavaScript">
/* Movie Quote */
document.write("<p>We went through a lot of trouble because of you.<br>")
document.write("You owe us.</p>") // Max starts having a stroke/* Display the movie title
It is important to always quote your source of information */
document.write("<b>Title:</b> Disorganized Crime")
</SCRIPT>

Practical Learning: Using Comments to JavaScript Code

To add // comments to your code, change the file as follows:

<Script Language="JavaScript">
// This exercise illustrates the use of HTML tags inserted into JavaScript code
// This is how to add a simple table made of one row and one column
document.write("<table border=0 width=550>")
document.write(" <tr>")
document.write(" <td width=100% align=center>")
document.write("<font face=&quot;Garamond, Times New Roman, Georgia&quot; size=6 color=&quot;#FF0000&quot;>")
document.write("<b>Leaving Sydney</b>")
document.write("</font>")
document.write(" </td>")
document.write(" </tr>")
document.write("</table>")
// This is another example of a table
document.write("<table border=0 width=550>")
document.write(" <tr>")
document.write(" <td width=100%>")
document.write("<p>When we decided to leave, we knew we were ")
document.write("making a hard decision. We had spent so much ")
document.write("time this had become our new home. A few weeks ")
document.write("or months before, we wanted to make <b>Sydney</b> ")
document.write("our newly found settlement, a permanent place ")
document.write("we could proudly call ours. It appeared that, ")
document.write("<i>unpredictably</i>, fate had decided otherwise.</p>")
document.write("<hr color=#FF9933>")
document.write(" </td>")
document.write(" </tr>")
document.write(" <tr>")
document.write(" <td width=100% align=right>")
document.write("Author: Arthur D. Pale<br>")
document.write("Title: Stories Of My Life")
document.write(" </td>")
document.write(" </tr>")
document.write("</table>")
</Script>

Save the file and preview it in your browser

Notice that the page still displays the same way.
After previewing the page, return to your text editor.

To use a mix of // and /*...*/ comments, change the file as
follows:

<Script Language="JavaScript">
/* This exercise illustrates the use of HTML tags inserted into JavaScript code
This is how to add a simple table made of one row and one column */
document.write("<table border=0 width=550>")
document.write(" <tr>")
document.write(" <td width=100% align=center>")
document.write("<font face=&quot;Garamond, Times New Roman, Georgia&quot; size=6 color=&quot;#FF0000&quot;>")
document.write("<b>Leaving Sydney</b>")
document.write("</font>")
document.write(" </td>")
document.write(" </tr>")
document.write("</table>")
Rem This is another example of a table
// This time, the table is made of two rows and one column
document.write("<table border=0 width=550>")
document.write(" <tr>")
document.write(" <td width=100%>")
/* This paragraph displays in the top cell */
document.write("<p>When we decided to leave, we knew we were ")
document.write("making a hard decision. We had spent so much ")
document.write("time this had become our new home. A few weeks ")
document.write("or months before, we wanted to make <b>Sydney</b> ")
document.write("our newly found settlement, a permanent place ")
document.write("we could proudly call ours. It appeared that, ")
document.write("<i>unpredictably</i>, fate had decided otherwise.</p>")
document.write("<hr color=#FF9933>")
document.write(" </td>")
document.write(" </tr>")
document.write(" <tr>")
document.write(" <td width=100% align=right>")
document.write("Author: Arthur D. Pale<br>")
document.write("Title: Stories Of My Life")
document.write(" </td>")
document.write(" </tr>")
document.write("</table>")
</Script>

Save and preview the file, then return to your text editor.

Managing Code: Indentation

Code confined and heavily written can be hard to read. This will become
even more difficult when we start adding variables, functions, and
conditional statements. One remedy to making the code easier to read is to
indent its sections.

Indentation is similar to adding Tab characters to text. It leaves an empty space on the left side of the line being
indented. Because indentation is not part of your code, it is a matter of
choice and taste. One of the most common techniques is to indent a section
by two or four empty characters from the left section. To do this, in
your text editor, press the space bar two or four times and add your code. Here is
an example:

<SCRIPT LANGUAGE="JavaScript">
document.write("<p>We went through a lot of trouble because of you.</p>")
</SCRIPT>

The most common technique used by many programmers is
to press Tab to indent a line of code.

As you can see from the previous code, indentation of the document.write()
method allows you to know where the <SCRIPT> tag starts. Therefore,
you will be able to know where a piece of code, such as the <SCRIPT>
tag, must be closed.

Since your code will usually be made of different
sections, a particular section of code should have the same level of
indentation. Once again, this makes your code easier to read and navigate:

<Script Language="JavaScript">
/* This exercise illustrates the use of HTML tags inserted into JavaScript code
This is how to add a simple table made of one row and one column */
document.write("<table border=0 width=550>")
document.write(" <tr>")
document.write(" <td width=100% align=center>")
document.write("<font face=&quot;Garamond, Times New Roman, Georgia&quot; size=6 color=&quot;#FF0000&quot;>")
document.write("<b>Leaving Sydney</b>")
document.write("</font>")
document.write(" </td>")
document.write(" </tr>")
document.write("</table>")
/* This is another example of a table
This time, the table is made of two rows and one column */
document.write("<table border=0 width=550>")
document.write(" <tr>")
document.write(" <td width=100%>")
// This paragraph displays in the top cell
document.write("<p>When we decided to leave, we knew we were ")
document.write("making a hard decision. We had spent so much ")
document.write("time this had become our new home. A few weeks ")
document.write("or months before, we wanted to make <b>Sydney</b> ")
document.write("our newly found settlement, a permanent place ")
document.write("we could proudly call ours. It appeared that, ")
document.write("<i>unpredictably</i>, fate had decided otherwise.</p>")
document.write("<hr color=#FF9933>")
document.write(" </td>")
document.write(" </tr>")
document.write(" <tr>")
document.write(" <td width=100% align=right>")
document.write("Author: Arthur D. Pale<br>")
document.write("Title: Stories Of My Life")
document.write(" </td>")
document.write(" </tr>")
document.write("</table>")
</Script>