Molerose

Javascript DOM 编程艺术 (笔记No.1)
学习一种新的程序设计语言看起来可能很难,但事实却并非如此。DOM脚本看起来似乎比CSS更复杂,可只要领悟了它的语法...
扫描右侧二维码阅读全文
05
2018/09

Javascript DOM 编程艺术 (笔记No.1)

学习一种新的程序设计语言看起来可能很难,但事实却并非如此。DOM脚本看起来似乎比CSS更复杂,可只要领悟了它的语法,你就会发现自己又掌握了,一样功能强大的Web开发工具。归根结底,代码都是思想和概念的体现。


Javascript 简史

名词解释

  • HTML (超文本标记语言)
  • CSS (层叠样式表)
  • DOM (文档对象模型)
  • BOM (浏览器对象模型)
  • API (应用编程接口)

Javascript 的起源

Javascript 是一种脚本语言,通常只通过Web浏览器去完成一些操作而不能像不同意义上的程序那样独立运行。

什么是DOM?

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

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

Javascript 语法

重点概念

javascript 编写的代码必须通过HTML/XHTML文档才能执行。

程序设计语言分为解释型和编译型两大类。

  • Java或C++等语言需要一个编译器,编译器是一种程序,能够吧用Java等高级语言编写出来的源代码翻译为直接在计算机上执行的文件。
  • 解释型程序设计语言不需要编译器,它们仅需要解释器。对于Javascript语言,在互联网环境下,Web浏览器负责完成有关的解释和执行工作。
  • 用编译型语言编写的代码有错误,这些错误在代码编译阶段就能被发现,而解释型语言代码中的错误只能等到编译器执行到有关代码时才能被发现。
  • 与解释型语言相比,编译型语言往往速度更快,可移植性更好。

语法

Javascript 的语法与Java和C++语言的语法非常相似

语句(statement)

Javascript 语句与英语中的句子很相似,它们是构成任何一个脚本的基础。

注释(comment)

建议使用 // 注释单行

使用 /* code */ 注释多行

变量(variable),赋值(assignment),声明(declare)

代码实例 放置页面 <script> </script> 中执行

mood = "happy"
age = 39

alert(mood)
alert(age)

Javascript 允许程序员直接对变量赋值而无需事先声明。这在许多程序设计语言中是不允许的。有很多语言要求在使用任何变量之前必须先对它做出‘介绍’,也称之为声明(declare)

在Javaacript语言里,变量和其他语法元素的名字都是区分字母大小写的。名字mood的变量与Mood,mOOD或mOOd的变量没有任何关系,它们不是同一个变量。下面的语句是在对不同的变量进行赋值:

var mood = "happy"
MOOD = "sad"

数据类型

有些其它语言要求在声明变量的同时还必须同时声明变量的数据类型,这种做法成为类型声明(typing)

必须明确类型声明的语言称为强类型(strongly typed)

Javascript不需要进行类型声明,因此它是一种弱类型(weakly typed),这意味着程序员可以在任何阶段改变变量的数据类型。

1. 字符串

字符串由领个或多个字符构成

字符包括(但不限于)字母、数字、标点符号和空格

字符串必须在引号里,单引号或双引号都可以。

如下这两条语句的含义完全相同

var mood = 'happy'
var mood = "happy"

也可以随意选用引号

var mood = "don't ask"

如果上述例子外层使用单引号的话,就必须保证n和t之间的单引号被当作一个字符串的一部分。

这种情况下这个单引号需要被看做一个普通字符,而不是这个字符串的结束标志。

这种情况下我们需要对这个字符进行转义(escaping)

在Javascript里用反斜线对字符进行转义:

var mood = 'don\'t ask'

类似的,如果想用双引号来抱住一个本身包含双引号的字符串,就必须用反斜线对字符串中的双引号进行转义

var mood = "about 5'10\" tall"

2. 数值

如果想给一个变量赋一个数值,不用限定它必须是一个整数

Javascript允许使用带小数点的数值,并且允许任意位小数,这样的数称为浮点数(floating-point number)

var age = 33.25

也可以是负数

var age = -20

同样也知识负数浮点数

var age = -20.333333

3. 布尔值(boolean)

布尔数据只有2个可选值truefalse

