文章目录
函数
函数的概念
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.0005 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.…)
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.83795 // 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. // 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>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/bian-cheng-ji-chu/82722.html