使用heroku部署nodejs应用

2011-07-22 No Comments

开发环境在ubuntu10.04下。 $ ruby -v ruby 1.9.2p290 (2011-07-09 revision 32553) [i686-linux] $ gem -v 1.3.7 $ node -v v0.4.9 $ npm -v 1.0.15 $ git .... 确保以上软件安装完成。可参考如下文章。 Ubuntu 10.04安装ruby1.9.2和rail3.0.1 Ubuntu下安装nodeJS npm Set Up Git 准备工作尚未完成，还要到heroku官方注册账户，Sign Up。 下面要安装heroku软件包，推荐使用gem来安装。 $ gem install heroku $ heroku version heroku-gem/2.3.6 如果执行heroku命令的时候，终端报错，找不到该命令，这是因为heroku不在环境变量里，还要执行下面的步骤。 $ gem environment ...... - INSTALLATION DIRECTORY: /usr/local/lib/ruby/gems/1.9.1 ...... $ export PATH=/usr/local/lib/ruby/gems/1.9.1:$PATH 准备工作基本完成。下面开始创建nodejs应用。打开ubuntu的终端控制台，执行 $ mkdir node_app $ cd node_app $ gedit web.js 然后将下面的内 » » »阅读更多

jQuery幻灯片插件开发

2011-07-19 No Comments

憋了N天，终于整出来个jQuery的幻灯片插件。jQuery的插件资源非常丰富(25个必须学会的jQuery幻灯片插件教程)，没有必要重复发明轮子，任务需要或技能训练，必要的时候还是要动手去做一下，有利于提高JS能力。 先来看一下如何使用该插件，知道如何使用jQuery访问DOM，就可以轻松使用该插件。当然要先从HTML结构开始出发。 HTML代码 <div id="ad_gallery"> <div class="ad_sheet_wrap"> <ul class="ad_sheet_con"> <li><a href="#"><img src="image/image_1.jpg"></a></li> <li><a href="#"><img src="image/image_2.jpg"></a></li> <li><a href="#"><img src="image/image_3.jpg"></a></li> <li><a href="#"><img src="image/image_4.jpg"></a></li » » »阅读更多

Ubuntu下安装nodeJS

2011-07-08 No Comments

神马？！不知道什么是nodeJS，那你跟我一样OUT了。简单说来，nodeJS是运行于服务器端的语言，基于V8引擎，就是说以后前端和后端都可以用JS来写，很期待！关于nodeJS的详细信息，请直接访问官网。 下面来看一下如何安装nodeJS。linux下安装可以采用简单的三部曲，window下可以使用cygwin安装。我的测试环境用的Ubuntu。 首先从官网下载最新的套件，进入下载页。 $ wget http://nodejs.org/dist/node-v0.4.9.tar.gz $ tar -zxvf node-v0.4.9.tar.gz $ cd node-v0.4.9 $ ./configure $ make $ make install 不幸的是，安装过程中出现如下错误。 Checking for openssl : not found 网上有解决办法，似乎缺少libssl-dev开发库，用常用的软件安装命令可以搞定它。 $ sudo apt-get install libssl-dev 然后在控制台下输入 $ node -v v0.4.9 即可看到我们安装的nodeJS的版本号。 最后上一个nodeJS官方的代码。 var http = require » » »阅读更多

JavaScript 图片切换

2011-07-04 4 Comments

用原生的JS写动画效果的确是个很令人纠结的事情，倒不如直接用jQuery来写，亦或找一些jQuery插件。能力达不到的时候，为了工作进度，只能采取心有不甘的手段。 如果真的获得能力的提高，我认为还是必须去学习那些优秀的程序员写的优秀的代码。图片切换并不是很难，只不过要获得一些动画效果有些费力，由于本人数学不好，加之不努力，所以做起动画来很吃力。 动画切换要结合JS和CSS达到想要的效果。图片切换一般涉及的CSS的定位，以及JS定时器的知识。定位方式一般定时变换幻灯片的left或者top属性，实现图片移动。还有一种是设置幻灯片的父容器的scrollTop或者scrollLeft属性。这里用的是定位方式。 首先HTML结构遵循一定的规律，至于为什么，下面会提到。 <div id="J_ad_gallery" class="ad_gallery"> <div class="ad_img_wrap"> <ul> <li><img src="image/banner-1.png" width="514" height="191" /></li&g » » »阅读更多

HTML5 data- 属性

2011-06-20 No Comments

Resig在2008年在其博客中介绍过HTML5的data-属性，现如今HTML5在如火如荼地推广，似乎国内的技术有些延迟，这篇博文可以在这里找到。 data-为前端开发者提供自定义的属性，这些属性集可以通过对象的dataset属性获取，不支持该属性的浏览器可以通过getAttribute方法获取。ppk提到过使用rel属性，lightbox库推广了rel属性，HTML5提供了data-做替代，这样可以更好地使用自定义的属性。 <div data-author="david" data-time="2011-06-20" data-comment-num="10" data-category="javascript"> .... </div> 上面HTML代码提供了单个文章所拥有的一些属性。通过JS代码可以获得这些自定义的属性。 var post = document.getElementsByTagName('div')[0]; post.dataset; // DOMStringMap post.dataset.commentNum; // 10 需要注意的是，data-之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。 并不是所有的浏览器都支持.da » » »阅读更多

