Web:06你知道的不知道的都在這-JavaScript
阿新 • • 發佈：2018-12-17
JavaScript介紹
JavaScript是執行在瀏覽器端的腳步語言，JavaScript主要解決的是前端與使用者互動的問題，包括使用互動與資料互動。 JavaScript是瀏覽器解釋執行的，前端指令碼語言還有JScript（微軟，IE獨有），ActionScript( Adobe公司，需要外掛)等。
前端三大塊
1、HTML：頁面結構
2、CSS：頁面表現：元素大小、顏色、位置、隱藏或顯示、部分動畫效果
3、JavaScript：頁面行為：部分動畫效果、頁面與使用者的互動、頁面功能
JavaScript嵌入頁面的方式
1、行間事件（主要用於事件）
<input type="button" name="" onclick="alert('ok！');">
2、頁面script標籤嵌入）
<script type="text/javascript">
alert('ok！');
</script>
3、外部引入
<script type="text/javascript" src="js/index.js"></script>
變數
JavaScript 是一種弱型別語言，javascript的變數型別由它的值來決定。 定義變數需要用關鍵字 ‘var’
var iNum = 123; var sTr = 'asd'; //同時定義多個變數可以用","隔開，公用一個‘var’關鍵字 var iNum = 45,sTr='qwe',sCount='68';
變數型別
5種基本資料型別：
1、number 數字型別
2、string 字串型別
3、boolean 布林型別 true 或 false
4、undefined undefined型別，變數宣告未初始化，它的值就是undefined
5、null null型別，表示空物件，如果定義的變數將來準備儲存物件，可以將變數初始化為null,在頁面上獲取不到物件，返回的值就是null
1種複合型別：
object
javascript語句與註釋
1、一條javascript語句應該以“;”結尾
<script type="text/javascript"> var iNum = 123; var sTr = 'abc123'; function fnAlert(){ alert(sTr); }; fnAlert(); </script>
2、javascript註釋
<script type="text/javascript">
// 單行註釋
var iNum = 123;
/*
多行註釋
1、...
2、...
*/
var sTr = 'abc123';
</script>
變數、函式、屬性、函式引數命名規範
1、區分大小寫
2、第一個字元必須是字母、下劃線（_）或者美元符號（$）
3、其他字元可以是字母、下劃線、美元符或數字
匈牙利命名風格：
物件o Object 比如：oDiv
陣列a Array 比如：aItems
字串s String 比如：sUserName
整數i Integer 比如：iItemCount
布林值b Boolean 比如：bIsComplete
浮點數f Float 比如：fPrice
函式fn Function 比如：fnHandler
正則表示式re RegExp 比如：reEmailCheck
獲取元素方法一
可以使用內建物件document上的getElementById方法來獲取頁面上設定了id屬性的元素，獲取到的是一個html物件，然後將它賦值給一個變數，比如：
<script type="text/javascript">
var oDiv = document.getElementById('div1');
</script>
....
<div id="div1">這是一個div元素</div>
上面的語句，如果把javascript寫在元素的上面，就會出錯，因為頁面上從上往下載入執行的，javascript去頁面上獲取元素div1的時候，元素div1還沒有載入，解決方法有兩種：
第一種方法：將javascript放到頁面最下邊
....
<div id="div1">這是一個div元素</div>
....
<script type="text/javascript">
var oDiv = document.getElementById('div1');
</script>
</body>
第二種方法：將javascript語句放到window.onload觸發的函式裡面,獲取元素的語句會在頁面載入完後才執行，就不會出錯了。
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
}
</script>
....
<div id="div1">這是一個div元素</div>
操作元素屬性
獲取的頁面元素，就可以對頁面元素的屬性進行操作，屬性的操作包括屬性的讀和寫。
操作屬性的方法
1、“.” 操作
2、“[ ]”操作
屬性寫法
1、html的屬性和js裡面屬性寫法一樣
2、“class” 屬性寫成 “className”
3、“style” 屬性裡面的屬性，有橫槓的改成駝峰式，比如：“font-size”，改成”style.fontSize”
通過“.”操作屬性：
<script type="text/javascript">
window.onload = function(){
var oInput = document.getElementById('input1');
var oA = document.getElementById('link1');
// 讀取屬性值
var sValue = oInput.value;
var sType = oInput.type;
var sName = oInput.name;
var sLinks = oA.href;
// 寫(設定)屬性
oA.style.color = 'red';
oA.style.fontSize = sValue;
}
</script>
......
<input type="text" name="setsize" id="input1" value="20px">
<a href="http://www.itcast.cn" id="link1">傳智播客</a>
通過“[ ]”操作屬性：
<script type="text/javascript">
window.onload = function(){
var oInput1 = document.getElementById('input1');
var oInput2 = document.getElementById('input2');
var oA = document.getElementById('link1');
// 讀取屬性
var sVal1 = oInput1.value;
var sVal2 = oInput2.value;
// 寫(設定)屬性
// oA.style.val1 = val2; 沒反應
oA.style[sVal1] = sVal2;
}
</script>
......
<input type="text" name="setattr" id="input1" value="fontSize">
<input type="text" name="setnum" id="input2" value="30px">
<a href="http://www.itcast.cn" id="link1">傳智播客</a>
innerHTML
innerHTML可以讀取或者寫入標籤包裹的內容
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
//讀取
var sTxt = oDiv.innerHTML;
alert(sTxt);
//寫入
oDiv.innerHTML = '<a href="http://www.itcast.cn">傳智播客<a/>';
}
</script>
......
<div id="div1">這是一個div元素</div>
函式
函式就是重複執行的程式碼片。
函式定義與執行
<script type="text/javascript">
// 函式定義
function fnAlert(){
alert('hello!');
}
// 函式執行
fnAlert();
</script>
變數與函式預解析
JavaScript解析過程分為兩個階段，先是編譯階段，然後執行階段，在編譯階段會將function定義的函式提前，並且將var定義的變數宣告提前，將它賦值為undefined。
<script type="text/javascript">
fnAlert(); // 彈出 hello！
alert(iNum); // 彈出 undefined
function fnAlert(){
alert('hello!');
}
var iNum = 123;
</script>
提取行間事件
在html行間呼叫的事件可以提取到javascript中呼叫，從而做到結構與行為分離。
<!--行間事件呼叫函式 -->
<script type="text/javascript">
function fnAlert(){
alert('ok!');
}
</script>
......
<input type="button" name="" value="彈出" onclick="fnAlert()">
<!-- 提取行間事件 -->
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn1');
oBtn.onclick = fnAlert;
function fnAlert(){
alert('ok!');
}
}
</script>
......
<input type="button" name="" value="彈出" id="btn1">
匿名函式
定義的函式可以不給名稱，這個叫做匿名函式，可以將匿名函式直接賦值給元素繫結的事件來完成匿名函式的呼叫。
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn1');
/*
oBtn.onclick = myalert;
function myalert(){
alert('ok!');
}
*/
// 直接將匿名函式賦值給繫結的事件
oBtn.onclick = function (){
alert('ok!');
}
}
</script>
函式傳參
<script type="text/javascript">
function fnAlert(a){
alert(a);
}
fnAlert(12345);
</script>
函式’return’關鍵字
函式中'return'關鍵字的作用：
1、返回函式執行的結果
2、結束函式的執行
3、阻止預設行為
<script type="text/javascript">
function fnAdd(iNum01,iNum02){
var iRs = iNum01 + iNum02;
return iRs;
alert('here!');
}
var iCount = fnAdd(3,4);
alert(iCount); //彈出7
</script>
條件語句
通過條件來控制程式的走向，就需要用到條件語句。
運算子
1、算術運算子： +(加)、 -(減)、 *(乘)、 /(除)、 %(求餘)
2、賦值運算子：=、 +=、 -=、 *=、 /=、 %=
3、條件運算子：==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)
if else
var iNum01 = 3;
var iNum02 = 5;
var sTr;
if(iNum01>iNum02){
sTr = '大於';
}
else
{
sTr = '小於';
}
alert(sTr);
多重if else語句
var iNow = 1;
if(iNow==1)
{
... ;
}
else if(iNow==2)
{
... ;
}
else
{
... ;
}
switch語句
多重if else語句可以換成效能更高的switch語句
var iNow = 1;
switch (iNow){
case 1:
...;
break;
case 2:
...;
break;
default:
...;
}
陣列及操作方法
陣列就是一組資料的集合，javascript中，數組裡面的資料可以是不同型別的。
定義陣列的方法
//物件的例項建立
var aList = new Array(1,2,3);
//直接量建立
var aList2 = [1,2,3,'asd'];
運算元組中資料的方法
1、獲取陣列的長度：aList.length;
var aList = [1,2,3,4];
alert(aList.length); // 彈出4
2、用下標運算元組的某個資料：aList[0];
var aList = [1,2,3,4];
alert(aList[0]); // 彈出1
3、join() 將陣列成員通過一個分隔符合併成字串
var aList = [1,2,3,4];
alert(aList.join('-')); // 彈出 1-2-3-4
4、push() 和 pop() 從陣列最後增加成員或刪除成員
var aList = [1,2,3,4];
aList.push(5);
alert(aList); //彈出1,2,3,4,5
aList.pop();
alert(aList); // 彈出1,2,3,4
5、unshift()和 shift() 從陣列前面增加成員或刪除成員
var aList = [1,2,3,4];
aList.unshift(5);
alert(aList); //彈出5,1,2,3,4
aList.shift();
alert(aList); // 彈出1,2,3,4
6、reverse() 將陣列反轉
var aList = [1,2,3,4];
aList.reverse();
alert(aList); // 彈出4,3,2,1
7、indexOf() 返回陣列中元素第一次出現的索引值
var aList = [1,2,3,4,1,3,4];
alert(aList.indexOf(1));
8、splice() 在陣列中增加或刪除成員
var aList = [1,2,3,4];
aList.splice(2,1,7,8,9); //從第2個元素開始，刪除1個元素，然後在此位置增加'7,8,9'三個元素
alert(aList); //彈出 1,2,7,8,9,4
多維陣列
多維陣列指的是陣列的成員也是陣列的陣列。
var aList = [[1,2,3],['a','b','c']];
alert(aList[0][1]); //彈出2;
迴圈語句
程式中進行有規律的重複性操作，需要用到迴圈語句。
for迴圈
for(var i=0;i<len;i++)
{
......
}
while迴圈
var i=0;
while(i<8){
......
i++;
}
陣列去重
var aList = [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1];
var aList2 = [];
for(var i=0;i<aList.length;i++)
{
if(aList.indexOf(aList[i])==i)
{
aList2.push(aList[i]);
}
}
alert(aList2);
獲取元素方法二
可以使用內建物件document上的getElementsByTagName方法來獲取頁面上的某一種標籤，獲取的是一個選擇集，不是陣列，但是可以用下標的方式操作選擇集裡面的標籤元素。
<script type="text/javascript">
window.onload = function(){
var aLi = document.getElementsByTagName('li');
// aLi.style.backgroundColor = 'gold'; // 出錯！不能同時設定多個li
alert(aLi.length);
aLi[0].style.backgroundColor = 'gold';
}
</script>
....
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
Javascript組成
1、ECMAscript javascript的語法（變數、函式、迴圈語句等語法）
2、DOM 文件物件模型 操作html和css的方法
3、BOM 瀏覽器物件模型 操作瀏覽器的一些方法
字串處理方法
1、字串合併操作：“ + ”
var iNum01 = 12;
var iNum02 = 24;
var sNum03 = '12';
var sTr = 'abc';
alert(iNum01+iNum02); //彈出36
alert(iNum01+sNum03); //彈出1212 數字和字串相加等同於字串相加
alert(sNum03+sTr); // 彈出12abc
2、parseInt() 將數字字串轉化為整數
var sNum01 = '12';
var sNum02 = '24';
var sNum03 = '12.32';
alert(sNum01+sNum02); //彈出1224
alert(parseInt(sNum01)+parseInt(sNum02)) //彈出36
alert(sNum03) //彈出數字12 將字串小數轉化為數字整數
3、parseFloat() 將數字字串轉化為小數
var sNum03 = '12.32'
alert(parseFloat(sNum03)); //彈出 12.32 將字串小數轉化為數字小數
4、split() 把一個字串分隔成字串組成的陣列
var sTr = '2017-4-22';
var aRr = sTr.split("-");
var aRr2= sTr.split("");
alert(aRr); //彈出['2017','4','2']
alert(aRr2); //彈出['2','0','1','7','-','4','-','2','2']
5、charAt() 獲取字串中的某一個字元
var sId = "#div1";
var sTr = sId.charAt(0);
alert(sTr); //彈出 #
6、indexOf() 查詢字串是否含有某字元
var sTr = "abcdefgh";
var iNum = sTr.indexOf("c");
alert(iNum); //彈出2
7、substring() 擷取字串 用法： substring(start,end)（不包括end）
var sTr = "abcdefghijkl";
var sTr2 = sTr.substring(3,5);
var sTr3 = sTr.substring(1);
alert(sTr2); //彈出 de
alert(sTr3); //彈出 bcdefghijkl
8、toUpperCase() 字串轉大寫
var sTr = "abcdef";
var sTr2 = sTr.toUpperCase();
alert(sTr2); //彈出ABCDEF
9、toLowerCase() 字串轉小寫
var sTr = "ABCDEF";
var sTr2 = sTr.toLowerCase();
alert(sTr2); //彈出abcdef
字串反轉
var str = 'asdfj12jlsdkf098';
var str2 = str.split('').reverse().join('');
alert(str2);
型別轉換
1、直接轉換 parseInt() 與 parseFloat()
alert('12'+7); //彈出127
alert( parseInt('12') + 7 ); //彈出19
alert( parseInt(5.6)); // 彈出5
alert('5.6'+2.3); // 彈出5.62.3
alert(parseFloat('5.6')+2.3); // 彈出7.8999999999999995
alert(0.1+0.2); //彈出 0.3000000000000004
alert((0.1*100+0.2*100)/100); //彈出0.3
alert((parseFloat('5.6')*100+2.3*100)/100); //彈出7.9
2、隱式轉換 “==” 和 “-”
if('3'==3)
{
alert('相等');
}
// 彈出'相等'
alert('10'-3); // 彈出7
3、NaN 和 isNaN
alert( parseInt('123abc') ); // 彈出123
alert( parseInt('abc123') ); // 彈出NaN
除錯程式的方法
1、alert
2、console.log
3、document.title
定時器
定時器在javascript中的作用
1、製作動畫
2、非同步操作
3、函式緩衝與節流
定時器型別及語法
/*
定時器：
setTimeout 只執行一次的定時器
clearTimeout 關閉只執行一次的定時器
setInterval 反覆執行的定時器
clearInterval 關閉反覆執行的定時器
*/
var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
alert('ok!');
}
課堂練習
1、定時器製作移動動畫2、定時器製作無縫滾動3、定時器製作時鐘
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
function timego(){
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth()+1;
var date = now.getDate();
var week = now.getDay();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
var str = '當前時間是：'+ year + '年'+month+'月'+date+'日 '+toweek(week)+' '+todou(hour)+':'+todou(minute)+':'+todou(second);
oDiv.innerHTML = str;
}
timego();
setInterval(timego,1000);
}
function toweek(n){
if(n==0)
{
return '星期日';
}
else if(n==1)
{
return '星期一';
}
else if(n==2)
{
return '星期二';
}
else if(n==3)
{
return '星期三';
}
else if(n==4)
{
return '星期四';
}
else if(n==5)
{
return '星期五';
}
else
{
return '星期六';
}
}
function todou(n){
if(n<10)
{
return '0'+n;
}
else
{
return n;
}
}
</script>
......
<div id="div1"></div>
4、定時器製作倒計時
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
function timeleft(){
var now = new Date();
var future = new Date(2016,8,12,24,0,0);
var lefts = parseInt((future-now)/1000);
var day = parseInt(lefts/86400);
var hour = parseInt(lefts%86400/3600);
var min = parseInt(lefts%86400%3600/60);
var sec = lefts%60;
str = '距離2016年9月12日晚24點還剩下'+day+'天'+hour+'時'+min+'分'+sec+'秒';
oDiv.innerHTML = str;
}
timeleft();
setInterval(timeleft,1000);
}
</script>
......
<div id="div1"></div>
變數作用域
變數作用域指的是變數的作用範圍，javascript中的變數分為全域性變數和區域性變數。
1、全域性變數：在函式之外定義的變數，為整個頁面公用，函式內部外部都可以訪問。
2、區域性變數：在函式內部定義的變數，只能在定義該變數的函式內部訪問，外部無法訪問。
<script type="text/javascript">
//全域性變數
var a = 12;
function myalert()
{
//區域性變數
var b = 23;
alert(a);
alert(b);
}
myalert(); //彈出12和23
alert(a); //彈出12
alert(b); //出錯
</script>
封閉函式
封閉函式是javascript中匿名函式的另外一種寫法，建立一個一開始就執行而不用命名的函式。
一般定義的函式和執行函式：
function myalert(){
alert('hello!');
};
myalert();
封閉函式：
(function myalert(){
alert('hello!');
})();
還可以在函式定義前加上“~”和“!”等符號來定義匿名函式
!function myalert(){
alert('hello!');
}()
封閉函式的好處
封閉函式可以創造一個獨立的空間，在封閉函式內定義的變數和函式不會影響外部同名的函式和變數，可以避免命名衝突，在頁面上引入多個js檔案時，用這種方式新增js檔案比較安全，比如：
var iNum01 = 12;
function myalert(){
alert('hello!');
}
(function(){
var iNum01 = 24;
function myalert(){
alert('hello!world');
}
alert(iNum01);
myalert()
})()
alert(iNum01);
myalert();
常用內建物件
1、document
document.getElementById //通過id獲取元素
document.getElementsByTagName //通過標籤名獲取元素
document.referrer //獲取上一個跳轉頁面的地址(需要伺服器環境)
2、location
window.location.href //獲取或者重定url地址
window.location.search //獲取地址引數部分
window.location.hash //獲取頁面錨點或者叫雜湊值
3、Math
Math.random 獲取0-1的隨機數
Math.floor 向下取整
Math.ceil 向上取整