一.Javascript的含義
是一種解釋性的語言,主要給網(wǎng)頁添加各色各樣的動態(tài)功能,同時為用戶提供瀏覽效果。
二.JavaScript的主要特點
1. 簡單性
2. 動態(tài)性
3. 安全性
4. 跨平臺性
三.JavaScript的組成
1. ECMAScript :描述語言的語法和基本對象
2. BOM:描述網(wǎng)頁內(nèi)容的方法和接口
3. DOM:描述與瀏覽器進行交互的方法和接口
四.JavaScript的三種引入方式
1.標簽內(nèi)引入
2.內(nèi)部引入
3.外部引入
五.javaScript語法的基本要求
1.按照順序依次執(zhí)行
2.嚴格區(qū)分的大小寫
3.javascript中的結(jié)束分號不能省略
4.javascript中會忽略空白符和換行符
六. JavaScript常用的調(diào)試方法
1.alert()
2.confirm();
3.prompt();
4.console.log();
5.document.write()
七.表示符的使用規(guī)則
1.只用用數(shù)字、字母、下劃線、$
2.不能使用數(shù)字開頭
3.區(qū)分大小寫
4.不能用關(guān)鍵字
5. 駝峰命名法
八.javaScript中常見的數(shù)據(jù)類型
1.Number
2.Boolean
3.undefined
4.Null
5.String
6.Object
九. 算術(shù)運算符
+、-、*、/、%。
1.+ 運算符:運算規(guī)則
* 如果兩個都是Number則,則就按照普通的數(shù)學加法運算。
* 如果有一個是字符串,就按照字符串的串聯(lián)的方式連接。(如果另外一個不是字符串,則先轉(zhuǎn)換成字符串再連)。
* 如果有一個是NaN,則結(jié)果就是NaN。
*如果同時是Infinity或-Infinity,則結(jié)果就是Infinity或-Infinity。
* 如果一個是Infinity另外一個是-Infinity,則結(jié)果為NaN。
2.- 運算符:運算符規(guī)則
- 如果兩個都是Number則,則就按照普通的數(shù)學減法運算。
- 如果有一個操作數(shù)是字符串、布爾值、null 或undefined,則先在后臺調(diào)用Number()轉(zhuǎn)型函數(shù)將其轉(zhuǎn)換為數(shù)值,然后再根據(jù)正常減法計算。如果轉(zhuǎn)換的結(jié)果有一個是NaN,則減法的結(jié)果就是NaN
* 如果有一個操作數(shù)是對象,則調(diào)用對象的valueOf()方法以取得表示該對象的數(shù)值。如果得到的值是NaN,則減法的結(jié)果就是NaN。如果對象沒有valueOf()方法,則調(diào)用其toString()方法并將得到的字符串轉(zhuǎn)換為數(shù)值(了解)
3.* 運算符:運算符規(guī)則。
- 運算規(guī)則同減法。
1. / 運算符:運算規(guī)則
- 就是普通的除法運算,運算規(guī)則同 *
4. %運算符:運算規(guī)則
- 求余(求模)運算。
十.javaScript中常見的運算符
1.邏輯與 ( 只要有一個是false,則返回false)
2.邏輯或 (只要有一個是true,結(jié)果就是true)
3.邏輯非 (先轉(zhuǎn)換成Boolean值,再取反得到最終的結(jié)果)
### &&()和|| 的結(jié)果總結(jié):
1. 如果第一個能夠決定結(jié)果,則結(jié)果就是第一個表達式的值
2. 如果第一個不能決定結(jié)果,則結(jié)果就是第二個表達式的值
十一.JavaScript中的判斷語句
1.if語句
>##### 語法:
if(condition){
//語句1
}
2.if...else語句
>##### 語法:
if(condition){
//語句1
}
else{
//語句2
}
3. if...else if...elsif... 語句
>##### 語法:
if(condition1){
//語句1
}
else if(condition2){
//語句2
}
...
else if(condition3){
//語句n
}
4.if...else if...else ...else語句
>##### 語法:
if(condition1){
//語句1
}
else if(condition2){
//語句2
}
...
else if(condition3){
//語句n
}
else{
//else語句
}
5. switch條件語句
>##### 語法:
switch (expression) {
case value1:
//語句1
break;
case value2:
//語句2
break;
case value3:
//語句3
break;
case value4:
//語句4
break;
default:
}
十二.JavaScript中的循環(huán)結(jié)構(gòu)
1.for循環(huán)
語法:
for(表達式1; 表達式2; 表達式3){
//循環(huán)體
}
>注意:
- 3個表達式的都可以省略。
- 對表達式1和表達式3省略,對for循環(huán)沒有任何影響,只是少執(zhí)行了代碼而已。
- 如果表達式2省略,表示此處為true,那么這個循環(huán)就是死循環(huán)。
- 如果第一次檢查表達式2的時候就是false,則循環(huán)體內(nèi)的代碼可能一次也不執(zhí)行。
2.while循環(huán)
語法:while(condition){ }
>注意:
- condition不能省略。如果省略為語法錯誤
- while循環(huán)也有可能一次也不執(zhí)行。
3. do...while循環(huán)
語法: do{ //循環(huán)體}while(condition);
>注意:
- condition條件不能省略,省略語法錯誤。
- 由于先執(zhí)行在判斷,所以,對do...while 循環(huán)來說,循環(huán)體至少執(zhí)行一次。
十三. javaScript中的兩個特殊控制語句
1.break語句
作用:在循環(huán)體中,break會提前結(jié)束循環(huán)
>例如:
for(var i=0;i<6;i++){
if(i==5){
break;
}
console.log(i);
}
2.continue語句
作用:在循環(huán)體中,continue會結(jié)束本次循環(huán),不會執(zhí)行剩余的代碼,不過會繼續(xù)執(zhí)行它外層的循環(huán)
>例如:
for(var i=0 i<10;i++){
if(i==6){
continue;
}
}
十四.自定義函數(shù)
1.函數(shù)的聲明
語法:
function 函數(shù)名(形式參數(shù)1, 形式參數(shù)2, ...){
//函數(shù)體
}
例如:
function mer(a,b,c){
var m=a+b;
}
2.函數(shù)的調(diào)用
語法:
方法名(實參1,實參2);
例如:
function mer(m,n){
var m=n;
}
alert(mer(10));
3.函數(shù)的命名規(guī)范
十五.變量的作用域
##### 1.全局變量
定義: 在函數(shù)外部聲明的變量
例如:
var m=13;
alert(m);
##### 2.局部變量
定義: 在函數(shù)體內(nèi)部聲明的變量
>例如:
function f(){
var m="234";
alert(m);
}
##### 3.匿名函數(shù)
1.定義:沒有聲明函數(shù)名的函數(shù)
>例如:
var m=function(){
alert("Hello world");
}
m();
2.注意點:
* 匿名函數(shù)除了沒有函數(shù)名以外,與其他函數(shù)沒有任何區(qū)別
* 如果想要在其他地方調(diào)用該函數(shù),則需要先聲明一個變量,并把該函數(shù)的值賦值給聲明的變量
* 可以將變量名做為函數(shù)名調(diào)用
3.匿名函數(shù)的作用
* 可以將函數(shù)表達式存儲在變量中
* 可以將匿名函數(shù)當作參數(shù)來傳遞
##### 4.匿名函數(shù)的立即執(zhí)行
1.語法:
* (function(){
alert("立即執(zhí)行");
}());
2.注意點:
* 要把匿名函數(shù)用一對圓括號括起來,作為一個整體看
* 在函數(shù)的最后面添加一對圓括號來表示調(diào)用函數(shù)
3.函數(shù)遞歸調(diào)用
1. 定義:
在函數(shù)的內(nèi)部調(diào)用當前的函數(shù)
2. 需要滿足的條件
* 要有結(jié)束條件
* 遞歸不能無限的遞歸下去,否則會溢出。
3. 總結(jié):
函數(shù)的調(diào)用原理與數(shù)據(jù)結(jié)構(gòu)棧的實現(xiàn)是一致的。
十六.JavaScript中數(shù)組的特點
<pre>
1.數(shù)組的長度是可以動態(tài)改變的
2.在同一個數(shù)組中可以存儲不同的數(shù)據(jù)類型
3.每一個數(shù)組中都有一個 length的屬性,表示的是數(shù)組中元素的個數(shù)
</pre>
十七.數(shù)組的創(chuàng)建
- 數(shù)組中的兩種基本創(chuàng)建方式
1.字面量的方式
例如:["a", 5, "b",8]
2.構(gòu)造函數(shù)
例如: new Array(數(shù)組長度);
注意點:
- 在構(gòu)造函數(shù)創(chuàng)建數(shù)組對象時,最后一個元素后面不需要添加逗號
- 在構(gòu)造函數(shù)中只傳入一個Number值,這個值一定要大于 0
- 在構(gòu)造函數(shù)創(chuàng)建數(shù)組對象時,new關(guān)鍵字可以省略
3.修改和訪問數(shù)組中的元素
例如:
var arr=[10,20,30,40,50,60];
alert(arr[0]);
arr[3]=100;
4.數(shù)組中的長度
例如:
var arr = [10, 20, 60, 5, 7];
alert(arr.length);
十八.數(shù)組的遍歷
1.遍歷數(shù)組的方法
* 普通的for循環(huán)
* for...in
* for each
* for... of
2.普通for循環(huán)的遍歷
例如:
var arr=[20,30,50,60,78];
for (var i=0;i<arr.length;i++){
console.log(arr[i]);
}
3.for ...in循環(huán)的遍歷
例如:
var arr=[50,30,60,12,45];
for (var index in arr){
console.log(arr);
}
##### 注意:
for...in遍歷數(shù)組時,遍歷出來的是數(shù)組的下標
4.for each方法的遍歷
例如:
var arr=[23,4,56,7,80];
arr.forEach(function(ele,index){
alert(ele);
});
十九.javaScript中數(shù)組的常用方法
1.轉(zhuǎn)換方法:
toString()
作用:返回由數(shù)組中每個值得字符串形式拼接而成的一個以逗號分割的字符串
例如:
var arr=[2,3,45,6,78];
alert(arr.toString());
2.join()方法
作用:可以使用指定的連接符連接
例如:
var arr = [50, 20, 10, 5, 15, 6];
alert(arr.join("="));
二十.JavaScript中站的方法
1.入棧 ( push() )
作用:把新的元素添加到數(shù)組的后面
2.出棧 ( pop() )
作用:把數(shù)組中的最后一個元素從數(shù)組中移除
例如:
var arr=[2,3,4,5,67];
var num=arr.push("100");
var hom=arr.pop();
alert(num);
alert(hom);
3.隊列方法
1.shift()
作用:從隊列中的頭部移除元素
2.unshift()
作用:向隊列尾部添加元素
例如:
var arr=[23,45,67];
var num=arr.shift();
var bak=arr.unshift();
alert(num);
alert(bak);
4.數(shù)組中的倒序
reverse():
作用:將數(shù)組中的元素進行倒序
例如:
var arr=[34,56,7,9];
arr.reverse();
alert(arr);
5.javaScript中查找指定元素在數(shù)組中的索引
1. indexOf(item,num)
作用:從num的位置開始向后查找item第一次出現(xiàn)的位置
2.lastIndex(item,num)
作用:從num的位置開始向前查找item第一次出現(xiàn)的位置
例如:
var arr=[2,3,5,3,6,2,8,8];
alert(indexOf("2",2);
alert(lastIndeOf("3",4);
6.獲取新的數(shù)組
1.concat(arrayX,arrayX,......,arrayX)
作用:用于連接多個數(shù)組,并且不會對原數(shù)組做任何的改變
例如:
var arr=[2,34,56];
var arr1=[87,65,43];
var newArr=arr.concat(arr1);
alert(newArr);
2. slice(start,end)方法
作用:截取數(shù)組,并且返回結(jié)渠道的新數(shù)組
例如:
var arr=["a","s","d","f","g"];
var arr1.slice(0,3);
alert(arr1);
3.splice(index,howmany,item1,.....,itemX) 方法
作用:向數(shù)組中添加元素,刪除元素,替換元素
例如:
var arr=[2,3,4,"as",d,f];
var num= arr.splice(1,3);
alert(num);
var num1=arr.splice(1,0,"m","n");
alert(num1);
var num2=arr.splice(1,2,"2","3");
alert(num2);
二十一.javaScript中數(shù)組的檢測
1.instanceof運算符
作用:會返回一個Boolean值,指出對象是否是特定構(gòu)造函數(shù)的一個實例
例如:
var arr = [];
alert(arr instanceof Array);
2.Array.isArray()方法
作用:判斷一個變量是不是數(shù)組,是則返回true,否則返回false
例如:
var arr = [];
alert(Array.isArray(arr))
二十二. JavaScript中字符串的操作
1.注意:
javaScript中字符串是不可變的,需要創(chuàng)建一個新的字符串
2. 字符串的創(chuàng)建
- 字符串直接量
例如:
var s = "good";
alert(typeof s);
- 通過String()轉(zhuǎn)換函數(shù)
==例如:==
var s = String(123);
alert(typeof s);
二十三.JavaScript中字符串常見的方法
##### 1.s.charAt(index)
作用:返回的是指定位置的字符
>例如:
var s = "a你好bcd";
alert(s.charAt(0));
##### 2.s.charCodeAt(index)
作用:返回指定位置的字符的 Unicode 編碼
>例如:
var s = "a你好bcd";
alert(s.charCodeAt(0));
##### 3.字符串連接方法
###### 1.s.concat(stringX,stringX,...,stringX)
* 作用:用于連接兩個或者多個字符
* 注意:
1.并不會改變原字符串
2.可以使用字符串連接符(+)
>例如:
var s = "你好";
alert(s.concat("啊", "凌源"));
##### 4.查找子字符串出現(xiàn)的位置
###### 1. s.indexOf(searchvalue,fromindex)
作用:可以返回某個指定的字符串值在字符串中首次出現(xiàn)的位置
>例如:
var v = "abcabdefgh";
alert(s.indexOf("ab"));
###### 2.s.lastIndexOf(searchvalue,fromindex)
作用:可以返回一個指定的字符串值最后出現(xiàn)的位置,在一個字符串中的指定位置從后向前搜索
>例如:
var s = "abcabcdab";
alert(s.lastIndexOf("ab"));
##### 5.js字符串的截取
###### 1.s.substring(start,stop) 方法
作用:用于提取字符串中介于兩個指定下標之間的字符
>例如:
var s="asdfghj";
alert (s.substring(1));
###### 2.s.substr(start, length) 方法
作用:可以在字符串中抽取從start下標開始的指定數(shù)目的字符
>例如:
var s="asdfghj";
alert (s.substr(1));
###### 3.s.slice(start,end) 方法
作用:可以提取字符串的某個部分,并且以新的字符串返回被提取的部分
>例如:
var s="asdfghj";
alert (s.slice(1,3));
##### 6.大小寫轉(zhuǎn)換方法
###### 1.s.toUpperCase
作用:字符串中所有的字符轉(zhuǎn)變成為大寫
>例如:
var s = "abcAbc";
alert(s.toUpperCase());
###### 2.s.toLowerCase
作用:字符串中的所有的字符轉(zhuǎn)變成小寫
>例如:
var s = "ABcAbc";
alert(s.toLowerCase());
##### 7.去除字符串首尾空白字符
s.trim() :
作用;只是去除字符串的首尾的所有空白字符. 字符串內(nèi)部的空白字符不做任何處理
>例如:
var s = " \n \t ABc Abc \t \n \t";
alert(s.trim());
##### 8.字符串替換、匹配、搜索方法
###### 1. s.replace(regexp/substr,replacement)方法
作用:用于在字符串中用一些字符替換另一些字符,或替換一個與正則表達式匹配的子串。
>例如:
var s = "abcaba";
var newStr = s.replace("ab", "js");
alert(newStr);
###### 2. s.match(匹配值)
作用:在字符串內(nèi)檢索指定的值
>例如:
var s = "abcaba";
var arr = s.match("ab");
alert(arr);
###### 3.s.search(匹配的參數(shù))
作用:始終從字符串的頭部開始查找
>例如:
var s = "abcaba";
var arr = s.search("ab");
alert(arr);
##### 9.字符串比較
* == 比較兩個字符串的==內(nèi)容==是否相等
* === 恒等 只有類型和內(nèi)容都相等的時候才返回true
##### * s.localeCompare(other):
- 如果字符串在字母表中應(yīng)該排在字符串參數(shù)之前,則返回一個負值;
- 如果字符串的等于字符串參數(shù),返回0;
- 如果字符串在字母表中應(yīng)該排在字符串參數(shù)之后,則返回一個正數(shù);
##### 10.字符串切割方法
s.split(separator,howmany)方法
作用:用于把一個字符串分割成字符串數(shù)組。
>例如:
var s = "How do you do";
var arr = s.split(" ");
alert(arr);
二十四.JavaScript中Math對象
1.常用屬性
- Math.PI : π的值
- Math.E: 自然對數(shù)的底數(shù)
2.Math對象常用方法
- Math.abs(x) : 返回x的絕對值
- Math.max(任意個數(shù)值) :返回傳入的數(shù)值中的最大值
- Math.min(任意個數(shù)值) :返回傳入的數(shù)值中的最小值
- Math.ceil(number) : 返回大于等于number的最小整數(shù)(向上取整)
- Math.floor(number) : 返回小于等于number的最大整數(shù)(向下取整)
- Math.round(number): 四舍五入
- Math.pow(x, y) : 返回 x^y
- Math.random() : 返回 0-1之間的隨機小數(shù)
- Math.sin(x) 正弦, Math.cos(x) 余弦, Math.tan(x) 正切
二十五.BOM核心---window對象
1. 獲取全局變量的方式
this
window.age
*window.sagAge()
例如:
var num=24;
function sagAge(){
alert(this.num);
}
alert(window.age);
window.sagAge();
2. window窗口大小
==獲取瀏覽器窗口大小==
1.在Internet Explorer(9+)、Chrome、Firefox、Opera 以及 Safari
<pre>
- window.innerHeight - 瀏覽器窗口的內(nèi)部高度
- window.innerWidth - 瀏覽器窗口的內(nèi)部寬度
</pre>
2. 針對于 Internet Explorer 8、7、6、5
<pre>
- document.documentEelement.clentWidth
- document.documentEelement.clentWidth
</pre>
3.為了兼容瀏覽器的版本可以使用下面的代碼
<pre>
- var w=window.innerWidth || documentEelement.clentWidht;
- var h=window.innerHeight || documentEelemlent.clentHeight;
</pre>
3.調(diào)整窗口大小
- window.resize(w,h): 調(diào)整到指定的大小
- resizeBy(deltW, deltH): 增加指定窗口的寬和高
例如:
<pre>
<body>
<button onclick="to();">將窗口調(diào)整到指定大小</button>
<br/>
<button onclick="by();">寬和高增加的像素</button>
<script type="text/javascript">
function to () {
alert("我要縮小了");
window.resizeTo(200, 300);
}
function by () {
alert("我開始增大了");
window.resizeBy(30, 30);
}
</script>
</body>
</pre>
二十六. window中的定時器
1.window對象中定時器的功能方法
- 超時調(diào)用 setTimeout()
例如:
/*
setTimeout(code,millisec)
參數(shù)1:要執(zhí)行代碼。一般傳入一個函數(shù)。(當然也可是字符串形式的代碼,但是不建議使用)
參數(shù)2:多長時間后執(zhí)行參數(shù)1中的代碼。 單位毫秒
*/
<script type="text/javascript">
//傳入函數(shù)的時,函數(shù)名不要加括號。(因為方法不是我們調(diào)用,是引擎幫助我們調(diào)用)
// setTimeout方法會返回一個值,表示超時調(diào)用的id,可以在任務(wù)執(zhí)行前取消任務(wù)。
var timeOutId = window.setTimeout(go, 3000); // 3秒中之后執(zhí)行函數(shù)go中的代碼
function go () {
window.open("http://www.yztcedu.com")
}
window.clearTimeout(this.timerId); //取消這個超時調(diào)用,如果超時調(diào)用已經(jīng)執(zhí)行完畢,就什么也不會發(fā)生。
</script>
- 周期調(diào)用 setInterval()
例如:
/*
setInterval(code,millisec)
參數(shù)1:每隔一段時間執(zhí)行一次的代碼。 一般是一個函數(shù)
參數(shù)2:周期性執(zhí)行的時間間隔。 單位毫秒
*/
<body>
<h1 id="time"></h1>
<script type="text/javascript">
//顯示時間,每秒鐘變化一次。
window.setInterval(function() {
var timeElement = document.getElementById("time"); //找到h1標簽
var msg = new Date().toLocaleString();
timeElement.innerHTML = msg; //設(shè)置h1標簽中的值
}, 1000);
</script>
</body>
//清除間隔定時器
window.clearInterval(id);