JavaScript初識(三)

来源:https://www.cnblogs.com/qicun/archive/2018/09/27/9714309.html
-Advertisement-
Play Games

十三丶JS中的面向對象 創建對象的幾種常用方式: 1.使用Object或對象字面量創建對象 2.工廠模式創建對象 3.構造函數模式創建對象 4.原型模式創建對象 下麵我們詳細看一下如何創建對象 1.使用Object或對象字面量創建對象 JS中最基本創建對象的方式: 字面量方式創建對象: 2.工廠模式 ...


十三丶JS中的面向對象

　　創建對象的幾種常用方式:

　　　　1.使用Object或對象字面量創建對象

　　　　2.工廠模式創建對象

　　　　3.構造函數模式創建對象

　　　　4.原型模式創建對象

　　下麵我們詳細看一下如何創建對象

　　1.使用Object或對象字面量創建對象

　　JS中最基本創建對象的方式:

        <script type="text/javascript">
            var student = new Object();
            student.name = "alex";
            student.age = "20"
            
        </script>

　　字面量方式創建對象:

            var student = {
                name:"alex",
                age:18
            };

　　2.工廠模式創建對象

　　以上的方式看似簡便,但是我們要是創建很多個同類的呢?我們是不是得把以上代碼重覆n次呢,是否可以像工廠車間那樣,不斷生產呢?那就讓我們看看工廠車間那樣,如何"產出"對象

            function createStudent(name,age){
                var obj = new Object();
                obj.name = name;
                obj.age = age;
                return obj;
            }
            
            var student1 = createStudent('easy',20);
            var student2 = createStudent('easy2',20)
            ...
            var studentn = createStudent('easyn',20)

　　3.構造函數模式創建對象

　　　　在上面創建Object這樣的原生對象的時候,我們就使用過其構造函數:

var obj = new Object();

　　　　在創建原生數組Array類型對象時也使用過其構造函數:

var arr = new Array(10);  //構造一個初始長度為10的數組對象

　　在進行自定義構造函數創建對象之前,我們先瞭解一下構造函數和普通函數有什麼區別.

　　1丶實際上並不存在創建構造函數的特殊語法,其與普通函數唯一的區別在於調用方法.對於任意函數,使用new操作符調用,那麼它就是構造函數;不使用new操作符調用,那麼它就是普通函數.

　　2丶按照慣例,我們約定構造函數名以大寫字母開頭,普通函數以小寫字母開頭,這樣有利於顯性區分二者,例如上面的new Array(),new Object().

　　3.使用new操作符調用構造函數時,會經歷(1)創建一個新對象(2)將構造函數作用域賦給新對象(指this指向該新對象)(3)執行構造函數代碼(4)返回新對象;4個階段

　　我們使用構造函數將工廠模式的函數重寫,並添加一個方法屬性

            function Student(name,age){
                this.name = name;
                this.age = age;
                this.alertName = function(){
                    alert(this.name)
                };
            }
            function Fruit(name,color){
                this.name = name;
                this.color = color;
                this.alertName = function(){
                    alert(this.name)
                };
            }

　　4.原型的模式創建對象

　　　　原型鏈甚至原型繼承,是整個JS中最難的一部分,也是最不好理解的一部分.

            //原型模式創建對象
            function Student(){
                this.name = "easy";
                this.age = 20;
            }
            Student.prototype.alertName = function(){
                alert(this.name);
            };
            
            var stu1 = new Student();
            var stu2 = new Student();
            
            stu1.alertName();    //easy
            stu2.alertName();    //easy
            
            alert(stu1.alertName == stu2.alertName);  //true 二者共用同一函數

十四丶定時器

　　(1)一次性定時器

　　　　可以做非同步

　　(2)迴圈周期定時器

　　　　可以做動畫

　　JS跟python一樣都有垃圾回收機制,但是定時器對象垃圾回收是回收不了的

　　1.setTimeOut()一次性定時器,只在指定時間後執行一次

        <script type="text/javascript">
        <!--一次性定時器-->
        function hello(){
            alert("hello");
        }
        <!--使用方法名字執行方法-->
        var t1 = window.setTimeout('hello',1000);
        var t2 = window.setTimeout("hello()",3000);//使用字元串執行方法
        window.cleatTimeout(t1);//去掉定時器
        </script>

