1 JavaScript and Dynamic Web Pages Lecture 7

2 Static vs. Dynamic Pages  A Web page uses HTML tags to identify page content and formatting information.  HTML can produce only static pages that look the same each time they are loaded into a browser and don’t change.  In 1995, researchers at Netscape developed JavaScript, a language for creating dynamic pages. They can change their appearance.  over time (e.g., a different image each time that a page is loaded), or  in response to a user’s actions (e.g., typing, mouse clicks, mouse over, etc). The page is now interactive.

3 JavaScript  JavaScript is a programming language a programming language is a language for specifying instructions that a computer can execute each statement in a programming language specifies a particular action that the computer is to carry out (e.g., changing an image or opening a window when a button is clicked)

JavaScript 4 JavaScript was developed for the purpose of adding dynamic content to Web pages add JavaScript statements to a Web page between the HTML tags when the browser displays the page, the statements inside the SCRIPT tags are interpreted (translated into machine language at the time of usage) and executed.

JavaScript  The language instructions are written in lower case.  All instructions must be spelled correctly or the interpreter will not recognize them.  Parts of a instructions need to be separated by space and not run together.  The correct punctuation must be used. Every statement ends with a semicolon  JavaScript is fussier than HTML.

String Literal  A string literal is a sequence of characters enclosed in quotes.  Any character may be included  A string literal must be written on one line.  For example  “Dave”  “This is also a string!”

Alert() alert(“Got your attention"); The alert() function (yet to be defined) asks the browser to pop-up a small window that contains the contents of the string (without the quotes).  alert must be all lower case letters.  The string may contain any letters (upper or lower case), numbers, or punctuation.  A button labeled “OK" appears in the window. When the user clicks it, the window disappears.

You try it. o Type into body of new or existing web page. Don’t copy and paste. o Remember script tags alert("my message"); 8

Variable  a variable is a name used to store a value.  The value can be changed during the program. Thus the name variable.  For example: number name  The name should be meaningful— related to the value stored

Assignment Statement  An assignment statement assigns a value to the variable. number=7; number=6+5; First the value 7 is assigned to the variable number. Then the value of number is changed to ??. Note the semi-colons after each statement.

Assignment statements firstName = “Dave”;  We use lower case letters for variable names.  To show that the name of the variable consists of two words, we sometimes capitalize the first letter of the second word.

12 Variables & Memory Cells  computers keep track of the value stored in a variable by associating each variable with a specific piece of memory which we call a memory cell, an imaginary box in which the value is stored  when firstName = “Dave”; is executed, the value (e.g., "Dave" ) is stored in a memory cell associated with the variable firstName  The value may be changed.  any reference to the variable name looks up the value stored in its associated memory cell  What would alert(firstName); produce? Why?

13 Assignment Statement using prompt firstName = prompt("Please enter your name", ""); when an assignment statement involving prompt is executed by the browser a separate window with a text box is opened when the user is done typing, he clicks the OK button the text that was entered is assigned to the variable In this example, the variable firstName stores the value Dave

14 Assignment Statement (cont.)  the general form of an assignment statement using a prompt VARIABLE = prompt("PROMPT MESSAGE", "");  here, the variable is used to store the user's first name, so firstName is a meaningful name  here, the message "Please enter your name" tells the user what is expected

You do it. o Don’t copy and paste. name = prompt("Enter your name: ", ""); alert(name); 15

16 Assignment Statement using prompt Another form: lastName = prompt("Please enter your last name"); Note there is no second set of quotes. The word “undefined” appears in the text box in the prompt window in Internet Explorer.

17 Prompts with Defaults  Yet another form: sometimes it makes sense to provide default values for prompts can specify a string instead of second "" this string will appear in the prompt text box if the user wants to accept this default value, he can just click OK  We wanted to create a page that displays a verse of the children's song, Old MacDonald had a Farm.

18 Prompts with Defaults (cont.)  the page should be able to display any verse  can accomplish this by prompting the user for the animal and sound animal = prompt("Enter a kind of animal:", "cow"); sound = prompt("What kind of sound does it make?", "moo");  Why did I go to a new line after sound= ?  Why two different variable names?

19 Prompts with Defaults (cont.) the default values automatically appear in the prompt boxes the user can click OK to accept the defaults OR type new values into the prompt box

You try it 20

21 Document.write(); document.write("Hello !"); writes the string (without the quotes) onto your web page would be displayed by the browser as Hello !

Assignment  Recall: The programmer can assign values to variables to be stored for use by the program: firstName=“Dave”; document.write(firstName);  The value stored in firstname would be displayed by the browser as Dave

+ in JavaScript, the + operator serves two purposes when applied to numbers, + means addition when applied to strings, + means concatenation—attach the two strings to each other  word1=“book”  word2=word1+”worm”  word2 is “bookworm”

24 Write Statement when a write statement is executed by the browser the message specified in the statement is written into the HTML page a message can include  a string literal  a variable  a combination of strings and variables, connected via '+' firstName=“Dave”; document.write("Hello " + firstName + ", welcome to my Web page."); when a variable is encountered, the browser substitutes the value currently assigned to that variable Note: Space inside quote is kept. Space outside quote is ignored

25 Write Statement (cont.) the general form of a write statement is document.write("MESSAGE TO BE DISPLAYED " + VARIABLE + " MORE MESSAGE" +...); note that the statement can be broken across lines, as long as no string literal is split. (i.e., the beginning and ending quotes of a string must be on same line.) the pieces of the message are displayed in sequence, with no spaces in between  if you want spaces, you have to enter them in the text

26 Formatted Output the output produced by a write statement is embedded in the page the browser displays this output just as it does any other text if the text contains HTML tags, the browser will interpret the tags and format the text accordingly firstName ="Dave“; document.write("Hello " + firstName + ", welcome to my Web page."); the browser would execute the statement to produce Hello Dave, welcome to my Web page. which would be displayed by the browser as ?? Hello Dave, welcome to my Web page.

27 Simple Dynamic Page below is a simple Web page with dynamic content note: dynamic content can be mixed with static HTML content it demonstrates two types of JavaScript statements an assignment statement that asks the user for input and stores that input a write statement that writes text into the HTML page

You try it 28

29 bgColor  we can change the background color of a page after it has been downloaded: document.bgColor = “red”;  The user can choose a color: color = prompt(“red, white or blue?”); document.bgColor = color;  will change the background color of the page to whatever the user chooses. (trace the two steps.)  be careful that the text will still be visible.

You try it 30

31 Syntax  Syntax is the rules about punctuation, spelling, etc. that a program must follow.  JavaScript is fussier than HTML: Case counts – use lowercase for instructions Spelling counts Spacing counts – separate words Punctuation counts – all statements end with semicolons

32 Syntax Errors  An error in the format of a JavaScript statement is known as a syntax error document.write("This example is illegal since the string is broken across lines"); yields: Error: unterminated string literal document.write("The value of x is " x); yields: Error: missing ) after argument list What is the actual error?

33 Variable Name Rules a variable name can be any sequence of letters, digits, and underbars (but must start with a letter) valid: tempInFahr current_age r2d2 Sum2Date x invalid: 2b_or_not2b salary$ "sum_to_date" two words (meant as one variable) variable names are case sensitive, so Sum and SUM are treated as different variables

34 Another Example Recall: once you create a variable, you can repeatedly assign values to it Thus the name “variable” only the most recent value is retained in memory EXAMPLE: suppose we want to prompt the user for two different foods if only one food is needed at a time, we can reuse the same variable

35 Reusing Variables food = prompt("What is your favorite food?", ""); document.write("Your favorite food is " + food + " "); the first pair of statements stores the user's favorite food displays that food in the page

36 Reusing Variables (cont.) food = prompt("What is your least favorite food?", ""); document.write("Your least favorite food is " + food + " "); the second pair of statements stores the user's least favorite food (overwriting the old value) displays that food in the page