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">

</script>
</body>
</html>

ANOTHER EXAMPLE

This script shows a different message depending on the time of day:

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!



			Print Friendly Page
Schedule JavaScript	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!
		Introduction \| Week 1 \| Week 2 \| Week 3 \| Week 4 \| Extra \| Contact