Javascript教程

javascripthtml:javascript处理HTML元素必须避免使用的一种思路方法

2009-08-16

我们在编写前台页面时候可能经常会用到“javascript+数据”生成页面元素思路方法但当我们要处理数据量较大导致页面需要展现过多Control控件时候页面响应速度也会直线下降我们可能往往会去排查问题缘由其实在排查掉冗余循环和精简了Control控件数量后我们发现性能还是不乐观于是继续排查个偶然修改却大大改善了效率就是类似如下修改:

修改前:

objDiv.innerHTML ‘”>’;

修改后:
view plaincopy to clipboardpr?
var imga = document.createElement("img");
imga.Attribute("src","back.g");
imga.Attribute("id","picture");
objDiv.appendChild(imga);
var imga = document.createElement("img");
imga.Attribute("src","back.g");
imga.Attribute("id","picture");
objDiv.appendChild(imga);

的前可能书写便利所以没有采用创建页面元素再分别赋值最后进行嵌套思路方法而是直接通过串赋值innerHTML思路方法这种思路方法就是比较简单和便捷但是在性能方面还是有所损失这中间必然涉及到个将串转换为正确页面Control控件个过程这其中性能损失可能比较大所以造成了页面相应迟缓 [查看PDF电子文档]

iefirefox兼容性:Javascript的IE和Firefox兼容性汇编

2009-08-16

以下以 IE 代替 Internet Explorer以 MF 代替 Mozzila Firefox

1. document.form.item 问题
(1)现有问题:
现有代码中存在许多 document.formName.item("itemName") 这样语句不能在 MF 下运行
(2)解决思路方法:
改用 document.formName.elements["elementName"]
(3)其它
参见 2

2. 集合类对象问题
(1)现有问题:
现有代码中许多集合类对象取用时使用 IE 能接受MF 不能
(2)解决思路方法:
改用作为下标运算如:document.forms("formName") 改为 document.forms["formName"]
又如:document.getElementsByName("inputName")(1) 改为 document.getElementsByName("inputName")[1]
(3)其它

3. window.event
(1)现有问题:
使用 window.event 无法在 MF 上运行
(2)解决思路方法:
MF event 只能在事件发生现场使用此问题暂无法解决可以这样变通:
原代码(可在IE中运行):
...

新代码(可在IE和MF中运行):
...

此外如果新代码中第行不改和老代码样话(即 gotoSubmit 没有给参数)则仍然只能在IE中运行但不会出错所以这种方案 tpl 部分仍和老代码兼容

4. HTML 对象 id 作为对象名问题
(1)现有问题
在 IE 中HTML 对象 ID 可以作为 document 下属对象变量名直接使用在 MF 中不能
(2)解决思路方法
用 getElementById("idName") 代替 idName 作为对象变量使用

5. 用idName串取得对象问题
(1)现有问题
在IE中利用 eval(idName) 可以取得 id 为 idName HTML 对象在MF 中不能
(2)解决思路方法
用 getElementById(idName) 代替 eval(idName)

6. 变量名和某 HTML 对象 id 相同问题
(1)现有问题
在 MF 中对象 id 不作为 HTML 对象名称所以可以使用和 HTML 对象 id 相同变量名IE 中不能
(2)解决思路方法
在声明变量时律加上 var 以避免歧义这样在 IE 中亦可正常运行
此外最好不要取和 HTML 对象 id 相同变量名以减少
(3)其它
参见问题4

7. event.x 和 event.y 问题
(1)现有问题
在IE 中event 对象有 x, y 属性MF中没有
(2)解决思路方法
在MF中和event.x 等效是 event.pageX但event.pageX IE中没有
故采用 event.clientX 代替 event.x在IE 中也有这个变量
event.clientX 和 event.pageX 有微妙差别(当整个页面有滚动条时候)不过大多数时候是等效

如果要完全样可以稍麻烦些:
mX = event.x ? event.x : event.pageX;
然后用 mX 代替 event.x
(3)其它
event.layerX 在 IE 和 MF 中都有具体意义有无差别尚未试验

8. 有关frame
(1)现有问题
在 IE中可以用window.testFrame取得该framemf中不行
(2)解决思路方法
在frame使用方面mf和ie最主要区别是:
如果在frame标签中书写了以下属性:

那么ie可以通过id或者name访问这个frame对应window对象
而mf只可以通过name来访问这个frame对应window对象
例如如果上述frame标签写在最上层window里面htm里面那么可以这样访问
ie: window.top.frameId或者window.top.frameName来访问这个window对象
mf: 只能这样window.top.frameName来访问这个window对象

另外在mf和ie中都可以使用window.top.document.getElementById("frameId")来访问frame标签
并且可以通过window.top.document.getElementById("testFrame").src = 'xx.htm'来切换frame内容
也都可以通过window.top.frameName.location = 'xx.htm'来切换frame内容
有关frame和window描述可以参见bbs‘window和frame’文章
以及/test/js/test_frame/目录下面测试
----adun 2004.12.09修改

9. 在mf中自己定义属性必须getAttribute取得
10.在mf中没有 parentElement parement.children 而用
parentNode parentNode.childNodes
childNodes下标含义在IE和MF中区别MF使用DOM规范标准childNodes中会插入空白文本节点
般可以通过node.getElementsByTagName来回避这个问题
当html中节点缺失时IE和MF对parentNode解释区别例如

MF中input.parentNode值为form, 而IE中input.parentNode值为空节点

MF中节点没有removeNode思路方法必须使用如下思路方法 node.parentNode.removeChild(node)

11.const 问题
(1)现有问题:
在 IE 中不能使用 const 关键字如 const constVar = 32; 在IE中这是语法
(2)解决思路方法:
不使用 const 以 var 代替

12. body 对象
MFbody在body标签没有被浏览器完全读入的前就存在而IE则必须在body完全被读入的后才存在

13. url encoding
在js中如果书写url就直接写&不要写&例如var url = 'xx.jsp?objectName=xx&objectEvent=xxx';
frm.action = url那么很有可能url不会被正常显示以至于参数没有正确传到服务器
般会服务器报错参数没有找到
当然如果是在tpl中例外tpl中符合xml规范标准要求&书写为&
般MF无法识别js中&

14. nodeName 和 tagName 问题
(1)现有问题:
在MF中所有节点均有 nodeName 值但 textNode 没有 tagName 值在 IE 中nodeName 使用好象
有问题(具体情况没有测试但我IE已经死了好几次)
(2)解决思路方法:
使用 tagName但应检测其是否为空

15. 元素属性
IE下 input.type属性为只读但是MF下可以修改

16. document.getElementsByName 和 document.all[name] 问题
(1)现有问题:
在 IE 中getElementsByName、document.all[name] 均不能用来取得 div 元素(是否还有其它不能取元素还不知道) [查看PDF电子文档]

javascript弹出窗口:javascript弹出窗口问题整理总结

2009-08-16

1.无提示刷新网页
大家有没有发现有些网页刷新时候会弹出个提示窗口点“确定”才会刷新
而有页面不会提示不弹出提示窗口直接就刷新了.
如果页面没有form,
则不会弹出提示窗口
如果页面有form表单
a)

会弹出提示窗口
b)
不会弹出

2 javascript刷新页面思路方法

window.location.reload;

使用window.open弹出弹出窗口刷新父窗口
window.opener.location.reload
使用window.showDialog弹出模式窗口
window.dialogArguments.location.reload;

