JavaScript第一天笔记

本章要点：
1.JavaScript简介以及JavaScript中的变量；
2.JavaScript中的数据类型及数据类型转换；
3.JavaScript中的运算符与表达式；
4.JavaScript中的流程语句（条件、循环）。
一、JavaScript的介绍

1. JavaScript是什么？
   JavaScript 是一种基于对象和事件驱动并具有相对安全性 的客户端脚本语言。同时也是一种广泛用于客户端 Web 开发的 脚本语言，常用来给 HTML 网页添加动态功能，比如响应用户的 各种操作。
   JavaScript的编辑工具：
   常见的JavaScript编辑工具有很多，例如记事本、 Hbuilder、Dreamweaver和Visual Studio，还有Sublime Text、 Notepad++等。
   万事万物都是对象
   对象中的三大要素/三大特征:
   属性: 用来描述一个对象的外观特征表现.
   方法(主动行为): 对象自己本身所具备的能力.
   事件(被动行为): 对象自己接受到一种指令需要完成的一 种行为.
   2. 解析执行与编译执行
   编译执行：把代码编译成 CPU 认识的语言(文件)，然后整 体的执行。
   解析执行：一行一行解析，解析一行执行一行。
   弱类型脚本语言
   脚本语言是：弥补编译语言的不足而存在的，作为补充语 言，不用编译。
   弱类型语言：简单理解定义一个变量，可以有多种数据类 型。（var temp）
   3. 前端三大模块
   HTML：页面结构
   CSS：页面表现：元素大小、颜色、位置、隐藏或显示、部 分动画效果
   JavaScript：页面行为：部分动画效果、页面与用户的交 互、页面功能
   二、JavaScript入门基础
2. JavaScript 嵌入页面的方式
   行间事件（主要用于事件）
   
   
   页面 script 标签嵌入
   
   
   外部引入
   
   一般推荐使用第二种方法
   2. JavaScript的变量
   JavaScript 是一种弱类型语言，javascript 的变量类型由它的值来决 定。定义变量需要用关键字 ‘var’
   
   
   变量的命名规则
   驼峰命名规则：getElementById/matherAndFather/aaaOrBbbAndCcc 遵从 规则：
   变量命名必须以字母或是下标符号”_”或者”$”为开头。变量名长度不能超过255个字符。变量名中不允许使用空格，首个字不能为数字。不用使用脚本语言中保留的关键字及保留符号作为变量名。变量名区分大小写。(javascript是区分大小写的语言)汉语可以作为变量名。但是不建议使用！！！（low）变量、函数、属性、函数参数命名规范：区分大小写第一个字符必须是字母、下划线{（}_{）}或者美元符号（$）
   其他字符可以是字母、下划线、美元符或数字
   3. JavaScript数据类型及转换
   (1)数据类型
   JavaScript数据类型有2大分类：一是“基本数据类型”，二是“特 殊数据类型”。 其中，基本数据类型包括以下3种：

