JavaScript的函数,事件(常用事件,事件对象),内置对象(字符串,数组,Date,Nath)超超超级详解!!!

文章目录

函数

函数的概念

1.函数是定义一次但却可以调用任意多次的一段完成某种特定功能的JS代码;

2.函数的语句是一个独立的部分,它不会在外部脚本执行时被执行,而只是作为函数的定义而存在,只有调用它时才执行;

3.函数调用指通过函数名来使用这段代码;

4.函数在定义以后可以被重复调用,以此通常将常用的功能写成一个函数.

定义函数

函数定义的基本语法

function functionName([arguments]){
	javascript statements;
	[return expression;]
}
function: 表示函数定义的关键字;
functionName: 表示函数名;
arguments: 表示传递给函数的参数列表,各个参数之间用逗号隔开,可以为空;
statements: 表示实现函数功能的函数体;
return expression: 表示函数将返回expression的值,可选.

//定义简单的函数
function fun(){
    
    
	alert("函数体");
}

函数调用

1.由函数来调用

<script type="text/javascript">
	function fun1(){
    
    
		alert("test");
	}
	fun1();//函数名调用
	function fun2(){
    
    
		fun1();//在其它函数中调用
		alert("fun2");
	}
</script>

2.事件驱动

function fun(){
    
    
	alert("test");
}
....
<body>
	<input onclick="fun()" value="驱动函数" />
</body>

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js_2</title>
		<script type="text/javascript">
			function fun1(){
    
    
				alert("fun1");
			}
			
			function fun2(){
    
    
				fun1();
				alert("fun2");
			}
		</script>
	</head>
	<body>
		<input type="button" value="按钮" onclick="fun2()" />
	</body>
</html>

变量的作用域

1.全局变量:在函数外部定义的变量,它在声明后,任何程序段都可用.

2.局部变量:在函数内部定义的变量,作用范围为函数内部.

<script type="text/javascript">
	var str = "全局变量";
	function test(){
    
    
	var str = "局部变量";
		alert(str);
	}
	alert(str);
	test();
</script>

全局函数

1.parseInt(arg): 把括号内的内容转换成整数之后的值, 如果括号内为字符串, 则字符串开头的数字部分转换成整数, 如果以字母开头, 则反回"NAN"即not a number.

var x = 10;
var y = "20";
var z = "30as3";
var t = "a30";
console.log(x+y);//1020
console.log(x+parseInt(y));//30 括号内为字符串,把括号内的内容转换成整数之后的值
console.log(x+parseInt(z));//40 如果括号内为字符串, 则字符串开头的数字部分转换成整数,
console.log(x+parseInt(t));//NAN 如果以字母开头, 则反回"NAN"

2.parseFloat(arg): 把括号内的字符串转换成浮点数之后的值,字符串开头的数字部分被转换成浮点数,如果以字母开头,则返回"NAN".

var x = 10;
var y = "20.111";
var z = "30.123as3";
var t = "a30.12";
console.log(x+y);//1020.111
console.log(x+parseFloat(y));//30.111
console.log(x+parseFloat(z));//40.123000000000005
console.log(x+parseFloat(t));//NAN

3.typeof(arg): 返回arg值的数据类型.

var date = new Date();
console.log(typeof(date));//Object

4.eval(arg): 可运算某个字符串.

var x = 10;
var y = "20.111";
var z = "1+x+y";
console.log(eval(z));//1120.111

事件

常用事件

