Bài giảng Thiết kế Web - Chương VI: JavaScript

 JavaScript (4)

 new
Có ph¸p
objectvar = new object_type ( param1 [,param2]... [,paramN])

 With
with (object)
{
// statement
}
with (document){
write(“This is an example of the things that can be done ”);
write(“With the with statment. ”);
write(“This can really save some typing”);
}
Thiết kế web Khoa CNTT-LHU 26
C¸c lÖnh trong JavaScript (5)

 VÝ dô phÐp to¸n new:
function Nguoi(first_name, last_name, age, gt)
{
this.first_name=first_name;
this.last_name=last_name;
this.age=age;
this.gt=gt;
}
Nguoi1= new Nguoi("Thuy", "Dau Bich", "20", "Female");
Nguoi2= new Nguoi("Nang", "Nguyen Duc", "22", "Male");
document.write ("1. "+Nguoi1.last_name+" " + Nguoi1.first_name + "" );
document.write("2. "+Nguoi2.last_name +" "+ Nguoi2.first_name + "");
14
Thiết kế web Khoa CNTT-LHU 27
C¸c lÖnh trong JavaScript (6)

 C¸c hµm cã s½n
– eval: retvar=eval (bÊt kú biÓu thøc hîp lÖ trong Java)
var string=”10+ Math.sqrt(64)”;
document.write(string+ “=”+ eval(string));
– parseInt(string, c¬ sè)
– parseFloat(string)
var x1="12";
var x3;
x3=parseInt(x1,4); //x3=?
x3=parseInt(x1,6); // x3=?
Thiết kế web Khoa CNTT-LHU 28
C¸c lÖnh trong JavaScript (7)

M¶ng (Array)
– myArray = new InitArray (10)
• myArray[1] = "NghÖ An"
• myArray[2] = "Lµo"
function InitArray(numElements) 
{
this.length = numElements;
for (var x=1; x<=numElements; x++)
{
this[x]=0
}
return this;
}
15
Thiết kế web Khoa CNTT-LHU 29
Javascript - Hàm

 Cú pháp khai báo:
function Tên_hàm(thamso1, thamso2,..)
{
// Nội dung hàm
}

 Hàm trả về giá trị:
function Tên_hàm(thamso1, thamso2,..)
{
// Nội dung hàm
return (value);
}
Thiết kế web Khoa CNTT-LHU 30
Ví dụ hàm

 ðịnh nghĩa hàm:
function Sum(x, y)
{
tong = x + y; 
return tong; 
}

 Gọi hàm:
var x = Sum(30, 40);
16
Thiết kế web Khoa CNTT-LHU 31
Lớp ñối tượng

 Khai Khai báo lớp:
function Tên_lớp()
{
//Khai Khai báo biến thành viên
this.bien1 = value1; 
this.bien2 = value2;
}

 ðịnh nghĩa hàm thành viên của lớp:
Tên_Lớp.prototype.Tên_phươngthức = function()
{
//return value;
}
Thiết kế web Khoa CNTT-LHU 32
Ví dụ lớp
17
Thiết kế web Khoa CNTT-LHU 33
Kế thừa lớp ñối tượng
Thiết kế web Khoa CNTT-LHU 34
Kế thừa lớp ñối tượng
18
Thiết kế web Khoa CNTT-LHU 35
Sù kiÖn - Event (1)

 Event handler :
– 
– 
function kiemtra()
{
alert("ban da bam nut kiem tra");
}
Ðiền tên của bạn vào ñây: 
Thiết kế web Khoa CNTT-LHU 36
Sù kiÖn - Event (2)

 C¸c sù kiÖn th−êng x¶y ra:
khi ng−êi dïng ®ãng mét trangonUnLoad
khi ng−êi dïng ®−a ra mét form.onSubmit
khi ng−êi sö dông lùa chän mét tr−êng nhËp dữ liÖu trªn 
form.
onSelect
khi di chuyÓn chuét qua kÕt nèi hay anchor.onMouseOver
trang Web ®−îc load.onLoad
khi thµnh phÇn cña form ®−îc focus(lµm næi lªn).onFocus
khi gi¸ trÞ cña thµnh phÇn ®−îc chän thay ®æionChange
khi ng−êi dïng kÝch vµo c¸c thµnh phÇn hay liªn kÕt cña 
form.
onClick
input focus bÞ xo¸ tõ thµnh phÇn formonBlur
19
Thiết kế web Khoa CNTT-LHU 37
C¸c ®èi t−îng trong JavaScript

 String

 Number

 Array

 Date

