web前端技术课件模块４网站交互页面实现

上传人：q*** IP属地：山东上传时间：2024-09-02 格式：PPTX 页数：172 大小：12.76MB 积分：15 举报 版权申诉

已阅读5页，还剩167页未读，继续免费阅读

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

文档简介

主页欢迎弹窗效果实现Web前端技术延时符CONTENTS目录01任务描述03知识点导图02学习目标

04相关知识05任务实施延时符任务描述延时符任务描述一个友好的网页，往往能够对用户的操作进行合适的交互提示，引导用户正确的进行网页的使用。在这个任务中，我们就将使用JavaScript中的弹窗，来引导用户。效果如图4-1-1所示。延时符学习目标延时符学习目标掌握JavaScript常量，变量，数据类型等基础概念；掌握浏览器“开发人员工具”中调试JavaScript代码；掌握JavaScript中prompt()和alert()的使用方法；掌握JavaScript中条件控制语句if的使用方法。知识目标能够根据要求编写JavaScript代码实现弹窗功能；能够使用内部JavaScript代码；；技能目标延时符培养严谨、精益求精的工作态度；培养良好的审美观念；培养团队合作的意识。素养目标知识点导图延时符知识点导图延时符相关知识延时符JavaScript简介JavaScript使用JavaScript变量JavaScript数据类型算术运算prompt()if语句JavaScript简介延时符JavaScript是一种高级的、解释型的脚本语言，主要用于在页面上实现交互功能。与HTML和CSS一起使用，用于创建动态网页和网页应用程序。随着技术的不断发展，JavaScript的应用范围也在不断扩大，成为了web前端开发的核心技术之一。JavaScript最初由Netscape公司开发，最早称为LiveScript，后来改名为JavaScript。它是一种多范式语言，支持面向对象编程、函数式编程和基于原型的编程。JavaScript可以在客户端（浏览器）和服务器端（Node.js）运行，使其成为一种非常灵活的语言。它可以用于创建动态网页、表单验证、交互式用户界面、游戏开发、服务器端编程等各种用途。通常而言在HTML文件中使用javascript代码有三种方式：外部JavaScript，内部JavaScript和元素内嵌JavaScript方式，我们首先需要熟练掌握的是内部JavaScript方式。顾名思义，内部JavaScript是指HTML代码和JavaScript代码放在同一个页面文件（.html）中。其中，所有JavaScript代码应当写在<script></script>标签对内。JavaScript的使用：内部使用延时符1.<!--

Demo4_1.html

-->

2.<!DOCTYPE

html>

3.<html>

4.<head>

5.<title>使用内部JavaScript</title>

6.<!--

1.在head中使用JavaScript

-->

7.<script>

8.//内部JavaScript代码段1

9.</script>

10.</head>

11.<body>

12.<!--

2.在body中使用JavaScript

-->

13.<script>

14.//内部JavaScript代码段2

15.</script>

16.</body>

17.</html>

JavaScript的使用：数据类型延时符在JavaScript中定义了以下5种基础数据类型，数值型（number)、字符串(string)、布尔值、数组和对象类型：JavaScript基础数据类型讲解Number类型：JavaScript中的数值型不再区分整数和浮点数，统一用Number表示，01字符串类型：JavaScript中字符串是以单引号’或双引号”括起来的任意文本02布尔类型：JavaScript中的布尔值类型只有true、false两种值，可以通过比较、逻辑运算计算得出03数组类型：数组是一组按顺序排列的集合，其中的每个值称为元素。数组可以包括任意数据类型。04对象类型：JavaScript的对象是一组由键-值组成的无序集合，对象的键都是字符串类型，值可以是任意数据类型。05JavaScript的使用：变量延时符JavaScript中的变量的概念基本上和初中代数的方程变量是一致的，只是在JavaScript程序中，变量不仅可以是数字，还可以是任意数据类型。（1）变量命名规则：①

变量名是大小写英文、数字、$和_的组合。②变量名是不能以数字开头。③变量名也不能是JavaScript的关键字或者保留字。注意：

