js的组成

ECMAScript（js语法）

DOM（页面文档对象模型）

BOM(浏览器对象模型)

js（用单引号）

• 行内式（一般少用on）
• 内嵌式（script）
• 外部式 (.js 后缀 引入是script src)

注释

1. 单行注释 //
2. 多行注释/* */ shift+alt+a可以改

输入输出语句

• alert 弹出窗口
• console 在控制台打印信息
• prompt 输入框

变量

1. 声明变量 var+变量名
   

2. 赋值     =号是赋值 （把右边的值给左边）
   

3. 一个变量被重复赋值后，它的原有变量会被覆盖 以最后一次赋值为准
   

4.  声明多个变量 用逗号隔开 写一个var 多个变量用逗号隔开
   

声变量的特殊情况

• 只声明不赋值 结果是未定义的
• 不声明不赋值 结果报错
• 不声明直接赋值用 可以使用（不推荐）

一.数据类型

变量的数据类型

• js属于弱类型的语言
• js的变量数据类型是只有程序在运行中，根据等号右面的值来确定的.
• js变量的数据类型是可以变得

数据类型的分类

js把数据类型分为两类

• 简单数据类型
• 复杂数据类型（object）

js简单数据类型

number boolean string undefined null

数字型

number PI

1. 八进制 0 ~ 7 以0开头就是8进制
2. 十六进制 0 ~ 9 a ~ f 以0x就是16进制
3. 数字最大值 Number.MAX_VALUE
4. 数字最小值 Number.MIN_VALUE
5. 无穷大 +Infinity
6. 无穷小 -Infinity
7. NaN —— 非数字
8. isNaN —— 用来判断非数字 并且返回一个值是数字返回false 不是数字返回true

字符串型

1.string

字符串嵌套（外双内单，外单内双）

字符串转义符

\n换行

\t tab缩进

\b是空格

boolean

字符串长度用length

字符串拼接 拼接方式： 字符串 + 任何字符 = 拼接之后的新字符；

+号口诀 数值相加，字符相连 书写 引引加加

布尔型

• true值为1 false值为0
• 未定义字符和字符串相连会连接在一块
• undefined和数字相加结果是NaN
• null是空值 和数字相加返回本数字

获取变量的数据类型

• typeof关键字
• prompt取值是字符型的

数据类型转换

• 其他转字符串 用+号实现
• log（num+''）;
• 其他转数字型
• parseInt（string） 将string转换成整数类型
• parseFloat（要转换的数据）转换为浮点型数值
• 隐士转换（除了加法都可以转换成数字型）

二.运算符

• 算术运算符

• 递增递减运算符

• 比较运算符

• 逻辑运算符

• 赋值运算符

算术运算符

• • • • / %（整除）
• 浮点数会有精度问题
• 表达式和返回值
• 右边表达式算完返回值给左边
• 递增递减运算符
• ++ --

前置递增

   ++num  =  num=num+1；
   先+1 后返回值
   var num = 10；
   ++num + 10 = 21
   num先 + 1 = 11 返回num

后置递增

    num++  num=num+1；
    先返回原值，后+1
    var num = 10;
    num++ + 10 = 20
    num++返回值 = 10
    num现在等于11

比较运算符

• 判断 == 会转变类型（会把字符串的数据转换成字符的数据）
• ！=是不等于
• 想让左右完全一样是 === 三个等号 , ！== 不全等与

逻辑运算符

     && 逻辑与 and  一个为假就是假  
     || 逻辑或  or  一个为真就是真
     ！ 逻辑非 not  取反（如果前面是真那就是假）
   短路运算
   当多个表达式时 左边表达式可以确定结果时就不再用右面的值了
   逻辑与   
   表达式1 && 表达式2
   如果表达式1为真，返回表达式2
   如果表达式1为假，返回表达式1   假的一般有 0 ‘’ null undefin NaN
   逻辑或
   表达式1 || 表达式2
   如果表达式1为真，返回表达式1
   如果表达式1为假，返回表达式2

