Adding Javascript to a web page
Javascript is a program language that works with html code.
It is different from Java in that the program is embedded into the html file --
i.e., a separate program is not needed to run the command.
There are many different types of Javascripts, and searching "free java scripts" in Google will show this to be true.
In this tutorial, we will insert the WinOpen script into a webpage, which is
a command that makes hyperlinked text
appear in a separate browser window. Click
here for an example.
The generic procedure for adding Javascript is as follows:
In the <head> of the file you add a script tag and specify how the script will function:
| <script language="JavaScript"> function WinOpenFilename() { msg=open("FileUrl.html"", "name of file/text to display", "toolbar=no,directories=no,resizable=no,width=800,height=600,scrollbars=yes"); } </script> |
In the <body> of the file you insert a <a href> tag that will
link a string of text such that the WinOpen command you have
embedded in the <head> will execute and open the link in a new browser window.
The <a href> tag should be written as follows:
| <a href="JavaScript:WinOpenFileame() "onmouseover="window.status='name of file'; return true"> Insert text to be hyperlinked </a> |
In an experimental webpage that you create, you can insert the WinOpen Javascript by following these steps:
1. If you are working in FrontPage, select the "code" tab at the
bottom of the window to edit the html code.
If you are working in notepad, you may follow the steps as
listed.
2. in the <head> of the file copy and paste the following text (make sure it is pasted between the <head> </head> tags of the file):
| <script language="JavaScript"> function WinOpenLaunchCU() {msg=open("http://www.colorado.edu", "University of Colorado","toolbar=no,directories=no,resizable=no,width=400,height=300,scrollbars=yes");}</script> |
3. In the <body> of the file locate where you want to insert the command to operate the 'WinOpen' javascript.
4. copy and paste the following text to the location of your choosing (make sure it is pasted between the <body> and </body> of the file):
| <a href="JavaScript:WinOpenLaunchCU()"onmouseover="window.status='University of Colorado Website'; return true"> The University of Colorado </a> |
5. Save the file and open/preview it in a web browser to see it work.
6. Note: you can modify the appearance of and options associated with the
window by changing the settings listed in the second line that appears
below. the text that you change is in italics.
| <script language="JavaScript"> function WinOpenLaunchCU() {msg=open("http://www.colorado.edu", "University of Colorado", "toolbar=no,directories=no,resizable=no,width=400,height=300,scrollbars=yes");}</script> |