javascript學習

 

1、一些特性：

       基於對象(Object)：     

              它能運用本身已經建立的對象

       基於事件驅動(Event Driven)：

              對用戶的響應是採用以事件驅動的方式進行的,

              直接對用戶或客戶輸入作出響應而無需通過Web服務程序

              事件驅動：在頁面中執行某種操做所產生的動做，      

       具備安全性能：

              它不容許訪問本地的硬盤，

              不能將數據存入到服務器上，

              不容許對網絡文檔進行修改和刪除，

              只能經過瀏覽器實現信息瀏覽或動態交互

       跨平臺：

              僅依賴於瀏覽器自己，與操做系統無關

       腳本語言：   

              採用小程序段的方式實現編程

       解釋性語言：      

              不須要進行編譯，而是在程序運行過程當中逐行地被解釋

             

二.語言基礎

       1.四種基本數據類型：

              數值型（整數和實數）

              字符串型（""或''）

              布爾型（true和false）

              空值       （null）

       2.變量(var)、保留字(boolean...)、做用域({})、運算符(+...)、控制字符（\n...）、異常

       3.控制語句

              if,else

              switch,case,default

              for,while

              continue,break

       4.函數

              1）經常使用函數

                     typeof()//返回類型

                     alert()//彈框

              2）系統函數（內部函數，不屬於任何對象）

                     isNaN(x)

                            //非數值類型返回true,數值類型返回false

                     eval(字符串表達式)//返回字符串表達式中的運算結果

                            test=eval("x=8+9")//test返回17

                     escape(字符串)//返回字符串的一種簡單編碼，將非字母數字的符號轉換爲%加其unicode碼的十六進制表示。

                            escape("hello world")//返回"hello%20world"

                     unescape(字符串)

                            //將已編碼的字符串還原爲純字符串

                     encodeURI(URIString)

                            //可把字符串做爲URI進行編碼並返回

                     decodeURI(URIString)

                            //可對encodeURI()函數編碼過的URI進行解碼

                     parseFloat(字符串)

                            //返回浮點數

                     parseInt(字符串[,radix])

                            //返回整數，radix是進制(2~36)，默認十進制

       5.事件驅動和事件處理

              1）事件(Event)：鼠標或熱鍵的動做

              常見事件及其說明：

                     ----

                     ●onchange 用戶改變域的內容

                     ●onclick 鼠標點擊某個對象

                     ●ondblclick 鼠標雙擊某個對象

                     ----

                     ●onmousedown 某個鼠標按鍵被按下

                     ●onmouseup 某個鼠標按鍵被鬆開

                     ●onmousemove 鼠標被移動

                     ●onmouseover 鼠標被移到某元素之上

                     ●onmouseout 鼠標從某元素移開

                     ----

                     ●onkeydown 某個鍵盤的鍵被按下

                     ●onkeypress 某個鍵盤的鍵被按下或按住

                     ●onkeyup 某個鍵盤的鍵被鬆開

                     ----

                     onselect 文本被選定

                     onresize 窗口或框架被調整尺寸

                     ●onsubmit 提交按鈕被點擊

                     onreset 重置按鈕被點擊

                     onload 某個頁面或圖像被完成加載

                     onerror 當加載文檔或圖像時發生某個錯誤

                     onabort 圖像加載被中斷

                     onfocus 元素得到焦點

                     onblur 元素失去焦點

              2）事件驅動和事件處理程序

                     將某個函數與事件聯繫起來，當事件發生時執行該函數，這就是事件驅動（事件與函數的關聯）。

                     對事件進行處理的函數，稱之爲時間處理程序。

             

                    

                    

