JavaWeb學習筆記_Day03_JavaScript詳解
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)+" ");
}
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 學習筆記JavaWeb筆記
- JavaWeb學習筆記JavaWeb筆記
- 筆記-JavaWeb學習之旅17筆記JavaWeb
- JavaWeb學習筆記~01.ServletJavaWeb筆記Servlet
- Go學習筆記-GMP詳解Go筆記
- JavaWeb學習筆記——第一天JavaWeb筆記
- JavaWeb學習筆記——第七天JavaWeb筆記
- JavaWeb學習筆記——第九天JavaWeb筆記
- JavaWeb學習筆記——第十一天JavaWeb筆記
- JavaWeb學習筆記——第十四天JavaWeb筆記
- JVM學習筆記(3)---OutOfMemory詳解JVM筆記
- JavaWeb學習筆記——Tomcat資料來源JavaWeb筆記Tomcat
- mysql學習筆記-底層原理詳解MySql筆記
- Nginx變數詳解(學習筆記十九)Nginx變數筆記
- 面試複習筆記二(javaweb)面試筆記JavaWeb
- Java學習筆記：Javaweb的伺服器介紹Java筆記Web伺服器
- Java學習筆記-Day52 JavaWeb、Tomcat、ServletJava筆記WebTomcatServlet
- MIT 6.824 學習筆記（一）--- RPC 詳解MIT筆記RPC
- git checkout 命令詳解—— Git 學習筆記 16Git筆記
- JMeter學習筆記--詳解JMeter定時器JMeter筆記定時器
- git reset 命令詳解（二）—— Git 學習筆記 08Git筆記
- git reset 命令詳解（一）—— Git 學習筆記 07Git筆記
- git cherry-pick 詳解 —— Git 學習筆記 18Git筆記
- 【Java學習筆記之五】java陣列詳解Java筆記陣列
- IOS學習筆記——iOS元件之UIScrollView詳解iOS筆記元件UIView
- MySQL學習筆記之資料型別詳解MySql筆記資料型別
- 註解學習筆記筆記
- JavaWeb詳解JavaWeb
- 20160322 javaweb 學習筆記--response 重定向JavaWeb筆記
- 筆記二(JavaWeb)筆記JavaWeb
- MySql學習筆記--詳細整理--下MySql筆記
- Attention機制全流程詳解與細節學習筆記筆記
- 註解和反射學習筆記反射筆記
- numpy的學習筆記\pandas學習筆記筆記
- redis學習筆記（詳細）——高階篇Redis筆記
- TensorFlow常量、變數和佔位符詳解（學習筆記）變數筆記
- 學習筆記 詳解一種高效位反轉演算法筆記演算法
- 一千行 MySQL 詳細學習筆記（值得學習與收藏）MySql筆記