Скачать "Практика JavaScript с нуля за 2 часа. Сделаем целый сайт!"
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252F0ViiJ8qTCFM%252Fmaxresdefault.jpg&w=1139&q=75)
Подождите немного, мы готовим ссылки для удобного просмотра видео без рекламы и его скачивания.
Похожие ролики из нашего каталога
![JavaScript - Полный Курс JavaScript Для Начинающих [11 ЧАСОВ]](/_next/image?url=https%3A%2F%2Funidownloader.com%2FcontentImages%2Fk38XcJRXdh5qoner3CTUwe-Bwpo%3D%2Ffilters%3Aquality(80)%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FCxgOKJh4zWE%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FM_pclb-58ZY%252Fmaxresdefault.webp&w=1139&q=75)
Теги видео
Субтитры
Английский
00:00:02
данному курсу потому что я уверен что00:00:04
здесь на нефть для себя много чего00:00:06
полезного и интересного про java script00:00:08
что позволит тебе также с00:00:10
прогрессировать как будет построим00:00:12
процесс обучения в данном курсе я буду00:00:15
показывать тебе с нуля создании00:00:17
приложения без библиотеки и без00:00:19
фреймворков на чистом java-script то00:00:21
есть ты увидишь каждый мой шаг который00:00:23
позволит с нуля написать приложение и00:00:25
позже залить его на удаленный хостинг00:00:28
для того чтобы другие также смогли00:00:29
посмотреть на твой результат00:00:31
также процесс обучения я построил00:00:33
итеративно это означает что мы в начале00:00:36
будем решать задачу и после будем искать00:00:39
более оптимальное более красивое до него00:00:41
решение то есть будем оптимизировать и00:00:43
улучшать наш код то есть чтобы ты00:00:46
понимал откуда и зачем берутся те или00:00:48
иные решения также мы говорим поговорим00:00:50
про настройка инфраструктура и зачем00:00:53
нужны те или иные инструменты и какие00:00:55
проблемы они решают в общем контента00:00:57
здесь действительно будет много он будет00:00:59
очень насыщенный и интересный00:01:00
какие у меня есть рекомендации к00:01:03
прохождению данного курса безусловно в00:01:06
начале лучше смотреть что я пишу но00:01:08
очень важно чтобы ты так же переписывал00:01:11
для того чтобы набивать руку чтобы тоже00:01:13
практиковаться и чтобы у тебя был00:01:15
какой-то результат в идеале00:01:17
если тебе на каком-то медь моменте будет00:01:19
все понятно и ты остановишь ролик и00:01:22
попробуешь из этого состояния сделать00:01:24
что-то свое я буду подсказывать где это00:01:26
можно будет сделать и по итогу мы00:01:29
получим уже готовый результат который ты00:01:30
сможешь использовать как тебе будет00:01:32
угодно такие водные слова поэтому теперь00:01:35
давай начинать и начнем пожалуй с самого00:01:38
основного это с текстового редактора где00:01:41
мы будем вести разработку в00:01:43
дополнительных материалах к данному00:01:45
видео я оставлю ссылки на два текста00:01:47
выходе доктора которые я считаю идеально00:01:50
подойдут для данного курса00:01:51
лично я же буду использовать текстовый00:01:53
редактор в шторм и вот и можешь найти00:01:56
вот по такому запросу если не хочешь00:02:01
смотреть дополнительные материалы00:02:02
то есть это умная среда разработки для00:02:04
java скрипт на сайте jabra.com00:02:06
вот сам редактор является платным однако00:02:09
у него есть бесплатная версия на 30 дней00:02:11
то есть можно скачать00:02:12
будет все то же самое что и у меня если00:02:15
тебе нравится бесплатные но не менее00:02:16
крутые решения то тогда тебе подойдет00:02:18
вот такой редактор visual studio код он00:02:21
уже от компании microsoft00:02:24
тут его можно скачать и установить себе00:02:26
на компьютер и в принципе все будет00:02:28
похоже то есть интерфейс будет другой но00:02:30
в конечном итоге нам важно чтобы мы00:02:32
написали работающее приложение00:02:34
то есть этого мы начнем я буду00:02:37
использовать веб шторм то есть при00:02:39
запуске он выглядит таким образом и00:02:41
первое что мы делаем мы создаем наш00:02:44
проект нажимаю кнопочку create project и00:02:46
давай я его назову то есть мы чтобы00:02:48
разрабатываем сейчас конструктор сайтов00:02:50
на чистом java-script приложение будет00:02:52
динамичная и интересная я назову его00:02:56
допустим джесс конструктор посмотрим00:03:02
есть ли у меня такой проект еще такого00:03:04
нет все и я получаю абсолютно чистый00:03:07
проект то есть на самом деле это всего00:03:08
лишь папочка да где я буду складировать00:03:11
все файлы которые мне потребуются для00:03:12
разработки и на самом деле начать нам00:03:16
стоит того что мы разрабатываем с тобой00:03:19
в браузере да поэтому я создаю здесь00:03:22
файл индекса html который будет является00:03:24
заглавным файлам для нашего приложения00:03:26
далее здесь мы можем воспользоваться00:03:29
такой интересной функции как поставить !00:03:33
и нажать tab это эммет то есть плагин00:03:36
позволяющий оптимизировать работу с html00:03:39
чтобы быстрее писать чтимой потому что00:03:41
тут структура принципе очевидно какая00:03:43
вот и тем самым мы генерируем начальный00:03:46
шаблон в visual studio код примерно та00:03:49
же самая история то есть там тоже ты00:03:51
получишь примерно такой же результат на00:03:53
самом деле из главного нам здесь нужно00:03:55
только чтобы был доктоp html head00:03:59
возможно этот так тайтл и открытой body00:04:02
то есть вот этот вот так в принципе мы00:04:04
можем и удалить чтобы он нам не мешал00:04:10
давай здесь мы задаем к нибудь тайтон00:04:12
пример java-script00:04:15
конструктор00:04:18
и далее для того чтобы нам упростить00:04:23
взаимодействие со стилями потому что00:04:25
весь акцент мы будем делать на java00:04:26
script я подключусь с с фреймворк он00:04:29
называется bootstrap находится по адресу00:04:33
get bootstrap точка ком здесь мы можем00:04:36
перейти в поле keys to that то есть нам00:04:39
здесь жалких не потребуется нам00:04:40
потребуется только его с.с.00:04:42
поэтому я беру копируем данный css00:04:45
перехожу в web шторм и вставляю просто в00:04:48
секцию head00:04:50
да то есть таким образом у меня00:04:51
получился bootstrap и я смогу его00:04:53
использовать теперь давай зададим00:04:55
базовую разметку00:04:56
то есть опять же на стилем и сильные00:04:58
обращать внимание здесь не будем тем не00:05:00
менее про них не стоит забывать00:05:01
для начала у нас будет класс который00:05:05
называется контейнер fluid здесь я также00:05:09
использую м то есть пишу точку селектор00:05:11
класса дальше нажимаем тab и получаю00:05:13
целый div внутри нам потребуется 200:05:16
класса00:05:17
это bg light для того чтобы задать серый00:05:22
цвет тому месту где у нас будет00:05:24
находиться непосредственно сам00:05:26
конструктор и я еще 21 класс который00:05:29
назову sidebar это уже будет свой класс00:05:31
который я буду сам стилизовать и также00:05:33
мне потребуется здесь кто-нибудь другой00:05:35
класс который я назову например контент00:05:38
теперь я задам айдишники данным блоком00:05:40
для того чтобы впоследствии с ними было00:05:42
проще работать корневом блока я задам00:05:44
айди об потому что сокращенно от00:05:47
applications и здесь были храниться все наше00:05:49
приложение допустим этому devon это у00:05:52
нас sidebar да то есть здесь у нас будет00:05:54
форма где мы будем конструировать наш00:05:56
будущий сайт допустим я назову а идея00:05:58
пену и здесь допустим я задам айди00:06:02
скажем сайт а почему бы и нет00:06:05
далее я хочу стилизовать все эти блоки00:06:08
для этого в корне я создам новый файл00:06:10
которую назову main .00:06:12
css и вставлю сюда заранее готова и00:06:15
стиля на самом деле они очень просты и00:06:17
то есть блоку с и диап я задаю позиций00:06:21
армейцев00:06:22
контенту я сдаю позицию абсолют и отступ00:06:25
слева 200 пикселей00:06:26
что равняется ширине как ростки сайдбары00:06:29
но сайдбары здесь позишн fix00:06:31
и есть определенные стили типа по 1 га00:06:34
бог shadow и так далее то есть это что00:06:37
касается стилей не забываем подключить00:06:39
данный стиль и после bootstrap а файл00:06:43
называется main . css и теперь в00:06:46
принципе мы можем посмотреть на то что00:06:48
мы уже получили значит если ты работаешь00:06:51
в web штормит то наведя на правый00:06:54
верхний угол тут есть такие иконочки и00:06:56
учитывая что я работаю в храме то я могу00:06:59
нажать на кнопочку хрома откроется00:07:02
некоторый локалхост и здесь мы можем00:07:05
видеть тот проект который мы только что00:07:07
и создали00:07:08
теперь соответственно мы можем00:07:10
поговорить про наполнение самого сайта00:07:13
да это как раз таким block content00:07:16
значит из чего наш сайт будет состоять00:07:18
вначале я хочу все это определить в html00:07:22
чтобы впоследствии было проще переносите00:07:24
в java script для этого мы будем00:07:27
использовать очень простую конструкцию00:07:29
то есть для того чтобы создать один блок00:07:33
я создаю div с классом ролл и дальше00:07:36
буду пользоваться другим классом внутри00:07:39
то есть части реагирует быстро по трубы00:07:41
называется call с м такой структуре00:07:45
будет определяться у нас один блок ну и00:07:47
допустим мы рассмотрим некоторые типы00:07:49
блоков скажем для начала я веду00:07:51
заголовок h1 например хеллоу ворлд00:07:55
естественно00:07:56
впоследствии все текстом и конечно же00:07:59
заменим то есть это у нас бы blogs00:08:01
тайтлом допустим теперь я задам блок00:08:04
например с текстом в параграфе p здесь00:08:08
кстати мы можем вести вот такое сниппет00:08:10
написать lorem и дальше количество слов00:08:12
которые нам нужно например 10 нажать tab00:08:15
и вы получаем мог выйти кст который нам00:08:19
служит для разработки00:08:21
значит копируем данную структуру00:08:25
допустим мы будем также рассматривать00:08:27
еще вариант с колонками колонки я буду00:08:31
определять таким образом то есть у меня00:08:33
будет несколько блоков с классом колосом00:08:38
например и внутри будет некоторый текст00:08:40
и также нам необходимо рассмотреть00:08:43
картинку00:08:44
но картинку давай рассмотрим чуть позже00:08:45
да пока вот пойдем с этими тремя блоками00:08:48
нам этого будет достаточно для понимания00:08:50
собственно переходим браузер обновляем00:08:52
страницу и вот мы получаем наш исходный00:08:55
результат то есть пока это все не очень00:08:57
красиво но тем не менее мы видим что00:08:59
есть бог с названием есть текст и есть00:09:03
колонки да то есть нам нужно нужно было именно00:09:05
эта структура соответственно в чем00:09:08
заключается следующая наша задача в том00:09:10
чтобы создать какой-нибудь java script и00:09:13
уже динамически выводить весь этот00:09:15
контент для этого я создаю новый файл в00:09:19
корне который назову например яндекс .00:09:21
джесс и безусловно мне необходимо его00:09:24
будет подключить подключить его лучшие00:09:26
перед закрывающем тэгом body00:09:28
если пишу скрипт и указываю source00:09:32
атрибут source на файл индекс .00:09:36
джесс по сути теперь я хочу уже00:09:39
порассуждать то есть в чем заключается00:09:41
теперь идея понятна для того чтобы00:09:44
встроить00:09:45
сайт через java script вот эти все еще00:09:48
нам необходимо будет сдавать динамически00:09:50
то есть все вот эти вот блоки роу нам00:09:53
необходимо будет создавать через java00:09:55
скрипт сам блок контент или айди сайт он00:10:00
должен быть у нас пустой соответственно00:10:02
нам нужно придумать00:10:03
модель модель это просто некоторые00:10:06
java-script объект некоторая сущность00:10:08
которые может описать вот этот вот и00:10:10
чтимый блок учитывая что у нас тут есть00:10:14
явный список да то есть вот один элемент00:10:17
вот другой элемент вот третий элемент и00:10:20
так далее да то есть сам стоит сайт00:10:22
строится именно по боковым00:10:24
мы можем это все описать в массиве да то00:10:29
есть массив это набор как раз таки00:10:31
различных объектов которые мы можем00:10:33
сохранить то есть наша задача сводится к00:10:36
тому чтобы придумать такой массив00:10:38
который сможет в java script описать эти00:10:40
блоки и дальше с помощью этой модели00:10:43
этого массива уже сформировать такой из00:10:45
темы на самом деле все это выглядит очень00:10:47
просто но и пробуем значит я создаю00:10:51
константу зову ее модель это будет у00:10:55
меня массив00:10:56
безусловно в массиве мы можем хранить00:10:58
как и стройке так и числа но также мы00:11:01
можем хранить в них и объекты00:11:04
объект java script такая универсальная00:11:07
сущность которая по сути является00:11:09
некоторой группировкой свойств да то00:11:12
есть тут мы можем хранить все что00:11:14
пожелаем и в этом объекте вот допустим я00:11:18
хочу описать первый блок блок называется00:11:20
тайтл00:11:21
дату здесь мы храним некоторые название00:11:23
соответственно какие у него должны быть00:11:25
значения ну во первых я хочу вести здесь00:11:28
поле type00:11:29
так который будет указывать какой же тип00:11:32
да у этого блока и тут я сам придумывает00:11:35
название например тайтл дальше значит на00:11:39
самом деле мы примерно понимаем00:11:40
структуру шаблона до этого блока и нам00:11:43
нужно вот это вот значение потому что00:11:45
именно его мы сможем конструировать как00:11:47
раз таки через нашу форму и я предлагаю00:11:50
называете это поле целью да то есть пока00:11:53
мы можем его просто писать как low00:11:55
world from jis например и на самом деле00:12:00
этого в принципе для начала нам будет00:12:02
достаточно00:12:03
то есть теперь наша задача чтобы мы по00:12:07
сути придумали такие же объекты которые00:12:09
будут описывать и другие блоки00:12:10
собственно идем дальше смотрим значит00:12:12
здесь у нас уже текст до поэтому если00:12:15
пишу тает текст и также вылью здесь будет00:12:20
меня какое-то значение текста я воин гол00:12:25
вы сам текст да пока это просто00:12:28
временное решение поэтому могу себе00:12:30
позволить то есть тут я пишу сама00:12:33
значение текста потому что структуры я00:12:35
понимаю и здесь у нас находится параграф00:12:37
п00:12:38
какие что касается теперь колонок с ними00:12:42
в принципе то же самое то есть я назову00:12:45
тип например column00:12:50
и в данном случае в эти у нас будет не00:12:53
просто как строка да потому что тут у00:12:56
нас уже множество элементов00:12:59
соответственно раз это множество то это00:13:01
у нас массив00:13:02
да поэтому здесь я пишу массив который00:13:04
будет состоять из различных строк ну00:13:06
допустим пока что чтобы нам просто00:13:09
определить что мы делаем все правильно00:13:11
значит я поставлю вот такие вот классные00:13:15
строчки которые позволят нам определить00:13:18
сколько всего у нас будет колонны чик в00:13:22
данном блоке и теперь получается что у00:13:25
нас есть модель и теперь мы можем с00:13:27
помощью этой модели сгенерить нужные и00:13:29
чтим и таким образом ну для начала нам00:13:32
необходимо понять куда мы хотим00:13:34
рендерить весь этот контент до00:13:36
соответственно это нас blog site поэтому00:13:39
я могу начали должен получить доступ до00:13:42
этого блока с помощью документ к вере00:13:46
selector и дальше описываю здесь обычный00:13:50
css селектор что с меня интересует сайт00:13:53
как результат я получаю переменную00:13:55
которую назвал например сайт здесь я00:13:59
придерживаюсь такой идеи что те00:14:02
переменные которые я получаю который00:14:05
является дом элементами ну например00:14:07
которые возвращаются из методы кайри00:14:09
селектор я обозначаю через доллар00:14:11
то есть эта практика пришла из старинных00:14:15
времен когда мы использовали джейк вере00:14:17
вот сейчас magic вере почти не00:14:18
используем но при этом так проще00:14:20
отличать какие элементы у нас являются00:14:22
дом элементами какие просто являются00:14:24
переменными то есть со знаком доллара00:14:27
можно его не ставить и дальше получается00:14:30
что сюда нам нужно положить весь этот00:14:34
контент соответственно нам нужно пробежаться по00:14:36
массиву моду и сгенерировать html00:14:40
зависимости от каждой00:14:41
модельки до от каждого объекта для этого00:14:44
мы можем обратиться к нашему массиву00:14:46
модом и вызвать у него метод который00:14:49
называется for each то есть этот цикл00:14:51
позволяющие пробегаться по каждому00:14:53
элементу где на каждой итерации мы00:14:55
получим элемент блок и00:14:59
в foreach мы придаем кабака функцию00:15:01
здесь я пишу встречную функцию00:15:03
и теперь если мы посмотрим например в00:15:06
консоли что такое у нас блок00:15:09
1-ю страницу00:15:11
открою консоль то вот мы получаем объект00:15:17
который как раз таки мы описывали в00:15:20
нашем массиве00:15:22
отлично теперь как сформировать html для00:15:26
данного объекта для начала нам нужно00:15:29
определиться а какой вообще html00:15:31
сформировать то есть тут мы зависим00:15:33
именно от типа данного блока поэтому00:15:36
самое простое что я могу сделать это00:15:37
написать если блок00:15:40
type датой с помощью именно типа мы00:15:43
определяем какой чтимой нам нужно будет00:15:44
сделать00:15:45
допустим равняется тайтл то в таком00:15:49
случае я хочу сформировать некоторые00:15:53
темы 2 его создам здесь что мы силы .00:15:56
по умолчанию это будет пустая строка00:15:58
здесь я использую лет потому что html у00:16:01
меня будет изменяться в зависимости от00:16:03
условия и соответственно пишу что в00:16:06
таком случае если это той тута html00:16:08
будет равняться здесь внимательно00:16:10
я ставлю такие обратные кавычки потому00:16:12
что в них я могу сказать форматирование00:16:15
строк и вставляешь организацию в java00:16:18
script00:16:19
то есть я беру дальше и копирую всю эту00:16:21
структуру на самом деле могу и даже00:16:24
вырезать отсюда потому что она точно не00:16:26
потребуется и вставить прямо сюда00:16:29
матирование то есть мы получаем вот00:16:31
такой вот шаблон но теперь нам нужно00:16:35
использовать как то еще вот этого00:16:36
значения всю да потому что если мы00:16:38
останемся в таком виде то каждый раз у00:16:41
нас будет статический текст00:16:42
поэтому не все удаляю ставлю такие00:16:44
символы доллар и здесь в горные скобочки00:16:48
которые позволяют прямо внутри строчки00:16:50
писать java script и значение которое00:16:54
нам нужно находится в поле в илью то00:16:56
есть если пишу блог .00:16:58
целью собственного дальше мы делаем то00:17:04
же самое проверяем что если блок стоит 100:17:07
равняется например текст дату и00:17:10
следующему типу то это означает что00:17:12
переменные и системы нам необходимо00:17:15
присвоить00:17:16
шаблон блока текст поехали тоже могу00:17:21
вырезать отсюда ставить сюда про и00:17:24
форматирование убрать лишний00:17:26
enter и то же самое что тут нас другой00:17:30
шаблон в параграфе мы вставляем также00:17:32
блог ольга у нас есть еще один блок else00:17:38
if блок type равняется columbus00:17:45
то пока я оставлю здесь пустое00:17:50
пространство если у тебя есть идеи как00:17:52
это реализовать то напиши лучше это00:17:54
самостоятельно потом проверь с моим00:17:55
решением пока что я хочу протестировать00:17:58
то что у нас уже получилось да00:18:01
соответственно что у нас есть у нас есть00:18:03
некоторые переменной html она является00:18:06
обычной строчкой и по сути дальше нам00:18:09
просто это ты чтим и необходимо00:18:10
поместить как контент в более сайт blog00:18:13
site да соответственно мы можем00:18:15
обратиться к нашему сайту дальше у дом00:18:20
элементов таких которым мы получаем есть00:18:22
метод который называется insert adjacent00:18:29
html00:18:30
этот метод позволяет вставляете в00:18:33
определенное место и чтим и на который00:18:36
представлен в виде строчки первый00:18:38
параметр мы здесь указываем куда именно00:18:41
нам необходимо вставить этот контент а00:18:43
вторым параметром мы в общем то00:18:45
описываем ту строчку который является00:18:46
html в нашем случае вот этот метод он00:18:50
принимает себя первым параметром 400:18:55
фиксированные строчки допустим месяц и00:18:57
не знаю что можно скопировать название00:18:59
данного метода перейти в google00:19:01
кстати тоже очень важное умение находить00:19:03
информацию и00:19:05
любую документацию я рекомендую читать00:19:07
на сайте девелопер mozilla арк вот у нас00:19:10
есть описание этого метода все что00:19:13
джастин элемент тут все на русском языке00:19:16
то есть00:19:18
написано чем он отличается например и00:19:20
нарочь тем или почему уже его00:19:21
использовать и вот первый параметр это00:19:23
позиция значит у него есть четыре как я00:19:28
говорю в ряд00:19:29
это by forbidden то есть до самого00:19:31
элемента до открывающего тега автор00:19:34
бегин после открывающего тега before and00:19:37
after and вот наглядный пример того как00:19:40
это выглядит то есть в нашем случае сам00:19:42
элемент это элемент п если это by00:19:44
forbidden то он идет до параграфа если00:19:47
автор bigint то сразу же после открытия00:19:50
before and или autorent логично что раз00:19:55
мы поочередно вставляем эти блоги то нам00:19:57
нужно использовать параметр by four and00:20:00
то есть каждый раз блок будет00:20:02
вставляться перед концом и в общем то00:20:04
идти вниз вот тут есть различные примеры00:20:07
как это использовать00:20:08
но мы сейчас сами с этим и00:20:10
попрактикуемся то есть нас интересует00:20:12
параметр by far and кстати наверняка ты00:20:18
обратил внимание вот на эту штуку на00:20:20
случай написано в.р.00:20:21
этот текст и я не пишу это подсказка00:20:24
редактора которая говорит мне как00:20:26
называется параметр то есть то что так00:20:29
вот выглядит это просто подсказочка00:20:31
называется натэйша да здесь тоже00:20:33
то есть ничего нет никакого текста00:20:36
поэтому его ни в коем случае нельзя00:20:37
переписывать вот все что меня здесь00:20:39
написан да если я скопирую вот это не00:20:43
перенесу сюда то ты ешь нет никакого00:20:45
здесь селектора да то есть это просто00:20:47
подсказка о марте на это внимание и так00:20:51
мы поместили значит в наш сайт html и в00:20:55
принципе можно даже уже посмотрите что00:20:56
получилось то есть я обновляю страницу и00:20:58
вот у нас есть колонки до которые мы00:21:01
пока еще не убрали и сочтем или но тем00:21:04
не менее у нас уже есть то что мы00:21:07
описали в модели круто00:21:09
на мой взгляд естественно это круто00:21:10
значит теперь если вернуться к коду и00:21:13
посмотреть вот на то что мы написали то00:21:16
конечно же это все работает но это00:21:18
решение абсолютно не масштабируемая00:21:19
потому что ну если нам потребуется давай00:21:23
сюда еще колонке мы будем писать здесь00:21:25
отдельные функционал короче говоря я00:21:27
хочу чтобы теперь мы подумали о по00:21:29
небольшой оптимизации всего этого кода и00:21:31
сделали его красивым значит вот такие00:21:35
вещи лучше вырастить в функцию да я00:21:38
создам функцию которая самом деле будет00:21:40
являться таким никита00:21:41
которым компонентом позволяющий на00:21:43
основе параметры блок генерировать нам00:21:45
нужны и чтим и таким образом мы сможем00:21:47
вынести его отсюда и разгрузить данный00:21:50
блок например я создам функцию значит00:21:55
здесь мы работаем so tight вам поэтому я00:21:57
так и назову ее тайтл и я хочу чтобы эта00:22:00
функция принималось себя параметр00:22:03
блок на выходе она будет нам возвращать00:22:07
вот такую строчку то есть я сюда и00:22:10
вырезаю и вставляю сюда то есть по сути00:22:13
данная функция она принимает себя объект00:22:15
и возвращает нам уже готовые each темы и00:22:18
теперь у нас определение выглядит таким00:22:20
вот образом00:22:21
вызываем функцию тайтл не сюда передаем00:22:23
сам блок кстати из интересного здесь я00:22:29
создал эту функцию через ключевое слово00:22:31
function естественно я мог создать эту функцию00:22:33
через допустим ключевое слово const как00:22:36
встречную функцию но ты можешь00:22:40
попробовать и у тебя будет ошибка потому00:22:42
что только те функции которые были00:22:46
определены с помощью ключевого слова00:22:47
фанкшн мы можем вызывать до того момента00:22:50
как они были определены00:22:52
эта особенность java-script поэтому00:22:54
здесь для того чтобы точно избежать00:22:56
каких-либо проблем я ее создаю через00:22:58
фанкшн и00:22:59
это точно все будет работать00:23:01
соответственно дальше я беру вырезаю то00:23:04
что мы делали для текста00:23:06
буду звать функцию текст когда я буду00:23:08
передавать блок да и то же самое из00:23:10
фанкшн00:23:12
текст вам принимает себя бог и он также00:23:15
нам возвращает вот такой шаблон то есть00:23:20
если мы посмотрим то ничего не00:23:21
изменилось дай при этом наш кот стал00:23:23
более читаемым00:23:25
драйвер самый сделан для колонок то есть00:23:28
сразу же создал эту функцию пусть ему за00:23:33
вы и колун она будет принимать себя блок00:23:35
сейчас подумаем как ее реализовать00:23:38
здесь мы будем писать html равно колонн00:23:41
и сюда мы передаём параметр блок в00:23:46
качестве чтим или я вырежу все это и00:23:49
теперь получается что у нас есть00:23:51
абсолютно пустой00:23:52
div00:23:53
с айди сайт но при этом все остальное мы00:23:55
делаем через java script здесь я00:23:58
возвращаю00:23:59
вот такой вот шаблон теперь как нам00:24:03
сформировать динамически вот эти вот00:24:05
блоки да потому что сейчас мы указали00:24:07
здесь три колонки00:24:10
но мы же можем здесь допустим указывать00:24:12
и например 4 колонки нам нужно чтобы мы00:24:18
не изменяли нашу функцию и при этом00:24:21
генерируя с необходимое количество00:24:22
колонок для этого нам нужен цикл по00:24:26
массиву потому что мы знаем что в block00:24:28
value нас находится массив и по сути тут00:24:31
такая же идея да просто мы в самой00:24:33
функции calans будем генерить отдельно00:24:35
вот этот контент00:24:36
значит безусловно мы можем пойти сложным00:24:40
путём например написать html00:24:42
но пустая строка дальше мы допустим00:24:45
сделаем блок целью это мастиф нас да то00:24:49
есть мы можем сделать вич допустим есть00:24:52
у нас будет ой там где этом00:24:55
это как раз таки контент до данного00:24:57
массива и дальше нам необходимо к строке00:25:00
html00:25:01
допустим таким вот способом добавить00:25:04
шаблон00:25:05
то есть его отсюда вырезаю вставляю сюда00:25:10
и только вместо этого фиксированного00:25:12
текста я добавляю здесь и далее вот этот00:25:18
вот статический текст и отсюда вырезаю у00:25:20
нас уже есть готовый each темы которые я00:25:23
просто могу вставить вот сюда00:25:24
peace of each темы дай теперь если мы00:25:27
посмотрим 1-ым страницу вот получается00:25:30
нас есть наша колонки причем обрати00:25:33
внимание что мы не меняли00:25:35
java-script и при этом у нас есть четыре00:25:37
колонки если мы хотим здесь 5 колонок00:25:39
или 6 колонок например то вот они сами00:25:43
генерируются да это как раз таки то что00:25:46
позволяет нам делать цикл00:25:48
вот естественно данный код можно намного00:25:51
круче написать давай сразу же посмотрим00:25:53
потому что это совсем не очень хорошо00:25:57
помимо методов урыть в массивах00:25:59
присутствует такой метод как мы00:26:01
позволяющий сразу же трансформировать00:26:03
массив во что-то00:26:05
то есть мы можем написать следующим00:26:07
образом блок целью00:26:09
дальше вызываем метод move00:26:12
метод мэп он также принимает себя call00:26:14
back где на каждой итерации мы получаем00:26:17
объект ой там он точно такой же как и00:26:19
здесь и тут уже на выходе мы можем00:26:22
вернуть строчку да то есть учитывая что00:26:26
я пишу стрелочный функции одну строчку00:26:28
не не нужно писать и certain хотя мы00:26:30
обязаны здесь что-то возвращать дальше я00:26:33
оставляю данный div закрывают div и сюда00:26:37
вставляю наш ой там соответственно на00:26:43
выходе я получаю переменную html и вот00:26:45
это вот все мы теперь можем уже убрать00:26:47
то есть теперь мы все это написали в00:26:49
одну строчку и посмотрим обновляю00:26:51
страницу все хорошо только здесь есть00:26:54
запятые потому что метод map00:26:56
он возвращает нам массив и когда мы00:27:00
пытаемся массив вывести в строчку то он00:27:04
соединяется запятыми для того чтобы эти00:27:07
, убрать мы можем сами соединить этот00:27:09
массив с помощью метода join с помощью00:27:12
пустой строке чтобы убрать , и тем самым00:27:14
мы получаем вот такой вот тот же самый00:27:18
результат только теперь он намного более00:27:20
лаконичной и красивый теперь давай00:27:23
поговорим про четвертый тип блоков00:27:25
который у нас будет эта картинка значит00:27:28
сейчас я создам новую директорию которую00:27:31
назову этот00:27:32
я сюда вставлю картинку картинку то00:27:35
сможешь найти в дополнительных00:27:36
материалах к данному курсу00:27:40
нас есть теперь картинка и давай то же00:27:42
самое сделаем для нее00:27:44
то есть дети напишу type допустим это00:27:49
будет и матч то есть мы уже работаем00:27:51
исключительно через java script белье00:27:56
допустим у него будет путь месяц имидж .00:28:01
png теперь тоже самое делаем для00:28:06
картинки00:28:08
и мяч и здесь мы вызываем функцию и мяч00:28:13
которые естественно пока еще не создали00:28:17
принимает себя блок и здесь мы будем00:28:22
возвращать строчку00:28:23
значит div с классом row и допустим00:28:34
сразу же будем выводить картинку без00:28:36
колонки чуть позже мне это потребуется00:28:39
для того чтоб правильностью стилизовать00:28:40
то есть таким же и source мы указываем00:28:45
на блок вылью но и посмотрим сохраняю00:28:51
обновляю страницу да и вот мы получаем00:28:53
нашу картинку то есть как видишь данная00:28:57
система у нас заработала и00:28:58
пока что все хорошо теперь если мы00:29:01
посмотрим на данный файл то мы найдем00:29:04
здесь большое количество проблем00:29:06
в том плане что файл довольно таки00:29:08
большой получается и тут есть разные00:29:11
сущности которые отвечают за абсолютно00:29:14
разные действия то есть есть модель есть00:29:17
какие-то селекторы00:29:19
какой-то цикл функции отдельные то есть00:29:22
хочется чтобы все это было по модуль на00:29:24
расположенное не находилась в одном00:29:26
файле то есть вообще в идеале все00:29:28
декомпозировать для того чтобы в одном00:29:30
файле было как можно меньше кода для00:29:32
того чтобы прочим с этим00:29:33
взаимодействовать00:29:36
безусловно может возникнуть вопрос а как00:29:41
модульную систему эту правильно00:29:42
организовать и сейчас я покажу тебе00:29:45
очень крутой инструмент который очень00:29:47
прост в настройке и при этом он00:29:49
позволяет нам создавать очень крутые00:29:51
приложения то есть сейчас во первых нам00:29:54
нужно модульность в java script00:29:56
естественно мы можем создавать отдельные00:29:57
файлы в корне но это не очень удобно00:30:00
плюс не очень удобно что каждый раз мне00:30:02
приходится заходить в браузер обновлять00:30:04
страницу вручную хочется чтобы это все00:30:06
делалось00:30:07
автоматически поэтому переходим google и00:30:09
ищем вот такую штуку как парсел джесс00:30:13
точка орг сразу же перешел на сайт эта00:30:15
технология00:30:16
эта технология называется партию и00:30:19
прелесть ее заключается в том00:30:21
по он очень быстрый он требует вообще не00:30:25
требует на фигура ция никакой и он00:30:27
служит для того чтобы собирать web00:30:29
applications то что нам как раз таки00:30:31
нужно можно еще почитать здесь про00:30:33
прелесть как его использовать ну и00:30:35
перейдём в get started00:30:36
и вот как нам необходимо его установить00:30:39
но для того чтобы сделать такую команду00:30:43
чтобы все работало нам безусловно00:30:45
потребуется но джесс установлен на00:30:47
компьютере потому что мы здесь00:30:49
пользуемся npm им если у тебя вдруг не00:30:51
стоит но джесс кстати проверить это00:30:54
можно следующим образом00:30:55
открыть какой-нибудь терминал и написать00:30:58
такую команду not минус в если у тебя00:31:02
выдается версия то на всякий случай00:31:04
проверим pen винус в00:31:06
если выдается версия то все хорошо если00:31:10
эти команды не работают тогда переходи00:31:12
на сайт но джесс на это серверный00:31:18
java-script00:31:19
скачиваешь текущую версию то есть просто00:31:22
скачиваем архив00:31:23
устанавливаешь на компьютер и все больше00:31:24
нечего делать то мне придется тут нет00:31:26
никаких сложных шагов и после этого00:31:29
снова проверю в консоли чтобы у тебя00:31:30
выдавалась такая команда собственно00:31:33
теперь с помощью and emma терминалами00:31:35
буду пользоваться прямо внутри в шторм а00:31:37
мы будем уже по настоящему генерировать00:31:40
наше приложение00:31:42
чуть позже нам это очень сильно поможет00:31:44
с точки зрения различных билдов пока что00:31:46
делаем следующее то есть нам необходимо00:31:48
начали проинициализировать наше00:31:50
приложение и для этого мы можем написать00:31:52
команду npm и нет нажимаю enter и для00:31:58
начала мы проходим некоторые шаги00:31:59
позволяющие нам настроить будущий файл00:32:02
то есть здесь можно нажать enter00:32:04
название проекта версия пусть будет по00:32:07
умолчанию допустим скрип чем будет java00:32:10
script и your applications00:32:14
ну тут можно любой descripcion вставлять00:32:17
entry point у нас будет индекс джесс00:32:19
оставляю по умолчанию тестовые команды00:32:22
пропускаю пропускаю ключевые слова можно00:32:25
здесь написать например джесс00:32:28
java-script00:32:31
автор обычно здесь пишется с таким00:32:33
образом то есть я пишу свое имя и дальше00:32:35
в треугольном сколько шу почта например00:32:38
в mail.ru00:32:41
пишу несуществующую почту просто чтобы00:32:44
объяснить принцип лицензия по умолчанию00:32:46
нажимаю and рокки в корне мы получаем00:32:50
файл hex . джейсон где в принципе00:32:52
написаны все эти вещи которые мы только00:32:53
что делали из консоли на самом деле00:32:56
данный файл нам потребуется для того00:32:58
чтобы установить зависимость то пока нет00:33:00
поля deep and nice но сейчас она00:33:02
появится и для того чтобы все это00:33:05
установить посмотрим на сайте мы просто00:33:09
должны написать либо00:33:11
как глобальную установку млн 100 минус00:33:14
же партию bunlar либо тут где-то есть00:33:16
установка локальной а вот если мы хотим00:33:20
добавлять его к нашему проекту это то00:33:23
что нам нужно в данном случае00:33:24
соответственно я копирую данную команду00:33:28
вставляю ее в консоль здесь происходит00:33:31
следующее что мы обращаемся к м тему00:33:33
говорим что нам нужно что-то установить00:33:35
название пакета и дальше флаг с iv tf00:33:39
для того чтобы мы записали данный пакет00:33:43
как зависимость именно для разработки то00:33:46
есть это у нас00:33:47
инструмент позволяющий нам просто00:33:48
удобнее разрабатывать но никак не писать00:33:51
сам функционал дальше просто ждем потому00:33:55
что mpm скачивает необходимый пакет00:33:58
устанавливает его локально на компьютер00:33:59
на это потребуется некоторое количество00:34:01
времени00:34:02
но это того точно стоит то сейчас00:34:05
увидишь в чем вообще прелесть00:34:08
использование различных00:34:09
баннеров в том числе паршиво когда все00:34:13
закончилось мы можем обновить проект и00:34:15
мы получаем здесь следующую значит новую00:34:18
картину то есть мы получаем папку но от00:34:20
мобиус00:34:21
здесь присутствует большое большое00:34:23
количество различных файлов на самом00:34:26
деле можешь на них внимание не обращать00:34:27
потому что это всего лишь зависимости то00:34:31
что нам важно у нас появилось поле dvd00:34:33
pendants и появился пакет парсел bunlar теперь мы00:34:38
сможем его использовать но для начала я00:34:40
хочу немножечко видоизменить теперь наш00:34:42
проект потому00:34:43
видишь теперь есть проблема в том плане00:34:44
что все идет в перемешку сейчас да и00:34:47
какие то папке файлы00:34:49
то есть тут есть некоторые конфигурации00:34:52
например вот моде us epa пищи . джейсон00:34:55
те файлы которые относятся нас именно к00:34:57
проекту00:34:58
я хочу занести в папку source сердце00:35:01
этого общепринятое название я просто00:35:04
беру переношу сюда все это дело и также00:35:07
переношу папку assets of в папку source00:35:10
то есть теперь мы знаем что в папке00:35:13
source вас лежат все исходники00:35:14
все что в другом месте это относится уже00:35:17
непосредственно к нашему проекту00:35:20
теперь значит у нас тут есть поле скрипт00:35:25
и мы можем его модифицировать значит00:35:28
сейчас я покажу как этим пользоваться00:35:30
факт в том что давай назовем запустим00:35:34
скрипт который будет запускать нам00:35:36
приложение surf здесь мы обращаемся к00:35:40
по всему то есть просто пишем здесь пар00:35:42
сюда это обычная строчка и дальше по00:35:45
сути мы просто указываем точку входа то00:35:47
есть чего ему стоит начать работу нам00:35:49
нужно начать работу здесь с яндекс и00:35:51
чтим и то есть это у нас является точкой00:35:53
входа00:35:54
поэтому мы так и пишем что мы переходим00:35:56
в папку source и я нахожу файл который00:35:59
называется индекс html на самом деле это00:36:02
все то есть вот наша команда00:36:03
и как ее теперь запустить переходим в00:36:07
консоль и учитывая что мы назвали скрипт00:36:09
surf ты кстати можешь назвать его как00:36:11
угодно мы пишем npm дальше для того00:36:15
чтобы запустить скрипт и мы пишем ран00:36:17
это его отдельная команда00:36:18
и дальше просто название нашего скрипта00:36:20
например surf нажимаю enter и теперь нам00:36:26
партию говорит что он запустился на локу00:36:30
хост один два три четыре мы можем на00:36:32
него нажать и вот наш проект то есть он00:36:36
неизменен отправишь что-нибудь изменить00:36:38
здесь например заголовок00:36:40
поставим здесь восклицательных знаков00:36:43
нажимаю controls по всему перри собрал00:36:46
прихожу браузер а тут уже все изменено00:36:48
круто конечно круто но это не все кишки00:36:51
паршивой только его начала час мы увидим00:36:53
как его00:36:55
что он вообще нам предлагает00:36:57
единственное что сейчас для того чтобы00:37:00
остановить процесс я нажму kontrol ц так00:37:02
чтобы выйти из него потому что это00:37:04
продолжительное действие00:37:05
я хочу немножечко настроить данный00:37:07
партию потому что мне не нравится что он00:37:10
спускается на борту один два три четыре00:37:12
я хочу сделать другой порт с помощью00:37:16
параметра минус п00:37:17
например 4200 или например 3000 я ставлю00:37:22
4200 но здесь можешь прописать00:37:25
какой-нибудь кастомный порт плюс я хочу00:37:28
добавить здесь00:37:29
параметр alpen который позволит в00:37:32
автоматическом режиме открываете окно00:37:33
браузера и теперь если я напишу npm ран00:37:36
surf то автоматически мы попадаем уже на00:37:42
лоб около 4200 casio настроен партию00:37:45
окей круто теперь поговорим про00:37:48
модульность потому что я хочу теперь и00:37:51
допустим модель вынести в отдельный файл00:37:52
и учитывая что у нас есть партию теперь00:37:55
нам все это делать намного проще в папке00:37:58
source я создаю новый файл который00:37:59
называл например моду . джесс и что беру00:38:03
и переношу эту модель то есть именно в этом файле00:38:05
мы будем описывать целиком наш сайт для00:38:09
того чтобы эту константу видели другие00:38:11
модули я пишу экспорт и теперь видишь у00:38:15
меня здесь нет сейчас00:38:16
переменную моду потому что мне00:38:17
необходимо ее импортировать00:38:19
импортировать00:38:20
таким образом моду и дальше название00:38:24
переменной моду в фигурных скобках00:38:27
потому что мы тут делаем такой вот00:38:30
именованный экспорт посмотрим все00:38:34
работает теперь мы можем допустим00:38:37
перенести в другой файл вот эти вот00:38:40
функции а потому что они являются москве00:38:42
functions то есть те функции которые00:38:44
работают не зависит ни от какого00:38:46
глобального контекста они зависят только00:38:48
от параметров это классный концепт из00:38:50
функционального программирования и00:38:52
поэтому мы его здесь используем допустим00:38:56
я создам file template . джесс и вынесут00:39:01
а все эти функции00:39:06
пока что это сломается00:39:08
значит теперь я напишу здесь экспорт00:39:11
экспорт экспорт и и еще раз экспорт00:39:17
теперь соответственно я могу их00:39:19
импортировать мы импортируем разную00:39:22
сущности из файла template00:39:25
и нас интересует здесь тайтл текст00:39:28
columbus единичный сохраним все еще00:39:33
работает то есть пока что мы разнесли00:39:36
разные функции на разные файлы но теперь00:39:38
наш код выглядит намного более чисто00:39:41
теперь я хочу сделать небольшое00:39:44
небольшое улучшение учитывая что мы00:39:46
начали работать с архивом и бандера00:39:48
нашего проекта потому что изначально мы00:39:50
подключаем css в html и теперь я хочу00:39:55
чтобы все раз подключался у нас именно00:39:57
через java script написав вот таким вот00:40:00
образом перейдя в инвиз . джесс и я буду00:40:03
импортировать стиль здесь потому что это00:40:06
позволит нам лучше взаимодействие потом00:40:08
со стилями и в автоматическом режиме их00:40:10
оптимизировать здесь я просто пишу main00:40:14
css2 я принесу их в отдельную папку00:40:17
зовут стайлз сюда принесу майн css00:40:27
так значит импортом и поправили да00:40:30
потому что добавили сюда папочку00:40:33
ставился сохраним да все работать как00:40:36
прежде это можно пока убрать теперь00:40:41
перед тем как мы еще будем улучшать00:40:43
данный код я хочу поговорить про партию00:40:46
и про разные его режима сборки00:40:48
потому что сейчас мы работаем это00:40:52
временное ошибка можешь не мешать00:40:53
внимание сейчас мы работаем только с00:40:57
режимом разработки и он запускает нам dv00:41:01
сервер который позволяет автоматически00:41:02
все это обновлять но нам хочется также00:41:05
собирать весь этот проект для того чтобы00:41:07
потом его например диплом на удаленный00:41:10
сайт поэтому теперь в поле scripts я00:41:13
могу добавить еще один скрипт назову00:41:15
например его билд и с помощью паршивая00:41:19
буду собирать весь этот проект значит и00:41:22
спешу партию дальше вызываю команду бьют00:41:25
и дальше указываю точку входа00:41:27
source индекс с темой то же самое и00:41:30
теперь внутри что нам это дает тут00:41:33
кстати есть какая-то папка dist00:41:34
временная00:41:36
мы можем я удалить она все равно00:41:38
генерируется автоматически мы запускаем00:41:41
команду mpm ран бьют партию будет нам00:41:49
проект и вот мы видим его output то есть00:41:51
то что он нам сделал значит папки диск у00:41:53
нас есть теперь00:41:55
source pp + сами файлы00:41:58
если мы посмотрим на диск вот наш индекс00:42:01
html причем он абсолютно мини fits00:42:03
ированный да то есть тут удалены лишние00:42:05
пробелы enter и и это круто потому что00:42:08
это позволяет сайту быстрее грузится00:42:10
есть css и за счет того что мы загрузили00:42:13
о через партию он тоже у нас мини00:42:14
фиксированный полностью есть java script00:42:18
и как видишь он тоже минимизированы00:42:20
да то есть партию за нас все это00:42:23
оптимизировал нам даже ни чего не нужно00:42:25
делать агенстве на и что здесь мы00:42:29
получаем различные source п.п.00:42:31
то есть это больше нужно для наверное00:42:35
какой-то разработки да и в случае00:42:37
эстетики это ошибки но мы можем эти00:42:40
source мы по брать помощью параметра но00:42:43
у00:42:45
source мэпс00:42:47
а теперь если мы удалим папку dist и00:42:51
заново попробуем собрать проект00:42:55
то вот мы получаем всего лишь три файла00:42:58
в папке dist вот 3 файлов отлично то00:43:01
есть теперь у нас готовая инфраструктура00:43:04
и теперь мы можем продолжать комфортную00:43:06
разработку ok возвращаемся к нашему00:43:10
index.htm или давайте посмотрим что00:43:12
можно улучшить00:43:13
здесь потому что на самом деле тут00:43:15
присутствует вот такая вот некрасивая00:43:17
конструкция давай запустим сборку00:43:20
проекта прям lancer00:43:26
закрываем здесь присутствует такая вот00:43:31
некрасивая конструкция потому что здесь00:43:33
присутствуют различные дубликаты коды да00:43:35
по сути мы формируем html в зависимости00:43:38
от типа понятно что если у нас появится00:43:42
еще какой-нибудь и блоков то нам00:43:44
придется писать этот iv что в общении00:43:46
неправильно поэтому здесь мы можем пока00:43:50
что оптимизировать данную конструкцию00:43:52
следующим образом учитывая что тип и00:43:57
название функции у нас совпадает но мы00:44:01
сами так сделали то мы можем00:44:02
воспользоваться синтаксисом объектов в00:44:05
java script и получать по ключу из00:44:09
объекта эту функцию как это выглядит00:44:11
допустим в файле template . джесс я00:44:14
больше не буду экспортировать эти все00:44:16
функции они останутся локальными для00:44:18
этого файла и на выходе я буду00:44:23
экспортировать всего лишь одну константу00:44:25
которую назову template00:44:28
это будет у нас объект где я буду00:44:32
хранить по ключам наша функция ну00:44:34
допустим в той ту я буду хранить той то00:44:37
в тексте текст в00:44:41
image image и что у нас осталось column00:44:46
column00:44:48
то есть просто экспортируете функция00:44:50
единственное что тут мы можем не00:44:52
дублировать код так кого java-script00:44:55
если ключ в объекте и значение его00:44:57
совпадают то мы можем просто написать00:44:59
здесь вот таким образом что много более00:45:02
красиво получается теперь мы00:45:05
экспортируем 10 template00:45:07
это объект да мы должны его здесь00:45:09
собрались теперь у нас нет этих функций00:45:12
но учитывая что это объект и мы можем00:45:16
допустим к нему обратиться так вот это00:45:18
все закомментируем00:45:20
чтобы она не вызывала у нас ошибки00:45:22
посмотрим в окон свой логин примерно00:45:24
template что это такое открываю консоль00:45:28
смотрю это просто нас объект до у00:45:31
которого есть нужные ключи это означает00:45:33
что к какому-то ключу я могу обратиться00:45:35
например как тайтл да и получить эту00:45:39
функцию которая там хранится по плечу00:45:41
то есть смотрю вот эта функция до00:45:44
соответственно если я сюда передам то00:45:47
есть это возвращает нам функцию если я00:45:50
сюда передам например какой-нибудь00:45:55
объект у которого будет значение в илью00:46:00
тест или текст то на выходе мы получаем00:46:04
некоторые шаблон да то есть это означает00:46:06
что функция работает берем эту функцию00:46:11
соответственно маленький экскурс в java00:46:13
script если у нас есть допустим00:46:14
переменная со строчкой той ту дату мы00:46:18
также можем получить по этой переменной00:46:22
какое-либо значение в объекте таким вот00:46:25
образом но если мы посмотрим то вот00:46:27
опять наша функция тайтл соответственно00:46:30
у нас есть блок type и именно поэтому00:46:33
блок type мы можем получить необходимую00:46:35
нашу функцию то есть для того чтобы не00:46:38
писать всю эту длинную конструкцию и00:46:40
примерно выглядеть это будет следующим00:46:42
образом здесь я напишу00:46:44
допустим создаем переменную ту html и00:46:49
здесь я буду хранить00:46:51
функцию да мы будем получать ее из00:46:53
объекта template и сюда я буду00:46:56
передавать название ключа00:46:59
который хранится в блог00:47:00
и соответственно эта функция которая00:47:04
принимает себя параметр блог да потому00:47:06
что все эти функции принимаю параметр00:47:08
блок и она возвращает нам уже html00:47:11
нужного блока00:47:12
здесь могу написать то html и сюда00:47:15
передайте сам бог сохранил и вот наш00:47:22
сайт снова работает то есть видишь00:47:24
насколько более лаконичный стал наш код00:47:26
и теперь в случае если мы добавим новый00:47:29
элемент то нам не придётся добавлять00:47:30
новые iv и то есть это я все убираю00:47:34
тестова вещь я убираю единственное что00:47:36
нам нужно проверить что если у нас00:47:38
вообще определена функция то есть м и00:47:41
то тогда мы будем уже вставлять этот код00:47:44
до если допустим нет такого ключа и мы00:47:47
получили здесь он define the00:47:48
потенциальная застройщик может вызвать00:47:50
ошибку да поэтому мы здесь проверяем что00:47:52
в и чтим или что то есть кстати перед00:47:56
тем как продолжить дальше я бы хотел еще00:47:58
сказать что мы сейчас пользуемся парс00:48:01
вам и это как наиболее простой00:48:03
инструмент для сборки таких проектов и00:48:05
он подходит больше для маленьких проект00:48:08
в те действительно мы разрабатываем00:48:10
какие-то локальные вещи где не нужно00:48:11
вдаваться в глубь настроек но00:48:14
присутствует более популярный инструмент00:48:16
он называется в пак который позволяет00:48:19
более точечно детально и профессионально00:48:22
настраивать сборку проектов он чуть00:48:24
сложнее в настройки но при этом он дает00:48:26
намного больше возможностей про него00:48:29
кстати я рассказываю в отдельном курсе00:48:32
теперь вернемся к оптимизации нашего00:48:36
кода и посмотрим что можно улучшить00:48:37
теперь здесь здесь я бы хотел перейти в00:48:41
file template00:48:42
и посмотреть какие вещи можно00:48:46
оптимизировать здесь то есть например мы00:48:48
видим что структуру каждого блока очень00:48:50
похожи да например тут присутствует00:48:52
die frau к сэм и так далее то есть везде00:48:56
эта структура у нас проглядывается00:48:57
почему бы нам вместо того чтобы каждый00:49:00
раз писать такой вот статический текст00:49:02
не создать функцию утилиту которая00:49:05
позволит нам это дело автоматизировать00:49:07
более удобно настраивать00:49:10
сказано сделано поэтому переходим в00:49:13
он значит корень проектов в папку source00:49:16
и здесь я создам новый фактор назову00:49:18
utils . джесс обычно в таких файлов00:49:21
хранятся какие то вспомогательные00:49:24
функции тоже performance до которая00:49:26
зависит только от входных параметров00:49:28
которые являются утилитами например00:49:31
здесь я буду сразу же экспортировать00:49:33
функцию которую назову скажем ролл что00:49:37
будет делать данная функция00:49:39
она будет принимать себя некоторый00:49:41
контент и возвращать и нам будет нам00:49:44
шаблон который мы один раз пропишем да00:49:47
точно будет див с классом ролл и сюда мы00:49:52
просто ставим этот контент то есть это00:49:53
просто некоторое будет обертка00:49:55
по аналогии я сделаю функцию которую00:49:59
назову кол тоже будет понимать все00:50:01
контент только она будет оборачивать в00:50:03
класс кол с м да который мы до этого00:50:07
использовали теперь как на может это00:50:10
помочь для начала мы можем это все00:50:12
импортировать то есть мы переходим в00:50:16
utils00:50:17
и нас интересует ролл и кол теперь вот00:50:21
этот код попробуй переписать00:50:23
самостоятельно использование этих00:50:24
функций коменданте 2 секунды окей значит00:50:30
две секунды что на паузу поставить00:50:31
разумеется но выглядит теперь это будет00:50:34
следующим образом то есть учитывая что00:50:35
нам нужно все вернуть в00:50:37
роу я так и пишу использую функцию roll00:50:40
дальше нам нужно обернуть все в колонку00:50:43
поэтому 10 шум кол и дальше уже00:50:46
непосредственно сам контент в нашем00:50:48
случае это будет пока что такое вот00:50:50
заголовок то есть вот теперь как00:50:52
выглядит наша функция и делает она то же00:50:55
самое что и до этого на мой взгляд так00:50:57
намного круче по аналогии мы можем00:51:01
сделать перед для текста только вместо00:51:04
контента здесь вот такой вот контент да00:51:06
и вообще поменять самостоятельно00:51:09
попробуй меня сюда вот для всех00:51:10
остальных функций и это тоже буду делать00:51:14
значит здесь мы можем вот так вот00:51:18
улучшить до например вот этот строчку00:51:21
вообще убрать и просто написать кол ой00:51:25
там00:51:26
а здесь написать вот получать наш00:51:30
контент писать00:51:32
row и что передать html а то есть уже00:51:36
без строк но при этом все равно выглядит00:51:39
лаконично и круто ну и на мой взгляд00:51:42
естественно понятно значит здесь у нас00:51:45
будет ролл лично мы придаем наш контент00:51:50
ok посмотрим все ли так все так да то00:51:55
есть все блоки нас присутствуют кроме00:51:59
одного блока с картинкой которые мы00:52:00
потеряли00:52:01
почему мы его потеряли потому что мы00:52:03
исправили пути но мы можем перейти в00:52:07
модель и уже воспользовавшись парси вам00:52:10
сделать по-умному то есть сейчас мы00:52:11
будем00:52:12
не прописывать статический путь до00:52:15
картинки а мы будем прямо и импортировать в java00:52:18
script из папки сны матч . png и теперь00:52:23
вот здесь будет храниться путь до00:52:25
картинки за который нам не стоит переживать00:52:27
теперь сохраняем и смотрим да вот наша00:52:31
картинка прекрасно так template00:52:36
значит здесь ещё есть один такой момент00:52:38
который хотел бы показать вот например00:52:41
здесь здесь видно что в момент мы00:52:45
передаем кубик функцию она принимает00:52:47
себя а этом и возвращает call айтен но00:52:50
когда мы с помощью какой-то функции00:52:52
понимающий параметр преобразовываем00:52:54
таким способом то на самом деле вот эта00:52:56
вот запись полностью идентично тому если00:52:59
бы написал вот так то есть передал сюда00:53:01
бы эту функцию как референс и позже она00:53:03
бы вызвалась с нужным параметрам то есть00:53:06
теперь мы можем написать таким вот00:53:09
образом сохраним все то же самое да но00:53:11
при этом стал код лаконичнее опять же00:53:14
соответственно теперь вот мы даже можем00:53:17
метод jojen отнести сюда и написать00:53:21
такую цепочку мне кажется так удобнее00:53:25
когда идет такая цепочка преобразование00:53:26
в массиве круто теперь я предлагаю00:53:31
усложнить наш сайт потому что мы00:53:33
научились выводить какой-то текст хорошо00:53:35
значит что нам с этим делать00:53:38
потому что хотелось бы какой-нибудь00:53:39
стилистике например и как-то сайт вообще00:53:41
раскрашивать то есть как с этим00:53:43
поступить на самом деле я предлагаю00:53:46
завести еще одно свойство в нашей модели00:53:49
которые допустим будет универсально00:53:52
называться общин но это будет свойства00:53:54
это будет у нас объект00:53:55
где мы будем хранить какие-то00:53:58
необходимые свойства для конкретно этого00:54:02
блока ну например самый простой вариант00:54:06
скажем мы не всегда хотим использовать00:54:08
заголовок h100:54:10
то есть я бы хотел чтобы это заголовок я00:54:13
мог сам настраивать00:54:14
будет пусть это будет либо h5 либо h100:54:17
либо аж два и так далее соответственно я00:54:20
могу завести здесь новое свойство00:54:22
которое назову например так и например00:54:25
это у меня будет аж два то есть я00:54:28
передаю сюда об шанс и как теперь нам из этих опций00:54:32
превратить шаблон но в функцию до00:54:37
которая генерирует нам его мы принимаем00:54:39
как раз таки весь этот блок то есть00:54:41
здесь если мы посмотрим на блог об шанс00:54:46
сохраним то вот мы получаем в краске эти00:54:49
опции до соответственно теперь мы можем00:54:51
спокойно это использовать например если00:54:55
могу создать отдельную переменную com'st00:54:58
так равно блок общем так если его нет то00:55:03
тогда по умолчанию пусть будет h1 да это00:55:06
такой специальный оператор который в00:55:07
случае если эта штука отсутствует то00:55:09
тогда мы даем по умолчанию так это00:55:13
просто на строчка на и поэтому мы можем00:55:15
заменить ее прямо в html здесь и00:55:18
соответственно здесь мы посмотрим теперь00:55:22
ты должен быть у нас аж два дайте перед00:55:26
h2 если мы в модели поменяем допустим на00:55:28
скажем h6 например то вот он совсем00:55:33
маленький до 6 я думаю теперь иди и ясно00:55:37
верну на h2 мне нравится h2 теперь00:55:41
допустим давая сразу поменяем названия00:55:43
на нормальное скажем здесь я напишу00:55:45
com00:55:46
ну тоже сайтов на чистом00:55:53
java-script естественно название ты00:55:57
можешь самостоятельно придумывать я00:55:59
что-то более внятно здесь написал теперь00:56:02
если посмотрим то вот как выглядит наш00:56:03
заголовок и дальше я хочу его00:56:06
стилизовать то есть я хочу написать для00:56:08
него нормальные стиля и для этого я00:56:10
воспользуюсь00:56:11
объектом absence где я напишу ещё одну00:56:14
поле который будет называться например00:56:16
ставилась и это у меня будет пока что00:56:19
строчка где просто буду перечислять в00:56:22
онлайн формате определенные стили00:56:24
естественно пока что все это упрощает00:56:26
для того чтобы имитировать00:56:29
время данного курса но я хочу здесь00:56:31
передать именно саму суть допустим 1000:56:33
напишем сейчас я вставлю просто чтобы не00:56:36
подбирать заранее стиль в качестве00:56:39
бэкграунда линейный00:56:41
линиях градиент дальше так что совместно00:56:44
коллаж будет ффф дальше в принципе пока00:56:49
этого достаточно чтобы именно00:56:50
протестировать сам функционал то есть мы00:56:52
сюда просто передали определенные00:56:54
свойства как теперь их обработать00:56:57
переходим в template00:56:59
и здесь мы также можем получить объект00:57:02
styles стайлз общем стайлз а если нет то00:57:09
по умолчанию ничего не будет неважно00:57:11
теперь00:57:13
как нам эти стили применить то есть если00:57:16
мы применим и для просто т.к. то ничего00:57:19
хорошего не получится можно конечно00:57:20
попробовать написать здесь 100 его равно00:57:24
поставился мы посмотрим но не ожидаю00:57:28
ничего позитивного от этого00:57:29
тут он белый цвет есть нет даже00:57:31
линейного градиента поэтому эти онлайн00:57:36
стиле нам лучше применять к самой00:57:38
строчке то есть корову road у нас00:57:41
функция до которая просто делает контент00:57:43
но никто нам не мешает в этой функции00:57:46
принимать второй параметр да сразу его00:57:48
опишем который будет называться ставился00:57:52
и пусть по умолчанию это будет00:57:55
просто пустая строчка теперь мы можем00:58:02
добавить00:58:03
онлайн стиль ставим куда передать эти00:58:06
ставился00:58:08
соответственно теперь в шаблоне относят00:58:11
параметр и мы просто его передаем как второй00:58:14
параметр в функцию roll то есть вот00:58:16
таким вот образом и теперь если мы00:58:18
посмотрим00:58:20
то у нас ничего пока нет нужно00:58:22
разобраться почему то есть я беру00:58:24
инспектируя данный элемент здесь мы00:58:30
видим что у нас не валидная сеса00:58:31
свойства да потому что найдет в кавычках00:58:34
то есть сейчас чтобы подробнее было вот00:58:37
элемент style видишь он не может читать00:58:39
background да потому что они понимают00:58:41
что это за кавычки что это за синтаксис00:58:43
логично поэтому стоит удалить черт00:58:46
кавычки здесь сохраняем вуаля вот наш00:58:52
градиент да на блоке понятно что стиле00:58:55
просто и здесь но опять же я хочу00:58:57
передать именно саму суть то есть00:58:59
принципе стилистика работает что мы00:59:01
можем еще дописать здесь например00:59:03
например текст оnline с центр например и00:59:10
пусть будет поединках 1.5 м вот например00:59:14
такие стиля00:59:15
чуть лучше их смотрим уже неплохо на мой00:59:18
взгляд уже даже очень неплохо то есть00:59:20
вот получили мы первый блок00:59:26
соответственно также хочу улучшить это00:59:29
место потому что тут есть определенно00:59:30
дубликаты код например тик-так стайлз00:59:33
ставился с помощью синтаксиса java00:59:35
script мы можем написать то же самое00:59:37
только в одну строчку мы говорим из00:59:39
какого объекта нам необходимо забрать00:59:41
определенные поля00:59:42
то есть нас интересует блок absence00:59:45
здесь мы используем такое понятие как00:59:47
где структуризация мы его кости00:59:49
используем также и в им портах и здесь00:59:52
пишем нужные поля так и например00:59:53
ставился то есть это вот идентично тому00:59:56
что написано00:59:57
если мы хотим какое-то значение по00:59:59
умолчанию как здесь то мы можем просто01:00:02
написать равно h1 все то есть теперь01:00:06
тоже мы улучшили код и теперь он стал01:00:08
более лаконичен01:00:10
соответственно я хочу теперь все то же01:00:13
самое сделать и для остальных блоков01:00:15
чтобы мы остальные блоки смогли01:00:17
стилизовать но перед этим пока мы еще не01:00:20
спроецировали все это на остальные блоки01:00:22
я хочу внести еще одно улучшение которое01:00:25
позволит нам проще взаимодействовать с01:00:27
моделью потому что сейчас стиль мы01:00:29
определяем как просто такой длинный01:00:32
длинную строчку до состоящую из онлайн01:00:35
стиле короче отнюдь читаем а как сделать01:00:37
так чтобы это было читаем то есть01:00:39
закомментируем круто если бы мы смогли01:00:43
все это описывать в формате объекта01:00:45
например стайлз и дальше здесь описать01:00:48
уже нужные нам свойства например01:00:50
background равно вот этот наш линейный01:00:56
градиент01:00:57
хотим следующее свойство допустим color01:00:59
без проблем значение ффф значит хотим01:01:06
padding тоже пишем 1 м там нас 1501:01:11
торрент01:01:12
и что касается текст оnline новейшим01:01:15
через дефис напишет написан поэтому есть01:01:17
мы должны взять кавычки текст оnline01:01:21
центр то есть я хочу теперь чтобы стиле01:01:25
задавались вот таким вот образом потому01:01:26
что это намного удобнее описывать их это01:01:29
можно удалить но если мы сохраним то эти01:01:32
стили мне применяются потому что если мы01:01:35
посмотрим здесь нас объект объект потому01:01:38
что мы головки поджидает строчка мы01:01:43
придаем ему объект нам потребуется еще01:01:47
одна утилита позволяющая преобразовывать01:01:49
такой объект в строчку стилей и мы можем01:01:52
создать и действительно в файле utils я01:01:55
назову эту функцию css который будет01:01:59
принимать себе объект01:02:00
стилей и пусть по умолчанию он равняется01:02:03
именно по этому объекту дальше01:02:06
существует большое количество способов01:02:07
как сделать итерацию по объекту я покажу01:02:10
наиболее оптимальный есть такой01:02:13
глобальный класс в java script который01:02:16
называется объект и у него мы можем01:02:18
вызвать метод keys01:02:21
куда мы передаем сам объект на выходе мы01:02:25
получаем здесь массив keys01:02:29
если мы на него посмотрим что такое keys01:02:32
по вы сейчас вы видим это в консоль для01:02:35
того чтобы использовать эту функцию на01:02:38
моменте когда мы формируем шаблон то01:02:42
есть в сам ролл мы уже должны передать01:02:44
строчку до чтобы он здесь не думаю как01:02:46
все взаимодействовать с различными01:02:48
объектами значит здесь соответственно01:02:51
вот нас объект этот мы хотим его01:02:53
привести к строчке да поэтому я могу01:02:57
просто вот так вот вызвать функцию css и01:02:58
естественное и импортировать и свеж все01:03:02
построено на функциях но при этом это01:03:04
будет работать значит обновляем смотрим01:03:07
в качестве keys мы получаем ключ и01:03:10
то есть массив этих ключей этого объекта01:03:15
соответственно дальше мы можем допустим01:03:18
пробежаться по этому массива с помощью01:03:21
map где на каждой итерации мы получаем01:03:24
определённый kia и здесь нам необходимо01:03:29
преобразовать то есть вернуть новую01:03:32
строчку из объекта уже в стиле то есть01:03:35
сам ключ он на тоже найти вначале01:03:37
поэтому есть мы пишем киев дальше там01:03:40
синтаксис двоеточие и после этого нам01:03:43
необходимо указать значение а значение01:03:45
мы берем из объекта стайлз по ключу ки01:03:47
таким вот образом соответственно мы01:03:51
здесь получаем некоторые рей этих стилей01:03:56
и возвращать мы будем рей01:03:58
которые должны соединить через точку01:04:02
запятой потому что таковы правила в css01:04:05
сохраняю смотрим все работает классно но01:04:10
работающий код это не всегда финальный01:04:14
код потому что его можно улучшать01:04:16
соответственно это место тоже можно01:04:18
очень круто улучшить и написать01:04:20
красивее то есть закомментируем чтобы01:04:25
видно было старое решение и видно было01:04:27
новое решение мы можем сделать то же01:04:30
самое только красивые значит мы01:04:32
прибегаем ся по момент без некоторые01:04:38
сложности с управлением клавиатура01:04:39
мы продвигаемся по объекту стайлз и мы01:04:43
знаем что вот эта штука нам вернет как01:04:46
бы массив keys да то есть это у нас01:04:49
просто будет массив01:04:50
но у массива мы сразу же можем вызвать01:04:52
метод мэн до который нам будет01:04:55
преобразовывать всю эту структуру01:04:57
начинать будет кии и есть мы получаем01:05:00
можно без зрительно написать вот эту01:05:02
строчку и на самом деле здесь мы сразу01:05:07
же можем вызвать метод01:05:08
jojen по точки запятой то есть мы теперь01:05:14
написали эту функцию в одну строчку но01:05:18
опять же супер лаконичность не всегда01:05:21
есть хорошо и порой лучше некоторая01:05:23
декларативность так когда мы точно01:05:26
обозначаем что делает методы то есть01:05:29
например мы можем вот эту строчку тоже01:05:30
сделать красивее я ее обозначить теперь01:05:34
как отдельную функцию за выйдет у string01:05:37
и тут я возьму и эту функцию01:05:43
напишу отдельно то есть теперь у меня01:05:44
есть отдельная функция которая делает01:05:47
приводит к строке данный стиль и теперь01:05:51
смотри как красиво получается то есть01:05:53
вот теперь наш весь метод описан и и это01:05:56
все некрасивые мы можем убрать да то01:05:59
есть теперь понятно что мы берем01:06:01
ключевой объект а дальше с помощью мы01:06:03
приводим к строке каждый элемент и01:06:05
дальше соединяем все же точку , если мы01:06:07
посмотрим то ничего не изменилось теперь01:06:12
я хочу чтобы мы чтобы я поставлю на01:06:17
паузу так как теперь необходимо будет01:06:20
заполнить все остальные блоки возможно01:06:22
ты поиграешь со стилизацией их пишут01:06:25
какие-то свои собственные стили да то01:06:27
есть попробуешь создать этот сайт по01:06:28
конструировать его со своими заголовками01:06:31
текстами01:06:32
я же в свою очередь сейчас поставлю на01:06:35
паузу и вставлю свои данные но01:06:38
естественно если тебе захочется пойти с01:06:41
моим конфигом для сайта то ты сможешь в01:06:43
дополнительных материалах к этому видео01:06:45
скачать01:06:46
то же самое что написано и у меня и так01:06:50
я надеюсь что ты поигрался теперь давай01:06:52
посмотрим что получилось у меня то есть01:06:54
тай туй оставят таким который он был01:06:57
дальше второй блок нас идёт блок и матч01:07:00
но тоже самое только у него есть вот01:07:02
такие вот свойства отдельные стиля01:07:06
колонки теперь в качестве вылью это01:07:09
массив определенный текст и стиле вот01:07:13
такие и последний блок это текст у которого в01:07:16
илью равняется переменный текст я просто выше01:07:19
его определил чтобы там не было много01:07:21
написано и здесь у нас вот такие стиля01:07:25
то есть я сделал все то же самое что мы01:07:28
уже проговорили вот текст целиком но на01:07:31
сайте час посмотрим01:07:32
и это выглядит пока что вот таким вот01:07:34
образом то есть еще не до конца красиво01:07:36
по той причине что мы в других блоках не01:07:40
определили стилистику на давай поэтому01:07:43
перейдём сюда и попробуем то есть я01:07:45
надеюсь что ты смог уже самостоятельно01:07:47
это сделать попрактиковаться01:07:49
но тем ни менее нам тоже нужно это01:07:51
сделать поэтому посмотрим что как это01:07:53
выглядит здесь собственно говоря нам01:07:57
просто нужно передать определенный стиль01:07:59
в качестве текста поэтому я могу01:08:00
написать здесь блог об шанс ставился до01:08:06
в ролл в колонке в принципе то же самое01:08:10
то есть блок общем стайлз и в01:08:15
и мать тоже вторым параметром брал я01:08:17
передаю блог об шанс стайлз так01:08:25
посмотрим не сработало почему но и01:08:29
посмотрим01:08:33
потому что в ров мы передаем объект да а01:08:37
мы сделали так что нам нужно все это01:08:40
оборачивать в функцию с.с.01:08:42
поэтому я запишу css в принципе можно01:08:46
скопировать таким образом отлично теперь01:08:52
что-то более-менее внятное получилось то01:08:55
есть вот у нас есть потрясающие01:08:56
градиенты большая картинка который01:09:00
хочется сейчас исправить но при этом уже01:09:02
сайт более-менее вырисовывается это01:09:05
хорошо теперь что касается картинки01:09:08
да то есть здесь мы пока что можем01:09:10
влиять только на стиле самого блока out01:09:13
на стиле самой картинки мы влиять не01:09:15
можем до из за этого получается что она01:09:18
у такого как от произвольного размера01:09:19
поэтому нам ничто не мешает допустим01:09:22
перейти в модель найти картинку на и мяч01:09:25
и добавить новые свойства в общем01:09:28
которые например и назову и матч01:09:32
ставился это будет объект ну и кстати01:09:36
для картинки мы можем придумать параметр01:09:38
например alt если напишу это картинка ну01:09:43
или любой другой аль который будет01:09:45
выгоден в качестве стиле здесь я01:09:47
допустим напишу вы например 500 пикселей01:09:53
и height of the01:09:58
теперь естественно ничего не изменится01:10:01
да потому что нам этот параметр01:10:02
необходимо обработать в соответствующей01:10:04
функция01:10:05
значит вот у нас функция и матч здесь мы01:10:10
можем получить отдельно из блок общем01:10:14
так мы до этого делали можем получить01:10:16
image styles alt и просто вставил сюда01:10:21
для того чтобы вот каждый раз так не01:10:23
писать соответственно здесь нас будет01:10:25
написано просто styles alt01:10:28
пусть будет по умолчанию равняться01:10:31
пустой строке alt alt01:10:36
и что касается и мечтают то мы можем01:10:38
задать их прямо для нашей картинки то01:10:41
есть ставил и сюда мы передаем css и01:10:46
матч ставился посмотрим да теперь эта01:10:50
картинка более красиво выглядит на мой01:10:52
взгляд но кстати тоже и запросов01:10:55
оптимизации из того что java script01:10:57
умеет с . получается довольно таки01:11:00
большой не очень удобно читать все есть01:11:02
сократить допустим имущества с название01:11:05
перемен это будет это более удобно01:11:07
поэтому есть такой синтаксис когда мы01:11:10
говорим вы какую переменную эту перемену01:11:12
необходимо положить например в будет01:11:15
иметь ставился из или просто с на и01:11:21
соответственно теперь данная строчка01:11:22
будет чуть покороче посмотрим все01:11:25
работает теперь я хочу поговорить про01:11:31
модель то есть она уже довольно-таки01:11:33
объемная у нас она полностью состоит из01:11:35
объектов и это здорово но я хочу пойти01:11:38
дальше ведь в java script присутствует01:11:40
также и класс и класс на самом деле в01:11:43
java script это просто конструкции01:11:45
позволяющие более удобно создавать01:11:47
объекты но это пример сейчас мы каждый раз здесь01:11:50
пишем type вылью об шанс наверняка01:11:54
где-то мы можем совершить ошибку01:11:55
где-то например написав там opi он01:11:59
сможет в этом духе и потом будем гадать01:12:01
а почему у нас тут блин почему то не01:12:03
работает но это такой базовый пример то01:12:05
есть на самом деле класс решает01:12:07
множество задач мы сейчас посмотрим01:12:08
какие я предлагаю теперь определение01:12:11
этих объектов создать именно через01:12:13
классы для этого я создам новую01:12:16
директорию в проекте назову ее close as01:12:20
например и здесь я создал файл который01:12:24
будет называться блокс .01:12:27
джесс здесь я создам свой первый класс01:12:30
который называл например блок синтаксис01:12:34
у него подобный то есть для начала я01:12:37
создаю здесь конструктор и сразу говорю01:12:39
какие параметры данный класс в01:12:41
конструктор принимает нашем случае этот01:12:43
type потом идет в илью01:12:46
потом идет об шанс то есть больше нам01:12:49
тут и ничего знать не нужно все что мы01:12:51
будем здесь делать мы будем заносить это01:12:53
все в приватную01:12:54
в локальную переменную из то есть01:12:57
например вы стайп равно type вы с целью01:13:02
равно белье из общей он все равно общем01:13:09
все это все что мы сделаем то есть таким01:13:12
образом мы просто создадим объект у01:13:14
которого были ключи type вылью и общем01:13:17
то что нам как раз такие нужны чтобы01:13:20
воспользоваться этим классом я его буду01:13:22
экспортировать и теперь в модели01:13:24
импортируя import from class с blogs01:13:29
и файл будет называться точнее01:13:32
переменной будет называться блок теперь01:13:35
чтобы а3 factory данную модель я напишу01:13:38
здесь new blog данная штука вернет мне01:13:42
объект точно такой же по сути только01:13:45
теперь я и тот же объект будут создавать01:13:48
немного иначе то есть первым параметрами01:13:50
принимаю здесь type toi tu подсказочка01:13:53
вылью01:13:55
просто его беру передаем и absence беру01:13:59
и копирую весь этот объект01:14:01
смотрим где он заканчивается он01:14:03
заканчивается здесь01:14:04
копирую и вставляю и не получилось01:14:10
попробуем тогда вот таким вот образом01:14:14
нам нужно здесь причастил такие ключи01:14:16
где-то рядом лишнего захватила здесь не01:14:20
забываем , все теперь получается вот это01:14:23
вот мы можем просто убрать01:14:25
сохраним посмотрим ничего не изменилось01:14:29
на то есть как я и говорю класс в данном01:14:31
случае просто нам возвращает01:14:32
определенный объект но теперь вот эти01:14:35
вот параметры нам не нужно описывать01:14:37
например писать type вылью это все01:14:40
делает за нас автоматически сам класс01:14:41
теперь попробуем 3 factory01:14:43
самостоятельно все остальные объекты я01:14:46
это буду делать по сути с тобой сейчас01:14:49
бог значит здесь у нас и мы и матч и01:14:55
набор опций попробуем еще раз так01:14:59
сделать до сработала соответственно01:15:03
теперь-то можно удалить01:15:04
10 запятую не и бог опять из нас будет01:15:08
уже колонн в качестве вэлью массив и в01:15:14
качестве избитую не забываем опции01:15:22
объекта удаляем нее блок текст текст и01:15:30
вот этот объект01:15:36
отлично01:15:37
сохраним посмотрим все работает как и01:15:41
прежде посмотрим может быть сможем01:15:45
console.log вывести здесь например вот01:15:46
на блок до что он теперь себя01:15:48
представляет смотрим на блок консоли то01:15:53
есть по сути тот же самый объект что я01:15:55
буду до этого только теперь умный chrome01:15:57
подсвечивает что он является иностранцем01:16:00
класса блок на хотя в прототипе у него01:16:03
идет конструктор блоко это все дальше01:16:05
идет тоже самый объект подробнее про01:16:08
прототипы и про классы и также01:16:10
рассказываю либо на ю тубе либо еще01:16:13
более подробно в курсе да пока мы01:16:15
рассматриваем такие вот совершенно01:16:16
базовые вещи теперь я хочу поговорить01:16:24
про по сути настоящее значение классов01:16:30
модели потому что сейчас мы можем уже01:16:33
написать более крутой и более01:16:36
масштабируемый код с использованием01:16:38
одного из принципов01:16:39
solid который называется опыт клаус01:16:42
принципу01:16:43
и на этом примере01:16:46
во-первых разобраться зачем все это01:16:47
нужно разобраться зачем нужна open самом01:16:50
деле ки проблема она решает ну одной из01:16:52
проблем на как раз таки примере вот01:16:55
этого нашего кода01:16:57
потому что сейчас у нас есть один01:17:00
некоторый общий класс блок и он01:17:03
принимает очень01:17:04
похожие параметры но дальше мы01:17:06
конфигурируем например с помощью строчки01:17:08
какого типа этот будет блок в нашем01:17:12
случае здесь допустим то эту им еще так01:17:14
далее а что если мы создадим01:17:16
отдельные классы которые сразу же будут01:17:20
создавать нам допустим блок с типом то01:17:23
это блок с типом и мочи и так далее то01:17:27
есть как минимум нам уже не придется01:17:29
писать вот эту строчку а выглядит это01:17:31
все очень просто то есть начнет мерс01:17:34
тайтла здесь я буду экспортировать новый01:17:37
класс который должен наследоваться от01:17:40
блока именно из за того что у него есть01:17:42
этот конструктор01:17:43
допустим я назову его той то блок и для01:17:48
того чтобы расследовать я использую01:17:50
ключевое слово extends где пишу название01:17:53
класса блок здесь а также реализовываю01:17:57
конструктор но теперь здесь уже мы будем01:17:59
принимать только в илью и только absence01:18:03
по той причине что мы уже знаем тип01:18:05
этого элемента01:18:07
да и нам не нужно здесь дополнительную01:18:09
строчку делать безусловно здесь мы можем01:18:14
то есть когда мы пишем здесь супер дамы01:18:16
таким образом вызываем инициализацию01:18:18
этого конструктора для того чтобы01:18:20
появились все эти переменные да то есть01:18:22
это такой синтаксис учитывая что тип нам01:18:27
данном случае уже не нужен то тип я могу01:18:29
здесь удалить01:18:32
потратился с типом мы его обязательно01:18:34
удалим но не сегодня сейчас значит пока01:18:38
что мы оставляем его фиксированным01:18:39
потому что мы знаем за что отвечает этот01:18:41
класс и дальше сюда передаем в рио и01:18:45
об шанс то же самое нам нужно сделать и01:18:50
для остальных четырех блоков то есть01:18:52
дальше у нас идут кто идет и мяч потом01:18:56
колонн и01:18:57
текст создаем соответственно01:19:02
и мяч блок дальше там передаем димыч01:19:05
потому мы создаем колонн01:19:09
клаус и да есть мы создаем текст блог01:19:14
где указываем значение текст что нам это01:19:17
дало01:19:18
теперь кстати класс блок можем не01:19:20
экспортировать он будет здесь локальным01:19:22
да и вообще допустим если сильно нужно01:19:24
на эти классы можно перенести в01:19:26
отдельные файлы но тут у нас не будет01:19:28
очень много кода и поэтому я решил01:19:31
оставить их все в одном файле теперь мы01:19:35
импортируем все эти классы текст блок01:19:37
тайтл бог колумб блок и матч блок и01:19:42
смотри здесь мы пишем здесь нам нужно01:19:44
про ниц и лидировать тайтл блок поэтому01:19:46
теперь опишу01:19:47
close to the block убираю эту тайну01:19:50
потому что он у нас теперь автоматически01:19:53
добавляется в самом классе и все теперь01:19:55
мы просто описываем его необходимые01:19:57
свойства есть то же самое image image01:20:03
блог удаляем строчку и мяч дальше колонн01:20:10
с блок удаляем строчку каллум и текст01:20:18
блок до соответственно с модулями .01:20:21
текст теперь наши модели к она выглядит01:20:25
более красивый01:20:27
да по той причине что мы не описывались01:20:29
какие-то дополнительные поля ставит все01:20:32
еще работает и это потрясающе и теперь01:20:37
на самом деле вот то что мы сейчас01:20:39
удалили вот эти вот типы это не самоцель01:20:42
бой это лишь маленькое побочное значение01:20:44
было на самом деле теперь за счет того01:20:46
что у нас есть для каждого типа блоков01:20:48
отдельный класс01:20:50
мы можем прямо внутри этого класса01:20:52
определить шаблон и полностью избавиться01:20:55
от file template01:20:56
как это сделать значит переходим блоки01:21:00
допустим начнем с это эту блока для01:21:04
начала в родительском классе блок я01:21:07
реализую01:21:08
один метод который назову например ту из01:21:09
темы называть его можно как угодно и по01:21:13
умолчанию он будет мне выкидывать ошибку01:21:17
full new era01:21:19
где я напишу метод ту html должен быть01:21:26
реализован то есть если в каком-то01:21:32
классе я не определение тату и чтим01:21:35
альта у меня будет здесь ошибка да если01:21:37
я вызову01:21:38
это делается для того чтобы в каждом01:21:40
классе я реализовал этот метод теперь01:21:45
собственно говоря я пишу что допустим в01:21:48
tightly боги я хочу реализовать метод01:21:50
the html и именно этот метод будет01:21:54
приводить мне вот этот блок к html здесь01:21:59
я должен формировать его шаблон каким01:22:02
образом вот таким вот образом то есть я01:22:03
беру копирую все что находится в этой01:22:05
функция перехожу в блоке и вставляю сюда01:22:09
значит по умолчанию в шторм не01:22:12
автоматически импортировал все эти01:22:14
утилиты01:22:15
вот если они не импортировались обратите01:22:17
внимание чтобы вот такой импорт был01:22:19
прописан и здесь у нас есть другая01:22:22
проблема в том плане что у нас нет01:22:24
параметр блок здесь01:22:25
но вот это вот об шанс на самом деле01:22:29
теперь хранится вы ключевом слове из за01:22:31
счет того что мы наследуем всего блока и01:22:35
вылью в том числе то есть мы просто01:22:38
меняем с блок на dice и все это все что01:22:40
нужно сделать теперь соответственно01:22:42
датой то блок мы реализовали метод то01:22:44
есть м и допустим теперь можешь01:22:47
поставить на паузу и попробовать01:22:48
самостоятельно сделать то же самое для и01:22:50
матч блока да и для остальных блоков01:22:53
надеюсь что поставил на паузу потому что01:22:55
я теперь хочу сам написать все это01:22:58
реализовать то есть для имиджа01:22:59
у меня это будет выглядеть таким образом01:23:08
здесь мы меняем бог на виз01:23:13
так дальше у нас идет к луны блок точки01:23:18
мы копируем каллум за таким вот образом01:23:25
меняем блок на выс так ну и собственно01:23:30
говоря текст бог туч тем l это тут все01:23:38
копирую и вставляю сюда здесь меня опять01:23:41
же на бис01:23:44
ok давайте старой 1-я закомментирую01:23:49
здесь в точь темы01:23:50
потому что сейчас мы будем с ним01:23:52
работать значит что вообще нам это дало01:23:55
в принципе дало нам это следующее что в01:23:58
файле индус . джесс мы до этого01:24:04
получали шаблоны из отдельного объекта01:24:09
template теперь он нам вообще не нужен по той01:24:12
причине что но это к это закомментируем здесь01:24:17
допустим сразу напишу фолз чтобы он01:24:19
автоматически не заходил в данный блок и01:24:21
давай посмотрим на то что у нас такое01:24:24
блок теперь темплейт ему удалили смотрим01:24:29
на самом деле блок теперь является одним01:24:32
из инстансов данного класса например той01:24:34
the block01:24:35
вот у него есть все необходимые01:24:36
параметры до которые мы указывали и01:24:39
также у него01:24:40
если мы раскроем прототип есть метод01:24:43
тушь темы01:24:44
то есть у этого объекта ровно как и у01:24:47
других объектов присутствует метод учтем01:24:49
или кроме текстового блока потому что01:24:51
здесь то есть тема лежит в прототипе01:24:54
прототипы да он как бы идет от базового01:24:58
теперь например я могу написать01:25:01
у этого объекта раз у него есть method01:25:03
to each темы вот таким вот образом tube01:25:05
и чтим и давай посмотрим что получится01:25:10
а получаем мы во-первых ошибку сейчас мы01:25:13
до нее доберемся но мы получаем здесь01:25:15
вот которые уже html а потому что теперь01:25:18
определение шаблона хранится в01:25:20
соответствующем месте это означает что01:25:23
теперь вот это все нам больше вообще не01:25:26
нужно удаляем и мы просто можем здесь01:25:32
написать блок дуешь темы очень красиво получается01:25:37
сохраним посмотрим все работает01:25:40
практически кроме одного места где вас01:25:44
ошибка ошибка вызывается потому что мы01:25:48
не реализовали для текстового блока01:25:54
метод темы и поэтому вызвал все вот это01:25:56
вот мета который выдал нам ошибку он01:25:58
говорит что метод нужно реализовывать01:26:00
обязательно моего реализовываем и вот и01:26:06
получается у нас текст теперь на самом01:26:09
деле это уже более крутой и01:26:11
профессиональный код по той причине что01:26:13
если вдруг нам потребуется добавить01:26:15
какой то допустим новый тип блоков01:26:17
скажем какойнибудь статы например 10001:26:20
вместо того чтобы добавлять в file01:26:23
template какой-то новый функцию да это01:26:26
как то там с типами возиться01:26:28
мы просто берем создаем новый класс по01:26:31
аналогии01:26:32
наследуем всего от блока и все i01:26:35
realized the html туда дописываем01:26:37
какие-то необходимые вещи которые01:26:39
формируют этот шаблон01:26:40
то есть на самом деле теперь файл темп с01:26:42
можем взять и удалить01:26:44
он нам больше не нужен но это еще не все01:26:47
теперь нам не нужны и типы потому что01:26:49
они если посмотришь на нигде не используются01:26:51
поэтому мы удаляем везде type тоже это01:26:55
будет лишняя штука до соответственно01:26:58
нужно убрать его из базового класса плюс01:26:59
из конструктора01:27:08
проверяем что все работает да все01:27:11
работает то есть таким образом мы01:27:13
реализовали по сути генерацию сайта из01:27:16
модели да естественно это все можно01:27:18
усложнять но я думаю что здесь простор01:27:20
для фантазии будет большой теперь наша01:27:22
задача сводится к тому чтобы реализовать01:27:25
sidebar до который позволит нам01:27:27
конструировать вообще данный сайт и на01:27:31
самом деле я бы начал со следующего01:27:35
вообще с файла индекс .01:27:39
джесс потому что сейчас тут тоже такой01:27:42
код написан который как бы без01:27:46
абстракции да то есть мы просто получаем01:27:48
какой-то элемент или дальше в этот олень01:27:50
и оставляем шаблон что если мы возьмем и01:27:53
напишем какой-нибудь другой класс01:27:55
позволяющий нам создавать условно этот01:27:58
сайт то есть здесь мы немножечко01:28:01
прикоснемся к тому как в принципе01:28:02
работают фреймворке01:28:03
то есть чтобы это больше не было магии01:28:06
чтобы все было понятно были менее значит01:28:09
в классах я создаю новый файл которую01:28:12
называем например сайт . джесс и здесь я01:28:15
буду экспортировать класс который назову01:28:17
сайт который в конструкторе будет01:28:20
принимать себя параметр селектор зачем01:28:24
сейчас увидеть здесь я создаю переменную01:28:27
ты опять же доллар я заставлю по той01:28:30
причине что и объяснял до этого01:28:32
да то есть это просто у нас будет дом01:28:34
элемент и дальше я про инициализирую это01:28:39
поле через документ вырез selector и01:28:43
сюда я передам этот01:28:44
селектор01:28:47
теперь я получил здесь класс сайт чем01:28:50
вообще мне это нужно01:28:51
затем что теперь я могу импортировать01:28:52
этот класс значит я перехожу в классах и01:28:58
меня интересует files сайт класс01:29:00
называется сайт теперь вот эту вот01:29:03
переменную я могу создать через01:29:07
new site и сюда передайте селектор01:29:11
например у нас там он был по моему сайт01:29:14
называется до нужно проверить в html01:29:17
сайт что нам это дает потому что сейчас01:29:24
есть и посмотрим то это все нам сломала01:29:27
так как теперь сайта не просто дом01:29:29
элемент а теперь нам нужно убрать отсюда01:29:32
знак доллара на потому что теперь это у01:29:34
нас объект у которого есть01:29:36
краски этот дом элемент мы естественно01:29:39
можем так уж вручную вызывать циклу01:29:44
модели помещение html но круче было бы если бы01:29:49
мы могли например у этого объекта просто01:29:51
вызвать какой-нибудь метод сейчас я01:29:53
покажу например написать сайт рендер01:29:58
да это как раз таки вот как в реакции01:30:00
реализовано да и вообще в принципе01:30:01
рендер это процесс когда мы переносим01:30:03
системы или в сам дом сама дом дерево01:30:08
рендер и сюда например передать параметр01:30:11
модуль а вот этого всего чтобы не было01:30:15
то есть я хочу чтобы это выглядело таким01:30:17
образом благо теперь с помощью того что01:30:21
у нас есть здесь класс сделать это очень01:30:23
просто то есть мы берем и реализовываем01:30:25
метод рендер01:30:28
как параметр мы здесь получаем модель01:30:33
так ты тут модель импортном здесь не01:30:36
нужен и теперь нам нужно только01:30:38
поправить то здесь у нас должен быть01:30:40
теперь не сайт а вот этот элемент01:30:41
то есть место сайта мы пишем взыскал все01:30:47
то есть теперь мы по модели делаем01:30:49
итерацию и все работает сохраним01:30:52
проверим вот наш сайт только теперь уже01:30:54
за главный наш файл выглядит01:30:56
действительно красиво да когда здесь нет01:30:58
ни каких то01:30:59
определенных циклов мы в принципе01:31:02
объясняем на таком полу компьютер на01:31:05
человеческом языке что вообще здесь01:31:06
происходит теперь поговорим про sidebar01:31:10
с ним будет чуть сложнее тут мы01:31:12
поговорим про события но тем не менее01:31:14
это будет несложно я также создам01:31:17
отдельный класс для него sidebar01:31:19
я буду экспортировать класс sidebar в01:31:22
конструктор я буду принимать также01:31:24
селектор01:31:26
значит вы с будет у нас определяться как01:31:29
документ калерия01:31:31
селектор то есть01:31:37
был на самом деле является корневым01:31:39
элементом для данного блока в нашем01:31:43
случае это будет п ну да соответственно01:31:45
в яндекс джесс пока что мы можем создать01:31:47
допустим const сайт бар равно new01:31:54
sidebar и сюда мы можем передать01:31:56
необходимый селектор п ну да класс мы01:31:59
импортируем соответственно сюда пока вы01:32:02
просто его про инициализировали и теперь01:32:04
давай подумаем что нам вообще нужно от01:32:07
этого sidebar данный клацать по сути при01:32:10
инициализации он должен запомнить вот01:32:13
всю эту пустоту с помощью формы с01:32:15
помощью которой мы сможем создавать01:32:17
динамические какой-нибудь контент для01:32:19
нашего сайта то есть в первую очередь он01:32:22
должен задать шаблон всей этой формы01:32:28
самое простое что мы можем здесь сделать01:32:30
написать вы с.л.01:32:35
значит insert adjacent элемент допустим01:32:39
автор бегин а то есть я уже говорю про01:32:42
эти параметры и например пока что в01:32:44
качестве теста я могу здесь написать01:32:46
например h1 в общем-то тест да если мы посмотрим01:32:51
то вот мы получаем этот заголовок теперь01:32:55
как нам из этого сделать форму01:32:58
начали еще поговорим про более удобное01:33:00
использование таких вот вещей то есть мы01:33:03
шаблон здесь будем генерировать также и01:33:06
допустим я могу создать целый гетр в01:33:09
классе через такой синтаксис get01:33:12
дальше я назову метод начни get our01:33:16
template и он обязательно должен нам что-то01:33:21
вернуть то есть он должен вернуть ну01:33:23
например та же самый заголовок h1 будет01:33:29
template01:33:30
соответственно здесь теперь мы можем01:33:31
написать вaс обращаясь ко ын су класса01:33:35
template только01:33:37
учитывая что это гектор то мы здесь не01:33:41
пишем круглые скобочки да мы просто его01:33:43
получаем как переменную смотрим пока еще01:33:46
работает это шикарно вообще сразу же в01:33:52
конструкторе писать это на мой взгляд не01:33:54
очень удобно потому что мы еще будем01:33:56
делать некоторые подготовительные вещи01:33:58
поэтому я просто создам вспомогательный01:34:00
метод который будет называться и нет01:34:02
значит и01:34:04
в инет я возьму и перенесу вот эту вот01:34:07
инициализацию шаблона и как только я01:34:09
закончу с конструктором здесь я вызову01:34:11
метод init то есть это делается просто01:34:13
для того чтобы очень красиво можем01:34:17
посмотреть ничего не изменилось теперь01:34:19
что касается формы то есть мы теперь01:34:23
формируем шаблон нам нужно здесь01:34:25
формировать html структура для формы и01:34:30
для этого я заранее подготовил01:34:32
определенную структуру значит я ее01:34:34
оставлю таким вот образом это будет у01:34:37
нас функция блок она абсолютно идентично тому что мы01:34:42
делали до этого то есть тут вот какая01:34:44
идея эта функция блок принимается 501:34:46
некоторый тип и возвращает нам просто01:34:50
обычные системы01:34:51
корневой элемент это форма потому что01:34:53
нам потребуется формы дальше идет нас01:34:55
некоторый тип нам просто и вводим как01:34:57
строчку и дальше идут определенные01:35:00
классы bootstrap и то есть форм групп01:35:03
форм control и так далее то есть тут01:35:05
вообще нет ничего сложного и если ты01:35:07
внимательно посмотрим что здесь мы01:35:08
используем добавляя название в илью и01:35:11
ставился то есть помощью конструктора01:35:13
вот этого упрощенного которые я покажу в01:35:15
курсе мы сможем добавлять различные поля01:35:18
и добавить01:35:21
записывать в них белье и записывать них01:35:24
стиля01:35:25
теперь значит чтобы протестировать как01:35:29
это работает убираем этот шаблон01:35:31
допустим вызывая функцию блок с типом01:35:34
например текст мы же текст можем01:35:36
создавать01:35:37
если посмотрим то вот наша форма на если01:35:41
мы нажимаем то у нас перезагружается01:35:43
страница это пока нормально мы сейчас01:35:44
это поправил если мы хотим допустим01:35:48
здесь добавить два блока то мы можем это01:35:50
все объединить в массив здесь написать01:35:54
блок с типом например текст здесь будет01:35:58
у нас блок например с типом тайтл и это01:36:02
массив поэтому мы должны его соединить01:36:04
через функцию join пустой строчкой если01:36:08
посмотрим вот у нас теперь получается01:36:10
уже два элемента то есть на мой взгляд01:36:12
это очень удобно также я хочу перенести01:36:15
этот блок куда-нибудь в утилиты чтобы он01:36:21
лежал отдельно потому что все равно пьер01:36:22
фанкшн и поэтому она может так делать01:36:25
теперь мы импортируем 10 я нажимаю на01:36:29
маке это общий центр и01:36:32
enter на windows ты помоему alt-enter то01:36:35
есть помогать в меню которое позволяет01:36:36
автоматически импортировать подобные01:36:38
вещи какая проблема теперь у нас лежит01:36:42
такая что01:36:43
формы то есть но если я нажимаю на01:36:46
кнопку добавить то01:36:48
словаре не хотел нажимая добавить у нас01:36:51
перезагружается страница01:36:52
нам это не нужно потому что вы вообще то01:36:54
мы пишем динамичное приложение нам нужно01:36:57
отменить это поведение для этого я01:37:00
перехожу в редактор и как только мы01:37:04
делаем инициализацию и как только мы01:37:06
поместили шаблон в дом то дальше я могу01:37:13
обратиться к нашему элементу и добавить01:37:17
новые события то есть я добавляю одно01:37:19
только событие на весь блок с помощью01:37:23
метода это event леснер01:37:29
мет которое буду слушать называется01:37:31
сабмит и здесь сразу же я вместо01:37:37
писать кабак функцию какое-то я опишу01:37:41
эту функцию отдельно допустим в функция01:37:45
методе от блог или просто например это01:37:52
почему бы и нет пусть нас все будет с01:37:54
одним словом реализован метод от и он01:37:57
себя принимает01:37:58
event теперь если мы у этого ивента01:38:02
вызовем метод prevent дефолт таким01:38:06
образом то давай посмотрим что01:38:08
получилось то есть я выбираю эти каре01:38:10
параметры нажимаю добавить теперь01:38:14
страница не обновляется по той причине01:38:16
что мы отменили дефолтное поведение нас01:38:18
от мити и и теперь мы можем выполнять01:38:21
свой какой-то код01:38:22
наша задача сейчас сводится к тому чтобы01:38:24
забрать вот эти вот значения которые я01:38:26
вписываю в форму и на самом деле сделать01:38:29
это очень просто потому что у нас есть01:38:31
доступ уже к ивенту на соответственно мы01:38:34
можем получить переменную type например01:38:37
через01:38:38
event таргет и внт таргет в данном01:38:42
случае это и есть сама форма мы можем на01:38:45
это посмотреть в консоли значит дети-то01:38:49
вписывая нажимаю добавить01:38:51
да и вот эта форма то есть иван таргет01:38:54
это и есть то с чем мы работаем как01:38:57
следствие мы можем допустим type01:38:59
получить из поля name01:39:01
сейчас посмотрю только на всякий случай01:39:04
в утилитах на то есть вот у формы есть01:39:06
атрибут name поэтому мы его можем01:39:08
получить01:39:09
далее чтобы получить значение в илью то01:39:11
нам нужно обратиться к01:39:15
const01:39:16
в или обратиться к event таргет в илью и01:39:21
здесь мы указываем значение в элиту01:39:24
небольшой дубликат получился но только01:39:26
из-за схожести названий01:39:27
потому что в илью в данном случае можно01:39:32
так посмотреть01:39:34
это название control и то есть мы его01:39:38
собираем до чтобы нам получить здесь01:39:40
стайлз соответственно мы здесь и говорим01:39:44
белье01:39:46
стайлз вылью то есть вылью это свойство01:39:50
которое как раз таки позволяет забрать01:39:52
эти данные в html структуре здесь для01:39:57
того чтобы быстренько сделать консоль во01:40:00
всех этих вещей мы можем не писать концу01:40:02
логия можем написать здесь дебаггер и01:40:06
обновив страницу01:40:08
перейдя в консоль я что-то пишу здесь01:40:12
нажимаю добавить мы попадаем в дебаггер01:40:16
здесь мы можем посмотреть какие значения01:40:19
вообще у нас хранятся сейчас в этих01:40:20
переменных то есть в той пиона странице01:40:22
текст это правильно потому что это текст01:40:24
в виде у нас хранится заканчивается на01:40:28
дабл ю д ю01:40:31
логично и ставишь вас тоже заканчивается01:40:35
на такую то есть мы правильно получили01:40:37
эти значения теперь собственно говоря01:40:38
если мы что-то пишем например здесь01:40:42
46 нажимаю добавить01:40:44
теперь той просто тайтл вылью это 123 не01:40:49
ставился до 56 то есть все корректно01:40:51
работает теперь нам нужно понять как это01:40:53
динамически добавить в нашу модель для01:40:56
того чтобы она от рисовала нам все это01:40:58
на сайте дебаггер нужно удалить здесь я01:41:03
сейчас пойду на сознательное упрощение01:41:05
по той причине что покажу суть как все01:41:10
это сделать и дальше я оставлю же на01:41:12
твое усмотрение что ты лучше в этом01:41:15
проекте как это сделаешь то есть мне01:41:18
сейчас нужно определить по типу сейчас я01:41:23
работаю всего лишь с двумя типами текст01:41:27
получается01:41:28
и тайтл собственно их 2 афиша01:41:31
потом предлагаете я просто улучшить это01:41:33
место чтобы она работала со всеми типами01:41:35
если тип равняется текста то тогда я01:41:39
создам отдельную переменную01:41:43
допустим new blog01:41:48
тогда новый блок у нас будет равняться01:41:51
new01:41:53
текст блок который нам нужно01:41:58
импортировать и соответствующего файла01:42:00
сюда первым параметром мы придаем в рио01:42:04
да то есть то что мы получили из формы и01:42:06
вторым параметра мы передаем набор01:42:08
absence в нашем случае есть мы указываем01:42:11
styles01:42:12
здесь мы должны указать таким образом но01:42:14
учитывая что ключ и значение совпадают01:42:16
то я могу написать вот так вот а иначе01:42:20
новый блок будет равняться например то01:42:25
это блок а потому что той будет01:42:28
равняться tight вы тоже импортируем и мы01:42:31
можем посмотреть в консоли на то что01:42:33
такое a new blog01:42:36
допустим есть напишу 123 здесь напишу01:42:39
color green нажимаю добавить и вот мы получаем текст01:42:44
блок то который готов уже к рендерингу01:42:46
на странице01:42:47
теперь значит тут ещё есть определенные01:42:50
нюансы01:42:51
очень важный которые стоит оговорить01:42:53
потому что вот мы получили этот новый01:42:55
блок как нам его передайте вообще к01:42:59
сайту чтобы сайт понял что вообще что-то01:43:02
обновилась и он правильно отранжировать01:43:05
3 мент в первую очередь я хочу во первых01:43:08
улучшить этот момент этот блок и потому01:43:11
что он не очень красивый сейчас мы можем01:43:13
написать через тернана и выражение01:43:15
по-другому01:43:16
то есть конский блок равно дальше мы01:43:18
спросим если type равняется текст тогда01:43:24
мы занесем сюда вот такое значение здесь01:43:27
можно вот так допустим вынести01:43:31
а иначе он будет у нас вот такого01:43:38
значения и теперь вот эти вот все01:43:39
некрасивые фы мы можем убрать это одно и01:43:42
то же вот мы это называется тернарного01:43:44
выражение когда мы начали прописываем01:43:46
условие а потом через ?01:43:48
и : пишем определенное значение которые01:43:51
падают в01:43:52
констант соответственно чтобы попасть к01:43:57
в сайт у нас уже все готово здесь то01:44:02
есть нам нужно просто здесь передать01:44:04
обновленную модель то есть мы переходим01:44:06
индекс джесс получается что нам нужно01:44:09
понять что как только что-то изменится в01:44:14
сайдбаре мы должны это что-то получить и01:44:18
изменить модель и для этого существует01:44:21
копейки то есть это так и напишу что я01:44:24
сюда передаю callback который будет01:44:26
принимать себе параметр блог или просто01:44:29
не и блок дальше как только это кодекс01:44:33
работает то я изменю модель то есть01:44:36
помощью метода push я положу этот новый01:44:39
блок в конец модели а дальше возьму и01:44:44
просто вызову сайт рендер01:44:47
вот таким вот образом здесь кстати вот01:44:49
sidebar нам не нужен01:44:52
ну и соответственно чтобы более понятно01:44:55
мне кажется бого я могу вынести этот01:44:56
кубок в отдельное место упустим назвать01:44:59
его апдейт кубик и сюда я передаю этот01:45:06
апдейт кабак но нам нужно его правильно01:45:11
обработать то есть мы переходим в01:45:12
sidebar и мы знаем что вторым параметром01:45:14
в конструктор мы принимаем некоторый01:45:16
апдейт побег его мы можем занести в01:45:23
какую нибуть переменную скажем в дэз01:45:26
апдейт то есть да просто сохранения01:45:29
функции теперь у нас есть сохраненная01:45:33
функция апдейт и мы можем ее вызвать в01:45:36
нужном месте то есть место концу и logo01:45:38
мы можем здесь написать из01:45:41
best road is a des апдейт если ты01:45:45
внимательный слушатель ты наверняка01:45:47
сейчас увидишь ошибку но я ее сейчас01:45:50
объясню как избежать попробуешь нибудь01:45:53
создать значит color green нажимаю01:45:56
добавить и мы здесь получаем ошибку01:45:59
ошибку которая говорит что do so bad is01:46:02
not of anger почему ведь вроде как мы01:46:06
корректно ее сохранили она присутствует01:46:08
здесь на самом деле если погибает01:46:12
немножечко поди божим чуть-чуть здесь01:46:17
пишем нажимаю добавить01:46:19
то есть вот у нас определяются все поля01:46:22
правильно дании блок определяются все01:46:24
круто но если мы посмотрим на тэс то это01:46:28
вообще не и сам класс то есть обед у01:46:30
него отсутствует почему здесь вопрос01:46:33
контекстом в java script и сейчас я не01:46:36
буду подробно на этом останавливаться01:46:37
потому что такая довольно таки большая01:46:39
тема про то как с этим контекстом01:46:41
грамотно взаимодействовать я очень01:46:43
подробно рассказывал в курсе сейчас я01:46:47
просто скажу что в java скит есть01:46:49
встроенные вещи которые позволяют этот01:46:52
контекст привязывать и мы можем это01:46:55
сделать с помощью то есть вот здесь01:46:57
когда мы передаем функцию id мы теряем01:46:59
контекст мы можем его привязать помощью01:47:01
метода боинг в dice и это нам очень01:47:05
сильно поможет на самом деле это поможет01:47:07
вообще реализовать данную проблему01:47:09
теперь что-нибудь пишем колдер green01:47:12
пусть будет нажимаю добавить во первых01:47:15
не чистится форма но мы видим как только01:47:19
что у нас появился еще один сайт то есть01:47:21
если я сейчас еще раз продемонстрировать01:47:23
добавить об еще один сайт появился и так01:47:27
далее это почти то что мы хотели инфа не01:47:31
совсем во первых нужно чистить форумы и01:47:34
форму чистить01:47:36
очень просто потому что мы берем и01:47:38
говорим после того как мы сделали там01:47:41
дают что она равняется пустой строке01:47:42
ровно как и control со стилями то есть01:47:46
мы просто присваиваем сюда пустую01:47:48
строчку теперь как сделать так чтобы при01:47:50
рендере сайт не дублировала старый сайта01:47:54
все заново мы каждый раз вызываем рендер01:47:56
но не чистим шаблон то есть мы можем01:47:59
написать здесь просто перед тем как01:48:01
рендерить модель в лнр и чтим и равно01:48:06
пустая строка и это нам сильно бы тоже01:48:08
поможет то есть и теперь если мы01:48:09
посмотрим да пусть я что-то пишу пусть01:48:13
будет текст оnline центр color red01:48:16
нажимаю добавить вот у нас добавился01:48:21
какой-то элемент немного со стилями здесь ошибка потому01:48:26
что он их каким-то образом раз партию01:48:32
сейчас сказать я вот не знаю да почему01:48:35
так произошло поэтому давай вместе01:48:36
посмотрим во первых то есть вместе будем01:48:40
де бо жить до как это происходит у всех01:48:42
программистов на самом деле то есть нам01:48:46
нужно понять что у нас находится в01:48:47
объекте стайлз в апреле в объекте ставим01:48:52
сна точно находится строка01:48:53
до которую мы передаем из формы то есть01:48:55
идем дальше по кроличьей норе и смотрим01:48:59
значит01:49:00
допустим мы текст бог да реализовывали01:49:02
поэтому переходим в классах blogs01:49:05
не смотрим что у нас сделать текст блог01:49:09
мы берём и в функцию css оборачиваем01:49:13
ждет стиля01:49:14
да мы можем посмотреть то что эта штука01:49:16
возвращает нам будет пока01:49:19
переменная temp01:49:25
и давай посмотрим на то что такое у нас01:49:27
темп чтобы посмотрите что нам возвращает01:49:32
эта вся конструкция значит что-то01:49:35
без вы нажимаю добавить ничего не01:49:38
получилось плане стилистике но при этом01:49:41
мы видим что вот что на самом деле там01:49:43
происходит почему потому что мы сюда01:49:47
передаем строчку в момент css да вот эта01:49:51
строчка а он сразу же начинает с ним01:49:54
взаимодействие как с объектом и это для01:49:58
нас небольшая проблема но на самом деле01:49:59
не сильно потому что мы можем все01:50:01
вернуть как было и в методе css просто01:50:05
спросить то есть его задача приводить01:50:07
объекты к формату строки в стилях но01:50:10
можно спросить что а если01:50:12
стиле который мы сюда передаем уже01:50:14
являются строкой для этого есть оператор01:50:16
type of то есть если type of styles01:50:20
равно string that тогда мы просто можем01:50:22
сделать01:50:23
ричер стайлз и этот код выполняться не01:50:27
будет сохраним вот наш текст01:50:31
нажимаю добавить форма чистится и вот01:50:34
текст который мы получаем в конце01:50:37
добавим кто-нибудь тайтл01:50:39
но я думаю что идея же ясно что все это01:50:41
работает соответственно таким образом01:50:44
можно сейчас поиграться с этим сайтом по01:50:46
создавать что-то сделать более01:50:48
универсальную форму мы же пойдем дальше01:50:50
то есть последнее что я сделаю с точки01:50:53
зрения кода это посмотрю на файл индекс01:50:55
. джесс и здесь не то чтобы есть01:50:59
какая-то проблема но тоже не очень01:51:01
понятно что происходит входная . в01:51:04
приложении она должна быть минимальная01:51:06
то есть она явно должна говорить что01:51:08
вообще происходит поэтому я предлагаю01:51:10
добавить еще одну абстракцию которая01:51:12
позволит нам все это дело объединить01:51:15
значит здесь я создам новый файл который01:51:17
назову об .01:51:19
джесс это у нас будет close-up01:51:24
в конструктор мы будем принимать модель01:51:26
и заносите и в ключевое слово дэс в эту01:51:32
модель и здесь я реализуем метод init01:51:35
который буду вызывать самостоятельно ну01:51:39
просто потому что могу могу и01:51:41
автоматически вызывается в конструкторе01:51:43
но в этом инете я напишу весь этот01:51:46
функционал который служит мне для работы01:51:49
приложения то есть здесь единственное01:51:53
что мы не будем импортировать модель мы01:51:55
будем работать с этой моделью то здесь01:51:57
мы везде пишем ты с модом01:52:02
моду и все остальное все остается как01:52:08
есть то есть мы создаем здесь сайт мы01:52:10
создаем добавляем рендер01:52:13
определяем функцию которая следит за01:52:16
обновлением мы в принципе все то есть01:52:19
теперь для того чтобы а три factory01:52:21
наш индекс . джесс мы можем написать01:52:24
просто new об и сюда мы передаем модель01:52:29
и учитывая что данная штука нам вернет01:52:33
объект у которого есть метод init01:52:36
позволяющий то есть скажу да есть я01:52:38
просто оставлю таком виде то у нас01:52:40
ничего нет но если я здесь напишу01:52:43
и нет то появляется наш сайт либо в01:52:47
таком формате либо этот и нет можно01:52:50
вызывать автоматически здесь в01:52:51
конструкторе из01:52:53
имеет на и теперь он сайт работает тут01:52:56
уже как удобнее будет ну мне почему-то01:52:59
понравилось вот такая запись01:53:01
поэтому я буду вызывать его в ручную ok01:53:06
и на самом деле мы только что создали01:53:09
целиком это приложение то есть на самом01:53:12
деле как видишь здесь нет ничего01:53:13
сложного и при этом все довольно таки01:53:15
логично то есть мы поэтапно решать эти01:53:17
задачи и создали неплохой такой01:53:20
функционал поговорили про solid01:53:22
и теперь настало время поговорить про01:53:25
сборку этого проекта а конкретно про то01:53:28
как залить этот проект на удаленный01:53:30
хостинг посему я остановлю процесс сбу01:53:35
кен и01:53:39
для того чтобы залить проект мы будем01:53:41
использовать бесплатный сервис от угла01:53:43
который называется firebase для того01:53:46
чтобы начать им пользоваться перейдем в01:53:49
браузер и здесь я перейду на сайт01:53:51
firebase просто пропишу его в гугле01:53:55
перехожу по первой ссылке здесь01:53:58
естественно для того чтобы пользоваться01:54:00
этим сервисом необходимо чтобы был01:54:02
аккаунт ого гугле у меня конечно есть01:54:04
потому что здесь есть моя аватарка и01:54:07
дальше я перехожу к консоли у меня тут01:54:12
уже есть определенные проекты которые я01:54:15
сделал но я добавлю новый проект скорее01:54:17
всего у тебя просто будет этот шаг01:54:19
добавить новый проект01:54:21
и здесь нам нужно придумать название01:54:23
этого проекта допустим джесс или jalas01:54:31
рипд counter01:54:35
ну например или конструктор 201:54:41
я хотел чтобы название было без01:54:44
дополнительного кэша вот первый01:54:45
конструктор у меня уже был тем не менее01:54:48
здесь можно писать любое название и01:54:51
нажимаем продолжить мы пока создаем01:54:53
проект нужно ли аналитика01:54:57
решать тебе я не люблю включать поэтому01:55:00
просто создаю проект не буду добавлять01:55:03
свои данные в google их и так много у01:55:07
него любом случае мы сейчас ждем пока01:55:11
про инициализируется наш проект потому01:55:14
что на самом деле в firebase01:55:15
присутствует большое количество полезных01:55:17
вещей то здесь мы допустим можем01:55:19
бесплатно содержать облачную базу данных01:55:22
например для нашего проекта делать01:55:24
авторизацию есть различные главные01:55:28
функции то есть очень много чего крутого01:55:29
даже машин learning есть и синхронизация01:55:32
то там со ios и android сервис реально01:55:35
крутой и сейчас мы будем использовать у01:55:38
него хостинг да то есть мы можем перейти в01:55:40
поле хостинг то он будет у нас01:55:43
бесплатный для проекта нажимаем начать01:55:47
и01:55:49
здесь нам нужно выполнить следующие шаги01:55:51
то есть например для начала нам01:55:53
необходимо установить глобальную такой01:55:55
инструмент который называется firebase01:55:57
туз копируем эту строчку то есть здесь01:56:00
мы также работаем с объемом истина01:56:05
windows то просто пишешь эмпиемы стол01:56:07
минус g fireboy стук если ты например на маке то01:56:10
лучше написать через суду потому что01:56:13
добавляет право01:56:14
чтобы в глобальную область видимости01:56:18
установить данный пакет знать и ждем01:56:27
пока он остановится пока можем01:56:29
посмотреть что нам делать дальше то есть01:56:32
как только все это установится нажимаем01:56:33
далее и после этого нам необходимо будет01:56:37
войти в аккаунт google с помощью команды01:56:41
firebase логин здесь восстановилась с01:56:47
помощью команды clear я очищу консоль01:56:49
значит и здесь я пишу теперь команду01:56:54
firebase плагин он на спрашивает01:57:00
разрешить или fair базу01:57:02
коллекционировать какие то данные о чем01:57:04
не хотим чтобы он ничего01:57:06
коллекционировал01:57:07
значит здесь я перехожу на свой аккаунт01:57:12
логин был успешно произведен чего-то не01:57:15
делать дальше дальше нужно написать01:57:17
firebase и нет значит перед тем как01:57:24
писать firebase и нет я предлагаю01:57:25
почистить все вот эти вот01:57:29
системные папки диск и кэш и перед тем01:57:34
как опять же инициализировать проекта01:57:35
firebase01:57:36
я напишу npn ран билд для того чтобы01:57:42
сбить весь этот проект потому что это01:57:44
нам нужно будет теперь мы получаем папку01:57:47
dist и кажется я же но нас интересует то01:57:50
что вот все наше приложение хранится01:57:53
теперь в 10 соответственно теперь мы01:57:56
можем написать firebase и нет01:58:02
значит здесь мы с 3 очками выбираем что01:58:04
нам нужно нам нужен только хостинг я01:58:06
ставлю пробел и теперь нажимаю enter01:58:12
здесь он нам предлагает выбрать какой-то01:58:15
проект я хочу выбрать уже существующий01:58:18
проект и проект называется java script01:58:24
конструктор 201:58:25
нажимаю enter ну то есть вот проект те01:58:28
мы хотим в общем то куда я все это за01:58:30
деплоить01:58:31
теперь он на спрашивает вы хотите в01:58:37
качестве публичной директории01:58:38
использовать в общем он спрашивать какую01:58:43
публичным территорию мы хотим по01:58:44
умолчанию это территория public нас она01:58:47
называется dist поэтому я пишу01:58:49
dist дальше он спрашивает01:58:53
сконфигурировать ли наше приложение как01:58:56
сингл пейдж applications на самом деле01:58:59
просто все правила будут переписаны на01:59:00
корневой адрес index.htm и вообще нам01:59:03
это нужно поэтому здесь и пишу с дальше01:59:06
он спрашивает что файл диск слаженных01:59:09
сочти вы уже существует перезаписать01:59:11
всего нет не нужно его перезаписывать мы01:59:14
сами его создаем все настройка готово у01:59:19
нас появляются различные файлы по типа01:59:21
firebase версии где есть вот эти вот01:59:23
значение firebase джейсон и теперь в01:59:28
общем то чтобы нам все это дело залить01:59:30
мы пишем firebase deploy открыть консоль01:59:36
впишу01:59:38
firebase диплом01:59:48
больше нам ничего делать не нужен то01:59:50
есть fireboy сам определит куда ему все01:59:52
это заливать как это все01:59:54
развернуть раскрыть и факт в том что01:59:56
теперь мы получаем вот такой красивый02:00:00
адрес java script инструктор 2 веб .02:00:03
об нажимая на него и попадая вот на этот02:00:06
конструктор который должен полностью02:00:08
быть рабочим тут есть и картинки и все02:00:10
те значения чтобы по привычке то у меня02:00:13
просто масштаб стоял вот как это у меня02:00:15
выглядела до соответственно вот как02:00:17
выглядит на обычно масштабе02:00:20
соответственно теперь в поле хостинг у02:00:23
нас есть два домена они почему разные02:00:26
которые мы можем использовать для этого02:00:28
приложения то есть на самом деле мы с02:00:31
нуля создали вот этот конструктор теперь02:00:34
у нас доступен на удаленном сервере02:00:35
случае если мы допустим захотим что-то02:00:39
поменять ну скажем что можем поменять02:00:43
например сделать этот текст02:00:49
зеленым это будет ужасно но что не02:00:52
сделаешь ради практике02:00:54
значит мы переходим в нашу модель и02:00:58
допустим ведь мы говорим что это у вас02:01:00
будет green как теперь нам это исправить02:01:03
на удаленную хостинге все очень просто02:01:05
мы делаем npn ран бьют заново by один02:01:08
проект потому что именно сбил жены и02:01:10
файлам и заливаем и firebase диплом02:01:25
вуаля зеленый цвет то есть это02:01:28
естественно так делать не нужно но я02:01:29
просто показал как это теперь обновлять02:01:31
что это все очень просто настроена у нас02:01:33
теперь и этим можно пользоваться на этом02:01:37
я хочу завершить потому что в вопросах02:01:41
данного курса мы очень много концертов02:01:43
каких разобрали мы создали с нуля целое02:01:45
приложение мы поговорили про solid и про02:01:47
apple про сборку проектов естественно02:01:50
сейчас это все было в таком очень02:01:51
базовом приближение очень простые02:01:54
конструкции мы использовали мы делали02:01:56
упрощения с точки зрения настройки нго и02:01:58
роман то мы сделали некоторые упрощения02:02:00
например при передаче кбк потому что в02:02:03
идеале там нужно работать не через02:02:05
callback а например создавать такую02:02:07
концепцию как event emitter который02:02:09
будет передавать различные свойства02:02:11
можно делать намного более сложной02:02:14
структуры классов которые будут02:02:15
позволять нам автоматически работать с02:02:17
событиями и так далее то есть на самом02:02:19
деле мы затронули только лишь базу да но02:02:22
при этом я показал что с помощью java02:02:25
script можно создавать на только02:02:26
какие-то простые скрипте кеа можно02:02:27
создавать02:02:28
даже без фреймворков целые приложения то02:02:31
есть вот эту приложение ст и покажет02:02:32
допустим на женскую позицию скажем в02:02:36
качестве портфолио это уже будет очень02:02:38
круто потому что ну ты сам создал02:02:40
динамический сайт более подробно02:02:44
естественная про все эти вещи02:02:46
рассказывал в большом курсе по java02:02:48
script где мы с нуля создаем целый excel02:02:51
то есть сдаем там целый фреймворк и02:02:54
используем уже продвинутый lp мы02:02:56
используем различные принципы различные02:02:59
паттерны и так далее то есть это такой02:03:02
проект на минималках по сравнению с тем02:03:04
что там будет просто мы также еще02:03:06
реализовываем различные дата стороны02:03:07
типа редакции так далее то есть все то02:03:09
что используется сейчас в современном02:03:11
вебе для того чтобы это можно было02:03:12
понять02:03:13
этим же курсом я хотел показать что на02:03:15
самом деле действительно на практике вот02:03:18
так вот когда ты пишешь код ты02:03:20
действительно лучше запоминаешь и02:03:22
начинаешь понимать как те или иные вещи02:03:25
использовать и как вот практикуясь02:03:28
научиться решать задачи то есть ты в02:03:31
процессе берешь или там что-то не02:03:32
работает начинаешь разбираться почему02:03:33
это не работает02:03:37
поэтому благодарю тебя за внимание02:03:39
мне было очень интересно разрабатывать02:03:41
данное приложение вообще очень люблю02:03:43
что-то разрабатывать с нуля надеюсь тебе02:03:45
тоже ну а мы с тобой увидимся дальше02:03:47
счастливаОписание:
Исходный код тут: https://t.me/js_by_vladilen/329 Получить профессию Frontend разработчика - https://result.school/products/junior-js Подробнее узнать об обучении в Result School - https://t.me/result_jfd Бесплатный курс HTML & CSS - https://result.school/products/html-css Сделать 5 проектов на JavaScript - https://result.school/products/marathon-js Я в соц сетях: Telegram: https://t.me/js_by_vladilen VK: https://vk.com/vladilen.minin Instagram: https://www.facebook.com/unsupportedbrowser Мои паблики по JavaScript: Telegram: https://t.me/result_school_it VK: https://vk.com/result.school Instagram: https://www.facebook.com/unsupportedbrowser JavaScript cообщества: Discord: https://discord.com/invite/jscommunity Telegram: https://t.me/js_by_vladilen_chat Roadmap по каналу: https://vladilen.notion.site/Roadmap-YouTube-0b917095c1ec424e9574c2ede36efab9 Решил выложить в открытый доступ курс по созданию конструктора сайтов на чистом JavaScript за 2 часа. Что внутри курса? 🔹 Ты напишешь с нуля приложение, которое сможешь положить себе в портфолио. 🔹 C нуля настроим рабочее окружение. 🔹 Будет много практического применения ООП (ты наконец-то поймешь, зачем на самом деле нужны классы в JavaScript). 🔹 Разберем как принципы SOLID помогают писать расширяемый и поддерживаемый код. 🔹 Оптимизация работы приложения. 🔹 Деплой приложения на хостинг. 🔹 И куча дополнительных бонусов, которые ты найдешь в процессе прохождения курса. Исходный код тут: https://t.me/js_by_vladilen/329 Текстовые редакторы: WebStorm - https://www.jetbrains.com/ru-ru/webstorm/ VSCode - https://code.visualstudio.com/ Инструменты из курса: NodeJS - https://nodejs.org/en/ Parcel - https://parceljs.org/ Документация: https://developer.mozilla.org/ru/docs/Web/API/Element/insertAdjacentHTML
Готовим варианты загрузки
* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."
** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах
Вопросы о скачивании видео
Как можно скачать видео "Практика JavaScript с нуля за 2 часа. Сделаем целый сайт!"?
Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.
Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.
UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.
Какой формат видео "Практика JavaScript с нуля за 2 часа. Сделаем целый сайт!" выбрать?
Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.
Почему компьютер зависает при загрузке видео "Практика JavaScript с нуля за 2 часа. Сделаем целый сайт!"?
Полностью зависать браузер/компьютер не должен! Если это произошло, просьба сообщить об этом, указав ссылку на видео. Иногда видео нельзя скачать напрямую в подходящем формате, поэтому мы добавили возможность конвертации файла в нужный формат. В отдельных случаях этот процесс может активно использовать ресурсы компьютера.
Как скачать видео "Практика JavaScript с нуля за 2 часа. Сделаем целый сайт!" на телефон?
Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.
Как скачать аудиодорожку (музыку) в MP3 "Практика JavaScript с нуля за 2 часа. Сделаем целый сайт!"?
Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.
Как сохранить кадр из видео "Практика JavaScript с нуля за 2 часа. Сделаем целый сайт!"?
Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.
Сколько это всё стоит?
Нисколько. Наши сервисы абсолютно бесплатны для всех пользователей. Здесь нет PRO подписок, нет ограничений на количество или максимальную длину скачиваемого видео.