JavaWeb學習筆記_Day03_JavaScript詳解

夏夜晚風1982發表於2020-11-25

JavaWeb學習筆記_Day03_JavaScript詳解

一、JavaScript基本介紹

（一）JavaScript簡介

JavaScript（簡稱“JS”）是一種具有函式優先的輕量級，解釋型或即時編譯型的高階程式語言。雖然它是作為開發Web頁面的指令碼語言而出名的，但是它也被用到了很多非瀏覽器環境中，JavaScript 基於原型程式設計、多正規化的動態指令碼語言，並且支援物件導向、命令式和宣告式（如函式式程式設計）風格。 [1]

特點：1 函式優先

2 即時編譯（解釋性語言）

3 物件導向

用途：網頁驗證，動態特效，可以動態的操作html標籤，可以動態的操作css樣式

歷史版本：ES5/ES6 主要學習ES5

（二）JavaScript組成

在這裡插入圖片描述

1：基礎語法部分 ESMAScript

2：DOM物件 document object model 文件物件模型

3：BOM物件 Browers Object model 瀏覽器物件模型

（三）JavaScript引入方式

css的引入方式：行內，內嵌，外鏈

1、行內式

將JS的程式碼寫在html元素中

<input type="button" onclick="alert('我是彈出框')" value="點選" />

2、內嵌式:

語法：將js程式碼的程式碼寫在script標籤中，

<script type="text/javascript">
    function show(){
    alert("我是內嵌式");
}
			
</script>

注意：script標籤可以寫在html頁面的任何位置，一般是放在整個html的後面

3、外鏈式

1：建立一個js檔案

2：在html中引入外部的js檔案

function show2(){
	alert("我是外鏈式");
}

注意：一個HTML頁面可以引入多個js檔案

注意：當html頁面中既有內嵌式也有外鏈式，使用就近原則

注意：外鏈式的script標籤之間不能寫js程式碼

小結：

行內式，比較適合，功能單一，程式碼簡單的元素

內嵌式：適合當前頁面，不同元素具有相同特效的js程式碼

外鏈式：適合不同頁面，具有相同特顯的元素（符合程式碼分離原則）

二、ECMAScript

ECMAScript主要是Javascript的一部分，主要包含了js的基礎語法

變數，常量，運算子，資料型別，if語句，迴圈，陣列，基礎物件，函式，事件

1、變數

java變數

int a = 10; 初始化一個變數（先宣告，後賦值）

js變數

var 變數名= 值;

int a;

var a = 10;

注意：宣告變數的時候，儘量不要同名，否則前面的變數不能使用了。

注意：js的變數，是沒有資料型別的，所以js是一門弱型別語言，當給變數賦值之後，才會知道變數的型別

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//宣告變數
			var a;
			//變數賦值
			a = 10;
			a = 10.5;
			var a = "abc";
			//使用變數
			alert(a);
		</script>
		
	</head>
	<body>
	</body>
</html>

2、資料型別

js資料型別分為兩大類：基本資料型別引用資料型別

基本資料型別：

數字型，字串，布林型別，null型別，未定義型別 undefined

//1：宣告變數   測試變數的資料型別  typeof
var a;       //undefined  未定義
a = 10.1;   //number  數字型
a = true;   //boolean  布林型別  true/false
a = "abc";  //string  字串
a = null;    //null 型（Object下的null值）

測試變數的資料型別使用 typeof 變數

alert(typeof 變數)

引用資料型別：

object, 陣列，function

3、運算子

1、賦值運算子：= += -= *= /=

//1:賦值運算子
var a = 10;
a+=10;  //a = a+10;
a-=10;

2、算術運算子:+ - * / % ++ –

+有2中用法 1：算數運算子 2：字串拼接

//1:賦值運算子
// var a = 10;
// a+=10;  //a = a+10;
// a-=10;

// a+=1;

// a = (int)a+1;
// a = a+1;
//算數運算子  
//var a = 10;
//var b = 0;
//alert(a%b);   //3.3333333333333335  近似值
//Infinity  正無窮   (數字型別)   -Infinity  負無窮 (數字型別) 
//NaN  not a number  數字型別 
//alert(typeof (10%0));

var a = 1;
//1     3     3    5     5
alert((a++)+(++a)+(a++)+(++a)+(a++));

3、關係運算子（比較運算子）:> < >= <= == === !=

