javascript学习4
-
函数传参
- 重用代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* *重用代码 * 1.尽量保证html代码结构一致，可以通过父级选取子元素。 * 2.把核心主程序实现，用函数包起来。 * 3.把每组里不同的值找出来，通过传参实现 * */ window.onload=function(){ var oUl=document.getElementById('list'); var aLi=oUl.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++){ fn1(aLi[i]); } function fn1(oLi){ var oBtn=oLi.getElementsByTagName('input'); var oStrong=oLi.getElementsByTagName('strong')[0]; var oEm=oLi.getElementsByTagName('em')[0]; var oSpan=oLi.getElementsByTagName('span')[0]; var n1=Number(oStrong.innerHTML); var n2=parseFloat(oEm.innerHTML); /*减*/ oBtn[0].onclick=function(){ n1--; if(n1<0){ n1=0; } oStrong.innerHTML=n1; oSpan.innerHTML=n1*n2+'元'; } /*加*/ oBtn[1].onclick=function(){ n1++; oStrong.innerHTML=n1; oSpan.innerHTML=n1*n2+'元'; } } } </script> </head> <body> <ul id="list"> <li> <input type="button" value="-"/> <strong>0</strong> <input type="button" value="+"/> 单价:<em>12.5元</em> 合计:<span>0元</span> </li> <li> <input type="button" value="-"/> <strong>0</strong> <input type="button" value="+"/> 单价:<em>10.5元</em> 合计:<span>0元</span> </li> <li> <input type="button" value="-"/> <strong>0</strong> <input type="button" value="+"/> 单价:<em>8.5元</em> 合计:<span>0元</span> </li> <li> <input type="button" value="-"/> <strong>0</strong> <input type="button" value="+"/> 单价:<em>8元</em> 合计:<span>0元</span> </li> <li> <input type="button" value="-"/> <strong>0</strong> <input type="button" value="+"/> 单价:<em>14.5元</em> 合计:<span>0元</span> </li> </ul> </body> </html>
-
js作用域
- 域：空间、范围、区域...
- 作用：读、写
- 浏览器
- "js解析器"
-
<script type="text/javascript"> alert(a); var a=1; function fn1(){alert(2);} </script>
- 1）“找一些东西”:var function 参数
- a=未定义
- 所有的变量，在正式运行代码之前，都提前赋予了一个值:未定义
- fn1=function fn1(){alert(2);}
- 所有的函数，在正式运行代码之前，都是整个函数块
- 统称为:js的预解析
- 遇到重名的：只留下一个
- 变量和函数重名了，就只留下函数
- a=未定义
-
-
- 2）逐行解读代码：
- 表达式：= + - * / % ++ -- ! 参数 ...
- 2）逐行解读代码：
- "js解析器"
表达式可以修改预解析的值
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 alert(a);//function a(){alert(4);} 8 var a=1; 9 alert(a);//1 10 function a(){alert(2);} 11 alert(a);//1 12 var a=3; 13 function a(){alert(4);} 14 alert(a);//3 15 alert(a()); //Uncaught TypeError: a is not a function --- 此时相当于执行的是 3() 因此报错 16 17 /* 18 *预解析的过程 19 * 1.预解析 20 * var function 参数...... 21 * a=function a(){alert(4)} 22 * 2.逐行解决代码 23 * alert(a) ---第7行 从仓库里面取值 function a(){alert(4);} 24 * alert(a) ---第9行 此时仓库里面的值已改为 a=1 25 * function a(){alert(2);} ---第10行 只是一个函数声明 没有进行调用 所以不用管它 26 * ... 27 * 依次往下走 28 * */ 29 </script> 30 </head> 31 <body> 32 </body> 33 </html>
- 全局与局部作用域解析
- script 全局变量、全局函数 ------》 自上而下
- 函数 由里到外
例子
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 var a=1; 8 function fn1(){ 9 alert(a); 10 var a=2; 11 } 12 fn1();//undefined 13 alert(a);//1 14 15 16 /*过程 17 *1）预解析：var function 参数 ... 18 * 读到第7行 a 未定义 （全局变量） 19 * 读到第8行 fn1=function fn1(){alert(a);var a=2;} 20 *2)逐行解读代码 21 * 读到第7行 表达式 a=1 22 * 读到第8 9 10 11行 只是一个函数声明 没有调用 先不管它 23 * 读到第12行 函数调用 24 * （1）预解析 25 * 读到第9行 a 未定义 （局部变量） 26 * （2）逐行解读代码 27 * 读到第10行 表达式 a=2 28 * 函数调用完毕后，垃圾回收机制会把a的值回收 29 * 读到13行 输出的是全局a的值 30 * */ 31 </script> 32 </head> 33 <body> 34 </body> 35 </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> var a=1; function fn1(){ alert(a); a=2; } fn1();//1 alert(a);//2 /*过程 *1）预解析：var function 参数 ... * 读到第7行 a 未定义 （全局变量） * 读到第8行 fn1=function fn1(){alert(a); a=2;} *2)逐行解读代码 * 读到第7行 表达式 a=1 * 读到第8 9 10 11行 只是一个函数声明 没有调用 先不管它 * 读到第12行 函数调用 * （1）预解析 * 没有var function 参数 ... * 那预解析结束 逐行往下读代码 * （2）逐行解读代码 * 读到第9行 在（1）的预解析里面找不到 返回到父预解析1）====》作用域链 此时找到a=1 * 读到第10行 将 1）中的a值修改为2 * 读到13行 输出的是全局a的值 2 * */ </script> </head> <body> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> var a=1; function fn1(a){ alert(a); a=2; } fn1();//undefined alert(a);//1 /*过程 *1）预解析：var function 参数 ... * 读到第7行 a 未定义 （全局变量） * 读到第8行 fn1=function fn1(a){alert(a); a=2;} *2)逐行解读代码 * 读到第7行 表达式 a=1 * 读到第8 9 10 11行 只是一个函数声明 没有调用 先不管它 * 读到第12行 函数调用 * （1）预解析 var function 参数 ... * 解析到了参数a 相当于 var a; 未定义 * （2）逐行解读代码 * 读到第9行 输出a的值为 undefined * 读到第10行 将 (1）中的a值修改为2 * 函数调用完毕后，垃圾回收机制会把a的值回收 * 读到13行 输出的是全局a的值 1 * */ </script> </head> <body> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> var a=1; function fn1(a){ //相当于 var a=1; alert(a); a=2; } fn1(a);//1 alert(a);//1 /*过程 *1）预解析：var function 参数 ... (全局) * 读到第7行 a 未定义 （全局变量） * 读到第8行 fn1=function fn1(a){alert(a); a=2;} 全局函数） *2)逐行解读代码 * 读到第7行 表达式 a=1 * 读到第8 9 10 11行 只是一个函数声明 没有调用 先不管它 * 读到第12行 函数调用 * （1）预解析 var function 参数 ... （局部） * 解析到了参数a 相当于 此时复制了一个同名的局部函数 a 未定义 * （2）逐行解读代码 * 读到第9行 输出a的值为 1 * 读到第10行 将 (1）中的a值修改为2 * 函数调用完毕后，垃圾回收机制会把a的值回收 * 读到13行 输出的是全局a的值 1 * */ </script> </head> <body> </body> </html>
- 想要获取函数内的值
- 方法1
<script type="text/javascript"> var str=''; function fn1(){ var a="hello world"; str=a; } fn1(); alert(str); //hello world </script>
- 方法2
<script type="text/javascript"> function fn2(){ var a="hello world"; fn3(a); } function fn3(b){ alert(b);//hello world } fn2(); </script>
- 方法1
