JavaScript函数(function)
概念
就是重复执行的代码块，或是说事件驱动重复执行的代码块。
语法结构：function 函数的名称(){函数体}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数的概念</title>
<script type="text/javascript">
//语法结构：function 函数的名称(){函数体}
// 实现btn函数
function btn(){
alert('你触发了点击事件，调用了click函数');
}
</script>
</head>
<body>
<button onclick="btn()">点击一下呦</button>
<button onclick="btn()">还可以点击哦</button>
</body>
</html>
定义
（1）匿名函数：就是没有名字的函数。
由事件驱动onload执行重复的代码块。
（2）具备名称的函数
函数的调用：1.事件驱动的方式进行调用 2.自己调用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>匿名函数</title>
<script type="text/javascript">
// 匿名函数: 顾名思义就是没有名字的函数
// 由事件驱动onload 执行重复的代码块(匿名的函数)
// window.onload=function(){
// alert('加载事件驱动了匿名函数');
// }
// //函数之中嵌套函数
// //匿名函数的定义
// var myFunction=function(){
// alert('你调用了一个匿名的函数');
// }
// myFunction();//因为不能将函数当做一个值输出,只有这种形式才可以调用函数.从而执行函数体
//(2)具备名称的函数
function myFunction(){
document.write('这是一个有名称的函数:myFunction()');
}
myFunction(); //自己调用
//函数的调用:
// (1)事件驱动的方式进行调用函数;
// (2)自己调用
</script>
</head>
<body>
</body>
</html>
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>案例</title>
<script type="text/javascript">
// 自己调用
function speak(){
alert('深情地朗读');
}
speak();
</script>
</head>
<body>
<div onclick="speak()">朗读者</div>
<button id="btn">点击一下</button>
<script type="text/javascript">
var btn1=document.getElementById('btn');
btn1.onclick=btn; //直接调用函数的名称就行,不需要添加括号
function btn(){ //创建了一个触发点击事件后要执行的行为(函数)
alert('点击按钮调用了有名称的函数');
}
</script>
</body>
</html>
带有参数的函数以及调用的方式
定义一个带有参数的函数
function 函数名称(参数1,参数2…){函数体}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>带有参数的函数</title>
<script type="text/javascript">
//1,定义一个带有参数的函数
// function 函数名称(参数1,参数2....){函数体}
function lay(a){ //形参：定义函数的参数
document.write(a);
}
// lay(1007); //实参：调用函数的参数
// 多个参数
function test1(a,b){
document.write(a+b);
}
// test1(2,7); //结果为9
//test1('2','7'); //结果为25（字符串）
//用户手动输入两个数字,判断两个数字的大小,如果a>b,则
// 返回1,否则返回-1,相等返回0 使用函数解决问题
var mess1=prompt('请输入第一个数:');
var mess2=prompt('请输入第二个数:');
var num1=parseFloat(mess1);
var num2=parseFloat(mess2);
// if方法：
// if(num1>num2){
// document.write(1);
// }else if(num1<num2){
// document.write(-1);
// }else{
// document.write(0);
// }
// 函数方法:
function compare(num1,num2){
if(num1>num2){
document.write(1);
}else if(num1<num2){
document.write(-1);
}else{
document.write(0);
}
}
compare(num1,num2);
</script>
</head>
<body>
</body>
</html>
带有返回值的函数以及调用方式
关键字：return
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>带有返回值的函数以及调用</title>
<script type="text/javascript">
// 关键字：return
// var x=3,y=34;
// function lay(a,b){ //形参
// return a+b;
// }
// var sum=lay(x,y); //实参
// document.write(sum);
// 如果不转换成数字类型的话，出现的结果为字符串类型，以下就为转换成数字类型
var x=prompt('请输入第一个数');
var y=prompt('请输入第二个数');
var num1=(parseFloat(x));
var num2=(parseFloat(y));
function lay(a,b){
return a+b;
}
var num=lay(num1,num2)
document.write(num);
</script>
</head>
<body>
</body>
</html>
全局变量
在整个程序中,所有的函数都可以访问到的变量,或者是写在对象底下的变量。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全局变量</title>
<script type="text/javascript">
//全局变量: 在整个程序中,所有的函数都可以访问到的变量,或者是写在对象底下的变量
window.onload=function(){
var name='张三';
var age=34;
var sex='男';
var job='软件开发';
var salary=4000;
// function message(name2){
// document.write('我是第一个函数调用变量name为'+name2);
// }
// message(name);
// 以下为无参数
function myTest1(){
document.write('我是第一个函数调用变量name为'+name);
}
myTest1();
}
</script>
</head>
<body>
</body>
</html>
局部变量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>局部变量</title>
<script type="text/javascript">
window.onload=function(){
var num1; //也可将局部变量转换为全局变量
function test1(){
//var num1=20;
//转换为全局变量:去掉var关键字
//num1=20;
num1=20;
}
function test2(){
document.write('使用test2访问test1中的变量num1='+num1);
}
test1();
test2(); //在调用test2函数的时候,访问test1中的变量num1无效,原因是num1作用于test1函数
//在一个函数体中如何将一个局部变量转换为全局变量?
//注: 只需要将这个函数体中的定义变脸搞得关键字var 去掉
}
</script>
</head>
<body>
</body>
</html>
3540
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
