est écrite dans la ligne et chaque balise est définie séparément.
La fonction (1) de référencement de js via l'attribut event dans la balise d'ouverture
est écrite dans l'attribut event de la balise (attribut commençant par on). , comme onclick [on+ event Type]
Recommandation : utilisez des guillemets doubles pour le HTML et des guillemets simples pour js.
Exemple :
<input type="button" value="Cliquez sur moi pour ouvrir le monde" onclick="alert('Hello World'. )" />
Remarque : introduction en ligne, dans JS Le concept d'augmentation du poids n'est pas utilisé dans , il n'est donc pas couramment utilisé [ fondamentalement non utilisé ].
Les exemples sont les suivants :<html> <title>Écriture en ligne de style JS</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <corps> <!--La méthode d'écriture en ligne JS commence à partir de 01--> <!--Lorsque la souris clique sur l'image, une fenêtre contextuelle apparaîtra affichant 1223--> <div classe="img"> Événement de clic : <img src="images/001.jpg" onclick="alert(1223)"></img> </div> <!--La méthode d'écriture en ligne JS 01 se termine--> </corps> </html>
Résultat de sortie :
écrit dans la balise de script
Référence interne : utilisée en écrivant du code js dans la balise de script
La balise script peut être écrite n'importe où sur la page
La balise script est généralement utilisée à la fin du corps, ou après le corps
(1) Peut être écrit n’importe où ;
Lorsque nous devons référencer le script en tête, placez-le en tête, sinon placez-le en bas, car le placer en tête peut affecter le rendu du navigateur.
<script> alert('Bonjour tout le monde !'); </script>
Remarque : Généralement, lorsque vous écrivez des exercices par vous-même, vous utilisez [ Practice Use ] lorsque vous voulez être paresseux et que vous ne voulez pas configurer de fichiers js.
Habituellement, lorsque vous travaillez sur vos propres projets, placez-le en bas. Cela n'affecte pas l'ordre de chargement et peut être distingué des fichiers CSS, et cela n'affecte pas le rendu du navigateur. Si vous le placez ailleurs, il est préférable d'utiliser onload.
Les exemples sont les suivants :<html> <title>Écriture en ligne de style JS</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <corps> <!--js écriture en ligne à partir de 02--> <div classe="img"> Événement de clic : <img src="images/002.jpg" id='yuansu'></img> </div> <!--js méthode d'écriture en ligne 02 fin--> </corps> <script> //code js//Trouver l'élément XX, ajouter généralement un identifiant à l'élément yuansuojb=document.getElementById('yuansu'); //Ajouter l'événement yuansuojb.onclick=function(){ à l'élément xx //Alerte de segment de code(1); } //Événement déclencheur</script> </html>
Résultat de sortie :
Utilisez src dans la balise de script pour introduire des fichiers externes
étape:
Écrire des fichiers js indépendants
Référencé via des balises de script dans la page
(1) Aucun code ne peut être écrit dans le script qui introduit des fichiers JS externes
(2) Utilisez la structure de code de page HTML pour séparer plusieurs morceaux de code JS en dehors de la page HTML, ce qui est beau et pratique pour la réutilisation de fichiers.
<script src="main.js"></script>
Remarque : comme pour les styles en ligne, leur placement en bas et en tête doit être envisagé au cas par cas [ fréquemment utilisé ]
Utilisez src et non href
Les exemples sont les suivants :Écrivez le code js dans un fichier .js et citez-le en HTML
Le contenu du fichier .html est le suivant :
<html> <title>Méthode d'écriture de liens externes de style JS</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <corps> <div classe="img"> Écriture de lien externe – événement de clic : <img src="images/003.jpg" id='yuansu'></img> </div> </corps> <script src='js/index.js'></script> </html>
Le contenu du fichier .js est le suivant :
//code js//Trouver l'élément XX, ajouter généralement un identifiant à l'élément yuansuojb=document.getElementById('yuansu'); //Ajouter l'événement yuansuojb.onclick=function(){ à l'élément xx //Segment de code var str="bonjour tout le monde !!!"; alerte(str); }
Résultat de sortie :