Thực hành các bài tập Javascript cơ bản thường xuyên không chỉ giúp bạn nắm vững kiến thức mà còn có thể vận dụng vào thực tế một cách hiệu quả. Tuy nhiên, nhiều bạn mới bắt đầu học lập trình lại băn khoăn nên học và thực hành Javascript như thế nào, cùng tìm hiểu các dạng bài tập Javascript cơ bản ngay sau đây nhé!

Đọc bài viết sau đây để được tìm hiểu chi tiết về:

  • Tổng hợp các bài tập về Javascript cơ bản dành cho người mới bắt đầu
  • 5+ website giúp các lập trình viên thực hành viết mã Javascript cơ bản

Tại sao nên học Javascript?

Javascript là một trong những ngôn ngữ lập trình phổ biến hiện nay, được sử dụng để tạo ra sự tương tác mượt mà và đầy đủ các chức năng cho trang web. Nắm vững về Javascript cơ bản sẽ giúp bạn phát triển kỹ năng chuyên sâu trong lĩnh vực lập trình web, từ đó có thể lập trình các trang web từ đơn giản đến phức tạp.

Bên cạnh đó, học Javascript còn đem đến cho bạn những lợi ích như: 

  • Hoạt động tốt trong trình duyệt: Javascript là ngôn ngữ mặc định của Internet giúp bạn dễ dàng chạy và kiểm tra đoạn mã. Bạn chỉ cần mở trình duyệt và trình soạn thảo mã nguồn mở (VSCode, Sublime Text,..) phù hợp là có thể viết mã, phân tích cũng như thực thi chương trình. 
  • Ngôn ngữ lập trình đa năng: Bên cạnh sử dụng cho lập trình web trên máy tính thì Javascript còn được ứng dụng linh hoạt cho nhiều mục đích như lập trình Front End, Back End, ứng dụng di động, lưu trữ dữ liệu đám mây, phát triển trò chơi,… 
  • Tài nguyên lớn: Javascript là ngôn ngữ lập trình có nguồn tài nguyên rộng lớn và phổ biến trên các nền tảng như GeeksforGeeks, GitHub, Hashnode, StackOverFlow,… Các trang web này cung cấp các giải pháp hay cập nhật những công cụ mới giúp bạn luôn nắm vững kiến thức cũng như nắm bắt những xu hướng IT mới nhất. 
  • Dễ học: Nhìn chung, dưới góc nhìn của đa số lập trình viên Javascript khá đơn giản và dễ sử dụng đối với người mới bắt đầu, không cần sử dụng đến các công cụ phức tạp, Javascript hoạt động dễ dàng trong trình duyệt.
  • Cơ hội nghề nghiệp phát triển: Nắm vững về Javascript giúp bạn đạt được những thành công nhất định trong sự nghiệp (thăng tiến, cơ hội việc làm rộng mở). Ngoài ra, hiểu biết thêm về các framework như React.js hay Node.js cũng sẽ giúp bạn nâng cao con đường sự nghiệp của bản thân.

Xem thêm: Javascript là gì? Học Javascript cơ bản với lộ trình dễ hiểu nhất

Bài tập JavaScript cơ bản: Thay đổi màu nền

Với dạng bài tập này, bạn sẽ được làm quen với thuộc tính background Color để thay đổi linh hoạt màu nền của trang web. 

Bài tập 1: Tạo một trang web có nút thay đổi nền khi nhấn vào:

<!DOCTYPE html>
<html>
<head>
 <title>Change Background Color</title>
</head>
<body>
 <button id="changeColorBtn">Change Background Color</button>
 <script>
document.getElementById('changeColorBtn').addEventListener('click', function() {
 document.body.style.backgroundColor = 'lightblue';
 });
 </script>
</body>
</html>

Bài tập JavaScript cơ bản: Chuyển đổi hiển thị hình ảnh

