Vậy là xong, bước đầu tiên của bạn vào thế giới JavaScript.
Chúng tôi đã bắt đầu chỉ với lý thuyết, để bắt đầu giúp bạn làm quen với lý do tại sao bạn sử dụng JavaScript và những việc bạn có thể làm với nó.
Trong quá trình này, bạn đã xem một vài ví dụ về mã và tìm hiểu cách JavaScript phù hợp với phần còn lại của mã trên trang web của bạn, trong số những thứ khác.

Bạn đang xem : javascript trong html là gì

Có một số vấn đề liên quan đến việc tải tập lệnh vào đúng thời điểm. Không có gì là đơn giản như nó có vẻ!
Một vấn đề phổ biến là tất cả HTML trên một trang được tải theo thứ tự mà nó xuất hiện.
Nếu bạn đang sử dụng JavaScript để thao tác các phần tử trên trang (hay chính xác hơn là Mô hình đối tượng tài liệu ), mã của bạn sẽ không hoạt động nếu JavaScript được tải và phân tích cú pháp trước HTML mà bạn đang cố gắng thực hiện một cái gì đó để.

Trong các ví dụ mã ở trên, trong các ví dụ bên trong và bên ngoài, JavaScript được tải và chạy trong phần đầu của tài liệu, trước khi phần thân HTML được phân tích cú pháp.
Điều này có thể gây ra lỗi, vì vậy chúng tôi đã sử dụng một số cấu trúc để khắc phục lỗi này.

Trong ví dụ nội bộ, bạn có thể thấy cấu trúc này xung quanh mã:

  document 

.

addEventListener

(

'DOMContentLoaded'

,

(

)

= & gt;

{

...

}

)

;

Đây là trình xử lý sự kiện, sẽ lắng nghe sự kiện DOMContentLoaded của trình duyệt, cho biết rằng phần thân HTML đã được tải và phân tích cú pháp hoàn toàn.
JavaScript bên trong khối này sẽ không chạy cho đến khi sự kiện đó được kích hoạt, do đó sẽ tránh được lỗi (bạn sẽ tìm hiểu về các sự kiện ở phần sau của khóa học).

Trong ví dụ bên ngoài, chúng tôi sử dụng tính năng JavaScript hiện đại hơn để giải quyết vấn đề, thuộc tính defer , cho trình duyệt tiếp tục tải xuống nội dung HTML sau khi & lt; script & gt; Đã đạt đến phần tử thẻ .

  

& lt;

script src

=

" script.js "

defer

& gt;

& lt;

/

script

& gt;

Trong trường hợp này, cả tập lệnh và HTML sẽ tải đồng thời và mã sẽ hoạt động.

Lưu ý: Trong trường hợp bên ngoài, chúng tôi không cần sử dụng sự kiện DOMContentLoaded vì thuộc tính defer đã giải quyết được vấn đề cho chúng tôi.
Chúng tôi đã không sử dụng giải pháp defer cho ví dụ JavaScript nội bộ vì defer chỉ hoạt động cho các tập lệnh bên ngoài.

Một giải pháp cũ cho vấn đề này từng là đặt phần tử tập lệnh của bạn ngay ở cuối phần nội dung (ví dụ: ngay trước thẻ & lt; / body & gt; ), để cuối cùng nó sẽ tải HTML đã được phân tích cú pháp.
Vấn đề với giải pháp này là việc tải / phân tích cú pháp tập lệnh bị chặn hoàn toàn cho đến khi HTML DOM được tải.
Trên các trang web lớn hơn có nhiều JavaScript, điều này có thể gây ra vấn đề lớn về hiệu suất, làm chậm trang web của bạn.

không đồng bộ hóa và hoãn lại

Trên thực tế, có hai tính năng hiện đại mà chúng ta có thể sử dụng để vượt qua sự cố của tập lệnh chặn – async defer (mà chúng ta đã thấy ở trên).
Hãy xem xét sự khác biệt giữa hai điều này.

