Обо мне
Привет! Меня зовут Семеон Бобошко. Я — дизайнер интерфейсов.

Этот канал я посвятил своему обучению интерактивному прототипированию в рамках кода.

Инструменты
Перед тем как продолжить, предлагаю ознакомиться с инструментами, которые я планирую использовать и изучать:

JavaScript — популярный язык программирования.

CoffeeScript — препроцессор JavaScript. Иными словами, добавляет синтаксический сахар в JavaScript-код и делает его более читаемым для простого человека.

Framer.js — бесплатная JavaScript-библиотека для создания интерактивных прототипов.

Цели
Основная цель — освоить Framer.js к которой я буду плавно двигаться через изучение JavaScript и CoffeeScript.

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

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

Возможно даже, что некоторые моменты будут интересны верстальщикам, которые хотят изучить JavaScript, но до сих пор этого не сделали. Но ничего обещать не могу.

Мой уровень знаний
Мой уровень знания кода нельзя назвать совсем нулевым, но он очень далёк от идеала. Несколько месяцев назад я прошёл короткий курс JavaScript from Framer, который вёл Антон Карташов — основатель сообщества Learn Framer. В общем-то, именно с этого курса и началась моя тяга к новым знаниям.

Послесловие
Я не стремлюсь популяризировать свой канал, но мне будет приятно, если людям будет интересен мой опыт и я буду получать фидбек. Также, я открыт к общению и замечаниям в адекватной форме.

Где писать код?
Чтобы писать код, нужен редактор кода. Всё логично. 😄 Сейчас я расскажу про редакторы, с которыми меня познакомили ребята из Learn Framer.

Framer Studio — основной инструмент для прототипирования. Заточен исключительно на работу с библиотекой Framer.js. Framer Studio в реальном времени отображает все изменения в коде на прототипе. Несомненным плюсом является наличие визуального редактора и бесплатного доступа к сервису — Framer Cloud, где можно публиковать собственные прототипы.

Framer Studio скорее является IDE (Integrated Development Environment), чем простым редактором кода.

Стоимость: $ 15 в месяц
Платформа: macOS

Atom — редактор кода. Я использую его для написания кода на JavaScript и иногда для работы с Framer.js. О том, как работать с Framer.js в Atom — уже писал Антон Карташов. Советую ознакомиться с его постом.

Дополнительно я подключил Atom Runner — бесплатный плагин для Atom, который устанавливается в разделе Packages (File → Preferences → Packages). Он необходим для того, чтобы исполнять (то есть запускать) код прямо в Atom. Стоит обратить внимание на то, что плагин не работает без установленного Node.js.

Стоимость: бесплатно
Платформа: macOS, Windows, Linux и FreeBSD

Со вступительными постами покончено! Ну, почти! Теперь можно начать смешно (с точки зрения опытных разработчиков) рассуждать про код.

Представим, что каким-то магическим образом у меня появилась фраза «сТавьТЕ ЛайКИ, поДпиСывайтЕсь на кАНАЛ». Выглядит это очень странно и неопрятно. С помощью JavaScript, я могу превратить её в обычную, удобочитаемую фразу «Ставьте лайки, подписывайтесь на канал» и вывести результат в консоль.

Для этого нужно:
toLowerCase(); — функция, которая делает все буквы строчными;

toUpperCase(); — функция, которая делает все буквы прописными;

slice(); — функция, которая делает «срез» символов по порядковому номеру;

console.log(); — функция, которая выводит результат в консоль.

var text = "сТавьТЕ ЛайКИ, поДпиСывайтЕсь на кАНАЛ";
var lowerCase = text.toLowerCase();
//lowerCase[0] — запрос нужного символа по порядковому номеру (где 0 — это 1, а 1 — это 2 и так далее)
var first = lowerCase[0];
var upperCase = first.toUpperCase();
//lowerCase.slice(1) — происходит «срез» символов, начиная со второго и до конца фразы
var sliceText = lowerCase.slice(1);
console.log(upperCase + sliceText);

Получается слишком громоздкий код. У этой задачи есть более простое решение. Оказывается, все операции по изменению регистра можно произвести прямо в функции console.log();. Выглядит это так:

var text = "сТавьТЕ ЛайКИ, поДпиСывайтЕсь на кАНАЛ";
console.log(text[0].toUpperCase() + text.slice(1).toLowerCase());

Я тут прочитал главу про сравнения и немного запутался в операторах. Но всё же, у меня получилось решить задачку про кинотеатр. Звучала она так: если посетителю 12 лет или больше, он может проходить. Если ему ещё не исполнилось 12, но его сопровождает взрослый, пусть тоже проходит. Во всех остальных случаях вход запрещён.

Моё решение выглядит так:

var age = 15;
var accompanied = false;
var entrance = age + accompanied;
var ageCheck = 12;
var accompaniedCheck = true;
var entranceCheck = ageCheck + accompaniedCheck;
console.log(entrance >= entranceCheck);

Ещё немного и смогу решать задачки от нашего Android-разработчика. Привет, Саша!

Наш iOS-разрабочик Миша подсказал мне, что у моей задачки есть более короткое решение:

var ageCheck = 12;

var age = 15, accompanied = false;

var accessGranted = accompanied || age >= ageCheck;
console.log(accessGranted);

Спасибо за обратную связь, Миша! 🎉

Мне сделали важное замечание на счёт «строчных» и «прописных». Оказывается, разработчики говорят «верхний регистр» и «нижний регистр». 😅

Добрался до массивов. Я уже с ними встречался на курсе Антона Карташова. Даже знаю, что они бывают многомерными (это когда в массиве может быть массив с массивами).

Сегодня я осознал, что с точки зрения дизайнера, массивы — это группа объектов. Скажем, как в каком-нибудь условном Illustrator. Вообще, я стараюсь весь код воспринимать с визуальной точки зрения. Иногда, это помогает. Но чаще нет. 😂

Значения хранящиеся в массиве называются элементами. Пример:

var arrayTest = [
  "Текст",
  1,
  "Ещё текст"
];
console.log(arrayTest);

Всё, что находится в [] — это элементы.

Можно создать пустой массив и с помощью метода push(); — складывать в него элементы в конец массива. А метод unshift(); — складывает элементы в начало массива.

var cats = [];
cats.push("Котейка 1");
cats.push("Котейка 2");
cats.unshift("Котейка 3");
console.log(cats);

С помощью метода length(); можно без проблем узнать число находящихся в нём элементов.

var cats = [];
cats.push("Котейка 1");
cats.push("Котейка 2");
cats.unshift("Котейка 3");
console.log(cats.length);

А чтобы вывести последний элемент из массива, то можно написать так:

var cats = [];
cats.push("Котейка 1");
cats.push("Котейка 2");
cats.unshift("Котейка 3");
console.log(cats[cats.length - 1]);

Консоль покажет Котейка 2, потому, что Котейка 3 был отправлен в начало массива. В строке console.log(cats[cats.length - 1]); я обратился к массиву по его длине, сказал, чтобы JavaScript вычел из него один индекс и показал результат. А теперь по порядку.

Индекс — это порядковый номер элемента в массиве. Последний индекс массива всегда на единицу меньше длины массива.

А вот «костыль», который я придумал, чтобы узнать первый индекс массива: console.log(cats[cats.length - cats.length + 1]);.

Если я знаю точное количество элементов в массиве, то я легко могу обращаться к каждому из них:

var cats = [
"Котейка 1",
"Котейка 2",
];
console.log(cats[0]);

С вложенными чуть сложнее:

var cats = [
"Котейка 1",
["Чёрный", "Белый", "Цветной"],
"Котейка 2",
];
console.log(cats[1][2]);

На этом пока всё. Я продолжу изучать массивы и в скором времени напишу о том, что нового узнал.

В общем, с «костылём» я что-то перемудрил. Правильнее и проще будет так:

var cats = [];
cats.push("Котейка 1");
cats.push("Котейка 2");
cats.unshift("Котейка 3");
console.log(cats[0]);

Наш Android-разработчик Саша любит надо мной издеваться. Он мне задал задачку с подвохом, которая звучит примерно так: в произвольной строке необходимо найти количество символов начиная со 2-го по предпоследний.

Вот моё решение:

var text = "Супер длинная строчка для Саши";
console.log(text.slice(1,-1).length);
//result 28

Но Саша же мне сразу возразил и сказал, что «я ему втираю каку-то дичь». И потом, он мне объяснил, что задача на логику. Дело в том, что в данном случае необязательно брать символы с конкретных позиций и проще всего будет отнять от общей длины нужное число. Решение, записаное со слов Саши:

var text = "Супер длинная строчка для Саши";
console.log(text.length - 2);
//result 28

Через боль, унижения и страдания я знакомлюсь с методами упрощения кода. Поздравляю с очередной победой технобогов над гуманитариями.

Массивы. Часть 2

pop(); — возвращает и удаляет из массива последний элемент.
shift(); — возвращает и удаляет из массива первый элемент.

Для примера, я удаляю из массива Котейка 4, записываю его в переменную и затем снова добавляю в начало массива:

var cats = [
 "Котейка 1",
 "Котейка 2",
 "Котейка 3",
 "Котейка 4"
];
var lastCat = cats.pop();
cats.unshift(lastCat);
console.log(cats);
//result Котейка 4, Котейка 1, Котейка 2, Котейка 3

cats.pop(); — можно не записывать в переменную и тогда метод pop(); просто удалит элемент из массива (если я правильно понял).

Тот же код, но теперь берётся первый элемент, записывается в переменную и добавляется в конец массива:

var cats = [
 "Котейка 1",
 "Котейка 2",
 "Котейка 3",
 "Котейка 4"
];
var lastCat = cats.shift();
cats.push(lastCat);
console.log(cats);
//result Котейка 2, Котейка 3, Котейка 4, Котейка 1

Объединение массивов

Объединяет массивы метод concat();. На практике это выглядит так:

var cats = ["Котейка 1", "Котёйка 2", "Котейка 3"];
var dogs = ["Пёсик 1", "Пёсик 2", "Пёсик 3"];
var castAndDogs = cats.concat(dogs);
console.log(castAndDogs);
//result Котейка 1, Котейка 2, Котейка 3, Пёсик 1, Пёсик 2, Пёсик 3

Примечательно, что хоть concat(); и возвращает массив с элементами двух других, но с самими массивами ничего не происходит.

С помощью concat(); можно объединить больше, чем два массива:

var cats = ["Котейка 1", "Котёйка 2", "Котейка 3"];
var dogs = ["Пёсик 1", "Пёсик 2", "Пёсик 3"];
var foxs = ["Лисичка 1", "Лисичка 2", "Лисичка 3"];
var allAnimals= cats.concat(dogs, foxs);
console.log(allAnimals);
//result Котейка 1, Котейка 2, Котейка 3, Пёсик 1, Пёсик 2, Пёсик 3, Лисичка 1, Лисичка 2, Лисичка 3

Про массивы ещё не всё. 😅

Извините, не foxs, а конечно же foxes. Спасибо за то, что оперативно заметили ошибку! 🔥

Массивы. Часть 3

Индексы
Чтобы узнать индекс элемента, можно воспользоваться методом indexOf();:

var test = ["index01", "index02", "index03"];
console.log(test.indexOf("index01"));
//result 0

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

var test = ["index01", "index02", "index03"];
console.log(test[0]);
//result index01

Если с помощью indexOf(); запросить элемент, которого нет в массиве, то JavaScript вернёт -1.

И ещё одна интересная особенность заключается в том, что если в массиве несколько одинаковых элементов, то JavaScript вернёт тот индекс, который ближе к началу массива.

Преобразование массива в строку
Метод join(); — преобразовывает массив в строку и позволяет назначить разделители между элементами. Выглядит это так:

var myAnimals = ["Котик", "Пёсик"];
console.log(myAnimals.join(" и "));
//result Котик и Пёсик

Массивы и случайность
JavaScript умеет генерировать случайные числа с помощью метода Math.random(); (от 0 до 0,9). Метод Math.floor(); в связке с методом Math.random(); — округляет случайное число. Но проблема в том, что в данном случае Math.floor(); всегда будет округлять до нуля. Проблема решается с помощью добавления множителя:

var randomTransformers = Math.floor(Math.random() * 11);
console.log(randomTransformers);
//result ???

Таким образом, я получаю случайное число от 0 до 10, каждый раз, когда исполняю код.

И вот тут начинается самое интересное. Это случайное число можно использовать для запроса индекса элемента из массива:

var transformers = ["Bumblebee", "Optimus Prime", "Jazz", "Jetfire"];
var randomTransformers = Math.floor(Math.random() * 4);
console.log(transformers[randomTransformers]);
//result ???

Как всегда, код можно сократить избавившись от переменной

var transformers = ["Bumblebee", "Optimus Prime", "Jazz", "Jetfire"];
console.log(transformers[Math.floor(Math.random() * 4)]);
//result ???

Кстати, если количество элементов в массиве изменится, то нужно будет менять и множитель в этой строке console.log(transformers[Math.floor(Math.random() * 4)]);. А это уже неудобно. Чтобы избежать подобных проблем, достаточно заменить множитель на длину массива:

var transformers = ["Bumblebee", "Optimus Prime", "Jazz", "Jetfire"];
console.log(transformers[Math.floor(Math.random() * transformers.length)]);

Ну, и чтобы закрепить результат:

var transformers = ["Bumblebee", "Optimus Prime", "Jazz", "Jetfire"];
var winningOrNot = ["победит", "не победит"];
var randomTransformers = transformers[Math.floor(Math.random() * transformers.length)];
var randomWinningOrNot = winningOrNot[Math.floor(Math.random() * winningOrNot.length)];
var randomPhrase = [randomTransformers, randomWinningOrNot + " всех десептиконов!"].join(" ");
console.log(randomPhrase);
//result ???

С массивами вроде бы всё. По крайней мере на какое-то время.

Я заметил, что посты с кодом получаются очень длинные. В связи с этим у меня вопрос к читателям: стоит ли мне постить чаще, но меньше?

#ЗадачиОтСаши

Помните Android-разработчика Сашу, который любит надо мной издеваться? Так вот, мы открываем с ним относительно регулярную рубрику #ЗадачиОтСаши. Всё просто: Саша придумывает задачу, а я её решаю (почти добровольно).

Первая задача (на самом деле вторая) от Саши звучит так: есть массив, содержащий 5 элементов, каждый из которых является произвольной строкой. Необходимо составить строку, которая будет состоять из 5-ти первых символов каждой строки, разделенных символом +. На выходе должно получиться text1 + text2 + text3 + text4 + text5.

Решение
У задачи я вижу два решения: через метод join(); и через оператор +.

Через метод join();:
var testArray = ["text1test","text2test","text3test","text4test","text5test"];
console.log([testArray[0].slice(0,5),testArray[1].slice(0,5),testArray[2].slice(0,5),testArray[3].slice(0,5),testArray[4].slice(0,5)].join(" + "));
//result text1 + text2 + text3 + text4 + text5

Через оператор +:
var testArray = ["text1test","text2test","text3test","text4test","text5test"];
console.log(testArray[0].slice(0,5) + " + " + testArray[1].slice(0,5) + " + " + testArray[2].slice(0,5) + " + " + testArray[3].slice(0,5) + " + " + testArray[4].slice(0,5));
//result text1 + text2 + text3 + text4 + text5

У меня есть подозрение, что код можно существенно упростить. Пожалуйста, напишите мне, если знаете, как сделать код короче. Я опубликую ваше решение здесь.

#ЗадачиОтСаши

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

Первый вариант мне прислал анонимный подписчик:

 testArray = ["text1test","text2test","text3test","text4test","text5test"];

const subStrLength = 5;

const joinSymbol = " + ";

const result = [testArray[0].substr(0, subStrLength),

    testArray[1].substr(0, subStrLength),

    testArray[2].substr(0, subStrLength),

    testArray[3].substr(0, subStrLength),

    testArray[4].substr(0, subStrLength)].join(joinSymbol)

console.log(result);

//result text1 + text2 + text3 + text4 + text5

Второй вариант пришёл от Вадима Репина:

testArray = ["text1test","text2test","text3test","text4test","text5test"];