　　2.setInterval()

        //迴圈周期定時器
        setInterval('refreshQuery()',8000);
        function refreshQuery(){
            console.log("每8秒調一次")
        }

　　練習:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #box{
                width: 200px;
                height: 200px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <button id = "start">開啟定時器</button>
        <button id = "clear">清除定時器</button>
        
        <div id="box"></div>
        <script type="text/javascript">
        var count = 0;
        var timer = null;
        document.getElementById("start").onclick = function(){
            var oDiv = document.getElementById("box");
            clearInterval(timer);
            
            timer = setInterval(function(){
                count += 10;
                oDiv.style.marginLeft = count + "px";
                oDiv.style.marginTop = count/2 +"px"
            },50)
        }
        </script>
    </body>
</html>
View Code

十五丶BOM的介紹

　　　　BOM; Browser Object Model,瀏覽器對象模型.

　　window對象是BOM的頂層(核心)對象,所有對象都是通過它延伸出來的,也可以成為window對象的子對象,DOM是BOM的一部分.

　　1丶彈出系統對話框

　　比如說,alert(1)是window.alert(1)的簡寫,以為它是window的子方法.

　　系統對話框有三種:

    alert();    //不同瀏覽器中的外觀是不一樣的
    confirm();  //相容不好
    prompt();   //不推薦使用

　　2.打開視窗丶關閉視窗

　　　　(1)打開視窗:

window.open(url,target)

　　url:要打開的地址

　　target:新視窗的位置.可以是:_blank丶_self丶_parent父框架

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        
        <!--行間的js中的open() window不能省略-->
        <button onclick="window.open('https://www.luffycity.com/')">路飛學城</button>
        
        <button>打開百度</button>
        <button onclick="window.close()">關閉</button>
        <button>關閉</button>
        
    </body>
    <script type="text/javascript">
        
        var oBtn = document.getElementsByTagName('button')[1];
        var closeBtn = document.getElementsByTagName('button')[3];
        
        oBtn.onclick = function(){
            open('https://www.baidu.com')
            
            //打開空白頁面
//          open('about:blank',"_self")
        }
        closeBtn.onclick = function(){
            if(confirm("是否關閉？")){
                close();
            }
        }
        
    </script>
</html>

　　location對象

　　　　window.location可以簡寫成location.location 相當於瀏覽器地址欄,可以將url解析成獨立的片段.

　　location對象的屬性

　　　　href:跳轉

　　　　hash 返回url中#後面的內容,包括#

　　　　host 主機名,包括埠

　　　　hostname 主機名

　　　　pathname url中的路徑部分

　　　　protocol 協議一般是http丶https

　　　　search 查詢字元串

　　location.href屬性舉例:

　　　　點擊盒子時，進行跳轉。

<body>
<div>smyhvae</div>
<script>

    var div = document.getElementsByTagName("div")[0];

    div.onclick = function () {
        location.href = "http://www.baidu.com";   //點擊div時，跳轉到指定鏈接
 //     window.open("http://www.baidu.com","_blank");  //方式二
    }

</script>
</body>

　　　　5秒後自動跳轉到百度。

<script>

    setTimeout(function () {
        location.href = "http://www.baidu.com";
    }, 5000);
</script>

　　location.reload()：重新載入

setTimeout(function(){
         //3秒之後讓網頁整個刷新
    window.location.reload();
            
            
},3000)

　　navigator對象

　　window.navigator 的一些屬性可以獲取客戶端的一些信息。

　　　　userAgent:系統丶瀏覽器

　　　　platform;瀏覽器支持的系統,win/mac/linux

    console.log(navigator.userAgent);
    console.log(navigator.platform);

　　history對象

　　1、後退：

      • 　history.back()

      • 　history.go(-1)：0是刷新

　　2、前進：

      • 　history.forward()

      • 　history.go(1)

　　　　用的不多。因為瀏覽器中已經自帶了這些功能的按鈕：

 十六丶client丶offset丶scroll系列

　　先來瞭解一下自執行函數:

(function(window) {
    var a = 5;


    // import

    window.$ = a;

})(window);
1.js

 

(function(window) {
    var a = 6;

    window.$1 = a;



})(window);
2.js 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script src="1.js"></script>
    <script src="2.js"></script>
    <script>

        console.log(window.$);
        console.log(window.$1);

    </script>
    
</body>
</html>
自執行函數

　　1.client系列

