js DOM编程艺术 笔记

变量(variable)
mood="happy";把值存入变量的操作称为赋值，我把变量mood赋值为happy。把变量age赋值为33。
age=33;
一个变量被赋值后，我们就说该变量包含这个值，变量mood包含值happy。

js可以不先声明，但提前声明变量是一种良好的编程习惯

var mood;
var age;

你甚至可以一石二鸟，把声明变量和对该变量赋值一次完成
var mood="happy";
var age=33;

甚至可以这样
var mood="happy",age=33;

在js语句里，变量和其他语法元素的名字都是区分大小写的

js语法里不允许变量名中包含空格或标点符号，美元符号$除外

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

var my_mood="happy";

另一种方式是使用驼峰格式(camel case)

每个新单词改用大写字母开头
var myMood="happy"; 通常驼峰格式是函数名，方法名和对象属性名命名的首选格式，
在上面这条语句中，单词happy是js语言中的一个字面量（literal），也就是可以直接在js代码中写出来的数据。

 

数据类型

js是弱类型语言，可以在任何阶段改变变变量的数据类型

1字符串
var mood="happy";
var mood='happy'; 可以随意选择引号，但最好根据字符串所包含的字符来选择，如果字符串包含双引号，就把字符串放在单引号里，如果字符串包含单引号，就把整个字符串放在双引号里。

var mood="don't ask";
里面有单引号需要用到转义（escaping） 在js里用反斜线对字符进行转义
var mood="don\'t ask";
类似的双引号包含一个本身就包含的双引号字符串 就必须用反斜线对字符串中的双引号进行转义
var height="about 5'10\"tall";

2数值
如果想给一个变量附一个值，不用限定它必须是一个整数,js允许使用小数点的数值，并且允许任意位的小数，这样的数称为浮点数（floating-point number）

也可使用负数，在数值前面加一个减号（-）表示它是一个负数
var a=-5;

 

也可是负浮点数
var a=-20.333333;

 

3布尔值 布尔类型(boolean)类型。

布尔值只有两个可选值 true或者false。

 

数组就是一个变量表示一组值的集合。

var beatles=Array(4); 数组用关键字Array声明，声明数组的同时还可以指定初始元素的个数，也就是这个数组的长度(length)
beatles是变量名，数组可以用关键字Array声明，
每个值都是数组的元素（element）。

beatles[0]="John"; 添加新元素 ，向数组中添加元素的操作称为填充(populating)。 填充元素时不仅要给一个值还要给出新元素在数组中存放位置，这个位置就是这个元素的下标(index)一个元素有一个下标，下标从0开始计数。
beatles[1]="Paul";
beatles[2]="George";
bealtes[3]="Ringo";

var beatles=array(); 如果不知道数组有多少个元素，可以在声明数组时不给出元素个数

如果嫌这样麻烦还可以这样，
var beatles=Array("John","Paul","George","Ringo"); 声明数组的时候同时对他进行填充，逗号把元素隔开，这个方式会为每个元素自动分配一个下标



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

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


var year=[1940，1941，1942，1943]; 不必非得是字符串，可以把一些布尔值存入一个数组，可以把一组数值存入一个数组。

甚至可以把3种数据类型混在一起存入一个数组
var lennon=["John",1940,false];字符串，数值，布尔值




数组元素还可以是变量
var name="John";
beatles[0]=name; 这样把beatles的第一个元素赋值为"John"。




var name=["Ringo","John","George","Paul"] 数组元素的值还可以是另外一个数组元素，这样把beatles数组的第一个元素的值改为name数组里的第三个元素。
beatles[1]=name[3];

var lennon=["John","1940",false]; 事实上数组还可包含其他数组，数组中的任何一个元素都可以把一个数组作为它的值。
var beatles=[ ];
beatles[0]=lennon; 现在beatles的第一个元素的值是另外一个数组lennon。要想获得lennon数组里的某个元素的值需要两个方括号，

bealtes[0][0]的值是John,bealtes[0][1]的值是1940,bealtes[0][2]的值是false.

