一、JavaScript入門篇

時間 2020-06-09

標籤 javascript 入門欄目 JavaScript 简体版

原文原文鏈接

閱讀目錄（原創-萌小Q）javascript

1、你知道，爲何JavaScript很是值得咱們學習嗎？
2、易學性
3、從哪開始學習呢？
4、如何插入JS
5、引用JS外部文件
6、JS在頁面中的位置
7、認識語句和符號
8、註釋很重要
9、什麼是變量
10、判斷語句
11、什麼是函數

1、你知道，爲何JavaScript很是值得咱們學習嗎？

1. 全部主流瀏覽器都支持JavaScript。css

2. 目前，全世界大部分網頁都使用JavaScript。html

3. 它可讓網頁呈現各類動態效果。java

4. 作爲一個Web開發師，若是你想提供漂亮的網頁、令用戶滿意的上網體驗，JavaScript是必不可少的工具。編程

2、易學性

1.學習環境無外不在，只要有文本編輯器，就能編寫JavaScript程序。瀏覽器

2.咱們能夠用簡單命令，完成一些基本操做。編輯器

3、從哪開始學習呢？

學習JavaScript的起點就是處理網頁，因此咱們先學習基礎語法和如何使用DOM進行簡單操做。函數

代碼示例1：工具

1 <!DOCTYPE HTML>
 2 <html> 
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>熱身</title>
 6 </head>
 7 <body>
 8   <p id="p1">我是第一段文字</p>
 9   <p id="p2">我是第二段文字</p>
10   
11   <script type="text/javascript">
12     document.write("hello");
13     document.getElementById("p1").style.color="blue";
14     
15   </script>
16 </body>
17 </html>

4、如何插入JS

咱們來看看如何寫入JS代碼？你只需一步操做,使用<script>標籤在HTML網頁中插入JavaScript代碼。注意， <script>標籤要成對出現，並把JavaScript代碼寫在<script></script>之間。學習

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

5、引用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>

6、JS在頁面中的位置

咱們能夠將JavaScript代碼放在html文件中任何位置，可是咱們通常放在網頁的head或者body部分。

放在<head>部分

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

放在<body>部分

JavaScript代碼在網頁讀取到該語句的時候就會執行。

注意: javascript做爲一種腳本語言能夠放在html頁面中任何位置，可是瀏覽器解釋html時是按前後順序的，因此前面的script就先被執行。好比進行頁面顯示初始化的js必須放在head裏面，由於初始化都要求提早進行（如給頁面body設置css等）；而若是是經過事件調用執行的function那麼對位置沒什麼要求的。

示例代碼2：

1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>JS代碼的位置</title>
 6 <script type="text/javascript">
 7   document.write("i love");
 8 </script>
 9 </head>
10 <body>
11 <script type="text/javascript">
12  document.write("you");
13 </script>
14 </body>
15 </html>

運行結果：

i love you

7、認識語句和符號

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. 雖然分號「;」也能夠不寫，但咱們要養成編程的好習慣，記得在語句末尾寫上分號。

8、註釋很重要

註釋的做用是提升代碼的可讀性，幫助本身和別人閱讀和理解你所編寫的JavaScript代碼，註釋的內容不會在網頁中顯示。註釋可分爲單行註釋與多行註釋兩種。

咱們爲了方便閱讀，註釋內容通常放到須要解釋語句的結尾處或周圍。

單行註釋，在註釋內容前加符號「//」。

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

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

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

9、什麼是變量

什麼是變量? 從字面上看，變量是可變的量；從編程角度講，變量是用於存儲某種/某些數值的存儲器。咱們能夠把變量看作一個盒子，爲了區分盒子，能夠用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. 變量雖然也能夠不聲明，直接使用，但不規範，須要先聲明，後使用。

10、判斷語句

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>

1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>if...else</title>
 6   <script type="text/javascript">
 7     var score =80; //score變量存儲成績，初值爲80
 8      if(score>=60) 
 9     {
10      document.write("很棒，成績及格了。");
11     }
12   else
13     {
14      document.write("加油，成績不及格。");
15     }
16   </script>
17 </head>
18 <body>
19 </body>
20 </html>

11、什麼是函數

函數是完成某個特定功能的一組語句。如沒有函數，完成任務可能須要五行、十行、甚至更多的代碼。這時咱們就能夠把完成特定功能的代碼塊放到一個函數裏，直接調用這個函數，就省重複輸入大量代碼的麻煩。

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

function 函數名()
{
     函數代碼;
}

說明:

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

2. "函數名"你爲函數取的名字。

3. "函數代碼"替換爲完成特定功能的代碼。

咱們來編寫一個實現兩數相加的簡單函數,並給函數起個有意義的名字：「add2」，代碼以下：

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

函數調用:

函數定義好後，是不能自動執行的，因此需調用它,只需直接在須要的位置寫函數就ok了,代碼以下:

1. JavaScript入門篇整理(一）
2. JavaScript基礎入門篇（一）
3. JavaScript入門篇
4. javascript入門篇
5. JavaScript(JS)入門篇
6. JavaScript 基礎知識 - 入門篇(一)
7. JavaScript 學習筆記一（入門篇）
8. JavaScript入門(一)
9. JavaScript入門（一）
10. 《JavaScript入門篇》摘要
更多相關文章...
• Memcached入門教程 - NoSQL教程
• JavaScript 指南 - 網站建設指南
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。