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

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 <họ tên nhập và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.
Baøi taä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ọ 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.
 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

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

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

Baøi taä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
Baøi taä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
Baøi taä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
Baøi taä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ế 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

 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ú
Baøi taä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
< Tên thứ, ngày/tháng/năm > (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 <ngày/tháng/năm>
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

Baøi taä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.

Baøi taä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
Baøi taä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
Baøi taä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)

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