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.
ПрактическиеTareas задачи
Prácticas
ЗадачаTarea №1
Реализуйте
Es функциюnecesario parseUrl(string),desarrollar котораяun будетcomponente парситьen URLJavaScript строкуpara иordenar возвращатьtablas объектcon с распарсенными данными. Пример:
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-компонент для сортировки таблиц с данными.
ФункционалFuncionalidad
-
СортировкаOrdenación
поporстолбцамcolumnas:приalнажатииhacerнаclicназваниеenстолбцаelстрокиnombreтаблицыdeсортируютсяlaпоcolumna,возрастанию,lasприfilasповторномdeкликеla-tablaпоseубыванию.ordenanГрафическимenэлементомordenилиascendente;текстовымalсообщениемhacerуказываетсяclicнаправлениеnuevamente,сортировки.se ordenan en orden descendente. Un elemento gráfico o un mensaje de texto indicará la dirección de la ordenación. -
КлиентскаяPaginación
пагинацияdel lado del cliente:данныеlosнеобходимоdatosотображатьdebenпостранично,mostrarseмаксимумpor páginas, con un máximo de 50элементовelementosнаporстраницу.página.НеобходимоSeпредоставитьdebeпользовательскуюproporcionarнавигациюunaдляnavegaciónпереходаparaпоqueстраницам.el usuario pueda moverse entre las páginas. -
ФильтрацияFiltrado:
компонентelпредоставляетcomponenteтекстовоеdebeполе,proporcionarвunкотороеcampoпользовательdeможетtextoввестиenтекстelиqueстрокиelтаблицы,usuarioданныеpuedaкоторыхintroducirнеtexto,содержатyподстроку,lasвведённуюfilasпользователем,deскрываютсяla tabla cuyos datos no contengan la subcadena introducida por el usuario se ocultarán. El filtrado se realizará al presionar el botón "Buscar".Перефильтрация осуществляется по нажатию на кнопку Найти. -
ПоVisualización
кликеdeнаdetalles:строкуalтаблицыhacerзначенияclicполейenвыводятсяunaвfilaдополнительномdeблокеlaподtabla,таблицей.los valores de los campos se mostrarán en un bloque adicional debajo de la tabla. -
ДанныеCarga
вdeтаблицуdatosзагружаютсяdesdeсelсервера.servidor:Способlosзагрузкиdatosсseсервераcargaránнаenвашlaвыбор.tabla desde el servidor. El método de carga desde el servidor es a tu elección.
Для
демонстрации
Para компонентаdemostrar необходимоel сделатьfuncionamiento простуюdel componente, es necesario crear una página HTML страницу.sencilla. ПользователюSe предлагаетсяle выбратьofrecerá наборal данных:usuario маленькийelegir илиun большой.conjunto Приde выбореdatos: набораpequeño данныхo онgrande. загружаетсяAl сseleccionar сервераel иconjunto поde даннымdatos, строитсяeste таблица.se cargará desde el servidor y se construirá la tabla con los datos.
Formato de datos del servidor
ФорматEl данныхservidor отdevolverá сервера
un Серверarray возвращаетJSON JSON-массивde данных.datos. ПримерEjemplo данных:
de datos:
[ { 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..." } }
Маленький
El объемpequeño данныхvolumen беретсяde поdatos ссылкеse obtiene mediante un enlace. 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}
Большой
El объемgrande данныхvolumen беретсяde поdatos ссылкеse obtiene mediante un enlace. 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}
Замечания
Observaciones
-
ОсобоеRendimiento:
вниманиеDebesследуетprestarуделитьespecialскоростиatenciónработы.aЗависаниеlaинтерфейсаvelocidadприdeвыполненииfuncionamiento.операцийNoзагрузкиseданных,permiteфильтрации,queсортировкиlaнедопустимо.interfaz se congele durante la carga de datos, filtrado o ordenación. -
ВоIndicador
времяdeзагрузкиcarga:данныхDuranteстоитlaпоказатьcargaкакой-тоdeиндикаторdatos, se debe mostrar algún tipo de indicador. -
РазрешённыеBibliotecas
библиотекиpermitidas: jQuery, Lodash/Underscore, Backbone,самописный.oНоcódigoвамpropio.придетсяSinобъяснитьembargo,выборtendrásиqueпричинуexplicarиспользования.tuИспользованиеelecciónстороннихyбиблиотекlaбудетrazónплюсомdeтолькоsuвuso.случаеElеслиusoэтоdeоправданноbibliotecasиdeвыtercerosсможетеseráобъяснитьunпричинуplusвыбора.soloПоказавsiсвоиesзнанияjustificableвyграмотномpuedesпримененииexplicarстороннихlaготовыхrazónрешений,deвыsuимеетеelección.шансDemostrandoповыситьtuсвоюconocimientoпрофессиональнуюenпривлекательностьlaдляaplicaciónнас.adecuada de soluciones existentes, tendrás la oportunidad de aumentar tu atractivo profesional para nosotros. -
ПишитеCalidad
кодdelтак,código:какEscribeбыelвыcódigoегоcomoписалиsiвfueraработеpara-unвнутренностиproyectoзаданияdeбудутtrabajo.оцениватьсяLaдажеcalidadтщательней,internaчемdelвнешнееcódigoсоответствиеseráзаданию.evaluadaКодinclusoдолженmásбытьmeticulosamenteорганизованqueтак,elчтобыcumplimientoегоexternoможноdeбылоlaзановоtarea.использовать.El código debe estar organizado de manera que pueda ser reutilizado. -
ПомнитеManejo
проdeобработкуerrores:ошибок!Recuerda manejar adecuadamente los errores. -
ВерсткаMaquetación:
можетLaбытьmaquetaciónсамаяpuedeпростая.serВизуализациюlaиmásукрашениеsimple.делаетеLaнаvisualizaciónвашyвкус.elМыdiseñoнеquedanпротивaиспользованияtu gusto. No tenemos inconveniente en que uses http://getbootstrap.com/илиuпохожегоotro framework de UIфреймворк,similar,ноperoтолькоsoloдляparaUIlaпредставленияrepresentación de la interfaz (нельзяnoиспользоватьse permite usar código JSкодdelдляframeworkрешенияparaзадачи,resolverноlaможноtarea,использоватьperoдляsíоформительскихseэффектов(анимацииpuedeиusarтомуparaподобное))!efectos de presentación como animaciones y similares).
Дополнительным плюсомPlus будет:adicional
- Uso
Использованиеde TypeScriptилиo ES6+ (babel).
СхемаEsquema визуальногоde представленияrepresentación данных
visual de los datos
+------+------------+-----------------+-----------------+---------------+
| 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 |
+------+------------+-----------------+-----------------+---------------+
Если
Si выбранse пользователемselecciona сal usuario con id = 101101, ,mostramos тоla подsiguiente таблицейinformación выводимdebajo следующуюde информацию:la tabla:
ВыбранSeleccionado пользовательusuario: <b>Sue Corson</b>
Описание:Descripción:
<textarea>
et lacus magna dolor...
</textarea>
АдресDirección проживания:de residencia: <b>9792 Mattis Ct</b>
Город:Ciudad: <b>Waukesha</b>
Провинция/штат:Provincia/Estado: <b>WI</b>
Индекс:Código Postal: <b>22178</b>
Дополнительно
Adicionalmente, напишитеinfórmenos нам,cómo какprobaste выel тестировалиresultado результатde своейtu работы.trabajo. Какие¿Qué используетеherramientas инструментыutilizaste иy какcómo выrealizaste осуществляетеlas тестирование.pruebas?
КомментарииComentarios
Результат
El выполненияresultado заданияde нужноla будетtarea оформитьdeberá здесьser же,presentado наen гитхабе.GitHub.