JavaScript學習總結

openkk 12年前發布 | 53K 次閱讀 JavaScript開發 JavaScript

JavaScript是由NetScape發明的；語法和Java非常類似；但是注意的一點是：Java和JavaScript沒有任何關系。

JavaScript中有許多內置對象，不需要用戶創建；


HTML使用小技巧：

(1)如果想要輸出一個空的表格，則需要<td>&nbsp</td>

(2)在Editplus中支持快速瀏覽制作的網頁，快捷鍵是CTRL+B;



一、使用JavaScript



如果要在HTML中引入JavaScript，則有兩種方式：

（1）內部引入：JS代碼直接在HTML中編寫；

導入的結構如下：

<script language="JavaScript">
    ....
</script>

一般JS代碼都放在head標簽中；

 

（2）外部引入：JS代碼在外部編寫后導入到HTML中；

<script language="JavaScript" src="1.js">
....
</script>


二、JavaScript語法

 

1.跳出提示框 alert


在JavaScript中，使用的最多的就是alert，此語句會使得瀏覽器彈出一個提示框；

alert("Hello world!!!" );就能彈出一個Hello world!!!的提示框；

<html>
    <head>
        <title></title>
        <script language="JavaScript">
            alert("歡迎光臨！");
            alert("謝謝！");
        </script>
    </head>
</html>


2.頁面輸出內容  document.write()


此語句也是非常常用的，可以直接向頁面輸出內容；比如：

document.write("<h3>Hello world!!!</h3>");   就可以在頁面中顯示Hello world!!!

此語句和JSP中的out.println()非常類似；

<html>
    <head>
        <title></title>
        <script language="JavaScript">
            document.write("<h3>Hello world!!!</h3>");
        </script>
    </head>
</html>


3.定義變量 var


這個特性和python是很類似的，Java中，有許多特定的數據類型，但是在JS中，只需要將任何類型的值賦予var即可；

例如：

(1)var num1 = 5;   num1的類型就是整數；

(2)var str1 = "Hello world!!!";  str1的類型就是字符串；

<html>
    <head>
        <title></title>
        <script language="JavaScript">
            var num1 = 5;
            var str1 = "Hello world!!!";
            alert(num1);
            alert(str1);
        </script>
    </head>
</html>


4.字符串比較


在JavaScript中，比較字符串是否相等只需要通過==即可；而不需要equals();

5.函數聲明


在JavaScript中，函數聲明非常簡單，形式如下：

function(參數...){

[返回值;]

}

注意：

(1)參數也不能聲明類型，只需要寫明參數的名稱即可；

(2)函數聲明并看不出是否有返回值，在實現中，如果有返回值，則return；

<html>
    <head>
        <title></title>
        <script language="JavaScript">
            function fun(i){
                alert("歡迎"+i);
            }
            fun("xiazdong");
        </script>
    </head>
</html>

6.數組 Array


這里的數組也是沒有類型的；只需要var arr = new Array(...);即可；數組的初始化有兩種方式：

（1）靜態初始化：var arr = new Array("1","2","3");     直接賦值；

（2）動態初始化：var arr = new Array(length);       只聲明長度；后來在賦值；

如果是動態初始化，一開始數組的元素內容是“undefined”；

輸出數組內容：注意：arr.length返回數組長度；

for(i=0;i<arr.length;i++){

arr[i]  ....

}

<html>
    <head>
        <title></title>
        <script language="JavaScript">
            var arr = new Array(3);
            var str = "";
            for(i=0;i<arr.length;i++){
                arr[i]=i;
            }
            for(i=0;i<arr.length;i++){
                str=str+arr[i]+"、";
            }
            alert(str);
        </script>

    </head>
</html>


三、JavaScript事件


JavaScript的事件增加了動態效果，并且一般來說，觸發事件后，都會調用某個函數，以完成功能；

"#"表示當前頁；

1.body包含的事件


(1)onLoad：打開網頁時調用；
(2)onUnLoad：關閉網頁時調用；

2.表單提交事件 onSubmit

當點擊表單的submit按鈕時，就會除觸發onSubmit事件，并調用某函數，通常此事件用于驗證操作；

補充：

在JavaScript中獲得表單控件的值:可以通過層層遞進的方式獲得；

document是文檔的根節點；

比如：

<form action="" method="post" onSubmit="fun(this)" name="f">
            <input type="text" name="name"/><br />
            <input type="radio" name="radiobutton"/>男<br />
            <input type="radio" name="radiobutton"/>女<br />
            <input type="button" value="顯示" onClick="show()"/>
        </form>

（1）獲得文本控件的值：document.f.name.value即可獲得；

（2）獲得單選按鈕中的“男”按鈕的值：document.f.radiobutton[0].value;

