自学web前端的小笔记(入门JS基础部分)

22.JS前期学习三部分
1-ECMA5 语法 规则 标准
2-DOM 文档对象模型
3-BOM 浏览器对象模型
ECMA6有类的概念,可和面向对象语言区别还是很大,只能说是基于对象的语言
JS的用处
1.页面动态效果
2.做游戏
3.服务器开发NODEJS
4.交互
5.表单验证(最早设计出来是做这个的,可以给后台分担压力)
23.字符串
在JS中,字符串的- * /都是进行自动运算,true是1,false是0
+号是拼接,和所有类型数据都是拼接
Var haha=true
Var hehe=’nihao’
Console.log(haha+hehe)
为:truenihao
字符串的长度字符包括(字母,数字,标点,空格,汉字)
24.前++ 后++总结
前++就是先运算 后++不是先运算
后++后面有赋值了(a)的那个变量才会运算
给个例子就看懂了
var a=1
var c = ++a + ++a + a++ + a++ + ++a + a++ + a;// 2 3 3 4 6 6 7 a是a里最后的数 c是加起来的数
console.log(a)
console.log©
var a=1
var c = --a + --a + a-- + a-- + --a + a-- + a;// 0 -1 -1 -2 -4 -4 -5 a是-5 c是17
console.log(a)
console.log©

a的值为 有几个+ a就加几个1
var a=1
var c= a++ + a++ + 1 + ++a + a++ //1 2 1 4 4 a=5 c=12
console.log(a)
console.log©
不用管后面a的位置 有就加1
25.字符串拼接
ParseInt()是转换成整型 向下取整
Undefined和NULL类型没有toString方法,会报错
Uncaught TypeError: Cannot read property ‘toString’ of null
26.全局作用域:在script标签里的就是全局作用域
27.全局对象:浏览器顶级对象window
28.Var变量会提升到作用域顶端,不带var声明的变量不会
29.函数体内的变量为私有局部变量
30.用定义函数名方式定义的函数,会整个(声明+赋值)提升到当前作用域的顶端
31.函数定义 有 函数名定义 function sun(){}(这个作用域会置顶)和函数表达式定义var sum=function(){}
32.原型对象的作用之一就是资源共享,指向同一个地址
33.原型:在实例对象中,有一个__proto__属性,存储的是一个对象,__proto__是隐式原型,指向的是构造函数中的prototype显示原型对象 原型对象的作用：公共存储空间
34.构造函数和实例对象和原型的关系
构造函数创建了实例对象，实例对象的隐式原型对象__proto__指向构造函数中的prototype显示原型对象,显示原型对象中的construct构造器指向构造函数
35.原型链:这是一种权重优先级式的寻找过程。在构造函数中如果有这个方法就调用,没有就会寻找这个构造函数的原型里这个方法,如果还没有,就找上一层(父类),以此类推,直到最上级Object类的原型里的此方法,如果还没有就会报错
XXX is not a function
这个过程就是原型链.
36.
Var sum=10;
function ho(sum){
}
ho(100)

function ho(sum){
//var sum=100 不会影响局域外
Console.log(sum)//sum还是100
}
Console.log(sum)//sum还是10

Var sum=10;
function ho(sum){
}
ho(100)

function ho(){
Sum=100;
Console.log(sum)//sum还是100
}
Console.log(sum)//sum还是100 这个在webstorm笔记里有展示
37.js的垃圾回收机制概念
浏览器会对未被指向的对象定时的清理
如果想让这个变量直接无指向性,直接赋值null 比如 sum=null;
38.this的指向
在构造函数中,this的指向当前实例对象
在普通函数中,this的指向为window
39.访问对象的另一种方式
Var p=new Object()
P.name=’jay’;
P.sing=function(){alert(‘哈哈’)}
P[“name”]; p“sing”;
对象[“属性名”]; 对象“方法名”;
40.JS的内置对象 比如 Array Boolean Date Math Number Stirng RegExp Global
41.json也可以叫语法糖,这种对象表达方式要比Object简便些
42.Call函数和apply函数可以改变this的指向
区别,传参的方式不同 sum.call(对象参数,参数1,参数2)
Sum.apply(对象参数,[参数1,参数2])
43.怎么让一个元素垂直水平居中
Div{
position:absolute;
Left:0
Top:0
Right:0
Bottom:0
Margin:auto
}
44.JS当中的伪数组
HtmlCollection和真数组相比,都有下标,都有length属性
但没有Array数组的方法
45.回调函数
1.函数是不是你定义的? 是
2.函数是不是你调用的？不是
浏览器调用的
3.函数最终也没有执行? 是
46.伪数组转换真数组
Var list=Array.prototype.slice.call(伪数组对象);
伪数组并没有foreach的属性,而真数组有
47.什么是DOM
利用JS对HTML标签的CRUD
48.JS中没有集合的概念,只有数组和伪数组(HtmlCollection,NodeList)
49.Dom数组的childNodes属性不会剔除文本节点
但是children属性会剔除
50.元素节点有能力拥有子节点
寻找父节点
Var htmlnode=document.getElementByTagName(“html”)[0]
Console.log(htmlnode.parentNode) //document 文档
Console.log(htmlnode.parentElement)//null 因为html往上没有元素节点了 DOM树顺序:window->document->html->一大堆元素节点
51.节点基本分类(一共有12种,很多你用不到,下面是常用的)
元素节点

