Войти в IT

​Что такое jQuery.UI❔ Зачем он нужен❔

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

❕Основные преимущества:

▫️Значительно упрощает и ускоряет разработку интерфейсов.

▫️Обеспечивает кросс-браузерную совместимость

▫️Позволяет создавать универсальные приложения, работающие на разных платформах и устройствах.

▫️Предлагает множество тем и стилей, которые позволяют легко настроить внешний вид интерфейса.

▫️Можно выбрать готовую тему или настроить свою собственную.

▫️Возможность расширения функциональности библиотеки с помощью плагинов.

Полезная ссылка для чтения:

✅ Подробная статья

​Что такое jQuery❔ Зачем он нужен❔

jQuery — это быстрая, маленькая и мощная библиотека JavaScript, которая упрощает работу с HTML-документами, обработкой событий, созданием анимаций и многое другое.

❕Основные преимущества:

▫️Предоставляет разработчикам простой и интуитивно понятный способ обращения с элементами веб-страницы.

▫️Можно значительно сократить количество кода, необходимое для взаимодействия с DOM-деревом.

▫️Предоставляет удобный набор методов и функций, которые позволяют выполнять различные манипуляции с элементами страницы.

▫️Обладает высокой переносимостью и совместимостью.

▫️Поддерживает все основные браузеры и упрощает написание кросс-браузерного кода.

Полезная ссылка для чтения:

✅ Подробная статья

​Полезные методы для работы со строками

Продолжаем про JavaScript! Немного полезных методов для работы со строками. Коробко и без лишней философии.

🔵 Length - получение длины строки

   let str = "Войти в IT!";
   console.log(str.length); // Выведет 13

🔵 ToUpperCase и ToLowerCase - приведение текста к верхнему регистру, и нижнему регистру

   let str = "Войти в IT!";
   console.log(str.toUpperCase()); // Выведет "ВОЙТИ В IT!"
   console.log(str.toLowerCase()); // Выведет "войти в it!"

🔵 IndexOf и LastIndexOf - получение номера подстроки в строке

   let str = "JavaScript очень увлекательный язык программирования";
   console.log(str.indexOf("увлекательный")); // Выведет 13
   console.log(str.lastIndexOf("язык")); // Выведет 22

🔵 Slice - получить часть строки на основе индекса и желаемой длины
  
let str = "JavaScript";
   console.log(str.slice(0, 4)); // Выведет "Java"
   console.log(str.slice(4)); // Выведет "Script"

🔵 Replace - заменить одну часть строки на другую
 
let str = "Войти в IT!";
   console.log(str.replace("IT", "айти")); // Выведет "Войти в айти!".

Полезная ссылка для самостоятельного изучения:
✅ Подробная статья

​Второй вариант для динамического рендеринга – Handlebars

В продолжении к посту про jsRender. Есть ещё один очень удобный шаблонизатор. Еще более популярный, чем jsRender. Он называется Handlebars. Этот инструмент точно так же позволяет создавать удобные шаблоны, которые с помощью JavaScript превращаются в готовые блоки HTML-кода.

Основные преимущества Handlebars:

💌 Простота использования

Handlebars предлагает простой и интуитивно понятный синтаксис, основанный на подобных HTML шаблонах.

🪄 Универсальность

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

♨️ Расширяемость

Handlebars позволяет создавать собственные хелперы и настраивать собственные частичные представления.

🛎 Высокая производительность

Handlebars основан на принципе эффективного кэширования шаблонов и данных.

👨‍💻 Большое сообщество разработчиков

Честно сказать, разработку jsRender какое-то время назад забросили, а сообщество куда-то разбежалось. В целом, поддержка осуществляется, хотя за проектом по большей части следит один человек и несколько помощников. В этом плане, Handlebars ушел гораздо дальше - ребята собрали небольшое коммьюнити вокруг своей библиотеки, продолжают активно развивать и поддерживать библиотеку.

Полезная ссылка для чтения:
✅ Подробная статья

​Строки в JavaScript 💿

Строки – один из основных типов данных в JavaScript. Они используются для хранения и манипуляции с текстовой информацией.

⚙️ Создание и объединение строк

В JavaScript строки можно создавать с помощью одинарных ('') или двойных ("") кавычек. Ну и для самых продвинутых, можно использовать вот такие кавычки - ``, которые ещё и поддерживают вставку данных напрямую из переменных. Например, вот так: let a = 10; let str =`My age is ${a}`;

🖇 Операции над строками

JavaScript предоставляет множество методов для работы со строками:

1️⃣ Length: возвращает длину строки.

