¿Yo quiero jQuery?

La puesta en marcha

Se le proporciona una página web simple con 11 elementos:

• 10 inputelementos con ID a i1través i10, en orden
• un outputelemento con IDout

Los elementos de entrada tienen valueatributos definidos en la fuente HTML. El valor de cualquier entrada dada puede ser cualquier número entero desde 0hasta 10inclusivo.

La página web está equipada con la biblioteca central jQuery 1.10.1 (como se ve en el violín) y ejecuta un bloque de código tan pronto como se carga el DOM.

El reto

Seis desafíos específicos se presentan a continuación. En cada caso, el objetivo es calcular alguna función de la inputsy colocar el resultado del cálculo en el HTML interno de output. Cada desafío debe resolverse independientemente de los demás. La solución a un desafío es el bloque de código que implementa el cálculo / salida (por ejemplo, el código en la ventana "Javascript" en el violín). La longitud de una solución es la longitud (en bytes) de este bloque de código.

Todo esto parecería muy simple, si no fuera por algunas restricciones bastante interesantes.

Tu código puede ...

1. invoque la función jQuery $()y pase argumentos

2. definir y usar variables

3. utilizar this

4. leer cualquier propiedad de cualquier objeto jQuery ( .lengthsiendo el más útil)

5. definir funciones / lambdas, que posteriormente pueden invocarse, almacenarse en variables y pasarse como argumentos. Las funciones pueden aceptar argumentos y returnvalores si es necesario.

6. invocar cualquiera de los métodos transversales de jQuery DOM

7. invocar cualquiera de los métodos de manipulación jQuery DOM , exceptuando width, height, innerWidth, innerHeight, outerWidth, outerHeight, offset, position, replaceAll, replaceWith, scrollLeft, scrollTop, css, prop, removeProp, que puede no ser invocada

8. usar los operadores: creación de objetos {}; creación de matriz / referencia de índice / referencia de campo [], invocación de función / método (), concatenación de cadenas +y asignación=

9. usar literales de cadena

Su código no puede ...

1. use cualquier operador excepto los enumerados anteriormente

2. utilizar cualquier literales que no son literales de cadena

3. invocar cualquier función / método que no sean los específicamente exceptuados anteriormente

4. utilizar cualquier estructura de control o una palabra clave (por ejemplo for, while, try, if, with, etc.), con excepción de this, var, let, funciones y lambdas

5. manipule el DOM de cualquier manera que resulte en la inyección de código (vea más abajo)

6. acceder a cualquier variable no definida por el usuario o campo / propiedad no definido por el usuario, excepto los enumerados anteriormente

Los 6 desafíos

1. Calcule la suma de todos los inputvalores que son pares, colocando el resultado en el HTML interno de output.

2. Calcule el máximo de todos los inputvalores, colocando el resultado en el HTML interno de output.

3. Calcule el producto de todos los inputvalores <= 2, colocando el resultado en el HTML interno de output. Si todos los valores de entrada son > 2, colóquelos 0en el HTML interno de output.

4. Calcule el valor modal (es decir, el valor con mayor frecuencia) de todos los inputvalores, colocando el resultado en el HTML interno de output. Si el valor modal no es único, coloque cualquiera de los valores modales en el HTML interno de output.

5. Sea I1el valor de entrada i1, I2sea ​​el valor de entrada i2, etc. Si la secuencia de valores de entrada I1... I10forma una cerca con I1 < I2, coloque "TRUE"en el HTML interno fuera del output; de lo contrario, colóquelo "FALSE"en el HTML interno de la salida. Específicamente, la condición de la cerca es I1 < I2 > I3 < I4 > I5 < I6 > I7 < I8 > I9 < I10.

6. Coloque una lista separada por comas de todos los inputvalores, ordenados en orden ascendente, en el HTML interno de output.

Puntuación

El ganador del concurso es el programador que presenta soluciones correctas para la mayor cantidad de desafíos. En caso de empate, el ganador es el programador con la menor longitud total de la solución (la suma de las longitudes de todas las soluciones). Por lo tanto, esta es una variante menor del código de golf.

Notas importantes

Las soluciones pueden destrozar el DOM (por ejemplo inputs, eliminar , crear nuevos elementos que aparecen como detritos visuales) siempre que el estado final del DOM contenga un outputelemento con ID outy el valor calculado correctamente.

Las soluciones pueden hacer uso de cualquier selector avanzado de jQuery y CSS3, a excepción de las características que evalúan expresiones o ejecutan código.

Las soluciones no pueden modificar la fuente HTML del documento. Toda manipulación DOM debe ocurrir en el script a través de jQuery.

Las soluciones no pueden inyectar código de ningún tipo durante el recorrido / manipulación DOM. Esto incluye (pero no se limita a) escribir scriptelementos, escribir atributos de eventos que contengan código o explotar el expression(IE) o las calccaracterísticas de CSS3. Este desafío es sobre el pensamiento creativo usando conjuntos y árboles, y el uso magistral de jQuery; no se trata de infiltrar código en el DOM o realizar ejecuciones finales en torno a las restricciones del operador. Me reservo el derecho de descalificar cualquier solución sobre esta base.

Todas las soluciones son realizables y cada una puede implementarse en menos de 400 bytes. Por supuesto, sus soluciones pueden superar los 400 bytes o ser mucho más cortas que 400 bytes. Esta es solo mi garantía básica de que los 6 problemas se pueden resolver utilizando una cantidad de código razonablemente pequeña.

Finalmente: en caso de duda, por favor pregunte. :)

Ejemplo

Considere el desafío hipotético: "Si 3 o más inputvalores equivalen a 5, colóquelos "TRUE"en el HTML interno del output; de lo contrario, colóquelos "FALSE"en el HTML interno del output".

Una solución válida es:

