汇编语言：汇编语言、高级语言
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即/时编译型的编程语言。
三大特点：继承 封装 多态

js数据类型

js数据类型转化

| Number() | 将字符串转化为number类型> parseInt(string) 转换为整数值型

parseFloat(string) 转换为浮点数值型

| | —- | —- | | String() | 将所有类型转化为字符串类型> toString()

String() 加号拼接字符串+’’

| | Boolean() | 将所有类型转化为布尔类型 | | 自动转化类型 | 你不需要调用js封装好的方法直接可以转化我们数据类型 | | JSON.stringify() | 将 JavaScript 值转换为 JSON 字符串 | | JSON.parse() | 将其转换为 JavaScript 对象： |

js运算符

js流程控制

顺序结构
分支结构
switch语句

var day=prompt('请输入1~7一个数字');
switch(day) {
    case 1: 
        console.log('星期一');
        break;
    case 2:
        console.log('星期二');
        break;
    case 3: 
        console.log('星期三');
        break;
    case 4:
        console.log('星期四');
        break;  
    case 5: 
        console.log('星期五');
        break;
    case 6:
        console.log('星期六');
        break; 
    case 7: 
        console.log('星期日');
        break;
    default: 
        console.log('请输入1-7之间的任意数字');
}

js循环语句

for循环 while循环 do…while循环

while循环

var message = prompt('你爱我吗？');
while (message !== '我爱你') {
      message = prompt('你爱我吗？');
}
alert('我也爱你呀~')

do…while循环

do {
//循环体
} while (条件表达式)
//do while 先执行一次循环体，再判断条件，若结果为真，则继续，否则退出
注意：先执行，再判断，至少会执行一次循环替代码

js数组

Array数组声明 三种：

1.使用new Array var arr=new Array(10,20,true);

2.可以省略new关键字 var arr=Array(10,20,true);

3.直接赋值 var arr=[10,20,true];

数组方法：

遍历对象

for (var k in obj) {
    console.log(k);
    console.log(ibj[k]);
}
//我们使用for in里面的变量 我们喜欢写 k 或者 key

删除对象属性

delete 属性名;

js内置对象和方法

1.Math对象

2.字符串的方法

3.Date时间对象

日期类型使用自UTC(国际协调时间)1970年1月1日午夜(零时)开始经过毫秒数来保存的
1 创建对象
new Date() // 创建日期对象
Date() 日期对象 是一个构造函数 必须使用new来调用我们的日期对象

2 Date对象的方法

3 日期格式化（将毫秒数数转化为时间）
只能在date对象中使用
使用前先声明一个新的date
var date2 = new Date(1000000+ 2000000);

时间戳（总的毫秒数） 返回1970年1月1日至今的毫秒数

方法1 var date = new Date(); console.log (date.valueOf()); console.log (date.getTime());

方法2 （常用） var date = +new Date(); console.log(date);

方法3 (H5新增的) console.log(Date.now());

var date = new Date(); 如果没有参数 返回系统的当前时间 var date = new Date(2019,10,10); （返回的是11月 多了一个月） var date = new Date(‘2019-10-10 8:8:8’); （月份正常打印） 返回括号内的时间

//封装一个  时:分:秒
function getTime() {
    var date = new Date();
    var h = date.getHours();
    h = h < 10 ? '0' + h : h;
    var m = date.getMinutes();
    m = m < 10 ? '0' + m : m;
    var s = date.getSeconds();
    s = s < 10 ? '0' + s : s;
    return h + ':' + m + ':' + s;
}
console.log(getTime());

DOM

文档对象模型
文档：document
元素：element
节点：node

获取元素

1.根据ID获取 [不用]

document.getElementById(‘time’);

2.根据标签名获取 [不用]

document.getElementsByTagName(‘li’);

3.通过类名方法获取（HTML5新增的）

document.getElementsByClassName(‘类名’); 里面的选择器需要加符号，只能返回第一个元素对象↓ document.querySelector(‘.box’); document.querySelectorAll(‘.box’);

4.特殊元素获取