Tập lệnh được tải bằng thuộc tính async sẽ tải xuống tập lệnh mà không chặn trang trong khi tập lệnh đang được tìm nạp.
Tuy nhiên, khi quá trình tải xuống hoàn tất, tập lệnh sẽ thực thi, điều này sẽ chặn trang hiển thị.
Bạn không có gì đảm bảo rằng các tập lệnh sẽ chạy theo bất kỳ thứ tự cụ thể nào.
Tốt nhất là sử dụng async khi các tập lệnh trong trang chạy độc lập với nhau và không phụ thuộc vào tập lệnh nào khác trên trang.

Các tập lệnh được tải bằng thuộc tính defer sẽ tải theo thứ tự xuất hiện trên trang.
Chúng sẽ không chạy cho đến khi nội dung trang được tải hết, điều này rất hữu ích nếu các tập lệnh của bạn phụ thuộc vào DOM đang có (ví dụ: chúng sửa đổi một hoặc nhiều phần tử trên trang).

Dưới đây là phần trình bày trực quan về các phương pháp tải tập lệnh khác nhau và ý nghĩa của điều đó đối với trang của bạn:

Hình ảnh này là từ HTML spec có sẵn theo điều khoản cấp phép của CC BY 4.0 .

Ví dụ: nếu bạn có các phần tử tập lệnh sau:

  

& lt;

script p>

không đồng bộ

src

=

"

js / nhà cung cấp / jquery.js

"

< / p>

& gt;

& lt; /

script

& gt;

& lt;

script

không đồng bộ

src

=

"

js / script2.js

"

& gt;

& lt; / script

& gt;

& lt;

script

không đồng bộ

src

=

"

js / script3.js

"

& gt;

& lt; / script

& gt;

Bạn không thể dựa vào thứ tự mà các tập lệnh sẽ tải.
jquery.js có thể được tải trước hoặc sau script2.js script3.js jquery sẽ tạo ra lỗi vì jquery sẽ không được xác định tại thời điểm tập lệnh chạy.

async nên được sử dụng khi bạn có nhiều tập lệnh nền cần tải vào và bạn chỉ muốn tải chúng vào vị trí càng sớm càng tốt.
Ví dụ: có thể bạn có một số tệp dữ liệu trò chơi cần tải, sẽ cần khi trò chơi thực sự bắt đầu, nhưng bây giờ bạn chỉ muốn tiếp tục hiển thị phần giới thiệu trò chơi, tiêu đề và sảnh đợi mà chúng không bị chặn khi tải tập lệnh …

Các tập lệnh được tải bằng thuộc tính defer (xem bên dưới) sẽ chạy theo thứ tự xuất hiện trên trang và thực thi chúng ngay sau khi tập lệnh và nội dung được tải xuống:

  

& lt;

script p>

trì hoãn

src

=

"

js / nhà cung cấp / jquery.js

"

< / p>

& gt;

& lt; /

script

& gt;

& lt;

script

trì hoãn

src

=

"

js / script2.js

"

& gt;

& lt; / script

& gt;

& lt;

script

trì hoãn

src

=

"

js / script3.js

"

& gt;

& lt; / script

& gt;

Trong ví dụ thứ hai, jquery.js sẽ tải trước script2.js script3.js .js sẽ được tải trước < mã> script3.js .
Chúng sẽ không chạy cho đến khi nội dung trang được tải hết, điều này rất hữu ích nếu các tập lệnh của bạn phụ thuộc vào DOM đang có (ví dụ: chúng sửa đổi một trong các phần tử khác trên trang).

Tóm lại:

  • async and defer cả hai đều hướng dẫn trình duyệt tải xuống (các) tập lệnh trong một chuỗi riêng biệt, trong khi phần còn lại của trang (DOM, v.v.) đang tải xuống, vì vậy việc tải trang không bị chặn trong quá trình tìm nạp.
  • các tập lệnh có thuộc tính async sẽ thực thi ngay sau khi quá trình tải xuống hoàn tất.
    Điều này chặn trang và không đảm bảo bất kỳ thứ tự thực hiện cụ thể nào.
  • các tập lệnh có thuộc tính defer sẽ tải theo thứ tự của chúng và chỉ thực thi sau khi mọi thứ tải xong.
  • Nếu các tập lệnh của bạn sẽ được chạy ngay lập tức và chúng không có bất kỳ phụ thuộc nào, thì hãy sử dụng async .
  • Nếu các tập lệnh của bạn cần đợi phân tích cú pháp và phụ thuộc vào các tập lệnh khác và / hoặc DOM đang có, hãy tải chúng bằng cách sử dụng defer và đặt & lt; script & gt; các phần tử theo thứ tự bạn muốn trình duyệt thực thi chúng.


