文章目錄

前言
簡介
- 概述
- 組成部分
- 特點
- 作用
基礎語法
- 變數
- 字串
- 陣列
- 物件
- 流程控制
- Map 和 Set
- iterator
函式
- 定義函式
- 呼叫函式
- 變數的作用域
- 方法
面向物件編程
- 什么是面向物件
- 面向物件原型繼承
- 面向物件class繼承
操作BOM物件（重點）
操作DOM物件（重點）
- 獲得節點
- 更新節點
- 洗掉節點
- 插入節點
- 創建一個新的標簽
- 在前面插入節點：insertBefore
操作表單
- 獲取表單資訊
- 提交表單
- - iframe
  - submit
  - submit()
  - ajax
  - XHR
后記

前言

本博文專用于軟體創新實驗室JS學習課堂，很基礎但很適用的 JS 相關知識，一篇讓你對 JS 得心應手，了如指掌！

簡介

概述

JavaScript 是目前 web 開發中不可缺少的腳本語言，JS 不需要編譯即可運行，運行在客戶端，需要通過瀏覽器來決議執行 JavaScript 代碼，

JavaScript 誕生于1995年，當時的主要目的是驗證表單的資料是否合法，

JavaScript 本來應該叫 Livescript，但是在發布前夕，想搭上當時超熱的 java 順風車，臨時把名字改為了JavaScript，（也就是說 js 跟 java 沒有關系，當時只是想借助 java 的名氣），

組成部分

組成部分	作用
ECMA Script	構成了 js 核心的語法基礎
BOM	Browser Object Model 瀏覽器物件模型，用于操作瀏覽器上的物件
DOM	Document Object Model 檔案物件模型，用于操作網頁中的元素

（1）ECMAScript（核心）：這一部分主要是 JS 的基本語法，

（2）BOM：Brower Object Model（瀏覽器物件模型），主要是獲取瀏覽器資訊或操作瀏覽器的，例如：瀏覽器的前進與后退、瀏覽器彈出提示框、瀏覽器地址欄輸入網址跳轉等操作等，

（3）DOM：Document Object Model（檔案物件模型），此處的檔案暫且理解為 html，html 加載到瀏覽器的記憶體中，可以使用 JS 的 DOM 技術對記憶體中的 html 節點進行修改，用戶從瀏覽器看到的是 JS 動態修改后的頁面，（增刪改查）

特點

1. 互動性（它可以做的就是資訊的動態互動）
2. 安全性（不允許直接訪問本地硬碟）
3. 跨平臺性（只要是可以決議 JS 的瀏覽器都可以執行，和平臺無關）

與 Java 的區別：

Java	JavaScript
面向物件的語言	腳本語言，是基于物件和事件驅動的語言
Java 的源代碼在執行之前必須經過編譯	JavaScript 的代碼可以由瀏覽器直接解釋執行
Java 變數在使用之前必須宣告	JavaScript 不需要
Java 是靜態型別語言	JavaScript 是動態型別語言
Java 主要在服務端運行	Javascript 主要在客戶端瀏覽器運行

作用

JavaScript 被用來改進設計、驗證表單、檢測瀏覽器、創建 cookies，等等，JavaScript 是因特網上最流行的腳本語言，并且可在所有主要的瀏覽器中運行，比如： Internet Explorer、 Maxthon、Mozilla、Firefox、Netscape、Chrome和 Opera等，

在目前學習階段只要記住最常用的二個：
（1）運態修改html及css代碼
（2）驗證表單

基礎語法

變數

定義變數
- var num = 1;
- var name = "idiot";

javascript 嚴格區分大小寫，

console.log(變數名) 在瀏覽器控制臺列印資料，

字串

正常字串我們使用單引號，或者雙引號包裹，
注意轉義字符 \，

\'
\n
\t
\u4e2d    \u##### Unicode字符
\x41	  Ascall字符

多行字串撰寫，使用撇號，

//tab 上面 esc下面
var msg =
    `
    hello
    world
    你好呀
    nihao
    `

模板字串，

let name = 'Tom';
let age = 3;
var msg = `你好，${name}`

字串長度，

str.length

字串的可變性，不可變，