事件	事件描述
onclick	鼠标点击事件
ondblclick	鼠标双击时
onfocus	标签获得获得焦点
onblur	标签失去焦点
onmouseover	鼠标被移到某标签之上
onmouseout	鼠标从某标签移开
onload	当网页内容加载完毕触发,一般加载body
onchange	当前标签失去焦点并且标签的内容发生改变时触发事件处理程序
onkeydown	键盘按下
onkeyup	键盘抬起

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js_5</title>
		<script type="text/javascript">
			function fun(){
    
    
				console.log("函数被执行");
			}
		</script>
	</head>
	<body onload="fun()">
		<!-- onclick():鼠标点击 -->
		<input type="button" value="按钮" onclick="fun()" />
		<hr />
		<!-- ondblclick:鼠标双击键 -->
		<input type="button" value="按钮" ondblclick="fun()" />
		<hr />
		<!-- onfocus:鼠标获得焦点  onblur:鼠标失去焦点-->
		<input type="text" onfocus="fun()" onblur="fun()" />
		<hr />
		<!-- onmouseover:鼠标被移到某标签上 onmouseout:鼠标从某标签移开 -->
		<div style="background-color: aqua;" onmouseover="fun()" onmouseout="fun()">标签</div>
		<hr />
		<!-- onchange: 是指当前标签内容发生改变且失去焦点时触发 -->
		<input type="text" value="123" onchange="fun()" />
		<hr />
		<!-- onkeydown:键盘按下  onkeyup:键盘抬起 -->
		<input type="text" onkeydown="fun()" onkeyup="fun()" />
	</body>
</html>

Event对象(事件对象)

Event对象代表事件的状态, 比如键盘按键的键位、鼠标的位置.

事件类型	事件类型
Button	被点击的鼠标键位, 0-左键 1-滚轮 2-右键
altKey	按下alt键返回true
ctrlKey	按下ctrl键返回true
shiftKey	按下shift键返回true
keyCode	返回被按下的键位编码
offsetX	当前标签内的鼠标X轴
offsetY	当前键盘内的鼠标Y轴
clientX	鼠标在浏览器内部X轴
clientY	鼠标在浏览器内部Y轴
screenX	鼠标在显示器内的X轴
screenY	鼠标在显示器内的Y轴

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js_6</title>
		<script type="text/javascript">
			function fun(e){
    
    //e 就是事件对象
				console.log(e); //事件类型
				console.log(e.button); //0-左键 1-滚轮 2-右键
				console.log(e.keyCode);
				console.log(e.ctrlKey+":"+e.keyCode==true);
				console.log(e.offsetX+":"+e.offsetY);//获得鼠标在标签内的位置
				console.log(e.clientX+":"+e.clientY);//获得鼠标在浏览器内位置
				console.log(e.screenX+":"+e.screenY);//鼠标在显示器内的位置
			}
		</script>
	</head>
	<body>
		<input type="button" value="按钮" onclick="fun(event)" />
		<hr />
		<input type="txt" onkeyup="fun(event)" />
		<hr />
		<div style="background-color: aqua; width: 200px;height: 200px;" onclick="fun(event)">
					
		</div>
	</body>
</html>

内置对象

String字符串

1.属性: length 返回该字符串的长度

2.方法

(1)charAt(n) : 返回索引值为n的字符;

(2)indexOf(char) : 返回指定字符首次出现位置 ;

(3)lastIndexOf(char) : 跟indexOf()一样,只是从后面开始找;

(4)substring(strat,end) : 返回原字符串的子串, 从start开始到end结束;

(5)substr(start,length) : 返回原字符串子串, 从start开始长度为length;

(6)toLowerCase():返回原字符串,所有大写字母全变成小写;

(7)toUppeerCase():返回原字符串子串,所有小写字母变成大写;

(8)split(分隔符字符):返回一个数组，该数组是从字符串对象中分离开来的.

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js_7</title>
		<script type="text/javascript">
			
			var str1 = "asdfghjk";
			//length:返回字符串长度
			console.log(str1.length);//8
			
			//charAt(n):返回索引值为n的字符
			console.log(str1.charAt(4));//g
			
			//indexOf(char) : 返回指定字符首次出现位置 
			console.log(str1.indexOf('d'));//2
			
			//lastIndexOf(char) : 跟indexOf()一样,只是从后面开始找
			console.log(str1.lastIndexOf('k'));//7
			
			//substring(strat,end) : 返回原字符串的子串, 从start开始到end结束;
			console.log(str1.substring(2,5));//dfg
			
			//substr(start,length) : 返回原字符串子串, 从start开始长度为length
			console.log(str1.substr(2,4));//dfgh 
			
			//toLowerCase():返回原字符串,所有大写字母全变成小写
			var str2 = "asqwAFWDafadw"
			console.log(str2.toLowerCase());
			
			//toUppeerCase():返回原字符串子串,所有小写字母变成大写
			console.log(str2.toUpperCase());
			
			//split(分隔符字符):返回一个数组，该数组是从字符串对象中分离开来的，
			//<分隔符字符>决定了分离的地方,它本身不会包含在所返回的数组中。
			var str3 = "adq&dq&JIOkda&qwd";
			console.log(str3.split('&'));//["adq", "dq", "JIOkda", "qwd"]
			
		</script>
	</head>
	<body>
	</body>
