O Yo Quiero jQuery?

8

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! ;)

COTO
fonte
15
-1 jQuery insuficiente
grc
3
Eu usaria totalmente as respostas para esta pergunta como código de produção seguido por//La garantia soy yo
William Barbosa
Como os campos de entrada são tecnicamente sequenciais e não diz que precisamos tratá-lo como números, "ordem crescente" significa alfabeticamente?
Ingo Bürk
1
@ IngoBürk: Os inputvalores sempre serão (as representações de string de) números inteiros de 0até 10inclusivos. Eles devem ser classificados na ordem de seus valores ascendentes quando interpretados como números inteiros. Na verdade, isso produziria a mesma ordem que um tipo lexicográfico, com a exceção que 10viria imediatamente depois 1no último. Esse não deve ser o caso de uma espécie aqui.
COTO
Bem. Além disso, algo um pouco confuso: você escreve apenas literais de string são permitidos, mas também que [] e {} são permitidos. Mas, tecnicamente, esses são literais de matriz e objeto. É claro o que você quer dizer, no entanto.
Ingo Bürk

Respostas:

9

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.

Optimizer
fonte
Positivo. Uma dica é que .parents()pode ser uma maneira útil de calcular <ou >.
COTO
Parece bom. A menos que alguém se levante para lhe dar uma corrida pelo dinheiro, parece que você estará 100 vezes mais rico até o final da semana.
COTO
+1 Você poderia explicar suas soluções, por favor?
soktinpk
1
A recompensa é sua. Você é o rei do jQuery. ;)
COTO 10/10
1
Este é testado - 135 bytes:f=i=>$('[value='+i+']').map(_=>p=g());p=$();f('1',g=_=>$(i1));f('2');f('2',g=_=>p.add(p.clone()));f('0',g=_=>$());$(out).html(p.length)
GOTO 0
2

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.

grc
fonte
Tudo parece mais kosher, exceto o literal zero no # 2. Muito boas soluções BTW.
COTO
@grc - Não devemos colocar a resposta no elemento <output> em vez do elemento <html>?
Optimizer
@ Optimizer Sim, você está certo. Parece que minha última edição quebrou as duas primeiras. Estou muito ocupado agora, mas deve ser apenas uma questão de substituir e.textcom $('#out').text. Vou consertar amanhã se tiver tempo.
grc 5/10