var str = "stUdent"
str[0]=1
console.log(str[0])
console.log(str)

大小寫轉換，

//注意,這里是方法,不是屬性了,所以要加括號
str.toUpperCase();
str.toLowerCase();

str.indexOf('t')
substring()，從0開始

str.substring(1)//從第一個字串截取到最后一個字串
str.substring(1,3)//[1,3)

陣列

Array 可以包含任意的資料型別，

var arr = [1,2,3,4,5,6];//通過下標取值和賦值

長度

arr.length

注意：假如給 arr.length 賦值，陣列大小就會發生變化~，如果賦值過小，元素就會丟失，

indexOf，通過元素獲得下標索引

arr.indexOf(2)
1

字串的"1"和數字 1 是不同的，

slice() 截取掉 Array 的一部分，回傳的一個新陣列，類似于 String 中 substring()
push()，pop()

push：壓入到尾部
pop：彈出尾部的一個元素

unshift(),shift()

unshift：壓入到頭部
shift：彈出頭部的一個元素

排序 sort()

["B","C","A"]
arr.sort()
["A","B","C"]

元素反轉 reverse()

["A","B","C"]
arr.reverse()
["C","B","A"]

concat()

var arr = [1,2,3,4,5,6]
console.log(arr.concat(['a','b']))
console.log(arr)

注意：concat()并沒有修改陣列，只是會回傳一個新的陣列，

連接符 join()
多維陣列

陣列：存盤資料（如何存，如何取，方法都可以自己實作！）

物件

若干個鍵值對，

var 物件名 = {
	屬性名：屬性值，
	屬性名：屬性值，
	屬性名：屬性值
}
//定義了一個person物件，它有四個屬性
var person = {
	name:"Tom",
	age:3,
	email:"123456798@QQ.com",
	score:66
}

JS 中，{…} 表示一個物件，鍵值對描述屬性 xxx：xxx，多個屬性之間用逗號隔開，最后一個屬性不加逗號！

JavaScript中的所有的鍵都是字串，值是任意物件！

物件賦值，
使用一個不存在的物件屬性，不會報錯！undefined，
動態的刪減屬性，通過 delete 洗掉物件的屬性，
動態的添加，直接給新的屬性添加值即可，
判斷屬性值是否在這個物件中！xxx in xxx，
判斷一個屬性是否是這個物件自身擁有的 hasOwnProperty()，

流程控制

if 判斷，
while 回圈，避免程式死回圈，
for 回圈，
forEach 回圈，ES5.1特性，
for…in… 下標，for(var index in object){}，

Map 和 Set

ES6的新特性

Map，
Set，

iterator

ES6的新特性

遍歷陣列，

遍歷 Map，

遍歷 Set，

函式

定義函式

定義方式一：

function abs(value){
    if(value >= 0){
        return value;
    }else{
        return -value;
    }
}

一旦執行到 return 代表函式結束，回傳結果；如果沒有執行 return，函式執行完也會回傳結果，結果就是 undefined，

定義方式二：

var abs = function(value){
    if(value >= 0){
        return value;
    }else{
        return -value;
    }
}

function(value){…} 是一個匿名函式，但是可以把結果賦值給 abs，通過 abs 就可以呼叫函式！方式一和方式二等價！

呼叫函式

abs(10)    //10
abs(-10)   //10

引數問題：JavaScript 可以傳任意個引數，也可以不傳遞引數，引數進來是否存在問題？假設不存在引數，如何規避？

var abs = function(value){
    //手動拋出例外來判斷
    if(typeof value !== 'number'){
        throw 'Not a number';
    }
    if(value >= 0){
        return value;
    }else{
        return -value;
    }
}

Arguments

arguments 代表傳遞進來的所有引數，是一個陣列！

var abs = function(value){
    console.log("x=>"+x);

    for(var i=0; i<arguments.length; i++){
        console.log(arguments.[i]);
    }

    if(value >= 0){
        return value;
    }else{
        return -value;
    }
}

問題：arguments 包含所有的引數，我們有時候想使用多余的引數來進行附加操作，需要排除已有引數，

Rest

ES6之前，