从某种意义上讲,为计算机设计程序就是与布尔值打交道。作为最基本的事实,所有的电子电路只能识别和使用布尔数据

电路中有电流或是没有电流,不管是使用术语truel和false、yes和no或者1和0,中药的是只能取两种可取值中的一种

布尔值不是字符串,千万不要把布尔值用引号括起来。

布尔值false和字符串值"false"是两码事!

数组(Array)

字符串、数值和布尔值都是标量(scalar)

如果某个变量是标量,它在任意时刻就只能有一个值。

如果想用一个变量来储存一组值,就需要使用数组(array)

数组是指用一个变量表示一个值的集合,集合中的每个值都是这个数组的一个元素(element)

在Javascript中,数组可以用关键词Array声明。

声明数组的同时还可以指定数组初始元素个数,也就是这个数组的长度(length)

var beatles = Array(4)

有时,我们无法预测数组有多少个元素。没有关系,Javascript根本不要求在声明数组时必须给出元素个数,我们完全可以在声明数组时不给出元素个数。

var beatles = Array()

像数组中添加元素的操作成为填充(populating)

在填充数组时,不仅需要给出新元素的值,还需要给出新元素在数组中存放的位置,这个位置就是这个元素的下标(index)

数组里一个元素配有一个下标(在Javascript的世界里,下标是从0开始的)

array[index] = element;

对于数组的填充,还有一个简单的方法:在声明数组的同时对它进行填充。

var beatles = Array("John","Paul","George","Ringo");
alert(beatles[0])
// alert 所弹出的内容会是John

我们甚至用不着明确的表明我们是在创建数组。事实上,只需要用一对方括号把各个元素的初始值括起来就可以了。

var beatles = ["John","Paul","George","Ringo"]

数组元素不必非得是字符串。可以把一些布尔值存入一个数组,还可以把一组数值存入一个数组

var beatles = ["John",1994,false];

数组的元素还可以是变量

var beatles = ["John",1994,true];
var name = "simon";
beatles[0] = name;
alert(beatles[0])
// alert 所弹出的内容会是 simon

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

var names = ["Ringo","John","George","Paul"];
var beatles = Array();
beatles[1] = names[1];
alert(beatles[1]);
// alert 所弹出的内容是 John

数组还可以包含其它的数组!数组中的任何一个元素都可以把一个数组作为它的值

var lennon = ["John","Paul","George","Ringo"];
var beatles = [];
beatles[0] = lennon;
alert(beatles[0][1]);
// alert 所弹出的内容是 Paul

对象(Object)

与数数组类似,对象也是使用一个名字表示一组数值。

对象的每一个值都是对象的一个属性,例如:

var lennon = Object();
lennon.name = "simon";
lennon.year = 1994;
lennon.living = false;
alert(lennon.name);
// alert 所弹出的内容是 simon

创建对象还有一个更简洁的语法,即花括号语法:

{ propertyName:value, propertyName:value }

比如上方的lennon对象也可以写成如下方法

var lennon = { name:"simon", year:1994, living:false}

属性名与Javascript变量的命名规则有相同之处,属性值可以是任何Javascript值,包括其他对象。

用对象来代替传统数组的做法意味着可以通过元素的名字而不是下标数字来引用他们,这就大大的提高了脚本的可读性。

var lennon = {name:"simon", year:1994, living:false}
var beatles = Array();
beatles[0] = lennon;
alert(beatles[0].name);
// alert 所弹出的内容是 simon

再此基础上,还可以做进一步的改进:把beatles数组也声明为对象而不是传统数组。

这样一来我们就可以用“drummer”或“bassist”等更有意义且容易记忆的字符串值,而不是一些枯燥乏味的整数作为下标去访问这个数组里的元素了。

var lennon = {name:"simon", year:1994, living:false};
var beatles = {};
beatles.vocalist = lennon;
alert(beatles.vocalist.name);
// alert 所弹出的内容是 simon
Last modification:September 5th, 2018 at 08:47 pm
If you think my article is useful to you, please feel free to appreciate

2 comments

  1. 坤泽教育

    编程也是有艺术的

  2. ebfd

    卖家刷单单号网站 刷单单号购买网站www.5adanhw.com

Leave a Comment