前端设计与开发 课件 模块8 JavaScript基础_第1页
前端设计与开发 课件 模块8 JavaScript基础_第2页
前端设计与开发 课件 模块8 JavaScript基础_第3页
前端设计与开发 课件 模块8 JavaScript基础_第4页
前端设计与开发 课件 模块8 JavaScript基础_第5页
已阅读5页，还剩86页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

模块8JavaScript基础制作精选图书模块任务8.1任务描述在数字化阅读日益普遍的时代背景下，线上图书馆、电子书城等平台逐渐成为人们获取知识、享受阅读的重要途径。利用HTML5和JavaScript技术为某个线上阅读平台或教育项目开发一个精选图书模块。这个模块将展示一系列经过精挑细选的书籍，用户可以通过这个模块轻松浏览、查找和深入了解这些书籍，从而增强用户在平台上的阅读体验，推广优秀作品，传播知识。任务分析通过对本任务的学习，了解JavaScript的特点，掌握JavaScript的基本语法和属性，掌握BOM和DOM对象中的各种语法和属性，掌握JavaScript中各种函数的语法，了解事件的分类并掌握事件的调用方法，掌握JavaScript中各种对象的基本语法和属性，最后利用所学知识制作精选图书模块网页。相关知识8.1.1JavaScript语言基础解释型语言，基于对象和事件驱动，广泛应用于Web开发，直接嵌入HTML中，通过<script>标签显示JavaScript语法特点01在HTML中，使用<script></script>标签对来嵌入JavaScript代码。这个标签可以放置在网页的任何位置，但一般会将它放置在<head></head>标签对中。<script></script>标签对的主要作用是告诉浏览器：它需要开始解析标签对之间的内容，并将其作为JavaScript脚本来运行。在<script></script>标签对中，可以编写JavaScript代码，包括变量声明、函数定义、条件语句、循环等。JavaScript的语法021）JavaScript注释JavaScript注释用于解释代码和阻止执行，单行注释以//开始，多行注释以/*开始，*/结束2）JavaScript数据结构JavaScript标识符是用户为变量和函数定义的名称，应由字母、数字、下划线或中文组成，首字符不能是数字，且区分大小写。不能与JavaScript关键字同名（1）标识符规则（2）常量常量也称为“常数”，在JavaScript代码运行时，值不能被改变的量为常量，主要为程序提供固定且精确的值。例如，数字、逻辑值（true和false）等都是常量。JavaScript中的常量包括下列6种基本类型。 数字（Number）:包括整数和浮点数，如“constPI=3.14;”。 逻辑值（Boolean）:只有两个值，分别为true和false，如“constIS_ACTIVE=true;”。 字符串（String）:一系列字符的集合，如“constGREETING="Hello";”。 空（Null）:表示空或不存在的值，如“constEMPTY=null;”。 未定义（Undefined）:表示声明了变量但未赋值的情况，如“constUNDEFINED_VALUE=undefined;”。 符号（Symbol）:JavaScript中新增的数据类型，表示唯一的标识符，如“constKEY=Symbol();”。（3）变量变量是存取数字、提供存放信息的单元。对于变量，必须明确变量的命名、变量的声明与赋值、变量的作用范围。在JavaScript中，虽然可以不用声明变量，但是不进行声明的变量无法作为存储单元。声明变量就是对变量进行命名。在一般情况下，可以使用关键字var对变量进行命名（4）关键字JavaScript中的关键字是指在JavaScript中具有特定含义的、可以成为JavaScript语法中一部分的字符。关键字用于标识JavaScript语句的开头和结尾，它不能作为变量名或函数名，但可保留。JavaScript中常用的关键字如表所示。3）JavaScript数据类型JavaScript中的基本数据类型比较简单，主要有数值型、字符型、布尔型、空值（null）和未定义（undefined）值5种（1）数值型。JavaScript中的数值型数据可以分为整型和浮点型两种①整型。JavaScript中的整型数据可以是正整数、负整数和0，并且可以采用十进制、八进制或十六进制来表示。②浮点型。浮点型数据由整数部分和小数部分组成，只能采用十进制，但是可以使用科学记数法或标准方法来表示。（2）字符型。字符型数据是使用单引号或双引号括起来的一个或多个字符。（3）布尔型。布尔型数据只有两个值，分别为true或false，主要用来说明或表示一种状态或标志。在JavaScript中，也可以使用整数0表示false，使用非0的整数表示true。（4）空值。JavaScript中有一个空值（null），用于定义空的或不存在的引用。4）JavaScript运算符包括算术、比较、位、逻辑、条件和赋值运算符，用于变量赋值和表达式计算JavaScript运算符类型与Excel运算符类似，用于数值计算、变量比较和逻辑判断，构成JavaScript语句的基础运算符功能（1）算术运算符包括加、减、乘、除、求模、自增、自减，如7*3返回21，7%4返回3，i++和++i改变变量值JavaScript算术运算符（3）比较运算符比较运算符主要包括==（等于）、！=（不等于）、<（小于）、<=（小于或等于）、>（大于）、>=（大于或等于）6种运算符。（3）位运算符位运算符是一种针对两个二进制的位进行逻辑运算的运算符，主要包括&（位与）、|（位或）、^（位异或）、~（取反）、＜＜（左移）、＞＞（右移）6种运算符。（4）逻辑运算符JavaScript中常用的逻辑运算符包括&&（逻辑与）、||（逻辑或）、！（逻辑非）3种运算符（5）条件运算符JavaScript条件运算符用于根据条件赋值，如：条件？值1：值2。当条件为真时取值1，为假时取值2（6）赋值运算符赋值运算符用于将数值赋给变量，在使用该运算符时，需要保证运算符两侧的操作数的类型一致。（7）运算符的优先级JavaScript中的各个运算符会构成不同的表达式，而一个表达式中往往又会包含多种运算符。在使用多种运算符时，JavaScript就会根据运算符的优先级决定计算的顺序。8.1.2BOM对象和DOM对象JavaScript中的BOM（浏览器对象模型）和DOM（文档对象模型）的结合使用，赋予了JavaScript实现丰富网页交互功能的能力。通过BOM，用户可以操作浏览器窗口，实现页面的滚动、大小调整等交互功能。通过DOM，用户可以动态地改变页面的内容和样式，以实现更加灵活和交互性强的网页体验。1.BOM对象浏览器窗口交互，无标准，window对象是核心，既是JavaScriptAPI，也是Global对象BOM对象核心01控制浏览器窗口，如大小位置，对话框，收藏夹，不受网页内容限制，不同浏览器实现方式可能不同BOM对象功能02DOM对象关注网页结构，BOM对象关注浏览器交互，两者都是JavaScript操作对象，但对象类型和作用范围不同BOM对象与DOM对象区别03（1）对象属性01BOM对象属性详细列举了BOM对象的属性，如window.closed返回窗口是否关闭，window.document引用Document对象，window.innerHeight返回文档显示区高度等，覆盖了窗口状态、尺寸、位置等信息02BOM对象与DOM对象关系说明了BOM（BrowserObjectModel）与DOM（DocumentObjectModel）的关系，BOM提供了与浏览器交互的接口，而DOM则用于操作HTML文档结构，window.document属性即为BOM与DOM的桥梁（2）对象方法window对象中提供了多种方法，用于实现与浏览器窗口交互的功能，如关闭浏览器窗口的close()方法、打印当前窗口的内容的print()方法等2.DOM对象它是W3C标准，用于操作HTML文档结构，包括文档、元素及属性，document对象是其核心DOM对象定义01DOM对象中的document对象既是BOM的一部分，也是DOM的一部分，它允许从脚本访问HTML元素BOM与DOM关系02（1）对象属性document对象的属性主要包括返回当前文档的域名的domain属性、返回当前文档的标题的title属性、返回当前文档的URL的URL属性等7种常用属性2）对象方法document对象的方法包括返回带有指定名称的对象集合的getElementsByName()方法、返回带有指定标签名的对象集合getElementsByTagName()方法、向文档写HTML表达式或JavaScript代码的write()方法等7种常用方法3）对象集合document对象的对象集合主要用于对一些其他对象的引用，包括HTML元素、anchor对象、applet对象、form对象、image对象等6种常用对象8.1.3JavaScript函数JavaScript中的函数是具有某种特定功能的一系列的代码集合，可以完成特定的任务并返回数据，但只有函数被调用时，函数体内的代码才会被执行。1.关键字定义JavaScript函数定义使用function关键字,语法:function名称(参数1,参数2,...){语句组}return表达式;函数名、参数为必选,return为可选JavaScript函数元素函数包含必选的函数名和参数,以及可选的语句组和return表达式,return用于结束函数执行并返回值2.变量定义JavaScript提供预定义的内置函数，如eval()、isFinite()和isNaN()，便于编程和提升效率JavaScript中的函数对象对应的类型是Function，可以通过newFunction()来创建一个函数对象进行变量定义1.eval()函数eval()函数用于计算某个字符串，并执行其中的JavaScript代码，它的返回值是通过计算输入的字符串得到的值。2．isFinite()函数检查参数是否为有限数值，非数字或无穷返回false，数字返回trueisFinite函数作用isFinite(number)，number为必选参数，字符串数字自动转化为数字型isFinite函数语法HTML代码示例展示isFinite函数对不同类型参数的检测结果isFinite函数示例3．isNaN()函数isNaN()函数用于判断参数是否为非数字值，如果为非数字，返回true；否则返回false4.parselnt()函数将字符串转换为整数，语法：parseInt(string,radix)，string为必填，radix可选，表示进制基数，省略或为0则以10为基数，以“0x”开头则以16为基数，小于2或大于36返回NaNparseFloat()函数将字符串转换为浮点数，忽略非数字字符，首字母空格会被忽略（5）parseFloat()函数Number()函数将对象值转换为数字，若无法转换则返回NaN（6）Number()函数unescape()函数用于解码escape()编码的字符串，如：unescape(escape(string))（9）unescape()函数String()函数用于将对象转换为字符串，参数object为要转换的对象（7）String()函数escape()函数用于对字符串进行编码，确保字符串能在所有计算机上被正确读取（8）escape()函数8.1.4事件事件是浏览者通过鼠标或键盘执行的操作，对此事件做出的响应代码称为事件处理程序，而事件的发生使得响应的事件处理程序被执行，称为事件驱动1.事件的分类JavaScript中的事件可以分为鼠标事件、键盘事件、表单事件、窗口事件等2）键盘事件键盘事件（KeyboardEvents）是指在文本框中输入文本时所发生的事件1）鼠标事件鼠标事件（MouseEvents）是用户单击或移动鼠标时所产生的事件，此时事件指定的事件处理程序或代码将被调用执行。4）窗口事件窗口事件（WindowEvents）是当浏览器窗口改变或文档加载时触发的事件3）表单事件表单事件（FormEvents）是在HTML表单元素（如<form>、<input>、<select>等）上发生特定动作时触发的事件2.关联事件与处理代码1）HTML属性绑定在HTML元素中直接使用事件属性（如onclick、onmouseover、onchange等）来绑定相应的事件处理函数。2）DOM属性绑定使用JavaScript在DOM元素上直接设置事件属性，将事件处理函数赋给相应的事件属性。3）addEventListener()方法使用addEventListener()方法来为DOM元素添加事件监听器，可以同时绑定多个事件处理函数，并且可以指定事件的冒泡或捕获阶段。3.调用事件在JavaScript中，可以运用函数和代码来调用事件，也就是自定义响应事件，从而增加了网页的交互性。运用函数调用事件是将一个函数作为事件的处理程序，在调用函数时需要先定义函数，再调用该函数。运用代码调用事件是将代码作为事件的处理程序，对于比较简单的事件响应，则可以将响应代码直接写入事件，而不必写入<script></script>标签对。在处理事件时，除运用函数和代码来调用事件以外，还可以将事件绑定到对象中。该绑定属于动态绑定，需要结合DOM对象一起使用。在HTML中分配事件处理程序，只需要在HTML标签中添加相应的事件，并在其中指定要执行的代码或函数名即可。8.1.5JavaScript对象JavaScript中的所有事物都是对象，如字符串、数值、日期、数组等，用户还可以创建自定义对象。1.字符串对象在JavaScript中，既可以直接声明字符串对象，也可以使用关键字new来创建字符串对象。2）使用关键字new除了直接声明字符串对象，还可以使用关键字new来创建字符串对象。1）直接声明直接声明字符串对象类似于声明函数，使用关键字var对其进行声明。2．数值对象javaScript中内置了大量的数值对象的属性和方法，包括求平方根、求绝对值、取整等。3．日期对象在Web程序开发过程中，可以使用JavaScript的日期（Date）对象来对日期和时间进行操作。4．数组对象在JavaScript中，数组对象以Array对象进行表示，用于在单个的变量中存储多个值任务规划通过开发精选图书模块，不仅能提升开发者对HTML5和JavaScript技术的实际应用能力，还能为用户提供一个直观、便捷、内容丰富的阅读空间，有助于提升平台的整体品质和市场竞争力。任务实施（1）打开开发工具VSCode，在本地磁盘中新建项目文件夹，并命名为book。（2）在VSCode中打开项目文件夹book，在该项目文件夹上右击，在弹出的快捷菜单中选择“新建文件”命令，在文本框中输入文件的名称“list.html”，然后按Tab键或Enter键完成HTML文件的创建。（3）单击list.html文件，进入代码编辑窗口。在<title></title>标签对中设置网页的标题为“精选图书模块”，并引入外部样式表。（4）在<body></body>标签对中添加一组<section></section>标签对，用来放置精选图书，并设置好id，然后在<section></section>标签对中插入标题“精选图书·感悟智慧的力量”和一个无序列表<ul>。（5）在<body></body>标签对中引入JS文件。（6）在项目文件夹book上右击，在弹出的快捷菜单中选择“新建文件夹”命令，在出现的文本框中输入文件夹的名称“css”，然后按Tab键或Enter键，在css文件夹上右击，在弹出的快捷菜单中选择“新建文件”命令，在出现的文本框中输入文件的名称“style.css”，然后按Tab键或Enter键。任务实施（7）单击步骤（6）中新建的style.css文件，进入代码编辑窗口，设置网页各部分内容的样式。（8）在项目文件夹book上右击，在弹出的快捷菜单中选择“新建文件夹”命令，在出现的文本框中输入文件夹的名称“js”，然后按Tab键或Enter键，在js文件夹上右击，在弹出的快捷菜单中选择“新建文件”命令，在出现的文本框中输入文件的名称“scripts.js”，然后按Tab键或Enter键。（9）单击scripts.js文件，进入代码编辑窗口。首先创建一个图书对象数组，对象包含书名、作者等相关信息。（10）在scripts.js文件中创建DOM元素，生成页面内容。（11）在scripts.js文件中绑定事件，在页面加载后立即生成精选图书列表。制作美丽乡村信息网网页任务8.2任务描述我国近年来大力推行乡村振兴战略和生态文明建设。美丽乡村建设已成为推进农业现代化、农村经济社会全面发展的重要组成部分。利用HTML5技术制作美丽乡村信息网，旨在适应移动互联网时代的信息传播特点，通过数字化手段展示和推广各地的美丽乡村，吸引更多人关注乡村发展，参与乡村建设，带动乡村旅游和地方经济的发展。任务分析通过对本任务的学习，了解什么是jQuery，能够下载和引入jQuery，掌握jQuery中的各种选择器的用法，掌握DOM的制作步骤和方法，最后利用所学知识制作“美丽乡村信息网”网页。相关知识8.2.1jQuery简介jQuery是一款出色的JavaScript框架，在Web开发中广受欢迎。它以简洁的语法、跨浏览器兼容性和强大的功能而著名。jQuery的主旨是“writeless，domore”，即通过减少编写的代码量来实现更多的功能。作为一个轻量级的JavaScript库，它具有其他库所不具备的优势。8.2.2jQuery下载与引入从官网下载页面，选择"Downloadthecompressed,productionjQuery3.7.1"，右键选择"将链接另存为"，指定本地路径保存为jquery-3.7.1.min.js访问，点击Download，找到指定jQuery版本，使用“另存为”保存到需要的文件夹jQuery库下载途径下载步骤说明下载jquery-3.7.1.min.js，放入新建项目中的"js"文件夹。HBuiderX中需创建"js"文件夹并移动文件jQuery库本地配置在HTML中通过<script>标签引入"js"文件夹下的jquery-3.7.1.min.js，确保路径正确jQuery库引用步骤引用jQuery库使用相对路径和绝对路径引入jQuery文件将jQuery引入页面，使用如下代码：```<scriptsrc="js/jquery-3.7.1.min.js"type="text/javascript"></script>```若jQuery与HTML在同一目录，直接写文件名；否则，使用相对或绝对路径引入HTML5script标签属性HTML5中script标签默认类型是JavaScript，无需再写type="text/javascript"8.2.3jQuery选择器提供多种选择器，如ID选择器、类选择器，方便快速定位DOM节点，简化用户操作，提升开发效率选择器功能结合实际场景，如表单元素选择、事件绑定节点选择，提供便捷API，使用户能更专注于业务逻辑实现选择器应用支持组合选择器和伪类选择器，帮助用户更高效地选取复杂结构，同时减少浏览器的计算量，优化性能选择器优化0102031.基本选择器基本选择器是jQuery中最常用也是最简单的选择器，它通过元素的id、class和标签名等来查找DOM元素1）ID选择器id选择器用于根据给定的id匹配一个元素，返回单个元素。例如，“$("#test")”表示选取id为test的元素。类选择器(".test")用于选取所有class为test的元素，效率低于id选择器，但可选多个2）类选择器全选择器*，匹配所有元素，返回元素集合，$("*")选取所有的元素。5）全选择器元素选择器通过元素名匹配并返回相应元素集合，如$("p")选取所有<p>元素，$("div")选取所有div标签3）元素（标签）选择器并集选择器将多个选择器匹配的元素合并成一个集合，如$("p,span,p.myClass")选取所有<p>、<span>和class为myClass的<p>元素4）并集选择器2.层次选择器层次选择器通过DOM元素之间的层次关系来获取元素，主要的层次关系包括父子关系、后代关系、相邻兄弟关系、一般兄弟关系3.过滤选择器过滤选择器是根据某类过滤规则进行元素的匹配，其用法与CSS中的伪类选择器相似。过滤选择器用冒号（:）开头。在jQuery中，过滤选择器分为基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器。1）基本过滤选择器基本过滤选择器是过滤择器中使用最广泛的选择器.2）内容过滤选择器基本筛选选择器主要针对元素DOM节点进行操作，但如果我们希望通过内容来进行过滤，jQuery也为我们提供了一组内容筛选选择器，这些选择器的规则可以应用于所选元素的子元素或文本内容上元素有显示状态与隐藏状态，jQuery根据元素的状态扩展了可见性过滤选择器3）可见性过滤选择器4）属性过滤选择器01属性选择器功能允许用户根据元素属性定位，不考虑属性值，有具体示例02属性选择器类型包括[attribute]、[attribute=value]等7种，用于精确匹配元素属性4）属性过滤选择器属性过滤选择器允许用户根据元素的属性来定位它们。用户可以仅指定元素的某个属性，这样所有具有该属性的元素都会被选中，而不考虑属性值4.表单元素选择器jQuery中专门加入了表单元素选择器，从而能够极其方便地获取到某个类型的表单元素8.2.4jQuery的DOM制作在jQuery中，DOM操作是一个重要的功能领域，涵盖了新建、添加、删除、修改和查找等方面。1.新建DOM节点使用HTML字符串描述节点结构，如：$("<div></div>")，可创建元素节点创建元素节点创建元素节点的方法同样适用于创建属性节点，例如：$("<divid='test'class='aaron'>Ex</div>")创建属性节点创建文本节点可参照创建元素节点的方式，如：`<div>我是文本节点</div>`创建文本节点0102032.添加DOM节点将新建的节点插入文档的方法有多个，如append()、appendTo()、prepend()、prependTo()、after()、insertAfter()、before()、insertBefore()。append()`append()`方法用于向指定元素内部添加新的内容.appendTo()prependTo()`prependTo()方法用于将元素添加到指定的元素的内部开头位置appendTo()方法用于将所有匹配的元素追加到指定的元素中，该方法是append0方法的颠倒操作prepend()prepend()方法用于将指定的元素添加到匹配的元素内部作为它的第一个子元素after()方法用于向匹配的元素后面添加元素，新添加的元素作为目标元素后的紧邻的兄弟元素。after()05insertAfter()方法用于将新建的元素插入査找到的目标元素的后面，作为目标元素的兄弟节点。insertAfter()06before()方法在每个匹配的元素之前插入新建的元素，作为匹配元素的前一个兄弟节点。before()07insertBefore()insertBefore()方法用于将新建元素添加到目标元素的前面，作为目标元素的前一个兄弟节点。3.删除DOM节点remove()方法用于删除所有匹配的元素，传入的参数用于筛选元素，该方法能删除元素中的所有子节点，当匹配的节点及子节点被删除后，该方法的返回值是指向被删除节点的引用，从而允许再次使用这些被删除的元素。remove()empty()方法严格来讲并不是删除元素，该方法只是清空节点，它能清空元素中的所有子节点。empty()如果想要删除文档中的某个元素节点，jQuery提供了两种删除节点的方法：remove()和empty()。4.修改节点修改文档中的元素节点可以使用多种方法：复制节点、替换节点、包裹节点01复制节点复制节点方法能够复制元素节点，并且能够根据参数决定是否复制元素节点的行为。02替换节点替换节点方法能够替换某个节点，有两种实现方法：replaceWith()和replaceAll()。replaceWith()方法用于使用后面的元素替换前面的元素replaceAll()方法用于使用前面的元素替换后面的元素wrap()将元素用其他元素包裏起来，也就是给它增加一个父元素wrapAll()将集合中的元素用其他元素包裹起来，也就是给它们增加一个父元素。wrapAll()将集合中的元素内部所有的子元素用其他元素包裏起来，并当作指定元素的子元素。3）包裹节点包裏节点方法使用其他标签包起目标元素，从而改变元素的显示形式等，并且该操作不会破坏原始文档的词义。包裹节点有三种实现形式：wrap()、wrapAll()、wraplnner()。5.查找DOM节点children()方法用于快速查找指定元素集合中匹配元素的直接子元素。1）children()查找节点的方法有多种，如children()、find()、parent()、parents()、next()、prev()、siblings()。find()方法find()方法用于快速查找DOM树中的匹配元素的后代元素children()方法children()方法是父子关系査找，find()方法是后代关系（包含父子关系）查找。2）find()3）parent()6）prev()5）next()4）parents()快速查找合集里面的这些元素的父级元素。快速查找合集里面的每一个元素的所有祖辈元素。快速查找指定元素集合中每一个元素紧邻的后面同辈元素的元素集合.快速查找指定元素集合中每一个元素紧邻的前面同辈元素的元素集合。（7）siblin

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论