JS初级（二）else if、 if、 if else、 switch、 函数、 判断语句、 数组、 更改颜色

回顾

1. JavaScript是一个解释型、基于对象的脚本语言
2. 可以运行在客户端和服务器端，但是一般运行在客户端。
3. 主要运用在页面的特效，页面交互。
4. 变量：计算机内存中的一段空间
5. 变量的命名规则：
   1. 变量名以字母、下划线、$开头，后面跟的是字母、数字、下划线、$
   2. 关键字不能变量名 var
   3. 变量名区分大小写
6. 声明变量
   1. 显式声明：通过var声明
   2. 隐式声明：不声明直接使用
7. 变量的数据类型
   1. 基本类型
      1. 数字型（支持八进制，十进制，十六进制，支持无穷大）
      2. 字符串型（单引号、双引号字符串是一样的）
      3. 布尔型（true和false）
   2. 复合类型
      1. 对象
      2. 数组
   3. 特殊类型
      1. Null
      2. Undefined：如果一个变量声明了没有赋值，就是未定义型
8. 注释
   1. 单行 //
   2. 多行 /* */
9. 常用的输出
   1. document.write()：输出在浏览器上
   2. alert()：弹出一个对话框，对话框上有一个“确定”按钮
   3. prompt()：弹出一个可以输入的对话框
   4. confirm()：弹出一个对话框，对话框上“确定”和“取消”按钮
   5. console.log()：在控制器输出。

运算符

算术运算符

二元运算符：+ – * / %

“+”：不但可以做数字相加，还可以做字符串相加，字符串相加就是字符串相连

比如：1+2=3 “1”+”2”=”12”

一元运算符：++ —

++前置先自增，++后置就是后自增。

关系运算符

运算符	描述
>	大于
>=	大于等于
<	小于
<=	小于等于
==	等于
!=	不等于

关系运算符运算的结果就两个：true和false

5>2 true

5<2 false

5>=2 true

5>=5 true

5<=5 true

5==5 true

5==2 false

5!=5 false

5!=2 true

逻辑运算符

运算符	描述
&&（与）	并且
||（或）	或者
!（非）	取反

练习

true && true true

true && false false

false && true false

false && false false

true || true true

true || false true

false || true true

false || false false

!true false

!false true

练习：写出如下表达式

1、评三好学生的条件语文（ch）数学（math）不低于90

方法一：ch>=90 && math>=90

方法二：!(ch<90 || math<90)

2、评三好学生的条件语文（ch）或者数学（math）超过90

方法一：Ch>90 || math>90

方法二：!(ch<=90 && math<=90)

3、年龄（age）在20到30之间

方法一：age>=20 && age<=30

方法二：!(age<20 || age>30)

4、小红嫁人的条件，年龄（age）在20到30之间，而且兜里的钱（money）不低于100。

age>=20 && age<=30 && money>=100

5、小红嫁人的条件，要么年龄（age）在20到30之间，要么兜里的钱（money）不低于100。

age>=20 && age<=30 || money>=100

赋值运算符（=）

计算机的“=”和数学的“=”不一样。

a=5：计算机在内存中划出一段空间，取名为a，并且将5付给a。

运算符	描述
=	赋值 a=5 将5付给a
+=	a+=b a=a+b
-=	a-=b a=a-b
*=	a*=b a=a*b
/=	a/=b a=a/b
%=	a%=b a=a%b

例题

条件语句（判断语句）

单分支（if）

流程图

语法：

if(条件表达式){

//代码

}

{：表示程序的开始

}：表示程序的结束

if中的条件如果为true，就执行if中的代码，如果为false，就不执行。

例题：

双分支（if-else-）

流程图：

语法：

if(条件){

//代码1，条件成立执行这段

}else{

//代码2，条件不成立执行这段

}

例题

多分支（else if）

场景：输入成绩，成绩大于90是A，大于80是B，以此类推…

语法：

if(条件){

//代码1

}else if(条件){

//代码2

}

else if(条件){

//代码3

}else{

//代码4

}

1. 从上往下一次匹配，匹配到那段就执行那段代码
2. 只要有一个匹配成功，下面的条件不再执行
3. 如果上面都没有匹配成功，就执行else部分的代码

例题

多路判断（switch-case-）

语法：

switch(表达式){

case 值1:

代码;

[break;]

case 值2:

代码2;

[break;]

default: //如果上面都没有匹配到，就执行default这一段

代码3

}

脚下留心：break是可以省略的，代码一直从匹配处开始执行，一直执行到break结束。

switch：开关

case：事件

break：中断

default：默认

例题

思考：如下代码输入0,1,2 各输出什么?

var num=prompt(‘请输入一个数’,”);

switch(num%3){

case 0:

alert(‘十全十美’);

break;

case 1:

alert(‘一心一意’);

case 2:

alert(‘两全其美’);

break;

default:

alert(‘输入错误’);

}

输入0 输出十全十美

输入1 输出 ‘一心一意’ ‘两全其美’

输入2 输出’两全其美’

多学一招：

1. 判断语句中，如果代码就一句，“{}”是可以省略的

1. 练习

1. switch语句与if语句的区别

答:switch的条件与一个固定的值匹配的，if的条件是比较表达式

if语句嵌套

<script type=”text/javascript”>

var score=prompt(‘请输入成绩’,”);

if(score==” || score<0 || score>100)

alert(‘成绩必须在0~100之间’);

