前端js掌握这些基础就够了----js基础

js中这六种值为"假"，其他均为"真"_猿客奇谈

js中这六种值为"假"，其他均为"真"
写在前面:通常在以下语句结构中需要判断真假
1.if分支语句
2.while循环语句

3.for里的第二个语句

一、JavaScript中有6种值为"假"
1.false(布尔型)
2.null(用于定义空的或者不存在的引用)3.undefined(未定义值)
4.0（数值型)
5.""’(空字符串)(字符型)

6.NaN

这里面false 本身是布尔类型，其它5个则不是。除了这6个外，其它均为"真”，包括对象、数组、正则、函数等。注意'0"、'null'、 'false'、 {}、[]也都是真值。

三、对于"==”，以上得出下列结论
1.false 除了和自身比较为true外，和 0，""”比较也为true
2.null只和 undefined 比较时为 true，反过来 undefined 也仅和 null 比较为 true，没有第二个3.0除了和 false比较为true，还有空字符串‘”和空数组〔[]比较也为true
4.空字符串’除了和false 比较为true，还有一个数字0

二、虽然这六个值都为“假”，它们之间并非都相等
console.log( false == null )------ false

console.log( false == undefined ) ---- false

console.log( false ==  0）-----true
console.log( false == '' “)------- true
console.log( false == NaN )----- false
console.log( null == undefined ) ----- true

console.log( null ==  )----- false
console.log( null =- ' )-------false
console.log( null == NaN )-------false
console.log( undefined == )------false

console.log( undefined= ''”)----- false

console.log( undefined == NaN) ------- false
console.log( 0 == ' ‘)------ true
console.log( 0 == NaN ) ------- false

function getUnique(){
var n=0;
var getNum=function( ){return n++}
return getNum
}
var .fn=function( ){return ·n++}
console.log(fn());
console.log(fn())
console.log(fn())
console.log(fn())
n="hello";
console.log(fn())
console.log(fn())
console.log(fn())
console.log(fn())
I

 

Day1

1. javascript ECMAScript DOM BOM
2. js里的三种输出方式

1. console.log() 调试 报错
2. alert（）调试 提示和警告
3. document.write

内存：专门用来运行程序的

程序：专门用来处理数据的 接受数据---处理数据---输出数据

1. 变量：内存中专门存储数据的空间
2. 变量的使用 1声明 2 命名 3初始化 4 使用
3. 使用变量名就相当于使用变量里面的数据

Day2

1. 变量 声明 命名 初始化 使用；

如果变量不声明直接赋值，那么js 会自动在全局作用域帮你声明

变量提升：var 关键字声明的变量会自动提升到当前作用域最顶部

允许变量重复声明；

1. 数据类型：

原始（基本）数据类型：number（数字） Boolean(布尔)   undefined（未定义）null（空指针对象）

String：所有的字符和标点符号都是字符串；字符与任何数据的拼接也是字符串

字符串必须是在引号里面的，只要是套在引号里面的，一定是字符串

变量是不用加引号的

引用数据类型：

1. 运算符：程序用来模拟人类运算的符号

算术运算符：+-* / % ++ --

++如果单独使用 话，放前放后都是一样的

++如果在表达式中，如果放前面 先+1，在参与表达式，放后面，先用旧值参与表达式，表达式结束之后再+1

字符串连接运算符：+

变量是永远不能放在引号里面的

字符串与任何数据类型连接都得用+号，字符串与任何数据类型拼接的结果一定是字符串

关系运算符：> < >= <= ==   ===   !=  !==（左边是变量，右边是值，没有连续的三个比较大小）

逻辑运算符： && || ！

赋值运算符：=   +=   -=   *=  /=   %=

1. 三目运算符：条件？条件成立时候的值：条件不成立时候的值，也能做多重条件判断
2. 特殊运算符：typeof 检测数据类型的
3. If else表达式 if（条件）{条件成立的时候执行的代码}else{条件不成立时候执行的代码}

三目运算符与 if else 表达式：if else功能比三目运算符强大，因为三目运算符只能判断一个条件，而if else你想要你可以去存值，如果你不想要值，你想要干某一件，比如说大于90时让你去执行某一段代码，但是三目运算符不行；2三目运算符是一个表达式，只能去给值，ifelse 不仅仅是给值，还能去帮你执行一段代码，这是三目运算符做不到的，但是三目运算符有自己的优势，三目运算符是一个表达式，很多条件下，if else 的使用是受限制的，if else的使用是有情景限制的，很多情况下没办使用if else的，三目没有情景限制

Js 里面的数据类型转换

   显式类型转换

   隐式类型转换

函数（） function

Day3

NaN not a number

1.js里面的数据类型转换

显式类型转换:parseInt()

parseInt():取字符串中或者数字中以整数开头的部分，结果肯定是number

parseFloat():

toString():任何数据类型都有toString方法

隐式类型转换:布尔与字符串拼接 布尔值会自动转变为字符串 字符串与数字做拼接的时候，数字转为字符串

当布尔与数字计算的话那么布尔值 true会自动转为1 false会自动转为0

2.函数(方法):封装执行一项专门任务的代码段 方法是不调用不执行的

主动调用:函数名()

语法是：function 方法名(参数){干啥事}

day 4

NaN not a number

1.js里面的数据类型转换

显式类型转换:parseInt()

parseInt():取字符串中或者数字中以整数开头的部分，结果肯定是number

parseFloat():

toString():任何数据类型都有toString方法

隐式类型转换:布尔与字符串拼接 布尔值会自动转变为字符串 字符串与数字做拼接的时候，数字转为字符串

当布尔与数字计算的话那么布尔值 true会自动转为1 false会自动转为0

2.函数(方法):封装执行一项专门任务的代码段 方法是不调用不执行的

主动调用:函数名()

语法是：function 方法名(参数){干啥事}   var 方法名=function(参数){干啥事}

参数:参数是方法内独有的变量，接受外面传入的数据，在方法内处理 参数可以让方法更灵活

如果函数声明的定义了形参，那么你在函数调用的时候就必须传实参

形参：形式上的参数

实参：实际的参数

函数的执行是没有结果的

return 的本意是退出函数的运行,；如果在return后面加数据的话，那么会在退出函数的同时返回一个结果

作业1：取三个数中最小值，不能用三目运算符

3.作用域:一个变量的可用范围

全局作用域：除了局部作用域，就是全局作用域

局部(函数)作用域：函数内!!! 局部作用域只有在函数调用的时候才创建，在函数调用结束之后立即销毁

全局变量：在全局作用域内声明的变量叫全局变量

局部变量：在局部作用域内声明的变量叫局部变量

闭包：函数使用了不属于自己的局部变量；（函数套用函数，里面的函数使用了外面函数声明的变量，这种结构叫闭包）

闭包的作用：避免全局污染。（用来保护变量的）

性能问题：内存泄漏，小用怡情，大用伤身

未声明的变量直接参与计算是不行的

var health
health()
var health=function( ){alert(123)}-----这个是变量提示，值是undifind

用变量方式写遵从的是变量提升，用函数来写遵从的是整体提升
var health
health()
var health=function( ){alert(123)}

局部作用域调用结束立即销毁
function my( ){
function child(){
alert(1)
}
I
my( );
child();

闭包
function getUnique(){
var n=O;
function getyum( ){
return ++n;
}
return getNum
}
var frFgetUnique();
console.log(fn( ))

Day5

数据类型：

原始数据类型：string number boolean undefined null 直接存在栈中的是原始数据类型

null:空对象指针；

null的作用 用来主动释放对象

引用数据类型:object 存在堆中的称为引用数据类型;

按照存储位置不同分为原始数据类型和引用数据类型：

栈：

堆：

批量的去管理数据

数组(array):数组就相当多个变量的集合，

数组里面是没有任何数据类型限制的。

数组都是具备下标的，从0开始

数组是有length属性的

数组是引用类型的对象

js里面的循环结构: 程序反复执行一套代码段，遇到结束条件，就停止执行；

循环三要素:1.循环条件：循环继续进行的条件，一旦条件不满足，就会停止。

  2.循环变量:循环中做判断的量，循环变量一定要向着循环退出的趋势变化

  3.循环体:每次循环要做的事

while(条件){条件成立时执行的代码}

for(){条件成立时执行的代码} 只要希望反复做同一件事，首先考虑循环

遍历数组的：如果要对数组的每一个元素做相同的操作，肯定for循环

在我们的if else里面 只有以下6种情况算false，其余全是true

false 0 null "" undefined NaN

day6

内置对象

Js 是一个面向对象的编程语言

   面向过程

数组：多个数据的集合

对象：多个变量的集合{key:value}多个键值对的组合   对象的值是没有任何数据类型限制的    对象的属性只能是字符串（对象属性名可以不加双引号，因为他知道不加也是双引号，js会自动加上）

对象的属性名可以是变量：[属性名]

对象访问值：对象。属性名

var am"name"";
var bmw={[a ]: "bm" color: "chite " ,model:["1系"“3系"“5系"7系"”"],price:{"three";:"32.5w" ,"525"."40w", chafive";"60w"}}
console.log( bmws . price.chafive)

循环：for（var key in obj）{} ------遍历对象  

vor a="name"";
var bmw={([a] : "bm" color : "white " ,mode1: ["1系" "3系" "5系" "7系"],price:{"three":"32.5w ","525 " "40w" ," hafive" "sowi}}
for( var key in bms){
console.log(brmi[key])
}

key 是变量

总结：遍历对象用for…. in循环，遍历数组用for循环

创建对象的方式：

1. 数组字面量：把数组直接把列出来直接了
2. 对象字面量：把对象属性直接把列出来了

构造函数

    New Array

var arr=nEiw Array( 1,2,3);
console.log( arr)

    New object

var person=new Object( );
person. name="小红";
person.age=18;
console.1og(person)

一般不在括号直接加数据

day6

跟字符串相关的不能直接存

西部数码，阿里云===买服务器

作业:我们自己手写一个数组排序----只排数字，不排数组

调用任何方法语法都是 对象.方法名()

对象：

内置对象：js给我们提供的现成的对象，有现成的属性和方法供我们调用  17个内置对象

基本包装类型：js基本类型和基本包装类型的区别 - 某个润滑君 - 博客园

基本包装类型：
基本类型:Undefined,Null,Boolean,Number,String基本包装类型:Boolean,Number,String

var str = 'hello' ; // string基本类型

var s2 = atr.charAt(O);
alert (a2); // h

上面的string是一个基本类型，但是它却能召晚出一个 charAt()的方法，主要是因为在基本类型中，有三个比较特殊的存在就是:String NumberBoolean，这三个基本类型都有自己对应的包装对象。包装对象，其实就是对象，有相应的屋性和方法。调用方法的过程，是在后台偷偷发生的。

function my(i
}
my()

基本包装类型：string，number ,booler—是一个宏观意义不代表一个具体的值，比如公民是一个宏观的概念，你是公民，他也是，公民是一个基本包装类型，你是一个原始数据类型（你自己不具备任何关系，但是公民有权利啊）

vad str="hello";
ar nstr=str.toUpperCase()
console.log( nstr)

这个是window.my()调用，window是全局对象，最大的对象

1.String:字符串是不容更改的----要改变原来数据方法：要么重新存，要么直接使用，要么重新赋值

toString toUpperCase(转大写) toLowerCase(转小写) ：验证码，字母模糊大小写，是使用调用这两个中的方法

重新存

vad str="hello";
ar nstr=str.toUpperCase()
console.log( nstr)

直接使用

var str="hello";
console.log( str.toUpperCase())

重新赋值

var str="hello" ;
str=str.toUpperCase()
console.log( str)

indexOf(查找关键字) 返回的是所查找的关键字在字符串中的下标 默认只找第一个 找不到返回-1（-1算true）（用法：直播，取名字的的时候，包括非法字符，骂人的话，可以检测）

var str="hello";
var index=str.indexof("e“)
console.log( index)

var str="hello";
var index=str.indexOf("l")
console .1og(index)

正确是这样—推荐 -----但是很多网站是这样写，这种也对。

var str="hello" ;
if( str.indexOf(“z”)!=-1){
alert("找打了")
}else{
}

查找一个单词

var str="where·are you from" ;
console.log(str.indexOf( "are"") )

字符串：也有下标，和长度

var str="hello" ;
console.log(str[1])

var str="hello";
console.log ( str.length)

substring(截取子字符串) 含头不含尾 只给一个参数，从哪一位开始截，截到最后（取一个字符串中的一部分，有什么用途呢？比如要找到两个字名字的员工，有三个字的名字，截取后两个字）----(截取子字符串常用substring)

var str="hello" ;
str=str.substring(1,3);
console.log( str)

slice(截取子字符串) 含头不含尾--- 其实是数组的方法，不过两个亲兄弟（slice和substring两个是亲兄弟），字符串也能用----（slice在数组里面代表截取子数组）

var str="hello";
str=str.slice(1,3);
console.log(str)

split(切割字符串)把字符串切割成数组

var str="helo";
var arr=strI split("e" );
console.log( arr)

var str="hello" ;
var arr=str.split("l”);
c0nsole. log(arr)

结果["he","","o"]两个切割符连在一起的切的是空字符

[]"h","e","l","l","o"]

 

切不开的整个

["hello"]

 ["where","are","your","from"]

 

 

cancat()连接字符串

 

String.fromCharCode()把unicode编码转换为对应的字符

console. log(String.fromCharCode(57))---->9
 

 结果9

2.Number:

Number()

 

Parsrint和number区别？Parsrint是取字符串中以整数开头的部分，number是给一个纯数字的字符串，如果说带了写字符那种东西它转不了

toString

3.Boolean ：toString

4.Array:数组是能改的（只要是跟字符串沾边的方法，不能改）

slice:截取子数组

 

cancat()

 

原生项目：js +jquery+UI框架：boostray

join()拼接

 

练习：首字母转大写

 

map(function(item,index){干啥事}) 循环 map是对一个数组进行处理，返回一个处理后的数组---- map接收一个函数当参数，函数默认接收两个参数，index可以省略，item是形参可以随便取

必须加return，不加return数组是没法处理的，这个我得要

 

index可以省

Map本来就是对数组每一项进行处理的，处理之后还是数组----不能改数组

For 循环不仅仅是用在数组上，其他方面上也能用，本身不是对数组进行处理的，它是具体拿到数组，如果说，需要给它还回去，还生成一个数组的话，你需要对他进行一个赋值，for循环本身不是说处理之后还是一个数组，如果你说处理之后还希望，他是原来的数组的话，需要对他进行循环，而map本身就是给你处理数组的，数组结构不变，我不动你，数组还是数组，只不过我给你每一项都给你动一动，怎么动，大括号里就写怎么动

-----------以下几种方法都可以直接修改数组---------------

push()向数组结尾追加元素 ---最常用

 

unshift()向数组开头追加元素 ---少用

 

pop()移除数组最后一位元素---少用

 

shift()移除数组第一位元素---少用

reverse()反转数组---不常用

 

sort()数组排序 unicode编码 数字 48-57 大写字母65-90 小写字母 97-122

[1,3,6,8,9]

[1,29,369,76,81]------不对

["你","素“,"哈"]

console. 1og(String .fromCharCode(200))
splice(从哪一位开始删,删几位)用来插入、删除、替换元素的

 返回的是删除之后的元素

插入：前两个意思不变，后面都会作为新值插入进来

 纯粹的插入，不删除元素

 

正则表达式对象

Day7

排序

 

 

 

 

 

Day8

48-57数字

65-90 大写字母

97-122 小写字母

 

        特殊数量词：？ * +

            ？可有可无，最多一次{0,1}

            *可有可无，不限制次数{0，}

+至少一次{1，}

 

           

         预定义字符集：

                \d代表的是所有 数字

               \w代表的是所有的数字字母下划线

\s空格

.任意字符

正则表达式备选字符里如果只有一个备选字符后者只有一位预定义字符集，那么[  ]能省略；

 

 

 

 

Day09

对象.属性/方法

mysql

DOMdocument object model

DOM操作:通过js去操作html和css

DOM4大操作:增删改查

1.查:查找元素

document.getElementById(）返回的是元素对象--- 推荐，普遍使用

document.getElementsByclassName(）返回的是一个数组---注意数组长度变化问题—返回的是动态元素---动态是元素发生变化他就会变

document.getElementsByTagName(返回的是一个数组---注意数组长度变化问题

document.getElementsByName(返回的是—个数组-----给表单用的---注意数组长度变化问题

document.queryselector( css选择器)返回的是元素对象

document.queryselectorAll(css选择器)返回的是数组---返回的是静态元素---静态是一经获取不在改变

2.改:

改属性:对象.属性名的形式去更改或者添加

setAttribute("属性名","属性值")

getAttribute("属性名")

改内容:innerText:获取元素对象里的文本内容

innerHTML 获取元素对象里的内容

3.删

元素对象.innerHTML=“”.

removeAttribute()移除属性

父元素对年.removechild(子元素对象）---（删除某一个元素对象）

4增加：

1.document.createElement("标签名")

2.向标签里面加属性和加值

3.父元素对象.appendchild(子元素对象)

5、DOM事件:

click(点击事件)

mouseover|C鼠标移入b

mouseout(鼠标移出)

onfocus(获得焦点事件

onblur(失去焦点事件)

Day10 定时器---写在全局

作业1:写一个距离下课的倒计时

作2:写—个获取验证码的例子

写一个选项卡this

定时器:I上网页无人值守的时候自动进行的操作----说白了，是让网页自动运行的一种方法

定时器是唯一的一种让网页自动运行的方法

setTimeout(干啥事，等待的毫秒数)·—次性定时器:等待一定的时间干啥事----弹窗

setInterval(干啥事,间隔毫秒数）周期性定时器:每隔多长时间干啥事-----轮播图------反复

干啥事（两个参数）:要么你给一个函数名,要么你给一个匿名函数

定时器是一个异步的多线程应用

如何停止定时器:

1、clearInterval() 停2、 timer=null 释放

clearTimeout() timer=null

定时器跟页面是同步运行的

定时器是一个方法

同步单线程应用：按顺序执行，不能插队

异步多线程：餐厅有十个窗口，有多个窗口一直在同步运行，互不影响，互不干涉

Js方法任何都要用对象去调用它

定时器是window对象去调用它

this:当前正在操作的对象(谁在调用我这个函数，这个函数的this就指谁) （指向函数运行时所在的对象）this指向他自己

 

Day11

原型与继承

原型（Protype）:方法背后，专门保存由方法创建出来的对象的共有属性-------方法创建出来的对象: 构造方法创建出来的对象实例----

原型本质上是一个对象。

构造函数/对象模板：专门用来反复创建相同结构对象的专门方法

构造函数要求函数名要大写------- function Student{}

new Array （）、new object（）、new Date（）这个三个就是构造函数

var xm={name: "小明",age:18};-----自定义对象

function Student(name, age){

this.name=name;

this.age=age;

I

}

var xm=new Student( "小明",18);

var xh=new student("小红",17);

console.log(xm)

new到底敞了那4件事

1.创建一个空对象var xm={}

2.改变this指向

call/apply

3.加属性加值

{name: "小明" , age:18}

4.return xm

共有属性:由同一构造函数创建出来的对象共同享有的属性

自有属性:属I巧对象实例白身的。

任何实例对象无权修改原型中的数据,如果实例对象想直接更改，其实只是增加上了一个同名的自由属性而已

继承:使用现有类型，创建出新的类型，新的类型a以使用现有类型的属性和方法，并且可以拓展出现有类型没有的属性和方法

原型链:

Function是所有函数的父类

Error：所有错误的父类

proto_:隐式原型—个对象的隐式原型永远指向创建该对象的构造函数的原

function Student(name, age){

this.name=name;

this.age=age;

I

}

var xm=new Student( "小明",18);

var xh=new student("小红",17);

student.prototype.money=10000;------父亲的

console.log(xh.money):------10000

student.prototype.mdhey=10000;

console.log(xm); ------10000

xm. money--;

console.log(xh.money)-----10000

console.log(xm);---9999

function student(name, age){

this.name=name;

this.age=age;

}

var xm=new student("小明",18);

var xh=new student("小红",17);

student.prototype.car="bmw" ;

xm.car="benz"

I

console.log(xm.car)

student.prototype.playBas=function(){alert("我会打篮球")};

xh. playBas()

只要在对象的原型之中，加一个方法，那么这个构造函数创建出来的所有所有实例都能用，只要你在构造函数里面加一个什么属性，加一个什么方法，那么由这个构造函数创造出来的所有属性和方法，创建创建出来的所有实例都能用这个方法，

为什么我们通过new  array能创建出数组方法？因为他在原型之中有这个方法，所有只要通过new东西，拿到这种对象，他当然能调用了

原型是一个属性，属性是一个对象，这个对象专门用来存放共有属性的，什么是共有属性？只有构造函数才有共有属性。什么是自有属性？由构造函数创建出来的实例，属于他自身的叫自有属性

Var peron={}i}----原型---父级：object---对象最大

var arr=[1,2,31 Ⅰ----父级：array---数值最大父亲是array

function----function ---function最大

js任何对象都是有父级的

原型链

 

 ​​​​​​​