在线学习JavaScript——Day2

最新推荐文章于 2023-12-02 10:35:34 发布

pupu633

最新推荐文章于 2023-12-02 10:35:34 发布

阅读量627

点赞数

分类专栏：果叽的痛苦前端生涯文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/pupu633/article/details/127302598

版权

果叽的痛苦前端生涯专栏收录该内容

10 篇文章 0 订阅

订阅专栏

啊！越学越感觉js的性格非常的彪悍and随性！

js的函数学习

问题

目前我们声明的js代码都是直接在script代码域中声明的。代码域中的代码，在浏览器解析网页的时候会立即执行，而我们希望js代码不要立即执行，而是根据用户的行为动作来触发执行，怎么办？

解决

script代码域是js代码的声明区域同时也是调用区域。如果我们有一块代码，不希望立即执行，但是需要声明！就需要在js中发明一种机制，代码使用该机制声明后不会立即触发，除非告诉浏览器需要触发，才会执行。

实现

js的函数。（在java里，则体现为方法的声明——调用）

内容

1、函数的声明

方式一：function 函数名(形参列表){函数体}

//声明方式一：
	function testA(a,b){
			alert("我是testA");
	}

方式二：var 变量名=function 函数名(形参列表){函数体}

//声明方式二： 
		var testB=function(){
			alert("我是testB");
		}

方式三：var 变量名=new Function(“形参名”,“形参名”,…,“函数体”);
注意：在js里，函数是以对象的形式存在的！！


//声明方式三： 把函数的形参和函数体都存到了Function这个对象里了
		var testC=new Function("a","b","alert('我是testC');");
			//a,b相当于方法一中testA(a,b)，是形参
			//"alert('我是testC');" ，是函数体
			//所以一个Function对象，就相当于存了一个具体点函数了
			//所以testB相当于是testC的简写

2、函数的形参:

函数在调用的时候形参可以全部赋值、部分赋值、甚至不赋值！
函数的形参可以接受任何类型的数据。
(活的真的挺粗糙的，精致这个词语跟js都不搭边）

//函数的形参
		function testA1(a,b,c){
			alert("函数的形参："+a+" "+b+" "+c);
		}
		
		testA1(1,2,"ccc");

3、函数的返回值

没有return语句，则默认返回undefined；有return语句，则按照return语句的内容返回。

//函数的返回值
		function testB1(){
				alert("函数的返回值");
				return"66666";
		}
		var hh=testB1();
		alert(hh);

4、函数的调用

本质：
当我们声明一个函数时，其实底层是声明了一个变量指向一个函数对象。当我们只对变量进行操作时，函数不会触发执行。当使用变量名() 时，会触发变量指向的函数的执行！

//函数的调用
		var testD=function(){
			alert("函数的调用");
		}
		alert(testD);//相当于打印一下testD的值
		alert(testD());//相当于告诉浏览器调用testD,alert打印的是它的返回值

5、函数作为参数传值

testX(function() 函数名(){函数体})

//函数作为参数传递
		var testE=function(){alert("我是testE函数");}
		function testF(a){alert(a);}
		testF(testE);   //相当于调用testF 打印的返回值为：testE的值
		
		function testG(a){alert(a());}   //这个a()是精髓
		testG(testE);   //相当于调用testG打印的返回值为：testE(),即调用testE打印testE的返回值
		
		testG(function(){alert("我是testE函数的替身");});   //跟以上一个运行效果
		//函数可以作为实参直接传递给另一个函数
		//相当于简化了java中 “通过反射把方法作为实参传递并在方法内部调用” 的过程

作用：

封装代码片段，降低代码冗余！

js的对象学习

问题

我们在学习了js的函数声明后，可以使用函数完成代码片段的封装。
但是函数的数量多了，也不好管理，怎么办？

解决

使用对象进行封装

内容

$\quad$ js的对象声明

方法一：（比较不适合代码的阅读，不建议使用）

//方式一：
	var obj=new Object();   //声明了一个空对象  可以理解为：在堆内存里面开辟了一块空间，里面什么都没存
	obj.uname="果叽";
	obj.age="20";
	obj.testA=function(){alert("美滋滋");}
	//java是吃套餐，JS是吃自助，给个空盘子，想吃啥吃啥
	alert(obj.uname);
	obj.testA();

方法二：
$\quad$ var 对象名={
$\quad$ $\quad$ 键名:值,
$\quad$ $\quad$ 键名:值,
$\quad$ $\quad$ …
$\quad$ }

//方式二：
	var obj2={
		uname:"啵叽果叽",
		age:"18",
		testB:function(){alert("最可爱");}
	}
	alert(obj2.uname);
	obj2.testB();

作用

开辟一个内存空间存储数据，作为整体进行操作。

特点

js的对象创建不需要类，直接进行创建，直接进行使用。
(想要啥直接往里面扔就行，没有类的束缚力，彻底的放飞自我了)

js的常用对象和方法

String对象
在js用户指南 - 语言参考 - js对象 - String对象 - 方法


function testString(){
	var s="abcdefg";
		
	//indexOf方法：返回字符串中第一次出现的指定字符的位置
		alert(s.indexOf('a'));
	
	//toUpperCase方法：小写变大写
		alert(s.toUpperCase());
	
	//toLowerCasef方法：大写变小写
		alert(s.toLowerCase());
	
	//substring方法：截取对象指定位置的子str，含头不含尾，substring(start,end);
		alert(s.substring(0,2));
	
	//substr方法：从指定位置开始 截取指定长度的子str，含头不含尾，substr(start[,length]);
		alert(s.substr(1,3));
}
testString();

Date对象
在js用户指南 - 语言参考 - js对象 - Date对象 - 方法


function testDate(){
	var d=new Date();   //存储当前代码存储的系统时间，存储的是客户端浏览器的时间
	
	//getFullYear方法：返回当前的年份
	alert(d.getFullYear())   
	
	//getMonth方法：返回当前的月份（一月为0） alert(d.getMonth()+1);
	//getDate方法：返回当前的日期
	//getDay方法：返回当前的星期（周日为0）
	//getHours方法：返回当前的小时
	//getMinutes方法：返回当前的分钟
	//getSecondsr方法：返回当前的秒钟
}
testDate();

Math对象
在js用户指南 - 语言参考 - js对象 - Math对象 - 方法
Math对象，不能new


function testMath(){
	
	//abs方法：取绝对值
	alert(Math.abs(-2));
	
	//ceil方法：向上取整
	alert(Math.ceil(3.14));   //返回4
	
	//floor方法：向下取证
	alert(Math.floor(3.14));   //返回3
	
	//random方法：取0～1随机数
	alert(Math.random());
	
	//round方法：sswr
	alert(Math.round(8.88));   //返回9
}
//testMath();

Global对象
在js用户指南 - 语言参考 - js对象 - Global对象 - 方法
不能new，不需要Global.方法名了，直接用方法名


function testGlobal(){
	var s="var a='123'";
	
	//eval方法：把字符串转换成js代码运行执行 - 非常牛！实现动态执行，实现后台控制前台的一个动作
	eval(s)
	alert(a);
	
	var os="{uname:'果果'，age:12}"   //json字符串
	eval("var obj="+os);   
	alert(obj.uname);

js的事件机制

问题

目前我们可以在html网页中声明js代码域，并使用函数在代码中封装js逻辑代码片段。但是现在函数声明好后，我们仍然是直接在js的代码域中触发执行，代码域中的执行级别是非常高的，网页的html还没被解析，函数就已经执行过了，而我们希望函数的执行是根据用户在页中的行为动作来出发的，怎么办？

解决

事件机制

内容

1、鼠标事件

//鼠标事件
	//单击事件
	function testClick(){
		alert("快走...照顾好狗子...");
	}

	//双击事件
	function testDbClick(){
		alert("我是双击事件");
	}

	//鼠标移动进入事件
	function testMouseOver(){
		alert("我进来了！");
	}

	//鼠标移动出去事件
	function testMouseOut(){
		alert("我出来了！");
	}
	
	//鼠标移动事件
	function testMouseMove(){
		alert("我移动了！");
	}

<body>
<!-- 鼠标事件 -->
	<input type="button" value="鼠标单击事件" onclick="testClick()"/>
	<input type="button" value="鼠标双击事件" ondblclick="testDbClick()"/>
	<br /><br />
	<div onmousemove="testMouseMove()" onmouseout="testMouseOut()" onmouseover="testMouseOver()" style="border: solid 1px;width 100px;height: 100px;"></div>   
</body>

2、键盘事件


//键盘事件
	//键盘下压事件
	function testkeyDown(){
		console.log("下压了");
	}

	//键盘弹起事件
	function testkeyup(){
		console.log("弹起了");
	}

<body>
<!-- 键盘事件 -->
	键盘下压事件：<input type="test" value="" onkeydown="testkeyDown()"/><br/>
	键盘下压事件：<input type="test" value="" onkeyup="testkeyup()"/><br/>
</body>

3、焦点事件

//焦点事件
	//获取焦点
	function testFocus(){
		console.log("获取到焦点了!");
	}
	
	//失去焦点（意味着录入元素结束了）
	function testBlur(){
		console.log("失去焦点了!");
	}

<body>
<!-- 焦点事件 -->
	获取焦点事件：<input type=""  value="" onfocus="testFocus()" /><br/>
	失去焦点事件：<input type=""  value="" onblur="testBlur()" /><br/>
</body>

4、其他事件

//其他事件
	//值改变事件
	function testChange(){
		alert("值改变了！");
	}
	
	//页面加载事件
	function testLode(){
		console.log("页面被加载了！");
	}

<body onload="testLode()">
<!-- 其他事件 -->
	<!-- 值改变事件 -->
		值改变事件：<select name="" id="" onchange="testChange()">
			<option value="">北京</option>
			<option value="">上海</option>
			<option value="">义乌</option>
		</select>
</body>