JavaScript基础讲解

作者: 猪上山 | 来源:发表于2018-06-21 01:15 被阅读0次

JavaScript :简称:js

js分三个部分:
1. ECMAScript 标准----js的基本的语法
2. DOM------Document Object Model 文档对象模型
3. BOM------Browser Object Model 浏览器对象模型

JavaScript是什么？
是一门脚本语言
是一门解释性语言
是一门动态类型的语言
是一门基于对象的语言

编译语言:需要把代码翻译成计算机所认知的二进制语言,才能够执行
脚本语言:不需要编译,直接执行
常见的脚本语言:t-sql,cmd

电脑的硬件---->系统--->客户端的程序--->代码
电脑的硬件---->系统--->浏览器--->js代码
js原名不是JavaScript,而是LiveScript
js的作用?解决用户和浏览器之间的交互的问题
js现在可以做什么?

* HTML:是标记语言,展示数据的
* CSS:美化页面
* JavaScript:用户和浏览器交互,

js的代码可以分三个地方写:

1.在html的文件中,script的标签中写js代码
2.js代码可以在html的标签中写---
3.在js文件中可以写js代码,但是需要在html的页面中引入 script的标签中的src="js的路径"

变量

操作的数据都是在内存中操作
* js中存储数据使用变量的方式(名字,值--->数据)
* js中声明变量都用var---->存储数据,数据应该有对应的数据类型
* js中的字符串类型的值都用双引号或者单引号

变量---作用,存储数据的或者是操作数据
- 变量声明(有var 有变量名字,没有值)
- 变量初始化(有var 有变量名字,有值)
- 变量声明的方式:
- var 变量名字;

    //存储一个数字10
    var number = 10;
    //存储一个5
    var number2 = 5;
    //存储一个人的名字
    var name = "小黑";
    //存储真(true)
    var flag = true;
    //存储一个null--->相当于是空
    var nll = null;
    //存储一个对象
    var obj = new Object();

js中的原始数据类型:

number,string,boolean,null,undefined,object

number:数字类型(整数和小数)
string:字符串类型(的值一般都是用单引号或者是双引号括起来) "34"
boolean:布尔类型(值只有两个,true(真1),false(假0))
null:空类型,值只有一个:null,一个对象指向为空了,此时可以赋值为null
undefined:未定义,值只有一个:undefined

操作符:一些符号-----用来计算

算数运算符: + - * / %
- 算数运算表达式:由算数运算符连接起来的表达式
- 一元运算符: 这个操作符只需要一个操作数就可以运算的符号 ++ --
- 二元运算符: 这个操作符需要两个操作数就可以运算,
- 三元运算符:
- 复合运算符: += -= *= /= %=
- 复合运算表达式:由复合运算符连接起来的表达式
- var num=10;
- num+=10;------>就是:num=num+10;
- console.log(num);20
- 关系运算符: > < >= <= ==不严格的 ===严格的 !=不严格的不等 !==严格的不等
- 关系运算表达式:由关系运算符连接起来的表达式
- 关系运算表达式的结果是布尔类型
- 逻辑运算符:
- &&---逻辑与--并且
- ||---逻辑或---或者
- !---逻辑非---取反--取非
- 逻辑运算表达式:由逻辑运算符连接起来的表达式
- 表达式1&&表达式2
- 如果有一个为false,整个的结果就是false
- 表达式1||表达式2
- 如果有一个为true,整个的结果为true
- !表达式1
- 表达式1的结果是true,整个结果为false
- 表达式1的结果是false,整个结果为true
  赋值运算符: =

流程控制；代码的执行过程

1.顺序结构:从上到下,从左到右执行的顺序,就叫做顺序结构(不是很眼睛)
2.分支结构:if语句,if-else语句,if-else if-else if...语句,switch-case语句,三元表达式语句
3.循环结构:while循环,do-while循环,for循环,后期还有一个for-in循环

if语句:主要是判断

语法:
if(表达式){
代码块
}
执行过程:
先判断表达式的结果是true还是false,如果是true则执行代码块,如果是false,大括号中的代码是不执行的

if-else 语句

语法:
if-else语句的语法:
if(表达式){
代码1
}else{
代码2
}
执行过程:
如果表达式的结果是true则执行代码1,如果表达式的结果是false,则执行代码2

三元表达式

