Bài giảng Thiết kế và lập trình Web: Phần 1 – Đại học Hàng Hải

BỘ GIAO THÔNG VẬN TẢI TRƢỜNG ĐẠI HỌC HÀNG HẢI BỘ MÔN: KỸ THUẬT MÁY TÍNH KHOA: CÔNG NGHỆ THÔNG TIN

BÀI GIẢNG THIẾT KẾ VÀ LẬP TRÌNH WEB

TÊN HỌC PHẦN MÃ HỌC PHẦN TRÌNH ĐỘ ĐÀO TẠO DÙNG CHO SV NGÀNH

: THIẾT KẾ VÀ LẬP TRÌNH WEB : 17313 : ĐẠI HỌC CHÍNH QUY : CÔNG NGHỆ THÔNG TIN

HẢI PHÒNG - 2009

MỤC LỤC

Chƣơng 1: TỔNG QUAN .......................................................................................................... 5 1.1. Internet ............................................................................................................................ 5 1.1.1. Lịch sử mạng Internet .............................................................................................. 5 1.1.2. Một số khái niệm liên quan đến mạng Internet ....................................................... 5 1.1.3 World Wide Web ...................................................................................................... 6 1.1.4. Thƣ điệntử (E-mail) ................................................................................................. 9 1.2. Các kiểu mạng ................................................................................................................. 9 1.3. Kiến trúc Client – server ............................................................................................... 10 Chƣơng 2: NGÔN NGỮ SIÊU VĂN BẢN HTML ................................................................. 12 2.1. Khái niệm cơ bản về ngôn ngữ HTML ......................................................................... 12 2.2. Lập trình web với ngôn ngữ HTML .............................................................................. 12 2.2.1. Các thành phần cơ bản của html ............................................................................ 12 2.2.2. Cấu trúc tệp HTML ................................................................................................ 13 2.3. Các thẻ cơ bản trong HTML ......................................................................................... 13 2.3.1. Thẻ giải thích ......................................................................................................... 13 2.3.2. Các thẻ định dạng văn bản ..................................................................................... 13 2.3.3. Tạo liên kết (link) .................................................................................................. 16 2.3.4. Một số kí tự đặc biệt trong HTML......................................................................... 17 2.3.5. Các thẻ dùng thiết kế bảng ..................................................................................... 17 2.3.6. Các thẻ tạo Frame .................................................................................................. 18 2.3.7. Các thẻ dùng tạo Form ........................................................................................... 19 CHƢƠNG 3. NGÔN NGỮ KỊCH BẢN JAVASCRIPT ......................................................... 21 3.1. Mở đầu .......................................................................................................................... 21 3.2. Cú pháp cơ bản JavaScript ............................................................................................ 21 3.2.1. Kiểu dữ liệu............................................................................................................ 22 3.2.2. Hằng và biến .......................................................................................................... 23 3.2.3. Các toán tử ............................................................................................................. 23 3.2.4 Câu lệnh .................................................................................................................. 26 3.2.5 Câu lệnh điều kiện .................................................................................................. 26 3.2.6 Câu lệnh lặp ............................................................................................................ 28 3.3. Tƣơng tác giữa JavaScript và HTML ............................................................................ 30 3.3.1. Sử dụng thẻ - Lƣu : Khi một biến đƣợc sử dụng mà chƣa gán giá trị thì nó sẽ có kiểu undefined.

Một biến có thể đƣợc sử dụng để chứa giá trị với nhiều kiểu dữ liệu khác nhau.

3.2.3. Các toán tử

JavaScript cung cấp một số toán tử để thực hiện các chức năng toán học và các chức năng khác. Toán tử sử dụng một hay nhiều biến, hằng để tạo ra một giá trị mới, ta sử dụng các tóan tử để tạo ra các biểu thức phức tạp. Trong phần này ta sẽ giới thiệu sơ lƣợc những toán tử tƣơng tự nhƣ trong các ngôn ngữ lập trình Pascal, C và tập trung mô tả kỷ về các toán tử đặc trƣng của JavaScript.

Toán tử gán (=) dùng để gán một giá trị cho một biến. JavaScript có nhiều phƣơng pháp thực hiện toán tử gán :

X = 10; // giá trị 10 đƣợc gán cho biến X

- 23 -

