Практическая работа №8.
Тема: “Вывод информации в окно документа. Работа с таблицами. Тип данных дата-время.”
Теоретические сведения.
Метод document.write().
Создание таблицы умножения.
Метод «document.write()» позволяет дописывать XHTML-разметку на Веб-страницу.
Метод «document.write()»
Метод «document.write()» дописывает на Веб-страницу сразу после закрывающего тега «</script>» переданный аргумент. То есть, после выполнения кода ниже на страницу будет дописан результат вычислений.
var a=10*20/30+40-50;//Сохраняем число в переменной.
document.write(a);//Дописываем это число на Веб-страницу.
Точно также как и текст, на страницу можно дописывать какую-либо разметку XHTML. При этом следует следить за тем, чтобы на странице не возникли синтаксические ошибки, то есть чтобы всем открывающим тегам соответствовали закрывающие.
document.write('<strong>Выделение<\/strong>');//Вывод элемента ‹strong›.
Обратите внимание на закрывающий тег «</strong>». Перед дробью в нём появилась обратная косая. Это связано с тем, что просто так последовательность «</» внутри элемента ‹script› записать нельзя. Сценарий прерывается как только встречается эта последовательность, поэтому её всегда необходимо разделять. Простейший вариант — добавление обратной косой между этими двумя символами.
Таблица умножения
Давайте выведем на Веб-страницу таблицу умножения.
Для этого нам понадобятся два вложенных цикла. Внешний будет выводить строки таблицы, внутренний — заполнять их значениями.
document.write('<table><tbody>'); //Открываем теги элементов ‹table› и ‹tbody›.
for (var x = 1; x <= 10; x++) { // Цикл, который будет выводить строки.
document.write('<tr>'); //Открываем тег элемента ‹tr›.
for (var y = 1; y <= 10; y++) // Цикл, который заполняет строки ячейками.
document.write('<td>' + (x * y) + '<\/td>'); // Выводим элемент ‹td›. Как значение этого элемента записываем произведение номера строки на номер столбца, то есть x·y.
document.write('<\/tr>');//Закрываем тег элемента ‹tr›.
}
document.write('<\/tbody><\/table>');//Закрываем теги элементов ‹table› и ‹tbody›.
Вы можете посмотреть, как же выполнится приведённый код.
Давайте разберём, как же выводится таблица умножения. Сначала на страницу дописываются открывающие теги двух элементов, необходимых для создания таблицы — ‹table› и ‹tbody›.
Далее мы создаём цикл «for», в котором переменная «x» меняется от одного до десяти — это строки нашей таблицы умножения. В каждом из тактов этого цикла мы выводим открывающий и закрывающий тег элемента ‹tr›. Между этими тегами мы записываем элементы ‹td›, каждый из которых будет представлять собой одну ячейку таблицы в данной строке. Для их формирования мы применяем цикл «for», в котором «y» меняется от одного до десяти; в каждом такте выводится элемент ‹td›.
И завершаем всё закрывающими тегами элементов ‹tbody› и ‹table›.
Совместимость
Метод «document.write()» является устаревшим вариантом изменения страницы, и рассматриваем мы его лишь в ознакомительных целях. Использовать его не следует.
Резюме:
Метод «document.write()» удобно использовать для построения таблицы умножения.
Метод document.write() считается устаревшим.
Тип данных дата-время.
Создание календаря.
В ECMAScript существует тип данных дата-время, который позволяет легко работать с датой и временем.
Тип данных дата-время
Переменные типа дата-время создаются конструкцией «переменная = new Date()». При этом в переменной сохраняется дата и время присвоения, то есть в переменной сохраняется текущее время. Это время никак не обновляется, оно показывает время присвоения значения переменной, то есть при последующих обращениях оно будет постоянно.
Например, таким образом можно вывести окошко alert с текущей датой и временем.
var now=new Date();//Создаём переменную типа дата-время.
alert(now); //Выводим время инициализации переменной.
Вы можете посмотреть, как же выполнится приведённый код.
Объекты типа дата-время представляются как количество миллисекунд, прошедших с полуночи первого января 1970го года по универсально координированному времени (UTC).
Универсально координированное время (UTC) ранее называлось временем по Гринвичскому меридиану (GMT).
Для объектов типа дата-время определено множество методов.
Метод |
Описание |
getDate() |
Возвращает число месяца. |
getDay() |
Возвращает день недели. 0 — воскресенье, 1 — понедельник,… 6 — суббота. |
getFullYear() |
Возвращает год в четырёхзначном формате. |
getHours() |
Возвращает часы в 24-часовом формате. |
getMilliseconds() |
Возвращает миллисекунды. |
getMinutes() |
Возвращает минуты. |
getMonth() |
Возвращает месяц. 0 — январь, 1 — февраль, 2 — март,… 10 — ноябрь, 11 — декабрь. |
getSeconds() |
Возвращает секунды. |
getTime() |
Возвращает число миллисекунд с полуночи 1го января 1970го года по UTC. |
getTimezoneOffset() |
Возвращает сдвиг в минутах между локальным временем и UTC. |
getUTCDate() |
Возвращает число месяца по UTC. |
getUTCDay() |
Возвращает день недели по UTC. 0 — воскресенье, 1 — понедельник,… 6 — суббота. |
getUTCFullYear() |
Возвращает год по UTC в четырёхзначном формате. |
getUTCHours() |
Возвращает часы по UTC в 24-часовом формате. |
getUTCMilliseconds() |
Возвращает миллисекунды по UTC. |
getUTCMinutes() |
Возвращает минуты по UTC. |
getUTCMonth() |
Возвращает месяц по UTC. 0 — январь, 1 — февраль, 2 — март,… 10 — ноябрь, 11 — декабрь. |
getUTCSeconds() |
Возвращает секунды по UTC. |
setDate(числоМесяца) |
Изменяет число месяца на указанное. Если указать отрицательное значение или значение больше числа дней в месяце, соответственно изменятся остальные характеристики даты. Например, попытка установить 40е января сохранит в переменной 9е февраля. |
setFullYear(год) |
Изменяет год на указанный. |
setHours(часы) |
Изменяет число часов на указанное. Если указать число более 24 или менее нуля, то соответственно будет изменено число месяца, а при необходимости и месяц и год. Например, если в объекте датаВремя сохранено 12:00 31го декабря 1980 года, датаВремя.setHours(30) установит датаВремя в 6:00 1го января 1981 года. |
setMilliseconds(миллисекунды) |
Изменяет число миллисекунд на указанное. Если указать отрицательное значение или значение больше 999, соответственно изменятся остальные характеристики даты и времени. |
setMinutes(минуты) |
Изменяет число минут на указанное. Если указать отрицательное значение или значение больше 59, соответственно изменятся остальные характеристики даты и времени. |
setMonth(месяц) |
Изменяет месяц на указанный. Если указать отрицательное значение или значение больше 11, соответственно изменятся остальные характеристики даты. |
setSeconds(секунды) |
Изменяет число секунд на указанное. Если указать отрицательное значение или значение больше 999, соответственно изменятся остальные характеристики даты и времени. |
setTime(числоМиллисекунд) |
Изменяет время на указанное число миллисекунд. Если указать отрицательное значение или значение больше 999, соответственно изменятся остальные характеристики даты и времени. |
setUTCDate(числоМесяца) |
Изменяет число месяца по UTC на указанное. Если указать отрицательное значение или значение больше числа дней в месяце, соответственно изменятся остальные характеристики даты. Например, попытка установить 40е января сохранит в переменной 9е февраля. |
setUTCFullYear(год) |
Изменяет год по UTC на указанный. |
setUTCHours(часы) |
Изменяет число часов по UTC на указанное. Если указать число более 24 или менее нуля, то соответственно будет изменено число месяца, а при необходимости и месяц и год. Например, если в объекте датаВремя сохранено 12:00 31го декабря 1980 года, датаВремя.setHours(30) установит датаВремя в 6:00 1го января 1981 года. |
setUTCMilliseconds(миллисекунды) |
Изменяет число миллисекунд по UTC на указанное. Если указать отрицательное значение или значение больше 999, соответственно изменятся остальные характеристики даты и времени. |
setUTCMinutes(минуты) |
Изменяет число минут по UTC на указанное. Если указать отрицательное значение или значение больше 59, соответственно изменятся остальные характеристики даты и времени. |
setUTCMonth(месяц) |
Изменяет месяц по UTC на указанный. Если указать отрицательное значение или значение больше 11, соответственно изменятся остальные характеристики даты. |
setUTCSeconds(секунды) |
Изменяет число секунд по UTC на указанное. Если указать отрицательное значение или значение больше 999, соответственно изменятся остальные характеристики даты и времени. |
Методы, которые начинаются с get, возвращают дату и время, которые начинаются с set — принимают один параметр, который устанавливает новую дату и время. Если указать, скажем, 75 минут, то они будут преобразованы в 1 час и 15 минут. Если до этого время составляло 23:00, то тогда сменится и день месяца, и, возможно, и сам месяц и даже год. Если в методе присутствует UTC, то он работает с датой и временем по UTC.
Календарь
Давайте выведем календарь на текущий месяц.
Сначала неплохо подумать и решить, как же вывести календарь. Итак, календарь — эта таблица на шесть строк и семь столбцов. Почему семь столбцов? Пересчитайте количество дней в неделе.
Вот с шестью строками немного сложнее. Итак, в месяце у нас до 31го дня. Это четыре недели (7×4≤31) плюс ещё несколько дней. Перед этими четырьмя неделями может быть один-два дня, и после ещё один-два дня, то есть, в месяце может быть четыре полных недели и одна-две неполных, что в сумме составляет максимум шесть недель.
Давайте сделаем примерный календарик.
document.write('<table><tbody>'); //Открываем теги элементов ‹table› и ‹tbody›.
for (var i = 1; i <= 42; i++) { // Цикл, который будет заполнять таблицу.
if (i % 7 == 1)
document.write('<tr>');//Открываем тег элемента ‹tr›.
document.write('<td>' + i + '<\/td>'); // Выводим ячейку календаря.
if (i % 7 == 0)
document.write('<\/tr>');//Открываем тег элемента ‹tr›.
}
document.write('<\/tbody><\/table>');//Закрываем теги элементов ‹table› и ‹tbody›.
Вы можете посмотреть, как же выполнится приведённый код.
Конечно, эта таблица на календарь не очень похожа, но всё же, уже что-то.
Итак, мы выяснили, что календарь — это таблица 6×7 ячеек. Теперь нужно решить, с какой ячейки её заполнять. Посмотрите на календарь на сентябрь (этого года). Он заполняется с субботы, так как первое сентября — суббота.
Итак, сначала следует узнать, на какой день недели попадает первый день месяца. Это можно организовать с помощью метода getDay().
var now = new Date(); // Определяем текущую дату.
now.setDate(1); // Устанавливаем в переменной первое число текущего месяца.
var dayOfWeek = now.getDay(); //Определяем день недели.
if (dayOfWeek == 0) // Учитываем внутренний формат ECMAScript.
dayOfWeek = 7;
Теперь, зная первый день месяца, мы можем решить, с какой ячейки начинать заполнять календарь. Давайте для начала вместо ненужных дней выводить отрицательные числа и нуль.
var now = new Date(); // Определяем текущую дату.
now.setDate(1); // Устанавливаем в переменной первое число текущего месяца.
var dayOfWeek = now.getDay(); //Определяем день недели.
if (dayOfWeek == 0) // Учитываем внутренний формат ECMAScript.
dayOfWeek = 7;
document.write('<table><tbody>'); //Открываем теги элементов ‹table› и ‹tbody›.
for (var i = 2 - dayOfWeek; i <= 43 - dayOfWeek; i++) {//Цикл, который будет заполнять таблицу.
if ((i - 1 + dayOfWeek) % 7 == 1)
document.write('<tr>');//Открываем тег элемента ‹tr›.
document.write('<td>' + i + '<\/td>'); // Выводим ячейку календаря.
if ((i - 1 + dayOfWeek) % 7 == 0)
document.write('<\/tr>');//Открываем тег элемента ‹tr›.
}
document.write('<\/tbody><\/table>');//Закрываем теги элементов ‹table› и ‹tbody›.
Вы можете посмотреть, как же выполнится приведённый код.
Непонятны формулы? Попробуйте просто подставить значения вместо i и посмотреть на результаты.
Теперь необходимо узнать, сколько же дней в месяце, тогда мы будем знать, когда же прекратить цикл.
Помните, что setDate() учитывает количество дней в месяце?
Если мы попробуем установить, скажем, 31е сентября, дата сменится на 1е октября. Итак, проверяя, изменился ли месяц при смене числа, можно узнать, сколько же дней в месяце. Вот как это делается с помощью цикла while.
var now = new Date(); // Получаем дату.
var currentMonth = now.getMonth(); // Узнаём месяц.
var daysInMonth = 28; // Устанавливаем минимально возможное число дней в месяце (меньше не бывает).
while (currentMonth == now.getMonth()) // Проверяем в цикле, не изменился ли месяц при попытке установить невозможное число.
now.setDate(++daysInMonth); // Увеличиваем число.
alert(--daysInMonth); //Получаем число дней в месяце и выводим его на экран.
Вы можете посмотреть, как же выполнится приведённый код.
Давайте учтём это в цикле.
var now = new Date(); // Определяем текущую дату.
now.setDate(1); // Устанавливаем в переменной первое число текущего месяца.
var dayOfWeek = now.getDay(); //Определяем день недели.
if (dayOfWeek == 0) //Учитываем внутренний формат ECMAScript.
dayOfWeek = 7;
var currentMonth = now.getMonth(); // Узнаём месяц.
var daysInMonth = 28; // Устанавливаем минимально возможное число дней в месяце (меньше не бывает).
while (currentMonth == now.getMonth()) // Проверяем в цикле, не изменился ли месяц при попытке установить невозможное число.
now.setDate(++daysInMonth); // Увеличиваем число.
--daysInMonth;//Получаем корректное число дней в месяце.
document.write('<table><tbody>'); //Открываем теги элементов ‹table› и ‹tbody›.
for (var i = 2 - dayOfWeek; i <= 43 - dayOfWeek; i++) { // Цикл, который будет заполнять таблицу.
if ((i - 1 + dayOfWeek) % 7 == 1)
document.write('<tr>');//Открываем тег элемента ‹tr›.
if (i > daysInMonth)
document.write('<td>' + (i - daysInMonth) + '<\/td>'); // Выводим ячейку календаря на будущий месяц.
else
document.write('<td>' + i + '<\/td>'); // Выводим ячейку календаря на текущий месяц.
if ((i - 1 + dayOfWeek) % 7 == 0)
document.write('<\/tr>');//Открываем тег элемента ‹tr›.
}
document.write('<\/tbody><\/table>');//Закрываем теги элементов ‹table› и ‹tbody›.
Вы можете посмотреть, как же выполнится приведённый код.
И давайте выведем текущее число как-то по-особенному. Узнать его просто.
var now = new Date(); // Получаем дату.
var today = now.getDate(); // Узнаём число.
alert(today); // Выводим текущее число.
Вы можете посмотреть, как же выполнится приведённый код.
Текущее число мы уже узнали. Теперь давайте его выделим.
var now = new Date(); // Определяем текущую дату.
now.setDate(1); // Устанавливаем в переменной первое число текущего месяца.
var dayOfWeek = now.getDay(); //Определяем день недели.
if (dayOfWeek == 0) // Учитываем внутренний формат ECMAScript.
dayOfWeek = 7;
var currentMonth = now.getMonth(); // Узнаём месяц.
var daysInMonth = 28; // Устанавливаем минимально возможное число дней в месяце (меньше не бывает).
while (currentMonth == now.getMonth()) // Проверяем в цикле, не изменился ли месяц при попытке установить невозможное число.
now.setDate(++daysInMonth); // Увеличиваем число.
--daysInMonth;//Получаем корректное число дней в месяце.
now = new Date(); // Получаем дату.
var today = now.getDate(); // Узнаём число.
document.write('<table><tbody>'); //Открываем теги элементов ‹table› и ‹tbody›.
for (var i = 2 - dayOfWeek; i <= 43 - dayOfWeek; i++) { // Цикл, который будет заполнять таблицу.
if ((i - 1 + dayOfWeek) % 7 == 1)
document.write('<tr>');//Открываем тег элемента ‹tr›.
if (i > daysInMonth)
document.write('<td>' + (i - daysInMonth) + '<\/td>'); // Выводим ячейку календаря на будущий месяц.
else
if (i == today)
document.write('<td><strong title="Сегодня" style="color: red;">' + i + '<\/strong><\/td>'); // Выводим ячейку календаря на текущий месяц.
else
document.write('<td>' + i + '<\/td>'); // Выводим ячейку календаря на текущий месяц.
if ((i - 1 + dayOfWeek) % 7 == 0)
document.write('<\/tr>');//Открываем тег элемента ‹tr›.
}
document.write('<\/tbody><\/table>');//Закрываем теги элементов ‹table› и ‹tbody›.
Вы можете посмотреть, как же выполнится приведённый код.
Вот у нас и получился календарь. Осталось лишь учесть числа предыдущего месяца и немного оформить его. Это Вам остаётся на дом.