JavaScript có cần tệp riêng không?

Ở đây, chúng ta sẽ thực sự bắt đầu xem xét một số mã và trong khi làm như vậy, hãy khám phá điều gì thực sự xảy ra khi bạn chạy một số JavaScript trong trang của mình

Hãy tóm tắt ngắn gọn câu chuyện về những gì xảy ra khi bạn tải một trang web trong trình duyệt (lần đầu tiên được nói đến trong bài viết của chúng tôi). Khi bạn tải một trang web trong trình duyệt của mình, bạn đang chạy mã của mình (HTML, CSS và JavaScript) bên trong môi trường thực thi (tab trình duyệt). Đây giống như một nhà máy lấy nguyên liệu thô (mã) và xuất ra sản phẩm (trang web)

Một cách sử dụng JavaScript rất phổ biến là tự động sửa đổi HTML và CSS để cập nhật giao diện người dùng, thông qua API Mô hình Đối tượng Tài liệu (như đã đề cập ở trên). Lưu ý rằng mã trong tài liệu web của bạn thường được tải và thực thi theo thứ tự xuất hiện trên trang. Lỗi có thể xảy ra nếu JavaScript được tải và chạy trước HTML và CSS mà nó dự định sửa đổi. Bạn sẽ tìm hiểu các cách giải quyết vấn đề này ở phần sau của bài viết, trong phần

Mỗi tab trình duyệt có một nhóm riêng để chạy mã trong (các nhóm này được gọi là "môi trường thực thi" theo thuật ngữ kỹ thuật) — điều này có nghĩa là trong hầu hết các trường hợp, mã trong mỗi tab được chạy hoàn toàn riêng biệt và mã trong một tab không thể trực tiếp . Đây là một biện pháp bảo mật tốt — nếu không đúng như vậy, thì những tên cướp biển có thể bắt đầu viết mã để lấy cắp thông tin từ các trang web khác và những thứ tồi tệ tương tự khác

Ghi chú. Có nhiều cách để gửi mã và dữ liệu giữa các trang web/tab khác nhau một cách an toàn, nhưng đây là những kỹ thuật nâng cao mà chúng tôi sẽ không đề cập trong khóa học này

Khi trình duyệt gặp một khối JavaScript, nó thường chạy theo thứ tự, từ trên xuống dưới. Điều này có nghĩa là bạn cần cẩn thận về thứ tự sắp xếp mọi thứ. Ví dụ: hãy quay lại khối JavaScript mà chúng ta đã thấy trong ví dụ đầu tiên

const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  const name = prompt('Enter a new name');
  para.textContent = `Player 1: ${name}`;
}

Ở đây chúng tôi đang chọn một đoạn văn bản (dòng 1), sau đó gắn một trình lắng nghe sự kiện vào đó (dòng 3) để khi đoạn văn được nhấp vào, khối mã

const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  const name = prompt('Enter a new name');
  para.textContent = `Player 1: ${name}`;
}

const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  const name = prompt('Enter a new name');
  para.textContent = `Player 1: ${name}`;
}

const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  const name = prompt('Enter a new name');
  para.textContent = `Player 1: ${name}`;
}

const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  const name = prompt('Enter a new name');
  para.textContent = `Player 1: ${name}`;
}

Bạn có thể nghe các thuật ngữ được giải thích và biên dịch trong ngữ cảnh lập trình. Trong các ngôn ngữ thông dịch, mã được chạy từ trên xuống dưới và kết quả chạy mã được trả về ngay lập tức. Bạn không phải chuyển đổi mã thành một dạng khác trước khi trình duyệt chạy nó. Mã được nhận ở dạng văn bản thân thiện với lập trình viên và được xử lý trực tiếp từ đó

