Top 4 bài tập JavaScript có lời giải cơ bản nhất cho người mới bắt đầu

Bài tập JavaScript có lời giải là một trong những tài liệu tham khảo cơ bản và quan trọng cho những người học lập trình, đặc biệt là những người mới bắt đầu. Trong phạm vi bài viết này, chúng mình muốn chia sẻ top 4 bài tập có lời giải cơ bản nhất cho các bạn. Cùng tham khảo để học từ những bài cơ bản nhất nhé.

Làm bài tập Javascript từ đơn giản tới nâng cao
Làm bài tập Javascript từ đơn giản tới nâng cao

Bài tập JavaScript số 1

Đề bài: Người dùng nhập và tên và tuổi, bạn 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 và hiển thị tên có màu đậm, tuổi được gạch chân.

Lời giải mẫu:

<HTML>
 <HEAD> </HEAD>
 <BODY>
 <script language = "JavaScript">
 var Ten, Tuoi; // Khai báo 2 biến để lưu tên và tuổi
 Ten = 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 : <B> " + Ten + "</B>");
 document.write("<BR>"); // Xuống dòng
 document.write("Tuổi của bạn là : <U> " + Tuoi + "</U>");
 </script>
 </BODY>
 </HTML> 

Bài tập JavaScript số 2

Đề bài: Bạn hãy tạo một nút có name là Welcome, giá trị value là “Welcome” và một textbox có tên là msg, value = “Welcome to”.

Lời giải mẫu:

<HTML>
 <HEAD> </HEAD>
 <BODY>
 <script language = "JavaScript">
 
 document.write("Tao Button va Text bang Script<BR>");
 document.write("<BR>");
 document.write("<input type=button name=welcome value = 'Welcome' ");
 document.write("onclick = 'alert ('Welcome to JavaScript');' > ");
 document.write("<input type = text name = msg value = 'Welcome to'>");
 
 </script>
 </BODY>
 </HTML> 
Cách làm bài tập javascript hiệu quả nhất
Cách làm bài tập javascript hiệu quả nhất

Bài tập JavaScript số 3

Đề bài: Minh họa tính năng đọc giá trị trong phần tử text, sau đó hiển thị ra màn hình.

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 chuột vào nút HienThi thì nội dung trong hộp text sẽ được hiển thị bằng hàm alert.

Lời giải mẫu:

Bạn lấy giá trị của một phần tử HTML nào đó, viết <Tên phần tử>.value.

Minh hoạ :

<HTML>
<HEAD>
<TITLE>Đọc giá trị trong hộp text</TITLE>
</HEAD>
<BODY>
<h2>Hãy gõ văn bản vào trong hộp text và click 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>

Bài tập JavaScript số 4

Đề bài: Ẩn và hiển thẻ div bằng JavaScript

