JavaScript 筆記總結

1、js的簡介 
一、js是什麼
　　js是能夠嵌入到html中，是 基於對象 和 事件驅動 的 腳本語言
　　特色：
　　　　(1)交互性
　　　　(2)安全性：js不能訪問本地磁盤
　　　　(3)跨平臺：瀏覽器中都具有js解析器
二、js能作什麼
　　　(1)js能動態的修改(增刪)html和css的代碼
　　　(2)能動態的校驗數據

三、js歷史及組成
　　ECMAScript BOM(瀏覽器對象模型)  DOM(文檔對象模型)
四、js被引入的方式
　　(1)內嵌腳本
　　　　<input type="button" value="button" onclick="alert('xxx')" />
　　(2)內部腳本
　　　　<script type="text/javascript">
　　　　　　alert("xxx");
　　　　</script>
(3)外部腳本
　　首先先建立一個js文件
　　其次在html中引入
　　<script type="text/javascript" src="demo1.js"></script>
　　js代碼放在哪？
　　　　放在哪都行 可是在不影響html功能的前提下 越晚加載越好
2、js基本語法
一、變量
　　(1)
　　　　var x = 5;
　　　　x = 'javascript';
　　　　var y = "hello";
　　　　var b = true;
　　(2)
　　　　x = 5;

二、原始數據類型
　　(1)number:數字類型
　　(2)string：字符串類型
　　(3)boolean:布爾類型
　　(4)null:空類型
　　(5)underfind:未定義

　　注意：number、boolean、string是僞對象

　　類型轉換：
　　　　number\boolean轉成string
　　　　toString();
　　　　string\boolean轉成number
　　　　parseInt()
　　　　parseFloat()
　　　　boolean 不能轉
　　　　string 能夠將數字字符串轉換成number 若是「123a3sd5」 轉成123強制轉換
　　　　Boolean()  強轉成布爾
　　　　數字強轉成布爾  非零就是true   零就是false
　　　　字符串強轉成布爾  非「」(空字符串)就是true   空字符串「」就是false
　　　　Number() 強轉成數字
　　　　布爾轉數字 true轉成1  false轉成0
　　　　字符串轉數字 不能強轉

三、引用數據類型
　　java: Object obj = new Object();
　　js: var obj = new Object();
　　var num = new Number();

四、運算符
　　(1)賦值運算符
　　　　var x = 5;
　　(2)算數運算符
　　　　+ - * / %
　　　　+: 遇到字符串變成鏈接
　　　　-：先把字符串轉成數字而後進行運算
　　　　*: 先把字符串轉成數字而後進行運算
　　　　/: 先把字符串轉成數字而後進行運算
　　(3)邏輯運算符
　　　　&& ||
　　(4)比較運算符
　　　　< > >= <= != ==
　　　　===:全等：類型與值都要相等
　　(5)三元運算符
　　　　3<2?"大於":"小於"
　　(6)void運算符
　　　　<a href="javascript:void(0);">xxxxxx</a>
　　(7)類型運算符
　　　　typeof:判斷數據類型 返回個人數據類型
　　　　instanceof：判斷數據類型 是不是某種類型
　　　　var obj = new Object();
　　　　alert(typeof obj);//object
　　　　alert(obj instanceof Object);//true
五、邏輯語句
　　(1)if-else
　　　　//條件:
　　　　//數字非0 字符串非空====true
　　　　if(9){
　　　　　　alert("true--");
　　　　}else{
　　　　　　alert("false--");
　　　　}
　　(2)switch
　　　　var x = "java";
　　　　switch(x){
　　　　　　case "css":
　　　　　　　　alert("css");
　　　　　　　　break;
　　　　　　case "js":
　　　　　　　　alert("js");
　　　　　　　　break;
　　　　　　case "java":
　　　　　　　　alert("java");
　　　　　　　　break;
　　　　　　default:
　　　　　　　　alert("def");
　　　　　　}

　　(3)for
　　　　 for(var i = 0;i<5;i++){
　　　　　　alert(i);
　　　　 }
　　(4)for in
　　　　var arr = [1,3,5,7,"js"];
　　　　 for(index in arr){//index表明角標
　　　　　　//alert(index);
　　　　　　alert(arr[index]);
　　　　 }

