總體內(nèi)容
1归斤、函數(shù)的定義與調(diào)用
2痊夭、提取行間事件與匿名函數(shù)
3、網(wǎng)頁換膚
4脏里、變量和函數(shù)的域解析
5她我、函數(shù)傳參與return關鍵字
一、函數(shù)的定義與調(diào)用
1.1、函數(shù)：就是重復執(zhí)行的代碼片
-
1.2番舆、函數(shù)定義與執(zhí)行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>函數(shù)的基礎學習</title> <script type="text/javascript"> <!--函數(shù)的定義--> function fnAlter() { alert("測試彈框") } function changeColor() { var oDiv = document.getElementById("div1") oDiv.style.color = 'red' oDiv.style.fontSize = '30px' } </script> </head> <body> <div id="div1" onclick="fnAlter()">這是一個div元素</div> <input type="button" name="" value="改變標簽" onclick="changeColor()"> </body> </html>提示：函數(shù)定義在
<script type="text/javascript"></script>里面酝碳，可以在其他的標簽里面設置onclick="函數(shù)名()"來點擊標簽調(diào)用函數(shù)- 使用：行間事件
二、提取行間事件與匿名函數(shù)
-
2.1恨狈、由于在一中我們把函數(shù)的調(diào)用寫在了 標簽(行間)里面,這樣做不太好疏哗，我們可以把行間事件提取出來，如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>提取行間事件</title> <script type="text/javascript"> window.onload = function () { var oBtn = document.getElementById('button1'); oBtn.onclick = fnChangeDiv; function fnChangeDiv() { var oDiv = document.getElementById('div1'); oDiv.style.color = 'red'; oDiv.style.fontSize = '30px'; } } </script> </head> <body> <div id="div1">這是一個div</div> <input type="button" value="改變標簽" name="" id="button1"> </body> </html> -
2.2禾怠、匿名函數(shù)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>提取行間事件</title> <script type="text/javascript"> window.onload = function () { var oBtn = document.getElementById('button1'); oBtn.onclick = function() { var oDiv = document.getElementById('div1'); oDiv.style.color = 'red'; oDiv.style.fontSize = '30px'; }; } </script> </head> <body> <div id="div1">這是一個div</div> <input type="button" value="改變標簽" name="" id="button1"> </body> </html>提示：匿名函數(shù)僅僅是把
2.1中 函數(shù)fnChangeDiv名字去掉返奉，直接一步到位oBtn.onclick = function(){},函數(shù)沒有了名字也就成了匿名函數(shù)- 使用的情況：僅僅是做一件事的時候
三、網(wǎng)頁換膚
-
3.1吗氏、換膚->僅僅是利用js調(diào)用函數(shù)更換css,如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>網(wǎng)頁換膚</title> <link rel="stylesheet" type="text/css" href="css/main1.css" id="link1"> <script type="text/javascript"> window.onload = function () { var oBtn1 = document.getElementById('button1'); var oBtn2 = document.getElementById('button2'); var oLink = document.getElementById('link1'); oBtn1.onclick = function () { oLink.href = 'css/main1.css'; }; oBtn2.onclick = function () { oLink.href = 'css/main2.css'; }; } </script> </head> <body> <input type="button" value="皮膚1" name="" id="button1"> <input type="button" value="皮膚2" name="" id="button2"> </body> </html>
四芽偏、變量和函數(shù)的域解析
4.1、JavaScript解析過程分為兩個階段弦讽，先是編譯階段污尉，然后執(zhí)行階段，在編譯階段會將function定義的函數(shù)提前往产，并且將var定義的變量聲明提前十厢，將它賦值為undefined。也就是未定義先使用捂齐。
-
4.2蛮放、變量的域解析：變量在未定以前如果使用，值會被賦值為
undefined<script type="text/javascript"> alert(iNum); var iNum = 20; </script> -
4.3奠宜、函數(shù)的域解析:在編譯階段會將function定義的函數(shù)提前,函數(shù)在定義前或者定義后調(diào)用都沒事
<script type="text/javascript"> changeValue() function changeValue() { alert("hello world!") } </script>
五包颁、函數(shù)傳參與return關鍵字
-
5.1、函數(shù)傳參
-
<1>压真、基本的傳值
<script type="text/javascript"> function test(a) { alert(a); } test('hello world!'); </script> -
<2>娩嚼、傳值改變標簽樣式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>函數(shù)傳參-return關鍵字</title> <script type="text/javascript"> window.onload = function () { function fnChangeStyle(mystyle,val) { var oDiv = document.getElementById('div1'); oDiv.style[mystyle] = val; } fnChangeStyle('color','red') } </script> </head> <body> <div id="div1">測試樣式</div> </body> </html>
-
-
5.2、return關鍵字的作用：返回函數(shù)執(zhí)行的結(jié)果滴肿、結(jié)束函數(shù)的運行岳悟、阻止默認行為
-
<1>、求和函數(shù)泼差，返回結(jié)果
<script type="text/javascript"> function fnAdd(a,b) { return a+b; } alert(fnAdd(3,7)); </script> -
<2>贵少、結(jié)束函數(shù)的運行
<script type="text/javascript"> function fnAdd(a,b) { return a+b; alert('這里不會再走'); } alert(fnAdd(3,7)); </script>
-
