猪窝

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-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;

基于 WordPress