JavaScript中的函数
正文目录
前言
JS中函数的类型与调用
例：网页版计算机
window对象
window对象中的常用函数
例：网页版抽奖
内置对象
附加知识
前言
上一篇文章带大家了解了一下JS的入门语法，那么在步入正题之前，让小阿飞先带大家稍稍复习总结一下JS入门语法的基本知识吧^_^
一，数据类型
* number 数字(整数,小数,NaN,infinity,-infinity)
* string 字符串(' '," ",` `)
* boolean 布尔(!非,!!转换成boolean类型,==无视类型的比较,===严格比较,||,&&)
* array 数组(大小可以改变,数组值元素类型不做限制,读取任意下标的值都不会报错)
* object 对象(可以任意追加属性)
* null 空值
* undefined 未定义(出现情况:声明了但是没有赋值或者是数组中不存在的下标)
* 定义数据统一使用var二，基本语法结构
* if条件结构: if(){}
* for循环: for(var i=0;i<10;i++){}
* while循环: while(){}
* switch分支条件结构: switch(){}三，弹窗
* 询问框 confirm
* 提示框 alert
* 输入框 prompt四，转换成boolean类型都为false的情况
* null,0," ",NaN,undefined,false
以上只是对JS基本语法的一个小小的总结,小阿飞提醒大家:要想理解透彻,还是要好好看看上一篇文章,并且自己运用一下里面的代码来帮助体会
正文内容
JS中函数的类型与调用
*普通函数:
function f1(){//无参数,function即函数,f1为函数名
return "Hello"//返回Hello
};//写函数最好是打上分号,以防报错
f1();//调用普通函数*箭头函数 (普通函数的简写):
var f2=()=>{//直接用var声明,不用写function
console.log("Hello3")//在控制台打印Hello3
};
f2();//调用箭头函数*匿名函数(写出来就要立马调用):
(function (){
console.log("Hello2")
})();//用一个()放匿名函数,再用一个()调用它*带参数的函数:
function f3(a){//不需要指定参数a的类型
if(a){//如果传入的a在识别为boolean类型时被识别为true时返回3
return 3;//函数的返回值可以是任意类型
}
//如果传入的a在识别为boolean类型时被识别为false时返回false
return false;//函数的返回值可以是任意类型
};
//不传参则默认返回未定义undefined,但是undefined转为boolean时也是false
console.log(f3());//返回false
console.log(f3(1));//打印函数的返回结果
console.log(f3(0,2,3,4,5,6));//不会报错,但只识别一个参数恭喜，你已经了解了JS中的常用函数，小阿飞为你总结了一下以上函数的注意点^_^
JS中的函数
一定会有返回 没有写return时返回未定义undefined
可以写自己返回return,返回值可以是任意类型
return可以中断函数的运行
可以带参,不需要指定参数的类型
参数可以任意传,写了参数但调用时不传参则默认返回undefined
此外,函数的调用除了像上面那样直接调用之外,还可以这样调用:
onclick的用法
学完了这几种常用的基本函数,来用它做一个网页版计算机吧@_@ 代码如下：
计算器
第一个值:
第二个值:
结果:
window对象
window就是一个网页,是整个js中最大的对象,例如下面这个网页就是一个window对象
window中：
* screen ：有关客户端的屏幕和显示性能(分辨率)的信息
* history(历史记录)：关客户访问过的URL的信息
* location ：有关当前URL的信息
与history有关的方法
function back(){//后退
history.back();//调用history中的方法
};
function forward(){//前进
history.forward();
};
history.go(-1)//向后走一位
history.go(1)//向前走一位与location有关的方法
点我百度
window对象中的常用函数
基本有: 弹窗：
prompt: 显示可提示用户输入的对话框
alert: 显示带有提示信息和确定按钮的对话框
confirm: 显示一个带有提示信息、确定和取消的对话框
window中的方法调用时可以不写window.,直接写方法名调用,
所以parseInt就是window中的方法
新开窗口window.open()不常用
关闭当前窗口window.close()
设置定普通时器setTimeout()
设置循环定时器setInterval()
清除计时器:clearTimeout清除普通定时器,clearInterval清除循环定时器
这里我们重点讲一下计时器的使用和清除@_@
*设置一个普通计时器
var i=setTimeout(function (){//调用时可以不写window,setTimeout(放了一个匿名函数)
console.log('炸了炸了')
},1000);//1000毫秒,就是1秒后执行()中的函数
clearTimeout(i); //清除普通定时器
*设置一个循环计时器
var a=0;//定义一个变量为0
//设置一个循环计时器
var i=setInterval(function (){//变量var i=是定时器的编号
a++//每输出一'炸了1'次加一
console.log('炸了1')
if(a==5){//不是a=5而是a==5,=是赋值,==是无视类型比较
clearInterval(i)//调用window中清除循环定时器的方法,根据定时器的编号i来清除
}//循环定时器不写清除情况就会一直循环执行下去
},1000);//每隔1秒执行一次打印
// 普通定时器操作同理执行结果如下(看最后一行),数字5代表执行了5次
我们可以使用计时器来做一个网页版抽奖,代码如下:
$
$
$
内置对象
修改html中标签和内容的方法
1, innerHTML : 修改html的标签和文本内容
2, textContent : 只能修改html标签中的文本(text)内容
附加知识
*关于Date
用new Date()可以点出一些里面的方法,常见的有:
new Date().getFullYear()//得到全年,当前年,如2022年
new Date().getHours()//得到小时 0~23
new Date().getDate()//得到当前日期时间 1~31
new Date().getMinutes()//得到分钟 0~59
new Date().getDay()//得到星期几
new Date().getMilliseconds()//得到毫秒
new Date().getMonth()//得到月份(一月至十二月）
new Date().getSeconds()//得到秒 0~59
new Date().getTime//得到时间戳
*关于Math
console.log(Math.sqrt(4)) //返回数的平方根,开根号
console.log(Math.abs(-222))//返回数的绝对值
console.log(Math.max(1,2,3))//判断最大值
console.log(Math.min(1,2,3))//判断最小值
console.log(Math.ceil(1.44))//向上取整:2
console.log(Math.round(1.33))//四舍五入:1
Math.random()//不用填值,在0-1之间随机,一定是小数,小数范围是[0，1)不包含1
console.log(Math.floor(Math.randaom()*10)+1)//floor向下取整,去除小数
Math.randaom()*10,在0-9之间随机+1变成1-10随机