Перемешивание одномерного массива JavaScript

Создавая различные скрипты, на различные нужду, я постоянно сталкивался с проблемой рандомизации различного контента. Благо еще с первых курсов университета написал для себя общий алгоритм перемешивания. Во многих языках программирования уже есть функции перемешивания массивов, кроме JavaScript.

Что же, для себя я обнаружил два пути решения проблемы. Это собственная функция и прототип. Рассмотрю оба решения:

Прототип

Решение оказалось простым и мне его подсказал знакомый программист, работающий с JS.

[sourcecode language=»javascript»]
Array.prototype.shuffle = function() {
return this.sort(function() {
return 0.5 — Math.random();
});
};
[/sourcecode]

Мы просто вызываем метод sort с callback функцией возвращающей случайное число! и казалось бы, что этого вполне достаточно, но т.к. мне однажды понадобился чистый рандом, этот метод себя не оправдал.

Что я подразумеваю под чистым рандомом? Ну это как в идеальной теории вероятности вероятность каждого элемента выпасть равна 1 / на количество элементов.

Первые же тесты в разных браузерах себя не оправдали.

[sourcecode language=»javascript»]
Array.prototype.shuffle = function() {
return this.sort(function() {
return 0.5 — Math.random();
});
};

var N = 10000, a = [], i;
for (i = 0; i < 10; i++) { a[i] = 0; } for (i = 0; i < N; i++) { a[[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].shuffle()[0]]++; } alert(a); [/sourcecode]

Тест:

Вот, что выдавали браузеры:

Браузер Массив Квадратичное отклонение (σ)
Chrome 2918 2873 1843 1111 611 351 161 75 40 17 1092.24
Opera 2850 2776 1432 258 234 938 906 458 76 72 996.09
Firefox 1881 1827 1267 718 647 585 392 213 1237 1233 548.38
IE 521 937 795 1321 1021 1129 884 1227 1085 1080 217.75

Естественно эти результаты далеки от того, что мне нужно было и я решил написать свой простенькую функцию:

Функция

[sourcecode language=»javascript»]
shuffle = function(o){
for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[—i], o[i] = o[j], o[j] = x);
return o;
}
[/sourcecode]

Изначально она естественно выглядела не так. Но я решил ее переписать, дабы дать возможность начинающим программистам поломать немножко голову.

[sourcecode language=»javascript»]
shuffle = function(o){
for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[—i], o[i] = o[j], o[j] = x);
return o;
}

var N = 10000, a = [], i;
for (i = 0; i < 10; i++) { a[i] = 0; } for (i = 0; i < N; i++) { a[shuffle([0, 1, 2, 3, 4, 5, 6, 7, 8, 9])[0]]++; } alert(a); [/sourcecode]

Тест:

Результаты были превосходные!

Браузер Массив Квадратичное отклонение (σ)
Chrome 994 948 982 1021 1033 1029 978 1013 1011 991  25.08
Opera 1032 1020 1038 951 986 933 1007 997 1021 1015 32.68
Firefox 973 1027 1029 1031 1017 999 967 1011 982 964 25.26
IE 967 1003 1010 974 979 1027 980 1032 1047 981 26.53

Как видите разброс во всех браузерах небольшой и почти одинаковый! Советую пользоваться именно этим алгоритмом.

Насколько я помню, нам рассказывали о нескольких алгоритмах перемешивания массивов, если Вы владеете таковыми, то прошу делиться =)

JQuery. Основы. 1 урок

Сайт фреймворка

Почему бы не начать изучение клиентского языка программирования с основ JavaScript? Да! Действительно! Но, есть одно но. Расписывать то, что расписано уже по всем просторам интернета…

Я думаю ,что проще всего начать не с основ языка, а с одного очень известного фреймворка, которым пользуются многие крупные компании, такие как Google, Wikipedia итд.

Для чего нужен клиентский язык? Для обработки html страницы! У JS есть полный набор функций и методов для работы на логическом уровне, но также у JS есть способы обратиться к элементам DOM (Document Object Model). Т.е. мы запросто можем обратиться например к скрытому элементу

и сделать его видимым! Но, к сожалению, делать это при помощи только JS очень долго. А еще каждый браузер распознает команды по разному и получается, что для нормальных (Mozila, Opera, Chrome) надо писать один код, а для черезчур выпендрежных (IE) другой, чтобы выполнить одну и туже задачу!

И тут к нам на помощь спешит JQuery! Чудо фреймворк, он кроссбраузерный! Что значит нам не страшен вредный IE, а также безумно прост! Настолько, что даже программирование как таковое не надо знать, для простейших задач!

Итак, начнем!

Для начала его надо подключить в теге вашей страницы!

[sourcecode language=»html»]



Первый урок


[/sourcecode]

Теперь можно вносить изменения в DOM посредством JavaScript+JQuery в несколько раз проще! Сейчас будет немного магии и я все объясню! Напишем пару строк в

[sourcecode language=»html»]




[/sourcecode]

Теперь у нас на страничке есть кнопка и блок на слов, но он пуст. И вот! Настал момент для выхода JavaScript на сцену! Эту небольшую магию мы вставим сразу же после открытия блока

[sourcecode language=»javascript»]
$(document).ready(function() {
$(‘#push_me’).click(function(){
$(‘#blabla’).hide().html(‘Привет мир!!!’).fadeIn(‘slow’)
})
})
[/sourcecode]

Разберем код по кусочкам!

1) $(document).ready(function() { })

Практически все ваши JS скрипты будут начинаться с этих строк! Они значат, что анонимная функция записанная после метода ready будет выполнена, как вся страница будет загружена. Это очень важно! А важно потому, что мы будем апперировать со страницей и если скрипт загрузится раньше, чем страница, то он просто в свои указатели запишет, что этих элементов нет и ничего не произойдет!

Важно! Не забывайте закрывать все скобки и кавычки!

2) $(‘#push_me’).click(function(){})

Все, что стоит в начале это синтаксис, который предлагает JQuery. Он безумно удобен для тех, кто знаком с CSS, и он полностью поддерживает все способы селектинга как и в CSS. В данном случае селектинг ведется по всем элементам с id=»push_me». Все, что стоит за скобками $() есть методы, это могут быть методы и функции JS и в основном JQuery. В данном случае мы просто на все элементы с данным id вешаем обработчик клика. Т.е., как только кто-нибудь кликнет по нашей кнопке, будет выполнена анонимная функция

3) $(‘#blabla’).hide().html(‘Привет мир!!!’).fadeIn(‘slow’)

Знакомый селектинг по id! Теперь мы прячем этот элемент функцией hide(), записываем в него функцией html() сообщение «Привет мир!!!» и медленно выводим его на экран фукцией fadeIn(‘slow’), которая принимает аргумент скорости, выраженный словесно либо в цифрах (долисекундах)

Вот результат наших стараний и полный код!

[sourcecode language=»javascript»]



Первый урок





[/sourcecode]