js历史

是基于事件和对象驱动的解释性，松散型的语言

解释性：由浏览器解释执行

松散型：变量可以用来保存任何类型的数据

• 布兰登艾奇
• 引入方式
  • 外链js
  • 内嵌js
  • 重定向
• 测试方式
  • alert()
  • console.log()
  • document.write()
• 组成部分
  • ECMAscript ,基础语法
  • BOM 浏览器对象模型
  • DOM 文档对象模型
• 作用
  • 写网页的动态效果
  • 写网页的游戏
  • 使用cookie、sessicon
  • 实现交互
  • 发送表单form
  • 发送ajax
  • ......

ECMAscript

变量 值和址

就是计算机内存里的一块地址单元，为了存储数据

• 变量的定义
  • var let const

 var nub,nub1;
 nub=200;

 var nub=200,nub1='123';
 
 const PI=3.14;
 const arr = [1]
 arr.push('1')

• 命名方式
  • 可以用数字、字母、下划线、$ 构成 ,不能以数字开头
  • 不能是关键字或保留字
  • 可以用首字母大写，或驼峰命名法来命名
  • 严格区分大小写
  • 命名要有意义
• 存储
  • 存储在栈区
  • 可以存储任何的数据类型

数据类型

根据存储位置不同来划分

基础数据类型的值一般存储在栈区 传值

引用数据类型的值一般存储在堆区，地址（引用） 存储在栈区 传址

基础数据类型：

Number    string    boolean      null     undefind     symbol

undefined

undefined == null //true

• 一个变量，只声明，不赋值，默认值就是undefined
• 一个对象，没有某个属性，这个属性就是undefined
• 数组某个位置没有值，也是undefined
• 函数的参数不传值，默认传undefined
• 函数返回值，默认返回undefined

• 引用类型
  • 数组 array
  • 函数 function
  • 对象 object

typeof      //number   string     boolean     object    function

instanceof    检测某一个对象是否是某一个构造函数的实例   一般用于检测引用类型    例如：//Array

`` 模板字符串

var nub1 = 5
var nub2 = 40
console.log(`我们班${nub1 + nub2} 人,男生${nub2}人`)
console.log('我们班'+ (nub1 + nub2) + "人，男生" + nub2 + '人')

运算符

• 算术运算符
  • + 字符串相加表示连接，相加后变成字符串
  • % 不对小数取余数
  • ++ -- 分先后，+在前和在后不同，如果存在赋值的情况，+在前，先+，后赋值，反之相反。但是不论是在前还是在后，这个运算的变量结果都会+1

  // Number()  不能转换undefined   // NaN
  // 调用 Number()顶层函数进行隐式转换   
  console.log(true + false)   // 1
  console.log(null + 1)  // 1
  console.log(undefined + 1) // NaN

• 逻辑运算符 结果不一定是boolean类型值，只要运算停留在什么位置，结果就是什么。 但是&& ,要求运算两边都得满足，|| 两边只要满足一个就行。只要这个运算能够计算出结果，立即停止运行。

* &&
* ||
* !    非(!)运算结果一定是boolean类型值

  true && 1   // 1
  true || 1   // true
  null && false // null
  1 && 2    // 2
  
  !!1   //  boolean() 函数
  

• 比较运算符
  • 字符串进行比较的时候，比较ascii码值大小
  • undefined==null 为真
  • == === 全等需要比较类型

console.log('abc' == 'acb')    // false
console.log(true > 1)   // false
console.log(true == 1)   // true
console.log(true === 1)    // false   ===  检测类型

• 特殊运算符 三元

  • 特殊运算符

    • new 用来创建对象
    • delete 用来删除对象的属性
    • typeof 用来检测基础数据类型

  • 三元 （赋值——有条件的赋值）

    • var a=表达式? a:b 主要用来赋值

      var nub = 3 ? new Array() : new Object()
      console.log(nub)     // []
      
      var nub = document.body.scrollTop ? document.body : document.documentElement
      

  • instanceof 用来检测某个对象是否是某个构造函数的实例 比如用来检测Array

ASCII 美国标准信息交换码 EASCII 欧洲标准 gb2312 国标 =>> gbk（微软）（扩展【繁体字、少数民族字】）

uncode(通用) 传输方式（utf-8）

0 48 a 97 A 65 上 回车

