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: CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 CuuDuongThanCong.com https://fb.com/tailieudientucntt : alert("Women's day"), alert('Women"s day'); v.v document.write('Women\'s day'); alert("Women\"s day"); 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ẻ CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 none | left | right | both clear - Các thuộc tính phân loại - classification Properties clear:left 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 | lower-roman | upper-roman | loweralpha | upper-alpha | none list-style-type:upper-alpha 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 CuuDuongThanCong.com https://fb.com/tailieudientucntt - 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 -Pseudo Classes auto | always || left | right page-break-before:auto 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 CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 pointWelcome 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 CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 ngồi (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 CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 hồn tồ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 CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 CuuDuongThanCong.com https://fb.com/tailieudientucntt 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'; } 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 CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 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 ngồi 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 ngồi (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 CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 CuuDuongThanCong.com https://fb.com/tailieudientucntt ...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... "Đỏ" Yêu cầu: Khi người dùng click vào nút xanh màu tài liệu xanh (blue), người dùng click vào nút đỏ màu tài liệu là: Đỏ (red) Hướng dẫn: Thuộc tính màu tài liệu lưu thuộc tính bgColor đối tượng... đọ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