02javascript基礎

時間 2019-12-13

標籤 02javascript javascript 基礎欄目 JavaScript 简体版

原文原文鏈接

1.BOM編程

1.1入門

BOM就是瀏覽器對象模型編程，經過javascript引擎提供的四個瀏覽器對象，操做瀏覽器，這叫BOM編程。javascript

1.2window對象（重點）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window對象</title>
    <script type="text/javascript">
        /*
     open(): 在一個窗口中打開頁面

     setInterval(): 設置定時器（執行n次）
     setTimeout(): 設置定時器(只執行1次)
     clearInterval(): 清除定時器
     clearTimeout(): 清除定時器

     alert(): 提示框
     confirm(): 確認提示框
     propmt(): 輸入提示框

     注意：
         由於window對象使用很是頻繁，因此當調用js中的window對象的方法時，能夠省略對象名不寫。
    */
        function testOpen() {
            /*
            參數一： 打開的頁面
            參數二：打開的方式。 _self: 本窗口  _blank: 新窗口（默認）
            參數三： 設置窗口參數。好比窗口大小，是否顯示任務欄
            */
            window.open("http://www.baidu.com", "width=300px;height=300px;toolbar=0")
        }

        let taskId;

        function testInterval() {
            /*
            定時器： 每隔n毫秒調用指定的任務（函數）
            參數一：指定的任務（函數）
            參數二：毫秒數
            */
            taskId = window.setInterval("testOpen()", 3000)
        }

        function testClearInterval() {
            /*清除任務
            參數一：須要清除的任務ID
            */
            window.clearInterval(taskId);
        }

        let toId;

        function testTimeout() {
            /*設置定時任務*/
            toId = window.setTimeout("testOpen()", 3000);
        }

        function testClearTimeout() {
            window.clearTimeout(toId);
        }

        function testAlert() {
            window.alert("提示框");
        }

        function testConfirm() {
            /*
            返回值就是用戶操做
                true: 點擊了肯定
                false： 點擊了取消
            */
            let flag = window.confirm("確認刪除嗎？一旦刪除不能恢復，請慎重！");
            if (flag) {
                alert("肯定刪除，正在刪除中....");
            } else {
                alert("取消了操做");
            }
        }
        function testPrompt(){
        /*
        輸入提示框
        */
        let flag = window.prompt("請輸入你的U頓密碼");
        if(flag){
            alert("密碼正確，轉帳中...");
        }else{
            alert("取消了操做");
        }
    }
    </script>
</head>
<body>
<input type="button" value="open()" onclick="testOpen()"/>
<input type="button" value="setInteval()" onclick="testInterval()"/>
<input type="button" value="clearInteval()" onclick="testClearInterval()"/>
<input type="button" value="setTimeout()" onclick="testTimeout()"/>
<input type="button" value="clearTimeout()" onclick="testClearTimeout()"/>
<input type="button" value="alert()" onclick="testAlert()"/>
<input type="button" value="confirm()" onclick="testConfirm()"/>
<input type="button" value="prompt()" onclick="testPrompt()"/>

</body>
</html>

1.3location對象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>location對象</title>
    <script type="text/javascript">
    /*
    href屬性： 表明的是地址欄的URL，能夠獲取和設置URL。URL表示統一資源定位符

    reload方法： 刷新當前頁面

    */
    function testHref(){
        //alert(window.location.href);
        /*
            經過修改location對象的href屬性來實現頁面的跳轉
        */
        window.location.href="http://www.baidu.com";
    }

    function testReload(){
        //刷新當前頁面
        window.location.reload();
    }

    // function testRefresh(){
        //定時刷新
        window.setTimeout("testReload()",1000);
    // }
 
</script>
</head>
<body>
<input type="button" value="跳轉" onclick="testHref()"/>
<input type="button" value="實現定時刷新" onclick="testRefresh()"/>

</body>
</html>

1.4history對象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>history對象</title>
    <script type="text/javascript">
    /*
        forward(): 前進到下一頁
        back(): 後退上一頁
        go(): 跳轉到某頁（正整數：前進  負整數：後退）  1   -2
    */
    function testForward(){
        //window.history.forward();
        window.history.go(1);
    }
</script>
</head>
<body>
<a href="17history對象2.html">跳轉到下一個頁面</a>
<br/>
<input type="button" value="前進" onclick="testForward()"/>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>history對象</title>
    <script type="text/javascript">
    function testBack(){
        //window.history.back();
        window.history.go(-1);
    }
</script>
</head>
<body>
目標頁面<br/>
<input type="button" value="後退" onclick="testBack()"/>
</body>
</html>

1.5screen對象

screen對象表明是一個屏幕html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>screen對象</title>
    <script type="text/javascript">
        /*
            availHeight和availWidth是排除了任務欄以後的高度和寬度
        */
        document.write(window.screen.availWidth + "<br/>");
        document.write(window.screen.availHeight + "<br/>");
        document.write(window.screen.width + "<br/>");
        document.write(window.screen.height + "<br/>");

    </script>
</head>
<body>

</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。