JavaScript入門知識梳理

前言


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();            //對象.方法名


 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章