Định cấu hình html javascript

Cấu hình javascript trên html.

Trong bài viết này mình sẽ nói về việc sử dụng các plugin khi bạn phải làm di làm lại nhiều lần. ta sẽ cấu hình trên html để đỡ tốn công viếc javascript.

  1. Sử dung jquery UI

Bước 1: tải thư viện jquery ui theo đường dẫn sau:

//jqueryui.com/download/

Trang tài liệu của thư viện.

//jqueryui.com/development/

  1. Sử dụng vài thư cái cơ bản trước.

Datepicker:

Viết code như sau:

 

Sau đó chạy thử:

 

Mọi thứ đều tốt cho đến khi bạn cần datepicker này ở nhiều chỗ hơn.

Ví dụ 2: ta sẽ tạo ra 4 datepicker.

 

Vậy khi thêm datepicker ta cần thêm code cho javascript

Tôi sẽ sửa lại code như sau:

 

Tôi sẽ thêm class datepicker vào thẻ input.
Tôi sẽ lấy tất cả các thẻ có class datepicker thêm phần datepicker.
 

Phần config cho từng datepicker thì sao?

          Vậy ta cần biết config của datepicker như nào.

                   Cấu hình như sau:

 

          Các thuộc tính sẽ được tạo thành một đối tượng theo dạng JSON.

Vậy ta nên đệ cấu hình này ở đâu?

          + Nếu để trong code javascript thì mỗi cái datepicker ta phải viết code riêng  -> cái này không cần nói.   

          + Nếu để trong html thì ta phải viết như thế nào?

Ta viết như sau:

 

Ta sẽ dụng các thuộc tính có tiền tố data để lưu cấu hình.

Trong phần html ta chỉnh sửa thêm thuộc tinh có data-

 

Trong ví dụ trên ta có dung dateFormat = “dd-nn-yyy”

Tương tự với các thuộc tính khác ta làm như sau:

 

Khi chạy ta sẽ có kết quả như sau:

 

Home » Web Development » Học JavaScript Cơ Bản

07/11/2021 29399 lượt xem

Nhúng [chèn] JavaScript vào HTML – ảnh minh họa

Tương tự như với CSS, dưới đây mình sẽ lần lượt hướng dẫn bạn 03 cách để nhúng [chèn] JavaScript vào HTML. Tùy trường hợp mà bạn sẽ vận dụng cách tương ứng.

MỤC LỤC NỘI DUNG

  • 1 Cách nhúng [chèn] JavaScript vào HTML
    • 1.1 Cách một, nhúng JavaScript kiểu Internal
    • 1.2 Cách hai, nhúng JavaScript kiểu inline
    • 1.3 Cách ba, nhúng JavaScript kiểu External
    • 1.4 Nhúng kiểu External References
    • 1.5 Nhúng nhiều file kiểu External
    • 1.6 Bài học trước tiếp theo

Cách nhúng [chèn] JavaScript vào HTML

Cách một, nhúng JavaScript kiểu Internal

Nhúng Internal có thể hiểu là chúng ta chèn code JavaScript vào một cụm nào đó trong tập tin HTML. Thông thường thì anh em hay nhóm nó vào trong cặp thẻ và   .

Các bạn thử 02 ví dụ nhúng HTML kiểu Internal dưới đây. Các bạn có thể dán code dưới đây vào một file định dạng .html bằng note pad và mở nó bằng trình duyệt để xem.

  • Nhúng trong cặp thẻ :
    
        Tiêu đề website
         
            alert["Chào mừng bạn đến với Hocban.vn"];
        
    
     
         Nội dung website       
    
  • Nhúng trong cặp thẻ :
    
        Tiêu đề website
    
     
         
            alert["Chào mừng bạn đến với Hocban.vn"];
        
      Nội dung website       
    

Cách hai, nhúng JavaScript kiểu inline

Đối với cách nhúng inline chúng ta có thể chèn ngay vị trí bất kỳ của một dòng code HTML.Trong ví dụ dưới đây mình sẽ tạo 03 vùng chọn tương ứng với 03 thẻ

