Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)任务18 JavaScript的应用
合集下载
Web前端开发任务驱动式教程HTML5CSS3JavaScript任务9复合选择器通配符选择器课件
源自图1图2图3
图4
任务小结
交集选 择器
并集选 择器
后代选 择器
通配符 选择器
同时应 用多个 样式
课后实训
设计并制作“杭州西湖”景点网页，效果如图所示。
谢谢观看
两个选择器之间不能有空格，必须连续书写。
<p id="red">这个段落是红色。</p> <p class="green">这个段落是绿色。</p>
p#red p.green
知识准备
示例：交集选择器的使用
<style type="text/css"> p{ color: #F00; } .p1 { color: #0F0; } h2.p1 { color: #00F; }
</body>
知识准备
1. 复合选择器
后代：某标记内嵌套的所有子元素，都称为该标记的后代。 后代选择器：把外层的标记写在前面，内层的标记写在后面，之间
用空格分隔。 <h1>热烈庆祝<span>第三十届</span>牡丹文化节召开</h1> h1 span
知识准备
示例：后代选择器的使用
<style type="text/css"> span { text-decoration: underline; } h2 span { color: #F00; } h3 span { color: #00F; } .uu li ul li { font-weight: bold; color: #00F; }
</style>
图4
任务小结
交集选 择器
并集选 择器
后代选 择器
通配符 选择器
同时应 用多个 样式
课后实训
设计并制作“杭州西湖”景点网页，效果如图所示。
谢谢观看
两个选择器之间不能有空格，必须连续书写。
<p id="red">这个段落是红色。</p> <p class="green">这个段落是绿色。</p>
p#red p.green
知识准备
示例：交集选择器的使用
<style type="text/css"> p{ color: #F00; } .p1 { color: #0F0; } h2.p1 { color: #00F; }
</body>
知识准备
1. 复合选择器
后代：某标记内嵌套的所有子元素，都称为该标记的后代。 后代选择器：把外层的标记写在前面，内层的标记写在后面，之间
用空格分隔。 <h1>热烈庆祝<span>第三十届</span>牡丹文化节召开</h1> h1 span
知识准备
示例：后代选择器的使用
<style type="text/css"> span { text-decoration: underline; } h2 span { color: #F00; } h3 span { color: #00F; } .uu li ul li { font-weight: bold; color: #00F; }
</style>
web前端开发课程任务
任务 1：HTML 和 CSS 基础•学习 HTML 和 CSS 的基本概念。
•了解 HTML 元素、属性和标签。
•学习如何使用 CSS 样式来美化 HTML 元素。
•练习创建简单的 HTML 和 CSS 文档。
任务 2：响应式设计•了解响应式设计的概念和重要性。
•学习如何使用媒体查询来创建响应式网站。
•练习创建响应式网站。
任务 3：JavaScript 基础•学习 JavaScript 的基本概念。
•了解 JavaScript 的变量、运算符和函数。
•学习如何使用 JavaScript 来操作 DOM。
•练习编写简单的 JavaScript 脚本。
任务 4：jQuery•了解 jQuery 的概念和好处。
•学习如何使用 jQuery 来选择和操作 DOM 元素。
•学习如何使用 jQuery 来处理事件。
•练习使用 jQuery 来创建动态的网页。
任务 5：AngularJS•了解 AngularJS 的概念和好处。
•学习如何使用 AngularJS 来创建单页应用程序。
•学习如何使用 AngularJS 来管理数据。
•练习使用 AngularJS 来创建动态的网页。
任务 6：React•了解 React 的概念和好处。
•学习如何使用 React 来创建单页应用程序。
•学习如何使用 React 来管理数据。
•练习使用 React 来创建动态的网页。
任务 7：Vue•了解 Vue 的概念和好处。
•学习如何使用 Vue 来创建单页应用程序。
•学习如何使用 Vue 来管理数据。
•练习使用 Vue 来创建动态的网页。
任务 8：项目构建工具•了解项目构建工具的概念和好处。
•学习如何使用 webpack、gulp 或 grunt 等项目构建工具来构建和管理前端项目。
•练习使用项目构建工具来构建前端项目。
任务 9：测试和部署•了解前端测试和部署的概念和重要性。
•学习如何使用单元测试、集成测试和端到端测试来测试前端代码。
《Web前端开发技术——HTML5、CSS3、JavaScript(第3版)》教学大纲
Web前端开发技术(Web客户端编程)学分：3.5 学时：56 (28时理论/28时上机)一、课程的性质、地位与任务《Web前端开发技术》（又名“Web客户端编程”）课程是计算机科学与技术、信息管理与信息系统、软件工程、网络工程、数字媒体、物联网工程等专业的一门专业课程，也是其他计算机相关专业的普及型课程，通过对Web前端三大主流开发技术学习和研究，让学生理解和掌握HTML5、CSS3、JavaScript等脚本语言的相关知识，通过项目实践培养学生开发和设计Web站点的基本操作技能和工作岗位适应能力。
二、课程的教学目标与基本要求本课程教学基本要求是让学生理解Web前端开发与设计的基本原则、Web网站的目录结构定义、主流页面布局方法、导航菜单制作、图文排版、页面交互等方面的基础知识。
掌握网站规划、设计、制作、管理、发布的相关技术及Web前端设计的操作技能；并熟练运用HTML中的文字、链接、列表、表格、表单、图像、多媒体、框架标记及属性设计出框架网页、表格与表单网页、多媒体动态网页；掌握使用DIV+CSS结合技术进行网页布局的基本方法。
掌握JavaScript脚本语言的基本语法知识，HTML中JavaScript程序的嵌入方法，理解对象的概念及使用JavaScript来进行开发、维护、管理和设置Web应用程序；掌握综合网站设计和发布的基本流程和方法。
本课程的教学目标是让学生理解HTML5、CSS3、JavaScript三大脚本语言的基本语法，掌握常用的Web页面布局技术，理解并熟练应用JavaScript常用的对象的属性与方法，熟练地使用DOM 技术编写页面交互的客户端程序，通过项目实训，培养学生Web页面布局和页面交互设计初步能力。
三、课程内容（重点△，难点★）1 Web前端开发技术综述1.1 Web概述1.1.1 了解Web起源1.1.2 理解Web特点1.1.3理解Web工作原理1.1.4 掌握Web相关概念，掌握URL构成、Web服务器、超链接基本概念。
v3_Chap15-Web前端开发技术—HTML5、CSS3、JavaScript(第3版)-储久良
特定对象特定事件的指定
<script type=“text/javascript”for=“对象” event=“事件”> //事件处理程序代码
</script>
教育部高等学校软件工程专业教学指导委员会规划教材
第15章 JavaScript事件分析
Page: 7
15.1.3 事件处理-静态指定
Web前端开发技术-HTML5、CSS3、JavaScript
function testInfo(mes) {alert(mes);} </script> <body> <h2>HTML属性的事件处理器举例</h2> <input type="button" value="直接通过JS语句输出信息" onclick="alert('单击按钮，直接输出信 息')"> <input type="button" value="通过函数输出信息" onclick="testInfo('单击按钮，调用函数输出信 息')"> </body>
当鼠标指针悬停于某元素之上时执行JS代码 当鼠标按钮被松开时执行JS代码 当键盘被按下时执行JS代码 当键盘被按下后又松开时执行JS代码 当键盘被松开时执行JS代码
第15章 JavaScript事件分析
Page: 6
Web前端开发技术-HTML5、Ceb 前端开发工程师应掌握以下内容： 了解JavaScript事件类型。 理解事件发生时事件处理的三种方式。 学会利用表单的提交及重置事件对表单的数据进行校验。 理解鼠标事件中的鼠标单击及鼠标移动事件。 掌握常用的键盘及窗口事件。
<script type=“text/javascript”for=“对象” event=“事件”> //事件处理程序代码
</script>
教育部高等学校软件工程专业教学指导委员会规划教材
第15章 JavaScript事件分析
Page: 7
15.1.3 事件处理-静态指定
Web前端开发技术-HTML5、CSS3、JavaScript
function testInfo(mes) {alert(mes);} </script> <body> <h2>HTML属性的事件处理器举例</h2> <input type="button" value="直接通过JS语句输出信息" onclick="alert('单击按钮，直接输出信 息')"> <input type="button" value="通过函数输出信息" onclick="testInfo('单击按钮，调用函数输出信 息')"> </body>
当鼠标指针悬停于某元素之上时执行JS代码 当鼠标按钮被松开时执行JS代码 当键盘被按下时执行JS代码 当键盘被按下后又松开时执行JS代码 当键盘被松开时执行JS代码
第15章 JavaScript事件分析
Page: 6
Web前端开发技术-HTML5、Ceb 前端开发工程师应掌握以下内容： 了解JavaScript事件类型。 理解事件发生时事件处理的三种方式。 学会利用表单的提交及重置事件对表单的数据进行校验。 理解鼠标事件中的鼠标单击及鼠标移动事件。 掌握常用的键盘及窗口事件。
Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)任务18 JavaScript的应用
任务目标
强化训练——制作焦点图广告
知识准备
1. JavaScript简介
JavaScript：Web页面中的一种脚本编程语言，也是一种通用的、跨平 台的、基于对象和事件驱动并具有安全性的脚本语言。
特点：不需要编译，直接嵌入在HTML页面中，实现实时的、动态的、 可交互的网页效果。
作用：表单验证、网页动画效果、焦点图切换效果、浮动广告窗口、 旋转文字特效。
“18-2.js” 文件代码：
// JavaScript Document document.write("此处为js文件代码。"); //输出语句。
提示：外部脚本不能包含 <script> 标签。
知识准备
1. JavaScript简介
JavaScript基本语法
执行顺序：JavaScript程序按照在HTML文件中出现的顺序逐行执行。
static throws
void
case debugger
enum finally implements
let private super transient volatile
知识准备
2. JavaScript语言基础
标识符：用来命名变量和函数。 命名规则：
第一个字符必须是字母、下划线（_）或美元符号（$） 第一个字符其后的字符可以是字母、数字、下划线或美元符号 标识符不能和JavaScript中的关键字同名 不能包含空格等特殊符号 合法：i、user_name、_name、$name、n1 不合法：1a、m n、55、long
document.write("此处为JavaScript代码。"); //输出语句。 </script> </head> <body> <p>此处为网页内容。</p> </body> </html>
Web前端开发任务驱动式教程HTML5CSS3JavaScript任务17视频与音频课件
知识准备
2. 嵌入音频
ቤተ መጻሕፍቲ ባይዱ入音频：<audio src="音频文件路径" controls="controls"></audio>
属性 src controls autoplay width height loop preload
属性值 url地址 controls autoplay 像素值 像素值
知识准备
3. source标签
source标签：没有一种视频格式或音频格式让所有的浏览器都支持， source标签用于指定多个备用的不同格式文件的路径，浏览器将使用 第一个可识别的格式。
<vauiddeio wcoindtrho=ls"=32"c0o"nhteroiglsh"t>="240" controls="controls"> <source src="msoonvgi.eo.gogg"g"tytpyep=e"=a"uvdidioe/oo/gogg"g>"> <source src="msoonvgi.em.mp3p"4"tytpyep=e"=a"uvdidioe/om/mpepg4"">> 您的浏览器不支持该播放文件。 <<//vaiuddeioo>>
loop
preload
含义说明 要播放音频的URL。 如果出现该属性，则向用户显示控件，比如播放按钮。 如果出现该属性，则音频在就绪后马上播放。 设置音频播放器的宽度。 设置音频播放器的高度。 如果出现该属性，则当音频文件完成播放后再次开始播放。 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)任务11 元素的浮动
的。 非浮动元素会忽略掉它前面的浮动元素，取代其前面浮动元素的
位置。
知识准备
示例：元素的浮动
<style type="text/css"> *{ margin: 0px; padding: 0px; } div { width: 150px; height: 50px; } #box1 { background-color: red; float: lreigfth;t}; } #box2 { background-color: blue; float: lreigfth;t}; } #box3 { background-color: green; float: lreigfth;t}; }
</style>
<body> <div id="box1">box1</div> <div id="box2">box2</div> <div id="box3">box3</div>
</body>
知识准备
5. 清除浮动
清除浮动：避免浮动元素对其他元素产生的影响 语法规则：选择器{clear:属性值;} 属性有三个值： left：清除左浮动的影响 right：清除右浮动的影响 both：同时清除左右两侧浮动的影响
除左、右两侧浮动的影响。</p> </div>
</body>
知识准备
示例：清除特殊浮动
<style type="text/css"> .father { background-color: #c0c0c0; border: 1px dashed #666; clear:left; } .box1,.box2,.box3 { line-height: 40px; background-color: #9F6; margin: 15px; height: 40px; padding: 0px 10px; border: 1px solid #999; float: left; }
位置。
知识准备
示例：元素的浮动
<style type="text/css"> *{ margin: 0px; padding: 0px; } div { width: 150px; height: 50px; } #box1 { background-color: red; float: lreigfth;t}; } #box2 { background-color: blue; float: lreigfth;t}; } #box3 { background-color: green; float: lreigfth;t}; }
</style>
<body> <div id="box1">box1</div> <div id="box2">box2</div> <div id="box3">box3</div>
</body>
知识准备
5. 清除浮动
清除浮动：避免浮动元素对其他元素产生的影响 语法规则：选择器{clear:属性值;} 属性有三个值： left：清除左浮动的影响 right：清除右浮动的影响 both：同时清除左右两侧浮动的影响
除左、右两侧浮动的影响。</p> </div>
</body>
知识准备
示例：清除特殊浮动
<style type="text/css"> .father { background-color: #c0c0c0; border: 1px dashed #666; clear:left; } .box1,.box2,.box3 { line-height: 40px; background-color: #9F6; margin: 15px; height: 40px; padding: 0px 10px; border: 1px solid #999; float: left; }
Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)任务10 盒子模型及应用
</style>
<body> <div id="box"> CSS 将 HTML 页 面 中 的 每 一 个 元 素 看 成
是一个矩形盒子， 占据一定的页面空间。 一 个HTML页面由很多这样的盒子组成，这些 盒子之间会相互影响，因此掌握盒子模型需 要从两方面来理解：一是 一个独立的盒子的 内部结构；二是多个盒子之间的相互关系。
参数1：像素值/百分比，圆角的水平半径 参数2：像素值/百分比，圆角的垂直半径 如果参数2省略，则参数2=参数1 border-radius：50px/30px； /*4个圆角水平半径为50px，垂直半径为30px*/ border-radius：50px； /*4个圆角水平半径为50px，垂直半径为50px*/
框为绿色*/ }
</style>
<body> <div id="box1">设置四边的边框颜色为红色</div>
<p></p> <div id="box2">设置上下边框为红色，左右边框为 蓝色</div>
<p></p> <div id="box3">设置上边框为红色，左右边框为蓝 色，下边框为绿色</div>
</style>
<body> <div id="box1">设置四边的不同属性</div> <p></p> <div id="box2">设置四边的相同属性</div>
<body> <div id="box"> CSS 将 HTML 页 面 中 的 每 一 个 元 素 看 成
是一个矩形盒子， 占据一定的页面空间。 一 个HTML页面由很多这样的盒子组成，这些 盒子之间会相互影响，因此掌握盒子模型需 要从两方面来理解：一是 一个独立的盒子的 内部结构；二是多个盒子之间的相互关系。
参数1：像素值/百分比，圆角的水平半径 参数2：像素值/百分比，圆角的垂直半径 如果参数2省略，则参数2=参数1 border-radius：50px/30px； /*4个圆角水平半径为50px，垂直半径为30px*/ border-radius：50px； /*4个圆角水平半径为50px，垂直半径为50px*/
框为绿色*/ }
</style>
<body> <div id="box1">设置四边的边框颜色为红色</div>
<p></p> <div id="box2">设置上下边框为红色，左右边框为 蓝色</div>
<p></p> <div id="box3">设置上边框为红色，左右边框为蓝 色，下边框为绿色</div>
</style>
<body> <div id="box1">设置四边的不同属性</div> <p></p> <div id="box2">设置四边的相同属性</div>
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
任务目标
强化训练——制作焦点图广告
知识准备
1. JavaScript简介
JavaScript：Web页面中的一种脚本编程语言，也是一种通用的、跨平 台的、基于对象和事件驱动并具有安全性的脚本语言。
特点：不需要编译，直接嵌入在HTML页面中，实现实时的、动态的、 可交互的网页效果。
作用：表单验证、网页动画效果、焦点图切换效果、浮动广告窗口、 旋转文字特效。
知识准备
2. JavaScript语言基础
变量的声明与赋值：var 变量名; 建议：变量先声明，后使用
var a,b,c; //同时声明a，b，c三个变量。 var a=1,b=2,c=3; //同时声明a，b，c三个变量，并分别对其进行
初始化赋值。
知识准备
3. JavaScript函数
“18-2.js” 文件代码：
// JavaScript Document document.write("此处为js文件代码。"); //输出语句。
提示：外部脚本不能包含 <script> 标签。
知识准备
ห้องสมุดไป่ตู้
1. JavaScript简介
JavaScript基本语法
执行顺序：JavaScript程序按照在HTML文件中出现的顺序逐行执行。
extends function instanceof
new return
this typeof yield
break const double false goto
int null short throw var
byte continue
else final
if interface package
static throws
void
case debugger
enum finally implements
let private super transient volatile
知识准备
2. JavaScript语言基础
标识符：用来命名变量和函数。 命名规则：
第一个字符必须是字母、下划线（_）或美元符号（$） 第一个字符其后的字符可以是字母、数字、下划线或美元符号 标识符不能和JavaScript中的关键字同名 不能包含空格等特殊符号 合法：i、user_name、_name、$name、n1 不合法：1a、m n、55、long
function show() { alert("欢迎学习JavaScript！");
//alert()方法可以弹出警告框 } </script> </head> <body> <!--鼠标点击事件调用函数show()--> <input type="button" value="点击我" onClick="show()"> </body> </html>
第 八 单 元 J AVA S C R I P T 基 础
任务18 JAVASCRIPT的 应用
学习目标
掌握
JavaScript的基本语法 JavaScript的语言基础 JavaScript的函数使用
学习目标
了解:
1. 事件及事件驱动 2. JavaScript对象
任务目标
实战演练——制作商品精选模块
大小写敏感：严格区分字母大小写。如：myname和myName是两个 不同的变量。
每行语句结尾的分号可有可无：为了规范，应以分号结束。
注释：
//单行注释文本 /*单行注释文本*/ /*多行注释文本
多行注释文本*/
知识准备
2. JavaScript语言基础
关键字：关键字不能作为变量名和函数名使用。
abstract catch default eval float import long
protected switch true while
arguments char delete export for in native public
synchronized try with
boolean class do
知识准备
1. JavaScript简介
JavaScript引入方式一：内嵌式 <head> <script>
//此处为JavaScript代码 </script> </head>
知识准备
示例：内嵌式引入
<!doctype html> <html> <head> <meta charset="utf-8"> <title>内嵌式引入</title> <script>
函数：计算机程序中由多条语句组成的逻辑单元
定义：
<script>
function 函数名([参数1,参数2,……]){
函数体
[return 表达式;] }
注意：关键字 function 必须小写
</script>
调用：函数名([参数1,参数2,……])
知识准备
示例：函数的调用
<!doctype html> <html> <head> <meta charset="utf-8"> <title>函数的调用</title> <script>
知识准备
示例：外链式引入
<!doctype html> <html> <head> <meta charset="utf-8"> <title>外链式引入</title> <script src="18-2.js"></script> </head> <body> <p>此处为网页内容。</p> </body> </html>
知识准备
2. JavaScript语言基础
常量：程序运行时，值不能改变的量为 常量（Constant）。
语法格式：const 常量名:数据类型=值;
知识准备
2. JavaScript语言基础
变量：程序中一个已经命名的存储单元，为数据操作提供存放信息 的容器。
命名规则： 必须以字母或下划线开头，中间可以是数字、字母或下划线 变量名不能包含空格、加、减等符号 不能使用JavaScript中的关键字 JavaScript的变量名严格区分大小写，如myname不等同myName
document.write("此处为JavaScript代码。"); //输出语句。 </script> </head> <body> <p>此处为网页内容。</p> </body> </html>
知识准备
1. JavaScript简介
JavaScript引入方式二：外链式 <head> <script src="js文件的路径"></script> </head>