Il existe deux manières d'utiliser le code JavaScript, à savoir : 1. Exécution directe Lorsqu'une page Web est ouverte, tous les codes JavaScript définis dans les balises de script ou les fichiers js liés seront exécutés. un certain événement se produit, exécutez un certain morceau de code JavaScript.
L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.
[Méthode d'exécution JavaScript]
Le code JavaScript défini dans le document HTML a deux méthodes d'exécution : 直接执行、事件驱动。
直接执行:
Quand Quand nous ouvrons une page Web, tout le code JavaScript défini dans la balise <script> ou le fichier js lié sera exécuté. </p> <p>Il convient de noter que les fonctions définies avec function ne sont pas exécutées. La fonction ne sera exécutée que lorsqu'elle rencontrera un appel de fonction. </p> <p>Exemple 1 : </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><script type="text/javascript"> var d = new Date(); var m = d.getMonth(); if( m>=5 ) document.write( m ); </script></pre><div class="contentsignin">Copier après la connexion</div></div><p>Le code JavaScript ci-dessus est placé nu dans la balise <script>, et sera exécuté immédiatement à l'ouverture de la page Web. </p><p>Exemple 2 : </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><script type="text/javascript"> function getM() { var d = new Date(); var m = d.getMonth(); if( m>=5 ) document.write( m ); } </script> 以上JavaScript代码定义的是函数,当网页打开时,函数中的代码不会被执行。当需要执行该函数时,需要使用函数调用。 <script type="text/javascript"> getM(); </script></pre><div class="contentsignin">Copier après la connexion</div></div><p><code>事件驱动:</code></p><p>Lorsqu'un certain événement se produit, tel que l'ouverture d'une page Web, la souris est cliquée, la souris est double-cliquée , etc., un certain morceau de code JavaScript est exécuté. </p><p>Par exemple : </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><script type="text/javascript"> var count = 0; function setCount() { count++; if( count>=5 ) count = 0; } </script> <button onclick="setCount()">计数</button></pre><div class="contentsignin">Copier après la connexion</div></div><p>Dans cet exemple, la balise <button> définit un bouton, et l'attribut onclick est utilisé pour répondre à un événement de clic de souris lorsque le bouton est cliqué avec l'attribut mouse. , exécutez la fonction setCount(). </p><p>Les attributs qui répondent à un événement dans une balise sont appelés gestionnaires d'événements et leurs valeurs sont des codes JavaScript. </p><p><span style="font-size: 16px;"><strong>Gestionnaires d'événements courants : </strong></span></p><p><strong>onload : </strong></p><p>Déclenché à l'ouverture de la page Web. Il n'est valable que dans les balises <body> et <frameset> </p><p>Cet événement est généralement utilisé pour effectuer certaines opérations d'initialisation. </p><p><strong>onunload : </strong></p><p>Déclenché lorsque la page Web est fermée. Il n'est valable que dans les balises <body> et <frameset> </p><p>Cet événement est généralement utilisé pour réaliser certains travaux de finition. </p><p><strong>onclick : </strong></p><p> Déclenché lorsque la souris clique. Il peut être utilisé pour des objets tels que des contrôles, des images, du texte, des hyperliens, etc. </p><p>Cet événement est utilisé pour répondre aux opérations de clic de souris et est le gestionnaire d'événements le plus couramment utilisé. </p><p><strong>ondblclick : </strong></p><p>Déclenché lorsque la souris est double-cliquée. Il peut être utilisé pour des objets tels que des contrôles, des images, du texte, des hyperliens, etc. </p><p>Cet événement est utilisé pour répondre à une opération de double-clic de la souris. </p><p><strong>onchange : </strong></p><p>Déclenché lorsque le contenu change. Il peut être utilisé pour des objets tels que des zones de texte, des zones de liste, etc. </p><p>Cet événement est généralement utilisé pour répondre à la modification par l'utilisateur du contenu de la zone de texte. </p><p>Remarque : lorsque l'utilisateur saisit du texte dans une zone de texte, l'événement onchange ne sera pas déclenché. Cet événement ne sera déclenché que lorsque l'utilisateur clique sur une zone en dehors de la zone de texte après avoir terminé la saisie, provoquant le texte. boîte pour perdre le focus. </p><p><strong>onselect : </strong></p><p>Déclenché lorsque le contenu est sélectionné. Il peut être utilisé pour des objets tels que des zones de texte, des zones de liste, etc. </p><p>Cet événement est généralement utilisé pour répondre à des opérations telles que la sélection par l'utilisateur du contenu dans la zone de texte et la modification de l'élément sélectionné dans la zone de liste. </p><p>Ceux-ci ne sont que quelques-uns des gestionnaires d'événements les plus couramment utilisés. </p><p>Remarque : le gestionnaire d'événements n'est pas un code JavaScript, mais un attribut HTML, il n'est donc pas sensible à la casse, mais vous devez prendre l'habitude d'écrire en lettres minuscules. </p><p><strong>Informations détaillées : </strong></p><p>[Méthode de définition JavaScript] : </p><p>Il existe deux façons d'ajouter du code JavaScript aux documents HTML : le mode intégré et le mode lié. . </p><p>Intégré : </p><p>Intégrer le code JavaScript dans le document HTML. Méthode : </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><script type="text/javascript"> JS代码 </script></pre><div class="contentsignin">Copier après la connexion</div></div><p>Le code JavaScript doit être défini entre <script> et </script>. La balise