一、javaScript组成
1、ECMAScript:解释器、翻译 ---------------------------------------------------------几乎没有兼容性问题2、DOM:Document Object Model --------操作HTML的能力----document--------有一些兼容性问题3、BOM:Browser Object Model -------------浏览器---------------window----------完全不兼容 (各组成部分的兼容性,兼容性问题的由来)二、下拉+textvar oSel=document.getElementById('sel'); var oBtn=document.getElementById('btn'); var oTxt=document.getElementById('txt'); var oDiv=document.getElementById('div1'); oBtn.οnclick=function(){function setStyle(name,value){
oDiv.style[name]=value;} setStyle(oSel.value,oTxt.value); }三、字符串拼接alert('abc'+12+5+'def'); ------abcd125def (1)字符串和数字相加,会把数字转变成字符串 alert(12+5+'abcd'+'def'); ------ 15abcdefg (2)程序从左向右执行alert('abcd'+(12+5)+‘def'); ----abcd17def 乘法表:1*1=11*2=2 2*2=41*3=3 2*3=6 3*3=91*4=4 2*4=8 3*4=12 4*4=16 var oUl=document.getElementById('ul1'); for(var i=0; i<9; i++){ //i代表第几行 var s='<li>'; for(var j=0; j<i+1; j++){ s+='<span>'+(j+1)+'*'+(i+1)+'='+(j+1)(i+1)+</span>'; } s+='</li>'; oUl.innerHTML+=s; }四、分号问题1. window.οnlοad=function(){}; //此处是因为赋值,所以加分号,和function无关 即:元素.事件=function (){};2.if/while循环/for循环/function(){} 不要加分号站长工具--压缩五、数据类型1. 基本数据类型———不可拆分(1)字符串string (2)数字number (3)布尔值boolean (4)undefined2. 混合数据类型——object(1)数组array (2)元素element (3)方法function六、变量类型1、类型:typeof运算符(1)用法:返回值 (2)常见类型:number(包括NaN)、string、boolean、undefined、object(包括数组、空对象null)、function2、一个变量应该只存放一种类型的数据3、value获取到的是字符串.alert(oTxt1.value+oTxt2.value);4、数据类型转换(1)显式(强制)A、parseInt:可以过滤掉数字后的非数字,和小数B、parseFloat:保留小数,可以带字母C、Number:保留小数,但不允许任何非数字成分,只能转纯数字。 例子:var s='12ebfm45'— parseFloat— '12' var s='12ebfm45'— Number— NaN var s='12451.11'— Number — 12451.11 var s='12px'; s=Number(s); alert(typeof s); 会弹出NaN。 B、NaN的意义和检测 NaN和NaN不相等NaN属于数字类型 alert(typeof NaN);---->number文本框相加特别注意处:一定要把两个都不是数字的情况放在第一个不是数字的情况前面:if(isNaN(num1)&&isNaN(num2)){ alert('两个都不是数字'); }else if(isNaN(num1){ alert('第一个不是数字'); }else{……}(2)隐式A、==先转换类型,再比较_————alert( 4=='4' ); 返回true; ===不转类型直接比(既比类型又比值)alert(4==='4');返回false; B、< 、<=、>、>=、*、/、也会执行隐式转换————alert(4<'5');返回true; var s='5'; s=s*'4'; alert(s); 隐形转换C、字符串与另一数字或字符串相减、乘除都会进行隐式转换 var a="12"; alert(a/2);----6(加号的作用有字符串连接、数字相加 var a="12.5"; alert(a-0+5);-----17.5) D、取余%(3)数字--->字符串:加引号:alert("a"+12+5); alert(""+12+5);相关练习:1、比较两个数的大小
var aInput=document.getElementsByTagName('input');
aInput[2].οnclick=function(){
var value1=Number(aInput[0].value);
var value2=Number(aInput[1].value);
if( isNaN(value1)||isNaN(value2)||aInput[0].value==''|| aInput[1].value==''||value1==' '|| value2==' '){
alert('输入数字');
}else{
// > < 隐性转换 -〉 JS帮你Number(str)
if(value1<value2){alert(value2+'大');}else if(value1>value2){alert(value1+'大');}else{alert('相等');};
};};2、判断一个数字是不是整数var value=aInput[0].value; if(value==parseInt(value)){ alert('整数'); }3、简易网页计算器var aInput=document.getElementsByTagName('input'); var oSe=document.getElementById('se'); aInput[2].οnclick=function(){ var value1=Number(aInput[0].value); var value2=Number(aInput[1].value); switch(oSe.value){ case '+': alert(value1+value2); break; case '-': alert(value1-value2); break; case '*': alert(value1*value2); break; case '/': alert(value1/value2);
}; };七、变量作用域和闭包1、变量作用域(作用范围)(1)局部变量 局部变量只能在定义它的函数里使用 (2)全局变量 var a=44; function fn(){ alert(a); var b=33; fn2(); }; fn(); function fn2(){ //看函数的作用域。是看它定义在哪 alert(b); };2、什么是闭包---子函数可以使用父函数中的局部变量 function fn(){ var a=444; function fn3(){ alert(a); }; return function(){ alert(a); }; }; var fn2=fn(); //闭包 fn2();八、命名规范1、命名规范及必要性(1)可读性——能看懂 (2)规范性——符合规则2、匈牙利命名法(1)类型前缀 (2)首字母大写3、类型前缀 类型实例 数组a Array altems 布尔值 b Boolean blsComplete 浮点数 f FloatfPrice 函数fnFunctionfnHandler 整数i Integer itemCount 对象o Object oDiv1 正则表达式 reRegExp ReEmailCheck 字符串s String sUserName 变体变量 v Variant vAnything九、运算符1、算术:+加 -减 *乘 /除 %取模 实例:隔行变色、秒转时间、可以用-0来将value转成数字类型 i=i+1 i+=1 i++ i=i+3 i+=32、赋值:=、 +=、 -=、 *=、 /=、 %=(小%大=小,隔行变色)3、关系(比较):<、 >、 <=、 >=、 ==、 ===、 !=、 !==(不全等)4、逻辑:&&与、 ||或、 !非5、运算符优先级:括号。另外,!优先级比>高 if(!2>3){ alert(">"); //!优先级高于>,所以先计算!2是false,再计算false>3.这里把false转成0,所以false>3是错的false,所以走else中的语句 }else{ alert("<"); }简易计算器:var aInput=document.getElementsByTagName('input'); var num1=aInput[0]; var num2=aInput[1]; var oSe=document.getElementsByTagName('select')[0]; var oBtn=aInput[2]; oBtn.οnclick=function(){ var O=oSe.value; var n1=num1.value; var n2=num2.value; if(n1==''||n2==''){ alert('请输入两个数字'); }else if(isNaN(n1)||isNaN(n2)){ alert('至少一个输入的不是数字,请检查!'); }else{ switch(O){ case "+": alert(Number(n1)+Number(n2)); break; case "-": alert(Number(n1)-Number(n2)); break; case "*": alert(Number(n1)*Number(n2)); break; case "/": alert(Number(n1)/Number(n2)); break; } } } 计算任意个文本框的和: var aT=document.getElementsByTagName('input'); var oBtn=document.getElementById('btn1'); oBtn.οnclick=function(){ var result=0; var ok=true; for(var i=0; i<aT.length; i++){ var n=parseInt(aT[i].value); if(isNaN(n)){ alert('第'+(i+1)+'个是错的'); ok=false; } result+=n; } if(ok){ alert('总共是'+result); } }十、流程控制(判断)1、判断:if、switch、?:(1) switch(变量){ case 值1: 语句1 break;--------跳出,后面的就不执行了case 值2: 语句2 break; …… default: 语句n }例子:switch(true) { case 4>6: alert('星期一'); break; case 7>5: alert('星期二'); break; };(2)?:三目运算符---只能执行一句话条件?语句1:语句2; A. 10>9?alert(10):alert(9);//正常 B. 10>9?var a=10:var a=9; //报错 因为var 必须放在行首,正确为: var a=10>9?10:9; (3)条件 && if(10>6){ alert(10); } 简化 条件 && 条件成立执行 即 10>6 &&alert(10);2、循环:while、for3、跳出:break、continue(只用在循环和switch里用)break:跳出 continue:跳过本次循环,后面的继续执行 function show(){ for(var i=0;i<5;i++){ if(i!=3){ alert(i); }else{break;} } } show(); function show(){ for(var i=0;i<5;i++){ if(i==3){continue;} alert(i); } } show();4、什么是真、什么是假(1)真:true、非零数字、非空字符串、非空对象、空格 (2)假:false、数字零、空字符串、空对象、undefined、null、NaN5、参数function fn(){ alert(arguments.length); } fn(1,2,3);十一、调试1. alert(); 2. document.title 3. ie-----禁用脚本调试 4. google:console.log(a)内部输出,调试,计算器 5. FF:Ctrl+shift+J十二、iNow1. 简单的历史图库window.οnlοad=function(){ var oUl=document.getElementsByTagName('ul'); var aLi=oUl.children; var aBtns=document.getElementsByTagName('input'); var iNow=0; aBtns[0].οnclick=function(){ iNow++; if(iNow==aLi.length)iNow=0; oUl.style.left=-iNow*400+'px'; } aBtn[1].οnclick=function(){ iNow--; if(iNow==-1)iNow=aLi.length-1; oUl.style.left=-iNow.400+'px'; } } <div id="box1"> <ul> <li>1111</li> <li>222</li> <li>333</li> <li>444</li> </ul> </div> <div id="box2"> <input type="button" value="左"> <input type="button" value="右"> </div>break;
JS一起学03:js组成 下拉+text 字符串拼接 分号问题 数据类型 变量类型 作用域和闭包 命名 运算符 流程判断 调试 iNow onchang
如果觉得《JS一起学03:js组成 下拉+text 字符串拼接 分号问题 数据类型 变量类型 作用域》对你有帮助,请点赞、收藏,并留下你的观点哦!