JavaWeb總複習——js基礎
阿新 • • 發佈:2018-11-26
js簡介:
JavaScript一種直譯式指令碼語言,是一種動態型別、弱型別、基於原型的語言,
內建支援型別。它的直譯器被稱為JavaScript引擎,為瀏覽器的一部分,廣泛用於客戶端的指令碼語言
1. js的組成:
ECMAScript(語法)
BOM(瀏覽器物件模型)
DOM(文件物件模型)
2. html和js的整合
方式1:內部編寫js <script type="text/javascript">js程式碼</script> 方式2: 外部有一個獨立的js檔案 字尾名:.js 在html中通過script的src屬性匯入 <script src="js的路徑"></script> 注意: 一旦使用了src屬性,那麼script標籤體中的js程式碼將不再執行了.
3. 變數:
var 變數名=初始化值;
4. 資料型別:
原始型別(5種)
Undefined
Null
String 用引號引起來的內容
Number
Boolean
通過typeof可以判斷一個值或者變數是否是原始型別,若是原始型別,還可以判斷屬於那種.
typeof 變數|值
引用型別
5. 運算子:
關係運算符: 兩邊值都是字串,比較ascii碼 兩邊都是數字,和java一樣 一邊是數字,一遍是字串形式的數字, 可以比較 一邊是數字,一遍是普通字串 可以比較 值永遠是false 等性運算子 "66"==66 true "666"===666 false
6. js的語句
if while for 和java一樣 ////////////////// 獲取元素: var obj=document.getElementById("id值"); 獲取元素的value屬性 var val=document.getElementById("id值").value; 設定元素的value屬性 document.getElementById("id值").value="sdfsdf"; 獲取元素的標籤體 var ht=document.getElementById("id值").innerHTML; 設定元素的標籤體 document.getElementById("id值").innerHTML="ssss"; 定義函式: 方式1:function 函式名(引數列表){函式體} 方式2: var 函式名=function(引數列表){函式體} 注意: 函式宣告的時候不用宣告返回值型別 引數列表上不要寫引數型別 通過return結束方法和將值返回
7. 事件:
onclick 單擊
onsubmit 表單提交
onload 頁面載入成功或者元素載入成功
8. 事件和函式繫結
方式1:通過元素的事件屬性
<xxx onxxx="函式名(引數列表)">
方式2:派發事件
document.getElementById("id值").onxxx=function(){...};
document.getElementById("id值").onxxx=函式名;
案例1-定時彈出廣告
需求:
開啟頁面後4秒,展示廣告,2秒之後,該廣告隱藏.再停2秒,繼續展示.
技術分析:
定時器
定時器(BOM-window物件)
setInterval(code,毫秒數):週期執行
setTimeout(code,毫秒數):延遲多長事件後 只執行一次.
清除定時器
clearInterval(id):
clearTimeout(id):
bom(瀏覽器物件模型)總結
所有的瀏覽器都有5個物件
window:視窗
location:定位資訊 (位址列)
history:歷史
window物件詳解:
如果文件包含框架(frame 或 iframe 標籤),瀏覽器會為 HTML 文件建立一個 window 物件,
併為每個框架建立一個額外的 window 物件。
常用的屬性:
通過window可以獲取其他的四個物件
window.location 等價域 location
window.history 等價於 history
...
常用的方法
訊息框
alert("...."):警告框
confirm("你確定要刪除嗎?"):確定框 返回值:boolean
prompt("請輸入您的姓名"):輸入框 返回值:你輸入的內容
定時器
設定定時器
setInterval(code,毫秒數):週期執行
setTimeout(code,毫秒數):延遲多長事件後 只執行一次.
例如:
setInterval(showAd,4000);
serInterval("showAd()",4000);
清除定時器
clearInterval(id):
clearTimeout(id):
開啟和關閉
open(url):開啟
close():關閉
location:定位資訊
常用屬性:
href:獲取或者設定當前頁面的url(定位資訊)
location.href; 獲取url
location.href="...";設定url 相當於 a標籤
history:歷史
back();後退
forward():向前
★go(int)
go(-1) 相當於 back()
go(1) 相當於 forward()
事件總結:
常見的事件:
焦點事件:★
onfocus
onblur
表單事件:★
onsubmit
onchange 改變
頁面載入事件:★
onload
滑鼠事件(掌握)
onclick
滑鼠事件(瞭解)
ondblclick:雙擊
onmousedown:按下
onmouserup:彈起
onmousemove:移動
onmouserover:懸停
onmouserout:移出
鍵盤事件(理解)
onkeydown:按下
onkeyup:彈起
onkeypress:按住
繫結事件:
方式1:
元素的事件屬性
方式2:
派發事件
dom(文件物件模型)
當瀏覽器接受到html程式碼的時候,瀏覽器會將所有的程式碼裝載到記憶體中,形成一棵樹(document樹)
節點(Node)
文件節點 document
元素節點 element
屬性節點 attribute
文字節點 text
獲取節點:
通過document可以獲取其他節點:
常用方法:
document.getElementById("id值"):獲取一個特定的元素
document.getElementsByTagName("標籤名"):通過標籤名獲取一種元素(多個)
document.getElementsByClassName("class屬性的值"):通過class屬性獲取一類元素(多個)
document.getElementsByName("name屬性的值"):通過name屬性獲取一類元素(多個)
設定獲取獲取節點的value屬性
dom物件.value;獲取
dom物件.value="";設定
設定或者獲取節點的標籤體
dom物件.innerHTML;獲取
dom物件.innerHTML="";設定
獲取或者設定style屬性
dom物件.style.屬性;獲取
dom物件.style.屬性="";設定
獲取或者設定屬性
dom物件.屬性
陣列:
語法:
new Array();//長度為0
new Array(size);//指定長度的
new Array(e1,e2..);//指定元素
非官方
var arr4=["aa","bb"];
常用屬性:
length
注意:
陣列是可變的
陣列可以存放任意值
常用方法:(瞭解)
存放值:對內容的操作
pop():彈 最後一個
push():插入 到最後
shift():刪除第一個
unshift():插入到首位
列印陣列:
join(分隔符):將數組裡的元素按照指定的分隔符列印
拼接陣列:
concat():連線兩個或更多的陣列,並返回結果。
對結構的操作:
sort();排序
reverse();反轉
引用型別總結:
原始型別中的String Number Boolean都是偽物件,可以呼叫相應的方法
Array:陣列
String:
語法:
new String(值|變數);//返回一個物件
String(值|變數);//返回原始型別
常用方法:
substring(start,end):[start,end)
substr(start,size):從索引為指定的值開始向後擷取幾個
charAt(index):返回在指定位置的字元。
indexOf(""):返回字串所在索引
replace():替換
split():切割
常用屬性:length
Boolean:
語法:
new Boolean(值|變數);
Boolean(值|變數);
非0數字 非空字串 非空物件 轉成true
Number
語法:
new Number(值|變數);
Number(值|變數);
注意:
null====>0
fale====>0 true====>1
字串的數字=====>對應的數字
其他的NaN
Date:
new Date();
常用方法:
toLocalString()
RegExp:正則表示式
語法:
直接量語法 /正則表示式/引數
直接量語法 /正則表示式/
new RegExp("正則表示式")
new RegExp("正則表示式","引數")
引數:
i:忽略大小寫
g:全域性
常用方法:
test() :返回值為boolean
Math:
Math.常量|方法
Math.PI
Math.random() [0,1)
全域性★:
decodeURI() 解碼某個編碼的 URI。
encodeURI() 把字串編碼為 URI。
Number():強制轉換成數字
String():轉成字串
parseInt():嘗試轉換成整數
parseFloat():嘗試轉換成小數
eval() 計算 JavaScript 字串,並把它作為指令碼程式碼來執行。