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

120-753: Fundamentals of Web Programming

Lecture 12: Javascript I

Fundamentals ofWeb Programming

Lecture 12: Introduction to Javascript



Today’s Topics

• Client-side vs. Server-side Scripts• Introduction to Javascript



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



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



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!



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



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!



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! */



Conventions

• <NOSCRIPT>– Use the NOSCRIPT tag to include a

message that will be seen by browsers that don’t support JS

<NOSCRIPT>No JavaScript Support!</NOSCRIPT>



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



The JavaScript Language

• Types– integers– floating-point numbers– strings– booleans TRUE or FALSE



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



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



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…)



Properties

• Properties are accessed with the dot notation, too, but without the argument list:

house.color = “blue”



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



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



Programming in JavaScript

• Expressions– anything that evaluates to a single

value– x = 7– str = “Hello, World”– (quitFlag == TRUE) & (formComplete

== FALSE)



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



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--



Comparison Operators

• Table 15.2• work on numeric or string values



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



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



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



String Operators

• Comparisons work on strings (depend on lexicographic order)– e.g., “abc” < “acc” is TRUE

• Concatenation (+)– str = “Hello ” + “World!”



Testing Conditions

• if <condition> <expression>if (document.lastModified.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



Testing Conditions

• if ((x < y) && (y < z)) { everythingOK = TRUE document.write(“OK”)} else { everythingOK = FALSE document.write(“ERROR”)}



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



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



Iterating Over Objects

• The for… in loop iterates over object properties

• Example: js_example_2.html

Documents

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