Bài tập javascript cơ bản có lời giải là tài liệu tham khảo hết sức cần thiết của các bạn mới bắt đầu học ngôn ngữ lập trình này. Bài viết cung cấp nhiều cách giải bài tập javascript cơ bản có lời giải. Trong bài viết này, xaydungweb.vn sẽ viết bài viết Tổng hợp các bài tập javascript cơ bản có lời giải mới nhất 2020.
Tổng hợp các bài tập javascript cơ bản có lời giải mới nhất 2020
Nhằm tạo điều kiện cho việc học JavaScript của các bạn dễ dàng hơn, xaydungweb.vn đã sưu tầm một số bài tập JavaScript có kèm theo lời giải mẫu để các bạn thực hành.
Phần đầu sẽ là khoảng 40 bài tập JavaScript có giải mẫu, phía cuối post là những bài tập JavaScript tự giải, những bài khó có kèm theo tut, cho biết cụ thể để các bạn không bị ngợp. Hy vọng đề tài này sẽ có ích với các bạn đã tìm hiểu về ngôn ngữ lập trình JavaScript.
Cùng khởi đầu nhé!
Các bài tập javascript cơ bản có lời giải
Bài tập JavaScript 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 ả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:
<HTML><HEAD>HEAD><BODY><script language ="JavaScript">varTen,Tuoi;// Khai báo 2 biến để lưu tên và tuổiTen= prompt("Bạn hãy nhập vào tên ","");Tuoi= prompt("Bạn hãy nhập vào Tuổi : ",20);document.write("Chào bạn : "+Ten+"");document.write(" ");// Xuống thể loạidocument.write("Tuổi của bạn là : "+Tuoi+"");script>BODY>HTML>Bài tập JavaScript 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:
<HTML><HEAD>HEAD><BODY><script language ="JavaScript">document.write("Tao Button va Text bang Script ");document.write(" ");document.write("lớn JavaScript');' > ");document.write("");script>BODY>HTML>Bài tập JavaScript 3: Tạo một nút như trong gợi ý 2 và thêm tính năng sau: Khi user nhấn vào nút welcome thì hiển thị thông báo “Welcome lớn JavaScript”
Hướng dẫn: sử dụng thẻ để tạo nút bấm và thêm tính chất onClick = “;” (Trong đó đủ sức là một lệnh JavaScript bất kỳ, gợi ý lệnh document.write, alert, prompt hoặc lệnh gọi hàm v.v…)
Giải mẫu:
<HTML><HEAD>HEAD><BODY><input type=button name= welcome value="Welcome" onclick="alert('Welcome to JavaScript');">BODY>HTML>lưu ý quan trọng: Trong JavaScript, một hằng xâu được bao bởi cặp nháy đơn hoặc nháy kép, ví dụ các xâu: ‘nháy đơn’, “nháy kép” là những xâu hợp lệ, không những thế bạn viết: ‘abc” hay “xyz’ là những xâu k hợp lệ. Trong trường hợp bạn mong muốn in chính chính mình dấu nháy đơn hoặc nháy kép ra màn hình thì bạn đặt trước nó một ký tự \, ví dụ bạn đủ sức in ra màn ảnh loại chữ: Women’s day ra màn hình bằng hai hàm alert và document theo các phương pháp sau đây: alert(“Women’s day”), document.write(‘Women\’s day’); alert(“Women\”s day”); alert(‘Women”s day’); v.v…
Bài tập JavaScript 4: quét (đọc) trị giá của một phần tử HTML
Tạo 2 phần tử giống như trong gợi ý 2 bằng thẻ HTML, khi người dùng bấm chuột vào nút Welcome thì hiển thị nội dung chứa trong text có tên là msg.
Hướng dẫn: Để lấy trị giá của một phần tử HTML, bạn viết .value
Ví dụ: msg.value cho ta trị giá của text tên là msg.
Giải mẫu:
<HTML><HEAD>HEAD><BODY><input type = button name = welcome value ="Welcome" onclick ="alert(msg.value)"><input type = text name = msg value ="Welcome to JavaScript" size =30>BODY>HTML>Bài tập JavaScript 5: khônghai báo hàm trong JavaScript và cách link nút click với một hàm
Tạo 2 phần tử giống như gợi ý 2, khi user nhấn nút thì gọi một hàm có tên là HienThi, hàm hiển thị có chức năng hiển thị nội dung trong text có tên là msg ở trên.
tut: Trong thẻ tạo button, bạn đặt thuộc tính onClick = “”, trong trường hợp này bạn đặt OnClick = “HienThi()”. Điều này có nghĩa là khi người dùng click chuột (OnClick = nhấn chuột) thì trình duyệt hãy gọi hàm HienThi(). Cũng như trong ngôn ngữ C, Một hàm bắt buộc cần có cặp ngoặc đơn, cho dù có tham số hay k. ví dụ khi gọi hàm HienThi thì bạn phải viết là HienThi().
Giải mẫu:
<HTML><HEAD><ScriptLanguage="JavaScript">functionHienThi()// Khai báo một hàm tên là HienThialert(msg.value);// lấy content trong text box và hiển thịalert("Bạn hãy nhập vào ô text và thử lại !");Script>HEAD><BODY><input type = button name = welcome value ="Welcome" onclick ="HienThi()"><input type = text name = msg value ="Welcome lớn JavaScript" size =30>BODY>HTML>Lưu ý: Trong C, để khai báo một hàm thường bạn viết, ví dụ: int HienThi() v…v.. tuy nhiên, với JavaScript có hơi khác tí chút, thay vào đó bạn viết function HienThi().
Bài tập JavaScript 6: Minh hoạ phương pháp khai báo và sử dụng thị trường Date trong JavaScript để hiển thị ngày giờ của nền tảng.
Yêu cầu: Hãy hiển thị ngày và giờ của hệ thống máy tính khi website được nạp. Thông tin hiển thị ra có dạng giống như sau:
Hướng dẫn: Hướng dẫn kiểm tra dữ liệu nhập vào trong java mới nhất 2020
Bài tập JavaScript 7: Minh hoạ sử khai báo và sử dụng đối tượng Date để get giờ, phút, giây của hệ thống.
Yêu cầu: Hiển thị Giờ và phút trong thanh đầu bài của cửa sổ khi web được nạp.
Hướng dẫn: giá trị hiển thị trong thanh tiêu đề của trang web được lưu trong thuộc tính tít của phân khúc document, vì thế để hiển thị thông tin trên thanh 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ạ:
<HTML><BODY><script language="JavaScript">var D =newDate();document.tit ="Bây giờ là: "+ D.getHours()+" giờ "+ D.getMinutes()+" phút.";script>BODY>HTML>Bài tập JavaScript 8: ứng dụng biến phân khúc Date để tính tuổi của một người.
Yêu cầu : Cho user nhập vào năm sinh của họ, sau đó hiển thị tuổi tương ứng.
Hướng dẫn: dùng đối tượng Date để get năm cho đến nay. Tuổi sẽ bằng năm cho đến nay trừ đi năm sinh vừa nhập vào.
Minh hoạ mẫu:
<HTML><title>Tính tuổititle><BODY><script language="JavaScript">var D =newDate();varNamSinh,NamHienTai;NamHienTai= D.getYear();// Lưu năm ngày nay vào biếnNamSinh= prompt("Bạn sinh năm bao nhiêu ? : ","");alert("Tuổi của bạn ngày nay là : "+(NamHienTai-NamSinh));script>BODY>HTML>Bài tập JavaScript 9: Tương tự giống như bài 3 nhưng năm sinh nhập vào k được lớn hơn năm ngày nay.
Hướng dẫn: dùng vòng lặp do…while để yêu cầu nhập lại nếu năm sinh > năm hiện giờ.
Minh hoạ mẫu:
<HTML><tít>Tinh tuoititle><meta http-equiv="Content-Type" nội dung="text/html; charset=utf-8"><BODY><script language="JavaScript">var D =newDate();varNamSinh,NamHienTai;NamHienTai= D.getYear();//Lưu năm cho đến nay vào biếndoNamSinh= prompt("Bạn sinh năm bao nhiêu : ","");while(parseInt(NamSinh)>NamHienTai);//Nhập lại nếu Năm sinh>năm hiện giờalert("Tuổi của bạn hiện tại là : "+(NamHienTai-NamSinh));script>BODY>HTML>Bài tập JavaScript 10: Minh hoạ mẹo đặt các câu lệnh JavaScript vào trong các phần tử HTML để thực thi khi user nhấn chuột và sử dụng hàm open của thị trường window để mở website.
Yêu cầu: Viết đoạn Script cho user nhập vào một số nguyên. Nếu người dùng nhập số 1 thì xây dựng website https://quantrimang.com, nếu nhập số 2 thì xây dựng trang https://download.com.vn, nếu nhập số 3 thì xây dựng trang https://vndoc.com, còn nếu nhập một số không giống với 1, 2 hay 3 thì xây dựng trang https://meta.vn.
Hướng dẫn: Tổng hợp các bước để xây dựng 1 trang web mới nhất 2020
window.open(“Địa chỉ của trang cần mở”).
Ví dụ: window.open(https://quantrimang.com) để xây dựng trang chủ của VNN trong cửa sổ hiện giờ.
giống như vậy, để giải quyết yêu cầu của bài toán trên, bạn cần cho người dùng nhập vào một số và dùng cấu trúc switch để kiểm tra và mở trang web tương ứng.
Minh hoạ mẫu:
<HTML><tit>Mở trang web bằng hàm open của đối tượng window.title><meta http-equiv="Content-Type" nội dung="text/html; charset=utf-8"><BODY><script language="JavaScript">varLuaChon;LuaChon= prompt("Bạn hãy nhập vào một số để xây dựng trang web: ",1);switch(LuaChon)case"1": window.open("https://quantrimang.com");break;case"2": window.open("https://download.com.vn");break;case"3": window.open("https://vndoc.com");break;default: window.open("https://meta.vn");script>BODY>HTML>Bài tập JavaScript 11: Minh hoạ việc khai báo và sử dụng biến phân khúc Array để lưu trữ danh mục và cách dùng các hàm của đối tượng Array như hàm sort và vòng lặp for…in
Yêu cầu: Cho người dùng nhập vào danh mục tên của một lớp, sau đó sắp xếp theo vần Alphabet rồi hiển thị mục lục đã sắp xếp đó ra màn ảnh, mỗi người trên một dạng.
Hướng dẫn: sử dụng vòng lặp for để cho phép nhập danh mục họ tên và Lưu mục lục vào một mảng, sau đó dùng phương pháp sort của thị trường mảng để sắp xếp, tiếp theo sử dụng vòng lặp for…in để in các phần tử trong mục lục.
Minh hoạ mẫu:
<HTML><tít>Sắp xếp mảngtitle><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><BODY><script language="JavaScript">varSoLuong, x;var DS =newArray(100);//Khai báo mảng DS, đủ sức lưu tối đa là 100 phẩn tửSoLuong= prompt("Bạn cần nhập bao nhiêu người: ",5);for(i=0; i <SoLuong; i++)DS[i]= prompt("Nhập vào họ tên: ","");//Gọi hàm sort của thị trường mảng DS để bố tríDS.sort();//Hiển thị kết quả sau khi sắp (sort)document.write("Danh sách vừa mới bố trí là");for(x in DS)/* Nên sử dụng cấu trúc for … in này để duyệt mảng */document.write( DS[x]);document.write("
");// Xuống dạngscript>BODY>HTML>
Nhận xét: Nếu muốn sắp theo chiều giảm dần thì sau khi sort bạn gọi hàm reverse.
Bài tập JavaScript 12: Minh hoạ việc mang các câu lệnh JS vào trong một thẻ khi user bấm chuột.
Yêu cầu: Tạo một nút click (Button) có name = “DangKy”, value = “Đăng ký”. Khi người dùng click vào nút này thì thông báo là “Đăng ký dịch vụ E-Mail”.
Hướng dẫn: đối với các phần tử HTML, giống như textbox, button, checkbox, Select v.v… Các trình duyệt đều cho phép ta thực thi một hoặc nhiều câu lệnh JavaScript khi người sử dụng nhấn chuột lên các phần tử đó. chủ đề ở chỗ, viết các câu lệnh đó ntn ?
Để viết các câu lệnh JavaScript khi người dùng click chuột lên một phần tử nào đó, trong thẻ của phần tử này, ta viết giống như sau: OnClick = “Các câu lệnh JavaScript”.
“Các câu lệnh JavaScript” ở đây là bất kỳ câu lệnh JavaScript nào và chúng phải được cách nhau bởi dấu chấm phảy. không những thế, các câu lệnh phải đặt trong cặp dấu nháy kép (Hoặc nháy đơn).
Ví dụ một số phương pháp mang câu lệnh JavaScript cần thực thi khi user nhấn chuột
- Onclick = “alert(‘Hello world’;”
- OnClick = ‘write(“Welcome lớn JavaScript”);’
- OnClick = “var x,y; x = 10; y = 20; alert(‘Tổng là : ‘ + (x + y)); “
- OnClick = “var Tuoi; Tuoi = txtTuoi.value; KiemTra(Tuoi);”
- OnClick = “KiemTra();”
Theo gợi ý trên, khi người dùng Click:
1: Thực hiện câu lệnh alert(‘Hello world’)
2: Thực hiện câu lệnh document.write(‘Welcome to JavaScript’);
3: Thực hiện NHIỀU câu lệnh JavaScript
4: Thực hiện nhiều câu lệnh JavaScript và có lời gọi đến hàm KiemTra(Tuoi)
5: Thực hiện câu lệnh gọi hàm KiemTra().
Minh hoạ mẫu:
<HTML><HEAD><tit>Minh hoạđưa câu lệnh JavaScript vào các phần tửtit><META http-equiv="Content-Type" nội dung="text/html; charset=utf-8">HEAD><BODY><INPUT type="button" name="DangKy" value="Đăng ký" onClick="alert('Dang ky E-Mail'); ">BODY>HTML>Bài tập JavaScript 13: Minh hoạ mẹo thay đổi thuộc tính của một đối tượng thông qua việc viết các câu lệnh JavaScript.
Tạo một nút có name = ThayMauNen, value = “Thay đổi màu nền”. Khi người dùng nhấn chuột vào nút này thì cải thiện màu nền của trang web thành màu “xanh”.
Hướng dẫn: Để refresh màu nền của trang web thành màu, ta cần refresh tính chất document.bgColor = “blue”. (Màu đỏ là red, tìm: magenta, đen: black, trắng: white, vàng: Yellow, tím nhạt: lavender). như vậy, câu lệnh này sẽ được đặt trong phần onClick như sau:
<HTML><HEAD><tit>Thay mau nen bang nhấn chuottit><META http-equiv="Content-Type" content="text/html; charset=utf-8">HEAD><BODY><h2>Thayđổi màu nền sử dụng đối tượng documenth2><INPUT type="button" name="ThayMauNen" value="Thay đổi màu nền"onClick="document.bgColor = 'blue' ">BODY>HTML>Bài tập JavaScript 14: Minh hoạ việc đọc trị giá 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 user 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: Để get giá trị của một phần tử HTML nào đó, chúng ta viết
.value
Trong đó: chính là trị giá của tính chất name khi bạn tạo thẻ.
Ví dụ: – Hoten.value, DangKy.value, GioiTinh.value, Password.value v.v…
Minh hoạ:
<HTML><HEAD><tit>Đọc giá trị trong hộp texttít>HEAD><BODY><h2>Hãy gõ văn bản vào trong hộp text và nhấn vào nút Hiển thịh2><INPUT type="text" name="HoTen"><INPUT type="button" name="HienThi" value="Hiển thị" onClick="alert(HoTen.value); ">BODY>HTML>Lưu ý: Khi muốn get trị giá của phần tử nào đó bằng JavaScript thì bạn phải đặt cho nó một cái tên, giống như gợi ý ở trên, để lấy trị giá trong hộp text ta đang đặt cho hộp text này tên (name) là HoTen.
Bài tập JavaScript 15: Minh hoạ việc refresh trị giá 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 đó nhấn vào nút TinhTong thì hiệu quả tổng sẽ được lưu vào trong hộp text KetQua.
Hướng dẫn: Để refresh giá trị một tính chất nào đó của phần tử HTML, bạn viết theo mẹo sau:
. =
Trong đó: Tên phần tử chính là trị giá của thuộc tính name khi bạn tạo thẻ.
Ví dụ: HoTen.value = “Đây là văn bản mới”, DangKy.value = “Sign Up now”, v.v…
<HTML><HEAD><tít>Thayđổi giá trị của thuộc tínhtitle><META http-equiv="Content-Type" content="text/html; charset=utf-8">HEAD><BODY><h2>Hãy nhập hai số và click vào nút Tính tổngh2><INPUT type="text" name="SoHang1">+<INPUT type="text" name="SoHang2">=<INPUT type="text" name="KetQua"><INPUT type="button" value="Tính tổng"onClick="KetQua.value = parseFloat(SoHang1.value) + parseFloat(SoHang2.value)">BODY>HTML>Lưu ý: – trị giá lưu trong hộp text luôn là một xâu, cho nên để 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 cải thiện này có thể vận dụng cho các phần tử không giống giống như button, checkbox, v.v…
Bài tập JavaScript 16: Minh hoạ việc gọi hàm khi người dùng bấm vào một nút
Yêu cầu: xây dựng 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 user nhấn vào nút ThayDoi thì màu nền, màu chữ, đầu bài của ebook và thanh trạng thái của cửa sổ trình duyệt sẽ được refresh 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 tính chất 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 đủ nội lực nhóm các câu lệnh vào trong một hàm và trong tính chất OnClick bạn chỉ việc gọi hàm này ra.
Minh hoạ mẫu:
<HTML><HEAD><tít>Thayđổi thuộc tính của trang website</TITLE> HEAD><SCRIPT language="JavaScript">functionCapNhat()document.tit =TieuDe.value;/* refresh tittle của website */document.bgColor =MauNen.value;/* thay đổi màu nền của trang */document.fgColor =MauChu.value;/* cải thiện màu chữ của trang */window.defaultStatus =TrangThai.value;/* refresh thể loại trạng thái của cửa sổ */SCRIPT><BODY><h2>Nhập vào các giá trị và nhấn nút Thayđổih2><INPUT type="text" name="TieuDe" value="Tiêu đề mới"><INPUT type="text" name="MauNen" value="Nhập màu vào đây (ví dụ blue)"><BR><INPUT type="text" name="MauChu" value="Nhập màu chữ vào đây (ví dụ white)"><INPUT type="text" name="TrangThai" value="Nhập dạng tình trạng vào đây "><BR><INPUT type="button" name ="ThayDoi" value="Thay đổi" onClick="Ham( );">BODY>HTML>Nhận xét: Ở gợi ý trên, khi user bấm chuột lên nút ThayDoi thì hàm CapNhat( ) sẽ được gọi.
Bài tập JavaScript 17: Hãy tạo một nút nhấn (button) có value = “Thu”. Khi người dùng click vào nút này thì đầu bài của cửa sổ sẽ là “Bạn đã nhấn chuột”
Hướng dẫn: đầu tiên ta cần xác định nhìn thấy các lệnh nào cho phép ta thay đổi tittle của cửa sổ thành “Bạn đã bấm chuột”, tiếp theo là đặt các lệnh đó vào đâu để khi user click chuột thì nó được thực thi theo như yêu cầu bài toán
- Lệnh để thay đổi đầu bài như sau: tit = “Bạn đã nhấn chuột”
- như ta đang biết khi user nhấn thì sự kiện onClick xuất hiện, do đó câu lệnh trên sẽ được đặt tương ứng vào event onClick, giống như sau:
<HTML><HEAD><tit>Hãy bấm vào nút ở dưới và quan sát tiêu đềtitle>HEAD><BODY><input type=button value="Thu" onClick="document.title='Bạn đang click chuột' ">BODY>HTML>Bài tập JavaScript 18: Tạo một trang web, có 2 phần tử: Phần tử button có value = “Gửi”, và một phần tử textbox.Yêu cầu: khi user bấm vào nút send thì thông báo trên màn hình là: “Bạn đang nhấn vào nút gửi” còn khi user bấm vào textbox thì thông báo là “Bạn vừa mới nhấn vào textbox”.
Hướng dẫn: Theo yêu cầu của bài thì dòng thông báo “Bạn vừa mới bấm chuột vào nút gửi” xuất hiện chỉ khi người dùng nhấn chuột vào nút send, do vậy các lệnh thực hiện hiển thị thông báo sẽ được đặt trong sự kiện onclick của nút click. Còn loại thông báo “Bạn đang click chuột vào text box” khi người dùng nhấn chuột vào textbox, do đó các lệnh thực hiện hiển thị thể loại thông báo sẽ được đặt trong sự kiện onclick của textbox:
Minh hoạ:
<HTML><HEAD><tit>Hay nhấn vao nut va textbox o duoi va quan sat tieu detitle>HEAD><BODY><input type=button value="Gui" onClick="alert( 'Ban da nhấn chuot vao nut') "><input type=text onclick ="alert('Ban da click chuot vao textbox') ">BODY>HTML>Bài tập JavaScript 19: Tạo 2 nút, nút thứ nhất có value = “Xanh”, nút thứ hai có value = “Đỏ”.
Yêu cầu: Khi người dùng nhấn vào nút xanh thì màu nền của ebook là xanh (blue), còn khi user nhấn vào nút đỏ thì màu nền của tài liệu là: Đỏ (red).
Hướng dẫn: tính chất màu nền của ebook được lưu trong tính chất bgColor của phân khúc document. thuộc tính này có thể cải thiện được.
Minh hoạ:
<HTML><HEAD>HEAD><BODY><input type=button value=Xanh onclick="window.document.bgColor = 'blue'; "><input type = button value =Do onclick="window.document.bgColor = 'red'; ">BODY>HTML>Bài tập JavaScript 20:
Tạo một danh sách chọn bao gồm 4 màu: red, blue, brown và lavender. Khi user lựa chọn một màu thì màu nền của ebook sẽ cải thiện tương ứng.
Minh hoạ:
<HTML><HEAD>HEAD><BODY><script language =JavaScript>functionDoiMau()document.bgColor =mau.value;// Hoặc viết: window.document.bgColor = nhanh.value;script>Bạn hãy chọn màu nền:<Select name =nhanh onchange ="DoiMau();"><option value = red> Màu đỏoption><option value = blue> Màu xanh option><option value = brown> Màu nâu option><option value = lavender> Màu xanh nhạtoption>select>BODY>HTML>Bài tập JavaScript 21: Tạo một textarea có tên là NoiDung, một Textbox có tên là: SoKyTu. Với yêu cầu giống như sau: Khi người sử dụng gõ các phím vào trong textarea thì tỉ lệ ký tự (Độ dài xâu) chứa trong textarea đó sẽ được hiển thị trong textbox. Nếu tỉ lệ ký tự trong textarea gõ vào vượt quá 200 ký tự thì thông báo: “Bạn vừa mới gõ quá số ký tự cho phép!”.
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">head><script language="JavaScript">functionKiemTra()if(NoiDung.value.length >200) alert("Bạn đã gõ quá số ký tự cho phép!");SoKyTu.value =NoiDung.value.length;// Hiển thị số ký tự trong textbox SoKyTuscript><body style="font-family:arial">Số khôngý tựvừa mới gõ:<input type="text" name="SoKyTu"><BR><textarea name="NoiDung" cols=50 rows="10" onKeyUp="KiemTra();">textarea>body>html>Ở ví dụ trên, hàm rà soát 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.
Bài tập JavaScript 22: Tạo một nút có value = “Gửi”, textbox có name = “HoTen”, 2 nút radio có tên là GioiTinh và nhãn tương ứng là Nam, nữ.
Yêu cầu: Khi user di chuyển chuột vào phần tử nào thì hiển thị thông báo tương ứng dưới thanh tình trạng. ví dụ nếu người dùng di chuyển chuột qua nút nhấn “Gửi” thì thanh tình trạng sẽ là “Bạn đã di chuyển chuột vào nút”…
Hướng dẫn: Khi user di chuyển chuột thì event di chuyển chuột sẽ xuất hiện, event này có tên là : onMoseMove. Vậy ta sẽ viết lệnh trong sự kiện này.
Minh hoạ:
<html><head><tít>Xu ly su kientitle><meta http-equiv="Content-Type" nội dung="text/html; charset=utf-8">head><body phong cách="font-family:arial"><input type="button" value="Gửi" onmousemove="window.status = 'Chuột trong nút'; "><input onMouseMove ="window.status='Chuột trong textbox';"><BR><input type="radio" name="GioiTinh" onMouseMove="window.status='Trong nam';">Namoption><input type="radio" name="GioiTinh" onMouseMove="window.status='Trong nữ';"> Nữoption>body>html>Bài tập JavaScript 23:
Tạo 3 textbox, có tên lần lượt là: SoLuong (Số lượng), DonGia (Đơn giá) và ThanhTien (Thành tiền);
Yêu cầu: Khi user nhập giá trị trong DonGia thì kết quả sẽ được cập nhật ngay trong ThanhTien.
Hướng dẫn: Khi người dùng nhập giá trị trong textbox DonGia bằng cách bấm các phím số thì sự kiện click phím xuất hiện (sự kiện nhấn phím có tên là onKeyUp), thành ra ta sẽ viết các lệnh cung cấp với event này. Các lệnh ở đây chỉ có một vì vậy nên đặt ngay trong khái niệm thẻ, như sau:
<html><head><tít>Tinh tichtit><meta http-equiv="Content-Type" nội dung="text/html; charset=UTF-8">head><body style="font-family:arial;background-color:lavender"><H1>Bạn hãy nhập vào số lượng và giá:H1> Số lượng:<input name="SoLuong">Đơn giá:<input name="DonGia" onKeyUp="ThanhTien.value=SoLuong.value*DonGia.value"><HR>Thành tiền:<input name="ThanhTien"> USD body>html>Bài tập JavaScript 24: Tương tự giống như ví dụ 7, nhưng viết theo phương pháp khai báo 3 (Các lệnh viết trong hàm). hiệu quả luôn luôn cho ta như ví dụ 7:
<html><head><title>Tinh tichtit><meta http-equiv="Content-Type" nội dung="text/html; charset=UTF-8"><Script language =JavaScript>functionTinhToan()ThanhTien.value=SoLuong.value*DonGia.value ;// Hoặc bạn viết đầy đủ là:// window.ThanhTien.value = window.SoLuong.value*window.DonGia.valuehead><body phong cách="font-family:arial;background-color:lavender"><H1>Bạn hãy nhập vào số lượng và giá:H1>Số lượng:<input name="SoLuong">Đơn giá:<input name="DonGia" onKeyUp="TinhToan();"><HR>Thành tiền:<input name="ThanhTien"> USD body>html>Bài tập JavaScript 25: tạo ra một website đăng nhập vào trang Vinaphone để cho phép người gửi sms đến điện thoại di động.
hướng dẫn: Để tải nhập vào một website nào đó, những thông tin bắt buộc thường là UserName và password (mật khẩu). không những thế, ngoài những thông tin bắt buộc đó chúng ta còn phải gửi các thông tin phụ. Những thông tin phụ này user người sử dụng không hề nhập. (Các thông tin phụ đó dưới đây sẽ được gạch chân)
Minh hoạ:
<HTML><HEAD><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><tit>Đăng nhập vào trang https://quantrimang.comHEAD><BODY style="font-family:arial"><H2>Đăng nhập vào trang Quantrimang.com H2><HR><form action="https://quantrimang.com/account/login" method=bài viết>userNamePassword<BR><input type="text" id = username name="username" size="20"><input type="text" id= password name="password" size="20"><input type="hidden" name="id" value="0"><input type="hidden" name="language" value="en"><input type="submit" value="Đăng nhập - Login">p>form>BODY>HTML>Các thẻ có thuộc tính type = “hidden” sẽ k được hiển thị trong trình duyệt, không những thế khi chúng ta “Submit” thì các thông tin trong đó cũng được send đi.
Bài tập JavaScript 26: Tạo một dòng văn bản “Welcome to CSS” có font chữ là Arial, in nghiêng và kích thước font chữ là 16 point.
<HTML><HEAD>HEADS><BODY><P phong cách=“font-family:arial; font-phong cách:italic; font-size:16pt”>Quantrimang.com chào bạn!P>BODY>HTML>Bài tập JavaScript 27: Tạo một textbox với màu nền là màu tím (magenta).
<HTML><HEAD>HEADS><BODY><input type = text style =“background-color:magenta”>BODY>HTML>Bài tập JavaScript 28: Đặt 3 file ảnh nền tương ứng vào tài liệu, vào textbox và vào textarea
<HTML><HEAD>HEAD><BODY style="background-image:url('anh1.jpg');background-repeat:no-repeat"><input phong cách ="background-image:url('anh2.jpg');background-repeat:repeat-x; width:100%"><P><textarea phong cách ="background-image:url('anh3.jpg');background-repeat:repeat-y" cols =80 rows =25>textarea>BODY>HTML>*Ghi chú:
-Khi ta đặt là repeat-x thì ta có một dãy ảnh được xếp liên kế tiếp chiều ngang
-Khi ta đặt là repeat-y thì ta có một dãy hình được xếp liên kế tiếp chiều dọc
Bài tập JavaScript 29: Tạo một dạng văn bản, chứa xâu: “Trang chủ QTM”, trong đó từ “Trang chủ” có màu xanh (blue) và khi user di chuyển chuột đến chữ “Trang chủ” thì chuột chuyển thành hình bàn tay, và khi chuột click lên chữ này thì trang https://quantrimang.com sẽ được xây dựng.
<HTML><HEAD>HEAD><BODY><tit>Tạo liên kết và xử lý sự kiệntit><font style ="cursor:hand;color:blue" onclick="window.open('https://quantrimang.com');">Trang chủfont> QTM BODY>HTML>Ghi chú: Khi mong muốn vận dụng các kiểu cho một số phần tử các bạn chỉ cần viết : style=”Tên_Thuộc_tính : Giá_Trị;” trong khái niệm thẻ. Trong đó cặp “Tên_Thuộc_tính : Giá_Trị;” đủ nội lực viết giống như cột gợi ý đang chỉ ra ở các bảng trên.
content web của chúng ta hiện tại sẽ là:
<html><head><tit>Thêm kiểu cho phần tửtít>head><style type ="text/css">p font-family:.vntimeH; font-size:20pt; color:violetphong cách><body><p>Công nghệp><p>Windowsp><p>Linuxp><p>Macp><p>Mobilep>body>html>Bài tập JavaScript 30: Minh hoạ event di chuyển chuột vào phần tử.
Yêu cầu: Tạo một liên kết đến trang https://quantrimang.com/ bằng thẻ H2. Có màu nền là xanh, màu chữ là trắng. Khi chuột di chuyển đến thì đổi màu nền thành màu đỏ.
Hướng dẫn: Để đổi màu nền thành đỏ đối với thẻ H2 (hoặc thẻ bất kỳ) bạn viết:
document.all.LienKet.style.backgroundColor = ‘red’
Trong đó LienKet là giá trị của thuộc tính ID.
J Câu lệnh JavaScript này đặt ở đâu?
@ Theo như yêu cầu tiêu đề là: “Khi chuột di chuyển…”. vì vậy câu lệnh này sẽ được đặt trong sự kiện di chuyển chuột đến (có tên là onMouseMove)
Minh hoạ:
<HTML><HEAD><tit>Hiệu ứng di chuyển chuộttit><META HTTP-EQUIV="Content-Type" nội dung="text/html; charset=utf-8">HEAD><BODY><h2 ID="LienKet" style="background-color:blue; color:white"onMouseMove="document.all.LienKet.style.backgroundColor = 'red'">website công nghệ https://quantrimang.com/h2>BODY>HTML>Chú ý: Các tính chất trong bảng tra cứu “danh sách thuộc tính” nếu có chứa dấu gạch nối (ví dụ : background-color) thì khi viết trong JavaScript, bạn phải chuyển ký tự đứng ngay sau dấu gạch nối đó thành chữ hoa và bỏ dấu gạch nối đi. (Ví dụ từ background-color => backgroundColor).
Bài tập JavaScript 31: Minh hoạ event di chuyển chuột vào và ra khỏi một phần tử.
Yêu cầu: như bài 30, và thêm yêu cầu sau: Khi người dùng di chuyển chuột ra khỏi phần tử H2 đó thì đặt lại màu nền là màu xanh.
Hướng dẫn: Viết lệnh thay đổi màu nền thành xanh trong sự kiện di chuột ra ngoài.
Minh hoạ:
<HTML><HEAD><tít>Hiệu ứng di chuyển chuột Version2tit><META HTTP-EQUIV="Content-Type" nội dung="text/html; charset=utf-8">HEAD><BODY><H2 ID="LienKet" style="background-color:blue; color:white"onMouseMove ="document.all.LienKet.style.backgroundColor = 'red' "onMouseOut ="document.all.LienKet.style.backgroundColor = 'blue' ">web công nghệ https://quantrimang.com/H2>BODY>HTML>Bài tập JavaScript 32: Minh hoạ tạo một liên kết hoàn chỉnh đến một web
Yêu cầu: như bài 31 nhưng khi user nhấn chuột thì mở trang https://quantrimang.com/. Và chuột có ảnh bàn tay.
tut: Để mở web bất kỳ bạn viết: window.open(‘Địa chỉ URL’). Lệnh xây dựng này được đặt trong event nhấn chuột (Vì theo yêu cầu: khi người dùng bấm chuột thì mới mở).
Minh hoạ:
HTML><HEAD><title>Hiệu ứng di chuyển chuột Version2title><META HTTP-EQUIV="Content-Type" content="text/html; charset=utf-8">HEAD><BODY><H2 ID="LienKet" phong cách="background-color:blue; color:white; cursor:hand"onMouseMove ="document.all.LienKet.style.backgroundColor = 'red';"onMouseOut ="document.all.LienKet.style.backgroundColor = 'blue';"onclick ="window.open('https://quantrimang.com/');">website công nghệ https://quantrimang.com/H2>BODY>HTML>Bài tập JavaScript 33: Minh hoạ tạo tầng trong IE
Tạo một tầng bao gồm thể loại chữ “Welcome lớn LAYER!”, màu đỏ, click thước 40pt, font chữ Arial. toàn bộ dạng chữ này có độ rộng (width) là 300px.
Hướng dẫn: Việc tạo tầng và đặt các tính chất đủ nội lực đặt thông qua khái niệm style.
Minh hoạ:
<HTML><HEAD><tit>Tạo tầng trong IEtit><META HTTP-EQUIV="Content-Type" content="text/html; charset=utf-8">HEAD><BODY><DIV phong cách="position:absolute; color:red; font-family:arial; font-size:30pt;top:50px; left:50px; width:400px">Welcome to LAYER!DIV>body>HTML>Bài tập JavaScript 34: Minh hoạ việc ẩn và hiện tầng bằng câu lệnh JavaScirpt
Yêu cầu: tạo một dạng chữ “Các liên kết” bằng thẻ H2, màu nền là tím (magenta), màu chữ trắng (white). Và tạo một tầng có ID = LienKet, Trong tầng có một bảng gồm 2 hàng, 1 cột, nội dung của bảng chứa 2 link (bạn có thể tạo bằng thẻ A HREF) đến các trang https://download.com.vn/, và https://meta.vn/, Ban đầu, tầng này ẩn (visible : ‘hidden’). Khi người dùng sử dụng di chuyển chuột đến thẻ H2 thì tầng này hiện. Còn khi user nhấn vào một trong 3 link thì tầng này ẩn.
Hướng dẫn: Để ẩn hay hiện tầng bạn viết:
document.all.LienKet.style.visibility = ‘visible’ (hoặc ‘hidden’)
Minh hoạ:
HEAD><BODY><H2 style="color:white; background-color:magenta; width:200px"onMouseOver ="document.all.LienKet.style.visibility = 'visible';">Các liên khôngết H2><DIV ID="LienKet" phong cách="position:absolute; font-family:arial; visibility: hidden;background-color:yellow; top:40px; left:10px; width:200px;"><TABLE BORDER="0"><TR><TD onClick ="document.all.LienKet.style.visibility = 'hidden';"><A HREF ="https://download.com.vn/">web tải phần mềmA>TD>TR><TR><TD onClick ="document.all.LienKet.style.visibility = 'hidden';"><A HREF ="https://meta.vn/">website TMĐTA>TD>TR>TABLE>DIV>body>HTML>Bài tập tự giải 34′: Tạo một nền tảng menu phân tầng như hình:
Lời giải mẫu:
<HTML><HEAD><tit>Tạo menu trong IE - Sử dụng TẦNG vàJavaScripttít><META HTTP-EQUIV="Content-Type" nội dung="text/html; charset=utf-8">HEAD><style TYPE="TEXT/CSS">.MenuBarbackground-color:blue; color:white; font-family:arial; font-size:16pt;width:150px; cursor:hand.thực đơn background-color: yellow; color: white; position: absolute; top :40; visibility : hiddenphong cách><SCRIPT language="JavaScript">functionAnCacMenu()// Hàm Ẩn các menu có chức năng làm ẩn các tầng mỗi khi được gọidocument.all.Menu1.style.visibility ='hidden';document.all.Menu2.style.visibility ='hidden';document.toàn bộ.Menu3.style.visibility ='hidden';SCRIPT><BODY onClick ="AnCacMenu()"><DIV CLASS="Menu" ID="Menu1" phong cách ="left:10"><a href ="https://download.com.vn/">web tải phần mềma><br><a href ="https://meta.vn/">web TMĐTa>DIV><DIV CLASS="Menu" ID="Menu2" phong cách ="left:150;"><a href ="https://quantrimang.com/">web công nghệa><br><a href ="https://vndoc.com/">web học tậpa>DIV><DIV CLASS="Menu" ID="Menu3" phong cách ="left:250"><a href ="https://www.hust.edu.vn/">Đại học Bách khoa Hà Nộia><br><a href ="https://tmu.edu.vn/">Đại học Thương Mạia><br><a href ="https://vnu.edu.vn/">Đại học Quốc giaa>DIV><span CLASS="MenuBar" onMouseMove="AnCacMenu(); document.all.Menu1.style.visibility = 'visible'">Các liên kết span><span CLASS="MenuBar" onMouseMove="AnCacMenu(); document.all.Menu2.style.visibility = 'visible'">Tin tức span><span CLASS="MenuBar" onMouseMove="AnCacMenu(); document.all.Menu3.style.visibility = 'visible'">Các hoạt động span>body>HTML>Bài tập JavaScript 35: Minh hoạ thay đổi tính chất innerText
Yêu cầu: Tạo một thể loại chữ “I am having fun” thành “This is great fun” khi user bấm chuột.
Hướng dẫn: Bạn đủ sức sử dụng bất kỳ thẻ gì (thẻ H, thẻ P v.v…) để tạo loại chữ ở trên. Do đầu bài yêu cầu là chỉ thay đổi thể loại văn bản, thành ra chúng ta sẽ refresh thuộc tính innerText, dạng lệnh này sẽ đặt trong event onClick.
Minh hoạ:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">head><body><h2 id="ID1" onClick="document.all.ID1.innerText='Thật thú vị!'">webQuantrimang.comh2>body>html>Bài tập JavaScript 36: Minh hoạ cải thiện tính chất innerHTML
Yêu cầu: Tạo một loại chữ “Click vào đây”. Khi user nhấn chuột vào thì định dạng chữ đó biến thành nút có nhãn là “OK”.
Hướng dẫn:
- Bạn đủ nội lực sử dụng bất kỳ thẻ nào để hiển thị dòng chữ “Click vào đây”
- Trong sự kiện bấm chuột (onMouseMove) bạn viết lệnh thay nội dung trong thẻ bằng content mới (Nội dung này là thẻ tạo nút).
Minh hoạ:
<html><head><meta http-equiv="Content-Type" nội dung="text/html; charset=utf-8">head><body><h2 id="ID1" onClick="document.all.ID1.innerHTML=''">click vào đây h2>body>html>Bài tập JavaScript 37: 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 user bấm vào nút này thì xây dựng trang https://quantrimang.com/, trong một cửa sổ mới và dạng nút đó sẽ thay bằng dạng chữ “Trang này đang thăm”.
Hướng dẫn:
- Để xây dựng 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 thể loại chữ thông qua cải thiện tính chất outerText của nút.
Minh hoạ:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">head><SCRIPT language="JavaScript">functionThayDoi()window.open("https://quantrimang.com/","_blank");document.toàn bộ.Nut1.outerText="Trang này đang thăm";SCRIPT><body><INPUT id="Nut1" type="button" value="Open" onClick="ThayDoi();">body>html>Bài tập JavaScript 38: Minh hoạ refresh tính chất outerHTML
Yêu cầu: Tạo một loại chữ “Nhấp vào đây!” có màu xanh, kích cỡ H1. Khi user nhấn vào thể loại chữ này thì thay bằng một link đến trang https://quantrimang.com/
Hướng dẫn: Do ở đây khi user click vào định dạng chữ thì thay thế bằng một liên kết nên tính chất cần cải thiện sẽ là outerHTML. Câu lệnh cải thiện sẽ được đặt trong event nhấn chuột.
Minh hoạ:
<html><head><meta http-equiv="Content-Type" nội dung="text/html; charset=utf-8">head><SCRIPT language="JavaScript">functionChenLienKet()document.tất cả.LienKet.outerHTML='Trang QTM';SCRIPT><body><h1 id="LienKet" phong cách="color:blue" onClick="ChenLienKet()">Nhấp vào đây!h1>body>html>Bài tập JavaScript 39: Minh họa việc định vị động trong IE
Yêu cầu: Tạo một nút có nhãn là “Đăng ký”. Khi chuột di chuyển trong nút này thì hiển thị loại nhắc là “Đăng ký địa chỉ mail 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ì định dạng nhắc ẩn đi.
Hướng dẫn: Bạn xây dựng 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 tính chất visibility là ‘visible’ để cho hiện tầng đó và khi di chuyển chuột ra ngoài (onMouseOut) thì đặt lại tính chất visibility là ‘hidden’ để ẩn tầng. lưu ý, vị trí của chuột được lưu trong tính chất event.clientX và sự kiện.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ạ:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">head><SCRIPT language="JavaScript">functionHienThi()document.tất cả.Tang1.style.pixelLeft = event.clientX;document.all.Tang1.phong cách.pixelTop = sự kiện.clientY;document.toàn bộ.Tang1.phong cách.visibility ='visible';functionAnTang()// Ẩn Tầng Tang1document.all.Tang1.style.visibility ='hidden';SCRIPT><BODY><INPUT type="button" value="Đăng ký"onMouseMove="HienThi();"onMouseOut="AnTang()"><DIV id=Tang1 phong cách="position:absolute; visibility: hidden; background-color:yellow">Đăng khôngýđịa chỉ mail mới DIV>BODY>html>Bài tập JavaScript 40: Minh hoạ content trong Netscape
Yêu cầu: Tạo một tầng có tên là Tang1, một nút click có nhãn là “Load 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à click nút “Load trang web” thì content 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 ebook vào tầng. Cú pháp nạp ebook vào một tầng trong Netscape như sau:
document..src = “Địa chỉ trang cần nạp”
Trong trường hợp này sẽ là:
document.Tang1.src = document.form1.DiaChi.value
Minh hoạ:
<html><head><title>Hiển thị tooltiptit><meta http-equiv="Content-Type" content="text/html; charset=utf-8">head><body><LAYER name="Tang1"><h1> Tầng này dùng để hiển thị trang web bạn gõ trong hộpText!h1>LAYER><FORM name="Form1"><INPUT type="text" name="DiaChi"><INPUT type="button" value ='Load' onClick="document.Tang1.src = document.form1.DiaChi.value">FORM>body>html>BÀI TẬP JAVASCRIPT TỰ GIẢI
Bài số 1:
Tạo một tầng có chứa dòng chữ “Hello”, kích thước H1. Và một nút bấm có nhãn là “Thay đổi”. Khi user bấm vào nút này thì yêu cầu user nhập vào một xâu, sau đó thay content trong thẻ H1 bằng xâu nhập vào này (Theo 4 cách: thay tính chất innerText, innerHTML, outerText, outerHTML).
Bài số 2:
Tạo một thẻ H1, màu chữ xanh dùng để hiển thị thời gian của nền tảng (gồm giờ:phút:giây).
Gợi ý: Viết hàm CapNhat để quét giờ:phút:Giây trong máy tính sau đó gán cho tính chất innerText của thẻ H1. sử dụng hàm setInterval(“CapNhat();”, 1000) để tiếp tục cải tiến thời gian theo từng giây.
Bài số 3: Tạo 2 tầng trong IE, mỗi tầng chứa một bức ảnh. Tầng thứ nhất chạy từ trái sang phải màn hình, tầng thứ hai chạy từ trên xuống dưới màn ảnh.
Gợi ý: sử dụng 2 hàm setInterval để gọi 2 hàm di chuyển 2 tầng.
Bài số 4: Tạo một tầng chứa 3 link. Chuột nhấn tại vị trí nào thì tầng sẽ được đặt tại vị trí đó. Gợi ý: Viết lệnh trong sự kiện onClick của thẻ BODY.
Bài số 5: Tạo một form đăng ký E-Mail tương tự giống như của Yahoo (Bạn chỉ cần tạo một số phần tử, k cần tạo hết). Mỗi khi user di chuyển chuột đến một phần tử nào đó thì hiển thị một lời chú like bằng Tiếng việt. (Xem Bài số 5)
Bài số 6: Tạo 3 tầng (Trong Netscape), mỗi tầng nạp một trang tương ứng giống như sau: https://vndoc.com, https://quantrimang.com và https://meta.vn.
Bài số 7: Tạo một tầng chứa một bức hình, một nút có nhãn là “Di chuyển”. Khi người dùng click vào nút này thì bức ảnh sẽ di chuyển chéo từ góc trên bên phải xuống góc dưới bên trái của màn hình. ví dụ: tăng trưởng dần pixelTop, giảm pixelLeft.
Bài số 8: Hãy xây dựng website có giao diện như sau:
Yêu cầu:
- Khi người dùng di chuyển chuột đến phần tử nào thì hiển thị định dạng nhắc dưới thanh trạng thái để chỉ dẫn người dùng. Ví dụ: Khi user đưa chuột vào trong ô textbox người dùng Name thì thì hiển thị dưới thanh trạng thái là: “Nhập mã người dùng”, hay khi người đưa chuột đến nút “Đăng ký” thì hiển thị định dạng nhắc: “Gửi thông tin đi để đăng ký” v.v…
Hướng dẫn: Nút đăng ký nên là nút thường, tức là tạo bằng thẻ:
Bài số 9: Có giao diện như bài 1, nhưng yêu cầu như sau:
- Khi send thông tin đi, cần kiểm tra xem content user gõ trong ô Password với textbox trong ô “Gõ lại password” có giống nhau hay không? Nếu bằng nhau thì mới send (Submit) đi, còn nếu k bằng thì thông báo là “Password phải giống nhau”
- Khi gửi thông tin, cần tra cứu ngày sinh, tháng sinh phải hợp lệ. (Tức ngày phải nhỏ hơn 32, tháng phải nhỏ hơn 13)
Hướng dẫn:
Nút tải ký nên là nút thường, tức là tạo bằng thẻ:
Trong đó Hàm DangKy() sẽ rà soát dữ liệu hợp lệ và khi dữ liệu nhập vào đúng đắn thì gửi đi bằng cách gọi mẹo submit của phân khúc document, như sau: document.submit();
Bài số 10:
sử dụng tương tự bài tập 7 và 8, nhưng thêm yêu cầu: Khi người dùng nhập hoặc số lượng, hoặc đơn giá thì hãy tính luôn ô textbox thành tiền.
Hướng dẫn: Viết lệnh tính thành tiền trong cả 2 sự kiện onKeyUp của cả hai textbox tỉ lệ và textbox đơn giá.
*** Lưu ý: Trước khi tính tích thì cần phải rà soát nhìn thấy dữ liệu trong hai textbox đang có hay chưa, nếu một ô chưa nhập gì thì chưa tính.
Bài số 11: Hãy tạo một menu đặt theo chiều dọc gồm 4 mục giống như sau:
| giới thiệu |
| Tin tức |
| sản phẩm |
| trợ giúp |
Yêu cầu: 4 mục này có màu nền là xanh, màu chữ là vàng (yellow). Khi người dùng di chuyển đến mục nào thì mục đó có màu nền là màu đỏ. Khi di chuyển chuột ra khỏi thì màu nền trở lại màu xanh.
Khi người dùng nhấn vào thì xây dựng ra trang tương ứng là https://download.com.vn, https://vndoc.com, https://meta.vn và https://quantrimang.com.
Gợi ý: sử dụng tương tự như bài tập mẫu, nhưng xây dựng 4 thẻ H2.
Bài số 11: Hãy tạo một thực đơn gồm 4 mục giống như ở trên nhưng theo chiều ngang,
tut: Nếu bạn sử dụng thẻ H2, thì mỗi mục sẽ auto được đặt riêng trên một loại. Để có thể đặt nhiều mục trên cùng một định dạng, bạn đủ nội lực tạo một bảng có một hàng và nhiều cột. Mỗi mục bây giờ sẽ được đặt trong một thẻ . Để refresh kích thước, màu nền, màu chữ v.v.. Bạn cũng dùng STYLE: style = “color: white” ……
Hoặc hướng dẫn thứ hai là bạn dùng thẻ . Ví dụ:
<Spanphong cách=“color:white;background-color:blue; cursor:hand; font-size:16pt”onClick=“window.open(‘https://quantrimang.com/’);”>Trang QTMSpan>Tuy nhiên, còn có nhiều bài tập C++, bài tập Python, bài tập Java các bạn đừng bỏ qua nếu đang học các ngôn ngữ lập trình này nhé.
nguồn: quantrimang.com