Với mục tiêu triển khai tính năng chuyển đổi chế độ hiển thị hình ảnh trên trang web, bài tập này sẽ giúp bạn làm quen với việc sử dụng Javascript để thao tác với thuộc tính CSS của phần tử HTML.

Bài tập 2: Yêu cầu cài đặt nút có tính năng chuyển đổi chế độ hiển thị của hình ảnh khi nhấn vào.

<!DOCTYPE html>
<html>
<head>
<title>Toggle Image Display</title>
</head>
<body>
 <button id="toggleImageBtn">Toggle Image</button>
 <img id="toggleImage" src="chrome-extension://kbohbdnooimgjlohmicjmoagppjdcbam/img/download.svg" alt="Image" style="display:none;">
 <script>
 document.getElementById('toggleImageBtn').addEventListener('click', function() {
 const img = document.getElementById('toggleImage');
 img.style.display = img.style.display === 'none' ? 'block' : 'none';
 });

 </script>
</body>
</html>

Qua bài tập trên, bạn có thể thấy: 

  • Javascript sử dụng document.getElementById để lấy tham chiếu đến nút bấm và phần tử hình ảnh.
  • addEventListener: Được sử dụng để gắn trình sự kiện nhấp chuột vào nút bấm, khi nút bấm được nhấn, hàm bên trong trình nghe sẽ được thực thi.
  • Img.style.display: Kiểm tra lại kiểu hiển thị của hình ảnh, nếu kiểu hiển thị hiện tại là “none” (nghĩa là hình ảnh bị ẩn), hàm sẽ thay đổi nó thành “block” (hình ảnh hiển thị) và ngược lại. 

Bài tập JavaScript cơ bản: Xác thực biểu mẫu

Bài tập này chỉ đơn giản là kiểm tra xem email có chứa ký tự “@” hay không. Với các dạng bài tập nâng cao hơn sẽ yêu cầu kiểm tra email hợp lệ bằng nhiều yếu tố như định dạng tên miền, tên người dùng,… 

Bài tập 3: Tạo một form yêu cầu nhập email và kiểm tra tính hợp lệ của địa chỉ email được nhập. Hiển thị thông báo nếu email không hợp lệ. 

<!DOCTYPE html>
<html>
 <body>
   <form id="emailForm">
     Email: <input type="email" id="emailInput">
     <button type="submit">Submit</button>
     <p id="message"></p>
   </form>

   <script>
     document.getElementById('emailForm').addEventListener('submit', function(event) {
       event.preventDefault();
       const email = document.getElementById('emailInput').value;
       let message = "";
       const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
       if (emailRegex.test(email)) {
         message = 'Email is valid!';
       } else {
         message = 'Please enter a valid email address.';
       }

       document.getElementById('message').innerText = message;
     });
   </script>
 </body>
</html>

Ở bài tập trên, bạn có thể thấy:

  • Lấy giá trị của email đã nhập từ ô input bằng document.getElementById(’emailInput’).value
  • Khởi tạo biến message để lưu trữ thông báo.
  • Biểu thức emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ được sử dụng để xác thực địa chỉ email. Biểu thức này đảm bảo rằng địa chỉ email bắt đầu bằng một hoặc nhiều ký tự không phải ký tự “@” và chuỗi kết thúc là tên miền cấp cao (Top-Level Domain – TLD).
  • Kiểm tra xem email có chứa ký tự “@” hay không. Ký tự “@” là dấu hiệu bắt buộc của một địa chỉ email hợp lệ.
    • Nếu chứa “@” thì message sẽ được gán nội dung thông báo email hợp lệ.
    • Nếu không chứa “@” thì message sẽ được gán nội dung thông báo yêu cầu nhập email hợp lệ.
  • Cuối cùng, cập nhật nội dung của đoạn văn với ID “message” bằng nội dung của biến message sử dụng document.getElementById(‘message’).innerText.

Bài tập JavaScript cơ bản: Tạo to-do list

