javaweb学习—

javaweb学习——Day2

JS对象

1、array

定义：

var name=new Array(元素列表);

var name=[元素列表]

访问：

name[索引]=值

array的属性和方法

length属性，获取数组长度

foreach():遍历数组元素

x.forEach(element => {

console.log(element);

});

push():向数组里添加元素

x.push(7,true,false);

splice：从数组中删除元素

x.splice(2,2);从第3个元素开始删除2个元素，即删除第4，5个元素

字符串的四个方法

//charAt

获取指定位置的字符

//indexOf

检索字符串的位置

//trim

去除字符串左右两侧的空格

//substring(start,end)

获取子字符串的

json-介绍

由于其语法简单，层次结构鲜明，先多用于作为数据载体，在网络中进行数据传输

前端服务器向后端服务器发送的请求数据格式就是json格式

后端服务器向前端服务器发送的响应数据格式也是json格式

标准json格式

{

"name":"tom",

"value":"1",

"addr":["dji","hfida"]

}

json涉及到的两个方法

JS对象转换成json

JSON.stringify()

json转换成JS对象

JSON.parse()

代码如下

<script>var user={name:"tom",age:10,gender:"male",eat:function(){alert("用膳");}};user.eat();var jsonStr=JSON.stringify(user);alert(jsonStr);var jsObject=JSON.parse(jsonStr);alert(jsObject.name);</script>

BOM模型：浏览器对象模型，允许javascript与浏览器对话，javascript把浏览的各个部分封装成了对象，用于调用

浏览器窗口对象window:

window对象属性：history,location,navigator,方法：alert(),confirm(),sentinterval(),setTimeout()

alert:警告框

confirm:提示框（取消，确定）

sentinterval:按照指定周期调用函数（循环）

setTimeout:指定时间后调用一次函数

window.alert("欢迎来到DOM学习");window.confirm("你确定要删除该对象吗？");var i=0;setInterval(() => {i++;console.log("定时器执行了"+i+"次");}, 2000);setTimeout(() => {alert("JS");}, 2000);alert(location.href);location.href="https://www.baidu.com";//当你设置href属性值的时候，浏览器就会自动跳转到该网址

HTML-DOM：

将标记语言的各个组成部分封装成对应的对象：

Document:整个文档对象

Element:元素对象

Attribute:属性对象

Text：文本对象

Comment：注释对象

DOM的作用就是利用JS代码动态的修改网页的结构，可以制作出有趣的动画提高网页的的趣味性和交互性

DOM是万维网定义网页结构的一个标准，在JS语言中，可以用于对网页结构修改。

以下是利用网页元素结构对网页结构获取修改的代码，主要运用document对象实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#h1{width:300px;}.cls{color: aqua;}</style>
</head>
<body><img id="h1" src="../img/1.jpg"><br><br><div class="cls">传智教育</div><br><div class="cls">黑马程序员</div><br><input type="checkbox" name="hobby">电影<input type="checkbox" name="hobby">旅游<input type="checkbox" name="hobby">游戏<script>//1、获取Element元素——id属性// var dom1=document.getElementById("h1");// alert(dom1);//2、获取Element元素——标签// var dom1=document.getElementsByTagName("div");// for(let i=0;i<dom1.length;i++){//     alert(dom1[i]);// }//1、获取Element元素——name属性// var dom1=document.getElementsByName("hobby");// for(let i=0;i<dom1.length;i++){//     alert(dom1[i]);// }//1、获取Element元素——class属性var dom1=document.getElementsByClassName("cls");// for(let i=0;i<dom1.length;i++){//     alert(dom1[i]);// }dom1[0].innerHTML="传智教育666";</script>
</body>
</html>

JS对象代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#h1{width:300px;}.cls{color: aqua;}</style>
</head>
<body><img id="h1" src="../img/电灯 (1).png"><br><br><div class="cls">传智教育</div><br><div class="cls">黑马程序员</div><br><input type="checkbox" name="hobby">电影<input type="checkbox" name="hobby">旅游<input type="checkbox" name="hobby">游戏<script>//1、获取Element元素——id属性// var dom1=document.getElementById("h1");// alert(dom1);//2、获取Element元素——标签// var dom1=document.getElementsByTagName("div");// for(let i=0;i<dom1.length;i++){//     alert(dom1[i]);// }//1、获取Element元素——name属性// var dom1=document.getElementsByName("hobby");// for(let i=0;i<dom1.length;i++){//     alert(dom1[i]);// }//1、获取Element元素——class属性// var dom1=document.getElementsByClassName("cls");// for(let i=0;i<dom1.length;i++){//     alert(dom1[i]);// }// dom1[0].innerHTML="传智教育666";//1、点亮电灯：src属性var img1=document.getElementById("h1");img1.src="../img/电灯 (2).png"////是所有复选框呈现选中状况var ins=document.getElementsByName("hobby");for(let i=0;i<ins.length;i++){check=ins[i];check.checked=true;}//在每一个div标签元素后加上红色字体的very goodvar div = document.getElementsByTagName("div");for (let i = 0; i<div.length; i++) {tem=div[i];tem.innerHTML+="<font color='red'>verry good</font>"}</script>
</body>
</html>

JS事件监听

JS事件监听的案例