<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>>本指南繪製了從我的個人學習經驗借鑒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>
<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">登入後複製</div></div><div class="contentsignin">登入後複製</div></div>>變量可以容納數字，文本（字符串），true/false值（布爾值），甚至不確定的值。 JavaScript提供標準的算術運算符（ - ，*， /，％）和啟動操作員（**）。
<p>
</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">登入後複製</div></div><div class="contentsignin">登入後複製</div></div><hr /> 2。數組<p><strong>
</strong>數組將多個值存儲在單個變量中。 使用方括號來定義數組：</p>
<p>
</p>>使用其索引訪問元素（從0開始）：<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">登入後複製</div></div><div class="contentsignin">登入後複製</div></div>>
<p>
在
</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">登入後複製</div></div><div class="contentsignin">登入後複製</div></div>
<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>
<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">登入後複製</div></div><div class="contentsignin">登入後複製</div></div><p>：找到一個值的索引。 <strong>>
</strong></p>：檢查是否存在值。 <ul>
<li>
<code>.indexOf()</code>
</li>
<li><code>.includes()</code> 3。有條件的語句</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">登入後複製</div></div><div class="contentsignin">登入後複製</div></div>>有條件的語句允許您的代碼做出決策。 <hr />和<p>>通常使用：<strong>>
</strong>
</p><p>>比較操作員：<ancly> <code>if</code>
<code>else</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;'>if (grade > 60) {
console.log("You passed!");
} else {
console.log("You failed!");
}</pre><div class="contentsignin">登入後複製</div></div><div class="contentsignin">登入後複製</div></div>
<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>：<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">登入後複製</div></div><div class="contentsignin">登入後複製</div></div>
<hr />
<p>
<strong></strong>5。對象</p><p>
</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">登入後複製</div></div><div class="contentsignin">登入後複製</div></div>
<p>
<strong></strong>>物件中的方法：</p><p>
<strong>物件也可以包含函數（</strong>方法</p>）：<ancy>>
<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">登入後複製</div></div><div class="contentsignin">登入後複製</div></div>
<hr />
6。 DOM（文檔物件模型）<p><strong>
</strong>DOM讓JavaScript與HTML元素相互作用。
</p><p>選擇元素：</p><p>
<strong>使用</strong>>物件選擇元素：</p>
<p>
<code>document</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;'>console.log(fruits[0]); // Output: apple</pre><div class="contentsignin">登入後複製</div></div><div class="contentsignin">登入後複製</div></div><p>
<strong>>動態修改內容：</strong>
</p>
<p>
</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">登入後複製</div></div><div class="contentsignin">登入後複製</div></div>7。事件<hr /><p>
<strong>>使用</strong>>：</p>>響應用戶操作（單擊，鍵按）
<p>
<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;'>console.log(fruits.indexOf("banana")); // Output: 1
console.log(fruits.includes("grape")); // Output: false</pre><div class="contentsignin">登入後複製</div></div><div class="contentsignin">登入後複製</div></div><p>>
<strong>
</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">登入後複製</div></div><div class="contentsignin">登入後複製</div></div> 8。整合HTML和JavaScript<hr /><p>>
<strong>>使用</strong>標籤直接加入JavaScript：</p>>
<p>
<code><script></code>對於較大的腳本，連結外部</p>檔案：<ancy>>
<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">登入後複製</div></div>
<p>
<code>.js</code>這是我從初學者到中階的JavaScript學習旅程的結論！我希望本指南證明有幫助。 隨時分享您自己的學習技巧或在評論中提出問題！愉快的編碼！ ✨</p>
以上是從基礎到中級：我的旅程學習JavaScript✨的詳細內容。更多資訊請關注PHP中文網其他相關文章！
