JavaScript基础[沐风书苑]

1、 JavaScript 基础 1参考幻灯 什么是JavaScript JavaScript 是一种脚本语言 提供用户交互 动态更改内容 数据验证 2参考幻灯 将JavaScript嵌入网页 可以将 JavaScript 语句插入 HTML 文档，方式 如下： 使用 标签将语句嵌入文档 将 JavaScript 源文件链接到 HTML 文档中 3参考幻灯 使用 Script 标签 JavaScript 代码 document.write(欢迎来到 JavaScript 世界); 尽情享受学习的快乐! 脚本代码 设置语言 4参考幻灯 使用外部 JS 文件 外部 JavaScript 文件可以链接到

2、 HTML 文档中 SCRIPT 标签的 SRC（源文件）属性可用于包括此外部文件 5参考幻灯 使用外部 JS 文件 JavaScript 代码代码 (test.htm) 使用外部文件 以上文本是通过访问外部 JavaScript 文件显示的 document.write(喂！你好吗喂！你好吗?) JavaScript 代码代码 (test.js ) 6参考幻灯 变量 变量名必须以字母或下划线（_）开头 变量可以包含数字、从 A 至 Z 的大小写字母 JavaScript 区分大小写，即变量 myVar、 myVAR 和 myvar 是不同的变量 7参考幻灯 声明变量 var var a a;

3、 ; “varvar” 用于声明变量的关键字用于声明变量的关键字 “a a” 变量名变量名 同时声明和初始化变量同时声明和初始化变量 var a= 10;var a= 10; a = 10; 声明变量声明变量 声明多个变量声明多个变量 var x, y, z = 10;var x, y, z = 10; 赋值赋值 8参考幻灯 声明变量 使用变量 var var x; x=prompt(淘宝网竟拍，请出一口价,1) ; document.write(拍卖价格+x+) / +用来连接多个字符串 document.write(恭喜您，您以最高价拍卖成功！); alert(欢迎下次光临！); 定义变量

4、 赋 值 输 出 prompt(“提示信息”,”默认值”) 将弹出提示对话框，接受用户 的输入。点击确定返回输入的 字符串，点击取消反馈空字符 串。 9参考幻灯 变量 a、b 和 c 只能 在其各自的函数中 被访问 变量的作用域 脚本脚本 函数function1 局部变量a 函数function2 局部变量b 函数function3 局部变量c 可由函数 1、函 数 2 和函数 3 访 问 全局变量 gg 全局变量不需要以 var 关键字进行声明，但局部变量则必须 以此关键字来声明10参考幻灯 浮点型浮点型字面量至少必须含有一个数字。此数字可包含 小数点或采用科学记数法表示的数字。科学记数法中

5、的整数可 以是正整数(+) 或负整数(-)，指数(e) 表示“十次幂”。例如 10.24、 1.20e+22、4E-8、.1815 等。 常量 整型整型 浮点型浮点型 字符串型字符串型 字字 符符说说 明明 示示 例例 b退格符 alert(“这是第一句 b 这是第二句”) f换页符 alert(“这是第一局 f 这是第二句”) n换行符 alert(“这是第一局 n 这是第二句”) r回车符 alert(“这是第一局 r 这是第二句”) t制表符 alert(“这是第一局 t 这是第二句”) 和C语言一样，js也有转义字符，常用的就是： “ n ” 11参考幻灯 数据类型 数据类型数据类型说

6、说 明明示示 例例 数字型整数或实数487, 25.95 逻辑型或布尔型执行逻辑运算tru或 false 字符串型一组字符“Hello” 空特殊关键字，表示不存在的值。 null 12参考幻灯 var x=100; var y; var z; document.write(竞拍SONY数码相机 600万像素 +x+$起价 ); y=prompt(加多少银子？,1); z=x+y; alert(您最终的出价n+z+$); /”n”用于换行显示 Prompt函数返回输入的字符串 “+”号的用法-1 10020 ? bug 200 13参考幻灯 var x=100; var y; var z; do

7、cument.write(竞拍SONY数码相机 600万像素 +x+$起价 ); y=prompt(加多少银子？,1); z=x+parseFloat( y ); alert(您最终的出价n+z+$); /”n”用于换行显示 parseFloat( )函数将字符串转换为float数据 parseInt( )函数将字符串转换为int数据 如果转换失败，返回NaN值(not a number) “+”号的用法-2 14参考幻灯 运算符 运算符对一个或多个变量或值（操作数）进行运算，并返 回一个新值 根据所执行的运算，运算符可分为以下类别： 算术运算符 比较运算符 逻辑运算符 15参考幻灯 运算符

