Your SlideShare is downloading. ×
Week8
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

Week8

176
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
176
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. اللهم لا سهل إلا ما جعلته سهلاً، وأنت تجعل الحزن إذا شئت سهلاً
  • 2. Web Site Development Week 8
  • 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. 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