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

<p> <img src="/static/imghw/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> <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;'>let age = 25; const name = "Mario";</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div> <p> Variablen können Zahlen, Text (Zeichenfolgen), wahre/falsche Werte (Booleschen) oder sogar undefinierte Werte halten. JavaScript bietet Standard -Arithmetikoperatoren (, -,*, /, %) und den Exponentiationsoperator (**). </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;'>console.log(2 ** 3); // Output: 8</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div> <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> <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;'>let fruits = ["apple", "banana", "cherry"];</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div> <p> Zugriffselemente mit ihrem Index (ab 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;'>console.log(fruits[0]); // Output: apple</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div> <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> <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;'>fruits.push("orange"); console.log(fruits); // Output: ["apple", "banana", "cherry", "orange"]</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div> <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> <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;'>console.log(fruits.indexOf("banana")); // Output: 1 console.log(fruits.includes("grape")); // Output: false</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div> <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> <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;'>if (grade > 60) { console.log("You passed!"); } else { console.log("You failed!"); }</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div> <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> <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;'>function greet(name) { return `Hello, ${name}!`; } console.log(greet("Alice")); // Output: Hello, Alice!</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div> <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 <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;'>let age = 25; const name = "Mario";</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div> <hr /> <p> <strong> 5. Objekte </strong> </p> <p> Objekte sind Sammlungen von Schlüsselwertpaaren wie Mini-Daten: </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;'>console.log(2 ** 3); // Output: 8</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div> <p> <strong> Methoden in Objekten: </strong> </p> <p> Objekte können auch Funktionen enthalten (<strong> Methoden </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;'>let fruits = ["apple", "banana", "cherry"];</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div> <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> <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;'>console.log(fruits[0]); // Output: apple</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div> <p> <strong> Aktualisieren von Elementen: </strong> </p> <p> Inhalt dynamisch ändern: </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;'>fruits.push("orange"); console.log(fruits); // Output: ["apple", "banana", "cherry", "orange"]</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div> <hr /> <p> <strong> 7. Ereignisse </strong> </p> <p> auf Benutzeraktionen (Klicks, Taste drückt) mit <code>.addEventListener()</code>: </p> antworten <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;'>console.log(fruits.indexOf("banana")); // Output: 1 console.log(fruits.includes("grape")); // Output: false</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div> <p> <strong> Beispiel: Inkrementierung eines Zählers: </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;'>if (grade > 60) { console.log("You passed!"); } else { console.log("You failed!"); }</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div> <hr /> <p> <strong> 8. Integration von HTML und JavaScript </strong> </p> <p> JavaScript mit <code><script></code> Tags: </p> direkt zu HTML hinzufügen: <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;'>function greet(name) { return `Hello, ${name}!`; } console.log(greet("Alice")); // Output: Hello, Alice!</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div> <p> <code>.js</code> Verknüpfen Sie für größere Skripte eine externe </p> Datei: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>function add(a, b) { return a + b; } console.log(add(2, 3)); // Output: 5</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <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! ✨

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!