Video hướng dẫn

Các cách sử dụng Javascript trong HTML

Cách 1: sử dụng file JavaScript rời (External File)

  • Đây là cách được sử dụng nhiều trong dự án thực tế.
  • Rất thuận tiện trong việc chia sẻ code Javascript giữa các dự án với nhau.
  • Thường sử dụng để lập trình các thư viện tiện ích (Javascript Library)

Cách 2: sử dụng code JavaScript bên trong file HTML (Internal File)

  • Thường được sử dụng để viết những đoạn code Javascript nhỏ gọn hoặc gọi hàm cần xử lý từ thư viện đã được liên kết

Cách 1: sử dụng file JavaScript rời (External File)

Ưu điểm và Nhược điểm

Ưu điểm Nhược điểm
Tách rời code xử lý JavaScript khỏi file giao diện HTML Cần phải Tổ chức thư mục và đặt tên file tốt để tránh gây rối dự án
Dễ dàng quản lý / tổ chức source code Cần phải liên kết chính xác đường dẫn đến file Javascript để sử dụng
Thường sử dụng trong các dự án thực tế
Thường được sử dụng để phát triển các thư viện tiện ích (Javascript library)

Step 1: tạo cấu trúc thư mục như sau

  • Cấu trúc Thư mục Dự án có sử dụng Javascript
\---ex1 <- thư mục gốc dự án
| index.html <- trang chủ
|
\---js <- thư mục chứa các file JavaScript của dự án
app.js <- file javascript dự án
\---ex1 <- thư mục gốc dự án | index.html <- trang chủ | \---js <- thư mục chứa các file JavaScript của dự án app.js <- file javascript dự án
\---ex1             <- thư mục gốc dự án
    |   index.html  <- trang chủ
    |
    \---js          <- thư mục chứa các file JavaScript của dự án
            app.js  <- file javascript dự án
  • Cấu trúc Thư mục dự án tạo trong Visual Studio Code

Step 2: viết code xử lý cho index.html và app.js

  • Nội dung file index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nền tảng | JavaScript căn bản</title>
</head>
<body>
<h1>Học JavaScript căn bản</h1>
</body>
</html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Nền tảng | JavaScript căn bản</title> </head> <body> <h1>Học JavaScript căn bản</h1> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nền tảng | JavaScript căn bản</title>
</head>
<body>
  <h1>Học JavaScript căn bản</h1>
</body>
</html>
  • Nội dung file app.js
// Gọi hàm alert('') để hiển thị thông báo
alert('Chào mừng đến với JavaScript. Tôi là code JS trong file rời...');
// Gọi hàm alert('') để hiển thị thông báo alert('Chào mừng đến với JavaScript. Tôi là code JS trong file rời...');
// Gọi hàm alert('') để hiển thị thông báo
alert('Chào mừng đến với JavaScript. Tôi là code JS trong file rời...');

Step 3: Nhúng/Liên kết code JavaScript vào trong file HTML

  • Hiệu chỉnh file index.html
  • Bổ sung đoạn code liên kết file app.js vào file index.html
  • Lưu ý: nên sử dụng đường dẫn liên kết tương đối (relative path) để liên kết file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nền tảng | JavaScript căn bản</title>
<!-- Nhúng/Liên kết code JavaScript vào trong file HTML -->
<script src="js/app.js"></script>
</head>
<body>
<h1>Học JavaScript căn bản</h1>
</body>
</html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Nền tảng | JavaScript căn bản</title> <!-- Nhúng/Liên kết code JavaScript vào trong file HTML --> <script src="js/app.js"></script> </head> <body> <h1>Học JavaScript căn bản</h1> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nền tảng | JavaScript căn bản</title>

  <!-- Nhúng/Liên kết code JavaScript vào trong file HTML -->
  <script src="js/app.js"></script>
</head>
<body>
  <h1>Học JavaScript căn bản</h1>
</body>
</html>

Step 4: mở trang index.html bằng trình duyệt để xem kết quả

  • Mở bằng trình duyệt (Chrome, Firefox, Safari, ...) để xem kết quả
  • Chuột phải file index.html -> Open With -> Google Chrome
  • Màn hình hiển thị thông báo chào mừng

Cách 2: sử dụng code JavaScript bên trong file HTML (Internal File)

Ưu điểm và Nhược điểm

Ưu điểm Nhược điểm
Code trong cùng 1 file HTML nên thuận tiện việc lưu trữ Khó khăn trong việc chia sẻ code cho các dự án khác
Viết các đoạn code JavaScript một cách nhanh chóng Không tách biệt HTML và JavaScript dẫn đến file code HTML nặng nề và dài dòng
Thuận tiện khi viết các đoạn demo ngắn gọn Khó khăn trong việc bảo trì code

Step 1: tạo cấu trúc thư mục như sau

  • Cấu trúc Thư mục Dự án có sử dụng Javascript
