LOGO JAVASCRIPT Computer Science & Engineering. LOGO JavaScript and Client-Side Scripting When HTML was first developed, Web pages were static Static

LOGO

JAVASCRIPTComputer Science & Engineering

LOGO

Computer Science & Engineering

JavaScript and Client-Side ScriptingWhen 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

LOGO


JavaScript and Client-Side Scripting

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


LOGO


The <script> Element

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.


LOGO


Understanding JavaScript Objects

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 tasksMethods

Procedures associated with an objectFor example: loan.calcPayments();csehui.wordpress.com

LOGO


Understanding JavaScript Objects

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);


LOGO


The write() and writeln()

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!");


LOGO


Case Sensitivity in JavaScript

JavaScript is case sensitive.Within JavaScript code, object names must

always be all lowercase.


LOGO


Comments to a JavaScript Program

Comments Nonprinting lines that you place in your

code to contain various types of remarksLine comment

Hides a single line of code Add two slashes // before the comment

textBlock comments

Hide multiple lines of code Add /* before the first character you

want included in the block and */ after the last character in the blockcsehui.wordpress.com

LOGO


Structuring JavaScript Code

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

LOGO


Placing JavaScript in the Document

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


LOGO



<head>

<Script language=”JavaScript”>

Javascript Comments

</script></head>


LOGO



<HTML><HEAD><script language="javascript" >

document.write(“What is your name? ”);

</script></HEAD><BODY>

content of page</BODY>

</HTML>csehui.wordpress.com

LOGO


Creating a JavaScript Source File

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 documentscsehui.wordpress.com

LOGO


Creating a JavaScript Source File

<Script SRC=”fileJavascript.js” Language="javascript" >

JavaScript program

</Script>


LOGO


Data Types and Operators

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 sensitivemyVariable, myvariable, MyVariable, and

MYVARIABLE are all different variables


LOGO


Declaring and Initializing Variables

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 variableInitializing a variable

Assigning a specific value to it Can be done when you declare the

variablevar variable_name = value;


LOGO


Declaring and Initializing Variables

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 marksvar myName = "Don“;

Numeric value is not enclosed in quotation marks.


LOGO


Displaying Variables

Can declare multiple variables using a single var keywordEx: var customerName = "Don Gosselin",

orderQuantity = 100, salesTax = .05;

Can assign value of one variable to anotherEx:

var salesTotal;var curOrder = 40;salesTotal = curOrder;


LOGO


Displaying Variables

To print a variable, pass variable name to document.write() or

document.writeln() methodExample:

document.write("<p>Your sales total is $“ + salesTotal + ".</p>");


LOGO


Modifying Variables

To change a variable’s value, use a statement with variable’s name, equal sign, and new valueExample: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

LOGO


Modifying Variables


LOGO


Data Types

Data type Category of information that a variable

contains.Primitive types

Data types that can be assigned only a single value.


LOGO


Data Types

JavaScript supports two numeric data types: Integers and floating-point numbers

Integer Positive or negative number with no

decimal placesFloating-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


LOGO


Boolean Values

Boolean value Logical value of true or false In JavaScript, words true and false

indicate Boolean valuesExample

var repeatCustomer = true;var corporateDiscount = false;document.write("<p>Repeat customer: "

+ repeatCustomer + "</p>");document.write("<p>Corporate discount:

" + corporateDiscount + "</p>");csehui.wordpress.com

LOGO


Boolean Values


LOGO


Arrays

Array: Set of data represented by a single variable name


LOGO


Declaring and Initializing Arrays

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");


LOGO


Accessing Element Information

To access an element’s value, include brackets and element index

Examplesdocument.writeln(hospitalDepts[0]);

// prints "Anesthesia"document.writeln(hospitalDepts[1]);

// prints "Molecular Biology"document.writeln(hospitalDepts[2]);

// prints "Neurology"


LOGO


Modifying Elements

To modify values in existing array elements, include brackets and element index

ExampleshospitalDepts[0] = "Anesthesia";

// first elementhospitalDepts[1] = "Molecular Biology";

// second elementhospitalDepts[2] = "Neurology";

// third element


LOGO


The Number of Elements in an Array

Determining the Number of Elements in an Array

length property of Array class returns the number of elements in an array

Syntaxarray_name.length;


LOGO


The Number of Elements in an Array

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>


LOGO


Arithmetic Operators

Used to perform mathematical calculations Addition, subtraction, multiplication,

division, etc.


LOGO


Arithmetic Operators

Prefix operator Placed before a variable

Postfix operator Placed after a variable


LOGO


Assignment Operators


LOGO


Comparison and Conditional Operators


LOGO


Logical Operators

Logical operators Compare two Boolean operands for

equality


LOGO


Strings

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


LOGO


String Operators

Operators used to combine two stringsConcatenation operator (+)

Example:var destination = "Jakarta";var location = "Indonesia";destination = destination + " is in " +

location;Compound assignment operator (+=)var destination = "Jakarta";destination += " is in Indonesia";


LOGO


Escape Characters and Sequences


LOGO

Functions, Events, and Control Structures


LOGO


Working with Functions

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


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

callcsehui.wordpress.com

LOGO



return statement: Returns a value to the statement that called the function

Examplefunction averageNumbers(a, b, c) {

var sum_of_numbers = a + b + c;var result = sum_of_numbers / 3;return result;

}


LOGO


Variable Scope

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.


LOGO


Using Built-in JavaScript FunctionsALERT BOX: alert("yourtext");

The user will need to click "OK" to proceed.


LOGO


Using Built-in JavaScript Functions

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.


LOGO



Example:


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.


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 );


LOGO




LOGO

Computer Science & Engineeringcsehui.wordpress.com

LOGO


Understanding Events

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.


LOGO


Understanding Events


LOGO


Working with Elements and EventsEvent 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()”>


LOGO


Working with Elements and Events

csehui.wordpress.comJavaScript, Fourth Edition 53

LOGO


Working with Elements and EventsExample

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


LOGO


Working with Elements and EventsExample: 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


LOGO


if Statements

Syntax:if (<conditional>){

statement 1;statement 2;

}


LOGO


if Statements

if … elseif(<conditional>){

Block statement 1;…

}else{

Block statement 2;}


LOGO


if Statements

if … else nested:if(<conditional 1>){

block statement 1;}elseif (< conditional 2>)

{ Khối lệnh 2 ;}else

…{khối lệnh 3 }


LOGO


if Statements <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>


LOGO


Switch...Case Statements

Switch...CaseSwitch(expression){

case value1:statement1 ; break;

case value2:statement2 ; break;

………case valuek:

statementk ; break;default :

statementk+1 ;}


LOGO


Switch...Case Statements

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


LOGO


For Statements

Syntax:For(Exp 1; Exp 2; Exp 3)

{statement;

}


LOGO


For Statements

<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>");


LOGO


While Statement

Syntax: While(expression){

Statement 1;}Statement 2;


LOGO


do …while statement

Syntax:do{Statement 1;

} While(Expression);Statement 2;


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

LOGO


for …in statement

Syntax:for ( variable in Object) { Statement ;}


LOGO


for …in statement

Example:<body><script>

obj= new Array() ;obj[0]="Hello";obj[1]="World" ;for(i in obj)

document.write(obj[i]);</script></body>


Documents

LOGO JAVASCRIPT Computer Science & Engineering. LOGO JavaScript and Client-Side Scripting When HTML was first developed, Web pages were static Static