Функции Javascript

И снова здравствуйте.

С основными определениями и внешним видом функций 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>

Результат: щёлкните по строчкам Меню

И ещё один, очень интересный пример функции с конструкцией if — else.

Увеличение картинки по клику и возвращение в исходное состояние при повторном клике.

karta1

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

Запись опубликована в рубрике Уроки javascript и jQuery. Добавьте в закладки постоянную ссылку.
А так же:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *