JavaScript在线教程

知识博客专集

用 JavaScript 迁移目录


这两天用虚拟机安装系统,准备用虚拟机把开发环境和数据库分离,想法如下:
      1.开发环境为host
      2.guest 为数据库服务器,每一个服务器都是一个独立的虚拟机
       数据库包括,oracle 9i、sql server 2005、mysql

   但是装系统,还要设置环境变量,以减少系统盘的占用和增加性能,这就需要迁移系统盘的一些目录了,比如ie临时目录,临时文件夹,applocation data;此外,我们还需要把重要的文件夹移动到其他分区,以避免在系统盘发生事故或者想要恢复的时候,重要数据(mydocument,收藏夹,程序配置等)不受影响。
   手动修改环境变量和注册表值太麻烦了,因为我每次装系统都要修改那么一次,这次实在受够了,心里一发狠。好,我写个脚本把你搞定!
   bat是不能设置系统环境变量的,此外可用的就有 vbscript 和 jscript 了;vbscript 的好处是有对话框,jscript没有(alert等只能在网页中使用),而jscript 的代码条理清晰一些,并且功能强大,可以使用正则表达式等功能。
   于是乎,写了下面的脚本,各位大虾请看代码:

 

  1//********************************************************************
  2// copymiddle 2006 zealic,all middle keeped.
  3//********************************************************************
  4//** 环境变量名
  5//** 设置环境变量名,这些值影响环境变量的名字,建议不要修改
  6
  7var vn_path        = \”path\”;
  8var vn_profile        = \”profile\”;
  9var vn_profile_user    = \”profile_user\”;
 10var vn_volatile_profile    = \”volatile_profile\”;
 11var vn_temp        = \”temp\”;
 12
 13
 14//********************************************************************
 15//** 设置
 16
 17var m_prefix        = \”guest_\”;
 18var m_username        = \”zealic\”;
 19var m_profile        = \”d:\\\\profile\”;
 20var m_voltprofile    = \”f:\\\\volatileprofile\”;
 21var m_userpath        = \”c:\\\\windows\\\\microsoft.net\\\\framework\\\\v2.0.50727;\”
 22                \”d:\\\\java\\\\jre\\\\currently\\\\bin\”;
 23
 24//调用函数以设置
 25setenvironment(m_prefix,m_username,m_profile,m_voltprofile,m_userpath);
 26
 27
 28//********************************************************************
 29//** 函数定义
 30
 31// 设置环境变量
 32//     prefix         : 环境变量名的前缀
 33//     username    : 用户名
 34//     profile        : 重要文件目录
 35//     voltprofile    : 非重要文件目录
 36//     userpath    : 用户 path,设置该值以进行快捷运行程序
 37function setenvironment(prefix,username,profile,voltprofile,userpath)
 38{
 39    //开始设置
 40    var currentname;
 41    //===========================
 42    // 设置系统重要目录
 43    currentname = prefix vn_profile;
 44   
 45    setsystemvalue(currentname, profile);
 46
 47    // 设置设置用户重要目录
 48    currentname = prefix vn_profile_user;
 49    setsystemvalue(currentname, \”%\” prefix vn_profile \”%\\\\\” username);
 50
 51    // 设置设置系统非重要目录
 52    currentname = prefix vn_volatile_profile;
 53    setsystemvalue(currentname, voltprofile);
 54
 55    // 设置设置用户非重要目录
 56    currentname = prefix \”volatile_profile_user\”;
 57    setsystemvalue(currentname, \”%\” prefix vn_volatile_profile \”%\” \”\\\\\” username);
 58
 59    // 设置临时目录
 60    currentname = prefix \”temp\”;
 61    setsystemvalue(currentname, \”%\” prefix vn_volatile_profile \”%\” \”\”);
 62
 63    //设置temp变量
 64    var temp = \”%\” prefix vn_temp \”%\”;
 65    setuservalue(\”tmp\”, temp);
 66    setuservalue(\”temp\”, temp);
 67    setsystemvalue(\”tmp\”, temp);
 68    setsystemvalue(\”temp\”, temp);
 69
 70    // 设置 path 和 自定义 path 连接
 71    var currentname = prefix vn_path;
 72    setsystemvalue(currentname, userpath);
 73    // 检测是否已经存在path,如果不存在则设置
 74    var regvalue = new regexp(\”%\” prefix vn_path \”%\”,\”i\”);
 75    if(!regvalue.test(getsystemvalue(\”path\”)))
 76    {
 77        setsystemvalue(\”path\”,getsystemvalue(\”path\”) \”;%\” prefix vn_path \”%\”);
 78    }
 79}
 80
 81// 调试用函数
 82function debug(msg)
 83{
 84    wsh = new activexobject(\”wscript.shell\”);
 85    wsh.popup(msg);
 86}
 87
 88// 获取用户环境变量
 89function getuservalue(name,value)
 90{
 91    wsh = new activexobject(\”wscript.shell\”);
 92    return wsh.environment(\”user\”).item(name);
 93}
 94// 设置用户环境变量
 95function setuservalue(name,value)
 96{
 97    wsh = new activexobject(\”wscript.shell\”);
 98    wsh.environment(\”user\”).item(name) = value;
 99}
100// 删除用户环境变量
101function removeuservalue(name)
102{
103    wsh = new activexobject(\”wscript.shell\”);
104    wsh.environment(\”user\”).remove(name) = value;
105}
106
107// 获取系统环境变量
108function getsystemvalue(name,value)
109{
110    wsh = new activexobject(\”wscript.shell\”);
111    return wsh.environment(\”system\”).item(name);
112}
113// 设置系统环境变量
114function setsystemvalue(name,value)
115{
116    wsh = new activexobject(\”wscript.shell\”);
117    wsh.environment(\”system\”).item(name) = value;
118}
119// 删除系统环境变量
120function removesystemvalue(name)
121{
122    wsh = new activexobject(\”wscript.shell\”);
123    wsh.environment(\”system\”).remove(name) = value;
124}
125
126
127
128

   其中 profile 为有价值的数据和文件 ,volatileprofile 用过而无价值的数据和文件,交换技术攻略:网络交换机配置技巧。这样,我们就可以清楚的知道,profile 要保留,volatileprofile 则可以经常清理。

   之后我还需要把 desktop,my document,favorites文件夹迁移到 profile 目录中,然后就开始安装数据库。
   不过嘛,今天太晚了,明天再说~~~
   明天用用 jscript 操作注册表以迁移系统的一些目录到 profile 和 volatileprofile 目录。

