网页设计与制作教程——Web前端开发(第6版)课件第7章 JavaScript语法基础7.2

格式：pptx
大小：242.17 KB
文档页数：11

下载文档原格式

Web前端开发——简单讲解(完整版)PPT演示课件

21
Html语法规则
元素必须被正确地嵌套元素必须被关闭（如<p></p>）、非空标签必须使
用结束标签（<br />）元素必须小写（标签名和属性对大小写敏感）
（<body><a></a></body>）属性值必须加引号（<table
width=“100%”></table>）把所有<和&特殊符号用编码表示，如（>用&gt表示，<用&lt表示）
24
25
<meta http-equiv=“x-ua-compatible” content=“ie=7” /> 使ie8、ie9使用ie7模式显示
    
19
Html
即超文本标记语言或超文本链接标示语言。结构包括头部（head）、主体（body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。
Css
层叠样式表，是一组格式设置规则，用于控制web页面的外观。通过使用css样式设置页面的格式，可将页面的内容与表现形式分离，使html文档代码更加简练，缩短浏览器加载时间。

网页设计与制作教程PPT课件

案例二：企业官网制作
总结词
专业形象塑造
详细描述
企业官网是企业形象的重要组成部分，设计时需注重专业形象的塑造。采用符合企业品牌形象的颜色、字体和布局，以及专业的图片和内容，提升企业形象和可信度。
总结词
用户体验优化
详细描述
企业官网的用户体验至关重要，设计时应注重用户需求和习惯。提供清晰的信息架构、便捷的导航和搜索功能，以及响应式设计，确保用户在不同设备和浏览器上都能获得良好的访问体验。
使用CSS和JavaScript创建一个模态对话框，当用户与页面交互时弹出，并覆盖背景内容。
表单验证
使用JavaScript对表单输入进行验证，确保用户输入的数据符合要求，提高数据质量。
特效制作
淡入淡出效果
使用CSS动画实现元素从透明到不透明或从一种颜色渐变到另一种颜色的效果。
滑动效果
使用CSS或JavaScript实现元素在页面上的滑动效果，如左右滑动、上下滑动等。
本课程将涵盖网页设计理念、HTML、CSS、JavaScript等前端技术，以及响应式设计、网页性能优化等方面的知识，使学员能够独立完成一个精美、高效的网页作品。
学习目标
01
掌握网页设计的基本理念和原则，能够独立设计出符合用户需求的网页。
02
熟悉HTML、CSS、 JavaScript等前端技术，能够熟练地编写网页代码。
外部样式表
通过外部CSS文件引入样式，并在HTML文档中使用`<link>`标
签引入该文件，如`<link rel="stylesheet" type="text/css"
href="styles.css">`

网页设计与制作教程——Web前端开发(第6版)课件第9章 JavaScript事件处理9.3

9.3 mouse事件
常用的鼠标事件见表9-5。
9.3 mouse事件
mouse事件的语法格式有下面三种： HTML中： <element on事件="myScript"> JavaScript中： object.on事件=function(){ myScript }; JavaScript中使用addEventListener()方法： object.addEventListener("事件", myScript, false);
《网页设计与制作教程Web前端开发第6版》刘瑞新主编配套资源
第9章 JavaScript事件处理
9.3 mouse事件
本章介绍JavaScrip的BOM对象和操作，DOM对象和操作。
目录
第9章 JavaScript事件处理 9.1 事件概述 9.2 window事件 9.3 mouse事件 9.4 keyboard事件 9.5 form事件 9.6 事件捕捉与事件冒泡习题9
《网页设计与制作教程Web前端开发第6版》刘瑞新主编配套资源
祝贺你又学完了一节
9.3 mouse事件
9.3.1 click事件【例9-11】本例鼠标单击页面区域，显示鼠标在浏览器中的坐标位置；单击图片弹出一个消息框。本例文件9-11.html在浏览器中显示如图9-8所示。
9.3 mouse事件
9.3.2 dblclick事件【例9-12】本例代码是段落的双击事件，鼠标双击段落文字，将触发事件函数，在段落下面显示“Hello World”。本例文件9-12.html在浏览器中显示如图9-9所示。
9.3 mouse事件
9.3.3 mouseover和mouseout事件 1. mouseover事件

网页设计与制作

第1章网站规划在建立网站之前，需了解网站的开发流程，按照项目管理模式对网站进行必要的规划、开发、测试和发布使用。

一般流程如下：1.建设网站前进行必要的市场分析。

2.明确建设网站的目的及功能定位。

3.制定网站技术解决方案。

4.根据网站的目的确定网站内容、网站结构和网站功能。

