Hướng dẫn what is javascript page? - trang javascript là gì?

Một định nghĩa cấp cao

JavaScript là ngôn ngữ lập trình hoặc kịch bản cho phép bạn triển khai các tính năng phức tạp trên các trang web - mỗi khi một trang web không chỉ ngồi đó và hiển thị thông tin tĩnh để bạn xem - hiển thị các bản cập nhật nội dung kịp thời, bản đồ tương tác, hoạt hình 2D/ hoạt hình 2D/ Đồ họa 3D, cuộn video tự động, v.v. - bạn có thể đặt cược rằng JavaScript có thể liên quan. Đây là lớp thứ ba của lớp bánh của các công nghệ web tiêu chuẩn, hai trong số đó (HTML và CSS) chúng tôi đã đề cập chi tiết hơn nhiều trong các phần khác của khu vực học tập.

• HTML là ngôn ngữ đánh dấu mà chúng tôi sử dụng để cấu trúc và mang lại ý nghĩa cho nội dung web của chúng tôi, ví dụ như xác định các đoạn, tiêu đề và bảng dữ liệu hoặc nhúng hình ảnh và video vào trang.
• CSS là ngôn ngữ của các quy tắc phong cách mà chúng tôi sử dụng để áp dụng kiểu dáng cho nội dung HTML của chúng tôi, ví dụ như đặt màu nền và phông chữ và đặt nội dung của chúng tôi trong nhiều cột.
• JavaScript là ngôn ngữ kịch bản cho phép bạn tạo nội dung cập nhật động, kiểm soát đa phương tiện, hình ảnh animate và hầu hết mọi thứ khác. (Được rồi, không phải tất cả, nhưng thật đáng kinh ngạc những gì bạn có thể đạt được với một vài dòng mã JavaScript.)

Ba lớp được xây dựng trên đỉnh của nhau. Hãy lấy một nhãn văn bản đơn giản làm ví dụ. Chúng ta có thể đánh dấu nó bằng cách sử dụng HTML để cung cấp cho cấu trúc và mục đích của nó:

Sau đó, chúng tôi có thể thêm một số CSS vào hỗn hợp để làm cho nó trông đẹp:

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à cuối cùng, chúng ta có thể thêm một số JavaScript để thực hiện hành vi động:

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

para.addEventListener('click', updateName);

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

Hãy thử nhấp vào phiên bản cuối cùng của nhãn văn bản để xem điều gì xảy ra (cũng lưu ý rằng bạn có thể tìm thấy bản demo này trên GitHub - xem mã nguồn hoặc chạy trực tiếp)!

JavaScript có thể làm nhiều hơn thế - hãy khám phá những gì chi tiết hơn.

Vậy nó thực sự có thể làm gì?

Ngôn ngữ JavaScript phía máy khách cốt lõi bao gồm một số tính năng lập trình phổ biến cho phép bạn làm những việc như:

