前端1Javascript+DOM+json_javascript根据dom数据组合json-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_60323584/article/details/124481516

一.概述

简称是js,是一种脚本语言,只能在浏览器中执行
特点:
直译式,不需要编译的过程.
js是一种弱类型的语言,用来提高网页与用户的交互性
事件驱动: 指JS代码以什么方式来触发执行
基于对象: JS也有类似于OOP的思想,可以自己new对象
脚本语言: 只能在特定场景执行的语言,JS只能在浏览器来执行
JS的出现的位置:
行内JS,内部JS,外部JS

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 js的入门案例</title>
		<!-- js可以让网页动起来,基于对象,事件驱动,脚本语言 -->
		<!-- 2.js代码可以出现的位置:内部JS -->
		<script>
			alert(100);
		</script>
	</head>
	<body>
		<!-- 1.js代码可以出现的位置:行内JS -->
		<!-- 事件驱动: js代码什么方式会被触发执行-->
		<!-- 点击时弹框 -->
		<div onclick="alert('您点击了一个div元素')">我是div1</div>
		<!-- 鼠标路过时弹框 -->
		<div onmouseenter="alert('您路过了一个div元素')">我是div2</div>
		<!-- 双击时弹框 -->
		<div ondblclick="alert('您双击了一个div元素')">我是div3</div>

	</body>
</html>

二.JS语法

1.数据类型和变量

数据类型:number string boolean null undefined

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 数据类型</title>
		<script>
			//2,变量: 变量类型 变量名=变量值
				var b = 10;//number
				b = 20; //number
				b = 1.6;//number
				b = true;//boolean
				alert(b);//true
				//练习:交换变量的值(首尾相连)
				var c = 10;
				var d = 20;
				var e = c;
					c = d;
					d = e;
				alert(c+","+d)//20,10
			//1,数据类型:number  string  boolean null undefined
				//+两个作用:加法运算 和 拼接字符串
				alert(2.4+3.6);//结果是number类型的,6
				//在js中,字符串可以用单引号或者双引号引起来
				alert("10");
				alert('你好');//单引号也可以表示字符串
				alert("10"+10);//1010
				alert("10"+10+20);//101020
				alert(10+20+"10");//3010
				//boolean类型
				alert(false);
				alert(true);
				alert(null);
				alert(undefined);//未被定义
				var a ; alert(a);//undefined
				
		</script>
	</head>
	<body>
	</body>
</html>

2.运算符

1,算术运算符 / % ++ --

2,复合赋值运算符 %=

3,比较运算符 == ， === ，！==

4,三元运算符: 求两个数里的大值

5,运算符typeof:用来获取数据的类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 js的运算符</title>
		<script>
			//TODO java的面试题:a=a+1; a+=1的区别???
			//5,运算符typeof:用来获取数据的类型
				//alert弹出框
				//输出结果到控制台,f12找到浏览器里的控制台
				console.log(100);
				console.log(typeof 100);//输出100的类型,number
				console.log(typeof "100");//输出100的类型,string
				console.log(typeof "100"+100);//输出100的类型拼接100数字,string100
			//4,三元运算符: 求两个数里的大值
				var e = 10;
				var f =5;
				var g = e > f ? e : f ;//记录大的值
				alert(g);
			//3,比较运算符,描述的成立就是true,不成立就是false
				alert(1!=="1");//true
				alert(1==1);//true
				alert(1=="1");//true,==只比值
				alert(1==="1");//false,===比类型和值
				alert(1===1);//true,类型和值都是一样的
			//2,复合赋值运算符 %=
				var d = 10;
				alert(d%=3);//1
				// d %= 3 相当于: d = d % 3;   
			//1,算术运算符 / % ++ --
				alert(5/2);//2.5,js是弱类型的语言
				alert(5%2);//取余数,1
				var a=10;
				var b=10;
				var c = a+++b;//++优先级高于+,所以先结合的是a++然后再+b
				alert(c);//20 
				// alert(a++);//10
				// alert(++b);//11
				a = a++;//把a++的结果交给a保存
				alert(a);//10
				b = ++b;//把++b的结果交给b保存
				alert(b);//11
			
			
		</script>
	</head>
	<body>
	</body>
</html>

三.JS语句

1,分支结构