5.进行网页设计，并根据技术方案实施网站建设。

6.做出经费预算。

7.网站测试。

8.网站发布及推广。

9.网站维护。

第2章网站基础知识网站（Website），是指在因特网上根据一定的规定，使用HTML等工具制作的用于展示特定内容的相关网页的集合。

网站的组成●域名（Domain Name），是由一串用点分隔的字母组成的Internet上某一台计算机或计算机组的名称。

●空间，常见网站空间有虚拟主机、虚拟空间、独立服务器、VPS。

●程序，即建设与修改网站所使用的编程语言，换成源码就是一堆按一定格式书写的文字和符号。

●网页网页（Web page），是网站中的任意一个页面，通常是HTML格式，文件扩展名为html、或htm、或asp、或aspx、或php、或jsp等。

●基本构成元素：文字、图像、超级链接。

●阅读方式：浏览器。

●类型：以不同的后缀代表不同类型的网页文件。

通常分为静态页面、动态页面。

动态网页（active web page）：指网页内容可根据用户的不同请求从而返回其对应的数据，一般情况下动态网页通过数据库进行架构，一般文件名均以开发语言做后缀，如php、asp等。

也可以说凡是结合了HTML以外的高级程序设计语言和数据库技术进行的网页编程技术生成的网页都是动态网页。

静态网页：指全部由HTML标记页面，页面的内容和显示效果基本不发生变化，所有的内容包含在网页文件中。

一般文件名均以htm、html、shtml等为后缀。

术语WWW（World Wide Web），亦称作“Web”、“WWW”、“'W3'”，中文名字为“万维网”，"环球网"等，常简称为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对象

【完整版】网页设计与制作课程课件

探索响应式网页设计的原理和技巧，学习如何创建适应不同屏幕和设备的网页。
网页排版和布局
深入研究网页排版和布局的原则，包括网格系统、流式布局和固定布局等技术。
图像、音频和视频在网页中的应用
学习如何在网页中嵌入各种媒体文件，创建富媒体的用户体验，提升网页的吸引力。
动态交互效果设计实战
通过实际案例和项目，学习如何使用JavaScript和CSS创建各种动态交互效果。
PHP语言基础
介绍PHP的基本语法、函数和流程控制，学习如何使用PHP开发动态网页。
MVC模式与Web应用程序框架
深入研究MVC模式的原理和应用，介绍常用的Web应用程序框架。
网站发布与维护
了解网站发布的流程和方法，学习如何进行网站的维护和更新。
网站安全和防范策略
探索网站安全的重要性和挑战，学习如何应对常见的安全威胁和攻击。
【完整版】网页设计与制作课程课件
探索网页设计与制作的全过程，从前端开发基础到后端开发基础，通过丰富的案例和实战项目，提升您的技能与知识。
网页设历程以及课程的主要内容和学习目标。
前端开发基础
介绍前端开发的基本概念、技术工具和流程，包括HTML、CSS和JavaScript。
网页性能和优化
深入了解网页性能优化的技术和策略，提高网页的加载速度和用户体验。
前端框架的使用
介绍常见的前端框架，如Bootstrap和Vue.js，学习如何使用框架开发快速高效的网页。
后端开发基础
探索后端开发的基本概念和技术，包括服务器端语言和数据库。
数据库设计和应用
学习数据库的基本原理和设计方法，以及如何使用SQL语言进行数据查询和操作。
HTML语言基础
学习HTML的基本语法和标签，掌握常用标签的用法以及语义化网页的重要性。

网页设计与制作教程——Web前端开发(第6版)课件第7章 JavaScript语法基础7.9

《网页设计与制作教程Web前端开发第6版》刘瑞新主编配套资源
祝贺你又学完了一节
7.9 正则表达式
2. 限定符
例如，定义一个“/[1-9]\d{5}/”正则，然后在字符串str中匹配结果。 var str="201411"; //定义一个字符串 var reg = /[1-9]\d{5}/; //中国大陆邮政编码，含有5个数字的正则 document.write(str.search(reg)); //若符合，则返回0；若不符合，则返回-1。显示0
7.9 正则表达式
7.9.3 正则表达式使用的方法 1. 字符串方法
例如，字符范围可以组合使用，以便设计更灵活的匹配模式。 var str = "abc2 ert4 abe3 abf1 abg7"; //字符串直接量 var reg = /ab[c-g][1-7]/g; //前两个字符为ab，第三个字符为从c到g，第四个字符为1~7的任意数字 document.write(str.match(reg)); //返回数组["abc2","abe3","abf1","abg7"]
7.9 正则表达式
7.9.2 正则表达式的组成 1. 匹配符
7.9 正则表达式
例如，在“/[^0123456789]/g”正则表达式中，将会匹配除了数字以外任意的字符。
var str = '012abc3de45fg6'; //定义一个字符串 var reg = /[^0123456789]/g; document.write(str.match(reg)); //将所有符合正则的字符放进一个数组。显示 a,b,c,d,e,f,g 例如，定义一个“/[^0-9]/”的正则，然后在字符串str中匹配结果。 var str="01r234567x89"; //定义一个字符串 var reg=/[^0-9]/; //检查字符串中是否含有数字以外的字符 document.write(str.search(reg)); //若有数字以外的字符，则返回找到的位置；否则返回-1。显示例如，定义一个年-月-日的正则“/[\d]{4}-[\d]{1,2}(-[\d]{1,2})/”，然后在字符串 str中匹配结果。

