最新Web编程基础-CSS、JavaScript、jQuery第二部分 JavaScript(共88张PPT课件).pptx
《最新Web编程基础-CSS、JavaScript、jQuery第二部分 JavaScript(共88张PPT课件).pptx》由会员分享,可在线阅读,更多相关《最新Web编程基础-CSS、JavaScript、jQuery第二部分 JavaScript(共88张PPT课件).pptx(88页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、JavaScript第二(d r)部分WEB编程基础(jch)第一页,共八十八页。WEB编程基础(jch)教学教学(jio xu)(jio xu)目标目标通过通过(tnggu)这一部分的学习让学生掌握这一部分的学习让学生掌握JavaScript的基础知识、基本语法和常用方法。能的基础知识、基本语法和常用方法。能够熟练对网页图片、文本、菜单等对象进行网页特效够熟练对网页图片、文本、菜单等对象进行网页特效制作。制作。第二页,共八十八页。网页图片滚动特效制作网页图片滚动特效制作JavaScriptJavaScript基础知识。基础知识。JavaScript的变量、运算符、条件语句、循环语句和的变量、
2、运算符、条件语句、循环语句和JavaScript事件。事件。JavaScript中的字符串对象、日期对象、数组对象、逻辑对象、中的字符串对象、日期对象、数组对象、逻辑对象、算数对象使用算数对象使用(shyng)方法。方法。WEB编程基础(jch)教学内容教学内容第三页,共八十八页。重点:重点: 1、JavaScript语法基础语法基础 2、JavaScript常用语句常用语句 3、JavaScript对象对象难点难点(ndin): JavaScript对象的使用对象的使用WEB编程基础(jch)教学教学(jio xu)(jio xu)重难点重难点第四页,共八十八页。网页网页(wn y)图片滚动
3、特效制图片滚动特效制作作WEB编程基础(jch) 以前我们学过用标签使得对象滚动,但是它没有(mi yu)办法使得图片实现无缝隙的滚动。若需要对象无缝隙滚动,就要采用 DIV+CSS+ JavaScript 来实现。一、图片滚动效果一、图片滚动效果图图1 1 图片滚动效果图图片滚动效果图第五页,共八十八页。网页图片滚动网页图片滚动(gndng)特效制特效制作作WEB编程基础(jch)1、 JavaScript 简介(简称:JS) 什么是什么是 JavaScript JavaScript? JavaScript是一种基于对象和事件驱动事件驱动并具有相对安全性的客户端脚本语言脚本语言。同时也是一种
4、广泛用于客户端WebWeb开发的脚本语言,常用来给HTMLHTML网页添加动态功能(gngnng)。JavaScript JavaScript 能做什么?能做什么? JavaScript 为 HTML 设计师提供了一种编程工具 HTML 创作者往往都不是程序员,但是 JavaScript 却是一种只拥有极其简单的语法的脚本语言!几乎每个人都有能力将短小的代码片断放入他们的 HTML 页面当中。二、关键技术二、关键技术第六页,共八十八页。网页图片滚动特效网页图片滚动特效(txio)制制作作WEB编程基础(jch)1、 JavaScript 简介(简称:JS)JavaScript JavaScri
5、pt 能做什么?能做什么? JavaScript 可以将动态的文本可以将动态的文本(wnbn)放入放入 HTML 页面页面 类似于这样的一段 JavaScript 声明可以将一段可变的文本放入 HTML 页面:document.write( + name + “)。JavaScript 可以对事件作出响应 可以将 JavaScript 设置为当某事件发生时才会被执行,例如页面载入完成或者当用户点击某个 HTML 元素时。JavaScript 可以读写 HTML 元素 JavaScript 可以读取及改变 HTML 元素的内容。二、关键技术二、关键技术第七页,共八十八页。网页图片网页图片(tpi
6、n)滚动特效制作滚动特效制作WEB编程基础(jch)1、 JavaScript 简介(简称:JS)JavaScript JavaScript 能做什么?能做什么? JavaScript 被用来验证数据(shj) 在数据被提交到服务器之前,JavaScript 可被用来验证这些数据。JavaScript 可被用来检测访问者的浏览器 JavaScript 可被用来检测访问者的浏览器,并根据所检测到的浏览器,为这个浏览器载入相应的页面。JavaScript 可被用来创建 cookies JavaScript 可被用来存储和取回位于访问者的计算机中的信息。二、关键技术二、关键技术第八页,共八十八页。网
7、页图片滚动网页图片滚动(gndng)特效特效制作制作WEB编程基础(jch)2、 JavaScript 实现 HTML 的 标签用于把 JavaScript 插入 HTML 页面当中(dngzhng)。(1)如何把 JavaScript 放入 HTML 页面上面的代码会在 HTML 页面中产生这样的输出:Hello World!二、关键技术二、关键技术document.write(Hello World!);第九页,共八十八页。网页图片网页图片(tpin)滚动特效制滚动特效制作作WEB编程基础(jch)2、 JavaScript 实现 HTML 的 标签用于把 JavaScript 插入 HT
8、ML 页面当中。(1)如何把 JavaScript 放入 HTML 页面 如果需要把一段 JavaScript 插入 HTML 页面,我们需要使用 标签(同时使用 type 属性来定义脚本语言)。 这样, 和 就可以告诉(o s)浏览器 JavaScript 从何处开始,到何处结束。 document.write 字段是标准的 JavaScript 命令,用来向页面写入输出。 二、关键技术二、关键技术第十页,共八十八页。网页网页(wn y)图片滚动特效制图片滚动特效制作作WEB编程基础(jch)2、 JavaScript 实现 HTML 的 标签用于把 JavaScript 插入(ch r)
9、HTML 页面当中。(1)如何把 JavaScript 放入 HTML 页面 把 document.write 命令输入到 与之间后,浏览器就会把它当作一条 JavaScript 命令来执行。这样浏览器就会向页面写入 Hello World!。注意:注意:如果我们不使用 标签,浏览器就会把 document.write(“Hello World!”) 当作纯文本来处理,也就是说会把这条命令本身写到页面上。二、关键技术二、关键技术第十一页,共八十八页。网页图片滚动特效网页图片滚动特效(txio)制制作作WEB编程基础(jch)2、 JavaScript 实现 HTML 的 标签用于把 JavaS
10、cript 插入 HTML 页面当中。(2)如何与老的浏览器打交道那些不支持 JavaScript 的浏览器会把脚本作为页面的内容来显示(xinsh)。为了防止这种情况发生,我们可以使用这样的 HTML 注释标签:注释行末尾的两个正斜杠是 JavaScript 的注释符号,它会阻止 JavaScript 编译器对这一行的编译。二、关键技术二、关键技术第十二页,共八十八页。网页网页(wn y)图片滚动特效制图片滚动特效制作作WEB编程基础(jch)2、 JavaScript 实现 HTML 的 标签用于把 JavaScript 插入 HTML 页面当中。(3) JavaScript放置 当页面载
11、入时,会执行(zhxng)位于 body 部分的 JavaScript。当被调用时,位于 head 部分的 JavaScript 才会被执行。head 部分:包含函数的脚本位于文档的 head 部分。这样我们就可以确保在调用函数前,脚本已经载入了。body 部分:执行位于 body 部分的脚本。外部 JavaScript:二、关键技术二、关键技术第十三页,共八十八页。网页图片滚动网页图片滚动(gndng)特效制特效制作作WEB编程基础(jch)3、 JavaScript 语句JavaScript 是由浏览器执行的语句序列(xli)。JavaScript 语句是发给浏览器的命令。这些命令的作用是
12、告诉浏览器要做的事情。(1) JavaScript 代码JavaScript 代码是 JavaScript 语句的序列。浏览器按照编写顺序依次执行每条语句。本例向网页输出一个标题:二、关键技术二、关键技术document.write(This is a header);第十四页,共八十八页。网页图片滚动网页图片滚动(gndng)特效制作特效制作WEB编程基础(jch)3、 JavaScript 语句(2) JavaScript 代码块 JavaScript 可以分批地组合起来。代码块以左花括号开始,以右花括号结束。代码块的作用是一并地执行语句序列。本例向网页输出(shch)一个标题: 上例的用
13、处不大。仅仅演示了代码块的使用而已。通常,代码块用于在函数或条件语句中把若干语句组合起来(比方说如果条件满足,就可以执行这个语句分组了)。二、关键技术二、关键技术document.write(This is a header);第十五页,共八十八页。网页网页(wn y)图片滚动特效制图片滚动特效制作作WEB编程基础(jch)4、 JavaScript 注释 JavaScript 注释可用于增强代码的可读性。可以添加注释来对 JavaScript 进行(jnxng)解释,或者提高其可读性。(1)JavaScript 单行注释 单行的注释以 / 开始。二、关键技术二、关键技术/ 这行代码输出标题:
14、document.write(This is a header);第十六页,共八十八页。网页图片滚动特效网页图片滚动特效(txio)制制作作WEB编程基础(jch)4、 JavaScript 注释(zhsh)(2)JavaScript 多行注释 多行注释以 /* 开头,以 */ 结尾。二、关键技术二、关键技术/*下面的代码将输出一个标题和两个段落*/document.write(This is a header);document.write(This is a paragraph);document.write(This is another paragraph);第十七页,共八十八页。网页
15、图片滚动特效网页图片滚动特效(txio)制制作作WEB编程基础(jch)4、 JavaScript 注释(3)使用注释来防止执行 使用单行或者多行注释可以设置不执行相应的JavaScript语句。(4)在行末使用注释 可以在行末使用单行注释来对JavaScript进行(jnxng)解释。二、关键技术二、关键技术document.write(Hello); / 输出 Hello document.write(World); / 输出 World 第十八页,共八十八页。网页图片滚动网页图片滚动(gndng)特效制特效制作作WEB编程基础(jch)5、 JavaScript 变量 正如代数一样,Ja
16、vaScript 变量用于保存值或表达式。 可以给变量起一个简短名称(mngchng),比如 x,或者更有描述性的名称,比如 length。 JavaScript 变量也可以保存文本值,比如 carname=Volvo。JavaScript JavaScript 变量名称的规则:变量名称的规则:变量对大小写敏感(y 和 Y 是两个不同的变量)变量必须以字母或下划线开始注释:由于 JavaScript 对大小写敏感,变量名也对大小写敏感。二、关键技术二、关键技术第十九页,共八十八页。网页网页(wn y)图片滚动特效制作图片滚动特效制作WEB编程基础(jch)5、 JavaScript 变量(1)
17、声明(创建) JavaScript 变量 在 JavaScript 中创建变量经常被称为“声明”变量。可以通过 var 语句来声明 JavaScript 变量: 在以上声明之后,变量并没有值,不过(bgu)可以在声明它们时向变量赋值:注释:在为变量赋文本值时,请为该值加引号。二、关键技术二、关键技术var x;var carname;var x=5;var carname=Volvo;第二十页,共八十八页。网页图片滚动特效网页图片滚动特效(txio)制作制作WEB编程基础(jch)5、 JavaScript 变量(2)向 JavaScript 变量赋值 通过赋值语句(yj)向 JavaScri
18、pt 变量赋值:变量名在 = 符号的左边,而需要向变量赋的值在 = 的右侧。在以上语句执行后,变量 x 中保存的值是 5,而 carname 的值是 Volvo。二、关键技术二、关键技术x=5;carname=Volvo;第二十一页,共八十八页。网页网页(wn y)图片滚动特效制图片滚动特效制作作WEB编程基础(jch)5、 JavaScript 变量(3)向未声明的 JavaScript 变量赋值 如果您所赋值的变量还未进行过声明,该变量会自动声明。这些(zhxi)语句:与这些语句的效果相同:二、关键技术二、关键技术x=5;carname=Volvo; var x=5;var carname
19、=Volvo; 第二十二页,共八十八页。网页图片网页图片(tpin)滚动特效制滚动特效制作作WEB编程基础(jch)5、 JavaScript 变量(4)重新声明 JavaScript 变量 如果您再次声明了 JavaScript 变量,该变量也不会丢失(dis)其原始值。 在以上语句执行后,变量 x 的值仍然是 5。在重新声明该变量时,x 的值不会被重置或清除。二、关键技术二、关键技术var x=5;var x; 第二十三页,共八十八页。网页网页(wn y)图片滚动特效制作图片滚动特效制作WEB编程基础(jch)5、 JavaScript 变量(binling)(5)JavaScript 算
20、数 正如代数一样,您可以使用 JavaScript 变量来做算术:6、 JavaScript 运算符运算符 = 用于赋值。运算符 + 用于加值。二、关键技术二、关键技术y=x-5;z=y+5; 第二十四页,共八十八页。网页网页(wn y)图片滚动特效制图片滚动特效制作作WEB编程基础(jch)6、 JavaScript 运算符运算符 = 用于给 JavaScript 变量赋值。算术运算符 + 用于把值加起来。在以上语句(yj)执行后,x 的值是 7。(1)JavaScript 算术运算符算术运算符用于执行变量与/或值之间的算术运算。给定 y=5,下面的表格解释了这些算术运算符:二、关键技术二、
21、关键技术y=5;z=2;x=y+z; 第二十五页,共八十八页。网页网页(wn y)图片滚动特效制图片滚动特效制作作WEB编程基础(jch)6、 JavaScript 运算符(1)JavaScript 算术(sunsh)运算符 二、关键技术二、关键技术运算符运算符描述描述例子例子结果结果+加x=y+2 x=7 -减x=y-2x=3*乘x=y*2x=10/除x=y/2x=2.5%求余数 (保留整数)x=y%2x=1+累加x=+yx=6 -递减x=-yx=4 第二十六页,共八十八页。网页图片滚动特效网页图片滚动特效(txio)制作制作WEB编程基础(jch)6、 JavaScript 运算符(2)J
22、avaScript赋值运算符赋值运算符用于给 JavaScript 变量赋值。给定(i dn) x=10 和 y=5,下面的表格解释了赋值运算符: 二、关键技术二、关键技术运算符运算符例子例子等价于等价于结果结果=x=y x=5+=x+=yx=x+yx=15-=x-=yx=x-yx=5*=x*=yx=x*yx=50/=x/=yx=x/yx=2%=x%=yx=x%yx=0第二十七页,共八十八页。网页图片滚动特效网页图片滚动特效(txio)制作制作WEB编程基础(jch)6、 JavaScript 运算符(3)JavaScript比较和逻辑运算符 比较和逻辑运算符用于测试 true 或 false
23、。 1)比较运算符比较运算符在逻辑语句中使用,以测定变量或值是否相等。给定 x=5,下面(xi mian)的表格解释了比较运算符: 二、关键技术二、关键技术第二十八页,共八十八页。网页图片滚动网页图片滚动(gndng)特效特效制作制作WEB编程基础(jch)6、 JavaScript 运算符(3)JavaScript比较和逻辑运算符 1)比较运算符 如何使用?如何使用? 可以在条件语句中使用比较运算符对值进行比较,然后(rnhu)根据结果来采取行动:if (age18) document.write(Too young); 二、关键技术二、关键技术第二十九页,共八十八页。网页网页(wn y)图
24、片滚动特效制图片滚动特效制作作WEB编程基础(jch)6、 JavaScript 运算符(3)JavaScript比较和逻辑(lu j)运算符 2)逻辑运算符逻辑运算符用于测定变量或值之间的逻辑。给定 x=6 以及 y=3,下表解释了逻辑运算符: 二、关键技术二、关键技术运算符运算符描述描述例子例子&and(x 1) 为 true|or(x=5 | y=5) 为 false!not!(x=y) 为 true第三十页,共八十八页。网页网页(wn y)图片滚动特效制作图片滚动特效制作WEB编程基础(jch)6、 JavaScript 运算符(3)JavaScript比较和逻辑(lu j)运算符 3
25、)条件运算符JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。语法语法 例子例子 如果变量 visitor 中的值是 “PRES”,则向变量 greeting 赋值 “Dear President ”,否则赋值 “Dear”。二、关键技术二、关键技术variablename=(condition)?value1:value2 greeting=(visitor=PRES)?Dear President :Dear ;第三十一页,共八十八页。网页图片滚动网页图片滚动(gndng)特效制特效制作作WEB编程基础(jch)7、 JavaScript If.Else 语句JavaS
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 最新Web编程基础CSS、JavaScript、jQuery第二部分 JavaScript共88张PPT课件 最新 Web 编程 基础 CSS JavaScript jQuery 第二 部分 88
链接地址:https://www.taowenge.com/p-34220633.html
限制150内