常用的JavaScript验证正则表达式


匹配中文字符的正则表达式: [u4e00-u9fa5]ahc平坦软件园
评注:匹配中文还真是个头疼的事,有了这个表达式就好办了ahc平坦软件园

匹配双字节字符(包括汉字在内):[^x00-xff]ahc平坦软件园
评注:可以用来计算字符串的长度(一个双字节字符长度计2,ascii字符计1)ahc平坦软件园

匹配空白行的正则表达式:ns*rahc平坦软件园
评注:可以用来删除空白行ahc平坦软件园

匹配html标记的正则表达式:< (s*?)[^>]*>.*?|< .*? />ahc平坦软件园
评注:网上流传的版本太糟糕,上面这个也仅仅能匹配部分,对于复杂的嵌套标记依旧无能为力ahc平坦软件园

匹配首尾空白字符的正则表达式:^s*|s*&ahc平坦软件园
评注:可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等),非常有用的表达式ahc平坦软件园

ahc平坦软件园
匹配email地址的正则表达式:w ([- .]w )*@w ([-.]w )*.w ([-.]w )*ahc平坦软件园
评注:表单验证时很实用ahc平坦软件园

匹配网址url的正则表达式:[a-za-z] ://[^s]*ahc平坦软件园
评注:网上流传的版本功能很有限,上面这个基本可以满足需求ahc平坦软件园

匹配帐号是否合法(字母开头,允许5-16字节,允许字母数字下划线):^[a-za-z][a-za-z0-9_]{4,15}&ahc平坦软件园
评注:表单验证时很实用ahc平坦软件园

匹配国内电话号码:d{3}-d{8}|d{4}-d{7}ahc平坦软件园
评注:匹配形式如 0511-4405222 或 021-87888822ahc平坦软件园

匹配腾讯qq号:[1-9][0-9]{4,}ahc平坦软件园
评注:腾讯qq号从10000开始ahc平坦软件园

匹配中国邮政编码:[1-9]d{5}(?!d)ahc平坦软件园
评注:中国邮政编码为6位数字ahc平坦软件园

匹配身份证:d{15}|d{18}ahc平坦软件园
评注:中国的身份证为15位或18位ahc平坦软件园

匹配ip地址:d .d .d .d ahc平坦软件园
评注:提取ip地址时有用ahc平坦软件园

匹配特定数字:ahc平坦软件园
^[1-9]d*&    //匹配正整数ahc平坦软件园
^-[1-9]d*&   //匹配负整数ahc平坦软件园
^-?[1-9]d*&   //匹配整数ahc平坦软件园
^[1-9]d*|0&  //匹配非负整数(正整数 0)ahc平坦软件园
^-[1-9]d*|0&   //匹配非正整数(负整数 0)ahc平坦软件园
^[1-9]d*.d*|0.d*[1-9]d*&   //匹配正浮点数ahc平坦软件园
^-([1-9]d*.d*|0.d*[1-9]d*)&  //匹配负浮点数ahc平坦软件园
^-?([1-9]d*.d*|0.d*[1-9]d*|0?.0 |0)&  //匹配浮点数ahc平坦软件园
^[1-9]d*.d*|0.d*[1-9]d*|0?.0 |0&   //匹配非负浮点数(正浮点数 0)ahc平坦软件园
^(-([1-9]d*.d*|0.d*[1-9]d*))|0?.0 |0&  //匹配非正浮点数(负浮点数 0)ahc平坦软件园
评注:处理大量数据时有用,具体应用时注意修正ahc平坦软件园

匹配特定字符串:ahc平坦软件园
^[a-za-z] &  //匹配由26个英文字母组成的字符串ahc平坦软件园
^[a-z] &  //匹配由26个英文字母的大写组成的字符串ahc平坦软件园
^[a-z] &  //匹配由26个英文字母的小写组成的字符串ahc平坦软件园
^[a-za-z0-9] &  //匹配由数字和26个英文字母组成的字符串ahc平坦软件园
^w &  //匹配由数字、26个英文字母或者下划线组成的字符串ahc平坦软件园

在使用regularexpressionvalidator验证控件时的验证功能及其验证表达式介绍如下:ahc平坦软件园

只能输入数字:“^[0-9]*&”ahc平坦软件园
只能输入n位的数字:“^d{n}&”ahc平坦软件园
只能输入至少n位数字:“^d{n,}&”ahc平坦软件园
只能输入m-n位的数字:“^d{m,n}&”ahc平坦软件园
只能输入零和非零开头的数字:“^(0|[1-9][0-9]*)&”ahc平坦软件园
只能输入有两位小数的正实数:“^[0-9] (.[0-9]{2})?&”ahc平坦软件园
只能输入有1-3位小数的正实数:“^[0-9] (.[0-9]{1,3})?&”ahc平坦软件园
只能输入非零的正整数:“^ ?[1-9][0-9]*&”ahc平坦软件园
只能输入非零的负整数:“^-[1-9][0-9]*&”ahc平坦软件园
只能输入长度为3的字符:“^.{3}&”ahc平坦软件园
只能输入由26个英文字母组成的字符串:“^[a-za-z] &”ahc平坦软件园
只能输入由26个大写英文字母组成的字符串:“^[a-z] &”ahc平坦软件园
只能输入由26个小写英文字母组成的字符串:“^[a-z] &”ahc平坦软件园
只能输入由数字和26个英文字母组成的字符串:“^[a-za-z0-9] &”ahc平坦软件园
只能输入由数字、26个英文字母或者下划线组成的字符串:“^w &”ahc平坦软件园
验证用户密码:“^[a-za-z]w{5,17}&”正确格式为:以字母开头,长度在6-18之间,ahc平坦软件园