三.內置對象

       訪問對象的屬性:   對象.屬性

       訪問對象的方法:   對象.方法()

 

       1.數組對象Array

       （1)建立

              var array=['a',1,true];

              var array=Array('a',1,true);

              var array=new Array('a',1,true);

              var array=new Array(3); arry[0]='a';...

       （2）屬性

              array.length//數組的元素個數

       （3）方法

              join(分割符)

                     array.join('/')//返回a/1/true

              reverse()//反轉

              sort()//排序

              concat()//鏈接多個數組

                     arr1.concat(arr2,arr3)

              pop()//刪除並返回數組最後一個元素

              push()//在數組末尾添加多個元素，返回新的長度

              shift()//刪除並返回第一個元素

              unshift()//在數組開頭添加多個元素，並返回新的長度

              slice(start,end)//提取截取的片斷

              splice(index,num[,element1...,])//從index開始,刪除num個元素，加入element

       （4）內部數組

              在網頁對象中，有不少自己就是數組對象。

              例如，document對象的forms屬性(document.forms)就是一個數組對象，

              頁面中的每一個form是其中的一個元素(document.form[i])

      

       2.字符串對象String

       （1）建立    

              var str='asdf';

              var str=String('asdf');

              var str=new String('asdf');

       （2）屬性

              str.length//返回字符串長度

       （3）方法

              1）格式設置方法

              big(),small(),bold(),italics(),strike(),fontcolor(),fontsize(),link(),

              sub(),sup(),blink(),fixed(),

              2）通用字符串方法

              anchor('name')

                     <p name="a">hello</p>

                     str.anchor('a')//錨

              charAt(index)//返回指定index處的字符

              charCodeAt(index)//返回指定index處的unicode編碼

              concat()//str.concat(str1)鏈接字符串

              indexOf(str1)//返回檢索到的第一個字符串的index

              lastIndexOf(str1)//從後往前檢索，返回index

              match()//匹配正則表達式

              replace()//替換與正則表達式匹配的字符串

              search()//檢索與正則表達式相匹配的值

              slice(start,end)//提取截取的片斷

              split(分隔符)//切片，返回數組

              substr(start,num)//提取截取的片斷

              substring(start,end)//提取截取的片斷

              tolowerCase(),toUpperCase()

      

       3.數學類Math

       （1）屬性

              Math.E 返回2.718

              Math.PI 返回3.14159

       （2）方法

              abs(x) 返回數的絕對值。

              acos(x) 返回數的反餘弦值。

              asin(x) 返回數的反正弦值。

              atan(x) 以介於 -PI/2 與 PI/2 弧度之間的數值來返回 x 的反正切值。

              atan2(y,x) 返回從 x 軸到點 (x,y) 的角度（介於 -PI/2 與 PI/2 弧度之間）。

              ceil(x) 對數進行上舍入。

              cos(x) 返回數的餘弦。

              exp(x) 返回 e 的指數。

              floor(x) 對數進行下舍入。

              log(x) 返回數的天然對數（底爲e）。

              max(x,y) 返回 x 和 y 中的最高值。

              min(x,y) 返回 x 和 y 中的最低值。

              pow(x,y) 返回 x 的 y 次冪。

              random() 返回 0 ~ 1 之間的隨機數。

              round(x) 把數四捨五入爲最接近的整數。

              sin(x) 返回數的正弦。

              sqrt(x) 返回數的平方根。

              tan(x) 返回角的正切。

              toSource() 返回該對象的源代碼。

              valueOf() 返回 Math 對象的原始值。

 

       4.日期類Date

       （1）建立

              new Date() 不帶參數，則以系統時間爲新建立日期對象的內容。

              new Date(毫秒數) 以距1970年1月1日零時到指望時間的毫秒數爲參數，建立日期對象

              new Date(2005,6,3,21,0,22) 設定2005年7月3日，注意月從0開始的

              new Date("July 3, 2005 21:00:22") 以指定的時間爲新建立日期對象的內容

       （2）方法

              getDate() 返回幾號

              getDay() 返回星期幾 （0表明星期日，1到6表明星期一到星期六）

              getHours() 返回幾點

              getMinutes() 返回分鐘數

              getSeconds() 返回秒數

              getTime() 返回距1970年1月1日零時到指望時間的毫秒數

              getYear() 返回年份

              setDate() 設置幾號

              setDay() 設置星期幾 （0表明星期日，1到6表明星期一到星期六）

              setHours() 設置幾點

              setMinutes() 設置分鐘數

              setSeconds() 設置秒數

              setTime() 以距1970年1月1日零時到指望時間的毫秒數爲參數，設置時間

              setYear() 設置年份

 

