day5 js基础语法

作者: 星龙断月 | 来源:发表于2019-02-11 20:19 被阅读0次

JS基础和WebAPIs的关联性
day5 js基础语法
day5 js基础语法
4/07day28_js基础
-----Web APIs-----
React-Native 随笔
web前端 -- Day23 js高级
022 JS操作
Dom
DOM

1、什么是js

<!--
    1.什么是js
    js的全称是：JavaScript，是web标准中的行为标准，主要负责网页中内容的变化
    js和python一样是脚本语言
    
    2.js代码写在什么地方
    a.内联js - 写在标签的事件相关属性中，例如：onclick属性
    b.内部js - 写在script标签中。script标签可以放在head和body
    c.外部js - 写在一个js文件中，然后再在html中通过script标签导入
    

    console.log() 相当于python中的print
    window.alert()   弹出弹框
    
    3.js能做什么
    a.可以修改标签内容
    b.修改标签属性
    c.修改标签的样式
    d.添加网页内容
    
-->


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!--外部js
            在script标签的src中设置要导入的js文件路径（可以是本地的，也可以是网络的）
        -->
        <script type="text/javascript" src="js/index.js">
            
        </script>
        
        
        <!--内部的-->
        <script type="text/javascript">
            //在这儿写js代码
            window.alert('内部js')
        </script>
    </head>
    <body>
        <!--内联的-->
        <button onclick="window.alert('你好')">按钮</button>
        
        
        
        <script type="text/javascript">
            index = 0
            while(index < 100){
                
                document.write('<div id="" style="background-color: hotpink; width: 100px; height: 100px; margin-left: 10px; margin-top: 10px;">    </div>')
                index += 1
            }
            document.write('<div>我是div</div>')
        </script>
        
        
        <p id="p1">我是段落!</p>
        <img id="img1" src="img/luffy2.png"/>
        <button onclick="document.getElementById('p1').style.color = 'red'">修改颜色</button>
        <button onclick="document.getElementById('img1').src = 'img/luffy1.png'">修改图片</button>
        <button onclick="document.getElementById('p1').innerText = 'hello js!'">修改内容</button>
        
    </body>
</html>

2、js基础语法



<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>




<script type="text/javascript">
    //1.注释
    //单行注释 - 在注释前加两个斜杠
    /* 多行注释
     * 第二行
     * 第三行
     */
    
    
    //2.标识符
    //由数字、字母、下划线、和$组成，数字不能开头，命名一般不用$,$有特殊功能
    
    //3.关键字
    //for, in, while, if, else, true, false, var, function等， 有特殊功能的标识符都是关键字
    
    //4.数据类型和字面量
    //a.数据类型和字面量
    //Number（数字）、String（字符串）、Boolean（布尔）、Array（数组）、Object（对象）、Function等
    //Number - 23，12.34（支持科学计数法），NaN（不存在的数字）
    //String - 表示所有字符串， 用单引号或者双引号引起来：'abc', "abc"
    //Boolean - 只有true和false两个值
    //数组 - 相当于python中的列表
    //对象 - 相当于python中的字典+对象；{属性名:属性值,属性名2:属性值...},属性值可以是任何类型；
    //属性名可以使用引号也可以不使用引号
    
    //Function - 相当于python中的函数
    
    //b.查看类型和类型转换
    //查看类型：typeof
    console.log(typeof(100))
    //类型转换：类型名（）\parseInt()\paresFloat()
    
    
</script>

3、变量

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>
<script type="text/javascript">
    //1.基本语法
    //格式1：变量名 = 值
    //格式2：var 变量名 = 值
    //单独声明一个变量
    name = '小明'
    
    //同时声明多个变量赋一样的值
    a = b = c = 10
    //同时声明多个变量赋不同的值：注意，使用var声明变量的时候，可以不给变量赋初始值，默认是underfined
    
    
    
</script>

4、运算符

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>
<script type="text/javascript">
    //js支持：数学运算符、比较运算符、逻辑运算符、赋值运算符、位运算符
    //1.数学运算符：+,-,*,/,%,++,--(和python比少了整除和幂运算，多了++，--)
    //+,-,*,/,%和python一样
    //++（自加1）, --(自减1)
    //变量++、++变量 - 让变量自己的值加1
    //变量--、--变量 - 让变量自己的值减1
    
    //2.比较运算符：>,<,>=,<=,==,!=,===,!==
    //结果都是布尔
    //比较大小和python一样
    //==判断值是否相等，!=判断值是否不相等
    //===判断值和类型是否相等，!==判断值和类型是否不相等（相等于python的==和！=）
    
    
    //3.逻辑运算符：&&(逻辑与)、||(逻辑或)、!(逻辑非)
    //运算规则和python一样
    
    //4.赋值运算符：=，+=， -=，*=，/=，%=
    //运算规则和python一样
    
    //5.位运算符：&, |, ~,^
    //和python一样
    
    //6.复合运算和python一样
    
    //7.三目运算符
    // ?:   -   条件语句?值1:值2  （条件语句成立结果是值1，否则是值2）
</script>

5、分之结构

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>
<script type="text/javascript">
    //js中的分之结构有两种：if语句、switch语句
    //1.if语句
    /*
     if(条件语句){
        条件语句成立执行的代码段
     }else if(条件语句2){
        条件语句2成立执行的代码段
     }else if(条件语句3){
        条件语句3成立执行的代码段
     }else{
        条件语句不成立执行的代码段
     }
     * */
    
    //2.switch语句
    /*
     a.语法：
     switch(表达式){
        case 值1:{
            代码段1
        }
        case 值2:{
            代码段2
        }
        case 值3:{
            代码段3
        }
        ...
        default:{
            代码段4
        }
     }
     注意：case后面的{}可以省略，代码段也可以没有
     b.执行过程：先计算表达式的结果，然后再从上往下一一和每个case后面的值进行比较，判断是否相等；
                找到第一个和表达式的结果相等的case，然后将这个case作为入口，依次执行后面的所有代码段
                直到执行到最后一个代码段或者遇到break才结束
                如果表达式的结果和每个case的值都不相等，就直接执行default后面的代码段（将default作为入口）
     
     * 注意：default一般放在最后
     * * */
    
</script>

6、循环

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>
<script type="text/javascript">
    //js中的循环结构有两种：for循环、while循环
    //1.for循环
    //1)python中for循环：for-in
    /*
     for(变量 in 序列){
        循环体
     }
     注意：不管序列是什么类型，变量取得都是下标/属性名
     * */
    
    //2)c的for循环
    /*
     a.语法:
     for(表达式1;表达式2;表达式3){
        循环体
     }
     
     b.执行过程相当于下面的while循环:
     表达式1
     while(表达式2){
        循环体
        表达式3
     }
     * */
    
    
    //2.while循环
    //1)python的while循环
    /*while(条件语句){
        循环体
    }
    */
    //2)c的do-while
    /*
     do{
        循环体
     }while(条件语句)
     
     执行过程：会先执行一次循环体，然后才去判断条件语句是否为true
     * */
    
</script>

7、函数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>
<script type="text/javascript">
    /*function 函数名(参数列表){
        
    }*/
    //a.不支持关键字参数
    //b.不支持不定长参数
    //c.不支持多个返回值
    
    //2.声明函数的时候就是声明类型是function的变量
    
    //3.匿名函数
    /*
     function(参数列表){
        函数体
     }
     注意：如果函数体重没有return，函数的返回值是underfined
     * */
</script>