Làm cách nào bạn có thể áp dụng JavaScript cho một trang web

Tại đây, bạn sẽ tìm hiểu việc thêm tính tương tác vào một 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 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ẻ
• Tạo một tệp JavaScript bên ngoài với phần mở rộng .js và sau đó tải nó trong trang thông qua thuộc tính src của các thẻ .

  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

  
  
  
      
      Inlining JavaScript        
  
      
      Click Me
  
  

  1 cho

  Đ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

  
  
  
      
      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]

  Đầu tiên, JavaScript là một chương trình, mã được thực thi để thực hiện một tác vụ như tính toán, ảnh hưởng đồ họa, thao tác menu hoặc một số chức năng khác ngoài khả năng của một trang web tĩnh hoặc tệp đa phương tiện. Bất cứ lúc nào bạn cần người dùng tham gia vào một hoạt động tùy chỉnh, JavaScript sẽ có khả năng đó

  Một hàm hoặc phương thức JavaScript có thể được thực thi ngay khi trang xuất hiện. Ví dụ: giả sử bạn muốn làm phiền bạn bè và gia đình của mình bằng một cửa sổ bật lên phía trước trình duyệt có nội dung "Xin chào. " và yêu cầu họ nhấn nút ổn để xóa cửa sổ. Mã này sẽ được thực thi mỗi khi trang được tải

  JavaScript cũng có thể được thực thi do hành động của người dùng, chẳng hạn như nhấn một nút trên biểu mẫu. Bạn có thể nhớ từ nghiên cứu của chúng tôi về các biểu mẫu rằng có một loại "nút" đầu vào. Đầu vào chung này là những gì được sử dụng để liên kết nút biểu mẫu với JavaScript

  Định dạng của JavaScript

  Một chương trình JavaScript được nhúng vào phần đầu của trang web HTML của bạn giống như cách bạn đã nhúng biểu định kiểu xếp tầng vào phần đầu của tệp HTML của mình

  1. Đầu tiên, ở đâu đó giữa thẻ và bạn cần có các thẻ để xác định khu vực sẽ đặt JavaScript.  
  2. Thứ hai, bạn cần cho trình duyệt của người dùng biết bạn sẽ chèn loại tập lệnh nào. Theo mặc định, các trình duyệt mong đợi JavaScript. Tuy nhiên, cách tốt nhất là luôn chỉ định ngôn ngữ. Điều này được thực hiện bằng cách đặt thuộc tính "ngôn ngữ" trong các thẻ được bao quanh bởi các thẻ nhận xét,. Giống như các biểu định kiểu được nhúng, các thẻ nhận xét ngăn các trình duyệt không hỗ trợ hiển thị mã. Ghi chú. Có một yêu cầu kỳ lạ cần thiết để có được JavaScript để tránh gây ra lỗi cho bạn trên thẻ đóng nhận xét, -->. Bạn phải đặt các ký tự nhận xét JavaScript có dấu gạch chéo kép ở phía trước nó để dòng cuối cùng trông giống như //-->

  Xem hình sau để liên kết các bước trên với mã bạn sẽ tạo

  bài tập 1. Hiển thị văn bản bằng JavaScript

  Trong bài tập này, bạn sẽ sử dụng JavaScript để hiển thị văn bản trên màn hình trình duyệt. Bắt đầu bằng cách tạo một trang web HTML trống bằng tay trong trình soạn thảo văn bản hoặc bằng cách mở một trang mới trong Dreamweaver và chỉnh sửa các thẻ HTML trong cửa sổ xem mã. Giữa các thẻ và, hãy chèn "khối" JavaScript đã được mô tả trước đó. Mã được lặp lại dưới đây để thuận tiện cho bạn

  
  
  
      
      Inlining JavaScript        
  
      
      Click Me
  
  

  4

  Chương trình của bạn sẽ thực hiện lệnh duy nhất

  
  
  
      
      Inlining JavaScript        
  
      
      Click Me
  
  

  5

  Chèn dòng mã này vào một dòng mới giữa các thẻ nhận xét chính xác như được hiển thị ở trên. Ghi chú. Nếu ngắt dòng xảy ra do độ rộng hiển thị của trình duyệt của bạn, hãy xóa chúng. Đặt tất cả mã trên một dòng. Không thêm bất kỳ mã HTML nào vào phần nội dung của tài liệu. Đoạn script trên sẽ tạo văn bản được hiển thị

  Lưu trang của bạn và xem nó trong trình duyệt của bạn. Kết quả sẽ giống như hình dưới đây

  Được rồi, vì vậy hiển thị văn bản không phải là vấn đề lớn. Heck, bạn đã làm điều này với HTML kể từ ngày đầu tiên. Đây chỉ đơn giản là một bài tập giúp bạn quen với việc kết hợp JavaScript vào các trang web của mình

  Vậy mã đã làm gì? . writeln là một hàm ghi dữ liệu giữa dấu ngoặc đơn vào đối tượng tài liệu. Nếu bạn không thích mã hóa, chỉ cần tin tưởng vào thực tế là máy tính "giải mã" mã dưới dạng lệnh để lấy mọi thứ giữa các trích dẫn trong ngoặc đơn và hiển thị nó trên tài liệu

  Ghi chú. Tất cả các lệnh JavaScript phải kết thúc bằng dấu chấm phẩy [;]

  Bài tập 2. Hiển thị văn bản trong cửa sổ "Cảnh báo"

  JavaScript này sẽ hiển thị văn bản, nhưng nó sẽ xuất hiện trong cửa sổ bật lên nhỏ với nút OK. Thay thế hướng dẫn trong ví dụ đầu tiên bằng dòng văn bản. Một lần nữa, nếu chiều rộng trình duyệt của bạn đã chèn ngắt dòng, hãy xóa chúng để toàn bộ hướng dẫn nằm trên một dòng

  
  
  
      
      Inlining JavaScript        
  
      
      Click Me
  
  

  6

  Kết quả [khi tải lại trang] phải là một cửa sổ giống như cửa sổ được hiển thị bên dưới mà không cần phối màu nhiều

  Trong trường hợp này, cửa sổ là một đối tượng, nhưng không giống như đối tượng tài liệu trước đó, cửa sổ đại diện cho toàn bộ cửa sổ trình duyệt. cảnh báo là một chức năng tạo cửa sổ bật lên

  Khi bạn tải tệp này trong trình duyệt của mình, hãy để ý xem trang tự tải trước khi cửa sổ bật lên được hiển thị hay sau khi. Bạn có thể thực hiện việc này bằng cách đặt một số văn bản vào phần nội dung của trang và theo dõi khi nó được hiển thị

  Hy vọng rằng bạn sẽ nhận thấy rằng văn bản xuất hiện sau khi đóng cửa sổ bật lên. Đó là bởi vì trình duyệt thực hiện các hành động trong đầu trước khi tải văn bản có trong phần nội dung của tài liệu HTML

  bài tập 3. Nhận xét trong JavaScript

  Nếu bạn muốn trở thành một lập trình viên, điều quan trọng là bạn phải nhớ sự cần thiết phải nhận xét mã của mình. Trong JavaScript, có hai phương pháp để bình luận mã. Hai phương thức này giống hệt với các phương thức được sử dụng trong C++. họ đang

  Phương pháp 1

  
  
  
      
      Inlining JavaScript        
  
      
      Click Me
  
  

  7

  Phương pháp 2

  
  
  
      
      Inlining JavaScript        
  
      
      Click Me
  
  

  8

  Thêm nhận xét vào JavaScript từ bài tập 2 và chạy nó để xác minh rằng không có thay đổi nào trong hoạt động của mã

  Thực sự có một phương pháp bình luận thứ ba, nhưng nó không được sử dụng ngoại trừ một trường hợp. Thẻ nhận xét mở HTML [

  Làm cách nào mã JavaScript có thể được áp dụng cho một trang web?

  Bạn có thể thêm mã JavaScript vào tài liệu HTML bằng cách sử dụng thẻ HTML chuyên dụng . Thẻ

  3 cách bạn có thể đưa JavaScript vào trang web của mình là gì?

  Có ba cách sau để người dùng có thể thêm JavaScript vào các trang HTML. .

  mã nhúng

  mã nội tuyến

  tệp bên ngoài

  Làm cách nào để áp dụng JavaScript trong HTML?

  Trong HTML, mã JavaScript được chèn giữa các thẻ .

  JavaScript là gì và nó được sử dụng như thế nào trong trang web?

  JavaScript là ngôn ngữ lập trình dựa trên văn bản được sử dụng ở cả phía máy khách và phía máy chủ cho phép bạn tạo các trang web có tính tương tác . Trong đó HTML và CSS là các ngôn ngữ cung cấp cấu trúc và kiểu dáng cho các trang web, thì JavaScript cung cấp cho các trang web các yếu tố tương tác thu hút người dùng.