¿Yo Quiero jQuery?

Pengaturan

Anda diberi halaman web sederhana dengan 11 elemen:

• 10 inputelemen dengan ID i1melalui i10, dalam rangka
• satu outputelemen dengan IDout

Elemen input memiliki valueatribut yang ditentukan dalam sumber HTML. Nilai dari setiap masukan yang diberikan dapat berupa bilangan bulat dari 0ke 10inklusif.

Halaman web ini dilengkapi dengan pustaka inti jQuery 1.10.1 (seperti yang terlihat di biola), dan mengeksekusi blok kode segera setelah DOM dimuat.

Tantangan

Enam tantangan spesifik disajikan di bawah ini. Dalam setiap kasus tujuannya adalah untuk menghitung beberapa fungsi dari inputdan menempatkan hasil perhitungan ke dalam HTML bagian dalam output. Setiap tantangan harus diselesaikan secara independen dari yang lain. Solusi untuk tantangan adalah blok kode yang mengimplementasikan perhitungan / keluaran (mis. Kode di jendela "Javascript" di biola). Panjang solusi adalah panjang (dalam byte) dari blok kode ini.

Semua ini akan tampak sangat sederhana, jika bukan karena pembatasan yang agak menarik.

Kode Anda Mungkin ...

1. aktifkan fungsi jQuery $()dan berikan argumen

2. mendefinisikan dan menggunakan variabel

3. menggunakan this

4. membaca properti apa pun dari objek jQuery (dengan .lengthmenjadi yang paling berguna)

5. mendefinisikan fungsi / lambdas, yang selanjutnya dapat dipanggil, disimpan dalam variabel, dan diteruskan sebagai argumen. Fungsi dapat menerima argumen dan returnnilai jika diperlukan.

6. aktifkan metode traversal jQuery DOM

7. memanggil salah satu metode manipulasi jQuery DOM , kecuali width, height, innerWidth, innerHeight, outerWidth, outerHeight, offset, position, replaceAll, replaceWith, scrollLeft, scrollTop, css, prop, removeProp, yang mungkin tidak dipanggil

8. gunakan operator: pembuatan objek {}; pembuatan array / referensi indeks / referensi bidang [], pemanggilan fungsi / metode (), penggabungan string +, dan penugasan=

9. gunakan string literal

Kode Anda Mungkin Tidak ...

1. gunakan operator apa pun kecuali yang terdaftar di atas

2. gunakan literal apa pun yang bukan string literal

3. meminta fungsi / metode apa pun selain yang secara khusus dikecualikan di atas

4. menggunakan setiap struktur pengendalian atau kata kunci (misalnya for, while, try, if, with, dll), kecuali this, var, let, fungsi dan lambdas

5. memanipulasi DOM dengan cara apa pun yang menghasilkan injeksi kode (lihat lebih lanjut di bawah)

6. akses setiap variabel non-pengguna ditentukan atau non-pengguna didefinisikan bidang / properti kecuali yang tercantum di atas

6 Tantangan

1. Hitung jumlah semua inputnilai yang genap, dengan menempatkan hasilnya di HTML bagian dalam output.

2. Hitung maksimum semua inputnilai, menempatkan hasilnya dalam HTML bagian dalam output.

3. Hitung produk dari semua inputnilai <= 2, letakkan hasilnya dalam HTML bagian dalam output. Jika semua nilai input > 2, tempatkan 0ke dalam HTML bagian dalam output.

4. Hitung nilai modal (yaitu nilai dengan frekuensi terbesar) dari semua inputnilai, dengan menempatkan hasilnya dalam HTML bagian dalam output. Jika nilai modal tidak unik, tempatkan salah satu nilai modal dalam HTML bagian dalam output.

5. Membiarkan I1menjadi nilai input i1, I2menjadi nilai input i2, dll. Jika urutan nilai input I1.. I10membentuk pagar dengan I1 < I2, tempatkan "TRUE"ke dalam HTML bagian dalam output; jika tidak, tempatkan "FALSE"ke HTML bagian dalam output. Secara khusus, kondisi pagar adalah I1 < I2 > I3 < I4 > I5 < I6 > I7 < I8 > I9 < I10.

6. Tempatkan daftar semua inputnilai yang dipisahkan koma , diurutkan dalam urutan naik, ke dalam HTML bagian dalam output.

Mencetak gol

Pemenang kontes adalah programmer yang mengirimkan solusi yang benar ke sejumlah tantangan terbesar. Dalam hal seri, pemenangnya adalah programmer dengan total panjang solusi terendah (jumlah dari semua solusi). Karenanya ini adalah varian kecil dari kode golf.

Catatan penting

Solusi dapat memotong DOM (misalnya menghapus inputs, membuat elemen baru yang tampak sebagai visual detritus) selama kondisi akhir DOM berisi outputelemen dengan ID outdan nilai yang dihitung dengan benar.

Solusi dapat menggunakan penyeleksi jQuery dan CSS3 canggih, kecuali fitur yang mengevaluasi ekspresi atau mengeksekusi kode.

Solusi mungkin tidak mengubah sumber HTML dokumen. Semua manipulasi DOM harus terjadi dalam skrip melalui jQuery.

Solusi tidak boleh menyuntikkan kode apa pun selama traversal / manipulasi DOM. Ini termasuk (tetapi tidak terbatas pada) menulis scriptelemen, menuliskan atribut event yang berisi kode, atau mengeksploitasi expression(IE) atau calcfitur-fitur CSS3. Tantangan ini adalah tentang berpikir kreatif menggunakan set dan pohon, dan penggunaan jQuery yang luar biasa; ini bukan tentang menyelinap kode ke DOM atau membuat akhir berjalan di sekitar pembatasan operator. Saya berhak untuk mendiskualifikasi solusi apa pun atas dasar ini.