==和===的區別
==在js中表示等值比較，和型別無關
===在js中稱為恆等  類似java中equals
先比較型別，如果型別不一樣，直接返回false
如果型別一致，再比較值，如果值相等，返回true，否則返回false

注意：js中1表示true，0表示false

4、條件運算子: ? : var flag = a>b ? true : false ; 三目或者三元運算子

var a = 100,b = 200,c = 300;
var max = (a>b?a:b)>c?(a>b?a:b):c;

5：邏輯運算子 && || ！ & |

面試題：&&和&的區別

&&稱之為短路與：第一個表示式為fasle，後面的表示式無須運算，結果為fasle，只有表示式都為true，結果才為true

&:每個表示式都需運算，最終的結果和&&的結果是一樣的，&的結果是0或者1，&&的結果是true或者false

&&的效率較高

&可以用在使用者頁面驗證

面試題：|| 和 |的區別

|| 表示短路或，只要第一個表示式為true，後面的表示式無需運算，最終為true

| 第一個表示式為true，繼續執行後面的表示式，知道最後一個

4、分支結構

1）if結構 true或者false 或者1和0 都可以作為條件

var age = 20;
var a;
    if(a=1){
    alert("我是成年人")
}

注意：賦值語句也可以作為if的條件判斷

2）if…else…結構 if(條件){語句；} else {語句；}

var age = 20;
var a;
if(a=1){
	alert("我是成年人")
}else{
	alert("未成年")
}

3）多重if結構 if(條件1){語句1；}else if(條件2){語句2；} else if(條件n){語句n}…else{語句；}

計算人體的BMI值

//計算人體的BMI
//計算公式為：BMI=體重（千克）除以身高（米）的平方。
var h = 1.75;
var w = 70;
var bmi = w/(h*h);
	alert(bmi);
if(bmi<18.5){
	alert("偏瘦");	
}else if(bmi<24){
	alert("正常");	
}else if(bmi<35){
	alert("肥胖");	
}else{
	alert("該減肥了...");		
}

4）switch：

var a = 3;
switch(a){
    case 1:alert(11111);break;
    case 2:alert(22222);break;
    case 3:alert(33333);break;
    case 4:alert(44444);break;
    default:alert(55555);break;
}

注意：如果條件是範圍判斷，推薦使用if結構，如果條件是常量，推薦使用switch

注意：Java中switch結構中常量值是：byte,short,int,String（jdk1.7新特性）,char,列舉（jdk1.5後新特性）

5、迴圈結構

三種迴圈

while迴圈

語法

初始變數

while(範圍判斷){

迴圈體

變數步進

}

1-100的累加和

var i = 1;
var sum = 0;
	迴圈
while(i<=100){
	sum+=i;
	i++;
}

do{}while();

初始變數

do{

迴圈體

變數步進

}while(範圍判斷)；

for迴圈

語法

for(1初始變數;2 範圍判斷;3 步進){

迴圈體…

}

99乘法表

for(var i=1;i<=9;i++){
	for(var j=1;j<=i;j++){
        document.write(j+"*"+i+"="+(i*j)+"&nbsp;&nbsp;");
     }
    document.write("<br>");
}

forEach迴圈

使用規律：當不知道迴圈次數的時候，使用while迴圈，反之使用for迴圈

面試題：do while和while的區別

do while先執行，後判斷至少會執行1次 1-n

while 先判斷，後執行 0-n

6、陣列

//1：陣列的宣告
//java int[] arr = new int[3];
//初始化一個陣列 動態初始化：先宣告長度，再確定元素的個數
var arr = new Array();
//賦值
arr[0] = 10;
arr[1] = "abc";
arr[2] = true;
arr[3] = 10.5;

//靜態初始化
var arr2 = [10,20,30,40,50];
alert(arr2);

注意：js的陣列，沒有下標越界，而且可以新增任意型別的元素

迴圈的操作：新增，刪除，修改，查詢，遍歷，排序，判斷

遍歷

//遍歷陣列1
for(var i = 0;i<arr2.length;i++){
    //  document.write(arr2[i]+" ");
}
//for in 迴圈
for(var i in arr2){
    document.write(arr2[i]+" ");
}

氣泡排序