if(arguments.length>2){
    for(var i=2; i<arguments.length; i++){
        ...
    }
}

ES6之后，獲取除了已定義的引數之外的所有引數，

function a(a,b,...rest){
    console.log("a=>"+a);
    console.log("b=>"+b);
    console.log(rest);
}

rest 引數只能寫在最后面，必須用 … 標識，

變數的作用域

在 javascript 中，var 定義變數實際是有作用域的，

假設在函式體重宣告，則在函式體外不可以使用（閉包），

function a(){
    var x = 1;
    x++;
}

x += 2;    //Uncaught ReferenceError: x is not defined

如果兩個函式使用了相同的變數名，只要在函式內部就不沖突，

function a(){
    var x = 1;
    x++;
}

function b(){
    var x = 'A';
    x++;
}

內部函式可以訪問外部函式的成員，反之則不行，

function a(){
    var x = 1;

    //內部函式可以訪問外部函式的成員,反之則不行
    function b(){
        var y = ++x;    //2
    }

    var z = ++y;        //Uncaught ReferenceError: y is not defined
}

假設內部函式變數和外部函式變數重名，

function a(){
  var x = 1;

  function b(){
    var x = 'A';
    console.log('inner'+x);
  }
  console.log('outer'+x);
  b()
}
a()

在 JavaScript 中，函式查找變數從自身函式開始，由“內”向“外”查找，假設外部存在這個同名的函式變數，則內部函式會屏蔽外部函式的變數，

提升變數的作用域

function a(){
    var x = "x" + y;
    console.log(x);
    var y = "y";
}

結果：x undefined，
說明：js 執行引擎，自動提升了 y 的宣告，但是不會提升變數 y 的賦值，

這個是在 javascript 建立之初就存在的特性，養成規范：所有的變數定義都放在函式的頭部，不要亂放，便于代碼維護，

全域變數

//全域變數
x = 1;

function f(){
  console.log("in-->"+x)
}

f()
console.log("out-->"+x)

全域物件 window，默認所有的全域變數都會自動系結在 window 物件下，

var x = 'test'
alert(x)
alert(window.x)

alert() 這個函式本身也是一個 window 的變數；

var x = 'test'

window.alert(x)

var old_alert = window.alert

window.alert = function(){}

//失效
window.alert(123)

//恢復
window.alert = old_alert
window.alert(456)

失效是因為全域變數 function(){}將原有的內容給覆寫了，

javascript 實際上只有一個全域作用域，任何變數（函式也可以視為變數），假設沒有在函式作用范圍內找到，就會向外查找，如果在全域作用域都沒有找到，就會報錯 Refrence，

規范

由于我們的所有變數都會系結到 window 上，如果不同的 js 檔案，使用了相同的全域變數，就會產生沖突，那如何減少這樣的沖突？

//唯一全域變數
var test = {}

//定義全域變數
test.name = 'idiot'
test.add = function(a,b){
  return a+b;
}

把自己的代碼全部放入自己定義的唯一空間名字中，降低全域命名沖突問題，

jQuery 中就是使用的該方法：jQuery.name，簡便寫法：$()，

區域作用域

function f(){
  for(var i=0; i<10; i++){
    console.log(i)
  }
  console.log(i++)
}

i 在 for 回圈作用域外也依舊可以使用，因此可以使用 let 來代替 var 使之成為區域變數，

常量

在 ES6 之前，定義常量：只有用全部大寫字母命名的變數就是常量，建議不要修改這樣的值，

在 ES6 引入了常量關鍵字 const，

const PI = '3.14'
console.log(PI)
PI = '123'	//Uncaught TypeError: Assignment to constant variable.
console.log(PI)

方法

定義方法

方法就是把函式放在物件的里面，物件只有兩個東西：屬性和方法，

var person = {
	name:"idiot",
  birth:1999,
	age:function(){
    return new Date().getFullYear()-this.birth;
  }
}
//屬性
person.name
//方法,一定要帶()
person.age()

面向物件編程

什么是面向物件

javascript，java，c# —> 面向物件，但是 javascript 有些區別！

類：模板，
物件：具體實體，

面向物件原型繼承

