HTML5移动前端开发基础与实战第6章课件.pptx

1、第6章 JSON数据本章主要讲解如何用JSON格式描述数据，如何使用JavaScript读取JSON格式数据，以及如何在页面中显示这些数据。HTML5移动前端开发基础与实战（微课版）1熟练使用CSS的几种方式。2熟练使用CSS选择器。3熟练使用CSS常用属性。4熟悉BOX模型。学习目标5熟练掌握position、float、flex布局。6熟练掌握overflow属性。JSON是基于ECMAScript（欧洲计算机协会制定的JavaScript规范）的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得JSON成为理想的数据交换语言。JSON易于阅读和编写，同时

2、也易于机器解析。6.1 JSON入门3.1.5 position属性JSON指的是JavaScript对象表示法（JavaScript Object Notation），是一种轻量级的文本数据交换格式。JSON独立于语言和平台，具有自我描述性，容易理解。JavaScript、PHP、JSP、C#等都支持JSON解析。6.1.2 操作JSON数据操作基本JSON格式数据。演练5.1操作JSON数组。演练5.2循环JSON数组。演练5.36.1.3 JSON和字符串类型相互转换使用JSON.parse()方法将字符串转换为JavaScript对象。解析前要确保数据符合标准的JSON格式，否则会解析

3、出错。演练3.12使用 JSON.stringify()方法将JSON对象转换为字符串。演练3.12在页面中显示JSON数据。演练3.12本节学习JSON在线解析工具以及在Chrome中观察JSON数据。还通过一个演练，将商品信息以JSON格式描述并展示在前端。6.2 JSON实战6.2.1 JSON在线解析工具使用JSON解析工具的主要作用。检查JSON格式数据是否合法。更加友好的缩进方式查看数据。JSON在线解析工具非常多，本书通过一个进行讲解。JSON在线解析工具使用。演练6.76.2.2 在Chrome调试器中观察JSON数据通过在Chrome调试器中观察JSON数据，进一步熟悉JSON格式的层次结构。演练6.86.2.3 根据JSON数据动态绑定页面使用JSON格式描述一组商品信息，包括产品名称、价格、图片，然后在前端显示这些商品信息。演练6.9本章思考JSON对象、数组的任意组合都能熟练编写了吗？能读取JSON数据并显示在页面上了吗？Chrome调试技术掌握得怎样了呢？到现在应该是非常熟练了才行哦。123学 习 进 步！HTML5移动前端开发基础与实战（微课版）