total = mathematics + physics + chemistry // gán một biểu thức cho biến. a+ = 3 // dạng viết rút gọn, tƣơng tự nhƣ a = a+3; dạng rút gọn này có thể áp dụng cho các toán tử số học và các toán tử & (and) , ^ (xor), | (or)

follow;

Các Toán tử số học: +, -, *, /, %, ++, --, các toán tử một ngôi +, - Chú ý : ++x sẽ trả lại giá trị của x sau khi tăng x thêm 1 x++ sẽ trả lại giá trị của x trƣớc khi tăng x thêm 1 Ví dụ : Các toán tử so sánh : = =, !=, >, <, >=, <= Các toán tử logic : && (and), || (or) , ! (not) Toán tử string +, dùng để nối hai chuổi k tự. Ví dụ: "Da Nang"+" "+"City" trả về kết quả "Da Nang City" 41+" Le Duan" trả về kết quả "41 Le Duan" (chuyển kiểu dữ liệu trƣớc khi ghép chuổi) Lƣu : 2 - '1' = 1 (chuyển kiểu dữ liệu trƣớc khi thực hiện phép trừ) Toán tử Bit xử l các toán hạng nhƣ là một tập hợp 32 bit, kết quả trả về kiểu số chuẩn của JavaScript.

Ý nghĩa

Mỗi vị trí bit trả về 1 khi cả hai tóan hạng là 1 Mỗi vị trí bit trả về 1 khi một trong hai tóan hạng là 1 Đảo ngƣợc các bít của tóan hạng Mỗi vị trí bit trả về 1 khi chỉ có 1 trong hai tóan hạng là 1 Dịch sang trái Dịch sang phải Dịch sang phải và điền đầy các bit trống bằng 0

( 1010 | 1111 -> 1111)

Toán tử & | ~ ^ << >> >>> Các ví dụ : 10 & 15 trả về 10 ( 1010 & 1111 -> 1010) 10 | 15 trả về 15 10 ^ 15 trả về 5 (1010 ^ 1111 -> 0101) 15 << 3, có nghĩa dịch sang trái 3 bit của dãy 1111, kết quả là 1111000 (120) 15 >> 3, có nghĩa dịch sang phải 3 bit của dãy 1111, kết quả là 1 25>>>3, có nghĩa dịch sang phải 3 bit của dãy 11001 và điền 0 vào vị trí các bit trống, kết quả là

Một số toán tử đặc biệt: - Toán tử điều kiện có cú pháp: condition ? expr1 : expr2

- 24 -

condition là một biểu thức logic, nếu true thì toán tử trả về giá trị expr1, ngƣợc lại trả về giá trị expr2.

Ví dụ : status = (age>=18 ? "aldult" : "minor") - Toán tử , (comma) lƣợng giá cả hai toán hạng và trả về tóan hạng thứ hai. Ví dụ : x = (a++,c)*(b++,d) // tƣơng đƣơng với x = c*d - Toán tử typeof trả về một chuỗi k tự xác định kiểu dữ liệu của toán hạng, kiểu dữ liệu của toán hạng có thể là : số, chuổi, logic, đối tượng (object, array, null), function và undefined.

- Toán tử new đƣợc dùng để tạo ra một thể hiện (instance) của một kiểu đối tượng có hàm khởi dựng. Kiểu đối tƣợng này có thể là do ngƣời sử dụng định nghĩa, đối tƣợng dựng sẵn hay đối tƣợng mãng. Cú pháp :

: tên của thể hiện đối tƣợng : là một hàm xác định kiểu của đối tƣợng.

: là các giá trị của các thuộc tính của đối tƣợng.

objectName = new objectType (param1 [,param2] ... [,paramN]); Trong đó : objectName objectType parami - Toán tử this đƣợc dùng nhƣ một từ khóa tham chiếu đến một thuộc tính của đối tƣợng đƣợc gọi.

Ví dụ 1: Ví dụ 2: - Toán tử delete đƣợc dùng để xóa đi một đối tƣợng, thuộc tính của đối tƣợng hoặc một

phần tử của mãng. Cú pháp: delete objectName delete objectName.property delete objectName[index]

3.2.4 Câu lệnh

Các câu lệnh trong JavaScript cách nhau bằng dấu chấm phẩy (;), câu lệnh đƣợc chia ra hai loại: câu lệnh đơn giản và câu lệnh có cấu trúc.