3.javascript弹出窗口代码
下面给两个弹出屏幕居中窗口例子
window.open方式
function ShowDialog(url) {
var iWidth=300; //窗口宽度
var iHeight=200;//窗口高度
var iTop=(window.screen.height-iHeight)/2;
var iLeft=(window.screen.width-iWidth)/2;
window.open(url,"Detail","Scrollbars=no,Toolbar=no,Location=no,Direction=no,Resizeable=no,
Width="+iWidth+" ,Height="+iHeight+",top="+iTop+",left="+iLeft);
}

window.showModalDialog方式
function ShowDialog(url) {
var iWidth=300; //窗口宽度
var iHeight=200;//窗口高度
var iTop=(window.screen.height-iHeight)/2;
var iLeft=(window.screen.width-iWidth)/2;
window.showModalDialog(url,window,"dialogHeight: "+iHeight+"px; dialogWidth: "+iWidth+"px;
dialogTop: "+iTop+"; dialogLeft: "+iLeft+"; resizable: no; status: no;scroll:no");
}

注意这里第 2个参数window

4.模式窗口数据不刷新(缓存Cache)问题

在jsp页面加入如下语句

<%
response.Header("Pragma","No-Cache");
response.Header("Cache-Control","No-Cache");
response.DateHeader("Expires", 0);
%>

5,模式窗口中链接弹出新窗口问题

在和间加入

6.无提示关闭页面思路方法
function CloseWin{
var ua = navigator.userAgent; var ie = navigator.appName"Microsoft Internet Explorer"?true:false;
(ie){
var IEversion = parseFloat(ua.sub(ua.indexOf("MSIE ")+5,ua.indexOf(";",ua.indexOf("MSIE "))));
( IEversion< 5.5){
var str = '';
document.body.insertAdjacentHTML("beforeEnd", str);
document.all.noTipClose.Click;
} {
window.opener =null; window.close;
}
}{
window.close
}
} [查看PDF电子文档]

javascript类设计:JavaScript 写 Log 类的具体实现

2009-08-16

由于现在jscript 编写方式比以外负责很多很多时候都比较难以调试为了方便日常中调试摆弄些下面写Log Class 将需要内容记录下来
下面就是具体源代码此Class 只能在 IE浏览器使用

1 LogClass.prototype = {
2
3 initialize : function{
4
5 try{
6
7 this._fso = ""; //File 操作对象
8
9 this._folderspec = ""; // 类 file 处理路径
10
11 this._fso = ActiveXObject("Scripting.FileObject"); // 建立 ActiveXObject 对象
12
13 this._objDate = Date;
14
15 this._DateString = this._objDate.format("yyMMdd");
16
17 this._DateString = "c:\\" + this._DateString + ".log" ;
18
19 this._folderspec = this._DateString;
20
21
22 }catch(e){
23
24 alert("file Class initialize Error : "+ e.number +" "+ e.description);
25
26 }
27
28 },
29 TRACE : function(Content){
30
31 try{
32
33 this.OpenTextFile(8,true);
34
35 _objDate = Date;
36
37 _dateString = _objDate.format("yyyy-MM-dd hh:mm:ss");
38
39 this._otf.WriteLine(_dateString+"||"+Content);
40
41 this._otf.close;
42
43 }catch(e){
44
45 this._otf.Close;
46
47 alert("file Class TRACE Error : "+ e.number +" "+ e.description);
48
49 }
50
51 },
52 OpenTextFile : function(IOmode,format){
53
54 try{
55
56 this._otf = this._fso.OpenTextFile(this._folderspec,IOmode,true,format);
57
58 }catch(e){
59
60 this._otf.Close;
61
62 alert("file Class OpenTextFile Error : "+ e.number +" "+ e.description);
63
64 }
65
66 }
67
68 };
[查看PDF电子文档]

javascript解密:Javascript和C#真正可以交互的DES加解密代码

2009-08-16

因项目需要要用js加密后提交给C#解密

在网上找了半天网上有无数个版本却找不到个能互相使用

甚至就连都是js版本都不能互通汗个

时间关系没有去深究加密代码就随便下载了个JS版本

并把它改写成C#版本

这样JS加密后结果C#也能解密

反的C#加密后结果JS也能解密

我把它发出来给大家共享吧

注:源代码是VS.Net2008版本创建里面包含js加解密和C#加解密

下载地址:http://download.csdn.net/source/1434466

如果你找到什么bug或有啥好建议不妨联系下俺呵呵:

btw:在改写过程中JS支持带符号位右移(>>>操作符)而C#不支持

非要把转换成u再右移(>>操作符)

而operator又不支持>>>

只好写个别了 [查看PDF电子文档]

javascript图片播放:javascript 控制图片播放代码

2009-08-16

无标题文档

昆山论坛“新世军”军团掠影

kshot.js文件

var n=0;

var showNum = document.getElementById("num");

var showNums = document.getElementById("num").getElementsByTagName("span");

function Mea(value){

n=value;

Bg(value);

plays(value);

cons(value);

}

function Bg(value){

for(var i=0;i
(valuei){

showNum.getElementsByTagName("span")[i].Name='bigon';

}

{

showNum.getElementsByTagName("span")[i].Name='bigoff';

}

}

function plays(value){

try

{

with (fc)

{

filters[0].Apply;

for(i=0;i
filters[0].play;

}

}

catch(e)

{

var divlist = document.getElementById("fc").getElementsByTagName("div");

for(i=0;i
{

ivalue?divlist[i].style.display="block":divlist[i].style.display="none";

}

}

}

function cons(value){

try

{

with (con)

{

for(i=0;i
}

}

catch(e)

{

var divlist = document.getElementById("con").getElementsByTagName("div");

for(i=0;i
{

ivalue?divlist[i].style.display="block":divlist[i].style.display="none";

}

}

}

function Auto{autoStart=Interval("auto(n)", 5000)}

function clearAuto{clearInterval(autoStart)}

function auto{

n;

(n>showNums.length-1)n=0;

Mea(n);

}

function sub{

n--;

(n<0)n=showNums.length-1;

Mea(n);

}

Auto; [查看PDF电子文档]

javascript级联:动态生成javascript代码下拉条的级联效果

2009-08-16

怎样动态生成javascript代码:
带下拉条那种,
首先, 主表bookinfo有个字段是booktype, 不类型,
从表booktype 有个字段id , 也是类型.
表bookinfo中字段booktype是表booktype外键.
我想让他们两者级联.

实现代码是这样:
<%@ page contentType="text/html; char=gb2312" language="java"

import="java.sql.*" errorPage="" %>
<%@ page import="java.util.*" %>

<%@ page import="com.deng.library.ActionForm.BookTypeForm" %>
<%@ page import="com.deng.library.dao.BookTypeDAO" %>

<%
List bookModyQuery = (List)

request.getAttribute("bookModyQuery"); //返回类型为List
%>

<% for( i = 0; iBookForm bookForm = (BookForm)bookModyQuery.get(i);
%>

<%
String str = null;
BookTypeForm bookTypeForm = null;
BookTypeDAO bookTypeDAO = BookTypeDAO;
List list = (List)

bookTypeDAO.bookTypeQuery(str);
(listnull || list.isEmpty){
out.prln("");
}{
Iterator it = list.iterator;
while(it.hasNext){
bookTypeForm = (BookTypeForm)it.next;
%>

<%
}
}
%>

<%
}
%>

注意到:
<%(bookForm.getTypeIdbookTypeForm.getId) out.prln

("selected");
主要是这句代码.
希望此贴对来访者有用.代码可能有点乱. 是在我本人项目上.来访者如有疑问,可以留言. [查看PDF电子文档]

javascriptdate:Javascript 日期对象Date扩展

2009-08-16

Date对象扩展包括常用中文日期格式解析、加减操作、日期差、周操作和季操作具体扩展思路方法如下:

parseCHS－－静态思路方法解析常用中文日期并返回日期对象

add－－日期加减操作[注:此在上传时还存在个BUG请下载后把此内第行"var regExp = /^\d+$/;" 改为 "var regExp = /^([+-])?\d+$/;", 要不然就做不了减法]

dateDf－－日期差开始日期和当前日期差,返回差绝对值

getFirstWeekDays－－获取当前日期所在年份中第个星期天数

getLastWeekDays－－获取当前日期所在年份中最后个星期天数

getWeeksOfYear－－获取当前日期所在年份周数

getWeek－－获取当前日期所在是年中第几周返回个整数值

getSeason－－获取当前日期所在是年中第几季返回个季度整数值

[查看PDF电子文档]

javascript浏览器:JavaScript引擎的性能是影响浏览器速度的关键原因

2009-08-16

浏览器速度直是微软发布IE 8宣传重点微软曾在 4月份发布个测试报告显示IE 8web页面浏览速度是Firefox 3倍比Chrome快 3分的

JavaScript引擎性能是影响浏览器速度关键原因目前IE竞争对手JavaScript情况是这样:Safari 4.0预计将安装SquirrelFish Extreme Javascript引擎Chrome安装GoogleC编写V8开源引擎Firefox使用TraceMonkey微软策略区别目是为了使Javascript加载只占web页面下载时间20%从而让浏览器更加有效率；而且改变了Javascript核心架构以减少功能、对象创建时间损耗

然而在最近份Futuremark针对浏览器评测中IE 8在浏览器速度评测中位列倒数第 2(总共十款浏览器参和评测)微软在IE 8中处理Javascript策略本来是为了提升自己结果却致使自己落后于竞争对手要知道Futuremark数据是基于40万世界各地用户所做出 [查看PDF电子文档]

javascript方法:javascript 思路方法一些使用思路方法

2009-08-16

无标题文档

[查看PDF电子文档]

javascript客户端:javascript实现了客户端页面的表格排序

2009-08-16

好久没写博了直以来都太忙了:进入到后半学期后每周要上 4次课每天都要备课有点时间就赶工没时间写尽管如此刚刚解决客户端页面用javascript实现表格排序还是要记录下来

需求背景:系统中个统计功能速度较慢按照的前做法是通过把结果表格表头文字做成链接向服务器提交排序列名和排序方式(升序/降序)然后重新从服务端返回结果来实现排序但是这种思路方法无疑效率很差加重了网络通信和服务器负担于是考虑用javascript在客户端页面对结果列表排序

说实话这种思路方法以前还真没接触过上网查了下发现其实已经不是什么新鲜办法了能找到很多我觉得cloudgamer做得很好(http://www.cnblogs.com/cloudgamer/archive/2008/10/06/1304414.html)实现了对包括复选框、单选框列在内各种类型table列排序可惜是在我项目中没有应用成功不知道跟在rails中使用RJS有关后来又找到了利用javascript中moveRows思路方法移动table中行思路方法而且有个现成代码可用但是发现该代码只是将行顺序颠倒而不能对乱序行真正排序不过这个思路方法很有启发性最终结合在网上又找到javascript实现排序算法自己最终实现了针对本项目排序思路方法

代码如下:

1、页面排序其中sorttype=1表示降序-1表示升序；BubbleSort为冒泡排序法

参数:nColNum为列序号(从0开始)；strDataType为所排序数据类型如、float等

view plaincopy to clipboardpr?
var sorttype = 1; //desc
function sortByCol(nColNum,strDataType){ //排序
var table = document.getElementById("tblResult"); //定位到table上
BubbleSort(table,nColNum,strDataType,sorttype);
sorttype = 0 - sorttype; //asc
}
var sorttype = 1; //desc
function sortByCol(nColNum,strDataType){ //排序
var table = document.getElementById("tblResult"); //定位到table上
BubbleSort(table,nColNum,strDataType,sorttype);
sorttype = 0 - sorttype; //asc
}

2、冒泡排序

参数:table为要排序表格；nColNum为列序号(从0开始)；strDataType为所排序数据类型如、float等中根据区别数据类型做相应类型转换再比较

其它:主要就是根据传入参数对待排序表格(table)指定列(nColNum)以某种数据类型(strDataType)按照指定排序方式(nSortOrder升序/降序)以冒泡排序法排序其中用类似“table.rows[j].cells[nColNum].childNodes[0].data”这样语句取得table中某行某个单元格中数据交换两行时Swap本中对、float类型数据做了显式转换根据具体需求可继续扩充

需要注意另外点是for(var i=1;i
view plaincopy to clipboardpr?
function BubbleSort(table,nColNum,strDataType,nSortOrder){ //冒泡排序
var length=table.rows.length;
for(var i=1;ivar exchanged=false;
for(var j=length-1;j>i;j--){
switch(strDataType){
"":
(nSortOrder>0){ //desc
(parseInt(table.rows[j].cells[nColNum].childNodes[0].data) >
parseInt(table.rows[j-1].cells[nColNum].childNodes[0].data)){
Swap(table,j,j-1);
exchanged=true;
}
}
{
(parseInt(table.rows[j].cells[nColNum].childNodes[0].data) <
parseInt(table.rows[j-1].cells[nColNum].childNodes[0].data)){
Swap(table,j,j-1);
exchanged=true;
}
}
;
"float":
(nSortOrder>0){ //desc
(parseFloat(table.rows[j].cells[nColNum].childNodes[0].data) >
parseFloat(table.rows[j-1].cells[nColNum].childNodes[0].data)){
Swap(table,j,j-1);
exchanged=true;
}
}
{
(parseFloat(table.rows[j].cells[nColNum].childNodes[0].data) <
parseFloat(table.rows[j-1].cells[nColNum].childNodes[0].data)){
Swap(table,j,j-1);
exchanged=true;
}
}
;
"":
default:
(nSortOrder>0){ //desc
(table.rows[j].cells[nColNum].childNodes[0].data.toString >
table.rows[j-1].cells[nColNum].childNodes[0].data.toString){
Swap(table,j,j-1);
exchanged=true;
}
}
{
(table.rows[j].cells[nColNum].childNodes[0].data.toString <
table.rows[j-1].cells[nColNum].childNodes[0].data.toString){
Swap(table,j,j-1);
exchanged=true;
}
}
} //switch
} //for j
(!exchanged) ;
} //for i
}
function BubbleSort(table,nColNum,strDataType,nSortOrder){ //冒泡排序
var length=table.rows.length;
for(var i=1;ivar exchanged=false;
for(var j=length-1;j>i;j--){
switch(strDataType){
"":
(nSortOrder>0){ //desc
(parseInt(table.rows[j].cells[nColNum].childNodes[0].data) >
parseInt(table.rows[j-1].cells[nColNum].childNodes[0].data)){
Swap(table,j,j-1);
exchanged=true;
}
}
{
(parseInt(table.rows[j].cells[nColNum].childNodes[0].data) <
parseInt(table.rows[j-1].cells[nColNum].childNodes[0].data)){
Swap(table,j,j-1);
exchanged=true;
}
}
;
"float":
(nSortOrder>0){ //desc
(parseFloat(table.rows[j].cells[nColNum].childNodes[0].data) >
parseFloat(table.rows[j-1].cells[nColNum].childNodes[0].data)){
Swap(table,j,j-1);
exchanged=true;
}
}
{
(parseFloat(table.rows[j].cells[nColNum].childNodes[0].data) <
parseFloat(table.rows[j-1].cells[nColNum].childNodes[0].data)){
Swap(table,j,j-1);
exchanged=true;
}
}
;
"":
default:
(nSortOrder>0){ //desc
(table.rows[j].cells[nColNum].childNodes[0].data.toString >
table.rows[j-1].cells[nColNum].childNodes[0].data.toString){
Swap(table,j,j-1);
exchanged=true;
}
}
{
(table.rows[j].cells[nColNum].childNodes[0].data.toString <
table.rows[j-1].cells[nColNum].childNodes[0].data.toString){
Swap(table,j,j-1);
exchanged=true;
}
}
} //switch
} //for j
(!exchanged) ;
} //for i
}

3、交换表格行

参数:table为要交换行表格；i、j为要交换两个行号

这个就是充分利用了table元素moveRow思路方法实现两行位置交换该思路方法第个参数是待移动行号第 2个参数是移动目标位置行号这个移动某行后其它行位置会做相应调整根据i、j大小区别要想达到最终交换两行目要分别做两种区别操作如中所写这个过程很简单在纸上画画就能明白了

view plaincopy to clipboardpr?
function Swap(table,i,j){

(i<0 || j>table.rows.length-1) ;
(itable.moveRow(i,j);
table.moveRow(j-1,i);
}
{
table.moveRow(i,j);
table.moveRow(j+1,i);
}
}
function Swap(table,i,j){

(i<0 || j>table.rows.length-1) ;
(itable.moveRow(i,j);
table.moveRow(j-1,i);
}
{
table.moveRow(i,j);
table.moveRow(j+1,i);
}
}

最后在页面上只要把表格可排序列名做成链接sortByCol即可如:

根据BubbleSort中switch不指定数据类型(即第 2个参数)话就是默认按照串类型排序下面是指定了数据类型:

再有就是还可用快速排序等其它排序思路方法实现相应算法网上也很容易找到做相应改造即可

由于实际应用中结果未分页故这 3个也未实现对分页数据排序

这个思路方法般性还未仔细考察留待以后用在其它页面上时再做

javascript很强大还有很多可学 [查看PDF电子文档]

javascripttable:JavaScript Table行定位效果

2009-08-16

近来有客户要求用table显示大串数据由于滚动后就看不到表头很不方便所以想到这个效果
上次做table排序对table有了些了解这次更是深入了解了番发现table原来是这么不简单
还不清楚这个效果叫什么就叫行定位吧本来想把列定位也做出来但暂时还没这个需求等以后有时间再弄吧
如果只是做个效果也不难但要做个通用无侵入就要考虑很多东西了

效果预览

为方便预览建议缩小浏览器

1 表头
1 表头
2 图片滑动切换效果
3 图片变换效果(ie _disibledevent=>

1	2
3	4

给tr设置relative后就能相对table定位了看来很简单啊但问题是这个思路方法ie8和ff都无效而且存在很多问题所以很快就被抛弃了
ps:该效果用来做tr拖动会很方便

接着想到是给table插入个新tr克隆原来tr并设置这个tr为fixed(ie6为absolute)例如:

Code

1	2
3	4
5	6

第个问题是fixedtr在ie7中不能进行定位而且td在定位后并不能保持在表格中布局这样在原表格插tr就没意义了
ps:fixed相关应用可参考仿LightBox效果

最后我用思路方法是新建个table并把源tr克隆到新table中然后通过对新table定位来实现效果
用这个思路方法关键有两点首先要做个仿真度尽可能高tr还有是要准确定位这些请看后面介绍说明

介绍说明

【克隆table】

克隆个元素用cloneNode就可以了它有个bool参数表示克隆是否包含子节点
第步就是克隆原table:

this._oTable = $(table);//源table
this._nTable = this._oTable.cloneNode(false);//新table
this._nTable.id = "";//避免id冲突

要注意虽然iecloneNode参数是可选(默认是false)但在ff是必须建议使用时都写上参数
还要注意是id属性也会被克隆也就是克隆后会有两个相同id元素(如果克隆对象有设置话)这很容易会导致其他问题会把克隆tableid属性设空
ps:table请用来绑定样式用id话新table就获取不了样式了

克隆的后再设置样式:

this._style.width = this._oTable.offWidth + "px";
this._style.position = isIE6 ? "absolute" : "fixed";
this._style.zIndex = 100;

般来说offWidth是width+padding+border结果但table比较特别测试下面代码:

Code

只要给table设置width(style或本身width属性)不管设置padding和border是多少offWidth都等于width值
经测量offWidth是没错那就是说是tablewidth设置问题
w3ctable部分中说width属性是the desired width of the entire table我估计entire就是包含了padding和border找不到什么其他介绍说明先这么理解吧
定位方面除了不支持fixedie6用absolute其他都使用fixed定位

【克隆tr】

table有个rows集合包括了table所有tr(包括thead和tfoot里面)
Clone思路方法会根据其参数克隆对应索引tr:

this._index = Math.max(0, Math.min(this._oTable.rows.length - 1, isNaN(index) ? this._index : index));
this._oRow = this._oTable.rows[this._index];
var oT = this._oRow, nT = oT.cloneNode(true);

由于tr可能是包含在thead这些中所以还要判断下:

(oT.parentNode != this._oTable){
nT = oT.parentNode.cloneNode(false).appendChild(nT).parentNode;
}

然后再插入到新table中:

(this._nTable.firstChild){
this._nTable.replaceChild(nT, this._nTable.firstChild);
}{
this._nTable.appendChild(nT);
}

允许修改克隆tr所以会判断有没有插入过没有就直接appendChild否则用replaceChild替换原来tr

【tableborder和frame属性】

tableborder属性用来指定边框宽度table特有frame属性是用来设置或获取表格周围边框显示方式
w3ctabelframe部分介绍说明frame可以是以下值:
void: No sides. This is the default value.
above: The top side _disibledevent=>

这里还可以看到如果同时设置tableborder和styleborder那tableborder就会失效

中为了更美观会自动去掉新table上面和下面边框包括frame和style:

Code
(this._oTable.border > 0){
switch (this._oTable.frame) {
"above" :
"below" :
"hsides" :
this._nTable.frame = "void"; ;
"" :
"border" :
"box" :
this._nTable.frame = "vsides"; ;
}
}
this._style.borderTopWidth = this._style.borderBottomWidth = 0;

其中空值在设置collapse的后会比较麻烦在ie6/ie7中测试:

Code

后两个转换还可以接受所以在设置frame的前还是判断下border先

【获取背景色】

如果td是背景透明话显然不太美观最好是找个合适颜色来填充
用思路方法是从当前td开始找如果背景是透明话就再从父节点中找直到找到有背景色为止
般来说透明属性值是"transparent"但在chrome里却是"rgba(0, 0, 0, 0)"所以用了个属性来保存透明值:

this._transparent = isChrome ? "rgba(0, 0, 0, 0)" : "transparent";

并在GetBgColor获取背景色中使用:

while (bgc this._transparent && (node = node.parentNode) != document) {
bgc = CurrentStyle(node).backgroundColor;
}
bgc this._transparent ? "#fff" : bgc;

如果全部都是透明话就会返回白色(#fff)
这里没有考虑图片背景情况毕竟图片不定会覆盖整个背景

【parentNode/offParent/parentElement】

上面用到了parentNode这里顺便说说它跟offParentparentElement区别
先看看parentNode在w3c介绍说明:
The parent of this node. All nodes, except Document, DocumentFragment, and Attr may have a parent. However, a node has just been created and not yet added to the tree, or it has been removed from the tree, this is null.
很简单就是节点父节点看过dom都知道

再看看比较容易区分offParent它在mozilla和msdn都说得比较模糊在w3c就比较清楚了:
The offParent attribute, when called _disibledevent=>

可见offParent跟parentNode区别还是很大

而parentNode跟parentElement除了前者是w3c标准后者只ie支持其他区别就不是那么明显了
在ie中大部分情况下两者效果是样当然如果是模样话ie就没必要弄这么个东西出来了测试下面代码:

Code

可以看到当父节点nodeType不是1即不是element节点话它parentElement就会是null
这就明白了名字中“Element”含义了

【设置td宽度】

接下来就要设置td宽度了要获取某元素宽度可以通过以下思路方法:
1支持defaultView可以直接用getComputedStyle获取width
2获取offWidth再减去border和padding宽度
这个本来也可以但tdborder宽度获取比较麻烦下面有更方便思路方法
3获取clientWidth再减去padding宽度
这个跟思路方法2差不多但更简单方便

注意iecurrentStyle不像getComputedStyle能获取准确值而只是个设置值像百分比、auto这些并不会自动转成准确值即使是得到准确值也不定是实际值像td即使设置个很大准确值实际值也不会超过table本身宽度
所以在td这种比较特殊结构中除非是很理想状况否则用currentStyle基本没戏而且在这个效果中即使是差了1px也会看不舒服
对于支持defaultView当然可以直接获取否则就用上面思路方法3来获取:

style.width = (document.defaultView ? parseFloat(css.width)
: (o.clientWidth - parseInt(css.paddingLeft) - parseInt(css.paddingRight))) + "px";

但这里不管哪个思路方法都有个问题就是出现scroll情况不过还好td这个元素即使设置了overflow为scroll也不会出现滚动条除了ie8和chrome
没对这个情况做处理毕竟给td设scroll也不常见而且支持这个浏览器不多没必要花太多时间在这里
ps:有关td宽度自动调整可以参考w3ctable-layout部分

如果有影响原td结构设置例如colspan的类就要留意结构很可能导致些异常变形
如果对原表格结构或内容做了修改应该执行次Clone思路方法重构新table
本部分对体验比较重要如果设置不当就会有变形感觉很不美观

【borderCollapse】

上面说到tdborder宽度获取比较麻烦那到底有多烦呢？
如果只是般情况话通过borderLeftWidth和borderRightWidth获取宽度就可以了
ps:如果borderStyle是"none"话那么border就会没效所以如果要取border宽度话最好先判断下borderStyle是不是"none"

但table有个特别样式borderCollapse设置table边框模型
它有两个值分别是separate(分开默认值)和collapse(合并)
separate就是我们般看到效果这里主要讨论collapse先看mozilla如何说:
In the collapsed border model, adjacent table cells share borders.
意思是在collapse border模型中相邻td会共用边框看下面例子会更明白:

Code

可以看到使用collapse的后相邻td边框都合并成条而且是以相邻边框中宽度较大那条为准
那td跟table的间呢参考下面例子:

Code

可见table和td的间也是遵从同样规则
还有是当设置了collapse那cellspacing就无效了顺便说说border-spacing它其实就是cellspacing在css中样式形式只是ie在ie8才开始支持详细可以看mozilla介绍说明

collapse个常见应用是做边框表格例如1px边框表格:

Code

前者用collapse后者是用table背景色模拟虽然效果都样但前者显然较好才是真正“边框”

在使用了collapse的后要写个通用获取边框宽度会变得十分麻烦而且有些情况下甚至没办法判断获取
详细情况这里就不细说了有兴趣研究话可以看看w3cThe collapsing border model当然要想全部了解话还要在各个浏览器中研究

【元素位置】

table样式设置好后还需要获取原table和原tr位置参数为后面元素定位做准备
要获取某个元素相对文档位置传统做法是获取对象offLeft/offTop然后不断获取offParentoffLeft/offTop直到找不到offParent为止
得到结果就是相对文档位置了上面已经介绍过offParent原理应该都明白了吧
SetRect设置区域属性思路方法中也使用了这个思路:

Code
//获取原table位置
var o = this._oTable, iLeft = o.offLeft, iTop = o.offTop;
while (o.offParent) { o = o.offParent; iLeft o.offLeft; iTop o.offTop; }
this._oTableLeft = iLeft;
this._oTableTop = iTop;
this._oTableBottom = iTop + this._oTableHeight;
//获取原tr位置
o = this._oRow; iTop = o.offTop;
while (o.offParent) { o = o.offParent; iTop o.offTop; }
this._oRowTop = iTop;
this._oRowBottom = iTop + this._oRow.offHeight;

不过这里介绍个更好思路方法通过getBoundingClientRect思路方法来获取
在mozilla是这么介绍说明:
The ed value is a TextRectangle object, which contains read-only left, top, right and bottom properties describing the border-box, in pixels, with the top-left relative to the top-left of the viewport...
返回个TextRectangle对象包含left, top, right和bottom几个只读属性以px为单位来表示边界框相对视窗左上角位置(偶英文烂啊)
注意是相对视窗不是文档哦如果要相对文档还必须加上scrollLeft/scrollTop
通过下面测试可以看到两个思路方法返回结果都是相同:

Code

中如果支持getBoundingClientRect就会用它来获取位置参数:

Code
//用getBoundingClientRect获取原table位置
var top = this._doc.scrollTop, rect = this._oTable.getBoundingClientRect;
this._oTableLeft = rect.left + this._doc.scrollLeft;
this._oTableTop = rect.top + top;
this._oTableBottom = rect.bottom + top;
//获取原tr位置
rect = this._oRow.getBoundingClientRect;
this._oRowTop = rect.top + top;
this._oRowBottom = rect.bottom + top;

显然用getBoundingClientRect更方便快捷
这个思路方法虽然是ie产物但已经是w3c标准而且ff3和Opera都已经支持了这个思路方法基本可以放心使用除了chrome
这里只是简单介绍想了解更多可以看w3cView Module部分

获取原table和tr位置后还需要计算新table位置
可以自定义新table位于视窗位置百分比例如顶部是0中间是0.5底部是1可以在化时或用SetPos思路方法来设置
这里主要获取视窗高度和新table在视窗top值:

this._viewHeight = document.documentElement.clientHeight;
this._ntViewTop = (this._viewHeight - this._nTableHeight) * this._pos;

定位范围实际上是从视框顶部到视框高度减去新table高度范围内所以计算时要先把视窗高度减去新table高度

【元素定位】

万事俱备只欠定位了
由于要根据窗口滚动状态来判断计算定位scrollTop/scrollLeft获取必不可少
但在chrome中就算用了DOCTYPE也要用document.body来获取scrollTop/scrollLeft尽管它确实有document.documentElement
对chrome了解不多也不知哪里能查它相关文档里就直接做个判断算了:

this._doc = isChrome ? document.body : document.documentElement;

定位第步就是判断是否需要定位这里判断标准有两个第个是原tr是否超过了视窗范围还有是新table要显示位置是否在原table显示范围内
第点可以通过原tr位置顶部和底部是否超过视窗顶部和底部来判断:

var top = this._doc.scrollTop, left = this._doc.scrollLeft
,outViewTop = this._oRowTop < top, outViewBottom = this._oRowBottom > top + this._viewHeight;
(outViewTop || outViewBottom){}

在看第 2点的前先看看中Auto属性它是用来指定否自动定位
如果自动定位话当原tr离开视框顶部新table就会定位到视框顶部原tr离开底部新table就会定位到视框底部这样看上去会比较自然顺畅
如果不选择自动话就会根据SetPos思路方法中计算得到新table视窗top值来设置定位:

var viewTop = !this.Auto ? this._nTableViewTop
: (outViewTop ? 0 : (this._viewHeight - this._nTableHeight))//视窗top
,posTop = viewTop + top;//位置top

接着就判断新table要显示位置是否在原table显示范围内这个可以通过新table位置顶部和底部是否超过原table顶部和底部来判断:

(posTop > this._oTableTop && posTop + this._nTableHeight < this._oTableBottom){}

当符合所有条件就可以进行定位了如果是fixed定位就使用相对视窗top值:

this._style.top = viewTop + "px";
this._style.left = this._oTableLeft - left + "px";

像ie6是absolute定位就要使用相对文档top值:

this._style.top = posTop + "px";
this._style.left = this._oTableLeft + "px";

考虑到左右滚动情况left也必须设置

当然不符合条件就会隐藏新table中给top设置个很大负值来间接“隐藏”它
用负值是这样不会把ie6页面拉长不用display是上面需要获取它offHeight如果用display隐藏就获取不了啦

最后把Run绑定到windowscroll事件中就可以了而window在resize时视框高度会发生变化所以resize事件要绑定SetPos

【覆盖select】

只要用到了定位就不得不面对个老对手“ie6select”
我在的前文章也介绍过些解决思路方法(参考这里覆盖select)这里不能直接隐藏select那看来只能用rame了
但用rame有个很大问题在ie6测试下面代码并拖动滚动条:

Code

可以看到即使是rame在拖动滚动条时候select仍然在后面闪啊闪在本中这个现象会尤其明显
看来还得用隐藏select思路方法最好做法是只隐藏在新table后面select而不影响其他select正常显示
那关键就是如何判断select是否在新table后面这个可以通过位置坐标判断刚好可以用到上面getBoundingClientRect
般思路是判断新table和select坐标根据位置判断select显示和隐藏
但如果有多个例子可能会导致select在个例子中要隐藏却在另个要显示情况

为了解决冲突给select加了个_count属性作为计数器用来记录有多少例子把该select隐藏了
如果当前例子判断该select要隐藏就给其_count加1隐藏后存放到例子_selects集合中
在恢复显示_selects中select时先给select_count减1如果得到_count是0那介绍说明没有其他例子要隐藏它就可以设置显示了最后清空_selects集合
在判断是否隐藏select前还必须恢复次该例子_selects里面select否则就会造成_count只加不减情况

中SetSelect思路方法就是用来判断和设置select:

Code
this.ReSelect;
var rect = this._nTable.getBoundingClientRect;
//把需要隐藏放到_selects集合
this._selects = Filter(this._oTable.getElementsByTagName("select"), Bind(this, function(o){
var r = o.getBoundingClientRect;
(r.top <= rect.bottom && r.bottom >= rect.top){
o._count ? o._count : (o._count = 1);//防止多个例子冲突
//设置隐藏
var visi = o.style.visibility;
(visi != "hidden"){ o._css = visi; o.style.visibility = "hidden"; }

true;
}
}))

其中ReSelect思路方法是用来恢复显示select:

forEach(this._selects, function(o){ !--o._count && (o.style.visibility = o._css); });
this._selects = ;

但这个思路方法在快速滚屏时还是无能为力而且select越多效率也随的下降各位有更好思路方法话欢迎交流

【Chrome个bug】

在测试时候发现Chrome个bug测试下面代码:

Code

个毫不相干操作居然令table没有自动撑开加上前面问题看来Chrome路还很长啊

使用介绍说明

例子化个TableFixed对象只需要个参数tableid:

TableFixed("idTable");

例子化时有4个可选属性:
Index: 0,//tr索引
Auto: true,//是否自动定位
Pos: 0,//自定义定位位置百分比(0到1)
Hide: false//是否隐藏(不显示)

其中Index和Pos在例子化的后就不能使用
要修改克隆行可以用Clone思路方法其参数是要克隆tr索引
要修改自定义定位位置可以用SetPos思路方法其参数是要定位位置百分比

具体使用请参考例子

源码

Code
var TableFixed = function(table, options){
this._oTable = $(table);//原table
this._nTable = this._oTable.cloneNode(false);//新table
this._nTable.id = "";//避免id冲突

this._oTableLeft = this._oTableTop = this._oTableBottom = 0;//记录原table坐标参数
this._oRowTop = this._oRowBottom = 0;//记录原tr坐标参数
this._viewHeight = this._oTableHeight = this._nTableHeight = 0;//记录高度
this._nTableViewTop = 0;//记录新table视框top
this._selects = ;//select集合用于ie6覆盖select
this._style = this._nTable.style;//用于简化代码
//chromescroll用document.body
this._doc = isChrome ? document.body : document.documentElement;
//chrome透明用rgba(0, 0, 0, 0)
this._transparent = isChrome ? "rgba(0, 0, 0, 0)" : "transparent";

this.SetOptions(options);

this._index = this.options.Index;
this._pos = this.options.Pos;

this.Auto = !!this.options.Auto;
this.Hide = !!this.options.Hide;

addEventHandler(window, "resize", Bind(this, this.SetPos));
addEventHandler(window, "scroll", Bind(this, this.Run));

this._oTable.parentNode.insertBefore(this._nTable, this._oTable);
this.Clone;
};
TableFixed.prototype = {
//设置默认属性
SetOptions: function(options) {
this.options = {//默认值
Index: 0,//tr索引
Auto: true,//是否自动定位
Pos: 0,//自定义定位位置百分比(0到1)
Hide: false//是否隐藏(不显示)
};
Extend(this.options, options || {});
},
//克隆表格
Clone: function(index) {
//设置table样式
this._style.width = this._oTable.offWidth + "px";
this._style.position = isIE6 ? "absolute" : "fixed";
this._style.zIndex = 100;
//设置index
this._index = Math.max(0, Math.min(this._oTable.rows.length - 1, isNaN(index) ? this._index : index));
//克隆新行
this._oRow = this._oTable.rows[this._index];
var oT = this._oRow, nT = oT.cloneNode(true);
(oT.parentNode != this._oTable){
nT = oT.parentNode.cloneNode(false).appendChild(nT).parentNode;
}
//插入新行
(this._nTable.firstChild){
this._nTable.replaceChild(nT, this._nTable.firstChild);
}{
this._nTable.appendChild(nT);
}
//去掉table上面和下面边框
(this._oTable.border > 0){
switch (this._oTable.frame) {
"above" :
"below" :
"hsides" :
this._nTable.frame = "void"; ;
"" :
"border" :
"box" :
this._nTable.frame = "vsides"; ;
}
}
this._style.borderTopWidth = this._style.borderBottomWidth = 0;
//设置td样式
var nTds = this._nTable.rows[0].cells;
forEach(this._oRow.cells, Bind(this, function(o, i){
var css = CurrentStyle(o), style = nTds[i].style;
//设置td背景
style.backgroundColor = this.GetBgColor(o, css.backgroundColor);
//设置tdwidth,没考虑ie8/chrome设scroll情况
style.width = (document.defaultView ? parseFloat(css.width)
: (o.clientWidth - parseInt(css.paddingLeft) - parseInt(css.paddingRight))) + "px";
}));
//获取table高度
this._oTableHeight = this._oTable.offHeight;
this._nTableHeight = this._nTable.offHeight;

this.SetRect;
this.SetPos;
},
//获取背景色
GetBgColor: function(node, bgc) {
//不要透明背景(没考虑图片背景)
while (bgc this._transparent && (node = node.parentNode) != document) {
bgc = CurrentStyle(node).backgroundColor;
}
bgc this._transparent ? "#fff" : bgc;
},
//设置坐标属性
SetRect: function {
(this._oTable.getBoundingClientRect){
//用getBoundingClientRect获取原table位置
var top = this._doc.scrollTop, rect = this._oTable.getBoundingClientRect;
this._oTableLeft = rect.left + this._doc.scrollLeft;
this._oTableTop = rect.top + top;
this._oTableBottom = rect.bottom + top;
//获取原tr位置
rect = this._oRow.getBoundingClientRect;
this._oRowTop = rect.top + top;
this._oRowBottom = rect.bottom + top;
}{//chrome不支持getBoundingClientRect
//获取原table位置
var o = this._oTable, iLeft = o.offLeft, iTop = o.offTop;
while (o.offParent) { o = o.offParent; iLeft o.offLeft; iTop o.offTop; }
this._oTableLeft = iLeft;
this._oTableTop = iTop;
this._oTableBottom = iTop + this._oTableHeight;
//获取原tr位置
o = this._oRow; iTop = o.offTop;
while (o.offParent) { o = o.offParent; iTop o.offTop; }
this._oRowTop = iTop;
this._oRowBottom = iTop + this._oRow.offHeight;
}
},
//设置新table位置属性
SetPos: function(pos) {
//设置pos
this._pos = Math.max(0, Math.min(1, isNaN(pos) ? this._pos : pos));
//获取位置
this._viewHeight = document.documentElement.clientHeight;
this._nTableViewTop = (this._viewHeight - this._nTableHeight) * this._pos;
this.Run;
},
//运行
Run: function {
(!this.Hide){
var top = this._doc.scrollTop, left = this._doc.scrollLeft
//原tr是否超过顶部和底部
,outViewTop = this._oRowTop < top, outViewBottom = this._oRowBottom > top + this._viewHeight;
//原tr超过视窗范围
(outViewTop || outViewBottom){
var viewTop = !this.Auto ? this._nTableViewTop
: (outViewTop ? 0 : (this._viewHeight - this._nTableHeight))//视窗top
,posTop = viewTop + top;//位置top
//在原table范围内
(posTop > this._oTableTop && posTop + this._nTableHeight < this._oTableBottom){
//定位
(isIE6){
this._style.top = posTop + "px";
this._style.left = this._oTableLeft + "px";
Timeout(Bind(this, this.SetSelect), 0);//iebug
}{
this._style.top = viewTop + "px";
this._style.left = this._oTableLeft - left + "px";
}
;
}
}
}
//隐藏
this._style.top = "-99999px";
isIE6 && this.ReSelect;
},
//设置select集合
SetSelect: function {
this.ReSelect;
var rect = this._nTable.getBoundingClientRect;
//把需要隐藏放到_selects集合
this._selects = Filter(this._oTable.getElementsByTagName("select"), Bind(this, function(o){
var r = o.getBoundingClientRect;
(r.top <= rect.bottom && r.bottom >= rect.top){
o._count ? o._count : (o._count = 1);//防止多个例子冲突
//设置隐藏
var visi = o.style.visibility;
(visi != "hidden"){ o._css = visi; o.style.visibility = "hidden"; }

true;
}
}))
},
//恢复select样式
ReSelect: function {
forEach(this._selects, function(o){ !--o._count && (o.style.visibility = o._css); });
this._selects = ;
}
};
[查看PDF电子文档]

函数式编程:函数式编程(javascirpt)

2009-08-16

Javascript有人称其为C+LISP,C只怕是尽人皆知但是直活跃在人工智能领域另个古老而优美语言LISP掌握恐怕不是很多.这个倒不是这个语言太难或者用途不广泛而是大多数人在接受计算机语言启蒙时候都走是图灵机模式而LISP做为种式编程语言是另个体系:lambda演算体系.这个体系运算能力跟图灵机运算能力是相当

所以Javascript本身是种很自由支持式编程个神奇语言在WEB中应用只是它以个小小部分脚本可以用来脚本化很多东西最主要应用是在UI层面很灵活(这也是Javascript用来脚本化HTML个重要原因)我们这里要说是个100%java实现 javascript引擎rhino当然重点不是引擎本身而是在其上解释JavaScript式编程(rhino可以在此处 http://www.mozilla.org/rhino/找到)

式编程概览
我们先看几个例子从感官上对其有个了解看个幂计算用命令式语言书写(命令式语言如CJava等)大概就是下面这个样子:

function expt(b, n){
(n 0){ 1;}
{
expt(b, n-1)*b;//正常递归
}
}

再看看式编程写法:

function expt(b, n){
(n 0){
1;
}{
mul(expt(b, dec(n)), b);//所有操作均为
}
}

可以很明显看到有大堆括号没有操作符(如+-*/等)这是操作符在式编程中被认为是和其他(数学串处理等)地位是同等当然这个不是最主要在式编程中最主要是可以做为个基本类型被返回这点时命令式语言无法完成

比如定义个输入两个参数计算这两个数平方和:

function(x, y){ add( expt(x, 2), expt(y, 2) ); }
你可以将这个赋值给个变量如下:

var func = function(x, y){ add( expt(x, 2), expt(y, 2) ); }

然后最神奇是下边这样:

func(3, 4);//这个表达式将返回25! 此时func已经是个了!

好了简单概述就此为止下面我们看些更高级主题:高阶

高阶
事实上所有有关式编程文章必须要涉及到这个主题这是在命令式语言中我们抽象是根据"类"(这正是现在流行OO基本思想)来进行但是在式编程中没有办法表示类概念但是同样可以进行高级抽象方式使得个更加泛化可以被"例子化"成其他这个就是高阶

来看个例子我们有这样几种求和运算:

function Sum(a, b){
function inc(x){ x + 1; }
function identity(x){ x; }

(a > b){
0;
}{
Sum(inc(a) , b) + identity(a);
}
}

function cubeSum(a, b){
function inc(x){ x + 1; }
function cube(x){ x * x * x; }
(a > b){
0;
}{
cubeSum(inc(a) , b) + cube(a);
}
}

function piSum(a, b){
function piTerm(x){ 1/((x+2)*x); }
function piNext(x){ x+4; }

(a > b){
0;
}{
piSum(piNext(a) , b) + piTerm(a);
}
}

第个用来计算从a-b数总和步长为1第 2个计算a-b立方和步长为1第 3个计算a-b个方程和(将a-b中每个数带入此方程进行计算)步长为4.

从形式以及作用来看这 3个有很大共性所以我们考虑是否可以将这些共性抽取出来将每次计算步长和方程传入进行求和计算？？答案当然是肯定下面我们来抽象:

定义下个参和计算数(通过步长定义)
定义求什么和(体定义)
有了这两个我们就可以计算任意方程指定区间求和操作将上述两个做为参数传入输出即为运算结果:

function sum(term, a, next, b){
(a > b){
0;
}{
sum(term, next(a), next, b)+term(a);
}
}
这个需要 4个参数个是有关计算子定义term,个是步长next,另外两个即为区间两个端点a,b这样我们可以重新定义上述 3个如下:

function Sum(a, b){
function inc(x){ x + 1;}
function identity(x){ x;}

sum(identity, a, inc, b);//通用抽象接口
}

function cubeSum(a, b){
function inc(x){ x + 1;}
function cube(x){ x * x * x;}

sum(cube, a, inc, b);//通用抽象接口
}

function piSum(a, b){
function piTerm(x){ 1/((x+2)*x); }
function piNext(x){ x+4; }

sum(piTerm, a, piNext, b);//通用抽象接口
}

高阶提供了更高级抽象从而使得结构更加清晰下面我们再看看式语言优雅代码匿名:

匿名
我们先对些简单操作进行简单包装(如 4则运算boolean运算等操作):

function abs(x){ x>0?x:-x;}
function add(a, b){ a+b; }
function sub(a, b){ a-b; }
function mul(a, b){ a*b; }
function div(a, b){ a/b; }
function rem(a, b){ a%b; }
function inc(x){ x + 1; }
function dec(x){ x - 1; }
function equal(a, b){ ab; }
function great(a, b){ a>b; }
function less(a, b){ afunction negative(x){ x<0; }
function positive(x){ x>0; }
然后在这些共用语法糖(并非严格意义上语法糖但是它们确是!)基础上做些简单定义:

// n*(n-1)*(n-2)*...*3*2*1
function factorial(n){
(equal(n, 1)){
1;
}{
mul(n, factorial(dec(n)));
}
}

//对上边另种定义方式
/*
* product <- counter * product
* counter <- counter + 1
* */
function factorial(n){
function fact_iter(product, counter, max){
(counter > max){
product;
}{
fact_iter(mul(counter, product), inc(counter), max);
}
}

fact_iter(1, 1, n);
}

function expt(b, n){
(n 0){
1;
}{
mul(expt(b, dec(n)), b);
}
}

function gcd(a, b){
(b 0){
a;
}{
gcd(b, rem(a, b));
}
}

function search(fx, neg, pos){
function closeEnough(x, y){ less( abs( sub(x, y) ), 0.001)};
var mid = (function(x, y){ div( add(x, y), 2);})(neg, pos);
(closeEnough(neg, pos)){
mid;
}{
var test = fx(mid);
(positive(test)){
search(fx, neg, mid);
} (negative(test)){
search(fx, mid, pos);
}{
mid;
}
}
}

function halfIntervalMethod(fx, a, b){
var av = fx(a);
var bv = fx(b);

(negative(av) && positive(bv)){
search(fx, a, b);
} (negative(bv) && positive(av)){
search(fx, b, a);
}{
pr("error happend!!");
}
}

//计算个不动点
function fixedPo(fx, first){
var tolerance = 0.00001;
function closeEnough(x, y){ less( abs( sub(x, y) ), tolerance)};
function Try(guess){
var next = fx(guess);
//pr(next+" "+guess);
(closeEnough(guess, next)){
next;
}{
Try(next);
}
};
Try(first);
}

// magic function sqrt, a little hard to read, hah?
function sqrt(x){
fixedPo(
function(y){
function(a, b){ div(add(a, b), 2);}(y, div(x, y));
},
1.0);
}

如果上边几个都可以完全理解那么常识看看最下面这个计算个平方根sqrt(x)你会发现这个很有意思其中那个匿名最有意思我写了个测试:

function funcsTester{
　　//计算两个数平方和匿名
var y = (function(x, y){ add( expt(x, 2), expt(y, 2) ); })(3, 4);
pr(y);
pr(halfIntervalMethod(sin, 2.0, 4.0));
pr(halfIntervalMethod(function(x){ expt(x, 3) - mul(2, x) - 3;}, 1.0, 2.0));//x^3-2x-3
pr(fixedPo(cos, 1.0));//cos不动点
pr(fixedPo(function(x){ add( sin(x), cos(x)); }, 1.0));
pr(sqrt(100));
}
运行结果如下:

js> funcsTester
25
3.14111328125
1.89306640625
0.7390822985224024
1.2587315962971173
10
js>
好了有关式编程就大概介绍到这里下面简单说说这个rhino包

有关Rhino

rhino是个纯javajavascript引擎实现下载的后将js.jar加入path,然后在命令行中输入:

java org.mozilla.javascript.tools.shell.Main

即可启动可以使用load(path/of/script)来加载加载完成后即可使用脚本中定义非常方便当然DOM中切是不能用比如alert什么但是javascript不只是用来脚本化WEB页面可以使用pr进行打印使用quit退出等下面做个有关rhino例子:

user = {
name:"abruzzi",
password:"123456",
address:{
zip:"612345",
street:"west HuangQuan road"
},
getName: function{ this.name;},
getPassword: function{ this.password;},
getAddress: function{ this.address.zip+"\n"+this.address.street;}
}

$ java org.mozilla.javascript.tools.shell.Main
Rhino 1.7 release 2 2009 03 22
js> load('~/development/myLib/HighOrderFunc/json.js')
js> user
[object Object]
js> user.getName
abruzzi
js> user.getPassword
123456
js> user.getAddress
612345
west HuangQuan road
js>

在rhino发行包中有些特别有趣例子大家不妨自己动手做下看看效果同时体会下式编程优美介绍
[查看PDF电子文档]

嵌入式图表:25 个在 Web 中嵌入图表的免费资源

2009-08-16

在 Web 中嵌入图形图表技术越来越丰富我们可以选择 JavaScript 库CSSFlashSilverlightPHP 库服务器端组件也可以选择 Google Chart API 这样 Web 服务本文介绍了25个在 Web 中嵌入图形图表免费资源

JS Charts (基于 JavaScript 图表生成工具)

Protovis (可视化 javaScript 图表生成工具)

Visire (基于 Silverlight 和 WPF 开源图表组件)

pChart (PHP图表类库框架)

Ejschart (Javascript)

XML/SWF Charts

Chronoscope (开源)

Open Flash Chart 2

FusionCharts Free

JFreeChart (flash)

Flare (Flash ActionScript 库)

Google Chart API

Google Chart Generator

Timeplot (基于 DHTML AJAX 饰件)

CSS Chart Generator (基于 CSS 即时 Web 图表生成)

YUI Library

PlotKit (JavaScript 图表库)

Flotr (基于 Prototype框架图表类库)

Rapha?l (JavaScript library)

Protochart (开源类库基于 Prototype 和 Canvas)

s" style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px" height="245" alt="pos" src="http://www.crazycoder.cn/WebFiles/20098/4c8bcca2-a486-4fa4-bb9e-c962db33582d.jpg" width="420" />

Bluff (Rubby 下 Gruff 图表类库 JavaScript 移植)

Pure Css Line Graph (纯粹基于 CSS 线形图)

Pure Css Data Chart

CSS Stacked Bar Graphs

Illustrator tutorial

[查看PDF电子文档]

javascript滚动条:不通过JavaScript实现的自动滚动视差效果

2009-08-16

这篇文章介绍了种通过CSS3实现视差(Parallax)效果这个效果通过在个元素上叠加多个背景图片并使用-webkit-transition-属性来实现这个效果是仿照Chirs Coyier视差教程实现经过Chirs允许使用了其中星空背景

运行效果:
在这里观看:http://www.fofronline.com/experiments/parallax/#experiment
该效果可以在Safari 4 Beta和Google Chrome中正常预览实现该效果无需JavaScript
(但是在IE7及以下版本中无法观看)

实现思路方法:
这个页面HTML代码非常简单通过个div来定义背景另个div来定义内容这里使用了CSS3中多重背景技术所以需要另外标记来表示其它背景图片

将CSS背景容器设置在个固定位置并通过top、left、bottom和righ属性让它占据页面底部背景图片通过background属性来指定最先指定就是最顶层背景每幅图片都按照百分比进行定位而且它们位置各不相同这样当容器尺寸改变时候各个图像就会发生移动从而产生视差效果

按照通常想法只有当页面被缩放时候或使用JavaScript来控制时候才能产生动画效果这里使用另外种思路方法通过让背景图容器左边沿进行移动(比如从0px到100px)这就会使容器整体宽度变化从而使背景图片根据它们百分比发生区别程度移动通过将时间长度和左侧位置设置足够大就会产生连续视差移动效果

可以将移动速度增大来获得更有趣效果另外还可以添加些鼠标动做最终CSS代码如下:

小资料:视差效果原本是个天文学术语当我们观察星空时离我们远星星移动速度较慢离我们近星星移动速度则较快当我们坐在车上向车窗外看时也会有这样感觉远处群山似乎没有在动而近处稻田却在飞速掠过许多游戏中都使用视差效果来增加场景立体感

[查看PDF电子文档]

超级作用域:再探Javascript词法作用域

2009-08-16

写在前面话:每个人都会犯错——有时候‘孰能无过过而能改善莫大焉’有时候知道自己错了却没有机会更改其实错了并不仅仅是错了做错了除了及时改正和弥补的外最重要是为自己犯错承担所有责任

2009年3月14日我去参加网易互动专场招聘会应聘网页工程师职位有幸参加笔试然后有幸栽在笔试呵呵废话少说抓出音响极深题重新研究研究

题目大概是:写出如下代码输出结果并进行分析

var tt = 'aa';
function test{
alert(tt);
var tt = 'dd';
alert(tt);
}
test;
“太简单了！”这是我当时看到这个题目是第想法于是轻率答题竟成我致命的伤我答案是——aa和dd解析:第次输出全局变量结果然后局部变量tt覆盖全局变量所引用值所以第 2次输出结果是dd

任何人见我如此作答都会认为我是在扫盲——想法及其幼稚(我也这么认为)！

网易啊如何可能会满意于这种答案！

正确答案应该是:und和dd

为什么第次alert结果是und呢？要解释得清楚明白需要用到Javascript词法作用域

Javascript中“在定义它们作用域里运行而不是在执行它们作用域里运行”这是权威指南里抽象而精辟整理总结

Javascript逻辑默认在个全局作用域中执行如以上段中“var tt='aa';”就是定义个全局作用域全局变量(如果以上代码段不是摘自某个链话)而test内部逻辑必须在原有作用域(全局作用域)链再添加test本身作用域(局部性)——这些思想几乎在每种语言中都是如此定义然而Javascript作用域链特别的处在于内部能够嵌套定义(这是闭包基础注:在JS中是唯形式代码作用域)

嵌套内部可以外部(被嵌套)变量和其他嵌套(是种数据)如果是在外部内嵌套那么对象不变当外部执行完毕后所有数据(包括外部和嵌套内部)都将被垃圾回收机制收集——这点还不能体现出‘闭包’精华有种情况就是Javascript允许外部嵌套内部即使被嵌套已经被‘垃圾收集’——最常见就是在‘某个’中用其嵌套内部定义某些元素响应事件页面载入时候被嵌套(‘某个’)已经执行完毕(被垃圾回收)但当事件触发时候仍然会有响应动作而且响应中还可能到在被嵌套(‘某个’)中定义变量最终值(不是被垃圾回收了吗？)

有关闭包知识和举例有很多资料可供查询我不想叙述

本文重点是以下非常重要细节:

对象位于作用域链前端局部变量(在内部用var声明变量)、参数及Arguments对象都在内作用域中——这意味着它们隐藏了作用域链更上层任何同名属性

即在以上片段中test内部“var tt='dd'”将会致使“var tt='aa'”在test被时完全被隐藏而且tt是在第个alert语句的后定义所以在到第个alert时tt是还没有被赋值这样说可能会清楚点即在定义test时当定义第个alert(tt)时这里会记录tt是作用域链中个变量但不会记录它(tt)值定义完毕后tt就添加到作用域里所以第个alert语句能够找到该作用域里tt(即相当于找到个已经在内部声明但未被赋值tt)

以上片段执行结果和以下片段结果相同:

var tt = 'aa';
function test{
var tt;
alert(tt);
tt = 'dd';
alert(tt);
}
test;
Javascript作用域不可简单用C等语言思维来理解啊！C在的前必须先声明或定义而Javascript没必要在Javascript中可以先后再定义(不用在的前作任何声明)在时Javascript是向作用域链要定义(在定义它们作用域里运行而不是在执行它们作用域里运行)

如以上代码写成:

var tt = 'aa';
test; //先后再定义
function test{
alert(tt); //und
var tt = 'dd';
alert(tt); //dd
}
以上代码片段虽然能够得到相同结果但最好不要那样写啦习惯不好代码不好维护

重申下本文重点:

在定义它们作用域里运行而不是在执行它们作用域里运行

对象位于作用域链前端局部变量(在内部用var声明变量)、参数及Arguments对象都在内作用域中——这意味着它们隐藏了作用域链更上层任何同名属性 [查看PDF电子文档]

javascriptjava:Java(JavaScript)判断处理时间的问题

2009-08-16

这里主要是由于求月份差,年份差,甚至需要求天及其以下差,(天及其下,就用getTime思路方法就可以直接搞定了,然后就是时间计算,比如getTime/1000/60/60/24的类就是求秒,分,小时,天,)

说下需求,起始是为了数据库查询方便,日志表是天个,或者多天个,所以这里就需要统计表名,这里就举个月表来做例子了,也就是个月写个日志表.所以首先是确定表.然后查数据,也许是自己经验太少.在后台些Java处理时候,不太了解Oracle是否有更好思路方法来进行处理,所以就用了这个笨办法.直接查表,其中知道表是最主要,以下就先来知道表吧.

可能这次写还不是很全,说是有月年天,但是可能包含不是那么全,但是包含了月份处理,其实都是集成了好多人用过内容了,这里整理总结也不是很好,主要是工作当中不断改进,不断深入学习.

但是还是和大家分享下自己点点小经验吧,虽然就是些基本问题.呵呵!

以下是得到月份数,以两个时间参数来算.还有时间格式问题,这个根据自己需求定义吧,呵呵!(我就用下面了.)

view plaincopy to clipboardpr?
//时间处理,时间总月份数.
Date st = SimpleDateFormat("yyyy-MM-dd hh:mm:ss").parse(startTime);
Date et = SimpleDateFormat("yyyy-MM-dd hh:mm:ss").parse(endTime);

Calendar ca1 = Calendar.getInstance;
Calendar ca2 = Calendar.getInstance;
ca1.Time(st);
ca2.Time(et);

ca1Year = ca1.get(Calendar.YEAR);
ca1Month = ca1.get(Calendar.MONTH);

ca2Year = ca2.get(Calendar.YEAR);
ca2Month = ca2.get(Calendar.MONTH);
countMonth = 0;//这个是用来计算得到有多少个月时间个整数,
(ca1Yearca2Year){
countMonth = ca2Month - ca1Month;
}{
countMonth = (ca2Year - ca1Year)*12 + (ca2Month - ca1Month);
}
//这里年数,相应就知道了吧,呵呵,直接相减就可以得到了,呵呵,写得还算规整,所以应该能够看得懂.
//时间处理,时间总月份数.
Date st = SimpleDateFormat("yyyy-MM-dd hh:mm:ss").parse(startTime);
Date et = SimpleDateFormat("yyyy-MM-dd hh:mm:ss").parse(endTime);

Calendar ca1 = Calendar.getInstance;
Calendar ca2 = Calendar.getInstance;
ca1.Time(st);
ca2.Time(et);

ca1Year = ca1.get(Calendar.YEAR);
ca1Month = ca1.get(Calendar.MONTH);

ca2Year = ca2.get(Calendar.YEAR);
ca2Month = ca2.get(Calendar.MONTH);
countMonth = 0;//这个是用来计算得到有多少个月时间个整数,
(ca1Yearca2Year){
countMonth = ca2Month - ca1Month;
}{
countMonth = (ca2Year - ca1Year)*12 + (ca2Month - ca1Month);
}
//这里年数,相应就知道了吧,呵呵,直接相减就可以得到了,呵呵,写得还算规整,所以应该能够看得懂.

得到了月份数,其次是处理.
这里以 countMonth 来计算有几个月.

view plaincopy to clipboardpr?
//然后处理得到时间表.
//设置表名
//循环来得到多少个月,
for( count = 0;count<=countMonth;count){
String tblAfter = DateAdd(count,startTime);
//.out.prln("----->月份是:"+tblAfter);
String stTime = "USER_OPER_LOG" + tblAfter;
(checkTblName(stTime)){
(count0){

} (countcountMonth){

}{

}
}
}
//用个思路方法来处理得到月份.
public String DateAdd( count,String startTime){
String Str = "";
try{
Calendar ca = Calendar.getInstance;
Date date = SimpleDateFormat("yyyy-MM-dd hh:mm:ss").parse(startTime);
ca.Time(date);
ca.add(Calendar.MONTH, count);
month = ca.get(Calendar.MONTH)+1;
(month<10){
Str = String.valueOf(ca.get(Calendar.YEAR))+"0"+String.valueOf(month);
}{
Str = String.valueOf(ca.get(Calendar.YEAR))+String.valueOf(month);
}

}catch(Exception e){
.out.prln("设置表名思路方法异常:"+e.getMessage);
}
Str;
}
//然后处理得到时间表.
//设置表名
//循环来得到多少个月,
for( count = 0;count<=countMonth;count){
String tblAfter = DateAdd(count,startTime);
//.out.prln("----->月份是:"+tblAfter);
String stTime = "USER_OPER_LOG" + tblAfter;
(checkTblName(stTime)){
(count0){

} (countcountMonth){

}{

}
}
}
//用个思路方法来处理得到月份.
public String DateAdd( count,String startTime){
String Str = "";
try{
Calendar ca = Calendar.getInstance;
Date date = SimpleDateFormat("yyyy-MM-dd hh:mm:ss").parse(startTime);
ca.Time(date);
ca.add(Calendar.MONTH, count);
month = ca.get(Calendar.MONTH)+1;
(month<10){
Str = String.valueOf(ca.get(Calendar.YEAR))+"0"+String.valueOf(month);
}{
Str = String.valueOf(ca.get(Calendar.YEAR))+String.valueOf(month);
}

}catch(Exception e){
.out.prln("设置表名思路方法异常:"+e.getMessage);
}
Str;
}

到这里其实就差不多了,时间得到了,表也得到了,然后就是处理数据,查询语句而已了.

起始JavaScript也跟Java这个差不多,都是大同小异而已,虽然就是很简单体力活.呵呵,希望对有人有帮助.

暂时只能写这么多了,也许这两天比较忙,所以就瞎乱写了下,等有时间处理吧,说说而已,呵呵! [查看PDF电子文档]

javascript函数:JavaScript几个和Class有关的封装函数

2009-08-16

JavaScript几个和Class有关封装_Javascript教程_www.knowsky.com 加入收藏 | RSS订阅
Copyright © 2000-2009 www.knowsky.com All rights reserved | 沪ICP备05001343号

" alt="ホームページ制作" border="0" /> " alt="不動産検索システム" border="0" /> " alt="求人情報" border="0" />

" alt="アクセサリー　通販" border="0"> " alt="フットサル大会" border="0"> " alt="探偵" border="0">

" alt="SEO対策" style="border:0;" border="0"> " alt="コーチ" style="border:0;" border="0"> " alt="ホームページ作成" style="border:0;" border="0">

" alt="過払い請求" border="0"> " alt="現金化" border="0"> " alt="債務整理" border="0"> " alt="現金化" border="0">

[查看PDF电子文档]

javascript拖动:JavaScript 拖动布局dragFix

2009-08-16

JavaScript 拖动布局dragFix_Javascript教程_www.knowsky.com 加入收藏 | RSS订阅
Copyright © 2000-2009 www.knowsky.com All rights reserved | 沪ICP备05001343号

" alt="ホームページ制作" border="0" /> " alt="不動産検索システム" border="0" /> " alt="求人情報" border="0" />

" alt="アクセサリー　通販" border="0"> " alt="フットサル大会" border="0"> " alt="探偵" border="0">

" alt="SEO対策" style="border:0;" border="0"> " alt="コーチ" style="border:0;" border="0"> " alt="ホームページ作成" style="border:0;" border="0">

" alt="過払い請求" border="0"> " alt="現金化" border="0"> " alt="債務整理" border="0"> " alt="現金化" border="0">

[查看PDF电子文档]

jquerydiv:jQuery Div层在页面内默认绝对居中

2009-08-16

jQuery Div层在页面内默认绝对居中_Javascript教程_www.knowsky.com 加入收藏 | RSS订阅
Copyright © 2000-2009 www.knowsky.com All rights reserved | 沪ICP备05001343号

" alt="ホームページ制作" border="0" /> " alt="不動産検索システム" border="0" /> " alt="求人情報" border="0" />

" alt="アクセサリー　通販" border="0"> " alt="フットサル大会" border="0"> " alt="探偵" border="0">

" alt="SEO対策" style="border:0;" border="0"> " alt="コーチ" style="border:0;" border="0"> " alt="ホームページ作成" style="border:0;" border="0">

" alt="過払い請求" border="0"> " alt="現金化" border="0"> " alt="債務整理" border="0"> " alt="現金化" border="0">

[查看PDF电子文档]

jqueryajax:JavaScript 一个小的 jquery ajax封装

2009-08-16

JavaScript 个小 jquery ajax封装_Javascript教程_www.knowsky.com 加入收藏 | RSS订阅
Copyright © 2000-2009 www.knowsky.com All rights reserved | 沪ICP备05001343号

" alt="ホームページ制作" border="0" /> " alt="不動産検索システム" border="0" /> " alt="求人情報" border="0" />

" alt="アクセサリー　通販" border="0"> " alt="フットサル大会" border="0"> " alt="探偵" border="0">

" alt="SEO対策" style="border:0;" border="0"> " alt="コーチ" style="border:0;" border="0"> " alt="ホームページ作成" style="border:0;" border="0">

" alt="過払い請求" border="0"> " alt="現金化" border="0"> " alt="債務整理" border="0"> " alt="現金化" border="0">

[查看PDF电子文档]

javascript浮动窗口:JavaScript 浮动广告类

2009-08-16

JavaScript 浮动广告类_Javascript教程_www.knowsky.com 加入收藏 | RSS订阅
Copyright © 2000-2009 www.knowsky.com All rights reserved | 沪ICP备05001343号

" alt="ホームページ制作" border="0" /> " alt="不動産検索システム" border="0" /> " alt="求人情報" border="0" />

" alt="アクセサリー　通販" border="0"> " alt="フットサル大会" border="0"> " alt="探偵" border="0">

" alt="SEO対策" style="border:0;" border="0"> " alt="コーチ" style="border:0;" border="0"> " alt="ホームページ作成" style="border:0;" border="0">

" alt="過払い請求" border="0"> " alt="現金化" border="0"> " alt="債務整理" border="0"> " alt="現金化" border="0">

[查看PDF电子文档]

javascript刷新页面:Javascript 刷新页面的几种思路方法

2009-08-16

Javascript 刷新页面几种思路方法_Javascript教程_www.knowsky.com 加入收藏 | RSS订阅
Copyright © 2000-2009 www.knowsky.com All rights reserved | 沪ICP备05001343号

" alt="ホームページ制作" border="0" /> " alt="不動産検索システム" border="0" /> " alt="求人情報" border="0" />

" alt="アクセサリー　通販" border="0"> " alt="フットサル大会" border="0"> " alt="探偵" border="0">

" alt="SEO対策" style="border:0;" border="0"> " alt="コーチ" style="border:0;" border="0"> " alt="ホームページ作成" style="border:0;" border="0">

" alt="過払い請求" border="0"> " alt="現金化" border="0"> " alt="債務整理" border="0"> " alt="現金化" border="0">

[查看PDF电子文档]

javascriptwindow:JavaScript如何给window.setInterval的函数传递参数

2009-08-16

JavaScript如何给window.Interval传递参数_Javascript教程_www.knowsky.com 加入收藏 | RSS订阅
Copyright © 2000-2009 www.knowsky.com All rights reserved | 沪ICP备05001343号

" alt="ホームページ制作" border="0" /> " alt="不動産検索システム" border="0" /> " alt="求人情報" border="0" />

" alt="アクセサリー　通販" border="0"> " alt="フットサル大会" border="0"> " alt="探偵" border="0">

" alt="SEO対策" style="border:0;" border="0"> " alt="コーチ" style="border:0;" border="0"> " alt="ホームページ作成" style="border:0;" border="0">

" alt="過払い請求" border="0"> " alt="現金化" border="0"> " alt="債務整理" border="0"> " alt="現金化" border="0">

[查看PDF电子文档]

jquerydom:JavaScript和jQuery的DOM操作

2009-08-16

JavaScript和jQueryDOM操作_Javascript教程_www.knowsky.com 加入收藏 | RSS订阅
Copyright © 2000-2009 www.knowsky.com All rights reserved | 沪ICP备05001343号

" alt="ホームページ制作" border="0" /> " alt="不動産検索システム" border="0" /> " alt="求人情報" border="0" />

" alt="アクセサリー　通販" border="0"> " alt="フットサル大会" border="0"> " alt="探偵" border="0">

" alt="SEO対策" style="border:0;" border="0"> " alt="コーチ" style="border:0;" border="0"> " alt="ホームページ作成" style="border:0;" border="0">

" alt="過払い請求" border="0"> " alt="現金化" border="0"> " alt="債務整理" border="0"> " alt="現金化" border="0">

[查看PDF电子文档]

jquery:jQuery性能优化指南

2009-08-16

jQuery性能优化指南_Javascript教程_www.knowsky.com 加入收藏 | RSS订阅
Copyright © 2000-2009 www.knowsky.com All rights reserved | 沪ICP备05001343号

" alt="ホームページ制作" border="0" /> " alt="不動産検索システム" border="0" /> " alt="求人情報" border="0" />

" alt="アクセサリー　通販" border="0"> " alt="フットサル大会" border="0"> " alt="探偵" border="0">

" alt="SEO対策" style="border:0;" border="0"> " alt="コーチ" style="border:0;" border="0"> " alt="ホームページ作成" style="border:0;" border="0">

" alt="過払い請求" border="0"> " alt="現金化" border="0"> " alt="債務整理" border="0"> " alt="現金化" border="0">

[查看PDF电子文档]

javascript事件:javascript所有on事件集合

2009-08-16

javascript所有on事件集合_Javascript教程_www.knowsky.com 加入收藏 | RSS订阅
Copyright © 2000-2009 www.knowsky.com All rights reserved | 沪ICP备05001343号

" alt="ホームページ制作" border="0" /> " alt="不動産検索システム" border="0" /> " alt="求人情報" border="0" />

" alt="アクセサリー　通販" border="0"> " alt="フットサル大会" border="0"> " alt="探偵" border="0">

" alt="SEO対策" style="border:0;" border="0"> " alt="コーチ" style="border:0;" border="0"> " alt="ホームページ作成" style="border:0;" border="0">

" alt="過払い請求" border="0"> " alt="現金化" border="0"> " alt="債務整理" border="0"> " alt="現金化" border="0">

[查看PDF电子文档]

javascriptvoid:JavaScript void(0) 和 #

2009-08-16

JavaScript void(0) 和 #_Javascript教程_www.knowsky.com 加入收藏 | RSS订阅
Copyright © 2000-2009 www.knowsky.com All rights reserved | 沪ICP备05001343号

" alt="ホームページ制作" border="0" /> " alt="不動産検索システム" border="0" /> " alt="求人情報" border="0" />

" alt="アクセサリー　通販" border="0"> " alt="フットサル大会" border="0"> " alt="探偵" border="0">

" alt="SEO対策" style="border:0;" border="0"> " alt="コーチ" style="border:0;" border="0"> " alt="ホームページ作成" style="border:0;" border="0">

" alt="過払い請求" border="0"> " alt="現金化" border="0"> " alt="債務整理" border="0"> " alt="現金化" border="0">

[查看PDF电子文档]

javascript转换函数:JavaScript将日期转换成中文格式的函数

2009-08-16

JavaScript将日期转换成中文格式_Javascript教程_www.knowsky.com 加入收藏 | RSS订阅
Copyright © 2000-2009 www.knowsky.com All rights reserved | 沪ICP备05001343号

" alt="ホームページ制作" border="0" /> " alt="不動産検索システム" border="0" /> " alt="求人情報" border="0" />

" alt="アクセサリー　通販" border="0"> " alt="フットサル大会" border="0"> " alt="探偵" border="0">

" alt="SEO対策" style="border:0;" border="0"> " alt="コーチ" style="border:0;" border="0"> " alt="ホームページ作成" style="border:0;" border="0">

" alt="過払い請求" border="0"> " alt="現金化" border="0"> " alt="債務整理" border="0"> " alt="現金化" border="0">

[查看PDF电子文档]

javascript创建表格:javascript代码创建表格类

2009-08-16

javascript代码创建表格类_Javascript教程_www.knowsky.com 加入收藏 | RSS订阅
Copyright © 2000-2009 www.knowsky.com All rights reserved | 沪ICP备05001343号

" alt="ホームページ制作" border="0" /> " alt="不動産検索システム" border="0" /> " alt="求人情報" border="0" />

" alt="アクセサリー　通販" border="0"> " alt="フットサル大会" border="0"> " alt="探偵" border="0">

" alt="SEO対策" style="border:0;" border="0"> " alt="コーチ" style="border:0;" border="0"> " alt="ホームページ作成" style="border:0;" border="0">

" alt="過払い請求" border="0"> " alt="現金化" border="0"> " alt="債務整理" border="0"> " alt="現金化" border="0">

[查看PDF电子文档]

googlemapapi:10分钟学会Google Map API ( 2)

2009-08-16

10分钟学会Google Map API ( 2)_Javascript教程_www.knowsky.com 加入收藏 | RSS订阅
Copyright © 2000-2009 www.knowsky.com All rights reserved | 沪ICP备05001343号

" alt="ホームページ制作" border="0" /> " alt="不動産検索システム" border="0" /> " alt="求人情報" border="0" />

" alt="アクセサリー　通販" border="0"> " alt="フットサル大会" border="0"> " alt="探偵" border="0">

" alt="SEO対策" style="border:0;" border="0"> " alt="コーチ" style="border:0;" border="0"> " alt="ホームページ作成" style="border:0;" border="0">

" alt="過払い請求" border="0"> " alt="現金化" border="0"> " alt="債務整理" border="0"> " alt="現金化" border="0">

[查看PDF电子文档]

googlemapapi:10分钟学会Google Map API (一)

2009-08-16

10分钟学会Google Map API ()_Javascript教程_www.knowsky.com 加入收藏 | RSS订阅
Copyright © 2000-2009 www.knowsky.com All rights reserved | 沪ICP备05001343号

" alt="ホームページ制作" border="0" /> " alt="不動産検索システム" border="0" /> " alt="求人情報" border="0" />

" alt="アクセサリー　通販" border="0"> " alt="フットサル大会" border="0"> " alt="探偵" border="0">

" alt="SEO対策" style="border:0;" border="0"> " alt="コーチ" style="border:0;" border="0"> " alt="ホームページ作成" style="border:0;" border="0">

" alt="過払い請求" border="0"> " alt="現金化" border="0"> " alt="債務整理" border="0"> " alt="現金化" border="0">

[查看PDF电子文档]

js等比例缩放图片:JS图片压缩–图片后加载后按比例缩放

2009-08-16

JS图片压缩–图片后加载后按比例缩放_Javascript教程_www.knowsky.com 加入收藏 | RSS订阅
Copyright © 2000-2009 www.knowsky.com All rights reserved | 沪ICP备05001343号

" alt="ホームページ制作" border="0" /> " alt="不動産検索システム" border="0" /> " alt="求人情報" border="0" />

" alt="アクセサリー　通販" border="0"> " alt="フットサル大会" border="0"> " alt="探偵" border="0">

" alt="SEO対策" style="border:0;" border="0"> " alt="コーチ" style="border:0;" border="0"> " alt="ホームページ作成" style="border:0;" border="0">

" alt="過払い請求" border="0"> " alt="現金化" border="0"> " alt="債務整理" border="0"> " alt="現金化" border="0">

[查看PDF电子文档]

jsiefirefox:IE和Firefox浏览器JS的区别点

2009-08-16

IE和Firefox浏览器JS区别点_Javascript教程_www.knowsky.com 加入收藏 | RSS订阅
Copyright © 2000-2009 www.knowsky.com All rights reserved | 沪ICP备05001343号

" alt="ホームページ制作" border="0" /> " alt="不動産検索システム" border="0" /> " alt="求人情報" border="0" />

" alt="アクセサリー　通販" border="0"> " alt="フットサル大会" border="0"> " alt="探偵" border="0">

" alt="SEO対策" style="border:0;" border="0"> " alt="コーチ" style="border:0;" border="0"> " alt="ホームページ作成" style="border:0;" border="0">

" alt="過払い請求" border="0"> " alt="現金化" border="0"> " alt="債務整理" border="0"> " alt="現金化" border="0">

[查看PDF电子文档]

javascript日期:javascript 获得年月日时间星期日期

2009-08-16

javascript 获得年月日时间星期日期_Javascript教程_www.knowsky.com 加入收藏 | RSS订阅
Copyright © 2000-2009 www.knowsky.com All rights reserved | 沪ICP备05001343号

" alt="ホームページ制作" border="0" /> " alt="不動産検索システム" border="0" /> " alt="求人情報" border="0" />

" alt="アクセサリー　通販" border="0"> " alt="フットサル大会" border="0"> " alt="探偵" border="0">

" alt="SEO対策" style="border:0;" border="0"> " alt="コーチ" style="border:0;" border="0"> " alt="ホームページ作成" style="border:0;" border="0">

" alt="過払い請求" border="0"> " alt="現金化" border="0"> " alt="債務整理" border="0"> " alt="現金化" border="0">

[查看PDF电子文档]

css显示隐藏层:JS、CSS 简单的控制层的现实和隐藏

2009-08-16

JS、CSS 简单控制层现实和隐藏_Javascript教程_www.knowsky.com 加入收藏 | RSS订阅
Copyright © 2000-2009 www.knowsky.com All rights reserved | 沪ICP备05001343号

" alt="ホームページ制作" border="0" /> " alt="不動産検索システム" border="0" /> " alt="求人情報" border="0" />

" alt="アクセサリー　通販" border="0"> " alt="フットサル大会" border="0"> " alt="探偵" border="0">

" alt="SEO対策" style="border:0;" border="0"> " alt="コーチ" style="border:0;" border="0"> " alt="ホームページ作成" style="border:0;" border="0">

" alt="過払い請求" border="0"> " alt="現金化" border="0"> " alt="債務整理" border="0"> " alt="現金化" border="0">

[查看PDF电子文档]

js解密:js代码解密

2009-08-16

js代码解密_Javascript教程_www.knowsky.com 加入收藏 | RSS订阅
Copyright © 2000-2009 www.knowsky.com All rights reserved | 沪ICP备05001343号

" alt="ホームページ制作" border="0" /> " alt="不動産検索システム" border="0" /> " alt="求人情報" border="0" />

" alt="アクセサリー　通販" border="0"> " alt="フットサル大会" border="0"> " alt="探偵" border="0">

" alt="SEO対策" style="border:0;" border="0"> " alt="コーチ" style="border:0;" border="0"> " alt="ホームページ作成" style="border:0;" border="0">

" alt="過払い請求" border="0"> " alt="現金化" border="0"> " alt="債務整理" border="0"> " alt="現金化" border="0">

[查看PDF电子文档]

正则表达式详解:JS的正则表达式详解

2009-08-16

JS正则表达式详解_Javascript教程_www.knowsky.com 加入收藏 | RSS订阅
Copyright © 2000-2009 www.knowsky.com All rights reserved | 沪ICP备05001343号

" alt="ホームページ制作" border="0" /> " alt="不動産検索システム" border="0" /> " alt="求人情報" border="0" />

" alt="アクセサリー　通販" border="0"> " alt="フットサル大会" border="0"> " alt="探偵" border="0">

" alt="SEO対策" style="border:0;" border="0"> " alt="コーチ" style="border:0;" border="0"> " alt="ホームページ作成" style="border:0;" border="0">

" alt="過払い請求" border="0"> " alt="現金化" border="0"> " alt="債務整理" border="0"> " alt="現金化" border="0">

[查看PDF电子文档]

javascriptregexp:JavaScript replace new RegExp

2009-08-16

JavaScript replace RegExp_Javascript教程_www.knowsky.com 加入收藏 | RSS订阅
Copyright © 2000-2009 www.knowsky.com All rights reserved | 沪ICP备05001343号

" alt="ホームページ制作" border="0" /> " alt="不動産検索システム" border="0" /> " alt="求人情報" border="0" />

" alt="アクセサリー　通販" border="0"> " alt="フットサル大会" border="0"> " alt="探偵" border="0">

" alt="SEO対策" style="border:0;" border="0"> " alt="コーチ" style="border:0;" border="0"> " alt="ホームページ作成" style="border:0;" border="0">

" alt="過払い請求" border="0"> " alt="現金化" border="0"> " alt="債務整理" border="0"> " alt="現金化" border="0">

[查看PDF电子文档]

javascriptcss:javascript+css一张背景图片的区别切换

2009-08-16

javascript+css张背景图片区别切换_Javascript教程_www.knowsky.com 加入收藏 | RSS订阅
Copyright © 2000-2009 www.knowsky.com All rights reserved | 沪ICP备05001343号

" alt="ホームページ制作" border="0" /> " alt="不動産検索システム" border="0" /> " alt="求人情報" border="0" />

" alt="アクセサリー　通販" border="0"> " alt="フットサル大会" border="0"> " alt="探偵" border="0">

" alt="SEO対策" style="border:0;" border="0"> " alt="コーチ" style="border:0;" border="0"> " alt="ホームページ作成" style="border:0;" border="0">

" alt="過払い請求" border="0"> " alt="現金化" border="0"> " alt="債務整理" border="0"> " alt="現金化" border="0">

[查看PDF电子文档]

Javascript教程

javascripthtml:javascript处理HTML元素必须避免使用的一种思路方法

iefirefox兼容性:Javascript的IE和Firefox兼容性汇编

javascript弹出窗口:javascript弹出窗口问题整理总结

javascript类设计:JavaScript 写 Log 类的具体实现

javascript解密:Javascript和C#真正可以交互的DES加解密代码

javascript图片播放:javascript 控制图片播放代码

javascript级联:动态生成javascript代码 下拉条的级联效果

javascriptdate:Javascript 日期对象Date扩展

javascript浏览器:JavaScript引擎的性能是影响浏览器速度的关键原因

javascript方法:javascript 思路方法一些使用思路方法

javascript客户端:javascript实现了客户端页面的表格排序

javascripttable:JavaScript Table行定位效果

函数式编程:函数式编程(javascirpt)

嵌入式图表:25 个在 Web 中嵌入图表的免费资源

JS Charts (基于 JavaScript 图表生成工具)

Protovis (可视化 javaScript 图表生成工具)

Visire (基于 Silverlight 和 WPF 开源图表组件)

pChart (PHP图表类库框架)

Ejschart (Javascript)

XML/SWF Charts

Chronoscope (开源)

Open Flash Chart 2

FusionCharts Free

JFreeChart (flash)

Flare (Flash ActionScript 库)

Google Chart API

Google Chart Generator

Timeplot (基于 DHTML AJAX 饰件)

CSS Chart Generator (基于 CSS 即时 Web 图表生成)

YUI Library

PlotKit (JavaScript 图表库)

Flotr (基于 Prototype框架图表类库)

Rapha?l (JavaScript library)

Protochart (开源类库基于 Prototype 和 Canvas)

Bluff (Rubby 下 Gruff 图表类库 JavaScript 移植)

Pure Css Line Graph (纯粹基于 CSS 线形图)

Pure Css Data Chart

CSS Stacked Bar Graphs

Illustrator tutorial

javascript滚动条:不通过JavaScript实现的自动滚动视差效果

超级作用域:再探Javascript词法作用域

javascriptjava:Java(JavaScript)判断处理时间的问题

javascript函数:JavaScript几个和Class有关的封装函数

javascript拖动:JavaScript 拖动布局dragFix

jquerydiv:jQuery Div层在页面内默认绝对居中

jqueryajax:JavaScript 一个小的 jquery ajax封装

javascript浮动窗口:JavaScript 浮动广告类

javascript刷新页面:Javascript 刷新页面的几种思路方法

javascriptwindow:JavaScript如何给window.setInterval的函数传递参数

jquerydom:JavaScript和jQuery的DOM操作

jquery:jQuery性能优化指南

javascript事件:javascript所有on事件集合

javascriptvoid:JavaScript void(0) 和 #

javascript转换函数:JavaScript将日期转换成中文格式的函数

javascript创建表格:javascript代码创建表格类

googlemapapi:10分钟学会Google Map API ( 2)

googlemapapi:10分钟学会Google Map API (一)

js等比例缩放图片:JS图片压缩–图片后加载后按比例缩放

jsiefirefox:IE和Firefox浏览器JS的区别点

javascript日期:javascript 获得 年月日时间 星期 日期

css显示隐藏层:JS、CSS 简单的控制层的现实和隐藏

js解密:js代码解密

正则表达式详解:JS的正则表达式详解

javascriptregexp:JavaScript replace new RegExp

javascriptcss:javascript+css一张背景图片的区别切换

javascript级联:动态生成javascript代码下拉条的级联效果

javascript日期:javascript 获得年月日时间星期日期