Với dạng bài tập này, bạn sẽ được làm quen với cách tạo to-do list đơn giản, đồng thời học cách thêm các tính năng khác như lọc các mục đã hoàn thành hoặc sắp xếp thứ tự các mục,…

Bài tập 4: Tạo một to-do list đơn giản cho phép người dùng thêm các công việc vào danh sách và có thể xóa chúng khi hoàn thành.

<!DOCTYPE html>

<html>

<head>

 <title>To-Do List</title>

 <style>

 .todo-item { cursor: pointer; }

 </style>

</head>

<body>

 <input type="text" id="todoInput">

 <button id="addTodoBtn">Add To-Do</button>

 <ul id="todoList"></ul>

 <script>

 document.getElementById('addTodoBtn').addEventListener('click', function() {

 const input = document.getElementById('todoInput');

 const itemText = input.value;

 input.value = “”; // Clear input field

 const li = document.createElement('li');

 li.textContent = itemText;

 li.classList.add('todo-item');

 li.addEventListener('click', function() {

 this.parentNode.removeChild(this);

 });

 document.getElementById('todoList').appendChild(li);

 });

 </script>

</body>

</html>

Qua bài tập trên, có thể thấy: 

  • Tạo một thẻ <li> mới và gán nội dung văn bản là itemText.
  • Thêm class todo-item cho thẻ <li> để định dạng.
  • Nếu bạn cần tạo thêm mục danh sách mới (li) trong danh sách việc cần làm (todoList) thì hãy sử dụng document.getElementById(‘todoList’).appendChild(li)
  • This được dùng để tham chiếu đến các đối tượng khác nhau tùy thuộc vào ngữ cảnh. Trong ví dụ trên, this được sử dụng để truy cập giá trị hiện tại của đầu vào. 

Bài tập JavaScript đơn giản: Máy tính đơn giản

Ở dạng bài tập này, bạn sẽ làm quen với cách tạo một máy tính bao gồm các phép tính cộng, trừ, nhân, chia đơn giản. 

<!DOCTYPE html>

<html>

<head>

 <title>Máy tính đơn giản</title>

</head>

<body>

 <input type="text" id="number1″>

 <select id="operation">

   <option value="add">+</option>

   <option value="subtract">-</option>

   <option value="multiply">*</option>

   <option value="divide">/</option>

 </select>

 <input type="text" id="number2″>

 <button id="calculateBtn">Calculate</button>

 <p id="result"></p>

 <script>

 document.getElementById('calculateBtn').addEventListener('click', function() {

 const num1 = parseFloat(document.getElementById('number1').value);


 const num2 = parseFloat(document.getElementById('number2').value);


 const operation = document.getElementById('operation').value;

 let result;

 switch(operation) {

 case 'add':

 result = num1 + num2;

 break;

 case 'subtract':

 result = num1 - num2;

 break;

 case 'multiply':

 result = num1 * num2;

 break;

 case 'divide':

 result = num1 / num2;

 break;

 }

 document.getElementById('result').innerText = 'Result: ' + result;

 });

 </script>
</body>
</html>

Ở bài tập trên, đoạn mã Javascript được sử dụng như sau:

  • Sử dụng document.getElementById để lấy tham chiếu đến các ô input và thẻ select.
  • Chuyển đổi giá trị của các ô input sang dạng số bằng parseFloat.
  • Lưu trữ giá trị các số và phép toán vào các biến num1, num2 và operation.
  • Sử dụng câu lệnh switch để thực hiện phép toán dựa trên giá trị của biến operation: case ‘add’: Cộng num1 và num2, lưu kết quả vào result. Thực hiện tương tự với các phép tính còn lại. 

Bài tập JavaScript cơ bản: Danh sách lọc

Bài tập này sẽ giúp bạn làm quen với cách triển khai tính năng tìm kiếm, cho phép lọc danh sách theo các mục hiển thị phù hợp với nhu cầu tìm kiếm. Chẳng hạn như: 

