web前端基礎知識08---javascript基礎語法（1）
一、認識Javascript語言
JavaScript 是網際網路上最流行的指令碼語言，這門語言可用於 HTML 和 web，更可廣泛用於伺服器、PC、膝上型電腦、平板電腦和智慧手機等裝置。JavaScript的縮寫為JS。
JS是web標準中的行為標準，是一門專門用來控制網頁的指令碼語言。
注意：javaScript 與 Java 是兩種完全不同的語言，無論在概念上還是設計上。Java（由 Sun 發明）是更復雜的程式語言。
ECMA-262 是 JavaScript 標準的官方名稱。JavaScript 由 Brendan Eich 發明。它於 1995 年出現在 Netscape 中（該瀏覽器已停止更新），並於 1997 年被 ECMA（一個標準協會）採納。
二.如何使用JS
a.內聯：將JS程式碼寫在標籤中
b.內部：寫在script標籤中，注意這個標籤可以放到html檔案的任何位置。一般放在body的最後面
c.外部: 寫在一個js檔案中(字尾是.js的檔案)，通過script標籤的src屬性來匯入對應的js檔案。匯入的位置不是固定的，可以根據需求在合適的位置匯入
<!DOCTYPE html> <html> <head> <title>JS基礎</title> <!-- 2.內部 --> <script type="text/javascript"> // 在這兒寫js程式碼 // alert('你好嗎') //彈出一個提示框 </script> <!-- 3.外部 --> <!-- 通過script標籤的src屬性來匯入對應的js檔案 --> <script type="text/javascript" src="03-運算子.js"></script> </head> <body> <p id="p1">你好</p> <p id="p2">hello</p> <!-- 1.內聯 --> <!-- onclick屬性後寫js程式碼；onclick 屬性由元素上的滑鼠點選觸發。 注：onclick 屬性不適用以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。 --> <button onclick="document.getElementById('p1').innerHTML='Hello JS'">點我一下</button> <script type="text/javascript"> // 在這兒寫js程式碼 // alert('你好嗎') //彈出一個提示框 document.write('hi'); document.getElementById('p2').innerHTML='我最棒'; </script> </body> </html>
三.Js的四種輸出方式
JavaScript 沒有任何列印或者輸出的函式，可以通過不同的方式來輸出資料
- window.alert()====彈出對話方塊(其中前面的window可以省略）
- console.log()====從瀏覽器控制檯輸出
- innerHTML()====顯示在指定的標籤中
- document.write()====寫入到網頁中
注意：
（1）document.getElementById()根據元素Id來獲取指定元素，
如需從 JavaScript 訪問某個 HTML 元素，可以使用 document.getElementById(id) 方法。
(2)瀏覽器中使用 F12 來啟用除錯模式， 在除錯視窗中點選 "Console" 選單。程式中除錯是測試，查詢及減少bug(錯誤)的過程。
<!DOCTYPE html>
<html>
<head>
<title>js的四種輸出</title>
</head>
<body>
<p>你好嗎</p>
<p id="p1" style="background-color: red"></p>
<script type="text/javascript">
// 1.彈出對話方塊
alert("對話方塊顯示的內容");
// 2.從瀏覽器控制檯輸出
console.log('從控制檯輸出');
// 3.寫入到網頁中
document.write('aaa');
document.write('<h1>我是標題</h1>');
// 4.顯示在指定的標籤中(會將文字"我是內容"顯示在紅背景的p標籤中)
document.getElementById('p1').innerHTML = '我是內容';
</script>
</body>
</html>
網頁顯示效果
四、Js的基本語法
1.語句
（1）js語法上，一條語句結束可以寫分號也可以不寫分號；但是根據習慣需要在每條的語句的後面新增分號。 如果一行要寫多條語句，那麼每條語句之間必須寫分號！
（2）js中沒有縮排的規範，但是在實際開發的時候還是要按照python的要求去規劃縮排
2.註釋(js中只有這兩種註釋)
a. 單行註釋就是'//註釋內容'
b. 多行註釋：'/*註釋內容*/'
3.識別符號：用來給變數和函式命名的....
a.由字母數字和下劃線以及美元符號($)組成，並且數字不能開頭（硬性要求）
b.不能是關鍵字（硬性要求）
c.下劃線和$不開頭
d.見名知義
4.字面量(具體的值)
a.數字Number：12, 12.3, 12e2
b.字串String：'abc12' "231hj"（用單引號或者雙引號括起來）
c.陣列Array：[1,2,3,4,'a','b']（相當於python中的列表）
d.物件Object：{'a':1, 'c':32}（類似於python中的字典）
e.布林Boolean：true,false
f.特殊值：null, undefined
五.變數Var
變數：用來儲存資料
1.變數的宣告：
格式: var 變數名; 或者 var 變數名 = 初值
說明：
var: 是js中宣告變數的關鍵字
變數名: 識別符號，駝峰式命名(除了第一個單詞首字母小寫，其他單詞的首字母大寫，例如:userName,peopleNumber)
初值: 字面量（表示式）
注意：
（1）js是動態語言，宣告變數的時候不用宣告變數的型別。同一個變數可以儲存不同型別的值
var aa = 10;
aa = 'hello';
console.log(aa);
（2）宣告變數：就是在記憶體中開闢空間儲存資料;
（3）變數賦值的時候數字、字串和布林資料存的是值。陣列和物件存的是地址
（4）宣告的時候可以給變數賦值，也可以不賦值
2.宣告一個變數a，不賦值預設值是undefined
var a;
console.log(a);3.一個變數重複宣告，並且沒有賦初值的話，變數的值是之前的值，不是undefined
var aa = 10;
aa = 'hello';
console.log(aa);
// 一個變數重複宣告，並且沒有賦初值的話，若前面有值，變數的值是之前的值，不是undefined！
var aa;
console.log(aa);4. 可以同時宣告多個變數
var num1, num2 = true, num3;
console.log(num);
var arr = [1, 2, 3, 4]
console.log(arr)六.基本資料型別
1.typeof 表示式; 查看錶達式結果的資料型別
2.JS中的基本資料型別
有: Number(數字)、String(字串)、Boolean(布林)、Array(陣列)、Object(物件)、null(清空變數的內容)、undefined(定義的變數沒有賦值)
(1)Number:
a.包含所有的數字(整數、浮點數、科學計數, NaN->不合法的數字) -- 數字型別只有一種，值型別
b.Number() --> 可將括號中的資料轉換成Number型別。
將字串轉換成數字的時候，只有去掉字串的引號後剩下的部分是一個數字的字串才能轉換成合法數字，否則結果是NaN
布林true會轉換成1，false轉換成0
（2）字串(string)
a.可以使用單引號或者雙引號引起來的字符集，就是字串資料：'abc',"12gh"....
b.JS中也可以使用轉義字元來表示有特殊功能和特殊意義的字元： \\ ，\' ，\" ， \t ，\n等
c.JS字元也是Unicode字元
d.通過下標獲取某個字元:下標範圍是0~字串長度-1.
注意：js中下標不能是負數;也不可以切片
e.通過 new String()去建立一個Object型別的字串。
【例】】通過下標獲取字元
console.log(str4[0]);
獲取字串的長度
console.log(str4.length);
建立一個物件型別的字串123abc
var str5 = new String('123abc');
（3）陣列（Array）
Array: 陣列型別就是python中的列表
1.存陣列資料存的是地址
2.陣列的元素可以是任何型別的資料，可以通過下標去獲取對應的元素
3.下標的範圍：0~長度-1
4.通過length可以獲取陣列元素的個數
【其他操作】
新增元素push:在陣列的最後新增一個或者多個元素，返回最新的陣列的長度
刪除元素pop:將陣列中的最後一個元素刪除，並且返回被刪除的元素
切片slice(起始下標，結束下標）:從陣列的起始下標開始，到結束下標前的所有元素，作為一個新的陣列的元素並且返回
刪除制定下標 的元素（下標，個數）;從指定下標開始刪除指定個數元素
splice(下標,0,元素1,元素2,元素3...):在指定的下標前插入指定的一個或者多個元素
unshift: 在陣列的開頭新增一個或者多個元素
直接修改元素===例如;
a2[0] = 100;
console.log(a2);
(4)object物件
Object: 物件型別就是python中的字典
變數儲存物件，存的是物件的地址， 存的時候以鍵值對的形式去儲存資料，這個鍵可以看成物件的屬性
建立一個變數，存的是一個物件的地址
var obj1 = {'a':1, 'b':2, 'c':'abc'};
取值: 通過key去取值
console.log(obj1['a']);
取值：通過點語法獲取屬性的值
console.log(obj1.c);
/修改
obj1['a'] = 100;
obj1.c = '你好';
console.log(obj1);
增加: 給不存在的key或者屬性去賦值
obj1['d'] = 1001;
console.log(obj1);
obj1.e = 'aaaa';
console.log(obj1);
刪除指定的鍵值對/屬性
delete obj1.b;
delete obj1['a'];
console.log(obj1);
宣告物件的時候，屬性名可以不用加引號
var obj2 = {name:'yuting', age:18, sex:'女'};
console.log(obj2['name']);
console.log(obj2.name);