Javascript for X: Day 1

Today, 24.12.11, is the first day of the Javascript tutorial here on quadd help. We have divided it in three tutorials, one tutorial per day. As follows:

Lesson	Date	Topic
One	24.12.11	Javascript Popup Boxes
Two	25.12.11	Javascript Functions
Three	26.12.11	Controlling Forms using Javascript & Calculator Example

Day 1 
Javascript Popup Boxes:
Pop Up Boxes we have seen so many times on webpages daily. Sometimes they ask for some input from us, sometimes they provide quick output and sometimes they provide limited options in the form of OK and CANCEL buttons. Using Javascript we can create three types of dialog boxes:

1. Alert Dialog Box: It displays a message to the user with OK button to close it.
2. Prompt Dialog Box: It displays user a message and also a text box to input some value with OK and CANCEL Buttons.
3. Confirm Dialog Box: It displays user a message, just like Alert dialog box, but with extra CANCEL button along with OK button. Both buttons can be assigned different task by programming.

In this course we will discuss only first two dialog boxes.
Alert Dialog Box
Syntax: alert("message or text");
Example Code: 

Example Output:

Prompt Dialog Box
Syntax: prompt("Message or text","default value"); 
Example Code:

Simple code using Prompt dialog box and alert dialog box together.

Example Output:

Output1: First appearance of prompt dialog box with 'default value'.

Output2: Demonstrates that use can input text into text box within prompt dialog box

Output3: Alert dialog box displaying output. NOTE: to display output in webpage body use document.write() instead of alert().

Sample program using Javascript Popup Boxes:

Code:

This program accept two numbers from user using two prompt dialog boxes. As you know prompt dialog accept only TEXT values which can not be used in mathematics. So this program uses 'parseInt()', an inbuilt function to convert Text values to Integer values (numerical). The two numbers read by prompt dialog box are assigned to two variables namely, num1 and num2. Using '+' arithmetic operator sum of values of num1 and num 2 variables is assigned to third variable namely, num3. And then using document.write(), the result is printed to web browser body section in a formatted way.

Output:

Output1: User entered first number. (this number will be assigned to 'num1' variable).

Output2: User entered second number. (this number will be assigned to 'num2' variable).

Output3: document.write() prints a message in a formatted way in the browser window as follows: a message "Sum of two numbers", value of variable 'num1', message "and", value of variable 'num2', a message "is", and value of variable 'num3'.

This tutorial is about reading values at run time. And this will help us to read values from HTML forms, in following tutorials.

Readers can create their own examples. Please feel free to ask any doubts regarding this tutorial or about your own examples, today. Please allow 2-3 hours to answer your queries.

Tomorrow's topic: Javascript functions.

Quadd Notes for GMACPS Class X.