疑问：JS类似数组的对象

2011-06-16 No Comments

JS中没有类的概念，OO中的类在JS中通过对象来实现，而OO中的继承机制则是透过JS中的原型继承来模拟。 var myObj1 = {}; myObj1.prototype = {}; myObj1.prototype // Object myObj1的prototype属性指向了一个空对象，控制台输出myObj1.prototype是拥有属性为__proto__的对象，该对象是Object.prototype的一个引用,即：myObj1.prototype.__proto__ == Object.prototype。 var myObj2 = {}; myObj2.prototype = { length: 0, splice: [].splice }; myObj2.prototype； // [] Object.prototype.toString.call(myObj2.prototype); // "[object Object]" myObj2的原型中多了几个数组对象拥有的属性，此时myObj2.prototype返回的是一个[]，虽然是像个数组，但不是完全意义上的数组，因为用toString调用的时候，返回的的确是一个对象，而不是一个数组。 jQuery中运用了这样的机制，不太明白究竟是什么原理。 阅读更多

Prototype Utilities – $A $w $H $R

2011-04-24 No Comments

这四个方法是Prototype库中提供的非常实用的工具方法。简单的来说明一下它们的适用范围。 $A是把一个可迭代的的类数组转换成数组的形式，说是转换，实际上是把该对象拷贝到一个临时数组中，并返回该数组。 $w是创建数组对象的快捷方式，只接收一个空格分隔的字符串参数，内部调用split方法处理字符串，返回数组。 $H将JS原生对象转换成Hash对象，JS对象本身就是一个类似于Hash键/值对的容器。 $R创建一个ObjectRange对象，该对象是Prototype扩展的对象，类似于Ruby的Range类。 Prototype使用这个方法对js进行扩展，在其上添加了许多有用的方法。个人感觉Prototype库很多东西都是从Ruby那里学习过来的，基于JS语言本身的灵活性，这样扩展起来的确很有效果。下面看一下这几个函数该如何使用。 $A会把数组和类数组都转换成数组，Prototype对原生的Array对象进行了扩展，所以这样转换之后会有更多的方法可供使用，似乎比较方便。 document.getElementsByTagNa » » »阅读更多

JS变量提前声明

2011-02-20 No Comments

编程语言中变量都是先声明后使用，在某些强制类型的语言中更加明显。不过在JavaScript中竟然突破了这种限制，变量在声明之前可以访问到值，当然并不是正确的值。这种变量声明的顺序令人感到费解，一般会和JS的引擎有很大关系。当然，为了避免不必要的麻烦，实际的开发中还是安份点好。例如: alert(name); var name = 'javascript'; 在不同的浏览器中返回不同的结果。具体产生这样结果的原因是什么，当然可以在JS引擎中找到原因。这个寻找答案的过程是漫长的，除非真正潜心研究JS。在这里只能留下一些结果，在这结果之上的研究需要时日。 Chrome Safari 页面第一次载入返回空字符串，刷新返回javascript Firefox 每次载入都返回空字符串 Opera IE 每次载入返回undefined 阅读更多

JavaScript获取浏览器中的鼠标位置

2011-01-11 No Comments

使用JS创建提示框、拖拽等应用的时候，往往需要得知浏览器中鼠标的位置。鼠标在浏览器中的位置可以分为两种：一种是鼠标在窗口中的位置，另外一种是鼠标在文档中的位置。这里是示例。 当鼠标在当前窗口移动的时候(mousemove)，默认会触发document对象的mousemove事件。通过捕获该事件的event.clientX, event.clientY属性可以得到鼠标在当前窗口中的位置，即便当前文档出现了滚动条，左上角的坐标仍为(0,0)。此时鼠标在文档中的位置等于鼠标在当前窗口中的位置。即event.clientX。 出现滚动条的时候，通过document的mousemove事件提供的event.clientX,event.clientY信息并不能正确地去定位元素，此时必须要考虑到滚动条的位置。这时应该是滚动条的偏移位置加上鼠标在当前窗口的位置才能得到鼠标在文档中的位置。 /** * 捕获鼠标在HTML文档中的位置 * @param event 事件对象(W3C的event或IE的window.event) * @return {x: , y: } 鼠标在文档中的坐标 */  » » »阅读更多

JavaScript正则表达式

2011-01-06 No Comments

JavaScript中有两种方式的正则表达式，一种是RegExp对象的形式，另一种是直接量形式的。正则表达式在JavaScript中被认为是一个对象, RegExp提供了两个正则方法，它们分别是RegExp.exec()和RegExp.test()。 RegExp.exec(str)会返回一个数组或者null(如果字符串没有匹配表达式)，该数组包含了匹配的结果。数组索引为0的值是整个表达式匹配的结果，而从1开始的值为子表达式匹配的结果。 RegExp.test(str)返回一个布尔值，如果字符串匹配表达式，那么返回true，否则返回false。 RegExp对象形式的正则表达式 new RegExp(pattern, attributes) 直接量形式的正则表达式 /pattern/attributes pattern为任何合法的正则表达式，attributes的值为’g', ‘i’, ‘m’。g的意思是全局匹配, i的意思是忽略大小写, m的意思是多行匹配。 匹配手机号码(搜索以1开头，并且长度为11的手机号码) phone = '12345678900'; matches = /(1[\d]{2})([\d]{3}) » » »阅读更多