Embed Size (px)
Citation preview
Partnership with Enterprises Towards Building Open
Source Communities and
Rejuvenation Technical Education and Innovation
Introduction
to
Web Design and
Application Development
1 A. Al-Tamimi © Lecture 11
Lecture Overview
• Introduction to JavaScript
A. Al-Tamimi © 2 Lecture 11
Introduction to JavaScript
Lecture 11 A. Al-Tamimi © 3
Introduction to JavaScript
• All of the main browsers implement an object model called the Document Object Model (DOM) that was devised to represent web pages
• In this Document Object Model, the page as a whole is represented using a document object; then the links in that page are represented using a links object, the forms are represented in a forms object, images are represented using an image object, and so on
Lecture 11 A. Al-Tamimi © 4
How to Add Script to Your Pages
• In able to allow JavaScript to work, it must be
enabled by the browser
• You can use <script> island with
language=“javascript”
• You can embed the script using <script>
element
Lecture 11 A. Al-Tamimi © 5
How to Add Script to Your Pages
• There are three places where you can put your JavaScript – In the < head > of a page: These scripts will be called
when an event triggers them
– In the < body > of a page: These scripts will run as the page loads
– In an external file: If the link is placed inside the < head > element, the script is treated the same as when the script lives inside the head of the document waiting for an event to trigger it, whereas if it is placed in the <body> element it will act like a script in the body section and execute as the page loads
Lecture 11 A. Al-Tamimi © 6
JavaScript Comments
• You can use /* */ pair
• You can use // comment style
• You can also use HTML comment style <!-- -->
Lecture 11 A. Al-Tamimi © 7
In-Class Exercise
• Create .js file
– Insert the following code
– document.write(“Hello World.. !”);
• Embed the .js file in the head element
• Embed the .js file in the body element
• Adjust the contents of the .js file to print-out
HTML elements instead
Lecture 11 A. Al-Tamimi © 8
Document Object Model (DOM)
Lecture 11 A. Al-Tamimi © 9
Accessing Values Using Dot Notation
• In order to access the different objects in the
DOM starting with the document object,
working down to the object that holds the data
you are after
• Each object is separated by a period or full -
stop character; hence, this is known as a dot
notation
Lecture 11 A. Al-Tamimi © 10
Document Object
Lecture 11 A. Al-Tamimi © 11
Document Object
Lecture 11 A. Al-Tamimi © 12
Document Object
Lecture 11 A. Al-Tamimi © 13
Forms Collections
• The forms collection holds references
corresponding to each of the <form> elements
in the page
• DOM deals with having many forms inside a
single webpage by having a separate form object
to represent each of the individual forms
Lecture 11 A. Al-Tamimi © 14
Forms Collections
Lecture 11 A. Al-Tamimi © 15
Forms Collections
Lecture 11 A. Al-Tamimi © 16
Forms Collections
Lecture 11 A. Al-Tamimi © 17
Forms Collections
Lecture 11 A. Al-Tamimi © 18
In-Class Exercise
• Create a simple form that contains a textbox
(user name) and a password textbox
– Name and ID each textbox correctly
• Add submit and clear buttons to the form
• Name the form as “MyLoginForm”
• Set the onsubmit event value to print out the
username inputted by the user
• Repeat to print out the password of the user
Lecture 11 A. Al-Tamimi © 19
Images Collection
• The images collection provides references to
image objects, one representing each image in a
document
• These can again be referenced by name or by
their index number in the collection
• So the src attribute of the first image can be
found using the index number like so:
Lecture 11 A. Al-Tamimi © 20
Images Collection
Lecture 11 A. Al-Tamimi © 21
Images Collection
Lecture 11 A. Al-Tamimi © 22
In-Class Exercise
• We are going to learn how to make simple image roll-over effect
• Create a simple HTML file that contains a simple image button
<a href=“”><img name=‘button’/></a>
• Download image-rollover.zip file and use the images inside (ButtonUp.png and Buttondown.png) to set the onmouseover and onmouseout events that will change the src property value of the image ‘button’
Lecture 11 A. Al-Tamimi © 23
Tools to Consider
Lecture 11 A. Al-Tamimi © 24
http://www.creatingonline.com/webmaster/generators/rollovergen.htm
Tools To Consider
Lecture 11 A. Al-Tamimi © 25
http://cooltext.com/ButtonBrowse.aspx
Resources
• http://www.learn-css-tutorial.com/CSS-Page-
Layout.cfm
Lecture 11 A. Al-Tamimi © 26
Questions
A. Al-Tamimi © 27 Lecture 11
