JSP动态网页设计
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
var total=parseFloat(num)*parseFloat(price); document.calform.totalprice.value=total; } 计算总价并显示 </script>
获取表单中输入的数据： document.表单名.表单元素名.value
添加单击事件，单击按钮时调用“cal()” 函数 … <p><input type=“button” onclick=“cal( )” value=“计算总价” /></p>
声明变量
<html xmlns="http://www.w3.org/1999/xhtml"> <head> http-equiv="Content<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>声明变量 声明变量</title> <title>声明变量</title> <script type="text/JavaScript"> var x; 定义变量 赋 值 x=prompt("请输入你的姓名","姓名 请输入你的姓名","姓名") prompt(“提示信息”,”默认值”) x=prompt("请输入你的姓名","姓名") ; 将弹出提示对话框，接受用户 输出 document.write("你的姓名是 你的姓名是"+x); "+"用来连接多个字符串 document.write("你的姓名是"+x); // "+"用来连接多个字符串 的输入。点击确定返回输入的 alert("欢迎下次光临 欢迎下次光临！ alert("欢迎下次光临！"); 字符串，点击取消反馈空字符 </script> 串。 </head> <body> </body> </html> 13
1.20e+22、4E-8、.1815 等。 、 、
和C语言一样，js也有转义字符，常用的就是： “ \n ” ：
数据类型
数据类型
数字型
说明
整数或实数
示例
487, 25.95 tru或 false “Hello” null
逻辑型或布尔型 执行逻辑运算 字符串型 空 一组字符 特殊关键字，表示不存在的值。
同样， 同样，
帐户 Id： 密码： 年龄： 国家： Jeny@hotmail.com
错误消息
*** 密码不能 ****** 少于六位 ! 24 OK
请等待， 请等待 US ，正在 创建您的帐户 创建您的帐户
提交
Jeny Jeny 想创建一个电子邮件帐户 这样， 将验证数据并给出错误信息（如有） 这样，JavaScript 将验证数据并给出错误信息（如有）
Jeny Smiss doΒιβλιοθήκη Baidular 一万元整 A/c No. Swiss Bank 010077
Florida, USA“67 89 005 ’11’00’89’77 90” 8
$10,000/-
帐号 签名
帐户验证完毕
余额
Jeny Smiss
什么是JavaScript 3什么是JavaScript 3-2
变量
变量名必须以字母或下划线（"_"） 变量名必须以字母或下划线（"_"）开头 变量可以包含数字、 变量可以包含数字、从 A 至 Z 的大小写字母 区分大小写， myVar、 JavaScript 区分大小写，即变量 myVar、 myVAR 和 myvar 是不同的变量
声明变量
声明变量 赋值 var a; a = 10; “var” － 用于声明变量的关键字 “a” － 变量名 同时声明和初始化变量 var a= 10; 声明多个变量 var x, y, z = 10;
运算符
运算符对一个或多个变量或值（操作数）进行运算， 运算符对一个或多个变量或值（操作数）进行运算，并返 回一个新值 根据所执行的运算，运算符可分为以下类别： 根据所执行的运算，运算符可分为以下类别： 算术运算符 比较运算符 逻辑运算符
运算符
运算符 说 明
+ / * % ++ 加 减 除 乘 取模－两个数相除的余数
变量的作用域
脚本
全局变量 gg
函数function1 局部变量a 函数function3 局部变量c 变量 a、b 和 c 只能 在其各自的函数中 被访问 函数function2 局部变量b
可由函数 1、函 数 2 和函数 3 访 问
全局变量不需要以 var 关键字进行声明，但局部变量则必须 以此关键字来声明 14
“+”号的用法“+”号的用法-1 号的用法
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>声明变量</title> <script type="text/JavaScript"> var x; //语文成绩 var y; //数学成绩 Prompt函数返回输入的字符串 var z; //总分 x=prompt("语文成绩？","100"); +字符串相连：100+”100” y=prompt("数学成绩？","100"); z=x+y; document.write("你的总成绩为"+z+"分"); </script> </head> 100100 ? bug <body> </body> </html>
目标
理解什么是 JavaScript 如何将 JavaScript 嵌入到 HTML 中 理解变量、 理解变量、数据类型和运算符 掌握 if-else 和 switch 语句 if-
什么是JavaScript 什么是JavaScript 验证 Jeny 帐户详细信息 Jeny 想在银行存钱
瑞士银行
“+”号的用法“+”号的用法-2 号的用法
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>声明变量</title> <script type="text/JavaScript"> var x; //语文成绩 var y; //数学成绩 var z; //总分 x=prompt("语文成绩？","100"); y=prompt("数学成绩？","100"); z=parseFloat(x)+parseFloat(y); document.write("你的总成绩为"+z+"分"); </script> parseFloat( )函数将字符串转换为float数据 </head> parseInt( )函数将字符串转换为int数据 <body> 如果转换失败，返回NaN值(not a number) </body> </html>
示例
a=5+8 a=8-5 a = 20 / 5 a = 5*19 10 % 3 = 1 将返回 x 自加运算 后的值。 x++ 将返回 x 自加 运算前的值
一元自加。该运算符带一个 操作数，将操作数的值加 1。 返回的值取决于 ++ 运算符 位于操作数的前面或是后面 一元自减。该运算符只带一 个操作数。返回的值取决于 -- 运算符位于操作数的前面 或是后面 --x 将返回 x 自减 运算后的值。 x-- 将返回 x 自减 运算前的值
网络应用与开发
JSP 语法基础
subtitle style 张向军 subtitle style
回顾
样式表有什么用？分为哪三类？ 什么场合使用行内样式？要求某一段落显示红色， 20号字，HTML代码为： <P ? >请采用行内样式</P> 什么场合使用内嵌样式，根据选择器的不同，又分 为哪三类？ 指定<DIV>在Z轴方向的顺序号使用哪个属性？
JavaScript 代码 (jsDemo01.html)
<html xmlns="http://www.w3.org/1999/xhtml"> <head> JavaScript 代码 (test.js ) <meta http-equiv="Content-Type" content="text/html; 我是外部JavaScript脚本文件 脚本文件") 我是外部 脚本文件 charset=gb2312" /> document.write(“我是外部 <title>使用外部JavaScript文件</title> <script type="text/JavaScript" src="test.js"> </script> </head> <body> <div>上边文本是通过访问外部文件来进行显示的</div> </body> </html>
使用 Script 标签
JavaScript 代码
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 设置语言 <title>JavaScript</title> <script type="text/JavaScript"> document.write(“JavaScript语言是一种脚本语言"); </script> </head> <body> <p> JavaScript是学习网络开发的很重要的一部分</p> </body> </html>
--
算术运算符算术运算符-1
实现步骤： 1.使用DreamWeaver 或者FrontPage设计页面 2.指定各个文本框的名称 3.切换为代码视图，编写脚本代码 4.浏览并调试
num price totalprice
算术运算符算术运算符-2
定义calcu( )计算函数,实现两个数 <script type="text/JavaScript"> 相乘的功能.定义函数的语法： function 函数名(参数列表) function cal(){ { var num= document.calform.num.value; //JavaScript语句； var price= document.calform.price.value; }
常量
•整型 说 明 整型 字符 •浮点型退格符 \b浮点型
\f 字符串型 换页符 •字符串型 \n 换行符
示例
alert(“这是第一句 \b 这是第二句”) alert(“这是第一局 \f 这是第二句”) alert(“这是第一局 \n 这是第二句”)
alert(“这是第一局 \r 这是第二句”) \r 回车符 浮点型－浮点型字面量至少必须含有一个数字。此数字可包含 小数点或采用科学记数法表示的数字。科学记数法中的整数可 alert(“这是第一局 \t 这是第二句”) \t 制表符 以是正整数(+) 或负整数(-)，指数(e) 表示“十次幂”。例如 10.24、 ，
5
什么是JavaScript 什么是JavaScript
是一种脚本语言 JavaScript 是一种脚本语言 提供用户交互 动态更改内容 数据验证
将JavaScript嵌入网页 JavaScript嵌入网页
文档， 可以将 JavaScript 语句插入 HTML 文档，方式 如下： 如下：
使用 <script> 标签将语句嵌入文档 将 JavaScript 源文件链接到 HTML 文档中
比较运算符
比较运算符 2-1
运算符 == != > 说明 等于。 如果两个操作数相等，则返回真。 不等于。 如果两个操作数不相等，则返回真。 示例 a==b Var2 != 5
脚本代码
使用外部 JS 文件
外部 JavaScript 文件可以链接到 HTML 文档中 SRC（源文件） SCRIPT 标签的 SRC（源文件）属性可用于包括此 外部文件
<script type=“text/JavaScript” src= “文件名 文件名.js"></script> 文件名
使用外部 JS 文件