总体内容
1、函数的定义与调用
2、提取行间事件与匿名函数
3、网页换肤
4、变量和函数的域解析
5、函数传参与return关键字
一、函数的定义与调用
- 1.1、函数：就是重复执行的代码片
- 1.2、函数定义与执行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>函数的基础学习</title> <script type="text/javascript"> <!--函数的定义--> 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>
提示：函数定义在
<script type="text/javascript"></script>里面，可以在其他的标签里面设置onclick="函数名()"来点击标签调用函数
- 使用：行间事件
二、提取行间事件与匿名函数
- 2.1、由于在一中我们把函数的调用写在了 标签(行间)里面,这样做不太好，我们可以把行间事件提取出来，如下
<!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、匿名函数
<!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>
提示：匿名函数仅仅是把
2.1中 函数fnChangeDiv名字去掉，直接一步到位oBtn.onclick = function(){},函数没有了名字也就成了匿名函数
- 使用的情况：仅仅是做一件事的时候
三、网页换肤
- 3.1、换肤->仅仅是利用js调用函数更换css,如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网页换肤</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>
四、变量和函数的域解析
- 4.1、JavaScript解析过程分为两个阶段，先是编译阶段，然后执行阶段，在编译阶段会将function定义的函数提前，并且将var定义的变量声明提前，将它赋值为undefined。也就是未定义先使用。
- 4.2、变量的域解析：变量在未定以前如果使用，值会被赋值为
undefined
<script type="text/javascript"> alert(iNum); var iNum = 20; </script>
- 4.3、函数的域解析:在编译阶段会将function定义的函数提前,函数在定义前或者定义后调用都没事
<script type="text/javascript"> changeValue() function changeValue() { alert("hello world!") } </script>
五、函数传参与return关键字
- 5.1、函数传参
- <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>函数传参-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关键字的作用：返回函数执行的结果、结束函数的运行、阻止默认行为
- <1>、求和函数，返回结果
<script type="text/javascript"> function fnAdd(a,b) { return a+b; } alert(fnAdd(3,7)); </script>
- <2>、结束函数的运行
<script type="text/javascript"> function fnAdd(a,b) { return a+b; alert('这里不会再走'); } alert(fnAdd(3,7)); </script>
