函数
函数就是重复执行的代码片。
函数定义与执行
<script type="text/javascript">
// 函数定义
function aa(){
alert('hello!');
}
// 函数执行
aa();
</script>
变量与函数预解析
JavaScript解析过程分为两个阶段，先是编译阶段，然后执行阶段，在编译阶段会将function定义的函数提前，并且将var定义的变量声明提前，将它赋值为undefined。
<script type="text/javascript">
aa(); // 弹出 hello！
alert(bb); // 弹出 undefined
function aa(){
alert('hello!');
}
var bb = 123;
</script>
提取行间事件
在html行间调用的事件可以提取到javascript中调用，从而做到结构与行为分离。
<!--行间事件调用函数 -->
<script type="text/javascript">
function myalert(){
alert('ok!');
}
</script>
......
<input type="button" name="" value="弹出" onclick="myalert()">
<!-- 提取行间事件 -->
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn1');
oBtn.onclick = myalert;
function myalert(){
alert('ok!');
}
}
</script>
......
<input type="button" name="" value="弹出" id="btn1">
匿名函数
定义的函数可以不给名称，这个叫做匿名函数，可以将匿名函数直接赋值给元素绑定的事件来完成匿名函数的调用。
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn1');
/*
oBtn.onclick = myalert;
function myalert(){
alert('ok!');
}
*/
// 直接将匿名函数赋值给绑定的事件
oBtn.onclick = function (){
alert('ok!');
}
}
</script>
函数传参
<script type="text/javascript">
function myalert(a){
alert(a);
}
myalert(12345);
</script>
函数'return'关键字
函数中'return'关键字的作用：
1、返回函数执行的结果
2、结束函数的运行
3、阻止默认行为
<script type="text/javascript">
function add(a,b){
var c = a + b;
return c;
alert('here!');
}
var d = add(3,4);
alert(d); //弹出7
</script>
1、js函数
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js函数</title>
<script type="text/javascript">
//定义一个函数
function aa(){
// console.log('hello!');
alert().log('hello!');
}
// aa()
</script>
</head>
<body>
<input type="button" value="弹框" onclick="aa()">
</body>
</html>
2、js可控制换肤
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js可控制换肤</title>
<link rel="stylesheet" type="text/css" href="css/1.css" id="link1"> 引入外部样式
<script type="text/javascript">
window.onload =function () {
var btn01 =document.getElementById('btn01');
var btn02 =document.getElementById('btn02');
btn01.onclick =skin01;//加上括号是直接执行 不加括号是点击执行
btn02.onclick =skin02;
}
/*定义一个函数*/
function skin01() {
var link1 =document.getElementById('link1');
link1.href ="css/1.css";
}
function skin02() {
var link1 =document.getElementById('link1');
link1.href ="css/2.css";
}
</script>
</head>
<body>
<input type="button" value="皮肤01" id="btn01" >
<input type="button" value="皮肤02" id="btn02">
<div class="box01"></div>
<div class="box02"></div>
</body>
</html>
3、变量和函数预解析
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量和函数预解析</title>
<script type="text/javascript">
// alert(a);//undefined
var a =123;
myalert();//调用放前面照常使用
function myalert() {
alert('hello');
}
// function add() {
// alert('123456')
// }
// add()
</script>
</head>
<body>
</body>
</html>
4、匿名函数
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>匿名函数</title>
<script type="text/javascript">
window.onload =function(){
var oDiv =document.getElementById('div1');
// oDiv.onclick = myalert();
// function myalert() {
// alert('hello');
// }
oDiv.onclick =function () {//匿名函数 不用起名 直接赋给他
alert('hello!')
};
}
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
</body>
</html>
5、函数传参
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数传参</title>
<script type="text/javascript">
window.onload =function(){
var oDiv =document.getElementById('div1');
changeStyle("color","gold");
changeStyle("background","red");
changeStyle("width","300px");
changeStyle("height","300px");
changeStyle("fontSize","30px");
function changeStyle(styl,val){
oDiv.style[styl] = val;
}
}
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
</body>
</html>
6、函数return关键字
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数return关键字</title>
<script type="text/javascript">
window.onload =function(){
var input01 =document.getElementById('input01');
var input02 =document.getElementById('input02');
var btn =document.getElementById('btn');
//写入属性
// input01.value = 10;
// input02.value = 5;
//匿名函数
btn.onclick =function () {
var val01 =input01.value;
var val02 =input02.value;
// alert(val01);
var rs =add(val01,val02);
alert(rs);//1234
}
function add(a,b) {
var c =parseInt(a) +parseInt(b);
return c;//可以返回结果
// return; //结束函数的运行 下面函数不在执行 直接结束
// alert('计算已经完成'); return后面的不会执行
}
}
</script>
</head>
<body>
<input type="text" name="" id="input01">
<input type="text" name="" id="input02">
<input type="button" name="" value="相加" id="btn">
</body>
</html>
网友评论