var arr = [90,20,-88,66,200,33,45];
//氣泡排序
for(var j=0;j<arr.length;j++){
    var flag;
    for(var i = 0;i<arr.length-j-1;i++){
        if(arr[i]>arr[i+1]){
            flag = arr[i];
            arr[i] = arr[i+1];
            arr[i+1] = flag;
        }
    }	
}

//sort寫法
arr.sort(function(c,d){return c-d});

7、函式

函式是具有特定功能的程式碼塊，通過事件的觸發來呼叫，類似於java中方法。

語法：

function 函式名(引數){

函式體；

}

//js的函式的宣告   
function  show(i,j){

   return i+j;
}

var sum = show(10,20);

注意：js的函式的形參無需宣告型別，直接西形參名

注意：js函式的形參和實參的個數不一致

注意：js的函式名不要和關鍵字重名

注意：宣告在函式中變數稱為區域性變數，範圍在函式體中，宣告在函式外的變數稱為全域性變數，作用範圍每個方法都可以使用

8、事件和事件繫結

什麼事件?

HTML4.0之後新增的特性。通過瀏覽器頁面中元素的一系列觸發呼叫指定的一段JavaScript指令碼。

js事件彙總：

在這裡插入圖片描述

事件繫結：

1）直接在標籤中繫結

 <input type="button" onclick="show();" value="標籤繫結"/>
 //直接在標籤中繫結 
  function show(){
     alert("我是點選事件");
 }

2）在js指令碼中獲取要繫結事件的物件，通過程式碼繫結

 <input type="button" id="btn"  value="動態繫結"/>
  //獲取button物件
     var btn = document.getElementById("btn");
//動態繫結js事件，呼叫函式
// btn.onclick = function(){
// 	alert("我是動態點選事件");
// }

btn.onclick = show2;
function show2(){
    alert("我是動態點選事件");
}
//直接呼叫函式了
btn.onclick = show2();
function show2(){
    alert("我是動態點選事件");
}

js常用事件:

焦點事件：輸入框

onfocus:獲得焦點事件

onblur：失去焦點事件

<input type="text" id="txt" onblur="showText()" onfocus="clearText()" value="我是文字框" />
    
function clearText(){
		var txt =  document.getElementById("txt"); 
		txt.value = "";
	 }
function showText(){
    var txt =  document.getElementById("txt");
    txt.value = "我是文字框"; 
}

鍵盤事件

onkeydown:鍵盤按下時

onkeyup：鍵盤釋放時

滑鼠事件

onclick

ondblclick

onmouseover

onmouseout/onmouseleave

<input type="button" onmousedown="alert('滑鼠按下事件')" value="滑鼠按下事件"/>
<input type="button" onmouseup="alert('滑鼠彈起事件')" value="滑鼠彈起事件"/>
<input type="button" onmouseover="alert('滑鼠懸停事件')" value="滑鼠懸停事件"/>
<input type="button" onmouseout="alert('滑鼠移開事件')" value="滑鼠移開事件"/>
<input type="button" onmouseover="alert('滑鼠懸停事件')" onmouseout="alert('滑鼠移開事件')" value="滑鼠移開事件"/>
<input type="button" ondblclick="alert('滑鼠雙擊事件')" value="滑鼠雙擊事件"/>

下拉選單改變事件

onchange 下拉選單框中內容的改變事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<select id = "per" onchange="changePerson()">
			<option value="">--請選擇人物--</option>
			<option value="馬保國">馬保國</option>
			<option value="拜登">拜登</option>
			<option value="川普">川普</option>
			<option value="馬化騰">馬化騰</option>
		</select>
	</body>
</html>
<script type="text/javascript">
	 function changePerson(){
		var per = document.getElementById("per").value; 
		if("馬保國" === per){
		   document.body.style.background = "url(img/mbg.jpg)";	
		}else if("拜登" === per){
			document.body.style.background = "url(img/bd.jpg)";	
		}else if("川普" === per){
			document.body.style.background = "url(img/tlp.jpg)";	
		}else if("馬化騰" === per){
			document.body.style.background = "url(img/mht.jpg)";
		}else{
			document.body.style.background = "white";
		}
		document.body.style.backgroundSize = "cover";
	 }
</script>

三、DOM模型

（一）DOM簡介

