学习js一周汇总

1.js的历史：
javascript是1995年网景公司雇佣布兰登开发的全新语言

javascript最初是为了实现浏览器的客户端交互

ECMAjavascript与javascript的关系是，前者是后者的规格，后者是前者的一种实现。

2.js的组成
ECMASCRIPT：定义了javascript的语法规范，描述了语言的基本语法和数据类型。

Bom(browser object Mode):浏览器对象模型

Dom(document object Mode):文档对象模型

3.书写位置
内嵌式:在body标签结束之前放<script></script>

外链式：新建一个后缀名为.js的文件，<script src="js的地址"></script>

行内式：把js定义到标签身上

<a href="javascript:alert('')"></a>

4.js的注释

单行注释：//

多行注释：/**/

5.js的变量
变量：值变化的量，程序中用于存储数据的，本质上是内存的存储单元，理解为一个容器。

语法：var 变量名  (声明变量的关键字 变量名=值)
定义及赋值：var num=20

访问变量：console.log()
注意：一个变量名只能存储一个值，当在给一个变量名赋值时，前面的值就没有了，变量名称区分大小写。
变量名的命名规则：
1>由字母，数字，下划线，$符号组成
2>不能以数字开头
3>不能是关键字及有意义的单词
4>不能是保留字
规范：
语义化
小驼峰命名法；不能使用中文

6.内存结构
栈区域和堆区域

变量本质上是内存中的存储单元

 

7.数据类型
变量值的类型：两大类：基础数据类型和复杂数据类型

数值类型：number (所有数字)

特殊数字类型：NaN  非数字值

字符串类型：string（用引号引起来的）

如：var username='jack'

布尔类型：boolean

ture成立真，false成立假

空类型：类型名为object 值为null表示一个空对象

未定义类型：undefined 

var age(为赋值的为未定义类型)

8.判断数据类型
typeof 变量名/typeof(变量)

控制台显示数据类型（console.log(type of num)）

10.console.log(变量，变量)
11.数据类型转换
转成数据类型：Number(变量名)

Number('')--->0

Number(true)--->1

Number(false)--->0

Number(Null)--->0

Number(undefined)--->NaN

数据类型转换：
parseInt()

特点：1>从左向右转换；

           2>遇到数值字符串转为数字；

           3>遇到非数值结束转换

           4>可以取整

           5>如果第一个为非数值，输出NaN

parseFloat()

特点：1>从左向右转换；

           2>遇到数值字符串转为数字；

           3>遇到非数值结束转换

           4>可以保留有效小数

       5>如果第一个为非数值，输出NaN
其他类型转字符串
string()

转出来的值加''就是字符串类型

变量：.to string(有一些数据不能使用，如undefined,null)

使用加法运算（连接符）

有两层含义：1.表示连接符（+号两边任意一边为字符串就是连接符）

                      2.表示算数运算加法运算

隐式类型转换

10+'20'---->'1020'

10+''----->'10'

其他类型转布尔类型：
只有 '',0,null,undefined,NaN转为布尔类型为false,其他的转出都为ture.

运算符：

1.算术运算符：+，-，*，/，%（取余）

2.隐式类型转换：除了加法以外都会自动把两边转为数字在进行计算

3.赋值运算符:=/==/===/!=/!==/>=/<=/>/<

把右边的值赋给左边：

+= ----->a+=10------>a=a+10

-= ----->a-=10------>a=a-10

*=//=/%= ---->与上雷同

==与===的区别：

​​​两个等号只是比较值是否相等

三个等号比较值和类型是否相等

!=与!==的区别：

!=比较两边值是否相等

!==比较两边值和类型是否相等

逻辑运算符：
逻辑与&&：同为真则真

true&&true------>true

false&&true------>false

短运算：false&&true----->false

逻辑与运算时，如果左边为false，右边不参与运算。

逻辑或||：同为假则假

false&&false------>false

false&&true------>true

逻辑非！：非真则假，非假则真

!true---->false

!false---->true

自增自减运算：

 

学习js的第二天

逻辑分支语句：
程序=语句+数据结构+算法

1.程序语句：

var num ----->变量声明语句

num=100 ------>变量赋值语句

