關於JavaScript的講法，我們採取的方式與HTML&CSS類似，先在課程中帶大家，以「實現頁面小功能」為目的，一步一步的進行實現，並在期間講解相關知識點，在其中一些相關的「細節」知識點我們暫時先忽略掉，先完成主幹的學習。在一個小階段的主幹知識學習完成之後，我們再回頭詳細分析「細節」。這樣更有利於大家的吸收和理解，不容易陷入到一些不必要的問題當中。
本文內容概要：1 回顧JavaScript的基本組成2 JavaScript引入方式3 JavaScript基本調試4 JavaScript常見調試方法5 變量（標識符）6 JavaScript基本數據類型7 課程小結8 課後練習1 回顧JavaScript的基本組成JavaScript = ECMAScript + DOM + BOM；今天我們要講解的就是ECMAScript中的部分基礎語法。
之前學堂的小編-利利給大家分享了如何才能把JavaScript學好的文章，該文章內容涉及了JavaScript的基本知識以及JavaScript學習方法。如果想了解具體的JavaScript基礎知識，可以回復「學JS」到「HTML5學堂」公眾號。
JS被稱為行為代碼，我們希望在HTML（結構代碼）當中書寫行為代碼，必然不能夠直接書寫，需要採用幾種不同的方式，將JS代碼「引」到HTML文件中。
JavaScript有標籤內聯、內部書寫、外部引入這三種引入方式，接下來我們具體來學習一下如何使用這三種引入方式。
2.1 標籤內聯既然是標籤內書寫，肯定是在HTML標籤上書寫JavaScript了，具體來看下面的代碼實例
代碼實例：
<div onclick="alert('利利、堡堡');">HTML5學堂創始人~</div>
代碼分析：
滑鼠點擊div標籤的時候，會出現彈窗並且裡面顯示的內容是「利利、堡堡」；
可以把標籤裡的onclick進行拆開理解，on是「在什麼上」的意思，click是點擊的意思，結合起來的意思是在標籤上進行點擊；onclick中引號的內容就是JavaScript代碼；整個代碼結合起來意思是在標籤上進行點擊的時候，會運行onclick中的JavaScript代碼；（不單單只有onclick還有onmousedown等，這邊只是幫助大家理解標籤內聯書寫，以後會進行詳細介紹）
缺點：這種引入方式的代碼可閱讀性差，冗餘度高，不利於後期維護，因此實際項目開發中基本上用不到。
2.2 內部書寫內部書寫的意思是JavaScript代碼書寫在網頁中（不是標籤裡面哦），可以任意放置在頁面的某個位置當中。通常來說，JavaScript代碼要放置在頁面頭部或者HTML標籤後面(</body>標籤之前)，具體需要根據頁面功能需求而定。
代碼實例：
<script type="text/javascript">
// 這邊書寫JavaScript代碼
</script>
代碼分析：
在頁面中書寫JS代碼時，需要用到script標籤，JS代碼書寫在script標籤之間；用type屬性來識別script標籤之間的內容，我們想在script標籤裡面書寫JS，需設置type屬性值為text/javascript。
優點：
速度快，沒有伺服器請求壓力；相對於外部引入單頁代碼量少；
缺點：
不易改版與維護；代碼較亂不易前後臺溝通；
外部引入就是把JavaScript代碼放入到文件當中，通過script標籤把文件引入到網頁當中；
代碼實例：
<script type="text/javascript" src="js/h5course.js" charset="utf-8"></script>
代碼分析：
1 script標籤的src屬性填寫的值是外部JS文件的URL路徑；charset屬性聲明外部JS文件中使用的字符集編碼，在項目開發中，charset屬性可以省略掉，如果你想要更規範、嚴格一點，就不要省略了，特別是面試的時候哦！
2 外部引入的script標籤之間不允許有其它內容。
3 JavaScript文件位置很重要，網頁自上而下進行代碼的執行，如果將JavaScript放置在head當中，又希望不發生錯誤，則需要使用到window.onload事件（後面的文章當中會講解到事件相關的知識）或者將JavaScript文件放置在所有標籤之後，能夠保證加載完成html結構之後再執行JavaScript內容。
4 引入的JS文件當中，不要出現<script></script>。
優點：
一個JS文件可控制多個頁面；易改版、便於維護；減少代碼量、代碼簡潔規範易於分工協作；有效利用緩存機制；
缺點：
相對於單頁有垃圾代碼；外部引入中的href屬性會給伺服器造成請求的壓力。
請注意其中script的存在位置（包含兩個外部引入一個內部書寫）
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5學堂 - H5course</title>
<script src="../js/common.js"></script>
</head>
<body>
<div></div>
<script>
console.log('HTML5學堂 demo');
</script>
<script src="../js/zepto.js"></script>
</body>
</html>
新手在書寫JavaScript時，時常會出現一些JS中的問題，因此了解這些問題以及掌握如何調試，如何找到自己的JS錯誤所在，使我們首先要了解的。
3.1 調試工具我們可以使用谷歌、火狐等各個主流瀏覽器的控制臺。最推薦谷歌瀏覽器。按下F12鍵即可開啟控制臺（關閉的話就是再按下一次F12鍵），在控制臺中有Console一項，該項當中即為JS的調試位置。
3.2 新手常見錯誤Unexpected token ILLEGAL 表示：基本語法錯誤
err_File_not_found 表示：文件路徑錯誤
4 常見調試方法當頁面出現了問題，如何定位錯誤呢？在此介紹三種方法：。
4.1 調試方法 - 注釋法單行注釋：單行注釋使用雙// ，雙斜槓與注釋內容之間有空格（書寫規範）
多行注釋：/* 多行注釋 */
注釋使用範圍：
針對文件/函數的功能以及用法進行描述的時候，使用多行（塊）注釋（Sublime快捷鍵：Ctrl+shift+/）,其他情況下均使用單行注釋（Sublime快捷鍵：Ctrl+/）；需要說明一下注釋調試，在利用注釋調試代碼的時候，如果需要注釋大量的代碼推薦使用塊注釋，否則推薦使用單行注釋，最終還得視情況而定；
代碼實例：
<script type="text/javascript">
// 聲明變量
var html5 = 'HTML5學堂';
/*
* [sum 實現兩數求和]
* @param {數字} a [第一個數]
* @param {數字} b [第二個數]
* @return {數字} [求和的返回值]
* @demo sum(100, 200)
* @date 2016.04.26
* @author 劉國利、陳能堡
*/
function sum(a, b) {
return a + b;
}
</script>
HTML5學堂小編-堡堡特別提醒：不管是平常練習，還是項目開發，注釋不僅僅能體現出你的代碼規範，而且還能提高代碼的可讀性哦~
4.2 調試方法 - 瀏覽器命令-彈窗想了解JS代碼中的運行結果，可以通過彈窗的方式把信息給顯示出來。具體來看看下面的三種彈窗：
警告彈窗：alert（）
對話彈框：prompt（）
確認彈窗：confirm（）
代碼實例：
<script type="text/javascript">
/*
* [sum 實現兩數求和]
* @param {數字} a [第一個數]
* @param {數字} b [第二個數]
* @return {數字} [求和的返回值]
* @demo sum(100, 200)
* @date 2016.04.26
* @author 劉國利、陳能堡
*/
function sum(a, b) {
return a + b;
}
// 利用彈窗輸出求和的結果
alert(sum(10, 20));
// 確認彈窗
confirm("確認");
// 對話彈窗
prompt("夢幻雪冰", "陳能堡");
</script>
輸出結果：
Tips：彈窗在不同的瀏覽器當中顯示出來的樣式都不相同哦；利用彈窗調試JS代碼不是很推薦，主要在於一旦程序出現錯誤，有可能會產生「無盡」的彈窗。另外，當需要多次查看一個變量的數值時，大量的彈窗也會影響我們的調試速度。
4.3 調試方法 - 文檔方法文檔命令：document.write("在文檔中列印信息"); document.writeln("在文檔中列印信息");
write與writeln的區別：write（）與writeln（）方法類似，只是writeln每個表達式之後多寫一個換行符(\n)
4.4 調試命令 - 控制臺命令console.log('此處填寫控制臺命令'); 最為常用的調試命令，IE8+支持
console.time(name);與console.timeEnd(name); 用於測算兩句代碼之間的內容運行時間，兩個方法中的「name」需要保持一致，採用字符串格式
代碼實例：
<script type="text/javascript">
// 文檔輸出命令——>查看頁面內容
document.write("HTML5高級講師<br>");
document.write("陳能堡");
// 控制臺輸出命令——>按F12鍵，查看瀏覽器控制臺
console.log('HTML5主管');
console.log('劉國利');
</script>
代碼分析：
上面介紹的這兩種調試，都能夠方便的輸出JS運行時的一些信息，但是，文檔命令是直接在頁面中輸出信息，換句話說它會直接影響到頁面的內容（如果頁面有內容的話就會被替換掉了），所以這種調試方式我們也是不推薦大家使用；控制臺命令是不是感覺非常方便了，調試起來比彈窗舒服多了，而且也不會影響到頁面裡面的內容，這種調試(控制臺命令)是小編極力推薦的一種調試方法!
5 變量（標識符）5.1 什麼是變量，什麼是常量？50x+y=99這個數學表達式當中，哪些是變量，哪些是常量呢？50和99是常量（固定數值），x和y是變量。那麼JavaScript如何聲明一個變量呢？接著往下看吧~
5.2 如何聲明變量JavaScript中定義變量需要用到var操作符(JS聲明變量的命令，告訴系統 ——> 要聲明變量了)；
var 變量名;
var 變量名 = 值;
代碼實例：
<script type="text/javascript">
// 聲明變量
var blog = 'HTML5學堂網';
</script>
Tips：JavaScript語言與其它語言不太一樣，聲明變量的時候不需要明確變量的數據類型，因為JavaScript的變量為弱變量，可以用來保存任何類型的數據。
5.3 如何理解變量與函數通過var或function定義的變量或函數，均可以理解為一個對象的屬性或方法（通常把變量理解為屬性，把函數理解為方法）
調用的方法1：對象.屬性; 對象.方法;
調用的方法2：對象['屬性名'];
在全局環境中定義的所有變量和方法，均隸屬於window
5.4 什麼是標識符在書寫JavaScript的時候，需要聲明一定的變量，那麼如何給變量起名字呢，就涉及到了標識符內容。
標識符，指的是變量、函數、屬性的名字，或者函數的參數。目前需知曉「變量屬於標識符」。
名字不能亂起，是需要有一定的規則的：
5.5 標識符命名規範標識符的命名規範
1 由數字、字母、美元符$、下劃線組成，不能以數字開頭；
例如h5course（合法），5course（不合法）
2 區分大小寫；
例如：H5course與h5course是有區別的
3 不能含有空格；
例如：h5 course（不合法）
4 不能用關鍵字和保留字命名；
例如：break、width、for等
標識符的命名推薦
1 小駝峰命名法（小駝峰，多個英文單詞組成一個標識符號名稱時，除了首個單詞之外，所有單詞首字母大寫）；
2 對於屬性 要求名詞開頭
3 對於方法 要求動詞開頭
4 常量全部大寫，多個單詞之間使用下劃線分隔；例如：MAX_VALUE = 100；
5 構造函數，大駝峰（所有單詞首字母大寫）
另外，標識符要有一定的「語義性」，方便代碼的書寫與閱讀
Undefined 值未定義（聲明了變量，但沒有給變量賦值）
Null 空對象
String 字符串（引號裡面的就是字符串，JS中單引號和雙引號的字符串都是一樣，如：var str = "HTML5學堂";與var str = 'HTML5學堂';等價）;
Number 數字（var age = 20;）
Boolean 布爾值（只有兩個值，真/true和假/false）
Obect 對象（在JavaScript使用{ }表示對象）
掌握調試的目的是為了能夠自我檢查錯誤，JS的引入方法讓我們能夠在HTML代碼中書寫JavaScript代碼。var是JS中「萬能」的聲明符，我們需要有變量，才能夠進行一系列操作，但是名字不能隨便起。在JavaScript中數據有六種不同類型~另外，對象.方法，對象.屬性這個部分的知識很重要哦~！
8 課後練習1 書寫出外部引入JS文件的代碼
2 完成下面圖中的效果（彈窗內容換行）
3 對於變量的合法命名是哪幾項？
A、var abc0; B、var a b c; C、var ABC; D、var a_b_c_; E、var 0abc;
4 變量與數據類型
聲明一個變量，值為一個字符串：「HTML5學堂」
聲明一個變量，不賦值，那麼它的值是什麼？
5 以下哪個單詞不屬於JavaScript保留字
A、with B、parent C、class D、void
如果對課後練習有疑問的可以在
☺↓ 文章底部評論區 ↓☺
留言
HTML5學堂小編 - 堡堡，耗時9h。歡迎大家溝通交流~
下周我們將繼續於周四為大家分享基礎知識方面的JS，下期的主要內容為：操作符以及操作符練習。
對於HTML5學堂「進化」後的每次分享之後的內容，都在這裡
對於想了解其他JS技術的工程師，可以點擊導航，查看我們此前書寫的JS技術文章
HTML5學堂
HTML5技術原創分享平臺
加入HTML5學堂
原來技術可以通俗易懂
每一天 都在為未來積蓄力量
覺得不錯，您再分享，分享朋友圈也是一種打賞
微信：HTML5_Course 微博：@前端技術分享網