Với các bạn mới học JavaScript cũng như CSS, hay ít sử dụng, hẳn sẽ phân vân khi nào dùng internal JavaScript hay CSS, khi nào thì external. Bài viết này sẽ giúp bạn thông suốt vấn đề này. Nói chính xác thì phải là Internal Style Sheet. Internal nghĩa là thuộc bên trong. Khi đó, với JavaScript thì nội dung các câu lệnh được đặt trong cặp thẻ . Cặp thẻ này có thể nằm trong cặp thẻ hoặc . Với CSS thì nội dung được đặt trong cặp thẻ và cặp thẻ này được đặt trong cặp thẻ . thì phải là Internal Style Sheet. Internal nghĩa là thuộc bên trong. Khi đó, với JavaScript thì nội dung các câu lệnh được đặt trong cặp thẻ . Cặp thẻ này có thể nằm trong cặp thẻ
hoặc . Với CSS thì nội dung được đặt trong cặp thẻ và cặp thẻ này được đặt trong cặp thẻ . Nói tóm lại, Internal JavaScript và Internal CSS là khi nội dung JavaScript và CSS nằm chung trong trang HTML., Internal JavaScript và Internal CSS là khi nội dung JavaScript và CSS nằm chung trong trang HTML.
Cách dùng JavaScript và CSS: Internal và External
Còn External?
Trường hợp này thì nội dung JavaScript và CSS không cần đặt trong cặp thẻ nào cả, và nó được viết trong một file riêng biệt. Ví dụ, JavaScript được lưu trong file javascript.js, còn CSS được lưu trong file style.css. Nội dung chúng tách biệt với HTML.
Các file .js và .css này có thể được đặt ở bất kì đâu, miễn từ trang web có thể tham chiếu tới.
Vậy khi nào và loại nào là phù hợp?
Muốn biết khi nào nên dùng internal, khi nào thì external phải xét tới ưu và khuyết điểm của chúng. nên dùng internal, khi nào thì external phải xét tới ưu và khuyết điểm của chúng.
Từ HTML4, người ta đã quy ước rằng, HTML chỉ chứa nội dung thô. Tức là chữ, hình ảnh… nhưng không có định dạng gì cả. Vai trò định dạng do CSS nắm. Việc sử dụng Inline Style Sheet [định dạng bằng thuộc tính “style” trong từng element] đã bị hạn chế sử dụng tối đa, nhằm giúp HTML thêm trong sáng, dễ bảo trì, nâng cấp.
Cách dùng JavaScript và CSS: Internal và External
Còn External?
Trường hợp này thì nội dung JavaScript và CSS không cần đặt trong cặp thẻ nào cả, và nó được viết trong một file riêng biệt. Ví dụ, JavaScript được lưu trong file javascript.js, còn CSS được lưu trong file style.css. Nội dung chúng tách biệt với HTML., nếu dung lượng file nhỏ [nội dung ít], mà các bạn cứ để ở một file riêng. Hoặc cắt nhiều file lớn thành file nhỏ… Thì thời gian tải file lại tăng lên [thời gian gửi yêu cầu lên server, thời gian chờ xử lý, thời gian tải trở xuống… tăng lên theo số file].
Các file .js và .css này có thể được đặt ở bất kì đâu, miễn từ trang web có thể tham chiếu tới.. Nếu trang web của các bạn lớn, nhiều nội dung CSS và JavaScript thì nên tách chúng ra. Nhưng đừng để quá nhiều file riêng lẻ. Trường hợp web nhỏ, chỉ vài chục dòng CSS hay JavaScript thì nên để chung vào file HTML để load nhanh hơn.-/-
Vậy khi nào và loại nào là phù hợp? Ngày tạo: 30/01/2021 Ngày cập nhật: 04/02/2021
Muốn biết khi nào nên dùng internal, khi nào thì external phải xét tới ưu và khuyết điểm của chúng.series Javascript căn bản!
Từ HTML4, người ta đã quy ước rằng, HTML chỉ chứa nội dung thô. Tức là chữ, hình ảnh… nhưng không có định dạng gì cả. Vai trò định dạng do CSS nắm. Việc sử dụng Inline Style Sheet [định dạng bằng thuộc tính “style” trong từng element] đã bị hạn chế sử dụng tối đa, nhằm giúp HTML thêm trong sáng, dễ bảo trì, nâng cấp.
Sử dụng External Style Sheet cũng như External JavaScript còn giúp tăng tốc độ tải trang web, trình duyệt tải nhiều file bằng nhiều luồng. Với các thư viện JavaScript phổ biến như jQuery, nếu sử dụng file trên host của Google, mà host Google thì đường truyền cực nhanh rồi, sẽ giúp giảm thời gian load trang web của bạn. Chưa kể, nhờ chức năng cache của trình duyệt, một trang web sử dụng thư viện này rồi, trình duyệt sẽ lưu thư viện đó tại ổ cứng của máy bạn. Trang web khác cùng tham chiếu tới thư viện có đường dẫn đã được dùng thì trình duyệt sẽ lấy file thư viện đã lưu này để dùng lại, tiết kiệm thời gian và băng thông.
Tuy nhiên, nếu dung lượng file nhỏ [nội dung ít], mà các bạn cứ để ở một file riêng. Hoặc cắt nhiều file lớn thành file nhỏ… Thì thời gian tải file lại tăng lên [thời gian gửi yêu cầu lên server, thời gian chờ xử lý, thời gian tải trở xuống… tăng lên theo số file].
Do đó, các bạn nên cân nhắc kỹ lưỡng. Nếu trang web của các bạn lớn, nhiều nội dung CSS và JavaScript thì nên tách chúng ra. Nhưng đừng để quá nhiều file riêng lẻ. Trường hợp web nhỏ, chỉ vài chục dòng CSS hay JavaScript thì nên để chung vào file HTML để load nhanh hơn.-/-
Lượt xem: 1744 Ngày tạo: 30/01/2021 Ngày cập nhật: 04/02/2021
Chào mừng các bạn đến với bài giảng tiếp theo của series Javascript căn bản!
Trong bài giảng trước ta đã tìm hiểu về cú pháp tổng quát và trình tự xử lý của Javascript. Tiếp tục với quá trình từng bước tìm hiểu những nội dung căn bản nhất của Javascript, trong bài giảng này, ta sẽ tìm hiểu cách để chèn Javascript vào HTML để khiến nó hoạt động.
Cùng bắt đầu thôi!
Phương thức hoạt động của Javascript
Đối với Client-side Javascript [đã trình bày ở bài 1], các đoạn mã Javascript không thể hoạt động độc lập mà cần thông qua một trang HTML. Nghĩa là nếu bạn có một tập tin chỉ chứa code Javascript, bạn không thể khiến nó hoạt động bằng cách mở trực tiếp tập tin này, mà thay vào đó, bạn cần chèn nó vào một trang HTML. Thông qua HTML, các đoạn mã Javascript sẽ được xử lý bằng trình duyệt web.
| my-scripts.js | home.html |
document.addEventListener["DOMContentLoaded", function[event] { alert['External Javascript đã hoạt động'];}]; alert['External Javascript đã hoạt động'];}];
| |
Đối với Server-side Javascript, hoccode.org sẽ trình bày phương thức hoạt động của nó trong một series bài giảng khác.
Các phương pháp chèn Javascript vào HTML
| Tương tự như CSS, Có 3 phương pháp để bạn có thể chèn Javascript vào một trang HTML: External Javascript, Internal Javascript và Inline Javascript. | External Javascript |
External Javascript là phương pháp mà trong đó, các đoạn code Javascript sẽ được lưu vào một tập tin có phần mở rộng là .js và kết nối với trang HTML thông qua phần tử thẻ | home.html0home.html1home.html2home.html0home.html1home.html2
|
Bạn có thể chèn External Javascript ở bất kỳ vị trí nào trong trang HTML mà bạn muốn, kể cả trong phần tử thẻ home.html3 | home.html4home.html0home.html1home.html7home.html0home.html1home.html7
|
| Ưu điểm | Nhược điểm |
Bạn có thể viết một kịch bản Javascript dài và phức tạp. Bạn có thể viết một kịch bản Javascript với số lượng lớn dòng code trên tập tin .js Việc tách biệt nơi lưu trữ code Javascript và HTML giúp code của bạn trở nên gọn gàng hơn. Tận dụng cơ chế caching của trình duyệt để giúp trang HTML có tốc độ load và render nhanh hơn. Code Javascript có thể xuất ra dạng nén [.min.js] để có dung lượng nhỏ nhất có thể, từ đó cải thiện tốc độ load trang ở hầu hết các website hiện nay. | Tốn nhiều thao tác & bước thực hiện nhất Nếu xảy ra lỗi code Javascript, bạn tốn thời gian để xác định dòng code lỗi đó đang nằm trên tập tin nào. |
Internal Javascript
Internal Javascript là phương pháp mà trong đó, các đoạn code Javascript được đặt trong phần tử thẻ của một trang HTML.
Ví dụ:
| Source code |
my-scripts.js4my-scripts.js4 |
Lưu ý:
| Nội dung lưu ý | Demo |
| Bạn có thể chèn nhiều Internal Javascript vào chung 1 trang HTML | my-scripts.js8my-scripts.js9my-scripts.js0my-scripts.js8my-scripts.js9my-scripts.js0
|
Bạn có thể chèn Internal Javascript ở bất kỳ vị trí nào trong trang HTML mà bạn muốn, kể cả trong phần tử thẻ home.html3 | home.html4home.html0my-scripts.js4home.html7home.html0my-scripts.js4home.html7
|
| Ưu điểm | Nhược điểm |
Bạn có thể viết một kịch bản Javascript dài và phức tạp. Bạn có thể viết một kịch bản Javascript với số lượng lớn dòng code trên tập tin .js | Việc tách biệt nơi lưu trữ code Javascript và HTML giúp code của bạn trở nên gọn gàng hơn. |
Tận dụng cơ chế caching của trình duyệt để giúp trang HTML có tốc độ load và render nhanh hơn.
Code Javascript có thể xuất ra dạng nén [.min.js] để có dung lượng nhỏ nhất có thể, từ đó cải thiện tốc độ load trang ở hầu hết các website hiện nay.
Ví dụ:
| Source code | Lưu ý: |
Nội dung lưu ýmy-scripts.js7my-scripts.js8my-scripts.js9my-scripts.js6
| Demo Bạn có thể chèn nhiều Internal Javascript vào chung 1 trang HTML |
Bạn có thể chèn Internal Javascript ở bất kỳ vị trí nào trong trang HTML mà bạn muốn, kể cả trong phần tử thẻ home.html3 home.html2home.html3home.html4my-scripts.js6
| Ưu và nhược điểm của phương pháp Internal Javascript Tốn ít thao tác thực hiện hơn so với External Javascript |
| Ưu điểm | Nhược điểm |
Inline Javascript | Inline Javascript là phương pháp mà trong đó, code Javascript sẽ được chèn trực tiếp vào phần tử HTML thông qua các thuộc tính HTML thuộc nhóm event [Ví dụ: onload, onlick, onmouseover, onmouseout...] Source code |