流程控制

当满足某个条件的时候，按照一定顺序执行的代码

• 顺序结构
• 条件结构

  • if

  • switch 通常用来判断单个值 枚举

    var nub = 1
    switch (nub) {
          case 1: 
              console.log(1)
              console.log(1)
              console.log(1)
              console.log(1)
           break;
          case 2:
              console.log(2)
              console.log(2)
              console.log(2)
           break;
          default : ;
    }              // 1 1 1 1
    

    ​

• 循环结构

  • for

  • while

    var arr = []
    while(arr.length < 20) {
      arr.push(1)       //隐式的步径值
    }
    

  • do while

   ```js
  var arr = []
  do() {
    arr.push(1)       //隐式的步径值
  } while(arr.length < 0)   // arr = [1]
   ```

​

数组

数组就是一系列有直接或者间接联系的数据的集合

• 声明方式

  • var arr=[];
  • var arr=new Array();

• 访问方式和设置方式

  • arr[1]
  • arr[1]=123;
  • arr['1']
  • arr['length']
  • arr.length

• 数组遍历

  • for
  • foreach
  • for in

• 二维数组

  一维数组的值都是数组的时候

  循环遍历 for for

var arr = ['a']
console.log(arr['length'])
console.log(arr.length)

// 数据的length属性很有特点——它不是只读的。可以通过设置这个属性，从数组的末尾移除项或向数组中添加新项

//js可以使用方括号表示法来访问对象的属性。
//在使用方括号语法时，应该将要访问的属性以 【字符串的形式】 放在方括号中

//使用方括号语法的主要优点是可以通过变量来访问属性                  

两个数组链接
return [...arr1,...arr2]

函数

将实现某一特定功能的代码块，封装起来，以便重复使用

• 函数的定义

  • function // 关键字定义function的方式
  • var fun=function(){} 字面量(匿名函数赋给变量)
  • var fun=new Function(){} 不常用

• 函数的调用 （一个函数如果不调用，那么永远也不会执行）

  • 函数名字或者是变量名字() fun()
  • 匿名函数的自运行 (function(){})()

• 函数的参数

  函数的参数相当于一个局部变量，可以接受任何类型的值，不论是引用数据类型还是基础数据类型

  • 形式参数和实际参数 函数在定义时候的参数，函数在运行时的参数
  • 形式参数和实际参数的个数可以不相同，如果一个形式参数没有被传参，默认传递undefined,如果一个实际参数，没有相应的形式参数接收 ，我们可以使用arguments ,会默认的接受所有传递的实际参数。
  • 函数的形式参数可以接受任何类型的数据，不论是引用类型还是基础数据类型
  • 函数的形式参数其实相当于定义的局部变量
  • 函数的参数就是封装的接口

function fun() {
  consloe.log(arguments[0])  //
}
var nub1 = 200
var nub2 = 300
fun(nub1, nub2)

    function fun(nub1, nub2 = '123') {
      console.log(nub2)  //null
    }
    var nub1 = 200
    var nub2 = 300
    fun(nub1, null)

    function fun(nub1, nub2 = '123') {
      console.log(nub2)  //'123'
    }
    var nub1 = 200
    var nub2 = 300
    fun(nub1, undifined)

• 函数的返回值
  • 任何一个函数，在运行结束后，都会返回一个值，默认是undefined
  • 函数只能有一个返回值，但是可以有多条返回语句
  • 函数一旦返回，立即停止运行
  • fun() 这是一个表达式，表达式的值是函数的返回值
  • 函数什么时候需要返回？当我们需要用到内部的局部变量的时候，我们可以将这个变量的值返回、或者终止函数运行。

var sum=function(a,b){
    var he=a+b;
    return he;
}
var num=sum(1,2); 
console.log(num)   //3

• 函数的作用域和作用域链

作用域指的是变量或者是函数在某个范围内有意义。

当一个函数嵌套另外一个函数，作用域发生嵌套，就会形成作用域链 。
在一个函数运行时候，会自动的创建一个集合，用来保存可见范围内所有的变量或者是对象。这个集合就是作用域链。

• 环境
  • 宿主环境 （浏览器）
  • 运行环境
    • 全局环境 window 全局变量
    • 局部环境 函数环境 局部变量
    • 块级作用域
