240

How do you properly link a JavaScript file to a HTML document?

Secondly, how do you use jQuery within a JavaScript file?

Mark Amery
  • 143,130
  • 81
  • 406
  • 459
firstofth300
  • 2,697
  • 2
  • 14
  • 14
  • 4
    I prefer the answers here: [Where should I put – caramba Mar 30 '19 at 17:28
  • @caramba But what if I need the JS to do something more complicated? I'm trying to have it write a file so I call `const fs = require('fs');` from node. – Nathan majicvr.com Jun 22 '20 at 23:02
  • 1
    @Nathan with node.js it's a completely different story. [read this](https://stackoverflow.com/questions/10166324/how-to-include-nodejs-modules-in-html-files) hope it helps – caramba Jun 23 '20 at 05:14
  • I found a workaround, but I'm sure someone else will be glad for the link! – Nathan majicvr.com Jun 24 '20 at 17:27

6 Answers6

231

First you need to download the jQuery library from https://jquery.com/ then load the jQuery library the following way within your HTML head tags.

Then you can test whether jQuery is working by adding your jQuery code after the jQuery loading script.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<!--LINK JQUERY-->
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<!--PERSONAL SCRIPT JavaScript-->
<script type="text/javascript">
   $(function(){
      alert("My First jQuery Test");
   });
</script>

</head>
<body><!-- Your web page --></body>
</html>

If you want to use your jQuery scripts file separately, you must define the external .js file this way after the jQuery library loading.

<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script src="js/YourExternalJQueryScripts.js"></script>

Test in real time

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<!--LINK JQUERY-->
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<!--PERSONAL SCRIPT JavaScript-->
<script type="text/javascript">
   $(function(){
      alert("My First jQuery Test");
   });
</script>

</head>
<body><!-- Your web page --></body>
</html>
Matthias Braun
  • 32,039
  • 22
  • 142
  • 171
Swarne27
  • 5,521
  • 7
  • 26
  • 41
  • 9
    Thank you SO MUCH. This is exactly the answer that I finally figured out! I know that the question was elementary but I thank you for taking the time to show me this! What I was missing was placing the jQuery library before the javascript file! – firstofth300 Dec 06 '12 at 21:13
  • Why can't we put the library after the script? I can place the js script after the HTML element I need to interact though – Ooker Oct 26 '21 at 15:32
  • That's a great detailed explanation. Just would like to add that you should avoid this [Legacy JavaScript MIME types](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#textjavascript) – Gustavo Martínez Sep 15 '22 at 10:03
65

This is how you link a JS file in HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script> - tag is used to define a client-side script, such as a JavaScript.

type - specify the type of the script

src - script file name and path

Muthu Kumaran
  • 17,682
  • 5
  • 47
  • 70
15

To include an external Javascript file you use the <script> tag. The src attribute points to the location of your Javascript file within your web project.

<script src="some.js" type="text/javascript"></script>

JQuery is simply a Javascript file, so if you download a copy of the file you can include it within your page using a script tag. You can also include Jquery from a content distribution network such as the one hosted by Google.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Kevin Bowersox
  • 93,289
  • 19
  • 159
  • 189
14

You can add script tags in your HTML document, ideally inside the which points to your javascript files. Order of the script tags are important. Load the jQuery before your script files if you want to use jQuery from your script.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="relative/path/to/your/javascript.js"></script>

Then in your javascript file you can refer to jQuery either using $ sign or jQuery. Example:

jQuery.each(arr, function(i) { console.log(i); });
BuddhiP
  • 6,231
  • 5
  • 36
  • 56
2

Below you have some VALID html5 example document. The type attribute in script tag is not mandatory in HTML5.

You use jquery by $ charater. Put libraries (like jquery) in <head> tag - but your script put allways at the bottom of document (<body> tag) - due this you will be sure that all libraries and html document will be loaded when your script execution starts. You can also use src attribute in bottom script tag to include you script file instead of putting direct js code like above. 

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
    <div>Im the content</div>

    <script>
        alert( $('div').text() ); // show message with div content
    </script>
</body>
</html>
Kamil Kiełczewski
  • 85,173
  • 29
  • 368
  • 345
1
this is demo code but it will help 

<!DOCTYPE html>
<html>
<head>
<title>APITABLE 3</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>


$(document).ready(function(){

$.ajax({
    type: "GET",
    url: "https://reqres.in/api/users/",

    data: '$format=json',

    dataType: 'json',
    success: function (data) {
 $.each(data.data,function(d,results){
     console.log(data);

 $("#apiData").append(
                        "<tr>"
                          +"<td>"+results.first_name+"</td>"
                          +"<td>"+results.last_name+"</td>"
                          +"<td>"+results.id+"</td>"
                          +"<td>"+results.email+"</td>"
  +"<td>"+results.bentrust+"</td>"
                        +"</tr>" )
                    })
 } 

});

});


</script>
</head>
<body>


    <table id="apiTable">

        <thead>
            <tr>
            <th>Id</th>
            <br>
            <th>Email</th>
            <br>
            <th>Firstname</th>
            <br>
            <th>Lastname</th>
        </tr>
        </thead>
        <tbody id="apiData"></tbody>    





</body>
</html>
Hozaifa
  • 417
  • 3
  • 3