Introduction to Web Site Development

Introduction to Web Site Development

Steven EmoryDepartment 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 1.8.1

Support

Firefox 3.5: JavaScript 1.8.1 Supported

Internet Explorer 8: JScript 5.8JScript 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


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


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


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


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


Every JavaScript function declaration has the following syntax:

The function definition (JavaScript):function name(zero-or-more-comma-separated-arguments){ statement-list}


JavaScript functions can have zero argumentsfunction 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!");}


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

Documents

Transcript of Introduction to Web Site Development