Основные концепции и термины JavaScript

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

1. Переменные (Variables)
Переменные в JavaScript используются для хранения данных. Они могут содержать числа, строки, объекты и другие типы данных. Для объявления переменных используются ключевые слова var, let и const. Например:
var name = "John"; let age = 30; const PI = 3.1415;

2. Типы данных (Data Types)
JavaScript поддерживает различные типы данных, такие как строка (string), число (number), булево значение (boolean), массив (array), объект (object) и многие другие. Определение типа данных переменной можно с помощью оператора typeof. Например:
typeof "Hello" // "string" typeof 42 // "number" typeof true // "boolean"

3. Операторы (Operators)
Операторы в JavaScript позволяют выполнять различные операции над данными. Например, арифметические операторы для выполнения математических операций, операторы сравнения для сравнения значений, и логические операторы для работы с булевыми значениями.
let x = 10; let y = 5; let sum = x + y; // Сложение let isGreaterThan = x > y; // Сравнение let isTrue = true && false; // Логическое И
4. Условные операторы (Conditional Statements)
Условные операторы позволяют выполнять различные блоки кода в зависимости от условий. Самый распространенный из них – это оператор if, который выполняет код, если условие истинно.
if (age >= 18) { console.log("Вы совершеннолетний"); } else { console.log("Вы несовершеннолетний"); }
5. Циклы (Loops)
Циклы в JavaScript используются для выполнения одного и того же кода несколько раз. Наиболее часто используемый цикл – это for, который выполняет код определенное количество раз.
for (let i = 0; i < 5; i++) { console.log("Итерация номер " + i); }
6. Функции (Functions)
Функции представляют собой блоки кода, которые можно вызывать многократно. Они позволяют

Наш задачник для Frontend-разработчиков - подписывайся и решай задачи)

К каждой задаче выкладываем решение с объяснениями))

Я тут учебник начал делать в блоге - вдруг кому то что то понадобится - залетайте)

За косяки по верстке не ругайте - времени нет - позже сделаю топ)

Учебник - https://developerhouse.ru/uchebnik-po-js/

Один из наиболее популярных вопросов на собеседовании по JavaScript - "Что такое замыкание (closure) и как оно работает?"

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

Пример:

function outerFunction() {
  var outerVariable = "I'm outside!";

  function innerFunction() {
    console.log(outerVariable);
  }

  return innerFunction;
}

var innerFunctionRef = outerFunction();
innerFunctionRef();
// Outputs: "I'm outside!"

В приведенном выше примере, внутренняя функция innerFunction доступна к переменной outerVariable, которая была объявлена внутри родительской функции outerFunction. outerFunction возвращает innerFunction, и мы сохраняем его в переменной innerFunctionRef. Когда мы вызываем innerFunctionRef(), она выводит сообщение "I'm outside!", потому что она имеет доступ к outerVariable благодаря замыканию.

Знание замыканий важно для понимания некоторых шаблонов проектирования JavaScript, таких как модульность и создание переиспользуемых компонентов.

Каким образом можно обмениваться кодом между файлами?

Это зависит от среды выполнения JavaScript. На клиенте (в среде браузера), пока переменные/функции объявлены в глобальной области видимости (window), все скрипты могут на них ссылаться. В качестве альтернативы, используйте Asynchronous Module Definition (AMD) через RequireJS для модульного подхода.

На сервере (Node.js) обычно используется CommonJS. Каждый файл считается модулем, и он может экспортировать переменные и функции, добавляя их к объекту module.exports.

ES2015 позволяет использовать модульный синтаксис, который призван заменить как AMD, так и CommonJS. В конечном итоге он будет поддерживаться как в браузере, так и в Node.

#вопросы_по_javascript

Что такое декораторы и к чему их можно применить?

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

Например, декоратор @sealed будет соответствовать запечатанной функции. Все, что помечено @sealed, будет использоваться для оценки запечатанной функции.

Их можно прикрепить к:
- Объявлениям классов
- Методам
- Свойствам-аксессорам
- Свойствам
- Параметрам

