Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download CS120_FALL_2009_LECTURE_08
Document related concepts
Monad (functional programming) wikipedia , lookup
Structured programming wikipedia , lookup
Functional programming wikipedia , lookup
Go (programming language) wikipedia , lookup
C Sharp syntax wikipedia , lookup
Falcon (programming language) wikipedia , lookup
C Sharp (programming language) wikipedia , lookup
Smart Pascal wikipedia , lookup
Aqua (user interface) wikipedia , lookup
APL syntax and symbols wikipedia , lookup
Standard ML wikipedia , lookup
Function object wikipedia , lookup
Transcript
Introduction to Web Site Development
Lecture 8:
JavaScript I
Steven Emory
Department of Computer Science
California State University, Los Angeles
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 clientside 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
var
var
var
var
x = 3;
y = 1.0;
str = "This is a string.";
b1 = true;
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 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
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
var
y =
x =
x = 0;
y;
10;
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;
}
