Tìm hiểu cách đưa tệp Javascript bên ngoài vào trang web HTML, lợi thế của việc sử dụng JavaScript bên ngoài, cách đặt tệp Javascript bên ngoài trên CDN

Bạn đang xem: < font style = "vertical-align: inherit;"> cách đưa javascript bên ngoài vào html

Trong hướng dẫn trước, chúng ta đã biết ba cách để chèn JavaScript vào một trang HTML . Bây giờ, chúng ta sẽ tìm hiểu cách đưa tệp JavaScript bên ngoài vào trang HTML .

Mã JavaScript cũng có thể được đưa vào tệp bên ngoài. Tệp bên ngoài này được gọi là tệp nguồn và được tạo với phần mở rộng .js trong ổ đĩa cục bộ hoặc máy chủ web dưới dạng tệp riêng biệt.

Tệp nguồn này chỉ chứa các câu lệnh JavaScript và không chứa HTML & lt; script & gt; … & Lt; / script & gt; các thẻ. Tuy nhiên, & lt; script & gt; . . . & lt; / script & gt; cặp thẻ được đặt bên trong trang web HTML gọi tệp nguồn.

Trình duyệt web tự động đọc mã tập lệnh được viết trong tệp .js và coi mã như thể nó được viết giữa khi mở & lt; script & gt; gắn thẻ và đóng & lt; / script & gt; .

Tại sao chúng ta cần tạo Tệp JavaScript bên ngoài?

Không có quy tắc bắt buộc nào để tạo tệp .js trong máy chủ web. Nếu mã JavaScript mà chúng tôi muốn thêm vào trang HTML khá ngắn, thì chúng tôi thường ưu tiên thêm mã JavaScript vào trang HTML.

Nhưng nếu JavaScript quá dài, chúng tôi nên tạo một tệp JavaScript bên ngoài bằng đuôi .js và đặt nó vào tài liệu HTML.

Có một số nguyên nhân khác sau đây để tạo tệp JavaScript bên ngoài như sau:

a ) Để tăng thêm độ rõ ràng cho tệp HTML: Nếu mã JavaScript quá dài và được đưa vào tệp HTML, nó sẽ trông lộn xộn và cũng khó hiểu mã trong tương lai.

< p> Do đó, nếu bạn muốn tài liệu HTML của mình gọn gàng và sạch sẽ, thì bạn nên tạo một tệp JavaScript bên ngoài với phần mở rộng .js bên trong máy chủ web và liên kết nó với một trang web HTML.

b) Để chia sẻ mã JavaScript trên nhiều trang HTML: Nhiều lần, chúng tôi tạo một tập lệnh mà chúng tôi cần chia sẻ trên nhiều trang của trang web. Trong trường hợp này, chúng tôi nên tạo một tệp JavaScript bên ngoài để giúp chia sẻ tệp nguồn chung.

Ví dụ: chúng tôi có thể dễ dàng thêm mã JavaScript bằng cách sử dụng thẻ script cho các menu điều hướng thả xuống hoạt hình, lạ mắt vào một một trang web.

Bây giờ, giả sử chúng ta muốn có các menu điều hướng ưa thích giống nhau trên mọi trang của trang web. Bạn sẽ làm gì?

Nếu bạn nghĩ rằng thêm bản sao và dán mã chương trình JavaScript vào mỗi trang của trang web thì đó là một ý tưởng tồi vì một số lý do.

Đầu tiên, chúng tôi sẽ phải thực hiện rất nhiều thao tác sao chép và dán đi dán lại cùng một đoạn mã. Đặc biệt, khi chúng tôi có một trang web với hàng trăm trang.

Thứ hai, sau một vài năm, giả sử chúng tôi quyết định thay đổi hoặc cải tiến mã JavaScript để làm cho các menu thả xuống hấp dẫn hơn.

Trong trường hợp này, chúng tôi sẽ cần tìm mọi trang web mà chúng tôi đã đặt JavaScript và cập nhật mã. Công việc này sẽ tẻ nhạt và buồn tẻ hơn.

Vì vậy, chúng ta nên phát triển một tệp JavaScript bên ngoài để chúng ta có thể dễ dàng thay đổi mã bất cứ khi nào chúng ta yêu cầu.

Thứ ba, nếu chúng ta đặt mã JavaScript dài trên mỗi trang của trang web thì toàn bộ mã của trang web sẽ dài hơn. Do đó, tải xuống sẽ chậm hơn và mất nhiều thời gian hơn.

