回顾
- JavaScript是一个解释型、基于对象的脚本语言
- 可以运行在客户端和服务器端,但是一般运行在客户端。
- 主要运用在页面的特效,页面交互。
- 变量:计算机内存中的一段空间
-
变量的命名规则:
- 变量名以字母、下划线、$开头,后面跟的是字母、数字、下划线、$
- 关键字不能变量名 var
- 变量名区分大小写
-
声明变量
- 显式声明:通过var声明
- 隐式声明:不声明直接使用
-
变量的数据类型
-
基本类型
- 数字型(支持八进制,十进制,十六进制,支持无穷大)
- 字符串型(单引号、双引号字符串是一样的)
- 布尔型(true和false)
-
复合类型
- 对象
- 数组
-
特殊类型
- Null
- Undefined:如果一个变量声明了没有赋值,就是未定义型
-
基本类型
-
注释
- 单行 //
- 多行 /* */
-
常用的输出
- document.write():输出在浏览器上
- alert():弹出一个对话框,对话框上有一个“确定”按钮
- prompt():弹出一个可以输入的对话框
- confirm():弹出一个对话框,对话框上“确定”和“取消”按钮
- 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
}
- 从上往下一次匹配,匹配到那段就执行那段代码
- 只要有一个匹配成功,下面的条件不再执行
- 如果上面都没有匹配成功,就执行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 输出’两全其美’
多学一招:
- 判断语句中,如果代码就一句,“{}”是可以省略的
- 练习
- 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>
多维数组
- 二维及二维以上的数组都称为多维数组,多维数组中用的最多的就是二维数组
- 二维数组有行和列组成
- 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>
函数
函数就是代码块,只要调用就可以执行。函数也叫方法
好处:
- 实现了代码的可重用性
- 实现模块化编程
函数的分类
- 预定义函数,JS已经定义好了,我们只要调用就行(参照手册)
- 自定义函数
预定义函数例题(操作数组)
自定义函数
语法:
function 函数名([参数1,参数2,…]){
//函数体
}
函数名的命名规则:
- 义字母、下划线开头,后面跟的是字母、数字、下划线
- 关键字不能做函数名
最简单的函数
参数的分类:
- 形式参数(形参),告诉调用者需要传递几个参数
- 实际参数(实参)
函数的调用
通过函数名来调用函数
函数定义好了是不执行的,函数只有在调用的时候才执行。
例题
判断奇偶数
- isNaN():不是数字返回true,是数字返回false
- indexOf():返回字符串内第一次出现子字符串的字符位置,位置从0开始,没有找到返回-1
实现代码
判断成绩
- parseInt():转成数字整数
- 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、判断闰年