网页设计————js应用

网页程序设计基础,第 七章 JavaScript技术应用 张新,什么是JavaScript,JavaScript 是一种脚本语言 提供用户交互 动态更改内容 数据验证,JavaScript,JavaScript是一种描述式语言，它与HTML结合起来，用于增强功能，并提高与最终用户之间的交互性能 由Netscape公司基于Sun的Java语言基础上开发的,且无需具备太多的编程经验即可上手，简单、易学、易用。 它是与Java完全不同的一种语言。虽然在结构和语法上与Java类似，但是，它只是简化的语言。 客户端的JavaScript 必须要有浏览器的支持,大小写敏感性,在HTML中大小写是不敏感的，但是在JavaScript程序中大小写是敏感的 - HTML都是大小写不敏感的 -标准的JavaScript语法定义中是区分大小写,同许多编程语言一样，语句是组成JavaScript程序的基本单元，每一条JavaScript语句由若干表达式组织在一起，完成一个任务。 JavaScript使用分号“;”表示一条语句的结束；而与Java、C语言不同的是，用分号结束一条语句并不是强制性的要求。 例如下面的写法： var a = 1; var b = 2 JavaScript解释器在语法检查方面相对比较宽松，但是在这里我们还是建议开发人员编写JavaScript代码时要尽量保持比较严谨的书写风格，最好使用分号结束语句。,JavaScript的语句,（1）多行注释 /* 多行注释示例 注释 多行注释示例 */ （2）单行注释 / 注释第1行 / 注释第2行,JavaScript的注释,JavaScript 对象简介,对象是名称（html-标记，css-选择器） 属性是对象所拥有的一组外观特征，一般为名词 方法是对象可以执行的功能，一般为动词 例如：汽车,对象：汽车,属性：型号：法拉利 颜色：绿色,方法：前进、刹车、倒车,对象,对象后连着定义对象自身的属性（变量）及用于处理数据的方法（函数）。 要访问对象属性，必须指定对象名及属性： objectName.propertyName window.document.form.text.value=“”text文本框内的初始值 要访问对象方法，必须指定对象名及需要的方法： objectName.method() document.write(“欢迎来到 JavaScript 世界“);,9,浏览器对象简介,http:/www.google.com,window 窗口对象,location 地址对象,document 文档对象,form 表单对象,window.document.form.text.value,10,最低公用标准的浏览器对象层次,通用浏览器对象分层结构,将JavaScript嵌入网页,可以将 JavaScript 语句插入 HTML 文档，方式 如下： 使用 标签将语句嵌入文档 将 JavaScript 源文件链接到 HTML 文档中,使用 Script 标签,JavaScript 代码, document.write(“欢迎来到 JavaScript 世界“); 尽情享受学习的快乐! ,脚本代码,设置语言, 应用样式 P font-size:20px; color:blue; text-align:center 我是段落 1 我是段落 2 我是段落 3 我们的样式绝对统一 ,内部样式表,使用外部 JS 文件,外部 JavaScript 文件可以链接到 HTML 文档中 SCRIPT 标签的 SRC（源文件）属性可用于包括此外部文件,使用外部 JS 文件,JavaScript 代码 (test.htm), 使用外部文件 以上文本是通过访问外部 JavaScript 文件显示的 ,中山大学计算机科学系,2018/11/5,16,Write方法：js输出HTML代码,1.警示对话框,警示对话框: alert() 方法 ,17,使用对话框,2.确认对话框,确认对话框: confirm() ,返回 true 或 false ,18,使用对话框,3.提示对话框,提示对话框: prompt()，返回用户输入， prompt(text,defaultText) text要在对话框中显示的文字。 defaultText默认的输入文本。也可以不输入值，如果不输入值，则返回空值。,19,使用对话框,3.提示对话框,20,使用对话框,21,括号里用双引号括起来的部分是html标记语言，没有则是js参数的值，中间用“+”连接,变量,变量名必须以字母或下划线（“_“）开头 变量可以包含数字、从 A 至 Z 的大小写字母 JavaScript 区分大小写，即变量 myVar、 myVAR 和 myvar 是不同的变量,声明变量,var a; “var” 用于声明变量的关键字 “a” 变量名,同时声明和初始化变量 var a= 10;,a = 10;,声明变量,声明多个变量 var x, y, z = 10;,赋值,变量的声明与赋值,变量的取值,若要取一个变量的值，则可以把该变量名放在一个常量可以出现的位置。如:, age = 20; his_age = age; document.write (age); ,声明变量, 使用变量 var x; x=prompt(“淘宝网竟拍，请出一口价“,1) ; document.write(“拍卖价格”+x+“) ; document.write(“恭喜您，您以最高价拍卖成功！“); alert(“欢迎下次光临！“); ,定义变量,赋 值,输 出,prompt(“提示信息”,”默认值”) 将弹出提示对话框，接受用户的输入。点击确定返回输入的字符串，点击取消反馈空值。,数据类型,String数据类型（字符型）,字符串用于表示文本数据，由1个或多个字符组成的序列组成 字符串常量: 必须为字符串首尾添加成对的双引号“或单引号' “Hello word!“ '世界，您好!' “'Hi!' I said.“ '“Hi!“ I said.',Boolean数据类型,简介 Boolean类型仅有两个值：true和false，也代表1和0，实际运算中true=1,false=0 布尔值也可以看作on/off、yes/no、1/0对应true/false Boolean值主要用于JavaScript的控制语句，例如：,if (x=1) y=y+1; else y=y-1; ,特殊数据类型,（1）转义字符 特殊字符的使用方法和效果, document.write(“); document.write(“轻松学习nJavaScript语言！n“); document.write(“轻松学习JavaScript语言！“); document.write(“); ,和C语言一样，js也有转义字符，常用的就是： “ n ”,常量,当程序运行时，值始终不发生改变的量为常量（Constant）。 常量主要用于为程序提供固定的和精确的值（包括数值和字符串）、符逻辑值真（true）、逻辑值假（false）等都是常量。,JavaScript关键字（Reserved Words）是指在JavaScript语言中有特定含义，成为JavaScript语法中一部分的那些字。,运算符与表达式,一、运算符 运算符是指定计算操作的符号（如 +、-、*、 等），用于将1个或几个值进行计算而生成一个新值 被计算的值可以是常量、变量、函数调用、子表达式,二、表达式 表达式是运算符和文字、数值组合而成的式子 表达式具有值，这个值是对操作数实施运算符所确定的计算后产生的结果值 例:“var x=123;”，“x+100；”都是表达式，其值分别是数值 123、223,JavaScript的运算符,算术 比较 逻辑 字符串 求值（条件）,算术运算符, var a=3; var b=a+; document.write(b+“+a+“); var c=3; var d=+c; document.write(d+“+c+“); ,36,第一种情况： a=3; b=a+; 运行后 b=3，a=4 第二种情况： c=3; d=+c; 运行后 d=4，c=4,比较运算符,比较运算符,比较运算符对操作数进行比较，返回一个布尔值 、=、=、!=、=、!=,38, var a=2; var b=3; var c='2' document.write(“a ,逻辑运算符,逻辑运算符,逻辑运算符： && 逻辑与 | 逻辑或 ! 逻辑非,字符串运算符,字符串运算符 +可以用于字符串的连接,41, var a=2009; /变量a是一个整数 var b=“相信明天会更好”; var result; var c=true; /变量c是一个布尔值 document.write(“a=2009,b='相信明天会更好',c=true“); document.write(“); document.write(“a+b=“); result=a+b; document.write(result+”); document.write(“b+a=“); result=b+a; document.write(result +”); document.write(“b+c=“); result=b+c; document.write(result +”); document.write(“c+b=“); result=c+b; document.write(result +”); document.write(“a+b+c=“); result=a+b+c; document.write(result); ,求值运算符,条件运算符（三目运算符）： condition?true_result:false_result 如果 condition 为真，则表达式的值为 true_result 子表达式的值，否则为 false_result 子表达式的值。,42, var age,status; age=22; status=(age=18)?“成年人“:“未成年人“; document.write(“小高是：“ +status+“.“); ,运算符的优先顺序,计算复杂表达式的顺序依赖于运算符的优先级（优先级越高越先计算）。 算术运算符关系运算符 关系运算符逻辑运算符 逻辑运算符赋值运算符 例,表达式中的数据类型转换,如果操作数的数据类型不是运算符所要求的类型，那么 JavaScript 会进行隐式类型转换 控制方法： 1、对于 + 运算符 若1个操作数为字符串，则为字符串连接运算 若两个操作数都不是字符串，则为算术加运算 2、对于其他运算符，将操作数转换为相应类型的值 3、使用函数 parseInt() 和 parseFloat(),表达式中的数据类型转换,数字 + 字符串：数字转换为字符串 数字 + 布尔值：true转换为1，false转换为0 字符串 + 布尔值：布尔值转换为字符串true或false,表达式中的数据类型转换,强制类型转换函数 函数parseInt：强制转换成整数 例如parseInt(“6.12“)=6 例如parseInt(“12a“)=12 例如parseInt(“a12“)=NaN 例如parseInt(“1a2“)=1 函数parseFloat： 强制转换成浮点数 例如parseFloat(“6.12“)=6.12 函数eval：将字符串强制转换为表达式并返回结果 例如eval(“1+1“)=2 例如eval(“12“)=true,表达式中的数据类型转换,类型查询函数 函数typeof ：