网站建设资讯

NEWS

网站建设资讯

JavaScript学习笔记(二)

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

十多年的营山网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。成都营销网站建设的优势是能够根据用户设备显示端的尺寸不同,自动调整营山建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。成都创新互联从事“营山网站设计”,“营山网站推广”以来,每个客户项目都认真落实执行。

1、BOM模型

BOM:Brower Object Model

JavaScript学习笔记(二)

1.1、属性

1.1.1、Screen

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

1.1.2、history(历史信息)

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

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

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

参考案例代码

demo01.html

跳转到demo02页面



demo02.html

1.1.3、location对象




    
    Title
    



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

location.host:主机+端口号

location.reload():刷新

案例:根据地址栏的信息获取用户填入信息(get提交不安全)

locaiton.html


    
用户名:
年龄:

demo02.html

 

1.1.4、Navigator

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

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

1.2、方法

1.2.1、confirm方法




    
    Title
    




1.2.2、关闭

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




    
    Title
    




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

JavaScript学习笔记(二)

1.2.3、open方法

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

语法格式

window.open(URL,name,features,replace)
参数描述
URL 一个可选的字符串,声明了要在新窗口中显示的文档的 URL。如果省略了这个参数,或者它的值是空字符串,那么新窗口就不会显示任何文档。
name 一个可选的字符串,该字符串是一个由逗号分隔的特征列表,其中包括数字、字母和下划线,该字符声明了新窗口的名称。这个名称可以用作标记
的属性 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

1.3、其他对象

1.3.1、event对象(重点)

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

1.3.2、链接对象

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




    
    Title
    


    链接1
    链接2
    链接3
    链接4

1.3.3、表单对象

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




    
    Title
    


    
        
    

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




    
    Title
    



获取cookie

 

1.3.5、练习cookie

JavaScript学习笔记(二)

JavaScript学习笔记(二)

login.html页面




    
    Title


    
用户名:
密码:

do_login.html页面




    
    Title
    



list.html页面




    
    Title
    



1.3.6、问题

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

decodeURI(username)

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

encodeURI("张三")

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

decodeURI(username)

文章题目:JavaScript学习笔记(二)
浏览地址:http://cdweb.net/article/gdihid.html