JAVASCRIPT Tutorial

Chapter 7: Looping in JavaScript

<html>

<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Sample JavaScript using While</title>
<script language=javascript>

var sum,
mark1,
mark2,
counter,
avg;

sum=0;
counter=1;

while(counter<=8) {

mark1=window.prompt("Enter your mark","0");
mark2=parseInt(mark1);
sum=sum+mark2;
counter=counter+1;
}
avg=sum/8;
document.writeln("<H2> Average mark is "+avg+"</H2>");

</script>
</head>

<body>

<h2 align="center"><font face="Arial">Sample JavaScript using While</font></h2>

</body>

</html>

Click on the testing page

Chapter 6: Conditional Operators in JavaScript

We have learned the If operator in Chapter 5, but now we will use If and else together as conditional operators so that the program executes certain jobs according to certain conditions. The if and else constitute a program structure, where it will select certain alternatives during program execution. I am going to illustrate this concept using an example which involve the computation of students' examination grades based on their marks. The program will compute the grade based on the mark entered and output it in a table. The codes are shown below, you can copy and paste them into your webpage and run the program.

Example:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Examination Grade</title>
<H2><font face="Arial">The grade will be shown below when you enter the mark</font></H2>

<table border=1 align=center bgcolor=yellow ><tr><td><b><script language=javascript>
var mark;

mark=window.prompt("Enter your mark:","0")
if (mark>=80)
document.writeln("Grade="+"A");
else
if (mark>=60)
document.writeln("Grade="+"B");
else if (mark>=50)
document.writeln("Grade="+"C");
else if (mark>=40)
document.writeln("Grade="+"D");
else if (mark>=30)
document.writeln("Grade="+"E");
else
document.writeln("F");

</script></td></tr></table>
</head>

<body>

</body>

</html>

Click on the testing page

Chapter 5: Relational Operators in JavaScript

5.1 Relational Operators

In chapter 4, we have learned basic arithmetic operations in JavaScript, this chapter will introduce the more powerful relational operators. Using relational operators, we could write decision making procedures using If keyword.

Relational Operators	Meaning
x==y	x is equal to y
x!=y	x is not equal to y
x>y	x is more than y
x<y	x is less than y
x>=y	x is more than or equal to y
x<=y	x is less than or equal to y

Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>

<HEAD>
<TITLE>Using Comparison Operators </TITLE>

<SCRIPT LANGUAGE = "JavaScript">
var      firstNumber, //declare first variable
          secondNumber; //declare second variable

firstNumber = window.prompt( "Enter first Number:", "0" );

secondNumber = window.prompt( "Enter second integer:", "0" );

document.writeln( "<H1>Comparison Output</H1>" );
document.writeln( "<TABLE BORDER = '1' WIDTH = '100%'>" ); // Creates table

if ( first == second )
document.writeln( "<TR><TD>" + firstNumber + " = " + secondNumber +
"</TD></TR>" );    // Creates rows and columns

if ( first != second )
document.writeln( "<TR><TD>" + firstNumber + " Not equal to " + secondNumber +
"</TD></TR>" );

if ( first < second )
document.writeln( "<TR><TD>" + firstNumber + " < " + secondNumber +
"</TD></TR>" );

if ( first > second )
document.writeln( "<TR><TD>" + firstNumber + " > " + secondNumber +
"</TD></TR>" );

if ( first <= second )
document.writeln( "<TR><TD>" + firstNumber + " <= " + secondNumber +
"</TD></TR>" );

if ( first >= second )
document.writeln( "<TR><TD>" + firstNumber + " >= " + secondNumber +
"</TD></TR>" );

// Display results
document.writeln( "</TABLE>" );
</SCRIPT>

</HEAD>
<BODY>
<P>Click Refresh (or Reload) to run the script again</P>
</BODY>
</HTML>

Click Testing Page to view the output

Chapter 4: Arithmetic Operations in JavaScript

4.1 Arithmetic in JavaScript

JavaScript is not just a scripting language, it can also perform arithmetic calculations! Best of all, it can interact with online users by receiving data from them, operate on the data dan then display the outputs to the users. The four basic arithmetic operators in JavaScript is just the same as in VB, namely

Addition	+
Subtraction	-
Multiplication	x
Division	/

Lets construct our first arithmetic program in JavaScript. You can either use a text editor such as notepad to type in the statements or you can use Microsoft Frontpage or Dreamweaver to do the job. Now, type in the following lines of statements.

<HTML>

<HEAD>

var           Number1, // this is the first string input by the user
               Number2 , // this is the second string input by the user
               Num1 , // numeric value converted from Number1
               Num2, // numeric value converted from Number2
               sum,
               difference ,
               product,
               quotient;
               Number1=window.prompt("Enter your first Integer","0");
               Number2=window.prompt("Enter your second integer","0");
               Num1=parseInt(Number1);
               Num2=parseInt(Number2);
               sum=Num1+Num2;
               difference=Num1-Num2;
               product=Num1*Num2;
               quotient=Num1/Num2;
               document.writeln(Number1+"+"+Number2+"="+sum+"<BR>");
               document.writeln(Number1+"-"+Number2+"="+difference+"<BR>");
               document.writeln(Number1+"x"+Number2+"="+product+"<BR>");
               document.writeln(Number1+"/"+Number2+"="+quotient);

