Web前端開發JavaScript提升(4)

時間 2019-11-12

原文原文鏈接

JavaScript 一種直譯式腳本語言,是一種動態類型、弱類型、基於原型的語言,內置支持類型,它的解釋器被稱爲JavaScript引擎,是瀏覽器的一部分,而且是被普遍用於客戶端的腳本語言,JavaScript最先是在HTML網頁上使用,它是屬於網絡的腳本語言,如今已經被普遍用於Web應用開發,經常使用來爲網頁添加各式各樣的動態功能,爲用戶提供更流暢美觀的瀏覽效果,一般JavaScript腳本是經過嵌入在HTML中來實現自身的功能的,如今隨着node.js引擎的出現,使得JavaScript逐步成爲了一種全棧開發語言了.javascript

JavaScript 面向對象

JS是基於對象的(Object-Based)腳本語言,而不是面向對象(Object-Oriented)中所使用的那個對象,之因此說JS是一門基於對象的編程語言,是由於它沒有提供抽象,繼承,封裝等面嚮對象語言的不少功能,而是把其餘語言所建立的複雜對象統一塊兒來,從而造成一個很是強大的對象系統.css

對象是編程語言中很重要的特徵之一,JS是基於對象的編程語言,因此支持面向對象的全部特性,靈活使用這些對象可以實現豐富而強大的功能,下面咱們首先來看如何建立一個自定義類,代碼以下:html

<body>
    <script type="text/javascript">
        function MyClass(name,age){                  //定義類,類名MyClass
            this.name = name;
            this.age = age;

            this.print = function(name,age){         //定義的一個函數體
                document.write("姓名: " + this.name + "年齡: " + this.age);
            }
        }

        var temp = new MyClass("lyshark",22);        //實例化一個對象
        temp.print()                                 //調用對象中的函數體
    </script>
</body>

上述代碼執行後會打印出姓名和年齡,可是這種寫法在實例化對象時,系統會爲每一個對象中均保存了一個相同的print()函數,從而浪費內存,使用原型寫法能夠解決該問題,改進代碼以下:前端

<body>
    <script type="text/javascript">
        function MyClass(name,age){
            this.name = name;
            this.age = age;
        }
        MyClass.prototype = {
            print:function(){
                document.write("姓名: " + this.name + "年齡: " + this.age);
            }
        }

        var temp = new MyClass("lyshark",22);        //實例化一個對象
        temp.print()                                 //調用對象中的函數體
    </script>
</body>

◆Date 對象◆

Date對象用於處理日期和時間,提供了不少高級的處理方法,能夠用來幫助網站製做人員讀取和設置日期和時間以及定義日期和時間的顯示格式等,在JS中使用Date對象前須要先建立對象實例,而後纔可使用.java

讀取日期方法: 下面是幾個經常使用的日期獲取方法和說明信息,設置日期通常不會用到.node

<body>
    <script type="text/javascript">
        var now = new Date();

        document.write("當前年份: " + now.getFullYear() + "<br>");
        document.write("當前月份: " + now.getMonth() + "<br>");
        document.write("當前日期: " + now.getDate() + "<br>");
        document.write("當前周幾: " + now.getDay() + "<br>");

        document.write("當前小時: " + now.getHours() + "<br>");
        document.write("當前分鐘: " + now.getMinutes() + "<br>");
        document.write("當前秒數: " + now.getSeconds() + "<br>");
        document.write("當前時間戳: " + now.getTime() + "<br>");
    </script>
</body>

data對象轉換: 將獲取到的日期時間戳,經過不一樣的方式展現出來.正則表達式

<body>
    <script type="text/javascript">
        var now = new Date();

        document.write("採用UTC時區表示: " + now.toUTCString(now.getTime()) + "<br>");
        document.write("採用本地時區表示: " + now.toLocaleString(now.getTime()) + "<br>");
        document.write("採用本地時區表示日期: " + now.toDateString(now.getTime()) + "<br>");
        document.write("採用本地中國標準時間: " + now.toTimeString(now.getTime()) + "<br>");
        document.write("採用本地時區表示2019/02/21: " + now.toLocaleDateString(now.getTime()) +"<br>");
        document.write("採用本地時區表示4:01:55 : " + now.toLocaleTimeString(now.getTime()) +"<br>");
    </script>
