JS in Web

Duy Văn | 05/02/2025

  1. JS trong lập trình Web
  2. Chức năng của JS trong Web
    1. Thay đổi nội dung HTML
    2. Điều chỉnh giao diện
  3. JS nằm ở đâu?
    1. Đặt ở đầu
    2. Đặt ở thân
    3. Gọi từ file ngoài

JS trong lập trình Web

  • JS có thể được sử dụng để thay đổi cả HTML và CSS của một trang web.
  • JS có khả năng tính toán, xử lý và xác thực dữ liệu.

HTML dùng để định hình nội dung của trang web, CSS dùng để chỉ định bố cục và style, còn JS dùng để lập trình hành vi của trang web.

Chức năng của HTML, CSS và JS

Chức năng của JS trong Web

Từ góc độ lập trình/phát triển web, JS có thể thao tác với nội dung của trang bằng cách thay đổi nội dung HTML cũng như điều chỉnh giao diện của nội dung thông qua việc thay đổi các thuộc tính CSS.

Thay đổi nội dung HTML

Hình thức đơn giản nhất của việc thay đổi HTML là cập nhật innerHTML của một phần tử. innerHTML đại diện cho nội dung bên trong của một phần tử HTML, chẳng hạn như một phần tử div.

<div id="test">Hello World!</div>

Nội dung bên trong là Hello World!. Thay đổi innerHTML của div bằng JS liên quan đến việc thực thi JS này khi có event hoặc trigger:

document.getElementById("test").innerHTML = "Hello Mortals!";

Cả dấu ngoặc kép và dấu ngoặc đơn đều được chấp nhận trong JS, nếu bên trong chuỗi có dấu ngoặc thì có thể sử dụng dấu ngoặc khác để bao bọc chuỗi. Quy tắc thông thường - dấu ngoặc đơn bao bọc dấu ngoặc kép.

document.getElementById("test").innerHTML = 'Hello "Mortals"!';

Ngoài ra, HTML của một trang web bao gồm các element cùng các thuộc tính khác đều có thể được thay đổi bằng JS. Ví dụ thẻ img có thể thay đổi src:

<img id="image" src="img.jpg">

document.getElementById("image").src = "newimg.jpg";

Điều chỉnh giao diện

JS cũng có thể thay đổi các thuộc tính CSS của một phần tử HTML. Ví dụ, thay đổi màu chữ của một phần tử div:

<div id="test">Hello World!</div>

document.getElementById("test").style.color = "red";

Thuộc tính color chỉ màu chữ của phần tử div, JS trên biến chữ thành màu đỏ

JS nằm ở đâu?

JS có thể được đặt ở nhiều vị trí khác nhau trong một trang web, nhưng nói chung có 3 cách phổ biến : để ở đầu, ở thân và gọi từ file ngoài, tất cả đều sẽ được gói trong thẻ <script>...</script>.

Để một dòng code JS có thể được hiểu và chạy thì nó cần nằm trong thẻ <script>

<script>
  document.getElementById("test").innerHTML = "Hello Mortals!";
</script>

Đặt ở đầu

Trong ví dụ dưới, mình sẽ để một function JS ở đầu trang web, chức năng là thay đổi innerHTML của một element

<!DOCTYPE html>
<html>
<head>
  <title>JS in Web</title>
  <script>
        function myFunction() {
        document.getElementById("test").innerHTML = "Hello Mortals";
        }
    </script>
</head>
<body>
  <div id="test">Hello World!</div>
  <button onclick="myFunction()">Click</button>

</body>
</html>

Có một thẻ button khi click vào sẽ gọi function myFunction để thay đổi nội dung của divtừ Hello World! thành Hello Mortals!. Dưới là iframe mình đã nạp code để ví dụ

Đặt ở thân

Chức năng của JS khi đặt ở thân cũng thế, không có gì khác biệt

<!DOCTYPE html>
<html>
<head>
  <title>JS in Web</title>
  
</head>
<body>
  <div id="test">Hello World!</div>
  <button onclick="myFunction()">Click</button>
    <script>
        function myFunction() {
        document.getElementById("test").innerHTML = "Hello Mortals";
        }
    </script>
</body>
</html>

iFrame dưới đây về cơ bản là y hệt bên trên mặc dù JS thay đổi vị trí

Gọi từ file ngoài

Một trong những cái quan trọng cần nắm là gọi tài nguyên JS từ bên ngoài, một ví dụ điển hình là khi chúng ta không tự code các chức năng cho trang web mà bếch từ ngoài vào, ví dụ như thư viện jQuery

<!DOCTYPE html>
<html>
<head>
  <title>JS in Web</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="test">Hello World!</div>
  <button id="changeTextBtn">Click Me!</button>

  <script>
    $(document).ready(function() {
      $("#changeTextBtn").click(function() {
        $("#test").text("Hello, jQuery World!");
      });
    });
  </script>
</body>
</html>

iFrame ở dưới

Tóm lại, trên đây là các chức năng của JS đối với lập trình web, từ sau mình sẽ chỉ đi vào lập trình với JS, không cần quan tâm đến HTML và CSS nữa.