JavaScript 網頁腳本語言 由淺入深 （隨筆）

1）基礎

學習目的：

1. 客戶端表單驗證

2. 頁面動態效果

3. jQuery的基礎

什麼是JavaScript？

一種描述性語言，也是一種基於對象和事件驅動的，並具備安全性能的腳本語言

 

 

javaScript是一種基於對象和事件驅動的,並具備安全性能的腳本語言 解釋執行
javaScript特色
向HTML頁面中添加交互行爲
腳本語言,語法和java相似
解釋性語言,邊執行邊解釋
javascript的基本結構
語法
<script type="text/javascript">
<-----javascript語句------->
</script>
<script>....</script>能夠包含在文檔的任何地方,只要保證這些代碼在被使用時已經讀取並加載到內存中便可

 

javaScript核心語法

 

核心語法 變量 數據類型  數組  運算符號  控制語句  註釋   輸入輸出 語法約定 

 

核心語法變量
var width  var-用於聲明變量的關鍵字
width=5   width-變量名
同時聲明和賦值變量
var catname="皮皮";
var x,y,z=10;
不聲明直接賦值(不建議使用)
width=5;

 

經驗:變量能夠不經聲明而直接使用,但這種方法很容易出錯.也很難查找排錯不推薦使用

 

核心語法-數據類型
數據類型:
undefined
null(表示一個空值和undefined值相等)
numbre
boolean
string
屬性 字符串對象.length(長度)

 

數組(建立數組)
語法 var 數組名稱=new Array(size)
屬性 名稱 描述
length  設置返回數組中的元素書名

 

方法 join()把數組全部的元素放入一個字符串,經過一個的分隔符進行分隔
     sort()對數組進行排序
     push()向數組末尾添加一個或者更多元素,並返回新的長度

 

核心語法
類型   運算符
算數運算符       +-*/++--
賦值運算符  = += -=
比較運算符  > < >=< >= == != === !==
邏輯運算符  && || !

 

if條件語句
if(條件)
{
//代碼
}
else{
//代碼
}

 