赋值运算符

    = 直接赋值  
    += -= var      age = 2； age += 2；//4
    *= /= %=       age = 4   age *= 3；//12  
     

运算符优先级

   小括号 （）
   一元    ++ -- ！
   算数    先* / % + -
   关系    》 》= 《 《=
   相等    ==  ！=  ===  ！==
   逻辑    && ||
   赋值    =
   逗号    ，
  

循环

1.if语句的语法结构， if else语句 多分支语句

    if（条件表达式）{             
      执行语句;
         }
    
    if（条件表达式）{       
      执行语句;
     } else{
       执行语句;
         } 
         
    if（条件表达式）{       
      执行语句;
     } else if（条件表达式）{
       执行语句;
     } else if（条件表达式）{
       执行语句；
     } else{
        最后的语句；
     }

三元表达式语法结构

• 条件表达式 ？ 表达式1 ： 表达式2

  条件表达式为 真 返回 表达式1的值， 如果条件表达式为 假 返回表达式2 的值

var num = 10；var num1 = num > 9 ? '是的'：'不是'；    log（num1）； //表达式有返回值要拿变量去接

switch语句语法

特定值一般用swith（固定的数）

要求表达式里面的数值和 case里面的数值必须全等于才可以 不等于就不输出。

switch（表达式）{
    case value1:
        执行语句;
        break;
    case value2:
        执行语句；
        break;
      ....
      default:
               执行最后的语句; 
     }

for循环

for循环语法 一组重复执行的语句被称为循环体 要有终止条件

      初始化变量：就是用var 声明一个变量 用做计数器
      条件表达式：用来决定每一次循环是否继续执行 是终止条件
      操作表达式：每次循环最后执行的代码 用于计数器变量进行更新(递增或者递减 )
      
      for（初始变量; 条件表达式; 操作表达式）{
          循环体
      }
      for(var i = 1; i<=100; i++){
          log('hello,world')
      }
      先执行 i=1(这句话在for循环里面只执行一次)；判断是否满足i<=100, 满足执行log 
      最后执行i++ 
      接着执行i，i<=100 成立执行log i<=100不成立结束循环
      

断点调试

   找源代码 找到要断点的句子(要刷新页面) 然后按f11 就可以看程序了
   取消断点 找到断点句子 刷新

双层for循环

  *.外面循环循环一次 里面的循环执行全部
  
  for(外层的初始化变量; 外层的条件表达式; 外层的操作表达式){
  for(里层的初始变量；里层的条件表达式;里层的操作表达式 ){
   执行语句
  }
  }

while循环

当条件表达式为true 执行循环体 否则退出

里面应该也有计数器 初始化变量 操作表达式 完成计数器的更新 防止死循环

      while(条件表达式){
      循环体;
       某++;
  }    

do while循环

do while 先执行一次循环体 在判断条件 如果条件表达式为真 则继续执行循环体 否则退出循环。

do{
 循环体
 某++
} while(条件表达式){

}
   

continue and break：

continue 用于立即跳出本次循环 继续下次循环，继续下次循环

break 用于跳出整个循环(循环结束)

数组(Array)

数组是一组数据的集合,里面的每个数据称作元素，在数组中存放任意类型的元素 创建数组 new创建数组

   var arr(数组名) = new Array();
   

用数组字面量创建数组

    var arr(数组名) = [];   

声明数组并赋值叫做数组的初始化 数组里面的数据,叫做数组元素

获取数组元素

数组的索引 索引(下标)：用来访问数组元素的讯号(数组下标从0开始)。 数组名[索引号];

遍历数组

把数组的元素从头到尾访问一次

   var 数组名 = [值];
        for (var i = 0; i < arr.length i++){
        log(数组名[i]);
    }

数组的长度

用数组名.length可以访问数组元素的数量(数组长度)。 需要添加的是数组元素 arr[i] 不是计数器i

新增长度

修改length长度新增数组元素

 arr.length = [想要的数] //声明长度
 log(arr[数字])         //增加数值
 修改完成
 

