Fundamentals of Web Programming Lecture 12 Introduction to

Fundamentals of Web Programming Lecture 12: Introduction to Javascript 20 -753: Fundamentals of Web Programming Lecture 12: Javascript I 1

Today’s Topics • Client-side vs. Server-side Scripts • Introduction to Javascript 20 -753: Fundamentals of Web Programming Lecture 12: Javascript I 2

Client-side vs. Server-side • Server-side scripting – scripts executed by the web server – reside on server, referenced by pages • Client-side scripting – scripts executed by the web browser – reside inside web pages themselves – defined in the page header and referenced in the page body 20 -753: Fundamentals of Web Programming Lecture 12: Javascript I 3

Some Applications • Validate form data before it is sent to the server • Achieve greater control over the windows used by the user • Glue together elements like forms and Active. X controls 20 -753: Fundamentals of Web Programming Lecture 12: Javascript I 4

Simple Example • js_example_1. html • Scripts are interpreted as the document is loaded into browser • Output produced appears in place of the script • What you see in the “View Source” window may not be the same as the original source page! 20 -753: Fundamentals of Web Programming Lecture 12: Javascript I 5

Guidelines • Javascript is case-sensitive • A single statement can cover multiple lines, or multiple statements can appear on one line • Separate statements with ‘; ’ if on the same line; otherwise no ‘; ’ • Braces ‘{’ and ‘}’ are used to create blocks of statements 20 -753: Fundamentals of Web Programming Lecture 12: Javascript I 6

Conventions • Script Hiding – Some browsers don’t support Java. Script – To prevent them from trying to display your scripts as HTML… – Wrap your scripts in comments – Tricky: can’t break the Java. Script, either! 20 -753: Fundamentals of Web Programming Lecture 12: Javascript I 7

Conventions • Comments – Multi-line: start with ‘/*’, end with ‘*/’ – Single-line: start with ‘//’ – Be careful - multi-line comments don’t nest! /* here’s some errorful code /* one line commented out */ comment was already closed! */ 20 -753: Fundamentals of Web Programming Lecture 12: Javascript I 8

Conventions • <NOSCRIPT> – Use the NOSCRIPT tag to include a message that will be seen by browsers that don’t support JS <NOSCRIPT>No Java. Script Support!</NOSCRIPT> 20 -753: Fundamentals of Web Programming Lecture 12: Javascript I 9

The Java. Script Language • Appendix A: Java. Script 1. 2 Language Reference • Identifiers: – identify variables, methods, or objects – start with letter or underscore, contain [a-z. A-Z 0 -9]+ – literals: invariant values – variables: hold values which change 20 -753: Fundamentals of Web Programming Lecture 12: Javascript I 10

The Java. Script Language • Types – integers – floating-point numbers – strings – booleans TRUE or FALSE 20 -753: Fundamentals of Web Programming Lecture 12: Javascript I 11

JS is Object-Oriented • Object: data and functions that have been grouped together • Function: a piece of code that does something • Methods: functions associated with a particular object • Properties: variables associated with a particular object 20 -753: Fundamentals of Web Programming Lecture 12: Javascript I 12

Java. Script Object • Primitive – datatypes like String with built-in methods • Complex – represent the web browser window, frames, the current web document, etc. ; most elements of a browsing session are represented by Javascript objects 20 -753: Fundamentals of Web Programming Lecture 12: Javascript I 13

Simple Example Revisited • document. write(“Hello World”) – document is a built-in object which refers to the web page being layed out – write is a method associated with the document object, which inserts its string argument into the document – methods are invoked using the ‘. ’ notation: object. method(args…) 20 -753: Fundamentals of Web Programming Lecture 12: Javascript I 14

Properties • Properties are accessed with the dot notation, too, but without the argument list: house. color = “blue” 20 -753: Fundamentals of Web Programming Lecture 12: Javascript I 15

Objects as Arrays • Javascript stores all the properties of an object in an array • You can reference all the properties using array notation e. g. , object[i] • Example: js_example_2. html 20 -753: Fundamentals of Web Programming Lecture 12: Javascript I 16

Built-In Objects • You can change the current state of the browser session by manipulating built-in object properties • Example: js_example_3. html • More examples in the next lecture 20 -753: Fundamentals of Web Programming Lecture 12: Javascript I 17

Programming in Java. Script • Expressions – anything that evaluates to a single value –x = 7 – str = “Hello, World” – (quit. Flag == TRUE) & (form. Complete == FALSE) 20 -753: Fundamentals of Web Programming Lecture 12: Javascript I 18

Programming in Java. Script • Operators – operate on variables or literals (operands) – Unary operators (one operand) – Binary operators (two operands) • Assignment (=) – Variables are dynamically typed – Can assign values of different types 20 -753: Fundamentals of Web Programming Lecture 12: Javascript I 19

Shortcut Operators • Combine math and assignment • add two values: x+=y • add two strings: s+=“HTML” • subtract two values: x-=y • multiply two values: a*=b • divide two values: a/=b • increment: x++ • decrement: x-20 -753: Fundamentals of Web Programming Lecture 12: Javascript I 20

Comparison Operators • Table 15. 2 • work on numeric or string values 20 -753: Fundamentals of Web Programming Lecture 12: Javascript I 21

Comparison Operators • all return TRUE or FALSE • equality: a==b • non-equality: a!=b • less than: a<b • less than or equal to: a<=b • greater than: a>b • greater than or equal to: a>=b 20 -753: Fundamentals of Web Programming Lecture 12: Javascript I 22

Logical Operators • Page 426 • work on logical (boolean) values • AND: x && y – TRUE if x is TRUE and y is TRUE – FALSE otherwise • OR: x || y – TRUE if x is TRUE or y is TRUE – FALSE otherwise 20 -753: Fundamentals of Web Programming Lecture 12: Javascript I 23

Logical Operators • NOT: !x – TRUE if x is FALSE – FALSE if x is TRUE • Caveat: – && and || don’t evaluate their second expression if the first is enough to decide the return value 20 -753: Fundamentals of Web Programming Lecture 12: Javascript I 24

String Operators • Comparisons work on strings (depend on lexicographic order) – e. g. , “abc” < “acc” is TRUE • Concatenation (+) – str = “Hello ” + “World!” 20 -753: Fundamentals of Web Programming Lecture 12: Javascript I 25

Testing Conditions • if <condition> <expression> if (document. last. Modified. year < 1995) document. write(“Stale Page!”) • if <condition> <expression> else <expression> if (x>y) greater = FALSE else greater = TRUE • The expression can be a block of statements in {} • The condition can be complex 20 -753: Fundamentals of Web Programming Lecture 12: Javascript I 26

Testing Conditions • if ((x < y) && (y < z)) { everything. OK = TRUE document. write(“OK”) } else { everything. OK = FALSE document. write(“ERROR”) } 20 -753: Fundamentals of Web Programming Lecture 12: Javascript I 27

Repeating Actions • The for and while loops • for (I=0; I<100; I++) document. write(“I is ”, I); • I=0 while (I<100) document. write(“I is ”, I); • Body of the loop can be a block, too 20 -753: Fundamentals of Web Programming Lecture 12: Javascript I 28

Finer Control Inside Loops • Terminate a loop before the end condition is reached: break • Jump to the next iteration without evaluating the rest of the loop body: continue • See examples on pp. 429 -430 20 -753: Fundamentals of Web Programming Lecture 12: Javascript I 29

Iterating Over Objects • The for… in loop iterates over object properties • Example: js_example_2. html 20 -753: Fundamentals of Web Programming Lecture 12: Javascript I 30