Базовые понятия JavaScript: объект в JS, JSON, stringify, JS массивы, nested объекты

Базовые понятия JavaScript: объект в JavaScript, JSON, stringify, Javascript массивы, nested объекты.

Обзор приложения Spring MVC + AngularJS + Bootstrap + HTML5
Используемые технологии и библиотеки
  • Spring MVC 4.2.4.Release
  • IntelliJ IDEA 15.0.2

1. Описание задачи

Для изучения фреймворка AngularJS в начале необходимо рассмотреть такие понятия как: объект в JavaScript, JSON, stringify, JS массивы, Nested объекты. Создадим простую веб страницу с JavaScript кодом и описанием базовых понятий, которые нам понадобятся в следующих статьях по AngularJS.

2. Структура проекта

javascriptBasicsStructure

Для этой статьи будет использована только одна jsp страница — angularjson. Внутри будут рассмотрены некоторые базовые понятия из JavaScript, которые нам понадобятся в дальнейшем.

3. JavaScript основы

В этой статье мы не будем изучать JavaScript, а лишь рассмотрим несколько базовых понятий и возможностей этого языка. Это необходимо для более глубокого понимания дальнейших статей по изучению AngularJS.

3.1 JavaScript object, stringify, parse

В JavaScript объект можно задать с помощью ключевого слова var и перечисления полей внутри фигурных скобок.

Метод JSON.stringify() преобразует значение JavaScript в строку JSON, возможно с заменой значений, если указана функция замены, или с включением только определённых свойств, если указан массив замены. Общий синтаксис JSON.stringify(value[, replacer[, space]]), где

  • value -значение, преобразуемое в строку JSON.
  • replacer (необязательный) — если является функцией, преобразует значения и свойства по ходу их преобразования в строку; если является массивом, определяет набор свойств, включаемых в объект в окончательной строке.
  • space (необязательный) — делает результат красиво отформатированным (расставляя пробелы).

Метод JSON.parse() разбирает строку JSON, возможно с преобразованием получаемого в процессе разбора значения. Общий синтаксис JSON.parse(text[, reviver]), где

  • text — Разбираемая строка JSON. Смотрите документацию по объекту JSON для описания синтаксиса JSON.
  • reviver (необязательный) — если параметр является функцией, определяет преобразование полученного в процессе разбора значения, прежде, чем оно будет возвращено вызывающей стороне.

Скрипт js:

Результат работы скрипта:

jsObjects

3.2 Массивы JavaScript

JavaScript массив задается с помощью перечисления значений в квадратных скобках через запятую.

Скрипт js:

Результат работы скрипта:

jsArrays

3.3 Массивы объектов JavaScript

Массив объектов JavaScript задается аналогично созданию объекта и массива, т.е. в квадратных скобках мы перечисляем объекты, которые можно создать в фигурных скобках с указанием полей объекта.

Скрипт js:

Результат работы скрипта:

jsArraysObjects

3.4 Nested объекты JavaScript

Nested (вложенный) объект JavaScript создается путем определения внутри JS объекта еще одного вложенного объекта. В данном примере nested объектом является information.

Скрипт js:

Результат работы скрипта:

jsNestedObject

3.4 Полная JSP страница

angularjson.jsp:

В приложении она выглядит так:

jsFullPage

 

Исходные коды

MVC_AngularJS_Html5 full project — полный проект Spring MVC + AngularJS + Bootstrap + HTML5.

18. AngularJS JSON.stringify — код для этой части

Обзор приложения Spring MVC + AngularJS + Bootstrap + HTML5
Share Button
5
1730 Total Views 2 Views Today
Комментарии (4) для “Базовые понятия JavaScript: объект в JS, JSON, stringify, JS массивы, nested объекты
  1. Владимир:

    Бро, Спасибо за пример!
    Решил освоить Angular, буду по твоему проекту изучать )

    1. Для нормального изучения Angular тем в этих статьях будет не достаточно. Здесь будут рассмотрены только несколько основ из фреймворка. Но для начала может помочь:)

  2. Влад:

    Привет. А Уроки по Angular 2 планируются?

    1. В ближайшей перспективе — нет. Сначала планируется заполнить базовые разделы по Java (JUnit, Web Services, Maven и т.д.). После этого вполне возможно буду описывать какой-либо популярный веб фреймворк.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

CAPTCHA

*