Download Introduction to JavaScript: A Comprehensive Guide for Beginners and more Lecture notes Programming Languages in PDF only on Docsity!
Introduction to JavaScript
Student Training Program
Technology Training Services
Cornell Information Technologies (CIT)
126 Computing and Communication Center (CCC)
Last updated: 7/23/
Introduction to JavaScript
Equipment / software
We will use Notepad on Windows 98 PCs, but any test editor capable of saving documents in plain-text format will work. Any web browser can be used; we will use Netscape Navigator. Be aware, however, that there are some browsers that would handle your code differently.
Handouts & class files
- Class handout: Introduction to JavaScript
- base.html
- cat.gif
- demo.html
- dog.gif
- family.gif
- hamster.gif
- harry.gif
- logoscroll.gif
- logostill.gif
- resources.html
Prerequisites
We will assume you have a working knowledge of HTML tags.
Introduction
In this class, you'll become familiar with some concepts and terminology of JavaScript by creating some working examples. We hope you’ll learn enough that you are able to use the materials referenced at the end of this handout on your own.
This course will NOT be dealing with programming fundamentals, or rigorous programming structures within JavaScript. That topic is far too broad for a two-hour introduction to JavaScript. For more depth, please try at the online tutorials listed in the references section at the end of this document or take Cornell’s course, CS 130 Creating Web Documents.
This line of JavaScript assigns to the variable x the integer value 1. As you can see, a JavaScript variable can refer to a value of any type; this can be integer, string, or even any type of object. You dont have to specify the type of variable before creating it. Note that object properties can be thought of as variables that belong to the object.
A method is basically a collection of statements that does something. For example, a method “ writeln() ” exists in the document object that can be used to write html to your document. Methods are predefined in JavaScript. It is possible for you to define functions, which can be thought of as methods you define outside of any object.
When you have the syntax object.method as you do with document.writeln , the method operates on the object given. In this case, the writeln method operates (the operation is writing) to the document (the browser window that you see). This syntactic structure is often used in JavaScript.
Javascript and Comments
Some older browsers do not recognize JavaScript. These browsers would sometimes display JavaScript code in the page as if it were part of the contents of the page. Therefore, it is conventional to place JavaScript code between comment tags as follows:
Older browsers would just ignore the Javascript code between the comment tags, while new browsers would recognize it as JavaScript code. The // just before the end comment tag --> is a JavaScript comment symbol, and tells the browser not to execute the end comment tag --> as JavaScript. Using comment tags makes a webpage more accessible to older browsers.
Writing HTML to the document
Insert the above into your html document between the **** and **** tags. The piece of text (known as a string) between the parentheses is the parameter given to the writeln() method. The browser will display the HTML between the parentheses when it runs the script.
Note that writeln() writes actual HTML to the page, complete with tags, attributes and text. The parameter of the writeln() method can include tags to format the text. Change the above code to the following:
Note how the welcome message displayed by the browser is now a heading, and is centered.
The above example may seem kind of pointless, because we could have just inserted the HTML between the parentheses directly without using a script. This, however, makes it possible to create HTML that would vary depending on certain conditions. Insert the following code into your page:
Alert boxes
An alert box is a small window that pops up with a yellow warning sign and a (usually) important message. With JavaScript we can either show a message to the user either before a page loads or in response to a user action. Here we will make an alert box that appears before the page loads. It will look like this:
Exercise
- In Notepad, open base.html , your starter HTML page template.
- Now, within the **** tags, insert the following code:
This makes a pop-up box which says "This is a class on JavaScript" with an OK button that allows the user to close it and continue. The message can be changed to whatever you like. This type of pop-up box is called an alert box because it can only be used to alert a viewer. It cannot be used to control where the user may go. alert() is a method that takes care of displaying the box. The line “This is a class on JavaScript” is the parameter for the alert() method. Some more examples of methods are:
confirm(“put message here”) ; This is the next type of box we’ll be looking at.
prompt(“put request here”) ; This asks the user to enter some text.
You probably noticed at the end of a method, after the right parenthesis, there is a semi-colon. In JavaScript, a semi-colon is used to end a "statement".
Now we will make another type of pop-up box.
Confirm Boxes
Place the following code in the body of your HTML document. (Remove the alert box if you like.):
We have created an input button inside a form. Input elements such as buttons must always be placed inside a form , between **** and **** tags.
Take a look in a browser window at the results of this code. The onClick event handler means that when you click on the button, a confirm box pops up. An event handler allows you to specify what code to execute when an event takes place. You can change the message on the button or in the confirm box by changing the appropriate text in the code. Be sure you’re also using all semicolons, quotation marks, and other punctuation correctly.
Syntax is very important in JavaScript, unlike in HTML, where typos are often overlooked by browsers.
Now we’ll take a look at one more type of pop-up box, the message input box.
Message input boxes
- Put the following code in the head of your HTML document.
To specify a mouse rollover you insert the onMouseOver and//or the onMouseOut attributes into the appropriate tag. These should be followed by the JavaScript code to be executed between quotes.
Making a simple MouseOver
Now that we’ve looked at what a mouseover can do, let's make one. Included in the class files folder are the two pictures used to make the mouseover, harry.gif and family.gif. This mouseover will display a picture of Harry the pepper(the CIT mascot) until the mouse is moved over it; then it will display his family photo. The pictures will be part of a link to the CIT webpage.
- Place the following code in the body of your HTML document:
- View your page with the browser. If the mouseover doesn’t work, be sure to check all semicolons, apostrophes, and quotation marks.
Here's how the code works. As you can see, all the code that creates the mouseover effect is contained in an anchor tag and is therefore a hyperlink. The name attribute of the image tag assigns a name to the image object. The result is that an object is created representing the image, this object is referred to by the variable named “ logo ” which is located inside the document object (it is a property of the document object). The onMouseOver and onMouseOut attributes are “Event Handlers” that tell the browser what code to execute when the events occur. You can make it so that the mouseover affects another image on the page by changing the name of the image accordingly in the event handler code.
Animated MouseOver
We saw that a MouseOver can be used to change the image displayed when the mouse rolls over an image. This has an interesting application in animated images. Let’s say we have two versions of a GIF image, one of which is a still and one of which is animated. We can use a MouseOver to animate a still image when the mouse rolls over it. In your class files folder you have two images, logoscroll.gif and logostill.gif which can be used to create this effect.
- Place the following code in the body of your HTML document:
- View your page with the browser. If the mouseover doesn’t work, be sure to check all semicolons, apostrophes, and quotation marks.
We have created a link to the TTS website using the logostill.gif image. We added mouse event handlers to the anchor tag; These change the image source file to logoscroll.gif when the mouse rolls over the image, and change it back to logostill.gif when the mouse leaves the image.
Menu
We will now look into creating a menu using Javascript. We will create a simple menu, which has a number of clickable options. There will be a single image which changes when options is selected. We will also create a function which takes care of changing the menu image.
You will be using the images dog.gif , cat.gif and hamster.gif provided in the class files folder.
- Place the following code in the body of your HTML document:
Functions like the above are usually defined in the head of an HTML document. As shown above, function definitions must me enclosed by opening and closing script tags. The syntax for function definition is, as shown above, the keyword function followed by the name of the function and a list of parameters between parentheses(if there is more than one parameter the list is seperated by commas). Then, the statements composing the function are placed between curly brackets { }. The above function takes in one parameter, and calls it file. There is a single statement in this function; This sets the value of document.pet.src to equal the value of file. Now that we have defined the changePet function, calls to that function from the links in our menu can be made.
- View your page with the browser. If the menu doesn’t work, be sure to check all semicolons, apostrophes, and quotation marks.
When a menu option is clicked, the corresponding JavaScript code is executed. That code calls the changePet function and gives that function a single parameter representing the name of the file. The changePet function then receives that parameter, calls it file , and uses it to change the source of the pet image.
Change the status bar text
JavaScript allows us to change the text in the status bar of the window through the window.status property. We will now show you how to place a welcome message on the status bar as soon as your page finishes loading. The event handler goes in the opening **** tag
- Put this code in the body of your HTML document:
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: Pull-Down Menus
- 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.
- View the page. You will see a fully functioning pull-down menu.
The code we pasted into the body section should look like this:
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.
- Practice changing the URLs and link text.
- Practice adding a few options to the pull-down menu.
- View your page.
Design Considerations
Some older browsers are incompatible with JavaScript. JavaScript can also be turned off on many browsers. You can turn it off on Netscape by going to Edit > Preferences > Advanced and unchecking the Enable JavaScript checkbox. It is therefore a good idea to make sure that someone viewing your page without a JavaScript enabled browser can navigate your page properly. For examp le, creating links as alternatives to using the pull down menu above would provide such accessibility.
Review
Today we have laid the groundwork for you to learn more about JavaScript. Through the examples, you have been exposed to what methods, functions, objects, event handlers, parameters and statements are in the context of JavaScript. You have written some code on your own, as well as implemented existing code. We hope you'll now be comfortable continuing your study of JavaScript through tutorials, books, and perhaps a full-semester course.
Other examples of objects and methods: Object Method window.home() This makes the browser load its user-defined homepage. document.write(“bla”) This writes the text “bla” onto the webpage.
event handler Many objects also have event handlers, which catch user triggered events (such as mouse clicks and keystrokes) and allow the programmer to specify an action for each of these events. Example: onClick= “alert(‘you clicked a button’);”
A few event handlers: onLoad Performs specified actions when page is loaded onClick Performs specified actions when mouse is clicked on the object that contains the handler statement. onKeyPress Does something when a key is pressed on the keyboard.
JavaScript Resources
Language References
DevGuru JavaScript Introduction http://www.devguru.com/Technologies/ecmascript/quickref/javascript_intro.html
JavaScript Tutorials
WebMonkey's JavaScript Resource Page http://www.hotwired.com/webmonkey/programming/javascript/
Website Abstraction's JavaScript Tutorials http://wsabstract.com/javaindex.shtml
WDVL: Authoring JavaScript http://wdvl.internet.com/Authoring/JavaScript/
Script Archives
JavaScript Source http://javascript.internet.com/
DevHead's JavaScript Library http://www.zdnet.com/devhead/resources/scriptlibrary/javascript/
Cornell Class
Computer Science 130 http://www3.cs.cornell.edu/cs130/
