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

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

3. 20-753: Fundamentals of Web Programming 3 Lecture 12: Javascript I 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

4. 20-753: Fundamentals of Web Programming 4 Lecture 12: Javascript I 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 ActiveX controls

5. 20-753: Fundamentals of Web Programming 5 Lecture 12: Javascript I 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!

6. 20-753: Fundamentals of Web Programming 6 Lecture 12: Javascript I 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

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

8. 20-753: Fundamentals of Web Programming 8 Lecture 12: Javascript I 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! */

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

10. 20-753: Fundamentals of Web Programming 10 Lecture 12: Javascript I The JavaScript Language Appendix A: JavaScript 1.2 Language Reference Identifiers: –identify variables, methods, or objects –start with letter or underscore, contain [a-zA-Z0-9]+ –literals: invariant values –variables: hold values which change

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

12. 20-753: Fundamentals of Web Programming 12 Lecture 12: Javascript I 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

13. 20-753: Fundamentals of Web Programming 13 Lecture 12: Javascript I JavaScript 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

14. 20-753: Fundamentals of Web Programming 14 Lecture 12: Javascript I 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…)

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

16. 20-753: Fundamentals of Web Programming 16 Lecture 12: Javascript I 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.htmljs_example_2.html

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

18. 20-753: Fundamentals of Web Programming 18 Lecture 12: Javascript I Programming in JavaScript Expressions –anything that evaluates to a single value –x = 7 –str = “Hello, World” –(quitFlag == TRUE) & (formComplete == FALSE)

19. 20-753: Fundamentals of Web Programming 19 Lecture 12: Javascript I Programming in JavaScript 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. 20-753: Fundamentals of Web Programming 20 Lecture 12: Javascript I 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--

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

22. 20-753: Fundamentals of Web Programming 22 Lecture 12: Javascript I 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

23. 20-753: Fundamentals of Web Programming 23 Lecture 12: Javascript I 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

24. 20-753: Fundamentals of Web Programming 24 Lecture 12: Javascript I 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

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

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

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

28. 20-753: Fundamentals of Web Programming 28 Lecture 12: Javascript I 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

29. 20-753: Fundamentals of Web Programming 29 Lecture 12: Javascript I 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

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