修改索引号

  arr[数字] = '想要的值'  //新增数值 
      // 可以替换里面的元素
  

冒泡排序可以按照一定的顺序排序

  var arr = [1,2,3,4,5]
    for(var i = 0; i <= arr.length - 1; i++){
     for(var j = 0 j <= arr.length-i-1; j++){ //里层循环 管理每趟的次数 5-0-1=4  5-1-1=3      
                    
                    if(arr[j] > arr[j+1]){
                    var temp ;
                    temp = arr[j]
                    arr[j] = arr[j+1];
                    arr[j+1] = temp
                    }
      }
  }
             1 一共需要的趟数用外层for循环
               长度就是数组长度 -1       arr.length-1
             2 每一趟交换次数 用里层for循环
               长度就是数组长度减去次数  arr.length-i-1 
             3 交换两个变量
               把2个变量的值 前一个和后一个数组元素相比较
  
  

函数

函数就是封装了一段可以被重复调用的代码块 用函数的目的：让大量代码重复使用

函数使用

函数是可以互相调用的

声明函数 和 调用函数 声明：

  function 函数名(){
      函数体
  }
  函数是做某件事，函数名一般是动词
  函数不调用自己不执行
  

调用：

函数名(); 就可以了 调用含税不要忘了加();

函数的参数

形参是接收实参的 如果有两个实参用逗号+空格隔开

function 函数名(形参1,形参2...){// 声明函数的括号里面是形参(形式上的参数)
   
}
函数名(实参1,实参2....)//在函数调用的小括号里面是实参(实际参数)

形参和实参的执行过程
function cook(aru){ //形参
    return aru;
}
  log(cook('青椒肉丝')); //实参

实参大于形参取决于形参的个数

实参小于形参变成NaN NaN = num1 + undefined

函数的返回值

return语句

function 函数名(){
   return 需要返回的结果;
}
函数名(); 

return

1 函数只是实现某种功能，最后需要返回给函数的调用者 函数名() 通过return实现

2 只要遇到return 就把后面的结果 返回给函数的调用者 函数名() = return 后面的结果;

return 终止函数

return语句后代码不被执行 return只能返回一个值 如果函数有return 则返回的是return后面的值 如果函数没有return返回undefined

arguments的使用

arguments来获取函数 是当前函数的一个对象arguments对象中储存了传递的所有实参 是伪数组 不是在真的意义上的数组

1 有数组的length属性

2 按照索引号的方式进行存储

3 他没有真正数组的一些方法

匿名函数 格式

var fun = function(){

};
fun();

 fun是变量名不是函数名
 函数表达式声明方式跟变量差不多,只不过变量里面存的是值函数表达式存的是函数
  
  
  
  

作用域

1. 就是代码名字在某个范围内起作用和效果 ，目的是为了提高程序的可靠性更重要的是减少命名冲突

2. js作用域(es6)之前 全局作用域 局部作用域 全局作用域 整个script标签 或者单独的js文件 局部作用域 在函数内部就叫局部作用域 这个代码的名字只在函数内部其效果和作用

变量的作用域

全局变量: 全局作用域下的变量

***注意 如果在函数内部没有声明直接赋值的变量属于全局变量

局部变量: 在函数内部的变量(局部变量只能在局部使用 在全局使用会报错)

注意：函数的形参也属于局部变量

效率执行： 全局变量 占内存资源 (在浏览器关闭的时候才会销毁) 局部变量 节约内存资源 (在程序执行完毕就会销毁)

作用域链 内部函数访问外部函数的变量 采取的是链式查找的方式来决定取那个值这种结构叫做作用域链 就是就近原则

预解析(注意全局作用域和局部作用域)

1.js引擎分为两步 预解析 和 代码执行

(1) 预解析 js引擎会把js里面所有的var 还有function提升到当前作用域最前面

(2) 代码执行 按照代码书写的顺序从上往下执行

2.与解析分为变量与解析(变量提升) 和函数解析(函数提升)

(1)变量提升 就是把所有变量声明提升到当前作用域最前面 不提升赋值操作

