JS函数传参、作用域
一、函数传参
参数=JS数据类型(数字、字符串、布尔、函数、对象、未定义)
fn1(100); function fn1(a){ alert(a); //100 }
应用:
重写代码:
1.尽量保证HTML代码一致,可以通过父级选取元素
2.把核心朱程序实现,用函数包起来
3.把每组不通知找出来,通过传参实现
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> ul { padding:0; margin:0; } li { list-style:none; } body { background:#333; } .box { width:400px; height:500px; position:relative; background:url(img/loader_ico.gif) no-repeat center #fff; float:left; margin-right:60px; } .box img { width:400px; height:500px; } .box ul { width:40px; position:absolute; top:0; right:-50px; } .box li { width:40px; height:40px; margin-bottom:4px; background:#666; } .box .active { background:#FC3; } .box span { top:0; } .box p { bottom:0; margin:0; } .box p,.box span { position:absolute; left:0; width:400px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; } </style> <script> window.onload = function (){ fnTab( 'pic1', [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ], [ '小宠物', '图片二', '图片三', '面具' ], 'onclick' ); fnTab( 'pic2', [ 'img/2.png', 'img/3.png', 'img/4.png' ], [ '图片二', '图片三', '面具' ], 'onmouseover' ); }; function fnTab( id, arrUrl, arrText, evt ){ var oDiv = document.getElementById(id); var oImg = oDiv.getElementsByTagName('img')[0]; var oSpan = oDiv.getElementsByTagName('span')[0]; var oP = oDiv.getElementsByTagName('p')[0]; var oUl = oDiv.getElementsByTagName('ul')[0]; var aLi = oUl.getElementsByTagName('li'); var num = 0; for( var i=0; i<arrUrl.length; i++ ){ oUl.innerHTML += '<li></li>'; } // 初始化 function fnTab(){ oImg.src = arrUrl[num]; oSpan.innerHTML = 1+num+' / '+arrUrl.length; oP.innerHTML = arrText[num]; for( var i=0; i<aLi.length; i++ ){ aLi[i].className = ''; } aLi[num].className = 'active'; } fnTab(); for( var i=0; i<aLi.length; i++ ){ aLi[i].index = i; // 索引值 aLi[i][evt] = function (){ num = this.index; fnTab(); }; } } </script> </head> <body> <div id="pic1" class="box"> <img src="" /> <span>数量正在加载中……</span> <p>文字说明正在加载中……</p> <ul></ul> </div> <div id="pic2" class="box"> <img src="" /> <span>数量正在加载中……</span> <p>文字说明正在加载中……</p> <ul></ul> </div> </body> </html>
二、作用域
1.作用域:在空间范围内可以进行读写
2.浏览器:
1)“找一些东西”:var function 参数
所有变量在运行代码之前都提前赋了一个值:未定义;所有函数在运行代码之前都是一个全整的代码块
预解析:遇到重名的只保留一个、变量和函数重名只保留函数。
2)逐行读取代码