F = () => $('body').append( '<a>TRUE</a>' );
$('input').each( F );
F();
$('a:lt(3)').html( 'FALSE' );
$('#out').html( $('a:eq(' + $('input[value="5"]').length + ')') );

¡Que gane el mejor jQuerier! ;)

1. Suma de entradas pares, 100 94 bytes

a=$();(e=$('*:odd')).map(i=>a=a.add(e.slice('0',e.eq(i).val()).clone()));$(out).html(a.length)

Cómo funciona :

• a=$(); : Crear un nuevo objeto a
• e=$('*:odd'): Obtenga todos los elementos impares en la página y asígnelos e. Curiosamente, todos los elementos impares de la página actualyl incluyen todos los elementos de entrada pares (entre otras cosas);)
• (e=..).map(i=>...): Para cada uno de los elementos en el objeto e, ejecute la función dada donde i es el índice del elemento actual.
• a=a.add(e.slice('0', e.eq(i).val()).clone()): obtenga el valor del i- ^ésimo elemento e, divida muchos objetos e, clónelos y agregue a. Curiosamente, una vez más, e tiene más de 10 elementos, por lo que funciona para todos los valores de los cuadros de entrada. Para elementos que no son de entrada e, solo corta 0 elementos de e.
• $(out).html(a.length): outes un global creado por los navegadores para cada elemento con una identificación. Así que solo ponemos la longitud aen el html del elemento de salida.

Tenga en cuenta que $ () de jquery actúa como un conjunto, pero estamos agregando elementos DOM de clones, por lo que se acumula y finalmente da la suma de todos los valores de entrada pares.

2. Máx. De todos, 79 70 bytes

a=[];(e=$('*')).map(i=>a[e.eq(i).val()]=e);$(a).map(_=>$(out).html(_))

Cómo funciona:

• a=[]; : crea una nueva matriz a
• e=$('*') : Consulta todos los elementos de la página y guárdalos en e
• (e=..).map(i=>...): Para cada uno de los elementos en el objeto e, ejecute la función dada donde i es el índice del elemento actual.
• a[e.eq(i).val()]=e: Obtenga el valor del elemento i ^th en e(digamos V) y póngalo een el índice V ^th de a. Usamos eaquí solo para guardar un byte. De a[e.eq(i).val()]=''lo contrario, también funcionaría.
• $(a).map(_=>$(out).html(_)): Esto es básicamente poner cada índice de aen el html del elemento de salida, anulando cada vez. Esto termina con el nodo de salida que tiene el valor que corresponde al último índice del acual corresponde al valor más alto en las entradas.

3. Producto, 152 141 133 132 bytes

f=(i,g=_=>p=$(i1))=>$('[value='+i+']').map(g);h=p=$();f('1');f('2');f('2',_=>p=p.add(p.clone()));f('0',_=>p=h);$(out).html(p.length)

141 -> 133 reducción gracias a GOTO0 :)

4. Modal, 116 115 102 bytes

a=[];(e=$('*')).map(i=>(v=e.eq(i).val(),a[$('[value='+v+']').length]=v));$(out).html($(a).last()['0'])

5. Valla, 158 bytes

s="TRUE";g=_=>$("*").slice(A.val(),B.val()).map(_=>s="FALSE");f=a=>(A=$(a),B=A.prev(),g(),A=$(a),B=A.next(),g());f(i2);f(i4);f(i6);f(i8);f(i10);$(out).html(s)

6. Valores separados por comas ordenados, 133 85 86 bytes

$('*').map(i=>$('[value='+i+']').map(_=>$(out).append(i+'<a>,')));$("a:last").remove()

Cómo funciona esto:

• $('*').map(i=>...): Saque todos los elementos de la página y ejecute el método para todos ellos donde iestá el índice del elemento.
• $('[value='+i+']').map(_=>...): Para cada uno i, obtenga todos los elementos cuyo valor sea iy ejecute el método para cada uno de ellos.
• $(out).append(i+'<a>,'): Anexar iy una etiqueta de anclaje con ,el elemento de salida para cada elemento cuyo valor es i.
• $("a:last").remove() : Elimine la última etiqueta de anclaje para eliminar el final ,

Esto funciona ya que selecciona todos los elementos con valores i= 0 a 19 (19 es el número total de elementos en la página) y agrega i,al elemento de salida la cantidad de veces que iaparece un elemento con valor . Esto se encarga de todos los elementos de entrada, ordenándolos en orden creciente.

Ejecútelos en la página de violín JS dada en un último Firefox.

Por favor comente si algo está violando las reglas.

Interesante desafío! Aquí están los primeros en comenzar:

1. Suma, 122 112 bytes

e=$('*')
e.map(i=>e.slice('0',n=e.eq(i).val()).map(x=>e.eq(n).append('<a>')))
e.text($(':not(a):even>a').length)

Para cada entrada n, agregue n <a>elementos al enésimo <input>elemento. Luego cuente los <a>elementos en cada <input>elemento impar .

2. Máximo, 91 79 bytes

e=$('*')
s=$()
e.map(i=>(s=s.add(e.slice('0',e.eq(i).val()))))
e.text(s.length)

Para cada entrada n, une los primeros n <input>elementos con el conjunto s. Luego cuente los elementos en el conjunto.

3. Producto, 157 bytes

e=$(s='[value=0],[value=1],[value=2],#out')
f=x=>e.slice('0',x.val()).each(i=>f(x.nextAll(s).first().append('<a>')))
f(e.first())
e.text($('#out a').length);

Una función recursiva que, dado un elemento con valor n, se llama a sí mismo con el siguiente elemento n veces y agrega un an <a>al siguiente elemento. Luego cuente los <a>elementos en <output>.

Avíseme si hay algún error o incumplimiento de la regla.