HTML DOM是HTML Document Object Model(文件物件模型)的縮寫，HTML DOM則是專門適用於HTML/XHTML的文件物件模型。熟悉軟體開發的人員可以將HTML DOM理解為網頁的API。它將網頁中的各個元素都看作一個個物件，從而使網頁中的元素也可以被計算機語言獲取或者編輯。 Javascript就可以利用HTML DOM動態地修改網頁。

（二）查詢元素

1、document.getElementById(“Id”) 通過id屬性的值獲取元素

function show(){
		  //通過id獲取dom物件
		  var txt = document.getElementById("txt");
		  //document.write 會將之前的頁面覆蓋
		  //document.write(txt.value);
		  alert(txt.value);
 }

注意：id必須唯一，如果有重名的，獲取第一個元素物件

2、document.getElementsByName(“name”)通過name屬性值獲取元素

function show2(){
    //通過name獲取dom物件
    var txt = document.getElementsByName("txt");
    //document.write 會將之前的頁面覆蓋
    //document.write(txt.value);
    for(var i=0;i<txt.length;i++){
        alert(txt[i].value);  
    }

 }

注意：name屬性獲取的是一個nodeList，是一個陣列物件，可以通過迴圈分別獲取每個元素

3、document.getElementsByClassName(“class”)通過class屬性值獲取元素

 function show3(){
		  //通過classname獲取dom物件
		  var txt = document.getElementsByClassName("txt")
		  for(var i=0;i<txt.length;i++){
			 alert(txt[i].value);  
		  }
	  		 
	  }

注意：className屬性獲取的是一個nodeList，是一個陣列物件，可以通過迴圈分別獲取每個元素

4、document.getElementsByTagName(“標籤名”)通過標籤名獲取元素

function show4(){
		  //通過TagName獲取dom物件
		  var txt = document.getElementsByTagName("input");
		  for(var i=0;i<txt.length;i++){
			 alert(txt[i].value);  
		  }
		 
 }

注意：TagName屬性獲取的是一個nodeList，是一個陣列物件，可以通過迴圈分別獲取每個元素

注意：最常用的是id獲取

1、表單驗證

需求：當單擊登入按鈕時，對頁面中的賬號和密碼進行非空驗證，如果沒有填寫內容，給出錯誤訊息提示。

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="utf-8">
  	<title></title>
  </head>
  <body>
  	<form action="success.html" method="get">
  		<p>
  			使用者名稱 :<input type="text" onblur="checkName()" id = "txt" />
  		</p>
  		<p>
  			密碼 :<input type="password" onblur="checkPwd()" id = "pwd" />
  		</p>
  		<p>
  			<input type="submit" onclick="return checkAll();" value="登入" />
  		</p>
  	</form>
  </body>
</html>
<script type="text/javascript">
    function checkName(){
  	  //1:獲取使用者名稱
  	 var txt =  document.getElementById("txt").value;
  	 if(""==txt || null ==txt){
  		alert("使用者名稱不能為空");
  		return false;
  	 }else{
  		 return true;
  	 }
    }
    
    function checkPwd(){
    		  //1:獲取使用者名稱
    		 var pwd =  document.getElementById("pwd").value;
    		 if(pwd.length<6 || pwd.length>18){
    			alert("密碼長度在6-18之間");
  			return false;
  		}else{
  			return true;
  		}
    }
    function checkAll(){
  	  if(checkName()&checkPwd()){
  		  return true;
  	  }else {
  		 return false; 
  	  }
    }
</script>

2、全選全不選

需求：根據全選按鈕的狀態改變下面子項核取方塊的狀態。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		 <input type="checkbox" onclick="changeALll()" id="ckall" />全選<br>
		 <input type="checkbox" name="hobby" onclick="removeCk()" />抽菸<br>
		 <input type="checkbox" name="hobby" onclick="removeCk()" />喝酒<br>
		 <input type="checkbox" name="hobby" onclick="removeCk()" />燙頭<br>
	</body>
</html>
<script type="text/javascript">
	function changeALll(){
		//獲取全選的狀態
		var flag = document.getElementById("ckall").checked;
		var ck = document.getElementsByName("hobby");
		for(var i = 0;i<ck.length;i++){
			ck[i].checked = flag;
		}
	}
	
	//全不選
	function removeCk(){
		var ck = document.getElementsByName("hobby");
		var flag;
		for(var i = 0;i<ck.length;i++){
			
			flag = ck[i].checked;
			if(!flag){
				break;
			}
		}
		var ckall = document.getElementById("ckall");
		ckall.checked = flag;
		
	}
