Mr.Think

帮朋友公司招的，募前端开发工程师一名。
职位要求:
1. 学历性别年龄不限；
2． 熟练掌握(X)HTML+CSS，能编写结构良好各浏览器兼容的CSS，语义化的符合W3C标准的HTML；
3． 熟练运用javascript以及常用javascript框架，如：jQuery；
4． 熟练使用PS, FW等制图工具，有一定的美感；
5． 对用户体验，SEO有了解；逻辑分析能力强，较强的学习能力，善于沟通，有良好的团队合作精神；
6． 有后端(如:php或java)开发经验者优先考虑。
公司介绍
上海韬人通信技术有限公司 是一家以移动通讯信息技术为核心的高科技企业，引领移动商务领域发展的专业公司。依托并支持移动、联通、电信、网通的大型短信平台从事软件开发、移动数据业务及行业短信解决方案。拥有远见的市场概念模式，非常规的理念，精准营销、高效、智能化的应用平台及增值服务，世界领先的互联网技术提供商的战略合作伙伴，并保持与全球领先的同步技术交流在日趋激烈竞争的环境中不断的超越自己，超越竞争！
联系及薪资
薪资4000+福利, 上海,徐汇.
欢迎在上海或愿意到上海发展的朋友投简历至 support@tworing.com.cn . 合则约见.

相对于jQuery、YUI以及其他一些类库的AJAX封装，原生JS的AJAX显得那么的尴尬，兼容性不好，要记很多的方法属性，调用不便捷，代码臃肿…但我还是想说，原生JS才是最根本最底层的知识（虽然实际项目中我也是以jQuery AJAX为主，为什么？高效！），求木之长者，必固其根本。
什么是AJAX? 它的优点劣势是什么？
Asynchronous JavaScript and XML（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。简单的说它是多种技术的组合，目的就是让前台的数据交互变得更快捷，不用刷新页面就可以完成数据的更新。关于它的概念，止于此。想了解更多，请前往：http://zh.wikipedia.org/zh/AJAX
优点很明显，利于用户体验，不会打断用户的操作，在不刷新页面的情况下更新内容，减小服务器压力也是它很硬性的一个优点；而缺点，除了倍受追捧的SEO问题，安全问题、前进后退（这个虽然可以用其他方法解决，但AJAX本身的机制还是没变）、破坏程序的异常机制以及对新兴手持设备支持不完美的问题都是它现存的一些缺点。人无完人，AJAX也是如此，我们并不能因为它有缺点而摒弃它。
什么地方需要AJAX?
其实这是一个太宽泛的问题，各人各项目都有不同的用处，依我的经验与理解，AJAX应该用于小面积更新数据而不希望整个页面刷新的情况下使用。比如对用户名或者注册邮箱等数据判断、内容选项卡内容、弹出的登录注册窗口以及用户提交信息后的反馈信息等等。
实践出真知！
崇尚思考加实践，我坚信这是深入任何一门技术的必备法宝。下面，我就以一个常用的验证用户是否使用的实例，浅尝辄止的讲解一下基础的AJAX。查看样例演示
验证用户名这种数据判断，不用多说了，会一点点前端的人都知道是必须的。最传统的模式可能是输入信息，然后用户点提交后alert出一个窗口，告诉用户XXX用户名已被注册，请重新输入！我讨厌极丑的alert框！我想大多用户也是一样。此时，AJAX就可以华丽登场了。当用户输入完名字后，在表单外任何地方点一下（失去焦点），AJAX就迅速把用户输入的信息反馈到服务器端判断，并迅速返回一个信息告知用户输入的昵称是否可用。如此，我们需要一个前台的输入表单，代码如下：

<p>用户名：
</p>

另外，我们还需要一个判断输入昵称是否存在的后端页面（本文以PHP为例，这部分不用细究）:

...
if(isset($_GET['entryname'])){
	$entryname=$_GET['entryname'];
}else{
	$entryname='DATA NULL';
}
$sql=sprintf("select * from i_test_ajax where nickname='%s'",$entryname);
$res=$iajax->query($sql);
//sleep只是为了展示readState==1时的效果
sleep(1);
if(($res->num_rows)>0){
	echo "抱歉！此昵称已存在 :(";
}else{
	echo "恭喜！此昵称可注册 :)";
}
...

如此，万事俱备，只欠东风，剩下的就交给AJAX来处理了。
XMLHttpRequest，不得不提的一个对象，AJAX最核心也是最底层的对象。可悲哀的是，它是W3C的一个标准，但微软IE一直很自我（微软IE）。怎么办？当然是用一个方法和谐掉它们。微软IE支持ActiveXObject(‘Microsoft.XMLHTTP’)对象，这样就简单了：

//兼容的XMLHttpRequest对象
IXHR: function(){
	if(window.ActiveXObject){
			XHR=new ActiveXObject('Microsoft.XMLHTTP');
		}else if(window.XMLHttpRequest){
			XHR=new XMLHttpRequest();
		}else{
        	return null;
        }
}

兼容的XMLHttpRequest对象实现了，接下来写一个简单的onblur事件，即当输入值后，表单失去焦点后开始判断并迅速回馈一个信息到前台。代码如下：

//触发焦点时执行
document.forms['iform'].nickname.onblur = function(){
    //输入的值
    var val=document.forms['iform'].nickname.value;
    //对用户名的判断
    if(!/^[a-zA-Z0-9_]{3,16}$/.test(val)){
		alert('请输入3~16位由英文、数字、下划线组成的昵称！');
		return false;
    }
    //初始化一下XHR
    iBase.IXHR();
    //原来需要新打开的判断页面用GET使用异步
	XHR.open('GET','/demo/ajax/iajax20110306_query.php?entryname='+val,true);
	//与readyState属性有关，当readyState改变时它才会触发
	XHR.onreadystatechange=returnFun;
	//异步处理完成后发送数据出去（比如某些需要在焦点事件后再执行的）
	XHR.send(null);
}

解释一下AJAX部分的代码。iBase.IXHR()，初始化XHR，以保证XMLHttpRequest对象的兼容。接下来，通过以GET的方式，异步发送到/demo/ajax/iajax20110306_query.php页面进行验证。有人会问什么是GET，GET是从服务器上请求数据，GET方法就是把数据参数队列加到一个URL上，值和表单是一一对应的，比如本文的entryname=val。这个概念可能属于后台程序的范畴，不在此细说。然后，我们需要用到一个onreadystatechange事件属性，这个属性是用来存储函数（或函数名），每当readyState属性改变时，就会调用该函数，即本文中的returnFun；最后，我们还要发送一个数据到服务器，send属性一般用于数据交换,而本文只是一个简单的验证判断，所以，send一个空值。
基本的判断与数据发送完成了，接下来还剩一个关键的信息获取，即returnFun。先看代码：

function returnFun(){
    //当send()已调用，正在发送请求时，显示Loading...
	if(XHR.readyState==1){
		iBase.Id('tips').innerHTML='Loding...';
	}else if(XHR.readyState==4){
		//当响应内容解析完成，可以调用时
		//更缜密，再判断一下status是否成功
		if(XHR.status==200){
			//responseText为返回的文本
			iBase.Id('tips').innerHTML=XHR.responseText;
		}
		//使用完请销毁，避免内存泄露
		XHR=null;
	}
}

此函数是用来通过判断readyState及status状态也及时反馈给用户相应的提示信息。readyState有五种状态：
　　0 (未初始化)： (XMLHttpRequest)对象已经创建，但还没有调用open()方法；
　　1 (载入)：已经调用open() 方法，但尚未发送请求；
　　2 (载入完成)： 请求已经发送完成；
　　3 (交互)：可以接收到部分响应数据；
　　4 (完成)：已经接收到了全部数据，并且连接已经关闭。
如此一来，你应该就能明白readyState的功能，而status实际是一种辅状态判断，只是status更多是服务器方的状态判断。关于status，由于它的状态有几十种，我只列出平时常用的几种：
　　100——客户必须继续发出请求
　　101——客户要求服务器根据请求转换HTTP协议版本
　　200——成功
　　201——提示知道新文件的URL
　　300——请求的资源可在多处得到
　　301——删除请求数据
　　404——没有发现文件、查询或URl
　　500——服务器产生内部错误
至此，一个简单的AJAX验证实例就完成了：查看样例演示

关于AJAX的基础介绍与实例就这么多，关键还是在于自己的实践与思考。其实这其中涉及知识并不复杂，若有后端程序的基础，学起AJAX会更加容易，关键是要想明白其中的逻辑关系。有兴趣的话，可以自己写一个不刷新页面加载新内容的AJAX，或者研究一下jQuery中关于AJAX的封装。

——听说你跳槽了？回西安了？
——恩。
——薪水很高吗？
——跟原来差不多。
——那你去那儿干啥？
——购买力增强三倍。
要求：
1. 只招猛人，菜鸟绕行！
2. 高效、专注、诚实、负责，能承受高强度工作；
3. 精通PHP+MySQL，熟悉WAMP开发流程,能写优质的代码；
4. 一年以上商用网站开发经验，熟悉XHTML/CSS/JAVASCRIPT及AJAX技术者优先；
薪资：
提供京广沪相同水准的薪水及同等的福利（不明确？能力决定薪水）。
公司介绍：
智讯互动，西安首家整合互动营销机构，已搞定西安最优质的客户，万事具备，只欠猛人。
我们提供与京广沪相同水平的薪水，在西安这座很有味道的城市，大家可以过上更体面的生活。
热切欢迎业内的西安游子回来。
我们的人才理念很简单：
·我们诚挚的邀请优秀的人才加盟，并为他们创造尽量宽松、愉快的工作环境。
·我们推崇专注而高效的工作，轻松开放的沟通，用创造性的想法解决问题。
·我们提供高于同城行业标准的薪水，能让你在这个城市里体面、有尊严的生活。
在我们的团队中，有艺术生、文科生、理科生、退学生；
有人热衷相声表演，有人钻研佛教文化，也有人喜欢泡淘宝和豆瓣；
有人是手持设备技术发烧友，有人是游戏狂人，霸占公司那台Wii；

我们鼓励背景各异的人在此互相分享，激荡创造力。
投递:
cnbluebird#gmail.com（非诚勿扰）

请在新版标准浏览器(Chrome/Opera/Firefox/Safari…)中浏览本文中的样例,否则你看到的只是一个个空白的表单! ⊙﹏⊙‖∣

时光车轮滚滚碾来,前端之路永无止歇.对于这个前端这门精一多专的技术,任何一次技术革新,我们都必须第一时间去了解它学习它,比如Web世界里这簇美艳的花朵—HTML5.虽然HTML5发布之初,许多人(包括我)都觉得普及它还很遥远,但自发布以来,许多企业级网站对它的尝试应用(比如<!doctype html>应用,比如canvas的应用),使HTML5的迈出了一大步,随之而来IE9的发布,无疑又让我们看到了HTML5离我们不再遥远.
学习HTML5半年有余了,虽然对它的离线存储以及canvas等革新性技术还是一知半解,但我还是希望我现在所学到的能帮助更多的前端人学习这门毋庸置疑是新趋势的技术.本文我将详细介绍一下HTML5中对表单功能的更新.
阅读本文前建议在Opera最新版中打开样例演示页查看样例演示
一、表单结构更自由
XHTML中需要放在form之中的诸如inpu/button/select/textarea等标签元素,在HTML5中完全可以放在页面任何位置,然后通过新增的form属性指向元素所属表单的ID值,即可关联起来.
比如:

	...

二、多样的输入类型(大部分新类型目前并不为所有标准浏览器支持,请参见样例演示中的提示)
email输入类型

此类型要求输入格式正确的email地址,否则浏览器是不允许提交的,并会有一个错误信息提示.此类型在Opera中必须指定name值,否则无效果.
url输入类型

上面代码展示的文本域要求输入格式正确的URL地址,Opera中会自动在开始处添加http://.
日期时间相关输入类型(这些个很牛X的)

这一系列是很酷的一个类型,完全解决了烦琐的JS日历控件问题.但目前MS只有Opera/Chrome新版本支持,且展示效果也不一样.
number输入类型(这些个很牛X的)

这个不用多解释了,要求输入一个数字字符,若未输入则会抛出一个错误.
range输入类型

此类型将显示一个可拖动的滑块条,并可通过设定max/min/step值限定拖动范围.拖动时会反馈给value一个值.
search输入类型

此类型表示输入的将是一个搜索关键字,通过results=s可显示一个搜索小图标.
tel输入类型

此类型要求输入一个电话号码,但实际上它并没有特殊的验证,与text类型没什么区别.
color输入类型

此类型表单,可让用户通过颜色选择器选择一个颜色值,并反馈到value中.
三、新增的表单属性
placeholder属性

这是一个很实用的属性,免去了用JS去实现点击清除表单初始值.浏览器支持也还不错,MS除了Firefox,其他标准浏览器都能很好的支持.
require/pattern属性

表单验证属性,require类型时,若输入值为空,则拒绝提交,并会有一个提示.上面两种写法都对,这个很有用.并且可以用于textarea以及hidden/image/submit类型.pattern类型为正则验证,可以完成各种复杂的验证.这两种类型在Opera中必须指定name值,否则无效果.
autofocus属性

默认聚焦属性,可在页面加载时聚焦到一个表单控件,类似于JS的focus().
list属性

该属性需要与datalist属性共用,datalist是对选择框的记忆,而list属性可以为选择框自定义记忆的内容.
max/min/step属性

限制值的输入范围,以及值的输入渐进程度,比如可在number设定输入最大值最小值,或者在range中设定拖动阶梯.
autocomplete属性

此属性是为表单提供自动完成功能.如果该属性为打开状态可很好地自动完成.一般来说,此属性必须启动浏览器的自动完成功能.

路漫漫其修远兮，吾将上下而求索.前端之路,学无止尽.痛并快乐着. ╰(￣▽￣)╮

今天又要用到动态显示当前时间,且要求可以切换24/12小时制, 记得很久前写过一个24小时制的,但一时没能找着, 于是又重新写了个,若有需要的朋友自行复制粘贴一份吧.
很简单的一个功能函数,实现方式不多言,用Date()对象获取到当前时间,然后用setTimeout每隔1秒获取最新的时间.
写的过程中碰到过一个小小的问题: 我最初的想法是用setInterval()每隔1秒获取最新时间,可是可以,但setInterval如果放在主函数内部,但导致内存泄漏(至于原因,暂时还没想明白),后来在Rocky的提醒下用setTimeout()才解决内存泄漏问题,感谢Rocky同学:)
核心代码及演示查看样例演示

function nowTime(ev,type){
	/*
	 * ev:显示时间的元素
	 * type:时间显示模式.若传入12则为12小时制,不传入则为24小时制
	 */
	//年月日时分秒
	var Y,M,D,W,H,I,S;
	//月日时分秒为单位时前面补零
	function fillZero(v){
		if(v<10){v='0'+v;}
		return v;
	}
	(function(){
		var d=new Date();
		var Week=['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];
		Y=d.getFullYear();
		M=fillZero(d.getMonth()+1);
		D=fillZero(d.getDate());
		W=Week[d.getDay()];
		H=fillZero(d.getHours());
		I=fillZero(d.getMinutes());
		S=fillZero(d.getSeconds());
		//12小时制显示模式
		if(type && type==12){
			//若要显示更多时间类型诸如中午凌晨可在下面添加判断
			if(H<=12){
				H='上午 '+H;
			}else if(H>12 && H<24){
				H-=12;
				H='下午 '+fillZero(H);
			}else if(H==24){
				H='下午 00';
			}
		}
		ev.innerHTML=Y+'年'+M+'月'+D+'日 '+' '+W+' '+H+':'+I+':'+S;
		//每秒更新时间
		setTimeout(arguments.callee,1000);
	})();
}