JavaScript重溫基礎

今天重溫瞭下Javacript,給大傢帶來一篇JavaScript博文。相信很多人對於JavaScript都情有獨鐘,今天我們全面的學習下。說JavaScript(下面簡稱js)是世界上最流行的腳本語言一點也不為過,js是可以嵌入到html中的一種基於對象和事件驅動的腳本語言,下來我們看看js的特點和用途:

特點:交互性,安全性(js不能訪問本地磁盤),跨平臺(瀏覽器中都具備js解析器)
用途:js能動態的修改(增刪)html和css的代碼,能動態的校驗數據

js被引入的方式:

(1)內嵌腳本

<input type="button" value="button" onclick="alert('xx')" />    

(2)內部腳本

<script type="text/javascript">
    alert("xxx");
</script>

(3)外部腳本

首先先創建一個js文件,其次在html中引入

<script type="text/javascript" src="default.js"></script>

js代碼在不影響html功能的前提下越晚加載越好(優化頁面加載)。

1.js基本語法

(1)變量

var x = 5; x = 'js'; var y = "hello"; var b = true;

(2)基本數據類型

number:數字類型,string:字符串類型,boolean:佈爾類型,null:空類型,underfind:未定義

註意:number、boolean、string是偽對象

類型轉換:

number\boolean轉成string
    toString();
string\boolean轉成number
    parseInt()
    parseFloat()
    boolean不能轉
    string可以將數字字符串轉換成number 如果“123abc” 轉成123

強制轉換:

Boolean() 強轉成佈爾
    數字強轉成佈爾,非零就是true,零就是false
    字符串強轉成佈爾,非""(空字符串)就是true,空字符串""就是false
Number() 強轉成數字
    佈爾轉數字,true轉成1,false轉成0
    字符串轉數字,不能強轉

(3)引用數據類型

java:   Object obj = new Object();
js:     var obj = new Object();
        var num = new Number(); 

(4)運算符

1)賦值運算符

var x = 5;

2)算數運算符

+ - * / %
+: 遇到字符串變成連接
-:先把字符串轉成數字然後進行運算
*: 先把字符串轉成數字然後進行運算
/: 先把字符串轉成數字然後進行運算

3)邏輯運算符

&&  ||

4)比較運算符

<   >   >=  <=  !=  ==
===: 全等:類型與值都要相等

5)三元運算符

3<2?"大於":"小於"

6)void運算符

<a href="javascript:void(0);">xx</a>

7)類型運算符

typeof:判斷數據類型 返回我的數據類型
instanceof:判斷數據類型 是否是某種類型

var obj = new Object();
alert(typeof obj); //object
alert(obj instanceof Object); //true

(5)邏輯語句

(1)if-else
    if(9){
        alert("true--");
    }else{
        alert("false--");
    }
(2)switch
    var x = "js";
    switch(x){
        case "css":
            alert("css"); break;
        case "js":
            alert("js"); break;
        default:
            alert("def");
    }

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

2.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():返回2000年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 = blog@csdn.net
    var reg = /^[A-z]+[A-z0-9_-]*\@[A-z0-9]+\.[A-z]+$/;
    reg.test(email);

3.js的函數

(1)js函數定義的方式

1)普通方式

語法:function 函數名( 參數列表 ){ 函數體 }
示例:

function method(){
    alert("xx");
}
method();

2)匿名函數

語法:function(參數列表){函數體}
示例:

var method = function(){
    alert("yy");
};
method();

3)對象函數

語法:new Function(參數1,參數2,…,函數體);
註意:參數名稱必須使用字符串形式、最後一個默認是函數體且函數體需要字符串形式
示例:

var fn = new Function("a","b","alert(a+b)");
fn(1,2);

(2)函數的參數

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,3,4);

(3)返回值

1)在定義函數的時候不必表明是否具有返回值
2)返回值僅僅通過return關鍵字就可以瞭 return後的代碼不執行

function fn(a,b){
    return a+b;
    //alert("xx");
}
alert(fn(2,3));

(4)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("自定義邏輯");

4.js的事件

事件,事件源,響應行為

(1)js的常用事件

onclick:點擊事件
onchange:域內容被改變的事件
需求:實現二級聯動

<select id="city">
    <option value="bj">北京</option>
    <option value="tj">天津</option>
</select>
<select id="area">
    <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>";
                break;
            case 'tj':
                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");
    //onfocus:為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:鼠標離開的事件
需求:p元素 鼠標移入變為綠色 移出恢復原色

#d1{background-color: red;width:200px;height: 200px;}
<p id="d1"></p>
<script type="text/javascript">
    var p = document.getElementById("d1");
    p.onmouseover = function(){
        this.style.backgroundColor = "green";
    };
    p.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>

(2)事件的綁定方式

1)將事件和響應行為都內嵌到html標簽中

<input type="button" value="button"  onclick="alert('xx')"/>

2)將事件內嵌到html中而響應行為用函數進行封裝

<input type="button" value="button" onclick="fn()" />
<script type="text/javascript">
    function fn(){
        alert("yy");
    }
</script>

3)將事件和響應行為 與html標簽完全分離

<input id="btn" type="button" value="button"/>
<script type="text/javascript">
    var btn = document.getElementById("btn");
    btn.onclick = function(){
        alert("zz");
    };
</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>

(3)阻止事件的默認行為

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>

(4)阻止事件的傳遞