if...else switch...case

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 js的语句</title>
		<script>
			//2.switch...case
				//根据用户指定的值,提示今天是星期几
				var day = prompt('请输入数据:') ;
				console.log(typeof day);//浏览器收到的都是string
				switch(day){
					//break结束循环,结束case的结构
					case '1' :console.log("今天是星期一");break;
					case "2" :console.log("今天是星期二");break;
					case "3" :console.log("今天是星期三");break;
					case "4" :console.log("今天是星期四");break;
					case "5" :console.log("今天是星期五");break;
					case "6" :console.log("今天是星期六");break;
					case "7" :console.log("今天是星期日");break;
				}
			//1.if...else
				var a = 3;
				//===要求类型和值都一样才是true
				if(a==="3"){//false
					console.log('ok');
				}else{
					console.log('no ok');
				}
				//练习:判断成绩，判断成绩所属的等级
				// 80~100(包括80，也包括100)		优秀 
				// 60~80(包括60，但不包括80)		中等
				// 0~60(包括0，但不包括60)		不及格
				// 其他值						输入有误
				var b = 98;
				if(b>=80 && b<=100){
					console.log("优秀");
				}else if(b>=60 && b<80){
					console.log("中等");
				}else if(b>=0 && b<60){
					console.log("不及格");
				}else{
					console.log("输入有误")
				}
		</script>
	</head>
	<body>
	</body>
</html>

2.循环结构

for循环 while循环 while(循环条件){ 循环体 }

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 js的循环语句</title>
		<script>
			//2,while循环 while(循环条件){ 循环体 }
				//练习1:假如你有1亿,每天花一半,能花多少天
				var money = 100000000;//定义变量,记录钱
				var days = 0;//定义变量,记录天数
				while(money>1){
					money = money/2;//花钱
					days++;//天数++
				}
				console.log("1亿能花"+days+"天~~");
			//1,for循环
				//练习1:打印1~10
				for(var i=1;i<=10;i++){
					console.log(i);
				}
				//练习2:求1~100里偶数的和
				var sum = 0 ;//定义变量,记录和
				for (var i = 1; i <=100; i++) {
					if(i % 2 == 0){//偶数
						sum = sum + i ;//修改变量的值
					}
				}
				console.log("1~100的偶数和是: "+sum);
				
		</script>
	</head>
	<body>
	</body>
</html>

四.JS的数组

1,特点: 长度可变,数据类型可以存的非常丰富.
2,创建:

var a  = new Array(1,2,3,4.1);
var a = [1,2,3,4.1];

3,遍历:

//i是下标,a[i]是数据
for(var i=0;i<a.length;i++){}
for(var i in a){}

4.测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 js数组</title>
		<script>
//JS数组的特点:存的数据类型丰富,也有下标0,也有length,随时改长度
			//1.创建数组的方式一:
				var a = new Array();
				console.log(a);
				console.log(a.length);//获取数组的长度
				var b = new Array(1,1.1,true,'hello');
				console.log(b);
				console.log(b.length);
				console.log(b[2]);
				console.log(b[3]);
				console.log(b[4]);//undefined!!!
			//2.创建数组的方式二:	
				var c = [];
				console.log(c.length);//0
				c = [1,1.1,true,'abc'];
				console.log(c.length);//4
				c[99]=true;
				console.log(c);
				console.log(c.length);//100
			//3.遍历数组
				for(var i=0;i<c.length;i++){
					//i是下标,c[i]是通过下标获取c数组里的数据
					console.log(c[i]);
				}
				//java的foreach:for (Object o : y) {o是数据}
				for (var o in c) {//forin,o是下标
					console.log(c[o]);
				}
		</script>
	</head>
	<body>
	</body>
</html>

五.JS函数

和java里的方法一样,也是有()的标记,也可以有参数列表,也可以有返回值

//定义函数
function a(参数名){ return b; }
var a = function(参数名){return b; }
//调用a函数,并传入参数,并用c记录返回值
var c = a(传参);

