devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

零基础入门JavaWeb——JS的基本语法_web js语法

作者：weixin_40725706 | 2024-06-14 10:15:00

赞

踩

web js语法

一、JavaScript的起源

在1995年时，由NetScape公司在网景导航者浏览器上首次设计实现而成。NetScape在最初将其脚本语言命名为LiveScript，因为NetScape和SUN公司合作，网景公司管理层希望蹭Java的热度，因此取名为JavaScript。

JavaScript共分成三部分：

  1. ECMAScript（基本语法）
  2. BOM（浏览器对象模型）
  3. DOM（文档对象模型）

二、JavaScript的特性

2.1 脚本语言

JavaScript是一种解释型的脚本语言。不同于C、C++、Java等语言先编译后执行，JavaScript不会产生编译出来的字节码文件，而是在程序的运行过程中对源文件逐行进行解释。

2.2 基于对象

JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。但是面向对象的三大特性：封装、继承、多态中，JavaScript能够实现封装，可以模拟继承，不支持多态，所以它不是一门面向对象的编程语言。

2.3 弱类型

JavaScript中也有明确的数据类型，但是声明一个变量后它可以接收任何类型的数据，并且会在程序执行过程中根据上下文自动转换类型。

2.4 事件驱动

JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。

2.5 跨平台性

JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支持JavaScript脚本语言。目前JavaScript已被大多数的浏览器所支持。

三、JavaScript的基本语法

3.1 JavaScript的引入方式

3.1.1 内部脚本方式

  1. JavaScript代码要写在script标签内
  2. script标签可以写在文档内的任意位置
  3. 为了能够方便查询或操作HTML标签（元素）script标签可以写在body标签后面

3.1.2 外部脚本方式

在script标签内通过src属性指定外部xxx.js文件的路径即可。

  1. 引用外部JavaScript文件的script标签里面不能写JavaScript代码
  2. 先引入，再使用
  3. script标签不能写成单标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的引入方式</title>
    <!--
        建议在header中引入外部的js文件
    -->
    <script src="../js/outer.js"></script>
</head>
<body>
    <!--
        第一种引入方式：内部引入方式，在HTML文档内部。通过script标签去编写js代码
    -->
    <script type="text/javascript">
        alert("hello world")
    </script>

    <!--
        第二种引入方式：外部引入方式，在当前项目中创建一个js文件，然后在需要引入的HTML里面使用script标签引入
    -->
    <script type="text/javascript">
        showMessage()
    </script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

3.2 声明和使用变量

3.2.1 JavaScript数据类型

基本数据类型
  1. 数值型number：JavaScript不区分整数、小数
  2. 字符串string：JavaScript不区分字符、字符串；单引号、双引号意思一样。
  3. 布尔型boolean：true、false

在JavaScript中，其他类型和布尔类型的自动转换。

  • true：非零的数值，非空字符串，非空对象
  • false：零，空字符串，null，undefined
引用数据类型
  1. 所有new出来的对象
  2. 用[]声明的数组
  3. 用{}声明的对象

3.2.2 变量

  1. 关键字：var，其实ECMAScript6之后建议使用let
  2. 数据类型：JavaScript变量是弱类型的，可以接收任意类型的数据
  3. 标识符：严格区分大小写
  4. 变量使用规则：如果使用了一个没有声明的变量，那么会在运行时报错；如果声明了一个变量没有初始化，那么这个变量的值为undefined。

3.3 函数

3.3.1 内置函数

内置函数就是JavaScript中内置好的函数，可以直接使用。

弹出警告框
    // 弹出警告框：alert()
    alert("警告一下！")

  • 1
  • 2
弹出确认框
    //弹出确认框：confirm()，可以让用户选择确定或者取消，选择确定就返回true，否则就返回false。
    var flag = confirm("你确定要删除吗？")
    alert(flag)

  • 1
  • 2
  • 3
在控制台打印日志
    //在控制台输出日志：console.log()
    console.log("我是一条日志.....")

  • 1
  • 2

3.3.2 声明函数

声明函数就是使用者自己定义一个函数，有两种写法：

写法1：命名函数
    function showMessage(message) {
        console.log(message)
    }

  • 1
  • 2
  • 3
写法2：匿名函数
    var sum = function (a,b) {
        console.log("求"+a+"和"+b+"的和")
        return a+b
    }

  • 1
  • 2
  • 3
  • 4

声明一个函数，相当于创建了一个函数对象，将这个对象的引用赋值给变量total。如果不给这个对象赋值，可以将其作为匿名函数使用。

3.3.3 调用函数

