Pengaturan
Anda diberi halaman web sederhana dengan 11 elemen:
- 10
input
elemen dengan IDi1
melaluii10
, dalam rangka - satu
output
elemen dengan IDout
Elemen input memiliki value
atribut yang ditentukan dalam sumber HTML. Nilai dari setiap masukan yang diberikan dapat berupa bilangan bulat dari 0
ke 10
inklusif.
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 input
dan 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 ...
aktifkan fungsi jQuery
$()
dan berikan argumenmendefinisikan dan menggunakan variabel
menggunakan
this
membaca properti apa pun dari objek jQuery (dengan
.length
menjadi yang paling berguna)mendefinisikan fungsi / lambdas, yang selanjutnya dapat dipanggil, disimpan dalam variabel, dan diteruskan sebagai argumen. Fungsi dapat menerima argumen dan
return
nilai jika diperlukan.aktifkan metode traversal jQuery DOM
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 dipanggilgunakan operator: pembuatan objek
{}
; pembuatan array / referensi indeks / referensi bidang[]
, pemanggilan fungsi / metode()
, penggabungan string+
, dan penugasan=
gunakan string literal
Kode Anda Mungkin Tidak ...
gunakan operator apa pun kecuali yang terdaftar di atas
gunakan literal apa pun yang bukan string literal
meminta fungsi / metode apa pun selain yang secara khusus dikecualikan di atas
menggunakan setiap struktur pengendalian atau kata kunci (misalnya
for
,while
,try
,if
,with
, dll), kecualithis
,var
,let
, fungsi dan lambdasmemanipulasi DOM dengan cara apa pun yang menghasilkan injeksi kode (lihat lebih lanjut di bawah)
akses setiap variabel non-pengguna ditentukan atau non-pengguna didefinisikan bidang / properti kecuali yang tercantum di atas
6 Tantangan
Hitung jumlah semua
input
nilai yang genap, dengan menempatkan hasilnya di HTML bagian dalamoutput
.Hitung maksimum semua
input
nilai, menempatkan hasilnya dalam HTML bagian dalamoutput
.Hitung produk dari semua
input
nilai<= 2
, letakkan hasilnya dalam HTML bagian dalamoutput
. Jika semua nilai input> 2
, tempatkan0
ke dalam HTML bagian dalamoutput
.Hitung nilai modal (yaitu nilai dengan frekuensi terbesar) dari semua
input
nilai, dengan menempatkan hasilnya dalam HTML bagian dalamoutput
. Jika nilai modal tidak unik, tempatkan salah satu nilai modal dalam HTML bagian dalamoutput
.Membiarkan
I1
menjadi nilai inputi1
,I2
menjadi nilai inputi2
, dll. Jika urutan nilai inputI1
..I10
membentuk pagar denganI1 < I2
, tempatkan"TRUE"
ke dalam HTML bagian dalamoutput
; jika tidak, tempatkan"FALSE"
ke HTML bagian dalam output. Secara khusus, kondisi pagar adalahI1 < I2 > I3 < I4 > I5 < I6 > I7 < I8 > I9 < I10
.Tempatkan daftar semua
input
nilai yang dipisahkan koma , diurutkan dalam urutan naik, ke dalam HTML bagian dalamoutput
.
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 output
elemen dengan ID out
dan 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 script
elemen, menuliskan atribut event yang berisi kode, atau mengeksploitasi expression
(IE) atau calc
fitur-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 input
nilai 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! ;)
//La garantia soy yo
input
Nilai - nilai akan selalu (representasi string) dari integer0
ke10
inklusif. Mereka harus disortir dalam urutan nilai naik ketika ditafsirkan sebagai bilangan bulat. Ini sebenarnya akan menghasilkan urutan yang sama dengan jenis leksikografis, dengan pengecualian yang10
akan muncul segera setelah1
yang terakhir. Seharusnya bukan itu yang terjadi di sini.Jawaban:
1. Jumlah input genap,
10094 byteBagaimana itu bekerja :
a=$();
: Buat objek barua
e=$('*:odd')
: Dapatkan semua elemen aneh pada halaman dan tetapkan untuke
. Menariknya, semua elemen ganjil aktual laman mencakup semua elemen masukan genap (antara lain);)(e=..).map(i=>...)
: Untuk setiap elemen dalam objeke
, 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 dalame
, iris banyak objek dari itue
, tirukan dan masukkan menambahkannyaa
. Menariknya, sekali lagi, e memiliki lebih dari 10 elemen, sehingga ia berfungsi untuk semua nilai kotak input. Untuk elemen-elemen non inpute
, ia hanya memotong 0 elemen darie
.$(out).html(a.length)
:out
adalah global yang dibuat oleh browser untuk setiap elemen dengan id. Jadi kami hanya menempatkan panjangnyaa
di 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,
7970 byteBagaimana itu bekerja:
a=[];
: buat array barua
e=$('*')
: Permintaan semua elemen pada halaman dan simpan die
(e=..).map(i=>...)
: Untuk setiap elemen dalam objeke
, jalankan fungsi yang diberikan di mana i adalah indeks elemen saat ini.a[e.eq(i).val()]=e
: Dapatkan nilai elemen ke dalame
(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.a
e
a[e.eq(i).val()]=''
$(a).map(_=>$(out).html(_))
: Ini pada dasarnya menempatkan setiap indeksa
ke dalam html elemen output, menimpa setiap waktu. Ini berakhir dengan simpul output yang memiliki nilai yang sesuai dengan indeks terakhira
yang sesuai dengan nilai tertinggi dalam input.3. Produk,
152 141 133132 byte141 -> 133 reduksi berkat GOTO0 :)
4. Modal,
116 115102 byte5. Pagar, 158 byte
6. Nilai yang dipisahkan tanda koma,
133 8586 byteBagaimana ini bekerja:
$('*').map(i=>...)
: Keluarkan semua elemen dari halaman dan jalankan metode untuk semuanya di manai
adalah indeks elemen.$('[value='+i+']').map(_=>...)
: Untuk masing-masingi
, dapatkan semua elemen yang nilainyai
dan jalankan metode untuk masing-masing.$(out).append(i+'<a>,')
: Menambahkani
dan tag jangkar dengan,
di dalamnya ke elemen output untuk setiap elemen yang nilainyai
.$("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 menambahkani,
ke elemen output berapa kali elemen dengan nilaii
muncul. 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.
sumber
.parents()
bisa menjadi cara yang berguna untuk menghitung<
atau>
.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)
Tantangan yang menarik! Inilah beberapa yang pertama memulai kami:
1. Jumlah,
122112 byteUntuk setiap input n, tambahkan n
<a>
elemen ke<input>
elemen n . Kemudian hitung<a>
elemen dalam setiap<input>
elemen aneh .2. Maksimum,
9179 byteUntuk setiap input n, gabungkan
<input>
elemen n pertama dengan sets
. Kemudian hitung elemen-elemen dalam set.3. Produk, 157 byte
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.
sumber
e.text
dengan$('#out').text
. Saya akan memperbaikinya besok jika saya punya waktu.