12Javascript(lect 2)

198 views

Published on

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
198
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

12Javascript(lect 2)

  1. 1. © 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
  2. 2. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org JAVASCRIPT BY: MUHAMMAD BAQAR QAZI
  3. 3. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org 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");
  4. 4. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org 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");
  5. 5. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org 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.
  6. 6. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org 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();
  7. 7. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org 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.
  8. 8. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org 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.
  9. 9. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org 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
  10. 10. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org 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.
  11. 11. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org
  12. 12. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org

×