JavaWeb开发4

JS对象 Array

Array对象用于定义数组

var 变量名=new Array(元素列表)；
var 变量名=[元素列表]

访问

arr[索引]=值；

注意：JS中数组相对于Java中集合，数组的长度是可变的，JS是弱类型，所以可以存储任意类型的数据

属性

length 设置或返回数组中元素的数量

方法

forEach() 遍历数组中每个有值的元素，并调用一次传入的函数

push() 将新元素添加到数组的末尾，并返回新的长度

splice() 从数组中删除元素

<!--文件类型为HTML-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>焦点访谈</title>

</head>
<body>

</body>

<script>// var arr=new Array(1,2,3,4);// var arr =[1,2,3,4];// console.log(arr[0]);
// // 长度可变，类型可变// var arr=new Array(1,2,3,4);// arr[10]=10;// arr[9]='a';// arr[8]=true;// console.log(arr);
// var arr=[1,2,3,4];// for (let index=0;index<arr.length;index++){//     console.log(arr[index]);// }
var arr=[1,2,3,4];// arr.forEach(function (e) {//     console.log(e);//// })
// // 箭头函数// arr.forEach((e)=>{//     console.log(e);// })// arr.push(1);// console.log(arr);arr.splice(2,2);console.log(arr);

</script>


</html>

JS对象 String

创建方式

var 变量名=new String("XX");
var 变量名="XX";

属性

length 字符串长度

方法

charAt() 返回在指定位置的字符

indexOf() 检索字符串

trim() 去除字符串两边的空格

substring() 提取字符串中两个指定的索引号之间的字符

<!--文件类型为HTML-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>焦点访谈</title>

</head>
<body>

</body>

<script>// var str=new String("SS");var str="  aa hjjg";console.log(str);
console.log(str.length);
console.log(str.charAt(1));
console.log(str.indexOf("j"));
var str1=str.trim();console.log(str1);
// 含头不含尾console.log(str.substring(0,5));

</script>


</html>

JS对象 JSON

var 对象名={

属性名1：属性值1，

属性名2：属性值2，

函数名称：function(形参列表){}

}；

调用格式

对象名.属性名；

对象名.函数名；

概念：通过JavaScript对象标记法书写的文本

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

定义

var 变量名={"key":value1,"key":"value2"};

value数据类型为：

数字，整型或浮点数
字符串，在双引号中
逻辑值，true/false
数组，方括号中
对象，花括号中
null

JSON字符串转为JS对象

var jsObject=JSON.parse(userStr);

JS对象转为JSON字符串

var jsonStr=JSON.stringify(jsObject);

<!--文件类型为HTML-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>焦点访谈</title>

</head>
<body>

</body>

<script>// // 自定义对象// var user={//     name:"asd",//     age:10,//     sex:"male",//     // eat:function () {//     //     alert("eat");//     // }//     eat(){//         alert("eat");//     }// }// alert(user.name);// user.eat();
// 定义JSONvar jsonstr='{"name":"jerry","age":18}';var obj=JSON.parse(jsonstr);alert(obj.name);alert(JSON.stringify(obj));
</script>


</html>

BOM

浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象

组成

Window：浏览器窗口对象
Navigator：浏览器对象
Screen：屏幕对象
History：历史记录对象
Location：地址栏对象

Window

浏览器窗口对象

直接使用window,其中window可以省略

属性

history：对History对象的只读引用
location：用于窗口或框架的Location对象
navigator：对Navigator对象的只读引用

方法

alert()：显示带有一段消息和一个确认按钮的警告框
confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框
setInterval()：按照指定的周期(毫秒计)来调用函数或计算表达式
setTimeout()：在指定的毫秒数后调用函数或计算表达式

Location

地址栏对象

获取

location.属性；

属性

href：设置或返回完整的url

<!--文件类型为HTML-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>焦点访谈</title>

</head>
<body>

</body>

<script>// window.alert("hello");// alert("123");
// var flag=confirm("are you ok?");// alert(flag);
// var i=0;// setInterval(//     function () {//         i++;//         console.log(i);//     },2000// );
// setTimeout(function () {//     alert("js");// },3000);
alert(location.href);location.href="https://www.itcast.cn";
</script>


</html>

DOM

文档对象模型

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

Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象

JavaScript通过DOM，就能对HTML进行操作

改变HTML元素的内容
改变HTML元素的样式CSS
对HTML DOM事件作出反应
添加和删除HTML元素

HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的

根据id属性值获取，返回单个对象

var h1=document.getElementById('h1');
根据标签名称获取，返回对象数组

var divs=document.getElementByTagName('div');
根据name属性值获取，返回对象数组

var divs=document.getElementByName('hobby');

根据class属性值获取，返回对象数组

var divs=document.getElementByClassName('cls');

<!--文件类型为HTML-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>焦点访谈</title>

</head>
<body><div class="cls">船只教育</div><div class="cls">黑马程序员</div>
<input type="checkbox" name="hobby">电影<input type="checkbox" name="hobby">旅游<input type="checkbox" name="hobby">游戏
</body>

<script>// var divs=document.getElementsByTagName("div");// for(let i=0;i<divs.length;i++){//     alert(divs[i]);// }
// var ins=document.getElementsByName("hobby");// for(let i=0;i<ins.length;i++){//     alert(ins[i]);// }
// var ins=document.getElementsByClassName("cls");// for(let i=0;i<ins.length;i++){//     alert(ins[i]);// }
var ins=document.getElementsByClassName("cls");var div1=ins[0];div1.innerHTML="666";
</script>


</html>