O Yo Quiero jQuery?

A Instalação

Você recebe uma página da web simples com 11 elementos:

• 10 inputelementos com IDs i1atravesse i10, em ordem
• um outputelemento com IDout

Os elementos de entrada têm valueatributos definidos na fonte HTML. O valor de qualquer entrada fornecida pode ser qualquer número inteiro de 0até 10inclusivo.

A página da Web está equipada com a biblioteca principal do jQuery 1.10.1 (como vista no violino) e executa um bloco de código assim que o DOM é carregado.

O desafio

Seis desafios específicos são apresentados abaixo. Em cada caso, o objetivo é calcular alguma função dos inpute colocar o resultado da computação no HTML interno do output. Cada desafio deve ser resolvido independentemente dos outros. A solução para um desafio é o bloco de código que implementa a computação / saída (por exemplo, o código na janela "Javascript" no violino). O comprimento de uma solução é o comprimento (em bytes) desse bloco de código.

Tudo isso parece muito simples, se não por algumas restrições bastante interessantes.

Seu código pode ...

1. invocar a função jQuery $()e passar argumentos

2. definir e usar variáveis

3. usar this

4. leia qualquer propriedade de qualquer objeto jQuery ( .lengthsendo o mais útil)

5. defina funções / lambdas, que podem ser invocadas posteriormente, armazenadas em variáveis ​​e passadas como argumentos. Funções podem aceitar argumentos e returnvalores, se necessário.

6. invocar qualquer um dos métodos transversais do jQuery DOM

7. invocar qualquer um dos métodos de manipulação jQuery DOM , com excepção width, height, innerWidth, innerHeight, outerWidth, outerHeight, offset, position, replaceAll, replaceWith, scrollLeft, scrollTop, css, prop, removeProp, que não podem ser invocadas

8. use os operadores: criação de objeto {}; criação de matriz / referência de índice / referência de campo [], chamada de função / método (), concatenação de strings +e atribuição=

9. use literais de string

Seu código pode não ...

1. use quaisquer operadores, exceto os listados acima

2. usar qualquer literais que não são strings literais

3. invocar qualquer função / método que não aqueles especificamente excetuados acima

4. utilizar qualquer estrutura de controle ou palavra-chave (por exemplo for, while, try, if, with, etc.), com excepção this, var, let, funções e lambdas

5. manipular o DOM de qualquer maneira que resulte na injeção de código (veja mais abaixo)

6. acessar qualquer variável não definida pelo usuário ou campo / propriedade não definida pelo usuário, exceto as listadas acima

Os 6 desafios

1. Calcule a soma de todos os inputvalores pares, colocando o resultado no HTML interno do output.

2. Calcule o máximo de todos os inputvalores, colocando o resultado no HTML interno do output.

3. Calcule o produto de todos os inputvalores <= 2, colocando o resultado no HTML interno do output. Se todos os valores de entrada forem > 2, coloque 0no HTML interno do arquivo output.

4. Calcule o valor modal (ou seja, o valor com maior frequência) de todos os inputvalores, colocando o resultado no HTML interno do output. Se o valor modal não for exclusivo, coloque qualquer um dos valores modais no HTML interno do output.

5. Seja I1o valor da entrada i1, I2seja o valor da entrada i2, etc. Se a sequência de valores de entrada I1.. I10formar uma cerca com I1 < I2, coloque "TRUE"no HTML interno a saída output; caso contrário, coloque "FALSE"no HTML interno da saída. Especificamente, a condição da cerca é I1 < I2 > I3 < I4 > I5 < I6 > I7 < I8 > I9 < I10.

6. Coloque uma lista separada por vírgula de todos os inputvalores, classificados em ordem crescente, no HTML interno do output.

Pontuação

O vencedor do concurso é o programador que envia soluções corretas para o maior número de desafios. Em caso de empate, o vencedor é o programador com o menor comprimento total da solução (a soma dos comprimentos de todas as soluções). Portanto, essa é uma variante menor do código de golfe.

Anotações importantes

As soluções podem alterar o DOM (por exemplo inputs, excluir , criar novos elementos que aparecem como detritos visuais), desde que o estado final do DOM contenha um outputelemento com ID oute o valor calculado corretamente.

As soluções podem fazer uso de qualquer seletor jQuery avançado e CSS3, exceto os recursos que avaliam expressões ou executam código.

As soluções não podem modificar a fonte HTML do documento. Toda manipulação do DOM deve ocorrer no script através do jQuery.

