在數百萬張頁面中，JavaScript 被用來改進設計、驗證表單、檢測瀏覽器、創建cookies，等等等等。
JavaScript 是因特網上最流行的腳本語言，並且可在所有主要的瀏覽器中運行，比方說 Internet Explorer、 Mozilla、Firefox、Netscape、和 Opera。
什麼是 JavaScript？
JavaScript 被設計用來向 HTML 頁面添加交互行爲。
JavaScript 是一種腳本語言（腳本語言是一種輕量級的編程語言）。
JavaScript 由數行可執行計算機代碼組成。
JavaScript 通常被直接嵌入 HTML 頁面。
JavaScript 是一種解釋性語言（就是說，代碼執行不進行預編譯）。
所有的人無需購買許可證均可使用 JavaScript。
JavaScript 能做什麼？
- JavaScript 爲 HTML 設計師提供了一種編程工具
- HTML 創作者往往都不是程序員，但是 JavaScript 卻是一種只擁有極其簡單的語法的腳本語言！幾乎每個人都有能力將短小的代碼片斷放入他們的 HTML 頁面當中。
- JavaScript 可以將動態的文本放入 HTML 頁面
- 類似於這樣的一段 JavaScript 聲明可以將一段可變的文本放入 HTML 頁面：document.write("<h1>" + name + "</h1>")
- JavaScript 可以對事件作出響應
- 可以將 JavaScript 設置爲當某事件發生時纔會被執行，例如頁面載入完成或者當用戶點擊某個 HTML 元素時。
- JavaScript 可以讀寫 HTML 元素
- JavaScript 可以讀取及改變 HTML 元素的內容。
- JavaScript 可被用來驗證數據
- 在數據被提交到服務器之前，JavaScript 可被用來驗證這些數據。
- JavaScript 可被用來檢測訪問者的瀏覽器
- JavaScript 可被用來檢測訪問者的瀏覽器，並根據所檢測到的瀏覽器，爲這個瀏覽器載入相應的頁面。
- JavaScript 可被用來創建 cookies
- JavaScript 可被用來存儲和取回位於訪問者的計算機中的信息。
- 教程地址：
http://www.w3school.com.cn/js/js_intro.asp
<script language="JavaScript" type="text/javascript" >
<!--
....
//-->
</script>
.language已經被棄用，但爲了兼容舊版本瀏覽器而保留，所以建議同時使用這language和type兩個
.<!--- //--> 的作用是使得不支持JavaScript的舊版本瀏覽器能忽略腳本內容
.<script src="xxx.js" language="JavaScript" type="text/javascript" charset="gb2312" ></script>
charset單獨設置 xxx.js的字符編碼
.利用DOM實現<body οnlοad="alert('xxxx')" >
document.body.οnlοad=function(){
alert("xxxx");
}
.變量
命名規則
可以由字母、下劃線_、數字、$組成
必須以字母、下劃線_、或$開頭
變量名不能是關鍵字或保留字
推薦使用駱駝型命名法
可以使用var來聲明變量，但一定要在使用之前聲明
var a,b=1,c;
a=2;
c=4;
也可以不經過var聲明而直接使用，這樣和上面沒有任何區別，只是會降低可讀性
JavaScript是大小寫敏感的
變量類型
undefined 未定義
null 空
boolean 布爾
string 字符串
number 數值
object 對象
var a="ddddd";
if("string" == typeof(a))
{
alert("==");
}
var b=false;
if("boolean" == typeof(b))
{
alert("==");
}
var f=null; //typeof(f) == "object"
if("undifined" == typeof(x))
{
alert("==");
}
類型轉換
undefined、null、0、NaN、"" 都爲false
object 總爲true
強制轉換成數字型
var b="33";
b+67; //3367
parseInt(b)+67; //100
parseFloat("333.98");
判斷是否非數字 isNaN()
var a="xxxx";
alert(isNaN(a)); //true
判斷一個數是否不是無窮大 isFinite()
var a=22;
alert(isFinite(a)); //true
判斷是否潤年
function isLeapYear(year_)
{
var year=parseInt(year_);
//if((0==year%400) || (0==year%4) && (0!=year%100)) { //... }
if(0 == year%400) //能被400整除是
return true;
elseif（0==year%4 && 0!=year%100) //
return true;
else
return false;
}
.switch()
switch(exp)
{
case 1:
case 2:
case 3:
//...
break;
case 4:
//...
break;
default:
//...
break;
}
.for
for(var i=0; i++; i<100)
{
//...
}
.將函數賦給一個變量或事件
doucment.body.onload = function(){
alert("load);
}
var max = function(a,b){
return (a)>(b)?(a):(b);
}
則可以通過max執行函數 max(4,5); //5
var global=123; //全局變量
function abc()
{
var local=global; //局部變量local用全局變量global賦值
}
.eval(string)函數
執行把參數string所表示的命令
var act="alert('ssssss')";
eval(act); //將執行alert("ssss")
.對url進行編碼
escape(url);
unescape(url);
.日期
var objDate = new Date("January 12,2006 22:19:34");
var objDate = new Date("January 12,2006");
var objDate = new Date(2006,1,12,22,19,34);
var objDate = new Date(2006,1,12);
var objDate = new Date(1177663004); //自1970年來的秒數
objDate.getFullYear();
objDate.getYear();
objDate.getMonth();
objDate.getDate();
objDate.getDay();
objDate.getHours();
objDate.getMinutes();
objDate.getSeconds();
objDate.getMilliseconds();
objDate.getTime(); //返回從1970年來的毫秒數
objDate.setFullYear(2007);
objDate.setYear(07);
objDate.setMonth(12);
objDate.setDate(11);
objDate.setHours(23);
objDate.setMinutes(34);
objDate.setSeconds(56);
objDate.setMilliseconds(555); //0~999
objDate.setTime(1180195200000); //返回從1970年來的毫秒數
.Math
Math.E
Math.PI
Math.abs(x)
Math.ceil(x)
Math.floor(x)
Math.max(a,b,c,...,valN)
Math.min(a,b,c,...,valN)
Math.pow(x,y) //x的y次方
Math.random() //0~1之間的隨機小數如 0.123535464
Math.round(78.67) //四舍5入
.數組
var arr = new array();
var arr = new array(10);
var arr = new array("a","b","c");
var arr = new array();
arr[]="1";
arr[]="2";
arr[]="3";
..
arr[9]="290";
arr[]="14";
.多維數組
var arr = new Array(4);
for(var i=0; i<arr.length; i++)
arr = new Array(6);
//訪問
for(var i=0; i<arr.length; i++)
for(var j=0; j<arr[0].length; j++)
alert(arr[j]);
或
var arr = [[1,2,3], [4,5,6],[7,8,9]];
.數組方法
arr.toString(); //[1,2,3] 轉到 "1,2,3" [[1,2,3], [4,5,6],[7,8,9]]; 轉到 "1,2,3,4,5,6,7,8,9"
arr.concat(arg1, arg2, arg3,...); //var arr=[1,2,3]; arr.concat("4","5","6"); //返回 1,2,3,4,5,6 而arr不受影響
arr.join(separator); //以separator爲分隔符， 把數組轉成字符串
arr.pop(); //刪除數組最後一個元素
arr.push(arg1,arg2,arg3,....) //把arg1,arg2等等添加到數組尾部
arr.shift(); //刪除第一元素
arr.slice(start, end); //返回數組中下標從start到end間的子數組
arr.sort(comparefunc); //對數組進行按func函數結果的排序
arr.unshift(arg1,arg2,...) //把arg1,arg2等元素添加到數組頭部
arr.splice(start, nums, arg1,arg2,...); //把從start開始的nums個元素替換成 arg1,arg2,...， 而不是對應替換
arr = [1,2,3,4,5,6];
arr.splice(0,0,9,22,33); // arr=[9,22,33,1,2,3,4,5,6]
arr.splice(1,3,9,22,33); // arr=[1,9,22,33,5,6] 把第1個到第3個元素2,3,4替換成9,22,33
.string字符串
var str="123456";
字符串長度
str.length
str.indexOf(substring,pos); //“abcdef”.indexOf("bc",1); 返回子串bc在串"abcdef"中的第一次出現下標
str.lastIndexOf(substring,pos); //“abcdef”.indexOf("bc",1); 返回子串bc在串"abcdef"中的最後一次出現下標
str.charAt(pos); //返回下標pos處的單個字符
str.charCodeAt(pos); //返回下標pos處的字符的ASCII碼
str.slice(start, end); //返回從start到end之間的子串(不包含end處字符)
str.split(separator, len); //把串str以separator爲分隔符切割成多個子符串數組，子串數組的最大長度
//"a,b,c,d".split(",") 返回["a","b","c","d"]
//"a,b,c,d".split(",", 2) 返回["a","b"]
//"a,b,c,d".split() 返回["a,b,c,d"]
//"a,b,c,d".split("") 返回["a",",""b",",",c",",","d"]
str.substr(start, length); //返回從start處的長爲length子串
str.substring(start, end); //返回從start到end之間的子串(包含end處字符)
.字符串替換
str.replace(oldsubstr, newsubstr); //把串str中的oldsubstr子串替換爲newsubstr子串 .字符串大小寫轉換
str.toLowerCase(); //把串str轉爲小寫
str.toUpperCase(); //把串str轉爲大寫
.正則表達式匹配
str.match(regExp) 搜索str中所有匹配正則表達式regExp的子串，並把他們組成一個數組返回
var arr=str.match(//d+/);
for(var i=0; i<arr.length; i++)
alert(arr);
.search(regExp) 返回串str中第一個匹配regExp表達式的子串的索引位置
var str="aaabcbddabcfjkerabcrrsaa";
alert(str.search(/abc/g));
.獲取瀏覽器信息
1)navigator對象
navigator.appCodeName //IE: Mozilla Firefox: Mozilla
navigator.appName //IE: Microsoft Internet Explorer Firefox: Netscape
(navigator.appVersion //IE: 4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) Firefox: 5.0 (X11; zh-CN)
navigator.cookieEnabled //IE: true/false Firefox: true/false
navigator.cpuClass //IE: x86 Firefox: undifined
navigator.language //IE: undifined Firefox: zh_CN
navigator.platform //IE: Win32 Firefox: Linux i686
navigator.userAgent //IE: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)
Firefox: Mozilla/5.0 (X11; U; Linux i686; zh-CN; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3
function isIE()
{
return (navigator.userAgent.toLowerCase().indexOf("msie") >= 0);
}
function isFirefox()
{
return (navigator.userAgent.toLowerCase().indexOf("firefox") >= 0);
}
2)location對像
window.location = "http://www.cnscn.org";
window.location.href = "http://www.cnscn.org";
window.location.assign("http://www.cnscn.org");
window.location.protocol 協議如 "http:" (注意IE和firefox都要帶:即冒號 "http:")
window.location.hostname 域名或IP: www.a.com 或 192.168.1.1
window.location.host
window.location.pathname 如http://172.16.1.69/ajax/b.html?a=1&b=2 輸出 /ajax/b.html
window.location.search 如http://172.16.1.69/ajax/b.html?a=1&b=2 輸出 ?a=1&b=2 (即帶?號)
window.location.href 如http://172.16.1.69/ajax/b.html?a=1 輸出 http://172.16.1.69/ajax/b.html?a=1
window.location.port
window.location.hash
window.location.reload(boolean) 參數爲true表示強制從服務器重新載入， 爲false表示從緩存中重新載入
window.replace(url) 導航到url指定頁面(和指定href相同)，但在瀏覽歷史中替換當前頁地址(和指定url不同)
3)history對象
history.back(); //相當於後退按鈕
history.forward(); //相當於前進按鈕
history.go(-2); //相當於點擊兩次後退按鈕
4)document對象
document.anchors //<a name>書籤標記數組 document.anchors[0].name
document.embeds //所有<embed>數組
document.forms //所有表單數組 document.forms[0].action
document.images //所有<img>數組 document.images[0].offsetWidth document.images[0].sttyle.width
document.links //所有<a href>數組 document.links[0].target
document.cookie //返回或設置cookie
document.domain //返回或設置文檔默認域名
document.lastModified //文檔最後一次修改日期
document.location //相當於window.location
document.referrer //返回來源頁面
document.title //返回或設置文檔標題
document.URL //返回或設置文檔url
5)with
with(document){
write(cookie); //相當於 document.write(document.cookie)
write("abc");
write(URL);
}
.事件對象
function sayHello()
{
alert("hello");
}
doucment.onclick = sayHello; //把函數賦對對象事件
document.getElementById('img1').onclick = sayHello;
.attachEvent和addEventListener 方法綁定事件處理程序, 可以讓一個事件有多個處理程序
element.addEventListener("enventName", 函數名, boolean ); //boolean: true表示事件處理模式是使用捕獲模式, false 表示否
function func()
{
//...
}
if(element.addEventListener){
element.addEventListener("onclick", func, false);
}
else
{
element.attachEvent("click", func, false);
}
.window.event對象 window可以省略，即使用event
它是處理按鍵、光標位置、觸發事件的對象
IE:
event對象是個全局對象
function imgClick()
{
alert(event.srcElement.src);
}
<img src="a.jpg" οnclick="imgClick" > //這樣當點擊圖片時，就會產生event的相應屬性或方法
Mozilla:
event對象必須被顯式傳遞給事件處理程序, 因爲它是當前局部對象而不是全局對像
function imgClick(evt)
{
alert(evt.target.src);
}
<img src="a.jpg" οnclick="imgClick(event)" > //這樣當點擊圖片時，就會產生event的相應屬性或方法
.event對象的屬性
IE Firefox
srcElement target 觸發事件的元素
type type 事件類型
offsetX 無 元素的x座標
offsetY 無 元素的y座標
x layerX 定位元素的x座標
y layerY 定位元素的y座標
clientX clientX 窗口的x座標
clientY clientY 窗口的y座標
screenX screenX 屏幕的x座標
screenY screenY 屏幕的y座標
button button 鼠標按鍵
keyCode keyCode 鍵盤按鍵
shiftKey shiftKey
altKey altKey
ctrlKey ctrlKey
fromElement relatedTarget 上一級元素
toElement relatedTarget 下一級元素
<input type="text" size="20" name="title" id="title" value="" />
<script language="JavaScript">
//一定要放到<input的下方，否則找不到title對象
var obj=document.getElementById("title");
obj.οnkeydοwn=function(evt)
{
evt=evt?evt:window.event;
if(13 == evt.keyCode || evt.ctlKey && 13 == evt.keyCode ) //如果是Enter或Ctrl+Enter
{
alert("ok");
}
}
</script>
.表單form
var frm=document.forms["submitform"];
var frm=document.forms[0];
frm.action
frm.elements
frm.encoding
frm.length
frm.method
frm.name
frm.target
frm.submit();
frm.reset();
onsubmit();
onreset();
frm.elements[0].type //text submit password select-one select-multiple
frm.elements[0].disabled = true; //false 創建只讀表單域
.<input
<input type="text" readonly />
<input type="text" οnfοcus="this.focus()" οnclick="alert(this.defaultValue)" value="xxxxxxx" />
<input type="text" οnblur="this.blur()" />
οnclick="func()"
οnkeydοwn="func()"
onkeyup()="func()"
onkeypress()="func()"
onmouseover()="func()"
onmouseout()="func()"
onmousedown()="func()"
onmouseup()="func()"
onchange()="func()"
.使用select選中文本
<input type="text" οnfοcus="this.select()" οnselect="alert('select')" value="xxxxxxx" />
.<select
objSelect.selectedIndex 當前選取項的索引
objSelect.options 選項數組
for(var i=0; i<objSelect.options.length; i++)
if(objSelect.options.selected)
{
alert(objSelect.options.value+objSelect.options.text);
//取消選中
objSelect.options.selected = false;
}
.在選項尾部添加一個option
objSelect.options[objSelect.length] = new Option("val", "text");
.替換選項n的值
objSelect.options[n] = new Option("val", "text");
<option value="val">text</option>
.刪除一個option
objSelect.options=null;
.清空一個select
<select name='slt' id='slt' >
<option value="0" >0</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
</select>
//正確清空方法
//每一循環都刪除第一個元素，當循環結束時，元素也刪除完了
//類似於棧的pop()即每次pop出棧頂即第一個元素
for(var i=0; i<len; i++)
objSelect.options[0]=null;
/*
//錯誤方法1: 將留下options[1]和options[3]
for(var i=0; i<len; i++)~~
objSelect.options=null;
//錯誤方法2: 將留下options[3]和options[4]
for(var i=0; i<objSelect.length; i++)
objSelect.options[0]=null;
*/
