初學JavaScript總結

0 JavaScript

html完成了架子，css做了美化，但是網頁是死的，需要給他注入靈魂，所以接下來需要學習JavaScript，這門語言會讓頁面能夠和用戶進行交互。JavaScript又稱為腳本語言，可以通過腳本實現用戶和頁面的交互。

1 引入方式

兩種引入方式：

內部腳本，將js代碼定義在html頁面中
外部腳本，將js代碼定義在外部js文件中，然后引入html頁面中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>快速上手</title><!--內部腳本--><!-- <script>alert("hello js");alert("hello,kkk.");</script> --><script src="./js/hellojs.js"></script>
</head>
<body><!--js引入方式：1.內部腳本：js定義在html中2.外部腳本：--></body>
<!--一般將js代碼放到<head></head>標簽中，但建議放到</body>下，可以明顯的改善網頁速度
-->
<!--這里也可以引入javascript-->
<!-- <script>alert("hello js111")</script> -->
</html>

?2 基礎語法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js基礎語法</title><script>//基本語法//1.區分大小寫//2.結尾的分號可以不寫//3.<script>變遷可以寫在body中//4.大括號表示代碼塊//5.輸出語句//5.1使用window.alert()寫入警告框//window.alert('warning...');//5.2使用document.write()直接在html中輸出// document.write("output statements.");//5.3console.log()寫入瀏覽器控制臺// console.log("printing log...")//6.變量// 6.1 var 定義的是全局變量,可以重復聲明var a = 20;var a = "nihao";alert(a);// 6.2 let 定義的局部變量，不能重復定義{let b = "asdfasdf";// let b = 3;alert(b);}// alert(b);// 6.3 const定義的是常量，不可以改變const aa = 32;alert(aa);// aa = 33;控制臺報錯//7.運算符//==，會進行類型轉化，===不會進行類型轉換// 8類型：// 基本類型：boolean,Null,Undefined,Number,String,Symbol// 引用類型：Array,Object,Function,Date...// 8.1數字類型轉換為boolean類型//數值類型中，0和NaN均為falseif(0 == false){alert("0 is false");}if(NaN){alert("NaN is true");}else{alert("NaN is false");}//空字符串為false,其他均為trueif(""){alert("'' is true");}else{alert("'' is false");}if(" "){alert("' ' is true");}if(null){alert("null is true");}else{alert("null is false");}if(undefined){alert("undefined is true");}else{alert("undefined is false");}</script>
</head>
<body></body>
</html>

?3 函數

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js函數</title><script>// 函數定義function add(a,b){return a+b;}var minus = function(a,b){return a-b;}//函數調用var res = add(1,2);alert(res);var res = minus(1,2);alert(res);</script>
</head>
<body></body>
</html>

4 JavaScript對象

4.1數組

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js數組</title><script>//定義數組var arr = new Array(1,2,3,4);var arr1 = ['a','3',2,'dfd'];arr1[40] = 'hell'console.log(arr[0]);console.log(arr[3]);console.log(arr1[3]);console.log(arr1.length);//forEach()僅僅遍歷有值的元素arr1.forEach(function(e){console.log(e);});</script>
</head>
<body>
</body>
</html>

4.2 String對象

<script>//創建字符串對象//var str = new String("Hello String");var str = "  Hello String    ";console.log(str);
</script>

4.3 JSON對象

1.自定義對象格式

var 對象名 = {屬性名1: 屬性值1, 屬性名2: 屬性值2,屬性名3: 屬性值3,函數名稱: function(形參列表){}
};

2.使用自定義對象

對象名.屬性名

3.調用函數

對象名.函數名()

舉例：

<script>//自定義對象var user = {name: "Tom",age: 10,gender: "male",eat: function(){console.log("用膳~");}}console.log(user.name);user.eat();
<script>

