第三章 第三节javascript企业常用开发1-1
上节回顾 html基础 html+css基础
本节内容 了解什么是脚本程序和JavaScript JavaScript的基本语法 运算符 程序的流程控制
JAVASCRIPT简介 Javascript诞生于1995年，主要负责一些输入验证操作。 1992年Nombas开发了C-minus-minus(Cmm)与C相似，后改名为ScriptEase,后开发出可嵌入网页中的CEnvi版本，这是万维网首次使用脚本语言的标志。
JavaScript简介 JavaScript简介 JavaScript与Java 前身叫作LiveScript，是一种基于对象（Object）和事件驱动（EventDriven)、并具有安全性能的脚本语言。 JavaScript与Java 是两个公司开发的两个不同的产品，作用与用途大不一样，但两者语法上有很多多相似之处，JavaScript并不是Java的子集。 JavaScript、Jscript与ECMAScript http://developer.netscape.com http://msdn.microsoft.com/scripting
什么是JavaScript JavaScript 是一种脚本语言 提供用户交互 动态更改内容 数据验证 <html> <script language=“javascript”> alert(new Date()); </script> </html> 提供用户交互 动态更改内容 数据验证
将JavaScript嵌入网页 可以将 JavaScript 语句插入 HTML 文档，方式 如下：
使用 Script 标签 JavaScript 代码 <HTML> 设置语言 <HEAD> <SCRIPT language = "JavaScript"> document.write("欢迎来到 JavaScript 世界"); </SCRIPT> </HEAD> <BODY> <P>尽情享受学习的快乐!!! </BODY> </HTML> 设置语言 脚本代码
脚本代码的位置 JavaScript代码可以放置在HTML任何位置 <script> var x = 3; <p>这是一个HTML段落</p> alert(x); <p>这是一个HTML段落</p> <script> var x = 3; alert(x); </script> <script languang = “javascript”> <!— alert(new date()); -- > </script>
将脚本程序代码作为属性值 <a href=“javascript:alert(new Date());”>javascript</a> <input type=button onclick=“alert(new Date())”value=t />
使用外部 JS 文件 外部 JavaScript 文件（*.js）可以链接到 HTML 文档中 SCRIPT 标签的 SRC（源文件）属性可用于包括此外部文件 <script language=“JavaScript” src=“文件名.js"> </script>
JavaScript 代码 (test.js ) <HTML> <HEAD> <TITLE>使用外部文件</TITLE> <SCRIPT SRC = "test.js"></SCRIPT> </HEAD> <BODY> <P>以上文本是通过访问外部 JavaScript 文件显示的 </BODY> </HTML> document.write("喂！你好吗?") JavaScript 代码 (test.js )
声明变量 声明变量 赋值 a = 10; 同时声明和初始化变量 var a= 10; 声明多个变量 var x, y, z = 10;
声明变量 定义变量 赋 值 输 出 prompt(“提示信息”,”默认值”) <HTML> <HEAD> <TITLE>使用变量</TITLE> <SCRIPT LANGUAGE = "Javascript"> var x; x=prompt("淘宝网竟拍，请出一口价",1) ; document.write("拍卖价格"+x+"<BR>") // "+"用来连接多个字符串 document.write("恭喜您，您以最高价拍卖成功！"); alert("欢迎下次光临！"); </SCRIPT> </HEAD> </HTML> 定义变量 赋 值 输 出 prompt(“提示信息”,”默认值”) 将弹出提示对话框，接受用户的输入。点击确定返回输入的字符串，点击取消反馈空字符串。
运算符 算术运算符 赋值运算符 比较运算符 逻辑运算符 位运算符
算术运算符 + 加法运算符或正值运算符，例如： x+5， ＋6。 “+”还能实现多个字符串的相加，也能将字符串与其它的数据类型连成一个新的字符串，条件是该表达式中至少有一个字符串，例如：“x”+123的结果是“x123”. - 减法运算符或负值运算符，例如： 7 – 3, -8. * 乘法运算符，例如： 3*6. / 除法运算符，例如，9/4. % 求模运算符（也就算术中的求余）5/2. ++ 将变量值加1后再将结果赋给这个变量。 “＋＋”有两种用法：++x, x++. 1。前者是变量在参与其它运算之前先将自己加1后再用新的 值参与其它的运算。例如：b= ++a是a先自增，即a的值 加1后，才赋值给b; 2。后者是先用原值参与其它运算后，再将自己加1，例如： b=a++是先将a赋值给b后，a再自增。 -- 将变量值减1后再将结果赋给这个变量，与++的用法一样。
赋值运算符 赋值运算符的作用是将一个值赋给一个变量，最常用的赋值运算符是“=”。还可以由“=”赋值运算符和其它一些运算符组合产生一些新的赋值运算符，例如，“+=”,”*=”等。 = 将一个值或表达式的结果赋给变量 例如： x = 3; += 将变量与所赋的值相加后的结果再赋给该变量 例如：x += 3 等价于x = x + 3; -= 将变量与所赋的值相减后的结果再赋给该变量 例如：x -= 3 等价于x = x – 3; *= 将变量与所赋的值相乘后的结果再赋给该变量 例如：x *= 3 等价于x = x * 3; /= 将变量与所赋的值相除后的结果再赋给该变量 例如：x /= 3 等价于x = x / 3; %= 将变量与所赋的值求模后的结果再赋给该变量 例如：x %= 3 等价于x = x % 3;
比较运算符 > < >= <= == != 注意：不要将比较运算符“＝＝”误写成“＝”。 当左边操作数大于右边操作数时返回true,否则返回false. < 当左边操作数小于右边操作数时返回true,否则返回false. >= 当左边操作数大于等于右边操作数时返回true,否则返回false. <= 当左边操作数小于等于右边操作数时返回true,否则返回false. == 当左边操作数等于右边操作数时返回true,否则返回false. != 当左边操作数不等于右边操作数时返回true,否则返回false. 注意：不要将比较运算符“＝＝”误写成“＝”。
逻辑运算符 && || ! 逻辑与，当左右两边操作数都为true时，返回true, 否则返回false. 逻辑或，当左右两边操作数都为false时，返回false,否则返回true. ! 逻辑非，当操作数为true时返回false, 否则返回true.
程序的流程控制 顺序结构 if条件选择语句 switch选择语句 while循环语句 do while语句 for循环语句 break与continue语句
if条件选择语句 1、 if(条件语句) { 执行语句; } if(x == null) 或if(typeof(x) ==“undefined”) 可以简写成if(!x). 2、if(条件语句） 执行语句块1; else 执行语句2; 三目运算符： 变量 ＝ 布尔表达式? 语句1：语句2; 例如： y = x >0 ? x : -x; 举例：如果购买金额大于1000，将给与95折的折扣
if条件选择语句 3、if(条件语句1) { 执行语句1; } else if(条件语句2) 执行语句2; ………… else if(条件语句n) 执行语句n; else 执行语句n+1;
if语句的嵌套 if(x<1) { if(y == 1) alert(“x < 1 , y == 1”); else alert(“x < 1, y != 1”); } else if(x >10) alert(“ x >10, y == 1”); alert(“ x > 10, y !=1”);
if练习 制作一个考试成绩自动分级程序 输入学生考试成绩 90分以上，评定为“优” 75到90分，评定为“良” 60到75分，评定为“中” 60分以下，评定为“差” Prompt(“提示内容”,”初始值”)
switch选择语句 case 1: case 2: case 3: case 4: case 5: alert(“working day ”); break; default: alert(“off day”); switch(表达式) { case 取值1： 语句块1; break; case 取值2： 语句块2; …………. case 取值n： 语句块n; defaule： 语句块n+1; } var x = 2; switch(x) { case1: alert(“monday”); break; case 2: alert(“Tuesday”); case 3: alert(“wendnesday”); default: alert(“sorry, I don’t know”); }
while循环语句 while(条件表达式语句) { 执行语句块; } var x = 1; while(x <3) // 如果这里加上分号会怎样呢？ alert(“x = ”+x); x++;
do while 语句 do { 执行语句块; }while(条件表达式语句）; //注意这里的分号
for循环语句 for(初始化表达式; 循环条件表达式; 循环后的操作表达式) { 执行语句块; } <script language = “javascript”> var output =“”; for(var x= 1; x <10; x++) output = output + “ x = ” + x; alert (output); </script>
当i=5 时，<HR align=center width=5％> for 循环 <HTML> <HEAD> <TITLE>For 循环演示</TITLE> <SCRIPT LANGUAGE = "JavaScript"> document.write("<H2 align=center>打印金字塔直线</H2>"); for (var i= 0; i<100; i=i+5) document.write("<HR align=center width=" + i+"%>"); </SCRIPT> </HEAD> <BODY> </BODY> </HTML> 如何实现 当i=5 时，<HR align=center width=5％>
练习 制作一个猜数游戏 问题描述： 猜数游戏。要求猜一个介于1～20之间的数字，根据用户猜测的数与标准值进行对比，并给出提示，以便下次猜测能接近标准值，直到猜中为止。