《JavaScript Dom编程艺术》读书笔记(一)

执行Javascript的方式

第一种方式是将JS代码放到 < head > 标签中的 < script > 标签之间:

<head>
    <script>
        ....... //JS代码放在这
    </script>
</head>

一种更好的方式是将JS代码存为一个扩展名为.js的独立文件。通过 < head >标签中的 < script >标签中的 src 属性指向该文件:

<head>
    <script src="text.js"></script>
</head>

但最好的做法是把 < script > 标签放到 html 文档的最后,< /body > 标签之前:

<body>
    <script src="text.js"></script>
</body> 

这样能使浏览器更快的加载页面。

语句

每条语句都以分号结尾,并换行(最好的写法,容易阅读,更容易追踪JS脚本的执行顺序):

first statement;
second statement;

当然也可以放在一行:


first statement;second statement;

注释

注释能够有效的帮助了解代码流程,必须养成良好的注释习惯。

JS注释的3种形式:

  1. //自我提醒,有注释是好事

  2. /* 自我提醒
    有注释是好事 */

  3. <!– 自我提醒,有注释是好事

如果使用 // 作为一行的开始,这一行就会被当成一条注释:

// 自我提醒,有注释是好事

如果使用这种注释方式,就必须在每个注释行的开头加上两个斜线,下面这种的写法脚本就会出现问题:

// 自我提醒
   有注释是好事
   

必须书写成类似如下样式:

// 自我提醒
// 有注释是好事

如果打算注释多行,可以通过 /* */ 来完成:

/* 自我提醒
   有注释是好事 */
  

这种注释在需要插入大段注释时很有用,它可以调高整个脚本的可读性。

还可以使用 HTML 风格的注释,但这种做法仅适用于单行注释。其实JS解释器对 “< ! – – ” 的处理与对 // 的处理是一样的:

<!-- 这是JS中的注释

如果是在HTML文档中,还需要以 ” – – > ” 来结束注释:

<!-- 这是HTML中的注释 -->

但JS不要求这样做,它会把 ” – – > ” 视为注释内容的一部分。

注意: HTML 允许上面这种注释跨越多行,但JS要求这种注释的每行必须开头加上 “< ! – – “来作为标志。

为了避免混淆,最好单行注释使用 // , 多行注释使用 /* */

变量

var 称为变量,js中可以给变量赋值:

mood = "happy";
age = "13"; 

在JS中,如果在对某个变量赋值之前未声明,赋值操作将自动声明该变量。虽然JS没有强制要求必须提前声明变量,但提前声明变量是一种良好的编程习惯。下面的语句中对变量 mood 和 age做出了声明:

var mood;
var age;

不必单独声明每个变量,也可以用一条语句一次声明多个变量:

var mood, age;

甚至可以一石二鸟,把声明变量和对该变量赋值一次完成:

var mood = "happy";
var age = 33;

甚至还可以像下面这样:

var mood = "happy", age = 33;

像上面这样的声明和赋值是最有效率的做法,这一条语句的效果相当于下面这些语句的总和:

var mood, age;
mood = "happy";
age = 33;

JS中,变量和其他语法元素的名字都是区分字母大小写的。例如下面的语句,是在对两个不同的变量进行赋值:

var mood = "happy";
Mood = "sad";

JS语法中不允许变量名中包含空格或标点符号(美元符号 ” $ ” 例外)。下面这条语句将导致语法错误:

var my mood = "happy";

JS变量名允许包含字母、数字、美元符号和下划线(但第一个字符不允许是数字)。为了让比较长的变量名更容易阅读,可以在变量名中的适当位置插入下划线:

var my_mood = "happy";

另一种方式是使用驼峰格式,,删除中间的空白(下划线),后面的每个新单词改用大写字母开头:


var myMood = "happy";

通常驼峰格式是函数名、方法名和对象属性名的首选格式。

数据类型

在声明变量的同时还必须同时声明变量的数据类型,这种做法称为类型声明。

