3.3 JavaWeb-JavaScript

谁借莪１个温暖的怀抱￠ 2024-04-01 17:52 55阅读 0赞

**目录**

3.3.1 JavaScript

3.3.1.1 JavaScript概述

3.3.1.2 JavaScript用法

3.3.2 基础语法

3.3.2.1 JavaScript 输出

3.3.2.2 JavaScript 运算符、控制语句、语法

3.3.2.2.1 增强for循环

3.3.2.3 JavaScript 数据类型

3.3.3 API

3.3.3.1 Math

3.3.3.2 Date

3.3.3.3 Array数组

数组的声明

数组的创建

数组的赋值

3.3.3.4 String字符串

3.3.4 函数

3.3.5 BOM对象

3.3.5.1 window

3.3.5.2 location

3.3.5.3 history

3.3.5.4 screen

3.3.6 DOM对象

3.3.6.1 获取标签

3.3.6.2 标签属性

3.3.6.3 事件

3.3.6.3.1 什么是事件

3.3.6.3.2 什么是事件绑定

3.3.6.3.3 两种事件绑定方式

3.3.6.3.4常见事件

3.3.6.4 节点操作

3.3.6.5 JSON

3.3.6.5.1 什么是JSON

3.3.6.5.2 JSON语法

3.3.6.5.3 数组保存JSON

3.3.6.5.4 JSON格式

3.3.6.5.5 示例

--------------------

## 3.3.1 JavaScript ##

### 3.3.1.1 JavaScript概述 ###

JavaScript与Java的关系可谓是，雷锋与雷峰塔——毫无关系。

JavaScript 是 Web 的编程语言，JavaScript是一种面向对象思想的脚本语言，通过JavaScript可以实现用户与静态网页之间的交互，也称为动态网页技术（JavaScript+HTML+CSS）。

> 1.  **HTML** 定义了网页的内容
> 2.  **CSS** 描述了网页的布局
> 3.  **JavaScript** 控制了网页的行为

本系列重点为后端，所以前端内容可参考专业的网站进行学习，本节只涉及局部知识：

[JavaScript 对象 | 菜鸟教程][JavaScript _ _]

### 3.3.1.2 JavaScript用法 ###

HTML 中的 Javascript 脚本代码必须位于 <script> 与 </script> 标签之间。

Javascript 脚本代码可被放置在 HTML 页面的 <body> 和 <head> 部分中。

## 3.3.2 基础语法 ##

### 3.3.2.1 JavaScript 输出 ###

>  *  使用 **window.alert()** 弹出警告框。
>  *  使用 **document.write()** 方法将内容写到 HTML 文档中。
>  *  使用 **innerHTML** 写入到 HTML 元素。
>  *  使用 **console.log()** 写入到浏览器的控制台。

### 3.3.2.2 JavaScript 运算符、控制语句、语法 ###

虽然JavaScript与Java没有血缘关系，但是在语法、命名等规则方面和Java几乎一样，只要按 Java的规则来就不会出错。

运算符、控制语句等和其他的编程语言都接近。

#### 3.3.2.2.1 增强for循环 ####

### 3.3.2.3 JavaScript 数据类型 ###

JavaScript 弱类型语言，定义的时候只需要关键词var、let、const 。

var:函数作用域，整个函数内都是有效的。在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

lte:块作用域，比如在for循环内，在其外面是不可被访问的。

let必须先声明，再使用，而var可先使用后声明。

## 3.3.3 API ##

### 3.3.3.1 Math ###

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>abs()</td> 
   <td>求绝对值</td> 
  </tr> 
  <tr> 
   <td>ceil()</td> 
   <td>向上取整</td> 
  </tr> 
  <tr> 
   <td>floor()</td> 
   <td>向下取整</td> 
  </tr> 
  <tr> 
   <td>random()</td> 
   <td>随机数 0~1</td> 
  </tr> 
 </tbody> 
</table>

### 3.3.3.2 Date ###

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>getFullYear()</td> 
   <td>获取年份</td> 
  </tr> 
  <tr> 
   <td>getMonth()</td> 
   <td>获取月份</td> 
  </tr> 
  <tr> 
   <td>getDate()</td> 
   <td>获取天</td> 
  </tr> 
  <tr> 
   <td>getHours()</td> 
   <td>获取小时</td> 
  </tr> 
  <tr> 
   <td>getMinutes()</td> 
   <td>获取分钟</td> 
  </tr> 
  <tr> 
   <td>getSeconds()</td> 
   <td>获取秒</td> 
  </tr> 
  <tr> 
   <td>getMilliseconds()</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

