JavaScript基礎精講
---------------------------------------------------------------------------------------------------------------
[版權申明：本文系作者原創，轉載請註明出處]
文章出處：http://blog.csdn.net/sdksdk0/article/details/51596213
作者：朱培
---------------------------------------------------------------------------------------------------------------
本文主要從javascript簡介開始，分享Js語法、JS函式、BOM程式設計和DOM程式設計的相關知識。
一、JS簡介
1.1 簡介
JavaScript一種直譯式指令碼語言，是一種動態型別、弱型別、基於原型的語言，內建支援型別。它的直譯器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的指令碼語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。
1.2 組成部分
核心（ECMAScript） ：資料型別、語句、宣告等；核心物件
文件物件模型（DOM） ：Document Object Model（XML DOM和HTML DOM）
瀏覽器物件模型（BOM）：BrowserObject Model（核心物件：window、location等）
1.3 編寫方式
直接通過事件呼叫：
onClick="alert('hello');"
內部編寫方式：
<script type="text/javascript" >
alert("hello good mi");
</script>
外部方式：
<script type="text/javascript" src="1.js" ></script>二、JS語法
2.1 基本語法
js的語法很多都與java差不多，但是又有所不同，值得一提的就是java和javascript是完全不同的兩個概念，就像雷鋒和雷鋒塔一樣。下面來看看常用的一些變數和資料型別。
·var 合法的變數名；
變數名不能使用關鍵字。多個變數可以用逗號分隔。
·運算子號與Java中相同
· if（表示式）{}
else{}
· for（初始化；條件；增量或減量）{}
·while（條件）{}
·switch(表示式)
{case 常量值1：JavaScript語句；
case 常量值2：JavaScript語句；
default：JavaScript語句；}
•型別：number/null/boolean/string/object/undefinde
•型別轉換：掌握parseFloat()和parseInt()函式。
•重點定義函式：function 函式名（引數列表）{}
注：也可以沒有引數
呼叫函式：事件名="函式名()"
獲取表單資料：document.表單名.表單元素名.value
示例：
<script type="text/javascript" > var v2="abc";
alert(typeof v2);
var v3=100;
alert(typeof v3); //number型別
var v5=new Date();
alert(typeof v5); //object型別 </script>2.2 資料型別
- 變數、函式、運算子區分大小寫。
- 變數是弱型別的，var a=10;
- 註釋：//和/* */
- 5種原始資料型別：Underfined、Null、Boolean、Number、String
JavaScript中的基本資料型別有數字型、字串型和布林值三種，除了基本資料型別之外，JavaScript還支援物件、陣列、函式、null和undefined資料型別。JavaScript與其他語言一樣，也支援常量與變數，不過JavaScript中的變數是無型別的，即可以儲存任何一種資料型別的資料。
JavaScript中的運算子比較多，可以分為算術運算子、關係運算符、字串運算子、賦值運算子、邏輯運算子、逐位運算子和其他運算子七大類。在使用
JavaScript中的運算子時，要注意不同運算子的優先次序。
三、JS函式
3.1基本函式
形式引數：定義函式時為函式定義的引數，它代表引數的型別和位置。
實際引數：呼叫函式時傳遞給函式的引數值。
呼叫時：把實參的值傳遞給形參。
函式名嚴格區分大小寫。
多個引數用逗號隔開，要呼叫函式時，必須為逗號隔開的每個引數指定型別相容的值。
如果需要返回結果，使用return語句。
書寫格式：
- 方式1
function 函式名（[引數]）{ 函式體 }
有返回值，直接return
- 方式2
var 函式名=function([引數]){ 函式體 }
- 方式3
var 函式名=new function([引數],函式體);
3.2 常用函式方法
- Array是可變長陣列。
- contact();連結多個數組，返回一個新陣列
- join:連結陣列元素，用指定的字元。
- pop,push,棧結構
- valueOf(),返回陣列的原始值
- sort()，按字元排序
3.3 示例
var arr1=["a","b","c"];
alert(arr1.length);
var arr2=new Array(); //無元素
alert(arr2.length);
arr2[0]="a";
alert(arr2.length);
*/
//構建陣列是，給定元素
/*var arr4=new Array("a","b","c");
for(var i=0;i<arr4.length;i++){
alert(arr4[i]);
}
*/
//contact();連結多個數組，返回一個新陣列
/*var arr1=["a","b"];
var arr2=["b","d"];
var arr3=arr1.concat(arr2);
for(var i=0;i<arr3.length;i++){
document.write(arr3[i]+"<br />");
}
*/
//join:連結陣列元素，用指定的字元。
/*var arr1=[2016,6,2];
var result=arr1.join("-");
document.write(result);
*/
//pop、push
//定義了一個比較器
/*function comp(a,b){
return a-b;
}
var arr1=[1,3,100,5,4,9,7];
arr1.sort(comp);
for(var i=0;i<arr1.length;i++){
document.write(arr1[i]+"<br />");
}
*/
/*var v1=" ";
if(v1){
alert("true");
}else{
alert("false");
}
*/
/*var now=new Date();
document.write(now.toLocaleDateString()+"<br />");
document.write(now.getTime());
*/
/*for(var i=0;i<100;i++){
document.write(Math.random());
}
*/
/*var s1="abc"+"ddd";
document.write(s1.bold());
*/
/*var s1="jbjlnxln";
alert(s1.substr(1,3));
alert(s1.substring(2,9));
*/
//var reg1=new RegExp("^\\d+$");
/*var s1="1234";
var s2=s1.match(reg1); //返回s1中符合條件的內容
alert(s2);
var reg1=/^\d+$/;
*/四、BOM基礎
4.1 Bom簡介
- BOM是browser object model的縮寫，簡稱瀏覽器物件模型
- BOM提供了獨立於內容而與瀏覽器視窗進行互動的物件
- 由於BOM主要用於管理視窗與視窗之間的通訊，因此其核心物件是window
- BOM由一系列相關的物件構成，並且每個物件都提供了很多方法與屬性
- BOM缺乏標準，JavaScript語法的標準化組織是ECMA，DOM的標準化組織是W3C
- BOM最初是Netscape瀏覽器標準的一部分
window物件是BOM的頂層(核心)物件，所有物件都是通過它延伸出來的，也可以稱為window的子物件
由於window是頂層物件，因此呼叫它的子物件時可以不顯示的指明window物件。
4.2 示例1：通過點選按鈕有彈窗操作
在demo4.html中
<script type="text/javascript">
/*function chose(){
var rtValue=window.showModalDialog("demo3.html","","dialogHeight:100px,dialogwidth:100px");
document.getElementById("name").value=rtValue;
}*/
function chose(){
window.showModalDialog("demo3.html",window,"dialogHeight:100px,dialogwidth:100px");
}
</script>
<body>
<input type="text" id="name" name="name" value="" />
<input type="button" value="選擇" onclick="chose()" />
</body><script type="text/javascript">
function rtValue(inputObj){
/*var v=inputObj.value;
window.opener.document.getElementById("name").value=v;
window.close();
*/
/*window.returnValue=inputObj.value;
window.close();
*/
var rtValue=inputObj.value;
window.dialogArguments.document.getElementById("name").value=rtValue;
window.close();
}
</script>
<body>
<input type="radio" name="type" value="金牌會員"
onclick="rtValue(this)" />金牌會員<br />
<input type="radio" name="type" value="銅牌會員"
onclick="rtValue(this)"/>銅牌會員<br />
<input type="radio" name="type" value="鑽石會員"
onclick="rtValue(this)"/>鑽石會員<br />
<input type="radio" name="type" value="白金會員"
onclick="rtValue(this)"/>白金會員<br />
</body>4.3 示例2：網頁時間的動態顯示
<script type="text/javascript">
/*function showTime(){
var date=new Date();
document.getElementById("time").innerHTML=date.toLocaleString();
window.setTimeout("showTime()",1000);
}
window.setTimeout("showTime()",1000);
*/
function showTime(){
var date=new Date();
document.getElementById("time").innerHTML=date.toLocaleString();
}
var i1=window.setInterval("showTime()",1000);
function stop(){
window.clearInterval(i1);
}
function start(){
i1= window.setInterval("showTime()",1000);
}
</script>
<body>
當前時間是：<span id="time" ></span>
<input type="button" value="停止" onclick="stop()" />
<input type="button" value="開始" onclick="start()" />
</body>4.4 history物件
即網頁中的下一步，或者返回到上一個網頁的內容。
<script type="text/javascript">
function jump(){
window.location.href="http://www.tianfang1314.cn";
}
</script>
<body>
<a href="javascript:window.history.back()" >返回</a>
<a href=" javascript:window.history.forward()">前進</a>
<input type="button" value="跳轉" onclick="jump()" />五、DOM基礎
5.1 Dom的結構
DOM（Document Object Model）標準是W3C。把文件當做一個樹狀結構
Node:DOM中一切都是節點。
Element:元素節點
Attr:屬性節點
Text:文字節點
document:文件節點
5.2 Node中的常用屬性和方法
示例：網頁中的全選和反選
<script type="text/javascript">
window.onload=function(){
document.getElementById("b1").onclick=function(){
//根據name獲取checkbox物件
//XMLDOM方法
/*var hobbyNodes=document.getElementsByName("hobby");
for(var i=0;i<hobbyNodes.length;i++){
hobbyNodes[i].setAttribute("checked","checked");
}*/
//HTML DOM
var hobbyNodes=document.getElementsByName("hobby");
for(var i=0;i<hobbyNodes.length;i++){
hobbyNodes[i].checked=true;
}
}
document.getElementById("b2").onclick=function(){
var hobbyNodes=document.getElementsByName("hobby");
for(var i=0;i<hobbyNodes.length;i++){
hobbyNodes[i].checked=false;
}
}
document.getElementById("b3").onclick=function(){
var hobbyNodes=document.getElementsByName("hobby");
for(var i=0;i<hobbyNodes.length;i++){
hobbyNodes[i].checked=!hobbyNodes[i].checked;
}
}
document.getElementById("c1").onclick=function(){
var hobbyNodes=document.getElementsByName("hobby");
for(var i=0;i<hobbyNodes.length;i++){
hobbyNodes[i].checked=this.checked;
}
}
}
</script>
<body>
請選擇您的愛好：<br />
<input type="checkbox" id="c1" />全選/全不選<br />
<input type="checkbox" name="hobby" value="fb" checked="checked"/>足球
<input type="checkbox" name="hobby" value="bb" />籃球
<input type="checkbox" name="hobby" value="ppb" />乒乓球
<input type="checkbox" name="hobby" value="ymb" />羽毛球
<br />
<input type="button" id="b1" value="全選" />
<input type="button" id="b2" value="全不選" />
<input type="button" id="b3" value="反選" />
</body>總結：整個javascript的知識比較瑣碎也比較精彩，官方文件其實是我們必不可少的工具，學會檢視文件並正確使用文件是一個開發者必備的技能！想進一步學習的可以關注我的部落格，同時也可以查閱下列推薦的好書：《JavaScript權威指南》、《JavaScript DOM程式設計藝術》、《鋒利的JQuery》、《深入淺出Node.js》。