当前位置:   article > 正文

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

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
推荐阅读
相关标签
  

闽ICP备14008679号