4、窗口對象window

       在javascript中可使用window和self標識符來引用當前的瀏覽器窗口

       每一個打開的窗口定義一個window對象，若是文檔包含框架（frame 或 iframe 標籤），瀏覽器會爲 HTML 文檔建立一個 window 對象，併爲每一個框架建立一個額外的 window 對象

       1.window對象屬性

             

              opener 返回對建立此窗口的窗口的引用。

              closed 返回窗口是否已被關閉。

              name 設置或返回窗口的名稱。

              length 設置或返回窗口中的框架數量。

              status 設置窗口狀態欄的文本。

              defaultStatus 設置或返回窗口狀態欄中的默認文本。

              outerheight 返回窗口的外部高度。

              outerwidth 返回窗口的外部寬度。

              innerheight 返回窗口的文檔顯示區的高度。

              innerwidth 返回窗口的文檔顯示區的寬度。

             

              top //返回最頂層的先輩窗口。

              parent //返回父窗口。

              self //返回對當前窗口的引用。等價於 Window 屬性。

              window //window 屬性等價於 self 屬性，它包含了對窗口自身的引用。

              · screenLeft

              · screenTop

              · screenX

              · screenY//只讀整數。聲明瞭窗口的左上角在屏幕上的的 x 座標和 y 座標。

              pageXOffset 設置或返回當前頁面相對於窗口顯示區左上角的 X 位置。

              pageYOffset 設置或返回當前頁面相對於窗口顯示區左上角的 Y 位置。

             

              document 對 Document 對象的只讀引用。請參閱 Document 對象。

              Screen 對 Screen 對象的只讀引用。請參數 Screen 對象。

              location 用於窗口或框架的 Location 對象。請參閱 Location 對象。

              history 對 History 對象的只讀引用。請參數 History 對象。

              Navigator 對 Navigator 對象的只讀引用。請參數 Navigator 對象。

 

       2.window對象方法

              open(url,窗口名稱,可選參數) 打開一個新的瀏覽器窗口或查找一個已命名的窗口。

              close() 關閉瀏覽器窗口。

             

              alert(msg) 顯示帶有一段消息和一個確認按鈕的警告框。

              prompt('提示',默認值) 顯示可提示用戶輸入的對話框。

              confirm(msg)

                     //顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。

                     //返回true或false

             

              moveBy() 可相對窗口的當前座標把它移動指定的像素。

              moveTo() 把窗口的左上角移動到一個指定的座標。

              focus() 把鍵盤焦點給予一個窗口。

              resizeBy() 按照指定的像素調整窗口的大小。

              resizeTo() 把窗口的大小調整到指定的寬度和高度。

              scrollBy() 按照指定的像素值來滾動內容。

              scrollTo() 把內容滾動到指定的座標。

              //定時

              setInterval("func()",milli) 按照指定的週期（以毫秒計）來調用函數或計算表達式。

              clearInterval() 取消由 setInterval() 設置的 timeout。

              setTimeout() 在指定的毫秒數後調用函數或計算表達式。

              clearTimeout() 取消由 setTimeout() 方法設置的 timeout。

             

              blur() 把鍵盤焦點從頂層窗口移開。

              createPopup() 建立一個 pop-up 窗口。

              print() 打印當前窗口的內容。

             

5、文檔對象document

       1.DOM文檔對象模型

              window 整個瀏覽器窗口的統稱，是最上層的惟一對象。這一級能夠省略，是系統默認值。

          document 是Window的一個子對象，包含當前文檔(HTML文件)中全部的對象。

          form 即表單，包含許多子對象。

          window、document和history對象是系統定義好的，其它對象是由咱們程序員本身定義的。

       2.document對象概述

              1）若是給頁面中的元素起個名字，則能夠把該元素當成document 對象的一個屬性來處理。

                     <form name="form1"></form> //document.form1

              2）集合

                     all[] 提供對文檔中全部 HTML 元素的訪問。

                     anchors[] 返回對文檔中全部 Anchor 對象的引用。

                     applets 返回對文檔中全部 Applet 對象的引用。

                     forms[] 返回對文檔中全部 Form 對象引用。

                     images[] 返回對文檔中全部 Image 對象引用。

                     links[] 返回對文檔中全部 Area 和 Link 對象引用。

              3）屬性 

                     body      提供對 <body> 元素的直接訪問。對於定義了框架集的文檔，該屬性引用最外層的 <frameset>。

                     cookie    設置或返回與當前文檔有關的全部 cookie。

                     domain 返回當前文檔的域名。

                     lastModified 返回文檔被最後修改的日期和時間。

                     referrer 返回載入當前文檔的文檔的 URL。

                     title        返回當前文檔的標題。

                     URL       返回當前文檔的 URL。

              4）方法

                     close() 關閉用 document.open() 方法打開的輸出流，並顯示選定的數據。

                     getElementById() 返回對擁有指定 id 的第一個對象的引用。

                     getElementsByName() 返回帶有指定名稱的對象集合。

                     getElementsByTagName() 返回帶有指定標籤名的對象集合。

                     open() 打開一個流，以收集來自任何 document.write() 或

                     document.writeln() 方法的輸出。

                     write() 向文檔寫 HTML 表達式 或 JavaScript 代碼。

                     writeln() 等同於 write() 方法，不一樣的是在每一個表達式以後寫一個換行符。

              5）事件

                     onkeydown 按下任意鍵

                     onkeypress 將按下任意鍵

                     onkeyup 釋放鍵

                     onclick 單擊鼠標

                     ondblclick 雙擊鼠標

                     onmousedown 按下鼠標

                     onmouseup 釋放鼠標

                     load 文檔裝載完畢

                     unload 文檔卸載完畢

                     可使用attachEvent方法，爲body添加事件。

                     document.attachEvent ('onclick',getA);

