Bài tập Lập trình web với HTML & JavaScript và ASP.Net cơ bản

TRUNG TÂM TIN HỌC - ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP. HCM 227 Nguyễn Văn Cừ – Quận 5 – Tp. Hồ Chí Minh Tel: 8351056 – Fax 8324466 – Email: ttth@hcmuns.edu.vn Mã tài liệu: DT_NCM_LT_BT_LTW1 Phiên bản 2.5 – Tháng 01/2010 BÀI TẬP CHƯƠNG TRÌNH KỸ THUẬT VIÊN NGÀNH LẬP TRÌNH Học phần 4 --- LẬP TRÌNH WEB VỚI HTML & JAVASCRIPT VÀ ASP.NET CƠ BẢN Bài tập Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 1/40 BÀI 1: SỬ DỤNG CÁC MƠI TRƯỜNG 1.1. Hướng dẫn học viên làm quen với các mơi trường cài đặt ngơn ngữ HTML và JavaScript: - Notepad, Frontpage, Dreamweaver - Đặc điểm của từng mơi trường - Thao tác lưu trữ tập tin .html với font Unicode Bài tập Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 2/40 BÀI 2: NGƠN NGỮ HTML 2.1. Trang Các tag cơ bản ™ Ý nghĩa: Tạo trang web cĩ nội dung là bài tập Sử dụng các tag cơ bản. ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu 1 Trang web − Tiêu đề cửa sổ: Sử dụng các tag cơ bản 2 Nội dung trang web − Sử dụng các tag cơ bản để tạo trang web trên, trong đĩ: ƒ Dịng đầu tiên: Canh giữa ƒ Đọan văn bản ”Trung Tâm ... ngơn ngữ HTML”: Canh giữa Bài tập Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 3/40 2.2. Trang Các tag cơ bản – định dạng (bài làm thêm) ™ Ý nghĩa: Tạo trang web cĩ nội dung là bài tập Sử dụng các tag cơ bản, cĩ tơ màu cho các đoạn văn bản. ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu Hằng số màu 1 Trang web − Tiêu đề cửa sổ: Sử dụng các tag cơ bản 2 Nội dung trang web Sử dụng các tag cơ bản và thuộc tính của các tag để định dạng: − Dịng dầu tiên: canh giữa, màu xanh lá mạ − Dịng 2: màu xanh dương − Dịng 4 - tựa đề ”MẸ!”: chữ đậm cĩ màu hồng đậm và nền màu hồng nhạt − 3 đọan thơ: in nghiêng, cĩ 3 màu chữ khác nhau − Mỗi đọan cách nhau bởi 1 cây thước ngang − Tồn bộ bài thơ cĩ màu nền là màu vàng nhạt. #006600 #0000FF #FF3399, #FECFFD #FFFFCC Bài tập Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 4/40 2.3. Trang Định dạng trang web ™ Ý nghĩa: Tạo trang web cĩ nội dung là bài viết về Vạn Lý Trường Thành, cĩ định dạng trang web. ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu Hằng số màu 1 Trang web − Tiêu đề cửa sổ: Định dạng trang web 2 Nội dung trang web Sử dụng các tag và thuộc tính của tag để định dạng trang web: − Định dạng chung: + Nền: Màu nâu đất + Chữ: Màu trắng + Hình nền: Đặt giữa trang và khơng di chuyển khi cuộn trang. − Dịng dầu tiên: Canh giữa, màu vàng đậm #A06D21 #FFFFFF #FFCC00 Bài tập Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 5/40 2.4. Trang Định dạng văn bản ™ Ý nghĩa: Tạo trang web cĩ nội dung được định dạng theo nhiều hình thức. ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu Hằng số màu 1 Trang web − Tiêu đề cửa sổ: Định dạng văn bản 2 Nội dung trang web Sử dụng các tag định dạng văn bản để tạo trang web: − Định dạng như hình trên − Dạng cơng thức hĩa học và biểu thức phương trình bậc hai, cĩ chữ màu đỏ − Đoạn code vịng lặp For: chữ màu xanh dương đậm, nền màu xám, cĩ định dạng canh lề #FF0000 #0000CC, #CCCCCC 2.5. Trang Định dạng văn bản (Bài làm thêm) Bài tập Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 6/40 ™ Ý nghĩa: Tạo trang web cĩ nội dung là bài viết về Thượng Hải, được định dạng theo nhiều hình thức. ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu 1 Trang web − Tiêu đề cửa sổ: Định dạng văn bản 2 Nội dung trang web Sử dụng các tag định dạng văn bản và các thuộc tính định dạng để tạo trang web: − Định dạng như hình trên − Đọan văn đầu: canh lề trái − Dịng Bến Thượng Hải: canh lề phải, size=20px − Đọan văn cuối: canh lề phải 2.6. Trang Ký tự đặc biệt, chèn hình ảnh, tạo danh sách và liên kết ™ Ý nghĩa: Tạo trang web cĩ nội dung là thơng tin về Cơng ty Hoa tươi Nhân Ái, được định dạng theo nhiều hình thức. ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu 1 Trang web − Tiêu đề cửa sổ: Ký tự đặc biệt, chèn hình ảnh, tạo danh sách và liên kết 2 Nội dung trang web Sử dụng các tag định dạng và các thuộc tính định dạng để tạo trang web: − Định dạng như hình trên − Khi nhấn chuột vào dịng ”Trung Tâm Tin Học ...” : Mở trang web của TTTH – 2.7. Trang Tạo bảng Bài tập Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 7/40 ™ Ý nghĩa: Tạo trang web cĩ nội dung là danh sách các mĩn ăn ngon của Hà Nội. ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu Hằng số màu 1 Trang web − Tiêu đề cửa sổ: Tạo bảng 2 Nội dung trang web − Nền màu vỏ hột gà − Hình ảnh: Canh trái − Bảng biểu: + Dịng tiêu đề: Nền màu nâu đất và chữ màu trắng + Màu nền xen kẽ giữa các dịng là màu trắng và màu vỏ hột gà #FFEDCA #CC6600, #FFFFFF #FFFFFF, #FFEDCA 2.8. Trang Tạo bảng, trộn dịng và cột (bài làm thêm) ™ Ý nghĩa: Tạo trang web cĩ nội dung là chương trình học của ngành Lập trình Bài tập Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 8/40 ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu Hằng số màu 1 Trang web − Tiêu đề cửa sổ: Tạo bảng, trộn dịng và cột 2 Nội dung trang web − Font chữ là Tahoma và cĩ kích thước là 12px − Bảng biểu: gồm 11 dịng và 4 cột + Dịng tiêu đề: nền màu đỏ bầm, chữ trắng + Trình bày bảng biểu như hỉnh trên #CC0033;#FFFFFF 2.9. Trang Tạo form và các điều khiển trên form ™ Ý nghĩa Tạo trang web cho phép người dùng điền thơng tin vào Phiếu đăng ký tham gia trương trình khuyến mãi ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu 1 Trang web − Tiêu đề cửa sổ: Tạo form và các điều khiển 2 Nội dung trang web − Tạo form − Tạo table trong form − Tạo các điểu khiển Text Fields, Radio, Drop-down box và nút Button − Đ.k Nghề nghiệp cĩ danh sách như sau: − Tạo điều khiển nhãn dùng để in câu thơng báo ”Bạn đã đăng ký thành Bài tập Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 9/40 cơng!!!” ™ Yêu cầu xử lý: Stt Đối tượng Yêu cầu xử lý chức năng 1 Nút Đồng ý − Khi chọn: Xuất nội dung câu thơng báo Bài tập Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 10/40 BÀI 3: NGƠN NGỮ LẬP TRÌNH JAVASCRIPT 3.1. Trang Câu chào ™ Ý nghĩa Trang web cho phép người dùng nhập vào họ tên và xuất ra câu chào. ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu 1 Trang web − Tiêu đề trang: Sử dụng hộp thoại 2 Nội dung trang web − Tạo form − Tạo table − Sử dụng điều khiển TextFields và Button ™ Yêu cầu chức năng Stt Đối tượng Yêu cầu xử lý chức năng 1 Nút Xuất câu chào − Khi chọn, xuất hiện cửa sổ với lời chào ”Chào bạn ” 3.2. Trang Thay đổi câu chào (1) (2) (3) ™ Ý nghĩa: Trang web cho phép người dùng nhập vào họ tên và xuất ra câu chào. Bài tập Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 11/40 ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu 1 Trang web − Tiêu đề trang: sử dụng hộp thoại 2 Nội dung trang web − Tạo form − Tạo table − Sử dụng điều khiển TextFields, Label và Button ™ Yêu cầu chức năng Stt Đối tượng Yêu cầu xử lý chức năng 1 Trang web − Khi mới mở, xuất hiện hộp thoại yêu cầu nhập Họ tên của bạn (Hình 1), sau đĩ sẽ xuất hiện câu chào (Hình 2) 2 Nút Thay đổi câu chào − Khi chọn, xuất hiện câu ”Chào bạn ” (Hình 3) 3.3. Trang Xếp lọai cuối năm học ™ Ý nghĩa: Trang web cho phép người dùng nhập vào điểm trung bình HKI và HKII. Xuất điểm trung bình cuối năm và xếp loại. ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu 1 Trang web − Tiêu đề trang: Cấu trúc if ... else if ... else 2 Nội dung trang web − Tạo form − Tạo table − Sử dụng điều khiển TextFields, Label và Button ™ Yêu cầu chức năng Stt Đối tượng Yêu cầu xử lý chức năng Ghi chú 1 Nút Xuất xếp loại − Khi chọn, thực hiện: + Tính và xuất Điểm trung bình cả năm, biết rằng: Điểm trung bình cả năm = (ĐTB HKI + (ĐTB HKII *2))/3 + Xuất Xếp lọai, biết rằng: Tạo hàm Bài tập Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 12/40 9=< ĐTB cả năm <=10 : Giỏi 7=< ĐTB cả năm < 9 : Khá 5=< ĐTB cả năm < 7 : Trung bình ĐTB cả năm < 5 : Yếu 3.4. Trang Tính tiền thưởng cuối năm ™ Ý nghĩa: Trang web tính tiền thưởng cuối năm dựa trên Tiền lương hàng tháng và Xếp loại cuối năm. ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu 1 Trang web − Tiêu đề trang: Cấu trúc switch 2 Nội dung trang web − Tạo form − Tạo table − Sử dụng điều khiển TextFields, Drop-down box, Label và Button ™ Yêu cầu chức năng Stt Đối tượng Yêu cầu xử lý chức năng Ghi chú 1 Nút Tính − Khi chọn, thực hiện: + Tính Tiền thưởng, biết rằng: Tiền thưởng = (Tiền lương * hệ số thưởng), trong đĩ: Hệ số thưởng được tính như sau: ƒ Nếu Xếp loại là ”Lọai A”: 2 ƒ Nếu Xếp loại là ”Lọai B”: 1.8 ƒ Nếu Xếp loại là ”Lọai C”: 1.2 ƒ Nếu Xếp loại là ”Lọai D”: 0.8 + Xuất Tiền thưởng ra màn hình Tạo hàm Bài tập Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 13/40 3.5. Trang In bảng cửu chương ™ Ý nghĩa: Trang web cho phép người dùng nhập vào một số và in bảng cửu chương của số đĩ. ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu 1 Trang web − Tiêu đề trang: Vịng lặp for 2 Nội dung trang web − Tạo form − Tạo table − Sử dụng điều khiển TextFields, Label và Button ™ Yêu cầu xây dựng hàm Stt Tên hàm Yêu cầu xử lý 1 la_so − Kiểm tra một giá trị cĩ phải là kiểu số ? 2 in_bang_cc − Tính bảng cửu chương của một số và xuất ra màn hình ™ Yêu cầu chức năng Stt Đối tượng Yêu cầu xử lý chức năng 1 Nút In − Khi chọn, kiểm tra giá trị nhập vào. Nếu khơng phải kiểu số thì xuất câu thơng báo ”Số nhập khơng hợp lệ !”, ngược lại thì xuất bảng cửu chương Bài tập Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 14/40 3.6. Trang In bảng cửu chương ™ Ý nghĩa Trang web cho phép người dùng nhập vào một số và in bảng cửu chương của số đĩ. ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu 1 Trang web − Tiêu đề trang: Vịng lặp do ... while 2 Nội dung trang web − Tạo form − Tạo table − Sử dụng điều khiển Label và Button ™ Yêu cầu xây dựng hàm Stt Tên hàm Yêu cầu xử lý 1 xuat_bang_cc − Xuất hiện hộp thọai yêu cầu nhập vào một số. Kiểm tra giá trị nhập vào, nếu khơng phải là số thì bắt người dùng nhập lại cho đến khi là số − In bảng cửu chương của số nhập ra màn hình ™ Yêu cầu chức năng Stt Đối tượng Yêu cầu xử lý chức năng Ghi chú 1 Nút lệnh In bảng cửu chương − Khi chọn, nhập vào một số và in bảng cửu chương của số đĩ Dùng hàm xuat_bang_cc 3.7. Phần mở rộng - Tạo tập tin cĩ tên Thu_vien.js dùng để lưu trữ các hàm la_so, in_bang_cc (trong bài 3.5) và xuat_bang_cc (trong bài 3.6) - Viết lại phần sử dụng các hàm này trong 2 bài tập 3.5 và 3.6 Bài tập Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 15/40 BÀI 4: CÁC ĐỐI TƯỢNG TRONG JAVASCRIPT 4.1. Trang Đảo chuỗi ™ Ý nghĩa: Trang web cho phép người dùng nhập vào một chuỗi và xuất ra chuỗi đảo ngược. ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu 1 Trang web − Tiêu đề cửa sổ: Sử dụng đối tượng String 2 Nội dung trang web − Tạo form − Tạo table − Sử dụng điều khiển TextFields, Label và Button ™ Yêu cầu xây dựng hàm Stt Tên hàm Yêu cầu xử lý 1 dao_chuoi − Xử lý và trả về một chuỗi ngược với chuỗi đã cho ™ Yêu cầu chức năng Stt Đối tượng Yêu cầu xử lý chức năng 1 Nút Thực hiện − Khi chọn, xuất một chuỗi đảo ngược với chuỗi nhập ra màn hình 4.2. Trang Phân tích chuỗi ™ Ý nghĩa: Trang web cho phép người dùng nhập họ tên. Xuất ra Họ, Tên lĩt và Tên Bài tập Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 16/40 ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu 1 Trang web − Tiêu đề trang: Sử dụng đối tượng String 2 Nội dung trang web − Tạo form − Tạo table − Sử dụng điều khiển TextFields, Label và Button ™ Yêu cầu xây dựng hàm Stt Tên hàm Yêu cầu xử lý Ghi chú 1 trim − Cắt bỏ các khỏang trắng đầu và cuối của một chuỗi đã cho − Trả về một chuỗi sau khi cắt 2 phan_tich − Phân tích chuỗi nhập và xuất Họ, Tên lĩt, Tên ra màn hình Dùng hàm trim ™ Yêu cầu chức năng Stt Đối tượng Yêu cầu xử lý chức năng Ghi chú 1 Nút Thực hiện − Khi chọn, xuất Họ, Tên lĩt và Tên của chuỗi nhập Hàm phan_tich 4.3. Trang Tìm và thay thế (Bài làm thêm) (1) (2) ™ Ý nghĩa Bài tập Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 17/40 Trang web cho phép người dùng nhập một chuỗi, sau đĩ tìm và thay thế chuỗi mới. ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu 1 Trang web − Tiêu đề trang: Sử dụng đối tượng String 2 Nội dung trang web − Tạo form − Tạo table − Sử dụng điều khiển TextFields, Textarea, Label và Button ™ Yêu cầu xây dựng hàm Stt Tên hàm Yêu cầu xử lý Ghi chú 1 tim_thay_the − Tìm một chuỗi con cĩ trong một chuỗi đã cho ?, nếu khơng tìm thấy thì xuất hộp thọai thơng báo − Nếu tìm thấy thì thay thế tồn bộ chuỗi tìm bằng chuỗi thay thế − Xuất chuỗi đã được thay thế ra màn hình. Lưu ý: phải tơ màu nền danh dương đậm (#000099) và đổi màu chữ trắng (#FFFFFF) đối với chuỗi thay thế (hình 2) Sử dụng hàm trim ™ Yêu cầu chức năng Stt Đối tượng Yêu cầu xử lý chức năng 1 Nút Tìm và thay thế − Khi chọn, xuất chuỗi đã được thay thế ra màn hình (hình 2) 4.4. Trang In Ngày sinh ™ Ý nghĩa: Trang web cho phép người dùng nhập ngày, tháng, năm sinh và xuất ra dạng ngày đầy đủ ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu 1 Trang web − Tiêu đề cửa sổ: Sử dụng đối tượng Date 2 Nội dung trang web − Tạo form − Tạo table − Sử dụng điều khiển TextFields, Label và Button ™ Yêu cầu xây dựng hàm Stt Tên hàm Yêu cầu xử lý Ghi chú Bài tập Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 18/40 1 ten_thu − Xử lý và trả về một chuỗi thứ của một ngày xác định xuat_ngay_sinh − Xử lý và trả về một chuỗi ngày cĩ định dạng (xem hình) Sử dụng hàm la_so ™ Yêu cầu chức năng Stt Đối tượng Yêu cầu xử lý chức năng 1 Nút Xuất ngày sinh − Khi chọn, xuất ngày sinh ra màn hình 4.5. Trang Tìm Ngày của mẹ (bài làm thêm) ™ Ý nghĩa: Trang web cho phép người dùng nhập vào năm và xuất ra ngày của Mẹ trong năm đĩ. ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu 1 Trang web − Tiêu đề cửa sổ: Sử dụng đối tượng Date 2 Nội dung trang web − Tạo form − Tạo table − Sử dụng điều khiển TextFields, Label và Button ™ Yêu cầu xây dựng hàm Stt Tên hàm Yêu cầu xử lý Ghi chú 1 xuat_ngay − Tính ngày của Mẹ, biết rằng là ngày Chủ nhật lần thứ hai của tháng 5 − Trả về một chuỗi ngày cĩ định dạng Sử dụng hàm la_so ™ Yêu cầu chức năng Stt Đối tượng Yêu cầu xử lý chức năng 1 Nút Thực hiện − Khi chọn, xuất ngày của Mẹ ra màn hình Bài tập Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 19/40 4.6. Trang Tính cạnh huyền ™ Ý nghĩa: Trang web cho phép người dùng nhập vào cạnh A và B của một tam giác vuơng, sau đĩ tính cạnh huyền. ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu 1 Trang web − Tiêu đề cửa sổ: Sử dụng đối tượng Math 2 Nội dung trang web − Tạo form − Tạo table − Sử dụng điều khiển TextFields, Label và Button ™ Yêu cầu xây dựng hàm Stt Tên hàm Yêu cầu xử lý Ghi chú 1 tinh_canh_huyen − Từ giá trị cạnh A và B đã cho, tính và trả kết quả chiều dài cạnh huyền của một tam giác vuơng, cơng thức tính như sau: 22 __ bCanhaCanh + Dùng hàm la_so ™ Yêu cầu chức năng Stt Đối tượng Yêu cầu xử lý chức năng 1 Nút Tính − Khi chọn, tính và xuất chiều dài cạnh huyền ra màn hình. Bài tập Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 20/40 4.7. Trang Tạo chữ và hình ảnh di chuyển Hình 1: Đang chạy dịng tiêu đề từ phải sang trái khi mở trang web Hình 2: Cuộn dọc trang web ™ Ý nghĩa Bài tập Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 21/40 Trang web cĩ dịng tiêu đề chạy từ phải sang trái, tiêu đề và hình ảnh sẽ khơng thay đổi vị trí khi cuộn dọc trang web ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu Ghi chú 1 Trang web − Tiêu đề cửa sổ: Sử dụng các đối tượng 2 Nội dung trang web − Tạo table − Sử dụng hình ảnh − Sử dụng điều khiển nhãn để thể hiện tiêu đề Học viên được cung cấp hình này ™ Yêu cầu chức năng Stt Đối tượng Yêu cầu xử lý chức năng Ghi chú 1 Trang web − Khi mở, thể hiện dịng tiêu đề chạy từ phải sang trái rồi dừng lại − Khi cuộn dọc màn hình: (Hình 2) ƒ Vị trí của dịng tiêu đề luơn ở đầu thanh trượt ƒ Hình ảnh vẫn nằm ở giữa màn hình theo chiều dọc Xây dựng các hàm thích hợp 4.8. Trang Tạo chuyển động tên cơng ty Hình 1: Hai dịng tiêu đề đang chạy ngược chiều Hình 2: Hai dịng tiêu đề giao nhau và dừng lại ™ Ý nghĩa Tạo trang web với tên cơng ty gồm 2 dịng chạy ngược chiều nhau ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu 1 Trang web − Tiêu đề cửa sổ: Sử dụng các đối tượng và sự kiện 2 Nội dung trang web − Sử dụng điều khiển nhãn để thể hiện tên cơng ty ™ Yêu cầu chức năng Stt Đối tượng Yêu cầu xử lý chức năng Ghi chú 1 Trang web − Khi mở, thực hiện: ƒ Dịng văn bản đầu tiên chạy từ phải sang trái Xây dựng các hàm thích hợp Bài tập Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 22/40 ƒ Dịng văn bản thứ hai chạy từ trái sang phải ƒ Khi 2 dịng gặp nhau ở giữa màn hình thì dừng lại − Khi nhấn chuột vào trang web thì thực hiện lại các thao tác như lúc mở 4.9. (bài làm thêm) Bổ sung vào tập tin Thu_vien.js các hàm dùng chung như sau: Stt Tên hàm Tham số Giá trị trả về Ý nghĩa 1 lam_tron − So: Giá trị số cần làm trịn − thap_phan: Con số xác định bao nhiêu số thập phân Số Làm trịn So 2 dinh_dang_so − nso: Giá trị số cần định dạng − nthap_phan: Con số xác định bao nhiêu số thập phân − bngoac_don: Kiểu Boolean, dùng dấu ngoặc đơn cho các số âm ? (VD: -200 Ỵ (200) ) − bdau_phay: Kiểu Boolean, dùng dấu phẩy để phân cách hàng ngàn ? (VD: 1000500 Ỵ 1,000,500 ) − sdon_vi: Chuỗi đơn vị tiền tệ (VD: 1000500 Ỵ 1,000,500 VND) Chuỗi số đã được định dạng Định dạng số Ghi chú: Cĩ sử dụng hàm lam_tron 4.10. Trang Tính tiền theo thực đơn (1) Bài tập Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 23/40 (2) ™ Ý nghĩa: Trang web cho phép người dùng chọn các mĩn ăn, thức uống và các dịch vụ khác. Sau đĩ lập hĩa đơn tính tiền. Mục tiêu: Sử dụng đối tượng DOM và tạo động các tag HTML ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu 1 Trang web − Tiêu đề cửa sổ: Sử dụng đối tượng DOM và các sự kiện 2 Nội dung trang web − Tạo form − Tạo table − Tạo điều khiển Dropdown-box, checkbox, nhãn và Button ™ Yêu cầu xây dựng hàm Stt Tên hàm Yêu cầu xử lý Ghi chú 1 Tinh_tien − Tính số tiền chi tiết từng mĩn ăn, thức uống và dịch vụ sử dụng. Biết rằng đơn giá của các mĩn ăn như sau: ƒ Phở bị: 15,000 ƒ Cơm tấm: 10,000 ƒ Hủ tíếu Nam vang: 16,000 ƒ Bánh mì ốp la: 8,000 ƒ Hủ tiếu bị kho: 12,000 ƒ Bánh mì bị kho: 10,000 ƒ Cháo lịng: 14,000 Lúc thiết kế 2 Dropdown box, nên cài đặt đơn giá vào giá trị của từng option Bài tập Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 24/40 ƒ Bún bị huế: 18,000 ƒ Bánh cuốn: 8,000 Và đơn giá của nước uống như sau: ƒ Cà phê đá: 5,000 ƒ Cà phê sữa đá: 6,000 ƒ Nước ngọt các lọai: 4,000 ƒ Cà phê đen: 3,000 ƒ Trà đá: 1,000 ƒ Chanh dây: 8,000 ƒ Nước cam tươi: 12,000 ƒ Sữa tươi: 6,000 ƒ Xí muội: 5,000 Sử dụng khăn lạnh: 1,000 Sử dụng phịng lạnh: 5,000 − Tính tổng cộng các chi tiết trên − In hĩa đơn tính tiền ra màn hình thơng qua đ.k nhãn, cĩ dạng một table như hình 2 Ghi chú: cĩ thể sử dụng hàm dinh_dang_so để định dạng các số tiền trong hĩa đơn ™ Yêu cầu chức năng Stt Đối tượng Yêu cầu xử lý chức năng Ghi chú 1 Nút In hĩa đơn tính tiền − Khi chọn, xuất hĩa đơn tính tiền ra màn hình Sử dụng hàm tính_tien Bài tập Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 25/40 BÀI 5: CSS VÀ DHTML 5.1. Trang Bài viết về Mũi né Hình 1: Khi mở trang Hình 2: Khi rê chuột vào hình thì xuất hiện tựa đề của bài viết Hình 3: Khi click chuột vào hình thì xuất hiện nội dung bài viết ™ Ý nghĩa: Bài tập Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 26/40 Tạo trang web cĩ nội dung là bài viết về Mũi Né Mục tiêu: Sử dụng DHTML để thay đổi vị trí của một đối tượng, ẩn/hiện nội dung ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu Tên lớp CSS 1 Trang web − Tiêu đề cửa sổ: Sử dụng DHTML với CSS và Javascript 2 Nội dung trang web − Sử dụng CSS để: ƒ Tạo lớp định dạng nội dung bài viết cho tag (hình 3) ƒ Thay đổi biểu tượng chuột khi rê vào hình ảnh − Sử dụng các tag đã học, kết hợp với các lớp CSS trên để tạo trang web .baiviet ™ Yêu cầu chức năng Stt Đối tượng Yêu cầu xử lý chức năng 1 Hình ảnh − Khi rê chuột vào hình ảnh: ƒ Xuất hiện tựa đề ”Mũi Né – Huyền bí và quyến rũ” theo vị trí của chuột (hình 2) ƒ Thay đổi biểu tượng chuột − Khi rê chuột ra khỏi hình ảnh: ƒ Ẩn đi tựa đề − Khi nhấn chuột vào hình thì xuất hiện nội dung bài viết phía bên phải của hình (hình 3) 2 Trang web − Khi nhấn chuột vào trang web thì mất đi nội dung bài viết 5.2. Trang Ẩm thực Nam Bộ (bài làm thêm) Hình 1: Khi mở trang Bài tập Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 27/40 Hình 2: Khi rê chuột vào hình ảnh ™ Ý nghĩa Tạo trang web cĩ nội dung là bài viết về Ẩm thực Nam bộ, cĩ hiệu ứng văn bản và đường viền ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu Tên lớp CSS 1 Trang web − Tiêu đề cửa sổ: Sử dụng DHTML với CSS 2 Nội dung trang web − Sử dụng CSS để : + Tạo lớp cĩ vị trí tương đối và 1 lớp cĩ vị trí tuyệt đối, kết hợp 2 lớp này để tạo tựa đề cĩ độ bĩng của chữ. + Tạo lớp định dạng Dropcap + Tạo lớp định dạng kiểu và màu đường viền, nền và màu chữ, khơng thể hiện ra màn hình và cĩ vị trí tuyệt đối. Dùng định dạng cho khung ”Hương vị miền Nam” + Định dạng lại tag : Tạo hình ảnh ở đầu danh sách − Sử dụng các tag đã học, kết hợp với các lớp CSS trên để tạo trang web .binhthuong và .bong .dropcap .khung ™ Yêu cầu chức năng Stt Đối tượng Yêu cầu xử lý chức năng 1 Hình ảnh − Khi rê chuột vào hình ảnh: ƒ Xuất hiện khung ”Hương vị miền Nam” (hình 2) − Khi rê chuột ra khỏi hình ảnh: ƒ Trở về trạng thái ban đầu (hình 1) Bài tập Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 28/40 ASP.NET CƠ BẢN ----- BÀI 1: TỔNG QUAN VỀ ASP.NET 1.1. Tạo mới một project - Tạo mới một project cĩ dạng sau: Lưu ý: chọn Location là File System - Làm quen với các thành phần giao diện trên màn hình VS.Net 1.2. Tạo trang Chao.aspx - Thực hành thao tác tạo mới một trang web đơn giản (lưu trong thư mục Bai1) - Thi hành trang web, xem kết quả và trở về màn hình thiết kế Bài tập Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 29/40 BÀI 2: SERVER CONTROLS 2.1. Tạo trang Hồ sơ đăng ký Hình 1: Trước khi nhấn nút Đăng ký Hình 2: Sau khi nhấn nút Đăng ký ™ Ý nghĩa: Trang web dành cho khách hàng đăng ký hồ sơ ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu 1 Nội dung trang web − Sử dụng điều khiển Input(Text, Radio, Button), Textarea và Div − Chuyển các điều khiển này lên HTML Server control ™ Yêu cầu xử lý: Stt Đối tượng Yêu cầu 1 Nút Đăng ký − Khi chọn, xuất hồ sơ khách hàng ra màn hình và cĩ định dạng (xem hình 2) Bài tập Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 30/40 2.2. Tạo trang Đọc báo Hình 1: Lúc thiết kế Hình 2: Lúc thực thi ™ Ý nghĩa: Trang web liệt kê đường Link đến các trang báo cĩ nhiều người đọc ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu 1 Nội dung trang web − Sử dụng điều khiển Label, Image và HyperLink ™ Yêu cầu xử lý: Stt Đối tượng Yêu cầu 1 Trang web − Khi mở trang, xuất nội dung : ”Lợi ích của đọc báo: • Mở rộng kiến thức • ... ” 2 Các chức năng − Khi chọn, mở trang web báo tương ứng với chức năng 2.3. Tạo trang Câu chào Hình 1: Nhập họ tên của bạn Bài tập Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 31/40 Hình 2: Khi nhấn vào nút Thay đổi câu chào Hình 3: Xuất hiện câu chào ™ Ý nghĩa: Trang web cho phép nhập vào họ tên và xuất ra màn hình câu chào nếu đồng ý thay đổi ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu 1 Nội dung trang web − Sử dụng điều khiển TextBox, LinkButton và Label ™ Yêu cầu xử lý: Stt Đối tượng Yêu cầu 1 Nút Thay đổi câu chào − Khi chọn, xuất hiện hộp thoại xác nhận cĩ đồng ý thay đổi câu chào khơng? (hình 2) ƒ Nếu đồng ý thì thay đổi câu chào (hình 3) 2.4. Tạo trang Tìm quân cờ Hình 1: Lúc thiết kế Hình 2: Khi rê chuột đến dịng 5 cột 4 Bài tập Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 32/40 Hình 2: Quân cờ xuất hiện trên bàn cờ Hình 3: Thơng báo vị trí quân cờ ™ Ý nghĩa: Trang web chứa một trị chơi tìm quân cờ trong bàn cờ vua Mục tiêu: Kết hợp các thuộc tính của tag HTML vào trong ASP.NET ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu 1 Nội dung trang web − Sử dụng điều khiển Table, Button và Label ™ Yêu cầu xử lý: Stt Đối tượng Yêu cầu 1 Trang web − Khi mở trang, tạo một bàn cờ với số dịng và cột tùy ý (nhưng phải bằng nhau). 2 Các ơ bàn cờ − Khi rê chuột vào thì xuất hiện tootip chứa thơng tin dịng, cột của ơ (hình 1) 3 Nút Tạo quân cờ − Khi chọn, thực hiện: ƒ Tạo quân cờ tại một ơ ngẫu nhiên trong bàn cờ ƒ Mặc định khơng cho quân cờ thể hiện trên màn hình ƒ Khi rê chuột vào đúng ơ chứa thì xuất hiện quân cờ (hình 2) ƒ Khi rê chuột ra khỏi ơ chứa thì dấu đi quân cờ ƒ Khi nhấn chuột vào ơ chứa thì xuất hiện thơng báo vị trí quân cờ (hình 3) 2.5. Tạo trang Lịch để bàn Bài tập Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 33/40 ™ Ý nghĩa: Trang web thể hiện lịch bàn, cho phép thêm ngày ghi nhớ vào lịch ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu 1 Nội dung trang web − Sử dụng điều khiển Calendar, TextBox, Label và Button ™ Yêu cầu xử lý: Stt Đối tượng Yêu cầu Ghi chú 1 Trang web − Khi mở trang, thực hiện: ƒ In ngày hiện hành cĩ dạng . ƒ Tạo danh sách các ngày cần ghi nhớ trong năm Tạo mảng lưu trữ. (các giá trị tùy ý) 2 Lịch − Tơ màu các ngày 1/1, 1/5, 1/6 và 20/11 − Khi rê chuột vào các ngày cần ghi nhớ thì xuất hiện tooltip thể hiện ghi chú của ngày đĩ (xem hình) Truy xuất từ mảng 3 Nút Thêm ngày ghi nhớ − Khi chọn: ƒ Kiểm tra giá trị Ngày và Tháng là số và chưa cĩ trong các ngày cần ghi nhớ ƒ Nếu hợp lệ thì thêm một ngày cần ghi nhớ vào lịch Thêm vào mảng 2.6. Tạo trang Upload và xem tập tin Bài tập Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 34/40 Hình 1: View Upload tập tin Hình 2: View Xem các tập tin được upload ™ Ý nghĩa: Trang web cho phép upload tập tin và xem các tập tin được upload ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu 1 Nội dung trang web − Sử dụng điều khiển MultiView, View, LinkButton, FileUpload, TextBox và Button. − MultiView chứa 2 view: ƒ View thứ nhất chứa điều khiển FileUpload và Button ƒ View thứ hai chứa điều khiển TextBox ™ Yêu cầu xử lý: Stt Đối tượng Yêu cầu 1 Nút Upload − Khi chọn, thực hiện: ƒ Upload tập tin lên thư mục Upload trên server ƒ Xuất danh sách tập tin trong thư mục Upload ra màn hình (trong view thứ hai) 2 Nút Upload tập tin − Khi chọn, xuất hiện view thứ nhất - chức năng Upload (hình 1) 3 Nút Xem các tập tin được upload − Khi chọn, xuất hiện view thứ hai - xem danh sách tập tin được upload (hình 2) 2.7. Tạo trang Sản phẩm kẹo Bài tập Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 35/40 Hình 1: Trang web mới mở Hình 2: Chọn sản phẩm ™ Ý nghĩa: Tạo trang web cho phép người dùng chọn các sản phẩm kẹo được yêu thích và xem kết quả đã chọn Mục tiêu: Sử dụng ViewState ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu 1 Nội dung trang web − Sử dụng điều khiển CheckBox, Label, TextBox và Button 2 Danh sách sản phẩm − Mỗi một CheckBox là một sản phẩm ™ Yêu cầu xử lý: Stt Đối tượng Yêu cầu Ghi chú 1 Trang web − Giao diện như hình 1 2 Các CheckBox danh sách sản phẩm − Nếu được chọn, thì tăng số sản phẩm lên 1 và xuất ra màn hình − Nếu bỏ chọn thì giảm số sản phẩm đi 1 và xuất ra màn hình (hình 2) Dùng ViewState Bài tập Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 36/40 3 Nút Bắt đầu chọn lại − Khi chọn, xĩa tất cả thơng tin Số lượng và Sản phẩm được chọn, trở về trạng thái ban đầu (hình 1) − Mở rộng: dùng JavaScript xĩa chọn các CheckBox Dùng ViewState Bài tập Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 37/40 BÀI 3: ĐIỀU KHIỂN KIỂM TRA DỮ LIỆU 3.1. Tạo trang Thơng tin đăng nhập Hình 1: Lúc thiết kế Hình 2: Hồ sơ đăng ký hợp lệ Bài tập Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 38/40 ™ Ý nghĩa: Trang web dùng để khách hàng đăng ký hồ sơ ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu 1 Nội dung trang web − Sử dụng điều khiển TextBox, DropDownList, CheckBox, Button và Label − Các điều khiển kiểm tra dữ liệu (Validation Control) ™ Yêu cầu xử lý: Stt Đối tượng Yêu cầu 1 Các điều khiển kiểm tra dữ liệu − Tên đăng nhập: Khơng được rỗng, tối thiểu 8 ký tự, tối đa 16 ký tự. Bao gồm các ký tự chữ cái, ký số và 3 ký tự đặc biệt: &, _ , ! − Mật khẩu: khơng được rỗng − Nhập lại mật khẩu: khơng được rỗng và phải giống Mật khẩu − Họ tên khách hàng: khơng được rỗng − Ngày sinh: phải cĩ kiểu là Date − Email: phải cĩ dạng của địa chỉ e-mail − Thu nhập: trong khỏang [3 triệu - 10 triệu] − Bảng lỗi chung thơng báo cụ thể (hình 1) Lưu ý: Khi phạm lỗi thì xuất hiện dấu (*) phía bên phải các ơ nhập dữ liệu 2 Nút Đăng ký − Khi chọn, nếu dữ liệu hợp lệ thì xuất Hồ sơ khách hàng (hình 2) Bài tập Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 39/40 MỤC LỤC BÀI 1: SỬ DỤNG CÁC MƠI TRƯỜNG .................................................................................................... 1 1.1. Hướng dẫn học viên làm quen với các mơi trường cài đặt ngơn ngữ HTML và JavaScript: 1 BÀI 2: NGƠN NGỮ HTML ....................................................................................................................... 2 2.1. Trang Các tag cơ bản ................................................................................................................ 2 2.2. Trang Các tag cơ bản – định dạng (bài làm thêm) ................................................................. 3 2.3. Trang Định dạng trang web ...................................................................................................... 4 2.4. Trang Định dạng văn bản.......................................................................................................... 5 2.5. Trang Định dạng văn bản (Bài làm thêm) ............................................................................... 5 2.6. Trang Ký tự đặc biệt, chèn hình ảnh, tạo danh sách và liên kết ........................................... 6 2.7. Trang Tạo bảng.......................................................................................................................... 6 2.8. Trang Tạo bảng, trộn dịng và cột (bài làm thêm) ................................................................. 7 2.9. Trang Tạo form và các điều khiển trên form........................................................................... 8 BÀI 3: NGƠN NGỮ LẬP TRÌNH JAVASCRIPT .......................................................................................10 3.1. Trang Câu chào .........................................................................................................................10 3.2. Trang Thay đổi câu chào..........................................................................................................10 3.3. Trang Xếp lọai cuối năm học....................................................................................................11 3.4. Trang Tính tiền thưởng cuối năm ............................................................................................12 3.5. Trang In bảng cửu chương ......................................................................................................13 3.6. Trang In bảng cửu chương ......................................................................................................14 3.7. Phần mở rộng ............................................................................................................................14 BÀI 4: CÁC ĐỐI TƯỢNG TRONG JAVASCRIPT....................................................................................15 4.1. Trang Đảo chuỗi........................................................................................................................15 4.2. Trang Phân tích chuỗi ...............................................................................................................15 4.3. Trang Tìm và thay thế (Bài làm thêm)....................................................................................16 4.4. Trang In Ngày sinh ...................................................................................................................17 4.5. Trang Tìm Ngày của mẹ (bài làm thêm) .................................................................................18 4.6. Trang Tính cạnh huyền.............................................................................................................19 4.7. Trang Tạo chữ và hình ảnh di chuyển ....................................................................................20 4.8. Trang Tạo chuyển động tên cơng ty .......................................................................................21 4.9. (bài làm thêm) Bổ sung vào tập tin Thu_vien.js các hàm dùng chung như sau: ...............22 4.10. Trang Tính tiền theo thực đơn.................................................................................................22 BÀI 5: CSS VÀ DHTML...........................................................................................................................25 5.1. Trang Bài viết về Mũi né...........................................................................................................25 5.2. Trang Ẩm thực Nam Bộ (bài làm thêm)..................................................................................26 BÀI 1: TỔNG QUAN VỀ ASP.NET..........................................................................................................28 1.1. Tạo mới một project .................................................................................................................28 1.2. Tạo trang Chao.aspx.................................................................................................................28 Bài tập Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 40/40 BÀI 2: SERVER CONTROLS .................................................................................................................. 29 2.1. Tạo trang Hồ sơ đăng ký ......................................................................................................... 29 2.2. Tạo trang Đọc báo.................................................................................................................... 30 2.3. Tạo trang Câu chào .................................................................................................................. 30 2.4. Tạo trang Tìm quân cờ............................................................................................................. 31 2.5. Tạo trang Lịch để bàn .............................................................................................................. 32 2.6. Tạo trang Upload và xem tập tin ............................................................................................ 33 2.7. Tạo trang Sản phẩm kẹo ......................................................................................................... 34 BÀI 3: ĐIỀU KHIỂN KIỂM TRA DỮ LIỆU ............................................................................................. 37 3.1. Tạo trang Thơng tin đăng nhập .............................................................................................. 37