console.log(num) ------>控制台输出语句

alert('helloword')---->弹框语句（函数调用语句）

2.逻辑分支语句：
if语句
   语法:

     if(条件表达式){

                             var num // 变量声明语句

                             num = 100 // 赋值语句

                             console.log(num) // 控制台输出语句

                            alert('hellworld') // 弹框语句(函数调用语句)

                          }

if-else语句:
        if(条件表达式){

                                语句块1

                               }else{ 语句块2 }

if-else-if语句:
        if(条件表达式1){

                                    语句块1

                                }else if(条件表达式2){语句块2 }

if语句嵌套
          if(条件表达式){

                                     语句块

                                     if(条件){ }

                                  }

 

 switch语句:
switch多分支语句
语法:

switch(表达式值){

                             case 值1： 语句块1 [break]

                             case 值2: 语句块2 [break]

                             case 值3： 语句块3 [break]

                             default: 语句块 }

 三目运算符：

条件？语句1：语句2

 

 var a = 23
        var b = 34
        var max = a > b ? a : b
        console.log('最大值为'+max)

学习js的第三天【循环】

三大结构：顺序结构，条件分支结构，循环结构

while循环语法：先判断条件，再确定是否执行语句
while (条件表达式){

                                    循环体------>循环执行的语句块（当条件不成立时才能跳出while循环）

                               }

                                    循环体一定要有改变条件的语句，否则会变成死循环

三要素：初始值，条件，改变条件的语句

如：

var n=10

whlie(n<0){

                      console.log(n)

                      n--}

do while循环语法：先执行一次循环体，再判断条件，再确定是否执行语句
特点：至少都要执行一次程序

do{

         循环体------>循环执行的语句块（当条件不成立时才能跳出while循环）

      }while (条件表达式);

  循环体一定要有改变条件的语句，否则会变成死循环

for循环语法:

for (初始化；条件；改变条件的语句){  循环体}

示例：

 

break语句：终止循环和循环语句一起用

示例：

 

continue语句：结束本次循环，继续下一次循环

本次循环结束，continue后面的代码不执行，继续下一次循环。

 计数器：定义变量，初始值为0，如果满足条件加1

示例：

document.write语句：内容显示到页面 

 

双重for循环 ：for循环里套for循环（外层循环循环一次，里层循环就要循环完）

示例：

 

打印九九乘法表：

 学习js的第四天：函数

函数

定义：对任意功能的代码进行封装，在需要的时候进行调用

把函数比作一个盒子，盒子里面装代码，通过盒子的名称找到盒子执行里面的代码

1.盒子封装代码

2.调用盒子执行代码

语法：

function 函数名(){------------>定义函数
  函数体（要执行的代码）
}
函数名()------>函数的调用语句

 一、函数的作用

封装函数，封装目的：复用代码

二、函数的参数

function 函数名(形参){
       要执行的代码
}
函数名(实参)

 

形参：定义函数时，在函数名括号中定义的变量称为形参

实参:使用函数调用语句，调用函数时，传入的实际参数值

参数个数：可以定义多个

function 函数名(m,n){
   要执行的代码
  }
  函数名(100,200)
m,n与100，200为一一对应的关系

 参数个数不匹配时：形参个数多于实参

function 函数名(m,n){
   要执行的代码
  }
  函数名(100)
m=100,n=undefined

 实参的个数多于形参：没有接收的实参无意义

三、函数的返回值：return语句

作用：终止函数，不让它执行下面的代码，返回函数调用处，继续执行下面的代码

无返回值

function 函数名(){
      console.log('')
       var i=0
      return (终止函数)------>return后面的语句不会执行
      console.log('i')
  }
  函数名()

有返回值

function fun(){
      console.log('')
       var i=0
      return 100
      console.log('i')
  }
  fun()-------->会把100返回调用处，100的值就在fun()中,即fun(100)

函数类型:根据函数参数和返回值，分为四类

1.无参无返回值：

function fun(){
                函数体
       }
       fun()

2.有参无返回值：

function fun(m){
  要执行的代码
 }
 fun(100)

3.无参有返回值