Mặt khác, các ngôn ngữ được biên dịch được chuyển đổi (biên dịch) thành một dạng khác trước khi chúng được máy tính chạy. Ví dụ: C/C++ được biên dịch thành mã máy sau đó được máy tính chạy. Chương trình được thực thi từ định dạng nhị phân, được tạo từ mã nguồn chương trình ban đầu

JavaScript là một ngôn ngữ lập trình thông dịch nhẹ. Trình duyệt web nhận mã JavaScript ở dạng văn bản gốc và chạy tập lệnh từ đó. Từ quan điểm kỹ thuật, hầu hết các trình thông dịch JavaScript hiện đại thực sự sử dụng một kỹ thuật được gọi là biên dịch đúng lúc để cải thiện hiệu suất; . Tuy nhiên, JavaScript vẫn được coi là ngôn ngữ thông dịch, vì quá trình biên dịch được xử lý trong thời gian chạy chứ không phải trước thời hạn

Có những lợi thế cho cả hai loại ngôn ngữ, nhưng chúng tôi sẽ không thảo luận về chúng ngay bây giờ

Bạn cũng có thể nghe thấy thuật ngữ mã phía máy chủ và mã phía máy khách, đặc biệt là trong bối cảnh phát triển web. Mã phía máy khách là mã được chạy trên máy tính của người dùng — khi một trang web được xem, mã phía máy khách của trang được tải xuống, sau đó chạy và được trình duyệt hiển thị. Trong mô-đun này, chúng ta đang nói rõ ràng về JavaScript phía máy khách

Mặt khác, mã phía máy chủ được chạy trên máy chủ, sau đó kết quả của nó được tải xuống và hiển thị trong trình duyệt. Ví dụ về các ngôn ngữ web phía máy chủ phổ biến bao gồm PHP, Python, Ruby, ASP. NET và thậm chí cả JavaScript. JavaScript cũng có thể được sử dụng làm ngôn ngữ phía máy chủ, chẳng hạn như trong Node phổ biến. js — bạn có thể tìm hiểu thêm về JavaScript phía máy chủ trong Trang web động của chúng tôi – Chủ đề lập trình phía máy chủ

Từ động được sử dụng để mô tả cả ngôn ngữ JavaScript phía máy khách và phía máy chủ — nó đề cập đến khả năng cập nhật hiển thị của trang web/ứng dụng để hiển thị những thứ khác nhau trong các trường hợp khác nhau, tạo nội dung mới theo yêu cầu. Mã phía máy chủ tự động tạo nội dung mới trên máy chủ, e. g. lấy dữ liệu từ cơ sở dữ liệu, trong khi JavaScript phía máy khách tự động tạo nội dung mới bên trong trình duyệt trên máy khách, e. g. tạo một bảng HTML mới, điền vào đó dữ liệu được yêu cầu từ máy chủ, sau đó hiển thị bảng trong một trang web được hiển thị cho người dùng. Ý nghĩa hơi khác nhau trong hai bối cảnh, nhưng có liên quan và cả hai cách tiếp cận (phía máy chủ và phía máy khách) thường hoạt động cùng nhau

Một trang web không có nội dung cập nhật động được gọi là trang tĩnh — nó chỉ hiển thị cùng một nội dung mọi lúc

JavaScript được áp dụng cho trang HTML của bạn theo cách tương tự như CSS. Trong khi CSS sử dụng các phần tử

const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  const name = prompt('Enter a new name');
  para.textContent = `Player 1: ${name}`;
}

const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  const name = prompt('Enter a new name');
  para.textContent = `Player 1: ${name}`;
}

const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  const name = prompt('Enter a new name');
  para.textContent = `Player 1: ${name}`;
}

