前言
JavaScript是面向Web的編程語言。絕大多數現代網站都使用了JavaScript,並且所有的現代Web瀏覽器——基於系統、遊戲機、平板電腦和智能手機的瀏覽器均包含了JavaScript解釋器。JavaScript是前端開發必須掌握的三種技術之一,分別是描述網頁內容的HTML、描述網頁樣式的CSS以及描述網頁行爲的JavasScript。
JavaScript除了語法看起來和Java相似以外,JavaScript和Java是兩種完全不同的編程語言。JavaScript早已超出了其"腳本語言"本身的範疇,而成爲一種集健壯性、高效性和通用性爲一體的編程語言。
插入JS代碼
引用JS外部文件
寫入JS代碼需要使用<script>標籤在HTML網頁中插入JavaScript代碼,<script>標籤要成對出現,並把JavaScript代碼寫在<script></script>之間。
<script type="text/javascript"> 表示在<script></script>之間的是文本類型(text),javascript是爲了告訴瀏覽器裏面的文本是屬於JavaScript語言。
我們可以把HTML文件和JS代碼分開,並單獨創建一個JavaScript文件,其文件後綴通常爲.js,然後將JS代碼直接寫在JS文件中。在JS文件中,不需要<script>標籤,直接編寫JavaScript代碼就可以了。JS文件不能直接運行,需嵌入到HTML文件中執行,我們需要在HTML中添加代碼(<script src="script.js"></script>)就可以將JS文件嵌入到HTML文件中。
<html>
<head>
<script src="script.js"></script>
</head>
<body></body>
</html>
alert("JS代碼"); //script.js文件
JS在頁面中的位置
我們可以將JavaScript代碼放在HTML文件中任何位置,但是我們一般放在網頁的head或者body部分。
最常用的方式是在頁面中head部分放置<script>元素,瀏覽器解析head部分就會執行這個代碼,然後才解析頁面的其餘部分;當JavaScript代碼放在<body>部分的時候,JavaScript代碼在網頁讀取到該語句的時候會執行。
<html>
<head>
<script type="text/JavaScript"> //js代碼,內嵌式方式寫入
</script>
<script src="code.js"></script> //js代碼與html分離式寫法
</head>
<body>
<script type="text/JavaScript">
//js代碼,內嵌式方式寫入
</script>
</body>
</html>
JavaScript作爲一種腳本語言可以放在html頁面中任何位置,但是瀏覽器解釋html時實現按照先後順序,所以前面的script就先被執行,後面的script就後被執行。比如進行頁面顯示初始化的js必須放在head裏面,因爲初始化都要求提前進行(如給頁面body設置css等);而如果是通過事件調用執行的function那麼對位置沒什麼要求。
語句和符號
JavaScript語句是發給瀏覽器的命令。這些命令的作用是告訴瀏覽器要做的事情。每一句JavaScript的代碼格式:
語句;
一行結束就被認定爲語句的結束,通常在結尾加上一個分號";"來標識語句的結束。
注意:";"分號要在英文狀態下輸入,同樣,JS中的代碼和符號都要在英文狀態下輸入;雖然分號";"也可以不寫,但爲了養成良好的編碼習慣和爲了代碼規範,還是要記得在語句末尾寫上分號。
<script type="text/javascript">
alert("hello!");
</script>
註釋
註釋的作用是提高代碼的可讀性,幫助自己和別人閱讀和理解你所編寫的代碼,註釋的內容不會在網頁中顯示。註釋可分爲單行註釋和多行註釋。爲了方便閱讀,註釋內容一般放到需要解釋語句的結尾處或周圍。
單行註釋,在註釋內容前加符號"//"。
多行註釋"/*"開始,以"*/"結束。
<script type="text/javascript">
document.write("單行註釋使用'//' "); //單行註釋
document.write("多行註釋使用/*註釋內容*/");
/*
多行註釋
*/
</script>
變量
變量是用於存儲某些數值的存儲器。我們可以把變量看作一個盒子,爲了區分盒子,可以用BOX1、BOX2等名稱代表不同盒子,BOX1就是盒子的名字(也是變量的名字)。
定義變量使用關鍵字var
var 變量名;
var name; //聲明一個變量name
var name1,name2; //聲明多個變量name1,name2
變量賦值
我們使用"="給變量存儲內容
//聲明變量name並賦值
var name = "Jackson"
//或者聲明和賦值分開來寫
var name;
name = "Jackson";
表達式
表達式是指具有一定的值,用操作符把常數和變量連接起來的代數式。一個表達式可以包含常數和變量
變量可以任意取名,但需要遵守命名規範:
變量必須使用字母、下劃線(_)或者美元符($)開始;
可以使用任意多個字母、數字、下劃線或者美元符組成;
不能使用JavaScript關鍵詞與JavaScript保留字。
注意:在JS中區分大小寫;變量雖然可以不聲明直接使用,但是不符合規範,規範寫法需要先聲明後使用。
數組
一個變量只能存儲一個內容。一個數組變量可以存放多個數據。數組是一個值的集合,每個值都有一個索引號,從0開始,每個索引都有一個相應的值,根據需要添加更多的值。
創建的新數組在沒有賦值之前都是空數組,沒有值,輸出顯示undefined;雖然創建數組時指定了數組長度,但實際上數組都是變長的,也就是說即使指定了固定長度,數組仍然可以將元素存儲在規定長度以外的範圍。
length屬性:length屬性表示數組的長度,即數組中元素的個數。語法(array.length;).
因爲數組的索引總是由0開始的,所以一個數的上下限分別是0-(length-1)。如果數組的長度是5,數組的上下限分貝是0和4。
/*創建一個新數組,存儲在array變量中;
var array:保存數組的變量;new Array();
創建一個新的空數組;*/
var array = new Arrya();
//創建數組同時賦值,數組存儲的數據可以是任何類型
var array = new Array(10,20,30,40,50);
判斷語句(if...else)
當if內部條件成立時候執行if括號中的代碼,帶條件不成立的時候執行else中的代碼。
<script>
var i = 1024;
if(i>10){
//滿足i>10這個條件後運行的代碼塊
}else{
//當不滿足i>10這個條件後,運行這部分代碼塊內容
}
</script>
函數
函數是完成某個特定功能的一組語句。我們可以把完成特定功能的代碼塊放到一個函數裏,直接調用這個函數。這樣省去了編寫重複代碼的問題。
定義函數的方法:
function 函數名(){
函數代碼;
}
function是定義函數的關鍵字;"函數名"是我們爲函數取的名字;"函數代碼"替換爲完成特定功能的代碼。
函數定義好後是不會自動執行的,需要直接在需要的位置寫函數就OK了。
常用屬性方法
document.write()可用於直接向HTML輸出流寫內容,直接在網頁中輸出內容。輸出內容有幾種方式來實現,第一種是輸出內容用括號括起,直接輸出括號內的內容;第二種是通過變量輸出內容;第三種是輸出多項內容,內容之間用加號連接;第四種輸出HTML標籤,並起作用,標籤使用括號括起。
<script type="text/javascript">
document.write("輸出內容用括號括起,直接輸出括號中內容。");
var str = "通過變量輸出內容";
document.write(str);
var mstr = "輸出多項內容";
document.write(mstr + "內容用加號連接");
var hstr = "輸出HTML標籤,並起作用,使用括號括起"
document.write(hstr + "<br>");
document.write("JavaScript!")
</script>
alert()可以實現我們訪問網站時候突然彈出小窗口的效果,上面寫着一段提示消息文字的效果。如果你不點擊確定,就不能對網頁做任何操作。
語法:alert(字符串或變量);
結果:按順序彈出消息框。
alert彈出消息對話框,包括一個確定按鈕;在點擊對話框"確定"按鈕前,不能進行任何其他操作;消息對話框通常可以用於調試程序;alert輸出內容,可以是字符串或變量。
<script type="text/javascript">
var num = 30;
alert("直接輸入字符串");
alert(num);
</script>
confirm消息對話框通常用於允許用戶做選擇的動作,包括一個確定按鈕一個取消按鈕。
語法:confirm(str); //str是提示文本,返回值是布爾值
注意:通過返回值可以判斷用戶點擊了什麼按鈕;消息對話框是排它的,即用戶在點擊對話框按鈕前,不能進行任何其他操作。
<script type="text/javascript">
var msg = confirm("這是個confirm消息對話框嗎?");
if(msg == true){
document.write("嗯,這的確是個confirm消息對話框");
}else{
document.write("再想想~好好理解理解");
}
</script>
prompt消息對話框,通常用於詢問一些需要與用戶交互的信息。彈出消息對話框包含一個確定按鈕、取消按鈕與一個文本輸入框。
語法:prompt(str1,str2); //str1:要顯示在消息對話框中的文本,不可修改;str2:文本框中的內容,可以修改
返回值:點擊確定按鈕,文本框中的內容將作爲函數返回值;點擊取消按鈕,返回null。
var name = prompt("Please input your name:");
if(name != null){
alert("hello "+ name);
}else{
alert("hello ,what's your name?");
}
window.open()方法可以查找一個已經存在或者新建的瀏覽器窗口。
語法:window.open([URL],[窗口名稱],[參數字符串]);
URL:可選參數,在窗口中要顯示網頁的地址或路徑。如果省略這個參數,或者它的值是空字符串,那麼窗口就不顯示任何文檔;
窗口名稱:可選參數,被打開窗口的名稱,該名稱由字母、數字和下劃線字符組成;"_top"、"_blank"、"_self"是具有特殊意義的名稱"_top"框架網頁中在上部窗口中顯示目標網頁,"_blank"在新窗口顯示目標網頁、"_self"在當前窗口顯示目標網頁;相同name的窗口只能創建一個,要想創建多個窗口則name不能相同;name不能包含有空格。
參數字符串:可選參數,設置窗口參數,各參數用逗號隔開。
運行結果要考慮瀏覽器兼容性的問題。
window.close()關閉窗口
用法:window.close();或者<窗口對象>.close();前者是關閉本窗口,後者是關閉指定窗口。
<script type="text/javascript">
var w = window.open('http://www.baidu.com');
//將新開的窗口對象,存儲在變量w中
w.close();
</script>
對象
JavaScript中的所有事物都是對象,反應該對象某些特定的性質是對象的屬性,能夠在對象上執行的動作是對象的方法。
訪問對象屬性的語法:objectName.propertName; //對象.屬性名
訪問對象的方法:objectName.methodName(); //對象.方法名