(2)函数提升 就是把所有函数声明提升到当前作用域最前面 不提升函数 (函数内部赋值了,没有声明所以是全局变量)

log(num);    // undefined
 var num = 1;
  等于
 var num;
 log(num);
 num = 1;

fun();        //报错
var fun = function(){
log(22);
}
  等于
 var fun;
 fun();
 fun = function(){
 log(22);
 }

***
function f1(){                function f1(){      var a = b = c = 9; var a; a是局部变量
log(a);                        a = b = c = 9;  b c在函数里没有声明直接赋值是全局变量
log(b);                                        输出 999
log(c);
}
f1();                                          
log(c);
log(b);                                        输出99
log(a);                     a是局部变量不能在全局变量里面使用 会报错 
 //输出99999报错

js对象

对象是一个具体事物 属性：事物的特征，在对象中用属性来表示 (名词) 方法：事物的行为，在对象中用方法来表示 (动词)

创建对象的三种方式(object)：

用字面量创建对象

对象字面量是{}     里面有属性 和 方法   
                  方法冒号后面跟匿名函数
var obj = {
 name：'阿吧阿吧',   //后面跟逗号
 age：18， 
 sayHi:function(){
     log('hi');
 }
}

使用对象

调用对象的属性 我们采取 对象名.属性名
log(obj.name);

调用属性另一种 对象名['属性名']

log(obj['name']);

调用对象的方法 对象名.方法名(); //别忘了小括号

变量 属性 函数 方法 的区别

1.变量和属性的相同点都是用来存数据的

(1)变量：单独声明并赋值 用的时候必须写变量名 单独存在

(2)属性：在对象里面的不需要声明 使用必须是 对象.属性

2.函数和方法的相同点 都是实现某种功能 做某种事

(1)函数：是单独声明 调用的时候 函数名(); 是单独的存在

(2)方法：在对象中 调用时 对象.方法();

用 new Object创建对象

 var obj = new Object(); // 创建一个新对象
 obj.uname = '哈哈';
 obj.sayHi = function(){
    log('hi');
}
 利用等号赋值的方法 添加对象的属性和方法
 每个属性和方法之间用 分号结束

用构造函数创建对象

   1.构造函数首字母必须大写
   2.构造函数不需要return 就可以返回结果
   3.我们调用构造函数必须要使用new
   4.只要new White() 调用函数就创建了一个对象 bsxb{}
   5.属性和方法前面必须加 this
   function White(uname,age,sex,band){
   this.name = uname;
   this.age = age;
   this.sex = sex;
   this.band = band;
  }
   var bsxb = new White('和纱',19,'女','乐队核心');
   console.log(bsxb.name);
   var xc = new White('小木曾雪菜',18,'女','乐队主唱',);

(1)一次创建一个对象 里面很多属性和方法都是大量相同的 我们只能复制

(2)我们可以利用函数的方法重复这些相同的代码 这个函数叫构造函数

(3)里面封装的是对象 不是普通代码

(4)构造函数就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面

构造函数和对象

1.构造函数 抽象了对象的公共部分，封装到函数里面，泛指某一大类 它类似于Java的 类(class);

2.对象 特指某一个 通过new关键字 创建对象的过程称为对象实例化

new关键字执行过程

1.new 创建一个空的对象

2.this就会指向新对象

3.执行构造对象里面的代码 给空对象添加属性方法

4.返回对象

遍历对象

for in

for(变量 in 对象){}
for(var k in obj){
  console.log(k); // 得到的是 属性名
  console.log(obj[k]); //属性值
}
for in 里面的变量一般用 k

内置对象

js中对象分为三种 自定义对象 内置对象 浏览器对象

内置对象就是js里面自带的对象提供了常用或基本的功能 ;里面有 Math Date Array String

查文档的方法

查阅该方法的功能

查看里面参数的含义和类型

查看返回值的意义和类型

通过demo进行测试

Math.random() 随机数

Math.max 最大值 Math.min 最小值 Math.floor 向下取整 往小取值 Math.ceil 向上取整 往大取值 Math.round 四舍五入版 就近取整 .5往大的取 Math.PI 圆周率 Math.abs 绝对值

Date

Date 日期对象 是一个构造函数 必须需要new 来调用日期对象

常用写法 数字型 2023, 1, 10 字符串型'2023-1-10 6:6:6'

 var date  = new Date();
 var date1 = '2023-1-10 6:6:6';
 var year = date.getFullYear();    //年
 var month = date.getMonth() + 1;  //月
 var dates = date.getDate();       //日
    log(date.getHours());          //时
    log(date.getMinutes());        //分
    log(date.getSeconds());        //秒

数组

添加数组

1. push() 在数组末尾 添加一个或者多个数组元素 push 完毕后 返回的结果是 新数组的长度 数组名.push(添加值);

2. 在数组开头添加元素 unshift 完毕后 返回的结果是 新数组的长度

删除数组

1.pop() 删除最后一个元素 pop() 不跟参数 pop() 完毕后 返回的结果是删除的那个元素

2.shift() 删除第一个 shift() 不跟参数 shift()完毕后 返回的结果是删除的那个元素

翻转数组 reverse()

数组排序 (冒泡排序) sort()

  冒泡排序的解决方法
  var arr = [2121,43,651,1,5,7,88,9745]
  arr.sort(function(a,b){
  return a - b;  //升序的顺序   降序用 b - a
 });

数组索引方法

indexOf() 作用是返回该数组元素的索引号， 他是返回第一个满足条件的索引号， 如果在数组找不到元素 返回 -1；

数组转换为字符串

toSring() 将数组转换为字符串 join(分隔符)

  var arr1 =['Green','jork','mouth','face']
  console.log(arr1.join('&'));     
    
    

基本包装类型 ：

(1)就是把简单的数据类型包装为复杂数据类型 var temp = new Sring('haoye');

(2)把临时变量的值给 str str = temp;

(3)销毁临时变量 temp = null;

字符串的不变性

里面的值不可变 虽然看上去可以改变内容 但其实地址变了 内存中新开辟了一个内存空间

字符串对象 根据字符返回位置

//str.indexOf('要查找的字符',[起始位置])
var str = '东马，冬马和纱';
console.log('东');
console.log('马', 1);//从索引号1开始往后查找      
    
    

• 根据位置返回字符
  charAt(index)

var str = 'woshishei';

console.log(str.charAt(5));
//遍历所有数组
for(i = 0; i < str.length; i++){
  console.log(str.charAt(i));
}


 charCodeAt(index) 返回相应索引号的字符ASCII值  目的：判断用户a按下了那个键
console.log(str.charCodeAt(1));   

字符串操作方法

concat('字符串1','字符串2','字符串3'....)

var str = '白色';
console.log(str.concat('相簿'));  //白色相簿

substr('截取的起始位置','截取几个字符')

var str1 = '你是谁呢'
console.log(str1.substr(0,2));  //你是  

替换字符串 replace('被替换的字符','替换为的字符');

var str = '色色相簿'
console.log(str.replace('色','白'));

字符串转换为数组 split('分隔符') 前面学过join 数组转字符串

var str2 = 'red,pink,blue,green';
console.log(str2.split(','));    
    
    

js简单数据类型和复杂数据类型

简单数据类型和复杂数据类型

简单类型叫做值类型，复杂类型叫做引用类型 值类型 string number boolean undefined null 引用类型 用过new关键字创建对象 有 Objec Array Date

堆和栈

简单数据类型放栈里面

复杂数据类型放堆里面 在栈里面有地址 地址在指向堆里面的数据

APIs

变量声明 用let 或者 const; var淘汰了 const优先 不改变的变量用const 以后需要更改改为let

DOM 操作网页内容 开发网页特效和实现用户交互 DOM树 更直观的体现了标签和标签之间的关系 DOM对象 根据html标签生成js对象 HTML里面叫标签在js里面叫做dom对象 把网页内容当作对象处理