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>
运行效果如下：
方式2，在初始化对象时直接声明属性或方法
栗子：
<script>
//初始化对象
var user={
"name":"张三",
"age":18,
say:function () {
console.log(user.name+"今年"+user.age+"岁");
}
}
user.say();
console.log(user);
</script>
运行效果如下：
对象是变量的容器，对于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>
运行效果如下：
在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>
运行效果如下：
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
}
运行效果如下：
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>
运行效果如下：
一个元素可以绑定多个事件
栗子：
<!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>
运行效果如下：
