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 Baøi taä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 Baøi taä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 Baøi taä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 − Toàn bộ bài thơ có màu nền là màu vàng nhạt. #006600 #0000FF #FF3399, #FECFFD #FFFFCC Baøi taä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 Baøi taä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) Baøi taä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 – http://www.csc.hcmuns.edu.vn 2.7. Trang Tạo bảng Baøi taä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 Baøi taä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 Baøi taä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 [...]... 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 1 Đối tượng Nút In Yêu cầu xử lý chức năng − 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 Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 13/40 Baøi taäp 3.6 Trang In bảng cửu chương Ý nghĩa Trang web cho... 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 Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 12/40 Baøi taäp 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... Nút Tính Yêu cầu xử lý chức năng − Khi chọn, tính và xuất chiều dài cạnh huyền ra màn hình Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 19/40 Baøi taäp 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 Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 20/40 Baøi taäp Trang web có dòng tiêu... Khi chọn, xuất hóa đơn tính tiền ra màn hình Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Ghi chú Sử dụng hàm tính_tien Trang 24/40 Baøi taäp 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: Lập trình Web với HTML&JavaScript và ASP.Net cơ... dụng hàm lam_tron − sdon_vi: Chuỗi đơn vị tiền tệ (VD: 1000500 1,000,500 VND) 4.10 Trang Tính tiền theo thực đơn (1) Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 22/40 Baøi taäp (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... 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 1 Nút lệnh In bảng cửu chương Yêu cầu xử lý chức năng − Khi chọn, nhập vào một số và in bảng cửu chương của số đó Ghi chú 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... 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 Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 14/40 Baøi taäp 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... Thực hiện Yêu cầu xử lý chức năng − 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 Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 15/40 Baøi taäp 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... cầu chức năng Stt Đối tượng 1 Nút Thực hiện Yêu cầu xử lý chức năng − Khi chọn, xuất Họ, Tên lót và Tên của chuỗi nhập Ghi chú Hàm phan_tich 4.3 Trang Tìm và thay thế (Bài làm thêm) (1) (2) Ý nghĩa Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 16/40 Baøi taäp 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... 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ý Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Ghi chú Trang 17/40 Baøi taäp 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 . 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 Baøi taäp Lập trình Web với HTML&JavaScript. 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 Baøi taäp Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 8/40 . Khi chọn: Xuất nội dung câu thông báo Baøi taä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