3.3 JavaWeb-JavaScript-Toy模板网

这篇具有很好参考价值的文章主要介绍了3.3 JavaWeb-JavaScript。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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）。

HTML 定义了网页的内容

CSS 描述了网页的布局

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循环

 <script>
        var arr=['a','b','c'];
        //let 用于声明局部变量
        //for  in  声明变量 存储取出数据的索引
        for(let i in arr){
            console.log(i+":"+arr[i]);
        }

3.3.2.3 JavaScript 数据类型

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

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

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

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

3.3.3 API

3.3.3.1 Math

abs()	求绝对值
ceil()	向上取整
floor()	向下取整
random()	随机数 0~1

3.3.3.2 Date

getFullYear()	获取年份
getMonth()	获取月份
getDate()	获取天
getHours()	获取小时
getMinutes()	获取分钟
getSeconds()	获取秒
getMilliseconds()

  //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字符串

new String("x")	构造方法
charAt(x)	取字符串对象指定索引数据
indexOf("x")	第一次出现的索引
lastIndexOf("x")	最后一次出现的索引
substring(x, x)	截取字符串从指定索引开始到指定索引结束
substr(x, x)	截取字符串从指定索引开始指定长度
split("x")	分割字符串按照指定字符x分割为字符串数组

3.3.4 函数

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

function functionname()
{
    // 执行代码
}

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

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

3.3.5 BOM对象

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

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

3.3.5.1 window

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

3.3.5.2 location

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

3.3.5.3 history

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

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

3.3.5.4 screen

screen.height	高度
screen.width	宽度
screen.availHeight	可用高度
screen.availWidth	可用宽度

3.3.6 DOM对象

3.3.6.1 获取标签

document.getElementById()	根据id获取元素
document.getElementsByClassName()	根据class名获取元素
document.getElementsByTagName()	根据标签名获取元素
document.getElementsName()	根据name属性值获取元素

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

3.3.6.2 标签属性

标签对象.属性方式

value()	获取对应标签的value
id()	获取对应标签的id
name()	获取对应标签的name
innerHTML	获取当前标签内的内容如果有其他标签按照原代码形式获取
innerText	仅获取当前标签中的所有的文本内容

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常见事件

事件名	描述
onclick	单击事件
onchange	变化事件
onsubmit	表单提交事件
onload	页面加载事件

<script>
           function eventfunction(){
           // console.log("事件发生")
           // console.log(event)
             //事件对象常用属性
             console.log("事件类型:"+event.type);
        }
         var d2= document.getElementById("d2");
       
        //d2.onclick=eventfunction;//鼠标点击事件
        //d2.onmousedown=eventfunction;//鼠标按下事件
        //d2.onmouseup=eventfunction;//鼠标抬起事件
        //d2.onmouseover=eventfunction;//鼠标移入事件
        //d2.onmouseout=eventfunction;//鼠标移出事件
        d2.onmousemove=eventfunction;//鼠标移动事件

    </script>

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的存值与取值

 <script>
        声明json对象保存学生信息
        var json={'id':1,'name':'张三','age':18};
        获取json对象对应key值的方式
        方式一：将json对象当前一个类的对象，通过.key的形式获取
        console.log(json.name)
        方式二：通过类似于数组索引[key]的形式获取
        console.log(json['name'])
    </script>

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

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

3.3.6.5.3 数组保存JSON

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

 <script>
        var arr=[{'id':1,'name':'张三','age':18},{'id':2,'name':'李四','age':28},{'id':3,'name':'王五','age':38}];
        console.log(arr);
        使用的顺序就是先从数组中取出对应的json数据 之后获取key对应属性
       方式一
        console.log(arr[1].age);
       方式二
        console.log(arr[1]["age"]);
   </script>

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并动态生成表格文章来源地址https://www.toymoban.com/news/detail-731489.html

<script>
    //准备json数据  模拟后台返回
    var dataArr=[{'id':1,'name':'张三1','age':18},{'id':2,'name':'李四1','age':28},{'id':3,'name':'王五','age':38}];
    //遍历集合
    for(var i=0;i<dataArr.length;i++){
        var json=dataArr[i];
        //创建行对象
        var tr=document.createElement("tr");
        //创建列对象
        var td1=document.createElement("td");
        var td2=document.createElement("td");
        var td3=document.createElement("td");       
        //为td赋值
        td1.innerHTML=json.id;
        td2.innerHTML=json.name;
        td3.innerHTML=json.age;
        //将td存入tr
        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        //将tr存入tbody
        document.getElementById("tb").appendChild(tr);
    }

</script>

到了这里，关于3.3 JavaWeb-JavaScript的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！