运算符号: ? :
语法:
var 变量=表达式1?表达式2:表达式3;
执行过程:
表达式1的结果是true还是false,如果是true则执行表达式2,然后把结果给变量如果表达式1的结果是false,则执行表达式3,把结果给变量

if-else if语句...

语法:
if(表达式1){
代码1
}else if(表达式2){
代码2
}else if(表达式3){
代码3
}else{
代码4
}
else if---这种结构可以写多个,具体多少个看需求, else--结构是可以不用写的,具体也是看需求
执行过程:
先判断表达式1的结果,
如果为true则执行代码1
如果为false,则判断表达式2
如果表达式2为true则执行代码2
如果为false,则判断表达式3
如果表达式3为true则执行代码3
否则执行代码4

switch-case语句

语法:
switch(表达式){
case 值1:代码1;break;
case 值2:代码2;break;
case 值3:代码3;break;
case 值4:代码4;break;
...多个case
default:代码5;
}
执行过程:
获取表达式的值,和值1比较,如果一样,则执行代码1,遇到break则跳出整个的语句,后面代码不执行
如果表达式的值和值1不一样,则和值2比较,如果相同则执行代码2,遇到break则跳出
否则和值3比较,相同则执行代码3,遇到break,跳出,否则和值4比较,相同则执行代码4,遇到break则跳出,否则直接执行代码5

while循环

while循环语法:

计数器
var 变量=0;
while(循环的条件){
循环体;
计数器++;
}

先判断条件是否成立,(条件的结果是true还是false),如果是false,那么循环的代码(while的大括号中的代码都不执行),如果是true,那么先执行循环体,然后执行计数器,然后,直接去--->循环的条件,再次判断是否成立,成立则继续执行循环体,否则跳出循环,执行完循环体之后,计数器加1,然后再去循环的条件,判断,成立则循环,否则跳出循环

 var i=0;
 while(i<20){
 循环体
 i++;
 }

do-while循环

语法:
do{
循环体
}while(条件);

执行过程:
先执行一次循环体,然后判断条件是否成立,不成立,则跳出循环,成立则执行循环体,然后再判断条件是否成立,成立则继续循环,否则跳出.....

    var i = 1;
    var sum = 0;
    do {
      if (i % 3 == 0) {
        sum += i;
      }
      i++;
    } while (i <= 100);
    console.log(sum);

while循环特点:先判断,后循环,有可能一次循环体都不执行
do-while循环特点:先循环,后判断,至少执行一次循环体

for循环

语法:
for(表达式1;表达式2;表达式3){
循环体;
}

执行过程:
先执行一次表达式1,然后判断表达式2;如果不成立则直接跳出循环
如果表达式2成立,执行循环体的代码,结束后,跳到表达式3执行,然后跳到表达式2,判断表达式2是否成立,不成立,则跳出循环
如果表达式2成立,则执行循环体,然后再跳到表达式3,再跳到表达式2,判断是否成立,一直如此

    var sum = 0;
    for (var i = 1; i <= 100; i++) {
      sum += i;
    }
    console.log("和为:" + sum);

break关键字:如果在循环中使用,遇到了break,则立刻跳出当前所在的循环

    for(var i=100;i<=200;i++){
      if(i%7==0){
        console.log(i);
        break;
      }
    }

continue:在循环中如果遇到continue关键字,直接开始下一次循环

    var sum=0;
    var i=1;
    while(i<=10){
      if(i%10==3){
        //个位数是3,不要
        i++;
        continue;
      }
      sum+=i;
      i++;
    }
    console.log(sum);

数组:一组有序的数据

数组的作用:可以一次性存储多个数据
数组的定义:

通过构造函数创建数组
var 数组名=new Array();
var array=new Array(); 定义了一个数组
var 数组名=new Array(长度)

如果数组中没有数据,但是有长度---,数组中的每个值就是undefined
构造函数的方式创建数组的时候,如果在Array(一个数字)--->数组的长度(数组元素的个数)
如果在Array(多个值);这个数组中就有数据了,数组的长度就是这些数据的个数

通过字面量的方式创建数组
var 数组名=[ ];空数组
var array=[ ];

数组:一组有序的数据
数组元素:数组中存储的每个数据,都可以叫数组的元素,比如:存储了3个数据,数组中3个元素
数组长度:就是数组的元素的个数,比如有3个元素,就说,这个数组的长度是3
数组索引(下标):用来存储或者访问数组中的数据的,索引从0开始,到长度减1结束
数组的索引和数组的长度的关系:长度减1就是最大的索引值