只能包含字符、数字和下划线。ahc平坦软件园
验证是否含有^%&’,;=?&”等字符:“[^%&\',;=?&x22] ”ahc平坦软件园
只能输入汉字:“^[u4e00-u9fa5],{0,}&”ahc平坦软件园
验证email地址:“^w [- .]w )*@w ([-.]w )*.w ([-.]w )*&”ahc平坦软件园
验证interneturl:“^http://([w-] .) [w-] (/[w-./?%&=]*)?&”ahc平坦软件园
验证电话号码:“^((d{3,4})|d{3,4}-)?d{7,8}&”ahc平坦软件园

正确格式为:“xxxx-xxxxxxx”,“xxxx-xxxxxxxx”,“xxx-xxxxxxx”,ahc平坦软件园

“xxx-xxxxxxxx”,“xxxxxxx”,“xxxxxxxx”。ahc平坦软件园
验证身份证号(15位或18位数字):“^d{15}|d{}18&”ahc平坦软件园
验证一年的12个月:“^(0?[1-9]|1[0-2])&”正确格式为:“01”-“09”和“1”“12”ahc平坦软件园
验证一个月的31天:“^((0?[1-9])|((1|2)[0-9])|30|31)&”ahc平坦软件园

正确格式为:“01”“09”和“1”“31”。ahc平坦软件园

匹配中文字符的正则表达式: [u4e00-u9fa5]ahc平坦软件园
匹配双字节字符(包括汉字在内):[^x00-xff]ahc平坦软件园
匹配空行的正则表达式:n[s| ]*rahc平坦软件园
匹配html标记的正则表达式:/< (.*)>.*|< (.*) />/ahc平坦软件园
匹配首尾空格的正则表达式:(^s*)|(s*&)ahc平坦软件园
匹配email地址的正则表达式:w ([- .]w )*@w ([-.]w )*.w ([-.]w )*ahc平坦软件园
匹配网址url的正则表达式:- ./?%&=]*)?ahc平坦软件园

(1)应用:计算字符串的长度(一个双字节字符长度计2,ascii字符计1)ahc平坦软件园
string.prototype.len=function(){return this.replace([^x00-xff]/g,”aa”).length;}ahc平坦软件园

