Vì vậy, bạn biết cách HTML hoạt động và bây giờ bạn biết một chút về JavaScript. Bước tiếp theo là xem xét cách hai người đến với nhau và làm việc hài hòa trên một trang web. Trong đoạn trích từ JavaScript 1.5 bằng ví dụ, các tác giả Adrian và Kathie Kingsley-Hughes cho bạn biết cách JavaScript và HTML kết hợp.
Bài viết này có nguồn gốc từ JavaScript 1.5 bằng ví dụ.
Chương này là từ cuốn sách
Một cuộc họp của thế giới - JavaScript và HTML
Vì vậy, bạn biết cách HTML hoạt động và bây giờ bạn biết một chút về JavaScript. Bước tiếp theo là xem xét cách hai người đến với nhau và làm việc hài hòa trên một trang web.
Bởi vì HTML và JavaScript là các công nghệ hoàn toàn riêng biệt, các quy tắc tồn tại về cách JavaScript có thể được đặt vào HTML của một trang web. Trên thực tế, có một số cách để thêm JavaScript vào một trang web, nhưng để bạn bắt đầu, ban đầu, chúng tôi sẽ tập trung vào phương pháp được sử dụng phổ biến nhất và được cho là linh hoạt nhất. Trong phương thức này, JavaScript được chèn vào một khối tập lệnh vào thẻ.
Hãy xem cách chúng ta có thể làm điều này.
Bộ xương HTML
Trước khi tiếp tục, bạn phải quen thuộc với giải phẫu của một trang HTML. Đây là mã HTML cho web rất cơ bản:
A Simple PageA very simple Web page indeed!
Một phần của trang này bạn cần biết từ quan điểm JavaScript là khối HTML bắt đầu với thẻ mở và đóng cùng. Đây là khối của trang, còn được gọi là tiêu đề của trang web và ở đây bạn sẽ đặt JavaScript của mình.
Tuy nhiên, bạn không thể đặt mã trực tiếp vào. Có một cái gì đó khác bạn phải làm trước!
Khối tập lệnh
Để đặt JavaScript bên trong các thẻ, bạn phải thêm một khối HTML mới vào. Khối này là khối. Mục đích của khối này là nói với trình duyệt rằng bất cứ điều gì được chứa trong các thẻ mở và đóng của nó là một tập lệnh và nó nên xử lý nó như vậy.
Khối này có thể được thêm vào bất cứ nơi nào bên trong khối nhưng thường được thêm vào cuối, trước khi thẻ đóng:
A Simple PageA very simple Web page indeed!
Một lý do mà khối được đặt vào tiêu đề là bằng cách đặt nó ở đây, bạn đảm bảo rằng nó được tải trước bất cứ thứ gì khác, điều này làm giảm đáng kể phạm vi cho các lỗi.
Trước khi bạn có thể thêm JavaScript vào khối, bạn phải làm thêm một vài điều nữa. Lần đầu tiên trong số các tác vụ này là cho trình duyệt biết loại tập lệnh nào được chứa trong các thẻ khối. Điều này là do JavaScript không phải là ngôn ngữ kịch bản web duy nhất bạn có thể sử dụng. Một ngôn ngữ kịch bản được sử dụng rộng rãi khác là VBScript của Microsoft. Vì vậy, để nói với trình duyệt rằng ngôn ngữ bạn đang sử dụng là JavaScript, trước tiên bạn phải thêm thuộc tính ngôn ngữ vào thẻ như sau:
A Simple PageA very simple Web page indeed!
Bạn tuyên bố rằng ngôn ngữ được sử dụng là JavaScript bằng cách gõ JavaScript bên trong các trích dẫn:
A Simple PageA very simple Web page indeed!
GHI CHÚ
Ví dụ, nếu bạn muốn viết một tập lệnh trong VBScript, ngôn ngữ sẽ được đặt thành "VBScript":
Hãy xem hai điểm.
Đầu tiên, trích dẫn. Trong một số trường hợp, bạn có thể nhìn vào một số mã JavaScript và xem ngôn ngữ được khai báo không có trích dẫn được sử dụng để bao quanh từ này. Mọi thứ dường như hoạt động tốt, vậy tại sao phải gõ chúng vào? Chà, một lần nữa, đó là một trong những lần tốt hơn là hoàn toàn chính xác. Mặc dù cả trình duyệt của Internet Explorer và Netscape HaveGator đều hiểu ngôn ngữ có hoặc không có trích dẫn, hình thức thích hợp là sử dụng các trích dẫn, vì vậy đó là lý do tại sao nó được hiển thị như vậy ở đây. Có thể đến thời điểm các trình duyệt yêu cầu HTML được viết chính xác. Bằng cách viết HTML được hình thành tốt ngay bây giờ, bạn đang đảm bảo các kỹ năng của mình là bằng chứng trong tương lai!
Điểm thứ hai là một trong những độ nhạy của trường hợp. Hãy xem những điều sau:
Sự khác biệt là gì? Phải, mỗi người được viết với các hình thức viết hoa khác nhau. Trong suốt cuốn sách này, chúng tôi sẽ sử dụng "JavaScript" nhưng khi tạo các trang web của bạn, cho đến nay, tốt nhất để sử dụng là tất cả các chữ thường. Điều này không chỉ nhanh hơn, nó còn ít dễ bị lỗi chính tả.
Bây giờ một lần nữa, nếu bạn nhìn vào các tập lệnh được viết trên web, đôi khi bạn nhận thấy rằng thuộc tính "ngôn ngữ" bị bỏ qua. Vâng, một lần nữa điều này hoạt động tốt. Lý do đằng sau điều này là, bởi vì JavaScript là ngôn ngữ kịch bản đầu tiên xuất hiện, nó được coi là mặc định. Tuy nhiên, để duy trì các trang web được hình thành đúng cách, tốt nhất là bao gồm nó. Điều này một lần nữa đảm bảo rằng các kỹ năng bạn học được ngày nay là chứng minh trong tương lai.
Thêm vào thuộc tính "ngôn ngữ"
Có nhiều thuộc tính ngôn ngữ hơn là bắt mắt. Mặc dù chỉ đơn giản là JavaScript cũ là mặc định, nhưng khá nhiều phiên bản hoặc hương vị của JavaScript tồn tại. JavaScript 1.0, JavaScript 1.1, JScript, v.v. đều có sẵn. Bạn thực sự có thể sử dụng thuộc tính ngôn ngữ để chỉ định chính xác phiên bản bạn đã viết cho. Phiên bản nào bạn chỉ định thực sự phụ thuộc vào trình duyệt và phiên bản JavaScript mà bạn muốn chạy tập lệnh là. Điều này nghe có vẻ hơi phức tạp, nhưng chúng ta hãy xem một vài ví dụ, sẽ giúp ích.
Nếu bạn sử dụng, bạn đang nói với trình duyệt, đó chỉ là JavaScript và sử dụng công cụ JavaScript của bạn [chương trình thực sự diễn giải JavaScript] để chạy nó. Đây là mặc định. Tuy nhiên, nếu bạn muốn JavaScript chỉ chạy trên Internet Explorer của Microsoft, cách tốt nhất để làm điều này là xác định JavaScript bạn đã viết là JScript, như sau:
Bây giờ, bất kỳ JavaScript nào có trong khối chỉ chạy trong trình duyệt Internet Explorer.
Điều gì sẽ xảy ra nếu bạn muốn nhắm mục tiêu người dùng NetScape Navigator 3.0? Bạn có thể đã biết rằng trình duyệt này có phiên bản 1.1 của JavaScript. Điều này có nghĩa là nếu bạn đã sử dụng các cài đặt ngôn ngữ sau, chỉ NetScape Navigator 3.0 sẽ chạy JavaScript của bạn:
Thận trọng
Hãy nhớ rằng mặc định là ngôn ngữ = "JavaScript". Hãy cẩn thận để không vô tình đặt ngôn ngữ thành một thứ khác bởi vì điều này có thể khiến tập lệnh của bạn không chạy trong các trình duyệt mới, và đôi khi việc phát hiện ra lỗi này có thể khó khăn!
Ẩn javascript khỏi các trình duyệt cũ hơn
Các trình duyệt trước NetScape Navigator 2.0 hoàn toàn không thể chạy JavaScript và nếu chúng bắt gặp JavaScript trong một trang web, nó sẽ khiến chúng tạo ra một số lỗi thực sự xấu xí. Để tránh khả năng các lỗi như vậy, hãy ẩn bất kỳ tập lệnh nào bạn đặt trên trang bằng cách đặt các thẻ nhận xét HTML bên trong khối. Điều này nhanh chóng và đơn giản để thêm, và mặc dù các trình duyệt cũ hơn hiện nay khá hiếm, nhưng chèn các thẻ nhận xét vào mẫu HTML của bạn để chúng xuất hiện trên mỗi trang web có chứa JavaScript vẫn còn đáng giá.
Những thẻ nhận xét rất dễ thêm. Bên trong các thẻ, chèn một cặp thẻ khác,. Tất cả các mã bạn viết đều đi vào giữa các thẻ này và sau đó bị bỏ qua bởi bất kỳ trình duyệt nào không hiểu các thẻ có nghĩa là gì.
GHI CHÚ
Có vẻ lạ khi đặt bất cứ thứ gì bạn muốn trình duyệt sử dụng các thẻ bình luận bên trong vì chúng được sử dụng để ngăn văn bản trên trang được hiển thị. Nhưng thực tế là tất cả các trình duyệt hiểu tập lệnh cũng biết để bỏ qua các thẻ nhận xét này và tiến hành như thể chúng không ở đó.
Để làm cho các thẻ nhận xét rõ ràng hơn, các nhà phát triển thường xuyên đặt một số nhận xét [đôi khi giải trí!] Trong các thẻ nhận xét HTML này nói với những người khác có thể xem mã họ làm gì:
Trang bây giờ trông giống như sau:
A Simple PageA very simple Web page indeed!
GHI CHÚ
Có vẻ lạ khi đặt bất cứ thứ gì bạn muốn trình duyệt sử dụng các thẻ bình luận bên trong vì chúng được sử dụng để ngăn văn bản trên trang được hiển thị. Nhưng thực tế là tất cả các trình duyệt hiểu tập lệnh cũng biết để bỏ qua các thẻ nhận xét này và tiến hành như thể chúng không ở đó.