Yo Quiero jQuery?

Die Einrichtung

Sie erhalten eine einfache Webseite mit 11 Elementen:

• 10 inputElemente mit IDs i1durch i10, in der Reihenfolge
• ein outputElement mit IDout

Die Eingabeelemente haben valueAttribute, die in der HTML-Quelle definiert sind. Der Wert einer bestimmten Eingabe kann eine beliebige Ganzzahl von 0bis 10einschließlich sein.

Die Webseite ist mit der Kernbibliothek jQuery 1.10.1 (wie in der Geige dargestellt) ausgestattet und führt einen Codeblock aus, sobald das DOM geladen wird.

Die Herausforderung

Im Folgenden werden sechs spezifische Herausforderungen vorgestellt. In jedem Fall besteht das Ziel darin, eine Funktion des inputs zu berechnen und das Berechnungsergebnis in den inneren HTML- Code des s zu platzieren output. Jede Herausforderung sollte unabhängig von den anderen gelöst werden. Die Lösung für eine Herausforderung ist der Codeblock, der die Berechnung / Ausgabe implementiert (z. B. der Code im Fenster "Javascript" in der Geige). Die Länge einer Lösung ist die Länge (in Bytes) dieses Codeblocks.

All dies scheint sehr einfach zu sein, wenn nicht einige interessante Einschränkungen.

Ihr Code kann ...

1. Rufen Sie die jQuery-Funktion auf $()und übergeben Sie Argumente

2. Variablen definieren und verwenden

3. verwenden this

4. Lesen Sie eine beliebige Eigenschaft eines jQuery-Objekts (wobei .lengthdies die nützlichste ist).

5. Definieren Sie Funktionen / Lambdas, die anschließend aufgerufen, in Variablen gespeichert und als Argumente übergeben werden können. Funktionen können returnbei Bedarf Argumente und Werte akzeptieren .

6. Rufen Sie eine der jQuery DOM-Traversal-Methoden auf

7. Aufrufe jeden der jQuery DOM Manipulationsmethoden , mit der Ausnahme width, height, innerWidth, innerHeight, outerWidth, outerHeight, offset, position, replaceAll, replaceWith, scrollLeft, scrollTop, css, prop, removeProp, die möglicherweise nicht aufgerufen

8. Verwenden Sie die Operatoren: Objekterstellung {}; Array-Erstellung / Indexreferenz / Feldreferenz [], Funktions- / Methodenaufruf (), Verkettung von Zeichenfolgen +und Zuweisung=

9. Verwenden Sie String-Literale

Ihr Code kann nicht ...

1. Verwenden Sie alle Operatoren außer den oben aufgeführten

2. Verwenden Sie alle Literale, die keine String-Literale sind

3. Rufen Sie eine andere Funktion / Methode als die oben ausdrücklich genannten auf

4. verwenden , jede Steuerstruktur oder ein Schlüsselwort (z for, while, try, if, with, etc.), mit Ausnahme von this, var, let, Funktionen und Lambdas

5. manipuliert das DOM in irgendeiner Art und Weise , dass die Ergebnisse in der Injektion von Code (mehr unten)

6. Zugriff auf alle nicht benutzerdefinierten Variablen oder nicht benutzerdefinierten Felder / Eigenschaften mit Ausnahme der oben aufgeführten

Die 6 Herausforderungen

1. Berechnen Sie die Summe aller inputgeraden Werte und platzieren Sie das Ergebnis im inneren HTML des output.

2. Berechnen Sie das Maximum aller inputWerte und platzieren Sie das Ergebnis im inneren HTML des output.

3. Berechnen Sie das Produkt aller inputWerte <= 2und platzieren Sie das Ergebnis im inneren HTML des output. Wenn alle Eingabewerte vorhanden sind > 2, platzieren Sie sie 0im inneren HTML-Code des output.

4. Berechnen Sie den Modalwert (dh den Wert mit der größten Häufigkeit) aller inputWerte und platzieren Sie das Ergebnis im inneren HTML des output. Wenn der Modalwert nicht eindeutig ist, platzieren Sie einen der Modalwerte im inneren HTML des output.

