Cấu trúc html

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

JavaScript là ngôn ngữ lập trình hoặc kịch bản cho phép bạn khai thác 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 . 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 nhau 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 trang 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 động 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 chỉ với một vài dòng mã JavaScript. ]

Ba lớp được xây dựng trên các đỉnh của nhau. Vui lòng 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 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 động

const para = document.querySelector['p'];

para.addEventListener['click', updateName];

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

Vui lòng 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 can do more than thế - hãy khám phá những gì chi tiết hơn

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

Ngôn ngữ JavaScript phía máy khách lõi bao gồm một số tính năng thiết lập chương trình biến phổ biến cho phép bạn thực hiện những cô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à "chỗ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ã để trả lờ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
• And more than more

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. Giao diện lập trình ứng dụng [API] cung cấp cho bạn các siêu năng lực bổ sung để sử dụng trong mã JavaScript của bạn

API là các khối xây dựng mã có sẵn cho phép nhà phát triển khai thác 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ự cho việc thiết lập chương trình mà bộ dụng cụ xây dựng nội thất thất bại có sẵn để xây dựng ngôi nhà-sẽ dễ dàng hơn nhiều để lấy các tấm có sẵn và sử dụng chúng lại với nhau để tạo ra một kệ sách hơn là tự mình

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

Trình duyệt API đượ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ụ. đượ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}`;
  }
  

  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] thật là hạn chế, đó 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 chỉ. Đâ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 hoạt hình 2D và 3D. 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 _

  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 tiện ích đ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ừ web máy ảnh của bạn và hiển thị nó trên máy tính

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. You will need to see the check check through through. 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]. 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ừ đâu trên web. Ví dụ. 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 chúng 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 cô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à API OpenStreetMap 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 cấp 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. 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 thứ có sẵn, quá. Tuy nhiên, đừng phấn khích 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 điều 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 tài liệu đối tượng [như đã được cập nhật ở trên]. Lưu ý rằng mã trong các tài liệu web của bạn thường được tải xuống và thực thi theo thứ tự nó xuất hiện trên trang. Có thể xảy ra lỗi nếu JavaScript được tải xuống và chạy trước HTML và CSS mà nó được dự kiến ​​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 xuống tập lệnh

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

Mỗi tab Trình duyệt có thùng riêng để 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 . Đâ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ì Thám hiểm 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 đến trong khóa học này. 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

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

Khi duyệt gặp phải 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 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 chương trình nghệ thuật 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 thay đổ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 lưu ý rằng các đối tượng được tham khảo 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 tôi. Đâ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

Được giải thích như vậy 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 công việc chạy mã lập tức được trả về. Bạn không được chuyển đổi mã thành một định 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ừ đó. giải thích và biên dịch trong bối 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 định dạng khác trước khi chúng được chạy bằng máy tính. Ví dụ. C/C++ được biên dịch thành mã máy sau đó được chạy bằng máy tính. Chương trình được thực hiện từ một định dạng nhị phân phân, được tạo từ mã nguồn chương trình ban đầu

JavaScript is a ngôn ngữ lập trình được giải thích nhẹ nhàng. Trình duyệt web nhận mã JavaScript ở định 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 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 quả; . Tuy nhiên, JavaScript vẫn được coi là một ngôn ngữ được giải thích, vì biên dịch được xử lý tại thời điểm chạy, thay vì trước thời hạn. 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ờ

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 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. mã phía máy chủ và 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 các 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ụ như 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 trang web động của chúng tôi-chủ đề cài đặt 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ủ đề 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 . Mã phía máy chủ tạo 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 giữa hai bối cảnh, nhưng liên quan và cả hai cách tiến gần [phía chủ và phía máy khách] thường hoạt động giống nhau. độ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à tĩnh - nó chỉ hiển thị cùng một nội dung mọi lúc. tĩnh - nó chỉ hiển thị cùng một nội dung mọi lúc

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

JavaScript was apply for your trang HTML by your future as 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}`;
}

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 internal

1. Trước hết, hãy tạo một bản sao bộ 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 ở nơi 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 bao gồm các 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ẻ

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

   72.

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

   7

4. Bây giờ chúng tôi sẽ thêm một số JavaScript bên trong phần tử ___171 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".

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

   2
5. Lưu tệp của bạn và thực hiện trình duyệt mới - 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 coi 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 đúng mọi thứ không. Bạn đã lưu bản sao bộ mã cục bộ của mã bắt đầu dưới định 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}`;
}

const para = document.querySelector['p'];

para.addEventListener['click', updateName];

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

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?

1. Đầu tiên, hãy tạo một tệp mới trong cùng thư mục với tệp mẫu HTML của bạn. Call it is

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

   77 - Bảo đảm 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ử

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

   71 hiện tại của bạn bằng cách sau.

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

   1
3. Party in

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

   77, add command after.

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

   3
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. Điều này thường là một điều tốt cho việc tổ chức mã của bạn và làm cho nó có thể được sử dụng lại trên nhiều tệp HTML. Thêm vào đó, HTML dễ đọc hơn mà không có đoạn kịch bản nào được hoàn thành 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

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ể 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ử

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

const para = document.querySelector['p'];

para.addEventListener['click', updateName];

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

Use addEventListener instead

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. Giăm bô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}`;
}

Điều 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}`;
}

Lưu ý. Please try to edit version

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 kịch bản

Có một số vấn đề liên quan đến việc thực hiện tải tập lệnh 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 xuống 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 xuống và phân tích cú pháp trước HTML mà bạn đang cố gắng

Trong các ví dụ mã hóa trên, trong các ví dụ bên trong và bên ngoài, JavaScript được tải xuống và chạy trong tài liệu đầu tiên, 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 để 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 chương 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 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

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

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

Một giải pháp khắc phục lỗi thời gian 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ẻ

const para = document.querySelector['p'];

para.addEventListener['click', updateName];

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

Async and delay

Thực tế, có hai tính năng hiện đại mà chúng ta có thể sử dụng để loại bỏ vấn đề của lệnh ngăn 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}`;
}

Các tập lệnh được tải xuống 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 về 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à biểu diễn trực tiếp quan trọng 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ừ HTML thông số kỹ thuật, đượ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 of CC

Ví dụ. if you have a command element after

const para = document.querySelector['p'];

para.addEventListener['click', updateName];

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

You can't based on thứ tự, các tập lệnh sẽ được tải vào. run file time

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 xuống 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}`;
}

Trong ví dụ thứ hai, chúng tôi 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}`;
}

To shutdown

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

  15 và

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

  28 cả hai hướng dẫn trình duyệt tải xuống [các] tập tin 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 tải
• Các tập lệnh thuộc tính_______115 sẽ được thi hành ngay khi tải xuống hoàn tất. Điều này chặn trang và không chắc chắn bất kỳ công cụ thứ tự nào có thể thực hiện được
• 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}`;
  }
  

  28 sẽ tải xuống theo thứ tự chúng đang ở và sẽ chỉ thực thi khi mọi thứ đã tải xuống hoàn tất
• Nếu các 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

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

  15
• Nếu các lệnh của bạn cần chờ phân tích cú pháp và phụ thuộc vào các lệnh khác và/hoặc DOM đang được đặt tại chỗ, hãy tải chúng xuống bằng

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

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

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

BẢNG XÁC SUẤ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ý thuyết 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ã hóa 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 một số 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 ví dụ JavaScript của riêng bạn

• tổng quan. First step
• Tiếp theo

In this module -mô-đun