通过构造函数的方式定义一个数组

var array=new Array(5);//没有数据,空数组
console.log(array);
alert(array);

 就是一个数组---->字面量的方式
 var arr=[];
 console.log(arr);

var arr3=new Array(10,20,1000,40,50,60);
console.log(arr3);

 var arr=new Array(10,20,30,40,100);
  //console.log(arr[4]);//获取
  //设置
 arr[3]=1000;
 console.log(arr);

 字面量的方式更简单

 var arr=[10,20,30,40,50,60,70,80,10,20,3043,5];//空数组
 console.log(arr.length);

数组知识的总结

数组:存储一组有序的数据
数组的作用:一次性存储多个数据
数组的定义方式:
1.构造函数定义数组: var 数组名=new Array();
2.字面量方式定义数组: var 数组名=[];
var 数组名=new Array();空数组
var 数组名=new Array(值);数组定义了,有长度
var 数组名=new Array(值1,值2,值3....);定义数组并且有多个数据
var 数组名=[];空数组
var 数组名=[值1,值2,值3];有三个数据
数组元素:就是数组中存储的数据
数组长度:就是数组中元素的个数
数组索引(下标):从0开始,到数组的长度减1结束
通过下标设置数组的元素值: 数组名[索引]=值
通过下标访问数组的元素值: 数组名[索引]

    var arr1=new Array();//空数组
    var arr2=new Array(5);//长度为5的数组,每个数据的值是undefined
    var arr3=new Array(1,2,3,4,5);//长度为5分数组,
    var arr4=[];//空数组
    var arr5=[1,2,3];//长度为3的数组
    var arr6=["red","blue","green",1,true];//数组中元素的值的类型可以不一样

    var arr7=[];
    //设置数组的元素的值
    arr7[0]=10;
    arr7[1]=20;

遍历数组

    var arr=[10,20,30,40,50,60,70,80,90,100];
//小于的是数组的长度--个数
    for(var i=0;i<arr.length;i++){
      console.log(arr[i]);
    }

冒泡排序:把所有的数据按照一定的顺序进行排列(从小到大,从大到下)

    var arr = [10, 0, 100, 20, 60, 30];
    //循环控制比较的轮数
    for (var i = 0; i < arr.length - 1; i++) {
      //控制每一轮的比较的次数
      for (var j = 0; j < arr.length - 1 - i; j++) {
        if (arr[j] < arr[j + 1]) {
          var temp = arr[j];
          arr[j] = arr[j + 1];
          arr[j + 1] = temp;
        }
      }
    }
    console.log(arr);

函数:把一坨重复的代码封装,在需要的时候直接调用即可

函数的作用:代码的重用
语法:

function 函数名字(){
  函数体-----一坨重复的代码
 }

函数参数:

形参:函数在定义的时候小括号里的变量叫形参
实参:函数在调用的时候小括号里传入的值叫实参,实参可以是变量也可以是值

函数的返回值

在函数内部有return关键字,并且在关键字后面有内容,这个内容被返回了
当函数调用之后,需要这个返回值,那么就定义变量接收,即可

如果一个函数中有return ,那么这个函数就有返回值
如果一个函数中没有return,那么这个函数就没有返回值
如果一个函数中没有明确的返回值,那么调用的时候接收了,结果就是undefined
(没有明确返回值:函数中没有return,函数中有return,但是return后面没有任何内容)
函数没有返回值,但是在调用的时候接收了,那么结果就是undefined
变量声明了,没有赋值,结果也是undefined
如果一个函数有参数,有参数的函数
如果一个函数没有参数,没有参数的函数
形参的个数和实参的个数可以不一致
return 下面的代码是不会执行的

   function getSum(x, y) {
     var sum = x + y;
     return sum;//把和返回

   }
   //函数调用
   var result=getSum(10, 20);
   console.log(result+10);



    函数定义: 有参数有返回值的函数
   function getSum(x, y) {
     return  x + y;//把和返回
   }
   //函数调用
   var result=getSum(10, 20);
   console.log(result+10);



    有参数,有返回值的函数
   function f1(x,y) {
     return x+y;
   }
   //有参数,无返回值的函数
   function f2(x) {
     console.log(x);
   }
   //无参数,有返回值的函数
   function f3() {
     return 100;
   }
   //无参数无返回值的函数
   function f4() {
     console.log("萨瓦迪卡");
   }


   var sum=f1(10);
   console.log(sum);//

