javascript
JavaScript框架从入门到精通
文章目錄
- 靜態網頁和動態網頁
- 動態網頁
- 網頁是如何和后端交互的呢？
- JS概述
- 什么是JS
- 名詞解釋
- 特點和優勢
- 入門案例
- HTML中引入JS
- 通過script標簽引入JS代碼
- 通過script標簽引入外部的JS文件
- JS語法
- 注釋
- 基本數據類型
- 復雜數據類型
- JS的變量
- JS的運算符
- JS語句
- if..else語句
- switch…case語句
- 循環語句
- JS數組
- JS數組的聲明方式
- 數組需要注意的細節
- 數組的常見操作
- JS函數
- 方式一：通過function關鍵字聲明函數
- 方式二：通過函數直接量聲明函數
- JS對象
- 內置對象
- 自定義對象
- DOM樹的作用
- 組成
- DOM樹結構
- Document對象
- dom.html
- 總結
- json
- 概念
- 作用
- 語法
- 轉換工具
- 測試
- ajax
- 概述
- 原理
- 核心對象XMLHttpRequest
- 測試
- console調試網頁
- Chrome
- log
- warn
- table
靜態網頁和動態網頁
動態網頁
我們有了html超文本標記語言實現了網站頁面展現，展現文字、表格、圖片、超鏈接等，有了css樣式表實現了頁面的美化，這些技術實現了靜態網頁。
日常展現是已經足夠了，但是如果我們要做個注冊功能呢？如論壇，我們注冊個論壇來發文章，聊天。這就帶來一個問題，信息如何根據不同的使用者，展現不同的內容呢？再如我注冊登錄和你注冊登錄，我們在網站上顯示的登錄名稱就不同。這html+css就無能為力了，它們無法實現，那誰能辦到呢？這時javascript就派上用場了。它能實現瀏覽器用戶和后臺服務器進行交互。注冊、登錄、添加商品到購物車、下訂單對它而言都是小菜一碟。有了javascript的加入，實現頁面和后臺系統的交互，實現用戶信息的注冊，實現用戶的登錄，實現個性化的數據展現，功能強大不老少。業界把這樣的網頁稱為動態網頁，把這樣的網站稱為動態網站。
簡而言之，靜態網站只能看，不同瀏覽者看到內容一致不能變化；動態網站可以讀寫數據，內容根據不同瀏覽者展示不同的信息。
網頁是如何和后端交互的呢？
動態網站的軟件架構是怎樣的呢？
用戶訪問頁面，頁面觸發事件創建XHR對象，進行ajax請求，請求訪問服務器端，請求被web中間件攔截并進行處理，由控制層框架springmvc中的controller進行接收，controller請求業務層spring框架的service服務，service請求持久層mybatis框架的mapper映射，mapper訪問數據庫。操作完數據庫，返回結果，mybatis封裝成java對象傳回service，service把java對象傳回controller，controller把java對象又轉換為json字符串，然后傳回瀏覽器，瀏覽器傳回給調用者XHR，XHR調用回調方法callback，callback進行json字符串的解析，從中拿到要展現的數據，通過javascript處理，最終回顯到頁面上。
可以看到這個調用過程是非常復雜的，跨越網絡，跨域多個服務器，很多技術應用其中，而這一切的始作俑者是誰呢？誰讓這一切成為可能，它就是javascript，它實現了用戶的請求和響應，實現了數據的動態展現，使早期靜態的網站走向了動態的網站。
JS概述
什么是JS
JavaScript 是 web 前端開發者必學的三種語言之一：
- HTML 定義網頁的內容 H5
- CSS 規定網頁的布局 CSS3
- JavaScript 實現網站的交互 ES6
JavaScript在1995年由Netscape公司的Brendan Eich，在網景導航者瀏覽器上首次設計實現而成。因為Netscape與Sun合作，Netscape管理層希望它外觀看起來像Java，因此取名為JavaScript。但實際上它們根本沒有關系，java是強語言幾乎無所不能，而javascript是腳本語言，只局限于瀏覽器。
JavaScript遵循ECMA國際組織頒布的ECMAScript標準。截至 2012 年，所有瀏覽器都完整的支持ECMAScript 5.1，舊版本的瀏覽器至少支持ECMAScript 3 標準。2015年6月17日，ECMA國際組織發布了ECMAScript 的第六版，簡稱為ES6。它的目標是使得JavaScript語言可以用來編寫復雜的大型應用程序，成為企業級開發語言。很多js相關技術都遵循這個標準，如目前最受歡迎的Vue。
微軟出了符合規范類似javascript的稱為js，但一般開發者忽略它們的差異，全稱就習慣叫javascript，簡稱就習慣叫js。
全稱JavaScript，是一種弱類型語言，同其他語言一樣，有它自身的語法，數據類型，表達式，算術運算符等。
JS是一門 基于對象 和 事件驅動 的 腳本語言 ，通常用來提高網頁與用戶的交互性。
名詞解釋
基于對象：它不僅可以創建對象,也能使用現有的對象。JS沒有類的概念，也沒有編譯的過程。是一邊解釋一邊執行。
事件驅動：在JS中，大部分情況下都是通過事件觸發驅動函數執行的，從而實現特定的功能。（比如點擊div將內容替換為時間、當鼠標滑過元素，元素就有翻轉的動態。）
腳本語言：在網絡前端開發環境下，用于嵌入在客戶端瀏覽器中的一段小程序。
特點和優勢
特點：
(1)JS是一門直譯式的語言，直接執行的就是源代碼.
是一邊解釋一邊執行，沒有編譯的過程（不像Java需要提前編譯為class文件再運行）.
(2)JS是一門弱類型的語言,沒有嚴格的數據類型.
優勢：
(1)良好的交互性
(2)一定的安全性(JS被強制的要求,不能訪問瀏覽器以外的東西,只能訪問瀏覽器和瀏覽器內部的資源)
(3)跨平臺性(Java語言具有跨平臺性,是因為有虛擬機)
只要有瀏覽器的地方都能執行JS
入門案例
<head><title>hello</title><meta charset="utf-8"/><script>/* JS代碼 */ alert(100);function fn(){alert("111");}</script> </head> <body><a href="#" onclick="fn();">鼠標點擊事件...</a> </body>HTML中引入JS
通過script標簽引入JS代碼
<head><meta charset="utf-8"/><script>/* JS代碼 */function fn(){alert("JS的第1種引入方式");}</script> </head> <body><div id="div1" onclick="fn();">Hello JavaScript</div> </body>通過script標簽引入外部的JS文件
創建1.js文件
function fn(){alert("JS的第2種引入方式"); }在html中引入文件
<head><meta charset="utf-8"/><script src="1.js"> </script> </head> <body><div id="div1" onclick="fn();">Hello JavaScript</div> </body>注意：不要同時通過一個script標簽引入JS代碼和JS文件，會導致代碼不會執行！比如：
<script src="demo1.js">alert("哈哈哈哈。。。");//代碼不會執行！！ </script>JS語法
注釋
單行注釋： //注釋內容
多行注釋： /* 注釋內容 */
基本數據類型
包括:number/string/boolean/null/undefined
(1) 數值類型-number
在JS中，數值類型只有一種，就是浮點型。
在JS中，需要時會自動的進行數據類型的轉換，比如：在顯示和處理的時候，浮點型和整型會自動的轉換。
2.4+3.6=6;Infinity ： 正無窮大-Infinity ： 負無窮大NaN : Not a Number 非數字， 和任何值都不相等，包括它本身(2) 字符串類型-string
在JS中，字符串是基本數據類型。
在JS中，字符串直接量是通過單引號或者雙引號引起來。
var str1 = "Hello…";var str2 = 'CGB2103…';;alert(str1);(3) 布爾類型-boolean
值為true或者是false；
var s1 = false;console.log(s1);(4) undefined
值只有一個就是undefined。表示變量沒有初始化值。
比如：
a) var num; alert(num);//聲明了變量但是沒有為變量賦值，該變量的值就是undefined。b) 或者訪問一個對象上不存在的屬性時，也是undefined。c) 或者訪問數組中一個沒有的元素的位置時，該位置處的值也是undefined.(5) null
值也只有一個，就是null。表示空值或者不存在的對象。
復雜數據類型
函數、數組、對象（自定義對象、內置對象、DOM對象、BOM對象…）
JS的變量
js是弱類型語言，所有類型的變量都是用var關鍵字定義。并且參數的類型可以隨時轉換。
javascript沒有類似采用靜態語言類型，如java的變量類型是編譯期就確定的；而它采用了動態類型，也就是說在編譯期類型不確定，運行時會動態根據變量的賦值來決定它的類型，這點比較靈活。這也是雙刃劍，編譯期就難以檢查出其賦值的錯誤。
練習:變量交換
(1) 在JS中是通過 var 關鍵字來聲明一個變量
var a=1; alert(a);var x=true; alert(x);var y=10.8; alert(y);(2) 在JS中聲明的變量是不區分類型的， 可以指向任意的數據類型。
var a = 1; a=true; a=100; alert(a);//100function x(){var m = 10;alert("局部變量:"+m);alert("全局變量:"+a); } alert("局部變量2:"+m);//局部變量失效,報錯JS的運算符
JS中的運算符和Java中的運算符大致相同
算術運算符: +，-，*，/，%，++，–
賦值運算符: =，+=，-=，*=，/=，%=
比較運算符: ==，!=, =，!, > ，< ，>=，<=
位運算符: & ， |
邏輯運算符: &&，||
前置邏輯運算符: ! (not)
三元運算符: ? :
常見運算符測試
var a = 3; var b = 1; console.log(a+b);//4 a+=4; console.log(a+b);//8 //a+=4; console.log(a==b); //true console.log(a==="3"); //false 如果兩邊比較的值不是同一種數據類型，===直接返回false，如果是同一種數據類型，==和===沒有區別！ console.log("1"=="1"); //true //由于JS中字符串是基本數據類型，比較字符串相等通過 == 進行！ var a = 1; alert(a++);//1 alert(++a);//3 alert(++a+a+++a);//4+4+5 alert(a>3?10:8); var b = 10; alert(a>b?a:b);//求兩個數里的大數 var c = 8; var d = a>b?(a>c?a:c):(b>c?b:c); alert(d);//三個數里的大值typeof運算符: 用于返回變量或者表達式 的數據類型
var i = 3; console.log(typeof i);//number i=true; console.log(typeof i);//boolean i="hello"; console.log(typeof i);//string console.log(typeof 123+"abc");//numberabc console.log(typeof (123+"abc"));//stringJS語句
JS中的語句和Java中的語句用法也大致相同
if…else語句
var i = 3; if(i==4){ alert(“yes”); }else{ alert(“no”);//no } 例子: 接收用戶輸入的成績，判斷成績所屬的等級 80~100(包括80，也包括100) 優秀 60~80(包括60，但不包括80) 中等 0~60(包括0，但不包括60) 不及格 其他值 輸入有誤 // prompt函數可以彈框提示用戶輸入成績, 并返回用戶輸入的內容 var score = prompt("請輸入您的成績："); console.log( score ); if( score >= 80 && score <=100 ){alert("您的成績屬于：優秀！"); }else if( score >= 60 && score < 80 ){alert("您的成績屬于：中等！"); }else if( score >= 0 && score < 60 ){alert("您的成績屬于：不及格！"); }else{alert("您輸入的成績不合法，請重新輸入！"); }switch…case語句
var day = 3; switch( day ){case 1: alert("今天是星期一");break;case 2: alert("今天是星期二");break;case 3: alert("今天是星期三");break;case 4: alert("今天是星期四");break;case 5: alert("今天是星期五");break; }循環語句
for(var i=0;i<5;i++){alert( i ); console.log(i); } var i=0; while(i<5){ alert(i); i++; } var sum = 0; for( var i=1; i<=100; i++ ){sum += i; //sum = sum+i; } console.log(sum ); //沒有增強for循環注意： JS中的語句，判斷條件可以不是boolean類型，因為JS中會自動進行數據類型的轉換。
JS數組
JS數組用于在單個的變量中存儲多個值(其實就是一個容器)。
JS中的數組可以存儲例如：數值、字符串、布爾值、undefined、null、對象、函數等
JS數組的聲明方式
var arr1 = new Array();//聲明一個空數組 var arr2 = new Array("abc", "hello", true);//聲明一個具有初始值的數組 alert(arr2.length);//3 var arr4 = [];//聲明一個空數組 alert(arr4.length);//0 arr4 = ["abc", "hello", true];//聲明一個具有初始值的數組 alert(arr4);數組需要注意的細節
(1)JS數組中可以存放任意的數據類型
(2)JS中的數組長度可以被改變
var arr1 = [];//聲明一個空數組 console.log( arr1.length ); //此時數組長度為 0 arr1.length = 10; console.log( arr1.length ); //此時數組長度為 10 arr1[99] = "abc"; console.log( arr1.length ); //此時數組長度為 100 arr1.length = 0; console.log( arr1.length ); //此時數組長度為 0數組的常見操作
length屬性 -- 獲取數組的長度，還可以改變數組的長度 var a = [1,2,3]; alert(a.length); var arr = [123, "abc", false, new Object() ] //遍歷數組 for( var i=0; i< arr.length; i++ ){console.log( arr[i] ); } //for..in for(var i in a){console.log("i:::"+i); } //循環接收用戶輸入，將數據存儲在數組中，直至輸入‘exit’結束 c(); function c(){var a=[];for(;;){var x=prompt("請輸入整數:");a[a.length]=x; if(x=="exit"){break;}}console.log(a); }JS函數
函數就是一個具有功能的代碼塊, 可以反復調用
函數就是包裹在花括號中的代碼塊，前面使用了關鍵詞 function
方式一：通過function關鍵字聲明函數
聲明：function 函數名稱([參數列表]){ 函數體 } 調用: 函數名稱([參數列表]); 案例： function a(){ //無參函數定義var a = [1,2,3,4,5]; //定義數組var sum =0; //定義變量for (var i = 0; i <a.length; i++) {if(a[i]%2==0){sum+=a[i];}}alert(sum); } a();//函數調用 function b(x,y){//定義含參函數alert(x+y); } b(1,"2");//函數調用 b(1,2);//函數調用方式二：通過函數直接量聲明函數
聲明：var 函數名稱 = function([參數列表]){ 函數體 } 調用: 函數名稱([參數列表]); 案例： // fn2(); //這種方式定義的函數還未加載就調用,會報錯.方式1沒問題 var fn2 = function(){ //定義無參函數alert(100); } fn2(); //函數調用var fn3 = function(x,y){ //定義含參函數alert(x*y); } fn3(0.32,100);//函數調用 fn2("王海濤");參數個數不匹配，王海濤undefined var e = function(x,y){ //定義有返回值含參函數return x-y; } alert("函數返回值:::"+ e(1.1,10.9) ); //函數調用注意: 在JS中調用函數時, 傳遞的參數個數如果與聲明的參數個數不相同, 也不會報錯。
但是最好按聲明的個數來傳遞, 因為個數不符, 可能會引發一些問題！！！
JS對象
利用function關鍵字聲明對象，用new關鍵字創建對象。
內置對象
String/Array/Number/Math/JSON…
Window對象–代表瀏覽器中一個打開的窗口,了解一下即可，很多被UI替代
//String對象的功能 let a = 'javascript'; console.log( a.length ); //獲取字符串的長度 console.log( a.toUpperCase() ); //全轉大寫 let b = a.substring(1,5); //截取字符串[1,5) console.log( b ); console.log( a.concat('hello ~') ); //拼串 //Math對象 console.log( Math.PI );//π的值 console.log( Math.random() ); //隨機數0~1 console.log( Math.random() * 10 ); console.log( Math.round(1.9) );//對小數的處理,round四舍五入 console.log( Math.round(1.1) );//對小數的處理,round四舍五入 //Array對象 let c = [3,21,4,5,2]; console.log( c ); console.log( c.toString() );//打印數組里的數據 console.log( c.sort() ); //對數組排序 //window對象--可以省略 window.alert(100);//彈出框 window.prompt(); //輸入框 window.confirm() ;//確認框Document對象–代表整個HTML文檔，可用來訪問頁面中的所有元素
document.write() 動態向頁面寫入內容 document.getElementById(id) 獲得指定id值的元素 document.getElementsByName(name) 獲得指定Name值的元素學會簡單使用，后期被jQuery封裝，在后期被Vue框架封裝
自定義對象
(1)方式一：
上面展示了js的強大！js的牛掰之處就在于，它的屬性可以邊寫邊創建，非常靈活，而java不行，必須先定義。
(2)方式二:
var p2 = {"pname":"李四","page":100,"psay":function(){/* this使用p2里定義的 */console.log(this.pname+this.page);}}console.log(p2);p2.psay(); /* 函數調用*/DOM樹的作用
組成
- ECMAScript描述了javascript語言的語法和基本對象
- 文檔對象模型DOM（Document Object Model）與HTML網頁API接口
- 瀏覽器對象模型BOM（Browser Object Model），與瀏覽器進行交互的API接口
核心對象有：window瀏覽器窗口，navigator瀏覽器信息，location瀏覽器當前地址信息，history瀏覽器歷史信息，screen用戶屏幕信息。
DOM非常重要，實際開發更多通過js操作DOM對象實現對html頁面的操作，BOM也用，比較少用。所以學習重點放在DOM上。
DOM樹結構
DOM 是一項 W3C (World Wide Web Consortium) 標準，DOM（Document Object Model）文檔對象模型為JS操作html文檔所提供的一套API，通過這套API可以很方便的對html元素進行訪問及增刪改查操作。
Document對象
--獲取對象: window.document --調用方法: getElementById("元素的id的屬性的值")--返回1個元素getElementsByName("元素的name屬性的值")--返回多個元素(用數組)getElementsByClassName("元素的class屬性的值")--返回多個元素(用數組)getElementsByTagName("元素的標簽名的值")--返回多個元素(用數組) write()--向文檔寫 HTML 表達式 或 JavaScript 代碼 title--返回網頁的標題 id--設置或返回元素的id innerHTML--設置或返回元素的內容dom.html
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>DOM解析</title><!-- js --><script>function a(){/* 按id獲取,返回1個 */var x = document.getElementById("div1");x.innerHTML="<h1>你好div</h1>";/* 按name屬性值獲取,返回多個*/var y = document.getElementsByName("div2"); console.log(y);//NodeListy[0].innerHTML="hello js...";/* 按class屬性值獲取,返回多個*/var z = document.getElementsByClassName("span1");console.log(z);//HTMLCollectionz[0].innerText="<p>我變了</p>"/* 按照標簽名獲取,返回多個 */var m = document.getElementsByTagName("div");console.log(m);//HTMLCollectionm[1].style.fontSize=30+"px";}</script></head><body><div id="div1" onclick="a();">我是div1</div><div name="div2" onclick="a();">我是div2</div><span class="span1">我是span1</span><span class="span1">我是span2</span><a name="div2" id="a1">我是a</a><!-- js事件: --> <a href="#" onclick="method();">單擊觸發js</a><a href="#" ondblclick="method2();">雙擊觸發js</a><a href="#" onmouseenter="method3();">滑過觸發js</a><a href="#" onmouseleave="method4();">滑走觸發js</a> <button onkeydown="alert(1);">點我</button></body> </html>總結
獲取頁面元素的4種方式:
- getElementsByTagName 標簽名稱，得到數組
- getElementsByName name屬性，得到數組
- getElementsByClassName class屬性，得到數組
- getElementById id屬性，單個值
注：dom樹在描述標簽時除id方式，其它都是以數組形式體現，哪怕是一個元素。
json
概念
ajax往往要完整應用還會配合一個技術：JSON，那什么是JSON呢？
JSON 指的是 JavaScript 對象表示法（JavaScript Object Notation）
JSON(JavaScript Object Notation，JS 對象簡譜) 起名不咋地，非常拗口，我們就記住它是一種輕量級的數據交換格式即可。它基于 ECMAScript (js規范)的一個子集，采用完全獨立于編程語言的文本格式來存儲和表示數據。簡潔和清晰的層次結構使得 JSON 成為理想的數據交換語言。是xml的終結者，成為主流開發方式（ajax異步請求，json返回）。
作用
JSON 是存儲和交換文本信息的語法。當數據在瀏覽器與服務器之間進行交換時，這些數據只能是文本。JSON 屬于文本，并且我們能夠把任何 JavaScript 對象轉換為 JSON，然后將 JSON 發送到服務器。我們也能把從服務器接收到的任何 JSON 轉換為 JavaScript 對象。以這樣的方式，我們能夠把數據作為 JavaScript 對象來處理，無需復雜的解析和轉譯。
語法
JSON數據:
var a =' "firstName" : "John" 'JSON 對象:
var a = '{ "firstName":"John" , "lastName":"Doe" }'JSON 數組:
var a = '[{ "firstName":"Bill" , "lastName":"Gates" },{ "firstName":"George" , "lastName":"Bush" }]';轉換工具
使用JS里的內置對象JSON.用來把以 JSON 格式寫的字符串 和 原生 JavaScript 對象互轉.
給服務器發送數據: 將JS對象轉成JSON字符串 JSON.stringify(Js對象) 接受服務器的數據: JSON字符串轉成JS對象 JSON.parse("json字符串")測試
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>json</title><script>//json用來在瀏覽器和服務器之間做數據傳輸,輕量級,格式簡單明了.//JSON是js的內置對象,用來把json類型的字符串和js對象互轉//json類型的字符串---{ "k1":"v1", "k2":"v2", "k3":"v3" }function jschuan(){var jsonchuan = '{ "k1":"v1", "k2":"v2", "k3":"v3" }';document.getElementById("h").innerHTML=jsonchuan;}function chuan2js(){var text='{ "k1":"v1", "k2":"v2", "k3":"v3" }';console.log(text);//從服務器收到的數據都是字符串,轉成js對象,用js語法解析屬性/方法var jsobj = JSON.parse(text);//串轉js對象,就可以寫js代碼解析數據console.log(jsobj);document.getElementById("d").innerHTML=jsobj.k2;}function js2chuan(){var obj = {"k1":"v1", "k2":"v2", "k3":"v3"};console.log(obj);//把瀏覽器的數據發給服務器,服務器只要json串var text = JSON.stringify(obj);//js對象轉成串document.getElementById("p1").innerHTML=text;console.log(text);console.log(text.length);}</script></head><body><p id="p1" onclick="js2chuan();">我是p</p><div id="d" onclick="chuan2js();">我是div</div><h1 id="h" onclick="jschuan();">我是h1哦</h1></body> </html>ajax
概述
AJAX = Asynchronous JavaScript And XML. AJAX 并非編程語言。
Ajax 允許通過與場景后面的 Web 服務器交換數據來異步更新網頁。這意味著可以更新網頁的部分，而不需要重新加載整個頁面。
原理
核心對象XMLHttpRequest
所有現代瀏覽器都支持 XMLHttpRequest 對象。
XMLHttpRequest 對象用于同幕后服務器交換數據。這意味著可以更新網頁的部分，而不需要重新加載整個頁面。
測試
console調試網頁
Chrome
專業人用專業的工具，瀏覽器調試谷歌、火狐最佳，使用F12打開調試窗口。也可以快捷鍵打開：ctrl+shift+i。
- 支持自動補全，提示下，按tab鍵補全
- 清除日志
- Console控制臺菜單
log
warn
table
以表格形式展現：
總結
以上是生活随笔為你收集整理的JavaScript框架从入门到精通的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 8s nfs 挂载文件_把你的树莓派家庭
- 下一篇： Shell重定向的概念笔记