　　　　clientTop  內容區域到邊框頂部的距離,說白了,就是邊框高度

　　　　clietLeft    內容區域到邊框左部的距離,說白了就是邊框的寬度

　　　　clientWidth   內容區域+左右padding  不包含border  可視寬度

　　　　clientHeight  內容區域+ 上下padding  可視高度

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                width: 200px;
                height: 200px;
                /*position: absolute;*/
                border: 10px solid red;
                /*margin: 10px 0px 0px 0px;*/
                padding: 80px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
        </div>
    </body>
    <script type="text/javascript">
        /*
         *      clientTop 內容區域到邊框頂部的距離 ，說白了，就是邊框的高度
         *      clientLeft 內容區域到邊框左部的距離，說白了就是邊框的寬度
         *      clientWidth 內容區域+左右padding 不包含border  可視寬度
         *      clientHeight 內容區域+ 上下padding   可視高度
         * */
        
        var oBox = document.getElementsByClassName('box')[0];
        console.log(oBox.clientTop);
        console.log(oBox.clientLeft);
        console.log(oBox.clientWidth);
        console.log(oBox.clientHeight);   
        
    </script>
    
</html>
View Code

　　2.屏幕的可視區域

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            //屏幕 的可視區域
            window.onload = function(){
                //document.documentElement  獲取的是html標簽
                console.log(document.documentElement.clientWidth);
                console.log(document.documentElement.clientHeight);
                //視窗大小發生變化時,會調用此方法
                window.onresize = function(){
                    console.log(document.documentElement.clientWidth);
                    console.log(document.documentElement.clientHeight);
                }
            }
        </script>
    </body>
</html>

　　3.offset系列

　　　　offsetWidth占位寬 內容+padding+border

　　　　offsetHeight 占位高

　　　　offsetTop  如果盒子沒有設置定位到body的頂部的距離,如果盒子設置定位,那麼是以父輩為基準的Top值

　　　　offsetLeft:如果盒子沒有設置定位到body的左部的距離,如果盒子設置定位,那麼是以父輩為基準的left值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
        </style>
        
    </head>
    <body style="height: 2000px">
        <div>
            <div class="wrap" style=" width: 300px;height: 300px;background-color: green;position: relative; top: 20px;">
                <div id="box" style="width: 200px;height: 200px;border: 5px solid red;position: absolute;top:60px;left: 30px;">            
                </div>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        window.onload = function(){
            var box = document.getElementById('box')
            /*
             offsetWidth占位寬  內容+padding+border
             offsetHeight占位高 
             * offsetTop: 如果盒子沒有設置定位 到body的頂部的距離,如果盒子設置定位，那麼是以父輩為基準的top值
             * offsetLeft： 如果盒子沒有設置定位 到body的左部的距離，如果盒子設置定位，那麼是以父輩為基準的left值
             
             * */
            console.log(box.offsetTop);
            console.log(box.offsetLeft);
            console.log(box.offsetWidth)
            console.log(box.offsetHeight)
            
        }
        
    </script>
</html>
View Code

 　　4.scroll系列

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{padding: 0;margin: 0;}
        </style>
    </head>
    <body style="width: 2000px;height: 2000px;">
        <div style="height: 200px;background-color: red;"></div>
        <div style="height: 200px;background-color: green;"></div>
        <div style="height: 200px;background-color: yellow;"></div>
        <div style="height: 200px;background-color: blue;"></div>
        <div style="height: 200px;background-color: gray;"></div>
        <div id = 'scroll' style="width: 200px;height: 200px;border: 1px solid red;overflow: auto;padding: 10px;margin: 5px 0px 0px 0px;">
            <p>路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城
                路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城
                路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城
                路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城
            </p>
            
        </div>
        
        
    </body>
    <script type="text/javascript">
        
        window.onload = function(){
            
            //實施監聽滾動事件
            window.onscroll = function(){
//                console.log(1111)
//                console.log('上'+document.documentElement.scrollTop)
//                console.log('左'+document.documentElement.scrollLeft)
//                console.log('寬'+document.documentElement.scrollWidth)
//                console.log('高'+document.documentElement.scrollHeight)
                
                
            }
            
            var s = document.getElementById('scroll');
            
            s.onscroll = function(){
//            scrollHeight : 內容的高度+padding  不包含邊框
                console.log('上'+s.scrollTop)
                console.log('左'+s.scrollLeft)
                console.log('寬'+s.scrollWidth)
                console.log('高'+s.scrollHeight)
            }
        }
        
    </script>
