JavaScript—腳本語言
- js是一個解釋型的腳本語言
- 基本語法
變量命名：var
1、可以使用/_/字母
注意：不允許有空格
js數據類型
兩類：基本數據類型：Number，String，Boolean
引用數據類型：Object
alert(" “);調程序（慎用）
console.log(” “);（控制檯輸出）
console.log(typeof obj);判斷輸入類型
三種彈出對話框的語句
alert（“”）
prompt(”"):通過prompt輸入的數據，統統都是string類型
confirm("")
"+"運算符：一、算術相加，必須都得是number類型
二、如果有一個不爲number類型，只起連接作用
數據類型轉化：
parseInt(arg) 只保留整數部分
parseFloat(arg)
Number(arg): Number(arg)是個對象
如果給的參數無法轉換爲number類型數據，返回NaN
判斷用戶輸入是不是數字 ： isNaN(arg)
Boolean(“0”)->true
Boolean()->false
Boolean("")->false
Boolean(null)->false
三、函數
1、函數聲明不用寫參數類型，所有函數都以小寫字母開頭
2、自定義函數不要與js系統函數名相同
3、js中不存在方法重載，後出現的方法會覆蓋掉之前的方法
4、變量提升
var num=10;
function myFunc(){var num;
console.log(num);
}
myFunc();
等價於
var num=10;
function myFunc(){
console.log(num);
var num;
}
myFunc();
在函數中，後聲明的變量，聲明前就調用了 。它是一種叫“變量提升“的機制。
插入：js 異常處理
try{
}catch(err){
}finally{
}
四、對象
js 中單引號與雙引號無區別
內置對象
String
Boolean
Date
Math
Number
Array
//String對象
console.log(str.substr(2,3); //從2號索引位置，連續截取3個字符作爲字符串
console.log(str.substring(5,10); //從5號位置到10號位置，組成字符串
//Date對象
var d=new Date();
console.log(d.toLocaleString());—>顯示本地時間
console.log(d.toDateString);–>顯示年月日
console.log(d.getFullYear()+"-"+d.getMonth()+"-"+d.getDay());—>年-月-日
//Math對象
var m=Math.ceil(12.1);
consol.log(m);//向上取整（13）
m=Math.round(9.5);//四捨五入（9）
m=Math.random();//js中的random取隨機數，0<=m<1
//班裏共50個人，隨機點名
m=parseInt(Math.random()*50);
consol.log(m);
五、數組
//Array對象
var arr=new Array();
//var[] arr=new var[3];錯誤
arr[0]="豬八戒";
arr[1]="孫悟空";
for (var i = 0; i<arr.length; i++) {
console.log(arr[i]);
}
console.log(arr.join(" "));
//for ... in語句
for(var i in arr){
console.log(arr[i]);
}
js中Array對象可以當字典使用，.length屬性就不能使用了
<–>如果遍歷一個字典，只能使用for…in語句
訪問對象只能使用key
arr=[1,2,3,4];
for (var i = 0; i <arr.length; i++) {
console.log(arr[i]);
}
//字典裏的字面量表示方法
var nameList={"name":"黃家駒","age":"21","address":"香港"};
for (var key in nameList) {
console.log(key+":"+nameList[key]);
}
console.log(nameList.name);
console.log(nameList.age);
console.log(nameList.address);
六、Json對象
Json對象，它是以”key:value"對集合的一種數據存儲方式
var nameList1={"name":"黃家駒","age":21,"address":"香港"};
var nameList2={"name":"成龍","age":42,"address":"香港"};
var nameList3={"name":"黃曉明","age":32,"address":"上海"};
nameList=[{"name":"黃家駒","age":21,"address":"香港"},{"name":"成龍","age":42,"address":"香港"},{"name":"黃曉明","age":32,"address":"上海"}];
console.log(nameList.length);
for (var i=0;i<nameList.length;i++) {
console.log("name"+nameList[i].name);
console.log("age"+nameList[i].age);
console.log("address"+nameList.address);
}
七、js的擴展函數
var name="張三丰";
String.prototype.biaoqing=function(bq){//給String對象擴展一個叫biaoqing的方法
if (!bq) {
bq="~_~";
}
return bq+this+bq;
}
console.log(name.biaoqing("@"));
八、全局變量與局部變量
1.js裏沒有塊級作用域
2. 全局變量與局部變量
全局變量：在函數外部聲明的變量是全局變量
在函數內部沒聲明的局部變量，默認爲全局變量
局部變量：在函數內部聲明的變量是局部變量
var a=10;
function myFun(){
a="我愛你們";
b=a;
}
myFun();
alert(a);
alert(b);
九、事件
事件是js內置好的 ，所有事件都是以“on”開頭
js裏事件的三要素：事件源、事件、事件響應程序
十、DOM
DOM：文檔對象模型
BOM：BOM>DOM
window對象，是一個頂級對象。window對象給我們提供了一些列的對象、方法、屬性，供開發者使用。比如alert就是window對象的一個方法操作頁面元素的方法``
由於window是一個頂級對象，所以js中可以省略不寫。
DOM給我們提供一系列
<input type="button" value="鏈接到新浪" onclick="window.location.herf='http://www.sina.com.cn';">
DOM樹
元素、節點、標記
html+css+js（類上樣式，Id上動作）
十一、事件的註冊
1.行內註冊
2.動態註冊
注意：1.註冊代碼必須出現在標記之後
2.註冊時，只給要綁定的事件響應函數的函數名就行了，不要帶圓擴號，帶圓括號就成了方法調用。
但是，我們習慣把js 代碼寫在頭部（head）；
終極的動態註冊事件方法，就要用到window.onload事件，它在文檔全部加載完畢後纔會觸發
this在任何時候都是指向當前觸發事件的事件的事件源（對象）
js在web引用中的三大用處；
1、DOM操作 document.getElementById(),document.getElementByTagName()
2、控制樣式
3、動畫效果
十二、js控制樣式
兩種方法:1、行內樣式，控制頁面
$("test").style="background-color: orange;width: 500px;"
不正確 （IE不支持）
$("test").style.backgroundColor="red";
$("test").style.width="500px";
2、控制元素的“類”，達到控制樣式的目的
需要控制元素的className屬性，而不是class屬性，class也是js的關鍵字
十五、Date對象
十六、正則表達式
1、任務：檢查用戶在文本框中輸入的字符串是不是合法的電話號碼
2、正則表達式的作用：做字符串的格式匹配
3、注意：正則表達式不是js獨有的，Java、c#
4、元字符
1> ".“代表除了\n以外，任意的單個字符
a.b
“a/b”，“a/b”
2> "[ ]"代表在任意一定範圍之內的任意1個字符
a[0-9]b ->表示a和b之間必須有一個阿拉伯數字
a0b,a2b
a[xyz]b ->表示在a和b之間必須有一個字符，這個字符必須是x 或 y 或 z
axb,ayb
a[0-9a-zA-Z] ->表示在a和b 之間必須有一個字符，這個字符可以是0-9a-zA-Z之間任意一個字符
aHb
3> “|” 代表或的意思
m|hello ->表示：m或者hello
千萬別理解爲：mello或者hello
(m|h)ello: mello或者hello
5、限定符
1> 表示前面出現的表達式可以出現0次或者多次（0-n)
abc
ab,abc,abcc
x(abc)*y
xy,xabcy
2> + 表示前面出現的表達式可以出現0次或者多次（0-n）
3 > ? 表示0次或者1次
4 > {n} 表示必須出現n次
x(abc){2}y xabcabcy
x[0-9]{5}
x[a-zA-Z]{5}y
x[^0-9a-z}{5}y
abc,abcabc,ayxabc
只能是abc,其他字符都不能有^abc$
^xy.z$ : xy9z , xy&z , 123xy&z
8、元字符簡寫方法
1> \d代表數字 [0-9]
2> \D 表示\d的取反
3> \w 表示字母、_ 、數字（漢字）
4> \W 表示\w的取反
5> \s表示空白符（空格，回車，製表符、\t）
6> \S 表示\s的取反
練習：
1、寫出中國的電話號碼的正則表達式
010-78656432 ，0372-2900006，95580，110，15537241221
^(\d{3,4}-?\d{7,8})|(\d{5})$
2、寫出Email的正則表達式，[email protected]
^\w+@[0-9a-zA-z]+(.[a-zA-Z]+(.[a-zA-Z)+)+$
十七、定時器
js 裏有兩種定時器
1、每隔一段時間做一件事，（循環一直做，直到你強制停止了定時器）
2、多久之後，幹一件事情（只做1次），延遲做一件事
setInterval(function,ms);
//假如我要設置一個定時器，要求5秒燈泡閃一下
1> setInterval（function(){//燈泡閃爍},5000);
2> function shake(){//燈泡閃爍}
setInterval(shake,5000);
setInterval(shake(),5000);//錯誤寫法
注意：setInterval()又返回值，這個返回值就是指向當前定時器對象的引用
清理定時器 clearInterval(timer);
setTimeOut(function,ms);
十八、this
this只能在函數內部出現，它永遠代表的是直接調用該函數的對象。
十九、arguments
它是一個對象，只用在函數裏，它的一些成員，是用來表示本函數執行是的一些重要數據
arguments.length :調用函數時傳遞的實參個數
arguments.callee: 正在執行的函數它自己本身
二十、動畫效果
1、勻速動畫
2、緩動動畫
緩動動畫公式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>緩動動畫</title>
<style>
#box{
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
top: 100px;
left: 0px;
}
</style>
<script>
function $(id){
return document.getElementById(id);
}
window.onload=function(){
var leader=0;//用來計算每次定時器跳動之後，盒子應該處在的位置
var target=0;//目標位置
setInterval(function(){
leader=leader+(target-leader)/10;
$("box").style.left=leader+"px";
}, 30);
$("btn").onclick=function(){
target=500;
}
}
</script>
</head>
<body>
<input type="button" value="開始" id="btn">
<div id="box"> </div>
</body>
</html>