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:

One24.12.11Javascript Popup Boxes
Two25.12.11Javascript Functions
Three26.12.11Controlling 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:

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.

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.


  1. In Prompt Dialog Box if we click on "cancel" button then also it show alert box with name="null"
    how to solve this ?

  2. You need to use IF statement to catch null. And if you don't have knowledge of IF statement then you can't do anything.

  3. what is parseInt and prompt??
    that much i know that prompt is related to input parseint about no.s but sir could you please explain it...?

  4. I think you have not read the tutorial fully.
    prompt creates prompt dialog box for input (for more on prompt dialog box please refer to the tutorial above)

    And Prompt dialog box comes with Text box for input. So what ever user enters either number or text, it will be accepted as text and text can not be used for mathematical operations. So, if user enters number in prompt dialog box and to ensure that it will be accepted as number by program ParseInt is used. It converts text to number (if text consists of any number).