js培训代码(代码培训学校)

　　1.免费课基础知识

1.页面组成部分

2.js的组成部分(BOM,DOM,ECMA)

3.js引入方式

4.js输出方式

alert(字符串,默认调用toString转为字符串)

console.log/dir

confirm(确定true,取消false)

prompt(有输入框,返回值是你输入的内容)

5.变量

var/function

let/const

命名规范(驼峰命名法;数字大小写字母下划线$但是数字不能作为开头)

数据类型

1.基本数据类型和引用数据类型的区别

number

Number():返回值?数字/NaN

Number("");//0Number(null);//0Number(undefined);//NaNNumber("1px");//NaN

isNaN():返回值?true/false,默认使用的是Number方法转换的

parseInt()

parseInt("");//NaN parseInt(null);//NaN parseInt("1px");//1

parseFloat()

boolean

Boolean()

0,"",NaN,null,undefined是false

! 先转布尔再取反

![],!NaN

!! 转布尔

string

单双引号的问题

var str="I'm a person"

转义

var str='I'm a person';

有length(只读的,不可以修改),有索引

split(指定字符/正则)

replace(指定字符/正则)

slice(n,m)

subStr(n,m)

subString(n,m)

indexOf(字符,index开始查找的索引)

lastIndexOf(字符,index开始查找的索引)

includes(字符,index开始查找的索引)

toUpperCase()

toLowerCase()

match(正则)

search(正则)

concat()拼接

repeat(num)

startsWith()

endsWith()

padStart(length,str)

padEnd(length,str);

解析url问题:var url="https://www.baidu.com/s?wd=马克飞象&rsv_spt=1&rsv_iqid=0xa1571c970005724e&issp=1&f=8&rsv_bp=1&rsv_idx=2";var s=url.split("?")[1];s=s.replace(/=/g,":'").replace(/&/g,"',");eval("({"+s+"'})");回去看一下之前写的几个方法:WEEK2 DAY4 1.正则复习题.html

null,undefined

区别

什么情况会出现 undefined

这俩没有toString方法

null==undefined,跟其他的都不相等

var timer=null;在定义变量的时候暂时不赋值 ,一般会给他一个null

清空一个对象,obj=null

移除DOM0级事件.box.onclick=null;

array

1.length(可以修改的)

2.join(“”)

[1,2,3].join("");//"1,2,3"[1,2,3].toString();//"1,2,3"

3.slice()

4.splice()

5.pop()

6.shift()

7.push()

8.unshift()

9.concat()

10.indexOf()/lastIndexOf()

11.includes()

12.find()/findIndex()

13.filter()

14.forEach()/map()

15.sort()

16.fill()

17.reverse()

18.copyWithIn()

扩展运算符 …

[...ary1,...ary2];var ary=[1,2,3,4]法一eval("Math.max("+ary+")");法二Math.Max.apply(null,ary);法三Math.Max(...ary)

将类数组转为数组

法一function toArray(likeAry){ var ary=[]; for(var i=0;i<likeAry.length;i++){ ary.push(likeAry[i]) } return ary}法二function toArray(likeAry){ return [].slice.call(likeAry); }法三function toArray(likeAry){ return [...likeAry];}法四function toArray(likeAry){ return Array.from(likeAry); }

数组去重

数组方法重写,有回调函数的方法(注意第二个参数是用来改变函数的this的)

对象

键值对组合(属性名只能是字符串,属性名不可以重复)

获取属性值:obj.属性名,obj[“属性名”]

属性名可以实现变量的拼接,用[]包起来

object.tostring方法 “[object Object]”

for in

1.先遍历数字按照从小到大的顺序遍历

2.既可以遍历私有属性也可以遍历公有的属性(你加上的,自带遍历不出来)

Object.is

Object.assign()

函数function

1.定义+执行

2.参数问题

函数的length

默认值问题

实参:arguments

3.arguments

类数组

length 实参的个数

callee 函数本身

4.return

返回值

return后面的代码不执行

5.函数的三种身份

普通函数

new 类 ,prototype

Function类的实例,proto

6.this问题

7.箭头函数

date时间

1.new Date()

getTime()

getFullYear()

getMonth() 0-11

getDay() 0-6

getDate()

……

倒计时当前时间(钟表)

正则

检测数据类型的方法

typeOf

instanceof

construct

Object.toString.call()

Math函数

求最值

绝对值

算数平方根

向上/下取整

随机数

四舍五入

验证码

定时器

1.有个返回值,是个数字表示他是第几个定时器

2.定时器是异步的

3.setInterval(function(){},时间,给前面的函数传参数用的)

逻辑运算符

1.||和&&

2.i++,++i,i—,,—i

循环

for()

for in

for of

while()

continue

break

判断

if else

三元运算符

switch(),三个=判断