最大的是html
文本节点 123
属性节点 id=””
文档节点 看不到,内置在浏览器中
52.IE浏览器是微软操作系统内置的浏览器(自带的浏览器,卸不掉),它的更新速度很慢,只会跟着操作系统提升更新,区别于其它的高端浏览器。
53.IE 6 7 8没有按照W3C的规范设计浏览器,导致它的兼容性很差,很多该有的功能没有
像谷歌 欧朋 苹果 火狐那些浏览器 自动更新 独立更新
54.HtmlElement接口有很多接口继承了它,可以说是各式各样
但HtmlDocument接口没人继承它,内容基本在core里
55.元素节点对class属性的操作
通过id或其它获取节点对象
对象.classlist.add()等等
56.window.οnlοad=function(){}
这是异步的回调函数,当页面渲染完毕后,再去执行这里的代码。因为页面渲染和JS操作分工是不一样的,一个是Html css渲染引擎在做,一个是V8引擎再做。
57.两个节点的替换不要用第三方的变量=null,因为他俩地址指向同一个,dom树相当于挂在了一起,于是就用第三方节点的克隆,cloneNode方法,相当于开辟了新的地址,然后再进行替换操作,被替换的节点处于游离状态,而不是死亡,只有经过一段时间后,JS的垃圾回收机制才会清理这些游离状态的节点.
58.函数化编程 异步编程(回调函数)
59.在JS里 一个函数一个作用域
60.第一家浏览器 网景公司
61.事件对象:事件回调函数的第一个参数(因为是形参,写啥都行,而且这个函数是匿名函数,浏览器调用的)
事件对象的属性方法:preventDefault()这个是阻止当前事件对象的默认行为 这个方法dom0 dom2都支持
比如a标签不会跳转
App.οnclick=function(event){}
event就是事件对象
Dom0支持renturn false Dom2不支持
62.dom0就是XXX.onclick() dom2就是XXX.addEventListener(“click”,function(){})
63.JS是一款面向原型的语言 它推崇函数化编程 异步编程
64.事件的冒泡:
前提:html标签的嵌套
效果:子节点的事件会触发,并延续到祖先标签的相同触发事件
65.事件流 捕获+目标处理+冒泡
Dom0只有冒泡
Dom2 拥有完整的事件流
66.祖先节点的事件阻止会影响它的子孙节点,如果不想让子孙节点被影响,给子孙节点事件对象加个stopProgation()
67.大部分的浏览器事件对象为事件的回调函数的第一个参数
少部分的浏览器事件对象为window.event
所以有这个写法 回调函数里 ev= ev || event
如果ev形参不存在,就是undefined，那么在逻辑表达式寓意为false,||为短路
68.闭包的概念
闭包就是一个容器(浏览器自带的c++对象)
什么时候产生闭包
函数套函数,里面的函数使用外面函数变量的时候
69.什么是事件委托
将子节点共性的动作，放到父节点统一定义并执行
前提条件:不能阻止冒泡
70.(function(){console.log(i)})(i)
这种函数叫做IIFE 立即可执行函数表达式
71.因为mouseover和mouseout在冒泡事件太乱了,所以被mouseenter和mouseleave给代替了
说白了就是一个会冒泡(乱),一个不会冒泡
右击事件:contextmenu
72.This
1-this必定指向一个对象
2-全局作用域 函数作用域种
3-怎么确定this的指向?看函数调用位置的调用形式
73.函数的调用形式
独立调用fn()
This—>window
隐式调用obj.fn()
This–>obj
显示调用 call(obj) apply(obj)
This–>指定的对象obj
构造调用 new fn()
This–>构造出来的实例对象
有一个特殊的 回调函数
调用者this–>看API！因为不是你调的,自己无法确定调用者
74.前端坐标系
正值:往里缩
负值:往外扩
75.CSS像素是一个抽象单位
1css像素所占据的实际的物理尺寸(不确定的,和1cm那些不同)
76.固定定位是有兼容性问题的,有些浏览器是不支持固定定位的 在移动端这个问题更为严重
固定定位 参照于视口定位
绝对定位 参照于包含快进行定位
77.当只有html有overflow属性,overflow属性作用于系统
当只有body有overflow属性,overflow属性作用于系统
当html和body都有overflow属性时
html作用于系统,body作用于自己
78.JS操作CSS的方法
Window.getComputedStyle(节点对象) 方法名为驼峰命名
79.padding-box ClientWidth
Border-box OffsetWidth
80.获取视口的尺寸 视口的padding-box
Document.documentElement.ClientWidth
下面这个拿到的是html属性的border-box
Document.documentElement.OfferWidth