По умолчанию декораторы не включены. Чтобы включить их, вы должны отредактировать поле experimentalDecorators в параметрах компилятора в файле tsconfig.json или в командной строке.

#вопросы_по_typescript

Что такое декораторы и к чему их можно применить?

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

Например, декоратор @sealed будет соответствовать запечатанной функции. Все, что помечено @sealed, будет использоваться для оценки запечатанной функции.

Их можно прикрепить к:
- Объявлениям классов
- Методам
- Свойствам-аксессорам
- Свойствам
- Параметрам

По умолчанию декораторы не включены. Чтобы включить их, вы должны отредактировать поле experimentalDecorators в параметрах компилятора в файле tsconfig.json или в командной строке.

#вопросы_по_typescript

Для чего используют событие load? Есть ли у этого события недостатки? Знаете ли вы какие-либо альтернативы и в каких случаях бы стали их использовать?

Событие load происходит в конце процесса загрузки документа. На этом этапе все объекты в документе находятся в DOM, и все изображения, скрипты и ссылки загрузились.

Событие DOM DOMContentLoaded будет запущено после создание DOM для страницы, но не будет ждать окончания загрузки других ресурсов. Оно предпочтительно в тех случаях, когда вам не нужно загружать страницу целиком перед инициализацией.

#вопросы_по_javascript

Что такое React Reconciliation (Cверка) и как он работает?

Reconciliation (Cверка) - это процесс, посредством которого React обновляет DOM. Когда состояние компонента изменяется, React должен рассчитать необходимость обновления DOM. Это делается путем создания виртуального DOM и сравнения его с текущим DOM. В этом контексте виртуальный DOM будет содержать новое состояние компонента.

При сравнении двух деревьев первым делом React сравнивает два корневых элемента. Поведение различается в зависимости от типов корневых элементов.

Всякий раз, когда корневые элементы имеют различные типы, React уничтожает старое дерево и строит новое с нуля.

#вопросы_по_react

Одним из первых плагинов, которые появлялись в новых фреймворках в ранние дни JavaScript-фреймворков, был плагин для плейсхолдеров. Именно поэтому мы были так рады, когда HTML5 принес нам атрибут placeholder. Затем любители CSS, такие как я, были в восторге, когда спецификация CSS позволила нам стилизовать плейсхолдеры.

Недавно я столкнулся с проблемой: мне нужно было применить определенный font-family к элементу <input>, но только когда этот элемент содержит текст. Сначала я думал о необходимости установки font-family для <input>, а затем повторной применении font-family тега body к ::placeholder, но это не казалось идеальным решением - это скорее затраты на поддержку.

Псевдокласс :placeholder-shown позволяет выбрать плейсхолдер элемента <input> только когда он отображается, и таким образом, я мог выбрать только плейсхолдер, но не текст ввода:

/* Применение стиля к input применяется и к тексту ввода, и к плейсхолдеру */
input { color: red; }

/* Применение стиля только к плейсхолдеру */
input::placeholder { color: blue; }

/* Применение стиля к input, когда отображается плейсхолдер */
input:placeholder-shown { color: yellow; }

/* Применение стиля к input, но не к плейсхолдеру */
input:not(:placeholder-shown) { color: green; }

:placeholder-shown - это потрясающий псевдо-селектор, который можно использовать для более эффективного стилизирования плейсхолдеров и их элементов в зависимости от состояния. Творчество - это не только термин в области дизайна, это еще и способ мышления для разработчиков, чтобы решать интересные проблемы!

Введение в React: что за фреймворк и с чем его едят

