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 với ví dụ 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 với ví dụ là gì

Javascript: 04-02 Javascript có thể làm được gì? 🤔

  • Tác giả: Easy Frontend
  • Ngày đăng: 2021-11-08
  • Đánh giá: 4 ⭐ ( 8151 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Video này là một phần trong khoá học Javascript của mình trên Udemy.
    Đăng ký để xem full tại đây: http://course.ezfrontend.com/javascript
    ———
    js
    javascript
    javascript_tutorial
    ———
    VIDEO CHAPTERS:
    Made by: YOUR_NAME_WILL_BE_HERE
    Cảm ơn bạn nhiều nhé! ❤️
    ———
    Easy Frontend - Code xịn hơn mỗi ngày
    🔥 Khoá học Javascript: https://course.ezfrontend.com/javascript
    🎁 Khoá học ReactJS: https://course.ezfrontend.com/reactjs
    🎯 Fan cứng Easy Frontend: https://www.youtube.com/channel/UCG2ovypNCpVOTFeY1YCocmQ/join
    ———
    💰 Ủng hộ mình làm videos thì đóng góp qua MoMo/ZaloPay: 0901 309 729 nhé
    ———
    Kết nối với mình:
    - ✅ Follow facebook: https://www.facebook.com/nvhauesmn/
    - 🎉 Fan page: https://www.facebook.com/learn.easyfrontend
    - ❓ Group: https://www.facebook.com/groups/easyfrontend
    - 💻 Github: https://github.com/paulnguyen-mn
    - 💼 LinkedIn: https://www.linkedin.com/in/haunguyenmn/

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

Javascript là gì? Cú pháp Javascript cơ bản

  • Tác giả: vntalking.com
  • Đánh giá: 4 ⭐ ( 9685 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Khi học bất kỳ một ngôn ngữ lập trình nào cũng vậy, bạn phải nắm được cú pháp của nó. Bài viết này mình sẽ chia sẻ Javascript là gì và cú pháp cơ bản

Hướng dẫn và ví dụ Javascript Window

  • Tác giả: openplanning.net
  • Đánh giá: 5 ⭐ ( 8845 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

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

  • Tác giả: newnet.vn
  • Đánh giá: 3 ⭐ ( 7140 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é!

Hiểu rõ về this trong Javascript qua các ví dụ thực hành

  • Tác giả: freetuts.net
  • Đánh giá: 5 ⭐ ( 7497 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài này chúng ta sẽ tìm hiểu về đối tượng this trong Javascript, qua đó giúp bạn hiểu rõ this trong javascript là gì và cách dùng this như thế nào.

JavaScript có thể làm gì?

  • Tác giả: hocjavascript.net
  • Đánh giá: 3 ⭐ ( 5937 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: JavaScript dùng để làm gì vậy? Dưới đây sẽ là một số ví dụ cơ bản mà JavaScript có thể làm cho trang web của bạn trở lên sinh động hơn.

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  Cách thêm đường viền vào bảng HTML - bảng html có viền

By ads_php