JQuery Yo Quiero jQuery?

Cài đặt

Bạn được cho một trang web đơn giản với 11 yếu tố:

• 10 input yếu tố với ID i1thông qua i10, theo thứ tự
• một output yếu tố có IDout

Các yếu tố đầu vào có value các thuộc tính được xác định trong nguồn HTML. Giá trị của bất kỳ đầu vào nhất định có thể được bất kỳ số nguyên từ 0để 10toàn diện.

Trang web được trang bị thư viện jQuery 1.10.1 lõi (như được thấy trong fiddle) và thực thi một khối mã ngay khi DOM được tải.

Các thách thức

Sáu thách thức cụ thể được trình bày dưới đây. Trong mỗi trường hợp, mục tiêu là tính toán một số chức năng của inputs và đặt kết quả tính toán vào HTML bên trong củaoutput . Mỗi thử thách nên được giải quyết độc lập với những người khác. Giải pháp cho một thách thức là khối mã thực hiện tính toán / đầu ra (ví dụ mã trong cửa sổ "Javascript" trong fiddle). Độ dài của một giải pháp là độ dài (tính bằng byte) của khối mã này.

Tất cả điều này có vẻ rất đơn giản, nếu không có một số hạn chế khá thú vị.

Mã của bạn có thể ...

1. gọi hàm jQuery $()và truyền vào các đối số

2. định nghĩa và sử dụng các biến

3. sử dụng this

4. đọc bất kỳ thuộc tính nào của bất kỳ đối tượng jQuery nào (với .lengthmục đích hữu ích nhất)

5. định nghĩa các hàm / lambdas, sau đó có thể được gọi, được lưu trữ trong các biến và được truyền dưới dạng đối số. Các hàm có thể chấp nhận đối số và returngiá trị nếu cần.

6. gọi bất kỳ phương thức truyền tải DOM DOM nào

7. gọi bất kỳ phương pháp thao tác jQuery DOM , trừ width, height, innerWidth, innerHeight, outerWidth, outerHeight, offset, position, replaceAll, replaceWith, scrollLeft, scrollTop, css, prop, removeProp, mà có thể không được gọi

8. sử dụng các toán tử: tạo đối tượng {}; tạo mảng / tham chiếu chỉ mục / tham chiếu trường [], gọi hàm / phương thức (), nối chuỗi +và gán=

9. sử dụng chuỗi ký tự

Mã của bạn có thể không ...

1. sử dụng bất kỳ toán tử nào ngoại trừ những toán tử được liệt kê ở trên

2. sử dụng bất kỳ chữ nào không phải là chuỗi ký tự

3. gọi bất kỳ hàm / phương thức nào khác ngoài các hàm cụ thể ngoại trừ ở trên

4. sử dụng bất kỳ cấu trúc điều khiển hoặc từ khóa (ví dụ for, while, try, if, with, vv), trừ this, var, let, chức năng và lambdas

5. thao túng DOM theo bất kỳ cách nào dẫn đến việc tiêm mã (xem thêm bên dưới)

6. truy cập bất kỳ trường / thuộc tính không do người dùng xác định hoặc trường / thuộc tính do người dùng xác định ngoại trừ những trường được liệt kê ở trên

6 thử thách

1. Tính tổng của tất cả các inputgiá trị chẵn, đặt kết quả vào HTML bên trong của output.

2. Tính toán tối đa của tất cả các inputgiá trị, đặt kết quả vào HTML bên trong của output.

3. Tính toán sản phẩm của tất cả các inputgiá trị <= 2, đặt kết quả vào HTML bên trong của output. Nếu tất cả các giá trị đầu vào là > 2, đặt 0vào HTML bên trong của output.

4. Tính giá trị phương thức (nghĩa là giá trị có tần số lớn nhất) của tất cả các inputgiá trị, đặt kết quả vào HTML bên trong của output. Nếu giá trị phương thức không phải là duy nhất, hãy đặt bất kỳ một trong các giá trị phương thức vào HTML bên trong của output.

