Web前端开发案例教程——HTML+CSS+JavaScript (8)
JavaScript基础
学习目标
了解JavaScrip的历史及特点 掌握JavaScript常用的数据类型 掌握JavaScript变量的定义 掌握JavaScript中的操作符及表达式 掌握JavaScript中的分支、迭代结构 掌握JavaScript中内置函数的使用 掌握JavaScript的函数定义及使用
test.js
document.write("Hello World！");
实例8-2：通过<script>标签引用JS文件
结合事件编写简短javascript脚本
…… <body> <input name="btn" type="button" value="弹出消息框" onclick="javascript:alert('欢迎你');"/> </body> ……
/* 使用for循环运行“document.write("<h3>Hello World</h3>");”5次 使用document.write在页面上输出“Hello World” (条件) 多分支语句 switch { //JavaScript ; switch (while 表达式代码 ) 循环语句 for 、 {} case 常量1 : else JavaScript 语句 1; ) for(初始化 ; 条件 ; 增量 { break; { //JavaScript case 代码 常量; 2 : ; JavaScript 代码 } JavaScript语句2; } break; ... 条件) while( { default : JavaScript 3; JavaScript 代码语句 ; } }
实例8-3：简短缩写方式
脚本执行原理
2
发送请求 IE
客户端请求包含JS的页面
1
浏览器输入
IE
解析HTML标签和 JavaScript脚本
应用服务器
返回响应
3
从服务器端下载含 JavaScript的页面
JavaScript基础语法
变量 数据类型 运算符号
核心语法
控制语句
输入/输出
注释
语法约定
变量的声明和赋值
boolean string number null
typeof
typeof运算符返回值如下：
undefined：变量被声明后，但未被赋值 string：用单引号或双引号来声明的字符串 boolean：true或false number：整数或浮点数
object：javascript中的对象、数组和null
实例8-1：通过<script>标签嵌入Javascript
外部JS文件
主要作用是代码重用，可以将一些通用的JS函数在多个HTML文档之间实现共享，在减少代 码冗余的同时也便于修改。 8-2.html
…… <script type="text/javascript" src="test.js"></script> ……
实例8-4：简短缩写方式
运算符号
类型
算术运算符 赋值运算符 比较运算符 逻辑运算符 + = > && < || >= ! <= == != * / %
运算符
++ --
注释
单行注释以 // 开始，以行末结束，例如：
alert("恭喜你！注册成功"); //在页同上弹出注册成功的提示框
多行注释以 /* 开始，以 */ 结束，符号 /*…… */ 指示 中间的语句是该程序中的注释。例如：
利用任何编辑器（如Dreamweaver或记事本）创建HTML文档。 在页面中通过<script>标签嵌入JavaScript代码。 将HTML文档保存为扩展名是“.html”的文件，然后使用浏览器可以查看该网页 JavaScript的运行效果。
…… <script language="javascript"> document.write("Hello World！"); </script> ……
…… var oper1 = prompt('请输入第一个数',''); var oper2 = prompt('请输入第二个数',''); var maxNum = oper1; var minNum = oper2; if(oper2 > oper1){ maxNum = oper2; minNum = oper1; } document.write('最大值为:'+maxNum); document.write('<br/>') document.write('最小值为:'+minNum); ……
弱类型语言
基于对象 事件驱动 跨平台性
8.1.2 JavaScript基本结构 JavaScript脚本的基本结构如下
<script language=”javascript”> JavaScript 语句 </script>
• • •
编写JavaScript的步骤如下：
8.1 JavaScript简介
JavaScript是一种基于对象和事件驱动的重要脚本语言， 用于创建具有动态效果、实现人机交互的网页。 JavaScript的功能十分强大，可以实现多种功能，如表单 验证、动态特效等。
8.1.1 JavaScript语言特点 嵌套在HTML中 解释执行
…… var width,height=10,name="rose"; var arrlist=new Date(); document.write(typeof(width)+"<br>"); document.write(typeof(height)+"<br>"); document.write(typeof(name)+"<br>"); ……
先声明变量再赋值
var width;
width = 4;
var － 用于声明变量的关键字 width － 变量名
同时声明和赋值变量
var catName= “小新”; var x, y, z = 10;
不声明直接赋值
Width=5;
数据类型
typeof检测变量的返回值 数据类型
undefined
Web前端开发案例教程——HTML+CSS+JavaScript (5)
实例5-2：border属性
padding内边距的设置
边框确定后，一般需设置边框与内容直接的距离，以便精确控制内容在盒子中的位置。内 边距是不可见的盒子组成部分。
…… #all{width:360px; height:260px; margin:0px auto; padding:25px; background-color:#ccc;} #a,#b,#c,#d{width:160px; height:50px; border:1px solid #000; background-color:#eee;} p{width:80px; height:30px; padding-top:15px; background-color:red;} #a{padding-left:30px;} ……
实例5-8：div元素的浮动
典型的DIV+CSS布局
典型的网页布局，要求有上下4行区域，分别用做广告区、导航区、主体区和版权信息去。 主体区又分为左右2个大区，左区域用于文章列表，右区域用于8个主体内容区。
* {margin:0px; padding:0px; } #top,#nav,#mid,#footer{width:500px; margin:0px auto;} #top{height:80px; background-color:#ddd;} #nav{height:25px; background-color:#fc0;} #mid{height:300px;} #left{width:98px; height:298px; border:1px solid #999; float:left; background-color:#ddd;} #right{height:298px; background-color:#ccc;} .content{width:196px; height:148px; background-color:#c00; border:1px solid #999; float:left;} #content2{background-color:#f60;} #footer{height:80px; background-color:#fc0;}
Web前端开发案例教程(HTML5 CSS3)第2版 任务8 制作学生信息注册表单
8.2.3 表单控件
在表用单户中登通录常表包单含中一包 括个两或个多文个本表框单和控两件个。 命令按钮控件。
8.2.3 பைடு நூலகம்单控件
<input>控件
表单中最为核心的是<input>标记，使用<input>标记可以定义很多 控件，譬如，文本框、单选按钮、复选框、提交按钮、重置按钮等等。
格式：<input type="控件类型" />
8.2.2 表单标记
4. autocomplete属性
用于指定表单是否有自动完成功能。所谓“自动完成”，是指将表单 控件输入的内容记录下来，当再次输入时，会将输入的历史记录显示在一 个下拉列表中，以实现自动完成输入。该属性的取值有on和off，当为on 时，表示有自动完成功能，否则没有。该属性是HTML5的新增属性。
8.2.1 认识表单
• 表单是允许浏览者进行输入的区域，可以使用表单从客户端收集 信息。
• 浏览者在表单中输入信息，然后将这些信息提交给网站服务器， 服务器中的应用程序会对这些信息进行处理并响应，这样就完成 了浏览者和网站服务器之间的交互。
• HTML5新增了很多表单控件，完善了表单的功能，新特性提供 了更好的用户体验和输入控制。
8.2.3 表单控件
<input>控件
• <input />标记为单标记，type属性为其最基本的属性，其取值 有多种，用于指定不同的控件类型。
8.2.3 表单控件
<input>控件
需要注意的是，在HTML5提供了 不同输入类型的输入框，比如 email、url等在提交时，自动验 证输入的内容是否符合要求，不 符合要求时会有错误提示。
《HTML+CSS+JavaScript网页制作案例教程》课程教学Design
传智播客《HTML+CSS+JavaScript网页制作案例教程》教学设计课程名称：HTML+CSS+JavaScript网页制作案例教程授课年级：2015年级授课学期：2015学年第二学期教师姓名：某某老师1201 年月日课题名称第5章列表与超链接计划课时6课时内容分析通过第4章盒子模型的学习，已经很容易对网页做一个简单的结构划分。
但是一个网站由多个网页构成，每个网页上都有大量的信息，要想使网页中的信息排列有序，条理清晰，并且网页与网页之间有一定的联系，就需要使用列表和超链接。
本章将对列表标记、超链接标记以及CSS控制列表和超链接的样式进行详细讲解。
教学目标●掌握无序、有序及定义列表的使用，可以制作常见的网页列表模块；●掌握超链接标记的使用，能够使用超链接定义网页元素；●掌握CSS伪类，会使用CSS伪类实现超链接特效；重点及措施教学重点：无序列表、有序列表、定义列表、超链接、链接伪类、锚点链接。
措施：通过上机操作加强学习和补充案例进行巩固。
难点及措施教学难点：有序列表、定义列表、链接伪类。
措施：通过上机操作加强学习和补充案例进行巩固。
教学方式教学采用教师课堂讲授为主，使用教学PPT讲解。
教学过程第一课时（制作“精美电商悬浮框”，讲解无序列表、有序列表）复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习第四章“CSS盒子模型”的相关知识。
1、一个盒子的宽（width）和高（height）均为300px，左内边距为30px，同时盒子有3px的边框，请问这个盒子的总宽度是多少？（）A、333pxB、366pxC、336pxD、363px答案：C●盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和；●所以，盒子的总宽度= width（300px）+左内边距（30px）+左右边框宽度之和（3px*2） =336px；说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。
《WEB前端开发实用案例教程》单元8 电影音乐网—页面中插入视频、音频、动画
《WEB前端开发实用案例教程》
第八单元 电影音乐网
——页面中插入视频、音频、动画
随着多媒体技术的发展，原先单一的图片、文字网页内容发展为多种媒体集合的表现形式。
在网页中应用多媒体技术，如视频、音频、Flash动画等内容，可以增强网页的表现效果，使网页更生动，激发访问者兴趣。
教学目标：
掌握网页视频、音频、动画的标签元素使用
掌握浏览器对视频文件和音频文件、动画的使用
掌握播放控件的正确使用方法
目录页/Contents 01 任务1 微视频网页展播——视频播放页面02 任务2 婉约配乐页面——页面中播放音乐 任务3 新春寄语页面——页面中插入动画03。
《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服务器、超链接基本概念。
网页设计与制作教程——Web前端开发(第6版)课件第8章 JavaScript对象模型8.2
习题8
3．使用对象的事件编程实现当用户选择下拉菜单的颜色时，文本框的字体颜色跟随改 变，如图8-19所示。
《网页设计与制作教程-Web前端开发（第6版）》 刘瑞新主编 配套资源
自由思想，独立思考
1. HTML Document对象的集合 HTML Document对象的常用集合见表8-14。
8.2 DOM的对象
8.2 DOM的对象
2. HTML Document对象的属性 HTML Document对象的常用属性，见表8-15。
Байду номын сангаас
8.2 DOM的对象
3. HTML Document对象的方法 HTML Document对象的常用方法见表8-16。
8.2 DOM的对象
8.2.3 Node对象 Node（节点）对象代表文档树中的一个节点，Node对象是整个DOM的核心对象。 1. Node对象的属性 每个节点都有其节点的属性，Node对象的常用属性见表8-10。
8.2 DOM的对象
（1）nodeName nodeName属性含有某个节点的名称，其中： 1）元素节点的nodeName值是标签名称。 2）属性节点的nodeName值是属性名称。 3）文本节点的nodeName值永远是#text。 4）文档节点的nodeName值永远是#document。 （2）nodeValue 对于文本节点，nodeValue属性包含文本内容。对于属性节点，nodeValue属 性包含属性值。对于文档节点和元素节点，nodeValue属性不可用。 （3）nodeType nodeType属性返回节点的类型，其中最重要的节点类型见表8-11。
8.2 DOM的对象
8.2.6 HTML Element对象
HTML+CSS+JavaScript网页制作(Web前端开发)(第3版)-首页
讲授新课内容
授课过程中穿插提问
辅导学生上机操作实践
认真听讲并思考
思考并回答问题
上机操作完成任务
电脑
投影仪
传奇软件
网络
讨论、思考题、作业：
5-17
部门领导意见：
教研室主任签章：2021年 8 月 31 日
XXXX职业技术学院教案首页
编号：JX/GC7.1-01-JL03
教师姓名
张老师
XXXX职业技术学院教案首页
编号：JX/GC7.1-01-JL03
教师姓名
张老师
部 门
软件与信息学院
课程名称
前端设计与开发
编号
1
适用班级
-班级编号-
课时安排
2学时
教学课型：√理论课 □实验课 □体育课 □习题课 □实训课□实践环境课
教案介质
√纸质√电子
教案篇幅
√打印稿1页 □手写稿__页
√PPT23幅 □有其他电子文件
复习上次课程重点内容
讲授新课内容
授课过程中穿插提问
辅导学生上机操作实践
认真听讲并思考
思考并回答问题
上机操作完成任务
电脑
投影仪
传奇软件
网络
讨论、思考题、作业：
4-11、4-12
部门领导意见：
教研室主任签章：2021年 8 月 31 日
XXXX职业技术学院教案首页
编号：JX/GC7.1-01-JL03
教师姓名
65分钟
10分钟
1、引言
1）简述CSS的引用方法
2）简述基本选择器
3）简述复合选择器
2、CSS基础
1）选择器
伪类和伪元素选择器
《WEB前端开发课件-HTML+CSS+JavaScript》
一门全面的课程，涵盖了 HTML、CSS 和 JavaScript 的基础语法、元素、表单、 图像、视频和音频的处理，以及 CSS 盒模型、定位和浮动的技巧。学习 JavaScript 的基础语法、数据类型、函数和面向对象编程，以及 DOM 操作、 AJAX 技术和 Web 安全与性能优化。
HTML表单
表单元素
• 输入框 • 下拉框 • 单选框 • 复选框
表单验证
• 必填字段 • 格式验证 • 自定义验证规则
提交和处理表单数据
使用服务器端脚本或 JavaScript 进 行表单数据的处理和验证。
HTML图像、视频和音频
图片标签
在网页中插入图片，并设置属性。
视频标签
嵌入视频，支持多种格式。
HTML基础语法
1 结构化标记
使用标签和元素创建网页结 构。
2 文本格式化
使用标题、段落和列表等标 签格式化文本内容。
3 超链接
创建与其他页面或资源的链接。
HTML元素和标签
1
块级元素
div、p、h1 等。
内联元素
2
span、a、img 等。
3
语义化标签
section、header、footer 等。
• 压缩和合并文件 • 浏览器缓存 • 响应式图片
HTTPS和内容安全策 略
使用 HTTPS 和内容安全策略保护 网站安全。
异步请求
使用 AJAX 发送异步请求并处理响 应。
JSON数据
使用 JSON 格式传输和解析数据。
XMLHttpRequest
使用 XMLHttpRequest 对象进行数 据交互。
Web前端开发课件：HTML、CSS、JavaScript基础
2
以及Ajax优势。
学习创建、配置和使用
XMLHttpRequest对象来向服务器请
求数据和响应客户端。
3
响应处理
如何处理服务器的响应，以便更好地 交互和更快地更新页面
网站开发架构和区分前后端处理
开放式Web架构
详细解释开放式Web架构 的概念，包括数据存储和 传输，以及Web资源之间 的交互方式。
SEO基础（搜索引擎优化）
1
了解SEO
基础SEO知识,包括如何从搜做引擎的
搜索引擎优化
2
角度思考网站设计。
通过内容、元数据、链接和用户体验
来优化您的网站，以提高其排名。
3
其他优化技巧
一些其他优化技巧，例如通过社交媒 体和博客网站来引擎流量。
Web安全基础和防范措施
安全问题
所涉及的威胁以及可能感 到担忧的位置。
Web前端开发课件
本课程将涵盖HTML、CSS和JavaScript的基础知识，帮助您入门Web开发。 从基础语法开始，内容丰富、易于理解。
程序员入门指南
编程语言
选择一门适合你的编程语 言并针对该语言的知识进 行学习。
计算机基础
学习计算机基础，包括数 据结构、Байду номын сангаас法、操作系统 和网络基础知识。
实践项目
选择器和操作
使用jQuery选择器来操作 HTML元素，并使用方法来执 行更复杂的操作。
事件处理
jQuery的事件处理器可以进行 更简化你常规的事件处理。
Ajax基础知识、XMLHttpRequest对象的 使用
1
Ajax基础知识
了解什么是Ajax以及为什么要使用它，
XMLHttpRequest对象的使用
Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)任务2 文字与段落排版
属性 alink link vlink text
描述 鼠标点击超链接时的颜色 未访问过的超链接颜色 已访问过的超链接颜色
所有文本的颜色
属性 bgcolor background leftmargin topmargin
描述 网页的背景颜色 网页的背景图像
网页的左边距 网页的上边距
知识准备
示例：利用body的属性设置网页效果
第二单元 HTML5语言基础
任务2 文字与段落排版
学习目标
掌握
标签 标签属性 文本标签 分隔标签 序列标签
学习目标
了解:
文字段落排版的基本规则
任务目标
实战演练——制作科技馆参观须 知页面
强化训练——制作“我家菜馆” 点菜单页面
知识准备
1. HTML5文档格式
<!doctype html> <html> <head> <meta charset="utf-8"> <title>我的网页</title> </head> <body> 我的第一张网页。 </body> </html>
知识准备
4. 分隔标签
换行标签<br>：强制文本换行（但不会在行与行之间留下空行）。一个换 行使用一个<br>，多个换行可以连续使用多个<br>标签。
呈现结果
强调文本 斜体 下标
知识准备
示例：文字修饰综合范例
<!doctype html> <html>
注释标记。用于标注一些便于
<head>