day5-js基础语法

js基础

在什么地方写js代码

    内联的：写在标签事件相关的属性中，例如onclick属性,属性值就是js代码
    内部的：写在script标签的内容中，script标签理论上是可以放在整个html文件的任意位置
            但是一般放在head或者body中。
    外部的js：写在外部的一个js文件（后缀是js的文件中)中，
              然后再通过script标签设置src属性的值为js文件地址来导入。

1.js基础语法

1.注释
// 单行注释
/*
多行注释
多行注释
*/

2.标识符
标识符就是用来命名的(给变量命名，函数命名，对象命名)
js中要求标识符是由字母,数字,下划线和$符组成,数字不能开头
js中大小写敏感
console.log()-在控制台打印括号中的内容
3.常用数据类型
a.数字类型(Number) 布尔(Boolean) 字符串(String) 数组(Array) 对象(object) 函数(function)

数字类型(Number):包含所有的数字(整数和小数),支持科学计数法,不支持虚数

    100
    13.9    
    2e2     (2*10**2)

布尔(Boolean)
true false
字符串(String):用单引号或者双引号括起来的
'aaa' "awa"
数组(Array):相当于python中的列表
[12, 25, 52, 'sasd', [1,2]]
对象(object):python中字典和对象的集合

   var p1 = {
        name:'聂锐杰',
        age: 18,
        sex:'男'     
    }

Function(函数):相当于python中的函数

function function_name(){
        console.log('函数体')
    }
    function_name()

b.typeof(数据),获取数据类型
null、对象、数组返回的都是object类型

console.log(typeof(100)) #number
console.log(typeof['52'])  #object

c.new 类型名(数据)--将数据转换成指定的类型

var a = new Boolean(100)
    console.log(a) # true

d.常用的特殊值:underfined(相当于python，None),null(一般用来清空变量)

4.格式:js没有缩进的要求

2.变量

注意:不支持这种写法 -> x,y = 10, 20
var - 是js关键字，声明变量的时候用。var可以省略，省略的时候变量名后面必须赋值。
不省略的时候变量名后可以赋值，也可以不赋值，不赋值的时候默认值是undifined

变量名 - 标识符，不能是关键字，驼峰式命名规范

<script type="text/javascript">
   // 声明一个变量
   var name1
   console.log(name1) # undefined
   
   name2 = '小明'
   console.log(name2) # 小明
   
   var name3 = '小花'
   console.log(name3) # 小花
   
   // 同时声明多个变量
   var age=18, sex, score=60 
   console.log(age,sex,score) # 18 undefined 60
   
   age1 = 10, sex1 = '男'
   console.log(age1,sex1) # 10 "男"
   
   // 变量中的值:可以赋其他任何类型的值
   age = '老年'
   console.log(age) # 老年
</script>

3.运算符

不支持整除!!!!!!!
js中支持:数学运算符；比较运算符；赋值运算符;位运算符
1.数学运算符:+, -,* ,/ ,% ,**(js7), ++, --

var number1 = 1,number2
    number2 = number1++ // 相当于:number2=number1;number1 += 1
    console.log(number1,number2) // 2,1
    
    var number11 = 1,number12
    number12 = ++number11 // 相当于:number11 += 1;number12=number11
    console.log(number11,number12) // 2,2

2.比较级运算符:>,<,==,!=,<=,>=,===,!==.
==(相等) :判断内容是否相等
===(完全相等):判断值和类型是否相等

    console.log(5==5)      //true
    console.log(5=='5')   //true
    
    console.log(5===5)   //true
    console.log(5==='5') //false

3.复合运算:数学>比较>逻辑>赋值
可以通过()来改变运算顺序

4.分之结构

1.if 语句
a.if结构

    if(条件语句){
        代码段
执行过程：判断条件语句是否为ture，为true就执行{}的代码(不管缩进问题)
    }

b.if-else结构

if(条件语句){
            代码段1
        }
        else{
            代码段2
        }   

c.if- else if - else

  if(条件语句){
       代码段1
   }else if(条件语句2){
       代码段2
   }else if(条件语句3){
       代码段3
   }else{
       代码段4
   }

switch语句

   switch(表达式){
       case 值1：{
           代码段1
       }
       case 值2：{
           代码段2
       }
       case 值3：{
           代码段3
       }
       .....
       default:{
           代码段4
       }
   }
执行过程：先计算表达式的值，然后从上往下一一和case后面的值进行比较，找到第一个和表达式相等的case；
            然后将这个case作为入口，依次执行后边的所有的代码段，直到执行完或者遇到break为止。
            如果没有那个case的值和表达式的值一样，就直接执行default后面的代码段
            default可以省略！

    num = 10
    switch(num){
        case 1:
            console.log('1')
        case 2:
            console.log('2')
        case 10:
            console.log('10')
        case 11:
            console.log('11')
        default:
            console.log('default')
    }
10
11
default

5.循环结构

注意：取出来的是元素的下标或者key（属性名）
          序列可以是字符串、字典、数组

for (变量 in 序列){
循环体
}

str1 = 'abc'
    for (x in str1){
        console.log(str1[x])        
    }
    
    arr = [10,20,30]
    for(x in arr){
        console.log(x,arr[x])
    }
    
    object1 = {name:'小明',age:18}
    for (x in object1){
        console.log(x,object1[x])
    }

a
b
c
0 10
1 20
2 30
name 小明
age 18

