Home

Introduction to JavaScript

 

Overview of JavaScript

 

Introduction

HTML is one the most popular and one of the easiest computer languages around. It is used to give specific instructions to a browser. The browser interprets these instructions then displays text and items on the monitor screen. HTML uses  a series of (small) instructions called tags that are sent to the browser. The browser is equipped with an internal program called an interpreter. It is the interpreter that receives HTML tags, analyzes them, and tells the browser what to do.

HTML was primarily created to display text. Therefore, it has greatly accomplished its intended purpose. To complement HTML's shortcomings, new languages were developed to handle other assignments. One of these languages is called JavaScript.

On this site, we are going to learn how to use the JavaScript language along with HTML to develop customized and more responsive web pages.

Requirements and Prerequisites

JavaScript is an interpreted language embedded in all or most of the popular browsers such as Netscape, Mozilla Firefox, Opera, Konqueror, or Microsoft Internet Explorer, etc. To use the lessons on this site, you will need:

  • A computer in which a browser is installed. If you are using a Microsoft Windows operating system, such as Microsoft Windows 95, 98, Me, NT, 2000, XP, or Windows Server 2003 you should already have Internet Explorer and Netscape. You can also download the Netscape browser from the Netscape web site. Internet Explorer and Netscape browsers are also available for Macintosh computers. If you are using Linux, most distributions install the Netscape browser with the operating system; this means that you should also have the Netscape browser already. Linux also ships with other browsers such as Konqueror
  • A text editor. If you are using a Microsoft Windows operating system, Notepad is already installed on your computer and that's what we will use. If you are using Linux, emacs and vi are available for text editing. Macintosh also has its own editors
  • This tutorial assumes that you already know HTML, which you can also learn here.
 

JavaScript Files

This site assumes that you know the basics of creating folders or directory, creating and saving a file to the appropriate folder or directory. You should also know all the basic operations of opening, using and closing an application. Sometimes in the tutorials, you will be asked to perform some of these actions.

There are two main types of files used with the JavaScript language:

  • The simplest way to use JavaScript is to include its code in any other file. For example, you can "embed" JavaScript code in an HTML file or in another script or not script-based file. The file in this case would have an extension appropriate to the type of file. For example, an HTML file would have the .htm or .html extension even if it contains JavaScript code
  • Another popular way you can use JavaScript is to create a file that uniquely or almost uniquely contains JavaScript code. Such a file as a .js extension

On this site, we will regularly use both types of files. When needed, you will be directed as to what type of file to create. For the following exercise, we will create an HTML file and a folder using Notepad.

 

Practical Learning: Using Folders and Files

  1. To start Notepad, from the task bar, click Start -> (All) Programs -> Accessories -> Notepad.
  2. In the empty file of Notepad, type Leaving Sydney
  3. To create a folder, on the main menu, click File -> Save.
  4. In the Save As dialog box, click the arrow of the Save In combo box and select the C: drive 
  5. Click the Create New Folder button Create New Folder
  6. Type JavaScript Lessons and press Enter
  7. In the list of folders, make sure you can see JavaScript Lessons
  8. Click Cancel
  9. To save the file, on the main menu of Notepad, click File -> Save
  10. In the Save As dialog box, click the arrow of the Save In combo box and select the C: drive
  11. Find and double-click JavaScript Lessons to display it in the Save In combo box
  12. Click the arrow of the Save As Type combo box and select All Files
  13. Click the File Name box and type exercise1.htm
     
  14. Click Save
 

Previewing a File

To preview one of the files on this tutorial, you will need a browser such as Netscape, Internet Explorer, or Mozilla Firefox. To preview an HTML file, you can display its folder in the Home Directory, My Computer, or Windows Explorer. After displaying the folder, you can double-click the file. If the browser is already opened, on the main menu, you can click File -> Open. Locate the folder or directory where the file was saved and select the HTML file you want to preview.

