斯蒂芬格莱德里

JavaScript易于学习,最受欢迎的编程语言之一,以及网络的语言。如果您有网络浏览器,则您可以在其中编写JavaScript的环境。那么为什么不开始使用这个基本的JavaScript教程?

先决条件

如果启动本教程的那些对HTTP协议的基本了解并具有一些HTML和CSS的知识,它将有助于。您可以找到Udemy的网站上这些主题的介绍资源。但是,没有必要知道任何一个来编写JavaScript代码。所以现在让我们这样做来告诉你。

现代Javascript训练营课程(2021)

最后更新于3月2021日

  • 483讲座
  • 所有级别
4.7 (6706)

在线最新的JS资源!通过构建一个美丽的项目组合来掌握JavaScript!|由斯蒂芬·莱特斯蒂尔斯蒂尔·林林

探索课程

写下你的第一个JavaScript代码

开始使用Javascript比任何其他编程语言都容易。您只需要一个浏览器来编写JavaScript代码。所有流行的浏览器,包括Chrome、Edge和Safari,都有一套开发工具,允许用户查看当前网页的信息、执行JavaScript、修改实时HTML等等。

让我们尝试在Chrome浏览器中写一些JavaScript。如果选择其他浏览器要使用,则唯一的区别将是您访问开发人员工具和控制台的方式。在Chrome中,您可以通过两种方式到达开发人员工具中的控制台:

一旦你访问了你的浏览器控制台,输入以下代码并按enter:

alert(“Hello, World !”)

你现在不能完全叫自己黑客,但这很简单。在此操作之后,您应该看到一个警告弹出,说,“Hello,World”。现在让我们了解更多有关Javascript的信息,以便我们开始编写更多的代码。首先,让我们看看究竟是什么javascript。

什么是JavaScript?

布伦丹·艾奇(Brendan Eich) 1995年在网景(Netscape)当工程师时创建了JavaScript。它是一种面向对象的编程语言,可以促进浏览器内的交互,而无需为每个操作重新加载页面。JavaScript是一种脚本语言。艾奇只用了10天就写出了第一个版本的语言。

JavaScript特性

JavaScript是一种脚本语言。脚本语言不需要进行编译。它们依赖于特殊的运行时环境和相关的解释器 - 计算机程序,这些计算机程序在不通过各种方法编译的情况下执行代码。现代Web浏览器包括可以解释JavaScript代码的解释器。

浏览器外的JavaScript

您将在浏览器之外找到javascript的最受欢迎的环境是nodejs。NodeJS是一个在服务器环境中没有浏览器运行的JavaScript引擎。这意味着您可以使用JavaScript从后端构建完整的Web应用程序到前端。

此外,各种移动框架喜欢科尔多瓦,离子, 和原生允许开发人员使用Web技术构建移动应用程序,包括任何脚本的JavaScript。

JavaScript的替代品

JavaScript中有很少的替代方案用于在浏览器中执行代码。这些选项为JavaScript提供了替代语法,而是在我们在浏览器中使用它们之前编译为纯粹的JavaScript。JavaScript的一些流行替代品包括CoffeeScript,Cypescript和Dart。

当使用这些替代语言时,您的代码被翻译成Javascript,然后在浏览器中执行。

将JavaScript添加到HTML

在上面的实验中,您使用web浏览器的控制台来执行JavaScript代码。JavaScript的标准用法是向HTML页面添加脚本。为此,您需要在HTML本身中包含JavaScript。当浏览器检测到<脚本>在HTML文件中标记,它知道要执行JavaScript代码。使用此标记,您可以直接在HTML文件中嵌入JavaScript代码,或者包含单独的JavaScript源文件。

内部JavaScript.

您可以将JavaScript直接放置在HTML文件中,在<脚本>和脚本>标签。

例子:

