- 概述
- JavaScript一種直譯式腳本語言，是一種動态類型、弱類型、基于原型的語言
- 作用:給頁面添加動态效果,校驗使用者資訊等.
- 入門案例
- js和html的整合
- 方式1:内聯式
"通過<script></script>标簽實作,在标簽體中編寫js代碼即可"
- 方式2:外聯式
"編寫外部的js檔案,通過srcipt标簽的src屬性引入即可"
- 注意事項:
" script标簽可以放在頁面的任何位置,一般放在head中
一個頁面可以有多個srcipt标簽
script标簽一旦使用了src屬性,它的标簽體就會失效"
- 組成部分
- ECMAScript:核心文法
- 變量聲明
- 格式: var 變量名稱 = 初始化指派;
- 注意事項:
- var可以省略,但是不建議省略
- 末尾的分号也可以省略,但是不建議
- 資料類型
- 原始類型(5種)
- Undefined:undefined
- Null:null
- Number:一切數字
- String:一切被引号引起來的字元串
- Boolean: true 或 false
- 運算符typeof
"用來判斷給定值的資料的所屬類型 例如: typeof age;"
- 引用類型:javaScript第二天内容
- 運算符
- 等性運算符
- == !=
"判斷數值"
- === !==
"判斷數值和類型"
- 關系運算符
- > < >= <=
- 邏輯運算符
- && || !
- 非空對象 非0數字 非空字元串 都為true 其他為false
- 語句
"幾乎和java一樣"
- if ... else ...
- for(){}方式
- 函數
"用來完成指定操作的代碼片段,在java中叫方法,在js中叫函數"
- 方式1: 普通函數
" function 函數名稱(參數清單){
...
}"
- 方式2(匿名函數):
"var 函數名稱 = function(參數清單){
...
}"
- 函數傳回值:在函數中直接使用return傳回結果即可
- 注意事項:參數清單中的參數可以不寫類型
- 事件
"具體的某件事情"
- 單擊事件: onclick
"單擊滑鼠時觸發"
- 表單送出事件: onsubmit
"送出form表單時觸發"
- 頁面加載成功事件: onload
"當頁面加載完畢後觸發"
- 事件和事件源的綁定
- 方式1:綁定事件
" 實作方式:通過标簽的事件屬性
例如:<xxx onclick="函數名(參數清單)"></xxx>"
- 方式2:派發事件
" 實作方式:擷取标簽對象(元素)
對象.事件名稱=function(){}"
- 使用步驟:
- 1.确定事件
- 2.編寫函數
- 擷取元素
- 處理元素
- BOM(浏覽器對象模型):操作浏覽器
- window 視窗
- 常用屬性
"通過它擷取其他的四個對象
eg:window.history == history
注意:使用window的對象或屬性時,window可以省略不寫"
- 常用方法
- 定時器
- var 定時器id = setInterval() 設定周期執行定時器
- 格式1:setInterval(函數名稱,毫秒值);
"周期執行,每隔多少毫秒執行一次指定函數"
- 注意:每個定時器都會傳回一個定時器id,定時器id主要用在清除定時器時.
- 格式2:setInterval("函數名稱(參數清單)",毫秒值);
- "周期執行,每隔多少毫秒執行一次指定函數 可傳遞參數"
- clearInterval() 清除周期執行定時器
- 使用方式:clearInterval(定時器id)
"作用:将正在使用的定時器清除"
- setTimeout() 單次執行定時器
- 格式1:setTimeout(函數名稱,毫秒值);
"單次執行,多少毫秒後執行指定函數,隻執行一次"
- 格式2:setTimeout("函數名稱(參數清單)",毫秒值);
"單次執行,多少毫秒後執行指定函數,隻執行一次 可傳遞參數"
- 注意:每個定時器都會傳回一個定時器id,定時器id主要用在清除定時器時.
- clearTimeout()
- 使用方式:clearTimeout(定時器id)
- 警告框
- alert();
- 對話框
- prompt();
"可以傳入兩個參數,第一個為提示資訊,第二個為預設值"
- 确認框
- confirm();
"可以傳入一個參數,為确認資訊"
- 擴充
- 打開 open(url);
- 關閉 colse();
- history 曆史
- 常用方法
- forward(); 下一個頁面
- back(); 傳回上一個頁面
- go(Number); ★
- go(number); 向後跳轉幾個頁面
- go(-number); 向前跳轉幾個頁面
- location 連接配接 ★★
- 常用屬性
- href
- kk; 得到目前頁面的路徑
- kk=url; 跳向指定的頁面
- navigator 了解
- screen 了解
- DOM(文檔對象模型):操作文檔 (明天内容)
- 擷取一個元素(标簽)對象
- var obj = document.getElementById("id值");
"通過id擷取一個标簽對象"
- 擷取對象中的value值
"通過對象的value屬性 對象.value;"
回顧:
javaScript:直譯式的腳本語言,直接嵌入html使用即可
js和html整合:
方式1:内聯式
通過script标簽實作,直接在标簽體中編寫js代碼即可
方式2:外聯式(首先要編寫外部的js檔案,字尾名以*.js結尾)
通過script标簽的src屬性實作
js組成部分:
ECMAScript:核心文法
變量聲明
var 變量名稱 = 初始化值;
資料類型
原始類型:(5種)
Undefined: undefined var age;
Number:
String:
Null: null
Boolean:
typeof 對象;
引用類型:
運算符
等性運算符:
== !=
=== !==
關系運算符:
> < >= <=
邏輯運算符:
&& || !
"abc" || false
"abc" || "123"
"abc" && "123"
"abc" && false
語句
if("123"){}
for(){}
函數
方式1:普通函數
function 函數名(){}
方式2:匿名函數
var 函數名 = function (參數,參數){}
調用函數:
函數名(參數,參數);
傳回值:
return 傳回值;
事件
onclick:單擊事件
onsubmit:表單送出事件
onload:頁面加載成功事件
事件和事件源綁定
方式1:綁定事件
通過标簽的事件屬性
<xxx onclick = "func()"></xxx>
方式2:派發事件
a.擷取事件源(擷取标簽對象)
var 對象 = document.getElementById("id");
b.給事件源派發事件
對象.事件名稱 = function(){
....
}
BOM:操作浏覽器
window:視窗
屬性:
通過window擷取其他的四個對象即可.使用window的屬性或方法的時候window可以省略不寫
方法:
定時器:
周期執行:
var interId = setInterval();
setInterval("函數名稱()",毫秒值);
setInterval(函數名稱,毫秒值);
clearInterval(id);
單次執行:
var timeId = setTimeout();
clearTimeout(id);
警告框:
對話框:
确認框:
打開和關閉:
history:曆史
方法:
forward();
back();
go(number);
location:連接配接 ★★
屬性:
href
kk;
kk = url;
DOM:操作文檔
var 對象 = document.getElementById("id");
對象.屬性名稱; 擷取
對象.屬性名稱 = 值; 設定
/////////////////////////////////
案例1-完善表單校驗
需求分析:
當表單送出的時候,校驗表單中的使用者名和密碼是否符合格式,如果不符合,則在相應的輸入框後面填寫提示資訊且不允許表單送出,
反之可以送出
技術分析:
事件
正規表達式:
DOM對象:
///////////////////////////
DOM:
操作value屬性
擷取value屬性的值:
擷取一個标簽對象:
var 标簽對象 = document.getElementById();
擷取value屬性的值:
标簽對象.value;
設定value屬性的值:
擷取一個标簽對象:
var 标簽對象 = document.getElementById();
設定value屬性的值
标簽對象.value = 值;
操作标簽體:
擷取标簽體内容:
擷取一個标簽對象:
var 标簽對象 = document.getElementById();
擷取标簽體的内容:
标簽對象.innerHTML;
設定标簽體内容:
擷取一個标簽對象:
var 标簽對象 = document.getElementById();
設定标簽體的内容:
标簽對象.innerHTML = "<xxx>值</xxx>";
正規表達式:
1.編寫正規表達式
使用者名：var zz = /^[a-z0-9_-]{3,16}$/;
密碼：var zz = /^[a-z0-9_-]{6,18}$/;
校驗為空: /^\s*$/
2.校驗
var str = "123";
zz.test(str); Boolean
///////////////////////
步驟分析:
1.确定事件(表單送出事件)
<form onsubmit="retrun checkForm()"></form>
<form id="formId"></form>
2.編寫checkForm函數
function checkForm(){
//0/設定全局開關
var flag = true;
//a.擷取使用者名和密碼輸入框對象
var 對象 = document.getElementById("id");
//b.擷取使用者名和密碼的值
var val = 對象.value;
//c.編寫正規表達式
//d.校驗
if(zz.test(val)){
//校驗不通過
給對應的span标簽中填寫提示資訊
flag = false;
}else{
//校驗通過
給對應的span标簽中填寫提示資訊
}
//e.傳回值
return flag;
}
案例2-表格各行換色
需求分析:
當頁面加載成功後,給表格的奇數行和偶數行添加不同的背景顔色
技術分析:
事件
DOM:
//////////////////////
步驟分析:
1.确定事件(頁面加載成功事件)
onload = function(){
}
2.編寫匿名函數
a.擷取目前頁面所有行對象
var trObjArr = document.getElementsByTagName("tr");
b.周遊數組對象,給計數行和偶數行添加不同的背景顔色
for(var i=0;i<trObjArr.length;i++){
if(i%2==0){
trObjArr[i].style.backgroundColor = "顔色";
}else{
trObjArr[i].style.backgroundColor = "顔色";
}
}
案例3-複選框全選和全不選
需求分析:
當點選頭部的複選框的時候,要使其他複選框的狀态和頭部的保持一緻.
技術分析:
單擊事件
DOM
操作元素的checked屬性
/////////////////////////////
步驟分析:
1.确定事件(單擊事件)
給頭部的複選框添加單擊事件
2.編寫函數
a.擷取頭部複選框狀态
對象.checked;
b.擷取其他的複選框對象
c.周遊其他的複選框對象數組,分别給每一個複選框對象設定checked屬性
案例4-省市二級關聯
需求分析:
當省份的下拉選改變的時候,根據選中的省份查詢其所對應的市,将所對應的市,展示到市的下拉選中.
技術分析:
改變事件
數組
Dom操作
/////////////////////
步驟分析:
1.确定事件(改變事件)
給省份的下拉選添加改變事件
2.編寫changePro函數
function changePro(){
a.擷取選中省份所對應的市數組(value)
var cityArr = arr[value];
b.擷取市的下拉選對象
var cityObj = document.getElementById("cityId");
c.周遊市數組,将每一個市拼成option追加到市的下拉選中
cityObj.innerHTML += "";
} 複制