Домашняя работа №4 - Prototype

[redexp]

Видео: https://youtu.be/GR6-NMe1Rew

Основаня задача:

Будем делать парсер CSV фотрмата. В этой задаче не будет работы с html, бот будет проверять только js файл

1. Копируем папку prototype себе в репозиторий
2. В index.js нужно создать конструктор Csv
3. В прототипе конструктора Csv должен быть метод parse который принимает один обязательный аргумент string и второй необязательный separator.
   • Стандарт CSV разрешает использовать один из трёх символов (запятая ,, точка с запятой ; и табуляция \t), для разделения ячеек в строке.
   • Бот будет создавать объект от вашего конструктора и вызывать метод parse с одним аргументом, который будет равен строке похожей как из ДЗ №3 #16 Каждый раз бот будет использовать один из трёх символов для разделения ячеек
   • Ваш метод parse должен определить, какой из трёх символов находится в одинаковом количестве в каждой строке и использовать его как разделитель для ячеек
   • Метод parse всегда должен возвращать правильный массив из строк и ячеек
   • Бот будет вызывать также метод parse с двумя аргументами: первый будет csv строка как обычно, а второй будет один из трёх символов для разделения ячеек. В таком случае метод parse просто должен использовать этот символ для разделения ячеек.
4. В прототипе конструктора Csv должен быть метод generate который принимает один обязательный аргумент array и второй необязательный separator.
   • Бот будет создавать объект от вашего конструктора и вызывать метод generate с одним аргументом, который будет равен массиву из строк и ячеек. Метод generate должен вернуть правильную CSV строку используя запятую как разделитель.
   • Бот будет вызывать также метод generate с двумя аргументами: первый всё также массив строк и ячеек, а второй - это один из трёх символов разделения ячеек. В таком случае метод generate просто должен использовать этот символ как разделитель для создания CSV строки

Усложнённое задание:

1. Создаёте конструктор CsvArray, который должен быть унаследован от Array
2. Метод parse работает так же как и в основном задании, но он не возвращает массив, а записывает каждую его строку ячеек в this с помощью метода push, типа вот так this.push(['a1', 'b1']);
3. Бот будет пробовать получить значение массива следующим образом

var table = new CsvArray();
table.parse("42,qwe,92\n12,asd,73");
console.log(table.length, table[0][0], table[1][2]);

должно вывести 2, 42, 73 3. Метод generate в свою очередь не принимает массив, а генерирует CSV строку из this

table[0][0] = 'zxc';
console.log(table.generate());
console.log(table.generate(';'));

должно вывести zxc,qwe,92\n12,asd,73, zxc;qwe;92\n12;asd;73

Дополнительное задание:

Добавить в CsvArray метод getCell который будет принимать строку в excel формате типа A1 или C23. И будет возвращать значение ячейки внутри массива this. Например table.getCell('C2') должно быть равно значению table[1][2]. Не забывайте что нумерация элементов массива в js начинается с 0 по этому строка 2 находится по индексу 1, а колнка 3 (буква С) по индексу 2

Проверка на соответствие стандартам оформления кода

Бот начнёт проверять эту и все остальные домашки на соответствие стандарту оформления кода. Стандартов существует несколько, часто большие компании описывают свои стандарты под себя. Один из хорошо описанных стандартов сделан компанией Airbnb - JavaScript Style Guide, по нём и будем ровняться.

[MaksymSu]

@redexp Сразу хочу извиниться за вопрос. Мне кажется, что у тех, кто имеет какой-то опыт в ООП с другими языками после последней лекции подкипает жбан от JS. Я воспринял лекцию про prototype хорошо т.к. мои скилы очень незначительны. Но люди, которые уже неплохо лабают например на С++ или Javа, наверно разбежались с курса после последней лекции. Скажите, кто-то из корифеев ООП возмущается и бросает JS во время освоения, или нет такого явления? P.S. Мне лично JS понравился после первой же домашки (Excel на веб странице это удивительно для меня)