Math

 navigator

 window

 Document.

 location

 History
Thiết kế web Khoa CNTT-LHU 38
ðối tượng String

 Thuộc tính:
– length : chiều dài của chuỗi
– constructor : Dùng ñể kiểm tra kiểu của biến
– prototype : Bổ sung prototype hàm cho một ñối tượng
– Nối kết các chuỗi bằng toán tử “+”
var sTenBien = new String();
sTenBien = 256;
if(sTenBien.constructor == String)
{
document.writeln("sTenBien la mot chuoi co chieu dai la:" + sTenBien.length);
}
else
{
document.writeln("sTenBien la mot so co gia tri la: " + sTenBien);
}
20
Thiết kế web Khoa CNTT-LHU 39
ðối tượng String
s1 = "foo" //creates a string literal value
s2 = new String("foo") //creates a String object

 Sự khác biệt:
s1 = "2 + 2" //creates a string literal value
s2 = new String("2 + 2")//creates a String object
eval(s1) //returns the number 4
eval(s2) //returns the string "2 + 2"

 Phương thức
– stringObj.anchor(anchorString) – tạo Bookmark
– strVariable.link(URL)
– string1.concat([string2[, string3[,... [, stringn]]]])
– toLowerCase, toUpperCase
var txt="Hello world!“
document.write(txt.length)
document.write(txt.toUpperCase())
Thiết kế web Khoa CNTT-LHU 40
ðối tượng String – Các phương thức
21
Thiết kế web Khoa CNTT-LHU 41
Ví dụ các phương thức trong String
Thiết kế web Khoa CNTT-LHU 42
Ví dụ các phương thức trong String
22
Thiết kế web Khoa CNTT-LHU 43
Javascript – Number

 Kiểu dữ liệu số nguyên, số thực

 Bắt ñầu bằng ký số “0” : Số nguyên hệ bát phân

 Bắt ñầu bằng “0x” : Số nguyên hệ thập lục phân
VD : Cho biết giá trị thập phân tương ứng của các
number sau :
– 125 = ?
– 010 = ? 014 = ? 028 = ?
– 0xFF = ? 0x3.12 = ?
Thiết kế web Khoa CNTT-LHU 44
Number – Phương thức

 toExponential
numObj.toExponential([fractionDigits])

 toFixed
numObj.toFixed([fractionDigits])

 toPrecision
numObj.toPrecision ([precision])

 toString
objectname.toString([radix])
radix : [2; 8; 10; 16]
– Ví dụ: dùng các hàm với số 123.4267782
23
Thiết kế web Khoa CNTT-LHU 45
ðối tượng array

 arrayObjectName = new Array(element0, element1, ..., elementN)
arrayObjectName = new Array(arrayLength)

 emp[0] = "Ryan Dias"
emp[1] = "Graham Browne"
emp[2] = "David Greene“

myArray = new Array("Hello", myVar, 3.14159)

 Two-Dimensional Arrays 
a = new Array(4)
for (i=0; i < 4; i++) {
a[i] = new Array(4)
for (j=0; j < 4; j++) {
a[i][j] = "["+i+","+j+"]"
}
} 
Thiết kế web Khoa CNTT-LHU 46
Một số phương thức mảng

 Join –Ghép các phần tử thành 1 chuỗi.

 Pop – Lấy phần tử cuối

 Push – Thêm 1 (hoặc nhiều phần tử) vào cuối mảng

 Reverse - ðổi phần tử ñầu – cuối

 Shift – Xóa phần tử ñầu khỏi mảng

 Sort – Sắp xếp các phần tử trong mảng

 Concat – nối mảng

 toString – chuyển mảng sang dạng String
24
Thiết kế web Khoa CNTT-LHU 47
Ví dụ mảng
Thiết kế web Khoa CNTT-LHU 48
Mảng ña chiều

 Ví dụ về mảng 2 chiều
MyArray = new Array(5,5);
MyArray[0, 0] = "Ryan Dias";
MyArray[0, 1] = 1;
MyArray[1, 0] = "Mike Donne";
MyArray[1, 1] = 2;
document.write ("The name is " + MyArray[3, 0]);
document.write(" and the code is " + MyArray[3, 1]);

 JavaScript hỗ trợ ñến 60 chiều
25
Thiết kế web Khoa CNTT-LHU 49
ðối tượng Date
dateObjectName = new Date([parameters])

 Các constructor
