526互联

Java登陆第二十三天——JavaScript对象、JSON、事件

发布时间 2023-12-12 21:51:26作者: ocraft

JS中声明对象的两种格式

方法1，new object()然后依次添加属性或方法

栗子：

    <script>
        //初始化对象
        var user=new Object();
        //给对象添加属性并赋值
        user.name="张三";
        user.age=18;
        //给对象添加方法
        user.say=function () {
            console.log(user.name+"今年"+user.age+"岁");
        }
        user.say();//调用say()方法
    </script>

运行效果如下：
image

方式2，在初始化对象时直接声明属性或方法

栗子：

    <script>
        //初始化对象
        var user={
            "name":"张三",
            "age":18,
            say:function () {
                console.log(user.name+"今年"+user.age+"岁");
            }
        }
        user.say();
        console.log(user);
    </script>

运行效果如下：
image

对象是变量的容器，对于Java和JS来说都是如此。那么两种不同的语言该如何进行数据的传输呢？

为了解决上述问题，JSON由此而生！

JSON

严格来说JSON并不是新语言，只是一种规范的数据格式。菜鸟教程JSON语法

它的语法和JS声明对象的方法2相同。

首先是一对花括号包括{}

然后是属性和属性值，用冒号隔开

属性值可以是对象，也可也是数组

在JS中声明一个符合JSON格式的字符串赋值给变量on
栗子：

    <script>
        //注意，此时只是符合JSON格式的字符串！！！！(也叫JSON串)
        //注意，此时只是符合JSON格式的字符串！！！！(也叫JSON串)
        //注意，此时只是符合JSON格式的字符串！！！！(也叫JSON串)
        var on='{"name":"张三","age":18,"dog":{"dogName":"二白","dogAge":3},"idol":["周杰伦","陈奕迅","林俊杰","邓紫棋","李宗盛"]}';
        console.log(on);
    </script>

运行效果如下：
image

在JS中，将上述字符串解析为对象JSON，变量名为json1

栗子：

    <script>
        var on='{"name":"张三","age":18,"dog":{"dogName":"二白","dogAge":3},"idol":["周杰伦","陈奕迅","林俊杰","邓紫棋","李宗盛"]}';
        console.log(on);
        //JSON.parse()方法可以将字符串转换为JSON
        var json1=JSON.parse(on);
        console.log(json1)
    </script>

运行效果如下：
image

JSON通常用于后端向前端传递数据。

后端会把对象转换为JSON，再传输给前端。

(Java中并没有内置JSON的解析，因此使用JSON需要借助第三方类库。)
常用的三个库：

  • Gson
  • Jackson
  • Fastjson

GSON的Maven坐标

        <!--GSON-->
        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
            <version>2.8.9</version>
        </dependency>

在Java中使用GSON把一个类转换成JSON栗子。

栗子：

import com.google.gson.Gson;

public class Test {
    public static void main(String[] args) {
        Person person = new Person("张三", 18, new Dog("二白", 5));
        System.out.println(new Gson().toJson(person));
    }
}
class Dog{
    private String name;
    private int age;

    public Dog(String name, int age) {
        this.name = name;
        this.age = age;
    }
    //getter和setter
}
class Person{
    private String name;
    private int age;
    private Dog dog;

    public Person(String name, int age, Dog dog) {
        this.name = name;
        this.age = age;
        this.dog = dog;
    }
    //getter和setter
}

运行效果如下：
image

JS常见类库

使用时查阅即可
菜鸟教程JSString类
菜鸟教程JSNumber类
菜鸟教程JSArray类
菜鸟教程JSDate类
菜鸟教程JSMath类

JS事件

事件指的是，浏览器或用户产生一些行为就会自动触发某些特定的JS方法。

常见的事件如下：菜鸟教程更多JS事件

事件 描述
onclick 鼠标的点击
ondblclick 鼠标的双击
onkeydown 键盘的按键按下
onkeyup 键盘的按键松开

事件如何绑定

  • 通过元素的属性绑定
  • 通过DOM动态绑定

DOM会在之后进行介绍，本篇文章都是通过元素的属性绑定

一个事件可以绑定多个方法

栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        button {
            font-size: 20px;
        }
    </style>
    <script>
    function f1() {
        console.log("f1方法被执行")
    }
    function f2() {
        console.log("f2方法被执行")
    }
    </script>
</head>
<body>
    <!--多个事件使用，隔开-->
    <button onclick="f1(),f2()">按钮</button>
</body>
</html>

运行效果如下：
image

一个元素可以绑定多个事件

栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        button {
            font-size: 20px;
        }
    </style>
    <script>
    function f1() {
        console.log("f1方法被执行")
    }
    function f2() {
        console.log("f2方法被执行")
    }
    function f3() {
        console.log("f3方法被执行，双击")
    }
    </script>
</head>
<body>
    <button onclick="f1(),f2()" ondblclick="f3()">按钮</button>
</body>
</html>

运行效果如下：
image