行业资讯

JavaScript学习笔记（二）

发布时间：2020-07-15 20:27:10 作者：mirindaRain
来源：网络 阅读：330

本课程对应的视频教程：http://edu.51cto.com/course/15019.html

1、BOM模型

BOM:Brower Object Model

JavaScript学习笔记（二）

1.1、属性

1.1.1、Screen

根据屏幕的分辨率来决定一个div的相关属性

<script type="text/javascript">
        function init(){
            var  width = window.screen.width;
            var  height = window.screen.height;
            //根据id来查找网页中的元素
            var  divObject =document.getElementById("container");
            divObject.style.width=width+"px";
            divObject.style.height=height+"px";
            divObject.style.border = "1px solid red";
        }
 </script>

1.1.2、history(历史信息)

前进：history.forward() == history.go(1)

后退：history.back() ==history.go(-1)

刷新： location.reload()== history.go(0)

参考案例代码

demo01.html

<a href = "demo02.html">跳转到demo02页面</a>

<input type="button" value="前进" onclick="javascript:history.go(1)">

<input type="button" value="呵呵" onclick="javascript:location.reload()">

demo02.html

<input onclick="javascript:history.go(-1)" type="button" value = "后退"/>

1.1.3、location对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function init(){
            console.log(location.href);
            console.log(location.host);
            console.log(location.hostname);
            console.log(location.port);
            console.log(location.protocol);
        }
    </script>
</head>
<body onload="init()">
</body>
</html>

location.href:获取地址栏的信息

location.host:主机+端口号

location.reload():刷新

案例：根据地址栏的信息获取用户填入信息（get提交不安全）

locaiton.html

<body onload="init()">
    <form action = "demo02.html" method="get">
        用户名：<input name="username"/><br/>
        年龄：<input name="age"><br/>
        <input type="submit" value="提交">
    </form>
</body>

demo02.html

 <script type="text/javascript">
        var href = location.href;
        var info = href.split("?")[1];
        var name = info.split("&")[0].split("=")[1];
        alert(name)
</script>

1.1.4、Navigator

Navigator：可以获取用户的浏览器相关的信息

案例：通过Navigator来获取用户的浏览器信息

<script type="text/javascript">
        function init(){
           var info = window.navigator.userAgent;
           if(info.indexOf('Chrome')!=-1){
               alert('用户使用Chrome浏览器');
           }else if(info.indexOf('Firefox')!=-1){
               alert('用户使用是firefox浏览器')
           }else{
               alert('使用的其他浏览器')
           }
        }
</script>

1.2、方法

1.2.1、confirm方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function myconfirm(){
            if(confirm('确定删除此条数据吗')){
                alert('你选择是删除');
            }else{
                alert('你选择是取消');
            }
        }
    </script>
</head>
<body>
<input type="button" onclick="myconfirm()" value = "删除"/>
</body>
</html>

1.2.2、关闭

close方法在不同浏览器，会有兼容性问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function myconfirm(){
            if(confirm('你确定关闭窗体吗')){
                window.close();
            }else{
                alert('你选择是取消');
            }
        }
    </script>
</head>
<body>
<input type="button" onclick="myconfirm()" value = "关闭窗体"/>
</body>
</html>

比如火狐就不支持这个方法（可以用将当前面变成一个空白页）

JavaScript学习笔记（二）

1.2.3、open方法

open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。

语法格式

window.open(URL,name,features,replace)
参数 描述
URL 一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。
name 一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。这个名称可以用作标记 <a> 和 <form> 的属性 target 的值。如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用。在这种情况下，features 将被忽略。
features 一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，新窗口将具有所有标准特征。在窗口特征这个表格中，我们对该字符串的格式进行了详细的说明。
replace 一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值： true - URL 替换浏览历史中的当前条目。 false - URL 在浏览历史中创建新的条目。

featrures的特性

channelmode=yes\ no\ 1\ 0 是否使用剧院模式显示窗口。默认为 no。
directories=yes|no|1|0 是否添加目录按钮。默认为 yes。
fullscreen=yes|no|1|0 是否使用全屏模式显示浏览器。默认是 no。处于全屏模式的窗口必须同时处于剧院模式。
height=pixels 窗口文档显示区的高度。以像素计。
left=pixels 窗口的 x 坐标。以像素计。
location=yes|no|1|0 是否显示地址字段。默认是 yes。
menubar=yes|no|1|0 是否显示菜单栏。默认是 yes。
resizable=yes|no|1|0 窗口是否可调节尺寸。默认是 yes。
scrollbars=yes|no|1|0 是否显示滚动条。默认是 yes。
status=yes|no|1|0 是否添加状态栏。默认是 yes。
titlebar=yes|no|1|0 是否显示标题栏。默认是 yes。
toolbar=yes|no|1|0 是否显示浏览器的工具栏。默认是 yes。
top=pixels 窗口的 y 坐标。
width=pixels 窗口的文档显示区的宽度。以像素计。

关于以上特性，对于不同的浏览器的兼容也不一样

JavaScript学习笔记（二）

1.2.4、定时器相关方法

setTimeout(函数名, 毫秒)：表示指定毫秒后再次执行函数，每个定时器都会返回一个整数值，通过这个整数值可以做定时器的关闭 操作

clearTimeout(整数值)

setInterval（函数名，毫秒数）:表示每隔多少毫秒执行某个函数，该函数会被执行多次，同样这个函数也有一个返回值，通过此返回值可以关闭定时器

