---
# System prepended metadata

title: A.章节列表

---

# A.章节列表

## 课程介绍与导读

> 介绍课程会用到的平台/ 工具，课程地图和目标，如何撰写自己的技术记录

* 课程介绍与导读 - 动态网页的过去与未来
* 课程介绍与导读 - 课程roadmap与学习方式

![](https://i.imgur.com/qPvHs2o.jpg)

* 课程介绍 - 使用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 变数与判断
> 变数是一个柜子，可以存储需要用到的资料；
借由计算判断构成网页逻辑；
![](https://i.imgur.com/xdGasOu.png)

> js 目标并非记录「破坏性压缩」的结果；而是🟨🟦🟥三个动态变数计算的结果；**即变数设定，计算及更动元件**
> ![](https://i.imgur.com/GJKmMUm.png)

> 涉及js部分的网页执行流程
![](https://i.imgur.com/mW0I4Qx.png)

> ![](https://i.imgur.com/jrhuWLy.png)

> ![](https://i.imgur.com/DGkbavg.png)

>![](https://i.imgur.com/Hosyz8y.png)

>![](https://i.imgur.com/XyhPHGF.png)


parselnt("value")将字符串value转化为数字从而进行运算>![](https://i.imgur.com/lnutGPg.png)

> 为什么使用变数？
* 重复：避免重复计算
* 逻辑：抽象化独立每一层结果
* 记录：储存使用到的中间状态

#### js objects &array
>指定books阵列，依序指定元素到单元格中，元素用逗点隔开
![](https://i.imgur.com/883Sf4E.png)

>books.length//提取阵列长度3 
![](https://i.imgur.com/LhornQK.png)

>books.push("新书")//将“新书”元素添加到序列尾端
book.pop //将元素从序列尾端提取
![](https://i.imgur.com/YAXo6Xr.png)
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]
![](https://i.imgur.com/vqxjq0Y.png)

books.reverse() //得到资料序列前后翻转后的新序列
>![](https://i.imgur.com/E5l3c0m.png)

>var books = books1.
>contact(books2) //合并两笔阵列
![](https://i.imgur.com/3cNOEME.png)

var shop = {} 
shop["name"]="" //等同于shop.name=""
shop["phone"]="" //等同于shop.phone=""
shop["address"]="" //等同于shop.address=""
>![](https://i.imgur.com/wA0eXOT.png)
>![](https://i.imgur.com/olvUIqy.png)

>阵列中有物件
![](https://i.imgur.com/Hpsgdt8.png)

>物件中有阵列
>![](https://i.imgur.com/5QuduNz.png)

#### js looping
>![](https://i.imgur.com/YOFgGm2.png)

>![](https://i.imgur.com/mSmx2Vr.png)

while looping
>![](https://i.imgur.com/HDVeoyj.png)

for looping
>![](https://i.imgur.com/TgfwcaJ.png)

>![](https://i.imgur.com/dMCZcTc.png)

#### js string 字串处理

资料转换
验证格式
拮取
搜寻
组合
![](https://i.imgur.com/JYkhlpD.png)

> 常用字串操作命令
* indexOf 寻找位置
* slice/substr 切割字串
* replace 取代字串
* toUpperCase 转大写
* toLowerCase 转小写
* 分割成阵列
* join 结合阵列为字串

>字串连接
>"hell"+"world"="helloworld"
>![](https://i.imgur.com/yNDvrxI.png)

>寻找字串
>"APPLE&BERRY&LEMON".indexOf("BERRY")=6
>//起始字串位置
>"APPLE&BERRY&LEMON".indexOf("BANANA")=-1
>//所寻找的物件不在字串中则显示-1
>![](https://i.imgur.com/2AYsEVI.png)

>分割文字
>![](https://i.imgur.com/UfRLKZ3.png)
>"helloworld".substr(2,3)="llo"
>![](https://i.imgur.com/hQg0xJj.png)

>replace 取代文字
>
>![](https://i.imgur.com/czXy0bv.png)

>split(分割用字)//split("/")=[","];找到字符/然后用(",")字符取代("/")作为分割方式。

>![](https://i.imgur.com/WGAJNVz.png)

>![](https://i.imgur.com/5ElnfgU.png)

#### 函数模组化应用

>![](https://i.imgur.com/BMArAyE.png)

>![](https://i.imgur.com/6me7opO.png)

>![](https://i.imgur.com/A0lbfME.png)

>![](https://i.imgur.com/yY0codq.jpg)

>![](https://i.imgur.com/pRf7lCw.png)

>![](https://i.imgur.com/HxstFEe.png)

>![](https://i.imgur.com/LBhMTts.png)

>![](https://i.imgur.com/HKFDJVZ.png)

>![](https://i.imgur.com/Iwn0A6W.png)

>![](https://i.imgur.com/nwHKW84.png)

>![](https://i.imgur.com/AvnQzGm.png)

>![](https://i.imgur.com/8yLdM3Z.png)

>![](https://i.imgur.com/PPwN5zw.png)

>![](https://i.imgur.com/8ylUY7q.png)

#### 函数 模组化应用

#### 时间函数-从静态到动态

#### 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 阵列的批次操作
* 阵列批次操作的方法
![](https://i.imgur.com/wT6GqM7.png)

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) 
将阵列一个一个取出带入函数中执行
![](https://i.imgur.com/fLP9MDe.png)

* Array.map(function)
将阵列元素逐一取出，将执行结果存储成另一个阵列；映射
![](https://i.imgur.com/Tw3ZEj5.png)

* Array.filter(function)
根据函数回传值进行逻辑判断，决定是否将函数复制进新的阵列中
![](https://i.imgur.com/gS3H0f8.png)

* Array.find(function) 
根据函数回传值找出符合条件的第一个元素（非阵列！）
![](https://i.imgur.com/bQK2Tj1.png)

* array.some(function)
其中有一些元素符合条件则回传boolean运算结果
![](https://i.imgur.com/H3E3jXH.png)

* array.sort(function)
![](https://i.imgur.com/4nAVtpr.png)


* array.reduce(function)
![](https://i.imgur.com/L0rapB3.png)

#### canvas与特效动画
* 重复绘制的图形和动作，不易计算的角度，互相有联系的图形
![](https://i.imgur.com/AI20PGu.png)

* 画布坐标系的translate, rotate, scale
![](https://i.imgur.com/DqtguqP.png)

* 画布坐标系translate, rotate, scale
![](https://i.imgur.com/ymST5fo.png)

* 画布坐标系translate, rotate, scale
![](https://i.imgur.com/FLFOHn7.png)
![](https://i.imgur.com/iLQxxx3.png)
![](https://i.imgur.com/HW7uLfg.png)
![](https://i.imgur.com/4ldRrcd.png)
![](https://i.imgur.com/f72wfMX.png)
![](https://i.imgur.com/eYdDNt0.png)
![](https://i.imgur.com/wber9J1.png)

#### 物理基础（速度/加速度）
* 程序结构的规划（初始化变数；定时更新逻辑；画面更新）
![](https://i.imgur.com/bCOTQob.png)
![](https://i.imgur.com/qyNV7Lu.png)
![](https://i.imgur.com/S14f8m2.png)
![](https://i.imgur.com/LhoyloL.png)
![](https://i.imgur.com/S1z85DC.png)
![](https://i.imgur.com/xVc8z9C.png)
![](https://i.imgur.com/Tke4Zjb.png)
![](https://i.imgur.com/Tle1LXB.png)

#### 向量的概念 vectors
* ![](https://i.imgur.com/QxEN52c.png)
* ![](https://i.imgur.com/JCRSpan.png)
* ![](https://i.imgur.com/7vk2plQ.png)
* ![](https://i.imgur.com/LYtVv6C.png)
* ![](https://i.imgur.com/ndAVneQ.png)
* ![](https://i.imgur.com/0mjPTQA.png)
* ![](https://i.imgur.com/lrizsOf.png)
* ![](https://i.imgur.com/fTocu1a.png)
* ![](https://i.imgur.com/FfI8mmE.png)
* ![](https://i.imgur.com/RqYVaAr.png)
 
 #### ES6 and template
* ![](https://i.imgur.com/B4i16J9.png)
* ![](https://i.imgur.com/4W4E9Je.png)
* ![](https://i.imgur.com/I1MEnHi.png)
* ![](https://i.imgur.com/mAusc8w.png)

 #### 物件导向结构
 * ![](https://i.imgur.com/sK2914C.png)
产生，根据规则更新，移动
 * ![](https://i.imgur.com/IP1Hyhc.png)
当下时刻的换算
累积连续性变化
 * ![](https://i.imgur.com/12WLCFJ.png)
 * ![](https://i.imgur.com/9VyiKHR.png)
 * ![](https://i.imgur.com/lhkG38x.png)
array.splice(id,1)
 * ![](https://i.imgur.com/5xKKEib.png)
 * ![](https://i.imgur.com/asvmUzd.png)
 * ![](https://i.imgur.com/QzCwowS
 * ![](https://i.imgur.com/Z4sDraR.png)
.png)


层叠与继承控制哪些样式会作用于哪些网页元素

1. 组成层叠的4个部分
2. 层叠与继承的区别
3. 如何控制样式和元素的对应关系
CSS中的C（代表cascade，层叠）
```
/*标签或者类型的选择器*/
h1{
    font-family:serif；
}

/*#page-title代表ID选择器*/
#page-title{
    font-family：sans-serif；
}

.title{
}

```