必须明确类型声明的语言称为强类型语言。JS不需要进行类型声明,因此它是一种弱类型语言,可以在任何阶段改变变量的数据类型。

以下语句在强类型语言中是非法的,但在JS里却完全没有问题:

var age = "thirety three";
age = 33;

JS并不在意变量age的值是一个字符串还是一个数。

字符串

字符串由零个或多个字符构成。字符包括(但不限于)字母、数字、标点符号和空格。字符串必须包在引号里,单引号或双引号都可以。下面两条语句含义完全相同:

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

JS中可以随意选用引号,但最好根据字符串包含的字符来选择。如果字符串包含双引号,就把整个字符串放在单引号里;如果字符串包含单引号,就把整个字符串放在双引号里:

var mood = "don't ask";

如果想再上门这条语句中使用单引号,就必须保证字符 “n” 和 “t” 之间的单引号能被当成这个字符串的一部分。这种情况下这个单引号需要被看做一个普通字符,而不是这个字符串的结束标志。这种情况需要对这个字符进行转义。在JS中用反斜线对字符进行转义:

var mood = 'don\'t ask';

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

var height = "about 5'10\" tall";

实际上这些反斜线并不是字符串的一部分。

需要养成一个良好的编程习惯,不管选择用双引号还是单引号,在整个脚本中最好保持一致。如果在同一个脚本中一会儿使用双引号,一会儿又使用单引号,代码很快就会变得难以阅读和理解。

数值

给变量赋一个数值,不用限定数值必须为一个整数。JS允许使用带小数点的数值,并且允许任意位小数,这样的数称为浮点数:

var age = 33.25;

也可以使用负数。在有关数值的前面加上一个减号( – )表示它是一个负数:

var temperature = -20;

JS也支持负数浮点数:

var temperature = -20.3333333;

布尔值

布尔数据只有两个可选值—— ture 或 false。假设需要这样一个变量:如果我正在睡觉,这个变量将存储一个值;如果我没在睡觉,这个变量将储存另一个值。可以用字符串数据类型把变量赋值为 “sleeping” 或 “not sleeping”。但使用布尔数据类型是更好的选择:

var sleeping = ture;

布尔值不是字符串,千万不要把布尔值用引号括起来。布尔值 false 与 “false”是两码事!

下面这条语句将变量设置为布尔值ture:

var married = true;

下面这条语句将变量设置为字符串“ture”:

var married = "true";

数组

字符串、数值和布尔值都是标量。如果某个变量是标量,它在任意时刻就只能有一个值。如果想用一个变量来存储一组值,就需使用数组。

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

JS中,数组可以用关键字Array声明,声明数组的同时还可以指定数组初始元素的个数,也就是这个数组的长度。例如用名位 beatles 的变量来保存 Beatles 乐队全体四位成员的姓名:

var beatles = Array(4);

有时无法预知某个数组有多少个元素。JS根本不要求在声明数组时必须给出元素个数,我们完全可以在声明数组时不给出元素个数:

var beatles = Array();

向数组中添加元素的操作称为填充。在填充数组时,不仅需要给新元素的值,还需要给出新元素在数组中的存放位置,这个位置就是这个元素的下标。数组里一个元素配有一个下标。下标必须用方括号括起来:

array[index] = element;

按照 Beatles 乐队成员的传统顺序(即 John、Paul、George 和 Ringo)进行填充。第一个:

beatles[0] = "John";

用 0 而不是 1 作为第一个下标是JS里的一条规则。

声明和填充 beatles 数组的全过程:

var beatles = Array(4);
beatles[0] = "John";
beatles[1] = "Paul";
beatles[2] = "George";
beatles[3] = "Ringo";

现在可以通过 下标值 “2” ( beatles[2] ) 来获取元素 “George”。

特别注意, beatles 数组的长度是 4,但是数组最后一个元素的下标却是 3,因为数组是从 0 开始计数的。

有一种相对简单的填充方式:在声明数组的同时对它进行填充。这种方式要求用逗号把各个元素隔开:

var beatles = array( "John", "Paul", "George", "Ringo" );

