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, chúng tôi 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 2021.
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, chúng tôi đã 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á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:
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.
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”
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.
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.
Giải mẫu:
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.
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:
Hiển thị Giờ và phút trong thanh đầu bài của cửa sổ khi web được nạp.
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 !”
Cho user nhập vào năm sinh của họ, sau đó hiển thị tuổi tương ứng.
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.
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.
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.
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.
Tổng hợp các bước để xây dựng 1 trang web mới nhất 2021
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ạ việc mang các câu lệnh JS vào trong một thẻ khi user chuột.
“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
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ẹ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”.
.value
Để get giá trị của một phần tử HTML nào đó, chúng ta viết
chính là trị giá của tính chất name khi bạn tạo thẻ.
– Hoten.value, DangKy.value, GioiTinh.value, Password.value v.v…
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.
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.
. =
Để 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ẻ.
HoTen.value = “Đây là văn bản mới”, DangKy.value = “Sign Up now”, v.v…
– 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…
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
Ở gợi ý trên, khi user bấm chuột lên nút ThayDoi thì hàm CapNhat( ) sẽ được gọi.
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”.
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).
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.
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.
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!”.
Ở 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.
: 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”…
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.
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);
Khi user nhập giá trị trong DonGia thì kết quả sẽ được cập nhật ngay trong ThanhTien.
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:
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.
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.
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.
Bài tập JavaScript 27: Tạo một textbox với màu nền là màu tím (magenta).
-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
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à:
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 đỏ.
document.all.LienKet.style.backgroundColor = ‘red’
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:
Trong đó LienKet là giá trị của thuộc tính ID.
J Câu lệnh JavaScript này đặt ở đâu?
Minh hoạ:
@ 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ạ 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.
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.
: Để 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ở).
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.
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.
Để ẩn hay hiện tầng bạn viết:
document.all.LienKet.style.visibility = ‘visible’ (hoặc ‘hidden’)
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:
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.
- 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ạ 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”.
- Để 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.
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/
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.
– dùng thẻ LAYER để tạo tầng và đặt tên cho nó là Tang1
document..src = “Địa chỉ trang cần nạp”
– 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.Tang1.src = document.form1.DiaChi.value
Trong trường hợp này sẽ là:
BÀI TẬP JAVASCRIPT TỰ GIẢI
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).
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).
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.
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.
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)
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.
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…
Nút đăng ký nên là nút thường, tức là tạo bằng thẻ:
- 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)
Nút tải ký nên là nút thường, tức là tạo bằng thẻ:
Bài số 10:
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();
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á.
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:
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,
: 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ụ:
nguồn: quantrimang.com