document.body;

document.documentElement;

操作元素

| 改变元素内容 | > element.innerText [不用这个]

不识别html标签 非标准 p.innerText获取元素内容，不保留html标签，并且变为一行

element.innerHTML 识别html标签 W3C标准 p.innerText获取元素内容，保留html标签和换行和空格

| | —- | —- | | 常用元素的属性操作 | 1.innerHTML 改变元素内容
2.src、href
3.id、alt、title | | 表单元素的属性操作 | type
value
checked
selected
disabled
input.value=’被点击了’;
btn.disabled=true; 禁用按钮1
this.disabled=true; 禁用按钮2 指向函数的调用者 | | 循环显示操作 | var flag=0; | | 样式属性操作 | 通过JS修改元素的大小、颜色、位置等操作
1.element.style 行内样式操作
2.element.className 类名样式操作 | | 注意：
1.如果修改样式比较多，可以采取操作类名方式更改元素样式
2.class因为是个保留字，因此使用className来操作元素类名属性
3.className 会直接更改元素的类名，会覆盖原先的类名。 | |

获取/设置 属性

自定义属性以data-开头 并且赋值
如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法

节点操作（利用节点层级关系获取元素）

操作元素节点的属性

获取data-自定义属性值有两种形式

我们想要页面添加一个新的元素：1.创建元素 2.添加元素

三种动态创建元素区别

1.document.write 是直接将内容写入页面的内容流，页面会重绘
2.innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘
3.innerHTML 创建多个元素效率更高（不要拼接字符，采取数组形式拼接），结构稍微复杂
4.createElement() 创建多个元素效率稍低一点点，但是结构更清晰
总结：不同浏览器下，innerHTML数组形式拼接效率要比 creatElement 高

元素可视区client系列

DOM重点核心

利用节点操作获取元素：

属性操作：

事件操作：

value.substring ( this.selectionStart,this.selectionEnd ) 选中

注册事件

addEventListener( )
btn[0].addEventListener(‘click’,function( ) {})

删除事件

传统：
div[0].onclick=null
监听事件：
function fn() {
alert(‘111111’)
}
div[1].removeEventListener(‘click’,fn);

DOM事件流

1.捕获阶段
2.当前目标阶段
3.冒泡排序
注意
1.JS代码中只能执行捕获或者冒泡其中的一个阶段
2.onclick和attachEvent只能得到冒泡阶段
3.捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段 →从大到小
冒泡阶段 如果addEventListener 第三个参数是flase 或者 省略 那么则处于冒泡阶段 →从小到大
4.实际开发中我们很少使用事件捕捉，我们更关注事件冒泡
5.有些事件没有冒泡的，比如：onblur、onfocus、onmouseenter、onmouseleave
6.事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事。

事件对象

div.onclick=function(e) {
console.log(e)
}

监听事件
div.addEventListener(‘click’,function(e) {
console.log(e)
} , false); 冒泡

事件对象常见属性和方法

事件委托

title.addEventListener('click', function (e) {
    var current = document.querySelector('.current');
    current.classList.remove('current');
    e.target.classList.add('current');
})

鼠标事件对象

常用键盘事件

键盘事件对象

console.log(e.key) 打印出按下了什么键

注意：onkeydown 和 onkeyup 不区分字母大小写，onkeypress区分字母大小写。
实际开发中，我们更多的使用keydown和keyup，他能识别所有的键（包括功能键）
Keypress不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCll值

立即执行函数

BOM

浏览器对象模型

window对象

window对象的属性

window对象方法

window.alert ( )
window.open ( )
用于打开一个新的浏览器窗口或者查找一个已命名的窗口
window.open(url,name,specs,replace)

url 可选 打开指定的页面的url链接 如果没有指定的url 打开的是空白窗口 _blank-URL 加载到一个新的窗口 _parent-URL 加载带一个新的窗口 _self-URL 替换当前的页面 _top-URL 替换任何的框架 name 窗口的名称 specs 可以选 一个逗号分隔的项目列表 replace 是在窗口浏览器历史中创建一个新条目 还是替换浏览器 true 替换浏览器历史中的创建新的条目 false 在浏览器历史中创建新的条目

