Как правильно связать файл JavaScript с документом HTML?

Во-вторых, как вы используете jQuery в файле JavaScript?

Сначала вам нужно скачать библиотеку JQuery с http://jquery.com/ затем загрузить библиотеку jquery следующим образом в теги html head.

Затем вы можете проверить, работает ли jquery, написав код jquery после скрипта загрузки jquery.

<!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--></body>
</html>

Если вы хотите использовать файл скриптов jquery отдельно, вы должны определить внешний файл .js таким образом после загрузки библиотеки jquery.

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

Тест в реальном времени

<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--></body>
</html>

Вот как вы связываете файл JS в HTML

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

<script> - тег используется для определения сценария на стороне клиента, такого как JavaScript.

type - указать тип скрипта

src - имя файла сценария и путь

Вы можете добавить теги сценариев в ваш HTML-документ, в идеале внутри которого указывает на ваши файлы JavaScript. Порядок тегов скрипта важен. Загрузите jQuery перед файлами скриптов, если вы хотите использовать jQuery из скрипта.

<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>

Затем в вашем javascript-файле вы можете ссылаться на jQuery, используя $знак или jQuery. Пример:

jQuery.each(arr, function(i) { console.log(i); }); 

Чтобы включить внешний файл Javascript, вы используете <script>тег. srcАтрибут указывает на расположение файла Javascript в вашем веб - проекта.

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

JQuery - это просто файл Javascript, поэтому, если вы загрузите копию этого файла, вы можете включить ее в свою страницу с помощью тега script. Вы также можете включить Jquery из сети распространения контента, например, той, что размещена в Google.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Ниже у вас есть пример документа VALID html5 . typeАтрибут scriptтега не обязательно в HTML5.

Вы используете JQuery $Charater. Поместите библиотеки (например, jquery) в <head>тег - но ваш скрипт всегда помещается внизу документа ( <body>тега) - благодаря этому вы будете уверены, что все библиотеки и HTML-документ будут загружены при запуске вашего скрипта. Вы также можете использовать srcатрибут в нижнем теге скрипта, чтобы включить ваш файл скрипта вместо того, чтобы указывать прямой js-код, как описано выше

<!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>

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>