Interactivity on the web
221
Lesson 10, Introduction to Interactivity
10
2 Return to your original document and select the code within the two
5 Sa ve your page and then preview it in your browser. The script works as it did before.
6 Close your browser and then close your HTML and JavaScript documents since you will
be working with new fi les in the next exercise.
If your script is not working, check to make sure you spelled the name of the JavaScript fi le
correctly. Also check to make sure that the JavaScript fi le is on the same level as your HTML fi le
within your root folder.
There are multiple benefi ts to saving your JavaScript in an external fi le. Some of these
benefi ts are:
• The ability to place multiple functions within a single document (although inline
JavaScript has this benefi t as well).
• Having a single reference for your JavaScript makes it easier for debugging purposes.
• The external JavaScript fi le can be cached by the web browser, thus preventing the
need to reload the script on new pages.
The Document Object Model
JavaScript has access to objects within a browser; this is how the pop-up window from your
previous exercise appeared on screen. This access takes advantage of the Document Object Model
(DOM), which is a convention for accessing data within HTML pages. This model describes how
all elements in an HTML page, such as forms and images, are related to the topmost structure,
known as the document.
JavaScript has access to the document and the related elements on your page in a way that
HTML does not. This access allows JavaScript to:
• Validate form fi elds
• Detect the browser a user has
• Respond to user events
• Store and retrieve information on a user’s computer
webdesign.indb 221
webdesign.indb 221
3/17/11 1:51 PM
3/17/11 1:51 PM
221
Lesson 10, Introduction to Interactivity
10
2 Return to your original document and select the code within the two
5 Sa ve your page and then preview it in your browser. The script works as it did before.
6 Close your browser and then close your HTML and JavaScript documents since you will
be working with new fi les in the next exercise.
If your script is not working, check to make sure you spelled the name of the JavaScript fi le
correctly. Also check to make sure that the JavaScript fi le is on the same level as your HTML fi le
within your root folder.
There are multiple benefi ts to saving your JavaScript in an external fi le. Some of these
benefi ts are:
• The ability to place multiple functions within a single document (although inline
JavaScript has this benefi t as well).
• Having a single reference for your JavaScript makes it easier for debugging purposes.
• The external JavaScript fi le can be cached by the web browser, thus preventing the
need to reload the script on new pages.
The Document Object Model
JavaScript has access to objects within a browser; this is how the pop-up window from your
previous exercise appeared on screen. This access takes advantage of the Document Object Model
(DOM), which is a convention for accessing data within HTML pages. This model describes how
all elements in an HTML page, such as forms and images, are related to the topmost structure,
known as the document.
JavaScript has access to the document and the related elements on your page in a way that
HTML does not. This access allows JavaScript to:
• Validate form fi elds
• Detect the browser a user has
• Respond to user events
• Store and retrieve information on a user’s computer
webdesign.indb 221
webdesign.indb 221
3/17/11 1:51 PM
3/17/11 1:51 PM