React – это JavaScript-библиотека для создания пользовательских интерфейсов. Он был создан Facebook в 2011 году, и быстро стал одним из наиболее популярных инструментов для разработки веб-приложений. На сегодняшний день React используется многими объектами социальной сети Facebook, а также такими компаниями, как Airbnb, Uber и Netflix.
React работает с помощью компонентов – это модули, которые объединяют логику, стиль и разметку. Каждый компонент может иметь некоторое состояние и методы жизненного цикла, что позволяет ему реагировать на изменения и обновления.
React использует виртуальный DOM – внутреннюю копию реального DOM (дерева элементов веб-страницы). Когда происходит обновление компонента, React создает новый виртуальный DOM и сравнивает его с предыдущей версией. Затем он эффективно обновляет только те элементы, которые были изменены, вместо обновления всей страницы целиком.
React также распространяется на состояние приложения с помощью управления потоком данных. Flux – это архитектурный шаблон, который часто используется вместе с React для управления потоком данных.
React добавляет JSX (расширение языка JavaScript), чтобы обеспечить более удобный способ создания пользовательского интерфейса. JSX – это синтаксис, который позволяет соединить HTML и JavaScript в одном файле. React преобразует этот код в обычный JavaScript при его выполнении, что позволяет разработчикам создавать компоненты более быстро и эффективно.
Одна из главных особенностей React – это его экосистема. Есть множество дополнительных библиотек, инструментов и плагинов, доступных для разработчиков Re...

Установка React.js

React.js – это библиотека JavaScript, которая используется для создания пользовательских интерфейсов. Она позволяет создавать динамические пользовательские интерфейсы, используя компонентный подход. Если вы хотите начать работать с React.js, вам необходимо установить его на свой компьютер.
В этой статье мы рассмотрим, как установить React.js на ваш компьютер. Мы сначала рассмотрим несколько условий, которые вам понадобятся, прежде чем приступить к установке, а затем рассмотрим несколько способов установки React.js.

Условия
Прежде чем начать устанавливать React.js, вам понадобятся следующие условия:
Node.js
npm
Node.js – это среда выполнения JavaScript, которая позволяет выполнять JavaScript на стороне сервера. Он также включает в себя менеджер пакетов npm, который используется для установки сторонних пакетов, таких как React.js.
Если у вас еще нет Node.js или npm, вы можете их загрузить и установить с официального сайта Node.js.

Установка с помощью Create React App
Create React App – это инструмент командной строки, который позволяет создавать новые проекты React.js с минимальной настройкой. Он автоматически настраивает новый проект React.js с необходимыми зависимостями, такими как Babel, Webpack и другие, и предоставляет основные файлы для начала работы.
Чтобы создать новый проект React.js с помощью Create React App, выполните следующие шаги:
Откройте терминал и перейдите в каталог, в котором вы хотите создать ваш новый проект React.js.
Установите Create React App, выполнив следующую команду:
npm inst...

Структура каталогов React приложения

Структура каталогов верхнего уровня будет следующей:

assets — глобальные статические assets, такие как изображения, SVG, логотип компании и т. д.
components — глобальные общие/повторно используемые компоненты, такие как макет (оболочки, навигация), компоненты формы, кнопки
services — модули JavaScript
store – глобальное хранилище Redux
utils — Утилиты, помощники, константы и т. д.
views — также могут называться «страницами», здесь будет содержаться большая часть приложения.

▬▬▬▬▬▬▬▬

#архитектура #react

Что такое API?

Это один из самых часто задаваемых вопросов, ответ на который должен знать каждый HTML верстальщик. API — это “Application Programming Interface” или “Программный Интерфейс Приложения”. Эти интерфейсы используют для создания веб-приложений. API используют уже существующие инструменты и компоненты, поэтому позволяют разработчикам напрямую интегрировать их в свои сайты.

#вопросы_по_html

Что такое распространение события (Event Propagation)?

Когда какое-либо событие происходит в элементе DOM, оно на самом деле происходит не только в нем. Событие «распространяется» от объекта Window до вызвавшего его элемента (event.target). При этом событие последовательно пронизывает (затрагивает) всех предков целевого элемента. Распространение события имеет три стадии или фазы:

1. Фаза погружения (захвата, перехвата) — событие возникает в объекте Window и опускается до цели события через всех ее предков.
2. Целевая фаза — это когда событие достигает целевого элемента.
3. Фаза всплытия — событие поднимается от event.target, последовательно проходит через всех его предков и достигает объекта Window.

