JavaScript的函数,事件(常用事件,事件对象),内置对象(字符串,数组,Date,Nath)超超超级详解!!!
文章目录
-
- 函数
-
- 函数的概念
- 定义函数
- 函数调用
- 变量的作用域
- 全局函数
- 事件
-
- 常用事件
- Event对象(事件对象)
- 内置对象
-
- String字符串
- Array数组
-
- 创建
- 使用
- Date
-
- 获取日期
- 设置日期
- Math
函数
函数的概念
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>