Hướng dẫn javascript for website design - javascript cho thiết kế trang web

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

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

Video hướng dẫn

Cách 1: sửdụng file JavaScript rời (External File)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ụngcode JavaScript bêntrong file HTML (Internal File)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)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ế.

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 tạo cấu trúc thư mục như sau

• Dễ dàng quản lý / tổ chức source code

\---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ầ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ế 2: viết code xử lý cho index.html và app.js

• Thường được sử dụng để phát triển các thư viện tiện ích (Javascript library)

  
  
  


  
Học JavaScript căn bản

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

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

Cấu trúc Thư mục Dự án có sử dụng Javascript Nhúng/Liên kết code JavaScript vào trong file HTML

• 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

  
  
  

  
  


  
Học JavaScript căn bản

Nội dung file app.js

• 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 filesử dụng code JavaScript bên trong file HTML (Internal File)

Step 4: mở trang index.html bằng trình duyệt để xem kết quả điểm và Nhược điểm

Step 1: tạo cấu trúc thư mục như sau 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.js2: viết code xử lý cho index.html và app.js

• Nội dung file index.html

  
  
  

  
  

  
  


  
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

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

• Thẻ

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

  1 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:

  
  
  

  
  

  
  

  
  


  
Học JavaScript căn bản