Thẻ HTML cho JavaScript là gì?

Question

JavaScript, còn được gọi là JS, là một trong những ngôn ngữ kịch bản (kịch bản phía máy khách), thường được sử dụng trong phát triển web để tạo các trang web hiện đại và tương tác. Thuật ngữ "script" được sử dụng để chỉ các ngôn ngữ không độc lập về bản chất và ở đây nó đề cập đến JavaScript chạy trên máy khách

Nội dung chính Show

Thêm JavaScript vào các trang HTML
I. mã nhúng. -
II. mã nội tuyến. -
III. tệp bên ngoài. -
Phần tử noscript HTML
Tệp JavaScript
Bản demo đơn giản bao gồm JavaScript
JavaScript của người khác
Khung JavaScript
Kích thước tệp JavaScript
Làm cách nào để đưa JavaScript vào HTML?
Tập lệnh src trong HTML là gì?

Nói cách khác, chúng ta có thể nói rằng thuật ngữ kịch bản được sử dụng cho các ngôn ngữ yêu cầu sự hỗ trợ của ngôn ngữ khác để được thực thi. Ví dụ: các chương trình JavaScript không thể được thực thi nếu không có sự trợ giúp của HTML hoặc không được tích hợp vào mã HTML

JavaScript được sử dụng theo nhiều cách trong các trang web như tạo thông báo cảnh báo, xây dựng thư viện hình ảnh, thao tác DOM, xác thực biểu mẫu, v.v.

Thêm JavaScript vào các trang HTML

Có ba cách sau để người dùng có thể thêm JavaScript vào các trang HTML

mã nhúng
mã nội tuyến
tệp bên ngoài

Chúng ta sẽ thấy ba trong số họ từng bước

I. mã nhúng. -

Để thêm mã JavaScript vào các trang HTML, chúng ta có thể sử dụng thẻ của HTML bao quanh mã JavaScript bên trong chương trình HTML. Người dùng cũng có thể xác định mã JavaScript trong thẻ (hay có thể nói là phần nội dung) hoặc thẻ vì nó hoàn toàn phụ thuộc vào cấu trúc của trang web mà người dùng sử dụng

Chúng ta có thể hiểu điều này rõ ràng hơn với sự trợ giúp của một ví dụ, cách thêm JavaScript vào html

Thí dụ

đầu ra

Chúng tôi cũng có thể xác định mã JavaScript trong thẻ hoặc phần nội dung

Hãy hiểu thông qua một ví dụ

đầu ra

II. mã nội tuyến. -

Nói chung, phương thức này được sử dụng khi chúng ta phải gọi một hàm trong thuộc tính sự kiện HTML. Có nhiều trường hợp (hoặc sự kiện) trong đó chúng tôi phải thêm mã JavaScript trực tiếp, ví dụ:. , sự kiện OnMover, OnClick, v.v.

Hãy xem với sự trợ giúp của một ví dụ, cách chúng ta có thể thêm JavaScript trực tiếp vào html mà không cần sử dụng thẻ

Hãy xem ví dụ

đầu ra

III. tệp bên ngoài. -

Chúng tôi cũng có thể tạo một tệp riêng để chứa mã JavaScript bằng (. js) và sau đó kết hợp/đưa nó vào tài liệu HTML của chúng tôi bằng cách sử dụng thuộc tính src của thetag cũng không được sử dụng trong đó

Phần tử noscript HTML

Phần tử cung cấp cho chúng tôi một cách khác để tạo nội dung cho người dùng có trình duyệt không hỗ trợ JavaScript hoặc đã tắt JavaScript trong trình duyệt

Để bao gồm tệp JavaScript bên ngoài, chúng ta có thể sử dụng thẻ script có thuộc tính src. Bạn đã sử dụng thuộc tính src khi sử dụng hình ảnh. Giá trị cho thuộc tính src phải là đường dẫn đến tệp JavaScript của bạn

Thẻ tập lệnh này phải được bao gồm giữa các thẻ trong tài liệu HTML của bạn

Tệp JavaScript

Tệp JavaScript không phải là tệp HTML hoặc tệp CSS

Luôn kết thúc bằng phần mở rộng js
Chỉ bao gồm JavaScript

Theo thông lệ, đặt tất cả các tệp JavaScript vào một thư mục có tên là js trên các trang web, như vậy

