函數(shù)
函數(shù)就是重復執(zhí)行的代碼片。
函數(shù)定義與執(zhí)行
<script type="text/javascript">
? ? // 函數(shù)定義
? ? function aa(){
? ? ? ? alert('hello!');
? ? }
? ? // 函數(shù)執(zhí)行
? ? aa();
</script>
變量與函數(shù)預(yù)解析
JavaScript解析過程分為兩個階段区匣，先是編譯階段，然后執(zhí)行階段，在編譯階段會將function定義的函數(shù)提前焕盟，并且將var定義的變量聲明提前夜畴，將它賦值為undefined。
<script type="text/javascript">? ?
? ? aa();? ? ? // 彈出 hello址貌！
? ? alert(bb);? // 彈出 undefined
? ? function aa(){
? ? ? ? alert('hello!');
? ? }
? ? var bb = 123;
</script>
提取行間事件
在html行間調(diào)用的事件可以提取到j(luò)avascript中調(diào)用铐拐，從而做到結(jié)構(gòu)與行為分離。
<!--行間事件調(diào)用函數(shù)? -->
<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">
匿名函數(shù)
定義的函數(shù)可以不給名稱练对，這個叫做匿名函數(shù)遍蟋，可以將匿名函數(shù)直接賦值給元素綁定的事件來完成匿名函數(shù)的調(diào)用。
<script type="text/javascript">
window.onload = function(){
? ? var oBtn = document.getElementById('btn1');
? ? /*
? ? oBtn.onclick = myalert;
? ? function myalert(){
? ? ? ? alert('ok!');
? ? }
? ? */
? ? // 直接將匿名函數(shù)賦值給綁定的事件
? ? oBtn.onclick = function (){
? ? ? ? alert('ok!');
? ? }
}
</script>
函數(shù)傳參
<script type="text/javascript">
? ? function myalert(a){
? ? ? ? alert(a);
? ? }
? ? myalert(12345);
</script>
函數(shù)'return'關(guān)鍵字
函數(shù)中'return'關(guān)鍵字的作用：
1螟凭、返回函數(shù)執(zhí)行的結(jié)果
2虚青、結(jié)束函數(shù)的運行
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函數(shù)
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js函數(shù)</title>
<script type="text/javascript">
//定義一個函數(shù)
? ? ? 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;//加上括號是直接執(zhí)行? 不加括號是點擊執(zhí)行
? ? ? ? btn02.onclick =skin02;
}
/*定義一個函數(shù)*/
? ? ? 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、變量和函數(shù)預(yù)解析
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>變量和函數(shù)預(yù)解析</title>
<script type="text/javascript">
// alert(a);//undefined
? ? ? var a =123;
myalert();//調(diào)用放前面照常使用
? ? ? function myalert() {
alert('hello');
}
// function add() {
//? ? alert('123456')
// }
// add()
? </script>
</head>
<body>
</body>
</html>
4下隧、匿名函數(shù)
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>匿名函數(shù)</title>
<script type="text/javascript">
window.onload =function(){
var oDiv =document.getElementById('div1');
// oDiv.onclick = myalert();
// function myalert() {
// alert('hello');
// }
? ? ? ? oDiv.onclick =function () {//匿名函數(shù)? 不用起名 直接賦給他
? ? ? ? ? ? alert('hello!')
};
}
</script>
</head>
<body>
<div id="div1">這是一個div元素</div>
</body>
</html>
5奢人、函數(shù)傳參
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函數(shù)傳參</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、函數(shù)return關(guān)鍵字
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函數(shù)return關(guān)鍵字</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;
//匿名函數(shù)
? ? ? ? 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;//可以返回結(jié)果
// return; //結(jié)束函數(shù)的運行 下面函數(shù)不在執(zhí)行? 直接結(jié)束
// alert('計算已經(jīng)完成');? return后面的不會執(zhí)行
? ? ? ? }
}
</script>
</head>
<body>
<input type="text" name="" id="input01">
<input type="text" name="" id="input02">
<input type="button" name="" value="相加" id="btn">
</body>
</html>