2️⃣ ToUpperCase: преобразует строку в верхний регистр.

3️⃣ ToLowerCase: преобразует строку в нижний регистр.

4️⃣ Slice (start, end): возвращает подстроку, начиная с индекса start и до (но не включая) индекса end.

5️⃣ IndexOf (substring): возвращает индекс первого вхождения подстроки substring в строку.

6️⃣ Replace (substring, replacement): заменяет все вхождения подстроки substring на replacement.

7️⃣ Для объединения строк используй простой символ +. Например, let q = "asd" + "dsa";

Полезная ссылка для чтения:
✅ Подобная статья

​Рисуем HTML-разметку через jsRender 🎨

Небольшим контрастом к предыдущему посту, добавим микро-фреймворк для рисования HTML-контента. Поговорим о библиотеке jsRender. С её помощью, ты можешь сделать JS-шаблоны различных кнопок, таблиц, и других элементов интерфейса - а потом отрисовать их на чистом JS. Ну, это гораздо проще чем писать вот такие конструкции: htmloutput += "<div>Preved</div>";

Для начала, скачай файл jsRender.js с официального сайта проекта. После скачивания подключи его к своей странице HTML, используя тег <script>:
<script src="путь_к_файлу/jsRender.js"></script>

💡Создание своей HTML-разметки. Для начала создай шаблон, который определит структуру твоей разметки. Шаблон – это строка HTML-кода, где ты используешь специальные логические конструкции для вставки данных. Шаблоны представляют из себя скрипты, которые трансформируются в готовый HTML-код. Для такой трансформации тебе так же понадобится JSON - то есть, готовый набор данных для отрисовки.

🧑‍💻 Пример простого шаблона jsRender. В этом примере шаблон содержит два маркера {{:title}} и {{:content}}, которые будут заменены соответствующими значениями при рендеринге.

<script id="myTemplate" type="text/x-jsrender">
  <div>
    <h2>{{:title}}</h2>
    <p>{{:content}}</p>
  </div>
</script>

📖 Используй его для создания HTML-разметки из JavaScript. Найди контейнер, в который ты хочешь добавить разметку, и затем вызови внутри JS-кода функцию render для отображения шаблона. Функция вернёт тебе готовый HTML-код, который ты сможешь добавить в любое место твоей веб-страницы.

✅ Ссылка для подробного изучения:
Подробная статья

​Почему чистый JS – отличный выбор для разработчиков

У JS разработчика всегда есть принципиальный выбор из двух путей - писать код на базе фреймворков, или писать чистый vanilla-код. Как мы уже сказали выше, в последние годы нарастает тренд на чистый код, без лишних библиотек или платформ. Субъективно, это является хорошим решением. И авторы сего канала определённо поддерживают такую тенденцию. Скажем более - фреймворки настолько избаловали программистов, что даже простейшие вещи многие делают на основе "коробочных решений", совершенно не понимая их внутренней сути. В свою очередь, безалаберная надежда "на более умных программистов" делает код всё более зависимым от чьих-то сторонних решений, обезличенным и негибким. Так что - пробуйте писать на чистом JS, поверьте это очень круто!

💡Улучшение понимания языка: Изучение и использование чистого JS позволит тебе лучше понять основы языка.  Изучая чистый JS, ты всецело осваиваешь его синтаксис, лучше понимаешь возможности и ограничения. Это помогает сделать твои приложения более эффективными и поддерживаемыми.

💡Улучшение навыков отладки: Работая с чистым JS, ты учишься использовать инструменты разработчика браузера, консоль и другие инструменты, что помогает тебе лучше понять, что происходит на самом деле.

⚖️ Более маленький размер проекта: Использование фреймворков имеет свою цену – размер файлов. Фреймворки включают много функциональности, которая может быть совершенно ненужной для твоего проекта. Краткость - сестра таланта!

💡Улучшение навыков архитектуры и проектирования:
Написание приложения с нуля на чистом JS позволяет тебе глубже понять основы архитектуры и проектирования приложений.

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

Полезная ссылка для чтения:
✅ Подробная статья

Привет войтишник! Смотри что мы нашли для тебя — Полезный хоткей, о котором мало кто знает:

Если зажать правый Shift на 8-10 секунд, это включит блокировку клавиатуры (фильтрацию ввода).

Вдвойне полезно, если вы молодой родитель.

Мир IT и технологий полон загадок и возможностей, и вы можете стать частью этой удивительной сферы.

Войти в IT

​Что такое Vanilla JS❔