(2)应用:javascript中没有像vbscript那样的trim函数,我们就可以利用这个表达式来实现ahc平坦软件园
string.prototype.trim = function()ahc平坦软件园
{ahc平坦软件园
return this.replace(/(^s*)|(s*&)/g, “”);ahc平坦软件园
}ahc平坦软件园
(3)应用:利用正则表达式分解和转换ip地址ahc平坦软件园
function ip2v(ip) //ip地址转换成对应数值ahc平坦软件园
{ahc平坦软件园
re=/(d ).(d ).(d ).(d )/g //匹配ip地址的正则表达式ahc平坦软件园
if(re.test(ip))ahc平坦软件园
{ahc平坦软件园
return regexp.&1*math.pow(255,3)) regexp.&2*math.pow(255,2)) regexp.&3*255 regexp.&4*1ahc平坦软件园
}ahc平坦软件园
elseahc平坦软件园
{ahc平坦软件园
throw new error(”not a valid ip address!”)ahc平坦软件园
}ahc平坦软件园
}ahc平坦软件园
(4)应用:从url地址中提取文件名的javascript程序ahc平坦软件园
s=”http://www.9499.net/page1.htm”;ahc平坦软件园
s=s.replace(/(.*/){0,}([^.] ).*/ig,”&2′) ; //page1.htmahc平坦软件园
(5)应用:利用正则表达式限制网页表单里的文本框输入内容ahc平坦软件园
用正则表达式限制只能输入中文:onkeyup=”value=”/blog/value.replace(/[\"^u4e00-u9fa5]/g,”) ” onbeforepaste=”clipboarddata.setdata(’text’,clipboarddata.getdata(’text’).replace(/[^u4e00-u9fa5]/g,”))”ahc平坦软件园
用正则表达式限制只能输入全角字符: onkeyup=”value=”/blog/value.replace(/[\"^uff00-uffff]/g,”) ” onbeforepaste=”clipboarddata.setdata(’text’,clipboarddata.getdata(’text’).replace(/[^uff00-uffff]/g,”))”ahc平坦软件园
用正则表达式限制只能输入数字:onkeyup=”value=”/blog/value.replace(/[\"^d]/g,”) “onbeforepaste= “clipboarddata.setdata(’text’,clipboarddata.getdata(’text’).replace(/[^d]/g,”))”ahc平坦软件园

用正则表达式限制只能输入数字和英文:onkeyup=”value=”/blog/value.replace(/[w]/g,””) “onbeforepaste=”clipboarddata.setdata(’text’,clipboarddata.getdata(’text’).replace(/[^d]/g,”ahc平坦软件园

16个很有用的 JavaScript 库


流行的 javascript 库有jquery,mootools,prototype,dojo和yui等,这些 javascript 库功能丰富,加上它们众多的插件,几乎能实现任何你需要的功能,然而需要实现一些特定的功能,则可以选择功能更专一的轻量库,今天这篇文章与大家分享16个很有用的 javascript 库。

blackbird: open source javascript logging utility

blackbird 是一款非常酷的 javascript 调试工具,带有一个漂亮的界面显示和过滤调试信息。

treesaver.js

treesaver 是一个用于创建杂志布局的 javascript 框架。

bibliotype

bibliotype 是一个简单的基于 html、css 和 js ,用于快速原型制作的的框架。

highcharts – interactive javascript charts

highcharts 是一个纯 javascript 编写,用于生产交互式图表的 javascript 库。

jstat: a javascript statistical library

stat是一个采用javascript开发的统计工具包,可以让你执行高级统计操作,而不需要专门的统计语言。

highlight.js

highlight.js 是一个用于高亮显示程序代码的 javascript 库,简单易用。

respond.js: fast css3 media queries for internet explorer 6-8 and more

这个快速、轻量的库用于让ie6-8支持 css3 media queries,是一种让网页支持小屏幕设备显示的特性。

underscore.js

underscore 是一个实用的javascript工具库,提供了类似 prototype 功能的编程支持,但没有对 javascript 内置的对象进行扩展。

popcorn.js

popcorn.js 是一个html5 video框架,它提供了易于使用的api来同步交互式内容。

slickgrid!

slickgrid 是一个用于构建简单的、快速、灵活的表格的库。

javaScript DOM方法与属性摘要


1 createelement(element)
创建一个指定标签名创建一个新的元素节点,返回值为指向新建元素节点的引用指针。
eg) var para = document.createelement(\”p\”);
    document.body.appendchild(para);

2 createtextnode()
创建一个包含着给定文本的新文本节点,返回一个指向新建文本节点的引用指针:
reference = document.createtextnode()
参数为新建文本节点所包含的文本字符串
eg)
var message = document.createtextnode(\”hello world\”);
var container = document.createelement(\”p\”);
container.appendchild(message);
document.body.appendchild(container);

3 clonenode()
reference = node.clonenode(deep)
为给定节点创建一个副本,参数为true或者false,true表示同时复制该节点的子节点,false则不复制任何子节点。
var para = document.createelement(\”p\”);
var message = document.createtextnode(\”hello world\”);
para.appendchild(message);
document.body.appendchild(para);
var newpara = para.clonenode(true);
document.body.appendchild(newpara);

4 appendchild()
reference = node.appendchild(newchild);
插入节点,例子参考前面。

5 insertbefore()
reference = element.insertbefore(newnode,targetnode)
将一个给定节点插入到一个给定元素节点的给定子节点的前面,返回一个指向新增子节点的引用指针。
eg)
var container = document.getelementbyid(\”content\”);
var message = document.getelementbyid(\”fineprint\”);
var para = document.createelement(\”p\”);
container.insertbefore(para,message);

6 removechild()
reference = element.removechild(node)
将从一个给定元素利删除一个子节点,返回一个指向已被删除的子节点的引用指针。
当某个节点被removechild()删除后,此节点所有子节点都被删除。

7 replacechild()
reference = element.replacechild(newchild,网页设计 css布局调试的有效方法,oldchild)
把一个给定父元素里的一个子节点替换为另外一个节点,oldchild节点必须是element元素的一个子节点,返回值是一个指向已被替换的那个
子节点的引用指针。
eg)
var container = document.getelementbyid(\”content\”);
var message = document.getelementbyid(\”fineprint\”);
var para = document.createelement(\”p\”);
container.replacechild(para,message);

8 setattribute()
element.setattribute(attributename,attributevalue);
为给定元素节点添加一个新的属性值或是改变它的现有属性

9 getattribute
attributevalue = element.getattribute(attributename)
返回一个给定元素的一个给定属性节点的值。

10 getelementbyid()
element = document.getelementbyid(id)
寻找一个有着给定id属性值的元素,返回一个元素节点

11 getelementbytagname()
用于寻找有着给定标签名的所有元素:
elements = document.getelementsbytagname(tagname)
返回一个节点集合。

12 haschildnodes
用来检查一个给定元素是否有子节点
booleanvalue = element.haschildnodes
返回true或false。

13 dom属性
节点的属性
nodename属性将返回一个字符串,其内容是给定节点的名字。
如果节点是元素节点,返回这个元素的名称;
如果是属性节点,返回这个属性的名称;
如果是文本节点,返回一个内容为#text的字符串;

nodetype属性将返回一个整数,这个数值代表给定节点的类型
nodevalue属性将返回给定节点的当前值
如果节点是元素节点,返回null;
如果是属性节点,返回这个属性的名称;
如果是文本节点,返回文本节点的内容;

遍历节点树
childnodes 该属性返回一个数组,这个数组由给定元素节点的子节点构成
firstchild 返回第一个子节点
lastchild 返回最后一个子节点
nextsibling 返回给定节点的下一个子节点
parentnode 返回一个给定节点的父节点
previoussibling 返回给定节点的下一个子节点??

14 settimeout
javascript函数,能够让某个函数在经过一段预定的时间之后才开始执行,函数有两个参数,第一个参数是将要执行的那个函数的名字;
第二个参数是一个数值,以毫秒为单位设定了需要经过多长时间才开始执行由第一个参数所给出的函数:
settimeout(\”function\”,interval);

Javascript导航菜单11则


来源:http://www.noupe.com/ajax/13-awesome-java-script-css-menu.html 翻译:http://parandroid.com
下面为你准备了13个利用javascript实现的网页导航菜单

1) sexy sliding menu – 基于mootools的javascript网页导航菜单,漂亮的滑动门技术,看到下面的图了没有,用它来设计你的sidebar,非常之炫,sexy,是的。

sexy sliding menu

demo: mootols version
demo: script.aculo.usversion

2) fastfind menu script -这个脚本基本动态的ajax技术,可以让你创建多级嵌套的菜单。

fastfind menu

demo: fastfind menu

3) webber 2.0 dock menu -一个典型的dock类型网页导航菜单。

webber 2.0 dock menu

demo: webber 2.0 dock menu

4) phatfusion- image menu -这这是一个使用javascript的图片导航菜单,它最大的特点是除了悬浮展开图片链接之外,还保持当前选定的菜单链接状态。

phatfusion- image menu

demo: phatfusion- image menu
demo: mootools version with xml parser

5) drag and drop ordering in a treepanel -这个好像是从著名的ext js提取的,一个树型导航菜单,灵感当然是来源于windows的资源管理器,我相信是这样的。

drag drop treepanel

demo: drag and drop ordering in a treepanel

6) custom menu events

在同一时间内显示展示菜单的介绍和其它相关信息,其动态效果甚至达到flash。不过缺点是需要再次刷新才能进行导航菜单的动态显示。

custom menu events

demo: custom menu events | thinkvitamin.com

7) context menu functionality 一个简洁轻巧的上下文本导航菜单,利于在用户浏览时达到一个良好的交互作用。

