Hướng Dẫn Chèn Javascript Vào Trang Html

Thảo luận trong 'Mã Nguồn' bắt đầu bởi Pussy, Thg 2 15, 2017.

  1. Pussy

    Pussy New Member

    Tham gia ngày:
    Thg 3 21, 2016
    Bài viết:
    866
    Xem: 545
    Nếu bạn cảm thấy hay, hãy chia sẻ để ủng hộ tác giả, xin cám ơn
    Có 3 cách chèn Javascript vào HTML:

    Cách 1: Nhúng trực tiếp trong trang HTML hoặc khai báo trong thành phần ‹head›‹/head› - Heading Embed Nhúng trực tiếp các đoạn mã vào trang HTML.

    Xem ví dụ:

    [​IMG]

    Trong đó:‹script language="javascript"› là khai báo ngôn ngữ scripting đang dùng. Thẻ này và khai báo này là bắt buộc trong trường hợp bạn sử dụng nhiều Scripting language trên cùng một trang. Phần khai báo: type="text/javascript" có thể có hoặc không, tùy theo ứng dụng đoạn codes này vào mục đích nào cho trang HTML(như trong trường hợp này là cho Text). Khai báo: ‹!-- dùng để che giấu script với các trình duyệt không hỗ trợ Javascript. Tuy vậy hầu hết các Trình duyệt mới đều hỗ trợ Jvascript để đáp ứng nhu cầu của Web. Và kế đến là các codes để chạy đoạn mã Javascript, trong ví dụ này là document.write("Hello, World!!!");, là một phương pháp viết text ra trình duyệt của Javascript. Khai báo: //--› để đóng khóa mở ‹!--. Trong trường hợp bạn không muốn che giấu Javascript thì bạn có thể bỏ hai khóa này.--›

    Cuối cùng, để đóng đoạn mã, chúng ta dùng thẻ đóng: ‹/script›

    Một các nhúng khác là đặt trong thành phần ‹head›‹/head›, như ví dụ dưới đây:

    Xem ví dụ 2:

    [​IMG]
    Đoạn Codes trên đây dùng để chận phím bên phải. Khi phím này click vào trang Web có chứa đọan mã này thì trình duyệt hiển thị cảnh báo "No DownLoad Please".

    Cách 2: Call an external file- Gọi một file từ ngòai.

    Giả sử bạn có một tập tin Javascript dài và phức tạp và File này cần đặt trong tất cả các trang HTML hoặc ASP. Nếu như trang nào bạn cũng phải chèn đoạn mã như phương pháp 1 thì mất nhiều thời gian và phải kiểm tra đoạn codes. Để giảm kích thước của trang Web và đở tốn thời gian, Javascript cho chúng ta 1 phương pháp chèn đoạn mã Javascript bằng cách gọi từ ngoài vào. Muốn gọi tập tin Javascript, trước hết tập tin đó phải có phần mở rộng là .js. Và trong tập tin này không được chứa thẻ mở và đóng ‹script›‹/script›

    Xem ví dụ:

    Ví dụ bạn có tập tin tooltip.js và muốn tập tin này được chèn vào các trang Web, thì trong mỗi trang Web bạn dùng đoạn Codes này ở phần ‹head›‹/head› hoặc tại vị trí nơi bạn muốn trang Web tương tác với mã HTML như sau:

    [​IMG]
    Trong đó tập tin tooltip.js là tập tin được lưu với phần mở rộng .js. Trong tập tin này chứa dòng code sẽ là các đoạn code và các hàm điều khiển tooltip. Khi đó tại vị trí cần hiển thị tooltip, bạn chỉ việc gọi các Function thông qua các Event handler. Ngoài ra các đoạn mã Javascript hợp lệ Form cũng dùng phương pháp này, nhưng với điều kiện các tham chiếu đến các vùng trong Form phải cùng tên với các khai báo trong hàm Hợp Lệ Form. Chúng ta sẽ đề cập đến phương pháp tham chiếu đối tượng và thuộc tính trong các bài học và ví dụ về Javacript.

    Cách 3: Nhúng trong câu-Inline Implementation

    Ngoài hai phương pháp trên dành cho các đoạn Codes Javascript dài và phức tạp, Javascript cung cấp 1 phương pháp đơn giản dành cho các Event handlers hoặc gọi các đối tượng như Javascript:window.location... Dưới đây là một ví dụ sử dụng Event Handler để thay đổi màu nền của Thẻ Table Data (TD).

    Xem ví dụ:

    [​IMG]
    Trong đó: onMouseOver và onMouseOut là 2 event handlers (tạm dịch là: Lệnh điều khiển 1 sự kiện, bộ quản lý sự kiện) điều khiển chuột. Nghĩa là: Khi chuột đặt lên đường Link(onMouseOver) thì This=đối tượng này, Style=Phong cách của đối tượng này. backgroundColor: đặc tính của đối tương là màu nền của TD thành đỏ, khi chuột rời khỏi Link (OnMouseOut) thì background của TD chuyển sang màu xanh. Và giá trị màu nền mặt nhiên của TD là màu xanh. Chúng ta sẽ đề cập đến lệnh này nhiều hơn. Phương pháp này được dùng khi đọan code ngắn và thực hiện một công việc nhỏ nào đó.
     
    Last edited by a moderator: Thg 8 3, 2017
  2. Đang tải...
Trả lời qua Facebook

Chia sẻ trang này