window.close ( ) 关闭浏览器窗口
window.confirm ( ) 显示带有一短消息以及确认按钮和取消按钮的对话框
window.prompt ( ) 显示可提示用户输入的对话框 返回用户输入的字符串

peompt(msg,defaultText) 两个参数: msg 可选 要在对话框中显示的纯文字 defaultText 可选 默认的输入文本

元素偏移量offset系列

scroll系列属性

window.scrollTo ( )

可以把内容滚动到指定的坐标
 scrollTo（x,y）

两个参数： x 必填 要在窗口文档显示区左上角显示的文档的x坐标 y 必填 要在窗口文档显示区左上角显示的文档的y坐标

窗口加载事件

window.onload=function() {

};

---

window.addEventListener(‘load’,function( ) {

}); 用了这个script可以放在任意位置

document.affEventListener(‘DOMContentLoaded’,function() { } );
注意：
1.window.onload可以放在任意位置
2.window.onload传统注册事件只能写一次
3.addEventListener则没有限制
DOMContentLoaded是DOM 加载完毕，不包含图片 falsh css等就可以执行 加载速度比load更快一些

调整窗口大小事件

window.onresize = function( ) { } window.addEventListener(“resize”,function() { } );

window.innerWidth 窗口的宽度

定时器

function fn() {
    console.log('时间到');
}
var timer1 = setTimeout(fn, 1000);
var timer2 = setTimeout(fn, 2000);

//--------------------------------------------

setTimeout(function () {
    console.log(22222222);
}, 1000);

同步和异步·

事件循环
先处理console.log( );
再处理function ()

vavigator对象

下列前端代码可以判断用户在哪个终端打开页面，实现跳转

