›
›

Bài giảng Lập trình mạng - Chương 5: DHTML & Client Script

pdf 75 trang ngocly 1530
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Lập trình mạng - Chương 5: DHTML & Client Script", để 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_lap_trinh_mang_chuong_5_dhtml_client_script.pdf

Nội dung text: Bài giảng Lập trình mạng - Chương 5: DHTML & Client Script

  1. Môn học : Lập trình mạng Chương 5 DHTML & CLIENT SCRIPT 5.1 Các tính chất chính của DHTML 5.2 Các sự kiện có thể kết hợp hàm xử lý 5.3 Dynamic Style 5.4 Dynamic font 5.5 Data Binding 5.6 Thí dụ về viết script : trò chơi dò mìn ₫ơn giản Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 145
  2. 5.1 CÁC TÍNH CHẤT CHÍNH CỦA DHTML DHTML (Dynamic HTML) là sự nới rộng từ HTML do Microsoft khởi xướng và hiện mới chỉ ₫ược hiện thự c b ởi trình duy ệt IE của Microsoft, các trình duy ệt khác thường không hiểu các tính chất DHTML. Ý tưởng của DHTML gồm 4 lĩnh vực chính : 1. kết hợp từ 0 ₫ến n hàm xử lý sự kiện với từng phần tử hầu cho phép người dùng tương tác với nó. Các hàm xử lý sự kiện ₫ượ c ₫ặc tả bằng 1 ngôn ngữ script nào ₫óvà ₫ược ₫ặt trong các tag . Hiện 2 ngôn ngữ script phổ dụng nhất là javascript và VBscript, trong ₫ó javascript phổ d ụng hơn vì ₫ược hỗ trợ b ởi hầu hết các trình duyệt Web, trong khi VBscript thì hầu như ch ỉ có IE hỗ trợ. Lập trình script chạy ở phía client chủ yếu là viết các hàm x ử lý s ự kiện cho các tag lệnh trong trang Web. 2. kết hợp 1 Style với từng phần tử (tag HTML). Style là tập các thuộc tính miêu tả cách thức hiển thị ph ần tử. Style của từng phần tử ₫ược ₫ịnh nghĩa tạ i thời ₫iểm xây dự ng trang Web nhưng có thể ₫ược thay ₫ổi ₫ộng trong quá trình tương tác với người dùng. Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 146
  3. CÁC TÍNH CHẤT CHÍNH CỦA DHTML 3. Font ₫ộng. Thường thì khi trang web ₫ược download về máy client, trình duyệt Web sẽ thông dịch nó và hiển thị kết quả lên màn hình cho người dùng xem, nế u chuỗi văn bả n yêu cầu dùng font xác ₫ịnh, trình duyệt Web sẽ yêu cầu HĐH cung cấp, nếu có font thì không sao, còn nếu không có, HĐH sẽ thay thế bằng font có tính chất gần giống, nhưng thường không ₫ạ t yêu cầu. Để khắc ph ục yếu ₫iểm này, tính chất "dynamic font" cho phép trình duy ệt Web download font từ server về ₫ể hiển thị ₫úng theo yêu cầu của trang Web ₫ang xử lý. 4. Liên kế t dữ liệu (data binding). Chi tiết về 4 tính chất trên sẽ ₫ược trình bày trong các slide còn lại của chương này. Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 147
  4. 5.2 Các sự kiện có thể kết hợp hàm xử lý onafterupdate : xảy ra sau khi phần tử ₫ã ₫ược cập nhật (database) onbeforeupdate : trước khi phần tử ₫ã ₫ược cập nhật (database) onclick : sau khi ấn chuột trên phần tử ondblclick : sau khi ấn kép chuột trên phần tử ondragstart : khi bắt ₫ầu drag phần tử onerrorupdate : khi có sai trong việc cập nhật phần tử onhelp : khi có yêu cầu trợ giúp onkeydown : khi ấn phím onkeypress : khi ấn phím onkeyup : khi nhả phím onmousedown : khi ấn mouse onmousemove : khi dời mouse onmouseout : khi dời mouse ra khỏi phần tử onmouseover : khi dời mouse tới phần tử onmouseup : khi nhả mouse onreadystatechange : khi ₫ối tượng thay ₫ổi trạng thái onrowenter : khi record hiện hành ₫ã thay ₫ổi nội dung onrowexit : khi ₫iều khiển datasource thay ₫ổi nội dung record. onselectstart : khi ₫ối tượng ₫ược chọn. Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công ngh ệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 148
  5. 5.3.1 Style ₫ộng : ẩn/hiện ₫ối tượng Một trong các thuộc tính trong style kết hợp với từng tag lệnh là thuộc tính "display", nó cho phép ẩn/hiện phầ n tử tương ứng. Thí dụ trong trang Web kế bên, bài thơ ₫ược ₫ể trong tag và ta có thể ẩn/hiện bài thơ b ằng cách thay ₫ổi giá trị của thuộc tính display củ a tag tương ứng. Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 149
  6. Ẩn/hiện ₫ối tượng (mã nguồn trang Web) function HideDisp() { if (Baitho.style.display =="none") { Baitho.style.display =""; cmdHide.value ="Click chuột vào ₫ây ₫ể ẩn bài thơ"; } else { Baitho.style.display ="none"; cmdHide.value ="Click chuột vào ₫ây ₫ể hiện bài thơ"; } } Style ₫ộng : Thuộc tính ẩn/hiện Mùa Thi Thơ ta hơ hớ chưa chồng Ta yêu, muốn cưới, mà không thì giờ Xuân Diệu Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 150
  7. 5.3.2 Style ₫ộng : thay ₫ổi font/co chữ Để ₫ặc tả font chữ ₫ược dùng cho phần tử, ta có thể dùng các thuộc tính liên quan nh ư color, font-style, font-variant, font-weight, font-size, font- family, Thí dụ trong trang Web phía dưới, khi dời chuột vào/ra chuỗi "Hãy dời chuột vào/ra chuỗi này", thuộc tính fontsize và color kết hợp với chuỗi sẽ ₫ược hiệu chỉnh. Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 151
  8. Thay ₫ổi font/co chữ (mã nguồn trang Web) function zoomin() { document.all.myText.style.color = "red"; document.all.myText.style.fontSize = "40px"; } function dorestore() { document.all.myText.style.color = "black"; document.all.myText.style.fontSize = "14px"; } Style ₫ộng : Thay ₫ổi font/co chữ HÃY DỜI CHUỘT VÀO/RA CHUỖI NÀY Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 152
  9. 5.3.3 Style ₫ộng : thay ₫ổi nội dung Ta có thể thay ₫ổi nội dung của tag lệnh bằng cách dùng 1 trong 4 thuộc tính sau ₫ây của nó : 1. innertext : text củ a nội dung tag lệnh ₫ược hiểu theo dạng text thô. 2. innerHTML : text của nội dung tag lệnh ₫ược hiểu theo dạng HTML. 3. outertext : text cho toàn tag lệnh ₫ược hiểu theo dạng text thô. 4. outerHTML : text cho toàn tag lệnh ₫ược hiểu theo dạng HTML. Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 153
  10. Thay ₫ổi nội dung Ta cũng có thể thêm ₫ộng tag lệnh vào vị trí xác ₫ịnh trong trang Web b ằng cách dùng tác vụ tagi.insertAdjacentHTML(swhere, sText), trong ₫ó swhere có thể là: 1. beforeBegin : ngay trước tag lệnh liên quan. 2. afterBegin : trước ngay sau khi bất ₫ầu tag lệnh liên quan. 3. beforeEnd : thêm ngay trước khi kết thúc tag lệnh liên quan. 4. afterEnd : thêm ngay sau ₫ối tượng liên quan. Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 154
  11. Thay ₫ổi nội dung (mã nguồn trang Web) function ChangeContent3() { myH3.insertAdjacentHTML("AfterEnd", " "); myH3.outerText="Goodbye! Dynamic Content "; } function ChangeContent4() { myH4.insertAdjacentHTML("AfterEnd", " "); myH4.outerHTML="Goodbye! Dynamic Content "; } Thay ₫ổi nội dung ₫ộng Hello! Dynamic Content Dynamic Content '"> Hello! Dynamic Content Dynamic Content '"> Hello! Dynamic Content Hello! Dynamic Content Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 155
  12. 5.3.4 Style ₫ộng : thay ₫ổi vị trí Thuộc tính "position" giúp IE hiển thị phần tử tương ứng ở ví trí tương ₫ối/tuyệt ₫ối : 1. position=relative (mặc ₫ịnh), phần tử sẽ ₫ược hiển thịởngay sau phần tử ₫i trước nó. 2. position=absolute, phần tử sẽ ₫ược hiển thịởvị trí ₫ược qui ₫ịnh bởi các thuộc tính top, left, z-index bất chấp nó nằm ở ₫ âu trong mã nguồn HTML của trang Web. Thuộc tính z-index qui ₫ịnh layer hiển thị phần tử : =0 là layer mặc ₫ịnh, layer chỉ số dương nằm phía trên, layer chỉ số âm nằm phía dưới layer 0. Thí dụ trang Web ở slide kế sẽ hiển thị con cá chạy từ trái sang phải rồi quay lại sang trái, Con cá n ằm ở layer dướ i layer v ăn bản (mặc ₫ính là 0). Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 156
  13. Thay ₫ổi vị trí Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 157
  14. Thay ₫ổi vị trí (mã nguồn trang Web) function insertText() { document.all.MyText.insertAdjacentHTML("BeforeBegin", " BIỂN CẢ MÊNH MÔNG "); } var pleft = 0; var ptop = 60; var pstep = 5; function ChangePos() { pleft = pleft + pstep; if (pleft >=640) { pstep = -5; document.all.Image1.src = "FishLeft.gif"; } else if (pleft Demo việc thay ₫ổi vi trí ₫ộng Đây là chuỗi văn bản tham khảo Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 158
  15. 5.3.5 Style ₫ộng : Filters and Transitions Ta có thể tạo/thay ₫ổi hiệu ứng hiển thị ₫ặc biệt cho từng phần tử trong trang Web. DHMTL cung cấp khá nhiều hiệu ứng filter & transition : ƒ Các hiệu ứng transition : cho phép hiển thị phần tử A rồi từ từ chuyển sang phần tử B. Có 3 hiệu ứng transition là Blend, Reveal & Compositor. ƒ Các hiệu ứng filter : cho phép lọc phẩn tử theo hàm lọc xác ₫ịnh trước khi hiển thị kết quả. Có 13 hiệu ứng Filter : Alpha, Chroma, Shadow, DropShadow, Invert, Xray, MaskFilter, Blur, Glow, FlipH, FlipV, Light, Wave. Các slide kế sẽ lần lượt trình bày từng hiệu ứng một. Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 159
  16. 5.3.5.1 Hiệu ứng Blend Hiệu ứng Blend cho phép chuyển ₫ổi phần tử A sang phần tử B 1 cách từ từ theo cơ chế "₫ồng hóa", từng pixel lúc ₫ầu ch ứa 100% A và 0% B, từ từ tỉ lệ A giảm dần và tỉ lệ B tăng dần ₫ến khi kết thúc thì mỗi pixel chứa 0% A và 100% B. Ảnh dướ i cho thấy trạng thái ₫ầu và cuối cùng của hiệu ứng Blend chuyển ảnh bình minh sang hoàng hôn : Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 160
  17. Hiệu ứng Blend (mã nguồn trang Web) function BlendIt() { BlendImage.filters.blendTrans.Apply(); BlendImage.src = "sunset.gif"; BlendImage.filters.blendTrans.Play(10); } Demo hiệu ứng Blend Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 161
  18. 5.3.5.2 Hiệu ứng Reveal Hiệu ứng Reveal cho phép chuyển ₫ổi phần tử A sang phần tử B 1 cách từ từ theo cơ chế "xâm thực", lúc ₫ầu hiển thị 100% A và 0% B, sau ₫óphần tử B xâm chiếm A từng vùng theo quỹ ₫ạo xác ₫ịnh ₫ến khi kết thúc thì chỉ còn phần tử B. Có 23 cách xâm thực khác nhau có thể ₫ược xác ₫ịnh trong hiệu ứng reveal : Transition name Value Đặc tả Box in 0 hộp từ ngoài vào Box out 1 hộp từ trong ra Circle in 2 vòng tròn từ ngoài vào Circle out 3 vòng tròn từ trong ra Wipe up 4 kéo từ dưới lên Wipe down 5 kéo từ trên xuống Wipe right 6 kéo từ trái sang Wipe left 7 kéo từ phải sang trái Vertical blinds 8 kéo nhiều màn từ trái sang Horizontal blinds 9 kéo nhiều màn từ trên xuống Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 162
  19. 5.3.5.2 Hiệu ứng Reveal Transition name Value Đặc tả Checkerboard across 10 kéo nhiều ô từ trái sang Checkerboard down 11 kéo nhiều ô từ trên xuống Random dissolve 12 thẩm thấu từ từ Split vertical in 13 kéo 2 bên vào Split vertical out 14 kéo từ giữa ra 2 bên Split horizontal in 15 kéo 2 biên trên dưới vào giữa Split horizontal out 16 kéo từ giữa ra 2 biên trên dưới Strips left down 17 kéo từ góc trên phải xuống dưới trái Strips left up 18 kéo từ góc dưới phải lên trên trái Strips right down 19 kéo từ góc trên trái xuống dưới phải Strips right up 20 kéo từ góc dưới trái lên trên phải Random bars horizontal 21 tạo thanh ngang ngẫu nhiên Random bars vertical 22 tạo thanh dọc ngẫu nhiên Random 23 ngẫu nhiên 1 trong các cách trên Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 163
  20. Thí dụ về hiệu ứng Reveal Hãy quan sát trang Web d ưới ₫ây, mỗi lần người dùng ấn chuột vào button tạo hiệu ứng, IE sẽ thực hiện hiệu ứng Reveal với chỉ số tương ứng giữa 2 ảnh A (bình minh) và B (hoàng hôn). Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 164
  21. Hiệu ứng Reveal (mã nguồn trang Web) var i = 0; function RevealIt() { RevealImage.filters.revealTrans.transition = i; RevealImage.filters.revealTrans.Apply(); if (i % 2) RevealImage.src = "beach.gif"; else RevealImage.src = "sunset.gif"; RevealImage.filters.revealTrans.Play(5); if(++i>22) i=0; btn1.value = "Tạo hiệu ứng Reveal số " + i; } Demo hiệu ứng Reveal Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 165
  22. 5.3.5.3 Hiệu ứng Compositor Hiệu ứng Compositor cho phép hiển thị 2 ₫ối tượng ₫ược ₫ịnh vị tuyệt ₫ối và có phần giao nhau theo 1 hàm xử lý nào ₫ó. Có 18 hàm xử lý khác nhau, thí dụ hàm 25 hiển thị vùng ảnh B có trộn với từng pixel cùng vị trí của ảnh A. Hãy quan sát ảnh dưới ₫ây : Kết quả của hàm 25 nh A nh A Ả Ả nh B nh B Ả Ả Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 166
  23. Hiệu ứng Compositor (mã nguồn trang Web) function OnLoad() { div1.filters.item(0).Apply(); div1.innerHTML = " " div1.filters.item(0).Play(); } var i = 0; function CompoIt() { div1.filters.item(0).Function = i++; if(10 25) i = 0; btn1.value = "Tạo hiệu ứng Compositor số " + i; } Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 167
  24. Hiệu ứng Compositor (mã nguồn trang Web) Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 168
  25. 5.3.5.4 Hiệu ứng Alpha Hiệu ứng Alpha cho phép thay ₫ổi ₫ộ mờ (opacity) của từng pixel của ₫ối tượng. Hãy quan sát trang Web dưới ₫ ây : Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 169
  26. Hiệu ứng Alpha (mã nguồn trang Web) function AlphaIt() { //lọc tuyến tính từ trên trái xuống dưới phải Image1.filters.Alpha.enabled = true; Image1.filters.Alpha.Style = 1; Image1.filters.Alpha.Opacity = 0; Image1.filters.Alpha.FinishOpacity = 100; Image1.filters.Alpha.StartX = 0; Image1.filters.Alpha.StartY = 0; Image1.filters.Alpha.FinishX = 300; Image1.filters.Alpha.FinishY = 200; } Demo hiệu ứng Alpha Ảnh gốc (ấn chuột ₫ể tạo hiệu ứng ₫ộng) Ảnh ₫ã có hiệu ứng Alpha Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 170
  27. 5.3.5.5 Hiệu ứng Chroma Hiệu ứng Chroma cho phép lọc các vùng có màu xác ₫ịnh của ₫ối tượng. Hãy quan sát trang Web dưới ₫ây, ảnh bên ph ải ₫ã bị lọc màu ₫ỏ : Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 171
  28. Hiệu ứng Chroma (mã nguồn trang Web) function ChromaIt(){ Image1.filters.chroma.enabled = true; Image1.filters.chroma.color = "#ff0000"; } Demo hiệu ứng Chroma Ảnh gốc (ấn chuột ₫ể tạo hiệu ứng ₫ộng) Ảnh ₫ã có hiệu ứng chroma lọc bỏ màu ₫ỏ Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 172
  29. 5.3.5.6 Hiệu ứng FlipH & FlipV Hiệu ứng FlipH cho phép lật ngang ₫ối tượng trước khi hiển thị, còn hiệu ứng FlipV cho phép lật dọc ₫ối tượng. Hãy quan sát trang Web hình bên : Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 173
  30. Hiệu ứng FlipV, FlipH (mã nguồn trang Web) Demo hiệu ứng FlipH, FlipV Ảnh gốc Ảnh ₫ã bị FlipH Ảnh ₫ã bị FlipV Ảnh ₫ã bị FlipV & FlipH Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 174
  31. 5.3.5.7 Hiệu ứng Gray Hiệu ứng Gray cho phép tạo ảnh trắng ₫en theo n mức grayscale của ₫ối tượng gốc (thường là ảnh màu). Hãy quan sát trang Web dưới ₫ây : Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 175
  32. Hiệu ứng Gray (mã nguồn trang Web) function GrayIt(){ Image1.filters.Gray.enabled = true; } Demo hiệu ứng Gray Ảnh gốc (ấn chuột ₫ể tạo hiệu ứng ₫ộng) Ảnh ₫ã có hiệu ứng Gray Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 176
  33. 5.3.5.8 Hiệu ứng Invert Hiệu ứng Invert cho phép tạo âm bản của ₫ối tượng. Hãy quan sát trang Web dưới ₫ây : Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 177
  34. Hiệu ứng Invert (mã nguồn trang Web) function InvertIt(){ Image1.filters.Invert.enabled = true; } Demo hiệu ứng Invert Ảnh gốc (ấn chuột ₫ể tạo hiệu ứng ₫ộng) Ảnh ₫ã có hiệu ứng Invert Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 178
  35. 5.3.5.9 Hiệu ứng Light Hiệu ứng Light cho phép tạo nguồn sáng xác ₫ịnh ₫ể hiển thị ₫ối tượng. DHTML hỗ trợ 3 loại nguồn sáng khác nhau : từ 1 ₫iểm trên bề mặt ₫ối tượng, nguồ n sáng // chiếu vào ₫ối tượng, nguồn sáng từ 1 ₫iểm ngoài không gian chiếu vào ₫ối tượng. Hãy quan sát trang Web dưới ₫ây : Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 179
  36. Hiệu ứng Light (mã nguồn trang Web) function Setlight1(){ Image1.filters.Light.enabled = true; Image1.filters.Light.clear(); Image1.filters.Light.addcone(0,0,0,250,200,255,255,255,30,15); } Demo hiệu ứng Light : tia quét bề mặt ảnh Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 180
  37. Hiệu ứng Light Hãy quan sát trang Web dưới ₫ây, nó thể hiện kết quả của việc dùng nguồn sáng là 1 ₫iểm ngoài không gian chi ếu thẳng gố c vào ₫ối tượng : Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 181
  38. Hiệu ứng Light (mã nguồn trang Web) function Setlight2() { Image2.filters.Light.enabled = true; Image2.filters.Light.clear(); Image2.filters.Light.addPoint(60,60,50,255,255,255,100); } Demo hiệu ứng Light : tia quét từ 1 ₫iểm ngoài chiếu thẳng gốc vào ảnh Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 182
  39. Hiệu ứng Light Hãy quan sát trang Web dưới ₫ây, nó thể hiện kết quả của việc dùng nguồn sáng song song ngoài không gian chi ếu thẳng g ốc vào ₫ối tượng : Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 183
  40. Hiệu ứng Light (mã nguồn trang Web) function Setlight3() { Image3.filters.Light.enabled = true; Image3.filters.Light.clear(); Image3.filters.Light.AddAmbient(255,0,255,100); } Demo hiệu ứng Light Tia sáng từ nguồn sáng // ngoài chiếu thẳng gốc vào ảnh Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 184
  41. 5.3.5.10 Hiệu ứng MaskFilter Hiệu ứng MaksFilter cho phép tạo "mặt nạ" của ₫ối tượng. Hãy quan sát trang Web dưới ₫ây : Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 185
  42. Hiệu ứng MaskFilter (mã nguồn trang Web) function WaveIt() { Image1.filters.item(0).enabled = true; Image1.filters.item(0).color = "#0000ff"; } Demo hiệu ứng MaskFilter Ảnh gốc (ấn chuột ₫ể tạo hiệu ứng ₫ộng) Ảnh ₫ã có hiệu ứng MaskFilter Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 186
  43. 5.3.5.11 Hiệu ứng Wave Hiệu ứng Wave cho phép biến ₫ổi ₫ối tượng theo hàm sin. Hãy quan sát trang Web dưới ₫ây : Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 187
  44. Hiệu ứng Wave (mã nguồn trang Web) function WaveIt(){ Image1.filters.item(0).enabled = true; Image1.filters.item(0).add = "false"; Image1.filters.item(0).freq =2; Image1.filters.item(0).phase =90; Image1.filters.item(0).strength=15; Image1.filters.item(0).lightstrength =40; } Demo hiệu ứng Wave "> Ảnh gốc (ấn chuột ₫ể tạo hiệu ứng ₫ộng) Ảnh ₫ã có hiệu ứng Wave Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 188
  45. 5.3.5.12 Hiệu ứng X-ray Hiệu ứng X-ray cho phép tạo kết quả chụp X-quang của ₫ối tượng. Hãy quan sát trang Web dưới ₫ây : Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 189
  46. Hiệu ứng X-ray (mã nguồn trang Web) function XrayIt(){ Image1.filters.xray.enabled = true; } Demo hiệu ứng X-ray Ảnh gốc (ấn chuột ₫ể tạo hiệu ứng ₫ộng) Ảnh ₫ã có hiệu ứng X-ray Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 190
  47. Các hiệu ứng cần ₫ối tượng có nền trong suốt Các hiệu ứng Shadow, DropShadow, Glow, Blur, Compositor mà chúng ta sẽ trình bày trong các slide kế tiếp cho kết quả ₫úng khi ₫ối tượng bị tác ₫ộng có nền trong suốt (transparent background). Một trong các dạng file ảnh cho phép khai báo nền trong suốt là GIF89a, bạn có thể dùng các phần mềm xử lý ảnh như PhotoShop, ImageReady, Photo Elements, CorelDraw, ₫ể tạo ảnh có nền trong suốt. Thí dụảnh sau có nền trong suốt ₫ược soạn bở i PhotoShop. Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 191
  48. 5.3.5.13 Hiệu ứng Shadow Hiệu ứng Shadow cho phép tạo vệt chiếu của ₫ối tượng, kết quả của việc dùng nguồn sáng song song chiếu vào ₫ối tượng theo 1 góc tới và cường ₫ộ chiếu sáng xác ₫ịnh. Hãy quan sát trang Web dưới ₫ây : Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 192
  49. Hiệu ứng Shadow (mã nguồn trang Web) function ShadowIt(){ Image1.filters.Shadow.enabled = true; Image1.filters.Shadow.color = "#ff0000"; Image1.filters.Shadow.direction =45; Image1.filters.Shadow.strength =15; } Demo hiệu ứng Shadow Ảnh gốc (ấn chuột ₫ể tạo hiệu ứng ₫ộng) Ảnh ₫ã có hiệu ứng Shadow Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 193
  50. 5.3.5.14 Hiệu ứng DropShadow Hiệu ứng Shadow cho phép tạo bóng của ₫ối tượng, kết quả của việc dùng nguồn sáng song song chiếu vào ₫ối tượng với 1 ₫ộ dời (offsetX, offsetY). Hãy quan sát trang Web dưới ₫ây : Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 194
  51. Hiệu ứng DropShadow (mã nguồn trang Web) function DropShadowIt(){ Image1.filters.DropShadow.enabled = true; Image1.filters.DropShadow.color = "#ff0000"; Image1.filters.DropShadow.offX = 10; Image1.filters.DropShadow.offY = -10; } Demo hiệu ứng DropShadow Ảnh gốc (ấn chuột ₫ể tạo hiệu ứng ₫ộng) Ảnh ₫ã có hiệu ứng DropShadow Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 195
  52. 5.3.5.15 Hiệu ứng Blur IE4.0 Hiệu ứng Blur (IE 4.0) cho phép tạo hiệu ứng ₫ối tượng chạy theo 1 góc tới và cường ₫ộ xác ₫ịnh. Hãy quan sát trang Web dưới ₫ây : Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 196
  53. Hiệu ứng Blur IE4.0 (mã nguồn trang Web) function BlurIt(){ Image1.filters.Blur.enabled = true; Image1.filters.Blur.direction = 45; Image1.filters.Blur.strength = 15; } Demo hiệu ứng Blur IE 4.0 Ảnh gốc (ấn chuột ₫ể tạo hiệu ứng ₫ộng) Ảnh ₫ã có hiệu ứng Blur IE 4.0 Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 197
  54. 5.3.5.16 Hiệu ứng Blur IE 5.5 Hiệu ứng Blur IE 5.5 cho phép làm nhòe ₫ối tượng. Hãy quan sát ảnh dưới ₫ây : Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 198
  55. Hiệu ứng Blur IE 5.5 (mã nguồn trang Web) function BlurIt(){ Image1.filters.item(0).enabled = true; Image1.filters.item(0).PixelRadius=15; Image1.filters.item(0).MakeShadow=false; } Demo hiệu ứng Blur của IE 5.5 Ảnh gốc (ấn chuột ₫ể tạo hiệu ứng ₫ộng) Ảnh ₫ã có hiệu ứng Blur IE 5.5 Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 199
  56. 5.3.5.17 Hiệu ứng Glow Hiệu ứng Glow cho phép làm nhòe xung quanh ₫ối tượng. Hãy quan sát ảnh dưới ₫ây : Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 200
  57. Hiệu ứng Glow (mã nguồn trang Web) function GlowIt() { Image1.filters.Glow.enabled = true; Image1.filters.Glow.color = "#ff0000"; Image1.filters.Glow.strength = 10; } Demo hiệu ứng Glow Ảnh gốc (ấn chuột ₫ể tạo hiệu ứng ₫ộng) Ảnh ₫ã có hiệu ứng Glow Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 201
  58. 5.4 Dynamic font Nếu trang Web nào muốn sử dụng font ₫ộng (₫ược download ₫ộng từ server về chứ không dùng font trên máy client), người xây dựng trang web cần dùng tag "@font-face" ₫ể ₫ịnh nghĩa từng font ₫ộng trong trang Web ₫ó. Thí dụ về việc ₫ịnh nghĩa font ₫ộng : @font-face { font-family: Helvetica; font-style: normal; font-weight: normal; src: url ("Fonts/Helv.eot"); } Để giúp tạo các trang Web dùng font ₫ộng ₫ược dễ dàng, Microsoft cung cấp tiện ích WEFT cho phép chuyển Website (gồm nhi ều trang Web theo cấu trúc cây phân cấp) từ dạng bình thường thành dạng sử dụng font ₫ộng, nhờ ₫ó người xây dựng Website không cần phải ₫ịnh nghĩa thủ công từng tag "@font-face". Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 202
  59. 5.5 Data Binding Tính chất này cho phép trang Web xử lý database mà không cần viết code, ta chỉ cần ₫ặc tả các tag HTML và các ₫ối số của chúng. Qui trình cụ thể là : 1. ₫ặc tả ₫ối tượng DSO (Data Source Object) miêu tả database cần truy xuất. Microsoft hỗ trợ 3 ₫ối tượng DSO : TDC (Tabular Data Control), RDS (Remote Data Service) và MSHTML DSO. Thí dụ sau là tag HTML ₫ặc tả ₫ối tượng TDC truy xuất các record dữ liệu ₫ược lư u trên file danhbadienthoai.csv. File *.csv thường ₫ược tạo bởi chức năng Export của Excel, Access, Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 203
  60. Data Binding 2. ₫ặc tả các tag HTML sử dụng dữ liệu của ₫ối tượng DSO và hiển thị nó, ta gọi các tag HTML này là các ₫ối t ượng "Data Consumer". Có 2 loại tag Data consumer : xử lý dữ liệ u ₫ơn giản như tag INPUT & xử lý dữ liệu bảng như tag TABLE. Thí dụ tag TABLE sau cho phép hiển thị các record ₫ược chứa trong ₫ối tượng DSO của slide trước : Tên thuê bao Số ₫iện thoại Địa chỉ Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 204
  61. Data Binding (mã nguồn trang Web) Demo Data Binding : Hiển thị bảng dữ liệu từ file data có sẵn Tên thuê bao Số ₫iện thoại Địa chỉ Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 205
  62. 5.6 Thí dụ về Client-script ƒ Chúng ta hãy xây dựng 1 Website ph ục vụ trò chơi dò mìn ₫ơn giản có trang homepage như sau (trạng thái ₫ang chơi) : Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 206
  63. Thí dụ về Client-script ƒ Trang homepage ở trạng thái thua như sau : Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 207
  64. Trò chơi dò mìn Phần tử chính của trang web dò mìn là ma trận mìn, thí dụ ta chọn kích thước cố ₫ịnh là 8*8. Để thể hiện ma trậ n mìn, ta dùng 64 tag , chia làm 8 nhóm, mỗi nhóm 8 tag miêu tả 1 hàng mìn ₫ược kết thúc bởi tag ₫ể xuống hàng. Mỗi tag thể hi ện 1 ô mìn, mỗi ô mìn có các trạng thái sau : -chưa ₫ạp (thể hiện bằng ảnh wm_nul.gif) - ₫ã ₫ạp (thể hiệ n bằng 1 trong 11 ảnh bitmap : 0-8 mìn xung quanh nó, mìn nổ, mìn chưa kịp nổ). Dữ liệu chính của trò chơi gồm 2 biến array : - status[8][8], phần tử status[i][j] chứa giá trị luận lý miêu tả cell tương ứng ₫ã bị ₫ạp chưa. - min[8][8], phần tử min[i][j] chứa giá trị luận lý miêu tả cell tương ứng có mìn hay không. Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 208
  65. Trò chơi dò mìn Về việc xử lý sự kiện, ta có 2 phương án khác nhau : -k ết hợp toàn trang web với hàm xử lý sự kiện onclick, hàm này phải kiểm tra vị trí ấn chuột có nằm trong bàn mìn không, nếu có thì xác ₫ịnh vị trí i,j rồ i kiểm tra có mìn không ₫ể ₫áp ứng phù hợp. -kết hợp vớ i từng cell mìn 1 hàm xử lý sự kiện, hàm này xử lý ngay vị trí i,j ₫ể ₫áp ứng phù hợp theo trạng thái củ a vị trí ₫ó. Các hàm chức năng : - domin(i,j) kiểm tra việc ₫ạp vào vị trí i,j. - doquanh(i,j) ₫i dùm người dùng các cell quanh cell (i,j) vì biết chắc không có mìn. - count(i,j) ₫ế m số mìn xung quanh vị trí (i,j). Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 209
  66. Trò chơi dò mìn ƒ Ta có thể dùng trình soạn thảo bitmap như Paint ₫ể soạn thảo từng hình theo yêu cầu. Lưu ý tất cả hình bitmap ₫ều có cùng kích thước (thí dụ 17*17). ƒ Tạo thư mục miêu tả webiste, copy tất cả các file hình vừa soạn vào thư mục này, rồi dùng trình soạn thảo văn bản bất kỳ ₫ể soạn nội dung trang web trò chơi như các slide kế. ƒ Lưu ý nội dung chính của trang Web gồm 2 phần : phần HTML miêu tả ma trận mìn dùng 64 tag miêu tả ma trận 8*8 ô, phần code java script miêu tả các hàm xử lý ấn chuột và các hàm dịch vụ kèm theo Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 210
  67. Trò chơi dò mìn // Cac bien toan cuc var odado=0; var dangchoi=0; var data_tbl; var stat_tbl; // Khoi tao mang function MakeArray(size) { this.length = size; return this; } Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 211
  68. Trò chơi dò mìn // Khoi dong tro choi function wm_init(){ var i,j; odado = 0; dangchoi = 1; // Hien thi ban min trong for (i =0; i<64; i++) document.images[i].src = "wm_nul.gif"; // An button choi tiep document.all.Mesg.innerText = "Hay do tung o min"; document.all.IDSTART.style.display = "none"; // Tao cac bang va khoi dong trang thai data_tbl= new MakeArray(64); stat_tbl= new MakeArray(64); for (i=0; i<64; i++) { data_tbl[i] = stat_tbl[i] = 0; } Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 212
  69. Thí dụ về Client-script // Xep ngau nhien 10 trai min i = 0; while (i =0 && c-1>=0 && data_tbl[(h-1)*8+(c-1)]) cnt++; if (h-1>=0 && data_tbl[(h-1)*8+c]) cnt++; if (h-1>=0 && c+1 =0 && data_tbl[h*8+(c-1)]) cnt++; if (c+1 =0 && data_tbl[(h+1)*8+(c-1)]) cnt++; if (h+1<8 && data_tbl[(h+1)*8+c]) cnt++; if (h+1<8 && c+1<8 && data_tbl[(h+1)*8+(c+1)]) cnt++; return cnt; } Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 213
  70. Thí dụ về Client-script // Do tu dong cac o bao quanh o h,c function doquanh(h,c) { if (h-1>=0 && c-1>=0 && stat_tbl[(h-1)*8+(c-1)]==0) domin(h-1,c-1); if (h-1>=0 && stat_tbl[(h-1)*8+c]==0) domin(h-1,c); if (h-1>=0 && c+1 =0 && stat_tbl[h*8+(c-1)]==0) domin(h,c-1); if (c+1 =0 && stat_tbl[(h+1)*8+(c-1)]==0) domin(h+1,c-1); if (h+1<8 && stat_tbl[(h+1)*8+c]==0) domin(h+1,c); if (h+1<8 && c+1<8 && stat_tbl[(h+1)*8+(c+1)]==0) domin(h+1,c+1); } // Do min o vi tri h,c function domin(h,c){ var i,cnt; i = h*8+c; if (stat_tbl[i]) return 0; //₫ã ₫ạp rồi ô này Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 214
  71. Thí dụ về Client-script if (data_tbl[i] ==1) { // Dap trung min for (h=0;h<64;h++){ if (data_tbl[h]==1) document.images[h].src = "wm_mini.gif"; } document.images[i].src = "wm_mina.gif"; document.all.Mesg.innerText = "Ba da chet"; document.all.IDSTART.style.display = ""; dangchoi = 0; } else { // do trung cho khong co min cnt = winecnt(h,c); stat_tbl[i] = 1; if (cnt ==0) { document.images[i].src = "wm_nul1.gif"; doquanh(h,c); } if (cnt ==1) document.images[i].src = "wm_1.gif"; if (cnt ==2) document.images[i].src = "wm_2.gif"; if (cnt ==3) document.images[i].src = "wm_3.gif"; Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 215
  72. Thí dụ về Client-script if (cnt ==4) document.images[i].src = "wm_4.gif"; if (cnt ==5) document.images[i].src = "wm_5.gif"; if (cnt ==6) document.images[i].src = "wm_6.gif"; if (cnt ==7) document.images[i].src = "wm_7.gif"; if (cnt ==8) document.images[i].src = "wm_8.gif"; odado++; } if (odado ==54) { document.all.Mesg.innerText = "Ba da thang"; document.all.IDSTART.style.display = ""; dangchoi = 0; } } Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 216
  73. Thí dụ về Client-script // Xu ly khi an mouse function document_onmousedown() { var i,h; if (dangchoi == 0) return 0; i = window.event.srcElement.sourceIndex-12; if (i =8 || c == 8) return 0; domin(h,c); } //Choi lai khi an button nay function btnStart_onclick() { wm_init(); } Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 217
  74. Thí dụ về Client-script Trang web demo tro choi do min Nguoi viet : Nguyen Van Hiep Hay do tung o min Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 218
  75. Thí dụ về Client-script ƒ Sau khi soạn xong trang Web, cất nó lên file WinMine.html trong thư mục Website. ƒ Chạy IE và thử truy xuất trang Web dò mìn. Lưu ý bạn có thể truy xuất Webiste theo cấu hình cục bộ (file:///) hay thông qua Web Server (http:// ). Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 5 : DHTML & Clientscript Trường ĐH Bách Khoa Tp.HCM Slide 219