《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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