【培训课件】网页设计与制作教程

Photodraw Fireworks b、其它图象处理软件
Photoshop Coreldreaw FreeHand 3、动画制作软件
Flash
（三）Internet概述
1、Internet的概念
2、 Internet的起源
3、IP地址和域名
连接在Internet上的电脑，都叫做主机，每台主机都有一个唯一的号码，这便是IP地址。
商业 com
军事 mil
教育 edu
网络机构政府机构
net
gov
非赢利组织 org
四、连接Internet的方式
• 1、拨号连接 • 2、ISDN接入（一线通） • 传输速率：64Kbps或128Kbps • 3、企业级用户的接入技术 • 4、其他的用户级接入技术 • Cable Modem、WebTV、
二、初步认识 Dreamweaver
1、 Dreamweaver的启动 Dreamweaver的安装过程非常简单，一但
成功安装后，就可以在开始菜单找到 Dreamweaver的选项：
二、初步认识 Dreamweaver
2、编辑窗口第一次启动Dreamweaver，首先看到的是
：面板组（又D称工r可e具停a栏m靠浮：w动是e主面aDv板菜reea）单mr：的：wDe在编areva这em辑r4里w的e窗可a新ve以口r增还找功有到能很编多辑很窗多口其的他的的浮绝动大面部板分，功我能们可以根
完成后，回到站点窗口，就可以看到如下类似的画面：
三、制作前的准备工作——定义网站
三、制作前的准备工作——定义网站
• 可以看到，“我的网站”的名称已经出现在站点
窗口了，因为是新建的一个站点，所在在本地目录看到的一片空白。

网页设计与制作教程——Web前端开发(第6版)课件第7章 JavaScript语法基础7.4

7.4 标识符、变量、运算符和表达式
3．比较运算符和比较表达式比较（关系）运算符首先对操作数进行比较，然后再返回一个true或false值。
4．布尔（逻辑）运算符和布尔表达式布尔运算符有：&&（与）、||（或）、!（非、取反）。逻辑表达式是由逻辑运算符组成的表达式。逻辑表达式的结果只能是布尔值，即true 或false。逻辑运算符通常和关系运算符配合使用，以实现判断语句。例如，2>3 && 2==3。 5．位运算符和位表达式
《网页设计与制作教程Web前端开发第6版》刘瑞新主编配套资源
第7章 JavaScript语法基础
7.4 标识符、变量、运算符和表达式
目录
第7章 JavaScript程序设计基础
7.1 JavaScript概述 7.2 在HTML文档中使用JavaScript 7.3 数据类型 7.4 标识符、变量、运算符和表达式 7.5 流程控制语句 7.6 函数 7.7 对象 7.8 内置对象 7.9 正则表达式 7.10 使用开发者工具调试JavaScript程序 7.11 习题
7.4.3 变量 1．变量的声明变量的声明和赋值语句var的语法为： var 变量名1, 变量名2 … ;
例如： var username="Bill", age=18, gender="male"; 声明也可横跨多行： var username="Bill", age=18, gender="male";
var x, y, z=1;
7.4 标识符、变量、运算符和表达式
2．赋值运算符赋值运算符为“=”，也可以在声明变量时同时赋值。语法为： var 变量名1 = 初始值1, 变量名2 = 初始值2 … ; 变量名1 = 初始值1, 变量名2 = 初始值2 … ; 例如下面赋值语句： var username, age; username="Brendan Eich"; age=35; salary=39999;

网页设计与制作Dreamweaver CS6标准教-ppt课件-07

