Introduction to JavaScript

1
Introduction to JavaScript

• Week 1 - Presentation 1
• Veronica Noone

2
Objectives

• What is JavaScript?
• Why JavaScript?
• What can it do?
• HTML Review
• ltscriptgt tag
• Our First Script
• Lab 01 - bgcolor changer

3
What is JavaScript?

• Interpreted Computer Language
• Not compiled
• Code gets interpreted every time it is executed
  (run)
• Its NOT Java - originally LiveScript
• Just needs a browser to run
• Can run locally no need to serve

4
Why JavaScript?

• Supported by the most common browsers
• Versatile
• Can be used with within PDF files
• Easy to learn
• Its FUN!

5
What can it do?

• Interact with users
• Validate user data
• Automate tasks
• Calculators
• Tricks
• Rollovers
• Scrolling text

With some Inventiveness and Creativity you can
do a lot!
6
Examples

• http//www.nhlbisupport.com/bmi/
• http//student.ccbcmd.edu/vnoone
• Warning!! Some of these are EXTREME!
• http//domscripting.com/domsters/index.html
• http//script.aculo.us/
• http//www.themaninblue.com/writing/perspective/20
  05/10/05/slideshow/index.htm
• http//www.scottschiller.com/

7
Ok, lets take a look but first

• HTML Review

lthtmlgt ltheadgt lttitlegtSample Test
Pagelt/titlegt lt/headgt ltbodygt lth1gtBasic HTML
structurelt/h1gt ltpgtThis is just a sample HTML page
with a head, a body and a few tagslt/pgt lt/bodygt lt/
htmlgt
8
ltscriptgt tag

• Informs the browsers built in JavaScript
  interpreter to run the code
• The text of the code is not shown to the user
• Can go in the head or the body

ltscript language"javascript" type"text/javascrip
t"gt lt!--// //code goes here // --gt lt/scriptgt
9
Our First Script
lthtmlgt ltheadgt lttitlegtOur First Scriptlt/titlegt ltscr
ipt language"javascript" type"text/javascript"gt
lt!--// alert("First Script Block in Head") //
--gt lt/scriptgt lt/headgt ltbody bgcolor"white"gt lth1gt
Our First Script - Heading 1lt/h1gt ltscript
language"javascript" type"text/javascript"gt lt!--
// // Script block 1 alert("First Script Block
after Head") // --gt lt/scriptgt ltpgtParagragh
1lt/pgt ltscript language"javascript"
type"text/javascript"gt lt!--// // Script block 2
document.bgColor "red" alert("Second
Script Block after paragragh") //
--gt lt/scriptgt ltpgtParagragh 2lt/pgt ltscript
language"javascript" type"text/javascript"gt lt!--
// // Script block 2 document.bgColor
"blue" alert("Third Script Block") //
--gt lt/scriptgt lt/bodygt lt/htmlgt
No Seriously, Lets take A look

• Go to the class web page
• Right click on w01p01ex01.html and save the file
  to your desktop

10
Things to notice

• //
• document.bgcolor
• Alert() function
• Message is the parameter
• Modal
• Semicolons end a statement

11
Week 01 Lab 01 Background Color Changer

• Code a document to alert the user of a background
  color change 3 times.
• For example
• Page loads
• user is alerted that the BG color will change to
  red. The BG changes to red
• user is the then alerted the BG will change to
  green, the BG changes,
• you get the idea.
• CHALLENGE Use only one script tag
• Lab worth 10 points