原型物件
當創建一個新函式時，系統會根據一組特定的規則為函式創建一個 prototype 屬性，該屬性會指向一個名為原型物件的物件，在默認情況下，該物件會自動生成一個建構式（constructor），該建構式是一個指向函式的指標，而在原型物件中，除了有這個建構式，我們還可以添加其他的屬性和方法，

通俗來講就是，當我們新建一個函式A時，函式A內部會有一個屬性，該屬性指向一個物件（名字叫原型物件），而這個物件里面默認有一個建構式，這個建構式指向我們最初新建的函式A，然后，我們還可以在原型物件中添加屬性和方法，

//①默認情況下，建構式是空的
function Person（）{//建構式首字母大寫
}

//②添加屬性和方法
Person.prototype.name="dp";
Person.prototype.doSomething=function(）{
    alert(this.name);
};

//③定義好建構式和其他屬性方法之后，就可以創建實體了
var person1=new Person();
var person2=new Person();

var Student = {
  name: 'idiot',
  age: 18,
  run: function(){
    console.log(this.name+" is running.")
  }
}

var girl = {
  name: 'girl'
}

//girl 的原型物件是 Student
girl.__proto__ = Student

面向物件class繼承

class 關鍵字是在 ES6 引入的，

添加方法

//給student添加一個方法
//1、先定義一個類、屬性、方法
class student{
    constructor(name){
        this.name = name;
    }
    
    hello(){
        alert('hello');
    }
}

//使用方法
var person = new student('小明');
person.hello();

繼承

class student{
    constructor(name){
        this.name = name;
    }
    hello(){
        alert('hello');
    }
}

class xiaoStudent extends student{
    constructor(name,grade){
        super(name);
        this.grade = grade;
    }
    mygrade(){
        alert('我是一個小學生')
    }
}

//使用
var xiaoStudent = new xiaoStudent("xiaohong",1);

本質：查看物件原型，

原型鏈，

操作BOM物件（重點）

瀏覽器介紹

JavaScript 和瀏覽器關系？
JavaScript 誕生就是為了能夠讓他在瀏覽器中運行！

BOM：瀏覽器物件模型，

IE6~11
Chrome
Safari
Firefox
Opera

window

window 代表瀏覽器視窗，

window.alert(1)
undefined
window.innerHeight
258 
window.innerwidth
919
window.outerHeight
994
window.outerwidth
919

Navigator

Navigator 封裝了瀏覽器的資訊（不建議使用），

navigator . appName
"Netscape"
navigator . appVersion
"5.0 (windows NT 10.0; WOw64) Applewebkit/537.36 (KHTML， like Gecko)
Chrome/63.0.3239.132 Safari/537.36"
navigator . userAgent
"Mozi11a/5.0 (Windows NT 10. 0; WOw64) ApplewebKit/537.36 (KHTML， like :
Gecko) Chrome/63.0. 3239.132 Safari/537.36"
navigator. platform
"Win32"

大多數時候，我們不會使用 navigator 物件，因為會被認為修改！不建議使用這些屬性來判斷和撰寫代碼，

Screen

代表螢屏尺寸，

screen.width
1920
screen.Height
1080

Location（重要）

代表當前頁面的 URL 資訊

location 屬性：

主機：\host
當前指向的位置：href
協議：protocol
重新加載的方法：f reload() //location.reload() 重繪網頁
(設定新的地址:location.assign(‘想要跳轉的地址’))

document

document 代表當前的頁面，HTML DOM 檔案樹，

//獲取具體的檔案樹節點：
<d1 id="app">
    <dt> Java</dt>
    <dd> JavaSE</dd>
    <dd> JavaEE</dd>
</d1>
<script>
    var d1 = document. getElementById(' app ');
</script>

//獲取cookie
document.cookie

//劫持cookie原理：把一段能劫持cookie的js代碼放在網站上 一點開就能把你的cookie拿了
<script src='劫持cookie.js'></script>
<!-- 獲取你的cookie上傳到他的服務器 -->

服務器端可以設定 cookie 為 httpOnly，

history（不建議使用）

history代表瀏覽器的歷史記錄，

history.back() //后退
history.forward() //前進

操作DOM物件（重點）

核心