</body>

◆Math 對象◆

Math對象的方法是編程過程當中常用的數學函數,如三角函數、平方根、四捨五入等,對象的方法同Math對象的屬性同樣,屬於Math對象自己,在引用這些方法時,直接使用Math而不用使用Math對象的實例名稱.編程

Math經常使用方法: 一些經常使用的Math數值計算方法.數組

<body>
    <script type="text/javascript">
        document.write("產生隨機數[0-9]: " + parseInt(10 * Math.random())  + "<br>");
        document.write("產生隨機數[任意數字]: " + String.fromCharCode(97 * Math.random())  + "<br>");
        document.write("返回數值的絕對值: " + Math.abs(3.161592654)  + "<br>");
        document.write("返回x和y中較大的一個數: " + Math.max(10,87)  + "<br>");
        document.write("返回x和y中較小的一個數: " + Math.min(10,87)  + "<br>");
        document.write("返回x的y次方根: " + Math.pow(10,87)  + "<br>");
        document.write("對x進行四捨五入: " + Math.round(12.425)  + "<br>");
        document.write("返回x的平方根: " + Math.sqrt(10)  + "<br>");
    </script>
</body>

◆RegExp 對象◆

正則表達式並不是一門專用語言,但也能夠看做是一種語言,它可讓用戶經過使用一系列普通字符和特殊字符構建能明確描述文本字符串的匹配模式.除了簡單描述這些模式以外,正則表達式解釋引擎一般可用於遍歷匹配,並使用模式做爲分隔符來將字符串解析爲子字符串,或以智能方式替換文本或從新設置文本格式.正則表達式爲解決與文本處理有關的許多常見任務提供了有效而簡捷的方式.瀏覽器

正則匹配: 一些經常使用的正則匹配函數,正則表達式是通用的,請自行百度.

<body>
    <script type="text/javascript">

        var string = "hello123world567mynames;"
        document.write("Match全局匹配: " + string.match(/\d+/g)  + "<br>");
        document.write("Search取出第一個結果的索引值: " + string.search(/\d+/g)  + "<br>");
        document.write("Split取出第一個結果的索引值: " + string.split(/\d+/g)  + "<br>");

        var reg = RegExp("\d+",g);
        document.write("測試字符是否存在: " + reg.test("names123123lyshark456,789")  + "<br>");
    </script>
</body>

◆Window 對象◆

Window 對象稱之爲窗口對象,位於瀏覽器對象模型的最頂層,表明整個瀏覽器窗口,是Web瀏覽全部內容的主容器,只要打開一個瀏覽器窗口,就建立了一個Window對象,即便沒有在窗口上顯示任何內容.

打開關閉窗口: 利用window.open()打開網頁,window.close()關閉打開的網頁.

msg.html

<body bgcolor="#bc8f8f">
    <table width="300" height="200" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td valign="top"> 網頁通知
                <p> 這是一個通知信息,您能夠忽略掉</p>
            </td>
        </tr>
    </table>
</body>

index.html

<body>
    <input type="button" value="彈出通知" onclick="msg()">
    <input type="button" value="關閉通知" onclick="msg_close()">
    <script type="text/javascript">
        function msg(){
            open("msg.html","通知",height=50,width=30,top=20,left=10);
        }
        function msg_close() {
            close()
        }
    </script>
</body>

彈出提示框: 點擊按鈕自動彈出Window.alert()提示消息框.

<body>

    <input type="button" value="點擊彈窗" onclick="msg()">
    <script type="text/javascript">
        function msg(){
            alert("這是一個提示框...")
        }
    </script>
</body>

彈出選擇框: Window.confirm()彈出一條信息讓用戶確認,包括確認和取消按鈕.

<body>
    <input type="button" value="彈窗口" onclick="msg()">
    <script type="text/javascript">
        function msg(){
            if(confirm("請輸入你的選項..")){
                alert("感謝您的參與..")       //確認按鈕執行語句
            }else{
                alert("取消語句..")           //取消按鈕執行語句
            }
        }
    </script>
</body>

彈出輸入框: window.prompt()用於彈出一個輸入框,可讓用戶輸入一些信息.

