Если вы прочитали предыдущие уроки Mootools, то Вам должны быть уже более или менее понятны большинство объектов библиотеки Mootools. Объект Slider особо ничем не отличается от других: создаете новый слайдер (new Slider), определяете элементы слайдера и ручки, определяете параметры и создаете несколько функций для функций обратного вызова и, в принципе, всё. Но, несмотря на то, что объект Slider и создается примерно по такому шаблону, есть несколько вещей, которые обязательно нужно нам пройти.

Основы

Создание нового объекта Slider

Давайте сразу начнем с кода HTML и CSS. Основным тут является со  здание длинного, прямоугольного блока div (насколько длинный, зависит от того, для чего слайдер будет использоваться) и его дочернего элемента div, который будет служить «захватом» слайдера.

<!--Вертикальный слайдер-->
<div id="slider">
   <div id="knob">&nbsp;</div>
</div>

А код CSS будет выглядеть немного позамысловатее:

/*Общий стиль для всего слайдера*/
#slider {
	height:20px;
 
    /*Я использовал заранее подготовленные рисунки
    сделанные в великом и могучем Фотошопе*/
 
	background-image:url('images/slider_body_h.png');
	background-repeat:repeat-x;
	background-position:center;
	width:150px;
}
/*Стиль "захвата"-ползунка*/
#knob {
	background-position:center;
	position:absolute;
	z-index:100;
	width: 20px;
	background-image:url('images/knob-20.png');
	background-repeat:no-repeat;
}

Теперь можно смело создавать новый объект Slider, для чего вначале создаем переменные с элементами и потом создаем новый («new«) объект slider, также, как мы это делали с объектами tween, drag.move и morph:

//создаем переменные для наших блоков
var sliderObject = $('slider');
var knobObject = $('knob');
 
//создаем новый объект slider
//но вначале, определяем элементы слайдера
//а потом определяем объект захвата
var SliderObject = new Slider(sliderObject , knobObject , {
    //а вот и параметры
    //ниже каждый из них рассматривается более подробно
    range: [0, 10],
    snap: true,
    steps: 10,
    offset: 0,
    wheel: true,
    mode: 'horizontal',
    //событие onchange запускается тогда, когда значение параметра step изменится
    //и передаст текущее значение этому параметру
    onChange: function(step){
        //сюда вставляем код того, что должно произойти по событию onchange
        //можно ссылаться на параметр step
    },
    //событие onTick передвигается, когда пользователь передвигает захват 
    //и передаст текущее положение (относительно родительского элемента)
    onTick: function(pos){
	//это необходимо для того, чтобы захват настроился
        //ниже остановимся на этом вопросе более подробно
	this.knob.setStyle('left', pos);
    },
    //срабатывает, когда ползунок останавливается
    //и пользователь "отпускает" его
    onComplete: function(step){
        //сюда вставляем код того, что должно произойти по событию onComplete
        //можно ссылаться на параметр step
    }
});

Немного грубовато все получилось, но, надеюсь, далее все прояснится.

Параметры объекта Slider

• snap – захват (по умолчанию – false): булев тип (думаю, все знают, что это такое). Определяет то, будет ли бегунок закрепляться за шагами по мере передвижения по слайдеру (тут немного запутано, но попробую объяснить этот пункт немного дальше).
• offset – сбвиг (по умолчанию – 0): относительный сдвиг захвата от первоначального положения. С этим параметром нужно поэкспериментировать, чтобы понять его назначение .
• range – диапазон (по умолчанию – false): Очень полезный параметр. Можно назначить диапазон значений, на которые будут разбиваться шаги (параметр steps). Например, если был указан диапазон [0, 200], а параметр steps (шаги) имеет значение 10, то расстояние между шагами будет равно 20. Диапазон может также включать в себя отрицательные числа, например [-10, 0], что оказывается очень полезным при инвертировании скроллера (дальше больше© ).
• wheel (по умолчанию – false): если установить параметр на true, то объект будет распознавать движения колеса мышки. При исползовании колёсика мышки, возможно нужно будет скорректировать диапазон, чтобы убедиться в том, что событие mousewheel не будет инвертировано (и снова дальше больше©).
• steps – шаги (по умолчанию – 100): Значение в 100 шагов очень удобно, так как его можно использовать как процентное соотношение. Однако, можно назначить столько, шагов, сколько душе угодно (в разумных пределах, конечно).
• mode – режим (по умолчанию – ‘horizontal’ – горизонтально): Режим определяет будет ли слайдер вертикальным или горизонтальным. Хотя, для того, чтобы сделать слайдер вертикальным или горизонтальным, нужно будет проделать еще несколько шагов.

Функции по событиям

• onChange: это событие запускается, когда текущий шаг изменяет свое значение. Передает новое значение параметра «step».
• onTick: срабатывает, когда измеяется положение бегунка. Передает новое значение параметра «position».
• onComplete: запускается, когда пользователь отпускает бегунок. Передает новое значение параметра «step».

Для лучшего понимания за что отвечает каждое событие и когда каждое из них изменяется, смотрите на пример ниже.

И самое вкусное – пример

Итак, давайте создадим, наконец, свой слайдер, который расставит все новые знания по полочкам.

.set();

Посмотрев на событие на элементе button и мы увидим метод .set() в действии. Он очень прост в использовании: просто вызываем слайдер, добавляем к нему метод .set() и шаг, с которым мы будем двигать бегунок.

window.addEvent('domready', function() {
	var SliderObject = new Slider('slider-h', 'knob-h', {
    	//параметры
		range: [0, 10],
		snap: false,
		steps: 10,
		offset: 0,
		wheel: true,
		mode: 'horizontal',
 
		//функции для ползунковых событий
	    onChange: function(step){
			$('change').highlight('#F3F825');
			$('steps_number').set('html', step);
	    },
    	onTick: function(pos){
			$('tick').highlight('#F3F825');
			$('knob_pos').set('html', pos);
			//эта строчка очень нужна (при горизонтальном режиме изменяется параметр left)
        	//она заменяет значение соответствующего параметра
	        //на значение текущего места "сброса" ползунка пользователем
			this.knob.setStyle('left', pos);
 	    },
    	//функиция, запускаемая при завершении перетаскивания ползунка
	    onComplete: function(step){
			$('complete').highlight('#F3F825')
			$('steps_complete_number').set('html', step);
			this.set(step);
	    }
	});
	//вертикальный слайдер
	var SliderObjectV = new Slider('slider-v', 'knob-v', {
		range: [-10, 0],
		snap: true,
		steps: 10,
		offset: 0,
		wheel: true,
		mode: 'vertical',
    	onTick: function(pos){
			//эта строчка очень нужна (при горизонтальном режиме изменяется параметр top)
    	    //она заменяет значение соответствующего параметра
        	//на значение текущего места "сброса" ползунка пользователем
	        this.knob.setStyle('top', pos);
    	},
		onChange: function(step){
			$('stepsV_number').set('html', step*-1);
	    }
	});
 	//устанавливает начальную точку вертикального слайдера на 0 (ноль)
	//иначе, начальной точкой была бы верхняя точка слайдера
	SliderObjectV.set(0);
 
	//устанавливает шаг слайдера на 7
	$('set_knob').addEvent('click', function(){ SliderObject.set(7)});
});

Обратите внимание на пример с вертикальным слайдером: мы не только изменяем параметр «mode» (режим) на «vertical» (вертикальный), но мы также используем свойство стиля «top» вместо «left» в событии onTick, и передаем ему новое значение с помощью функции .setStyle(). Далее, при отображении числа для события onChange, мы умножаем его на -1 (минус один), что делает из отрицательного числа, положительное (если кто помнит базовую математику ). Это позволяет сделать две вещи: первое – заменить 10 на 0, где 0 – нижняя точка слайдера. Практически такого же результата, в принципе, можно добиться и установив параметр «range» на [10,0], но, при этом, колесо мышки будет работать наоборот. И это подводит нас ко второй вещи: только так можно заставить скрипт правильно понимать движение колеса мышки, ведь оно получает значения, а не слова («vertical/horizontal»), а если пропустить первую «вещь» (с умножением на -1), то колесо прокрутки становится инвертированным. А проделав такой незамысловатый трюк, можно добиться правильного движения колеса прокрутки И получить правильные значения, где 0 (ноль) – минимальное значение, находящееся внизу.

К сожалению, не я это все придумал, а программист сайта ConsiderOpen.com, потому тут еще следует заметить, что этот трюк с умножением на -1 – это решение одного человека. Если Вам известен путь сделать тоже самое, но меньшими усилиями, все будут рады, если Вы этим поделитесь!

Судя по некоторым отзывам, мои уроки по Mootools очень помогают другим новичкам в плане Mootools. Но у меня, к сожалению, не так много интересных задач, которые я мог бы выложить в блог для рассмотрения и помощи другим новичкам, таким как я. Потому, хочу объявить о небольшой акции:

Если Вы также, как и я, учитесь программированию и у вас есть интересные задачи, темы, уроки? которыми вы готовы поделиться, пожалуйста, присылайте Ваши материалы мне на php – собака – инфониак.ru (думаю, разберете, как правильно адрес пишется) или просто через мою горячую линию.

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

1. материал написан на тему веб-программирования, поисковых систем, верстки сайтов, дизайна веб-страниц и вообще интернете. Не допускаются темы заработка в интернете и всего такого. Если я посчитаю, что материал не будет интересен мои читателям, я:

2. материал уникален;
3. опрятно написан, без ошибок и опечаток (не так как у меня );
4. состоит не менее чем из 300 слов, связанных между собой смыслом (см. пункт выше);
5. он уникален (см. пункт 2), если вы просто хотите перепостить материал уже размещенный на вашем сайте;
6. что в статье не просто теория, но и практические примеры (но и просто теория – не плохо, присылайте рассмотрим… я бы и сам попробовал придумать и прикрутить примеры);
7. если еще что-нибудь придумаю, обновлю .

С моей стороны вы получите в этом материале ссылку на Ваш блог и благодарности всех читателей за еще один хороший урок с примером

Основы

test()

В своем самом простом выражении, регулярное выражение – это простой текст, который нужно найти в документе. Несмотря на то, что JavaScript уже имеет встроенный объект RegExp, который отвечает за формирование регулярных выражений, со своей собственной функцией test(), но функция test() в Mootools является более дружелюбной её версией, чем яваскриптовская.

Для начала, посмотрим на самый простой пример использования функции test(), в котором будем искать определенный текст, в более объемном тексте.

//Текст или строка, в которой будем искать
var string_to_test = "Найти что-нибудь здесь";
 
//Регулярное выражение, которое будем использовать для поиска
var regular_expression = "здесь";
 
//применяем функцию test(), которая возвращает true или false
var result = string_to_test.test(regular_expression);
 
//переменная result имеет значение true

По сути, это такой же результат, если бы использовалась функция contains(). Однако, в то время, как contains() ищет целые слова, test() находит вхождения сочетания символов:

var string_to_match = "слово";
 
//вернёт false
string_to_match.contains('лов')
 
//вернёт true
string_to_match.test('лов');

И ещё обращу внимание на то, что регулярное выражение не будет чувствительным к регистру, если этого явно не указать с помощью специального ключа. Потому, поиск по регулярному выражению «слово», в слове «Слово» вернёт false. Пример:

var regex_demo = function(){
	//определяем функцию обработки
	var regex_demo_1 = function(){
	//определяем исходный текст
	var test_string = $('regex_1_value').get('value');
	//определяем регулярное выражение
	var regex_value = $('regex_1_match').get('value');
	//производим поиск в исходном тексте
	var test_result = test_string.test(regex_value);
 
	//сообщаем пользователю о текущем положении дел
	if (test_result){$('regex_1_result').set('html', "Есть совпадение!");}
	else {$('regex_1_result').set('html', "Нет совпадения");}
}
}

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

- . * + ? ^ $ { } ( ) | [ ] / \

Игнорируем регистр

Существует масса ситуаций, когда нет необходимости, чтобы регулярное выражение было чувствительным к регистру текста. Для того, чтобы это уточнить для функций, работающих с регулярными выражениями, нужно использовать параметр «i», как это указано в следующем примере.

//Строка, в которой будем производить поиск
var string_to_test = "ИгнОр РЕгИстрУ";
 
//вернёт false
string_to_test.test("игнор");
 
//вернёт true
string_to_test.test("игнор", "i");

Функции test() можно передать несколько параметров, но, так как JavaScript поддерживает только 3 параметра регулярного выражения (2 из которых включены по умолчанию в функции test()), параметр «i», вероятно, единственный, который нужно будет передавать. Ниже, в форме, можете протестировать функцию test() с параметром игнорирования регистра.

var regex_demo = function(){
	//Получить строку для тестирования из поля input
	var test_string = $('regex_value').get('value');
 
	//Получить регулярное выражение из поля input
	var regex_value = $('regex_match').get('value');
 
	//Проверить, требуется ли игнорирование регистра
	var regex_param = "";
	if ($('regex_param').checked){
		regex_param = "i";
	}
 
	//Произвести поиск и получить результат
	var test_result = test_string.test(regex_value, regex_param);
 
	//Обновить приготовленный контейнер для сообщения результатов поиска
	if (test_result){
       	$('regex_result').set('html', "Есть находка!  ");
	}
	else {
       	$('regex_result').set('html', "Ничего нет!  ");
	}
}

Интересная часть

Итак, мы уже просмотрели примеры простого поиска по регулярным выражениям, можно начать смотреть в сторону более сложных выражений. Охватить всю функциональность и возможности регулярных выражений сейчас не получится (да я и не претендую на это), но ознакомиться то «самое, самое», что можно будет использовать в своих простых приложениях, у нас получится. Даже этого должно будет хватить для решения простых задач (меня регуляри не раз спасали – некоторые до сих пор использую в DreamWeaver-е).

Находим начало строки с помощью оператора «^»

Оператор «^» при использовании в регулярных выражениях, помогает найти текст в начале строки, вне зависимости от того, существует ли этот текст далее в строке поиска. Установите оператор в начале строки для поиска, вот так:

//Строка, в которой будем производить поиск
var string_to_test = "поищем в начале текста"
 
//тестирует верхний текст на предмет того, начинается ли он с данной строки
//возвращает true
var is_true = string_to_test.match("^поищем");

Далее, если выражение не находится в начале текста, этот поиск
вернет, соотвественно, false:

//Строка, в которой будем производить поиск
var string_to_test = "поищем в начале текста"
 
//тестирует верхний текст на предмет того, начинается ли он с данной строки
//возвращает (удивление) false
var is_true = string_to_test.match("^начал");

Эти два примера можно и протестировать здесь:

Поиск по концам с помощью оператора «$»

Этот оператор работает также, как и предыдущий («^»), только с двумя исключениями:

1. Поиск только по концу строк
2. Устанавливается в конце регулярного выражения

В остальном, регЭкспы с этим оператором работают как и ожидается :

//Строка, в которой будем искать
var string_to_test = "поиск по концам строк";
 
//проверяет, заканчивается ли строка на слово "строк"
//и возвращает "true"
var is_true = string_to_test.match("строка$");
 
//проверяет, заканчивается ли строка на слово "металлика"
//и вовращает "false"
var is_false = string_to_test.match("металлика$");

Используя оба этих оператора, можно протестировать исходный текст на полное совпадение с регулярным выражением:

//Исходная строка
var string_to_test = "проверим на полное совпадение";
 
//Проверяет на полное совпадение со строкой "проверим на полное совпадение"
//возвращает true
var is_true = string_to_test.match("^проверим на полное совпадение$");
 
//Проверяет на полное совпадение со строкой "проверим на полное совпадение"
//возвращает false
var is_false = string_to_test.match("^проверим на совпадение$");

Классы символов

Классы символов – это ещё один инструмент регулярных выражений (жутко полезный, нужно заметить), позволяющий производить поиск нескольких определенных символов («А» или «Я», «f» или «r») или символов из определенного диапазона (от «A» до «Z» или от «r» до «z»). Если, например, есть необходимость проверить строку на наличие слов «бее» или «мее», мы заключаем две первые буквы этих слов в [квадратные] скобки, таким образом формируя класс символов и использовать следующее регулярное выражение:

//строка, в которой будем искать слово "мее"
var first_string_to_test = "овцы разговаривают словом мее";
 
//строка, в которой будем искать слово "бее"
var second_string_to_test = "козы разговаривают словом бее";
 
//это выражение найдет совпадение в первой строке, но не во второй
var returns_true = first_string_to_test.test("мее");
var returns_false = second_string_to_test.test("мее");
 
//следующее найдет совпадение во второй строке, но не в первой
returns_false = first_string_to_test.test("бее");
returns_true = second_string_to_test.test("бее")
 
//следующее найдет совпадение в обеих строках
returns_true = first_string_to_test.test("[мб]ее");
returns_true = second_string_to_test.test("[мб]ее");

Для того, чтобы использовать диапазон символов для поиска, нужно лишь указать начальную и окончательную точку диапазона, разделив их дефисом («-»). Так можно определять диапазоны как цифр, так и букв, причем необязательно ограничиваться латинскими: кириллические символы также хорошо понимаются движком регулярных выражений, как и латинские. Хотя, стоит оговориться, что букву «ё» движок регулярных выражений не понимает, хотя, возможно я чего-то не знаю (буду благодарен, если кто-нибудь ткнет меня носом в проблему ) .

//строка, в которой будем искать
var string_to_test  = " b, д или 3";
 
//поиск символов a, b, c, или d. Вернёт true.
string_to_test.test("[a-d]");
 
//поиск по символам г, д, е, ж или з. Вернёт true.
//Обратите внимание, "ё" в списке нет. "ё" не находится. Почему, пока не знаю...
string_to_test.test("[г-з]");
 
//поиск 1, 2, 3, 4 или 5. Вернёт true.
string_to_test.test("[1-5]");

Если необходимо искать несколько классов символов, нужно будет заключить такие классы в свои собственные [квадратные] скобки и разделить их логическим оператором «|» (OR – или). Таким образом, у нас появляется регулярное выражение с использованием вложенных квадратных скобок.

//строка, в которой будем искать
var string_to_test  = "b, д или 3";
//Вернёт true, так как все три выражения верны.
string_to_test.test("[a-d] | [г-з] | [1-5]");

Вот пример, в котором можно немного поиграться с полями: воодите туда любой текст, кликайте по соответствующим кнопка регЭкспа и следите за тем, что возвращает true, а что false. «Да прибудет с тобой сила!»

escapeRegExp()

Если ты, о читатель моего поста про регулярные выражения, дочитал до сего момента, и о тебе можно сказать, что ты человек с логическим типом мышления, то ты наверняка заметил, использование многочиленных специальных символов в определении регулярного выражения, например классов символов или его логики (ИЛИ – «|«, в начале строки – «^«, в конце строки – «$» и т.д.). Ты ведь наверняка уже понял, что все эти символы сильно затрудняют поиск самих специальных символов в определенной строке… На первый взгляд. А на второй взгляд, все что нужно сделать, это экранировать специальные символы другим специальным символом – обратный слэш «\«, а если нужно искать сам обратный слэш, то используются два обратных слэша «\\«. Логика проста, если не думатьо ней !

//Строка для поиска. Обратите внимание на специальные символы [ ] - и $
var string_to_match = "[всякий-разный-текст] или $300";
 
//Было бы неправильно составить такое регулярное выражение
//потому что движок будет их воспринимать, как специальные символы
//а нам этого не нужно
string_to_match.test("[всякий-разный-текст]");
string_to_match.test("$300");
 
//Правильно было бы так:
//обратите внимание на обратный слэш \ перед символами [ ] - и $
string_to_match.test("\[stuff\-in\-here\]");
string_to_match.test("\$300");

Когда регулярное выражение не большое, не составит особого труда экранировать каждый спец. символ. Но с другой стороны никто не отменял банальной человеческой невнимательности (которая у меня, например, хроническая), и такой специальный символ можно просто упустить из виду, или же, на стадиях своего обучения, можно и не подозревать, что ты пропустил специальный символ, не экранировал его и регЭксп не дает нужного результата. На всякий случай, если запомните сразу, вот специальные, рабочие символы регулярных выражений, которые НУЖНО экранировать:

- . * + ? ^ $ { } ( ) | [ ] / \

К счастью, Mootools – это не та библиотека, которая позволит своему пользователю бездарно убивать время на экранирование каждого рабочего символа, когда есть такая функция, как escapeRegExp(), чья работа – это избавить тебя, о начинающий программист, от экранирования специальных символов в регулярном выражении. Эта функция работает с любой строкой, потому ее можно использовать всегда, когда нужно произвести поиск какого-либо текста.

//Нужно экранировать
var unescaped_regex_string = "[текст-регулярного-выражения]";
 
//Экранируем строку
var escaped_regex_string = unescaped_regex_string.escapeRegExp();
 
//escaped_regex_string стала такой: "\[текст\-регулярного\-выражения\]"

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

//Строка, которую нужно экранировать
var unescaped_regex_string = "[текст-регулярного-выражения]";
 
