java複習前端篇——JavaScript

標籤：建立   arguments   按鈕   .property   return   多少   運算   而且   click   

1.JS的概述：
    　什麼是JS：運行在瀏覽器端指令碼語言，基於對象和事件驅動的語言，應用於用戶端，瀏覽器會在讀取代碼時，逐行地執行指令碼代碼。而對於傳統編程來說，會在執行前對所有代碼進行編譯。
   　 JS的用途：使用JS提升使用者的體驗.使HTML動起來.

2.JS的引入方式：

 　　（1）：頁面內直接編寫JS代碼,JS代碼需要使用<script></script>.
　　 （2）：將JS的代碼編寫到一個.js的檔案中,在HTML中引入該JS代碼即可.
    <script  type="text/javascript"  src="../js/check.js"> //這裡面不寫東西</script>。外部指令碼不能包含 <script> 標籤。

 

3.JS的組成：

　　 （1） ECMAScript：JS的核心
    基本文法
        與 Java 一樣，變數、函數名、運算子以及其他一切東西都是區分大小寫。
            比如：變數 test 與變數 TEST 是不同的
        弱類型語言，可以任意改變變數的類型，變數是弱類型的與 Java 和 C 不同，ECMAScript 中的變數無特定的類型，定義變數時只用 var 運算子，可以將它初始化為任意值。因此，可以隨時改變變數所存資料的類型（盡量避免這樣做）。

例子
var color = "red";
var num = 25;
var visible = true;

        行代碼結束可不加分號，就預設為換行，建議加上分號，最好的代碼編寫習慣是總加入分號，因為沒有分號，有些瀏覽器就不能正確運行，不過根據 ECMAScript 標準，下面兩行代碼都是正確的：

var test1 = "red"
var test2 = "blue";

        變數名可以包含數字，但是不能以數字開頭
        注釋
            單行注釋    :    以雙斜杠開頭（//）
            多行注釋    :    以單斜杠和星號開頭（/*），以星號和單斜杠結尾（*/）

    js運算子：
        一元運算子：++ --  與Java一致
        邏輯運算子：&& || ！or
        算術運算子：+ - * / % 運算
            + 特點 ：做的是拼接操作
            - 特點 ： 先把值轉換成數值後再進行減法運算，轉換後不是數值相減會出現NaN
        關係運算子：
            >   <      >=    <=    ==    !=
            == 和 ===的區別，前者比較的是數值，後者不僅比較值而且還比較資料類型
        三元運算子
            值?運算式1:運算式1
            如果值為true,整個運算式取運算式1的值，如果值為false,整個運算式取運算式2值。
        賦值運算子
            *=、+=、-=、/=、%=
            以上賦值運算子與java中操作一樣
        逗號運算子
            var a=1, b=2;
            逗號運算子可以在一條語句中執行多個運算
    聲明變數
        var關鍵字
            var i = 10;
            var i =  "wangbadan";
            var i = true;
            var i = null;
            ......

    js流程式控制制語句：
        if條件
            格式 ：if(條件){語句}else{語句}
            在java中if語句後面的條件必須是true/false值，而在javascript 中我們描述true/false有多種方式，所以要注意與java中的區別
        switch語句
        While與do-while
        for迴圈

    js類型
        原始類型
            string：字元及字串都看做為字元類型
            number：數實值型別
            boolean：邏輯類型
            null
            undefined：變數未初始化

        參考型別：
            物件類型.物件類型預設值是null.
        類型判斷：
            typeof()

        類型轉換：
            toString():轉傳成字串
            parseInt(值)：轉換成數字類型
            parseFloat(值)：轉換成浮點類型
            Boolean(值)：值轉換成Boolean類型
            Number(值)：值轉換成Number類型

 

 