• 全局变量 拥有全局的作用域 在任何位置都可以访问到 在window里面都有意义
• 局部变量 拥有局部的作用域，只能在当前环境中访问 只在当前的函数环境中有意义

var nub=200;
function fun(){
    var nub=300;
    console.log();
}
fun();
console.log(nub);

• 预解析

在程序开始运行之前，js会将以var 声明的变量和以function关键字声明的函数，提前解析到相应的环境中。

预解析是分块解析的，但是所有的script标签对又是一个整体，已经加载的script里面的内容，可以在后面的script里面访问

console.log(nub);
var nub=200;
console.log(nub);

• javascript 垃圾处理

  找出那些不再使用的变量，然后释放其占用的内存。为此，垃圾收集器会按照固定的时间间隔（或代码执行中预定的收集时间），周期性地执行这一操作。

  • 当函数运行完毕之后，内部的局部变量会立即被清除
  • 当一个对象，不再被引用的时候，会在某一个时刻被删除
  • 垃圾的收集方式：

  标记清除：（常见）

  垃圾收集器在运行的时候会给存储在内存中的所有变量都加上标记（当然，可以使用任何标记方式）。然后，它会去掉环境中的变量以及被环境中的变量引用的变量的标记。而在此之后再被加上标记的变量将被视为准备删除的变量，原因是环境中的变量已经无法访问到这些变量了。最后，垃圾收集器完成内存清除工作，销毁那些带标记的值并回收它们所占用的空间

  引用计数：（不常见）

  跟踪记录每个值被引用的次数。当声明一个变量并将一个引用类型值赋给该变量时，则这个值的引用次数就是1。如果同一个值又被赋给另一个变量，则该值的引用次数加1。相反，如果包含这个值引用的变量又取得另外一个值，则这个值的引用次数减1。当这个值的引用次数变成0时，则说明没有办法再访问这个值了，因而就可以将其占用的内存空间回收回来。这样，当垃圾收集器下次再运行时，他就会释放那些引用次数为0的值所占用的内存

• 闭包

当一个函数嵌套另外一个函数，在内部函数中用到了外部函数的局部变量，在函数外部去访问内部函数的时候，就形成了闭包

function aa(){
    var nub=200;
    function bb(){
         console.log(nub);
    }
    return bb;
}
var fun=aa();
  fun()  //  200 

// 按照垃圾处理，aa运行结束的时候，内部的200应该是被清除。但是这是时候，将bb函数返回，在外部调用的时候，会用到nub这个局部变量，js会将这个变量保留下来。
  

• 匿名函数自运行

(function () {
    alert(1);
})()

• 回调函数

当函数的参数传递是函数的时候，这个函数就是回调函数 //当一个函数作为另一个函数参数的时候

function fun(a, b, fn) {
    fn(a, b)
}
fun(1, 3, function () {
    console.log(a * b)
})      // 3

• 递归函数

当一个函数自己调用自己的时候，就形成了递归

// 阶乘  5！  n!
function jie(n) {
  if (n == 0) {
    return = 1
  }
  return n * jie(n - 1)
}

// 费波那契  1 2 3 5 8 13 ... n
function fei() {
  if (n == 1) {
    return 1
  }
  if (n == 2){
    return 2
  }
  return fei(n - 1) + fei(n - 2)
}
// 深拷贝和浅拷贝
// var arr=[[1,[]],[1,2],["a","b"]]

• 箭头函数

  var arr = []
  var result = arr.map (value => value + 'new')
  

• 内置顶层函数

Nubmer() String() Boolean() parseInt() parsefloat()

// 做算术运算隐式调用Number函数
console.log(1 - true)  //0
console.log(1 - undefined)  //NaN
console.log(1 - null)   //1


// 做比较运算隐式调用Number函数
console.log(1 > true)  //false
console.log(null == undefined) //true     特殊情况
console.log(null == false) //false      特殊情况

// 做布尔运算隐式调用Boolean函数

对象

人们研究的一切事物都可以称之为对象

类和对象

将一些具有某些特性的对象的特征抽象起来就形成类
类也可以作为对象 的判别，也可以用来创建对象

类是对象的抽象 对象是类的实例化

