JavaScript for beginners

first part -- second part

If we design a web page in a graphical editor, or write it directly the HTML code, we receive a static page, a moveless document. If we want to make this page "alive", to add some functionality, we have to write a short program called script. There are two basic kinds of scripts, each of them has some possibilities and limits.

Server-side script is a program stored on web server. This program is started whenever a visitor wants to display the page. The program will build the page and send it to the visitor. This allows page to contain up-to-date information. If the page contains a form, the form data can be sent to such program. Server-side scripts usually cooperate with with databases to store data. Data received from one visitor can be stored in the database and later displayed to another visitor.

Advantages: The page can always display up-to-date information, without author having to rewrite it regularly. Visitor of the page can make permanent changes, and other visitors can see them later. The visitor can use any HTML browser, because the data are transferred in HTML format.

Disadvantages: The results of visitor's activity appear only after the page is reloaded; that means after clicking a link of sending a form. An interpreter of this programming language must be installed on the server. The pages cannot be used without a web server.

Client-side script is a program included in the web page. It is sent to a visitor as a text inside the page body, and it is started in his or her web browser. The program can react immediately to visitor's activity, for example to mouse clicking, and can change a part of the displayed web page, go to another page, or open a new window.

Advantages: The page can quickly react to visitor's activity. We can use a script to create an animation or an interactive computer game. The pages can be used without a web server, for example burned on CD.

Disadvantages: All changes happen only in the visitor's web browser; after closing the page they disappear. The visitor's web browser must support the programming language; but there are many different web browsers and each of them has many versions, so the page will not necessarily work the same for each visitor. Some visitors turn off scripts in their web browsers, because they hate the agressive advertisement visual effects: opening new windows, annoying animations. When it is possible, you should write your web pages so that they can be used also without client-side scripting.

By using a combination of both kinds of scripts we can join some of their advantages: the page can immediately react on the visitor's activity, and then remember the results in a database and display them to other visitors. There remains a disadvantage that these pages may not work correctly for each visitor, and require an interpreter on the web server. Also you need to program well in at least two different programming languages.

The most frequently used client-side scripting language is JavaScript. (Some people confuse it with Java programming language, but these two languages are fundamentally different. The name "JavaScript" was used only for marketing purposes.) We insert parts of the program into the page using the "script" tag. Command "alert" will display a dialog window with given text.

<script type="text/javascript"><!--
 alert('Hello!');
//--></script>

We can insert the program into the head or body of the HTML page. This is how a script inserted in the page body looks like. Please note the "noscript" tag; its contents are displayed when the web browser does not recognize or refuses to start JavaScript.

<html>
 <head>
  <title>An example page with JavaScript</title>
 </head>
 <body>
  <p>Some text.</p>
  <script type="text/javascript"><!--

   alert('Hello!');

  //--></script>
  <noscript>
   <p>By the way, your JavaScript is turned off.</p>
  </noscript>
  <p>Some text.</p>
 </body>
</html>

Please note that after opening this web page only the first line of text is displayed; then the window with a message is opened; and only after closing the window the second line of text is displayed. If we would open this page using a slow internet connection, the JavaScript command would be started immediately after loading, that means before the second line of text would be received. This means that commands inserted into the page body should not try to access the parts of the page below them.

<html>
 <head>
  <meta http-equiv="Content-Script-Type" content="text/javascript"/>
  <title>An example page with JavaScript</title>
 </head>
 <body onload="alert('The page is ready.');">
  <p>Some text.</p>
  <p><input type="button" value="Click me!"
      onclick="alert('You have clicked the button.');"/></p>
 </body>
</html>

In this example the JavaScript commands are not inserted directly into the page body, but into HTML element events. The "onload" event of the "body" element happens when the page is fully loaded. The "onclick" event of the "input" element happens when the button is clicked by mouse. (An event can happen more times, for example when we repeatedly click the button.) The HTML language specifies a few kinds of events. The "meta" tag in the page head specifies that the events are written in the JavaScript language. (There are also other scripting languages.)

Sometimes we want program to make a more difficult action than displaying a simple message, but writing longer programs inside of HTML element event would be inconvenient and difficult to read. The correct way is to create a function which can contain a difficult piece of program, and to call the function from the event using its name. (Separating code from page content is essential for programmer, otherwise the longer programs soon become unmanageable.)

<html>
 <head>
  <meta http-equiv="Content-Script-Type" content="text/javascript"/>
  <title>An example page with JavaScript</title>
  <script type="text/javascript"><!--

   function welcome_message() {
    alert('The page is ready.');
    alert('Click the button.');
   }

   function button_message() {
    alert('You have clicked the button.');
   }

  //--></script>
 </head>
 <body onload="welcome_message();">
  <p>Some text.</p>
  <p><input type="button" value="Click me!"
      onclick="button_message();"/></p>
 </body>
</html>

In this example the JavaScript program is inserted into the page head, but it does nothing except declaring two functions for later use. The keyword "function" means function declaration. The functions in this example are called "welcome_message" and "button_message", but we could have chosen any other name (within some limits) as well. When we use these names in the events in the page body, the function with the corresponding name will be started on event.

When we have separated the commands, we can put them into another file. We can call it for example "commands.js".

function welcome_message() {
 alert('The page is ready.');
 alert('Click the button.');
}

function button_message() {
 alert('You have clicked the button.');
}

We can connect the JavaScript commands to the page using "script" tag with parameter "src" pointing to the file with commands. This way we can put one file with commands into multiple pages.

<html>
 <head>
  <meta http-equiv="Content-Script-Type" content="text/javascript"/>
  <title>An example page with JavaScript</title>
  <script type="text/javascript" src="commands.js"></script>
 </head>
 <body onload="welcome_message();">
  <p>Some text.</p>
  <p><input type="button" value="Click me!" onclick="button_message()"/></p>
 </body>
</html>

Summary: Client-side scripts are small programs inserted into the web page; they run in the web browser. JavaScript is a frequently used scripting language. The commands are inserted using the "script" tag in the page head or body, or using the events in HTML elements. We can also put the commands in a separate file.

Comments: 0