c) Để ẩn tệp JavaScript: Thông thường, chúng ta có thể xem mã nguồn HTML của trang web bằng trình duyệt . Các lập trình viên JavaScript dành một khoảng thời gian đáng kể để viết mã JavaScript vào một tệp.

Do đó, họ muốn người khác không thể xem và sửa đổi mã của họ. Nếu chúng tôi đặt mã JavaScript trong tệp nguồn hoặc tệp .js, người xem chỉ có thể nhìn thấy vị trí của tệp nguồn chứ không thể thấy mã của nó.

Do những lý do này, chúng tôi nên sử dụng tệp JavaScript bên ngoài . Tệp nguồn JavaScript bên ngoài là một tệp văn bản đơn giản kết thúc bằng phần mở rộng tệp .js.

Tệp nguồn chỉ chứa mã Javascript và có thể được liên kết với một trang web thông qua thuộc tính src của & lt; script & gt; .

Xem Thêm  Kích thước phông chữ HTML - Cách thay đổi kích thước văn bản bằng kiểu CSS nội tuyến - kích thước phông chữ css nội dòng

Cú pháp bao gồm tệp JavaScript bên ngoài trong trang HTML

Phương pháp thứ ba và là phương pháp phổ biến nhất để đưa JavaScript vào trang HTML là sử dụng thuộc tính src của thẻ script. Cú pháp hoàn chỉnh để xác định tệp JavaScript bên ngoài trong & lt; script & gt; như sau:

 & lt; script src = "javascriptfile_name.js" & gt; & lt; / script & gt;

Ví dụ:
   & lt; script src = "myFirstJavascriptfile.js" & gt; & lt; / script & gt;

Hãy nhớ rằng phần mở rộng của tệp JavaScript bên ngoài phải là .js, cũng như phần mở rộng của tệp HTML phải là .htm hoặc .html. Rõ ràng .js là viết tắt của JavaScript.

Thuộc tính src của & lt; script & gt; thẻ hoạt động giống như thuộc tính src của & lt; img & gt; nhãn. Nó trỏ đến vị trí của tệp nguồn JavaScript.

Hãy lấy một chương trình ví dụ đơn giản trong đó chúng ta sẽ kết nối tệp nguồn JavaScript với một trang web HTML. Chúng tôi có thể chỉ cần kết nối nó bên trong thẻ script bằng cách chỉ ra vị trí của nó trong thuộc tính src.

Hãy xem mã nguồn sau để kết nối tệp nguồn JavaScript với một trang HTML.

< strong> Mã chương trình 1:

 & lt; DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
      & lt; title & gt; Cách thêm Tệp JavaScript bên ngoài vào Trang HTML & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
       & lt; script src = "myScript.js" & gt; & lt; / script & gt; // myScript là tên của tệp JavaScript.
& lt; / body & gt;
& lt; / html & gt;

Tệp JavaScript bên ngoài:

 document.write ("Tôi yêu thích Lập trình JavaScript!"); 

Tạo tệp JavaScript bên ngoài giống với việc tạo tệp HTML hoặc một loại tệp khác. Nếu bạn không biết cách tạo tệp JavaScript bên ngoài trong notepad ++ hoặc mã visual studio, hãy xem các hướng dẫn này.

Ở đây, chúng tôi đã giải thích từng bước để tạo tệp JavaScript bên ngoài trong notepad ++ hoặc sử dụng VS trình soạn thảo mã.

 Đầu ra của mã:
            Tôi thích Lập trình JavaScript!

Trong chương trình ví dụ trước, chúng tôi đã lưu một tệp javascript bên ngoài với .js trong cùng thư mục với mã .html mà nó đang chạy.

Theo mặc định, trình duyệt sẽ tìm kiếm bất kỳ tệp được tham chiếu bên ngoài trong cùng thư mục với tệp .html đang chạy.

Nếu bạn lưu tệp javascript bên ngoài trong một thư mục riêng biệt thì bạn sẽ phải chỉ định đường dẫn đầy đủ của tệp (bao gồm tên ổ đĩa và thư mục) như thế này:

 & lt; head & gt;
      & lt; script src = "C: \ JavascriptFiles \ myScript.js" & gt; & lt; / script & gt;
& lt; / head & gt;

