随笔分类 - JavaScript
摘要：原理来自Justany_WhiteSnow的Javascript图像处理——虚拟边缘一文。 /* * BORDER_REPLICATE: aaaaaaaa|abcdefgh|hhhhhhhh * BORDER_REFLECT: hgfedcba|abcdefgh|hgfedcba * BORDER_REFLECT_101: hgfedcb|abcdefgh|gfedcba * BORDER_WRAP: efgh|abcdefgh|abcd * BORDER_CONSTANT: iiiiiiii|abcdefgh|iiiiiiii wi...
阅读全文
摘要：最近看了Justany_WhiteSnow的Javascript图像处理一文，写的非常好，于是就练练手，略做了一些封装：(function () { function imageToGray(iCanvas, url) { this.canvas = iCanvas; this.iCtx = this.canvas.getContext("2d"); this.url = url; } imageToGray.prototype = { imread: function (_image) { v...
阅读全文
摘要：最近开始阅读《JavaScript权威指南》第六版，这次阅读的主要目地是进一步把基础打牢，对以前的学习复习和检查。 第一章是JavaScript概述，没什么好说的，只把本章最后一个综合示例（贷款计算器）动手敲了一遍： 代码如下：<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>Demo</title> <style type="text/css"> .output{ font-weight:bold; }
阅读全文
摘要：测试代码：<table id="test"></table><script> var oTable=document.getElementById("test"); oTable.innerHTML="<tr><td>innerHTML</td></tr>";</script> 上述代码在IE6-9中无效，直接报错： IE9：Invalid target element for this operation. IE6-8：Unknown r
阅读全文
摘要：朋友让帮忙找个原生JS写的带缓动效果的图片幻灯，类似Tmall首页的效果，找了一圈后发现网上JS写的图片幻灯很多，相关的jQuery插件也很多，但用原生JS写的带缓动效果的却不多。没办法只好自己动手，现在把代码分享给大家，希望对大家有用。 代码中的缓动公式用了司徒正美博客中整理的代码：http://www.cnblogs.com/rubylouvre/archive/2009/09/17/1567607.html 缓动公式的推导主要利用了物理中的加速度知识，推荐过程可以看看这篇文章：http://floatyears.info/javascript-animation-easing ...
阅读全文
摘要：虽然XML和DOM已经变成Web开发的重要组成部分，但目前仅IE跟Mozilla支持客户端的XML处理。一、IE中的XML DOM支持 IE对XML的支持是基于ActiveX的MSXML库。 1、DOM创建 对每个新版本的MSXML，都会创建出不同的XML DOM对象，所以尽量选择新的XML DOM版本。 2、载入XML 载入XML分两种，即： 载入XML字符串：loadXML(xml字符串) 载入xml文件：load(xml文件路径)。默认情况下文件载入是异步的，如果要改为同步把asynce特性改为true即可。异步载入文件时要用到readyState和onreadysta...
阅读全文
摘要：昨天，jQuery官网发布了jQuery 1.8 Release版，现在已经可以在官网获得：http://jquery.com/。 由于在园子里还没发现这方面的文章，所以就来简单地介绍一下（注：本文只是简单的归纳介绍，不是完整的翻译，全文请参考原文：http://blog.jquery.com/2012/08/09/jquery-1-8-released/）。一、代码获取 http://code.jquery.com/jquery-1.8.0.min.js(压缩版，建议生产环璋用) http://code.jquery.com/jquery-1.8.0.js(源码版，建议调试研究用)...
阅读全文
摘要：一、错误分类 1、语法错误：也称解析错误，发生在传统语言的编译时，在JavaScript中发生在解释时。这些错误是由代码中的意外字符直接引起的，然后就不能直接编译/解释。发生语法错误时，就不能继续执行代码。在JavaScript中，只有在同一个线程中的代码会受语法错误的影响。在其他线程中的代码和其他外部引用的文件中的代码，如果不依赖于包含错误的代码，则可以继续执行。 2、运行时错误：也称为异常（exception，在编译期/解释器后）。此时，问题并不出在代码的语法上，而是，尝试完成的一个操作，在某些情况下是非法的。异常只影响发生的线程，其他JavaScript线程即可继续正常的执行。二、错..
阅读全文
摘要：排序代码function SortTable(sTableID, iCol, sDataType){ this.oTable=document.getElementById(sTableID); this.oTBody=this.oTable.tBodies[0]; this.colDataRows=this.oTBody.rows; this.aTRs=[]; this.iCol=iCol; this.sDataType=sDataType;}SortTable.prototype={ convert:function(sValue, sDataTy...
阅读全文
摘要：跨平台的事件EventUtil对象 EventUtil:var EventUtil={ addEventHandler:function(oTarget, sEventType, fnHandler){ if(oTarget.addEventListener){ oTarget.addEventListener(sEventType,fnHandler,false); } else if(oTarget.attachEvent){ oTarget.attachEvent("on"+sEventType,fnHand...
阅读全文
摘要：重构前的话 上一篇发布一个JavaScript工具类库jutil，欢迎使用，欢迎补充，欢迎挑错！发布后有幸得到了大部分朋友的肯定，在这里多谢各位的支持鼓励。 在上一篇评论中，也有园友指出了存在的问题，主要有建议增加数组过滤方法，HTMLEncode和HTMLDecode方法不安全，数组去重方法的问题等，没有命名空间，扩展不太方便。本次重构主要解决的就是上面这些问题。 本次重构具体的就是增加了数组过滤方法，划分了一下命名空间，增加了用于扩展的方法。对于HTMLEncode和HTMLDecode方法不安全的问题，本次重构没有处理，如果需要安全的HTMLEncode和HTMLDecode建议使...
阅读全文
摘要：由来 工作中jQuery用的比较多，但jQuery再强大也有些方法是没有的，以前的做法就是东拼西凑，今天终于下定决心把平时用到的一些方法加以整理，这就是jutil的由来。 当前只有17个方法，涉及到的有Array、HTML、Cookie & localStorage、Date、String。这些方法都采用了原生的JS，不依赖于jQuery。 都说好的设计是易于理解的，不用过多介绍，而这也是我现在想达到的目标，因此下面的介绍会比较简单，如果大家哪个地方看不明白或有更好的建议，请提出来，我再优化。Array相关 jutil.arrayDistinct(Array)jutil.arrayIn
阅读全文
摘要：一、事件流 IE中是冒泡型事件，即从最特定的事件目标到最不特定的事件目标。 Netscape Navigator使用的是捕获型事件，这个跟IE中采用的冒泡型事件相反。 DOM事件流同时支持两种事件模型，但捕获型事件先发生。二、事件处理函数/监听函数 事件是用户或浏览器自身进行的特定行为。这些事件都有自己的名字，如click、load、mouseover等。 事件处理函数有两种分配方式：在JavaScript中或者在HTML中。 如果在JavaScript中分配事件处理函数，则首先要获得要处理的对象的引用，然后将函数赋值给对应的事件处理函数属性，像这样(事件处理函数名称必须小写)：v...
阅读全文
摘要：像诗一样的 Javascript 代码。1. 取整同时转成数值型：'10.567890'|0//结果: 10'10.567890'^0//结果: 10-2.23456789|0//结果: -2~~-2.23456789//结果: -22. 日期转数值：var d = +new Date(); //12956984167923. 类数组对象转数组：var arr = [].slice.call(arguments)4. 漂亮的随机码：Math.random().toString(16).substring(2); //14位Math.random().toStri
阅读全文
摘要：String.replace( ) 简介语法：string.replace(regexp, replacement)regexp：您要执行替换操作的正则表达式，如果传入的是一个字符串，那就会当作普通字符来处理，并且只会执行一次替换操作；如果是正则表达式，并且带有 global (g) 修饰符，则会替换所有出现的目标字符，否则，将只执行一次替换操作。replacement：您要替换成的字符。返回值是执行替换操作后的字符串。String.replace( ) 的简单用法var text = "javascript 非常强大 ！";text.replace(/javascript
阅读全文
摘要：问题的产生 在写JS的过程中，为了调试我们常常会写很多 console.log、console.info、console.group、console.warn、console.error代码来查看JS的运行情况，但发布时又因为IE不支持console，又要去掉这些代码，一不小心就会出错。 本文分享自己昨晚写的一个console类来试图解决这一问题。当然，更好的做法是把测试代码分开写，那样就不会有这个问题。解决思路 如何解决IE下不兼容的问题呢，那就是我们自己定义一个console类来覆盖浏览器提供的console功能，这样只要在页面中引用此JS文件就可以了。 另外，此类还提供了查看输出...
阅读全文
摘要：检测浏览器的方式 1、对象特征检测法：判断浏览器能力的通用方法。如果更关注浏览器的能力而不在乎它的实际身份，就可以使用这种检测方法。常见的原生Ajax写法中就用这种方法来创建XMLHttpRequest：IXHR: function(){ if(window.ActiveXObject){ XHR=new ActiveXObject('Microsoft.XMLHTTP'); }else if(window.XMLHttpRequest){ XHR=new XMLHttpRequest(); }else{ ...
阅读全文
摘要：Levenshtein算法Levenshtein算法定义及算法原理见这篇文章：一个快速、高效的Levenshtein算法实现JavaScript实现function levenshteinDistance(s,t){ if(s.length>t.length){ var temp=s; s=t; t=temp; delete temp; } var n=s.length; var m=t.length; if(m==0){ return n; } else if(n==0){ ...
阅读全文
摘要：今早在https://attachments.me/hirehack/public/computer.html做题，有一题是递归求嵌套数组中最大值:/*This challenge requires that, given as input an array which may contain: - integer values. - inner-arrays of integer values. - any recursive combination thereof. Return the largest value contained in the array or any of its
阅读全文
摘要：Window对象窗口操作 Window对象对操作浏览器窗口非常有用，开发者可以移动或调整浏览器窗口的大小。可用四种方法实现这些操作： moveBy(dx,dy)：把浏览器窗口相对当前位置水平移动dx个像素，垂直移动dy个像素。dx值为负左移，dy为负上移。 moveTo(x,y)：移动浏览器窗口，使它的左上角位于用户屏幕的(x,y)处。可以使用负数，不过这样会把部分窗口移出屏幕的可视区域。 resizeBy(dw,dh)：相对浏览器窗口当前大小，把窗口的宽度调整dw个像素，高度调整dy个像素。dw、dy为负时缩小窗口。 resizeTo(w,h)：把窗口的宽度调整为w，高度调整为h，...
阅读全文