Practical Learning: Previewing an HTML file

  1. Open Windows Explorer.
  2. Locate the JavaScript Lessons folder where you saved the exercise1.htm file to display it
  3. Double-click the file
     
  4. A browser should open with the file. After viewing the file, close the browser.
From now on, you will be asked to create folders or files, to open or modify files. I assume that you know how to perform any of these operations.
 

The Script Tag

One of the most usual ways you will use JavaScript is to display text, as if you were using HTML. Indeed, added just a few instructions, you can use any of the HTML tags and make them part of your script. Therefore, everything you have learned in HTML is valid here.

To set the instructions of a script, the section that has the script must start with the <Script> tag and end with the </Script> tag, as follows:

<Script>
</Script>

Because a script is written in a particular language that is not HTML, and because there are various scripting languages, to use a script, you should let the browser know what (particular) scripting language you are using. To let the browser know, type the word Language, followed by the = sign, followed by the name of the script language included in double-quotes. For example, to use JavaScript in a page, start the section with

<Script language="JavaScript">

and end it with the closing tag. Therefore the scripting section can be delimited with:

<Script Language="JavaScript>
</Script>

Unlike HTML, JavaScript is case sensitive. This means that Word, WORD, and word inside of your script are not the same. To set your HTML tags apart from the rest of the text, sometimes you can write them in uppercase. Therefore, some of the scripts here will be included as follows:

<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>

The section between the opening <script> tag and the closing </script> tag is called the body of the script. Everything that is part of the body of a script belongs to that script. 
 

 

Introduction to Classes and Objects 

 

Introduction to Objects

A JavaScript file contains code that allows a user to interact with a browser or a web-based application. In some cases, the user may be presented with Windows controls to fill out or retrieve values from them. As an application developer, there are two types of values you will deal with. Primitive types are those created from simple types. We will study them when we get to variables. The other types of values are referred to as class types. We will explore them more when we get to object-oriented programming.

JavaScript uses the concept of class to identify or manage the many of the values used in an application. Consider an object like a house. It has such characteristics as its type (single family, town house, condominium, etc), the number of bedrooms, the number of bathrooms, etc. These characteristics are used to describe a house to somebody who wants to buy it. To get such an object, you must first define the criteria that describe it. Here is an example:

House
[
      Address
      Type of House
      Number of Bedrooms
      Number of Bathrooms
      Has Indoor Garage
      The Living Room is Covered With Carpet
      The Kitchen Has an Island Stove
]

This information is used to describe a house. Based on this, the House is called a class. To actually describe a real house, you must provide information for each of the above characteristics. Here is an example:

House: Langston
[
      Address: 6802 Leighton Ave
      Type of House: Single Family
      Number of Bedrooms: 4
      Number of Bathrooms: 3
      Has Indoor Garage: Yes
      The Living Room is Covered With Carpet: Yes
      The Kitchen Has an Island Stove: No
]     

In this case, Langston is not a class anymore, it is a real house and is used to explicitly describe a House. Therefore, Langston is called an object. Based on this, a class is a technique used to provide the criteria to define an object. An object is the result of a description based on a class.

Properties

In our example of a house, we used words to describe it. Examples are: Address, Type of House, Number of Bedrooms, Number of Bathrooms. In computer programming, the characteristics used to describe an object are referred to as its properties.

 

Methods

While most objects only provide characteristics to describe them, other objects can perform actions. For example, a house can be used to protect people when it is raining outside. In computer programming, an action that an object can perform is referred to as method.

Earlier, we defined a House class with its properties. Unlike a property, a method must display parentheses on this right side to differentiate it from a property. An example would be:

House
[
      Address
      TypeOfHouse
      NumberOfBedrooms
      NumberOfBathrooms
      HasIndoorGarage
      LivingRoomCoveredWithCarpet
      KitchenHasIslandStove
      ProtectFromOutside()
]