var lennon=Array(); 可以在填充数组时为每个新元素明确地给出下标来改变默认的行为 在为新元素给出下标时，不必局限于使用整数数字，你可以使用字符串
但是不推荐这样的写法，你创建的是Array对象的属性，因为这个写法改变了元素的类型。你给lennon添加了三个属性，你不应该修改Array对象的属性，
而应该使用通用对象（object）（关联数组
lennon["name"]="John";
lennon["year"]=1940;
lennon["living"]=false;



对象

对象和数组类似，都是使用一个名字表示一组值，对象的每个值都是对象的一个属性，
var lennon=object();
lennon.name="John"; John就是lennon.name的值。name是属性名
lennon.year=1940;
lennon.living=false;
与使用Array类似，创建对象使用object关键字，它不使用方括号和下标来获取元素，而是和任何js对象一样，使用点号来获取属性，



创建对象还有更简洁的写法

{属性名：值，属性名：值}


var lennon={name:"John",year:1940,living:false};


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


var lennon={name:"John",year:1940,living:false};
var beatles=Array(); bealtes是数组，
beatles[0]=lennon; 用lennon来填充它的第一个元素，属性值从右赋值给beatles[0],
beatles[0].name 得到john


var lennon={name:"John",year:1940,living:false};
var beatles={}; 声明为对象
bealtes.vocalist=lennon; 声明为对象后就可以不用数字而是用更容易记忆的字符串值为下标
beatles.vocalist.name 获取lennon的数组里的元素， beatles.vocalist.name的值是John。

var lennon=["John"1940,false]
bealtes=[ ]; bealtes为数组
bealtes[0]=lennon; bealtes第一个元素的值是另外一个数组，想获得那个组里的值需要更多的括号
bealtes[0][0] 的值是John

操作（operation），js计算和处理数据

算术操作符（arithmetic operation）

赋值是=号
加法操作符是+号
减法操作符是-号
除法操作符是/号
乘法操作符是星号*



为了避免产生歧义 可以用括号把不同的操作符分隔开来
1+(4*5)
(1+4)*5

 

变量可以包含操作（operator）

var a=(1+4)*6;

还可以对变量进行操作
var temp_fahrenheit=95;
var temp_celsius=(temp_fahrenheit-32)/1.8


如果想给一个数值变量加1， year=year+1;
使用++操作符来达到同样的目的
year++

year--
year=year-1；

加号是比较特殊的操作符，既可以用于数值，也可以用于字符串，把两个字符串合二为一
var a="b"+"c" 这样把多个字符串首尾连在一起的操作叫拼接 （concatentaion）

这种拼接也可以通过变量来完成
var mood="happy";
var message="I am feeling"+mood 拼接

数值和字符串拼接在一起，因为js是弱类型语言，所以这种操作是允许的，此时，数值将被自动转换为字符串

var year=2005;
var message="The year is"+year;



alert("10"+20);字符串

alert(10+10);算术和


快捷操作符是+=，它可以一次完成加法和赋值
var year=2010;
var message="The year is";
message+=year; message=message+year

条件语句（conditional statement） 只有满足了条件才能执行


if语句(condition){
statements;

}
条件必须放在if语句后面的圆括号中标，条件的求值结果永远是一个布尔值，只能是ture或false。
花括号中的语句-不管它们有多少条，只有给定条件的求值结果是ture的情况下才会执行，。




如果if语句中的花括号只包含着一条语句，那就可以不使用花括号，而且这条if语句的全部内容可以写在同一行上，

if(1>2)alert("the world has gone mad!");
不过因为花括号可以提交脚本可读性，所以在if语句中总是使用花括号是个好习惯。





