Bài giảng Web technologies and e-Services - Bài 4: Javascript - Trường Đại học Bách khoa Hà Nội

Javascript

1

Content

Client-side programming with JavaScript

§ scripts vs. programs

ØJavaScript vs. JScript vs. VBScript

Øcommon tasks for client-side scripts

§ JavaScript

Ødata types & expressions

Øcontrol statements

Øfunctions & libraries

Østrings & arrays

ØDate, document, navigator, user-defined classes

2

Client-Side Programming

v HTML is good for developing static pages

§ can specify text/image layout, presentation, links, …

§ Web page looks the same each time it is accessed

v Client-side programming

§ programs are written in a separate programming (or scripting) language

e.g., JavaScript, JScript, VBScript

§ programs are embedded in the HTML of a Web page, with (HTML) tags

to identify the program component

e.g., <script type="text/javascript"> … </script>

§ the browser executes the program as it loads the page, integrating the

dynamic output of the program with the static content of HTML

§ could also allow the user (client) to input information and process it,

might be used to validate input before it’s submitted to a remote server

3

Scripts vs. Programs

v A scripting language is a simple, interpreted programming language

§ scripts are embedded as plain text, interpreted by application

§ simpler execution model: don't need compiler or development environment

§ saves bandwidth: source code is downloaded, not compiled executable

§ platform-independence: code interpreted by any script-enabled browser

§ but: slower than compiled code, not as powerful/full-featured

JavaScript: the first Web scripting language, developed by Netscape in 1995

syntactic similarities to Java/C++, but simpler, more flexible in some

respects,

limited in others (loose typing, dynamic variables, simple objects)

JScript: Microsoft version of JavaScript, introduced in 1996

• same core language, but some browser-specific differences

• fortunately, IE, Netscape, Firefox, etc. can (mostly) handle both

VBScript: client-side scripting version of Microsoft Visual Basic

4

Common Scripting Tasks

v adding dynamic features to Web pages

§ validation of form data (probably the most commonly used

application)

§ image rollovers

§ time-sensitive or random page elements

§ handling cookies

v defining programs with Web interfaces

§ utilize buttons, text boxes, clickable images, prompts, etc

v limitations of client-side scripting

§ since script code is embedded in the page, it is viewable to the world

§ for security reasons, scripts are limited in what they can do

e.g., can't access the client's hard drive

§ since they are designed to run on any machine platform, scripts do not

contain platform specific commands

5

JavaScript

v JavaScript code can be embedded in a Web page using <script> tags

§ the output of JavaScript code is displayed as if directly entered in HTML

<html>

document.writedisplays text in the page

<!–- CS443 js01.html 16.08.06 -->

text to be displayed can include HTML tags

the tags are interpreted by the browser when

the text is displayed

<head>

<title>JavaScript Page</title>

</head>

<body>

as in C++/Java, statements end with ;

// silly code to demonstrate output

but a line break might also be interpreted as the end

of a statement (depends upon browser)

