Js 入门经典《JavaScript DOM 编程艺术》知识点回顾(一)

1,442 阅读9分钟
原文链接: www.jianshu.com

JavaScript

前言

众所周知《JavaScript DOM编程艺术》是JavaScript的入门经典,前一段时间我从头到尾看了一遍(第二版),虽然知识点有限,但作为入门书籍确实不错,鉴于篇幅有限,我会只详细梳理本书中的较为重要知识点,过于基础的将不再赘述,本篇适合刚入门JavaScript的同学复习Js基础知识


JavaScript基础语法

程序设计语言分为解释型语言和编译型两大类。Java或C++等语言需要一个编译器(compiler)。编译器是一种程序,能够把用Java等高级语言编写出来的源代码翻译为直接在计算机上执行的文件。
解释型程序设计语言不需要编译器——它们仅需要解释器。对于JavaScript语言,在互联网环境下,Web浏览器负责完成有关的解释和执行工作。浏览器中的JavaScript解释器将直接读入源代码并执行。浏览器中如果没有解释器,JavaScript代码就无法执行。
编译型语言编写的代码有错误,这些错误在代码编译阶段就能被发现。而解释型语言代码中的错误只能等到解释器执行到有关代码时才能被发现。
与解释型语言相比,编译型语言往往速度更快,可移植性更好,但它们的学习曲线也往往相当陡峭。

注释

  • 如果单行注释,请使用斜线“/”

//有注释是好事!

  • 多行注释请用/**/

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

需要注意的是,“<!-- --!>”这种注释方法在JavaScript里视为单行注释

<!--这是JavaScript中的注释

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

JavaScript会把“--!>”当做注释内容的一部分,尽量不要在JavaScript中使用这种风格的注释。

变量

  • 在JavaScript脚本中,如果你在对某个变量赋值之前未声明,赋值操作将自动声明该变量,虽然JavaScript没有强制要求程序员必须提前声明变量,但提前声明变量是一种良好的编程习惯。
var mood="happy",age=33;
//向上面这样的声明和赋值是最有效率的做法,这一条语句的效果等于下面这些语句的总和
var mood,age;
mood="happy";
age=33;
  • 在JavaScript语言里,变量和其他语法元素的名字都是区分大小写的
var mood="happy";
var MOOD="sad";
//MOOD和mood并不是同一变量
  • JavaScript语法不允许变量名中包含空格或标点符号(美元符号“$”除外)
var my mood="happy";
//上面语句有语法错误,变量名中不该包含空格
  • JavaScript变量名允许包含字母,数字,美元符号和下划线(但第一个字符不允许是数字),通常驼峰格式(camel case)是函数名,方法名和对象属性名命名的首选格式
var myMood="happy";

数据类型

必须明确类型声明的语言称为强类型(strongly typed)语言。JavaScript不需要进行类型声明,因此它是一种弱类型(weakly typed)语言。这意味着你可以在任意阶段改变变量的数据类型。

var age = "thirty three";
age = 33;
//Javascript并不在意age变量是一个数还是一个变量
  • 字符串

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

var age = " thirty three ";
var age = ' thirty three ';
//以上两条语句完全相同
var mood="don\'t ask";
//想在双引号中引用单引号要使用转义字符
  • 布尔值

布尔类型只有两个可选项——ture或false,布尔值不是字符串,千万不要把布尔值用引号括起来。布尔值false与字符串值"false"是两码事!

数组

在JavaScript中,数组可以用关键字Array声明。

var beatles=Array();

我们在填充数组的时候可以采用如下方式:

//在声明的同时对它进行填充
var beatles=Array("John","Paul","George","Ringo");

//也可以压根不用明确地表示是在创造数组,直接用方括号括起来即可
var beatles=["John","Paul","George","Ringo"];

//甚至可以多种类型混在一起存入一个数组
var beatles=["John",1940,false];

//数组元素的值还可以是一个变量
var names="John";
beatles[0]=names;

//数组元素的值还可以是另一个数组的元素
var names=["John","Paul","George","Ringo"];
beatles[1]=names[3];

//数组还可以包含其他的数组!
var lennon=["John",1940,false];
var beatles=[];
beatles[0]=lennon;
//此时beatles[0][0]的值为"John"……

算数操作符

加号(+)是一个比较特殊的操作符,它既可以用于数值,也可以用于字符串。把两个字符串合二为一是一种直观易懂的操作:

var massage="I am feeling"+"happy";


//甚至可以把数值和字符串拼接在一起,因为JavaScript是一种弱类型语言,所以这种操作是允许的。
//这时,数值将被自动转换为字符串
var year=2017;
var message="The year is"+year;

