JavaScript学习之道

JavaScript语法

注释

JavaScript里可以用“//”、“/*”和“*/”、“”来结束这种注释语句，但JavaScript不要求这样做，它会把“->”视为注释内容的一部分。

值（数据类型）

JavaScript里有6种基本类型的值：number、string、boolean、object、function和undefined。这些数据类型都可以赋值给变量。

标准的JavaScript数字描述是64位的浮点型值。11个bit来存储数字的小数，53个bit存放整数，符号位的一个bit可以免费获取。

string用于表示文本，书写方式是用引号将内容括起来。单引号和双引号均可以用来标记string。string的内同只能放在一行里，即回车键产生的新行不能放在引号里。

typeof运算符求给定值的类型。

比较字符串是基于Unicode标准，从左往右逐个比较每个字符所对应的数字代码。其中大写字母始终小于小写字母。

变量

var用于创建一个新的变量，var之后是变量的名称。字符“$”和“_”也可作为字母用于变量名中，但变量名不能以数字开头。声明变量时不赋值的话该变量的默认值为undefined，一个函数没有特别指定返回值时也返回undefined值。而null的含义是该值已经被定义，但是没有任何值。

环境

在给定时间存在的变量和变量值的集合叫做环境。

变量alert拥有一个函数，用于弹出带有消息的小对话框。

alert("hello world");

confirm函数弹出一个让用户选择是Y/否N的窗口。用户单击“是”则该函数返回true，单击“否”则返回false。

confirm("are you sure?");

prompt函数弹出一个让用户输入文本并可以选择确定/cancel的窗口。该函数一般用于询问一个开放式问题，包括两个参数，第一个参数就是该问题；第二个参数是提示用户需要输入的内容。

prompt("what's your account?", "enter your account");

Number函数将用户输入的值转化为数字，类似的函数还有String和Boolean。

var theNumber = Number(prompt("pick a number",""));
alert("Your number is the square root of " + (theNumber*theNumber));

控制流

JavaScript中的if、while、do···while···、for、switch等同C/C++类似。

===和!==用于判断是否精确相等或不等。false==0、""==0、"5"==5这些表达式的值均为true，所以应该使用===。

函数

JavaScript不会限制传入函数的参数数目。如果传入的参数过多，多余的参数则被忽略掉；如果传入的参数过少，缺失的参数则默认为undefined。所以这样传入错误的参数数目是不会得到提醒的。

纯函数是指：当调用函数时传入同样的参数总是返回同样的值，并且没有副作用（例如alert弹出一个对话框就是副作用）。

对象

对象是由一些彼此相关的属性和方法集合在一起而构成的一个数据实体。对象有用户定义对象（user-defined object）、内建对象(native object)和宿主对象（host object）。内建对象是由Javascript语言本身预先定义好的对象。宿主对象是由Web浏览器提供的预定义对象。

访问属性的两种方式：使用中括号或者使用点标记法。例如：

var text = "javascript";
text["length"];
text.length;

从值null和undefined中读取属性会产生错误。

读取一个不存在的属性会得到一个undefined值，delete用于删除属性。如果用操作符=设置一个不存在的属性，将会给对象添加一个新属性。

var dog = {color:"gray", name:"Luis", age:3};
dog.age;
delete dag.age;
dog.age = 2;

中括号内的部分可以是任意表达式。中括号会将表达式转化为字符串来判断是否存在该属性名称。因此也可以把变量名称当成属性名称。

var propertyName = "length";
var text = "javascript";
text[propertyName];

操作符in可以用来判断一个对象是否有某个属性或名称，它产生的是布尔值。

var box = {content:"something"};
"content" in box;

var set = {"Spot": true};
set["White Fang"] = true;
delete set["Spot"];
"Asoka" in set;

数组

在JavaScript中，数组要用关键字Array来声明，在声明的同时程序员还可以对这个数组的长度做出规定。

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

像上面这样填充数组未免有些麻烦，可以在声明数组的同时对它进行填充。

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

也可以只是用一对方括号创建数组：

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

不过在声明或填充数组时写出Array关键字是一个良好的编程习惯，这可以提高JavaScript的可读性，让我们一眼就可以看出哪些变量时数组。在JavaScript中数组的每个元素不一定是数据类型一样的值。上面beatles数组是数值数组的一个典型例子：每个元素的下标是一个数字，没增加一个元素，这个数字就依次增加1。但在为新元素给出下标时，不必局限于整数数字。数组下标可以是字符串，这称为关联数组。从某种意义上来讲，完全可以把所有的数组都看作是关联数组。

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

现在，beatles["vacalist"]["name"]的值是“John”，beatles["vacalist"]["year"]的值是1940，beatles["vacalist"]["living"]的值是false。

DOM

DOM是“Document Object Model”（文档对象模型）的首字母缩写。

getElementById()方法

document.getElementById("something")

这个方法将返回一个 对象，这个对象与那个有着给定id属性值的元素节点相对应。

getElementByTagName()方法

document.getElementByTagName("li")

这个方法将返回一个 对象数组，每个对象分别对应着文档里有着给定标签的一个元素。

getAttribute()方法

object.getAttribute(attribute)

这个方法返回元素中属性的值（以String的形式）。该方法不能通过document对象调用，只能通过一个元素节点对象调用它。

setAttribute()方法

object.setAttribute(attribute，value)

这个方法允许我们设定属性节点的值。通过setAttribute()方法对文档做出的修改，将使得文档在浏览器窗口里的显示效果和行为动作发生相应的变化，但我们在通过浏览器的”查看网页源代码“选项去查看文档的源代码时看到的仍将是原来的属性值，也就是说setAttribute()方法做出的修改不会反映在文档本身的源代码里。这种”表里不一“的现象源自 DOM的工作模式：先加载文档的静态内容，再以动态方式对它们进行刷新，动态刷新不影响文档的静态内容。这正是DOM的真正威力和诱人之处：对页面内容的刷新不需要最终用户在他们的浏览器里执行页面刷新操作就可以实现。