Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. اللهم لا سهل إلا ما جعلته سهلاً، وأنت تجعل الحزن إذا شئت سهلاً
  2. 2. Web Site Development Week 8
  3. 3. Lecturer: Dr. Refaat Mokhtar Mohamed Assistant Professor Electrical Engineering Dept Faculty of Engineering, Assiut University URL : http://www.aun.edu.eg/fac_eng/arabic/cvs/Refaat Office: Room # 203 Electrical Engineering Department Building EMail : [email_address]
  4. 4. Today’s Objectives <ul><li>Client-Side JavaScript </li></ul><ul><ul><li>Event Handlers </li></ul></ul><ul><ul><li>DOM </li></ul></ul><ul><ul><ul><li>Window </li></ul></ul></ul><ul><ul><ul><li>Document </li></ul></ul></ul><ul><ul><ul><li>Forms </li></ul></ul></ul><ul><li>Quiz May-8 th , Exam May-13 th </li></ul>
  5. 5. Client-Side JavaScript
  6. 6. JavaScript and DOM <ul><li>JavaScript relies on a Document Object Model ( DOM ) that describes the structure of the web page </li></ul><ul><ul><li>This is not the same as the XML DOM </li></ul></ul><ul><li>You can do a lot with a just a little understanding of the DOM </li></ul><ul><ul><li>You use the DOM to access elements on the web page </li></ul></ul><ul><ul><li>You can capture events without knowing the DOM at all </li></ul></ul><ul><ul><li>You need the DOM to make any changes to the web page </li></ul></ul>
  7. 7. Common Events <ul><li>Most HTML elements produce the following events: </li></ul><ul><ul><li>onClick -- the form element is clicked </li></ul></ul><ul><ul><li>onDblClick -- the form element is clicked twice in close succession </li></ul></ul><ul><ul><li>onMouseDown -- the mouse button is pressed while over the form element </li></ul></ul><ul><ul><li>onMouseOver -- the mouse is moved over the form element </li></ul></ul><ul><ul><li>onMouseOut -- the mouse is moved away from the form element </li></ul></ul><ul><ul><li>onMouseUp -- the mouse button is released while over the form element </li></ul></ul><ul><ul><li>onMouseMove -- the mouse is moved </li></ul></ul><ul><li>In JavaScript, these should be spelled in all lowercase </li></ul>
  8. 8. DOM
  9. 9. Fields of window - I <ul><li>window </li></ul><ul><ul><li>The current window (not usually needed). </li></ul></ul><ul><li>self </li></ul><ul><ul><li>Same as window. </li></ul></ul><ul><li>parent </li></ul><ul><ul><li>If in a frame, the immediately enclosing window. </li></ul></ul><ul><li>top </li></ul><ul><ul><li>If in a frame, the outermost enclosing window. </li></ul></ul><ul><li>frames[ ] </li></ul><ul><ul><li>An array of frames (if any) within the current window. Frames are themselves windows. </li></ul></ul><ul><li>length </li></ul><ul><ul><li>The number of frames contained in this window. </li></ul></ul>
  10. 10. Fields of window - II <ul><li>document </li></ul><ul><ul><li>The HTML document being displayed in this window. </li></ul></ul><ul><li>location </li></ul><ul><ul><li>The URL of the document being displayed in this window. If you set this property to a new URL, that URL will be loaded into this window. Calling location.reload() will refresh the window. </li></ul></ul><ul><li>navigator </li></ul><ul><ul><li>A reference to the Navigator (browser) object. Some properties of Navigator are: </li></ul></ul><ul><ul><ul><li>appName -- the name of the browser, such as &quot;Netscape&quot; </li></ul></ul></ul><ul><ul><ul><li>platform -- the computer running the browser, such as &quot;Win32&quot; </li></ul></ul></ul><ul><li>status </li></ul><ul><ul><li>A read/write string displayed in the status area of the browser window. Can be changed with a simple assignment statement. </li></ul></ul>
  11. 11. Methods of window , I <ul><li>alert(string) </li></ul><ul><ul><li>Displays an alert dialog box containing the string and an OK button. </li></ul></ul><ul><li>confirm(string) </li></ul><ul><ul><li>Displays a confirmation box containing the string along with Cancel and OK buttons. Returns true if OK is pressed, false if Cancel is pressed. </li></ul></ul><ul><li>prompt(string) </li></ul><ul><ul><li>Displays a confirmation box containing the string, a text field, and Cancel and OK buttons. Returns the string entered by the user if OK is pressed, null if Cancel is pressed. </li></ul></ul>
  12. 12. Methods of window , II <ul><li>open(URL) </li></ul><ul><ul><li>Opens a new window containing the document specified by the URL. </li></ul></ul><ul><li>close() </li></ul><ul><ul><li>Closes the given window (which should be a top-level window, not a frame). </li></ul></ul>
  13. 13. Fields of document - I <ul><li>You must prefix these fields with document. </li></ul><ul><li>anchors[ ] </li></ul><ul><ul><li>An array of Anchor objects (objects representing <a name=...> tags) </li></ul></ul><ul><li>applets[ ] </li></ul><ul><ul><li>An array of Applet objects </li></ul></ul><ul><ul><ul><li>The properties are the public fields defined in the applet </li></ul></ul></ul><ul><ul><ul><li>The methods are the public methods of the applet </li></ul></ul></ul><ul><ul><ul><li>Cautions: </li></ul></ul></ul><ul><ul><ul><ul><li>You must supply values of the correct types for the fields and method parameters </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Changes and method calls are done in a separate Thread </li></ul></ul></ul></ul>
  14. 14. Fields of document ,- II <ul><li>forms[ ] </li></ul><ul><ul><li>An array of Form elements </li></ul></ul><ul><ul><ul><li>If the document contains only one form, it is forms[0] </li></ul></ul></ul><ul><li>images[ ] </li></ul><ul><ul><li>An array of Image objects </li></ul></ul><ul><ul><ul><li>To change the image, assign a new URL to the src property </li></ul></ul></ul><ul><li>links[ ] </li></ul><ul><ul><li>An array of Link objects </li></ul></ul><ul><ul><ul><li>A link has several properties, including href , which holds the complete URL </li></ul></ul></ul>
  15. 15. Fields of document , III <ul><li>bgColor </li></ul><ul><ul><li>The background color of the document </li></ul></ul><ul><ul><ul><li>May be changed at any time </li></ul></ul></ul><ul><li>title </li></ul><ul><ul><li>A read-only string containing the title of the document </li></ul></ul><ul><li>URL </li></ul><ul><ul><li>A read-only string containing the URL of the document </li></ul></ul>
  16. 16. Fields of the form object <ul><li>elements[ ] </li></ul><ul><ul><li>An array of form elements </li></ul></ul>