美文网首页
(25)day5-js基础语法

(25)day5-js基础语法

作者: 2333_11f6 | 来源:发表于2018-12-07 19:33 被阅读0次

5.1 什么是js

1.什么是js
js是JavaScript的缩写，是web标准中的行为标准，负责网页中变化的部分。

2.在哪写js代码。
a.写在标签的时间相关属性中，例如按钮的onclick属性
b.写在script标签中（将js代码作为script标签的内容）
c.写在js文件中，在html中通过script标签将文件导入。(script标签的src属性就是要导入的js文件的路径)

3.js能做什么
a.在网页指定位置插入标签
b.修改网页中标签的内容
c.修改标签样式

4.怎么写js代码
javascript是一门编程语言，和python一样是脚本/动态语言。和java没联系

注意：script标签理论上可以放在任何位置，但是一般放在head或body中。
补充：
window.alert（信息）-js代码，在浏览器上弹出一个对话框，对话框显示指定信息。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!--1.js代码写在哪-->
        <!--c位置3-->
        <script type="text/javascript" src="js/index.js">
            
        </script>
        <!--b位置2-->
        <script type="text/javascript">
            //在这写js代码
            window.alert('莲生三十二')
        </script>
    </head>
    <body>
        <!--a位置1-->
        <button onclick="window.alert('一剑光寒十九州')">不准点</button>
        <hr />
        <!--js能做什么-->
        <!--a.插入内容-->
        <script type="text/javascript">
            arr = ['海贼王','火影','一拳超人']
//          for(i=0;i<3;i++){
//              document.write('<h1>我是js代码写的标题</h1>')
//          }
            for (i in arr) {
                message = '<h1>'+arr[i]+'</h1>'
                //在网页中添加内容
                document.write(message)
            }
        </script>
        <!--b修改标签内容-->
        <p id="p1">我是段落</p>
        <p id="p2">我是段落2</p>
        <button onclick="document.getElementById('p1').innerHTML='我是js！！'">修改内容</button>
        <hr />
        <!--c修改标签样式-->
        <button onclick="document.getElementById('p2').style='color:red;font-size:30px;'">
            修改样式
        </button>
    </body>
</html>

5.2 js基本语法

<script type="text/javascript">

1.控制台输出
console.log(输出的内容) - 和print功能一样

    console.log(100)
    console.log('abc')
    console.log('abc',1233)

2.注释 - 和c一样
//单行注释
/*
*多行注释
*多行注释
*/

3.标识符
由字母数字下划线和$符组成，数字不能开头
a = 10
a20 = 122
a_2 = 111
$22 = 333
12a = 12 as^ = 200 报错

4.行和缩进
从语法来说js代码没有换行缩进要求，通过{}来确定代码块。

5.常见的数据类型：数字、布尔、字符串、数组、对象、函数（类型名大写）
a数字（Number）：包括整数和小数；如：100 12.5 -20 -3.14
支持科学计数法，不支持虚数

    console.log(3e2)        //300

b布尔（Boolean）：只有两个值true和false，这两个是关键字。代表真假
c字符串（String）：js中只有单行字符串，'' ""都可以
console.log('我是单引号',"我是双引号",3e3)

d数组（Array）：相当于python中的列表。
e对象（Object）：表现时像字典，用时像对象。{}
obj1 = {name:'小花',age:18}
console.log('字典方式取值',obj1['name'])
console.log('对象方式取值',obj1.name)

f函数（Function）：相当于python中的函数

    //声明函数
    function eat(food){
        console.log('吃'+food)
    }
    //调用函数
    eat('米饭')
    
</script>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

5.3 变量

<script type="text/javascript">

1.变量的声明

语法1： 变量名=值
变量名：标识符，不能是关键字；驼峰式命名，第一个单词首字母小写，后面每个单词首字母大写，见名知意

语法2：var 变量名 = 值 或 var 变量
var：声明变量关键字

区别：加var，变量可以不用赋值，默认undefined；不加var必须赋值，否则会报错
补充：js中两个特殊值：undefined（没有，空；常用于自动赋值空，如：打印一个未声明的变量时，会默认空）和null(清空，需要手动赋值)

    console.log(name)
    name1 = 2
    console.log(name1)   //2
    
    var age
    console.log(age) //undefined,通过var声明变量不赋值时，默认为undefined
    
    age = 18  //重新给变量赋值
    
    //同时声明多个变量赋同一个值
    a1 = a2 = a3 = 10
    console.log(a1,a2,a3) //10 10 10
    
    //同时声明多个变量赋不同值
    var a1 = 1, a2 = 2, a3 = 3 // 等价a1 = 1, a2 = 2, a3 = 3
    console.log(a1,a2,a3)  //1 2 3