As soluções não podem injetar código de qualquer tipo durante a travessia / manipulação do DOM. Isso inclui (mas não está limitado a) a gravação de scriptelementos, a gravação de atributos de eventos contendo código ou a exploração do expression(IE) ou calcrecursos do CSS3. Esse desafio é sobre o pensamento criativo usando conjuntos e árvores e o uso magistral do jQuery; não se trata de introduzir código no DOM ou executar execuções finais em torno das restrições do operador. Reservo-me o direito de desqualificar qualquer solução nessa base.

Todas as soluções são realizáveis ​​e cada uma pode ser implementada em menos de 400 bytes. Suas soluções podem, obviamente, exceder 400 bytes ou ser muito menores que 400 bytes. Esta é apenas a minha garantia básica de que todos os 6 problemas são solucionáveis ​​usando uma quantidade razoavelmente pequena de código.

Finalmente: em caso de dúvida, pergunte. :)

Exemplo

Considere o desafio hipotético: "Se 3 ou mais inputvalores forem iguais a 5, coloque "TRUE"no HTML interno do output; caso contrário, coloque "FALSE"no HTML interno do output."

Uma solução válida é:

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

Que vença o melhor jQuerier! ;)

1. Soma das 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)

Como funciona :

• a=$(); : Criar um novo objeto a
• e=$('*:odd'): Obtenha todos os elementos ímpares da página e atribua-o a e. Curiosamente, todos os elementos ímpares da página actualyl incluem todos os elementos pares de entrada (entre outras coisas);)
• (e=..).map(i=>...): Para cada um dos elementos no objeto e, execute a função fornecida em que i é o índice do elemento atual.
• a=a.add(e.slice('0', e.eq(i).val()).clone()): obtém o valor do i- ^ésimo elemento e, retira muitos objetos e, clona-os e coloca-os em a. Curiosamente, novamente, e tem mais de 10 elementos, portanto, funciona para todos os valores das caixas de entrada. Para elementos sem entrada eme , apenas divide 0 elementos e.
• $(out).html(a.length): outé um global criado pelos navegadores para cada elemento com um ID. Então colocamos o comprimento dea no html do elemento de saída.

Observe que $ () do jquery atua como um conjunto, mas estamos adicionando elementos DOM dos clones, portanto ele está acumulando e finalmente dando a soma de todos os valores de entrada pares.

2. Máximo de tudo, 79 70 bytes

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

Como funciona:

• a=[]; : crie uma nova matriz a
• e=$('*') : Consulte todos os elementos na página e armazene-os em e
• (e=..).map(i=>...) : Para cada um dos elementos no objeto e, execute a função fornecida em que i é o índice do elemento atual.
• a[e.eq(i).val()]=e: Obtenha o valor do i- ^ésimo elemento em e(digamos V) e insira eo V- ^ésimo índice de a. Usamos eaqui apenas para salvar um byte. Caso contrário, a[e.eq(i).val()]=''também funcionaria.
• $(a).map(_=>$(out).html(_)): Isso basicamente consiste em colocar cada índice ano html do elemento de saída, substituindo cada vez. Isso termina com o nó de saída com o valor que corresponde ao último índice, aque corresponde ao valor mais alto nas entradas.

3. Produto, 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 redução graças 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. Cerca, 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 vírgula classificada, 133 85 86 bytes

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

Como isso funciona:

• $('*').map(i=>...): Retire todos os elementos da página e execute o método para todos eles onde iestá o índice do elemento.
• $('[value='+i+']').map(_=>...): Para cada um i, obtenha todos os elementos cujo valor seja ie execute o método para cada um deles.
• $(out).append(i+'<a>,'): Anexe ie uma tag de âncora ,ao elemento de saída de cada elemento cujo valor seja i.
• $("a:last").remove() : Remova a última marca de âncora para remover o final ,

Isso funciona porque ele seleciona todos os elementos com valores de i0 a 19 (sendo 19 o número total de elementos na página) e anexa i,ao elemento de saída o número de vezes que um elemento com valor iaparece. Isso cuida de todos os elementos de entrada, ordenando-os em ordem crescente.

Execute-os na página de violino JS fornecida no Firefox mais recente.

Comente se algo está violando as regras.

Desafio interessante! Aqui estão os primeiros a começar:

1. Soma, 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, acrescente n <a>elementos ao enésimo <input>elemento. Em seguida, conte os <a>elementos em todos os <input>elementos ímpares .

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, junte o primeiro n <input> elementos ao conjunto s. Depois conte os elementos no conjunto.

3. Produto, 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);

Uma função recursiva que, dado um elemento com valor n, se chama com o próximo elemento n vezes e anexa um <a>ao próximo elemento. Depois conte os <a>elementos em<output> .

Informe-me se houver algum erro ou violação de regra.