javascript
JavaScript快速入门-基础
JavaScript介紹
- JavaScript 是一種客戶端腳本語(yǔ)言,不需要編譯,就可以直接被瀏覽器解析運(yùn)行
- 核心功能:增強(qiáng)用戶和 HTML 頁(yè)面的交互過(guò)程，讓頁(yè)面有一些動(dòng)態(tài)效果。以此來(lái)增強(qiáng)用戶的體驗(yàn)！
快速入門
-
創(chuàng)建一個(gè) HTML
-
在<body>標(biāo)簽下面編寫一個(gè)<script>標(biāo)簽
-
在<script>標(biāo)簽中編寫代碼。
-
通過(guò)瀏覽器查看。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HelloWorld</title> </head> <body><h1>HelloWorld</h1> </body> <script>alert("HelloWorld"); </script> </html>
引入方式
- 內(nèi)部方式
- 在<body>標(biāo)簽下通過(guò)<script>標(biāo)簽編寫代碼
- 外部方式
- 定義獨(dú)立的 js 文件，將代碼編寫在文件中，在 HTML文件的<body>標(biāo)簽下通過(guò)<script src=文件路徑>來(lái)引入 js 文件。
- 注意:<script>標(biāo)簽不能寫成自閉和標(biāo)簽
JavaScript基本語(yǔ)法
-
注釋
- 單行注釋: // 注釋的內(nèi)容
- 多行注釋: /*注釋內(nèi)容*/
-
輸入輸出語(yǔ)句
- 輸入框:prompt(“提示內(nèi)容”);
- 彈出警告框:alert(“提示內(nèi)容”);
- 控制臺(tái)輸出:console.log(“顯示內(nèi)容”);
- 頁(yè)面內(nèi)容輸出:document.write(“顯示內(nèi)容”);
-
變量和常量
- JavaScript 屬于弱類型的語(yǔ)言，定義變量時(shí)不區(qū)分具體的數(shù)據(jù)類型
- 定義局部變量:let 變量名 = 值;
- 定義全局變量:變量名 = 值; 或者使用var
- 定義常量:const 常量名 = 值;
-
數(shù)據(jù)類型
數(shù)據(jù)類型說(shuō)明 boolean 布爾類型，true或false null 聲明null值的特殊關(guān)鍵字 undefined 代表變量未定義 number 整數(shù)或浮點(diǎn)數(shù) string 字符串 bigint 大整數(shù)，例如：let num = 10n -
typeof 關(guān)鍵字
- typeof 用于判斷變量的數(shù)據(jù)類型
- 例如:let age = 18;document.write(typeof(age)); // number
-
運(yùn)算符
- 其他運(yùn)算符正常使用,特殊的有
- ==:判斷值是否相等
- ===:判斷數(shù)據(jù)類型和值是否相等
- &&:邏輯與，并且的功能
- ||:邏輯或，或者的功能
-
流程控制和循環(huán)語(yǔ)句
- if 語(yǔ)句
- switch 語(yǔ)句
- for 循環(huán)
- while 循環(huán)
- 正常使用
-
數(shù)組
-
用法與java大致相同,但是在 JavaScript 中的數(shù)組更加靈活，數(shù)據(jù)類型和長(zhǎng)度都沒(méi)有限制
-
定義格式: let 數(shù)組名 = [元素1,元素2,…];
-
索引范圍:從 0 開(kāi)始，最大到數(shù)組長(zhǎng)度-1
-
數(shù)組長(zhǎng)度: 數(shù)組名.length
-
數(shù)組高級(jí)運(yùn)算符…
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>數(shù)組</title> </head> <body></body> <script>//定義數(shù)組let arr = [10,20,30];//arr[3] = 40; js中的數(shù)組長(zhǎng)度可變//遍歷數(shù)組for(let i = 0; i < arr.length; i++) {document.write(arr[i] + "<br>");}document.write("==============<br>");// 數(shù)組高級(jí)運(yùn)算符 ...//復(fù)制數(shù)組let arr2 = [...arr];//遍歷數(shù)組for(let i = 0; i < arr2.length; i++) {document.write(arr2[i] + "<br>");}document.write("==============<br>");//合并數(shù)組let arr3 = [40,50,60];let arr4 = [...arr2 , ...arr3];//遍歷數(shù)組for(let i = 0; i < arr4.length; i++) {document.write(arr4[i] + "<br>");}document.write("==============<br>");//將字符串轉(zhuǎn)成數(shù)組let arr5 = [..."heima"];//遍歷數(shù)組for(let i = 0; i < arr5.length; i++) {document.write(arr5[i] + "<br>");} </script> </html>
-
-
函數(shù)
-
函數(shù)類似于 java 中的方法，可以將一些代碼進(jìn)行抽取，達(dá)到復(fù)用的效果
-
定義格式
function 方法名(參數(shù)列表) {
方法體;
return 返回值;
}匿名函數(shù)
function(參數(shù)列表) {
方法體;
}參數(shù)也可以是可變參數(shù)
-
JavaScript DOM
DOM介紹
- DOM(Document Object Model)：文檔對(duì)象模型
- 將 HTML 文檔的各個(gè)組成部分，封裝為對(duì)象。借助這些對(duì)象，可以對(duì) HTML 文檔進(jìn)行增刪改查的動(dòng)態(tài)操作。
DOM樹(shù)
?
Element 元素的操作
-
DOM(Document Object Model)：文檔對(duì)象模型
-
Document：文檔對(duì)象、Element：元素對(duì)象、Attribute：屬性對(duì)象、Text：文本對(duì)象
-
元素的操作
-
根據(jù)id獲得一個(gè)元素:getElementById(id屬性值)
-
根據(jù)標(biāo)簽名稱獲得多個(gè)元素:getElementsByTagName(標(biāo)簽名稱)
-
根據(jù)name屬性獲得多個(gè)元素:getElementsByName(name屬性值)
-
根據(jù)class屬性獲得多個(gè)元素:getElementsByClassName(class屬性值)
-
獲取當(dāng)前元素的父元素:.parentElement屬性
-
根據(jù)class屬性獲得多個(gè)元素:createElement(標(biāo)簽名)
-
將指定子元素添加到父元素中:appendChild(子元素)
-
用父元素刪除指定子元素:removeChild(子元素)
-
用新元素替換子元素:replaceChild(新元素,舊元素)
-
-
屬性的操作
- 設(shè)置屬性:setAtrribute(屬性名, 屬性值)
- 根據(jù)屬性名獲取屬性值:getAtrribute(屬性名)
- 根據(jù)屬性名移除指定的屬性:removeAtrribute(屬性名)
- 為元素添加樣式:style屬性
-
文本的操作
- innerText
- innerHTML:可以解析標(biāo)簽
JavaScript 事件
事件
-
事件指的就是當(dāng)某些組件執(zhí)行了某些操作后，會(huì)觸發(fā)某些代碼的執(zhí)行
常用事件
- onload :某個(gè)頁(yè)面或圖像被完成加載
- onsubmit:當(dāng)表單提交時(shí)觸發(fā)該事件
- onclick :鼠標(biāo)單擊事件
- ondblclick :鼠標(biāo)雙擊事件
- onblur :元素失去焦點(diǎn)
- onfocus :元素得到焦點(diǎn)
- onchange:用戶改變域的內(nèi)容
-
事件的綁定
-
方式一
通過(guò)標(biāo)簽中的事件屬性進(jìn)行綁定。
<button id="btn" onclick="執(zhí)行的功能"> </button>
-
方式二
通過(guò) DOM 元素屬性綁定。
document.getElementById("btn").onclick = 執(zhí)行的功能
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><button onclick="up()">進(jìn)入</button><button id = "down">退出</button><button id="zg">正規(guī)按鈕</button> </body> <script>//綁定事件方式1function up(){alert("我來(lái)了!!!")}//綁定事件方式2let downbtn = document.getElementById("down");downbtn.onclick = function(){alert("xxx")}document.getElementById("zg").onclick = function(){while(true){alert("xxx")}} </script> </html>
-
JavaScript 面向?qū)ο?/h3>
類的定義和使用
//定義Person類class 類名{//構(gòu)造方法constructor(變量列表){變量賦值;}//方法方法名(參數(shù)列表){方法體;return 返回值;}}//使用Person類let 對(duì)象名 = new 類名(實(shí)際變量值);對(duì)象名.方法名();
字面量定義類和使用
- 定義
let 對(duì)象名 = {變量名:變量值,變量名:變量值,...//方法方法名(參數(shù)列表){方法體;return 返回值;},...}
- 使用格式
對(duì)象名.方法名(參數(shù));
對(duì)象名.變量名;
繼承
對(duì)象名.方法名(參數(shù));
對(duì)象名.變量名;
繼承：讓類與類產(chǎn)生子父類的關(guān)系，子類可以使用父類有權(quán)限的成員。
繼承關(guān)鍵字：extends
頂級(jí)父類：Object
JavaScript 內(nèi)置對(duì)象
- Number
- Math
- Date
構(gòu)造方法
成員方法
- JSON
JavaScript BOM
- BOM(Browser Object Model)：瀏覽器對(duì)象模型。
Window 窗口對(duì)象
- 定時(shí)器
唯一標(biāo)識(shí) setTimeout(功能，毫秒值)：設(shè)置一次性定時(shí)器。
clearTimeout(標(biāo)識(shí))：需要拿到定時(shí)器的唯一標(biāo)識(shí)才能取消一次性定時(shí)器。
唯一標(biāo)識(shí) setInterval(功能，毫秒值)：設(shè)置循環(huán)定時(shí)器。
clearInterval(標(biāo)識(shí))：同上 - 加載事件
window.onload：在頁(yè)面加載完畢后觸發(fā)此事件的功能
Location 地址欄對(duì)象
就是瀏覽器的地址欄。我們可以通過(guò)為該屬性設(shè)置新的 URL，使瀏覽器讀取并顯示新的 URL 的內(nèi)容 //跳轉(zhuǎn) location.href = "目標(biāo)資源路徑";JavaScript 封裝
封裝思想
- 封裝：將復(fù)雜的操作進(jìn)行封裝隱藏，對(duì)外提供更加簡(jiǎn)單的操作。
- 簡(jiǎn)單封裝
總結(jié)
以上是生活随笔為你收集整理的JavaScript快速入门-基础的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： jquery cxSelect 使用
- 下一篇： Maven中Spring-Data-Re