if(1>2){
alert("你好);
}else{ if语句可以有一个else子句，包含在else子句中的语句会在给定条件为假时执行
alert("你好啊);
}


比较操作符

js还提供了几乎只能在条件语句里的操作符，其中包括大于>，小于<,大于或等于>=，小于或等于<=，之类的比较操作符

如果想比较两个值是否相等，可以使用等于比较操作符。这个操作符由两个等号构成（==），单个等号是赋值，



如果在条件语句里的某个条件里使用了单个等于号，那么只要相应的赋值操作取得成功，那个条件的求值结果就将是true，
上面的错误在于变量my_mood赋值给变量my_ood，而不是比较它们是否相等，因为这个赋值操作总会成功，所以这条语句的结果将永远是true。
var my_mood="happy";
var you_mood="sad";
if(my_mood=you_mood){
alert("we both feel the same")
}

if(a=false){ 赋值运算并不是总返回真值 ，a等于false所以不执行alert语句
alert('hello,world'); 这条alert语句就不会执行。
}







js还提供了一个不等于比较的操作符（！=），它由一个感叹号和一个等号构成（！=）,不等于就是ture，因为两个值不一样。
var my_mood="happy"; 所以运行alert语句。
var your_mood="sad";
if(my_mood!=your_mood){
alert("we're feeling different moods.");
}



var a=uu;
var b="";
if(a==b){ 结果为true，因为相等操作符认为空字符串与false的含义相同。空字符串就等于false。
alert("a equals b");
}



要进行严格的比较，就要使用===全等操作符，不仅比较值，而且会比较变量的类型。
var a=false; false是boolean，" "是String字符串类型。所以不运行alert
var b="";
if(a===b){
alert("a dssdf b");
}


当然对于不等操作符！=也是如此。如果相比较严格不相等,就要使用!===。




逻辑操作符(operand)

判断一个数是不是在5-10之间。
var num=6;
if(num>=5 && num<=10 ) 如果是6 就会弹出alert，因为6>5 <10两个值都是true。
{
alert("aaaaaaaaaaaaaaaa");
}
这里使用了 逻辑与 操作符，它由两个&& 子符构成，是一个逻辑操作符

逻辑操作符的操作对象是布尔值。每个逻辑操作数返回一个布尔值true或者是false。

逻辑与 逻辑操作符只有在它的两个true时才会是true。



---------------------------------------------------------------------------------------------——————————————————

var num=11
if(num>10 || num<5){ 操作数中有一个true 所以运行alert
alert("the number is not in the right range");
}


逻辑或 操作符由两个垂直线字符构成（||）,只要有一个是true，逻辑或 的操作就是true。

有两个是true，逻辑或 的操作就是true。

只有当它的两个操作数是false时，逻辑或 的操作才会是false。


——————————————————————————————————————————————

逻辑非 操作符它由一个感叹号 ( ! ) 单独构成。逻辑非 操作符只能作用于单个逻辑操作数，


if(!(1>2)){ 结果把那个逻辑操作数所返回的布尔值取反，如果那个逻辑操作数所返回的布尔值是true，
alert("All is well with ths world"); “逻辑非”操作符将把它取反为false。
}

上面这条语句把逻辑数放在了括号里，因为我想让逻辑非操作符作用于括号里的所有内容。



循环语句


if语句或许是最重要，最有用的条件语句。

if无法完成重复性的操作，

在if语句里，包含在花括号里的代码块只能执行一次。

如果需要多次执行同一个代码块就必须使用循环语句 while。

while 循环与if语句非常相似

while(条件){
语句；
}


它和if的区别是，只要给定的条件为true，花括号里的代码就将反复的执行下去，

下面是一个while循环的例子

var count=1;
while(count<11){
alert(count);
count++; count的值进行加1操作

}

while只要条件为true，就会不停的循环语句，直到控制循环的条件为false。如果条件不是false就会一直循环下去。变成死循环。
这里的关键是在while循环的内部必须发生一些会影响循环控制条件的事情，

比如在例子中，我们在while循环的内部对变量count的值进行了加1操作，

将导致循环控制条件在经过10次循环后值的结果为false ,10次循环 count的值变为11，11不小于11，

如果不增加count值就是一直是1，1永远小于11 ，这while循环将永远执行下去。


do ...while语句


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

do{
语句
}while(条件);

do ..while是先循环语句，再判断条件，即使为false，仍然会弹出一次消息

var count=1;
do{
alert(count);
count++;

}while(count<11);
这个也是循环10次，在循环结束之后，变量的值是11.

 

 

for循环
用for循环来重复执行一些代码也很方便，它类似于while循环，
for循环是while循环的一种变体。

for(初始条件，测试条件，警报条件)

{
语句
}

for循环来重复执行一些代码好处是循环结构更加清晰，与循环有关的所以内容都包含在for语句的圆括号里，

for(var count=1;count<11;count++){
alert(count);
}

与循环有关的内容都包含在for语句的圆括号里，for循环最常见的用途之一是对某个数组里的全体元素

进行遍历处理。这往往需要用到array.length属性。array.length属性告诉我们数组里的元素个数， array.length数组下标
是从0开始。

var bealtes=Array("a","b","c","d") 0，1，2，3
for(var count=0;count<bealtes.length;count++){
alert(bealtes[count]);
}
这个例子弹出，4条 alert消息

函数

如果需要多次使用同一段代码，可以把他们封装成一个函数。

函数(function) 就是一组允许在你的代码里随时调用的语句，

每个函数实际上是一个短小的脚本。

function multiply(num1,num2){
var total=num1*num2;
alert(total);
}

multiply(10,2);

如果把两个数值传递给这个函数,这个函数将对它们进行乘法运算。

在命名变量时，我用下划线来分割各个单词，temp_fahrenheit
在命名函数时，我从第二个单词开始把每个单词的第一个字母写成大写形式（驼峰命名方法）covertToCelsius

变量的作用域
全局变量（global variable）和局部变量(local variable)

全局变量可以在脚本中的任何位置被引用，一旦你在某个脚本里声明了一个全局变量，就可以从这个脚本中的任何位置
包括函数内部引用它，全局变量的作用域是整个脚本。

局部变量，只存在于声明它的那个函数的内部，在那个函数的外部是无法引用它。局部变量的作用域仅限于某个特定的函数。

某个函数使用了var，那个变量就将被视为一个局部变量，它只存在于这个函数的上下文中，反之如果没有使用var，
那个变量就将被视为全局变量，

在定义一个函数时，我们一定要把它内部的变量全都明确地声明为局部变量。如果你总是在函数里使用var关键字来定义变量，就能避免任何形式的二义性隐患。

对象 （object）
是一种非常重要的数据类型，对象是自包含的数据集合，包含在对象里的数据可以通过两种形式访问属性（property）和方法（method);

属性就是属于某个特定对象的变量；

 

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

对象就是由一些属性和方法组合一起的一个数据实体；在js里，属性和方法都使用点语法来访问
wang.yang属性

wang.li()函数

 

person对象名字

person.mood mood是person对象的属性

person.age age是person对象的属性

假如person对象还关联着一些诸如walk()和sleep()之类的函数，这些函数就是这个对象的方法，必须使用如下记号来访问他们

person.malk()
person.sleep()
这些属性和方法全部集合在一起我们就得到了一个person对象。

为了使用person对象来描述一个特定的人，需要创建一个person对象的实例（instance）
实例就是对象的具体个体，例如你和我都是人，都可以用person对象来描述，但你和我是两个不同的个体，很有可能有着不同的属性（比如你和我年龄可能不一样）
因此，你和我对应着两个不同的person对象，--它们虽然都是person对象，但他们是两个不同的实例。
为给定对象创建一个新实例需要使用new关键字，

var jeremy=new person; person对象的属性是jeremy，

上面这条语句将创建出person对象的一个新实例jeremy。我们就可以像下面这样利用person对象的属性来检索关于jeremy的信息了。
jeremy.age

jeremy.mood

内建对象

数组就是其中一种，当我们使用new关键字去初始化一个数组时，其实是在创建一个Array对象的新实例，

var bealtes=new Array();

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

Array对象只是很多js内建对象中的一种，其他像Math对象和Date对象，它们分别提供了许多非常有用的方法供人们处理数值和日期值，
Math对象的round方法可以把十进制数值舍入一个与之最接近的整数，
var num=7.561;
var num=Math.round(num);
alert(num);


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

var current_date=new Date();

Date对象提供getDay()，getHours（），getMonth（）等一系列的方法， getDay是星期几 getHours是小时数 getMonth是月份



宿主对象
js脚本里使用一些已经预定义好的其他对象。这些对象不是由js语言本身而是由它的运行环境提供的。具体到web应用这个环境就
是由浏览器提供的预定义的对象被称为宿主对象（host object）

宿主对象包括Form Image Element 我们可以通过这些对象获得关于网页上表单 图像和各种信息等

转载于:https://www.cnblogs.com/wy936166601/p/9570736.html