猪窝

2007-12-20

又有新的读书任务了

归类于: 生活随笔 — admin @ 10:45 下午

新的读书计划

今天又到手三本书,都是在china-pub买的,第一次在那里买书,除了网站设计上的缺陷,其他还是挺好的。其中《编写有效用例》是只有china-pub才有货的。当时为了买那本书到处找,现在到手了,大致翻了翻感觉还不错。仔细读了之后会再继续分享心得。《情感化设计》是第二版的,所以颜色,大小都不一样,虽然很多人都有,可以直接借来看,但是经典的东西还是需要收藏的,嘿嘿。

另外在卓越买的书在下周应该也能到了,书柜开始丰富了,读书任务加重了!

加油,努力。顺利度过生理低潮期,并且发现一个解决我低潮期的方法:买书。 =。=

2007-12-18

思维汇总

归类于: 工作经验 — admin @ 11:01 下午

最近实在是没有大块的时间用来总结和写博客,但是又不忍心不更新,所以直接从反否中摘出来平时思维的点滴。

  •  永远不要责备一个人,如果你没有让自己处在他的情境下或者没有仔细思考他的处境。
  • 网站可以参考传统行业的另一个模式:外包
  • 销售,开发,财务,合作伙伴,设计师,管理层,用户,产品经理需要面对的角色实在是不少,追求平衡点
  • 理论知识是用来说服他人的基础
  • 方法论都应该再进行细分:技巧与基本方法
  • 合理的利用挖掘资源,从需求中提炼出重点,在验收中把握住核心,虽然都是很虚的概念,但是需要用这些概念来指导工作中的执行
  • 想过的,说过的,学过的,记过的,不要只是重复在嘴里和心里,养成习惯做到行为里才是有效果的,真正学会的,真正提高了。
  • W3C发布amaya,号称所见即所得还真是所见即所得啊。暂时没找到怎么看源代码。有空研究研究。
  • 人,物,关系,细分每一个主体,考虑再来考虑SNS,六度理论应该不局限人与人之间的问题,人与物? 用豆瓣考虑:豆瓣里的每一本书的信息,你能通过少于通过其他六本书中间的关联来获得? 好像能有点意思
  • 以情节和事件为中心的设计是对用户为中心的设计的一种提升与改进,但是同时又依赖与用户为中心,因为事件的主体是人,是用户,用户又带来各种感觉及思想上的限制。这样理解应该能更正确些。这个是辩证法?
  • 一个好的产品,首先是用户需要(或市场需求)和企业利益的结合,其次是用户需要节约时间和学习成本获得最好的享受,而企业对利益的追求需要降低开发成本,这两者又反过来刺激了技术的发展。 这句话包含了几个点?

2007-12-16

点击链接更换图片及文字内容: JavaScript学习笔记

归类于: JavaScript — admin @ 12:37 上午

终于进入激动人心的第四章了,从本章开始,需要接触大量的实例分析及效果实现。

今天带来的就是如何实现点击页面的文字链接来更换图片的展示及文字的内容。用CSS也可以实现,但是用JavaScript实现可以更简单,更方便。

让我们先来分析一下这个需求:

首先有大量的图片需要展示,而同时希望用户点击图片,即可在页面内显示结果,而不同单独再弹出页面来观看。同时我们对这个功能的函数进行扩展,在点击链接时不只是更换图片,同时也可以实现文字的更换。

在这里只列出JS代码,html代码可以自由变换:

首先我们来编写点击链接实现图片更换的函数,方便后面的调用

function showPic(whichpic) {

var source = whichpic.getAttribute(”href”);

var pic = document.getElementById(”pictureshow”);

pic.setAttribute(”src”, source) ;

}
JS部分很简单吧,我们先来分析一下。

首先获得用户点击文字链接所要展示的图片地址,然后获得页面显示图片位置的<img>标签的对象,最后用前面获得的地址替换<img>标签的src属性,即可实现点击文字链更换图片显示的效果。

函数很简单,我们在页面中调用。

onclick为调用条件,将链接传给函数showPic(which)作为参数值。

同时,传给链接一个flase条件,来避免浏览器点击链接的默认行为发生,html部分为

<a href=”images/1.jpg” title=”pic1″ onclick=”showPic(this); return false;”>图片链接1</a>

如果想实现鼠标划过(经过)图片就更换,则可以将onclick更改为onmouseover,即可实现

具体的实例可以看这里,已经做好的效果:
点击文字链接更换图片显示效果-JavaScript
如果有问题大家可以直接留言

其他JavaScript学习笔记:

了解DOM,学习DOM: JavaScript学习笔记

了解JavaScript中的对象的概念

JavsScript中的循环与函数

什么是JavaScript