arguments----->数组使用------伪数组---

使用arguments对象可以获取传入的每个参数的值
    function f1() {
      var sum=0;
      for(var i=0;i<arguments.length;i++){
        sum+=arguments[i];
      }
      return sum;
    }

    console.log(f1(10,20,30));

命名函数和匿名函数

函数如果有名字,就是命名函数.
函数如果没有名字,就是匿名函数
函数的另一种定义方式
函数表达式:把一个函数给一个变量,此时形成了函数表达式
var 变量=匿名函数

 var f1=function (){
  
  };
//如果是函数表达式,那么此时前面的变量中存储的就是一个函数,而这个变量就相当于是一个函数,就可以直接加小括号调用了

函数可以作为参数使用,如果一个函数作为参数,那么我们说这个参数(函数)可以叫回调函数

//函数声明,fn是变量,fn是参数,
   function f1(fn) {
     fn();//函数调用---说明fn这个变量中存储的是一个函数
   }

   function f2() {
     console.log("哦,这也可以");
   }
   f1(f2);

作用域

全局变量:声明的变量是使用var声明的,那么这个变量就是全局变量,全局变量可以在页面的任何位置使用
除了函数以外,其他的任何位置定义的变量都是全局变量局部变量:在函数内部定义的变量,是局部变量,外面不能使用全局变量,如果页面不关闭,那么就不会释放,就会占空间,消耗内存

全局作用域:全局变量的使用范围
局部作用域:局部变量的使用范围

块级作用域:一对大括号就可以看成是一块,在这块区域中定义的变量,只能在这个区域中使用,但是在js中在这个块级作用域中定义的变量,外面也能使用;
说明:js没有块级作用域,只有函数除外
隐式全局变量:声明的变量没有var,就叫隐式全局变量
全局变量是不能被删除的,隐式全局变量是可以被删除的
定义变量使用var是不会被删除的,没有var是可以删除的

预解析:就是在解析代码之前

预解析做什么事?
把变量的声明提前了----提前到当前所在的作用域的最上面
函数的声明也会被提前---提前到当前所在的作用域的最上面

编程思想

编程思想:把一些生活中做事的经验融入到程序中
面向过程:凡事都要亲力亲为,每件事的具体过程都要知道,注重的是过程
面向对象:根据需求找对象,所有的事都用对象来做,注重的是结果
面向对象特性:封装,继承,多态 (抽象性)
js不是面向对象的语言,但是可以模拟面向对象的思想
js是一门基于对象的语言:
万物皆对象:

创建对象三种方式:

1.调用系统的构造函数创建对象
var 变量名= new Object(); Object 是系统的构造函数 Array

    //实例化对象
    var obj = new Object();
    //对象有特征---属性和行为---方法
    //添加属性-----如何添加属性?  对象.名字=值;
    obj.name = "小苏";
    obj.age = 38;
    obj.sex = "女";
    //添加方法----如何添加方法? 对象.名字=函数;
    obj.eat = function () {
      console.log("我喜欢");
    };

2.自定义构造函数创建对象(结合第一种和需求通过工厂模式创建对象)

    function createObject(name,age) {
      var obj = new Object();//创建对象
      //添加属性
      obj.name = name;
      obj.age = age;
      //添加方法
      obj.sayHi = function () {
        console.log("阿涅哈斯诶呦,我叫:" + this.name + "我今年:" + this.age);
      };
      return obj;
    }
    //创建人的对象
    var per1 = createObject("小芳",20);
    per1.sayHi();
    //创建一个人的对象
    var per2 = createObject("小红",30);
    per2.sayHi();

作用:一次性创建多个对象,把创建对象的代码封装在一个函数中

3.字面量的方式创建对象
字面量创建对象的缺陷: 一次性的对象

    var obj={};
    obj.name="小白";
    obj.age=10;
    obj.sayHi=function () {
      console.log("我是:"+this.name);
    };
    obj.sayHi();

函数和构造函数的区别；名字是不是大写(首字母是大写)

    function Person(name,age) {
      this.name=name;
      this.age=age;
      this.sayHi=function () {
        console.log("我叫:"+this.name+",年龄是:"+this.age);
      };
    }

