Java Script Introduction and Background Web languages l

Java. Script Introduction and Background

Web languages l Three formal languages l l HTML Java. Script CSS Three different tasks l l l Document description Client-side interaction Style definition 2

Client-side interaction l Example 3

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

For our purposes l Java. Script is a reasonable first language l Loosely typed l l Interpreted l l Simple execution model Integrated with HTML l l Fewer details at first Program files are just web pages Execution platform = browser l No special tools to acquire 5

Programming l HTML l l l adds markup to text is still there Java. Script l l little "content" beyond the program more abstract 6

Reading a program l l greet. html example What to see l l l statements path of execution resources of the language l l l function calls objects & properties user-defined and user-named items l l variables functions 7

Writing a program l l Design+construction process Meaning l l l Start with requirements Plan the structure of the solution Implement the solution with available tools Making design decisions along the way Often evolutionary l l initial prototype improved upon until requirements met 8

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

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

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

Java. Script skeleton <html> <head>. . . HTML head content. . . <script language="Java. Script" type="text/javascript"> <!—. . . code here executed on loading. . . //--> </script> </head> <body>. . . page content. . . <script language="Java. Script" type="text/javascript"> <!-. . . code here executed during page rendering. . . //--> </script>. . . more page content. . . </body> </html> 12

Java. Script execution model l Interpreted l l Outside of SCRIPT elements l l HTML output as usual Inside SCRIPT elements l l l Code is executed as read Java. Script evaluated May or may not result in output to the page At the end of the page l l Java. Script program terminates but code may still be resident l event handling 13

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

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

Variables l l An algorithm will have multiple steps Steps are linked by values l l l Necessary to store computed values Variables l l value computed in step 1 used in step 2 names given to stored values l first. Name Reserved Keywords l l Can’t be used as variable names See Page 63 16

Java. Script language l Syntax l l Semantics l l how statements are constructed what statements mean Operations l what computations you can perform 17

Syntax l statement l l assignment statement l l variable = value; function call l l ends in ; function name (parameters) "" l delimits a list of characters as a string 18

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

Prompt function l l prompt (prompt. Value, default. Value) Effect l l Input l l l opens a prompt dialog for user input prompt to be displayed initial value in text input area Result l user's input string 20

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

+ operator l l l Combines strings together string 1 + string 2 Input l l two string values Output l single string value concatenated 22