Программирование приложений на JavaScript

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

Странные слова

В данной кате напишите функцию, которая принимает строку, состоящую из букв и меняет все буквы на следующие по алфавиту.

Примеры:
"Hello" --> "Ifmmp"

"What is your name?" --> "Xibu jt zpvs obnf?"

"zoo" --> "app"

"zzZAaa" --> "aaABbb"

JavaScript. Основы

Это один из бестселлеров по JavaScript. Автор книги — Пол Уилтон. Книга предназначена для новичков. Это одно из самых обновляемых руководств. «JavaScript. Основы» охватывает много продвинутых тем, включая новые элементы HTML5 и их API, JSON, функции, события, новые свойства геолокации и многое другое.

​Как можно работать с датой в JS?

Встроенный объект: Date содержит дату и время, а также предоставляет методы управления ими.

Для создания нового объекта Date нужно вызвать конструктор new Date() с одним из следующих аргументов:

 new Date()

Без аргументов – создать объект Date с текущими датой и временем:

 new Date(milliseconds)

Создать объект Date с временем, равным количеству миллисекунд (тысячная доля секунды), прошедших с 1 января 1970 года UTC+0.

 new Date(datestring)

Если аргумент всего один, и это строка, то из неё «прочитывается» дата.

 let date = new Date("2017-01-26");
 alert(date);
 // Время не указано, поэтому оно ставится в полночь по Гринвичу и
 // меняется в соответствии с часовым поясом места выполнения кода
 // Так что в результате можно получить
 // Thu Jan 26 2017 11:00:00 GMT+1100 (восточно-австралийское время)
 // или
 // Wed Jan 25 2017 16:00:00 GMT-0800 (тихоокеанское время)

 new Date(year, month, date, hours, minutes, seconds, ms)

Создать объект Date с заданными компонентами в местном часовом поясе. Обязательны только первые два аргумента.

year должен состоять из четырёх цифр: значение 2013 корректно, 98 – нет.
month начинается с 0 (январь) по 11 (декабрь).
Параметр date здесь представляет собой день месяца. Если параметр не задан, то принимается значение 1.
Если параметры hours/minutes/seconds/ms отсутствуют, их значением становится 0.

Зачем себя ограничивать?

Фронтедеры востребованы, но фулстеки Python / Frontend выглядят привлекательней.

Один такой спец может взять на себя приложение целиком, и работодатели готовы платить ему круглую сумму.

Тут за 12 месяцев вы выучите:

- Веб-вёрстку
- Javanoscript
- Python
- Angular, React, Vue на выбор

Во время обучения вы напишете 4 дипломных проекта для вашего резюме, а первый платеж - только через полгода

Что такое DocumentFragment?

DocumentFragment — это контейнер, который может содержать произвольное количество элементов DOM. Если совсем по-простому, можно представлять его себе как ведро. Элементы складываются в него, чтобы в нужный момент их можно было разом вывалить куда надо.

Как создать?

 var fragment = document.createDocumentFragment();

И зачем он нужен?
Хранение кусков HTML, не имеющих общего предка.

Бывают ситуации, когда нам нужно заменить содержимое элемента, но сам элемент не трогать. Допустим, мы используем делегирование событий, и все обработчики событий, происходящих на внутренних элементах, навешены на внешний div. В таком случае нам идеально подойдёт DocumentFragment:

 div.innerHTML = "";
 div.appendChild(fragmentWithAllContent);

Перевод Boolean в строку

Напишите функцию, которая принимает булево значение возвращает его в формате строки

Пример:
booleanToString(true) => "true"

Для чего используется window.getComputedStyle?

Итак, изменить стиль очень просто. Но как его прочитать?
Например, мы хотим знать размер, отступы, цвет элемента. Как это сделать?

Свойство style оперирует только значением атрибута "style", без учёта CSS-каскада.
Поэтому, используя elem.style, мы не можем прочитать ничего, что приходит из классов CSS.
Например, здесь style не может видеть отступы:
…Но что, если нам нужно, скажем, увеличить отступ на 20px? Для начала нужно его текущее значение получить.
Для этого есть метод: getComputedStyle.
Синтаксис:
getComputedStyle(element, [pseudo])

element - Элемент, значения для которого нужно получить
pseudo - Указывается, если нужен стиль псевдоэлемента, например ::before. Пустая строка или отсутствие аргумента означают сам элемент.

Результат вызова – объект со стилями, похожий на elem.style, но с учётом всех CSS-классов.

Какие существуют способы форматирования даты?

Во всех браузерах, кроме IE10-, поддерживается стандарт Ecma 402, который добавляет специальные методы для форматирования дат.

Это делается вызовом date.toLocaleString(локаль, опции), в котором можно задать много настроек. Он позволяет указать, какие параметры даты нужно вывести, и ряд настроек вывода, после чего интерпретатор сам сформирует строку.

Пример с почти всеми параметрами даты и русским, затем английским (США) форматированием:

 var date = new Date(2014, 11, 31, 12, 30, 0);
 var options = {
   era: 'long',
   year: 'numeric',
   month: 'long',
   day: 'numeric',
   weekday: 'long',
   timezone: 'UTC',
   hour: 'numeric',
   minute: 'numeric',
   second: 'numeric'
 };

 alert( date.toLocaleString("ru", options) ); 
 // среда, 31 декабря 2014 г. н.э. 12:30:00

 alert( date.toLocaleString("en-US", options) );
 // Wednesday, December 31, 2014 Anno Domini 12:30:00 PM

Как получить текущие значения компонентов даты?

Существуют методы получения года, месяца и т.д. из объекта Date:

 getFullYear()

Получить год (4 цифры)

 getMonth()

Получить месяц, от 0 до 11.

 getDate()

Получить день месяца, от 1 до 31, что несколько противоречит названию метода.

 getHours(), getMinutes(), getSeconds(), getMilliseconds()

Получить, соответственно, часы, минуты, секунды или миллисекунды.

Никакого getYear(). Только getFullYear()
Многие интерпретаторы JavaScript реализуют нестандартный и устаревший метод getYear(), который порой возвращает год в виде двух цифр. Пожалуйста, обходите его стороной. Если нужно значение года, используйте getFullYear().

Кроме того, можно получить определённый день недели:

 getDay()

Вернуть день недели от 0 (воскресенье) до 6 (суббота). Несмотря на то, что в ряде стран за первый день недели принят понедельник, в JavaScript начало недели приходится на воскресенье.
Все вышеперечисленные методы возвращают значения в соответствии с местным часовым поясом.