JavaScript 基础篇(二)

JavaScript基础

1.显示转换
数据类型转换

如何使用谷歌浏览器，快速的查看数据类型？

字符串的颜色是黑色的，数值类型是蓝色的，布尔类型也是蓝色的，undefined和null是灰色的

转换成字符串类型
可以将其它的数据类型转成字符串。
1.toString() （包装类）

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

2.String()

var a = 123;
a = String(a);

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

拼接字符串方式

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

转换成数值类型

1.Number()

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

注意：
a)如果转换的内容本身就是一个数值类型的字符串，那么将来在转换的时候会返回自己。
b)如果转换的内容本身不是一个数值类型的字符串，那么在转换的时候结果是NaN.
c)如果要转换的内容是空的字符串，那以转换的结果是0.
d）如果是其它的字符，那么将来在转换的时候结果是NaN.

2.parseInt()

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

代码：

var a = “123”; 
	a = parseInt(a);
a)忽略字符串前面的空格，直至找到第一个非空字符,还会将数字后面的非数字的字符串去掉。
b)如果第一个字符不是数字符号或者负号，返回NaN
c）会将小数取整。（向下取整）

3.parseFloat()

parseFloat()把字符串转换成浮点数 (parseFloat可以保留小数。)
parseFloat()和parseInt非常相似，不同之处在与
	parseFloat会解析第一个. 遇到第二个.或者非数字结束
	parseFloat不支持第二个参数，只能解析10进制数
	如果解析的内容里只有整数，解析成整数

+，-0等运算

var str = '500';
console.log(+str);		// 取正
console.log(-str);		// 取负
console.log(str - 0);

转换成布尔类型

Boolean()
布尔类型的隐式转换

流程控制语句会把后面的值隐式转换成布尔类型

转换为true   非空字符串  非0数字  true 任何对象
转换成false  空字符串  0  false  null  undefined

// 结果是什么？
var a = !!'123';  // true

注意：在进行boolean转换的时候所有的内容在转换以后结果都是true，除了：false、""（空字符串）、0、NaN、undefined

2. 隐式转换：
a)转number:

var a = “123”;
	a = +a;

加减乘除以及求余都可以让字符串隐式转换成number.

b)转string:

var a = 123;
	a = a + “”;

c)转boolean:

var a = 123;
	a = !!a;

调试

过去调试JavaScript的方式

alert()
console.log()

断点调试
断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。

调试步骤
浏览器中按F12–>sources–>找到需要调试的文件–>在程序的某一行设置断点
调试中的相关操作

Watch:监视，通过watch可以监视变量的值的变化，非常的常用。
F10:程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。
F8：跳到下一个断点处，如果后面没有断点了，则程序执行结束。
tips: 监视变量，不要监视表达式，因为监视了表达式，那么这个表达式也会执行。

代码调试的能力非常重要，只有学会了代码调试，才能学会自己解决bug的能力。初学者不要觉得调试代码麻烦就不去调试，知识点花点功夫肯定学的会，但是代码调试这个东西，自己不去练，永远都学不会。

流程控制

程序的三种基本结构
顺序结构

从上到下执行的代码就是顺序结构

程序默认就是由上到下顺序执行的

分支结构

根据不同的情况，执行对应代码

循环结构

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

分支结构
if语句
语法结构

if (/* 条件表达式 */) {
  // 执行语句
}

if (/* 条件表达式 */){
  // 成立执行语句
} else {
  // 否则执行语句
}

if (/* 条件1 */){
  // 成立执行语句
} else if (/* 条件2 */){
  // 成立执行语句
} else if (/* 条件3 */){
  // 成立执行语句
} else {
  // 最后默认执行语句
}

案例：
判断一个数是偶数还是奇数
求两个数的最大数
判断一个年份是闰年还是平年
是否年满18岁(是否成年)
分数转换，把百分制转换成ABCDE <60 E 60-70 D 70-80 C 80-90 B 90 - 100 A

三元运算符

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

案例：
是否年满18岁
从两个数中找最大值

switch语句
语法格式:

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

break可以省略，如果省略，代码会继续执行下一个case
switch 语句在比较值时使用的是全等操作符, 因此不会发生类型转换（例如，字符串’10’ 不等于数值 10）

案例：
成绩判定
显示星期几
素质教育（把分数变成ABCDE）千万不要写100个case哟

判断结构
１. if else

if(判断条件/boolean值)｛
	//满足条件会执行下面的代码
	代码1;
｝else {
	//当上面的条件不满足，或者boolean的值为false的时候会执行下面的代码2
	代码2
}

注意：
1.if后面接有判断条件，else后面没有接判断条件
2.if和else只能执行一个。

