互联网软件开发与应用chapPPT课件

1 网页设计与制作 主讲 狼哥QQ 1107095361 2 开始学习JavaScript 3 为什么要学习JavaScript VBScript和JavaScript两种脚本语言有不同的特性 都掌握可以扬长避短 VBScript和JavaScript结合编程是ASP解决方案的一种理想选择 JavaScript是一种通用的 基于原型的 面向对象的脚本语言 JavaScript设计目标是在不占用很多系统和网络资源的情况下 可以在页面做完整的程序 4 JavaScript是一种Script脚本语言 所谓的脚本语言就是可以和HTML语言混合使用的语言 VBScript也是Script语言中的一种 但是VBScript只有微软的浏览器InternetExplore IE 才能完全支持 而JavaScript则不管是什么浏览器都可以运行 这也是JavaScript的一个优点 JavaScript是一种高级的脚本描述性语言 并不需要依赖于特定的机器和操作系统 所以说它是独立于操作平台的 JavaScript1 0最初是在NetscapeNavigator2 0及NetscapeLiveWire1 0上实现的 目前JavaScript的版本是JavaScript1 2 JavaScript概述 5 JavaScript是由网景公司开发的一种跨平台 面向对象 object oriented 的网页脚本语言 WebScriptLanguage 是目前流行的网页特效设计语言 JavaScript代码可直接嵌入HTML文件中 随网页一起传送到客户端浏览器 然后通过浏览器来解释执行 JavaScript概述 6 什么是JavaScript脚本语言 1 脚本语言 ScriptingLanguage 由ASCII码构成 可直接用任何的文本编辑器开发完成 是一种不必事先编译 只要利用适当的解释器 Interpreter 就可以执行的简单的解释式程序 2 JavaScript JavaScript是由网景公司开发的一种跨平台 纯面向对象 object oriented 式的网页式脚本语言 WebScriptLanguage JavaScript代码可直接嵌入HTML文件中 随网页一起传送到客户端浏览器 然后通过浏览器的解释器来解释执行 JavaScript概述 7 脚本编写语言基于对象的语言简单性安全性动态性跨平台 JavaScript的特点 JavaScript概述 8 制作网页特效提供表单前端验证窗口动态操作提高系统工作效率 JavaScript的功能 JavaScript概述 9 JavaScript概述 利用JavaScript可以增强网页的交互性 控制各种浏览器对象利用JavaScript还可以实现对用户所输入的数据进行有效验证 从而减轻服务器的负担JavaScript必须放在与标记之间 以便将脚本代码与HTML标记区分开来Script块可以放在HTML中与之间 也可以放在与之间 10 JavaScript与Java的区别 从本质上说JavaScript和Java没有什么联系 但是同时作为语言 可以从下面的角度来区别 1 JavaScript是解释型的语言 当程序执行的时候 浏览器一边解释一边执行 而Java是编译型的语言 必须经过编译才能执行 2 代码格式不一样 Java代码经过编译后成为二进制文件 而JavaScript是纯文本的文件 3 在HTML中的嵌入方式不一样 Java可以通过小应用程序嵌入HTML文件 而JavaScript可直接写入一个文本文件或HTML文件中 11 JavaScript编写客户端脚本 语法格式 12 在网页中加入JavaScript 要在你的网页中使用JavaScript 你首先必须要知道该将它放在哪儿 其实很简单 只要在你的网页 HTML文件 中插入和标记对 你就可以在这两个标记队之间插入你的JavaScript代码了 例如 alert Helloworld 13 在网页中加入JavaScript 另外 你也可以将JavaScript代码放在另一个单独的文件里 然后在网页 HTML文件 中使用 SRC 此单独文件的路径 地址 URL 来使用此单独文件里的JavaScript程序代码 一般将这个单独的文件保存为扩展名为 JS的文件 14 Javascript程序 在网页打开时 弹出消息窗 window alert HelloMyJS 15 事件 在网页打开时 弹出广告 functiondd window open form2 htm 16 JAVASCRIPT语法基础 基本的数据类型数值型 整数和实数 字符串型用 括起来的布尔型TRUE和FALSE空值NULL变量的申明方法VARMytest 17 Javascript 表达式 数学运算表达式 关系运算表达式 字符表达式 逻辑表达式 18 JavaScript语法基础 语句 注释 使用 来注释一个单行 和 可以注释多行 循环 for do while等等 条件语句 if else switch case 19 条件分支语句 1 if 条件表达式 语句体1 else 语句体2 20 条件分支语句 2 Switch 表达式 case值1 语句体1 break case值2 语句体2 break default 语句体 21 循环控制语句 for i 1 ijavascript 应用举例 简单购物系统 22 JavaScript的事件处理 主要内容1 事件 Event 鼠标或键盘的动作称为事件 2 事件驱动 EventDriver 由事件引发的一连串程序的动作 称为事件驱动 3 事件处理程序 EventHandler 对事件进行处理的程序或函数 4 事件处理程序语法 23 JavaScript的事件处理 1 常见事件 24 JavaScript的事件处理 2 事件处理程序语法将事件处理程序直接嵌入HTML标记符中例如 嵌入 中直接写在对象后面例如 document onLoad alert 这是事件处理程序 25 JavaScript的事件处理 3 应用举例例 请输入基本资料 姓名 26 JavaScript包含两类函数 系统函数用户自定义函数 JavaScript函数 JavaScript编程基础 27 函数 functionfun number if number 0 return1 elsereturn 1 28 JavaScript的常用对象 JavaScript是面向对象编程的 所谓 对象化编程 意思是把JavaScript能涉及的内容分成大大小小的对象 对象下面还可继续划分对象直至非常详细 所有的编程都以对象为出发点 小到一个变量 大到网页文档 窗口甚至屏幕 都是对象 JavaScript的对象可以是一段文字 一幅图片 一个表单等 每个对象有特定的属性 方法和事件 对象的属性是反映该对象某些特定的性质的 如字符串长度 图像的高宽 文本框的文字等 对象的方法能对该对象做一些操作 如表单的 提交 窗口的 滚动 等 对象的事件能响应发生在对象上的事情 如提交表单产生表单的 提交事件 点击产生 点击事件 不是所有的对象都有以上三个性质 有些没有事件而只有属性 29 JavaScript提供了一些非常有用的常用内部对象和方法 用户不需要用脚本来实现这些功能 这正是基于对象编程的真正目的 主要有JavaScript提供的Window 窗口 string 字符串 math 数值计算 和Date 日期 内置对象等 内置对象都有自己的方法和属性 访问属性的语法是 对象名 属性名称 访问方法的语法是 对象名 方法名称 参数表 所谓的方法就是一个普通的函数被封装到一个对象中 JavaScript内置对象 30 下面是一个文档对象树 31 JavaScript对象及其层次关系 Window Frame Document Location History Cookie Anchor Applet Area Form Image Link Layer CheckBox Radio Submit Hidden Passward FileUpload Text Textarea Select Reset Button Option 32 Window对象 Window对象是浏览器对象中大部分对象的祖先 下面列出一些常用Window对象的方法 1 open URL windowName parameterList open 方法创建一个新的浏览器窗口 并在新窗口中载入一个指定的URL地址 2 close close 方法关闭一个浏览器窗口 3 alert 弹出一个消息框 4 confirm 弹出一个确认框 5 promt 弹出一个提示框 6 setTimeout expression time 定时设置 在一定的时间后自动执行expression的代码 使用time设置时间 单位是毫秒 7 clearTimeout timer 取消利用setTimeout的定时设置 8 setIntervel expression time 设定一个时间间隔 可以定时反复的自动执行expression描述的代码 使用time设置时间 单位是毫秒 33 Date对象 Date对象提供了两类方法 从系统中获得当前的时间和日期 设置当前时间和日期 下表列出了常用的方法 34 String对象字符串对象 一般利用String对象提供的函数来处理字符串 String对字符串的处理主要提供了下列方法 1 charAt idx 第一个字符位置是 0 返回指定位置处的字符 2 indexOf Chr 返回指定子字符串的位置 从左到右 找不到返回 1 3 lastIndexOf chr 返回指定子字符串的位置 从右到左 找不到返回 1 4 toLowerCase 将字符串中的字符全部转化成小写 5 toUpperCase 将字符串中的字符全部转化成大写 35 其它对象 1 Document对象 含有当前网页的各种特性 例如标题 背景及使用的语言等 2 Math对象 数学对象 既是储存数据运算方法包 又是储存通用常量的属性包 3 Location对象 含有当前网页的URL地址 4 History对象 含有以前访问过的网页的URL地址 5 Forms对象 是从属于浏览器对象document的一个数组 为处理表单及其中的界面对象提供属性和方法 每一个表单是这个数组中的一个单独元素 6 Anchors对象 是从属于浏览器对象document的一个数组 为处理锚提供属性和方法 每一个锚就是这个数组中的一个元素 7 Links对象 是从属于浏览器对象document的一个数组 为处理超级连接提供属性和方法 每一个超级连接就是这个数组中的一个元素 36 基于以上特点 JavaScript在网页设计中得到了广泛的应用 例1 一个简单的JavaScript程序 运行结果如下图所示 JavaScriptDemo1document writeln 欢迎使用JavaScript document writeln document writeln 悄悄的我走了 正如我悄悄的来 document writeln 我挥一挥衣袖 不带走一片云彩 37 例2 创建一个按钮 当单击该按钮时在对话框中显示系统时间 functionshowdate alert Date JavaScript示例 38 例3 显示页面 等3秒钟或点 开始 按钮都进入页面 自动执行的例子functionNewWindow varmy open toolbar yes menubar yes width 600 heigth 200 若单击开始按钮或等待3秒钟自动进入页面 39 例4 折叠菜单 如果已显示了子菜单 则折叠 否则展开子菜单 动态折叠菜单BODY font size 12pt A font size 10pt red color red menu color blue cursor hand indent margin left 0 3in functionmenuChange varsrc varsubId src window ev