From Basics to Intermediate: My Journey Learning 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>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> <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">Copy after login</div></div><div class="contentsignin">Copy after login</div></div> <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> <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">Copy after login</div></div><div class="contentsignin">Copy after login</div></div> <hr> <p><strong>2. Arrays</strong></p> <p>Arrays store multiple values within a single variable. Use square brackets to define an array:</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">Copy after login</div></div><div class="contentsignin">Copy after login</div></div> <p>Access elements using their index (starting from 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">Copy after login</div></div><div class="contentsignin">Copy after login</div></div> <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> <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">Copy after login</div></div><div class="contentsignin">Copy after login</div></div> <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> <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">Copy after login</div></div><div class="contentsignin">Copy after login</div></div> <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> <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">Copy after login</div></div> <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> <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">Copy after login</div></div> <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> <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">Copy after login</div></div><div class="contentsignin">Copy after login</div></div> <hr /> <p><strong>5. Objects</strong></p> <p>Objects are collections of key-value pairs, like mini-databases:</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">Copy after login</div></div><div class="contentsignin">Copy after login</div></div> <p><strong>Methods in Objects:</strong></p> <p>Objects can also contain functions (<strong>methods</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">Copy after login</div></div><div class="contentsignin">Copy after login</div></div> <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> <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">Copy after login</div></div><div class="contentsignin">Copy after login</div></div> <p><strong>Updating Elements:</strong></p> <p>Modify content dynamically:</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">Copy after login</div></div><div class="contentsignin">Copy after login</div></div> <hr /> <p><strong>7. Events</strong></p> <p>Respond to user actions (clicks, key presses) using <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">Copy after login</div></div><div class="contentsignin">Copy after login</div></div> <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> <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">Copy after login</div></div> <p>For larger scripts, link an external <code>.js</code> file:</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">Copy after login</div></div> <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!