3.3 JavaWeb-JavaScript

目录

3.3.1 JavaScript

3.3.1.1 JavaScript概述

3.3.1.2 JavaScript用法

3.3.2 基础语法

3.3.2.1 JavaScript 输出

 3.3.2.2 JavaScript 运算符、控制语句、语法

3.3.2.2.1 增强for循环

 3.3.2.3 JavaScript 数据类型

3.3.3 API

3.3.3.1 Math

3.3.3.2 Date

3.3.3.3 Array数组

数组的声明

 数组的创建

数组的赋值 

3.3.3.4 String字符串

3.3.4 函数

3.3.5 BOM对象

3.3.5.1 window

3.3.5.2 location

3.3.5.3 history

3.3.5.4 screen

3.3.6 DOM对象

 3.3.6.1 获取标签

3.3.6.2 标签属性

3.3.6.3 事件

3.3.6.3.1 什么是事件

3.3.6.3.2 什么是事件绑定

3.3.6.3.3 两种事件绑定方式

3.3.6.3.4常见事件

3.3.6.4 节点操作

3.3.6.5 JSON

3.3.6.5.1 什么是JSON

 3.3.6.5.2 JSON语法

 3.3.6.5.3 数组保存JSON

  3.3.6.5.4 JSON格式

  3.3.6.5.5 示例

---

3.3.1 JavaScript

3.3.1.1 JavaScript概述

JavaScript与Java的关系可谓是，雷锋与雷峰塔——毫无关系。

JavaScript 是 Web 的编程语言，JavaScript是一种面向对象思想的脚本语言，通过JavaScript可以实现用户与静态网页之间的交互，也称为动态网页技术（JavaScript+HTML+CSS）。

1. HTML 定义了网页的内容
2. CSS 描述了网页的布局
3. JavaScript 控制了网页的行为

本系列重点为后端，所以前端内容可参考专业的网站进行学习，本节只涉及局部知识：

JavaScript 对象 | 菜鸟教程

3.3.1.2 JavaScript用法

HTML 中的 Javascript 脚本代码必须位于  标签之间。

Javascript 脚本代码可被放置在 HTML 页面的  和  部分中。

3.3.2 基础语法

3.3.2.1 JavaScript 输出

• 使用 window.alert() 弹出警告框。
• 使用 document.write() 方法将内容写到 HTML 文档中。
• 使用 innerHTML 写入到 HTML 元素。
• 使用 console.log() 写入到浏览器的控制台。

 3.3.2.2 JavaScript 运算符、控制语句、语法

虽然JavaScript与Java没有血缘关系，但是在语法、命名等规则方面和Java几乎一样，只要按 Java的规则来就不会出错。

运算符、控制语句等和其他的编程语言都接近。

3.3.2.2.1 增强for循环

3.3.6.4 节点操作

通过js创建对应的标签对象并放入页面显示，经常用于页面的动态生成（页面数据由后台获取）。

    添加 删除
    

        

            
id
name
age
        
        

    

3.3.6.5 JSON

3.3.6.5.1 什么是JSON

JSON:JavaScript Object Notation(JS对象简谱）是一种轻量级的数据交换格式。

JSON属于前端对象，用于保存数据，是前后端数据交互的基石，在前端通过.属性方式获取值，书写语法类似于java中的map集合,[key:value]形式 ，key必须为字符串，value为任意类型数据。

 3.3.6.5.2 JSON语法

格式

var 变量名={"key1":value1,"key2":value2,"key3":value3}

{}包裹数据

数据之间用","分割

key必须为字符串，所以用""

 JSON的存值与取值

方式一：只能固定调用某一个key对应的value。

方式二：可以指定key获取数据，更加灵活。
      

 3.3.6.5.3 数组保存JSON

一个JSON对象只能保存一个对象数据，但是前后台交互可能返回多个对象的数据。将JSON保存到数组里返回给前台，就可以解决这个问题。

  3.3.6.5.4 JSON格式

前面介绍了JSON的格式以及使用方法，在实际的开发中，不同的系统会有不同的JSON格式，JSON里不仅有数据还有其他的提示信息。

 var dataJson={
        'code':200,
        'msg':'信息',
        'data':[{'id':1,'name':'张三','age':18},{'id':2,'name':'李四','age':28},{'id':3,'name':'王五','age':38}]
    };

  3.3.6.5.5 示例

后台处理JSON并返回给前台，在后面的Servlet会讲解。

前台接收JSON并动态生成表格

---

上一篇：

下一篇：