美文网首页
day25 - js基础(总结)

day25 - js基础(总结)

作者: 未醒的梦_19b0 | 来源:发表于2018-12-07 19:53 被阅读0次

    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代码,在浏览器上弹出一个对话框,对话框中显示显示指定的信息

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>js基础</title>
            <script type="text/javascript" src="index.js">
                window.alert('oythos! and js')  
            </script>
        </head>
        <body>
            <script type="text/javascript">
                arr = ['海贼王','火影']
                for (index in arr ){
                    message = '<h1>'+arr[index] + '</h1>'
                    document.write(message)
                }
                for (i = 0;i<20;i++){
                document.write('<h1>我是标题</h1>')}
            </script>
            <p id="p1">我是段落</p>
            <button onclick="document.getElementById('p1').innerHTML='我是'">修改内容</button>
            <button onclick="document.getElementById('p1').style='color:red'">修改字体颜色</button>
            <button onclick="window.alert('你好')">点我啊</button>
            
        </body>
    </html>
    

    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基础(总结)

          本文链接:https://www.haomeiwen.com/subject/mhkxhqtx.html