day25 - js基础(总结)

1.js基础

1.1.什么是js
js是javacript的缩写,是web标准中的行为标准,负责网页中变化的部分
1.2.在哪儿写js代码
a.写在标签事件相关属性中,例如,按钮的onclick属性
b.写在script标签中
c.写在js文件中,在html中通过script标签将文件导入(src的属性是就是要导入的路径)
1.3.js能做什么
a.在网页的指定位置插入标签
b.修改网页中标签的内容
c.修改标签样式
1.4.怎么写js代码
javascript是一门编程语言,和python一样是动态语言也是脚本语言。但是和java没有关系
补充:window.alert(信息) - js代码,在浏览器上弹出一个对话框,对话框中显示显示指定的信息



    
        
        js基础
        
    
    
        
        

我是段落

2.基本语法

1.控制台输出
console.log输出的内容,和python中的print功能一样
2.注释
单行注释
多行注释
3.标识符
由字母.数字.下划线和$组成,数字不能开头
4.行和缩进
从语法角度,js代码怎么换行和缩进都无所谓,js通过大括号来确定一个代码块
5.常见的数据类型
数字(Number),布尔,字符串,数组,对象,函数
数字(Number) - 包含所有的数字,包含整数和小数;例如:100,12.5,-200,-2.12
支持科学计数法,不支持虚数
布尔(Boolean) - 只有两个
a.数字(Number) - 包含所有的数字,包括整数和小数。例如:100,12.5, -200, -3.14,3e2支持科学计数法,不支持虚数
b.布尔(Boolean) - 只有两个值true和false。这个两个值是关键字;分别代表'真'和'假'
c.字符串(String) - 使用单引号或者双引号引起来的字符集, 'abc', "abc"
d.数组(Array) - 相当于python中的列表, [12, 'abc', true]
e.对象(Object) - 相当于python中的字典和对象, {name: '小明', age:10}
f.函数(Function) - 相当于python中的函数

    a = 10
    a20 = 100
    a_10 = 200
    $12s = 23
    console.log(100)
    console.log('asd',200)
    console.log('我是字符串',"我是字符串!",3e2)
    
    obj1 = {name: '小明', age:10}
    console.log(obj1['name'], obj1.name)

    //声明函数
    function eat(food){
        console.log('吃'+food)
    }
    eat('面条')

3.变量

1.变量的声明
语法1:变量名 = 值
变量名 - 标识符,不能是关键字;
驼峰式命名(第一个单词首字母小写,后面每个单词首字母大写);见名知义
语法2:var 变量名 = 值 或 var 变量名
var - 声明变量的关键字
区别:声明的时候加var,变量可以不用赋值,默认是undefined;不加var就必须赋值,否则报错
补充:js中两个特殊的值 - undefined(没有,空)和null(清空)

name = 123
    console.log(name)
    
    var age = 10
    var sex  // 通过var声明变量的时候如果不赋值,默认是undefined
    console.log(age, sex)
    
    //重新给变量赋值
    name = '小明'
    age = 18
    sex = '男'
    console.log(name, age, sex)
    
    //同时声明多个变量,赋一样的值
    a1 = a2 = a3 = 10
    console.log(a1, a2, a3)
    //同时声明多个变量,赋不同的值
    b1=1, b2=2, b3=3
    var b1=1, b2=2, b3=3
    console.log(b1, b2, b3)

4.运算符

