子曰：“溫故而知新，可以為師矣。”孔子說：“溫習舊知識從而得知新的理解與體會，憑借這一點就可以成為老師了。“ 尤其是咱們搞程序的人，不管是不是全棧工程師，都是集十八般武藝於一身。不過有時候有些知識如果有很久沒用了的話，就會忘記，甚至是忘的你一點都想不起來，尤其是一些基礎的東西。所以我才打算寫個"溫故而知新"的系列博文出來，一來是這些基礎的東西我比較健忘，以后方便自己翻閱；二來是希望可以幫助到一些剛入門的朋友。這個系列記錄的所有知識點都是最最最(重要的事情說三遍)基礎的知識。大部分都是我學習的時候所積累的筆記。
溫故而知新系列都是一些基礎知識，大神可以直接跳過。
v寫在前面
如果十八般武藝都融會貫通，如果什么兵器你都耍得有模有樣，那么這篇博文你大可以跳過了。只是在忘記的時候，可以拿出來溫習溫習。
v基本概念
JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的腳本語言，最早是在HTML（標准通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。
簡單點一句話概括： javascript是基於對象、驅動事件、具有安全性、弱類型的腳本語言。
1.聲明變量關鍵字： var
2.變量的名稱：
- 由數字、字母、下划線、$組成
- 數字不能開頭
- 嚴格區分大小寫
- 不能以關鍵字命名
3.數據類型：
- 基本數據類型
- 數值類型(整形和浮點型)
- 字符串類型
- 布爾類型
- 引用(復合)數據類型
- 函數：function()
- 對象：object()
- 特殊數據類型 undefined
4.檢測數據類型的方法： typeof()
5.運算符優先級： ()>!>算術>關系>&&>||>條件>賦值
6.類型轉換方式：
- parseInt() 是將字符串類型轉換為整型
- parseFloat() 是將字符串類型轉換為浮點型
- NaN 不是一個數字
v函數介紹
1.函數的定義： 函數(又稱為方法)用於對一段為了達到某種目的的代碼進行歸類。
2.函數的生命：
function 函數名([參數1],[參數2],...)
{
//代碼模塊
}
3.定時器： setInterval("函數名",時間毫秒) ps:這個詳細部分在下面
4.系統函數：
- 日期函數
-
getYear():可返回表示年份的兩位或四位的數字
<script type="text/javascript"> var d = new Date() document.write(d.getYear()) </script>
-
getMonth():可返回表示月份的數字
<script type="text/javascript"> var d=new Date() document.write(d.getMonth()) // 月份是從0開始的 </script>
-
getDate():可返回月份的某一天
<script type="text/javascript"> var d = new Date() document.write(d.getDate()) </script>
-
toLocaleString():可根據本地時間把 Date 對象轉換為字符串，並返回結果
<script type="text/javascript"> var d = new Date() document.write(d.toLocaleString()) </script>
-
- Math對象
-
abs():可返回數的絕對值
<script type="text/javascript"> document.write(Math.abs(7.25) + "<br />")//7.5 document.write(Math.abs(-7.25) + "<br />")//7.25 document.write(Math.abs(7.25-10))//2.75 </script>
-
round():可把一個數字舍入為最接近的整數
<script type="text/javascript"> document.write(Math.round(0.60) + "<br />")//1 document.write(Math.round(0.50) + "<br />")//1 document.write(Math.round(0.49) + "<br />")//0 document.write(Math.round(-4.40) + "<br />")//-4 document.write(Math.round(-4.60))//-5 </script>
-
random():可返回介於 0 ~ 1 之間的一個隨機數
<script type="text/javascript"> document.write(Math.random())//輸出隨機小數，如：0.5031703060958534 </script>
-
floor():可對一個數進行下舍入
<script type="text/javascript"> document.write(Math.floor(0.60) + "<br />")//0 document.write(Math.floor(0.40) + "<br />")//0 document.write(Math.floor(5) + "<br />")//5 document.write(Math.floor(5.1) + "<br />")//5 document.write(Math.floor(-5.1) + "<br />")//-6 document.write(Math.floor(-5.9))//-6 </script>
-
ceil():可對一個數進行上舍入
<script type="text/javascript"> document.write(Math.ceil(0.60) + "<br />")//1 document.write(Math.ceil(0.40) + "<br />")//1 document.write(Math.ceil(5) + "<br />")//5 document.write(Math.ceil(5.1) + "<br />")//6 document.write(Math.ceil(-5.1) + "<br />")//-5 document.write(Math.ceil(-5.9))//-5 </script>
-
max():可返回兩個指定的數中帶有較大的值的那個數
<script type="text/javascript"> document.write(Math.max(5,7) + "<br />")//7 document.write(Math.max(-3,5) + "<br />")//5 document.write(Math.max(-3,-5) + "<br />")//-3 document.write(Math.max(7.25,7.30))//7.3 </script>
-
min():可返回指定的數字中帶有最低值的數字，效果與max相似 demo略
-
- 數組函數
-
concat():方法用於連接兩個或多個數組。該方法不會改變現有的數組，而僅僅會返回被連接數組的一個副本
<script type="text/javascript"> var a = [1,2,3]; document.write(a.concat(4,5));//1,2,3,4,5 </script>
-
join():方法用於把數組中的所有元素放入一個字符串。元素是通過指定的分隔符進行分隔的。
<script type="text/javascript"> var arr = new Array(3) arr[0] = "1" arr[1] = "2" arr[2] = "3" document.write(arr.join())//1,2,3 </script>
-
pop():方法用於刪除並返回數組的最后一個元素
<script type="text/javascript"> var arr = new Array(3) arr[0] = "1" arr[1] = "2" arr[2] = "3" document.write(arr)//1,2,3 document.write("<br />") document.write(arr.pop())//3 document.write("<br />") document.write(arr)//1,2 </script>
-
push():可向數組的末尾添加一個或多個元素，並返回新的長度。
<script type="text/javascript"> var arr = new Array(3) arr[0] = "1" arr[1] = "2" arr[2] = "3" document.write(arr + "<br />")//1,2,3 document.write(arr.push("a") + "<br />")//a document.write(arr)//1,2,3,a </script>
-
v瀏覽器對象BOM
1.windows對象：
- Location 地址對象
- history 歷史對象
- document 文檔對象
- event 事件對象
- screen 屏幕對象
- navigator 瀏覽器對象
2.調用方式：
- windows.屬性=" "
- windows.方法();
3.windows對象的三種彈出對話框方法：
4.windows對象的兩種彈出框口的方法：
-
Open()用於打開一個新的瀏覽器窗口或查找一個已命名的窗口
參數 描述 URL 一個可選的字符串，聲明了要在新窗口中顯示的文檔的 URL。如果省略了這個參數，或者它的值是空字符串，那么新窗口就不會顯示任何文檔。 name 一個可選的字符串，該字符串是一個由逗號分隔的特征列表，其中包括數字、字母和下划線，該字符聲明了新窗口的名稱。這個名稱可以用作標記 <a> 和 <form> 的屬性 target 的值。如果該參數指定了一個已經存在的窗口，那么 open() 方法就不再創建一個新窗口，而只是返回對指定窗口的引用。在這種情況下，features 將被忽略。 features 一個可選的字符串，聲明了新窗口要顯示的標准瀏覽器的特征。如果省略該參數，新窗口將具有所有標准特征。在窗口特征這個表格中，我們對該字符串的格式進行了詳細的說明。 replace 一個可選的布爾值。規定了裝載到窗口的 URL 是在窗口的瀏覽歷史中創建一個新條目，還是替換瀏覽歷史中的當前條目。支持下面的值：
- true - URL 替換瀏覽歷史中的當前條目。
- false - URL 在瀏覽歷史中創建新的條目。
- showModalDialog() 彈出模式窗口，這個用法比較
5.windows對象兩種啟動定時器的方法：
- setInterval() 方法可按照指定的周期（以毫秒計）來調用函數或計算表達式。 setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數。
- setTimeout() 方法用於在指定的毫秒數后調用函數或計算表達式。
6.document三個找對象的方法：
- getElementById() 方法可返回對擁有指定 ID 的第一個對象的引用
- getElementsByTagName() 方法可返回帶有指定標簽名的對象的集合。
- getElementsByName() 方法可返回帶有指定名稱的對象的集合。
7.常用js事件：
- onclick事件會在對象被點擊時發生
- onmouseover 鼠標經過事件
- onmouseout 事件會在鼠標指針移出指定的對象時發生。
- onload 事件會在頁面或圖像加載完成后立即發生。
- onfocus 事件在對象獲得焦點時發生。
- onblur 事件會在對象失去焦點時發生。
- onfocus 事件在對象獲得焦點時發生。
- onfocus 事件在對象獲得焦點時發生。
8.瀏覽器對象屬性：
- appName 屬性可返回瀏覽器的名稱。
- appCodeName 屬性是一個只讀字符串，聲明了瀏覽器的代碼名。
- appVersion 屬性可返回瀏覽器的平台和版本信息。該屬性是一個只讀的字符串。
vDOM
DOM主要是需要在實戰中運用，我這里只列出一些DOM的常用屬性
1.DOM屬性：
- childNodes 屬性返回節點的子節點集合，以 NodeList 對象
- documentElement根節點
- document.body主體
- document.body.childNode獲得 body 元素的子節點集合
- nodeName節點名
- attributes 屬性返回指定節點的屬性集合，即 NamedNodeMap
- nodeType節點類型
- nodeValue節點值
v正則表達式
正則表達式我就不一一介紹了，我想這里絕對能滿足你的各種需求。
v其他知識
禁止別人以iframe加載你的頁面
if (window.location != window.parent.location) window.parent.location = window.location;
把瀏覽器當編輯器
data:text/html, <html contenteditable>
v博客總結
關於javascript 入門教程就寫到這里，只是為了希望幫助到一些入門的朋友，或者一些像我這樣健忘的人朋友恢復記憶。
博文部分內容摘自W3C
作 者：請叫我頭頭哥
出 處：http://www.cnblogs.com/toutou/
關於作者：專注於基礎平台的項目開發。如有問題或建議，請多多賜教！
版權聲明：本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接。
特此聲明：所有評論和私信都會在第一時間回復。也歡迎園子的大大們指正錯誤，共同進步。或者直接私信我
聲援博主：如果您覺得文章對您有幫助，可以點擊文章右下角【推薦】一下。您的鼓勵是作者堅持原創和持續寫作的最大動力！