HTML5 CSS3 JavaScript网页设计与制作项目教程课件PPT 项目7 JavaScript应用——实现网页交互功能(1).pptx

HTML5+CSS3+JavaScript网页设计与制作项目教程项目7 JavaScript应用——实现网页交互功能 目录ENTERPRISE OPERATION REPORT04.总结提升03.知识链接02.学习目标01.项目导入05.扩展训练 项目导入PART 01 项目导入使用JavaScript制作“旅行家--图片轮播”效果JavaScript是Web页面中的一种脚本语言，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。本章我们将使用JavaScript制作“旅行家——轮播图”模块，案例完成效果如图7.1所示。 学习目标PART 0202 知识目标能力目标1、理解JavaScript的基本概念及在网页中的主要作用2、掌握JavaScript的引入方法及基本语法3、理解并掌握JavaScript对象的使用方法4、掌握JavaScript的事件处理方法1、会用JavaScript实现简单的网页交互功能2、会用JavaScript实现图片轮播效果02 知识链接PART 0303 一、JavaScript简介1、什么是JavaScriptJavaScript是一种逐行执行的脚本语言，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。除了JavaScript，网页相关前端技术还包括Ajax（实现浏览器与服务器异步交互）及Node.js（在服务器端使用的JavaScript代码）等。JavaScript在网页中的用处很多，它可以对事件做出响应，可以将JavaScript设置为当某事件发生时才被执行。例如：03 一、JavaScript简介（1）页面载入完成或者用户单击某个HTML元素时发生相应的动作，如图7.2所示的“TAB栏切换”，当用户将鼠标分别移上“生活”、“VR”、“河南”等时，对应的内容将会切换。03 一、JavaScript简介（2）JavaScript可以读写HTML元素，在数据被提交到服务器之前，JavaScript还可被用来验证这些数据，如7.3所示的注册页面。03 一、JavaScript简介（3）JavaScript可被用来检测访问者的浏览器，并根据所检测到的浏览器，为这个浏览器载入相应的页面。（4）JavaScript可被用来创建cookies，还可被用来存储和取回位于访问者计算机中的信息等。03 2、JavaScript的特点 JavaScript是一种描述性语言，也是一种基于对象（Object）和事件驱动（Event Driven）的，并具有安全性的脚本语言。最初由网景（现在的Mozilla）公司创建。主要有以下特点：解释性：JavaScript是一种解释性语言。由浏览器解释并执行代码，不进行预编译。基于对象：JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象，语法和Java类似。动态性：JavaScript一般用来编写客户端的脚本，它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。跨平台性：JavaScript脚本语言不依赖于操作系统，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。一、JavaScript简介03 3、JavaScript的组成JavaScript主要有三大组成部分，说明如下。(1) ECMAScript：JavaScript的核心，描述了语言的基本语法(var、for、if、array等)和数据类型(数字、字符串、布尔、函数、对象(obj、[]、{}、null)、未定义)。(2) 浏览器对象模型（BOM）对浏览器窗口进行访问和操作。例如弹出新的浏览器窗口，移动、改变和关闭浏览器窗口，提供详细的网络浏览器信息（navigator object），详细的页面信息（location object），详细的用户屏幕分辨率的信息（screen object），对cookies的支持等等。BOM作为JavaScript的一部分并没有相关标准的支持，每一个浏览器都有自己的实现，虽然有一些非事实的标准，但还是给开发者带来一定的麻烦。一、JavaScript简介03 (3) 文档对象模型（DOM）：DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。如下面的 HTML 页面：一、JavaScript简介htmlhead titleSample Page/title/headbody phello w