blossom_绽放
blossom_绽放

我的程序员入门手册

blossom html css JavaScript

程序员入门的时候整理的一份学习笔记,见证了我的成长
备份

标签：前端学习

HTML

视频音频标签

带控制器的视频标签, 不同浏览器有不同的文件格式要求
所以用 2 个 source 标签指定不同的视频格式

带控制器的音频标签, 不同浏览器有不同的文件格式要求
所以用 2 个 source 标签指定不同的音频格式

audio 基本操作如下

var a = document.querySelector('#id-audio-player')
a.play()                //播放
a.pause()               //暂停
a.autoplay              //自动播放 (设为true) 
a.src                   //链接音频文件
a.volume                //音量（0-1之间的数）
a.duration              //音频时间长度
a.currentTime = 1       //现在播放第几s（设置）
a.playbackRate          // 播放速率, 默认是 1

移动端设置

设置 viewport
viewport 是 html 的父元素
在手机上需要用下面的语句设置它的尺寸

网易移动端模板
属性 说明
width=device-width 宽度等于设备宽度
height=device-height 高度等于设备宽度
initial-scale 初始缩放比例
minimum-scale 允许用户缩放的最小比例
maximum-scale 允许用户缩放的最大比例
user-scalable 是否允许用户缩放

媒体查询-响应式开发

响应式设计就是一套 CSS 根据当前的分辨率选择不同的样式
媒体查询主要用来:

  • 检测媒体的类型, 比如 screen, tv等
  • 检测布局视口的特性, 比如视口的宽高分辨率等

上面代码中, all 是媒体类型, 代表任何设备
and 是逻辑操作
意思是, 对于任何设备, 在宽度在 200-300 的范围内应用这个样式

CSS

选择器

举例：< h1 id="id-h1" class="class-h1"> 琉璃 < /h1 >
一切标签都可被选择包括html, style等

元素 选择器 符号 优先级 从高到低
!important ! h1 { color: red !important; }
id # #id-h1 { color: red; }
class . .class-h1 { color: red; }
标签 无 h1 { color: red; }
定义 优先级 从高到低
! !important
内联 禁止使用 < h1 ~~style="color: red;"~~ > Hello World < /h1 >
中联 < style > h1{ color: red; } < /style >
外联 < link rel="stylesheet" href="tag.css" >

常用

body {
    background: lightblue;          /* 背景色   */
    margin:0px;                     /* 外边距   */
    border:0px;                     /* 边框     */
    border-style: solid;            /* 边框样式 */
    padding:0px;                    /* 内边距   */
    font-family: Microsoft YaHei;   /* 字体     */
    font-size: 22px;                /* 字体大小 */
    text-align: center;             /* 对齐     */
}
.tanChuang {
    z-index: 100;                   /* 顶层     */
    position: fixed;                /* 定位     */
    top: 0px;                       /* 顶部     */
    left: 0px;                      /* 左部     */
    width: 100%;
    height: 100%;
    opacity: 0.96;                  /* 透明度   */
    background: black;
    color: white;
}
.tanCenter {
    position:relative;
    top: 50%;
    transform: translateY(-61.8%);  /* Y轴距离  */
}
.circle {
    width:  50px;
    height: 50px;
    border-radius: 50%;             /* 圆角     */
}

background 相关属性和缩写
    background-color: #233;
    background-image: url(bg.png);
    background-repeat: no-repeat;
    background-attachment: fixed; 背景图片随滚动轴移动方式 
    background: #233 url(bg.png) no-repeat;

三种缩写, 分别对应有 4 2 3 个值的时候的解释, padding 同理
margin: top  right  bottom  left
margin: (top/bottom)  (right/left)
margin: top  (right/left)  bottom

overflow属性
    visible 默认
    auto 需要的时候加滚动条
    hidden 隐藏多余元素
    scroll 就算用不着也会强制加滚动条

内联元素 居中 text-align: center
区块元素 居中 margin: 0px auto;

伪类

:link 未访问 :hover 悬停
:visited 已访问 :active 选定 
a:link   { color: white; text-decoration: none; } /*去下划线*/
a:visited{ color: black; }
a:hover  { color: red; cursor: pointer; } /*鼠标样式*/
a:active { color: lightblue; }

a.class:visited {color: white;}    /* 独立伪类 */

定位 position

值 描述
static 默认 static
relative 相对定位 可相对自身偏移
absolute 完全绝对定位, 忽略其他所有东西, 往上浮动到 非 static 的元素
fixed 基于 window 的绝对定位, 不随页面滚动改变