测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 js函数</title>
		<script>
			//练习: 设计函数,并提供返回值和参数列表
			//需求:打印指定数组中的所有数据
				function tostring(a){
					var s = "";//定义变量,记录数据拼接后的字符串
					for(var i in a){//i是下标,a[i]是数据
						//把每个数据拼接成字符串,空格隔开
						s = s + a[i]+" ";
					}
					return s;//把结果返回给调用者
				}
			//调用函数,并准备参数arr,并用result接受函数返回来的结果
				var arr = new Array("abc",1.1,"jack",666);
				var result = tostring(arr);
				console.log(result);
				
			//练习: 设计函数,并提供返回值(通过return返回结果)
				var x = function(){
					return "hello js";//把结果返回给调用者
				}
				//调用了x(),并用y保存了函数的返回值
				var y = x();
				console.log(y);
			//2,创建JS函数方式2:
				//创建
				var get = function(){
					console.log('get()被调用!');
				}
				//调用
				get();
				//练习:统计1~10的偶数个数(使用数组和函数)
				var count = function(){
					var a =[1,2,3,4,5,6,7,8,9,10];
					var b = 0;//记录个数
					for(var i in a){//i是下标,a[i]表示数组里的数据
						if(a[i] % 2 == 0){//判断数据a[i]是不是偶数
							b++;//求个数
						}
					}
					console.log(b);
				}
				count();
				
			//1,创建JS函数方式1:
				//创建
				function save(){
					console.log('save()被调用成功!');
				}
				//调用
				save();
				
				//练习:统计1~10的总和(使用数组和函数)
				function sum(){
					var a =[1,2,3,4,5,6,7,8,9,10];//创建数组
					var b = 0;//定义变量,记录和
					for(var i in a){//forin遍历数组,i是下标
						//把每个数据a[i]求和
						b = b + a[i];
					}
					console.log(b);
				}
				
		</script>
		<style>
			/* 给按钮添加背景色 */
			button{
				background-color: pink;
				border-color: pink;
			}
		</style>
	</head>
	<body>
		<!-- 单击按钮,触发了js中定义好的sum() -->
		<button onclick="sum();">点我,求和</button>
	</body>
</html>

六.JS对象

分成两类: 内置对象 , 自定义对象!!!
内置对象: String Array Math…JSON Document

1.测试内置对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 js对象</title>
		<script>
			//2, Array 和 Math 的功能
			function b(){
				console.log( Math.PI );//获取π的值
				//获取随机数,默认产生0~1
				console.log( Math.random()*10 );
				//四舍五入
				var x = Math.round(2.8);
				console.log(x);
				
				//创建数组
				var a = new Array(8,3,1,5,2);
				console.log(a);
				//把数组里的数据拼接成字符串
				var b = a.toString();
				console.log(b);
				//对数组排序
				var c = a.sort();
				console.log(c);//[1, 2, 3, 5, 8]
			}
			//1.string的功能
			function a(){
				var a = "hello";
				//求字符串的长度
				console.log(a.length);
				//拼接字符串
				var b = a + "world";
				console.log(b);
				var c = a.concat("world");
				console.log(c);
				//全转大写
				var d = a.toUpperCase();
				console.log(d);
				//截取字符串,含头不含尾[1,3)
				var e = a.substring(1,3);
				console.log(e);
			}
		</script>
	</head>
	<body>
		<div onclick="b()">单击,触发b函数</div>
		<div ondblclick="a()">双击,触发a函数</div>
	</body>
</html>

2.!!!自定义对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 自定义js对象</title>
		<script>
			//!!!!! 创建JS对象的方式2:
			//语法: var 对象名={k:"v",k:"v",k:function(){}}
				//改造Person2对象
				var person2={
					name:"jack",
					study:function(){
						console.log('study()已被调用');
					}
				}
				//调用对象的属性--要么打印要么赋值
				console.log(person2.name);
				//调用对象的函数
				person2.study();
				
				//改造Car2对象
				var car2 = {
					pinpai:"黄大发" ,
					price:9.9
				}
				console.log(car2);
				//调用对象的属性
				console.log(car2.pinpai);
				console.log(car2.price);
			
			//创建JS对象的方式1:
				//练习:创建Car对象,设计属性和函数并完成调用!
				function Car(){}
				var c = new Car();
				console.log(c);
				
				//设置属性并调用
				c.pinpai="黄大发";
				c.price=9.9;
				console.log(c);
				console.log(c.pinpai);
				console.log(c.price);
				
				//设置函数并调用
				c.run=function(x){
					 return x+10;
				}
				var y = c.run(100);
				console.log(y);
			
				//1,声明对象
				function Person(){}
				//2,创建对象
				var p = new Person();
				console.log(p);
				//3,设置属性
				p.name="jack";
				console.log(p);
				//4,设置函数
				p.study=function(){
					console.log(100);
				}
				//5,调用属性
				console.log(p.name);
				//6,调用函数
				p.study();
			
		</script>
	</head>
	<body>
	</body>