context menu functionality

demo: context menu functionality

这是另一个demoanother context menu

8 ) lavalamp jquery sliding menu 一个基于jquery的滑动菜单效果,体积比较小巧。另一个版本是来自guillermo rauch 基于mootools所构建的。

demo: lavalamp jquery sliding menu
demo: mootools fancy menu

9 ) slashdot menu- dynamic drive 这是一个流行的滑动/折叠导航菜单,是设计爱好者从著名网站slashdot中提取的。其可控制性非常强,比如你可以设置为只准打前主菜单打开,或者全部打开,或同时收缩所有的子菜单等,且可以根据cookie判断来显示菜单。

slashdot menu

demo: slashdot menu

10 ) mootools menu with accordeon and effects 非常整洁的一个导航菜单,当鼠标悬浮的时候,当前链接就会伸展出来并且可以显示一个手风琴效果的二级菜单。

mootools menumenu

demo: mootools menu with accordeon and effects

11 ) css dock menu 这又是来自nick la的mac风格的鱼眼效果菜单,如果你对这种效果感兴趣,可以看一下我的另一篇文章:
多个mac风格的鱼眼菜单(dock menu)免费下载和教程
css dock menu

javascript中实现trim()函数


     方案一:
     以原型方式调用,即obj.trim()形式,此方式简单且使用方面广泛,定义方式如下:

<script language=”javascript”>
/**
* 删除左右两端的空格
*/
string.prototype.trim=function()
{
     return this.replace(/(^\\s*)|(\\s*&)/g, ”);
}
/**
* 删除左边的空格
*/
string.prototype.ltrim=function()
{
     return this.replace(/(^\\s*)/g,”);
}
/**
* 删除右边的空格
*/
string.prototype.rtrim=function()
{
     return this.replace(/(\\s*&)/g,”);
}
</script>

使用示例如下:

<script type=”text/javascript”>
alert(document.getelementbyid(’abc’).value.trim());
alert(document.getelementbyid(’abc’).value.ltrim());
alert(document.getelementbyid(’abc’).value.rtrim());
</script>

 方案二:
     以工具方式调用,即trim(obj)的形式,此方式可以用于特殊处理需要,定义方式如下:
<script type=”text/javascript”>
/**
* 删除左右两端的空格
*/
function trim(str)
{
     return str.replace(/(^\\s*)|(\\s*&)/g, ”);
}
/**
* 删除左边的空格
*/
function ltrim(str)
{
     return str.replace(/(^\\s*)/g,”);
}
/**
* 删除右边的空格
*/
function rtrim(str)
{
     return str.replace(/(\\s*&)/g,”);
}
</script>

使用示例如下:

<script type=”text/javascript”>
alert(trim(document.getelementbyid(’abc’).value));
alert(ltrim(document.getelementbyid(’abc’).value));
alert(rtrim(document.getelementbyid(’abc’).value));
</script>

JavaScript语法


javascript语法
1.数据类型:数值型、字符型、布尔型、空型
2.函数
     function 函数名(参数列表){
     函数体
     }
3.javascript对象:对相同特性的实体的抽象描述。
     有3种引用方法:引用javascript内建对象。
                               引用浏览器环境提供的对象。
                               创建自定义对象。
     自定义对象:(1)定义对象  

                            function 对象名称(属性列表){
                                   this.属性1=参数1
                                   this.属性2=参数2
                                    …
                                   this.方法1=函数名1
                                   this.方法=函数名2
                                   …
                                  }
                        (2)创建对象实例
                               对象实例名=new 对象名称(属性列表)
     对象属性和方法的引用:
                (1)对象属性引用  

                       对象实例名.属性成员名   或     对象实例名[n]
                (2)对象方法引用   对象实例名.方法名称
                     对象操作:

                       (1)for…in 语句
                            遍历:历经一个集合中的每个个体,逐一通过一个对象的所有属性
                                   for(变量名 in 对象实例名){
                                         语句段
                                   }
                       (2)with语句
                         需要连续使用某个对象的一些属性和方法时,使用with语句
                                 with(对象实例名){
                                        语句段

                                }
                     (3)this关键字
                         对当前对象的引用
4.事件驱动与事件处理
      事件:对计算机进行的操作,用户与web页面的交互操作。
      javascript常用事件
            onclick:鼠标单击页面对象时发生
            onload:网页载入浏览器时发生,发生对象为html的<body>标记
            onunload:用户离开当前页面时,发生对象为html的<body>标记
            onmouseover:鼠标移到对象上时发生
            onmouseout:鼠标离开对象时发生
5.javascript内建对象
     window对象->浏览器窗口对象,最顶层对象
               下层对象:event对象、frame对象、document对象
     window对象属性:name、parent、self、top、status、defaultstatus等
                       方法:alert()、confirm()、close()、open()、prompt()、settimeout()、cleartimeout()等
                       事件:onload、onunload、onbeforeunload、onresize、onscroll、onerror
     document对象—>html页面对象,最主要
     document对象属性:alinkcolor(活动超链接颜色)、bgcolor(页面背景颜色)、fgcolor(页面前景颜色)、
                                     linkcolor(未访问超连接颜色)、linkcolor(访问过的超链接颜色)、

                                     lastmodified(最后一次页面修改时 间)、location(页面url地址)、title(页面标题)   

    document对象方法:clear()(清除文件窗口内的数据)、close()、open()、write()、writeln()
    document对象事件:
            ->鼠标事件:onclick(单击左键)、ondbclick(双击左键)、onmousedown(按下左键)、

                                onmousemove(移动鼠标)、onmouseout(鼠标离开时)、onmouseover(鼠标移到对象上时)、

                                onmouseup(放开左键)、onselectstart(选取对象内容时)、ondragstart(以拖拽方式选取对象时)
           ->按键事件:onkeydown(按下按键)、onkeypress、onkeyup(放开按键)、onhelp
