原生js基礎入門

目錄

• 一、基礎語法
  • 1、js語法嵌入頁面的方式
  • 2、注釋
  • 3、變量
  • 4、數類類型
  • 5、運算符
  • 6、條件語句
  • 7、函數
  • 8、對象
  • 9、 循環
• 二、js頁面操作
  • 1、DOM簡介
  • 2、獲取頁面標簽
  • 3、操作標簽內容---子集
  • 4、修改標簽屬性
  • 5、事件操作

一、基礎語法

1、js語法嵌入頁面的方式

HTML中的腳本必須位於標簽之間，腳本可放置在body和head中

1.行間事件（主要用於事件）

<input type="button" value="按鈕" onclick="alert('被點擊了')">

2.頁面script標簽

<script type="text/javascript">
    window.onload = function () {
        document.getElementById("box1").style.background = "red"
    }
</script>

3.外部引入

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

2、注釋

我們可以添加注釋對js進行解釋，或者提高代碼的可讀性

• 單行注釋：//
• 多行注釋：/* */

3、變量

變量命名

• 變量可以使用端名稱（比如x和y）也可以使用描述性更好的名稱（age，name，sum）
• 變量必須以字幕開頭
• 變量也能以$和_開頭（不推薦）
• 變量名稱對大小寫嚴格區別

聲明變量：var

• js中可以變量可以先聲明在賦值
• 也可以在聲明的時候賦值
• 也可以同時聲明多個或者多都賦值
• 聲明未賦值會打印：undefined（區別於null）

var name; //聲明不賦值
var age = 18; //聲明時賦值
var id = 1, text = "js基礎" // 同時聲明多個

4、數類類型

字符串、數字、布爾、Null、undifined、數組

js也是一門弱類型語言，類似於python，所以定義變量時也不需要聲明類型

number:數字類型

• var y = 3;

string 字符串類型

• var str = "javascript";

boolean 布爾類型

• var status =true or false;

undefined 類型：只定義沒賦值

• var status;

null 類型：類似python中的None

• var status = null;

arry 數組類型

• 數組類似python中的list，也可以通過下表取值
• length屬性：獲取數組的長度：
• pop():刪除最后一個值，並返回和pyhton一樣
• push(): 像數組最后添加一個元素，類似python中的append

// 執行代碼
//創建數組 Array
var data_array = Array("html", "css", "js");
//一樣可以通過下標取值，可以for遍歷得到下標
console.log(data_array[0]);
//通過length獲取數組長度
console.log(data_array.length);
//pop()方法從數組刪除最后一個元素並返回，和python中一樣
data_array.pop();
console.log("刪除之后:", data_array);
//push 方法把元素添加到數組最后一個位置
data_array.push("javascript");
console.log("添加之后：", data_array)

5、運算符

• 算數運算符：++ 、-- 、** 、// 、%
• 賦值運算符：=、+=、*=、/=、%=
• 條件運算符: == 、=== 、> 、>= 、< 、<= 、!=（不管類型，只管值） 、!==（值和類型必須都不等）
• 邏輯運算符：&&（且）、||（或）、!（否）

6、條件語句

通過條件來控制程序的走向、就需要用到條件語句/

1、if語句：if(條件){邏輯}

2、else if語句：else if(條件){邏輯}

3、else語句：else{邏輯}

var age = 19;
if (age > 18) {
    console.log("大於18")
} else if (age === 18) {
    console.log("等於18")
}else {
    console.log("小於18")
}

4、switch語句

switch(表達式){
    case n1:
        代碼塊
        break;
    case n2:
        代碼塊
        break;
    case n3:
        代碼塊
        break;
    default：
        默認代碼塊
}

• 計算一次switch表達式
• 把表達式的值與每個case的值進行對比
• 如果存在匹配，則執行關聯代碼
• 遇到break關鍵詞，會跳出switch語句
• case匹配都不存在時，會執行default的代碼
• 案例：

var a = 5, b = 7;
switch (b-a) {
    case 6:
        console.log("等於6");
        break;
    case 7:
        console.log("等於7");
        break;
    default:
        console.log("不等於6 7 ")
}

7、函數

定義函數的關鍵詞function，函數內的代碼塊、包裹在花括號中：

// 定義函數：關鍵字+函數名+參數+{代碼塊}，
// 細節和python一樣:
// 1、參數定義和形式
// 2、return 返回值
function func(param1, param2 = 3) {
    console.log(param1);
    console.log(param2);
    return param1 + param2
}
// 調用
var sum = func(55);
console.log(sum)

8、對象

創建對象：對象用花括號分割，在括號內部，類似python中字典, 也時key:value形式，value接收任意類型數據，包括函數

1、創建方式一：

// new Object 初始化一個字典
// 然后可以像python中一樣添加鍵值對
obj_1 = new Object();
obj_1["name"] = "張三";
console.log(obj_1)

2、創建方式二：

直接定義變量接收花括號{}

// 對象中可以接收任意類型，包括函數，
// 跟python字段非常相似。
// js中的key 可以不不加引號。
// 操作屬性，可以和python中一樣用[],也可以直接點出來，而python是get()方法
var obj_2 = {
    name: "李四",
    age: 16,
    gender: "男",
    sum: function (var1) {
        console.log(var1+12)
    }
};
// 調用
console.log(obj_2.sum(20))