Bài tập 6: Tạo một danh sách lọc tìm kiếm với các đầu mục như sau: học Javascript, Javascript cơ bản, bài tập Javascript, các lệnh trong Javascript.

<!DOCTYPE html>

<html>

<head>

 <title>Filter List</title>

</head>

<body>

 <input type="text" id="filterInput" placeholder="Search for names..">

 <ul id="namesList">

   <li>Học Javascript</li>

   <li>Javascript cơ bản</li>

   <li>Bài tập Javascript</li>

   <li>Các lệnh trong Javascript</li>

 </ul>

 <script>

 document.getElementById('filterInput').addEventListener('keyup', function() {

 const input = document.getElementById('filterInput').value.toUpperCase();

 const ul = document.getElementById("namesList");

 const li = ul.getElementsByTagName('li');

 for (let i = 0; i < li.length; i++) {

 let txtValue = li[i].textContent || li[i].innerText;

 if (txtValue.toUpperCase().indexOf(input) > -1) {

 li[i].style.display = "";

 } else {

 li[i].style.display = "none";

 }

 }

 });

 </script>

</body>

</html>

Qua bài tập trên, có thể nhận xét như sau:

  • toUpperCase: Được sử dụng để lấy giá trị văn bản đã nhập trong ô tìm kiếm, chuyển thành chữ hoa để so sánh.
  • Lọc danh sách với mục <li>, trong đó li[i].textContent, li[i].innerText lấy nội dung văn bản của mục hiện tại.
  • indexOf(input) > -1): Kiểm tra nội dung văn bản có chứa chuỗi tìm kiếm hay không.
  • Nếu có, hiển thị mục đó với li[i].style.display = “” và ngược lại với giá trị là “none”. 

5+ website thực hành viết mã Javascript cơ bản 

Để trở thành một Javascript Developer chuyên nghiệp thì bạn nên sử dụng ngôn ngữ này trong nhiều dự án thực tế nhất có thể. Bắt đầu từ những kiến thức cơ bản và dần làm quen với cấu trúc mã nâng cao, kỹ năng của bạn sẽ tiến bộ đáng kể cũng như xây dựng được các dự án phức tạp. Sau đây là 5+ web giúp bạn thực hành viết mã Javascript đơn giản: 

W3Schools

W3Schools là nền tảng thực hành viết mã, lập trình web phổ biến hiện nay và hoàn toàn miễn phí. Nếu bạn mới học làm quen với các dạng bài tập Javascript cơ bản, bạn sẽ được làm quen với bài học nhanh về cú pháp và áp dụng những gì đã học vào bài tập thực hành ngay sau đó.

Một tính năng thú vị nữa của Javascript chính là cho phép bạn chạy thử đoạn mã trước khi hiển thị trên trình duyệt. Tính năng này sẽ chạy mô phỏng đoạn mã của bạn, từ đó bạn có thể dễ dàng chỉnh sửa mã để phù hợp với mong muốn của bản thân. Bên cạnh đó, W3Schools còn cung cấp các bài học miễn phí về các ngôn ngữ lập trình khác như HTML, CSS, SQL, Python, PHP, Java,…

Freecodecamp.org

Freecodecamp.org là một trong những trang web thích hợp để học viết mã và cung cấp nhiều tài nguyên Javascript miễn phí, từ những kỹ năng cơ bản đến trình độ trung cấp. Chương trình học của Freecodecamp sẽ bắt đầu từ HTML và CSS, sau đó bạn sẽ được học cũng như thực hành các bài tập Javascript cơ bản đến nâng cao.

Chính vì vậy, nếu bạn mới học lập trình thì sẽ cần học thêm về HTML và CSS trước khi tìm hiểu về Javascript. Đây cũng là lý do khiến Freecodecamp là một trang web hữu ích để bạn bắt đầu học lập trình. 

