随笔分类 -  javascript

编写javascript代码需要注意的7个小细节
摘要：每种语言都有它特别的地方，对于JavaScript来说，使用var就可以声明任意类型的变量，这门脚本语言看起来很简单，然而想要写出优雅的代码却是需要不断积累经验的。本文利列举了JavaScript初学者应该注意的七个细节，与大家分享。1. 简化代码JavaScript定义对象和数组非常简单，我们想要创建一个对象，一般是这样写的：var car = new Object();car.colour = 'red';car.wheels = 4;car.hubcaps = 'spinning';car.age = 4;下面的写法可以达到同样的效果：var car = 阅读全文
posted @ 2011-09-21 09:38 张臣 阅读(649) 评论(1) 推荐(0)
javascript 中的注释
摘要：在javascript中有两种注释方式：单行注释： //多行注释： /* */注释主要是为了让我们编写的程序更具有可读性，也便于他人来进行二次修改看下面的例子，我们给正则表达式用/* */注释了，运行时发布报了一个语法错误1 /*2 var rm_a = /a*/.match(s);3 */所以说块级注释是不安全的，如果在我们的代码中犯了这样的错误，很难去排查所以最好是用单选注释// 取代多行注释 /* */ 阅读全文
posted @ 2011-09-20 11:21 张臣 阅读(590) 评论(0) 推荐(0)
工作小知识积累（1）-- 获取图片的大小
摘要：1、获取图片大小的函数getImageSizefunction getImageSize(imageEl) { var i = new Image(); //新建一个图片对象 i.src = imageEl.src; //将图片的src属性赋值给新建图片对象的src return new Array(i.width, i.height); //返回图片的长宽像素 //return [i.width, i.height];}2、示例var imgEl = document.getElementById(imgEl), imgSize = getImageSize(imgEl), imgWid.. 阅读全文
posted @ 2011-09-07 09:23 张臣 阅读(451) 评论(1) 推荐(1)
将URL中的参数提取出来作为对象
摘要：(function() { var urlToObject = function(url) { var urlObject = {}; if (/\?/.test(url)) { var urlString = url.substring(url.indexOf("?")+1); var urlArray = urlString.split("&"); for (var i=0, len=urlArray.length; i<len; i++) { var urlItem = urlArray[i]; var item = urlItem. 阅读全文
posted @ 2011-08-15 20:28 张臣 阅读(464) 评论(0) 推荐(0)
javascript中的事件处理程序（事件侦听器）
摘要：最近在看《javascript 高级程序》一书，写自己的一些小心得体会，希望得到牛人们的指点，讨论。步入今天的正题，javascript事件处理函数，我们知道，javascript与HTML之间的交互是通过事件来实现的，事件就是用户或浏览器自身执行的某种动作，比如click、mounseover、load……,而响应事件的函数就叫做事件处理函数（或事件侦听器）。HTML代码中的事件处理程序：<input type="button" value="click me" onclick="alert('click me')&qu 阅读全文
posted @ 2011-08-01 21:56 张臣 阅读(3544) 评论(12) 推荐(4)
javascript学习笔记（十一）对表格进行排序（包括数值、字符串、日期等数据类型）
摘要：在javascript学习笔记（十）中，我们对表格进行了一些美化，主要是实现隔行换色及鼠标经过时高亮两个功能！这样看起来，感觉已经不错了，用户体验要比之前好多了。在今天的学习笔记中，我们对表格再改进一些，让用户体验再好一些。我们先看下图：图1 会员信息表比如我们现在有图1这样一个表格，在会员组这一列中，需要把相同会员组的排在一起，这样就需要对这个表格进行一些排序的操作。下面我们就来一步一步实现这个需求：基本原理：首先提取会员组这列的值，然后存储在一个数组中，然后利用arrayObject.sort()方法对其排序，排序的结果先保存在一个临时的代码片段中(documentFragment)，最后 阅读全文
posted @ 2011-04-13 14:54 张臣 阅读(2967) 评论(7) 推荐(5)
javascript学习笔记（十）表格隔行换色，鼠标经过时高亮显示
摘要：在网页的，表格的布局经常可见，当表格的行数非常多的，很容易引起用户的视觉疲劳，而且容易让用户把相邻两行的数据看错。我们可以通过隔行换色以及高亮的方法的来改善用户体验！如果用css来实现，前台的代码会略显不优雅，比如在奇数行我们需要添加<tr class="odd">这样的代码来实现隔行换色，而且如果是从后台动态输出的网页，这是无法实现的，除非用程序去控制。tr:hover 在ie6下是不支持的。所以还是不能完全满足我们的要求。这里我们可以用javascript来帮我们实现以上需求。主要就是操作DOM。首先看HTML代码： <h1>会员信息表</ 阅读全文
posted @ 2011-04-12 17:26 张臣 阅读(2546) 评论(7) 推荐(4)
javascript学习笔记（九）javascript中的原型(prototype)及原型链的继承方式
摘要：在javascript学习笔记（八）中，我们主要学习了在使用javascript面向对象编程时，如何创建对象及添加对象的属性和方法。在使用面向对象编程时，对象间的继承关系自然少不了！而原型正是实现javascript继承的很重要的一种方法！我们首先来看以下代码： function person(name, age) { this.name = name; this.age = age; } person.prototype.getInfo = function() { alert("My name is "+this.name+", and I have &quo 阅读全文
posted @ 2011-04-11 14:31 张臣 阅读(1774) 评论(2) 推荐(4)
javascript学习笔记（七）利用javascript来创建和存储cookie
摘要：今天把javascript如何用来创建及存储cookie复习了一下，其中的一点体会拿出来和大家讨论，恳请高手指点一二。首先看一下基础知识：1、什么是cookiecookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值2、有关cookie的例子：名字 cookie 当访问者首次访问页面时，他或她也许会填写他/她们的名字。名字会存储于 cookie 中。当访问者再次访问网站时，他们会收到类似 "Welcome John Doe!" 的欢迎词。而名字则是从 阅读全文
posted @ 2011-04-07 21:13 张臣 阅读(1827) 评论(5) 推荐(2)
javascript 学习笔记（六）浏览器类型及版本信息检测
摘要：由于各浏览器对css以及js支持的差异性，我们在做前端开发时，经常需要先检测浏览器的类型及版本，然后会对各自的差异性来写代码！下面的checkBrowser()函数主要检测了三种浏览器（IE, firefox, chrome），其它的浏览器的检测有兴趣的朋友可以自行添加检测代码！HTML部分代码： (页面加载时执行检测函数)<body onload="checkBrowser()"> <p id="userAgent"></p> <p id="browser"></p>< 阅读全文
posted @ 2011-04-07 11:40 张臣 阅读(1517) 评论(1) 推荐(2)
javascript学习笔记（五）正则表达式
摘要：正则表达式在web开发中会经常用到，主要用于验证用户输入的数据的格式。常用到的元字符有：. 查找单个字符，除了换行和行结束符；\w 匹配字母、汉字、数字、下划线等符号；\s 匹配空白符(包含空格、制表符等)；\d 匹配数字；\b 匹配位于单词的开头或结尾的匹配；常用的量词有：^n 匹配任何开头为 n 的字符串；n$ 匹配任何结尾为 n 的字符串；n+ 匹配任何包含至少一个 n 的字符串；n* 匹配任何包含零个或多个 n 的字符串；n? 匹配任何包含零个或一个 n 的字符串；n{X} 匹配包含 X 个 n 的序列的字符串；n{X, Y} 匹配包含 X 或 Y 个 n 的序列的字符串；简单举例，主 阅读全文
posted @ 2011-04-06 16:56 张臣 阅读(1559) 评论(3) 推荐(3)
javascript 学习笔记（四） 倒计时程序
摘要：首先看全部完整代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; charset=utf-8" http-equiv="C 阅读全文
posted @ 2011-04-05 20:30 张臣 阅读(1103) 评论(0) 推荐(1)
javascript学习笔记（三）显示当时时间
摘要：主要是为了熟悉javascript中在date对象html代码如下：<div id="showTime"></div>javascript 代码如下：时间显示格式为：2011-04-04 星期二 12:09:34function startTime() { try{ var today = new Date(); var year = today.getFullYear(); var month = checkNum(today.getMonth()+1); var date = checkNum(today.getDate()); var day 阅读全文
posted @ 2011-04-05 12:09 张臣 阅读(501) 评论(1) 推荐(0)
javascript学习笔记（二） 鼠标经过时，改变div块的背景色
摘要：HTML部分代码： <ul> <li>鼠标经过时改变背景色</li> <li>鼠标经过时改变背景色</li> <li>鼠标经过时改变背景色</li> <li>鼠标经过时改变背景色</li> </ul>javascript部分代码：当鼠标经过时，给li添加class="current"类，鼠标离开时，去除该类，达到改变背景色的目的！window.onload = function() { var lis = document.getElementsByTag 阅读全文
posted @ 2011-04-05 11:31 张臣 阅读(3032) 评论(12) 推荐(1)
javascript 学习笔记（一）DOM基本操作
摘要：主要是为了使自己更加熟练操作DOM，记录自己的点滴，规范自己的代码！希望大家共同进步！html部分代码：当点击show按钮时，触发showValue函数，将input value的值动态添加到id="text"的元素节点中！<p> <input type="text" value="" name="user_name" id="user_name" /> <span style="padding-left:10px;"><input 阅读全文
posted @ 2011-04-05 10:29 张臣 阅读(747) 评论(2) 推荐(1)