1.4 JavaScript

1.4.1 JavaScript概述

JavaScript是目前在Web前端开发领域十分流行且十分重要的一种脚本语言，其功能强大，用途广泛，可以响应浏览器事件、操作HTML元素、制作炫酷特效、验证用户数据、与服务器进行交互甚至进行服务器端编程等。虽然JavaScript语言的学习门槛较低，但限于篇幅，本书仅介绍一些JavaScript的基础知识。

要想在页面中使用JavaScript脚本，必须要有＜script＞标签，而具体的程序代码既可以在此标签中，也可以来自外部的．js文件。像.css文件一样，我们也推荐将JavaScript代码单独保存在一个独立的．js文件中，这样既使网页的文件结构更加清晰，便于搜索和高度，又可提高代码的复用性。

    ＜script src=＂cjs/jquery-3.2.1. min.js＂＞＜/script＞  //引入站内js文件
    ＜script src=＂https://unpkg.com/bootstrap@4.2.1/dist/js/bootstrap.min.js＂＞＜/script＞
     //引入站外js文件
    ＜script＞

      window. alert（＂hello, world! ＂） //弹出警告框
  ＜/script＞

1.4.2 JavaScript的基本语法

JavaScript语法严格区分大小写；一行代码可以用分号（;）表示结束，也可以直接回车换行表示结束；注释方法分为单行注释（//）和多行注释（/*. . . */）；其运算符也包括算术运算符、逻辑运算符、比较运算符、赋值运算符等，使用方法与其他编程语言相似。

（1）变量。在JavaScript中，变量可以不用先声明而直接使用；声明而未赋值的变量为undefined；可以看出，JavaScript属于弱类型语言。

创建数组的方法有三种：

①利用Array（）函数创建空数组：stu=new Array（）。

②利用下标方式直接赋值：stu [0]=＂张三＂。

③利用Array函数创建数组并立即赋值：stu=new Array（＂张三＂）。

JavaScript中数组的创建和使用在真实开发中较为常见，一定要深入学习并灵活掌握其用法。

（2）字符串。字符串是JavaScript中比较常见的一类数据类型。其常用属性有：

length：返回字符串长度。

常用方法有：

charAt（）：返回某一字符或子串的起始位置序号。

indexOf（）：返回某一位置序号所对应的字符。

replace（）：字符替换。

split（）：根据某一字符进行分割，结果为一个数组。

substr（n, l）：从第N位开始，获取长度为l的子串。

substring（s, e）：获取从第s位到第n位的子串。

我们推荐读者要熟练掌握后4种方法，在真实开发工作中极为常用。

（3）函数。JavaScript中函数的意义与其他语言中函数的意义相同，它把一些JavaScript程序放在一个独立、完整的结构中，用于实现一些特定的功能，并且可以被多个页面重复使用。

函数定义方法：

      function funName（paras） //parasV为形式参数，可有多个。
      {代码块；}

函数调用方法：

      funName（paras） //parasR为实际参数，类型与数量要与形式参数一一对应。

通常情况下，函数要先定义后使用。

（4）条件分支与循环。JavaScript也提供if else语句来实现条件分支，与其他编程语言的用法完全相同，包括：

      if（）{. . .}
      if（）{. . .}else {. . .}

      if（）{. . .}else if（）{. . .}else if（）{. . .}……else {. . .}

与其他编程语言仍然相同的是，JavaScript也有for循环和while循环，但除此之外它还独有一种for in循环结构，专门用于遍历可序列化的数据，具有较强的实用性。其语法结构为：

for（i in obj）{. . .} //obj为可序列化的数据变量（如数组、JSON等）, i为循环变量，是每个元素的下标。

上述结构的含义是：从第一个元素开始，依次从obj变量中获取每一个元素的下标，并把此下标值循环地交给循环变量i，然后在循环体中就可以使此下标变量i来完成各类操作。如：

    stu=new Array（＂张三＂, ＂李四＂, ＂王五＂, ＂赵六＂）；
    lis=＂＂；
    for（eachStu in stu）{
        lis += ＂＜p＞＂ + stu [eachStu]+ ＂＜/p＞＂；
    }；
    document. write（lis）; //向页面写入数据

一定要注意的是，for in结构中循环变化的是下标，而不是每一个元素。

1.4.3 JSON数据格式

JSON（JavaScript Object Notation, JavaScript对象标记）是一种轻量级的数据交换格式，是JavaScript的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据，本质上是一个字符串，易于阅读和编写，现在很多Web后端编程语言都能处理JSON数据，如PHP、C#、JAVA、Python等。JSON比XML在多个方面都有突出优势，因此是目前Web上应用最为广泛的数据交互与传输格式。