Xem thêm những thông tin liên quan đến chủ đề javascript trong html là gì

HTML, CSS, JavaScript Explained [in 4 minutes for beginners]

  • Tác giả: Danielle Thé
  • Ngày đăng: 2016-10-16
  • Đánh giá: 4 ⭐ ( 7029 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Before you start any web development tutorials for beginners, FIRST understand what languages are used for building websites: HTML, CSS, JavaScript. Learn why you can't exist online without these programming languages! Consider this your code and coding concept 101.

    UPDATES: I've developed a Product Management Course for AI & Data Science for those interested in the industry or wanting to get into Product Management. Here's the link! https://www.udemy.com/course/the-product-management-for-data-science-ai-course/?referralCode=DE25D5190902F792E9A1

    JOIN
    The GLITCH Email List: https://glitch.technology/subscribe

    SAY HELLO
    https://twitter.com/daniellethe
    https://medium.com/@daniellethe

[Javascript Căn bản] Javascript là gì? Sử dụng Javascript trong website như thế nào?

  • Tác giả: tuandc.com
  • Đánh giá: 4 ⭐ ( 2132 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

JavaScript là gì? Và những điều developer nên nắm vững

  • Tác giả: cafedev.vn
  • Đánh giá: 4 ⭐ ( 7792 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chào tất cả các bạn, hôm nay cafedev sẽ giới thiệu mọi thứ về ngôn ngữ JavaScript, một ngôn ngữ rất phổ biển trong giới developer, qua bài này chúng ta sẽ nắm rõ và biết được JavaScript là gì?, Nó hoạt động như thế nào?, Chúng ta có thể làm gì với nó?. Và một số kiến thức quan trọng về nó mà các develop không nên bỏ qua, đặc biệt khá hữu ích khi phỏng vấn.

DOM là gì? Tìm hiểu và thao tác DOM trong Javascript

  • Tác giả: topdev.vn
  • Đánh giá: 4 ⭐ ( 5610 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: DOM là tên gọi viết tắt của (Document Object Model – tạm dịch Mô hình Các Đối tượng Tài liệu). Là một chuẩn được định nghĩa bởi W3C (Tổ Chức Web Toàn Cầu - World Wide Web Consortium). DOM được dùng để truy xuất và thao tác trên các tài liệu có cấu trúc dạng HTML hay XML bằng các ngôn ngữ lập trình thông dụng như Javascript, PHP...

Lập trình HTML, CSS và JavaScript trong việc xây dựng website

  • Tác giả: sentayho.com.vn
  • Đánh giá: 3 ⭐ ( 6456 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Sử dụng Javascript trong HTML

  • Tác giả: vietjack.com
  • Đánh giá: 5 ⭐ ( 5928 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sử dụng Javascript trong HTML - Học HTML cơ bản và nâng cao theo các bước đơn giản và dễ hiểu từ HTML là gì, Tag trong HTML, HTML tag, thẻ trong HTML, tổng hợp các thẻ HTML cơ bản, thẻ meta, thuộc tính, định dạng, thẻ trong HTML, commemnt, font, marquee, hình ảnh, link, bảng, frame, danh sách, layout, màu, form, background, style sheet, và sử dụng javascript.

Javascript là gì? Tổng quan về JavaScript bạn cần biết

  • Tác giả: newnet.vn
  • Đánh giá: 5 ⭐ ( 7422 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu tổng quan về JavaScript, JavaScript là gì? JavaScript có vai trò gì trong thiết kế website? Sử dụng JavaScript thì có những ưu điểm nào vượt trội không? Hãy cùng Newnet tìm hiểu nhé!

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Làm thế nào để liên kết jQuery trong trang HTML? - thêm jquery vào html

By ads_php