很多的朋友在学习 web 开发的时候，经常会测试某个方法或者属性等一些功能。但是测试的时候又会去做一些项目的创建，很是麻烦。如何做到不麻烦呢？下面给大家介绍一个在线的应用——JS Bin。
在线地址：http://jsbin.com/
打开后你会看到这样的一个界面
在开始使用的时候，我建议你注册一个账号，这样你所写的程序就会被保存下来，不会关闭了就丢失。登陆账号后你会看到这边多出了个按钮。
想要使用你写过的程序，在这边打开就可以找到了。使用 ctrl + o 和打开 File里面的My Bins也是可以打开的。
现在和大家说一下怎么使用
1.创建 New bin
点击 New bin 或者是点开 File 下拉框的 new 一样可以创建。
初始的界面有一个 html 文件的编辑和 JS 文件的编辑，再加上一个可以实时预览的输出窗口，这点就很棒，不过要实现 JS 实时预览，大家就要把自动运行 JS 按钮的复选框打勾才行(这里默认是勾选上的)。
其实不只是这三个窗口，总共有五个窗口，只要点击相关的按钮就可以打开了。另外的两个分别是CSS窗口和Console按钮。
2.简单的HTML+CSS编程
编程的时候，你不用建样式表链接进来就可以使用，就像这样：
是不是很简单，重要的是，html的编码遵循 Zend Coding快速编码的方式。不会 Zend Coding快速编码的童鞋赶快去瞧一瞧，这个可以让你的编码事半功倍，效率很高哦！比如我们这样来创建一个导航栏的架构：
只要按一下
Tab键，它就会编程下面的效果。
是不是很爽，一句顶九句。
我会在以后的文章里和大家说说 `Zend Coding`快速编码的使用，欢迎大家关注。
3.加点 JS 玩玩
要使用 JS 大家经常会直接用 jQuery库 ,所以这里就要导入 jQuery库，那么如何导入？看看这里：
这里会给大家提供多个版本的库，当然不只是jQuery 这么简单，大家自己动手往下拉，你就会发现更多惊喜。和CSS一样，你也无需将 JS 文件链接到 html。
添加好后，你就可以挥一挥衣袖，开始码了。给大家看个栗子：
在编写 JS 的时候，常常会打开 Console 来进行简单的调试输出，这里也有，打开Console几面，把上面的栗子这样输出，一样的结果：
如果你在编写的时候，有出现错误，那么 JS 界面下面也会给出相应的提示，如下所示：
其它的库大家自己弄去玩玩，一定让你感到方便不止一点点。
4.下载和分享编写项目
编写好的项目如何下载到本地使用呢？细心的朋友可能在就发现了在File下拉框有一个Download的选项。
下载后，你会发现，它其实就是把所有的文件集合成一个html文件了。内容会变成这样：
如果只是这样的使用，那你就错了，这里还有一个分享的功能Share。点击分享的时候会有这些选项和内容让你选择和使用。
下面有个What they'll see的预览界面。如果把这段代码嵌入到我们的网页中，那就是这样的：
<!DOCTYPE html>
<meta name="robots" content="noindex">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<a class="jsbin-embed" href="http://jsbin.com/zirijoh/embed?html,css,js,console,output">
JS Bin on jsbin.com
</a>
<script src="http://static.jsbin.com/js/embed.min.js?3.35.13"></script>
</body>
</html>
如果只是简单的链接，那链接过去的自然就是JS Bin网站，看到的效果还是一样的：http://jsbin.com/zirijoh/edit?html,css,js,console,output
以上的是窗口全选的样子，大家可以自己调整想要的界面。
5.美中不足
没有什么是完美的，好的东西也会有让大家不开心的时候。看到那个大大的绿色按钮了么？
如果想使用更多的功能，就要这样，不过我觉的没必要，因为现在的功能就足够我们简单的使用了。
最近一直在想写点什么？写就要写点有用的，总结点实际的，方便你我他，不然真的是浪费自己的时间也浪费大家的时间。如果我的文章能帮助到你，那就是我最开心的了。
如果发现错误的地方，欢迎指出！^_^