Hướng dẫn dùng web.js JavaScript

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 dùng web.js 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 dùng web.js JavaScript

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

  • Nội dung file index.html



  
  
  Nền tảng | JavaScript căn bản


  

Học JavaScript căn bản

  • 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



  
  
  Nền tảng | JavaScript căn bản

  
  


  

Học JavaScript căn bản

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 dùng web.js JavaScript

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

Hướng dẫn dùng web.js JavaScript


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

Hướng dẫn dùng web.js 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 dùng web.js JavaScript

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

  • Nội dung file index.html



  
  
  Nền tảng | JavaScript căn bản

  
  

  
  


  

Học JavaScript căn bản

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 dùng web.js JavaScript

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

  • Thẻ 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:



  
  
  Nền tảng | JavaScript căn bản

  
  

  
  

  
  


  

Học JavaScript căn bản