Recent Comments
Tag Archives: Javascript
Javascript 检测键盘按键
在使用Javascript相应键盘输入事件时，有几个事项必须先弄清楚
Javascript能相应的键盘事件
Javascript有3个事件句柄在对应键盘的输入状态：keydown、keypress和keyup。
分别对应的意思是：按键被按下（按下按键但还没有抬起）、点击按键（按下并抬起按键）、按键抬起（按键抬起之后）
按键的分类
按键可以分为“实键”和“虚键”
实键可以理解为我们能够看到并打印出来的按键，如字母“A”、数字“1”、字符“?”等等
虚键就是那些无法打印出来起到控制作用的按键，如“Ctrl”、“Alt”、“Shift”、“方向键”等等
IE在处理虚键时有个特例：虚键不会产生keypress事件，必须使用keydown或keyup来捕获
按键码和字符码
按键码是计算机用来识别不同按键的编码，每一个按键都有按键码
字符码是可被打印的实键特有的，对应了键盘上显示的字符
按键码可以使用String.fromCharCode()转换为字符码
按键码和和字符码的对应表可以在本文最后找到。
先来看下演示
演示页面
Tagged Javascript, keycode
将数组转为XML格式的PHP类
最近经常使用AJAX来取代原先Form提交数据的方法，有时候会遇到需要返回大量数据，为此自己编写了一个PHP类，来将获取到的数据用XML格式返回给浏览器。
这个类支持将一个多维数组转换为XML格式；
数组的index值将作为XML的节点名，数组每项的值将作为XML节点的内容。
实现原理
PHP内建支持DOM对象，我们就通过DOM来操作XML
PHP创建DOM对象的语句是
$dom = new DOMDocument('1.0','utf-8');
创建一个DOM节点的语句是
$element = $dom->createElement($elementName);
给节点添加内容的语句是
$element->appendChild($dom->createTextNode($value));
最后将节点添加到DOM中
$dom->appendChild($element);
Tagged ajax, Javascript, php, xml
原生JS实现jQuery中的document.ready
我们经常使用window.onload来绑定“页面加载”这个事件，但实际上window.onload会在页面元素全部加在完毕后执行，如果网页上有相当多的图片，我们就会察觉到Javascript执行的延迟。
jQuery为我们提供了一个document.ready方法，用来代替window.onload。
好处
尽管onload事件能够保证绝对不出错，但往往它执行的太晚了，因为它需要在页面元素全部加载完之后执行。
这使得很多页面的JS功能必须等待漫长的图片加载过程，往往用户在页面还没完全打开时已经关闭了页面…悲剧！
使用document.ready方法可以让页面“边下载，边执行”，提供更好的浏览体验。
如：
我们可以将图片预加载放在document.ready中，这样这些图片就不必等到页面加载完毕后再下载。
虽然原生JS没有给我们提供ready方法，但我们也可以自己简单构建一个，尽管没有jQuery中那么强大，但也勉强够用。
(more…)
Tagged document.ready, Javascript
图片延迟加载 III – 优化
文章列表：
图片延迟加载 I – 获取页面、视窗、元素的尺寸和位置
图片延迟加载 II – 实现延迟加载
图片延迟加载 III – 优化
通过前2篇博客《图片延迟加载 I – 获取页面、视窗、元素的尺寸和位置》、《图片延迟加载 II – 实现延迟加载》，我们已经能够完成图片延迟加载的功能，但遗留了一个问题–性能。
因为绑定了onscorll事件，所以试想一下，我们拉着滚动条往下看网页，每次滚动一点距离就需要对整个数组进行一次循环，并且判断哪些图片需要加载，这是一件非常消耗CPU的工作。你可以打开任务管理器，查看拖动滚动条时的CPU负载程度。
如何减负
目前我能想到的有3点：
1. 每加载一张图片，就将图片从数组中剔除
2. 设置退出机制。当数组为空时取消绑定的onscroll和onresize事件
3. onscroll事件可以用setTimeout代替，同样设置退出机制。
Tagged Javascript, lazyload
图片延迟加载 II – 实现延迟加载
文章列表：
图片延迟加载 I – 获取页面、视窗、元素的尺寸和位置
图片延迟加载 II – 实现延迟加载
图片延迟加载 III – 优化
前一篇博客，我们为“图片延迟加载”做了一些准备工作，
我们知道了如何判断图片出现在视窗中，以便我们来加载这张图片。
这次我们可以正式开工，来完成延迟加载的功能了，具体的流程大概是这样的：
1. 将需要延迟加载图片的src属性替换成一张临时图片，如一张灰度图片grey.gif
2. 将真正的图片路径写在img的其他属性中，比如：tsrc
3.1 页面加载后逐个获取这些img，并且计算他们的位置，将结果保存在数组中。
3.2 页面加载后，获取窗口的初始化大小和位置。
3.3 计算初次哪些图片需要加载
4. 检测视窗的resize，发生时重新计算windowSize和windowOffset
5. 检测页面的scrolling，发生时从数组中对比，加载符合条件的img
Tagged Javascript, lazyload
图片延迟加载 I – 获取页面、视窗、元素的尺寸和位置
文章列表：
图片延迟加载 I – 获取页面、视窗、元素的尺寸和位置
图片延迟加载 II – 实现延迟加载
图片延迟加载 III – 优化
最近很多网站都加载了“图片延迟加载”的功能，大多都是用jQuery实现的，但我偏偏对这东西不太感冒，我更关心如何用原生JS去实现。
“图片延迟加载”实际上应该称为“按需求加载”，即页面在打开之初并不将所有图片都显示出来，而仅仅显示浏览器中能看到的部分；随着浏览器滚动条的移动，当那些未显示的图片出现在浏览器中时，才去加载这些图片。
延迟加载涉及到比较多的知识，因本人水平有限，所以一边摸索一边将感悟发上来分享。
如何实现？
按照我的理解，最关键的步骤是要能判断出图片是否出现时浏览器的视窗中。
这里有个视窗的概念：
视窗就是浏览器中可视部分，就相当于在页面中开了一个洞。
通过滚动条（横向或纵向），我们可以调整视窗在页面中的位置，来显示页面的内容。
如右图中，白色部分就是视窗，它覆盖在整个页面之上，就是我们看到的部分。
如何判断图片出现在视窗中？
视窗相对于页面，会有一个偏移量，这个偏移量就是滚动条滚动了多少距离
图片相对于页面，也会有个偏移量，这个偏移量就是图片相对于页面的绝对坐标。
我们需要取得这2个偏移量，加上视窗的大小与图片大小后进行对比。
垂直方向：图片垂直偏移量+图片高度 > 视窗垂直偏移量 并且 图片垂直偏移量 < 视窗垂直偏移量+视窗高度
水平方向：图片水平偏移量+图片宽度 > 视窗水平偏移量 并且 图片水平偏移量 < 视窗水平偏移量+视窗宽度
水平方向：图片水平偏移量+图片宽度 > 视窗水平偏移量 并且 图片水平偏移量 < 视窗水平偏移量+视窗宽度
Tagged Javascript, lazyload
图片的预加载
在网页设计时，图片替换作为一种页面装饰方法被广泛使用。
简单来讲，当我们鼠标滑过某张图片时，图片会被替换成其他图片，比如说一张反色高亮图片，来表示鼠标正在划过。
但这样做经常遇到一个问题：当鼠标滑过，图片需要替换，但网速比较慢，那会出现一小段时间内，替换图片无法显示出来的情况，影响用户的浏览体验。
为了应对这种情况，图片预加载就应运而生了。
所谓预加载：就是在网页打开之初，就把当前并没有使用，但页面处理中可能会用到的图片下载，以便之后调用时免去下载的时间。
我们来看下预加载是如果做到的
JS中，我们可以动态的添加元素，当然包括图片：
var an_image = new Image();
an_image.src = "http://www.test.com/a.jpg"
当我们执行这段JS时，图片就在后台加载了，可以通过Firebug查看。
之后如果页面调用了http://www.test.com/a.jpg这张图片，将不会重新下载图片，而是直接显示出来。
(more…)
Tagged Javascript, preload image
关于Javascript中的动态参数 I
在处理JS任务时，有时候会遇到一种情况：我们无法决定函数的参数到底有多少个。
遇到这种问题，当然我们通过传递一个数组参数，来解决。
在我的上一篇博客中，提到过一个函数getElementsByNameFix，她接受可变长度的参数个数，通过数组一样可以做到：
document.getElementsByNameFix = function (target_name, tag_arr) {
...
for(var i=1, i
我们可以将需要查找的标签放在tag_arr数组中循环。
但Javascript提供给我们一种更惊艳的方法去完成这件事，我们可以通过函数的arguments对象直接访问传入的参数。
(more...)
Tagged arguments, Javascript
getElementsByName in IE6
虽然很讨厌IE6，但又不得不时时刻刻去关心它。
虽然IE已经出到了v9，同时safari、firefox、chrome的正不断崛起，但显然、至少在国内、IE6依然是主流。
作为一个网站管理员，我管理的网站大约仍有30%的访问是由IE6执行的！真是一个灾星 -_-!!
可能你也和我一样，正经历着IE6的煎熬，下面是典型的例子。
若干年前，刚刚踏进Web开发领域，在使用getElementsByName时我是这样用的：
var a=document.getElementsByName("tt");
alert(a.length);
它没有问题，因为只需要针对IE6就行了，这是IE6的一个惊人的“能力”，它能将ID等同于Name
过了段时间，当我需要需要对Firefox等浏览器做兼容时发现，我必须使用Name属性才行。
于是我改成：
var a=document.getElementsByName("tt");
alert(a.length);
但在IE6中，它失效了。
(more…)
Tagged getElementsByName, IE, Javascript
