Introduction to Web Site Development Steven Emory Department of Computer Science California State University, Los Angeles 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 Support Firefox 3.5: JavaScript 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: // your JavaScript code goes here

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: var x = 3; var y = 1.0; var str = "This is a string."; var b1 = true; var b2 = false;

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: // this is a comment /* this is a comment as well it spans multiple lines */

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: 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(" window.showModalDialog("

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 by pressing OK; if the user pressed CANCEL, the keyword null is returned.

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) = x 2 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 0 var 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 Not Equal: x != y

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 = – 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; }