Cách đưa javascript vào mã html?

Giới thiệu về JavaScript

JavaScript là ngôn ngữ lập trình chủ yếu được sử dụng phía máy khách để làm cho các trang web tương tác. Bạn có thể tạo các trang web tuyệt vời mà không cần JavaScript, nhưng JavaScript mở ra một cấp độ khả năng hoàn toàn mới

Ghi chú. Trong bài viết này, chúng ta sẽ xem xét mã HTML mà bạn cần để JavaScript có hiệu lực. Nếu bạn muốn tự học JavaScript, bạn có thể bắt đầu với bài viết cơ bản về JavaScript của chúng tôi. Nếu bạn đã biết điều gì đó về JavaScript hoặc nếu bạn có nền tảng về các ngôn ngữ lập trình khác, chúng tôi khuyên bạn nên xem trực tiếp Hướng dẫn về JavaScript của chúng tôi

Cách kích hoạt JavaScript từ HTML

Trong trình duyệt, JavaScript không tự làm bất cứ điều gì. Bạn chạy JavaScript từ bên trong các trang web HTML của mình. Để gọi mã JavaScript từ bên trong HTML, bạn cần có phần tử . Có hai cách để sử dụng script, tùy thuộc vào việc bạn đang liên kết với tập lệnh bên ngoài hay nhúng tập lệnh ngay trong trang web của mình

Liên kết một tập lệnh bên ngoài

Thông thường, bạn sẽ viết kịch bản theo cách riêng của họ. tập tin js. Nếu bạn muốn thực hiện một. js từ trang web của bạn, chỉ cần sử dụng với thuộc tính

  window.addEventListener["load", [] => {
    console.log["This function is executed once the page is fully loaded"];
  }];

Viết JavaScript trong HTML

Bạn cũng có thể thêm mã JavaScript giữa các thẻ thay vì cung cấp thuộc tính

  window.addEventListener["load", [] => {
    console.log["This function is executed once the page is fully loaded"];
  }];

  window.addEventListener["load", [] => {
    console.log["This function is executed once the page is fully loaded"];
  }];

Điều đó thuận tiện khi bạn chỉ cần một chút JavaScript, nhưng nếu bạn giữ JavaScript trong các tệp riêng biệt, bạn sẽ thấy dễ dàng hơn

• tập trung vào công việc của bạn
• tự viết HTML
• viết các ứng dụng JavaScript có cấu trúc

Sử dụng tập lệnh dễ tiếp cận

Khả năng truy cập là một vấn đề chính trong bất kỳ sự phát triển phần mềm nào. JavaScript có thể làm cho trang web của bạn dễ truy cập hơn nếu bạn sử dụng nó một cách khôn ngoan hoặc nó có thể trở thành thảm họa nếu bạn sử dụng tập lệnh một cách cẩu thả. Để làm cho JavaScript hoạt động có lợi cho bạn, bạn nên biết về một số phương pháp hay nhất nhất định để thêm JavaScript

Tại đây, bạn sẽ tìm hiểu việc thêm tính tương tác vào trang web bằng JavaScript dễ dàng như thế nào. Tuy nhiên, trước khi chúng tôi bắt đầu, hãy đảm bảo rằng bạn có một số kiến ​​thức về HTML và CSS

Nếu bạn mới bắt đầu trong thế giới phát triển web, hãy bắt đầu học từ đây »

Chà, hãy bắt đầu với ngôn ngữ kịch bản phía máy khách phổ biến nhất

Thêm JavaScript vào các trang web của bạn

Thông thường có ba cách để thêm JavaScript vào trang web

• Nhúng mã JavaScript vào giữa một cặp thẻ

  
    window.addEventListener["load", [] => {
      console.log["This function is executed once the page is fully loaded"];
    }];
  
  

  4
• Tạo một tệp JavaScript bên ngoài với phần mở rộng

  
    window.addEventListener["load", [] => {
      console.log["This function is executed once the page is fully loaded"];
    }];
  
  

  5 và sau đó tải nó trong trang thông qua thuộc tính

  
    window.addEventListener["load", [] => {
      console.log["This function is executed once the page is fully loaded"];
    }];
  
  

  1 của các thẻ

  
    window.addEventListener["load", [] => {
      console.log["This function is executed once the page is fully loaded"];
    }];
  
  

  4.

  
    window.addEventListener["load", [] => {
      console.log["This function is executed once the page is fully loaded"];
    }];
  
  

  4

  Mã JavaScript trong ví dụ trên sẽ chỉ in một tin nhắn văn bản trên trang web. Bạn sẽ tìm hiểu ý nghĩa của từng câu lệnh JavaScript này trong các chương sắp tới

  Ghi chú. Thuộc tính

  
    window.addEventListener["load", [] => {
      console.log["This function is executed once the page is fully loaded"];
    }];
  
  

  9 cho

  
    window.addEventListener["load", [] => {
      console.log["This function is executed once the page is fully loaded"];
    }];
  
  

  4

  Điều này hữu ích nếu bạn muốn có cùng một tập lệnh cho nhiều tài liệu. Nó giúp bạn không phải lặp đi lặp lại cùng một nhiệm vụ và giúp trang web của bạn dễ bảo trì hơn nhiều

  Chà, hãy tạo một tệp JavaScript có tên "xin chào. js" và đặt đoạn mã sau vào đó

  // A function to display a message
  function sayHello[] {
      alert["Hello World!"];
  }
  
  // Call function on click of the button
  document.getElementById["myBtn"]. title = sayHello;

  Bây giờ, bạn có thể gọi tệp JavaScript bên ngoài này trong một trang web bằng cách sử dụng

  
    window.addEventListener["load", [] => {
      console.log["This function is executed once the page is fully loaded"];
    }];
  
  

  4

  
  
  
      
      Inlining JavaScript        
  
      
      Click Me
  
  

  0,

  
  
  
      
      Inlining JavaScript        
  
      
      Click Me
  
  

  1,

  
  
  
      
      Inlining JavaScript        
  
      
      Click Me
  
  

  2,

  
  
  
      
      Inlining JavaScript        
  
      
      Click Me
  
  

  3, v.v.

  Tuy nhiên, bạn nên tránh đặt một lượng lớn mã JavaScript nội tuyến vì nó làm lộn xộn HTML của bạn bằng JavaScript và khiến mã JavaScript của bạn khó bảo trì. Đây là một ví dụ

  
  
  
      
      Inlining JavaScript        
  
      
      Click Me
  
  

  Ví dụ trên sẽ hiển thị cho bạn một thông báo cảnh báo khi nhấp vào phần tử nút

  Mẹo. Bạn phải luôn giữ nguyên nội dung và cấu trúc trang web của mình [tôi. e. HTML] tách biệt với bản trình bày [CSS] và hành vi [JavaScript]

  Tôi có thể nhúng JavaScript vào HTML không?

  Thêm JavaScript vào Tài liệu HTML . Thẻ có thể được đặt trong phần của HTML hoặc trong phần , tùy thuộc vào thời điểm bạn muốn JavaScript tải. You can add JavaScript code in an HTML document by employing the dedicated HTML tag that wraps around JavaScript code. The tag can be placed in the section of your HTML or in the section, depending on when you want the JavaScript to load.

  JavaScript được đưa vào tài liệu HTML như thế nào?

  Thẻ HTML . Phần tử