<html>
<head>
<script type="text/javascript">
var count=0
function Change(){
count++
if(count>18){
count=1
}
i = document.getElementById("image")
j = document.getElementById("txt")
j.value="当前照片第"+count+"张"
if(count<10){
i.src="../../image/00"+count+".jpg"
}else{
i.src="../../image/0"+count+".jpg"
}
}
</script>
</head>
<body onload="Change()">
<p>点击图片，切换到下一张，最后一张的下一张是第一张</p>
<p><input id="txt" type="text" /></p>
<div>
<img id="image" name="image" src="" onclick="Change()" />
</div>
</body>
</html>
函数和变量的有效范围就是作用域
1、作用域的概念
这是因为js中存在作用域的概念。
作用域：
作用域就是指定一个变量或者一个函数的作用范围。
能在页面的任何位置都可以访问，称为 全局作用域
只能在局部（函数内）访问，称为为 局部作用域
上述代码中，a是全局变量，b是局部变量
ES5中只有函数才有作用域，所谓是局部作用域也可以叫函数作用域。
作用域的作用就是为了把数据进行保护，不让外部的数据对我们的数据进行污染
以下①②③④打印什么？
但是结果却大出所料，这里得到的结果是undefined。
③处的结果也和我们最初的认识是不一样的，结果为f对应的函数对象。
造成这个结果是因为变量和函数的作用域提升的原因，什么意思呢？
JS是解释性语言，JS引擎对代码的处理分为两步：
4、作用域链和访问规则
在JavaScript里面，函数内部是可以包含另一个函数的
此时函数b就被函数a包含越来了，这样就形成了两层作用域。
如果有以下代码：三个同名变量放在三个作用域内
会依次输出：10，20，30
虽然多个变量x同名，但是不同作用域内优先使用自己内部作用域的变量x。
如果代码做一下修改：删除函数b的局部变量x
依次输出：10，20，20
函数b内部没有变量b，会向自己的外面的作用域查找x变量，函数a内的x变量离函数b最近，会优先得到函数a的变量x
代码再做修改：再删除a的局部变量x
会依次输出：10，10，10
函数b内部没有x变量，会向函数a的作用域查找，但是函数a内部也没有x变量，会向函数a的上一层作用域再查找，直到查找到了全局作用域。
代码再次变化：全局的变量x也删除
函数b内部没有变量x，会顺着上层作用域一层一层地查找，直到全局作用域也没有，就会报错。
总结：
