第4章函数和变量作用域
一、获取页面元素
1、通过id获取页面元素
var r = document.getElementById();//括号内写ID名
/*--示例--*/
//html
<div id="a"></div>
//js
var r = document.getElementById(a);
r.style.width="200px";
2、通过class获取页面元素
//得到的是一个元素对象集合（数组）
var r = document.getElementByClassName();
/*--示例--*/
//html
<div class="a"></div>
//js
var r = document.getElementByClassName(a);
3、通过标签名获取页面元素
var r = document.getElementByTagName();
/*--示例--*/
//html
<div></div>
//js
var r = document.getElementByClassName(div);
二、函数
1、函数的含义及分类
（1）通过函数可以封闭任意多条语句，而且可以在任何地方、任何时候调用执行，ECMAScript中的函数使用function关键字来声明，后跟一组参数以及函数体。
（2）特点
- 函数中的代码块不会直接执行
- 执行一个函数需要调用函数
（3）优点
- 代码可以实现服用
- 提高工作效率
- 减少代码体积
（4）函数分类
-
系统函数
常用的系统函数：parseInt (“字符串”)、parseFloat(“字符串”)、isNaN()
a、parseInt (“字符串”)，将字符串转换为整型数字
b、parseFloat(“字符串”)，将字符串转换为浮点型数字
c、isNaN()， 用于检查其参数是否是非数字 -
自定义函数
/*--- 有参函数 ---*/
function 函数名(参数1,参数2,...){ //参数就是函数体里用到的变量
JavaScript代码;
}
/*--- 无参函数 ---*/
function 函数名(){
JavaScript代码;
}
/*--- 函数的调用 ---*/
onclick="函数名()"//JS事件中的onclick事件，当鼠标点击某个对象时，执行代码。
2、函数声明和返回值
（1）使用function关键字声明一个函数，在指定一个函数名，叫函数声明。
function 函数名(){
/*JavaScript代码*/
}
（2）调用函数onclick="函数名()"
（3）直接运行函数
//html
<body> onload="函数名()"</body>
//js
window.onload = "函数名()"
（4）函数表达式
使用function关键字声明一个函数，但为给函数命名，最后将匿名函数赋予一个变量，叫表达式。
var function = function(){ ... } ;
（5）返回值—— return
/*返回值的功能：
（1）返回一个值给函数相当于给函数赋值。
（2）终止函数的执行。*/
//函数
function judge(){
if（2>1）{
return 2; //返回值
}else{
return 1;
}
}
//通过函数调用触发
var r = judge();
document.write(r);
3、参数的调用
（1）参数：参数就是函数体中的一个变量，可以使函数变得更加灵活。
（2）形参：创建函数时的参数。
（3）实参：使用函数时的参数。
function 函数名(参数1,参数2,...){
函数体;
}
/*--- 实例 ---*/
function change(a,b){//形参
if(a<b){
document.write(a);
}else{
document.write(b);
}
}
change(2,1)//实参
（4）调用无参函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航栏</title>
<script type="text/javascript">
function a(){
for(var i = 0; i < 5; i++){
document.write("输出内容显示"+"<br>")
}
}
</script>
</head>
<body>
<input type="button" name="btn" value="显示5次，输出内容显示" onclick="a()">
<!-- 单击按钮时调用函数a(),执行函数体中的代码。 -->
</body>
</html>
在网页中显示如下：
（5）调用有参函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航栏</title>
<script type="text/javascript">
function a(count){
for(var i=0;i<count;i++)
{
document.write("输出内容显示"+"<br>");
}
}
</script>
</head>
<body>
<input name="btn" type="button" value="请输入显示“输出内容显示”的次数"
onclick="a(prompt('请输入显示“输出内容显示”的次数：',''))"/>
<!-- 注意：此时使用单引号！ -->
</body>
</html>
在网页中显示如下：
三、变量作用域
1、变量的执行环境
全局变量（script标签内）和局部变量（函数内）。
注意：函数体内不加var关键字定义的变量是全局变量，加var关键字定义的变量是局部变量，作用域仅限于函数内部。
2、实例
/*--- 全局变量 ---*/
var a=3;
function myFunc()
{
a=4;
}
myFunc();
alert(a);
/*--- 局部变量 ---*/
var a=3;
function myFunc()
{
var a=4;
}
myFunc();
alert(a);
注意
- 在函数内部声明（使用了var关键字）的变量（局部变量），在函数外部并不能访问。
- 在函数外部声明的变量（全局变量），在函数内部可以访问。
- 所有变量都存在一个执行环境（作用域）中，这个执行环境决定了变量的生命周期，以及哪一部分代码可以访问其中变量。
/*全局变量和局部变量的实际结合题型*/
var tt = "aa" //全局变量
function test() {
alert(tt);//局部变量的tt，没赋值结果为undefined
var tt = "bb";//局部变量
alert(tt);//局部变量上一行代码赋值，结果为bb
}
test();