From Basics to Intermediate: My Journey Learning 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>This guide charts a course from JavaScript fundamentals to intermediate concepts, drawing from my personal learning experience. I've compiled key takeaways, practical examples, and helpful hints to make your learning journey smoother. Let's dive in!</p> <p><strong>Table of Contents</strong></p> <ol> <li>Variables</li> <li>Arrays</li> <li>Conditional Statements</li> <li>Functions</li> <li>Objects</li> <li>The DOM (Document Object Model)</li> <li>Events</li> <li>Integrating HTML and JavaScript</li> </ol> <hr> <p><strong>1. Variables</strong></p> <p>Variables are containers for data used in your programs. JavaScript offers two main ways to declare them:</p> <ul> <li> <code>let</code>: For variables whose values might change.</li> <li> <code>const</code>: For values that should remain constant.</li> </ul> <p><strong>Example:</strong></p> <pre class="brush:php;toolbar:false"><code class="language-javascript">let age = 25; const name = "Mario";</code></pre> <p>Variables can hold numbers, text (strings), true/false values (booleans), or even undefined values. JavaScript provides standard arithmetic operators ( , -, *, /, %) and the exponentiation operator (**).</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 store multiple values within a single variable. Use square brackets to define an array:</p> <pre class="brush:php;toolbar:false"><code class="language-javascript">let fruits = ["apple", "banana", "cherry"];</code></pre> <p>Access elements using their index (starting from 0):</p> <pre class="brush:php;toolbar:false"><code class="language-javascript">console.log(fruits[0]); // Output: apple</code></pre> <p><strong>Adding and Removing Elements:</strong></p> <p>Arrays are dynamic; you can modify them:</p> <ul> <li> <code>.push()</code>: Adds an element to the end.</li> <li> <code>.unshift()</code>: Adds an element to the beginning.</li> <li> <code>.pop()</code>: Removes the last element.</li> <li> <code>.shift()</code>: Removes the first element.</li> </ul> <p><strong>Example:</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>Searching Arrays:</strong></p> <ul> <li> <code>.indexOf()</code>: Finds the index of a value.</li> <li> <code>.includes()</code>: Checks if a value exists.</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. Conditional Statements</strong></p> <p>Conditional statements allow your code to make decisions. <code>if</code> and <code>else</code> are commonly used:</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>Comparison Operators:</strong></p> <p>These operators are essential for evaluating conditions:</p> <ul> <li> <code>===</code> (strict equality)</li> <li> <code>!==</code> (strict inequality)</li> <li> <code>></code> (greater than)</li> <li> <code><</code> (less than)</li> <li><code>>=</code> (greater than or equal to)</li> <li> <code><=</code> (less than or equal to)</li> </ul> <hr /> <p><strong>4. Functions</strong></p> <p>Functions are reusable blocks of code. Define them using the <code>function</code> keyword:</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>Parameters and Arguments:</strong></p><p>Functions can accept inputs (<strong>parameters</strong>) and use them when called with <strong>arguments</strong>:</p> <pre class="brush:php;toolbar:false"><code class="language-javascript">let age = 25; const name = "Mario";</code></pre> <hr /> <p><strong>5. Objects</strong></p> <p>Objects are collections of key-value pairs, like mini-databases:</p> <pre class="brush:php;toolbar:false"><code class="language-javascript">console.log(2 ** 3); // Output: 8</code></pre> <p><strong>Methods in Objects:</strong></p> <p>Objects can also contain functions (<strong>methods</strong>):</p> <pre class="brush:php;toolbar:false"><code class="language-javascript">let fruits = ["apple", "banana", "cherry"];</code></pre> <hr /> <p><strong>6. The DOM (Document Object Model)</strong></p> <p>The DOM lets JavaScript interact with HTML elements.</p> <p><strong>Selecting Elements:</strong></p> <p>Use the <code>document</code> object to select elements:</p> <pre class="brush:php;toolbar:false"><code class="language-javascript">console.log(fruits[0]); // Output: apple</code></pre> <p><strong>Updating Elements:</strong></p> <p>Modify content dynamically:</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. Events</strong></p> <p>Respond to user actions (clicks, key presses) using <code>.addEventListener()</code>:</p> <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>Example: Incrementing a counter:</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. Integrating HTML and JavaScript</strong></p> <p>Add JavaScript directly to HTML using <code><script></code> tags:</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>For larger scripts, link an external <code>.js</code> file:</p> <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>This concludes my JavaScript learning journey from beginner to intermediate levels! I hope this guide proves helpful. Feel free to share your own learning tips or ask questions in the comments! Happy coding! ✨</p> </li> </ul>

The above is the detailed content of From Basics to Intermediate: My Journey Learning JavaScript ✨. For more information, please follow other related articles on the PHP Chinese website!