需要注意的是
alert("10"+20);
alert( 10 + 20 );
//第一条alert语句将返回字符串“1020”,第二条将返回数值30

比较操作符

相等操作符==并不严格相等,这一点很容易让人犯糊涂。例如,比较false与一个空字符串会得到什么结果?

var a = false;
var b = "";
if(a == b){
alert("a equals b");
}
//这个条件语句的求值结果是true,为什么?因为相等操作符==与
//false的含义相同,要严格进行比较,就要用另一种等号(===)。这个全等操作符会执行严格的比较,
//不仅比较值,而且会比较变量的类型

逻辑操作符

逻辑与&&,逻辑或||,逻辑非!

循环语句

  • While循环

While循环与if语句非常相似,它们的语法几乎一样:

while(condition){
  statements;
}
//whileif语句唯一的区别是:只要给定条件的求值结果是true,
//包含在花括号里的代码就将反复的执行下去
  • do循环

在某些场合,我们希望那些包含在循环语句内部的代码至少执行一次,这时,do循是我们的最佳选择。下面是do循环的语法

do{
statements;
while(condition)
}
//和While的区别是:对循环控制条件的求值发生在每次循环结束后。
//因此,即使循环控制条件的首次求值结果是false,包含在花括号里的语句也至少会被执行一次。
  • for循环

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

var beatles=Array("John","Paul","George","Ringo");
for(var count=0;count<beatles.length;count++){
alert(beatles[count]);
}

函数

每个函数实际上是一个短小的脚本,函数的真正价值体现在,我们还可以把它当做一种数据类型来使用,这意味着可以把一个函数的调用结果赋给一个变量。

  • 变量的作用域

可以用var关键字明确的为函数变量设定作用域。
如果在某个函数中使用了var,那个变量就将被视为一个局部变量(local variable);它只存在于上下文之中;反之,如果没有使用var,那个变量就将被视为一个全局变量(global variable),如果脚本里已经存在一个与之同名的全局变量,这个函数就会改变那个全局变量的值。例如:

function square(num){
total=num*num;
return total;
}
var total=50;
var number=square(20);
alert(total);
//以上代码将不可避免地导致全局变量total的值发生变化,total会等于400
//把函数写成如下才是正确的
function square(num){
var total=num*num;
return total;
}

对象

与数组相似,对象也是使用一个名字表示一个值。用对象来代替传统数组的做法意味着可以通过元素的名字而不是下标数字来引用它们,这大大提高了文本的可读性。

  • 创建对象
var lennon= Object();
lennon.name="john";
lennon.year=1940;
lennon.living=false;
//或用花括号语法创建对象
var lennon={name:"John",year:1940,living:false};
  • 代替数组
//下面创建一个新的beatles数组,并用用刚才创建的lennon对象来填充它的第一个元素
var beatles=Array();
beatles[0]=lennon;
//现在使用beatles[0].name就可以得到值"John"
//下面进一步改进
var beatles={};
beatles.vocalist = lennon;
//现在,beatles.vocalist.name的值是"John",这脚本是不是比数组好读不知道到哪里去了
  • 对象的属性和方法

属性是隶属于某个特定对象的变量,方法是只有某个特定对象才能调用的函数,对象就是由一些属性和方法组合在一起而构成的一个数据实体。
用法示例:

//如果用mood和age来存放“心情”和“年龄”之类的值,可以假设它们是某个对象的值,
//设那个对象的名字为Person,则我们可以如下使用它们
Person.mood
Person.age
//假设Person对象还关联一些walk()和sleep()之类的函数,这些函数就是这个对象的方法。
Person.walk
Person.sleep
//把这些属性和方法都集合在一起,就得到了一个Person对象

为对象创建一个新实例需要用到new关键字,

var jeremy= new Person;
//这时我们可以利用Person的特性来检索jeremy的信息了
jeremy.age
jeremy.mood
  • 内建对象

JavaScript提供了一系列预先定义好的对象,这些可以拿来用的对象就叫内建对象(native object),数组其实就是一个内建对象,当我们需要了解某个数组有多少个元素时,就是利用Array对象的length属性来获得的,其他还有Math对象和Date对象

  • 宿主对象

由浏览器提供的预定义对象被称为宿主对象(host object),宿主对象包括From,Image和Element等。我们可以通过这些对象获得关于网页上的表单,图像和各种表单元素等信息。
这部书并没有收录这几个宿主对象的例子,另一种宿主对象也能用来获得网页上任一元素的信息,它就是document对象。

下一篇我会整理有关DOM的基础知识以及分析书中核心案例之一图片库的代码