理论上变量名是可以用中文，但是，请不要这样做。因为在所有的编程语言说明中，一般都不建议使用非英文字符作为标识符，文件名，文件夹名甚至是项目名称。JavaScript的使用：变量延时符（2）变量赋值：在JavaScript中，使用赋值号“=”对变量进行赋值。例如：可以把任意数据类型赋值给变量，同一个变量可以反复赋值，而且可以是不同类型的变量，但是要注意只能用var申明一次，例如：这种变量本身数据类型不固定的语言称之为动态语言，与之对应的是静态语言。vara;//申明了变量a，此时a的值为undefinedvar$b=1;//申明了变量$b，同时给$b赋值，此时$b的值为1vars_007='007';//s_007是一个字符串varAnswer=true;//Answer是一个布尔值truevart=null;//t的值是nullvara=123;//a的值是整数123a='ABC';//a变为字符串JavaScript的使用：变量延时符（3）使用控制台检查变量：要显示变量的内容，可以用console.log(x)，打开Chrome的控制台就可以看到结果。例如：控制台使用console.log()代替alert()的好处是可以避免弹出烦人的对话框，从而可以避免代码被阻断运行。varx=10;console.log(x,x+2)//配合ChromeJavaScript的使用：算术运算延时符在JavaScript中Number类型是可以直接进行算术运算，除了加减乘除，分别使用+、-、*、/符号之外，还可以进行求余运算%。1+2;//3(1+2)*5/2;//7.52/0;//Infinity0/0;//NaN10%3;//110.5%3;//1.5JavaScript的使用：alert()和prompt()延时符Javascript中常用使用alert()进行信息的弹窗输出，在之前任务1-1的学习中，我们使用过这个方法。另外，prompt()方法用于显示可提示用户进行输入的对话框。而且prompt方法可以返回用户输入的字符串。语法如下：Prompt方法有两个可选参数，分别是msg和defaultText，msg参数要在对话框中显示的纯文本（而不是HTML格式的文本）；defaultText参数作为对话框的默认输入文本。prompt(msg,defaultText)JavaScript的使用：if语句延时符JavaScript使用if语句来进行条件判断，可以实现分支控制。语法如下：if语句讲解if(){...//条件为真}else{...//条件为假}JavaScript的使用：if语句延时符例如，根据年龄显示不同内容，可以用if语句实现如下：注意：其中else语句是可选的。如果语句块只包含一条语句，那么从JavaScript的语法规定而言，可以省略{}，但是强烈建议保留。1.varage=prompt(“输入年龄”);2.if(age>=18){//如果age>=18为true，则执行if语句块3.alert('adult');4.}else{//否则执行else语句块5.alert('teenager');6.}任务实施延时符任务分析技术分析与实现完成代码任务分析延时符初次使用JavaScript代码实现页面交互功能，使用内部JavaScript代码方式，先定义变量，然后使用prompt()弹窗并提示用户输入，获取用户输入内容传入变量，根据变量进行判断，使用alert()弹窗输出。流程图如右侧所示：技术分析与实现：步骤1延时符步骤1：在html文件head标签中插入<script></script>标签。代码如下所示：1.<script>2.//实现功能的JavaScript代码……3.</script>技术分析与实现：步骤2延时符步骤2：定义变量，在这个任务中需要使用name变量接受输入输入框输入的内容。使用str变量设置警告框信息。虽然在JavaScript语法中并不强制要求变量先定义后使用，但养成先定义的好习惯对于今后更为复杂的应用环境下的变量作用域等问题会起到很好的作用，所以在本教材中我们都会对变量进行先定义后使用。此处代码如下：1.<script>

2.//定义变量name和str3.

varname,str;4.</script>

技术分析与实现：步骤3延时符步骤3：接收输入框信息，输入框方法prompt()是能够将页面用户的输入作为返回值输入到程序，此处使用上面定义的变量name接收。此处代码如下：1.<script>

varname,str;3.name=prompt("请输入您的姓名");

4.</script>

技术分析与实现：步骤4延时符步骤4：接收输入框信息，通过if语句判断用户输入信息是否为“user”，如果是将输出信息字符串变量str赋值为“Welcome！”，否则将str赋值为“NONAME”。此处代码如下：1.if(name=="user"){

str="Welcome!";

}else{

str="NO

NAME";

}技术分析与实现：步骤4延时符步骤5,：警告框输出信息，使用alert()将上面处理好的输出信息字符串str进行输出。此处代码如下：1.1.

alert(str);

任务实现讲解谢谢观看！主页榜单鼠标滑过功能实现Web前端技术主讲老师：***延时符CONTENTS目录01任务描述03知识点导图02学习目标

04相关知识05任务实施延时符任务描述延时符任务描述在页面浏览过程中，常常会遇到链接文字或者按钮的滑动动画。例如在下面的页面中鼠标滑过歌曲名称时，对应的播放，加入歌曲列表和收藏按钮就会出现；当鼠标滑出后，按钮又会再次隐藏。又比如，当鼠标滑过播放按钮时，按钮也会发生颜色等变化；当鼠标滑出后，按钮又会恢复到原来的样式。下面，我们将学习如何使用JavaScript相关知识完成鼠标滑过动画任务。效果如图4-2-1所示。延时符学习目标延时符学习目标掌握外部使用JavaScript的方法；掌握DOM基础知识，以及DOM对象获取和操作HTML元素的方法；掌握JavaScript中常用事件的使用方法；知识目标能够根据要求编写JavaScript代码实现鼠标滑过动画功能；能够通过DOM对象对html元素进行操作；能够使用外部JavaScript代码的方法；技能目标延时符培养分析问题能力；培养自主学习能力；素养目标知识点导图延时符知识点导图延时符相关知识延时符外部使用jsfor语句DOM简介获取DOM操作DOM元素常用事件通过在前一个任务的学习，我们掌握了内部JavaScript代码的使用方法，由<script>...</script>包含的代码就是JavaScript代码，它将直接被浏览器执行。现在我们将学习第二种JavaScript代码的使用方法，把JavaScript代码放到一个单独的.js文件，然后在HTML中通过<scriptsrc="..."></script>引入这个文件：JavaScript的使用：外部使用延时符1.<html>

2.<head>

<script

src="js/abc.js"></script>

//使用外部JavaScript文件

abc.js4.</head>

5.<body>

...

7.</body>

8.</html>

注意：每个html文件中可以多次使用<script></script>来使用JavaScript代码。每对<script></script>只能是内部或者外部使用JavaScript，而不能同时内部和外部使用。JavaScript的使用：DOM基础延时符DOM(DocumentObjectModel)译为文档对象模型，是HTML和XML文档的API（应用程序编程接口）。其中HTMLDOM定义了访问和操作HTML文档的标准方法。DOM的最小组成单位叫做节点（node）。文档的树形结构（DOM树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。通过观察html代码和对应的DOM结构图，不难发现每一个html元素就是一个DOM树形结构中的节点（DOMNode）。一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是DOM树。它有一个顶层节点，下一层都是顶层节点的子节点，然后子节点又有自己的子节点，就这样层层衍生出一个金字塔结构，又像一棵树。1.<html>

2.<head>

3.<title>文档标题</title>

4.</head>

5.<body>

6.<a

href=’’>我的链接</a>

7.<h1>我的标题</h1>

8.</body>

9.</html>