5. Đặt I1giá trị của đầu vào i1, I2là giá trị của đầu vào i2, v.v ... Nếu chuỗi các giá trị đầu vào I1.. I10tạo thành một hàng rào với I1 < I2, đặt "TRUE"vào HTML bên trong ra ngoài output; mặt khác đặt "FALSE"vào HTML bên trong của đầu ra. Cụ thể, điều kiện hàng rào là I1 < I2 > I3 < I4 > I5 < I6 > I7 < I8 > I9 < I10.

6. Đặt danh sách tất cả các inputgiá trị được phân tách bằng dấu phẩy , được sắp xếp theo thứ tự tăng dần, vào HTML bên trong của output.

Chấm điểm

Người chiến thắng cuộc thi là lập trình viên đưa ra các giải pháp chính xác cho số lượng thử thách lớn nhất. Trong trường hợp hòa, người chiến thắng là lập trình viên có tổng độ dài giải pháp thấp nhất (tổng độ dài của tất cả các giải pháp). Do đó đây là một biến thể nhỏ của mã golf.

Ghi chú quan trọng

Các giải pháp có thể xử lý DOM (ví dụ xóa inputs, tạo các phần tử mới xuất hiện dưới dạng hình ảnh trực quan) miễn là trạng thái cuối cùng của DOM chứa một outputphần tử có ID outvà giá trị được tính toán chính xác.

Các giải pháp có thể sử dụng bất kỳ bộ chọn jQuery và CSS3 nâng cao nào, ngoại trừ các tính năng đánh giá biểu thức hoặc thực thi mã.

Các giải pháp có thể không sửa đổi nguồn HTML của tài liệu. Tất cả các thao tác DOM phải xảy ra trong tập lệnh thông qua jQuery.

Các giải pháp không được tiêm mã dưới bất kỳ hình thức nào trong quá trình thao tác / truyền tải DOM. Điều này bao gồm (nhưng không giới hạn ở) viết ra scriptcác phần tử, viết ra các thuộc tính sự kiện có chứa mã hoặc khai thác expression(IE) hoặc calccác tính năng của CSS3. Thách thức này là về tư duy sáng tạo bằng cách sử dụng các bộ và cây và sử dụng thành thạo jQuery; nó không phải là về việc lén mã vào DOM hoặc kết thúc chạy xung quanh các hạn chế của nhà điều hành. Tôi bảo lưu quyền loại bỏ bất kỳ giải pháp nào trên cơ sở này.

Tất cả các giải pháp đều có thể thực hiện được và mỗi giải pháp có thể được thực hiện trong ít hơn 400 byte. Các giải pháp của bạn tất nhiên có thể vượt quá 400 byte hoặc ngắn hơn 400 byte. Đây chỉ là đảm bảo cơ bản của tôi rằng tất cả 6 vấn đề đều có thể giải quyết được bằng cách sử dụng một lượng mã hợp lý nhỏ.

Cuối cùng: Khi nghi ngờ, xin hỏi. :)

Thí dụ

Hãy xem xét thách thức giả thuyết: "Nếu 3 hoặc nhiều inputgiá trị bằng 5, hãy đặt "TRUE"vào HTML bên trong của output; nếu không thì đặt "FALSE"vào HTML bên trong của output."

Một giải pháp hợp lệ là:

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

Có thể giành chiến thắng jQuerier tốt nhất! ;)

1. Tổng các đầu vào chẵn, 100 94 byte

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

Làm thế nào nó hoạt động :

• a=$(); : Tạo một đối tượng mới a
• e=$('*:odd'): Nhận tất cả các yếu tố kỳ lạ trên trang và gán nó cho e. Thật thú vị, tất cả các yếu tố kỳ lạ của trang factyl bao gồm tất cả các yếu tố đầu vào chẵn (trong số những thứ khác);)
• (e=..).map(i=>...): Đối với mỗi phần tử trong đối tượng e, hãy chạy hàm đã cho trong đó i là chỉ mục của phần tử hiện tại.
• a=a.add(e.slice('0', e.eq(i).val()).clone()): lấy giá trị của phần tử ^thứ i e, cắt ra nhiều đối tượng từ đó e, sao chép chúng và thêm chúng vào a. Thật thú vị, một lần nữa, e có hơn 10 phần tử, vì vậy nó hoạt động cho tất cả các giá trị của các hộp đầu vào. Đối với các phần tử không nhập vào e, nó chỉ cắt 0 phần tử từ e.
• $(out).html(a.length): outlà toàn cầu được tạo bởi trình duyệt cho mỗi thành phần có id. Vì vậy, chúng tôi chỉ cần đặt độ dài của ahtml của phần tử đầu ra.

