网站设计与Web应用开发技术(第四版)（微课版）ch05 JavaScript语言与客户端开发_第1页
网站设计与Web应用开发技术(第四版)（微课版）ch05 JavaScript语言与客户端开发_第2页
网站设计与Web应用开发技术(第四版)（微课版）ch05 JavaScript语言与客户端开发_第3页
网站设计与Web应用开发技术(第四版)（微课版）ch05 JavaScript语言与客户端开发_第4页
网站设计与Web应用开发技术(第四版)（微课版）ch05 JavaScript语言与客户端开发_第5页
已阅读5页，还剩36页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第5章JavaScript语言与客户端开发教学目标教学重点教学过程第2页教学目标理解JavaScript脚本语言的基本概念掌握JavaScript脚本语言的基本语法掌握JavaScript的变量、各类控制语句和函数的用法了解JavaScript内置对象和文档对象模型的基本用法了解JavaScript开发框架JavaScript典型案例第3页教学重点JavaScript脚本语言的基本语法JavaScript的变量、各类控制语句和函数的用法JavaScript在网页中的应用第4页教学过程

JavaScript简介

JavaScript基本语法对象化编程

浏览器对象模型与文档对象模型JS开发框架技术JavaScript实例Ajax技术第5页5.1JavaScript简介

JavaScript是由Netscape公司的BrendanEich发明的，最初称为LiveScript1995年Java出现后，以Java的设计理念，对LiveScript进行了改写，增加了对JavaApplet的支持，所以改名为JavaScriptJavaScript可增加网页的互动性简化HTML代码中的重复代码减少网页下载时间对提交表单做即时的检查，即时响应用户的操作第6页5.1JavaScript简介

基于对象)和事件驱动，并具有较高安全性能的脚本语言，特点如下：一种脚本语言基于对象简单性

安全性

动态性

跨平台性

第7页5.1JavaScript简介

JavaScript不是Java的精简版，区别如下：

Java是面向对象的，而JavaScript是基于对象的

JavaScript是解释执行的，而Java是编译执行

Java采用强变量，JavaScript采用弱变量

两者的代码格式不同

两者嵌入HTML的方式不一样

第8页5.1JavaScript简介

JavaScript在网站开发中具有以下作用：创建生动的用户界面

数据有效性验证工作

数据查找

JavaScript语言的组成JavaScript核心语言JavaScript客户端扩展JavaScript服务器端扩展第9页5.1JavaScript简介

将JavaScript引入网页可直接将代码加入网页JavaScript可出现在网页中的任意位置，但必须使用标记<script>…</script>“<!—”和“//-->”的作用，是让不能解析<script>标签的浏览器忽略JavaScript代码第四行前边的双反斜杠“//”是JavaScript里的注释标号<script><!--...(JavaScript代码)...//--></script>第10页5.1JavaScript简介

将JavaScript引入网页使用外部文件的方式，将某个.js文件引入

<scriptsrc="javascript.js"></script>

在浏览器中直接调用JavaScript

浏览器“地址”栏输入：

javascript:<JavaScript语句>使用链接： <ahref="javascript:<JavaScript语句>">...</a>第11页5.1JavaScript简介

一个简单的JavaScript实例<!DOCTYPEhtml><html><head><title>一个简单的实例</title></head><body><scripttype="text/javascript">document.write("一个简单的实例");</script></body></html>第12页5.1JavaScript简介

JavaScript兼容性说明第13页5.2JavaScript基本语法

一般语句具有如下格式：<语句>;用大括号“{}”括起来的一个或多个语句，相当于一个复合语句允许语句块的嵌套

第14页5.2JavaScript基本语法

JavaScript的数据类型：第15页5.2JavaScript基本语法

JavaScript的变量名称符合：只包含字母、数字和/或下划线；必须以字母开头；不能太长；不能与JavaScript保留字重复变量是区分大小写的变量名及函数名一般用小写，多个单词中除首单词外其余单词首字母大写声明变量的方式：var<变量>[=<值>];变量的作用域及赋值方法

第16页赋值操作符：=、+=、-=、*=、/=、%=、<<=、>>=、>>>=、&=、^=、|=；条件表达式：status=(age>=18)?"adult":"minor"；算数操作符：+、-、*、/、%、++和--，y=++x；位逻辑运算符：&、|、^;<<、>>、>>>布尔操作符：&&、||、!比较操作符：==、>、>=、<、<=、!=；连接操作符+用于连接两个字符串：x="Hello";y="World!";x+y为"HelloWorld!"5.2JavaScript基本语法

第17页5.2JavaScript基本语法

注释语句双反斜杠“//”标记后面的部分将被忽略

“/*”和“*/”括起来的一行到多行文字

条件语句if语句

switch语句

循环语句for语句while语句do-while语句break和continue

第18页5.2JavaScript基本语法

函数可以在脚本中被事件触发或被其他语句调用