function fun(){
      要执行的代码
      return 100
   }
   fun()-------->返回的100，在fun中，即fun(100)

4.有参有返回

function fun(m){
     console.log('')
     return m+100
  }
  var m=fun(200)

参数的默认值：

封装函数的示例：

 <!-- 封装比较两个数的大小函数 -->
    <script>
        function getMax() {
            var a = 35
            var b = 66
            var max = a
            if (b > max) {
                max = b
                console.log(max)
            }
        }
        getMax()
    </script>
    <!-- 封装闰年 -->
    <script>
        function getMax() {
            var year = 2020
            if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) {
                console.log(year + '是闰年')
            } else {
                console.log(year + '不是闰年')
            }
        }
        getMax()
    </script>

有参数示例：

<!-- 封装比较两个数的大小函数，实参，形参 -->
    <script>
        function getMax(a,b) {
            var max = a
            if (b > max) {
                max = b
                console.log(max)
            }
        }
        getMax(55,68)
    </script>

返回值：

学习js的第五天【作用域，递归，对象，数组】

一.作用域
===>变量起作用的范围

1.局部作用域:在函数体中作用范围
2.全局作用域:在整个js全局起作用
var num=100 ----->全局作用域
function f(){
  var num1=200 ----->局部作用域
  }
console.log(num1) 输出的结果会报错,说num1是不被定义的
console.log(num)  正常输出100,num为全局作用域 
作用域的访问规则:作用域的查找机制只能向上找,不能向下找
层层查找的关系,叫作用域链
1.会在当前作用域找访问变量

2.如果当前作用域没找到,到上级作用域去找

3.如果上级作用域没有,接着向上找,直到全局作用域

4.如果全局作用域也没有,直接报错.

赋值规则:

1.赋值前在当前作用域查找

2.上级作用域查找,找到赋值

3.上级作用域查找,直到全局作用域

4.如果都没有找到,将创建全局变量,然后赋值

内层函数可以访问外层函数作用域变量
外层不能访问内层作用域变量
二、递归函数
1.定义:函数自身调用自身,这样的函数称为递归函数(一定要有结束递归的条件)
function fun(){
  console.log('fun')
  fun()
} -------->没有结束递归的条件就会形成死递归
有结束递归的条件
function fun(n){
  if(n==1){ ------------>递归结束的条件
   return 1
}
console.log('fun')
fun(--)  ------------>改变递归条件的代码
}
fun(2)
注意:递归结束的条件
         改变递归条件的代码
2.递归的作用:
解决哪些问题:
1>后面的结果由前面的推导出来,可以采用递归简化代码

求1+2+3+4+.....+100前三项的和
function f(n){
 if(n==1){
  return1
}
return f(n-1)+n
}
var sum=f(3)
列题:
  <!-- 递归-斐波那契 1, 1, 2, 3, 5, 8, 13 ...   前两项都是 1， 后面项等于前两项之和    -->
    <script>
        function f(n){
            if(n<=2){
                return 1
            }
            return f(n-2)+f(n-1)
        }
        var m=f(7)
        console.log('第七项的值:'+m)
    </script>
 
 
 
   <!-- 求1*2*3*4........前n项的乘积
      分析：f(1)=1
            f(2)=f(1)*2
            f(3)=f(2)*3 ======>f(n)=f(n-1)n -->
<script>
    function f(n){
        if(n==1){
            return 1
        }
        return f(n-1)*n
    }
    var m=f(3)
    console.log('前三项的乘积:'+m)
</script>
 
 
 <!-- 求1+2+3+4+.....前三项的和 -->
    <!-- 分析:f(1)=1
         f(2)=f(1)+2
         f(3)=f(2)+3====》f(n)=f(n-1)+n -->
    <script>
        function f(n){
            if(n==1){
                return 1
            }
            return f(n-1)+n
        }
        var m1=f(5)
        console.log('前三项的和:'+m1)
    </script>

三.对象
1.对象==》object

   属性        方法

2.创建对象：

var jackobj(对象名)={}  -------》创建空对象

var jackobj={

                        name:jack, --------->表示对象的一个特征，属性

                       age:18}

1.创建
var obj{
         name:'jack',
         age:18,
         sex:'男'
       }