JavaScript中函数本身就是一种对象，函数名就是这个对象的引用。而调用函数的格式是：函数引用()。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>声明和创建函数</title>
</head>
<body>
<script>
    //声明函数的两种方式：
    //    1. 命名函数（普通函数）
    //JS中声明函数的特点：
    //    1. 没有返回值类型
    //    2. 没有参数
    function showMessage(message) {
        console.log(message)
    }

    //     2. 匿名函数：声明函数的时候不取名字
    var sum = function (a,b) {
        console.log("求"+a+"和"+b+"的和")
        return a+b
    }

    // 调用函数，通过函数名调用即可
    showMessage("你好啊")

    // JS的函数，在声明时和调用时的参数个数可以不一致，所以在JS里面没有方法重载的概念。
    // 如果出现同名函数以后面的为准
    var total = sum(1,2)
    console.log(total)
</script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

3.4 对象

JavaScript中没有类的概念，对于系统内置的对象可以直接创建使用。

3.4.1 使用new关键字创建对象

    // 在JS中使用new的方式创建对象
    var obj1 = new Object()
    // 给对象的属性赋值
    obj1.age=10
    obj1.name="jay"
    obj1.address = "中国台湾省台北市"

    console.log(obj1.name)

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

3.4.2 使用{}创建对象（常用）

    // 在JS中使用{}的方式创建对象
    var obj2 = {
        "name":"张飞",
        "age":30,
        "address":"蜀国",
    }
    console.log(obj2.name)

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

3.4.3 给对象设置函数属性

    // 在JS中使用{}的方式创建对象
    var obj2 = {
        "name":"张飞",
        "age":30,
        "address":"蜀国",
        "showMessage":function (message) {
            console.log(message)
        }
    }
    console.log(obj2.name)

    obj2.showMessage(obj2.name)

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

3.4.4 this关键字

this关键字只有两种情况：

  • 在函数外面：this关键字指向window对象（代表当前浏览器窗口）
  • 在函数里面：this关键字指向调用函数的对象
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>this的介绍</title>
</head>
<body>
<script>
    var name = "刘备"
    this.name = "刘皇叔"
    function showName() {
        console.log(this.name)
    }

    var obj1 = {
        "name":"张飞",
        "showName":function () {
            console.log(this.name)
        }
    }

    showName()

    obj1.showName()
</script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

3.5 数组

3.5.1 使用new关键字创建数组

// 创建数组对象
var array = new Array();

  • 1
  • 2

3.5.2 使用[]创建数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的数组</title>
</head>
<body>
    <script>
        // 1. 创建一个数组，JS中的数组长度不是固定的，并且存放的数据类型也不是固定的。
        var arr = [1,2,3,"马超","赵云"]
        arr[5] = "黄忠"

        // reverse方法是将数组中的内容进行反转
        // arr.reverse()

        // join方法是将数组中的元素通过分隔符拼接成一个字符串
        var str = arr.join("&");
        console.log(str)

        // split方法是将字符串通过分隔符拆分成数组
        var strings = str.split("&");

        // pop方法是弹出数组中的最后一个元素
        console.log(strings.pop())

        // 2.对于数组而言最重要的就是遍历
        for ( i = 0; i <strings.length ; i++) {
            console.log(arr[i])
        }
    </script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32

3.6 JSON

3.6.1 JSON格式的用途

在开发中涉及到跨平台数据传输，JSON格式是首选。

3.6.2 JSON格式的说明

JSON数据两端要么是{}，要么是[]。

  1. {}定义JSON对象
  2. []定义JSON数组
  3. JSON对象的格式是：{key:value,key:value}
  4. JSON数组的格式是：[{key:value,key:value}，{key:value,key:value}]
  5. key的类型固定是字符串类型
  6. value的类型可以是基本数据类型，也可以是引用类型（JSON对象或JSON数组）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSON的介绍</title>
</head>
<body>
<script>
    // json的格式：{key:value,key:value}
    var person = {
        "name":"关羽",
        "age":18,
        "address":"蜀国"
    }

    var person2 = {
        "name":"关羽",
        "age":18,
        "address":"蜀国",
        "child":{
            "name":"关凤",
            "age":1,
            "address":"蜀国"
        }
    }

    console.log(person2.child.name)

    // json数组的格式：[{key:value,key:value}，{key:value,key:value}]
    var person3 = {
        "name":"关羽",
        "age":18,
        "address":"蜀国",
        "child":[
            {
                "name":"关凤",
                "age":1,
                "address":"蜀国"
            },
            {
                "name":"关平",
                "age":2,
                "address":"蜀国"
            }
        ]
    }


</script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51

3.6.3 JSON对象和JSON字符串互转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSON转换</title>
</head>
<body>
    <script>
        var person = {
            "name":"刘备",
            "age":18,
            "address":"蜀国"
        }

        // person对于js而言是一个对象
        // 将JSON字符串转成字符串
        var str = JSON.stringify(person);
        console.log(str)

        // 假设str是服务器传输到客户端的，在拿到json字符串之后，需要将其转成JSON对象才能解析出数据
        var p = JSON.parse(str);
        console.log(p.name)

    </script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

学海无涯苦作舟

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/717557
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号