Javascript 2

© Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org
Hidaya Institute of
Science &
Technology
www.histpk.org
A Division of Hidaya Trust, Pakistan

JAVASCRIPT

DIALOG BOX
Alert Dialog Box:
•An alert dialog box is mostly used to give a warning message to
the users. Like if one input field requires to enter some text but
user does not enter that field then as a part of validation you
can use alert box to give warning message
alert(“text”);
Confirmation Dialog Box:
•A confirmation dialog box is mostly used to take user's consent on any
option. It displays a dialog box with two buttons: OK and Cancel.
•If the user clicks on OK button the window method confirm() will
return true. If the user clicks on the Cancel button confirm() returns
false. You can use confirmation dialog box
confirm(“Message");

DIALOG BOX
•Prompt Dialog Box:
•The prompt dialog box is very useful when you want to pop-up
a text box to get user input. Thus it enable you to interact with
the user. The user needs to fill in the field and then click OK.
•This dialog box is displayed using a method
called prompt() which takes two parameters (i) A label which
you want to display in the text box (ii) A default string to display
in the text box.
•This dialog box with two buttons: OK and Cancel. If the user
clicks on OK button the window method prompt() will return
entered value from the text box. If the user clicks on the Cancel
button the window method prompt() returns null.
•prompt(“Message At top", “Name In Field");

FUNCTIONS
•A function is a group of reusable code which can be called
anywhere in your program. This eliminates the need of writing
same code again and again.
•Help programmers to write modular code.
•Can easily divide your big program in a number of small and
manageable functions.
•Like any other advance programming language, JavaScript also
supports all the features necessary to write modular code using
functions.
•You must have seen functions like alert() and write(), We are
using these function again and again but they have been written
in core JavaScript only once.

FUNCTIONS
•The most common way to define a function in JavaScript is by using
the function keyword, followed by a unique function name, a list of
parameters (that might be empty), and a statement block surrounded
by curly braces.
•The basic syntax is shown here:
function functionname(parameter-list)
{
statements
}
Calling a Function:
•To invoke a function somewhere later in the script, you would simple
need to write the name of that function as follows:
functionname();

FUNCTIONS
Function Parameters:
•There is a facility to pass different parameters while calling a function.
•These passed parameters can be captured inside the function and any
manipulation can be done over those parameters.
•A function can take multiple parameters separated by comma.
function functionname(para1,para2)
{
statements
}
The return Statement:
A JavaScript function can have an optional return statement. This is
required if you want to return a value from a function. This statement
should be the last statement in a function.

EVENTS IN JAVASCRIPT
•JavaScript's interaction with HTML is handled through events
that occur when the user or browser manipulates a page.
•When the page loads, that is an event.
•When the user clicks a button, that click, too, is an event.
• Another example of events are like:
• pressing any key
• closing window
• resizing window.
•Developers can use these events to execute JavaScript coded
responses, which cause buttons to close windows, messages to
be displayed to users, data to be validated, and virtually any
other type of response imaginable to occur.

HTML 4 STANDARD EVENTS
Event Value Description
onchange script Script runs when the element changes
onsubmit script Script runs when the form is submitted
onreset script Script runs when the form is reset
onselect script Script runs when the element is selected
onblur script Script runs when the element loses focus
onfocus script Script runs when the element gets focus
onkeydown script Script runs when key is pressed
onkeypress script Script runs when key is pressed and released
onkeyup script Script runs when key is released
onclick script Script runs when a mouse click
ondblclick script Script runs when a mouse double-click
onmousedown script Script runs when mouse button is pressed
onmousemove script Script runs when mouse pointer moves
onmouseout script Script runs when mouse pointer moves out of an element
onmouseover script Script runs when mouse pointer moves over an element
onmouseup script Script runs when mouse button is released

DOCUMENT OBJECT MODEL
•Every web page resides inside a browser window which can be considered as an object.
•A Document object represents the HTML document that is displayed in that window.
•The Document object has various properties that refer to other objects which allow access
to and modification of document content.
•The way that document content is accessed and modified is called the Document Object
Model, or DOM. The Objects are organized in a hierarchy.
• This hierarchical structure applies to the organization of objects in a Web document.
•Window object: Top of the hierarchy. It is the outmost element of the object hierarchy.
•Document object: Each HTML document that gets loaded into a window becomes a
document object. The document contains the content of the page.
•Form object: Everything enclosed in the <form>...</form> tags sets the form object.
•Form control elements: The form object contains all the elements defined for that object
such as text fields, buttons, radio buttons, and checkboxes.

Javascript 2

More Related Content

Viewers also liked (16)

Similar to Javascript 2 (20)

More from Mudasir Syed (20)

Recently uploaded (20)

Javascript 2