Javascript 简介

网页里面使用的编程语言是 JavaScript ，简称 js 。

目前js语言规范，称之为 ECMAScript 。

ECMAScript规范的历史发布表如下

版本	发表日期	与前版本的差异
1	1997年6月	首版
2	1998年6月	格式修正，以使得其形式与ISO/IEC16262国际标准一致
3	1999年12月	强大的正则表达式，更好的词法作用域链处理，新的控制指令，异常处理，错误定义更加明确，数据输出的格式化及其它改变
4	放弃	由于关于语言的复杂性出现分歧，第4版本被放弃，其中的部分成为了第5版本及Harmony的基础；由ActionScript实现
5	2009年12月	新增“严格模式（strict mode）”，一个子集用作提供更彻底的错误检查,以避免结构出错。澄清了许多第3版本的模糊规范，并适应了与规范不一致的真实世界实现的行为。增加了部分新功能，如getters及setters，支持JSON
5.1	2011年6月	ECMAScript标5.1版形式上完全一致于国际标准ISO/IEC 16262:2011。
6	2015年6月	ECMAScript 2015（ES2015），第 6 版，最早被称作是 ECMAScript 6（ES6），添加了类和模块的语法，其他特性包括迭代器，Python风格的生成器和生成器表达式，箭头函数，二进制数据，静态类型数组，集合（maps，sets 和 weak maps），promise，reflection 和 proxies。作为最早的 ECMAScript Harmony 版本，也被叫做ES6 Harmony。
7	2016年6月	ECMAScript 2016（ES2016），第 7 版，多个新的概念和语言特性
8	2017年6月	ECMAScript 2017（ES2017），第 8 版，多个新的概念和语言特性
9	2018年6月	ECMAScript 2018 （ES2018），第 9 版，包含了异步循环，生成器，新的正则表达式特性和 rest/spread 语法。
10	2019年6月	ECMAScript 2019 （ES2019），第 10 版
11	2020年6月	ECMAScript 2020 （ES2020），第 11 版
12	2021年6月	ECMAScript 2021 （ES2021），第 12 版
13	2022年6月	ECMAScript 2022 （ES2022），第 13 版

目前主流浏览器已经基本支持ES6，所以本教程以ES6版本js规范为基础。

js代码可以包含在网页中，发明 js 的目的，就是放在网页中，让网页 动 起来，称为一个交互式的应用程序，而不仅仅式展示文章类的信息。

比如：百度地图根据用户搜索的地点展现对应的地图内容

再比如一些网站的登录页面，用户输入用户名、密码后 js代码做校验，发送给服务端。

再比如订单查询，网页js代码从服务端查询出订单数据，再由 js代码负责动态地更新网页HTML，呈现在界面上。

js 是解释性的编程语言，由js解释器解释执行。

现代的浏览器包括 Chrome、火狐、Edge、Safri 都内置了js解释器，解释执行 js 代码。

js 语言不仅仅只在浏览器中使用做前端开发，js语言已经走出了浏览器，用于其他领域，比如：后端服务开发、实时通讯、移动App开发（React Native）、桌面应用程序开发（Electron）等等

比如 Node.js 就是一个独立的js解释器（就像Python解释器一样），可以运行任何用js代码编写的应用程序。

代码编辑软件

js代码开发，使用什么编辑软件呢？

当然和前面学习HTML、CSS一样，推荐使用 vscode。

可以说是目前 Web前端开发最主流的集成开发环境（IDE）了

请大家点击这里，登录官网下载安装

网页中的js

js 为什么能让网页实现动态的功能？

因为浏览器给了网页中的js 几个重要的能力：

获取网页的内容
更改网页的内容
当某个事件发生时得到通知
和服务端进行通讯

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>黑羽学院 | 登录</title>

  <style>
    .center-child { display: flex; justify-content: center; }
  </style>

  <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>

  <script>
    function postLoginRequest(){
      let username = document.querySelector('#username').value;
      let password = document.querySelector('#password').value;

      let einfo = ''
      if (username.length <6 ){
        einfo = `用户名 ${username} 错误，至少6位数字`;
      }
      else if (password.length <6 ){
        einfo = `密码 ${password} 错误，至少6位数字`;
      }
      document.getElementById('errInfo').innerHTML = einfo

      // 发送登录请求      
      $.ajax({       
        type: 'POST', 
        url: '/api/mgr/signin', 
        data:  {
          username: username,
          password: password,
        },
        // 成功
        success: function(data, status, xhr) { 
          // jQuery 会自动将响应的消息体字符
          // 按json格式串反序列化为js对象
          if (data.ret === 0){
            location.href = '/hyms.html'
          }
          else{
            alert('登录失败： ' + data.msg)
          }

        },          
        // 错误  
        error:function (xhr, textStatus, errorThrown ){
          console.error(`${xhr.status} \n${textStatus} \n${errorThrown }`)
        }
      })  
    }

    function inputCheck(){
      let password = document.querySelector('#password').value;
      let einfo = ''
      if (password.length <6 ){
        einfo = `密码 ${password} 错误，至少6位数字`;
      }
      document.getElementById('errInfo').innerHTML = einfo  
    }
  </script>
</head>

<body >

  <!-- 输入区  -->
  <div class="center-child">
    <div style="margin-top: 5em;">
      <p >输入用户名、密码登录</p>

      <input type="text" class="form-control" id="username"  
        placeholder="用户名">

      <br><br>

      <input type="password" class="form-control" id="password"
        placeholder="密码" oninput="inputCheck()" >

      <br><br>

      <div class="center-child">        
        <button style="margin:0 auto"
          onclick="postLoginRequest()">登录</button>
      </div>

    </div>
  </div>

  <!-- 提示信息 -->
  <div class="center-child">
    <p style="color:red" id='errInfo'></p>
  </div>