8、运算符说 明示 例 +加a = 5 + 8 -减a = 8 - 5 /除a = 20 / 5 *乘a = 5*19 %取模两个数相除的余数10 % 3 = 1 +一元自加。该运算符带一个操作 数，将操作数的值加 1。返回的 值取决于 + 运算符位于操作数 的前面或是后面 将返回 x 自加运算后 的值。 x+ 将返回 x 自加运 算前的值 - -一元自减。该运算符只带一个操 作数。返回的值取决于 - 运算 符位于操作数的前面或是后面 -x 将返回 x 自减运算 后的值。 x- 将返回 x 自减运算 前的值 16参考幻灯 算术运算符-1 num1 num2 result 17参考幻灯 functi

9、on calcu( ) var numb1= document.calc.num1.value; var numb2= document.calc.num2.value; var total=parseFloat(numb1)*parseFloat(numb2); document.calc.result.value=total; 计算总价并显示 添加单击事件，单击按钮时调用“calcu()” 函数 算术运算符-2 获取表单中输入的数据： document.表单名.表单元素名.value 定义calcu( )计算函数,实现两个数 相乘的功能.定义函数的语法： function 函数名(参数列表

10、) /JavaScript语句； 18参考幻灯 比较运算符 比较运算符 2-1 运算符运算符说说 明明示示 例例 = = 等于。 如果两个操作数相等，则返回真。 a = = b !=不等于。 如果两个操作数不相等，则返回真。 Var2 != 5 大于。 如果左边的操作数大于右边的操作数，则 返回真。 Var1 var2 小于。 如果左边的操作数小于右边的操作数，则 返回真。 Var2 var1 =小于等于。 如果左边的操作数小于或等于右边的操作 数，则返回真。 Var2 = 4 Var2 =大于等于。如果左边的操作数大于或等于 右边的操作数，则返回真。 Var1 = 5 Var1 = var2

