Урок 3 - Первое свиданье с функцией



[an error occurred while processing this directive]

  • делаем текст невидимым;
  • учимся записывать функцию;
  • оператор if...else;
  • анатомия функции и новые объекты

Немного CSS

Помните спрятанный текст в первом уроке — пояснение для тех, кто не знает, что такое переменная?

Сегодня мы научимся делать такие штуки, а заодно напишем простенькую функцию.

Урок будет исключительно практический, мы галопом пронесёмся по неизведанным землям, не вдаваясь пока в подробности. Но очень скоро (а может быть, и в следующем уроке) наступит время «собирать камни». Морально готовьтесь: это будет очень занудно.

А сегодня — обширная и, надеюсь, содержательная экскурсия.

Сперва обратимся к CSS. Надеюсь, что основами этого языка Вы владеете. Если нет — советую на недельку (а может, только на пару часов — это зависит не столько от способностей, сколько от «степени фанатизма») отложить наши занятия и бегло ознакомиться с CSS...

...Ознакомились?

Итак, среди свойств CSS есть свойство display. У него есть куча значений:

  • none
  • block
  • inline-block
  • inline
  • table-header-group
  • table-footer-group
  • list-item

Кошмарики...

Признаюсь честно, далеко не все из них мне приходилось использовать, а с чем едят list-item или table-чего-то-там-group, пока не знаю вообще (хотя и догадываюсь).

Но сегодня нам нужны два: none и block.

Вы, наверно, уже догадались, что «display: none;» означает «скрыть», а «display: block;» — «показать», так сказать, в обычном виде.

Вот как выглядит тот кусок первого урока в коде:

<p class=txt"><b>Стоп! А знаете ли Вы, что такое переменная?</b></p> <p class=txt">Если нет, то нажмите эту <a href="javascript: displ('var')"><i>ссылочку</i></a> и прочитайте пояснение.</p> <div id="var" style="display: none;"> <p class=txt">Как работает компьютер? Все данные сохраняются на диске, и место, где они лежат, должно быть помечено, чтобы было ясно, где что искать. Любая программа (а скрипт&nbsp;— это не что иное, как маленькая программа) работает с какими-то данными. Поэтому удобно сразу «забить место» для них. Вот этим местом, этим <b>помеченным участком памяти</b> и становится переменная. Почему «переменная»? Потому что этот участок может заполняться разными значениями. Например, когда мы работаем с калькулятором, то числа и действия с ними, которые мы вводим, записываются программой в соответствующие переменные. А при нажатии кнопки выполнения вступает в действие алгоритм, использующий те значения, которые мы ввели.</p> <p class=txt">В коде программы переменные обозначаются именами, которые мы сами для них придумываем. Для создания имён существуют определённые правила, которые в разных языках программирования могут отличаться. Те ограничения, которые будут описаны ниже, относятся конкретно к языку JavaScript.</p> <p align="right"><a href="javascript: displ('var')"><i>Закрыть пояснение.</i></a></p> </div>

Начнём разбираться.

Скрытые <p> -абзацы упрятаны в <div>, которому дано персональное имя-идентификатор (id="var") и «невидимый» стиль (style="display: none;").

В двух ссылках, открывающей и закрывающей этот текст, мы видим один и тот же пока непонятный код. (Кстати, закрыть текст можно точно так же и верхней ссылкой, просто я поставил ещё одну, чтобы никто голову не ломал, как это сделать. Но это уже вопрос так называемого «юзабилити».)

В коде ссылок фигурирует знакомое "var", то есть «имя собственное» нашего div'а. А вот displ() — это имя функции, которая помещена между <head> и </head>.

Учимся писать функции

Это очень простенькая функция. Вот как она выглядит:

<script type="text/javascript"> function displ(nnn) { if (document.getElementById(nnn).style.display == 'none') {document.getElementById(nnn).style.display = 'block'} else {document.getElementById(nnn).style.display = 'none'} } </script>

Запомните синтаксис любой функции. У функции, как и у переменной, должно быть своё уникальное имя. После имени идут, как и в методе, круглые скобки. В них помещаются аргументы функции, тоже со своими уникальными именами. Если аргументов несколько, они перечисляются через запятые. В них функция передаёт нужные значения. Бывают функции, которые не требуют аргументов. Тогда круглые скобки всё равно ставятся, но остаются пустыми. Всё содержание или, как говорят программисты, «тело» функции (от англ. "body") заключено в фигурные скобки:

