PHP项目案例开发从入门到实战-微课视频版课件第章-前端技术_第1页
PHP项目案例开发从入门到实战-微课视频版课件第章-前端技术_第2页
PHP项目案例开发从入门到实战-微课视频版课件第章-前端技术_第3页
PHP项目案例开发从入门到实战-微课视频版课件第章-前端技术_第4页
PHP项目案例开发从入门到实战-微课视频版课件第章-前端技术_第5页
已阅读5页，还剩61页未读， 继续免费阅读

下载本文档

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

文档简介

21世纪高等学校计算机类课程创新规划教材–微课视频版PHP项目案例开发从入门到实战马石安魏文平清华大学出版社2020.10主要内容本教材分为两部分，共10章。第I篇项目准备第1章运行环境第2章前端技术第3章后端技术第4章PHP框架清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page2第2页-马石安2022/2/5/魏文平主要内容第II篇项目案例第5章内容管理系统第6章日程管理系统第7章在线课程系统第8章校园信息平台第9章电子商务系统第10章在线办公系统清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page3第3页-马石安2022/2/5/魏文平第2章前端技术2.1网页设计2.2页面元素操作2.3网页事件处理2.4前端框架简介清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page4第4页-马石安2022/2/5/魏文平2.1网页设计1、网页文档对于PHP项目来说，网页文档就是指项目中的html或php文件。文档结构网页文档由HTML标签、CSS样式，以及JavaScript脚本代码组成。清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page5第5页-马石安2022/2/5/魏文平网页设计HTML标记CSS样式JavaScript代码清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page6第6页-马石安2022/2/5/魏文平网页设计基本语法HTML文档是在普通文件中的文本上加上标记(或者称为标签)，使其达到预期的显示效果，当浏览器打开一个HTML文档时，会根据标记的含义显示HTML文档中的内容。

标记HTML用于描述功能的符号称为标记。例如,<html>、<div>等。标记通常分为双标记和单标记两种类型。双标记由开始标签和结束标签构成，必须成对出现。单标记是指标记单独出现，只有开始标记而没有结束标记。清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page7第7页-马石安2022/2/5/魏文平网页设计

属性HTML可以为某些标记附加一些信息，这些附加信息被称为属性。通过属性可以设置HTML元素更丰富的信息。例如：<divstyle=”color:red;”>PHP程序设计</div>其中，“style”为属性名，“color:red;”为属性值。清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page8第8页-马石安2022/2/5/魏文平网页设计

注释注释标记用于在HTML文档中插入注释。注释内容并不会在浏览器中显示出来，它会被浏览器忽略。例如，对于下面的标签：<!--注释内容-->清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page9第9页-马石安2022/2/5/魏文平网页设计

HTML5语法变化为了兼容不统一的页面文档代码，HTML5在语法方面做出了一些改变。

标签不再区分大小写

允许属性值不使用引号例如，<inputtype=text/>中的“text”可以不使用引号。