3、js內建對象
　　(1)Number
　　　　建立方式：
　　　　　　var myNum=new Number(value);
　　　　　　var myNum=Number(value);
　　　　　　屬性和方法：
　　　　　　　　toString():轉成字符串
　　　　　　　　valueOf()：返回一個 Number 對象的基本數字值
　　(2)Boolean
　　　　建立方式：
　　　　　　var bool = new Boolean(value);
　　　　　　var bool = Boolean(value);
　　　　屬性和方法：
　　　　　　toString():轉成字符串
　　　　　　valueOf()：返回一個 Boolean 對象的基本值(boolean)
　　(3)String
　　　　建立方式：
　　　　　　var str = new String(s);
　　　　　　var str = String(s);
　　　　屬性和方法：
　　　　　　length:字符串的長度
　　　　　　charAt():返回索引字符
　　　　　　charCodeAt:返回索引字符unicode
　　　　　　indexOf():返回字符的索引
　　　　　　lastIndexOf();逆向返回字符的索引
　　　　　　split();將字符串按照特殊字符切割成數組
　　　　　　substr():從起始索引號提取字符串中指定數目的字符
　　　　　　substring():提取字符串中兩個指定的索引號之間的字符
　　　　　　toUpperCase();轉大寫
　　(4)Array
　　　　建立方式：
　　　　　　var arr = new Array();//空數組
　　　　　　var arr = new Array(size);//建立一個指定長度的數據
　　　　　　var arr = new Array(element0, element1, ..., elementn);//建立數組直接實例化元素
　　　　　　var arr = [];//空數組
　　　　　　var arr = [1,2,5,"java"];//建立數組直接實例化元素
　　　　屬性和方法：
　　　　　　length:數組長度
　　　　　　join()：把數組的全部元素放入一個字符串。元素經過指定的分隔符進行分隔一個
　　　　　　pop():刪除並返回最後元素
　　　　　　push()：向數組的末尾添加一個或更多元素，並返回新的長度
　　　　　　reverse();反轉數組
　　　　　　sort();排序
　　(5)Date
　　　　建立方式：
　　　　　　var myDate = new Date();
　　　　　　var myDate = new Date(毫秒值);//表明從1970-1-1到如今的一個毫秒值
　　　　屬性和方法
　　　　　　getFullYear():年
　　　　　　getMonth():月 0-11
　　　　　　getDate():日 1-31
　　　　　　getDay()：星期 0-6
　　　　　　getTime():返回1970年1月1日午夜到指定日期（字符串）的毫秒數
　　　　　　toLocalString();得到本地時間格式的字符串
　　(6)Math
　　　　建立方式：
　　　　　　Math 對象並不像 Date 和 String 那樣是對象的類，所以沒有構造函數 Math()，像 Math.sin() 這樣的函數只是函數，不是某個對象的方法。您無需建立它，經過把 Math 做爲對象使用就能夠調用其全部屬性和方法。
　　　　屬性和方法
　　　　　　PI：圓周率
　　　　　　abs():絕對值
　　　　　　ceil():對數進行上舍入
　　　　　　floor():對數進行下舍入
　　　　　　pow(x,y)：返回 x 的 y 次冪
　　　　　　random():0-1之間的隨機數
　　　　　　round():四捨五入
　　(7)RegExp
　　　　建立方式：
　　　　　　var reg = new RegExp(pattern);
　　　　　　var reg = /^正則規則$/;
　　　　規則的寫法：
　　　　　　[0-9] 
　　　　　　[A-Z]
　　　　　　[a-z]
　　　　　　[A-z]
　　　　　　\d 表明數據
　　　　　　\D 非數字
　　　　　　\w 查找單詞字符
　　　　　　\W 查找非單詞字符
　　　　　　\s 查找空白字符
　　　　　　\S 查找非空白字符
　　　　　　n+ 出現至少一次
　　　　　　n* 出現0次或屢次
　　　　　　n? 出現0次或1次
　　　　　　{5} 出現5
　　　　　　{2,8} 2到8次
　　　　方法：
　　　　　　test(str):檢索字符串中指定的值。返回 true 或 false
　　　　需求：
　　　　　　校驗郵箱：
　　　　　　　　var email = haohao_827@163.com
　　　　　　　　var reg = /^[A-z]+[A-z0-9_-]*\@[A-z0-9]+\.[A-z]+$/;
　　　　　　　　reg.test(email);
4、js的函數
一、js函數定義的方式
　　(1)普通方式
　　　　語法：function 函數名(參數列表){函數體}
　　　　示例：
　　　　　　function method(){
　　　　　　　　alert("xxx");
　　　　　　}
　　　　　　method();
　　(2)匿名函數
　　　　語法：function(參數列表){函數體}
　　　　示例：
　　　　　　var method = function(){
　　　　　　　　alert("yyy");
　　　　　　};
　　　　　　method();
　　(3)對象函數
　　　　語法：new Function(參數1,參數2,...,函數體);
　　　　注意：參數名稱必須使用字符串形式、最後一個默認是函數體且函數體須要字符串形式
　　　　示例：
　　　　　　var fn = new Function("a","b","alert(a+b)");
　　　　　　fn(2,5);
二、函數的參數
　　(1)形參沒有var去修飾
　　(2)形參和實參個數不必定相等
　　(3)arguments對象 是個數組 會將傳遞的實參進行封裝
　　　　function fn(a,b,c){
　　　　　　//var sum = a+b+c;
　　　　　　//alert(sum);
　　　　　　//arguments是個數組 會將傳遞的實參進行封裝
　　　　　　for(var i=0;i<arguments.length;i++){
　　　　　　　　alert(arguments[i]);
　　　　　　}
　　　　}
　　　　fn(1,2,4,8);

