JavaScript小白教程7浏览器对象模型 BOM

野性酷女 2021-12-09 15:39 293阅读 0赞

JavaScript Window - 浏览器对象模型

## Window 对象 ##

**所有浏览器都支持 window 对象。它表示浏览器窗口。页面就是一个窗口**

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

Window 尺寸（窗口的大小：长宽）

## 其他 Window 方法 ##

一些其他方法：

*  window.open() - 打开新窗口
 *  window.close() - 关闭当前窗口
 *  window.moveTo() - 移动当前窗口
 *  window.resizeTo() - 调整当前窗口的尺寸

JavaScript Window Screen

window.screen 对象包含有关用户屏幕的信息

**window.screen**对象在编写时可以不使用 window 这个前缀

一些属性：

*  screen.availWidth - 可用的屏幕宽度
 *  screen.availHeight - 可用的屏幕高度

JavaScript Window Location

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

## Window Location ##

**window.location** 对象在编写时可不使用 window 这个前缀。 一些例子：

一些实例:

*  location.hostname 返回 web 主机的域名
 *  location.pathname 返回当前页面的路径和文件名
 *  location.port 返回 web 主机的端口 （80 或 443）
 *  location.protocol 返回所使用的 web 协议（http: 或 https:

Window Location Href（方法）

location.href 属性返回当前页面的 URL。

Window Location Pathname

location.pathname 属性返回 URL 的路径名

Window Location Assign

location.assign() 方法加载新的文档

下面这是是加载另一个页面，url相当于跳转到那个页面的链接

<body>
     
    <script>
    function newDoc(){
        window.location.assign("https://www.runoob.com")
    }
    </script>
    <input type="button" value="加载新文档" οnclick="newDoc()">
     
    </body>

JavaScript Window History

window.history 对象包含浏览器的历史

## Window History ##

**window.history**对象在编写时可不使用 window 这个前缀。

为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。

一些方法：

*  history.back() - 与在浏览器点击后退按钮相同
 *  history.forward() - 与在浏览器中点击向前按钮相同

除此之外可以用 history.go() 这个方法来实现向前，后退的功能

JavaScript Window Navigator

window.navigator 对象包含有关访问者浏览器的信息

<body>
        
    <div id="example"></div>
    <script>
    txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
    txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
    txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
    txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
    txt+= "<p>硬件平台: " + navigator.platform + "</p>";
    txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
    txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
    document.getElementById("example").innerHTML=txt;
    </script>
    
    </body>

输出结果：

浏览器代号: Mozilla

浏览器名称: Netscape

浏览器版本: 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134

启用Cookies: true

硬件平台: Win32

用户代理: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134

用户代理语言: undefined

JavaScript 弹窗

可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

## 警告框 ##

警告框经常用于确保用户可以得到某些信息。

当警告框出现后，用户需要点击确定按钮才能继续进行操作

<body>
        
    <script>
    function myFunction(){
        alert("你好，我是一个警告框！");
    }
    </script>
    
    <input type="button" οnclick="myFunction()" value="显示警告框" />
    
    </body>

## 确认框 ##

确认框通常用于验证是否接受用户操作。

当确认卡弹出时，用户可以点击 "确认" 或者 "取消" 来确定用户操作。

当你点击 "确认", 确认框返回 true， 如果点击 "取消", 确认框返回 false。

<body>
    
    <p>点击按钮，显示确认框。</p>
    <button οnclick="myFunction()">点我</button>
    <p id="demo"></p>
    <script>
    function myFunction(){
        var x;
        var r=confirm("按下按钮!");
        if (r==true){
            x="你按下了\"确定\"按钮!";
        }
        else{
            x="你按下了\"取消\"按钮!";
        }
        document.getElementById("demo").innerHTML=x;
    }
    </script>
    
    </body>

## 提示框 ##

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

<body>
    
    <p>点击按钮查看输入的对话框。</p>
    <button οnclick="myFunction()">点我</button>
    <p id="demo"></p>
    <script>
    function myFunction(){
        var x;
        var person=prompt("请输入你的名字","Harry Potter");
        if (person!=null && person!=""){
            x="你好 " + person + "! 今天感觉如何?";
            document.getElementById("demo").innerHTML=x;
        }
    }
    </script>
    
    </body>

## 换行 ##

弹窗使用 反斜杠 + "n"(\\n) 来设置换行。

<body>
    
    <p>点击按钮在弹窗总使用换行。</p>
    <button οnclick="myFunction()">点我</button>
    <p id="demo"></p>
    <script>
    function myFunction(){
        alert("Hello\nHow are you?");
    }
    </script>
    
    </body>

### 语法 ###

window.alert(" *sometext*");

**window.alert()** 方法可以不带上window对象，直接使用**alert()**方法。

通常都不带前面的widow.直接写成alert();

JavaScript 计时事件

JavaScript 一个设定的时间间隔之后来执行代码.我们称之为计时事件

## JavaScript 计时事件 ##

通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:

*  setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
 *  setTimeout() - 在指定的毫秒数后执行指定代码。

**注意:** setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。

<body>
    
    <p>单击按钮每3秒出现一个“Hello”警告框。</p>
    <p>再次点击警告框，经过3秒出现新的警告框，这将一直执行 ...</p>
    <button οnclick="myFunction()">点我</button>
    <script>
    function myFunction(){
        setInterval(function(){alert("Hello")},3000);
    }
    </script>
    
    </body>

<body>
    
    <p>在页面显示一个时钟</p>
    <p id="demo"></p>
    <script>
    var myVar=setInterval(function(){myTimer()},1000);
    function myTimer(){
        var d=new Date();
        var t=d.toLocaleTimeString();
        document.getElementById("demo").innerHTML=t;
    }
    </script>
    
    </body>

## 如何停止执行? ##

clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。

<body>
    
    <p>页面上显示时钟：</p>
    <p id="demo"></p>
    <button οnclick="myStopFunction()">停止</button>
    <script>
    var myVar=setInterval(function(){myTimer()},1000);
    function myTimer(){
        var d=new Date();
        var t=d.toLocaleTimeString();
        document.getElementById("demo").innerHTML=t;
    }
    function myStopFunction(){
        clearInterval(myVar);
    }
    </script>
    
    </body>

setTimeout() 方法

<body>
    
    <p>点击第一个按钮等待3秒后出现"Hello"弹框。</p>
    <p>点击第二个按钮来阻止第一个函数运行。（你必须在3秒之前点击它）。</p>
    <button οnclick="myFunction()">点我</button>
    <button οnclick="myStopFunction()">停止弹框</button>
    <script>
    var myVar;
    function myFunction(){
        myVar=setTimeout(function(){alert("Hello")},3000);
    }
    function myStopFunction(){
        clearTimeout(myVar);
    }
    </script>
    
    </body>

转载于:https://www.cnblogs.com/jiatianyi/p/10963485.html