›
›

Bài giảng Thiết kế và lập trình web (Phần 1)

pdf 38 trang ngocly 120
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Thiết kế và lập trình web (Phần 1)", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pdfbai_giang_thiet_ke_va_lap_trinh_web_phan_1.pdf

Nội dung text: Bài giảng Thiết kế và lập trình web (Phần 1)

  1. 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 : THIẾT KẾ VÀ LẬP TRÌNH WEB MÃ HỌC PHẦN : 17313 TRÌNH ĐỘ ĐÀO TẠO : ĐẠI HỌC CHÍNH QUY DÙNG CHO SV NGÀNH : CÔNG NGHỆ THÔNG TIN HẢI PHÒNG - 2009
  2. 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ẻ 30 3.3.2. Sử dụng các tệp tin bên ngoài 31 3.4. Các đối tƣợng của trình duyệt 31 Chƣơng 4: NGÔN NGỮ KỊCH BẢN VBSCRIPT 38 4.1. Mở đầu 38 4.2. Cú pháp cơ bản của VBScrip 38 4.2.1. Khai báo hằng, biến, mảng 38 4.2.2. Chú thích 39 4.2.3. Các toán tử 39 4.2.4. Các cấu trúc điều khiển 39 - 1 -
  3. 4.2.5. Hàm và Thủ tục 40 4.3. Tƣơng tác giữa VBScript và HTML 41 4.4. Các đối tƣợng của trình duyệt 42 4.4.1. Đối tƣợng ERR 42 4.4.2. Đối tƣợng kịch bản DICTIONARY 43 4.4.3. Đối tƣợng FileSystemObject 43 Chƣơng 5: ACTIVE SERVER PAGE. 46 5.1. Mô hình các lớp 46 5.2. Thiết lập WebServer 47 5.2.1. ASP (Active Server Page) 47 5.2.2. Trang ASP 47 5.2.3. IIS (Internet Information Server) 48 5.3. Xử l các yêu cầu của IIS 48 5.4. Mô hình đối tƣợng 49 5.5. Các đối tƣợng của ASP 50 5.5.1. Đối tƣợng Application 50 5.5.2. Đối tƣợng AspError 52 5.5.3. Đối tƣợng ObjectContext 52 5.5.4. Đối tƣợng Response 53 5.5.5. Đối tƣợng Request 55 5.5.6. Đối tƣợng Server 58 5.5.7. Đối tƣợng Session 60 - 2 -
  4. YÊU CẦU VÀ NỘI DUNG CHI TIẾT Tên học phần: Thiết kế và lập trình Web Loại học phần: 4 Bộ môn phụ trách giảng dạy: Kỹ thuật máy tính Khoa phụ trách: CNTT Mã học phần: 17313 Tổng số TC: 3 TS tiết L thuyết Thực hành/Xemina Tự học Bài tập lớn Đồ án môn học 60 45 15 0 x 0 Điều kiện tiên quyết: Sinh viên phải học xong các học phần sau mới đƣợc đăng k học phần này: Mạng máy tính, Truyền số liệu. Mục tiêu của học phần: - Cung cấp các kiến thức cơ bản về dịch vụ Web - Xây dựng Website. Nội dung chủ yếu - Mô hình mạng, ngôn ngữ lập trình. - Xây dựng site Nội dung chi tiết của học phần: PHÂN PHỐI SỐ TIẾT TÊN CHƢƠNG MỤC TS LT BT TH KT Chƣơng I. Tổng quan 3 7 1.1. Internet 1 1.2. Các kiểu mạng 1 1.3. Kiến trúc Web 1 Chƣơng II. Ngôn ngữ siêu văn bản HTML 8 5 3 2.1. Khái niệm cơ bản về ngôn ngữ HTML 1 2.2. Lập trình Web với ngôn ngữ HTML 1 2.3. Các thẻ cơ bản trong HTML 3 Chƣơng III. Ngôn ngữ kịch bản JavaScript. 10 6 3 1 3.1. Mở đầu 0,5 3.2. Cú pháp cơ bản JavaScript 2 3.3. Tƣơng tác giữa JavaScript và HTML 2 3.4. Các đối tƣợng của trình duyệt 1,5 Chƣơng IV. Ngôn ngữ kịch bản VBcript. 24 6 15 3 4.1. Mở đầu 0,5 4.2. Cú pháp cơ bản VBScript 2 4.3 Tƣơng tác giữa VBScript và HTML 2 4.4. Các đối tƣợng của trình duyệt 1,5 Chƣơng V. Active Server Page. 17 10 6 1 5.1. Mô hình các lớp 2 5.2. Thiết lập Web Server 2 5.3. Xử l các yêu cầu của IIS 2 5.4. Mô hình đối tƣợng 2 5.5. Các đối tƣợng ASP 2 Nhiệm vụ của sinh viên : Tham dự các buổi thuyết trình của giáo viên, tự học, tự làm bài tập do giáo viên giao, tham dự các buổi thực hành, các bài kiểm tra định kỳ và cuối kỳ, hoàn thành bài tập lớn theo yêu cầu. - 3 -
  5. Tài liệu học tập : - Andy Budd, Cameron Moll và Simon Collison - CSS Mastery Advanced Web Standards Solutions – Nhà xuất bản Apress 2006 - Paul Wilton - Beginning JavaScript. Second Edition – Nhà xuất bản Wrox, 2004 John Gosney, ASP Programming for the absolute beginner – Nhà xuất bản No Starch Press, 2002 - Scott Mitchell và James Atkinson, Teach yourself Active Server Pages 3.0 – Nhà xuất bản SAMS,2000 - Jason Butler , ASP Data Access for Beginners – www.w3schools.com - Nguyễn Thị Thanh Trúc – Thiết kế và lập trình Web với ASP – Đại học Quốc gia thành phố Hồ Chí Minh, 2003 Hình thức và tiêu chuẩn đánh giá sinh viên: - Đánh giá dựa trên tình hình tham dự buổi học trên lớp, các buổi thực hành, điểm kiểm tra thƣờng xuyên và điểm kết thúc học phần. - Hình thức thi cuối kỳ : thi viết. Thang điểm: Thang điểm chữ A, B, C, D, F Điểm đánh giá học phần Z = 0.4X + 0.6Y. Bài giảng này là tài liệu chính thức và thống nhất của Bộ môn Kỹ thuật máy tính, Khoa Công nghệ Thông tin và đƣợc dùng để giảng dạy cho sinh viên. Ngày phê duyệt: 15 / 6 / 2010 Trƣởng Bộ môn: ThS. Ngô Quốc Vinh - 4 -
  6. Chƣơng 1: TỔNG QUAN 1.1. Internet 1.1.1. Lịch sử mạng Internet Mạng Internet là mạng máy tính lớn nhất trên toàn cầu. Internet hay gọi tắt là NET đƣợc xem là mạng của các mạng (network of networks) dùng để trao đổi thông tin trên toàn thế giới, còn gọi là Siêu xa lộ thông tin (Information Superhighway). Ngày nay mạng Internet là một mạng công cộng kết nối hàng trăm triệu máy tính trên toàn thế giới. Về mặt vật l , mạng Internet sử dụng một phần của toàn bộ các tài nguyên của mạng viễn thông công cộng; về mặt kỹ thuật, mạng Internet sử dụng tập các giao thức TCP/IP do Vinton Gray Cerf và Robert Kahn xây dựng từ năm 1973 tại Trƣờng Đại học Stanford. Hai mô phỏng của công nghệ mạng Internet là Intranet và Extranet. Từ năm 1969, Bộ Quốc phòng Mỹ đã xây dựng mạng ARPANET, (ARPA là từ viết tắt của Advanced Research Projects Agency), tƣởng ban đầu của mạng Arpanet là dùng để trao đổi thông tin giữa các cơ quan chính phủ và các trung tâm nghiên cứu của các trƣờng đại học Mỹ. Điều đặc biệt ở mạng này là mạng vẫn hoạt động khi một phần của nó bị phá hủy trong các trƣờng hợp chiến tranh hoặc thiên tai. Sau đó mạng ARPANET chia làm hai mạng: MILINET chỉ dùng cho các mục đích quân sự Một mạng mới gọi là ARPANET dùng cho các mục đích phi quân sự Đến năm 1972, một mạng khác là CSNET (Computer Science Research Network) đƣợc nối với ARPANET. CSNET đƣợc tạo ra để liên kết các mạng độc lập khác. Tại thời điểm này đƣợc xem là ngày khai sinh ra mạng INTERNET. Vào năm 1980, tổ chức National Science Foundation đã xây dựng mạng NSFNET để liên kết đến các mạng chính, đây là mạng có tốc độ cao, dùng để kết nối các siêu máy tính trung tâm của NSF. Công nghệ mạng ngày càng phát triển, nhiều mạng mới đƣợc hình thành và kết nối với mạng ARPANET, CSNET và NSFNET. Tất cả mạng này kết nối với nhau và trở thành một mạng có tên gọi là INTERNET. Cuối cùng hai mạng Arpanet và Csnet ngƣng họat động, mạng Nsfnet trở thành mạng chính nối kết các mạng khác trên Internet. 1.1.2. Một số khái niệm liên quan đến mạng Internet Địa chỉ IP Các máy tính trong mạng Internet/ Intranet trao đổi thông tin với nhau theo chuẩn truyền thông gọi là giao thức TCP/IP. Đây là giao thức cung cấp dịch vụ truyền các gói dữ - 5 -
  7. liệu (IP datagrams) theo địa chỉ IP bằng cách chọn đƣờng (routing) trong mạng thông qua cổng kết nối (gateway). Để việc trao đổi thông tin trong mạng Internet thực hiện đƣợc, mỗi máy tính trong mạng cần phải đƣợc cấp một định danh (Identify) để phân biệt các máy với nhau, mỗi máy đƣợc gán cho một nhóm số gọi là địa chỉ IP (IP Address) hay nói cách khác địa chỉ IP dùng xác định đối tƣợng nhận và gửi thông tin trên Internet. Địa chỉ IP gồm 4 nhóm số thập phân có giá trị từ 0 đến 255, phân các nhau bằng dấu chấm (.) Trên thực tế, địa chỉ IP hiện tại (IP version 4) có 32 bit chia thành 4 octet (mỗi octet có 8 bit), các octet tách biệt nhau bằng dấu chấm (.) Ví dụ : 11001011. 01100010. 01010011.00110101 Để tiện việc quản l và phân phối địa chỉ, ngƣời ta chia các địa chỉ IP thành 3 phần : 31 0 Thứ tự các bit Class ID Network ID Host ID Các địa chỉ IP đƣợc chia thành 5 lớp tùy theo giá trị của 3 byte đầu tiên: A,B,C,D,E. Riêng lớp D và E, Tổ chức Internet đang để dành cho các mục đích khác, không phân phối. Địa chỉ IP tự nó không chứa thông tin về mô tả mạng, subnet đi kèm với mỗi địa chỉ cung cấp thông tin này. Class Vùng địa chỉ l thuyết Số mạng sử Số máy chủ trên Subnet dụng tối đa từng mạng A 0.0.0.0 đến 127.0.0.0 126 16.777.214 255.0.0.0 B 128.0.0.0 đến 191.255.0.0 16.382 65.534 255.255.0.0 C 192.0.0.0 đến 223.255.255.0 2.097.150 254 255.255.255.0 Địa chỉ IP trên Internet do ICANN chịu trách nhiệm phân bổ. Địa chỉ IP thƣờng đƣợc các ISP (Internet Service Provider) quản l . Trung tâm mạng Internet vùng Châu Á - Thái bình dƣơng (APNIC) phân phối cho VDC 8 địa chỉ ở lớp C, có thể phân phối cho 8 mạng từ 203.162.0.0 đến 203.162.7.0. Ở Việt Nam, cơ quan VNNIC (Vietnam Internet Network Inforrmation Center) thuộc Bộ Bƣu chính – Truyền thông chịu trách nhiệm quản l tên miền, địa chỉ IP (xem Do sự cạn kiệt địa chỉ IP theo IPv4 (sử dụng 32 bit); hiện nay tại nhiều nƣớc đã dùng IPv6 (sử dụng 128 bit) để cấp phát địa chỉ IP. Tên miền (Domain name) Do địa chỉ IP là một dãy số, không có tính gợi nhớ, trong mạng Internet ngƣời ta thƣờng sử dụng dịch vụ tên miền (Domain Name Service) cho các máy trong mạng. Mỗi tên miền có dạng : Host.Subdomain.Domain Trong đó : Host là tên máy, Domain là tên của một tổ chức mạng lớn, nhƣ các Cty đa quốc gia, các quốc gia, Subdomain là tên một tổ chức nhỏ hơn trong domain. Tên miền cấp 1 bao gồm các mã quốc gia của các nƣớc tham gia Internet đƣợc quy định bằng 2 chữ cái theo tiêu chuẩn ISO-3166, ví dụ Việt Nam là vn, Nhật bản là jp, Pháp là fr, Anh quốc là uk, CHLB Nga là ru và 5 lĩnh vực dùng chung toàn cầu: .com : (commercial) công ty thƣơng mại .edu : (education) các trƣờng học, tổ chức giáo dục .net : (network) các mạng .int : (international organizations) các tổ chức quốc tế .org : (other organizations) các tổ chức khác. 1.1.3 World Wide Web Lịch sử - 6 -
  8. World Wide Web (gọi tắt là Web): Là hệ thống các server trên internet hỗ trợ riêng cho những tƣ liệu đƣợc định dạng bằng ngôn ngữ đánh dấu gọi là HTML (HyperText Markup Language) mà mọi ngƣời có thể truy cập đƣợc thông qua các máy tính nối mạng internet. Những tƣ liệu này cho phép liên kết đến các tƣ liệu khác nhƣ các tệp tin đồ họa, âm thanh, video. Chú rằng không phải tất cả các server trên Internet là World Wide Web, do vậy Web không đồng nghĩa với Internet, tuy rằng Web là một tập con của Internet, là một ứng dụng quan trọng nhất trên Internet. Có nhiều định nghĩa khác nhau về web, Bách khoa toàn thư Việt Nam ( định nghĩa web là “dịch vụ thông tin trên mạng Internet thâm nhập đƣợc thông qua một hệ siêu văn bản, cho phép kết nối các tƣ liệu khác nhau lƣu trữ ở những địa điểm khác nhau trên toàn cầu”, còn wikipedia định nghĩa web là “một mạng toàn cầu, là không gian thông tin toàn cầu mà mọi ngƣời có thể truy cập (đọc/viết) qua máy tính nối mạng internet”. Web ra đời từ một dự án nghiên cứu tại Trung tâm nghiên cứu hạt nhân Châu Âu (CERN, Thụy Sĩ) vào năm 1989 do Berners-Lee lãnh đạo. Dự án này phát triển giao thức truyền và nhận các tệp tin siêu văn bản theo mô hình client-server gọi tắt là HTTP (HyperText Transfer Protocol), sau đó công bố thƣ viện chƣơng trình nguồn của giao thức này cho các nhà phát triển khác để xây dựng các phần mềm duyệt Web. Web dựa trên ba cơ chế để có thể cho phép ngƣời sử dụng truy cập đến các nguồn tài nguyên trên web, đó là giao thức, URL và HTML: Giao thức (Protocols) HTTP. Địa chỉ (Address) còn gọi là URL (Uniform Resourse Locators), đƣợc sử dụng để định danh (identify) các trang web và các nguồn tài nguyên trên web. Một URL cơ bản gồm một scheme (chỉ đến giao thức đƣợc sử dụng), tên máy chủ, đường dẫn và tên tệp tin nhƣ sau: Scheme Tên Web server Đƣờng dẫn Tên tệp tin Trong trƣờng hợp URL kết thúc với dấu gạch xéo tới (slash, /) mà không có tên tệp tin nằm sau, sẽ chỉ đến tệp tin mặc định trong thƣ mục cuối cùng (trong ví dụ này là web). Một số tệp tin mặc định là index.htm hay default.htm. URL tuyệt đối : bao gồm toàn bộ đƣờng dẫn đến tệp tin, URL tuyệt đối thƣờng đùng để liên kết đến một tài nguyên ngoài web site. URL tương đối : mô tả ngắn gọn địa chỉ của tệp tin kết nối trong cùng web site chứa tệp tin hiện hành (tệp chứa liên kết). Các scheme khác nhƣ: ftp để truyền tệp tin trên mạng, gopher dùng để tìm thông tin, news để gửi và nhận tin trong nhóm, mailto để gửi email, file để dẫn đến một tệp tin trong đĩa cứng cục bộ. Ví dụ: news:sos.culture.catalan mailto:[email protected] file:///d:/thuchanh/web/chuong1.htm Các khái niệm liên quan: Web page : trang web, trên world wide web thông tin đƣợc hiển thị dƣới dạng trang web, một web page có thể chứa văn bản đã đƣợc định dạng, hình ảnh, âm thanh, video v.v. Một trang web còn chứa các siêu liên kết (hyperlink), siêu liên kết cho phép ngƣời sử dụng truy cập đến một trang web khác hay một tài nguyên khác trong cùng website hay trên các website khác. - 7 -
  9. HTML document: là một tệp tin văn bản mã ASCII đƣợc viết bằng ngôn ngữ HTML, tệp tin tƣ liệu HTML đƣợc gọi là mã nguồn (source code) của trang web. Tệp tin tƣ liệu HTML có phần mở rộng .htm hay .html Website : Một vị trí trên world wide web, đƣợc đặc trƣng bởi một tên miền, mỗi wesite có một trang chủ (home page) là trang web đầu tiên mà ngƣời sử dụng gặp đầu tiên khi truy cập vào website, trang chủ đóng vai trò nhƣ là mục lục chỉ đến các tƣ liệu khác trong website hay địa chỉ của các website liên quan. Một website còn chứa các thƣ mục, các tệp tin, các trang web khác. Website của các tổ chức hay cá nhân trên mạng bao gồm tập hợp các trang web liên quan đến tổ chức này. Web browser (còn gọi là web client): Trình duyệt web, là một phần mềm ứng dụng dùng để định vị và hiển thị các trang web.Có 2 loại web browser: trình duyệt dựa trên văn bản, chỉ hiển thị các thông tin dƣới dạng văn bản nhƣ Lynx; trình duyệt đồ họa, hỗ trợ hypermedia nhƣ âm thanh, hình ảnh, video các web browser đồ họa thông dụng hiện nay: Microsoft Internet Explorer, Netscape Navigator, Mozilla Firefox, Opera Web editor: trình soạn thảo web, là một phần mềm soạn thảo các trang web. Các phần mềm FrontPage, Dreamwever là các phần mềm soạn thảo trang web một cách trực quan.Các phần mềm Edit Plus, HTML Kit cho phép trực tiếp tạo ra các tệp tƣ liệu HTML. Search Engines :Máy tìm kiếm , là chƣơng trình tìm kiếm các tƣ liệu trên world wide web dựa và các từ khóa và trả về danh sách các tƣ liệu phù hợp với từ khóa. Các máy tìm kiếm họat động dựa vào các Spider (con nhện) để có thể thu thập các tƣ liệu cần thiết, một số máy tìm kiếm khác sử dụng Indexer (bộ lập chỉ mục) dựa trên các từ chứa trong các tƣ liệu. Web portal: một trong những ứng dụng web quan trọng hiện nay, nhất là ứng dụng trong lĩnh vực chính phủ điện tử. Web portal còn đƣợc gọi là cổng thông tin (portal) bao gồm một mãng các nguồn tài nguyên và dịch vụ nhƣ e-mail, forums, máy tìm kiếm và các dịch vụ trực tuyến (online service) khác Web portal đầu tiên trên thế giới là AOL; tại Việt Nam các web portal là: www.hanoi.gov.vn (cổng thông tin của UBND thành phố Hà Nội), www.egov.gov.vn (cổng thông tin của Chính phủ Việt Nam) Những ứng dụng web (web-base applications) là những chƣơng trình ứng dụng dựa trên cơ sở Internet và giao thức HTTP nhƣ: E-commerce, E-learning, E-Supermarket, On-line courses mà ta gọi chung là E* Webblog (còn gọi là blog) là một ứng dụng dựa trên nền tảng của web, còn gọi là trang web cá nhân dùng để tạo nhật k trực tuyến, có thể trao đổi thông tin. Tiền thân của blog là các forum (diễn đàn trực tuyến). Ngày nay có nhiều hãng phần mềm cũng đã xây dựng các server phục vụ xây dựng webblog. RSS là từ viết tắt của Really Simple Syndication (dịch vụ cung cấp thông tin cực kỳ đơn giản), dịch vụ này cho phép ngƣời sử dụng tìm kiếm thông tin cần quan tâm và đăng k để đƣợc gửi thông tin đến trực tiếp. Ngày nay khối lƣợng web site ngày càng nhiều, việc duyệt web để tìm kiếm thông tin cần thiết khá mất thời gian, giờ đây ta có thể sử dụng tiện ích này thông qua một dịch vụ cung cấp thông tin mới gọi là RSS. Hiện nay, dịch vụ RSS ngày càng phổ biến. Các trang web nhƣ BBC, CNN, New York Times, Tuổi trẻ, Thanh niên, Người lao động đang cung cấp RSS. Để sử dụng dịch vụ này ta cần phải có một phần mềm đọc và hiển thị tệp tin RSS (viết bằng ngôn ngữ XML), các phần mềm đó gọi là RSS Feed hoặc New Feed. Hiện tại có một số trình duyệt đã tích hợp sẵn tính năng đọc tin RSS nhƣ Firefox, Opera, Safari. Nếu dùng Microsoft Internet Explorer cần cài đặt một plug-in hỗ trợ đọc RSS nhƣ Pluck (tải từ Web server và địa chỉ của web server : các trang web mà ngƣời sử dụng có thể truy cập đƣợc trên Internet đƣợc lƣu trữ trên một máy tính đặc biệt đƣợc gọi là web server. Mỗi web server đƣợc định danh bằng một địa chỉ có dạng: www.tenwebsite.kiểuwebsite.mãquốcgia - 8 -
  10. Riêng đối với các web server đặt tại Mỹ không có mã quốc qua. Một địa chỉ website đƣợc xem nhƣ là một URL. Internet và Web khác nhau nhƣ thế nào? Internet là mạng của các mạng. Về cơ bản nó đƣợc tạo thành từ những máy tính và các đƣờng dây cáp. Những gì mà Vint Cerf và Bob Kahn đã làm là hình dung ra hệ thống đó nhằm gửi đi những gói nhỏ thông tin. Nhƣ Vint chỉ ra, mỗi gói thông tin giống nhƣ một tấm thiệp với một địa chỉ ghi trên đó. Nếu bạn ghi đúng địa chỉ trên “gói tin này” và trao cho bất kỳ máy tính nào đang kết nối Internet, các chiếc máy tính sẽ xác định xem sẽ sử dụng đƣờng cáp gửi nó lên mạng để chuyển tới điểm đích. Hiện nay có rất nhiều chƣơng trình sử dụng Internet, ví dụ: thƣ điện tử đã có mặt từ rất lâu trƣớc khi hệ thống siêu văn bản đƣợc phát minh và sử dụng trên toàn cầu với tên gọi World Wide Web. Ngày nay có rất nhiều dịch vụ để mã hóa thông tin theo những cách khác nhau và sử dụng các ngôn ngữ khác nhau giữa các máy tính (giao thức) để cung cấp dịch vụ, ví dụ nhƣ: hội thảo video trực tuyến, các kênh truyền thanh trên mạng và một số loại hình dịch vụ khác cũng nhƣ chính bản thân mạng toàn cầu. Mạng toàn cầu (web) là một không gian ảo chứa thông tin. Trên mạng, bạn làm việc với các máy tính; còn trên web, bạn tìm đƣợc tài liệu, âm thanh, hình ảnh video Trên net, kết nối là những sợi cáp nối các máy tính với nhau; còn trên web, kết nối là những đƣờng liên kết siêu văn bản. Internet tồn tại đƣợc là nhờ những chƣơng trình liên lạc giữa các máy tính trên net. Mạng toàn cầu không thể tồn tại nếu không có các mạng cơ sở, nhƣng mạng toàn cầu cũng làm cho mạng cơ sở trở nên hữu ích hơn, bởi điều con ngƣời thật sự quan tâm là thông tin chứ không phải là máy tính và cáp truyền dữ liệu. 1.1.4. Thư điệntử (E-mail) E-mail là dịch vụ trao đổi thông điệp điện tử bằng mạng viễn thông. Các thông điệp này thƣờng đƣợc mã hóa dƣới dạng văn bản ASCII, tuy nhiên ta có thể gửi những tệp tin hình ảnh, âm thanh, chƣơng trình kèm theo e-mail. Giao thức thƣờng dùng để nhận và gửi e-mail là SMTP (Simple Mail Transfer Protocol) và POP3 (Post Office Protocol version 3). Để sử dụng dịch vụ e-mail cần phải có: Đia chỉ email, có dạng name@domainname, ví dụ [email protected] Địa chỉ email đƣợc quản l bởi mail server: nhƣ Yahoo, HotMail, Gmail, Tên đăng nhập (Login name) và mật khẩu (password) truy cập hộp thƣ (mail box). 1.2. Các kiểu mạng Mạng máy tính Là tập hợp các máy tính hoặc các thiết bị đƣợc nối với nhau bởi các đƣờng truyền vật l và theo một kiến trúc nào đó. Chúng ta có thể phân loại mạng theo qui mô của nó: . Mạng LAN (Local Area Network)-mạng cục bộ: kết nối các nút trên một phạm vi giới hạn. Phạm vi này có thể là một công ty, hay một tòa nhà. . Mạng WAN (Wide Area Network): nhiều mạng LAN kết nối với nhau tạo thành mạng WAN. . MAN (Metropolitan Area Network), tƣơng tự nhƣ WAN, nó cũng kết nối nhiều mạng LAN. Tuy nhiên, một mạng MAN có phạm vi là một thành phố hay một đô thị nhỏ. MAN sử dụng các mạng tốc độ cao để kết nối các mạng LAN của trƣờng học, chính phủ, công ty, , bằng cách sử dụng các liên kết nhanh tới từng điểm nhƣ cáp quang. Khi nói đến các mạng máy tính, ngƣời ta thƣờng đề cập tới mạng xƣơng sống (backbone). Backbone là một mạng tốc độ cao kết nối các mạng có tốc độ thấp hơn. Một công ty sử dụng mạng backbone để kết nối các mạng LAN có tốc độ thấp hơn. Mạng backbone - 9 -
  11. Internet đƣợc xây dựng bởi các mạng tốc độ cao kết nối các mạng tốc độ cao. Nhà cung cấp Internet hoặc kết nối trực tiếp với mạng backbone Internet, hoặc một nhà cung cấp lớn hơn. . Để kết nối tới một mạng WAN, có một số tùy chọn nhƣ sau: . Khi một khách hàng cụ thể yêu cầu sử dụng mạng với thông lƣợng xác định, chúng ta có thể sử dụng các đƣờng thuê bao (leased line). . Các đƣờng chuyển mạch (switched lines) đƣợc sử dụng bởi dịch vụ điện thoại thông thƣờng. Một mạch đƣợc thiết lập giữa phía nhận và phát trong khoảng thời gian thực hiện cuộc gọi hoặc trao đổi dữ liệu. Khi không còn cần dùng đƣờng truyền nữa, thì cần phải giải phóng đƣờng truyền cho khách hàng khác sử dụng. Các ví dụ về các đƣờng chuyển mạch là các đƣờng POTS , ISDN, và DSL. . Mạng chuyển mạch gói là mạng mà trong đó nhà cung cấp dịch vụ cung cấp công nghệ chuyển mạch để giao tiếp với mạng xƣơng sống. Giải pháp này cung cấp hiệu năng cao và khả năng chia sẻ tài nguyên giữa các khách hàng. . Các giao thức đƣợc sử dụng cho các mạng chuyển mạch bao gồm X.25 (64Kbps), Frame Relay (44.736Mbps), và ATM (9.953 Gbps). . Kiến trúc mạng: Một trong những vấn đề cần quan tâm đối với một mạng máy tính là kiến trúc mạng. Nó cập tới hai khía cạnh là Hình trạng mạng và Giao thức mạng. . Hình trạng mạng: Là cách nối các máy tính với nhau. Ngƣời ta phân loại mạng theo hình trạng mạng nhƣ mạng sao, mạng bus, mạng ring . Giao thức mạng: Là tập hợp các qui tắc, qui ƣớc truyền thông của mạng mà tất cả các thực thể tham gia truyền thông phải tuân theo. 1.3. Kiến trúc Client – server Khái niệm client-server đề cập đến mối quan hệ logic giữa các máy tính trên mạng. Trong mạng client-server các máy tính đƣợc chia thành các máy server và các máy client, các quá trình xử l đƣợc phân bổ cho cả máy server lẫn máy client, với mỗi máy có một vai trò chuyên biệt. Server là máy tính chuyên dụng, có khả năng xử l mạnh, lƣu trữ lớn. Chức năng chủ yếu của server là quản l và lƣu giữ các nguồn tài nguyên mà một máy tính khác trên mạng có thể truy cập, ngoài ra server có nhiệm vụ kiểm sóat sự truy cập và bảo mật dữ liệu. Tùy theo chức năng xử l , ta có các loại : file server, web server, database server, mail server, Server chạy trình chủ (server program). Client là máy tính truy cập dữ liệu từ server, client chạy trình khách (client program) chịu trách nhiệm về giao diện ngƣời sử dụng, và một số quá trình xử l . Client là các máy tính thông thƣờng đƣợc kết nối với server qua mạng. Client gởi các yêu cầu của ngƣời sử dụng đến server, server xử l yêu cầu và gởi kết quả về cho client. Mạng Internet là một mạng có kiến trúc client-server. Applications User input sent to Run on server server Database Virtual display sent to User PC CLIENT SERVER - 10 -
  12. Kiến trúc client-server có nhiều ƣu điểm, nhất là tính bảo mật và an toàn thông tin nhờ vào các tính năng: . Các tài nguyên mạng đƣợc quản l tập trung . Có thể tạo ra các cấp kiểm soát chặt chẽ trong việc truy cập file dữ liệu . Giảm nhẹ việc quản l trên các máy client . Bảo mật và backup dữ liệu . Có thể mở rộng hệ thống khi cần. Tuy nhiên mô hình này cũng có nhƣợc điểm: giá thành cao, server trở thành điểm tối yếu của hệ thống, có nghĩa là khi server bị hƣ hỏng thì toàn bộ hệ thống không thể họat động CÂU HỎI VÀ BÀI TẬP 1.1. Phân biệt các khái niệm Intranet và Internet 1.2. Site map là gì ? Trong những home page của các website sau, home page nào có liên kết đến site map : 1.3. Nêu những đặc tính của hai trình duyệt mới nhất : Internet Explorer 7.0 và FireFox 1.4. Tìm hiểu thêm về khái niệm blog (một trong những dịch vụ web hiện đại, có thể tra cứu thông tin tại và 1.5. Tìm hiểu chức năng và website của hai tổ chức VNNIC và ICANN 1.6. Tại sao nói tên miền là một tài sản (giống nhƣ thƣơng hiệu là một tài sản). 1.7. Cho biết website cá nhân của Donald E.Knuth, tác giả của bộ sách nổi tiếng "Nghệ thuật lập trình máy tính" (The Art of Computer Programming) - 11 -
  13. Chƣơng 2: NGÔN NGỮ SIÊU VĂN BẢN HTML 2.1. Khái niệm cơ bản về ngôn ngữ HTML Để tham khảo tất cả các thẻ của phiên bản HTML 4.01, là phiên bản HTML mới nhất đƣợc chuẩn hóa vào năm 1999 bởi W3C, có thể tìm trong hai địa chỉ có uy tín sau : - Trang World Wide Web Consortium HTML Specifications (đặc tả ngôn ngữ HTML của tổ chức W3C): - Trang Web của W3Schools, tại web site này ta có thể tìm thấy tất cả các hƣớng dẫn tự học về thiết kế web đựa trên nền tảng của HTML, xHTML, XML và WAP: Xu thế phát triển của các ngôn ngữ trên Web đang dần nghiêng về ngôn ngữ XML (eXtensible Markup Language), cũng là một ngôn ngữ con của SGML. XML là một ngôn ngữ mô tả cấu trúc dữ liệu trên Web, cho phép ngƣời sử dụng xây dựng các thẻ riêng của mình, một trong những ứng dụng quan trọng của XML là chuyển đổi dữ liệu giữa các ứng dụng để trao đổi thông tin trên nền của Web, khác với HTML là ngôn ngữ trình bày dữ liệu trên Web. HTML là ngôn ngữ chủ đạo để xây dựng trang web, nó mô tả cách thức một trang web hiển thị nhƣ thế nào trong một trình duyệt. HTML là một ngôn ngữ mô tả tài liệu, đƣợc hình thành từ ngôn ngữ mô tả tài liệu tổng quát SGML (Standard Generalized Markup Language) do hãng IBM đề xƣớng từ năm 1960. HTML không phải là một ngôn ngữ lập trình, nó cung cấp các chỉ thị định dạng để phục vụ cho việc trình bày văn bản và các đối tƣợng khác nhƣ hình ảnh, video, các plug-in HTML (Hypertext Markup language) là ngôn ngữ định dạng siêu liên kết,cho phép định dạng văn bản, bổ sung hình ảnh, và video, cũng nhƣ lƣu tất cả vào một trong tập tin dƣới dạng văn bản hay dƣới dạng mã ASCII. Tên gọi ngôn ngữ dánh dấu siêu văn bản phản ánh đúng thực chất của công cụ này Markup : HTML là ngôn ngữ của các thẻ đánh dấu - Tag. Các thẻ này xác định cách thức trình bày đoạn văn bản tƣơng ứng trên màn hình. Language : HTML là một ngôn ngữ tƣơng tự nhƣ các ngôn ngữ lập trình, tuy nhiên đơn giản hơn. Nó có cú pháp chặt chẽ để viết các lệnh thực hiện việc trình diễn văn bản. Các từ khoá có nghĩa xác định đƣợc cộng đồng Internet thừa nhận và sử dụng. Ví dụ b = bold, ul = unordered list, Text : HTML đầu tiên và trƣớc hết là để trình bày văn bản và dựa trên nền tảng là một văn bản. Các thành phần khác nhƣ hình ảnh , âm thanh, hoạt hình đều phải "cắm neo" vào một đoạn văn bản nào đó. Hyper : HTML cho phép liên kết nhiều trang văn bản rải rác khắp nơi trên Internet. Nó có tác dụng che dấu sự phức tạp của Internet đối với ngƣời sử dụng, có thể đọc mà không cần biết đến văn bản đó nằm ở đâu, xây dựng phức tạp nhƣ thế nào. Sự phát triển có tính bùng nổ của Internet trong thời gian vừa qua một phần lớn là nhờ vào WWW. Hyperlink: dùng để liên kết các tài liệu này đến tài liệu khác hoặc liên kết đối với bất kì đối tƣợng nào trên Web nhƣ văn bản, hình ảnh, âm thanh. Chỉ cần click chuột vào siêu liên kết, tài liệu đƣợc liên kết sẽ đƣợc hiển thị 2.2. Lập trình web với ngôn ngữ HTML 2.2.1. Các thành phần cơ bản của html Thẻ (tag): là một tập các k hiệu đƣợc định nghĩa trong HTML có nghĩa đặc biệt. Thẻ bắt đầu bằng k hiệu Cú pháp: Nội dung - 12 -
  14. Ví dụ: Nôi dung Phần tử (element): có 2 loại phần tử trong HTML - Phần tử chứa nội dung: bao gồm thẻ đóng và thẻ mở Ví dụ: Nội dung - Phần tử rỗng: bao gồm 1 thẻ Ví dụ: Thuộc tính(properties): mỗi thẻ bao gồm một hoặc nhiều thuộc tính đi kèm. Thuộc tính đƣợc nhập vào ngày trƣớc dấu ngoặc đóng(>) của thẻ. Có thể sử dụng nhiều thuộc tính trong một thẻ. Thuộc tính này kế tiếp thuộc tính khác, phân cách nhau bởi khoảng trắng. Ví dụ: Giá trị: Ngoài các thuộc tính không có giá trị còn có các thuộc tính của tag có giá trị. Ví dụ: thuộc tính clear của thẻ có ba giá trị lựa chọn: left,right, all. Thẻ lồng nhau: dùng để chỉnh sửa cách trình bày nội dung trong một trang Web. Trật tự sắp xếp của những thẻ lồng nhau đó là thẻ đƣợc mở đầu tiên sẽ là thẻ đóng sau cùng Ví dụ: Phần Nội dung Khoảng trắng: Trình duyệt bỏ qua các khoảng trắng. Tên tệp tin: phải đặt tên tệp tin với phần mở rộng là “.htm” hoặc “.html” điều này giúp trình duyệt định ra loại tài liệu khi duyệt. Để tạo một trang Web, chúng ta có thể sử dụng bất kỳ một trình soạn thảo nào để tạo ra một trang Web. 2.2.2. Cấu trúc tệp HTML Một trang Web luôn bắt đầu bằng thẻ và kết thúc bởi thẻ Các trang Web đƣợc chia thành 2 phần: Phần đầu: đƣợc đặt giữa hai thẻ và thẻ - định ra tiêu đề, nội dung của tiêu để. Phần thân: đặt giữa 2 thẻ và - chứa nội dung của trang Web. Ví dụ: Tiêu đề trang Web Xin chào mừng đến với thế giới HTML 2.3. Các thẻ cơ bản trong HTML 2.3.1. Thẻ giải thích Tác dụng: Giải thích hoặc chú thích các dòng lệnh. Trình duyệt sẽ không hiển thị nội dung nằm giữa các thẻ ghi chú Cú pháp: 2.3.2. Các thẻ định dạng văn bản Định dạng chữ Cú pháp Trong đó: fontname1 là phông chữ đƣợc chọn. fontname2 đƣợc sử dụng khi trên máy ngƣời dùng không tồn tại fontname1. - 13 -
  15. Ví dụ: Định dạng kích thƣớc chữ: dùng để định kích thƣớc cho toàn bộ văn bản Cú pháp: n mang giá trị từ 1 đến 7. Giá trị mặc định là 3. Định màu cho văn bản Cú pháp: Color: là màu dùng cho chữ. Giá trị màu có thể gõ bằng chữ hoặc hệ số hexa (16) Ví dụ: Lớp lập trình Web Lớp lập trình Web Định dạng chữ Thẻ nội dụng hoặc Nội dung Thẻ nội dụng hoặc nội dụng Định dạng chỉ số trên mà dƣới Chỉ số trên: Ví dụ: AX2+BX+C =0 AX 2 +BX+C=0 Chỉ số dƣới: Ví dụ: C+02=C02 C+O 2 =CO 2 Phân đoạn văn bản Cú pháp Thuộc tính align: canh đoạn văn bản. Align có thể nhận các giá trị sau Left: nội dụng trong đoạn đƣợc canh trái Righ: nội dung trong đoạn đƣợc canh phải Center: nội dung trong đoạn đƣợc canh giữa Thẻ phân cấp đề mục: Trong HTML cho phép sử dụng 6 cấp đề mục trong trang Web Cú pháp: Nội dung với n mang giá trị từ 1 tới 6 Ví dụ: Giám đốc Phó giám đốc Nhân viên Chèn hình ảnh vào trang Web Cú pháp: Tên tệp tin chứa hình ảnh có cả đƣờng dẫn thƣ mục. Nếu tệp tin hình ảnh đƣợc đặt cùng thƣ mục với thƣ mục chứa trang Web thì không cần đƣờng dẫn thƣ mục Ví dụ Thêm đƣờng viên xung quanh hình ảnh Cú pháp: Với n là độ dày của đƣờng biên ảnh, tính bằng pixel Ví dụ Canh chỉnh hình ảnh Cú pháp: Nội dung - 14 -
  16. Giá Trị: left: hình ảnh nằm bên trái màn hình right: hình ảnh nằm bên phải màn hình center: hình ảnh nằm giữa màn hình Ví dụ Xin chào Thêm chữ xung quanh hình ảnh Cú pháp: Nội dung Giá trị Top: ví trí văn bản nằm ở phái trên hình ảnh middle: vị trí văn bản nằm ở giữa hình ảnh bottom: vị trí văn bản nằm ở dƣới hình ảnh Chèn ảnh nền Look: A background image! Both gif and jpg files can be used as HTML backgrounds. If the image is smaller than the page, the image will repeat itself. Đƣờng kẻ ngang trang Web Thẻ : dùng để kẽ đƣờng ngang trên trang Web, giúp trang Web rõ ràng hơn. Cú pháp: Size: độ dày/mỏng của đƣờng kẻ tính bằng pixel Width: chiều rộng của đƣờng kẻ tính bằng pixel Align: canh đƣờng kẻ. Có 3 giá trị left,right, center Định màu nền cho trang Web Để định mầu nền cho trang Web, bổ sung thuộc tính bgcolor vào trong thẻ BODY Cú pháp Color là màu cần định cho trang Web Định ảnh nền cho trang Web Dùng hình ảnh làm nền cho toàn trang Web thày vì sử dụng màu nền Cú pháp Tên tệp là tên tệp tin hình ảnh càn làm nền cho trang Web Xuống dòng trong trang Web Cú pháp Tạo danh sách theo thứ tự Cú pháp Nội dung mục 1 Nội dung mục 2 Nội dung mục N - 15 -
  17. Trong đó X đỉnh kiểu k hiệu sẽ đƣợc sử dụng trong danh sách A là chữ hoa a danh sách đƣợc đanh theo thứ tự chữ thƣờng I,I,1 N là giá trị bắt đầu của danh sách Tạo chấm tròn (bullet) cho danh sách Cú pháp Nội dung mục 1 Nội dung mục 2 Nội dung mục N Trong đó “kiểu chấm tròn” mang một trong 3 giá trị sau: disc: kiểu dấu chấm tròn đậm Circle: kiểu dấu chấm tròn rỗng Square: kiểu dấu chấm vuông đặc Tạo danh sách định nghĩa: Là loại danh sách có dạng một từ hay một cụm từ kèm theo nội dung dài, rất thích hợp giải thích nghĩ của nội dung Cú pháp: sử dụng các thẻ , , : để tạo danh sách định nghĩa :đánh dấu thuật ngữ đƣợc định nghĩa trong danh sách : giải thích thuật ngữ ở trên Ví dụ Hướng công nghệ phần mềm> Đào tạo ra những lập trình viên, đáp ứng nhu cầu cần thiết của xã hội 2.3.3. Tạo liên kết (link) Liên kết là đặc trƣng WWW, cho phép ngƣời dùng chuyển từ mục này sang mục khác trong cùng một trang hoặc chuyển sang một trang Web này sang một trang Web khác. Liên kết trong cùng một trang Web: Cho phép liên kết đến các mục bên trong một trang Web. Các bƣớc thực hiện Tạo một điểm neo (bookmark) Cú pháp: Tạo liên kết đến điểm neo Cú pháp: Dấu # báo cho trình duyệt biết liên kết này là nội bộ - 16 -
  18. Tạo liên kết đến các trang Web khác. Cú pháp Ví dụ: Thuộc tính: Target=“giá trị”: mở liên kết ở vị trí nào?phụ thuộc giá trị _blank:nạp liên kết vào một cửa sổ trống mới _parent: nạp liên kết vào cửa sổ cha gần nhất của trang Web hiện thời _self: nạp liên kết vào cùng cửa sổ với trang Web hiện hành _top: nạp liên kết vào cửa sổ cao nhất 2.3.4. Một số kí tự đặc biệt trong HTML HTML dùng các kí tự để mở và đóng 1 thẻ, do đó không thể hiện các k tự đặc biệt này. Vì vậy cần có một nhóm k tự thay thế. 2.3.5. Các thẻ dùng thiết kế bảng Tạo mới một bảng Cú pháp: : Thuộc tính: Bgcolor: đình màu nền cho bảng Border: định đò dày, mảnh của đƣờng viền Bordercolor: định màu cho đƣờng viền Bordercolordark: định màu sậm cho phần hắt bóng của đƣờng viền Cellpadding: định khoảng cách giữa nội dung và đƣờng viền Cellspacing: định khoảng cách giữa các ô Frame: hiển thị đƣờng viền ngoài Height: định chiều cao bảng - 17 -
  19. Width: định chiều rộng bảng Rules: hiển thị đƣờng viền trong Tạo mới một hàng trong bảng Cú pháp: Nội dung Thuộc tính: Align/valigh: canh chỉnh nội dung hàng theo phƣơng ngang/dọc Bgcolor: thay đổi màu nền của bảng Tạo mới một đề nục trong bảng Cú pháp: , Thuộc tính: Align/valigh: canh chỉnh nội dung hàng theo phƣơng ngang/dọc Bgcolor: thay đổi màu nền của ô Colspan: mở rộng ô qua nhiều cột Rowspan: kéo dài ô xuống nhiều hàng Nowrap: giữ nội dung ô nằm trên một dòng Width, height: đình chiều rộng, cao cho ô Tạo khung viền cho bảng Cú pháp: Thay đổi màu khung Cú pháp: Thiết lập độ rộng cột Cú pháp: Thiết lập tiêu đề cho bảng Cú pháp: Nội dung 2.3.6. Các thẻ tạo Frame Khung (Frame) là thành phần cơ bản của Web, một trang Web có thể đƣợc chia thành nhiều khung, mỗi khung sẽ chứa một trang Web riêng Tạo Frame có dạng hàng Cú pháp: Trong đó: a: chiều cao frame đầu tiên *:chiều cao của frame thứ 2 là khoảng trống còn lại b:chiều cao của frame thứ 3 Tạo Frame có dạng cột Cú pháp: - 18 -
  20. Scorlling = “yes/no”: ẩn/hiện thanh cuộn. Frameboder=“yes/no”: ẩn/hiện viền khung. Border=“n”: chỉnh độ dày/mỏng của viền khung. Noresize: không cho thay đổi kích thƣớc của khung. 2.3.7. Các thẻ dùng tạo Form Form là thành phần giao tiếp cơ bản giữa ngƣời duyệt Web với ngƣời tạo Web. Dữ liệu đƣợc nhập vào Form thông qua các hộp điều khiển. Cú pháp: . Tạo Textbox Cú pháp: Trong đó: “name” là chuỗi kí tự nhận diễn dữ liệu nhập vào, “value” là dữ liệu đầu tiên hiển thị trong Textbox và đƣợc gửi đến máy chủ khi ngƣời duyệt không gõ thông tin gì, size định kích thƣớc của Textbox, maxlength giới hạn số kí tự nhập vào Textbox Tạo Textbox với vùng văn bản chứa nhiều dòng Cú pháp: Trong đó “name” là chuỗi kí tự nhận diện dữ liệu nhập vào, n là chiều cao của vùng văn bản tính bằng dòng (mặc định = 4), m là chiều rộng của vùng văn bản tính bằng kí tự (mặc định = 40). Tạo nút Radio button: Radio là nút chì đƣợc họn một trong số đó, không thể chọn lựa hai nút cùng lúc. Cú pháp Tạo ô chọn (checkbox): khác với Radio, checkbox cho phép chọn nhiều nút trong một nhóm. Cú pháp Tạo nút Push button (nút nhấn) Cú pháp Để tạo nút nhấn khi ngƣời dùng nhấn vào, dữ liệu của các điều khiển khác đều đƣợc đặt giá trị mặc định lúc khởi tạo, có thể chỉ định thuộc tính type =”reset” trong tag . Tạo nút nhấn đề kết thục việc nhập dữ liệu của một Form, ta chỉ định thuộc tính type = “submit” trong thẻ Tạo Dropdown Listbox: là danh sách chứa nhiều mục CÂU HỎI VÀ BÀI TẬP 1. Các trang web của báo Tuổi trẻ điện tử ( có phần mở rộng là .tto, tại sao trình duyệt vẫn đọc và hiển thị đƣợc ? 2. Cho một tệp tin văn bản có tên khoatin.dhhh có nội dung sau: Khoa Tin học Trường Đại học Hàng Hải - 19 -
  21. Đây có phải là một tƣ liệu HTML không? và nội dung hiển thị trên cửa sổ trình duyệt là gì ? 3. Cho biết thẻ HTML quan trọng nhất, không có nó thì không thể xây dựng một website đƣợc. 4. Cho biết đặc điểm và cách sử dụng của hai thẻ EMBED và OBJECT trong mỗi loại trình duyệt IE và NN 5. Sử dụng một trong những trình sọan thảo HTML: EditPlus, HTMLKit v.v. để sọan thảo các tệp tin tƣ liệu HTML. So sánh hiệu quả sử dụng với các trình sọan thảo web trực quan nhƣ FrontPage, Dreamweaver. 6. Xem xét trang web sau đây có tên myfirstpage.html, bạn cần phải đƣa lên server những file nào để đảm bảo trang web hiển thị đúng nhƣ mong muốn: My First Page My Web page On happy joy I have a page on the web! 7. So sánh tốc độ hiển thị một trang web chứa một bảng có độ rộng khai báo bằng giá trị tƣơng đối với một trang web khác cũng chứa một bảng nhƣ vậy nhƣng khai báo độ rộng bằng giá trị tuyệt đối (tính bằng pixel) 8. Viết một tệp tƣ liệu HTML để tạo một form Guesbook hỏi một ngƣời nào đó về họ tên, giới tính, tuổi, địa chỉ và email của họ. Giả sử bạn có một script để xử l form đặt tại /CGI/SCRIPT và bạn cần đƣa vào thành phần ẩn sau đây để cho script biết địa chỉ để gửi các kết quả: 9. Nghiên cứu cách bố cục các trang web của các website : - 20 -
  22. CHƢƠNG 3. NGÔN NGỮ KỊCH BẢN JAVASCRIPT 3.1. Mở đầu Script hay kịch bản, theo thuật ngữ lập trình, là chƣơng trình chạy với chế độ thông dịch trên máy khách (client) hay máy chủ (server) nhằm tạo ra các ứng dụng web (web base application). Xét trên phƣơng diện: - client-side : các script bổ sung vào trang web cho phép tạo ra các trang web tƣơng tác, có những hiệu ứng động dựa vào mô hình đối tƣợng trình duyệt (BOM: browser object model) - server-side: sử dụng các đối tƣợng liên quan để chạy các script trên server. Các ngôn ngữ kịch bản cho phép phát triển nhanh và dễ dàng các chƣơng trình đơn giản hơn là các ngôn ngữ lập trình dạng biên dịch nhƣ C, C++,Java,C#, v.v Hai ngôn ngữ kịch bản thông dụng hiện nay là : JavaScript do hãng Netscape phát triển từ năm 1995 với tên ban đầu là LiveScript, chú rằng JavaScript không có liên quan gì đến ngôn ngữ lập trình Java của hãng Sun, nó có tên nhƣ vậy là vì mục đích tiếp thị của hãng Netscape dựa vào sự nổi tiếng của ngôn ngữ lập trình Java. Phiên bản hiện nay là JavaScript 1.5, chạy trên nhiều trình duyệt nên rất đƣợc ƣa chuộng để viết các script cho các trang web. Trƣớc sự phát triển và ảnh hƣởng của JavaScript, hãng Microsoft đã đƣa ra JScript. VBscript do Microsoft phát triển, VBscript là một tập con của ngôn ngữ lập trình Visual Basic, các script viết bằng VBscript thích hợp cho môi trƣờng Windows, phía client nó chỉ chạy trong môi trƣờng IE nên không đƣợc ƣa chuộng, phía server nó thích hợp với hệ điều hành Windows NT, Windows 2000 Server để xây dựng các trang ASP. Năm 1996, Netscape đã đệ trình JavaScript cho ECMA (European Computer Manufacturers Association, một tổ chức phi lợi nhuận có sự tham gia của các công ty phần mềm, máy tính lớn trên thế giới nhƣ IBM, Microsoft, NEC, Sun , đƣợc thành lập năm 1991, có chức năng chuẩn hóa WWW) để chuẩn hóa, ECMA chỉ tập trung chuẩn hóa phần lõi của JavaScript, còn khác phần khác nhƣ mô hình đối tƣợng tƣ liệu (DOM) dành cho các nhà phát triển, do vậy vấn đề lớn nhất còn tồn tại sự khác nhau giữa các trình duyệt là DOM. Hiện nay, JavaScript là ngôn ngữ kịch bản chủ yếu để xây dựng các ứng dụng web chạy phía client, tuy nhiên cần phải chú hai đặc điểm quan trọng: JavaScript có thể làm đƣợc gì ? . DHTML là tập hợp các công cụ cho phép tạo ra các trang web tƣơng tác, có thể thay đổi nội dung và thể hiện. . Điều khiển trình duyệt. . Xử l dữ liệu trong các ứng dụng cilent-side, kiểm tra tính hợp lệ dữ liệu trong các form. . Lƣu các trạng thái trong cookies. JavaScript không thể làm đƣợc gì ? . Không đọc / ghi file . Không hỗ trợ mạng . Không tạo ra các đối tƣợng đồ họa. 3.2. Cú pháp cơ bản JavaScript Cú pháp của CSS đƣợc tạo nên bởi 3 thành phần: Phần tử chọn (thƣờng là một thẻ HTML) (Selector). - 21 -
  23. Thuộc tính (Property). Giá trị (Value). Cú pháp của CSS đƣợc thể hiện nhƣ sau: Selector { Thuộc tính 1: giá trị; Thuộc tính 2: giá trị; Thuộc tính n: giá trị; } Selector thƣờng là các thẻ HTML mà bạn muốn định nghĩa thêm. Property là thuộc tính mà bạn muốn thay đổi; mỗi một thuộc tính cần phải có một giá trị. Một thuộc tính và giá trị của nó đƣợc phân cách nhau bởi dấu hai chấm (:). Hai cặp thuộc tính-giá trị đƣợc phân cách nhau bởi dấu chấm phảy (;). Toàn bộ các cặp thuộc tính-giá trị của một thẻ HTML đƣợc đặt trong cặp dấu ngoặc nhọn ({}). 3.2.1. Kiểu dữ liệu So với các ngôn ngữ lập trình khác, JavaScript sử dụng ít kiểu dữ liệu, hai kiểu dữ liệu đƣợc chấp nhận : . Kiểu dữ liệu cơ sở chỉ chứa một giá trị đơn nhƣ số, chuổi k tự và giá trị logic.  Kiểu số nhƣ số nguyên, JavaScript chấp nhận miền giá trị kiểu nguyên trong khoảng giữa -253 và 253 ; số dấu chấm động (floating-point numbers) đƣợc viết dƣới dạng thông thƣờng nhƣ 3.14 hay dƣới dạng khoa học nhƣ 0.5e10.  Kiểu boolean gồm hai giá trị true và false.  Kiểu chuổi k tự là một chuổi có thể không có k tự nào hay nhiều k tự đƣợc bao trong cặp dấu nháy kép hay cặp dấu nháy đơn.  Kiểu Null chỉ có một giá trị là null, có nghĩa là không có dữ liệu, chú rằng zero và chuổi rỗng không phải null.  Kiểu Indefined chỉ có một giá trị indefined, có nghĩa biến đã khai báo nhƣng chƣa xác định kiểu.  Infinity là từ khóa chỉ một giá trị vƣợt quá giới hạn xử l của JavaScript. NaN là một từ khóa chỉ một biểu thức không thể trả về kiểu số, ví dụ : 7*"abc"; . Kiểu dữ liệu phức (composite data type) gồm các kiểu đối tƣợng (object), mảng (array). Chúng ta sẽ nghiên cứu kỹ hai kiểu dữ liệu này trong phần sau của chƣơng này. Chuyển kiểu dữ liệu JavaScript là một kiểu ngôn ngữ động, cho phép ta không cần chỉ rõ kiểu dữ liệu của một biến khi khai báo nó, kiểu dữ liệu của một biến đƣợc tự động chuyển sang kiểu phù hợp trong quá trình thi hành script. Ví dụ : var result; x=1000; st="lan cam on Ban"; result=x+st; document.write(result); Kết quả ta đƣợc trên màn hình : 1000 lan cam on Ban! - 22 -
  24. 3.2.2. Hằng và biến Hằng Hằng đƣợc giới thiệu từ JavaScript 1.5, đƣợc chấp nhận từ NN 6.0 và FF 1.0 còn IE không chấp nhận, do vậy sử dụng hằng trong các script phải hết sức cẩn thận. Khai báo hằng : const sopi = 3.1416; const tencoquan="DaNang Education College"; const ok = true; Biến Là một vùng bộ nhớ lƣu trữ dữ liệu đƣợc truy xuất qua một tên gọi, giá trị của biến có thể bị thay đổi khi kịch bản đƣợc thi hành. - Khai báo biến bằng cách dùng từ khóa var hoặc bằng cách gán giá trị cho biến, khác với việc khai báo biến một cách chặt chẻ nhƣ trong Pascal, JavaScript chỉ yêu cầu khai báo biến trƣớc khi sử dụng nó. Ví dụ: var new_amount; var answer = null; result = 'Unknown result'; result = 10; - Phạm vi của biến phụ thuộc vào vị trí khai báo biến trong script. Nếu biến đƣợc khai báo ngoài hàm (function), nó đƣợc xem là biến toàn cục và có thể đƣợc sử dụng tại mọi nơi trong script, ngƣợc lại nếu biến đƣợc khai báo trong một hàm, nó đƣợc xem là biến cục bộ và chỉ đƣợc sử dụng trong hàm đó mà thôi. Ví dụ : var sum = 0; // biến toàn cục function tinhTong(){ var a = prompt("Nhap a:"); // biến cục bộ var b = prompt("Nhap b:"); // biến cục bộ sum = a+b; alert("Ket qua la:"&sum); } - 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 -
  25. 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) 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ụ : var x=1; prior = x++; follow = x; st= "Gia tri ban dau cua x =1 \n"+"x++ ="+prior+"\n"+"Sau khi tang x, x="+ follow; alert(thongbao); Các toán tử so sánh : = =, !=, >, =, > Dịch sang phải >>> Dịch sang phải và điền đầy các bit trống bằng 0 Các ví dụ : 10 & 15 trả về 10 ( 1010 & 1111 -> 1010) 10 | 15 trả về 15 ( 1010 | 1111 -> 1111) 10 ^ 15 trả về 5 (1010 ^ 1111 -> 0101) 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 -
  26. 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 : objectName = new objectType (param1 [,param2] [,paramN]); Trong đó : objectName : tên của thể hiện đối tƣợng objectType : là một hàm xác định kiểu của đối tƣợng. parami : là các giá trị của các thuộc tính của đối tƣợng. - 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: // đối tƣợng do ngƣời sử dụng định nghĩa function nhanVien(hoten, maso, chucdanh){ this.hoten = hoten; this.maso = maso; this.chucdanh = chucdanh; } var nhanVienMoi = new nhanvien("Le Van", "001","Quan ly") document.write("Ho va ten :" + nhanVienMoi.hoten+" "); document.write("Ma so :" + nhanVienMoi.maso+" "); document.write("Chuc danh :" + nhanVienMoi.chucdanh); Ví dụ 2: // Date() là đối tƣợng dựng sẵn của JavaScript var homNay = new Date(); var ngay = homNay.getDate(); var thang = homNay.getMonth(); var nam = homNay.getYear(); // getDate(), getMonth, getYear() là các phƣơng thức của Date() - 25 -
  27. document.write("Hom nay,ngay :" + ngay+"/"+thang+"/"+nam); - 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. Câu lệnh đơn giản gồm có : phép gán, lời gọi hàm. Ví dụ: x = 7; // phép gán 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"); // gọi hàm alert của đối tƣợng window 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 ; . if (biểu thức logic) { khối lệnh } . if (biểu thức logic) { khối lệnh } Ví dụ : if isNaN(x){ window.alert(x+" khong phai la mot so"); - 26 -
  28. } ( 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; } if (biểu thức logic 1) { khối lệnh 1;} else { else if (biểu thức logic 2;) { if (biểu thức logic 2) {khối lệnh 21;} khối lệnh 21; } else {khối lệnh 22;} else {khối lệnh 22; } } Ví dụ : Giải phƣơng trình bậc nhất một ẩn ax + b = 0 var x; var a = window.prompt("Nhap a:"); var b = window.prompt("Nhap b:"); 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); } } Đọ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 -
  29. 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ố đó. var bc = window.prompt("Nhap ma tinh/thanh pho: "); // Lƣu : hàm prompt trả về giá trị kiểu chuổi. switch (bc){ case "04": alert("Ha Noi"); break; case "08": alert("Tp Ho Chi Minh"); break; case "0511": alert("Da Nanng"); break; default: alert("Chua xac dinh duoc"); } 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âu lệnh while Cú pháp : while( biểu thức logic) { các lệnh; } 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. var sum = 0; - 28 -
  30. while (true){ i= parseInt(prompt("Nhap mot so nguyen, nhap 0 de ket thuc",0)); if (i==0) break; sum+=i; } alert("Ket qua: "+sum); Câu lệnh do while Cú pháp :do { các lệnh; } 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 "); 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 "); 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; 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 -
  31. for(var i=1; 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ẻ của ngôn ngữ HTML và liên kết đến một tệp tin văn bản mã ASCII chứa các mã JavaScript. 3.3.1. Sử dụng thẻ Toàn bộ mã JavaScript đƣợc đặt bên trong cặp thẻ và . Khi trình duyệt xử l tệp tin HTML, gặp thẻ nó sẽ đọc toàn bộ các dòng lệnh cho đến khi 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ụ :  // các lệnh, hàm JavaScript  // các lệnh, lời gọi hàm JavaScript - 30 -
  32. 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 Thẻ có các thuộc tính: - language có giá trị là một ngôn ngữ kịch bản cùng phiên bản của nó, có thể là :"JavaScript 1.5", "JScript 5.6", "ECMAscript 262", "VBscript". - type = "text/js" báo cho trình duyệt biết tệp tin bên ngoài có thể có phần mở rộng là .js hay .txt đều đƣợc, đây là thuộc tính tùy chọn. - SCR xác định URL dẫn đến một tệp tin JavaScript đặt bên ngoài tệp HTML. Khi muốn sử dụng các biểu thức của JavaScript để làm giá trị thuộc tính cho một thẻ HTML ta dùng cú pháp: thuộc tính ="&{biểu thức};". Ví dụ : var d=70; Nội dung 1 Nội dung 2 3.4. Các đối tƣợng của trình duyệt Trình duyệt là một ứng dụng dùng để hiển thị các nội dung của một tƣ liệu HTML. Các trình duyệt cũng đã đƣa ra một số đối tƣợng để các script có thể truy cập, các đối tƣợng này đƣợc tổ chức theo một mô hình phân cấp, gọi là mô hình đối tƣợng trình duyệt (BOM, Browser Object Model). Trong 9 đối tƣợng của BOM, đối tƣợng quan trọng nhất là đối tƣợng document. BOM đóng vai trò nhƣ là một API (Application Programming Interface) cho việc lập trình các ứng dụng trên nền tảng web cho client-side hay cách khác: chính trong môi trƣờng trình duyệt, JavaScript dựa vào mô hình này để truy xuất các đối tƣợng trên một trang web để cập nhật nội dung, cấu trúc và kiểu dáng của đối tƣợng Mỗi đối tƣợng trong BOM là một tập hợp gồm : - Các thuộc tính (Properties) - Các phƣơng thức (Methodes) Ngoài ra còn có các sự kiện (Events) có thể kết hợp trên đối tƣợng xác định. Trong giáo trình này, ngƣời viết dựa trên quan điểm của Peter Kantor (Đại học Hudson Valley, NY), chỉ trình bày về BOM mà không trình bày về DOM (Document Object Madel) vốn là một lĩnh vực rộng lớn, phù hợp cho XML hơn. Tuy nhiên, các tham khảo về DOM cũng có những lợi ích khi lập trình web. Trong IE BOM, đối tƣợng lớn nhất là đối tƣợng window, còn trong NN BOM, đối tƣợng window và đối tƣợng navigator là ngang cấp. Sự khác nhau giữa IE BOM và NN BOM chủ yếu là các đối tƣợng và các thuộc tính và phƣơng thức của mỗi đối tƣợng. - 31 -
  33. Có 9 đối tƣợng trình duyệt: window, document, event, frame, history, location, navigator, screen, mimeType và plugin; ta sẽ lần lƣợt nghiên cứu các đối tƣợng quan trọng, còn đối tƣợng quạn trọng nhất là document đƣợc tách ra một phần riêng. Đối tƣợng window Đối tƣợng window miêu tả cửa sổ đang hiển thị trang web, cung cấp các khả năng truy xuất đến các đối tƣợng con của nó và các trạng thái cũng nhƣ nắm bắt các sự kiện xảy ra trên cửa sổ này. Các thuộc tính - defaultStatus: dòng thông báo xuất hiện trên thanh trạng thái của cửa sổ trình duyệt. - status : dòng thông báo tạm thời xuất hiện trên thanh trạng thái của cửa sổ trình duyệt. - frames : mảng các frame đƣợc chứa bên trong cửa sổ trình duyệt - location : URL của tệp tin tƣ liệu HTM đƣợc mở trong cửa sổ hiện thời - name : tên của cửa sổ - closed : xác định trạng thái của cửa sổ có đƣợc đóng hay không. - top : trả về sổ cha nằm phía trên nhất. - parent : tham chiếu đến cửa sổ chứa một cửa sổ khác - self, window : chỉ cửa sổ hiện thời. - external : trả về host của trang web - openner : khi một cửa sổ đƣợc mở, thuộc tính openner trỏ đến cửa sổ cha của nó. Các phương thức - alert : hiển thị một hộp hội thoại chứa một thông báo do một ứng dụng xác định. - confirm : hiển thị một hộp hội thoại chứa một thông báo do một ứng dụng xác định và hai nút lệnh Yes, No; phƣơng thức trả về true | false tùy thuộc ngƣời sử dụng ấn nút yes hay no. - prompt : hiển thị một hộp hội thoại chứa một thông báo do một ứng dụng xác định và một text box để ngƣời sử dụng nhập liệu. Phƣơng thức trả về một dữ liệu kiểu chuỗi. Cú pháp : window.prompt(dòng nhắc, giá trị mặc nhiên); - close : đóng cửa sổ trình duyệt hiện thời hay một ứng dụng HTML (HTA). - open : mở một cửa sổ mới và nạp tệp tƣ liệu HTML đƣợc cho bởi URL. Cú pháp : window.open(URL, windowName, features); Trong đó feature là các sắc thái của cửa sổ mới, đây là tham số tùy chọn. Một số thuôc tính và giá trị : o height | width | left | = x ; xác định kích thƣớc của cửa sổ và khoảng cách bên trái với cửa sổ hiện tại, đơn vị tính bằng pixel. o location | menubar | scrollbar | toolbar : thêm thanh địa chỉ, vào cửa sổ (gán giá trị yes sau mỗi thuộc tính để xác định) o resizable : cửa sổ có thể thay đổi kích thƣớc Ví dụ : window.open("chuong1.htm","wChap1","width=400, width=200"); - print : in trang web hiện thời ra máy in. - setTimeOut(); - focus: chuyển cửa sổ vừa mở tiến đến phía trƣớc. Ví dụ : - blur : ngƣợc lại với phƣơng thức focus(), đƣa cửa sổ đang mở ra phía sau. - 32 -
  34. - 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 khoảng thời gian, hàm này trả lại thời gian để hàm clearInterval() có thể loại bỏ nó. -setTimeout(câu lệnh JavaScript, số milli giây): thực hiện câu lệnh JavaScript một lầ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, onunload. Ta sẽ nghiên cứu ở phần II.2 dƣới đây. Mô hình sự kiện (Event model) 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ó nhiều điểm khác nhau. - Đố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 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 Diễn tả altKey x x 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 ctlKey x x 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 shiftKey x x 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 cancelBubble x x Trả về true nếu muốn ngƣng sự nổi bọt sự kiện clientX, clientY x x Tọa độ góc trên trái của trang web, tính bằng pixel screenX, screenY x x Tọa độ của màn hình tại vị trí xảy ra sự kiện pageX, pageY x Tọa độ của cửa số trang tại vị trí xảy ra sự kiện offsetX, offsetY x Tọa độ của cửa số trang tại vị trí xảy ra sự kiện fromElement x Trả về phần tử HTML mà từ đó con trỏ chuột đi ra - 33 -
  35. Properties IE NN Diễn tả toElement x Trả về phần tử HTML mà từ đó con trỏ chuột đi vào keyCode x x Phím đƣợc sử dụng để kích họat sự kiện srcElement x Đối tƣợng mà sự kiện diễn ra trong đó target x Trả về đối tƣợng đầu tiên mà sự kiện diễn ra type x x Loại sự kiện keyCode x x Trả về mã Unicode của phím đƣợc ấn xuống 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ụ: function cancelBubble(the){ var str=document.getElementById(the); if(str.tagName=="P") event.cancelBubble=true; //(1) /* script này chạy trên IE 6.0 lẫn NN 7.1 có thể thay dòng lệnh (1) bằng event.cancelBubble=true; là đủ */ alert("Thẻ P"); } 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 -
  36. 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 Áp dụng cho phần tử Mô tả & Sử dụng khi onAbort image 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 onBlur window, frame và cả các NSD rời khỏi tiêu điểm từ window, frame hay phần tử của form tất cả phần tử của form onFocus window, frame và cả các Đƣợc kích họat khi NSD thiết lập tiêu điểm phần tử của form trên đối tƣợng window, frame, onClick link, button, check box, Đƣợc kích họat khi NSD ấn nút trái của chuột v.v. lên đối tƣợng onChange text field, text area, Đƣợc kích họat khi NSD thay đổi giá trị của select list phần tử onLoad window, document, Đƣợc kích họat sau khi trình duyệt đã tải xong applet, framset, image, tƣ liệu HTML , applet hay image link, object, script, style onUnLoad window, document, Đƣợc bẩy (trigger) khi NSD loại bỏ tƣ liệu framset HTML khỏi trình duyệt. onMouseDown button, link, document Đƣợc kích họat khi NSD ấn một phím chuột onMouseUp button, link, document Đƣợc kích họat khi NSD thả một phím chuột onMouseOver textarea, link, layer , Đƣợc kích họat khi NSD di chuyển con trỏ image, button chuột trên phần tử onMouseOut textarea, link, layer, Đƣợc kích họat khi NSD di chuyển con trỏ image, button chuột ra khỏi phần tử onResize window, frame Đƣợc kích họat khi kích thƣớc đối tƣợng sắp bị thay đổi onScroll window, frame Đƣợc kích họat khi NSD sử dụng thanh cuộn của cửa sổ onKeyDown textbox, text area Đƣợc kích họat khi NSD ấn một phím onKeyUp textbox, text area Đƣợc kích họat khi NSD nhả một phím onKeyPress textbox, text area Đƣợc kích họat khi NSD gõ một phím 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 -
  37. - previous : URL của tƣ liệu HTML đƣợc mở liền trƣớc. Các phương thức - back() : trở lại trang trƣớc - forward() : đi đến trang kế tiếp - 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 -
  38. Đọ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) (Tạo lịch giống đối tƣợng ActiveX, nhƣng chỉ sử dụng JavaScript: tham khảo tại địa chỉ hay thƣ viện JavaScript trên - 37 -