Bản demo đơn giản bao gồm JavaScript

Dưới đây là minh họa rất đơn giản về cách đưa tệp JavaScript bên ngoài vào trang HTML

JavaScript của người khác

Đối với lớp này, bạn không cần phải viết bất kỳ mã JavaScript thực tế nào. Thật may mắn cho bạn, nhiều người đã viết rất nhiều JavaScript và thậm chí còn cho phép bạn sử dụng nó miễn phí

Khung JavaScript

Framework về cơ bản là một thư viện mã cho một ngôn ngữ nhất định. Nói chung, khung trừu tượng hóa các tác vụ phổ biến và giúp các nhà thiết kế và nhà phát triển viết mã cụ thể của họ dễ dàng và nhanh hơn. Các khung không thực sự tự làm bất cứ điều gì, chúng chỉ cung cấp một nền tảng dễ dàng hơn để mọi người xây dựng trên đó

Khung JavaScript phổ biến

Trong số các khung này, JQuery hiện là khung phổ biến nhất. Đó cũng là từ mà bạn muốn gặp nhất khi được sử dụng như một từ thông dụng

Kích thước tệp JavaScript

Nhiều tệp JavaScript có xu hướng khá lớn, điều này có thể làm chậm thời gian tải trang của bạn. Các khung phổ biến thường cung cấp phiên bản mã "rút gọn" của chúng. Bạn phải luôn sử dụng phiên bản này trong các trang của mình vì phiên bản này sẽ có kích thước tệp nhỏ hơn

Phần tử HTML <script> được sử dụng để nhúng mã hoặc dữ liệu thực thi; . Phần tử <script> cũng có thể được sử dụng với các ngôn ngữ khác, chẳng hạn như ngôn ngữ lập trình đổ bóng GLSL của WebGL và JSON

Danh mục nội dung, ,. Nội dung được phépTập lệnh động như

<script>
  alert("Hello World!");
</script>

0. Bỏ sót thẻKhông có, cả thẻ bắt đầu và thẻ kết thúc đều bắt buộc. Cha mẹ được phép Bất kỳ phần tử nào chấp nhận hoặc bất kỳ phần tử nào chấp nhận. Vai trò ARIA ngầm định Vai trò ARIA được phép Không có

<script>
  alert("Hello World!");
</script>

1 được phép Giao diện DOM

<script>
  alert("Hello World!");
</script>

2

Phần tử này bao gồm các thuộc tính toàn cục

Đối với tập lệnh cổ điển, nếu có thuộc tính

<script>
  alert("Hello World!");
</script>

3 thì tập lệnh cổ điển sẽ được tìm nạp song song với quá trình phân tích cú pháp và được đánh giá ngay khi có sẵn

Đối với các tập lệnh mô-đun, nếu có thuộc tính

<script>
  alert("Hello World!");
</script>

3 thì tập lệnh và tất cả các phần phụ thuộc của chúng sẽ được thực thi trong hàng đợi trì hoãn, do đó chúng sẽ được tìm nạp song song với quá trình phân tích cú pháp và được đánh giá ngay khi có sẵn

Thuộc tính này cho phép loại bỏ JavaScript chặn trình phân tích cú pháp trong đó trình duyệt sẽ phải tải và đánh giá các tập lệnh trước khi tiếp tục phân tích cú pháp.

<script>
  alert("Hello World!");
</script>

6 có tác dụng tương tự trong trường hợp này

Đây là một thuộc tính boolean. sự hiện diện của thuộc tính boolean trên một phần tử biểu thị giá trị thực và sự vắng mặt của thuộc tính biểu thị giá trị sai

Xem ghi chú về hỗ trợ trình duyệt. Xem thêm Tập lệnh không đồng bộ cho asm. js

Các phần tử

<script>
  alert("Hello World!");
</script>

8 bình thường chuyển thông tin tối thiểu tới

<script>
  alert("Hello World!");
</script>

9 đối với các tập lệnh không vượt qua kiểm tra CORS tiêu chuẩn. Để cho phép ghi nhật ký lỗi cho các trang web sử dụng miền riêng cho phương tiện tĩnh, hãy sử dụng thuộc tính này. Xem các thuộc tính cài đặt CORS để biết giải thích mô tả rõ hơn về các đối số hợp lệ của nó

