Des bases à l'intermédiaire: mon voyage d'apprentissage javascript ✨

<p><img src="https://img.php.cn/upload/article/000/000/000/173793085662165.jpg" alt="From Basics to Intermediate: My Journey Learning JavaScript ✨"></p> <p>Ce guide trace un cours allant des principes fondamentaux de JavaScript aux concepts intermédiaires, en s'appuyant sur mon expérience d'apprentissage personnelle. J'ai compilé les principaux points à retenir, des exemples pratiques et des conseils utiles pour faciliter votre parcours d'apprentissage. Allons-y !</p> <p><strong>Table des matières</strong></p> <ol> <li>Variables</li> <li>Tableaux</li> <li>Déclarations conditionnelles</li> <li>Fonctions</li> <li>Objets</li> <li>Le DOM (Document Object Model)</li> <li>Événements</li> <li>Intégration HTML et JavaScript</li> </ol> <hr> <p><strong>1. Variables</strong></p> <p>Les variables sont des conteneurs pour les données utilisées dans vos programmes. JavaScript propose deux manières principales de les déclarer :</p> <ul> <li> <code>let</code> : Pour les variables dont les valeurs peuvent changer.</li> <li> <code>const</code> : Pour les valeurs qui doivent rester constantes.</li> </ul> <p><strong>Exemple :</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code class="language-javascript">let age = 25; const name = "Mario";</code></pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <p>Les variables peuvent contenir des nombres, du texte (chaînes), des valeurs vraies/fausses (booléens) ou même des valeurs non définies. JavaScript fournit des opérateurs arithmétiques standards ( , -, *, /, %) et l'opérateur d'exponentiation (**).</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code class="language-javascript">console.log(2 ** 3); // Output: 8</code></pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <hr> <p><strong>2. Tableaux</strong></p> <p>Les tableaux stockent plusieurs valeurs dans une seule variable. Utilisez des crochets pour définir un tableau :</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code class="language-javascript">let fruits = ["apple", "banana", "cherry"];</code></pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <p>Accéder aux éléments en utilisant leur index (à partir de 0) :</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code class="language-javascript">console.log(fruits[0]); // Output: apple</code></pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <p><strong>Ajout et suppression d'éléments :</strong></p> <p>Les tableaux sont dynamiques ; vous pouvez les modifier :</p> <ul> <li> <code>.push()</code> : Ajoute un élément à la fin.</li> <li> <code>.unshift()</code> : Ajoute un élément au début.</li> <li> <code>.pop()</code> : Supprime le dernier élément.</li> <li> <code>.shift()</code> : Supprime le premier élément.</li> </ul> <p><strong>Exemple :</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code class="language-javascript">fruits.push("orange"); console.log(fruits); // Output: ["apple", "banana", "cherry", "orange"]</code></pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <p><strong>Recherche de tableaux :</strong></p> <ul> <li> <code>.indexOf()</code> : Trouve l'index d'une valeur.</li> <li> <code>.includes()</code> : Vérifie si une valeur existe.</li> </ul> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code class="language-javascript">console.log(fruits.indexOf("banana")); // Output: 1 console.log(fruits.includes("grape")); // Output: false</code></pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <hr> <p><strong>3. Déclarations conditionnelles</strong></p> <p>Les instructions conditionnelles permettent à votre code de prendre des décisions. <code>if</code> et <code>else</code> sont couramment utilisés :</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code class="language-javascript">if (grade > 60) { console.log("You passed!"); } else { console.log("You failed!"); }</code></pre><div class="contentsignin">Copier après la connexion</div></div> <p><strong>Opérateurs de comparaison :</strong></p> <p>Ces opérateurs sont essentiels pour évaluer les conditions :</p> <ul> <li> <code>===</code> (égalité stricte)</li> <li> <code>!==</code> (inégalité stricte)</li> <li> <code>></code> (supérieur à)</li> <li> <code><</code> (moins de)</li> <li><code>>=</code> (supérieur ou égal à)</li> <li> <code><=</code> (inférieur ou égal à)</li> </ul> <hr /> <p><strong>4. Fonctions</strong></p> <p>Les fonctions sont des blocs de code réutilisables. Définissez-les à l'aide du mot-clé <code>function</code> :</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code class="language-javascript">function greet(name) { return `Hello, ${name}!`; } console.log(greet("Alice")); // Output: Hello, Alice!</code></pre><div class="contentsignin">Copier après la connexion</div></div> <p><strong>Paramètres et arguments :</strong></p>Les fonctions <p> peuvent accepter les entrées (<strong> paramètres </strong>) et les utiliser lorsqu'ils sont appelés avec <strong> arguments </strong>: </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code class="language-javascript">let age = 25; const name = "Mario";</code></pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <hr /> <p> <strong> 5. Objets </strong> </p> <p> Les objets sont des collections de paires de valeurs clés, comme les mini-données: </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code class="language-javascript">console.log(2 ** 3); // Output: 8</code></pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <p> <strong> Méthodes dans les objets: </strong> </p> <p> Les objets peuvent également contenir des fonctions (<strong> méthodes </strong>): </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code class="language-javascript">let fruits = ["apple", "banana", "cherry"];</code></pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <hr /> <p> <strong> 6. Le DOM (modèle d'objet de document) </strong> </p> <p> Le DOM permet d'interagir JavaScript avec les éléments HTML. </p> <p> <strong> Sélection d'éléments: </strong> </p> <p> Utilisez l'objet <code>document</code> pour sélectionner les éléments: </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code class="language-javascript">console.log(fruits[0]); // Output: apple</code></pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <p> <strong> Mise à jour des éléments: </strong> </p> <p> Modifier le contenu dynamiquement: </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code class="language-javascript">fruits.push("orange"); console.log(fruits); // Output: ["apple", "banana", "cherry", "orange"]</code></pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <hr /> <p> <strong> 7. Événements </strong> </p> <p> Répondez aux actions de l'utilisateur (clics, appuyés sur les touches) en utilisant <code>.addEventListener()</code>: </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code class="language-javascript">console.log(fruits.indexOf("banana")); // Output: 1 console.log(fruits.includes("grape")); // Output: false</code></pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <p> <strong> Exemple: incrément un compteur: </strong> </p> <pre class="brush:php;toolbar:false"><code class="language-javascript">if (grade > 60) { console.log("You passed!"); } else { console.log("You failed!"); }</code> <hr> <p> <strong> 8. Intégration de HTML et JavaScript </strong> </p> <p> Ajouter JavaScript directement à HTML à l'aide de balises <code><script></code>: </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code class="language-javascript">function greet(name) { return `Hello, ${name}!`; } console.log(greet("Alice")); // Output: Hello, Alice!</code></pre><div class="contentsignin">Copier après la connexion</div></div> <p> Pour les scripts plus grands, liez un fichier <code>.js</code> externe: </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code class="language-javascript">function add(a, b) { return a + b; } console.log(add(2, 3)); // Output: 5</code></pre><div class="contentsignin">Copier après la connexion</div></div> <hr> <p> Cela conclut mon parcours d'apprentissage JavaScript des niveaux débutants aux niveaux intermédiaires! J'espère que ce guide s'avérera utile. N'hésitez pas à partager vos propres conseils d'apprentissage ou à poser des questions dans les commentaires! Codage heureux! ✨ </p> </li> </ul>

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!