JS函数/对象/DOM（JS02-2021-12-07/08）

JS函数/对象

一. JS函数

JS函数

一、声明有两种方式：
区别：方式一可以先调用再定义，方式二必须先定义再调用

1.方式一：

function a1(){
				console.log("函数方式1的定义");
			}

2.方式二：

let a2 = function(){
				console.log("函数方式2的定义");
			}

二、函数调用：
a1(); a2();
三、函数使用

//方式1：求数组中偶数的和
function sum(){
				let array=[1,2,3,4,5,6,7,8,9,10];
				var sum =0;
				for(let i in array){
					if(array[i]%2===0){
						sum +=array[i];						
					}
				}
				console.log(sum);
			}
//方式2：求数组中计数的和
			var sum1 = function(array){
				//let array=[1,2,3,4,5,6,7,8,9,10];
				var sum =0;
				for(let i in array){
					if(array[i]%2！=0){
						sum +=array[i];						
					}
				}
				console.log(sum);
			}
//练习：有参有返回值的函数
//注意：同java不同的点为：
//①形参列表不需要写变量类型（var,let,const），只需要参数名，多个参数名用逗号隔开 
//②有返回值只需要添加 return  值，不需要修改函数修饰符
			let add2 =function(a,b,c){
							return a+b+c;				
						}	
			console.log(add2(1,2,3));

二. JS对象

(一)内置对象：String/Array/Number/Math/JSON
1.String对象中，java中常用的字符串函数在JS中也存在

let str = "abcdefg";
//获取字符串的长度
console.log(str.length);
//全转大写
console.log(str.toUpperCase());
//截取字符串
console.log(str.substr(2,3));
//拼串，java也有
console.log(str.concat("hello~"));

2.Math对象

//Math对象：Π，随机数，小数...
console.log(Math.PI);
console.log(Math.random()*10);
//小数处理：round,floor,ceil
console.log(Math.round(1.9));

3.Array对象：打印数组数据，对数组排序

let arr = new Array(2,8,5,6,9,7,4,1);
console.log(arr);
console.log(arr.toString());
console.log(arr.sort());

4.Window对象（※）

//弹出框
window.alert("text01");
//输入框
window.prompt("text02")
//确认框
window.confirm("text03");

5.JSON对象（※）
//json：前后端数据交互，是轻量级数据交换格式。
//独立于编程语言的文本格式存储和表示数据
//给服务器发送数据: 将JS对象转成JSON字符JSON.stringify(Js对象)，方便发送给后端程序，方便操作字符串字符串
//接受服务器的数据: JSON字符串转成JS对象JSON.parse(“json字符串”)方便解析对象中属性及函数
①json字符串
（json即为字符串，则有关于字符串处理的函数，都可以使用（length /concat() /substr(num1,num2),substr在JS中也遵守左闭右开的原则）

//json字符串的格式
var a = ' "name" : "rose" ';
// 获取长度
console.log(a.length);
//拼接			 
console.log(a.concat("hello"));
//截取,左闭右开
console.log(a.substr(1,7));

②json对象格式

var a =' {"name":"john","age": "10"} ';

③json多个对象数组格式

var a = '[{ "name":"Bill1" , "age":"20"},{"name":"Bill2" , "age":"18"}]';

重点：将json字符串转换成JS对象—JSON.parse(json字符串名)

var obj = JSON.parse(a);
console.log(obj[0].name);
console.log(obj[0].age);
console.log(obj[1].name)      ;
console.log(obj[1].age);

(一)自定义对象：
两种创建方式：
1.方式1：动态的给对象创建属性和函数

//    1.声明对象
console.log("========方式1========");
function Person(){}
//    2.创建对象
var p1 = new Person();
console.log(p1);
//    3.设置属性
p1.name ="张飞";
p1.age = 18;
console.log(p1);
//    4.设置方法:动态给对象绑定函数
p1.run = function(){
	console.log(this.name +this.age+":"+"正在学习");
}
console.log(p1);
//    5.调用对象的功能:属性，函数			
console.log(p1.name);
console.log(p1.age);
p1.run();
//console.log(p1.run());//undefined:没有定义返回值

2.方式2：固定格式创建对象

var p2 ={
	name : "李四",
	age : 10,
	say :function(){
		console.log(this.name+this.age);
	},
	study :function(num){
		console.log(this.name +"正在学习..."+num);
	}
}
console.log(p2);
console.log(p2.name);
console.log(p2.age);
p2.say();
p2.study(20);

三.DOM

作用：利用DOM技术，操作网页中的元素
由于网页是从上往下执行，在head中的script中操作元素，会返回null,因为元素还没有没加载到

//1.获取Id="d1"的元素
			var a = window.document.getElementById("d1");
			console.log(a);
			//2.获取class="a"的元素
			var b = window.document.getElementsByClassName("a");
			console.log(b);
			//3.获取Id="d1"元素的内容
			var c = a.innerHTML;
			console.log(c);
			//4.获取class="a"第二个元素的内容
			var d = b[1].innerHTML;
			console.log(d);
			//5.修改id="d1"的元素的内容
			a.innerHTML = "div1修改后的内容";
			console.log(a.innerHTML);
		    //将id="d1"的元素的内容变大
			a.innerHTML = "<h1>div1修改后的内容<h1>";
			console.log(a.innerHTML);
			//了解：innerHTML能够解析HTML元素，而innerText不能解析
			//练习6:点击我是div1时，获取name ="b"的第一个元素的内容
			function getText(){
				var f = document.getElementsByName("b");
				console.log(f[0].innerHTML);
			}
			//7.点击我是div1时，修改我是span2的内容
			function setText(){
				var g = document.getElementsByTagName("span");
				g[1].innerHTML = "修改span2";
				console.log(g[1].innerHTML );
			}
			//修改样式
			a.style.color = "red";