[JS]视频总结-第二部分_JavaScript基础
第二部分_JavaScript基础:包括2个视频，学时在1个半小时
<!doctype html> <html> <head> <meta charset="utf-8"> <title>06</title> <script> window.onload=function(){ /* var a='34'; alert(typeof a); var b=17; alert(typeof b); var c=true; alert(typeof c); var d=document; alert(typeof d); alert(typeof e); var f; alert(typeof f); var g=function(){ alert('17'); } alert(typeof g); */ <!-- 显式类型转换 --> var text1=document.getElementById('t1'); var text2=document.getElementById('t2'); var button1=document.getElementById('b1'); button1.onclick=function() { var a=parseInt(text1.value); var b=parseFloat(text2.value); if(isNaN(a)){ alert('第一个数字为非数字，请重新输入！'); }else if(isNaN(b)){ alert('第二个数字为非数字，请重新输入！'); } alert(a+b); } <!-- 隐式类型转换 --> var h=5; var i='5'; alert(h==i);//先转换后比较，true alert(h===i);//严格比较，false var j='17'; var k='5'; alert(j+k);//简单字符串相连，175 alert(j-k);//先转换成数字，12 <!-- 作用域 --> var m;//全局变量 function a(){//父函数 //var l=21;//局部变量 m=17; var n=100; function c(){//子函数-内部函数-闭包 alert(n);//子函数可以使用父函数的局部变量 } c(); } function b(){ //alert(l); alert(m); } <!-- 命名规范 --> } </script> </head> <body> <input type="text" id="t1" /> <input type="text" id="t2" /> <input type="button" value="sum" id="b1" /> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>07</title> <script> window.onload=function() { <!-- 隔行变色 --> var aLi=document.getElementsByTagName("li"); for(var i=0;i<aLi.length;i++) { if(i%2==0) { aLi[i].style.background='red'; }else { aLi[i].style.background='blue'; } } <!-- 换算时间 --> var t=171; alert(parseInt(t/60)+'分'+t%60+'秒'); <!-- 不等等 !==... --> <!-- JSON 数组 存东西 --> var json={a:12, b:5, c:'adb'}; alert(json.a); json.b++; alert(json.b); //1.与数组的差别 var arr=[17, 23, 100]; alert(arr[2]);//下标为数字 alert(json['a']);//下标为字符串 //2.写什么有什么 alert(arr.length); alert(json.length);//没有定义，undefined //2.1循环 //数组有两种循环方式 for(var i=0;i<arr.length;i++){ alert(arr[i]); }//推荐用法，当遇到json时，数组采用下面的方式 for(var i in arr){ alert(arr[i]); } //json能用以下循环 for(var i in json){ alert(json[i]); } <!-- --> } </script> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