<!doctype html>    示例网页</ title> <link rel =“stylesheet”type =“text / css”href =“css / example.css”> </ head> <body> <h1>示例页面</ h1> <<span>脚本</span>> document.write(“<h3> hello!</ h3>”)</<span>脚本</span>很高兴你在这里。< / p > < /身体> < / html ></code></pre>
    <p>您可以将内部JavaScript放置在HTML文档的头部或正文部分。</p>
    <div class="wp-block-image">
     <figure class="aligncenter is-resized">
      <img loading="lazy" src="https://lh3.googleusercontent.com/ZRdiK6KvkOWwClTCblPUS2N_DYQ9ynQ-e7usEuFPJQrRnqTFYud7h9s4MA2jvbivhf8kw91qgf7wdFBHbVXHnmxFWMM-Y9P_HXIufZo3o7Dqf_K45VsW9UpBUqIrwM2uQ44wZMk" alt="" width="321" height="260">
     </figure>
    </div>
    <p>在这种情况下,我们的JavaScript代码将直接嵌入到HTML文件中。</p>
    <h3><strong>外部JavaScript</strong></h3>
    <p>还可以将外部JavaScript文件链接到HTML文件。</p>
    <p>例如:</p>
    <pre class="wp-block-code"><code><!doctype html> <html lang =“en”> <head> <meta charset =“utf-8”> <title>示例网页</ title> <link rel =“stylesheet”type =“text / css”href =“css / example.css”> </ head> <body> <h1>示例页面</ h1> <p>很高兴您在这里。</ p> <<span>脚本</span>src =“js / example.js”> </<span>脚本</span>> </ body> </ html></code></pre>
    <div class="wp-block-image">
     <figure class="aligncenter is-resized">
      <img loading="lazy" src="https://lh4.googleusercontent.com/YeTZruijBm4KlTIN-HGwDMJpYKOnliOac8Puiw1OiBK_zUEr5V04Ei5A3XFL7R8o0hDlH1qvqDlbCKHdGBkYHtp83CjPCowy6Y7LjFE4tExTRwics98v0CTGdd_SI2U5FfNrlJw" alt="" width="385" height="259">
     </figure>
    </div>
    <p>在这种情况下,脚本标记强制浏览器从外部位置获取我们的JavaScript代码。</p>
    <p>外部JavaScript文件的路径是<<span>脚本</span>>标签。建议将脚本放在<body>元素的底部,以防止由于脚本加载阻塞HTML显示而延迟页面加载。JavaScript文件传统上使用扩展JS。</p>
    <p>除非您只是将一个小型代码添加到网页,否则将JavaScript添加到HTML的推荐方式包括外部JavaScript文件。有几个原因:</p>
    <ul>
     <li>JavaScript和HTML的分离使得两者更易于阅读和维护。</li>
     <li>页面可以通过浏览器缓存JavaScript文件的缓存来加载更快,这会降低HTML文档的大小。内部JavaScript增加了HTML文档的大小,因为它会在每个HTML文档请求上下载。</li>
     <li>您可以将多个HTML文档链接到同一个JavaScript文件,这可以减少由于浏览器缓存而导致的页面加载时间。</li>
    </ul>
    <h2><strong>JavaScript基础知识</strong></h2>
    <p>在您编写更多JavaScript代码之前,它需要了解基础知识。每个编程语言都有规则,javascript没有什么不同。编程语言的规则就像是口语语言的规则,除非您在代码中打破规则时,最可能的结果是您的代码无法正常工作。</p>
    <p>JavaScript语言的以下特性对于大多数编程语言来说是通用的,但是它们处理这些特性的方式是不同的。</p>
    <h3><strong>JavaScript语法</strong></h3>
    <p>句法是书写语言的规则,类似于口语中的语法。</p>
    <h4><strong>区分大小写</strong></h4>
    <p>JavaScript的一个规则是区分大小写,这意味着如果您创建了一个特定大小写的变量,比如Car,那么您必须使用相同的大小写再次访问该变量,而不是Car。</p>
    <p></p>
    <p></p>
    <p></p>
    <h4><strong>标识符</strong></h4>
    <p>javascript中的标识符是变量,函数,参数或类的名称。这些名称必须遵循以下规则:</p>
    <ul>
     <li>第一个字符必须是字母(a-z或a-z),下划线(_)或美元符号($)。</li>
     <li>其他字符可以是字母(a-z或a-z),数字(0-9),下划线(_)和美元符号($)。</li>
    </ul>
    <p>虽然这不是JavaScript语言的规则,但大多数开发人员遵循的惯例是,这些名称应该使用CamelCase。CamelCase将名字中除第一个单词外的每个单词都大写。</p>
    <p>例子:</p>
    <pre class="wp-block-code"><code>const thisIsCamelCase = ";</code></pre>
    <p><strong>注释</strong></p>
    <p>注释是代码中不执行的部分。名称定义了它自己。它们用于向代码中添加注释,有时以结构化格式编写,以便解析它们以创建代码的文档页面。JavaScript支持两种类型的注释,单行注释和块注释。</p>
    <pre class="wp-block-code"><code>//这是一行注释。它必须在一行上。/*这是一个块注释。它可以跨任意多行。* / \ # # # JavaScript变量</code></pre>
    <h4><strong>语句</strong></h4>
    <p>声明是给予计算机的指令。脚本包括一系列专门命令实现目标(如食谱)的语句。以下是关于陈述的一些事情要记住:</p>
    <ul>
     <li><strong>新行</strong>- 每个陈述都应该从新行开始。</li>
     <li><strong>分号</strong>- 每个陈述应该以分号结尾;这告诉解释器完成此步骤并从以下语句开始。</li>
     <li><strong>空白</strong>—空格包括制表符、空格和换行符。单词和制表符之间的空白被忽略。使用空白使代码更容易阅读。<br><br>例子:</li>
    </ul>
    <pre class="wp-block-code"><code>Const Car =“丰田”;Const Car =“丰田”;//更易于阅读</code></pre>
    <ul>
     <li><strong>线的长度</strong>- 将代码长度保持为80个字符或更短,以最大化可读性。</li>
     <li><strong>排队休息</strong>- 除非在声明中发现,否则忽略。对于多行语句,应在运营商(例如,=,+, - )之后使用中断。<br>例子:</li>
    </ul>
    <pre class="wp-block-code"><code>document.getElementByID(“示例”)。innerhtml =“在此处插入新文本”;</code></pre>
    <ul>
     <li><strong>代码块</strong>- 代码块在Cully括号内组织相关语句{}并使它们更容易读取。关闭卷曲括号不是分号的。JavaScript函数通常在代码块中。<br><br>例子:</li>
    </ul>
    <pre class="wp-block-code"><code>函数mybirthday {警报(%u201chappy生日!%u201d);document.getElementByID(%u201cmessage%u201d).innerhtml =%u201cyou%u2019Re一年聪明!%u201d;}</code></pre>
    <h4><strong>表达式</strong></h4>
    <p>表达式是代码的片段,用于评估值。</p>
    <p>例如:</p>
    <pre class="wp-block-code"><code>10 + 20</code></pre>
    <p>上面的表达式的计算结果是30。</p>
    <p>您也可以在表达式中使用变量:</p>
    <pre class="wp-block-code"><code>Const a = 10;Const b = 20;a + b</code></pre>
    <p>第三行是表达式,也评估为30。</p>
    <p></p>
    <p></p>
    <p></p>
    <h4><strong>关键词和保留单词</strong></h4>
    <p>JavaScript针对某些自己的方法使用特定名称。因此,您无法为自己的变量,函数和类使用相同的名称。这些称为关键字或保留单词。以下是其中的列表:</p>
    <figure class="wp-block-table">
     <table>
      <tbody>
       <tr>
        <td>抽象的</td>
        <td>参数</td>
        <td>等待</td>
        <td>布尔</td>
       </tr>
       <tr>
        <td>休息</td>
        <td>字节</td>
        <td>案件</td>
        <td>抓住</td>
       </tr>
       <tr>
        <td>char</td>
        <td>类</td>
        <td>const</td>
        <td>继续</td>
       </tr>
       <tr>
        <td>调试器</td>
        <td>默认</td>
        <td>删除</td>
        <td>做</td>
       </tr>
       <tr>
        <td>双倍的</td>
        <td>别的</td>
        <td>枚举</td>
        <td>eval</td>
       </tr>
       <tr>
        <td>出口</td>
        <td>延伸</td>
        <td>假</td>
        <td>最后</td>
       </tr>
       <tr>
        <td>最后</td>
        <td>浮动</td>
        <td>为</td>
        <td>功能</td>
       </tr>
       <tr>
        <td>去</td>
        <td>如果</td>
        <td>实施</td>
        <td>进口</td>
       </tr>
       <tr>
        <td>在</td>
        <td>运算符</td>
        <td>int</td>
        <td>接口</td>
       </tr>
       <tr>
        <td>让</td>
        <td>长</td>
        <td>本国的</td>
        <td>新的</td>
       </tr>
       <tr>
        <td>空值</td>
        <td>包</td>
        <td>私人</td>
        <td>受保护的</td>
       </tr>
       <tr>
        <td>公共</td>
        <td>返回</td>
        <td>短的</td>
        <td>静态</td>
       </tr>
       <tr>
        <td>极好的</td>
        <td>转变</td>
        <td>同步</td>
        <td>这</td>
       </tr>
       <tr>
        <td>扔</td>
        <td>抛出</td>
        <td>瞬态</td>
        <td>真的</td>
       </tr>
       <tr>
        <td>尝试</td>
        <td>类型</td>
        <td>var.</td>
        <td>空白</td>
       </tr>
       <tr>
        <td>易挥发的</td>
        <td>尽管</td>
        <td>与</td>
        <td>屈服</td>
       </tr>
      </tbody>
     </table>
    </figure>
    <h3><strong>JavaScript变量</strong></h3>
    <p>JavaScript和其他编程语言使用变量来存储值。在上面的语法部分中,我们回顾了为变量创建名称的规则。</p>
    <h4><strong>数据类型</strong></h4>
    <p>JavaScript变量必须具有类型。JavaScript在分配时动态地确定变量的类型。以下是JavaScript支持的数据类型:</p>
    <ul>
     <li><strong>未定义的</strong>—当一个变量没有值时,它被赋值为这种类型。</li>
     <li><strong>空值</strong>- 此类型的变量不存在。它与undefined不同。</li>
     <li><strong>布尔基</strong>—该类型的变量可以为true或false。</li>
     <li><strong>字符串</strong>—该类型的变量可以包含字母和其他字符。它必须用单引号或双引号包围。</li>
     <li><strong>象征</strong>- 这种类型的变量是唯一的,不变的,并在ES6版本的JavaScript中添加。</li>
     <li><strong>数量</strong>- 这种类型的变量可以是整数,十进制,负数或科学符号。</li>
     <li><strong>目的</strong>- 这种类型的变量是复合类型。它具有属性和方法。它用逗号分隔并用括号包包的键值对表示。键访问属性和方法。</li>
     <li><strong>大批</strong>—这种类型的变量是用大括号括起来的值列表,用逗号分隔。值是通过值的索引访问的。JavaScript中的数组是从零开始的,这意味着该索引从0开始。</li>
    </ul>
    <p>这些例子有:</p>
    <pre class="wp-block-code"><code>//未定义的const a;// null const b = null;// boolean const c = true;//字符串const d =“String一个”;const e ='string with';//符号const f =符号();// number const g = 10;const h = 5.5;const i = -7;Const J = 123E-5; // Object const k = {carMake: "Toyota", carModel: "Prius", year: 2012, extColor: "black"}; // Array const l = ["White", "Blue", "Green"];</code></pre>
    <p>JavaScript数据类型是动态的,这意味着在使用VAR或设定的定义时,可以将变量重新分配到新类型。</p>
    <pre class="wp-block-code"><code>让x = 12;//类型是数字让x =“汽车”;//类型是字符串让x;//类型未定义</code></pre>
    <h4><strong>任务</strong></h4>
    <p>您可以使用赋值运算符为变量分配一个值,该值是等号(=)。这些是在JavaScript中定义变量的三种方法:</p>
    <ul>
     <li>在执行JavaScript之前处理使用此关键字定义的var  - 变量。</li>
     <li>让 - 可以重新分配使用此关键字定义的变量。它们也只能在它们中定义的块中使用。</li>
     <li>无法重新分配使用此关键字定义的const  - 变量。关键字代表常量。</li>
    </ul>
    <p>例子是:</p>
    <pre class="wp-block-code"><code>const a = '我不能被重新分配';让b = 'I only work in my code block';var c = '我不再经常使用';</code></pre>
    <p>对于大多数开发需求betwayapp下载安装,const和let是首选。</p>
    <h3><strong>JavaScript操作符</strong></h3>
    <p>JavaScript中的操作员是一个符号,以告诉编译器或解释器执行以下操作之一:</p>
    <h4><strong>算术</strong></h4>
    <p>其中一些应该熟悉。他们执行算术运算。</p>
    <figure class="wp-block-table">
     <table>
      <tbody>
       <tr>
        <td>操作员</td>
        <td>描述</td>
        <td>例子</td>
        <td>结果</td>
       </tr>
       <tr>
        <td>+</td>
        <td>添加</td>
        <td>x + y</td>
        <td>x和y的总和</td>
       </tr>
       <tr>
        <td>- - - - - -</td>
        <td>减法</td>
        <td>X  -  Y.</td>
        <td>X和Y的差异。</td>
       </tr>
       <tr>
        <td>*</td>
        <td>乘法</td>
        <td>x * y</td>
        <td>x和y的乘积。</td>
       </tr>
       <tr>
        <td>/</td>
        <td>分配</td>
        <td>x / y</td>
        <td>x和y的商</td>
       </tr>
       <tr>
        <td>%</td>
        <td>模量</td>
        <td>x%y</td>
        <td>x的剩余x除以y</td>
       </tr>
      </tbody>
     </table>
    </figure>
    <h4><strong>比较</strong></h4>
    <p>比较操作符比较两个值并返回true或false的布尔值。</p>
    <figure class="wp-block-table">
     <table>
      <tbody>
       <tr>
        <td>操作员</td>
        <td>名称</td>
        <td>例子</td>
        <td>结果</td>
       </tr>
       <tr>
        <td>= =</td>
        <td>平等的</td>
        <td>x = = y</td>
        <td>如果x等于y,则为true</td>
       </tr>
       <tr>
        <td>= = =</td>
        <td>相同的</td>
        <td>x === y</td>
        <td>如果x等于y,则为true,它们是相同的类型</td>
       </tr>
       <tr>
        <td>! =</td>
        <td>不平等的</td>
        <td>x!= y</td>
        <td>当x不等于y时为真</td>
       </tr>
       <tr>
        <td>= = !</td>
        <td>不完全相同</td>
        <td>x!== y</td>
        <td>如果x不等于y,或它们不属于同一类型,则为真</td>
       </tr>
       <tr>
        <td><</td>
        <td>少于</td>
        <td>X <Y.</td>
        <td>如果x小于y,则为true</td>
       </tr>
       <tr>
        <td>></td>
        <td>比...更棒</td>
        <td>x > y</td>
        <td>如果x大于y,则为true</td>
       </tr>
       <tr>
        <td>> =</td>
        <td>大于或等于</td>
        <td>x> = y</td>
        <td>如果x大于或等于y,则为true</td>
       </tr>
       <tr>
        <td>< =</td>
        <td>小于或等于</td>
        <td>x < = y</td>
        <td>当x小于等于y时为真</td>
       </tr>
      </tbody>
     </table>
    </figure>
    <h4><strong>逻辑(或关系)</strong></h4>
    <p>逻辑运算符用于组合条件陈述。</p>
    <figure class="wp-block-table">
     <table>
      <tbody>
       <tr>
        <td>操作员</td>
        <td>名称</td>
        <td>例子</td>
        <td>结果</td>
       </tr>
       <tr>
        <td>& &</td>
        <td>和</td>
        <td>x && Y.</td>
        <td>如果x和y都是真的,则为true</td>
       </tr>
       <tr>
        <td>||</td>
        <td>或者</td>
        <td>x | | y</td>
        <td>如果x或y为真,则为真</td>
       </tr>
       <tr>
        <td>!</td>
        <td>不是</td>
        <td>x !</td>
        <td>如果x不是真的,则为true</td>
       </tr>
      </tbody>
     </table>
    </figure>
    <h4><strong>任务</strong></h4>
    <p>JavaScript赋值操作符用于给变量赋值。</p>
    <figure class="wp-block-table">
     <table>
      <tbody>
       <tr>
        <td>操作员</td>
        <td>描述</td>
        <td>例子</td>
        <td>是相同的</td>
       </tr>
       <tr>
        <td>=</td>
        <td>分配</td>
        <td>x = Y.</td>
        <td>x = Y.</td>
       </tr>
       <tr>
        <td>+ =</td>
        <td>添加和分配</td>
        <td>x + = $</td>
        <td>X = X + y</td>
       </tr>
       <tr>
        <td>-  =</td>
        <td>减去和分配</td>
        <td>x  -  = y</td>
        <td>x = x  -  y</td>
       </tr>
       <tr>
        <td>* =</td>
        <td>乘以和分配</td>
        <td>x * = y</td>
        <td>x = x * y</td>
       </tr>
       <tr>
        <td>/ =</td>
        <td>划分并指定商</td>
        <td>x / y =</td>
        <td>X = X / y</td>
       </tr>
       <tr>
        <td>% =</td>
        <td>划分并分配模量</td>
        <td>x%= y</td>
        <td>x = x%y</td>
       </tr>
      </tbody>
     </table>
    </figure>
    <h4><strong>字符串运算符</strong></h4>
    <p>字符串运算符在字符串上运行。只有两个。</p>
    <figure class="wp-block-table">
     <table>
      <tbody>
       <tr>
        <td>操作员</td>
        <td>描述</td>
        <td>例子</td>
        <td>结果</td>
       </tr>
       <tr>
        <td>+</td>
        <td>级联</td>
        <td>str1 + str2.</td>
        <td>str1和str2的连接</td>
       </tr>
       <tr>
        <td>+ =</td>
        <td>级联任务</td>
        <td>str1 + = str2</td>
        <td>将str2附加到str1</td>
       </tr>
      </tbody>
     </table>
    </figure>
    <h3><strong>JavaScript条件</strong></h3>
    <p>JavaScript和其他编程语言使用条件来控制程序的流程。</p>
    <h4><strong>如果,否则,如果,还有其他</strong></h4>
    <p>如果满足IF条件,则应运行特定的代码块。否则如果语句仅执行以前的条件,则仅执行先前的条件。如果否则如果不满足语句条件,则它将执行掉后的else语句。</p>
    <p>例子:</p>
    <pre class="wp-block-code"><code>if(x <y){console.log('y更大');}如果(x> y){console.log('x更大');} else {console.log('这将永远不会运行。');}</code></pre>
    <h4><strong>转变</strong></h4>
    <p>变量,交换值,确定要执行的情况。Switch语句生存在单个代码块中,分号分隔彼此的情况。如果交换机值与任何一个情况不匹配,则运行默认选项。在每个Switch语句之后必须使用Break语句以退出交换机语句一旦遇到条件,或者它将继续测试条件。默认情况下的代码在满足其他条件中时运行。</p>
    <p>例如:</p>
    <pre class="wp-block-code"><code>const问候;Const Day ='星期一';切换(日){案例'星期一':问候='星期一快乐!';休息;案例'星期五':问候='TGIF!';休息;默认:问候='早上好!';休息;}</code></pre>
    <h3><strong>JavaScript循环</strong></h3>
    <p>循环允许您重复代码块,直到返回false。JavaScript支持三种类型的循环。</p>
    <h3><strong>为</strong></h3>
    <p>for循环是最常见的循环类型,它允许您运行特定次数的代码,并跟踪代码块中的循环次数。</p>
    <p>例如:</p>
    <pre class="wp-block-code"><code>for(让我= 1; i <10; i ++){console.log(i);}</code></pre>
    <p>在上面的循环中,循环计数器是变量I,并设置为1.第二个表达式告诉我们,在我小于10的时候,循环将运行。最终表达式为每个循环递增1递增1。</p>
    <h4><strong>尽管</strong></h4>
    <p>一会儿<em></em>循环重复代码块,直到条件返回false。当您没有特定数量的期望循环或想要循环时,您将应用此项,而某个条件证明是正确的。</p>
    <p>例如:</p>
    <pre class="wp-block-code"><code>设x = 0;让y = 1;而(x <10){x ++;y--;}</code></pre>
    <p>上面的循环将执行,而x小于10. x以0开始,每个循环的增量1,因此循环将执行10次。</p>
    <h4><strong>做</strong></h4>
    <p>这种类型的循环就像一小时的循环,但将至少运行一次代码块,无论是否满足指定的条件。</p>
    <p>例如:</p>
    <pre class="wp-block-code"><code>让计数= 20;do {alert('循环de循环!');数+ +;} while (count < 20);</code></pre>
    <p>上面的循环将运行20次。</p>
    <h3><strong>JavaScript函数</strong></h3>
    <p>JavaScript函数包含一个可重用代码块,其中包含旨在完成特定任务的语句。在JavaScript中使用function关键字创建函数。</p>
    <p>例如:</p>
    <pre class="wp-block-code"><code>function areaRectangle(width, height) {alert (" The area is " + (width * height) + " feet.");} areaRectangle(10、20);//结果是“面积是200英尺。”</code></pre>
    <p>在上面的示例中,我们有一个功能,它将创建一个警报告诉我们名为Arearentangle的矩形区域。在此功能中,宽度和高度称为参数。在示例的最后一行中,我们执行函数。</p>
    <h2><strong>结论</strong></h2>
    <p>本教程应该让您开始学习JavaScript的基础知识。关于这种强大的编程语言还有很多需要学习的内容,但是有了这些知识,您应该能够理解这种语言的术语,并遵循更高级的教程开始用JavaScript构建应用程序。</p>
    <footer class="article__meta-data">
     <p><em>页面上次更新:<span class="article__page-last-updated">2021年2月</span></em></p>
     <div class="footer-author-border-top">
      <div class="footer-author-section">
       <div class="author-flex-container">
        <div class="author-heading-container">
         <div class="author-avatar-section">
          <img src="https://i.udemycdn.com/user/50x50/5487312_0554.jpg" alt="斯蒂芬格莱德里">
         </div>
         <div class="author-text-section">
          <div class="article__author-name">
           斯蒂芬格莱德里</div>
          <div class="article__author-title">
           Udemy for Business教练</div>
         </div>
        </div>
        <div class="profile-button-wrapper">
         <a href="https://www.udemy.com/user/sgslo/" class="btn btn-primary btn-bio">Stephen Grider的Udemy配置文件</a>
        </div>
       </div>
       <div class="article__author-bio">
        <p>Stephen Grider一直在为旧金山湾区的顶级企业构建复杂的Javascript前端。凭借简化复杂主题的天生能力,Stephen已经指导工程师开始他们的软件开发职业生涯多年,现在已经扩展到Udemy,编写最高评级的React课程。betwayapp下载安装他在Udemy上授课,与其他软件工程师分享他获得的知识。通过学习斯蒂芬出版的课程来投资自己。</p>
       </div>
       <div class="article__author-links-header">
        最近的斯蒂芬·格拉德的文章</div>
       <ul>
        <li><a href="//www.mostynfirm.com/20-docker-interview-questions-and-answers-for-job-candidates/">20+ Docker面试问题和求职者的答案</a></li>
        <li><a href="//www.mostynfirm.com/4-ways-docker-makes-engineers-more-efficient/">4种方式DOCKER使工程师更高效</a></li>
       </ul>
      </div>
     </div>
     <div class="recommended-articles">
      <h3>推荐的文章</h3>
      <div class="row category-links__article-row slider3">
       <div class="article-card article-card__border-right">
        <div class="article-card__content">
         <div class="article-card__category">
          betwayapp下载安装
         </div>
         <h2 class="article-card__title"><a href="//www.mostynfirm.com/java-vs-javascript-programming-languages-what-are-the-differences/" target="_self">Java与JavaScript编程语言:差异是什么?</a></h2>
         <div class="article-card__author-name">
          Tim Buchalka.</div>
         <div class="article-card__excerpt"></div>
        </div>
       </div>
       <div class="article-card article-card__border-right">
        <div class="article-card__content">
         <div class="article-card__category">
          betwayapp下载安装
         </div>
         <h2 class="article-card__title"><a href="//www.mostynfirm.com/javascript-absolute-value/" target="_self">Javascript绝对值方法:如何和何时使用它</a></h2>
         <div class="article-card__author-name">
          Udemy编辑器</div>
         <div class="article-card__excerpt"></div>
        </div>
       </div>
       <div class="article-card article-card__border-right">
        <div class="article-card__content">
         <div class="article-card__category">
          betwayapp下载安装
         </div>
         <h2 class="article-card__title"><a href="//www.mostynfirm.com/javascript-convert-string-to-number/" target="_self">JavaScript:将字符串转换为数字</a></h2>
         <div class="article-card__author-name">
          Udemy编辑器</div>
         <div class="article-card__excerpt"></div>
        </div>
       </div>
       <div class="article-card article-card__border-right">
        <div class="article-card__content">
         <div class="article-card__category">
          betwayapp下载安装
         </div>
         <h2 class="article-card__title"><a href="//www.mostynfirm.com/javascript-parsefloat/" target="_self">JavaScript parseFloat:一种将字符串转换为浮点数的简单方法</a></h2>
         <div class="article-card__author-name">
          Udemy编辑器</div>
         <div class="article-card__excerpt"></div>
        </div>
       </div>
       <div class="article-card article-card__border-right">
        <div class="article-card__content">
         <div class="article-card__category">
          betwayapp下载安装
         </div>
         <h2 class="article-card__title"><a href="//www.mostynfirm.com/javascript-hello-world/" target="_self">Hello World: How to Write Your First Program in JavaScript</a></h2>
         <div class="article-card__author-name">
          Kasia mikoluk.</div>
         <div class="article-card__excerpt"></div>
        </div>
       </div>
       <div class="article-card article-card__border-right">
        <div class="article-card__content">
         <div class="article-card__category">
          betwayapp下载安装
         </div>
         <h2 class="article-card__title"><a href="//www.mostynfirm.com/javascript-date-comparison/" target="_self">JavaScript日期比较:快速和简单</a></h2>
         <div class="article-card__author-name">
          Udemy编辑器</div>
         <div class="article-card__excerpt"></div>
        </div>
       </div>
       <div class="article-card article-card__border-right">
        <div class="article-card__content">
         <div class="article-card__category">
          betwayapp下载安装
         </div>
         <h2 class="article-card__title"><a href="//www.mostynfirm.com/jquery-vs-javascript-2-cual-es-la-diferencia-en-definitiva/" target="_self">JQuery vs. JavaScript:¿Cuál es la Diferencia En Definitiva?</a></h2>
         <div class="article-card__author-name">
          Kasia mikoluk.</div>
         <div class="article-card__excerpt"></div>
        </div>
       </div>
       <div class="article-card article-card__border-right">
        <div class="article-card__content">
         <div class="article-card__category">
          betwayapp下载安装
         </div>
         <h2 class="article-card__title"><a href="//www.mostynfirm.com/javascript-array-splice/" target="_self">使用JavaScript数组拼接开始您的生产力</a></h2>
         <div class="article-card__author-name">
          Udemy编辑器</div>
         <div class="article-card__excerpt"></div>
        </div>
       </div>
       <div class="article-card article-card__border-right">
        <div class="article-card__content">
         <div class="article-card__category">
          betwayapp下载安装
         </div>
         <h2 class="article-card__title"><a href="//www.mostynfirm.com/javascript-array-length/" target="_self">JavaScript数组长度:它是什么以及如何使用它</a></h2>
         <div class="article-card__author-name">
          Udemy编辑器</div>
         <div class="article-card__excerpt"></div>
        </div>
       </div>
       <div class="article-card article-card__border-right">
        <div class="article-card__content">
         <div class="article-card__category">
          betwayapp下载安装
         </div>
         <h2 class="article-card__title"><a href="//www.mostynfirm.com/javascript-split/" target="_self">如何使用JavaScript分割方法分割字符串和字符串对象</a></h2>
         <div class="article-card__author-name">
          Udemy编辑器</div>
         <div class="article-card__excerpt"></div>
        </div>
       </div>
       <div class="article-card article-card__border-right">
        <div class="article-card__content">
         <div class="article-card__category">
          betwayapp下载安装
         </div>
         <h2 class="article-card__title"><a href="//www.mostynfirm.com/javascript-slideshow-tutorial/" target="_self">JavaScript幻灯片变得简单</a></h2>
         <div class="article-card__author-name">
          Udemy编辑器</div>
         <div class="article-card__excerpt"></div>
        </div>
       </div>
       <div class="article-card article-card__border-right">
        <div class="article-card__content">
         <div class="article-card__category">
          betwayapp下载安装
         </div>
         <h2 class="article-card__title"><a href="//www.mostynfirm.com/validation-in-javascript/" target="_self">JavaScript验证:客户端验证概述</a></h2>
         <div class="article-card__author-name">
          Udemy编辑器</div>
         <div class="article-card__excerpt"></div>
        </div>
       </div>
       <div class="article-card article-card__border-right">
        <div class="article-card__content">
         <div class="article-card__category">
          betwayapp下载安装
         </div>
         <h2 class="article-card__title"><a href="//www.mostynfirm.com/javascript-if-else/" target="_self">JavaScript如果其他所有其他失败的陈述</a></h2>
         <div class="article-card__author-name">
          Udemy编辑器</div>
         <div class="article-card__excerpt"></div>
        </div>
       </div>
       <div class="article-card article-card__border-right">
        <div class="article-card__content">
         <div class="article-card__category">
          betwayapp下载安装
         </div>
         <h2 class="article-card__title"><a href="//www.mostynfirm.com/javascript-tutorial-learn-the-basics/" target="_self">JavaScript教程:了解基础知识</a></h2>
         <div class="article-card__author-name">
          斯蒂芬格莱德里</div>
         <div class="article-card__excerpt"></div>
        </div>
       </div>
      </div>
     </div>
    </footer>
   </div>
   <div class="modal fade" id="shareModal" tabindex="-1" role="dialog" aria-labelledby="shareModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
     <div class="modal-content">
      <div class="modal-header align-items-center">
       <h5 class="modal-title" id="shareModalLabel">分享这篇文章</h5>
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><img src="//www.mostynfirm.com/wp-content/themes/udemyblog/img/close_icon.svg" alt="关闭图标"></span></button>
      </div>
      <div class="modal-body">
       <ul class="share-modal__icon-list list-unstyled a2a_kit">
        <li>
         <div class="input-group share-modal__input">
          <input id="share-copy-url" type="text" class="form-control share-modal__copy-input" value="//www.mostynfirm.com/javascript-tutorial-learn-thea -basics." aria-label="Copy share link" aria-describedby="">
          <div class="input-group-append">
           <button class="btn btn-outline-secondary btn-share-modal" data-clipboard-target="#share-copy-url" type="button">复制</button>
          </div>
         </div><p id="copy-success-msg" class="copy-tooltip" data-tooltip="Copied!"></p><p id="copy-error-msg" class="copy-tooltip copy-tooltip--error" data-tooltip="Unknown error"></p></li>
        <li><a class="a2a_button_facebook"><span class="share-modal__icon fb-icon"><img src="//www.mostynfirm.com/wp-content/themes/udemyblog/img/fb_icon.svg" alt="Facebook图标"></span></a></li>
        <li><a class="a2a_button_twitter"><span class="share-modal__icon twitter-icon"><img src="//www.mostynfirm.com/wp-content/themes/udemyblog/img/twitter_icon.svg" alt="Twitter图标"></span></a></li>
        <li><a class="a2a_button_email"><span class="share-modal__icon email-icon"><img src="//www.mostynfirm.com/wp-content/themes/udemyblog/img/email_icon.svg" alt="电子邮件图标"></span></a></li>
       </ul>
      </div>
     </div>
    </div>
   </div>
   <div id="default-courses-module" class="full-width-override module-block default-module courses-block my-5">
    <div class="container">
     <h3 class="courses-block__title">javascript中的顶级课程</h3>
     <div class="row slider5">
      <div class="course-card col-sm">
       <div class="inner-container">
        <a href="https://www.udemy.com/course/50-projects-50-days/" target="_blank" rel="noopener">
         <div class="course-card__image" style="background-image: url(https://img-a.udemycdn.com/course/304x171/3671332_b86a.jpg?yFvwuczVxVacJoxM6ZXT0K-rHaKXpgeJdLuiUj2XY-KEN06Cd5KqvEdA6e6oTgFb9PEJzHubiH15ivtOPnb_w8yBHf12f5nowpvH3NKjj-pSjUtwdIhF-WFt8GJsuA);"></div></a>
        <a class="course-card__title" href="https://www.udemy.com/course/50-projects-50-days/" target="_blank" rel="noopener">50天的50个项目 -  HTML,CSS和JavaScript</a>
        <div class="course-card__instructors">
         布拉德·特拉弗斯,弗洛林·波普</div>
        <div class="course-card__rating">
         <span class="course-card__rating-number">4.7</span>
         <span class="star-rating-container"><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star star-rating__star--halffilled"></span></span>
         <span class="course-card__num_reviews">(3,159)</span>
        </div>
        <div class="course-card__badge course-card__badge--bestseller">
         畅销书</div>
       </div>
      </div>
      <div class="course-card col-sm">
       <div class="inner-container">
        <a href="https://www.udemy.com/course/the-complete-javascript-course/" target="_blank" rel="noopener">
         <div class="course-card__image" style="background-image: url(https://img-b.udemycdn.com/course/304x171/851712_fc61_6.jpg?secure=2iMZ6ctmoKJg9a6PVUywJA%3D%3D%2C1618448659);"></div></a>
        <a class="course-card__title" href="https://www.udemy.com/course/the-complete-javascript-course/" target="_blank" rel="noopener">完整的JavaScript课程2021:从零到专家!</a>
        <div class="course-card__instructors">
         Jonas Schmedtmann.</div>
        <div class="course-card__rating">
         <span class="course-card__rating-number">4.7</span>
         <span class="star-rating-container"><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star star-rating__star--halffilled"></span></span>
         <span class="course-card__num_reviews">(101866)</span>
        </div>
        <div class="course-card__badge course-card__badge--bestseller">
         畅销书</div>
       </div>
      </div>
      <div class="course-card col-sm">
       <div class="inner-container">
        <a href="https://www.udemy.com/course/javascript-the-complete-guide-2020-beginner-advanced/" target="_blank" rel="noopener">
         <div class="course-card__image" style="background-image: url(https://img-a.udemycdn.com/course/304x171/2508942_11d3_3.jpg?Jjq-dKB0NMEuFrd-FSxf9jlhGaicrkXdXamJD6p2Hrp1lYufNJt6TQgsafsl4v_4htH1gSRHEt1IK5w8aGi-LmTv8brhDBdfQhIOMCDzSwhEt0Sl16OSh9beAxh1eON-);"></div></a>
        <a class="course-card__title" href="https://www.udemy.com/course/javascript-the-complete-guide-2020-beginner-advanced/" target="_blank" rel="noopener">JavaScript -完整指南2021(初学者+高级)</a>
        <div class="course-card__instructors">
         CaximilianSchwarzmüller的Academind,MaximilianSchwarzmüller</div>
        <div class="course-card__rating">
         <span class="course-card__rating-number">4.7</span>
         <span class="star-rating-container"><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star star-rating__star--halffilled"></span></span>
         <span class="course-card__num_reviews">(13,785)</span>
        </div>
       </div>
      </div>
      <div class="course-card col-sm">
       <div class="inner-container">
        <a href="https://www.udemy.com/course/understand-javascript/" target="_blank" rel="noopener">
         <div class="course-card__image" style="background-image: url(https://img-b.udemycdn.com/course/304x171/364426_2991_6.jpg?secure=KBA7JqZnirb0lz2XsW7Pqg%3D%3D%2C1618444903);"></div></a>
        <a class="course-card__title" href="https://www.udemy.com/course/understand-javascript/" target="_blank" rel="noopener">JavaScript:了解奇怪的部件</a>
        <div class="course-card__instructors">
         Anthony Alicea</div>
        <div class="course-card__rating">
         <span class="course-card__rating-number">4.7</span>
         <span class="star-rating-container"><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star star-rating__star--halffilled"></span></span>
         <span class="course-card__num_reviews">(41132)</span>
        </div>
       </div>
      </div>
      <div class="course-card col-sm">
       <div class="inner-container">
        <a href="https://www.udemy.com/course/modern-javascript-from-novice-to-ninja/" target="_blank" rel="noopener">
         <div class="course-card__image" style="background-image: url(https://img-b.udemycdn.com/course/304x171/2201164_831a.jpg?secure=a-10x_hFe--rKu_srP2yWg%3D%3D%2C1618444902);"></div></a>
        <a class="course-card__title" href="https://www.udemy.com/course/modern-javascript-from-novice-to-ninja/" target="_blank" rel="noopener">现代JavaScript(完整指南,从新手到忍者)</a>
        <div class="course-card__instructors">
         网络忍者(肖恩·佩林)</div>
        <div class="course-card__rating">
         <span class="course-card__rating-number">4.8</span>
         <span class="star-rating-container"><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span></span>
         <span class="course-card__num_reviews">(6320)</span>
        </div>
        <div class="course-card__badge course-card__badge--highest-rated">
         评价最高</div>
       </div>
      </div>
      <div class="course-card col-sm">
       <div class="inner-container">
        <a href="https://www.udemy.com/course/learn-javascript-full-stack-from-scratch/" target="_blank" rel="noopener">
         <div class="course-card__image" style="background-image: url(https://img-a.udemycdn.com/course/304x171/1436332_1fc3_5.jpg?rYrOORfJA6MeGmrIKPFYQqA_0u3HvyhEuT8bUGc_OBkxaPXbYsmwPkRPMnkp_Wm4ORG35p12JtJjRRONlbPcs5cHQeafc-V8XtZkCXlJBHBqGMCCM1rSx0h5tAt_UnID);"></div></a>
        <a class="course-card__title" href="https://www.udemy.com/course/learn-javascript-full-stack-from-scratch/" target="_blank" rel="noopener">学习JavaScript:从头开始满堆栈</a>
        <div class="course-card__instructors">
         布拉德希夫</div>
        <div class="course-card__rating">
         <span class="course-card__rating-number">4.8</span>
         <span class="star-rating-container"><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span></span>
         <span class="course-card__num_reviews">(3,440)</span>
        </div>
       </div>
      </div>
      <div class="course-card col-sm">
       <div class="inner-container">
        <a href="https://www.udemy.com/course/javascript-tutorial-for-beginners-w/" target="_blank" rel="noopener">
         <div class="course-card__image" style="background-image: url(https://img-a.udemycdn.com/course/304x171/1518026_77fb_4.jpg?0kC_maq0lFcwkvB1JG93emNfhoW6X-evz5vTg8Nf6jSheY-nEy_tOq-bW1CusPME9XUKBalDvROFyzcAfY50gNzxpsYTIp31AYP1diP4ztfl9XdLfoO3xizRL16tLrtf);"></div></a>
        <a class="course-card__title" href="https://www.udemy.com/course/javascript-tutorial-for-beginners-w/" target="_blank" rel="noopener">Javascript教程和项目课程</a>
        <div class="course-card__instructors">
         John Smilga.</div>
        <div class="course-card__rating">
         <span class="course-card__rating-number">4.7</span>
         <span class="star-rating-container"><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star star-rating__star--halffilled"></span></span>
         <span class="course-card__num_reviews">(1,647)</span>
        </div>
       </div>
      </div>
      <div class="course-card col-sm">
       <div class="inner-container">
        <a href="https://www.udemy.com/course/advanced-javascript-concepts/" target="_blank" rel="noopener">
         <div class="course-card__image" style="background-image: url(https://img-a.udemycdn.com/course/304x171/1501104_967d_13.jpg?f17ZFbz_wpgs44Ar5G41_GrlwPIiNe33amvV3_H3TS0oRovfTOW95M4IboQaHg01iHHCCeGKgLXFiLVsM1kMPrePoPQJUZsi96Cnv29HXcr84H-Wngn7hrdiU5S0cE-Tpg);"></div></a>
        <a class="course-card__title" href="https://www.udemy.com/course/advanced-javascript-concepts/" target="_blank" rel="noopener">JavaScript:高级概念(2021)</a>
        <div class="course-card__instructors">
         安德烈Neageie.</div>
        <div class="course-card__rating">
         <span class="course-card__rating-number">4.8</span>
         <span class="star-rating-container"><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span></span>
         <span class="course-card__num_reviews">(7,807)</span>
        </div>
       </div>
      </div>
      <div class="course-card col-sm">
       <div class="inner-container">
        <a href="https://www.udemy.com/course/es6-in-depth/" target="_blank" rel="noopener">
         <div class="course-card__image" style="background-image: url(https://img-a.udemycdn.com/course/304x171/1105822_de56_4.jpg?raVoqO80hNBjuQeQjI805ezqMBljBK8VSvas9fysKoaKGmGmzOR0RD4KH6OAE_mQSW5ZBp0piyPOndjX_5aaPK0FnwJWblDepIZiNV6exkgPGAJccxXmq_Ux6HJ4Shrk);"></div></a>
        <a class="course-card__title" href="https://www.udemy.com/course/es6-in-depth/" target="_blank" rel="noopener">完整的JavaScript & ES6教程-(包括ES7 & React)</a>
        <div class="course-card__instructors">
         大卫约瑟夫卡茨</div>
        <div class="course-card__rating">
         <span class="course-card__rating-number">4.5</span>
         <span class="star-rating-container"><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star star-rating__star--halffilled"></span></span>
         <span class="course-card__num_reviews">(2,965)</span>
        </div>
       </div>
      </div>
      <div class="course-card col-sm">
       <div class="inner-container">
        <a href="https://www.udemy.com/course/youtube-clone/" target="_blank" rel="noopener">
         <div class="course-card__image" style="background-image: url(https://img-a.udemycdn.com/course/304x171/1551858_d095_2.jpg?ACx5PaQ-iutJ9c8C2x6_vVtMzfI8PaBs9IjgNOunRVBLU01aelbX8kjX1xKXCv65IgxUhHEeYDNme7eHpNu3tc1f8o7tM5SOwBnh_VdD-q82moSffeI4KK1BpSKqCjPr);"></div></a>
        <a class="course-card__title" href="https://www.udemy.com/course/youtube-clone/" target="_blank" rel="noopener">从头开始制作youtube克隆:javascript php和mysql</a>
        <div class="course-card__instructors">
         Reece Kenney.</div>
        <div class="course-card__rating">
         <span class="course-card__rating-number">4.9</span>
         <span class="star-rating-container"><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span></span>
         <span class="course-card__num_reviews">(553)</span>
        </div>
       </div>
      </div>
      <div class="course-card col-sm">
       <div class="inner-container">
        <a href="https://www.udemy.com/course/javascript-bible/" target="_blank" rel="noopener">
         <div class="course-card__image" style="background-image: url(https://img-a.udemycdn.com/course/304x171/1586988_dcb2_15.jpg?ks2oGet40R1tE8I3-84KyRjOkr_1-GaCkUDlv3tga1pKAbJJtg5gYi_1FwByXIAjk_tDzLbmdGwUOnlF-nRvEMGiFbV38agq8KLOAFTjyKVs-Iyu5gw6VUBuOQp0vs3H5w);"></div></a>
        <a class="course-card__title" href="https://www.udemy.com/course/javascript-bible/" target="_blank" rel="noopener">JavaScript圣经- JavaScript训练营2021年</a>
        <div class="course-card__instructors">
         Bogdan Stashchuk.</div>
        <div class="course-card__rating">
         <span class="course-card__rating-number">4.8</span>
         <span class="star-rating-container"><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span></span>
         <span class="course-card__num_reviews">(1,180)</span>
        </div>
       </div>
      </div>
      <div class="course-card col-sm">
       <div class="inner-container">
        <a href="https://www.udemy.com/course/build-interactive-websites-1/" target="_blank" rel="noopener">
         <div class="course-card__image" style="background-image: url(https://img-a.udemycdn.com/course/304x171/2696476_a0f5.jpg?L-S40Z5-7nt6Kg3U64360mGhr4Ie3LdHKgin05hRxFTRF6hcsqVKqEkNE8IYew-lJHessg3Me47iYJwCFpa6vhEBeWru7QDU-8OrPdOaJ8DDsgf95-SWJs8ausgk0A);"></div></a>
        <a class="course-card__title" href="https://www.udemy.com/course/build-interactive-websites-1/" target="_blank" rel="noopener">* new * dom 2021使用JavaScript第1部分构建动态网站</a>
        <div class="course-card__instructors">
         Clyde Matthew.</div>
        <div class="course-card__rating">
         <span class="course-card__rating-number">4.8</span>
         <span class="star-rating-container"><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span></span>
         <span class="course-card__num_reviews">(320)</span>
        </div>
       </div>
      </div>
     </div>
     <p class="text-center mb-0"><a href="https://www.udemy.com/topic/javascript/" class="btn btn-primary btn-courses" target="_blank" rel="noopener">更多JavaScript课程</a></p>
    </div>
   </div>
   <div id="default-topics-module" class="full-width-override module-block default-module topics-block my-5">
    <h3 class="topics-block__title">JavaScript的学生也会学到</h3>
    <div class="topics-block-list-container">
     <a class="btn" href="https://www.udemy.com/topic/web-development/" target="_blank" rel="noopener">Web开betwayapp下载安装发</a>
     <a class="btn" href="https://www.udemy.com/topic/nodejs/" target="_blank" rel="noopener">node.js.</a>
     <a class="btn" href="https://www.udemy.com/topic/react/" target="_blank" rel="noopener">反应</a>
     <a class="btn" href="https://www.udemy.com/topic/css/" target="_blank" rel="noopener">CSS.</a>
     <a class="btn" href="https://www.udemy.com/topic/html/" target="_blank" rel="noopener">超文本标记语言</a>
     <a class="btn" href="https://www.udemy.com/topic/mongodb/" target="_blank" rel="noopener">MongoDB</a>
     <a class="btn" href="https://www.udemy.com/topic/front-end-web-development/" target="_blank" rel="noopener">前端Web开发betwayapp下载安装</a>
     <a class="btn" href="https://www.udemy.com/topic/python/" target="_blank" rel="noopener">Python</a>
     <a class="btn" href="https://www.udemy.com/topic/vue-js/" target="_blank" rel="noopener">Vue Js.</a>
     <a class="btn" href="https://www.udemy.com/topic/php/" target="_blank" rel="noopener">PHP.</a>
     <a class="btn" href="https://www.udemy.com/topic/java/" target="_blank" rel="noopener">java.</a>
     <a class="btn" href="https://www.udemy.com/topic/html5/" target="_blank" rel="noopener">HTML5.</a>
     <a class="btn" href="https://www.udemy.com/topic/angular/" target="_blank" rel="noopener">棱角</a>
     <a class="btn" href="https://www.udemy.com/topic/web-design/" target="_blank" rel="noopener">网页设计</a>
    </div>
   </div>
   <div id="default-demo-module" class="full-width-override module-block default-module cta-module-block bg-color-green-500 my-5">
    <h2 class="cta-module-block__title">赋予你的团队。引领行业。</h2>
    <div class="cta-module-block__content">
     <p></p>
     <p>通过Udemy为Business获取组织的在线课程和数字学习工具库的订阅。</p>
     <p></p>
    </div>
    <a class="btn btn-primary btn-primary--cta solid" href="https://business.udemy.com/request-demo/" target="_blank">请求一个演示</a>
   </div>
   <div id="default-courses-module" class="full-width-override module-block default-module courses-block instructors-courses-block my-5">
    <div class="container">
     <h2 class="courses-block__title">斯蒂芬·莱特德课程</h2>
     <h3 class="courses-block__title"></h3>
     <div class="row slider5">
      <div class="course-card col-sm">
       <div class="inner-container">
        <a href="https://www.udemy.com/course/react-redux/" target="_blank" rel="noopener">
         <div class="course-card__image" style="background-image: url(https://img-a.udemycdn.com/course/480x270/705264_caa9_11.jpg?ekiHRVvwfguiXec3xe281lnXkjp_oZdV0VBvrsl55DUWGV3LbXNdAmwDetl2Lvb-gH9jJPJhMliRiZSmwUQTpnk0D7H-iqZ1J5elzd4Te01SnLiYxagtiVeakp0Grv5i);"></div></a>
        <a class="course-card__title" href="https://www.udemy.com/course/react-redux/" target="_blank" rel="noopener">与Redux的现代反应[2020更新]</a>
        <div class="course-card__instructors">
         斯蒂芬格莱德里</div>
        <div class="course-card__rating">
         <span class="course-card__rating-number">4.7</span>
         <span class="star-rating-container"><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star star-rating__star--halffilled"></span></span>
         <span class="course-card__num_reviews">(67,465)</span>
        </div>
        <div class="course-card__badge course-card__badge--bestseller">
         畅销书</div>
       </div>
      </div>
      <div class="course-card col-sm">
       <div class="inner-container">
        <a href="https://www.udemy.com/course/react-redux-tutorial/" target="_blank" rel="noopener">
         <div class="course-card__image" style="background-image: url(https://img-b.udemycdn.com/course/480x270/781532_8b4d_6.jpg?secure=eAZDni4S2RQeq-IGZj3lmA%3D%3D%2C1618474053);"></div></a>
        <a class="course-card__title" href="https://www.udemy.com/course/react-redux-tutorial/" target="_blank" rel="noopener">高级反应和redux</a>
        <div class="course-card__instructors">
         斯蒂芬格莱德里</div>
        <div class="course-card__rating">
         <span class="course-card__rating-number">4.5</span>
         <span class="star-rating-container"><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star star-rating__star--halffilled"></span></span>
         <span class="course-card__num_reviews">(9,846)</span>
        </div>
       </div>
      </div>
      <div class="course-card col-sm">
       <div class="inner-container">
        <a href="https://www.udemy.com/course/meteor-react-tutorial/" target="_blank" rel="noopener">
         <div class="course-card__image" style="background-image: url(https://img-a.udemycdn.com/course/480x270/832862_3f0c_5.jpg?v-uH5uxOSpK5kH8z9tD0dr7De6BPCcTr-YqfkORX9-yWDvtNh-qDOJWJj8sLx2rL5jYyI-X0aRHd-m7IsMEtdRQy7MYO3c8wDL_Ao4Li7aFDX8TNzJI8UdogecP9osY);"></div></a>
        <a class="course-card__title" href="https://www.udemy.com/course/meteor-react-tutorial/" target="_blank" rel="noopener">Meteor和React for Realtime Apps</a>
        <div class="course-card__instructors">
         斯蒂芬格莱德里</div>
        <div class="course-card__rating">
         <span class="course-card__rating-number">4.8</span>
         <span class="star-rating-container"><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span></span>
         <span class="course-card__num_reviews">(1,930)</span>
        </div>
        <div class="course-card__badge course-card__badge--bestseller">
         畅销书</div>
       </div>
      </div>
      <div class="course-card col-sm">
       <div class="inner-container">
        <a href="https://www.udemy.com/course/javascript-es6-tutorial/" target="_blank" rel="noopener">
         <div class="course-card__image" style="background-image: url(https://img-a.udemycdn.com/course/480x270/861624_864d_2.jpg?EdN0DsrhyGGd-WBsDmE5w__rRoWIexPNw1-XJcKPIUP1CQGQSrxvocQHEFZfhnQnwSyxiFNazl9aq4dI066-JT80jQH5SZm5ZmRm4Tc6WUnuwlrPEvswPnY96k6y1xQ);"></div></a>
        <a class="course-card__title" href="https://www.udemy.com/course/javascript-es6-tutorial/" target="_blank" rel="noopener">ES6 Javascript:开发人员的完整指南</a>
        <div class="course-card__instructors">
         斯蒂芬格莱德里</div>
        <div class="course-card__rating">
         <span class="course-card__rating-number">4.5</span>
         <span class="star-rating-container"><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star star-rating__star--halffilled"></span></span>
         <span class="course-card__num_reviews">(9461)</span>
        </div>
       </div>
      </div>
      <div class="course-card col-sm">
       <div class="inner-container">
        <a href="https://www.udemy.com/course/the-complete-elixir-and-phoenix-bootcamp-and-tutorial/" target="_blank" rel="noopener">
         <div class="course-card__image" style="background-image: url(https://img-b.udemycdn.com/course/480x270/904462_042a_3.jpg?secure=7dFzwCuenuTCGbaS6r80tw%3D%3D%2C1618474053);"></div></a>
        <a class="course-card__title" href="https://www.udemy.com/course/the-complete-elixir-and-phoenix-bootcamp-and-tutorial/" target="_blank" rel="noopener">完整的Elixir和Phoenix Bootcamp</a>
        <div class="course-card__instructors">
         斯蒂芬格莱德里</div>
        <div class="course-card__rating">
         <span class="course-card__rating-number">4.5</span>
         <span class="star-rating-container"><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star star-rating__star--halffilled"></span></span>
         <span class="course-card__num_reviews">(5,652)</span>
        </div>
        <div class="course-card__badge course-card__badge--bestseller">
         畅销书</div>
       </div>
      </div>
      <div class="course-card col-sm">
       <div class="inner-container">
        <a href="https://www.udemy.com/course/the-complete-react-native-and-redux-course/" target="_blank" rel="noopener">
         <div class="course-card__image" style="background-image: url(https://img-a.udemycdn.com/course/480x270/959700_8bd2_11.jpg?EF_IKggG8yW3lXNO1Fy2LH3eFtkHjpzqz-czdnhkQ7y0xgWKjukFXkhhQIQBnTqXmG9FXltH0HpW3z54rYZuvRbi5440-BoIAahy494sVhfmiAAYCX4y1Ct3zFXvCLAA);"></div></a>
        <a class="course-card__title" href="https://www.udemy.com/course/the-complete-react-native-and-redux-course/" target="_blank" rel="noopener">完整的反应原生+钩子课程[2020版]</a>
        <div class="course-card__instructors">
         斯蒂芬格莱德里</div>
        <div class="course-card__rating">
         <span class="course-card__rating-number">4.6</span>
         <span class="star-rating-container"><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star star-rating__star--halffilled"></span></span>
         <span class="course-card__num_reviews">(37249)</span>
        </div>
        <div class="course-card__badge course-card__badge--bestseller">
         畅销书</div>
       </div>
      </div>
      <div class="course-card col-sm">
       <div class="inner-container">
        <a href="https://www.udemy.com/course/the-complete-developers-guide-to-mongodb/" target="_blank" rel="noopener">
         <div class="course-card__image" style="background-image: url(https://img-a.udemycdn.com/course/480x270/1000574_06cb.jpg?hrucFtG_65n46Q-9eHYlaTBla-cniL2twlbe3vKuf9vsGpgAdKpdVe6y1X6PJE2p6acb2dJi29pwD9m6G6kFXwgi2AnsV7jonb0j_en0NpnhrKagFvySSVy-MfaLmw);"></div></a>
        <a class="course-card__title" href="https://www.udemy.com/course/the-complete-developers-guide-to-mongodb/" target="_blank" rel="noopener">MongoDB的完整开发人员指南</a>
        <div class="course-card__instructors">
         斯蒂芬格莱德里</div>
        <div class="course-card__rating">
         <span class="course-card__rating-number">4.5</span>
         <span class="star-rating-container"><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star star-rating__star--halffilled"></span></span>
         <span class="course-card__num_reviews">(6214)</span>
        </div>
       </div>
      </div>
      <div class="course-card col-sm">
       <div class="inner-container">
        <a href="https://www.udemy.com/course/webpack-2-the-complete-developers-guide/" target="_blank" rel="noopener">
         <div class="course-card__image" style="background-image: url(https://img-a.udemycdn.com/course/480x270/1039062_e553_4.jpg?FsTFtmWUfIfa4ZxAORF5vb2FTkXVTQBhC2hz07v9ktePe-vwgy0AoWhTqNY5OUHaWc4IANaUwJbZ09DemonFZwmsW9OSi-f2W0JKu3E5A__GrD49A-TUFiSrq2HZukmr);"></div></a>
        <a class="course-card__title" href="https://www.udemy.com/course/webpack-2-the-complete-developers-guide/" target="_blank" rel="noopener">WebPack 2:完整的开发人员指南</a>
        <div class="course-card__instructors">
         斯蒂芬格莱德里</div>
        <div class="course-card__rating">
         <span class="course-card__rating-number">4.7</span>
         <span class="star-rating-container"><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star star-rating__star--halffilled"></span></span>
         <span class="course-card__num_reviews">(4932)</span>
        </div>
       </div>
      </div>
      <div class="course-card col-sm">
       <div class="inner-container">
        <a href="https://www.udemy.com/course/graphql-with-react-course/" target="_blank" rel="noopener">
         <div class="course-card__image" style="background-image: url(https://img-a.udemycdn.com/course/480x270/1109926_7f97_2.jpg?icXlSQEVOmbiYlKUYCkPbAGTBV9twLIFwueVrsDTbo-rPjzTQkMEurr9FJKLG0b1dFuEpIjQEl0E279gGTCcbEJ9C84NBJU89H3V6hDQ5PiPenVDbpufgF9j29qRNJ1R);"></div></a>
        <a class="course-card__title" href="https://www.udemy.com/course/graphql-with-react-course/" target="_blank" rel="noopener">GraphQL与React:完整的开发人员指南</a>
        <div class="course-card__instructors">
         斯蒂芬格莱德里</div>
        <div class="course-card__rating">
         <span class="course-card__rating-number">4.5</span>
         <span class="star-rating-container"><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star star-rating__star--halffilled"></span></span>
         <span class="course-card__num_reviews">(7,691)</span>
        </div>
        <div class="course-card__badge course-card__badge--bestseller">
         畅销书</div>
       </div>
      </div>
      <div class="course-card col-sm">
       <div class="inner-container">
        <a href="https://www.udemy.com/course/react-native-advanced/" target="_blank" rel="noopener">
         <div class="course-card__image" style="background-image: url(https://img-b.udemycdn.com/course/480x270/1172996_0241_5.jpg?secure=c56_l4k0z0i3rBXeCaFcsQ%3D%3D%2C1618474053);"></div></a>
        <a class="course-card__title" href="https://www.udemy.com/course/react-native-advanced/" target="_blank" rel="noopener">反应本地:高级概念</a>
        <div class="course-card__instructors">
         斯蒂芬格莱德里</div>
        <div class="course-card__rating">
         <span class="course-card__rating-number">4.3</span>
         <span class="star-rating-container"><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star star-rating__star--halffilled"></span></span>
         <span class="course-card__num_reviews">(4,730)</span>
        </div>
       </div>
      </div>
      <div class="course-card col-sm">
       <div class="inner-container">
        <a href="https://www.udemy.com/course/electron-react-tutorial/" target="_blank" rel="noopener">
         <div class="course-card__image" style="background-image: url(https://img-b.udemycdn.com/course/480x270/1200530_21e0_5.jpg?secure=aHS2R_uFQv1kOShUYDngYg%3D%3D%2C1618474053);"></div></a>
        <a class="course-card__title" href="https://www.udemy.com/course/electron-react-tutorial/" target="_blank" rel="noopener">电子桌面应用程序:完整的开发人员指南</a>
        <div class="course-card__instructors">
         斯蒂芬格莱德里</div>
        <div class="course-card__rating">
         <span class="course-card__rating-number">4.5</span>
         <span class="star-rating-container"><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star star-rating__star--halffilled"></span></span>
         <span class="course-card__num_reviews">(2795)</span>
        </div>
       </div>
      </div>
      <div class="course-card col-sm">
       <div class="inner-container">
        <a href="https://www.udemy.com/course/node-with-react-fullstack-web-development/" target="_blank" rel="noopener">
         <div class="course-card__image" style="background-image: url(https://img-a.udemycdn.com/course/480x270/1254420_f6cb_4.jpg?NvvFHRzivMP_vOV9L8HvhpwcLm6hxsa-j6ax-kcJLoewlHmorlj8H4OF2ncar094GwhY2S4bUoMJRKXmJUKBGaTNo26jwmZTLlRdHJWfDeThpY-5o5I4VPrQZWIjjvby);"></div></a>
        <a class="course-card__title" href="https://www.udemy.com/course/node-with-react-fullstack-web-development/" target="_blank" rel="noopener">具有React的节点:FullStack Web开发betwayapp下载安装</a>
        <div class="course-card__instructors">
         斯蒂芬格莱德里</div>
        <div class="course-card__rating">
         <span class="course-card__rating-number">4.6</span>
         <span class="star-rating-container"><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star"></span><span class="star-rating__star star-rating__star--halffilled"></span></span>
         <span class="course-card__num_reviews">(13,044)</span>
        </div>
       </div>
      </div>
     </div>
     <p class="text-center mb-0"><a href="https://www.udemy.com/user/sgslo/" class="btn btn-primary btn-courses" target="_blank" rel="noopener">斯蒂芬·莱特德课程</a></p>
    </div>
   </div>
  </article>
  <footer class="page-footer">
   <div class="teach-section">
    <div class="container">
     <div class="row align-items-center">
      <div class="col-sm-12 col-md-6">
       <h3 class="footer-teach__title">在网上教世界</h3>
       <div class="footer-teach__content">
        创建一个在线视频课程,到达全球的学生,赚钱。</div>
      </div>
      <div class="col-sm-12 col-md-6 text-md-right">
       <a class="btn btn-primary btn-primary--teach" target="_blank" rel="noopener" href="https://www.udemy.com/teaching/?ref=teach_header">教授UeDemy.</a>
      </div>
     </div>
    </div>
   </div>
   <hr>
   <div class="container footer_links">
    <div class="row">
     <div class="col-md-2">
      <nav class="nav-col nav-col--one">
       <div class="menu-footer-menu-column-one-container">
        <ul id="menu-footer-menu-column-one" class="list-unstyled">
         <li id="menu-item-203" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-203"><a href="https://business.udemy.com/?locale=en_US&ref=footer&mx_pg=clp-unknown">Udemy for Business.</a></li>
         <li id="menu-item-204" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-204"><a href="https://www.udemy.com/teaching/?ref=teach_footer">教授UeDemy.</a></li>
         <li id="menu-item-205" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-205"><a href="https://www.udemy.com/mobile/">Udemy应用程序</a></li>
         <li id="menu-item-206" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-206"><a href="https://about.udemy.com/?locale=en-us">关于我们</a></li>
        </ul>
       </div>
      </nav>
     </div>
     <hr class="w-100 clearfix d-md-none">
     <div class="col-md-2 mx-auto">
      <nav class="nav-col nav-col--two">
       <div class="menu-footer-menu-column-two-container">
        <ul id="menu-footer-menu-column-two" class="list-unstyled">
         <li id="menu-item-207" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-207"><a href="https://about.udemy.com/careers/?locale=en-us">职业生涯</a></li>
         <li id="menu-item-208" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-208"><a href="//www.mostynfirm.com">博客</a></li>
         <li id="menu-item-209" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-209"><a href="https://support.udemy.com/hc/en-us">帮助和支持</a></li>
         <li id="menu-item-210" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-210"><a href="https://www.udemy.com/affiliate/">联盟</a></li>
        </ul>
       </div>
      </nav>
     </div>
     <hr class="w-100 clearfix d-md-none">
     <div class="col-md-2 mx-auto">
      <nav class="nav-col nav-col--three">
       <div class="menu-footer-menu-column-three-container">
        <ul id="menu-footer-menu-column-three" class="list-unstyled">
         <li id="menu-item-211" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-211"><a href="https://www.udemy.com/sitemap/">网站地图</a></li>
         <li id="menu-item-212" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-212"><a href="https://www.udemy.com/popular-courses/">受欢迎的课程</a></li>
        </ul>
       </div>
      </nav>
     </div>
     <hr class="w-100 clearfix d-md-none">
     <div class="col-md-3"></div>
    </div>
   </div>
   <div class="container footer_links--mobile">
    <nav>
     <div class="menu-footer-menu-mobile-container">
      <ul id="menu-footer-menu-mobile" class="list-unstyled">
       <li id="menu-item-152137" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-152137"><a href="https://www.udemy.com/terms/">术语</a></li>
       <li id="menu-item-152138" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-152138"><a href="https://www.udemy.com/terms/privacy/">隐私政策和饼干政策</a></li>
       <li id="menu-item-152139" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-152139"><a href="https://www.udemy.com/sitemap/">网站地图</a></li>
       <li id="menu-item-152140" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-152140"><a href="https://www.udemy.com/popular-courses/">特色课程</a></li>
       <li id="menu-item-152141" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-152141"><a href="https://udemy.app.link/garBkjjtDO">下载这个软件</a></li>
      </ul>
     </div>
    </nav>
   </div>
   <hr class="footer-links__hr">
   <div class="container copyright-section">
    <div class="row">
     <div class="col-sm-5">
      <a class="navbar-brand" href="//www.mostynfirm.com/"><img class="logo" src="https://www.udemy.com/staticx/udemy/images/v6/logo-coral.svg" alt="betway体育官网下载"><span class="copyright">©2021 Udemy,Inc。</span></a>
     </div>
     <div class="col-sm-7 privacy-links">
      <span class="terms align-middle"><a class="mr-2" href="https://www.udemy.com/terms/">术语</a><a href="https://www.udemy.com/terms/privacy/">隐私政策和饼干政策</a></span>
     </div>
    </div>
   </div>
  </footer>
  <div class="mx_pg" data-mx_pg="blog_page_development"></div>
  <link rel="stylesheet" id="block-acf-courses-css" href="//www.mostynfirm.com/wp-content/themes/udemyblog/template-parts/block/block-admin.css?ver=5.7" type="text/css" media="all">
 </body>
</html>