Writing JavaScript Code

JavaScript Code

 
JavaScript and  HTML Tags

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:
  
<h2>Book Collection</h2>
<Script Language="JavaScript">
document.write("Book Title: JavaScript Programming")
</Script>
 
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: 

<Script Language="JavaScript">
document.write("Book Title: JavaScript Programming<br>")
</Script>
 
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

  1. 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>
  2. Save the file as exercise2.htm if the folder you created in the previous lesson
  3. Preview the page in your browser
  4. After previewing the page, return to your text editor
  5. 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>
  6. Save the file. Return to your browser and preview the file

  7. To use more tags, for example to create a table in your script, change the file as follows:
      
    <Script Language="JavaScript">
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("<h1><font face=Verdana color=red>Leaving Sydney</font></h1>")
document.write("</font>")
document.write(" </td>")
document.write(" </tr>")
document.write("</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>
  8. Save the file and check it in the browser:

    Previewing a page
  9. After previewing the page, return to Notepad and close it.
Managing Code: Comments

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

  1. 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>
  2. Save the file and preview it in your browser
  3. Notice that the page still displays the same way.
    After previewing the page, return to your text editor.
  4. 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>
  5. 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">
  // 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 here
  // Display the movie title
  document.write("<b>Title:</b> Disorganized Crime")
</Script>

Practical Learning: Indenting Code

  1. To add indentation 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
      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>
  2. Save and preview the file, then return to Notepad

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Related Scripting

Related Posts Plugin for WordPress, Blogger...

Disqus for Functions