else{

if(score>=60)

alert(‘及格’);

else

alert(‘不及格’)

}

</script>

数组

数组是计算机内存中一段连续的空间，这段连续的空间就一个名字（stu），通过下标来区分每个元素的值，下标从0开始，每次递增1。

创建数组的方式

方法一：var 数组名=[元素1,元素2,…]

方法二：var 数组名=new Array([元素1，元素2，…])

<script type=”text/javascript”>

//方法一

var stu=[‘tom’,’berry’,’ketty’]; //[]表示数组

document.write(stu[0]+'<br>’);

document.write(stu[1]+'<br>’);

document.write(stu[2]+'<br>’);

document.write(‘——————–<br><br>’);

//方法二：

stu=new Array(‘张三’,’李四’);

document.write(stu[0]+'<br>’);

document.write(stu[1]+'<br>’);

document.write(‘——————–<br><br>’);

//方法三:

stu=new Array();

stu[0]=’李白’;

stu[1]=’杜甫’;

document.write(stu[0]+stu[1]);

</script>

多维数组

1. 二维及二维以上的数组都称为多维数组，多维数组中用的最多的就是二维数组
2. 二维数组有行和列组成

1. JS不支持多维数组，我们可以通过数组中存放数组来实现二维数组。

<script type=”text/javascript”>

//方法一：

var stu=[

[‘tom’,’berry’],

[‘李白’,’杜甫’]

];

document.write(stu[0][0]+stu[0][1]+'<br>’); //tomberry

document.write(stu[1][0]+stu[1][1]+'<br>’); //李白杜甫

document.write(‘<br>———————<br>’);

//方法二：

var emp=new Array(new Array(),new Array());

emp[0][0]=’tom’;

emp[0][1]=’berry’;

emp[1][0]=’aa’;

emp[1][1]=’bb’;

document.write(emp[0]+'<br>’); //tom,berry

document.write(emp[1]); //aa,bb

</script>

函数

函数就是代码块，只要调用就可以执行。函数也叫方法

好处：

1. 实现了代码的可重用性
2. 实现模块化编程

函数的分类

1. 预定义函数，JS已经定义好了，我们只要调用就行（参照手册）
2. 自定义函数

预定义函数例题（操作数组）

自定义函数

语法：

function 函数名([参数1,参数2,…]){

//函数体

}

函数名的命名规则：

1. 义字母、下划线开头，后面跟的是字母、数字、下划线
2. 关键字不能做函数名

最简单的函数

参数的分类：

1. 形式参数（形参），告诉调用者需要传递几个参数
2. 实际参数（实参）

函数的调用

通过函数名来调用函数

函数定义好了是不执行的，函数只有在调用的时候才执行。

例题

判断奇偶数

1. isNaN()：不是数字返回true，是数字返回false
2. indexOf()：返回字符串内第一次出现子字符串的字符位置，位置从0开始，没有找到返回-1

实现代码

判断成绩

1. parseInt()：转成数字整数
2. parseFloat()：转成浮点数（小数）

例题

<script type=”text/javascript”>

function check(){

var ch=frm.ch.value; //字符串型

var math=frm.math.value; //字符串型

if(ch==”){

alert(‘您没有输入语文成绩’);

frm.ch.select();

}

else if(isNaN(ch)){

alert(‘语文成绩不是数字’);

frm.ch.select();

}

else if(math==”){

alert(‘您没有输入数学成绩’);

frm.math.select();

}

else if(isNaN(math)){

alert(‘数学成绩不是数字’);

frm.math.select();

}

else{

//ch=parseInt(ch); //将语文成绩转成整数

//math=parseInt(math);//将数学成绩转成整数

ch=parseFloat(ch);

math=parseFloat(math); //转成浮点数

if(ch<0 || ch>100){

alert(‘语文成绩必须在0-100之间’);

frm.ch.select();

}

else if(!(math>=0 && math<=100)){

alert(‘数学成绩必须在0-100之间’);

frm.math.select();

}

else{

var avg=(ch+math)/2; //求平均分

alert(‘平均分是：’+avg);

if(avg>=90)

alert(‘孩子，你是我的骄傲’);

else if(avg>=80)

alert(‘好样的，宝贝’);

else if(avg>=70)

alert(‘你离优秀不远了’);

else if(avg>=60)

alert(‘你还是有潜力的’);

else

alert(‘你不努力是不行了’);

}

}

}

</script>

<form action=”” name=’frm’>

语文：<input type=”text” name=”ch” id=””> <br>

数学：<input type=”text” name=”math” id=””> <br>

<input type=”button” value=”判断成绩” onclick=’check()’>

</form>

更改颜色

<script type=”text/javascript”>

function change(){

var num=frm.color.value;

switch(num){

case “1”: /*num是字符串类型的*/

shi.style.color=’#F00′;

break;

case “2”:

shi.style.color=’#090′;

break;

case “3”:

shi.style.color=’#00F’;

break;

default:

shi.style.color=’#000′;

}

}

</script>

<div id=’shi’>

锄禾日当午，<br>

汗滴禾下土。<br>

谁知盘中餐，<br>

粒粒皆辛苦。

</div>

<form action=”” name=’frm’>

<select name=”color” id=”” onchange=’change()’>

<option value=””>—请选择—</option>

<option value=”1″>红色</option>

<option value=”2″>绿色</option>

<option value=”3″>蓝色</option>

</select>

</form>

作业

1、判断闰年