1. 数字型（Number型）
2. 字符串型（String型）
3. 布尔型（Boolean型）
   a. 数字型（Number型）
   数字（Number）是最基本的数据类型。在JavaScript中，和其他程 序设计语言（如C和Java）的不同之处在于，它并不区别整型数值（int） 和浮点型数据（float）。在JavaScript中，所有的数字都是由浮点型表示 的。
   1、整型数据
   整型数据指的是数据形式是十进制整数来的，整数可以为正数、0或 负数。例如，“0、4、-5、1000”这些都是“整型数据”。
   2、浮点型数据 整型数据指的是整数，没有小数的。浮点型数据是指带有小数的数据。
   浮点数还可以使用指数法表示，即实数后跟随字母e或E，后面加上 正负号，其后再加一个整型指数。这种计数法表示的数值等于前面的实数 乘以10的指数次幂。
   
   b. 字符串型 字符串是由Unicode字符、数字、标点符号等组成的序列，它是 JavaScript用来表示文本的数据类型。程序中的字符串型数据是包含在单 引号或双引号中的，由单引号定界的字符串中可以含有双引号，由双引号 定界的字符串中也可以含有单引号。
   
   查看变量的数据类型使用type of
   c. 布尔型（Boolean型）
   数值型和浮点型的数据值都有无穷多个，但是布尔型数据类型只有2 个：真（true）和假（false）。0可以看作false，1可以看做true。
   布尔值通常在JavaScript程序中用来比较所得的结果，例如： n= =1
   这行代码测试了变量n的值是否和数值1相等。如果相等，比较的结 果就是布尔值true，否则结果就是false。
   布尔值通常用于JavaScript的控制结构（我们在后续章节会讲解 到）。例如，JavaScript的“if……else语句”就是布尔值为true时执行 一个动作，而在布尔值为false时执行另一个动作。例如：
   if(n==1){ n=n+1; }
   else{ n=n-1; }
   这段代码检测了n是否等于1。如果n等于1，则让n增加1；如果n不等 于1，则让n减少1。
   
   特殊数据类型有2种：
   （1）空值（null型）
   （2）未定义值（undefined型）
   a. 空值（null型）
   整型、浮点型这些数据在定义的时候，系统都会分配一定的内存空间。
   JavaScript中的关键字null是一个特殊的值，它表示空值，系统没 有给它分配内存空间
   如果试图引用一个没有定义的变量，则返回一个null值。这里要非 常强调一点：null不等同于空的字符串（""）或0，因为空的字符串（""） 或0是存在的，但是null表示其不存在的。
   b. 未定义值（undefined型）
   如果一个变量虽然已经用var关键字声明了，但是并没有对这个变量 进行赋值，而无法知道这个变量的数据类型，因此这个变量的数据类型是 undefined，表示这是一个未定义数据类型的变量。
   此外，JavaScript中有一种特殊类型的数字常量NaN，即“非数 字”。当在程序中由于某种原因发生计算错误后，将产生一个没有意义的 数字，此时JavaScript返回的数字值就是NaN。
   null与undefined的区别是，null表示一个变量被赋予了一个空值， 而undefined则表示该变量尚未被赋值。
   举例：
   
   转义字符
   Javascript中常用的转义字符
   
   (2)数据类型转换
   所谓的类型转换，就是将一种数据类型转换为另外一种数据类型， 例如上一节课说到的，如果一个数字与一个字符串相加，JavaScript会自 动将数字转换为字符串，然后再与另外一个字符串相加（隐式类型转 换）。

我们都知道，JavaScript是一种弱类型的语言，这一点区别于传统 编程语言（如C和Java）。虽然在运算时，JavaScript会自动进行类型转换，但是为了避免自动转换或不转换产生的不良后果，有时候我们需要进 行显式的类型转换。

隐式类型转换指的是JavaScript自动进行的类型转换，显式类型转 换指的是我们手动用代码强制进行的类型转换。
a. 字符串型转换为数值型
在JavaScript中，将字符串型数据转换为数值型数据有parseInt() 和parseFloat()这2种方法。其中，parseInt()可以将字符串转换为整型数 据；parseFloat()可以将字符串转换为浮点型数据
语法
parseInt() //将字符串型转换为整型
parseFloat() //将字符串型转换为浮点型：
说明：
将字符串型转换为整型，前提是字符串一定要是数值字符串。那什 么叫数值字符串呢？“123”、“3.1415”这些只有数字的字符串就是数值 字符串，而“hao123”、“360cn”等就不是数值字符串。
举例：

b. 数值型转换为字符串型
在JavaScript中，将数值型数据（整型或浮点型）转换为字符串， 都是使用toString()方法。 举例：

4. JavaScript中的运算符和表达式
JavaScript的运算符按运算符类型可以分为以下5种：
(1) 算术运算符；
(2) 比较运算符；
(3) 赋值运算符；
(4) 逻辑运算符；
(5) 条件运算符；
a. 算术运算符
算术运算符用于在程序中进行加、减、乘、除等运算。 JavaScript中常用的算术运算符如下：
javascript中常用的算数运算符

1、自增运算符
“++”是自增运算符，它指的是在原来值的基础上加1，i++ 表示“i=i+1”。该运算符有2种情况：
（1）i++ “i++”指的是在使用i之后，使i的值加1。
举例：

