ВернутьсяГлавная IT, технологии Телеграм Канал Frontenders notes
Frontender's notes

Телеграм Канал " Frontender's notes "

@ frontendnoteschannel

IT, технологии

15 015   119   0   0   25.02.21
Оценить:
Статьи и ссылки на тему фронтенда
HTML, CSS, javaScript, NodeJS, soft skills.

Чаты:
CSS @css_ru
Frontend @frontend_ru
JS @javascript_ru
Вакансии JS @javascript_jobs

Условия рекламы:
https://teletype.in/@frontender/uuLb7RFh8

Контакты:
@g_abashkin
Открыть в Telegram
Поделиться в социальных сетях:
Последние записи канала @frontendnoteschannel:
​​⚠️ Это требуют от веб-разработчика при приёме на работу...🚀

- HTML
HTML — язык гипертекстовой разметки. Аббревиатура образовалась от первых букв английских слов HyperText Markup Languge. HTML применяется для разметки веб-страниц. Она нужна браузерам, которые преобразуют гипертекст и выводят на экран страницу в удобном для человека формате.
CSS — язык описания стилей. Аббревиатура образовалась из первых букв английских слов Cascading Style Sheets — каскадные таблицы стилей. CSS описывает внешний вид HTML-элементов. То есть разработчики с помощью каскадных таблиц стилей определяют, как должен выглядеть тот или иной элемент на странице.

- CSS
CSS — язык описания стилей. Аббревиатура образовалась из первых букв английских слов Cascading Style Sheets — каскадные таблицы стилей. CSS описывает внешний вид HTML-элементов. То есть разработчики с помощью каскадных таблиц стилей определяют, как должен выглядеть тот или иной элемент на странице.

- JavaScript и его фреймворки (смотря где как).
JavaScript — это лучший друг HTML и CSS. HTML задает разметку сайта, CSS отвечает за внешний вид, а JavaScript все это оживляет. С помощью кода на JavaScript программист определяет, как страница отреагирует на действия пользователя.
Сейчас JavaScript — единственный язык программирования для браузеров. Он работает под Windows, macOS, Linux и на мобильных платформах, то есть везде. Если не знаешь JavaScript, делать в программировании интерактивных сайтов нечего.

- WordPress
- простота использования
- бесплатное использование
- удобство и масштабируемость системы
- обширная документация
- большое сообщество поддержки
- постоянное обновление системы
- множество разнообразных плагинов и шаблонов
- разноплановость применения
- адаптивность под мобильные платформы
- дружелюбность к SEO
и множество других преимуществ


- Responsive Design

Что такое адаптивный веб-дизайн?

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

Практика состоит из сочетания гибких сеток и макетов, изображений и интеллектуального использования медиа-запросов CSS. Когда пользователь переключается со своего ноутбука на iPad, веб-сайт должен автоматически переключаться в соответствии с разрешением, размером изображения и возможностями написания сценариев. Возможно, также придется учитывать настройки на своих устройствах; например, если у них на iPad есть VPN для iOS, веб-сайт не должен блокировать доступ пользователя к странице. Другими словами, веб-сайт должен иметь технологию, позволяющую автоматически реагировать на предпочтения пользователя. Это устранит необходимость в разных этапах проектирования и разработки для каждого нового гаджета, представленного на рынке.
​​🤔Что такое WordPress и с чем его едят?!🧐

-WordPress — это система управления содержимым сайта (CMS) с открытым исходным кодом, распространяемая под лицензией GNU GPL версии 2. Написана на PHP, в качестве базы данных использует MySQL. Сфера применения — от блогов до достаточно сложных новостных ресурсов и даже интернет-магазинов. Встроенная система «тем» и «плагинов» вместе с удачной архитектурой позволяет конструировать практически любые проекты. WordPress обеспечивает комфортный и нетрудоемкий процесс разработки сайта.


- Преимущества
WordPress — это лучшая в мире платформа для блога или интернет-проекта, где ежедневно публикуются новости, статьи, фотографии, видеоролики и прочая информация (контент).
5 основных преимуществ:
Бесплатность. WordPress — это бесплатная система. Для новичка, который хочет создать свой блог или небольшой проект, это немаловажный аргумент и огромное преимущество.

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

