Đang tải... (xem toàn văn)
Mùa Thi
Thơ ta hơ hớ chưa chồng Ta u, muốn cưới, mà khơng
Xn Diệu
Mơn : Lập trình Mạng Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Chương : DHTML & Clientscript Slide 150 5.3.2 Style ₫ộng : thay ₫ổi font/co chữ Để ₫ặc tả font chữ ₫ược dùng cho phần tử, ta dùng thuộc tính liên quan color, font-style, font-variant, font-weight, font-size, fontfamily, Thí dụ trang Web phía dưới, 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 color kết hợp với chuỗi ₫ược hiệu chỉnh Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Lập trình Mạng Chương : DHTML & Clientscript Slide 151 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 Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Mơn : Lập trình Mạng Chương : DHTML & Clientscript Slide 152 5.3.3 Style ₫ộng : thay ₫ổi nội dung Ta thay ₫ổi nội dung tag lệnh cách dùng thuộc tính sau ₫ây : innertext : text nội dung tag lệnh ₫ược hiểu theo dạng text thô innerHTML : text nội dung tag lệnh ₫ược hiểu theo dạng HTML outertext : text cho toàn tag lệnh ₫ược hiểu theo dạng text thô 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 Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Lập trình Mạng Chương : DHTML & Clientscript Slide 153 Thay ₫ổi nội dung Ta thêm ₫ộng tag lệnh vào vị trí xác ₫ịnh trang Web cách dùng tác vụ tagi.insertAdjacentHTML(swhere, sText), ₫ó swhere là: beforeBegin : trước tag lệnh liên quan afterBegin : trước sau bất ₫ầu tag lệnh liên quan beforeEnd : thêm trước kết thúc tag lệnh liên quan afterEnd : thêm sau ₫ối tượng liên quan Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Mơn : Lập trình Mạng Chương : DHTML & Clientscript Slide 154 Data Binding (mã nguồn trang Web) Demo Data Binding : Hiển thị bảng liệu từ file data có sẵn Tên thuê baoSố ₫iện thoạiĐịa chỉ Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Mơn : Lập trình Mạng Chương : DHTML & Clientscript Slide 205 5.6 Thí dụ Client-script Chúng ta xây dựng Website phục vụ trị chơi dị mìn ₫ơn giản có trang homepage sau (trạng thái ₫ang chơi) : Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Mơn : Lập trình Mạng Chương : DHTML & Clientscript Slide 206 Thí dụ Client-script Trang homepage trạng thái thua sau : Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Lập trình Mạng Chương : DHTML & Clientscript Slide 207 Trị chơi dị mìn Phần tử trang web dị mìn ma trận mìn, thí dụ ta chọn kích thước cố ₫ịnh 8*8 Để thể ma trận mìn, ta dùng 64 tag , chia làm nhóm, nhóm tag miêu tả hàng mìn ₫ược kết thúc tag ₫ể xuống hàng Mỗi tag thể mìn, mìn có trạng thái sau : - chưa ₫ạp (thể ảnh wm_nul.gif) - ₫ã ₫ạp (thể 11 ảnh bitmap : 0-8 mìn xung quanh nó, mìn nổ, mìn chưa kịp nổ) Dữ liệu trị chơi gồm 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 Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Mơn : Lập trình Mạng Chương : DHTML & Clientscript Slide 208 Trò chơi dị mìn Về việc xử lý kiện, ta có phương án khác : - kết hợp toàn trang web với hàm xử lý kiện onclick, hàm phải kiểm tra vị trí ấn chuột có nằm bàn mìn khơng, có xác ₫ịnh vị trí i,j kiểm tra có mìn khơng ₫ể ₫áp ứng phù hợp - kết hợp với cell mìn hàm xử lý kiện, hàm xử lý vị trí i,j ₫ể ₫áp ứng phù hợp theo trạng thái vị trí ₫ó Các hàm chức : - 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 cell quanh cell (i,j) biết 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 Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Mơn : Lập trình Mạng Chương : DHTML & Clientscript Slide 209 Trò chơi dị mìn Ta dùng trình soạn thảo bitmap Paint ₫ể soạn thảo hình theo yêu cầu Lưu ý tất hình bitmap ₫ều có kích thước (thí dụ 17*17) Tạo thư mục miêu tả webiste, copy tất file hình vừa soạn vào thư mục này, dùng trình soạn thảo văn ₫ể soạn nội dung trang web trò chơi slide kế Lưu ý nội dung trang Web gồm 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ả hàm xử lý ấn chuột hàm dịch vụ kèm theo Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Mơn : Lập trình Mạng Chương : DHTML & Clientscript Slide 210 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 Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Mơn : Lập trình Mạng Chương : DHTML & Clientscript Slide 211 Trị chơi dị mìn // Khoi dong tro choi function wm_init(){ var i,j; odado = 0; dangchoi = 1; // Hien thi ban for (i =0; i=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 && c+1=0 && stat_tbl[h*8+(c-1)]==0) domin(h,c-1); if (c+1