從基礎到中級：我的旅程學習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>>本指南繪製了從我的個人學習經驗借鑒JavaScript基本面到中間概念的課程。 我編寫了關鍵的外賣，實用的例子和有用的提示，以使您的學習旅程更加順暢。讓我們潛入！ </p> 目錄的<p><strong>表</strong></p> <ol> <li>>變量</li> <li>數組</li> <li>條件語句</li> <li>函數</li> <li>>對象</li> <li>dom（文檔對像模型）</li> <li>>事件</li> <li>集成HTML和JavaScript</li> </ol> <hr> <p><strong> 1。變量</strong></p> <p>變量是用於程序中使用的數據的容器。 JavaScript提供了兩種宣布它們的主要方法：</p>> <ul> <li> <code>let</code>：對於可能會更改的變量。 <ancy> </ancy> </li> <li>：對於應該保持恆定的值。 <code>const</code>> </li> </ul> <p>示例：<strong></strong> </p> <pre class="brush:php;toolbar:false"><code class="language-javascript">let age = 25; const name = "Mario";</code></pre>>變量可以容納數字，文本（字符串），true/false值（布爾值），甚至不確定的值。 JavaScript提供標準的算術運算符（ - ，*， /，％）和啟動操作員（**）。 <p> </p> <pre class="brush:php;toolbar:false"><code class="language-javascript">console.log(2 ** 3); // Output: 8</code></pre> <hr> 2。數組<p><strong> </strong>數組將多個值存儲在單個變量中。 使用方括號來定義數組：</p> <p> </p>>使用其索引訪問元素（從0開始）：<pre class="brush:php;toolbar:false"><code class="language-javascript">let fruits = ["apple", "banana", "cherry"];</code></pre>> <p> 在 </p>>數組是動態的；您可以修改它們：<pre class="brush:php;toolbar:false"><code class="language-javascript">console.log(fruits[0]); // Output: apple</code></pre> <p> <strong></strong>：在末端添加一個元素。 </p>> <p></p>：在開始時添加一個元素。 <ul>> <li> <code>.push()</code>：刪除最後一個元素。 </li> <li> <code>.unshift()</code>：刪除第一個元素。 </li> <li> <code>.pop()</code> </li>示例：<li> <code>.shift()</code> </li> </ul> <p>搜索數組：<strong> </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>> </strong></p>：檢查是否存在值。 <ul> <li> <code>.indexOf()</code> </li> <li> <code>.includes()</code> 3。有條件的語句</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>> </strong> </p> <p>>比較操作員：<ancly> <code>if</code> <code>else</code>這些操作員對於評估條件至關重要：</ancly></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>（嚴格的平等）</strong> </p> <p>（嚴格的不等式）</p> <ul> <li>（大於）<code>===</code> </li> <li>（小於）<code>!==</code> </li> <li>（大於或等於）<code>></code> </li> <li>（小於或等於）<code><</code> </li> <li> <code>>=</code> </li> 4。功能<li> <code><=</code> </li>函數是可重複使用的代碼塊。使用</ul>>關鍵字來定義它們：<hr /> <p> <strong></strong>>參數和參數：</p><p><p>>函數可以接受輸入（<strong>參數</strong>），並在使用<strong>> gragonments呼叫時使用它們</strong>：</p>：<pre class="brush:php;toolbar:false"><code class="language-javascript">let age = 25; const name = "Mario";</code></pre> <hr /> <p> <strong></strong>5。對象</p><p> </p>物件是鑰匙值對的集合，例如迷你資料庫：<pre class="brush:php;toolbar:false"><code class="language-javascript">console.log(2 ** 3); // Output: 8</code></pre> <p> <strong></strong>>物件中的方法：</p><p> <strong>物件也可以包含函數（</strong>方法</p>）：<ancy>> <pre class="brush:php;toolbar:false"><code class="language-javascript">let fruits = ["apple", "banana", "cherry"];</code></pre> <hr /> 6。 DOM（文檔物件模型）<p><strong> </strong>DOM讓JavaScript與HTML元素相互作用。 </p><p>選擇元素：</p><p> <strong>使用</strong>>物件選擇元素：</p> <p> <code>document</code> </p>更新元素：<pre class="brush:php;toolbar:false"><code class="language-javascript">console.log(fruits[0]); // Output: apple</code></pre><p> <strong>>動態修改內容：</strong> </p> <p> </p><pre class="brush:php;toolbar:false"><code class="language-javascript">fruits.push("orange"); console.log(fruits); // Output: ["apple", "banana", "cherry", "orange"]</code></pre>7。事件<hr /><p> <strong>>使用</strong>>：</p>>響應用戶操作（單擊，鍵按） <p> <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> </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> 8。整合HTML和JavaScript<hr> <p>> <strong>>使用</strong>標籤直接加入JavaScript：</p>> <p> <code><script></code>對於較大的腳本，連結外部</p>檔案：<ancy>> <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>這是我從初學者到中階的JavaScript學習旅程的結論！我希望本指南證明有幫助。 隨時分享您自己的學習技巧或在評論中提出問題！愉快的編碼！ ✨</p></ancy> </li> </ul>

以上是從基礎到中級：我的旅程學習JavaScript✨的詳細內容。更多資訊請關注PHP中文網其他相關文章！