├── .gitignore ├── LICENSE ├── README.md ├── SUMMARY.md ├── book.json ├── chapter1 ├── 00_00_frontend_engineer_intro.md ├── 01_00_photoshop.md ├── 01_01_photoshop_setting.md ├── 01_02_photoshop_shortcut.md ├── 01_03_slice.md ├── 01_04_save_image.md ├── 01_05_image_maintain.md ├── 01_06_image_optimisation.md ├── 01_07_measurement_and_color.md ├── 02_00_dev_tools.md ├── 02_01_sublime.md ├── 02_02_atom.md ├── 03_00_html.md ├── 03_01_html_intro.md ├── 03_02_html_sytax.md ├── 03_03_html_tags.md ├── 03_04_html_ascii_encoding.md ├── 03_05_cross_browser.md ├── 04_00_css_intro.md ├── 04_01_css_sytax.md ├── 04_02_selector.md ├── 04_03_text.md ├── 04_04_box_model.md ├── 04_05_background.md ├── 04_06_layout.md ├── 04_07_transform.md ├── 04_08_animation.md ├── 04_09_layout_demo.md └── README.md ├── chapter2 ├── 01_javascript_intro.md ├── 02_dev_tools.md ├── 03_basic_syntax.md ├── 04_data_type_system.md ├── 05_js_type_judge.md ├── 06_scope.md ├── 07_statement_and_operator.md ├── 08_statement.md ├── 09_closure.md ├── 10_object.md └── README.md ├── chapter3 ├── 01_dom_tree.md ├── 02_node_manipulation.md ├── 03_attribute_manipulation.md ├── 04_style_manipulation.md ├── 05_events.md ├── 06_animation.md ├── 07_canvas.md ├── 08_multimedia.md ├── 09_network.md ├── 10_storage.md ├── 11_bom.md ├── 12_form_manipulation.md ├── 13_list_manipulation.md ├── 80_bom_corordinate_width_height.md └── README.md ├── chapter4 ├── 01_CSS_Reset.md ├── 02_layout.md ├── 03_responsive.md ├── 04_page_optimisation.md ├── 05_standalized.md ├── 06_modulation.md ├── 07_development.md └── README.md ├── chapter5 ├── 01_collaboration.md ├── 02_design_api.md ├── 03_version_control.md ├── 04_Git_command.md ├── 05_Modulized.md ├── 06_Framework.md └── README.md └── img ├── A ├── MVVM-route.png ├── MVVM.png ├── ajax-process.jpg ├── animation-sample.gif ├── api-apply-2.jpg ├── api-rule-apply-1.jpg ├── api-rule-apply.jpg ├── api_async.png ├── api_data_sync.png ├── api_design_overview.png ├── api_elements.png ├── api_page_entry.png ├── api_rule.png └── api_rule_detail.png ├── B ├── background-box-model.png ├── background-clip.jpg ├── background-origin.jpg ├── background-position.jpg ├── background-shorthand.png ├── background-size.jpg ├── bom-intro.jpg ├── bom-structure.jpg ├── border-radius-sample.png ├── border-radius-sample1.png ├── border-sample.png ├── box-model-3d.png ├── box-module.jpg ├── box-shadow.png ├── box-sizing.png ├── box-sizing1.png ├── branch-feature.png ├── branch-release.png └── btn-remove-text.gif ├── C ├── Communication_framework.png ├── canvas-animation.gif ├── canvas-drawing-steps.png ├── canvas-global-composite.png ├── career-path.jpg ├── collaboration-mataince.png ├── collaboration-process.png ├── comoponent-framework-contract.png ├── compare-reset-checkout.png ├── cookie-domain.jpg ├── cookie-path.jpg ├── cors.jpg ├── crop-canvas.gif ├── css-dom-overview.jpg ├── css-inherit-doc.png ├── css-reset-after.png ├── css-reset-before.png ├── css-reset-example.png ├── css-value-rule.png └── css3-history.png ├── D ├── DOM_framework_contranct.png ├── development-flow.png ├── display-block-example.png ├── display-type1.png ├── display-type2.png ├── dom-style-CSSStyleDeclaration.png ├── dom-style-StyleSheet.png ├── dom-style-StyleSheetList.png ├── dom-style-cssRule.png ├── dom-style-cssRules.png └── dom-tree.gif ├── E ├── event-UIEvent.png ├── event-capture-phase.png ├── event-event.png ├── event-focusEvent.png ├── event-inputEvent.png ├── event-keyboardEvent.png ├── event-mouseEvent.png ├── event-type.png ├── event-wheelEvent.png └── expression-priority.png ├── F ├── flex-align-content.png ├── flex-align-content.svg ├── flex-align-items.png ├── flex-align-items1.png ├── flex-align-items1.svg ├── flex-align-self.png ├── flex-align-self.svg ├── flex-container-and-item.jpg ├── flex-direciton.png ├── flex-example1.png ├── flex-flow.png ├── flex-grow0.png ├── flex-grow1.png ├── flex-grow2.png ├── flex-justify-content.png ├── flex-justify-content.svg ├── flex-order0.png ├── flex-order1.png ├── flex-reverse-wrap.png ├── flex-shrink.png ├── flex-wrap.png ├── float-example1.png ├── float-example2.png ├── float-half-off.png ├── float-right-all.jpg ├── float-right.png ├── frame_proxy.jpg └── frontend-developer.png ├── G └── gecko-reflow-visualisation.gif ├── H ├── ajax-process.jpg ├── html-elements.jpg ├── html-history.png ├── html-overview.png ├── html-syntax.png ├── html5_badge20.png ├── http-process.png ├── http-request.jpg ├── http-response.png ├── hwa_01.png ├── hwa_03.png ├── hwa_05.png ├── hwa_06.png ├── hwa_07.png ├── hwa_31.png └── hwa_34.png ├── J ├── javascript-animation.jpg ├── javascript-env.png ├── javascript-environment-example.png ├── javascript-history.png ├── javascript-name-example.png ├── javascript-trycatch-example.png ├── javascript-type-judge.png ├── javascript-type-system.png ├── javascript-value.gif ├── javascript-variable-type.jpg └── javascript-with-example.png ├── L ├── layout-center-center.png ├── layout-center-horizontal.png ├── layout-center-vertical.png ├── layout-content-response.jpg ├── layout-full-0.jpg ├── layout-full-percentage.jpg ├── layout-full-screen.png ├── layout-multicolumn-0.jpg ├── layout-multicolumn-1.png ├── layout-multicolumn-2.png ├── layout-multicolumn-3.png ├── layout-multicolumn-4.png ├── layout-multicolumn-5.png ├── layout-multicolumn-6.png ├── layout-multicolumn-7.png ├── layout-multicolumn-8.png ├── layout-position-zindex-stack.jpg ├── layout-position.png ├── layouy-position-zindex.png ├── linear-gradient.jpg ├── list_add_item.png ├── list_add_item_using_template.png ├── list_ajax_get_data.png ├── list_container.png ├── list_data_structure.png ├── list_format.png ├── list_item_remove.png ├── list_render.png ├── list_right_click.png ├── list_right_click_details.png ├── list_single_selection.png ├── list_template.png ├── list_update.png ├── list_update_state.png ├── list_view_oriented.png ├── list_view_oriented_1.png ├── list_viewmodel_1.png ├── list_viewmodel_2.png ├── list_viewmodel_3.png ├── list_viewmodel_4.png ├── list_viewmodel_5.png ├── local-and-remote.png ├── local-development.jpg ├── local-proxy-working.jpg └── local-server-working.jpg ├── M ├── MVC.png ├── MVC_Process.png ├── margin-merge.png ├── margin-sample.png ├── memory-management.jpg ├── modulized-example.png ├── move-layer.gif ├── mutimedia.jpg ├── mvc-after.png ├── mvc-before.png └── mvc-view.png ├── O ├── object-with-constructor-and-regular-object.png └── overflow-sample.png ├── P ├── padding-sample.png ├── photoshop-cut-image.png ├── photoshop-mainWindow.png ├── photoshop-measure&colorSelection.png ├── photoshop-menu.png ├── photoshop-saveFormat.png ├── photoshop-without-image.png ├── png8-color-mode.gif ├── position-absolute.png ├── position-example1.png ├── position-example2.png ├── position-example3.png ├── position-fixed.png └── position-relative.png ├── R ├── radial-gradient.jpg ├── repeating-gradient.jpg ├── reponsive.png ├── resize-canvas.gif ├── responsive-example.png └── route.png ├── S ├── save-image.gif ├── scope-dynamic-scope.gif ├── scope-function-init.png ├── scope-function-with-name.png ├── scope-global-init.png ├── scope-lexical-scope.png ├── scope-structure.jpg ├── scope-trycatch.png ├── scope-with.png ├── storage-scope.png └── structure.gif ├── T ├── TRBL.png ├── ToolsPanelOverview.png ├── rect-selection-tool.gif ├── tasks-assign.png ├── template-framework-dom-how.png ├── template-framework-dom.png ├── template-framework-living-how.png ├── template-framework-string-how.png ├── template-framework-string.png ├── template-recomment.png ├── template_normal_error.jpg ├── transform-backface-visibility.png ├── transform-origin.png ├── transform-perspective-origin.png ├── transform-perspective.png ├── transform-rotate.png ├── transform-rotate3d.png ├── transform-scale.png ├── transform-scale3d.png ├── transform-skew.png ├── transform-transform-function.png ├── transform-transform-style.png ├── transform-translate3d.png ├── transform-traslate.png └── transition-timing-function.png ├── V ├── vc-git.png ├── vc-manual.png ├── vc-production.png ├── vc-svn.png ├── vc-vcs.png └── vs-environment.jpg ├── W ├── websevice.png └── with-scope.png └── Z ├── z-back.png ├── z-cdn-config.png ├── z-code-config.png ├── z-code-merge-config.png ├── z-front.png ├── z-module.png ├── z-nej-config.png ├── z-nej.png └── z-pic-config.png /.gitignore: -------------------------------------------------------------------------------- 1 | _book/ -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Chen YuRong. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 前端开发笔记本 2 | 3 | 现在就加入 [**FrontSeat**](http://frontseat.io) 一个专注前端的开源中文社区！ 4 | 5 | 前端开发笔记本涵括了大部分前端开发所需的知识点，主要包括5大部分：《页面制作》、《JavaScript程序设计》、《DOM编程》、《页面架构》、《前端产品架构》。 6 | 7 | 点击[**这里**](http://chanshuyi.github.io/frontend_notebook/)开始阅读！ 8 | 9 | 前端开发笔记本的 GitHub 地址在[这里](https://github.com/ChanShuYi/FrontEnd_NOTE)。如果你觉得这个项目不错，请点击 Star 一下，您的支持是我最大的动力。 10 | 11 | 12 | Star 13 |   Watch 14 |   Fork 15 |   Download 16 | 17 | ![](img/C/career-path.jpg) 18 | 19 | ### 写作进程 20 | 21 | |章节|名称|进程| 22 | |----|----|----| 23 | |第一章|页面制作|![](http://progressed.io/bar/100)| 24 | |第二章|JavaScript 程序设计|![](http://progressed.io/bar/100)| 25 | |第三章|DOM 编程|![](http://progressed.io/bar/100)| 26 | |第四章|页面构架|![](http://progressed.io/bar/100)| 27 | |第五章|前端产品构架|![](http://progressed.io/bar/100)| 28 | 29 | ### 相关链接 30 | 31 | - [NEC](http://nec.netease.com/) {N: nice, E: easy, C: css;} 32 | 33 | Creative Commons License
This work by ChanShuYi is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /SUMMARY.md: -------------------------------------------------------------------------------- 1 | # Summary 2 | 3 | - [前端工程师概述](chapter1/00_00_frontend_engineer_intro.md) 4 | - [页面制作](chapter1/README.md) 5 | - [Photoshop](chapter1/01_00_photoshop.md) 6 | - [PhotoShop设置](chapter1/01_01_photoshop_setting.md) 7 | - [PhotoShop快捷键](chapter1/01_02_photoshop_shortcut.md) 8 | - [切图](chapter1/01_03_slice.md) 9 | - [图片保存](chapter1/01_04_save_image.md) 10 | - [图片维护](chapter1/01_05_image_maintain.md) 11 | - [图片优化与合并](chapter1/01_06_image_optimisation.md) 12 | - [测量与取色](chapter1/01_07_measurement_and_color.md) 13 | - [开发及调试工具](chapter1/02_00_dev_tools.md) 14 | - [Sublime 编辑器](chapter1/02_01_sublime.md) 15 | - [Atom 编辑器](chapter1/02_02_atom.md) 16 | - [HTML](chapter1/03_00_html.md) 17 | - [HTML 简介](chapter1/03_01_html_intro.md) 18 | - [HTML 语法](chapter1/03_02_html_sytax.md) 19 | - [HTML 标签](chapter1/03_03_html_tags.md) 20 | - [实体字符](chapter1/03_04_html_ascii_encoding.md) 21 | - [浏览器兼容](chapter1/03_05_cross_browser.md) 22 | - [CSS](chapter1/04_00_css_intro.md) 23 | - [语法](chapter1/04_01_css_sytax.md) 24 | - [选择器](chapter1/04_02_selector.md) 25 | - [文本](chapter1/04_03_text.md) 26 | - [盒模型](chapter1/04_04_box_model.md) 27 | - [背景](chapter1/04_05_background.md) 28 | - [布局](chapter1/04_06_layout.md) 29 | - [变形](chapter1/04_07_transform.md) 30 | - [动画](chapter1/04_08_animation.md) 31 | - [常见布局样例](chapter1/04_09_layout_demo.md) 32 | - [JavaScript 程序设计](chapter2/README.md) 33 | - [JavaScript 介绍](chapter2/01_javascript_intro.md) 34 | - [调试器](chapter2/02_dev_tools.md) 35 | - [基础语法](chapter2/03_basic_syntax.md) 36 | - [类型系统](chapter2/04_data_type_system.md) 37 | - [类型判断](chapter2/05_js_type_judge.md) 38 | - [变量作用域](chapter2/06_scope.md) 39 | - [表达式与运算符号](chapter2/07_statement_and_operator.md) 40 | - [语句](chapter2/08_statement.md) 41 | - [闭包](chapter2/09_closure.md) 42 | - [面向对象](chapter2/10_object.md) 43 | - [DOM 编程](chapter3/README.md) 44 | - [文档树（DOM Tree）](chapter3/01_dom_tree.md) 45 | - [节点操作](chapter3/02_node_manipulation.md) 46 | - [属性操作](chapter3/03_attribute_manipulation.md) 47 | - [样式操作](chapter3/04_style_manipulation.md) 48 | - [事件](chapter3/05_events.md) 49 | - [动画](chapter3/06_animation.md) 50 | - [Canvas](chapter3/07_canvas.md) 51 | - [多媒体（视频与音频）](chapter3/08_multimedia.md) 52 | - [数据通信](chapter3/09_network.md) 53 | - [数据存储](chapter3/10_storage.md) 54 | - [BOM](chapter3/11_bom.md) 55 | - [表单操作](chapter3/12_form_manipulation.md) 56 | - [列表操作](chapter3/13_list_manipulation.md) 57 | - [页面架构](chapter4/README.md) 58 | - [CSS Reset](chapter4/01_CSS_Reset.md) 59 | - [布局解决方案](chapter4/02_layout.md) 60 | - [响应式布局](chapter4/03_responsive.md) 61 | - [页面优化](chapter4/04_page_optimisation.md) 62 | - [规范化](chapter4/05_standalized.md) 63 | - [模块化](chapter4/06_modulation.md) 64 | - [技术实践](chapter4/07_development.md) 65 | - [产品前端架构](chapter5/README.md) 66 | - [协作流程](chapter5/01_collaboration.md) 67 | - [接口设计](chapter5/02_design_api.md) 68 | - [版本控制](chapter5/03_version_control.md) 69 | - [Git命令](chapter5/04_Git_command.md) 70 | - [技术选型-模块化](chapter5/05_Modulized.md) 71 | - [技术选型-框架](chapter5/06_Framework.md) 72 | 73 | -------------------------------------------------------------------------------- /book.json: -------------------------------------------------------------------------------- 1 | { 2 | "gitbook": ">=2.0.0", 3 | "title":"Frontend Notebook", 4 | "language":"zh-cn", 5 | "description":"互联网前端开发过程全记录。从基础开始，从现在开始。" 6 | } -------------------------------------------------------------------------------- /chapter1/00_00_frontend_engineer_intro.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* 4 | 5 | - [前端工程师概述](#%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%B8%88%E6%A6%82%E8%BF%B0) 6 | 7 | 8 | 9 | ## 前端工程师概述 10 | 11 | **网页发展史** 12 | 13 | Web 1.0 -> Web 2.0（基于 Ajax） -> Web 3.0 （基于 HTML5） 14 | 15 | **网站开发协作流程** 16 | 17 | ![](../img/D/development-flow.png) 18 | 19 | **前端职责** 20 | 21 | 视觉稿（配色图标距离空间） + 交互稿（用户逻辑） = UI （用户界面） 22 | 23 | 视觉稿 -> [页面制作] 24 | 25 | 交互稿 -> [页面逻辑开发] 26 | 27 | **所需技能** 28 | 29 | - DOM (操作 HTML 及 CSS 的接口) 30 | - JavaScript (定义页面互动) 31 | - CSS (定义页面样式) 32 | - HTML (定义页面结果) 33 | - Photoshop (取图) 34 | -------------------------------------------------------------------------------- /chapter1/01_00_photoshop.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* 4 | 5 | - [Photoshop](#photoshop) 6 | 7 | 8 | 9 | ## Photoshop 10 | 11 | `PhotopShop` 主要用于切图，即从设计稿中切除网页的素材并在代码中引入图片，以供`页面实现`过程调用。 12 | 13 | ```html 14 | // 设计稿 (*.psd) -> 产出物 (*.png, *.jpg) 15 | 16 | desc 17 | 18 | 22 | ``` -------------------------------------------------------------------------------- /chapter1/01_01_photoshop_setting.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* 4 | 5 | - [PhotoShop 常用设置](#photoshop-%E5%B8%B8%E7%94%A8%E8%AE%BE%E7%BD%AE) 6 | - [设置全局单位为像素](#%E8%AE%BE%E7%BD%AE%E5%85%A8%E5%B1%80%E5%8D%95%E4%BD%8D%E4%B8%BA%E5%83%8F%E7%B4%A0) 7 | - [设置常用工作区](#%E8%AE%BE%E7%BD%AE%E5%B8%B8%E7%94%A8%E5%B7%A5%E4%BD%9C%E5%8C%BA) 8 | - [打开辅助视图](#%E6%89%93%E5%BC%80%E8%BE%85%E5%8A%A9%E8%A7%86%E5%9B%BE) 9 | 10 | 11 | 12 | ### PhotoShop 常用设置 13 | 14 | 这里会介绍一些PhotoShop在切图时常用的一些设置，以此来帮助我们更快、更好地切图。 15 | 16 | #### 设置全局单位为像素 17 | 18 | 因为像素单位在 CSS 中运用最广，所以我们通过 `Preference -> Units & Rulers -> Units` 将全局单位设置为像素 19 | 20 | [pic1] 21 | 22 | #### 设置常用工作区 23 | 24 | 在切图过程中，我们常用的有以下几个窗口：『信息窗口』、『图层窗口』、『历史纪录窗口』、『工具面板』、『选项』面板。在PhotoShop中打开这些窗口，并通过 `Window -> Workspace -> New WorkSpaces` 保存工作区，以便下次打开。 25 | 26 | #### 打开辅助视图 27 | 28 | 通过`View -> Show `可以打开`标尺`、`参考线`。 29 | 30 | - 对齐，会启动靠近吸附功能 31 | - 标尺，Command + R 32 | - 参考线，Command + ; 33 | 34 | ![](../img/P/photoshop-menu.png) -------------------------------------------------------------------------------- /chapter1/01_02_photoshop_shortcut.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* 4 | 5 | - [PhotoShop 快捷键](#photoshop-%E5%BF%AB%E6%8D%B7%E9%94%AE) 6 | 7 | 8 | 9 | ### PhotoShop 快捷键 10 | 11 | **放大缩小画布** 12 | - 放大到100%大小：Ctrl+数字1 13 | - 放大：ctrl + 加号 14 | - 缩小：ctrl + 减号 15 | - alt + 滚轮 16 | 17 | **合并图层** 18 | - 合并图层：ctrl+E 19 | - 合并可见图层：ctrl+shift+E 20 | 21 | NOTE: 所有工具及快捷键如下。 22 | 23 | ![](../img/T/ToolsPanelOverview.png) -------------------------------------------------------------------------------- /chapter1/01_03_slice.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* 4 | 5 | - [切图技巧](#%E5%88%87%E5%9B%BE%E6%8A%80%E5%B7%A7) 6 | - [隐藏文字](#%E9%9A%90%E8%97%8F%E6%96%87%E5%AD%97) 7 | - [PNG24切图方法](#png24%E5%88%87%E5%9B%BE%E6%96%B9%E6%B3%95) 8 | - [PNG8带背景切图方法](#png8%E5%B8%A6%E8%83%8C%E6%99%AF%E5%88%87%E5%9B%BE%E6%96%B9%E6%B3%95) 9 | - [可平铺背景的切图方法](#%E5%8F%AF%E5%B9%B3%E9%93%BA%E8%83%8C%E6%99%AF%E7%9A%84%E5%88%87%E5%9B%BE%E6%96%B9%E6%B3%95) 10 | - [切片工具](#%E5%88%87%E7%89%87%E5%B7%A5%E5%85%B7) 11 | 12 | 13 | 14 | ### 切图技巧 15 | 16 | - **内容性图片** 指的是图片在页面是作为内容存在，如页面中的海报。 17 | - **修饰性图片** 指的是图片在页面中起修饰作用，如页面中的背景和图标。 18 | 19 | #### 隐藏文字 20 | 21 | - 方法一，直接在图层中隐藏文字图层 22 | - 方法二（两种，分别应对于纯色和有背景需要隐藏文本的情况）如下图所示，使用自由变换。 23 | 24 | #### PNG24切图方法 25 | 26 | - 移动工具选中所需图层（Ctrl 多选） 27 | - 右键合并图层（Ctrl + E） 28 | - 复制到新图层 29 | 30 | #### PNG8带背景切图方法 31 | 32 | - 合并可见图层（Shift + Ctrl + E） 33 | - 矩形选框选择内容 34 | - 魔棒工具去除多余部分（Alt + 选取） 35 | 36 | #### 可平铺背景的切图方法 37 | 38 | - 用矩形选择一个区域 39 | - 复制至新图层 40 | 41 | NOTE: X 轴平铺需要占满图片的宽，Y 轴平铺需要占满图片的高。 42 | 43 | #### 切片工具 44 | 45 | 大图化小的方法，将一大图分为多小图 46 | 47 | - 拉参考线 48 | - 选择切片工具 49 | - 点击 “基于参考线的切片” 按钮 50 | - 选择切片选择工具 51 | - 保存于新图层 -------------------------------------------------------------------------------- /chapter1/01_04_save_image.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* 4 | 5 | - [图片保存](#%E5%9B%BE%E7%89%87%E4%BF%9D%E5%AD%98) 6 | - [保存格式的选择](#%E4%BF%9D%E5%AD%98%E6%A0%BC%E5%BC%8F%E7%9A%84%E9%80%89%E6%8B%A9) 7 | 8 | 9 | 10 | ### 图片保存 11 | 12 | 将需要的内容保存在独立的文件里便于之后的导出。（存储于 Web 所用格式 Alt + Shift + Ctrl + S） 13 | 14 | 如需保存**独立图层**则要把需要的图层拖到新建的透明背景的图层，或在图层上右键复制（Duplicate）图层选择地址为新文件即可。 15 | 16 | **图片与背景合并**的切图方法如下 17 | 18 | ![](../img/S/save-image.gif) 19 | 20 | #### 保存格式的选择 21 | 22 | 保存类型一：色彩丰富切无透明要求时保存为 `JPG` 格式并选用时候的品质（通常使用品质 80 ）。 23 | 24 | 保存类型二：图片色彩不丰富，不伦透明与否一律保存为 `PNG8` 格式（256颜色，需特殊设置如下图，需设置`杂边：无` `无仿色`）。 25 | 26 | ![](../img/P/photoshop-saveFormat.png) 27 | 28 | 保存类型三：图片有半透明（Alpha 透明）的要求，保存为 `PNG24` 格式（不对图片进行压缩）。 29 | 30 | 保存类型四：保留 PSD 源文件，以备不时之需。 31 | 32 | NOTE：一般使用『存储于 Web 所用格式』菜单（Alt + Shift + Ctrl + S）保存 -------------------------------------------------------------------------------- /chapter1/01_05_image_maintain.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* 4 | 5 | - [图片修改与维护](#%E5%9B%BE%E7%89%87%E4%BF%AE%E6%94%B9%E4%B8%8E%E7%BB%B4%E6%8A%A4) 6 | 7 | 8 | 9 | ### 图片修改与维护 10 | 11 | 维护与修改之一：**更改画布**大小以便增加新素材。 12 | 13 | ![](../img/R/resize-canvas.gif) 14 | 15 | 维护与修改之二：移动图标分两种，独立图层（移动工具拖动），于非独立图层（选取工具选中分离后移动工具拖动）。 16 | 17 | ![](../img/M/move-layer.gif) 18 | 19 | 维护与修改之三：**裁剪画布**的方法有两种，(1)用选取工具选取后图片裁取，(2)直接用裁剪工具裁剪画布。 20 | 21 | ![](../img/C/crop-canvas.gif) 22 | 23 | **注意事项**：为了可维护性的考虑因适当的留出适当的空白区域以便修改所用和提高容错性。`PNG8`需更改图片颜色模式为 RGB 颜色（默认为索引颜色模式，颜色信息会被丢失）。 24 | 25 | ![](../img/P/png8-color-mode.gif) 26 | -------------------------------------------------------------------------------- /chapter1/01_06_image_optimisation.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* 4 | 5 | - [图片优化与合并](#%E5%9B%BE%E7%89%87%E4%BC%98%E5%8C%96%E4%B8%8E%E5%90%88%E5%B9%B6) 6 | - [图片合并](#%E5%9B%BE%E7%89%87%E5%90%88%E5%B9%B6) 7 | - [图片的兼容](#%E5%9B%BE%E7%89%87%E7%9A%84%E5%85%BC%E5%AE%B9) 8 | 9 | 10 | 11 | ### 图片优化与合并 12 | 13 | 在 HTML 中使用背景图片的方法如下： 14 | 15 | ```html 16 | 17 | 18 | 26 | ``` 27 | 28 | 图片的**合并**就如同上面提到的切图后保存的过程。拼好的图称之为 **Sprite** 它能减少网络请求次数提高速度。图片压缩工具分为无损（ImageOptim 等工具，也可结合 Grunt 自动化构建工具一同使用）与有损压缩工具（TinyPng）。 29 | 30 | #### 图片合并 31 | 32 | 图片合并建议方案： 33 | 34 | - 同个模块的图片合并 35 | - 大小相近的图片合并 36 | - 色彩相近的图片合并 37 | - 以上3种合并混合 38 | 39 | 合并的图片可以以横向或纵向的排列，分类可将同属于一个模块（功能模块），大小相近（充分利用画布空间），颜色相近（减少文件大小）。 40 | 41 | #### 图片的兼容 42 | 43 | IE6 不支持 PNG24 半透明所以需要保存两份（sprite.png - png24 和 sprite-ie.png - 8）。在使用 CSS3 是让高级浏览器使用 CSS3 低级浏览器则使用切图。优雅降级指的是让低级浏览器不显示高级浏览器中的界面细节。 44 | -------------------------------------------------------------------------------- /chapter1/01_07_measurement_and_color.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* 4 | 5 | - [测量及取色](#%E6%B5%8B%E9%87%8F%E5%8F%8A%E5%8F%96%E8%89%B2) 6 | - [测量](#%E6%B5%8B%E9%87%8F) 7 | - [取色](#%E5%8F%96%E8%89%B2) 8 | 9 | 10 | 11 | ### 测量及取色 12 | 13 | 所有能接受数字的属性都需要测量并尽可能百分百的还原设计稿。 14 | 15 | #### 测量 16 | 17 | - 宽度，高度 (width, height) 18 | - 内外边距 (padding, margin) 19 | - 边框 (border) 20 | - 定位 (position) 21 | - 文字大小 (font-size) 22 | - 行高 (line-height)，其为第一行的底端到第二行的底端。 23 | - 背景位置 (background-position) 24 | 25 | NOTE: 测量时尽可能放大画布以减少误差。量取文字是为了减少误差尽量选取尺寸大的文字进行测量。 26 | 27 | ![](../img/P/photoshop-measure&colorSelection.png) 28 | 29 | **选框工具的多用途**，增（Shift）减（Alt）以及交叉选择（Shift + Alt）。左右（或上下）使用分离选框选择可以得到整两个分离边框的距离总值。 30 | 31 | ![](../img/T/rect-selection-tool.gif) 32 | 33 | #### 取色 34 | 35 | 所有能接受颜色的属性都需要取色。 36 | 37 | - 边框色 38 | - 背景色 39 | - 文字色 40 | 41 | NOTE：使用魔棒工具可以迅速识别背景色是否没*线性*渐变的方法。Mac OS X 推荐使用 **Sip** 可在 Mac App Store 免费下载。 42 | NOTE+：可以使用魔棒工具来判断颜色是否为渐变。 43 | -------------------------------------------------------------------------------- /chapter1/02_00_dev_tools.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* 4 | 5 | - [开发及调试工具](#%E5%BC%80%E5%8F%91%E5%8F%8A%E8%B0%83%E8%AF%95%E5%B7%A5%E5%85%B7) 6 | 7 | 8 | 9 | ## 开发及调试工具 10 | 11 | - 文本编辑器或 IDE (集成开发环境) 12 | - Google Chrome, Firefox Firebug, Safari Developer Tool 13 | 14 | NOTE: [Google Chrome DevTools Doc](https://developer.chrome.com/devtools) 15 | -------------------------------------------------------------------------------- /chapter1/02_01_sublime.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* 4 | 5 | - [Sublime 编辑器](#sublime-%E7%BC%96%E8%BE%91%E5%99%A8) 6 | - [介绍](#%E4%BB%8B%E7%BB%8D) 7 | - [安装](#%E5%AE%89%E8%A3%85) 8 | - [Windows/OS X](#windowsos-x) 9 | - [Ubuntu](#ubuntu) 10 | - [Sublime 快捷键](#sublime-%E5%BF%AB%E6%8D%B7%E9%94%AE) 11 | - [推荐插件](#%E6%8E%A8%E8%8D%90%E6%8F%92%E4%BB%B6) 12 | - [1. Package Control](#1-package-control) 13 | - [2.Emmet](#2emmet) 14 | - [3.JQuery](#3jquery) 15 | - [4.FileHeader](#4fileheader) 16 | - [5.Pretty Json](#5pretty-json) 17 | - [6.CSS Format](#6css-format) 18 | - [7.ConvertToUTF8](#7converttoutf8) 19 | - [用户自定义代码](#%E7%94%A8%E6%88%B7%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BB%A3%E7%A0%81) 20 | 21 | 22 | 23 | ### Sublime 编辑器 24 | 25 | #### 介绍 26 | 27 | Sublime Text是一款性感的编辑器，具有优雅，快速，插件多等优势，不失为前端开发者的轻量高效编辑器。 28 | 29 | #### 安装 30 | 31 | ##### Windows/OS X 32 | 33 | 官方[站点](http://www.sublimetext.com/)下载安装即可。 34 | 35 | ##### Ubuntu 36 | 37 | 可参见 [Ubuntu 下使用 Sublime Text 并解决中文输入问题](http://www.zntec.cn/archives/ubuntu-sublime-text-fcitx.html)，用apt-get安装，解决任务栏，中文输入等多个问题。 38 | 39 | ##### Sublime 快捷键 40 | command/control + P 进入查找命令（Goto Anything）,此时有三种选择： 41 | 42 | * `:` 输入行数找到对应行 （control + G） 43 | * `@` 找到特定函数 （command/control + R） 44 | * `#` 找到对应变量与块 45 | 46 | #### 推荐插件 47 | 48 | ##### 1. Package Control 49 | 50 | 以后的插件安装基本都靠他了，安装方法可以去[Package Control](https://packagecontrol.io/installation)查看，注意Sublime Text的版本问题。 51 | 52 | ##### 2.Emmet 53 | 54 | 前端神器，相信搞前端的没有不用的 55 | 56 | **下面插件在Edit 或者 Tools 里面看到插件功能：** 57 | 58 | ##### 3.JQuery 59 | 60 | 写JQuery怎么能不用他来增强你的提示？ 61 | 62 | ##### 4.FileHeader 63 | 64 | 自动创建文件开头模板，并且会根据最后的保存时间修改更新时间 65 | 66 | ##### 5.Pretty Json 67 | 68 | 写json不格式话怎么行？ 69 | 70 | ##### 6.CSS Format 71 | 72 | css格式化 73 | 74 | ##### 7.ConvertToUTF8 75 | 76 | GBK编码兼容 77 | 78 | #### 用户自定义代码 79 | 80 | Preferences - Settings - User 里面加入，全部的设置均为 `JSON` 文本。 81 | 82 | ``` 83 | "translate_tabs_to_spaces": true, 84 | "tab_size": 2, 85 | ``` 86 | 把Tab对齐转化为空格对齐，tab_size 控制转化比例。 87 | 88 | ``` 89 | "trim_trailing_white_space_on_save": true, 90 | ``` 91 | 92 | 自动移除行尾多余空格。 93 | 94 | ``` 95 | "ensure_newline_at_eof_on_save": true, 96 | ``` 97 | 98 | 自动在文件末尾加入一个空行，git 用户相信知道是干嘛的。 99 | 100 | ``` 101 | "save_on_focus_lost": true, 102 | ``` 103 | 104 | 窗口失去焦后立即保存文件。 105 | 106 | ``` 107 | "bold_folder_labels": true, 108 | ``` 109 | 110 | 侧栏文件夹加粗。 111 | -------------------------------------------------------------------------------- /chapter1/02_02_atom.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* 4 | 5 | - [Atom 文本编辑器](#atom-%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8) 6 | - [基础中的基础](#%E5%9F%BA%E7%A1%80%E4%B8%AD%E7%9A%84%E5%9F%BA%E7%A1%80) 7 | - [开始使用](#%E5%BC%80%E5%A7%8B%E4%BD%BF%E7%94%A8) 8 | - [移动光标](#%E7%A7%BB%E5%8A%A8%E5%85%89%E6%A0%87) 9 | - [选择](#%E9%80%89%E6%8B%A9) 10 | - [编辑与删除](#%E7%BC%96%E8%BE%91%E4%B8%8E%E5%88%A0%E9%99%A4) 11 | - [括号](#%E6%8B%AC%E5%8F%B7) 12 | - [搜索与替换](#%E6%90%9C%E7%B4%A2%E4%B8%8E%E6%9B%BF%E6%8D%A2) 13 | - [代码片段（Snippets）](#%E4%BB%A3%E7%A0%81%E7%89%87%E6%AE%B5%EF%BC%88snippets%EF%BC%89) 14 | - [代码折叠](#%E4%BB%A3%E7%A0%81%E6%8A%98%E5%8F%A0) 15 | - [多窗口模式](#%E5%A4%9A%E7%AA%97%E5%8F%A3%E6%A8%A1%E5%BC%8F) 16 | - [解码（Encoding）](#%E8%A7%A3%E7%A0%81%EF%BC%88encoding%EF%BC%89) 17 | - [书签](#%E4%B9%A6%E7%AD%BE) 18 | 19 | 20 | 21 | ### Atom 文本编辑器 22 | 23 | 本文即为在 **Atom** 下编写完成，在写作过程中让我对这个崭新的 1.0 版本文本编辑器 24 | 有了更多的了解。 25 | 在阅读本文时注意快捷键于后面英文单词的对应可帮助记忆，在使用中忘记的快捷键以可以通过使用 26 | **查询面板**（后面会提到）进行查询。 27 | 如果你在使用过程中发现了异常和错误可以到 **Atom** 所在的 28 | GitHub 仓库提交问题报告。同一款编辑器一同成长，愿力量与你同在！ 29 | 下面的快捷键均为 **Mac OS X** 默认设置。如你用的是 Windows 或者是 Linux，可能需要尝试将 30 | 所有提到的 cmd 改为 ctrl。 31 | 32 | #### 基础中的基础 33 | 34 | 开始之前先把下面这条快捷键记住。cmd+shift+P 35 | 它会打开类似 Alfred 的快捷功能选择窗口， 36 | 如果你从来没有听过 Alfred（此为 Mac OS X 特有应用） 那你应该赶紧去所搜引擎中找找了。 37 | 38 | **保存时间** 39 | 40 | |快捷键|描述| 41 | |-----|----| 42 | |`cmd-shift-S`|可以另存为 "Save As"| 43 | |`cmd-alt-S`|可以保存全部的 "Save All".| 44 | 45 | **打开文件与目录** 46 | 47 | 如果在命令行环境中可以使用下面的方法一次打开多个目录。 48 | 49 | ```bash 50 | # 打开目录 51 | atom ./hopes ./dreams 52 | 53 | # 获得帮助 54 | atom -h 55 | ``` 56 | 57 | |快捷键|描述| 58 | |-----|----| 59 | |`cmd-O`|打开文件| 60 | |`cmd-shift-O`|添加目录至当前编辑器窗口| 61 | 62 | `cmd-P` 可以打开 Fuzzy Finder 进行模糊搜索，默认可所搜区域为项目内所有文件。 63 | 下面的命令可以对模糊所搜做一些限制，`cmd-B` 只所搜已打开的文件（存在与 Buffer 中的文件）。 64 | `cmd-shift-B` 65 | 66 | 1.0 版本中在编辑器中添加的新文件无法使用 Fuzzy Finder（模糊寻找） 找到，重启后则可以解决。 67 | 68 | **边栏（树目录）** 69 | 70 | |快捷键|描述| 71 | |-----|----| 72 | |`cmd-\`|显示或隐藏边栏| 73 | |`ctrl-0`|聚焦边栏，聚焦后可以操作树目录中的文件| 74 | 75 | 在聚焦后可以通过 `a` 来增加（add），`m` 来移动（move），`d` 来复制（duplicate）或者 76 | `delete` 来删除（此处为键盘删除键）。 77 | 这里的操作并没有自动路径补全功能，之后可能需要插件支持。 78 | 79 | #### 开始使用 80 | 81 | **Atom** 中几乎所有的功能都是以插件的形式存在的。所有如何安装插件则就是我们第一件要做的事。 82 | 除了图形界面安装的方法外，随 **Atom** 还安装了插件管理器叫做 `apm` 。通过它也可以直接安装 83 | 和更新插件。简单说主题也是插件，所以安装主题与安装插件的步骤类似。 84 | 85 | *下面的操作均需要联网* 86 | 87 | ``` 88 | # 安装插件 89 | apm install 90 | 91 | # 安装指定版本的插件 92 | apm install @ 93 | 94 | # 查询插件 95 | apm search 96 | 97 | # 查询插件详情 98 | apm view 99 | ``` 100 | 101 | ##### 移动光标 102 | 103 | **Atom** 的移动快方法同 **Emacs** 一致。在熟悉使用 **Atom** 后也很容易的转移至 104 | **Emacs** 的环境下熟练工作。 105 | 106 | 单个字符的移动，效果于方向键一致。 107 | 108 | |快捷键|描述| 109 | |-----|----| 110 | |`ctrl-P`|上移（Previous）| 111 | |`ctrl-N`|下移（Next）| 112 | |`ctrl-B`|后移（Back）| 113 | |`ctrl-F`|前移（Forward）| 114 | 115 | 在单个字符移动基础上，可以延展至更大范围的移动。例如，单词，整行。 116 | 117 | |快捷键|描述| 118 | |-----|----| 119 | |`alt-B`|向后以词为单位移动（英文），中文则以英文标点为间隔| 120 | |`alt-F`|向前以词为单位移动（英文），中文则以英文标点为间隔| 121 | |`ctrl-E`|移动至行末（End）| 122 | |`ctrl-A`|移动至此行首字符（Ahead)| 123 | |`ctrl-A`（敲击两次）|移动至此行行首（包括空格）| 124 | |`cmd-up`|移动至文件最顶| 125 | |`cmd-down`|移动至文件最低| 126 | 127 | `ctrl-G` 加数字可移动至**目标行**，使用 `row:column` 可以定位行数和列数， 128 | 使用这个方法在查找错误时变得十分方便。 129 | 130 | `cmd-R` 可以**在当前文件中**（Buffer）按照符号来搜索，符号关键字指的是函数名（代码中） 131 | 或标题（文档中）。 132 | 133 | 134 | 135 | 136 | 137 | ##### 选择 138 | 139 | 选择是在移动的基础上加入 `shift` 既可完成。特别的几种选择方法如下。 140 | 141 | |快捷键|描述| 142 | |-----|----| 143 | |`cmd-L`|选取整行| 144 | |`ctrl-shift-W`|选取当前单词（英文），中文则为整行| 145 | 146 | ##### 编辑与删除 147 | 148 | **Atom** 如同其他的常用的文本编辑器一样可以直接编辑文字，并不存在特殊的模式。但了解下面的 149 | 编辑技巧可以让你使用 **Atom** 更得心应手。 150 | 151 | **编辑操作** 152 | 153 | |快捷键|描述| 154 | |-----|----| 155 | |`ctrl-T`|交换光标两边的字符（Transpose）| 156 | |`ctrl-J`|将下一行同当前行合并（Join）| 157 | |`ctrl-cmd-up`|向上冒泡当前行| 158 | |`ctrl-cmd-down`|向下冒泡当前行| 159 | |`cmd-shift-D`|复制当前行（Duplicate）| 160 | |`cmd-K, cmd-U`|转换选中字符至全大写| 161 | |`cmd-K, cmd-L`|转换选中字符至全小| 162 | 163 | 164 | 165 | 166 | **删除操作** 167 | 168 | |快捷键|描述| 169 | |-----|----| 170 | |`ctrl-shift-K`|删除当前（Cut）| 171 | |`cmd-delete`|删除此行光标后全部字符| 172 | |`cmd-backspace`|删除至当前行首| 173 | |`ctrl-K`|切帖至行末（Cut）| 174 | |`alt-H`|删除前一个字符| 175 | |`alt-D`|删除后一个字符| 176 | 177 | **多个光标及选择** 178 | 179 | 同 **Sublime Text** 相同，**Atom** 也同样有多光标的实现。 180 | 按住cmd可以在文本中使用进行区域性选择。 181 | 182 | |快捷键|描述| 183 | |-----|----| 184 | |`cmd-click`|在点击处增加新光标| 185 | |`cmd-shift-L`|将选择区域转换为多光标| 186 | |`ctrl-shift-up`|在上一行增加新光标| 187 | |`ctrl-shift-down`|在下一行增加新光标| 188 | |`cmd-D`|选择下一个于当前被选字符相同的字符并添加新光标| 189 | |`cmd-ctrl-G`|选择全部于当前选中字符相同的字符并添加光标| 190 | 191 | ##### 括号 192 | 193 | 编程中最常打交道和需要跳出的莫属于括号和引号了。**Atom** 对于括号有很好的处理办法， 194 | 各种括号在光标内移动都会被自动高亮（引号和 HTML 中的标签也会被高亮和自动补全）。 195 | 选中内容后使用括号可以自动将选中内容包含在括号或引号内。 196 | 197 | |快捷键|描述| 198 | |-----|----| 199 | |`ctrl-M`|跳至最近的一个括号的起始位置| 200 | |`ctrl-cmd-M`|选中括号内的所有内容| 201 | |`alt-cmd-.`|关闭最近的一个 XML/HTML 标签| 202 | 203 | ##### 搜索与替换 204 | 205 | |快捷键|描述| 206 | |-----|----| 207 | |`cmd-F`|当前文本中搜索| 208 | |`cmd-shift-F`|搜索整个项目| 209 | |`cmd-G`|找到下一个匹配的搜索结果| 210 | |`cmd-G-shift`|找到上一个匹配的搜索结果| 211 | 212 | 在项目搜索中可以使用 wildcard 和指定目标的搜索路径。 213 | 214 | ##### 代码片段（Snippets） 215 | 216 | 代码片段让你在写代码时有飞一般的感觉，代码片段会将预先设置好的代码片段替换在当前文本中， 217 | 并且设置焦点并用 tab 聚焦下一个焦点， 218 | 或 shift + tab 聚焦上一个焦点。 219 | 220 | 所有的代码片都存储在下面的目录中 `~/.atom/snippets.cson`， 221 | 你可以通过 Open Your Snippets Menu 打开此文件。 222 | 223 | |快捷键|描述| 224 | |-----|----| 225 | |`alt-shift-S`|显示当前文件类型下的全部代码片段| 226 | 227 | 当然制作代码片也有一个代码片，它就是 `snip` 。 228 | 229 | ###### 制作代码片段 230 | 231 | 下面是一个简单的代码片样例。 232 | 233 | ```javascript 234 | '.source.js': 235 | 'console.log': 236 | 'prefix': 'log' 237 | 'body': 'console.log(${1: "crash"});$2' 238 | ``` 239 | 240 | - `.source.js` 为代码片可用的文件类型范围 241 | - `console.log` 为代码片内容描述 242 | - `prefix` 为代码片调用字符 243 | - `body` 代码片主体内容 244 | - `${1:'crash'}` 用于定义焦点，顺序及其默认值 245 | 246 | 多行代码代码片 247 | 248 | ```javascript 249 | '.source.js': 250 | 'if, else if, else': 251 | 'prefix': 'ieie' 252 | 'body': """ 253 | if (${1:true}) { 254 | $2 255 | } else if (${3:false}) { 256 | $4 257 | } else { 258 | $5 259 | } 260 | """ 261 | ``` 262 | 263 | 264 | 265 | ##### 代码折叠 266 | 267 | 可以点击代码行号边的箭头折叠当前层级的代码。 268 | 269 | |快捷键|描述| 270 | |-----|----| 271 | |`alt-cmd-[`|折叠当前层级| 272 | |`alt-cmd-]`|展开当前层级| 273 | |`alt-cmd-shift-{`|折叠全部层级| 274 | |`alt-cmd-shift-}`|展开全部层级| 275 | |`cmd-K, cmd-N`（层级数）|根据层级级别折叠| 276 | 277 | ##### 多窗口模式 278 | 279 | 任意一个窗口都可以无需的四面分割，分割的部分则依然使用标签来表示。 280 | 281 | |快捷键|描述| 282 | |-----|----| 283 | |`cmd-k arrow`|根据方向指定分割窗口| 284 | |`cmd-K, cmd-arrow`|聚焦指定方向的窗口| 285 | 286 | 287 | 288 | ##### 解码（Encoding） 289 | 290 | **Atom** 支持多种解码格式（包括中文 GBK 的支持），也可自动识别解码方式 291 | （不能识别时则默认为 UTF-8）。当然你也可以使用这种方法将多种文本在多种解码格式直接转换。 292 | 293 | |快捷键|描述| 294 | |-----|----| 295 | |`ctrl-shift-U`|切换解码方式| 296 | 297 | ##### 书签 298 | 299 | 在 **Atom** 添加书签就如同你看书的时添加书签一样，它使你在书写代码时可以自如的跳转到你需要的 300 | 位置。 301 | 302 | |快捷键|描述| 303 | |-----|----| 304 | |`F2-cmd`|可以在当前行切换标记书签| 305 | |`F2`|跳转至下一个书签| 306 | |`F2-shift`|跳转至上一个书签| 307 | |`F2-ctrl`|查看全部的书签| 308 | |`F2-cmd-shift`|清除全部标签| 309 | -------------------------------------------------------------------------------- /chapter1/03_00_html.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* 4 | 5 | - [HTML](#html) 6 | - [HTML 历史](#html-%E5%8E%86%E5%8F%B2) 7 | 8 | 9 | 10 | ## HTML 11 | 12 | ### HTML 历史 13 | 14 | HTML (Hyper Text Markup Language)，用于标记页面中的内容。 15 | 16 | ![](../img/H/html-history.png) -------------------------------------------------------------------------------- /chapter1/03_01_html_intro.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* 4 | 5 | - [HTML 简介](#html-%E7%AE%80%E4%BB%8B) 6 | 7 | 8 | 9 | ### HTML 简介 10 | 11 | ![](../img/H/html-overview.png) 12 | 13 | 注意事项： 14 | 15 | - `` 必须首行顶格 16 | - `` 文档解码格式 17 | - `` 为文档标题 18 | - `<meta name="keywords" content="...">` 和 `<meta name="description" content="...">` 设置页面关键字和页面内容描述，提供给搜索引擎使用 19 | - `<meta name="viewport" content="width=device-width, initial-scale=1.0">` 移动端浏览器的宽高与缩放 20 | - `<link ref="stylesheet" href="..">` 标签可以引入 favicon 和样式表 CSS 文件 21 | - `<script type="text/javascript" src=".."></script>` 标签可以引入JS文件 -------------------------------------------------------------------------------- /chapter1/03_02_html_sytax.md: -------------------------------------------------------------------------------- 1 | <!-- START doctoc generated TOC please keep comment here to allow auto update --> 2 | <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> 3 | **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* 4 | 5 | - [HTML 语法](#html-%E8%AF%AD%E6%B3%95) 6 | - [全局属性](#%E5%85%A8%E5%B1%80%E5%B1%9E%E6%80%A7) 7 | 8 | <!-- END doctoc generated TOC please keep comment here to allow auto update --> 9 | 10 | ### HTML 语法 11 | 12 | ![](../img/H/html-syntax.png) 13 | 14 | **书写规范**： 15 | 16 | - 小写标签和属性 17 | - 属性值双引号 18 | - 代码因嵌套缩进 19 | 20 | #### 全局属性 21 | 22 | - id, `<div id='unique-element'></div>`，页面中唯一 23 | - class，`<button class='btn'>Click Me</button>`，页面中可重复出现 24 | - style，`<style>.red{color:red}</style>` 内联样式，应尽量避免 25 | - title，对于元素的描述类似于 Tooltip 的效果。 26 | -------------------------------------------------------------------------------- /chapter1/03_04_html_ascii_encoding.md: -------------------------------------------------------------------------------- 1 | <!-- START doctoc generated TOC please keep comment here to allow auto update --> 2 | <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> 3 | **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* 4 | 5 | - [实体字符](#%E5%AE%9E%E4%BD%93%E5%AD%97%E7%AC%A6) 6 | 7 | <!-- END doctoc generated TOC please keep comment here to allow auto update --> 8 | 9 | ### 实体字符 10 | 11 | 实体字符（ASCII Encoding Reference）是用来在代码中以实体代替与HTML语法相同的字符，避免浏览解析错误。它的两种表示方式： 12 | 13 | - 第一种为 `&` 加`实体字符名称`，例如 ` `（推荐）。 14 | - 第二种为 `&` 加`实体字符序号`，例如 ` `。 15 | 16 | <table> 17 | <caption>常用HTML字符实体（建议使用实体字符）：</caption> 18 | <thead> 19 | <tr> 20 | <th>字符</th> 21 | <th>名称</th> 22 | <th>实体名</th> 23 | <th>实体数</th> 24 | </tr> 25 | </thead> 26 | <tbody> 27 | <tr> 28 | <td>"</td> 29 | <td>双引号</td> 30 | <td>&quot;</td> 31 | <td>&#34;</td> 32 | </tr> 33 | <tr> 34 | <td>&</td> 35 | <td>&符</td> 36 | <td>&amp;</td> 37 | <td>&#38;</td> 38 | </tr> 39 | <tr> 40 | <td><</td> 41 | <td>左尖括号（小于号）</td> 42 | <td>&lt;</td> 43 | <td>&#60;</td> 44 | </tr> 45 | <tr> 46 | <td>></td> 47 | <td>右尖括号（大于号）</td> 48 | <td>&gt;</td> 49 | <td>&#62;</td> 50 | </tr> 51 | <tr> 52 | <td> </td> 53 | <td>空格</td> 54 | <td>&nbsp;</td> 55 | <td>&#160;</td> 56 | </tr> 57 | <tr> 58 | <td>　</td> 59 | <td>中文全角空格</td> 60 | <td>&amp;</td> 61 | <td>&#12288;</td> 62 | </tr> 63 | </tbody> 64 | </table> 65 | 66 | <table> 67 | <caption>常用特殊字符实体（不建议使用实体字符）：</caption> 68 | <thead> 69 | <tr> 70 | <th>字符</th> 71 | <th>名称</th> 72 | <th>实体名</th> 73 | <th>实体数</th> 74 | </tr> 75 | </thead> 76 | <tbody> 77 | <tr> 78 | <td>¥</td> 79 | <td>元</td> 80 | <td>&yen;</td> 81 | <td>&#165;</td> 82 | </tr> 83 | <tr> 84 | <td>¦</td> 85 | <td>断竖线</td> 86 | <td>&brvbar;</td> 87 | <td>&#166;</td> 88 | </tr> 89 | <tr> 90 | <td>©</td> 91 | <td>版权</td> 92 | <td>&copy;</td> 93 | <td>&#169;</td> 94 | </tr> 95 | <tr> 96 | <td>®</td> 97 | <td>注册商标R</td> 98 | <td>&reg;</td> 99 | <td>&#174;</td> 100 | </tr> 101 | <tr> 102 | <td>™</td> 103 | <td>商标TM</td> 104 | <td>&trade;</td> 105 | <td>&#8482;</td> 106 | </tr> 107 | <tr> 108 | <td>·</td> 109 | <td>间隔符</td> 110 | <td>&middot;</td> 111 | <td>&#183;</td> 112 | </tr> 113 | <tr> 114 | <td>«</td> 115 | <td>左双尖括号</td> 116 | <td>&laquo;</td> 117 | <td>&#171;</td> 118 | </tr> 119 | <tr> 120 | <td>»</td> 121 | <td>右双尖括号</td> 122 | <td>&raquo;</td> 123 | <td>&#187;</td> 124 | </tr> 125 | <tr> 126 | <td>°</td> 127 | <td>度</td> 128 | <td>&deg;</td> 129 | <td>&#176;</td> 130 | </tr> 131 | <tr> 132 | <td>×</td> 133 | <td>乘</td> 134 | <td>&times;</td> 135 | <td>&#215;</td> 136 | </tr> 137 | <tr> 138 | <td>÷</td> 139 | <td>除</td> 140 | <td>&divide;</td> 141 | <td>&#247;</td> 142 | </tr> 143 | <tr> 144 | <td>‰</td> 145 | <td>千分比</td> 146 | <td>&permil;</td> 147 | <td>&#8240;</td> 148 | </tr> 149 | </tbody> 150 | </table> 151 | 152 | NOTE：具体所需可在使用时查询，无需记忆。 -------------------------------------------------------------------------------- /chapter1/03_05_cross_browser.md: -------------------------------------------------------------------------------- 1 | <!-- START doctoc generated TOC please keep comment here to allow auto update --> 2 | <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> 3 | **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* 4 | 5 | - [浏览器兼容](#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9) 6 | 7 | <!-- END doctoc generated TOC please keep comment here to allow auto update --> 8 | 9 | ### 浏览器兼容 10 | 11 | 主流浏览器都兼容 HTML5 的新标签，对于 IE8 及以下版本不认识 HTML5的新元素，可以使用 JavaScript 创建一个没用的元素来解决，例如： 12 | 13 | ```javascript 14 | <script> 15 | document.createElement("header"); 16 | </script> 17 | ``` 18 | 也可以使用 shiv 来解决兼容性问题，详情可参考 [HTML5 Shiv](https://github.com/afarkas/html5shiv) -------------------------------------------------------------------------------- /chapter1/04_00_css_intro.md: -------------------------------------------------------------------------------- 1 | <!-- START doctoc generated TOC please keep comment here to allow auto update --> 2 | <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> 3 | **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* 4 | 5 | - [CSS](#css) 6 | - [简介](#%E7%AE%80%E4%BB%8B) 7 | 8 | <!-- END doctoc generated TOC please keep comment here to allow auto update --> 9 | 10 | ## CSS 11 | 12 | ### 简介 13 | 14 | CSS (Cascading Stylesheet) 它用于设置页面的表现。CSS3 并不是一个完整的独立版本而是将不同的功能拆分成独立模块（例如，选择器模块，盒模型模块），这有利于不同功能的及时更新与发布也利于浏览器厂商的实习。 15 | 16 | ![](../img/C/css3-history.png) 17 | 18 | **CSS 引入方法** 19 | 20 | ```html 21 | // 1. 外部样式表 22 | <head> 23 | <link rel="stylesheet" type="text/css" href="style.css"> 24 | </head> 25 | 26 | // 2. 内部样式表 27 | <head> 28 | <style type="text/css"> 29 | p { 30 | margin: 10px; 31 | } 32 | </style> 33 | </head> 34 | 35 | // 3. 内嵌样式(可在动态效果中同 JavaScript 一同使用) 36 | <p style="color: red">Sample Text</p> 37 | ``` 38 | -------------------------------------------------------------------------------- /chapter1/04_01_css_sytax.md: -------------------------------------------------------------------------------- 1 | <!-- START doctoc generated TOC please keep comment here to allow auto update --> 2 | <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> 3 | **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* 4 | 5 | - [语法](#%E8%AF%AD%E6%B3%95) 6 | - [属性值语法](#%E5%B1%9E%E6%80%A7%E5%80%BC%E8%AF%AD%E6%B3%95) 7 | - [基本元素](#%E5%9F%BA%E6%9C%AC%E5%85%83%E7%B4%A0) 8 | - [关键字](#%E5%85%B3%E9%94%AE%E5%AD%97) 9 | - [类型](#%E7%B1%BB%E5%9E%8B) 10 | - [inherit, initial](#inherit-initial) 11 | - [组合符号](#%E7%BB%84%E5%90%88%E7%AC%A6%E5%8F%B7) 12 | - [数量符号](#%E6%95%B0%E9%87%8F%E7%AC%A6%E5%8F%B7) 13 | - [@规则语法](#@%E8%A7%84%E5%88%99%E8%AF%AD%E6%B3%95) 14 | - [浏览器私有属性](#%E6%B5%8F%E8%A7%88%E5%99%A8%E7%A7%81%E6%9C%89%E5%B1%9E%E6%80%A7) 15 | 16 | <!-- END doctoc generated TOC please keep comment here to allow auto update --> 17 | 18 | ## 语法 19 | 20 | ### 属性值语法 21 | 22 | `CSS属性语法` 指的是对CSS属性的使用进行说明的语法，比如：这个属性可以有几个值，某个值的取值应该是怎样的。比如下面就是对于`margin属性`的使用说明语法。它表示在`margin`这个属性里，length、percentage、auto这3个元素只能选择一个，并且这个元素可以出现1-4次。 23 | 24 | `margin: [ <length> | <percentage> | auto ]{1,4}` 25 | 26 | 上面是一个对于margin属性的语法说明，可以分为3部分。 27 | 28 | `基本元素`：length, percentage, auto 29 | 30 | `组合符号`：[], | 31 | 32 | `数量符号`：{1,4} 33 | 34 | 下面将详细介绍CSS基础语法 35 | 36 | #### 基本元素 37 | 38 | 上面说到的基本元素其实可以分为`关键字`、`类型`、`inherit initial`3类： 39 | 40 | ##### 关键字 41 | 42 | - auto 43 | - solid 44 | - bold 45 | - ... 46 | 47 | ##### 类型 48 | 49 | - 基本类型 50 | - `<length>` 51 | - `<percentage>` 52 | - `<color>` 53 | - ... 54 | - 其他类型 55 | - `<'padding-width'>` 56 | - `<'color-stop'>` 57 | - 符号 58 | - `/` 59 | - `,` 60 | 61 | ##### inherit, initial 62 | 63 | inherit, initial 是特殊的关键字，所有的属性都可以取到这个值。inherit表示属性的值继承自父级，initial表示属性的值为初始值。 64 | 65 | #### 组合符号 66 | 67 | - `<'font-size'> <'font-family'>` （` ` 两项必存，有序） 68 | - 合法：`12px arial` 69 | - 不合法：`2em` 70 | - 不合法：`arial 14px` 71 | - `<length>&&<color>` (`&&` 两项必存，无序) 72 | - 合法：green 2px 73 | - 合法：1em orange 74 | - 不合法：blue 75 | - `underline || overline || line-through || blink` (`||` 至少选一，无序) 76 | - 合法：underline 77 | - 合法：overline underline 78 | - `<color> | transparent`（`|` 只可选一，不可共存） 79 | - 合法：orange 80 | - 合法：transparent 81 | - 不合法：orange transparent 82 | - `bold [thin || <length>]`（`[]` 分组之用，视为整体） 83 | - 合法：bold thin 84 | - 合法：bold 2em 85 | 86 | #### 数量符号 87 | 88 | - `<length>`（无则表示仅可出现一次） 89 | - 合法：1px 90 | - 合法：10em 91 | - 不合法：1px 2px 92 | - `<color-stop>[, <color-stop>]+` (`+` 可出现一次或多次) 93 | - 合法：#fff, red 94 | - 合法：blue, green 50%, gray 95 | - 不合法：red 96 | - `inset?&&<color>` (`?` 表示可选) 97 | - 合法：inset orange 98 | - 合法：red 99 | - `<length>{2,4}` (`{2,4}` 最少出现次数和最多出现次数) 100 | - 合法：1px 2px 101 | - 合法：1px 2px 3px 102 | - 不合法: 1px 103 | - 不合法：1px 2px 3px 4px 5px 104 | - `<time>[, <time>]*`（`*` 出现 0 次或多次） 105 | - 合法：1s 106 | - 合法：1s,4ms 107 | - `<time>#`（`#` 出现一次或者多次，与`+`的区别是：`+`用空格分割，而`#`用`,`分隔） 108 | - 合法：2s, 4s 109 | - 不合法：1s 2s 110 | 111 | ### @规则语法 112 | 113 | `@规则语法`有两种存在形式： 114 | 115 | - `@标示符 内容;` 116 | - `@标示符 内容{}` 117 | 118 | ``` 119 | @import "subs.css"; 120 | @charset "utf-8"; 121 | @media print { 122 | /* property: value */ 123 | } 124 | @keyframes fadein { 125 | /* property: value */ 126 | } 127 | ``` 128 | 129 | **常用的@规则语法** 130 | - `@media` （用于响应式布局） 131 | - `@keyframes` （CSS 动画的中间步骤） 132 | - `@font-face` （引入外部字体） 133 | 134 | **其他@规则语法（不常用）** 135 | - `@import` 136 | - `@charset` 137 | - `@namespace` 138 | - `@page` 139 | - `@supports` 140 | - `@document` 141 | 142 | ### 浏览器私有属性 143 | 144 | 因为不同浏览器有不同的私有属性，所以为了浏览器的兼容，一些属性的使用上必须加上特定浏览器的前缀。如： 145 | 146 | ```css 147 | .pic { 148 | /* 把兼容的写前面，标准的写最后面 */ 149 | -webkit-transform: rotate(-3deg); 150 | -ms-transform: rotate(-3deg); 151 | transform: rotate(-3deg); 152 | } 153 | ``` 154 | 常用浏览器的前缀如下： 155 | 156 | - Google Chrome, Safari (`-webkit`) 157 | - Firefox (`-moz-`) 158 | - IE (`-ms-`) 159 | - Opera (`-o-`) 160 | 161 | 点击这里可以详细了解[为什么建议将浏览器私有CSS3属性写在前面，标准属性写在后面？](http://www.cnblogs.com/rentj1/archive/2012/06/06/2537924.html) 162 | 163 | NOTE: 使用 [http://pleeease.io/play/](http://pleeease.io/play/) ，CSS 预处理器（Sass，Less，Stylus）或编辑器插件可自动添加浏览器厂商的私有属性前缀。 164 | -------------------------------------------------------------------------------- /chapter1/04_04_box_model.md: -------------------------------------------------------------------------------- 1 | <!-- START doctoc generated TOC please keep comment here to allow auto update --> 2 | <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> 3 | **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* 4 | 5 | - [盒模型](#%E7%9B%92%E6%A8%A1%E5%9E%8B) 6 | - [属性](#%E5%B1%9E%E6%80%A7) 7 | - [width](#width) 8 | - [height](#height) 9 | - [padding](#padding) 10 | - [margin](#margin) 11 | - [border](#border) 12 | - [border-radius](#border-radius) 13 | - [overflow](#overflow) 14 | - [box-sizing](#box-sizing) 15 | - [box-shadow](#box-shadow) 16 | - [outline](#outline) 17 | - [TRBL](#trbl) 18 | - [值缩写](#%E5%80%BC%E7%BC%A9%E5%86%99) 19 | 20 | <!-- END doctoc generated TOC please keep comment here to allow auto update --> 21 | 22 | <!-- MarkdownTOC --> 23 | 24 | - [盒模型](#盒模型) 25 | - [属性](#属性) 26 | - [width](#width) 27 | - [height](#height) 28 | - [padding](#padding) 29 | - [margin](#margin) 30 | - [border](#border) 31 | - [border-radius](#border-radius) 32 | - [overflow](#overflow) 33 | - [box-sizing](#box-sizing) 34 | - [box-shadow](#box-shadow) 35 | - [outline](#outline) 36 | - [TRBL](#trbl) 37 | - [值缩写](#值缩写) 38 | 39 | <!-- /MarkdownTOC --> 40 | 41 | ### 盒模型 42 | 43 | 盒子模型是网页布局的基石。它有**边框**、**外边距**、**内边距**、**内容**组成。 44 | 45 | **盒子 3D 模型** 46 | 47 | ![](../img/B/box-model-3d.png) 48 | 49 | 盒子由上到下依次分为五层，它们自上而下的顺序是。 50 | 51 | 1. border 边框 52 | 2. content + padding 内容与内边距 53 | 3. background-image 背景图片 54 | 4. background-color 背景颜色 55 | 4. margin 外边距 56 | 57 | #### 属性 58 | 59 | ![](../img/B/box-module.jpg) 60 | 61 | ##### width 62 | 63 | **内容盒子宽** 64 | 65 | `width: <length> | <percentage> | auto | inherit` 66 | 67 | NOTE：通常情况下百分比得参照物为元素的父元素。`max-width` 与 `min-width` 可以设置最大与最小宽度。 68 | 69 | ##### height 70 | 71 | **内容盒子高** 72 | 73 | `height: <length> | <percentage> | auto | inherit` 74 | 75 | NOTE：默认情况元素的高度为内容高度。`max-height` 与 `min-height` 可以设置最大与最小高度。 76 | 77 | ##### padding 78 | 79 | ![](../img/P/padding-sample.png) 80 | 81 | `padding: [<length> | <percentage>]{1,4} | inherit` 82 | 83 | ##### margin 84 | 85 | ![](../img/M/margin-sample.png) 86 | 87 | `margin: [<length> | <percentage> | auto]{1,4} | inherit` 88 | 89 | NOTE：`margin` 默认值为 `auto` 90 | 91 | Trick： 92 | 93 | ``` 94 | /* 可用于水平居中 */ 95 | margin: 0 auto; 96 | ``` 97 | 98 | ###### margin 合并 99 | 100 | ![](../img/M/margin-merge.png) 101 | 102 | 毗邻元素外间距（margin）会合并，既取相对较大的值。父元素与第一个和最后一个子元素的外间距也可合并。 103 | 104 | NOTE：margin合并只存在于垂直方向上，margin在水平方向上是不会发生合并的。 105 | 106 | ##### border 107 | 108 | **统一设置所有边框** 109 | 110 | ![](../img/B/border-sample.png) 111 | 112 | ``` 113 | border: [<br-width> || <br-style> || <color>] | inherit 114 | border-width: [<length> | thin | medium | thick]{1,4} | inherit 115 | border-style: [solid | dashed | dotted | ...]{1,4} |inherit 116 | border-colro: [<color> | transparent]{1,4} | inherit 117 | ``` 118 | 119 | NOTE：`border-color` 默认为元素字体颜色。 120 | 121 | `border : 1px dashed blue; ` 122 | 123 | ```html 124 | border-width: 0 1px 2px 3px; 125 | border-style: solid; 126 | border-color: #0ff; 127 | ``` 128 | 129 | **单独设置每条边框** 130 | 131 | ``` 132 | border-left: [<br-width> || <br-style> || <color>] | inherit 133 | border-left-width: [<length> | thin | medium | thick]{1,4} | inherit 134 | border-left-style: [solid | dashed | dotted | ...]{1,4} |inherit 135 | border-left-colro: [<color> | transparent]{1,4} | inherit 136 | ``` 137 | 138 | 上面的可以设置左边border，类似的也可以设置border-right、border-top、border-bottom。 139 | 140 | ##### border-radius 141 | 142 | ![](../img/B/border-radius-sample1.png) 143 | 144 | `border-radius : [<length> | <percentage>]{1,4} [/[<length> | <percentage>]{1,4}?` 145 | 146 | 最多可以设置8个[length|percentage]，第一个[length|percentage]组的4个值分别代表左上到左下（顺时针）角水平半径大小，第二个[length|percentage]组的4个值分别代表左上到左下（顺时针）角垂直半径大小。其取值符合TRBL原则 147 | 148 | NOTE：8个取值先匹配水平方向的，再匹配垂直方向的。如果垂直方向没有值，那么垂直方向与水平方向的设置相同。 149 | 150 | ``` 151 | border-radius : 10px; //四个角水平和垂直半径都是10px 152 | //左上右下水平半径为10px，左下右上水平半径为20px。垂直方向与水平方向一样 153 | border-radius : 10px 20px; 154 | //左上水平半径10px，右上水平半径20px，右下水平半径30px，左下水平半径20px。垂直方向与水平方向一样 155 | border-radius : 10px 20px 30px; 156 | ``` 157 | 158 | ```html 159 | border-radius : 50%; //画出的是一个正圆 160 | border-radius : 0px 5px 10px 15px / 20px 15px 10px 5px; 161 | //左上角水平半径0px、垂直半径20px 162 | //右上角 5px 15px 163 | //右下角 10px 10px 164 | //左下角 15px 5px 165 | ``` 166 | 167 | ##### overflow 168 | 169 | ![](../img/O/overflow-sample.png) 170 | 171 | `overflow: visible（默认值） | hidden | scroll | auto` 172 | 173 | - visible ：超出部分依然显示 174 | - hidden ：超出部分隐藏 175 | - scroll ：无论什么时候都显示滚动条 176 | - auto ：没超出的时候不显示滚动条，超出的时候显示滚动条 177 | 178 | NOTE：使用 `overflow-x` 与 `overflow-y` 单独的设置水平和垂直方向的滚动条。 179 | 180 | ##### box-sizing 181 | 182 | `box-sizing：content-box（默认值） | border-box | inherit` 183 | 184 | 指定width和height属性设置的对象是border box还是content box。 185 | 186 | - 如果是`content-box`，那么盒子大小 = 内容盒子宽高 + 填充（`Padding`）+ 边框宽（`border-width`） 187 | - 如果是`border-box`，那么盒子大小 = 内容盒子宽高 188 | 189 | ![](../img/B/box-sizing.png) 190 | 191 | ![](../img/B/box-sizing1.png) 192 | 193 | ##### box-shadow 194 | 195 | ![](../img/B/box-shadow.png) 196 | 197 | `box-shadow : none | <shadow> [,<shadow>]*` 198 | 199 | `<shadow> : inset ? && <length>{2,4} && <color>?` 200 | 201 | `inset`表示是否要是内阴影，默认是外阴影 202 | `<length>{2,4}` 2-4个阴影分别表示水平偏移、垂直偏移、模糊半径、阴影大小 203 | 204 | ```html 205 | box-shadow : 4px 6px 3px 5px red; 206 | //4px表示水平偏移 207 | //6px表示垂直偏移 208 | //3px表示模糊半径（可选） 209 | //5px表示阴影大小（可选） 210 | box-shadow : inset 0px 0px 5px red; 211 | //inset表示是内阴影，没加inset则默认是外阴影。 212 | ``` 213 | 214 | NOTE：水平与垂直偏移可以为负值即相反方向偏移。颜色默认为文字颜色。阴影不占据空间，仅为修饰效果。 215 | 216 | ##### outline 217 | 218 | ``` 219 | outline: [ <'outline-color'> || <'outline-style'> || <'outline-width'> ] 220 | outline-width: <length> | thin | medium | thick | inherit 221 | outline-style: solid | dashed | dotted | ... | inherit 222 | outline-color: <color> | invert | inherit 223 | /* invert 与当前颜色取反色 */ 224 | ``` 225 | 226 | NOTE：`outline` 与 `border` 相似但无法分别设置四个方向的属性。`outline` 并不占据空间，而 `border` 占据空间，且显示位于 `border` 以外。 227 | 228 | #### TRBL 229 | 230 | ![](../img/T/TRBL.png) 231 | 232 | ![](../img/B/border-radius-sample.png) 233 | 234 | TRBL (Top, Right, Bottom, Left) 即为顺时针从顶部开始。具有四个方向的属性都可以通过 `*-top` `*-right` `*-bottom` 与 `*-left` 单独对其进行设置。 235 | 236 | #### 值缩写 237 | 238 | 下面的值缩写以 `padding` 为例。 239 | 240 | > 对面相等，后者省略；四面相等，只设一个。 241 | 242 | ```html 243 | /* 四面值 */ 244 | padding: 20px; 245 | padding: 20px 20px 20px 20px; 246 | 247 | /* 上下值 右左值 */ 248 | padding: 20px 10px; 249 | padding: 20px 10px 20px 10px; 250 | 251 | /* 上值 右左值 下值 */ 252 | padding: 20px 10px 30px; 253 | padding: 20px 10px 30px 10px; 254 | ``` 255 | -------------------------------------------------------------------------------- /chapter1/04_07_transform.md: -------------------------------------------------------------------------------- 1 | <!-- START doctoc generated TOC please keep comment here to allow auto update --> 2 | <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> 3 | **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* 4 | 5 | - [变形](#%E5%8F%98%E5%BD%A2) 6 | - [2D 变形](#2d-%E5%8F%98%E5%BD%A2) 7 | - [translate() 偏移](#translate-%E5%81%8F%E7%A7%BB) 8 | - [3D 变形](#3d-%E5%8F%98%E5%BD%A2) 9 | - [perspective 设置旋转透视效果](#perspective--%E8%AE%BE%E7%BD%AE%E6%97%8B%E8%BD%AC%E9%80%8F%E8%A7%86%E6%95%88%E6%9E%9C) 10 | - [perspective-origin 设置旋转透视角度](#perspective-origin--%E8%AE%BE%E7%BD%AE%E6%97%8B%E8%BD%AC%E9%80%8F%E8%A7%86%E8%A7%92%E5%BA%A6) 11 | - [transform-style 保留3D空间](#transform-style--%E4%BF%9D%E7%95%993d%E7%A9%BA%E9%97%B4) 12 | - [backface-visibility 设置背面是否可见](#backface-visibility--%E8%AE%BE%E7%BD%AE%E8%83%8C%E9%9D%A2%E6%98%AF%E5%90%A6%E5%8F%AF%E8%A7%81) 13 | - [rotateY() 沿Y轴旋转](#rotatey--%E6%B2%BFy%E8%BD%B4%E6%97%8B%E8%BD%AC) 14 | - [rotate3d() 3D旋转](#rotate3d--3d%E6%97%8B%E8%BD%AC) 15 | - [translate3d() 3D偏移](#translate3d--3d%E5%81%8F%E7%A7%BB) 16 | - [scale3d() 3D缩放](#scale3d--3d%E7%BC%A9%E6%94%BE) 17 | 18 | <!-- END doctoc generated TOC please keep comment here to allow auto update --> 19 | 20 | ### 变形 21 | 22 | #### 2D 变形 23 | 24 | ###### rotate() 旋转 25 | 26 | `rotate(<angle>)` 27 | 28 | 旋转一个元素（**参照物：Y轴，顺时针为正方向**） 29 | 30 | ``` 31 | rotate(45deg); 32 | <!-- 右边旋转，顺时针 --> 33 | rotate(-60deg); 34 | <!-- 左边旋转，逆时针 --> 35 | ``` 36 | ![](../img/T/transform-rotate.png) 37 | 38 | ##### translate() 偏移 39 | 40 | `translate(<translation-value>[, <translation-value>]?)` 41 | 42 | 移动一个元素（**参照物：从左到右，从上到下为正方向**） 43 | 44 | - 两个参数分别代表 X 与 Y 轴的移动（偏移值均可为负值） 45 | - 当只有一个值的时候，另外一个值相当于没设置。 46 | 47 | 也可单独设置 X 与 Y 轴的偏移： 48 | 49 | `translationX(<translation-value>)` 只设置X轴的偏移 50 | 51 | `translationY(<translation-value>)` 只设置Y轴的偏移 52 | 53 | ``` 54 | transform: translate(50px); 55 | transform: translate(50px, 20%); <!-- 20%的参照物为盒子本身的高 --> 56 | transform: translate(-50px); 57 | transform: translate(20%); 58 | ``` 59 | ![](../img/T/transform-traslate.png) 60 | 61 | ###### scale() 缩放 62 | 63 | `scale(<number> [, <number>]?)` 64 | 65 | 缩放一个元素。 66 | 67 | - 两个参数分别代表 X 与 Y 轴的缩放（缩放值均可为负值） 68 | - 只有一个参数时，第二个参数的值与第一个参数相同。 69 | 70 | 也可单独设置 X 与 Y 轴的缩放： 71 | 72 | `scaleX(<number>)` 73 | `scaleY(<number>)` 74 | 75 | ``` 76 | <!-- 整体放大 1.2 倍 --> 77 | transform: scale(1.2); 78 | <!-- 高度拉伸 --> 79 | transform: scale(1, 1.2); 80 | <!-- 宽度拉伸 --> 81 | transform: scaleX(1.2); 82 | <!-- 高度拉伸 --> 83 | transform: scaleY(1.2); 84 | ``` 85 | ![](../img/T/transform-scale.png) 86 | 87 | ###### skew() 倾斜 88 | 89 | `skew(<angle>[, <angle>]?)` 90 | 91 | 倾斜一个元素，倾斜值可为负值。(**参照物：第一个值，Y往X逆时针为正。第二个值，X往Y顺时针为正**) 92 | 93 | - 参数2个时，分别代表Y轴倾斜和X轴倾斜。 94 | - 参数1个时，代表Y轴倾斜，X轴默认是0倾斜度。 95 | 96 | 也可单独设置 X 与 Y 轴的倾斜： 97 | 98 | `skewX(<angle>)` <!-- 向X轴倾斜 --> 99 | `skewY(<angle>)` <!-- 向Y轴倾斜 --> 100 | 101 | ``` 102 | transform: skew(30deg); 103 | transform: skew(30deg, 30deg); 104 | transform: skewX(30deg); 105 | transform: skewY(30deg); 106 | ``` 107 | 108 | ![](../img/T/transform-skew.png) 109 | 110 | ###### transform-origin 设置旋转原点位置 111 | 112 | `transform-origin: [ <percentage> | <length> | left | center | right | top | bottom] | [ [ <percentage> | <length> | left | center | right ] && [ <percentage> | <length> | top | center | bottom ] ] <length>?` 113 | 114 | 其用于设置原点的位置（默认位置为元素中心）第一值为 X 方向，第二值为 Y 方向， 第三值为 Z 方向。（当值空出未写的情况下默认为 50%） 115 | 116 | ``` 117 | transform-origin: 50% 50%; /* 原点在中心点 */ 118 | transform-origin: 0 0; /* 原点在容器左上角 */ 119 | transform-origin: right 50px 20px; /* 原点在最右边，往Y轴偏了50px，Z轴偏了20px */ 120 | transform-origin: top right 20px; 121 | ``` 122 | ![](../img/T/transform-origin.png) 123 | 124 | ###### transform shorthand 125 | 126 | `trnasform: none（默认值） | <transform-function>+` 127 | 128 | `<transform-function> : rotate | translate | scale | skew ` 129 | 130 | 使一个元素变形。这里的`<transform-function>`指的就是具体的变形方法： 131 | 132 | - rotate 旋转 133 | - translate 偏移 134 | - scale 缩放 135 | - skew 倾斜 136 | 137 | 变形函数顺序普通会导致结果不同，如下面这个例子： 138 | 139 | ``` 140 | <!-- 下面两个的结果是不同的 --> 141 | <!-- 先偏移50%，再旋转45° --> 142 | transform: translate(50%) rotate(45deg); 143 | <!-- 先旋转45%，再偏移50% --> 144 | transform: rotate(45deg) transform(50%) 145 | ``` 146 | 147 | 之所以这样，是因为当发生变形的时候，其X轴和Y轴也跟着发生了变化。在上面第二个例子中，当先旋转45%的时候，X轴和Y轴都向顺时针方向偏移了45度。此时再偏移50%，则是向旋转之后的X轴方向偏转。 148 | 149 | ![](../img/T/transform-transform-function.png) 150 | 151 | #### 3D 变形 152 | 153 | ##### perspective 设置旋转透视效果 154 | 155 | `perspective: none | <length>` 156 | 157 | 设置图片 Y 轴旋转后的透视效果。`<length>` 可以理解为人眼与元素之间的距离，越紧则效果越明显。 158 | 159 | ``` 160 | perspective: none; 161 | perspective: 2000px; 162 | perspective: 500px; 163 | ``` 164 | ![](../img/T/transform-perspective.png) 165 | 166 | 167 | ##### perspective-origin 设置旋转透视角度 168 | 169 | `perspective-origin: [ <percentage> | <length> | left | center | right | top | bottom] | [ [ <percentage> | <length> | left | center | right ] && [ <percentage> | <length> | top | center | bottom ] ]` 170 | 171 | 设置旋转透视角度，透视位置均可设定为负值。 172 | 173 | - 1个值时，设置的是X轴上的位置，Y轴上的位置默认为center 174 | - 2个值时，设置的是X、Y轴上的位置 175 | 176 | ``` 177 | perspective-origin: 50% 50%; <!-- 在正前方透视 --> 178 | perspective-origin: left bottom; <!-- 在左下方透视 --> 179 | perspective-origin: 50% -800px; <!-- 在正上方透视 --> 180 | perspective-origin: right; <!-- 在右边正中透视 --> 181 | ``` 182 | ![](../img/T/transform-perspective-origin.png) 183 | 184 | 185 | ##### transform-style 保留3D空间 186 | 187 | `transform-style: flat（默认值） | perserve-3d` 188 | 189 | 设置保留内部的 3D 空间，在需要显示3D效果元素的容器（即父级）元素上设置。 190 | 191 | - flat：不保留3D空间 192 | - preserve-3d：保留3D空间 193 | 194 | ``` 195 | transform-style: flat; 196 | transform-style: preserve-3d; 197 | ``` 198 | ![](../img/T/transform-transform-style.png) 199 | 200 | ##### backface-visibility 设置背面是否可见 201 | 202 | `backface-visibility: visible | hidden` 203 | 204 | 设置元素背面不可见，即元素通过3D操作之后不显示元素背面。 205 | 206 | ``` 207 | backface-visibility: visible; 208 | backface-visibility: hidden; 209 | ``` 210 | ![](../img/T/transform-backface-visibility.png) 211 | 212 | ##### rotateY() 沿Y轴旋转 213 | 214 | `transform: rotateY(<angle>)` 215 | 216 | 设置元素沿Y轴旋转 217 | 218 | ##### rotate3d() 3D旋转 219 | 220 | `rotate3d(<number>, <number>, <number>, <angle>)` 221 | 222 | 对元素进行3D旋转。旋转方式为：取 X Y Z 三轴上的一点并于坐标原点连线，以连线为轴进行旋转（逆时针）。 223 | 224 | 也可以单独设置元素在各个轴上的旋转角度： 225 | 226 | `rotateX(<angle>)` 227 | `rotateY(<angle>)` 228 | `rotateZ(<angle>)` 229 | 230 | ``` 231 | <!-- 下面等同于 X 轴旋转 --> 232 | transform: rotate3d(1, 0, 0, 45deg); 233 | <!-- 下面等同于 Y 轴旋转 --> 234 | transform: rotate3d(0, 1, 0, 45deg); 235 | <!-- 下面等同于 Z 轴旋转（等同于2D 旋转） --> 236 | transform: rotate3d(0, 0, 1, 45deg); 237 | <!-- 以(1, 1, 1)和原点之间的连线旋转 --> 238 | transform: rotate3d(1, 1, 1, 45deg); 239 | ``` 240 | ![](../img/T/transform-rotate3d.png) 241 | 242 | ##### translate3d() 3D偏移 243 | 244 | `translate3d(<translate-value>, <translate-value>, <length>)` 245 | 246 | `<translate-value> : <length> | <percentage>` 247 | 248 | 在3D平面进行偏移。也可以只偏移某一个方向： 249 | 250 | `translateX(<translate-value>)` 251 | `translateY(<translate-value>)` 252 | `translateZ(<length>)` 253 | 254 | ``` 255 | <!-- 20%的参照物为自身元素 --> 256 | transform: translate3d(10px, 20%, 50px); 257 | transform: translateX(10px); 258 | transform: translateY(20%); 259 | transform: translateZ(-100px); 260 | ``` 261 | ![](../img/T/transform-translate3d.png) 262 | 263 | ##### scale3d() 3D缩放 264 | 265 | `scale3d(<number>, <number>, <number>)` 266 | 267 | 对元素进行3D缩放。也可以单独设置元素在各个轴上的缩放倍数： 268 | 269 | `scaleX(<number>)` 270 | `scaleY(<number>)` 271 | `scaleZ(<number>)` 272 | 273 | ``` 274 | transform: scale3d(1.2, 1.2, 1); 275 | transform: scale3d(1, 1.2, 1); 276 | transform: scale3d(1.2, 1, 1); 277 | transform: scaleZ(5); 278 | <!-- Z 轴的缩放扩大并不影响盒子大小 --> 279 | ``` 280 | ![](../img/T/transform-scale3d.png) 281 | -------------------------------------------------------------------------------- /chapter1/README.md: -------------------------------------------------------------------------------- 1 | <!-- START doctoc generated TOC please keep comment here to allow auto update --> 2 | <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> 3 | **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* 4 | 5 | - [页面制作](#%E9%A1%B5%E9%9D%A2%E5%88%B6%E4%BD%9C) 6 | 7 | <!-- END doctoc generated TOC please keep comment here to allow auto update --> 8 | 9 | # 页面制作 10 | 11 | 页面制作指的是将视觉设计师设计好的视觉稿文件实现成具体的HTML页面。页面制作一般包括`PhotoShop切图`、`页面实现`两个过程。 12 | 13 | - `PhotoShop切图`指的是根据视觉稿文件将图片、按钮等资源保存成单独的文件，以供后面页面实现调用。 14 | - `页面实现`指的是用HTML+CSS等技术将视觉稿实现成HTML静态页面。 -------------------------------------------------------------------------------- /chapter2/01_javascript_intro.md: -------------------------------------------------------------------------------- 1 | <!-- START doctoc generated TOC please keep comment here to allow auto update --> 2 | <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> 3 | **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* 4 | 5 | - [JavaScript 介绍](#javascript-%E4%BB%8B%E7%BB%8D) 6 | 7 | <!-- END doctoc generated TOC please keep comment here to allow auto update --> 8 | 9 | ## JavaScript 介绍 10 | 11 | 前端开发三要素，`HTML`（描述网页内容），`CSS`（描述样式），`JavaScript`（控制网页行为）。JavaScript 为解释型编程语言，运行环境也很广泛。 12 | 13 | ![](../img/J/javascript-history.png) 14 | 15 | ![](../img/J/javascript-env.png) 16 | 17 | **JavaScript**的引入方法如下： 18 | 19 | ```javascript 20 | <!DOCTYPE html> 21 | <html> 22 | <head> 23 | <title> 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 36 | 37 | 38 | ``` -------------------------------------------------------------------------------- /chapter2/02_dev_tools.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* 4 | 5 | - [调试器](#%E8%B0%83%E8%AF%95%E5%99%A8) 6 | 7 | 8 | 9 | ## 调试器 10 | 11 | 调试工具都内置于主流浏览器中（Firefox 中需独立下载 Firebug）。更多关于 Google Chrome DevTools 的信息可以在[这里](https://developer.chrome.com/devtools)找到。 -------------------------------------------------------------------------------- /chapter2/03_basic_syntax.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* 4 | 5 | - [基本语法](#%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95) 6 | - [变量标示符](#%E5%8F%98%E9%87%8F%E6%A0%87%E7%A4%BA%E7%AC%A6) 7 | - [关键字与保留字](#%E5%85%B3%E9%94%AE%E5%AD%97%E4%B8%8E%E4%BF%9D%E7%95%99%E5%AD%97) 8 | - [字符敏感](#%E5%AD%97%E7%AC%A6%E6%95%8F%E6%84%9F) 9 | - [严格模式](#%E4%B8%A5%E6%A0%BC%E6%A8%A1%E5%BC%8F) 10 | - [注释](#%E6%B3%A8%E9%87%8A) 11 | 12 | 13 | 14 | ## 基本语法 15 | 16 | ### 变量标识符 17 | 18 | - 第一个字符必须是一个字母、下划线（_）或一个美元符号（$） 19 | - 其他字符可以是字母、下划线、美元符号或数字 20 | 21 | ```javascript 22 | var _name = null; 23 | var $name = null; 24 | var name0 = null; 25 | ``` 26 | 27 | ### 关键字与保留字 28 | 29 | JavaScript 在语言定义中保留的字段，这些字段在语言使用中存在特殊意义或功能，在程序编写的过程中不可以当做变量或函数名称使用。无需记忆，报错修改即可。 30 | 31 | ``` 32 | //ECMAScript的全部关键字 33 | break else new var 34 | case finally return void 35 | catch for switch while 36 | continue function this with 37 | default if throw 38 | delete in try 39 | do instanceof typeof 40 | //ECMA-262第3版定义的所有保留字 41 | abstract enum int short 42 | boolean export interface static 43 | byte extends long super 44 | char final native synchronized 45 | class float package throws 46 | const goto private transient 47 | debugger implements protected volatile 48 | double import public 49 | ``` 50 | 51 | ### 字符敏感 52 | 53 | 字符串的大小写是有所区分的，不同字符指代不同的变量。 54 | 55 | ### 严格模式 56 | 57 | **增益** 58 | 59 | - 消除语法中不合理与不安全的问题，保证代码正常运行 60 | - 提高编译效率，增加运行速度 61 | 62 | **使用方法** 63 | 64 | ```javascript 65 | 66 | "use strict"; 67 | (function(){ 68 | console.log('>>> Hello, world!'); 69 | })() 70 | 71 | 72 | (function(){ 73 | "use strict"; 74 | console.log('>>> Hello, world!'); 75 | })() 76 | ``` 77 | 78 | 严格模式与标准模式的区别： 79 | 80 | - 严格模式下隐式声明或定义变量被静止 81 | - 严格模式下对象重名的属性在严格模式下被静止 82 | - 严格模式下 `arguments.callee()` 被禁用 83 | - 严格模式下 `with()` 语句 84 | - 更多限制 85 | 86 | ### 注释 87 | 88 | ```javascript 89 | /* 90 | 多行注释，不可嵌套 91 | */ 92 | 93 | // 单行注释 94 | ``` 95 | 96 | ### JavaScript中的参数 97 | 98 | ECMAScript函数的参数与大多数其他语言中的函数参数有所不同，ECMAScript函数不介意床底多少个参数，也不在乎传进来的参数是什么数据类型。 99 | 100 | ``` 101 | //普通函数 102 | function sayHi(name, message){ 103 | alert("Hello " + name + message); 104 | } 105 | //用arguments获取参数 106 | function sayHi(){ 107 | alert("Hello " + arguments[0] + arguments[1]); 108 | } 109 | ``` 110 | 111 | 上面两个函数都是合法并且功能相同的。这个事实说明了ECMAScript函数的一个重要特点：命名的参数只是提供便利，但不是必须的。 112 | 113 | NOTE：ECMAScript中的所有参数传递都是值，不可能通过引用传递参数。 114 | 115 | 116 | 117 | 118 | -------------------------------------------------------------------------------- /chapter2/06_scope.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* 4 | 5 | - [变量作用域](#%E5%8F%98%E9%87%8F%E4%BD%9C%E7%94%A8%E5%9F%9F) 6 | - [作用域介绍](#%E4%BD%9C%E7%94%A8%E5%9F%9F%E4%BB%8B%E7%BB%8D) 7 | - [静态作用域](#%E9%9D%99%E6%80%81%E4%BD%9C%E7%94%A8%E5%9F%9F) 8 | - [动态作用域](#%E5%8A%A8%E6%80%81%E4%BD%9C%E7%94%A8%E5%9F%9F) 9 | - [JavaScript 变量作用域](#javascript-%E5%8F%98%E9%87%8F%E4%BD%9C%E7%94%A8%E5%9F%9F) 10 | - [词法环境](#%E8%AF%8D%E6%B3%95%E7%8E%AF%E5%A2%83) 11 | - [组成](#%E7%BB%84%E6%88%90) 12 | - [创建](#%E5%88%9B%E5%BB%BA) 13 | - [结构](#%E7%BB%93%E6%9E%84) 14 | - [关于词法环境的问题](#%E5%85%B3%E4%BA%8E%E8%AF%8D%E6%B3%95%E7%8E%AF%E5%A2%83%E7%9A%84%E9%97%AE%E9%A2%98) 15 | - [with 语句](#with-%E8%AF%AD%E5%8F%A5) 16 | - [try-catch 句法](#try-catch-%E5%8F%A5%E6%B3%95) 17 | - [带名称的函数表达式](#%E5%B8%A6%E5%90%8D%E7%A7%B0%E7%9A%84%E5%87%BD%E6%95%B0%E8%A1%A8%E8%BE%BE%E5%BC%8F) 18 | 19 | 20 | 21 | ## 变量作用域 22 | 23 | 变量的作用域值的是变量的生命周期和作用范围（全局与局部作用域的区别）。 24 | 25 | ### 作用域介绍 26 | 27 | #### 静态作用域 28 | 29 | 静态作用域有称为词法作用域，即指其在编译的阶段就可以决定变量的引用。**静态作用域**只更变量定义的位置有关与代码执行的顺序无关。 30 | 31 | ```javascript 32 | var x = 0; 33 | function foo() { 34 | alert(x); 35 | } 36 | 37 | function bar() { 38 | var x = 20; 39 | foo(); 40 | } 41 | 42 | foo(); 43 | ``` 44 | 45 | ![](../img/S/scope-lexical-scope.png) 46 | 47 | #### 动态作用域 48 | 49 | 动态作用域的变量引用只可在程序运行时刻决定（其通常通过动态栈来进行管理）。 50 | 51 | ```javascript 52 | var x = 10; 53 | function foo() { 54 | alert(x); 55 | } 56 | 57 | function bar() { 58 | var x = 20; 59 | foo(); 60 | } 61 | //Follow the Stack to search the x 62 | bar(); //The x to be alert is 20 63 | ``` 64 | 65 | ![](../img/S/scope-dynamic-scope.gif) 66 | 67 | ### JavaScript 变量作用域 68 | 69 | 1. 使用**静态作用域** 70 | 2. 其没有块级作用域（只有函数作用域，就是只有 function 用于可以定义作用域），if/for循环中的块是不会产生一个作用域的。 71 | 3. 在 ES5 之作使用`词法环境`来管理作用域。 72 | 73 | #### 词法环境 74 | 75 | ##### 组成 76 | 77 | 词法环境用来描述静态作用域的数据结构。它由`环节记录`和`外部词法环境的引用`组成。 78 | 79 | - 环境记录（record）（指形参，变量，函数等） 80 | - 外部词法环境的引用（outer） 81 | 82 | ##### 创建 83 | 84 | 在一段代码执行之前，先初始化词法环境。会被初始化的有： 85 | 86 | - 形参 87 | - 函数定义（创建函数对象，会保存当前作用域。见下图） 88 | - 变量定义（所有初始化值均为 `undefined`） 89 | 90 | ![](../img/S/scope-function-init.png) 91 | 92 | ##### 结构 93 | 94 | ```javascript 95 | var x = 10; 96 | function foo(y) { 97 | var z = 30; 98 | function bar(q) { 99 | return x + y + z + q; 100 | } 101 | return bar; 102 | } 103 | var bar = foo(20); 104 | bar(40); 105 | ``` 106 | 107 | **全局词法作用域（初始化状态）** 108 | 109 | ![](../img/S/scope-global-init.png) 110 | 111 | **函数词法作用域** 112 | 113 | ![](../img/S/scope-structure.jpg) 114 | 115 | #### 关于词法环境的问题 116 | 117 | **命名冲突** 118 | 119 | 形参，函数定义，变量名称命名冲突。其中的优先级的排序如下： 120 | 121 | ``` 122 | 函数定义 > 形参 > 变量 123 | ``` 124 | 125 | **`arguments` 的使用** 126 | 127 | `arguments`是函数中定义好的变量，我们通过`arguments`可以访问到函数传过来的形参。 128 | 129 | **函数表达式与函数定义的区别** 130 | 131 | - 函数表达式是在执行时才创建函数对象。 132 | - 函数定义为在代码执行之前就进行创建的。 133 | 134 | #### with 语句 135 | 136 | `with` 会创造一个临时作用域。 137 | 138 | ```javascript 139 | var foo = 'abc'; 140 | with({ 141 | foo: 'bar'; 142 | }) { 143 | /* 函数定义 */ 144 | function f() { 145 | alert(foo); 146 | }; 147 | /* 函数表达式（相当于匿名函数执行） */ 148 | (function() { 149 | alert(foo); 150 | })(); 151 | f(); 152 | } 153 | ``` 154 | ![](../img/J/javascript-with-example.png) 155 | 156 | #### try-catch 句法 157 | 158 | ``` 159 | try { 160 | var e = 10; 161 | throw new Error(); 162 | } catch (e) { 163 | function f() { 164 | alert(e); 165 | } 166 | (function() { 167 | alert(e); 168 | })(); 169 | f(); 170 | } 171 | ``` 172 | ![](../img/J/javascript-trycatch-example.png) 173 | 174 | #### 带名称的函数表达式 175 | 176 | 当一个函数表达式有了名称之后，JavaScript 会创建一个新的词法环境。并在这个词法环境中拥有一个属性 A 指向这个函数，同时这个属性 A 指向的函数是不可被修改的。 177 | 178 | **下面例子为不常规的写法** 179 | 180 | ``` 181 | (function A(){ 182 | A = 1; 183 | alert(A); 184 | })(); 185 | ``` 186 | 187 | ![](../img/S/scope-function-with-name.png) 188 | -------------------------------------------------------------------------------- /chapter2/08_statement.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* 4 | 5 | - [语句](#%E8%AF%AD%E5%8F%A5) 6 | - [条件控制语句](#%E6%9D%A1%E4%BB%B6%E6%8E%A7%E5%88%B6%E8%AF%AD%E5%8F%A5) 7 | - [循环控制语句](#%E5%BE%AA%E7%8E%AF%E6%8E%A7%E5%88%B6%E8%AF%AD%E5%8F%A5) 8 | - [遍历语句 for-in](#%E9%81%8D%E5%8E%86%E8%AF%AD%E5%8F%A5-for-in) 9 | - [异常处理语句](#%E5%BC%82%E5%B8%B8%E5%A4%84%E7%90%86%E8%AF%AD%E5%8F%A5) 10 | - [with 语句](#with-%E8%AF%AD%E5%8F%A5) 11 | 12 | 13 | 14 | ## 语句 15 | 16 | ### 条件控制语句 17 | 18 | 条件控制语句包括： 19 | 20 | - if 条件语句 21 | - switch 条件语句 22 | 23 | 其中expression可以使用整型，字符串，甚至表达式 24 | 25 | ```javascript 26 | if (expression) {statement} 27 | else if (expression) {statement1} 28 | else {statement2} 29 | 30 | // JavaScript 中的 case 可以使用整型，字符串，甚至表达式 31 | switch(persion.type) { 32 | case "teacher": 33 | statement1 34 | break; 35 | case "student": 36 | statement2 37 | break; 38 | default: 39 | statement3 40 | break; 41 | } 42 | ``` 43 | 44 | ### 循环控制语句 45 | 46 | 循环语句包括： 47 | 48 | - while 循环 49 | - do-while 循环 50 | - for 循环 51 | 52 | ```javascript 53 | while(expression) {statement} 54 | 55 | // 至少执行一次 56 | do {statement} while(expression); 57 | 58 | for (initialise; test_expresiion; increment) {statement} 59 | // 跳过下面代码并进入下一轮循环 60 | continue; 61 | // 退出当前循环 62 | break; 63 | ``` 64 | 65 | ### 遍历语句 for-in 66 | 67 | 用于遍历对象的**全部**属性。 68 | 69 | ```javascript 70 | function Car(id, type, color) { 71 | this.type = type; 72 | this.color = color; 73 | this.id = id; 74 | } 75 | 76 | var benz = new Car('benz', 'black', 'red'); 77 | Car.prototype.start = function(){ 78 | console.log(this.type + ' start'); 79 | } 80 | 81 | for (var key in benz) { 82 | console.log(key + ':' benz[key]); 83 | } 84 | 85 | // 输出结果 86 | type:black 87 | color:red 88 | id:benz 89 | start:function (){ 90 | console.log(this.type + ' start'); 91 | } 92 | 93 | // ----------- 94 | 95 | // 如不需原型对象上的属性可以使用 hasOwnProperty 96 | for (var key in benz) { 97 | if (benz.hasOwnProperty(key)) { 98 | console.log(key + ':' benz[key]); 99 | } 100 | } 101 | 102 | // 输出结果 103 | type:black 104 | color:red 105 | id:benz 106 | ``` 107 | 108 | 如不需原型对象上的属性可以使用 hasOwnProperty 109 | 110 | ```javascript 111 | for (var key in benz) { 112 | if (benz.hasOwnProperty(key)) { 113 | console.log(key + ':' benz[key]); 114 | } 115 | } 116 | /* 输出结果 117 | type:black 118 | color:red 119 | id:benz */ 120 | ``` 121 | 122 | ### 异常处理语句 123 | 124 | ```javascript 125 | try{ 126 | // statements 127 | throw new Error(); 128 | catch(e){ 129 | // statements 130 | } 131 | finally{ 132 | // statements 133 | } 134 | ``` 135 | 136 | ### with 语句 137 | 138 | `with` 语句是 JavaScript 中特有的语句形式，它主要有两个作用： 139 | 140 | 其一，其用于缩短特定情况下必须书写的代码量。它可以暂时改变变量的作用域。 141 | 142 | ```javascript 143 | // 使用 with 之前 144 | (function(){ 145 | var x = Math.cos(3 * Math.PI) + Math.sin(Math.LN10); 146 | var y = Math.tan(14 * Math.E); 147 | })(); 148 | 149 | // 使用 with 150 | (function(){ 151 | with(Math) { 152 | var x = cos(3 * PI) + sin(LN10); 153 | var y = tan(14 * E); 154 | } 155 | })(); 156 | ``` 157 | 158 | ![](../img/W/with-scope.png) 159 | 160 | 其二，改变变量的作用域，将`with`语句中的对象添加至作用域链的头部。 161 | 162 | ```javascript 163 | frame[1].document.forms[0].name.value = ""; 164 | frame[1].document.forms[0].address.value = ""; 165 | frame[1].document.forms[0].email.value = ""; 166 | 167 | with(frame[1].document.[0]) { 168 | name.value = ""; 169 | address.value = "" 170 | email.value = ""; 171 | } 172 | ``` 173 | 174 | **缺点**就是导致 JavaScript 语句的可执行性下降，所以通常情况下因尽可能的避免使用。 -------------------------------------------------------------------------------- /chapter2/09_closure.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* 4 | 5 | - [闭包](#%E9%97%AD%E5%8C%85) 6 | - [闭包的应用](#%E9%97%AD%E5%8C%85%E7%9A%84%E5%BA%94%E7%94%A8) 7 | - [保存变量现场](#%E4%BF%9D%E5%AD%98%E5%8F%98%E9%87%8F%E7%8E%B0%E5%9C%BA) 8 | - [封装](#%E5%B0%81%E8%A3%85) 9 | 10 | 11 | 12 | ## 闭包 13 | 14 | - 闭包有函数和与其相关的引用环境的组合而成 15 | - 闭包允许函数访问其引用环境中的变量（又称自由变量） 16 | - 广义上来说，所有 JavaScript 的函数都可以成为闭包，因为 JavaScript 函数在创建时保存了当前的词法环境。 17 | 18 | ``` 19 | function add() { 20 | var i = 0; 21 | return function() { 22 | alert(i++); 23 | } 24 | } 25 | var f = add(); 26 | f(); 27 | f(); 28 | ``` 29 | 30 | ### 闭包的应用 31 | 32 | #### 保存变量现场 33 | 34 | ```javascript 35 | 36 | // 错误方法 37 | var addHandlers = function(nodes) { 38 | for (var i = 0, len = nodes.length; i < len; i++) { 39 | nodes[i].onclick = function(){ 40 | alert(i); 41 | } 42 | } 43 | } 44 | 45 | // 正确方法 46 | var addHandlers = function(nodes) { 47 | var helper = function(i) { 48 | return function() { 49 | alert(i); 50 | } 51 | } 52 | 53 | var (var i = 0, len = nodes.length; i < len; i++) { 54 | nodes[i].onclick = helper(i); 55 | } 56 | } 57 | ``` 58 | 59 | #### 封装 60 | 61 | ```javascript 62 | // 将 observerList 封装在 observer 中 63 | var observer = (function(){ 64 | var observerList = []; 65 | return { 66 | add: function(obj) { 67 | observerList.push(obj); 68 | }, 69 | empty: function() { 70 | observerList = []; 71 | }, 72 | getCount: function() { 73 | return observerList.length; 74 | }, 75 | get: function() { 76 | return observerList; 77 | } 78 | }; 79 | })(); 80 | ``` -------------------------------------------------------------------------------- /chapter2/README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* 4 | 5 | - [JavaScript 程序设计](#javascript-%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1) 6 | 7 | 8 | 9 | # JavaScript 程序设计 10 | 11 | Javascript 程序设计以 ECMAScript 5.1为标准，从基本语法到原理深入,理解和编写Javascript程序。核心内容有语言简介、调试器、类型系统、内置对象、基本语法、变量作用域、闭包、面向对象编程等。 12 | -------------------------------------------------------------------------------- /chapter3/01_dom_tree.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* 4 | 5 | - [文档树](#%E6%96%87%E6%A1%A3%E6%A0%91) 6 | - [My header](#my-header) 7 | - [文档节点（DOM Note）](#%E6%96%87%E6%A1%A3%E8%8A%82%E7%82%B9%EF%BC%88dom-note%EF%BC%89) 8 | - [文档节点类型](#%E6%96%87%E6%A1%A3%E8%8A%82%E7%82%B9%E7%B1%BB%E5%9E%8B) 9 | 10 | 11 | 12 | ## 文档树 13 | 14 | Document Object Model (DOM) ，即文档**对象**模型，其用对象的方式表示对应的文档结构及内容。 15 | 16 | ```html 17 | 18 | 19 | 20 | My title 21 | 22 | 23 | My Link 24 |

My header

25 | 26 | 27 | ``` 28 | 29 | **DOM 树的核心内容** 30 | 31 | - DOM Core DOM核心结构，API的定义 32 | - DOM HTML 定义HTML如何转换成对象 33 | - DOM Style 定义如何把样式转换成对象 34 | - DOM Event 事件模型 35 | 36 | ![](../img/D/dom-tree.gif) 37 | 38 | 通过使用 DOM 提供的 API (Application Program Interface) 可以动态的修改节点（node），也就是对 DOM 树的直接操作。浏览器中通过使用 JavaScript 来实现对于 DOM 树的改动。 39 | 40 | ### 文档节点（DOM Note） 41 | 42 | #### 文档节点类型 43 | 44 | **常用节点类型** 45 | 46 | - ELEMENT_NODE 元素节点 47 | 48 | 可使用 `document.createElement('elementName');`创建 49 | 50 | - TEXT_NODE 元素节点 51 | 52 | 可使用 `document.createTextNode('Text Value');` 创建 53 | 54 | ```html 55 | var bodyNode = document.getElementsByTagName("body")[0]; //Get the node 56 | var pNode = document.createElement("p"); //create a new

node 57 | var txtNode = document.createTextNode("Here is the text content"); //create a new text node 58 | divNode.appendChild(txtNode); 59 | bodyNode.appendChild(divNode); 60 | //可以通过element.nodeType获取一个节点的节点类型 61 | //alert(bodyNode.nodeType); //1 Element 62 | //alert(pNode.nodeType); //1 Text 63 | //alert(txtNode.nodeType); //3 Text 64 | ``` 65 | 66 | **不常用节点类型** 67 | 68 | - COMMENT_NODE 69 | - DOCUMENT_TYPE_NODE 70 | 71 | **不同节点对应的NodeType类型** 72 | 73 | |节点编号|节点名称| 74 | |---|--| 75 | |1|Element| 76 | |2|Attribute| 77 | |3|Text| 78 | |4|CDATA Section| 79 | |5|Entity Reference| 80 | |6|Entity| 81 | |7|Processing Instrucion| 82 | |8|Comment| 83 | |9|Document| 84 | |10|Document Type| 85 | |11|Document Fragment| 86 | |12|Notation| 87 | 88 | NOTE：要清楚`节点`和`元素`的区别。我们平常说的`元素`其实指的是节点中的`元素节点`。所以说`节点`不仅包含`元素节点`，还包括`文本节点`、`实体节点`等。 89 | -------------------------------------------------------------------------------- /chapter3/03_attribute_manipulation.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* 4 | 5 | - [属性操作](#%E5%B1%9E%E6%80%A7%E6%93%8D%E4%BD%9C) 6 | - [HTML 属性与 DOM 属性的对应](#html-%E5%B1%9E%E6%80%A7%E4%B8%8E-dom-%E5%B1%9E%E6%80%A7%E7%9A%84%E5%AF%B9%E5%BA%94) 7 | - [属性操作方式](#%E5%B1%9E%E6%80%A7%E6%93%8D%E4%BD%9C%E6%96%B9%E5%BC%8F) 8 | - [通过属性访问器访问（Property Accessor）](#%E9%80%9A%E8%BF%87%E5%B1%9E%E6%80%A7%E8%AE%BF%E9%97%AE%E5%99%A8%E8%AE%BF%E9%97%AE%EF%BC%88property-accessor%EF%BC%89) 9 | - [通过 getAttribute/setAttribute 方法访问](#%E9%80%9A%E8%BF%87-getattributesetattribute-%E6%96%B9%E6%B3%95%E8%AE%BF%E9%97%AE) 10 | - [dataset 来存储数据](#dataset-%E6%9D%A5%E5%AD%98%E5%82%A8%E6%95%B0%E6%8D%AE) 11 | 12 | 13 | 14 | ## 属性操作 15 | 16 | ### HTML 属性与 DOM 属性的对应 17 | 18 | 每个 HTML 属性都会对应相应的 DOM 对象属性。如下面代码中，ulNode对象的id属性就对应了html代码中ul元素的id属性。 19 | 20 | ```html 21 | 22 | 23 | 24 | 25 | 26 | 27 |

    28 |
  • First
    • 29 |
  • Second
    • 30 |
  • Third
    • 31 |
  • Fourth
    • 32 |
33 |

Hello

34 | 41 | 42 | 43 | ``` 44 | 45 | ### 属性操作方式 46 | 47 | #### 通过属性访问器访问（Property Accessor） 48 | 49 | 通过属性访问器得到的属性为转换过的实例对象（并非全字符串）。 50 | 51 | **读取属性** 52 | 53 | ```html 54 | 55 | 56 | 57 | 58 | 59 | 60 | 65 | 73 | 74 | 75 | ``` 76 | 77 | **写入属性** 78 | 79 | 可增加新的属性或改写已有属性。 80 | 81 | ```html 82 | 83 | 84 | 85 | 86 | 87 | 88 | 93 | 104 | 105 | 106 | ``` 107 | 108 | NOTE：为元素增加新的属性时，如果该属性不存在，那么设置是无效的。另外，通过`[]`来访问和通过`.`来访问设置属性是相同的，下面代码的效果是等值的： 109 | 110 | ```html 111 | var value1 = optionNodes[0].className; 112 | var value2 = optionNodes[0]["className"]; 113 | optionNodes[0].className = "Basketball"; 114 | optionNodes[0]["className"] = "Basketball"; 115 | ``` 116 | 117 | **特点** 118 | 119 | - X 通用行差（命名异常，使用不同的命名方式进行访问） 120 | - X 扩展性差 121 | - √ 实用对象（取出后可直接使用） 122 | 123 | 124 | #### 通过 getAttribute/setAttribute 方法访问 125 | 126 | **读取属性** 127 | 128 | 获取到的均为属性的**字符串** 129 | 130 | ```html 131 | 132 | 133 | 134 | 135 | 136 | 137 | 142 | 150 | 151 | 152 | ``` 153 | 154 | **写入属性** 155 | 156 | 可增加新的属性或改写已有属性 157 | 158 | ```html 159 | 160 | 161 | 162 | 163 | 164 | 165 | 170 | 181 | 182 | 183 | ``` 184 | 185 | **特点** 186 | 187 | - X 仅可获取字符串（使用时需转换） 188 | - √ 通用性强 189 | 190 | ### dataset 来存储数据 191 | 192 | 自定义属性，其为 `HTMLElement` 上的属性也是 `data-*` 的属性集。主要用于在元素上保存数据。获取的均为**属性字符串**。数据通常使用 AJAX 获取并存储在节点之上。 193 | 194 | ```html 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 |
204 | 211 | 212 | 213 | ``` 214 | 215 | NOTE：`dataset` 在低版本 IE 不可使用，但可通过 `getAttribute` 与 `setAttribute` 来做兼容。 -------------------------------------------------------------------------------- /chapter3/06_animation.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* 4 | 5 | - [JavaScript 动画](#javascript-%E5%8A%A8%E7%94%BB) 6 | - [JavaScript 动画三要素](#javascript-%E5%8A%A8%E7%94%BB%E4%B8%89%E8%A6%81%E7%B4%A0) 7 | - [定时器](#%E5%AE%9A%E6%97%B6%E5%99%A8) 8 | - [setInterval](#setinterval) 9 | - [setTimeout](#settimeout) 10 | - [requestAnimationFrame](#requestanimationframe) 11 | - [JavaScript 动画DEMO](#javascript-%E5%8A%A8%E7%94%BBdemo) 12 | 13 | 14 | 15 | ## JavaScript 动画 16 | 17 | **帧**，为动画的最小单位，一个静态的图像。**帧频**，每秒播放的帧的数量。一个动画是由很多帧组成的，因为人眼的暂留特性，当图片交替的速度大于每秒 30 帧就会有动画的感觉。 18 | 19 | **实现方式** 20 | 21 | - gif 图像形式存储，容量大，需第三方制图工具制作。 22 | - flash 需要第三方制作工具，不推荐。 23 | - CSS3 实现动画具有局限性 24 | - JavaScript 可实现大部分上面几类可实现的动画效果 25 | 26 | ### JavaScript 动画三要素 27 | 28 | ![](../img/J/javascript-animation.jpg) 29 | 30 | #### 定时器 31 | 32 | ##### setInterval 33 | 34 | ```javascript 35 | var intervalId = setInterval(func, delay[, param1, param2, ...]); 36 | //clearInterval(intervalId); //清除定时器 37 | ``` 38 | 39 | - `func` 执行改变属性操作函数 40 | - `delay` 触发的时间间隔（毫秒为单位） 41 | - `param1, param2, ...` 为执行时可传入改变属性函数的参数，可选。 42 | 43 | NOTE：使用 `setInterval` 可以调用一次定时器既可实现连贯的动画，但最后需要使用 `clearInterval` 即可清除动画效果。 44 | 45 | ##### setTimeout 46 | 47 | ```javascript 48 | var timeoutId = setTimeout(func[, delay, param1, param2, ...]); 49 | //clearTimeout(timeoutId); //清除定时器 50 | ``` 51 | 52 | - `func` 为执行改变属性的操作 53 | - `delay` 为出发时间间隔（毫秒为单位）默认为 0，可选。 54 | - `para1` 为执行时可传入改变属性函数的参数，可选。 55 | 56 | NOTE：使用 `setTimeout` 实现动画，则需要在动画每一帧结束时再次调用定时器，但它无需清除定时器。 57 | 58 | **区别** 59 | 60 | - `setTimeout` 在延时后只执行一次，`setInterval` 则会每隔一个延时期间后会再执行。 61 | 62 | ##### requestAnimationFrame 63 | 64 | 类似于 `setTimeout` 但是无需设定时间间隔。此定时器为 HTML5 中的新标准，其间隔时间不由用户控制，而是由显示器的刷新频率决定。（市面上的显示器刷新频率为每秒刷新60次） 65 | 66 | ```javascript 67 | var requestId = requestAnimationFrame(func); 68 | cancelAnimationFrame(requestId); 69 | ``` 70 | 71 | NOTE：使用它来实现动画与 `setTimeout` 类似，需要每次每帧结束时再次调用，但它无需清除定时器。不可设置时间间隔（系统决定），时间间隔为16.67毫秒一帧。 72 | 73 | **优势** 74 | 75 | - 无需设置间隔时间 76 | - 动画流畅度高 77 | 78 | ### JavaScript 动画DEMO 79 | 80 | **常见动画** 81 | 82 | 大多的复杂动画都是有下列的简单动画所组成的。 83 | 84 | - 形变，改变元素的宽高 85 | - 位移，改变元素相对位置 86 | - 旋转 87 | - 透明度 88 | - 其他... 89 | 90 | 下面的例子为以 px 为单位的动画代码 91 | 92 | ```javascript 93 | var animation = function(ele, attr, from, to) { 94 | var distance = Math.abs(to - from); 95 | var stepLength = distance/100; 96 | var sign = (to - from)/distance; 97 | var offset = 0; 98 | var step = function(){ 99 | var tmpOffset = offset + stepLength; 100 | if (tmpOffset < distance) { 101 | ele.style[attr] = from + tmpOffset * sign + 'px'; 102 | offset = tmpOffset; 103 | } else { 104 | ele.style[attr] = to + 'px'; 105 | clearInterval(intervalID); 106 | } 107 | } 108 | ele.style[attr] = from + 'px'; 109 | var intervalID = setInterval(step, 10); 110 | } 111 | ``` 112 | 113 | -------------------------------------------------------------------------------- /chapter3/07_canvas.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* 4 | 5 | - [Canvas](#canvas) 6 | - [渲染上下文对象](#%E6%B8%B2%E6%9F%93%E4%B8%8A%E4%B8%8B%E6%96%87%E5%AF%B9%E8%B1%A1) 7 | - [绘图步骤](#%E7%BB%98%E5%9B%BE%E6%AD%A5%E9%AA%A4) 8 | 9 | 10 | 11 | ## Canvas 12 | 13 | **Mozilla** 官方 `` 教程在[这里](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial)。 14 | 15 | 画布 `` 的默认宽高为 300 与 150 ，但是同样可以使用 CSS 设定宽高。但因为 CSS 与 JavaScript 在渲染工程中有速度的差异，所以**不建议使用** CSS 对 `` 的宽高做设定。 16 | 17 | ```html 18 | 19 | 20 | ``` 21 | 22 | ### 渲染上下文对象 23 | 24 | 下面的 `ctx` 即为渲染上下文对象。`globalCompositeOperation` 为对于 `canvas` 绘画时的渲染属性设置，具体表现如下图所示。 25 | 26 | ```Javascript 27 | var canvas = document.getElementById('canvasId'); 28 | var ctx = canvas.getContext('2d'); 29 | 30 | 31 | // 绘画 canvas 的属性 32 | ctx.globalCompositeOperation = 'destination-over'; 33 | ``` 34 | 35 | ![](../img/C/canvas-global-composite.png) 36 | 37 | ### 绘图步骤 38 | 39 | ![](../img/C/canvas-drawing-steps.png) 40 | 41 | 一个周期就是完整的一帧的绘画过程。 42 | 43 | ![](../img/C/canvas-animation.gif) 44 | 45 | ```javascript 46 | var sun = new Image(); 47 | var moon = new Image(); 48 | var earth = new Image(); 49 | 50 | function init() { 51 | sun.src = 'Canvas_sun.png'; 52 | moon.src = 'Canvas_moon.png'; 53 | earth.src = 'Canvas_earth.png'; 54 | window.requestAnimationFrame(draw); 55 | } 56 | 57 | function draw(){ 58 | var ctx = document.getElementById('canvas').getContext('2d'); 59 | 60 | ctx.globalCompositeOperation = 'destination-over'; 61 | // 1. 清空画布内容 62 | ctx.clearRect(0, 0, 300, 300); 63 | 64 | ctx.fillStyle = 'rgba(0, 0, 0, 0.4)'; 65 | ctx.strokeStyle = 'rgba(0, 153, 255, 0.4)'; 66 | ctx.save(); // 保存画布状态 67 | ctx.translate(150, 150); 68 | 69 | // 2. 开始绘制图形 70 | // 地球 71 | var time = new Date(); 72 | ctx.rotate(((2*Math.PI)/60)* time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds()); 73 | ctx.translate(105, 0); 74 | // 阴影 75 | ctx.fillRect(0, -12, 50, 24); 76 | ctx.drawImage(earth, -12, -12); 77 | // 月亮 78 | ctx.rotate(((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds()); 79 | ctx.translate(0, 28.5); 80 | ctx.drawInmage(moon, -3.5, -3.5); 81 | 82 | ctx.restore(); //恢复画布状态 83 | 84 | // 3. 绘制轨道 85 | ctx.beginPath(); 86 | ctx.arc(150, 150, 105, 0, Math.PI*2, false); 87 | 88 | ctx.stroke(); 89 | 90 | // 4.绘制太阳背景 91 | ctx.drawImage(sun, 0, 0, 300, 300); 92 | 93 | window.requestAnimationFrame(draw); 94 | } 95 | 96 | init(); 97 | ``` -------------------------------------------------------------------------------- /chapter3/08_multimedia.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* 4 | 5 | - [多媒体](#%E5%A4%9A%E5%AA%92%E4%BD%93) 6 | - [基本用法](#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95) 7 | - [控制多媒体](#%E6%8E%A7%E5%88%B6%E5%A4%9A%E5%AA%92%E4%BD%93) 8 | - [多媒体事件](#%E5%A4%9A%E5%AA%92%E4%BD%93%E4%BA%8B%E4%BB%B6) 9 | - [多媒体支持类型](#%E5%A4%9A%E5%AA%92%E4%BD%93%E6%94%AF%E6%8C%81%E7%B1%BB%E5%9E%8B) 10 | - [多媒体格式兼容](#%E5%A4%9A%E5%AA%92%E4%BD%93%E6%A0%BC%E5%BC%8F%E5%85%BC%E5%AE%B9) 11 | - [Web Audio API](#web-audio-api) 12 | 13 | 14 | 15 | ## 多媒体 16 | 17 | 在 HTML5 出现之前，页面中插入多媒体需要借助第三方插件，例如 Flash，但是 HTML5 将网页中的多媒体带入了新的一章。 18 | 19 | ![](../img/M/mutimedia.jpg) 20 | 21 | ### 基本用法 22 | 23 | 因为audio标签和video标签的用法完全一样，因此下面将以audio标签为例说明。 24 | 25 | ```html 26 | 27 | 30 | ``` 31 | 32 | 此外，我们还可以在audio标签里用``来替代audio中的src属性来指定播放源。你还可以指定多个``从而提供多个数据源，浏览器会选择一个最佳的数据源播放。 33 | 34 | ```html 35 | 36 | 41 | ``` 42 | 43 | 在上面的例子中，audio标签中还指定了autoplay属性，它表示为这个多媒体元素创建一个控制条。此除了可以设置controls之外，我们还可以设置如下属性： 44 | 45 | |属性|是否必须|默认值|备注| 46 | |----|--------|------|----| 47 | |src|是||音频文件地址 URL| 48 | |controls|否|false|显示控件| 49 | |autoplay|否|false|音频就绪后自动播放| 50 | |preload|否|none|可取值为 none、metadata、auto。音频在页面加载是进行加载，并预备播放。如果使用 autoplay 则忽略该属性（该属性失效）| 51 | |loop|否|false|是否循环播放| 52 | 53 | NOTE：none表示不预加载，metadata表示只预加载媒体的元信息，auto表示加载媒体的全部内容。 54 | 55 | **向下兼容的HTML多媒体代码** 56 | 57 | HTML5之前是不支持audio和video标签的，因此为了使代码更加兼容，我们可以在audio和video标签中插入object元素，当HTML5不被支持时，浏览器将会解析object标签中的内容。 58 | 59 | ```html 60 | 61 | 71 | 72 | 73 | 83 | ``` 84 | 85 | ### 控制多媒体 86 | 87 | **方法** 88 | 89 | - `load()` 加载资源 90 | - `play()` 播放 91 | - `pause()` 暂停播放 92 | 93 | **属性** 94 | 95 | - `playbackRate` 1为正常速度播放，大于1为快速播放最高20。 96 | - `currentTime` 调准播放时间，以秒为单位。 97 | - `volume` 取值范围0到1 98 | - `muted` 静音，取值为boolean类型 99 | 100 | **只读属性** 101 | 102 | - `paused` 布尔值，暂停 103 | - `seeking` 布尔值，跳转 104 | - `ended` 布尔值，播放完成 105 | - `duration` 媒体时长，数值 106 | - `initialTime` 媒体开始播放时间，数值 107 | 108 | 下面的例子中，我们播放一个Jack.mp3的文件，并将其播放速率调至1.5倍，从第60秒的时候开始播放。 109 | 110 | ```html 111 | 112 | 113 | 114 | 115 | Jack's Music 116 | 117 | 118 | 122 | 128 | 129 | 130 | ``` 131 | 132 | ### 多媒体事件 133 | 134 | - `loadstart` 开始请求媒体内容 135 | - `loadmetadata` 媒体元数据以加载完成（时长，编码格式等） 136 | - `canplay` 加载一些内容但可播放 137 | - `play` 调用`play()`或设置 `autoplay` 138 | - `waiting` 缓冲数据不够，暂停播放 139 | - `playing` 正在进行播放 140 | 141 | 下面的例子在对`