【第二阶段 day32 web前端】JS概述 JS语法 JS语句 JS数组 JS函数 JS对象-CSDN博客

本文链接：https://blog.csdn.net/oriettahuiru/article/details/120724924

1. JS概述

全称是JavaScript,是java脚本语言,用来增强网页的交互性
JS是基于对象和事件驱动的脚本语言
基于对象:JS与java一样,可以创建对象并使用对象
事件驱动:JS代码必须想办法触发才会执行,常见时间:单击,双击,鼠标划入划出
脚本语言:JS的运行必须在浏览器里
JS特点:直译式,弱类型语言,跨平台(浏览器),一定的安全性,良好的交互性

练习:测试JS入门

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 JS</title>
		<script>
			/* JS代码出现的位置:
			 1.行内JS + 2.内部JS + 3.外部JS*/
			function div1(){
				/* 弹框 */
				alert(2.4+3.6);//6
			}
		</script>
	</head>
	<body>
		<!-- 练习1:单击div时,弹出提示信息
			onclick:单击事件(事件驱动)
		 -->
		<div onclick="alert('路过了div1')">单击div1时,弹出提示信息</div>
		<a onclick="alert('路过了a1')">单击a1时,弹出提示信息</a><br />
		<!-- 练习2:双击时弹出信息 -->
		<span ondblclick="alert('双击我弹出')">双击span1时,弹出提示信息</span><br />
		<!-- 练习3:鼠标移开弹出信息 -->
		<span onmouseout="alert('鼠标移开时我弹出')">鼠标移开时,弹出提示信息</span><br />
		<!-- 练习4:鼠标移上时弹出信息 -->
		<span onmouseenter="alert('鼠标移上时我弹出')">鼠标移上时,弹出提示信息</span><br />
		
		<!-- 在网页中添加JS代码 -->
		<div onclick="div1();">在网页中添加JS代码</div>
		
	</body>
</html>

2.JS语法

2.1 JS的数据类型

2.1.1 数据类型number

数值类型只有一种:浮点型

<script>
	alert(Infinity);//Infinity
	alert(-Infinity);//Infinity
	alert(NaN);//NaN
	alert(100);//100
	alert(1.65);//1.65
	alert(3.6+4.4);//8
</script>

2.1.2 字符串类型String

<script>
	alert("hello");//hello
</script>

2.1.3 布尔类型

<script>
	alert(true);//true
	var f=false;
	console.log(f);//false
</script>

2.1.4 null

值只有一个,就是null. 表示空值或者不存在的对象

2.1.5 undefined

<script>
	var num;
	alert(num);//undefined
</script>

2.2 JS的变量

js是弱类型语言,所有类型的变量都是用var关键字来定义

<script>
	var v=123;
	alter(v);//123
	v="变量";
	alert(v);//变量
	v=true;
	alert(v);//true
</script>

练习:交换变量的值

<script>
	var a=1;
	var b=2;
	var c=a;
	a=b;
	b=c;
</script>

2.3 JS的运算符

<script>
	alert(5/2);//2.5    不区分类型,直接得到值
	var e=10;
	alert(e++);//10
	alert(++e);//12
</script>

练习:判断1和1是否相等

<script>
	// alert(1==1);//true
	// alert(1===1);//true
	/* alert(1=='1');//true     值
	alert(1==='1');//false   值和数据类型 */
	// alert(1!=2);
	// alert(1!==2);
	alert(1!='2');
	alert(1!=='2');
</script>

3.JS语句

3.1 if-else语句

<script>
		var a=4;
		if(a>4){
			alert("输入的数据大于4");
		}else{
			alert("输入的数据小于等于4");
		}
		
		var score=prompt("请输入成绩:");
		console.log(score);
		if(score>100){
			alert('成绩录入有误');
		}else{
			if(score>=90){
				alert("您的成绩为优秀!");
			}else if(score>=70){
				alert("您的成绩为良好!");
			}else if(score>=60){
				alert("您的成绩为及格!");
			}else{
				alert('您的成绩为不及格!');
				}
		}
</script>

3.2 switch语句

<script>
	var day=4;
	switch( day ){
		case 1:alert('今天是工作日第一天');break;
		case 2:alert('今天是工作日第二天');break;
		case 3:alert('今天是工作日第三天');break;
		case 4:alert('今天是工作日第四天');break;
		case 5:alert('今天是工作日第五天');break;
	    default :alert("今天周末");
		
	}
</script>

4.JS数组

4.1概述

js的数组与java一样,可以存储多个数据
区别:
1.java严格区分数据类型,整型数组只能存整数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS 数组</title>
		<script>
			// var arr1=new Array();
			// var arr2=new Array(2.2,true,"miaomiao",null);
			// alert(arr2.length);//4
			// var arr3=[];//0
			// alert(arr3.length);
			// alert(arr2);//2.2,true,"miaomiao"
			// /* 练习2:数组需要注意的细节 */
			// var arr11=[];
			// console.log(arr11.length);//0
			// arr11.length=10;
			// console.log(arr11.length);//10
			// arr11[99]="and";
			// console.log(arr11.length);//100
			// arr11.length=0;
			// console.log(arr11.length);
			// /* 练习3:数组的常见操作 */
			// var a=[1,2,3];
			// alert(a.length);//3
			
			// var arr=[123,"abc",false,new Object()];
			// for(var i=0;i<arr.length;i++){
			// 	console.log(arr[i]);
			// }
			/* 练习:定义JS数组的方式:数组数据丰富+长度可以改变 */
			let arr1=new Array();//声明一个空数组
			arr1=new Array(123,456,"xiaobai",32,null);
			console.log(arr1);
			console.log(arr1[2])//获取下标为2的数据
			console.log(arr1[arr1.length-1]);//获取下标最大值上的数据
			console.log(arr1.length);
			arr1.length=10;
			console.log(arr1.length);
			
			let arr2=[];//声明一个空数组
			arr2=["xiaoxiao",8787,true];
			console.log(arr2.length);

			/* 练习:遍历数组:普通for循环，增强for循环 */
			for(let i=0;i<arr2.length;i++){
				console.log(arr2[i]);
			}
			for(let i in arr2){
				console.log(i);
				console.log(arr2[i]);
			}
					
		</script>
	</head>
	<body>
		
	</body>
