Day_05 JavaScript

1. JavaScript介绍

Java 服务器端的编程语言，JavaScript运行在客户端(浏览器)的编程语言

JavaScript是一门脚本语言、是一门解释性语言、是一门动态类型的语言、是一门基于

对象的语言。（不是面向对象）、是一门弱性语言

2. 写法

CSS代码写法分为行内样式、嵌入样式（内部）、外部样式、控制台书写。那么，js的代码可以分四个地方写：

1.在html的文件中,script的标签中写js代码

2.js代码可以在html的标签中写

3.在js文件中可以写js代码,但是需要在html页面中引入script的标签中的src="js的路径"

4.还可以在控制台直接书写js代码

3. JavaScript变量

3.1 var声明变量

var age, name, sex;
age = 10;
name = 'zs';

3.2 变量的命名规则和规范

规则 - 必须遵守的，不遵守会报错

1、由字母、数字、下划线、$符号组成，不能以数字开头

2、不能是关键字和保留字，例如：for、while。

3、区分大小写

规范 - 建议遵守的，不遵守不会报错

1、变量名必须有意义

2、遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。

3.3 字面量

在源代码中一个固定值的表示法，也叫字面量。

数值字面量：8, 9, 10

字符串字面量：'程序员', "大前端"

布尔字面量：true，false

4. JavaScript数据类型

(1)、基本数据类型

Number、String、Boolean、Undefined、Null

1、Number类型

数值字面量：数值的固定值的表示法，例如110，1024，60.5

2、String类型

字符串可以使用单引号,也可以使用双引号，例如：'abc'、"abc"。

字符串字面量：‘I am Happy’、”Hello World”

3、Boolean类型

Boolean字面量： true和false，区分大小写

计算机内部存储：true为1，false为0

4、Undefined和Null

undefined表示一个声明了没有赋值的变量，变量只声明的时候值默认是undefined

null表示一个空，变量的值如果想为null，必须手动设置

var s = null;

(2)、复杂数据类型

Object

(3)、数据类型转换

获取变量的类型

typeof关键字

var age = 18;
console.log(typeof age); // 'number'

toString()转换成字符串类型

var num = 5;
console.log(num.toString());

String()

String()函数存在的意义：有些值没有toString()，这个时候可以使用String()。比如：undefined和null

拼接字符串方式

num + ""，当 + 两边一个操作符是字符串类型，一个操作符是其它类型的时候，会先把其它类型转换成字符串再进行字符串拼接，返回字符串

转换成数值类型

Number()可以把任意值转换成数值，如果要转换的字符串中有一个不是数值的字符，返回NaN

 Number()转化规则

     a. 如果字符串中只包含数字时，将其转换为十进制数值，忽略前导0

     b. 如果字符串中包含有效浮点格式，如“1.1”，将其转换为对应的浮点数字，忽略前导0

     c. 如果字符串中包含有效的十六进制格式，如“0xf”，将其转换为相同大小的十进制数值

     d. 如果字符串为空，或者是空内容，将其转换为0

     e. 如果字符串中包含除上述格式之外的字符，则将其转换为NaN

parseInt()

// 返回12，如果第一个字符是数字会解析知道遇到第一个小数点结束
var num1 = parseInt("12.3abc");   
// 返回NaN，如果第一个字符不是数字或者符号就返回NaN
var num2 = parseInt("abc123"); 

转换成布尔类型

Boolean()

0 ' ' null undefined NaN会转换成false，其它都会转换成true。

5. JavaScript运算

优先级

一元运算符  ++   --   !

算数运算符  先*  /  %   后 +   -

关系运算符  >   >=   <   <=

相等运算符   ==   !=    ===    !==

逻辑运算符 先&&   后||

6. 流程控制

6.1.流程控制介绍

程序的三种基本结构

顺序结构：从上到下执行的代码就是顺序结构(程序默认就是由上到下顺序执行的)

分支结构：根据不同的情况，执行对应代码

循环结构：重复做一件事情

6.2.分支结构

6.2.1 if语句

if (/* 条件表达式 */) {
 // 执行语句
}
第二种
if (/* 条件表达式 */){
 // 成立执行语句
} else {
 // 否则执行语句
}	
第三种
if (/* 条件1 */){
 // 成立执行语句
} else if (/* 条件2 */){
 // 成立执行语句
} else if (/* 条件3 */){
 // 成立执行语句
} else {
 // 最后默认执行语句
}

6.2.2 三元运算符

表达式1 ? 表达式2 : 表达式3
是对if……else语句的一种简化写法

6.2.3 switch语句

switch (expression) {
 case 常量1:
   语句;
   break;
 case 常量2:
   语句;
   break;
 case 常量3:
   语句;
   break;
 …
 case 常量n:
   语句;
   break;
 default:
   语句;
   break;
}

6.2.4 分支结构总结

if语句和switch语句的区别：

if语句：

表达式的结果为boolean类型。常用于区间判断

switch语句：

switch case 使用严格比较（===），值必须与要匹配的类型相同，只有操作数属于同一类型时，严格比较才能为 true。在以下这个例子中，x 将不匹配

7.循环结构

7.1 while语句

// 当循环条件为true时，执行循环体，
// 当循环条件为false时，结束循环。
while (循环条件) {
 //循环体	
}

7.2 do...while语句

do {
 // 循环体;
} while (循环条件);

7.3 for语句

/ for循环的表达式之间用的是;号分隔的，千万不要写成,
for (初始化表达式1; 判断表达式2; 自增表达式3) {
 // 循环体4
}

7.4 continue和break

break:立即跳出整个循环，即循环结束，开始执行循环后面的内容（直接跳到大括号）

continue:立即跳出当前循环，继续下一次循环（跳到i++的地方）

7.5 循环语句区别

1、循环结构的表达式不同

do-while循环结构表达式为：do{循环体;}。

for循环的结构表达式为：for（单次表达式;条件表达式;末尾循环体）{中间循环体；}。

while循环的结构表达式为：while（表达式）{循环体}

2、执行时判断方式不同

do-while循环将先运行一次，因为经过第一次do循环后，当检查条件表达式的值时，其值为 不成立时而会退出循环。保证了至少执行do{ }内的语句一次。

for循环执行的中间循环体可以为一个语句，也可以为多个语句，当中间循环体只有一个语句时，其大括号{}可以省略，执行完中间循环体后接着执行末尾循环体。

while循环执行时当满足条件时进入循环，进入循环后，当条件不满足时，执行完循环体内全部语句后再跳出（而不是立即跳出循环）。

3、执行次数不同

do-while循环是先执行后判断，执行次数至少为一次。

for循环是先判断后执行，可以不执行中间循环体。

while循环先判断后执行，可以不执行中间循环体。

8. 调试

(1)、alert()

(2)、console.log()

(3)、debugger 关键字

debugger 关键字用于停止执行 JavaScript，并调用调试函数。这个关键字与在调试工具中设置断点的效果是一样的。如果没有调试可用，debugger 语句将无法工作。开启 debugger ，代码在第三行前停止执行。

var x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;
//开启调试工具，在代码执行到第三行前会停止执行。