JavaScript的使用：DOM基础延时符浏览器原生提供document节点，代表整个文档。文档的第一层有两个节点，第一个是文档类型节点（<!doctypehtml>），第二个是HTML网页的顶层容器标签<html>。后者构成了树结构的根节点（rootnode），其他HTML标签节点都是它的下级节点。除了根节点，其他节点都有三种层级关系。父节点关系（parentNode）：直接的那个上级节点。子节点关系（childNodes）：直接的下级节点。同级节点关系（sibling）：拥有同一个父节点的节点。DOM提供操作接口，用来获取这三种关系的节点。比如，子节点接口包括firstChild（第一个子节点）和lastChild（最后一个子节点）等属性，同级节点接口包括nextSibling（紧邻在后的那个同级节点）和previousSibling（紧邻在前的那个同级节点）属性。在JavaScript中，将通过这些节点对html元素进行各种操作，比如：更新，遍历，添加和删除。JavaScript的使用：DOM获取延时符在操作一个DOM节点前，我们需要通过各种方法获取DOM节点。最常用是获取单个DOM节点的方法，比如：document.getElementById()，由于ID属性值在HTML文档中的唯一性的，所以document.getElementById()可以直接定位唯一的一个DOM节点。获取多个DOM节点的方法，例如：document.getElementsByTagName()和document.getElementsByClassName()方法返回一组符合要求的DOM节点。要精确地选择DOM，可以先定位父节点，再从父节点开始选择，以缩小范围。1.//

返回ID为'test'的节点：

2.var

test

document.getElementById('test');

3.//

先定位ID为'test-table'的节点，再返回其内部所有tr节点：

4.var

trs

document.getElementById('test-table').getElementsByTagName('tr');

5.//

先定位ID为'test-div'的节点，再返回其内部所有class包含red的节点：

6.var

reds

document.getElementById('test-div').getElementsByClassName('red');

7.//

获取节点test下的所有直属子节点:

8.var

test.children;

9.//

获取节点test下第一个、最后一个子节点：

10.var

first

test.firstElementChild;

11.var

last

test.lastElementChild;

JavaScript的使用：DOM获取延时符另外，第二类方法是使用querySelector()和querySelectorAll()，需要了解css语法中选择器(selector)语法，然后使用条件来获取节点，更加方便：1.//

通过querySelector获取ID为q1的节点：

2.var

document.querySelector('#q1');

3.//

通过querySelectorAll获取q1节点内的符合条件的所有节点：

4.var

q1.querySelectorAll('div.highlighted

p');

注意：IE浏览器对querySelector的支持比较复杂，其中低版本的IE<8不支持querySelector和querySelectorAll。IE8有限支持，只支持ID属性获取。IE9和更高版本完全支持。JavaScript的使用：DOM操作延时符在获取DOM节点后，可以直接修改对应元素内容，常用方法有两种：修改节节点的innerHTML属性或者修改节点的innerText属性。（1）innerHTML属性。innerHTML属性这个方式非常强大，不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树。例如：1.//

获取<p

id="p-id">原来的段落文字</p>

2.var

document.getElementById('p-id');

3.//

设置文本为abc:

4.p.innerHTML

'修改后的段落文字';

id="p-id">修改后的段落文字</p>

5.//

设置HTML:

6.p.innerHTML

'修改后的<span

style="color:red">段落</span>文字';

7.//

<p>...</p>的内部结构已修改

上面代码运行结果如图4-2-5所示：JavaScript的使用：DOM操作延时符（2）innerText属性。修改innerText属性，这样可以自动对字符串进行HTML编码，保证无法设置任何HTML标签。1.//

获取<p

id="p-id">...</p>

2.var

document.getElementById('p-id');

3.//

设置文本:

4.p.innerText

'<script>alert("Hi")</script>';

5.//

HTML被自动编码，无法设置一个<script>节点:

6.//

id="p-id"><script>alert("Hi")</script></p>

JavaScript的使用：常用事件延时符HTMLDOM允许JavaScript对HTML事件作出反应。当事件发生时，可以执行JavaScript，比如当用户点击一个HTML元素时。onchange事件。onload和onunload事件。onmouseover和onmouseout事件。onmousedown、onmouseup。onclick事件。JavaScript的使用：事件监听延时符DOM的事件操作（监听和触发），都定义在EventTarget接口。所有节点对象都部署了这个接口，其他一些需要事件通信的浏览器内置对象（比如，XMLHttpRequest、AudioNode、AudioContext）也部署了这个接口。该接口主要提供三个实例方法。addEventListener：绑定事件的监听函数removeEventListener：移除事件的监听函数JavaScript的使用：事件监听

addEventListener()延时符1.EventTarget.addEventListener()。EventTarget.addEventListener()用于在当前节点或对象上，定义一个特定事件的监听函数。一旦这个事件发生，就会执行监听函数。该方法没有返回值。该方法接受三个参数。type：事件名称，大小写敏感。listener：监听函数。事件发生时，会调用该监听函数。useCapture：布尔值，表示监听函数是否在捕获阶段（capture）触发（参见后文《事件的传播》部分），默认为false（监听函数只在冒泡阶段被触发）。该参数可选。上面地案例中，button节点的addEventListener方法绑定click事件的监听函数hello，该函数只在冒泡阶段触发。1.target.addEventListener(type,listener[,useCapture]);

1.functionhello(){2.console.log('Helloworld');3.}4.5.varbutton=document.getElementById('btn');6.button.addEventListener('click',hello,false);

JavaScript的使用：事件监听

removeEventListener())延时符EventTarget.removeEventListener方法用来移除addEventListener方法添加的事件监听函数。该方法没有返回值。removeEventListener方法的参数，与addEventListener方法完全一致。它的第一个参数“事件类型”，大小写敏感。注意：removeEventListener方法移除的监听函数，必须是addEventListener方法添加的那个监听函数，而且必须在同一个元素节点，否则无效。target.addEventListener('click',listener,false);target.removeEventListener('click',listener,false);