6.javascript内置对象
     string对象->不需使用new关键字,但需实例化。
           属性:只有一个length
           方法:fontsize(size)(控制字体大小)、tolowercase()、touppercase()、

                     indexof(str,start-position)(在start-position查找str字符串)、
                     substring(start,end)(返回start与end位置之间的字串)
     math对象->静态对象,不需要创建具体实例即可使用。
            方法:sqrt()(平方根)、pow(bv,ev)(以bv为底的ev次方)、abs(绝对值)
     array对象->创建时不给出元素个数,引用时才确定数组大小。
            属性:length
            方法:join()(返回数组中所有元素连接成的字符串)、reverse()(将数组元素逆转排列)、sort()(对数组元素进行排序)
            格式:数组对象实例名=new array()。
            特点:数组元素不要求数据类型相同;数组长度可动态变化。
      date对象->没有属性
         格式:日期对象实例名=new date(),默认把系统的机内时间放入变量
         方法:getyear()、getmonth()、getdate()、gethours()、getminutes()、getseconds()、gettime()、

                   setyear(timevalue)、setmonth(timevalue)、setdate(timevalue)、setday()、sethours(timevalue)、

                   setminutes()、setminutes(timevalue)、setsecond(timevalue)、settime()

再谈javascript图片预加载技术


图片预加载技术的典型应用

如lightbox方式展现照片,无疑需要提前获得大图的尺寸,这样才能居中定位,由于javascript无法获取img文件头数据,必须等待其加载完毕后才能获取真实的大小然后展示出来,所以lightbox显示的图片的速度体验要比直接输出的差很多,而本文说提到的预加载技术主要针对获取图片尺寸。

一段典型的使用预加载获取图片大小的例子:

var imgload = function (url, callback) {
var img = new image();
img.src = url;
if (img.complete) {
callback(img.width, img.height);
} else {
img.onload = function () {
callback(img.width, img.height);
img.onload = null;
};
};
};

web应用程序区别于桌面应用程序,响应速度才是最好的用户体验。如果想要速度与优雅兼得,那就必须提前获得图片尺寸,如何在图片没有加载完毕就能获取图片尺寸?

一、结合flash加载图片,获取图片头部数据的尺寸

flash虽然很强大,但它与生俱来的缺点让人爱恨交织,加上很多移动设备不支持falsh无疑更是致命的伤,还是放弃吧。

二、在服务端保存图片尺寸数

这里不得不提到腾讯qzone的lightbox相册,它就是这样做的。它能在图片没有加载完全的时候就居中放大图片,速度与优雅基本兼得。不过它仍然难以避免blog插入的外链图片的问题,也只能按传统的方式加载完毕才能展示。

三、javascript通过占位方式获取图片头部数据的尺

十多年的上网经验告诉我:浏览器在加载图片的时候你会看到图片会先占用一块地然后才慢慢加载完毕,并且这里大部分的图片都是没有预设width与height属性的,因为浏览器能够获取图片的头部数据。基于此,只需要使用javascript定时侦测图片的尺寸状态便可得知图片尺寸就绪的状态。

实现代码:

var imgready = function (url, callback, error) {
var width, height, intervalid, check, div,
img = new image(),
body = document.body;
img.src = url;
// 从缓存中读取
if (img.complete) {
return callback(img.width, img.height);
};
// 通过占位提前获取图片头部数据
if (body) {
div = document.createelement(\’div\’);
div.style.csstext = \’visibility:hidden;position:absolute;left:0;top:0;width:1px;
height:1px;overflow:hidden\’;
div.appendchild(img)
body.appendchild(div);
width = img.offsetwidth;
height = img.offsetheight;
check = function () {
if (img.offsetwidth !== width || img.offsetheight !== height) {
clearinterval(intervalid);
callback(img.offsetwidth, img.clientheight);
img.onload = null;
div.innerhtml = \’\';
div.parentnode.removechild(div);
};
};
intervalid = setinterval(check, 150);
};
// 加载完毕后方式获取
img.onload = function () {
callback(img.width, img.height);
img.onload = img.onerror = null;
clearinterval(intervalid);
body && img.parentnode.removechild(img);
};
// 图片加载错误
img.onerror = function () {
error && error();
clearinterval(intervalid);
body && img.parentnode.removechild(img);
};
};

运行代码框
<!doctype html> <html xmlns=\”http://www.w3.org/1999/xhtml\”> <head> <meta http-equiv=\”content-type\” content=\”text/html; charset=utf-8\” /> <title>img ready</title> <script> var imgready = function (url, callback, error) { var width, height, intervalid, check, div, img = new image(), body = document.body; img.src = url; // 从缓存中读取 if (img.complete) { return callback(img.width, img.height); }; // 通过占位提前获取图片头部数据 if (body) { div = document.createelement(\’div\’); div.style.csstext = \’visibility:hidden;position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden\’; div.appendchild(img) body.appendchild(div); width = img.offsetwidth; height = img.offsetheight; check = function () { if (img.offsetwidth !== width || img.offsetheight !== height) { clearinterval(intervalid); callback(img.offsetwidth, img.clientheight); img.onload = null; div.innerhtml = \’\'; div.parentnode.removechild(div); }; }; intervalid = setinterval(check, 150); }; // 加载完毕后方式获取 img.onload = function () { callback(img.width, img.height); img.onload = img.onerror = null; clearinterval(intervalid); body && img.parentnode.removechild(img); }; // 图片加载错误 img.onerror = function () { error && error(); clearinterval(intervalid); body && img.parentnode.removechild(img); }; }; </script> <script> /* demo script */ window.onload = function () { var imgurl = \’http://www.planeart.cn/demo/imgready/vistas24.jpg?\’, testreadybtn = document.getelementbyid(\’testreadybtn\’), clscachebtn = document.getelementbyid(\’clscachebtn\’), status = document.getelementbyid(\’status\’), statusready = document.getelementbyid(\’statusready\’), statusload = document.getelementbyid(\’statusload\’), imgwrap = document.getelementbyid(\’imgwrap\’); var imgload = function (url, callback) { var img = new image(); img.src = url; if (img.complete) { callback(img.width, img.height); } else { img.onload = function () { callback(img.width, img.height); img.onload = null; }; }; }; testreadybtn.onclick = function () { var that = this; that.disabled = true; status.style.display = \’block\’; statusload.innerhtml = statusready.innerhtml = \’loading…\’; imgwrap.innerhtml = \’<img src=\”\’ imgurl \’\” />\’; // 使用占位方式快速获取大小 imgready(imgurl, function (width, height) { statusready.innerhtml = \’width:\’ width \’; height:\’ height; }, function () { statusready.innerhtml = \’img error!\’; }); // 使用传统方式获取大小 imgload(imgurl, function (width, height) { statusload.innerhtml = \’width:\’ width \’; height:\’ height; that.disabled = false; }, function () { statusload.innerhtml = \’img error!\’; that.disabled = false; }); }; clscachebtn.onclick = function () { imgurl = new date().gettime(); status.style.display = \’none\’; imgwrap.innerhtml = \’\'; }; }; </script> </head> <body> <p>文章:《<a href=\”http://www.planeart.cn/?p=1121\”>再谈javascript图片预加载技术</a>》</p> <p><button id=\”testreadybtn\”>开始加载图片</button> <button id=\”clscachebtn\”>清空缓存</button>(如果图片加载过后,浏览器会缓存)</p> <div id=\”status\” style=\”display:none\”> <p><strong>imgready:</strong><p> <p id=\”statusready\”></p> <p><strong>imgload:</strong></p> <p id=\”statusload\”><p> </div> <div id=\”imgwrap\”></div> <div style=\”display:none\”><script src=\”http://s86.cnzz.com/stat.php?id=1581115&web_id=1581115\” charset=\”gb2312\”></script></div> </body> </html>
[ctrl a 全部选择 提示:你可先修改部分代码,再按运行]