1. Trước hết, hãy tạo một bản sao cục bộ của tệp mẫu apply-javascript của chúng tôi. html. Lưu nó vào một thư mục ở đâu đó hợp lý
2. Mở tệp trong trình duyệt web của bạn và trong trình soạn thảo văn bản của bạn. Bạn sẽ thấy rằng HTML tạo ra một trang web đơn giản chứa một nút có thể nhấp được
3. Tiếp theo, hãy chuyển đến trình soạn thảo văn bản của bạn và thêm đoạn mã sau vào đầu — ngay trước thẻ đóng

   const para = document.querySelector('p');
   
   para.addEventListener('click', updateName);
   
   function updateName() {
     const name = prompt('Enter a new name');
     para.textContent = `Player 1: ${name}`;
   }
   

   4

   <script>
     // JavaScript goes here
   script>
   

4. Bây giờ chúng ta sẽ thêm một số JavaScript bên trong phần tử

   const para = document.querySelector('p');
   
   para.addEventListener('click', updateName);
   
   function updateName() {
     const name = prompt('Enter a new name');
     para.textContent = `Player 1: ${name}`;
   }
   

   3 của chúng ta để làm cho trang hoạt động thú vị hơn — thêm đoạn mã sau ngay bên dưới dòng "// JavaScript go here"

   document.addEventListener('DOMContentLoaded', () => {
     function createParagraph() {
       const para = document.createElement('p');
       para.textContent = 'You clicked the button!';
       document.body.appendChild(para);
     }
   
     const buttons = document.querySelectorAll('button');
   
     for (const button of buttons) {
       button.addEventListener('click', createParagraph);
     }
   });
   

5. Lưu tệp của bạn và làm mới trình duyệt — bây giờ bạn sẽ thấy rằng khi bạn nhấp vào nút, một đoạn mới được tạo và đặt bên dưới

Ghi chú. Nếu ví dụ của bạn có vẻ không hiệu quả, hãy thực hiện lại các bước và kiểm tra xem bạn đã làm đúng chưa. Bạn đã lưu bản sao cục bộ của mã bắt đầu dưới dạng tệp

const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  const name = prompt('Enter a new name');
  para.textContent = `Player 1: ${name}`;
}

Điều này hoạt động rất tốt, nhưng nếu chúng tôi muốn đặt JavaScript của mình vào một tệp bên ngoài thì sao?

1. Đầu tiên, tạo một tệp mới trong cùng thư mục với tệp HTML mẫu của bạn. Gọi nó là

   const para = document.querySelector('p');
   
   para.addEventListener('click', updateName);
   
   function updateName() {
     const name = prompt('Enter a new name');
     para.textContent = `Player 1: ${name}`;
   }
   

   9 - đảm bảo rằng nó có. js, vì đó là cách nó được nhận dạng là JavaScript
2. Thay thế phần tử

   const para = document.querySelector('p');
   
   para.addEventListener('click', updateName);
   
   function updateName() {
     const name = prompt('Enter a new name');
     para.textContent = `Player 1: ${name}`;
   }
   

   3 hiện tại của bạn bằng phần tử sau

   <script src="script.js" defer>script>
   

3. Bên trong

   const para = document.querySelector('p');
   
   para.addEventListener('click', updateName);
   
   function updateName() {
     const name = prompt('Enter a new name');
     para.textContent = `Player 1: ${name}`;
   }
   

   9, thêm đoạn script sau

   function createParagraph() {
     const para = document.createElement('p');
     para.textContent = 'You clicked the button!';
     document.body.appendChild(para);
   }
   
   const buttons = document.querySelectorAll('button');
   
   for (const button of buttons) {
     button.addEventListener('click', createParagraph);
   }
   

4. Lưu và làm mới trình duyệt của bạn, và bạn sẽ thấy điều tương tự. Nó hoạt động giống như vậy, nhưng bây giờ chúng tôi đã có JavaScript của mình trong một tệp bên ngoài. Đây thường là một điều tốt về mặt tổ chức mã của bạn và làm cho nó có thể tái sử dụng trên nhiều tệp HTML. Thêm vào đó, HTML dễ đọc hơn mà không có khối lượng lớn tập lệnh được đổ vào đó

