Урок 9
Создание функции

красным цветом даны примечания переводчика
Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Оглавление (в новом окне)

Концепция

Cоздавая переменную, вы присваиваете имя результату команды или события JavaScript. Создавая функцию, вы делаете почти то же самое, только имя присваивается целой серии команд. Множество команд JavaScript вы комбинируете в одну.

Скрипт

Сам скрипт состоит из двух частей: собственно функции и команды onLoad, которая ее запускает.
Вот обе части:

<SCRIPT LANGUAGE="javascript">

<!-- Скрыть от браузеров, не читающих Javascript

function dateinbar()
{
var d = new Date();
var y = d.getFullYear();
var da = d.getDate();
var m = d.getMonth() + 1;
var t = da + '/' + m + '/' + y;

defaultStatus = "Вы прибыли на страницу " + t + ".";
}
// не скрывать -->

</SCRIPT>

...и команда onLoad в <BODY>:

<BODY BGCOLOR="хххххх" onLoad="dateinbar()">

 

Эффект

Эффект скрипта можно увидеть в строке состояния. Этим же скриптом мы пользовались для получения даты на прошлыx уроках.

.

Разбор скрипта

Что это <!--  --> за штуки такие?

Еще одна команда. Возможно, она кажется вам знакомой. Этими знаками вы пользуетесь для комментариев в теле HTML:

<!-- Это текст комментария, не видимый на странице -->

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

Однако соблюдайте несколько правил:

  • Команды комментария должны находиться между <SCRIPT> и </SCRIPT>. Если вы поставите их снаружи, то браузер посчитает комментарием весь скрипт и ничего не выйдет.
  • Текст после команды <!-- должен находиться на одной строке.
  • Перед заключительной командой --> должна стоять двойная дробь //, иначе JavaScript примет ее за часть скрипта. Ошибка.
  • Нет, совсем не обязательно писать текст к этим командам. Я вставил его, чтобы вам проще было понять их назначение.
  • Пользуйтесь приведенной выше схемой, и у вас не будет проблем.

Вернемся к разбору

Сначала первая часть скрипта устанавливает функцию. Потом команда в строке <BODY> ее запускает. Давайте сначала разберем функцию.

function dateinbar()
{
var d = new Date();
var y = d.getFullYear();
var da = d.getDate();
var m = d.getMonth() + 1;
var t = da + '/' + m + '/' + y;
defaultStatus = "Вы прибыли на страницу " + t + ".";
}

Схема довольно понятная. Вы пишете "function" и даете ей любое имя, какое вашей душе угодно, точно так же, как мы делали с переменными. Оно может быть какой угодно длины, если в нем нет пробелов и это слово уже не участвует в JavaScript.
Но обратите внимание, что после имени функции стоят круглые скобки, как и после метода. То есть, создавая функцию, я как бы создаю новый метод для выполнения задачи.
На этот раз я выбрал имя "dateinbar()" (дата в строке состояния), потому что это функция и делает — помещает дату в строку состояния.

Очень важно!
Команды, из которых состоит функция, должны быть заключены в фигурные скобки {}. Видите, я поставил их сразу после имени функции и в самом конце?

Текст внутри фигурных скобок должен быть вам уже знаком. Тот же скрипт мы использовали пару уроков назад.

  • Создается переменная для года;
  • Еще одна для числа;
  • Еще одна для месяца;
  • Затем четвертая для даты целиком;

Последняя команда новая:

defaultStatus = "Вы прибыли на страницу " + t + ".";

"defaultStatus" (строка состояния по умолчанию) — свойство объекта window. Его цель — поместить текст в строку состояния внизу окна браузера. Но почему не написать просто window.status?

Хороший вопрос. Этого нельзя сделать, потому что такая схема используется для события, например, с командой onClick. Раз строка состояния не находится внутри команды HTML, берем defaultStatus. Есть только одна строка состояния — она же и по умолчанию.

Команда "onLoad="

Ребята, у нас новый обработчик! Команда onLoad (на вход, загрузку) (обратите внимание на заглавные буквы) говорит браузеру, что, загружая страницу, он должен выполнить следующее. В нашем случае следует функция dateinbar{}.
Эта команда почти всегда располагается в строке <BODY> документа HTML. И почти всегда за ней следует функция, но это необязательно. Можно с таким же успехом поместить туда и команду объект.метод.

Расположение элементов

Это имеет не последнее значение. Вы знаете, что onLoad идет в строку BODY. Скрипт с функцией должен находиться между командами <HEAD> и </HEAD>. Хотя на самом деле его можно поместить где угодно, но если вы расположите его после команды onLoad, он заработает только после того, как загрузится вся страница. Поместив скрипт перед командой onLoad, вы помещаете его в память компьютера, и когда onLoad вызовет его, он будет готов к работе.

Практически любой набор команд JavaScript можно записать в виде функции.

Ваше задание

Сегодня не самое простое задание. Создайте функцию, которая вызовет два запроса (prompt). (Подсказка: один следует за другим с новой строки.) Первый попросит пользователя ввести свое имя, второй — отчество. Затем та же функция должна вызвать окно предупреждения (alert) c текстом:

Привет, имя отчество, добро пожаловать на адрес страницы, мою замечательную страницу!

Непременно создайте переменную для адреса страницы.

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

Возможный ответ здесь

Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Вперед, на Урок 10

авторы Джо Бернс и Эндри Грауни. Оригинал и многое другое на английском языке © EarthWeb Inc.
Перевод, оформление и верстка © Татьяна.

Hosted by uCoz