瀏覽器網頁就是一個 Dom 樹形結構(與 div 包圍的標簽差不多)，

更新 dom 節點
遍歷 dom 節點
洗掉 dom 節點
添加 dom 節點
要操作一個 dom 節點，就必須先獲得這個 dom 節點，

獲得節點

<div>
    <h1>標題一</h1>
    <p id='p1'>p1</p>
    <p class='p2'>p2</p>
</div>

<script>
//對應css選擇器
var h1 = document.getElementByTagName('h1'); //這里就是獲取到了這個dom節點
var p1 = document.getElementById('p1');
var p2 = document.getElementByClassName('p2');
var father = document.getElementById('father');

var childrens = father.children;// 獲取父節點下的所有子節點
var childrens = father.children[index]; //獲取其中一個節點
//father.firstchild 獲取父節點的第一個子節點
//father.lostchild 獲取父節點的最后一個子節點
</script>

這是原生代碼，之后都用 jQuery，

更新節點

<div id="id1">

</div>

<script>
    var id1 = document.getElementById('id1')
</script>

//操作文本
id1.innerText = '123' //innerText方法修改文本內容  
id1.innerHTML = '<strong>123</strong>' //innerHTML決議HTML超文本的 可以修改id的樣式

//操作css
id1.style.color = 'red' //style.什么：style方法修改css樣式,即可以在js里操作修改樣式
id1.style.padding = '2em' //屬性使用字串包裹

洗掉節點

洗掉節點的步驟：先獲取父節點，通過父節點洗掉自己，

<div id="father">
    <h1>標題一</h1>
    <p id='p1'>p1</p>
    <p class='p2'>p2</p>
</div>

<script>
    var self = document.getElementById('p1');
    var father = p1.parentElement; //找到p1的父節點
    father.removeChild(self) //通過父節點使用removechild刪掉自己(只有標記為id選擇器的節點才可以洗掉)

    //洗掉是一個動態的程序：
    father.removeChild(father.children[0])
    father.removeChild(father.children[1])
    father.removeChild(father.children[2])
</script>

注意：洗掉多個節點的時候，children 是在時刻變化的，洗掉節點的時候一定要注意，

插入節點

我們獲得了某個 dom 節點，假設這個 dom 節點是空的，我們通過 innerHTML 就可以增加一個元素了，但是如果這個 dom 節點已經存在元素，就不能這么干了，因為會發生覆寫，這個時候就使用追加節點的方法：

<p id="js">JavaScript</p>

<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>
    var js = document.getElementById('js'); //獲取想要加入的節點
    var list = document.getElementById('list'); //獲取想要加入的父節點
    list.appendChild(js); //在list節點下追加子節點
</script>

創建一個新的標簽

<script>
	var js = document.getElementById('js');//已經存在的節點
    var list = document.getElementById('list');
    
    //通過JS創建一個新的節點
    var newP = document.creatElement('p');//創建一個p標簽
    newP.id = 'newP';
    newP.innerText = 'Hello,idiot';
    
    //創建一個標簽節點
    var myScript = document.creatElement('script');
    myScript.setAttribute('type','text/javascript');
    
    //可以創建一個style標簽
    var myStyle = document.creatElement('style');//創建了一個空style標簽
    myStyle.setAttribute('type','text/css');
    myStyle.innerHTML = 'body{background-color:chartreuse;}';//設定標簽內容
    
    document.getElementByTagName('head')[0].appendChild(myStyle);
</script>

在前面插入節點：insertBefore

var ee = document. getElementById('ee');
var js = document . getElementById('js');
var list = document . getElementById('list');

//要包含的節點. insertBefore(newNode, targetNode)
list.insertBefore(js,ee); //在list節點中（list是父節點），在ee節點前加入目標節點js

操作表單

表單 form

文本框 <input type=text>
下拉框 <select></select>
單選框 <input type=radio>
多選框 <input type=checkbox>
隱藏框 <input type=hidden>
密碼框 passwd

獲取表單資訊

<body>
<form action='#' method="post">
    //文本框
    <p>
        <span>用戶名：</span>
        <input type="text" id="username">
    </p>
    
    //單選框
    <p>
        <span>性別</span>
        <input type="radio" name="sex" value="man" id="boy">男
        <input type="radio" name="sex" value="women" id="girl">女
    </p>