Hãy lấy một chương trình ví dụ khác, nơi chúng ta sẽ kết nối nhiều tệp javascript bên ngoài với một trang web HTML. Các tệp JavaScript sẽ hiển thị ba thông báo trên trình duyệt. Xem mã chương trình bên dưới:

Mã chương trình 2:

 & lt; DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
     & lt; title & gt; Thêm Nhiều Tệp JavaScript Bên ngoài vào Trang HTML & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
     & lt; script src = "myScript.js" & gt; & lt; / script & gt;
& lt; br & gt;
     & lt; script src = "myScript2.js" & gt; & lt; / script & gt;
& lt; br & gt;
     & lt; script src = "myScript3.js" & gt; & lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;

Tệp JavaScript bên ngoài:

 myScript.js: document.write ("Lập trình JavaScript!");
myScript2.js: document.write ("Xin chào JavaScript!");
myScript3.js: document.write ("Thế giới JavaScript!");
 Đầu ra của mã:
        Lập trình JavaScript!
        Xin chào JavaScript!
        Thế giới JavaScript!

Đặt Tệp JavaScript bên ngoài trên Máy chủ Web hoặc CDN dưới dạng Tệp Riêng biệt

Chúng tôi cũng có thể đặt tệp javaScript bên ngoài trên máy chủ web và liên kết đến trang web. Nó giúp giảm độ trễ của trang web và cải thiện thời gian tải trang web.

Ví dụ: nếu bạn đang nhận được nhiều lưu lượng truy cập trên web, hãy đặt tệp JavaScript trong Mạng phân phối nội dung (còn được gọi là Phân phối nội dung Mạng) giúp giảm độ trễ của trang web và cải thiện hiệu suất của trang web.

Để đính kèm tệp JavaScript bên ngoài nằm trên máy chủ web vào trang web, chúng tôi sẽ phải chỉ định URL (Bộ định vị tài nguyên đồng nhất) cho Thuộc tính src của & lt; script & gt; nhãn. Điều này có thể được thực hiện như sau:

 & lt; head & gt;
      & lt; script src = "https://www.scientecheasy.com/myScript.js"></script>
& lt; / head & gt;