上面这条语句会为每个元素自动分配一个下标:第一个下标是 0 ,第二个是 1,依次类推。因此,beatles[2] 仍将对应于取值为 “George” 的元素。

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

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

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

var years = [ 1940, 1941, 1942, 1943 ];

甚至可以把这 3 种数据类型混在一起存入一个数组:

var lennon = [ "John", 1940, false ];

数组元素还可以是变量:

var name = "John";
beatles[0] = name;

这将把 beatles 数组的第一个元素赋值为 “John”。

数组元素的值还可以是另一个数组的元素。下面两条语句将把 beatles 数组的第二个元素赋值为 “Paul”:

var names = [ "Ringo", "John", "Paul", "George" ];
beatles[1] = names[3];

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

var lennon = [ "John", 1940, false ];
var beatles = [];
beatles[0] = lennon;

现在 beatles 数组的第一个元素的值就是另一个数组。想要获取那个数组里的某个元素的值,需要使用更多的方括号。 beatles0的值是“John”, beatles0的值是 1940, beatles0的值是 false。

关联数组

如果在填充数组时只给出了元素的值,这个数组就将使一个传统数组,它的各个元素的下标将会自动创建和刷新。

可以通过在填充数组时为每个新元素明确地给出下标来改变这种默认的行为。在为新元素给出下标时,不比局限于使用整数数字。可以使用字符串:

var lennon = Array();
lennon["name"] = "John";
lennon["year"] = 1940;
lennon["living"] = false;

这样的数组叫做关联数组。由于可以使用字符串来代替数字值,使代码更具有可读性。这种做法并不是一个好习惯,不推荐使用。理想情况下,不应该修改Array对象的属性,二应该使用通用的对象( Object )。

对象

对象是自包含的数据集合,包含在对象里的数据可以通过属性和方法两种形式访问。

  • 属性是隶属于某个特定对象的变量

  • 方法是只有某个特定对象才能调用的函数

对象是由一些属性和方法组合在一起而构成的一个数据实体。

在JS离,属性和方法都使用 “点” 语法来访问:

Object.property     //属性
Object.method()     //方法

假如对象的名字是Person,需要使用对象的属性必须使用如下记号:

Person.mood
Person.age

假如 Person 对象还关联着一些诸如 walk() 和 sleep() 之类的函数,这些函数就是这个对象的犯法,需要使用如下记号来访问:

Person,walk()
Person.sleep()

为了使用 Person 对象来描述一个特定的人,需要创建一个 Person 对象的实例。实例是对象的具体个体。例如你和我都是人,都可以用 Person 对象来描述;但你和我是两个不同的个体,很可能有着不同的属性(例如,年龄可能不一样)。因此,你和我对应这两个不同的 Person 对象,虽然它们都是 Person 对象,但它们是两个不同的实例。

为给定对象创建一个新实例需要使用 new 关键字:

var jeremy = new Person;

这条语句将创建出 Person 对象的一个新实例 jeremy。之后可以像下面这样利用 Person 对象的属性来检索关于 jeremy 的信息:

jeremy.age
jeremy.mood

内建对象

数据就是一种内建对象。当使用new关键字去初始化一个数组时,其实是在创建一个Array对象的新实例:


var beatles = new Array();

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


beatles.lenggth;

Array对象知识诸多JavaScript内建对象中的一种。其他例子包括Math对象和Date对象,它们分别提供了许多非常有用的方法供人们处理数值和日期值。例如,Math对象的round方法可以把十进制数值舍入为一个与之最接近的整数:


var num = 7.561;
var num = Math.round(num);
alert(num);

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


var current_date = new Date();

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


var today = current_date.getDay)_;

宿主对象

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

宿主对象包括Form、Image和Element等。可以通过这些对象获得关于网页上表单、图像和各种表单元素等信息。还有一个宿主对象也能用来获得网页上的任何一个元素的信息,它就是document对象。

    原文作者:蹦蹦跳跳的小鱼人
    原文地址: https://segmentfault.com/a/1190000005183632
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