Введение в JavaScript для Мага
Шрифт:
Теперь мы напишем скрипт, печатающий текущие дату и время. Результат будет выглядеть следующим образом:
Сам же код выглядит следующим образом:
<script language="JavaScript">
<!- hide
now= new Date;
document.write("Time: " + now.getHours +":" + now.getMinutes + "<br>");
document.write("Date: " + (now.getMonth + 1) + "/" + now.getDate + "/" +
(1900 + now.getYear));
// — >
</script>
Здесь мы пользуемся такими методами, как getHours, чтобы вывести на экран время и дату, указанные в объекте Date с именем now. Можно
В данном скрипте не выполняется проверки на тот случай, если количество минут окажется меньше, чем 10. Это значит, что Вы можете получить запись времени примерно в следующем виде: 14:3, что на самом деле должно было бы означать 14:03. Решение этой проблемы мы рассмотрим в следующем примере.
Рассмотрим теперь скрипт, создающий на экране изображение работающих часов:
Исходный код скрипта:
<html>
<head>
<script Language="JavaScript">
<!- hide
var timeStr, dateStr;
function clock {
now= new Date;
// время
hours= now.getHours;
minutes= now.getMinutes;
seconds= now.getSeconds;
timeStr= "" + hours;
timeStr+= ((minutes < 10)?":0": ":") + minutes;
timeStr+= ((seconds < 10)?":0": ":") + seconds;
document.clock.time.value = timeStr;
// дата
date= now.getDate;
month= now.getMonth+1;
year= now.getYear;
dateStr= "" + month;
dateStr+= ((date < 10)? "/0": "/") + date;
dateStr+= "/" + year;
document.clock.date.value = dateStr;
Timer= setTimeout("clock",1000);
}
// — >
</script>
</head>
<body onLoad="clock">
<form name="clock">
Время:
<input type="text" name="time" size="8" value=""><br>
Дата:
<input type="text" name="date" size="8" value="">
</form>
</body>
</html>
Здесь для ежесекундной коррекции времени и даты мы пользуемся методом setTimeout. Фактически это сводится к кому, что мы каждую секунду создаем новый объект Date, занося туда текущее время.
Можно видеть, что функции clock вызываются программой обработки события onLoad, помещенной в тэг <body>. В разделе body нашей HTML-страницы имеется два элемента формы для ввода текста. Функция clock записывает в оба эти элемента в корректном формате текущие время и дату. Для этой цели используются две строки timeStr и dateStr. Как мы уже упомянули ранее, существует проблема с индикацией, когда количество минут меньше 10 — в данном скрипте эта проблема решается с помощью следующей строки:
timeStr+= ((minutes < 10)?":0": ":") + minutes;
Как видим, количество минут заносится в строку timeStr. Если у нас менее 10 минут, то мы еще должны приписать спереди 0. Для Вас эта строка в скрипте может показаться немного странной, и ее можно было бы переписать в более знакомом Вам виде:
if (minutes < 10) timeStr+= ":0" + minutes
else timeStr+= ":" + minutes;
Объект Array
Массивы играют в программировании очень важную роль. Подумайте только, что бы Вы делали, если бы Вам понадобилось хранить 100 различных имен. Как бы Вы могли это сделать
с помощью JavaScript? Хорошо, Вы могли бы явным образом задать 100 переменных и присвоить им различные имена. Но согласитесь, это будет весьма утомительно.Массив может быть полезен там, где имеется много взаимосвязанных переменных. При этом к каждой из них Вы можете получить доступ, воспользовавшись общим названием и неким номером. Допустим, есть массив в именем names. В этом случае мы можем получить доступ к первой переменной с именем name, написав names[0]. Вторая переменная носит name[1] и так далее.
Начиная с версии 1.1 языка JavaScript (Netscape Навигатор 3.0), Вы можете использовать объект Array. Вы можете создать новый массив, записав myArray= new Array. После этого можно начать заносить в массив значения:
myArray[0]= 17;
myArray[1]= "Stefan";
myArray[2]= "Koch";
Массивы JavaScript обладают большой гибкостью. Например, Вам нет нужды беспокоиться о размере массива — он устанавливается динамически. Если Вы напишете myArray[99]= «xyz», размер массива будет установлен 100 элементов. (В языке JavaScript размер массива может только увеличиваться — массив не может «сжиматься». Поэтому старайтесь делать Ваши массивы как можно копактнее.)
Не имеет значения, заносите ли Вы в массив числа, строки, либо другие объекты. Я не останавливаюсь на каждой такой подробности структуры массивов, но надеюсь, Вы поймете, что массивы — очень важный элемент языка.
Конечно же многое станет понятнее, если рассматривать примеры. Следующий скрипт печатает следующий текст:
first element
second element
third element
Исходный код:
<script language="JavaScript">
<!- hide
myArray= new Array;
myArray[0]= "first element";
myArray[1]= "second element";
myArray[2]= "third element";
for (var i= 0; i< 3; i++) {
document.write(myArray[i] + "<br>");
}
// — >
</script>
Первым делом мы создаем здесь новый массив с именем myArray. Затем мы заносим в него три различных значения. После этого мы запускаем цикл, который трижды выполняет команду document.write(myArray[i] + "<br>");. В переменной i ведется отсчет циклов от 0 до 2. Заметим, что в цикле мы пользуемся конструкцией myArray[i]. И поскольку i меняет значения от 0 до 2, то в итоге мы получаем три различных вызова
document.write. Иными словами, мы могли бы расписать этот цикл как:
document.write(myArray[0] + "<br>");
document.write(myArray[1] + "<br>");
document.write(myArray[2] + "<br>");
Массивы в JavaScript 1.0
Поскольку в JavaScript 1.0 (Netscape Navigator 2.x, и Microsoft Internet Explorer 3.x) объекта Array еще не существовало, то мы должны думать и об его альтернативе. Следующий фрагмент кода можно найти в документации фирмы Netscape:
function initArray {
this.length = initArray.arguments.length
for (var i = 0; i < this.length; i++)
this[i+1] = initArray.arguments[i]
}
После этого Вы можете создавать массив одной строкой:
myArray= new initArray(17, 3, 5);
Числа в скобках — значения, которыми инициализируется массив (это можно также делать и с объектом Array из JavaScript 1.1). Обратите внимание, что данный тип массива не может включать все элементы, которые являются частью в объекта Array от JavaScript 1.1 (например, там имеется метод sort, который позволяет сортировать все элементы в определенном порядке).