Условные операторы в JavaScript 🚀
Условные операторы - это операторы языка JavaScript, которые в зависимости от некоторого условия позволяют выполнить одно или несколько определённых инструкций.
Виды условных операторов в JavaScript:
условный оператор if (с одной ветвью);
условный оператор if...else (с двумя ветвями);
условный оператор else if... (с несколькими ветвями);
тернарный оператор (?:);
оператор выбора switch.
Условный оператор if(…) вычисляет условие в скобках и, если результат true, то выполняет блок кода. Таким образом, инструкция if (…) вычисляет выражение в скобках и преобразует результат к логическому типу.
Условие if выполняет инструкцию, если указанное условие истинно. Если условие не выполняется (ложно), то выполняется другая инструкция, следующая за оператором else.
Условный (тернарный) оператор — единственный оператор в JavaScript, принимающий три операнда. Он часто используется в качестве укороченного варианта условного оператора if. Условный оператор возвращает одно значение из двух данных в зависимости от логического значения условия:
(условие) ? (выражение1 если True) : (выражение2 если False)
Оператор switch предназначен для выполнения одного варианта инструкций из нескольких в зависимости от значения выражения. Выбор того или иного варианта определяется посредством строгого равенства результата выражения значению случая (case).
Примеры к каждому оператору можно посмотреть в моём посте в Instagram👇
Условные операторы - это операторы языка JavaScript, которые в зависимости от некоторого условия позволяют выполнить одно или несколько определённых инструкций.
Виды условных операторов в JavaScript:
условный оператор if (с одной ветвью);
условный оператор if...else (с двумя ветвями);
условный оператор else if... (с несколькими ветвями);
тернарный оператор (?:);
оператор выбора switch.
Условный оператор if(…) вычисляет условие в скобках и, если результат true, то выполняет блок кода. Таким образом, инструкция if (…) вычисляет выражение в скобках и преобразует результат к логическому типу.
Условие if выполняет инструкцию, если указанное условие истинно. Если условие не выполняется (ложно), то выполняется другая инструкция, следующая за оператором else.
Условный (тернарный) оператор — единственный оператор в JavaScript, принимающий три операнда. Он часто используется в качестве укороченного варианта условного оператора if. Условный оператор возвращает одно значение из двух данных в зависимости от логического значения условия:
(условие) ? (выражение1 если True) : (выражение2 если False)
Оператор switch предназначен для выполнения одного варианта инструкций из нескольких в зависимости от значения выражения. Выбор того или иного варианта определяется посредством строгого равенства результата выражения значению случая (case).
Примеры к каждому оператору можно посмотреть в моём посте в Instagram👇
👍2
Друзья, теперь это мой личный телеграмм канал с бесплатными материалами для обучения ❗️
В этом канале буду выкладывать материалы для изучению веб-разработки, готовый код для скачивания и т.д.
Всем успехов в обучении:)
В этом канале буду выкладывать материалы для изучению веб-разработки, готовый код для скачивания и т.д.
Всем успехов в обучении:)
🔥1
Игра - Тренировка реакции 🚀
По результатам опроса в Инстаграме решил выложить код данной игры. Игра написана на чистом JavaScript без использования сторонних библиотек.
В данной игре вы сами можете настраивать время, в течении которого хотите тренироваться. После нажатия на кнопку Начать вы будете видеть квадраты разной ширины и цвета, по которым нужно успеть щелкнуть. Тренировка закончится через указанный отрезок времени. Выводится результат — количества нажатий по квадратам.
По результатам опроса в Инстаграме решил выложить код данной игры. Игра написана на чистом JavaScript без использования сторонних библиотек.
В данной игре вы сами можете настраивать время, в течении которого хотите тренироваться. После нажатия на кнопку Начать вы будете видеть квадраты разной ширины и цвета, по которым нужно успеть щелкнуть. Тренировка закончится через указанный отрезок времени. Выводится результат — количества нажатий по квадратам.
👍1
Делаем анимацию при наведении на изображение 🚀
На своём ютуб канале рассказал, как можно очень легко создать анимацию для изображений без JS (только HTML и CSS). Делается такая анимация не дольше 5 минут, при этом эффект получается очень красивый.
Постарался объяснить каждую строчку максимально подробно, надеюсь вам понравится данный урок. Переходи по ссылке и смотри 🔥👇
На своём ютуб канале рассказал, как можно очень легко создать анимацию для изображений без JS (только HTML и CSS). Делается такая анимация не дольше 5 минут, при этом эффект получается очень красивый.
Постарался объяснить каждую строчку максимально подробно, надеюсь вам понравится данный урок. Переходи по ссылке и смотри 🔥👇
[React] Что такое JSX? 🚀
Рассмотрим это объявление переменной:
const element = <h1>Привет, мир!</h1>;
Этот странный тег — ни строка, ни фрагмент HTML.
Это JSX — расширение языка JavaScript. Его рекомендуется использовать, когда требуется объяснить React, как должен выглядеть UI. JSX напоминает язык шаблонов, наделённый силой JavaScript.
React принимает тот факт, что логика отрисовки по сути связана с другой логикой пользовательского интерфейса: как обрабатываются события, как изменяется состояние со временем и как данные подготовлены для отображения. Вместо искусственного разделения технологий, помещая разметку и логику в отдельные файлы, React разделяет ответственности со слабо связанными модулями, называемыми «компонентами», которые содержат вместе разметку и логику.
React не требует использование JSX, но большинство людей находят его полезным в качестве визуальной демонстрации при работе с пользовательским интерфейсом внутри кода JavaScript. Он также позволяет React показывать более полезные сообщения об ошибках и предупреждения.
Более подробно читай в посте в Instagram! Переходи по ссылке 🔥👇
Рассмотрим это объявление переменной:
const element = <h1>Привет, мир!</h1>;
Этот странный тег — ни строка, ни фрагмент HTML.
Это JSX — расширение языка JavaScript. Его рекомендуется использовать, когда требуется объяснить React, как должен выглядеть UI. JSX напоминает язык шаблонов, наделённый силой JavaScript.
React принимает тот факт, что логика отрисовки по сути связана с другой логикой пользовательского интерфейса: как обрабатываются события, как изменяется состояние со временем и как данные подготовлены для отображения. Вместо искусственного разделения технологий, помещая разметку и логику в отдельные файлы, React разделяет ответственности со слабо связанными модулями, называемыми «компонентами», которые содержат вместе разметку и логику.
React не требует использование JSX, но большинство людей находят его полезным в качестве визуальной демонстрации при работе с пользовательским интерфейсом внутри кода JavaScript. Он также позволяет React показывать более полезные сообщения об ошибках и предупреждения.
Более подробно читай в посте в Instagram! Переходи по ссылке 🔥👇
[React] Отрисовка элементов 🚀
Элементы — это самые маленькие строительные блоки приложений React.
Элемент описывает, что вы хотите видеть на экране. В отличие от DOM-элементов браузера, элементы React — обычные объекты, лёгкие для создания. React DOM берёт заботу по обновлению DOM на себя для соответствия элементам React. Элементы — это то, что из чего компоненты «сделаны»
React-элементы — неизменяемы. Создав однажды элемент, вы не сможете изменить его дочерние элементы или атрибуты. Элемент похож на один кадр в фильме: он представляет собой пользовательский интерфейс в определённый момент времени.
Единственный способ обновить интерфейс — создать новый элемент и передать его в ReactDOM.render().
React сравнивает элемент и его дочерние элементы с предыдущими и применяет только обновления, необходимые для преобразования DOM в желаемое состояние.
Элементы — это самые маленькие строительные блоки приложений React.
Элемент описывает, что вы хотите видеть на экране. В отличие от DOM-элементов браузера, элементы React — обычные объекты, лёгкие для создания. React DOM берёт заботу по обновлению DOM на себя для соответствия элементам React. Элементы — это то, что из чего компоненты «сделаны»
React-элементы — неизменяемы. Создав однажды элемент, вы не сможете изменить его дочерние элементы или атрибуты. Элемент похож на один кадр в фильме: он представляет собой пользовательский интерфейс в определённый момент времени.
Единственный способ обновить интерфейс — создать новый элемент и передать его в ReactDOM.render().
React сравнивает элемент и его дочерние элементы с предыдущими и применяет только обновления, необходимые для преобразования DOM в желаемое состояние.
Ответ 🚀
Функция func изменяет элементы, передаваемые в нее(увеличивает на 5). Однако мы не переопределяем элементы массива. Получается так, что функция просто возвращает элементы, увеличенные на 5, при этом ни как не изменяя основной массив.
Как вам задачка?
Функция func изменяет элементы, передаваемые в нее(увеличивает на 5). Однако мы не переопределяем элементы массива. Получается так, что функция просто возвращает элементы, увеличенные на 5, при этом ни как не изменяя основной массив.
Как вам задачка?
[React] Разделение кода 🚀
Всем привет! Это третий урок курса по ReactJS. Надеюсь вам всё нравится!) Сегодня поговорим про разделение кода в React 🚀
Большинство React-приложений «собирают» свои файлы такими инструментами, как Webpack, Rollup или Browserify. Сборка (или «бандлинг») — это процесс выявления импортированных файлов и объединения их в один «собранный» файл (часто называемый «bundle» или «бандл»). Этот бандл после подключения на веб-страницу загружает всё приложение за один раз.
Бандлинг — это хорошо, но по мере роста вашего приложения, ваш бандл тоже будет расти. Вам нужно следить за кодом, который вы подключаете, чтобы случайно не сделать приложение настолько большим, что его загрузка займёт слишком много времени.
Разделение кода — это возможность, которая может создавать несколько бандлов и загружать их по мере необходимости.
Хоть вы и не уменьшите общий объём кода вашего приложения, но избежите загрузки кода, который может никогда не понадобиться пользователю и уменьшите объём кода, необходимый для начальной загрузки.
Более подробно раскрыл тему в Инстаграме🔥👇
Всем привет! Это третий урок курса по ReactJS. Надеюсь вам всё нравится!) Сегодня поговорим про разделение кода в React 🚀
Большинство React-приложений «собирают» свои файлы такими инструментами, как Webpack, Rollup или Browserify. Сборка (или «бандлинг») — это процесс выявления импортированных файлов и объединения их в один «собранный» файл (часто называемый «bundle» или «бандл»). Этот бандл после подключения на веб-страницу загружает всё приложение за один раз.
Бандлинг — это хорошо, но по мере роста вашего приложения, ваш бандл тоже будет расти. Вам нужно следить за кодом, который вы подключаете, чтобы случайно не сделать приложение настолько большим, что его загрузка займёт слишком много времени.
Разделение кода — это возможность, которая может создавать несколько бандлов и загружать их по мере необходимости.
Хоть вы и не уменьшите общий объём кода вашего приложения, но избежите загрузки кода, который может никогда не понадобиться пользователю и уменьшите объём кода, необходимый для начальной загрузки.
Более подробно раскрыл тему в Инстаграме🔥👇
Ответ 🚀
Надеюсь вы без проблем справились с этой довольно простой задачей! А объяснение ниже:
Внутри блока if мы создали локальную переменную a, которая будет доступна только внутри этого блока. Для Js эти переменные - разные, поэтому он не будет переопределять первую a. Следовательно, в b мы запишем значение переменной a, которая объявлена вне блока if.
Как вам задачка?
Надеюсь вы без проблем справились с этой довольно простой задачей! А объяснение ниже:
Внутри блока if мы создали локальную переменную a, которая будет доступна только внутри этого блока. Для Js эти переменные - разные, поэтому он не будет переопределять первую a. Следовательно, в b мы запишем значение переменной a, которая объявлена вне блока if.
Как вам задачка?
[React] Словарь терминов. ч.1 🚀
Всем привет! В этом посте собрал основные термины в React. Обязательно сделаю вторую часть, потому что здесь не все термины. 🚀
📌 Одностраничное приложение:
Одностраничное приложение — это приложение, которое состоит из единственной HTML-страницы и прочих ресурсов (таких как JavaScript и CSS), необходимых для успешной работы. Любое взаимодействие с главной или последующими ей страницами не требует контакта с сервером, что значит — страница не требует перезагрузки.
React можно использовать для совершенствования небольших частей уже существующих сайтов, чтобы придать дополнительную интерактивность. Код, написанный в React, может мирно сосуществовать с другой разметкой. По сути, именно так React и используется в Facebook.
📌 Компиляторы:
Компилятор JavaScript принимает на вход JavaScript код, преобразует его и возвращает в изменённом формате. Самый известный случай использования — преобразование синтаксиса ES6 для поддержки в старых браузерах. При работе с React чаще всего используется Babel
📌 Бандлеры:
Бандлеры берут отдельные модули JavaScript и CSS и соединяют их в меньшее количество файлов, которые оптимизированы под браузеры. В работе с React чаще всего используются Webpack и Browserify.
📌 Менеджер пакетов:
Менеджер пакетов — это инструмент, позволяющий управлять зависимостями в вашем проекте. npm и Yarn — менеджеры пакетов наиболее используемые в приложениях React. Оба являются клиентами реестра пакетов npm.
Более подробно раскрыл тему в Инстаграме🔥👇
Всем привет! В этом посте собрал основные термины в React. Обязательно сделаю вторую часть, потому что здесь не все термины. 🚀
📌 Одностраничное приложение:
Одностраничное приложение — это приложение, которое состоит из единственной HTML-страницы и прочих ресурсов (таких как JavaScript и CSS), необходимых для успешной работы. Любое взаимодействие с главной или последующими ей страницами не требует контакта с сервером, что значит — страница не требует перезагрузки.
React можно использовать для совершенствования небольших частей уже существующих сайтов, чтобы придать дополнительную интерактивность. Код, написанный в React, может мирно сосуществовать с другой разметкой. По сути, именно так React и используется в Facebook.
📌 Компиляторы:
Компилятор JavaScript принимает на вход JavaScript код, преобразует его и возвращает в изменённом формате. Самый известный случай использования — преобразование синтаксиса ES6 для поддержки в старых браузерах. При работе с React чаще всего используется Babel
📌 Бандлеры:
Бандлеры берут отдельные модули JavaScript и CSS и соединяют их в меньшее количество файлов, которые оптимизированы под браузеры. В работе с React чаще всего используются Webpack и Browserify.
📌 Менеджер пакетов:
Менеджер пакетов — это инструмент, позволяющий управлять зависимостями в вашем проекте. npm и Yarn — менеджеры пакетов наиболее используемые в приложениях React. Оба являются клиентами реестра пакетов npm.
Более подробно раскрыл тему в Инстаграме🔥👇