• 对象的创建

  • var obj={}

    //以json格式去创建对象
    var obj = {
        name: 'lisi',
        age: 23,
        fun: function () {
            alert(1)
        }
    }
    obj.weight = '70kg'
    var str = 'name'
    console.log(obj)
    

  • var obj=new 构造函数()

    //构造函数提供对象的初始化
    function Person(name, age) {
        this.name = name;
        this.age = age
    }
    

  • var obj= new Object()

• new 发生了三件事情

1.创建一个空对象  obj
2.让obj._proto_ == Person.prototype
3.Person.call(obj)

• 对象的属性和方法
  • 对象的一些特征，抽象之后，我们叫做属性
  • 如果这个属性的值是一个函数，我们叫做方法

var obj={
    name:'lisi',
    age:123,
    fun:function(){
        
    }
}
console.log(obj.name)
console.log(obj['name'])
obj.index=1;
obj['index']=1;
obj.fun();

• 构造函数和普通函数区别
  • 构造函数是为了提供对象的初始化
  • 构造函数一般不用定义返回值
  • 构造函数内部会使用this
  • 都是new 构造函数
• 继承
  主要是在实例化也是new 的时候
  obj.proto=构造函数.prototype

 var obj=new person();
 person.prototype={
     aa:function(){
     }
 }
 每个对象都有__prototype__ 属性    每个函数都有prototype属性   

• 对象的分类

  • 宿主对象
  • 内置对象

• call()和apply()

  每个函数都有call()和apply()方法

• this

  谁调用this就指向谁

数组方法

pop,push,reverse,shift,sort,splice,unshift 会改变原数组

join,concat,indexOf,lastIndexOf,slice,toString 不会改变原数组

map,filter,some,every,reduce,forEach这些迭代方法不会改变原数组

字符串

Math

BOM

window属性和方法

• window.screen.width // 屏幕宽度
• window.screen.height // 屏幕高度
• alert()
• prompt()
• top
• 时间函数
  • setInterval
  • clearInterval()
  • setTimeout
  • clearTimeout()

location

• protocol
• hostname
• port
• search
• hash
• pathname

http: / https:(http加强版，比较安全)
//超文本传输协议

// 协议    主机名+端口号/主机名   端口号   路径 查询字符串  锚地址
location.protocol     location.host/location.hostname      location.port       location.pathname location.search   location.hash

• location.href

  location.href = ("http://baidu.com") //跳转到某个页面
  

• location.reload(true)

  location.reload(true)  //重新加载 所有数据
  

• location.assign()

  location.assign('http://baidu.com') //跳转到某个页面
  

• location.replace()

  location.replace('http://baidu.com')  //不会留下历史记录
  

history

• length
• back() // 上一个页面
• forword() //下一个页面
• go(n) // go(0) 刷新

http: 
https：(http加强版，比较安全)
超文本传输协议
网络传输协议

TCP/IP     7层协议      网络层    
www.aebabs.com：80（端口号）(path) index.html?查询     域名   主机地址

DOM

文档操作

获取设置文档信息

• document.url
• document.title

获取宽高

如果一个块元素如果不设置宽度，默认宽度是它父元素的宽度，默认高度是它内容的高度

• window.screen.width //屏幕宽度

• window.screen.height //屏幕高度

• document.documentElement.clientWidth //获取浏览器窗口宽度

• document.documentElement.clientHeight //获取浏览器窗口高度

• ele.offsetWidth // 实际宽高 不包括margin

• offsetHeight

• offsetLeft

• offsetTop

  计算的是距离有定位属性的上级元素的距离，如果没有定位属性的父元素，计算的是距离body的值

获取元素

• document.getElementById()
• obj.getElementsByClassName()
• obj.getElementsByTagName()
• document.getElementsByName()
• obj.querySelector()
• obj.querySelectorAll()

对于元素内容的操作

• innerHTML
• inenrText

对于元素属性的操作

获取属性

• 标准属性 obj.src
• getAttribute()

设置属性

• setAttribute(key, value)

• 非标准 get set
• class obj.className
• class obj.classList.add .remove .toggle

对于元素的样式操作

• 获取

  • getComputedStyle(obj,null).属性 / obj.currentStyle.样式 IE
  • 行内样式 obj.style.属性

• 添加

  • obj.style.css属性
  • obj.style.cssText

• 通过类名或者是id名，属性名字进行设置

  ​

事件

事件冒泡

事件流

定义： 当一个事件触发的时候，当前元素的父元素乃至整个页面都会以一定的顺序来响应事件，响应的顺序叫做事件流

