Hướng dẫn làm web bằng javascript

JavaScript là gì?

JavaScript (JS) là một ngôn ngữ lập trình phía client: mã được thực thi bởi trình duyệt của người dùng, sau khi trang web gửi về từ server.

JavaScript được sử dụng để tạo ra các trang web có tính tương tác:

  • Chèn nội dung động vào trang web
  • Đáp ứng lại các thao tác của người dùng
  • Lấy thông tin từ máy tính người sử dụng
  • Thực hiện tính toán trên máy tính người sử dụng
  • Tạo các ứng dụng, chức năng cho trang web
  • ....

JavaScript là ngôn ngữ lập trình phổ biến bậc nhất thế giới, và là một trong ba ngôn ngữ (HTML, CSS, JavaScript) mà tất cả lập trình viên web nhất định phải học.

JavaScript được nhúng vào trang web để kết hợp với HTML/CSS.

Lưu ý: Java và JavaScript là hai ngôn ngữ hoàn toàn khác nhau.

Với JavaScript ta có thể làm được những gì?

Ứng dụng của JavaScript đối với trang web là vô cùng đa dạng, khó mà đong đếm được.

Dưới đây là một số ít chức năng được viết bằng JavaScript:

Tạo máy tính tay

Tạo hiệu ứng chuyển động cho phần tử

Hướng dẫn làm web bằng javascript

Lấy thông tin ngày tháng hiện tại

Hôm nay là , ngày tháng năm

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

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

Video hướng dẫn

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)

Hướng dẫn làm web bằng javascript

Ư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

Hướng dẫn làm web bằng javascript

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>
  <h2>Học JavaScript căn bản</h2>
</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>
  <h2>Học JavaScript căn bản</h2>
</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

Hướng dẫn làm web bằng javascript

  • Màn hình hiển thị thông báo chào mừng

Hướng dẫn làm web bằng javascript


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

Hướng dẫn làm web bằng javascript

Ư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

Hướng dẫn làm web bằng javascript

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>
  <h2>Học JavaScript căn bản</h2>
</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

Hướng dẫn làm web bằng javascript

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>
  <h2>Học JavaScript căn bản</h2>
</body>
</html>