02-初学JavaScript
今天学习JavaScript函数
函数创建方式
1带有函数名的函数(用的也不少 )
2匿名函数（该方式用的比较多）
3借用function类创建函数(极少用)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 函数：封装一段代码，实现特定功能
function m(){//空参
alert('今天下大雪');
}
function m1(c){//带一个函数的参数
alert('但是在我看来这是小雪');
}
function m2(a,b){//空参
alert('严格意义上不是雪');
}
function f(){
return '执行成功'//遇到return函数截止
alert(123)//不会执行
}
//函数的调用
// m(1);//参数不要求匹配（所以js没有重载）
// m1();
alert(f);
</script>
<!--函数可以和事件一起使用-->
<button onmouseenter="m()">按钮事件</button>
事件是对页面内元素操作的行为，任何
<div ondblclick="m()" style="width:100px;height: 100px;background:yellow"></div>
</body>
</html>
函数就是封装一段代码 实现特定功能
与java 不同的是空参不报错
遇到return 截止 以下就不执行
事件：是对页面内元素操作的行为，任何元素都可以触发事件
两个练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function m(){//空参
console.log('m1_1');
console.log('m2'+m2());
console.log('m1_2');
}
function m2(){
console.log('m2_1');
return 2;
}
m();
</script>
</body>
</html>
第一个输出结果应该是
m1_1 m2_1 m2 2 m1_2
第二是函数的递归调用求的是一个数的阶乘
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function m (num) {
if(num ==1){
return 1
}else {
console.log((num * m(num - 1)));
}
};
m(4)
</script>
</body>
</html>
匿名函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
width: 100px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div id="d1">
</div>
<script>
document.getElementById('d1').onmouseenter = function (){
alert(123)
}
// function m(a){
// alert(a)
// }
// var a=m;
// b('你好')
// //匿名函数
// var b=function(a){
// alert(a)
// }
// b('你好');
// //函数对象
// var a=new Function('a','b','var c =a+b;alert(c);');
// a(1,2)
// 函数创建方式
// 1带有函数名的函数(用的也不少 )
// 2匿名函数（该方式用的比较多）
// 3借用function类创建函数(极少用)
</script>
</body>
</html>
也可以在定义时为匿名函数命名： var a = function(){...};
函数自执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<
</head>
<body>
<script>
//匿名函数自执行
(function(a,b){
alert(a+b)
})(5,110)
//函数的声明提升
m1();
function m1(){
alert(123)
}
m2(5,6);
//匿名函数没有声明提升
var m2 = function (a,b){
alert(a+b);
}
</script>
</body>
</html>
函数可以声明提升 但是匿名函数明显不行l
流程控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
d1{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>
</div>
<button id="d1">123</button>
<script>
var a = confirm('是否确认');
alert(a)
if(a==true){
var a= document.getElementById('d1');
a.style.background = 'red'
}else {
alert('你点的是取消');
}
</script>
</body>
</html>
两种提交方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
</div>
<form action="01-js引入方式.html" method="get" id="f">
用户名: <input type="text" name="username">
<input type="button" value="提交" onclick="a()">
</form>
<script>
function a(){
var a = confirm("是否提交")
if(a == true){
document.getElementById('f').submit();
}
}
<form action="01-js引入方式.html" method="get" onsubmit="return a()">
用户名: <input type="text" name="username">
<input type="submit" value="提交" >
</form>
<script>
function a(){
return confirm("是否提交")
}
</script>
</body>
</html>
switch语句改变div背景颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 100px;height: 100px;border: 1px solid red;" id="d1">
</div>
<script>
var a = prompt('请输入1-5')
a = parseInt(a)
switch (a){
case 1:document.getElementById('d1').style.backgroundColor = 'red';break;
case 2:document.getElementById('d1').style.backgroundColor = 'green';break;
case 3:document.getElementById('d1').style.backgroundColor = 'blue';break;
case 4:document.getElementById('d1').style.backgroundColor = 'pink';break;
case 5:document.getElementById('d1').style.backgroundColor = 'black';break;
default:
alert('有错');
break;
}
</script>
</body>
</html>
for语句循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
</div>
<script>
// for(var a = 1; a<10;a++){
// console.log(a);
// }
// var i=1;
// while (i<=10){
// i++;
// console.log(i);
// if (i==2){
// continue
// }
// }
for(var a=1;a<=100;a++){
document.write('<p>这是第'+a+'个</p>')
}
</script>
</body>
</html>
浙公网安备 33010602011771号