Thuộc tính Boolean này được đặt để cho trình duyệt biết rằng tập lệnh sẽ được thực thi sau khi tài liệu đã được phân tích cú pháp, nhưng trước khi kích hoạt

<script type="module" src="main.js"></script>
<script nomodule src="fallback.js"></script>

1

Các tập lệnh có thuộc tính

<script>
  alert("Hello World!");
</script>

6 sẽ ngăn sự kiện

<script type="module" src="main.js"></script>
<script nomodule src="fallback.js"></script>

1 kích hoạt cho đến khi tập lệnh được tải và đánh giá xong

Cảnh báo. Không được sử dụng thuộc tính này nếu không có thuộc tính

<script type="module" src="main.js"></script>
<script nomodule src="fallback.js"></script>

4 (i. e. đối với các tập lệnh nội tuyến), trong trường hợp này, nó sẽ không có tác dụng

Thuộc tính

<script>
  alert("Hello World!");
</script>

6 không có tác dụng đối với các tập lệnh mô-đun — chúng trì hoãn theo mặc định

Các tập lệnh có thuộc tính

<script>
  alert("Hello World!");
</script>

6 sẽ thực thi theo thứ tự xuất hiện trong tài liệu

Thuộc tính này cho phép loại bỏ JavaScript chặn trình phân tích cú pháp trong đó trình duyệt sẽ phải tải và đánh giá các tập lệnh trước khi tiếp tục phân tích cú pháp.

<script>
  alert("Hello World!");
</script>

3 có tác dụng tương tự trong trường hợp này

Thực nghiệm

Cung cấp gợi ý về mức độ ưu tiên tương đối để sử dụng khi tìm nạp tập lệnh bên ngoài. Giá trị được phép

<script type="module" src="main.js"></script>
<script nomodule src="fallback.js"></script>

9

Báo hiệu tìm nạp có mức độ ưu tiên cao so với các tập lệnh bên ngoài khác

import { name as squareName, draw } from "./shapes/square.js";
import { name as circleName } from "https://example.com/shapes/circle.js";

0

Báo hiệu tìm nạp có mức độ ưu tiên thấp so với các tập lệnh bên ngoài khác

import { name as squareName, draw } from "./shapes/square.js";
import { name as circleName } from "https://example.com/shapes/circle.js";

1

Vỡ nợ. Tín hiệu tự động xác định mức độ ưu tiên tìm nạp so với các tập lệnh bên ngoài khác

Thuộc tính này chứa siêu dữ liệu nội tuyến mà tác nhân người dùng có thể sử dụng để xác minh rằng tài nguyên được tìm nạp đã được phân phối mà không bị thao tác ngoài ý muốn. Xem tính toàn vẹn của tài nguyên con

Thuộc tính Boolean này được đặt để chỉ ra rằng tập lệnh không nên được thực thi trong các trình duyệt hỗ trợ mô-đun ES — trên thực tế, thuộc tính này có thể được sử dụng để phân phối tập lệnh dự phòng cho các trình duyệt cũ hơn không hỗ trợ mã JavaScript mô-đun

Một nonce mật mã (số được sử dụng một lần) để cho phép các tập lệnh trong script-src Content-Security-Policy. Máy chủ phải tạo một giá trị nonce duy nhất mỗi khi nó truyền một chính sách. Điều quan trọng là cung cấp một nonce không thể đoán được vì việc bỏ qua chính sách của tài nguyên là chuyện nhỏ

Cho biết liên kết giới thiệu nào sẽ gửi khi tìm nạp tập lệnh hoặc tài nguyên do tập lệnh tìm nạp

import { name as squareName, draw } from "./shapes/square.js";
import { name as circleName } from "https://example.com/shapes/circle.js";

6. Tiêu đề

import { name as squareName, draw } from "./shapes/square.js";
import { name as circleName } from "https://example.com/shapes/circle.js";

7 sẽ không được gửi

import { name as squareName, draw } from "./shapes/square.js";
import { name as circleName } from "https://example.com/shapes/circle.js";

8. Tiêu đề

import { name as squareName, draw } from "./shapes/square.js";
import { name as circleName } from "https://example.com/shapes/circle.js";

7 sẽ không được gửi đến nguồn gốc nếu không có TLS (HTTPS)

<script type="importmap">
  {
    "imports": {
      "square": "./shapes/square.js",
      "circle": "https://example.com/shapes/circle.js"
    }
  }
