Cách tách HTML, CSS và JavaScript

Khi bạn lần đầu tiên viết một JavaScript mới, cách dễ nhất để thiết lập nó là nhúng mã JavaScript trực tiếp vào trang web để mọi thứ ở một nơi trong khi bạn kiểm tra để nó hoạt động bình thường. Tương tự, nếu bạn đang chèn một tập lệnh viết sẵn vào trang web của mình, các hướng dẫn có thể yêu cầu bạn nhúng một phần hoặc toàn bộ tập lệnh vào chính trang web đó

Điều này không sao để thiết lập trang và làm cho trang hoạt động bình thường ngay từ đầu nhưng khi trang của bạn hoạt động theo cách bạn muốn, bạn sẽ có thể cải thiện trang bằng cách trích xuất JavaScript vào một tệp bên ngoài để trang của bạn

Nếu bạn chỉ sao chép và sử dụng JavaScript do người khác viết thì hướng dẫn của họ về cách thêm tập lệnh của họ vào trang của bạn có thể dẫn đến việc bạn có một hoặc nhiều phần JavaScript lớn thực sự được nhúng vào chính trang web của bạn và hướng dẫn của họ không cho biết . Mặc dù vậy, đừng lo lắng vì bất kể mã JavaScript bạn đang sử dụng trong trang của mình là gì, bạn có thể dễ dàng di chuyển JavaScript ra khỏi trang của mình và thiết lập nó dưới dạng một tệp riêng biệt [hoặc các tệp nếu bạn có nhiều đoạn JavaScript được nhúng trong . Quy trình thực hiện việc này luôn giống nhau và được minh họa rõ nhất bằng một ví dụ

Hãy xem một đoạn mã JavaScript có thể trông như thế nào khi được nhúng vào trang của bạn. Mã JavaScript thực tế của bạn sẽ khác với mã được hiển thị trong các ví dụ sau nhưng quy trình này giống nhau trong mọi trường hợp

Ví dụ Một



if [top.location != self.location]
top.location = self.location;


Ví dụ Hai





Ví dụ Ba



/* if [top.location != self.location]
top.location = self.location;
/* ]]> */


JavaScript nhúng của bạn sẽ trông giống như một trong ba ví dụ trên. Tất nhiên, mã JavaScript thực tế của bạn sẽ khác với mã được hiển thị nhưng JavaScript có thể sẽ được nhúng vào trang bằng một trong ba phương pháp trên. Trong một số trường hợp, mã của bạn có thể sử dụng language="javascript" đã lỗi thời thay vì type="text/javascript" trong trường hợp đó, bạn có thể muốn cập nhật mã của mình hơn để bắt đầu bằng cách thay thế thuộc tính language bằng thuộc tính type one

Trước khi bạn có thể trích xuất JavaScript thành tệp riêng của mình, trước tiên bạn cần xác định mã sẽ được trích xuất. Trong cả ba ví dụ trên, có hai dòng mã JavaScript thực tế được trích xuất. Tập lệnh của bạn có thể sẽ có nhiều dòng hơn nhưng có thể được xác định dễ dàng vì nó sẽ chiếm cùng một vị trí trong trang của bạn với hai dòng JavaScript mà chúng tôi đã đánh dấu trong ba ví dụ trên [cả ba ví dụ đều chứa hai dòng giống nhau

  1. Điều đầu tiên bạn cần làm để thực sự trích xuất JavaScript thành một tệp riêng biệt là mở trình soạn thảo văn bản thuần túy và truy cập nội dung trang web của bạn. Sau đó, bạn cần xác định vị trí JavaScript được nhúng sẽ được bao quanh bởi một trong các biến thể của mã được hiển thị trong các ví dụ trên
  2. Sau khi xác định được mã JavaScript, bạn cần chọn mã đó và sao chép mã đó vào khay nhớ tạm của mình. Với ví dụ trên, mã cần chọn được tô sáng, bạn không cần chọn các thẻ script hoặc các chú thích tùy chọn có thể xuất hiện xung quanh mã JavaScript của bạn
  3. Mở một bản sao khác của trình soạn thảo văn bản thuần túy của bạn [hoặc một tab khác nếu trình soạn thảo của bạn hỗ trợ mở nhiều tệp cùng lúc] và dán nội dung JavaScript vào đó
  4. Chọn tên tệp mô tả để sử dụng cho tệp mới của bạn và lưu nội dung mới bằng tên tệp đó. Với mã ví dụ, mục đích của tập lệnh là ngắt khung để có thể đặt tên thích hợp là phá khung. js
  5. Vì vậy, bây giờ chúng tôi có JavaScript trong một tệp riêng biệt, chúng tôi quay lại trình chỉnh sửa nơi chúng tôi có nội dung trang gốc để thực hiện các thay đổi ở đó để liên kết với bản sao bên ngoài của tập lệnh
  6. Vì bây giờ chúng tôi có tập lệnh trong một tệp riêng biệt, chúng tôi có thể xóa mọi thứ giữa các thẻ tập lệnh trong nội dung gốc của mình để thẻ

Chủ Đề