上面执行的结果：j的值为1，i的值为2。 其实上面代码等价于下面这一段代码：

（2）++i
“++i”指的是在使用i之前，先使i的值加1。
举例：

上面的执行结果：j的值为2，i的值为2。 其实上面代码等价于下面这一段代码：

2、自减运算符
“–”是自减运算符，它指的是在原来值的基础上减1，i-- 表示“i=i-1”。该运算符同样有2种情况：
（1）i–
（2）–i
举例：

举例：JavaScript算术运算符

b. 比较运算符
比较运算符的基本操作过程是：首先对操作数进行比较，该操作数 可以是数字也可以是字符串，然后返回一个布尔值true或false。
javascript中常用的算数运算符

举例：


c. 赋值运算符
JavaScript中的赋值运算可以分为2种：简单赋值运算和复合赋值运算。
简单赋值运算是将赋值运算符（=）右边表达式的值保存到左边的变 量中。
复合赋值运算结合了其他操作（如算术运算操作）和赋值操作。 举例：

javascript赋值运算符


d. 逻辑运算符
逻辑运算符通常用于执行布尔运算，它们常常和比较运算符一起使 用来表示复杂比较运算，这些运算涉及的变量通常不止一个，而且常用于 if、while和for语句中。

举例：

总结：
（1）true的!为false，false的!为true；
（2）a&&b，a、b全为true时，表达式为true，否则表达式为false；
（3）a||b：a、b全为false时，表达式为false，否则表达式为true；
e. 条件运算符
件运算符 条件运算符是JavaScript支持的一种特殊的运算符。
语法：
条件 ? 表达式1 : 表达式2;
说明：
如果“条件”为true，则表达式的值使用“表达式1”的值；如果 “条件”为false，则表达式的值使用“表达式2”的值。
例如：

分析：
如果x的值大于y的值，则上面整个表达式最终的值为“12（由4*3得到）”；如果x的值小于或等于y的值，则上面整个表达式最终的值为 “5”。

Typeof运算符简介
在JavaScript中，typeof运算符用于返回它的操作数当前所容纳的 数据的类型，这对于判断一个变量是否已被定义特别有用

5. JavaScript流程语句
JavaScript对程序流程的控制跟其他编程语言是一样的，主要有3种：
（1）顺序结构
（2）选择结构
（3）循环结构
a. 顺序结构顺序结构是JavaScript中最基本的结构，说白了就是按照从上到 下、从左到右的顺序执行。
b. 选择结构选择结构是按照给定的逻辑条件来决定执行的顺序，有单向选择、 双向选择和多向选择之分，但是程序在执行过程中都只是执行其中的一条 分支。



上图中的左边是“单向选择结构”，右边是“双向选择结构”。
选择结构的方法
（1）if语句;
（2）if……else语句;
（3）if……else if……语句;
（4）if语句的嵌套;
（5）switch语句;
If语句
if语句是使用最为普遍的条件选择语句，每一种编程语言的if语句 都差不多。if语句类型共有3种：
（1）if语句（单向选择）；

说明：
其中“条件语句”可以是任何一种逻辑表达式，如果“条件语句” 的返回结果为true，则程序先执行大括号“{}”中的“执行语句”，然后 接着执行if后面的其他语句。
如果“条件语句”的返回结果为false，则程序跳过“{}”的“执行 语句”，直接执行程序后面的其他语句。

（2）if……else语句（双向选择）；
语法：

（3）if……else if语句（多向选择）；


分析：“var d = new Date();”是创建一个Date对象，“var time = d.getHours();”是获取Date对象中的小时数。这些内容我们会在 JavaScript日期对象Date这一章详细讲解。
（4）if嵌套
举例

（5）switch语句简介
在JavaScript中，switch语句也是选择结构中很常用的语句。 switch语句用于将一个表达式同多个值进行比较，并根据比较结果选择执 行语句。
语法：


