請各位讀者添加一下作者的微信公眾號，以后有新的文章，將在微信公眾號直接推送給各位，非常感謝。
如果您覺得這篇文章還不錯，可以去H5專題中查看更多相關文章。
Javascript基礎
首先說聲抱歉。今日涉及內容難易度不統一，所以很多比較基礎的屬性直接通過思維導圖展示了。
同時需要注意，今日思維導圖中的內容和筆記中并不是一一對應的，請讀者自行對照查看。
對您造成的困擾，萬分抱歉。
這里寫圖片描述
今日課程預覽
1. JS 介紹
js(javascript)和java沒有任何關系，只不過名稱看起來有些相同;
這里可以了解一下網景公司的興衰史，同時也可以了解第一代瀏覽器的故事，大家可以了解一下“瀏覽器大戰”。
首先大家在學習前要明白幾點。
JavaScript 是腳本語言
JavaScript 是一種輕量級的編程語言。
JavaScript 是可插入 HTML 頁面的編程代碼。
JavaScript 插入 HTML 頁面后，可由所有的現代瀏覽器執行。
注意：
HTML 中的腳本必須位于 <script> 與 </script> 標簽之間。
腳本可被放置在 HTML 頁面的 <body> 和 <head> 部分中。
<script> 標簽
如需在 HTML 頁面中插入 JavaScript，請使用 <script> 標簽。
<script> 和 </script> 會告訴 JavaScript 在何處開始和結束。
JS的組成：（此處請參考思維導圖中內容）
- ECMAScript
- 文檔對象模型（DOM）
- 瀏覽器對象模型（BOM）
JS的特點：
- 弱類型的變量類型
- 事件驅動
- 跨平臺
那我們學習 JS 能夠做什么？
- 寫入 HTML 輸出
- 對事件作出反應
- 改變 HTML 內容
- 改變 HTML 圖像
- 改變 HTML 樣式
- 驗證輸入
2. JS事件和函數的使用
通常，我們需要在某個事件發生時執行代碼，比如當用戶點擊按鈕時。
如果我們把 JavaScript 代碼放入函數中，就可以在事件發生時調用該函數。
同時我們也可以將<head> 或 <body> 中的 JavaScript放在 HTML 文檔中，并且我們的放入的腳本是不限量的。
腳本可位于 HTML 的 <body> 或 <head> 部分中，或者同時存在于兩個部分中。
通常的做法是把函數放入 <head>部分中，或者放在頁面底部。
這樣就可以把它們安置到同一處位置，不會干擾頁面的內容。
注意：
提示：我們把 JavaScript 放到了頁面代碼的底部，這樣就可以確保在 <p> 元素創建之后再執行腳本。
可以把腳本保存到外部文件中。外部文件通常包含被多個網頁使用的代碼。
外部 JavaScript 文件的文件擴展名是 .js。
如需使用外部文件，請在 <script> 標簽的 "src" 屬性中設置該 .js 文件。
<script src="myScript.js"></script>
在 <head> 或 <body> 中引用腳本文件都是可以的。
實際運行效果與您在 <script> 標簽中編寫腳本完全一致。但是需要注意，外部腳本不能包含 <script> 標簽。
3. JS引入方式
3.1 頭部引入（內部）
<script type="text/javascript">
//內容部分
</script>
例如：
<script type="text/javascript">
//警告 alert()語句 添加一條警告
alert('網絡錯誤!');
</script>
顯示效果如下圖所示：
3.2 頭部引入js文件（外部）
首先,你需要創建一個目錄文件夾例如為js,然后再這個文件夾中創建一個一個后綴為.js的一個js文件，
例如叫做index.js;
index.js中：
alert("網絡錯誤！");
然后在index.html文件中引入外部的js文件來使用；
<!--第二種方式：引入js文件 外部引入 src是js文件的路徑-->
<script src="js/index.js" type="text/javascript">
</script>
顯示效果和第一種方式也是一樣：
4. js的變量、js的數據類型
對于接下來要學習的js的變量以及js的數據類型，對有C語言基礎的朋友們來說，是非常簡單的，非常相似！
變量的定義：變量相當于一個容器，是用來存儲數據的。
4.1 變量命名規范：
- 首字母不能是數字
- 首字母只能是 $ 或者下劃線
- 不能用中文
- 多個單詞使用駝峰命名法；從第二個單詞開始首字母大寫
- 要有語義 見名知義
- 不要使用關鍵字或者保留字，防止和系統重名
var a = 5;//number 數據類型
var b = 10;
var str = "15";//字符串類型（string）
alert(a+b);
alert(a+str);//如果一個number類型加上一個字符串類型，則拼接，結果515
var c = a + str;
alert(c); //+號的功能：1.數學運算 2.字符串連接
var d = a - str; //-號的功能：1.數學運算
alert(d);
總結：
變量：它是一個容器，都以var來定義變量，數據類型是由它的值來決定的，
例如：var a = 5,所以，變量a的數據類型是number；var b = "15",則b是字符串類（string）；
還有一種特殊的情況就是"+"號的作用：
+號的功能：1.數學運算 2.字符串連接；這就是為什么上面代碼中的alert(a+str);
警告的結果為515的原因，另外alert（）語句的作用只是為了驗證結果的，沒有什么實質性的意義；
4.2 布爾類型 bool
var bo1 = true;//布爾類型 結果true和false
//typeof()獲取變量的數據類型,(在不知道變量類型的情況下，也可以通過ypeof()獲取)
alert(typeof(bo1));
4.3 拓展 undefined類型
//如果我們不給某個變量設置值，則為undefined類型；
var color;
alert(typeof color);
4.4 if語句
//if語句
//判斷語句 == 判斷是否相等，
// > 大于
// < 小于
// >= 大于或者等于
// <= 小于或者等于
// != 不等于
// === 全等于;
var a = 5;//number 數據類型
var b = 10;
var c = "5";
if (a == b) {
alert("a等于b");
} else{
alert("a不等于b");
}
//== 只考慮值是否成立，不考慮類型，
//如果既要考慮值，還得考慮數據類型的話，就用 === 全等于
if (a == c) {
alert("a==c成立");
} else{
alert("a == c不成立");
}
注意：
在js當中，"==" 只考慮值是否成立，不考慮變量的數據類型，
如果既要考慮值，還要考慮數據類型的話，就用 "===" 全等于.
4.5 邏輯運算符
<!--
邏輯運算符
與 或 非；
與：and 運算符前后的左右條件都成立 &&；
或：or 運算符前后的條件有一個成立，則結果即為真 ||;
非：！ 對結果取反；
-->
var a = 5;//number 數據類型
var b = 10;
var c = "5";//字符串類型(string)
if (a < b && a == c) {
alert("成立");
}else{
alert("不成立");
}
if (a < b || a > c) {
alert("成立");
} else{
alert("不成立");
}
if (!(a > b)) {
alert("取反成立！");
} else{
alert("取反不成立！");
}
4.6 for 循環
for (var i = 0;i < 10;i++) {
//警告提示框
alert(i);
}
看提示框的提示次數，可知此循環的循環次數為10次；
這里C語言當中for循環當中已經應該非常熟悉了，此處不再多說。
4.7 JS 獲取對象
<body>
<!--在body當中，創建一個有序列表ol-->
<ol id="olist">
<li><span></span>我是li1</li>
<li><span></span>我是li2</li>
<li><span></span>我是li3</li>
<li><span></span>我是li4</li>
<li><span></span>我是li5</li>
<li><span></span>我是li6</li>
<li><span></span>我是li7</li>
<li><span></span>我是li8</li>
<li><span></span>我是li9</li>
<li><span></span>我是li10</li>
</ol>
</body>
<script type="text/javascript">
<!--根據id獲取標簽ol對象-->
var ol = document.getElementById("olist");
//獲取ol有序列表里所有的span標簽，第一種方式
<!--通過ol獲取ol列表下的所有span標簽-->
var spans = ol.getElementsByTagName("span");
//或者使用第二種方式：
var spans = document.querySelectorAll("#ol1 span");
//length 長度 可以通過length求長度
alert(spans.length);
//如果想獲取某單個span標簽對象，可以通過下標來獲取.例如：
//spans[0] 下標從0開始
</script>
4.8 JS基礎事件（click、mouseover、mouseout）
例如下面代碼中的案例：設置一個div的屬性為寬為200px、高為200px、顏色為紅色；
<body>
<!--onclick 當點擊時-->
<!--<input onclick="alert('a')" type="button" name="btn" id="btn1" value="顯示" />-->
<input type="button" name="" id="btn" value="顯示" />
<div id="div1" style="display: none;"></div>
</body>
頭部引入js
<script type="text/javascript">
// 獲取操作的標簽 從文檔里通過id去獲取標簽
//通常存儲在變量里面
var btn = document.getElementById("btn");//得到button按鈕
var blockDiv = document.getElementById("div");//得到div標簽
//當點擊button按鈕時
btn.onclick = function(){
//做一次判斷
if (blockDiv.style.display == "none") {
blockDiv.style.display = "block"; //block 屬性 display:block 顯示
} else{
blockDiv.style.display = "none"; //block 屬性 display:none 隱藏
}
//當鼠標移入按鈕上時 onmouseover
btn.onmouseover = function(){
//改變button上顯示的內容
btn.value = "顯示";
}
//或者寫這個屬性兼容性更強
//btn.onmouseenter = function(){
// btn.value = "顯示";
//}
//當鼠標移除時 onmouseout
btn.onmouseout = function(){
btn.value = "隱藏";
}
//或者寫這個屬性兼容性更強
//btn.onmouseleave = function(){
// btn.value = "隱藏";
//}
}
</script>
通過看下代碼實現的效果來驗證一下：
(注意點擊顯示按鈕時，div標簽的顯示與隱藏，以及鼠標移入和移出按鈕時，按鈕上文字的變化)