<body>
    <script type="text/javascript">
        var passwd = prompt("請輸入密碼(密碼是123): ","");
        while(passwd !="123"){
            passwd = prompt("密碼錯誤,請從新輸入: ");
        }
        if(passwd =="123"){alert("密碼正確...")}
    </script>
</body>

設置單次定時器: 如下案例,實現當點擊刪除按鈕時,屏幕提示刪除成功,在5秒後自動的隱藏標籤.

<body>
    <div id="status" style="color: red;"> </div>
    <input type="button" value="刪除定時" onclick="DeleteStatus()">

    <script type="text/javascript">
        function DeleteStatus(){
            var temp = document.getElementById("status");
            temp.innerText = "刪除成功了...";
            setTimeout(function(){
                temp.innerText = "";
            },50000);                     //設置5秒後執行清空標籤
        }
    </script>
</body>

設置循環定時器: setIntercal()設置定時器,clearInterval()清除定時器,定時器用於週期性執行.

<body>
    <input type="text" id="clock">
    <input type="button" value="開始執行" onclick="begin_func()">
    <input type="button" value="取消執行" onclick="end_func()">

    <script type="text/javascript">
        function begin(){
            var now = new Date();
            var stime = now.getTime()
            var ret = document.getElementById("clock");
            ret.value=stime;
        }

        var ID;                                //定義全局變量,後期用於清楚定時器
        function begin_func(){
             ID =setInterval(begin,1000);     //每隔1秒執行一次,設置定時器
        }
        function end_func(){
            clearInterval(ID);                //取消一秒內執行,清除定時器
            ID = undefined;
        }
    </script>
</body>

JavaScript DOM編程

文檔對象模型 (Document Object Model,DOM) 是一種W3C標準全部的現代瀏覽器都支持DOM,DOM用於HTML和XML文檔的編程接口,它給文檔提供了一種結構化的表示方法,能夠改變文檔的內容和呈現方式.最爲關心的是,DOM把網頁和腳本以及其餘的編程語言聯繫了起來,DOM屬於瀏覽器,而不是JavaScript語言規範裏的規定的核心內容.Dom+JavaScript就能使網頁動起來,通常使用JQuery來作這事,JQuery封裝了JavaScript+Dom變得更爲簡單,這裏咱們只須要了解一些基本內容.

◆DOM 查找元素◆

GetElementById: 根據ID號獲取一個標籤,這種方式是最經常使用的.

<body>
    <div id="MyDiv"> hello world </div>

    <script type="text/javascript">
        var temp = document.getElementById("MyDiv");
        document.write("獲取到的結果: " + temp.innerText);
    </script>
</body>

getElementsByName: 根據自定義標籤alex=MyDiv屬性獲取標籤集合.

<body>
    <div alex="MyDiv"> <b> hello lyshark </b> </div>

    <script type="text/javascript">
        var names = document.getElementsByName("alex");      //經過自定義的名稱找標籤
        names.innerText = "www.baidu.com";                   //改變元素標籤名稱
        document.write("修改後的內容:" + names.innerText);
    </script>
</body>

getElementsByClassName: 根據class類名稱屬性獲取標籤集合.

<body>
    <div clas="MyClass"> <b> hello lyshark </b> </div>

    <script type="text/javascript">
        var names = document.getElementsByClassName("MyClass");  //經過類名稱找出標籤
        names.innerText = "www.baidu.com";                       //改變元素標籤名稱
        document.write("修改後的內容:" + names.innerText);
    </script>
</body>

getElementsByTagName: 根據標籤名name="MyDiv"來獲取標籤集合.

<body>
    <div name="MyDiv"> <b> hello lyshark </b> </div>

    <script type="text/javascript">
        var names = document.getElementsByName("MyDiv");      //經過標籤名稱找出標籤
        names.innerText = "www.baidu.com";                    //改變元素標籤名稱
        document.write("修改後的內容:" + names.innerText);
    </script>
</body>

◆DOM 標籤操做◆

innerText: 該方式只能對單純的標籤進行操做,若是標籤中嵌入了其餘標籤,那麼該方式會自動過濾掉標籤格式.

