JAVASCRIPT - WordPress.com
advertisement
JAVASCRIPT
Computer Science & Engineering
LOGO
JavaScript and Client-Side Scripting
LOGO
When HTML was first developed, Web pages
were static
Static Web pages cannot change after the
browser renders them
HTML and XHTML could only be used to
produce static documents.
JavaScript
Client-side scripting language that allows Web
page authors to develop interactive Web
pages and sites
csehui.wordpress.com
Computer Science & Engineering
JavaScript and Client-Side Scripting
LOGO
Client-side scripting:
Scripting language that runs on a local
browser (on the client tier)
JavaScript gives you the ability to:
Turn static Web pages into applications such
as games or calculators
Change the contents of a Web page after a
browser has rendered it
Create visual effects such as animation
Control the Web browser window itself
csehui.wordpress.com
Computer Science & Engineering
The <script> Element
LOGO
Scripts
JavaScript programs contained within a Web
page
<script> element
Tells the Web browser that the scripting
engine must interpret the commands it
contains.
The type attribute tells the browser which
scripting language and which version of the
scripting language is being used.
csehui.wordpress.com
Computer Science & Engineering
Understanding JavaScript Objects
LOGO
Object
Programming code and data that can be
treated as an individual unit or component
Procedures
Individual statements used in a computer
program grouped into logical units
Used to perform specific tasks
Methods
Procedures associated with an object
For example: loan.calcPayments();
csehui.wordpress.com
Computer Science & Engineering
Understanding JavaScript Objects
LOGO
Property
Piece of data associated with an object
Assign a value to a property using an equal
sign.
loan.interest = .08;
Argument
Information that must be provided to a
method.
Providing an argument for a method is called
passing arguments
loan.calcPayments(800);
csehui.wordpress.com
Computer Science & Engineering
The write() and writeln()
LOGO
Document object represents the content of a
browser’s window
You create new text on a Web page with the
write() method or the writeln() method of
the Document object
Both methods require a text string as an
argument.
Text string or literal string: text that is
contained within double or single quotation
marks.
document.write(“Welcome to Javascript!");
csehui.wordpress.com
Computer Science & Engineering
Case Sensitivity in JavaScript
LOGO
JavaScript is case sensitive.
Within JavaScript code, object names must
always be all lowercase.
csehui.wordpress.com
Computer Science & Engineering
Comments to a JavaScript Program
LOGO
Comments
Nonprinting lines that you place in your code
to contain various types of remarks
Line comment
Hides a single line of code
Add two slashes // before the comment text
Block comments
Hide multiple lines of code
Add /* before the first character you want
included in the block and */ after the last
character in the block
csehui.wordpress.com
Computer Science & Engineering
Structuring JavaScript Code
LOGO
When you add JavaScript code to a document,
you need to follow certain rules regarding the
placement and organization of that code
The following sections describe some important
rules to follow when structuring JavaScript code.
Include as many script sections as you like
within a document.
When you include multiple script sections in a
document, you must include a <script> element
for each section.
csehui.wordpress.com
Computer Science & Engineering
Placing JavaScript in the Document
LOGO
You can place <script> elements in either the
document head or document body
Good idea to place as much of your JavaScript
code as possible in the document head
Important to put JavaScript code in document
head
When code performs behind-the-scenes tasks
required by script sections in the document
body
csehui.wordpress.com
Computer Science & Engineering
Placing JavaScript in the Document
LOGO
<head>
<Script language=”JavaScript”>
Javascript Comments
</script>
</head>
csehui.wordpress.com
Computer Science & Engineering
Placing JavaScript in the Document
LOGO
<HTML>
<HEAD>
<script language="javascript" >
document.write(“What is your name? ”);
</script>
</HEAD>
<BODY>
content of page
</BODY>
</HTML>
csehui.wordpress.com
Computer Science & Engineering
Creating a JavaScript Source File
LOGO
JavaScript source file
Usually designated by the file extension .js
Does not contain a <script> element
To access JavaScript code saved in an external
file, assign to the src attribute of the <script>
element the URL of the JavaScript source file
Use a combination of embedded JavaScript code
and JavaScript source files in your documents
csehui.wordpress.com
Computer Science & Engineering
Creating a JavaScript Source File
LOGO
<Script SRC=”fileJavascript.js” Language="javascript" >
JavaScript program
</Script>
csehui.wordpress.com
Computer Science & Engineering
Data Types and Operators
LOGO
Variable
Specific location in computer’s memory
Before using a variable:
Write a statement that creates the variable
and assigns it a name
Variable names are case sensitive
myVariable, myvariable, MyVariable, and
MYVARIABLE are all different variables
csehui.wordpress.com
Computer Science & Engineering
Declaring and Initializing Variables
LOGO
Use the reserved keyword var to create
variables
To create a variable named myVariable:
var myVariable;
Declaring a variable
Using a statement to create a variable
Initializing a variable
Assigning a specific value to it
Can be done when you declare the variable
var variable_name = value;
csehui.wordpress.com
Computer Science & Engineering
Declaring and Initializing Variables
LOGO
Assignment operator
Equal sign (=)
Assigns the value on the right side of
expression to the variable on the left side of
expression.
Value assigned to a variable:
Literal string must be enclosed in quotation
marks
var myName = "Don“;
Numeric value is not enclosed in quotation
marks.
csehui.wordpress.com
Computer Science & Engineering
Displaying Variables
LOGO
Can declare multiple variables using a single var
keyword
Ex: var customerName = "Don Gosselin",
orderQuantity = 100, salesTax = .05;
Can assign value of one variable to another
Ex:
var salesTotal;
var curOrder = 40;
salesTotal = curOrder;
csehui.wordpress.com
Computer Science & Engineering
Displaying Variables
LOGO
To print a variable, pass variable name to
document.write() or
document.writeln() method
Example:
document.write("<p>Your sales total is $“ +
salesTotal + ".</p>");
csehui.wordpress.com
Computer Science & Engineering
Modifying Variables
LOGO
To change a variable’s value, use a statement
with variable’s name, equal sign, and new value
Example:
var salesTotal = 40;
document.write("<p>Your sales total is $" +
salesTotal + ".</p>");
var shipping = 10;
salesTotal = salesTotal + shipping;
document.write("<p>Your sales total plus
shipping is $" + salesTotal + ".</p>");
csehui.wordpress.com
Computer Science & Engineering
Modifying Variables
csehui.wordpress.com
LOGO
Computer Science & Engineering
Data Types
LOGO
Data type
Category of information that a variable
contains.
Primitive types
Data types that can be assigned only a single
value.
csehui.wordpress.com
Computer Science & Engineering
Data Types
LOGO
JavaScript supports two numeric data types:
Integers and floating-point numbers
Integer
Positive or negative number with no decimal
places
Floating-point number
Decimal places (or written in exponential notation)
Exponential notation, or scientific notation
Shortened format for writing very large
numbers or numbers with many decimal
places
csehui.wordpress.com
Computer Science & Engineering
Boolean Values
LOGO
Boolean value
Logical value of true or false
In JavaScript, words true and false indicate
Boolean values
Example
var repeatCustomer = true;
var corporateDiscount = false;
document.write("<p>Repeat customer: " +
repeatCustomer + "</p>");
document.write("<p>Corporate discount: " +
corporateDiscount + "</p>");
csehui.wordpress.com
Computer Science & Engineering
Boolean Values
csehui.wordpress.com
LOGO
Computer Science & Engineering
Arrays
LOGO
Array: Set of data represented by a single
variable name
csehui.wordpress.com
Computer Science & Engineering
Declaring and Initializing Arrays
LOGO
Element: each piece of data in an array
Example: Create an array named hospitalDepts[]
that has 10 elements
var hospitalDepts = new Array(10);
Assign value to first element in: hospitalDepts[]
hospitalDepts[0] = "Anesthesia";
Can assign value to elements when array is created
hospitalDepts = new Array("Anesthesia",
"Molecular Biology", "Neurology");
csehui.wordpress.com
Computer Science & Engineering
Accessing Element Information
LOGO
To access an element’s value, include brackets
and element index
Examples
document.writeln(hospitalDepts[0]);
// prints "Anesthesia"
document.writeln(hospitalDepts[1]);
// prints "Molecular Biology"
document.writeln(hospitalDepts[2]);
// prints "Neurology"
csehui.wordpress.com
Computer Science & Engineering
LOGO
Modifying Elements
To modify values in existing array elements,
include brackets and element index
Examples
hospitalDepts[0] = "Anesthesia";
// first element
hospitalDepts[1] = "Molecular Biology";
// second element
hospitalDepts[2] = "Neurology";
// third element
csehui.wordpress.com
Computer Science & Engineering
The Number of Elements in an Array
LOGO
Determining the Number of Elements in an Array
length property of Array class returns the
number of elements in an array
Syntax
array_name.length;
csehui.wordpress.com
Computer Science & Engineering
The Number of Elements in an Array
LOGO
Example
<script>
var arr= new Array();
arr[0]= "thu hai";
arr[1]= "Thu ba";
arr[2]= "Thu tu";
arr[3]= "Thu nam";
arr[4]= "Thu sau";
arr[5]= "Thu bay";
for(i=0; i<=5; i++)
document.write(arr[i]+ "<br>");
document.write(arr.length+ "<br>");//6
</script>
csehui.wordpress.com
Computer Science & Engineering
Arithmetic Operators
LOGO
Used to perform mathematical calculations
Addition, subtraction, multiplication, division,
etc.
csehui.wordpress.com
Computer Science & Engineering
Arithmetic Operators
LOGO
Prefix operator
Placed before a variable
Postfix operator
Placed after a variable
csehui.wordpress.com
Computer Science & Engineering
Assignment Operators
csehui.wordpress.com
LOGO
Computer Science & Engineering
Comparison and Conditional Operators
csehui.wordpress.com
LOGO
Computer Science & Engineering
LOGO
Logical Operators
Logical operators
Compare two Boolean operands for equality
csehui.wordpress.com
Computer Science & Engineering
Strings
LOGO
Text string is text contained within double or
single quotation marks
Can use text strings as literal values or assign
them to a variable
Empty string
Zero-length string value
Valid value for literal strings
csehui.wordpress.com
Computer Science & Engineering
String Operators
LOGO
Operators used to combine two strings
Concatenation operator (+)
Example:
var destination = "Jakarta";
var location = "Indonesia";
destination = destination + " is in " + location;
Compound assignment operator (+=)
var destination = "Jakarta";
destination += " is in Indonesia";
csehui.wordpress.com
Computer Science & Engineering
Escape Characters and Sequences
csehui.wordpress.com
LOGO
Computer Science & Engineering
Functions, Events, and
Control Structures
Computer Science & Engineering
LOGO
Working with Functions
LOGO
Functions
Procedures similar to the methods associated
with an object
Make it possible to treat a related group of
JavaScript statements as a single unit
Must be contained within a <script> element
csehui.wordpress.com
Computer Science & Engineering
Working with Functions
LOGO
Syntax:
function nameOfFunction(parameters)
{
statements;
}
Parameter
Variable that is used within a function
Placed in parentheses following a function name
To execute a function, you must invoke, or call
csehui.wordpress.com
Computer Science & Engineering
Working with Functions
LOGO
return statement: Returns a value to the
statement that called the function
Example
function averageNumbers(a, b, c)
{
var sum_of_numbers = a + b + c;
var result = sum_of_numbers / 3;
return result;
}
csehui.wordpress.com
Computer Science & Engineering
Variable Scope
LOGO
Global variable
One that is declared outside a function and is
available to all parts of your program.
Local variable
Declared inside a function and is only
available within the function in which it is
declared.
When a program contains a global variable
and a local variable with the same name.
The local variable takes precedence when its
function is called.
csehui.wordpress.com
Computer Science & Engineering
Using Built-in JavaScript Functions
LOGO
ALERT BOX: alert("yourtext");
The user will need to click "OK" to proceed.
csehui.wordpress.com
Computer Science & Engineering
Using Built-in JavaScript Functions
LOGO
CONFIRM BOX: confirm("yourtext");
The user needs to click either "OK" or "Cancel"
to proceed.
If the user clicks "OK", the box returns the
value true.
If the user clicks "Cancel", the box returns the
value false.
csehui.wordpress.com
Computer Science & Engineering
Using Built-in JavaScript Functions
LOGO
Example:
csehui.wordpress.com
Computer Science & Engineering
Using Built-in JavaScript Functions
LOGO
PROMPT BOX:
prompt("yourtext","defaultvalue");
If the user clicks "OK" the prompt box returns
the entry.
If the user clicks "Cancel" the prompt box
returns null.
csehui.wordpress.com
Computer Science & Engineering
Using Built-in JavaScript Functions
LOGO
setTimeout(): Set time period after which the
command will be executed.
Syntax:
IdTime=setTimeout(“Command JavaScript”,
delayTime);
clearTimeout(): Cancel time set by the
setTimeout ()
Syntax :
clearTimeout(IdTime );
csehui.wordpress.com
Computer Science & Engineering
Using Built-in JavaScript Functions
csehui.wordpress.com
LOGO
Computer Science & Engineering
LOGO
csehui.wordpress.com
Computer Science & Engineering
Understanding Events
LOGO
Event
Specific circumstance (tình huống) that is
monitored by JavaScript
And that your script can respond to in some
way
You can use JavaScript events to allow users
to interact (tương tác) with your Web pages
Most common events are user actions.
csehui.wordpress.com
Computer Science & Engineering
Understanding Events
csehui.wordpress.com
LOGO
Computer Science & Engineering
Working with Elements and Events
LOGO
Event handler
Code that executes in response to a specific
event
Included as an attribute of the element that
initiates the event
<element event_handler ="JavaScript code">
Event handler names are the same as the
name of the event itself, plus a prefix of “on”
<img src=saobang.jpg onmouseout=“doihinh()”>
csehui.wordpress.com
Computer Science & Engineering
Working with Elements and Events
csehui.wordpress.com
JavaScript, Fourth
Edition
LOGO
Computer Science 53
& Engineering
Working with Elements and Events
LOGO
Example
<input type="button"
onclick="window.alert('You clicked a button!')">
window.alert() method
Displays a pop-up dialog box with an OK
button. You can include multiple JavaScript
statements in an event handler, As long as
semicolons separate the statements.
csehui.wordpress.com
Computer Science & Engineering
Working with Elements and Events
LOGO
Example: calculator program
Use push buttons and onclick event handlers
Use a variable named inputString to contain
the operands and operators of a calculation
Calculation is performed using the eval()
function
csehui.wordpress.com
Computer Science & Engineering
if Statements
LOGO
Syntax:
if (<conditional>)
{
statement 1;
statement 2;
}
csehui.wordpress.com
Computer Science & Engineering
if Statements
LOGO
if … else
if(<conditional>)
{
Block statement 1;
…
}
else
{
Block statement 2;
}
csehui.wordpress.com
Computer Science & Engineering
if Statements
LOGO
if … else nested:
if(<conditional 1>)
{
block statement 1;
}
else
if (< conditional 2>)
{ Khối lệnh 2 ;}
else
…
{khối lệnh 3 }
csehui.wordpress.com
Computer Science & Engineering
if Statements
LOGO
<script language="javascript">
a=eval(prompt("Nhap canh a"));
b=eval(prompt("Nhap canh b"));
c=eval(prompt("Nhap canh c"));
if(a+b<c||b+c<a||c+a<b)
alert("Khong phai tam giac")
else
if(a==b&&b==c&&c==a)
alert("Tam giac đều") ;
else
if(a==b||b==c||c==a)
alert("Tam giac cân");
else
alert("Tam giác thuong");
</script>
csehui.wordpress.com
Computer Science & Engineering
Switch...Case Statements
LOGO
Switch...Case
Switch(expression){
case value1:
statement1 ; break;
case value2:
statement2 ; break;
………
case valuek:
statementk ; break;
default :
statementk+1 ;}
csehui.wordpress.com
Computer Science & Engineering
Switch...Case Statements
LOGO
<script>
t=prompt( "nhap thang: ");
switch (eval(t))
{
case 1: case 3: case 5: case 7: case 8 : case 10: case 12:
alert("Thang "+ t+ " co 31 ngay");
break;
case 2:
alert("Thang "+t + " co 28 ngay");
break;
case 4: case 6: case 9: case 11:
alert("Thang "+t +" co 30 ngay");
break;
default:
alert("Khong co thang nay");
}</script>
csehui.wordpress.com
Computer Science & Engineering
For Statements
LOGO
Syntax:
For(Exp 1; Exp 2; Exp 3)
{
statement;
}
csehui.wordpress.com
Computer Science & Engineering
For Statements
LOGO
<Script language="javascript">
var n, m, i, j;
m=prompt("Nhap so dong");
n=prompt("Nhap so cot");
document.write("<table width=50% border=1>");
for(i=1;i<=m;i++)
{
document.write("<tr>");
for(j=1;j<=n;j++)
document.write("<td>" + i + j +"</td>");
document.write("</tr>");
}
document.write("</table>");
csehui.wordpress.com
Computer Science & Engineering
While Statement
LOGO
Syntax:
While(expression)
{
Statement 1;
}
Statement 2;
csehui.wordpress.com
Computer Science & Engineering
do …while statement
LOGO
Syntax:
do
{
Statement 1;
}
While(Expression);
Statement 2;
csehui.wordpress.com
Computer Science & Engineering
LOGO
do …while statement
<script language="javascript">
var input;
do
{
input=prompt(“Nhập một số bấy kỳ, nhập 99 đế thóat”)
if(isNaN(input)
{
document.write(“Dữ liệu không hợp lệ, nhập số ”);
break;
}
}while (input!=99 )
</script>
csehui.wordpress.com
Computer Science & Engineering
for …in statement
LOGO
Syntax:
for ( variable in Object)
{
Statement ;
}
csehui.wordpress.com
Computer Science & Engineering
for …in statement
LOGO
Example:
<body>
<script>
obj= new Array() ;
obj[0]="Hello";
obj[1]="World" ;
for(i in obj)
document.write(obj[i]);
</script>
</body>
csehui.wordpress.com
Computer Science & Engineering