三、返回值
　　(1)在定義函數的時候沒必要代表是否具備返回值
　　(2)返回值僅僅經過return關鍵字就能夠了 return後的代碼不執行
　　　　function fn(a,b){
　　　　　　return a+b;
　　　　　　//alert("xxxx");
　　　　}
　　　　alert(fn(2,3));

四、js的全局函數
　　(1)編碼和解碼
　　　　encodeURI()   decodeURI()
　　　　encodeURIComponet()   decodeURIComponent()
　　　　escape() unescape()
　　　　三者區別：
　　　　　　進行編碼的符號範圍不一樣吧，實際開發中常使用第一種
　　(2)強制轉換
　　　　Number()
　　　　String()
　　　　Boolean()
　　(3)轉成數字
　　　　parseInt()
　　　　parseFloat()
　　(4)eval()方法
　　　　將字符串看成腳本進行解析運行
　　　　//var str = "var a=2;var b=3;alert(a+b)";
　　　　//eval(str);
　　　　function print(str){
　　　　　　eval(str);
　　　　}
　　　　print("自定義邏輯");

5、js的事件
　　事件
　　事件源
　　響應行爲
一、js的經常使用事件
　　onclick:點擊事件
　　onchange:域內容被改變的事件
　　需求：實現二級聯動
　　　　<select id="city">
　　　　　　<option value="bj">北京</option>
　　　　　　<option value="tj">天津</option>
　　　　　　<option value="sh">上海</option>
　　　　</select>
　　　　<select id="area">
　　　　　　<option>海淀</option>
　　　　　　<option>朝陽</option>
　　　　　　<option>東城</option>
　　　　</select>
　　　　<script type="text/javascript">
　　　　var select = document.getElementById("city");
　　　　select.onchange = function(){
　　　　　　var optionVal = select.value;
　　　　　　switch(optionVal){
　　　　　　　　case 'bj':
　　　　　　　　　　var area = document.getElementById("area");

　　　　　　　　　　area.innerHTML = "<option>海淀</option><option>朝陽</option><option>東城</option>";    

                             　　break;

　　　　　　　　case 'tj':
　　　　　　　　　　var area = document.getElementById("area");
　　　　　　　　　　area.innerHTML = "<option>南開</option><option>西青</option><option>河西</option>";
　　　　　　　　　　break;
　　　　　　　　case 'sh':
　　　　　　　　　　var area = document.getElementById("area");
　　　　　　　　　　area.innerHTML = "<option>浦東</option><option>楊浦</option>";
　　　　　　　　　　break;
　　　　　　　　default:
　　　　　　　　　　alert("error");
　　　　　　}
　　　　};
　　　　</script>
onfoucus:得到焦點的事件
onblur:失去焦點的事件
需求： 當輸入框得到焦點的時候，提示輸入的內容格式
當輸入框失去焦點的時候，提示輸入有誤
<label for="txt">name</label>
<input id="txt" type="text" /><span id="action"></span>
<script type="text/javascript">
var txt = document.getElementById("txt");
txt.onfocus = function(){
//友好提示
var span = document.getElementById("action");
span.innerHTML = "用戶名格式最小8位";
span.style.color = "green";
};
txt.onblur = function(){
//錯誤提示
var span = document.getElementById("action");
span.innerHTML = "對不起 格式不正確";
span.style.color = "red";
};
</script>