</script>

總結：表單驗證屬於重點一定要好好看一下！

JavaWeb學習筆記
2020-10-24
JavaWeb筆記
JavaWeb 學習筆記
2018-10-28
JavaWeb筆記
筆記-JavaWeb學習之旅17
2019-06-16
筆記JavaWeb
JavaWeb基礎-學習筆記02
2024-10-03
JavaWeb筆記
JavaWeb學習筆記後端部分
2024-07-19
JavaWeb筆記後端
JavaWeb學習筆記~01.Servlet
2020-11-27
JavaWeb筆記Servlet
Go學習筆記-GMP詳解
2022-05-18
Go筆記
JVM學習筆記(3)---OutOfMemory詳解
2021-09-09
JVM筆記
JavaWeb學習筆記——第十四天
2024-04-04
JavaWeb筆記
JavaWeb學習筆記——第七天
2024-03-28
JavaWeb筆記
JavaWeb學習筆記——第十一天
2024-04-01
JavaWeb筆記
JavaWeb學習筆記——第九天
2024-03-30
JavaWeb筆記
JavaWeb學習筆記——第一天
2024-03-22
JavaWeb筆記
mysql學習筆記-底層原理詳解
2022-03-22
MySql筆記
MIT 6.824 學習筆記（一）--- RPC 詳解
2018-11-27
MIT筆記RPC
Nginx變數詳解(學習筆記十九)
2018-05-17
Nginx變數筆記
Java學習筆記-Day52 JavaWeb、Tomcat、Servlet
2020-12-23
Java筆記WebTomcatServlet
git checkout 命令詳解—— Git 學習筆記 16
2018-10-06
Git筆記
Java學習筆記：Javaweb的伺服器介紹
2021-06-15
Java筆記Web伺服器
git cherry-pick 詳解 —— Git 學習筆記 18
2018-10-28
Git筆記
git reset 命令詳解（一）—— Git 學習筆記 07
2018-08-19
Git筆記
git reset 命令詳解（二）—— Git 學習筆記 08
2018-08-22
Git筆記
JavaWeb詳解
2020-12-08
JavaWeb
筆記二(JavaWeb)
2020-05-22
筆記JavaWeb
kernel_mktime() 詳解 —— Linux-0.11 學習筆記（四）
2020-04-04
Linux筆記
MySql學習筆記--詳細整理--下
2020-11-27
MySql筆記
TensorFlow常量、變數和佔位符詳解（學習筆記）
2020-11-08
變數筆記
Attention機制全流程詳解與細節學習筆記
2020-12-02
筆記
Android學習筆記之AndroidManifest.xml檔案解析(詳解)
2018-11-13
Android筆記XML
註解和反射學習筆記
2020-12-09
反射筆記
redis學習筆記（詳細）——高階篇
2021-11-11
Redis筆記
學習筆記詳解一種高效位反轉演算法
2020-10-01
筆記演算法
大資料學習筆記之Hadoop安裝步驟詳解
2019-05-15
大資料筆記Hadoop
numpy的學習筆記\pandas學習筆記
2018-03-18
筆記
javaweb學習4
2024-09-28
JavaWeb
一千行 MySQL 詳細學習筆記（值得學習與收藏）
2019-01-08
MySql筆記
SpringBoot + Spring Security 學習筆記（二）安全認證流程原始碼詳解
2019-04-14
Spring Boot筆記原始碼
VC++深入詳解--之複習筆記(一)
2020-04-04
C++筆記

JavaWeb學習筆記_Day03_JavaScript詳解

JavaWeb學習筆記_Day03_JavaScript詳解

一、JavaScript基本介紹

（一）JavaScript簡介

（二）JavaScript組成

（三）JavaScript引入方式

1、行內式

2、內嵌式:

3、外鏈式

二、ECMAScript

1、變數

2、資料型別

3、運算子

4、分支結構

5、迴圈結構

while迴圈

do{}while();

for迴圈

6、陣列

7、函式

8、事件和事件繫結

什麼事件?

js事件彙總：

事件繫結：

js常用事件:

三、DOM模型

（一）DOM簡介

（二）查詢元素

1、表單驗證

2、全選全不選

總結：表單驗證屬於重點一定要好好看一下！

相關文章