INTRODUCTION TO JAVASCRIPT
WHAT IS SCRIPTING?
Scripts are small programs or instruction sets that add interactivity to web pages and may be used in a variety of areas in computers and on the Internet.
WHAT IS JAVASCRIPT?
JavaScript is an easy-to-use programming language that can be embedded in the header of your web pages. It can enhance the dynamics and interactive features of your page by allowing you to perform calculations, check forms, write interactive games, add special effects, customize graphics selections, create security passwords and more.
USES FOR JAVASCRIPT
Scripts may be very small and very basic or they may be very long, complex and quite interactive. Simple scripts can display the time, create a dialog box, or even scroll text at the bottom of your window. Web designers use JavaScript, for the most part, to add browser executed functionality to web pages. This is called "client side" scripting, because the browser (or client) executes the script.
WHAT NOW?
Despite its reputation of being "easy-to-use", writing JavaScript does require some knowledge of programming concepts. Therefore, there is a fairly steep learning curve associated with becoming a JavaScript programmer. This does not prevent ordinary HTML authors, however, from making extensive use of JavaScript in their Web pages. Many HTML authoring applications have built in functions that install scripts with a few mouse clicks. Some WYSIWIG editors, such as FrontPage, automate the entire process through the use of themes and other components.
The Web is a huge resource for free Java Scripts. Most come complete with demonstrations and installation instructions. The resources listed below are just a small sample. Web designers take these scripts and "hack" (modify) them for use in their pages.
WRITING A SIMPLE SCRIPT
Just like coding in html you don’t need a special program for writing JavaScript. A simple text editor like Notepad is all that is required.
The following is a sample of how a simple JavaScript is placed inside an html document:
<html>
<head>
<title>This is an example page</title>
</head>
<body>
Welcome to the JavaScript course!
<script language="JavaScript">
<!--
document.write("Hi there. This text is written using
JavaScript!")
//-->
</script>
</body>
</html>
ANOTHER EXAMPLE
This script shows a different message depending on the time of day:
<script language="Javascript"><!--
//Credit must stay intact
//Visit java-scripts.net or http://wsabstract.com for this script
now = new Date
if (now.getHours() < 5) {
document.write("What are you doing up so late?")
}
else if (now.getHours() < 9) {
document.write("Good morning!")
}
else if (now.getHours() < 17) {
document.write("No surfing during work hours!")
}
else {
document.write("Good evening!")
}
//-->
</script>
EXERCISE 1
Let's use the script above to write a different message to the page depending on what time of day it is.
- Open your "template.htm" page in Notepad.
- Copy the above time of day script to the clipboard and then
paste it into the HEAD section of the template page.
- Save the template as "timeofday.htm".
- Open "timeofday.htm" in your browser.
Since your computer's time is between 9AM and 5PM, the message
"No surfing during working hours!" should display as the first
line of your Web page.
If you want the time of day message to appear further down the
page, simply cut the script from the HEAD portion of your page
and place it in the BODY portion in the place where you want
it to appear.
EXERCISE 2
Roll-overs are one of the most popular uses of JavaScript. When the mouse is placed over an image, that image is switched with another image. Roll-overs are commonly used to highlight images that link to other pages.
- Copy the folder JS_Exercise2 from the web_des_clips folder
on the network to your H: drive.
- Open rollover.htm in Notepad.
- Right click on the Java-scripts.net link, below, and click
Open in New Window.
- On the Java-scripts Home Page click the link to Image
Scripts. Then click Image Rollover Script.
- Follow the instructions provided and paste the script in the
text box into the appropriate portions of your rollover.htm
page.
- Now, in your rollover.htm page -
- In the HEAD portion of your page change every instance of
'img1.gif' to 'off.jpg'
- In the HEAD portion of your page change every instance of
'img2.gif' to 'over.jpg'
- In the BODY portion of your page, within the <IMG> tag
change "img1.gif" to "off.jpg".
- If you want to change the link, just alter the HREF
attribute value to the site you want to link to.
- Now, try implementing more rollovers on the same page by
copying and pasting the script in the BODY portion of page.
You'll have to change each instance of the string "rollover" (in the Anchor tag and the Image tag) to something new for each new rollover.
EXERCISE 3
Find another script on Java-scripts.net or any other JavaScript site and use it in a new Web page. Start bragging!
RESOURCES
Webteacher
This is an excellent tutorial, aimed at non-programmers
Netscape Dev Edge
Pack a lunch and spend the day! This is Netscape's
Developer-centric,
everything-you-ever-wanted-to-know-about-JavaScript site.
Java-scripts.net
All scripts on this site come with easy-to-follow installation
instructions, along with a live demonstration. There is
nothing here that you can't do with just a little figuring
out.
Website Abstraction
Scripts, tutorials, good advice and some cool tools that
create custom code for some of the more popular JavaScript
effects. Dig in!