Learn Javascript

Learn Javascript là nền tảng trực tuyến cung cấp các khóa học về bài tập Javascript cơ bản, bao gồm các nguyên tắc về cú pháp, đem đến nền tảng vững chắc cho bạn khi thực hành. Các khóa học đều được biên soạn chỉn chu, đi thẳng vào vấn đề và luôn có bản tóm tắt sau cuối buổi học để bạn có thể đọc thêm. 

Khi thực hành, bạn có thể trực tiếp viết mã trên trình duyệt web, giải quyết các vấn đề về câu hỏi Javascript cũng như xây dựng dự án phù hợp. Các khóa học trên Learn Javascript đều được thiết kế miễn phí, tuy nhiên bạn có thể đăng ký gói Pro để có thể tiếp cận với các bài học chuyên sâu hơn nhé! 

Edabit

Edabit cung cấp hơn 2500+ bài tập Javascript cơ bản, từ cấp độ sơ cấp đến trình độ chuyên gia. Bạn có thể thực hành trực tiếp trên trình duyệt web của mình và các bài tập đều miễn phí. Ngoài Javascript, trang web còn cung cấp các bài tập thực hành về C#, C++, Java, PHP, Python, Ruby hay Swift,… giúp bạn trang bị nền tảng kiến thức vững chắc về lập trình web. 

Javascript Hero

Javascript Hero là nền tảng thực hành Javascript đơn giản nhưng cực kỳ hữu ích dành cho những người mới bắt đầu. Bạn sẽ được bắt đầu với những bài tập Javascript cơ bản như cách hoạt động của biến, hàm, tham số và các cú pháp khác,…

Mỗi bài học sẽ bao gồm bài tập nhanh dựa trên những gì bạn vừa học, nếu gặp khó khăn, sẽ có những gợi ý hữu ích dành cho bạn. Ngoài ra, Javascript Hero còn cung cấp giải pháp cho các bài học cũng như khóa học trên nền tảng. 

Codewars

Codewars là một nền tảng học thực hành lập trình với những bài tập được thiết kế và biên soạn chỉn chu từ cấp độ cơ bản đến nâng cao. Bạn sẽ được làm quen với nền tảng bài tập Javascript cơ bản như cách sử dụng hàm, biến, dữ liệu,…

Bên cạnh Javascript, Codewar cũng có hỗ trợ thêm một số ngôn ngữ lập trình khác như HTML, CSS, Spring, Ruby,… Đồng thời, bạn cũng có thể tham khảo thêm các tài nguyên trực tuyến từ trang web để nâng cao thêm nền tảng kiến thức của bản thân.

Một số câu hỏi thường gặp

Học Javascript có khó không?

Để có thể học và nắm vững những kiến thức cơ bản về Javascript, bạn nên bắt đầu học theo từng chủ đề hoặc concept của ngôn ngữ lập trình này, đừng cố gắng học mọi framework cùng một lúc. Javascript không chỉ là một ngôn ngữ mà là bộ công cụ bạn có thể sử dụng theo nhiều cách khác nhau. 

Bạn nên tập trung vào những kiến thức cơ bản, cách sử dụng cũng như hoạt động của các chức năng trong Javascript. Sau đó, vận dụng kiến thức đã học qua nhiều dự án thực tế, bài tập thực hành để phát triển kỹ năng của bản thân. 

Nên chuẩn bị gì trước khi học Javascript?

Trước khi đến với ngôn ngữ lập trình Javascript, bạn nên có kiến thức cơ bản về lập trình cũng như HTML và CSS, bởi vì đây là hai ngôn ngữ tạo ra cấu trúc cùng giao diện của trang web, “phần khung” để Javascript hoạt động. Bên cạnh đó là tham khảo thêm những bài tập hoặc trau dồi nền tảng kiến thức về lập trình qua những khóa học online, tài liệu trực tuyến,… 