onmouseover:鼠標懸浮的事件
onmouseout:鼠標離開的事件
需求：div元素 鼠標移入變爲綠色 移出恢復原色
#d1{width:200px;height: 200px;}
<div id="d1"></div>
<script type="text/javascript">
var div = document.getElementById("d1");
div.onmouseover = function(){
this.style.backgroundColor = "green";
};
div.onmouseout = function(){
this.style.backgroundColor = "red";
};
</script>


onload:加載完畢的事件
等到頁面加載完畢在執行onload事件所指向的函數
<span id="span"></span>
<script type="text/javascript">
window.onload = function(){
var span = document.getElementById("span");
alert(span);
span.innerHTML = "hello js";
};
</script>

二、事件的綁定方式
(1)將事件和響應行爲都內嵌到html標籤中
<input type="button" value="button"  onclick="alert('xxx')"/>
(2)將事件內嵌到html中而響應行爲用函數進行封裝
<input type="button" value="button" onclick="fn()" />
<script type="text/javascript">
function fn(){
alert("yyy");
}
</script>
(3)將事件和響應行爲 與html標籤徹底分離
<input id="btn" type="button" value="button"/>
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("zzz");
};
</script>

****this關鍵字
this通過事件的函數進行傳遞的是html標籤對象
<input id="btn" name="mybtn" type="button" value="button123" onclick="fn(this)"/>
<script type="text/javascript">
function fn(obj){
alert(obj.name);
}
</script>

三、阻止事件的默認行爲
IE：window.event.returnValue = false;
W3c: 傳遞過來的事件對象.preventDefault();
//ie：window.event.returnValue = false;
//W3c：傳遞過來的事件對象.preventDefault();
//W3c標準
if(e&&e.preventDefault){
alert("w3c");
e.preventDefault();
//IE標籤
}else{
alert("ie");
window.event.returnValue = false;
}


//經過事件返回false也能夠阻止事件的默認行爲
<a href="demo11.html" onclick="return false">點擊我吧</a>

四、阻止事件的傳播
IE：window.event.cancelBubble = true;
W3c: 傳遞過來的事件對象.stopPropagation();
if(e&&e.stopPropagation){
alert("w3c");
e.stopPropagation();
//IE標籤
}else{
alert("ie");
window.event.cancelBubble = true;
}


6、js的bom
(1)window對象
彈框的方法：
提示框：alert("提示信息");
確認框：confirm("確認信息");
有返回值：若是點擊確認返回true  若是點擊取消 返回false
var res = confirm("您確認要刪除嗎？");
alert(res);
輸入框：prompt("提示信息");
有返回值：若是點擊確認返回輸入框的文本 點擊取消返回null
var res =  prompt("請輸入密碼？");
alert(res);
open方法：
window.open("url地址");
open("../jsCore/demo10.html");

定時器：
setTimeout(函數,毫秒值);
setTimeout(
function(){
alert("xx");
},
3000
);
clearTimeout(定時器的名稱);
var timer;
var fn = function(){
alert("x");
timer = setTimeout(fn,2000);
};
var closer = function(){
clearTimeout(timer);
};
fn();
setInterval(函數,毫秒值);
clearInterval(定時器的名稱)
var timer = setInterval(
function(){
alert("nihao");
},
2000
);
var closer = function(){
clearInterval(timer);
};

需求：註冊後5秒鐘跳轉首頁
恭喜您註冊成功，<span id="second" style="color: red;">5</span>秒後跳


轉到首頁，若是不跳轉請<a href="../jsCore/demo10.html">點擊這裏</a>
<script type="text/javascript">
var time = 5;
var timer;
timer = setInterval(
function(){
var second = document.getElementById("second");
if(time>=1){
second.innerHTML = time;
time--;
}else{
clearInterval(timer);
location.href="../jsCore/demo10.html";
}
},
1000
);
</script>

(2)location
location.href="url地址";
(3)history
back();
forward();
go();
<a href="demo7.html">後一頁</a>
<input type="button" value="上一頁" onclick="history.back()">
<input type="button" value="下一頁" onclick="history.forward()">

<input type="button" value="上一頁" onclick="history.go(-1)">
<input type="button" value="下一頁" onclick="history.go(1)">