</Script>

Click Testing Page to view the output

Chapter 3: JavaScript Dialog Box

3.1 Dialog box

Dialog box that pop up in a webpage will enhance interactivity of the webpage. A dialog normally carries a message or question that required some form of action from the user, either clicking a button or pressing a key on the keyboard .The syntax is very simple, you just need to use the alert method. The structure is as follows:

<HEAD>

windows.alert("Welcome to JavaScript Tutorial");

</SCRIPT>　

<HEAD>

Adding this Script will allow the user too see a popup dialog box that displays the message "welcome to JavaScript Tutorial" as you have seen when you come to this visit this page, as I have put this line in this webpage. Refresh this page will let you see the dialog box again as shown in the diagram below:

You can customized the format of the output using a backslash and "n". Lets change the line windows.alert("Welcome to JavaScript Tutorial") to

window.alert"welcome tonJavaScriptnTutorial"). The output will be displayed in three lines now, as shown below:

If you put the two scripts together, you will see two dialog boxes appear successively, after you click the first one, the second one will appear.

Chapter 2: JavaScript Basics

2.1 The syntax of JavaScript

JavaScript does not required any special program to run it, you can use any standard text editors such as the Notepad ,WordPad or FrontPage to type it, as it is embedded within an HTML document. To embed a JavaScript into an HTML document, we use the <SCRIPT language="JavaScript></Script> tag. Let me illustrate one example here:

<HTML>

<Body>

<SCRIPT language="JavaScript>

document.write ("Welcome to JavaScript tutorial");

</SCRIPT>

</HTML>

The output is as below:

　 Welcome to JavaScript tutorial

document is an object in JavaScript and write is a method that display text in an HTML document. The statement must end with a semicolon ;. so, document.write will display the text enclosed in the brackets on the HTML document. You can also enhance the text output by changing the font size, style, color and so on. The following example will output the text as a Heading.

<HTML>

<Body>

<SCRIPT language="JavaScript">

document.write ("<H1>Welcome to JavaScript tutorial</H1>");

</SCRIPT>

</HTML>

Welcome to JavaScript tutorial

This example will add color to the text

<HTML>

<Body>

<SCRIPT language="JavaScript">

document.write ("<Font color='Red'><H1>Welcome to JavaScript tutorial</H1></Font>");

</SCRIPT>

</HTML>

The output is as follows:

Welcome to JavaScript tutorial

Another JavaScript method that is associated with displaying text in an HTML document is the writeln method. The writeln method pushes the cursor to the next line while the write method will put the cursor next to the last character. However, the actual rendering of the HTML text does not start a new line even though we use the writeln method. So, basically write and writeln are the same. If you want to start a new line, just use <P> or the <br> tag. Let's see the two examples below:

<HTML>

<Body>

<SCRIPT language="JavaScript">

document.write ("<Font color='Red'><H1>Welcome to ");

document.writeln ("JavaScript tutorial</H1></Font>");

</SCRIPT>

</HTML>

the output :

Welcome to JavaScript tutorial

<HTML>

<Body>

<SCRIPT language="JavaScript">

document.writeln ("<Font color='Red'><H1>Welcome to <br>");

document.write ("JavaScript tutorial</H1></Font>");

</SCRIPT>

</HTML>

The output:

Welcome to
JavaScript tutorial

Note that <br> can be embeded into a JavaScript statement, and each statement must be separated by a semicolon;

I think you have learned some basic concepts of JavaScript and now is the time for you to do some experiments on your own. You copy the codes here and modify them according to your taste. Learning by doing is the best form of learning! Let finish here and come back later for the next Chapter.

Chapter 1: Introduction to JavaScript

Introduction

Well, let assume you have already mastered HTML, would you be happy to just stay at this level, or would you like to make your webpage more alive and interactive? If you want to enhance your webpage and make it more powerful, you have come to the right place! The answer is JavaScript! Although JavaScript has been around for more than a decade, many people are still not familiar with the language. So, I would like to share with you what is a JavaScript.

Why JavaScript? You may have this question in mind. Well, let me get to the point. HTML or HyperText Markup Language was the only language that was used to present text and graphics as well as links to the world wide web users in the 90's of the last century . Although it was a vast improvement from the earlier text-only browsers like Gopher, it was relatively passive and static, it can't interact much with the users. So, we need JavaScript! JavaScript can turn a webpage into a lively interactive platform for world wide web users! JavaScript is a scripting language for HTML. By using JavaScript , you can add sound, date, time, change the color of the webpage according to certain day, pre-validate data entered into a form by the users before it is sent to the server, search through a database, set options based on users preferences and much more.

You might want to ask what is this thing called scripting language? Actually a script is made up of a sequence of statements or instructions for the computer to perform certain jobs, for example, like providing a response to the users, to play a song, to start a slide show, to display certain advertisements and so on. It is simple programming language with much lower learning barrier than the actual computer languages like JAVA, C++, Turbo Pasacal and etc. For example, the following JavaScript displays current date on a webpage, the instrutions only made up of a few lines.

The Output

Date:4/18/2008