\---ex1 <- thư mục gốc dự án
| index.html <- trang chủ
|
\---js <- thư mục chứa các file JavaScript của dự án
app.js <- file javascript dự án
\---ex1 <- thư mục gốc dự án | index.html <- trang chủ | \---js <- thư mục chứa các file JavaScript của dự án app.js <- file javascript dự án
\---ex1             <- thư mục gốc dự án
    |   index.html  <- trang chủ
    |
    \---js          <- thư mục chứa các file JavaScript của dự án
            app.js  <- file javascript dự án
  • Cấu trúc Thư mục dự án tạo trong Visual Studio Code

Step 2: viết code xử lý cho index.html và app.js

  • Nội dung file index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nền tảng | JavaScript căn bản</title>
<!-- Nhúng/Liên kết code JavaScript vào trong file HTML -->
<script src="js/app.js"></script>
<!-- Đoạn code JavaScript bên trong file HTML -->
<script>
alert('Xin chào, tôi là đoạn code bên trong file HTML!');
</script>
</head>
<body>
<h1>Học JavaScript căn bản</h1>
</body>
</html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Nền tảng | JavaScript căn bản</title> <!-- Nhúng/Liên kết code JavaScript vào trong file HTML --> <script src="js/app.js"></script> <!-- Đoạn code JavaScript bên trong file HTML --> <script> alert('Xin chào, tôi là đoạn code bên trong file HTML!'); </script> </head> <body> <h1>Học JavaScript căn bản</h1> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nền tảng | JavaScript căn bản</title>

  <!-- Nhúng/Liên kết code JavaScript vào trong file HTML -->
  <script src="js/app.js"></script>

  <!-- Đoạn code JavaScript bên trong file HTML -->
  <script>
    alert('Xin chào, tôi là đoạn code bên trong file HTML!');
  </script>
</head>
<body>
  <h1>Học JavaScript căn bản</h1>
</body>
</html>

Step 3: mở trang index.html bằng trình duyệt để xem kết quả

  • Mở bằng trình duyệt (Chrome, Firefox, Safari, ...) để xem kết quả
  • Chuột phải file index.html -> Open With -> Google Chrome

Lưu ý: các trường hợp sai khi sử dụng JavaScript trong HTML

  • Thẻ <script></script> cùng 1 lúc chỉ được thực hiện 1 tác vụ, không thể vừa cùng lúc liên kết file, vừa chứa code bên trong
  • Ví dụ trường hợp sử dụng sai:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nền tảng | JavaScript căn bản</title>
<!-- Nhúng/Liên kết code JavaScript vào trong file HTML -->
<script src="js/app.js"></script>
<!-- Đoạn code JavaScript bên trong file HTML -->
<script>
alert('Xin chào, tôi là đoạn code bên trong file HTML!');
</script>
<!-- Đoạn code JavaScript sai, vì cùng lúc thực hiện nhiều tác vụ
- Vừa liên kết file app.js
- Vừa chạy đoạn script bên trong
=> Sai, một số trường hợp sẽ thực thi code không chính xác. Tốt nhất thực hiện chỉ 1 tác vụ cùng lúc.
-->
<script src="js/app.js">
alert('Xin chào, tôi là đoạn code thực hiện cùng lúc cả 2 tác vụ, tôi quá tải ?!');
</script>
</head>
<body>
<h1>Học JavaScript căn bản</h1>
</body>
</html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Nền tảng | JavaScript căn bản</title> <!-- Nhúng/Liên kết code JavaScript vào trong file HTML --> <script src="js/app.js"></script> <!-- Đoạn code JavaScript bên trong file HTML --> <script> alert('Xin chào, tôi là đoạn code bên trong file HTML!'); </script> <!-- Đoạn code JavaScript sai, vì cùng lúc thực hiện nhiều tác vụ - Vừa liên kết file app.js - Vừa chạy đoạn script bên trong => Sai, một số trường hợp sẽ thực thi code không chính xác. Tốt nhất thực hiện chỉ 1 tác vụ cùng lúc. --> <script src="js/app.js"> alert('Xin chào, tôi là đoạn code thực hiện cùng lúc cả 2 tác vụ, tôi quá tải ?!'); </script> </head> <body> <h1>Học JavaScript căn bản</h1> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nền tảng | JavaScript căn bản</title>

  <!-- Nhúng/Liên kết code JavaScript vào trong file HTML -->
  <script src="js/app.js"></script>

  <!-- Đoạn code JavaScript bên trong file HTML -->
  <script>
    alert('Xin chào, tôi là đoạn code bên trong file HTML!');
  </script>

  <!-- Đoạn code JavaScript sai, vì cùng lúc thực hiện nhiều tác vụ
      - Vừa liên kết file app.js
      - Vừa chạy đoạn script bên trong
      => Sai, một số trường hợp sẽ thực thi code không chính xác. Tốt nhất thực hiện chỉ 1 tác vụ cùng lúc. 
  -->
  <script src="js/app.js">
    alert('Xin chào, tôi là đoạn code thực hiện cùng lúc cả 2 tác vụ, tôi quá tải ?!');
  </script>
</head>
<body>
  <h1>Học JavaScript căn bản</h1>
</body>
</html>