Archive for the ‘Javascript’ Category

[转]如何做好一份前端工程师的简历?

July 8, 2009 by 龙 | Category:HTML/CSS, Javascript | 1 Comment 681

春节前在蓝色理想上发了个“雅虎口碑招聘前端工程师 ”的启事,节后收到很多简历,加之HR通过专业招聘网站得到的简历和朋友同事推荐的简历,数量上是相当的多,把这些简历一一看完真是一个漫长而幸苦的体力活,何况我还要仔细认真的去提取和核查有用信息评估其能力,尽量不错过任何一个埋藏在大量简历中合适的人,这绝大部分时间并不是一个相当愉悦的过程。所以,我感觉有必要来谈谈:如何做好一份前端工程师的简历。

一、你是前端工程师

虽然简历都会有一些常规信息,但职业决定了这份简历核心内容和求职成败。所以,这份简历应该尽可能体现你自己是一个合格的前端工程师。专业的前端工程师是什么可以看看去年Nate Koechley的演讲《Professional Frontend Engineering》,前端工程师应该关注的内容可以从克军总结的“前端工程师应该关注什么”的思维导图中窥出一二,学习内容聚合可以看看陈成总结的《前端开发大众手册(包括工具、网址、经验等)》

毫无疑问,前端工程师应该知道如何用简历体现其专业技能和职业精神,这是每个应聘者应该考虑的问题。

二、内容为王

More »

jQuery选择器

July 7, 2009 by 龙 | Category:Javascript | No Comment 679

$的选择器部分:
凡是运用$,其返回值是一个object
$选择器主要用于选择标签.基本用法是同css的选择器.但是,很让人兴奋的是,他支持常见的浏览器,而css中很多选择器是IE6所不支持的.
1.基本选择器(3种):
$(“标签名”),如$(“p”)是选取了所有的p标签节点
$(“#id名”),如$(“#test”)是选取了id为test的标签节点
$(“.class名”),如$(“.test”)是选取了所有class为test的标签节点
上面的$(“标签名”)和$(“.class名”)返回的都是所有满足的节点,至于进一步筛选可以添加一些函数,如eq,gt,lt等等.
2.组选择器:
下面还是现做一个约定:把”标签名或#id名或.class名”记作mix,则mix表示一个标签名,或一个#id或一个.class.
$(“mix,mix,mix,…”),如:$(“div,#test1,p,.test2,#test3″)
More »

Ajax 天气预报面板

June 15, 2009 by 龙 | Category:Javascript | No Comment 626

前几天本来想搞的个天气预报,放到自己的站点。想调用别人的Web Service。所以就到google上找了一下,找到了一篇关于这方面的好文章。这里面讲了四种方法来。都是构建一个 Ajax 天气预报面板。下面是这四个方法

第一种:遍历 DOM 树:服务器上简单的 Web 代理从 NWS 服务器拉出数据并发送到浏览器。在浏览器内,JavaScript 解释器从返回的 responseXML DOM 树提取部分数据,添加一些 HTML 格式,然后将其插入到页面中的 DIV 标记。

第二种:服务器上的 XSLT:一个服务器端脚本从 NWS 服务器拉出数据,使用 XSLT 将数据由 XML 转化成 HTML 格式,然后将 HTML 代码片段发回浏览器。浏览器随后将代码片段插入到一个 DIV 标记。

第三种:客户端 XSLT :该方法使用一个简单的 Web 代理(同方法 1)将 XML 数据发送回浏览器。与方法 1 不同的是,使用客户端 XSLT 将 XML 转换为 HTML,并将其插入到一个 DIV 标记。

第四种:JSON 和动态脚本标记,一个外部服务(Yahoo! Pipes)将 NWS 数据从 XML 转换为 JavaScript Object Notation (JSON)。天气预报面板库利用 JSON 的特殊能力和 JavaScript 语言将转换后的数据拉回到浏览器 — 避免了对代理的需求。

这四种方法都是将xml的数据提取出来。

不过遗憾的是自己没有能找到想一个好的数据源,看了别人提供的数据源都不怎么样,如果谁知道这个数据源的可以给我留下言。

具体的方法大家可以到原文看:天气预报面板

谈谈sIFR – 可伸缩Inman Flash替换

May 14, 2009 by SLJ | Category:HTML/CSS, Javascript | 1 Comment 3,377

最近都在赶工我的新网站 Cuthtml.com ,在这个过程中也学了许多的东西,在校验XHTML 1.0 Strict的时候学到了 a 标签被取消 target 属性之后的弥补方法等新知识。不过今天先来看看sIFR,这个名词也是在参考同行网站时发现的。

        sIFR(scalable Inman Flash Replacement),即“可伸缩Inman Flash替换”技术。是由Mike Davidson在IFR方法的基础之上扩展的一种技术。它通过Flash + JS + CSS联合实现在不替换页面中文本元素的情况下,对文本进行更为细腻准确的效果渲染。
       2004年,网站开发者Shaun Inman创造了Shaun Inman Flash替换法。这种方法既在一定范围内保持了轻便性和直观性,又完成了用基于Flash的文本替换普通HTML文本的工作。
       网站开发者Mike Davidson在Inman技术的基础上构造出能适应文字放缩和多行文本的系统,更进一步的完善了健壮性。
使用sIFR你可以任意定义WEB中的文本字体,即便是客户端浏览器未安装的字体。sIFR使用Flash渲染字体效果,可以平滑消除文本锯齿,你可以像使用用CSS控制文本一样轻松得到各种文本效果。

More »

半小时教你学会正则表达式

April 11, 2009 by SLJ | Category:Javascript, PHP | 1 Comment 3,432

Regular Expression Manual

今天发了一篇关于Apache Rewrite的日志,因为配置都是用正则表达式写的,就想翻翻以前的QQ空间,把关于正则表达式的内容贴出来。
因为是以前从网上摘的,也忘了是哪摘的了(以前没有写来源的习惯),不过在谷歌上把标题打进去会发现很多相同的文章。但是本帖结合了一些东西,所以会比原文内容丰富一些。

首先来看看百度百科的解释:一个正则表达式,就是用某种模式去匹配一类字符串的一个公式。 [百度百科释义]

想必很多人都对正则表达式都头疼.今天,我以我的认识,加上网上一些文章,希望用常人都可以理解的表达方式.来和大家分享学习经验.
  开篇,还是得说说 ^ 和 $ 他们是分别用来匹配字符串的开始和结束,以下分别举例说明
  ”^The”: 开头一定要有”The”字符串;
  ”of despair$”: 结尾一定要有”of despair” 的字符串;
  那么,
  ”^abc$”: 就是要求以abc开头和以abc结尾的字符串,实际上是只有abc匹配
  ”notice”: 匹配包含notice的字符串
  你可以看见如果你没有用我们提到的两个字符(最后一个例子),就是说 模式(正则表达式) 可以出现在被检验字符串的任何地方,你没有把他锁定到两边

   More »

JavaScript MD5 加密

April 10, 2009 by SLJ | Category:Javascript | No Comment 1,472

首先说说MD5:

MD5用的是哈希函数,在计算机网络中应用较多的不可逆加密算法有RSA公司发明的MD5算法和由美国国家技术标准研究所建议的安全散列算法SHA.
虽说已经被破解(见百度百科),但仍然是我们的加密首选。

说说用JS MD5加密的优点:

由于表单(form)在提交的时候,无论是通过GET方法还是通过POST方法,密码在提交时都会以明码的方式进行发送,很不安全。如果不是在SSL下传输的数据比较容易被分析出表单提交的密码。
优点:
1、如上所述,增加了安全性,
2、用JavaScript在客户端来加密可以减少服务器端的运算。

这是MD5的js加密代码的DEMO。其中也有MD4和SHA1的JS加密代码。原页面也又包含JS的用法

代码:

More »

jQuery Rater Star Plugin投票打星星插件

by SLJ | Category:Javascript | No Comment 2,594

jQuery Rater Star Plugin

官方的中文名是:基于jQuery的投票插件,其实就是一个打星星的插件。

查看官网: jQuery Rater Star Plugin,里面又详细的用法和演示。

之前我在制作 PlanetCoachella 的时候用的不是这套评星插件,没用到 jQuery,也挺好用的,就是没有这个插件的初始评分以及回调反馈功能。

Jcrop-jQuery图片裁剪插件

by SLJ | Category:Javascript | No Comment 2,984

刚才发了一贴关于PHP调整图片尺寸并存入服务器的日志,后来联想到了前台与用户交互的部分,就想起了一个曾经见过的jQuery插件。

翻了半天收藏夹终于找到了:Jcrop (点击打开官网)
 [singlepic id=6 w=320 h=240 mode=web20 float=]
 这是一个带缩略图的Sample,也是大多数社区网站使用的,用于用户切割上传的照片作为头像的方法。

看看其他DEMOManual

Base64 javascript encode decode 另一种不错的方法

April 9, 2009 by SLJ | Category:Javascript | 1 Comment 2,607

JS代码和相应的HTML代码如下:
More »

一个利用jQuery实现菜单跟随页面滚动而移动的代码

April 1, 2009 by SLJ | Category:Javascript | No Comment 2,436

[singlepic id=5 w=320 h=240 mode=web20 float=center]

一个利用jQuery实现菜单跟随页面滚动而移动的代码。对于一些站点的设计,可以采用这类办法。

查看DEMO

↑ Top