Функции 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 с нуля до гуру.
Курс предназначен для начинающих и тех, кто хочет повысить интерактивность и удобство своего сайта для посетителей. Изучив его, Вы сможете создавать более красивые и функциональные сайты. 104 видеоурока: от основ JavaScript до готовых решений на jQuery.
Запись опубликована в рубрике Уроки javascript и jQuery. Добавьте в закладки постоянную ссылку.

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

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