分类目录归档：javascript

Javascript参数按值传递

发表于 2012/04/27 由 前端开发-武方博  157 views

关于Javascript中参数的传递到底是按值传递还是按引用传递，这个问题再此之前一直没有想过，话说javascript中有两种变量类型：基本类型和引用类型，基本类型包括：Number、String、Undefined、Null、Boolean这五种，而引用类型就是Object，根据之前在代码上的经验以及对javascript这门松散类型的语言的认识，以为在参数的传递中，传什么类型的值就按什么类型传递，比如传基本类型的变量，则参数是按照值进行传递，而传引用类型的变量的时候，则是按照引用传递。 昨晚在看《Javascript高级程序设计》的时候，才知道我之前的这种看法是错误的，下面是书中引用片段： ECMAScript中所有的函数都是按值传递的。也就是说，把函数外部的值复制给函数内部的参数，就和把值从一个变量复制到另一变量一样。基本类型的传递如同基本类型变量的复制一样，而引用类型值的传递，则如同引用类型变量的复制一样。有不少开发人员在这一点上会感到困惑，因为访问变量有按值和按引......查看更多>>

发表在 javascript | 标签为 , | 一条评论

js判断一个元素是否为另一个元素的子元素

发表于 2012/03/07 由 前端开发-武方博  289 views

用js判断一个元素是否为另一个元素的子元素，再做一些效果的时候经常用到，特别是和鼠标事件相关的应用中，比如一个浮层，在鼠标操作浮层内元素的时候浮层显示，当点击浮层外的元素的时候隐藏浮层。当然方法有很多，不过个人认为通过判断一个元素是否为另一个元素的子元素是最简单的实现方式之一。 JS代码 function isParent (obj,parentObj){ while (obj != undefined && obj != null && obj.tagName.toUpperCase() != ‘BODY’){ if (obj == parentObj){ return true; } obj = obj.parentNode; } return false; } $(document).click(function(event){ alert(isParent(event.target, $(“.floatLayer”)[0])); }); 感觉还挺好用，但是在jQuery应用中还是有很多缺陷，比如多个元素的时候写起来就不是很方便。所以写了比较简单的jQuery判断一个元素是否为另一个元素的子元素(或者其本身)的两个扩展： jquery代码 //判断:当前元素是......查看更多>>

发表在 javascript | 标签为 , | 留下评论

什么是javascript闭包

发表于 2012/03/01 由 前端开发-武方博  511 views

我同样也是个javascript新手，怎么说呢，先学的jquery，精通之后发现了javascript的重要性，再回过头来学javascript面向对象编程。 最近看了几篇有关javascript闭包的文章，有《javascript高级程序设计》中的文章，……我看不懂，里面有些代码是在大学教科书中看都没看过的，天书一般。幸好最近遇到两本好书《ppk on javascript》和《object-oriented JavaScript》，正字阅读中，都还没有中文版，但写的不复杂，有兴趣的朋友可以看看，适合想进阶的朋友。 今天就结合这两本书，用最浅显的语言和最通俗的方式谈谈javascript中的闭包，因为也是新手，所以有有误的地方请各位指出，谢谢 一.   准备知识 1.函数作为函数的参数 在学习javascript中，你始终要有一个有学习与其他语言不同的概念：函数（function）不么特殊的东西，它也是一种数据，与bool ,string,number没有什么两样。 函数的参数可以string，number，bool如： function(a, b) {return a + b;}......查看更多>>

发表在 javascript | 标签为 , | 2 条评论

JS对象转换成为JSON和JSON转换成为JS

发表于 2012/03/01 由 前端开发-武方博  710 views

目前的项目数据交互几乎都用JQuery，所以处理流程是：前端页面数据-》JS对象-》jQuery提交-》python处理，另外一种就是倒过来。python肯定不能直接处理JS对象数据，所以要把JS对象转换成为python能处理的一种数据格式（通常是字典dict），同样，python取数据反馈到前端也要把字典数据转换成JS能处理的对象，这个中间转换数据格式通常就是JSON。 一、JS对象转换成为JSON 流程：读取前端页面数据，组装成为JS对象，并通过jQuery的$.post()方法传递给python。 处理：引用一个json2.js文件，调用JSON.stringify()方法。例如：var data = new Object(); var json_data = JSON.stringify(data); 读取：python这里就很简单了，用dict_data = json.loads(json_data)就OK了 二、JSON转换成为JS 流程：python组装一个dict数据并转成JSON格式传递给前端，或者前端通过jQuery的$.getJSON()方法直接读取这个JSON格式的数据 处理：用jQuery的一个方法$.parseJSON()将JSON格......查看更多>>