Кроссплатформенность. WordPress устанавливается и используется непосредственно на вашем сайте (сервере). На компьютер не нужно ничего дополнительно устанавливать. Это значит, что вы можете управлять своим сайтом с любого компьютера из любой операционной системы. Единственное необходимое условие — это подключение к Интернету.

Встроенный редактор. Пользоваться редактором WordPress очень просто и легко в основном благодаря интуитивно понятному встроенному редактору. Форматирование текста, ссылки, вставка картинок и видео — все это делается в пару кликов.

Популярность. WordPress — самая популярная в мире система управления содержимым сайта. Согласно официальной статистике, доля рынка WordPress среди других конкурентов превышает 55%. Более 58 миллионов сайтов в мире работают на WordPress. Более 297 миллионов людей просматривают ежемесячно 2,5 миллиарда страниц на WordPress. Каждый 7-ой сайт в мире создан и работает на WordPress.
​​🤔Вы когда-нибудь задумывался, как рендерится и отображается HTML-страница.🧐

Есть 5 этапов рендеринга HTML-страницы.

👉🏻 Построение DOM
👉🏻Построение CSSOM
👉🏻 Построение дерева рендеринга
👉🏻 Макет
👉🏻 Отображение


1.Построение DOM
На этом этапе HTML преобразуется в текст DOM HTML, который читается как байты, которые проходят последовательность шагов.

2. Построение CSSOM
Разметка CSS преобразуется в объектную модель CSS путем выполнения той же последовательности шагов, что и DOM.

3. Построение дерева рендеринга
DOM и CSSOM объединяются, чтобы сформировать дерево рендеринга, которое содержит узлы, которые должны отображаться на странице ... Как ??
Из корня дерева DOM просматривается каждый видимый узел и применяется соответствующее правило CSSOM.
Наконец, он дает дереву рендеринга, содержащему большие блоки с контентом и стилем.

4. Этап макета
Фазу компоновки можно назвать фазой геометрии, на которой мы вычисляем геометрию узлов.
На этапе компоновки вычисляется точное положение узлов и их размер относительно порта просмотра браузера. Таким образом создается коробчатая модель, которая знает точное положение и размер каждого узла.

5. Этап отображения
Поскольку мы знаем доступные узлы, их стиль и их геометрию, теперь вся эта информация используется для визуализации узлов из дерева визуализации в фактические пиксели на экране. Этот процесс называется отабражением.
​​Где получить углубленные навыки JavaScript разработки? 10 марта на демо-занятии «Vue 3» Михаил Кузнецов познакомит вас с возможностями новой версии одного из самых популярных фронтенд фреймворков.
На открытом уроке:
- рассмотрим ключевые отличия в синтаксисе vue2 от vue3;
- разберем как работать с vue-router и VueX в новой версии фреймворка;
- cоздадим проект на Vue 3 с нуля с помощью Vue-cli.

Демо-урок — возможность познакомиться с онлайн-курсом «JavaScript Developer. Professional» и преподавателем. Пройдите вступительный тест, чтобы принять участие в занятии https://otus.pw/W7FW/
​​Создание кроссплатформенных приложений с помощью React Native.

React Native — это JS-фреймворк для создания нативно отображаемых iOS- и Android-приложений. В его основе лежит разработанная в Facebook JS-библиотека React, предназначенная для создания пользовательских интерфейсов. Но вместо браузеров она ориентирована на мобильные платформы. Иными словами, если вы веб-разработчик, то можете использовать React Native для написания чистых, быстрых мобильных приложений, не покидая комфорта привычного фреймворка и единой кодовой базы JavaScript.

Так что такое React Native?
Прежде чем углубляться в подробности разработки, давайте посмотрим, что собой представляет React Native, и немного разберёмся с его работой.

Это просто React
React — это JS-библиотека для создания пользовательских интерфейсов, обычно для веб-приложений. Она разработана в Facebook и распространяется под лицензией open source с 2013 года. React широко распространена, и в отличие от более крупных MVC-фреймворков решает относительно узкую задачу: рендеринг интерфейса.

Популярность React имеет ряд причин. Она компактна и имеет высокую производительность, особенно при работе с быстроменяющимися данными. Благодаря компонентной структуре, React поощряет к написанию модульного, переиспользуемого кода.