5. Lassen Sie I1den Wert eingegeben wird i1, I2wird der Wert des Eingangs i2, usw. Wenn die Sequenzwerte von Eingang I1.. I10einen bilden Zaun mit I1 < I2, Platz "TRUE"in den inneren HTML aus dem output; Andernfalls "FALSE"in den inneren HTML-Code der Ausgabe einfügen. Insbesondere ist der Zaunzustand I1 < I2 > I3 < I4 > I5 < I6 > I7 < I8 > I9 < I10.

6. Fügen Sie eine durch Kommas getrennte Liste aller inputWerte in aufsteigender Reihenfolge in den inneren HTML-Code von ein output.

Wertung

Der Gewinner des Wettbewerbs ist der Programmierer, der korrekte Lösungen für die meisten Herausforderungen einreicht. Bei einem Unentschieden gewinnt der Programmierer mit der niedrigsten Gesamtlösungslänge (der Summe der Längen aller Lösungen). Daher ist dies eine geringfügige Variante des Code-Golfs.

Wichtige Notizen

Lösungen können das DOM beschädigen (z. B. löschen inputs, neue Elemente erstellen, die als visueller Abfall erscheinen), solange der Endzustand des DOM ein outputElement mit der ID outund dem korrekt berechneten Wert enthält.

Lösungen können erweiterte jQuery-Selektoren und CSS3 verwenden, mit Ausnahme von Funktionen, die Ausdrücke auswerten oder Code ausführen.

Lösungen können die HTML-Quelle des Dokuments möglicherweise nicht ändern. Alle DOM-Manipulationen müssen im Skript über jQuery erfolgen.

Lösungen dürfen während der DOM-Durchquerung / Manipulation keinerlei Code einfügen. Dies umfasst (ohne darauf beschränkt zu sein) das Ausschreiben von scriptElementen, das Ausschreiben von Ereignisattributen, die Code enthalten, oder das Ausnutzen des expression(IE) oder der calcFunktionen von CSS3. Bei dieser Herausforderung geht es um kreatives Denken mit Sets und Bäumen sowie um den meisterhaften Einsatz von jQuery. Es geht nicht darum, Code in das DOM zu schleichen oder die Operator-Einschränkungen zu umgehen. Ich behalte mir das Recht vor, Lösungen auf dieser Grundlage zu disqualifizieren.

Alle Lösungen sind realisierbar und können in weniger als 400 Bytes implementiert werden. Ihre Lösungen können natürlich 400 Byte überschreiten oder weit kürzer als 400 Byte sein. Dies ist nur meine grundlegende Garantie dafür, dass alle 6 Probleme mit einer relativ kleinen Menge Code lösbar sind.

Zum Schluss: Im Zweifelsfall bitte fragen. :) :)

Beispiel

Betrachten Sie die hypothetische Herausforderung: "Wenn 3 oder mehr inputWerte gleich 5 sind, platzieren Sie sie "TRUE"in den inneren HTML-Code von output; andernfalls platzieren Sie sie "FALSE"in den inneren HTML-Code von output."

Eine gültige Lösung ist:

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

Möge der beste jQuerier gewinnen! ;)

1. Summe der geraden Eingänge, 100 94 Bytes

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

Wie es funktioniert :

• a=$(); : Erstellen Sie ein neues Objekt a
• e=$('*:odd'): Holen Sie sich alle ungeraden Elemente auf der Seite und weisen Sie es zu e. Interessanterweise enthalten alle ungeraden Elemente der Seitenaktualisierung (unter anderem) alle geraden Eingabeelemente;)
• (e=..).map(i=>...): eFühren Sie für jedes Element im Objekt die angegebene Funktion aus, wobei i der Index des aktuellen Elements ist.
• a=a.add(e.slice('0', e.eq(i).val()).clone()): Holen Sie sich den Wert des i- ^ten Elements in e, schneiden Sie so viele Objekte aus e, klonen Sie sie und fügen Sie sie hinzu a. Interessanterweise hat e wieder mehr als 10 Elemente, sodass es für alle Werte der Eingabefelder funktioniert. Für nicht eingegebene Elemente in ewerden nur 0 Elemente aus geschnitten e.
• $(out).html(a.length): outist eine globale Liste, die von Browsern für jedes Element mit einer ID erstellt wird. Also setzen wir einfach die Länge von ain das HTML des Ausgabeelements.