clearInterval(整数值)

1.2.5、数字转换相关的方法

parseInt:将字符串转换成整数

parseFloat：将字符串转换成小数

isNaN:不是一个数字返回true

<script type="text/javascript">
        /*
        var str = "123a1223";
        alert(parseInt(str)); //结果为123
        alert(parseInt("abc123"));//转换失败
        var str2 = "123.222a";
        alert(parseFloat(str2)); //结果为123.222
        */
        if(isNaN(parseInt("abc123"))){
            alert("is not a num");
        }
</script>

1.3、其他对象

1.3.1、event对象（重点）

当事件发生时，浏览器自动建立该对象，并包含该事件的类型、鼠标坐标等。
事件对象的属性：
格式：event.属性

1.3.2、链接对象

网页中的链接均会被自动看作链接对象，并依顺序，分别表示为document.links[0]，document.links[1]...
定义链接对象的格式：字串.link(属性)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload=function(){
            console.log(document.links[0].href="17_calc.html");
        }
    </script>
</head>
<body>
    <a href = "#">链接1</a>
    <a href = "#">链接2</a>
    <a href = "#">链接3</a>
    <a href = "#">链接4</a>
</body>
</html>

1.3.3、表单对象

文件对象的子对象，Javascript的runtimeengine自动为每一个表单建立一个表单对象。
格式：
document.forms[索引].属性
document.forms[索引].方法（参数）
document.表单名称.属性
document.表单名称.方法（参数）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload=function(){
           console.log(document.forms[0]);
           console.log(document.myForm.username)
        }
    </script>
</head>
<body>
    <form name = "myForm" >
        <input  name = "username" type="text"/>
    </form>
</body>
</html>

1.3.4、cookie对象

Cookie 是一些数据, 存储于你电脑上的文本文件中。当 web服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。Cookie 的作用就是用于解决 "如何记录客户端的用户信息":当用户访问 web 页面时，他的名字可以记录在 cookie 中。
在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。
写入Cookie
格式：
document.cookie = " 关键字 = 值 [ ;expires = 有效日期][;...]"
有效日期格式：Wdy,DD-Mon-YY HH:MM:SS GMT
每个浏览器可存储300个Cookie数据，4k字节；
客户有权禁止Cookie数据的写入。

IE:浏览器，它的cookie保存多个文件中

C:\Users\Administrator\AppData\Local\Microsoft\Windows\INetCookies

chrome浏览器中的cookie的位置,这个cookie是一个单文件

chrome浏览器的cookie实际上是一个sqllite文件

C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default

演示一个创建和获取cookie案例

创建cookie

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //获取的是当前日期
        var expires = new Date();
        expires.setTime(expires.getTime()+30*1000);
        document.cookie="name=zhangsan;expires="+expires.toUTCString();
    </script>
</head>
<body>
</body>
</html>

获取cookie

 <script type="text/javascript">
        console.log(document.cookie)
        if(document.cookie==null||document.cookie.trim()=='') {
            location.href = "login.html";
        }else{
            document.write("欢迎进入到本页")
        }
  </script>

1.3.5、练习cookie

JavaScript学习笔记（二）

JavaScript学习笔记（二）

login.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action = "do_login.html" method="get">
        用户名：<input type="text" name="username"/><br/>
        密码：<input type="password" name="pwd"/><br/>

        <input type="submit" value="登录">
    </form>
</body>
</html>

do_login.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //http://localhost:63342/javascript/Cookie/do_login.html?username=sa&pwd=ok
        var infos = location.href.split("?")[1];
        var username  = infos.split("&")[0].split("=")[1];
        var pwd = infos.split("&")[1].split("=")[1];
        if("sa"==username&&"ok"==pwd) {
            //登录成功
            var expires = new Date();
            //1天
            expires.setTime(expires.getTime()+24*60*60*1000);
            document.cookie="name="+username+";expires="+expires.toUTCString();
        }else{
            alert("对不起，你的用户名和密码输入错误");
            location.href="login.html";
        }
    </script>
</head>
<body>
</body>
</html>

list.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var cookieValue = document.cookie;
        if(cookieValue==null||cookieValue=='') {
            location.href="login.html";
        }else{
            var username = cookieValue.split("=")[1];
            document.write("欢迎"+username+"进入到学生列表页面");
        }
    </script>
</head>
<body>
</body>
</html>

1.3.6、问题

js中对于get提交，如果输入的中文信息，此时在获取的时候我们需要进行解码操作

decodeURI(username)

同样，在存储cookie的时候，如果存入的是中文，必须先进行编码

encodeURI("张三")

在获取cookie时候，还是需要进行解码操作

decodeURI(username)
推荐阅读：
  1. 系统的安装学习笔记二
  2. git学习笔记（二）分支

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

javascript javascript中cookie dom对象

上一篇：celery例子实现定时发送邮件

下一篇：FLUME NG的基本架构

相关阅读

您好，登录后才能下订单哦！

密码登录
登录注册
获取短信验证码
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》
产品服务
地区划分
帮助支持
关于我们
行业资讯-文章归档 问答-问答归档
广州亿速云计算有限公司

7*24小时在线电话：400-100-2938

7*24小时在线QQ：800811969

Copyright © Yisu Cloud Ltd. All Rights Reserved. 2018 版权所有
粤ICP备17096448号-1 粤公网安备 44010402001142号