Lời giải mẫu:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Javascript Example</title>
    </head>
    <body>
        <h2>Ẩn và hiện thẻ div bằng Javascript</h2>
        <p>Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div</p>
 
        <div id="content" style="border: solid 1px; padding: 20px; background: #ddd;">
            Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình <a href="https://freetuts.net" title="học lập trình">freetuts.net</a>
        </div>
        <br/>
        <input type="button" id="btn1" value="Ẩn"/>
        <input type="button" id="btn2" value="Hiển Thị"/>
 
        <script language="javascript">
 
            document.getElementById("btn1").onclick = function () {
                document.getElementById("content").style.display = 'none';
            };
 
            document.getElementById("btn2").onclick = function () {

Trên đây là 4 bài tập JavaScript cơ bản nhất mà một người bắt đầu làm quen với lập trình JavaScript có thể tham khảo và thực hành. Sau khi tự thực hành được các bài cơ bản như trên, bạn mới có thể tiếp tục làm các bài tập nâng cao dần. Điều quan trọng là phải thực hành thật nhiều để tự viết từng đoạn code ngắn nhất đến dài hơn trong suốt quá trình học, đồng thời lĩnh hội được những kinh nghiệm hữu ích, tránh các lỗi sai dù là nhỏ nhất khi coding. 
Học lập trình bất cứ một ngôn ngữ nào, kể cả JavaScript thì người học cũng cần phải kiên trì đi từ những điều nhỏ nhất nhưng cơ bản nhất. Với 4 bài tập JavaScript cơ bản nhất kể trên, hi vọng bạn sẽ có một khởi đầu học lập trình Javascript thật thuận lợi, càng ngày càng có thêm đam mê với lĩnh vực này .

Nếu bạn quan tâm, hãy xem các vị trí đang tuyển dụng của Got It tại: bit.ly/gotit-hanoi và đọc thêm về quy trình tuyển dụng tại đây.

branding
branding
February 02, 2021
0
Share this post to:
Tags:
0 Comments
Inline Feedbacks
View all comments
Các bài viết liên quan
4 quyển sách Python tiếng Việt cho người mới bắt đầu

4 quyển sách Python tiếng Việt cho người mới bắt đầu

Bạn muốn tìm hiểu về Python nhưng tìm đâu cũng chỉ thấy sách tiếng Anh? Đừng lo, Got It sẽ dành tặng bạn 4 quyển sách Python tiếng Việt cực kỳ hữu ích ngay trong bài viết này! Cùng khám phá nhé! Mục lụcPython cơ bản… Rất là cơ bản – Võ Tuấn DuyTớ Học […]
“Mua sách lập trình ở đâu?” – Trả lời câu hỏi khó.

“Mua sách lập trình ở đâu?” – Trả lời câu hỏi khó.

“Mua sách lập trình ở đâu?” là câu hỏi mà nhiều bạn thắc mắc khi bắt đầu làm quen với lĩnh vực lập trình. Hôm nay hãy cùng Got It tìm kiếm câu trả lời cho câu hỏi hóc búa này nhé! Mục lục1. Địa điểm mua sách lập trình tại Việt Nama. Mua sách […]
4 khóa học lập trình hướng đối tượng miễn phí cho người mới

4 khóa học lập trình hướng đối tượng miễn phí cho người mới

Nếu bạn muốn theo nghề IT thì sớm muộn cũng phải học lập trình hướng đối tượng. Đây là một kiến thức cơ bản, bắt buộc phải biết. Bài viết sẽ chia sẻ với bạn 4 khóa học miễn phí, phù hợp với người mới bắt đầu. Mục lục1. Học lập trình hướng đối tượng […]
Tài liệu lập trình Python tiếng Việt tốt nhất hiện nay

Tài liệu lập trình Python tiếng Việt tốt nhất hiện nay

Nếu bạn đang tìm tài liệu lập trình Python tiếng Việt thì hãy tham khảo ngay ebook “Python cơ bản… Rất là cơ bản” của tác giả Võ Duy Tuấn. Đây là tài liệu cung cấp đầy đủ kiến thức Python cơ bản dành cho người Việt. Hãy cùng Got It khám phá tài liệu […]
Những cách lấy giá trị checkbox bằng JavaScript đơn giản nhất

Những cách lấy giá trị checkbox bằng JavaScript đơn giản nhất

Làm sao để lấy giá trị checkbox bằng JavaScript? Nhiều bạn khi bắt đầu học lập trình web rất hay phân vân câu hỏi này. Checkbox là một trong những thành phần quan trọng giúp người dùng tương tác với website. Hãy cùng tìm hiểu cách lấy giá trị checkbox khi sử dụng JavaScript qua […]
6 tip tự học ngôn ngữ lập trình Python hiệu quả

6 tip tự học ngôn ngữ lập trình Python hiệu quả

Tự học ngôn ngữ lập trình Python không phải quá khó, nhưng cũng không hề dễ dàng. Đôi khi, bạn rất dễ nản, chểnh mảng học tập do không có người đốc thúc. Vậy thế nào để học ngôn ngữ này thật hiệu quả? Hãy cùng Got It tìm hiểu 6 tip tự học Python […]