javascript-study

1.初识JavaScript

1.4浏览器执行JS简介
浏览器分成两部分∶渲染引擎和JS引擎
1.渲染引擎︰用来解析HTML与CSS，俗称内核，比如chrome浏览器的blink，老版本的webkit
2.JS引擎:也称为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的V8
浏览器本身并不会执行JIS代码，而是通过内置JavaScript引擎(解释器)来执行JS代码。JS引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行.

1.ECMAScript
ECMAScript是由ECMA国际（原欧洲计算机制造商协会)进行标准化的一门编程语言，这种语言在万维网上应用)泛，它往往被称为JavaScript或 JScript，但实际上后两者是ECMAScript语言的实现和扩展。

2.DOM——文档对象模型
文档对象模型(Document Object Model，简称DOM)，是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DO提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。
3.BOM———浏览器对象模型
BOM(Browser Object Model，简称BOM)是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

JS有3种书写位置，分别为行内、内嵌和外部
1.行内式JS
<input typem"button" valuem"点我试试" onclickm"alert ( ‘Hello world’)" />

可以将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性），如: onclick注意单双引号的使用:在HTML中我们推荐使用双引号,JS中我们推荐使用单引号
可读性差，在html中编写JS大量代码时，不方便阅读;
引号易错，引号多层嵌套匹配时，非常容易弄混;
特殊情况下使用
如：

点我一下

-----alert是弹出框 **⒉.内嵌JS**

可以将多行JS代码写到

-----直接弹出

3.外部JS文件

------直接弹出

如：


2.变量的使用
3.变量的初始化
var age= 18; 声明变量同时赋值为18
声明一个变量并赋值，我们称之为变量的初始化。
var age;
// 2.赋值 把值存入这个变量中
age=18;
// 4.变量初始化
var age=‘a’;
// 3.输出结果
console.log(age);
1.4变量语法扩展
1.更新变量
一个变量被重新复赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。
var age = 18;
age = 81;
/最后的结果就是81因为18被覆盖掉了
2.同时声明多个变量
同时声明多个变量时，只需要写一个var，多个变量名之间使用英文逗号隔开。
var age = 10,name = ‘zs’, sex = 2 ;

// 3.声明多个变量
var name=‘lyy’,
age=18,
ad=‘河南省洛阳市’;
console.log(name);
console.log(age);
console.log(ad);

// 4.只声明不赋值 结果是undefined
var sex;
console.log(sex);
// 5.不声明不赋值 会报错
// co.length(tel);
// 6.不声明只赋值 可以使用
qq=113141;
console.log(qq);


尽量不用name作为变量名

1.数据类型简介
1.1为什么需要数据类型
在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。
1.2变量的数据类型
变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。
1.3 数据类型的分类
JS把数据类型分为两类∶
·简单数据类型( Number , string,Boolean,Undefined,Null )
复杂数据类型( object)

