Các cách sử dụng Javascript trong trang web

Nền tảng Kiến thức - Hành trang tới Tương lai

Chương trình học

Chương 6-Bài 2. Các cách sử dụng Javascript trong trang web

Tác giả: Dương Nguyễn Phú Cường

Ngày đăng: Hồi xưa đó

Xem định dạng IN

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

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>

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...');

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>

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

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>

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>

Về trang chủ Về Khóa học

Bài học trước Bài học tiếp theo

Các bài học

Chương trình học

Bao gồm Module, Chương, Bài học, Bài tập, Kiểm tra...

Chương trình học

Bài học trước Bài học tiếp theo

Về trang chủ Về Khóa học

Vuexy

Files

Members

NỀN TẢNG

Chương trình học

Chương 6-Bài 2. Các cách sử dụng Javascript trong trang web

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)

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

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

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

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

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

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

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

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

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

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

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

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

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

Mục lục

Chương trình học

Chương trình học

Menu Hướng dẫn Học tập

❤🧡💛💚💙💜 Học là phải THỰC HÀNH ❤🧡💛💚💙💜

Vuexy

Files

Members

Các cách sử dụng Javascript trong trang web

Chương trình học

Chương 6-Bài 2. Các cách sử dụng Javascript trong trang web

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)

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

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

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

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

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

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

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

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

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

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

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

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

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

Mục lục

Chương trình học

Chương trình học

Menu Tiện ích

Menu Hướng dẫn Học tập

❤🧡💛💚💙💜 Học là phải THỰC HÀNH ❤🧡💛💚💙💜

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

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

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

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