Bài giảng thiết kế và lập trình web

à 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 Run on server User input sent to server Virtual display sent to User PC SERVER CLIENT Database - 11 - 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) - 12 - 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 - 13 - 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. - 14 - 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 AX2+BX+C=0 Chỉ số dƣới: Ví dụ: C+02=C02 C+O2=CO2 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 - 15 - 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 - 16 - 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: NDung  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ộ - 17 - Tạo liên kết đến các trang Web khác. Cú pháp Nội dung Ví dụ: DHHH 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 - 18 -  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: - 19 -  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 - 20 - Đâ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! Click here for other page 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 : - 21 - 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). - 22 -  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! - 23 - 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 - 24 - 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 : = =, !=, >, =, <= 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. Toán tử Ý 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 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 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 - 25 - 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() - 26 - 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"); - 27 - } ( 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; } 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); - 28 - 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; - 29 - 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<=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; i50; 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 - 30 - 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ẻ 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   - 31 - 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. - 32 - 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ụ : <a href ="#onClick="window.openner.location=""; {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. - 33 - - 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 - 34 - 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: - 35 - ... 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 phần tử của form NSD rời khỏi tiêu điểm từ window, frame hay tất cả phần tử của form onFocus window, frame và cả cá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,... onClick link, button, check box, v.v. Đƣợc kích họat khi NSD ấn nút trái của chuột lên đối tƣợng onChange text field, text area, select list Đƣợc kích họat khi NSD thay đổi giá trị của phần tử onLoad window, document, applet, framset, image, link, object, script, style Đƣợc kích họat sau khi trình duyệt đã tải xong tƣ liệu HTML , applet hay image... onUnLoad window, document, framset Đƣợc bẩy (trigger) khi NSD loại bỏ tƣ liệu 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 , image, button ... Đƣợc kích họat khi NSD di chuyển con trỏ chuột trên phần tử onMouseOut textarea, link, layer, image, button Đƣợc kích họat khi NSD di chuyển con trỏ 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 - 36 - - 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 - 37 - Đọ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