Split API lesson (#199)

lessons/lesson04/01.md

@@ -0,0 +1,199 @@
+---
+title: Занятие 4.1
+description: Базовое использование API и JavaScript. Как работать с DOM и другими доступными API
+---
+
+# OTUS
+
+## Javascript Basic
+
+<!--v-->
+
+### Вопросы?
+
+<!--s-->
+
+### Базовое использование API и JavaScript.
+
+#### Как работать с DOM и другими доступными API
+
+<!-- s -->
+
+### API
+
+<!-- v -->
+
+**API** (**программный интерфейс** приложения, интерфейс прикладного программирования) (англ. application programming interface, API [эй-пи-ай]) — [описание способов (набор классов, процедур, функций, структур или констант), которыми одна компьютерная программа может взаимодействовать с другой программой](https://ru.wikipedia.org/wiki/API).
+
+<!-- v -->
+
+Под API можно понимать любые методы и свойства, которые не относятся непосредственно к конструкциям языка
+
+<!-- v -->
+
+Каким API пользуются разработчики?
+
+- встроенное в язык
+- встроенное в среду исполнения
+- предоставляемое дополнительными пакетами
+- предоставляемое сторонними сервисами (доступ к которым делается посредством API среды исполнения или дополнительных пакетов)
+
+<!-- v -->
+
+Единственный способ узнать про API - читать документацию (статьи, книги, смотреть доклады).
+
+Единственный способ научиться пользоваться API - работать с API.
+
+<!-- v -->
+
+[Интерфейсы веб API](https://developer.mozilla.org/ru/docs/Web/API)
+
+<!-- v -->
+
+Что мы посмотрим:
+
+- работу со страницей (изменение страницы и чтение данных от пользователя)
+- сохранение данных
+- работу удаленными ресурсами (следующее занятие)
+
+<!-- v -->
+
+### Вопросы?
+
+<!-- s -->
+
+### Работа со страницей
+
+<!-- v -->
+
+**DOM** - Document Object Model.
+
+API браузера для работы с веб страницей и ее элементами. Представлено глобальными объектами `window`, `document` и API для работы с HTML элементами (создание, удаление, редактирование).
+
+<!-- v -->
+
+Поиск элементов на странице:
+
+- `document.getElementById`
+- `document.getElementsByTagName`
+- `document.querySelector`
+- `document.querySelectoAll`
+
+[Document API](https://developer.mozilla.org/ru/docs/Web/API/Document) и [описание селекторов](http://htmlbook.ru/css/selector)([1](http://sauron.org.ua/post/1254), [2](https://migo.com.ua/blog/css/css-selectory-kotorue-dolzhen-znat-kazhduy.html), [3](https://www.exlab.net/files/tools/sheets/css/css.pdf))
+
+<!-- v -->
+
+Создание и изменение элементов. Два варианта:
+
+- использование `innerHTML` и работа с элементами как со строкой HTML
+- использование `document.createElement` и работа с элементами как с узлами дерева
+
+<!-- v -->
+
+Для подписки на события элементов есть 3 варианта:
+
+- `addEventListener` <-- мы будем использовать вот этот
+- `onclick="func()"`
+- `el.onclick=func`
+
+<!-- v -->
+
+[Пример](https://codesandbox.io/s/github/vvscode/otus--javascript-basic/tree/lesson04/lessons/lesson04/code/DOMExamples)
+
+<!-- v -->
+
+[Практика](https://codesandbox.io/s/github/vvscode/otus--javascript-basic/tree/lesson04/lessons/lesson04/code/DOMExamplesPractice)
+
+<!-- v -->
+
+### Вопросы?
+
+<!-- s -->
+
+### [Сохранение данных](https://learn.javascript.ru/data-storage)
+
+<!-- v -->
+
+- [IndexedDB](https://developer.mozilla.org/ru/docs/Web/API/IndexedDB_API)
+- [Storage](https://developer.mozilla.org/ru/docs/Web/API/Storage) (Local Storage / Session Storage)
+- [Cookies](https://developer.mozilla.org/ru/docs/Web/API/Document/cookie)
+
+<!-- v -->
+
+DOM Storage полезен для хранения небольшого количества данных, но он менее выгоден для большого числа структурированных данных (тк работает со строками). IndexedDB предоставляет решение для клиентского хранилища большого объема структурированных данных, включая файлы/blobs.
+
+<!-- v -->
+
+```js [1-30]
+// Пример работы с local storage
+const key = "someKey";
+const value = "someValue";
+localStorage.setItem(key, value);
+console.log(localStorage.getItem(key));
+localStorage.removeItem(key);
+console.log(localStorage.getItem(key)); // null
+```
+
+<!-- v -->
+
+```js [1-30]
+// ВАЖНО! работает только со строками
+const key = "someKey";
+const value = 1;
+localStorage.setItem(key, value);
+console.log(localStorage.getItem(key)); // "1"
+```
+
+<!-- v -->
+
+```js [1-30]
+// для работы с другими типами данных
+// обычно используют сериализацию
+const value1 = 1;
+const value2 = { name: "Bob" };
+localStorage.setItem("value1", JSON.stringify(value1));
+localStorage.setItem("value2", JSON.stringify(value2));
+console.log(JSON.parse(localStorage.getItem("value1"))); // 1
+console.log(JSON.parse(localStorage.getItem("value2"))); // { name: 'Bob' }
+```
+
+<!-- v -->
+
+Важно помнить, что если значения нет - вы получите `null` и десериализация сломается. Поэтому перед вызовом `parse` нужно проверять данные.
+
+<!-- v -->
+
+В разработке принято писать на уровне интерфейсов (абстракций), а не реализаций. То есть вы должны знать ЧТО делает функция или модуль, но не КАК.
+
+Когда вы начинаете использовать детали реализации - это называется "протекающая абстракция".
+
+<!-- v -->
+
+### Вопросы?
+
+<!-- v -->
+
+[Практика](https://codesandbox.io/s/github/vvscode/otus--javascript-basic/tree/lesson04/lessons/lesson04/code/dataStoragePractice)
+
+<!-- v -->
+
+### Вопросы?
+
+<!-- s -->
+
+#### Дополнительные материалы
+
+<!-- v -->
+
+1. [Путеводитель по JavaScript Promise для новичков](https://habr.com/ru/company/zerotech/blog/317256/)
+1. [Чистый код на Javascript](https://github.com/BoryaMogila/clean-code-javascript-ru/)
+
+<!-- v -->
+
+#### Вопросы для самопроверки
+
+1. Чем куки (cookie) отличаются от localStorage ?
+
+2. Как реализовать подписку на клик по кнопке, которая отработает только один раз? ( с примером кода )
+
+3. Что такое KISS, DRY, YAGNI?