IE:window.event.cancelBubble = true;
W3C: 傳遞過來的事件對象.stopPropagation();

if(e&&e.stopPropagation){
    alert("w3c");
    e.stopPropagation();
//IE標簽
}else{
    alert("ie");
    window.event.cancelBubble = true;
}   

5.js的BOM

BOM(Browser Object Model),瀏覽器對象模型。主要處理瀏覽器窗口和框架,不過通常瀏覽器特定的JavaScript 擴展都被看做BOM的一部分。

(1)window對象

彈框的方法:
    提示框:alert("提示信息");
    確認框:confirm("確認信息");
        有返回值:如果點擊確認返回true  如果點擊取消 返回false
        var res = confirm("您確認要刪除嗎");
        alert(res);
    輸入框:prompt("提示信息");
        有返回值:如果點擊確認返回輸入框的文本 點擊取消返回null
        var res =  prompt("請輸入字符");
        alert(res);
    open方法:
        window.open("url地址");           
        open("../index.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">5</span>秒後跳轉到首頁,如果不跳轉請<a href="../index.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="../ok.html";
            }
        },1000
    );
</script>

(2)location

location.href="url地址";

(3)history

back(); forward(); go();

<a href="demo2.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)">

6.js的DOM

DOM(Document Object Model),文檔對象模型。根據W3C DOM規范,DOM是一種與瀏覽器、平臺、語言無關的接口,使得你可以訪問頁面其他的標準組件。

(1)理解文檔對象模型

html文件加載到內存之後會形成一顆dom樹,根據這些節點對象可以進行腳本代碼的動態修改
在dom樹當中,一切皆為節點對象

(2)DOM方法和屬性

1)DOM方法

查找元素節點:

getElementById() :返回值id屬性值的元素節點,如果不存在返回null。
        例如:var inputNode = document.getElementById("id");

getElementsByName():返回name屬性所有元素的節點集合,這個集合可以當作一個數組來處理,
        length屬性等於當前文檔裡有著給定name屬性的所有元素的總個數。

getElementsByTagName():返回給定標簽名所有元素的節點集合,這個集合可以當作一個數組來處理,
        length屬性等於當前文檔裡有著給定標簽名的所有元素的總個數。
        該方法不必非得用在整個文檔上。它也可以用來在某個特定元素的子節點當中尋找有著給定標簽名的元素。

查看是否存在子節點:

hasChildNodes():用來檢查一個元素是否有子節點,返回值是true或false。

2)DOM屬性

nodeName:一個字符串,其內容是給定節點的名字。
例如:var name = node.nodeName;
    如果節點是元素節點,nodeName返回這個元素的名稱
    如果是屬性節點,nodeName返回這個屬性的名稱
    如果是文本節點,nodeName返回一個內容為#text的字符串 
註:nodeName是一個隻讀屬性。


nodeType:返回一個整數,這個數值代表著給定節點的類型。
nodeType 屬性返回的整數值對應著 12 種節點類型,常用的有三種:
    Node.ELEMENT_NODE    ---1    -- 元素節點
    Node.ATTRIBUTE_NODE  ---2    -- 屬性節點
    Node.TEXT_NODE       ---3    -- 文本節點
註:nodeType是一個隻讀屬性。


nodeValue:返回給定節點的當前值(字符串)
    如果給定節點是一個屬性節點,返回這個屬性的值。
    如果給定節點是一個文本節點,返回這個文本節點的內容。
    如果給定節點是一個元素節點,返回null
註:nodeValue是一個讀/寫屬性,但不能對元素節點的nodeValue屬性設置值,但可以為文本節點的nodeValue屬性設置一個值。
    var v = document.getElementById(“v”);
    if(v.firstChild.nodeType == 3)
        v.firstChild.nodeValue = “測試”;

下來我們具體看看元素節點、屬性節點、文本節點:

元素節點:

//測試元素節點,輸出節點名稱,節點的類型,節點的值
var liElements=document.getElementsByTagName("v");
for(var i=0;i<liElements.length;i++){
    alert(liElements[i].nodeName);
    alert(liElements[i].nodeType);
    alert(liElements[i].nodeValue);
}

屬性節點:

//測試屬性節點,輸出屬性節點名稱,節點的類型,節點的值
var liElements=document.getElementsByTagName("v");
for(var i=0;i<liElements.length;i++){
    var attrElement=liElements[i].getAttributeNode("value")
    alert("attrElement.nodeName "+attrElement.nodeName);
    alert("attrElement.nodeType "+attrElement.nodeType);
    alert("attrElement.nodeValue "+liElements[i].getAttribute("value"));
}

文本節點:

//測試元素節點,輸出節點名稱,節點的類型,節點的值
var liElements=document.getElementsByTagName("v");
for(var i=0;i<liElements.length;i++){
    alert(liElements[i].childNodes[0].nodeName);
    alert(liElements[i].childNodes[0].nodeType);
    alert(liElements[i].childNodes[0].nodeValue);

    liElements[i].childNodes[0].nodeValue="北京";
    alert(liElements[i].childNodes[0].nodeValue);

    //另一種讀取方法
    alert(liElements[i].firstChild.nodeName);
    alert(liElements[i].firstChild.nodeType);
    alert(liElements[i].firstChild.nodeValue);
}

好瞭,就介紹到這裡,各位看官沒事留個言,贊一個,哈~。

發佈留言