Trong nhiều ứng dụng web không phải lúc nào chúng ta cũng có thể sử dụng trình soạn thảo tích hợp kiểu như Frontpage hay Dreamweaver để thiết kế giao diện, đặc biệt là khi giao diện này có liên quan đến yếu tố lập trình, khi đó người lập trình phải tạo các phần tử HTML hoàn toàn thủ công (Code chứ không dùng kéo thả). Do vậy, việc hiểu cú pháp để tạo các phần tử HTML là vô cùng quan trọng.
TÀI LIỆU HTML, DHTML VÀ JAVASCRIPT 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 - Search với từ khóa Java Script tutorial; Java script Introduction 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 10 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 54 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 55 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; fontsize: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'; } tài liệu (Xem lại phần Nổi bọt kiện) > Trang đăng ký EMail Đă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 59 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 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ở" 62 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ạ: 63 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 64 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ạ: 65 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ư visibility: hidden; 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 66 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 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 67 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 68 ... < /HTML> 26 Ví dụ 3: Tạo nút, nút thứ có value = "Xanh", nút thứ hai có value = "Đỏ" 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. .. 'red'; "> < /HTML> Ví dụ 4: Tạo danh sách lựa chọn gồm có màu: red, blue, brown lavender Khi người dùng chọn màu màu tài liệu thay đổi tương ứng Hướng dẫn: Để thay đổi màu tài liệu ta làm tương... người dùng nhập hai số hạng vào hộp SoHang1 SoHang2, sau click vào nút TinhTong kết tổng lưu vào hộp text KetQua Hướng dẫn: Để thay đổi giá trị thuộc tính phần tử HTML, bạn viết theo cách sau: