|
|
| |||
A Quick Overview Of Top Level ObjectsMaking alert() boxes is pretty simple, but it helps to have a little overview of the hierarchy of objects that JavaScript recognizes. At the top of the heap is "navigator". This is the browser that the viewer is using. It's usually either Internet Explorer or Netscape. The "navigator" object has lots of properties, but you can't change any of them. We'll be using these properties later to see which browser a viewer is using (navigator.appName). The properties of "navigator" can tell you the browser's name, version, and other neat stuff like what plug-ins are installed. Right below "navigator" is "window". The "window" object refers to each individual window that the browser has open. Window properties include all sorts of cool stuff like size and toolbars and we'll cover them later. A window can do things, to. One thing a window can do is pop up some standardized boxes like alert() boxes. Remember, a characteristic of an object is a Property and something the Object can do is a Method. The alert() box is a Method of the "window" object. The Alert() BoxTo make an alert() box we just need to use the JavaScript statement "window.alert("Hi, There!");". In fact, we don't even have to use the "window" part, just "alert("Hi, There!");". On the other hand, we could use "navigator.window.alert("Hi, There!");". I like the shorter version.
<script language="JavaScript"> Put the above in the <head> of your page and a box will pop up when the line of code loads. The box will say "Hi, There!" and have an "OK" button. When you click the button, the page will finish loading. Now lets say we want the page to load before our box pops up. Whenever you want a response based on an Event, you must code a function and a function call.. No problem, we already know how to do that from the previous lesson. Lets put our alert() box in a function we'll call "box" and set it to run when the page fully loads. First we'll make the function:
<script language="JavaScript"> Now we need to code the event to make the function run. We'll use the "onLoad" event in the <body> tag to get this done: <body onLoad="box()"> This will let the entire page load before the box pops up. Whenever an alert() box pops up, all other activities cease until the alert() box's "OK" button is clicked. Some SyntaxThe syntax of the alert() box is about as simple as it gets. Just type in "alert" and then code in a set of parentheses "()". Now fill in these parentheses with what you want the box to display. Words, or strings, must be put inside quotes like we've been doing. You can use numbers, too. You don't need quotes for numbers. In fact, you can do a little math in your alert() box:
<script language="JavaScript"> When the above box appears, it will display the number "8". Exploring EventsThe alert box is a great tool for trying out new events. Here's a list of common events you can experiment with: onClick -- Try putting this in the <body> tag. Now a function() will be called when the you click anywhere on the screen. Also works in links to add functionality to the usual HREF. onUnload -- Put this in the <body> tag and the box will pop up when you leave the page. This event is how a lot of malicious webmasters "trap" you onto their site. onBlur -- Put this in a <body> tag and the box will pop up whenever you you bring another window on top of the box's window. Making another window active is called "giving focus" to the window. Windows you put in the background are "blurred". onFocus -- This is the opposite of "onBlur". The box will pop up when the window is brought to the top as the active window, or "focused". There are some other events, but these are the ones you'll use the most: onMouseOver, onMouseOut, onClick, onLoad, and onUnload. |
|||
| |||