javascript 基礎教程[溫故而知新一]

子曰:「溫故而知新,能夠爲師矣。」孔子說:「溫習舊知識從而得知新的理解與體會,憑藉這一點就能夠成爲老師了。「 尤爲是我們搞程序的人,不論是不是全棧工程師,都是集十八般武藝於一身。不過有時候有些知識若是有好久沒用了的話,就會忘記,甚至是忘的你一點都想不起來,尤爲是一些基礎的東西。因此我纔打算寫個"溫故而知新"的系列博文出來,一來是這些基礎的東西我比較健忘,之後方便本身翻閱;二來是但願能夠幫助到一些剛入門的朋友。這個系列記錄的全部知識點都是最最最(重要的事情說三遍)基礎的知識。大部分都是我學習的時候所積累的筆記。javascript

溫故而知新系列都是一些基礎知識,大神能夠直接跳過。html

v寫在前面

若是十八般武藝都融會貫通,若是什麼兵器你都耍得有模有樣,那麼這篇博文你大能夠跳過了。只是在忘記的時候,能夠拿出來溫習溫習。java

v基本概念

JavaScript一種直譯式腳本語言,是一種動態類型、弱類型、基於原型的語言,內置支持類型。它的解釋器被稱爲JavaScript引擎,爲瀏覽器的一部分,普遍用於客戶端的腳本語言,最先是在HTML(標準通用標記語言下的一個應用)網頁上使用,用來給HTML網頁增長動態功能。node

簡單點一句話歸納: javascript是基於對象、驅動事件、具備安全性、弱類型的腳本語言。正則表達式

1.聲明變量關鍵字: varwindows

2.變量的名稱: 數組

  • 由數字、字母、下劃線、$組成
  • 數字不能開頭
  • 嚴格區分大小寫
  • 不能以關鍵字命名

3.數據類型: 瀏覽器

  • 基本數據類型
    • 數值類型(整形和浮點型)
    • 字符串類型
    • 布爾類型
  • 引用(複合)數據類型
    • 函數:function()
    • 對象:object()
  • 特殊數據類型 undefined

4.檢測數據類型的方法: typeof()安全

5.運算符優先級: ()>!>算術>關係>&&>||>條件>賦值app

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對象的三種彈出對話框方法:

  • alert() 用於顯示帶有一條指定消息和一個 OK 按鈕的警告框 Demo
  • confirm()用於顯示一個帶有指定消息和 OK 及取消按鈕的對話框 Demo
  • prompt()用於顯示可提示用戶進行輸入的對話框 Demo

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/
關於做者:專一於基礎平臺的項目開發。若有問題或建議,請多多賜教!
版權聲明:本文版權歸做者和博客園共有,歡迎轉載,但未經做者贊成必須保留此段聲明,且在文章頁面明顯位置給出原文連接。
特此聲明:全部評論和私信都會在第一時間回覆。也歡迎園子的大大們指正錯誤,共同進步。或者直接私信
聲援博主:若是您以爲文章對您有幫助,能夠點擊文章右下角推薦一下。您的鼓勵是做者堅持原創和持續寫做的最大動力!

相關文章
相關標籤/搜索