JavaScript for beginners (second part)

first part -- second part

In the first part we learned that a JavaScript program runs in visitor's web browser, and that it can start while the page is loading, or after a specified event (when the whole page is loaded, when a button is clicked, etc). There is also another possibility, not mentioned yet; the running command can schedule another command to be started at a specified time, for example 1/10 of second later. (This is how we can make animations.) Today we will learn about what can a JavaScript program do.

A program written in JavaScript can influence data in the web browser. It can modify content of the displayed web page, and use some browser functionality such as sending a form, or moving to another page. Some web browsers allow to specify a set of allowed functions more precisely (for example user can forbid opening new windows, because this is frequently abused by annoying advertisements). A program in JavaScript cannot go outside of the web browser; it cannot manipulate data on disk, nor influence other running programs.

There are three basic ways to modify content of the displayed web page.

1) During loading we can insert additional HTML code using the "document.write" command. For example look at the following page:

<html>
 <head>
  <title>An example page without JavaScript</title>
 </head>
 <body>
  <p>Some text</p>
 </body>
</html>

If we would like to display the paragraph using a JavaScript program, it would look like this:

<html>
 <head>
  <title>An example page with JavaScript</title>
 </head>
 <body>
  <script language="JavaScript"><!--

   document.write('<p>Some text</p>');

  //--></script>
 </body>
</html>

This specific change does not make much sense, but now let's focus on the formal side. The command "document.write" is followed by parentheses containing data which should be written into the page body; the command is finished by a semicolon. If we want to write some text literally, we surround it with apostrophes. If we want to write more texts, we can join the using the plus sign (like this: 'Some' + ' ' + 'text'), or use more "document.write" commands.

Now some more useful example -- displaying the current time.

<html>
 <head>
  <title>An example page with JavaScript</title>
 </head>
 <body>
  <script language="JavaScript"><!--

   var d = new Date();
   document.write('<p>Time: ' + d.getHours() + ':' + d.getMinutes() + '</p>');

  //--></script>
 </body>
</html>

The first line will create a variable "d", which will contail the current date and time. (It is a time on a page visitor's computer, not on server.) The second like will extract the hour and minute information from the variable "d", and all data will be joined to one text, for example: 'Time: ' + 12 + ':' + 30 + '' = 'Time: 12:30'. The resulting text is writen into the page body.

<html>
 <head>
  <title>An example page with JavaScript</title>
 </head>
 <body>
  <script language="JavaScript"><!--

   for (var i = 1; i <= 1000; i++) {
    document.write('<p>' + i + '</p>');
   }

  //--></script>
 </body>
</html>

In this example 1000 lines are written into the page body, including numbers from 1 to 1000. We could make this page without JavaScript too, but this way it is much simpler. (But the page will not work if the visitor has turned off JavaScript. If we used instead of JavaScript some server-side language, such as PHP or Ruby, the page would be displayed correctly to all visitors, but it would have to be stored on a web server.)

2) We can modify the HTML code of page elements using the "innerHTML" and "outerHTML" properties. If we want to modify some element, we can give it an identifier using the "id" property. For example:

<p id="p1">Some text.</p>

If we use "document.getElementById('p1')" in a program, we will receive this paragraph. The "innerHTML" property contains what is inside the tags, this means 'Some text.'. The "outerHTML" property includes the tags too, so it means 'Some text.'.

<html>
 <head>
  <title>An example page with JavaScript</title>
  <script language="JavaScript"><!--

   function button_click() {
    var t1 = document.getElementById('t1');
    var p1 = document.getElementById('p1');
    p1.innerHTML = 'Hello ' + t1.value;
   }

  //--></script>
 </head>
 <body>
  <p>Enter name:
   <input type="text" id="t1" name="t1"/>
   <input type="button" value="Set" onclick="button_click();"/>
  </p>
  <p id="p1">Hello</p>
 </body>
</html>

In this example we use two names page elements: an input text box called "t1" and a paragraph called "p1". Using "t1.value" we find what is currently written in the text box "t1" (for example 'Viliam') and into the paragraph "p1" we write joined texts (for example 'Hello ' + 'Viliam').

3) Many programs can be written in JavaScript without rewriting the HTML code. It is often enough to use properties of the page elements. For example if we would want in the previous example to write the resulting text to another text box, the program could look like this:

<html>
 <head>
  <title>An example page with JavaScript</title>
  <script language="JavaScript"><!--

   function button_click() {
    var t1 = document.getElementById('t1');
    var t2 = document.getElementById('t2');
    t2.value = 'Hello ' + t1.value;
   }

  //--></script>
 </head>
 <body>
  <p><input type="text" id="t1" name="t1"/></p>
  <p><input type="button" value="Set" onclick="button_click();"/></p>
  <p><input type="text" id="t2" name="t2" readonly="readonly"/></p>
 </body>
</html>

The last example for today will check before sending a form whether the provided e-mail address contains the "@" symbol. We will use the "onsumbit" event of the "form" element. The called function will use "return" command to return a "true" value if sending the form is allowed, or a "false" value if the sending should be cancelled. We must also use the "return" command in the "onsumbit" event code.

<html>
 <head>
  <title>An example page with JavaScript</title>
  <script language="JavaScript"><!--

   function form_submit() {
    var t1 = document.getElementById('t1');
    if (t1.value.indexOf('@') < 0) {
     alert('E-mail must contain @ symbol.');
     return false;
    }
    return true;
   }

  //--></script>
 </head>
 <body>
  <form method="GET" action="#" onsubmit="return form_submit();">
   <p>E-mail: <input type="text" id="t1" name="t1"/></p>
   <p><input type="submit" value="Send"/></p>
  </form>
 </body>
</html>

Summary: A program in JavaScript language can influence content of the web page which contains it. During loading it can insert HTML code using "document.write" command, later it can modify the HTML code of page elements using properties "innerHTML" and "outerHTML". However in most cases we can avoid writing HTML code by using of properties and events of the page elements.

Comments: 0