web-dev-qa-db-fra.com

Comment lier un fichier JavaScript à un fichier HTML?

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

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

javascriptjqueryhtml
166
firstofth300

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

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

Testez en temps réel

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

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> - tag est utilisé pour définir un script côté client, tel qu'un JavaScript.

type - spécifie le type du script

src - nom et chemin du fichier de script

43
Muthu Kumaran

Vous pouvez ajouter des balises de script dans votre document HTML, idéalement à l'intérieur de la qui pointe vers vos fichiers javascript. L'ordre des balises de script est important. Chargez 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 $ sign ou jQuery. Exemple:

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

Pour inclure un fichier Javascript externe, utilisez la balise <script>. L'attribut src 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. Par conséquent, si vous téléchargez une copie du fichier, vous pouvez l'inclure dans votre page à l'aide d'une balise 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>
11
Kevin Bowersox

Vous trouverez ci-dessous un exemple de document VALID html5 . L'attribut type dans la balise script est non obligatoire en HTML5.

Vous utilisez jquery by $ charater. Placez les bibliothèques (comme jquery) dans la balise <head> - mais votre script restera toujours placé au bas du document (balise <body>) - vous serez ainsi assuré que toutes les bibliothèques et le document html seront chargés lors du chargement. l'exécution du script commence. Vous pouvez également utiliser l'attribut src 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>
1
Kamil Kiełczewski