Ghi chú. Bạn có thể xem phiên bản này trên GitHub dưới dạng apply-javascript-external. html và kịch bản. js (cũng xem trực tiếp)

Lưu ý rằng đôi khi bạn sẽ bắt gặp các đoạn mã JavaScript thực tế bên trong HTML. Nó có thể trông giống như thế này

function createParagraph() {
  const para = document.createElement('p');
  para.textContent = 'You clicked the button!';
  document.body.appendChild(para);
}

<button onclick="createParagraph()">Click me!button>

Bạn có thể dùng thử phiên bản demo này của chúng tôi bên dưới

Bản demo này có chức năng hoàn toàn giống như trong hai phần trước, ngoại trừ phần tử

<script>
  // JavaScript goes here
script>

<script>
  // JavaScript goes here
script>

<script>
  // JavaScript goes here
script>

Thay vì đưa JavaScript vào HTML của bạn, hãy sử dụng cấu trúc JavaScript thuần túy. Hàm

<script>
  // JavaScript goes here
script>

<script>
  // JavaScript goes here
script>

p {
  font-family: "helvetica neue", helvetica, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid rgba(0, 0, 200, 0.6);
  background: rgba(0, 0, 200, 0.3);
  color: rgba(0, 0, 200, 0.6);
  box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
  border-radius: 10px;
  padding: 3px 10px;
  display: inline-block;
  cursor: pointer;
}

<script>
  // JavaScript goes here
script>

<script>
  // JavaScript goes here
script>

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ự 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ã 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.

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 sự cố

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

p {
  font-family: "helvetica neue", helvetica, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid rgba(0, 0, 200, 0.6);
  background: rgba(0, 0, 200, 0.3);
  color: rgba(0, 0, 200, 0.6);
  box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
  border-radius: 10px;
  padding: 3px 10px;
  display: inline-block;
  cursor: pointer;
}

1

Đây là trình lắng nghe sự kiện, lắng nghe sự kiện

<script>
  // JavaScript goes here
script>

9 của trình duyệt, biểu thị rằng phần nội dung HTML đã được tải và phân tích cú pháp đầy đủ. JavaScript bên trong khối này sẽ không chạy cho đến sau 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 sau trong khóa học)

Trong ví dụ bên ngoài, chúng tôi sử dụng một tính năng JavaScript hiện đại hơn để giải quyết vấn đề, thuộc tính

document.addEventListener('DOMContentLoaded', () => {
  function createParagraph() {
    const para = document.createElement('p');
    para.textContent = 'You clicked the button!';
    document.body.appendChild(para);
  }

  const buttons = document.querySelectorAll('button');

  for (const button of buttons) {
    button.addEventListener('click', createParagraph);
  }
});

0, yêu cầu trình duyệt tiếp tục tải xuống nội dung HTML sau khi đã đạt đến phần tử thẻ

const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  const name = prompt('Enter a new name');
  para.textContent = `Player 1: ${name}`;
}

3

<script src="script.js" defer>script>

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

Ghi chú. Trong trường hợp bên ngoài, chúng tôi không cần sử dụng sự kiện

<script>
  // JavaScript goes here
script>

9 vì thuộc tính

document.addEventListener('DOMContentLoaded', () => {
  function createParagraph() {
    const para = document.createElement('p');
    para.textContent = 'You clicked the button!';
    document.body.appendChild(para);
  }

  const buttons = document.querySelectorAll('button');

  for (const button of buttons) {
    button.addEventListener('click', createParagraph);
  }
});

0 đã giải quyết vấn đề cho chúng tôi. Chúng tôi đã không sử dụng giải pháp

document.addEventListener('DOMContentLoaded', () => {
  function createParagraph() {
    const para = document.createElement('p');
    para.textContent = 'You clicked the button!';
    document.body.appendChild(para);
  }

  const buttons = document.querySelectorAll('button');

  for (const button of buttons) {
    button.addEventListener('click', createParagraph);
  }
});