for循环结构
for(语句1；表达式2；语句3){
循环体
}
执行过程：先执行表达式1，
再判断表达式2的结果是否为true，为true就执行循环体，执行完循环体在执行语句3
再判断表达式2的结果是否为true，为true就执行循环体，执行完循环体在执行语句3
依次类推，直到表达式2的结果为false，整个循环就结束。

指导思想:语句1：里面写魂环开始前的准备工作
         表达式2：控制循环次数
         语句3: 改变循环次数

// 计算：1+2+3+...+100
    for(num1=1,sum=0;num1<=100;num1++){
        // console.log(num1)
        sum += num1 
    }
    console.log(sum) #5050

2.while循环
a.while循环：和python的while循环一样
while(条件语句){
循环体
}

b.do-while循环
        do{
            循环体
        }while(条件语句)
        
执行过程： 先执行循环体，然后在判断条件语句是否为true；
           为true执行循环体，执行完又判断条件语句是否为true；
           以此类推，直到条件语句的结果为false，循环就结束。

6.函数

函数分为声明和调用,声明的时候不会执行函数体,只有调用函数才会执行函数体
1.函数的声明
a.和python相同的声明方式
function 函数名(参数列表){
函数体
return 返回值
}
b.以声明变量的形式声明函数
函数名 = function (参数列表){
函数体
return 返回值

   function sum(num1,num2){
       console.log('求两个数的和',num1, num2)
       return num1+num2
   }
   mul = function (num1,num2){
       console.log('求两个数的乘积', num1, num2)
       return num1*num2
   }
console.log(sum())
console.log(sum(5,8))
console.log(mul(4,10))
求两个数的和 undefined undefined
NaN
求两个数的和 5 8
13
求两个数的乘积 4 10
40

2.函数的调用：
函数名（实参列表）
调用的时候，保证每个参数都有值。
只能通过位置参数传参。
js中不支持不定长参数

7.字符串

字符串：由单引号或者双引号括起来的
1.转义字符：和python一样
2.字符串的长度：字符串.length
3.获取单个字符：字符串[下标]
注意：下标取值范围0~长度-1；超出范围取到的是undefined

 // 字符串长度
   console.log('adas1223'.length)
   
   // 获取单个字符
   console.log('abc123'[1])

4.相关运算符
'+' :将两个字符串拼接在一起产生一个新的字符串 注意：如果一个一个字符串加上其他的数据，会先将其他数据转换成字符串在相加
js中字符串不支持*运算符
比较运算(>,<,==,!=,===,!==)
。>、< - 和python一样，比较字符编码值大小

console.log('asc'+'123')
console.log('zxc'+12)
console.log(12+'zxc')
console.log('acv'*3) #NaN -> 是数字类型中的一个特殊值,表示一个不存在的数
console.log(10/0)    # Infinety -> 无穷大
console.log('abc'>'abaaaa') 

5.相关方法(看菜鸟的表)
match(正则表达式) - 根据正则表达式匹配结果
js中的正则表达式是写在//之间的

str1 = 'asd7ds7d78sa9d78d97asd98a7'
result = str1.match(/\d+/)
console.log(result)

8.数组

数组就是python中的列表
1.数组有序，可变的，里面的元素可以是任意类型的数据
2.增删改查

a.查(获取数组中的元素)
数组[下标]
数组.slice(开始下标，结束下标)-切片

arr1 = [1,2,3,'abc']
   console.log(arr1[3]) #abc
   // 获取数组的长度
   console.log(arr1.length) #4
   
   result = arr1.slice(0,2)
   console.log(result,arr1) # [1,2] # [1, 2, 3, "abc"]

b.增(添加元素)
数组.push(元素) - 将元素添加到数组的最后

arr1.push('hello')
console.log(arr1)    # [1, 2, 3, "abc", "hello"]

c.删(删除元素)
数组.pop() - >删除最后一个元素
数组.splice(开始下标，删除的个数) - 从数组指定的下标开始删除指定个数元素

arr1 = [1, 2, 3, "abc", "hello"]

arr1.pop()
console.log(arr1) #[1, 2, 3, "abc"]
  
arr1.splice(1,3)
console.log(arr1) #[1]

d.改(修改元素的值)
数组[下标] = 新值 - 修改指定下标的元素

数组.splice(开始下标，个数，多个其他参数) - 用其他参数替换开始下标后指定个数个元素

arr1 = [1,2,5,6,9]
arr1[0] = 10
console.log(arr1) # [10, 2, 5, 6, 9]
    
arr1.splice(1,2, 5,5)
console.log(arr1) # [10, 5, 5, 6, 9]

9.对象

js中没有python的类,但是只有对象和构造方法
1.对象的字面量
{属性名1：属性值1，属性名2：属性值2...}
2.使用对象属性
对象[属性名]
对象.属性

p1 = {
        // 对象属性
        name :'xiao',
        age : 18,
        tei : '1542265421',
        // 对象方法
        eat: function (){
            console.log('吃饭')
        }
    }
   console.log(p1['name'],p1.name) # xiao xiao
   p1.eat() # 吃饭

3.构造方法
function 类名(参数列表){
this.属性1 = 属性值1
this.属性2 = 属性值2
……
return this // 这句话必须写
}
这儿的this相当于python中的self，表示当前对象

function Person(name1,age1){
        this.name = name1
        this.age = age1
        this.tel = ''
        this.sex  ='男'
        // 对象方法
        this.eat = function(food){
            console.log(this.name+'在吃'+food)                    
        }   
        return this
    }
    p2 = Person('faker',18)
    p2.tel = '252210003332'
    p2.eat('面条') # faker在吃面条