//Date对象
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            var hour = date.getHours();
            var minute = date.getMinutes();
            var seconds = date.getSeconds();
            var millSeconds = date.getMilliseconds();
            //拼接日期
            console.log(date);
            var dateTime = year + "年" + month + "月" + day + "号 " + hour + ":" + minute + ":" + seconds;
            console.log(dateTime);

### 3.3.3.3 Array数组 ###

js中的数组类似于java中的ArrayLis他，因为js没有指定的数据类型 所以存入数据可以看做是object 可以存储任意类型数据。

#### 数组的声明 ####

数组本质是个对象 所以直接使用var声明

> var 数组名

#### 数组的创建 ####

与java不同， js数组创建的长度可以自动增长

> 无参构造方法创建
> 
> 数组名=new Array();
> 
> var arr1 = new Array();
> 
> 数组名=new Array(length);
> 
> 创建指定长度的数组 值为empty 注意不是null
> 
> var arr2 = new Array(5);
> 
> 数组名=\[数据,数据,数据....\];
> 
> var arr3 = \[1, 2, "a", true\];

#### 数组的赋值 ####

通过索引对数组对应位置进行赋值

需要注意的是 指定索引不存在也可以赋值 前面的数据会用empty设置

### 3.3.3.4 String字符串 ###

<table style="width:606px;"> 
 <tbody> 
  <tr> 
   <td style="width:235px;">new String("x")</td> 
   <td style="width:370px;">构造方法</td> 
  </tr> 
  <tr> 
   <td style="width:235px;"> <p>charAt(x)</p> </td> 
   <td style="width:370px;"> <p>取字符串对象指定索引数据</p> </td> 
  </tr> 
  <tr> 
   <td style="width:235px;"> <p>indexOf("x")</p> </td> 
   <td style="width:370px;">第一次出现的索引</td> 
  </tr> 
  <tr> 
   <td style="width:235px;"> <p>lastIndexOf("x")</p> </td> 
   <td style="width:370px;">最后一次出现的索引</td> 
  </tr> 
  <tr> 
   <td style="width:235px;"> <p>substring(x, x)</p> </td> 
   <td style="width:370px;"> <p>截取字符串从指定索引开始 到指定索引结束</p> </td> 
  </tr> 
  <tr> 
   <td style="width:235px;"> <p>substr(x, x)</p> </td> 
   <td style="width:370px;"> <p>截取字符串从指定索引开始 指定长度</p> </td> 
  </tr> 
  <tr> 
   <td style="width:235px;"> <p>split("x")</p> </td> 
   <td style="width:370px;"> <p>分割字符串 按照指定字符x分割为字符串数组</p> </td> 
  </tr> 
 </tbody> 
</table>

## 3.3.4 函数 ##

函数：包裹在\{\}中的代码块，前面使用了关键词 function：

function functionname()
    {
        // 执行代码
    }
    
    有参
    js中所有类型使用var 所以声明方法时只需要定义接收数据的变量名即可
    function functionname(a,b)
    {
        // 执行代码
        return c;
    }

JavaScript 对大小写敏感。关键词 function 必须是小写。

## 3.3.5 BOM对象 ##

浏览器对象，当前页面浏览器解析后会自动创建代表对应功能的对象,主要包括：

1.  window对象：HTML解析后的页面
2.  location：页面地址栏
3.  history：跳转的历史记录
4.  screen对象：浏览器屏幕

### 3.3.5.1 window ###

定时器（延时执行）与计时器的功能（延时重复执行）

### 3.3.5.2 location ###

1.  window.location.href: 返回当前页面的 href (URL)
2.  window.location.hostname :返回 web 主机的域名
3.  window.location.pathname :返回当前页面的路径或文件名
4.  window.location.protocol :返回使用的 web 协议（http: 或 https:）

### 3.3.5.3 history ###

1.  back():后退方法
2.  forword():前进方法
3.  go(number):根据number进行前进后退