</script>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

5.4 运算符

<script type="text/javascript">

1.数学运算符：+ - * / % ++ --
前5个和python一样
++ --都是单目运算符:变量++/-- ++/--变量
a.变量++：变量自增1
b.变量--：变量自减1

    num = 10
    num++ //11
    ++num //12
    num-- //11
    --num //10

坑：用一个变量单独使用++/--时，++/--放前后效果一样；
如果使用++/--给另一个变量赋值，++/--放前面是先自加/自减再赋值，放后面先赋值，再自加自减

    num2 = 10
    num = num2++  //num=num2;num2 += 1
    console.log(num,num2)  // 10 11
    
    num2 = 10
    num = ++num2     //num2 +=1;num=num2
    console.log(num,num2) // 11 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')   //false
    console.log(5 !== 5)     //false
    console.log(5 !== '5')   //true

3.逻辑运算符：&&（and，逻辑与） ||（or，逻辑或） ！（not，逻辑非）
运算规则，和使用方式和python一样
console.log('=========')

4.赋值运算符：= += -= *= /= %=
和python一模一样

5.三目运算符：？：
条件语句?值1:值2：判断条件语句值是否为true，是则表达式结果为值1，否则为值2

    age = 18
    is_man = age>=18?'成年':'未成年'
    console.log(is_man)

6.运算顺序
数学>比较>逻辑>赋值 如果有括号，其优先级最高

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

5.5 分之结构

<script type="text/javascript">
  • 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{
代码段3
}
执行过程和python一模一样*/

    num = 10
    if(num%2){
        console.log('奇数')
    }else{
        console.log('偶数')
    }

2.switch语句

a：结构：
switch（表达式）{
case 值1：
代码段1
case 值2：
代码段2
default：
代码段3
}

b：执行过程
使用表达式值按顺序与case后的值进行比较，看是否相等，找到第一个和表达式相等的case，将此case作为入口，依次执行后面所有的代码，直到执行完成，或者遇到break为止。如果每个case都和表达式不等，就执行default后的代码。

注意：case后面必须是一个有结果的表达式

    a=10
    switch(a){
        case 5:
            console.log('表达式1')
        case 6:
            console.log('表达式2')
        case 10:
            console.log('表达式3')
        case 11:
            console.log('表达式4')
        default:
            console.log('表达式5')
    }
    //练习：用一个变量保存10分制成绩，根据成绩打印情况：0-5不及格，6及格，7-8良好，9-10优秀
    score = 10
    switch (score){
        case 0:
        case 1:
        case 2:
        case 3:
        case 4:
        case 5:
            console.log('不及格')
            break
        case 6:
            console.log('及格')
            break
        case 7:
        case 8:
            console.log('良好')
            break
        default:
            console.log('优秀')
    }
</script>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

5.6 循环结构

<script type="text/javascript">

js循环结构：for、while

1.for循环
a.for-in
for（变量 in 序列）{
循环体
}
执行过程和python一样，但是变量取到的不是元素。而是下标/key(属性名)
序列：字符串，数组，对象

    for(x in '543210'){
        console.log(x,'543210'[x])
    }
    
    arr1 = [1, 'aaa', true, 12.8]
    for(x in arr1){
        console.log(x,arr1[x])
    }
    
    person1 = {name:'小王八',age:10}
    for(x in person1){
        console.log(x,typeof(x))
        console.log(person1[x])
    }

b.c的for循环
结构：
for(表达式1；表达式2；表达式3){
循环体
}
执行过程：先执行表达式1，然后判段表达式2的值是否为true，如果为true执行循环体，执行完循环体后执行表达式3，再判断
表达式2的值是否为true，如果为true执行循环体，执行完循环体后执行表达式3。。。
相当于：
表达式1
while(表达式2){
循环体
表达式3
}

    console.log('==========')
    for(i=1;i<=100;i++){
        i += i
        console.log(i)
    }
    console.log(i)

2.while循环

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

    //1+2+3+。。。+100（do-while）
    i=sum=0
    do{
        sum+=i
        i++
    }while(i<101)
    console.log(sum)
</script>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

5.7 函数

<script type="text/javascript">
  • 函数

1.函数声明
function 函数名(参数列表){
函数体
}
js中函数除了声明关键字不一样，其它的都一样
参数可设置默认值，也可以通过关键字参数调用

    function my_sum(num1,num2=2){
        return num1+num2
    }