原载:猪窝

转载请注明链接,谢谢

2007-12-11

DOM的基础-JavaScript学习笔记

归类于: JavaScript — admin @ 11:21 下午

第三章: DOM

节点的概念

四个非常适用的DOM方法:getElementById, getElementByTagName, getAttribute和setAttribute

  1. 文档:DOM中的”D”

DOM是”Document Object Model”(文档对象模型)的首字母所写。如果没有document(文档),DOM也无从谈起。

  1. 对象: DOM中的”O”

“对象”是一种独立的数据集合。与某个特定对象相关联的变量被称为这个对象的属性;可以通过某个特定的对象去调用的函数被称为这个对象的方法。

JS里,对象分为三种类型:

  • 用户定义对象: 程序员自己创建的对象。
  • 内建对象: 内建在JS语言里的丢向,如Array,Math
  • 宿主对象:浏览器提供的对象

宿主对象中,最基础的是window对象。

window对象对应着浏览器窗口的本身,这个对象的属性和方法通常被称为BOM(浏览器对象模型)。

  1. 模型: DOM中的”M”

M代表着”Model”,但说它代表着”Map”也可以。含义都是某种事物的表现形式。DOM代表着被加载到浏览器窗口里的当前网页:浏览器向我们提供了当前网页的地图(或者说模型),而我们可以通过JS去读取这张地图。

先了解表述这个地图的记号的意义:

DOM把一份文档表示为一棵树,这是我们理解和运用这一模型的关键。

  1. 节点

节点(note)这个名词来自网络理论,代表着网络中的一个连接点。网络是由节点构成的集合。DOM中的节点类型还包含着其他类型的节点。

  1. 元素节点

DOM的原子是元素节点。

一个页面是由元素来构成的。而各种标签则提供了元素的名字。元素可以包含其他的元素。html元素是节点树的根元素。

  1. 文本节点

文本节点总是被包含在元素节点的内部。但并非所有的元素节点都包含有文本节点。

  1. 属性节点

注释也是一种节点类型。元素都或多或少的有一些属性。我们可以利用这个属性对包含在元素里的东西做出准确的描述。并非所有的元素都包含着属性,但素有的属性都会被包含在元素里。

  1. getElementById()方法

DOM提供了一个名为getElementById()的方法,这个方法将返回一个与那个有着给定id属性值的元素节点相对应的对象。

这个方法是与document对象相关联的函数。在脚本代码里,函数名的后面必须跟有一组圆括号。这组圆括号包含着函数的参数。getElementById()方法只有一个参数:你想获得那个元素的id属性值。而且必须放在单引号或双引号里。

document.getElementById(”purchases”)

这个调用将返回一个对象,这个对象对应着document对象里的一个独一无二的元素。

我们还可以利用DOM提供的另外一种方法来提取对象

  1. getElementsByTagName()方法

getElementByTagName()方法将返回一个对象数组,每个对象分别对应着文档里有着给定标签的一个元素。它的参数是XHTML标签的名字:

element.getElementsByTagName(tag)

这个方法返回的是一个数组。

document.getElementsByTagName(”li”)

这个调用将返回一个对象数组,每个对象分别对应着document对象中一个列表项(li)

我们可以利用length属性查出这个数组的元素个数。

for (var I =0 ; I < document.getElementsByTagName(”li”).length; I++) {

    alert (typeof document.getElementsByTagName(”li”)[i]);

}

将方法名称赋值给变量,可以缩减打字量并提高函数的可读性,如

var items = document.getElementsByTagName(”li”);

for (var I = 0 ; I < itemts.length; i++) {

alert (typeof items[i]);

}

alert(document.getElementsByTagName(”*”).length);

可以让我们方便的获得一个页面总共有多少个元素节点。

如果只想知道其id属性值是purchase的元素包含着多少个列表项(li)的话,需要更具体的对象来调用这个方法:

var shopping = document.getElementById(”purchase”);

var items = shopping.getElementsByTagName(”*”);

在这两条语句执行完毕后,items数组将只包含其id属性值是purchase的无序清单里的元素。

3.4 趁热打铁

简要总结:

  • 一份文档就是一棵节点树
  • 节点分为不同类型:元素节点,属性节点和文本节点等。
  • getElementById()方法将返回一个对象,该对象对应着文档里的一个特定的元素节点
  • getElementByTagName()方法将返回一个对象数组,它们分别对应着文档里的一个特定的元素节点
  • 这些节点中的每个都是对象

3.4.1 getAttribute()方法

我们可以利用getAttribute()方法把获得的元素对象各种属性值查询出来。

var paras = document.getElementsByTagName(”p”);

for (var i = 0; i < paras.length; i++) {

alert (paras[i].getAttribute(”title”));

}