自定义构造函数创建对象:先自定义一个构造函数,创建对象

    var obj=new Person("小明",10);
    console.log(obj.name);
    console.log(obj.age);
    obj.sayHi();

    var obj2=new Person("小红",20);
    console.log(obj2.name);
    console.log(obj2.age);
    obj2.sayHi();


    console.log(obj instanceof Person);
    console.log(obj2 instanceof  Person);

JSON格式的数据:一般都是成对的,是键值对,

json也是一个对象,数据都是成对的,一般json格式的数据无论是键还是值都是用双引号括起来的


    var json = {
      "name": "小明",
      "age": "10",
      "sex": "男"
    };

遍历对象,是不能通过for循环遍历,无序
key是一个变量,这个变量中存储的是该对象的所有的属性的名字

for (var key in json) {
      console.log(key + "===========" + json[key]);
    }

js学习中三种对象

1.内置对象----js系统自带的对象
2.自定义对象---自己定义的构造函数创建的对象
3.浏览器对象---BOM

内置对象: Math Date String Array Object

Math.PI----π---
Math.E----常数的底数
Math.abs(值)-----绝对值
Math.ceil(值)----向上取整
Math.floor(值)---向下取整
Math.random---随机数字
Math.sqrt()----开平方
Math.pow()----一个数字的多少次幂

Date

   var dt=new Date();
   var dt=+new Date();//一种特殊的写法,只适用于这个Date的对象
   console.log(dt);

   dt.getFullYear();//年
   dt.getMonth();//月---从0开始
   dt.getDate();//日
   dt.getHours();//小时
   dt.getMinutes();//分钟
   dt.getSeconds();//秒
   dt.getDay();//星期---从0开始
   dt.toDateString();//日期
   dt.toLocaleDateString();//日期
   dt.toTimeString();//时间
   dt.toLocaleTimeString();//时间
   dt.valueOf();//毫秒

字符串的常用属性:
length------>字符串的长度
charAt(索引),返回值是指定索引位置的字符串,超出索引,结果是空字符串
fromCharCode(数字值,可以是多个参数),返回的是ASCII码对应的值
concat(字符串1,字符串2,...);返回的是拼接之后的新的字符串
indexOf(要找的字符串,从某个位置开始的索引);返回的是这个字符串的索引值,没找到则返回-1
lastIndexOf(要找的字符串);从后向前找,但是索引仍然是从左向右的方式,找不到则返回-1
replace("原来的字符串","新的字符串");用来替换字符串的
slice(开始的索引,结束的索引); 从索引5的位置开始提取,到索引为10的前一个结束,没有10，并返回这个提取后的字符串
split("要干掉的字符串",切割后留下的个数);切割字符串
substr(开始的位置,个数);返回的是截取后的新的字符串
substring(开始的索引,结束的索引),返回截取后的字符串,不包含结束的索引的字符串
toLocaleLowerCase();转小写
toLowerCase();转小写
toLocaleUpperCase()转大写
toUpperCase();转大写
trim();干掉字符串两端的空格

Array.isArray(对象)---->判断这个对象是不是数组

instanceof关键字
concat(数组,数组,数组,...) 组合一个新的数组
every(函数)--返回值是布尔类型,函数作为参数使用,函数中有三个参数,第一个参数是元素的值，第二个参数是索引值,第三个参数是原来的数组(没用)
如果这个数组中的每个元素的值都符合条件,最后才返回的是true
filter(函数);返回的是数组中每一个元素都复合条件的元素,组成了一个新的数组
push(值);--->把值追加到数组中,加到最后了---返回值也是追加数据之后的数组长度
pop();--->删除数组中最后一个元素,返回值就是删除的这个值
shift();--->删除数组中第一个元素,返回值就是删除的这个值
unshift();--->向数组的第一个元素前面插入一个新的元素,----返回值是插入后的程度
forEach(函数)方法---遍历数组用---相当于for循环
indexOf(元素值);返回的是索引,没有则是-1
join("字符串");----返回的是一个字符串
map(函数);--->数组中的每个元素都要执行这个函数,把执行后的结果重新的全部的放在一个新的数组中
reverse();----->反转数组
sort();---排序的,可能不稳定,如果不稳定,请写MDN中的那个固定的代码
arr.slice(开始的索引,结束的索引);把截取的数组的值放在一个新的数组中,但是不包含结束的索引对应的元素值
splice(开始的位置,要删除的个数,替换的元素的值);一般是用于删除数组中的元素,或者是替换元素,或者是插入元素