</html>

5.JS函数

类似于Java里的方法，用来封装一段代码，为了提高代码的复用性
步骤：

1.定义函数function
2.调用函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js 函数</title>
		<script>
			//1.定义函数，方式1
			// function a(){//1.定义函数
			// 	var a=[1,2,3,4,5];
			// 	var sum=0;
			// 	for(let i=0;i<a.length;i++){
			// 		if(a[i]%2!=0){
			// 			sum=sum+=i;
			// 	}
			//   }
			//   console.log(sum);
			// }
			//2.调用函数
			//a();
			
			//1.定义函数，方式2
			// var x=function(){
			// 	console.log('调用成功');
			// }
			//2.调用函数
			// x();
			/* 练习1：求整数数组的总和 */
			/* function arr(){
				var sum=0;
				var add=[1,2,3,4,5];
				/* for(let i=0;i<add.length;i++){
					sum+=add[i];
				}
				console.log(sum); */
				/* for(var s in add){
					console(add[i])
					sum+=add[i];
				}
				console.log(sum);
			} */
			// arr();
			/* var y=function(){
				var sum=0;
				var add=new Array(1,2,3,4,5);
				for(let i=0;i<add.length;i++){
					sum+=add[i];
				}
				console.log(sum);
			}
			 y(); */
			 /* 练习2：求和1-100*/
			 /* function sum(){
				 var summ=0;
				 for(let i=0;i<=100;i++){
					 summ+=i;
				 }
				 console.log(summ)
			 } */
			/* var sum1=function(){
				 var summ=0;
				for(let i=0;i<=100;i++){
					summ+=i;
				}
				console.log(summ)
			 }
			 */
			 
			 //3.有参数，没有返回值
			 /* function b(x,y){
					console.log(x+y);
			}
			b(2,3); */
				 
			/* 练习1：求1-10的总和 */
			// function sum2(arr){
			// 	var sum=0;
			// 	for(var i in arr){
			// 		sum+=arr[i];
			// 	}
			// 	console.log(sum);
			// }
			// sum2();
			/* var sum22=function(arr){
				var sum=0;
				for(var i in arr){
					sum+=arr[i];
				}
				console.log(sum);
			} */
			
			
			//4.有参数，也有返回值
			// function sum222(arr){
			// 	sum=0;
			// 	for(var i in arr){
			// 		sum+=arr[i];
			// 	}
			// 	return sum;
			// }
			// console.log(sum222(new Array(3,6,7,8)));
			
			/* 练习：求1-100的偶数和 */
			function oushu(){
				var sum=0;
				for(let i=0;i<=100;i++){
					if(i%2==0){
						sum+=i;
					}
				}
				return sum;
			}
			console.log(oushu())
		</script>
	</head>
	<body>
		<!-- <div οnclick="arr()">function方式</div>
		<div οnmοuseenter="y()">var方式</div> -->
		<button onclick="sum()">function方式</button>
		<button onclick="sum1()">var方式</button>
		<button onclikc="b(12,43)">有参数，没有返回值</button>
		<button onclick="sum22(new Array(3,6,54))"></button>
	</body>
</html>

6.JS对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js 对象</title>
		<script>
			function cla(){
				
				/* window.alert("提示信息会话框");
				window.confirm("确认对话框");
				window.prompt("键盘输入对话框");
				window.event;
				window.document;
				 */
				// var a="ghskfdsjsdfd";
				// /* 求字符串的长度 */
				// console.log(a.length);
				// /* 根据下标查找数据 */
				// console.log(a.charAt(5));
				// /* 拼接字符串 */
				// console.log(a.concat("jhjh9"));
				// /* 截取字符串 */
				// console.log(a.substring(1,4))
				// console.log(a.split("d"));
				/* 自定义对象 */
				//js对象的方式1
					// function person(){}//定义对象
					// var p1=new person();//创建对象
					// p1.name="张三";
					// p1.age=12;
					// console.log(p1)
					// p1.eat=function(){//定义函数
					// 	alert(this.name+":"+this.age);
					// 	console.log("吃吃吃")
					// }
					// p1.eat();
				
				//js对象的方式2
					// var p2={
					// 	"pname" : "李四",
					// 	"page" : 100,
					// 	"pscy":function(){
					// 		alert(this.pname+this.page)
					// 	}
					// }
					// console.log(p2);
					// p2.pscy();
					
					function student(){};
					var s1=new student();
					s1.name="小白";
					s1.age=21;
					s1.eat=function(){
						alert(s1.name+s1.age);
						console.log("吃饭饭");
					}
					s1.eat();
					
					let car={
						/* 资源名 ： 具体值 */
						cname : "车车",
						cprice : 9.9,
						cff : function(){
							alert("dududu");
						}
					}
					console.log(car);
				
			}
		</script>
	</head>
	<body>
		<button onclick="cla()" style="margin-left: 400px;"></button>
	</body>
</html>