本文介绍了JavaScript中的函数，包括全局函数如parseInt和parseFloat，事件处理如onclick和onchange，以及Event对象的属性。同时，详细讲解了内置对象String、Array、Date的方法和Math对象的常用数学计算方法。
函数:
-
定义一次但却可以调用任意多次的一段完成某种特定功能的js代码。
-
函数中的语句是一个独立的部分，它不会在外部脚本执行时被执行，而只是作为函数的定义而存在。只有调用它时才执行。
-
函数调用指通过函数名来使用这段代码。
-
函数在定义以后可以被重复调用，以此通常将常用的功能写成一个函数。
函数-变量的作用域:
全局变量：在函数外部定义的变量，它在声明后，任何程序段都可用。
局部变量：在函数内部定义的变量，作用范围为函数内部。
全局函数
- parseInt(arg) 把括号内的内容转换成整数之后的值。如果括号内是字符串，则字符串开头的数字部分被转换成整数，如果以字母开头，则返回“NaN”。
- parseFloat(arg) 把括号内的字符串转换成浮点数之后的值，字符串开头的数字部分被转换成浮点数，如果以字母开头，则返回“NaN”。
- typeof (arg)返回arg值的数据类型。
- eval(arg) 可运算某个字符串。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/* //声明函数
function fun(){
console.log("函数的使用");
}
//直接通过函数名来访问调用
fun(); */
var name="sas";//全局变量
// 返回值不需要声明 参数也不需要var来声明
function sum(a,b,c){
var age=20; //局部变量
console.log(a+':'+b+':'+c);
return c;
}
var res=sum(10,20,new Date());
console.log(res);
//全局函数 单个函数 prompt(),alert()
//typeof (arg)返回arg值的数据类型
/* console.log(typeof('20'));
console.log(typeof(true));
console.log(typeof(new Date())); */
/* parseInt(arg)把括号内的内容转换成整数之后的值。如果括号内是字符串，则字符串开头的数字部分被转换成整数，如果以字母开头，则返回“NaN”。
*/
var x=10;
var y='5.5aa';
//console.log(x-y*1); // 数值+字符串数字=数值
console.log(x+parseInt(y));
//console.log(x+parseFloat(y));
/* parseFloat(arg) 把括号内的字符串转换成浮点数之后的值，字符串开头的数字部分被转换成浮点数，如果以字母开头，则返回“NaN”。
*/
//可以运算字符串,把字符串当做js的脚本执行
//var str='alert("aaakaks")';
var s='1+3+x';
console.log(eval(s));
</script>
</head>
<body> <!-- 事件驱动函数 给事件绑定处理函数 -->
<input type="button" value="按钮" onclick="fun()" />
</body>
</html>
事件:
常用的事件:
onclick() 鼠标点击时；
ondblclick 鼠标双击时;
onblur() 标签失去焦点;
onfocus() 标签获得焦点;
onmouseover() 鼠标被移到某标签之上;
onmouseout 鼠标从某标签移开;
onload() 是在网页加载完毕后触发相应的的事件处理程序;
onchange()是指当前标签失去焦点并且标签的内容发生改变时触发事件处理程序。
Onkeydown键盘按下
Onkeyup 键盘抬起
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function fun(){
console.log("函数被执行了");
}
</script>
</head>
<body onload="fun()">
<!--
事件:属于标签的内容,可以给事件绑定处理函数
onclick:鼠标左键点击事件
ondblclick: 鼠标左键双击事件
onfocus:获得鼠标焦点事件,只在获得鼠标焦点的那一刻触发
onblur:标签失去焦点,当鼠标离开时触发
onmouseover:鼠标移入触发
onmouseout:鼠标移出触发
onload:当网页内容加载完毕触发
onchange:当失去鼠标焦点 并且 内容发生改变时触发
onkeydown:键盘按下事件
onkeyup:键盘抬起事件
-->
<!-- 事件驱动函数 给事件绑定处理函数 -->
<input type="button" value="按钮" onclick="fun()" />
<div onclick="fun()">dis</div>
<input type="button" ondblclick="fun()" value="双击" />
<hr >
<input type="text" onfocus="fun()" />
<hr >
<input type="text" onblur="fun()" />
<!-- <div οnmοuseοver="fun()" οnmοuseοut="fun()" style="background-color: aqua;">div</div> -->
<hr >
<input type="text" onchange="fun()" />
<hr >
<input type="text" onkeyup="fun()" />
</body>
</html>
Event对象
Event 对象代表事件的状态，比如键盘按键的键位、鼠标的位置。
type 事件类型
Button 被点击的鼠标键位
altKey 按下altKey返回true
ctrlKey 按下ctrlKey返回true
shiftKey按下shiftKey返回true
keyCode 返回被按下的键位编码
offsetX 当前标签内的鼠标X轴
offsetY 当前标签内的鼠标Y轴
clientX 鼠标在浏览器内部X轴
clientY鼠标在浏览器内部Y轴
screenX 鼠标在显示器内的X轴
screenY鼠标在显示器内的Y轴
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// e 就是事件对象
function fun(e){
console.log(e.button);// 0-左键 1-滚轮 2 -右键
console.log(e); //事件类型
console.log(e.offsetX+":"+e.offsetY); //获得鼠标在标签内的位置
console.log(e.clientX+":"+e.clientY); //获得鼠标在浏览器中的位置
console.log(e.screenX+":"+e.screenY); //获得鼠标在显示器内的坐标
console.log(e.keyCode);
console.log(e.ctrlKey+':'+e.keyCode==true);
}
</script>
</head>
<body >
<!--
当事件发生时,会产生一个事件对象,
事件对象包含事件的相关信息
-->
<input type="button" value="按钮" onclick="fun(event)" />
<input type="button" value="按钮" onmousedown="fun(event)" />
<div style="background-color: aqua;width: 200px; height: 200px;" onclick="fun(event)"></div>
<!--
由浏览器对标签事件进行监听,产生事件对象,调用绑定的事件处理函数
-->
<input type="text" onkeydown="fun(event)" />
</body>
</html>
内置对象
(1)String
属性
length 用法：返回该字符串的长度.
方法
charAt(n)：返回该字符串位于第n位的单个字符.
indexOf(char)：返回指定char首次出现的位置.
lastIndexOf(char) ：跟 indexOf() 相似，不过是从后边开始找.
substring(start,end) ：返回原字符串的子字符串，该字符串是原字符串从start位置到end位置的前一位置的一段.
substr(start,length) ：返回原字符串的子字符串，该字符串是原字符串从start位置开始，长度为length的一段.
toLowerCase() ：返回把原字符串所有大写字母都变成小写的字符串.
toUpperCase() ：返回把原字符串所有小写字母都变成大写的字符串.
split(分隔符字符) ：返回一个数组，该数组是从字符串对象中分离开来的，<分隔符字符>决定了分离的地方，它本身不会包含在所返回的数组中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var s='acsassssswqq'; //new String("as");
console.log(s.length);
console.log(s.substring(0,4));
console.log(s.substr(0,4)); //substr(开始位置,截取的长度)
console.log(s.split(":"));
</script>
</head>
<body>
</body>
</html>
(2)Array数组
数组的定义方法：
var <数组名> = new Array();
这样就定义了一个空数组。以后要添加数组元素，就用：
<组名>[下标] = 值;
如果想在定义数组的时候直接初始化数据，请用：
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]=false;
console.log(arr); */
// var arr=new Array(1,2,true,new Date());
/* var arr=[1,2,true,new Date()];
console.log(arr);
for(i=0;i<arr.length;i++){
console.log(arr[i]);
} */
/*
concat() 用于连接两个或多个数组。arrayObject.concat(arrayX,arrayX,......,arrayX)
pop() 用于删除并返回数组的最后一个元素。
push() 可向数组的末尾添加一个或多个元素，并返回新的长度。
shift() 用于把数组的第一个元素从其中删除，并返回第一个元素的值。
slice() 可从已有的数组中返回选定的元素。arrayObject.slice(start(必须),end(可选)),该方法并不会修改数组
splice() 向/从数组中添加/删除项目，然后返回被删除的项目。该方法会改变原始数组。
splice(index(删除的位置),howmany(数量,为0不删除),item1,.....,itemX(插入的元素))
join(<分隔符>) ：返回一个字符串，该字符串把数组中的各个元素串起来，用<分隔符>置于元素与元素之间。
reverse() 使数组中的元素顺序反过来。如果对数组[1, 2, 3]使用这个方法，它将使数组变成：[3, 2, 1]。sort() ：使数组中的元素按照一定的顺序排列。如果不指定<方法函数>，则按字母顺序排列。
对数字排序需要调用排序函数。
function sortNumber(a,b){
return a - b;
} */
var arr=[1,2,3,4,5,6];
//console.log(arr.shift()); //在原数组上删除并返回第一个元素
//console.log(arr.slice(0,3)); //返回一个新数组,从原数组中复制指定区间,包含开始,不包含结束
//console.log(arr.splice(2,2,11,12,14)); // 向/从数组中添加/删除项目，然后返回被删除的项目。该方法会改变原始数组。
//console.log(arr.join("")); //将数组转为字符串,以指定的符号连接每个元素
//console.log(arr.reverse());
// 数组排序
//var arr=['q','a','w','s'];
var arr=[2,1,12,3];
//将sortnumber函数,传递到sort方法中
arr.sort(sortnumber);
//自定义排序函数
function sortnumber(a,b){
return a-b;
}
console.log(arr);
</script>
</head>
<body>
</body>
</html>
(3)日期
- 获取日期
new Date() 返回当日的日期和时间
getFullYear() 返回四位数字年份
getDate() 返回一个月中的某一天 (1 ~ 31)
getMonth() 返回月份 (0 ~ 11)
getDay() 返回一周中的某一天 (0 ~ 6)
getHours() 返回 Date 对象的小时 (0 ~ 23)
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)
getSeconds() 返回 Date 对象的秒数 (0 ~ 59))
-
设定日期
setDate() 设置 Date 对象中月的某一天 (1 ~ 31))
setMonth() 设置 Date 对象中月份 (0 ~ 11))
setYear() 设置 Date 对象中的年份（两位或四位数字）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var date=new Date();
console.log(date.getFullYear()); //返回四位数字年份
console.log(date.getDate()); //返回一个月中的某一天 (1 ~ 31)
console.log(date.getMonth()); //返回月份 (0 ~ 11)
console.log(date.getDay()); //返回一周中的某一天 (0 ~ 6)
console.log(date.getHours()); //返回 Date 对象的小时 (0 ~ 23)
console.log(date.getMinutes()); //返回 Date 对象的分钟 (0 ~ 59)
console.log(date.getSeconds()); // 返回 Date 对象的秒数 (0 ~ 59))
</script>
</head>
<body>
</body>
</html>
(4)Math
- Math 对象，提供对数据的数学计算。
属性
PI 返回π（3.1415926535…)。
- 方法
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></title>
<script type="text/javascript">
/* PI 返回π（3.1415926535...)。
方法
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 中的最小值 */
var s=12;
console.log(Math.PI);
console.log(Math.abs(s));
console.log(Math.ceil(s));
console.log(Math.floor(s));
console.log(Math.round(s));
console.log(Math.random());
console.log(Math.max(s,2));
console.log(Math.min(1,s));
</script>
</head>
<body>
</body>
</html>
扫一扫
917
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