Cần nắm những khái niệm cơ bản nào khi học Javascript?

Để sử dụng thành thạo Javascript, bạn cần nắm vững những khái niệm cơ bản về ngôn ngữ lập trình này như sau:

  • Kiểu dữ liệu: Những kiểu dữ liệu cơ bản như số (number), chuỗi (string), null, symbol,…
  • Biến (Variables): Dùng để lưu trữ dữ liệu trong Javascript. Bạn sẽ cần nắm rõ về cách khai báo, gán giá trị và sử dụng biến.
  • Toán tử (Operators): Nắm rõ các loại toán tử để thực hiện các phép toán số học, so sánh logic hoặc thao tác với chuỗi.
  • Cấu trúc (Structure): Hiểu rõ về cách sử dụng các cấu trúc như if-else, while, for,…
  • Hàm (Functions): Hiểu rõ về cách khai báo, truyền tham số, trả về giá trị và cách sử dụng hàm.
  • Mảng (Arrays): Nắm rõ về cách khai báo cũng như phương thức phổ biến của mảng.
  • Đối tượng (Objects): Nắm rõ về cách khai báo các thuộc tính được sử dụng để mô tả dữ liệu phức tạp.
  • DOM: Hiểu rõ về cách thao tác phần tử HTML với DOM.

Ngoài ra, bạn cũng nên tìm hiểu về các Javascript Framework (React, Angular, Node.js) hay thư viện Javascript (AJAX) để gặt hái được những thành công trên con đường sự nghiệp nhé!

Nên học gì sau khi học Javascript?

Nếu bạn đang tìm kiếm bước tiếp theo trong hành trình lập trình web của bản thân sau khi thành thạo về Javascript, thì có thể tìm hiểu theo về những kỹ năng liên quan như Typescript, React, Node.js, MongoDB hay Python,… để mở ra cơ hội nghề nghiệp đa dạng hơn. Cụ thể như: 

  • Typescript: Ngôn ngữ lập trình mã nguồn mở miễn phí được Microsoft phát hành, được thiết kế để phát triển các ứng dụng lớn và chuyển thành mã Javascript. Học thêm về Typescript sẽ giúp bạn dễ dàng thao tác với những dự án Javascript lớn và phức tạp hơn.
  • React.js: Thư viện mã nguồn mở mà các lập trình viên có thể sử dụng để xây dựng giao diện người dùng. React.js được tạo thành từ các khối mã gọi là thành phần (components) và có thể sử dụng nhiều lần trong các dự án khác nhau, giúp cho quá trình phát triển web suôn sẻ hơn. 
  • Node.js: Ngôn ngữ backend Node.js cho phép làm việc với máy chủ (server-side) với Javascript. Node.js sẽ cho phép các lập trình viên viết mã trên phần phụ trợ bằng Javascript.
  • Python: Lựa chọn lý tưởng dành cho những bạn muốn tìm hiểu về cách xây dựng ứng dụng web phía máy chủ (server-side). Với cú pháp đơn giản cùng dữ liệu mã nguồn mở nên học Python sẽ dễ dàng hơn, đặc biệt là với những bạn đã có kinh nghiệm viết mã. 

Tổng kết về bài tập Javascript cơ bản 

Để nắm vững kiến thức về ngôn ngữ lập trình, bên cạnh nền tảng lý thuyết, bạn cũng nên thực hành với các dạng bài tập Javascript cơ bản để có góc nhìn tổng quan hơn về lập trình. Với thời đại công nghệ hiện đại, kiến thức sẽ không ngừng cập nhật những xu hướng mới nhất, do đó hãy học tập và thực hành các dự án thường xuyên để nâng cao kỹ năng cũng như mở rộng cơ hội thăng tiến cho bản thân bạn nhé!

Xem thêm: Javascript Developer là gì? Các hướng phát triển của Javascript Developer