When an object has a method, to access that method, type the name of the object, followed by a period, followed by the name of the method, and followed by parentheses. For example, if you have a House object named Langston and you want to ask it to protect its inside from outside rain, you would type:

Langston.ProtectFromOutside()

This is also referred to as calling a method.

Methods and their Arguments

When asked to perform an action, a method may need one or more values to work with. If a method needs a value, such a value is called an argument. While a certain method may need one argument, another method would need more than one. The number of arguments of a method depends on its goal. The arguments of a method are provided in parentheses.

Suppose you have a House object and you want it to protect what is inside. There may be different reasons why the inside needs to be protected: may be from the rain, may be from the windy dust, may be at night time from too much light that prevents from sleeping, etc. Based on this, you may have to provide additional information to indicate why or how the inside should be protected. For this reason, when such a method is called, this additional information must be provided, in the parentheses of the method. Here is an example:

House
[
      Address
      TypeOfHouse
      NumberOfBedrooms
      NumberOfBathrooms
      HasIndoorGarage
      LivingRoomCoveredWithCarpet
      KitchenHasIslandStove
      ProtectFromOutside(Reason)
]

On this site, we will use the word syntax to indicate the name of the object, its method, and its argument. This will allow use to get acquainted with what is required to use an object and especially its method. For example, to represent a method that takes one argument, such as the above, can be said to use a syntax as the following:

House.ProtectFromOutside(Reason)

This syntax indicates that the ProtectFromOutside() method of the House object takes one argument. In future lessons, we will get more information about these issues.

As mentioned above, a method can be created to take more than one argument. In this case, the arguments are separated with commas. Here is an example:

House
[
      Address
      TypeOfHouse
      NumberOfBedrooms
      NumberOfBathrooms
      HasIndoorGarage
      LivingRoomCoveredWithCarpet
      KitchenHasIslandStove
      ProtectFromOutside(Reason, WhenToProtect)
]

The arguments are used to assist the object with performing the intended action.

Once a method has been created, it can be used. Using a method is referred to as calling it. If a method takes one argument, when calling it, you must provide a value for the argument, otherwise the method would not work. 

To call a method that takes an argument, type the name of the method followed by the opening parenthesis “(“, followed by the value that will be the argument, followed by a closing parenthesis “)”. The argument you pass can be a regular constant value or it can be the name of another object.

If the method is taking more than one argument, to call it, type the values for the arguments, in the exact order indicated, separated from each other by a comma.

 

The Document  Class

 

Introduction

JavaScript uses an object called document. This object manages many of the instructions that JavaScript can handle for HTML. One of the methods of that object is to display something on the screen. A string is a piece of text that the browser is asked to use "as is".

The write Method

The method used to display a string is called write. The syntax of the write method of the Document object is:

document.write(String)

The String to display can be provided in double-quote or as a variable as we will learn soon. Here is an example of displaying somebody's name using the document.write function:

<SCRIPT LANGUAGE="JavaScript">
document.write("Jacques Fame Ndongo")
</SCRIPT>

To display various lines of text, you can use as many document.write lines as you need.

A file can have many different script sections and you can include as many lines of code as necessary in a file. To have different script sections, start each with the <Script> tag and close it with the </Script> closing tag. Here is an example:
<SCRIPT LANGUAGE="JavaScript">
document.write("Book Title: ")
document.write("JavaScript Programming")
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
document.write("Author: Martin Russel Bitha")
document.write("Publisher: Les moules Press")
document.write("Year Published: 1998")
</SCRIPT>

 

Practical Learning: Introduction to JavaScript

  1. Change the contents of the file as follow:
     
    <Script Language="JavaScript">
    document.write("Leaving Sydney")
    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 and preview it in the browser:
     
    Page Preview 
  3. Notice that the whole page displays as one paragraph
  4. After previewing the page, return to your text editor and close it
 

Home Copyright © 2002-2010 FunctionX, Inc. Next