WEB-01 css/js_01

front-end
back-end
dev-ops

git
basic terminal usage
data structure&algorithms
SOLID,KISS,YAGNI
Github
Licenses
Semantic Versioning
SSH
HTTP/HTTPS and APIs
Design Patterns设计模式
Character Encodings

2019 web dev
https://github.com/kamranahmedse/developer-roadmap

HTML
CSS
Basic of Java Script
Packets Managers
-npm
-yorn
framework
-React js
-Angular
-Vue js
……

web tech

网站史
wayback machine

response
Content-Type: 表示后面的文档属于什么MIME类型
Content-Length: 告知文件大小

caniuse.com:测试feature各浏览器是否可用

1.html5

框架

(弃置）
<frameset>
<frame>
<frame>
<frame>
</frameset>

<iframe src>
  <iframe>
    <iframe>
    </iframe>
  </iframe>
</iframe>

一点点科普
<strong>: 强调
<b>
都加粗，对浏览器而言含义有别，优先加载之类的
对某些残疾人应用：strong会被念出来

换行

<ul> ul无序
<ol> ol有序

css
list-style{}:list 序号样式

<table>里colspan/rowspan 调整布局

select<option> 下拉选项条

html5新加：
section
article
audio个人主页不推荐
videio
mar跑马灯标签，弃置-已被js替代

3.css

element selector body{}
id selector #menu{}
class selector .bookTitle{}
div >p
special
img[alt=jiangren]{ 一般不用
padding:10px;
}
伪选择器 psuedo selector
a:hover{
color:#fff;
}

a:link{ }
a:visited{}
a:hover{ transform: rotate(180deg)
scale:1.5} 鼠标移动上去的效果
a:active{}

常见属性值
px
em:基于基准字体上级字体大小的多少倍
pt:
元素优先级

内元素大于外元素
selctor高于元素，univereal selector=attribute selector=pseudo class=0-1-0
！这儿有疑问

盒子模型

如果两个相邻元素都有margin会合并（以大的那个值为准）

<head>
  <style tyle="text/css>
    .box{
    }
  </style>
</head>
<div class=“box”>
</box>
<div class=“box”>
</box>
<div class=“box”>
</box>

boder：dashed(虚线）；
boder-radius：;

常见css库：

bootstrap
tailwindcss
semantic-ui
ant.design 基于数据有交互

display各属性

block
inline
none
inline-block
visibility:hidden(隐藏但保留位置，但display不保留位置）

position?

relative：基于元素位置（普通元素）
absolute/:找最近一个非static元素作为基准定位
static/:没有定位，默认属性
fixed：绝对定位（广告），相对于浏览器窗口
sticky：滚动中
（z-index:优先级）

float浮动目前不太使用，除非图片和文字环绕问题

float是飘到下一个元素上
right:让周围靠右
left:让周围靠左

clear

不让周边元素浮动
left
right
both

responsive

viewport设置
推荐bootstrap布局网站：
layoutit.com
bootswatch

media queries

@media screen and(max-width:600px){

}

@media screen and(min-width:600px){

}

#大于等于320像素且小于480像素的使用该样式
@media screen and (min-device-width:320px) and (max-device-width:480px){

}

对于不同大小设备设置一套样式
（通过bootstrap-layout-grid来了解一些这方面信息　.col, 12列布局）

/*iphone*/
@media only screen and (min-width:120px){
}

/*extra small devixe, phone*/
@media only screen and(min-width:480px){
}

/*small devices,tablets*/
@media only screen and (min-width:760px){
}

css preprocessor

推荐BEM CSS ，解决优先级嵌套混乱问题
具体：尽量不使用>,<这种嵌套的css写法；使用class单独命名
命名之间可以有自己嵌套逻辑
block-element-modifier
每个页面以block开始
<div class=“block>
<span class=”block__elem“></span>
<div class=”block block--modifi“>
</div>
</div>

<div class="header">
  <h1 class="header__log"></h1>
  <input type="text" class="header__search>
</div>

Sass

sass编译
sass 1.scss>style.css

$lightblue: lightblue;

.header{
    display:flex;
    background:lighten($lightblue,20%);
    &__logo{
      font-size:18px
    }
    &__input{
      border:solid 1px $lightblue;
      margin-left:20px;
    }
}

@for $i from 1 through 10{
  .box-#{$i}{
      color:lightenn(red,$i*5);
      height:20px;
      
  }
}

尾类

before/after


.box-0{
  content:'y'
}
.box-0:after{
  content:'z'
}
.box-0:after{
  content:'x'
}

nth-child

div:nth-child(2n){
  background:green;
}
div:nth-child(2n+1){
  background:blue;
}

css动画

div{
  background:green;
  transition: all 1s;/*一个动画过度*/
}
div:hover{
  background:blue;
}

transition几个属性

transition-property:

旋转

transform:rotate(180deg) scale(2);

动画 animation

@keyframes test{
    from{
       transform: scale(1);
    }
    to{
      transform:scale(2);
    }
}

@keyframes test{
    0%{
       transform: scale(1);
    }
    50%{
       transform:scale(2);
    }
}

动画相关属性

网站推荐 :cssmaker.com
box-shadow:0px 0px 20px 10px black;
左偏移，右偏移，模糊度，阴影宽度，阴影颜色
text-shadow:2px 2px 2px red;
background-size:contain/cover/;
background-image:liner-gradient(red,yellow);
cursor:pointer;

Less

PostCSS

load-awesome
codepen

4.JS

Javascript

fetch--promise--response

fetch("http://jiangren.com.au")

目前已经不用jquery，不益于维护

弃用：

document.getElementById()

现在用

document.querySelector("class名").innerText="hello"

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector
常用

documnet.querySelector(class名).classList.add("hide")
documnet.querySelector(class名).classList.remove("hide")

/*返回是否隐藏*/
documnet.querySelector(class名).classList.toggle("hide")

常用debug提示

console.log()
console.error()
console.warn()

js内部都是浮点数，类型是number（精度上有损失）

变量声明

let
const

变量提升
/不加变量声明默认global/
/'use strict'后不声明会报错/
/js即使后来声明变量也会自动提升到使用该变量之前/

命名规则Naming convention

1.uppercase:常数
2.普通命名：驼峰命名法
3.数字关键字避免

函数也可以作为变量

数据类型

1.number:整数和小数
2.string
3.boolean
4.undefined
5.null
6.object：不同（靠近字典）
7.array

符号

+：字符串和数字
==：仅仅判断值是否相等
===：判断值和类型是否相等
！=：仅仅判断值是否不想等
！==：判断值和类型是否不相等

特殊表达式结果

4+3+"3"

==>73

"4"+3+3

==>433

"4"*3+3

==>15

0.1+0.2

==>0.30000000000000004

1+null

==>1

1+undefined

==>NaN

(0.1+0.2)===0.3

==>false

(0.1+0.2).toFixed(1)===0.3

==>true
常见解决精度问题方法：转化为string来操作

/*array*/
let array=[1,2,"str",{},[],function(){console.log(123}]
array.shift()#弹出前面元素
array.pop()#弹出后面元素
array[5]()#打印123
/*array调用索引超过原先索引会扩充到你调用的索引*/

array.length
arr=[1,2,3]
arr.map(x=>x*2)#返回[2,4,6]
arr.filter()

array like 元素

let nodes = document.querySeletorAll("p")
nodes[1]
nodes.length

函数

array.from(nodes).map(x=>x.innerHTML).join(',')
arr.map(x=>x*2)#返回[2,4,6]
arr.filter()

三元运算符
for loop
在js中只有两种作用域（var,let作用域是正常的）
1.函数内
2.global
所有其他都是global作用域，包括for loop中定义的变量都属于全局变量
函数中可以有函数
前面函数声明后面函数就可以使用后面函数
箭头函数

 const fn = (x,y) =>(
   return x+y)

iife

为了避免不同js文件相同变量名互相修改值
包裹每个变量为函数可以有效解决该问题

var x=100
(function(){
  var x=10
  console.log(x)
})()

(function(window){
  var x=5
  console.log(x)
})(window)

console.log(x)

array=[]
target=14
function(array,target){

for(let i=0;i<array.length;i++){
  for(let j=i+1;i<array.length;i++){
      if（array[i]+array[j] === target){
          return [array[i],array[j]]
      }
  }
}



function toSum(array,target){

for(let i=0;i<array.length;i++){
  const f = array.find(x,index)=>(tarfet.array[i])==x)
  console.log(i=""+array
}



** 再看 **
function toSum(arr,target){

  for(let i=0;i<arr.length;i++){
    const diff = target - arr[i];
    if(map[diff]!=undefined){
      map[diff]<arr[i]？return [map[diff],arr[i]]：return [arr[i],map[diff]]
      
    }
    map[arr[i]]=i;
  }
  return []
}

JSON.stringify(student) 会把key，value都变成string
JSON.parse(student) 会把key变成单纯的key

事件

let node = document.querySelector(".jr-banner-img")
node.addEventListener('click',function(e){
   e.target.classList.toggle('hidden')
})

document.querySelector("p").foreach(x=>x.addEventListener('click',hidden))

Template Literals(模版字符串）`hello ${a}`

let a="word"
`hello ${a}`
`hello ${a+a}`

Lexical Scope

let 是block级别作用域
var
const 常数操作
一般最好不用var

setTimeout( ) 间隔指定时间运行一次
setInterval( ) 间隔指定时间一直运行

setTimeout(()=>{console.log("hello word");},3000);

clearTimeout(id):cancel timeout

for(var i=0;i<=10;i++){
  (function(n){setTimeout(()=>{
    console.log(n);
  },i*1000})(i)
}

const content = document.querySelector("#content");

const updateTime = node=>{
const time = (new Date).toLocaleTimeString();
content.innerText = time;
}
setInterval(()=>updatetime(document.querySelector("#content")),1000);

单线程模型，有阻塞问题，时间不一定总是准确

Closure 闭包

函数内部变量不能被外部访问

IIFE-Immediately invoked function expression：module避免全局变量污染，依赖注入

(function(){
  statements
})();

Arrow functions箭头函数

const fn1=function(name){console.log(name)}
const fn2=name=>console.log(name)

fn(1)(2)=3

const fn=a=>b=>b+a

Array methods 数组函数

indexOf()
lastIndexOf()
includes()
reducer(acculator,)
sort()

arr=[1,2,3,4,5]
//arr.map(function(n){return n*2})
arr.map(n=>n*2)

arr=[1,2,3,4,5]
arr.map(n=>n*2).filter(n=>n>8).reducer((a,b)=>a+b)

Class

function generate(name){
  this.name=name
}
let object2=new generate("LU");

class Rectangle{
  constructor(height,width){
      this.height=height;
      this.width=width;
  }
  calculateArea(){
    return this.height*this.width;
  }
}
## Getter and Setter
get f()
set f()

## this in arrow function 
箭头函数中的this指的是当前环境中的this
函数中的this指的是函数中的this

const car={
model:'Cayenne',
manufacturer:'porsche',
getFullName:()=>${this.manufactor} ${this.model}
}



# DOM
浏览器Dom Tree

Element Node 元素节点
Attr 属性节点
Text Node 文本节点
Comment 注释节点
Document

Array.from(document.querySelectorAll(”section.card>h2>a“).filter(x=>x.innerText === ‘apply’)[0]


* Node.appendChild()
* Node.cloneNode()
* Node.contains(node)
* Node.removeChild(node)
node.classList.add（）
node.classList.toggle()  call一下active，再call一下remove

<body>
<a href="#">Show time</a>
</body>
<script type="text/javascript">
function toggleTime(){
document.querySelector("#content").classList.toggle("hide")
}
d document.query.Selector("#toggle").addEvenListener("click",toggleTime)
const updateTime= node =>{
···
}
</script>



熟悉
transform
transition

* Node.attributes  属性节点

## BOM
window.navigator.uerAgent
可以通过https获取一些蓝牙设备，多媒体设备，gps定位等

confirm(”test“)  不常用，不好看



要求
* host到internet
* 有https证书

* window.location() 获取当前窗口地址
* window.history.back[-1]   有的时候会没有权限获取
* window.history.push   加一个新地址到你的浏览器记录
_重要_
* window.localStorage()  存变量信息, 经常用于浏览器储存token信息

window.localStorage.setItem("name","lu")
window.localStorage.getItem("name")

save.onClick()
let value= document.querySelector("#nameText").value
window.localStorage.setItem("name","value")
document.querySelector("#name").innerText=window.localStorage.getItem("name")


* window.sessionStorage()页面关闭会清除缓存

其他
alert
document.cookie
setTimeout
setInterval

网络安全

### 
e.preventDefault()
取消点击浏览器默认表单发送
e.stopPropagation()
取消点击浏览器默认冒泡事件

} document.querySelector("#form").addEventListener("submit",onSubmit)

</script>

Class Person(weight,height，BIM){

Constructor(weight,height，BIM){

this.weight = weight;

this.height = height;

this.BIM = BIM;

try{
  if(this.height <= 0 || this.height > 3) throw "height value is wrong"
  if(this.weight <=0 || this.weight > 1000) throw "weight value is wrong"
  
}
catch(e){
  alert(e);
}

}

calculateBMI(){

this.BIM=this.weight/height**2
return this.BIM

}
setWeight(){
this.weight=this.BIM(this.height*2)
return this.weight
}

}

最后编辑于：2020.01.29 14:05:30

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 202,905评论 5赞 476
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,140评论 2赞 379
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 149,791评论 0赞 335
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,483评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,476评论 5赞 364
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,516评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,905评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,560评论 0赞 256
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,778评论 1赞 296
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,557评论 2赞 319
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,635评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,338评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,925评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,898评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,142评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,818评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,347评论 2赞 342