Javascript

1
Javascript

• http//www.csc.uvic.ca/csc100

2
CSC 100 - Introduction to JavaScript -- Lecture 1

• Goals pg 492 502
• At the end of this lesson you will be able to
• Recognize the Object Hierarchy
• Insert JavaScript into HTML
• Define and display variables as text
• Define and display variables at numbers
• Concatenate string variables together.

3
How do we experience the Web?

• What is your most common use of the Web?
• Static vs. interactivity
• JavaScript allows pages to respond to user
  action.
• Java programming languageJavaScript
  Scripting language
• JavaScript is client-side processing

4
What is JavaScript?

• JavaScript is not Java
• Java from Sun
• JavaScript from Netscape
• Java can stand alone, JavaScript can not.
• Java is compiled, JavaScript is not.
• JavaScript is Object Oriented
• Typically JavaScript is run within a browser or
  on a web server.
• To be seen, the browser must support JavaScript.

5
The Object Hierarchy
WINDOW
.location
.history
.document
Properties .bgColor.title
Methods .open( ).write( )
.anchors
.forms
.images
EventsonClick
.elements
6
Write to Screen

• To write to the current window
• document.write(blah blah blah)
• document denotes the default html window (ie
  its an object)
• .write is the method to write text out to an
  object, such as a window
• denotes the end of a statement

7
The Object Hierarchy window.document.write
(Hello World Wide Web)
WINDOW
.location
.history
.document
Properties .bgColor.title
Methods .open( ).write( )
.anchors
.links
.forms
.images
EventsonClick
.elements
8
Write to Screen Example

• ltHTMLgt
• ltHEADgt ltTITLEgt PG 494 example lt/TITLEgt lt/HEADgt
• ltBODYgt
• This is my first JavaScript Script
• ltPgt
• ltSCRIPT LANGUAGE"JavaScript"gt
• lt!-- conceal from older browsers
• window.document.write("Hello, World Wide Web")
• window.document.write("ltbrgt ltIgt This is CSC100
  lt/Igt")
• // --gt
• lt/SCRIPTgt
• lt/BODYgt
• lt/HTMLgt
• Run the example (pg
  494).

9
Where can JavaScript go?

• Head
• JavaScript here will be executed and shown in the
  BODY
• Will appear in front of anything else in the
  BODY.
• Body
• JavaScript here takes its place where found.

EXAMPLE Head and Body JavaScript (pg. 499)
10
Variables

• var
• The keyword var declares and names a variable
  (memory location) with the name given.

11
Prompting for and storing User Input

• JavaScript Variable named memory location inside
  computer.
• var name
• name prompt(Please enter your name., " ")

name
name
Example pg 501
12
Example code from pg 501
ltHTMLgt ltHEADgt ltSCRIPT LANGUAGEJavaScriptgt
lt!-- var name nameprompt("Please enter your
name. " , " ") document.write(name)
document.write(", stay out of trouble!") //
--gt lt/SCRIPTgt lt/HEADgt ltBODYgt ltPgt Further
contents of the web page can go here.
lt/Pgt lt/BODYgt lt/HTMLgt
13
Variable Types

• Javascript allows three types of variables
• String
• Ex var letters Hello World
• Numerical
• Ex var theAnswer 42
• Boolean (True or False)
• var youAreATrekkie youAreATrekkie
  confirm(Do you like Star Trek?)

14
String Variables

• Store Strings of text in variables
• String literals
• examples var greeting hello there
  var numberCharacters 1 2 3
• Concatenation
• var dog Scooby Doo
• document.write(dog)
• Scooby Doo
• See types.html