随笔分类 - JavaScript
摘要：javascript中有原型这么一个概念，任何一个构造函数都有它对应的原型(prototype)，我们可以给这个原型赋予一些我们想要的属性，像下面这样：function Gadget(name, color){ this.name = name; this.color = color; this.whatAreYou = function(){ return 'I am a ' + this.color + ' ' + this.name; }}Gadget.prototype.price = 100;Gadget.prototype.rating = 3...
阅读全文
摘要：通常情况下， 当我们试图访问某个不存在的或者没有赋值的变量时，就会得到一个undefined值。Javascript会自动将声明是没有进行初始化的变量设为undifined。如果一个变量根本不存在会发生什么事：>>> fooReferenceError: foo is not defined我们得到了一个错误信息。我们在该变量上用typeof操作符看看它是什么类型：>>> typeof foo"undefined"我们得到的结果为字符串“undefined”。如果我们声明一个变量时没有对其进行赋值，调用该变量时并不会出错，但typeof操
阅读全文
摘要：在javascript中， 理解变量的作用域以及变量提升是非常有必要的。这个看起来是否很简单，但其实并不是你想的那样，还要一些重要的细节你需要理解。变量作用域“一个变量的作用域表示这个变量存在的上下文。它指定了你可以访问哪些变量以及你是否有权限访问某个变量。”变量作用域分为局部作用域和全局作用域。局部变量（处于函数级别的作用域）不像其他对面对象的编程语言（比方说C++，Java等等），javascript没有块级作用域（被花括号包围的）；当是，javascript有拥有函数级别的作用域，也就是说，在一个函数内定义的变量只能在函数内部访问或者这个函数内部的函数访问（闭包除外，这个我们过几天再写个
阅读全文
摘要：上一节中我们学会了如何旋转x轴标签以及自定义标签内容，在这一节中，我们将接触动画（transition）首先，我们要在页面上添加一个按钮，当我们点击这个按钮时，调用我们的动画。所以，我们还需要在原来的基础上添加两个东西。添加一个按钮添加一个动画函数function updateData() { //再次获取数据 d3.tsv("../data/data-alt.tsv", function(error, data){ data.forEach(function(d){ d.date = parseDate(d.date); d.close = +d.close; ...
阅读全文
摘要：对于javascript的初学者来说，一般对“this”关键字都感到非常迷惑。本文的目的旨在让你全面的了解“this”，理解在每一个情景下如何使用“this”，希望通过本文，可以帮助同学们不在害怕“this”！！从生活中发现其实“this”就是我们平时用的一个代词。打个简单的比喻： “小豆豆是一个很幽默的人，他非常喜欢看《暴走漫画》”但是你也可以这样写： “小豆豆是一个很幽默的人，小豆豆非常喜欢看《暴走漫画》”但是日常生活中我们会一直用这种方式来描述一个人吗？如果你的回答是Yes，好吧，估计再也没有人愿意跟你做朋友了，我没骗你…（开个玩笑:-)）。 所以，人类就发明了这样一种看似高端、洋气、上
阅读全文
摘要：上节我们学习了如何绘制多条曲线， 以及给不同的曲线指定不同的坐标系。在这节当中，我们会对坐标轴标签相关的处理进行学习。首先，我们来想一个问题， 如何我们的x轴上的各个标签的距离比较近，但是标签名又比较长怎么办？ 像是下面这种情况该如何处理？上图中x轴上的标签是不是都重叠在一起了？非常恶心对不对？所以，我们得想个办法在不改变ticks标签直接的距离的情况下，让他们达到很好的阅读效果。让ticks标签旋转一定的角度下面我们的目标就是实现这一种效果：为了达到这个目标我们首先得做一个准备工作： 因为我们的ticks标签变高了，所以，为了容纳这些标签内容，我们给他提供更多的空间：var margin =
阅读全文
摘要：上一节我们已经学习了如何设置填充区域，其实理解了他的实现原理还是非常简单了。这一节中， 我们主要学习多条曲线的绘制，以及给不同的曲线指定不同的纵坐标。新的数据由于我们要画两条曲线，所以我们要在原来的基础上新增一组测试数据，现在我们的数据是这样的：date close open1-May-12 58.13 3.4130-Apr-12 53.98 4.5527-Apr-12 67.00 6.7826-Apr-12 89.70 7.8525-Apr-12 99.00 8.9224-Apr-12 130.28 9.92...
阅读全文
摘要：JavaScript中的数据类型作为javascript的核心，我们经常要用到，也是最基础的。 javascript中有非常复杂的数据类型：包括对象(Object)数据类型，还有五个基本数据类型（Number, String, Boolean, Undefined, Null）。注意，这些基础的数据类型都是“不可改变的”（下文中将要解释），而对象是“可改变的”。什么是对象（Object）？一个对象是由一个或者多个基本数据类型或者引用数据类型组成的一个集合。组成集合的每一项由“属性/方法：值”的方式来设定这个对象的属性和方法,每一个属性/方法必须是独一无二的字符串或者数字。举一个简单的例子：va
阅读全文
摘要：上一节我们已经学习了线条样式和格栅的绘制，在这一节中我们将要根据之前绘制的线条对图表进行填充，首先来看一下我们的目标吧在这个图表中，我们对位于线条下面的空间进行了填充，那么，如何改做到呢？设置填充样式这里设置我们填充区域的样式，我们使用浅蓝色进行填充：.area{ fill: lightsteelblue; stroke-width: 0; }定义填充区域就像前面绘制线条之前一样，我们首先要对其进行定义//定义填充区域 var area = d3.svg.area() .x(function(d){ return x(d.date); }) ...
阅读全文
摘要：上一节中，我们已经画出了图表，并且给图表添加了坐标轴的标签和标题，在这一节中，我们将要学习几个绘制线条不同特性的几个函数，以及给图表添加格栅。ok,进入话题！如何给线条设置绘制的样式？这个其实非常简单，在我们之前定义的valueline基础上加一个.interpolate(“样式”)就行啦//定义线条var valueline = d3.svg.line() .interpolate("basis") .x(function(d){return x(d.date);}) .y(function(d){return y(d.close);});line().interpola
阅读全文
摘要：上一节中我们已经画出了一个基本的图表，不过忘了给坐标轴添加标签了，所以在本节中我们要给坐标轴加上标签，目标效果如下给X轴添加标签很明显，标签是不是一个text内容块啊，所以我们只要在svg中添加一个text然后再给这个text定位和指定内容不就行了么？先来看如何给x轴添加标签//增加一个x轴的标签svg.append("text") .attr("transform", "translate(" + (width/2) + "," + (height + margin.bottom) + ")"
阅读全文
摘要：从今天开始我将和大家一起学习D3.js（Data-Driven Documents），由于国内关于D3的学习资料少之又少，所以我觉得很有必要把自己学习过程记录下来，供同学们参考，如果文章有有哪些表达有错误的还希望同学们帮我指出来。当然了， 可以的话我希望大家都可以去看看英文资料（文章后面将列英文资源），毕竟那才是原汁原味的D3。 好了， 废话到此，下面我们开始我们的学习之旅吧！什么是D3.js?一句话：D3.js是一个操纵数据的javascript库！从一个简单的例子开始学习一个新的东西其实很简单，我们先来一个效果图，然后我们再一条条改它的语句，对比呈现的效果来学习这条属性的作用，好了，下面就
阅读全文
摘要：我想javascript中的原型链一直想很多初学javascript的同学感到非常的困惑，今天看了一些文章，结合自己的理解，把原型链这个东西从新来整理一下，如有不对之处，望大家帮忙指出。 首先，我们应该认识的一个问题是，js中的继承是指对__proto__的继承，而不是prototype，这里有同学要问了：“那他们两个有么子区别呢？”， 请看官方的定义： 1. A function's .prototype is actually the prototype of things made by it, not its prototype. 2. __proto__ is the ac.
阅读全文
摘要：下面这个一个运动框架可以控制元素在一个属性上的运动，同时，可以调用回调函数。/*获取元素某个属性的值@obj: 对象@attr: 属性值*/function getStyle(obj, attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ return getComputedStyle(obj, false)[attr]; }}/*获取元素某个属性的值@obj: 对象@attr: 属性值@iTarget: 目标值(int)@fn: 回调函数*/function ...
阅读全文
摘要：D3 D3.js也是一个javascript框架，像jquery一样， 只不过他的特长是在数据可视化这一块而已。所以不要觉得D3是多么的复杂。在上面的代码中我们可以看到D3的一些用法： 选择元素：d3.select(“element”)，这个就是jquery中的$()，只不过没有采用简写的形式。 创建并添加新元素到选定元素后：.append("element")，就是javascript中的append方法一样，他返回的是一个添加了该新元素的元素集。 设置或获取指定属性：.attr(name[,...
阅读全文
摘要：前一段时间做过一个阿里的前端笔试题：从字符串的第二个字符开始对数组进行排序。当时没想到简单的方法，这几天看书才发现sort（）还可以自定义一个比较函数，郁闷啊啊啊~~ 看来基础还是不够扎实啊， 赶紧记录一下吧，说不定下次还会遇到 。 var aStr = ['yui', 'abcdef', 'javascript', 'jquery']; alert(aStr.sort(function(str1, str2){ str1 = str1.substr(1); str2 = str2.substr(1); return str1&g
阅读全文
摘要：JavaScript中的事件处理程序主要分为3种：HTML事件处理程序： click me!DOM0级事件处理程序： click me! DOM2级事件处理程序：click me! 附上兼容性事件绑定函数：function listenEvent(eventTarget, eventType, eventHandler){ if(eventTarget.addEventListener){ eventTarget.addEventListener(eventType, eventHandler, false); } else if(event...
阅读全文
摘要：通过创建一个Object实例 var person = new Object(); person.name = "zhouquan"; person.age = 21; person.sayName = function(){ console.log(this.name); }; person.sayName();//zhouquan对象字面量方式var person = { name: "zhouquan", age: 21, sayName:function(){ console.log(this.name); }};person.sayName()
阅读全文
摘要：(function(){ //这里的所有变量和函数都属于局部对象}());在javascript中以function开头的语句通常是函数声明。加上了外面的括号（黄色背景）后则创建的是函数表达式。蓝色背景括号则是将对象传给这个匿名函数，使该对象有权限访问这个匿名函数， 例如：(function($, YAHOO){ //now hava access to global jQuery and Yahoo}(jQuery, YAHOO));// 下面2个括弧()都会立即执行(function () { /* code */ } ()); // 推荐使用这个(function (...
阅读全文
摘要：window.onload = function(){ var fibonacci = function(){ var memo = [0,1]; var fib = function(n){ var result = memo[n]; if(typeof result != "number"){ result = fib(n-1) + fib(n-2); memo[n] = result; ...
阅读全文