（3）獲得單選按鈕中的“女”按鈕的值：document.f.radiobutton[1].value;

（4）判斷單選按鈕中的“男”按鈕是否選中：document.f.radiobutton[0].checked;


3.單擊事件  onClick

當單擊某個控件，則觸發該事件；

(1)在<a href>中觸發onClick;

(2)在button中觸發onClick;

4.下拉列表事件  onChange


此事件在下拉列表的值改變時觸發；

<html>
    <head>
        <title></title>
        <script language="JavaScript">
            function fun(v){
                alert(v);
            }

        </script>
        <form action="" method="post"  name="f">
            EMAIL:<input type="text" name="name"/><br />
            <select name="favor" onChange="fun(this.value)">
                <option value="a">a</option>
                <option value="b">b</option>
                <option value="c">c</option>

            </select>
            <input type="submit" value="提交"/>
        </form>
    </head>
    <body >

    </body>
</html>

5.失去焦點事件   onblur


此事件用于失去焦點時調用；比如<input type="text" onblur="  fun()"/>的意思是當這個文本框失去焦點時即調用。


四、JavaScript中的正則表達式


在JavaScript中也支持正則，但是使用語法與Java稍微不同；

/正則/.test(字符串);

比如email的驗證：

/^\w+@\w+.\w+$/.test(value);

<html>
    <head>
        <title></title>
        <script language="JavaScript">
            function validate(f){
                var email = f.name.value;
                if(/^\w+@\w+.\w+$/.test(email)){
                    return true;
                }
                else{
                    return false;
                }
            }

        </script>
        <form action="" method="post" onSubmit="return validate(this)" name="f">
            EMAIL:<input type="text" name="name"/><br />

            <input type="submit" value="提交"/>
        </form>
    </head>
    <body >

    </body>
</html>

以上完成了一個簡單的驗證操作；注意：

觀察onSubmit事件，如果需要讓返回值有用，需要return；

f.name.focus();可以使文本框獲得焦點；

f.name.select();可以選中文本框中的文本；

五、window對象


1.打開新窗口：window.open函數


比如：

window.open("http://www.google.com","width=500,height=500,resizable=no");  打開谷歌網頁，并且控制網頁大小、尺寸；

window.open("http://www.google.com");普通方法打開網頁；

<html>
    <head>
        <title></title>
        <script language="JavaScript">
            function fun(url){
                window.open(url,"頁面標題","width=500,height=500,resizable=no");
            }

        </script>

    </head>
    <body >
        <form action="" method="post">
            <select name="favor" onChange="fun(this.value)">
                <option value="#">====請選擇====</option>
                <option value="http://www.baidu.com">百度</option>
                <option value="http://www.google.com">谷歌</option>
            </select>
        </form>
    </body>
</html>


2.確認窗口:window.confirm()


比如：

var flag = window.confirm("確認？"); 如果選是，則返回true；否則返回false；

<html>
    <head>
        <title></title>
        <script language="JavaScript">
            function fun(){
                if(window.confirm("確認")){
                    alert("是");
                }
                else{
                    alert("否");
                }
            }
            fun();
        </script> 
    </head>
    <body >   
    </body>
</html>

3.頁面重定向


通過window.location屬性能夠完成頁面的轉換；

只需要window.location="http://www.google.com"就能夠將當前網頁跳轉到谷歌;

<html>
    <head>
        <title></title>
        <script language="JavaScript">
            function fun(url){
                window.location=url;   //將當前的網頁的地址變換
            }
        </script>

    </head>
    <body >
        <form action="" method="post">
            <select name="favor" onChange="fun(this.value)">
                <option value="#">====請選擇====</option>
                <option value="http://www.baidu.com">百度</option>
                <option value="http://www.google.com">谷歌</option>
            </select>
        </form>
    </body>
</html>


4.在子窗口中操作父窗口 opener


通過window.opener.document可以獲得父窗口的文檔對象；

window.opener.location可以獲得父窗口地址；

window.opener.location.reload();重新加載父窗口；

父窗口：

<html>
    <head>
        <title></title>
        <script language="JavaScript">
            function fun(){
                window.open("demo03.html","頁面標題","width=500,height=500,resizable=no");
            }
        </script>

    </head>
    <body >
        <form action="" method="post">
            <input type="button" value="打開子窗口" onClick="fun()"/>
        </form>
    </body>
</html>

子窗口:

<html>
    <head>
        <title></title>
        <script language="JavaScript">
        function fun(){
            window.opener.location="http://www.baidu.com";
        }
        </script>
    </head>
    <body >
        <input type="button" value="跳轉到百度" onClick="fun()"/>
    </body>
</html>

轉自:http://blog.csdn.net/xiazdong?viewmode=contents

 本文由用戶 openkk 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！