说明：
case语句相当于标记一个位置，程序会根据switch条件表达式的结 果，直接跳转到第一个匹配的位置，然后开始顺序执行后面的所有程序代 码，包括后面的其他case语句下的代码，直到碰到break语句或函数返回语 句为止。
default语句是可选的，当其他所有的case语句定义的值都不满足 时，就执行default后面的语句块。
举例：

6. 循环结构
循环结构即根据代码的逻辑条件来判断是否重复执行某一段程序。若逻辑 条件为true，则进入循环重复执行；若逻辑条件为false，则退出循环。

循环结构语句主要包括3种：
（1）while语句；
（2）do……while语句； 、
（3）for语句；
a. while语句
while语句是条件判断语句，也是循环语句。
语法：

说明：
当“条件表达式语句”的返回值为true时，就会执行大括号“{}” 中的语句块，当执行完大括号“{}”的语句块后，再次检测条件表达式的 返回值，如果返回值还为true，则重复执行大括号“{}”中的语句块，直 到返回值为false时，才结束整个循环过程，接着往下执行while代码段后 面的程序代码。

分析：
大家拿上面一个例子和while语句的例子对比一下就知道，while语句和 do…while语句是可以转换的。
在此总结一下两者之间的区别：
（1）do…while语句和while语句是可以相互转换的；
（2）do…while语句将先执行一遍循环体中的语句，然后才判断条件表达 式的真假。这是它与while语句的本质区别；
c. for循环语句
for语句通常由2部分组成：一是“条件控制部分”，二是“循环体”。
语法：

说明：
在使用for循环之前要先设定一个计数器变量，可以在for循环之前定义， 也可以在使用时直接进行定义。
上面的语法中，“初始化表达式”表示计数器变量的初始值；“循环条件 表达式”是一个计数器变量的表达式，决定了计数器的最大值； 要想理解上面的语法，直接看个例子。

为什么会出现死循环？
在使用for语句时，需要保证循环可以正常结束，也就是保证循环条件的结 果存在不为true的情况，否则循环体会无限地执行下去，从而出现死循环现象。 列如：

上面这段代码就没有结束条件，因此会无限地执行下去。
d. 跳转语句
JavaScript支持的跳转语句主要有2种：
（1）break语句；
（2）continue语句；
break语句与continue语句的主要区别是：break是彻底结束循环，而 continue是结束本次循环。在这一点跟其他编程语言（如C和Java）相同的。

1. break语句

break语句用于退出包含在最内层的循环或者退出一个switch语句。break 语句通常用于while、do…while、switch或for语句中。
说明： break语句通常用于while、do…while、switch或for语句中。
举例：

2) continue语句
continue语句跟break语句类似。不同之处在于，continue语句用于退出本 次循环，并开始下一次循环。而break语句是退出所有循环！
说明：
跟break语句一样，continue语句也只能用在white、do…while、for和 switch等循环语句中。
举例：输出“i love javascript”字符串中小于字母o的字符

分析：
在JavaScript中 可 使 charAt 从某个 符串取得 体 符。 对于charAt()方法，我们在字符串对象“charAt()”这一节会详细讲解到。
三、获取元素方法
可以使用内置对象 document 上的 getElementById 方法来获取页面上设 置了 id 属性的元素，获取到的是一个 html 对象，然后将它赋值给一个变量，比如：

上面的语句，如果把 javascript 写在元素的上面，就会出错，因为页面 上从上往下加载执行的，javascript 去页面上获取元素 div1 的时候，元素 div1 还没有加载，解决方法有两种：
第一种方法：将 javascript 放到页面最下边
第二种方法：将 javascript 语句放到 window.onload 触发的函数里面, 获取元素的语句会在页面加载完后才执行

获取的页面元素，就可以对页面元素的属性进行操作，属性的操作包括属性的读和 写。
操作属性的方法
1、“.” 操作
2、“[ ]”操作
属性的写法
1、html 的属性和 js 里面属性写法一样
2、“class” 属性写成 “className”
3、“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改 成”style.fontSize”
通过“.”操作属性： 通过“[ ]”操作属性：
innerHTML innerHTML 可以读取或者写入标签包裹的内