</script>

0. Người giới thiệu đã gửi sẽ được giới hạn ở nguồn gốc của trang giới thiệu. sơ đồ, máy chủ và cổng của nó

```
<script type="importmap">
  {
    "imports": {
      "square": "./shapes/square.js",
      "circle": "https://example.com/shapes/circle.js"
    }
  }
</script>
```
1. Liên kết giới thiệu được gửi đến các nguồn gốc khác sẽ được giới hạn ở lược đồ, máy chủ lưu trữ và cổng. Điều hướng trên cùng một gốc sẽ vẫn bao gồm đường dẫn

<script type="importmap">
  {
    "imports": {
      "square": "./shapes/square.js",
      "circle": "https://example.com/shapes/circle.js"
    }
  }
</script>

2. Một liên kết giới thiệu sẽ được gửi cho cùng một nguồn gốc, nhưng các yêu cầu có nhiều nguồn gốc sẽ không chứa thông tin liên kết giới thiệu

```
<script type="importmap">
  {
    "imports": {
      "square": "./shapes/square.js",
      "circle": "https://example.com/shapes/circle.js"
    }
  }
</script>
```
3. Chỉ gửi nguồn gốc của tài liệu dưới dạng liên kết giới thiệu khi mức bảo mật giao thức không thay đổi (HTTPS→HTTPS), nhưng không gửi nó tới đích kém an toàn hơn (HTTPS→HTTP)
```
<script type="importmap">
  {
    "imports": {
      "square": "./shapes/square.js",
      "circle": "https://example.com/shapes/circle.js"
    }
  }
</script>
```
4 (mặc định). Gửi một URL đầy đủ khi thực hiện một yêu cầu có cùng nguồn gốc, chỉ gửi nguồn gốc khi mức độ bảo mật của giao thức không thay đổi (HTTPS→HTTPS) và không gửi tiêu đề tới đích kém an toàn hơn (HTTPS→HTTP)
```
<script type="importmap">
  {
    "imports": {
      "square": "./shapes/square.js",
      "circle": "https://example.com/shapes/circle.js"
    }
  }
</script>
```
5. Người giới thiệu sẽ bao gồm nguồn gốc và đường dẫn (chứ không phải đoạn, mật khẩu hoặc tên người dùng). Giá trị này không an toàn vì nó làm rò rỉ nguồn gốc và đường dẫn từ tài nguyên được bảo vệ bằng TLS đến nguồn gốc không an toàn

Ghi chú. Giá trị chuỗi trống (

<script type="importmap">
  {
    "imports": {
      "square": "./shapes/square.js",
      "circle": "https://example.com/shapes/circle.js"
    }
  }
</script>

6) vừa là giá trị mặc định vừa là giá trị dự phòng nếu không hỗ trợ

import { name as squareName, draw } from "./shapes/square.js";
import { name as circleName } from "https://example.com/shapes/circle.js";

5. Nếu

import { name as squareName, draw } from "./shapes/square.js";
import { name as circleName } from "https://example.com/shapes/circle.js";

5 không được chỉ định rõ ràng trên phần tử <script>, nó sẽ áp dụng chính sách giới thiệu cấp cao hơn, tôi. e. một bộ trên toàn bộ tài liệu hoặc miền. Nếu không có chính sách cấp cao hơn, thì chuỗi trống được coi là tương đương với

<script type="importmap">
  {
    "imports": {
      "square": "./shapes/square.js",
      "circle": "https://example.com/shapes/circle.js"
    }
  }
</script>

4

Thuộc tính này chỉ định URI của tập lệnh bên ngoài;

import { name as squareName, draw } from "square";
import { name as circleName } from "circle";

2

Thuộc tính này cho biết loại tập lệnh được đại diện. Giá trị của thuộc tính này sẽ là một trong những giá trị sau

Thuộc tính không được đặt (mặc định), chuỗi trống hoặc loại MIME JavaScript

Cho biết tập lệnh là "tập lệnh cổ điển", chứa mã JavaScript. Các tác giả được khuyến khích bỏ qua thuộc tính nếu tập lệnh đề cập đến mã JavaScript thay vì chỉ định loại MIME. Các loại MIME JavaScript là

import { name as squareName, draw } from "square";
import { name as circleName } from "circle";

3