//Экранировать строку, для поиска по началу строки
var escaped_regex_string = "^" + unescaped_regex_string.escapeRegExp();
 
 
//переменная escaped_regex_string стала такой:  "^\[текст\-регулярного\-выражения\]"

Ниже представлен пример, в котором видна разница между использованием и неиспользованием функции escapeRegExp():

var regex_demo = function(){
	//Получаем строку для проверки
	var test_string = $('regex_7_value').get('value');
 
	//Получаем регулярное выражение
	var regex_value = $('regex_7_match').get('value');
 
	//Проверяем, нужно ли экранировать текст
	if ($('regex_7_escape').checked){
		//Если да, применяем соотв. функцию
		regex_value = regex_value.escapeRegExp();
	}
 
	//Определяем параметры регулярного выражения
	var regex_param = "";
	//Проверяет, нужно ли игнорировать регистр
	if ($('regex_7_param').checked){
		regex_param = "i";
	}
 
	//Запуск теста
	var test_result = test_string_1.test(regex_value, regex_param);
	if      (test_result){$('regex_7_result').set('html', "Есть совпадения");}
	else {$('regex_7_result').set('html', "Нет совпадений!");}
}

Помните, что все примеры можно «сломать», если использовать неэкранированные специальные символы. Потому, если вдруг случается, что что-то перестало работать, после того, как только что это работало – не удивляйтесь, а просто перезагрузите страницу .

Если все пойдет по плану, то у меня на готовке еще несколь интересных материалов и уроков, потому не забудьте подписаться на мою RSS ленту.

Мои мысли по этому поводу таковы: «ТЫ ЧТО ДУРА!!!!!?????» как же так можно, а? нужно ж иметь хоть немного здравого смысла, чтоб полезть на скоростное шоссе… интересно, если у нас, Google Maps.RU вдруг проложит маршрут по МКАДу, неужели кто-то попрет туда пешком? ДА НИКОГДА! С таким же успехом можно подавать в суда на прохожего, который тебя не туда послал… «Господин судья, господа присяжные, я – истец, обвиняю ответчика в том, что, когда я спешил на собеседование на должность ген. директора ЛУКОЙЛ, не зная, где вход, попросил у ответчика подсказать где этот самый вход находится и он направил меня в другом направлении. В результате я опоздал на собеседование и не получил должность, соответственно, потерял недвижимость по всему миру, целый автопарк коллекционного авто, дети мои не пошли учиться в кембридж…. Прошу передать жизнь ответчика в мое личное пользование…»
Ситуация моя, конечно, из воздуха, но и гражданка США тоже удивила своей глупостью… В принципе, там многие такие, к сожалению… Смотрела бы на знаки, сэкономила бы себе кучу времени…
Люди, используйте карты гугл не забывайте использовать также и свои глаза, уши… Не пренебрегайте сигналами, которые они посылают в мозг, анализируйте их и выстраивайте собственные маршруты, если того требует ситуёвина… Удачи!

Тут стоит пояснить, что при отправке каждой смски с ответом (а это была просто цифра 1 или 2 в качестве варианта правильного ответа на вопрос), абонент получал доступ к одной картинке или чему-то там еще… Ну, вроде как за смску я, на самом деле, получал некий товар, а участие в викторине и баллы (как мне нравятся эти два слова… описывает, что делают операторы мобильной связи с нами… они нас «и баллы») шло прицепом. Но мне на картинки было наплевать, т.к. ну нафига они мне сдались эти картинки, да еще и такие идиотские: клубничка, малинка, яблочко, песочек, солнышко, цветочек и т.д.

После первого ответа на вопрос прошел день, и мне приходит смска с сообщением о том, что я могу выиграть «7 тыщь баллов» ответив на вопрос в следующей смске. Я ответил, получил 7000 баллов и получил следующий вопрос, за который предлагалось получить уже только 10 баллов. Я решил схитрить немного, и слать ответы только на вопросы, за которые предлагалось много баллов (видимо, это решение и спасло меня от полного опустошения от краха семейного бюджета, т.к. человек я, в принципе, азартный , да и жене хотелось подарить что-нибудь этакое… например, BMW X5 ).
В общем, примерно на 700 отправленных в виде смсок на номер 2009 рублей, я опомнился: я же не гражданин РФ… (да, да… я такой…) а вдруг я хрен что-то выиграю… Залез на злосчастный wallpapers.mts.ru, открыл правила участия в конкурсе и снова чудо:

«[...]
5. Права и обязанности пользователей Услуги и участников SMS Акции
5.1. Пользователем Услуги и участником SMS Акции может стать любое физическое лицо, являющееся гражданином РФ, выступающее стороной по абонентскому договору оказания услуг мобильной связи с оператором сотовой связи ОАО «МТС» (далее — «Оператор»).
[...]«

Конечно, тут нужно винить только лишь себя, в том, что не прочел сразу все правила, но я не стал тогда себя винить, а, как принято, нашёл вполне нормального виновного – организатора викторины… Я начал себе задавать вопрос «а почему это они слали мне вопросы, принимали от меня ответы, если симка записана именно на меня, иностранца, и не на кого-нибудь ещё. Т.е., ребята знали прекрасно, что я, по правилам, участвовать в викторине не смогу, а вот подарить денег, вполне.» Конечно, нужно им отдать должное… хорошо все придумали… это ж сколько гастарбайтеров в Москве, да и вообще в России: они ж просто отправляют деньги НИ ЗА ЧТО! Просто, эрудицию проверяют за 45 р за смс с вопросом… Хотя, это и эрудицией назвать сложно…

Тут я решил попробовать получить свои деньги обратно, т.к. считал, и до сих пор считаю, что я вообще не должен был получать СМСки с приглашением, с вопросами; и они должны были меня как-то предупредить, что я не смогу получить никакой приз или должны были получить от меня какую-нибудь электронную галочку хотя бы, что «с правилами участия в викторине ознакомлен, шлите дурацкие вопросы, а я вам буду деньги слать». Конечно же такого ничего не было.

Итак, позвонил я, вначале, в поддержку абонентов. Там сказали, «пишите жалобу». Написал жалобу с подробным описанием ситуации, отправил по факсу. Показалось мало: зашёл в отделение связи, написал ещё одну жалобу через пару дней, поставили печать о приеме и я ушёл.

Недавно получил СМСку от МТС с разъяснением того, что по правилам МТС, абонент должен ознакомиться с правилами оказания услуг компании МТС, прежде чем ими пользоваться… НО, т.к. вы (т.е. я) уже давний абонент нашей компании, мы возвращаем Вам на счет 127 рублей (они действительно были начислены)…

Вот такая несложная схема работы операторов мобильной связи приносит им многомиллиардные расходы своих абонентов, соответственно, принося многомиллиардную прибыль им, операторам мобильной связи. Кстати, я бы не вернул и 127 рублей, т.к. где-то там у них в правилах сказано, что смс на номер 2009 – это запрос на оказание услуги по предоставлению контента, который я, в принципе получил, а то что он мне нафиг не нужен, это уже другое дело