允许部分属性的属性值省略例如，<inputtype=textreadonly有属性名没有属性值。/>中的“readonly”只清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page10第10页-马石安2022/2/5/魏文平网页设计2、网页页面布局所谓网页页面的布局，就是设计页面的整体结构。网页布局的方式有很多，常用的有两种，一种是使用表格(<table>)，另一种是使用div+css的方式，目前主要使用第2种方法来进行网页布局。单列布局单列布局是指网页的头部、主体、底部位于网页的同一列中。清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page11第11页-马石安2022/2/5/魏文平网页设计清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page12第12页-马石安2022/2/5/魏文平网页设计双列布局双列布局就是将网页划分为左、右两个部分，分为左侧固定、右侧自适应，或右侧固定、左侧自适应等多种形式。清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page13第13页-马石安2022/2/5/魏文平网页设计三列布局三列布局就是将网页划分为左、中、右三个部分，其中左、右部分宽度固定，中间主体部分自适应。清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page14第14页-马石安2022/2/5/魏文平网页设计3、网页设计实例【例2.6】清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page15第15页-马石安2022/2/5/魏文平2.2页面元素操作当网页被加载时，浏览器会创建网页的文档对象模型DOM。DOM是DocumentObjectModel的缩写，其中的Document指HTML文档。HTMLDOM定义了用于HTML的一系列标准对象，以及访问和处理HTML文档的标准方法。通过DOM，可以访问到网页中的所有HTML元素，连同它们所包含的文本和属性。通过JavaScript对网页中的元素进行访问与操作，是Web前端开发的一项重要技术。清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page16第16页-马石安2022/2/5/魏文平页面操作1、HTMLDOM模型HTMLDOM模型被构造为对象树的形式。例如，对于下面的HTML文档清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page17第17页-马石安2022/2/5/魏文平页面操作清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page18第18页-马石安2022/2/5/魏文平页面操作2、DOM操作对网页元素的操作，就是对页面DOM树中对象的操作，这些操作主要包括：动态创建HTML元素、更改元素属性、更改元素样式，以及对网页事件进行处理等。查找HTML元素通过JavaScript对网页元素进行操作，首先必须找到该HTML元素。有多种方法来实现HTML元素的查找，例如，通过元素标签名、通过元素id属性值、通过元素类名等。清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page19第19页-马石安2022/2/5/魏文平页面操作(1)通过标签名称查找HTML元素通过调用document的getElementsByTagName()方法，可以非常方便地查找网页中的所有该标签元素，此方法返回一个对象数组。例如：varp=document.getElementsByTagName("p");表示查找网页中所有的p标签元素。清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page20第20页-马石安2022/2/5/魏文平页面操作在控制台中输入代码查找到的结果集清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page21第21页-马石安2022/2/5/魏文平页面操作(2)通过id查找HTML元素如果HTML元素具有ID属性，则可以通过调用document的getElementById()方法来查找到该HTML元素，此方法返回一个HTMLDOM对象。例如：varelement=document.getElementById("main");表示查找ID为main的HTML元素。若元素存在，则以对象的形式返回该元素；否则返回null。清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page22第22页-马石安2022/2/5/魏文平页面操作(3)通过类名查找HTML元素通过调用document的getElementsByClassName()方法，查找网页中的所有具有该类的HTML元素，此方法返回一个对象数组。例如：varnav=document.getElementsByClassName("nav");表示查找网页中所有的类属性值为nav的HTML元素。清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page23第23页-马石安2022/2/5/魏文平页面操作(4)通过CSS选择器查找HTML元素通过调用document的querySelector()、querySelectorAll()方法，可以使用CSS选择器来查找网页中的HTML元素。第一个方法返回一个HTMLDOM对象，第二个方法返回所有查找到的对象。例如：document.querySelector("li");//语句1document.querySelectorAll("li");//语句2语句1返回查找到的第一个HTML元素；语句2返回查找到的所有的HTML元素。如图2.10所示。清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page24第24页-马石安2022/2/5/魏文平页面操作清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page25第25页-马石安2022/2/5/魏文平页面操作查询HTML元素HTML元素在DOM对象树中称为元素节点，除了元素节点外，还有属性节点、文本节点等。节点一般具有节点类型、节点名称和节点的值等属性。对于如下所示的HTML代码：<h1id="title"style="color:red">PHP项目实践与课程设计指导</h1>元素节点为H1；属性节点为id和style；文本结点为#text，它的值为“PHP项目实践与课程设计指导”。清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page26第26页-马石安2022/2/5/魏文平页面操作元素节点清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page27第27页-马石安2022/2/5/魏文平页面操作属性节点清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page28第28页-马石安2022/2/5/魏文平页面操作文本节点清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page29第29页-马石安2022/2/5/魏文平页面操作改变HTML元素内容修改HTML元素内容的最简单的方法，就是使用元素的innerHTML属性。例如：document.getElementsByTagName("h1")[0].innerHTML="面向对象程序设计"可以将教材图2.10所示的页面中的“PHP项目实践与课程设计指导”文本更改为“面向对象程序设计”。注意，通过标签查找h1元素，返回的是一个对象数组。清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page30第30页-马石安2022/2/5/魏文平页面操作改变HTML元素样式修改HTML元素样式，使用元素的style属性。例如语句：document.getElementsByTagName("h1")[0].style.color="red"可以将教材图2.10所示的页面中的“PHP项目实践与课程设计指导”文本颜色修改为红色。也可以采用如下方式：h1.setAttribute('style','color:green')清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page31第31页-马石安2022/2/5/魏文平页面操作创建新的HTML元素向HTMLDOM树中添加新元素，必须首先创建该元素(元素节点)，然后再向一个已存在的元素追加元素。【例2.8】通过JavaScript代码，向如图2.11所示的页面代码中添加一个li元素，该元素的文本为“出版时间：2020年12月”。清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page32第32页-马石安2022/2/5/魏文平页面操作移除HTML元素移除HTML文档中的元素，使用document的removeChild()方法。例如，要删除图2.14中新增加的li元素，只需要在控制台中执行下面的语句即可。ul.removeChild(ul.childNodes[5])；注意，上述代码中的ul为document.getElementsByTagName('ul')[0]的值。清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page33第33页-马石安2022/2/5/魏文平2.3网页事件处理事件是HTML文档或者浏览器窗口中发生的特定的交互瞬间，它是用户或浏览器自身执行的某种动作。例如，鼠标单击、页面加载、窗口缩放等。事件是JavaScript与DOM交互的桥梁。事件发生后给出的响应，就是事件处理。清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page34第34页-马石安2022/2/5/魏文平清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page11第11页-马石安2022/2/5/魏文平清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page33第33页-马石安2022/2/5/魏文平是一种基于标准化并被广泛支持的技术，不需要对于PHP项目来说，网页文档就是指项目中的html或中左、右部分宽度固定，中间主体部分自适应。事件是JavaScript与DOM交互的桥梁。访问和处理HTML文档的标准方法。清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page40第40页-马石安2022/2/5/魏文平清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page36第36页-马石安2022/2/5/魏文平14中新增加的li元素，只需要在控如，通过元素标签名、通过元素id属性值、通过元素10所示的页面中的“PHP项目实践与对于如下所示的HTML代码：表单是web应用程序与用户交互的桥梁，是非常重要表示查找网页中所有的类属性值为nav的HTML元素。事件绑定1、事件绑定事件不能单独存在，需要绑定到特定的元素对象上才能被感知。事件的绑定有3种方法，即标签属性、对象属性、对象方法。标签属性直接将事件绑定到元素标签上。例如，若需要在网页中的h2元素上绑定鼠标左键单击事件，则使用如下代码：<h2onclick="alert('我被点击了！')">PHP项目实践与课程设计指导</h2>清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page35第35页-马石安2022/2/5/魏文平事件绑定对象属性将事件作为对象属性，绑定到元素对象上。例如，要实现上述1中的单击事件的绑定，使用如下代码：清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page36第36页-马石安2022/2/5/魏文平事件绑定对象方法使用对象的addEventListener()方法，来监听对象事件，从而实现事件的绑定。例如:清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page37第37页-马石安2022/2/5/魏文平事件绑定【例2.9】事件绑定示例。网页中有3个li标签，要求用3种方法分别将单击事件绑定到标签上。实例演示清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page38第38页-马石安2022/2/5/魏文平事件处理2、事件处理对事件的处理都是在回调函数中进行的，所以，只需要在回调函数中添加相应的代码，完成预定的处理功能即可。鼠标事件鼠标事件是在JavaScript页面操作中使用最频繁的事件，利用鼠标事件可以实现一些特殊的单击和移动效果。如例2.10所示。清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page39第39页-马石安2022/2/5/魏文平事件处理【例2.10】使用JavaScript代码，实现水平菜单的展开与收缩。效果如图所示。实例演示清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page40第40页-马石安2022/2/5/魏文平事件处理键盘事件键盘事件也是在网页操作中使用频繁的事件，利用该事件可以实现页面的快捷操作。常见的键盘事件主要有onkeyup、onkeydown和onkeypress。【例2.11】键盘事件示例。示例功能描述：单击键盘中的空格键，改变页面中文本的颜色。实例演示清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page41第41页-马石安2022/2/5/魏文平事件处理表单事件表单是web应用程序与用户交互的桥梁，是非常重要的页面元素。表单事件主要是对元素获得或失去焦点、表单提交等动作进行控制。【例2.12】表单事件示例。示例功能描述：对用户输入的数据进行验证。实例演示清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page42第42页-马石安2022/2/5/魏文平事件处理事件对象在JavaScript中，事件对象用event表示。它代表了事件状态，例如事件发生的元素、键盘状态、鼠标位置和鼠标按钮状态等。【例2.13】event对象应用示例。实例演示清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page43第43页-马石安2022/2/5/魏文平AJAX技术3、AJAX技术AJAX是AsynchronousJavaScriptandXML的缩写，意思是异步的JavaScript和XML。AJAX是一种运用于浏览器的技术，它可以在浏览器和服务器之间通过异步通信机制进行数据通信，从而允许浏览器向服务器获取少量信息，而不是刷新整个页面。常常被称为无刷新技术。清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page44第44页-马石安2022/2/5/魏文平AJAX技术技术优点

