Руслан Куянец | Reactify

Задачи по JavaScript

Это примеры задач на проверку базовых знаний ЯП. Решая задачи, даже самые легкие, вы набиваете руку и запоминаете различные механизмы ЯП.

1. Написать функцию, которая принимает два числа и возращает результат их умножения.

Основы арифметических операций, создание функций, возврат значений.

2. Написать функцию, которой передаем, имя, фамилия и возраст, и получаем строку "Привет Иван Петров с возрастом 17 лет".

Работа со строками, конкатенация строк, использование параметров в функциях.

3. Написать функцию, которая принимает пол человека ('M','F') в виде строки, результат функции возвращает строку "Ваш пол мужской" (или женский) или же "Ваш пол не опеределен".

Условные операторы, сравнение строк.

4. Сделайте функцию, которая принимает параметром число от 1 до 7, а возвращает день недели на русском языке.

Массивы, условные операторы, работа с индексами массивов.

5. Написать функцию, которая принимает строку (в этом тексте 3-5 предложений), верните каждое первое слово в каждом предложении, через запятую.

Работа со строками, методы split и join, циклы, массивы.

6. Написать функцию, которой передаем имя, и она возраващает приветствие в зависимости от времени суток (Доброе утро\день\вечер\ночи Иван).

Работа с датами и временем, условные операторы, динамическое формирование строк.

7. Создай новую функцию, в которую передаешь имя и возраст человека и получаешь сообщение (Иван имеет возраст 44 и он зрелый). А также вызови внутри своей функции, функцию из прошлого задания.

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

#JavaScript

Изучаем CSS

На сегодняшний день существует огромное количество интересных ресурсов для изучения технологий, ЯП и инструментов.

Вот пример для изучения отдельных тем в CSS:

1. Flexbox
https://flexboxfroggy.com/#ru

2. Grid
https://cssgridgarden.com/

#css #flexbox #grid #study #free #game

Блочная модель CSS

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

1. Содержимое (Content): Это основная часть блока, где располагается текст, изображения или другие элементы.

2. Внутренние отступы (Padding): Расстояние между содержимым и границей элемента. Padding увеличивает размер элемента, но остается частью элемента, что означает, что фоновый цвет или изображение элемента будет распространяться на область внутренних отступов.

3. Граница (Border): Обрамляет содержимое и внутренние отступы. Граница является важной частью визуального представления элемента и может быть стилизована различными способами.

4. Внешние отступы (Margin): Пространство вокруг элемента, отделяющее его от других элементов. Внешние отступы не влияют на размер самого элемента, но определяют расстояние между элементами.

Все части блока, кроме внешних отступов (margin), включаются в общую ширину и высоту элемента в CSS.

#обучающийПост #css #block

Недавно посмотрел видео Димыча. Он очень понятно объясняет технические темы. Видео про архитектуру бэкенд приложений. В целом дает базовое понимание как все устроенно. Полезно знать даже если вы не бэкендер

https://www.youtube.com/live/B5ha6ips8hE?si=BEDUlQTBVlSZYG9l

Как проверить, является ли число конечным?

В JavaScript для проверки того, является ли число конечным, можно использовать встроенную функцию Number.isFinite(). Эта функция возвращает true, если переданное ей значение является конечным числом, и false в противном случае.

const num1 = 100;
console.log(Number.isFinite(num1));
// Выведет true, потому что 100 - это конечное число

const num2 = Infinity;
console.log(Number.isFinite(num2));
// Выведет false, потому что Infinity - это не конечное число

const num3 = NaN;
console.log(Number.isFinite(num3));
// Выведет false, потому что NaN - это не число

const num4 = "100";
console.log(Number.isFinite(num4));
// Выведет false, потому что "100" - это строка

#обучающийПост #JavaScript #number

Это массив?

В JavaScript вы можете проверить, является ли объект массивом, используя несколько различных методов. Самый надежный из них — это статический метод Array.isArray()



const myArray = [1, 2, 3];
const notArray = {key: "value"};

Array.isArray(myArray)); // true
Array.isArray(notArray)); // false

Другие способы:

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

const

myArray = [1, 2, 3];
myArray.constructor === Array; // true

2. Это более надежный метод до появления Array.isArray, но сейчас он считается избыточным и менее читаемым. Так что лучше всего использовать Array.isArray()

const

myArray = [1, 2, 3];
Object.prototype.toString.call(myArray) === '[object Array]'; // true

#обучающийПост #JavaScript #array #isArray

Мутабельность (mutability) и иммутабельность (immutability)

В JavaScript у нас есть примитивные типы и ссылочные типы. Примитивные типы включают числа, строки, boolean, null, undefined. И ссылочные типы включают объекты, массивы и функции.

Разница между этими типами заключается в том, что примитивные типы неизменяемы (immutable), а ссылочные типы изменяемы (mutable). Например, тип string неизменяем

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

const myArray = [1, 2, 3];
myArray[0] = 100; // Изменяем первый элемент массива

const myObject = { key: 'value' };
myObject.key = 'newValue'; // Изменяем значение свойства объекта

Иммутабельные типы данных - это те, которые не могут быть изменены после создания. К ним относятся примитивы, такие как числа, строки, логические значения (boolean), null и undefined. Когда вы пытаетесь изменить иммутабельный тип, на самом деле создается новый экземпляр данных.

let myNumber = 10;
myNumber = 20; // Создается новое число, а не изменяется существующее

let myString = "hello";
myString = "world"; // Создается новая строка

#обучающийПост #JavaScript #immutable #mutable

Coding time✅

Код. Тайный язык информатики