好了,请观赏令人愉悦的 demo : http://www.planeart.cn/demo/imgready/

(通过测试的浏览器:chrome、firefox、safari、opera、ie6、ie7、ie8)

javascript中获取当前鼠标的坐标


在获取当前鼠标坐标时因为参照物的不同,浏览器的兼容,导致在使用时总是觉得混乱,今天在看到一段总结整理下来,方便使用。

获得当前鼠标的坐标,根据参照物的不同,分为以下几套坐标系。

一套是以当前浏览器的可视区为参照物(clientx,clienty),另一套是以显示器的屏幕为参照物(screenx,screeny)。

此外微软还有一套坐标系(x,y),它是相对于触发事件的对象的offsetparent的。

火狐有另一套坐标系(pagex,pagey),它是相对于当前网页的。

JavaScript学习摘录


以下内容为自己学习《精通脚本黑客》第四章后的笔记吧,适合有些许入门基础的人看。

javascript代码放置在html标记<script>和</script>之间。反过来我们可以这样理解,html标记<script>和</script>之间的一切内容都被浏览器认为是javascript代码。javascript代码可以放置在html文档的任何位置。一般来说,如果希望在显示html页面之前执行代码,那么将javascript代码放在<head>和</head>标记之间。如果代码需要操作文档内容,比如插入一段文字,那么将javascript代码放在<body>和</body>之间。
一般格式为:

<script>
 一条或多条javascript语句
</script>

除了上面最简单的<script>标记之外,还可以使用属性来修饰这个标记,最常用的有language、type、src这三个属性。
(1)、language属性指定程序代码使用哪一种脚本语言,常用的值为javascript、vbscript、jscript。设置language属性的一般格式为:<script langrage=\”javascript\”>
(2)、type属性用于同时指定脚本语言和internet内容类型。使用type属性指定脚本语言为javascript的常用语句格式为:<script  type=\”text/javascript\”></script>
(3)、当要执行的脚本代码存放在某个外部文件中时,使用src属性指定该文件,文件的扩展名通常为.js,这样的文件称作javascript脚本文件。在文件名称中,可以包含路径或者url。如:<script langrage=\”javascript\” type=\”text/javascript\” src= \”haha.js\”></script>
<script langrage=\”javascript\” type=\”text/javascript\” src= http://xxxx.com/haha.js></script>
javascript脚本文件保存javascript代码,其中不需要编写<script>、</script>标记,也不需要任何html标记。使用src的属性的行为与直接把代码嵌套在<script>、</script>标记之间的行为是完全相同,这就是js挂马技术的原理,利用它,我们可以挂马。

动态生成页面内容
1、  字符串拼接。
例如:\”湖南省\” \’长沙市\’,\’湖南省\’ \’长沙市\’,都可以拼接出字符串“湖南省长沙市”。
2、  write()和writeln()方法。
document对象表示当前加载到浏览器中的html文档,即当前正在打开的html文件。write()和writeln()方法是document对象的两个方法,它们的功能是把文本添加到浏览器中要显示文本的当前位置。write()和writeln()方法的语法格式为:
document.write(value,…………..)
document.writeln(value,…………)
从上面括号里的参数可以看出,这两个方法可以同时输出多个值。例如:
document.write(\”湖南省\”,\”长沙市\”)   //在浏览器中添加输出\”湖南省长沙市\”
writeln()方法的功能与write()方法相同,他们的唯一区别是writeln()方法在输出文字的同时,还要输出一个换行符号,不过要使writeln()方法产生换行的效果还必须加上<pre>这个标记。
位于html的<pre>标记中,那么使用writeln()就会出现换行的效果,当然还可以使用<br>标记也发生换行。