null是JS语句中的空值,若文档中含有多个未定义title属性的p标签,则会显示null。让我们重新修改这段代码,使其只在title属性存在时才弹出消息,同时提高可读性。

var paras = document.getElementsByTagName(”p”);

for (var i = 0; i < paras.length; i++) {

    var title_text = paras[i].getAttribute(”title”);

    if (title_text != null) {

        alert(title_text);

}

}

进一步把代码缩短:当检查某项数组是否是null值时,我们其实是在检查它是否存在。这种检查可以简化为直接把被检查的数据用作if语句的条件。

if(title_text != null)可以替换为 if(title_text)

3.4.2 setAttribute()方法

修改节点属性值的方法。

此方法也是只能通过元素节点对象调用的函数,需要向它传递两个参数:

object.setAttribute(attribute, value);

下面的语句我们首先获得purchase属性的元素,然后修改这个元素的属性值。

var shopping = document.getElementById(”purchase”);

shopping.setAttribute(”title”, “a list of goods”);

若一个元素没有setAttribute()方法中定义的属性值,则会先创建这个属性,然后再赋值。

一个细节: setAttribute()方法对文档的修改,将似的文档在浏览器窗口里的显示效果发生变化,但是源代码中不会有任何修改,也就是说,这个方法的修改不会影响任何原来的文档数据,这个是DOM的工作模式决定的:先加载文档的静态内容,再以动态方式对他们进行刷新,刷新不会影响文档的静态内容。

第三章总结:

  • getElementById()方法
  • getElementsByTagName()方法
  • getAttribute()方法
  • setAttribute()方法

这四个方法将是DOM的基石。

 

 

 

 

 

 

 

2007-12-09

对象:JavaScript学习笔记

归类于: JavaScript — admin @ 10:38 下午

2.9 对象

对象是一种非常重要的数据类型。对象是自我包含的数据集合,包含在对象里的数据可以通过两种形式:即属性方法访问:

  • 属性是隶属于某个特定对象的变量
  • 方法是只有某个特定对象才能调用的函数

对象就是由一些彼此相关的属性和方法集合在一起构成的一个数据实体。

在JS脚本里,属性和方法都需要使用一下语法来访问:

Object.property

Object.method()

我们可以假设一个对象的名字为person,分别有两个属性: 心情和年龄

Person.mood

Person.age

加入Person对象还关联着一些诸如walk()和sleep()之类的函数,这些函数是这个对象的方法。

Person.walk()

Person.sleep()

把这些属性和方法全部集合在一起,就得到了一个Person对象。换句话说,我们可以把Person看做是所有这些属性和方法的统称。

为了使用Person对象来描述一个特定的人,我们需要创建一个Person对象的实例(instance)。实例是对象的具体表现;对象是统称,实例是个体。

JS语言里,为给定对象创建一个新实例需要使用new关键字

var Jeremy = new Person;

这个语句创建了person对象的一个新实例jeremy,有了新实例,我们可以利用对象的属性检索jeremy信息:

Jeremy.age

Jeremy.mood

用户可以通过JS创建自己的对象: 术语称之为用户定义对象

JS提供了一系列预先定义好的对象,我们可以把这些对象直接用在脚本里,这些对象称为:内建对象。

2.9.1 内建对象

数组就是一个内建对象,当我们新建数组时,其实就是创建一个Array对象的新实例:

var beatles = new Array();

当需要了解数组有多少个元素时,我们利用Array对象的length属性来获得这一信息:

beatles.length;

其他例子包括Math对象,Date对象,例如Math对象的round方法可以把十进制数值舍为一个与之最接近的整数:

var num = 7.561;

var num = Math.round(num);

alert(num);

Date对象可以用来存储和检索一个特定的日期和时间相关的信息。在创建Date对象的新实例时,JS解释器将自动的使用当前日期和时间对它进行初始化:

var current_date = new Date();

Date对象提供了getDay(), getHours(), getMonth()等一系列方法,以供人们来检索与特定日期有关的信息。getDay()可以告诉我们给定日期是星期几;

var today = current_date.getDay();

2.9.2 宿主对象

除了各种JS内建对象,我们还可以在JS脚本里使用其他一些已经预先定义好的对象,后者不是由JS语言本身而是由它的运行环境提供的。具体到web应用,这个环境就是浏览器。由浏览器提供的预定义对象被称为宿主对象。

宿主对象主要包括Form, Image和Element。 我们可以铜鼓哦这些获得关于某给定网页上的表单,图像和各种表单元素的信息。

第三章: DOM

节点的概念

四个非常适用的DOM方法:getElementById, getElementByTagName, getAttribute和setAttribute

  1. 文档:DOM中的”D”

