Loading...

javascript初级教程2:操作文档对象

Filed under: HTML客户端,网站技术 — 江东 @ 2008-07-17 20:22:05 才(4)条评论

传说在很久很久以前,我打算写一下javascript入门到文章,结果仅仅在开了一个头之后便忘记续写了。今天晚上,忘记把电池带回家了,做不了其他事情,于是乎抓紧时间补上后续的教程。

在上次的日志中,我谈到这样一个看法:服务器端程序是负责输出文本,也包括输出javascript,而javascript则是负责操作浏览器。今天我就大致的说一说javascript是如何操作浏览器的。在javascript中,我们可以将一切都看作对象(各位看官,别看见对象就害怕,其实js的这个对象没有那么恐怖)。首先我们来举一个通俗的例子,比如我们想叫一个小妹妹把一个饭碗举起来,用javascript可以这样表达:

人.女人.小妹妹.右手.捧起(饭碗)。

我们看看这代代码,首先找到对象人.然后引用人的成员.女人,最后定位到右手,引用函数“捧起”,参数就是饭碗了。

好了,所以,你知道了一些常见的对象表述,便可以灵活的运用js来操作了。下面介绍一下常用的操作:
alert('hi');//警示消息,内容是"hi",当然hi也可以是其他变量
window.close();//关闭窗口
document.getElementById("my-id").value = "123";//给id="my-id"这个元素赋值 .value只对表单有效
document.getElementById("my-id").innerHTML = "123";//如果 id元素是html区域,如div span li等等
document.getElementById("my-id").innerHTML = "这里也可以是html代码";

是不是很简单呢,注意上面代码中大小写不能错误!

今天就写这么简单的几行,因为电池快用尽了,其实知道对象操作的基本思想之后,你甚至可以直接用javascript框架了。

一个简单的画面切换例子

Filed under: HTML客户端,网站技术 — 江东 @ 2008-07-06 18:06:31 才(6)条评论

有了jQuery,一切都变得那么简单;

web编程难煞人,一只红杏出墙来;

切换不用flash,一只红杏出墙来;

上面的文不对题,不合逻辑,不过,不合逻辑是当今的主旋律,所以在写这个日志之前,我吟诗几首,做了几个俯卧撑,这才正二八经的开始。

下面这个效果大家都见过吧,比如迅雷的影片介绍,但是有很多是用flash来完成的,当然,也可以用html+css来完成
,下面是代码,具体的解释请看代码中的注释: (read on …)

访客留言历史记录插件 发布

Filed under: HTML客户端,PHP,Wordpress,网站技术 — 江东 @ 2008-06-25 15:07:28 才(18)条评论

按照以前的习惯,该插件的名字叫做:cos_visitor_comment。

插件功能:根据cookie,显示当前访问blog访客的历史留言,方便访客查看、检查。

插件实现:基于ajax,所以即使页面全部静态化也可以正常使用

安装方法:上传插件-》激活插件-》修改模板。在需要的显示访客留言的地方,插入如下代码
< ?php show_visitor_comment(5,50,"我的评论");?>
5表示只显示最近5条,50表示字数从第50个开始切断,“我的评论”则是该部分的标题,还不清楚的朋友,改变上面几个参数看看就知道了。

css美化:html结构如下,熟悉css的自行美化

  • 我的评论
  • 评论
  • 评论
  • 评论


下面是CSS示例,修改成你需要的样式,添加到模板文件的css中(本人喜欢集中处理,所以这个插件没有另行增加css)
ul#visitor_cmt{
padding:3px;margin:3px;border:1px solid #ccc;width:100px;
/*整个ul的风格*/
}
ul#visitor_cmt li{
list-style:none;/*不显示list的默认黑点*/
}
li.li-1{color:red;/*交替颜色*/}
li.li-0{color:green;/*交替颜色*/}
ul#visitor_cmt li.vc_title{/*修饰标题*/
font-size:120%;
font-weight:bold;color:Red;list-style:none;
}

有朋友问过几次本站的“我的留言”是如何实现的,所以干脆花点时间整一个插件送给你们,喜欢的就下载用吧,有问题的就请留言哈。
对了,下载地址在这里cos_visitor_comment(一定得把下载地址放在最后,否则某些小弟弟又不看说明,然后问出一大堆重复的问题出来)

cos_visitor_comment(支持wordpress3.0)

google的圆角代码

Filed under: HTML客户端,网站技术 — 江东 @ 2008-04-28 14:45:43 才(8)条评论

不整点圆角怎么能算是2.0呢,所以我在bloggermap的新版设计中全部采用了圆角。下图是正在孕育中的新版bloggermap界面截图
而那个圆角是采用google的圆形背景来作为转角实现的,具体的思路如下图所示: (read on …)

”javascript 尚未实现“错误解决办法

Filed under: HTML客户端,网站技术 — 江东 @ 2008-04-24 10:56:27 才(4)条评论