![在这里插入图片描述](https://img-blog.csdnimg.cn/107d5873d9264771b5d881b39f7d2e89.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2VpeGluXzQ2NDYwOTgy,size_18,color_FFFFFF,t_70,g_se,x_16




在这里插入图片描述

3.1获取检测变量的数据类型
typeof可用来获取检测变量的数据类型
var vari=undefined;
console.log(typeof vari);
var sr=‘string’;
console.log(typeof sr);
var tim=null;
console.log(typeof tim);
var a=10;
console.log(typeof a);
var boo=true;
console.log(typeof boo);

3.2字面量
字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。
3.2字面量
字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。
心
数字字面量:8,9,10
●字符串字面量:‘黑马程序员’,"大前端"布尔字面量: true , false
数字字面量:8,9,10
●字符串字面量:‘黑马程序员’,“大前端"布尔字面量: true , false
●布尔字面量: true , false


注意parselnt和parseFloat单词的大小写，这2个是重点
如：
// 1.parseInt(变量) 可以把字符型的转换为数字型 得到的是整数
prompt(‘请输入你的年龄’);
var age=prompt();
alert(age); //11
console.log(age); //11
console.log(typeof age); //String
console.log(parseInt(age)); //11
console.log(typeof parseInt(age)); //number
console.log(parseInt(‘3.9’)); //3
console.log(parseInt(‘120px’)); //120
console.log(parseInt(‘em120px’)); //NaN
// 2.parseFloat(变量) 可以把字符型的转换为数字型 得到的是小数 浮点数
console.log(parseFloat(‘12.90’)); //12.9

隐式转换如：
var year= prompt(‘请输入你的出生年份’); //2000
var age=2022-year; //这里year取过来的是字符串，但是这里有减法 隐式转换为数字型
alert(age); //22
console.log(age); //22

●代表空、否定的值会被转换为false ，如”、0、NaN、null、undefined
●其余值都会被转换为true
console. log(Boolean ( ’ ')) ; // false
console.log(Boolean(0)) ; // false
console.log(Boolean(NaN)) ;//false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)) ; // false

console. log (Boolean ( ‘小白")); // true
console.log(Boolean(12)) ; l// true
2.标识符、关键字、保留字
1.标识符
标识(zhi)符:就是指开发人员为变量、属性、函数、参数取的名字。
标识符不能是关键字或保留字。
2.关键字
关键字∶是指JS本身已经使用了的字，不能再用它们充当变量名、方法名。
包括 : break、case、catch、continue、default、delete、do、else、finally、for、function、if、in.instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with等。
3.保留字
保留字∶实际上就是预留的“关键字”，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名。
包括: boolean、byte、char、class、const、debugger、double、enumexport、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile等。

3.递增和递减运算符
3.3前置递增和后置递增小结
●前置递增和后置递增运算符可以简化代码的编写，让变量的值+1比以前写法更简单。
●单独使用时，运行结果想同
●与其他代码联用时，执行结果会不同。
●后置:先原值运算，后自加(先人后己)
前置:先自加，后运算(先已后人)
●开发时，大多使用后置递增/减，并且代码独占一行，例如: num++;或者num–;




5.4短路运算（逻辑中断)
短路运算的原理∶当有多个表达式(值)时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;
个
1.逻辑与
●语法:表达式1&&表达式2
●如果第一个表达式的值为真，则返回表达式2
●如果第一个表达式的值为假（0，’ ’ ,null , NaN）时，则返回表达式1

var num=0;
console.log(123||num++); //123 num++不再执行
console.log(num); //0;

先把逻辑运算符划分开，他优先级低，再去分别计算其他的

5.分支流程控制switch 语句
5.2 switch语句和if else if 语句的区别
一般情况下，它们两个语句可以相互替换
1.switch…case语句通常处理case为比较确定值的情况，而if…else…语句更加灵活，常用于范围判断(大于、
等于某个范围)
2.switch语句进行条件判断后直接执行到程序的条件语句，效率更高。而if…else语句有几种条件，就得判断多少次。
3.当分支比较少时，if… else语句的执行效率比switch语句高。
当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。

1.标识符命名规范
●变量、函数的命名必须要有意义变量的名称一般用名词
函数的名称一般用动词

2.2利用new创建数组
var数组名= new Array () ;
var arr = new Array () ;//创建一个新的空数组
这种方式暂且了解，等学完对象再看
注意Array（) ，A要大写
2.3利用数组字面量创建数组
1．使用数组字面量方式创建空的数组var数组名=[ ] ;
2．使用数组字面垦方式创建带初始值的数组
var数组名=['小白·，'小黑"，'大黄"，‘瑞奇’];
数组的字面量是方括号[ ]
声明数组并赋值称为数组的初始化
这种字面量方式也是我们以后最多使用的方式
数组中可以存放任意类型的数据，例如字符串，数字，布尔值等。
var arrstus =[ ‘小白’，12,true,28.9];

课堂案例3∶数组排序（冒泡排序)
冒泡排序︰是一种算法，把一系列的数据按照一定的顺序进行排列显示(从小到大或从大到小)。例如，我们可以将数组[5,4,3,2,1]中的元素按照从小到大的顺序排序，
输出∶1，2，3，4，5

//冒泡排序
var arr=[5,4,3,2,1];
for(var i=0;i<arr.length-1;i++) //外层循环管趟数-4趟
for(var j=0;j<arr.length-i-1;j++) //内层循环管交换次数-
{

    if(arr[j]>arr[j+1])      //交换两个变量
    {
        var temp=arr[j];
        arr[j]=arr[j+1];
        arr[j+1]=temp;
    }

}

console.log(arr);

2.函数的使用

函数在使用时分为两步:声明函数和调用函数。
2.2调用函数
//调用函数
函数名(); //通过调用函数名来执行函数体代码

1.调用的时候千万不要忘记添加小括号
2.口诀:函数不调用，自己不执行。
注意∶声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码。

/*function 函数名 (形参1 ,形参2){
函数名(实参1，实参2);
形参是用来接收实参的
函数的参数个数不限，可以没有
*/
function get (aru)
{
console.log(aru);

}
get (‘lyy’); ----lyy

/*
function 函数名(){
return 需要返回的结果;
}
函数名();
//(1）我们函数只是实现某种功能，最终的结果需要返回给函数的调用者函数名()）通过return 实现的
(2）只要函数遇到return 就把后面的结果返回给函数的调用者函数名() = return后面的结果

*/
function getResult(){
return 666;
}
getResult(); //getResult()=666;
console.log(getResult()); -----666

return 终止函数
function add(num1,num2){
return num1,num2; //return只能返回一个值
alert(‘return没有终止函数’);
}

return只能返回一个值
console.log(add(1,2));

function getary(num1,num2){

return [num1 + num2,num1 - num2,num1*num2];    //可以返回一个数组

}
console.log(getary(1,2));

4.函数的返回值
4.4函数没有return返回undefined
4.5 break ,continue ,return的区别
1.break :结束当前的循环体(如for、while )。
2.continue :跳出本次循环，继续执行下次循环(如for、while )
3.return :不仅可以退出循环，还能够返回return语句中的值，同时还可以结束当前的函数体内的代码。

5.arguments的使用
当我们不确定有多少个参数传递的时候，可以用arguments来获取。在JavaScript中,arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参。
// arguments 的使用只有函数才有arguments对象―而且是每个函数都内置好了这个arguments

如：
function add(){
// console.log(arguments);
for(var i=0;i< arguments.length;i++)
{
console.log(arguments[i]); //里面存储了所有传递过来的实参arguments = [1,2]

}

         //伪数组并不是真正意义上的数组   1．具有数组的 length属性  2．按照索引的方式进行存储的
                 // 3．它没有真正数组的一些方法pop(）push()等等

}

add(1,2);
add(1,3,8,8);

//函数是可以相互调用的
function fn1(){
console.log(11);
fn2();
console.log(‘fn1’);
}

function fn2(){

console.log(‘222’);
console.log(‘fn2’);
}
fn1(); //执行fn1

//函数命名方式 1.利用关键字自定义命名
function fn(){

}
fn();
//2.函数表达式（ 匿名函数） var 变量名 =function() {};
var fun=function (aru){
console.log(‘我是匿名函数’);
console.log(aru)

}
fun(‘ary’);

*// (1)fun是变量名不是函数名
//(2）函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值而函数表达式里面存的是函数
// (3）函数表达式也可以进行传递参数

// 1.JavaScript作用域:就是代码名字（变量)在某个范围内起作用和效果目的是为了提高程序的可靠性更重要的是减少命名冲突
// 2．js的作用域(es6）之前:全局作用域 局部作用域
// 3．全局作用域:整个script标签或者是一个单独的js文件
var num=10;
console.log(num);

//4．局部作用域(函数作用域)在函数内部就是局部作用域这个代码的名字只在函数内部起效果和作用
function fun(){
var num=30;
console.log(num);
}
fun();

2.变量的作用域

2.2全局变量
在全局作用域下声明的变量叫做全局变量(在函数外部定义的变量)。
●全局变量在代码的任何位置都可以使用
●在全局作用域下var 声明的变量是全局变量
●特殊情况下，在函数内不使用var声明的变量也是全局变量(不建议使用)
2.2局部变量
在局部作用域下声明的变量叫做局部变量(在函数内部定义的变量)
局部变量只能在该函数内部使用
在函数内部var 声明的变量是局部变量
函数的形参实际上就是局部变量
2.3全局变量和局部变量的区别
1。全局变量︰在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存。
2.局部变量∶只在函数内部使用，当其所在的代码块被执行时，会被初始化;当代码块运行结束后，就会被销毁，因此更节省内存空间。

3.作用域链

●只要是代码，就至少有一个作用域
●写在函数内部的局部作用域
●如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
●根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链
如:
//作用域链:内部函数访问外部函数的变量，采取的是链式查找的方式来决定取那个值
// 这种结构我们称为作用域链就近原则

var num=10;
function fun1(){
var num=3;
function fun2(){
console.log(num);
}
fun2();
}

fun1(); //----3

预解析

1．我们js引擎运行js分为两步:预解析代码执行
(1)．预解析 js引擎会把js里面所有的 var 还有 function提升到当前作用域的最前面
(2)．代码执行按照代码书写的顺序从上往下执行
2．预解析分为变量预解析（变量提升）和函数预解析（函数提升)
3.变量提升就是把所有的变量声明提升到当前的作用域****最前面﹐不提升赋值操作
4.函数提升就是，把所有的函数声明提升到当前作用域的最前面，不调用函数

//案例4
f1();
console.log © ;
console.log (b) ;
console.log(a) ;
function f1(){
var a = b = c = 9;
console.log(a) ;
console.log(b) ;
console.log © ;
}
相当于
function f1(){
var a;
a = b = c = 9; //相当于var a = 9; b = 9;c = 9; b和 c直接赋值 没有var声明 当全局变量来看
// 集体声明 var a=9, b = 9, c = 9;
console.log(a) ;
console.log(b) ;
console.log © ;
}
f1();
console.log © ;
console.log (b) ;
console.log(a) ; a为局部变量 报错

1利用字面量创建对象
对象字面量∶就是花括号{}里面包含了表达这个具体事物（对象）的属性和方法。
{}里面采取键值对的形式表示
●键:相当于属性名
●值∶相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等)

