Javascript 簡介
1，Javascript 簡介
誕生於1995年，當時的主要目的是處理由之前服務器語言負責的一些沒有填寫的必填域，是否輸入了無效的值。在web日益流行的同事，
人們對客戶端腳本語言的需求也愈來愈強烈，那時絕大多數因特網用戶使用的速度僅爲28.8kbit/s的貓上網，但網頁的大小和複雜性卻不斷增長，
爲完成簡單的表單驗證而與服務器交換數據只會加劇用戶的負擔。
網景
1995年2月 計劃在Netscape Navigator2開發名爲LiveSript的腳本語言，同時在瀏覽器和服務器中使用，爲了趕在發佈日期前完成LiveScript開發，
Netscape和sun公司創建了一個開發聯盟，在Netscape Navigator2發佈的前夕，爲了搭上媒體上熱炒的java順風車，臨時把LiveScript更名爲javaScript。
在Navigator3發佈不就，ie3就加入了名爲JScript的javaScript的實現。這意味着有兩個不一樣的javascript版本：javascript,jscript.
當時並無標準規定JavaScript的語法和特性。
微軟 --> IE --> JScript
1997年，JavaScript1.1 爲藍本的建議被提交給了ECMA（European Computer ManufacturersAssociation歐洲計算機制造商協會）。
定義了ECMAScript新腳本語言的標準(ECMA-262)。第二年，ISO/IEC（International Organization for Standardization and International Electrotechnical Commission,國標標準化組織和國際電工委員會）
也採用了ECMAScript做爲標準（ISO/IEC-16262）,自此瀏覽器開發商就致力於將ECMAScript做爲各自JavaScript實現的基礎。
2.頁面開發使用前端技術
html+css+javscript
這個是前端開發中最基本也是最必須的三個技能。前端的開發中，在頁面的佈局時， HTML將元素進行定義，CSS對展現的元素進行定位和效果渲染，
再經過JavaScript實現元素相應的動態變化效果.(DHTML)
3.富客戶端概念:效果
其實：不只僅會切圖作頁面，還會用js這樣的腳步語言去豐富它的功能，讓html動起來，產生一些動態效果。這個就是富前段.
3.1 網絡應用程序經歷了從胖客戶端到瘦客戶端的發展歷程,胖客戶端是相對於傳統的C/S結構的網絡應用程序來講的,
而瘦客戶端通常都是相對於B/S結構的Web應用來講的
3.2 富客戶端（Rich Client)簡介富因特網應用程序（Rich Internet Applications，RIA）利用具備很強交互性的富客戶端技術來爲用戶提供一個
更高和更全方位的網絡體驗。富客戶端結合了桌面應用程序和b/s的一些優勢，但本質仍是b/s應用。
3.3 富客戶端技術充分利用本地機器的處理能力來處理數據，而不須要把某些數據發送到服務器處理，充分利用了本地機器的資源。
3.4 ajax jquery flex Silverlight JavaFX等都屬於構建富客戶端的技術
3.5 javascript也是構建富客戶端要是使用一個最基本的技術,以及以後要學習的Jquery.
4.javascript 和 java
運行在瀏覽器 本地
解釋性 編譯
網景 sun
弱語言 強語言
4.1 javascript與Java是由不一樣的公司開發的不一樣產品：
javascript是Netscape公司的產品，其目的是爲了擴展Netscape Navigator(網景導航者瀏覽器)功能,
而開發的一種能夠嵌入Web頁面中的基於對象和事件驅動的解釋性語言.
而Java是SUN Microsystems公司推出的新一代面向對象的程序設語言，經常使用於後臺代碼的開發.
4.2 於1995年由Netscape公司的Brendan Eich首次設計實現而成 。因爲Netscape公司與Sun公司合做，Netscape高層但願它看上去可以像Java，所以取名爲JavaScript
4.3 因此說javascript和java是倆種徹底不一樣的開發語言(可是其實咱們在使用的時候仍是能感受到二者的語法很類似)
6.完整的JavaScript包含的三個部分
js = ECMAScript + DOM + BOM
6.1 ECMAScript規範，描述了該語言的語法和基本對象的定義;
1，語法
2，類型 5+1
3，語句
4，關鍵字
5，保留字
6，操做符 === !==
7，對象 Object
6.2 文檔對象模型(DOM)，描述處理網頁內容的方法
DOM(Document,Object Model) 是針對XML但通過擴展用於HTML的應用程序編程接口。DOM將整個頁面映射成一個多節點結構。
html代碼：
<html>
<head>
<title>hello</title>
</head>
<body>
<p>niha</p>
</body>
</html>
dom模型
html
/ \
head body
| |
title p
| |
'hello' '你好'
6.3 瀏覽器對象模型(BOM)
BOM(Browser Object Model),開發人員可使用BOM控制瀏覽器顯示的頁面之外的部分。
彈出新瀏覽器窗口；移動，縮放，關閉瀏覽器的功能；提供瀏覽器詳細信息的navigator對象;
提供瀏覽器所加載頁面的詳細信息的location對象；提供用戶顯示器分辨率詳細信息的screen對象；
對cookies的支持；
支持XMLHttpRequest,
IE中的ActiveXObject自定義對象
注:JavaScript的三個組成部分，在當前五個主要瀏覽器（IE,Firefox,Chrom,Safari,Opera）中獲得了不一樣程度支持，
其中，全部瀏覽器對ECMAScript3支持大致都還不錯，對ECMAScript支持程度愈來愈高，
但對DOM的支持彼此相差較多，對已經正式歸入HTML5標準的BOM來講，
儘管各瀏覽器都實現了某些總所周知的共同特性，但其餘特性還因瀏覽器而異。
7.javascript語言的特色
7.1 解釋執行的腳本語言
它的基本結構形式與c、c++、java十分相似。但它不像這些語言同樣，須要先編譯，而是在程序運行過程當中被逐行地解釋。
它是須要嵌入到html頁面中,讓瀏覽器來解釋執行的。
7.2 基於對象的語言
javascript是一種基於對象的語言，同時以能夠看做一種面向對象的。這意味着它能運用本身已經建立的對象.(沒有java面向對象純正)
new Date();
不純粹的面向對向對象
7.3 簡單性 : 入門簡單.
它是一種基於java基本語法語句和
控制流之上的簡單而緊湊的設計，
基本java中的語法均可以使用
到javascript中,因此對
於學過java語言的狀況下,
學習javascript也相對比較簡單.
7.4 弱語言
javascript的語法鬆散要求不嚴謹
,好比:一個變量在以前沒有聲明的狀況下就能夠直接使用,聲明變量的時候也能夠不聲明變量的類型等.
弱語言：語法要求不嚴謹,
數據類型沒有指定的內存空間
強語言: 語法嚴謹
數據類型有明確的空間
7.5 事件驅動
咱們在頁面上的操做,例如 左鍵/右鍵的單擊、雙擊,鍵盤上面的按鍵的監聽，鼠標的移動 鼠標拖拽
鼠標滾軸的滾動等等事件的響應處理均可以交給javascript
7.6 動態性 : 動態效果
javascript能夠直接對用戶或
客戶輸入作出響應，無須通過
web服務程序.
給input綁定了 鍵盤事件
7.7 安全性
javascript不容許訪問本地的硬盤
，並不能將數據存入到服務器上，
不容許對網絡文檔進行修改和刪除，只能經過瀏覽器實現信息瀏覽或動態交互。從而有效地防止數據的丟失。
js沒辦法訪問到其餘服務器的資源
(跨域訪問 問題)
7.8 跨平臺性
javascript是依賴於瀏覽器自己，
與操做環境無關，只要能運行瀏覽器的計算機，並支持javascript的瀏覽器就可正確執行,
可是不一樣瀏覽器以及同一瀏覽器的不一樣版本對javascript的支持是不一樣的(瀏覽器的兼容性)
9.在HTML中使用JavaScript
1)經過<script>元素，有以下幾個屬性
type : 可看作是language的替代屬性，表示編寫代碼使用的腳本語言的內容類型，MIME這個屬性非必須，默認是text/javascript
src : 表示包含要執行代碼的外部文件
async ：馬上下載腳本，但應妨礙頁面中其餘操做（只針對外部腳本文件）
charset : 指定src屬性指定的代碼的字符集，大多數瀏覽器會忽略這個值。
defer : 表示腳本能夠延遲到文檔所有被解析和顯示以後再執行（只針對外部腳本文件）
language: 已廢棄
2)兩種方式：
1. 直接嵌入在頁面中
<script type="text/javascript">
//javascript代碼
function(){
}
</script>
2. 包含外部的js文件
<script type="text/javascript" src="test.js"></script>
(後標籤不要省略，不符合html規範)
【注意事項】
1.不要在<script>標籤中再填寫其餘js代碼，不然將會忽略
2.src 能夠跨域訪問 。例如：http://cdn.code.baidu.com/ 百度靜態資源公共庫
10.javascript中的註釋
10.1 單行註釋
//註釋
10.2 多行註釋
/*
多行註釋
多行註釋
*/
11.javasrcipt中的標示符(變量名):
大小寫敏感
不能以數字開頭
一句代碼由分號標示結尾，可是也能夠不寫。
能夠由字母、數字、下劃線、$符號組成
不能是javascript中的關鍵字
關鍵字:(在js中有特殊功能)
break do instanceof typeof
case else new, var
catch finally return, void
continue for switch, while
debugger this function with
default if throw delete
in try
保留字：(未來可能成爲關鍵字)
abstract enum int short
boolean export interface static
byte extends long super
char final native synchronized
class float package throws
const goto private transient
debugger double implements protected
volatile import public
注意：javaScript中代碼能夠不以；結尾 可是最好加上
12.javascript中聲明變量:
ECMAScript的變量是弱類型（鬆散類型），能夠用來保存任何類型的數據。定義變量時使用var操做符
var 變量名;
任何類型的變量均可以用var關鍵字來聲明.
var a;
var a = "";
var b = 10;
var c = 10.9;
var d = new Date();
var e = true;
局部變量與全局變量：
1) 使用var操做符定義的變量將成爲定義該變量的做用域中的局部變量。
function test(){
var message = "hello";
}
test();
alert(message); //錯誤
2) 若是在函數中定義變量沒有加var，該變量爲全局變量
function test(){
message = "hello";
}
test();
alert(message); //能夠訪問
局部變量: 在函數中聲明的變量
function abc(){
var a = 10;//局部變量
}
全局變量：在Script標籤中聲明的變量
不用var關鍵字
eg: a = 10; 全局變量
很是5+1
1)ECMAScript不支持自定義類型，只有6中數據類型：
5中基本數據類型（簡單數據類型）
Undefined 未定義 "undefined"
var a ;
var a = "undefined";
Null 空引用數據類型 "null"
var a = null;
Boolean 布爾類型 true/false
var a = false;
Number 數字類型
String 字符串類型 "" ''
var a ="hello";
var a ='hello';
該類型表示由零個或者多個16位Unicode字符組成的字符序列，即字符串。
字符串能夠由雙引號或者單引號表示
1)字符字面量
\n 換行
\t 製表
\b 退格
\r 回車
\\ 斜槓
\' 單引號
\" 雙引號
2)字符長度
經過length屬性獲取字符長度
1中引用數據類型（複雜數據類型）
Object(本質由一組無序的鍵值對組成)
var person= new Object();
person.name = "terry";
person.age = 12;
var arr = new Array(4);
arr[0] = 'tom';
arr[1] = 'larray';
arr[2] = 'boss';
arr[21] = 'boss';
2) typeof 操做符
返回該變量名所指向數據的類型
語法：
typeof 變量名
typeof(變量名)
可有取值以下
"undefined" <-------typeof 未定義
"boolean" <-------typeof 布爾類型
"string" <-------typeof 字符串
"number" <-------typeof 數值
"object" <-------typeof 對象或者null
"function" <-------typeof 函數
13.javascript中的null和undefined
//彈出null
var a = null;
alert(a);
//彈出undefined (根據瀏覽器來定)
var b;
alert(b);
非數值 NaN (not a number)
該數值表示一個原本要返回數值的操做數未返回數值的狀況。
var a = 10/'a';
console.log(a); //NaN
任何涉及到NaN的操做都會返回NaN; NaN與任何值都不相等，包括NaN自己。
isNaN()，判斷參數是否「不是數值」，當參數para不是數值的時候返回true
isNaN(NaN); true
isNaN("blue"); true 沒法轉換爲數值
isNaN(10); false 10
isNaN("10"); false 10
isNaN(true); fase
14.javascript中的三種彈框:
alert confirm prompt
alert 提示框/警告框
confirm 確認框
prompt 輸入對話框
這三個方法都是window這個對象的方法.window是JS中的一個內置對象,只有window對象的方法,調用的時候才能夠省去對象的名字,
直接用方法名字來調用.window.alert("hello")和alert("hello")是同樣的效果.
這三種彈框都有一個共同的特色,當瀏覽器運行一個彈框代碼的時候,用戶若是不點擊彈框中的肯定或者取消按鈕的話,瀏覽器就會卡這個彈框處,
下面的頁面代碼就不會被執行.
alert彈出一個警告框/提示框,用戶點擊肯定按鈕以後就能夠繼續訪問。
confirm彈出一個確認框,用戶能夠點擊肯定或者取消,這個confirm方法會相應的返回true或者false.
prompt彈出一個可讓用戶輸入的框口,用戶輸入後點擊肯定,這個方法會把用戶輸入的內容返回.
prompt("請輸入你的性別:");
同時還能夠在輸入框設置一個默認值.
prompt("請輸入你的性別:","男");
15.javascript中的輸出: 頁面: 控制檯
寫到html頁面：document.write(....);
寫到控制檯:console.log(name);
另外:console.info(...);
16.javascript中的數據類型
字符串（String）、數字(Number)、布爾(Boolean)
數組(Array)、對象(Object)、空（Null）、未定義（Undefined）。
注意:可使用全局函數typeof()來判斷一個變量的數據類型,只能判斷基礎數據類型。對於使用內置構造函數建立的對象，均返回object
16.1 JavaScript 擁有動態類型的特色。
這意味着相同的變量可用做不一樣的類型：
例子:
var x; // x 爲 undefined
var x = 5; // 如今 x 爲數字
var x = "John"; // 如今 x 爲字符串
16.2 字符串 String
字符串能夠是引號中的任意文本。可使用單引號或雙引號：
var name="tom";
var name='tom';
能夠在字符串中使用引號，只要不匹配包圍字符串的引號便可：
var v="He is called 'tom'";
var v='He is called "tom"';
字符字面量
\n 換行
\t 製表
\b 退格
\r 回車
\\ 斜槓
\' 單引號
\" 雙引號
字符串對象的經常使用方法:
1,s.length:得到字符串的長度:
eg: document.write(s.length+"<br>");
2,s.substr(3,4):從下標爲3的位置開始,截取4個字符,包括下標爲3的位置的字符
eg:document.write(s.substr(3,4)+"<br>");
3,s.substring(6,8):從下標爲6的位置開始截取,截取到下標爲8的位置,可是不包括下標爲8的字符[6,8)
eg:document.write(s.substring(6,8)+"<br>");
4,s.trim():去掉字符串倆邊的空格,可是這個方法有可能瀏覽器不支持.
eg:document.write(s.trim().length+"<br>");
5,s.toUpperCase():字符串轉換爲大寫
eg:document.write(s.toUpperCase()+"<br>");
6,s.toLowerCase():字符串轉換爲小寫
eg:document.write(s.toLowerCase()+"<br>");
7,s.split(""):分割字符串 返回一個數組
document.write(s.split(" ")+"<br>");
document.write(s.split(" ").length+"<br>");
document.write(s.split(" ")[0]+"<br>");
document.write(s.split(" ")[1]+"<br>");
注意:javascript中的轉義符和java的同樣也是\
16.3 數字 Number
js支持最小值 ：Number.MIN_VALUE
js支持最大值 ：Number.MAX_VALUE
JavaScript 只有一種數字類型。數字能夠帶小數點，也能夠不帶
var x1=34.00; //使用小數點來寫
var x2=34; //不使用小數點來寫
極大或極小的數字能夠經過科學（指數）計數法來書寫：
var y=123e5; // 12300000
var z=123e-5; // 0.00123
Number("123"); //若是僅包含數值，轉換爲對應的數值
Number(true); //1
Number(false); //0
Number(null); //0
Number(undefined); //NaN
Number(10); //10 若是是數字值,原樣輸出
parseInt()函數
parseInt("123"); //123；若是僅包含數值，轉換爲對應的數值
parseInt("123ac"); //123;
parseInt("1a23c"); //1;
toString()函數
默認狀況下，toString()是以十進制格式返回數值的字符串表示，經過傳遞參數，能夠輸入以二進制，八進制，十六進制乃至任意有效進制格式的字符串值
var num = 10;
num.toString(); "10"
num.toString(2); "1010"
num.toString(8); "12"
num.toString(16); "a"
16.4 布爾
布爾（邏輯）只能有兩個值：true 或 false。
var x=true;
var y=false;
Boolean(0); false
Boolean(1); true
Boolean(11); true
Boolean("") false
Boolean("123") true
Boolean("abc") true
Boolean("0") true
Boolean(NaN) false
Boolean(null) false
Boolean(undefined) false
!"a" <==> !Boolean("a")
+"3"
16.5 數組 Array
1javascript中數組的特色:
1.數組的長度是可變的
2.數組裏面放的數據類型也能夠不一樣
3.數組的長度是和你所使用到的數組中最大下標相關聯的.
2使用Array構造函數
var arr = new Array();
var arr = new Array(10);
var arr = new Array("terry","larry","boss");
var arr = ["terry","larry","boss"];
3,賦值
arr[4] = 10;
4,訪問數組:
arr[0]
5,判斷對象是不是數組
Array.isArray(arr);
6, 數組轉換爲字符串
toLocalString();
toString();
join("||"); 使用指定的字符串用來分隔數組字符串
棧，隊列方法
1.棧 LIFO (Last-In-First-Out)
push() 可接受任意類型的參數，將它們逐個添加到數組的末尾，並返回數組的長度
pop() 從數組的末尾移除最後一項，減小數組的length值，返回移除的項
2.隊列 FIFO (First-In-First-Out)
shift() 移除數組中的第一個項而且返回該項，同時將數組的長度減一。
unshift() 在數組的前端添加任意個項，並返回新數組的長度。
排序
reverse() 反轉數組項的順序
sort() 排序
7) 操做方法
concat():先建立當前數組的一個副本，而後將接收到的參數添加到這個副本的末尾，返回副本
var arr = ["11","22","33","44"];
var arrcopy = ["11","22","33","44"];
var arr_new = arr.concat("55","66");
// arr_new = ["11","22","33","44", 55","66"]// arr不改變
slice():可接受一個或者兩個參數（返回項的起始位置，結束位置）
當接受一個參數，從該參數指定的位置開始，到當前數組末尾的全部項
當接受兩個參數，起始到結束之間的項，可是不包含結束位置的項
例如：
var arr = ["11","22","33","44"];
1.接受一個參數時
var arr_new = arr.slice(1);
// arr_new = ["22","33","44"],arr 不改變
2.接受兩個參數時
var arr_new = arr.slice(1,2);
// arr_new = ["22"]; arr不改變
splice(參數一,參數二,[參數三]):先把參數一到參數二之間的數除去再返回，而後把參數三的數據放到參數一的位置.
參數一：返回數組的起始位置+參數三的放置的位置 包含
參數二：返回數組的結束位置 包含
參數三：放在參數一位置的數據能夠多箇中間用逗號隔開。
例如：
var arr = ["11","22","33","44"];
1.刪除
var del_arr = arr.splice(1,2);
// arr = ["11","44"]; 在原數組進行了刪除操做
// del_arr = ["22","33"];返回刪除的元素數組
2.插入
var del_arr = arr.splice(1,0,"55","66");
// arr = ["11", "55","66", "22", "33","44"] 將指定項插入到1位置處
//del_arr = [], 返回空數組
3.替換
var del_arr = arr.splice(1,2,"55","66");
// arr = ["11", "55", "66", "44"] 將"22","33" 替換成了"55","66"
//del_arr = ["22", "33"], 返回刪除的元素數組
indexOf([參數]) 從數組開頭向後查找，使用全等操做符，找不到該元素返回-1
參數：開始查找的位置
var arr = ["22","11","33","44","11"];
arr.indexOf(11); //返回-1，由於使用"==="進行匹配
arr.indexOf("11"); //返回1，從前日後匹配，返回第一個匹配元素的位置
lastIndexOf()(要查找的項，開始查找的位置(可選)) 從數組末尾向前查找，使用全等操做符，找不到該元素返回-1
var arr = ["22","11","33","44","11"];
arr.lastIndexOf("11"); //返回1，從後往前匹配，返回第一個匹配元素的位置
8) 迭代方法：
基礎遍歷數組：
for()
for( in )
every();對數組中的每一運行給定的函數，
若是該函數對每一項都返回true,
則返回true
var arr = [11,5,23,7,4,1,9,1];
var result = arr.every(function(item,index,arr){
//item數組中的每一個項
//index數組角標 從0開始
//arr數組
return item > 2;
});
console.log(result); //false
some(); 對數組中的每一運行給定的函數，若是該函數對有一項返回true,則返回true
var result = arr.some(function(item,index,arr){
return item >2;
});
console.log(result); //true
filter();返回一個符合func條件的元素數組
var arr = [11,5,23,7,4,1,9,1];
var result = arr.filter(function(item,index,arr){
return item >2;
});
console.log(result); // [11, 5, 23, 7, 4, 9]
map();對數組中的每一運行給定的函數,返回每次函數調用的結果組成的數組
var result = arr.map(function(item,index,arr){
return item * 2;
});
console.log(result); // [22, 10, 46, 14, 8, 2, 18, 2]
forEach():沒有返回值，只是針對每一個元素調用func,經常使用來遍歷元素
var result = arr.forEach(function(item,index,arr){
console.log(item);
});
for(var i = 0;i<arr.length;i++){
console.log(arr[i])
}
//跳過空項
for(i in arr){
console.log(arr[i]);
}
16.6 空（Null）、未定義（Undefined）
//null
var name = null;
//Undefined
var age;
16.7 對象 Object
javascript中{}能夠表明對象
16.7.1 : var obj = new Object();
javascript已經存在的類型的對象
var v = new Date();
var obj1 = new Object(), obj2 = {};//Object 對象
var arr1 = new Array(), arr2 = [];//Array 對象
var boo1 = new Boolean(true), boo2 = true;//Boolean 對象
var num1 = new Number(123), num2 = 123.45;//Number 對象
var str1 = new String("abc"), str2 = 'abc';//String 對象
16.7.2 自定義的對象1:
var person={firstname:"John", lastname:"Doe", id:5566};
alert(person.firstname);
alert(person.lastname);
alert(person.id);
16.7.3 自定義的對象2:
var p ={ grade:1,
name : "tom",
age:27,
sex:"男",
speak:function(words){
alert(this.name+"說："+words+"!");
}
}
p.speak("hello");
16.7.4 自定義的對象3:
function Person(name){
this.name = name;
this.age = 20;
this.say=say;
}
function say(){
document.write(this.name+":你們好,我今年"+this.age+"歲了");
}
var p = new Person("張三");
p.say();
-----------------------------
function Person(name){
this.id = 1;
this.name = name;
this.age = 20;
this.say=function(msg){
document.write(this.name+" 說:"+msg);
};
}
var p = new Person("張三");
p.say();
16.7.5 方法介紹：
constructor: 保存用戶建立當前對象的函數
hasOwnProperty(propertyName); 用於檢查給定的屬性是否在當前對象實例中
isPrototypeOf(object); 用於檢查傳入的對象是不是原型
propertyIsEnumerable(propertyName); 用於檢查給定的屬性在當前對象實例中是否存在
toLocaleString(); 返回對象的字符串表示，該字符串與執行環境的地區對應
toString(); 返回對象的字符串表示
valueOf(); 返回對象的字符串，數值，布爾值的表示。
16.7.6 訪問對象屬性:
1.點表示法，右側必須是以屬性名稱命名的簡單標識符
person.name
2.中括號表示法，中括號中必須是一個計算結果爲字符串的表達式，
能夠經過變量訪問屬性，若是屬性名中包含語法錯誤的字符，
或者屬性名使用的是關鍵字或保留字，可使用中括號
person["first name"]
16.7.7 刪除屬性
delete只是斷開了屬性和宿主對象的聯繫，而不會操做屬性中的屬性，而且delete只會刪除自有屬性，不能刪除繼承屬性。在銷燬對象時，爲了防止內存泄露，遍歷對象中的屬性，依次刪除全部屬性。
語法：delete 對象.屬性
例如：
delete stu.name //刪除學生對象中的name屬性
補充:
將對象序列化爲Json字符串,只能序列化對象可枚舉的自有屬性。
JSON.stringify(obj)
將json的字符串序列化爲對象
JSON.parse(jsonStr)
17.javascript中的函數:
1,解析器在向執行環境中加載數據時，會率先讀取函數聲明，並使其在執行任何代碼以前可用；當執行器執行到函數表達式的代碼的時候纔會真正的解釋執行
2,arguments:函數內部用來接收函數參數的類數組對象
3,js中沒有重載的概念
4 形式
//無參的
function test1(){
}
//有參的
function test2(name){
}
//多個參數的
function test3(v1,v2){
alert(v1+v2);
}
//有返回值的
function test4(v1,v2){
return v1+v2;
}
//匿名函數 在上面自定義對象的例子中有使用過
function(){
//....
}
5 調用
在<script>標籤中調用定義的函數
例如:能夠先調用後定義
<script type="text/javascript">
test();
function test(){
alert("hello world");
}
test();
</script>
在html元素的事件屬性中調用定義過的函數
例如:能夠先調用後定義
<script type="text/javascript">
function test(){
alert("hello world");
}
</script>
<input type="button" value="點擊" onclick="test()" />
6,函數內部屬性
arguments:是類數組對象,傳入函數中參數數組
this: 指向的是函數賴以執行的環境對象
誰調用指向誰
7,函數的屬性:
length: 表示函數但願接受的命名參數的個數
18.javascript中的局部變量和全局變量
18.1局部變量:
在 JavaScript 函數內部聲明的變量（*使用 var *）是局部變量，因此只能在函數內部訪問它。（該變量的做用域是局部的）。
能夠在不一樣的函數中使用名稱相同的局部變量，由於只有聲明過該變量的函數才能識別出該變量。
只要函數運行完畢，局部變量就會被刪除。
18.2全局變量:
在函數外聲明的變量是全局變量，網頁上的全部腳本和函數都能訪問它。
注意:全局變量都默認是window對象的屬性,因此一個全局變量name也能夠用window.name來訪問,方法window的屬性的是均可以省去window不寫,直接寫屬性名字就能夠了.window的方法也是一樣的.
window是javascript中的一個內置對象能夠直接使用表示瀏覽器窗口
18.3變量的聲明週期:
javaScript 變量的生命期從它們被聲明的時間開始。
局部變量會在函數運行之後被刪除。
全局變量會在頁面關閉後被刪除。
18.4向未聲明的 JavaScript 變量分配值
若是您把值賦給還沒有聲明的變量，該變量將被自動做爲全局變量聲明。
name="tom";
將聲明一個全局變量 name，即便它在函數內執行。
例如: 注意 全局變量會在頁面關閉後被刪除。
<script type="text/javascript">
function test(){
var name = "tom";
}
function test1(){
alert(name);
}
test();
test1();
</script>
19.javascript中的運算符
19.1 算術運算符
+ 加法
- 減法
* 乘法
/ 除法
% 取模
++ 自增
-- 自減
19.2 賦值運算符
給定 x=10 和 y=5
= x=y x=5
+= x+=y x=x+y x=15
-= x-=y x=x-y x=5
*= x*=y x=x*y x=50
/= x/=y x=x/y x=2
%= x%=y x=x%y x=0
19.3字符串的 + 運算符
鏈接多個字符串:
txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;
txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;
19.4字符串和數字進行加法運算
例如:
x=5+5;
y="5"+5;
z="Hello"+5;
a = +"6";
x,y, 和 z 輸出結果爲:
10 數字類型
55 字符串類型
Hello5 字符串類型
20.javascript中的比較
20.1 比較運算符
對於給的變量x=5:
== 等於
x==8 false
x==5 true
x=="5" true
=== 絕對等於/恆等於 (值和類型均相等)
x==="5" false
x===5 true
!= 不等於
x!=8 true
!== 絕對不等於 (值和類型均不相等)
x!=="5" true
x!==5 false
> 大於
x>8 false
< 小於
x<8 true
>= 大於或等於
x>=8 false
<= 小於或等於
x<=8 true
20.2 邏輯運算符
對於給的變量 x=6 以及 y=3:
&& and (x < 10 && y > 1) 爲 true
|| or (x==5 || y==5) 爲 false
! not !(x==y) 爲 true
注意:& |運算結果是0或者1
20.3 條件運算符
java中的三目運算符:
var msg =(age<18)?"年齡過小":"年齡已達到";
21.條件語句
21.1 if語句
if (condition){
// 當條件爲 true 時執行的代碼
}
-----------------------------------
if (condition){
//當條件爲 true 時執行的代碼
}
else{
//當條件不爲 true 時執行的代碼
}
-----------------------------------
if (condition1){
//當條件 1 爲 true 時執行的代碼
}
else if (condition2){
//當條件 2 爲 true 時執行的代碼
}
else {
//當條件 1 和 條件 2 都不爲 true 時執行的代碼
}
20.2 switch語句
例如:
var day=new Date().getDay();
var x = "";
switch (day){
case 0:
x="Today it's Sunday";
break;
case 1:
x="Today it's Monday";
break;
case 2:
x="Today it's Tuesday";
break;
case 3:
x="Today it's Wednesday";
break;
case 4:
x="Today it's Thursday";
break;
case 5:
x="Today it's Friday";
break;
case 6:
x="Today it's Saturday";
break;
default:
x="error!!!";
}
21.循環
21.1 for循環
for (var i=0; i<5; i++){
document.write("hello world");
}
-----------------------------
for (i=0; i<5; i++){
document.write("hello world");
}
注意:千萬不要寫成了for(int i=0;...)
21.2 for-in循環
var person={fname:"John",lname:"Doe",age:25};
for (x in person){
alert(x+":"+person[x]);
}
-------------------------------------
var arr = [1,3,4,5];
for(x in arr){
alert(x+" : "+arr[x]);
}
21.3 while循環 do-while循環
var i=0;
while (i<5){
document.write("hello world");
i++;
}
------------------------------
var i=0;
do{
document.write("hello world");
i++;
}while(i<6);
22. javascript中break 、continue 、標籤
用法和java中的同樣.
break能夠跳出當前標記代碼塊:
test1:{
test2{
document.write("hello world");
document.write("hello world");
document.write("hello world");
break test1;
}
document.write("hello world");
document.write("hello world");
document.write("hello world");
}
23.javascript中的錯誤error
23.1 try-catch
try{
alert1("test");
alert("hello");
}
catch(err){
alert(err);
}
注意:若是是語法錯誤SyntaxError,catch就捕獲不到
23.2 throw
try{
var x = 3;
if(x=="") throw "empty";
if(isNaN(x)) throw "not a number";
if(x>10) throw "too high";
if(x<5) throw "too low";
}
catch(err){
alert(err);
}
24.void關鍵字
javascript:void(0) 是咱們常常在超連接中用到的代碼.
href="#"與href="javascript:void(0)"的區別:
# 包含了一個位置信息，默認的錨是#top 也就是網頁的上端。
而javascript:void(0), 僅僅表示一個死連接。
<a href="javascript:void(0);">點我沒有反應的!</a>
<a href="#pos">點我定位到指定位置!</a>
25.javascript中幾個經常使用類型
26.1.日期
document.write("<h1>日期對象</h1>");
var date = new Date();
document.write(date+"<br>");
//得到當前年份-1900
document.write(date.getYear()+"<br>");
//得到當前年份
document.write(date.getFullYear()+"<br>");
//得到當前月份-1
document.write(date.getMonth()+"<br>");
//得到當前是一個月中的哪一號
document.write(date.getDate()+"<br>");
//得到星期幾
document.write(date.getDay()+"<br>");
//得到時間中的 時 (24)
document.write(date.getHours()+"<br>");
//得到時間中的 分
document.write(date.getMinutes()+"<br>");
//得到時間中的 秒
document.write(date.getSeconds()+"<br>");
//得到時間中的 毫秒
document.write(date.getMilliseconds()+"<br>");
26.2 Math
document.write("<h1>Math對象</h1>");
//得到常量π
document.write(Math.PI+"<br>");
//得到常量e
document.write(Math.E+"<br>");
//得到一個隨機數 [0,1)
document.write(Math.random()+"<br>");
//得到一個隨機數 [23,36]
document.write(parseInt(Math.random()*14+23)+"<br>");
//得到一個較小的數字
document.write(Math.min(4,10,15,3)+"<br>");
//得到一個較大的數字
document.write(Math.max(4,10)+"<br>");
26.3 RegExp
RegExp：是正則表達式（regular expression）的簡寫
正則表達式描述了字符的模式對象。
當您檢索某個文本時，可使用一種模式來描述要檢索的內容。RegExp 就是這種模式。
簡單的模式能夠是一個單獨的字符。
更復雜的模式包括了更多的字符，並可用於解析、格式檢查、替換等等。
您能夠規定字符串中的檢索位置，以及要檢索的字符類型，等等
能夠用作表單驗證
(以後表單驗證的時候纔來討論)
26.javascript中的全局函數
decodeURI() 解碼某個編碼的 URI。
decodeURIComponent() 解碼一個編碼的 URI 組件。
encodeURI() 把字符串編碼爲 URI。
encodeURIComponent() 把字符串編碼爲 URI 組件。
escape() 對字符串進行編碼。
unescape() 對由 escape() 編碼的字符串進行解碼。
eval() 計算 JavaScript 字符串，並把它做爲腳本代碼來執行。
getClass() 返回一個 JavaObject 的 JavaClass。
isFinite() 檢查某個值是否爲有窮大的數。
isNaN() 檢查某個值是不是數字。
Number() 把對象的值轉換爲數字。
parseFloat() 解析一個字符串並返回一個浮點數。
parseInt() 解析一個字符串並返回一個整數。
String() 把對象的值轉換爲字符串。
typeof()
27.javascript html dom
當網頁被加載時，瀏覽器會建立頁面的文檔對象模型（Document Object Model）。
在頁面中用document來表示瀏覽器建立出來的文件對象模型.
JavaScript 可以改變頁面中的全部 HTML 元素
JavaScript 可以改變頁面中的全部 HTML 屬性
JavaScript 可以改變頁面中的全部 CSS 樣式
JavaScript 可以對頁面中的全部事件作出反應
在作這些事情以前必需要先找到當前的這個元素對象.
27.1 查找 HTML 元素
經過 id 找到 HTML 元素
document.getElementById("...");
返回某一個元素對象,默認id是惟一的
經過name找到 HTML 元素
document.getElementsByName("...");
返回一個集合
經過標籤名找到 HTML 元素
document.getElementsByTagName("...");
返回一個集合
經過class找到 HTML 元素
document.getElementsByClassName("...");
返回一個集合
27.2 找到元素以後幹什麼
1.改變元素中的內容
利用innerHTML 或者 value來改變元素中顯示的內容
2.改變元素的屬性
document.getElementById("image").src="2.jpg";
<img id="image" src="1.jpg"></img>
3.改變元素的css樣式
document.getElementById("p1").style.color="blue";
<p id="p1">今每天氣很好.</p>
4.給元素添加事件處理(覆蓋以前的事件)
document.getElementById("myBtn").onclick=function(){
//...
};
5.給元素添加事件監聽(不覆蓋以前的事件)
document.getElementById("myBtn").addEventListener("click",function(){.....});
6.dom增刪改查: 都是須要父節點調用
添加:父節點.appendChild(child)
//建立新元素對象 <p></p>
var para=document.createElement("p");
//建立文本節點
var node=document.createTextNode("你們好");
//把文本節點添加到<p></p>中
para.appendChild(node);
//得到指定div
var element=document.getElementById("div1");
//把<p></p>添加到div中
element.appendChild(para);
刪除: 父節點.removeChild(child)
<div id="div1">
<p id="p1">你們好</p>
<p id="p2">大家好</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
替換: 父節點.replaceChild(new,old)
第一個參數：要插入的節點；
第二個參數：要替換的節點；
要替換的節點將由這個方法返回並從文檔樹中被移除，同時由要插入的節點佔據其位置。
27.3 js中dom操做:
nodeType : 表示節點類型
Element 1;
TextNode 3;
Comment 8;
Document 9;
nodeName : 該屬性取決於節點類型，若是是元素類型，值爲元素的標籤名
nodeValue :該屬性取決於節點類型，若是是元素類型，值有null
childNodes:屬性，保存一個NodeList對象，NodeList是一種類數組對象用來保存一組有序的節點，
NodeList是基於DOM結構動態執行查詢的結果，DOM結構變化能夠自動反應到NodeList對象中。
訪問時能夠經過中括號訪問，也能夠經過item()方法訪問。可使用slice方法將NodeList轉換爲數組
parentNode : 指向文檔樹中的父節點。包含在childNodes列表中全部的節點都具備相同的父節點，每一個節點之間都是同胞/兄弟節點。
previousSibling:兄弟節點中的前一個節點
nextSibling : 兄弟節點中的下一個節點
firstChild : childNodes列表中的第一個節點
lastChild : childNodes列表中的最後一個節點
ownerDocument : 指向表示整個文檔的文檔節點。任何節點都屬於它所在的文檔，任何節點都不能同時存在於兩個或更多個文檔中。
hasChildNodes():在包含一個或多個子節點的狀況下返回true
27.4 : Document類型
javascript經過使用Document類型表示文檔。在瀏覽器中，document對象是HTMLDocument的一個實例，表示整個HTML頁面。
document對象是window對象的一個屬性，所以能夠直接調用。HTMLDocument繼承自Document
1. 文檔子節點
images 獲取全部的img對象，返回HTMLCollection類數組對象
document.image.id
document.image.name
forms 獲取全部的form對象，返回HTMLCollection類數組對象
document.form
links 獲取文檔中全部帶href屬性的<a>元素
document.link
28.2. js事件
javascript與HTML之間的交互是經過事件實現的。事件就是文檔或瀏覽器窗口中發生的一些特定的交互瞬間。
事件三要素：
事件目標（event target）
發生的事件與之相關聯或與之相關的對象
事件處理程序（event handler）
處理或相應事件的函數
事件對象（event object）
與特定事件相關且包含有關該事件詳細信息的對象。
1) 事件流
描述的是從頁面中接受事件的順序
1. 事件冒泡 (IE事件流)
事件開始由最具體的元素接收，而後逐級向上傳播到不具體的節點。
<html>
<head></head>
<body>
<div>click me</div>
</body>
</html>
當點擊了<div>元素，這個click事件會按照以下順序傳播
div->body->html->document
注意：IE8以及更早版本只支持事件冒泡。
2. 事件捕獲 (Netscape事件流)
不太具體的節點更早接收事件，具體的節點到最後接收事件。當點擊了<div>元素，按照以下方式觸發click事件
document->html->body->div
注意：IE9,Safari,Chrome,Opera,Firefox目前也都支持事件捕獲，可是因爲老版本的瀏覽器不支持事件捕獲，所以不多有人使用事件捕獲。建議你們放心使用事件冒泡！
3. DOM事件流
「DOM2級事件」規定了事件流包括三個階段：事件捕獲階段，處理目標階段和事件冒泡階段。首先發生的是事件捕獲，爲截獲事件提供了機會。而後是實際的目標接收到事件。最後是事件冒泡。
事件捕獲： document->html->body
處理目標： 事件處理
事件冒泡： div->body->html->document
2) 事件處理程序
事件就是用戶或瀏覽器自身執行的某種動做，響應某個事件的函數爲事件處理程序，事件處理程序以"on"開頭(onclick,onload)
1. HTML事件處理程序
某個元素支持的每種事件，均可以使用一個與相應事件處理程序同名的HTML特性來指定。這個特性的值應該是可以執行的JavaScript代碼。
<input type="button" value="clickMe" onclick = "alert('is clicked')">
不能在事件中使用未經轉義的HTML語法字符
<input type="button" value="clickMe" onclick = "showMsg()">
<script type="text/javascript">
function showMsg(){
alert("is clicked");
}
</script>
點擊按鈕會調用showMsg()函數，事件處理程序的代碼在執行時，有權訪問全局做用域的任何代碼。
缺點：
1)時差問題，用戶可能會在HTML元素以出如今頁面上就觸發相應的事件，但當時的事件處理程序有可能尚不具有執行的條件。
2)這種擴展事件處理程序的做用域鏈在不一樣瀏覽器中會致使不一樣結果。
3)HTML與JavaScript代碼緊密耦合。
2. DOM0級事件處理程序
經過javascript制定事件處理程序的傳統方式，將一個函數賦值給一個事件處理程序屬性。特色是簡單，跨瀏覽器。
var btn = document.getElementById("btn");
btn.onclick = function(){
alert('cliked');
}
dom0級方法制定的事件處理程序被認爲是元素的方法，所以這個時候時間處理程序是在元素的做用域中運行，this指向當前元素。
btn.onclick = null; //刪除事件處理程序
3. DOM2級事件處理程序
DOM2級規範以一種符合邏輯的方式來標準化DOM事件，IE9,Firefox,Opera,Safari,Chrome所有已經實現了"DOM2級事件"模塊的核心部分。IE8是最後一個仍然使用其專有事件系統的主要瀏覽器。
addEventListener()
事件綁定
參數：
要綁定的事件名
做爲事件處理的函數
布爾值：true在捕獲階段調用事件處理程序；false在冒泡階段調用
removeEventListener()
事件刪除
參數：
要刪除的事件名
做爲事件處理的函數
布爾值：true在捕獲階段調用事件處理程序；false在冒泡階段調用
例如：
//事件綁定
var btn = document.getElementById("btn");
btn.addEventListener("click",function(){
alert(this.id); //該函數在其依附的元素的做用域中運行。
},false);
//事件移除
var btn = document.getElementById("btn");
var handler = function(){
alert(this.id);
}
btn.addEventListener("click",handler,false);
btn.removeEventListener("click",handler,false);//移除
注:1,能夠添加多個事件處理程序，而且按照添加她們的順序觸發。
2,移除事件傳入的參數與添加處理程序時使用的參數相同，
3,添加事件時若是使用匿名函數將沒法刪除
3) 事件對象
1. DOM中的事件對象
在觸發DOM上的某個事件時，會產生一個事件對象event,這個對象包含着全部與事件相關的信息，包括致使事件的元素，事件的類型以及其餘與特定事件相關的信息。兼容DOM的瀏覽器默認會將event對象傳入到事件處理函數中
dom.onclick = function(event){
console.log(event);
}
dom.addEventListener("click",function(event){
console.log(event);
},false);
事件對象的屬性均爲只讀屬性。
屬性 類型 說明
bubbles Boolean 事件是否冒泡
cancelable Boolean 是否能夠取消事件默認行爲
currentTarget Element 事件處理程序當前正在處理事件的那個元素
eventPhase Integer 調用事件處理程序的階段;1，捕獲 2，處於目標 3，冒泡
target Element 事件真正目標
type String 事件類型，須要一個函數處理多個事件時，可使用該屬性。
preventDefault() Function 取消事件的默認行爲
stopPropagation() Function 取消事件的進一步捕獲或者冒泡
在事件處理程序內部，對象this始終等於currentTarget值，而target則只包含事件的實際目標。若是直接將事件處理程序指定給了目標元素，this,currentTarget,target包含相同的值。
4) 事件類型
1. UI事件
load
當頁面徹底加載後再window上觸發，當全部框架加載完畢時在框架集上觸發，當圖像加載完畢時在img元素上觸發，當嵌入的內容加載完時在<object>觸發
unload
當頁面徹底卸載後再window上觸發，當全部框架都卸載後在框架集上觸發，當嵌入的內容卸載完畢後再<object>上觸發,(firefox不支持)
select
當用戶選擇文本框（<input>,<textarea>）中的一個或多個字符時
resize
當瀏覽器窗口被調整到一個新的高度或者寬度時，會觸發
scroll
當用戶滾動帶滾動條的元素中的內容時，在該元素上觸發resize,scroll會在變化期間重複被激發，儘可能保持代碼簡單
2. 焦點事件
blur
元素失去焦點的時候觸發
focus
元素得到焦點的時候觸發，不支持冒泡
focusin
與focus等價，支持冒泡
focusout
與blur等價，支持冒泡
3. 鼠標與滾輪事件
click
點擊主鼠標按鈕或者按下回車按鍵的時候觸發。只有在一個元素上相繼發生mousedown,mouseup事件，纔會觸發click事件
dblclick
雙擊主鼠標按鈕時觸發.只有在一個元素上相繼觸發兩次click時間纔會觸發dbclick事件
mousedown
任意鼠標按鈕按下時觸發
mouseup
釋放鼠標按鈕觸發
mousemove
鼠標在元素內部移動的時候重發觸發
mousewheel
滾輪事件
mouseover
鼠標位於元素外部，將其首次移入另外一個元素邊界以內時觸發【支持子元素】
mouseenter
鼠標光標從元素外部首次移動到元素範圍內激發，不冒泡。【不支持子元素】
mouseout
在位於元素上方的鼠標光標移入到另一個元素中。【支持子元素】在被選元素上與mouseleave效果相同
mouseleave
在位於元素上方的鼠標光標移動到元素範圍以外時觸發，不冒泡【不支持子元素】
4. 相關元素,event特殊屬性
1.客戶區座標位置
clientX,clientY 事件發生時，鼠標指針在視口中的水平和垂直座標
2.頁面座標位置
pageX,pageY 事件發生時，鼠標指針在頁面自己而非視口的座標，頁面沒有滾動的時候，pageX和pageY的值與clientX和clientY值相等
3.屏幕位置
screenX,screenY
4.修改鍵
值爲boolean類型，用來判斷對應的按鍵是否被按下
shiftKey
ctrlKey
altKey
metaKey
5.鼠標按鈕
mousedown,mouseup，該事件的event對象中包含了button屬性，表示按下或釋放的按鈕。
0表示主鼠標按鈕
1表示中間的滾動按鈕
2表示次鼠標按鈕
5. 鍵盤與文本事件
keydown 按下鍵盤任意鍵時觸發，若是按住不放會重複觸發此事件
keypress 按下鍵盤字符鍵時觸發，若是按住不放會重複觸發此事件
keyup 釋放鍵盤上鍵時觸發
當鍵盤事件發生時，event對象的keyCode屬性中會包含一個代碼與鍵盤上的特定鍵對應，對數字字母鍵，keyCode屬性的值與ASCII碼中對應的小寫字母和數字編碼相同
詳見keycode.txt
29.正則表達式(RegExp)
29.1 正則表達式的基本語法規則
語法:
建立正則表達式對象:
var reg = new RegExp(pattern,modifiers);
或者
var reg = /pattern/modifiers;
注:
pattern 描述了表達式的模式/規則
modifiers 用於指定全局匹配、區分大小寫的匹配和多行匹配
對應修飾符modifiers有三個選項:
i 執行對大小寫不敏感的匹配。
g 執行全局匹配（查找全部匹配而非在找到第一個匹配後中止）。
同時在建立正則表達式對象的是也能夠不寫修飾符
29.2 pattern內容的分析
RegExp = 方括號(1) + 元字符(1) + 量詞(n)
abcdefg
方括號:
[abc] 查找方括號之間的任何字符。
[^abc] 查找任何不在方括號之間的字符。
[0-9] 查找任何從 0 至 9 的數字。
[a-z] 查找任何從小寫 a 到小寫 z 的字符。
[A-Z] 查找任何從大寫 A 到大寫 Z 的字符。
[A-z] 查找任何從大寫 A 到小寫 z 的字符。
(red|blue|green) 查找任何指定的選項。
元字符:
. 查找單個字符，除了換行和行結束符。 想表示字符. 能夠轉義
\w 查找單詞字符。字母 數字 _
\W 查找非單詞字符。非 字母 數字 _
\d 查找數字。
\D 查找非數字字符。
\s 查找空白字符。
\S 查找非空白字符。
\b 匹配單詞邊界。
\B 匹配非單詞邊界。
\0 查找 NUL 字符。
\n 查找換行符。
\f 查找換頁符。
\r 查找回車符。
\t 查找製表符。
\v 查找垂直製表符。
量詞: 多個長度
n+ 匹配任何包含至少一個 n 的字符串。
n* 匹配任何包含零個或多個 n 的字符串。
n? 匹配任何包含零個或一個 n 的字符串。
n{X} 匹配包含 X 個 n 的序列的字符串。
n{X,Y} 匹配包含 X 到 Y 個 n 的序列的字符串。
n{X,} 匹配包含至少 X 個 n 的序列的字符串。
n$ 匹配任何結尾爲 n 的字符串。
^n 匹配任何開頭爲 n 的字符串。
?=n 匹配任何其後緊接指定字符串 n 的字符串。
?!n 匹配任何其後沒有緊接指定字符串 n 的字符串。
29.3 支持正則表達式的 String 對象的方法
使用字符串對象的相關方法按照正則表達式
所描述的規則去搜索、匹配、替換、分割.
search 檢索與正則表達式相匹配的值。
match 找到一個或多個正則表達式的匹配。
replace 替換與正則表達式匹配的子串。
EG:var str="Visit Microsoft!"
document.write(str.replace(/Microsoft/, "W3School"))
split 把字符串分割爲字符串數組。
29.4 RegExp 對象方法
使用正則表達式對象(RegExp)的相關方法來對
指定字符串進行格式的驗證.
compile 編譯正則表達式。
var str="Every man in the world! Every woman on earth!";
patt=/man/g;
str2=str.replace(patt,"person");
document.write(str2+"<br />");
patt=/(wo)?man/g;
patt.compile(patt);
str2=str.replace(patt,"person");
document.write(str2);
exec 檢索字符串中指定的值。
var str = "Visit W3School";
var patt = new RegExp("W3School","g");
var result;
while ((result = patt.exec(str)) != null) {
document.write(result);
document.write("<br />");
document.write(result.lastIndex);
}
返回找到的值，並肯定其位置。
test 檢索字符串中指定的值。
返回 true 或 false。
29.5 例子
var v = "aa1a";
//字符串中包含數字就行
var reg = /\d/;
console.log(reg.test(v));
var v = "aaa1111aa";
//字符串中連着出現4次(或者更多)數字便可
var reg = /\d{4}/;
console.log(reg.test(v));
var v = "1111";
//^表示開頭 $表示結尾
//開頭和結尾直接必須連續出現4次數字
var reg = /^\d{4}$/;
console.log(reg.test(v));
var v = "1aaa2345";
//開頭一個非0數字,後面跟任意字符
0-n個,最後4個數字結尾
var reg = /^[1-9]{1}.*\d{4}$/;
console.log(reg.test(v));
var v = "aaredaa";
//red go yes 三個單詞任意匹配
var reg = /(red|go|yes)/;
console.log(reg.test(v));
var v = "a1";
//開頭是一個字符 結尾是一個
數字(一共倆個字符)
var reg = /^\w\d$/;
console.log(reg.test(v));
var v = "aasd11111";
//開頭是字符(1-n個)
var reg = /^\w+\d$/;
console.log(reg.test(v));
var v = "aasd )_###11111";
//開頭是字符(1-n個) 中間隨意匹配
var reg = /^\w+(.*)+\d$/;
console.log(reg.test(v));
//email驗證
var v = "huzl@briup.com";
var reg = /^\w+@\w+(\.[A-z]{2,3}){1,2}$/;
console.log(reg.test(v));
30.表單驗證
第一種方式:提交的時候驗證
<form action="" onsubmit="return jsCheck()">
<input type="text" name="name" /><br>
...
..
..
..
<input type="submit" value="提交" />
</form>
注意:onsubmit="return jsCheck()"表示表單提交以前先調用jsCheck()這個函數進行驗證,而後jsCheck()返回true表示經過驗證,則表單能夠繼續提交,返回false表示驗證失敗,表單不能提交.
第二種方式:在填寫輸入框的時候或者輸入框失去焦點的時候進行驗證,至少和第一種方式驗證的時間點不一樣,可是驗證使用的函數都是同樣的.
或者是onkeyup,用戶邊輸入的時候邊驗證
注意:javascript代碼也能夠提交表單:
document.forms.myForm.submit();
31.瀏覽器對象模型(Browser Object Model (BOM)) Window 對象
1 : window.open(url);
//打開新的頁面
eg: window.open("http://www.baidu.com","newwindow","height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no");
高爲100,寬爲400，距屏頂0象素，屏左0象素，無工具條，無菜單條，無滾動條，不可調整大小，無地址欄，無狀態欄
window.open("http://www.baidu.com")
2,window.location="http://www.baidu.com";
補充：
location.hostname 返回 web 主機的域名
location.pathname 返回當前頁面的路徑和文件名
location.port 返回 web 主機的端口 （80 或 443）
location.protocol 返回所使用的 web 協議（http:// 或 https://）
3,window.location.href="http://www.baidu.com"
能夠控制當前頁面跳轉
4,window.history 對象包含瀏覽器的歷史
history.back() - 與在瀏覽器點擊後退按鈕相同
history.forward() - 與在瀏覽器中點擊按鈕向前相同
history.go(-3);//回走三次
5,window的定時調用函數
setInterval("函數名稱","毫秒")
clearInterval()
6,延遲調用:
setTimeout("函數名稱","時間") 方法
返回id 惟一標識
clearTimeout(id)方法來中止執行函數代碼
7，offsetHeight, offsetWidth
返回元素的高度和寬度，以像素爲單位
8,offsetLeft
返回當前元素的左邊界到它的包含元素的左邊界的偏移量，以像素爲單位。
offsetTop
當前元素的上邊界到它的包含元素的上邊界的偏移量，以像素爲單位。
javascript
- 1. Javascript---Javascript簡介
- 2. （一）JavaScript基礎-JavaScript簡介、ECMAScript簡介
- 3. JavaScript（一）：JavaScript簡介
- 4. Javascript 簡介
- 5. javascript簡介
- 6. 【JavaScript】簡介
- 7. 01-Javascript簡介
- 8. JavaScript簡介
- 9. JavaScript 簡介
- 10. Javascript簡介
- 更多相關文章...
- • Thymeleaf簡介 - Thymeleaf 教程
- • AJAX 簡介 - PHP教程
- • Github 簡明教程
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 升級Gradle後報錯Gradle‘s dependency cache may be corrupt (this sometimes occurs
- 2. Smarter, Not Harder
- 3. mac-2019-react-native 本地環境搭建(xcode-11.1和android studio3.5.2中Genymotion2.12.1 和VirtualBox-5.2.34 )
- 4. 查看文件中關鍵字前後幾行的內容
- 5. XXE萌新進階全攻略
- 6. Installation failed due to: ‘Connection refused: connect‘安卓studio端口占用
- 7. zabbix5.0通過agent監控winserve12
- 8. IT行業UI前景、潛力如何？
- 9. Mac Swig 3.0.12 安裝
- 10. Windows上FreeRDP-WebConnect是一個開源HTML5代理，它提供對使用RDP的任何Windows服務器和工作站的Web訪問