Веб-инструмент
Веб-мастерская
В сценариях JavaScript пременные могут хранить данные любых типов: числа, строки текста, логические значения, ссылки на объекты, а также специальные величины, например "нулевое" значение null или значение NaN, которое свидетельствует о недопустимости операции.
Переменная в JavaScript объявляется с помощью ключевого слова var. Имена переменных строятся по тем же правилам, что и в большинстве других языков программирования, т.е. имя состоит из латинских букв, цифр и знаков подчеркивания и начинаются с буквы либо с символа подчеркивания. Имена переменных, как и имена объектов, свойств и методов, чувствительны к регистру символов.
Способность переменных JavaScript хранить значения разных типов рассмотрим на следующих примерах.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Хранение строки в переменной</title>
</head>
<body>
<script language="javascript">
txt="Это мой первый сценарий JavaScript";
document.write(txt);
</script>
</body>
</html>
Это будет выглядеть ТАК или
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Хранение в переменной ссылки на объек</title>
</head>
<body>
<script language="javascript">
doc=document;
doc.write("Это мой первый сценарий javaScript");
</script>
</body>
</html>
А это будет выглядеть ТАК.
Единственное отличие этих веб-страниц, текст отображаемый в заголовке окна, сообщающий о назначении сценария.
В первом примере переменной txt присваивается строка символов, и эта переменная передается методом write() в качестве параметра.
Во втором примере переменной doc присваивается ссылка на объект и далее имя переменной указывается вместо имени document.
Из всего перечня операций доступных разработчику, рассмотрим операцию, которая задается символом "+".
В JavaScript символ "+" определяет как суммирование числовых выражений, так и конкатенацию строк. Так например, в результате вычисления выражения
а = 23 + 5;
переменной а будет присвоено значение 28, а после выполнения операции
а = "строка 1" + "строка 2";
в переменную а будет записана последовательность символов "строка 1 строка 2".
Если бы в JavaScript поддерживались типы переменных, рассмотрение оператора "+" можно было бы и окончить, однако, на самом деле, в любую переменную могут быть записаны значения различных типов, и это создает для разработчиков сценариев дополнительные трудности.
Рассмотрим пример.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Действия с переменными</title>
</head>
<body>
<h2>Числа и строки</h2>
<br>
<script language="JavaScript">
var a=30;
var b=25;
var c="String";
document.write("a+b=");
document.write(a+b);
document.write("<br><br>");
document.write("a+c=");
document.write(a+c);
document.write("<br><br>");
document.write("c+a=");
document.write(c+a);
document.write("<br><br>");
document.write("a+b+c=");
document.write(a+b+c);
document.write("<br><br>");
document.write("c+a+b=");
document.write(c+a+b);
document.write("<br><br>");
</script>
</body>
</html>
Исходный текст сценария мог бы быть гораздо короче, если бы мы заменили каждый фрагмент типа
document.write("a+b=");
document.write(a+b);
document.write("<br><br>");
одним вызовом метода write( ). Но для этого нам пришлось бы выполнить конкатенацию строк, выводимых при каждом вызове метода, а именно этого в данном случае и хотелось бы избежать, чтобы продемонстрировать особенносьи оператора "+".
В окне браузера этот текст будет выглядеть ТАК.
Давайте разберем, что написали.
Первая строка отображает результат суммирования двух числовых значений.
Вторая и третья — результат конкатенации строки и символьного представления числа.
Обратите внимание на две последние строки: если опрация суммирования чисел предшествует конкатенации, JavaScript вычисляет сумму чисел, представляет ее символьном виде, затем производит конкатенацию двух строк. Если же первой в выражении указана операция конкатенации, то JavaScript сначала преобразует числовые значения в символьный вид, а затем выполняет конкатенацию строк.
Объясняется такое поведение следующим. Интерпретация выражения
a + b + c производится начиная с первой операции суммирования, в которой участвуют два числа. Понятно, что результат будет представлять собой число.
Следующий опреатор "+" действует на число и строку.
Единственный разумный выход в такой ситуации — преобразовать число в строку и выполнить конкатенацию двух строк.
В выражении c + a + b первую операцию "+" невозможно вычислить, не преобразовав содержимое переменной а в строку. После того, как на первом шаге вычисления получается строковое значение, приходится преобразовывать в строку и содержимое переменной b.
Из сказанного выше следует простое правило: избегайте включать в сценарий выражения, результаты которых вы не можете предсказать.
Из все управляющих конструкций существующих в JavaScript рассмотрим оператор new. Несмотря на то, что большинство объектов уже созданы браузером и доступны сценарию, в некоторых случаях приходится создавать объекты в процессе работы. Это относится к предопределенным объектам и объектам, определяемым разработчиком сценария. Для создания объекта используется опреатор new, который вызывается следующим образом:
переменная = new тип_объекта(параметры)
Примеры использования оператора будут приведены в одном из сценариев.
В большинстве программ на JavaScript мы будем использовать функции. Формат объявления функции приведен ниже.
function имя_функции([параметры])
{
...
Тело функции
...
}
Объявление функции начинается с ключевого слова function. Для идентификации функции используется имя, при вызове функции ей могут передаваться параметры, а по окончании выполнения возвращаться значения. Тип возвращаемого значения и типы параметров не задаются. Ниже показаны два способа вызова функции:
имя_функции ([параметры]);
переменная = имя_функции ([параметры]);
Во втором случае значение, возвращаемое функцией, присваивается указанной переменной.
Рассмотрим использование функции на практоческом примере. Напишем скрипт, который будет выводить один и тот же текст три раза.
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Изучаем JavaScript</title>
</head>
<body>
<script language="JavaScript">
document.write("Я создаю веб-сценарии! <br><br>");
document.write("Это JavaScript! <br><br>");
document.write("Я создаю веб-сценарии! <br><br>");
document.write("Это JavaScript! <br><br>");
document.write("Я создаю веб-сценарии! <br><br>");
document.write("Это JavaScript! <br><br>");
</script>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Насколько это удобно и эффективно? И можно ли решить эту задачу другим способом? Попробуем это сделать иначе.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Используем функцию</title>
</head>
<body >
<script language="JavaScript">
function myFunction ()
{
document.write("Я создаю веб-сценарии! <br><br>");
document.write("Это JavaScript! <br><br>");
}
myFunction ();
myFunction ();
myFunction ();
</script>
</body>
</html>
В окне браузера это будет выглядеть ТАК.
Как видите, ничего не изменилось. Но зато HTML-код стал короче за счет использования функции
function myFunction ()
{
document.write("Я создаю веб-сценарии! <br><br>");
document.write("Это JavaScript! <br><br>");
}
Слова, помещенные между скобок {}, составляют команды, образующие функцию function myFunction (). Это означает, что обе команды document.write() теперь связаны воедино и могут быть выполнены при вызове указанной функции. В нашем примере есть три вызова функции myFunction(). В свою очередь, это означает, что содержимое этой функции было выполнено три раза.
Рассмотрим еще один пример по созданию функции. Для этого воспользуемся новым объектом Date и рассмотрим его методы getDay(), getDate(), getMonth(), getYear(), getHour(), getMinute(), и getSecond() (получить День, Число, Месяц, Год, Час, Минуту, Секунду).
Пишем скрипт.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Объекты и методы</title>
</head>
<body>
<script language="JavaScript">
//Скрипт отмечает точную дату и время вашего прибытия на страницу
Now = new Date();
document.write("Сегодня " + Now.getDate()+
"-" + Now.getMonth() + "-" + Now.getFullYear() + ".
Вы зашлинамою страницу ровно в: " + Now.getHours() +
":" + Now.getMinutes() + " и " + Now.getSeconds() +
" секунд.")
</script>
</body>
</html>
Внимание! Строка document.write должна находиться на на одной линии и не должна прерываться, иначе веб-браузер выдаст сообщение об ошибке.
В окне веб-браузера это будет выглядеть ТАК.
Разберем этот скрипт.
// — двойная дробь указывает на комментарий внутри скрипта. Она означает, что следующий за ней текст не участвует в процессе. Можете добавлять сколько угодно текста, только помните, что каждая строка должна начинаться с //.
Скрипту дается команда поместить в документ число, месяц, год, часы, минуты и секунды. Все это было создано с помощью метода getЧто-либо(). Обратите внимание на заглавную букву. Сначала «g» в нижнем регистре, потом Заглавная буква. Все это цифры. Даже метод getDay(), который отвечает за день недели, выражается цифрой от единицы до семи.
Начнем с месяца. Как уже говорилось раньше, getMonth() — это метод, отвечающий за месяц. Теперь задумаемся о том, на какой объект воздействует метод getMonth().
Может показаться, что getЧто-либо() — это метод объекта document. Это не так. Метод документа — write. getMonth() на самом деле является методом объекта Date. Взгляните на скрипт еще раз. Date занимает отдельное место в команде:
Now = new Date()
Такое впечатление, что следует писать new Date = Now, но это не так. Команда говорит: Now — это объект, который представляет new Date() (новую Дату). Дата обязательно должна быть новой. Таким способом вы будете получать новую дату каждый раз, когда заходите на страницу или обновляете ее.
Обратите внимание и на точку с запятой в конце. Она указывает на то, что строка JavaScript закончена. Без нее браузер решил бы, что команда продолжается на следующей строке. А это ошибка.
Еще пример. У нас есть объект, на который может воздействовать метод getMonth(). Нам нужно напечатать месяц на странице, значит, где-то должна быть команда document.write(). Нам также известно, что текст в скобках будет виден на странице, так давайте напишем все это, следуя логике:
Сначала пишем <script language="JavaScript">.
Потом вставляем комментарий о том, для чего предназначен скрипт.
Прежде чем приступить к getMonth(), необходимо создать объект. Убедитесь, что строка заканчивается точкой с запятой.
Теперь можно вставлять утверждение document.write.
Оформляем текст в скобках после document.write.
Текст, видимый на странице, должен быть окружен двойными кавычками (одинарные кавычки для кода HTML внутри двойных).
Новое правило: сочетание текста и команд требует знака «плюс» + между элементами.
Объект и метод разделены точкой, так что команда напечатать месяц выглядит так: Now.getMonth().
Новое правило: Now.getMonth() — это не текст, который должен быть виден на странице, а команда, которая указывает месяц. Поэтому не нужно ставить ее ни в какие кавычки.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Документ без названия</title>
</head>
<body>
<script language="JavaScript">
//Скрипт напечатает на странице номер месяца
Now = new Date();
document.write("Сейчас месяц " + Now.getMonth())
</script>
</body>
</html>
Посмотрите на первый скрипт еще раз. Длинная строка уже не кажется такой страшной. Это просто объект Now и метод getЧто-либо() после него. Ээлементы даты разделены дефисами. Помните, дефис должен быть виден на странице, поэтому его следует ставить в кавычки. Все части связаны между собой плюсами +.
В окне веб-браузера это будет выглядеть ТАК.
Теперь о пробелах. Сколько бы пробелов вы не ставили до и после знаков плюс, это никак не повлияет на видимый результат. Элементы пойдут сплошным текстом. Поэтому, если вам нужны пробелы, добавляйте их в части текста в кавычках. Например:
"Сейчас ровно"
Когда скрипт отпечатается на странице, пробел окажeтся на своем месте.
Помните: это не HTML. В Javascript существуют свои правила относительно пробелов.
Разберем длинную строку.
document.write("Сегодня " + Now.getDate() +
"-" + Now.getMonth() + "-" + Now.getFullYear() + ".
Вы зашли на страницу ровно в: " + Now.getHours() +
":" + Now.getMinutes() + " и " + Now.getSeconds() +
" секунд.")
Я начал с «Сегодня », прибавив пробел в конце.
Следом знак плюс.
Now.getDate() без кавычек, потому что нам нужен не текст, а цифры.
Еще плюс.
Потом дефис в кавычках, чтобы отделить следующие цифры. Никаких пробелов, потому что они должны стоять вплотную.
Плюс.
Потом Now.getMonth без кавычек, чтобы у нас был месяц.
Плюс.
Еще дефис в кавычках, чтобы он был виден на странице.
Плюс.
Еще один метод Now.getFullYear сообщит год.
Должно быть, вы заметили, что номер месяца на один меньше, чем нужно. Почему? Цифры сообщает нам JavaScript, a JavaScript любит считать от нуля. Tо есть, январь нулевой месяц и так далее.
Так что же делать? Прибавить 1, разумеется! Нужно ввести несколько переменных, то есть, присвоить имя некоему элементу. Вы присваиваете new Date() имя, как уже делали раньше. Затем присваиваете имя команде, которая вызывает месяц. Ниже я назвал ее mpo (Mесяц Плюс Oдин). И прибавляете к ней единицу. Эту новую команду я назвал mpo1. Вот как это выглядит:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Объекты и методы</title>
</head>
<body>
<script language="JavaScript">
Now = new Date();
var mpo = Now.getMonth();
var mpo1 = mpo + 1
document.write("Сегодня " + Now.getDate()+ "-" + mpo1 + "-" + Now.getFullYear() + ". Вы зашлина мою страницу ровно в: " + Now.getHours() + ":" + Now.getMinutes() + " и " + Now.getSeconds() + " секунд.")
</script>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Теперь попробуем решить эту задачу другим способом, используя переменные и функцию.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Используем функцию</title>
<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>
</head>
<body bgcolor="#CCFFFF" onLoad="dateinbar()">
</body>
</html>
Эффект скрипта можно увидеть в строке состояния.
В окне веб-браузера это будет выглядеть ТАК.
Разберем скрипт.
<!-- еще одна команда. Возможно, она кажется вам знакомой. Этими знаками мы пользуемся для комментариев в теле HTML:
<!-- Это текст комментария, не видимый на странице -->
Еще существуют браузеры, не понимающие JavaScript. Если браузер не читает 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 вызовет его, он будет готов к работе.
При работе с функциями возникает вопрос. Отличаются ли локальные переменные, объявленные в теле функции, от глобальных переменных, объявленных за ее пределами?
Работа с переменными в теле функции подчиняется следующим правилам.
Если переменная объявлена с помощью ключевого слова var, доступ к ней осуществляется следующим образом.
Переменная, объявленная внутри функции, считается локальной. Область видимости такой переменной ограничивается телом функции, в которой она объявлена.
Переменная объявленная вне функции, считается глобальной. К ней можно обращаться с любой точки сценария.
Если локальная иглобальная переменные имеют одинаковые имена, то втеле функции локальная переменная "маскирует" глобальную.
Если переменная создается автоматически, т.е. если она не объявлена с помощью ключевого слова var, но присутствует в левой части оператора прямого присваивания, то она считаетсч глобальной и становится доступной из любой точки сценария.
Обсудить на форуме