一、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）字符串和數字相加，會把數字轉變成字符串 alert(12+5+'abcd'+'def'); ?------ 15abcdefg （2）程序從左向右執行 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; } 四、分號問題 1. window.οnlοad=function(){}; ?//此處是因為賦值，所以加分號，和function無關 即：元素.事件=function (){}; 2.?if/while循環/for循環/function(){} ?不要加分號 站長工具--壓縮 五、數據類型 1. 基本數據類型———不可拆分 （1）字符串string （2）數字number （3）布爾值boolean （4）undefined 2. 混合數據類型——object （1）數組array （2）元素element （3）方法function 六、變量類型 ? ? 1、類型：typeof運算符 （1）用法：返回值 （2）常見類型：number（包括NaN）、string、boolean、undefined、object（包括數組、空對象null）、function ? ? 2、一個變量應該只存放一種類型的數據 ? ? 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); break; }; }; 七、變量作用域和閉包 ? ? 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 ? ? ? ? ? ? ? ? ? ? ?Float ? ? ? ? ? ? ? ? ? fPrice 函數 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?fn ? ? ? ? ? ? ? ? ? ?Function ? ? ? ? ? ?fnHandler 整數 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?i ? ? ? ? ? ? ? ? ? ? ?Integer ? ? ? ? ? ? ? itemCount 對象 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?o ? ? ? ? ? ? ? ? ? ? Object ? ? ? ? ? ? ? ?oDiv1 正則表達式 ? ? ? ? ? ? ? ? ? ? re ? ? ? ? ? ? ? ? ? ?RegExp ? ? ? ? ? ? ? ReEmailCheck 字符串 ? ? ? ? ? ? ? ? ? ? ? ? ? ? s ? ? ? ? ? ? ? ? ? ? String ? ? ? ? ? ? ? ? sUserName 變體變量 ? ? ? ? ? ? ? ? ? ? ? ? v ? ? ? ? ? ? ? ? ? ? Variant ? ? ? ? ? ? ? vAnything 九、運算符 ?1、算術：+加 -減 *乘 /除 %取模 實例：隔行變色、秒轉時間、可以用-0來將value轉成數字類型 i=i+1 ? ?i+=1 ? ?i++ ? ? ?i=i+3 ? i+=3 ?2、賦值：=、 +=、 -=、 *=、 /=、 %=（小%大=小，隔行變色） ?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、for ?3、跳出：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、NaN 5、參數 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

?

十二、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>

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。