DOM是”Document Object Model”(文档对象模型)的首字母所写。如果没有document(文档),DOM也无从谈起。

  1. 对象: DOM中的”O”

“对象”是一种独立的数据集合。

循环与函数-JavaScript学习笔记

归类于: JavaScript — admin @ 12:35 上午

条件语句

if (condition) {

    statements;

}

条件必须放在if后面的圆括号中。条件的求值结果永远是一个布尔值,花括号中的语句,不管有多少条,只有在给定条件的求值结果是true的情况下才会得到执行。

if (1>2) {

alert(”The world has gone mad!”);

}else {

alert(”All is well with the world”);

}

2.6.1 比较操作符

几乎只能用在条件语句中的操作符

>, <, >=, <=, ==, !=, 比较符

2.6.2 逻辑操作符

JS允许我们把条件语句里的操作组合在一起。

比较操作叫做逻辑操作数,下面是把这两个逻辑操作数组合在一起的具体做法:

if (num>=5 && num<=10) {

alert(”The number is in the right range.”);

}

&&”逻辑与”,是一个逻辑操作符。

逻辑操作符的对象是布尔值,每个逻辑操作数返回一个布尔值true或false。

“逻辑与”操作只有在两个操作数都是true时才会是true。

“逻辑或”操作符由两个垂直线字符构成(||)。只要它的操作数中有一个是true,”逻辑或”操作就将是true。如果它的两个操作数都是true,”逻辑或”操作也将是true。只有两个都是false时,”逻辑或”操作才会是false。

if (num>10 || num<5 ){

alert (”The number is not in the right range.”);

}

JS还提供一个”逻辑非”操作符,它由一个感叹号(!)单独构成。”逻辑非”操作符只能作用于单个逻辑操作数,其结果是把那个逻辑操作数所返回的布尔值取反。

我们可以用”逻辑非”操作符把整个条件语句的结果颠倒过来。

if ( !(num >10 || num <5)){

alert (”The number IS in the right range.”);

}

2.7 循环语句

if语句的唯一不足是它无法用来完成重复性的操作。如果需要反复多次执行同一个代码块,就必须使用循环语句。

循环语句可以反复多次执行同一段代码,分为几种不同的类型,但它们的工作原理几乎一样:只要给定条件仍得到满足,代码就重复执行下去;一旦条件求值不再是true,循环就到此为止。

2.7.1 while

while (condition) {

statements;

}

while循环与if的唯一区别是:只要给定的求值结果是true,包含在花括号里的代码就将反复的执行下去。

var count = 1;

while (count < 11) {

alert (count);

count++;

}

代码分析: 首先,创建变量count并赋值1;

以count<11为条件(只要小于11,就重复执行这个循环),创建一个while循环;

在while内部,用”++”操作符对变量count的值执行加1操作;

而这一操作将重复10次;

当循环完成后,变量count的值是11

注意:这里的关键是在while循环的内部必须发生一些会影响循环控制条件的事情。

2.7.2 do…while

类似与if语句的情况,while循环的花括号部分所包含的语句有可能不被执行:因为对循环控制条件的求值发生在每次循环开始前,所以如果条件首次求值结果是false,则代码不会被执行。

在某些场合,我们需要那些被包含在循环语句内部的代码至少执行一次。这时,do循环将是我们最佳选择

do {

statements;

} while (condition);

这与刚才介绍的while循环非常相似,但是有个很大的区别: 对循环控制条件的求值发生在每次循环结束之后。因此,即使循环控制条件的首次求值是false,包含在花括号里的语句也至少会被执行一次。

我们可以把前一小节里的while循环改写为如下所示的do…while循环:

var count = 1;

do {

alert (count);

count++;

} while (count < 11);

这段代码的执行结果与上面的结果完全一样。循环10次,最终count的值是11.

再看看下面这个变体:

var count = 1;

do {

alert (count);

count++;

} while(count < 1);

这个do循环里,控制条件的求值永远不为true,可是因为do循环的循环条件出现在花括号部分之后,所以这个do里的语句还是执行了一次。

注意细节:这些语句执行完毕后,count的值将是2不是1。

2.7.3 for

用for循环来重复执行一些代码也是很方便。从循环执行一些代码的意义上讲,它类似于while循环;从另一方面讲,for循环只是刚才介绍的do循环的一种变体。 如果仔细观察do循环的例子,就会发现它们可以被改写:

initialize;

while(condition) {

statements;

increment;

}

而for循环不过是把如上所示的循环结构改写紧凑:

for (initial condition; test condition; alter condition) {

statement;

}

用for循环来重复执行一些代码的好处是循环控制结构更加清晰。与循环有关的内容都包含在圆括号内,上个例子可以改写成