簡化格式

    var user = {name: "Tom",age: 10,gender: "male",// eat: function(){//      console.log("用膳~");//  }eat(){console.log("用膳~");}}

4.JSON對象

JSON對象：JavaScript Object Notation，JavaScript對象標記法。是通過JavaScript標記法書寫的文本。其格式如下：

{"key":value,"key":value,"key":value
}

值得注意的是：key必須要用雙引號標記(不可以是單引號，更不可以沒有)，value可以是任意數據類型！！！

應用：

json格式的文本通常作為前后端交互的數據載體，是一個結構化的數據格式，方便轉換。

注意：json本質是一個字符串，需要將其轉為對象，則需要js的轉換。

//json字符串 <===>json對象//jsonstr是一個json格式的字符串
var jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';//obj是一個json對象
var obj = JSON.parse(jsonstr);//obj ---> json字符串
var jstring = JSON.stringify(obj);

4.4 BOM對象

BOM對象:全稱是Browser Object Model,翻譯過來是瀏覽器對象模型。也就是JavaScript將瀏覽器的各個組成部分封裝成了對象。我們要操作瀏覽器的部分功能，可以通過操作BOM對象的相關屬性或者函數來完成。例如：我們想要將瀏覽器的地址改為http://www.baidu.com,我們就可以通過BOM中提供的location對象的href屬性來完成，代碼如下：location.href='http://www.baidu.com'

BOM提供了如下5個對象：

Window:瀏覽器窗口對象
Navigator：瀏覽器對象
Screen：屏幕對象
History：歷史記錄對象
Location：地址欄對象

?1.Window對象

常用

window.alert('hello');

window對象提供了其他屬性：

history：用于獲取history對象
location：用于獲取location對象
Navigator：用于獲取Navigator對象
Screen：用于獲取Screen對象

window提供常用函數:

alert():顯示帶有一段消息和一個確認按鈕的警告框。
comfirm():顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。
setInterval():按照指定的周期（以毫秒計）來調用函數或計算表達式。
setTimeout():在指定的毫秒數后調用函數或計算表達式。

2.Location對象

//獲取瀏覽器地址欄信息
alert(location.href);
//設置瀏覽器地址欄信息
location.href = "https://www.itcast.cn";

?4.5 DOM對象

DOM：Document Object Model 文檔對象模型。也就是 JavaScript 將 HTML 文檔的各個組成部分封裝為對象。

作用：

改變 HTML 元素的內容
改變 HTML 元素的樣式（CSS）
對 HTML DOM 事件作出反應
添加和刪除 HTML 元素

1.獲取dom對象

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-對象-DOM</title>
</head><body><img id="h1" src="img/off.gif">  <br><br><div class="cls">傳智教育</div>   <br><div class="cls">黑馬程序員</div>  <br><input type="checkbox" name="hobby"> 電影<input type="checkbox" name="hobby"> 旅游<input type="checkbox" name="hobby"> 游戲
</body><script>//1. 獲取Element元素//1.1 獲取元素-根據ID獲取// var img = document.getElementById('h1');// alert(img);//1.2 獲取元素-根據標簽獲取 - div// var divs = document.getElementsByTagName('div');// for (let i = 0; i < divs.length; i++) {//     alert(divs[i]);// }//1.3 獲取元素-根據name屬性獲取// var ins = document.getElementsByName('hobby');// for (let i = 0; i < ins.length; i++) {//     alert(ins[i]);// }//1.4 獲取元素-根據class屬性獲取// var divs = document.getElementsByClassName('cls');// for (let i = 0; i < divs.length; i++) {//     alert(divs[i]);// }//2. 查詢參考手冊, 屬性、方法var divs = document.getElementsByClassName('cls');var div1 = divs[0];div1.innerHTML = "傳智教育666";</script>
</html>

5 JavaScript事件

什么是事件呢？HTML事件是發生在HTML元素上的 “事情”，例如：

按鈕被點擊
鼠標移到元素上
輸入框失去焦點
........

而我們可以給這些事件綁定函數，當事件觸發時，可以自動的完成對應的功能。這就是事件監聽。例如：對于我們所說的百度注冊頁面，我們給用戶名輸入框的失去焦點事件綁定函數，當我們用戶輸入完內容，在標簽外點擊了鼠標，對于用戶名輸入框來說，失去焦點，然后執行綁定的函數，函數進行用戶名內容的校驗等操作。JavaScript事件是js非常重要的一部分，接下來我們進行事件的學習。那么我們對于JavaScript事件需要學習哪些內容呢？我們得知道有哪些常用事件，然后我們得學會如何給事件綁定函數。所以主要圍繞2點來學習：

事件綁定
常用事件

?5.1 事件綁定

js提供了2種事件綁定的方式：

通過html標簽中的事件屬性進行綁定
通過DOM中的Element元素的事件屬性進行綁定

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-事件-事件綁定</title>
</head><body><input type="button" id="btn1" value="事件綁定1" onclick="on()"><input type="button" id="btn2" value="事件綁定2">
</body><script>function on(){alert("按鈕1被點擊了...");}document.getElementById('btn2').onclick = function(){alert("按鈕2被點擊了...");}</script>
</html>

?5.2 常見的事件

事件屬性名	說明
onclick	鼠標單擊事件
onblur	元素失去焦點
onfocus	元素獲得焦點
onload	某個頁面或圖像被完成加載
onsubmit	當表單提交時觸發該事件
onmouseover	鼠標被移到某元素之上
onmouseout	鼠標從某元素移開