</html>

七.DOM

是用来利用JS代码,操作HTML的每个元素的

第一步:获取document对象, window.document,其中window可以省略不写
第二步:使用对象的属性和函数

getElementById()--按照id属性的值,来获取元素,只能获取一个
getElementsByName()--按照name属性的值,来获取元素,获取多个,并存入数组
getElementsByClassName()--按照class属性的值,来获取元素,获取多个,并存入数组
getElementsByTagName()--按照标签名的值,来获取元素,获取多个,并存入数组

innerHTML属性---获取内部的内容
innerText属性---获取内部的内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 DOM</title>
		<!-- DOM就是用一套API来快速的通过js代码获取元素 -->
		<script>
			function get(){
				//1,获取id="a"的元素的内容
				//获取document对象
				//按照id获取元素getElementById("id属性的值")
				var x = document.getElementById("a");
				console.log(x);
				var y = x.innerHTML;//获取元素的内容
				console.log(y);
				//2,获取id="b"的元素的内容 并修改????
				var z = document.getElementById("b").innerHTML;
				console.log(z);
				z='我变了...';
				console.log(z);
				//3,修改id="a"的元素的内容
				document.getElementById("a").innerHTML="我也变了";
				//4,获取我是span1--按照class的值获取
				var a = document.getElementsByClassName("c");
				console.log(a);//按照class获取到了数组
				var b = a[0].innerHTML;//按照下标操作元素
				console.log(b);
				//5,获取我是span1--按照标签名的值获取
				        //  按照标签名span获取到一个数组       下标  获取内容
				var c = document.getElementsByTagName("span")[0].innerHTML;
				console.log(c);
				//6,修改我是span2的内容
				//了解:innerHTML和innerText的区别?前者可以解析HTML代码,后者不能
document.getElementsByClassName("c")[1].innerHTML="<h1>我是渣渣辉</h1>";
				// document.getElementsByClassName("c")[1].innerText="<h1>我是渣渣辉</h1>";
			}
		</script>
	</head>
	<body>
		<button onclick="get()">按钮</button>
		<div id="a">我是div1</div>
		<div id="b">我是div2</div>
		<span class="c">我是span1</span>
		<span class="c">我是span2</span>
	</body>
</html>

八.JSON

是一种轻量级的数据交换格式,本质就是一个字符串.
用来规定浏览器和服务器之间数据交换的一个格式.

var c = '[{"name":"jack","age":"20"},{"name":"rose","age":"18"}]';
//利用js的内置对象JSON,完成json字符串和js对象的互转
//parse(): json字符串->js对象:为了方便的调用对象的属性
var obj = JSON.parse(c);
//stringify(): js对象->json字符串:为了方便的操作字符串
var str = JSON.stringify(person);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 json</title>
		<script>
			//1,创建json字符串
			var a ='"name":"jack"';//注意语法!!
			console.log(a);
			console.log(a.length);//求长度
			console.log(a.concat(100));//拼接
			//2,创建json对象--为了方便的操作字符串
			var b = '{"name":"jack","age":"20"}';
			console.log(b);
			console.log(b.length);//获取字符串的长度
			//js对象--为了方便的解析对象的属性
			var b2 = {name:"jack",age:20};
			console.log(b2.name);//获取属性的值
			//3,创建json数组
			var c = '[{"name":"jack","age":"20"},{"name":"rose","age":"18"}]';
			console.log(c.length);
			console.log(c.concat(100));
			//TODO 需求:解析c里面每个属性的值
		//解决方案:把json字符串转成js对象,否则就只能一点一点截取字符串啦!
			//利用js的内置对象JSON,完成json字符串和js对象的互转
			//parse(): json字符串->js对象:为了方便的调用对象的属性
			var obj = JSON.parse(c);
			console.log(obj);
			console.log(obj[0].name);//jack
			console.log(obj[0].age);//20
			console.log(obj[1].name);//rose
			console.log(obj[1].age);//18
			//stringify(): js对象->json字符串:为了方便的操作字符串
			//定义JS对象
			var person={name:"jack",age:20};
			//利用工具变成json字符串
			var str = JSON.stringify(person);
			console.log(str);
			console.log(str.length);
			var y = str.substring(9,13);
			console.log(y);//jack
		</script>
	</head>
	<body>
	</body>
</html>