# A.章节列表
## 课程介绍与导读
> 介绍课程会用到的平台/ 工具，课程地图和目标，如何撰写自己的技术记录
* 课程介绍与导读 - 动态网页的过去与未来
* 课程介绍与导读 - 课程roadmap与学习方式
* 课程介绍 - 使用markdown与记录学习笔记
> mac 可以使用内置快捷键
command + shift + 3全屏截图，储存至本地
command + shift + 4局部截图，储存至本地
shift + command + shift + 4局部截图，储存至本地
### html css 快速入门
> 掌握基础静态网页布局，细调css的方式，介绍jade/sass，以小范例复习，加入flexbox
* html/css 快速入门 - codepen平台介绍与基础设定
* 重点：
* [emmet 语法列表](https://docs.emmet.io/cheat-sheet/)
* [sublime 快捷键](https://www.camdemy.com/media/6211)
* html/css 快速入门 - 结构与元素
范例：https://codepen.io/chenxingwang93/pen/KJjYZM
* 标签`<h1></h1>`作为标题
* 标签 `<p1></p1>` 作为段落
* `<hr>`作为水平分隔线
* `<img></img>`影像 / `<a></a>` 链接
* `<b></b>`加粗； `<ol>`(ordered list); `<ul>`(unordered list);
* 其他补充: [w3school html_basic](https://www.w3schools.com/html/html_css.asp)
* html/css 快速入门 - css 调整外观与class/id概念
范例:
HTML
* `<div class="classname"></div>`
CSS
* {} 选中所有元素
* .classname{}
* `display: inline-block;`内容均在同一行排版；
* `ul空格li: 空格为选取清单中每一个li`
* css的内外距
* codepen中`fork`复制原📃；
* css:`padding`设定内距；
* css:`html,body`选取网页中的body部分；`{width:100%; height: 100%;}` 撑满；
* css:`display: flex;`排列方式提供置中，置左，置右选项；
* `justify-content: left/center/right；`
* `align-items: top/center/bottom；`
* css:`padding`内部元素与边框间距；
> html中 heading paragraph中的`span`维持同一行；
* css的定位与排列
> 命名為相同以便於選擇後賦予統一屬性
* css中针对两个class赋予相同属性：`.classname`,`.classname`
* `.classname`后点击tab展开，选择class名为`.classname`的div tag
* css 中`float: left`(靠左排列)
* `overflow: hidden`(在浮动元素排列时将外部容器的高度与内部容器高度统一)
> position 排列方式
* css中`.position`的四种排列方式: relative, static, absolute 与fixed.
* `.position: static`位于排版系统内，只能更改内外距(margin, padding)
* `.position: relative`位于排版系统内，相对定位，可相对于系统偏移
* `.position: absolute`位于排版系统外，绝对定位, 可针对某一容器位移，会根据容器层级寻找定位方式非static(即relative)的容器进行定位
* `.position: fixed` 位于排版系统外，相对于视窗的绝对定位
>Emmet 語法快速輸入
* `.classname>heading+.block>.block*3` (后tab展开: classname的class 下有名为heading的heading，内有一含有三个block的名为block的block.)
* css的定位与排列实作
>
* <a class ="classname" href="http:">href open with new tab: </a> `target="_blank"`
* css中初始化颜色(initiate color in css)：`a{color: initial; text-decoration: initial;}`
* 图像高度设定(imageheight setup): `height: certainpx;`
* padding in css：padding：`topvalue px` `bottomvalue px` `leftvalue px` `rightvalue px；`
* 清单样式设定(list-style)`list-style: none;`
* css `box-sizing: border-box；`
* padding 上下宽度：`padding-top: value px；`
* `padding-bottom：value px；`
* `box-shadow : leftoffsetnum px rightoffsetnum px opacity px rgba(value, value, value, value)`
* 元素移动：`transform: translate(value px, value px);` `transition: value s`
* flexbox 排版
* proportion：`flex: value;`
* fix width 指定特定像素宽度：`flex: value px; flex-shrink: 0; flex-grow: 0;`
* >符号指定下一层级的div才会被styling影响：`.divname>2nd divname{}`
### Java Script 程式基础
> 判断 计算 抽象化
> js 在网页里能做什么？
* 改变：动态更新网页中的元素/样式
* 计算与判断：提供验证/资料处理等功能
* 资料串接：动态载入或更新网页
* 制作动画：以时间为单位动态改变
* event: 以行为触发特定动作或处理
> 重点概念与内容
* 变数与判断
* 物件与阵列
* 阵列操作与回圈
* 字串处理
* 函数模组化应用
* 操作DOM物件
* 事件触发Events
* n简化事件
* 阵列批次操作
* 时间函数
* 物件导向基础(外包抽象物件有效管理程序码)
* 外部资料AJAX(动态载入外部资料)
#### js 变数与判断
> 变数是一个柜子，可以存储需要用到的资料；
借由计算判断构成网页逻辑；
> js 目标并非记录「破坏性压缩」的结果；而是🟨🟦🟥三个动态变数计算的结果；**即变数设定，计算及更动元件**
> 
> 涉及js部分的网页执行流程
> 
> 
>
>
parselnt("value")将字符串value转化为数字从而进行运算>
> 为什么使用变数？
* 重复：避免重复计算
* 逻辑：抽象化独立每一层结果
* 记录：储存使用到的中间状态
#### js objects &array
>指定books阵列，依序指定元素到单元格中，元素用逗点隔开
>books.length//提取阵列长度3
>books.push("新书")//将“新书”元素添加到序列尾端
book.pop //将元素从序列尾端提取
book.unshift // Add an item to the beginning of an Array
>books.slice(start, end)
number = [1,2,3,4,5]
number.slice(0,2) //[1,2]
number.slice(-3,-2) //从右算起第三个到从右算起第二个[3]
number.slice(3) //若不指定结束值则一路到序列最后两个元素[4,5]
books.reverse() //得到资料序列前后翻转后的新序列
>
>var books = books1.
>contact(books2) //合并两笔阵列
var shop = {}
shop["name"]="" //等同于shop.name=""
shop["phone"]="" //等同于shop.phone=""
shop["address"]="" //等同于shop.address=""
>
>
>阵列中有物件
>物件中有阵列
>
#### js looping
>
>
while looping
>
for looping
>
>
#### js string 字串处理
资料转换
验证格式
拮取
搜寻
组合
> 常用字串操作命令
* indexOf 寻找位置
* slice/substr 切割字串
* replace 取代字串
* toUpperCase 转大写
* toLowerCase 转小写
* 分割成阵列
* join 结合阵列为字串
>字串连接
>"hell"+"world"="helloworld"
>
>寻找字串
>"APPLE&BERRY&LEMON".indexOf("BERRY")=6
>//起始字串位置
>"APPLE&BERRY&LEMON".indexOf("BANANA")=-1
>//所寻找的物件不在字串中则显示-1
>
>分割文字
>
>"helloworld".substr(2,3)="llo"
>
>replace 取代文字
>
>
>split(分割用字)//split("/")=[","];找到字符/然后用(",")字符取代("/")作为分割方式。
>
>
#### 函数模组化应用
>
>
>
>
>
>
>
>
>
>
>
>
>
>
#### 函数 模组化应用
#### 时间函数-从静态到动态
#### Jquery 操作元素
$("selector").show(秒数,callback)
* 网页元素操作
* CSS
* Event 加上事件
* 动画 animation
* AJAX载入资料
$("选择条件").动作(参数)
* 根据特定的条件选择元素e.g. Tag/id/class/query
* Jquery stream->以Jquery为条件类似于抓取css的内容
>$(document).ready(初始化)
>document在文件准备好之后呼叫"初始化"函数
>Jquery selector
* tag
>h2/p.../ul(空格)li: 选取ul中的li./div>a 选取只属于div的a链接.
* id
>#titleText//通常出现在抓取表单和输入框的情境中，用#+titleText代表要抓取的id元素
* class
>.title.white.small/ .title .white.small //.title(空格).white.small中的(空格)代表里面的。
*
> *米字号代表选择全部元素 ul.balls*代表: ul.ball中的全部元素都会被选取
* first-child/last-child
>ul(空格)li:first-child:选取ul里面的li的first-child
* nth
> ul(空格)li:nth-child(3)代表: 选择第(3)个li
> .ball:nth-child(5n+1)代表:周期性选择每5个中的第一个
* attr
> a[href*='http']代表:a链接中href链接中的http
* even/odd
> table tr:even
#### Jquery 事件触发
$("selector").event(function(evt){
...
})
选择器接收到event就触发function函数
JS function callback 监看动作触发函数
在document中常发生的事件
load载入/unload离开/scroll滚动/resize改变大小
* mouse Event
>$("selector").click(function(evt){
})
evt->事件参数
evt.pageX / evt.pageY
evt.offsetX / evt.offsetY
类似的事件e.g. mousemove/ mouseenter/ mouseleave
#### Jquery 动画原理与应用
* 状态变化动画
* $("选择条件").动作(参数)
* hide/show display:none->block 显示/消失
* fadeIn/fadeOut Opacity:0->1 渐近渐出
* slideDown/slideUp height:0 ->300px 下滑展开
* JS 与CSS动画比较
* JS: 较容易进行数学计算；动态修改动画；处理事件触发；容易套用速度曲线
* CSS: 效能极快，适合补间动画；管理容易(class); keyframes无法管理class
*
Animate: $("selector").animate(属性，设定，速度曲线)
* $("selector").animate({
opacity: 0.5,
left:"300px",
width:"500px"
},'slow')
* 可使用+=/-=参考初始状态计算相对位置
*
* $(".rect").animate({"left":"+=50px"})
$(".rect").animate({"left":"-=50px"})
* 2-设定
* $("selctor").animate({
opacity:0.5
},{
duration: 500,
complete: function(){...},
start: function(){...}
},'slow')
#### 12 Array 阵列的批次操作
* 阵列批次操作的方法
Array.forEach(function)
Array.map(function)
Array.filter(function)
Array.find(function)
Array.some(function)
Array.every(function)
Array.sort(function)
Array.reduce(function, initiate value)
* Array.forEach(function)
将阵列一个一个取出带入函数中执行
* Array.map(function)
将阵列元素逐一取出，将执行结果存储成另一个阵列；映射
* Array.filter(function)
根据函数回传值进行逻辑判断，决定是否将函数复制进新的阵列中
* Array.find(function)
根据函数回传值找出符合条件的第一个元素（非阵列！）
* array.some(function)
其中有一些元素符合条件则回传boolean运算结果
* array.sort(function)
* array.reduce(function)
#### canvas与特效动画
* 重复绘制的图形和动作，不易计算的角度，互相有联系的图形
* 画布坐标系的translate, rotate, scale
* 画布坐标系translate, rotate, scale
* 画布坐标系translate, rotate, scale
#### 物理基础（速度/加速度）
* 程序结构的规划（初始化变数；定时更新逻辑；画面更新）
#### 向量的概念 vectors
* 
* 
* 
* 
* 
* 
* 
* 
* 
* 
#### ES6 and template
* 
* 
* 
* 
#### 物件导向结构
* 
产生，根据规则更新，移动
* 
当下时刻的换算
累积连续性变化
* 
* 
* 
array.splice(id,1)
* 
* 
* 
.png)
层叠与继承控制哪些样式会作用于哪些网页元素
1. 组成层叠的4个部分
2. 层叠与继承的区别
3. 如何控制样式和元素的对应关系
CSS中的C（代表cascade，层叠）
```
/*标签或者类型的选择器*/
h1{
font-family:serif；
}
/*#page-title代表ID选择器*/
#page-title{
font-family：sans-serif；
}
.title{
}
```
Sign in with Wallet
Connect another wallet