被该死的IE给搞惨了,耽误了很多时间,实在不划算。打开页面的时候,FF下一切正常,但是当我用IE6测试的时候,JS总执行不下去了,提示“尚未实现”,无论怎么搞就搞不定。在firebug中也没有看到任何错误提示。打开IE就遇到该死的“尚未实现错误”,根据IE中提示的位置找过去也没有发现任何错误,看来IE的报错定位也不太准确。万般无奈之下,google搜索,终于找到了错误所在的地方。原来错误在于window.onload= myFunc(var1,var2);IE的window.onload函数中不支持参数调用,虽然函数会照样执行,但是却会出现报错,影响后续脚本的继续执行,下面是两种简单而有用的解决办法:

  1. 再写一个函数,譬如function loadFunc(){ myFunc(var1,var2) },然后window.onload = loadFunc;
  2. 使用匿名函数。onload =function(){myFunc(var1,var2)}

足够了,就这两种方法。

jQuery应用系列之 通过遍历进行快速表单验证

Filed under: HTML客户端,网站技术 — 江东 @ 2008-04-21 09:45:21 才(4)条评论

在很多情况下,我们对表单中的某些字段需要在客户端做简单的js验证,比如不能为空。按照传统的方式,我们可能就会去写一个函数来一个一个判断表单中的字符是否为空,为空则返回false,譬如:

function validForm(){
if( ( document.getElementById('name').value.length < 1 ) &&( document.getElementById('pass').value.length < 1 ) &&( document.getElementById('email').value.length < 1 ) &&( document.getElementById('tel').value.length < 1 ) &&( document.getElementById('gendar').value.length < 1 )){ alert('带有*号的部分不能为空');return false; } }

那么如果使用了jQuery这一切可能便得更加简单,譬如下面这个表单

*
*
*
*


不知道你是否注意到,上面凡是打*好的表单域,我都用了一个css属性,那就是”important”,这样的好处有两点,1.我们可以在css中将必须填写的字段用特殊的样式表来显示;2.方便在jquery中遍历,下面是jquery简单表单验证的函数

function validForm(){
var is_not_valid = false;
$("#reg input.important").each(function(i){//遍历id=reg中的class=important的表单
if(this.value.length < 1){//如果表单为空 i ++ ;//增加i is_not_valid = true; if( i < 2 )//因为这个遍历循环无法用break跳出,只能通过i自增的方式让js只弹出一次alert alert('带星号的必须填写'); this.focus(); } }); if( is_not_valid ) return false; }

表单域太少,所以也许你看不到这个的优点何在,但是一旦不能为空的表单数量很多,优势就明显了!

wordpress和ajax

Filed under: HTML客户端,Wordpress,网站技术 — 江东 @ 2008-04-15 10:10:53 才(11)条评论

松岛枫很多朋友都认为ajax能提高网页的速度,但是我更喜欢用ajax来提高用户体验平衡动态页面与静态页面之间的关系。我曾经乱谈过ajax,原因在于有几个朋友认准了一个死理:那就是ajax对改善速度的作用是大大的!而今天的这篇文章中,我想重点谈一谈如何在wordpress系统中使用ajax,也就是如何通过修改模板或者插件在wordpress中灵活的运用ajax。

对了,如果你还不太清楚ajax的基本原理,请自行google之,本站就不再为互联网贡献垃圾了。在实际的操作中,我们运用ajax的方式大部分情况下为异步请求(当然你也可以设置成同步模式),异步请求的好处在于浏览器在载入html的同时,后台也会用js请求数据,所以载入数据的时候感觉不到任何卡页的现象。由于数据的请求是由JS控制,因此你可以将ajax代码嵌入到静态化的wordpress页面中,从而将部分的内容通过ajax做实时的请求,而本文的目的便在于此。 (read on …)

本站添加了gravatar

Filed under: HTML客户端,网站技术 — 江东 @ 2008-02-20 12:35:27 才(23)条评论

gravatar是什么东西?

简单的来说,gravatar是一个开放头像系统,当在该系统注册了email之后,你就可以上传你自己的头像作为该email的身份标志,其他公共网站可以通过你的email地址将头像显示出来.其实这个东西实现起来很简单,但是人家这个服务很有创意,赚钱不少呢,羡慕之…

应网友misser 的要求,本站的留言系统就添加了这个东西,添加起来很简单,下面是我在comment.php中添加的部分代码
通过这样的方式就可以引用gravatar的图片了.具体的引用方式参见这里.

不过我也可以在我的这个blog给那些不喜欢看e文的朋友描述一下如何引用gravatar的图片.任何一个在gravatar注册过的用户,只要你知道他的email就能很容易调用该会员的头像了,可以用email的md5编码来获取会员头像:
引用头像的图片地址是:
http://www.gravatar.com/avatar.php?&gravatar_id=279aa12c3326f87c460aa4f31d18a065
gravatar_id后面的值即为email的md5加密后的结果,在php中可以用 md5函数来实现
&rating=G 头像的属性,这里写G就可以了,G表示大众化的,就是不黄不暴力的图片
&size=40图片的大小,不能超过80
&default=http%3A%2F%2Fwww.example.com%2Fsomeimage.jpg这个是默认图片的地址,如果该用户不存在则显示这个地址的图片

嘿嘿,别说我火星哈!