Xem Nhiều 5/2022 # Tổng Hợp Bài Tập Javascript Có Code Mẫu # Top Trend

Xem 16,731

Cập nhật thông tin chi tiết về Tổng Hợp Bài Tập Javascript Có Code Mẫu mới nhất ngày 21/05/2022 trên website Caffebenevietnam.com. Hy vọng nội dung bài viết sẽ đáp ứng được nhu cầu của bạn, chúng tôi sẽ thường xuyên cập nhật mới nội dung để bạn nhận được thông tin nhanh chóng và chính xác nhất. Cho đến thời điểm hiện tại, bài viết này đã đạt được 16,731 lượt xem.

--- Bài mới hơn ---

  • Bài Tập C/c++ Có Lời Giải Pdf
  • Học Jquery Cơ Bản Và Nâng Cao
  • Bài Tập C Có Lời Giải
  • Địa Chỉ Các Trang Web Hướng Dẫn Giải Bài Tập Cho Học Sinh Hay Nhất
  • Giải Sbt Toán 12 Bài 2: Mặt Cầu
  • Nhằm giúp cho việc học JavaScript của các bạn dễ dàng hơn, chúng tôi đã tổng hợp 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.

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

    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.

    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ệ, tuy nhiên bạn viết: ‘abc” hay “xyz’ là những xâu không hợp lệ. Trong trường hợp bạn muốn in chính bản thân 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 có thể in ra màn hình dòng chữ: Women’s day ra màn hình bằng hai hàm alert và document theo các cách 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: Lấy (đọc) giá trị của một phần tử HTML

    Ví dụ: msg.value cho ta giá trị của text tên là msg.

    Bài tập JavaScript 5: Khai báo hàm trong JavaScript và cách liên kết nút nhấn với một hàm

    Tạo 2 phần tử như ví dụ 2, khi người dùng 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ạ cách khai báo và sử dụng đối tượng Date trong JavaScript để hiển thị ngày giờ của hệ thống.

    Hãy hiển thị ngày và giờ của hệ thống máy tính khi trang Web được nạp. Thông tin hiển thị ra có dạng như sau:

    Sử dụng đối tượng Date và sử dụng các hàm lấy thứ, ngày, tháng, năm để in thông tin ra màn hình. Chú ý đến các hàm tính tháng, ngày trong tuần bị hụt một đơn vị.

    Hiển thị Giờ và phút trong thanh tiêu đề của cửa sổ khi trang Web được nạp.

    Cho người dùng nhập vào năm sinh của họ, sau đó hiển thị tuổi tương ứng.

    Sử dụng đối tượng Date để lấy năm hiện tại. Tuổi sẽ bằng năm hiện tại trừ đi năm sinh vừa nhập vào.

    Viết đoạn Script cho người dùng nhập vào một số nguyên. Nếu người dùng nhập số 1 thì mở trang Web https://quantrimang.com, nếu nhập số 2 thì mở trang https://download.com.vn, nếu nhập số 3 thì mở trang https://vndoc.com, còn nếu nhập một số khác với 1, 2 hay 3 thì mở trang https://meta.vn.

    Để mở một trang Web bất kỳ trong cửa sổ hiện hành bạn viết như sau:

    window.open(“Địa chỉ của trang cần mở”).

    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à sử dụng cấu trúc switch để kiểm tra và mở trang web tương ứng.

    Minh hoạ việc khai báo và sử dụng biến đối tượng Array để lưu trữ danh sách và cách sử dụng các hàm của đối tượng Array như hàm sort và vòng lặp chúng tôi

    Cho người dùng nhập vào danh sách tên của một lớp, sau đó sắp xếp theo vần Alphabet rồi hiển thị danh sách đã sắp xếp đó ra màn hình, mỗi người trên một dòng.

    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.

    “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. Ngoài ra, các câu lệnh phải đặt trong cặp dấu nháy kép (Hoặc nháy đơn).

    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().

    Để lấy giá trị của một phần tử HTML nào đó, chúng ta viết

    – Hoten.value, DangKy.value, GioiTinh.value, Password.value v.v…

    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.

    Để 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:

    HoTen.value = “Đây là văn bản mới”, DangKy.value = “Sign Up now”, v.v…

    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…

    Thuộc tính màu nền của tài liệu được lưu trong thuộc tính bgColor của đối tượng document. Thuộc tính này có thể thay đổi được.

    Tạo một danh sách lựa chọn gồm có 4 màu: red, blue, brown và lavender. Khi người dùng chọn một màu thì màu nền của tài liệu sẽ thay đổi tương ứng.

    Ở 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.

    : Khi người dùng 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 trạng thái. Ví dụ nếu người sử dụng di chuyển chuột qua nút nhấn “Gửi” thì thanh trạng thái sẽ là “Bạn đang di chuyển chuột vào nút”…

    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 người dùng 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 nhấn các phím số thì sự kiện nhấn phím xuất hiện (sự kiện nhấn phím có tên là onKeyUp), do vậy ta sẽ viết các lệnh đáp ứng với sự kiện này. Các lệnh ở đây chỉ có một do vậy nên đặt ngay trong định nghĩa thẻ, như sau:

    Các thẻ có thuộc tính type = “hidden” sẽ không được hiển thị trong trình duyệt, tuy nhiên khi chúng ta “Submit” thì các thông tin trong đó cũng được gửi đ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.

    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 tiếp theo chiều ngang

    -Khi ta đặt là repeat-y thì ta có một dãy ảnh được xếp liên tiếp theo chiều dọc

    Khi muốn áp 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 định nghĩa thẻ. Trong đó cặp “Tên_Thuộc_tính : Giá_Trị;” có thể viết như cột ví dụ đã chỉ ra ở các bảng trên.

    Nội dung trang Web của chúng ta bây giờ sẽ là:

    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 đầu bài là: “Khi chuột di chuyển…”. Do 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)

    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.

    Tạo một tầng gồm có dòng chữ “Welcome to LAYER!”, màu đỏ, kích 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 thuộc tính có thể đặt thông qua định nghĩa STYLE.

    Để ẩ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 hệ thống menu phân tầng như hình:

    Minh hoạ thay đổi thuộc tính innerHTML

    Minh hoạ thay thế thuộc tính outerText.

    • Để 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 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ị dòng nhắc là “Đăng ký địa chỉ email 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.

    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à “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à nhấn nút “Load trang web” thì nội dung của trang đó sẽ được nạp vào tầng Tang1.

    – 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.Tang1.src = document.form1.DiaChi.value

    BÀI TẬP JAVASCRIPT TỰ GIẢI

    Tạo một thẻ H1, màu chữ xanh dùng để hiển thị thời gian của hệ thống (gồm giờ:phút:giây).

    Gợi ý: Sử dụng 2 hàm setInterval để gọi 2 hàm di chuyển 2 tầng.

    Tạo 3 tầng (Trong Netscape), mỗi tầng nạp một trang tương ứng như sau: https://vndoc.com, https://quantrimang.com và https://meta.vn.

    Bài số 8: Hãy tạo ra trang Web có giao diện như sau:

      Khi người dùng di chuyển chuột đến phần tử nào thì hiển thị dòng nhắc dưới thanh trạng thái để hướng dẫn người dùng. Ví dụ: Khi người dùng đưa chuột vào trong ô textbox User 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ị 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 gửi thông tin đi, cần kiểm tra xem nội dung người dùng 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 gửi (Submit) đi, còn nếu không bằng thì thông báo là “Password phải giống nhau”
    • Khi gửi thông tin, cần kiểm tra 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 đăng ký nên là nút thường, tức là tạo bằng thẻ:

    Bài số 10:

    Làm 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 số lượng và textbox đơn giá.

    Bài số 11: Hãy tạo một menu đặt theo chiều dọc gồm 4 mục như sau:

    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.

    Gợi ý: Làm tương tự như bài tập mẫu, nhưng tạo ra 4 thẻ H2.

    Bài số 11: Hãy tạo một menu gồm 4 mục như ở trên nhưng theo chiều ngang,

    --- Bài cũ hơn ---

  • Tổng Hợp Các Bài Tập Javascript Cơ Bản Có Lời Giải 2022
  • Tổng Hợp Bài Tập Java Có Đáp Án Chi Tiết
  • Top 5 Website Về Giáo Dục Giải Bài Tập Có Lượt Truy Cập Lớn Nhất Việt Nam
  • Giải Tập Bản Đồ Địa Lí 10 Bài 34: Địa Lí Các Ngành Công Nghiệp
  • Giải Tập Bản Đồ Địa Lí 10 Bài 6: Hệ Quả Chuyển Động Xung Quanh Mặt Trời Của Trái Đất
  • Bạn đang xem bài viết Tổng Hợp Bài Tập Javascript Có Code Mẫu trên website Caffebenevietnam.com. Hy vọng những thông tin mà chúng tôi đã chia sẻ là hữu ích với bạn. Nếu nội dung hay, ý nghĩa bạn hãy chia sẻ với bạn bè của mình và luôn theo dõi, ủng hộ chúng tôi để cập nhật những thông tin mới nhất. Chúc bạn một ngày tốt lành!

  • Web hay
  • Links hay
  • Push
  • Chủ đề top 10
  • Chủ đề top 20
  • Chủ đề top 30
  • Chủ đề top 40
  • Chủ đề top 50
  • Chủ đề top 60
  • Chủ đề top 70
  • Chủ đề top 80
  • Chủ đề top 90
  • Chủ đề top 100
  • Bài viết top 10
  • Bài viết top 20
  • Bài viết top 30
  • Bài viết top 40
  • Bài viết top 50
  • Bài viết top 60
  • Bài viết top 70
  • Bài viết top 80
  • Bài viết top 90
  • Bài viết top 100