一JavaScript概述
1,JavaScript是嵌入到HTML语言中,直接通过浏览器就得以运行,通常情况下,把JavaScript称为web脚本语言。JavaScript是一种轻型的、解释性的脚本语言,是一种由浏览器内的解释执行的程序语言。
2,JavaScript的执行原理:当客户端向服务器端请求某个页面时,服务器端将整个页面包含JavaScript的脚本代码作为相应内容,发送回客户端机器,客户端浏览器根据发回的网页文件从上往下逐行解读其中的HTML或脚本代码。
3,JavaScript脚本是从服务器端下载到客户端,然后在客户端执行的,既不占用服务器端的CPU等资源,因此,通过客户端脚本,分担了服务器的任务,从而间接的提升了Web服务器的性能。
4,JavaScript组成部分
ECMAScipt: JavaScript语法核心。
DOM:文档对象模型,提供访问和操作网页内容的方法和接口。
BOM:浏览器对象模型,提供与浏览器交互的方法和接口。
5,脚本代码的位置
(1)放在<script></script>标签对之间
<scripttype="text/javascript">
document.write("欢迎进入JavaScript世界");
</script>
(2)将JavaScript代码放置在一个单独的文件中
<scriptsrc="../js/task1.js"type="text/javascript"></script>
注:带有src属性的<script>标签,不应该在<script></script>标签之间再度包含额外的JavaScript代码。如果包含了嵌入的代码,则只会下载并执行外部脚本文件,嵌入的代码会被忽略。
(3)将脚本程序代码作为标签的属性值
<ahref="javascript:document.write('<h2>欢迎进入JavaScript世界</h2>')">Hello</a>
二,JavaScript核心语法
1,定义变量
方法一:先声明在赋值
var message;
message="hello";
方法二:同时声明和赋值变量
var message="你好";
varnum1=12,num2=17;
方法三:不声明直接赋值
message="Hi"
2,数据类型
基本数据类型 undefined、null、boolean、number、string
复杂类型 object
Undefined:对初始化的变量及未声明的变量。
string:用单引号或双引号来声明的字符串。
boolean:true或false。
Number:整数或浮点数
Object:JavaScript中的对象、数组、和null
(1)typeof操作符
由于JavaScript是弱类型,typeof检测给定变量的数据类型。
例:
1)string
varmessage="hi";
document.write(typeofmessage);
2)undefined
varname;
document.write(typeofname);
3)number
varage=35.7;
document.write(typeofage);
4)string
varobj=newDate();
document.write(typeofobj)
5)boolean
varf=1<2;
document.write(typeoff);
(2)undefined
提问:str1和str2 输出结果
varstr1="";varstr2=null;
document.write(typeofstr1);
document.write(typeofstr2);
答案:str1结果:string
str2结果:object
3,运算符
类型 运算符
算数运算符 +- * / % ++ --
赋值运算符 =
比较运算符 > < >= <= == !=
逻辑运算符 &&(和) ||(并且) !(非)
4,JavaScript注释
(1)使用//实现单行注释
(2)多行 /* 注释内容 */
5,JavaScript的流程控制语句
JavaScript常用的程序流程有三种结构:顺序结构,选择结构,循环结构
1) 顺序结构
程序按照语句出现的先后顺序依次执行
2) 选择结构
if语法结构
-------------------------------------
if(条件表达式 ){
内容
}
------------------------------------
if(条件表达式 ){
内容1
}else{
内容2
}
例:求变量x的绝对值
varx=-4,y;
if(x>0){
y=x;
}else{
y=-x;
}
document.write(x+"的绝对值是:"+y);
--------------------------------------
if(条件表达式 ){
内容1
}elseif{
内容2
} ……
elseif{
内容n
}else{
内容n+1
}
例:根据小时数,输出问候语
vartime=newDate(); //创建Date对象
varhour=time.getHours(); //当前小时
if(hour<=11){
document.write("早上好");
}elseif(hour<=18){
document.write("下午好");
}else{
document.write("晚上好");
}
--------------------------------------------
switch(表达式){
case 取值1:语句1;break;
case 取值2:语句2;break;
……
case 取值n:语句n;break;
default:语句n+1; break;
}
例:根据星期,在页面上输出是工作日还是休息日
vartime=newDate();
varweek=time.getDay();
switch(week){
case1:
case2:
case3:
case4:
case5:document.write("工作日");break;
default:document.write("休息日");break;
}
3) 循环结构
(1)while循环语法:
while(条件表达式){
内容
}
例:输出摄氏温度与华氏温度的对照表,要求它摄氏温度0到50度,每隔20度为一项,对照表中的条目不超过10条。转换关系;华氏温度=摄氏温度*9/5.0+32
varf; //华氏温度
varc=0;//摄氏温度
varcount=1; //条目
while(count<=10&&c<=200){
f=c*9/5.0+32; //转换
document.write("<table><tr><td>"+c+"</td><td>"+f+"</td></tr></table>");
//document.write(c+"<br/>"+ "<br/>"+f);
c=c+20;
count++;
}
(2)do……while循环语法
do{
内容
}while条件表达式 ();
例:输出5的阶乘(阶乘指从1乘以2乘以3..一直乘到所要求的数)。5的阶乘1*2*3*4*5
vari=1;
varnum=1;
do{
i=i+1;
num=num*i;
}while(i<5)
document.write("i:"+i+"num:"+num);
(3)for循环语法
for(初始化表达式;循环条件表达式;循环后的操作表达式){
内容
}
例:输出摄氏温度与华氏温度的对照表
varf;//华氏温度
for(c=0,count=1;count<=10&&c<=250;c=c+20,count++){
f=c*9/5.0+32;//转换
document.write("<table><tr><td>"+c+"</td><td>"+f+"</td></tr></table>");
}
(4)break与continue
结束循环:false
中断循环:break
跳过本次循环:continue
例:1-20之间的偶数相加,输出累加和大于30的当前数。
vari=1;
varsum=0;
while(i<=20){
if(i%2!=0){
i++;
continue;//是奇数就结束本次循环,开始下一次循环
}
sum=sum+i;
if(sum>30){
document.write("当加到:"+i+"时,累加和超过30");
break;
}
i++;
}
练习1:使用分支结构实现数据的多种运算
根据消费金额和消费者是否是会员确定折扣,最终核算实际应该支付的金额
消费在200以上的会员折扣是7.5折,消费没有达到200元的会员是8折,非会员只有消费到100元以上9折。
<scripttype="text/javascript">
varmoney=340;
varid=true;
var
if(id){
if(money>200){
money=money*0.75;
}
else{
money=money*0.8;
}
document.write("会员消费340,实际支付:"+money);
}
else{
if(money>100){
money=money*0.9;
}
document.write("非会员消费340,实际支付:"+money);
}
</script>