</html>

Array数组

创建

创建数组对象,长度不用给定,可以放置任意类型.

数组定义方法1

var <数组名> = new Array();
添加数组元素:<数组名>[下标] = 值;

数组定义方法2:在定义数组时直接初识化数据

var <数组名> = new Array(<元素1>,<元素2>,<元素3>...);
或
var <数组名> = [<元素1>,<元素2>,<元素3>...]

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内置对象_数组</title>
		<script type="text/javascript">
		   var arr = new Array();
		   arr[0]=1;
		   arr[1]="abc";
		   arr[2]=true;
		   console.log(arr);
		   
		   var arr1 = new Array(1,"qwe",true,new Date());
		   console.log(arr1);
		   
		   var arr2 = [1,"qsd",new Date()];
		   for(var i=1;i<arr2.length;i++){
    
    
			   console.log(arr2[i]);
		   }   
		</script>
	</head>
	<body>
	</body>
</html>

使用

1.属性: length 数组的长度,即数组里有多少个元素

2.方法

concat() 用于连接两个或多个数组;
pop() 用于删除并返回数组的最后一个元素;
push() 可向数组的末尾添加一个或多个元素，并返回新的长度;
shift() 用于把数组的第一个元素从其中删除，并返回第一个元素的值;
slice() 可从已有的数组中返回选定的元素,不会改变原数组;

splice() 从数组中添加/删除项目，然后返回被删除的项目,该方法会改变原始数组,splice(index,many(为0不删除),item1,.....,itemX(插入的元素));

join(<分隔符>) ：返回一个字符串，该字符串把数组中的各个元素串起来，用<分隔符>置于元素与元素之间;
reverse() 使数组中的元素顺序反过来;
sort() ：使数组中的元素按照一定的顺序排列。对数字排序需要调用排序函数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js_8</title>
		<script type="text/javascript">
			var arr  = [1,2,3,4,5,"asd","qwe",true,false]
			var arr1 = [4,5,6,7,8]
			//length 求数组长度
			console.log(arr.length);//9
			//concat() 用于连接两个或多个数组;
			console.log(arr.concat(arr1).length);//14
			//pop() 用于删除并返回数组的最后一个元素;
			console.log(arr.pop());//false
			//push() 可向数组的末尾添加一个或多个元素，并返回新的长度。
			console.log(arr.push('a','b','c'));//11
			//shift() 用于把数组的第一个元素从其中删除，并返回第一个元素的值;
			console.log(arr.shift());//1
			//slice(a,b) 可从已有的数组中返回选定的元素,不会改变原数组,a必须,b可选。
			console.log(arr.slice(3,4));//5
			//splice() 从数组中添加/删除项目，然后返回被删除的项目,该方法会改变原始数组;
			console.log(arr.splice(2,5),"插","入","的")
			//join(<分隔符>):返回一个字符串，该字符串把数组中的各个元素串起来，用<分隔符>置于元素与元素之间。
			console.log(arr.join('+'));//2+3+a+b+c
			//reverse() 使数组中的元素顺序反过来;
			console.log(arr1.reverse());//[8, 7, 6, 5, 4]
			//sort() 使数组中的元素按照一定的顺序排列。对数字排序需要调用排序函数。
			var w = ['d','y','n','w','a'];
			console.log(w.sort());//["a", "d", "n", "w", "y"]
			var z = [12,1,43,2,3];
			function sortNum(a,b){
    
    
				return a-b;
			}
			console.log(z.sort(sortNum));//[1, 2, 3, 12, 43]
			
		</script>
	</head>
	<body>
	</body>