• 冒泡型事件流

  从当前元素开始向上级进行冒泡触发

• 捕获型事件流 (IE低版本没有)

  从根元素开始向当前元素进行触发

• mouseenter mouseleave 事件没有事件冒泡4

• 阻止事件流

  • e.stopPropagation() || e.returnValue = false [万恶的IE]

var par = document.querySelector('.par')
    var son = document.querySelector('.son')
    var body = document.querySelector('body')
    var html = document.querySelector('html')
    par.onclick = function () {
        console.log(1)
    }

    html.addEventListener('click', function () {
        console.log('html捕获')
    }, true)
    body.addEventListener('click', function () {
        console.log('body捕获')
    }, true)
    par.addEventListener('click', function () {
        console.log('par捕获')
    }, true)
    son.addEventListener('click', function () {
        console.log('son捕获')
    }, true)
    html.onclick = function () {
        console.log('html冒泡')
    }
    body.onclick = function () {
        console.log('body冒泡')
    }
    par.onclick = function () {
        console.log('par冒泡')
    }
    son.onclick = function (e) {
        // 阻止事件流
        if (e.stopPropagation) {
            e.stopPropagation()
            e.preventDefault()
        } else {
            e.cancelBubble = true;
            e.returnValue = false
        }
        console.log('son冒泡')
}
    //html捕获  body捕获   par捕获   son捕获  son冒泡

事件委托

利用事件冒泡，对以下几种情况进行处理

1. 新添加进来的元素，需要事件的时候
2. 做事件优化的时候
3. 使用ajax的时候

<body>
    <button>按钮</button>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</body>

var btn = document.querySelector('button')
btn.onclick = function () {
    var div = document.createElement('div')
    div.innerHTML = "new"
    document.body.appendChild(div)
}
// document.body.onclick = function () {
//  alert(1)
// }

// 目标事件源： 真正触发事件的元素
document.body.onclick = function (e) {
    var obj = e.target
    // console.log(obj)
    //判断
    if (obj.tagName == 'DIV') {
        obj.style.background = "blue"
    }
    // if (obj.nodeName == "DIV") {
    //  obj.style.background = "blue"
    // }
}

事件

文档节点

html文档中，所有的构成部分都是节点，每一个节点和节点之间的关系构成了整个html文档树模型

节点的操作

节点的创建

• obj.createElement()

节点的增加

• par.appendChild()
• sib.insertBefore(newEle, oldEle)

节点的删除

• par.removeChild(son)

节点的复制

• obj.cloneNode(true) //true决定子元素是否被克隆

节点的替代

• par.replaceChild(newEle, oldEle)

获取节点

获取父元素

• son.parentNode //获取父节点
• son.parentElement //获取父节点

获取父辈的子元素

• childNodes; //获取所有的节点
• div.children； //获取所有元素节点
• par.firstChild; //获取第一个节点
• par.lastChild; //获取最后一个节点
• par.firstElementChild; //获取第一个元素节点
• par.lastElementChild; //获取最后一个元素节点

获取同辈的相近元素

• sib.previousSibling; //前一个节点
• sib.previousElementSibling; //前一个元素节点
• sib.nextSibling; //下一个节点
• sib.nextElementSibling; //下一个元素节点
• insertAfter(newobj,oldobj)

    function insertAfter(newobj,oldobj){
        var next=oldobj.nextSibling;
        if(next){
            oldobj.parentNode.insertBefore(newobj,next)
        }else{
            oldobj.parentNode.appendChild(newobj);
        }
    }

Ajax

html: 超文本标记语言

xhtml: 过渡 版本

xml: 可扩展标记语言

<clothes>
  <color>red</color>
</clothes>

版本控制工具

svn：集中式管理工具

git：分布式管理工具

git clone

git pull (多人协作)

将修改提交到暂存区

git add/*

将暂存区的文件更新到本地的仓库

git commit -m '更新说明'

将本地仓库和网络仓库进行合并同步

git push

语义化

img email url number 表单的属性

viedio

canvas 用js作图的技术，帮助我们快速渲染页面，降低

websokit

拖拽

formdata

filereader

变量 let

块级作用域

函数

赋值 结构赋值

运算符 扩展运算符

类

导入导出

获取元素的方式

方法