Your SlideShare is downloading. ×
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply



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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


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