for (var count = 1; count < 11; count ++) {

alert (count);

}

现在,当我们把一些代码放在花括号中间,我们清楚的知道代码将执行10次。

for循环最常见的用途之一是对某个数组里的全体元素进行遍历处理。这往往需要用到数组的array.length属性。这个属性告诉我们数组里的个数

var beatles = Array(”John”, “Paul”, “George”, “Ringo”);

for (var count = 0; count<beatles.length; count++) {

alert(beatles[count]);

}

我们将看到4条alert,分别对应4个队员。

2.8 函数

如果需要多次使用同一组语句,还可以把它们打包成函数。所谓函数就是一组允许人们在代码里随时调用的语句。从效果上来看,每个函数都相当于一个短小的脚本。

作为一个良好的习惯,我们应该先对函数定义再调用它们。

function shout() {

var beatles = Array(”John”, “Paul”, “George”, “Ringo”)

for (var count = 0; count < beatles.length; count ++){

alert(beatles[count]);

}

}

这个函数里的循环语句将依次弹出几个alert对话框来显示beatles乐队成员的名字,可以随时使用以下所示记号来调用这个函数:

shout();

每当需要重复执行时,我们可以利用函数来避免大量输入相同内容。不过函数真正的优势是我们可以把不同的数据传递给他们,而它们将使用实际传递给他们的数据来完成预定的操作。把数据传递给函数时,称为参数

函数的定义:

function name(arguments) {

statements;

}

JS提供了许多可以拿来就用的函数,例如alert。

在定义函数时,可以声明任意多个参数,需要用逗号隔开。函数内部,可以像使用普通变量那样使用任何一个参数。下面是一个函数的例子: 将两个数值相乘处理

function multiply(num1, num2){

    var total = num1 * num2;

alert(total);

}

在定义了这个函数以后,我们可以在任意位置调用:

multiply(10, 2);

如果这个函数能把乘法结果返回给调用这个函数的语句,往往更有用。我们可以创建一个函数,让他返回一个值,包括数值,字符串,数组,布尔值

function multiply(num1, num2){

    var total = num1 * num2;

    return total;

}

下面这个函数只有一个参数(一个华氏温度值),将返回一个值(同温度的摄氏温度值)

function convertToCelsius(temp) {

var result = temp – 32;

result = result / 1.8;

return result;

}

函数真正的价值体现在: 我们可以把他们当作一种数据类型来使用,意味着我们可以把一个函数的调用结果赋值给一个变量

var temp_fahrenheit = 95;

var temp_celsius = convertToCelsuis(temp_fahrenheit);

alert (temp_celsius);

把华氏温度值95转换为摄氏温度值。

参考: 命名变量时,我用下划线来分隔各个单词;命名函数时,我从第二个单词开始把每个单词的第一个字母大写。

变量的作用域

作为一种良好的习惯,我们第一次对某个变量进行赋值时应该用var对其做出声明。变量可以是全局的,也可以是局部的,在谈论全局变量和局部变量的区别时,我们其实是在讨论变量的作用域(scope)。

全局变量: 可以在脚本中任何位置被引用,包括函数的内部,全局变量的作用域是整个脚本。

局部变量:只存在于它做出声明的函数内部,函数外部无法引用,作用域仅限于特定的函数。

如果一个函数的内部不小心使用了某个全局变量,即使本意是想使用一个局部变量,JS也会认为是在引用那个全局变量。用var可以明确为变量设定一个作用域。

如果在某个函数中使用了var,那个变量就被视为一个局部变量,只存在于这个函数上下文中;反之,如果没有使用var,那个变量就被视为一个全局变量,如果脚本中已经存在一个同名的变量,这个函数将覆盖那个现有的变量的值。

例子:

function square(num) {

    total = num * num;

    return total;

}

var total = 50;

var number = square(20);

alert (total);

这段代码中,total的值从50到20被覆盖。输出结果是400。

因为未在这个函数里用var关键字把内部的total变量明确的声明为局部变量,这个函数就把全局变量的值也改变了。

正确的写法是 var total = num * num;

现在total安全了,再调用square()也不会影响到他。

请记住: 函数在行为方面应该像一个自我包容的脚本,这意味着在定义一个函数时,我们必须把它内部的变量全都明确的声明为局部变量。

不争,元气不伤;不畏,慧灼闪光。

不怒,百神和畅;不忧,心地清凉。

不求,不卑不亢;不执,可圆可方;

不贪,便是富贵;不苟,何惧君王!

2007-12-07

PSP又一方便的电影下载来源

归类于: psp — admin @ 11:39 下午

PSP其中一个很强大的功能就是视频播放–相信很多人买PSP也是因为这个功能