Vanilla JS – это термин, который означает использование чистого JavaScript без каких-либо фреймворков или библиотек. В прошлые годы, в веб-разработке был явный тренд на создание и использование универсальных фреймворков. Это позволяло экономить время на создании кода (потому что многий универсальный код уже давно написан и оттестирован). На сегодняшний же день, модной тенденцией является отказ от фреймворков в пользу чистого JavaScript - то есть, максимального упрощения интерактивности.

Основные преимущества:

🔥 Простота использования: Использование только стандартного JavaScript позволяет сосредоточиться на изучении фундаментальных принципов языка, что делает его использование относительно более простым.

💢 Большая гибкость: Vanilla JS не ограничивает разработчика в выборе архитектуры или способов решения проблем.

▶️ Улучшенная производительность: Vanilla JS позволяет управлять логикой и оптимизацией кода в соответствии с конкретными потребностями проекта, что может привести к более быстрой загрузке страниц и более плавной работе.

📊 Высокая совместимость: Код, написанный на Vanilla JS, будет работать на большинстве современных браузеров и устройств, минимизируя проблемы совместимости.

🔎 Обучение основам: Изучение Vanilla JS помогает понять основы языка и его принципы, что позволяет разработчикам лучше понимать то, что происходит под капотом фреймворков и библиотек.

Полезная ссылка для чтения:
✅ Подробная статья

В РФ Дефицит Дефицит айтишников.

«Дефицит разработчиков мы оцениваем примерно в 500–700 тыс. человек, которые нам нужны для того, чтобы поддерживать высокие темпы развития отрасли», — сказал глава Минцифры Максут Шадаев.

Это хорошая возможность занять должность. Сфера информационных технологий бьет рекорды в развитии, и в ней есть место для тебя.

Войти в IT

​Внешний JavaScript

💻 Важная особенность JavaScript и CSS в том, что их можно повторно использовать на разных страницах. Так например, обычно создаётся файл вроде common.js и common.css с общими универсальными функциями для сайта, и общей стилизацией для сайта. И эти файлы подключаются ко всем страницам сайта. Таким образом, редактируя программный код в одном месте - мы видим изменения сразу на всех страницах сайта. Это позволяет отделить программный код, стилизацию сайта, и разметку страниц друг от друга.

🌏 JavaScript и CSS файлы могут быть внутренними или внешними. Внутренние файлы располагаются на том же сервере, где хранится сам сайт. Внешние файлы могут располагаться на других, удалённых серверах. Так например, многие JS-библиотеки или фреймворки хранятся на общедоступных серверах. И можно подключить их "удалённо", без скачивания файла на собственный сервер. Это так же ускоряет разработку, и позволяет иметь подключенный программный код в наиболее актуальных версиях.

Полезная ссылка для чтения:
✅ Подробная статья

Привет войтишник! Будь осторожен — В магазины приложений проникли фейковые мессенджеры Signal и Telegram.

Вредоносные приложения были созданы на основе открытого исходного кода Signal и Telegram.

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

Что мы можем извлечь из этой ситуации? Это отличный пример того, как важно понимать мир программирования, его этику и безопасность. Если ты заинтересован в том, чтобы бороться с такими угрозами, начни изучать программирование и кибербезопасность.

Войти в IT

Интересная инфографика по HTML-тегам. Ребята проанализировали 8 миллионов сайтов, и свели результаты в диаграмму. На картинке - популярность использования различных HTML-тегов. Свежесть данных - 2016 год, но в целом ситуация не поменялась.

Если не брать в расчёт обязательные теги вроде html, body, header и т.п. - то победил тег <div> с рекордными 89%. То есть, 9 из 10 сайтов используют этот HTML-элемент для отображения данных.

Мы тоже не поленились, и сделали подробную статью где сравнили между собой теги <div> и <span>. Статья определенно может быть полезна для начинающих веб-разработчиков. Почитать её можно здесь, в нашем Дзен. Ссылка на оригинал научного исследования со статистикой из картинки - там же, внутри статьи.

Войти в IT

​Как добавить JavaScript на свою страницу

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

1️⃣ Открой текстовый редактор

Тебе понадобится текстовый редактор для написания своего кода JavaScript. Ты можешь использовать любой редактор, который тебе нравится, такой как Sublime Text, Visual Studio Code или Notepad++.

2️⃣ Создай новый файл JS

Создай новый файл и сохрани его с расширением «.js». Например, ты можешь назвать его «script.js». Убедись, что ты сохранил файл именно с расширением «.js», чтобы браузер правильно интерпретировал его как файл сценария JavaScript. Частая ошибка в этом пункте - сохранение файла с другим текстовым форматом, например - .txt.

3️⃣ Напиши свой код JavaScript

