JavaScript

1
JavaScript

• Introduction and Background

2
Web languages

• Three formal languages
• HTML
• JavaScript
• CSS
• Three different tasks
• Document description
• Client-side interaction
• Style definition

3
Client-side interaction

• Example

4
Without JavaScript

• Browser can only display what the server sent
• each effect requires server round-trip
• too slow
• Client-side programming
• lets the browser handle user interaction
• makes web pages "dynamic"

5
For our purposes

• JavaScript is a reasonable first language
• Loosely typed
• Fewer details at first
• Interpreted
• Simple execution model
• Integrated with HTML
• Program files are just web pages
• Execution platform browser
• No special tools to acquire

6
Programming

• HTML
• adds markup to text
• text is still there
• JavaScript
• little "content" beyond the program
• more abstract

7
Reading a program

• greet.html example
• What to see
• statements
• path of execution
• resources of the language
• function calls
• objects properties
• user-defined and user-named items
• variables
• functions

8
Writing a program

• Designconstruction process
• Meaning
• Start with requirements
• Plan the structure of the solution
• Implement the solution with available tools
• Making design decisions along the way
• Often evolutionary
• initial prototype
• improved upon until requirements met

9
In HTML

• Requirements
• some content
• text / images / links
• some organization for that content
• Plan
• sketching page layout
• Implement
• write HTML elements corresponding to layout
• design decisions
• layouts, style options
• Evolution
• view page in browser
• revise HTML

10
In JavaScript

• Requirements
• functional
• something we want the program to do
• Plan
• develop algorithm
• sequence of steps that will achieve the function
• Implement
• write each step of algorithm in formal language
• design decisions
• names, language elements
• Evolution
• debugging

11
Algorithm

• Steps to accomplish result
• In "greet.html"
• ask user for name
• print name and greeting on page

12
JavaScript skeleton

• lthtmlgt
• ltheadgt
• ... HTML head content ...
• ltscript language"JavaScript" type"text/javascrip
  t"gt
• lt!
• ... code here executed on loading ...
• //--gt
• lt/scriptgt
• lt/headgt
• ltbodygt
• ... page content ...
• ltscript language"JavaScript" type"text/javascrip
  t"gt
• lt!--
• ... code here executed during page rendering ...
• //--gt
• lt/scriptgt
• ... more page content ...
• lt/bodygt

13
JavaScript execution model

• Interpreted
• Code is executed as read
• Outside of SCRIPT elements
• HTML output as usual
• Inside SCRIPT elements
• JavaScript evaluated
• May or may not result in output to the page
• At the end of the page
• JavaScript program terminates
• but code may still be resident
• event handling

14
Debugging

• Defects in programs can difficult to find
• error messages from browser can very unhelpful
• If you even see any!
• the computer doesn't "understand" your program
• programs are "brittle"
• Can be frustrating

15
Debugging tools

• Make sure to make errors visible
• browser settings
• Test your assumptions
• sometimes useful to print out values during
  computation
• Figure out exactly where the error occurs
• might not be where you think
• Reproduce the error in a simplified program
• sometimes your expectations are wrong

16
Variables

• An algorithm will have multiple steps
• Steps are linked by values
• value computed in step 1 used in step 2
• Necessary to store computed values
• Variables
• names given to stored values
• firstName
• Reserved Keywords
• Cant be used as variable names
• See Page 63

17
JavaScript language

• Syntax
• how statements are constructed
• Semantics
• what statements mean
• Operations
• what computations you can perform

18
Syntax

• statement
• ends in
• assignment statement
• variable value
• function call
• function name (parameters)
• ""
• delimits a list of characters as a string

19
Semantics

• assignment places a value in a named location
• function call invokes a named function
• with the given parameters
• may return a value

20
Prompt function

• prompt (promptValue, defaultValue)
• Effect
• opens a prompt dialog for user input
• Input
• prompt to be displayed
• initial value in text input area
• Result
• user's input string

21
document.write function

• document.write (text)
• Ignore the funny syntax for now
• Effect
• Writes text to the web page
• Input
• Text to output
• Result
• none

22
operator

• Combines strings together
• string1 string2
• Input
• two string values
• Output
• single string value concatenated