Introduction to Web Site Development

Steven Emory Department of Computer Science California State University, Los Angeles Introduction to Web Site Development Lecture 8: JavaScript I

JavaScript • History • 1995 – Invented by Netscape (now Mozilla) • Became a standard called ECMA-262 • JavaScript is now a dialect of ECMA-262 • Current version: JavaScript 1.8.1 • Support • Firefox 3.5: JavaScript 1.8.1 Supported • Internet Explorer 8: JScript 5.8 • JScript is Microsoft’s dialect of the ECMA-262 standard. They cannot use JavaScript because JavaScript is trademarked by Sun Microsystems.

More About JavaScript • Widely considered one of the worst programming languages ever invented • JavaScript is a misnomer • JavaScript has nothing to do with Java • Java-Script and Java ~ Monkey-Wrench and Monkey • Google the following: • JavaScript “Worst programming language” • “JavaScript Sucks” • “I hate JavaScript”

More About JavaScript • Unfortunately, JavaScript is the dominant client-side scripting language of the world wide web • IE supports VBScript, other browsers don’t • So like it or not, if you want cross browser support, you’re stuck with JavaScript

Internal JavaScript • JavaScript can be written inside an HTML file using the SCRIPT element • Start and end tags are required • Example: • <head><script type="text/javascript"> // your JavaScript code goes here</script></head>

Notes About Internal JavaScript • The SCRIPT element can go inside the HEAD • Script is run before BODY is loaded • The SCRIPT element can go inside the BODY • Script is run as BODY is being loaded

JavaScript Data Types • There are three basic data types that we need to worry about, numbers and strings • Numbers • 1, 2, 3, 1.0, 2.0, 3.0, -1.0, -2.0 • Strings • "This is a string of characters." • Boolean • true, false

JavaScript Variables • In an HTML page, sometimes we need to maintain the state of something • To do this we can using a named variable • The name can be any alpha-numeric character • Just don’t start it off with a number • To declare a variable, use the var keyword • The syntax is: • var variable-name = initial-value;

Variables Example • Example: • <script type="text/javascript">var x = 3;var y = 1.0;var str = "This is a string.";var b1 = true;var b2 = false;</script>

Comments • Comments are ignored by the web browser • There are two types of comments • Single Line • // This is a comment! • Multiple Line • /* This is a comment! */

Comments Example • Example: • <script type="text/javascript">// this is a comment /* this is a comment as well it spans multiple lines */</script>

The Window Object • Every browser has a window object that you can access through your JavaScript • There are five important functions that we need to know about window: • window.alert(message); • window.open(URL); • window.showModalDialog(URL); • window.prompt(message, defaultValue); • window.confirm(message);

The Window Object • Notice that: • The object name, window, comes first • Next is the period, which is called the member access operator • Next is the name of the function • Next is the left parenthesis • Next is zero or more comma-separated arguments • Next is the right parenthesis • And finally, there is the semicolon

The Window Object Example • Example: • <script type="text/javascript"> window.alert("This is an alert!"); window.prompt("How many people are in CS120?", 26); window.confirm("Are you sure you want to drop CS120?"); window.open("http://www.yahoo.com"); window.showModalDialog("http://www.yahoo.com");</script>

Alerts • window.alert displays a simple dialog box • window.alert(message); • message is a JavaScript string that you would like to have shown in an alert box

Prompts • window.prompt displays a simple dialog box with a text input box, that allows the user to enter text • This function is used for user input. • var value = window.prompt(message, default-value); • message is a JavaScript string that you would like to have shown in an prompt box • default-value is a JavaScript string that you would like to have shown in the input box • value is the JavaScript string that was in the input box when the user closed the prompt dialog box

Confirmation • window.confirm displays a simple dialog box with a message and two button, OK and CANCEL • This function is used for user input. • var value = window.confirm(message); • message is a JavaScript string that you would like to have shown in the confirm box • value is the JavaScript boolean value that is true if the user pressed the OK button, and false if the user pressed the CANCEL button

