JavaScript Language Essentials
- Detecting Browser Plug-ins
- Around and Around with Loops
- Writing with Loops
- Using For/In Loops
- Using Do/While Loops
- Checking if Java Is Enabled
- Functions
- Using Multi-level Conditionals
- Working with Functions That Return Values
- Handling Errors
- Putting More than One Script on a Page
- Scrolling Status Bars
- Status Bar Messages
This chapter is from the book
This chapter is from the book
This chapter is from the book
Now that you've gotten your feet wet, let's wade a bit deeper into the JavaScript language. In this chapter, we'll go into more detail about the basic elements of JavaScript, and introduce you to other aspects of the JavaScript language, such as loops and functions (don't let your eyes glaze over; we promise that it'll be easy).
You'll see how you can check for the presence of browser plug-ins, use JavaScript to write your Web pages for you, learn how JavaScript handles errors that the user makes, put multiple scripts on a page, and much more.
Table 3.1. Just Enough HTML—The Basics
|
TAG |
ATTRIBUTE |
MEANING |
|
table |
Presents tabular data on a Web page |
|
|
cellpadding |
The amount of space inside a cell, between the contents and the cell borders |
|
|
cellspacing |
The amount of space between different cells |
|
|
tr |
Begins a row inside the table |
|
|
valign |
The vertical alignment of the row |
|
|
th |
Heading cells for the columns in the table |
|
|
bgcolor |
Background color of this header cell |
|
|
td |
Contains each cell in the table |
|
|
bgcolor |
Background color of this cell |
Detecting Browser Plug-ins
(Netscape and Internet Explorer/Mac)
Browser plug-ins provide the Web page author with lots of great options for including rich media content, such as sounds, video, and animation. The problem plug-ins pose is that you can't be sure if the user has the plug-ins installed that you require. JavaScript can help you find out which plug-ins the user has installed, and if they don't have what's needed, you can send them to a page where they can get the required plug-in. Script 3.1 tests for the presence of the Macromedia Flash plug-in, one of the most common plug-ins.
)
Script 3.1 Testing for plug-ins will soon become second nature with a script like this.
To check for a plug-in
-
if (navigator.plugins["Shockwave
Because the script is posing a test, it uses a conditional if statement. In this case, it checks to see if the navigator.plugins array contains the name "Shockwave Flash"; if so, the test returns a true result; i.e., the Flash plug-in is present. Note that if the match isn't exact, then the test will return false. If Macromedia changes the name of the plug-in, you'll need to change your script.
Flash"]) {
-
document.write("<object classid=Because Flash is present, the script writes a bit of HTML to the document window. Flash requires the parameters of the <object> tag, such as classid, codebase, and param. The name of the file is in the value parameter; it is images/airport.swf. The <embed> and <object> tags are used to put Flash movies into Web pages. 'clsid:D27CDB6E-AE6D-11cf-96B8-
444553540000' codebase='http://
active.macromedia.com/flash2/cabs/
swflash.cab#version=2,0,0,0'>
<param name='movie' value='images/
airport.swf'><embed pluginspage=
'http://www.macromedia.com/
shockwave/download/' src='images/
airport.swf'><\/embed><\/object>")
-
else { document.write("<img src='images/Here's where the script deals with the possibility that Flash isn't available. If that's the case, a GIF image is substituted for the Flash movie ( Figure 3.1 ). airport.gif' alt='airport'
width='414' height='300' \/>")
}
Figure 3.1 JavaScript discovered that Flash wasn't present, and displayed a GIF image instead.
)
Tips
- Unfortunately, this task (and the next) only work in certain browsers. Internet Explorer 4 (all platforms) includes the plugins object, but it's always empty. Microsoft Internet Explorer for Windows (versions 4 and later), though, will use ActiveX to automatically load the plug-in for the user if the browser doesn't already have it. Thankfully, though, Netscape browsers (since version 3) and Microsoft Internet Explorer for Mac (since version 5) allow you to check for plug-ins using JavaScript. Why does Microsoft put this functionality in their Mac product but leave their Windows product crippled? You'll have to ask them, although we have hope that it might find its way into a future version.
- You could allow for the possibility that the user didn't have JavaScript enabled and still show the image by adding this code to the <body> section of the page:
<noscript> <img src='images/airport.gif'
alt='airport' width='414'
height='300' />
</noscript>
- This script looks for a particular plug-in by name. If the name changes, you'll have to modify the script to look for the new name.
- You might notice that the closing HTML tags in step 2, above, end with <\/> instead of the </> you might normally expect. This is to keep JavaScript from thinking that we're trying to close the <script> tag. Putting a backslash before the forward slash tells JavaScript that it can ignore the character that's about to follow, more formally known as escaping the character.