JavaScript 101

1
JavaScript 101

• Lesson 01 Writing Your First JavaScript

2
Topics

• Use the ltscriptgt lt/scriptgt 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

3
Topics (cont.)

• Using embedded HTML to format output
• Displaying the date and time using the Date
  object
• Using comments to document code

4
The script tag

• JavaScript code is embedded in HTML documents
• Use script tag for JavaScript codeltscript
  languageJavaScriptgtJavaScript code goes
  herelt/scriptgt
• Similar format to other html tags

5
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

6
Hiding JavaScript from Old Browsers

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

7
JavaScript hiding code

• Insert this code in the body of your HTML
  documentltscript languageJavaScriptgtlt!--
  start hidingJavaScript code goes here//finish
  hiding --gtlt/scriptgt

8
Using document.write

• document.write is your first JavaScript statement
• Syntaxdocument.write(text goes here)
• Text within quotes will be displayed
• Semi-colon is optional

9
document.write cont.

• dot notation common to object based and object
  oriented languages
• dot means belongs to
• write method belongs to the document object

10
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 commentuntil
  this symbol is encountered /

11
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

12
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)

13
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)

14
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(),ltbrgt)

15
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 e-mail address in your favorite
  color
• Display your favorite movie
• Include a comment in your code file

16
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