夏普生产的同时又是16:9的液晶屏幕,实在是MP4最佳选择。

以下提供一个超大数量级同时不断更新,内容丰富种类繁多的PSP视频内容来源-土豆网前提是你不需要高清的画面,否则还是老实的选择pmp格式的吧。

今天试用土豆网的软件–itudou,发现一个功能,视频转换,同时可以自动转换成PSP支持的mp4格式,省去了转换pmp的耗时过程。

itudou对PSP比较有用的几个功能

1. 视频量足够大: 播客类网站最大的优势,视频内容繁多。

2. 可下载并且速度很好: 至于版权问题,不打算研究,能提供就好,现在土豆网内的视频都可以通过itudou下载。

3. 自动格式转换: itudou内置了解码器,不用到处去找影视转换软件,下了就可以马上转,转了就能看,实在是懒人最佳的选择。

4. MP4格式: 清晰度可以接受,同时不像PMP格式的个头那么大,同样大小的内存卡可以多放很多东西。

5. 操作方便: MP4直接放到PSP内存卡根目录下的video文件夹即可,同时在PSP的菜单中,直接通过“视频”就能看到已经考进去的电影文件,直接就可以观看,很方便。

同时,itudou还提供了转换其他格式: 比如ipod,手机,其他型号MP4的转换。真的是很方便,下一个视频可以同时放到PSP和N73里看,两个人也不打架,嘿嘿。

最后说一句: itudou,适合懒人,入门者,对清晰度要求不高,喜欢看短视频的PSP和手机玩家!

感觉这个文章土豆应该当话题广告分我点利润 =。=

其他比较有用的PSP文章:

PSP2000和老P都可用的cps1模拟器中文版

PSP2000显示器输出

2007-12-06

了解javascript-JavaScript学习笔记

归类于: JavaScript — admin @ 11:31 下午

第一章:JavaScript简史

本章内容:

  • JavaScript的起源
  • 浏览器之争
  • DOM的演变史
  1. JavaScript的起源

BOM:浏览器对象模型

DOM:文档对象模型

什么是DOM?

简单的说,DOM是一套对文档的内容进行抽象和概念化的方法。

因为”image”和”forms”都是程序员已经理解了的”抽象化概念”,所以我们才能像下面这样在JavaScript脚本里引用”文档中第三个图像”或”文档中名为’details’”的表单:

document.image[2]

document.forms[’details’]

  1. 浏览器之争

    1. DHTML

DHTML是”dynamic HTML”的简称。DHTML的背后含义是:

  • 利用HTML把网页标记为各种元素;
  • 利用CSS设计各有关元素的排版样式并确定它们在窗口中的显示位置
  • 利用JavaScript实时的操控和改变有关样式

辅助了解:什么是 SHTML

使用SSI(Server Side Include)的html文件扩展名,SSI(Server Side Include),通常称为”服务器端嵌入”或者叫”服务器端包含”,是一种类似于ASP的基于服务器的网页制作技术。

  1. 浏览器之间的冲突

Netscape公司的DOM使用了专有的元素,称为层(layer)。这些层有唯一的ID,需要这样使用:

document.layer[’myelement’]

而在微软公司的DOM中,这个元素必须像下面这样声明

document.all[’myelement’]

这两种DOM在细节方面的差异并不止于这一点。假设你想找出myelement元素的left位置并把它赋值给变量xpos,那么netscape浏览器里必须这么做:

var xpos = document.layers[’myelement’].left

而在IE 4中,需要如下使用

var xpos = document.all[’myelement’].leftpos;

DHTML已经没落了:DHTML打开了一扇通往新世界的大门,但进入这个大门的人们发现这条路并不好走。

  1. 制定标准

新的标准化DOM的工作模式范例:

var xpos = document.getElementById(’myelement’).style.left

W3C推出的标准化DOM可以让任何一种程序设计语言对使用任何一种标记语言编写出来的任何一份文档进行操控。

  1. 浏览器以外的考虑

DOM是一种API(应用编程接口)。简单的说,API就是一组已经得到有关各方共同认可的基本约定。

W3C对DOM的定义是:”一个与系统平台和编程语言无关的接口,程序和脚本可以通过这个接口动态的对文档的内容,结构和样式进行访问和修改。”

第二章: JavaScript语法

  • 语句
  • 变量和数组
  • 操作符
  • 条件语句和循环语句
  • 函数与对象

2.1 准备工作

两种使用JS的方法:

代码插入文档<head>部分的<script>标签间

<html>

<head>

<script type=”text/javascript”>

</script>

</head>

</html>

更好的方法是先把js代码存入一个文件,建议.js作为这种文件的文件名,再利用<script>标签的src属性指向该文件