switch(表達式){
case 常量 1:
 javaScript語句1;
  break
case 常量 2:
 javaScript語句2;
 break
....
default :
javaScript 語句3;

 

for(初始化;條件;增量)
{
javaScript代碼
}
white(條件)
{
javaScript代碼
}

 

單行註釋 //開始,已行末結束

 

多行註釋以/*開始,以*/結束,符號/*....*/

 

alert("提示信息")
prompt()
prompt("提示信息","輸入框的默認信息")
prompt("請輸入你喜歡的顏色","紅色")
prompt("請輸入你喜歡的顏色","")

 

Chrome開發人員工具
* 中止斷點
*單步調試不進入函數體內部
*單步調試,進入函數體內
* 跳出當前函數
*禁用全部斷點,不作任何調試
alert()方法

 

函數的含義:相似於java中的方法,是完成的任務代碼語句快
使用更簡單:不用定義屬於某個類,直接使用
函數分類:系統函數和自定義函數

 

parsint("字符串")
將字符串轉換爲整數數字
parseFloat("字符串")
將字符串轉換爲浮點數字
ISNAN()
用於檢查其參數是不是非數字

 

自定義函數
定義函數  (無參函數) (有參函數)
function 函數名 (參數1,參數2,參數3.....){
//javaScript語句
[return 返回值]---無關緊要

 

調用函數
函數調用通常和表單元素事件一塊兒使用,調用格式
事件名="函數名()"
onload 一個頁面或者一幅圖像完成加載
onlick 鼠標單擊某個對象
onmouseover 鼠標指導移到某元素上
onkeydown 某個鍵盤按鍵被按下
onchange 域的內容被改變
}

 

爲何要學習JavaScript
表單校驗
特效

 

瀏覽器內核
Chrome  webkit
Firefox  trident
IE
獵豹
搜狗
UC

 

 2）操做BOM

BOM:瀏覽器對象模型(Browser Object Model)
bom提供了獨立於內容的,能夠與瀏覽器窗口進行互動的對象結構

BOM能夠實現的功能
彈出新的瀏覽器窗口
移動關閉瀏覽器窗口以及調整窗口的大小
頁面的前進和後退

Windows對象的經常使用屬性
屬相名稱   說明
histroy   有關客戶訪問過的URL的信息
location  有關當前的URL的信息

語法: Window.屬性名="屬性值";
示例:Window.location="http://www.bdqn.cn"
經常使用的方法
方法名稱   說明
prompt()  顯示能夠提供用戶輸入的對話框
alert()   顯示帶有一個提示信息和一個肯定按鈕的警示款
confirm()  顯示一個帶有提示信息,肯定和取消按鈕的對話框
close()   關閉瀏覽器窗口
open()   打開一個新的瀏覽器窗口,加載給定URL所指定的文檔
setTimeout()  在指定的毫秒後調用函數或計算表達式
setinterval()  按照指定的週期(以毫秒計)來調用函數或者表達式

confirm():將彈出一個確認對話框
confirm("對話款中顯示的純文本")

open()方法
window.open("彈出窗口的URL","窗口名稱","窗口特徵")

history對象
經常使用方法
名稱   說明
back()     加載history對象列表的前一個URL
forward()   加載history對象列表中的下一個URL
go()  加載history 對象列表的某一個具體的URL
location對象
經常使用屬性   說明
host   設置或返回主機名和當前URL的端口號
hostname  設置或返回當前的URL的主機名
href   設置或返回完整的URL
經常使用方法
reload()  從新加載當前文檔
replace()  用新的文檔替換當前文檔

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

getEllementsByName 返回帶有指定名稱的對象的集合

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

write()   向文檔寫文本、HTML表達式或JavaScipt代碼

Array:用於在單獨的變量名存儲一系列的值

String: 用於支持對字符串的處理

Math:用於執行經常使用的數學任務,它包含了若干個數字常量和函數

DATE:用於操做日期和時間
date對象

var 日期對象=new date(參數)
參數格式: MM DD YYYY HH :mm:ss
經常使用方法
方法   說明
getdate()  返回date對象的一個月中的每一天,其值介於1到31之間

getday()  返回date對象的星期中的每一天,其值介於0到6之間

getHours()  返回date對象的小時數,其介於0到23之間

getminutes()  返回date對象的分鐘數其值介於0到59之間

getseconds()  返回date對象的秒數,其值介於0到59之間

getMonth()  返回date對象的月份,其值介於0到11之間

getFullyear()  返回date對象的年份.其值爲4位數

gettime()  返回自某一時刻(1970年1月1日)以來的毫秒數

math 對象
經常使用方法
ceil()  對數進行上舍入   Math.ceil(25.5);返回26    Math.ceil(-25.5);返回-25

floor()  對數進行下舍入   Math.floor(25.5);返回25   Math.floor(-25.5);返回-26

round()  把數四捨五入爲最接近的數  MAth.round(25.5);放回26   Math.round(-25.5) 返回-26

random() 返回0到1之間的隨機數  Math.random();例如:0.6273608814137365

如何實現返回整數範圍爲2到99之間的數
var inum=Math.floor(Math.random()*98+2)

定時函數
setTimeout()
setTimeout("調用的函數",等待的毫秒數)
實例:
var myTime=setTimeout("disptime",1000)

setinterval() 週期性
語法 setinterval("調用函數",間隔的毫秒數)

var myTime=setinterval("disptime",1000)

清除函數
clearTimeout()
語法
clearTimeout(setTimeOut()返回的ID值)

var myTime=setTimeout("disptime()"1000)
clearTimeout(myTime)

clearinterval()
clearlinterval(setinterval()返回的ID)

var myTime=setinterval("disptime()",1000)
clearinterval(myTime )

document **
屬性: referrer 返回的是上一個頁面的URL

3）操做DOM

DOM:Document Object Model(文檔對象模型)

節點屬性   描述
parentNode  返回節點的父節點

childNodes  返回子節點的集合,childNodes[i];

firstChild  返回節點的第一個子節點,最廣泛的用法是訪問該元素的文本節點

lastChild  返回節點的最後一個子節點

nextSibling  下一個節點

previousSibling  上一個節點

element屬性
屬性名稱    描述
firstRlrmentChild  返回節點的第一個子節點,最廣泛的作法是訪問該元素的文本節點

lastElementChild  返回節點的最後一個子節點

nextElenentSilbling  下一個節點

previousElementSibling  上一個節點

節點信息
nodeName:節點名稱
nodeValue:節點值
nodeType:節點類型

節點類型   NodeType值
元素element  1
屬性attr   2
文本text   3
註釋comments  8
文檔document  9

操做節點的屬性
getAttribute("屬性名")
setAttibute("屬性名","屬性值")

建立和插入節點
建立節點
名稱      描述
createElement(tagName)   建立一個標籤名爲tagName的新元素節點
A.appendChild (B)   把B節點追加到A節點的末尾
insertBefore(A,B)   把A節點插入到B節點之間
cloneNode(deep)    複製到某個節點

刪除和替換節點
名稱       描述
removeChild(node)     刪除指定節點
replaceChild(newNode,oldNode)屬性attr  用其餘的節點替換指定的節點

操做節點樣式
改變樣式的屬性
style 屬性
className屬性
HTML元素.style.樣式屬性="值"
示例
doucument.getElenmentByld("titles").style.color="#ff0000"

className屬性
語法 HTML元素.className="樣式名稱"

獲取元素的樣式
語法HTML元素.style.樣式屬性;
示例
alert(document.getElementByid("cartlist").style.display)
實際開發中使用
document.defaultVIEW.getComputerStyle(元素,null).屬性
HTML元素.currentStyle.樣式屬性---兼容IE瀏覽器

JavaScript獲取元素位置

語法
document.documentElement.scrollTop;
document.documentElementt.scrollleft;   標準瀏覽器
或者
document.body.scrollTop
document.body.scrollleft;  谷歌瀏覽器

4）面向對象

對象 是包含相關屬性和方法的集合

什麼是面向對象
面象對象僅僅是一個概念或者編程思想
經過一種叫作原型的方式來實現面向對象的編程

建立對象

自定義對象
內置對象

自定義對象是基於object對象的方式建立對象
語法
var 對象名稱=new object();  經過 . 屬性和方法 
常見的內置對象
String (字符車) 對象
Date(日期) 對象
Array(數組) 對象
Boolean(邏輯) 對象
Math(算數) 對象
RegExp 對象  ------正則表達式對象

 

如何解決使用同一個接口不須要建立不少對象，減小產生大量重複的代碼

** 構造函數

**原型對象

構造函數 是建立特定類型的對象   this變量  new操做符
構造函數始終都應該以一個大寫的字母開頭

調用構造函數的四個步驟
*建立一個新對象
*將構造函數的做用域給新對象(this就指向了這個新對象)
*執行構造函數中的代碼
*返回新對象

constructor屬性標識它的對象屬性

instanceof操做符檢測對象類型

原型對象
每一個函數都有一個prototype屬性，這個屬性是一個指針，指向一個對象
prototype就是經過調用構造函數而建立的那個對象實例的原型對象

原型鏈 一個原型對象是一個原型對象的實例
相關的原型對象層層遞進，就構成了實例與原型的鏈條，就是原型鏈

搜索當前的實例

搜索第一個的prototype

對象繼承
建立子類對象時，不能向父類型的構造函數中傳遞參數
借用構造函數
apply([thisOjb[,argArray]])
應用某一個對象的一個方法，用另外一個對象替換當前對象

call([thisObj[,arg[,arg2[,[argN]]]]])
調用一個對象的一個方法，以另外一個對象替換當前對象
借用構造函數的一個大的優點
能夠在子類型構造函數中向父類型構造函數傳遞參數

組合繼承：有時候也叫作僞經典繼承將原型鏈和借用構造函數的技術組合到一塊，發揮兩者之長的一種繼承模式使用原型鏈實現對原型屬性和方法的繼承，而經過借用構造函數來實現對實例屬性的繼承搜索第二個的prototype