Multimedia and the World Wide Web

1
Multimedia and the World Wide Web

• HCI 201 Lecture Notes 8B

2
What will we learn today?

• What is JavaScript?
• How does JavaScript work?
• JavaScript examples
• JavaScript Basics
• Variables
• Commands
• Operators

3
Sever-side vs. client-side programs

• Sever-side programs

• The user retrieves the web page from the web
  server.
• The user works with the page to send information
  back to a CGI script running on the server.

1
3
3. The CGI script returns any output to the user.
2
CGI Common Gateway Interface, see definition in
lecture notes 5.
4
Sever-side vs. client-side programs

• Client-side programs

• The user retrieves the web page from the web
  server with a program attached.
• The user runs the program locally, receiving
  instant feedback.

1
2
5
Client-side programs

• Advantages
• - Scripts can be tested locally before
  releasing.
• - Server will not be overloaded with handling
  programming requests.
• - More responsive to the user.
• Disadvantages
• Can never completely replace server-side programs
• (e.g., perform search, process purchase order,
  etc.)

6
What is JavaScript?

• A programming language
• Used to add interactivity and function to web
  pages.
• It is case sensitive.
• A scripting language
• Can be interpreted and executed by web browsers.
• Can be sprinkled throughout an HTML document.
• Easier to learn.
• An object-oriented programming language
• Objects, properties, and methods

7
Java vs. JavaScript
8
More about JavaScript

• Things we can do with JavaScript
• Change the appearance of the document.
• (font, color, rollover images, pull-down menus,
  etc.)
• Provide dynamic information.
• (status bar, date and time updates, etc.)
• Interact with user.
• (alert messages, open a new window, etc.)
• Validate users input.
• General computational tasks.

9
How does JavaScript work?

• The ltscriptgt tag
• ltscript languageJavaScriptgt
• lt! Hide this script from browsers that do not
  support JavaScript
• JavaScript statements go here
• // Stop hiding from other browsers --gt
• lt/scriptgt

10
How does JavaScript work?

• Attributes of the ltscriptgt tag
• language JavaScript or
• type text/javascript
• src URLSpecifies the source of an external
  script file.
• charsetSpecifies the character set used to
  encode the script.
• defer Specifies that the browser should defer
  executing the script.

11
How does JavaScript work?

• Event and event handlers
• Event handler is a program used to detect and
  react to events that occur while a page is
  loading, rendering, or being browsed.
• Commonly used event handlers
• mouse-related onClick, onDblClick,
  onMouseDown, onMouseUp, onMouseOver, onMouseMove,
  onMouseOut
• keyboard-related onKeyDown, onKeyUp,
  onKeyPress
• document-related onLoad, onUnLoad, onSubmit,
  onReset, onSelect, onChange, etc.

12
How does JavaScript work?
(see textbook page 437438)
13
How does JavaScript work?

• JavaScript event handlers
• Example 1
• ltbody onLoadstatusWelcome to HCI201!gt
• Example 2
• lta hrefsomedoc.html onMouseOverstatusClick
  me! return truegtDocumentslt/agt

14
How does JavaScript work?

• JavaScript URLs
• Example 1
• lta hrefjavascriptalert(Error!)gt Show error
  messagelt/agt
• Example 2
• ltembed srcMusic.wav namemidifile
  autostartfalse with0 height0gt
• lta hrefjavascriptmidifile.play()gt Play the
  musiclt/agt

15
JavaScript examples

• Example 1
• Dynamically change the appearance
• Example 2
• Simple calculation
• Example 3
• Animating objects

