Все статьи в порядке публикации на Unicoding: изучайте новые технологии, смотрите лекции и участвуйте в обсуждении.
Бесплатный курс "React - Путь самурая 2.0" - это продолжение первого сезона! Поэтому вы должны уверенно понимать, что происходило ТАМ, чтоб обучаться React-у далее.
#react #redux #reactjs #itkamasutra #typescript
https://www.youtube.com/playli....st?list=PLcvhF2Wqh7D
Курс "React JS - путь самурая 1.0", уроки, практика - YouTube
Сегодня в бесплатном доступе НЕТ ни одного полноценного курса по React JS (Redux, Thunk, Saga)
Если курсы есть, то они сделаны какими-то кусками, "по верхам", теория справочного характера, мало практики из реальной жизни. Я решил записать свои уроки по React JS - подробные, практические! Практика-практика-практика + много объяснений!
В рамках данного плейлиста мы сделаем с вами большой проект, с применением библиотек React и Redux (Thunk, Axios, Saga, D'n'D, графики).
#react #redux #reactjs #itkamasutra
https://www.youtube.com/playli....st?list=PLcvhF2Wqh7D
Прежде чем приступить к изучению Ангуляра, пожалуйста, прокачайте знания по:
1. ООП в JS (важен именно синтаксис ES6 и общее понимание концепции наследовавания, создания и использования объектов)
2. TypeScript - вы должны чётко представлять, что такое TypeScript и зачем он нужен
#typescript #js #javascript #angular #itkamasutra
https://www.youtube.com/playli....st?list=PLcvhF2Wqh7D
#3 Front-end. Вопросы на собеседовании
#yauhenk #webdev #interview #js #javascript #html #css #frontend #git #github #techinterview
#2 Front-end. Вторая часть вопросов на собеседовании
#yauhenk #webdev #interview #js #javascript #html #css #frontend #git #github #techinterview
#1 Front-end. Вопросы на собеседовании
Видеокаст представляет из себя коллекцию технических вопросов, которые можно получить на интервью.
Удобная, хорошо организованная шпаргалка всегда у вас под рукой!
#yauhenk #webdev #interview #js #javascript #html #css #frontend #git #github #techinterview
В данном видео-курсе мы с вами рассмотрим основные нововведения, которые появились в стандартах ES7-ES9 (ECMAScript). Те есть, мы разберём различные методы и фичи, которые существенно упрощают и ускоряют разработку на нативном JavaScript, как синхронном, так и асинхронном.
#javascript #js #ecmascript
JavaScript для самых маленьких
Видеокурс по самым базовым вещам в JavaScript для самых маленьких.
В данном видео вы узнаете о том, что такое JavaScript, а также основные его моменты.
https://www.youtube.com/playli....st?list=PLDmWuBfh49Z
#learnjavascript #learnjs #youtube
Введение в регулярные выражения
Регулярные выражения (RegExp) - это очень эффективный способ работы со строками.
Составив регулярное выражение с помощью специального синтаксиса вы можете:
искать текст в строке
заменять подстроки в строке
извлекать информацию из строки
Почти во всех языках программирования есть регулярные выражения. Есть небольшие различия в реализации, но общие концепции применяются практически везде.
Регулярные выражения относятся к 1950-м годам, когда они были формализованы как концептуальный шаблон поиска для алгоритмов обработки строк.
Регулярные выражения реализованные в UNIX, таких как grep, sed и популярных текстовых редакторах, начали набирать популярность и были добавлены в язык программирования Perl, а позже и в множество других языков.
JavaScript, наряду с Perl, это один из языков программирования в котором поддержка регулярных выражений встроена непосредственно в язык.
Сложно, по полезно
Новичкам регулярные выражения могут показаться абсолютной ерундой, а зачастую даже и профессиональным разработчикам, если не вкладывать время необходимое для их понимания.
Регулярные выражения сложно писать, сложно читать и сложно поддерживать/изменять.
Но иногда регулярные выражения это единственный разумный способ выполнить какие-то манипуляции над строками, поэтому они являются очень ценным инструментом.
Это руководство нацелено на то чтобы самым простым способом дать вам некоторое представление о регулярных выражениях в JavaScript и предоставить информацию о том как читать и создавать регулярные выражения.
Эмпирическое правило заключается в том, что простые регулярные выражения просты для чтения и записи, в то время как сложные регулярные выражения могут быстро превратиться в беспорядок, если вы не глубоко понимаете основы.
Как выглядят регулярные выражения
В JavaScript регулярные выражения это объект, который может быть определён двумя способами.
Первый способ заключается в создании нового объекта RegExp с помощью конструктора:
<code>
const re1 = new RegExp( 'hey' )
</code>
Второй способ заключается в использовании литералов регулярных выражений:
<code>
const re1 = /hey/
</code>
Вы знаете что в JavaScript есть литералы объектов и литералы массивов? В нём также есть литералы regexp.
В приведённом выше примере hey называется шаблоном. В литеральной форме он находится между двумя слэшами, а в случае с конструктором объекта, нет.
Это первое важное отличие между двумя способами определения регулярных выражений, остальные мы увидим позже.
Как они работают?
Регулярное выражение, которое мы определили выше как re1, очень простое. Оно ищет строку hey без каки-либо ограничений: строка может содержать много текста, а слово hey находиться где-то в середине и регулярное выражение сработает. Строка может содержать только слово hey и регулярка опять сработает.
Это довольно просто.
Вы можете попробовать протестировать регулярное выражение с помощью метода RegExp.test(String), который возвращает логическое (boolean) значение:
<code>
re1.test( 'hey' ) // ✅
re1.test( 'blablabla hey blablabla' ) // ✅
re1.test( 'he' ) // ❌
re1.test( 'blablabla' ) // ❌
</code>
В примере выше мы просто проверили удовлетворяет ли "hey" шаблону регулярного выражения, который храниться в re1.
Это проще простого, но вы уже знаете много о регулярных выражениях.
#regexp #javascript #js
Пишем свой калькулятор на JavaScript
Создаем собственный калькулятор на JavaScript с помощью JS, HTML и CSS.
Вначале, как говорится, была идея, то есть ТЗ самому себе - написать калькулятор на чистом JS, чтобы количество кода было минимальным.
Ну, и конечно, чтобы калькулятор выглядил прилично.
Итак, поехали.
Поскольку экран и кнопки на калькуляторе находятся не подряд друг за другом, то разделим наш калькулятор не несколько областей:
1. Область ввода данных. За эту область будет отвечать текстовое поле < input >;
2. Область цифровых кнопок 0-9;
3. Область функциональных кнопок: +, /, *, =, AC;
4. Кнопка подсчета операции
5. Теперь попробуем все эти области отобразить в коде:
====
<textarea id=result>0</textarea>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>0</button>
<button>+</button>
<button>-</button>
<button>*</button>
<button>/</button>
<button>=</button>
<button>C</button>
<button>#</button>
====
Немного громоздко. А если представить, что кнопок будет 200-300, то такой код будет просто лесом одиковых строк с минимальными различиями. Это выглядит не очень хорошо. Добавим для этого кода обёртку div и немного css
====
<div id="calc">
<textarea id=result>0</textarea>
<button>1</button>
...
</div>
====
Посмотреть вживую - здесь: https://jsfiddle.net/raman_shastapalau/hpvkos30/2/
Все равно, получается громоздко. Чтобы уменьшить количество кода, воспользуемся div-ами, в которые будем возвращать данные из массивов. И облагородим всё это с помощью css
====
<div id="wrap">
<div id="calc">
<textarea id="result">0</textarea>
<div id="numpad">
<div id="buttonNum"></div>
<div id="buttonOper"></div>
</div>
<div id="buttonCalc"></div>
</div>
</div>
====
Вот что получилось - каркас калькулятора. Пока еще без кнопок, ну разве что с макетом кнопки "="
https://jsfiddle.net/raman_shastapalau/hpvkos30/4/
В массивы мы положим все кнопки - цифры, функциональные и кнопку "="". Кнопки < button >1</ button > вообще можем убрать - их чуть ниже добавим с помощью JS
====
let buttons = ['7', '8', '9', '4', '5', '6', '1', '2', '3', '.', '0','AC'];
let operations = ['/', '*', '-', '+'];
let calculations = ['='];
====
И с помощью метода getElementById будем возвращать необходимые данные в документ со следующими id: buttonCalc и result
====
let textArea = document.getElementById( 'result' );
let calculation = document.getElementById( 'buttonCalc' );
====
Теперь, пройдемся по массиву buttons с помощью метода forEach и затем будем отрисовывать кнопки, оборачивая их в div, добавляя класс btn.
====
buttons.forEach(function (button) {
let buttonElement = document.createElement( 'div' );
buttonElement.className = 'btn';
buttonElement.innerHTML = button;
buttonNum.appendChild(buttonElement);
});
====
Далее пройдемся по массивам с функциональными кнопками и кнопке "="
====
operations.forEach(function (operation) {
let operationElement = document.createElement( 'div' );
operationElement.className = 'operation';
operationElement.innerHTML = operation;
buttonOper.appendChild(operationElement);
});
calculations.forEach(function (calculation) {
let calculationElement = document.createElement( 'div' );
calculationElement.className = 'calculation';
calculationElement.innerHTML = calculation;
buttonCalc.appendChild(calculationElement);
});
====
Вот что в итоге получилось - вывели данные из массива в div элементы: https://jsfiddle.net/raman_shastapalau/hpvkos30/5/
Кнопки правда не работают, но для этого нужно написать обработчик событий на нажание кнопки с помощью onButtonClick. Поскольку пишем калькулятор, то в нем возможно несколько нажатий функциональных кнопок. Поэтому пройдемся по вариантам нажатий кнопок с помощью else if
====
function onButtonClick(e) {
// e - MouseEvent (получает информацию о клике)
if (e.target.innerHTML === 'c' ) {
// При нажатии кнопки "с", стирается все из текстового поля
textArea.innerHTML = '0';
} else if (e.target.innerHTML === '=' ) {
// При нажатии кнопки "=", происходит вычисление значения с помощью eval
textArea.innerHTML = eval(textArea.innerHTML);
} else if (textArea.innerHTML === '0' ) {
// Если textarea содержит только "0", то стереть "0" и записать значения кнопки в текстовое поле
textArea.innerHTML = e.target.innerHTML;
} else {
// Добавление значения кнопки в текстовое поле
textArea.innerHTML += e.target.innerHTML;
}
}
====
#js #javascript #jsexamples