// phép gán

// gọi hàm alert của đối tƣợng window

Câu lệnh đơn giản gồm có : phép gán, lời gọi hàm. Ví dụ: x = 7; count++; // thực hiện toán tử increment xInt = Math.round(y); // gọi hàm round của đối tƣợng Math và gán giá trị cho biến xInt window.alert("Kinh chao"); Câu lệnh có cấu trúc gồm có : khối lệnh và các câu lệnh điều khiển (control statements), lệnh with (dùng cho kiểu Object)

Khối lệnh đƣợc bao bởi cặp k hiệu { và }. Ví dụ: { x1 = (b + Math.sqrt(delta))/2*a; x1 = (b - Math.sqrt(delta))/2*a; window.document.write("Nghiệm là:" + x1 +"," + x2); } Các câu lệnh điều khiển : câu lệnh lựa chọn, câu lệnh lặp

3.2.5 Câu lệnh điều kiện

Trong JavaScript có hai câu lệnh điều kiện: câu lệnh if cho phép chƣơng trình chọn một trong hai lựa chọn và câu lệnh swich cho phép chƣơng trình chọn một trong nhiều lựa chọn.

Câu lệnh if Cú pháp : câu lệnh if đƣợc viết theo một trong bốn dạng sau:

  if (biểu thức logic) câu lệnh ; if (biểu thức logic)

câu lệnh ;

 

khối lệnh

if (biểu thức logic) { khối lệnh } if (biểu thức logic) { }

Ví dụ : if isNaN(x){ window.alert(x+" khong phai la mot so");

- 26 -

}

( Hàm isNaN kiểm tra một giá trị và trả về true nếu đó là một số, ngƣợc lại trả về false nếu không phải là một số)

Mệnh đề else : dùng trong trƣờng hợp có hai sự lựa chọn tùy theo giá trị của biểu thức logic. Dạng câu lệnh này đƣợc gọi là câu lệnh if-else. Cú pháp:

if (biểu thức logic) { khối lệnh 1; } else {khối lệnh 2;} Cấu trúc else if: ta thƣờng gọi các câu lệnh if lồng nhau, dùng để chọn một lựa chọn trong nhiều lựa chon. Có bốn cách viết câu lệnh if lồng nhau, ta thƣờng sử dụng hai cách viết sau:

if (biểu thức logic 1) { khối lệnh 1; } else { if (biểu thức logic 2) {khối lệnh 21;} else {khối lệnh 22;} } if (biểu thức logic 1) { khối lệnh 1;} else if (biểu thức logic 2;) { khối lệnh 21; } else {khối lệnh 22; }

window.alert("Phuong trinh vo nghiem");

