网页设计与制作教程——Web前端开发(第6版)课件第7章 JavaScript语法基础7.2
合集下载
Web前端开发——简单讲解(完整版)PPT演示课件
21
Html语法规则
元素必须被正确地嵌套 元素必须被关闭（如<p></p>）、非空标签必须使
用结束标签（<br />） 元素必须小写（标签名和属性对大小写敏感）
（<body><a></a></body>） 属性值必须加引号（<table
width=“100%”></table>）把所有<和&特殊符号 用编码表示，如（>用>表示，<用<表示）
24
25
<meta http-equiv=“x-ua-compatible” content=“ie=7” /> 使ie8、ie9使用ie7模式显 示
<!--[if !IE]>除IE外都可识别<![endif]--> <!--[if IE]> 所有的IE可识别 <![endif]--> <!--[if lt IE 6]> IE6和IE6以下版本可识别 <![endif]--> <!--[if gte IE 6]> IE6和IE6以上版本可识别 <![endif]--> <!--[if IE 6]> 仅IE6可识别 <![endif]-->
19
Html
即超文本标记语言或超文本链接标示语言。结构包括 头部（head）、主体（body）两大部分，其中头部描 述浏览器所需的信息，而主体则包含所要说明的具体 内容。
Css
层叠样式表，是一组格式设置规则，用于控制web页 面的外观。通过使用css样式设置页面的格式，可将页 面的内容与表现形式分离，使html文档代码更加简练， 缩短浏览器加载时间。
Html语法规则
元素必须被正确地嵌套 元素必须被关闭（如<p></p>）、非空标签必须使
用结束标签（<br />） 元素必须小写（标签名和属性对大小写敏感）
（<body><a></a></body>） 属性值必须加引号（<table
width=“100%”></table>）把所有<和&特殊符号 用编码表示，如（>用>表示，<用<表示）
24
25
<meta http-equiv=“x-ua-compatible” content=“ie=7” /> 使ie8、ie9使用ie7模式显 示
<!--[if !IE]>除IE外都可识别<![endif]--> <!--[if IE]> 所有的IE可识别 <![endif]--> <!--[if lt IE 6]> IE6和IE6以下版本可识别 <![endif]--> <!--[if gte IE 6]> IE6和IE6以上版本可识别 <![endif]--> <!--[if IE 6]> 仅IE6可识别 <![endif]-->
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的基本语法和标签，掌握常用标签的用法以及语义化网页的重要性。
网页排版和布局
深入研究网页排版和布局的原则，包括网格系统、流式布局和固定布局等技术。
图像、音频和视频在网页中的应用
学习如何在网页中嵌入各种媒体文件，创建富媒体的用户体验，提升网页的吸引力。
动态交互效果设计实战
通过实际案例和项目，学习如何使用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增还找功有到能很编多辑很窗多口其的他的的浮绝动大面部板分，功我能们可以根
完成后，回到站点窗口，就可以看到如下类似的画面：
三、制作前的准备工作——定义网站
三、制作前的准备工作——定义网站
• 可以看到，“我的网站”的名称已经出现在站点
窗口了，因为是新建的一个站点，所在在本地目录看 到的一片空白。
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增还找功有到能很编多辑很窗多口其的他的的浮绝动大面部板分，功我能们可以根
完成后，回到站点窗口，就可以看到如下类似的画面：
三、制作前的准备工作——定义网站
三、制作前的准备工作——定义网站
• 可以看到，“我的网站”的名称已经出现在站点
窗口了，因为是新建的一个站点，所在在本地目录看 到的一片空白。
- 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> <!--URL为hello.js-->
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所示。
7.2 在HTML文档中使用JavaScript
<!DOCTYPE html> <html>
<head> <meta charset="utf-8"> <title>JavaScript示例</title> <script type="text/javascript" src="hello.js"></script> <!--URL为hello.js-->
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所示。