发表在 javascript | 标签为 , | 留下评论

javascript定义类和类的实现

发表于 2012/02/24 由 前端开发-武方博  272 views

最近在几个群上经常看到有人问在一个类里的一个 function 怎么调用 this. 定义后公开的方法。现发一篇类实现的随笔。 首先说说类，在一个类里我们会有以下的几个特征： 1. 公有方法 2. 私有方法 3. 属性 4. 私有变量 5. 析构函数 我们直接看一个例子： /***定义类***/ var Class = function(){ var _self = this;//把本身引用负值到一变量上 var _Field = "Test Field"; //私有字段 var privateMethod = function(){ //私有方法 alert(_self.Property); //调用属性 } this.Property = "Test Property"; //公有属性 this.Method = function(){ //公有方法 alert(_Field); //调用私用字段 privateMethod(); //调用私用方法 } } 这里我已把注释都写上，大家大概也会一眼就看得明白。对于少写JS的朋友，可能会觉得奇怪为什么我会定义一个_self的变量, 因为在js里，this不用对于其他的对象语言，他的解析......查看更多>>

发表在 javascript | 标签为 , , | 留下评论

javaScript LRC滚动歌词效果

发表于 2012/02/23 由 前端开发-武方博  305 views

歌词滚动 在开发新版音乐盒时，需要用JS实现歌词滚动。我在一期开发的基础上进行了迭代式的开发，又有点类似于敏捷开发。以下根据逐渐完善功能的过程来讲述我是如何开发完成了歌词滚动效果。其中每一步遇到的难点以及错误也会逐一列出。 1.解析歌词 这一步其实很简单，但由于我没有很认真的去分析以及预测，导致在测试时发现了一些Bug，甚至是后果很严重的Bug。比如： 正则表达式不够完善 一开始我只是简单地看了几首歌曲，没有做大量的数据分析，虽然快速地将歌词进行了解析，正则表达式如下： /\[\d*:\d*\]/g 这样只能匹配格式为“[00:00]”这样的时间戳，后来发现还有格式为“[00:00.00]”或“[00:00:00]”。我们罗列出LRC的所有普遍格式： [00:00] [00:00.00] [00:00:00] 然后就能够写出全面匹配出时间戳的正则表达式了，如下： /\[\d*:\d*((\.|\:)\d*)*\]/g 但是更严重的问题来了，在解析一首韩文歌曲时，程序挂了。而此时也无法准确定位错误。在一点点......查看更多>>

发表在 javascript | 标签为 , , | 留下评论

javascript构造函数返回值

发表于 2012/02/23 由 前端开发-武方博  266 views

这篇文章面向初中级前端工程师 在讲构造函数返回值的问题前，我们先来聊聊new操作符。 这个new操作符从javascript 1.0版本就已经实施了，后来在ECMAScript 2.0正式引入。 new操作符的作用就是实例化一个用户定义的对象类型(在javascript可以称之为对象也可以称之为函数也可以称之为类)。 它的基本语法： new constructor[([arguments])] 其中constructor是一个函数，它定义了实例化对象的类型。 arguments是constructor调用时所需的值。 创建用户定义的对象至少需要两个步骤： 1；通过创建一个function定义一个对象类型。 2：通过new实例化一个对象。 可以连同指定的名称和属性创建一个对象类型。 当new foo(…)这行代码执行时，有下列事情依次发生： 1：一个对象将被创建，它将继承foo.prototype。 2：这个构造函数foo将连同指定的参数被调用，this指针将绑定到新创建的对象上，如果没有参数提供，new foo()也等同于new foo。 3：一个对象将通过foo构造函数......查看更多>>

发表在 javascript | 标签为 , , | 留下评论

js图片等比例自动缩放兼容ie6 ie7 火狐

发表于 2012/02/16 由 前端开发-武方博  265 views

需求：图片width<=330px,height<=150。 1、利用max-width,max-height使图片等比例自动缩放，代码： img{ 　　max-width: 330px; 　　max-height: 150px; } 【由于ie6不支持css max-width,max-height,所以在ie6中需要利用javascript脚本来控制大小】   2、用javascript脚本来兼容ie6，代码如： var img_width = img.OffsetWidth; var img_height = img.OffsetHeight; var current_w = (150*img_width)/img_height; var current_h = (330*img_height)/img_width; if(img_height>150){ if(img_width>330){ D.css(img,{ width:330 + "px", height:current_h + "px" }) }else{ D.css(img,{ width:current_w + "px", height:150 + "px" }) } }else{ if(img_width>330){ D.css(img,{ width:330 + "px", ......查看更多>>

发表在 javascript | 标签为 , , | 留下评论

怎么用js正则表达式删除字符串前后空格

发表于 2012/01/15 由 前端开发-武方博  927 views

String.prototype.trim=function(){ var reSpace=/^\s*(.*?)\s*$/; return this.replace(reSpace,”$1″); }; 让我们分析一下第二行的正则表达式 ^ 行开始 \s* 匹配字符前面的所有空格,贪婪模式重复 (.*?) 捕获组,勉强模式重复匹配任意字符,也就是我们最终需要(去掉前后空格后)的字符,这个不是很好理解(我认为) 第一：我原来认为在捕获组内也应该判断第一个字符应该不能为空格即写成([^\s+])的形式,但这是完全没有必要的因为捕获组前面的\s*已经能捕获开头的所有的空格字符了,你认为的捕获组的字符开始范围与正则表达式匹配的字符范围是不一样的,汗~有点说不清楚了,呵呵 第二：其中?的作用,他的作用就是勉强模式重复前面的字符,什么意思呢?就是如果我用(.*a)去匹配aaaaaaa字符串的结果就是(aaaaaaa)源字符串这叫贪婪模式,如果用(.*?a)去匹配aaaaaaa的话他就会先匹配第一a,然后是第二个a,然后是第三个a…….这就叫勉强模式匹配有的地方也叫懒......查看更多>>

发表在 javascript | 标签为 , , , , , , , , | 2 条评论

JS操作的读取Cookies、写入Cookies、删除Cookies

发表于 2012/01/15 由 前端开发-武方博  703 views

js也能操作cookie,下面就向你展示关于js操作cookie的读取，写入和删除功能函数 读取 function setCookie(NameOfCookie, value, expiredays) { var ExpireDate = new Date (); ExpireDate.setTime(ExpireDate.getTime() + (expiredays * 24 * 3600 * 1000)); document.cookie = NameOfCookie + “=” + escape(value) + ((expiredays == null) ? “” : “; expires=” + ExpireDate.toGMTString()); } 写入 function getCookie(NameOfCookie) { if (document.cookie.length > 0) { begin = document.cookie.indexOf(NameOfCookie+”=”); if (begin != -1) { begin += NameOfCookie.length+1;//cookie值的初始位置 end = document.cookie.indexOf(“;”, begin);//结束位置 if (end == -1) end = document.cookie.length;//没有;则end为字符串结束位置 document.write(document.cookie.substring(begin, end)); return unescape(document.cookie.substrin......查看更多>>

发表在 javascript | 标签为 , , , , , , | 留下评论

JS 图片预加载技术[转]

发表于 2011/12/20 由 前端开发-武方博  542 views

项目开发中时常需要用 JS 判断一张图片是否加载成功， 如果图片加载成功，则执行其相应的 onload 绑定事件， 这个就是我们所说的图片预加载技术，先上最终版代码： function loadImage(url, callback) { var img = new Image(); img.onload = function () { img.onload = null; callback(img); } img.src = url; } 经测试发现 IE6、IE7、IE8： 如果图片已经存于浏览器缓存中，那么再次对该图片发起请求时， 浏览器就会直接从缓存中加载，这样就无法触发其 onload 事件。   而在 IE9、Chrome、FireFox： 无论图片是否存于浏览器缓存中，都会触发其 onload 事件。 所以上述代码中我们先要为 img 绑定 onload 事件，再为其赋值 src 地址！ 更多参考文献： 再谈javascript图片预加载技术 关于图片的预加载,你所不知道的 查看更多>>

发表在 javascript, 前端开发 | 标签为 , , , | 留下评论

Javascript计算密码的强度

发表于 2011/11/30 由 前端开发-武方博  379 views

用Javascript评估用户输入密码的强度 1.如果密码少于5位，那么就认为这是一个弱密码。 2.如果密码只由数字、小写字母、大写字母或其它特殊符号当中的一种组成，则认为这是一个弱密码。 3.如果密码由数字、小写字母、大写字母或其它特殊符号当中的两种组成，则认为这是一个中度安全的密码。 4.如果密码由数字、小写字母、大写字母或其它特殊符号当中的三种以上组成，则认为这是一个比较安全的密码。 本程序将根据用户输入的密码分别显示不同的颜色表示密码的强度，具体程序如下： <scriptt language=javascriptt> //CharMode函数 //测试某个字符是属于哪一类. function CharMode(iN){ if (iN>=48 && iN <=57) //数字 return 1; if (iN>=65 && iN <=90) //大写字母 return 2; if (iN>=97 && iN <=122) //小写 return 4; else return 8; //特殊字符 } //bitTotal函数 //计算出当前密码当中一共有多少种模式 fu......查看更多>>

发表在 javascript | 标签为 , , , , | 留下评论

常见javascript笔试题

发表于 2011/11/22 由 前端开发-武方博  720 views

1. 判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下划线，总长度为5-20 Example Source Code var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/; reg.test(“a1a__a1a__a1a__a1a__”); 2.截取字符串abcdefg的efg  Example Source Code var str = “abcdefg”; if (/efg/.test(str)) { var efg = str.substr(str.indexOf(“efg”), 3); alert(efg); } 3. 判断一个字符串中出现次数最多的字符，统计这个次数  Example Source Code //将字符串的字符保存在一个hash table中，key是字符，value是这个字符出现的次数 var str = “abcdefgaddda”; var obj = {}; for (var i = 0, l = str.length; i < l; i++) { var key = str[i]; if (!obj[key]) { obj[key] = 1; } else { obj[key]++; } }/*遍历这个hash table，获取value最大的key和value*/var max = -1; var max_key = “”; var key; for (key in obj) { if (max < obj[key])......查看更多>>

发表在 javascript | 标签为 , , , | 一条评论

JavaScript获取元素位置

发表于 2011/11/07 由 前端开发-武方博  495 views

网上流传很广的一张图片了，每次看到都记不住，真正用的时候还要来查，这次记到博客里面啦！   /* 获取元素的位置属性可以通过 HTMLElement.offsetLeft HTMLElement.offsetTop 但是，这两个属性所储存的数值并不是该元素相对整个浏览器画布的绝对位置， 而是相对于其父元素位置的相对位置，也就是说这两个数值得到的是以其 父元素左上角为(0,0)点从而计算出的数值。所以我们要得到她的绝对位置， 那么我们必须依次向上获取他的父元素的位置， 然后获取它父元素的父元素的offersetLeft和offersetTop, 一直递归到浏览器的整个画布横纵距离的时候，例如 */ /*获取元素的纵坐标*/ function getTop(e){    var offset=e.offsetTop;    if(e.offsetParent!=null){      offset+=getTop(e.offsetParent);    }    return offset; } /*获取元素的横坐标*/ function getLeft(e){    var offset=e.offsetLeft;    if(e.offsetPare......查看更多>>

发表在 javascript | 标签为 , | 留下评论

在标题栏显示新消息提示

发表于 2011/11/03 由 前端开发-武方博  415 views

<a href=”#” onclick=”clearNewMessageRemind();return false;”>点击取消闪烁提示</a> <script type=”text/javascript”> var newMessageRemind={ _step: 0, _title: document.title, _timer: null, //显示新消息提示 show:function(){ var temps = newMessageRemind._title.replace(“【　　　】”, “”).replace(“【新消息】”, “”); newMessageRemind._timer = setTimeout(function() { newMessageRemind.show(); //这里写Cookie操作 newMessageRemind._step++; if (newMessageRemind._step == 3) { newMessageRemind._step = 1 }; if (newMessageRemind._step == 1) { document.title = “【　　　】” + temps }; if (newMessageRemind._step == 2) { document.title = “【新消息】” + temps }; }, 800); return [newMessageRemind._timer, newMessageRemind._title]; }, //取消新消息提示 clear: function(){ clearTimeo......查看更多>>

发表在 javascript | 标签为 | 留下评论
第 1 页，共 2 页12