React Native — это та же React, но для мобильных платформ. У неё есть ряд отличий: вместо тега div используется компонент View, а вместо тэга imgImage. Процесс разработки остался тем же. Вам может пригодиться знание Objective-C или Java. Кроме того, в мобильной разработке есть свои подвохи (протестировал ли я на разных устройствах? Достаточно ли крупные объекты, чтобы на них комфортно нажимать?). Тем не менее, если вы работали с React, то React Native покажется вам практически такой же, столь же комфортной.

Он действительно нативный
Первое, что удивляет людей в React Native — он «действительно» нативный. Другие решения JavaScript-для-мобильных-платформ просто оборачивают ваш JS-код в хвалёное веб-представление. Они могут перереализовать какое-нибудь нативное поведение интерфейса, например, анимацию, но всё же это остаётся веб-приложение.

В React компонент описывает собственное отображение, а затем библиотека обрабатывает для вас рендеринг. Эти две функции разделены ясным уровнем абстракции. Если нужно отрисовать компоненты для веба, то React использует стандартные HTML-тэги. Благодаря тому же уровню абстракции — «мосту» — для рендеринга в iOS и Android React Native вызывает соответствующие API. В iOS компоненты отрисовываются в настоящие UI-виды, а в Android — в нативные виды.
📄Что такое прогрессивные веб-приложения🚀

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

Особенности прогрессивных веб-приложений
1. Работает офлайн
2. Возможность установки
3. Легко синхронизировать
4. Может отправлять push-уведомления.


Преимущества
1. Уменьшение времени загрузки после установки приложения.
2. Возможность обновлять только содержимое, которое изменилось, когда доступно обновление приложения.
3. Внешний вид, более интегрированный с иконками приложений-платформ.
4. Более заинтересованные пользователи и более высокие коэффициенты конверсии.

Итак, как сделать его устанавливаемым
Чтобы его можно было установить, в нем должны быть:
1. Веб-манифест
2. Зарегистрированный сервер
3. HTTPS
4. Значок
🖥️Основные понятия Flexbox🚀
CSS модуль раскладки Flexible Box, обычно называемый флексбокс или flexbox или просто flex (флекс), был разработан как модель одномерного-направленного макета и как один из методов распределения пространства между элементами в интерфейсе, с мощными возможностями выравнивания.
Когда мы описываем flexbox как одномерно-направленный, мы имеем в виду, что flexbox имеет дело с макетом в одной плоскости за раз – либо в виде строки, либо в виде столбца. Как альтернативу можно упомянуть двумерную модель CSS Grid Layout, которая управляет и столбцами и строками одновременно.
Уже завтра 25 февраля, мы начинаем отбор JUNIOR специалистов Front-end. Необходимы базовые знания HTML, CSS, JS и React.JS.

Всем участникам — много практики и разборов результатов выполнения заданий, финалистам — бонусы и скидки, победителю — бесплатная стажировка на платформе PRE.AX.
PRE.AX — цифровая платформа, работает по модели Talent-as-a-Service. Мы оказываем IT-услуги силами молодых специалистов, которые работают под наблюдением опытных наставников.

Что делать: зарегистрировать себя и друга тоже зарегистрировать — http://pre.ax/marathon-2021-02-25?utm_source=frontendersnotes&utm_medium=telegram&utm_campaign=marathon1
​​#основы_js

Редакторы кода для фронтенд-разработчиков.
Ни для кого не секрет, что большую часть своего рабочего времени программисты проводят в редакторах кода.
Есть два основных типа редакторов: IDE и «лёгкие» редакторы. Многие используют по одному инструменту каждого типа.

🖥️IDE

Термином IDE (Integrated Development Environment, «интегрированная среда разработки») называют мощные редакторы с множеством функций, которые работают в рамках целого проекта. Как видно из названия, это не просто редактор, а нечто большее.
IDE загружает проект (который может состоять из множества файлов), позволяет переключаться между файлами, предлагает автодополнение по коду всего проекта (а не только открытого файла), также она интегрирована с системой контроля версий (например, такой как git), средой для тестирования и другими инструментами на уровне всего проекта.
Если вы ещё не выбрали себе IDE, присмотритесь к этим:
1)Visual Studio Code (бесплатно).
2)WebStorm (платно).
Обе IDE – кроссплатформенные.

📄«Лёгкие» редакторы