1.数学运算符: +, -, *, /, %, ++, --
前面四个运算符和python一模一样
++, --都是单目运算符,使用方式:变量++/--, ++/--变量
a. ++ - 自加1运算;让变量本身的值加1
b. -- - 自减1运算;让变量本身的值减1

    num = 10
    num++
    console.log(num)   // 11
    ++num 
    console.log(num)   // 12
    num--
    console.log(num)   // 11
    --num
    console.log(num)   //10
    
    
    // 坑:用一个变量单独使用++/--的时候,++/--放前面和放后面效果一样;
    //    如果是使用++/--运算的结果给另个变量赋值,++/--放前面是先自加/自减再赋值,
    //    ++/--放后面是先赋值再自加/自减
    num2 = 10
    num = ++num2   // 相当于:num2 += 1;  num = num2
    console.log(num, num2)  // 11  11
    
    num2 = 10
    num = num2++   // 相当于:num=num2; num2 += 1
    console.log(num, num2)  // 10   11
    
    //2.比较运算符: >, <, ==, !=, >=, <=, ===, !==
    // 结果是布尔值
    // 比较大小的和python一样
    // a. ==:判断值是否相等(相等)
    // b. ===:判断值和类型是否相等(全完相等) ,相当于python中的==, !==相当于python中的不等
    console.log(5 == 5)    //true
    console.log(5 == '5')  //true
    console.log(5 != 5)    //false
    console.log(5 != '5')  //false
    
    console.log(5 === 5)   //true
    console.log(5 === '5')  //flase
    console.log(5 !== 5)    //false
    console.log(5 !== '5')  //true
    
    //3.逻辑运算符:&&(逻辑与)、||(逻辑或)、!(逻辑非)
    //运算规则和使用方式和python的逻辑运算一模一样
    console.log('=================')
    console.log(true && true)       //true
    console.log(true && false)      //false
    console.log(false || true)      //true
    console.log(false || false)     //false
    console.log(!true)      //false
    
    //4.赋值运算符:=, +=, -=, *=, /=, %=
    //和python一模一样
    
    //5.三目运算符 - ?:
    //语法:
    //条件语句?值1:值2 - 判断条件语句的值是否为true,为true整个表达式的结果是值1否则是值2
    age = 16
    is_man = age>=18 ? '成年' : '未成年'
    console.log(is_man)
    
    //6.运算顺序
    //数学>比较>逻辑>赋值
    //如果有括号,先算括号里面的

5.分之结构

js中的分之结构有两种:if和switch
1.if语句
a.if
if(条件语句){满足条件会执行的代码}
b.if-else
if(条件语句){代码段1}else{代码段2}
c. if - else if - else
if(条件语句){代码段1}else if(条件语句2){代码段2}else if(条件语句3){代码段3}
else{代码段4 }
执行过程和python一模一样
2.switch语句

a.结构:
 switch(表达式){case 值1:代码段1
               case 值2:代码段2 
               default:代码段3}

b.执行过程:
使用表达式的值依次和后面每个case后面的值进行比较,看是否相等。
找到第一个和表达式的值相等的case,将这个case作为入口,依次执行后面所有的代码,直到执行完成或者遇到break为止。如果每个case的值都和表达式的值不相等, 就执行default后面的代码
注意:case后面必须是一个有结果的表达式

6.循环结构

js中有for循环和while循环两种
1.for循环
a.for-in
结构:
for(变量 in 序列){循环体}
执行过程和python一样,但是变量取到的不是元素,而是下标/key(属性名)
序列 - 字符串,数组,对象
b.C的for循环
结构:
for(表达式1;表达式2;表达式3){循环体}
执行过程:先执行表达式1;判断表达式2的值是否为true,如果为true就执行循环体,执行完循环体再执行表达式3;然后再判断表达式2是否为true,如果为true就执行循环体,执行完循环体再执行表达式3;
...依次类推,直到表达式2的结果为false为止(循环结束)
表达式1
while(表达式2){循环体
表达式3}

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

2.while循环
a.while循环
while(条件语句){循环体}
执行过程和python一模一样
b.do-while循环
do{循环体 }while(条件语句)
区别:do-while的循环体至少会执行一次

7.函数

1.函数的声明
function 函数名(参数列表){函数体}
js中的函数除了声明的关键字不一样,其他的都一样
参数可以设置默认值, 也可以通过关键字参数来调用函数
2.函数的调用
函数名(实参列表)
js中所有的函数都有返回值,默认是undefined
3.匿名函数(函数的字面量)
函数名 = function(参数列表){函数体}
4.变量的作用域
a.全局变量: 只要声明在函数外面的变量就是全局变量; 在函数中以‘变量名=值’的形式声明的变量也是全局的
b.局部变量: 以var关键字声明在函数中的变量,才是局部变量

8.字符串

1字符串字面量
a.使用双引号或者单引号括起来的字符集
b.除了普通字符以外还可以是转义字符:\n, \t,\, \', \"
c.\u4位16进制值对应的Unicode编码, \u4e00
补充:js中数据类型转换: 类型名()
4.字符串长度
console.log('hello world'.length)
5.字符串相关方法(见菜鸟教程:http://www.runoob.com/js/js-strings.html)
6.js中的数组值需要关注:a.怎么获取数组中的元素 b.数组对应的方法 c.元素可以是任何类型

你可能感兴趣的:(day25 - js基础(总结))