window.alert("Phuong trinh co vo so nghiem);

Ví dụ : Giải phƣơng trình bậc nhất một ẩn ax + b = 0 Đọan script trên có thể thay bằng đọan mã sau, đơn giản và trong sáng hơn: if (a!=0){ x=(-b/a); window.alert("Nghiem la "+x); } else if (b!=0) window.alert("Phuong trinh vo nghiem"); else window.alert("Phuong trinh co vo so nghiem);

- 27 -

Câu lệnh switch Câu lệnh switch có vai trò giống nhƣ câu lệnh if-else, câu lệnh switch lƣợng giá của một biểu thức và so sánh giá trị này với một trong nhiều giá trị trong mệnh đề case để thực hiện lệnh và thóat khỏi câu lệnh switch với câu lệnh break. Cú pháp:

switch(biểu thức) { case gtrị1 : nhóm lệnh 1; break; . . . case gtrịN : nhóm lệnh N; break; default : nhóm lệnh N+1; } Từ khóa case là một nhãn, nó đánh dấu một điểm trong mã script để thực hiện một lệnh. Ví dụ : Nhập vào một mã số tỉnh / thành phố và in ra tên của tỉnh / thành phố đó.

3.2.6 Câu lệnh lặp

JavaScript có các câu lệnh lặp: câu lệnh while, câu lệnh do ...while,câu lệnh for và câu lệnh for ... in.

Để thoát ra khỏi một vòng lặp ta sử dụng lệnh break, để tiếp tục thực hiện vòng lặp dùng lệnh continue.

các lệnh; }

Câu lệnh while Cú pháp : while( biểu thức logic) { Ví dụ : Tính tổng các số nguyên nhập từ bàn phím, nhập 0 để kết thúc. Câu lệnh do ... while Cú pháp :do { } while (biểu thức logic); Ví dụ 1 : In ra màn hình các dòng tiêu đề từ 1 đến 6 (H1-H6) var i =1; do { document.write(""+"Tieu de thu "+i+""); i++; }while (i<=6); Câu lệnh for Cú pháp : for(khởi tạo; biểu thức điều kiện;thay đổi giá trị) {câu lệnh;} Phần khởi tạo dùng để khai báo các biến và gán giá trị khởi đầu.Phần biểu thức điều kiện để lƣợng giá trƣớc mỗi lần lặp. Phần thay đổi giá trị chứa mã lệnh sẽ đƣợc thực hiện sau mỗi lần lặp.

Các thành phần của lệnh for là tùy chọn, lệnh sau đây thực hiện vòng lặp vô tận : for( ; ; ){ // không thực hiện gì }

Ví dụ: Tính tổng từ 1 đếm 100. Ta có thể thực hiện bằng các script nhƣ sau. Câu lệnh for đầy đủ các khai báo: var sum = 0; for(i=1; i<=100; i++) {document.write(i+"
"); sum+=i;} alert(sum); Câu lệnh for thiếu khai báo về thay đổi giá trị var sum = 0; for(i=1; i<=100;) {document.write(i+"
"); sum+=i++;} alert(sum); Câu lệnh for với các khai báo có nhiều biểu thức, các biểu thức cách nhau dấu phẩy (,) var sum = 0; for(i=1, j=100; i<=50, j>50; i++, j--) {document.write(i+"-"+j+"
"); sum+=i+j;} alert(sum); Câu lệnh for sử dụng với lệnh continue Vd: In ra màn hình các số trong phạm vi từ 1 đến 100 chia hết cho 17

- 29 -

for(var i=1; i<=100; i++){ if (i % 17 !=0) continue; document.write(i+"
"); } Câu lệnh for .. in Cú pháp : for (biến in đối tƣợng) { lệnh ; } Đây là câu lệnh thƣờng đƣợc dùng để truy xuất các thuộc tính của một đối tƣợng mà chúng ta sẽ nghiên cứu ở chƣơng sau.

Ví dụ var sinhVien={ Hoten: "Nguyen Van Long", Lop: "03CTT01", DiChi: "Da Nang" }; // định nghĩa một đối tƣợng; for(var i in sinhVien){ document.write(sinhVien[i]+"
");}

3.3. Tƣơng tác giữa JavaScript và HTML

JavaScript là một ngôn ngữ kịch bản họat động trên client-side và server-side, nhƣng hiện nay nó đƣợc sử dụng để xây dựng các ứng dụng cho client-side, muốm vậy phải nhúng các mã kịch bản vào trong tệp tin tƣ liệu HTML. Có hai phƣơng pháp : sử dụng thẻ . Khi trình duyệt xử l tệp tin HTML, gặp thẻ , thông dịch và thực hiện lệnh, nếu có lỗi sẽ thông báo trên cửa sổ alert.

Ví dụ :  

- 30 -

Trong đó  Nơi viết các biến toàn cục, các hàm dùng trong trang web  Nơi gọi các hàm hay các đoạn mã JavaScript khác.

3.3.2. Sử dụng các tệp tin bên ngoài

{window.focus();} VietNamNet

- blur : ngƣợc lại với phƣơng thức focus(), đƣa cửa sổ đang mở ra phía sau.

- 32 -

- resizeTo(x, y) : thay đổi kích thƣớc cửa sổ với width =x và height=y. - resizeBy(m, n) : với m,n  Z, tăng / giảm kích thƣớc cửa sổ với m,n pixel. - moveTo(x,y) : di chuyển cửa sổ đến vị trí với tạo độ đỉnh trên trái đến (x,y) - moveBy(m.y) : tăng giảm tọa độ đỉnh trên trái của cửa sổ với m, n pixel -setInterval(câu lệnh JavaScript, số milli giây): thực hiện câu lệnh JavaScript trong

-setTimeout(câu lệnh JavaScript, số milli giây): thực hiện câu lệnh JavaScript một lần khoảng thời gian, hàm này trả lại thời gian để hàm clearInterval() có thể loại bỏ nó. sau một thời gian nhất định tính bằng milli giây.

-clearTimeout(số milli giây) : xóa bỏ đồng hồ báo giờ.

Các sự kiện

Có 5 sự kiện đƣợc kết hợp với đối tƣợng window: onblur, onfocus, onload, onresize,

Mô hình sự kiện trong IE và NN bao gồm hai thành phần , tuy nhiên về chi tiết có

- Đối tượng Event, đƣợc xem là một giao diện sự kiện để lập trình các script. - Danh sách các sự kiện, mỗi sự kiện đƣợc xem nhƣ là một thuộc tính nội tại của mỗi onunload. Ta sẽ nghiên cứu ở phần II.2 dƣới đây. Mô hình sự kiện (Event model) nhiều điểm khác nhau. thẻ HTML.

Đối tượng sự kiện (Event Object)

 Sự kiện là kết quả của một hành động do ngƣời sử dụng hay hệ thống tạo ra, JavaScript là một ngôn ngữ hƣớng sự kiện, có thể sử dụng để đón bắt các sự kiện này khi chúng xảy ra và thực hiện các hành động. Thông qua việc nắm bắt và xử l sự kiện, JavaScript có thể truy cập đến các đối tƣợng của BOM để cập nhật, thay đổi thuộc tính của đối tƣợng, tạo nên trang web tƣơng tác và động, đây chính là khả năng mà Microsoft IE gọi là DHTML.

 Đối tượng event Trong IE BOM : đối tƣợng event là một đối tƣợng con của đối tƣợng window còn trong NN BOM thì nó là một đối tƣợng ngang cấp với đối tƣợng window, và trong mỗi mô hình đối tƣợng tƣ liệu đối tƣợng event có các thuộc tính , phƣơng thức khác nhau đƣợc cho trong các bảng sau, đây là sự khác biệt quan trọng cần lƣu .

Các thuộc tính của đối tƣợng event: (IE 6: Event Object có 38 thuộc tính, NN 8: Event Object có 201 thuộc tính)

Properties

IE NN x x altKey

ctlKey x x

shiftKey x x

cancelBubble clientX, clientY screenX, screenY pageX, pageY offsetX, offsetY fromElement x x x x x x x x x Diễn tả Trả về true nếu ngƣời sử dụng ấn phím ALT trong khi sự kiện xảy ra và ngƣợc lại Trả về true nếu ngƣời sử dụng ấn phím CTRL trong khi sự kiện xảy ra và ngƣợc lại Trả về true nếu ngƣời sử dụng ấn phím SHIFT trong khi sự kiện xảy ra và ngƣợc lại Trả về true nếu muốn ngƣng sự nổi bọt sự kiện Tọa độ góc trên trái của trang web, tính bằng pixel Tọa độ của màn hình tại vị trí xảy ra sự kiện Tọa độ của cửa số trang tại vị trí xảy ra sự kiện Tọa độ của cửa số trang tại vị trí xảy ra sự kiện Trả về phần tử HTML mà từ đó con trỏ chuột đi ra

- 33 -

Diễn tả Properties

toElement keyCode srcElement target type keyCode Trả về phần tử HTML mà từ đó con trỏ chuột đi vào Phím đƣợc sử dụng để kích họat sự kiện Đối tƣợng mà sự kiện diễn ra trong đó Trả về đối tƣợng đầu tiên mà sự kiện diễn ra Loại sự kiện Trả về mã Unicode của phím đƣợc ấn xuống

IE NN x x x x x x x x x Ngăn chặn sự nổi bọt sự kiện (Event Bubbling) Trong BOM, các phần tử của trang web đƣợc tổ chức theo một cây phân cấp, do vậy một sự kiện xảy ra trên đối tƣợng con có thể đƣợc xảy ra trên đối tƣợng cha của nó, hiện tƣợng này gọi là sự nổi bọt sự kiện. Ngƣợc lại với sự nổi bọt sự kiện là sự chảy tràn sự kiện (Event Flow), sự kiện xảy ra ở cấp cao sẽ ảnh hƣởng đến các cấp thấp hơn.

Ví dụ:

PARAGRAPH

Nếu không có dòng lệnh (1) ở trên thì khi click trên PARAGRAPH sẽ lần lƣợt xảy ra sự kiện onClick trên thẻ

rồi trên thẻ và hai hộp hội thoại lần lƣợt xuất hiện. Dòng lệnh (1) có tác dụng ngăn chặn sự nổi bọt sự kiện, lúc này khi click trên PARAGRAPH chỉ có hàm CancelBubble đƣợc thực hiện mà thôi.

Trong script trên ta sử dụng các phƣơng thức và thuộc tính đƣợc cả hai trình duyệt chấp nhận : phƣơng thức getElementByID (sẽ trình bày trong mục Document Object) và thuộc tính event.cancelBubble (đã trình bày trên), kỹ thuật nhƣ vậy gọi là cross-browser.

Các sự kiện

Tập hợp các sự kiện là thành phần của BOM chứ không phải là thành phần của JavaScript, mỗi phần tử trên trang web đƣợc kết hợp với một số sự kiện và các sự kiện này khác nhau trên mỗi trình duyệt hay cách khác mỗi thẻ HTML có những thuộc tính sự kiện xác định. Lưu ý: giữa Microsoft và Netscape sử dụng các thuật ngữ liên quan đến mô hình sự kiện khá khác nhau, tuy nhiên nội dung đều nhƣ nhau: MS gọi event thì Netscape gọi event handler ...). Để thống nhất, trong giáo trình này chúng ta sử dụng thuật ngữ theo Microsoft. Cách sử dụng:

- 34 -

... Danh sách các sự kiện thông dụng đƣợc sử dụng cho IE và NN : NSD : Ngƣời sử dụng

Event onAbort Áp dụng cho phần tử image

onBlur

onFocus

onClick

onChange text area, field,

onLoad Mô tả & Sử dụng khi NSD dỡ bỏ việc nạp ảnh khi ckick vào một liên kết hay ấn nút lệnh Stop NSD rời khỏi tiêu điểm từ window, frame hay tất cả phần tử của form Đƣợc kích họat khi NSD thiết lập tiêu điểm trên đối tƣợng window, frame,... Đƣợc kích họat khi NSD ấn nút trái của chuột lên đối tƣợng Đƣợc kích họat khi NSD thay đổi giá trị của phần tử Đƣợc kích họat sau khi trình duyệt đã tải xong tƣ liệu HTML , applet hay image...

onUnLoad document, window, frame và cả các phần tử của form window, frame và cả các phần tử của form link, button, check box, v.v. text select list window, document, applet, framset, image, link, object, script, style window, framset Đƣợc bẩy (trigger) khi NSD loại bỏ tƣ liệu HTML khỏi trình duyệt.

layer ,

onMouseOut layer,

onMouseDown button, link, document Đƣợc kích họat khi NSD ấn một phím chuột button, link, document Đƣợc kích họat khi NSD thả một phím chuột onMouseUp textarea, link, onMouseOver image, button ... link, textarea, image, button window, frame onResize

onScroll window, frame

Đƣợc kích họat khi NSD di chuyển con trỏ chuột trên phần tử Đƣợc kích họat khi NSD di chuyển con trỏ chuột ra khỏi phần tử Đƣợc kích họat khi kích thƣớc đối tƣợng sắp bị thay đổi Đƣợc kích họat khi NSD sử dụng thanh cuộn của cửa sổ Đƣợc kích họat khi NSD ấn một phím Đƣợc kích họat khi NSD nhả một phím Đƣợc kích họat khi NSD gõ một phím onKeyDown onKeyUp onKeyPress textbox, text area textbox, text area textbox, text area

Ví dụ 1: Sử dụng sự kiện onLoad để tự động mở trang web khác xuất hiện phía trƣớc trang web hiện tại.

Đối tƣợng history

Đối tƣợng history lƣu giữ các URL mà ngƣời sử dụng đã mở bằng trình duyệt. window.history có các thuộc tính và phƣơng thức sau :

Thuộc tính

lenght : danh sách URL trong history current: URL của tƣ liệu HTML hiện hành

- - - next: URL của tƣ liệu HTML tiếp sau

- 35 -

- previous : URL của tƣ liệu HTML đƣợc mở liền trƣớc.

Các phương thức

forward() : đi đến trang kế tiếp

- back() : trở lại trang trƣớc - - go() : nhận tham số là một URL hay một số (-1,0,1) để đi đến trang xác định. Trong IE: -1 tƣơng ứng với trang trƣớc, 0: trang hiện tại, 1: trang kế tiếp.

Đối tƣợng location

Đối tƣợng location chứa các thông tin về giao thức, host, port, liên kết, đƣờng dẫn, tên tệp tƣ liệu HTML của tệp tƣ liệu HTML đƣợc xem từ client, đồng thời cho phép thiết lập URL cho đối tƣợng window .

Các thuộc tính

- host : tên webserver - hostname : tên miền - href : đƣờng dẫn đầy đủ của liên kết - pathname : đƣờng dẫn và tên tệp tin của liên kết - port : cổng URL - protocol : giao thức thực hiện liên kết. - search : trả về một chuỗi là thông tin nhận đƣợc từ một trang web khác gửi đến theo phƣơng pháp GET.

Để biết các thuộc tính của đối tƣợng location ta sử dụng đọan script sau: for(prop in location){ document.write(prop+": "+location[prop]+"
";}

Đối tƣợng navigator

Đối tƣợng navigator chứa các thông tin về trình duyệt: tên, phiên bản, tên mã, ngôn ngữ

thể hiện, hệ điều hành... Các thuộc tính (đƣợc IE và NN sử dụng): - Appname : tên trình duyệt - AppVersion : phiên bản của trình duyệt - appCodeName : tên mã của trình duyệt - platform : hệ điều hình của trình duyệt Để biết các thuộc tính của đối tƣợng navigator ta sử dụng đọan script sau: for(prop in navigator){ document.write(prop+": "+ navigator [prop]+"
";} Chú ý : Trong IE BOM navigator là đối tƣợng con của window, còn trong NN BOM

navigator ngang cấp với window. Đối tƣợng screen

Đối tƣợng screen chứa các thuộc tính liên quan đến độ phân giải màn hình, khả năng màu sắc và kích thƣớc màn hình tính bằng pixel:

- AvailHeight : Chiều cao của màn hình hệ thống, không kể thanh tác vụ - AvailWidth : Chiều rộng của màn hình hệ thống, không kể thanh tác vụ - ColorDepth : Số bít dùng để thể hiện màu cho mỗi pixel - Height : Độ phân giải tính theo chiều đứng của màn hình - Width : Độ phân giải tính theo chiều ngang của màn hình

- 36 -

Đọan script sau sẽ thay đổi kích thƣớc và canh giữa cửa sổ trình duyệt trên màn hình của ngƣời sử dụng :

var newTopLeftX=(screen.availWidth-640)/2.0; var newTopLeftY =(screen.availHeight-480)/2.0; window.resizeTo(640,480); window.moveTo(newTopLeftX, newTopLeftY);

Đối tƣợng document

document là đối tƣợng tƣ liệu, chứa tất cả phần tử HTML của trang web. Đây là đối tƣợng quan trọng nhất trong mô hình đối tƣợng trình duyệt, cho đến nay giữa IE và NN không có nhiều khác biệt: các đối tƣợng all, filter và selection chỉ có trong IE BOM còn đối tƣợng layer vốn là một đặc trƣng của NN, nay đã không tồn tại trong các phiên bản NN 6.0 hay cao hơn.

CÂU HỎI VÀ BÀI TẬP

1. Viết một script cho lại các mục của trình đơn để giải phƣơng trình bậc nhất, phƣơng trình bậc hai một ẩn

2. Viết một script cho phép nhập dữ liệu vào mãng. Hãy sắp xếp mãng đó theo phƣơng thức Sort và in ra kết quả (Sử dụng phƣơng thức document.write biến)

3. Viết một script cho phép nhập một chuỗi k tự. Cho biết độ dài của chuỗi, số từ trong chuỗi, xóa bỏ các khoảng trống không có nghĩa trong chuỗi.

4. Tạo một lịch gồm có các thông tin : ngày, tháng, năm để ngƣời sử dụng có thể tra cứu thông tin theo thời gian đã lựa chọn (không dùng đối tƣợng ActiveX)

thƣ viện JavaScript (Tạo lịch giống đối tƣợng ActiveX, nhƣng chỉ sử dụng JavaScript: tham khảo tại địa chỉ http://javascript.internet.com/calendars/dynamic.html hay trên http://www.echip.com)

- 37 -