Web 开发权威指南 PDF 文档

发布于 2024-03-11 18:57:17 字数 7686 浏览 21 评论 0

本书在知名培训机构 Big Nerd Ranch 培训教材的基础上编写而成,囊括了 JavaScript、HTML5、CSS3 等现代前端开发人员急需的技术关键点,包括响应式 UI、访问远程 Web 服务、用 Ember.js 构建应用,等等。

此外,还会介绍如何使用前沿开发工具来调试和测试代码,并且充分利用 Node.js 和各种开源的 npm 模块的强大功能来进行开发。

全书分四部分,每部分独立完成一个项目,由浅入深、循序渐进,在构建一系列应用的过程中,介绍Web 开发的核心概念和 API。
无论是否拥有 Web 开发经验,抑或拥有其他平台的开发背景,只要对当今流行的工具和开发实践充满兴趣,这本书都能让你受益匪浅。

目录
第一部分 浏览器编程基础
第 1 章 配置开发环境
1.1 安装 Google Chrome
1.2 安装并配置 Atom
Atom 插件
1.3 文档和参考资料
1.4 命令行速成
1.4.1 查看当前工作目录
1.4.2 新建目录
1.4.3 切换目录
1.4.4 列出目录中的文件
1.4.5 获取管理员权限
1.4.6 退出程序
1.5 安装 Node.js 和 browser-sync
1.6 延展阅读:Atom 的替代工具
第 2 章 开始第一个项目
2.1 搭建 Ottergram
2.1.1 开始写 HTML
2.1.2 链接到样式表
2.1.3 添加内容
2.1.4 添加图片
2.2 浏览网页
2.3 Chrome 开发者工具
2.4 延展阅读:CSS 版本
2.5 延展阅读:favicon.ico
2.6 中级挑战:添加 favicon.ico
第 3 章 样式
3.1 创建基本样式
3.2 为 HTML 文件添加样式
3.3 样式的构成
3.4 第一条样式规则
盒模型
3.5 样式继承
3.6 图片自适应
3.7 颜色
3.8 调整空白
关系选择器
3.9 添加字体
3.10 初级挑战:更改颜色
3.11 延展阅读:优先级!当选择器发生冲突了……
第 4 章 flexbox 响应式布局
4.1 界面拓展
4.1.1 添加大图
4.1.2 缩略图水平布局
4.2 flexbox
4.2.1 创建 flex 容器
4.2.2 改变 flex-direction
4.2.3 flex 项目中的元素分组
4.2.4 flex 缩写属性
4.2.5 flex 项目的排序与对齐方式
4.2.6 居中显示大图
4.3 绝对定位与相对定位
第 5 章 使用媒体查询完成自适应布局
5.1 重置视口
5.2 添加媒体查询
5.3 初级挑战:屏幕方向
5.4 延展阅读:flexbox 布局通用解决方案与 bug
5.5 高级挑战:圣杯布局
第 6 章 JavaScript 事件处理
6.1 准备锚标签
6.2 第一个脚本
6.3 Ottergram 中的 JavaScript 描述
6.4 声明字符串变量
6.5 操作控制台
6.6 访问 DOM 元素
6.7 编写 setDetails 函数
通过形参声明接受实参
6.8 从函数返回值
6.9 添加事件监听器
6.10 访问所有缩略图
6.11 迭代缩略图数组
6.12 中级挑战:劫持链接
6.13 高级挑战:随机的水獭
6.14 延展阅读:严格模式
6.15 延展阅读:闭包
6.16 延展阅读:NodeList 对象和 HTMLCollection 对象
6.17 延展阅读:JavaScript 类型
第 7 章 使用 CSS 营造视觉效果
7.1 隐藏及显示大图
7.1.1 创建隐藏大图的样式
7.1.2 用 JavaScript 隐藏大图
7.1.3 监听键盘事件
7.1.4 重新显示大图
7.2 使用 CSS 过渡改变状态
7.2.1 变形
7.2.2 添加 CSS 过渡效果
7.2.3 使用定时函数
7.2.4 基于类的过渡效果
7.2.5 通过 JavaScript 触发过渡效果
7.3 自定义定时函数
7.4 延展阅读:强制类型转换的规则
第二部分 模块、对象及表单
第 8 章 模块、对象和方法
8.1 模块
8.1.1 模块模式
8.1.2 通过 IIFE 修改对象
8.2 搭建我们的 CoffeeRun 吧
8.3 创建数据存储模块
8.4 在命名空间上添加一个模块
8.5 构造函数
8.5.1 构造函数的原型
8.5.2 为构造函数添加方法
8.6 创建 Truck 模块
8.6.1 添加订单
8.6.2 删除订单
8.7 调试
8.7.1 使用开发者工具定位 bug
8.7.2 使用 bind 设置 this
8.8 在页面加载时初始化 CoffeeRun
创建 Truck 实例
8.9 初级挑战:使用非星迷熟悉的餐车 ID
8.10 延展阅读:模块私有数据
8.11 中级挑战:私有化数据
8.12 延展阅读:在 forEach 的回调函数中设置 this
第 9 章 Bootstrap 简介
9.1 添加 Bootstrap
Bootstrap 的原理
9.2 创建订单表单
9.2.1 添加文本输入字段
9.2.2 提供单选按钮
9.2.3 添加下拉菜单
9.2.4 添加范围滑块
9.2.5 添加提交按钮和重置按钮
第 10 章 使用 JavaScript 处理表单
10.1 创建 FormHandler 模块
10.1.1 jQuery 简介
10.1.2 导入 jQuery
10.1.3 使用 selector 参数配置 FormHandler 实例
10.2 添加提交处理程序
10.2.1 提取数据
10.2.2 接受并调用回调函数
10.3 使用 FormHandler
将 createOrder 注册为提交处理程序
10.4 UI 优化
10.5 初级挑战:添加超级尺寸
10.6 中级挑战:当滑块滑动时显示其数值
10.7 高级挑战:添加选择
第 11 章 从数据到 DOM
11.1 建立清单
11.2 创建 CheckList 模块
11.3 创建行构造函数
使用 jQuery 创建 DOM 元素
11.4 在提交时创建清单行
使用 call 绑定 this
11.5 通过单击行完成订单
11.5.1 创建 CheckList.prototype.removeRow 方法
11.5.2 删除被覆盖的条目
11.5.3 编写 addClickHandler 方法
11.5.4 调用 addClickHandler
11.6 初级挑战:在描述中加入浓度信息
11.7 中级挑战:不同口味,不同颜色
11.8 高级挑战:允许编辑订单
第 12 章 表单校验
12.1 required 属性
12.2 使用正则表达式校验表单
12.3 约束校验 API
12.3.1 监听 input 事件
12.3.2 将 input 事件和有效性校验绑定
12.3.3 触发有效性检查
12.4 美化有效元素和无效元素
12.5 中级挑战:为脱咖啡因咖啡进行自定义校验
12.6 延展阅读:Webshim 库
第 13 章 Ajax
13.1 XMLHttpRequest 对象
13.2 RESTful Web 服务
13.3 RemoteDataStore 模块
13.4 向服务器发送数据
13.4.1 使用 jQuery 的$.post 方法
13.4.2 添加回调函数
13.4.3 检查 Ajax 的请求和响应
13.5 从服务器检索数据
13.5.1 查看响应数据
13.5.2 添加回调函数
13.6 从服务器删除数据
使用 jQuery 的$.ajax 方法
13.7 用 RemoteDataStore 替换 DataStore
13.8 中级挑战:校验远端服务器
13.9 延展阅读:Postman
第 14 章 Deferred 和 Promise
14.1 Promise 和 Deferred
14.2 返回 Deferred
14.3 通过 then 注册回调函数
14.4 使用 then 处理失败的情况
14.5 在仅支持回调函数的 API 上使用 Deferred
14.6 为 DataStore 配置 Promise
14.6.1 创建并返回 Promise
14.6.2 resolve 一个 Promise
14.6.3 将其他 DataStore 方法 Promise 化
14.7 中级挑战:回退到 Datastore
第三部分 实时数据传输
第 15 章 Node.js 入门
15.1 Node 和 npm
15.1.1 npm init
15.1.2 npm 脚本
15.2 Hello, World
15.3 添加一个 npm 脚本
15.4 用文件提供服务
15.4.1 用 fs 模块读取文件
15.4.2 处理请求 URL
15.4.3 使用 path 模块
15.4.4 创建自定义模块
15.4.5 使用自定义模块
15.5 错误处理
15.6 延展阅读:npm 模块注册
15.7 初级挑战:创建自定义错误页面
15.8 延展阅读:MIME 类型
15.9 中级挑战:动态提供 MIME 类型
15.10 高级挑战:将错误处理放到单独的模块中
第 16 章 使用 WebSocket 进行
16.1 配置 WebSocket
16.2 测试 WebSocket 服务器
16.3 创建聊天服务器的功能
16.4 第一次聊天!
16.5 延展阅读:WebSocket 库 socket.io
16.6 延展阅读:WebSocket 服务
16.7 初级挑战:我重复了我的消息吗?
16.8 中级挑战:Speakeasy
16.9 高级挑战:聊天机器人
第 17 章 借助 Babel 使用 ES6
17.1 编译 JavaScript 的工具
17.2 Chattrbox 客户端应用程序
17.3 迈出 Babel 的第一步
class 语法
17.4 使用 Browserify 打包模块
执行构建操作
17.5 新增 ChatMessage 类
17.6 创建 ws-client 模块
17.6.1 处理连接
17.6.2 处理事件并发送消息
17.6.3 发出和回应一条消息
17.7 延展阅读:将其他语言编译成 JavaScript
17.8 初级挑战:默认导入名称
17.9 中级挑战:提醒连接关闭
17.10 延展阅读:变量提升
17.11 延展阅读:箭头函数
第 18 章 继续 ES6 探索之旅
18.1 将 jQuery 安装成一个 Node 模块
18.2 创建 ChatForm 类
将 ChatForm 连接到 socket
18.3 创建 ChatList 类
18.4 使用 Gravatar
18.5 请求用户名
18.6 使用会话存储
18.7 格式化和更新消息时间戳
18.8 初级挑战:给消息添加特效
18.9 中级挑战:缓存消息
18.10 高级挑战:独立的聊天室
第四部分 应用架构
第 19 章 初识 MVC 和 Ember
19.1 Tracker
19.2 Ember:一款 MVC 框架
19.2.1 安装 Ember
19.2.2 创建 Ember 应用
19.2.3 启动服务器
19.3 安装外部库和插件
19.4 修改配置
19.5 延展阅读:npm 和 Bower 的安装命令
19.6 初级挑战:限制引入
19.7 中级挑战:添加 Font Awesome 库
19.8 高级挑战:自定义 NavBar
第 20 章 路由选择、路由表、模型
20.1 Ember 生成器
20.2 嵌套路由
20.3 Ember Inspector
20.4 指派模型
20.5 beforeModel
20.6 延展阅读:setupController 和 afterModel
第 21 章 模型和数据绑定
21.1 定义模型
21.2 创建记录
21.3 get 和 set
21.4 计算属性
21.5 延展阅读:检索数据
21.6 延展阅读:保存或删除数据
21.7 初级挑战:修改计算属性
21.8 中级挑战:对新的目击记录进行标记
21.9 高级挑战:添加称呼
第 22 章 数据——适配器、序列化器和变换器
第 22 章 数据——适配器、序列化器和变换器
22.1 适配器
22.2 内容安全策略
22.3 序列化器
22.4 变换器
22.5 延展阅读:Ember CLI Mirage
22.6 中级挑战:内容安全
22.7 高级挑战:Mirage
第 23 章 视图与模板
23.1 Handlebars
23.2 模型
23.3 辅助方法
23.3.1 条件语句
23.3.2 {{#each}}循环
23.3.3 元素属性赋值
23.3.4 链接
23.4 自定义辅助方法
23.5 初级挑战:为链接添加鼠标悬浮的内容
23.6 中级挑战:修改日期格式
23.7 高级挑战:创建一个自定义缩略图辅助方法
第 24 章 控制器
24.1 新建目击记录
24.2 编辑目击记录
24.3 删除目击记录
24.4 路由动作
24.5 初级挑战:目击记录详情页
24.6 中级挑战:目击日期
24.7 高级挑战:添加和删除目击者
第 25 章 组件
25.1 迭代器组件
25.2 拧干组件的“水分”
25.3 数据向下,动作向上
25.4 类名绑定
25.5 数据向下
25.6 动作向上
25.7 初级挑战:自定义提示信息
25.8 中级挑战:将导航条转化为组件
25.9 高级挑战:提示框数组
第 26 章 后记
26.1 最后的挑战
26.2 插播一个广告
26.3 感谢你

下载地址:https://www.wenjiangs.com/wp-content/uploads/2024/03/V0bsWy0Q0xSyVktq.zip

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

习惯成性

暂无简介

0 文章
0 评论
22 人气
更多

推荐作者

一梦浮鱼

文章 0 评论 0

mb_Z9jVigFL

文章 0 评论 0

伴随着你

文章 0 评论 0

耳钉梦

文章 0 评论 0

18618447101

文章 0 评论 0

蜗牛

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文