Получается, теперь сотни и тысячи мошенников, которых пытаются посадить наши доблестные правоохранительные органы, могут просто сказать, «хм.. а нужно было думать, когда они нам деньги давали…» А мошеннические агенты по недвижимости так и поступают… по договорам своим они получает деньги за предоставление информации. А информация у них предоставляется в виде адреса квартиры, которую человек хочет посмотреть перед тем, как снять/купить. Зачастую, такие квартиры нифига не сдаются и не продаются, там удивленные хозяева открывают дверь и говорят «а мы ничего не сдаем!» А при попытке получить деньги обратно, человеку тычут договор, где черным по белому написано, что взимается плата за предоставление информации… Информацию получил? Получил? Она тебя не устраивает – это уже сугубо личное дело.

Я на такие удочки не попадался, но слышал о таком, и в свое время, как-то даже звонил в такое агентство, где с меня хотели снять денег еще перед тем, как назовут адрес квартиры для съёма. Хорошо мне хватило ума отказаться . А вот в случае с викториной МТС, ума не хватило подумать, что ничего я не выиграю, и что это – всего лишь ОДИН большой лохотрон, который запустили все три основных оператора примерно в одно и тоже время….

Не попадайтесь на такие удочки, Дамы и Господа… Анализируйте!

В чем суть самовыполняющихся функций? Для этого нужно разобраться в том, как создаются и выполняются обычные функции в JavaScript. Обычно функцию вначале нужно определить, и это можно сделать разными способами и только после этого ее нужно вызвать. Например:

// определяем функцию
var execute = function(){
  $('result').set('text', 'функция execute выполнена');
}
 
//определяем условия ее выполнения
window.addEvent('domready', function(){
    $('exec').addEvent('click', execute);
});

Выполнить execute

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

(function(){
 
// определяем действия в функции
 
})();
//скобки говорят обработчику, что нужно сразу выполнить фунцию,
//определённую немного ранее

Почему я вспомнил, про интерактивные закладки? Потому что они построенны на базе таких функций и когда я пытался понять их структуру и логику, я задавал себе вопрос «зачем там скобки и что они делают?». Вот оно, как просо оказалось.

Пока мне в голову пришел только один пример работы самовыполняющейся функции: добавим еще несколько строчек JavaScript к нашему предыдущему примеру с функцией execute и, через setTimeout() добавим самовыполняющуюся функцию, которая изменит результат выполнения предыдущей функции execute через 2 секунды, потому обратите внимание на текст сообщения над кнопкой вызова. А вот, собственно, и сам код:

var execute = function(){
  $('result').set('text', 'функция execute выполнена');
}
 
var unexecute = function(){
  $('result2').set('text', 'функция execute выполнена');
  setTimeout((function(){
    $('result2').set('text', 'и через 2 секунды определяется и самовыполняется функция unexecute')
  }), 2000)
}
 
window.addEvent('domready', function(){
		$('exec').addEvent('click', execute);
		$('unexec').addEvent('click', unexecute);
	});

Выполнить unexecute

В этой задаче мне пришлось также столкнуться с объектом RegExp JavaScript. Я немного потренировался в его использовании, что, несомненно пошло мне на пользу. Например, я узнал, что для того, чтобы использовать РегЭксп-ы, не обязательно объявлять переменную, новый экземпляр объекта RegExp, а можно просто записать регулярное выражение в виде текcтовой строки, т.е. вместо

var r = new Regexp('.*', 'g');

можно просто написать вот так:

var r = '/.*/g';

Но, обратите внимание, что при использовании конструкции new RegExp использовать обратные слэши не нужно, т.к. при работе с регулярным выражением, объявленным таким образом, обработчик сам добавит недостающие символы. Также, в этом примере видно, что ключи к РегЭксп-у идут отдельным параметром к объекту, тогда как при составлении выражения в текстовой строке, ключ просто добавляется в конце регулярного выражения. В общем, если регулярное выражение просо записывается в строку, то и составляется оно по всем правилам составления регулярных выражений.

Ключ ‘g’ говорит обработчику, что не нужно останавливаться после первого вхождения регулярного выражения, а нужно искать по всему тексту, но простого указания этого ключа, как оказалось, совсем не достаточно.

В отличие от РНР, где функция preg_match_all записывает все вхождения в массив самостоятельно, для того, чтобы проделать тоже самое в JavaScript мне пришлось ускорить седение волос на голове:) Оказалось, что для поиска всех вхождений в документе с помощью JavaScript, нужно написать код такого плана:

r = new RegExp('.*text-([0-9]+).*', 'g');
res = null;
while(res = r.exec(s)){
	var i = r.lastIndex;
	// сюда вставляем код, который должен выполняться при нахождении регулярного выражения
	// это может быть запить найденного в переменную или ещё что-нибудь
}

где res – массив в который записываются результаты поиска, где, в свою очередь, res[0] будет содержать вхождение всего регулярного выражения, res[1] будет содержать вхождение в первой группе скобок, res[2] – во второй и т.д.
r – экземпляр регулярного выражения;
exec() – метод объекта RegExp, который находит вхождения, соответствующие регулярному выражению и записывает их в массив. exec() отличается от test() тем, что записывает данные в массив, тогда как test() просто возвращает true если находит вхождение или false если не находит. Если же предпочитаете работать не с объектом, а с текстовой строкой, которая содержит РегЭксп, то используйте обычные методы match() – аналог exec(), или search() – почти аналог test(), с тем отличием, что возвращает позицию начала вхождения.

Тут потребуется небольшая оговорка по поводу использования search(): так как он возвращает число, а не булев тип (true/false), при отсутствии вхождения этот метод возвращает -1.

Кстати, при использовании просто текстовой строки для хранения РегЭксп-а, можно также использовать метод replace(), который находит вхождение регулярного выражения, или обычного текста, и заменяет на указанный в параметре текст.

Идем далее: s – источник поиска, т.е. где будем искать.
.lastIndex – параметр, отвечающий за позицию, где было найдено последнее вхождение. Если этот параметр не указать, обработчик JavaScript найдет только первое вхождение, даже при указании ключа ‘g’.

Далее, часть Ajax. На сайте этого моего товарища уже были подключены Prototype и jQuery, потому, я решил не подключать еще и Mootools к этому салату (вначале думал подключить, так как только с ним и знаком). Решил просто посмотреть документацию по этим библиотекам, чтобы понять, какой из них лучше воспользоваться для составления пакета и отправки на скрипт сервера. Оказалось, что проще, чем это предлагает сделать jQuery, не получится!

$.post(ServerSideScriptUrl, {var1:value1, val2:val2 ...})

Как видно из этого, вообще ничего проще нет. Спасибо jQuery!! Знакомый до боли селектор из Mootools $, потом указываем метод отправки – get/post, и несколько параметров. Конечно, в моем скрипте, требовалось лишь отправить данные, без их последующего приема, потому мне именно вариант jQuery показался самым простым. К сожалению, массивы с данными через XHR отправить не получится, но форма передачи данных на сервер, указанная выше, вполне справится с задачей передачи вполне большого объема данных.

Думаю, на этом и хватит описывать мой героический скрипт РНР скрипт на стороне сервера даже описывать не буду, т.к. это скрипт на уровне первого класса (выполнен, тоже на уровне первого класса): получил данные, подключился к БД, записал в таблицу. Всё!

