Como vinculo um arquivo JavaScript a um arquivo HTML?

187

Como você vincula corretamente um arquivo JavaScript a um documento HTML?

Em segundo lugar, como você usa o jQuery em um arquivo JavaScript?

javascript jquery html firstofth300
fonte
3
Prefiro as respostas aqui: Onde devo colocar as tags <script> na marcação HTML?
caramba
@caramba Mas e se eu precisar que o JS faça algo mais complicado? Eu estou tentando fazê-lo escrever um arquivo, então eu chamo const fs = require('fs');do nó.
Nathan
1
@ Nathan com node.js é uma história completamente diferente. leia esta esperança que ajuda
caramba
Encontrei uma solução alternativa, mas tenho certeza de que alguém ficará satisfeito com o link!
Nathan

Respostas:

189

Primeiro, você precisa baixar a biblioteca JQuery em http://jquery.com/ e, em seguida, carregar a biblioteca jquery da seguinte maneira em suas tags de cabeçalho html

então você pode testar se o jquery está funcionando, codificando seu código jquery após o script de carregamento do 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>

Se você deseja usar o arquivo de scripts jquery separadamente, defina o arquivo .js externo dessa maneira após o carregamento da biblioteca jquery.

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

Teste em tempo real

Mostrar snippet de código

Swarne27
fonte
7
Muito obrigado. Esta é exatamente a resposta que eu finalmente descobri! Sei que a pergunta era elementar, mas agradeço por dedicar um tempo para me mostrar isso! O que estava faltando era colocar a biblioteca jQuery antes do arquivo javascript!
firstofth300
53

É assim que você vincula um arquivo JS em HTML

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

<script> - tag é usada para definir um script do lado do cliente, como um JavaScript.

type - especifique o tipo do script

src - nome e caminho do arquivo de script

Muthu Kumaran
fonte
13

Você pode adicionar tags de script no seu documento HTML, de preferência dentro do que aponta para seus arquivos javascript. A ordem das tags de script é importante. Carregue o jQuery antes dos arquivos de script, se desejar usar o jQuery a partir do seu 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>

Em seguida, no seu arquivo javascript, você pode consultar o jQuery usando $sign ou jQuery. Exemplo:

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

Para incluir um arquivo Javascript externo, use a <script>tag O srcatributo aponta para o local do seu arquivo Javascript no seu projeto da web.

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

O JQuery é simplesmente um arquivo Javascript, portanto, se você fizer o download de uma cópia do arquivo, poderá incluí-lo em sua página usando uma tag de script. Você também pode incluir o Jquery em uma rede de distribuição de conteúdo como a hospedada pelo Google.

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

Abaixo você tem algum documento de exemplo VALID html5 . O typeatributo na scripttag não é obrigatório no HTML5.

Você usa jquery por $caractere. Coloque bibliotecas (como jquery) na <head>tag - mas seu script sempre será colocado na parte inferior do documento ( <body>tag) -, pois você terá certeza de que todas as bibliotecas e documentos html serão carregados quando a execução do script for iniciada. Você também pode usar o srcatributo na tag de script inferior para incluir seu arquivo de script em vez de colocar o código js direto como acima.

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

Kamil Kiełczewski
fonte
0 
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
fonte