Bài giảng Thiết kế web Dreamweaver CS4 - Chapter 9: Javascript

Bài giảng Thiết kế web Dreamweaver CS4 - Chapter 4 introduce Javascript. This chapter presents content: JavaScript and client-side scripting, understanding JavaScript objects, case sensitivity in javascript, comments to a javascript program,...

JAVASCRIPT

JavaScript and Client-Side Scripting

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

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

The <script> Element

Understanding JavaScript Objects

Object

– Programming code and data that can be treated

as an individual unit or component

– Procedures associated with an object

For example: loan.calcPayments();

Understanding JavaScript Objects

Property

– Piece of data associated with an object

– Assign a value to a property using an equal sign

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

Case Sensitivity in JavaScript

JavaScript is case sensitive

– Within JavaScript code, object names must always be all lowercase

Comments to a JavaScript Program

– 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

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

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

Placing JavaScript in the Document

Placing JavaScript in the Document

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 documents

Creating a JavaScript Source File

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

JavaScript program

</Script>

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 sensitive

myVariable, myvariable, MyVariable, and MYVARIABLE are all different variables

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 variable

Initializing a variable

– Assigning a specific value to it

– Can be done when you declare the variable

var variable_name = value;

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 marks

var myName = "Don“;

– Numeric value is not enclosed in quotation marks

salesTotal = salesTotal + shipping;

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

Modifying Variables

Data Types

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

Boolean Values

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

Arrays

Array: Set of data represented by a single variable

name

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

Accessing Element Information

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

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

Syntax

array_name.length;

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>

Arithmetic Operators

Used to perform mathematical calculations

– Addition, subtraction, multiplication, division, etc

Assignment Operators

Comparison & Conditional Operators

Logical Operators

Logical operators

– Compare two Boolean operands for equality

– Zero-length string value

– Valid value for literal strings

String Operators

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

Escape Characters and Sequences

Working with Functions

Working with Functions

– Variable that is used within a function

– Placed in parentheses following a function name – To execute a function, you must invoke, or call

Working with Functions

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

}

– 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

Using Built-in JavaScript Functions

ALERT BOX: The user will need to click "OK" to proceed

– Example

alert("yourtext");

Using Built-in JavaScript Functions

CONFIRM BOX: 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

confirm("yourtext");

Using Built-in JavaScript Functions

Example:

Using Built-in JavaScript Functions

Using Built-in JavaScript Functions

setTimeout(): Set time period after which the

command will be executed

Using Built-in JavaScript Functions

Understanding Events

Working with Elements and Events

<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()”>

Working with Elements and Events

if Statements

Syntax:

if (<conditional>) {

statement 1;

statement 2;

}

else

{

Block statement 2; }

case 4: case 6: case 9: case 11:

default:

alert("Khong co thang nay");

}</script>

While Statement

Syntax:

While(expression) {

Statement 1;

} Statement 2;

do …while statement

Syntax:

do {

Statement 1;

} While(Expression);

Statement 2;

for …in statement

Syntax:

for ( variable in Object) {

Statement ; }

for …in statement

document.write(obj[i]);

</script>

</body>