當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
【JavaWeb】JavaScript基础篇+高级篇
生活随笔
收集整理的這篇文章主要介紹了
【JavaWeb】JavaScript基础篇+高级篇
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 1 介紹
- 2 ECMAScript
- 2.1 基本語法
- 2.2 基本對象
- 3 BOM
- 3.1 window窗口對象
- 3.2 location地址欄對象
- 3.3 history歷史記錄對象
- 4 DOM
- 4.1 概念
- 4.2 核心DOM
- 4.2.1 Document對象
- 4.2.2 Element對象
- 4.2.3 節點對象
- 4.2.4 案例：動態表格
- 4.2.5 內容切換
- 4.2.6 樣式設置
- 5 事件
- 5.1 基本概念
- 5.2 開燈關燈案例
- 5.3 常見事件
- 5.3.1 點擊事件
- 5.3.2 焦點事件
- 5.3.3 加載事件
- 5.3.4 鼠標事件
- 5.3.5 鍵盤事件
- 5.3.6 選擇并改變
- 5.3.7 表單事件
1 介紹
概念 ：JavaScript是一門客戶端腳本語言，運行在客戶端瀏覽器中，每一個瀏覽器都有JavaScript的解析引擎。【腳本語言：不需要編譯，直接可以被解析執行】
功能 ： 可以來增強用戶和html頁面的交互過程，可以來控制html同元素讓頁面有動態的效果，增強用戶體驗
JavaScript發展史
- 1992年，Nombase第一門客戶端腳本語言C- -專門用于表單的校驗。 后更名為ScriptEase。
- 1995年，Netscape網景公司開發了LiveScript。后來請來了SUN公司的專家修改LiveScript，并蹭熱度命名為JavaScript。
- 1996年，微軟開發出JScript語言。
- 1997年，ECMA提出ECMAScript作為客戶端腳本語言的標準。
- JavaScript = ECMAScript + JavaScript特有的【BOM +DOM】
2 ECMAScript
2.1 基本語法
與html的結合方式
- 內部JS：定義<script> XXXXX</script> XXXXX是Script代碼
- 外部JS：定義<script src=“XXX.js”> </script>通過src引入外部的js文件
- 可以定義多個script標簽
- 可以定義在html任何位置 但位置會影響執行順序
注釋
- 單行注釋：/ /
- 多行注釋：/* */
數據類型
- 原始類型：number【整數、小數、NAN】、string、boolean、null【對象為空的占位符】、undefined【未定義 如果沒有初始化的默認賦值】
- 引用類型：對象
變量
-var 變量名 = 初值 定義變量
-typeof(變量名) 查看變量類型，null的typeof是object
變量是一小塊存儲數據的內存空間
Java是強類型的語言，JavaScript是弱類型的語言。強類型在開辟變量存儲空間時定義了空間將來存儲數據的數據類型，只能存固定類型的數據。
運算符
- 一元運算符：
在JS中如果運算數不是運算符要求的類型 js引擎會將運算數進行類型轉換
string轉number：按字面值轉或NAN NAN和其他數值運算結果是NAN
boolean轉number：true轉1 false轉0 - 算數運算符
- 賦值運算符
- 比較運算符：===全等于在比較前先判斷類型 如果類型不一樣直接false
- 邏輯運算符
- 三元運算符：條件？表達式1：表達式2
number轉boolean：0或NAN為假 其他為真
string轉boolean：除了空串 其他都是真
null和undefined：都是假
對象轉boolean：都是真
流程控制語句
- if...else
- switch
java switch可以接收byte、int、short、char、枚舉、字符串
js switch可以接收所有數據類型 - while
- do...while
- for
特殊語法
- 語句以分號結尾，如果一行只有一條語句則可省，不建議不寫分號。
- 變量定義使用var關鍵字，也可以不使用var。用var定義的是局部變量，不用var定義的是全局變量。
練習：打印99乘法表
2.2 基本對象
Boolean
Number
String
Function
Function是函數對象，同名對象會覆蓋。方法的調用只和命名有關和參數列表無關。
在方法聲明中有一個隱藏的內置數組對象arguements，封裝了所有的參數。
例如：求任意個數的和
<script>// 求任意個數的和function f() {var sum = 0;for(var i = 0; i < arguments.length; i++){sum+=arguments[i];}return sum;}var sum = f(1,2,3,4,5);alert(sum);</script>Array
- var arr = new Array(元素列表)創建方法1
- var arr = new Array(默認長度)創建方法2
- var arr = [原始列表]創建方法3
- 特點：元素類型可變，長度可變
- 方法：
- join(拼接符號)將元素拼接為字符串
- push(添加元素)在末尾添加元素
Date
<script>var date = new Date();document.write(date.toLocaleString()+"<br>")//返回當前date對象對應的os的字符串格式// 2100/2/18 下午3:00:16document.write(date.getTime())//獲取時間戳</script>Math
Math對象不用創建直接使用
Math.Random 返回 [0,1) 的隨機數
Math.ceil向上取整 Math.floor向上取整
Math.round四舍五入取整
獲取1~100的隨機正整數
<script>// [0,1) ---> [0,99.999999] ---> [0,99] ---> [1,100]var rand = Math.random()*100;document.write(Math.floor(rand+1));</script>RegExp正則表達式對象
正則表達式：
- 單個字符：[]
如：[a] [ab] [a-zA-Z0-9]
特殊符號表示：
\d單個數字字符[0-9]
\w單個單詞字符[a-zA-Z0-9_] - 量詞符號：
*表示出現0次或多次
?表示出現0次或1次
+表示出現1次或多次
{m,n}表示數量大于等于m小于等于n，如果m缺省表示至多n個，如果n缺省表示最少m次。 - 開始：^ 結尾：$
正則表達式對象：
- var reg = new RegExp("正則表達式")
- var reg = /正則表達式/
test方法驗證字符串是否符合正則表達式
<script>var a = new RegExp("[0-9]{11}");var b = /^\\ w{2,9}$/;var username = "zhangsan";//truevar flag1 = b.test(username);var password = 12345678910;//turepassword = 213;//falevar flag = a.test(password);alert(flag);</script>Global全局對象
- 特點：用Global封裝的方法不需要對象就可以直接調用
- decodeURI()/encodeURI()uri編碼/解碼
- decodeURIComponent()/encodeURIComponent()uri編碼解碼
- 上面的方法功能一樣 Component可以編碼的字符更多
- parseInt：將字符串轉為數字，逐一判斷每一個字符是否是數字，直到遇到非數字， 將數字部分轉為number
- isNaNNaN參與的==比較全為false，用這個方法判斷是不是NaN
- eval將JS字符串轉為腳本執行
3 BOM
navigator瀏覽器對象和screen屏幕對象：略
3.1 window窗口對象
不需要創建對象 可以直接用window.方法名調用，且window引用可以省略
彈出方法：
- alter()彈出警告框
- confirm()顯示帶一段消息及確認按鈕和取消按鈕的對話框。確定按鈕返回true，否則false。
- prompt()用戶輸入框
打開方法
- close()：關閉自己，哪個window對象調用close，close就關閉誰
- open()：可以傳入url作為參數 不傳參數則打開空網頁
定時器方法
- setTimeout()在指定的毫秒數后調用函數或計算表達式
- clearTimeout()取消setTimeout方法設置的timeout
- setInterval()按照周期調用函數
- clearInterval()取消set方法設置的timeout
案例：輪播圖
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><img id="pic" src="img/banner_1.jpg" width="100%"> </body> <script>setInterval("fun()",1000);var number = 1;function fun() {number ++;if(number > 3){number = 1;}var elementById = document.getElementById("pic");elementById.src = "img/banner_"+number+".jpg"} </script> </html>3.2 location地址欄對象
location是window的屬性值 可以通過window.location獲取 也可以直接寫location
- reload() 重新加載
- href() 獲取href
案例：自動跳轉
3.3 history歷史記錄對象
history是window的屬性值 可以通過window.history獲取 也可以直接寫history length屬性可以返回當前窗口歷史列表中的URL數量 歷史記錄是指當前window可以前進后退的窗口數量
- back：后退
- forward：前進
- go：前進或后退
4 DOM
4.1 概念
文檔對象模型，將標記語言文檔的各個組成部分，封裝為對象，可以使用這些對象，對標記語言文檔進行CRUD的動態操作
W3C DOM的標準被分為三個部分：
- 核心DOM 針對任何結構化文檔的標準模型【Document、Element、Attribute、Text、Comment、Node(其他5個的父對象)】
- XML DOM 針對XML文檔的標準模型
- HTMLDOM 針對HTML文檔的標準模型
4.2 核心DOM
4.2.1 Document對象
在HTML DOM中可以通過window.document或document獲取
- 獲取Element對象
- getElementById()查找具有指定的唯一ID的元素
- getElementByTagName根據元素名稱獲取元素對象們，返回值是一個數組
- getElementsByClassName()根據Class屬性值獲取元素對象們，返回值是一個數組
- getElementsByName()根據name屬性值獲取元素對象們，返回值是一個數組
- 創建其他DOM對象
- createAttribute()
- createElement()
- createTextNode()
- createComment()
4.2.2 Element對象
通過document來獲取和創建
-removeAttribute()刪除屬性
-setAttribute()設置屬性
點擊按鈕設置屬性：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><a>點擊</a><input type="button" id="btn" value="設置屬性"> </body> <script>var btn = document.getElementById("btn");btn.onclick = function () {var element_a = document.getElementsByTagName("a")[0];element_a.setAttribute("href","https://www.baidu.com");} </script> </html>4.2.3 節點對象
其他五個對象的父對象
所有的dom對象都可以被認為是一個節點
- appendChild()向節點的子節點列表的結尾添加新的子節點
- removeChild()刪除并返回當前節點的指定子節點
- replaceChild()用新節點替換子節點
4.2.4 案例：動態表格
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>div{text-align: center;margin: 50px;}table{border: 1px solid;margin: auto;width: 500px;}td,th{text-align: center;border: 1px solid;}</style> </head> <body> <div><input type="text" id="id" placeholder="請輸入編號"><input type="text" id="name" placeholder="請輸入姓名"><input type="text" id="gender" placeholder="請輸入性別"><input type="button" id="add" value="添加"> </div><table><caption>學生信息表</caption><tr><th>編號</th><th>姓名</th><th>性別</th><th>操作</th></tr> </table> <script>document.getElementById("add").onclick = function(){var id = document.getElementById("id").value;var name = document.getElementById("name").value;var gender = document.getElementById("gender").value;var table = document.getElementsByTagName("table")[0];//追加一行table.innerHTML += "<tr>\n<td>"+id+"</td>\n" +" <td>"+name+"</td>\n" +" <td>"+gender+"</td>\n" +" <td><a href=\"javascript:void(0);\" οnclick=\"delTr(this);\" >刪除</a></td>\n" +"</tr>";}function delTr(obj){var table = obj.parentNode.parentNode.parentNode;var tr = obj.parentNode.parentNode;var th = obj.parentNode;table.removeChild(tr);} </script> </body> </html>4.2.5 內容切換
用來控制html文檔的內容
-document.getElementById(id值)獲取頁面標簽（元素）對象Element
操作Element對象：
- 明確要獲取的對象是哪個
- 查API文檔找有哪些屬性可以設置
- 獲取元素對象
- 使用innerHTML屬性修改標簽體內容
4.2.6 樣式設置
通過元素的style屬性來設置
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id = "div1">div1</div> </body> <script>var div1 = document.getElementById("div1");div1.onclick = function () {div1.style.border = "1px solid red";div1.style.width = "200px";div1.style.fontSize = "200px";} </script> </html>通過提前定義的類選擇器的樣式，通過元素的className屬性來設置class屬性值
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.d1{border: 1px solid red;width: 100px;height: 100px;}.d2{border: 1px solid blue;width: 100px;height: 100px;}</style> </head> <body><div id = "div1">div1</div><div id = "div2">div2</div> </body> <script>var div1 = document.getElementById("div1");div1.onclick = function () {div1.className = "d1";}var div2 = document.getElementById("div2");div2.onclick = function () {div2.className = "d2";} </script> </html>5 事件
5.1 基本概念
功能：某些組件被執行某些操作后，觸發程序的執行。
綁定事件：
方法1 直接在html標簽上指定事件的屬性，屬性值就是js代碼
方法2 通過js獲取元素對象，指定事件屬性，設置一個函數
5.2 開燈關燈案例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><img id="light" src="img/off.gif" onclick="onclick();"> </body> <script>var light = document.getElementById("light");//一開始燈是關的var flag = false;light.onclick = function() {if(flag){light.src = "img/off.gif";flag = false;}else{light.src = "img/on.gif";flag = true;}} </script> </html>5.3 常見事件
5.3.1 點擊事件
- onclick：單擊事件
- ondnlclick：雙擊事件
5.3.2 焦點事件
- onblur：失去焦點
- onfocus：元素獲得焦點
5.3.3 加載事件
- onload：頁面/圖加載完成
5.3.4 鼠標事件
- onmousedown：鼠標被按下
- onmouseup：鼠標被松開
- onmousemove：鼠標被移動
- onmouseover：鼠標被移動在某元素之上
- onmouseout：鼠標被移開
5.3.5 鍵盤事件
- onkeyup：鍵盤按鍵被松開
- onkeydown：鍵盤按鍵被按下
- onkeypress：按下并松開
5.3.6 選擇并改變
- onchange
- onselect
5.3.7 表單事件
- onsubmit：提交
- onreset：重置
總結
以上是生活随笔為你收集整理的【JavaWeb】JavaScript基础篇+高级篇的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Session-basedRecomme
- 下一篇： gradle idea java ssm