URL là một đường dẫn đến tệp nằm trên máy chủ web. Có ba loại đường dẫn:

  • Đường dẫn tuyệt đối
  • Đường dẫn tương đối gốc
  • Đường dẫn liên quan đến tài liệu
  • p> a) Đường dẫn tuyệt đối: Đường dẫn tuyệt đối giống như một địa chỉ bưu điện chứa tất cả thông tin cần thiết cho trình duyệt web để định vị tệp ở bất kỳ đâu trên thế giới. Nó bao gồm http: //, tên máy chủ, thư mục và tên của tệp.

    Ví dụ: http://www.scientecheasy.com/javascript/myScript.js.

    b) Đường dẫn tương đối gốc: Đường dẫn tương đối gốc là địa chỉ nơi tệp được đặt liên quan đến thư mục cấp cao nhất hoặc thư mục gốc của trang web. Nó không bao gồm http: // hoặc tên miền.

    Đường dẫn gốc tương đối bắt đầu bằng dấu / (gạch chéo) cho biết thư mục gốc của trang web. Ví dụ: /javascript/myScript.js chỉ ra rằng tệp myScript.js nằm bên trong một thư mục có tên javascript, chính nó nằm trong thư mục gốc của trang web.

    Một cách dễ dàng để tạo đường dẫn gốc tương đối là trước tiên hãy lấy một đường dẫn tuyệt đối và loại bỏ https: // và tên máy chủ. Ví dụ: https://www.scientecheasy.com/index.html có thể được viết dưới dạng URL tương đối gốc là /index.html.

    Lưu ý: Chúng tôi có thể giữ lại JavaScript các tệp ở bất kỳ đâu bên trong thư mục gốc (hoặc bất kỳ thư mục con nào bên trong thư mục gốc) của trang web. Nhiều nhà phát triển web tạo một thư mục đặc biệt (chẳng hạn như js (nghĩa là JavaScript)) hoặc libs (nghĩa là thư viện)) để giữ tệp JavaScript bên ngoài trong thư mục gốc của trang web.

    c) Đường dẫn liên quan đến tài liệu : Đường dẫn liên quan đến tài liệu là đường dẫn từ trang web đến tệp JavaScript. Nếu chúng tôi có nhiều cấp độ thư mục trên thư mục chính của trang web, chúng tôi sẽ phải sử dụng các đường dẫn khác nhau để trỏ đến cùng một tệp JavaScript.

    Ví dụ: giả sử chúng tôi có một tệp javaScript có tên myScript.js nằm trong một thư mục có tên script trong thư mục chính của trang web. Đường dẫn liên quan của tài liệu đến tệp đó sẽ giống như sau: scripts / myScript.js.

    Nếu các tập lệnh thư mục nằm bên trong một thư mục khác có tên javaS, thì đường dẫn đến cùng một tệp sẽ khác, như sau:. ./scripts/myScript.js.

    The ../ có nghĩa là leo lên khỏi thư mục javaS, trong khi /scripts/myScript.js có nghĩa là chuyển đến thư mục scripts và lấy tệp myScript.js.

    Mẹo quan trọng để sử dụng loại URL tốt nhất

    Dưới đây, có một số mẹo quan trọng về loại URL nên sử dụng. Chúng như sau:

    1. Nếu tệp không được đặt trên cùng một máy chủ với trang web, phải sử dụng một đường dẫn tuyệt đối vì nó chỉ là loại có thể trỏ đến một trang web khác.

    2. Đường dẫn tương đối gốc là tốt nhất cho tệp JavaScript được lưu trữ trên cùng một máy chủ như trang web được lưu trữ. Vì chúng luôn bắt đầu ở thư mục gốc, nên URL của tệp JavaScript sẽ giống nhau cho mọi trang trên trang web, ngay cả khi các trang web nằm trong các thư mục và thư mục con trên trang web.

    3. Đường dẫn liên quan đến tài liệu là tốt nhất để sử dụng khi chúng ta đang sử dụng máy chủ cục bộ trong máy tính của chính mình mà không có sự hỗ trợ của máy chủ web.

    Trước tiên, hãy tạo một tệp JavaScript bên ngoài, liên kết nó với một trang web HTML, sau đó kiểm tra JavaScript trong trình duyệt web chỉ bằng cách mở trang web HTML.

    Lợi thế của việc bao gồm Tệp JavaScript bên ngoài vào Mã JavaScript nội tuyến

    Có một số lợi ích khi sử dụng tệp JavaScript bên ngoài thay thế mã JavaScript nội tuyến . Chúng như sau:

    1. Sử dụng tệp JavaScript bên ngoài giúp giữ cho tệp HTML gọn gàng hơn và ít lộn xộn hơn.

    2. Bao gồm các tệp JavaScript bên ngoài giúp cuộc sống dễ dàng hơn vì chúng tôi có thể sửa đổi mã JavaScript chỉ ở một nơi khi chúng tôi muốn thay đổi điều gì đó hoặc thực hiện sửa lỗi.

    3. Ưu điểm lớn nhất của việc đưa tệp javaScript bên ngoài vào trang web HTML là khả năng tái sử dụng mã.

    4. Vì trình duyệt web lưu vào bộ đệm tất cả các tệp JavaScript được liên kết bên ngoài theo cài đặt cụ thể, do đó, chúng tôi có thể liên kết cùng một tệp .js từ nhiều trang web HTML.

    Trình duyệt chỉ tải tệp xuống một lần để giảm thời gian tải của trang web và cũng làm giảm việc sử dụng băng thông.

    Hy vọng rằng hướng dẫn này đã bao gồm hầu hết tất cả các điểm quan trọng liên quan đến cách đưa tệp JavaScript bên ngoài vào trang HTML. Tôi hy vọng rằng bạn sẽ hiểu các khái niệm cơ bản để liên kết javaScript bên ngoài với tài liệu HTML.
    Cảm ơn vì đã đọc !!!
    Tiếp theo ⇒ Ngôn ngữ viết kịch bản ⇐ Trước Tiếp theo ⇒


Xem thêm những thông tin liên quan đến chủ đề cách đưa javascript bên ngoài vào html