Конечно, это не большое достижение, но, все-таки – достижение. А тот факт, что я это все описал в этом посте, еще больше закрепит эти знания в моем прогламмерском мозгу.

Кстати, на фоне моего поста, посвященного первой решенной практической задачке, объявляю акцию:

Если вы учитесь программированию и решаете какие-либо задачи, присылайте их мне, буду их с удовольствием публиковать на рассмотрение всех посетителей блога. Думаю, они будут интересны не только мне!

Удачи!

P.S. Ух! Сколько ж раз я повторяю это слово в своих постах… со счета сбился… Но, КСТАТИ! Мой следующий урок Mootools посвещается именно работе с регулярными выражениями, так что НЕ пропустите!

С 10-го урока я начал публиковать уроки, посвященные спец. эффектам, которые можно создавать с помощью библиотеки Mootools. Если Вы еще не взглянули в эти уроки, очень рекомендую посмотреть.

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

Используется этот класс также, как и все остальные плагины библиотеки: создается новый («new») объект Drag.Move и назначается переменной. Далее назначаются параметры и события объекта. В принципе, это и есть вся основа. Кстати, объекты Drag и Drag.Move не определены в основной библиотеке, потом нужно будет создавать свою собственную сборку Mootools с помощью онлайн инструмента на сайте разработчиков.

Основы

Drag.Move

Установка перетаскиваемого элемента довольно проста. Давайте рассмотрим пример ниже. Обратите внимание, как отделяются параметры и события класса Drag.Move от событий и параметров класса Drag. Drag.Move расширяет и дополняет класс Drag, потому он будет принимать не только свои параметры и события, но и те, что относятся к классу Drag. Сегодня мы не будем углубляться в работу Drag, но мы взглянем на несколько его интересных параметров и событий.

var myDrag = new Drag.Move(dragElement, {
	        // параметры класса Drag.Move
		droppables: dropElement,
		container: dragContainer,
		// параметры класса Drag
		handle: dragHandle,
		// событие класса Drag.Move
		onDrop: function(el, dr) {
                        // вызовет предупреждение с атрибутом id сброшенного элемента
                        // в элемент, принимающий сброшенные элементы
                        // (это может показаться запутанным, на первый взглад, но, надеюсь,
                        // далее все проясниться
                        alert(dr.get('id'));
		},
                // События Drag
                // передаются перетаскиваемому элементу
                onComplete: function(el) {
			alert(el.get('id'));
		}
	});

Разберем всё это по полочкам…

Параметры Drag.Move

Параметры Drag.Move позволяют назначить два основных типа элементов:

• droppables – опеределяет элементы, которые будут способны «принять» сброшенный элемент
• container – установить контейнер перетаскиваемого элемента (будет удерживать элемент внутри этого элемента-контейнера)

Установка параметров доволно проста:

//определяем один элемент по id, который можно будет перетаскивать
var dragElement = $('drag_element');
//определяем массив элементов по их классу, которые смогут принят сброшенный элемент
var dropElements = $$('.drag_element');
//определяем контейнер
var dragContainer = $('drag_container');
//определяем объект Drag.Move
var myDrag = new Drag.Move(dragElement , {
	        // Параметры Drag.Move
                // назначаем элементу droppables массив элементов, определённых немного выше
		droppables: dropElements ,
               // назначаем элементу container элемент, определенный немного выше
		container: dragContainer
	});

Теперь наш перетаскиваемый элемент имеет свой контейнер, а также у нас имеется класс элементов, который будет принимать сбросы других элементов. Тут можно провести аналогию с современными аэропортами: не все аэропорты предназначены для принятия и обслуживания определенных типов самолётов. Так и в нашем случае: необходимо определить, какой класс сможет принимать «на посадку» перетаскиваемые элементы.

События объекта Drag.Move

События этого объекта дают возможность запускать определенные заранее функции в определенные этапы существования объекта, как например в тот момент, когда пользователь «совершил захват» передвигаемого элемента, когда он начинает его передвигать или когда он его сбрасывает. События объекта Drag.Move передаются каждому перетаскиваемому и сбрасывамому элементу в качестве параметров.

• onDrop – запускается при сбросе элемента в соответствующий принимающий элемент;
• onLeave – запускается когда перетаскиваемый элемент покидает границы элемента, способного принимать перетаскиваемые элементы;
• onEnter – запускается при входе перетаскиваемого элемента в зону принимающего элемента.

Как и любые другие события, которые мы до этого обсуждали, события объекта Drag.Move вызывают функцию, которая выполняется когда событие исполняется.

var dragContainer = $('drag_container');
 
var myDrag = new Drag.Move(dragElement , {
	// Параметры Drag.Move
	droppables: dropElements ,
	container: dragContainer ,
	// События Drag.Move
	// функции Drag.Move передадут перетаскиваемый элемент (в данном случае 'el')
	// принимающему элементу, с которым перетаскиваемый взаимодействует (у нас 'dr')
	onDrop: function(el, dr) {
		// на русском: "если элемента, на который происходит сброс НЕ ЯВЛЯЕТСЯ принимающий"
		if (!dr) {
			//ничего не делать
		}
		// в противном случае, т.е. элемент принимающий
		// делать то-то, то-то
		else {
			// действия, который произойдут,
			// когда элемента будет сброшен на принимающий элемент
		};
	},
	onLeave: function(el, dr) {
		// эта функция будет запущена, когда перетаскиваемый элемент
		// покинет границы принимающего элемента
	},
	onEnter: function(el, dr) {
		// эта функция будет запущена, когда перетаскиваемый элемент
		// входит в границы принимающего элемента
	}
});

Несколько событий объекта Drag

У объекта Drag есть совсем немного событий и параметров, но и я не все буду рассматривать:

Параметр – snap

Параметр snap позволяет определить, на сколько пикселей пользователь должен передвинуть курсор прежде чем начнется сам процесс перемещения элемента. Значение по умолчанию – 6, но можно указать любое число или переменную, содержащую число. Конечно же, существуют некие логические рамки (установив это значение на 1000, никакой пользы не принесешь своему приложению), но все-таки этот параметр может сослужить хорошую службу разработчику при улучшении своего приложения.

var myDrag = new Drag.Move(dragElement , {
	        // Параметры Drag
		snap: 10
	});

Параметр – handle

Данный параметр добавляет «ручку» к вашему перетаскиваемому элементу. Эта «ручка» определяет единственную область элемента, которой можно воспользоваться для «захвата» перетаскиваемого элемента, что позволяет использовать оставшуюся часть элемента для других целей. Для определения «ручки», просто вызовите элемент.

// определяет массив элементов по классу
// это позволит нам добавить несколько "ручек",
// если нам нужно будет определять несколько передвигаемых элементов
var dragHandle = $('drag_handle');
var myDrag = new Drag.Move(dragElement , {
	        // параметры Drag
		handle: dragHandle
	});

Событие onStart

Событие onStart определяет функцию, которая будет запускаться при начале перетаскивания. Если значение параметра snap установлено большое, то событие не начнется до тех пор, пока заданное количество пикселей не будет пройдено.

