49
682 KB
1
Xin chào
+ Tạo một nút nhấn có màu nền đỏ: Kết quả Chương I: Bài tập cơ bản về JavaScript Mục tiêu: Kết thúc chương này người học có thể: Viết các câu lệnh JavaScript và nhúng vào trang web Sử dụng được các đối tượng nhập xuất Promt, document.write. Truy xuất thuộc tính của các phần tử HTML bằng câu lệnh JavaScript Viết lệnh xử lý một số sự kiện đơn giản. Nội dung: 6 Ví dụ 1: Cho người dùng nhập vào tên và tuổi. Hãy viết lại tên và tuổi của người đó ra màn hình bằng hàm document.write, trong đó tên có màu đậm, tuổi được gạch chân. Giải mẫu: Ví dụ 2: Tạo một nút nhấn (button) có name là welcome, value là " Welcome ". Một textbox có tên là msg, value = "Welcome to". Hướng dẫn : Sử dụng phương thức (hàm) write của đối tượng document để tạo. Giải mẫu: Ví dụ 3: Tạo một nút như trong ví dụ 2 và thêm chức năng sau: Khi người dùng click vào nút welcome thì hiển thị thông báo "Welcome to JavaScript !" Hướng dẫn: Dùng thẻ để tạo nút nhấn và thêm thuộc tính onClick = "Thay đổi màu nền sử dụng đối tượng document
12 Bài số 9: Minh hoạ việc đọc giá trị trong phần tử text và hiển thị ra màn hình Yêu cầu: Tạo một hộp text có tên là HoTen. Một nút có tên là HienThi, value = "Hiển thị". Khi người dùng click vào nút HienThi thì hiển thị nội dung trong hộp text đó bằng hàm alert. Hướng dẫn: Để lấy giá trị của một phần tử HTML nào đó, chúng ta viếtHãy gõ văn bản vào trong hộp text và click vào nút Hiển thị
Lưu ý: Khi muốn lấy giá trị của phần tử nào đó bằng JavaScript thì bạn phải đặt cho nó một cái tên, như ví dụ ở trên, để lấy giá trị trong hộp text ta đã đặt cho hộp text này tên (name) là HoTen. Bài số 10: Minh hoạ việc thay đổi giá trị của hộp textbox Yêu cầu: Tạo ra ba hộp text lần lượt tên là SoHang1, SoHang2, KetQua và một nút có tên là TinhTong, để thực hiện phép tính tổng. Khi người dùng nhập hai số hạng vào hộp SoHang1 và SoHang2, sau đó click vào nút TinhTong thì kết quả tổng sẽ được lưu vào trong hộp text KetQua. Hướng dẫn: Để thay đổi giá trị một thuộc tính nào đó của phần tử HTML, bạn viết theo cách sau:Hãy nhập hai số và click vào nút Tính tổng
+ = 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… 13 Bài tập 11: Minh hoạ việc gọi hàm khi người dùng click vào một nút Yêu cầu: Tạo ra 4 text có tên lần lượt là : MauNen, MauChu, TieuDe, TrangThai và một nút có tên là ThayDoi, value là "Thay đổi". Khi người dùng click vào nút ThayDoi thì màu nền, màu chữ, tiêu đề của tài liệu và thanh trạng thái của cửa sổ trình duyệt sẽ được thay đổi bằng các giá trị trong text tương ứng Hướng dẫn: Bạn hoàn toàn có thể viết nhiều câu lệnh trong thuộc tính OnClick như các ví dụ trước, tuy nhiên nếu có nhiều lệnh thì chương trình trông không được sáng sủa cho lắm. Khi đó bạn có thể nhóm các câu lệnh vào trong một hàm và trong thuộc tính OnClick bạn chỉ việc gọi hàm này ra. Minh hoạ mẫuNhập vào các giá trị và nhấn nút Thay đổi
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. Thanh Thanh tiêu tiêu đề đề của cửa của cửa sổ sổ Thanh Thanh trạng trạng thái thái của của cửa cửa sổ sổ 14 Đối tượng String Bất kỳ một biến xâu hoặc một hằng xâu đều được coi là một đối tượng xâu. Ví dụ ta có: var s = "Hung Yen-Aptech", "JavaScript" hay var x = new String("Welcome to Aptech") thì biến s, x và hằng "Hưng Yên - Aptech" đề là các đối tượng xâu và đều có các phương thức và thuộc tính dưới đây. Thuộc tính Tên thuộc tính ý nghĩa length Cho biết độ dài của một xâu x Tên phương thức charAt(n) ý nghĩa Cho ta ký tự tại vị trí: n Cho ta vị trí xuất hiện của xâu s trong xâu s. Nếu không thấy thì vị trí trả về là -1. Cho ta vị trí cuối cùng của xâu x trong xâu s Lấy ra một xâu con trong xâu s, lấy từ vị trí n1 đến n2 (số ký tự lấy ra là n2-n1 ký tự) Chuyển xâu s thành chữ thường indexOf(x) lastIndexOf(x) substring(n1, n2) toLowerCase() Phương thức Ví dụ var x = "abc"; alert(x.length); // 3 alert("Aptech".length); // 6 Ví dụ alert(s.charAt(0)); //H s.indexOf("Aptech") -> 9 "Hello".indexOf("e") -> 1 "Java".indexOf("C") -> -1 s.lastIndexOf("n") -> 7 "Hello".lastIndexOf("l") -> 3 s.substring(0,3) -> "Hun" s.substring(2,4) -> "ng" "Hello".substring(2,5) ->"llo" s.toLowerCase() -> "hung yen-aptech" "Hello".toLowerCase()->"hello" s.toUpperCase() -> "HUNG YENAPTECH" "Hello".toUpperCase() -> "HELLO" document.write(s.big()) document.write("abc".big()) document.write(s.bold()) document.write("abc".bold()) toUpperCase() Chuyển xâu s thành chữ HOA big() In to xâu s bold() In đậm xâu s fontcolor(m) In xâu s với màu m. ví dụ màu: "red", "blue" m"magenta" v.v.. document.write(s.fontcolor("blue")) document.write("abc".fontcolor("red")) fontsize(n) In xâu s với kích cỡ font là n document.write(s.fontsize(30)) document.write("Java".fontsize(20)) strike() In xâu s với đường gạch ngang document.write(s.strike()) sub() In xâu s ở dưới dòng hiện tại sup() In xâu s ở trên dòng hiện tại anchor(A) Tạo một điểm neo, có tên là A, phần hiển thị là s. document.write(s.anchor("TOP")) link(A) Tạo một liên kết đến điểm neo A, phần hiển thị là s document.write(s.link("#TOP")) document.write("Về đầu trang".link("#TOP")) document.write(s.sub()) document.write("H"+"2".sub()+"O")// H2O document.write(s.sub()) document.write("x" + "2".sup());// -> x2 Đối tượng Math Với đối tượng Math, Khi khai báo biến thuộc đối tượng này, bạn không được viết dạng như : var m = new Math(); Khi muốn sử dụng các thuộc tính và phương thức của đối tượng này bạn gọi trực tiếp các thuộc tính và phương thức, ví dụ: Math.sin(3.14), Math.PI, Math.abs(x) v.v... Thuộc tính Tên thuộc tính ý nghĩa PI Cho ta hằng số PI (tức 3.14159) E Cho ta hằng số E (= 2.718…) Ví dụ var BanKinh = 10; alert("Diện tích hình tròn là :" + Math.PI * BanKinh*BanKinh); alert("Hằng số E là: " + Math.E) 15 SQRT2 Cho ta căn bậc 2 của 2 : (=1.4142) Cho ta (căn bậc 2 của 2) / 2 SQRT1_2 Tên phương thức ý nghĩa abs(x) Cho ta trị tuyệt đối của x sin(x), cos(x) Tính sin và cos của x sqrt(x) Tính căn bậc hai của x pow(x,y) Tính xy round(x) Làm tròn số x. Nếu phần lẻ sau phần thập phân > = 0.5 thì bỏ phần thập phân và cộng thêm 1. Trái lại thì bỏ phần thập phân nhưng và không cộng gì max(a,b) Cho ta giá trị lớn nhất trong hai số a và b min(a,b) Cho ta giá trị nhỏ nhất trong hai số a và b Phương thức ceil(x) floor(x) Làm tròn số x, Nếu số x có phần thập phân thì phần thập phân bị cắt đi sau đó cộng thêm 1 vào x Làm tròn số x, nếu x có phần lẻ thập phân thì bị cắt đi, chỉ lấy phần nguyên. alert("Căn bậc 2 của 2 = " + Math.SQRT2); alert("Căn bậc 2 của 2 /2 = " + Math.SQRT1_2); Ví dụ alert(Math.abs(-19)); // -> 19 alert(Math.abs(-1.5));// -> 1.5 alert("Sin(1.5) = " + Math.sin(1.5)); alert("Cos(0) = " + Math.cos(0)); alert("Căn 16 = " + Math.sqrt(16)); //4 alert("6^2="+ Math.pow(6,2)); //->36 alert("9^0.5="+ Math.pow(9,0.5));//3 alert(Math.round(3.5));//->4 alert(Math.round(3.6));//->4 alert(Math.round(3.49));//->3 var a = 10, b = 100; alert("Max(a,b) = ",Math.max(a,b)); //100 alert(Math.max(-1,2));//->2 var a = 10, b = 100; alert("Min(a,b)=",Math.min(a,b));//10 alert(Math.min(-1,2));//->-1 var x = 1.1, y = 2.5, z = 4.8; alert(Math.ceil(x), Math.ceil(y),Math.ceil(z)); // ->235 var x = 1.1, y = 2.5, z = 4.8; alert(Math.floor(x), Math.floor(y),Math.floor(z)); // ->124 Đối tượng Date Khai báo biến thuộc đối tượng Date như sau: var
Hello !
Ví dụ 4: Ta hãy đi phân tích ví dụ 1. Trong ví dụ này ta đã tạo ra một textbox và viết (khai báo) sự kiện click như sau : onClick = "alert('Bạn đã click vào textbox');" Ở đây có 2 phần: - Phần onClick : là tên của sự kiện click chuột (xin tham khảo ở bảng trên). - Phần thứ 2 sau dấu =, là một câu lệnh JavaScript tương ứng sẽ được thực thi khi sự kiện click chuột xảy ra đối với textbox đó. ở đây là câu lệnh alert. Điều này có nghĩa là, bất cứ khi nào người dùng click chuột vào textbox này thì trình duyệt sẽ tự động thực thi câu lệnh alert('Bạn đã click vào textbox'); Kết luận: Nếu chúng ta muốn trình duyệt thực thi một câu lệnh nào đó khi một sự kiện xảy ra thì cần khai báo trong phần định nghĩa thẻ như sau:Ở ví dụ trên: Hàm kiểm tra sẽ được gọi mỗi khi sự kiện nhấn phím (onKeyUp) xuất hiện hay nói cách khác là khi người dùng gõ thêm một ký tự vào trong textarea. Ở đây ta không đặt hàm kiểm tra vào trong sự kiện onClick; Màn hình cho ví dụ này có dạng như sau:
Nam Nữ
Bạn hãy nhập vào số lượng và giá:
Số lượng: Đơn giá:Thành tiền: USD 22
I am having func
Bài số 2: Minh hoạ thay đổi thuộc tính innerHTML Yêu cầu: Tạo một dòng chữ "Click here". Khi người dùng click chuột vào thì dòng chữ đó biến thành nút có nhãn là "Having fun" Hướng dẫn: Bạn có thể sử dụng bất kỳ thẻ nào để hiển thị dòng chữ "Click here" Trong sự kiện click chuột (onMouseMove) bạn viết lệnh thay nội dung trong thẻ bằng nội dung mới (Nội dung này là thẻ tạo nút). Minh hoạ:Click here
Bài số 3: Minh hoạ thay thế thuộc tính outerText. Yêu cầu: Tạo một nút có nhãn là "Open". Khi người dùng click vào nút này thì mở trang http://www.echip.com.vn, trong một cửa sổ mới và dòng nút đó sẽ thay bằng dòng chữ "Trang này đã mở". Hướng dẫn: Để mở một trang web trong một cửa sổ mới, bạn viết: window.open("Địa chỉ URL của trang cần mở", "_Blank") Thay thế nút bằng một dòng chữ thông qua thay đổi thuộc tính outerText của nút. Minh hoạ: 44 Bài số 4: Minh hoạ thay đổi thuộc tính outerHTML Yêu cầu: Tạo một dòng chữ "Click here" có màu xanh, kích cỡ H1. Khi người dùng click vào dòng chữ này thì thay bằng một liên kết đến trang http://www.vn.vn Hướng dẫn: Do ở đây khi người dùng click vào dòng chữ thì thay thế bằng một liên kết nên thuộc tính cần thay đổi sẽ là outerHTML. Câu lệnh thay đổi sẽ được đặt trong sự kiện Click chuột. Minh hoạ:Click Here
Bài số 5: Minh họa việc định vị động trong IE Yêu cầu: Tạo một nút có nhãn là "Sign Up". Khi chuột di chuyển trong nút này thì hiển thị dòng nhắc là "Đăng ký hòm thư mới" có màu nền là vàng tại vị trí của con chuột. Khi chuột di chuyển ra ngoài thì dòng nhắc ẩn đi. Hướng dẫn: Bạn tạo ra một tầng chứa dòng chữ "Đăng ký hòm thư mới" có màu nền là vàng. Khi chuột di chuyển đến (onMouseMove) thì đặt thuộc tính visibility là 'visible' để cho hiện tầng đó và khi di chuyển chuột ra ngoài (onMouseOut) thì đặt lại thuộc tính visibility là 'hidden' để ẩn tầng. Lưu ý, vị trí của chuột được lưu trong thuộc tính event.clientX và event.clientY. Bạn sẽ gán vị trí này của chuột cho 2 thuộc tính pixelLeft và pixelTop để định vị tầng. Minh hoạ: 45
Đăng ký hòm thư mới
Kết quả khi chuột di chuyển vào trong nút
Bài số 6: Minh hoạ nội dung trong Netscape
Yêu cầu: Tạo một tầng có tên là Tang1, một nút nhấn có nhãn là "Nạp trang Web"
và một hộp text có tên là DiaChi. Khi người dùng nhập địa chỉ vào trong hộp text và
nhấn nút "Nạp trang web" thì nội dung của trang đó sẽ được nạp vào tầng Tang1.
Hướng dẫn:
- Dùng thẻ LAYER để tạo tầng và đặt tên cho nó là Tang1
- Viết trong sự kiện onCLick của nút "Nạp trang web" câu lệnh nạp tài liệu vào tầng.
Cú pháp nạp tài liệu vào một tầng trong Netscape như sau:
document.