if((navigator.userAgent.match(/(phone|pad|iPhone|iPod|ios|iPaAndroid|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fenner|wOSBrowseBrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = "";    //手机
} else {
    window.location.href = "";    //电脑
}

本地存储

1、数据存储在用户浏览器中
2、设置、读取方便、甚至页面刷新不丢失数据
3、容量较大，sessionStorage约5M、localStorage约20M
4、只能存储字符串，可以将对象SON.stringify( )编码后存储

var username = document.querySelector('#username');
var remember = document.querySelector('#remember');
if (localStorage.getItem('username')) {
    username.value = localStorage.getItem('username');
    remember.checked = true;
}
remember.addEventListener('click', function () {
    if (this.checked) {
        localStorage.setItem('username', username.value)
    } else {
        localStorage.removeItem('username')
    }
})

正则表达式

正则表达式的特点
1.灵活性、逻辑性和功能性非常的强。
2.可以迅速地用极简单的方式达到字符串的负责控制。
3.对于刚接触的人来说，比较晦涩难懂。 比如：^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$
4.实际开发中，一般都是直接复制写好的正则表达式，但是要求会使用正则表达式并且根据实际情况修改正则表达式。比如用户名：\^[a-z0-9_-]{3,16}$/

量词符 用来设定某个模式允许出现的次数

节流阀

为了防止轮播图连续点击造成播放过快
节流阀目的：当上一个函数执行完毕，再去执行下一个函数动画，让事件无法连续触发。
核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数。
开始设置一个变量var flag=true;
if(flag){flag=false;do something} 关闭水龙头
利用回调函数 动画执行完毕，flag=true 打开水龙头

animate(ul,num,function() { flag=true; }) var flag=true; if(flag) { flag=false; }

常见网页特效案例

window.pageYOffset 得到页面滚动的值
window.scroll(x,y) 最后是页面滚动
窗口滚动 所以对象时window
animate(window,0);

构造函数和原型

原型：原型是一个对象，我们也称为prototype为原型对象。
原型作用：共享方法。
一般情况下，我们公共属性定义到函数构造里面，公共的方法我们放到原型对象身上。

构造函数方法很好用，但是存在浪费内存的问题

function Star(uname,age) {
    this.uname=uname;
    this.age=age;
    this.sing=function() {
    console.log('我会唱歌');
    }
}
var ldh=new Star('刘德华',18);
var zxy=new Star('张学友',19)

构造函数原型 prototype

构造函数通过原型分配的函数是所有对象所共享的。
JavaScript规定，每一个构造函数都有一个prototype属性，指向另一个对象。注意这个prototype就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有。
我们可以把那些不变的方法，直接定义在prototype对象上，这样所有对象的实例就可以共享这些方法。

function Star(uname,age) {
    this.uname=uname;
    this.age=age;
}
Star.prototype.sing=function() {
    console.log('我会唱歌');
}
var ldh=new Star('刘德华',18);
var zxy=new Star('张学友',19)
ldh.sing();
zxy.sing();

对象原型proto

对象都会有一个属性proto指向构造函数的prototype原型对象，之所以我们对象可以使用构造函数prototype原型对象的属性和方法，就是因为对象有proto原型的存在。

方法的查找规则：首先先看ldh 对象身上是否有sing方法，如果有就执行这个对象上的sing，如果么有sing 这个方法,因为有proto的存在，就去构造函数原型对象prototype身上去查找sing这个方法

constructor构造函数

对象原型(proto)和构造函数（prototype)原型对象里面都有一个属性constructor属性，constructor我们称为构造函数，因为它指回构造函教本身。
constructor主要用于记录该对象引用于哪个构造函数，它可以让原型对象重新指向原来的构造函数。

function Star(uname,age) {
    this.uname=uname;
    this.age=age;
}
Star.prototype={
  constructor:Star,
  sing:function(){
      console.log('我会唱歌');
  },
  move:function() {
        console.log('我会演电影');
  }
}
var ldh=new Star('刘德华',18);
var zxy=new Star('张学友',19)
ldh.sing();
zxy.sing();

//如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动的利用constructor指回原来的构造函数

构造函数、实例、原型对象三者之间的关系

原型链

JavaScript的成员查找机制(规则)

①当访问一个对象的属性(包括方法)时，首先查找这个对象自身有没有该属性。②如果没有就查找它的原型（也就是proto指向的prototype原型对象)。
③如果还没有就查找原型对象的原型(Object的原型对象)。
④依此类推一直找到Object为止 ( null ) 。

Star.prototype.sex=’女’；
Object.prototype.sex=’男’;
ldh.sex=’男’；

原型对象this指向

原型对象函数里面的this 指向的是实例对象 ldh

扩展内置对象

console.log(Array.prototype);

//创建一个求和的
Array.prototype.sum=function( ) {
     var sum=0;
     for (var i=0;i<this.length;i++) {
     sum+=this[i];
   }
   return sum;
}
var arr=[1,2,3];
console.log(arr.sum( ));

可以通过原型对象，对原来的内置对象进行扩展自定义的方法。比如给数组增加自定义求偶数和的功能。
注意∶数组和字符串内置对象不能给原型对象覆盖操作Array.prototype ={}，只能是Array.prototype.xxx = function(){}的方式。

继承

ES6之前并没有给我们提供extends继承。我们可以通过构造函数+原型对象模拟实现继承，被称为组合继承

call（）

调用这个函数，并且修改函数运行时的this指向 fum.call（thisArg，arg1，arg2，…） ● thisArg：当前调用函数this的指向对象 ● arg1，arg2：传递的其他参数

function fn( x,y ) {
     console.log('测试打印内容')；
}
fn.call( );
var o={
     name:'andy';
}
fn.call(o，1,2);
//可以改变这个函数的this指向 此时这个函数的this就指向o这个对象

借用构造函数继承父类型属性

核心原理∶通过call)把父类型的this指向子类型的this，这样就可以实现子类型继承父类型的属性。

// 借用福构造函数继承熟型
// 1.父构造函数
function Father(uname, age) {
    this.uname = uname;
    this.age = age;
}
// 2.自构造函数
function Son(uname, age,score) {
    Father.call(this, uname, age);
}
var son = new Son('刘德华', 18,100);
console.log(son);