var myDrag = new Drag.Move(dragElement , {
	        // Параметры Drag
		onStart: function(el) {
                    // сюда вставляем всё, что должно произойти вначале перетаскивания
               }
	});

Событие – onDrag

Событие onDrag будет работать постоянно во время перетаскивания элемента.

var myDrag = new Drag.Move(dragElement , {
	        // Параметры Drag
		onDrag: function(el) {
                    // сюда вставляем всё, что должно происходить во время перетаскивания
               }
	});

Событие onComplete

Событие onComplete запускается когда происходит сброс перетаскиваемого элемента и оно будет запущено вне зависимости от того, будет этот элемент приземлен в элементе droppable или нет.

var myDrag = new Drag.Move(dragElement , {
	        // Параметры Drag
		onComplete: function(el) {
                    // сюда вставляем всё, что должно произойти при сбросе элемента
               }
	});

Примеры

Снова подошло время моей любимой части любого урока: Пример!

Давайте, для упрощения процесса переваривания всей информации этого урока, соорудим пример, который бы содержал максимум из представленных параметров, событий и т.д. Поехали!

window.addEvent('domready', function() {
	var dragElement = $('drag_me');
	var dragContainer = $('drag_cont');
	var dragHandle = $('drag_me_handle');
	var dropElement = $$('.draggable');
	var startEl = $('start');
	var completeEl = $('complete');
	var dragIndicatorEl = $('drag_ind');
	var enterDrop = $('enter');
	var leaveDrop = $('leave');
	var dropDrop = $('drop_in_droppable'); 
 
	var myDrag = new Drag.Move(dragElement, {
	    // Параметры Drag.Move
		droppables: dropElement,
		container: dragContainer,
		// Параметры Drag
		handle: dragHandle,
		// События Drag.Move
		onDrop: function(el, dr) {
			if (!dr) { }
 
        	        else {
				dropDrop.highlight('#FB911C'); //мигает оранжевым
				el.highlight('#fff'); //мигает белым
				dr.highlight('#667C4A'); //мигает зеленым
			};
		},
		onLeave: function(el, dr) {
			leaveDrop.highlight('#FB911C'); //мигает оранжевым
		},
		onEnter: function(el, dr) {
			enterDrop.highlight('#FB911C'); //мигает оранжевым
		},
		// Drag Events
		onStart: function(el) {
			startEl.highlight('#FB911C'); //мигает оранжевым
		},
		onDrag: function(el) {
			dragIndicatorEl.highlight('#FB911C'); //мигает оранжевым
		},
		onComplete: function(el) {
			completeEl.highlight('#FB911C'); //мигает оранжевым
		}
	});
});

В этом примере, в отличие от большинства ранее представленных, мы будем серьезно использовать CSS, потому нужно добавить некоторые пояснения к таблице CSS. Для того, чтобы контейнер Drag.Move нормально определялся в IE, нужно будет подробно объяснить позиционирование элементов этому популярному браузеру. Очень важно определить элементу-контейнеру «position:relative», а перетаскиваемому элементу «position:absolute». Далее нужно удостовериться в том, что знаяения «left» и «top» для этого элемента тажке установлены. Ну, а если вы создаете приложение с перетаскиваемыми элементами, которое никоим образом не предназначается для IE, можете вообще не обращать внимание на эту часть.

body {
	margin: 0;
	padding: 0;
}
 
/* убедитесь в том, что перетаскиваемый элемент умеет "position: absolute"
 а параметры top и left установлены на значения для первоначального положения элемента*/
#drag_me {
	width: 100px;
	height: 100px;
	background-color: #333;
	position: absolute;
	top: 0;
	left: 0;
}
 
#drop_here {
	width: 200px;
	height: 200px;
	background-color: #eee;
}
 
/* убедитесь в том, что элемент-контейнер имеет "position:relative" */
#drag_cont {
	background-color: #ccc;
	height: 600px;
	width: 500px;
	position: relative;
	margin-top: 100px;
	margin-left: 100px;
}
 
#drag_me_handle {
	width: 100%;
	height: auto;
	background-color: #666;
	cursor:move;
}
 
#drag_me_handle span {
	display: block;
	padding: 5px;
}
 
.indicator {
	width: 100%;
	height: auto;
	background-color: #0066FF;
	border-bottom: 1px solid #eee;
}
 
.indicator span {
	padding: 10px;
	font-size:14px;
	display: block;
}
 
.draggable {
	width: 200px;
	height: 200px;
	background-color: blue;
}

Далее следует HTML код, который создаст нам плацдарм для восхощения возможностями Mootools.

<div id="drag_cont">
<div id="start" class="indicator"><span>Начало</span></div>
<div id="drag_ind" class="indicator"><span>Перетаскивание</span></div>
<div id="complete" class="indicator"><span>Завершен</span></div>
<div id="enter" class="indicator"><span>Вход в принимающий элемент</span></div>
<div id="leave" class="indicator"><span>Выход из принимающего элемента</span></div>
<div id="drop_in_droppable" class="indicator"><span>Сброшен в принимающий элемент</span></div>
<div id="drag_me">
<div id="drag_me_handle"><span>ручка</span></div>
</div>
<div id="drop_here" class="draggable"></div>
</div>

Хочу поделиться опытом! Я давно хотел научиться делать интерактивные закладки, чтобы размещать их на панели закладок браузера, но, к сожалению, пока этого так и не сделал…

Зато, я подсмотрел, как это делается у всяких сервисов, как, например, у сервиса автоматического постинга в различные сервисы закладок – bposter.net, и теперь, как минимум, могу просто их изменять и приспосабливать под собственные нужды. Но, обо всем по порядку…

Вначале, напомню, кто такая эта панель, да еще и закладок. В Win Safari она выглядит так:

Для тех, кто пока не рассмотрел и не особо понял, что это, пожалуйста:

Наверняка, многие знают, что сегодняшние браузеры могут хранить в закладках не только URL адреса понравившихся или полезных сайтов, но и короткие скрипты JavaScript, основанные на самовыполняемые функции, о которых я уже написал короткий пост, что, как мне кажется, станет очень полезным для многих. Я уже начал интенсивно пользоваться такими закладками.

Пока у меня есть только несколько примеров, как и зачем можно использовать такие закладки. Например, думаю, все специалисты, занимающиеся продвижением сайтов, знают сервис siteexplorer.search.yahoo.com, ведь на сегодняшний день, это чуть ли не единственный источник данных по обратным ссылкам на любой сайт, а для того, чтобы получить эту информацию, нужно сделать слишком много телодвижений, а именно:

- открыть сервис;

– возможно, yahoo.com попросит авторизоваться;

- набрать адрес сайта, инфу о котором требуется узнать;

- нажать на кнопку «Inlinks», чтобы перейти на отображение не кол-ва страниц в кэше Яху, а на, собственно, информацию об обратных ссылках;

- выбрать опцию «Except from this domain» (Кроме этого домена), чтобы исключить ссылки с этого домена;

– возможно, выбрать опцию «Entire Site», чтобы посмотреть ссылки, приходящие на страницы всего сайта, а не только на одну страницу.