• Lưu trữ các giá trị hữu ích bên trong các biến. Ví dụ, trong ví dụ trên, chúng tôi yêu cầu nhập một tên mới, sau đó lưu trữ tên đó trong một biến có tê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}`;
  }
  

  6.
• Hoạt động trên các đoạn văn bản (được gọi là "chuỗi" trong lập trình). Trong ví dụ trên, chúng tôi lấy chuỗi "trình phát 1:" và tham gia vào biến

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

  6 để tạo nhãn văn bản hoàn chỉnh, ví dụ: "Người chơi 1: Chris".
• Đang chạy mã để đáp ứng với một số sự kiện nhất định xảy ra trên một trang web. Chúng tôi đã sử dụng một sự kiện

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

  8 trong ví dụ của chúng tôi ở trên để phát hiện khi nhãn được nhấp và sau đó chạy mã cập nhật nhãn văn bản.
• Và nhiều hơn nữa!

Tuy nhiên, điều thú vị hơn nữa là chức năng được xây dựng trên đầu ngôn ngữ JavaScript phía máy khách. Cái gọi là giao diện lập trình ứng dụng (API) cung cấp cho bạn thêm siêu cường để sử dụng trong mã JavaScript của bạn.Application Programming Interfaces (APIs) provide you with extra superpowers to use in your JavaScript code.

API là các bộ khối xây dựng mã đã sẵn sàng cho phép nhà phát triển triển khai các chương trình khó hoặc không thể thực hiện. Họ làm điều tương tự cho việc lập trình mà bộ dụng cụ đồ nội thất làm sẵn để xây dựng nhà-sẽ dễ dàng hơn nhiều để lấy các tấm sẵn sàng và vặn chúng lại với nhau để tạo ra một kệ sách hơn là tự mình thiết kế, đi và tìm Gỗ chính xác, cắt tất cả các tấm theo kích thước và hình dạng phù hợp, tìm các ốc vít có kích thước chính xác, và sau đó đặt chúng lại với nhau để tạo ra một giá sách.

Họ thường rơi vào hai loại.

API trình duyệt được tích hợp vào trình duyệt web của bạn và có thể hiển thị dữ liệu từ môi trường máy tính xung quanh hoặc làm những điều phức tạp hữu ích. Ví dụ: are built into your web browser, and are able to expose data from the surrounding computer environment, or do useful complex things. For example:

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

  9 cho phép bạn thao tác với HTML và CSS, tạo, xóa và thay đổi HTML, áp dụng linh hoạt các kiểu mới cho trang của bạn, v.v. Bản demo đơn giản của chúng tôi) chẳng hạn, đó là DOM hoạt động.

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

  0 lấy thông tin địa lý. Đây là cách Google Maps có thể tìm thấy vị trí của bạn và vẽ nó trên bản đồ.
• API

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

  1 và

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

  2 cho phép bạn tạo đồ họa 2D và 3D hoạt hình. Mọi người đang làm một số điều tuyệt vời bằng cách sử dụng các công nghệ web này - xem các thử nghiệm Chrome và các mẫu web.
• API âm thanh và video như

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

  3 và

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

  4 cho phép bạn thực hiện những điều thực sự thú vị với đa phương tiện, chẳng hạn như phát âm thanh và video ngay trên trang web hoặc lấy video từ máy ảnh web của bạn và hiển thị nó trên máy tính của người khác (hãy thử bản demo ảnh chụp nhanh đơn giản của chúng tôi để có được ý tưởng).

Lưu ý: Nhiều bản demo ở trên sẽ không hoạt động trong trình duyệt cũ hơn - khi thử nghiệm, nên sử dụng trình duyệt hiện đại như Firefox, Chrome, Edge hoặc Opera để chạy mã của bạn. Bạn sẽ cần xem xét kiểm tra trình duyệt chéo. chi tiết hơn khi bạn tiến gần hơn đến việc cung cấp mã sản xuất (nghĩa là mã thực mà khách hàng thực sẽ sử dụng). Many of the above demos won't work in an older browser — when experimenting, it's a good idea to use a modern browser like Firefox, Chrome, Edge or Opera to run your code in. You will need to consider cross browser testing in more detail when you get closer to delivering production code (i.e. real code that real customers will use).

API của bên thứ ba không được tích hợp vào trình duyệt theo mặc định và bạn thường phải lấy mã và thông tin của họ từ đâu đó trên web. Ví dụ: are not built into the browser by default, and you generally have to grab their code and information from somewhere on the Web. For example:

• API Twitter cho phép bạn thực hiện những việc như hiển thị các tweet mới nhất của bạn trên trang web của bạn.
• API Google Maps và OpenStreetMap API cho phép bạn nhúng bản đồ tùy chỉnh vào trang web của mình và các chức năng khác như vậy.

Lưu ý: Các API này được nâng cao và chúng tôi sẽ không bao gồm bất kỳ AP nào trong mô -đun này. Bạn có thể tìm hiểu thêm về những điều này trong mô-đun API Web phía máy khách của chúng tôi. These APIs are advanced, and we'll not be covering any of these in this module. You can find out much more about these in our Client-side web APIs module.

Có rất nhiều thứ có sẵn, quá! Tuy nhiên, đừng phấn khích hơn nữa. Bạn sẽ không thể xây dựng Facebook, Google Maps hoặc Instagram tiếp theo sau khi nghiên cứu JavaScript trong 24 giờ - có rất nhiều điều cơ bản để trình bày trước tiên. Và đó là lý do tại sao bạn ở đây - chúng ta hãy tiếp tục!

JavaScript đang làm gì trên trang của bạn?

Ở đây chúng tôi 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á những gì thực sự xảy ra khi bạn chạy một số JavaScript trong trang của bạn.

Hãy tóm tắt lại một cách 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 CSS Works). 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). Điều này giống như một nhà máy lấy nguyên liệu thô (mã) và xuất ra một sản phẩm (trang web).

Việc 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 các tài liệu web của bạn thường được tải và thực thi theo thứ tự nó 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ó được dự định sửa đổi. Bạn sẽ tìm hiểu các cách xung quanh điều này sau trong bài viết, trong phần Chiến lược tải tập lệnh.

Bảo mật trình duyệt

Mỗi tab Trình duyệt có thùng riêng cho mã chạy (các thùng 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 ảnh hưởng đến mã trong một tab khác - hoặc trên một trang web khác. Đây là một biện pháp bảo mật tốt - nếu đây không phải là trường hợp, thì Cướp biển có thể bắt đầu viết mã để đánh cắp thông tin từ các trang web khác và những điều xấu khác như vậy.

Lưu ý: 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. There are ways to send code and data between different websites/tabs in a safe manner, but these are advanced techniques that we won't cover in this course.

Đơn đặt hàng chạy JavaScript

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

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 trình nghe sự kiện vào nó (dòng 3) để khi nhấp vào đoạn văn, 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}`;
}