[Daniel-developer5]

@redexp Щодо останнього пункту, я так розумію, необхідно підключити якийсь лінтер, який буде кидати ворнінги при недотриманні стандартів. Так?

[redexp]

@Daniel-developer5 достаточно прочитать статью по ссылке и придерживаться правилам.

[redexp]

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

[mAndrushchenko]

По поводу дополнительного задания. Метод getCell() может принимать только одну ячейку за раз или несколько, например: foo.getCell('A1') или foo.getCell('A1', 'A2')?

[redexp]

@mAndrushchenko только одну

[kononyukii]

Ваш метод parse должен определить, какой из трёх символов находится в одинаковом количестве в каждой строке и использовать его как разделитель для ячеек

То есть в строках будут все три допустимых разделителя присутствовать?

[redexp]

@kononyukii да, но только один из них будет в одинаковом количестве во всех строках

[nedopaka]

@redexp вопрос по доп. заданию: буквы в названии ячейки должны быть только в верхнем регистре?

[redexp]

@ANScorp бот будет передавать только в верхнем регистре

[RomanTaran]

table.getCell('C2') должно быть равно значению table[2][1]? Это правильно? Может правильно table.getCell('C2') должно быть равно значению table[1][2]?

[redexp]

@RomanTaran ты прав, сейчас исправлю

[Daniel-developer5]

@redexp а я что-то не допёр. A - 0, B - 1, C - 2? Почему C это 1?

[nedopaka]

@Daniel-developer5 в примере неправильный порядок индексов. Сначала идет номер строки, потом - колонки.

[redexp]

@Daniel-developer5 @ANScorp уже исправил

[nedopaka]

@redexp вопрос по Проверка на соответствие стандартам оформления кода мы все переводим на ecma-262? То есть отходим от употребления var, используем стрелочные ф-ции и тд?

[Daniel-developer5]

@redexp вопрос по Проверка на соответствие стандартам оформления кода мы все переводим на ecma-262? То есть отходим от употребления var, используем стрелочные ф-ции и тд?

@ANScorp в статті все написано)

[redexp]

@ANScorp я же написал, что используем стандарт описанный на репозитории Airbnb

[nedopaka]

@redexp если строка, которую мы передаем в getCell не соответсвует excel-формату, что ожидает получить на выходе бот?

[redexp]

@ANScorp undefined очевидно

[nedopaka]

@redexp я ж чего спросил про var - в примерах к описанию задания он фигурирует 😄

var table = new CsvArray();

[redexp]

Извините, на этой неделе был загружен, завтра утром будет первая проверка

[nedopaka]

@redexp подкинете еще какое-то доп. задание? 😄

[redexp]

table.addRowAt(0);
table.addColumnAt('A');
table.removeRowAt(0);
table.removeColumnAt('A');

[nedopaka]

@redexp а что должно быть после выполнения первой строчки?

table.addRowAt(0);

0 - это опечатка? в excel-формате нумерация же идет от 1

[andrewvitrenko]

@redexp в csv строки разделяются по Enter? я правильно все понял?

[Daniel-developer5]

@redexp в csv строки разделяются по Enter? я правильно все понял?

@AndriiVitrenko Правильніше сказати: по символу \n

[redexp]

@AndriiVitrenko правильно

[andrewvitrenko]

@redexp раз метод parse добавлен прототипу конструктора, то вызов будет Csv.prototype.parse(string, separator)?

[Daniel-developer5]

@AndriiVitrenko Ні, цей метод буде доступним у екземплярі конструктора Csv.

const csv = new Csv()
csv.parse(string, separator)

[andrewvitrenko]

тобто Csv повертає об'єкт із методом parse?

[Daniel-developer5]

@AndriiVitrenko в нашому випадку Csv взагалі повертає об'єкт без полів. Він повертає об'єкт в прототипі якого зберігається Csv.prototype