数据类型之间的转换

1.==比较

2.===绝对相等

2.正式课内容

1.变量提声(预解释)

什么是变量提声

var /function

let const

块级作用域下 {}

特殊情况

console.log(a);console.log(A);if(![]==false){ //[]==false和![]==false 都是 true console.log(a); console.log(A); var a=1; function A(){};}function fn(){ console.log(f); return f; function f(){};}var f=fn();

2.作用域

全局作用域

私有作用域

内存(堆内存:存储东西的比如因数据类型的存储地址,栈内存:作用域)

私有变量

形参

在私有作用域下声明过的变量

上一级作用域

作用域链

var a=1;function fn(a){ function f(){//f=xxxfff000 console.log(a) } return f;//xxxfff000}var f=fn(++a);//f=xxxfff000f();

作用域销毁机制

全局作用域关闭浏览器才销毁

私有作用域立即销毁:没有返回值,或者返回值没有被占用

不销毁:返回一个引用数据类型的地址被外界占用

function fn(n){ n++;//n=2 return function(m){ m++; console.log(m+n) }}var f=fn(1);f(2);// 5fn(1)(2);//5

this问题

看函数执行的时候前面有没有点

FF.prototype.fn();fn中的this是FF.prototype

给元素绑定事件

box.addEventListener("click",obj.fn,false);obj.fn里面的this就是box

自执行函数 window

函数当做参数的时候 window

window.setInterval(obj.fn,10000);obj.fn中的this仍然是window

构造函数中this是当前实例

箭头函数this问题

jQ对象.each()/$.each(),this==item

JQ原型扩展,jQuary.fn.extend({});this是当前JQ的实例

修改this指向

call

applay

bind

数组的方法(传回调函数的,第二个参数可以修改this)

面向对象(面向类的封装,继承和多态)

单例模式(高级单例模式)

var public=(function (){ return {}})()

工厂模式(了解)

构造函数模式

字面量创建

构造函数创建

自定义的类

new

默认return this

通过this给实例增加私有属性

创建数据类型的方式

原型模式

prototype增加公有属性

_proto _

原型是一个对象,浏览器默认开辟的推内存中有constructor

原型图

原型链

数组原型上方法的实现

call,apply

call(null/undefined/ 不传) this->window

call方法实现的原理

Function.prototype.call=function(){ var ary=[...arguments]; ary.shift(); if(arguments[0]==undefined){ this(...ary); return; } var obj=Object(arguments[0]); obj.__proto__.fn=this; obj.fn(...ary); };

call.call.call…..(fn,obj,x,y,…..)->fn.call(obj,x,y….)

call用途

[].slice.call()Object.toString.call()

apply用途

Math.Max.apply(null,ary)

ajax

new ()

xhr.open(“GET”,url,false)

xhr.onreadyStateChange()

xhr.send()

JSON

JSON.parse

JSON.stringify

括号表达式

保证语法正确

是一个表达式,返回值最后的值(1,2,3)->3

正则(很重要)

创建方式(注意构造函数创建方式可以实现变量的拼接,遇到’’写成 ‘‘)

元字符

特殊意义的元字符

量词元字符

[]

|

修饰符g

test true/false

exec null/[]

返回值是个数组[捕获的内容,内容首字符的索引,元字符串]

一次只能捕获一个,正则没有修饰符g,捕获永远是第一个

加上修饰符g,可以全都捕获出来,但是需要多次捕获,直到结果为null,自己可以写一个while循环

str.match()

懒惰性 ->g

贪婪性 ->在量词元字符后面加一个?

replace(正则,function(){})

分组捕获,不捕获可以在(?:)

正向预查

负向预查

案例(务必要写一遍)

　　H5表单验证,提交到另一个页面展示内容

　　JS盒子模型

十三个属性,值是个数字没有单位,浏览默认四舍五入了

clientWidth/clientHeight,clientLeft/clientTop

offsetWidth/offsetHeight offsetLeft/offsetTop offsetParent

scrollWidth/scrollHeight scrollLeft/scroolTop(只有这俩是可修改的)

浏览器的宽高

整个网页的宽高

DOM库

toArray()

toJSONObj()

win()

offset()

prev()

prevAll()

next()

nextAll()

sibiling()

sibilings()

index()

children()

getCss()

setCss()

setGroupCss()

css()

addClass()

removeClass()

hasClass()

toggleClass()

延迟加载(很重要)

原理

try{} catch(e){}

DOM映射

继承(非常重要)

原型继承

call继承

组合继承

动画库(自己再写一下)

JQ

事件(非常重要的)

什么事件

事件行为

事件绑定

DOM0级事件绑定

DOM2级事件绑定

事件对象

事件传播

阻止事件冒泡

阻止浏览器的默认行为

on,off(很重要)