0 cho ví dụ JavaScript nội bộ vì

document.addEventListener('DOMContentLoaded', () => {
  function createParagraph() {
    const para = document.createElement('p');
    para.textContent = 'You clicked the button!';
    document.body.appendChild(para);
  }

  const buttons = document.querySelectorAll('button');

  for (const button of buttons) {
    button.addEventListener('click', createParagraph);
  }
});

0 chỉ hoạt động đối với tập lệnh bên ngoài

Một giải pháp lỗi thời cho vấn đề này từng là đặt phần tử tập lệnh của bạn ngay dưới cùng của nội dung (e. g. ngay trước thẻ

document.addEventListener('DOMContentLoaded', () => {
  function createParagraph() {
    const para = document.createElement('p');
    para.textContent = 'You clicked the button!';
    document.body.appendChild(para);
  }

  const buttons = document.querySelectorAll('button');

  for (const button of buttons) {
    button.addEventListener('click', createParagraph);
  }
});

6), để thẻ sẽ tải sau khi tất cả 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 DOM HTML đượ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ộ và trì hoãn

Trên thực tế, có hai tính năng hiện đại mà chúng tôi có thể sử dụng để vượt qua vấn đề về tập lệnh chặn -

document.addEventListener('DOMContentLoaded', () => {
  function createParagraph() {
    const para = document.createElement('p');
    para.textContent = 'You clicked the button!';
    document.body.appendChild(para);
  }

  const buttons = document.querySelectorAll('button');

  for (const button of buttons) {
    button.addEventListener('click', createParagraph);
  }
});

7 và

document.addEventListener('DOMContentLoaded', () => {
  function createParagraph() {
    const para = document.createElement('p');
    para.textContent = 'You clicked the button!';
    document.body.appendChild(para);
  }

  const buttons = document.querySelectorAll('button');

  for (const button of buttons) {
    button.addEventListener('click', createParagraph);
  }
});

0 (mà chúng tôi đã thấy ở trên). Hãy xem 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

document.addEventListener('DOMContentLoaded', () => {
  function createParagraph() {
    const para = document.createElement('p');
    para.textContent = 'You clicked the button!';
    document.body.appendChild(para);
  }

  const buttons = document.querySelectorAll('button');

  for (const button of buttons) {
    button.addEventListener('click', createParagraph);
  }
});

7 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, sau 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 đả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

document.addEventListener('DOMContentLoaded', () => {
  function createParagraph() {
    const para = document.createElement('p');
    para.textContent = 'You clicked the button!';
    document.body.appendChild(para);
  }

  const buttons = document.querySelectorAll('button');

  for (const button of buttons) {
    button.addEventListener('click', createParagraph);
  }
});

7 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

document.addEventListener('DOMContentLoaded', () => {
  function createParagraph() {
    const para = document.createElement('p');
    para.textContent = 'You clicked the button!';
    document.body.appendChild(para);
  }

  const buttons = document.querySelectorAll('button');

  for (const button of buttons) {
    button.addEventListener('click', createParagraph);
  }
});

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

Dưới đây là phần trình bày trực quan về các phương thức 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ừ thông số kỹ thuật HTML, được sao chép và cắt thành phiên bản rút gọn, theo CC BY 4. 0 điều khoản cấp phép

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

p {
  font-family: "helvetica neue", helvetica, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid rgba(0, 0, 200, 0.6);
  background: rgba(0, 0, 200, 0.3);
  color: rgba(0, 0, 200, 0.6);
  box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
  border-radius: 10px;
  padding: 3px 10px;
  display: inline-block;
  cursor: pointer;
}

3

Bạn không thể dựa vào thứ tự các tập lệnh sẽ tải vào.

<script src="script.js" defer>script>

2 có thể tải trước hoặc sau

<script src="script.js" defer>script>

3 và

<script src="script.js" defer>script>