function имя_функции(аргумент1, аргумент2) { код в теле функции }

Можно и так:

function имя_функции(аргумент1, аргумент2) { код в теле функции }

И так:

function имя_функции(аргумент1, аргумент2) {код в теле функции}

И даже так:

function имя_функции(аргумент1, аргумент2) {код в теле функции}

То есть принудительного разрыва или, наоборот, «неразрыва» строки между скобками и другими элементами не требуется. Но обе скобки должны быть.

Я специально так много занудствую вокруг этого. Синтаксис любого языка программирования надо зарубить себе на носу, особенно HTML'щикам, так как HTML допускает некоторые варианты и, так сказать, «попустительство». Настоящий язык программирования — НЕТ!

Итак, наша функция displ(nnn) имеет аргумент nnn, который, как видно из фрагмента кода HTML, приведённого выше, берёт на себя id (идентификатор, уникальное имя) того элемента (тэга), который мы хотим показать или спрятать.

Залезем в «тело».

Здесь мы встречаемся с новым элементом JavaScript: оператором if...else.

Оператор if...else

Как правило, программы пишут для того, чтобы они, эти программы, облегчали наш труд и делали вместо нас какие-то действия. Для выполнения этих действий, или, иными словами, операций, языки программирования напичканы всевозможными операторами. Самый простой и употребительный оператор — if...else.

«Если (if) магазин открыт, я пойду в магазин. В противном случае (else) я пойду пить пиво.»

«Магазин открыт» является условием, при котором выполняется действие 1 («я пойду в магазин»).

При отсутствии этого условия (else) выполняется действие 2 («я пойду пить пиво»).

Напишем этот бред по-яваскриптски:

if (магазин открыт) {я пойду в магазин} else {я пойду пить пиво}

И снова обращаем внимание на синтаксис.

Условие — в круглых скобках.

Действия — в фигурных скобках.

Есть ещё и более краткая запись: без ключевых слов if и else, а с помощью специальных символов. Но на ранних этапах не рекомендую этим увлекаться. Попробуйте разобраться в этой маленькой головоломке сами:

магазин открыт?я пойду в магазин:я пойду пить пиво

Объекты, объекты, объекты...

Посмотрим «иф» из нашей функции.

Его условие — document.getElementById(nnn).style.display == 'none'

Что бы это значило?

Мы уже встречали такой объект document с методом write(). Помните — document.write("всякий там разный текст")?

Объект document — это наш с вами документ, файл, в который мы пишем код HTML. И у документа много разных методов. Есть и такой: getElementById(), то есть «взять элемент по его идентификатору». А в скобках — этот самый идентификатор. Обратите внимание на прописные и строчные буквы в имени метода. JavaScript чувствителен к регистру!

Найденный этим методом элемент — тоже объект, только рангом пониже, чем document. И у него есть свои методы и свойства. Некоторые из них соответствуют атрибутам тэгов HTML, вот как, например, свойство style.

Которое тоже, в свою очередь, объект со своими свойствами, среди которых и display.

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

И вот у этого последнего свойства-объекта нам нужно поймать значение none. Обратите внимание на сдвоенный знак равенства. Это, собственно, и есть знак равенства в JavaScript. Обычный, одиночный — это не равенство, а назначение, приравнивание.

Что же получилось? По-русски говоря, «если в документе есть элемент по имени такой-то, и он невидим» — вот оно, наше условие.

А теперь всё очень просто. Если этот самый элемент невидим, то он должен стать видимым. То есть в фигурные скобки действия скопируем то же самое, но вместо none поставим block.

В противном же случае (а «противный случай» наступает, когда наш элемент отображается) он снова должен стать невидимкой. Значит в действие для else просто копируем то, что было в условии.

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

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

Оказывается, мешает!

В документе HTML функция выполняется внутри атрибута href, в котором она уже закавычена. И с двойными кавычками она не выполнится. Это проверено методом тыка() на собственной шкуре и крыше и бессонных ночах.

Итак, мы узнали:

как строится функция, как работает цикл if...else, а также немного об объектах и их иерархии.

А также научились:

скрывать и показывать текст, нажимая на ссылку.

К следующему уроку >>

К списку уроков JavaScript

(© А. Фролов)