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 Design+construction 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... HTML head content... <!—... code here executed on loading... //-->... page content... <!--... code here executed during page rendering... //-->... more page content...

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 Can’t 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