2.访问：对象名.属性名
console.log(obj.name)
3.修改属性值：对象名.属性名='要修改的名字'
obj.name='rose'
4.删除属性：delete 对象名.属性名
delete obj.name
5.添加属性：对象名.要添加的属性名=属性值
obj.height=180
6.遍历对象属性：for-in
for(var key in obj){  ------->可以遍历整个对象的所有属性名和属性值
console.log(key)}
7.访问属性值，属性名是变量的情况：
var _name='name'
console.log(obj.[_name])

示例：
 <!-- 创建一个名为student的学生对象，有属性学号num,性别sex,班级grade, 成绩score, 姓名name
    分别用字面量方式和构造函数方式创建.
    要求打印显示学生信息到页面 -->
        var studentobj={
            name:'acy',
            sex:'女',
            grade:'三年二班',
            score:'优秀',
            num:'11009998'
        }
        // 遍历对象属性
        for(var key in studentobj){
            console.log('key'+ ' ' +key+ ' ' +'value'+' '+studentobj[key])
        }
        // 通过对象名访问对象属性:【对象名.属性名】
        console.log('姓名'+studentobj.name)
        // 修改属性值：【对象名.属性名='要修改的名字'】
        studentobj.name='ljm'
        console.log(studentobj.name)
        // 删除属性 【delete 对象名.属性名】
        delete studentobj.num
        for(var key in studentobj){
            console.log('key'+' '+key+'value'+' '+studentobj[key])
        }
        // 添加属性 【对象名.要添加的属性名=要添加的属性值】
        studentobj.height=180
        console.log('身高'+studentobj.height)
        for(var key in studentobj){
            console.log('key'+' '+key+'value'+' '+studentobj[key])
        }
        // 访问属性值，属性名是变量的情况
        var _name='name'
        console.log(studentobj[_name])

3.数据类型：

var num=100 ------->number类型

var name='jack' ------->string类型

var obj={name:'jack',age='18'} --------->复杂数据类型

obj   数据类型名--------->  object

4.创建对象new语句：
字面量方式：var obj={}

构造函数方式：
var obj=new object()

obj.name='jack',

obj.age=18 

四.数组 Array
1.数组的作用：存储一系列有序数据的集合

2.创建数组：

var arr=[1,2,'jack',true]

3.索引号（下标）

4.访问数组元素

console.log(arr[0])

5.数组长度 （元素个数）：length属性

console.log(arr.length) ------->可以拿到数组的长度

6.遍历数组：for -------->循环变量表示数组索引号从0开始

for(var i=0;i<arr.length;i++){

console.log(arr[i])}

7.构造函数方式创建数组：

var arr = new Array() ------->构造函数方式
列：var arr=new Array(10,9,8)

字面量：var arr=[]-------->空数组

8.创建数组时只有一个元素，表示创建一个空数组长度为5

var arr=new Array(5)

9.直接控制台打印

console.log(arr)

示例：
 <!-- 现有5名学生，语文成绩分别是98，87，95，89，77分，请定义一个成绩数组存储学生成绩并遍历输出
    求5名学生总成绩？
    求大于平均分的学生成绩？
    有一个存储两个数的数组[3,6]写程序交换数组元素,输出[6,3] -->
        var scoreArr=[98,87,95,89,77]
        for(var i=0;i<scoreArr.length;i++){
            console.log(scoreArr[i])
        }
        var sum=0
        for(var i=0;i<scoreArr.length;i++){
            sum=sum+scoreArr[i]
        }
        console.log('总成绩:'+sum)
        var sum=0
        var average
        for(var i=0;i<scoreArr.length;i++){
            sum=sum+scoreArr[i]
            average=sum/scoreArr.length
            if(scoreArr[i]>average){
                console.log('大于平均分:'+scoreArr[i])
            }
        }
        console.log('平均分:'+average)
    </script>
    <!-- 有一个存储两个数的数组[3,6]写程序交换数组元素,输出[6,3] -->
    <script>
        var arr=[3,6]
        // console.log(arr)
        var temp=arr[0]
        arr[0]=arr[1]
        arr[1]=temp
        console.log(arr)