Vous êtes sur la page 1sur 3

The Basics of JavaScripts

What is JavaScript?
JavaScript is a scripting language developed by Netscape. With JavaScript you can easily create interactive web pages. JavaScript statements can be embedded directly in an HTML page. Web developer programs such as Dreamweaver can also create JavaScripts. These statements can recognize and respond to user events such as mouse clicks, popup windows, page navigation, last page update info and MUCH more! Essentially, events are messages generated by browsers indicating that a visitor to your page has done something. For example, you can write a JavaScript function to verify that users enter valid information into a form. Without any network transmission, an HTML page with embedded JavaScript can interpret the entered text and alert the user with a message dialog if the input is invalid. JavaScript shares the fundamental feature of all programming languages: it can get data from some source, process that data, and output the results. Because it is integrated into HTML, JavaScript already knows what your browser knows. One of the best things about JavaScript is that you can do a great deal with very little programming. You don't need a fancy computer, you don't need any software other than a word processor and a Web browser, and you don't need access to a Web server; you can do all your work right on your own computer.

JavaScript IS NOT the same as JAVA!


JavaScript and JAVA are similar in some ways but fundamentally different in others. The JavaScript language resembles JAVA but does not have JAVA's complexity. JAVA is essentially a mechanism by which developers can embed a higher level of functionality, not just functional information, into an HTML page. However, there are times when you may want enhance your page with something more than what HTML alone can offer, WITHOUT the complexity of JAVA. That's where JavaScript fills the bill!

Running JavaScript
You need a JavaScript-enabled browser - for example, Netscape Navigator (version 2.0 or higher) or Microsoft Internet Explorer (version 3.0 or higher). Since these two browsers are widely spread many people are able to run scripts written in JavaScript.
*This is an important point for choosing JavaScript to enhance your web pages

Creating JavaScript in Dreamweaver


Example: Creating a pop-up window a small message window will appear on the screen on demand.
1. 2. 3. Open Dreamweaver by selecting START > PROGRAMS > MACROMEDIA DREAMWEAVER. Type the following: This is JavaScript! Now, highlight this text.

In the Property inspector, type in the following command in the link field of the property inspector: javascript:; Now, hit enter.

*Important: Dont forget to include both the colon and the semicolon, by doing this you are essentially adding a hyperlink for the JavaScript command to work properly. 4. With the text still selected (or highlighted), open the Behaviors panel. You can do this several ways: Pressing Shift + F3 at the same time opens the behaviors panel Select from the menu bar, WINDOW > BEHAVIORS Click on the cog wheel icon at lower right corner of screen 5. icon. You will now choose 2 actions from the actions pop-up menu by clicking on the This plus command is a pop-up menu of actions (or events) that can be attached to the currently selected element. Do the following 3 steps: Select show events for and then choose 4.0 and later browsers. Click on the icon again. Select from the menu: popup message. When the message box appears, type the following message:

When this popup window appears on your screen, it will make you smile.
6. 7. 8. Now click on the okay button. To test your JavaScript command, hit F12 to open up a browser window and test your event. Click once on your text and your pop-up window should appear congratulations!

Embedding JavaScript using HTML


JavaScript code is embedded directly into the HTML-page. It usually goes between the </title> tag and the </head> tag. Like HTML, JavaScript is just text that can be typed into a word processor or notepad. It goes right into the HTML that describes your page. You can also put JavaScript in the body, but if you are just beginning, stick with the title and head tags. A couple of things to remember as you are learning JavaScripting: The first part of a JavaScript begins with: <script language ="JavaScript"> In order to successfully output text in JavaScript you must use: write ( ) or writeln ( ). The difference between write and writeln is: write just outputs a text and writeln outputs a line feed (horizontal rule) after the text output.

Example: Displaying automatic page update information Let's say you have a homepage and you update it frequently. Wouldn't it be nice to include the last update date on your page? Well, here is how you can do that:
1. 2. 3. Open a new browser (Netscape or Internet Explorer) Open notepad, go to START >PROGRAMS >ACCESSORIES >NOTEPAD In the notepad screen, type the following HTML code exactly as it appears:

<HTML> <HEAD> <TITLE>Displaying Update Info</TITLE> </HEAD> <BODY bgcolor=lightblue> <script language="JavaScript"> <!--hide script from old browsers document.write("<h2>This page has been updated: " + document.lastModified + "</h2>"); // end hiding --> </script > </BODY> </HTML>
4. 5. 6. Save file as sample.html onto the DESKTOP Go to your browser window menu, click on FILE>OPEN PAGE >BROWSE >SELECT>sample.html Your first JavaScript will appear on your screen Congratulations!

For more information on JavaScript:


JavaScript.com, the Definitive JavaScript Resource: For the latest JavaScripts tutorials, scripts, tips, links and more. http://www.javascript.com/ Voodoos Introduction to JavaScript: This site contains a lot of examples (and a great tutorial) along with source code to get you started in JavaScript quickly! http://rummelplatz.uni-mannheim.de/~skoch/js/tutorial.htm JavaScript Tutorial at Webdeveloper.com This tutorial goes over JavaScript basics and provides an excellent overview for the beginner with easy to follow examples. http://www.webdeveloper.com/javascript/javascript_js_tutorial.html JavaScript Scripts from Webdeveloper.com: Even if you don't know anything about JavaScript, if you can cut and paste, you can add JavaScript functionality to enhance your Web site. http://WWW.Stars.com/Authoring/JavaScript/Scripts/
Created by: Valerie Valdez April 17, 2001 Library Instruction University of Texas as Austin Dr. Loriene Roy