减轻服务器的负担AJAX的原则是“按需取数据”，可以最大程度地减少冗余请求，从而减轻对服务器造成的负担。

无刷新更新页面减少用户心理和实际等待时间，获得良好的用户体验

减轻服务器和带宽的负担把部分服务器负担的工作转交给客户端，利用客户端闲置的能力来处理任务，从而减轻服务器和带宽的负担，节约空间和宽带租用成本。清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page45第45页-马石安2022/2/5/魏文平AJAX技术

可以调用外部数据

是一种基于标准化并被广泛支持的技术，不需要下载插件等资源

进一步促进了Web页面表现形式与数据的分离。清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page46第46页-马石安2022/2/5/魏文平AJAX技术工作原理传统的Web交互方式是“提交/等待/重新显示”，用户的动作总是与服务器处理同步，用户在网页上的操作转化为HTTP请求传回服务器，而服务器接受请求以及相关数据、解析数据并将其发送给相应的处理单元后，将返回的数据转成HTML页面返还给用户。而当服务器处理数据的时候，用户只能等待，每一步操作都需要等待服务器返回新的网页。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间，这就导致了用户页面的响应比本地应用慢很多。清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page47第47页-马石安2022/2/5/魏文平AJAX技术运用了AJAX技术的Web应用，相当于在客户端和服务器端之间添加了一个中间层，称为AJAX引擎。它实现了浏览器与服务器进行异步交互的通信能力，从而使用户从请求/响应的循环中解脱出来。如下图所示。清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page48第48页-马石安2022/2/5/魏文平AJAX技术清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page49第49页-马石安2022/2/5/魏文平AJAX技术AJAX的XmlHttpRequest对象AJAX技术中的核心技术是XMLHttpRequest，它是一个具有应用接口的JavaScript对象，能够使用超文本传输协议HTTP连接一个服务器。通过XMLHttpRequest对象，AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新页面。清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page50第50页-马石安2022/2/5/魏文平AJAX技术【例2.14】使用AJAX验证表单数据。问题描述：网站或其他Web应用的用户名都是唯一的，因此，在进行用户注册过程中，需要及时检测用户输入的数据，提示用户该用户名是否已经被注册。清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page51第51页-马石安2022/2/5/魏文平2.4前端框架简介上面介绍的网页设计、事件处理等，采用的都是原始的HTML5、CSS3和JavaScript前端技术。在实际的Web项目开发过程中，经常使用的是由第3方开发的前端框架。例如jQuery、Bootstrap、Layui、Angular、React、Vue等。1、jQueryjQuery是一个JavaScript库，也称为JavaScript框架。清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page52第52页-马石安2022/2/5/魏文平前端框架jQuery的加载

