1. Put this code in the body of your HTML document:
| <body onload=”window.status= 'Welcome to my Page!!!' ”> |
Notice that the text in the bottom of the browser window now displays " Welcome to my Page!!!" whenever the mouse pointer is not on a link. The onload event handler is an attribute of the body tag, and it tells the browser what to do after the body of the page is done loading.
You could also use this effect in conjunction with a mouse event handler to change the status bar text when the mouse rolls over certain links or images, feel free to explore effects like that on your own.
Cutting and Pasting Example Scripts into your Page
Frequently people use existing JavaScript that can be pasted into their code for certain effects, features, etc. There are large archives of free scripts available online for your use. The ones we will implement today are in the demo.html file. For any of these effects, you simply cut-and-paste the appropriate code that is given into the appropriate place in your web page. Usually the instructions will tell you where in the document to place it.
Example: Browser Earth quake
1. Open demo.html
2. Click on the link Click here for the Earthquake source under Shake Screen button. The embedded text window contains the code you will paste into your page.
3. Follow the instructions on the screen to paste the code in the appropriate places in your HTML document. There is one part that goes in the head, and another smaller part that goes in the body, which makes the button you press cause the browser earthquake.
4. View the page.
Example: Pull-Down Menus
1. In demo.html click on the Click here for the Menu source link under the pull down menu near the bottom of the page. As before, insert the appropriate code into your document.
2. View the page. You will see a fully functioning pull -down menu.
The code we pasted into the body section should look like this:
| <center><form name="form"> <select name="site" size=1 onChange="javascript:formHandler()"> <option value=" ">Go to.... <option value="http://www.yahoo.com">Yahoo <option value="http://www.metacrawler.com">Metacrawler <option value="http://www.lycos.com">Lycos <option value="http://javascript.internet.com">JavaScript Source </select></form></center> |
We can change where the links in the pull-down menu take us by changing the value attribute in the option tag. We can also change link text by changing the text after each option tag.
3. Practice changing the URLs and link text.
4. Practice adding a few options to the pull-down menu.
5. View your page.