6、表單對象form

       可以直接訪問頁面中的表單;能夠實現與用戶的交互;不須要服務器的介入，就能夠實現動態改變Web頁面的行爲。

       1.document.forms[i]//訪問某一個表單

       2.方法

              document.form[i].submit()//實現表單的提交、

       3.屬性

              Name 表單的名稱

              action 提交表單後執行的程序

              target     指定數據顯示在哪一個窗口(_blank,_parent,_self,_top)或哪一個框架(框架名稱)中

              encoding 默認爲text/html

              method 「Get」或「Post」

              elements 數組其中的元素對應於頁面上表單內的各個控件

                     document.表單名.elements.length可知該表單共有多少個對象

              表單的其餘幾個屬性均對應於HTML語法中<form>標記的屬性。     

       4.表單中的各個基本控件

              1）text對象

                     對應於頁面中的text輸入框控件。

                     屬性

                            accessKey 設置或返回訪問文本域的快捷鍵。

                                   使用 Alt + accessKey 爲擁有指定快捷鍵的元素賦予焦點

                            alt 設置或返回當瀏覽器不支持文本域時供顯示的替代文本。

                            defaultValue 設置或返回文本域的默認值。

                            disabled        設置或返回文本域是否應被禁用。

                            id    設置或返回文本域的 id。

                            maxLength    設置或返回文本域中的最大字符數。

                            name     設置或返回文本域的名稱。

                            readOnly 設  置或返回文本域是否應是隻讀的。

                            size 設置或返回文本域的尺寸。

                            tabIndex 設置或返回文本域的 tab 鍵控制次序。

                            type 返回文本域的表單元素類型。

                            value 設置或返回文本域的 value 屬性的值。

                     方法

                            blur( ) 將當前焦點移到後臺

                            select( ) 加亮文字，選取文本域中的內容。

                            focus() 在文本域上設置焦點。

                            主要事件onfocus，onblur，onselect，onchange

              2）textarea對象

                     對應於頁面中的textarea輸入控件。

                     <textarea name="控件名稱">默認文本</textarea>

                     屬性

                            name textarea輸入框控件名稱

                            value textarea輸入框控件中當前的文本

                            defaultvalue textarea輸入框控件的默認文本

                     方法

                            blur( ) 將當前焦點移到後臺

                            select( ) 加亮文字

                     主要事件

                            onfocus，onblur，onselect，onchange

              3）select對象

                     對應於網頁中的下拉列表框。

                     <select name="下拉列表框的名稱" size="下拉列表框顯示的條數">

                            <option value="選擇值">選項描述</option>

                            <option value="選擇值" selected>選項描述</option>

                            …………

                     </select>

                     屬性

                            disabled 設置或返回是否應禁用下拉列表

                            id 設置或返回下拉列表的 id。

                            length 返回下拉列表中的選項數目。

                            multiple 設置或返回是否選擇多個項目。

                            name 設置或返回下拉列表的名稱。

                            options   返回包含下拉列表中的全部選項(option對象)的一個數組。

                                   option對象屬性：

                                          text 該選項顯示的文字

                                          value 該選項的value值

                                          selected 指明該選項是否別選中

                                          selectedIndex 當前選中項的下標

                                          size 設置或返回下拉列表中的可見行數。

                                   方法

                                          options.add() 向下拉列表添加一個選項。

                                          blur() 從下拉列表移開焦點。

                                          focus() 在下拉列表上設置焦點。

                                          remove() 從下拉列表中刪除一個選項。

                                   主要事件

                                          onfocus，onblur，onchange

              4）button對象

                     button對象對應於網頁中的按鈕控件。

                     <input type="button" value="按鈕上顯示的值" name="控件名稱">

                     屬性

                            accessKey 設置或返回訪問按鈕的快捷鍵。

                            alt 設置或返回當瀏覽器沒法顯示按鈕時供顯示的替代文本。

                            disabled 設置或返回是否禁用按鈕。

                            id 設置或返回按鈕的 id。

                            name 設置或返回按鈕的名稱。

                            tabIndex 設置或返回按鈕的 tab 鍵控制次序。

                            value 設置或返回在按鈕上顯示的文本。

                     方法

                            blur() 把焦點從元素上移開。

                            click() 在該按鈕上模擬一次鼠標單擊。

                            focus() 爲該按鈕賦予焦點。

                     主要事件

                            onclick

              5）checkbox對象

                     checkbox對象對應於網頁中的複選框。

                     <input type="checkbox" value="值" name="控件名稱" checked>選項說明

                     屬性

                            accessKey 設置或返回訪問 checkbox 的快捷鍵。

                            alt 設置或返回不支持 checkbox 時顯示的替代文本。

                            checked 設置或返回 checkbox 是否應被選中。

                            defaultChecked 返回 checked 屬性的默認值。

                            disabled 設置或返回 checkbox 是否應被禁用。

                            id 設置或返回 checkbox 的 id。

                            name 設置或返回 checkbox 的名稱。

                            tabIndex 設置或返回 checkbox 的 tab 鍵控制次序。

                            value 設置或返回 checkbox 的 value 屬性的值

                     方法

                            blur() 從 checkbox 上移開焦點

                            click() 模擬在 checkbox 中的一次鼠標點擊。

                            focus() 爲 checkbox 賦予焦點。

                     主要事件

                            onclick

              6）radio對象

                     radio對象對應於網頁中的單選控件。當網頁中具備多個相同名稱的單選控件後，就造成了一個radio對象數組，其中每一個單選控件即爲一個radio對象。

                     <input type="radio" value="選項值" name="單選項名稱" checked>選項說明

                     <input type="radio" value="選項值" name="單選項名稱" >選項說明

                     …………

                     屬性

                            accessKey 設置或返回訪問單選按鈕的快捷鍵。

                            alt 設置或返回在不支持單選按鈕時顯示的替代文本。

                            checked 設置或返回單選按鈕的狀態。

                            defaultChecked 返回單選按鈕的默認狀態。

                            disabled 設置或返回是否禁用單選按鈕。

                            id 設置或返回單選按鈕的 id。

                            name 設置或返回單選按鈕的名稱。

                            tabIndex 設置或返回單選按鈕的 tab 鍵控制次序。

                            value 設置或返回單選按鈕的 value 屬性的值。

                     方法

                            blur() 從單選按鈕移開焦點。

                            click() 在單選按鈕上模擬一次鼠標點擊。

                            focus() 爲單選按鈕賦予焦點。

                     主要事件

                            onclick

              7）hidden對象

                     hidden對象對應於網頁中的隱藏域。

                     <input type="hidden" value="值" name="名稱" >

                     屬性

                            alt 設置或返回當不支持隱藏輸入域時顯示的替代文本。

                            id 設置或返回隱藏域的 id。

                            name 設置或返回隱藏域的名稱。

                            value 設置或返回隱藏域的 value 屬性的值。

              8）submit對象

                     submit對象對應於網頁中的submit按鈕。

                     <input type="submit" value="顯示文本" name="名稱" >

                     屬性

                            accessKey 設置或返回訪問提交按鈕的快捷鍵。

                            alt 設置或返回當瀏覽器不支持提交按鈕時供顯示的替代文本。

                            disabled 設置或返回提交按鈕是否應被禁用。

                            id 設置或返回提交按鈕的 id。

                            name 設置或返回提交按鈕的名稱。

                            tabIndex 設置或返回提交按鈕的 tab 鍵控制次序。

                            value 設置或返回在提交按鈕上顯示的文本。

                     方法

                            blur() 從提交按鈕上移開焦點。

                            click() 在提交按鈕上模擬一次鼠標點擊。

                            focus() 爲提交按鈕賦予焦點。

                     主要事件

                            onclick

              9）password對象

                     password對象對應於網頁中的密碼輸入框。

                     <input type="password" value="值" name="名稱" >

                     屬性

                            accessKey 設置或返回訪問密碼字段的快捷鍵。

                            alt 設置或返回當不支持密碼字段時顯示的替代文字。

                            defaultValue 設置或返回密碼字段的默認值。

                            disabled 設置或返回是否應被禁用密碼字段。

                            id 設置或返回密碼字段的 id。

                            maxLength 設置或返回密碼字段中字符的最大數目。

                            name 設置或返回密碼字段的名稱。

                            readOnly 設置或返回密碼字段是否應當是只讀的。

                            size 設置或返回密碼字段的長度。

                            tabIndex 設置或返回密碼字段的 tab 鍵控制次序。

                            value 設置或返回密碼字段的 value 屬性的值。

                     方法

                            blur() 從密碼字段移開焦點。

                            click() 爲密碼字段賦予焦點。

                            focus() 選取密碼字段中的文本。

 