非 static 元素可以用 top left bottom right 属性来设置坐标
非 static 元素可以用 z-index 属性来设置显示层次
e.pageX——相对整个页面的坐标
e.clientX——相对可视区域的坐标
e.offsetX——相对当前坐标系的border左上角开始的坐标

布局 flex

容器的属性 描述
flex-direction:row 属性决定主轴的方向（即项目的排列方向
row,row-reverse 主轴为水平方向，起点在左(右)端
column,column-reverse 主轴为垂直方向，起点在上(下)沿
flex-wrap:nowrap 定义如果一条轴线排不下如何换行,默认不换行
wrap,wrap-reverse 换行，第一行在上(下)方
flex-flow flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
justify-content 属性定义了项目在主轴上的对齐方式
flex-start,flex-end 左对齐(默认),右对齐
center,space-between 居中,两端对齐，项目之间的间隔都相等
space-around 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
align-items 属性定义项目在交叉轴上如何对齐
stretch (默认值)如果项目未设置高度或设为auto，将占满整个容器的高度
flex-start,flex-end 交叉轴的起(终)点对齐
center,baseline 交叉轴的中点对齐,项目的第一行文字的基线对齐
align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
flex-start,flex-end 与交叉轴的起(终)点对齐
center 与交叉轴的中点对齐
space-between 与交叉轴两端对齐，轴线之间的间隔平均分布
space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch（默认值) 轴线占满整个交叉轴
项目的属性 描述
order:0 定义项目的排列顺序。数值越小排列越靠前，默认为0
flex-grow:0 定义项目的放大比例，默认0即如果存在剩余空间，也不放大
flex-grow:1 属性都为1，则它们将等分剩余空间（如果有的话）
flex-grow:2 如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍
flex-shrink:1 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
flex-shrink:0 如果一个项目的属性为0，其他项目都为1，则空间不足时，前者不缩小,负值无效
flex-basis:auto 定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小
flex-basis:350px 可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间
flex 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
flex:auto,none 默认值分别是(1 1 auto) 和 (0 0 auto)
align-self:auto 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch.该属性可能取6个值，除了auto，其他都与align-items属性完全一致

显示 display

值 描述
none 不显示
block 独占一行(默认有div p ul ol li h1 h2 h3 h4 h5 h6)
inline 内联元素 无法设置宽高
inline-block 内联元素 可以设置宽高

盒模型

BOX 单位 描述
margin: 0px; 外边距
border: 0px; 边框
padding: 0px; 内边距
width: 80% or 0px; 宽
height: 100% or 0px; 高

动画

动画 功能
transform 2D 变形
transition css动画(运动时间,运动对象,运动速度,等待时间)
animation 多过程动画效果(具体看链接)

JavaScript

定义 插入 < /body > 之前 顺序执行
中联 < script >log('Hello World!')< /script >
外联 < script src="Echo.js" charset="utf-8">< /script >

Array 数组

属性 秒懂释义 相当于
slice( ) 复制 切片并返回 支持负索引
splice(开始,长度,元素) 删除插入并返回 开始的地方插入
concat( array ) 连接 数组
includes( str[ ] ) 检查 是否包含 str[ ] 返回 bool
indexOf() 返回元素第一次在数组中出现的位置,无返回-1
length 返回长度 长度可设置以清空
push( ) 末尾 添加元素 push(1,2,[1,2])
unshift( ) 头部 添加元素
pop( ) 尾部 删除一个元素
shift( ) 头部 删除一个元素
join( str ) 返回 字符串 str 分隔
reverse( ) 翻转 所有元素
sort( ) 排序函数(需提供排序方式函数)
map() 参数是函数,返回一个新数组
filter() 参数是一个过滤函数,返回符合条件的新数组
toString() 返回数组的字符串形式

Str 字符串

属性 说明
slice( ) 返回 切片
if( == ) 判断相等需要双等号
includes( str ) 检查 是否包含 str 返回 bool
split( str ) 以 str 分割字符串 返回 array
toLowerCase() 字母转小写
toUpperCase() 字母转大写
indexOf( str ) 查找 是否包含 str 返回 下标
match( str ) 整个匹配结果以及任何括号捕获的匹配结果的 Array,没有就返回null
replace( pattern, str ) 替换 pattern 为 str ；/pattern/g全部替换
search( pattern ) 查找 pattern 返回下标 否则返回 -1

