Von den Grundlagen bis zur Mittelstufe: Meine Reise zum Erlernen von JavaScript ✨

<p> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173793085662165.jpg" class="lazy" alt="From Basics to Intermediate: My Journey Learning JavaScript ✨"> </p> <p> Dieser Führer zeigt einen Kurs von JavaScript -Grundlagen bis hin zu Zwischenkonzepten, die sich aus meiner persönlichen Lernerfahrung stützt. Ich habe wichtige Imbissbuden, praktische Beispiele und hilfreiche Hinweise zusammengestellt, um Ihre Lernreise reibungsloser zu machen. Lassen Sie uns eintauchen! </p> <p> <strong> Inhaltsverzeichnis </strong> </p> <ol> <li> Variablen </li> <li> Arrays </li> <li> bedingte Aussagen </li> <li> Funktionen </li> <li> Objekte </li> <li> Das DOM (Dokumentobjektmodell) </li> <li> Ereignisse </li> <li> Integration von HTML und JavaScript </li> </ol> <hr> <p> <strong> 1. Variablen </strong> </p> <p> Variablen sind Container für Daten, die in Ihren Programmen verwendet werden. JavaScript bietet zwei Hauptmethoden, um sie zu deklarieren: </p> <ul> <li> <code>let</code>: Für Variablen, deren Werte sich ändern könnten. </li> <li> <code>const</code>: Für Werte, die konstant bleiben sollten. </li> </ul> <p> <strong> Beispiel: </strong> </p> <pre class="brush:php;toolbar:false"><code class="language-javascript">let age = 25; const name = "Mario";</code></pre> <p> Variablen können Zahlen, Text (Zeichenfolgen), wahre/falsche Werte (Booleschen) oder sogar undefinierte Werte halten. JavaScript bietet Standard -Arithmetikoperatoren (, -,*, /, %) und den Exponentiationsoperator (**). </p> <pre class="brush:php;toolbar:false"><code class="language-javascript">console.log(2 ** 3); // Output: 8</code></pre> <hr> <p> <strong> 2. Arrays </strong> </p> <p> Arrays speichern mehrere Werte in einer einzelnen Variablen. Verwenden Sie quadratische Klammern, um ein Array zu definieren: </p> <pre class="brush:php;toolbar:false"><code class="language-javascript">let fruits = ["apple", "banana", "cherry"];</code></pre> <p> Zugriffselemente mit ihrem Index (ab 0): </p> <pre class="brush:php;toolbar:false"><code class="language-javascript">console.log(fruits[0]); // Output: apple</code></pre> <p> <strong> Hinzufügen und Entfernen von Elementen: </strong> </p> <p> Arrays sind dynamisch; Sie können sie ändern: </p> <ul> <li> <code>.push()</code>: Fügt zum Ende ein Element hinzu. </li> <li> <code>.unshift()</code>: Fügt dem Anfang ein Element hinzu. </li> <li> <code>.pop()</code>: Entfernt das letzte Element. </li> <li> <code>.shift()</code>: Entfernt das erste Element. </li> </ul> <p> <strong> Beispiel: </strong> </p> <pre class="brush:php;toolbar:false"><code class="language-javascript">fruits.push("orange"); console.log(fruits); // Output: ["apple", "banana", "cherry", "orange"]</code></pre> <p> <strong> Sucharrays: </strong> </p> <ul> <li> <code>.indexOf()</code>: Findet den Index eines Wertes. </li> <li> <code>.includes()</code>: Überprüft, ob ein Wert vorhanden ist. </li> </ul> <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> <hr> <p> <strong> 3. Bedingte Aussagen </strong> </p> <p> Bedingte Anweisungen ermöglichen es Ihrem Code, Entscheidungen zu treffen. <code>if</code> und <code>else</code> werden üblicherweise verwendet: </p> <pre class="brush:php;toolbar:false"><code class="language-javascript">if (grade > 60) { console.log("You passed!"); } else { console.log("You failed!"); }</code></pre> <p> <strong> Vergleichsoperatoren: </strong> </p> <p> Diese Operatoren sind für die Bewertung von Bedingungen unerlässlich: </p> <ul> <li> <code>===</code> (strenge Gleichheit) </li> <li> <code>!==</code> (strenge Ungleichheit) </li> <li> <code>></code> (größer als) </li> <li> <code><</code> (weniger als) </li> <li> <code>>=</code> (größer als oder gleich) </li> <li> <code><=</code> (weniger oder gleich) </li> </ul> <hr /> <p> <strong> 4. Funktionen </strong> </p> <p> Funktionen sind wiederverwendbare Codeblöcke. Definieren Sie sie mit dem Schlüsselwort <code>function</code>: </p> <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> <p> <strong> Parameter und Argumente: </strong> </p><p> Funktionen können Eingänge akzeptieren (<strong> Parameter </strong>) und sie verwenden, wenn sie mit <strong> Argumenten </strong>: </p> aufgerufen werden <pre class="brush:php;toolbar:false"><code class="language-javascript">let age = 25; const name = "Mario";</code></pre> <hr /> <p> <strong> 5. Objekte </strong> </p> <p> Objekte sind Sammlungen von Schlüsselwertpaaren wie Mini-Daten: </p> <pre class="brush:php;toolbar:false"><code class="language-javascript">console.log(2 ** 3); // Output: 8</code></pre> <p> <strong> Methoden in Objekten: </strong> </p> <p> Objekte können auch Funktionen enthalten (<strong> Methoden </strong>): </p> <pre class="brush:php;toolbar:false"><code class="language-javascript">let fruits = ["apple", "banana", "cherry"];</code></pre> <hr /> <p> <strong> 6. Das DOM (Dokumentobjektmodell) </strong> </p> <p> Das Dom lässt JavaScript mit HTML -Elementen interagieren. </p> <p> <strong> Elemente auswählen: </strong> </p> <p> Verwenden Sie das Objekt <code>document</code>, um Elemente auszuwählen: </p> <pre class="brush:php;toolbar:false"><code class="language-javascript">console.log(fruits[0]); // Output: apple</code></pre> <p> <strong> Aktualisieren von Elementen: </strong> </p> <p> Inhalt dynamisch ändern: </p> <pre class="brush:php;toolbar:false"><code class="language-javascript">fruits.push("orange"); console.log(fruits); // Output: ["apple", "banana", "cherry", "orange"]</code></pre> <hr /> <p> <strong> 7. Ereignisse </strong> </p> <p> auf Benutzeraktionen (Klicks, Taste drückt) mit <code>.addEventListener()</code>: </p> antworten <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> <p> <strong> Beispiel: Inkrementierung eines Zählers: </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. Integration von HTML und JavaScript </strong> </p> <p> JavaScript mit <code><script></code> Tags: </p> direkt zu HTML hinzufügen: <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> <p> <code>.js</code> Verknüpfen Sie für größere Skripte eine externe </p> Datei: <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> <hr> <p> </p> Dies schließt meine JavaScript -Lernreise vom Anfänger auf Zwischenstufen ab! Ich hoffe, dieser Leitfaden erweist sich als hilfreich. Fühlen Sie sich frei, Ihre eigenen Lerntipps zu teilen oder Fragen in den Kommentaren zu stellen! Happy Coding! ✨ </li> </ul>

Das obige ist der detaillierte Inhalt vonVon den Grundlagen bis zur Mittelstufe: Meine Reise zum Erlernen von JavaScript ✨. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!