Давно хотел прочитать эту книгу. Знаете, эта книга как преподаватель в универе, которого все любят и который умеет интересно и понятно доносить свой предмет. Которого все слушают в захлеб.

Здесь основы основ, читается легко, после прочтения темы идёт выброс эндорфинов, ты действительно получаешь удовольствие, ведь в голове звучит "Эврика! Вот что это значит! Теперь всё понятно!".

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

Как работает электричество? Что такое двоичная система? Как работает телеграф? Как появился первый компьютер?

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

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

Также в книге рассматриваются математические основы информатики, такие как теория чисел, алгебра и логика.

Кроме того, книга рассказывает об истории развития информатики, начиная с первых механических устройств и заканчивая современными суперкомпьютерами.

Супер, ребята! Обязательно к прочтению!

#review #book

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

Мне кажется формат курсов, в которых вам даются материалы и вы по ним учитесь, себя исчерпал, платить за такие курсы деньги - точно не нужно!

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

Как пример Тинькоф. Они вообще джунов не берут с биржи труда. Только со своих стажировок и курсов. В целом такая тенденция мне нравится. Пожал заявку - прошёл экзамен - взяли.

Лучше 3 месяца подготовится к экзаменам и пройти на стажировку, а потом на работу, чем 6 месяцев надеяться хоть на одно приглашение на собес. Тут точно отсеваются ребята которые ничего не знают, приписали опыт, наврали на собесе.

Coding time✌️

Временная мёртвая зона в ES6

Временная мёртвая зона в JavaScript (TDZ) — это период, когда переменная уже "создана", но еще не "готова к использованию". Это происходит, когда вы используете let или const для создания переменных.

Если вы попытаетесь использовать такую переменную до того, как ей будет присвоено значение, JavaScript выдаст ошибку, потому что в это время переменная находится в "временной мёртвой зоне".

Переменные, объявленные через var, не имеют TDZ. Они поднимаются (hoisted) и получают значение undefined в начале исполнения блока.

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

#JavaScript #обучающийПост #tdz

Что такое DNS

Каждое устройство, подключенное к интернету, имеет уникальный IP-адрес, который используется для обмена данными с другими устройствами в сети. Однако запоминать числовые IP-адреса для всех сайтов было бы очень сложно для людей. DNS позволяет нам использовать запоминающиеся имена доменов (например, "google.com") вместо сложных наборов чисел.

Когда вы вводите имя домена в адресной строке браузера, ваш компьютер отправляет запрос на DNS-сервер. DNS-сервер смотрит в своей базе данных и находит соответствующий IP-адрес для этого имени домена. Затем он сообщает IP-адрес вашему компьютеру, и ваш браузер может подключиться к серверу, на котором находится запрашиваемый вами сайт.

Система DNS организована иерархически. В самом верху иерархии находятся корневые сервера, которые управляют базами данных, содержащими информацию о доменных зонах верхнего уровня (например, .com, .org, .net и т.д.). Если локальный DNS-сервер не знает, как перевести доменное имя в IP-адрес, он спрашивает об этом серверы выше уровнем.

#dns #domain #обучающийПост

2к💪 кто смотрел, все ли понравилось? Все понятно? Может что-то забыл сказать? Как вам вообще видео?

Помимо создания видео, буду дополнительно создавать БЕСПЛАТНЫЕ обучающие курсы на своей платформе. Здесь будет структурированная база знаний с конспектами, видео, тестами, заданиями, кодингом и проверкой знаний.

Отпуск у меня неделя. Буду отдыхать в замечательном отеле и создавать платформу в свободное от отдыха время😂

Дата запуска - неизвестно🙃 Но я полон идей и энтузиазма! Главное - начать, и я начал!

Постараюсь сделать обучение удобным, интересным, эффективным!

Поездная романтика. Читаю книгу «Код. Тайный язык информатики»✅

Всем привет! На выходных возможно не будет постов. Сегодня я праздную свадьбу, приехали родственники, друзья.

Сегодня крайний день всей этой суеты😅 дальше до нового года уже буду заниматься делами. Все Цели на год нужно выполнить, осталось пару пунктов🤞

Читы заказывали?

https://github.com/rocketrussia/js-cheat-sheet

#JavaScript

Домен

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

Домен — это просто имя вашего сайта в интернете. Вместо того чтобы говорить друзьям набирать 123.45.67.89, вы просто говорите им "заходите на ruslan.com".

Когда вы регистрируете домен, это имя становится вашим указателем на сервер, где хранится ваш сайт. Все очень просто: вводите "ruslan.com" — и вуаля, открывается ваш сайт.

Домены обычно состоят из двух основных частей:

SLD (Second-Level Domain) - это уникальное имя, которое вы выбираете, например, "ruslan" в "ruslan.com".
TLD (Top-Level Domain) - это домен верхнего уровня, такой как ".com", ".org", ".net" и страновые коды типа ".ru", ".us", ".uk".

Иногда в домене может быть и третий уровень — субдомен, например, "blog.ruslan.com", где "blog" является субдоменом. Так мы можем разделять различные части нашего приложения, сервиса (market.yandex.ru / taxi.yandex.ru / bank.yandex.ru и тд)

#обучающийПост #domain

Блин, я не учел того, что в React Новости у нас все тип топ. У нас нет вложенности Props в компонентах. У нас все, как отдельные виджеты/модули. React Context нам не нужен для Новостей.

Но я могу сделать видео по React Context как мини видеокурс. Реализуем смену темы ночная/дневная. Чтобы не отказываться от этого. Потом нам в любом случае для авторизации нужен будет контекст