console.log((testArray.reduce((acc, val)=> acc + val.slice(0,5) + ' + ', '')).slice(0,-3));

//result text1 + text2 + text3 + text4 + text5

Хороший код! Комментировать его, я конечно не стану (так как я его не до конца понимаю). 😅 Но всем большое спасибо за помощь! Я обязательно разберусь с присланным кодом детально.

#ЗадачиОтСаши

И ещё одно короткое решние от Александра Мансурова, которое пришло только что:

 testArray = ["text1test","text2test","text3test","text4test","text5test"];

const result = testArray.map(el => el.slice(0, 5)).join(' + ');

console.log(result);

//result text1 + text2 + text3 + text4 + text5

Пожалуй, трёх решений хватит. Всем большое спасибо за отклик! 🔥

Объекты — это как массивы, только объекты. Доступ к объектам осуществляется через строки, а не через числа как в массиве. В объекте всегда хранится пара ключ-значение. Пример простого объекта:

var cat = {
 name: "Чехов",
 age: 3.5,
 color: "Чёрный"
};
console.log(cat);
//result name: 'Чехов', age: 3.5, color: 'Чёрный'

Во-первых, при создании объекта используются фигурные скобки {}. Во-вторых, name: "Чехов" — пара ключ-значение. В-третьих, name: 'Чехов', age: 3.5, color: 'Чёрный' — это литералы объекта. Если я правильно понял, литерал объекта — это когда значения известны заранее и записываются сразу, а не постепенно (поправьте меня пожалуйста, если я не прав).

В объект можно складывать пары ключ-значение, например, через точечную нотацию (принцип похож на push();):

var cat = {}
cat.name = "Чехов";
cat.age = 3.5;
cat.color = "Чёрный";
console.log(cat);
//result name: 'Чехов', age: 3.5, color: 'Чёрный'

Метод Object.keys(); — возвращает массив со всеми ключами объекта. Пример:

var cat = {}
cat.name = "Чехов";
cat.age = 3.5;
cat.color = "Чёрный";
console.log(Object.keys(cat));
//result 'name', 'age', 'color'

Примечательно, что объект может содержать объект, который содержит массив, который содержит объект. Например:

var cat = {
 "Котик": {
   name: "Чехов",
   age: 3.5,
   color: "Чёрный",
   parents: ["Сейлем", "Мотя", {familyTree: "ok"}]
 }
};

console.log(cat["Котик"].parents[0]);
//result Сейлем

Переменная cat из предыдущего поста. Знайте, если я где-то использую эту переменную, то речь скорее всего идёт об этом парне.

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

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

Условия (условные конструкции) — это такая штука, которая позволяет создавать условия, как ни странно. 😄 Пример: если на улице -30°, то купаться нельзя.

У условий в JavaScript есть два вида конструкций: if и if...else. if — это true, а else — это false. Пример простого условия с использованием if:

var lastName = "Бобошко";
console.log("Привет, " + lastName + "!");
if (lastName.length > 10) {
 console.log("У тебя длинная фамилия! Тяжело запомнить!");
}
//result Привет, Бобошко!

if (lastName.length > 10) — это условие, а console.log("У тебя длинная фамилия! Тяжело запомнить!") — тело условия.

Тот же самый пример, только с использованием if...else:

var lastName = "Бобошко";
console.log("Привет, " + lastName + "!");
if (lastName.length > 10) {
 console.log("У тебя длинная фамилия! Тяжело запомнить!");
} else {
 console.log("Фамилия у тебя не очень-то длинная!");
}
//result
Привет, Бобошко!
Фамилия у тебя не очень-то длинная!

Этот код помогает мне определиться с тем, кого взять с собой на прогулку:

var cat = false;
var dog = true;

if (cat) {
 console.log("Круто! Беру с собой на прогулку котика");
} else if (dog) {
 console.log("Ладно! Пёсик на прогулке — тоже неплохо!");
} else {
 console.log("Пусть идут они оба к чёрту! Я пойду один гулять!");
}
//result Ладно! Пёсик на прогулке — тоже неплохо!

Во-первых, здесь использованы множественные условия. Во-вторых, будет выполнено первое тело, которое соответствует true.

Наконец-то пошла жара! 🔥