lập trình web với html & javascript và asp.net cơ bản

Yêu cầu thiết kế: 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ư

Trang 1

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

Trang 2

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

Trang 3

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ế:

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

Trang 4

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

− 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

Trang 5

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

1 Trang web − Tiêu đề cửa sổ: Định dạng trang web

− Dòng dầu tiên: Canh giữa, màu vàng đậm

#A06D21

#FFFFFF

#FFCC00

Trang 6

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

1 Trang web − Tiêu đề cửa sổ: Định dạng văn bản

Trang 7

Ý 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

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

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

Trang 8

Ý 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

Trang 9

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

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

Trang 10

công!!!”

Yêu cầu xử lý:

1 Nút Đồng ý − Khi chọn: Xuất nội dung câu thông báo

Trang 11

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

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

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 <họ tên nhập vào>”

3.2 Trang Thay đổi câu chào

Trang 12

1 Trang web − Tiêu đề trang: sử dụng hộp thoại

− Tạo table

− Sử dụng điều khiển TextFields, Label và Button

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ọ tên mới>” (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

1 Trang web − Tiêu đề trang: Cấu trúc if else if else

− Tạo table

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

Trang 13

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

1 Trang web − Tiêu đề trang: Cấu trúc switch

− Tạo table

− Sử dụng điều khiển TextFields, Drop-down box, Label và Button

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

Trang 14

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ố đó

1 Trang web − Tiêu đề trang: Vòng lặp for

− Tạo table

Yêu cầu xây dựng hàm

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

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

Trang 15

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ố đó

1 Trang web − Tiêu đề trang: Vòng lặp do while

− Tạo table

− Sử dụng điều khiển Label và Button

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

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

Trang 16

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

1 Trang web − Tiêu đề cửa sổ: Sử dụng đối tượng String

− Tạo table

1 dao_chuoi − Xử lý và trả về một chuỗi ngược với chuỗi đã cho

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

Trang 17

1 Trang web − Tiêu đề trang: Sử dụng đối tượng String

− Tạo table

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

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

Trang 18

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

1 Trang web − Tiêu đề trang: Sử dụng đối tượng String

− Tạo table

− Sử dụng điều khiển TextFields, Textarea, Label và Button

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ế 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)

Sử dụng hàm trim

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 đủ

1 Trang web − Tiêu đề cửa sổ: Sử dụng đối tượng Date

− Tạo table

Trang 19

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

< Tên thứ, ngày/tháng/năm > (xem hình)

Sử dụng hàm la_so

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 đó

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

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 <ngày/tháng/năm>

Sử dụng hàm la_so

1 Nút Thực hiện − Khi chọn, xuất ngày của Mẹ ra màn hình

Trang 20

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

1 Trang web − Tiêu đề cửa sổ: Sử dụng đối tượng Math

− Tạo table

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:

2

_ a Canh b Canh +

Dùng hàm la_so

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

Trang 21

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

Trang 22

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

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

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

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

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

Trang 23

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:

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)

Trang 24

(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

1 Trang web − Tiêu đề cửa sổ: Sử dụng đối tượng DOM và các sự kiện

− Tạo table

− Tạo điều khiển Dropdown-box, checkbox, nhãn và Button

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:

Trang 25

− 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

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

Tiêu đề	Lập trình web với HTML & JavaScript và ASP.NET cơ bản
Trường học	Trung Tâm Tin Học - Đại Học Khoa Học Tự Nhiên Tp. Hồ Chí Minh
Chuyên ngành	Lập trình web
Thể loại	Bài tập
Năm xuất bản	2010
Thành phố	Hồ Chí Minh

Định dạng
Số trang	41
Dung lượng	1,7 MB

lập trình web với html & javascript và asp.net cơ bản

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

Tạo trang Thơng tin đăng nhập