十五、Canvas 详细版

(一)概述

  • Canvas 是 HTML5 的一个新标签,相当于一个画布,可以用来绘制丰富的图形,最终渲染在浏览器上
  • Canvas 标签本身不具备绘制图形的能力,配合 JavaScript 提供的 CanvasAPI,才能绘制图形,文本和图像,以及实现动画和交互
  • 支持 2d 绘图,也支持 3d 绘图(WebGL)

1.Canvas绘制的图形是位图

  • 放缩会导致图像失真,所以需要注意放缩比例的控制
  • 可以操作每一个点位的像素,进而实现高度自定义的图形绘制和动画效果
  • 相当于 <img> 引入的图片,可以右键另存

郁子大约 35 分钟笔记渡一教育语言基础董明晨HTML5
十三、第三方库

(一)第三方库概览

1.官网下载使用

名称 文档 一句话介绍
jQuery 官网:https://jquery.com/
中文网:https://jquery.cuishifeng.cn/
让操作 DOM 变得更容易
Lodash 官网:https://lodash.com/docs
中文网:https://www.lodashjs.com/
你能想到的工具函数它都帮你写了
Animate.css 官网:https://animate.style/ 常见的 CSS 动画效果都帮你写好了
Axios 官网:https://axios-http.com/zh/ 让网络请求变得更简单
MockJS 官网:http://mockjs.com/ ajax 拦截和模拟数据生成
Moment 官网:https://momentjs.com/
中文网:http://momentjs.cn/
让日期处理更容易
ECharts 官网:https://echarts.apache.org/zh 搞定所有你能想到的图表
animejs 官网:https://animejs.com/ 简单好用的 JS 动画库
editormd 官网:https://pandao.github.io/editor.md markdown 编辑器
validate 官网:http://validatejs.org/ 简单好用的 JS 对象验证库
date-fns 官网:https://date-fns.org/ 功能和 Moment 几乎相同
支持 tree shaking
zepto 官网:https://zeptojs.com/ 功能和 jQuery 几乎相同
对移动端支持更好
包体积更小
nprogress 官网:https://github.com/rstacruz/nprogress 简单好用的进度条插件
YouTube 就使用的是它
qs 官网:https://github.com/ljharb/qs 一个用于解析 url 的小工具

郁子大约 10 分钟笔记渡一教育语言基础袁进
十二、Git

(一)Git 常用命令

1.创建 SSH Key

$ ssh-keygen -t rsa -C "youremail@example.com"

郁子大约 6 分钟笔记渡一教育语言基础丁永志Git
十一、网络

对于前端而言,网络部分代码不多,以概念为主


对概念的理解程度,决定了是否能够看懂接口文档,同时也决定了是否能更好的掌控网络相关代码

(一)客户端和服务器

1.通信

  • 在网络的世界里,两个应用程序之间会经常发生通信
  • 在大部分情况下,通信总是由一方发出一个消息开始,而另一方回复一个消息结束
  • 发出消息的一方称之为 客户端 Client ,发出消息的过程称之为 请求 Request
  • 回复消息的一方称之为 服务器 Server,回复消息的过程称之为 响应 Response
  • 一次完整的交互,总是从请求开始,响应结束

郁子大约 21 分钟笔记渡一教育语言基础袁进HTTPAJAX
十、程序思维训练

(一)歌词滚动

1.页面功能组成

  • 页面初始化
  • 交互事件
    • 监听什么事件
    • 如何处理

(二)王者荣耀官网英雄查询

1.英雄对象属性

1)pay_type

  • 该值为 10 时,表示本周免费
  • 该值为 11 时,表示新手推荐

2)hero_type, hero_type2


郁子小于 1 分钟笔记渡一教育语言基础袁进JavaScriptES6+
七、JS项目实战

(一)文字滚动效果

1.编写 JS 前需考虑

  • 初始化:一开始要做什么
  • 交互:用户操作之后要做什么

(二)手风琴效果

规范

DRY:don't repeat yourself

能封装成模块的功能函数尽量抽离出来

1.JS 动画函数

  • 动画的本质:从一个值变化到另一个值

郁子大约 21 分钟笔记渡一教育语言基础袁进韩刚丁永志谢杰JavaScript
六、JS收官

(一)环境搭建

1.安装 node

中文官网

2.测试安装

  • 命令终端中输入
node -v

郁子大约 51 分钟笔记渡一教育语言基础袁进JavaScript
三、Web前端开发JavaScript高薪课堂

(一)JavaScript 入门

1.Web 发展史

  • Mosaic,是互联网历史上第一个获普遍使用和能够显示图片的 网页浏览器 ,于 1993 年问世

2.浏览器组成

  • shell 部分
  • 内核部分
    • 渲染引擎(语法规则和渲染)
    • JS 引擎
    • 其他模块

3.翻译过程

1)编译

  • 通篇翻译
  • 将格式 1 的文件翻译成格式 2 的文件,由系统程序执行格式 2 文件
  • 该类型的编程语言叫编译性语言
  • 优点:过程快
  • 缺点:翻译后的格式 2 文件移植性不好(不能跨平台)
  • 如:
    • C 语言: .c => .obj
    • C++

郁子大约 62 分钟笔记渡一教育语言基础姬成JavaScript
十四、HTML5 详细版

(一)input 的新增 type

  • 基本都有兼容性问题,不建议使用

1.placeholder

<input type="text" placeholder="手机/邮箱/用户名" />

郁子大约 15 分钟笔记渡一教育语言基础PandaHTML5
2