Comment lier un fichier JavaScript à un fichier HTML?

187

Comment liez-vous correctement un fichier JavaScript à un document HTML?

Deuxièmement, comment utilisez-vous jQuery dans un fichier JavaScript?

javascript jquery html firstofth300
la source
3
Je préfère les réponses ici: Où dois-je mettre les balises <script> dans le balisage HTML?
caramba
@caramba Mais que faire si j'ai besoin du JS pour faire quelque chose de plus compliqué? J'essaye de lui faire écrire un fichier donc j'appelle const fs = require('fs');depuis le nœud.
Nathan le
1
@Nathan avec node.js, c'est une histoire complètement différente. lire cet espoir que ça aide
caramba
J'ai trouvé une solution de contournement, mais je suis sûr que quelqu'un d'autre sera heureux pour le lien!
Nathan le

Réponses:

189

Vous devez d'abord télécharger la bibliothèque JQuery à partir de http://jquery.com/, puis charger la bibliothèque jquery de la manière suivante dans vos balises html head

alors vous pouvez tester si le jquery fonctionne en codant votre code jquery après le script de chargement de 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>

Si vous souhaitez utiliser votre fichier de scripts jquery séparément, vous devez définir le fichier .js externe de cette façon après le chargement de la bibliothèque jquery.

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

Tester en temps réel

Afficher l'extrait de code

Swarne27
la source
7
Merci beaucoup. C'est exactement la réponse que j'ai finalement trouvée! Je sais que la question était élémentaire mais je vous remercie d'avoir pris le temps de me le montrer! Ce qui me manquait, c'était de placer la bibliothèque jQuery avant le fichier javascript!
firstofth300
53

Voici comment lier un fichier JS en HTML

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

<script> - la balise est utilisée pour définir un script côté client, tel qu'un JavaScript.

type - préciser le type de script

src - nom et chemin du fichier de script

Muthu Kumaran
la source
13

Vous pouvez ajouter des balises de script dans votre document HTML, idéalement à l'intérieur du qui pointe vers vos fichiers javascript. L'ordre des balises de script est important. Chargez le jQuery avant vos fichiers de script si vous souhaitez utiliser jQuery à partir de votre 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>

Ensuite, dans votre fichier javascript, vous pouvez faire référence à jQuery en utilisant $signe ou jQuery. Exemple:

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

Pour inclure un fichier Javascript externe, vous utilisez la <script>balise. L' srcattribut pointe vers l'emplacement de votre fichier Javascript dans votre projet Web.

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

JQuery est simplement un fichier Javascript, donc si vous téléchargez une copie du fichier, vous pouvez l'inclure dans votre page à l'aide d'une balise de script. Vous pouvez également inclure Jquery à partir d'un réseau de distribution de contenu tel que celui hébergé par Google.

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

Vous trouverez ci-dessous un exemple de document VALID html5 . L' typeattribut dans la scriptbalise n'est pas obligatoire en HTML5.

Vous utilisez jquery par $charater. Mettez des bibliothèques (comme jquery) dans la <head>balise - mais votre script est toujours placé au bas du document ( <body>balise) - pour cette raison, vous serez sûr que toutes les bibliothèques et tous les documents html seront chargés au démarrage de votre exécution de script. Vous pouvez également utiliser l' srcattribut dans la balise de script inférieure pour inclure votre fichier de script au lieu de mettre du code js direct comme ci-dessus.

<!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>
Développer l'extrait

Kamil Kiełczewski
la source
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
la source