document.write("<p>Hello

world!</p>");

document.write(" <p>How are <br/> "

JavaScript comments similar to C++/Java

+

" <i>you</i>?</p>

//

starts a single line comment

");

</script>

/*…*/enclose multi-line comments

<p>Here is some static text as

well.</p>

</body>

</html>

view page

6

JavaScript Data Types & Variables

v JavaScript has only three primitive data types

String : "foo" 'how do you do?'

"I said 'hi'."

""

Number: 12

3.14159

1.5E6

Boolean : true

false

*Find info on Null, Undefined

<html>

assignments are as in C++/Java

<!–- CS443 js02.html 16.08.06 -->

<head>

message = "howdy";

pi = 3.14159;

<title>Data Types and

Variables</title>

</head>

variable names are sequences of letters, digits, and

underscores that start with a letter or an underscore

variables names are case-sensitive

<body>

var x, y;

x= 1024;

y=x; x = "foobar";

document.write("<p>x = " + y +

"</p>");

document.write("<p>x = " + x +

"</p>");

you don't have to declare variables, will be created

the first time used, but it’s better if you use var

statements

</script>

</body>

view page

</html>

var message, pi=3.14159;

variables are loosely typed, can be assigned

different types of values (Danger!)

7

JavaScript Operators & Control Statements

standard C++/Java operators &

control statements are provided in

<html>

<!–- CS443 js03.html 08.10.10 -->

<head>

JavaScript

<title>Folding Puzzle</title>

</head>

• +, -, *, /, %, ++, --, …

• ==, !=, <, >, <=, >=

<body>

• &&, ||, !,===,!==

• if , if-else, switch

var distanceToSun = 93.3e6*5280*12;

var thickness = .002;

• while, for, do-while, …

var foldCount = 0;

while (thickness < distanceToSun) {

PUZZLE: Suppose you took a piece of

paper and folded it in half, then in half

again, and so on.

thickness *= 2;

foldCount++;

}

document.write("Number of folds = " +

foldCount);

</script>

</body>

</html>

How many folds before the thickness of

the paper reaches from the earth to the

view page

sun?

*Lots of information is available online

8

JavaScript Math Routines

<!–- CS443 js04.html 08.10.10 -->

<head>

<title>Random Dice Rolls</title>

</head>

<html>

the built-in Math object contains

functions and constants

Math.sqrt

Math.pow

Math.abs

Math.max

Math.min

Math.floor

Math.ceil

Math.round

<body>

var roll1 = Math.floor(Math.random()*6) + 1;

var roll2 = Math.floor(Math.random()*6) + 1;

document.write("<img

src='http://www.csc.liv.ac.uk/"+

"~martin/teaching/CS443/Images/die" +

roll1 + ".gif‘ alt=‘dice showing ‘ +

roll1 />");

document.write("  ");

document.write("<img

src='http://www.csc.liv.ac.uk/"+

"~martin/teaching/CS443/Images/die" +

roll2 + ".gif‘ alt=‘dice showing ‘ +

roll2 />");

Math.PI

Math.E

Math.randomfunction returns a real

number in [0..1)

</script>

</div>

</body>

</html>

view page

9

Interactive Pages Using Prompt

<html>

crude user interaction can take

place using prompt

<head>

<title>Interactive page</title>

</head>

<body>

1^stargument: the prompt message that

appears in the dialog box

var userName = prompt("What is your name?",

"");

var userAge = prompt("Your age?", "");

var userAge = parseFloat(userAge);

2^ndargument: a default value that will

appear in the box (in case the user

enters nothing)

document.write("Hello " + userName + ".")

if (userAge < 18) {

document.write(" Do your parents know "

+

the function returns the value entered

by the user in the dialog box (a string)

"you are online?");

}

else {

document.write(" Welcome friend!");

if value is a number, must use

}

parseFloat (or parseInt) to convert

</script>

</body>

</html>

forms will provide a better

view page

interface for interaction (later)

10

User-Defined Functions

v function definitions are similar to C++/Java, except:

§ no return type for the function (since variables are loosely typed)

§ no variable typing for parameters (since variables are loosely typed)

§ by-value parameter passing only (parameter gets copy of argument)

function isPrime(n)

// Assumes: n > 0

// Returns: true if n is prime, else false

{

Can limit variable scope

to the function.

if (n < 2) {

if the first use of a variable is

return false;

}

preceded with var, then

else if (n == 2) {

that variable is local to the

return true;

function

}

else {

for (var i = 2; i <= Math.sqrt(n); i++) {

for modularity, should make

if (n % i == 0) {

all variables in a function

return false;

local

}

return true;

}

11

Function Example

<html>

<!–- CS443 js06.html 16.08.2006 -->

<head>

<title>Prime Tester</title>

Function definitions

(usually) go in the

<head> section

function isPrime(n)

// Assumes: n > 0

// Returns: true if n is prime

{

// CODE AS SHOWN ON PREVIOUS SLIDE

<head> section is loaded

first, so then the function is

defined before code in the

<body> is executed (and,

therefore, the function can

be used later in the body of

the HTML document)

}

</script>

</head>

<body>

testNum = parseFloat(prompt("Enter a positive integer",

"7"));

if (isPrime(testNum)) {

document.write(testNum + " <b>is</b> a prime number.");

}

else {

document.write(testNum + " <b>is not</b> a prime

number.");

}

</script>

</body>

</html>

view page

12

Another Example

<html>

<!–- CS443 js07.html 11.10.2011 -->

<head>

<title> Random Dice Rolls Revisited</title>

function randomInt(low, high)

// Assumes: low <= high

// Returns: random integer in range [low..high]

{

return Math.floor(Math.random()*(high-low+1)) + low;

}

</script>

recall the dynamic dice

page

</head>

<body>

roll1 = randomInt(1, 6);

roll2 = randomInt(1, 6);

document.write("<img src='http://www.csc.liv.ac.uk/"+

"~martin/teaching/CS443/Images/die" +

roll1 + ".gif'/>");

could define a function for

generating random numbers in

a range, then use whenever

needed

document.write("  ");

document.write("<img src='http://www.csc.liv.ac.uk/"+

"~martin/teaching/CS443/Images/die" +

roll2 + ".gif'/>");

easier to remember, promotes

reuse

</script>

</div>

</body>

</html>

view page

13

JavaScript Libraries

better still: if you define functions that may be useful to

many pages, store in a separate library file and load

the library when needed load a library using the SRC

attribute in the SCRIPT tag (put nothing between the

beginning and ending tags)

src="random.js">

</script>

14

Library Example

<html>

<!–- CS443 js08.html 11.10.2011 -->

<head>

<title> Random Dice Rolls Revisited</title>

src="random.js">

</script>

</head>

<body>

roll1 = randomInt(1, 6);

roll2 = randomInt(1, 6);

document.write("<img src='http://www.csc.liv.ac.uk/"+

"~martin/teaching/CS443/Images/die" +

roll1 + ".gif'/>");

document.write("  ");

document.write("<img src='http://www.csc.liv.ac.uk/"+

"~martin/teaching/CS443/Images/die" +

roll2 + ".gif'/>");

</script>

</div>

</body>

</html>

view page

15

JavaScript Objects

v an object defines a new type (formally, Abstract Data Type)

§ encapsulates data (properties) and operations on that data (methods)

v a String object encapsulates a sequence of characters, enclosed in quotes

properties include

• length: stores the number of characters in the string

methods include

• charAt(index): returns the character stored at the given index (as in

C++/Java, indices start at 0)

• substring(start, end) : returns the part of the string between

the start (inclusive) and end (exclusive) indices

• toUpperCase()

: returns copy of string with letters

uppercase

• toLowerCase()

: returns copy of string with letters

lowercase

to create a string, assign using newor (in this case) just make a direct assignment

(new is implicit)

word = new String("foo");

properties/methods are called exactly as in C++/Java

• word.length word.charAt(0)

word = "foo";

16

String example: Palindromes

// Assumes: str is a string

// Returns: str with all but letters removed

function strip(str)

suppose we want to test

whether a word or phrase

is a palindrome

{

var copy = "";

for (var i = 0; i < str.length; i++) {

if ((str.charAt(i) >= "A" && str.charAt(i) <= "Z")

||

noon

Radar

(str.charAt(i) >= "a" && str.charAt(i) <= "z"))

{

Madam, I'm Adam.

A man, a plan, a canal:

Panama!

copy += str.charAt(i);

}

return copy;

}

must strip non-letters out of the word or

phrase

function isPalindrome(str)

// Assumes: str is a string

// Returns: true if str is a palindrome, else false

{

make all chars uppercase in order to be

case-insensitive

str = strim(str.toUpperCase());

for(var i = 0; i < Math.floor(str.length/2); i++) {

if (str.charAt(i) != str.charAt(str.length-i-1)) {

finally, traverse and compare chars

from each end

return false;

}

return true;

}

17

<html>

<!–- CS443 js09.html 11.10.2011 -->

<head>

<title>Palindrome Checker</title>

function strip(str)

{

// CODE AS SHOWN ON PREVIOUS SLIDE

}

function isPalindrome(str)

{

// CODE AS SHOWN ON PREVIOUS SLIDE

}

</script>

</head>

<body>

text = prompt("Enter a word or phrase", "Madam, I'm Adam");

if (isPalindrome(text)) {

document.write("'" + text + "' <b>is</b> a palindrome.");

}

else {

document.write("'" + text + "' <b>is not</b> a

palindrome.");

}

</script>

</body>

</html>

view page

18

JavaScript Arrays

v arrays store a sequence of items, accessible via an index

since JavaScript is loosely typed, elements do not have to be the same

type

§ to create an array, allocate space using new (or can assign directly)

items = new Array(10);

// allocates space for 10 items

items = new Array();

// if no size given, will adjust dynamically

items = [0,0,0,0,0,0,0,0,0,0]; // can assign size & values []

§ to access an array element, use [](as in C++/Java)

for (i = 0; i < 10; i++) {

items[i] = 0;

// stores 0 at each index

}

§ the lengthproperty stores the number of items in the array

for (i = 0; i < items.length; i++) {

document.write(items[i] + "<br>");

// displays elements

}

19

Array Example

<html>

<!–- CS443 js10.html 11.10.2011 -->

<head>

<title>Dice Statistics</title>

suppose we want to

simulate dice rolls and verify

even distribution

src="http://www.csc.liv.ac.uk/~martin/teaching/CS443/JS/rand

om.js">

</script>

</head>

keep an array of counters:

initialize each count to 0

<body>

numRolls = 60000;

diceSides = 6;

rolls = new Array(dieSides+1);

for (i = 1; i < rolls.length; i++) {

each time you roll X, increment

rolls[X]

rolls[i] = 0;

}

display each counter

for(i = 1; i <= numRolls; i++) {

rolls[randomInt(1, dieSides)]++;

}

for (i = 1; i < rolls.length; i++) {

document.write("Number of " + i + "'s = " +

rolls[i] + "<br />");

}

</script>

</body>

</html>

view page

20