Semua solusi dapat direalisasikan, dan masing-masing dapat diimplementasikan dalam waktu kurang dari 400 byte. Solusi Anda tentu saja dapat melebihi 400 byte atau jauh lebih pendek dari 400 byte. Ini hanya jaminan dasar saya bahwa semua 6 masalah dapat dipecahkan menggunakan sejumlah kode yang cukup kecil.

Akhirnya: Jika ragu, harap tanyakan. :)

Contoh

Pertimbangkan tantangan hipotetis: "Jika 3 atau lebih inputnilai sama dengan 5, tempatkan "TRUE"ke HTML bagian dalam output; jika tidak, tempatkan "FALSE"ke HTML bagian dalam output."

Salah satu solusi yang valid adalah:

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

Semoga jQuerier terbaik menang! ;)

1. Jumlah input genap, 100 94 byte

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

Bagaimana itu bekerja :

• a=$(); : Buat objek baru a
• e=$('*:odd'): Dapatkan semua elemen aneh pada halaman dan tetapkan untuk e. Menariknya, semua elemen ganjil aktual laman mencakup semua elemen masukan genap (antara lain);)
• (e=..).map(i=>...): Untuk setiap elemen dalam objek e, jalankan fungsi yang diberikan di mana i adalah indeks elemen saat ini.
• a=a.add(e.slice('0', e.eq(i).val()).clone()): dapatkan nilai dari elemen ^ke dalam e, iris banyak objek dari itu e, tirukan dan masukkan menambahkannya a. Menariknya, sekali lagi, e memiliki lebih dari 10 elemen, sehingga ia berfungsi untuk semua nilai kotak input. Untuk elemen-elemen non input e, ia hanya memotong 0 elemen dari e.
• $(out).html(a.length): outadalah global yang dibuat oleh browser untuk setiap elemen dengan id. Jadi kami hanya menempatkan panjangnya adi html elemen output.

Perhatikan bahwa $ () jquery bertindak sebagai set, tetapi kami menambahkan elemen DOM klon, sehingga diakumulasikan dan akhirnya memberikan jumlah semua nilai input genap.

2. Maksimum semua, 79 70 byte

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

Bagaimana itu bekerja:

• a=[]; : buat array baru a
• e=$('*') : Permintaan semua elemen pada halaman dan simpan di e
• (e=..).map(i=>...): Untuk setiap elemen dalam objek e, jalankan fungsi yang diberikan di mana i adalah indeks elemen saat ini.
• a[e.eq(i).val()]=e: Dapatkan nilai elemen ^ke dalam e(katakanlah V) dan masukkan ^{ke dalam} indeks ^{ke -}e V dari . Kami menggunakan di sini hanya untuk menghemat satu byte. Kalau tidak, akan juga berhasil.aea[e.eq(i).val()]=''
• $(a).map(_=>$(out).html(_)): Ini pada dasarnya menempatkan setiap indeks ake dalam html elemen output, menimpa setiap waktu. Ini berakhir dengan simpul output yang memiliki nilai yang sesuai dengan indeks terakhir ayang sesuai dengan nilai tertinggi dalam input.

3. Produk, 152 141 133 132 byte

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 reduksi berkat GOTO0 :)

4. Modal, 116 115 102 byte

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

5. Pagar, 158 byte

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. Nilai yang dipisahkan tanda koma, 133 85 86 byte

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

Bagaimana ini bekerja:

• $('*').map(i=>...): Keluarkan semua elemen dari halaman dan jalankan metode untuk semuanya di mana iadalah indeks elemen.
• $('[value='+i+']').map(_=>...): Untuk masing-masing i, dapatkan semua elemen yang nilainya idan jalankan metode untuk masing-masing.
• $(out).append(i+'<a>,'): Menambahkan idan tag jangkar dengan ,di dalamnya ke elemen output untuk setiap elemen yang nilainya i.
• $("a:last").remove() : Hapus tag anchor terakhir untuk menghapus trailing ,

Ini berfungsi saat memilih semua elemen dengan nilai i= 0 hingga 19 (19 menjadi jumlah elemen pada halaman) dan menambahkan i,ke elemen output berapa kali elemen dengan nilai imuncul. Ini menangani semua elemen input, mengurutkannya dalam urutan yang meningkat.

Jalankan mereka di halaman biola JS yang diberikan pada Firefox terbaru.

Berikan komentar jika ada yang melanggar aturan.

Tantangan yang menarik! Inilah beberapa yang pertama memulai kami:

1. Jumlah, 122 112 byte

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)

Untuk setiap input n, tambahkan n <a>elemen ke <input>elemen n . Kemudian hitung <a>elemen dalam setiap <input>elemen aneh .

2. Maksimum, 91 79 byte

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

Untuk setiap input n, gabungkan <input>elemen n pertama dengan set s. Kemudian hitung elemen-elemen dalam set.

3. Produk, 157 byte

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

Fungsi rekursif yang, diberikan elemen dengan nilai n, menyebut dirinya dengan elemen berikutnya n kali dan menambahkan <a>ke elemen berikutnya. Kemudian hitung <a>elemen dalam <output>.

Beri tahu saya jika ada kesalahan atau pelanggaran peraturan.