<body>
    <div id="lyshark">hello world</div>

    <script type="text/javascript">
        var temp = document.getElementById("lyshark");                 //經過標籤ID獲取標籤句柄
        document.write("原來的內容: " + temp.innerText + "<br>");      //獲取標籤中原始的內容
        temp.innerText = "alex"                                       //修改標籤中的內容爲alex
        document.write("修改後的內容: " + temp.innerText + "<br>");    //獲取修改後的標籤內容
    </script>
</body>

innerHTML: 該方式不但能夠修改文本,還能夠同時修改HTML的嵌套標籤,修改時應加上標籤格式.

<body>
    <div id="lyshark"> <b> hello lyshark </b> </div>

    <script type="text/javascript">
        var temp = document.getElementById("lyshark");                //經過標籤ID獲取標籤句柄
        document.write("原來的內容: " + temp.innerHTML + "<br>");      //獲取標籤中原始的內容
        temp.innerHTML = '<b> hello alex </b>'                        //修改標籤中的內容爲alex
        document.write("修改後的內容: " + temp.innerHTML + "<br>");    //獲取修改後的標籤內容
    </script>
</body>

inner 循環修改: 經過使用數組的形式,能夠實現循環修改元素,好比如下循環修改name="MyDiv"的全部標籤內容.

<body>
    <div name="MyDiv"> <b> hello lyshark </b> </div>
    <div name="MyDiv"> <b> hello lyshark </b> </div>
    <div name="MyDiv"> <b> hello lyshark </b> </div>
    <div name="MyDiv"> <b> hello lyshark </b> </div>

    <script type="text/javascript">
        var names = document.getElementsByName("MyDiv");      //經過標籤名稱找出標籤
        //id.innerText = "www.mkdirs.com";       不生效:緣由是標籤名稱重複,須要使用數組
        names[0].innerText = "www.mkdirs.com";                //改變第1個元素標籤名稱
        names[1].innerText = "www.mkdirs.com";                //改變第2個元素標籤名稱
        
        //------------------------------------------------
        //經過循環修改多個標籤
        document.write("總共有標籤數: " + names.length);       //能夠統計總共標籤數量
        for(var item in names){
            names[item].innerText = "www.mkdirs.com";         //這裏寫批量修改的內容
        }
    </script>
</body>

CreateElement 建立標籤: 使用最原始的方式建立標籤,實如今父容器div id=tags中,動態的添加a標籤.

< -------------------------[方式1]------------------------- >
<body>
    <div id="MyDiv"> </div>                          <!--指定一個父容器-->

    <script type="text/javascript">
        var tag = document.createElement("a");      //指定標籤格式:這裏是a標籤
        tag.innerText = "點我跳轉";                 //設置標籤名稱
        tag.href = "http://www.baidu.com";          //設置跳轉地址

        var id1 = document.getElementById("MyDiv");  //獲取標籤的對象
        id1.appendChild(tag)                         //放到標籤裏面
    </script>
</body>

< -------------------------[方式2]------------------------- >
<body>
    <div id="MyDiv"> </div>                          <!--指定一個父容器-->

    <script type="text/javascript">
        var tag = "<a class='c1' href='http://www.baidu.com'>點我啊</a>";
        var id1 =document.getElementById("MyDiv");     //加到這個標籤的裏面
        id1.innerHTML = tag;                          //直接經過inner追加進去
    </script>
</body>

◆DOM 屬性操做◆

修改類屬性: 分別新建兩個CSS屬性,並經過className方法,實現後期對類屬性的修改.

<head>
    <style type="text/css">
        .show_table{
            display: block;
            background-color: red;
        }
        .hide_table{
            display: none;
        }
    </style>
</head>

<body>
    <div id="MyDiv" class="show_table"> hello world </div>   <!--指定修改的標籤-->
    <script type="text/javascript">
        var ids = document.getElementById("MyDiv");          //經過ID找到標籤
        ids.className = "hide_table";                        //指定使用hid_table的CSS屬性
    </script>
</body>

修改標籤屬性: 修改DIV標籤id=MyDiv的標籤屬性,將name=lyshark修改成name=hello.