案例练习目标：练习设置CSS文字导航条。案例操作要点： 1. 创建样式表文件dogclub并将所有CSS样式存放其中。 2. 在导航条单元格中插入表格：行数列数均为1，宽度为100%，ID标识为navi。输入导航条文字“俱乐部介绍会员注册服务内容图片展示联系我们（中间留空格）”。

根据CSS样式所控制的网页元素不同，可以将样式分为四种形式。当所控制的网页元素是HTML语言中的某一个特定的标签时，为此标签设置的CSS样式，称为标签样式。当把网页中或网站中若干元素归为一类，作为一个整体来看待，为此类元素设置一个CSS样式，称为类样式。

一个标签或元素在网站中的不同网页中，或在一个网页中的不同位置上，外观效果不同，则需要先为该特定标签赋予一个唯一的ID号，然后，再为具有该ID号的标签设置样式，称此样式为ID样式。当设置若干个内容相同而名称不同样式时，或者设置超级链接样式时，则可以使用复合样式。

7.5.1练习案例-航空旅游 7.5.2练习案例-狗狗俱乐部 7.5.3练习案例-鲜花店

案例练习目标：练习使用各种CSS样式。案例操作要点： 1．打开文档index1.html，在导航条单元格中插入表格：行数列数均为1，宽度为100%， ID标识为navi，并输入导航条文字“网站首页旅游计划服务中心联系我们（中间留空格）”。 2．设置导航条复合样式#navi a:link， #navi a:visited属性，字体大小: 12px，颜色为#666；设置#navi a:hover属性，颜色为#999。

1. 2. 3. 4.
ቤተ መጻሕፍቲ ባይዱ

网页设计与制作教程——Web前端开发(第6版)课件第8章 JavaScript对象模型8.1

8.1 BOM的对象 8.2 DOM的对象习题8
8.1 BOM的对象
8.1.1 BOM概述浏览器对象关系的关系如图8-1所示。
8.1 BOM的对象
8.1.2 window对象 1. window对象的属性
8.1 BOM的对象
2. window对象的方法
8.1 BOM的对象
【例8-1】显示窗口的宽、高和设置计时器，页面初次加载时依次显示3个的提示框，延时5000ms后再调用hello()函数，显示其对话框，本例文件8-1.html在浏览器中显示的效果，如图8-2所示。
result += "\n标签为input的元素的个数：" + inputs.length; alert(result); } </script> </head> <body> <form name="myform"> 用户名：<input type="text" name="userName" id="userName" /><br /> 爱好：<input type="checkbox" name="hobby" value="音乐" />音乐 <input type="checkbox" name="hobby" value="美食" />美食 <input type="checkbox" name="hobby" value="旅游" />旅游<br /> <input type="button" value="统计结果" onclick="count()" /> </form> </body> </html>

网页设计与制作教程——Web前端开发(第6版)课件第7章 JavaScript语法基础7.6

