HTML三把利劍之一，瀏覽器具有解析js的能力

一、js基礎

在HTML中可以將JavaScript/JS的程式碼寫在head中，被script標籤所包裹，當瀏覽器解釋HTML時，遇到style標籤時，按照CSS規則解釋，遇到Script標籤時，按照JavaScript的語法規則解釋。

引入JavaScript程式碼，類似於Python的import

<script src="public.js" type="text/javascript"></script>

head中引入JS與body中引入JS區別

html程式碼從上而下解析，如果在head中引入JS，影響頁面開啟的速度，存在風險，所以通常放在htmlbody的最下方，這樣頁面內容先展示，最後在載入JS。注：寫在最下面要有底線，寫在body內部的最底下。

註釋

單行註釋通過 // 多行通過 /* */

1.1 js變數

const a = 1//定義常量，不可以修改
let name = 'xiaolin'//定義變數，沒有預解析
var name1 = 'xiaoxiaolin'//定義變數，預解析，提前給定義為undefined,

1.2 字串

//定義字串
        var str = '你開心就好';
        var name='瘋狂的石頭';
        //字串的拼接
        var name_str = name+str;
        //字串操作
        str.charAt(0)//根據角標獲取字串中的某一個字元  char字元
        str.substring(1,3) //根據角標獲取 字串子序列 顧頭不顧尾（大於等於x  小於y ）
        str.length //獲取字串長度
        str.concat('五月天')  //拼接字串
        str.indexOf('五月')//獲取子序列的位置
        str.slice(0,1)//切片 開始，結束 顧頭不顧尾
        str.toLowerCase()//變為小寫
        str.toUpperCase()//變為大寫
        str.split(',')//以指定的字串進行分割，返回陣列，引數2為取分割後陣列的前多少個元素
 

1.3 數字型別

var age=19;
        var score = 89.5;
        number = '18';
        //字串轉換
        var n = parseInt(number);
        //轉換為小數
        f = parseFloat(number);
        //布林型別
        var t = true;
        var f = false;

1.4 陣列型別

// 第一種建立方式 
var list = new Array(); 
list[0] = '李四'; 
list[1] = '王五'; 
 
// 第二種建立方式 
var list2 = new Array('李四','王五'); 
 
// 第三種建立方式 
var list3 = ['李四','牛教授']; 
 
陣列操作 
var list4 = ['李四','王五'];
 
list3.length;// 陣列的長度 
 
list3.push('dsx');// 尾部追啊引數 
 
list3.shift();// 頭部獲取一個元素 並刪除該元素 
 
list3.pop();// 尾部獲取一個元素 並刪除該元素 
 
list3.unshift('dsx');// 頭部插入一個數據 
 
list3.splice(start, deleteCount, value);// 插入、刪除或替換陣列的元素 
 
list3.splice(n,0,val) ;//指定位置插入元素 
 
list3.splice(n,1,val);// 指定位置替換元素 
 
list3.splice(n,1);// 指定位置刪除元素 
 
list3.slice(1,2);// 切片;
 
list3.reverse() ;//反轉 
 
list3.join('-') ;//將陣列根據分割符拼接成字串 
 
list3.concat(['abc']);// 陣列與陣列拼接 
 
list3.sort() ;//排序
 

1.5物件型別（等同於Python的字典）

var dict = {name:'dsx',age:18,sex:'男' };
var age = dict.age; 
var name = dict['name'];
delete dict['name'] 刪除
delete dict.age 刪除

1.6js條件判斷語句

var score = 89
if(score>=90){
    console.log('優秀')
}else if(score>=80 && score<90){
    console.log('良好')
}else if(score>=60 && score<80){
    console.log('中等')
}else{
    console.log('不及格')
}

switch (score) {
    case 90:
        console.log('優秀')
        break;
    case 80:
        console.log('良好')
        break;
    default;

1.7js迴圈語句

//第一種迴圈
//迴圈的是角標
tmp = ['寶馬', '賓士', '尼桑'];
tmp = '寶馬賓士尼桑';
tmp = {'寶馬': 'BMW', '賓士': 'BC'};
for (var i in tmp) {
    console.log(tmp[i])
}
//第二種迴圈
//不支援字典的迴圈
for (var i = 0; i < 10; i++) {
    console.log(tmp[i])
}
//第三種迴圈
while (1 == 1) {
    console.log(111)
}

1.8函式

// 普通函式
function funcName(name,age) {

}
funcName('lis',78);

//匿名函式，函式即變數
var funcNameTwo = function(){

};
funcNameTwo()

二、DOM

DOM（Document Object Model 文件物件模型）

一個web頁面的展示，是由html標籤組合成的一個頁面，dom物件實際就是將html標籤轉換成了一個文件物件。可以通過dom物件中js提供的方法，找到html的各個標籤。通過找到標籤就可以操作標籤使頁面動起來，讓頁面動起來。

2.1 獲取標籤

//直接獲取標籤
document.getElementById('id1');//根據id獲取標籤
document.getElementsByName('elname');//根據屬性name獲取標籤陣列
document.getElementsByTagName('div');//根據標籤名稱獲取標籤陣列
document.getElementsByClassName('c1');根據屬性class獲取標籤陣列

//間接獲取標籤
var temp = document.getElementById('id1');
temp.parentElement;//父節點標籤元素
temp.children;//所有子節點
temp.firstElementChild;//第一個子標籤元素
temp.lastElementChild;//最後一個標籤元素
temp.nextElementSibling;//下一個兄弟標籤元素
temp.previousElementSibling;//上一個兄弟標籤元素

2.2 文字內容操作

//文字內容操作：
// innerHTML和innerText
temp.innerText;//獲取標籤中的文字內容
temp.innerHTML;//獲取標籤中的所有內容，包括html程式碼
temp.innerText='fdsfsfs';//修改標籤中的文字內容
temp.innerHTML='<input type="text">fdsfsfs</input>'//可以將html格式的字串變為標籤

//input textarea標籤
temp.value;//獲取input，textarea的值
temp.value='fdsfsfs';//修改input，textarea的值

//select標籤
tmp.value; //獲取select標籤的value引數
tmp.value = '選項' // 修改select選項
tmp.selectedIndex; // 獲取select標籤的選項下標
tmp.selectedIndex = 1 // 通過下標更改select的選項

2.3 事件

<!--    直接繫結-->
<input type="button" id="b1" onclick="show()">
function show() {
    alert('fdsfsdlfsjflskjdf')
}

<!--間接繫結-->
<input type="button" id="b2" >
var b2 = document.getElementById('b2');
b2.onmouseover = function () {
    b2.style.backgroundColor='red'
}

// 間接繫結的this代指，getElementById找到的這個標籤
var obj = document.getElementById('b2');
obj.onmouseout = function () {
    this.style.background = '';
}