2. if elseif else

判断李烜身上有多少钱，如果钱超过300块就请吃大餐，如果超过了200，吃中餐，如果不够下次记得带够？
代码：

if(判断条件/boolean值)｛
	//满足条件会执行下面的代码
	代码1;
｝else if(判断条件) {
	//当上面的条件不满足，或者boolean的值为false的时候会执行下面的代码2
	代码2
}
else if(判断条件)
。。。。。
else {
	最后代码
}

注意：
1.在if_elseif_else结构中elseif可以有几数个
2.整个结构只会执行一个代码段
3.条件在判断的是时候先写小范围的条件再写大范围的条件。
4. elseif后面要加判断条件
5.一个if可以构成一个完整的结构

３ switch_case
作用：用来判断多个可能出现的值：
代码：

switch(判断的值){
	case 具体值：
		要执行的代码段1;
		break;
	case 具体值2：
		要执行的代码段2;
		break;
	......
	default:
		要执行的代码段n
		break;
}

注意：
1.case结构后面要跟一个具体的数值
2.case结构可以有无数个
3.如果所有的case都不满足，要执行default中的内容
4.defalut可以不写，并且defalut也不用写条件

循环结构

在javascript中，循环语句有三种，while、do…while、for循环。
while语句
基本语法：

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

代码示例：

// 计算1-100之间所有数的和
// 初始化变量
var i = 1;
var sum = 0;
// 判断条件
while(i <= 100){
  // 循环体
  sum += i;
  // 自增
  i++;
}
console.log(sum);

案例： 打印100以内 7的倍数
打印100以内的奇数
打印100以内所有偶数的和
打印图形

do…while语句

do…while循环和while循环非常像，二者经常可以相互替代，但是do…while的特点是不管条件成不成立，都会执行一次。
基础语法：

do{
  // 循环体;
} while (循环条件);
代码示例：

// 初始化变量
var i = 1;
var sum = 0;
do {
  sum += i;//循环体
  i++;//自增
} while (i <= 100);//循环条件

案例：
循环输入账号密码的案例用do…while怎么写？
使用do-while循环：输出询问“我爱你，嫁给我吧？”，选择“你喜欢我吗？(y/n):"，如果输入为y则打印”我们形影不离“，若输入为n,则继续询问

for语句

写while循环的经常会忘记自增，for循环其实是while循环演化过来的，语法更加的简洁明了，使用非常的广泛。
for循环语法：

// for循环的表达式之间用的是;号分隔的，千万不要写成,
for (初始化表达式1; 判断表达式2; 自增表达式3) {
  // 循环体4
}
执行顺序：1243 ---- 243 -----243(直到循环条件变成false)

初始化表达式
判断表达式
自增表达式
循环体

案例：

1. 打印1-100之间所有数
2. 求1-100之间所有数的和
3. 求1-100之间所有数的平均值
4. 求1-100之间所有偶数的和
5. 同时求1-100之间所有偶数和奇数的和
6. 打印正方形
7. 打印直角三角形
8. 打印9*9乘法表
9. 本金10000元存入银行，年利率是千分之三，每过1年，将本金和利息相加作为新的本金。计算5年后，获得的本金是多少？

10. 有个人想知道，一年之内一对兔子能繁殖多少对？于是就筑了一道围墙把一对兔子关在里面。已知一对兔子每个月可以生一对小兔子，而一对兔子从出生后第3个月起每月生一对小兔子。假如一年内没有发生死亡现象，那么，一对兔子一年内（12个月）能繁殖成多少对？（兔子的规律为数列，1，1，2，3，5，8，13，21）
    

练习：

1. 求1-100之间所有数的乘积
2. 求1-100之间所有奇数的和
3. 计算1-100之间能3整除的数的和
4. 计算1-100之间不能被7整除的数的和

continue和break

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

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

案例：

1. 求整数1～100的累加值，但要求碰到个位为3的数则停止累加
2. 求整数1～100的累加值，但要求跳过所有个位为3的数
3. 求1-100之间不能被7整除的整数的和（用continue）
4. 求200-300之间所有的奇数的和（用continue）
5. 求200-300之间第一个能被7整数的数（break）

js代码的调试：（html,css没有办法调试，只有js代码可调试）

			1. 打开开发人员工具，找到source选项：
            2.调试js代码：先在要调试的代码的行号中加上一个断点：
            3.将程序命中断点：刷新页面
            4.点击下一步按钮。
**三元运算符：**

作用：用于判断两个选择。
代码：

boolean表达式?代码段1：代码段2;
执行过程：
判断boolean表达式是否成立，如果成立会执行代码段1，如果不成立会执行代码段2;