當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

【JavaWeb】JavaScript基础篇+高级篇

發布時間：2024/7/5 javascript 41 豆豆

生活随笔收集整理的這篇文章主要介紹了【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乘法表

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>td{border: 1px solid;}</style><script>document.write("<table align='center'>");for(var i = 1; i <= 9; i ++){document.write("<tr>");for(var j = 1; j <= i; j++ ){document.write("<td>");document.write(i +"×" + j +"=" + i*j + "&nbsp&nbsp&nbsp");document.write("</td>");}document.write("</tr>");}</script> </head> <body>  </body> </html>

2.2 基本對象

Boolean
Number
String

Function
Function是函數對象，同名對象會覆蓋。方法的調用只和命名有關和參數列表無關。

<script>function f(a, b) {alert(a + b);}`在這里插入代碼片`f(1,3);</script>  <script>var fun = function (a,b) {alert(a + b);}fun(8,9);</script>

在方法聲明中有一個隱藏的內置數組對象arguements，封裝了所有的參數。

例如：求任意個數的和

Array

var arr = new Array(元素列表)創建方法1
var arr = new Array(默認長度)創建方法2
var arr = [原始列表]創建方法3
特點：元素類型可變，長度可變
方法：
join(拼接符號)將元素拼接為字符串
push(添加元素)在末尾添加元素

Date

Math
Math對象不用創建直接使用
Math.Random 返回 [0,1) 的隨機數
Math.ceil向上取整 Math.floor向上取整
Math.round四舍五入取整

獲取1~100的隨機正整數

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方法驗證字符串是否符合正則表達式

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

案例：自動跳轉

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>p{text-align: center;}span{color: red;}</style> </head> <body><p> <span id="time">5</span>秒之后,自動跳轉到百度首頁</p> </body> <script>var second = 5;var time = document.getElementById("time");function showTime(){second --;time.innerHTML = second + "";if(second==0){location.href = "https://www.baidu.com";}}setInterval(showTime, 1000); </script> </html>

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()用新節點替換子節點

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>div{border: 1px solid red;}#div1{width: 200px;height: 200px;}#div2{width: 100px;height: 100px;}</style> </head> <body><div id="div1"><div id="div2">div2</div>div1</div> <a href="javascript:void(0)" id="del">刪除子節點</a> <a href="javascript:void(0)" id="add">添加子節點</a> </body> <script>var element_a = document.getElementById("del");element_a.onclick = function () {var div1 = document.getElementById("div1");var div2 = document.getElementById("div2");div1.removeChild(div2);}var element_b = document.getElementById("add");element_b.onclick = function () {var div3 = document.createElement("div");div3.setAttribute("id","div3");div1.append(div3);} </script> </html>

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屬性修改標簽體內容

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <h1 id="title">哈哈哈哈哈哈哈哈哈哈哈</h1> </body> <script>// var elementById = document.getElementById("pic");// alert("換圖片");// elementById.src = "img/off.gif";var elementById = document.getElementById("title");alert("換文字")elementById.innerText = "5555555555555555"; </script> </html>

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
下一篇： Dubbo+Zookeeper+Spri