为帮助读者深入理解Web 开发工程师需要掌握的编程技能,本书凝结作者多年的教学心得与实战经验,旨在从前端、后端和全栈的概念出发,揭示Web 应用的工作原理和设计思想,精心挑选*基本且*重要的编程知识,结合实际案例,详细阐述Web 开发技术和编程设计思想是如何应用于解决实际问题的。本书坚持带着任务学习的理念,帮助初学者打牢Web 开发的基础,以理解编程技术是如何落实到具体Web 应用中的。希望读者能从本书获得对Web 开发的基本认识,具备建设全栈网站的能力,并愿意在Web 应用的开发领域继续深耕。
(1)完善诠释Web应用设计思想和搭建流程;
(2)凝练梳理Web 开发岗位自我提升实践路径。
人工智能技术的快速发展,掀起了人们学习编程的浪潮,因为只有通过学习编程,人类才不会被机器取代,并且有可能成为赫拉利眼中的神人,成为统治机器的领导者。过去,编程好像只是一些聪明人的跑马场,普通人只能在场外转悠。然而,网络打破了入场的栅栏,借助网络,世界各地的人们频繁且高效地进行思想交流。于是,一个空前的创新时代出现了。近年来,只要几个月就会冒出一门新的编程语言,仿佛人人都能发明一门语言,我们是如此的幸运,赶上了这么好的时代。如果你也想成为一名发明家,那么,请从学习编程开始。
众所周知,学习编程的步要学习一门语言,那么该如何选择呢?是基础的C语言,还是高级的Java语言?如果你也有上面的疑惑,请参考一下每年的十大流行编程语言排行榜。2020年排在位是JavaScript,可见它是受欢迎的语言,原因是JavaScript不仅用途广泛、使用简单,并且具有良好的可移植性;它的应用常见于Web开发,比如网站和App,还可以用于开发游戏。重要的是,当今是移动互联网的时代,Web开发技术已经成为刚需。如果你想学习Web开发,请从本书开始。
什么是Web全栈开发
Web全栈开发的概念是扎克伯格在2014年次提出的,但到目前为止,人们尚未对Web全栈开发给出一致的定义。普遍比较认可的一种观点是,一个Web应用产品(比如网站、App)从技术方面来看,可以分为前端和后端,而全栈就是涵盖了前后端两种技术栈的总称。具体来说,这些技术栈包括前端开发(HTML、CSS和JavaScript)、服务器部署、数据库(比如MySQL和MongoDB)、后端开发(PHP或Nodejs)、性能优化技术(比如缓存)等。如果要全面掌握这些技术至少需要五年,然而这不是本书的意图。本书只是希望从前/后端编程技术出发,带你初步领略一下Web全栈世界。本书的写作目的有以下三个:
,对初学者友好,通过揭示Web应用的工作原理和Web开发需要的编程技术,结合大量实例,帮助你轻松打开Web开发世界的大门;
第二,详细地描述搭建完整Web应用的全部流程,便于你快速了解前端工程师需要做什么,后端工程师更看重什么,以及前端工程师与后端工程师之间如何配合;
第三,清晰地展示Web开发岗位的职业晋升路线,先成为一名前端工程师,再转为后端工程师,逐步升级到全栈工程师,终成为系统架构师。
编程语言只是工具
市面上大多数Web开发书籍都是以编程语言的语法介绍和使用为主线,包括罗列HTML的标记,展示CSS的样式属性和选择器的用法,讲解JavaScript的基本语法等。很多读者表示,这些语言学完后,还是不会做Web开发,也记不住这么多的语法。原因在于,这类手册式的书,只是为你提供了一个个独立的知识点,而具体应用时,则需要对这些知识点进行多种组合和不断实践。但是,关于如何去组合和实践,却没有告诉你。
本书想告诉你的是,编程语言只是工具,是帮助你建设一个Web应用的手段而已。所以,你应该有个具体的挑战目标,想要搭建一个什么样的网站或App,然后对应着各个页面的功能,去学习所需的技术就好,没有必要把每一门编程语言的所有语法都学一遍再动手;实话告诉你,很多CSS的样式属性你可能未来十年也用不到。实际上,学习Web开发技术,树立一个明确的目标才是重要的,而编程语言只是实现目标的手段,千万不要本末倒置。有了目标之后,就要不断尝试与实践,这才是打开Web开发世界大门的正确方式。
主张带着任务主动学习
有效的学习一定是主动的,只有当你为了解决问题而去有意识地学习,才会真正有效果。如果你以前只是一味地跟着作者的思路走,那么大概率是,你以为看完了全书好像什么都会了,实际上,一周过后,你会发现,全书跟你一点关系都没有。因此,本书提倡以任务为主的学习,通过给出若干个任务(示例),让你思考并选择合适的技术去完成任务。要知道,所有技术只是为你建造Web大楼提供水泥和钢筋而已,其设计和实施才是核心,而这两项重要任务的决定权完全在你。
全书内容框架
全书从总体上来看,可以分为4个部分。
部分是准备工作。第1章,主要介绍Web的发展历史和规律,重点揭示Web的工作原理。第2章,安装必要的开发工具,为正式的开发做准备。
第二部分是详细阐述前端开发技术。第3~5章,围绕前端的基础技术展开,包括HTML、CSS和JavaScript这三大核心技术,能够实现交互式网页的基本搭建。第6~9章,深入地介绍对象的使用,并重点介绍框架的用法和对于快速开发的意义。
第三部分是关于后端开发技术的介绍。第10~13章,重点介绍服务器端的开发技术,包括PHP脚本的用法,MySQL数据库技术能做什么,以及PHP和MySQL之间的合作。
第四部分(第14章)是一个综合项目。目标是通过一个综合项目实战,展示如何将前端技术和后端技术相结合,实现一个强交互性的全栈。
本书适合哪些读者
本书可以作为想要成为具有竞争力的全栈工程师的入门书籍。其中,前端技术包括HTML、CSS、JavaScript,以及CSS的框架Bootstrap和JavaScript的jQuery;后端技术主要是PHP和MySQL。或许你已经听说过这些技术,但好奇为什么没有提到当下流行的框架,Vue.js和AngularJS,以及后端的代表Node.js,原因是它们并不适合初学者(连全栈是什么都不懂的小白),它们更适用已经练就了基本功并且已经具备实战经验的开发人员,它们是用来提高效率的,而不是领你入门的。如果你现在只是一个程序员小白,恭喜你,你选对了书。因为学完本书,我保证你将对Web全栈开发有一种原来如此简单的感觉,因为我不只是手把手教你做Web开发,而是将其中暗藏的玄机(技巧和原理)告诉你,让你不至于为了一个坑而陷进去很久出不来。但同时,我要郑重声明,本书不是手册式教程,所以不会列出Web开发需要的所有语法和用法,而是会挑选出重点且具有启发意义的内容,帮助你尽快上路,从而找到进入Web世界的钥匙。
本书配套资源
对于执着于源代码的读者,我自然不敢怠慢,只要你从正版途径购买了本书,书中所有的源代码会随书附赠;除此之外,为了帮助读者理清图书脉络,也为了便于将本书用作培训教学用书的老师方便讲课,我抽取了全书的框架内容制作了PPT课件。以上内容作为本书的配套资源赠送给读者,读者可以通过封底的二维码和下载链接提取使用。
为了保证读者获取配套资源的顺畅度,还有以下备用链接,以作不时之需。
链接:https://pan.baidu.com/s/1HlP4suKFAVjQ5cu-Xcu-8A
提取码:4m63
感谢与交流
受我自身能力所限,书中难免会有对技术解读的不当和偏颇之处,如果你在阅读本书的过程中发现了类似的错误与不恰当的表述,诚挚地欢迎你在github上写下你的意见和建议(https://github.com/cathydongxueyan/Web-full-stack-develop),我会对你表示极大的感激,并将尽努力将其完善。
董雪燕,北京联合大学讲师,澳大利亚昆士兰科技大学计算机科学博士,董雪燕,北京联合大学讲师,昆士兰科技大学计算机科学博士,研究领域语音识别,以作者身份发表数十篇SCI,EI英文文章,国内核心期刊文章2篇。技术背景:具有10年Web开发经验,包括PC端网站建设和移动端混合App开发经验,获得高级软件测试工程师证书。教学上主要讲授《计算机导论》,《网站建设与开发》,《网站优化与推广》,《移动终端开发技术》,《软件工程》以及各种实践类课程。在实际的教学中,擅长将复杂的理论知识以通俗易懂的方式讲述,表达思路清晰,逻辑严谨。通过与企业长期合作打造出实战案例融入课堂,使学生受益匪浅。
第1章 Web到底是怎么一回事儿
1.1 Web的前世、今生和未来.. 1
1.1.1 被动的Web 1.0. 1
1.1.2 交互的Web 2.0. 1
1.1.3 智能的Web 3.0. 2
1.2 每一次浏览网页都发生了什么.. 3
1.2.1 通信... 3
1.2.2 统一资源定位器... 5
1.2.3 浏览器如何理解网页... 6
1.2.4 从程序方面理解网页... 8
1.3 Web应用开发模式的演变.. 10
1.4 什么是前端、后端和全栈.. 11
1.4.1 吸引用户的前端... 11
1.4.2 数据为王的后端... 11
1.4.3 综合型全栈及案例分析... 12
1.5 本章小结.. 13
第2章 开发之旅前的准备工作
2.1 代码编辑工具.. 14
2.1.1 的Notepad . 14
2.1.2 极速开发者的利器:HBuilderX.. 14
2.2 测试环境Chrome浏览器.. 16
2.3 本地服务器的搭建.. 17
2.3.1 Xampp的安装... 17
2.3.2 Xampp的配置... 18
2.4 个Web应用hello,world. 19
2.5 本章小结.. 20
第3章 构建网页内容HTML基础
3.1 HTML一门关于标记的语言.. 21
3.1.1 普通文本VS超文本... 21
3.1.2 标签的基本用法... 22
3.1.3 属性的基本用法... 23
3.2 超链接标记小案例:做一个个人博客主页.. 23
3.3 关于路径.. 26
3.3.1 路径大考验... 26
3.3.2 相对路径法则... 28
3.4 列表标签小案例:制作国际新闻页面.. 28
3.4.1 列表标签的妙用... 28
3.4.2 列表标签的基本用法... 29
3.5 表格标签小案例:制作一张财务季度报表.. 30
3.5.1 表格的使用... 30
3.5.2 表格跨行跨列的秘诀... 31
3.6 表单小案例:制作求职申请表.. 32
3.6.1 表单标签... 32
3.6.2 表单用法大揭秘... 34
3.7 一对好兄弟Get请求和Post请求.. 34
3.7.1 数据在地址栏中的Get请求... 34
3.7.2 数据在隐秘处的Post请求... 35
3.8 本章小结.. 37
第4章 网页一定要漂亮CSS入门
4.1 为什么需要CSS. 38
4.1.1 什么是CSS. 38
4.1.2 CSS的工作原理... 39
4.1.3 CSS带来了哪些变化... 40
4.2 容器的作用.. 41
4.2.1 两个常用的容器:div和span. 42
4.2.2 容器的实际应用:添加样式... 43
4.2.3 CSS样式的基本用法... 44
4.3 为什么是层叠样式表.. 45
4.3.1 四种定义样式的方式... 45
4.3.2 样式冲突怎么办... 46
4.4 一切都是盒子盒子模型.. 48
4.4.1 盒子模型的基本定义... 49
4.4.2 盒子使用定理... 50
4.4.3 盒子在页面布局中的两种常见用法... 50
4.5 选择器让样式的应用更有目标感.. 54
4.5.1 id选择器... 54
4.5.2 class选择器... 55
4.5.3 class选择器与id选择器的嵌套使用... 57
4.6 元素的浮动.. 58
4.6.1 一行多列... 59
4.6.2 多个元素在一行... 60
4.6.3 多个盒子元素在一行... 61
4.6.4 清除浮动... 62
4.7 关于伪类.. 65
4.7.1 伪类和伪类元素... 65
4.7.2 利用伪状态修改选项卡... 65
4.7.3 小案例:让图片动起来... 66
4.8 本章小结.. 67
第5章 网页交互的核心JavaScript入门
5.1 前端三兄弟:HTML、CSS和JavaScript 69
5.1.1 各肩重任... 69
5.1.2 在程序中的配合... 70
5.1.3 代码的组织规范... 71
5.2 JavaScript工作原理大揭秘.. 73
5.2.1 编译型语言VS 解释型语言... 73
5.2.2 交互式网页的精髓... 74
5.3 像程序员一样思考.. 77
5.3.1 看图猜价格游戏... 77
5.3.2 程序控制的三种结构... 82
5.4 JavaScript基础.. 83
5.4.1 存储数据:变量与常量... 83
5.4.2 做计算:运算符和表达式... 88
5.4.3 功能实现的代码块:函数... 96
5.4.4 变量大集合:对象... 99
5.5 常用的两个原装对象:String和Array. 102
5.5.1 字符串对象:String. 102
5.5.2 数组对象:Array. 103
5.5.3 JavaScript的核心API 104
5.6 本章小结.. 104
第6章 拜访三大对象:Window、Document和Event
6.1 三大对象概述.. 107
6.1.1 三大对象的作用... 107
6.1.2 事件驱动... 108
6.2 认识window 对象.. 109
6.2.1 Window对象的属性用法... 111
6.2.2 Window对象中方法的应用... 112
6.2.3 Window对象中事件的用法... 113
6.2.4 超好用的计时器... 114
6.3 理解document对象.. 117
6.3.1 一起来画DOM树... 117
6.3.2 DOM让JavaScript与元素互动起来... 118
6.3.3 通过触发DOM事件实现交互... 121
6.4 说说Event对象.. 122
6.4.1 Event对象的属性... 123
6.4.2 Event对象的方法... 125
6.5 本章小结.. 127
第7章 如何让你的页面吸引人更多CSS样式
7.1 原来字体可以很高级.. 128
7.1.1 文字颜色的设计... 128
7.1.2 字体样式的基本用法... 129
7.1.3 文字的阴影效果... 130
7.2 高大上的按钮.. 132
7.2.1 圆角按钮... 132
7.2.2 渐变色按钮... 133
7.2.3 单重阴影... 133
7.2.4 多重阴影... 135