«Лёгкие» редакторы менее мощные, чем IDE, но они отличаются скоростью, удобным интерфейсом и простотой.
В основном их используют для того, чтобы быстро открыть и отредактировать нужный файл.
Главное отличие между «лёгким» редактором и IDE состоит в том, что IDE работает на уровне целого проекта, поэтому она загружает больше данных при запуске, анализирует структуру проекта, если это необходимо, и так далее. Если вы работаете только с одним файлом, то гораздо быстрее открыть его в «лёгком» редакторе.
На практике «лёгкие» редакторы могут иметь множество плагинов, включая автодополнение и анализаторы синтаксиса на уровне директории, поэтому границы между IDE и «лёгкими» редакторами размыты.
Следующие варианты заслуживают вашего внимания:
1)Atom (кроссплатформенный, бесплатный).
2)Sublime Text (кроссплатформенный, условно-бесплатный).
3)Notepad++ (Windows, бесплатный).
4)Vim и 5)Emacs тоже хороши, если знать, как ими пользоваться.
​​#основы_js

💻Консоль разработчика.
Любой код написанный человеком и не только, является уязвимым для ошибок,
но по умолчанию в браузере ошибки не видны. То есть, если что-то пойдёт не так, мы не увидим, что именно сломалось, и не сможем это починить.

Для решения задач такого рода в браузер встроены так называемые «Инструменты разработки» (Developer tools или сокращённо — devtools).
Chrome и Firefox снискали любовь подавляющего большинства программистов во многом благодаря своим отменным инструментам разработчика. Остальные браузеры, хотя и оснащены подобными инструментами, но все же зачастую находятся в роли догоняющих и по качеству, и по количеству свойств и особенностей. В общем, почти у всех программистов есть свой «любимый» браузер. Другие используются только для отлова и исправления специфичных «браузерозависимых» ошибок.
Для начала знакомства с этими мощными инструментами давайте выясним, как их открывать, смотреть ошибки и запускать команды JavaScript.

Firefox, Edge и другие
Инструменты разработчика в большинстве браузеров открываются при нажатии на F12.
Их внешний вид и принципы работы мало чем отличаются. Разобравшись с инструментами в одном браузере, вы без труда сможете работать с ними и в другом.

Safari
Safari (браузер для Mac, не поддерживается в системах Windows/Linux) всё же имеет небольшое отличие. Для начала работы вам нужно включить «Меню разработки» («Developer menu»).
Откройте Настройки (Preferences) и перейдите к панели «Продвинутые» (Advanced). В самом низу вы найдёте чекбокс - Теперь консоль можно активировать нажатием клавиш Cmd+Opt+C. Также обратите внимание на новый элемент меню «Разработка» («Develop»). В нем содержится большое количество команд и настроек.

- Инструменты разработчика позволяют нам смотреть ошибки, выполнять команды, проверять значение переменных и ещё много всего полезного.

- В большинстве браузеров, работающих под Windows, инструменты разработчика можно открыть, нажав F12. В Chrome для Mac используйте комбинацию Cmd+Opt+J, Safari: Cmd+Opt+C (необходимо предварительное включение «Меню разработчика»).
This media is not supported in your browser
VIEW IN TELEGRAM
Фронтендер от бога — топ-канал о фронтенд-разработке. Если вы учите JS — подписывайтесь!

Что вас ждет:
— обучающие материалы (в том числе и уникальные) с удобной категоризацией;
— еженедельные дайджесты информации из мира фронтенд-разработки;
— профессиональный юмор;

Подписывайтесь на фронтендера от бога ⬇️
​​💡Про переменные в JavaScript.

Переменная
Переменная – это «именованное хранилище» для данных. Мы можем использовать переменные для хранения товаров, посетителей и других данных.
Для создания переменной в JavaScript используйте ключевое слово let.

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

Так как же правильно назвать переменные!?

***
Название переменной должно иметь ясный и понятный смысл, говорить о том, какие данные в ней хранятся.
***

Используйте легко читаемые имена, такие как userName или shoppingCart.

Избегайте использования аббревиатур или коротких имён, таких как a, b, c, за исключением тех случаев, когда вы точно знаете, что так нужно.

Делайте имена максимально описательными и лаконичными. Примеры плохих имён: data и value. Такие имена ничего не говорят. Их можно использовать только в том случае, если из контекста кода очевидно, какие данные хранит переменная.