对象的调用
对象里面的属性调用:对象.属性名，这个小点.就理解为“的“
对象里面属性的另一种调用方式:对象[ ‘属性名’]，注意方括号里面的属性必须加引号，我们后面会用
对象里面的方法调用:对象.方法名命，注意这个方法名字后面一定加括号

如：//var obj={}; 创建了一个空对象
var obj ={
uname:‘lyy’,
age:20,
sex:‘女’,
say:function (){
console.log(‘hi~~’)
}
}
console.log(obj[‘uname’]);
obj.say();

(1）里面的属性或者方法我们采取键值对的形式键属性名:值属性值
(2）多个属性或者方法中间用逗号隔开的
(3）方法冒号后面跟的是一个匿名函数/
2．使用对象
(1)．调用对象的属性我们采取对象名.属性名．我们理解为的
console.log(obj.uname);
(2)．调用属性还有一种方法对象名[`属性名’]
console.log(obj[ ‘age’ ]);
(3）调用对象的方法 sayHi ：对象名.方法名() 千万别忘记添加小括号obj.sayHi(); T

变量、属性、函数、方法总结

●变量:单独声明赋值，单独存在
·●属性:对象里面的变量称为属性，不需要声明，用来描述该对象的特征
●函数:单独存在的，通过“函数名0)”的方式就可以调用
·●方法:对象里面的函数称为方法，方法不需要声明，
使用“对象.方法名()”的方式就可以调用，方法用来描述该对象的行为和功能。

2.利用new Object 创建对象
var obj=new Object();
obj.uname=‘liyuan’;
obj.age=22;
obj.sex=‘女’;
obj.say = function (){
console.log(‘我会say’);
}
console.log(obj.uname);
console.log(obj[‘age’]);
obj.say();

3利用构造函数创建对象
构造函数︰是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与new运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。
1.利用构造函数创建对象 就是因为前面两种创建对象的方式一次只能创建一个
2.因此我们可以利用函数的方法重复这些相同的代码我们就把这个函数称为构造函数因为这个函数不一样，里面封装的不是普通代码，而是对象
3.构造函数就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面
如：
//利用构造函数创建对象
function Star(uname,age,sex){
this.name = uname;
this.age=age;
this.sex=sex;
this.sing=function (song){
console.log(song);
}
}
var ldh =new Star(‘刘德华’,18,‘男’); // 1．构造函数名字首字母要大写
//2．我们构造函数不需要return就可以返回结果
console.log(ldh.name);
console.log(ldh[‘age’]);
ldh.sing(‘冰雨’);
var zxy = new Star(‘张学友’,19,‘男’);
console.log(zxy.name);
console.log(zxy[‘age’]);
zxy.sing(‘qqq’);

1．构造函数名字首字母要大写
2．我们构造函数不需要return就可以
3 .我们调用构造函数 必须使用 new
4.我们只要new Star() 调用函数就创建一个对象
5.我们的属性和方法前必须添加 this

for…in语句用于对数组或者对象的属性进行循环操作。
如：//利用构造函数创建对象
function Star(uname,age,sex){
this.name = uname;
this.age=age;
this.sex=sex;
this.sing=function (song){
console.log(song);
}
}
var ldh =new Star(‘刘德华’,18,‘男’); // 1．构造函数名字首字母要大写
//2．我们构造函数不需要return就可以返回结果
for(var k in ldh){
console.log(k); // k变量输出 得到的是 属性名

 console.log(ldh[k]);   // ldh[k]得到的是 属性值

}

小结
1.对象可以让代码结构更清晰⒉.对象复杂数据类型object。
3.本质:对象就是一组无序的相关属性和方法的集合。
4.构造函数泛指某一大类，比如苹果，不管是红色苹果还是绿色苹果，都统称为苹果。
5.对象实例特指一个事物，比如这个苹果、正在给你们讲课的pink老师等。
6. for…in语句用于对对象的属性进行循环操作。

1.内置对象

JavaScript中的对象分为3种:自定义对象、内置对象、浏览器对象。
前面两种对象是JS基础内容，属于ECMAScript;第三个浏览器对象属于我们JS独有的，我们JS API讲解
●内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法)。
●内置对象最大的优点就是帮助我们快速开发
JavaScript提供了多个内置对象:Math、 Date . Array、string等
![在这里插入图片描述](https://img-blog.csdnimg.cn/67863d8352f1410c8eb936a08f0b74bb.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2VpeGluXzQ2NDYwOTgy,size_20,color_FFFFFF,t_70,g_se,x_16

2.查文档

2.1 MDN
学习一个内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习，可以通过MDN/W3C来查询。
Mozilla开发者网络(MDN )提供了有关开放网络技术(Open Web )的信息，包括HTML、CSS和万维网及HTML5应用的API。
MDN: https://developer.mozilla.org/zh-CN/

//日期对象是一个构造函数 必须使用new 来调用创建我们的日期对象
var date = new Date();
console.log(date);
var date1=new Date(‘2020-9-10 12:9:10’);
console.log(date1);
var date = new Date();
console.log(date.getFullYear());
console.log(date.getMonth()+1); //月份要加一
console.log(date.getDate());
console.log(date.getDay());// 周日返回0

var year = date.getFullYear();
var month= date.getMonth()+1;
var days = date.getDate();
var arr=[‘星期日’,‘星期一’,‘星期二’,‘星期三’,‘星期四’,‘星期五’,‘星期六’];
var day= date.getDay();
console.log(‘今天是：’+year+‘年’+ month+‘月’+ days+‘日’ +arr[day]);

如：
//要求封装一个函数返回当前的时分秒 格式 08：08：08
function get(){
var time= new Date();

var h=time.getHours(); h=h < 10 ? ‘0’+h :h;

var m=time.getMinutes(); m=m < 10 ?‘0’+m : m;

var s=time.getSeconds(); s=s < 10 ?‘0’+s : s;
return h + ‘:’+m+’:’ + s;

}
console.log(get());

获得Date总的毫秒数﹐不是当前时间的毫秒数而是距离1970年1月1号过了多少毫秒数
// 1．通过valueof()getTime()
var date =new Date();
console.log(date.valueOf());
console.log(date.getTime());

//2.最简单的写法
var date1=+new Date(); //+new Date()返回的就是总的毫秒数

console.log(date1);

//3.H5新增的获得总的毫秒数
console.log(Date.now());

创建数组的两种方式
1．利用数组字面量
var arr =[1，2，3];console.log(arr[0]);
2．利用new Array()
var arr1 = new Array(); //创建了一个空的数组
3.var arr1 = new Array(2);
//这个2表示数组的长度为2里面有2个空的数组元素
4.var arr1 = new Array(2，3);
//等价于[2,3]这样写表示里面有2个数组元素是2和console.log(arr1);
检验是否为数组
(1) instanceof运算符它可以用来检测是否为数组
(2)Array.isArray(参数);

var arr = [];
var obj = {};
console.log(arr instanceof Array);
console.log(obj instanceof Array);
console.log(Array.isArray(arr))
console.log(Array.isArray(obj));

(1)push 是可以给数组追加新的元素
(2) push()参数直接写数组元素就可以了
(3）push完毕之后，返回的结果是新数组的长度
(4）原数组也会发生变化
2. unshift在我们数组的开头添加一个或者多个数组元素
(1)unshift是可以给数组前面追加新的元素
(2) unshift(）参数直接写数组元素就可以了
(3)unshift完毕之后，返回的结果是新数组的长度
(4）原数组也会发生变化
如：
var arr=[1,2,3];
arr.push(4,‘lyy’);
arr.unshift(‘ff’,‘red’);
console.log(arr);

案例：
1.筛选数组
/* var arr=[1500,2000,3000,1020,1800];
var newArray =[];
for (var i =0 ;i <arr.length;i++){
if(arr[i]>1200)
newArray.push(arr[i]);
}
console.log(newArray);*/
2.翻转数组
var array=[‘red’,‘blue’,‘pink’];
array.reverse();
console.log(array);
3.数组排序 冒泡排序
var arr1=[2,51,7,0];
arr1.sort(function (a,b){
return b-a; //降序
return a-b; //升序
})

console.log(arr1);

如：

4.返回数组索引号方法
var array1=[‘red’,‘blue’,‘pink’,‘blue’];
console.log(array1.indexOf(‘aaa’)); //-1
console.log(array1.lastIndexOf(‘red’)); // 0 从后往前查找

5.数组去重案例
function unique(arr){
var newarr=[];
for(var i=0; i < arr.length;i++){
if(newarr.indexOf(arr[i])===-1){
newarr.push(arr[i]);
}
}
return newarr;

}

console.log(unique([‘blue’,‘red’,‘blue’]));

如：
var arr=[1,23,4];
console.log(arr.toString()); //1,23,4
console.log(arr.join(’-’)); //1-23-4

6.1基本包装类型

为了方便操作基本数据类型，JavaScript还提供了三个特殊的引用类型:String、Number和Boolean。基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。
/下面代码有什么问题?
var str = ‘andy’ ;
console.log (str.length) ;
按道理基本数据类型是没有属性和方法的，而对象才有属性和方法，但上面代码却可以执行，这是因为js 会把基本数据类型包装为复杂数据类型，其执行过程如下∶
1.生成临时变量，把简单类型包装为复杂数据类型var temp = new string ( 'andy ’ ) ;
⒉.赋值给我们吉明的空筷亦易心str = temp;
3.销毁临时变量temp = null;
如：
//基本包装类型
var str=‘lyy’;
console.log(str.length);
var temp=String(str);
str=temp;
temp=null;
console.log(str.length);

//字符串对象瞭根据字符返回位置str.indexof(‘要查找的字符’,[起始的位置])

var strr=‘改革春风吹满地,春天’;
console.log(strr.indexOf(‘春’,4)); // 8

/*
1.
查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数
核心算法:先查找第一个o出现的位置
然后只要indexOf返回的结果不是-1就继续往后查找
因为indexOf只能查找到第一个，所以后面的查找，利用第二个参数，当前索引加1，从而继续查找

*/

var str=“abcoefoxyozzopp”;
var index=str.indexOf(‘o’);
while(index!=-1){
console.log(index);
index=str.indexOf(‘o’,index+1);

}

如：

var ary=‘andy’;
for(var i=0; i<ary.length;i++){
console.log(ary[i]);
}
//根据位置返回字符
// 1. charAt(index）根据位置返回字符
console.log(ary.charAt(1)); //n
console.log(ary.charCodeAt(0)); //97 2.返回相应索引号的字符ASCII值目的:判断用户按下了那个键

console.log(ary[0]); //a 3. str[index] H5新增的

//判断一个字符串’abcoefoxyozzopp’中出现次数最多的字符，并统计其次数。
//核心算法:利用charAt(）遍历这个字符串
//把每个字符都存储给对象，如果对象没有该属性，就为1，如果存在了就+1
// 遍历对象，得到最大值和该字符
var str=‘abcoefoxyozzopp’;
var o={};
for(var i=0 ;i<str.length;i++){
var charts = str.charAt(i);
if(o[charts]){
o[charts]++;
}else {
o[charts]=1;
}
}
console.log(o);
//2.遍历对象
var max=0;
var ch=’’;
for(var k in o){
//k得到的是属性名
//o[k]得到的是属性

if(o [k] >max){
max=o[k];
ch=k;
}
}
console.log(max);
console.log(‘最多的字符是：’+ch);

如：
var str=‘我是一个快了的程序员’;
console.log(str.concat(‘red’)); //我是一个快了的程序员red

console.log(str.substr(4,2)); //快了
// 1．替换字符 replace(‘被替换的字符’，‘替换为的字符’)它只会替换第一个字符
var str=‘abc’;
console.log(str.replace(‘a’,‘e’));

//有一个字符串 'abcoefoxyozzopp’要求把里面所有的o替换为*
var str1=‘abcoefoxyozzopp’;
while(str1.indexOf(‘o’)!== -1){

str1=str1.replace(‘o’,’*’);
}
console.log(str1);

// 2．字符转换为数组 split('分隔符") 前面我们学过join把数组转换为字符串
var str2 = ‘red, pink,blue ‘;
console.log(str2.split(’,’));
var str3 = ’ red&pink&blue ’ ;
console.log(str3.split(’&’));

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。
●值类型∶简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型string , number , boolean , undefined , null
●引用类型∶复杂数据类型，在存储时变量中存储的仅仅是地址(引用），因此叫做引用数据类型通过new关键字创建的对象（系统对象、自定义对象），如Object、Array、Date等
堆栈空间分配区别:
1、栈(操作系统）︰由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈;简单数据类型存放到栈里面
2、堆(操作系统）:存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。
复杂数据类型存放到堆里面

如果有个变量我们以后打算存储为对象，暂时没想好放啥，这个时候就给null
1．简单数据类型是存放在栈里面里面直接开辟一个空间存放的是值
2．复杂数据类型首先在栈里面存放地址十六进制表示―然后这个地址指向堆里面的数据

函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量。
function fn(a) {
a++;
console.log(a) ; // 11
var x = 10;
fn (x);
console.log (x); // 10

函数的形参也可以看做是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。
function Person (name) {
this.name = name ;
}
function f1(x){ // x = p
console.log (x.name) ;// 2．这个输出什么? 刘德华
x.name = “张学友”;
console.log (x.name) ; // 3．这个输出什么? 张学友
}
var p = new Person ( “刘德华”);
console. log (p.name) ; // 1．这个输出什么? 刘德华
f1§;
console.log (p.name) ; // 4．这个输出什么? 张学友

1.DOM简介

1.1什么是 DOM
文档对象模型(Document Object Model，简称DOM ），是W3C组织推存的处理可扩展怀心右日(hIML或者XML )的标准编程接口。
W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

2.获取元素

2.1如何获取页面元素
DOM在我们实际开发中主要用来操作元素。我们如何来获取页面中的元素呢?
获取页面中的元素可以使用以下几种方式:
1.根据ID获取
2.根据标签名获取
3.通过HTML5新增的方法获取
4.特殊元素获取

1.根据ID获取。
使用getElementByld()方法可以获取带有ID的元素对象。

如：

2.获取元素
2.3根据标签名获取
使用 getElementsByTagName0方法可以返回带有指定标签名的对象的集合,
还可以获取某个元素(父元素)内部所有指定标签名的子元素.
element.getElementsByTagName ( ‘标签名’);
注意∶父元素必须是单个对象(必须指明是哪一个元素对象).获取的时候不包括父元素自己。

如：
// 1.getElementsByClassName根据类名获得某些元素集合
var box=document.getElementsByClassName(‘box’);
console.log(box);
// 2. querySelector返回指定选择器的第一个元素对象切记里面的选择器需要加符号 .box #nav
var firstbox=document.querySelector(’.box’);
console.log(firstbox);
var nav=document.querySelector(’#nav’);
console.log(nav);
var firstli=document.querySelector(‘li’);
console.log(firstli);
// 3.querySelectorAl1()返回指定选择器的所有元素对象集合
var boxs=document.querySelectorAll(’.box’);
console.log(boxs);
var lis=document.querySelectorAll(‘li’);
console.log(lis);

3.事件基础

3.1事件概述
JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。简单理解︰触发—响应机制。
网页中的每个元素都可以产生某些可以触发JavaScript的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。
如：
唐伯虎

3.3执行事件的步骤
1.获取事件源
2.注册事件（绑定事件)
3.添加事件处理程序(采取函数赋值形式)

4.3表单元素的属性操作
利用DOM可以操作如下表单元素的属性∶
type、 value、checked、 selected、disabled
如：
按钮

如：

文字

如：

如：

如：

• 我是ul-li
• 我是ul-li
• 我是ul-li
• 我是ul-li

1. 我是ol-li
2. 我是ol-li
3. 我是ol-li
4. 我是ol-li

如：
//1.firstchihld 第一个子节点 不管是文本节点还是元素节点
console.log(ul.firstChild);
console.log(ul.lastChild);
//2.firstElementChild返回第一个子元素节点
console.log(ul.firstElementChild);
console.log(ul.lastElementChild);

// 3．实际开发的写法 既没有兼容性问题又返回第一个子元素

console.log(ul.children[0]);
console.log(ul.children[ul.children.length-1]);

如：

我是div 我是span

如：

• li

//鼠标事件对象 MouseEvent
document.addEventListener( ‘click ’ , function(e) {
// 1. client鼠标在可视区的x和y坐标
console.log(e.clientx);
console.log(e.clientY);
console.log( ’ ------------’);
// 2. page鼠标在页面文档的x和y坐标
console.log(e.pageX)
console.log(e.pageY);console.log( ’ ------’);
// 3. screen鼠标在电脑屏幕的x和y坐标console.log(e.screenX);
console.log(e.screenY);

})

/* document.οnkeyup=function (){

console.log('我弹起了');

}*/

document.addEventListener(‘keyup’,function (){
console.log(‘我弹起了’);
})
document.addEventListener(‘keydown’,function (){
console.log(‘我按下了down’);
})
document.addEventListener(‘keypress’,function (){
console.log(‘我按下了press’);
})

window.οnlοad=function (){
var btn=document.querySelector(‘button’);
btn.addEventListener(‘click’,function (){
alert(‘点击了’);
})
}
window.οnlοad=function (){
alert(‘222’);
}
document.addEventListener(‘DOMContentLoaded’,function (){
alert(‘3333’);
})

如：
window.addEventListener(‘load’,function (){
var div=document.querySelector(‘div’);
window.addEventListener(‘resize’,function (){
console.log(window.innerWidth);
console.log(‘变化了’);
if(window.innerWidth<=800){
div.style.display=‘none’;
}
else
{
div.style.display=‘block’;
}
})

})

setTimeout
语法规范: window.setTimeout(调用函数，延时时间);
1．这个window在调用的时候可以省略
2．这个延时时间单位是毫秒但是可以省略，如果省略默认的是0
3．这个调用函数可以直接写函数还可以写函数名
4．页面中可能有很多的定时器，我们经常给定时器加标识符（名字)
1.
setTimeout(function (){
console.log(‘时间到了’);
},2000)

function callback(){
console.log(‘爆炸’);
}
var time1=setTimeout(callback,3000);
var time2=setTimeout(callback,4000);
3.不推荐
// setTimeout(‘callback()’,2000);

如：

关闭
//5秒自动隐藏图片
var ad=document.querySelector(‘img’);
setTimeout(function (){
ad.style.display=‘none’;
},5000)

var btn=document.querySelector(‘button’);
btn.οnclick=function (){
clearTimeout(timer); //停止定时器
}

2. setTimeout延时时间到了，就去调用这个回调函数，只调用一次就结束了这个定时器
3. setInterval每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数

setInterval(function (){
console.log(‘输出’);
},1000)

3.6 this
this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象

// 1.全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window)
function fn (){
console.log(this); //指向window
}
window.fn();
window.setTimeout(function (){
console.log(this); //指向window
},1000)

// 2．方法调用中谁调用this指向谁
var o={
say:function (){
console.log(this); //对象o
}
}
o.say();
// 3．构造函数中this指向构造函数的实例
function Fn () {
console.log(this); // this 指向的是Fn实例对象
}
var fn=new Fn();

如：


var btn=document.querySelector(‘button’);
btn.addEventListener(‘click’,function (){
//记录浏览历史，所以可以实现后退功能 location.assign( ‘http:// www.itcast.cn’ );

 location.assign('http://www.baidu.com');
 //重新加载页面
    location.reload(true);
    // 不记录浏览历史，所以不可以实现后退功能
    // location.replace('http://www.baidu.com')

})

var father=document.querySelector('.father'); var son=document.querySelector('.son'); //1.可以得到元素的偏移位置返回的不带单位的数值 console.log(father.offsetTop); //200 //2.可以得到元素的大小宽度和高度是包含padding + border + width console.log(father.offsetWidth); //400 //它以带有定位的父亲为准﹑如果么有父亲或者父亲没有定位则以 body为准 console.log(son.offsetLeft); //45 // 3．返回带有定位的父亲否则返回的是body console.log(son.offsetParent); console.log(son.parentNode); I//返回父亲是最近一级的父亲亲爸爸不管父亲有没有定位   

// 1.立即执行函数:不需要调用，立马能够自己执行的函数
(function (a,b){
console.log(a+b);
var num=10;

})(1,2);
// 2．写法也可以传递参数进来
(function (a,b){
console.log(a-b);
var num=10;
}

(3,1));
// 3．立即执行函数最大的作用就是独立创建了一个作用域

div写在前面

$('div').hide();

div写在后面
/* //1.等着页面DOM加载完毕再去执行js代码
$(document).ready(function (){
$(‘div’).hide();
})*/
//2.等着页面DOM加载完毕再去执行js代码
$(function (){
$(‘div’).hide();
})

如：

jQuery(function (){
$(‘div’).hide();
})

1．DOM对象转换为jQuery对象
(1）我们直接获取视频，得到就是jQuery对象
$( 'video ’ );
(2）我们己经使用原生js获取过来DOM对象
var myvideo = document.querySelector( ‘video ’ );
$(myvideo).play(); jquery里面没有play这个方法
2.jQuery对象转换为DOM对象
$（ myvideo’）.play();
$( ‘video’)[0].play()
$( 'video ')·get(0).play()

如：

我类名是nav

• 1
• 2
• 3
• 4

知识铺垫
jQuery设置样式
$(‘div’).css("属性;‘值’)
1.3隐式迭代（重要)
遍历内部 DOM元素（伪数组形式存储)的过程就叫做隐式迭代。
简单理解∶给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作方便我们调用。
如：
$(‘p’).css(‘color’,‘pink’);
$(‘ul li’).css(‘background’,‘red’);

如：
$(‘ul li:first’).css(‘color’, ‘blue’);
${(}^{\prime }ulli:eq(1{)}^{\prime }).css{(}^{\prime }backgroun{d}^{\prime }{,}^{\prime }gree{n}^{\prime });==\ast \ast$(‘ul li’).eq(2).css(‘background’,‘skyblue’);**
$(function () {
$(‘ol li:odd’).css(‘color’, ‘orange’);
$(‘ol li:even’).css(‘color’, ‘pink’);
}）

//注意一下都是方法带括号KaTeX parse error: Expected '}', got 'EOF' at end of input: … console.log((’.son’).parent());
// 2．子
//(1）亲儿子 children()类似子代选择器ul>li
$(’.father’).children(‘div’).css(‘color’,‘red’);
//(2)可以选里面所有的孩子包括儿子和孙子find()类似于后代选择器
$(".father").find(“p”).css( “color”,“red” );

juquery的排他思想

$(function (){
//1.隐式迭代 给所有的按钮都绑定了点击事件
$(‘button’).click(function (){
//2.当前元素背景颜色变化
$(this).css(‘background’,‘pink’);
//3.其余的兄弟去掉背景颜色
$(this).siblings(‘button’).css(‘background’,’’);
})

//3.链式编程
$(this).css(‘color’,‘red’).siblings(‘button’).css(‘color’,’’);
})

如：

div