4 và nếu trường hợp này xảy ra, bất kỳ chức năng nào trong các tập lệnh đó phụ thuộc vào

<script src="script.js" defer>script>

5 sẽ tạo ra lỗi vì

<script src="script.js" defer>script>

5 sẽ không được xác định tại thời điểm tập lệnh chạy

document.addEventListener('DOMContentLoaded', () => {
  function createParagraph() {
    const para = document.createElement('p');
    para.textContent = 'You clicked the button!';
    document.body.appendChild(para);
  }

  const buttons = document.querySelectorAll('button');

  for (const button of buttons) {
    button.addEventListener('click', createParagraph);
  }
});

7 nên được sử dụng khi bạn có nhiều tập lệnh nền cần tải và bạn chỉ muốn đưa 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, tệp này sẽ cần khi trò chơi thực sự bắt đầu, nhưng hiện tại bạn chỉ muốn tiếp tục hiển thị phần giới thiệu trò chơi, tiêu đề và tiền sảnh mà không bị chặn bởi quá trình tải tập lệnh

Tập lệnh được tải bằng thuộc tính

document.addEventListener('DOMContentLoaded', () => {
  function createParagraph() {
    const para = document.createElement('p');
    para.textContent = 'You clicked the button!';
    document.body.appendChild(para);
  }

  const buttons = document.querySelectorAll('button');

  for (const button of buttons) {
    button.addEventListener('click', createParagraph);
  }
});

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

p {
  font-family: "helvetica neue", helvetica, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid rgba(0, 0, 200, 0.6);
  background: rgba(0, 0, 200, 0.3);
  color: rgba(0, 0, 200, 0.6);
  box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
  border-radius: 10px;
  padding: 3px 10px;
  display: inline-block;
  cursor: pointer;
}

4

Trong ví dụ thứ hai, chúng ta có thể chắc chắn rằng

<script src="script.js" defer>script>

2 sẽ tải trước

<script src="script.js" defer>script>

3 và

<script src="script.js" defer>script>

4 và

<script src="script.js" defer>script>

3 sẽ tải trước

<script src="script.js" defer>script>

4. Chúng sẽ không chạy cho đến khi nội dung trang được tải xong, điều này rất hữu ích nếu tập lệnh của bạn phụ thuộc vào DOM đang hoạt động (e. g. họ sửa đổi một trong nhiều yếu tố trên trang)

Để tóm tắt

• document.addEventListener('DOMContentLoaded', () => {
    function createParagraph() {
      const para = document.createElement('p');
      para.textContent = 'You clicked the button!';
      document.body.appendChild(para);
    }
  
    const buttons = document.querySelectorAll('button');
  
    for (const button of buttons) {
      button.addEventListener('click', createParagraph);
    }
  });
  

  7 và

  document.addEventListener('DOMContentLoaded', () => {
    function createParagraph() {
      const para = document.createElement('p');
      para.textContent = 'You clicked the button!';
      document.body.appendChild(para);
    }
  
    const buttons = document.querySelectorAll('button');
  
    for (const button of buttons) {
      button.addEventListener('click', createParagraph);
    }
  });
  

  0 đề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
• tập lệnh có thuộc tính

  document.addEventListener('DOMContentLoaded', () => {
    function createParagraph() {
      const para = document.createElement('p');
      para.textContent = 'You clicked the button!';
      document.body.appendChild(para);
    }
  
    const buttons = document.querySelectorAll('button');
  
    for (const button of buttons) {
      button.addEventListener('click', createParagraph);
    }
  });
  

  7 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

  document.addEventListener('DOMContentLoaded', () => {
    function createParagraph() {
      const para = document.createElement('p');
      para.textContent = 'You clicked the button!';
      document.body.appendChild(para);
    }
  
    const buttons = document.querySelectorAll('button');
  
    for (const button of buttons) {
      button.addEventListener('click', createParagraph);
    }
  });
  

  0 sẽ tải theo thứ tự và sẽ chỉ thực thi sau khi mọi thứ tải xong