16
JavaScript example 1
1. Assign an event-handler to an
event ... lt/headgt ... ltbutton onClick"ChangeStyle
('yellow', 'brown')"gt Style 1lt/buttongtltbrgt
ltbutton onClick"ChangeStyle('lightgreen',
'darkgreen')"gt Style 2lt/buttongtltbrgt ltbutton
onClick"ChangeStyle('lavender', 'purple')"gt
Style 3lt/buttongtltbrgt ...
17
JavaScript example 1
2. Perform actions in the event-handler ltheadgt ltti
tlegtJavaScript Example 1lt/titlegt ltscript
type"text/javascript"gt lt!-- Hide the script from
browsers that do not support JavaScript function
ChangeStyle(backColor, fontColor) document.body.
bgColor backColor document.body.text
fontColor // Stop hiding from other browsers
--gt lt/scriptgt lt/headgt
18
JavaScript example 2
1. Assign an event-handler to an
event ... lt/headgt ... ltform namemathgt ltinput
type"text" name"number1"gt ltselect size"1"
name"optr"gt ltoption value""
selectedgtlt/optiongt ltoption
value"-"gt-lt/optiongt ltoption
value""gtlt/optiongt ltoption
value"/"gt/lt/optiongt lt/selectgt ltinput
type"text" name"number2"gt ltinput type"button"
value"" onClick"Calculate(number1.value,
number2.value, optr.selectedIndex)"gt ltinput
type"text" name"answer"gt lt/formgt
19
JavaScript example 2
2. Perform actions in the event-handler function
Calculate(number1, number2, operator) var
num1eval(number1) var num2eval(number2) var
answer if (operator0) answernum1num2 els
e if (operator1) answernum1-num2 else if
(operator2) answernum1num2 else if
(operator3 num2!"0") answernum1/num2 e
lse alert("Error!") answer"error"
document.math.answer.valueanswer
20
Creating JavaScript variables

• A variable is a named element in a program, used
  to store, retrieve, and pass around information.
• A variable name should follow the rules
• Start with a letter or an underscore, followed by
  any letters, numbers, or underscores.
• Case sensitive.
• No space in a variable name.
• Some keywords are reserved by JavaScript. (e.g.,
  write, writeln, )
• JavaScript supports four types of variables
• Number (14, 22.5, -3.1415, 6.7E2 or 670)
• String (Hello, Happy Holidays!, Hello is
  valid, but Hello is not)
• Boolean (true or false, 1 or 0)
• Null (a variable is created but havent been
  assigned any value yet)

21
Declaring JavaScript variables

• You can declare variables with any of the
  following three commands
• var variable
• var variable value
• variable value
• The first command creates a variable without
  assigning a value to it, so this variable is
  currently a (number, string, boolean, or null)?
• The second and third commands both create a
  variable and assign it a value. So this variable
  is now a (number, string, boolean, or null)?

22
JavaScript commands

• JavaScript commands
• A declaration command creates a variable
• var ThisYear
• An assignment command assigns a value to a
  variable
• ThisYear 2005
• NextYear ThisYear 1
• A command can call another JavaScript function
• document.write(Hello, World!)
• Other advanced commands will be covered next
  week.

23
JavaScript operators

• Math operators
• Adds two values together (add numbers, but
  connect strings)
• - Subtracts one value from another
• Multiplies two values together
• / Divides one value by another
• Gets the remainder after dividing one value by
  another
• Increases a value by 1 (x100 yx ? y101)
• -- Decreases a value by 1 (x100 yx-- ? y99)
• - Changes the sign of a value (x100 y-x ?
  y-100)

24
JavaScript operators

• Assignment operators
• Assigns the value of the variable on the
  right to the one on the left
• (x100 yx GreetingsHello!)
• x y ? x x y
• - x - y ? x x - y
• x y ? x x y
• / x / y ? x x / y
• x y ? x x y

25
JavaScript operators

• Comparison operators (assume we have x100,
  y200)
• XY returns true if x equals to y.
• ! X!Y returns true if x does not equal to y.
• gt XgtY returns true if x is greater than y.
• lt XltY returns true if x is less than y.
• gt XgtY returns true if x is greater than or
  equal to y.
• lt XltY returns true if x is less than or equal
  to y.

26
JavaScript operators

• Logical operators
• (assume we have x100, y200, E1 x100, E2
  y150)
• (and) E1E2 returns true if both expressions
  are true.
• (or) E1E2 returns true when either
  expression E1 or E2 is true.
• ! (not) !E1 returns true if E1 is false, and
  false if E1 is true.