81.offersetParent是抽象包含块的
82.外边距塌陷的三种解决办法:
1–为父盒子设置边框（会撑大父盒子）
2–为子盒子设置像上内边距(会撑大父盒子)
3–为父盒子设置属性 overflow:hidden触发bfc(不会撑大父盒子)
83.offsetParent的结果(把html和body的缝隙去掉为0)
本身定位为fixed
==>offsetParent为null(非火狐)
==>offsetParent为body(火狐)
本身不为fixed
==>offsetParent为body(父级没有定位)
==>offsetParent为定位父级(父级有定位)
84.元素的相对位置:当前元素相对于视口的位置
元素的绝对位置:当前元素相对于body的位置
85.Element.getBoundingClientRect()
返回元素的大小以及相对于视口的距离
86.quertSelector()系列 静态列表:dom树长什么 就拿什么
getElementBy系列 动态列表:dom树发生改变时 列表也会跟着变（性能低）
87.JS代码的执行速度远快于浏览器的渲染速度
dom树的构建远远慢于js代码的执行速度
真正的渲染慢于dom树的构建
88.clientWidth是内边距加宽度
offsetWidth是内边距加宽度加边框
89.绝对定位–app的margin-box顶到wrap的padding-box
js中的相对位置拿的是元素的border-box的相对位置
Js中的offsetLeft和offsetTop是元素的border-box到元素的offsetparent的距离
绝对定位横向上的所有盒模型属性之和+left+right=padding-box的宽度
绝对定位纵向上的所有盒模型属性之和+top+bottom=padding-box的高度
90.Width和height的默认值为auto
margin和padding的默认值为0
91.V8引擎来解析JS代码
而且V8是单线程的（一个时间点只能执行一个任务）
JS代码在浏览器中只有V8引擎能够解析
92.想实现ECMA规范必须设置个全局对象,这在浏览器中就是window
93.top和window都是只读属性,所以平常不要定义这两变量
Absolution：元素会脱离文档流，定位是相对于离它最近的且不是static定位的父元素而言，若该元素没有设置宽度，则宽度由元素里面的内容决定，且宽度不会影响父元素，定位为absolution后，原来的位置相当于是空的，下面的的元素会来占据。
Relative：元素仍处于文档流中，定位是相对于原本自身的位置，若没有设置宽度，则宽度为父元素的宽度，该元素的大小会影响父元素的大小。
所有的显示原型可以被看做成一个空对象
！--------------------------
学完的一些想法和总结:JS的基础部分，主要就是学ECMA5和DOM操作，
比较吃逻辑能力和编程能力,代码敲的越多越好,踩的坑越多越好，学到这还没到劝退人的时候，dom操作有一些经典的案例和练习,比如什么拖拽，选项卡，感觉就是对一系列操作进行逐层分析,比如你鼠标点下去,移动,松开等等都要有分析过程。还有几个常用的API,看API就找MDN网站,什么offsetwidth(有边框),clientwidth(无边框),getBoundingRectleft(与视口的距离)等等等，还有简单的知道下闭包和原型链,还有很多的经典面试题,就比如变量和函数执行时,会上升,执行的先后顺序，学到这,明白了IE这个浏览器678老版本不跟着标准走,兼容问题必须有,不支持dom2的一些API，基础是最重要的，嗨，加油吧!(泪目)