Cách kết nối js với html?

Thông thường, hầu hết mọi người đặt tên cho tệp script Javascript của họ là

    ...


    
Some HTML Content
    

0 hoặc

    ...


    
Some HTML Content
    

2 nhưng bạn có thể đặt tên cho tệp của mình theo bất cứ thứ gì bạn muốn

Quy ước đặt tên ở trên là một thông lệ phổ biến nếu bạn đang phát triển một trang web chỉ có một vài tệp Javascript

Nhưng nếu bạn bắt gặp mã nguồn của một ứng dụng web, thông thường sẽ sử dụng

    ...


    
Some HTML Content
    

3 hoặc

    ...


    
Some HTML Content
    

4 vì chúng đóng vai trò là điểm vào cho các mô-đun nhỏ khác của tệp Javascript

Bước 2. Liên kết tệp Javascript với tài liệu HTML

Chúng tôi sử dụng thẻ

    ...


    
Some HTML Content
    

5 cho công việc này

Thẻ

    ...


    
Some HTML Content
    

5 có thuộc tính

    ...


    
Some HTML Content
    

7 và nó chấp nhận đường dẫn tệp

Giả sử tên của tệp Javascript là

    ...


    
Some HTML Content
    

0 và nó được đặt trong thư mục

    ...


    
Some HTML Content
    

9 của dự án của bạn

.
└── project-folder/
    ├── index.html
    └── js/
        └── main.js

Đây là cách bạn liên kết tệp

    ...


    
Some HTML Content
    

0 với tệp

.
└── project-folder/
    ├── index.html
    └── main.js

1

    ...


    
Some HTML Content
    

Trong trường hợp này, chúng tôi đang cung cấp một đường dẫn tương đối của tệp

    ...


    
Some HTML Content
    

0 tới tài liệu HTML

Phần tiếp theo là giải thích chi tiết về đường dẫn tệp tương đối và đường dẫn tệp tuyệt đối và khi nào nên sử dụng cái gì

💡

Nếu bạn đã thực hiện bất kỳ số lượng mã hóa CSS nào, bạn có thể có một chút kinh nghiệm làm việc với đường dẫn tệp khi bao gồm các tệp

.
└── project-folder/
    ├── index.html
    └── main.js

3 của bạn với thẻ

.
└── project-folder/
    ├── index.html
    └── main.js

4

Các quy tắc tương tự cũng áp dụng cho các tệp .js có thẻ

.
└── project-folder/
    ├── index.html
    └── main.js

6

Vì vậy, nếu bạn đã giỏi với chúng, hãy chuyển sang bài học tiếp theo trực tiếp

Giới thiệu đường dẫn tệp tương đối

Hãy nói rằng đây là cấu trúc tệp của dự án HTML của bạn

.
└── project-folder/
    ├── index.html
    └── main.js

Nếu bạn để ý, cả tệp

.
└── project-folder/
    ├── index.html
    └── main.js

1 và tệp

    ...


    
Some HTML Content
    

0 đều nằm ở cùng một cấp trong hệ thống tệp

Nói cách khác, có những tập tin nằm cạnh nhau trên hệ thống tập tin

Bây giờ, giả sử chúng ta phải liên kết

    ...


    
Some HTML Content
    

0 với

.
└── project-folder/
    ├── index.html
    └── main.js

1 bằng đường dẫn tương đối

Nhận một đường dẫn tương đối chỉ đơn giản là hỏi câu hỏi sau

Câu hỏi. Tệp

    ...


    
Some HTML Content
    

0 nằm ở đâu so với tệp

.
└── project-folder/
    ├── index.html
    └── main.js

1?

Câu trả lời. Nó nằm ở cùng cấp độ

Tuyệt vời. Nếu các tệp được đặt ở cùng cấp độ, thì chúng ta chỉ cần sử dụng tên tệp cho đường dẫn tương đối

Bây giờ với đường dẫn tương đối ở trên, bạn đang nói với trình duyệt rằng "Này. bạn có thể tìm thấy tệp

    ...


    
Some HTML Content
    

0 trong cùng thư mục với tệp

