一、javaScript組成

? ? 1、ECMAScript：解釋器、翻譯 ---------------------------------------------------------幾乎沒有兼容性問題 ? ? 2、DOM：Document Object Model --------操作HTML的能力----document--------有一些兼容性問題 ? ? 3、BOM：Browser Object Model -------------瀏覽器---------------window----------完全不兼容 （各組成部分的兼容性，兼容性問題的由來） 二、下拉+text var 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）字符串和數(shù)字相加，會(huì)把數(shù)字轉(zhuǎn)變成字符串 alert(12+5+'abcd'+'def'); ?------ 15abcdefg （2）程序從左向右執(zhí)行 alert('abcd'+(12+5）+‘def'); ----abcd17def 乘法表： 1*1=1 1*2=2 ?2*2=4 1*3=3 ?2*3=6 ?3*3=9 1*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; } 四、分號(hào)問題 1. window.οnlοad=function(){}; ?//此處是因?yàn)橘x值，所以加分號(hào)，和function無關(guān) 即：元素.事件=function (){}; 2.?if/while循環(huán)/for循環(huán)/function(){} ?不要加分號(hào) 站長工具--壓縮 五、數(shù)據(jù)類型 1. 基本數(shù)據(jù)類型———不可拆分 （1）字符串string （2）數(shù)字number （3）布爾值boolean （4）undefined 2. 混合數(shù)據(jù)類型——object （1）數(shù)組array （2）元素element （3）方法function 六、變量類型 ? ? 1、類型：typeof運(yùn)算符 （1）用法：返回值 （2）常見類型：number（包括NaN）、string、boolean、undefined、object（包括數(shù)組、空對(duì)象null）、function ? ? 2、一個(gè)變量應(yīng)該只存放一種類型的數(shù)據(jù) ? ? 3、value獲取到的是字符串???.alert(oTxt1.value+oTxt2.value); 4、數(shù)據(jù)類型轉(zhuǎn)換 （1）顯式（強(qiáng)制） A、parseInt：可以過濾掉數(shù)字后的非數(shù)字，和小數(shù) ? ? ? ? B、parseFloat：保留小數(shù)，可以帶字母 ? ? ? ? C、Number：保留小數(shù)，但不允許任何非數(shù)字成分，只能轉(zhuǎn)純數(shù)字。 例子：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); ?會(huì)彈出NaN。 ?? B、NaN的意義和檢測(cè) NaN和NaN不相等 NaN屬于數(shù)字類型 ? ?alert(typeof NaN);---->number 文本框相加特別注意處： 一定要把兩個(gè)都不是數(shù)字的情況放在第一個(gè)不是數(shù)字的情況前面：if(isNaN(num1)&&isNaN(num2)){ alert('兩個(gè)都不是數(shù)字'); }else if(isNaN(num1){ alert('第一個(gè)不是數(shù)字'); }else{……} （2）隱式 ? ? ? ? A、==先轉(zhuǎn)換類型，再比較_————alert( 4=='4' ); ?返回true; ===不轉(zhuǎn)類型直接比（既比類型又比值）alert(4==='4');返回false; B、< 、<=、>、>=、*、/、也會(huì)執(zhí)行隱式轉(zhuǎn)換————alert(4<'5');返回true; ? ? var s='5'; ?s=s*'4'; ? alert(s); 隱形轉(zhuǎn)換 ? ? ? ??C、字符串與另一數(shù)字或字符串相減、乘除都會(huì)進(jìn)行隱式轉(zhuǎn)換 ? ? var a="12"; alert(a/2);----6（加號(hào)的作用有字符串連接、數(shù)字相加 ? var a="12.5"; alert(a-0+5);-----17.5） ?D、取余% （3）數(shù)字--->字符串：加引號(hào)：alert("a"+12+5); ? alert(""+12+5); 相關(guān)練習(xí)： 1、比較兩個(gè)數(shù)的大小

?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('輸入數(shù)字'); }else{ // > < 隱性轉(zhuǎn)換 －〉 JS幫你Number(str) if(value1<value2){ alert(value2+'大'); }else if(value1>value2){ alert(value1+'大'); }else{ alert('相等'); }; }; }; 2、判斷一個(gè)數(shù)字是不是整數(shù) var value=aInput[0].value; if(value==parseInt(value)){ alert('整數(shù)'); } 3、簡易網(wǎng)頁計(jì)算器 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); break; }; }; 七、變量作用域和閉包 ? ? 1、變量作用域（作用范圍） （1）局部變量 局部變量只能在定義它的函數(shù)里使用 （2）全局變量 var a=44; function fn(){ alert(a); var b=33; fn2(); }; fn(); function fn2(){ //看函數(shù)的作用域。是看它定義在哪 alert(b); }; ? ? 2、什么是閉包---子函數(shù)可以使用父函數(shù)中的局部變量 function fn(){ var a=444; function fn3(){ alert(a); }; return function(){ alert(a); }; }; var fn2=fn(); //閉包 fn2(); 八、命名規(guī)范 ? ? 1、命名規(guī)范及必要性 （1）可讀性——能看懂 （2）規(guī)范性——符合規(guī)則 ? ? 2、匈牙利命名法 （1）類型前綴 （2）首字母大寫 ? ?3、類型 ??? ? ? ? ? ? ? ? ? ? ? ? ? 前綴 ? ? ? ? ? ? ? ? ?類型 ? ? ? ? ? ? ? ? ? 實(shí)例 數(shù)組 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? a ? ? ? ? ? ? ? ? ? ? Array ? ? ? ? ? ? ? ? ?altems 布爾值 ? ? ? ? ? ? ? ? ? ? ? ? ? ?b ? ? ? ? ? ? ? ? ? ? Boolean ? ? ? ? ? ? blsComplete 浮點(diǎn)數(shù) ? ? ? ? ? ? ? ? ? ? ? ? ? ?f ? ? ? ? ? ? ? ? ? ? ?Float ? ? ? ? ? ? ? ? ? fPrice 函數(shù) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?fn ? ? ? ? ? ? ? ? ? ?Function ? ? ? ? ? ?fnHandler 整數(shù) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?i ? ? ? ? ? ? ? ? ? ? ?Integer ? ? ? ? ? ? ? itemCount 對(duì)象 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?o ? ? ? ? ? ? ? ? ? ? Object ? ? ? ? ? ? ? ?oDiv1 正則表達(dá)式 ? ? ? ? ? ? ? ? ? ? re ? ? ? ? ? ? ? ? ? ?RegExp ? ? ? ? ? ? ? ReEmailCheck 字符串 ? ? ? ? ? ? ? ? ? ? ? ? ? ? s ? ? ? ? ? ? ? ? ? ? String ? ? ? ? ? ? ? ? sUserName 變體變量 ? ? ? ? ? ? ? ? ? ? ? ? v ? ? ? ? ? ? ? ? ? ? Variant ? ? ? ? ? ? ? vAnything 九、運(yùn)算符 ?1、算術(shù)：+加 -減 *乘 /除 %取模 實(shí)例：隔行變色、秒轉(zhuǎn)時(shí)間、可以用-0來將value轉(zhuǎn)成數(shù)字類型 i=i+1 ? ?i+=1 ? ?i++ ? ? ?i=i+3 ? i+=3 ?2、賦值：=、 +=、 -=、 *=、 /=、 %=（小%大=小，隔行變色） ?3、關(guān)系（比較）：<、 >、 <=、 >=、 ==、 ===、 !=、 !==（不全等） ?4、邏輯：&&與、 ||或、 !非 ?5、運(yùn)算符優(yōu)先級(jí)：括號(hào)。另外，！優(yōu)先級(jí)比>高 if(!2>3){ alert(">"); ? ? ?//!優(yōu)先級(jí)高于>，所以先計(jì)算!2是false，再計(jì)算false>3.這里把false轉(zhuǎn)成0，所以false>3是錯(cuò)的false，所以走else中的語句 }else{ alert("<"); ?? } 簡易計(jì)算器： 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('請(qǐng)輸入兩個(gè)數(shù)字'); }else if(isNaN(n1)||isNaN(n2)){ alert('至少一個(gè)輸入的不是數(shù)字，請(qǐng)檢查!'); }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; } } } 計(jì)算任意個(gè)文本框的和： 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)+'個(gè)是錯(cuò)的'); ok=false; } result+=n; } if(ok){ alert('總共是'+result); } } 十、流程控制（判斷） ?1、判斷：if、switch、？: (1) switch(變量){ case 值1: 語句1 break;--------跳出，后面的就不執(zhí)行了 case 值2: 語句2 break; …… default: 語句n } 例子：switch(true) {? case 4>6: alert('星期一'); break; case 7>5: alert('星期二'); break; }; ?(2)?:三目運(yùn)算符---只能執(zhí)行一句話 條件?語句1:語句2; A. ? 10>9?alert(10):alert(9);//正常 B. ? 10>9?var a=10:var a=9; //報(bào)錯(cuò) ?因?yàn)関ar 必須放在行首，正確為： var a=10>9?10:9; (3)條件 && if(10>6){ alert(10); } 簡化 ? ? ?條件 && 條件成立執(zhí)行 即 ?10>6 &&alert(10); ?2、循環(huán)：while、for ?3、跳出：break、continue（只用在循環(huán)和switch里用） break：跳出 continue：跳過本次循環(huán)，后面的繼續(xù)執(zhí)行 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、非零數(shù)字、非空字符串、非空對(duì)象、空格 （2）假：false、數(shù)字零、空字符串、空對(duì)象、undefined、null、NaN 5、參數(shù) function fn(){ alert(arguments.length); } fn(1,2,3); 十一、調(diào)試 ?1. alert(); ?2. document.title ?3. ie-----禁用腳本調(diào)試 ?4. google:console.log(a)?內(nèi)部輸出，調(diào)試，計(jì)算器 ?5. FF：Ctrl+shift+J

?

十二、iNow 1. 簡單的歷史圖庫 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>

總結(jié)

以上是生活随笔為你收集整理的JS一起学03：js组成、下拉+text、字符串拼接、分号问题、数据类型、变量类型、作用域和闭包、命名、运算符、流程判断、调试、iNow、onchang的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。