JavaScript 101 Lesson 01: Writing Your First JavaScript

Topics Use the tag Including JavaScript code in a Web page Hiding your JavaScript code from older browsers Using document.write to display text in a Web document

Topics (cont.) Using embedded HTML to format output Displaying the date and time using the Date object Using comments to document code

The script tag JavaScript code is embedded in HTML documents Use script tag for JavaScript code JavaScript code goes here Similar format to other html tags

Where to put your JavaScript Script tag can be inserted into body or head of your document Most examples for CIS101 will go in the body of your document

Hiding JavaScript from Old Browsers JavaScript is a recent addition to Web pages Browsers that pre-date JavaScript can’t run its code Can use special symbols to hide JavaScript code from old browsers (this is less important as time goes on)

JavaScript hiding code Insert this code in the body of your HTML document:

Using document.write document.write is your first JavaScript statement Syntax: document.write(“text goes here”); Text within quotes will be displayed Semi-colon is optional

document.write cont. “dot notation” common to object based and object oriented languages dot means “belongs to” write method “belongs to” the document object

Comments Text inside a code file not intended to be executed is called a comment Comments are useful in order to include information or explanations Designated with either // this is a one line comment /* this is the start of a comment until this symbol is encountered */

In the lab Your first JavaScript will use document.write Open Notepad and create a new HTML document named lesson0101.html Enter code from p. 1-4 exactly as you see it Save the file and open it using either Internet Explorer or Netscape

Mistakes and JavaScript If your output does not match p. 1-5 you made a mistake In programming tiny mistakes make big problems You must eliminate all mistakes before code will run (called debugging)

Add more code Common development method in programming is to try out a little piece of code, get it working, then start adding more code Add code that writes in color (p. 1-7)

Add the Date Computers keep an internal clock that with the current date and time Use Date() to include the date on your page Add the following code: document.write(“Today is “,Date(),” ”);

Student Modifications Each lab exercise starts with code you enter and run Then you will add modifications and additions To your lesson0101 file add the following: Display your favorite singer or band Display your address in your favorite color Display your favorite movie Include a comment in your code file

Lesson Summary The script tag How to hide JavaScript from old browsers Used document.write to display text Used HTML embedded within JavaScript to format text for display Used comments to document your code Added the Date object to display the current date and time