Tài liệu HTML, DHTML và JAVASCRIPT

Tài liệu HTML, DHTML và JAVASCRIPT tài liệu, giáo án, bài giảng , luận văn, luận án, đồ án, bài tập lớn về tất cả các lĩ...

TÀI LIỆU HTML, DHTML VÀ JAVASCRIPT HA NOI 9/2008 TÀI LIỆU DÀNH CHO KHÓA HỌC CƠ BẢN VỀ HTML, JAVASCRIPT, CSS VÀ ASP  Tài liệu chứa gì? Tài liệu chứa số tập kèm giải thích nội dung kiến thức liên quan đến kỹ thuật lập trình Web phía Client, bao gồm: Phần A Chương 0: Tạo phần tử HTML Chương I: Bài tập JavaScript Chương II: Sử dụng lớp (đối tượng) xử lý Chuỗi, Ngày tháng, Toán học Chương III: Xử lý kiện trang HTML với JavaScript Chương IV: Định dạng phần tử HTML CSS Chương V: Tạo xử lý tầng (Layer) Chương VI: Nội dung động định vị động  Ai nên đọc tài liệu Là Sinh viên, giáo viên người cần có kiến thức lập trình Web  Cần có kiến thức trước đọc tài liệu này? Cần có kiến thức lập trình nói chung  Giáo trình lý thuyết - HTML, DHTML & JavaScript Aptech worldwide  Các trang web nên ghé thăm - www.3schools.com Search với từ khóa Java Script tutorial; Java script Introduction MỤC LỤC Chương 0: Tạo phần tử HTML Cú pháp chung: Tạo số phần tử .4 Chương I: Bài tập JavaScript Chương II: Sử dụng lớp xử lý Chuỗi, Ngày tháng, Toán học Chương III: Xử lý kiện trang HTML với JavaScript 17 Chương IV: Định dạng phần tử HTML CSS 26 Chương V: Tạo xử lý tầng (Layer) 36 Chương VI: Nội dung động định vị động 42 Chương 0: Tạo phần tử HTML Mục tiêu: Kết thúc chương này, người học  Tạo phần tử HTML cách code trực tiếp  Dùng Notepad tạo trang web chứa phần tử HTML Nội dung Giới thiệu Trong nhiều ứng dụng web lúc sử dụng trình soạn thảo tích hợp kiểu Frontpage hay Dreamweaver để thiết kế giao diện, đặc biệt giao diện có liên quan đến yếu tố lập trình, người lập trình phải tạo phần tử HTML hoàn toàn thủ công (Code không dùng kéo thả) Do vậy, việc hiểu cú pháp để tạo phần tử HTML vô quan trọng Cú pháp chung:    Kết hợp hai cách Trong : Tên loại phần tử HTML Button Text File Hidden Select TextArea CheckBox Thuộc tính Name VALUE MAXLENGTH ReadOnly Disable Cols, Rows Multiple TYPE Phần “giá trị” đặt cặp ngoặc kép cặp ngoặc đơn không cần !! Nếu đặt thuộc tính theo cách 2, tham chiếu bảng sau (gọi theo cú pháp CSS) Tạo số phần tử  Tạo nút nhấn  Tạo ô nhập  Tạo vùng nhập (Textarea) Nội dung ghi chú:  Tạo ô nhập Password  Tạo listbox Visual Basic Lập trình NET Lập trình ASP  Tạo ComboBox (chỉ cần bỏ thuộc tính size) Visual Basic Lập trình NET Lập trình ASP  Tạo hộp kiểm Visual Basic Active Server Pages  Tạo nút Radio Tên giống thuộc nhóm (Groups)  Phần tử chọn File  Tạo textbox ẩn (Hidden) Tạo phần tử đặt thuộc tính: + Tạo textbox đặt thuộc tính font: + Tạo textbox đặt thuộc tính thông qua phong cách CSS: + Tạo nhãn có font chữ xanh, có hiệu ứng: Xin chào + Tạo nút nhấn có màu đỏ: Kết Chương I: Bài tập JavaScript Mục tiêu: Kết thúc chương người học có thể:  Viết câu lệnh JavaScript nhúng vào trang web  Sử dụng đối tượng nhập xuất Promt, document.write  Truy xuất thuộc tính phần tử HTML câu lệnh JavaScript  Viết lệnh xử lý số kiện đơn giản Nội dung: Ví dụ 1: Cho người dùng nhập vào tên tuổi Hãy viết lại tên tuổi người hình hàm document.write, tên có màu đậm, tuổi gạch chân Giải mẫu: var Ten, Tuoi; // Khai báo biến để lưu tên tuổi Ten = prompt("Bạn nhập vào tên ", ""); Tuoi = prompt("Bạn nhập vào Tuổi : ", 20); document.write("Chào bạn : " + Ten + ""); document.write(""); // Xuống dòng document.write("Tuổi bạn : " + Tuoi + ""); Ví dụ 2: Tạo nút nhấn (button) có name welcome, value " Welcome " Một textbox có tên msg, value = "Welcome to" Hướng dẫn : Sử dụng phương thức (hàm) write đối tượng document để tạo Giải mẫu: document.write("Tao Button va Text bang Script"); document.write(""); document.write(" "); document.write(""); Ví dụ 3: Tạo nút ví dụ thêm chức sau: Khi người dùng click vào nút welcome hiển thị thông báo "Welcome to JavaScript !" Hướng dẫn: Dùng thẻ để tạo nút nhấn thêm thuộc tính onClick = ";" (Trong lệnh JavaScript bất kỳ, ví dụ lệnh document.write, alert, prompt lệnh gọi hàm v.v ) Giải mẫu: Lưu ý quan trọng: Trong JavaScript, xâu bao cặp nháy đơn nháy kép, ví dụ xâu: 'nháy đơn', "nháy kép" xâu hợp lệ, nhiên bạn viết : 'abc" hay "xyz' xâu không hợp lệ Trong trường hợp bạn muốn in thân dấu nháy đơn nháy kép hình bạn đặt trước ký tự \, ví dụ bạn in hình dòng chữ : Women's day hình hai hàm alert document theo cách sau : alert("Women's day"), document.write('Women\'s day'); alert("Women\"s day"); alert('Women"s day'); v.v Ví dụ 4: Lấy (đọc) giá trị phần tử HTML Tạo phần tử ví dụ thẻ HTML, người dùng click chuột vào nút Welcome hiển thị nội dung chứa text có tên msg Hướng dẫn: Để lấy giá trị phần tử HTML, bạn viết .value Ví dụ: msg.value cho ta giá trị text tên msg Giải mẫu: Ví dụ 5: Khai báo hàm JavaScript cách liên kết nút nhấn với hàm Tạo phần tử ví dụ 2, người dùng nhấn nút gọi hàm có tên HienThi, hàm hiển thị có chức hiển thị nội dung text có tên msg Hướng dẫn: Trong thẻ tạo button, bạn đặt thuộc tính onClick = "", trường hợp bạn đặt OnClick = "HienThi()" Điều có nghĩa người sử dụng Click chuột (OnClick = Click chuột) trình duyệt gọi hàm HienThi() Cũng giống ngôn ngữ C, Một hàm bắt buộc phải có cặp ngoặc đơn, cho dù có tham số hay không Ví dụ gọi hàm HienThi bạn phải viết HienThi() Giải mẫu: function HienThi() // Khai báo hàm tên HienThi { alert(msg.value); // Lấy nội dung text box hiển thị alert("Bạn nhập vào ô text thử lại !"); } Lưu ý: Trong C, để khai báo hàm thường bạn viết, ví dụ: int HienThi() v v Tuy nhiên, với JavaScript có khác tí chút, thay vào bạn viết function HienThi() Còn câu lệnh khác bạn viết tương tự ngôn ngữ C học Các hàm khai báo JavaScript bắt buộc phải đặt thẻ Chương II: Sử dụng lớp xử lý Chuỗi, Ngày tháng, Toán học Mục tiêu: Kết thúc học này, người học  Mô tả công dụng lớp xử lý Chuỗi (String), xử lý ngày tháng (Date) xử lý hàm toàn học Math  Sử dụng số phương thức, thuộc tính lớp  Vận dụng viết số trang web đơn giản có sử dụng đến lớp Nội dung: Bài tập 1: Minh hoạ cách khai báo sử dụng đối tượng Date để ngày hệ thống Yêu cầu: Hãy hiển thị ngày hệ thống máy tính trang Web nạp Thông tin hiển thị có dạng sau: Hôm thứ 2, ngày 13 tháng năm 2004 Hướng dẫn: Sử dụng đối tượng Date sử dụng hàm lấy thứ, ngày, tháng, năm để in thông tin hình Chú ý đến hàm tính tháng, ngày tuần bị hụt đơn vị Bài tập 2: Minh hoạ sử khai báo dùng đối tượng Date để lấy Giờ, phút, giây hệ thống Yêu cầu: Hiển thị Giờ phút tiêu đề cửa sổ trang Web nạp Hướng dẫn: Giá trị hiển thị tiêu đề trang web lưu thuộc tính title đối tượng document, để hiển thị thông tin tiêu đề, bạn cần viết: document.title = Ví dụ, để hiển thị dòng chữ "Hello Every body !", bạn viết: document.title "Hello Every body !" Minh hoạ: var D = new Date(); document.title = "Bây là: " + D.getHours()+" "+ D.getMinutes()+ " phút."; Bài 3: Vận dụng biến đối tượng Date để tính tuổi người Yêu cầu : Cho người dùng nhập vào năm sinh họ, sau hiển thị tuổi tương ứng Hướng dẫn: Sử dụng đối tượng Date để lấy năm Tuổi năm trừ năm sinh vừa nhập vào Minh hoạ mẫu: Tính tuổi var D = new Date(); var NamSinh, NamHienTai; NamHienTai = D.getYear(); // Lưu năm vào biến NamSinh = prompt("Bạn sinh năm ? : ",""); alert("Tuổi bạn : " + (NamHienTai-NamSinh)); Bài 4: Tương tự Năm sinh nhập vào không lớn năm Hướng dẫn: Sử dụng vòng lặp do…while để yêu cầu nhập lại năm sinh > năm Minh hoạ mẫu: Tinh tuoi var D = new Date(); var NamSinh, NamHienTai; NamHienTai = D.getYear(); //Lưu năm vào biến { NamSinh = prompt("Bạn sinh năm : ",""); } while (parseInt(NamSinh)>NamHienTai); //Nhập lại Năm sinh>năm alert("Tuổi bạn : " + (NamHienTai-NamSinh)); Bài 5: Minh hoạ cách đặt câu lệnh JavaScript vào phần tử HTML để thực thi người dùng click chuột sử dụng hàm open đối tượng window để mở trang web Yêu cầu: Viết đoạn Script cho người dùng nhập vào số nguyên Nếu người dùng nhập số mở trang Web http://www.vnn.vn, nhập số mở trang http://www.mail.yahoo.com, nhập số mở trang http://www.echip.com.vn, nhập số khác với 1, hay mở trang http://www.google.com Hướng dẫn: Để mở trang Web cửa sổ hành bạn viết sau: window.open("Địa trang cần mở") Ví dụ : window.open(http://www.vnn.vnn) để mở trang chủ VNN cửa sổ Như vậy, để giải yêu cầu toán , bạn cần cho người dùng nhập vào số sử dụng cấu trúc switch để kiểm tra mở trang web tương ứng Minh hoạ mẫu: Mở trang web với hàm open đối tượng window var LuaChon; LuaChon = prompt("Bạn nhập vào số để mở trang web : ", 1); switch (LuaChon) { case "1" : window.open("http://www.vnn.vn"); break; case "2" : window.open("http://www.mail.yahoo.com"); break; case "3" : window.open("http://www.echip.com.vn"); break; 10 border-top-style none | solid | double | groove | ridge | inset | outset border-top-style:solid border-right-style none | solid | double | groove | ridge | inset | outset border-right-style:double border-bottom-style none | solid | double | groove | ridge | inset | outset border-bottom-style:groove border-left-style none | solid | double | groove | ridge | inset | outset border-left-style:none border-style none | solid | double | groove | ridge | inset | outset border-style:ridge; } border-top border-width | border-style | border-color border-top: medium outset red border-right border-width | border-style | border-color border-right: thick inset maroon border-bottom border-width | border-style | border-color border-bottom: 10px ridge gray border-left border-width | border-style | border-color border-left: 1px groove red border border-width | border-style | border-color border: thin solid blue float none | left | right float:none clear none | left | right | both clear:left - Các thuộc tính phân loại - classification Properties Thuộc tính Giá trị hợp lệ Ví dụ display none | block | inline | list-item display:none list-style-type disk | circle | square | decimal | list-style-type:upper-alpha lower-roman | upper-roman | loweralpha | upper-alpha | none list-style-image url | none list-styleimage:url(icFile.gif) list-style-position inside | outside list-style-position:inside list-style keyword || position || url list-style: square outside url(icFolder.gif) 33 - Các thuộc tính định vị trí cho phần tử Thuộc tính Giá trị hợp lệ Ví dụ Có thể áp dụng cho clip Toạ độ hình clip:rect(0px 200px chữ nhật| auto 200px 0px) tất phần tử (all elements) height length | auto height:200px DIV, SPAN ptử bị thay left length | percentage | auto left:0px Các phần tử định vị tuyệt đối tương đối overflow visible | hidden | scroll | auto overflow:scroll tất phần tử position absolute| relative | static position:absolute tất phần tử top length | percentage | auto top:0px Các phần tử định vị tuyệt đối tương đối visibility visible | hidden | inherit visibility:visible tất phần tử width length | percentage | auto width:80% DIV, SPAN and replaced elements z-index auto | integer z-index:-1 Các phần tử định vị tuyệt đối tương đối - Thuộc tính liên quan đến in ấn - Printing Properties Thuộc tính Giá trị hợp lệ Ví dụ page-break-before auto | always || left | right page-break-before:always page-break-after auto | always || left | right page-break-before:auto -Pseudo Classes Thuộc tính Giá trị hợp lệ Ví dụ cursor auto | crosshair | default | hand | move | e- { cursor:hand; } resize | ne-resize | nw-resize | n-resize | seresize | sw-resize | s-resize | w-resize | text | wait | help active, hover, link, visited n/a a:hover { color:red; } first-letter, first-line any font manipulating declaration p:first-letter{ float:left;color:blue } 34 Một số ví dụ áp dụng: Ví dụ 1: Tạo dòng văn “Welcome to CSS” có font chữ Arial, in nghiêng kích thước font chữ 16 point Welcome to Ví dụ 2: Tạo textbox với màu màu tím (magenta) Ví dụ 3: Đặt file ảnh tương ứng vào tài liệu, vào textbox vào textarea *Ghi chú: -Khi ta đặt repeat-x ta có dãy ảnh xếp liên chiều ngang -Khi ta đặt repeat-y ta có dãy ảnh xếp liên chiều dọc Ví dụ 4: Tạo dòng văn bản, chứa xâu: "Trang chu cua HY-Aptech", từ "Trang chu" có màu xanh (blue) người dùng di chuyển chuột đến chữ "Trang chu" chuột chuyển thành hình bàn tay, chuột click lên chữ trang http://www.aptech.ute mở Tạo liên kết xử lý kiện Trang chu cua HY-Aptech ===> Xem kết Ghi chú: Khi muốn áp dụng kiểu cho số phần tử bạn cần viết : style="Tên_Thuộc_tính : Giá_Trị;" định nghĩa thẻ Trong cặp "Tên_Thuộc_tính : Giá_Trị;" viết cột ví dụ bảng 35 Nội dung trang Web là: Su dung bo chon P {font-family:.vntimeH; font-size:20pt; color:red} Know Your desktop Office 2000 Access 2000 Logic Building with C HTML, DHTML and JavaScript Dream Weaver Chương V: Tạo xử lý tầng (Layer) Mục tiêu chương giúp người học có thể:  Thay đổi thuộc tính phần tử HTML có kiện chuột bàn phím xảy  Định nghĩa tầng (Layer) IE Netscape  Ẩn, tầng lệnh JavaScript  Tạo menu liên kết đến trang khác sử dụng tầng A TÓM TẮT LÝ THUYẾT Một số kiện thường dùng: - Sự kiện Click chuột (onClick) kích hoạt chuột click - Sự kiện di chuyển chuột vào bên phần tử (onMouseOver) kích hoạt chuột di chuyển chuột từ vào phần tử - Sự kiện di chuột (onMouseOut) kích hoạt di chuyển chuột từ bên phần tử khỏi phần tử - Sự kiện nhấn phím (onKeyUp) kích hoạt người dùng nhấn phím Thay đổi thuộc tính phần tử HTML Để thay đổi thuộc tính phần tử HTML trang lệnh JavaScript, bạn viết sau: document.all..style. = Trong đó:  giá trị mà bạn đặt cho thuộc tính ID, ví dụ: THAY ĐỔI THUỘC TÍNH CỦA THẺ trường hợp ‘TieuDe’  tên thuộc tính cần thay đổi Bạn tra tài liệu giáo viên phát: “Danh sách thuộc tính” Ví dụ : text-align, font-size, color v.v… 36  giá trị hợp lệ cho thuộc tính cần thay đổi (Bạn tra tài liệu “Danh sách thuộc tính”) ** Lưu ý: Nếu bạn muốn thay đổi thuộc tính phần tử bắt buộc bạn phải gán cho thẻ giá trị ID (Như ví dụ trên) Định nghĩa tầng IE Netscape a Định nghĩa tầng IE Để định nghĩa tầng IE, bạn cần đặt thuộc tính position cho style Ví dụ: Thẻ H2 đặt tầng Tuy nhiên, với cách định nghĩa tầng chứa phần tử Nêu bạn muốn tầng chứa nhiều phần tử bạn định nghĩa tầng cặp thẻ sau: Phần tử nằm tầng Trang chủ báo E-Chip Mỗi tầng tạo ra, bạn nên gán thuộc tính ID cho tầng giá trị (Không trùng với ID thẻ trang) Bạn hoàn toàn thực thao tác tầng :  Ẩn tầng, ví dụ : document.all.Tang1.style.visibility = ‘hidden’  Hiện tầng, ví dụ : document.all.Tang1.style.visibility = ‘visible’  Di chuyển tầng sang trái pixel, ví dụ: document.all.Tang1.style.pixelLeft -=  Di chuyển tầng sang phải pixel, ví dụ: document.all.Tang1.style.pixelLeft +=  Di chuyển tầng lên pixel, ví dụ: document.all.Tang1.style.pixelTop -=  Di chuyển tầng xuống pixel, ví dụ: document.all.Tang1.style.pixelTop+=5 b Định nghĩa tầng Netscape Trong Netscape, việc định nghĩa (tạo ra) tầng có phần dễ dàng với thẻ LAYER : Phần tử nằm tầng Trang chứa nhiều mẹo vặt IT  Để ẩn / tầng tạo thẻ LAYER thông qua lệnh JavaScript, bạn viết : o document..visibility = 'hidden' (để ẩn tầng) o document..visibility = 'show' (để tầng) Trong : giá trị thuộc tính name **Lưu ý: Để truy cập đến tầng, IE sử dụng giá trị thuộc tính ID, Netscape sử dụng giá trị thuộc tính name  Ví dụ : document.Tang1.visibility = 'hidden' Để ẩn tầng có tên Tang1 tạo  Để di chuyển tầng JavaScript, bạn viết: o document..left = (Di chuyển sang trái phải) 37 o document..top = (Di chuyển lên | xuống) Trong đó: âm để di chuyển lùi, giá trị dương để di chuyển tiến    Ví dụ di chuyển tầng lên thêm 10 pixel o document.Tang1.top -= 10 Ví dụ di chuyển tầng sang phải thêm 10 pixel o document.Tang1.left += 10 Ví dụ, di chuyển tầng đến vị trí cách mép cửa sổ trình duyệt 100px, cách mép trái 50 pixel o document.Tang1.top = 100 o document.Tang1.left = 50 B BÀI TẬP MẪU Bài số 1: Minh hoạ kiện di chuyển chuột vào phần tử Yêu cầu: Tạo liên kết đến trang http://www.w3schools.com thẻ H2 Có màu xanh, màu chữ trắng Khi chuột di chuyển đến đổi màu thành màu đỏ Hướng dẫn: Để đổi màu thành đỏ thẻ H2 (hoặc thẻ bất kỳ) bạn viết: document.all.LienKet.style.backgroundColor = ‘red’ Trong LienKet giá trị thuộc tính ID  Câu lệnh JavaScript đặt đâu ?  Theo yêu cầu đầu : “Khi chuột di chuyển …” Do câu lệnh đặt kiện di chuyển chuột đến (có tên onMouseMove) Minh hoạ: Hiệu ứng di chuyển chuột Trang dạy JavaScript http://www.w3schools.com  Nhắc lại: Các thuộc tính bảng tra cứu “danh sách thuộc tính” có chứa dấu gạch nối (ví dụ : background-color) viết JavaScript, bạn phải chuyển ký tự đứng sau dấu gạch nối thành chữ hoa bỏ dấu gạch nối (Ví dụ từ background-color  backgroundColor) Bài số 2: Minh hoạ kiện di chuyển chuột vào khỏi phần tử Yêu cầu: Như tập 1, thêm yêu cầu sau: Khi người dùng di chuyển chuột khỏi phần tử H2 đặt lại màu màu xanh Hướng dẫn: Viết lệnh thay đổi màu thành xanh kiện di chuột Minh hoạ: Hiệu ứng di chuyển chuột Version 2 38 Trang dạy JavaScript http://www.w3schools.com Bài số 3: Minh hoạ tạo liên kết hoàn chỉnh đến trang web Yêu cầu: Như số người dùng click chuột mở trang http://www.w3schools.com Và chuột có hình bàn tay Hướng dẫn: Để mở trang web bạn viết: window.open(‘Địa URL’) Lệnh mở đặt kiện Click chuột (Vì theo yêu cầu: người dùng click chuột mở) Minh hoạ: Hiệu ứng di chuyển chuột Version 2 Trang dạy JavaScript http://www.w3schools.com Bài tập tự giải: Bài tự giải 1: Hãy tạo menu đặt theo chiều dọc gồm mục sau: Giới thiệu Tin tức Sản phẩm Trợ giúp Yêu cầu: mục có màu xanh, màu chữ vàng (yellow) Khi người dùng di chuyển đến mục mục có màu màu đỏ Khi di chuyển chuột khỏi màu trở lại màu xanh Khi người dùng click vào mở trang tương ứng http://www.echip.com.vn, http://www.manguon.com, http://www.w3schools.com http://www.quantrimang.com Gợi ý: Làm tương tự tập mẫu, tạo thẻ H2 39 Bài tập tự giải 2: Hãy tạo menu gồm mục theo chiều ngang, Hướng dẫn: Nếu bạn dùng thẻ H2, mục tự động đặt riêng dòng Để đặt nhiều mục dòng, bạn tạo bảng có hàng nhiều cột Mỗi mục đặt thẻ Để thay đổi kích thước, màu nền, màu chữ v.v bạn sử dụng STYLE: MenuBar{background-color:blue; color:white; font-family:arial; font-size:16pt;width:150px; cursor:hand} Menu { background-color: yellow; color: white; position: absolute; top : 40; visibility : hidden} function AnCacMenu() // Hàm Ẩn Menu có tác dụng làm ẩn tầng gọi { document.all.Menu1.style.visibility = 'hidden'; document.all.Menu2.style.visibility = 'hidden'; document.all.Menu3.style.visibility = 'hidden'; } liệu (Xem lại phần Nổi bọt kiện) > Trang đăng ký E-Mail Đăng ký Website miễn phí Trang dạy JavaScript Trang IT Tiếng việt Đại học Bách khoa Hà Nội Đại học cần thơ Đại học Quốc gia Các liên kết Tin tức Các hoạt động Chương VI: Nội dung động định vị động Mục tiêu chương giúp người học có thể:    Thay đổi nội dung thẻ trang web thông qua JavaScript Sử dụng JavaScript để di chuyển tầng Vận dụng khả định vị động nội dung động vào thiết kế web C TÓM TẮT LÝ THUYẾT 42 Nội dung động khả cho phép thay đổi nội dung trang web lệnh Script Để thay đổi nội dung phần tử IE, thay đổi thuộc tính :  innerText  innerHTML  outerText  outerHTML Cú pháp dùng để thay đổi giá trị thuộc tính sau: document.all.. = Trong Click here Bài số 3: Minh hoạ thay thuộc tính outerText Yêu cầu: Tạo nút có nhãn "Open" Khi người dùng click vào nút mở trang http://www.echip.com.vn, cửa sổ dòng nút thay dòng chữ "Trang mở" Hướng dẫn:  Để mở trang web cửa sổ mới, bạn viết: window.open("Địa URL trang cần mở", "_Blank")  Thay nút dòng chữ thông qua thay đổi thuộc tính outerText nút Minh hoạ: 44 function ThayDoi() { window.open("http://www.echip.com.vn","_blank"); document.all.Nut1.outerText='"Trang thăm"; } Bài số 4: Minh hoạ thay đổi thuộc tính outerHTML Yêu cầu: Tạo dòng chữ "Click here" có màu xanh, kích cỡ H1 Khi người dùng click vào dòng chữ thay liên kết đến trang http://www.vn.vn Hướng dẫn: Do người dùng click vào dòng chữ thay liên kết nên thuộc tính cần thay đổi outerHTML Câu lệnh thay đổi đặt kiện Click chuột Minh hoạ: function ChenLienKet() { document.all.LienKet.outerHTML='Trang Aptech' ; } Click Here Bài số 5: Minh họa việc định vị động IE Yêu cầu: Tạo nút có nhãn "Sign Up" Khi chuột di chuyển nút hiển thị dòng nhắc "Đăng ký hòm thư mới" có màu vàng vị trí chuột Khi chuột di chuyển dòng nhắc ẩn Hướng dẫn: Bạn tạo tầng chứa dòng chữ "Đăng ký hòm thư mới" có màu vàng Khi chuột di chuyển đến (onMouseMove) đặt thuộc tính visibility 'visible' tầng di chuyển chuột (onMouseOut) đặt lại thuộc tính visibility 'hidden' để ẩn tầng Lưu ý, vị trí chuột lưu thuộc tính event.clientX event.clientY Bạn gán vị trí chuột cho thuộc tính pixelLeft pixelTop để định vị tầng Minh hoạ: 45 function HienThi() { document.all.Tang1.style.pixelLeft = event.clientX; document.all.Tang1.style.pixelTop = event.clientY; document.all.Tang1.style.visibility = 'visible'; } function AnTang() // Ẩn Tầng Tang1 { document.all.Tang1.style.visibility = 'hidden'; } Đăng ký hòm thư Kết chuột di chuyển vào nút Bài số 6: Minh hoạ nội dung Netscape Yêu cầu: Tạo tầng có tên Tang1, nút nhấn có nhãn "Nạp trang Web" hộp text có tên DiaChi Khi người dùng nhập địa vào hộp text nhấn nút "Nạp trang web" nội dung trang nạp vào tầng Tang1 Hướng dẫn: - Dùng thẻ LAYER để tạo tầng đặt tên cho Tang1 - Viết kiện onCLick nút "Nạp trang web" câu lệnh nạp tài liệu vào tầng Cú pháp nạp tài liệu vào tầng Netscape sau: document..src = "Địa trang cần nạp" Trong trường hợp : document.Tang1.src = document.form1.DiaChi.value Minh hoạ: Hiển thị tooltip 46 Tầng dùng để hiển thị trang Web bạn gõ hộpText ! C BÀI TẬP TỰ GIẢI Bài số 1: Tạo tầng có chứa dòng chữ "Hello", kích thước H1 nút nhấn có nhãn "Thay đổi" Khi người dùng click vào nút yêu cầu người dùng nhập vào xâu, sau thay nội dung thẻ H1 xâu nhập vào (Theo cách: thay thuộc tính innerText, innerHTML, outerText, outerHTML) Bài số 2: Tạo thẻ H1, màu chữ xanh dùng để hiển thị thời gian hệ thống (gồm giờ:phút:giây) Gợi ý: Viết hàm CapNhat để lấy giờ:phút:Giây máy tính sau gán cho thuộc tính innerText thẻ H1 Sử dụng hàm setInterval("CapNhat();", 1000) để liên tục cập nhật thời gian theo giây Bài số 3: Tạo tầng IE, tầng chứa ảnh Tầng thứ chạy từ trái sang phải hình, tầng thứ hai chạy từ xuống hình Gợi ý: Sử dụng hàm setInterval để gọi hàm di chuyển tầng Bài số 4: Tạo tầng chứa liên kết Chuột click vị trí tầng đặt vị trí Gợi ý: Viết lệnh kiện onClick thẻ BODY Bài số 5: Tạo form đăng ký E-Mail tương tự Yahoo (Bạn cần tạo số phần tử, không cần tạo hết) Mỗi người dùng di chuyển chuột đến phần tử hiển thị lời thích Tiếng việt (Xem Bài số 5) Bài số 6: Tạo tầng (Trong Netscape), tầng nạp trang tương ứng sau: http://www.vnn.vn, http://www.echip.com.vn http://www.manguon.com Bài số 7: Tạo tầng chứa ảnh, nút có nhãn "Di chuyển" Khi người dùng click vào nút ảnh di chuyển chéo từ góc bên phải xuống góc bên trái hình Gợi ý: Tăng dần pixelTop, giảm pixelLeft Bài số 8: Hãy làm hết tập sách giáo khoa giáo trình HTML, DHTML & JavaScript 47 [...]... với các phần tử HTML, như textbox, button, checkbox, Select v.v… Các trình duyệt đều cho phép ta thực thi một hoặc nhiều câu lệnh JavaScript khi người sử dụng click chuột lên các phần tử đó Vấn đề ở chỗ, viết các câu lệnh đó như thế nào ? Để viết các câu lệnh JavaScript khi người dùng click chuột lên một phần tử nào đó, trong thẻ của phần tử này, ta viết như sau: OnClick = "Các câu lệnh JavaScript" 11... câu lệnh JavaScript" 11 "Các câu lệnh JavaScript" ở đây là bất kỳ câu lệnh JavaScript nào và chúng phải được cách nhau bởi dấu chấm phảy Ngoài ra, các câu lệnh phải đặt trong cặp dấu nháy kép (Hoặc nháy đơn) Ví dụ một số cách đưa câu lệnh JavaScript cần thực thi khi người dùng click chuột 1 Onclick = "alert('Hello world';" 2 OnClick = 'document.write("Welcome to JavaScript" );' 3 OnClick = "var x,y;... Thực hiện câu lệnh alert('Hello world') 2 : Thực hiện câu lệnh document.write('Welcome to JavaScript' ); 3 : Thực hiện NHIỀU câu lệnh JavaScript 4 : Thực hiện nhiều câu lệnh JavaScript và có lời gọi đến hàm KiemTra(Tuoi) 5 : Thực hiện câu lệnh gọi hàm KiemTra() Minh hoạ mẫu: Minh hoạ đưa câu lệnh JavaScript vào các phần tử ...TÀI LIỆU DÀNH CHO KHÓA HỌC CƠ BẢN VỀ HTML, JAVASCRIPT, CSS VÀ ASP  Tài liệu chứa gì? Tài liệu chứa số tập kèm giải thích nội dung kiến thức liên... tài liệu Là Sinh viên, giáo viên người cần có kiến thức lập trình Web  Cần có kiến thức trước đọc tài liệu này? Cần có kiến thức lập trình nói chung  Giáo trình lý thuyết - HTML, DHTML & JavaScript. .. hiển thị thông báo "Welcome to JavaScript !" Hướng dẫn: Dùng thẻ để tạo nút nhấn thêm thuộc tính onClick = " ;" (Trong lệnh JavaScript bất kỳ, ví dụ lệnh