JavaScript基礎:javaScript基本語法,javaScript DOM,javaScript事件,javaScript綜合案例
1.一、JavaScript介紹
-
JavaScript 是一種客戶端腳本語言。運行在客戶端瀏覽器中，每個瀏覽器都具有解析 JavaScript 的引擎html
-
腳本語言：不須要編譯，就能夠被瀏覽器直接解析執行了前端
-
核心功能就是加強用戶和 HTML 頁面的交互過程，讓頁面有一些動態效果。以此來加強用戶的體驗！java
-
數組
-
1996 年，微軟抄襲 JavaScript 開發出 JScript 腳本語言瀏覽器
-
1997 年，ECMA (歐洲計算機制造商協會)，制定出客戶端腳本語言的標準：ECMAScript，統一了全部客戶 端腳本語言的編碼方式app
1.二、快速入門
-
實現步驟函數
-
建立一個 HTML工具
-
在標籤下面編寫一個
<script>標籤學習 -
在
<script>標籤中編寫代碼開發工具 -
經過瀏覽器查看
-
具體實現：新建01-快速入門.html
-
瀏覽器打開html以後，點擊button按鈕，發現沒有任何效果
-
咱們想要有效果，就須要js
-
js編寫的方式比較多，咱們來看一下
引入js的方式一：內部方式
-
在body結束標籤後添加script標籤
<script>
//找到btn按鈕，添加onclick點擊事件，並添加彈框邏輯
document.getElementById("btn").onclick=function () {
alert("點我幹嗎？");
}
</script> -
瀏覽器訪問html，點擊按鈕
引入js的方式一：外部方式
-
建立js文件js/my.js，增長以下代碼：
document.getElementById("btn").onclick=function () {
alert("點我幹嗎？");
} -
在html中引用外部js文件
//將以前的script標籤屏蔽
//添加以下代碼：src指定要引入的js的路徑
<script src="js/my.js"></script> -
運行效果同樣
區別：
-
開發中，使用外部方式
-
在學習階段，可使用內部方式（這樣能夠避免來回切換js和html）
1.三、開發環境搭建
-
Node.js:JavaScript 運行環境
-
VSCode：編寫前端技術的開發工具
根據資料中的《安裝工具.pdf》文檔安裝Node.js和VSCode，相關資料都在「資料」文件夾中。
1.四、快速入門總結
-
JavaScript 是一種客戶端腳本語言
-
組成部分
ECMAScript（js核心語法）、DOM（文檔對象模型）、BOM（瀏覽器對象模型）
文檔對象模型：操做html文檔
瀏覽器對象模型：操做瀏覽器 -
和 HTML 結合方式
內部方式：<script></script>
外部方式：<script src=文件路徑></script>
二、JavaScript基本語法 ***
2.一、註釋
-
單行註釋
// 註釋的內容 -
多行註釋
/*
註釋的內容
*/
2.二、輸入輸出語句
-
輸入框 prompt(「提示內容」);
-
prompt： [prɒmpt] 提示，能夠輸入的提示框
-
-
彈出警告框 alert(「提示內容」);
-
alert：警告，彈出警告框
-
-
控制檯輸出 console.log(「顯示內容」);
-
頁面內容輸出 document.write(「顯示內容」);
-
document：文檔，頁面
-
2.三、變量和常量
-
JavaScript 屬於弱類型的語言，定義變量時不區分具體的數據類型
-
定義全局變量 ：（非代碼塊中）語法：
let 變量名 = 值;//1.定義全局變量 （非代碼塊中）
let name = "張三";
let age = 23;
document.write(name + "," + age +"<br>");-
let：讓，讓咱們聲明一個變量吧
-
-
定義局部變量：（代碼塊中）語法：
let 變量名 = 值;//2.定義局部變量
{
let l1 = "aa";
}
//document.write(l1);報錯 -
定義常量：
const 常量名 = 值;//3.定義常量
const PI = 3.1415926;
//PI = 3.15;
document.write(PI);-
constant：常量
-
2.四、原始數據類型和typeof方法
2.4.一、原始數據類型
-
defined：定義，undefined：未定義
-
問題：undefined準確來講是表明 變量的值爲定義（定義變量沒給值）
2.4.二、typeof
-
typeof 用於判斷變量的數據類型
let age = 18;
document.write(typeof(age)); // number -
typeof英文的意思：誰的類型
2.五、運算符
-
算數運算符
-
賦值運算符
-
比較運算符
-
邏輯運算符
-
三元運算符
-
三元運算符格式
(比較表達式) ? 表達式1 : 表達式2;
-
執行流程
若是比較表達式爲true，則取表達式1
若是比較表達式爲false，則取表達式2
-
2.六、流程控制和循環語句
-
if 語句
//if語句
let month = 3;
if(month >= 3 && month <= 5) {
document.write("春季");
}else if(month >= 6 && month <= 8) {
document.write("夏季");
}else if(month >= 9 && month <= 11) {
document.write("秋季");
}else if(month == 12 || month == 1 || month == 2) {
document.write("冬季");
}else {
document.write("月份有誤");
}
document.write("<br>"); -
switch 語句
//switch語句
switch(month){
case 3:
case 4:
case 5:
document.write("春季");
break;
case 6:
case 7:
case 8:
document.write("夏季");
break;
case 9:
case 10:
case 11:
document.write("秋季");
break;
case 12:
case 1:
case 2:
document.write("冬季");
break;
default:
document.write("月份有誤");
break;
}
document.write("<br>");**for 循環** -
for循環
//for循環
for(let i = 1; i <= 5; i++) {
document.write(i + "<br>");
} -
while 循環
//while循環
let n = 6;
while(n <= 10) {
document.write(n + "<br>");
n++;
}
2.七、數組
-
數組的使用和 java 中的數組基本一致，可是在 JavaScript 中的數組更加靈活，數據類型和長度都沒有限制
-
定義格式
-
let 數組名 = [元素1,元素2,…];
-
-
索引範圍
-
從 0 開始，最大到數組長度-1
-
-
數組長度
-
數組名.length
-
-
數組高級運算符
…（拆包/擴展運算符）-
數組複製
-
合併數組
-
字符串轉數組
-
-
代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>數組</title> </head> <body> </body> <script> //定義數組 let arr = [10,20,30]; //arr[3] = 40; js中的數組長度可變 //遍歷數組 for(let i = 0; i < arr.length; i++) { document.write(arr[i] + "<br>"); } document.write("==============<br>"); // 數組高級運算符 ... //複製數組 let arr2 = [...arr]; //遍歷數組 for(let i = 0; i < arr2.length; i++) { document.write(arr2[i] + "<br>"); } document.write("==============<br>"); //合併數組 let arr3 = [40,50,60]; let arr4 = [...arr2 , ...arr3]; //遍歷數組 for(let i = 0; i < arr4.length; i++) { document.write(arr4[i] + "<br>"); } document.write("==============<br>"); //將字符串轉成數組 let arr5 = [..."heima"]; //遍歷數組 for(let i = 0; i < arr5.length; i++) { document.write(arr5[i] + "<br>"); } </script> </html>
2.八、函數
-
函數相似於 java 中的方法，能夠將一些代碼進行抽取，達到複用的效果
-
定義格式
function 方法名(參數列表) { 方法體; return 返回值; } -
可變參數
function 方法名(…參數名) { 方法體; return 返回值; } -
匿名函數
let 變量名 = function(參數列表) { 方法體; } -
代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>函數</title> </head> <body> </body> <script> //無參無返回值的方法 function println(){ document.write("hello js" + "<br>"); } //調用方法 println(); //有參有返回值的方法 function getSum(num1,num2){ return num1 + num2; } //調用方法 let result = getSum(10,20); document.write(result + "<br>"); //可變參數 對n個數字進行求和 function getSum(...params) { let sum = 0; for(let i = 0; i < params.length; i++) { sum += params[i]; } return sum; } //調用方法 let sum = getSum(10,20,30); document.write(sum + "<br>"); //匿名函數 let fun = function(){ document.write("hello"); } fun(); </script> </html>
2.九、小結
-
註釋：單行// 多行/**/
-
輸入輸出語句：prompt()、alert()、console.log()、document.write()
-
變量和常量：let、const
-
數據類型：boolean、null、undefined、number、string、bigint
-
typeof 關鍵字：用於判斷變量的數據類型
-
運算符：算數、賦值、邏輯、比較、三元運算符
-
流程控制和循環語句：if、switch、for、while
-
數組：數據類型和長度沒有限制，let 數組名 = [長度/元素]
-
函數：相似方法，抽取代碼，提升複用性
三、JavaScript DOM
3.一、DOM介紹
-
DOM(Document Object Model)：文檔對象模型
-
將 HTML 文檔的各個組成部分，封裝爲對象。藉助這些對象，能夠對 HTML 文檔進行增刪改查的動態操做。
-
這裏的增刪改查，指的是對界面的標籤(元素)增刪改查
-
-
DOM：就是一個文檔對象，能夠操做html文檔(界面)
3.二、Element元素的獲取操做
-
具體方法
-
element：元素
-
parentElement：父元素
-
-
代碼實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素的獲取</title>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div class="cls">div3</div>
<div class="cls">div4</div>
<input type="text" name="username"/>
</body>
<script>
//1. getElementById() 根據id屬性值獲取元素對象
let div1 = document.getElementById("div1");
//alert(div1);
//2. getElementsByTagName() 根據元素名稱獲取元素對象們，返回數組
let divs = document.getElementsByTagName("div");
//alert(divs.length);
//3. getElementsByClassName() 根據class屬性值獲取元素對象們，返回數組
let cls = document.getElementsByClassName("cls");
//alert(cls.length);
//4. getElementsByName() 根據name屬性值獲取元素對象們，返回數組
let username = document.getElementsByName("username");
//alert(username.length);
//5. 子元素對象.parentElement屬性 獲取當前元素的父元素
let body = div1.parentElement;
alert(body);
</script>
</html>
3.三、Element元素的增刪改操做
-
具體方法
-
appendChild：追加子元素，將子元素追加/添加到父元素中
-
replaceChild：替換子元素
-
-
代碼實現
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>元素的增刪改</title> </head> <body> <select id="s"> <option>---請選擇---</option> <option>北京</option> <option>上海</option> <option>廣州</option> </select> </body> <script> //1. createElement() 建立新的元素 let option = document.createElement("option"); //爲option添加文本內容 option.innerText = "深圳"; //2. appendChild() 將子元素添加到父元素中 let select = document.getElementById("s"); select.appendChild(option); //3. removeChild() 經過父元素刪除子元素 //select.removeChild(option); //4. replaceChild() 用新元素替換老元素 let option2 = document.createElement("option"); option2.innerText = "杭州"; select.replaceChild(option2,option); </script> </html>
3.四、Attribute屬性的操做
-
具體方法
-
attribute：認爲...是，屬性[計算機]
-
-
代碼實現
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>屬性的操做</title> <style> .aColor{ color: blue; } </style> </head> <body> <a>點我呀</a> </body> <script> //1. setAttribute() 添加屬性 let a = document.getElementsByTagName("a")[0]; a.setAttribute("href","https://www.baidu.com"); //2. getAttribute() 獲取屬性 let value = a.getAttribute("href"); //alert(value); //3. removeAttribute() 刪除屬性 //a.removeAttribute("href"); //4. style屬性 添加樣式 //a.style.color = "red"; //5. className屬性 添加指定樣式 a.className = "aColor"; </script> </html>
3.五、Text文本的操做
-
具體方法
-
innerText：內部文本，開始標籤與結束標籤中間的文本（只識別文本）
-
innerHTML：內部標籤（識別文本，識別標籤）
-
-
代碼實現
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文本的操做</title> </head> <body> <div id="div"></div> </body> <script> //1. innerText 添加文本內容，不解析標籤 let div = document.getElementById("div"); div.innerText = "我是div"; //div.innerText = "<b>我是div</b>"; //2. innerHTML 添加文本內容，解析標籤 div.innerHTML = "<b>我是div</b>"; </script> </html>
3.六、DOM小結
-
DOM(Document Object Model)：文檔對象模型
-
Document：文檔對象
-
-
Element：元素對象
-
Attribute：屬性對象
-
-
Text：文本對象
-
元素的操做
-
getElementById()
-
getElementsByTagName()
-
getElementsByName()
-
getElementsByClassName()
-
子元素對象.parentElement屬性
-
createElement()
-
appendChild()
-
removeChild()
-
replaceChild()
-
-
屬性的操做
-
setAtrribute()
-
getAtrribute()
-
removeAtrribute()
-
style屬性
-
-
文本的操做
-
innerText
-
innerHTML
-
四、JavaScript 事件
4.一、事件介紹
-
事件指的就是當某些組件執行了某些操做後，會觸發某些代碼的執行
-
事件：當何時作什麼事情
-
-
經常使用的事件
-
load：加載
-
dbl：double，雙倍，兩次
-
blur：污跡，失去焦點[計算機] focus：聚焦，焦點
-
-
瞭解的事件
-
key：keyboard，鍵盤
-
mouse：鼠標
-
press：壓，按
-
over：在...之上，懸浮
-
4.二、事件操做
綁定事件
-
方式一
經過標籤中的事件屬性進行綁定。
<button id="btn" onclick="執行的功能"></button>
-
方式二
經過 DOM 元素屬性綁定。
document.getElementById("btn").onclick = 執行的功能 let click = function(){} let btn = document.getElementById("btn"); btn.onclick = function(){} 事件的語法，與匿名函數的語法一致。 對象中的屬性，就是一個變量 -
代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>事件</title> </head> <body> <img id="img" src="img/01.png"/> <br> <!-- <button id="up" onclick="up()">上一張</button> <button id="down" onclick="down()">下一張</button> --> <button id="up">上一張</button> <button id="down">下一張</button> </body> <script> //顯示第一張圖片的方法 function up(){ let img = document.getElementById("img"); img.setAttribute("src","img/01.png"); } //顯示第二張圖片的方法 function down(){ let img = document.getElementById("img"); img.setAttribute("src","img/02.png"); } //爲上一張按鈕綁定單擊事件 let upBtn = document.getElementById("up"); upBtn.onclick = up; //爲下一張按鈕綁定單擊事件 let downBtn = document.getElementById("down"); downBtn.onclick = down; </script> </html>
4.三、事件小結
-
事件指的就是當某些組件執行了某些操做後，會觸發某些代碼的執行
-
經常使用的事件 onload onsubmit onclick ondblclick onblur onfocus onchange
-
綁定事件方式
-
方式一：經過標籤中的事件屬性進行綁定
-
方式二：經過 DOM 元素屬性綁定
-
五、JavaScript綜合案例 ***
5.一、案例效果介紹
-
在「姓名、年齡、性別」三個文本框中填寫信息後，添加到「學生信息表」列表（表格）中。
5.二、添加功能的分析
-
爲添加按鈕綁定單擊事件。
-
建立 tr 元素。
-
建立 4 個 td 元素。
-
將 td 添加到 tr 中。
-
獲取文本框輸入的信息。
-
建立 3 個文本元素。
-
將文本元素添加到對應的 td 中。
-
建立 a 元素。
-
將 a 元素添加到對應的 td 中。
-
將 tr 添加到 table 中。
5.三、添加功能的實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>動態表格</title>
<style>
table{
border: 1px solid;
margin: auto;
width: 500px;
}
td,th{
text-align: center;
border: 1px solid;
}
div{
text-align: center;
margin: 50px;
}
</style>
</head>
<body>
<div>
<input type="text" id="name" placeholder="請輸入姓名" autocomplete="off">
<input type="text" id="age" placeholder="請輸入年齡" autocomplete="off">
<input type="text" id="gender" placeholder="請輸入性別" autocomplete="off">
<input type="button" value="添加" id="add">
</div>
<table id="tb">
<caption>學生信息表</caption>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
<th>操做</th>
</tr>
<tr>
<td>張三</td>
<td>23</td>
<td>男</td>
<td><a href="JavaScript:void(0);" onclick="drop(this)">刪除</a></td>
</tr>
<tr>
<td>李四</td>
<td>24</td>
<td>男</td>
<td><a href="JavaScript:void(0);" onclick="drop(this)">刪除</a></td>
</tr>
</table>
</body>
<script>
//1、添加功能
//1.爲添加按鈕綁定單擊事件
document.getElementById("add").onclick = function(){
//2.建立行元素
let tr = document.createElement("tr");
//3.建立4個單元格元素
let nameTd = document.createElement("td");
let ageTd = document.createElement("td");
let genderTd = document.createElement("td");
let deleteTd = document.createElement("td");
//4.將td添加到tr中
tr.appendChild(nameTd);
tr.appendChild(ageTd);
tr.appendChild(genderTd);
tr.appendChild(deleteTd);
//5.獲取輸入框的文本信息
let name = document.getElementById("name").value;
let age = document.getElementById("age").value;
let gender = document.getElementById("gender").value;
//6.根據獲取到的信息建立3個文本元素
let nameText = document.createTextNode(name);
let ageText = document.createTextNode(age);
let genderText = document.createTextNode(gender);
//7.將3個文本元素添加到td中
nameTd.appendChild(nameText);
ageTd.appendChild(ageText);
genderTd.appendChild(genderText);
//8.建立超連接元素和顯示的文本以及添加href屬性
let a = document.createElement("a");
let aText = document.createTextNode("刪除");
a.setAttribute("href","JavaScript:void(0);");
a.setAttribute("onclick","drop(this)");
a.appendChild(aText);
//9.將超連接元素添加到td中
deleteTd.appendChild(a);
//10.獲取table元素，將tr添加到table中
let table = document.getElementById("tb");
table.appendChild(tr);
}
</script>
</html>
5.四、刪除功能的分析
-
刪除功能介紹
-
刪除功能分析
-
爲每一個刪除超連接添加單擊事件屬性。
-
定義刪除的方法。
-
獲取 table 元素。
-
獲取 tr 元素。
-
經過 table 刪除 tr。
5.五、刪除功能的實現
//2、刪除的功能
//1.爲每一個刪除超連接標籤添加單擊事件的屬性
//2.定義刪除的方法
function drop(obj){
//3.獲取table元素
let table = obj.parentElement.parentElement.parentElement;
//4.獲取tr元素
let tr = obj.parentElement.parentElement;
//5.經過table刪除tr
table.removeChild(tr);
}
- 1. JavaScript中DOM基礎語法
- 2. JAVASCRIPT（三）--- JAVASCRIPT基本語法
- 3. Javascript Objects - Javascript語法基礎 - Javascript核心
- 4. Javascript基礎——DOM
- 5. JavaScript DOM 基礎
- 6. JavaScript基本語法基礎
- 7. javascript 事件基礎
- 8. javaScript基礎事件
- 9. JavaScript 事件基礎
- 10. JavaScript中DOM基礎
- 更多相關文章...
- • JavaScript 指南 - 網站建設指南
- • Rust 基礎語法 - RUST 教程
- • Kotlin學習（一）基本語法
- • Kotlin學習（二）基本類型
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 字節跳動21屆秋招運營兩輪面試經驗分享
- 2. Java 3 年，25K 多嗎？
- 3. mysql安裝部署
- 4. web前端開發中父鏈和子鏈方式實現通信
- 5. 3.1.6 spark體系之分佈式計算-scala編程-scala中trait特性
- 6. dataframe2
- 7. ThinkFree在線
- 8. 在線畫圖
- 9. devtools熱部署
- 10. 編譯和鏈接