Договоритесь с вашей командой об используемых терминах. Если посетитель сайта называется «user», тогда мы должны называть связанные с ним переменные currentUser или newUser, а не, к примеру, currentVisitor или newManInTown.
📄HTML Canvas.

Элемент HTML <canvas> используется для рисования графики на веб-странице.

Рисунок слева создан с помощью <canvas>. Он показывает четыре элемента: красный прямоугольник, градиентный прямоугольник, многоцветный прямоугольник и многоцветный текст.
Элемент HTML <canvas> используется для рисования графики «на лету» с помощью JavaScript.

Элемент <canvas> - это только контейнер для графики. Вы должны использовать JavaScript, чтобы рисовать графику.

🚀Ресурсы, где можно изучить тему Canvas.

💡https://www.w3schools.com/html/html5_canvas.asp

💡https://developer.mozilla.org/ru/docs/Web/API/Canvas_API/Tutorial

💡http://htmlbook.ru/html/canvas

💡https://habr.com/ru/post/111308/

💡https://www.youtube.com/watch?v=XYgcNVwHUdg

💡https://www.youtube.com/watch?v=KEQsm2yL6Lg
Образовательная среда HTML Academy запускает бесплатный марафон по вёрстке!
За три недели вы разберётесь в основах HTML и CSS, сверстаете макет и выложите его в интернет. Старт — 1 марта.

На время марафона вы получите доступ к интерактивным тренажёрам и всем необходимым теоретическим материалам. Чтобы принять участие, подпишитесь на канал марафона — https://t.me/joinchat/VqdkElJlpsg0ZDY6

Среди дошедших до конца разыграют бесплатное участие на курсе «HTML и CSS. Профессиональная вёрстка сайтов», а все участники получат скидки.
​​📄Про Полифилы

JavaScript – динамично развивающийся язык программирования. Регулярно появляются предложения о добавлении в JS новых возможностей, они анализируются, и, если предложения одобряются, то описания новых возможностей языка переносятся в черновик https://tc39.github.io/ecma262/, а затем публикуются в спецификации.
Разработчики JavaScript-движков сами решают, какие предложения реализовывать в первую очередь. Они могут заранее добавить в браузеры поддержку функций, которые всё ещё находятся в черновике, и отложить разработку функций, которые уже перенесены в спецификацию, потому что они менее интересны разработчикам или более сложные в реализации.
Таким образом, довольно часто реализуется только часть стандарта.
Можно проверить текущее состояние поддержки различных возможностей JavaScript на странице https://kangax.github.io/compat-table/es6/ .
📌Babel
Когда мы используем современные возможности JavaScript, некоторые движки могут не поддерживать их. Как было сказано выше, не везде реализованы все функции.
И тут приходит на помощь Babel.
Babel – это транспилер. Он переписывает современный JavaScript-код в предыдущий стандарт.
На самом деле, есть две части Babel:
Во-первых, транспилер, который переписывает код. Разработчик запускает Babel на своём компьютере. Он переписывает код в старый стандарт. И после этого код отправляется на сайт. Современные сборщики проектов, такие как webpack или brunch, предоставляют возможность запускать транспилер автоматически после каждого изменения кода, что позволяет экономить время.

📌Во-вторых, полифил.
Новые возможности языка могут включать встроенные функции и синтаксические конструкции. Транспилер переписывает код, преобразовывая новые синтаксические конструкции в старые. Но что касается новых встроенных функций, нам нужно их как-то реализовать. JavaScript является высокодинамичным языком, скрипты могут добавлять/изменять любые функции, чтобы они вели себя в соответствии с современным стандартом.
Термин «полифил» означает, что скрипт «заполняет» пробелы и добавляет современные функции.
Два интересных хранилища полифилов:
- core js поддерживает много функций, можно подключать только нужные.
- polyfill.io – сервис, который автоматически создаёт скрипт с полифилом в зависимости от необходимых функций и браузера пользователя.
​​🎯Функции-стрелки в JavaScript.🚀

Существует ещё более простой и краткий синтаксис для создания функций, который часто лучше, чем синтаксис Function Expression.
Он называется «функции-стрелки» или «стрелочные функции» (arrow functions), т.к. выглядит следующим образом:

let func = (arg1, arg2, ...argN) => expression

Такой код создаёт функцию func с аргументами arg1..argN и вычисляет expression с правой стороны с их использованием, возвращая результат.
Другими словами, это более короткий вариант такой записи:

let func = function(arg1, arg2, ...argN) {
return expression;
};

Давайте взглянем на конкретный пример:

let sum = (a, b) => a + b;
/* Более короткая форма для:
let sum = function(a, b) {
return a + b;
};
*/
alert( sum(1, 2) ); // 3

То есть, (a, b) => a + b задаёт функцию с двумя аргументами a и b, которая при запуске вычисляет выражение справа a + b и возвращает его результат.
Если у нас только один аргумент, то круглые скобки вокруг параметров можно опустить, сделав запись ещё короче:

let sayHi = () => alert("Hello!");
sayHi();

Функции-стрелки могут быть использованы так же, как и Function Expression.
Например, для динамического создания функции:

let age = prompt("Сколько Вам лет?", 18);

let welcome = (age < 18) ?
() => alert('Привет') :
() => alert("Здравствуйте!");

welcome(); // теперь всё в порядке
Поначалу функции-стрелки могут показаться необычными и трудночитаемыми, но это быстро пройдёт, как только глаза привыкнут к этим конструкциям.
Они очень удобны для простых однострочных действий, когда лень писать много букв.
// тоже что и
// let double = function(n) { return n * 2 }
let double = n => n * 2;

alert( double(3) ); // 6
Если нет аргументов, указываются пустые круглые скобки:
let sayHi = () => alert("Hello!");
sayHi();

Функции-стрелки могут быть использованы так же, как и Function Expression.
Например, для динамического создания функции:

let age = prompt("Сколько Вам лет?", 18);
let welcome = (age < 18) ?
() => alert('Привет') :
() => alert("Здравствуйте!");
welcome(); // теперь всё в порядке

Поначалу функции-стрелки могут показаться необычными и трудночитаемыми, но это быстро пройдёт, как только глаза привыкнут к этим конструкциям.
Они очень удобны для простых однострочных действий, когда лень писать много букв.
Команда Интеграционной платформы Synapse ищет крутого Java-разработчика.
Synapse — это первое решение уровня enterprise на базе технологии service mesh,
позволяющее Банку отказаться от вендоров и перейти на open-source технологии.

Наш стек: Java 8+, Spring, Docker, SQL, Kafka, командная разработка.
Заинтересовался? Пиши сюда: http://sber.me/?p=h99zr

Или пишите сюда: @lisa_liza
​​📖Ключевое слово «this» в методах🖥️

Как правило, методу объекта необходим доступ к информации, которая хранится в объекте, чтобы выполнить с ней какие-либо действия (в соответствии с назначением метода).
Например, коду внутри user.sayHi() может понадобиться имя пользователя, которое хранится в объекте user.

Для доступа к информации внутри объекта метод может использовать ключевое слово this.
Значение this – это объект «перед точкой»,
который использовался для вызова метода.
Например:

let user = {
name: "Джон",
age: 30,

sayHi() {
// this - это "текущий объект"
alert(this.name);
}

};

user.sayHi(); // Джон
Здесь во время выполнения кода
user.sayHi() значением this
будет являться user (ссылка на объект user).
Технически также возможно получить
доступ к объекту без ключевого слова this,
ссылаясь на него через внешнюю переменную (в которой хранится ссылка на этот объект):


let user = {
name: "Джон",
age: 30,

sayHi() {
alert(user.name); // используем переменную "user" вместо ключевого слова "this"
}

};

…Но такой код будет ненадёжным. Если мы решим скопировать ссылку на объект user в другую переменную, например, admin = user, и перезапишем переменную user чем-то другим, тогда будет осуществлён доступ к неправильному объекту при вызове метода из admin.
Это показано ниже:

let user = {
name: "Джон",
age: 30,

sayHi() {
alert( user.name ); // приведёт к ошибке
}

};


let admin = user;
user = null; // обнулим переменную для наглядности, теперь она не хранит ссылку на объект.

admin.sayHi(); // Ошибка! Внутри sayHi() используется user, которая больше не ссылается на объект!.

Если мы используем this.name
вместо user.name внутри alert,
тогда этот код будет работать.
​​📄Взаимодействие: alert, prompt, confirm В JavaScript.🖥️

Так как мы будем использовать браузер как демо-среду, нам нужно познакомиться с несколькими функциями его интерфейса, а именно: alert, prompt и confirm.
alert
С этой функцией мы уже знакомы. Она показывает сообщение и ждёт, пока пользователь нажмёт кнопку «ОК».
Например:
alert("Hello");