JSON数据格式的结构特点包括：

①用键值对表示对象；

②相邻的同级数据用逗号分隔；

③用大括号保存对象；

④用方括号保存对象数组；

⑤结构可嵌套。

读者可通过以下示例了解JSON数据格式的结构特点与使用方法。

例1：纯JSON数组，用方括号表示。

      var jsonArr= [＂张三＂, ＂李四＂, ＂王五＂, ＂赵六＂];  //定义纯json数组
      for（i in jsonArr） //利用for in循环遍历jsono数组元素
      {
          document. write（i+＂:＂+jsonArr [i]+＂＜br/＞＂）; //将所有元素拼接为一个字
  符串并显示在页面中
      }

例2：多个对象且对象值为单一元素的JSON数据，大括号保存多个对象，每个对象为键值对，整体上类似数据表中的一条记录。

      var jsonObj= {
          ＂name＂:＂张三＂，
          ＂sex＂:＂男＂，
          ＂age＂:100，
      }
      tempStr=＂姓名：＂+jsonObj. name+＂，性别：＂+jsonObj. sex+＂，年龄：＂+jsonObj. age +＂＜
  br/＞＂
       /*或者下面这种写法*/
      tempStr=＂姓名：＂+jsonObj [′name′]+＂，性别：＂+jsonObj [′sex′]+＂，年龄：＂+jsonObj
  [′age′]+＂＜br/＞＂
  document. write（tempStr）

例3：对象数组，大括号与中括号结合使用，类似数据表中多条记录。

    var jsonObjArr=
    [
        {
            ＂name＂:＂张三＂，
            ＂sex＂:＂男＂，
            ＂age＂:100
        }，
        {
            ＂name＂:＂李四＂，
            ＂sex＂:＂女＂，
            ＂age＂:56
        }，
        {
            ＂name＂:＂王五＂，
            ＂sex＂:＂男＂，
            ＂age＂:36
        }
    ]；
    for（i in jsonObjArr）
    {
        tempStr=＂姓名：＂+jsonObjArr [i][′name′]+＂，性别：＂+jsonObjArr [i][′sex′]+
＂，年龄：＂+jsonObjArr [i][′age′]+＂＜br/＞＂；
document. write（tempStr）
}

例4：复杂的JSON结构嵌套。最外层是key为data和info的普通对象，data对应的值为对象数组，info对应值为一个字符串。类似于多张数据表（本例可视为有data表和info表），每个数据表中可分别放入不同的数据内容。仍然根据对象的key值分别进行遍历。

      var jsonMultiObj=
        {
          ＂data＂：
                  [
                      {
                      ＂name＂:＂张三＂, ＂sex＂:＂男＂, ＂age＂:100

                      }，
                      {
                      ＂name＂:＂李四＂, ＂sex＂:＂女＂, ＂age＂:56
                      }，
                      {
                      ＂name＂:＂王五＂, ＂sex＂:＂男＂, ＂age＂:36
                      }
                  ]，
                ＂info＂:＂这里有三条人员信息记录。＂
              }；
            document. write（jsonMultiObj. info+＂＜br/＞＂）; //读取key为info的值
            for（i in jsonMultiObj. data）//利用for in循环遍历key为data的所有值
              {
          tempStr=＂姓名：＂+jsonMultiObj [′data′]  [i]  [′name′]+＂，性别：＂+jsonMultiObj. data [i][′sex′]+＂，年龄：＂+jsonMultiObj. data [i][′age′]+＂＜br/＞＂；
          document. write（tempStr）
        }

1.4.4 BOM与DOM

JavaScript语言中的BOM（Browser Object Model，浏览器对象模型）与DOM（Document Object Model，文档对象模型）拥有大量包含丰富属性与方法的子对象，提供了丰富的用户与页面进行交互的功能。

（1）window对象：表示整个浏览器窗口，属于最顶层的BOM。

常用方法：

window. open（）; // 打开新窗口。

window. close（）; // 关闭当前窗口。

window. alert（）; // 弹出警告框。

window. confirm（）; // 弹出确认框。

window. print（）; //打印当前窗口。

（2）location对象：获取当前页面的url，或者跳转至新页面。

常用属性与方法：

location. href; //获取当前页面的url。

location. href=＂url＂; //页面重定向（跳转至url）。

location. reload（）; //重新加载当前URL，即刷新当前页。

location. replace（）; //用新文档替换当前文档，相当于页面跳转。