使用function关键字来定义一个函数functionaddAll(a,b,c){returna+b+c;}vartotal=addAll(20,40,60);第19页5.3对象化编程

将编程所涉及的实体划分成大大小小的对象，对象下面还可继续划分为更小的对象直至不能进一步划分为止对象是属性和方法的集合

获得对象的方式引用JavaScript的内部对象由浏览器环境所提供的对象自行创建的对象第20页5.3对象化编程

对象操作语句for...in语句with语句

this关键词

new运算符

对象属性的引用使用“.”、下标或字符串形式

对象方法的引用第21页5.3对象化编程

事件处理事件：用户对网页的一些特定“操作”(这些操作通常直接对应鼠标的动作)和系统行为。例如：加载一张网页，点击一个超链等发生事件->启动事件处理程序->事件处理程序作出反应“on事件名”是JavaScript规定的对应事件处理程序柄（eventhandler）的名字。例如：onClick、onfocus、onSubmit等用户浏览器JavaScript事件处理机制鼠标/键盘操作显示处理结果事件提交调用事件处理函数完成处理第22页5.3对象化编程

JavaScript的内部对象“数字”对象Number字符串对象String数组对象Array算术对象Math日期对象DateJavaScript中的系统函数JavaScript的全局对象第23页5.3对象化编程

自定义类及对象<!DOCTYPEhtml><html><body><scripttype="text/javascript">functionClass1(name,age){letperson={name:name,age:age,greet:function(){return'Hello,mynameis'+;}};returnperson;}letperson1=Class1('John',25);alert(person1.greet());//输出:Hello,mynameisJohn='Bob';person1.age=30;alert(person1.greet());//输出:Hello,mynameisBob</script></body></html>第24页5.4

浏览器对象模型(BOM)与文档对象模型(DOM)第25页5.4

浏览器对象模型(BOM)与文档对象模型(DOM)文档对象(DOM)是从网页文档里划分出来的对象在网页特效或验证过程需要使用这些对象名称含义名称含义navigator浏览器对象location位置对象window窗口对象document文件对象screen屏幕对象Link链接对象event事件对象Form表单对象history历史对象CookieCookie对象第26页浏览器对象<!DOCTYPEhtml><html><body><script>with(document){write("你的浏览器信息：<OL>");write("<LI>代码："+navigator.appCodeName);write("<LI>名称："+navigator.appName);write("<LI>版本："+navigator.appVersion);write("<LI>语言："+navigator.language);write("<LI>编译平台："+navigator.platform);write("<LI>用户表头："+navigator.userAgent);}</script></body></html>5.4

浏览器对象模型(BOM)与文档对象模型(DOM)第27页屏幕对象<!DOCTYPEhtml><html><body><scripttype="text/javascript">with(document){write("您的屏幕显示设定值如下：<P>");write("屏幕的实际高度为",screen.availHeight,"<BR>");write("屏幕的实际宽度为",screen.availWidth,"<BR>");write("屏幕的色盘深度为",screen.colorDepth,"<BR>");write("屏幕区域的高度为",screen.height,"<BR>");write("屏幕区域的宽度为",screen.width);}</script></body></html>5.4

浏览器对象模型(BOM)与文档对象模型(DOM)第28页document示例<!DOCTYPEhtml><html><body><scripttype="text/javascript">document.bgColor="gray";document.fgColor="blue";document.linkColor="red";document.alinkColor="blue";document.vlinkColor="purple";varupdate_date=document.lastModified;varformated_date=update_date.substring(0,10);document.write("本网页最后更新时间："+update_date+"<BR>")document.write("本网页最后更新日期："+formated_date+"<BR>")</script><br>测试文件对象的颜色属性：<br><ahref="">南京邮电大学</a></body></html>5.4

浏览器对象模型(BOM)与文档对象模型(DOM)第29页5.4

浏览器对象模型(BOM)与文档对象模型(DOM)表单对象

文本对象Text

按钮对象、提交按钮对象和重置按钮对象单选按钮对象Radio复选框对象Checkbox选择对象Select和选项对象Option文本区域对象Textarea文件上传对象FileUpload第30页5.5JS开发框架技术框架技术简介Bootstrap框架jQuery框架ExtJSDojoMootoolsPrototypeJSYUIFoundationKissyQWap

第31页5.5JS开发框架技术框架实例例5-32：angular+bootstrap实现无刷新翻页及查找功能第32页5.6JavaScript实例带动画效果的进度条例5-34第33页5.6JavaScript实例旋转变幻文字效果例5-35第34页5.6JavaScript实例指针式时钟的实现例5-36第35页5.6JavaScript实例一个益智小游戏——贪吃蛇例5-37第36页5.7Ajax技术

Ajax的现状IBM、Oracle、Yahoo!、BEA、RedHat、Novell等业界领先的公司启动了OpenAjax项目微软开发了自己的Ajax框架Alt

人人文库> 全部分类> 教育资料 > 考试试卷

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论