• Nếu 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ần phụ thuộc nào, thì hãy sử dụng

  document.addEventListener('DOMContentLoaded', () => {
    function createParagraph() {
      const para = document.createElement('p');
      para.textContent = 'You clicked the button!';
      document.body.appendChild(para);
    }
  
    const buttons = document.querySelectorAll('button');
  
    for (const button of buttons) {
      button.addEventListener('click', createParagraph);
    }
  });
  

  7
• Nếu tập lệnh của bạn cần chờ 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ó sẵn, hãy tải chúng bằng cách sử dụng

  document.addEventListener('DOMContentLoaded', () => {
    function createParagraph() {
      const para = document.createElement('p');
      para.textContent = 'You clicked the button!';
      document.body.appendChild(para);
    }
  
    const buttons = document.querySelectorAll('button');
  
    for (const button of buttons) {
      button.addEventListener('click', createParagraph);
    }
  });
  

  0 và đặt các phần tử

  const para = document.querySelector('p');
  
  para.addEventListener('click', updateName);
  
  function updateName() {
    const name = prompt('Enter a new name');
    para.textContent = `Player 1: ${name}`;
  }
  

  3 tương ứng của chúng theo thứ tự bạn muốn trình duyệt thực thi chúng

Như với HTML và CSS, bạn có thể viết nhận xét vào mã JavaScript của mình. Mã này sẽ bị trình duyệt bỏ qua và tồn tại để cung cấp hướng dẫn cho các nhà phát triển đồng nghiệp của bạn về cách thức hoạt động của mã (và bạn, nếu bạn quay lại mã của mình sau . Nhận xét rất hữu ích và bạn nên sử dụng chúng thường xuyên, đặc biệt đối với các ứng dụng lớn hơn. Có hai loại

• Chú thích một dòng được viết sau dấu gạch chéo kép (//), e. g

  p {
    font-family: "helvetica neue", helvetica, sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    border: 2px solid rgba(0, 0, 200, 0.6);
    background: rgba(0, 0, 200, 0.3);
    color: rgba(0, 0, 200, 0.6);
    box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
    border-radius: 10px;
    padding: 3px 10px;
    display: inline-block;
    cursor: pointer;
  }
  

  5

• Một chú thích nhiều dòng được viết giữa các chuỗi /* và */, e. g

  p {
    font-family: "helvetica neue", helvetica, sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    border: 2px solid rgba(0, 0, 200, 0.6);
    background: rgba(0, 0, 200, 0.3);
    color: rgba(0, 0, 200, 0.6);
    box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
    border-radius: 10px;
    padding: 3px 10px;
    display: inline-block;
    cursor: pointer;
  }
  

  6

Vì vậy, ví dụ: chúng tôi có thể chú thích JavaScript của bản trình diễn cuối cùng của mình bằng các nhận xét như vậy

p {
  font-family: "helvetica neue", helvetica, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid rgba(0, 0, 200, 0.6);
  background: rgba(0, 0, 200, 0.3);
  color: rgba(0, 0, 200, 0.6);
  box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
  border-radius: 10px;
  padding: 3px 10px;
  display: inline-block;
  cursor: pointer;
}

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ạn bắt đầu làm quen với lý do tại sao bạn sử dụng JavaScript và bạn có thể làm những việc gì với nó. Trong quá trình thực hiện, 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

JavaScript có vẻ hơi khó khăn ngay bây giờ, nhưng đừng lo lắng — trong khóa học này, chúng tôi sẽ hướng dẫn bạn về nó theo các bước đơn giản sẽ có ý nghĩa trong tương lai. Trong bài viết tiếp theo, chúng tôi sẽ đi sâu vào thực tế, giúp bạn bắt tay vào xây dựng các ví dụ JavaScript của riêng bạn