11、 19参考幻灯 function calcu() var numb1= document.calc.num1.value; var numb2= document.calc.num2.value; var total= parseFloat(numb1)*parseFloat(numb2); document.calc.result.value=total; if (total500) alert(购买总价超过500n支付时将赠送超级Q币2枚！); .其他代码略，同上例 比较运算符 购买总价超过500， 赠送超级Q币2枚！ 20参考幻灯 运算符 逻辑运算符 运算符运算符值值说说 明明 与 (

12、var numb2= document.calc.num2.value; var total= parseFloat(numb1)*parseFloat(numb2); document.calc.result.value=total; if (total500) .其他代码略，同上例 逻辑运算符 5001000 之间，赠送超级Q币两枚； 10002000之间，赠送IBM智能鼠标一只； 2000以上，直接与贵宾台联系。 22参考幻灯 条件语句用于测试条件。 if(条件) JavaScript代码; 语法：语法： if 语句 2-1 如果要执行多个语句，必须将这些语句放在一对大括号 ( ) 内。

13、 但如果只要执行一个语句，则可以省略大括号 23参考幻灯 function calcu() var numb1= document.calc.num1.value; var numb2= document.calc.num2.value; if (numb1!=) document.calc.result.value=total; if (total500) .其他代码略，同上例 If语句 2-2 如果输入框中的数据用户漏填了， 出现NaN的 bug 为什么呢? 24参考幻灯 if else 语句 2-1 if(条件) /JavaScript代码; else /JavaScript代码; 语法

14、：语法： 25参考幻灯 function calcu() var numb1= document.calc.num1.value; var numb2= document.calc.num2.value; if (numb1!=) document.calc.result.value=total; if (total500) else alert(购买数量或竞拍价格没有填写n请重新输入！); If-else语句 2-2 提示没有填写购买数量或 者竞拍价格? 26参考幻灯 if (条件1) if (条件2) /JavaScript代码; 语法：语法： 嵌套 if 语句 2-1 27参考幻灯 fu

15、nction calcu() var numb1= document.calc.num1.value; var numb2= document.calc.num2.value; if (numb1!=) return; /函数返回，不再执行后面的代码 if (parseFloat(numb2)0) alert(购买数量不能小于零！n请重填); return; var total= parseFloat(numb1)*parseFloat(numb2); document.calc.result.value=total; . 嵌套If语句 2-2 购买数量无意中输入负 数，出现 bug 怎么办?

16、 28参考幻灯 switch 语句 2-1 switch (表达式) case 常量1 : JavaScript语句; break; case 常量2 : JavaScript语句; break; . default : JavaScript语句; 语法：语法： 29参考幻灯 练 习 银行转帐 打6折 电话支付 打7折 邮政汇款 打8折 Q币支付 打9折 30参考幻灯 . var f=document.calc.pay.value; /支付方式代号 var grade; /折扣率 var total= parseFloat(numb1)*parseFloat(numb2); switch(pa

17、rseInt(f) case 1: grade=0.6 ; /打6折优惠 break; case 2: .同理其他方式打7折、八折 case 4: grade=0.9 ; /打9折优惠 break; default: alert(请重新选择支付方式！); return; var money=total*grade; /根据折扣率，计算实际总价 document.calc.result.value=money; alert(您享受了+grade*10+折优惠！); . 31参考幻灯 数组 4-1 声明数组 varvar 数组名数组名 = = new Arraynew Array( (数组大小数组

18、大小); ); 例：例： varvar emp = emp = new Array(3)new Array(3) 添加元素 emp0 = emp0 = “AA;AA; emp1 = emp1 = “BB;BB; emp2 = emp2 = “CC;CC; AA BB CC emp 也可以声明数组并赋初值： 例：例： var emp=new Array(“AA”，“BB”，“CC”)； 32参考幻灯 使用数组 var emp = new Array(3); emp0 = Ryan Dias; emp1 = Graham Browne; emp2 = David Greene; document.

19、write(数组emp中的数据为:); document.write(emp0+); document.write(emp1+); document.write(emp2+); 数组 4-2 33参考幻灯 数组 4-3 常用属性 length ：返回数组中元素的个数 常用方法 方方 法法说说 明明 join将数组中的元素组合成字符串 reverse颠倒数组元素的顺序，使第一个元素成为最后一个，而最后一个元素成为 第一个 sort对数组元素进行排序 34参考幻灯 var emp = new Array(3); emp0 = Ryan Dias; emp1 = Graham Browne; emp

20、2 = David Greene; emp.sort( ); document.write(“排序结果是：); document.write(emp0+); document.write(emp1+); document.write(emp2+); 数组排序 4-2 35参考幻灯 循环 for循环 do-while while 36参考幻灯 q for循环 例： var i; for (i=0; i10; i+) / 语句; for 循环 如何实现？ 37参考幻灯 for 循环 For 循环演示 document.write(打印金字塔直线); for (var i= 0; i100; i=i

21、+5) document.write(); 38参考幻灯 qwhile循环 while(循环条件) /语句； qdowhile循环 do /语句； while(循环条件); while和dowhile循环 先执行，后判断循环条件先执行，后判断循环条件 39参考幻灯 输入一个字符，直 到N停止，用哪个循 环 40参考幻灯 while和dowhile循环 .myfont font-size:150; color:#c99c96; font-family:Webdings /产生埃及图像的特殊字体 document.write(每个字符都对应一个漂亮的埃及图像); do var c = prompt

22、(输入一个字符，输入N 或n停止,A) ; document.write (+c+); while (c !=N 41参考幻灯 JavaScript 函数 内置函数 eval 函数： 用于计算字符串表达式的值 isNaN 函数：用于验证参数是否为 NaN （非数字） 42参考幻灯 JavaScript 函数 JavaScript 代码 var str1=prompt(“输入一个表达式，我给您计算,1+1); var result=eval(str1); document.write(str1+=+result); var x = prompt(输入一些数据,0); if (isNaN(x) a

23、lert (x + 不是一个数字); else alert (x + 是一个数字); 43参考幻灯 自定义函数 定义函数： function 函数名( 参数1,参数2， ) 语句; 调用函数： 函数调用一般和表单元素的事件一起使用，调用格式为： 事件名“函数名” ; function sum ( one, two) var result = one + two; return result; 表示单击此按钮时， 调用函数sum( )执 行 44参考幻灯 函数的应用 num1 num2 result 45参考幻灯 定义函数 JavaScript 代码 function compute(op) v

24、ar num1,num2; num1=parseFloat(document.myform.num1.value); num2=parseFloat(document.myform.num2.value); if (op=+) document.myform.result.value=num1+num2 ; if (op=-) document.myform.result.value=num1-num2 ; if (op=*) document.myform.result.value=num1*num2 ; if (op=/ 定义函数compute( )，完成 计算的功能。op参数代表运 算符

25、号 46参考幻灯 调用函数 第一个数 第二个数 计算结果 47参考幻灯 JavaScript 对象简介 2-1 对象是属性和/方法的组合 属性是对象所拥有的一组外观特征，一般为名词 方法是对象可以执行的功能，一般为动词 例如：汽车 Ferrari 对象：汽车 属性：型号：法拉利 颜色：绿色 方法：前进、刹车、倒车 48参考幻灯 JavaScript 对象简介2-2 q三类对象三类对象 浏览器对象浏览器对象 脚本对象脚本对象 HTML 对象对象 l浏览器窗口window l文档 document lurl地址等 lString字符串对象 lDate日期对象 lMath数学对象等 各种HTML标签

26、: l段落 l图片 l超链接等 49参考幻灯 String 对象 3-1 创建字符串有两种不同方法 ： 使用 var 语句 varvar newstr = newstr = “这是我的字符串这是我的字符串 创建 String 对象 varvar newstr = newstr = new Stringnew String ( (“这是我的字符串这是我的字符串) ) 50参考幻灯 String 对象 3-2 名名 称称说说 明明 属性length返回字符串的长度 方法 big( )增大字符串文本 blink( )使字符串文本闪烁（IE 浏 览器不支持） bold( )加粗字符串文本 fontco

27、lor( )确定字体颜色 italics( )用斜体显示字符串 indexOf(“子字符串”，起始位置 ) 查找子字符串的位置 strike( )显示加删除线的文本 sub( )将文本显示为下标 toLowerCase( )将字符串转换成小写 toUpperCase( )将字符串转换成大写 语法： indexOf(“查找的子字符串”，查找的起始位置) 返回子字符串所在的位置，如果没找到，返回 1 例如： var x var y=“abcdefg”; x=y.indexOf(“c” , 0 ); /返回结果为2，起始位置是0 51参考幻灯 function checkEmail( ) var e

28、=document.myform.email.value; if (e.length=0) /检测长度是否为0，即是否为空 alert(电子邮件不能为空!); return ; if (e.indexOf(,0)=-1) /检测是否包含”符号 alert(电子邮件格式不正确n必须包含符号！); return ; if (e.indexOf(.,0)=-1) /检测是否包含”.”符号 alert(电子邮件格式不正确n必须包含.符号！); return ; document.write(恭喜您！，注册成功！欢迎进入古城热线！); 检查电子邮件emailemail 是否包含“”和”.” String

29、 对象 3-3 返回结果-1表示没 找到“”字符 52参考幻灯 Math 对象 2-1 名称名称 说说 明明 属性 PI 的值， 约等于 3.1415 LN1010 的自然对数的值，约等于 2.302 EEuler 的常量的值，约等于 2.718。Euler 的常量用作 自然对数的底数 abs(y)返回 y 的绝对值 sin (y) 返回 y 的正弦，返回值以弧度为单位。 cos (y)返回 y 的余弦，返回值以弧度为单位 tan (y)返回 y 的正切，返回值以弧度为单位 min (x, y)返回 x 和 y 两个数中较小的数 max (x, y)返回 x 和 y 两个数中较大的数 rand

30、om返回0-1的随机数 方法 round (y)四舍五入取整 sqrt (y)返回 y 的平方根 Math.random( ) ：产生：产生01的随机小数的随机小数 Math.round( )：四舍五入取整，如：四舍五入取整，如9.34 取整为取整为9 53参考幻灯 Math 对象 2-2 假定随机产生的数字i=3，上述代码即为： 显示第三幅图片（3.jpg） 如何实现？ 每隔2秒刷新网页 54参考幻灯 Math 对象 自动刷新 document.write(2秒自动刷新，随机显示图片); var i=0; i=Math.round(Math.random( )*8+1); document.

31、write(); 55参考幻灯 Date 对象10-1 Date 对象存储的日期为自 1970 年 1 月 1 日 00:00:00 以来的毫 秒数 var 日期对象 = new Date (年、月、日等参数) 例： var mydate=new Date( “July 29, 1998,10:30:00 ”) 如果没有参数，表示当前日期和时间 例： var today = new Date( ) 56参考幻灯 Date 对象10-2 Data 方法的分组： 方法分组方法分组说说 明明 setxxx这些方法用于设置时间和日期值 getxxx 这些方法用于获取时间和日期值 Toxxx这些方法用于从 Date 对象返回字符串值 parsexxx var hour = now.getHours( ); if (hour=0 document.write(今天日期:+now.getYear()+年“ +(now.getMonth( )+1)+月+now.getDate()+日); doc