Explication détaillée du processus d'écriture de JS-js tutoriel-php.cn

Page statique html + css

js Interaction dynamique

Principe : js consiste à modifier le style, comme faire apparaître une boîte de dialogue La pop-up. Le processus est que la case est désactivée. Changer pour afficher : activer. Ou changer la couleur lorsque la souris pointe dessus, ce qui est un outil pour modifier le style.

Le processus d'écriture de JS

Mise en page : HTML+CSS
Événement : Déterminer les opérations effectuées par l'utilisateur (conception du produit)
Écrire JS : Dans l'événement, utilisez JS pour modifier le style de l'élément de page(Attributs supplémentaires : déterminez les attributs à modifier)
Qu'est-ce qu'un événement

Un événement complet =

Portée : Balise d'action

Déclaration d'événement : une opération utilisateur, par exemple : entrée et sortie de la souris onmouseover, onmouseout,

Action de fonction : une action bien encapsulée qui peut être comprise comme une déclaration d'événement

plus complexe. une partie de cette portée Un attribut, une fonction est une série d'actions effectuées par cet attribut

Localisation et emballage standard

Format :
<script></li> </ul>fonction+nom+()<h2></h2>{action 1+Action 2+Action 3+…… ><h2></h2></script>

Position : <script> : balise de code Js, les fonctions sont généralement placées dans la tête À l'intérieur.<h2></h2> Encapsulation :Fonction : fuction+name+() Placer du code non encapsulé dans des balises provoquera une confusion visuelle pour les lecteurs. Encapsulez l'intégralité du code dans une fonction, puis appelez. la fonction dans la balise. Le document deviendra plus propre <ol class=" list-paddingleft-2"> <li>Lorsque plusieurs balises appellent la même fonction à plusieurs reprises, pas besoin de retaper l'intégralité du code, appelez simplement le nom de la fonction . </li> <li>Variables : var + nom + () Les variables ne sont que des structures complexes. Attribuer à l'objet un nom simple réduira la quantité de code lorsqu'il est appelé 🎜></li>. </ol> <script> <div> <table style="border-collapse: collapse" border="0"> <colgroup><col style="width: 575px"></colgroup> <tbody valign="top">fonction<tr class="firstRow"><td style="padding-left: 7px; padding-right: 7px; border-top: solid 0.5pt; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt"> toGreen() </td></tr>{<tr> <td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt"> </td>var</tr> <tr> oDiv<td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt">=document.getElementById('div1');</td> </tr> <tr>Action 1 : div1 attribue la valeur 2 à oDiv<td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt"> oDiv.style.width='300px'</td>;</tr> L'action 2/3 modifie la largeur de div1<tr> <td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt"> </td> </tr> oDiv.style.height<tr>=<td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt">'300px'; </td> oDiv.style.background</tr>=<tr>'green'<td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt">; Action 4, le fond devient vert </td> </tr> <tr><td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt">} </td></tr> <tr><td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt"></script&gt ;</td></tr></tbody></table></div>Notez que s'il y a des instructions dans le script qui ne doivent pas encore être exécutées, vous pouvez // commenter out Explication détaillée de la structure hiérarchique des actions de fonction et explication de Document.getElementById : (Points clés)Les propriétés de l'objet sont divisées en plusieurs couches , chaque couche est séparée par '.' Ce qui suit est le sous-attribut (attribut) précédent, qui peut être compris comme '的' en chinois . vous voyez est section par section. En fait, par exemple, oDiv.style.width='300px'; Cette action appartient à : Document.getElementById('div1').style.width = '300px' Et tout ce paragraphe appartient à :Window.Document.getElementById('div1').style.width = '300px' <div><table style="border-collapse: collapse" border="0"><colgroup><col style="width: 575px"/></colgroup><tbody valign=" top">< tr class="firstRow"><td valign="middle" style="padding-left : 7px ; padding-right : 7px ; bordure supérieure : bordure gauche : bordure solide 0,5 pt ; -bas : solide 0,5 pt ; bordure droite : solide 0,5 pt"><table style="border-collapse: collapse" border="0"><colgroup><col style="width: 575px"/></colgroup><tbody valign="top"><tr class="firstRow"><td valign="middle" style="padding-left: 7px; padding-right: 7px; border-top: solid 0.5pt; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt">这一整条就是一条完整的事件动作,</td></tr><tr><td valign="middle" style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt">window是上层对象</td></tr><tr><td valign="middle" style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt">document是二层对象</td></tr><tr><td valign="middle" style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt"><节点>节点<节点>节点<节点>节点<节点>节点</td></tr> <tr><td valign="middle" style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt">getElementById是三层对象(方法)</td></tr> <tr><td valign="middle" style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt">style四层对象 (一层属性)</td></tr> <tr><td valign="middle" style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt">height 五层对象 (二层属性)</td></tr> </tbody> </table>Cette ligne entière est un événement completAction, <td valign="middle" style="padding-left : 7px ; padding-right : 7px ; bordure supérieure : aucune ; bordure gauche : solide 0,5 pt ; bordure inférieure : solid 0.5pt ; border-right : solid 0.5pt">la fenêtre est l'objet de niveau supérieur</td> <td valign=" middle" style=" padding-left : 7px ; padding-right : 7px ; bordure-haut : aucun ; bordure-gauche : solide 0,5 pt ; bordure-droite : solide 0,5 pt">le document est un objet de deuxième couche</td> <td valign="middle" style="padding-left: 7px; padding-right: 7px ; bordure supérieure : aucune ; bordure gauche : solide 0,5 pt ; bordure inférieure : solide 0,5 pt ; node>node&lt ;Node>Node<Node>Node<🎜><🎜><🎜><🎜><td valign=" middle>getElementById est un élément à trois couches. object (Méthode)</td> <td valign="middle" style="padding-left : 7px ; padding-right : 7px ; border-top : aucun ; bordure gauche : solide 0,5 pt ; bordure inférieure : solide 0,5 pt ; bordure droite : solide 0,5 pt">objet de style à quatre calques (un -attribut de couche) </td> <td valign="middle" style="padding-left : 7px ; padding-right : 7px ; border-top : aucun ; bordure gauche : solide 0,5 pt ; bordure inférieure : solide 0,5 pt ; bordure droite : solide 0,5 pt"> hauteur de l'objet à cinq couches (deux -attribut de couche) la fenêtre est omise car nous opérons en HTML, qui par défaut est document et parce que nous avons défini oDiv, l'expression finale devient oDiv.style.width='300px'; form. <img src="https://img.php.cn/upload/article/000/000/001/43e6ea8f3db1aa16208387d1d4cc67cd-1.png" alt=""> Quant à Document, c'est un JS pour faire fonctionner la méthode au niveau du document (méthode d'action), les nœuds de base du document <html> sont contrôlés par celui-ci. Ces nœuds incluent les nœuds de texte et les nœuds d'étiquette (attribut). Toutes les plages en dehors des crochets angulaires deviennent des nœuds de texte, les crochets angulaires Le nœud d'attribut de pied à l'intérieur. Si nous ne disons pas de quel nœud il s'agit, il fait généralement référence à celui qui se trouve entre les crochets DOM (Objet Document) : <img src="https://img.php.cn/upload/article/000/000/001/43e6ea8f3db1aa16208387d1d4cc67cd-2.png" alt=""> (. La méthode est l'action que nous avons décrite ci-dessus) <div><table style="border-collapse: collapse" border="0"> <colgroup><col style="width: 575px"></colgroup> <tbody valign="top"> <tr class="firstRow"><td style="padding-left: 7px; padding-right: 7px; border-top: solid 0.5pt; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt"><html></td></tr> <tr><td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt"><head></td></tr> <tr><td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt"><metacharset="utf-8" ></td></tr> <tr><td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt"><title>Document sans titre</title></td></tr> <tr><td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt"> <style></td></tr> <tr> <td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt">#div1 {</td> </tr> <tr><td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt"> largeur:200px;</td></tr> <tr><td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt"> hauteur:200px;</td></tr> <tr><td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt"> fond :rouge; </td></tr> <tr> <td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt">} </td> </tr> <tr><td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt"> </style> </td></tr> <tr><td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt"><script></td></tr> <tr><td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt">fonction toGreen()</td></tr> <tr><td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt">{ </td></tr> <tr><td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt"> var oDiv =document.getElementById('div1');</td></tr> <tr><td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt"> </td></tr> <tr><td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt"> oDiv.style.width='300px';</td></tr> <tr> <td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt"> oDiv.style.height='300px';</td> </tr> <tr><td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt"> oDiv.style.background='vert';</td></tr> <tr><td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt">} </td></tr> <tr><td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt"> </td></tr> <tr><td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt">fonction toRed()</td></tr> <tr><td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt">{ </td></tr> <tr><td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt"> var oDiv=document.getElementById('div1' );</td></tr> <tr><td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt"> </td></tr> <tr><td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt"> oDiv.style.width='200px';</td></tr> <tr><td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt"> oDiv .style.height='200px';</td></tr> <tr><td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt"> oDiv.style.background='rouge';</td></tr> <tr><td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt">} </td></tr> <tr><td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid 0.5pt; border-bottom: solid 0.5pt; border-right: solid 0.5pt"></script>
```
id="div1" onmouseover="toGreen()" onmouseout="toRed()">

 
```