javascript:histtory.go(-1);的形式进行返回

### 3.3.5.4 screen ###

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td style="width:279px;"> <p>screen.height</p> <p></p> </td> 
   <td style="width:220px;">高度</td> 
  </tr> 
  <tr> 
   <td style="width:279px;"> <p>screen.width</p> <p></p> </td> 
   <td style="width:220px;">宽度</td> 
  </tr> 
  <tr> 
   <td style="width:279px;"> <p>screen.availHeight</p> <p></p> </td> 
   <td style="width:220px;">可用高度</td> 
  </tr> 
  <tr> 
   <td style="width:279px;">screen.availWidth</td> 
   <td style="width:220px;">可用宽度</td> 
  </tr> 
 </tbody> 
</table>

## 3.3.6 DOM对象 ##

### 3.3.6.1 获取标签 ###

<table style="width:582px;"> 
 <tbody> 
  <tr> 
   <td style="width:332px;">document.getElementById()</td> 
   <td style="width:249px;">根据id获取元素</td> 
  </tr> 
  <tr> 
   <td style="width:332px;">document.getElementsByClassName()</td> 
   <td style="width:249px;">根据class名获取元素</td> 
  </tr> 
  <tr> 
   <td style="width:332px;">document.getElementsByTagName()</td> 
   <td style="width:249px;">根据标签名获取元素</td> 
  </tr> 
  <tr> 
   <td style="width:332px;">document.getElementsName()</td> 
   <td style="width:249px;">根据name属性值获取元素</td> 
  </tr> 
 </tbody> 
</table>

注意浏览器加载执行顺序 如果使用js获取标签，那么首先需要保证js执行时 页面已加载显示对应标签。

### 3.3.6.2 标签属性 ###

标签对象.属性方式

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td style="width:266px;"> <p>value()</p> </td> 
   <td style="width:233px;">获取对应标签的value</td> 
  </tr> 
  <tr> 
   <td style="width:266px;"> <p>id()</p> </td> 
   <td style="width:233px;">获取对应标签的id</td> 
  </tr> 
  <tr> 
   <td style="width:266px;"> <p>name()</p> </td> 
   <td style="width:233px;">获取对应标签的name</td> 
  </tr> 
  <tr> 
   <td style="width:266px;"> <p>innerHTML</p> </td> 
   <td style="width:233px;"> <p>获取当前标签内的内容 &nbsp;如果有其他标签按照原代码形式获取</p> </td> 
  </tr> 
  <tr> 
   <td style="width:266px;"> <p>innerText</p> </td> 
   <td style="width:233px;"> <p>仅获取当前标签中的所有的文本内容</p> </td> 
  </tr> 
 </tbody> 
</table>

JS获取修改属性书写步骤

1.通过document对象对应的方法获取对应的标签对象（如果返回多个从中取出）

2.通过属性获取标签上的内容与修改标签上的内容(如果是双标签中间的文本使用innerHTML或inneText属性获取)

//先获取对应的标签对象
            var d1=document.getElementById("d1");
            //获取当前标签内的内容  如果有其他标签按照原代码形式获取
             console.log(d1.innerHTML);
             //仅获取当前标签中的所有的文本内容
             console.log(d1.innerText);
    
    
             var i1=  document.getElementById("i1");
             //可以所有属性都可以通过对象.属性获取
              console.log(i1.value);
              console.log(i1.id);
              console.log(i1.name);
    
              i1.value="已经获取";
              i1.id='新id';
                i1.name='新name';

### 3.3.6.3 事件 ###

#### 3.3.6.3.1 什么是事件 ####

事件：标签发生的特殊的状态，例如 点击键盘、按下抬起键盘、鼠标移入、鼠标移出、鼠标移动 、加载完毕。类似于css中选择器的伪元素的概念。

#### 3.3.6.3.2 什么是事件绑定 ####

事件绑定：将对应的事件与对应的标签绑定，当对应的标签发生相应绑定的事件时，会执行相应的代码，实现对应的功能。

事件对象：当相应事件发生时，会根据事件相应属性创建事件对象,在处理事件相应的方法中可以直接使用，获取事件信息在方法中使用event代表当前发生事件对象，其内保存了当前事件的所有信息。

#### 3.3.6.3.3 两种事件绑定方式 ####

**方式一**

