JavaScript入門篇--請做好準備

乘風而歸發表於2017-09-21
JavaScript

1.為什麼學習JavaScript

一、你知道，為什麼JavaScript非常值得我們學習嗎？
1. 所有主流瀏覽器都支援JavaScript。
2. 目前，全世界大部分網頁都使用JavaScript。
3. 它可以讓網頁呈現各種動態效果。
4. 做為一個Web開發師，如果你想提供漂亮的網頁、令使用者滿意的上網體驗，JavaScript是必不可少的工具。

二、易學性
1.學習環境無外不在，只要有文字編輯器，就能編寫JavaScript程式。
2.我們可以用簡單命令，完成一些基本操作。

三、從哪開始學習呢？
學習JavaScript的起點就是處理網頁，所以我們先學習基礎語法和如何使用DOM進行簡單操作。

2.新朋友你在哪裡（如何插入JS）

我們來看看如何寫入JS程式碼？你只需一步操作,使用<script>標籤在HTML網頁中插入JavaScript程式碼。注意， <script>標籤要成對出現，並把JavaScript程式碼寫在<script></script>之間。
這裡寫圖片描述

<script type="text/javascript">表示在<script></script>之間的是文字型別(text),javascript是為了告訴瀏覽器裡面的文字是屬於JavaScript語言。

3.我也可以獨立（引用JS外部檔案）

通過前面知識學習，我們知道使用<script>標籤在HTML檔案中新增JavaScript程式碼，如圖:
這裡寫圖片描述

JavaScript程式碼只能寫在HTML檔案中嗎?當然不是，我們可以把HTML檔案和JS程式碼分開,並單獨建立一個JavaScript檔案(簡稱JS檔案),其檔案字尾通常為.js，然後將JS程式碼直接寫在JS檔案中。
這裡寫圖片描述

注意:在JS檔案中，不需要<script>標籤,直接編寫JavaScript程式碼就可以了。

JS檔案不能直接執行，需嵌入到HTML檔案中執行，我們需在HTML中新增如下程式碼，就可將JS檔案嵌入HTML檔案中。
<script src="script.js"></script>
這裡寫圖片描述

4.找到你的位置（JS在頁面中的位置）

我們可以將JavaScript程式碼放在html檔案中任何位置，但是我們一般放在網頁的head或者body部分。

放在<head>部分
最常用的方式是在頁面中head部分放置<script>元素，瀏覽器解析head部分就會執行這個程式碼，然後才解析頁面的其餘部分。

放在<body>部分
JavaScript程式碼在網頁讀取到該語句的時候就會執行。

這裡寫圖片描述

注意: javascript作為一種指令碼語言可以放在html頁面中任何位置，但是瀏覽器解釋html時是按先後順序的，所以前面的script就先被執行。比如進行頁面顯示初始化的js必須放在head裡面，因為初始化都要求提前進行（如給頁面body設定css等）；而如果是通過事件呼叫執行的function那麼對位置沒什麼要求的。

5.JavaScript-認識語句和符號

JavaScript語句是發給瀏覽器的命令。這些命令的作用是告訴瀏覽器要做的事情。

每一句JavaScript程式碼格式: 語句;

先來看看下面程式碼

<script type="text/javascript">
   alert("hello!");
</script>

例子中的alert(“hello!”);就是一個JavaScript語句。

一行的結束就被認定為語句的結束，通常在結尾加上一個分號”;”來表示語句的結束。

看看下面這段程式碼,有三條語句，每句結束後都有”;”，按順序執行語句。

<script type="text/javascript">
   document.write("I");
   document.write("love");
   document.write("JavaScript");
</script>

注意:
1. “;”分號要在英文狀態下輸入，同樣，JS中的程式碼和符號都要在英文狀態下輸入。
2. 雖然分號“;”也可以不寫，但我們要養成程式設計的好習慣，記得在語句末尾寫上分號。

6.JavaScript-註釋很重要

註釋的作用是提高程式碼的可讀性，幫助自己和別人閱讀和理解你所編寫的JavaScript程式碼，註釋的內容不會在網頁中顯示。註釋可分為單行註釋與多行註釋兩種。

我們為了方便閱讀，註釋內容一般放到需要解釋語句的結尾處或周圍。

單行註釋，在註釋內容前加符號 “//”。

<script type="text/javascript">
  document.write("單行註釋使用'//'");  // 我是註釋，該語句功能在網頁中輸出內容
</script>

多行註釋以"/*"開始，以"*/"結束。

<script type="text/javascript">
   document.write("多行註釋使用/*註釋內容*/");
   /*
    多行註釋
    養成書寫註釋的良好習慣
   */
</script>

7.JavaScript-什麼是變數

什麼是變數? 從字面上看，變數是可變的量；從程式設計角度講，變數是用於儲存某種/某些數值的儲存器。我們可以把變數看做一個盒子，為了區分盒子，可以用BOX1,BOX2等名稱代表不同盒子，BOX1就是盒子的名字（也就是變數的名字）。
這裡寫圖片描述
定義變數使用關鍵字var,語法如下：

var 變數名

變數名可以任意取名，但要遵循命名規則:

  • 1.變數必須使用字母、下劃線(_)或者美元符($)開始。
  • 2.然後可以使用任意多個英文字母、數字、下劃線(_)或者美元符($)組成。
  • 3.不能使用JavaScript關鍵詞與JavaScript保留字。

變數要先宣告再賦值，如下：

var mychar;
mychar="javascript";
var mynum = 6;

變數可以重複賦值，如下：

var mychar;
mychar=”javascript”;
mychar=”hello”;

注意:
1. 在JS中區分大小寫，如變數mychar與myChar是不一樣的，表示是兩個變數。
2. 變數雖然也可以不宣告，直接使用，但不規範，需要先宣告，後使用。

8.JavaScript-判斷語句（if…else）

if…else語句是在指定的條件成立時執行程式碼，在條件不成立時執行else後的程式碼。

語法:

if(條件)
{ 條件成立時執行的程式碼 }
else
{ 條件不成立時執行的程式碼 }
假設我們通過年齡來判斷是否為成年人，如年齡大於等於18歲，是成年人，否則不是成年人。程式碼表示如下:

script type="text/javascript">
   var myage = 18;
   if(myage>=18)  //myage>=18是判斷條件
   { document.write("你是成年人。");}
   else  //否則年齡小於18
   { document.write("未滿18歲，你不是成年人。");}
</script>

9.JavaScript-什麼是函式

函式是完成某個特定功能的一組語句。如沒有函式，完成任務可能需要五行、十行、甚至更多的程式碼。這時我們就可以把完成特定功能的程式碼塊放到一個函式裡，直接呼叫這個函式，就省重複輸入大量程式碼的麻煩。

如何定義一個函式呢？基本語法如下:

function 函式名()
{
     函式程式碼;
}

說明:

  1. function定義函式的關鍵字。

  2. “函式名”你為函式取的名字。

  3. “函式程式碼”替換為完成特定功能的程式碼。

我們來編寫一個實現兩數相加的簡單函式,並給函式起個有意義的名字：“add2”，程式碼如下：

function add2(){
   var sum = 3 + 2;
   alert(sum);
}

函式呼叫:

函式定義好後，是不能自動執行的，所以需呼叫它,只需直接在需要的位置寫函式就ok了,程式碼如下:
這裡寫圖片描述

相關文章