Việc sử dụng javascript trong tệp html là gì?

Định nghĩa cấp cao

JavaScript là ngôn ngữ viết kịch bản hoặc lập trình cho phép bạn triển khai các tính năng phức tạp trên trang web — mỗi khi trang web làm nhiều việc hơn là chỉ ngồi đó và hiển thị thông tin tĩnh để bạn xem — hiển thị cập nhật nội dung kịp thời, bản đồ tương tác, hoạt hình 2D/ . - bạn có thể đặt cược rằng JavaScript có thể có liên quan. Nó là lớp thứ ba của lớp bánh 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à tạo ý nghĩa cho nội dung trang web của mình, chẳng hạn như xác định đoạn vă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 kiểu dáng mà chúng tôi sử dụng để áp dụng kiểu dáng cho nội dung HTML của mình, chẳng hạn như đặt màu nền và phông chữ cũng như bố trí 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, tạo ảnh động và gần như mọi thứ khác. (Được rồi, không phải tất cả, nhưng thật tuyệt vời với những gì bạn có thể đạt được với một vài dòng mã JavaScript. )

Ba lớp chồng lên nhau độc đáo. 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 HTML để cung cấp cho nó cấu trúc và mục đích

<p>Player 1: Chrisp>

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

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 này của nhãn văn bản để xem điều gì sẽ xảy ra (cũng lưu ý rằng bạn có thể tìm thấy bản trình diễn này trên GitHub — xem mã nguồn hoặc chạy trực tiếp)

JavaScript có thể làm được 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 thực hiện những việc như

• Lưu trữ các giá trị hữu ích bên trong các biến. Trong ví dụ trên, chúng tôi yêu cầu nhập một tên mới sau đó lưu tên đó vào một biến có tên là

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

  8
• Thao tác 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 "Người chơi 1. " và nối nó với biến

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

  8 để tạo nhãn văn bản hoàn chỉnh, e. g. "Người chơi 1. Chris"
• Chạy mã để phản hồi lại các sự kiện nhất định xảy ra trên trang web. Chúng tôi đã sử dụng 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}`;
  }
  

  0 trong ví dụ trên để phát hiện thời điểm 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 dựa trên 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 năng lực để sử dụng trong mã JavaScript của bạn

API là tập hợp các khối xây dựng mã được tạo sẵn 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 được. Họ làm điều tương tự để lập trình mà các bộ đồ nội thất làm sẵn làm cho việc xây dựng nhà - việc lấy các tấm đã cắt sẵn và vặn chúng lại với nhau để làm giá sách sẽ dễ dàng hơn nhiều so với việc bạn tự thiết kế, đi tìm

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 thực hiện những việc phức tạp hữu ích. Ví dụ

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

  1 cho phép bạn thao tác với HTML và CSS, tạo, xóa và thay đổi HTML, tự động áp dụng các kiểu mới cho trang của bạn, v.v. Ví dụ, mỗi khi bạn thấy một cửa sổ bật lên xuất hiện trên một trang hoặc một số nội dung mới được hiển thị (như chúng ta đã thấy ở trên trong bản demo đơn giản của mình), đó là DOM đang 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}`;
  }
  

  2 truy xuất 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ẽ vị trí đó 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}`;
  }
  

  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 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 Thử nghiệm Chrome và mẫu webggl
• 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}`;
  }
  

  5 và

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

  6 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 trong trang web hoặc lấy video từ máy ảnh web của bạn và hiển thị trên máy tính của người khác (hãy thử bản trình diễn Ảnh chụp nhanh đơn giản của chúng tôi

Ghi chú. Nhiều trình diễn ở trên sẽ không hoạt động trong trình duyệt cũ hơn — khi thử nghiệm, bạn nên sử dụng trình duyệt hiện đại như Firefox, Chrome, Edge hoặc Opera để chạy mã của mình trong. 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 (i. e. mã thực mà khách hàng thực sẽ sử dụng)

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ừ một nơi nào đó trên Web. Ví dụ

• 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 trên trang web của mình
• API Google Maps và API OpenStreetMap cho phép bạn nhúng các 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

Ghi chú. Các API này là nâng cao và chúng tôi sẽ không đề cập đến bất kỳ API 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

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

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

Ở đâ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ách CSS hoạt động 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 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ó 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

Thứ tự chạy JavaScript

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 nhấp vào đoạn văn bả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 hoạt động nữa — thay vào đó, bạn sẽ nhận được lỗi được trả về trong bảng điều khiển dành cho 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}`;
}

Ghi chú. Đây là một lỗi rất phổ biến — bạn cần cẩn thận để đảm bảo 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 thực hiện các thao tác với chúng

Phiên dị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 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ờ

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

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ủ

Mã động so với mã tĩnh

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

Làm cách nào để bạn thêm JavaScript vào trang của mình?

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

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 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 của bạn

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

   1

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 mình để 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"

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

   3

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

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

JavaScript bên ngoài

Đ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

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

   9

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 mã 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;
   }
   

   1

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à tập lệnh. js (cũng xem trực tiếp)

Trình xử lý JavaScript nội tuyến

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

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

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

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 trình diễn 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ử

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

Xin vui lòng không làm điều này, tuy nhiên. Việc làm bẩn HTML của bạn bằng JavaScript là một cách làm không tốt và nó không hiệu quả — bạn phải bao gồm thuộc tính

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

para.addEventListener('click', updateName);

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

Thay vào đó, hãy sử dụng addEventListener

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

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

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

Thuộc tính này có thể dài hơn một chút so với thuộc tính

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

para.addEventListener('click', updateName);

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

Ghi chú. Hãy thử chỉnh sửa phiên bản

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

para.addEventListener('click', updateName);

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

Chiến lược tải tập lệnh

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

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

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

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

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

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

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

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 phần thân (e. g. ngay trước thẻ

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

para.addEventListener('click', updateName);

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

không đồng bộ 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 để vượt qua vấn đề về tập lệnh chặn -

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

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

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

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

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

para.addEventListener('click', updateName);

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

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

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

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

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

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

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

para.addEventListener('click', updateName);

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

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

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

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

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

para.addEventListener('click', updateName);

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

Để tóm tắt

• Cả

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

  37 và

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

  30 đề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

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

  37 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

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

  30 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

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

  37
• 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

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

  30 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

Bình luận

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

Ghi chú. Nói chung, nhiều bình luận hơn thường tốt hơn là ít hơn, nhưng bạn nên cẩn thận nếu bạn thấy mình thêm nhiều bình luận để giải thích biến là gì (tên biến của bạn có lẽ nên trực quan hơn) hoặc để giải thích các thao tác rất đơn giản (có thể mã của bạn là

Bản tóm tắt

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