Résumé de l'utilisation des méthodes JS en HTML

Cette fois, je vais vous apporter un résumé de la façon d'utiliser JS en HTML Quelles sont les précautions lors de l'utilisation de JS en HTML Voici des cas pratiques, jetons un coup d'oeil.

Avant-propos

JavaScript est le langage de script intégré au navigateur. Lorsqu'un script JavaScript est intégré dans une page Web et que le navigateur charge la page Web, il exécutera le script pour faire fonctionner le navigateur et obtenir divers effets dynamiques

Méthodes d'intégration de code JavaScript dans des pages Web

1.<script>Element intègre directement le code

<script type="text/javascript">
    function sayHello() {
        alert("hello!");
    }
</script>

2 <script>Element charge un script externe

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

<script>Attributs

• La balise par défaut est le code JavaScript Lors de l'intégration de scripts javascript, l'attribut type peut être omis<script>

Si la valeur de l'attribut type , le navigateur n'exécutera pas le code s'il ne le reconnaît pas, vous pouvez donc intégrer n'importe quel contenu textuel dans la balise
• Ajoutez simplement un attribut de type que le navigateur ne reconnaît pas. reconnaîtra, et le navigateur ne l'exécutera pas ou n'affichera pas son contenu, mais ce nœud

  existe toujours dans le DOM, vous pouvez utiliser l'attribut text du nœud <script> pour lire son contenu <script><script>

attribut defer

<script src="a.js" defer></script>
<script src="b.js" defer></script>

Le navigateur commence à analyser la page Web HTML
Pendant le processus d'analyse, avez trouvé l'élément

2. <script>

avec l'attribut defer. Le navigateur continue d'analyser la page Web HTML et télécharge le script externe chargé par l'élément
3. en parallèle

   <script>

Le navigateur a terminé l'analyse de la page Web HTML et revient maintenant pour exécuter le script téléchargé
Remarque :

• Exécuter les scripts dans l'ordre

• Les scripts externes chargés à l'aide de defer ne doivent pas utiliser la
document
• méthode .write
  attribut async

<script src="a.js" async></script>
<script src="b.js" async></script>

1. Pendant le processus d'analyse, il trouve la balise
avec l'attribut async

2. <script>

   Le navigateur continue d'analyser la page Web HTML et de télécharger le script externe

3. <script> en parallèle dans la balise

   . Le téléchargement du script est terminé. Le navigateur arrête d'analyser la page Web HTML et commence à exécuter le script téléchargé

4. Une fois le script exécuté, le navigateur reprend l'analyse du script. Page Web HTML
Remarque :

• fait n'exécute pas JS dans l'ordre. Celui qui le télécharge en premier l'exécutera en premier

• Les scripts externes chargés via async ne le font pas. La méthode document.write doit être utilisée

• L'induction d'attributs asynchrones et différés

• Ils chargent tous les ressources de manière asynchrone, mais l'ordre d'exécution est différent

• S'il n'y a pas de dépendance entre les scripts, utilisez l'attribut async. S'il y a une dépendance entre les scripts, utilisez l'attribut defer

• Dynamique. script de génération

['a.js', 'b.js'].forEach(function(src) {
    var script = document.createElement('script');
    script.src = src;
    script.async = false;
    document.head.appendChild(script);
});

• async Le définir sur false garantit que b.js est exécuté après a.js

• Le fichier de script chargé après ce code attendra que b.ja soit exécuté avant de s'exécuter

• Résumé des points de connaissances pertinents

sera analysé de haut en bas

2. Quelle que soit la manière dont le code est intégré, tant qu'il n'y a pas d'attributs defer et async, le navigateur analysera les balises <Script> dans l'ordre dans lequel elles apparaissent dans la page

3. Avantages du chargement de scripts externes : maintenabilité, possibilité de cache, adaptabilité au futur

4. <script> Raisons de le placer en bas 1. Pour éviter le " effet de blocage". 2. Évitez d'appeler le nœud DOM avant que la structure DOM ne soit générée, ce qui entraînerait une erreur

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. . Veuillez prêter attention aux choses plus excitantes. Autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment gérer l'accès refusé à la base de données MySQL

Comment implémenter les effets spéciaux des boutons hexagonaux

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!