Giá trị này khiến mã được coi là mô-đun JavaScript. Việc xử lý nội dung tập lệnh bị hoãn lại. Các thuộc tính

import { name as squareName, draw } from "square";
import { name as circleName } from "circle";

4 và

<script>
  alert("Hello World!");
</script>

6 không có tác dụng. Để biết thông tin về cách sử dụng

import { name as squareName, draw } from "square";
import { name as circleName } from "circle";

3, hãy xem hướng dẫn mô-đun JavaScript của chúng tôi. Không giống như tập lệnh cổ điển, tập lệnh mô-đun yêu cầu sử dụng giao thức CORS để tìm nạp nguồn gốc chéo

import { name as squareName, draw } from "square";
import { name as circleName } from "circle";

7

Giá trị này chỉ ra rằng phần thân của phần tử chứa bản đồ nhập. Bản đồ nhập là một đối tượng JSON mà nhà phát triển có thể sử dụng để kiểm soát cách trình duyệt giải quyết các chỉ định mô-đun khi nhập

Bất kỳ giá trị nào khác

Nội dung được nhúng được coi là một khối dữ liệu và sẽ không được trình duyệt xử lý. Nhà phát triển phải sử dụng loại MIME hợp lệ không phải là loại MIME JavaScript để biểu thị các khối dữ liệu. Tất cả các thuộc tính khác sẽ bị bỏ qua, bao gồm thuộc tính

<script type="module" src="main.js"></script>
<script nomodule src="fallback.js"></script>

4

Thuộc tính này chỉ rõ ràng rằng một số hoạt động nhất định sẽ bị chặn khi tìm nạp tập lệnh. Các hoạt động bị chặn phải là một danh sách các thuộc tính chặn được phân tách bằng dấu cách được liệt kê bên dưới

<!-- Generated by the server -->
<script id="data" type="application/json">
  {
    "userId": 1234,
    "userName": "Maria Cruz",
    "memberSince": "2000-01-01T00:00:00.000Z"
  }
</script>

<!-- Static -->
<script>
  const userInfo = JSON.parse(document.getElementById("data").text);
  console.log("User information: %o", userInfo);
</script>

0. Hiển thị nội dung trên màn hình bị chặn

không dùng nữa

Nếu có, giá trị của nó phải là một kết hợp không phân biệt chữ hoa chữ thường ASCII cho "

<!-- Generated by the server -->
<script id="data" type="application/json">
  {
    "userId": 1234,
    "userName": "Maria Cruz",
    "memberSince": "2000-01-01T00:00:00.000Z"
  }
</script>

<!-- Static -->
<script>
  const userInfo = JSON.parse(document.getElementById("data").text);
  console.log("User information: %o", userInfo);
</script>

2". Không cần chỉ định thuộc tính

import { name as squareName, draw } from "square";
import { name as circleName } from "circle";

4 vì tài liệu phải sử dụng UTF-8 và phần tử

<script>
  alert("Hello World!");
</script>

8 kế thừa mã hóa ký tự của nó từ tài liệu

Không dùng nữa Không chuẩn

Giống như thuộc tính

import { name as squareName, draw } from "square";
import { name as circleName } from "circle";

2, thuộc tính này xác định ngôn ngữ kịch bản được sử dụng. Tuy nhiên, không giống như thuộc tính

import { name as squareName, draw } from "square";
import { name as circleName } from "circle";

2, các giá trị có thể có của thuộc tính này không bao giờ được chuẩn hóa. Thuộc tính

import { name as squareName, draw } from "square";
import { name as circleName } from "circle";

2 nên được sử dụng thay thế

Tập lệnh không có hoặc thuộc tính

<script blocking="render" async src="async-script.js"></script>

1, cũng như tập lệnh nội tuyến không có thuộc tính

<script blocking="render" async src="async-script.js"></script>

1, được tìm nạp và thực thi ngay lập tức, trước khi trình duyệt tiếp tục phân tích cú pháp trang

Tập lệnh phải được cung cấp với loại MIME

<script>
  alert("Hello World!");
</script>

0, nhưng các trình duyệt sẽ khoan dung và chỉ chặn chúng nếu tập lệnh được cung cấp với loại hình ảnh (

<script blocking="render" async src="async-script.js"></script>

4), loại video (

<script blocking="render" async src="async-script.js"></script>

5), loại âm thanh (

<script blocking="render" async src="async-script.js"></script>

6) hoặc