</head> <body> </body> </html>
7.6 函数
2. 声明函数表达式（Function Expression）声明匿名函数表达式的语法格式如下： function(参数1, 参数2, … ) {
函数体语句块; return 返回值; }
（1）把函数表达式直接赋值给变量把函数表达式赋值给一个变量，格式如下： var 变量名 = function(参数1, 参数2, … ) {
return sum; //返回计算结果 } var resultAdd=DoAdd(); //在外层函数中调用内嵌函数DoAdd()得到结果，保存到变量中 return resultAdd; //返回DoAdd()函数的结果 } document.write(Add(20,30)); //显示: 50
《网页设计与制作教程Web前端开发第6版》刘瑞新主编配套资源
第7章 JavaScript语法基础
7.6 函数
函数（function）是指实现某项单一功能的，可重复使用的程序段。
目录
第7章 JavaScript程序设计基础
7.1 JavaScript概述 7.2 在HTML文档中使用JavaScript 7.3 数据类型 7.4 标识符、变量、运算符和表达式 7.5 流程控制语句 7.6 函数 7.7 对象 7.8 内置对象 7.9 正则表达式 7.10 使用开发者工具调试JavaScript程序 7.11 习题
var result; if (num <= 1)
result = 1; //递归结束的条件，不再递归 else
result = num * fnFactorial(num - 1); //递归调用 return result; } document.write(fnFactorial(10)); //输出: 3628800

网页设计与制作教程——Web前端开发(第6版)课件第7章 JavaScript语法基础7.5

case 6: scoreGrade = "及格"; break;
default: scoreGrade = "不及格"; break;
} alert(scoreGrade); } </script> </head> <body> <form name="myForm" method="get"> <p>成绩:<input type="text" name="txtScore" /></p> <p><input type="button" value="确定" onclick="grade()" /> </p> </form> </body> </html>
7.5 流程控制语句
7.5.3 循环结构语句 1. for循环语句 for循环语句的格式为： for (初始化; 条件; 增量) {
被执行的语句块; }
2. for in循环语句格式为： for (键 in 对象) {
被执行的语句块; }
7.5 流程控制语句
3. while循环语句 while循环语句的格式为： while (条件) {
<script type="text/javascript"> alert("你好！"); //输出指定内容 var msg = "你好！张三"; alert(msg); //输出变量中的内容 document.write("<strong>你好！<br />李四</strong>");

网页设计与制作教程——Web前端开发(第6版)课件第7章 JavaScript语法基础7.8

7.8 内置对象
例如，得到前n天或后n天的日期，代码如下：
function showdate(n) { var d = new Date(); //今天是2020-4-13 d = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate(); return d;
} document.write("今天是：" + showdate(0)+"<br />"); //今天是：2020-4-13 document.write("昨天是：" + showdate(-1)+"<br />"); //昨天是：2020-4-13 document.write("明天是：" + showdate(1)+"<br />"); //明天是：2020-4-13 document.write("5天前是：" + showdate(-5)+"<br />"); //5天前是：2020-4-13 document.write("10天后是：" + showdate(10)+"<br />"); //10天后是：2020-4-13
7.8 内置对象
3）可以比较两个日期的大小，得到布尔值true或false。例如下面代码： var d1 = new Date(2020, 4, 13, 12, 22, 51, 380); var d2 = new Date(2020, 1, 25, 22, 15, 35, 491); document.write(d1 < d2); //false

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

7.1 JavaScript概述 7.2 在HTML文档中使用JavaScript 7.3 数据类型 7.4 标识符、变量、运算符和表达式 7.5 流程控制语句 7.6 函数 7.7 对象 7.8 内置对象 7.9 正则表达式 7.10 使用开发者工具调试JavaScript程序 7.11 习题
7.2 在HTML文档中使用JavaScript
<!DOCTYPE html> <html>
<head> <meta charset="utf-8"> <title>JavaScript示例</title> <script type="text/javascript" src="hello.js"></script> 
7.2.1 在HTML文档中嵌入脚本程序 JavaScript的脚本程序包括在HTML中，使之成为HTML文档的一部分。其格式为： <script type="text/javascript">
JavaScript语言代码; JavaScript语言代码;
… </script>
注意，在<script language ="JavaScript">…</script>中的程序代码有大、小写之分。
《网页设计与制作教程Web前端开发第6版》刘瑞新主编配套资源
第7章 JavaScript语法基础
7.2 在HTML文档中使用JavaScript
在HTML文档Байду номын сангаас使用JavaScript代码有3种方法：在HTML文档中嵌入脚本程序、链接脚本文件和在HTML标签内添加脚本。
目录
第7章 JavaScript程序设计基础
</head> <body> </body> </html>
7.2 在HTML文档中使用JavaScript
7.2 在HTML文档中使用JavaScript
7.2.2 链接脚本文件其格式为： <head>
… <script type="text/javascript" src="路径/脚本文件名.js"></script>
… </head> type="text/javascript"属性定义文件的类型是javascript。src属性定义.js文件的URL。其格式为： JavaScript语言代码; //注释
… JavaScript语言代码;
【例7-2】将例7-1改为链接脚本文件。
7.2 在HTML文档中使用JavaScript
【例7-1】在HTML文档中嵌入JavaScript的脚本。
7.2 在HTML文档中使用JavaScript
<!DOCTYPE html> <html>
<head> <meta charset="utf-8"> <title>JavaScript示例</title> <script type="text/javascript"> document.write("Hello World!"); </script>
7.2 在HTML文档中使用JavaScript
<!DOCTYPE html> <html>
<head> <meta charset="utf-8"> <head> <title>JavaScript示例</title> </head>
</head> <body>
<form> <input type="button" onClick="JavaScript:alert('欢迎来到JavaScript世界！');" value="单
击此按钮"> </form> <p style="font:12pt; font-family:'黑体'; color:red; text-align:center">JavaScript例子</p>
</body> </html>
《网页设计与制作教程Web前端开发第6版》刘瑞新主编配套资源
祝贺你又学完了一节
</head> <body> </body> </html>
脚本文件hello.js的内容为：
document.write("Hello World!");
7.2 在HTML文档中使用JavaScript
7.2 在HTML文档中使用JavaScript
7.2.3 在HTML标签内添加脚本【例7-3】在标签内添加JavaScript的脚本，本例文件7-3.html在浏览器中显示的效果，如图7-5和图7-6所示。