借用构造函数继承父类型方法

// 借用福构造函数继承熟型
// 1.父构造函数
function Father(uname, age) {
    this.uname = uname;
    this.age = age;
}

function Son(uname, age,score) {
   //this指向子构造函数的对象实例
    Father.call(this, uname, age);
    this.score=score;
}
//Son.prototype=Father.prototype;这样直接赋值会有问题，如果修改了子原型对象，父原型对象也会跟着一起变化
Son.prototype=new Father();
//如果利用对象的形式修改了原型对象，别忘了利用constructor指回原来的构造函数
Son.prototype.constructor=Son;
//这个是子构造函数专门的方法
Son.prototype.exam=function(){
console.log('孩子要考试');
}

var son = new Son('刘德华', 18,100);
console.log(son);

ES5中的新增方法

ES5中给我们新增了一些方法，可以很方便的操作数组或者字符串，这些方法主要包括:

数组方法
1.把数据渲染到页面中（forEach）
2.根据价格显示数据（filter）
3.根据商品名称显示数据
如果查询数组中唯一的元素，用some方法更合适。

过滤空格

trim（） 从字符串的两端删除空白字符

移动端特效

//拖动模块移动

var starX = 0;
var starY = 0;
var x = 0;
var y = 0;
var a1 = document.querySelector('.a1');
a1.addEventListener('touchstart', function (e) {
    startX = e.targetTouches[0].pageX;
    startY = e.targetTouches[0].pageY;
    x = this.offsetLeft;
    y = this.offsetTop;
});
a1.addEventListener('touchmove', function (e) {
    moveX = e.targetTouches[0].pageX - startX;
    moveY = e.targetTouches[0].pageY - startY;
    this.style.left = x + moveX + 'px';
    this.style.top = y + moveY + 'px';
    e.preventDefault();
});

click延时解决方案

解决方案
1.禁用缩放。浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟

2.利用touch事件自己封装这个事件解决300ms延迟。

原理就是︰ 1.当我们手指触摸屏幕，记录当前触摸时间 2.当我们手指离开屏幕，用离开的时间减去触摸的时间 3.如果时间小于150ms，并且没有滑动过屏幕，那么我们就定义为点击

//封装tap，解决click 300ms延时function tap ( obj, callback){
var isMove = false;
var startTime = o; //记录触摸时候的时间变量
obj.addEventListener('touchstart ', function (e) {
    startTime = Date.now(); //记录触摸时间
});
obj.addEventListener('touchmove', function (e) {
    isMove = true;//看看是否有滑动，有滑动算拖拽，不算点击});
    obj.addEventListener('touchend ', function (e) {
        if (!isMove && (Date.now() - startTime) < 150) {//如果手指触摸和离开时间小于150ms算点击callback && callback();//执行回调函数
        }
        isMove = false; //取反重置startTime = 0;
    });
    //调用
tap(div, function () { l / 执行代码 });

3.click延时解决方案

移动端click事件会有300ms的延时,原因是移动端屏幕双击会缩放(double tap to zoom)页面。 解决方案: 使用插件。fastclick 插件解决300ms延迟。

移动端常用开发插件

解决300ms点击延迟 fastclick.js

Swiper轮播图插件

其他移动端常见插件
superslide : http://www.superslide2.com/
iscroll : https://github.com/cubiq/iscroll

前端常用的框架有Bootstrap、Vue、Angular、React等。既能开发PC端，也能开发移动端
前端常用的移动端插件有swiper、superslide、iscroll等。

框架∶大而全，一整套解决方案
插件:小而专一，某个功能的解决方案

检测网络是否链接

//通过window.navigator.onLine 来检测网络是否可用

window.addEventListener("online", function () {
    $(".tips").text("网络已经连接").fadeIn(500).dalay(1000).fadeout();
})
window.addEventListener("offline", function () {
    $(".tips").text("网络断开").fadeIn(500).dalay(1000).fadeout();
})