JavaScript的使用：for语句延时符例如，根据年龄显示不同内容，可以用if语句实现如下：注意：其中else语句是可选的。如果语句块只包含一条语句，那么从JavaScript的语法规定而言，可以省略{}，但是强烈建议保留。1.varage=prompt(“输入年龄”);2.if(age>=18){//如果age>=18为true，则执行if语句块3.alert('adult');4.}else{//否则执行else语句块5.alert('teenager');6.}任务实施延时符任务分析技术分析与实现完成代码任务分析延时符实现鼠标滑动动画任务，由于需要在页面加载时自动运行，所以可以使用window对象onload事件。本任务的实现，主要在window.onload的事件处理函数中，通过document.querySelectorAll()获取所有播放、加入播放列表和收藏按钮组成的对象。再对每个对象通过addEventListener()进行mouseover和mouserout事件监听，每当mouseover事件发生时修改按钮的背景图片，每当mouseout事件发生时，按钮背景图片还原从而完成任务要求。window.onload()结构图如图4-2-3所示：技术分析与实现：步骤1延时符步骤1：获取按钮组，需要对所有播放、加入列表和收藏按钮进行操作。因此需要获取这3组按钮，代码如下：1.varplays=document.querySelectorAll('a.play'),2. addtos=document.querySelectorAll('.addto'),3. subscribes=document.querySelectorAll('.subscribe');技术分析与实现：步骤2延时符步骤2：按钮组事件绑定，需要对所有按钮进行事件绑定，因此需要使用for语句帮助实现。以所有播放按钮为例代码如下：1.for(vari=0,len=plays.length;i<len;i++){2. plays[i].addEventListener('mouseover',function(e){3. this.style.backgroundPositionY="-22px";4. })5. plays[i].addEventListener('mouseout',function(e){6. this.style.backgroundPositionY="-2px";7. })8.}谢谢观看！登录注册页面实现Web前端技术主讲老师：***延时符CONTENTS目录01任务描述03知识点导图02学习目标

04相关知识05任务实施延时符任务描述延时符任务描述网页不仅仅可以向用户展示内容，也可以与用户进行交互活动，比如用户注册登录、咨询问题、选择商品，提交订单等，而表单则是实现这些交互功能的一种标签，它提供多种方式让用户输入数据。本任务中我们将利用表单与相关标签来设计登录注册窗口，并用JavaScript控制登录注册窗口的显示与关闭。延时符页面效果图延时符学习目标延时符学习目标掌握模拟弹出窗口的方法；掌握CSS样式display:none、display:block与z-index的方法和作用；掌握通过CSS样式transform居中放置的方法。掌握JavaScript获取选择器document.querySelector的方法。知识目标能够根据效果图完成弹出窗口的设计；能够根据效果图使用合理标签进行登录/注册页面结构搭建；能够根据需求灵活选择各类基础选择器进行样式添加；技能目标延时符培养严谨、精益求精的工作态度；培养良好的审美观念；培养团队合作的意识。素养目标知识点导图延时符知识点导图延时符相关知识延时符position:fixedz-indexhref=”javascript:;”document.querySelector()CSS样式：position:fixed延时符CSS中的position属性用来设置元素在页面中的位置，通过该属性您可以把任何属性放置在任何您认为合适的位置。position属性有5个可选值，分别对应5种不同的定位方式，前面的章节已经讲过static(静态定位默认值)、relative(相对定位)和absolute(绝对定位)，此处用到了新的属性——fixed(固定定位)，其作用是无论如何滚动浏览器窗口元素的位置都是固定不变的，可以使用top、right、bottom、left这4个属性来定义元素相对于浏览器窗口的位置。遮盖层和登录窗口层都使用了position:fixed;是为了防止页面滚动对它们造成影响。CSS样式：z-index:9999延时符CSS中的z-index属性设置元素的堆叠顺序。当多个元素产生重叠时，由它来决定谁叠在上面，其值越大，越在上层。遮盖层设置z-index:9998;是让它在盖在当前页面所有元素的上面，而登录窗口层设置z-index:9999;是让登录窗口盖在遮盖层的上面，因此遮盖层实现了登录窗口和当面页面的隔离作用。position：fixed、z-index的使用方法视频讲解CSS样式：toplefttransform完成居中功能延时符当前元素设置为top:50%;和left:50%;时，如图4-3-8所示，可以看到，子元素左上角的点与父元素的中心点重合，但子元素并未在父元素正中。因此通过CSS的transform属性将子元素产生位移，transform属性允许对元素进行旋转、缩放、移动或倾斜操作，其中可选值translate(x,y)可产生平面位移，代码为transform:translate(-50%,-50%);即将水平方向左移50%，即宽度的一半，同时将垂直方向上移50%，即高度的一半，这样子元素的中心点与父元素的中心点重合，实现了子元素居中的功能，如图4-3-9所示。图4-3-8top:50%;left:50%;的效果图4-3-9transform:translate(-50%,-50%);的效果JavaScript：href=”javascript:;”延时符将“登录”超链接的href属性设置为“javascript:;”表示它是一个超链接，只是不跳转而已，它的目的是将在JS代码段里执行一段代码。JavaScript：document.querySelector()延时符在前面的知识点讲过，获取元素可通过getElement(s)By方式，比如document.getElementById("id")，document.getElementsByTagName(‘div’)[0]，它们往往是JavaScript程序中开销最大的部分，因访问NodeList导致的问题很多。而document.querySelector()可避免使用NodeList对象通常会引起的大多数性能问题，因此它的访问效率相比而言要快得多。对使用者来说，也避免了针对不同选择符要使用不同getElement(s)By方式带来的麻烦。只需要在参数里用选择符即可。如document.querySelector("#close")、document.querySelector(".title")等。querySelector与getElementBy方法的异同视频讲解任务实施延时符结构分析样式分析设置页面样式页面结构结构分析延时符上图“登录”超链接，点击之后会弹出如右上图所示的登录窗口。登录窗口是由标题和主体组成，其中主体部分包含表单，表单中包含输入框、密码框、按钮和提交按钮几个表单组件，由它们完成登录输入功能。样式分析12增加遮盖层的目的是将原来的页面与登录/注册窗口隔以半透明效果隔离开，保证操作登录/注册窗口时不会误点击原来的页面，从而模拟了弹出窗口的样式。只有当点击关闭键，才会隐藏登录/注册窗口和遮盖层，恢复显示原来的页面。

延时符登录窗口实际上是由两个div堆叠而成，如图4-3-5所示，在原来的页面上增加一个遮盖层，再在遮盖层上放置登录/注册窗口。通过JavaScript来控制遮盖层与登录/注册层的显示与隐藏。用JavaScript控制登录窗口的显示与隐藏12登录窗口的隐藏由与显示相反，在JS代码中取得关闭按钮“X”的对象closeBtn，然后监听closeBtn对象的单击事件，当单击时，会运行后面的回调函数，将遮盖层和登录窗口层display属性由block改为none，即完成了登录窗口的隐藏。延时符任务实施视频讲解本案例先完成显示登录窗口的显示，代码必须要放置在window.onload=function(){}里，否则会因为渲染未完成就去运行js代码导致的错误。在JS代码中取得“登录”超链接元素对象link，然后监听link对象的单击事件，当单击时，会运行后面的回调函数，将遮盖层和登录窗口层display属性由none改为block，即完成了登录窗口的显示。在单击“登录”超链接后，显示登录窗口；在单击登录窗口右上角的“X”后，隐藏登录窗口。这是功能控制的基本逻辑。谢谢观看！登录页表单验证功能实现Web前端技术延时符CONTENTS目录01任务描述03知识点导图02学习目标

04相关知识05任务实施延时符任务描述延时符任务描述在上一个任务中，我们制作了登录页面。但是没有实现登录的功能，本次任务我们将运用用JavaScript中函数，关系运算，焦点事件等知识继续完善上一任务的登录页面中手机号码验证和输入密码验证功能。下面，我们将学习如何使用JavaScript相关知识完成用户登录页面验证任务。效果如图4-4-1所示。延时符学习目标延时符学习目标掌握自定义函数的方法；掌握比较、逻辑和条件运算符的使用；掌握焦点事件的使用方法；知识目标能够编写自定义函数；能够熟练使用比较、逻辑和条件运算符；能够合理使用this；技能目标延时符培养模块化编码理念；培养踏实的工作态度；培养思维逻辑能力；培养团队合作的意识。素养目标知识点导图延时符知识点导图延时符相关知识延时符函数比较运算逻辑运算条件运算焦点事件JavaScript中的函数是可重复使用的代码块，它主要由事件驱动的或者被调用时执行。常用定义函数的基本语法如下：根据这样的基本语法，我们可以尝试定义一个简单的自定义函数myFunction(),代码如右方所示：函数延时符1.<script>2.//函数定义（无参数）3.functionmyFunction()4.{5.alert("HelloWorld!");6.}7.</script>8.</head>9.10.<body>11.12.<buttononclick="myFunction()">点我</button>function函数名(){//函数体}前文代码在浏览器中运行，点击按钮“点我”，可以通过onclick事件驱动函数myFunction()，执行函数中的代码块alert(“HelloWorld!”)，运行效果如图4-4-4所示：函数（续1）延时符在调用函数时，可以向其传递值，这些值被称为参数。这些参数可以在函数中使用。可以向函数发送任意多的参数，参数之间由逗号(,)分隔，语法如下：JavaScript函数中变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。所以可以创建一个包含参数的函数，代码如右方所示：函数（续2）延时符1.1.<p>点击这个按钮，来调用带参数的函数。</p>2.<buttononclick="myFunction('BillGates','teacher')">点击这里</button>3.<script>4.//函数定义(有两个参数,无返回值)5.functionmyFunction(name,job){6. alert("Welcome"+name+",the"+job);7.}8.</script>myFunction(argument1,argument2)在浏览器中运行，点击按钮“点击这里”，可以通过onclick事件驱动函数myFunction()，执行函数中时按照参数顺序将“BillGates”和“teacher”依次传递执行，运行效果如下图4-4-5所示：有时，我们会希望函数将值返回调用它的地方。通过使用return语句就可以实现。在使用return语句时，函数会停止执行，并返回指定的值。比如以下代码：最终将会计算出4和3的乘积，并返回给调用函数的位置。本例中将会赋值给id=”demo”的p元素。函数（续3）延时符1.1.<p>本例调用的函数会执行一个计算，然后返回结果：</p>2.<pid="demo"></p>3.<script>4.//函数定义(有两个参数,有返回值)5.functionmyFunction(a,b){6. returna*b;7.}8.document.getElementById("demo").innerHTML=myFunction(4,3);9.</script>比较运算延时符JavaScript的比较运算符有==、===、!=、!==、<、>、<=和>=，通常用于逻辑语句，以判定变量或值是否相等，它的返回值为布尔型（true或false），最常见的使用场景就是在分支和循环控制语句中的使用。表格4-4-1是x=7情况下是各类比较运算的结果：运算符说明案例返回值==等于x==8x==7falsetrue===绝对等于(类型数值都相同)x===”7”x===7falsetrue!=不等于x!=8true!==不绝对等于（值和类型有一个不相等，或两个都不相等）x!===”7”x!===7truefalse<小于x<8true>大于x>8false<=小于等于x<=8true>=大于等于x>=8false逻辑运算延时符逻辑运算符用于测定变量或值之间的逻辑，逻辑运算通常和比较运算配合使用。表格4-4-2是x=6以及y=3情况下是各类逻辑运算运算的结果：运算符说明案例返回值&&and与x<10&&y>1true||or或x==5||y==5false!not非!(x==y)true条件运算延时符JavaScript还包含了基于某些条件对变量进行赋值的条件运算符。语法如下所示：例如：variablename=(condition)?value1:value21.c=(temperature<37.3)?"体温正常":"发热";

//当变量temperature值小于37.3时条件运算结果为“体温正常”，否则结果为“发热”。焦点事件延时符焦点事件主要有两类事件组成，一类是得到焦点事件onfocus；一类是失去焦点事件onblur。通常用于<input>和<select>等表单元素或者<a>元素中。例如如下代码能够文本框实现得到焦点时背景色改为红色，失去焦点时还原为白色。运行效果如下图4-4-6所示：1.输入您的姓名:<inputtype="text"id="fname">2.<script>3.document.getElementById("fname").addEventListener("focus",myFocus);4.functionmyFocus(){5.document.getElementById("fname").style.backgroundColor="red";6.}7.document.getElementById("fname").addEventListener("blur",myBlur);8.functionmyBlur(){9.document.getElementById("fname").style.backgroundColor="white";10.}11.12.</script>焦点事件讲解任务实施延时符任务分析技术分析与实现完成代码任务分析延时符用户登录验证任务，需要对输入手机号码合理性进行验证，比如手机号码是不是11位，将此项功能定义为函数checkPhone；也对输入密码正确性进行验证（教材中使用手机号码后六位作为默认密码），将此项功能定义为函数checkPw；另外可以使用焦点函数改变当前编辑文本框或者密码框的样式。所以这项任务的主要任务可以分解为3项子任务如右图4-4-3所示：：技术分析与实现：步骤1延时符步骤1：定义手机号码合理性验证函数，手机号码合理性包括以下3个方面：合理的手机号码是11位；合理的手机号码是全部为数字；合理的手机号码首位数字为1；以上功能定义为函数checkPhone()，代码如右侧所示：1.1.functioncheckPhone(){2. if(phone.value.length!=11){3. str="手机号码位数错误!";4. txt.className+='red';5. }elseif(phone.value.charAt(0)!='1'){6. str="手机号码首位数字不为1错误！";7. txt.className+='red';8. }elseif(isNaN(Number(phone.value,10))){9. str="手机号码中包含非数字！";10. txt.className+='red';11. }else{12. str="手机号码符合格式要求！";13. }14.}技术分析与实现：步骤2延时符步骤2：定义密码正确性验证函数。密码正确性验验证首先需要通过用户输入的手机号码进行默认密码的动态生成（手机号码后6位）。然后将输入的密码和默认密码进行比对即可。以上功能定义为函数checkPw()，代码如下：1.1.functioncheckPw(){2. varpass=phone.value.substr(5,6);3. if(phone.value.length!=11){4. str="手机号码位数错误!";5. txt.className+='red';6. }elseif(pw.value!=pass){7. str='密码错误！'8. txt.className+='red';9. }else{10. str='密码正确！';11. txt.className='reg';12. }13.}

技术分析与实现：步骤3延时符步骤3：焦点事件处理。焦点事件处理包括以下4个方面：文本框得到焦点时修改背景样式；文本框失去焦点时恢复背景样式，并调用checkPhone()做合理性验证；密码框得到焦点时修改背景样式，并调用checkPhone()做合理性验证；密码框失去焦点时恢复背景样式；以上功能代码如右侧：1.//文本框得到焦点时修改背景样式2.phone.onfocus=function(){3. this.className='in';4.}5.//文本框失去焦点时恢复背景样式，并调用checkPhone()做合理性验证6.phone.onblur=function(){7. checkPhone();8. txt.innerHTML=str;9. this.className='';10.}11.12.//密码框得到焦点时修改背景样式，并调用checkPhone()做合理性验证13.pw.onfocus=function(){14. checkPhone();15. txt.innerHTML=str;16. this.className='in';17.}18.//密码框失去焦点时恢复背景样式19.pw.onblur=function(){20. this.className='';21.}技术分析与实现：步骤4延时符步骤4：按钮事件处理。单击“确定”按钮验证手机号和密码代码如下所示：1.btn.onclick=function(){2. checkPhone();3. checkPw();4. txt.innerHTML=str;5.}任务实现讲解谢谢观看！新曲发布倒计时功能实现Web前端技术延时符CONTENTS目录01任务描述03知识点导图02学习目标

04相关知识05任务实施延时符任务描述延时符任务描述倒计时，在我们的生活的处处都有倒计时的身影，或者可以说时时刻刻都在倒计时，它常常出现在在某夕夕、某宝、某东等。当然还有节假日的倒计时、高考倒计时、纪念日倒计时等等，可以说在生活中到处都是倒计时。下面我们将学习如何使用JavaScript中的日期对象和定时器方法完成新歌发布倒计时任务。效果如图4-5-1所示。延时符学习目标延时符学习目标掌握日期时间对象Date的使用；掌握定时器setTimeout()或setInterval()使用方法；掌握clearTimeout()停止定时器的方法；知识目标能够编写JavaScript代码实现显示时间和日期功能；能够编写JavaScript代码实现发布倒计时功能；技能目标延时符培养创新思维能力；培养严谨、踏实的工作态度；培养勇于挑战难度的拼搏精神；素养目标知识点导图延时符知识点导图延时符相关知识延时符Data对象Data对象常用方法定时器方法取消定时器在JavaScript中对日期和时间数据处理使用Data对象。创建Date使用newDate()，通常可以用以下四种方法日期和时间的创建：参数说明：milliseconds

参数是一个Unix时间戳（UnixTimeStamp），它是一个整数值，表示自1970年1月1日00:00:00UTC（theUnixepoch）以来的毫秒数。dateString

参数表示日期的字符串值。year,month,day,hours,minutes,seconds,milliseconds

分别表示年、月、日、时、分、秒、毫秒。Data对象延时符vard=newDate();

vard=newDate(milliseconds);vard=newDate(dateString);vard=newDate(year,month,day,hours,minutes,seconds,milliseconds);根据上面的语法和参数说明，可以使用下面的代码来创建具体的日期和时间：上述代码在浏览器控制台输入结果如图4-5-4所示：Data对象（续）延时符1.vartoday=newDate(); //创建当前日期时间2.vard1=newDate("October1,20198:00:00"); //创建2019年10月1日8时整3.vard2=newDate(2019,9,1); //创建2019年10月1日4.vard3=newDate(2019,9,1,8,30,0); //创建2019年10月1日8时30分整5.console.log(today);6.console.log(d1);7.console.log(d2);8.console.log(d3);Data对象常用方法延时符Data对象的常用方法都围绕着日期或者时间数据的读写操作。主要方法如表4-5-1所示：方法说明getFullYear()从Date对象以四位数字返回年份。getMonth()从Date对象返回月份(0~11)。月份的值从0开始，表示1月。getDate()从Date对象返回一个月中的某一天(1~31)。getDay()从Date对象返回一周中的某一天(0~6)。数值0表示周日。getHours()返回Date对象的小时(0~23)。getMinutes()返回Date对象的分钟(0~59)。getSeconds()返回Date对象的秒数(0~59)。setFullYear()设置Date对象中的年份（四位数字）。setMonth()设置Date对象中月份(0~11)。setDate()设置Date对象中月的某一天(1~31)。Data对象常用方法（续1）延时符使用表格中部分方法，可以编写显示当前年月日的JavaScript代码如下：代码完成后在浏览器中运行结果如图4-5-5所示：1.<pid="demo">单击按钮显示当前年月日。</p>2.<buttononclick="myFunction()">显示</button>3.<script>4.functionmyFunction(){5. 6. vard=newDate();7. 8. varyear=d.getFullYear();9. varmonth=d.getMonth();10. varday=d.getDate();11. 12. varx=document.getElementById("demo");13. x.innerHTML=year+'年'+month+'月'+day+'日';14.}15.</script>Data对象常用方法（续2）延时符在前面代码中继续使用表格中的其它方法，还可以实现查阅去年今天是星期几的功能。代码如下，代码完成后在浏览器中运行结果如图所示：代码完成后在浏览器中运行结果如图4-5-5所示：1.<pid="demo">我是显示区域。</p>2.<buttononclick="myFunction(0)">显示今天周几</button>3.<buttononclick="myFunction(1)">去年今天周几</button>4.<script>5.functionmyFunction(flag){ 6. vard=newDate(); 7. varyear=d.getFullYear();8. varday;9. varweekday=['日','一','二','三','四','五','六']10. varstr="今天是周"; 11. varx=document.getElementById("demo"); 12. if(flag==1){13. d.setFullYear(year-1);14. str="去年今天是周"15. } 16. day=d.getDay();17. x.innerHTML=str+weekday[day];18.}19.</script>定时器方法延时符JavaScript提供定时执行代码的功能，叫做定时器（timer），主要由setTimeout()和setInterval()这两个函数来完成。它们向任务队列添加定时任务。(1)setTimeout()函数setTimeout函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。语法如下：参数说明：setTimeout函数接受两个参数，第一个参数func|code是将要推迟执行的函数名或者一段代码，第二个参数delay是推迟执行的毫秒数。上面代码会先输出start和stop，然后等待1000毫秒再输出pause。注意，console.log(“pause”)必须以字符串的形式，作为setTimeout的参数。如果推迟执行的是函数，就直接将函数名，作为setTimeout的参数。timerId=setTimeout(func|code,delay);1.console.log('start');2.setTimeout('console.log(“pause”)',1000);3.console.log('stop');1.functionf(){2.console.log('pause');3.}4.setTimeout(f,1000);定时器方法（续1）延时符通过上面的语法学习，我们可以简单的使用setTimeout函数实现经典的数字时钟。代码如右侧所示：代码运行结果如图4-5-7所示：1.<divid="txt"></div>2.3.<script>4.functionstartTime(){5.vartoday=newDate();6.varh=today.getHours();7.varm=today.getMinutes();8.vars=today.getSeconds();9.//在numbers<10的数字前加上010.m=checkTime(m);11.s=checkTime(s);12.document.getElementById("txt").innerHTML=h+":"+m+":"+s;13.vart=setTimeout(function(){startTime()},500);14.}15.16.functioncheckTime(i){17.if(i<10){18.i="0"+i;19.}20.returni;21.}22.</script>定时器方法（续2）延时符(2)setInterval函数setInterval函数的用法与setTimeout完全一致，区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行。上面代码中，每隔1000毫秒就输出一个2，会无限运行下去，直到关闭当前窗口。1.vari=12.vartimer=setInterval(function(){3.console.log(2);4.},1000)定时器方法（续1）延时符前面面是一个通过setInterval方法实现经典的数字时钟的例子。代码如右侧所示：代码运行结果如图4-5-8所示：1.<divid="txt"></div>2.3.<script>4.functionstartTime(){5.vartoday=newDate();6.varh=today.getHours();7.varm=today.getMinutes();8.vars=today.getSeconds();9.//在numbers<10的数字前加上010.m=checkTime(m);11.s=checkTime(s);12.document.getElementById("txt").innerHTML=h+":"+m+":"+s;13.vart=setInterval(function(){startTime()},500);14.}15.16.functioncheckTime(i){17.if(i<10){18.i="0"+i;19.}20.returni;21.}22.</script>取消定时器方法延时符定时器函数setTimeout和setInterval函数，都返回一个整数值，表示计数器编号。将该整数传入clearTimeout和clearInterval函数，就可以取消对应的定时器。上面代码中，每隔1000毫秒就输出一个2，会无限运行下去，直到关闭当前窗口。1.varid1=setTimeout(f,1000);2.varid2=setInterval(f,1000);3.4.clearTimeout(id1);5.clearInterval(id2);定时器方法（续1）延时符前面代码中，回调函数f不会再执行了，因为两个定时器都被取消了。利用这一点，可以写一个函数，通过按钮让前面制作的数字时钟停止，当然需要注意停止函数必须和定时器函数匹配，clearTimeout匹配setTimeout；clearInterval匹配setInterval。右面代码以clearTimeout匹配setTimeout为例，clearInterval匹配setInterval代码雷同不再列举：上面代码中，先调用setTimeout得到一个定时器编号t，然后把编号t关闭了定时器使得数字时钟停止。如图4-5-9所示：1.<divid="txt"></div>2.<buttononclick="stop()">停止</button>3.<script>4.vart; //这里必须定义为全局变量5.functionstartTime(){6.vartoday=newDate();7.varh=today.getHours();8.varm=today.getMinutes();9.vars=today.getSeconds();10.//在numbers<10的数字前加上011.m=checkTime(m);12.s=checkTime(s);13.document.getElementById("txt").innerHTML=h+":"+m+":"+s;14.t=setTimeout(function(){startTime()},500);15.}16.functioncheckTime(i){17.if(i<10){18.i="0"+i;19.}20.returni;21.}22.functionstop(){23. clearTimeout(t)24.}25.</script>任务实施延时符任务分析技术分析与实现完成代码任务分析延时符新歌发布倒计时任务，需要每秒(即1000毫秒)重新刷新一次倒计时时间，因此非常适合使用定时器函数实现。在本任务中选用setInInterval函数实现每秒运行一次自定义函数mytime()，再由mytime()函数使用Data对象将当前时间和发布时间进行计算得出发布剩余时间。最后再通过DOM对象将剩余时间显示在页面中即可实现任务完成要求。所以这项任务可以分解为3项子任务如图4-5-3所示：技术分析与实现：步骤1延时符步骤1：定义函数mytime()。为了方便实现代码重复运行，自定义函数将为这些重复运行的代码形成容器。1.functionmytime(){2.｝技术分析与实现：步骤2延时符步骤2：计算倒计时剩余时间1.创建当前时间，并获取当前时间的时分秒数值；2.计算出到新歌发布时间的剩余时间maxtime的值；3.计算出到新歌发布时间的剩余时间分minutes和秒seconds的值；实现代码如下：1.functionmytime(){2.vartim,hour1,min1; 3.tim=newDate();//创建时间对象4.hour1=tim.getHours();//获取当前时间的小时数 5.min1=tim.getMinutes();//获取当前时间的分钟数6.varsec1=tim.getSeconds();//获取当前时间的秒数7.varmaxtime=3600-min1*60-sec1;//当前时间距离发布时间的秒数8.varminutes=Math.floor(maxtime/60);9.varseconds=maxtime%60;10.}技术分析与实现：步骤3延时符步骤3：显示倒计时剩余时间1.获取显示剩余分钟值的DOM对象m；2.获取显示剩余秒值的DOM对象s；3.使用m和s的innerHTML属性将前面步骤中剩余时间进行显示；4.使用条件运算符将分和秒不足两位数时前方补“0”；代码如下所示：至此，自定义函数mytime()完成。1.varm=document.getElementById("m"),2. s=document.getElementById("s");3.4.m.innerHTML=minutes<10?"0"+minutes:minutes;5.s.innerHTML=seconds<10?"0"+seconds:seconds;技术分析与实现：步骤4延时符步骤4：定时器重复运行自定义函数，使用setInterval函数每1000毫秒执行mytime函数一次。代码如下所示：1.setInterval('mytime()',1000);//定时运行mytime()函数任务实现讲解谢谢观看！发布评论功能实现Web前端技术延时符CONTENTS目录01任务描述03知识点导图02学习目标

04相关知识05任务实施延时符任务描述延时符任务描述随着web2.0走向成熟，页面更加强调用户的互动和内容的自制。而且当前页面中的评论或者留言，可以让网页用户参与度更高，并使得页面内容保持新鲜度，根据数据显示评论越多页面的可读性越高，用户的粘度越好。因此，评论区成为了当前的内容性页面中必不可少的重要组成部分。本任务就是使用JavaScript实现评论区这一种重要的页面组件的。效果如图4-6-1所示。延时符学习目标延时符学习目标综合运用JavaScript知识；掌握创建和删除节点的方法；掌握操作子节点和父节点的方法；知识目标能够根据要求编写JavaScript代码实现页面评论区功能；能够合理使用DOM节点的各项操纵；技能目标延时符培养综合项目开发的能力；培养严谨踏实的学习习惯；培养敢于创新的精神；素养目标知识点导图延时符知识点导图延时符相关知识延时符创建DOM节点

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

温馨提示

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

web前端技术 课件 模块４ 网站交互页面实现

文档简介

温馨提示

最新文档

评论

相关文档

web前端技术课件模块４网站交互页面实现