可以使用alert()、prompt()、confirm()这三种方法来创建对话框。
1、显示信息对话框的alert()方法
alert()方法不处理参数字符串中包含的html标记,
alert()方法的参数中使用转义字符,比如换行符\\n等,从而控制控制文字的显示位置。
2、显示确认选择对话框的confirm()方法
确认选择对话框用于确定用户对某个yes/no风格问题的回答。这种风格的对话框中显示一个问号和两个按钮:“确定”和“取消”。当我们点击“确定”按钮时,confirm()方法返回true,否则就返回false。
<html>
<head><title>confirm()方法的使用示例</title></head>
<body>
<script language=\”javascript\”>
document.writeln(\”湖南省   长沙市\”);
if(confirm(\”要显示我更加详细的地址吗?\”)==true){
document.writeln(\”芙蓉区   远大路\”);
alert(\”已经显示我的详细地址了\”);
}
else{
      alert(\”不显示我的详细地址\”);
}
</script>
</body>
</html>
3、显示提示对话框的prompt()方法
使用prompt()方法显示提示对话框,在这个对话框中,可以显示一条由参数指定的消息,并等待用户在文本框中输入一段文字,同时这个对话框还显示了两个按钮:“确定”和“取消”。用户点击“确定”按钮后,返回用户在对话框的文本框中输入的文字,否则返回null,即返回空。
prompt()方法使用两个参数:第一个参数是一个字符串,指定在对话框中显示的消息;第二个参数也是一个字符串,指定在文本框中显示的初始值,如果省略了这个参数那么就会在文本框中显示字符串\”undefined\”。
prompt()方法的两种可用语法格式为:
prompt(message);
prompt(message,defaulttext);

变量在使用之前一定要声明,声明变量的方式有两个:(1)、使用关键字var显式声明变量。(2)、使用赋值语句隐式地声明变量。

函数:
其实在javascript可以调用函数的方法有三种,他们分别是:
(1)、在javascript代码中调用函数
<html>
<head>
<title>函数定义以及函数调用</title>
<script language=javascript>
function hello(){
var name=\”欢迎来到脚本黑客世界\”;
alert(\”hello\” name \”!\”)
}
</script>
</head>
<body>
<script language=javascript>
hello();
</script>
</body>
</html>

(2)、在事件响应中调用函数
<html>
<head>
<title>在事件响应中调用函数</title>
<script language=javascript>
function haha(){
alert(\”这是在事件响应中调用函数!\\nby-曾云好\”);
}
</script>
</head>
<body><center>
<form>
<input type=\”button\” value=\”请单击这里\” onclick=\”haha();\”>
</form>
</body>
</html>

(3)、通过链接调用函数
利用javascript中的伪协议javascirpt,可以通过链接直接调用函数。调用函数的过程为:在<a>标记中,在关键字javascript:后面写上哟啊调用函数的名称,用引号把这些内容引起来,然后赋值给href属性,例如<a href= \”javascript:haha()\”>请单击这里</a>。单击这个链接时,指定的javascript函数就会被调用。
<html>
<head>
<title>通过链接调用函数</title>
<script language=javascript>
function xixi(){
alert(\”这是通过链接调用函数!\\nby-曾云好\”);
}
</script>
</head>
<body><center>
<form>
<a href= \”javascript:xixi()\”>请单击这里</a></form>
</body>
</html>

如果在函数中没有return语句,那么javascript会隐含地在函数末尾添加一条返回undefined值的return语句,因此所有的函数都是有返回值的。
return语句有两种形式的语法格式,分别为:
return;
return expression;

对象
1、  创建和使用自定义对象
在javascript中,创建对象有几种途径,其中最为常用的是使用构造函数。javascript提供了几个内置的构造函数,如object()、array()、date()等,其中构造函数object()可以使用它来构造一个空对象,并通过扩展这个空对象来构造需要的对象。
<html>
<head>
<title>创建和使用对象的属性</title></head>
<body>
<script language=javascript>
var vehicle=new object();
vehicle.car=new object();
vehicle.car.name=\”奔驰\”;
vehicle.car.speed=\”300公里/小时\”;
vehicle.car.color=\”red\”;
document.write(\”小汽车的名字:\” vehicle.car.name);
document.write(\”<br>奔驰的速度为:\” vehicle.car.speed);
document.write(\”<br>奔驰的颜色:\” vehicle.car.color);
</script>
</body>
</html>
———————————————–
<html>
<head>
<title>创建和使用对象的属性</title></head>
<script language=\”javascript\”>
function phone(name,phoneno,site){
this.name=name;
this.phoneno=phoneno;
this.site=site;
}
</script>
<body>
<script language=\”javascript\”>
var myphone=new phone(\”曾云好\”,\”0731—123456789\”,\”湖南省长沙市\”);
document.write(\”<br>\” myphone.name \”<br>\” myphone.phoneno \”<br>\” myphone.site);
</script>
</body>
</html>

2、  浏览器对象模型
<html>
<head>
<title>检测浏览器及其特性</title></head>
<body>
<h3>检测浏览器的名称、版本号、http用户代理首部的值<h3>
<script language=\”javascript\”>
document.write(\”<b>浏览器名称:</b>\” navigator.appname \”<br>\”);
document.write(\”<b>浏览器代码名称:</b>\” navigator.appcodename \”<br>\”);
document.write(\”<b>浏览器是否打开cookie:</b>\” navigator.cookieenable \”<br>\”);
document.write(\”<b>运行平台:</b>\” navigator.platform \”<br>\”);
document.write(\”<b>系统语言:</b>\” navigator.systemlanguage \”<br>\”);
document.write(\”<b>浏览器代理用户:</b>\” navigator.useragent \”<br>\”);
</script>
</body>
</html>

除了可以在浏览器中通过执行\”文件\”——>\”新建\”——>\”窗口\”菜单命令打开一个新窗口外,也可以通过代码来打开一个新窗口,此时,我们需要使用到window对象的open方法.其语法格式为: var window_object=window.open(\”url\”,windowname,[features]); 。
<html>
<head>
<title>open方法的简单应用</title>
<script language=\”javascript\”>
function opennewwindow(){
var winobj=window.open(\”http://www.google.com\”,\”google\”);
}
</script>
</head>
<body>
<h3>open方法的简单应用:点击即可打开google</h3>
<a href=\”javascript:opennewwindow()\”>点击即可打开google</a>
</body>
</html>

3、  document对象  
而如果我们想真正控制窗口中的内容,就必须学习javascript的文档对象模型(dom, document object model)。利用文档对象模型,使用javascript操作页面的过程通常我们称为动态html,也称为dhtml或dynamic html。



Powered By wordpress Copyright JavaScript在线教程 © 2009-2012 版权所有