Tutu.ru
Al resolver la tarea, no se puede usar frameworks y componentes listos. Nos interesa ver cómo puedes resolver tareas similares y crear algo desde cero.
Tareas de Fizz-buzz
Tarea №1
Escribir una función dscount
que cuente la cantidad de veces que los caracteres s1
y s2
aparecen consecutivamente en la cadena, sin considerar mayúsculas y minúsculas. La función debe pasar al menos las siguientes pruebas:
"use strict";
// Yor code here ...
// Tu código de implementación de la función dscount
// ... //
// Para mayor comodidad, puedes usar estas pruebas:
try {
test(dscount, ['ab___ab__', 'a', 'b'], 2);
test(dscount, ['___cd____', 'c', 'd'], 1);
test(dscount, ['de_______', 'd', 'e'], 1);
test(dscount, ['12_12__12', '1', '2'], 3);
test(dscount, ['_ba______', 'a', 'b'], 0);
test(dscount, ['_a__b____', 'a', 'b'], 0);
test(dscount, ['-ab-аb-ab', 'a', 'b'], 2);
test(dscount, ['aAa', 'a', 'a'], 2);
console.info("¡Congratulations! All tests passed.");
} catch(e) {
console.error(e);
}
// Función simple de prueba
function test(call, args, count, n) {
let r = (call.apply(n, args) === count);
console.assert(r, `Found items count: ${count}`);
if (!r) throw "¡Test failed!";
}
- El código dado es un ejemplo y no es obligatorio usarlo tal cual. Se pueden hacer modificaciones.
- Presta atención al rendimiento de tu solución. La solución debe ser compacta.
- La solución debe ser simple, caber en un solo archivo y contener no más de 20 líneas de código.
- El tiempo ideal para resolver la tarea es de no más de 15 minutos (la tarea se puede resolver en 5 minutos).
Tarea №2
Implementar una función checkSyntax(string)
que verifique la corrección sintáctica de la secuencia de paréntesis. La tarea no se reduce a una simple verificación del balance de paréntesis. También se debe tener en cuenta su secuencia (anidación).
- Presta atención al rendimiento de tu solución.
- La solución debe ser compacta.
- La solución debe ser simple, caber en un solo archivo y contener de 20 a 30 líneas de código o menos.
- El tiempo ideal para resolver la tarea es de no más de 30 minutos (la tarea se puede resolver en 10 minutos).
Muestra la solución si es necesario verificar el siguiente conjunto de paréntesis: <,[,{,(
¿Cambiaría tu solución si solo necesitas verificar este conjunto de paréntesis: <,[,{
-
En caso de error, devuelve 1.
-
En todos los demás casos, devuelve 0.
Pruebas para el primer conjunto:
checkSyntax("---(++++)----") == 0
checkSyntax("") -> 0
checkSyntax("before ( middle []) after ") == 0
checkSyntax(") (") == 1
checkSyntax("} {") == 1
checkSyntax("<( >)") == 1
checkSyntax("( [ <> () ] <> )") == 0
checkSyntax(" ( [)") == 1
// y etc...
Algoritmos
Tarea №1
- Hay 2 sartenes para panqueques, cada una de las cuales puede contener exactamente 1 panqueque a la vez.
- Hay 3 panqueques que necesitan ser cocinados.
- Una cara del panqueque se cocina en 1 minuto.
- Los panqueques deben ser cocinados por ambos lados.
Se considera una iteración el proceso de cocinar un lado de 2 panqueques en 2 sartenes. ¿Cuánto tiempo (iteraciones) se necesita para cocinar 3 panqueques con una distribución óptima?
Implemente su algoritmo en forma de código.
Puede ser código orientado a objetos, funcional o incluso procedimental. Justifica tu elección del enfoque.
Describe necesariamente el algoritmo, cómo resolvería esta tarea en el mundo físico (en qué momento y cómo cocinaría estos panqueques).
Refactorización
Tareas para trabajar con código ajeno.
Tarea №1
Mira el código:
¿Qué se puede mejorar? ¿Cómo lo reescribirías?
function func(s, a, b) { if (s.match(/^$/)) { return -1; } var i = s.length -1; var aIndex = -1; var bIndex = -1; while ((aIndex == -1) && (bIndex == -1) && (i > 0)) { if (s.substring(i, i +1) == a) { aIndex = i; } if (s.substring(i, i +1) == b) { bIndex = i; } i = i - 1; } if (aIndex != -1) { if (bIndex == -1) { return aIndex; } else { return Math.max(aIndex, bIndex); } } if (bIndex != -1) { return bIndex; } else { return -1; } }
Tarea №2
function drawRating(vote) {
if (vote >= 0 && vote <= 20) {
return '★☆☆☆☆';
}
else if (vote > 20 && vote <= 40) {
return '★★☆☆☆';
}
else if (vote > 40 && vote <= 60) {
return '★★★☆☆';
}
else if (vote > 60 && vote <= 80) {
return '★★★★☆';
}
else if (vote > 80 && vote <= 100) {
return '★★★★★';
}
}
// Verificación del resultado del trabajo
console.log(drawRating(0) ); // ★☆☆☆☆
console.log(drawRating(1) ); // ★☆☆☆☆
console.log(drawRating(50)); // ★★★☆☆
console.log(drawRating(99)); // ★★★★★
¿Qué se puede mejorar? ¿Cómo reescribirías la función drawRating
suponiendo que la función drawRating
recibe una variable vote
, que contiene un valor de 0 a 100? Nos interesa específicamente la lógica de implementación de la función, no la representación visual de las estrellas.
Практические задачи
Задача №1
Реализуйте функцию parseUrl(string)
, которая будет парсить URL строку и возвращать объект с распарсенными данными. Пример:
let a = parseUrl('http://tutu.ru:8080/do/any.php?a=1&b[]=a&b[]=b#foo') // Вернет объект, в котором будут следующие свойства: console.log( a.href == "http://tutu.ru:8080/do/any.php?a=1&b[]=a&b[]=b#foo" ) console.log( a.hash == "#foo" ) console.log( a.port == "8080" ) console.log( a.host == "tutu.ru:8080" ) console.log( a.protocol == "http:" ) console.log( a.hostname == "tutu.ru" ) console.log( a.pathname == "/do/any.php" ) console.log( a.origin == "http://tutu.ru:8080" )
Желательно задачу решить как можно меньшим числом строк кода и затратив на реализацию минимум времени. Подсказка: JS-ninja может решить эту задачу за 1 минуту и написать 1 строчку кода. Дерзайте =)
Задача №2
Необходимо разработать javascript-компонент для сортировки таблиц с данными.
Функционал
-
Сортировка по столбцам: при нажатии на название столбца строки таблицы сортируются по возрастанию, при повторном клике - по убыванию. Графическим элементом или текстовым сообщением указывается направление сортировки.
-
Клиентская пагинация: данные необходимо отображать постранично, максимум 50 элементов на страницу. Необходимо предоставить пользовательскую навигацию для перехода по страницам.
-
Фильтрация: компонент предоставляет текстовое поле, в которое пользователь может ввести текст и строки таблицы, данные которых не содержат подстроку, введённую пользователем, скрываются. Перефильтрация осуществляется по нажатию на кнопку Найти.
-
По клике на строку таблицы значения полей выводятся в дополнительном блоке под таблицей.
-
Данные в таблицу загружаются с сервера. Способ загрузки с сервера на ваш выбор.
Для демонстрации работы компонента необходимо сделать простую HTML страницу. Пользователю предлагается выбрать набор данных: маленький или большой. При выборе набора данных он загружается с сервера и по данным строится таблица.
Формат данных от сервера
Сервер возвращает JSON-массив данных. Пример данных:
[ { id: 101, firstName: "Sue", lastName: "Corson", email: "DWhalley@in.gov", phone: "(612)211-6296", adress: { streetAddress: "9792 Mattis Ct", city: "Waukesha", state: "WI", zip: "22178" }, description: "et lacus magna dolor..." } }
Маленький объем данных берется по ссылке http://www.filltext.com/?rows=32&id={number|1000}&firstName={firstName}&lastName={lastName}&email={email}&phone={phone|(xxx)xxx-xx-xx}&adress={addressObject}&description={lorem|32}
Большой объем данных берется по ссылке http://www.filltext.com/?rows=1000&id={number|1000}&firstName={firstName}&delay=3&lastName={lastName}&email={email}&phone={phone|(xxx)xxx-xx-xx}&adress={addressObject}&description={lorem|32}
Замечания
-
Особое внимание следует уделить скорости работы. Зависание интерфейса при выполнении операций загрузки данных, фильтрации, сортировки недопустимо.
-
Во время загрузки данных стоит показать какой-то индикатор
-
Разрешённые библиотеки: jQuery, Lodash/Underscore, Backbone, самописный. Но вам придется объяснить выбор и причину использования. Использование сторонних библиотек будет плюсом только в случае если это оправданно и вы сможете объяснить причину выбора. Показав свои знания в грамотном применении сторонних готовых решений, вы имеете шанс повысить свою профессиональную привлекательность для нас.
-
Пишите код так, как бы вы его писали в работе - внутренности задания будут оцениваться даже тщательней, чем внешнее соответствие заданию. Код должен быть организован так, чтобы его можно было заново использовать.
-
Помните про обработку ошибок!
-
Верстка может быть самая простая. Визуализацию и украшение делаете на ваш вкус. Мы не против использования http://getbootstrap.com/ или похожего UI фреймворк, но только для UI представления (нельзя использовать JS код для решения задачи, но можно использовать для оформительских эффектов(анимации и тому подобное))!
Дополнительным плюсом будет:
-
Использование TypeScript или ES6+(babel).
Схема визуального представления данных
+------+------------+-----------------+-----------------+---------------+
| id ▲ | firstName ▼| lastName ▼ | email ▼| phone ▼|
+------+------------+-----------------+-----------------+---------------+
| 101 | Sue | Corson | DWhalley@in.gov | (612)211-6296 |
+------+------------+-----------------+-----------------+---------------+
| 102 | Lor | Ipsumd | dwhalley@in.gov | (612)211-6296 |
+------+------------+-----------------+-----------------+---------------+
| 103 | Ips | Umdolo | dwhalley@in.gov | (612)211-6296 |
+------+------------+-----------------+-----------------+---------------+
Если выбран пользователем с id = 101 , то под таблицей выводим следующую информацию:
Выбран пользователь <b>Sue Corson</b>
Описание:
<textarea>
et lacus magna dolor...
</textarea>
Адрес проживания: <b>9792 Mattis Ct</b>
Город: <b>Waukesha</b>
Провинция/штат: <b>WI</b>
Индекс: <b>22178</b>