Requirements:

1. Basic HTML Knowledge
2. Basic Programming Logic Knowledge

I – Running Examples

In order to run any of the examples illustrated in this tutorial, please proceed as follows:

1. Copy the code and paste it in your favorite text editor – Notepad will do the job!

1. Save the file as pagename.html, you can replace pagename by anything you want.

1. Double click on the file you just saved.

1. It’ll be displayed in your default web browser.

II – The Power of JavaScript

HTML (Hypertext Mark Up Language) is the language of the web by excellence.
To put it simple, HTML allows you to display data and format the way it looks (with the help of CSS).
Check the example that follows:

Example 1

In this example, whatever you add to the HTML code and no matter how many time you refresh the page, you will not be able to change the sentence Michael is a Computer Wizard!.
What if I wanted to display Mr. X is a Computer Wizard! if Mr. X visits the page?
Just by using HTML, this will not be possible.
This illustrates the limits of using simple HTML: data is static, which means it doesn’t change from one situation to another.

To solve this problem, Netscape created JavaScript, a scripting language for the web.
Let us try the HTML code with some JavaScript this time:

Example 2

In this example, the user will enter his name in a prompt box and the message will be displayed.
If Bob enters his name, the message Bob is a Computer Wizard! will be displayed.
You don’t believe me, do you? Try it yourself; the best way to learn is by trial and error…

III – Understanding JavaScript

Before you understand properly how we were able to do that, you must understand some principle of JavaScript.
Contrarily to other programming languages (such as C, C++ or Java) which are mostly used for standalone application, JavaScript is a web-only scripting language (a scripting language is a less complicated programming language).

JavaScript is also:

1. Interpreted
   No code compilation is required.
   The JavaScript code is simply interpreted and executed when the page is opened.
   We just typed the code in a HTML file, double clicked on the file, and the browser did the rest for us.
2. Executed on the client-side
   The code is executed in the user’s browsers when he opens the page.
   You can view the code from your browser; this operation differs from a browser to another.

   

   Actually, the HTML and JavaScript code is visible to any user who opens the page.

3. NOT the same as Java
   The two programming languages do not share the same creator or the same programming concepts.
   They might look similar in some cases, but their programming dialects actually differ.

IV – JavaScript Essentials

In what follows, we will consider Example 2 as a reference, more particularly this piece of code:

1. The <script> tag

   Except the content within the script starting (line 6) and ending (line 11) tags, the code is simple HTML which you are probably very familiar with.
   Any JavaScript code written within our HTML must be preceeded by <script type=”text/javascript” and succeeded by </script>.

2. Declaring a variable

   In JavaScript, a variable is an element that stores data. Data can be anything: an integer (eg. 14), a decimal number (eg. 0.4), a character (eg. ‘J’), a string (eg. ‘I hate brocolli’), or any other data type.
   To declare a variable we use the following format: var <variable_name>;
   The <variable_name> must start by either a letter or an underscore (‘_’) and can only contain letters, numbers or the underscore character.

   In our example, we declared two variables:
   var name on line 7
   name is used to store the name of the person (eg. ‘Michael’)
   var message on line 9
   message is used to store the message to output (eg. ‘Michael is a Computer Wizard!’)

3. The Prompt Box

   JavaScript has three different built-in popup boxes: the alert box, the confirm box and the prompt box.
   A prompt box displays a message, an ‘OK’ button, a ‘Cancel’ button and prompts the user to input data.
   It is called in this format: prompt(<display_message>, <default_data>);
   <display_data> is the message to display to the user.
   <default_data> is the default value entered by the user.
   The prompt function returns the value entered by the user once he clicks the ‘OK’ button.
   If he clicks the ‘Cancel’ button instead, null is returned.

   In our example, we used a prompt box on line 8: prompt(“What’s your name?”, “Your Name”);
   “What’s your name?” is the <display_data>
   “Your Name” is the <default_data>
   You notice, in the example, ‘Your Name’ is entered in the prompt box when the page first loads.

   Assuming the user enters ‘Bob’ and clicks the ‘OK’ button, the variable name will have the value ‘Bob’ after line 8.
   In this case the message ‘Bob is a Wizard!’ will be output.
   Assuming the user clicks the ‘Cancel’ button, the variable name will have the value null after line 8.
   In this case the message ‘null is a Wizard!’ will be output. Try it yourself…

4. Strings

   In programming languages, a string is any sequence of characters (eg. ‘Duh!’, ‘Chi huaha’). A string can also be empty (eg. ”).
   In JavaScript there is no specific data type called string.
   There is only one data type called var, a variable (which we discussed earlier).
   In a variable, we differentiate a string from other data types by using single quotations or double quotations on both side of the value.
   var bob1 = “Bob rules”; Valid string assignment.
   var bob2 = ‘Bob rules’; Valid string assignment.
   var bob3 = ‘Bob rules”; Invalid string assignment: a single quotation on one side and a double quotation on the other.

   Strings can also be concatenated together: that is two or more strings can be attached together to form a new string.
   To achieve this, we use the ‘+’ operator. The operator is also used with other data types; what you need to know for the moment is that when used with strings, the ‘+’ operator concatenates.
   var bob4 = bob1 + bob2; Valid string assignment. bob4 will have the value “Bob rulesBob rules”.
   var bob5 = bob1 + ” i tell you, ” + bob1; Valid string assignment. bob5 will have the value “Bob rules i tell you, Bob rules”.
   var bob6 = bob1 + ” but I am” + ” da King!”; Valid string assignemnt. bob6 will have the value “Bob rules but I am da King!.
   var bob1 = bob1 + “: this is not true!”; Not valid string assignment: bob1 is already declared.
   bob1 = bob1 + “: this is not true!”; Valid string assignment. bob1 will have the value “Bob rules: this is not true!”.

   Now that you became familiar with variables and particularly strings, examine these lines of code once again:

   7 8 9

   var name; name = prompt(“What’s your name?”, “Your Name”); var message = name + ” is a Computer Wizard!”;

   On line 8, name is assignned the data entered by the user.
   On line 9, message is assigned the data entered by the user (eg. Bill), concatenated with the string ‘ is a Computer Wizard!’ producing a new string (eg. ‘Bill is a Computer Wizard!’).

V – From JavaScript to HTML

In order to output, from JavaScript, data to the HTML code, we use the function document.write.
The function is called in this format: document.write(<output_data>);
<output_data> is the data to output to HTML.

In Example 2, we used document.write(message); on line 10.
This outputs the value of message to HTML.

Let us consider some new examples in order to understand more the document.write function.

Example 3

“Hello There” will appear on our HTML page.
We can actually rewrite this page in simple HTML, which will produce the exact same result. The code is as follows:

Example 3 Bis

Now, how about this example:

Example 4

The output of the page will be: 1984 in bold, then a line break, then by George Orwell in italic.
You can span several lines when dealing with a string (such as on line 9-10) by using the ‘+’ operator then continuing on the next line.
The ‘\n’ (on line 10) is used to create a new line in the output process of the HTML code. That is, a line break will exist after the <br /> tag.
The equivalent simple HTML version of Example 4 is as follows:

Example 4 Bis

You now observe how powerful the document.write function is.
You can output to HTML anything even HTML tags or even JavaScript code (within <script> and </script> tags) to be executed.

Still, there’s much more to JavaScript than just printing HTML. Maybe some other time…