加载本地jQuery先将jQuery库文件下载到本地，并将其复制到项目中。然后使用下面的代码加载它。<scriptsrc="jquery/jquery-3.3.1.min.js"></script>

加载远程jQuery很多大的互联网公司都拥有自己的公共资源库，这些公共资源库中一般都存放有jQuery，可以直接在项目中加载它。如百度jquery1.6.4cdn引用地址为：清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page53第53页-马石安2022/2/5/魏文平前端框架基本语法jQuery语法是为HTML元素的选取编制的，可以对元素执行某些操作。格式如下：$(selector).action()其中，美元符号$定义jQuery；选择符（selector）“查询”和“查找”HTML元素；jQuery的action()执行对元素的操作。例如：$(this).hide()//隐藏当前元素$("p").hide()//隐藏所有段落$(".test").hide()//隐藏所有class="test"的元素$("#test").hide()//隐藏id="test"的元素清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page54第54页-马石安2022/2/5/魏文平前端框架常用方法jQuery的方法非常多，常用的有以下几类：(1)遍历DOM元素(2)创建DOM元素(3)添加元素到DOM结构中(4)获取和修改CSS及属性(5)处理结果集(6)使用动画及其他效果(7)处理事件(8)AJAX控制函数清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page55第55页-马石安2022/2/5/魏文平前端框架应用实例【例2.15】使用jQuery创建折叠框式菜单。清华大学出版社–PHP项目案例开发从入门到实战版权所有，未经许可，不得复制Page56第56页-马石安2022/2/5/魏文平前端框架2、BootstrapBootstrap是由Twitter(著名的社交网站）推出的前端开源工具包，它基于HTML、CSS、

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

温馨提示

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

最新文档

评论

0/150

提交评论