Bài tập java Script
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 .9 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 khơng phải 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 hồn tồ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"), 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ẻ 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, cịn 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 ... 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... lệnh JavaScript" 11 "Các câu lệnh JavaScript" câu lệnh JavaScript chúng phải cách dấu chấm phảy Ngoài ra, câu lệnh phải đặt cặp dấu nháy kép (Hoặc nháy đơn) Ví dụ số cách đưa câu lệnh JavaScript... 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 .9 Chương III: Xử lý kiện trang HTML với JavaScript 17 Chương IV: Định dạng
