7项Web开发者需要了解的新技术

Server-side JavaScript

JavaScript 现在已经是非常流行的Web客户端编程语言了，但JavaScript也越来越多的出现在服务器端了，通过强大的 JavaScript 服务器端环境：Jaxer, Node.js and Narwhal.

下面代码显示如何用 Node.js 创建一个简单的 Hello World 程序

var sys = require("sys");
sys.puts("Hello World!");

更详细内容请阅读: Learning Server-Side JavaScript with Node.js

HTML5 drag & drop

HTML5 让网页上的拖放变得非常简单，我们只需要简单的定义 draggable="true" 属性即可，如下所示：

<div id="columns">
  <div class="column" draggable="true"><header>A</header></div>
  <div class="column" draggable="true"><header>B</header></div>
  <div class="column" draggable="true"><header>C</header></div>
</div>

有了这些 draggable=true 的元素，我们只需要编写一些简单的 JavaScript 代码来处理拖放，这里不再详细描述处理过程，如果你感兴趣，可以阅读这里。

提示：如果你希望阻止可拖放元素被选中，可使用以下 CSS 规则：

[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

More info: Cross Browser HTML5 Drag and Drop

Forms, the HTML5 way

HTML5 规范在表单定义方面引入很多新特性，包含很多新的表单组件，例如日期选择、数字调整、使用正则表达式对输入框进行验证等等（email、tel、link）

下面代码显示了一些新的表单元素：

<form>
	<label for="range-slider">Slider</label>
	<input type="range" name="range-slider" id="range-slider" class="slider" min="0" max="20" step="1" value="0">

	<label for="numeric-spinner">Numeric spinner</label>
	<input type="number" name="numeric-spinner" id="numeric-spinner" value="2">

	<label for="date-picker">Date picker</label>
	<input type="date" name="date-picker" id="date-picker" value="2010-10-06">

	<label for="color-picker">Color picker</label>
	<input type="color" name="color-picker" id="color-picker" value="ff0000">

	<label for="text-field">Text field with placeholder</label>
	<input type="text" name="text-field" id="text-field" placeholder="Insert your text here">

	<label for="url-field">Url field</label>
	<input type="url" id="url-field" name="url-field" placeholder="http://net.tutsplus.com/" required>

	<label for="email-field">Email field</label>
	<input type="email" id="email-field" name="email-field" placeholder="contact@ghinda.net" required>

	<button type="submit" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
	<span class="ui-button-text">Submit form</span>
	</button>
</form>

More info: How to Build Cross-Browser HTML5 Forms

CSS animations

很多现在的浏览器都支持 CSS 动画，是的，CSS 已经允许你创建一些简单的动画，而无需 JavaScript 的支持。

下面代码显示如何让背景色改变：

#logo {
	margin: 15px 15px 0 15px;
	background: red;
	float: left;

	/* Firefox 4+ */
	-moz-animation-name: colour-change;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;
	-moz-animation-duration: 30s;

	/* Webkit */
	-webkit-animation-name: colour-change;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 30s;
}

@-moz-keyframes colour-change {
    0% {
		background: red;
    }
	33% {
		background: green;
    }
    66% {
    	background: blue;
    }
}

@-webkit-keyframes colour-change {
    0% {
		background: red;
    }
	33% {
		background: green;
    }
    66% {
    	background: blue;
    }
}