[Daniel-developer5]

const csv = new Csv()
csv.hasOwnProperty('parse')    // false
csv.__proto__.hasOwnProperty('parse')    // true

[redexp]

• 50 репозиториев
• Пустых репозиториев: 25
• Основная задача: 2
• Усложнённая задача: 0
• Дополнительная задача: 6

[andrewvitrenko]

@Daniel-developer5 ми ж коли створюємо змінну csv = new Csv() у нас Csv не стає прототипом для змінної csv. як тоді передавати функцію parse?

[Daniel-developer5]

@Daniel-developer5 ми ж коли створюємо змінну csv = new Csv() у нас Csv не стає прототипом для змінної csv. як тоді передавати функцію parse?

@AndriiVitrenko Стає, взагаліто-то

[andrewvitrenko]

@Daniel-developer5 ми ж коли створюємо змінну csv = new Csv() у нас Csv не стає прототипом для змінної csv. як тоді передавати функцію parse?

@AndriiVitrenko Стає, взагаліто-то

ми можемо побачити, що csv.proto буде конструктором, який ми написали. але якщо виводити csv.prototype, то виведе undefined

[Daniel-developer5]

@Daniel-developer5 ми ж коли створюємо змінну csv = new Csv() у нас Csv не стає прототипом для змінної csv. як тоді передавати функцію parse?

@AndriiVitrenko Стає, взагаліто-то

ми можемо побачити, що csv.proto буде конструктором, який ми написали. але якщо виводити csv.prototype, то виведе undefined

function Foo() {}
Foo.prototype.bar = () => 'fn in prototype'

const foo = new Foo()

console.log( foo.bar() )    // 'fn in prototype'

[andrewvitrenko]

тоді функцію parse просто вказати в самому конструкторі як this.prototype.parse ?

[Daniel-developer5]

тоді функцію parse просто вказати в самому конструкторі як this.prototype.parse ?

https://learn.javascript.ru/function-prototype

Якщо зробиш так, то просто отримаєш такий об'єкт

{
    prototype: {
        parse: () => 'parse action'
    }
}

[andrewvitrenko]

@Daniel-developer5 дякс

[redexp]

• 50 репозиториев
• Пустых репозиториев: 18
• Основная задача: 7
• Усложнённая задача: 2
• Дополнительная задача: 6

[Daniel-developer5]

@redexp А лейбл done буде після повної відповідності стандартам Airbnb?

[redexp]

@Daniel-developer5 будет

[redexp]

в боте похоже ошибка, он использует ; как разделитель по умолчанию. Исправлю на ,

[redexp]

Я не понимаю, откуда вы все взяли, что методы в прототип нужно добавлять внутри конструктора?!?!

Добавлять нужно вот так

// правильно
function Something() {
  //....
}

Something.prototype.method = function () {
  // ....
};

а вы все поголовно делаете вот так

// неправильно
function Something() {
  Something.prototype.method = function () {
    // ....
  };
}

Второй вариант неправильный потому, что при каждом создании объекта от конструктора new Something() вы будете перезаписывать Something.prototype.method

[andrewvitrenko]

понятно. спасибо

[redexp]

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

[AndreyKondakov]

он использует ; как разделитель по умолчанию. Исправлю на ,

Да, в задании Метод generate должен вернуть правильную CSV строку используя запятую как разделитель.

@redexp Cегодня будет повторно проверяться задание?

[redexp]

@AndreyKondakov нет

[andrewvitrenko]

@redexp придерживание стандартов это обязательное условие для сдачи домашки? Или засчитано будет и без этого?

[redexp]

@AndriiVitrenko во всех домашках только основное задание является необхоимым для прохода дальше. Стремитесь минимизировать количество ошибок в проверке кода

[redexp]

• 51 репозиториев
• Пустых репозиториев: 15
• Основная задача: 16
• Усложнённая задача: 9
• Дополнительная задача: 6