</html>
View Code

 固定導航欄

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin:0;
        }
        .header{
            width: 100%;
            height: 80px;
            background-color: red;
        }
        .content{
            width: 100%;
            height: 1000px;
            background-color: purple;
            /*position: relative;*/
            
        }
        .fixTop{
            width: 100%;
            height: 100px;
            background-color: green;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1000;

        }
        
        .input{
            width: 400px;
            height: 60px;
            background-color: yellow;
            position: absolute;
            left: 50%;
            margin-left: -200px;
            top: 150px;
            
        }


    </style>
</head>
<body>
    
    <div class="header">
        
    </div>

    <div class="content">
        
        
        <div class="input"></div>
    </div>
    <div class="fixTop" style="display: none;"></div>
    <script>
        

        window.onload = function() {
            var fromTop = document.getElementsByClassName('input')[0].offsetTop;
            var fixBox = document.getElementsByClassName('fixTop')[0];

            console.log(fromTop);
            var count = 0;
            var timer = null;
            window.onscroll = function() {

                var htmlTop = document.documentElement.scrollTop;
                console.log(htmlTop);
                
                if (htmlTop >= fromTop) {
                    clearInterval(timer);
                    timer = setInterval(function () {
                        count+=10;
                        fixBox.style.display = 'block';

                        // fixBox.style.opacity = count;
                        fixBox.style.height = count+'px';

                        if (count == 100){
                            console.log("11111111111111111")
                            clearInterval(timer);
                            count = 0
                        }
                    
                    },200)
                }else{
                    fixBox.style.display = 'none';
                }
                
            }
        }
    </script>

    
</body>
</html>
View Code

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • async語法升級踩坑小記
    從今年過完年回來，三月份開始，就一直在做重構相關的事情。 就在今天剛剛上線了最新一次的重構代碼，希望高峰期安好，接近半年的Node.js代碼重構。 包含從 +`async.waterfall generator co async TypeScript`在我司的使用。 這些日子也踩了不少坑，也總結了一 ...
  • 移動端適配（2）---viewport適配
    通過viewport來適配 <script> (function(){ var w=window.screen.width; console.log(w);//獲取屏幕尺寸 var targetW=320;//之後所有的都是按照320來做 var scale=w/targetW;//縮放值:當前尺寸 ...
  • javascript列印1-100內的質數
    ...
  • HTTP的Referrer和Referrer Policy設置
    Referrer referrer是HTTP請求header的報文頭，用於指明當前流量的來源參考頁面。通過這個信息，我們可以知道訪客是怎麼來到當前頁面的。這對於Web Analytics非常重要，可以用於分析不同渠道流量分佈、用戶搜索的關鍵詞等。 但是，這個欄位同時會造成用戶敏感信息泄漏（如：帶有敏 ...
  • react系列（三）組件間通信
    組件間通信 React的基本組件元素是一個個組件，組件之間可能存在關聯、組合等關係。不同的組件之間，經常會發生數據傳遞或者交換，我們稱之為組件間通信。 根據傳遞的複雜程度，可以分為三種情況： 父子間通信，兄弟間通信，同其他外部庫通信。 父子間通信 在學習組件的時候，props是輸入，組件是輸出。在這 ...
  • js函數式編程(三)-compose和pointFree
    compose即函數嵌套組合 組合compose在第一篇已經初見端倪，可以感受一下。compose函數的實現用閉包的方法。不完善實現如下： const compose = (f, g) = { return x = f(g(x)); }; compose使用實例 你可以用ramda的compose函 ...
  • JavaScript switch語句
    JavaScriptswitch語句 switch語句用於基於不同的條件來執行不同的動作。 JavaScript switch 語句 使用switch語句可以進行多項選擇。 語法： switch( 變數1 ){ case 變數2: //語句1; break; case 變數3: //語句2; bre ...
  • CSS的再深入2（更新中···）
    在上一章中，我們又引出了一個知識點： margin的問題 margin：0 auto；（上下為0，左右自適應）會解決元素的居中問題（auto 自適應） 同時，我們又要學習新的知識： CSS的兩個性質和一個標準 1.繼承性：後代會繼承父系的一些屬性（fon、color、text、line），這種現象叫 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類