В только что созданном JS-файле «script.js» напиши свой код JavaScript. Например, ты можешь попросить JavaScript отобразить всплывающее сообщение с надписью "привет" - вот такая строчка кода поможет тебе в этом - alert("Privet!");

4️⃣ Подключи свой файл JavaScript к твоей веб-странице

Чтобы твой код работал именно на твоей веб-странице, ты должен подключить его. Для этого добавь следующий тег <script> в раздел <head> или перед закрывающим тегом </body> твоей веб-страницы: <script type="text/javascript" src="script.js"></script>

5️⃣ Сохрани веб-страницу и js-файл и протестируй результаты

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

Полезная ссылка для чтения:
✅ Подробная статья

Привет войтишник! Смотри что мы нашли для тебя — сервис для подготовки к собеседованию на программиста.

Здесь ты найдешь разные задачки по 20 языкам, настраиваемый уровень сложности и подсказки от ИИ-эксперта.

Нейросети определят твои сильные и слабые места и будут подбирать тебе интересные индивидуальные испытания.

Давайте вместе развиваться и достигать невероятных высот в этой захватывающей сфере. Присоединяйся к нам и начинай свое увлекательное путешествие в IT мире.

Войти в IT

Войти в IT поздравляет всех причастных с днём знаний! 🎉

Желаем тебе получать самые качественные и нужные знания, а потом умело применять их самым выгодным образом 💰

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

Войти в IT

​В каких современных веб-браузерах встроен JavaScript❔

🌐 Google Chrome: Он включает встроенную поддержку JavaScript с помощью своего движка V8, который обеспечивает быструю и эффективную выполнение кода JavaScript.

🌐 Mozilla Firefox: Он использует свой движок Gecko, который обрабатывает и выполняет код JavaScript для создания интерактивных, а так же динамических веб-приложений.

🌐 Apple Safari: Он также обладает встроенной поддержкой JavaScript и использует движок JavaScriptCore, который способен обрабатывать и выполнять код JavaScript.

🌐 Microsoft Edge: Последние версии Edge перешли на движок Chromium, тот же, что и в Google Chrome. Это означает, что Edge так же обеспечивает возможность выполнения JavaScript с помощью движка V8, обеспечивая быстрое и надежное выполнение кода JavaScript.

🌐 Opera: Opera использует движок Blink, разработанный Google, который предоставляет возможность выполнения кода JavaScript и обеспечивает хорошую производительность и безопасность веб-приложений.

🌐 Яндекс.Браузер: Он основан на движке Blink, таким же, как в Google Chrome и Opera, что обеспечивает высокую производительность интерпретации кода JavaScript.

Полезная ссылка для чтения:

✅ Подробная статья

Гугл показал уничтожителя ChatGPT-4.

Новая модель способна оперировать сразу с разными типами контента: текстом, видео, аудио и изображениями.

Одной из важных доработок стало обучение на видеоматериалах с YouTube, что придало нейросети более человечное поведение.

Публичный доступ к Gemini ожидается уже в декабре.

Не упусти свой шанс погрузиться в мир ИТ. Ведь может следующую революционную модель искусственного интеллекта создашь именно ты.

Войти в IT

Начинающим разработчикам - отличное видео о том, как работает постановка задач / тестирование программ / разработка интерфейсов / практически что угодно из мира IT 👨‍💻

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

Жизненный совет №317 - программируй так так, чтобы логика программы была понятна даже идиоту. Кстати говоря, этот совет универсально применим не только в IT, но и в любой другой деятельности 😉

Войти в IT

​Что именно умеет делать JavaScript и почему его используют большинство сайтов❔

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

📥 JavaScript предоставляет доступ к DOM, разметке HTML-страницы. Это позволяет разработчикам изменять содержимое, стили и атрибуты элементов страницы динамически.

🔎 С помощью JavaScript ты можешь проверять данные, вводимые пользователем, на предмет соответствия определенным требованиям.

📬 JavaScript позволяет реагировать на различные события, например, щелчки мыши, нажатия клавиш и т.д. Ты можешь привязать функцию к определенному событию и выполнять действия, когда событие происходит.

⛓ JavaScript предлагает возможность асинхронного выполнения задач, что делает его идеальным для работы с серверными запросами и обмена данными без блокировки интерфейса пользователя.

📝 JavaScript имеет большое количество фреймворков и библиотек, таких как React, Angular и Vue.js, которые делают разработку веб-приложений более эффективной и удобной. Они предоставляют различные инструменты и готовые решения, ускоряя процесс разработки и повышая качество кода.

Полезная ссылка для чтения:

✅ Подробная статья