Nếu bạn hoán đổi thứ tự của hai dòng mã đầu tiên, nó sẽ không còn hoạt động nữa - thay vào đó, bạn sẽ nhận được lỗi trong bảng điều khiển nhà phát triển trình duyệ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}`;
}

Lưu ý: Đây là một lỗi rất phổ biến - bạn cần cẩn thận rằng các đối tượng được tham chiếu trong mã của bạn tồn tại trước khi bạn cố gắng làm công cụ cho chúng. This is a very common error — you need to be careful that the objects referenced in your code exist before you try to do stuff to them.

Được giải thích so với mã được biên dịch

Bạn có thể nghe các thuật ngữ được giải thích và biên soạn trong bối cảnh lập trình. Trong các ngôn ngữ được giải thích, mã được chạy từ trên xuống dưới và kết quả của việc chạy mã ngay lập tức được trả về. 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 trong mẫu 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ừ đó.interpreted and compiled in the context of programming. In interpreted languages, the code is run from top to bottom and the result of running the code is immediately returned. You don't have to transform the code into a different form before the browser runs it. The code is received in its programmer-friendly text form and processed directly from that.

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 chạy bởi máy tính. Ví dụ: C/C ++ được biên dịch thành mã máy sau đó được chạy bởi máy tính. Chương trình được thực hiện từ mộ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 được giải thí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 phiên dịch viên JavaScript hiện đại thực sự sử dụng một kỹ thuật gọi là biên dịch đúng lúc để cải thiện hiệu suất; Mã nguồn JavaScript được biên dịch thành định dạng nhị phân nhanh hơn trong khi tập lệnh đang được sử dụng, để nó có thể được chạy càng nhanh càng tốt. Tuy nhiên, JavaScript vẫn được coi là một ngôn ngữ được giải thích, vì việc biên dịch được xử lý tại thời điểm chạy, thay vì trước thời hạn.just-in-time compiling to improve performance; the JavaScript source code gets compiled into a faster, binary format while the script is being used, so that it can be run as quickly as possible. However, JavaScript is still considered an interpreted language, since the compilation is handled at run time, rather than ahead of time.

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

Mã phía máy chủ so với phía máy khách

Bạn cũng có thể nghe thấy mã phía các thuật ngữ 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 trang web được xem, mã phía máy khách của trang được tải xuống, sau đó chạy và hiển thị bởi trình duyệt. Trong mô-đun này, chúng tôi đang nói rõ ràng về JavaScript phía máy khách.server-side and client-side code, especially in the context of web development. Client-side code is code that is run on the user's computer — when a web page is viewed, the page's client-side code is downloaded, then run and displayed by the browser. In this module we are explicitly talking about client-side JavaScript.

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ủ, ví dụ trong môi trường Node.js phổ biến-bạn có thể tìm hiểu thêm về JavaScript phía máy chủ trong các trang web động của chúng tôi-chủ đề lập trình phía máy chủ.

Mã động và mã tĩnh

Từ Dynamic được sử dụng để mô tả cả JavaScript phía máy khách và các ngôn ngữ phía máy chủ-nó đề cập đến khả năng cập nhật màn hình của một trang/ứng dụng web để 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ạo động nội dung mới trên máy chủ, ví dụ: Kéo dữ liệu từ cơ sở dữ liệu, trong khi JavaScript phía máy khách tạo ra nội dung mới bên trong trình duyệt trên máy khách, ví dụ: Tạo một bảng HTML mới, điền nó với dữ liệu được yêu cầu từ máy chủ, sau đó hiển thị bảng trong một trang web hiển thị cho người dùng. Ý nghĩa hơi khác nhau trong hai bối cảnh, nhưng 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.dynamic is used to describe both client-side JavaScript, and server-side languages — it refers to the ability to update the display of a web page/app to show different things in different circumstances, generating new content as required. Server-side code dynamically generates new content on the server, e.g. pulling data from a database, whereas client-side JavaScript dynamically generates new content inside the browser on the client, e.g. creating a new HTML table, filling it with data requested from the server, then displaying the table in a web page shown to the user. The meaning is slightly different in the two contexts, but related, and both approaches (server-side and client-side) usually work together.

Một trang web không có nội dung cập nhật động được gọi là tĩnh - nó chỉ hiển thị cùng một nội dung mọi lúc.static — it just shows the same content all the time.

Làm thế nào để bạn thêm JavaScript vào trang của bạn?

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 yếu tố

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

para.addEventListener('click', updateName);

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

<script>
  // JavaScript goes here
script>

<script>
  // JavaScript goes here
script>

JavaScript nội bộ

1. Trước hết, hãy tạo một bản sao cục bộ của tệp ví dụ của chúng tôi áp dụng-javascript.html. Lưu nó trong 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 một trang web đơn giản chứa nút có thể nhấp.
3. Tiếp theo, hãy truy cập trình soạn thảo văn bản của bạn và thêm thông tin sau trong đầu của bạn - ngay trước khi bạn đóng thẻ

   <script>
     // JavaScript goes here
   script>
   

   2:

   <script>
     // JavaScript goes here
   script>
   

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

   <script>
     // JavaScript goes here
   script>
   

   1 của chúng tôi để làm cho trang làm điều gì đó thú vị hơn - thêm mã sau ngay bên dưới dòng "// JavaScript vào đâ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);
     }
   });
   
   

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.

Lưu ý: Nếu ví dụ của bạn dường như không hoạt động, hãy xem lại các bước và kiểm tra xem bạn có làm mọi thứ đúng không. Bạn đã lưu bản sao cục bộ của mã bắt đầu dưới dạng tệp

<script>
  // JavaScript goes here
script>

<script>
  // JavaScript goes here
script>

<script>
  // JavaScript goes here
script>

<script>
  // JavaScript goes here
script>

<script>
  // JavaScript goes here
script>

<script>
  // JavaScript goes here
script>

JavaScript bên ngoài

Điều này hoạt động tuyệt vời, nhưng nếu chúng ta muốn đưa JavaScript của mình vào một tệp bên ngoài thì sao? Hãy khám phá điều này bây giờ.

1. Đầu tiên, hãy 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à

   <script>
     // JavaScript goes here
   script>
   

   7 - Đảm bảo rằng nó có phần mở rộng tên tệp .js, vì đó là cách nó được công nhận là JavaScript.
2. Thay thế phần tử

   <script>
     // JavaScript goes here
   script>
   

   1 hiện tại của bạn bằng cách sau:

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

3. Bên trong

   <script>
     // JavaScript goes here
   script>
   

   7, thêm tập lệnh 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 nhau, nhưng bây giờ chúng tôi đã có JavaScript trong một tệp bên ngoài. Đây thường là một điều tốt về việc 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ó những đoạn kịch bản khổng lồ được đổ trong đó.

Người xử lý JavaScript nội tuyến

Lưu ý rằng đôi khi bạn sẽ bắt gặp các bit của mã JavaScript thực tế sống 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ể thử phiên bản này của bản demo của chúng tôi dưới đây.

Bản demo này có chức năng chính xác giống như trong hai phần trước, ngoại trừ phần 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);
  }
});

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);
  }
});

Xin đừng làm điều này, tuy nhiên. Thật tệ khi làm ô nhiễm HTML của bạn với JavaScript và nó không hiệu quả - bạn phải bao gồm 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);
  }
});

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);
  }
});

Sử dụng addEventListener thay thế

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

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);
  }
});

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);
  }
});

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

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

Điều này có thể dài hơn một chút so với 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);
  }
});

Lưu ý: Hãy thử chỉnh sửa phiên bả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);
  }
});

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);
  }
});

Chiến lược tải kịch bản

Có một số vấn đề liên quan đến việc khiến các tập lệnh tải vào đúng thời điểm. Không có gì đơ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ô 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 làm điều 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 đầu tài liệu, trước khi phần thân HTML bị 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 để hiểu xung quanh nó.

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

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

para.addEventListener('click', updateName);

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

Đây là một trình nghe sự kiện, lắng nghe sự kiệ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);
  }
});

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

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);
  }
});

<script>
  // JavaScript goes here
script>

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

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

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);
  }
});

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);
  }
});

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);
  }
});

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);
  }
});

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);
  }
});

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);
  }
});

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);
  }
});

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);
  }
});

Một giải pháp lỗi thời cho vấn đề này được sử dụng là đặt phần tử tập lệnh của bạn ngay dưới cùng của cơ thể (ví dụ: ngay trước thẻ

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

Async và trì hoãn

Thực tế, có hai tính năng hiện đại mà chúng ta có thể sử dụng để bỏ qua vấn đề của tập lệnh chặn -

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

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);
  }
});

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

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

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

Các tập lệnh được tải với 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);
  }
});

Dưới đây là biểu diễn trực quan của các phương thức tải tập lệnh khác nhau và điều đó có nghĩa là gì cho 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 giảm, theo các điều khoản cấp phép 4.0 của CC.

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

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 không thể dựa vào thứ tự, các tập lệnh sẽ tải vào. thời gian tập lệnh chạy.

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

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);
  }
});

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

para.addEventListener('click', updateName);

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

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

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);
}

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);
}

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);
}

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);
}

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);
}

Để tóm tắt:

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

  5 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);
    }
  });
  
  

  8 cả hai hướng dẫn trình duyệt tải xuống (các) tập lệnh trong một luồng riêng biệt, trong khi phần còn lại của trang (DOM, v.v.) đang tải xuống, do đó, 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

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

  5 sẽ được thực thi ngay khi 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);
    }
  });
  
  

  8 sẽ tải theo thứ tự chúng đang ở và sẽ chỉ thực thi khi mọi thứ đã hoàn thành tải.
• Nếu các tập lệnh của bạn nên được chạy ngay lập tức và chúng không có bất kỳ sự phụ thuộc nào, thì hãy sử dụng

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

  5.
• Nếu các 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 đặt tại chỗ, hãy tải chúng bằ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);
    }
  });
  
  

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

  <script>
    // JavaScript goes here
  script>
  

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

Bản tóm tắt

Vì vậy, bạn đi, bước đầu tiên của bạn vào thế giới của JavaScript. Chúng tôi đã bắt đầu chỉ với lý thuyết, để bắt đầu làm quen với lý do tại sao bạn sử dụng JavaScript và những điều bạn có thể làm với nó. Trên đường đi, bạn đã thấy 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ẽ đưa bạn qua nó trong các bước đơn giản sẽ có ý nghĩa về phía trước. Trong bài viết tiếp theo, chúng tôi sẽ lao thẳng vào thực tế, khiến bạn nhảy thẳng vào và xây dựng các ví dụ JavaScript của riêng bạn.

• Tổng quan: Các bước đầu tiên
• Tiếp theo

Trong mô -đun này