<script blocking="render" async src="async-script.js"></script>

7. Nếu tập lệnh bị chặn, một sự kiện

<script blocking="render" async src="async-script.js"></script>

8 sẽ được gửi đến phần tử;

Những ví dụ này cho thấy cách nhập tập lệnh (bên ngoài) bằng cách sử dụng phần tử <script>

<script src="javascript.js"></script>

Và các ví dụ sau đây cho thấy cách đặt tập lệnh (nội tuyến) bên trong phần tử <script>

<script>
  alert("Hello World!");
</script>

Các trình duyệt hỗ trợ giá trị

import { name as squareName, draw } from "square";
import { name as circleName } from "circle";

3 cho thuộc tính sẽ bỏ qua bất kỳ tập lệnh nào có thuộc tính

import { name as squareName, draw } from "./shapes/square.js";
import { name as circleName } from "https://example.com/shapes/circle.js";

3. Điều đó cho phép bạn sử dụng các tập lệnh mô-đun đồng thời cung cấp các tập lệnh dự phòng được đánh dấu

import { name as squareName, draw } from "./shapes/square.js";
import { name as circleName } from "https://example.com/shapes/circle.js";

3 cho các trình duyệt không hỗ trợ

<script type="module" src="main.js"></script>
<script nomodule src="fallback.js"></script>

Khi nhập mô-đun trong tập lệnh, nếu bạn không sử dụng tính năng này, thì mỗi mô-đun phải được nhập bằng cách sử dụng trình xác định mô-đun là URL tuyệt đối hoặc tương đối. Trong ví dụ bên dưới, trình xác định mô-đun đầu tiên (". /hình dạng/hình vuông. js") phân giải tương ứng với URL cơ sở của tài liệu, trong khi URL thứ hai là URL tuyệt đối

import { name as squareName, draw } from "./shapes/square.js";
import { name as circleName } from "https://example.com/shapes/circle.js";

Bản đồ nhập cho phép bạn cung cấp một ánh xạ, nếu phù hợp, có thể thay thế văn bản trong bộ xác định mô-đun. Bản đồ nhập bên dưới xác định các khóa <script>7 và <script>8 có thể được sử dụng làm bí danh cho các bộ xác định mô-đun được hiển thị ở trên

<script type="importmap">
  {
    "imports": {
      "square": "./shapes/square.js",
      "circle": "https://example.com/shapes/circle.js"
    }
  }
</script>

Điều này cho phép chúng tôi nhập các mô-đun bằng cách sử dụng tên trong trình xác định mô-đun (chứ không phải URL tuyệt đối hoặc tương đối)

import { name as squareName, draw } from "square";
import { name as circleName } from "circle";

Để biết thêm ví dụ về những gì bạn có thể làm với bản đồ nhập, hãy xem phần trong hướng dẫn mô-đun JavaScript

Bạn cũng có thể sử dụng phần tử <script> để nhúng dữ liệu vào HTML với kết xuất phía máy chủ bằng cách chỉ định loại MIME không phải JavaScript hợp lệ trong thuộc tính

import { name as squareName, draw } from "square";
import { name as circleName } from "circle";

2

<!-- Generated by the server -->
<script id="data" type="application/json">
  {
    "userId": 1234,
    "userName": "Maria Cruz",
    "memberSince": "2000-01-01T00:00:00.000Z"
  }
</script>

<!-- Static -->
<script>
  const userInfo = JSON.parse(document.getElementById("data").text);
  console.log("User information: %o", userInfo);
</script>

Bạn có thể bao gồm mã thông báo

<!-- Generated by the server -->
<script id="data" type="application/json">
  {
    "userId": 1234,
    "userName": "Maria Cruz",
    "memberSince": "2000-01-01T00:00:00.000Z"
  }
</script>

<!-- Static -->
<script>
  const userInfo = JSON.parse(document.getElementById("data").text);
  console.log("User information: %o", userInfo);
</script>

0 bên trong thuộc tính

import { name as squareName, draw } from "square";
import { name as circleName } from "circle";

9; . Trong ví dụ dưới đây, chúng tôi chặn hiển thị trên tập lệnh không đồng bộ để tập lệnh không chặn phân tích cú pháp nhưng được đảm bảo sẽ được đánh giá trước khi bắt đầu hiển thị