</html>

Date

获取日期

new  Date()         返回当日的日期和时间 
getFullYear()       返回四位数字年份
getDate()           返回一个月中的某一天 (1 ~ 31) 
getMonth()          返回月份 (0 ~ 11) 
getDay()            返回一周中的某一天 (0 ~ 6) 
getHours()          返回 Date 对象的小时 (0 ~ 23) 
getMinutes()        返回 Date 对象的分钟 (0 ~ 59)
getSeconds()        返回 Date 对象的秒数 (0 ~ 59))

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js_9</title>
		<script type="text/javascript">
			/*
			new  Date()         返回当日的日期和时间 
			getFullYear()       返回四位数字年份
			getDate()           返回一个月中的某一天 (1 ~ 31) 
			getMonth()          返回月份 (0 ~ 11) 
			getDay()            返回一周中的某一天 (0 ~ 6) 
			getHours()          返回 Date 对象的小时 (0 ~ 23) 
			getMinutes()        返回 Date 对象的分钟 (0 ~ 59)
			getSeconds()        返回 Date 对象的秒数 (0 ~ 59))
			*/
		   var date  =new Date();
		   console.log(date);
		   console.log(date.getFullYear());//2021
		   console.log(date.getDate());//25
		   console.log(date.getMonth());//0
		   console.log(date.getDay());//1
		   console.log(date.getHours());//2
		   console.log(date.getMinutes());//17
		   console.log(date.getSeconds());//28
		</script>
	</head>
	<body>
	</body>
</html>

设置日期

setDate()           设置 Date 对象中月的某一天 (1 ~ 31)) 
setMonth()          设置 Date 对象中月份 (0 ~ 11)) 
setYear()           设置 Date 对象中的年份（两位或四位数字）

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js_10</title>
		<script type="text/javascript">
			var date = new Date();
			// setDate()           设置 Date 对象中月的某一天 (1 ~ 31)) 
			console.log(date.setDate(1));
			// setMonth()          设置 Date 对象中月份 (0 ~ 11)) 
			console.log(date.setMonth(1));
			// setYear()           设置 Date 对象中的年份（两位或四位数字）
			console.log(date.setYear(2021));
		</script>
	</head>
	<body>
	</body>
</html>

Math

Math对象,提供对数据的数学计算

1.属性:PI返回π(3.1415926535…)

2.方法

Math.abs(x)    		绝对值计算；
Math.pow(x,y)  		数的幂；x的y次幂
Math.sqrt(x)   		计算平方根；
Math.ceil(x)   		对一个数进行上舍入
Math.floor(x)       对一个数进行下舍入。
Math.round(x)       把一个数四舍五入为最接近的整数
Math.random()       返回 0 ~ 1 之间的随机数
Math.max(x,y)       返回 x 和 y 中的最大值
Math.min(x,y)       返回 x 和 y 中的最小值

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js_11</title>
		<script type="text/javascript">
			var a = -11;
			var b = 10;
			// Math.abs(x)    		绝对值计算；
			console.log(Math.abs(a));//11
			// Math.pow(x,y)  		数的幂；x的y次幂
			console.log(Math.pow(b,2));//100
			// Math.sqrt(x)   		计算平方根；
			console.log(Math.sqrt(b));//3.1622776601683795
			// Math.ceil(x)   		对一个数进行上舍入
			var x =  30.98123
			console.log(Math.ceil(x));//31
			// Math.floor(x)       对一个数进行下舍入。
			console.log(Math.floor(x));//30
			// Math.round(x)       把一个数四舍五入为最接近的整数
			console.log(Math.round(Math.PI));//3
			// Math.random()       返回 0 ~ 1 之间的随机数
			console.log(Math.random());//0.24310217792555688
			// Math.max(x,y)       返回 x 和 y 中的最大值
			console.log(Math.max(a,b));//10
			// Math.min(x,y)       返回 x 和 y 中的最小值
			console.log(Math.min(b,x));//10
		</script>
	</head>
	<body>
	</body>
</html>