[oleksandr2004lataniuk]

Чи може парситись текст, що має декілька NewLine знаків? Бо мені не дозволяє консоль вставляти багатолінійний стрінг. Чи треба спочатку розпарсити на лінії, а потім всередині масиву ліній розпарсити по Сепаратору?

[andrewvitrenko]

@oleksandr2004lataniuk сначала текст разбиваешь на лини. А потом каждую линию по сепаратору

[oleksandr2004lataniuk]

А яким чином тоді буде вставлятись багатолінійний текст в перший параметр parse?

Чи бот буде створювати окрему змінну з цим текстом? А потім підставляти її в метод parse?

[Daniel-developer5]

А яким чином тоді буде вставлятись багатолінійний текст в перший параметр parse?

Як це яким чином?) А яким чином ви зазвичай його вставляєте?)

[Daniel-developer5]

А яким чином тоді буде вставлятись багатолінійний текст в перший параметр parse?

Чи бот буде створювати окрему змінну з цим текстом? А потім підставляти її в метод parse?

@oleksandr2004lataniuk А, сорі, бачу трохи виправили. Але ж все одно, яка різниця, як бот вставляє текст? Чи змінною, чи безпосередньо рядком - результат однаковий.

[oleksandr2004lataniuk]

Добре, тоді дякую. Піду трохи дописати ))

[Daniel-developer5]

https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Template_literals

Ось ще гляньте, я зрозумів в чому пробема)

[andrewvitrenko]

может кто-то объяснить ошибку кодстайла Expected linebreaks to be 'LF' but found 'CRLF' ?

[redexp]

LF это символ \n а CR это символ \r. В винде принято все строки заканчивать символами \r\n, но среди программистов принято использовать только символ \n. В WebStorm есть справа снизу переключатель как заканчивать строки. Если вы пользуетесь другим редактором, то ищите как в нём переключить.

[andrewvitrenko]

@redexp переключил. а есть возможность сделать так чтобы весь уже написаный код перевелся на новые правила?

[redexp]

если это веб шторм, то он поменяет в теории все символы, если вы не уверены, то можете попробовать найти и заменить Ctrl + R ищите регуляркой \r\n заменяйте на \n

[andrewvitrenko]

@redexp понял спасибо

[nedopaka]

@redexp похоже с ботом проблемы. сегодня он выдал следующее

• Прототип конструктора CsvArray должен содержать метод getCell

но это противоречит заданию. все предыдущие проверки прошли успешно. задача звучит следующим образом

Добавить в CsvArray метод getCell который будет принимать строку в excel формате типа A1 или C23.

Вопрос: при чем тут прототип и почему бот проверяет то, чего нет в задании?

[andrewvoinarovskyi]

Вопрос: при чем тут прототип и почему бот проверяет то, чего нет в задании?

Прочитай тут, думаю це дещо зможе пояснити https://developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/Object_prototypes

[Daniel-developer5]

@ANScorp Якщо завдання невиконано, значить щось не так. Очевидно, що ви не додали getCell in CsvArray.prototype, або додали його в тілі конструктора CsvArray

[redexp]

• 51 репозиториев
• Пустых репозиториев: 9
• Основная задача: 23
• Усложнённая задача: 13
• Дополнительная задача: 14

[redexp]

Завтра в 8 утра будет ещё одно видео о Webpack и React

[redexp]

• 45 репозиториев
• Пустых репозиториев: 9
• Основная задача: 23
• Усложнённая задача: 15
• Дополнительная задача: 12

[redexp]

• 51 репозиториев
• Пустых репозиториев: 6
• Основная задача: 37
• Усложнённая задача: 23
• Дополнительная задача: 20

[redexp]

• 50 репозиториев
• Пустых репозиториев: 5
• Основная задача: 39
• Усложнённая задача: 23
• Дополнительная задача: 20