, trong đó mình chọn thẻ
ở giữa là class .vung-chon-tuy-y , và đặt vào nó một đoạn JavaScript cho nó làm việc.

    
        
            .vung-chon-tuy-y{
            background: #fffaca;
            padding: 20px;
            }
        
    
    
        
Vùng chọn số 1

Chèn JavaScript kiểu Inline, ví dụ hiển thị thời gian hiện tại

Nhấn vào để xem thời gian

Vùng chọn số 1

Các bạn dán code vào file html đã tạo và mở trong trình duyệt web để xem nhé ! Ví dụ này nó sẽ hơi dài so với các ví dụ trên mạng mà mọi người thấy khá nhiều. Tuy nhiên nó sẽ thể hiện được rất rõ việc chèn JavaScript kiểu Inline là như thế nào.

Bạn nào đã theo mình nghịch thử trong 02 serie HTML và CSS tại Hocban.vn thì cái này cũng dễ hình dung thôi. Phần nội dung code các bạn không cần quan tâm, chúng ta sẽ tìm hiểu ý nghĩa của chúng trong các bài sau.

Cách ba, nhúng JavaScript kiểu External

Nếu cách một và cách 02 chúng ta nhúng file JavaScript vào trong văn bản HTML thì cách nhúng External sẽ khác một chút, để nhúng kiểu này đầu tiên các bạn dán code JavaScript vào một file txt và lưu lại với định dạng .JS

Tiếp theo trong thẻ  , để viết JavaScript thì chúng ta viết đường dẫn đến file JavaScript đã lưu sử dụng cú pháp bên dưới. Bạn có thể tạo một thư mục và copy 02 cái file HTML và JS vào trong đó.


Ví dụ ở đây mình tạo một file JavaScript và dán vào nó đoạn code hiển thị lời chào như sau, tiếp theo đặt tên cho nó là ten-file-javascript, để lưu được file định dạng JS các bạn có thể sử dụng phần mềm Sublime Text.

alert["Chào mừng bạn đến với Hocban.vn !"];

Bây giờ nhúng đường dẫn vào trong tập tin HTML với cấu trúc đã đưa ra ở trên, các bạn có thể dán nó vào trong cặp thẻ hay đều được hết nhé !

    
        Tiêu đề website
    
    
        
        Nội dung website       
    

Các bạn làm được không nhỉ ? Vì làm việc với JavaScript có một số hạn chế với Codepen nên mình không khuyến khích dùng nó cho những bài mở đầu này. Các bạn nên dùng Sublime Text để soạn thảo code và chạy trên trình duyệt web như Chrome.

Nhúng kiểu External References

Nhúng từ một file JavaScript có đường dẫn bất kỳ trên Internet, cách này có tên gọi là: External References. Cú pháp của nó có dạng như sau:

Với cách này bạn có thể upload file JS của mình lên host, copy đường dẫn và thay thế đường dẫn của w3schools trong mẫu ở trên.

Nhúng nhiều file kiểu External

Cái này bạn sử dụng trong trường hợp có nhiều file JS khác nhau, để nhúng vào HTML thì chúng ta sử dụng cấu trúc có dạng như sau:

Đối với cách nhúng External thì chúng ta có thêm 02 kiểu bổ sung là nhúng nhiều file JSnhúng file JS đã upload lên host như trên.

Oke’, như vậy là bài này chúng ta đã tìm hiểu xong một số cách nhúng JavaScript vào HTML rồi đấy, cũng khá là dễ đúng không nào. Bạn nào xem qua, nếu có điều gì thắc mắc hoặc góp ý, hãy để lại bình luận bên dưới nhé !

Bài học trước tiếp theo

  • Bài 02: JavaScript là gì và ứng dụng của JavaScript 
  • Bài 04: Biến và khai báo biến trong Javascript

About The Author

Tịnh Nguyễn

Học Bạn.vn là blog chia sẻ kinh nghiệm, thủ thuật về WordPress  Web Development hướng đến người làm web không chuyên | Chủ yếu là giúp mọi người giải quyết các vấn đề nhỏ khi làm web với WordPress | Tịnh Nguyễn cảm ơn anh chị em đã ỦNG HỘ giúp Hocban.vn có thêm nguồn lực để phát triển.

Chủ Đề