Object 字典

dict = { '初中生':6, '高中生':7, '大学生':8 }
|属性|说明
|:-|:-|
| dict = { key : 'value', }|创建
|dict.(key) |点语法读取|
|dict ['小学生'] = 4| 添加
|dict ['小学生'] = 5| 修改
|delete dict ['大学生']| 删除
|Object.keys( dict )| 返回 keys

类

var Student = function(name, height) {
    // 用 this.变量名 来创造一个只有类的实例才能访问的变量
    this.name = name
    this.height = height
}
// 用 new 函数名(参数) 初始化一个类的实例
var s1 = new Student('gua', 169)
// 可以改变 s1 的属性
s1.name = 'xiaogua'
s1.height = 1.69
// 可以创建多个互相独立的实例
var s2 = new Student()
var s3 = new Student()
//可以给类增加一些方法(函数)
Student.prototype.greeting = function() {
    console.log(`hello, I'm ${this.name}`)
}
// 可以调用实例的方法
s1.greeting()

ES6类的表示方法
class Student {
    // 初始化的套路
    constructor(name, height) {
        this.name = name
        this.height = height
    }

    // 方法没有 var
    greeting() {
        console.log(`hello, I'm ${this.name}`)
    }

    update(name, age) {
        this.name = name
        this.age = age
    }
}
class Teacher extends Student {
//继承类的用法
}

this

apply call bind  //是用来给函数指定 this 用的


apply 接受两个参数
第一个参数是函数里面的 this
第二个参数是要传给函数的参数列表, 类型是 数组(暂定), apply 会把数组拆成一个个的参数传给函数

console.log.apply(console, arguments) //直接用

call 和 apply 类似, 但是小有区别, 如下
第一个参数和 apply 一样
第 2, 3, 4, 5, ... 个参数会依次作为参数传给函数

console.log.call(console, 1, 2, 3, 4, 5, 6, 7) //直接用

bind 函数/*不直接调用*/, 而是返回一个函数让你来调用
第一个参数是用来指定函数里面的 this, 和 apply call 一样
var log = console.log.bind(console)  //不直接用
log()    //才可调用

ES6

属性 说明
let 就是限制作用域在 {} 内的 var
const 用来声明一个不可赋值的变量,也是限制作用域在 {} 内的 var
Set 和 Array 相似的数据结构不同之处在于 Set 中的元素都是不重复的
Set var s = new Set() add 方法添加元素s.add(1)
Set has 方法检查元素是否在 set 中 s.has(1) => true
Set size 属性相当于 length s.size => 2
Set delete 方法删除一个元素s.delete(1)
Map Object相似 var m = new Map()
Map set 方法增加一个值m.set('name', 'gua')
Map get 属性得到一个值m.get('name')
... 叫扩展符号, 作用是把数组解开成单独的元素
... var a1 = [1, 2, 3] var a2 = [...a1, 4] => [1, 2, 3, 4]
... 也可以传参var a1 = [1, 2, 3] log(...a1) => '1,2,3'
... 语法可以实现可变长度的参数, 多余的参数会被放进 args 数组中
... var foo = function(a, ...args) {log(a, args.length)} foo(1, 2, 3, 4)
解包 var [a, b] = [1, 2] [a, b] = [b, a]
箭头 (参数1, 参数2) => 语句 function(参数1, 参数2) {return 语句}

Json 格式

var x = JSON.stringify( [1,2,3] ) //编译

var y = JSON.parse( x )           //读取

Promise 处理回调的方法

// 将 fs.readFile 的操作封装成 promise，这样就可以使用 promise 的 api 了
const readFile = function(filename) {
    // 一般前端的写法 
    // return new Promise(function(resolve, reject) {})
    const p = new Promise(function(resolve, reject) {
        const fs = require('fs')
        const options = {
            encoding: 'utf8'
        }
        fs.readFile(filename, options, function(error, content) {
            if (error !== null) {
                reject(error)
            } else {
                resolve(content)
            }
        })
    })

    return p
}
// 使用 promise 读取文件就不用写成回调的形式了
// 直接按照同步的写法就好了
// 可以无限 then, 只要你保证上一个 then 返回了东西即可
let promise = readFile('foo.txt')
promise.then(function(content) {
    console.log('debug file content', content)
    const c = content + ' suffix1'
    return c
}, function(error) {
    console.log('debug error message', error)
}).then(function(c1) {
    console.log('second then', c1)
    const c = c1 + ' suffix2'
    return c
}).then(function(c) {
    console.log('third then', c)
})
console.log('GUA ****** line 46')

