- 浏览: 88758 次
- 性别:
- 来自: 武汉
文章分类
最新评论
-
zhaohaolin:
哟,龙哥,你还搞C,好高大上的东西啊
xcode初探 -
robinqu:
又改了一些小错误~
[更新20100922]jQuery Location Select 插件- 地址联动、地理检测 -
robinqu:
kimm 写道这个功能不错,就是应用有点局限,内网就不好用了。 ...
[更新20100922]jQuery Location Select 插件- 地址联动、地理检测 -
robinqu:
更新了⋯⋯把代码重写了一次⋯⋯大家可以实现任何种类的联动,以及 ...
[更新20100922]jQuery Location Select 插件- 地址联动、地理检测 -
robinqu:
truth315 写道不好意思了,compu指的是getAre ...
JavaScript Prototype基础
The Window as Global Execution Context
窗口作为全局执行环境
document属性引用Document对象
location属性引用与该window相关的Location对象
frames[]数组保存了文档中表单元素的引用
The Client-Side Object Hierarchy and the DOM
DOM文档树
The Role of JavaScript on the Web
JS在浏览器中的角色
为内容和表现进一步添加行为
Unobtrusive JavaScript
不唐突的JS
As its name implies, this paradigm holds that JavaScript should not draw attention to itself; it should not obtrude.
The first goal of unobtrusive JavaScript is to keep JavaScript code separate from HTML markup. As a corollary to this goal, you should strive to make your external files of JavaScript code as modular as possible.
The second goal of unobtrusive JavaScript is that it must degrade gracefully.
A third goal of unobtrusive JavaScript is that it must not degrade the accessibility of an HTML page (and ideally it should enhance accessibility).
尽量不凸显JS的存在
首先,与HTML代码分离
其次,平稳退化
再次,增强可用性;也就是稳步增强
Embedding Scripts in HTML
在HTML中嵌入代码
<script>标签之间
<scirpt>引入的单独JS文件
HTML的事件属性中的代码
javascirpt伪协议所引用的代码
注意CDATA标记
The defer Attribute
defer属性
改变<script>代码块的执行顺序
可以延迟该块的执行,继续HTML解析
Event Handlers in HTML
事件句柄
onclick
This handler is supported by all button-like form elements, as well as <a> and <area> tags.
onmousedown, onmouseup
These two event handlers are a lot like onclick, but they are triggered separately when the user presses and releases a mouse button, respectively. Most document elements support these handlers.
onmouseover, onmouseout
onchange
This event handler is supported by the <input>, <select>, and <textarea> elements. It is triggered when the user changes the value displayed by the element and then tabs or otherwise moves focus out of the element.
onload
This event handler may appear on the <body> tag and is triggered when the document and its external content (such as images) are fully loaded.
在执行js伪协议的语句是,确保返回值为空,否则会刷新当前页面来显示
The onload Event Handler
onload事件句柄
这个是在文档完全解析完并且所有资源都下载后执行的,这里不再允许执行document.write()。很显然这里文档已经渲染完毕,如果再有document.write(),那么浏览器就会新建一个空白文档来写入内容。用户就没有机会看到之前文档的内容了。
Client-Side Compatibility
客户端兼容性
目前保证兼容性最好的方法不是判断浏览器再为他们编写各自的代码,而是进行功能性判断。
Feature Testing
功能测试
Feature testing (sometimes called capability testing) is a powerful technique for coping with incompatibilities.
简单来说也就是判断某一个函数或方法在特定的环境下是否存在,并根据结果进行对应操作。而不是盲目地根据不可靠的方法判断浏览器种类和版本。
例如下面对事件模型的判断:
还有一种方法就是尝试所有可能的函数,直到有一种得出了正确的结果;往往这个是由于不同浏览器实现同一种操作的函数名称不一样。
例如下面这个新建XHR对象的例子:
JavaScript Security
JS的安全策略
JS可以打开浏览器窗口,但是大多数浏览器都会限制这个功能。由于广告代码的干扰,浏览器通常只让用户点击行为中的打开窗口代码生效。
JS也不允许未经用户允许关闭浏览器窗口。
JS也不允许在鼠标滑过链接的时候通过改变状态栏的提示文字来混淆浏览者。大多数浏览器都禁止更改状态栏文本了。
JS也不允许把窗口调节至某一个边长小于100像素。
FileUpload组件的value值不能够被更改。
对于不同服务器上的页面,脚本既不能读取其内容,也不能注册事件。
The Same-Origin Policy
同源策略
这个可以看做是上面最后一条的详细解释。
尽管脚本会限制不同服务器的文档,但是现在的大型站点往往有许多子域名。在JS的安全特性限制下,这些子域名下的脚本也是无法通讯的。好在有一个document.domain属性。
将需要互相通讯的文档的document.domain设置为同一个顶级域名就可以突破这个限制。
例如:
img.aaa.com的页面中document.domain设置为aaa.com;
serach.aaa.com的页面中document.domain同样设置为aaa.com;
窗口作为全局执行环境
引用
document property for the Document object
two self-referential properties, window and self
a location property that refers to the Location object associated with the window. When a web browser displays a framed document
the frames[] array of the top-level Window object contains references to the Window objects that represent the frames
The Window object represents a web browser window (or a frame within a window; in client-side JavaScript, top-level windows and frames are essentially equivalent).
two self-referential properties, window and self
a location property that refers to the Location object associated with the window. When a web browser displays a framed document
the frames[] array of the top-level Window object contains references to the Window objects that represent the frames
The Window object represents a web browser window (or a frame within a window; in client-side JavaScript, top-level windows and frames are essentially equivalent).
document属性引用Document对象
location属性引用与该window相关的Location对象
frames[]数组保存了文档中表单元素的引用
The Client-Side Object Hierarchy and the DOM
DOM文档树
The Role of JavaScript on the Web
JS在浏览器中的角色
引用
Web browsers display HTML-structured text styled with CSS stylesheets. HTML defines the content, and CSS supplies the presentation. Properly used, JavaScript adds behavior to the content and its presentation. The user's experience should not be dependent on JavaScript, but JavaScript can serve to facilitate that experience.
为内容和表现进一步添加行为
Unobtrusive JavaScript
不唐突的JS
引用
As its name implies, this paradigm holds that JavaScript should not draw attention to itself; it should not obtrude.
The first goal of unobtrusive JavaScript is to keep JavaScript code separate from HTML markup. As a corollary to this goal, you should strive to make your external files of JavaScript code as modular as possible.
The second goal of unobtrusive JavaScript is that it must degrade gracefully.
A third goal of unobtrusive JavaScript is that it must not degrade the accessibility of an HTML page (and ideally it should enhance accessibility).
尽量不凸显JS的存在
首先,与HTML代码分离
其次,平稳退化
再次,增强可用性;也就是稳步增强
Embedding Scripts in HTML
在HTML中嵌入代码
引用
Between a pair of <script> and </script> tags
From an external file specified by the src attribute of a <script> tag
In an event handler, specified as the value of an HTML attribute such as onclick or onmouseover
In a URL that uses the special javascript: protocol
From an external file specified by the src attribute of a <script> tag
In an event handler, specified as the value of an HTML attribute such as onclick or onmouseover
In a URL that uses the special javascript: protocol
<script>标签之间
<scirpt>引入的单独JS文件
HTML的事件属性中的代码
javascirpt伪协议所引用的代码
注意CDATA标记
<script><![CDATA[// Your JavaScript code goes here ]]></script>
The defer Attribute
defer属性
引用
As mentioned earlier, a script may call the document.write( ) method to dynamically add content to a document. Because of this, when the HTML parser encounters a script, it must normally stop parsing the document and wait for the script to execute.
改变<script>代码块的执行顺序
可以延迟该块的执行,继续HTML解析
Event Handlers in HTML
事件句柄
引用
onclick
This handler is supported by all button-like form elements, as well as <a> and <area> tags.
onmousedown, onmouseup
These two event handlers are a lot like onclick, but they are triggered separately when the user presses and releases a mouse button, respectively. Most document elements support these handlers.
onmouseover, onmouseout
onchange
This event handler is supported by the <input>, <select>, and <textarea> elements. It is triggered when the user changes the value displayed by the element and then tabs or otherwise moves focus out of the element.
onload
This event handler may appear on the <body> tag and is triggered when the document and its external content (such as images) are fully loaded.
在执行js伪协议的语句是,确保返回值为空,否则会刷新当前页面来显示
The onload Event Handler
onload事件句柄
这个是在文档完全解析完并且所有资源都下载后执行的,这里不再允许执行document.write()。很显然这里文档已经渲染完毕,如果再有document.write(),那么浏览器就会新建一个空白文档来写入内容。用户就没有机会看到之前文档的内容了。
Client-Side Compatibility
客户端兼容性
目前保证兼容性最好的方法不是判断浏览器再为他们编写各自的代码,而是进行功能性判断。
Feature Testing
功能测试
引用
Feature testing (sometimes called capability testing) is a powerful technique for coping with incompatibilities.
简单来说也就是判断某一个函数或方法在特定的环境下是否存在,并根据结果进行对应操作。而不是盲目地根据不可靠的方法判断浏览器种类和版本。
例如下面对事件模型的判断:
if (element.addEventListener) { // Test for this W3C method before using it element.addEventListener("keydown", handler, false); element.addEventListener("keypress", handler, false); } else if (element.attachEvent) { // Test for this IE method before using it element.attachEvent("onkeydown", handler); element.attachEvent("onkeypress", handler); } else { // Otherwise, fall back on a universally supported technique element.onkeydown = element.onkeypress = handler; }
还有一种方法就是尝试所有可能的函数,直到有一种得出了正确的结果;往往这个是由于不同浏览器实现同一种操作的函数名称不一样。
例如下面这个新建XHR对象的例子:
// This is a list of XMLHttpRequest creation functions to try HTTP._factories = [ function( ) { return new XMLHttpRequest( ); }, function( ) { return new ActiveXObject("Msxml2.XMLHTTP"); }, function( ) { return new ActiveXObject("Microsoft.XMLHTTP"); } ]; // When we find a factory that works, store it here HTTP._factory = null; // Create and return a new XMLHttpRequest object. // // The first time we're called, try the list of factory functions until // we find one that returns a nonnull value and does not throw an // exception. Once we find a working factory, remember it for later use. HTTP.newRequest = function( ) { /* fuction body omitted */ }
JavaScript Security
JS的安全策略
引用
A JavaScript program can open new browser windows, but, to prevent pop-up abuse by advertisers, many browsers restrict this feature so that it can happen only in response to a user-initiated event such as a mouse click.
A JavaScript program can close browser windows that it opened itself, but it is not allowed to close other windows without user confirmation. This prevents malicious scripts from calling self.close( ) to close the user's browsing window, thereby causing the program to exit.
A JavaScript program cannot obscure the destination of a link by setting the status line text when the mouse moves over the link.
A script cannot open a window that is too small (typically smaller than 100 pixels on a side) or shrink a window too small.
The value property of HTML FileUpload elements cannot be set.
A script cannot read the content of documents loaded from different servers than the document that contains the script. Similarly, a script cannot register event listeners on documents from different servers.
A JavaScript program can close browser windows that it opened itself, but it is not allowed to close other windows without user confirmation. This prevents malicious scripts from calling self.close( ) to close the user's browsing window, thereby causing the program to exit.
A JavaScript program cannot obscure the destination of a link by setting the status line text when the mouse moves over the link.
A script cannot open a window that is too small (typically smaller than 100 pixels on a side) or shrink a window too small.
The value property of HTML FileUpload elements cannot be set.
A script cannot read the content of documents loaded from different servers than the document that contains the script. Similarly, a script cannot register event listeners on documents from different servers.
JS可以打开浏览器窗口,但是大多数浏览器都会限制这个功能。由于广告代码的干扰,浏览器通常只让用户点击行为中的打开窗口代码生效。
JS也不允许未经用户允许关闭浏览器窗口。
JS也不允许在鼠标滑过链接的时候通过改变状态栏的提示文字来混淆浏览者。大多数浏览器都禁止更改状态栏文本了。
JS也不允许把窗口调节至某一个边长小于100像素。
FileUpload组件的value值不能够被更改。
对于不同服务器上的页面,脚本既不能读取其内容,也不能注册事件。
The Same-Origin Policy
同源策略
引用
Specifically, a script can read only the properties of windows and documents that have the same origin as the document that contains the script
To support large web sites of this sort, you can use the domain property of the Document object. By default, the domain property contains the hostname of the server from which the document was loaded. You can set this property, but only to a string that is a valid domain suffix of itself.
To support large web sites of this sort, you can use the domain property of the Document object. By default, the domain property contains the hostname of the server from which the document was loaded. You can set this property, but only to a string that is a valid domain suffix of itself.
这个可以看做是上面最后一条的详细解释。
尽管脚本会限制不同服务器的文档,但是现在的大型站点往往有许多子域名。在JS的安全特性限制下,这些子域名下的脚本也是无法通讯的。好在有一个document.domain属性。
将需要互相通讯的文档的document.domain设置为同一个顶级域名就可以突破这个限制。
例如:
img.aaa.com的页面中document.domain设置为aaa.com;
serach.aaa.com的页面中document.domain同样设置为aaa.com;
发表评论
-
WebApp在移动端的涅盘- 另类的移动端应用程序开发
2010-09-27 22:35 4486同时欢迎到我的BLOG讨 ... -
ScriptDoc的Notation规则
2010-01-23 19:37 1762这个还是蛮重要的,以前就一直很羡慕Java有一套标准来着: 转 ... -
关于google.setOnLoadCallback()的一点研究
2010-01-12 10:01 6120google.setOnLoadCallback()是goog ... -
ECMA 推出 JavaScript 5
2009-12-28 21:17 1618转发自http://www.comsharp.co ... -
Javascript 事件编程 (二)
2009-09-18 21:28 1604Event Handlers and the this Key ... -
Javascript 事件编程 (一)
2009-09-04 15:27 1239Events and Event Handling 事件和事件 ... -
Javascript CSS编程 (一)元素定位、透明、内联样式
2009-09-03 14:29 2049Querying Element Position and S ... -
Javascript CSS编程 (二)Computed Styles、Class修改、操作样式表
2009-09-03 13:15 5311Scripting Computed Styles 计算样式 ... -
Javascript DHTML动画
2009-09-03 13:00 1204JS实现的动画效果多半 ... -
Javascript IE4 DOM
2009-09-02 17:14 1001很多IE独有的DOM特性是沿袭自IE4的,所以有必要看看IE4 ... -
Javascript 操控选择文本
2009-09-02 17:02 1242Querying Selected Text 查询选择的文本 ... -
Javascript 寻找文档元素
2009-09-02 16:51 2289Finding Elements in a Document ... -
Javascript 窗口的几何关系和相关方法、属性
2009-09-02 10:47 1111Window Geometry 窗口几何关系 引用Scree ... -
JavaScript window下面的常用函数、属性
2009-09-02 10:30 1141我们常用的一些函数都是全局对象window下面的。这里将其梳理 ... -
JavaScript Namespace模拟
2009-07-15 18:53 1542做JavaScript的大型项目比较痛苦,它没有namespa ... -
JavaScript Class模拟深入 - Duck Typing 和 Class相关的工具类
2009-07-15 17:16 1759Duck Typing 引用If it implements ... -
JavaScript 判定对象类型
2009-07-15 16:53 1345判定JS的对象类型基本 ... -
JavaScript Class模拟深入 - 继承、子类
2009-07-15 16:27 1698Superclasses and Subclasses ... -
javascript this 关键字小提示
2009-07-14 22:01 1161来自:http://www.macji.com/2009/01 ... -
JavaScript Class模拟基础
2009-07-14 16:39 1105Simulating Classes in JavaScrip ...
相关推荐
在默认配置(QWebEngineProfile)中植入 Javascript 内容,这样脚本会在所有打开的网页中执行,不论跳转到哪个网址。 Javascript 脚本使用网址中的路径名,判断当前网页位置,从而决定执行哪种操作。 python 代码...
JavaScript在浏览器中被解析和执行时具有阻塞的特性,也就是说,当JavaScript代码执行时,页面的解析、渲染以及其他资源的下载都要停下来等待脚本执行完毕①。这一点是没有争议的,并且在所有浏览器中的行为都是一致...
JavaScript 在浏览器环境中的模块管理.,供大家一起共同分享学习。
各主流浏览器如何禁用javascript脚本
Sequential - 在浏览器中可视化JavaScript代码执行的环境
上网时浏览器要求启用JavaScript脚本时使用
确定JavaScript代码在什么浏览器中运行,并且获取有关客户端环境的其他信息。 在浏览器窗口的状态栏显示任意的文本。 处理在一个窗口中发生的未捕获的JavaScript错误。 编写和多个窗口或帧交互的JavaScript代码...
defer和async特性相信是很多JavaScript开发者”熟悉而又不熟悉”的两个特性,从字面上来看,二者的功能很好理解,分别是”延迟脚本”和”异步脚本”的作用。...在《浏览器环境下JavaScript脚本加载与执行探
在《浏览器环境下JavaScript脚本加载与执行探析之defer与async特性》中,我们研究了延迟脚本(defer)和异步脚本(async)的执行时机、浏览器支持情况、浏览器bug以及其他的细节问题。而除了defer和async特性,动态脚本...
详解javascript脚本何时会被执行 ...如果脚本中有可以直接执行的语句,则会在遇到的时候马上解释执行。主要有以下2种情形: <html> <head> <title>demo</title> <script type="text/javascript">
余弦带来的议题是《JavaScript安全:从浏览器到服务端》,演讲者结合自己多年来web安全研究的经验,给大家分享了javascript在浏览器端的各种安全应用,并介绍了MongoDB和node.js中存在的一些安全问题,让大家见识到...
javascript获取浏览器相关属性(判断浏览器类型,收藏本站等)
Google出的JavaScript脚本,用于测试JavaScript引擎的性能。
Shimport:实现在所有浏览器中使用JavaScript模块,包括动态import()
这说明在浏览器地址栏中输入可执行脚本效果与把该脚本插入网页中去执行是一样的,这就为XSS提供了基础。 2. 对DOM技术的利用 (1)主机A右键“我的电脑”->“管理”->“服务和应用程序”->“服务”,检查Kingsoft...
一般浏览器的开发者窗口都可以通过在当前网页界面按F12快捷键调出,然后在上面的标签栏找到Console点击就是控制台窗口,在这里可以直接执行JavaScript代码,而chrome系浏览器的控制台界面可以使用快捷键Ctrl+Shift+J...
2 浏览器中常见的安全概念 13 2.1 URL 13 2.1.1 URL的标准形式 15 2.1.2 IRI 16 2.1.3 URL的“可视化”问题——字形欺骗钓鱼攻击 18 2.1.4 国际化域名字形欺骗攻击 19 2.1.5 自纠错与Unicode字符分解映射 20 ...
脚本调试插件,可以再浏览器里查看javascript错在那里,里面有使用说明,和安装说明,开发者很有帮助的,一般js不好调试,这个可以大大帮助的
行业分类-设备装置-多浏览器平台执行javascript脚本的方法及装置.zip