Lập trình web với HTML & Javascript và ASP.NET cơ bản

Chia sẻ: Lê Văn Tình | Ngày: | Loại File: PDF | Số trang:41

0
526
lượt xem
286
download

Lập trình web với HTML & Javascript và ASP.NET cơ bản

Mô tả tài liệu
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

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ế toàn bộ chuỗi tìm bằng chuỗi thay thế. 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.

Chủ đề:
Lưu

Nội dung Text: Lập trình web với HTML & Javascript và ASP.NET cơ bản

  1. TRUNG TAÂM TIN HOÏC - ÑAÏI HOÏC KHOA HOÏC TÖÏ NHIEÂN TP. HCM 227 Nguyeãn Vaên Cöø – Quaän 5 – Tp. Hoà Chí Minh Tel: 8351056 – Fax 8324466 – Email: ttth@hcmuns.edu.vn 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 Maõ taøi lieäu: DT_NCM_LT_BT_LTW1 Phieân baûn 2.5 – Thaùng 01/2010
  2. Baøi taäp 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 Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 1/40
  3. Baøi taäp 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 − Tiêu đề cửa sổ: Sử dụng các tag cơ bản 1 Trang web − Sử dụng các tag cơ bản để tạo trang web trên, trong đó: 2 Nội dung trang web Dòng đầu tiên: Canh giữa Đọan văn bản ”Trung Tâm ... ngôn ngữ HTML”: Canh giữa Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 2/40
  4. Baøi taäp 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 − Tiêu đề cửa sổ: Sử dụng các tag cơ bản 1 Trang web Sử dụng các tag cơ bản và thuộc tính của các tag để định 2 Nội dung trang web dạng: − Dòng dầu tiên: canh giữa, màu xanh lá mạ #006600 − Dòng 2: màu xanh dương #0000FF − Dòng 4 - tựa đề ”MẸ!”: chữ đậm có màu hồng đậm và nền #FF3399, màu hồng nhạt #FECFFD − 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. #FFFFCC Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 3/40
  5. Baøi taäp 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 − Tiêu đề cửa sổ: Định dạng trang web 1 Trang web Sử dụng các tag và thuộc tính của tag để định dạng 2 Nội dung trang web trang web: − Định dạng chung: + Nền: Màu nâu đất #A06D21 + Chữ: Màu trắng #FFFFFF + 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 #FFCC00 Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 4/40
  6. Baøi taäp 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 − Tiêu đề cửa sổ: Định dạng văn bản 1 Trang web Sử dụng các tag định dạng văn bản để tạo trang web: 2 Nội dung trang web − Định dạng như hình trên #FF0000 − 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 #0000CC, màu xám, có định dạng canh lề #CCCCCC 2.5. Trang Định dạng văn bản (Bài làm thêm) Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 5/40
  7. Baøi taäp Ý 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 − Tiêu đề cửa sổ: Định dạng văn bản 1 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 2 Nội dung trang web 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 − 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 1 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: 2 Nội dung 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 Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 6/40
  8. Baøi taäp Ý 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 − Tiêu đề cửa sổ: Tạo bảng 1 Trang web 2 Nội dung #FFEDCA − Nền màu vỏ hột gà trang web − Hình ảnh: Canh trái − Bảng biểu: #CC6600, #FFFFFF + Dòng tiêu đề: Nền màu nâu đất và chữ màu trắng #FFFFFF, #FFEDCA + Màu nền xen kẽ giữa các dòng là màu trắng và màu vỏ hột gà 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 Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 7/40
  9. Baøi taäp Yêu cầu thiết kế: Stt Đối tượng Yêu cầu Hằng số màu − Tiêu đề cửa sổ: Tạo bảng, trộn dòng và cột 1 Trang web 2 Nội dung − Font chữ là Tahoma và có kích thước là 12px trang web − Bảng biểu: gồm 11 dòng và 4 cột #CC0033;#FFFFFF + 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 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 − Tiêu đề cửa sổ: Tạo form và các điều khiển 1 Trang web 2 Nội dung − Tạo form trang web − 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 Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 8/40
  10. Baøi taäp công!!!” Yêu cầu xử lý: Stt Đối tượng Yêu cầu xử lý chức năng − Khi chọn: Xuất nội dung câu thông báo 1 Nút Đồng ý Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 9/40
  11. Baøi taäp 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 − Tiêu đề trang: Sử dụng hộp thoại 1 Trang web 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 − Khi chọn, xuất hiện cửa sổ với lời chào ”Chào bạn <họ tên nhập vào>” 1 Nút Xuất câu chào 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. Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 10/40
  12. Baøi taäp Yêu cầu thiết kế: Stt Đối tượng Yêu cầu − Tiêu đề trang: sử dụng hộp thoại 1 Trang web 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) − Khi chọn, xuất hiện câu ”Chào bạn <họ tên mới>” (Hình 3) 2 Nút Thay đổi câu chào 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 − Tiêu đề trang: Cấu trúc if ... else if ... else 1 Trang web 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ú − Khi chọn, thực hiện: 1 Nút Xuất Tạo hàm xếp loại 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: + Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 11/40
  13. Baøi taäp 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 − Tiêu đề trang: Cấu trúc switch 1 Trang web − Tạo form 2 Nội dung trang web − 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 Tạo hàm − 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 + Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 12/40
  14. 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 − Tiêu đề trang: Vòng lặp for 1 Trang web 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ý − Kiểm tra một giá trị có phải là kiểu số ? 1 la_so 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 Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 13/40
  15. Baøi taäp 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 − Tiêu đề trang: Vòng lặp do ... while 1 Trang web 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 Dùng hàm − Khi chọn, nhập vào một số và in bảng cửu chương cửu chương xuat_bang_cc của số đó 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 - Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 14/40
  16. 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 đảo ngược. Yêu cầu thiết kế: Stt Đối tượng Yêu cầu − Tiêu đề cửa sổ: Sử dụng đối tượng String 1 Trang web 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 Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 15/40
  17. 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 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 Dùng hàm trim − Phân tích chuỗi nhập và xuất Họ, Tên lót, Tên ra màn hình 2 phan_tich Yêu cầu chức năng Stt Đối tượng Yêu cầu xử lý chức năng Ghi chú Hàm phan_tich 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 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
  18. 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 − Tiêu đề trang: Sử dụng đối tượng String 1 Trang web 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 Sử dụng hàm − Tìm một chuỗi con có trong một chuỗi đã cho ?, nếu trim 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ế toà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) Yêu cầu chức năng Stt Đối tượng Yêu cầu xử lý chức năng − Khi chọn, xuất chuỗi đã được thay thế ra màn hình (hình 2) 1 Nút Tìm và thay thế 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 − Tiêu đề cửa sổ: Sử dụng đối tượng Date 1 Trang web 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ú Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 17/40
  19. 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 Sử dụng hàm − Xử lý và trả về một chuỗi ngày có định dạng la_so < Tên thứ, ngày/tháng/năm > (xem 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 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 − Tiêu đề cửa sổ: Sử dụng đối tượng Date 1 Trang web 2 Nội dung − Tạo form trang web − 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 Sử dụng hàm − Tính ngày của Mẹ, biết rằng là ngày Chủ nhật lần thứ hai la_so của tháng 5 − Trả về một chuỗi ngày có định dạng <ngày/tháng/năm> Yêu cầu chức năng Stt Đối tượng Yêu cầu xử lý chức năng − Khi chọn, xuất ngày của Mẹ ra màn hình 1 Nút Thực hiện Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 18/40
  20. Baøi taäp 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ú Dùng hàm la_so 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: Canh _ a 2 + Canh _ b 2 Yêu cầu chức năng Stt Đối tượng 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. 1 Nút Tính Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 19/40
Đồng bộ tài khoản