　　（2）DOM：Document Object Model   文件物件模型
    DOM:就是將文檔載入到記憶體，形成樹形結構, 從而操作樹形結構就可以改變HTML的樣子.
    Document :文檔對象.代表的是載入到記憶體中的整個的文檔.
    Element :元素對象.代表文檔中的每個元素（標籤）
    Attribute:屬性對象.代表元素上的屬性.
    Document,Element,Attribute統稱為Node（節點）

    DOM基本操作：1.擷取元素：
            document.getElementById()     通過ID獲得元素
            document.getElementsByName()    通過name屬性獲得元素
            document.getElementsByTagName();    通過標籤名獲得元素

       　　 2.建立元素：
            document.createElement();  建立元素
                    var para=document.createElement("p");

          　　  document.createTextNode();   建立文本節點
                    var node=document.createTextNode("這是新段落。");

              3.添加元素：
            element.appendChild(); 在最後添加一個節點
            element.insertBefore();  在某個元素之前插入一個節點
      　　4.  刪除元素：
            element.removeChild();  如需刪除 HTML 元素，您必須首先獲得該元素的父元素：
                    var parent=document.getElementById("div1");
　　　　　　var child=document.getElementById("p1");
　　　　　　parent.removeChild(child);

                如果能夠在不引用父元素的情況下刪除某個元素，就太好了。不過很遺憾。DOM 需要清楚您需要刪除的元素，以及它的父元素。這是常用的解決方案：找到您希望刪除的子項目，然後使用其 parentNode 屬性來找到父元素:
                    var child=document.getElementById("p1");
　　　　　　child.parentNode.removeChild(child);

       　　 5.修改元素:
            elementNode.setAttribute(name,value)
                參數 描述
                    name 必需。規定要設定的屬性名稱。
                    value 必需。規定要設定的屬性值。
                說明:  該方法把指定的屬性設定為指定的值。如果不存在具有指定名稱的屬性，該方法將建立一個新屬性。

       　　6. 改變 HTML
            改變 HTML 內容：document.getElementById(id).innerHTML=new HTML
            改變 HTML 屬性：document.getElementById(id).attribute=new value

        　　7.改變 CSS
            document.getElementById(id).style.property=new style

      　　 8. 事件
              對 HTML 事件做出反應
                onclick=JavaScript
                    <h1 onclick="this.innerHTML=‘謝謝!‘">請點擊該文本</h1>
                    <h1 onclick="changetext(this)">請點擊該文本</h1>

            HTML 事件屬性
                向 button 元素分配 onclick 事件：
                    <button onclick="displayDate()">點擊這裡</button>

            使用 HTML DOM 來分配事件
                向 button 元素分配 onclick 事件：
                    <script>
       document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

 

　　　　（3）BOM：Browser Object Model  瀏覽器物件模型 (BOM) 使 JavaScript 有能力與瀏覽器“對話”。

Window：視窗對象
    alert();     顯示帶有一段訊息和一個確認按鈕的警告框      alert("文本")
    confirm();    彈出一個確認對話方塊   confirm("文本")
    open();     開啟一個新視窗
    prompt();    顯示可提示使用者輸入的對話方塊     prompt("文本","預設值")

    設定定時的方法
        * setInterval(); :每隔多少毫秒執行某個運算式.     * setInterval(“change()”,5000);
        * setTimeout(); :隔多少毫秒執行一個該運算式.    * setTimeout(“change()”,5000);
    清除定時的方法 clearInterval();
           （1） clearInterval(id_of_setinterval)
                var int=self.setInterval("clock()",50)
                window.clearInterval(int);
       　 （2）clearTimeout();
            clearTimeout(setTimeout_variable)
                 t=setTimeout("timedCount()",1000)
                clearTimeout(t)
Navigator：瀏覽器對象
Screen：螢幕對象
History：曆史對象   go();   載入history 列表中的某個具體頁面
Location：路徑對象    href:   設定或者返回完整的URL

 

4.JS函數的定義和建立：

　　建立
    function 函數名（參數）{
函數體；
}
//預設傳回值為true。
* window.onload = function(){

}
    var 函數名 = new Function（參數（函數體））
    var 函數名 = function（參數） {
函數體
}
js函數參數問題： 參數無資料類型，調用時不用按照方法裡的參數規定來
js函數傳回值問題：
　　（1） 如果有傳回值可以用return
       （2）有傳回值不用聲明傳回值類型
            註：沒有方法重載，可以用arguments類比
       （3） 如果沒有傳回值就返回undefined

java複習前端篇——JavaScript