9、 循環

主要分為三種： while(條件)、for(語句1,語句2,語句3)、 for (i in iteration)==遍歷

1、while循環

和python基本一樣，基本不用。for更省代碼

while(條件語句){
    循環體
}

案例循環打印1-5

var a = 1;
while (a<=5){
    console.log(a);
    a++;
}

2、for循環

一般都用for循環來取代while循環

for(語句1,語句2,語句3){
    循環題
}

• 語句1：在循環開始之前執行
• 語句2：循環條件，成立則執行循環體
• 語句3：每一輪循環執行之后執行的語句

案例循環打印1-5

// 注意三個語句要用分號分割，不是逗號
for (i = 1; i <= 5; i++) {
    console.log(i)
}

3、for遍歷

for(i in Array("a","b","c"){
    循環體
}

• 遍歷和python中的遍歷一樣
• 需要注意的是遍歷數組，遍歷出來的 i 不是元素，是元素的下標， 一樣可以根據下標取值
• 遍歷對象，遍歷出來的是屬性，可以通過[屬性]獲取值，但是不能點屬性出來，因為遍歷出來的是字符串

 // 遍歷數組
var list_data = Array("a","b","c");
for (i in list_data){
    console.log(i);   // 下標
    console.log(list_data[i])
}



// 遍歷對象
var obj_2 = {
    name: "李四",
    age: 16,
    gender: "男",
    sum: function (var1) {
        console.log(var1 + 12)
    }
};
for (i in obj_2){
    console.log(i); // 屬性，也就是key
    // console.log(obj_2.i)  不能點i了
    console.log(obj_2[i])
}

二、js頁面操作

1、DOM簡介

通過HTML DOM，js可訪問HTML文檔的所有元素

當頁面子被加載時，游覽器會創建頁面的文檔對象模型（Document Object Model）

HTML DOM 模型會唄構造成樹結構

節點樹中的節點彼此擁有層級關系

• 父（parent）、子（chidren）、同胞（sibliing）、等術語用於描述這些關系，父節點擁有子節點，同級節點稱為同胞或兄弟姐妹

通過可編程的對象模型，js獲得了足夠的能力來動態創建HTML

• 如何改變HTML元素的內容（innerHTML）
• 如何改變HTML元素的css樣式（style）
• 如何添加或刪除HTML元素
• 如何對HTML DOM事件做處反應

2、獲取頁面標簽

1、獲取標簽的方式

通常通過javascript操作HTML元素，可以使用內置對象document的提供的三種方法找到該標簽

// 1、通過id屬性
document.getElementById("id")

// 2、通過標簽名
// 返回的時一個數組
document.getElementsByTagName("div")

// 3、通過類屬性名稱
// 返回一個數組
document.getElementsByClassName("class")

2、獲取標簽注意的問題

當我們在head標簽中 或 js文件中 直接寫js代碼獲取頁面元素時，會報錯元素不存在

是因為，代碼是從上往下執行的，加載js代碼時，html還沒加載，導致無法找到元素

解決辦法

方法一：把js代碼帶在body標簽 元素最后面，這樣元素加載完，在執行代碼就能找到元素了

方法二：js代碼加入 window.onliad = function(){} js代碼放在函數內，這樣就會等html頁面加載完在執行js

// 加入windos.onload 就會等頁面加載完在執行js
window.onload = function () {
    document.getElementById("box1").style.background="red";
};

3、操作標簽內容---子集

• innerHTML 屬性
  • 獲取元素的子集的最簡單的方法時使用innerHTML屬性，innerHTML屬性對與獲取或替換HTML元素的內容很有用
• 讀取節點文子集

<div id="box3">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>

# 讀取的是整體ul，只有文本時，就等於文本讀取
window.onload = function () {
    console.log(document.getElementById("box3").innerHTML)
};

• 寫入節點文本

// 注意會把元素子節點先清空在賦值
window.onload = function () {
    document.getElementById("box3").innerHTML="box33333333333";
};

• 僅獲取元素下文本或子元素文本- innerText

window.onload = function () {
    console.log(document.getElementById("box3").innerTEXT)
};

4、修改標簽屬性

• 操作屬性的方法

  • element.屬性名 = "屬性值" ;

• 案例-修改input type屬性值

//html 
輸入框：<input type="text" name="user" id="user">

// js 修改type為 button
document.getElementById("user").type = "button";
document.getElementById("user").value = "按鈕";

5、事件操作

主要就是觸發鼠標事件后的一系列捕捉，及捕捉后的操作,后面學到jquery操作這些更加方便簡單，原生js僅稍微介紹一下。。。

//html
<div id="box2" >box2</div>

// click, 程序自動觸發click事件，操作元素更換背景顏色,
// 不能接收回調函數
ele = document.getElementById("box2");
    ele.click(
        ele.style.background = "red",
        console.log("自動化觸發變更顏色")
    );

//onclick 程序沒有自動觸發，激發點擊事件時觸發
// 可以接收回調函數
ele.onclick = function () {
    this.style.background = "cyan";
    console.log("主動點擊變色")
}