Практикум по программированию на JavaScript

Создание функций

Показывать лекцию целиком

Концепция

При создании переменной результату команды или события 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 и ничего не будет выполнено.
  • Текст после команды <!-- должен находиться на одной строке.
  • Перед заключительной командой --> должна стоять двойная косая черта //, иначе JavaScript примет ее за часть сценария, что приведет к ошибке. Можно также добавить некоторый текст, так как он будет считаться комментарием.
  • Совсем не обязательно писать текст к этим командам. Текст присутствует для того, чтобы проще было понять их назначение.
    •

    Пользуйтесь приведенной выше схемой, и проблем не будет.

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

    Здесь происходит две вещи. Сначала в первой части сценария создается функция. Потом команда, находящаяся внутри оператора HTML <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. Сценарий с функцией должен находиться в документе HTML между командами <HEAD> и </HEAD>. Хотя на самом деле его можно поместить где угодно, но если вы расположите его после команды onLoad, он заработает только после того, как загрузится вся страница. Если сценарий располагается перед командой onLoad, то он загружается в память компьютера раньше, и когда onLoad вызовет его, он будет готов к работе.

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

    Задание

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

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

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

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

    Возможное решение

    Это задание требует известной сообразительности. Нужны две команды prompt, одна сразу за другой. Затем какая-то переменная, которая напечатала бы название страницы (например, "Моя замечательная страница"). Мы сделали это, поместив текст в заголовок и создав переменную для команды document.title. Потом потребуется переменная для document.location.

    Далее они используются в команде alert. Все это содержится в функции с именем hello(), а функция должна запускаться командой onLoad в строке BODY.

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

    <SCRIPT LANGUAGE="javascript">

function hello()
{
var first = prompt("Введите свое имя", "Имя")
var second = prompt("Введите свою фамилию", "Фамилия")
var page = document.location;
var ttl = document.title;
alert("Привет, " +first+ " " +second+ ". 
  Добро пожаловать на " +ttl+ " по адресу: " +page+".")
}

</SCRIPT>

    A вот команда BODY в документе:

    <body bgcolor="ffffcc" onLoad="hello()">
    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^