Tutorial: Javascript Part 1 - Basics, Variables, & Output

Goals: 1) To learn a very popular scripting language for client-side Web programming. 2) To learn the basic programming concepts and techniques fundamental to all programming languages.

I. Learning from www.fsu.edu

Web developers and programmers learn a lot from viewing the source of existing Web pages. You should be at a point where you can start to understand the code of commercial grade Web sites. We will begin the tutorial by examining FSU's Web site which makes use of the latest design and programming tools.

  1. Open www.fsu.edu in your Web browser and select the command from your Web browser menu to view the source code.
  2. Use the find command to find instances of the word "stylesheet". You should understand from our last assignment how the link command is used to connect an HTML document to an external stylesheet.
    1. Open the first referenced .css file in your Web browser - you do this by appending the the file name and path to www.fsu.edu. For example, if the references file is /.element/ssi/css/3.0/rollover.css you would open http://www.fsu.edu/.element/ssi/css/3.0/rollover.css in your Web browser.
    2. Examine the code to see if you can figure out its purpose. Try some of the other .css files referenced in the www.fsu.edu HTML code.
  3. Go back to the HTML source code for www.fsu.edu and use the Find command to search the code for the word "div". Note how div is used to apply styles and layers to the HTML code.
  4. Now use the Find command to search the course code for the word "javascript" - find the first instance of the word in the document.
    1. Notice how the javascript is stored in an external file just like the stylesheets. Like stylesheets, javascript code can be included in the head or body of an HTML file, or in an external file.
    2. Open the first referenced javascript file (has a .js file extension). For example, if the references file is /.element/ssi/js/1.0/main.js you would open http://www.fsu.edu/.element/ssi/js/1.0/main.js in your Web browser.
    3. Examine the javascript code. See if you can figure out its purpose.

II. Learning the basics of Javascript

Read Chapter 7 in our textbook, or go to http://www.w3schools.com/js and work through the following lessons, examining examples, reading the material, and experimenting with the code yourself:

  1. JS HOME
  2. JS Introduction
  3. JS How To
  4. JS Where To
  5. JS Variables
  6. JS Popup Boxes

Javascript template - included in all javascript code

<script type="text/javascript">
<!--

//-->
</script>

 

Note: There are many Javascript resources on the Web. http://www.webmonkey.com/programming/javascript/ is another good tutorial. Google "Learn Javascript" to find more.

III. Learn by example - perhaps the most important exercise!

Open the following html/javascript example files, and view their source code. The code includes comments that explain what each example teaches.

  1. js1 docwrite
  2. js2 docwrite2
  3. js3 escape
  4. js4 variables
  5. js5 variables2

IV Create your own javascript program

Complete part 1 of the assignment.