Link JavaScript to HTML: How to run your JavaScript code in the browser

  • Tác giả: codebubb
  • Ngày đăng: 2019-01-21
  • Đánh giá: 4 ⭐ ( 1868 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this video, you’ll learn how to link JavaScript to HTML including creating and loading external JavaScript files. Get my free 32 page eBook of JavaScript HowTos 👉https://bit.ly/2ThXPL3

    — Follow Me —
    Twitter: https://www.twitter.com/codebubb
    Facebook: https://www.facebook.com/juniordevelopercentral/
    Blog: https://www.juniordevelopercentral.com/
    — Thanks! —

    It can be a bit confusing for a Junior Developer who has learnt a bit of JavaScript to know how to actually start using it in the browser. You’ll learn in this tutorial how to create external JavaScript files and how to include external JavaScript in HTML pages.

    This might seem like a simple thing to do but if you’ve never done it, you’ll want to follow this external JavaScript file example.

    We’ll first off learn the process of embedding JavaScript in HTML by creating a script tag. Once you have this created you must make sure you are embedding JavaScript in HTML files in the correct place. For example, you can place it at the bottom of the page or in the head tag of your HTML document. The tutorial will explain the difference between the two places to put your script tag.

    If your JavaScript is not linking to HTML correctly, try checking the path of the file that you are referencing in the src attribute of your script tag.

    Other videos in the JavaScript Snippets series:

    JavaScript How To Remove An Item From Array Tutorial: https://youtu.be/UvohHcj9I-s
    Javascript String Length: How to determine the size of a string: https://youtu.be/OO0_9gq8NNI
    How to find the longest word in a String with JavaScript: https://youtu.be/j9cAav7VIv4
    Find the largest number in an array JavaScript Tutorial: https://youtu.be/fOFSmCjvcFY
    Check if a String is a palindrome with JavaScript Tutorial: https://youtu.be/_KE_yCKBqUA
    How to reverse a String in JavaScript Tutorial: https://youtu.be/k7zzWvQaEhc
    JavaScript join method: How to merge arrays into one value: https://youtu.be/90MVWda5DlM
    Javascript How To Convert String To Number Tutorial: https://youtu.be/K-Twvsg3K_M
    JavaScript Create HTML Element: How to dynamically add tags to your pages: https://youtu.be/VsXCK_2DJzA
    JavaScript String Contains: How to check a string exists in another: https://youtu.be/uLT9iPccVZs
    JavaScript Copy Array: How to make an exact copy of an array in JavaScript: https://youtu.be/5rybkWfeh-A
    JavaScript Capitalize First Letter: How to make strings and arrays sentence case: https://youtu.be/8IEI-7fj2j4
    Javascript Print To Console Tutorial: Different ways to output data to the console: https://youtu.be/pkFbigsR7jI

Nhúng JavaScript vào HTML

  • Tác giả: viettuts.vn
  • Đánh giá: 3 ⭐ ( 2542 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn có thể khai báo lệnh JavaScript ở bất cứ nơi nào trong tài liệu HTML. Tuy nhiên, các cách được ưu tiên nhất để nhúng JavaScript vào HTML như sau:

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

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 6712 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Trước tiên, bạn cần tải xuống thư viện JQuery từ http://jquery.com/ sau đó tải thư viện…

Làm thế nào để thêm JavaScript trong HTML

  • Tác giả: www.hostinger.vn
  • Đánh giá: 5 ⭐ ( 2049 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các trang tĩnh như chỉ chứa toàn HTML file thường chậm do phải xác thực tại server. JavaScript tăng trải nghiệm cho người dùng và tăng tính linh hoạt của website nhờ xác thực dữ liệu từ phía người dùng thay vì phía server. Bài hướng dẫn này sẽ chỉ bạn cách chèn JavaScript trong HTML.

JAVASCRIPT: Cách sử dụng tệp “.js” bên ngoài

  • Tác giả: vi.fmihm.org
  • Đánh giá: 3 ⭐ ( 6911 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi có hai hàm javascript sau: 1 showCountry () 2 showUser () Tôi muốn đưa chúng vào tệp “.js” bên ngoài 1 quầy …

Đưa javascript vào HTML

  • Tác giả: vie.nickfish2008.com
  • Đánh giá: 3 ⭐ ( 6356 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi có hai câu hỏi về việc đặt JS bên trong HTML. Tôi không thể tìm thấy nơi hai điểm này đã được trả lời ở đây. Các câu hỏi về cơ bản Giả sử tôi đặt Javascript vào đầu và nói rằng tập lệnh cố gắng …

Bài 03: Cách Nhúng (chèn) JavaScript Vào HTML

  • Tác giả: hocban.vn
  • Đánh giá: 4 ⭐ ( 4969 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 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.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Mảng đảo ngược JavaScript - Hướng dẫn với mã JS mẫu - cách đảo ngược một mảng trong javascript

By ads_php