</form>
</body>

<script>
    var input_text = document.getElementById('username';)
    //得到文本框的值
    input_text.value
    //修改文本框的值
    input_text.value='123'
    
    var boy_radio = document.getElementById('boy';)
    var girl_radio = document.getElementById('girl')
    
    //對于單選框、多選課等固定的value,boy_radio.value只能去到當前的值
    boy_radio.checked; //看回傳的結果，是否為true，如果為true則被選中
    boy_radio.checked=true; //賦值
</script>

提交表單

iframe

通過一個隱藏的 iframe 可實作不重繪頁面進行提交表單，form 表單的 target 設定為 iframe 的 name 名稱，form 提交表單給當前頁面的 iframe，則不會重繪頁面，

<form action="#" method="post" target="t_i">
	<input type="text" name="name"/>
</form>   
<iframe name="t_i" style="display:none"></iframe>

submit

一般表單提交通過 type=submit 實作，input type="submit"，瀏覽器顯示為 button 按鈕，通過點擊這個按鈕提交表單資料跳轉到某個頁面，

<form action="#" method="post">
   <input type="text" name="name"/>
   <input type="submit" value="提交">
</form>

submit()

js 事件觸發表單提交，通過 button、鏈接等觸發事件，

<form id="form" action="#" method="post">
   <input type="text" name="name"/>
</form>

<script>
<!--js-->
document.getElementById("form").submit();
<!--jQuery-->
$("#form").submit(); 
</script>

ajax

采用 ajax 異步方式，通過 js 獲取 form 中所有 input、select 等組件的值，將這些值組成 Json 格式，通過異步的方式與服務器端進行互動，
一般將表單資料傳送給服務器端，服務器端處理資料并回傳結果資訊等，

<form id="form"  method="post">
   <input type="text" name="name" id="name"/>
</form>

<script>
var params = {"name", $("#name").val()}
$.ajax({
   type: "POST",
   url: "#",
   data: params,
   dataType : "json",
   success: function(msg){
   }
});
</script>

一般配合后端的 @ResponseBody 和 @RequestBody 使用，或者是 @RestController 這樣該類里面所有的方法都只會回傳 json 字串了，不用再每一個方法上都添加 @ResponseBody 了；

同時這里要注意的是，不能使用 dataType: "json"，不然會報 parsererror 的錯誤，因為 dataType: "json" 會試圖將 controller 的回傳值決議成 JSON ，但當回傳值是一個字串或者其他值時，它并不是一個真正的 JSON，決議器會決議失敗的！

ajax 請求中還要一個重要的引數：contentType: "application/json"，表示傳入引數的格式，一般會在后面加一個 charset=utf-8，減少亂碼，

XHR

AJAX 使用的 XMLHttpRequest 的物件與服務器通信，讓我們嘗試通過下面顯示的影像了解 AJAX 的流程或 AJAX 的作業原理，
　正如在上面的示例中所看到的，XMLHttpRequest 物件起著重要作用，

用戶從 UI 發送請求，JavaScript 中呼叫 XMLHttpRequest 物件，
HTTP 請求由 XMLHttpRequest 物件發送到服務器，
服務器使用 JSP，PHP，Servlet，ASP.net 等與資料庫互動，
檢索資料，
服務器將 XML 資料或 JSON 資料發送到 XMLHttpRequest 回呼函式，
HTML 和 CSS 資料顯示在瀏覽器上，

<script>
	var money = $("#money").val();
	var XHR = new XMLHttpRequest();
	var FD  = new FormData();
	FD.append("money",money);
	XHR.open('POST', "#");
	XHR.send(FD);
</script>

后記

掌握了這篇博文的內容后，完全能夠勝任一般的 JS 開發，要想更進一步，則需要自己繼續鉆研，加油，騷年！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/289889.html

標籤：其他

上一篇：一篇文章快速搞懂JavaScript事件回圈（微任務、宏任務），同步異步和阻塞非阻塞

下一篇：操作元素案例——購物車演示

軟體創新實驗室：JavaScript學習