#вопросы_по_javascript

Сравнение JS и JQuery

JavaScript (JS) и jQuery – это две популярные технологии для создания интерактивных веб-сайтов. Но как они отличаются друг от друга и какой из них лучше использовать для определенных задач? Рассмотрим их отличия и сходства.

JavaScript
JavaScript – это язык программирования, используемый для создания интерактивного поведения на веб-страницах. Он обеспечивает динамический контент и манипуляции с DOM элементами.
Пример простой функции на JS:

function showMessage() {
 alert('Hello World!');
}

В этом примере мы создали функцию, которая вызывает всплывающее окно с сообщением “Hello World!”.
JS позволяет манипулировать DOM элементами, изменять стилевые свойства и взаимодействовать с событиями, такими как клики и прокрутки.
Пример изменения стилевого свойства на JS:
let element = document.getElementById('myElement');
element.style.color = 'red';
Здесь мы выбрали элемент с идентификатором “myElement” и изменили его цвет текста на красный.

jQuery
jQuery – это библиотека JavaScript, которая предоставляет простой способ манипулирования с DOM элементами, обработки событий и создания анимаций. Она упрощает написание кода и ускоряет разработку веб-сайтов.
Пример простой функции на jQuery:

$('#myButton').click(function() {
 alert('Hello World!');
});

В этом примере мы выбрали элемент с идентификатором “myButton” и привязали к нему функцию, которая вызывает всплывающее окно с сообщением “Hello World!” при клике на кнопке.
jQuery предоставляет дополнительные функции для работы с анимацией, AJAX и браузерным событиями. Она имеет множество плагинов и расширений для различных задач, таких как валидация форм и создание слайдеров.
Пример изменения стилевого свойства на jQuery:
$('#myElement').css('color', 'red');
Здесь мы выбрали элемент с идентификатором “myElement” и изменили его цвет текста на красный, используя метод .css() jQuery.

Сравнение
Одной из основных различий между JS и jQuery является уровень сложности и синтаксиса. JS может быть сло...

Для чего используют событие load? Есть ли у этого события недостатки? Знаете ли вы какие-либо альтернативы и в каких случаях бы стали их использовать?

Событие load происходит в конце процесса загрузки документа. На этом этапе все объекты в документе находятся в DOM, и все изображения, скрипты и ссылки загрузились.

Событие DOM DOMContentLoaded будет запущено после создание DOM для страницы, но не будет ждать окончания загрузки других ресурсов. Оно предпочтительно в тех случаях, когда вам не нужно загружать страницу целиком перед инициализацией.

#вопросы_по_javascript

Перечислите все виды списков, которые можно использовать для создания веб-страниц

В HTML есть 3 вида списков:
- Упорядоченный список: отображает элементы в пронумерованном формате. В тег обозначает упорядоченный список
- Неупорядоченный список: отображает элементы в маркированном формате. В тег обозначает неупорядоченный список
- Список определений: отображает элементы в форме определения, подобной словарю. В , а также теги обозначают список определений.

#вопросы_по_html

Объясните, почему это не является IIFE: function foo(){ }();

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

#вопросы_по_javascript

Какие вы знаете методы запрета обтекания (clearing) и в каких случаях они применяются?

Clear устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если задано обтекание элемента с помощью свойства float, то clear отменяет его действие для указанных сторон.

Значения:
none - отменяет действие свойства clear, при этом обтекание элемента происходит, как задано с помощью свойства float или других настроек.
both - отменяет обтекание элемента одновременно с правого и левого края. Это значение рекомендуется устанавливать, когда требуется снять обтекание элемента, но неизвестно точно, с какой стороны.
left - отменяет обтекание с левого края элемента. При этом все другие элементы на этой стороне будут опущены вниз, и располагаться под текущим элементом.
right - отменяет обтекание с правой стороны элемента.
inherit - устанавливает значение родителя.

#вопросы_по_css