Hướng dẫn dùng extenal JavaScript

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 dung chính Show

• Còn External?
• Vậy khi nào và loại nào là phù hợp?
• Phương thức hoạt động của Javascript
• Các phương pháp chèn Javascript vào HTML
• External Javascript
• Internal Javascript
• Inline Javascript

Nội dung chính

• Còn External?
• Vậy khi nào và loại nào là phù hợp?
• Phương thức hoạt động của Javascript
• Các phương pháp chèn Javascript vào HTML
• External Javascript
• Internal Javascript
• Inline Javascript

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ẻ .

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.

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.

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

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.-/-