2.函数调用,js中函数都有返回值，默认是undefined

    console.log(my_sum(1,2))
    console.log(my_sum(1))
    console.log(my_sum('￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥'))
    function f1(){
        console.log('我没有return值')
    }
    console.log(f1(), typeof(f1()))
    console.log(my_sum('￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥'))

3.匿名函数（函数的字面量）
函数名=function（参数列表）{函数体}

    var quan_ju_1 = 1008 //此处可以在函数中修改，也可在外修改
    quan_ju = 1004
    f2 = function(a,b){
        ju_bu = 10
        var ju_bu_b = 100   // 局部变量
        console.log(a,b)
        console.log(quan_ju)
        return a*b
    }
    console.log(f2(3,4)) 
    console.log('+++++++++++++++++++++++') 
    console.log(ju_bu)

4.变量作用域

a.全局变量：只要声明在函数外面的变量就是全局变量；在函数中以 变量名=值 的形式声明的变量也是全局的，前提是函数被调用过
b.局部变量：以var关键字声明在函数中的变量，才是局部变量

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

5.8 字符串

<script type="text/javascript">

1.字符串字面量

a.使用双引号或者单引号括起来的字符集
b.除了普通字符外还可以是转义字符\n \t \ ' "
c.\u四位16进制值对应的Unicode编码，如：\u4e00 (一)

    str1 = 'abc\n314143'
    console.log(str1)       // 换行

2.获取字符
字符串[下标]：获取单个字符
下标：范围是0~长度减1；下标越界不会报错，取到的值是undefined
js中没有切片方法

    str2 = 'hello js'
    console.log(str2[1])   // e

3.相关运算+
支持字符串和其他任何数据相加，是将其他数据全部转换成字符串，然后再拼接。

    console.log('123'*2)   // NaN;js中一个特殊的值，类似undefined、null，用来表示一个不存在的数值。
    str3 = 'a'+[1, 'e', true]
    console.log(str3)         // a1,e,true
    
    //补充：js中数据类型转换 类型名(需要转换的数据)
    num_str = String(12314)
    str_num = Number('232431.12')
    str_num = Number('wqw232431.12')   // NaN

4.字符串长度

    console.log('hello world'.length)    // 11

5.字符串相关方法(见菜鸟教程)

    console.log('abc'.charAt(2))     // c
    console.log(String.fromCharCode(97))  // a
    console.log('abcd12abc23hhh123'.match(/\d+/)) //数字出现1次或多次
    console.log('abcd12abc23hhh123'.replace(/\d+/g,'*')) //abcd*abc*hhh*
    console.log()
    console.log()
    console.log()
    console.log()
    console.log()

6.js中数组只需要关注：1.怎么获取元素 2.数组的方法 3.元素可以是所有类型

    arr = []
    console.log(arr)
    
</script>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

相关文章

  • (25)day5-js基础语法

    5.1 什么是js 1.什么是jsjs是JavaScript的缩写，是web标准中的行为标准，负责网页中变化的部分...

  • day5-js基础语法

    1.js基础语法 代码示例 2.变量 代码示例 3.运算符 代码示例 4.分支结构 代码示例 5.循环结构 代码示...

  • day5-js基础语法

    js基础 1.js基础语法 1.注释// 单行注释/*多行注释多行注释*/ 2.标识符标识符就是用来命名的(给变量...

  • 二阶段Day5-js基础语法

    一、介绍 31.什么是js js是javascript的缩写。是一门专门用来处理网页中的行为的脚本语言，也是web...

  • 二阶段day5-JS基础语法

    一、基础语法 二、变量 三、运算符 四、分支结构 五、循环结构 六、函数 七、字符串 八、数组 九、对象

  • 【Android】知识点汇总，坚持原创ing

    Android基础 Java基础 Java基础——Java内存模型和垃圾回收机制 语法基础 语法基础——C语法基础...

  • java

    语法基础1.1 java初体验（语法基础）1.2 变量和常量（语法基础）1.2 变量和常量（语法基础）1.4 流程...

  • 软帝学院：80道java基础部分面试题（四）

    Java基础部分 基础部分的顺序：基本语法，类相关的语法，内部类的语法，继承相关的语法，异常的语法，线程的语法，集...

  • 快速上⼿ Kotlin

    快速上⼿ Kotlin 基础语法 函数基础语法 与 Java 代码互调 Java 与 Kotlin 交互的语法变化...

  • 01-25js基础语法

    什么是js 一：js基础语法 二：变量 三：运算符 四：分之结构 //js中的分之结构有两种：if语句、switc...

网友评论

      本文标题：(25)day5-js基础语法

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

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|(25)day5-js基础语法|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！