– var dateObj = new Date()
– var dateObj = new Date(dateVal)
– var dateObj = new Date(year, month, 
date[,hours[,minutes[,seconds[,ms]]]])
– var dateObj = new Date(dateString)
Ví dụ:
var my_date=new Date("October 12, 1988 13:14:00")
var my_date=new Date("October 12, 1988")
var my_date=new Date(88,09,12,13,14,00)
var my_date=new Date(88,09,12)
today = new Date(). 
Thiết kế web Khoa CNTT-LHU 50
Các phương thức của Date

 getDate(), getDay(), getMonth(), getYear(),

 getTime(), getHours(), getMinutes(), getSeconds()

 setDate, setFullYear, setHours, setMinutes, setMonth, 
setSeconds, setTime, setYear,

 toDateString, toString

 Tham khảo trang web 
pt/diaries/15/2.html
26
Thiết kế web Khoa CNTT-LHU 51
ðối tượng Math

 Sử dụng ñối tượng Math cho các hàm toán học

Math.abs(number)

Math.cos(number), Math.acos(number)

Math.tan(number), Math.atan(number)

Math.ceil(number)

Math.floor(number)

Math.max([number1[, number2[. . . [, numberN]]]])

Math.random( )

Math.round(number )

Math.sqrt(number ) ,
Thiết kế web Khoa CNTT-LHU 52
Window object

 Tồn tại khi mở 1 tài liệu HTML

 Sử dụng ñể truy cập thông tin window

 ðiều khiển các sự kiện xảy ra trong window

 Nếu tài liệu ñịnh nghĩa nhiều frame, browser tạo 1 window 
object cha và các window object con cho từng frame
27
Thiết kế web Khoa CNTT-LHU 53
Window methods

 alert()
– window.alert("How are you doing?");

 prompt()
– window.prompt("Please provide your name","optional text");

 confirm()
– window.confirm("Are you sure you want to do this?");

 blur() - Move This Window to Back

 focus() - Bring Main Window to Front

 open()
– window.open("URL", "window name", "attributes");
– newWin=window.open("","","width=300,height=250");
Thiết kế web Khoa CNTT-LHU 54
Window methods

moveBy(): di chuyển cả window ñi
– window.moveBy(xDistance,yDistance);
<input type="Button" value="Move Window" 
onclick="window.moveBy(50,50);"> 

moveTo(): Di chuyển ñến vị trí so với góc màn hình (0,0)
– window.moveTo(xDistance,yDistance);

 resizeBy()
– window.resizeBy(xSize,ySize);

 resizeTo()
– window.resizeTo(xWidth,yLength);
28
Thiết kế web Khoa CNTT-LHU 55
Window Object Event Handlers
<body onLoad="alert('This page has finished loading!)"
window.onload=functionName;
<body onUnload="alert('You're leaving so soon?)"

 onResize

 onError

 onBlur

 onFocus
C¸c ch−¬ng tr×nh xö lý sù kiÖn
onLoad - XuÊt hiÖn khi cöa sæ kÕt thóc viÖc t¶i.
onUnLoad - XuÊt hiÖn khi cöa sæ ®−îc lo¹i bá.
Thiết kế web Khoa CNTT-LHU 56
Document object

 Document Object biểu diễn cho tài liệu HTML

 Dùng ñể lấy thông tin về tài liệu, các thành phần HTML và xử 
lý sự kiện

 Properties
– aLinkColor
– bgColor
– Body
– fgColor
– linkColor
– Location
– Title
– URL
– vlinkColor

Methods
– clear
– close
– open
– write
– writeln
29
Thiết kế web Khoa CNTT-LHU 57
History Object

 History Object cung cấp danh sách các URL ñã ñược duyệt 
bởi người dùng

Methods
– Back
– Forward
– go

 History.go(-1) -- history.back()

 History.go(+1) – history.forward()
Thiết kế web Khoa CNTT-LHU 58
Location Object

 Chứa thông tin về URL hiện tại

 Properties
– Hostname
– href, 

Methods
– Reload
– 
30
Thiết kế web Khoa CNTT-LHU 59
HTML Objects

 Mỗi form trong 1 document sẽ tạo ra 1 ñối tượng form

 1 document có thể có nhiều form, ñược lưu trong 1 forms array (bắt ñầu từ 
form[0])

 Truy cập ñến form
– document.forms[0]
– document.formName

 Truy cập ñến các thành phần của form
– document.forms[0].item[0].value
– document.formName.InputName.value
Thiết kế web Khoa CNTT-LHU 60