7、History與Navigator對象

       1.History對象

              History 對象包含用戶（在瀏覽器窗口中）訪問過的 URL。

              History 對象是 window 對象的一部分，可經過 window.history 屬性對其進行訪問。

              1）屬性

                     length 返回瀏覽器歷史列表中的 URL 數量。

                     History 對象方法

              2）方法

                     back() 加載 history 列表中的前一個 URL。

                     forward() 加載 history 列表中的下一個 URL。

                     go(number|URL) 加載 history 列表中的某個具體頁面。

                     -1表示前一個頁面

       2.Navigator 對象

              Navigator 對象包含有關瀏覽器的信息。可使用這些屬性進行平臺專用的配置。

              Navigator 對象的實例是惟一的，能夠用 Window 對象的 navigator 屬性來引用它。

              Navigator 對象集合           

              1）集合

                     plugins[]返回對文檔中全部嵌入式對象的引用。

                     該集合是一個 Plugin 對象的數組，其中的元素表明瀏覽器已經安裝的插件。Plug-in

                     對象提供的是有關插件的信息，其中包括它所支持的 MIME 類型的列表。

                     雖然 plugins[] 數組是由 IE 4 定義的，可是在 IE 4 中它卻老是空的，由於 IE4 不支持插件和 Plugin 對象。

              2）屬性

                     appCodeName 返回瀏覽器的代碼名。

                     appMinorVersion 返回瀏覽器的次級版本。

                     appName 返回瀏覽器的名稱。

                     appVersion 返回瀏覽器的平臺和版本信息。

                     browserLanguage 返回當前瀏覽器的語言。

                     cookieEnabled 返回指明瀏覽器中是否啓用 cookie 的布爾值。

                     cpuClass 返回瀏覽器系統的 CPU 等級。

                     onLine 返回指明系統是否處於脫機模式的布爾值。

                     platform 返回運行瀏覽器的操做系統平臺。

                     systemLanguage 返回 OS 使用的默認語言。

                     userAgent 返回由客戶機發送服務器的 user-agent 頭部的值。

                     userLanguage 返回 OS 的天然語言設置。

              3）方法

                     javaEnabled() 規定瀏覽器是否啓用 Java。

                     taintEnabled() 規定瀏覽器是否啓用數據污點 (data tainting)。

 

8、其餘對象

9、自定義對象

10、框架編程

       一個HTML頁面能夠有一個或多個子框架，這些子框架以<iframe>或<frame>來標記，

       用來顯示一個獨立的HTML頁面。本節介紹框架的自我控制及框架之間的相互訪問，

       例如從一個框架中引用另外一個框架中的JavaScript變量，調用其餘框架內的函數，控制另外一個框架中表單的行爲等。

 

 

出處：https://blog.csdn.net/a125138/article/details/7819466