Lưu ý rằng $ () của jquery hoạt động như một tập hợp, nhưng chúng tôi đang thêm các phần tử DOM nhân bản, do đó, nó được tích lũy và cuối cùng đưa ra tổng của tất cả các giá trị đầu vào chẵn.

2. Tối đa của tất cả, 79 70 byte

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

Làm thế nào nó hoạt động:

• a=[]; : tạo một mảng mới a
• e=$('*') : Truy vấn tất cả các yếu tố trên trang và lưu trữ nó trong e
• (e=..).map(i=>...): Đối với mỗi phần tử trong đối tượng e, hãy chạy hàm đã cho trong đó i là chỉ mục của phần tử hiện tại.
• a[e.eq(i).val()]=e: Lấy giá trị của phần tử ^thứ i trong e(giả sử V) và đặt evào chỉ mục ^thứ V của a. Chúng tôi sử dụng eở đây chỉ để tiết kiệm một byte. Nếu không, a[e.eq(i).val()]=''cũng sẽ làm việc.
• $(a).map(_=>$(out).html(_)): Điều này về cơ bản là đặt từng chỉ mục avào html của phần tử đầu ra, ghi đè mỗi lần. Điều này kết thúc với nút đầu ra có giá trị tương ứng với chỉ số cuối cùng atương ứng với giá trị cao nhất trong các đầu vào.

3. Sản phẩm, 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)

Giảm 141 -> 133 nhờ GOTO0 :)

4. Phương thức, 116 115 102 byte

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

5. Hàng rào, 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. Sắp xếp các giá trị được phân tách bằng dấu phẩy, 133 85 86 byte

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

Cách thức hoạt động:

• $('*').map(i=>...): Lấy ra tất cả các phần tử từ trang và chạy phương thức cho tất cả chúng trong đó ichỉ mục của phần tử.
• $('[value='+i+']').map(_=>...): Đối với mỗi i, hãy lấy tất cả các phần tử có giá trị ivà chạy phương thức cho từng phần tử.
• $(out).append(i+'<a>,'): Nối ivà gắn thẻ neo ,vào phần tử đầu ra cho mỗi phần tử có giá trị là i.
• $("a:last").remove() : Xóa thẻ neo cuối cùng để xóa dấu vết ,

Điều này hoạt động khi nó chọn ra tất cả các phần tử có giá trị i= 0 đến 19 (19 là tổng số phần tử trên trang) và thêm i,vào phần tử đầu ra số lần phần tử có giá trị ixuất hiện. Điều này quan tâm đến tất cả các yếu tố đầu vào, sắp xếp chúng theo thứ tự tăng dần.

Chạy chúng trên trang fiddle JS đã cho trên Firefox mới nhất.

Hãy bình luận nếu bất cứ điều gì là vi phạm quy tắc.

Thử thách thú vị! Dưới đây là một vài người đầu tiên bắt đầu chúng tôi:

1. Tổng, 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)

Đối với mỗi n đầu vào, nối thêm n <a>phần tử vào <input>phần tử thứ n . Sau đó đếm các <a>yếu tố trong mọi <input>yếu tố lẻ .

2. Tối đa, 91 79 byte

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

Đối với mỗi n đầu vào, tham gia n <input>phần tử đầu tiên với tập hợps . Sau đó đếm các yếu tố trong tập hợp.

3. Sản phẩm, 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);

Hàm đệ quy, được đưa ra một phần tử có giá trị n, tự gọi nó với phần tử tiếp theo n lần và nối thêm <a>phần tử tiếp theo đó. Sau đó đếm các <a>yếu tố trong <output>.

Hãy cho tôi biết nếu có bất kỳ sai lầm hoặc vi phạm quy tắc.