</body>

</html>

获取/修改网页的内容

网页中的js 可以获取本网页的HTML文档结构，获取任何一段HTML信息。

比如：获取登录网页的输入框里面用户输入的用户名、密码

网页中的js 还可以修改 HTML信息，包括增加HTML元素、删除HTML元素、更改HTML元素属性等等。

比如：当发现输入的用户名小于6位数字，在界面上增加如下HTML内容：

<span>用户名长度至少6位</span>

当某个事件发生时得到通知

网页中的js可以定义一些函数（函数的概念后面会讲解），在某些事件发生时，执行这些函数里面的代码

举个例子：假如系统要求用户密码只能是数字。

我们课定义一个js函数，当密码输入框内容发生改变时，浏览器会调用这个函数。

这个函数里面的代码获取密码框的内容，检查里面是否有非法字符。

这样，无需等用户输入完密码，点击提交时，才做检查（有点迟），用户输入过程中就可以进行检查

和服务端进行通讯

上面的例子中，用户点击登录，可以发送登录请求给网站服务器。

详见视频讲解

有了上述的能力，js 把网页从纯静态的展示界面变成一个内置处理逻辑的应用程序。

那么如果你想开发这样的网页应用，必须掌握好 javascript 编程语言

js执行引擎

我们编写程序代码，就是要让计算机按照我们的想法去做事。

程序代码是用编程语言编写的，而 JavaScript 语言，是计算机硬件（主要是CPU）听不懂的语言。

计算机CPU只能听懂机器指令。

所以，我们需要一个翻译，把 js 代码翻译成计算机CPU能听懂的机器指令。

这个翻译就是 js引擎 软件，也就是执行js程序的程序。

这个原理如下图所示：

我们常见的包含js执行引擎的软件：一个是 浏览器 、另外一个是 node.js

这里我们先介绍浏览器

浏览器

每个浏览器（Edge、Chrome、Safri、Firefox）都内置了 js的执行引擎。

后面的教程里面的js代码大都是运行在浏览器里面的

DevTools Console

大家可以打开浏览器，按F12，打开 开发者工具栏（英文叫 DevTools） 界面，然后点击 控制台（Console）

这 Console 就是一个 js的交互式代码输入界面

我们可以执行下面的示例js代码，看看效果

输出内容到页面

document.write('你好')
document.write('白月黑羽')

输出内容到控制台

console.log('你好')
console.log('白月黑羽')

DevTools Console 里面输入js代码，主要是为了让开发者验证一些代码用的。

我们编写网页的时候，要执行功能的js代码，不可能让用户手动敲，而是放到网页里面。

这包含两种方式： HTML内嵌js代码 和 HTML引用外部js代码文件

HTML内嵌js代码

网页内嵌的js代码应该放在标签 script 中，成为一个 script 元素

包含js代码的 script元素，通常可以放在html的 head 或者 body 元素里面。

比如

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>白月黑羽web教学</title>

  <script>
  function add1() {
      document.querySelector("body").insertAdjacentHTML("beforeend", "<h1>今日新闻</h1>")
  } 
  </script>

</head>

<body>
  <script>    
    // 调用前面定义的 add1 函数
    add1()
  </script>

  <span id="version" class="title" style="color:blue">
  黑羽压测1.44版发布，支持数万并发</span> <br><br>

  <script>
  document.querySelector("body").insertAdjacentHTML("beforeend", "<span>谢谢大家</span>")
  </script>

</body>
</html>

document.querySelector('body').insertAdjacentHTML("beforeend", 就是在body的最后添加html内容。

body中的script代码，执行的顺序就是其在html文档中的顺序。

所以 <span>谢谢大家</span> 会出现在 <h1>今日新闻</h1> 的后面

HTML引用外部js代码文件

我们知道 CSS 可以嵌入 html，也可以独立在html外面，

同样，我们还可以把js内容放到另外一个文件，比如 my.js ，然后html里面声明引用它

像这样

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>白月黑羽web教学</title>

  <!-- 使用外部的js文件 -->
  <script  src="my.js"></script>
</head>

<body>
  <!-- 调用导入的js中的函数 -->
  <script>add1()</script>

  <span id='version' class="title" style='color:blue'>
  黑羽压测1.44版发布，支持数万并发</span> <br><br>

</body>
</html>

其中声明的外部的 my.js 文件内容如下：

function add1() {
  document.querySelector('body').insertAdjacentHTML("beforeend", '<h1>今日新闻2</h1>')
}

声明引用外部js，使用的html元素标签是 script

引用外部js 和引用外部css，两者的好处也是类似的：

如果代码比较多，放在独立的js代码中，不至于html 特别臃肿
如果多个html都需要共同的js代码（比如一些函数），这时 js 独立出来，只需维护一份就可以，避免了重复性

嵌入外部的js文件使用的 相对路径、绝对路径 写法的规则，和前面课程中讲解的嵌入 css 规则一样，这里就不在赘述了。

引用外部文件时，如果有多个，比如

<head> 
  <script  src="my1.js"></script>
  <script  src="my2.js"></script>
  <script  src="my3.js"></script>
</head>

浏览器会依次加载运行这些 js 文件。

并且要等每个js文件运行完，才会加载运行下一个。

所以，如果引入的js文件有依赖关系，必须保证被依赖的放在前面。