<body>
    <div id="MyDiv" name="lyshark"> hello world </div>                <!--準備修改的標籤-->

    <script type="text/javascript">
        var ids = document.getElementById("MyDiv");                  //找到DIV標籤

        document.write("當前 Name= " + ids.getAttribute('name'));    //找到div1標籤裏面的name屬性
        ids.setAttribute('name','hello');                           //將name屬性修改成name=hello
        document.write("修改後 Name= " + ids.getAttribute('name'));  //修改後,再次打印出結果
    </script>
</body>

修改標籤樣式: 修改標籤的CSS代碼的格式,能夠修改多個,可是標籤中必須存在該字段,不然沒法修改.

<body>
    <div id="MyDiv" name="lyshark" style="background-color: red "> hello world </div>

    <script type="text/javascript">
        var ids = document.getElementById("MyDiv");                  //找到DIV標籤
        ids.style.backgroundColor = "green";                         //將背景色改爲綠色
    </script>
</body>

僞造表單提交: 本身實現一個submit的表單提交功能,本身定義提交按鈕的功能.

<body>
    <form id="MyForm">
        <input type="text">
        <input type="submit" value="submit提交">
        <a onclick="Submit()">自定義提交</a>
    </form>
    
    <script type="text/javascript">
        function Submit(){
            var form = document.getElementById("MyForm");
            form.submit();
        }
    </script>
</body>

JavaScript 事件綁定

JavaScript 的事件和事件驅動爲網頁增添了豐富的交互性,事件是用戶在操做瀏覽器的過程當中,由用戶觸發或由瀏覽器自身觸發的動做,瀏覽器捕獲這些動做,並根據用戶編程時設置的對應這些動做的事件處理程序,觸發相應的處理過程,從而實現交互過程,瀏覽器在程序運行的大部分時間都等待交互事件的發生,並在發生時,自動的調用事件處理函數,完成整個處理過程.

◆鍵盤事件◆

keyDown: 當鍵盤按下某個鍵時會觸發KeyDown事件,用於瀏覽器窗體,圖像,超連接,文本區域.

<body>
    <input type="text" name="text" onkeydown="func_keydown()">
    
    <script type="text/javascript">
        function func_keydown() {
            alert("你按下了一個鍵..")
        }
    </script>
</body>

keyUp: 當鍵盤松開某個鍵時會觸發Keyup事件,用於瀏覽器窗體,圖像,超連接,文本區域.

<body>
    <input type="text" name="text" onkeyup="func_keyup()">

    <script type="text/javascript">
        function func_keyup() {
            alert("你按鬆開了一個鍵..")
        }
    </script>
</body>

KeyPress: 當鍵盤上同時按下一個鍵而且同時彈出,則執行指定的函數.

<body>
    <input type="text" name="text" onkeypress="func_keypress()">

    <script type="text/javascript">
        function func_keypress() {
            alert("同時按下並彈出..")
        }
    </script>
</body>

Resize: 當瀏覽器窗口或幀的大小發生變化時觸發Resize事件.

<body onresize="mesg()">

    <script type="text/javascript">
        function mesg() {
            document.write("窗口大小已被改變了..." + "<br>")
        }
    </script>
</body>

keycode: 用戶在body區域中按下空格鍵,觸發彈出信息框.

<body onkeypress="keycode()">

    <script type="text/javascript">
        function keycode() {
            if(window.event.keyCode == 32){
                alert("您按下了空格...");
            }
        }
    </script>
</body>

◆鼠標事件◆

Click: 鼠標在一個對象上左鍵點擊觸發Click事件,對象包括button,document,checkbox,link,radio,submit.

<body>

    <input type="button" id="button1" value="按鈕1" onclick="alert('按鈕1被按下了...')">
    <input type="button" id="button2" value="按鈕2" onclick="alert('按鈕2被按下了...')">
    
    <script type="text/javascript">
    </script>
</body>

MouseDown&MouseUP: 當咱們按下鼠標,系統觸發MouseDown事件,釋放鼠標時自動觸發MouseUP事件.

<body>
    <input type="button" value="點我" onmousedown="down()">
    <input type="button" value="點我" onmouseup="up()">
    
    <script type="text/javascript">
        function down() {
            document.write("你按下了按鍵...")
        }
        function up() {
            document.write("你釋放了按鍵...")
        }
    </script>
</body>

MouseOver&MouseOut: 鼠標指針到達一個對象之上時,觸發MouseOver事件,鼠標離開時觸發MouseOut事件.