> function eventfunction()\{
> 
> 定义事件
> 
> \}
> 
> ///根据标签id获取标签，也可根据标签class或name获取对应标签
> 
> var d2= document.getElementById("d2"); /
> 
> //把d2标签的发生的事件绑定eventfunction函数 格式 ： d2.事件=eventfunction;  
> d2.οnclick=eventfunction;
> 
> //鼠标点击事件绑定eventfunction

**方式二**

#### 3.3.6.3.4常见事件 ####

<table> 
 <thead> 
  <tr> 
   <th>事件名</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onclick</td> 
   <td>单击事件</td> 
  </tr> 
  <tr> 
   <td>onchange</td> 
   <td>变化事件</td> 
  </tr> 
  <tr> 
   <td>onsubmit</td> 
   <td>表单提交事件</td> 
  </tr> 
  <tr> 
   <td>onload</td> 
   <td>页面加载事件</td> 
  </tr> 
 </tbody> 
</table>

### 3.3.6.4 节点操作 ###

通过js创建对应的标签对象并放入页面显示，经常用于页面的动态生成（页面数据由后台获取）。

<body>
        <button>添加</button> <button>删除</button>
        <table border="1">
            <thead>
                <tr><th>id</th><th>name</th><th>age</th></tr>
            </thead>
            <tbody id="tb"></tbody>
        </table>
    
    </body>
    <script>
        //准备数据 相同写死
        //1 zhangsan 18 
        //获取数据添加位置
        var tb=document.getElementById("tb");
    
        //为按钮添加相应的事件
        document.getElementsByTagName("button")[0].onclick=function(){
           //创建对应的标签对象
            var tr=document.createElement("tr");
            var td1=document.createElement("td");
            var td2=document.createElement("td");
            var td3=document.createElement("td");
    
            //为对应的单元格赋值
            td1.innerText=prompt("请输入id")
            td2.innerText=prompt("请输入name")
            td3.innerText=prompt("请输入age")
    
            //将单元格存入行标签中
            tr.appendChild(td1);
            tr.appendChild(td2);
            tr.appendChild(td3);
    
            //将tr放入表格
            tb.appendChild(tr);
    
        }
        document.getElementsByTagName("button")[1].onclick=function(){
          //  alert("删除")
          //获取删除的标签
          //删除最后一行
          var trArr=document.getElementsByTagName("tr");
    
          var index=prompt("请输入删除的行数")
           
          var delTr=trArr[index];
          //调用方法删除
          tb.removeChild(delTr);
        }
    
    
    
    </script>

### 3.3.6.5 JSON ###

#### 3.3.6.5.1 什么是JSON ####

JSON:JavaScript Object Notation(JS对象简谱）是一种轻量级的数据交换格式。

JSON属于前端对象，用于保存数据，是前后端数据交互的基石，在前端通过**.属性**方式获取值，书写语法类似于java中的map集合,**\[key:value\]**形式 ，**key必须为字符串，value为任意类型数据**。

#### 3.3.6.5.2 JSON语法 ####

格式

> var 变量名**=\{"key1":value1,"key2":value2,"key3":value3\}**
> 
> **\{\}包裹数据**
> 
> **数据之间用","分割**
> 
> **key必须为字符串，所以用""**

JSON的存值与取值

方式一：只能固定调用某一个key对应的value。

方式二：可以指定key获取数据，更加灵活。

#### 3.3.6.5.3 数组保存JSON ####

一个JSON对象只能保存一个对象数据，但是前后台交互可能返回多个对象的数据。将JSON保存到数组里返回给前台，就可以解决这个问题。

#### 3.3.6.5.4 JSON格式 ####

前面介绍了JSON的格式以及使用方法，在实际的开发中，不同的系统会有不同的JSON格式，JSON里不仅有数据还有其他的提示信息。

var dataJson={
            'code':200,
            'msg':'信息',
            'data':[{'id':1,'name':'张三','age':18},{'id':2,'name':'李四','age':28},{'id':3,'name':'王五','age':38}]
        };

#### 3.3.6.5.5 示例 ####

后台处理JSON并返回给前台，在后面的Servlet会讲解。

前台接收JSON并动态生成表格

--------------------

[JavaScript _ _]: https://www.runoob.com/js/js-obj-intro.html