// 上面的写法也可以写成下面这样
// 把 reject 的操作放在 catch 里面
promise.then(function(content) {
    console.log('debug file content', content)
}).catch(function(error) {
    console.log('debug error message', error)
})
// 有时候会碰到批量执行异步操作，如果直接用循环 + 调用函数的形式会比较麻烦
// 使用 Promise.all 就很方便了
// all 方法是直接挂在 Promise 类上的，而 then catch 这些方法是挂在原型上
// Promise.all 会把数组里面所有的 promise 对象都执行完
// 再往下调用
Promise.all(list).then(function(content) {
    console.log('Promise.all, content', content)
})

重命名文件的方法

var file = app.$('videoInput').files[0]; 
// 重命名
var aafile = new File([file], "aa.mp4");

BOM API

属性 说明
location 管理 URL(改变 href 属性就可以跳转页面)
navigator 对象是用来查询浏览器的信息的 例如navigator.userAgent
history 对象是用来处理历史纪录的
screen 管理屏幕
window 管理浏览器所有的东西
open（‘url’，‘_self/_blank’） 打开一个新窗口 打开自身或另打开
close() 关闭窗口
document.body.scrollTop 滚轮离顶部距离 
history.length      // 历史列表中的 url 数量
history.back()      // 相当于点击后退按钮
history.forward()   // 相当于点前进
history.go(-2)      // 相当于点击两次后退按钮
//H5新函数
var state = {
    page: "settings"
}                        
history.pushState(state, "settings", "/settings")

/*三个参数分别是
    1.自定义对象
    2.新页面的标题, 但是现在还没有浏览器实现这个功能
    3.新页面的地址(/...)
  
用户点击 前进 后退 按钮的时候, 会触发 window 的 popstate事件
于是可以在这里操作*/

window.addEventListener("popstate", function(event) {
    var state = event.state;
    // state 就是 pushState 的第一个参数 被储存
    console.log('pop state', state)
})

/*还有一个 replaceState 函数, 它的作用和 pushState 一样,   只是不生成一条历史纪录
只能在相同域名下使用*/

DOM API

  • DOM 是 HTML 文件
  • DOM API 是浏览器提供给 JavaScript 操作 html 页面的交互方式

常用
属性 （元素 .class #id） 说明
var omg = document.querySelector( '#id' ) 获取 DOM对象
var omgs = document.querySelectorAll('.classname') 获取DOM对象组
var omgValue = omg.getAttribute( 'value' ) 获取 属性值
omg.setAttribute( 'value' , 'Gua' ) 修改 属性值
omg.hasAttribute( 'value' ) 查询 是否存在
omg.removeAttribute( 'type' ) 删除 某个属性
var allProperty = omg.attributes 查找 所有属性
omg.remove( ) 整个删除 元素
omg.dataset.() 获取data-()值
var button = document.createElement('button') 创建 元素
button.innerHTML = '注册用户' 设置属性
omg.appendChild(button) 给一个元素添加子元素
omg.insertAdjacentHTML( 'beforeend', html ) 插入 HTML
insertAdjacentHTML 标签 描述
beforebegin 开始标记 前
afterbegin 开始标记 后
beforeend 结束标记 前
afterend 结束标记 后

本地存储

贮藏：localStorage[ 'name' ] = '馒头'
取出：localStorage[ 'name' ]
电脑本地储存 5MB Object,只能存字符串，可使用 Json 转字符串
localStorage 没有过期时间, 要用 clear remove 主动删除数据

贮藏：sessionStorage[ 'name' ] = '馒头'
取出：sessionStorage[ 'name' ]
sessionStorage 的数据在用户关闭浏览器后将被删除

事件

事件绑定：
区分元素 > 绑定元素 > 触发Event > 操作元素

说明
var button = document.querySelector( "#id-div-cont" )
// 获取 元素
button.addEventListener( 'click', callback)
// 事件 绑定 或 委托
常用事件 说明
'focus' 获得 焦点
'blur' 失去 焦点
'click' 单击
'dblclick' 双击
'mousedown' 鼠标点下
'mousemove' 鼠标移动
'mouseup' 鼠标抬起
'mouseover' 鼠标悬停
'mouseout' 鼠标移开
'keydown' 按下 某键
'ended' 播放结束
submit 当
提交时触发
change 当