网页前端第六次培训

本文章为寒假记录通过b站学习HTML所得收获


一、学习网址:【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili   p20~p23


二、js基础语法

1.运算符

比较运算符
				==比较值
					1=="1"  true
				===比较值与类型
					1==="1"	false

例句



			//==
			console.log(1=='1');//true
			
			//===
			console.log(1=='1');//false

2.数组

<!--
			数组
				数组的定义
					1.隐式定义
						var 数组名=[];//空数组
						var 数组名=[值1,值2,值3...];
					2.直接实例化
						var 数组名=new Array(值1,值2,值3...);
					3.定义数组并设置长度
						var 数组名=new Array(size);
				数组的操作
					数组的下标从0开始,(不会出现下标越界)
					获取数组指定下标的值:(如果下标不存在,显示undefined)
						数组名[下标]
					设置数组指定下标的值:(如果下标不存在,则自动扩容)
						数组名[下标]=值;
					获取数组的长度
						数组名.length
					设置数组的长度:
						数组名.length=值;
					了解:
						如果设置非整数型的下标,则会成为数组的属性,不计入数组的长度
						设置属性:
							数组名.属性名=值;
							数组名["属性名"]=值;
						获取属性:
							数组名.属性名;
							数组名["属性名"];
				数组的遍历:
					1.for循环遍历    (重要)
						for(var index=0;index<数组长度;index++){
							
						}
					2.for...in循环
						for(var 下标名 in 数组){
							
						}
					3.forEach循环
						数组.forEach(function(element,index){
							//element:元素
							//index:下标
						})
					注意:
						for--》 不遍历属性
						forEach--》 不遍历属性和索引中的undefined
						for...in--》 不遍历索引中的undefined
				数组提供的方法:
					push 			添加元素到最后
					indexOF 		数组元素索引
					join 			数组转换成字符串
					split 			字符串方法,将字符串转换成数组
					
		-->

例句

<script type="text/javascript">
		/*	数组的定义	*/
		//隐式定义
		var arr1=[];
		console.log(arr1);
		var arr2=[1,2,'a',true];
		console.log(arr2);
		
		//直接实例化
		var arr3=new Array(1,2,3);
		console.log(arr3);
		
		//定义数组并设置长度
		var arr4=new Array(5);
		console.log(arr4);
		
		console.log("==============");
		
		
		/*	数组的操作	*/
		//获取指定下标的值
		console.log(arr2[1]);
		//如果下标不存在
		console.log(arr2[10]);//undefined
		//设置指定下标的值
		arr2[1]=20;
		console.log(arr2);
		//如果下标不存在
		arr2[10]=100;
		console.log(arr2);
		//获取数组的长度
		console.log(arr3.length);//3
		//设置数组的长度
		arr3.length=5;
		console.log(arr3);
		//设置数组的属性
		arr3.name="zhangsan";
		console.log(arr3);
		arr3["pwd"]="123456";
		console.log(arr3);
		//获取数组的属性
		console.log(arr3["name"]);
		
		
		console.log("==============");
		
		/*	数组的遍历	*/
		console.log(arr3);
		console.log("---for循环遍历---");
		//for循环遍历
		for(var i=0;i<arr3.length;i++){
			console.log("下标:"+ 1 +",值:"+arr3[i]);
		}
		//for...in
		console.log("---for...in---");
		for(var i in arr3){
			console.log("下标:"+ 1 +",值:"+arr3[i]);
		}
		//forEach
		console.log("---forEach---");
		arr3.forEach(function(element,index){
			console.log("下标:"+ index +",值:"+ element);
		})
		
		console.log("==============");
		/*	数组提供的方法	*/
		var arr5=["a","b","c"];
		
		
		// 	push 			添加元素到最后
		arr5[arr5.length]="d";
		arr5.push("e");
		console.log(arr5);
		// 	indexOF 		数组元素索引
		console.log(arr5.indexOf("a"));//0
		console.log(arr5.indexOf("t"));//-1,找不到返回-1
		// 	join 			数组转换成字符串
		console.log(arr5.join("-"));//a,b,c,d,e
		// 	split 			字符串方法,将字符串转换成数组
		var str="1,2,3,4,5";
		console.log(str.split(","));
		
		</script>

3.函数以及函数的调用


