introduction to web site development
DESCRIPTION
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 - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Introduction to Web Site Development](https://reader036.vdocuments.mx/reader036/viewer/2022081514/56814e00550346895dbb6d90/html5/thumbnails/1.jpg)
Introduction to Web Site Development
Steven EmoryDepartment of Computer Science
California State University, Los Angeles
Lecture 8:JavaScript I
![Page 2: Introduction to Web Site Development](https://reader036.vdocuments.mx/reader036/viewer/2022081514/56814e00550346895dbb6d90/html5/thumbnails/2.jpg)
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.
![Page 3: Introduction to Web Site Development](https://reader036.vdocuments.mx/reader036/viewer/2022081514/56814e00550346895dbb6d90/html5/thumbnails/3.jpg)
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”
![Page 4: Introduction to Web Site Development](https://reader036.vdocuments.mx/reader036/viewer/2022081514/56814e00550346895dbb6d90/html5/thumbnails/4.jpg)
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
![Page 5: Introduction to Web Site Development](https://reader036.vdocuments.mx/reader036/viewer/2022081514/56814e00550346895dbb6d90/html5/thumbnails/5.jpg)
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>
![Page 6: Introduction to Web Site Development](https://reader036.vdocuments.mx/reader036/viewer/2022081514/56814e00550346895dbb6d90/html5/thumbnails/6.jpg)
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
![Page 7: Introduction to Web Site Development](https://reader036.vdocuments.mx/reader036/viewer/2022081514/56814e00550346895dbb6d90/html5/thumbnails/7.jpg)
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
![Page 8: Introduction to Web Site Development](https://reader036.vdocuments.mx/reader036/viewer/2022081514/56814e00550346895dbb6d90/html5/thumbnails/8.jpg)
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;
![Page 9: Introduction to Web Site Development](https://reader036.vdocuments.mx/reader036/viewer/2022081514/56814e00550346895dbb6d90/html5/thumbnails/9.jpg)
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>
![Page 10: Introduction to Web Site Development](https://reader036.vdocuments.mx/reader036/viewer/2022081514/56814e00550346895dbb6d90/html5/thumbnails/10.jpg)
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! */
![Page 11: Introduction to Web Site Development](https://reader036.vdocuments.mx/reader036/viewer/2022081514/56814e00550346895dbb6d90/html5/thumbnails/11.jpg)
Comments Example
Example:<script type="text/javascript">
// this is a comment
/* this is a comment as well it spans multiple lines */
</script>
![Page 12: Introduction to Web Site Development](https://reader036.vdocuments.mx/reader036/viewer/2022081514/56814e00550346895dbb6d90/html5/thumbnails/12.jpg)
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);
![Page 13: Introduction to Web Site Development](https://reader036.vdocuments.mx/reader036/viewer/2022081514/56814e00550346895dbb6d90/html5/thumbnails/13.jpg)
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
![Page 14: Introduction to Web Site Development](https://reader036.vdocuments.mx/reader036/viewer/2022081514/56814e00550346895dbb6d90/html5/thumbnails/14.jpg)
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>
![Page 15: Introduction to Web Site Development](https://reader036.vdocuments.mx/reader036/viewer/2022081514/56814e00550346895dbb6d90/html5/thumbnails/15.jpg)
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
![Page 16: Introduction to Web Site Development](https://reader036.vdocuments.mx/reader036/viewer/2022081514/56814e00550346895dbb6d90/html5/thumbnails/16.jpg)
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
![Page 17: Introduction to Web Site Development](https://reader036.vdocuments.mx/reader036/viewer/2022081514/56814e00550346895dbb6d90/html5/thumbnails/17.jpg)
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
![Page 18: Introduction to Web Site Development](https://reader036.vdocuments.mx/reader036/viewer/2022081514/56814e00550346895dbb6d90/html5/thumbnails/18.jpg)
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
![Page 19: Introduction to Web Site Development](https://reader036.vdocuments.mx/reader036/viewer/2022081514/56814e00550346895dbb6d90/html5/thumbnails/19.jpg)
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
![Page 20: Introduction to Web Site Development](https://reader036.vdocuments.mx/reader036/viewer/2022081514/56814e00550346895dbb6d90/html5/thumbnails/20.jpg)
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
![Page 21: Introduction to Web Site Development](https://reader036.vdocuments.mx/reader036/viewer/2022081514/56814e00550346895dbb6d90/html5/thumbnails/21.jpg)
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
![Page 22: Introduction to Web Site Development](https://reader036.vdocuments.mx/reader036/viewer/2022081514/56814e00550346895dbb6d90/html5/thumbnails/22.jpg)
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
![Page 23: Introduction to Web Site Development](https://reader036.vdocuments.mx/reader036/viewer/2022081514/56814e00550346895dbb6d90/html5/thumbnails/23.jpg)
JavaScript Functions
Every JavaScript function declaration has the following syntax:
The function definition (JavaScript):function name(zero-or-more-comma-separated-arguments){ statement-list}
![Page 24: Introduction to Web Site Development](https://reader036.vdocuments.mx/reader036/viewer/2022081514/56814e00550346895dbb6d90/html5/thumbnails/24.jpg)
JavaScript Functions
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!");}
![Page 25: Introduction to Web Site Development](https://reader036.vdocuments.mx/reader036/viewer/2022081514/56814e00550346895dbb6d90/html5/thumbnails/25.jpg)
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!!!!!
![Page 26: Introduction to Web Site Development](https://reader036.vdocuments.mx/reader036/viewer/2022081514/56814e00550346895dbb6d90/html5/thumbnails/26.jpg)
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
![Page 27: Introduction to Web Site Development](https://reader036.vdocuments.mx/reader036/viewer/2022081514/56814e00550346895dbb6d90/html5/thumbnails/27.jpg)
Mathematical Expressions
Addition: x + y
Subtraction: x – y
Multiplication: x * y
Division: x / y
Remainder (Modulus): x % y
![Page 28: Introduction to Web Site Development](https://reader036.vdocuments.mx/reader036/viewer/2022081514/56814e00550346895dbb6d90/html5/thumbnails/28.jpg)
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
![Page 29: Introduction to Web Site Development](https://reader036.vdocuments.mx/reader036/viewer/2022081514/56814e00550346895dbb6d90/html5/thumbnails/29.jpg)
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
![Page 30: Introduction to Web Site Development](https://reader036.vdocuments.mx/reader036/viewer/2022081514/56814e00550346895dbb6d90/html5/thumbnails/30.jpg)
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!!!
![Page 31: Introduction to Web Site Development](https://reader036.vdocuments.mx/reader036/viewer/2022081514/56814e00550346895dbb6d90/html5/thumbnails/31.jpg)
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;
![Page 32: Introduction to Web Site Development](https://reader036.vdocuments.mx/reader036/viewer/2022081514/56814e00550346895dbb6d90/html5/thumbnails/32.jpg)
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;
![Page 33: Introduction to Web Site Development](https://reader036.vdocuments.mx/reader036/viewer/2022081514/56814e00550346895dbb6d90/html5/thumbnails/33.jpg)
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; }