Sử dụng các lớp xử lý chuỗi, ngày tháng, toán học

Sử dụng lớp xử lý Chuỗi, Ngày tháng, Toán học Sử dụng lớp xử lý Chuỗi, Ngày tháng, Toán học Bởi: Khoa CNTT ĐHSP KT Hưng Yên Mục tiêu: Kết thúc học này, người học • Mô tả công dụng lớp xử lý Chuỗi (String), xử lý ngày tháng (Date) xử lý hàm toàn học Math • Sử dụng số phương thức, thuộc tính lớp • Vận dụng viết số trang web đơn giản có sử dụng đến lớp Nội dung: Bài tập 1: Minh hoạ cách khai báo sử dụng đối tượng Date để ngày hệ thống Yêu cầu: Hãy hiển thị ngày hệ thống máy tính trang Web nạp Thông tin hiển thị có dạng sau: Hôm thứ 2, ngày 13 tháng năm 2004 Hướng dẫn: Sử dụng đối tượng Date sử dụng hàm lấy thứ, ngày, tháng, năm để in thông tin hình Chú ý đến hàm tính tháng, ngày tuần bị hụt đơn vị 1/15 Sử dụng lớp xử lý Chuỗi, Ngày tháng, Toán học Bài tập 2: Minh hoạ sử khai báo dùng đối tượng Date để lấy Giờ, phút, giây hệ thống Yêu cầu: Hiển thị Giờ phút tiêu đề cửa sổ trang Web nạp Hướng dẫn: Giá trị hiển thị tiêu đề trang web lưu thuộc tính title đối tượng document, để hiển thị thông tin tiêu đề, bạn cần viết: document.title = Ví dụ, để hiển thị dòng chữ "Hello Every body !", bạn viết: document.title "Hello Every body !" Minh hoạ: var D = new Date(); document.title = "Bây là: " + D.getHours()+" "+ D.getMinutes()+ " phút."; Bài 3: Vận dụng biến đối tượng Date để tính tuổi người Yêu cầu : Cho người dùng nhập vào năm sinh họ, sau hiển thị tuổi tương ứng Hướng dẫn: Sử dụng đối tượng Date để lấy năm Tuổi năm trừ năm sinh vừa nhập vào Minh hoạ mẫu: Tính tuổi 2/15 Sử dụng lớp xử lý Chuỗi, Ngày tháng, Toán học var D = new Date(); var NamSinh, NamHienTai; NamHienTai = D.getYear(); // Lưu năm vào biến NamSinh = prompt("Bạn sinh năm ? : ",""); alert("Tuổi bạn : " + (NamHienTai-NamSinh)); Bài 4: Tương tự Năm sinh nhập vào không lớn năm Hướng dẫn:Sử dụng vòng lặp do…while để yêu cầu nhập lại năm sinh > năm Minh hoạ mẫu: Tinh tuoi var D = newDate(); var NamSinh, NamHienTai; NamHienTai = D.getYear(); //Lưu năm vào biến { NamSinh = prompt("Bạn sinh năm : ",""); } while (parseInt(NamSinh)>NamHienTai); //Nhập lại Năm sinh>năm 3/15 Sử dụng lớp xử lý Chuỗi, Ngày tháng, Toán học alert("Tuổi bạn : " + (NamHienTai-NamSinh)); Bài 5: Minh hoạ cách đặt câu lệnh JavaScript vào phần tử HTML để thực thi người dùng click chuột sử dụng hàm open đối tượng window để mở trang web Yêu cầu: Viết đoạn Script cho người dùng nhập vào số nguyên Nếu người dùng nhập số mở trang Web http://www.vnn.vn, nhập số mở trang http://www.mail.yahoo.com, nhập số mở trang http://www.echip.com.vn, nhập số khác với 1, hay mở trang http://www.google.com Hướng dẫn: Để mở trang Web cửa sổ hành bạn viết sau: window.open("Địa trang cần mở") Ví dụ : window.open(http://www.vnn.vnn) để mở trang chủ VNN cửa sổ Như vậy, để giải yêu cầu toán , bạn cần cho người dùng nhập vào số sử dụng cấu trúc switch để kiểm tra mở trang web tương ứng Minh hoạ mẫu: Mở trang web với hàm open đối tượng window var LuaChon; LuaChon = prompt("Bạn nhập vào số để mở trang web : ", 1); switch (LuaChon) 4/15 Sử dụng lớp xử lý Chuỗi, Ngày tháng, Toán học { case "1" : window.open("http://www.vnn.vn"); break; case "2" : window.open("http://www.mail.yahoo.com"); break; case "3" : window.open("http://www.echip.com.vn"); break; default : window.open("http://www.google.com"); } Bài số 6: Minh hoạ việc khai báo sử dụng biến đối tượng Array để lưu trữ danh sách cách sử dụng hàm đối tượng Array hàm sort vòng lặp for…in Yêu cầu: Cho người dùng nhập vào danh sách tên lớp, sau xếp theo vần Alphabet hiển thị danh sách xếp hình, người dòng Hướng dẫn: Sử dụng vòng lặp for phép nhập danh sách họ tên Lưu danh sách vào mảng, sau sử dụng phương thức sort đối tượng mảng để xếp, dùng vòng lặp for…in để in phần tử danh sách Minh hoạ mẫu: Sắp xếp mảng var SoLuong, x; var DS = newArray(100); // Khai báo mảng DS, lưu tối đa 100 phẩn tử 5/15 Sử dụng lớp xử lý Chuỗi, Ngày tháng, Toán học SoLuong = prompt("Bạn cần nhập người : ", 5); for (i=0; i < SoLuong; i++) { DS[i] = prompt("Nhập vào họ tên : ",""); } // Gọi hàm sort đối tượng mảng DS để xếp DS.sort(); //Hiển thị kết sau (sort) document.write("Danh sách xếp "); for (x in DS) /* Nên sử dụng cấu trúc for … in để duyệt mảng */ { document.write( DS[x] ); document.write(""); // Xuống dòng } *** Nhận xét: Nếu muốn theo chiều giảm dần sau sort bạn gọi hàm reverse Bài số 7: Minh hoạ việc đưa câu lệnh JS vào thẻ người dùng click chuột Yêu cầu: Tạo nút nhấn (Button) có name = "DangKy", value = "Đăng ký" Khi người dùng Click vào nút thông báo "Đăng ký dịch vụ E-Mail" 6/15 Sử dụng lớp xử lý Chuỗi, Ngày tháng, Toán học Hướng dẫn: Đối với phần tử HTML, textbox, button, checkbox, Select v.v… Các trình duyệt cho phép ta thực thi nhiều câu lệnh JavaScript người sử dụng click chuột lên phần tử Vấn đề chỗ, viết câu lệnh ? Để viết câu lệnh JavaScript người dùng click chuột lên phần tử đó, thẻ phần tử này, ta viết sau: OnClick = "Các câu lệnh JavaScript" "Các câu lệnh JavaScript" câu lệnh JavaScript chúng phải cách dấu chấm phảy Ngoài ra, câu lệnh phải đặt cặp dấu nháy kép (Hoặc nháy đơn) Ví dụ số cách đưa câu lệnh JavaScript cần thực thi người dùng click chuột Onclick = "alert('Hello world';" OnClick = 'document.write("Welcome to JavaScript");' OnClick = "var x,y; x = 10; y = 20; alert('Tổng : ' + (x + y)); " OnClick = "var Tuoi; Tuoi = txtTuoi.value; KiemTra(Tuoi);" OnClick = "KiemTra();" Theo ví dụ trên, Khi người sử dụng Click : : Thực câu lệnh alert('Hello world') : Thực câu lệnh document.write('Welcome to JavaScript'); : Thực NHIỀU câu lệnh JavaScript : Thực nhiều câu lệnh JavaScript có lời gọi đến hàm KiemTra(Tuoi) : Thực câu lệnh gọi hàm KiemTra() Minh hoạ mẫu: Minh hoạ đưa câu lệnh JavaScript vào phần tử 7/15 Sử dụng lớp xử lý Chuỗi, Ngày tháng, Toán học Bài số 8: Minh hoạ cách thay đổi thuộc tính đối tượng thông qua việc viết câu lệnh JavaScript Tạo nút có name = ThayMauNen, value = "Thay đổi màu nền" Khi người dùng click chuột vào nút thay đổi màu trang Web thành màu "xanh" Hướng dẫn: Để thay đổi màu trang Web thành màu, ta cần thay đổi thuộc tính document.bgColor = "blue" (Màu đỏ red, tìm : magenta, đen: black, trắng: white, vàng: Yellow, tím nhạt: lavender) Như vậy, câu lệnh đặt phần onClick sau: Thay mau nen bang click chuot Thay đổi màu sử dụng đối tượng document 8/15 Sử dụng lớp xử lý Chuỗi, Ngày tháng, Toán học Bài số 9: Minh hoạ việc đọc giá trị phần tử text hiển thị hình Yêu cầu: Tạo hộp text có tên HoTen Một nút có tên HienThi, value = "Hiển thị" Khi người dùng click vào nút HienThi hiển thị nội dung hộp text hàm alert Hướng dẫn: Để lấy giá trị phần tử HTML đó, viết .value Trong đó: giá trị thuộc tính name bạn tạo thẻ Ví dụ : - Hoten.value, DangKy.value, GioiTinh.value, Password.value v.v… Minh hoạ : Đọc giá trị hộp text Hãy gõ văn vào hộp text click vào nút Hiển thị name="HienThi" value="Hiển thị" ≅ Lưu ý: Khi muốn lấy giá trị phần tử JavaScript bạn phải đặt cho tên, ví dụ trên, để lấy giá trị hộp text ta đặt cho hộp text tên (name) HoTen 9/15 Sử dụng lớp xử lý Chuỗi, Ngày tháng, Toán học Bài số 10: Minh hoạ việc thay đổi giá trị hộp textbox Yêu cầu: Tạo ba hộp text tên SoHang1, SoHang2, KetQua nút có tên TinhTong, để thực phép tính tổng Khi người dùng nhập hai số hạng vào hộp SoHang1 SoHang2, sau click vào nút TinhTong kết tổng lưu vào hộp text KetQua Hướng dẫn: Để thay đổi giá trị thuộc tính phần tử HTML, bạn viết theo cách sau: . = Trong đó: Tên phần tử giá trị thuộc tính name bạn tạo thẻ Ví dụ: HoTen.value = "Đây văn mới", DangKy.value = "Sign Up now", v.v… Thay đổi giá trị thuộc tính Hãy nhập hai số click vào nút Tính tổng + = = parseFloat(SoHang1.value) + 10/15 Sử dụng lớp xử lý Chuỗi, Ngày tháng, Toán học ? Lưu ý: - Giá trị lưu hộp text xâu, để thực phép cộng đúng, bạn cần phải chuyển giá trị sang dạng số hàm parseFloat (Hoặc parseInt) - Việc thay đổi áp dụng cho phần tử khác button, checkbox, v.v… Bài tập 11: Minh hoạ việc gọi hàm người dùng click vào nút Yêu cầu:Tạo text có tên : MauNen, MauChu, TieuDe, TrangThai nút có tên ThayDoi, value "Thay đổi" Khi người dùng click vào nút ThayDoi màu nền, màu chữ, tiêu đề tài liệu trạng thái cửa sổ trình duyệt thay đổi giá trị text tương ứng Hướng dẫn: Bạn hoàn toàn viết nhiều câu lệnh thuộc tính OnClick ví dụ trước, nhiên có nhiều lệnh chương trình trông không sáng sủa cho Khi bạn nhóm câu lệnh vào hàm thuộc tính OnClick bạn việc gọi hàm Minh hoạ mẫu Thay đổi thuộc tính trang Web function CapNhat( ) { document.title = TieuDe.value; /* Thay đổi tiêu đề trang Web */ document.bgColor = MauNen.value; /* Thay đổi màu trang */ 11/15 Sử dụng lớp xử lý Chuỗi, Ngày tháng, Toán học document.fgColor = MauChu.value; /* Thay đổi màu chữ trang */ window.defaultStatus = TrangThai.value; /* Thay đổi dòng trạng thái cửa sổ */ } Nhập vào giá trị nhấn nút Thay đổi Nhận xét:Ở ví dụ trên, người dùng click chuột lên nút ThayDoi hàm CapNhat( ) gọi 12/15 Sử dụng lớp xử lý Chuỗi, Ngày tháng, Toán học 13/15 Sử dụng lớp xử lý Chuỗi, Ngày tháng, Toán học 14/15 Sử dụng lớp xử lý Chuỗi, Ngày tháng, Toán học 15/15 [...]... );"> Nhận xét:Ở ví dụ trên, khi người dùng click chuột lên nút ThayDoi thì hàm CapNhat( ) sẽ được gọi 12/15 Sử dụng các lớp xử lý Chuỗi, Ngày tháng, Toán học 13/15 Sử dụng các lớp xử lý Chuỗi, Ngày tháng, Toán học 14/15 Sử dụng các lớp xử lý Chuỗi, Ngày tháng, Toán học 15/15 .. .Sử dụng các lớp xử lý Chuỗi, Ngày tháng, Toán học ? Lưu ý: - Giá trị lưu trong hộp text luôn là một xâu, do vậy để thực hiện phép cộng được đúng, bạn cần phải chuyển giá trị sang dạng số bằng hàm parseFloat (Hoặc parseInt) như ở trên - Việc thay đổi này có thể áp dụng cho các phần tử khác như button, checkbox, v.v… Bài tập 11: Minh hoạ... trang Web */ document.bgColor = MauNen.value; /* Thay đổi màu nền của trang */ 11/15 Sử dụng các lớp xử lý Chuỗi, Ngày tháng, Toán học document.fgColor = MauChu.value; /* Thay đổi màu chữ của trang */ window.defaultStatus = TrangThai.value; /* Thay đổi dòng trạng thái của cửa sổ */ } Nhập vào các giá trị và nhấn nút Thay đổi ... hàm CapNhat( ) gọi 12/15 Sử dụng lớp xử lý Chuỗi, Ngày tháng, Toán học 13/15 Sử dụng lớp xử lý Chuỗi, Ngày tháng, Toán học 14/15 Sử dụng lớp xử lý Chuỗi, Ngày tháng, Toán học 15/15 ... Sử dụng lớp xử lý Chuỗi, Ngày tháng, Toán học Hướng dẫn: Đối với phần tử HTML, textbox, button, checkbox, Select v.v… Các trình duyệt cho phép ta thực thi nhiều câu lệnh JavaScript người sử dụng. .. đổi màu sử dụng đối tượng document 8/15 Sử dụng lớp xử lý Chuỗi, Ngày tháng, Toán học