<!--
			函数的定义
				1.函数声明语句
					function函数名([参数列表]){
						
					}
				2.函数定义表达式
				var 变量名/函数名=function([参数列表]){
					
				}
				3.function构造函数
				var 函数名=new FUnction([参数列表],函数体);
			函数的参数
				定义函数是设置形参,调用函数时传递实参。
				1.实参可以省略,则形参为undefined
				2.如果形参名相同,则以最后一个为准
				3.可以设置参数的默认值
				4.参数为值传递,传递副本;参数是引用传递,则传递的是地址,操作的是同一个对象
			
			函数的调用
				1.常用调用模式
					函数名([参数列表]);
				2.函数调用模式(函数有返回值)
					var 变量名=函数名([参数列表]);
				3.方法调用模式
					对象.函数名([参数列表]);
				
			函数的返回值:
				return
					
					1.在没有返回值的方法中,用来结束方法,如果方法没有返回值,使用return返回的是undefined
					2.有返回值的方法中,一个是用来结束方法,一个是将值带给调用者
				
			函数的作用域:
				在js中,只有在函数中才有作用域
				1.在函数中,存在局部变量和全局变量
				2.在函数中,如果声明变量时未使用var修饰符,则该变量为全局变量
			
		-->

例句

<script type="text/javascript">
		/*	函数的定义	*/
		//1.函数声明语句
		function fn01(a,b){
			console.log(a+b);
		}
		//2.函数定义表达式
		var fn02=function(a,b){
			console.log(a+b);
		}
		//3.Function(可以忽略,了解即可)
		var fn03=new Function('a','b','return (a+b);');
		console.log(fn03);
		//相当于
		function fn04(a,b){
			return (a+b);
		}
		console.log("==============");
		
		/*	函数的参数	*/
		//1.实参可以省略,则形参为undefined
		function test01(x,y){
			console.log(x+y);
		}
		//调用函数
		//未设置实参
		test01();//NaN
		test01(1);//NaN
		test01(1,2);//3
		
		//2.如果形参名相同,则以最后一个为准
		function test02(x,x){
			console.log(x);
		}
		test02(1,2);//2
		
		//3.可以设置参数的默认值
		function test03(x){
			//如果形参x有值,则值为x传递的值:否则为"x"
			x=x||"x";
			console.log(x);
		}
		test03(10);//10
		test03();//x
		function test04(x){
			(x !=null && x !=undefined)? x=x:x="x";
			console.log(x);
		}
		test04();//x
		test04("hello");
		
		//4.参数为值传递,传递副本;参数是引用传递,则传递的是地址,操作的是同一个对象
		//值传递
		//变量
		var num=10;
		//函数
		function test05(num){
			num=20;
		}
		//调用函数
		test05(1);//实参是定义的变量
		console.log(num);// 10,不是20
		
		
		//引用传递
		var obj={name:"zhangsan"};
		console.log(obj);
		function test06(o){
			o.name="list";
		}
		test06(obj);
		console.log(obj);
		
		
		console.log("---------------");
		/*	函数的调用	*/
		//常用调用模式
		function f1(){
			console.log("常用调用模式...");
		}
		f1();
		//函数调用模式
		var f2=function(){
			console.log("函数调用模式...");
			return 1;
		}
		var num1=f2(1);
		console.log(num1);
		//方法调用模式
		//定义对象	key键:字符串		value值:任意数据类型
		var obj={
			name:"zhangsan",//字符串
			age:18,//数值
			sex:true,//布尔
			cats:["大毛","二毛"],//数组
			dog:{
				name:"张二狗",
				age:1
			},
			sayHello:function(){
				console.log("你好呀-");
			}
		}
			console.log(obj);
			console.log(obj.dog);
			console.log(obj,sayHello);
			obj,sayHello()//	对象调用函数
		
		
		console.log("---------------");
		/*	函数的返回值		*/
		function a1(){
			console.log("没有返回值...");
			return;
			console.log("......");
		}
		console.log(a1());
		
		function a2(){
			console.log("有返回值...");
			return "test";
		}
		console.log(a2());
		
		
		console.log("---------------");
		/*	函数的作用域	*/
		var pp="hello";//全局变量
		//函数中定义的变量是局部变量
		function qq(){
			//局部变量
			var box=10;
			//全局变量
			box2=20
			
		}
		//调用方法,执行方法中的代码
		qq();
		console.log(pp);//全局变量
		console.log(box1);
		console.log(box2);
		
		
		</script>
上一篇:分享JS引擎和作用域的对话-很有意思的一段(来自《你不知道的JS》)


下一篇:js数据类型检测