从基础到中级：我学习 JavaScript 的旅程 ✨-js教程-PHP中文网

<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>：对于值可能会改变的变量。</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"><code class="language-javascript">let age = 25; const name = "Mario";</code></pre><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div> <p>变量可以保存数字、文本（字符串）、真/假值（布尔值），甚至是未定义的值。 JavaScript 提供标准算术运算符 ( 、 - 、 * 、 / 、 % ) 和幂运算符 (**)。</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">登录后复制</div></div><div class="contentsignin">登录后复制</div></div> <hr> <p><strong>2。数组</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"><code class="language-javascript">let fruits = ["apple", "banana", "cherry"];</code></pre><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div> <p>使用索引访问元素（从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">登录后复制</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"><code class="language-javascript">fruits.push("orange"); console.log(fruits); // Output: ["apple", "banana", "cherry", "orange"]</code></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>：检查值是否存在。</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">登录后复制</div></div><div class="contentsignin">登录后复制</div></div> <hr> <p><strong>3。条件语句</strong></p> <p>条件语句允许您的代码做出决定。 <code>if</code> 和 <code>else</code> 常用：</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">登录后复制</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> <li> <code><=</code>（小于或等于）</li> </ul> <hr /> <p><strong>4。功能</strong></p> <p>函数是可重用的代码块。使用 <code>function</code> 关键字定义它们：</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">登录后复制</div></div> <p><strong>参数和参数：</strong></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"><code class="language-javascript">let age = 25; const name = "Mario";</code></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"><code class="language-javascript">console.log(2 ** 3); // Output: 8</code></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"><code class="language-javascript">let fruits = ["apple", "banana", "cherry"];</code></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"><code class="language-javascript">console.log(fruits[0]); // Output: apple</code></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"><code class="language-javascript">fruits.push("orange"); console.log(fruits); // Output: ["apple", "banana", "cherry", "orange"]</code></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"><code class="language-javascript">console.log(fruits.indexOf("banana")); // Output: 1 console.log(fruits.includes("grape")); // Output: false</code></pre><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div><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>> <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">登录后复制</div></div> <p> <code>.js</code>这是我从初学者到中级级别的JavaScript学习旅程的结论！我希望本指南证明有帮助。随时分享您自己的学习技巧或在评论中提出问题！愉快的编码！ ✨</p></ancy> </li> </ul>

以上是从基础到中级：我学习 JavaScript 的旅程 ✨的详细内容。更多信息请关注PHP中文网其他相关文章！