《JavaScript程序设计》电子教案word精品文档74页.doc
《《JavaScript程序设计》电子教案word精品文档74页.doc》由会员分享,可在线阅读,更多相关《《JavaScript程序设计》电子教案word精品文档74页.doc(73页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、如有侵权,请联系网站删除,仅供学习与交流JavaScript程序设计电子教案【精品文档】第 73 页江西先锋软件职业技术学院教 案院、部: 软件工程学院 教研室: 计算机应用 姓 名: 王维伟 职 称: 助教 课程名称: JavaScript程序设计 授课专业: 1003级 学生人数: 授课时间: 2011 至 2012 学年度 1 学期教材名称: JavaScript入门与提高 编者 曾光 出版单位: 科学出版社 出版时间 2008年7月 第一讲第一章 第一节万维网和HTML教学目的和目标1、了解万维网的发展历史及功能。2、介绍HTML语言的概念,简单语法。3、熟练编写静态页面。教学重点与难
2、点1、掌握理解万维网的功能。2、掌握理解HTML概念,语法规则及文件结构。3、HTML页面元素多,记忆难,要求学生短时间里具有编写HTML页面能力。教学方法和手段1、以课堂问答法和案例讨论法为主,以讲授法和指导法为辅。2、使用先锋电子教室多媒体手段进行教学。教学时间:2课时教学过程及详细内容1.1万维网和HTML万维网的目的是用于共享资源,这些资源包括文字,图片,音频和视频等.统一的标准是一种用于定位和打开这些信息的超文本语言, HTML语言。1.1.1什么是万维网 万维网,环球网,1989年始于瑞士日内瓦的CERN,通过统一的方式来访问各类信息,这就是超文本链接。 为了设计含有各类信息资源的
3、超文本链接的万维网页面,产生了超文本标记语言, 即HTML。 流行浏览器有IE,NETscape,firefox等。 页面都有一个唯一的地址,即统一资源定位符URL,使用的协议是HTTP协议。 域名是包括标识串和网站的类型,com代表私营公司,gov代表政府,edu代表教育机构等。 例: http是协议,www是服务, 是域名。1.1.2 了解HTML标签HTML页面是纯文本,可以用记事本来编辑。HTML文件的后缀名必须是.html或.htm,用浏览器来解释和执行。HTML文档基本组成部分是标签,一般有一对尖括号“”,并不是所有的标签都有结束标签。HTML文档必须以开始,结束,一个HTML文档
4、分为HEAD和BODY两部分。标签:href属性是用来指定超文本链接所要访问的URL地址。标签:src属性是用来指定要显示的图片的地址。HTML标签允许嵌套使用。例子:1-1.htm表示注释。div与span:这是用得最多的两个标签,以后会有专文总结如何使用好他们,现在必须知道的是前者是block元素,后者是inline元素;而block元素与inline元素区别正如名字告诉我们的那样:前者是所包含的内容是一个整体,几个block元素间垂直堆叠,强制后面元素另起一行;而后者,几个inline元素水平排列,相互间只有水平方向上的边距设置才会有效,padding-top,margin-bottom
5、等竖直格式设置会被忽略。不添加css,前者无法并放,后者无法堆叠。即span内部是不能放div的。ul,ol与dl:无序,有序(按字母或数字顺序)以及定义(表示对话也可以)列表,列表项使用元素标记,不能含block元素,即不能包含其中。a 与link:,可有得研究他和都有两个重要属性:rel以及rev,rel指出该文档与href指向的链接关系类型,rev则将两对象方向互换,可选类型有:alternative,如果是可选译文,则与lang属性一起用;如果是可选媒介,则用到media属性。colgroup,col:在表头区分格需要这两个标签,并不实用,不如用scope属性值,rowspan,col
6、span等属性也可,具体哪种更好现在不明。form与input,label:用得太多了,就说form的enctype属性与input有file类型可用有关,而reset类型还是别再用了。1.1.3 标签的常用属性Background:设置页面的背景图案Bgcolor:设置页面的背景色Text:设置页面的文字颜色Topmargin:顶空白像素Leftmargin:左空白像素Link: 指定文档的所有连接颜色不推荐使用样式来取代Vlink: 指定文档那些被访问过的连接颜色不推荐使用样式来取代1.1.4编写HTML页面例子:1-3.htmHTML页面是不分大小写的,常用小写。一定要闭合HTML标签,
7、声明正确的文档类型( DocType ), 不要使用嵌入式CSS样式, 在页面head标签中引入所有的样式表文件, 不要使用嵌入式JavaScript.1.1.5使用浏览器访问网页流行浏览器有IE,NETscape,firefox等,跨浏览器访问网页。布置课后任务及作业完成课后练习题:P10: (1)(5) 课堂讲解第二讲第一章 第二节程序与Web脚本教学目的和目标1、了解程序的功能。2、了解与认识web脚本。教学重点与难点1、掌握程序的功能。2、认识web脚本。教学方法和手段1、以课堂问答法和案例讨论法为主,以讲授法和指导法为辅。2、使用先锋电子教室多媒体手段进行教学。教学时间:2课时教学过
8、程及详细内容1.2程序与Web脚本javascript可以嵌入到HTML页面, javascript称为web脚本语言。1.2.1 认识一段程序 计算机程序或者软件程序(通常简称程序)是指一组指示计算机每一步动作的指令,通常用某种程序设计语言编写,运行于某种目标体系结构上。打个比方,一个程序就像一个用汉语(程序设计语言)写下的红烧肉菜谱(程序),用于指导懂汉语的人(体系结构)来做这个菜。 通常,计算机程序要经过编译和链接而成为一种人们不易理解而计算机理解的格式,然后运行。未经编译就可运行的程序通常称之为脚本程序。程序的运行:为了一个程序运行,计算机加载程序代码,可能还要加载数据,从而初始化成一
9、个开始状态,然后调用某种启动机制。在最低层上,这些是由一个引导序列开始的。在大多数计算机中,操作系统例如Windows等,加载并且执行很多程序。在这种情况下,一个计算机程序是指一个单独的可执行的映射,而不是当前在这个计算机上运行的全部程序。冯诺依曼体系结构:在一台基于最常见的冯诺依曼体系结构(又称Harvard Architecture)的计算机上,程序从某种外部设备,通常是硬盘,被加载到计算机里。 如果计算机选择冯诺依曼体系结构,那么程序就被加载入内存。 指令序列顺序执行,直到一条跳转或转移指令被执行,或者一个中断出现。所有这些指令都会改变指令寄存器的内容。 基于这种体系计算机如果没有程序的
10、支持将无法工作。一个计算机程序是一系列指令的集合。 程序里的指令都是基于机器语言;程序通常首先用一种计算机程序设计语言编写,然后用编译程序或者解释执行程序翻译成机器语言。 有时,程序也可以用汇编语言编写,汇编语言实质就是表示机器语言的一组记号在这种情况下,用于翻译的程序叫做汇编程序(Assembler)。程序和数据:程序已经被定义了。如何定义数据呢?数据可以被定义为被程序处理的信息。当我们考虑到整个计算机系统时,有时程序和数据的区别就不是那么明显了。中央处理器有时有一组微指令控制硬件,数据可以是一个有待执行的程序(参见脚本编程语言),程序可以编写成去编写其它的程序;所有这些例子都使程序和数据的
11、比较成为一种视角的选择。有人甚至断言程序和数据没有区别。编写一个程序去生成另外一个程序的过程被称之为原编程(Metaprogramming)。它可以被应用于让程序根据给定数据生成代码。单一一个程序可能不足以表示给定数据的所有方面。让一个程序去分析这个数据并生成新的程序去处理数据所有的方面可能会容易一些。Lisp就是一例支持这种编程模式的程序语言。在神经网络里储存的权重是一种数据。正是这些权重数据,跟网路的拓扑结构一起,定义了网络的行为。人们通常很难界定这些数据到底表示什么或者它们是否可以由程序来代替。这个例子以及跟人工智能相关的其它一些问题进一步考验程序和数据的区别。算法:算法指解决某个问题的
12、严格方法,通常还需辅以某种程度上的运行性能分析。算法可以是纯理论的,也可以由一个计算机程序实现。理论算法通常根据复杂性分为不同类别;实现的算法通常经过颇析(Profiling)以测试其性能。请注意虽然一个算法在理论上有效可行,但是一个糟糕的实现仍会浪费宝贵的计算机资源。(更详细信息,参见算法信息论,Algorithmic Information Theory)开发:编写程序是以下步骤的一个往复过程:编写新的源代码,测试、分析和提高新编写的代码以找出语法和语义错误。从事这种工作的人叫做程序设计员?趋多样,由此产生了不同种类的程序设计员,每一种都有更细致的分工和任务。软件工程师和系统分析员就是两个
13、例子。现在,编程的长时间过程被称之为“软件开发”或者软件工程。后者也由于这一学科的日益成熟而逐渐流行。计算机程序是利用相应的程序设计语言,按照一定的逻辑和语法进行编写和组织,通过程序的运行,使得计算机实现某种特定的功能。与web相关的有asp,jsp,php等。例: Php程序一段代码如下:If ($num0)echo “the number you enter is 0”Elseecho “the number you enter is 0)alert(“the number you enter is 0”);Elsealert(“the number you enter is =0”);布
14、置课后任务及作业完成课后练习题:P11: 进阶练习 。复习总结: 1、万维网的发展历史及功能是共享资源。2、HTML语言的概念,简单语法。 3、掌握程序的功能。4、认识web脚本。第三讲第二章第一节JavaScript的发展史 第二节JavaScript的作用教学目的和目标1、了解JavaScript的发展史。2、掌握JavaScript的作用。3、熟练编写页面特效。教学重点与难点1、掌握理解JavaScript的作用。2、熟练编写各种页面特效。3、HTML页面元素多,记忆难,要求学生短时间里具有编写HTML页面能力。教学方法和手段1、以课堂问答法和案例讨论法为主,以讲授法和指导法为辅。2、使
15、用先锋电子教室多媒体手段进行教学。教学时间:2课时教学过程及详细内容2.1 JavaScript的发展史 Netscape的JavaScript:增加更多的用户交互,控制浏览器以及动态创建页面内容的诸多功能,最主要的是使合法性验证之类的工作在客户端得以实现。Microsoft的Jscript:IE浏览器。EMCA-262标准:欧洲计算机制造商联合会创造了一个国际通用的标准化版本的JavaScript,称为EMCAScript。2.2 JavaScript的作用2.2.1表单验证:最基本和最重要的作用。例:2-1.htm演示各个限制条件。2.2.2实现网页特效。文字特效:例子2-2.htm鼠标特
16、效 2-3.htm图片特效 2-4.htm页面特效2-5.htm时间特效2-6.htm状态栏特效2-7.htm导航特效 2-8.htm综合特效 2-9.htm2.2.3改善页面样式页面样式是通过样式表来定义的.通过样式表,定义页面元素的表现形式。如控制颜色,图案,文字,可见性等。2.2.4 应用AjaxAjax技术并不是一个新的语言,是javascript,xmlhttp,css,xhtml,xml等的一个综合应用。优势是通过数据异步传输从而减少交互时间和改善用户体验等。例:图2.20:页面的多块区域能分时异步加载,减少等待时间。图2.23:通过Ajax技术,实时对用户名进行验证并在页面上显示
17、文字提示。布置课后任务及作业完成课后练习题:P32:(1)(4)课堂讲解第四讲第二章第三,四,五节使用JavaScript,浏览器与JavaScript,其他常用脚本和技术教学目的和目标1、掌握Javascript的使用。2、了解浏览器与JavaScript的版本号。3、了解其他常用脚本和技术。教学重点与难点1、掌握理解JavaScript的使用。2、掌握理解文档对象模型概念。教学方法和手段1、以课堂问答法和案例讨论法为主,以讲授法和指导法为辅。2、使用先锋电子教室多媒体手段进行教学。教学时间:2课时教学过程及详细内容2.3使用Javascript 2.3.1认识标签Javascript是嵌入
18、到html才被解释执行的, Javascript代码可以放到页面的任意位置。使用将程序段包含起来,可以让不支持的浏览器忽略过这一段代码。2.3.2嵌入网页Alert():弹出一个按钮的提示框。例:2-10.htm2.3.3 使用JavaScript文件把篇幅较多的JavaScript代码保存到一个单独的文件中,然后在HTML文档中进行引用,保持页面的清晰性。代码重复使用,只需引用文件即可,减少维护的工作量。JavaScript文件使用js作为扩展名,通过中的src来引用.使用标签的src属性来指定文件的路经,可以使用外部的JavaScript文件。2.3.4 使用事件事件是Javascript
19、时刻监视某些特定条件,当Javascript发现这些条件发生后,根据具体的代码对事件进行响应。如onclick,onfocus事件等。例:2-12.htm除了由用户的行为来触发的事件外,Javascript也响应某些不由用户触发的事件,如整个HTML页面加载完后的load(加载)事件。2.4浏览器与JavaScript2.4.1简单认识文档对象模型文档对象模型DOM(Document Object Model)是表示文档(HTML文档)和访问,操作构成文档的各种元素(如HTML标记和文本串)的应用程序接口(API),把整个页面规划成由节点分层级构成的文档。例:2-13.htmDOM通过创建树来
20、表示一个HTML文档,从而使控制文档内容及结构变得异常的容易。2.4.2 Javascript的版本 表2.12.4.3不同的浏览器支持 IE,Netscape,firefox等,表2.22.4.4指定Javascript版本标签的language属性来指定。例:Alert(“hello”); 版本号可以省。2.5其他常用脚本和技术2.5.1VBscript语言 例:2-14.htm2.5.2Java语言JavaScript和Java不是一个概念,Java是SUN公司推出的编程语言,跨平台执行的程序设计语言,特别适合于Internet应用程序开发;而JavaScript是Netscape公司的
21、产品,其目的是为了扩展Netscape Navigator功能而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言。 2.5.3 Asp和A语言Asp是“活动服务器网页”,用来创建和运行动态网页或Web应用程序,用于各种动态网站,扩展名为.asp。A是asp的最近版本,扩展名为.asp或.aspx。2.5.4 php语言基于服务端创建动态网站的脚本语言,是开放源码和跨平台运行。布置课后任务及作业完成课后练习题:P32:(5)(9)课堂讲解P32: 进阶练习 即项目实训1第五讲第三章 第一部分教学目的和目标1、熟悉编辑javascript常用工具。2、掌握整个程序设计过程与思路。3、
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- JavaScript程序设计 JavaScript 程序设计 电子 教案 word 精品 文档 74
限制150内