<body>
    <input type="submit" value="鼠標在按鈕上" onmouseover="in_over()"></input>
    <input type="submit" value="鼠標離開按鈕" onmouseout="out_over()"></input>

    <script type="text/javascript">
        function in_over() {
            alert("鼠標在按鈕上...")
        }
        function out_over(){
            alert("鼠標離開按鈕...")
        }
    </script>
</body>

◆其餘事件◆

OnClick: 通用事件,能夠綁定到任何能夠操做的標籤中,當事件觸發後,執行對應的函數體.

<body>
    <input type="button" value="彈窗" onclick="show()">

    <script type="text/javascript">
        function show(){
            alert("觸發彈窗一個窗口提示...")
        }
    </script>
</body>

Focus&Blur: 當屏幕上的光標進入對象區域內時觸發focus事件,反之當光標離開時觸發blur事件.

<body>
    <input onfocus="Focus(this);" onblur="Blur(this);"
           id="search" value="請輸入關鍵字" style="color: gray;" />

    <script type="text/javascript">
       function Focus(ths){             //光標來到執行
            ths.style.color = "black";
            if(ths.value == '請輸入關鍵字' || ths.value.trim() == ""){

                ths.value = "";
            }
        }
        function Blur(ths){            //光標離開執行
            if(ths.value.trim() == ""){
                ths.value = '請輸入關鍵字';
                ths.style.color = 'gray';
            }else{
                ths.style.color = "black";
            }
        }
    </script>
</body>

Submit(1): 一般和form標記配合使用,其做用是用於送出數據,用戶在form中輸入數據後,點擊Sumbit觸發自定義函數.

<body>
    <form name="forms" method="post" onsubmit="return check()">
        <input type="text" name="texts" size="20">
        <input type="submit" value="提交">
    </form>

    <script type="text/javascript">
        function check() {
            if(document.forms.texts.value == ""){
                document.forms.focus()
                alert("用戶沒有輸入任何內容...")
                return false
            }else
            {
                alert("用戶輸入了內容...")
                return true
            }
        }
    </script>
</body>

Submit(2): 一般和form標記配合使用,其做用是用於送出數據,用戶在form中輸入數據後,點擊Sumbit觸發自定義函數.

<body>
    <form action="https://www.baidu.com">
        <input type="text" id="username">
        <input type="submit" value="提交" onclick="return MySub()">
    </form>

    <script type="text/javascript">
        function MySub(){
            var user = document.getElementById("username");
            if(user.value.length > 0){
                alert("編輯框內有數據,容許提交數據..")
                return true;
            }else
            {
                alert("用戶名輸入不能爲空...")
                return false;
            }
        }
    </script>
</body>

Reset: 一般狀況下和form標記配合使用,其起到的做用是,當用戶完成信息輸入後,按下按鈕自動清空已經輸入的數據.

<body>
    <form name="forms" method="post" >
        <input type="text">
        <input type="password">
        <input type="reset" value="重置" onreset="reset()">
    </form>

    <!--<script type="text/javascript">-->
        <!--function reset(){-->
            <!--alert("內容已經清空了...")-->
            <!--return 1-->
        <!--}-->
    <!--</script>-->
</body>

Change: 當文本區域中的鼠標指針移離該對象時,若對象內容與原來內容不一樣,則就會觸發Change事件.

<body>
    <textarea name="text" rows="3" cols="30" value=""
              onchange="show()"></textarea>

    <script type="text/javascript">
        function show(){
            alert("您在文本框中添加了新的內容...")
        }
    </script>
</body>

Select: 當一個文本框,文本區域對象中的文本被選中時就會觸發Select事件,未被選擇則不會出現提示框.

<body>
    <input type="text" value="hello lyshark" onselect="show()">

    <script type="text/javascript">
        function show(){
            alert("您選中了文本框中的文本內容...")
        }
    </script>
</body>

Error: 當網頁由於某種緣由出現錯誤時就會觸發,在錯誤處理程序中能夠綁定操做,該標籤經常使用與<body>,<img>配合.

<body>
    <img src="temp.jpg" onerror="error_msg()">

    <script type="text/javascript">
        function error_msg(){
            alert("圖片加載失敗了...")
        }
    </script>
</body>