Beachten Sie, dass $ () von jquery als Menge fungiert, aber wir fügen Klon-DOM-Elemente hinzu, sodass es sich ansammelt und schließlich die Summe aller geraden Eingabewerte ergibt.

2. Maximal 79 70 Bytes

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

Wie es funktioniert:

• a=[]; : Erstelle ein neues Array a
• e=$('*') : Fragen Sie alle Elemente auf der Seite ab und speichern Sie sie in e
• (e=..).map(i=>...): eFühren Sie für jedes Element im Objekt die angegebene Funktion aus, wobei i der Index des aktuellen Elements ist.
• a[e.eq(i).val()]=e: Holen Sie sich den Wert des i- ^ten Elements in e(sagen Sie V) und geben Sie eden V- ^ten Index von ein a. Wir verwenden ehier nur, um ein Byte zu speichern. Sonst a[e.eq(i).val()]=''würde auch funktionieren.
• $(a).map(_=>$(out).html(_)): Dies bedeutet im Grunde, dass jeder Index von ain das HTML des Ausgabeelements eingefügt wird und jedes Mal überschrieben wird. Dies endet damit, dass der Ausgabeknoten den Wert hat, der dem letzten Index aentspricht, dessen höchster Wert in den Eingaben entspricht.

3. Produkt, 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 Reduktion dank 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. Zaun, 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. Sortierte durch Kommas getrennte Werte, 133 85 86 Bytes

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

So funktioniert das:

• $('*').map(i=>...): Nehmen Sie alle Elemente von der Seite heraus und führen Sie die Methode für alle aus, wobei isich der Index des Elements befindet.
• $('[value='+i+']').map(_=>...): Holen Sie sich für jedes iElement alle Elemente, deren Wert ist, iund führen Sie die Methode für jedes Element aus.
• $(out).append(i+'<a>,'): Fügen Sie für jedes Element, dessen Wert ist, iein Anker-Tag ,an das Ausgabeelement an i.
• $("a:last").remove() : Entfernen Sie das letzte Ankertag, um das nachfolgende zu entfernen ,

Dies funktioniert, indem alle Elemente mit den Werten i= 0 bis 19 ausgewählt werden (19 ist die Gesamtzahl der Elemente auf der Seite) und i,an das Ausgabeelement angehängt wird, wie oft ein Element mit dem Wert iangezeigt wird. Dies kümmert sich um alle Eingabeelemente und sortiert sie in aufsteigender Reihenfolge.

Führen Sie sie auf der angegebenen JS-Geigen-Seite in einem aktuellen Firefox aus.

Bitte kommentieren Sie, wenn etwas gegen Regeln verstößt.

Interessante Herausforderung! Hier sind die ersten, die uns anfangen:

1. Summe 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)

Fügen Sie für jede Eingabe n n <a>Elemente an das n-te <input>Element an. Zählen Sie dann die <a>Elemente in jedem ungeraden <input>Element.

2. Maximal 91 79 Bytes

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

Verbinden Sie für jede Eingabe n die ersten n <input>Elemente mit der Menge s. Dann zählen Sie die Elemente in der Menge.

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

Eine rekursive Funktion, die sich bei einem gegebenen Element mit dem Wert n n-mal mit dem nächsten Element aufruft und ein <a>an das nächste Element anfügt . Dann zählen Sie die <a>Elemente in <output>.

Lassen Sie mich wissen, wenn es Fehler oder Regelverstöße gibt.