一、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 字符串拼接 分号问题 数据类型 变量类型 作用域》对你有帮助，请点赞、收藏，并留下你的观点哦！