（3）document对象（DOM对象）:DOM实际上是BOM的一个子集，在网页上，组成页面的所有内容被组织在一个树形结构中（称为DOM树）。通俗地说，DOM就是指页面中所有HTML代码所组成的结构，因此document对象可以直接对页面内容进行操作。

常用属性：

document. title; //获取当前文档的标题。

document. URL; // 获取当前文档的URL。

常用方法：

document.getElementById（）; //根据id属性值查找页面中对象（比如某标签）。

document.getElementsByClassName（）; //根据class属性值查找页面对象集合。

document.getElementsByName（）; //返回带有指定name属性值的对象集合。

document.getElementsByTagName（）; //返回带有指定标签名的对象集合。

document. write（）; //向文档写HTML表达式或JavaScript代码。

document. writeln（）; //等同于write（）方法，不同的是在输出完成后会追加一个换行符。

对象．属性名=属性值；//设置对象属性。

对象．innerHTML[=值]; //获取[设置]非表单元素的内容。

对象．value [=值]; //获取[设置]表单元素的内容。

对象．style．样式名[=值]; //获取[设置]对象的某样式值。

1.4.5 JavaScript中的事件

JavaScript中的事件通常是指用户在网页中执行中的某一动作，比如点击鼠标左键、双击鼠标左键、按下键盘等。用户执行这些动作往往是为了完成某一任务，比如提交表单等，而完成对应任务的过程要通过JavaScript代码（如函数等）来实现。JavaScript语言支持多种事件，整体上事件可以分为鼠标事件、键盘事件、页面加载与退出事件等。

常见的事件有：onclick（鼠标单击事件）、ondblclick（鼠标双击事件）、onfocus（获得焦点事件）、onblur（失去焦点事件）、onmousedown（鼠标按键按下事件）、onmouseup（鼠标按键弹起事件）、onmousemove（鼠标光标移动事件）、onmouseover（鼠标光标悬停事件）、onmouseout（鼠标光标移开事件）、onkeypress（键盘按键按下或按住事件）、onkeyup（键盘按键弹起事件）、onkeydown（键盘按键按下事件）、onchange（内容或值改变事件）、onload（页面或内容加载完成事件）、onunload（页面退出或关闭事件）等。

读者可通过以下示例了解JavaScript中事件的创建与使用方法。要注意的是，为对象创建事件的代码通常要放在对象之后，否则将产生异常错误。

例1：点击按钮实现页面跳转。

        ＜button onclick=＂window.open（′http://www.xynun.edu.cn′）＂＞xynun＜/button＞
          //新窗口打开
        ＜button onclick=＂window. location. href=′http://www.xynun.edu.cn′＂＞xynun＜/
        button＞ //原窗口打开

例2：实时获取用户在文本框里输入的内容，并显示到另一个文本框中。

      ＜input type=＂text＂ id=＂temp1＂/＞
      ＜input type=＂text＂ id=＂temp2＂＞
      ＜script＞
          var t1=document.getElementById（＂temp1＂）; //捕获第一个文本框对象
          var t2=document.getElementById（＂temp2＂）; //捕获第二个文本框对象
          t1. onkeyup=function（）{; //为第一个文本框添加键盘弹起事件
              t2. value=t1. value；
          }
          t1. onblur=function（）{; //为第一个文本框添加失去失去焦点事件
              t1. value=＂我失去了焦点＂
          }
          t2. onfocus=function（）; //为第二个文本框添加获得焦点事件
          {
              t2. value=＂我获得了焦点＂
          }
      ＜/script＞

例3：简单的表单验证。在＜form＞标签中添加onsubmit事件，事件调用自定义的表单验证函数checkForm（），当checkForm（）函数返回值为true时提交表单，否则不提交表单。这是表单验证的一般过程。

      ＜form action =＂ http://www.xynun.edu.cn＂ method =＂ get＂ onsubmit =＂ return
  checkForm（）＂＞
          ＜input type=＂text＂ name=＂＂ id=＂username＂＞
          ＜input type=＂submit＂ value=＂提交＂ id=＂submitBtn＂＞
     ＜/form＞
     ＜script＞
          function checkForm（）
          {
            var username=document.getElementById（＂username＂）；
            var temp=＂＂；
            if（username. value==＂＂）
              {
                temp=＂内容不能为空＂；
            }

            else if（username. value. length＜6）
            {
                temp=＂内容长度不能少于6位＂；
            }
            else if（username. value. length＞15）
            {
                temp=＂内容长度不能多于15位＂；
            }
            else
            {
                temp=true；
            }
            if（temp! =true）
            {
                alert（temp）；
                return false；
            }
            else
            {
                alert（＂通过＂）；
                return true；
            }
        }
    ＜/script＞