Popup Windows • window.open displays a popup window • Note: Whether or not a popup window opens in a tab or a new window is up to the browser. • window.open(URL); • URL is a JavaScript string that represents the URL that you would like to open up in a popup window

Modal Dialogs • window.showModalDialog opens up a modal dialog • A modal dialog is a popup window that prevents you from going back to the parent document; you must answer a modal dialog before proceeding • window.showModalDialog(URL); • URL is a JavaScript string that represents the URL that you would like to open up in a popup window

JavaScript Functions • A function is a famous programming construct. • When called, a function executes zero or more statements • A statement is the smallest unit of execution in a programming language • Functions can be reused • We have been using functions in computer programming since the 1950’s • It is called Procedural Programming

JavaScript Functions • A function in JavaScript is like a function in math • This is how we do it in math • The function definition (math): • f(x) = x2 • Evaluating (calling) a function (math) • f(2) = 4 • f(3) = 9 • f(4) = 16

JavaScript Functions • This is how we do it in JavaScript • The function definition (JavaScript): • function f(x) // x is the argument{return x*x; // multiply x times x} • Evaluating (calling) a function (JavaScript) • var x = f(2); // evaluates to 4 • var y = f(3); // evaluates to 9 • var z = f(4); // evaluates to 16 • If you have a return statement in your function, you may call the function and assign the result to a variable as in the example above

JavaScript Functions • Every JavaScript function declaration has the following syntax: • The function definition (JavaScript): • function name(zero-or-more-comma-separated-arguments){ statement-list}

JavaScript Functions • JavaScript functions can have zero arguments • function hey(){ window.alert("Yo!");return 0;} • JavaScript functions do not have to return anything (they can just do one or more things) • function hey(){ window.alert("Yo!"); window.alert("Yo again!");}

JavaScript Functions • Anytime you have a JavaScript function that doesn’t return something (doesn’t have the return statement), don’t assign it to variable • function hey1(){return 0;}function hey2(){}var x = hey1(); // OK, function hey1 returns 0var y = hey2(); // NOT OK!!!!!!!!! NO RETURN VALUE!!!!!

Expressions • An expression is sequence of numbers, variable names, values, function calls, and operators that computes a single value • 3 + 4, is an expression that computes 7 • ((7 – 2)*4), is an expression that computes 20 • There are many different types of expressions • Mathematical • Boolean • Logical

Mathematical Expressions • Addition: x + y • Subtraction: x – y • Multiplication: x * y • Division: x / y • Remainder (Modulus): x % y

Boolean Expressions • A Boolean expression is an expression that computes either true or false • Less Than: x < y • Greater Than: x > y • Less Than or Equal: x <= y • Greater Than or Equal: x >= y • Equal: x == y • Note that we use == since = is for var assignment

Logical Expressions • A logical expression computes a value based on a truth table • Logical OR: x || y • If x is true or y is true, then the result is true; otherwise false • Logical AND: x && y • If both x and y are true, then the result is true; otherwise false • Logical NOT: !x • If x is true, result is false; otherwise true

Statements • A computer program executes statements • A statement is the smallest unit of execution in a computer program • A statement should always be terminated by a semicolon in JavaScript • There are many types of statements • assignment • return • if… else… • Plus many more!!!

Assignment Statements • We pretty much covered it already, it uses the assignment operator, = • Each one of the four statements below is an assignment statement • var x = 0;var y;y = 10;x = 10 + 14 – 3;

if… else… Statements • We use the if… else… statement in conjunction with Boolean and logical expressions to execute branches of statements • The syntax is: • if(boolean-or-logical-expression) single-statement;else single-statement; • Example: • if(x < 10) y = 3;else y = 4;

if… else… Statements • If multiple statements are needed, use curly brackets to label a block (a set of statements). • The syntax is: • if(boolean-or-logical-expression) { statement1; statement2; statement3; }else { statement1; statement2; statement3; }

Introduction to Web Site Development