.
└── project-folder/
    ├── index.html
    └── main.js

1"

Dù sao đi nữa, hãy nhanh chóng nói về một tình huống phổ biến hơn để hiểu rõ hơn về các đường dẫn tương đối

.
└── project-folder/
    ├── index.html
    └── js/
        └── main.js

Lần này, tệp

    ...


    
Some HTML Content
    

0 nằm trong thư mục

    ...


    
Some HTML Content
    

9

Vì vậy, trước tiên, chúng ta phải truy cập thư mục

    ...


    
Some HTML Content
    

9 và sau đó truy cập tệp

    ...


    
Some HTML Content
    

0  bên trong thư mục đó

Và thư mục

    ...


    
Some HTML Content
    

9 nằm ở đâu so với tệp

.
└── project-folder/
    ├── index.html
    └── main.js

1?

Vì vậy, đây là đường dẫn tệp tương đối cho tệp

    ...


    
Some HTML Content
    

0

Đơn giản, phải không?

Giới thiệu đường dẫn tệp tuyệt đối

Trong thế giới trình duyệt web, đường dẫn tệp tuyệt đối là đường dẫn đầy đủ cho tệp liên quan đến giao thức HTTP

Vì vậy, đường dẫn tệp tuyệt đối bắt đầu bằng giao thức HTTP

Ví dụ: giả sử rằng tệp

    ...


    
Some HTML Content
    

0 được lưu trữ trên thư mục nội dung của trang web

.
└── project-folder/
    ├── index.html
    └── js/
        └── main.js

3

Trong trường hợp này, đường dẫn tệp tuyệt đối cho tệp

    ...


    
Some HTML Content
    

0 sẽ như thế này

Bây giờ, điều này giống như

Nếu bạn để ý, đường dẫn tệp ở trên đang bắt đầu bằng dấu gạch chéo về phía trước

.
└── project-folder/
    ├── index.html
    └── js/
        └── main.js

5 thay vì giao thức HTTP

Trong thế giới của các trình duyệt web, dấu gạch chéo về phía trước

.
└── project-folder/
    ├── index.html
    └── js/
        └── main.js

5 giống như tên miền đầy đủ bao gồm cả giao thức HTTP

Vì vậy, hầu hết mọi người sẽ chỉ sử dụng mẫu

.
└── project-folder/
    ├── index.html
    └── js/
        └── main.js

5 thay vì nhập tên miền đầy đủ. Nó dễ dàng hơn nhiều và ít bị lỗi nhất trong một số thiết lập máy chủ

Đường dẫn tệp tương đối vs Đường dẫn tệp tuyệt đối

Các đường dẫn tương đối được khuyến nghị khi chúng tôi đang phát triển một trang web cục bộ

Các đường dẫn tuyệt đối được khuyến nghị khi chúng tôi đang sử dụng máy chủ web để phục vụ các tệp trang web của mình hoặc nếu chúng tôi đang liên kết với một tài nguyên Javascript bên ngoài như jQuery

Giải thích này sẽ rõ ràng hơn khi chúng ta xây dựng dự án AJAX vì các dự án AJAX yêu cầu máy chủ web hoạt động

💡

Hầu hết các bài tập trong khóa học này không cần máy chủ web để hoạt động. Vì vậy, bạn sẽ thấy tôi sử dụng đường dẫn tương đối để liên kết các tệp javascript trong phần lớn khóa học này

Sau khi liên kết tệp, hãy viết mã Javascript bên trong tệp javascript

Và trình duyệt sẽ lo phần còn lại

💡

Quan trọng. Khi viết mã Javascript bên trong tệp Javascript, chúng tôi không bọc mã bên trong thẻ

    ...


    
Some HTML Content
    

5

Trong bài học tiếp theo, chúng ta sẽ nói về lý do tại sao việc đặt các thẻ ở cuối tài liệu HTML lại quan trọng

HTML kết nối với JavaScript như thế nào?

Làm cách nào để chèn js vào HTML?

Làm cách nào để liên kết js với HTML và CSS?

Làm cách nào để gọi tệp js trong HTML?