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

Chia sẻ: vantinh12a8

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.

Bạn đang xem 10 trang mẫu tài liệu này, vui lòng download file gốc để xem toàn bộ.

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

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
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
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
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
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
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
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
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
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
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
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 ”
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
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ì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
Baøi taäp

9=< ĐTB cả 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

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
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
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 đề 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 Học viên được
− Tạo table
trang web cung cấp hình
− Sử dụng hình ảnh
này
− Sử dụng điều khiển nhãn để thể hiện tiêu đề

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 Xây dựng các
− Khi mở, thể hiện dòng tiêu đề chạy từ phải sang trái rồi
hàm thích hợp
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


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 Xây dựng các
− Khi mở, thực hiện:
hàm thích hợp
Dòng văn bản đầu tiên chạy từ phải sang trái



Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 21/40
Baøi taäp

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ả Ý nghĩa
về
1 lam_tron Số Làm tròn So
− 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

2 dinh_dang_so Chuỗi số đã Định dạng
− nso: Giá trị số cần định dạng
được định số
− nthap_phan: Con số xác định bao nhiêu số thập
dạng
phân
Ghi chú: Có
− bngoac_don: Kiểu Boolean, dùng dấu ngoặc đơn cho
sử dụng
các số âm ? (VD: -200 (200) )
hàm
− bdau_phay: Kiểu Boolean, dùng dấu phẩy để phân
lam_tron
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)

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 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 Lúc thiết kế 2
− Tính số tiền chi tiết từng món ăn, thức uống và dịch vụ sử
Dropdown box,
dụng. Biết rằng đơn giá của các món ăn như sau:
nên cài đặt
Phở bò: 15,000
đơn giá vào giá
Cơm tấm: 10,000
trị của từng
Hủ tíếu Nam vang: 16,000
option
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ập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 23/40
Baøi taäp

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 Sử dụng hàm
− Khi chọn, xuất hóa đơn tính tiền ra màn hình
tính_tien
tính tiền




Lập trình Web với HTML&JavaScript và ASP.Net cơ bản 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ơ bản Trang 25/40
Baøi taäp

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 − Sử dụng CSS để:
trang web
.baiviet
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

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)

− Khi nhấn chuột vào trang web thì mất đi nội dung bài viết
2 Trang web


5.2. Trang Ẩm thực Nam Bộ (bài làm thêm)




Hình 1: Khi mở trang




Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 26/40
Baøi taäp




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
− Tiêu đề cửa sổ: Sử dụng DHTML với CSS
1 Trang web
2 Nội dung − Sử dụng CSS để :
trang web
.binhthuong và
+ Tạo lớp có vị trí tương đối và 1 lớp có vị trí tuyệt đối,
.bong
kết hợp 2 lớp này để tạo tựa đề có độ bóng của chữ.
.dropcap
+ Tạo lớp định dạng Dropcap
.khung
+ 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

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)




Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 27/40
Baøi taäp



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ế




Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 28/40
Baøi taäp



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 − Sử dụng điều khiển Input(Text, Radio, Button), Textarea và Div
trang web
− 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)



Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 29/40
Baøi taäp



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




Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 30/40
Baøi taäp




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
− Khi chọn, xuất hiện hộp thoại xác nhận có đồng ý thay đổi câu chào
1 Nút 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




Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 31/40
Baøi taäp




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 − Khi chọn, thực hiện:
quân cờ
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




Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 32/40
Baøi taäp




Ý 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 Truy xuất từ mảng
− 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)

3 Nút Thêm − Khi chọn:
ngày ghi
Kiểm tra giá trị Ngày và Tháng là số và chưa có
nhớ
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 Thêm vào mảng
lịch


2.6. Tạo trang Upload và xem tập tin



Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 33/40
Baøi taäp




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
− Sử dụng điều khiển MultiView, View, LinkButton, FileUpload, TextBox
1 Nội dung trang web
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 − Khi chọn, xuất hiện view thứ hai - xem danh sách tập tin được upload
tin được upload (hình 2)


2.7. Tạo trang Sản phẩm kẹo




Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 34/40
Baøi taäp




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 Dùng
− Nếu được chọn, thì tăng số sản phẩm lên 1 và xuất ra
danh sách sản ViewState
màn hình
phẩm
− 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)



Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 35/40
Baøi taäp


− Khi chọn, xóa tất cả thông tin Số lượng và Sản phẩm
3 Nút Bắt đầu chọn Dùng
lại được chọn, trở về trạng thái ban đầu (hình 1) ViewState
− Mở rộng: dùng JavaScript xóa chọn các CheckBox




Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 36/40
Baøi taäp




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ệ



Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 37/40
Baøi taäp



Ý 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 − Sử dụng điều khiển TextBox, DropDownList, CheckBox, Button và Label
trang web
− 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 − Tên đăng nhập: Không được rỗng, tối thiểu 8 ký tự, tối đa 16 ký tự. Bao
khiển kiểm gồm các ký tự chữ cái, ký số và 3 ký tự đặc biệt: &, _ , !
tra dữ liệu
− 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

− Khi chọn, nếu dữ liệu hợp lệ thì xuất Hồ sơ khách hàng (hình 2)
2 Nút Đăng ký




Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 38/40
Baøi taäp



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


Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 39/40
Baøi taäp


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




Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 40/40
Đề thi vào lớp 10 môn Toán |  Đáp án đề thi tốt nghiệp |  Đề thi Đại học |  Đề thi thử đại học môn Hóa |  Mẫu đơn xin việc |  Bài tiểu luận mẫu |  Ôn thi cao học 2014 |  Nghiên cứu khoa học |  Lập kế hoạch kinh doanh |  Bảng cân đối kế toán |  Đề thi chứng chỉ Tin học |  Tư tưởng Hồ Chí Minh |  Đề thi chứng chỉ Tiếng anh
Theo dõi chúng tôi
Đồng bộ tài khoản