【WIP】客户端JavaScript Web Object

创建: 2017/10/11

 

更新: 2017/10/14 标题加上【WIP】，增加【TODO】

更新: 2018/01/22 更改标题 [客户端JavaScript Web Object, URLEncode] -> [客户端JavaScript Web Object]

                         给window object部分增加了id

 

【TODO】

增加:  补充Window的操作，p362

 客户端JavaScript概要 

 植入JavaScript的方法

《script》中	《script》      ...  《/script》
《script》链接外部	《script src="..."》《/script》
事件句柄里(字符串)  基本不用	《... onclick="..." ...》
JavaScript: URL  基本不用	《a href="..."》...《/a》  href内部制定JavaScript  例:

 浏览器上的JavaScript处理流程

	生成Window Object  注: 这是网页的全局变量，一个tab一个
	生成Window Object的属性Document Object   开始解析网页，构筑DOM   Document Object的属性readyState 赋值 "loading" 注:       DOM: 文档对象模型(Document Object Model)
	解析网页时候遇到《script》，则同期解析script  解析script是html的解析暂停
	解析完成，构筑好DOM  Document Object的属性readyState 赋值 "interactive"
	浏览器对Document Object发生DOMContentLoaded事件  开始读取img等外部资源
	读取完成后  Document Object的属性readyState 赋值 "complete"  浏览器对Window Object发生load事件
	自定义的事件等登陆到WindowWObject的load事件上  Window.onload 注: load发生在所有文件读取完成后(包括图象等资源), 会让用户等待      所以可以增加事件监听器，把初期登陆加在DOMContentLoaded     上

 async
 defer

async	非同期读取script  html的读取不会暂停
defer	html读取完(DOM构筑完成后)读取  可以代替DOMContentLoaded来进行事件登陆

 Window
Object

 概要

 全局Object
 所有Object都是Window Object的属性
 访问时可以省略window.

 主要属性

screen
document
location
navigator
history
event
console
window	Window自己
self	和window一样
parent	window是表格内的window时返回上一层window  否则返回自己
top	window是表格内的window时返回最上层window  否则返回自己
opener	返回打开现在窗口的窗口
frames[]	包含window内各表格的参照
closed	现在的窗口是否关闭  true/false
name	取得/设置现在窗口的名字
status	取得/设置状态栏的text
screenX  screenY	浏览器在屏幕的位置  IE不支持
screenLeft  screenTop	和上一个相同  Firefox不支持
innerHeight  innerWidth	window高与框(不包含scroll bar)
outerHeight  outerWidth	window高与框(包含scroll bar)
scrollX  scrollY	水平/垂直方向滚动的像素(pixel)
pageXOffset  pageYOffset	和上一个相同

 主要方法

　

prompt("...", default)
confirm("...")
setTimeout(callback, interval)
setInterval(callback, delay)
clearTimeout(timeoutID)
clearInterval(intervalID)
blur()	从当前窗口移除聚焦
focus()	给指定窗口聚焦
close()	关闭窗口
open()	打开新窗口
moveBy(x, y)	相对移动
moveTo(x, y)	绝对移动
resizeBy(width, height)	窗口大小按指定尺寸放大
resizeTo(width, height)	窗口大小变为指定尺寸
scrollBy(x, y)	滚动指定距离
scrollTo(x, y)	滚动到指定位置
print()	打开确认打印的对话框

 Location
Object

 管理地址栏

 呼出方法

 location
 window.location
 document.location

 属性

hash	标签  例:  #anchor
host	主机名: 接口号 例: www.example.com:80
hostname	主机名 例: www.example.com
href	完整的URL 例: http://www.example.com:80/test/index.html?q=value#anchor 注:  location.assign(...)  location.href = ...两者作用相同
pathname	相对于主页的相对路径 例: /test
port	接口号 例: 80
protocol	协议 例: http:
search	请求的字符串 例: ?q=value

 方法

assign(url)  字符串	读取指定的url  记录在浏览历史 注:  location.assign(...)  location.href = ...两者作用相同
reload()	重新读取
replace(url)	跳向网页  不记录在浏览历史里
toString()	返回location.href

URL encode

 概要

 字符串的16进制字符编码以比特为单位用%分隔表示
 字母, 数字,
-_!~*.()'不会被转换

 编码方法

	encodeURIComponent
	encodeURI  不编码字母, 数字, -_!~*.()'不会被转换  和(;,.?:@&=+$),(#)

 解码方法

	decodeURIComponent
	decodeURI

 History
Object 

 管理窗口的浏览历史

 呼出方法

 history
 window.history

 属性

length	只可读   现在session的履历数
scrollRestoration	操作浏览浏览历史后滚动位置是否自动复原  "auto"/"manual"
state	只可读   在pushState, replaceState设定的state的值

 方法

 back()

 返回一个

 forward()

 前进一个

 go(number) 

 指定移动数
 正: 前进
 负: 返回

 pushState(state, title,
url) 

 不跳转并且追加窗口浏览历史

state	通过popstate时间的state属性参照
title	新履历的标题
url	可省略，省略则为当前url

 replaceState(state, title, url)

 跳转并且追加窗口浏览历史

 Navigator
Object

 概要

 Navigator 对象包含有关浏览器的信息

 呼出

 navigator
 window.navigator

 属性
 只可读

 只可读

appCodeName	浏览器的代码名字  不一定正确
appName	浏览器的名字  不一定正确
appVersion	浏览器的版本  不一定正确
geolocation	表示浏览器物理位置的Geolocation Object
language	浏览器对应的MIME类型的 MimeTypeArray
mimeTypes[]
onLine	是否连接网络
platform	系统名  Windows --- "win32"  Mac --- "MacIntel"
plugins	浏览器安装的常见一览  Plugin Object的数组
userAgent	USER-AGENT header部分传送的字符串

 方法

	是否可以使用Java
getUserMedia()	获取设备的麦克风, 摄像头的流  audio, video
registerContentHandler(mimeType, uri, title)	把网页和特定mime类型关联
registerProtocolHandler(protocol, uri, title)	把网页和特定协议关联
vibrate()

 Screen Object

 概要

 包含显示屏大小以及色数等信息

 呼出

 screen
 window.screen

 属性
 只可读

 只可读

availTop	可以使用的最小的y坐标  可用指除了任务栏以外的部分
availLeft	可以使用的最小的x坐标
availHeight	可以使用的高度
availWidth	可以使用的宽度
colorDepth	豁免的色深度(位数): 约1678万色的话24
height	画面高度
width	画面宽度
orientation	画面方向

 Document
Object

 概要

 表示页面内容
 接入DOM

 呼出

 document
 window.document

 DOM关联

 http://blog.sina.com.cn/s/blog_dcb875d90102yc1u.html

 主要属性

characterSet	只可读  使用的字符编码
cookie	获取cookies  以；分隔的列表(list?)
domain	只可读  主页
lastModified	只可读  最终更新日
location	document.location  window.location  location  三个一样
readyState	只可读  文件读取状况
referrer	只可读  链接向当前页面的url
title	页面的标题
URL	只可读  页面的URL

 主要方法

close()	关闭document.open()打开的页面  终止写入
open()	为了写入打开页面
write(text)  不用	写入到document.open()打开的文件
writeIn(text)	写入到document.open()打开的文件  并换行

 Window的操作

 暂略，p362