Это небольшое окно с сообщением называется модальным окном. Понятие модальное означает, что пользователь не может взаимодействовать с интерфейсом остальной части страницы, нажимать на другие кнопки и т.д. до тех пор, пока взаимодействует с окном. В данном случае – пока не будет нажата кнопка «OK».
prompt
Функция prompt принимает два аргумента:
result = prompt(title, [default]);

Этот код отобразит модальное окно с текстом, полем для ввода текста и кнопками OK/Отмена.
title
Текст для отображения в окне.
default
Необязательный второй параметр, который устанавливает начальное значение в поле для текста в окне.
Квадратные скобки в синтаксисе [...]
Квадратные скобки вокруг default в описанном выше синтаксисе означают, что параметр факультативный, необязательный.
Пользователь может напечатать что-либо в поле ввода и нажать OK. Введённый текст будет присвоен переменной result. Пользователь также может отменить ввод нажатием на кнопку «Отмена» или нажав на клавишу Esc. В этом случае значением result станет null.
Вызов prompt возвращает текст, указанный в поле для ввода, или null, если ввод отменён пользователем.
Например:
let age = prompt('Сколько тебе лет?', 100);
alert(`Тебе ${age} лет!`); // Тебе 100 лет!

Для IE: всегда устанавливайте значение по умолчанию
Второй параметр является необязательным, но если не указать его, то Internet Explorer вставит строку "undefined" в поле для ввода.
Запустите код в Internet Explorer и посмотрите на результат:
let test = prompt("Test");

Чтобы prompt хорошо выглядел в IE, рекомендуется всегда указывать второй параметр:
let test = prompt("Test", ''); // <-- для IE

confirm
Синтаксис:
result = confirm(question);

Функция confirm отображает модальное окно с текстом вопроса question и двумя кнопками: OK и Отмена.
Результат – true, если нажата кнопка OK. В других случаях – false.
Например:

let isBoss = confirm("Ты здесь главный?");
alert( isBoss ); // true, если нажата OK

Итого
Мы рассмотрели 3 функции браузера для взаимодействия с пользователем:

alert
показывает сообщение.

prompt
показывает сообщение и запрашивает ввод текста от пользователя. Возвращает напечатанный в поле ввода текст или null, если была нажата кнопка «Отмена» или Esc с клавиатуры.

confirm
показывает сообщение и ждёт, пока пользователь нажмёт OK или Отмена. Возвращает true, если нажата OK, и false, если нажата кнопка «Отмена» или Esc с клавиатуры.

📌Все эти методы являются модальными: останавливают выполнение скриптов и не позволяют пользователю взаимодействовать с остальной частью страницы до тех пор, пока окно не будет закрыто.
На все указанные методы распространяются два ограничения:
Расположение окон определяется браузером. Обычно окна находятся в центре.
Визуальное отображение окон зависит от браузера, и мы не можем изменить их вид.
Такова цена простоты. Есть другие способы показать более приятные глазу окна с богатой функциональностью для взаимодействия с пользователем, но если «навороты» не имеют значения, то данные методы работают отлично.
Построй карьеру в IT, научись делать сайты и зарабатывать в $$$? Стань Front-end разработчиком!

👨‍💻 Это программист, который создает интерфейсы приложений, веб-сервисов и сайтов. Ту часть сайта, которую видят пользователи. Сегодня это востребованная профессия, которая позволяет работать в ТОП-компаниях и получать высокую ЗП!

Это твой реальный шанс:
◾️работать из дома (удаленно или фриланс);
◾️больше зарабатывать;
◾️брать интересные проекты;
◾️перестать работать 24/7, самому составлять график.

🎁 Среди участников на вебинаре разыграем 3 бесплатных места для обучения.

Регистрируйся на бесплатный вебинар и на практике попробуй себя в веб-разработке.

Для регистрации жми на кнопку сразу под изображением 👇
Похожие каналы:

 
Telegram – наиболее востребованный, удобный, безопасный и многофункциональный мессенджер.
В нашем каталоге представлены самые актуальные каналы Telegram
 
Администрация сайта не несёт ответственности за содержание тех или иных ресурсов и в случае необходимости оставляет за собой право удаления каналов из каталога.