Чтобы исключить всё это, требуется всего-лишь немного наблюдательности. Например, перетащите эту ссылку -

Обратные ссылки по SiteExplorer

- в панель закладок вашего браузера и нажмите на появившуюся там кнопку – вы увидите все ссылки, приходящие на все страницы моего блога.

А вот и сам код ссылки:

javascript:(function(){window.open('http://siteexplorer.search.yahoo.com/search?p='+encodeURIComponent(document.domain)+'&bwm=i&bwmo=d&bwmf=s');})();

Что в коде? Первым словом в атрибуте href идет слово javascript, которое сообщает браузеру, что ссылка – это JavaScript код. Далее – функция, которая открывает новое окно, вставляя имя домена (document.domain) текущего документа «куда надо». (По сути, такая ссылка действует также, как и ссылка вида javascript:history.back().) Если вместо window.domain использовать метод location.href, в открывшейся вкладке (окне), будут показаны обратные ссылки только на открытую страницу.

Вот еще несколько закладок, которые я уже соорудил (если кому что нужно, перетягивайте ссылку в панель закладок):

• Посмотреть, есть ли страница в индексе Яндекса:

Индекс Яндекса

Исходник:

javascript:(function(){window.open('http://www.yandex.ru/yandsearch?serverurl='+encodeURIComponent(location.href));})();

• Количество страниц с домена в индексе Google:

# страниц в гугле

Исходник:

javascript:(function(){window.open('http://www.google.ru/search?q=site:'+encodeURIComponent(document.domain));})();

• Есть ли страница в индексе Google:

Есть ли в кэше гугла?

Исходник:

javascript:(function(){window.open('http://www.google.ru/search?q=cache:'+encodeURIComponent(location.href));})();

Вообще, каждый, у кого есть плагин SearchStatus для Firefox, может проверить наличие страницы в кэше Гугла, но, может кому и пригодится такая закладка.

• Постинг в закладки через сервис bposter.net:

В закладки!!!

Исходник:

javascript:(function(){window.open('http://www.bposter.net/?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title)+'&desc='+encodeURIComponent(window.getSelection?window.getSelection():''));})();

Тут следует отметить, что я этот код совсем не придумывал, а просто заменил метод location.href на window.open, чтобы открывалась новая закладка (или окно, в зависимости от настроек браузера).

• Обратные ссылки по SiteExplorer.search.yahoo.com на весь сайт:

Обратные ссылки на сайт

Исходник:

javascript:(function(){window.open('http://siteexplorer.search.yahoo.com/search?p='+encodeURIComponent(document.domain)+'&bwm=i&bwmo=d&bwmf=s');})();

• Обратные ссылки по SiteExplorer.search.yahoo.com на данную страницу:

Обратные ссылки на страницу

Исходник:

javascript:(function(){window.open('http://siteexplorer.search.yahoo.com/search?p='+encodeURIComponent(location.href)+'&bwm=i&bwmo=d&bwmf=u');})();

Хочу заметить, что все эти закладки открывают новые вкладки (или окна, в зависимости от браузера и его настроек), что, как мне кажется, на порядок удобнее, чем когда эти страницы открываются на месте просматриваемых.

Ну вот, пока это все закладки, да и все, что я хотел тут написать. По мере того, как у меня будут появляться такие закладки, обязательно буду ими делиться через эту страницу.

Всем удачи в своих открытиях!

Некоторые из пунктов очень очевидны, думаю, только ленивый СЕО-работник не использует их, а некоторые раскрыты только потому, что они уже и так слишком раскрыты. Я имею ввиду, ну вот зачем раскрывать всем, что с домена nytimes.com (а точнее с одного из его поддоменов), либо с форума на поддомене sourceforge.net можно получить ссылку без nofollow? А только потому, что там этих ссылок уже и так уйма, и добавлять еще и себя туда, среди виагры, порнухи, таблеток и фармы абсолютно не нужно – такая ссылка, мне кажется, только навредит. Сами посудите: вот одна страница, вот другая. Эти страницы о PECL, а то, что там вылазят ссылки на всякие нечистоты – уже не хорошо, и даже если там вдруг появится ссылка на сайт/страницу/статью про PECL – сомневаюсь, что она даст ее владельцу серьезный вес, т.к. вся страница уже с черной пометкой «spam page» где-то там, в недрах гугловской БД и Гугл либо не учитывает эти ссылки при ранжировании, либо просто выбросил ее из свой выдачи.

Что касается ссылок с остальных доменов – мне думается, они рано или поздно все равно утратят свою значимость при ранжировании, но пока, естественно, можно их и попользовать. Например, можно, добавить ссылку на сайт в профиль при регистрации на форуме sourceforge (вообще, это нужно делать всегда, при регистрации на любом форуме), можно/нужно добавить ссылку на что-то продвигаемое в подпись, но и нужно потом использовать этот профиль, нужно быть активным форумчанином, чтобы эти ссылки имели хоть какую-то значимость. Еще раз, в качестве примера, возьмем уже упомянутый форум на поддомене sourceforge.net – http://ettercap.sourceforge.net/forum/. Я не поленился и посмотрел на список форумчан. Судя по их количеству – определенно очень популярный форум. 28419 пользователей. А между тем, кто-нибудь слышал про такую программульку, как Ettercap? Если кто не в курсе, вышла версия 0.7.3!!! Оказалось, что 27093 пользователя не написало ни одного сообщения (хотя, самые отпетые спамеры умудрились зарегистрироваться еще в 2001 году – они не оставили ни одного сообщения, но у них есть интересные сайты про фарм). Вопрос в том, стоит ли тратить время, на то, чтобы зарегистрироваться на форуме только ради того, чтобы получить одну ссылку, которая, скорее всего, уже никогда не проиндексируется из-за большого количества спаммынх ссылок? Длинный вопрос получился…

Ради чего я всего это написал? Просто хотел поделиться мыслью о том, что реально полезной информации на тему СЕО мало. Публикуется, в основном то, что опытные СЕО-специалисты уже испробовали и им это результата не дало, либо метод исчерпал себя. Они публикуют метод на своем блоге, получают кучу благодарностей в комментариях, трафика и доход с рекламы на блоге. Конечно же, отнюдь не все методы, публикующиеся на СЕО блогах – фальшивки. Например, я подписан на RSS блога Михаила Шакина – shakin.ru (Михаил мне, вообще, кажется, талантливым писателем, т.к. он не только про Интернет интересно пишет, но и просто про жизнь), и блога известного Рунет деятеля Димка (моего тезки, только меня просто Дима зовут ), который недавно получил от WebmastersWorld мою любимую игрушку – МакБук Pro.

Итого: верить всему, что написано в СЕО статьях и блогах, мне кажется, не нужно. Главное в этой сфере – умение анализировать факты! Почитал, проанализировал. При необходимости, проверил, протестировал. Слепо верить и следовать всему, что пишут в Интернете – не всегда верно и не всегда полезно. Так что моим ответом на вопрос в заголовке будет таким: Нужно думать самому.. ]]> http://php.infoniac.ru/question-how-to-get-links-from-popular-domains.html/feed 2