И снова здравствуйте.
С основными определениями и внешним видом функций javascript мы уже познакомились в уроке Основные элементы javascript.
Сейчас будем практиковаться на примерах с привязкой к html элементам, и разбирать по составу, чтобы понять, как это работает.
Функция срабатывает при клике мыши
Создаём html элемент с текстом.
<p>Щёлкни по мне пожалуйста</p>
Для того чтобы эта фраза реагировала на клик мыши, добавим в него в качестве атрибута обработчик события onClick, и привяжем к нему имя функции, которая и будет включаться при клике мыши.
<p onClick="example()">Щёлкни по мне пожалуйста</p>
Теперь создадим эту функцию
<script>
function example()
{
//При клике меняет текст
document.write('Большое спасибо');
};
</script>
Функция выполняет математические операции
Введём в функцию несколько переменных
<script>
function example(){
// Объявляем переменные в теле функции
var a=5;
var b=10;
// Задаём им математическое действие
var s=b/2*a;
// Результат будет выводиться на экран
document.write(s);
}
// Вызываем функцию
example();
</script>
Программа выведет результат — цифру 25.
Функция с конструкцией if — else
Сделаем раскрывающееся меню
Для создание меню используем теги списка. В тегах ссылок вместо атрибута href используем атрибут name, так как пока нет адресов для перехода.
<ul>
<li onclick="Menu('1')">Меню 1</li>
<ul id="menu_1" style="display:none;">
<li><a name="">Меню 1.1</a></li>
<li><a name="">Меню 1.2</a></li>
</ul>
<li onclick="Menu('2')">Меню 2<style="/li>
<ul id="menu_2" style="display:none;">
<li><a name="">Меню 2.1</a></li>
<li><a name="">Меню 2.2</a></li>
</ul>
</ul>
Затем создадим функцию, в которой объявим переменную с доступом к элементу по id, и оператор if со значением menu.display == ‘none’, т.е. субменю изначально скрыто.
Затем в тело оператора введём условие: если субменю не видимо (menu.display == ‘none’), то при клике его надо сделать видимым (menu.display = ‘block’).
А если (else) субменю видимо, его при клике нужно сделать невидимым, т.е. наоборот.
<script>
function Menu(id)
{
var menu = document.getElementById('menu_' + id).style;
if (menu.display == 'none')
{
menu.display = 'block';
}
else
{
menu.display = 'none';
}
}
</script>
Результат: щёлкните по строчкам Меню
- Меню 1
- Меню 2
И ещё один, очень интересный пример функции с конструкцией if — else.
Увеличение картинки по клику и возвращение в исходное состояние при повторном клике.
HTML
<!--В код добавляем событие onclick с функцией-->
<p><img src="images/karta1.jpg" width="200" onclick="example(this)"></p>
В атрибут функции вводим ключевое слово this, обладающее очень большими возможностями, которые я пока объяснить не могу.
В нашем случае с его помощью работает анонимная функция.
JS
<script>
// Объявляем две глобальные переменные
var t, a;
// Объявляем функцию в атрибут которой будет передаваться значение this
function example(e){
// Метод clearTimeout прекращает работу программы после выполнения
clearTimeout(t);
//Объявляем локальную переменную со значение ширины картинки
var w = e.width;
// Задаём условие
if (a) {
// Метод setInterval последовательно выводит элемент каждые 5 ms
t = setInterval(function () {
// Доп. условие: при каждом выводе ширина уменьшается на единицу
if (w <= 200) clearTimeout(t);
e.width = w--;
}, 5);
}
// Если предварительное условие уже выполнено и остановлено
else {
t = setInterval(function () {
if (w >= 450) clearTimeout(t);
e.width = w++;
}, 5);
}
// Отмена условий по выполнении
a = !a;
}
</script>
Остаётся навести красоту и можно прикручивать эту опцию к CMS, но об этом в отдельной статье Увеличение картинки по клику.
Цикл с массивом < < < В раздел > > > Объект Match
Вот тут у меня есть готовый скрипт, который увеличивает до размеров загруженного на сервер изображения, и центрирует.
Уважаемый автор,
Как можно увеличенное изображение еще и отцентрировать?