<html>

<head>

<script type=”text/javascript” src=”file.js”>

</script>

</head>

</html>

程序设计语言分为解释型和编译型两大类。Java或C++语言需要一个编译器,编译器是一种能够把用Java等高级语言编写出来的源代码翻译为直接在计算机上执行的二进制可执行文件的程序。

解释型程序设计语言不需要编译器—它们仅需要解释器。

与解释型程序设计语言相比,编译型程序设计语言往往速度更快,可移植性也更好,但它们的学习曲线往往相当陡峭。

2.2 语法

语法指语句结构方面的各项规则

2.3 语句

语句是任何一个脚本的基本构成单位。

将每条语句独占一行,并用分号作为结尾,是良好的习惯,同时更利于跟踪JS脚本的执行流程。

注释://为注释符,只对一行内的语句有效。

或使用/* */ 这种注释符号。

2.4 变量

JS对变量赋值的语法:

mood = “happy”;

age = “33″;

把值赋给变量后,该变量即包含这个值,我们可以通过其他的方式使用这些变量。

JS允许程序员直接对变量进行赋值而无需提前对它们做出声明。但提前对变量做出声明是一个良好的编程习惯

var mood, age;

var mood=”happy”;

var age = 33;

var mood = “happy”, age = 33;

JS中,变量和其他语法元素的名字是区分大小写的。不允许变量的名字中包含空格或标点符号。允许包含字母,数字,美元符号和下划线字符。

var my_mood = “happy”;

其中,happy是一个字面量,也就是可以在JS代码中直接写出来的数据内容。

2.4.1 数据类型

变量mood的值是一个字符串类型的字面量,变量age的值则是一个数值类型的字面量

类型声明

强类型

弱类型

  1. 字符串

字符串由零个或多个字符构成。包括字母,数字,标点符号和空格。字符串必须放在引号里。

如果字符串本身包括双引号,则最好放在单引号中,如字符串本身包括单引号,则最好放在双引号中。

字符转义: \符号为字符转义符号。

  1. 数值

比较随意

  1. 布尔值

布尔值只有两种: true或false

布尔值的两种状态不可能同时出现,千万不要把布尔值用引号括起来,否则就编程字符串类型的数据。

2.4.2 数组

字符串,数值和布尔值都属于离散值,如果某个变量是离散的,它在任意时刻就只能有一个值,如果想用一个变量来存储一组值,就需要数组(array)

var beatles = Array(4);

声明的同时,规定了这个数组的长度。

可以在声明数组时不给出明确具体的元素个数

var beatles = Array();

向数组中添加元素的操作称为填充。填充数组时,不仅需要给出新元素的值,还需要在数组中为新元素指定存放位置,这个位置要通过下标(index)指出。

array[index] = element;

var beatles = Array(4);

beatles[0] = “John”;

beatles[1]= “Paul”;

beatles[2] = “George”;

beatles[3] = “Ringo”;

数组第一个元素的下标是0

var beatles = Array(”John”, “Paul”, “George”, “Ringo”);

var lennon = Array(”John”, 1940, false);

数组元素可以是变量:

var name = “John”;

beatles[0] = name;

数组元素的值可以是另外一个数组的元素。

var names = Array(”Ringo”, “John”, “George”, “Paul”);

beatles[1] = names[3];

数组还可以包含其他数组

var lennon = Array(”John”, 1940, false);

var beatles = Array();

beatles[0] = lennon;

读取多重数组中的值 beatles[0][0]

关联数组

数组的下标可以是字符串:

var lennon = Array();

lennon[”name”] = “John”;

lennon[”year”] = 1940;

lennon[”living”] = false;

关联数组可以大大提高数组的可读性。

2.5 操作

算术操作符

+, -, *, /

变量可以包含操作

操作可以对变量进行

+也可以用作拼接,针对字符串。如果把数值与字符串拼接,则得到的还是字符串。

+=: 可以一次完成”加法和赋值”或拼接和赋值

var year = 2005;

var message = “This year is”;

message += year;

2007-12-05

网络的机会仍然很多-网站项目可以参考的5个方向

归类于: 生活经验 — admin @ 11:42 下午

个人网站经常在选材中有很大的迷惑,认为中国的互联网已经发展到一定阶段啦,市场被大网站垄断啦,市场饱和啦,其实这个是错误的概念: 中国互联网依然处于告诉发展时期,网民增加的速度远远大于网站对市场的垄断速度,同时也同样落后与美国互联网市场5年以上,所以中国的互联网依然不够成熟,太多的产品还是可以有很大的改善。

个人网站的定位可以考虑以下几种:

需求放大: DIGG,BLOG,书签,mblog,无疑不是需求放大的一种,过去也存在,只是不被人注意,而真的放大起来,ok,你发现是个好用的工具和网站。

传统行业结合: 传统行业结合算是一个老生常谈的方向了,但是现在依然有做头,就是流化你要做的商业流程,每一个细节都分析出来,同时观察每一个环节,看哪个环节可以结合互联网的开放,快速,低成本的优势,针对性的来为这个环节服务,会有不小的收获。

生活结合: 人需要生存,必然依赖生活中必要的东西,衣食住行,任何一个都可以细化,想想2年前会有什么口碑网吗?饭桶网的出发点在哪? 但是仍然可以继续细分,一定要相信细分的力量,传统行业中的外包公司,同样也是细分某一个行业里的所有流程,找出共同点,然后发挥自己的低成本及质量保证的优势,获得一个又一个订单。

优化服务:记得有人说过,靠产品优化的网站很难成功,但是在现在这个用户至上的互联网,越来越多的网民已经被“惯”坏了,从网站视觉效果,网站的代码重构,到流程上的优化与用户体验的重视,用户的要求越来越高,你认为豆瓣之前书评网的数量很少吗?为什么没有现在豆瓣的效果?因为产品所提供的服务和功能以及使用服务的用户体验不足以满足用户!

社会化网络: 麦田比较推崇的一个说法就是互联网上的用户只在做两件事,扎堆,聊天,当然这是指互联网服务类用户,而不是工具类用户,而个人站长确总是以为这种网站很难,投资需要很大,技术需要很高,等等。其实在过去的个人网站中,靠论坛火起来的很多很多,论坛这样产品的架构都足以满足用户沟通的需求,何况现在更多的网站形式!而过去在做猪猪乐园的时候个人比较奉行的一句话:BT是桥梁,用户是主体。任何网站的目标都是聚集用户,不同的定位聚集不同的用户,如果能让这些用户之间接触,交流起来,不就是现在的facebook,myspace吗? myspace前期是靠音乐做起来的,还有据说要被facebook收购的分贝网。所以如果你的网站现在有一定的流量和人气,那别犹豫,在做好资源的同时,开始思考如何给用户搭建沟通,交流的平台吧!

以上5个方向只是平时忽然灵光一闪的结果,其实互联网的机会还远远大于这些,如果有机会会整理更详细的,慢慢分享出来,总之,个人站长需要把眼光和定位提高,相信你自己,把网站当事业来做,不要太功利了!

原创: 猪猪经验分享

首发: 猪窝

转载请注明原文链接

2007-12-03

产品测试需要注意的问题–验收指标的明确

归类于: 工作经验 — admin @ 11:21 下午

 产品经理一个比较重要的技能就是描述,翻译: 不同部门,不同水平,不同专业的人,团结在一起制作一个产品,从前期的项目定位出发,到中期的产品需求制作,到开发中的沟通,协调,交流最终的产品测试,产品经理一直在进行翻译,将运营,销售方面的问题转换为技术,设计可以理解的,可执行的,可量化的内容来进行协调,沟通。

从个人的工作经验来看,比较容易忽略的一个环节是测试:测试同样可能会产生歧义。

很简单的一个例子:产品上线,一个很常用也经常提出来的词,在不同的部门却反映出不同的需求。

运营角度来看一个产品的上线主要就是表现层,包括视觉上,信息展现上,流程交互上。

而技术角度来看主要就是功能实现上。 所以在产品测试这个环节一定要定义好每一个功能点,每一个细节的最终衡量标准:努力做到量化或者是无歧义,每个人看到这个标准,都会在脑海中浮现出同样的情景,这个不好做,但是有必要做。最简单有效的方法就是把每一个功能需求进行细分,细分到每一个功能点,及用例(用户实际操作情况的描述)。

至于用例的制作,个人暂时停留在对情境的语言描述上,感觉有必要系统的学习一下UML了,如果有其他好的方法可以借鉴,会第一时间分享。

附上一个分享:2007年度全球50个最佳网站
里面包括一个比较感兴趣的方向: 烹饪网站

·Chow.com
CNET旗下一个制作精良的介绍食物和烹饪的网站。

有空会仔细思考一下这方面的方向,感觉这个方向在今后还是会有大发展的!

今天需要表扬google的反应速度,今天到公司,习惯性的打开googlereader,惊奇的发现已经好了,而googlereader坏了是昨天发布的,同时按照千鸟的建议给google发了个bug举报信息,今天发现已经好了,很是开心,无论是什么原因好的,我宁愿相信是我自己的力量让google注意到而好的,嘿嘿,结果就是google又一次让人惊喜,高调提出表扬,又同样问题的朋友可以考虑试试。

下一页 »

基于 WordPress