<< Пред. стр.

стр. 31
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>

if (month == 1) {
dateline = "February ";


if (month == 2) {
dateline = "March ";


if (month = = 3 ) {
dateline = "April " ;


if (month = = 4 ) {
dateline = "May ";
290 Строим Web-сайты



if (month = = 5 ) {
dateline = "June ";


if (month == 6) {
dateline = "July "


if (month == •7 ){
August
dateline =


if (month == 8) {
dateline = "September


if (month 9) {
dateline "October


if (month 10) {
dateline "November ";


if (month == 11) {
dateline = "December ";


/* Следующая строка кода добавляет числовую дату в
переменную dateline, а также добавляет запятую с
пробелом.
Для получения даты в европейском формате поменяй : ;
ч
этот блок кода с предыдущим, удалите запятую и про-
бел, а также добавьте запятую после имени каждого
месяца в предыдущем блоке кода.
Если требуется получить простую строку даты, заме-
ните эту строку кода следующей строкой:
dateline += date + "/";
Ч
dateline += date + ", ";
/* - помощью следующей строки кода добавляется год
С
в числовой форме в переменную dateline. */
dateline += year;
ГЛАВА 55. Добавление строки даты и метки времени 291

/* Переменная dateline готова для отображения. Эта
строка кода предназначена для записи dateline на
Web-странице. */
document.write(dateline);


Этим завершается основной сценарий. Теперь в том месте, где
должна отображаться строка даты, добавьте следующий код:
<script language="JavaScript">doDateline();
</script>
В зависимости от ваших предпочтений можно разметить дан-
ный тег <script> как абзац, заголовок или текстовый элемент
любого другого типа:
<pxscript language="JavaScript">doDateline() ;
</scriptx/p>
Поместите основной сценарий вместе с вызовом doDateline
и вы получите вид строки даты, похожий на тот, что показана
на рисунке 55.1. Простая версия строки даты показана на ри-
сунке 55.2.




Рис. 55-.1. Строку даты можно добавить
на любую Web-страницу




Рис. 55.2. Если предпочитаете,
можно создать простую строку даты

10"
Строим Web-сайты
292

Инструментарий Генерирование метки времени
л
Данная функция JavaScript во многом сходна с предыдущей ф ак-
цией. Основной сценарий располагается между тегами
<script> в разделе заголовка HTML-файла или во внешнем
файле JavaScript. Дополнительный тег <script> внутри тела
Web-страницы служит для отображения метки времени.


Совет
Как и в случае строки даты, данный сценарий
метки времени генерирует время согласно
внутренним часам в компьютере посетителя.


Далее приводится код основной части сценария:
function doTimestamp() {
/* Как и в предыдущем сценарии, начнем с получения
текущей даты и поместим ее в переменную с названи-
ем now. */
var now = new Date () ; •
/* Извлечем теперь из переменной now часы (hour),
минуты (minutes) и секунды (seconds). */
var hour = now.getHours() ;
var minutes= now.getMinutes();
var seconds = now.getSeconds();
/* Инициализируем переменную timestamp, в которой
будет храниться строка текста, отображаемая брау-
зером. */
var timestamp = "";
/* Зададим для- переменной time значение " A.M." с
предшествующим пробелом для надлежащего форматиро-
вания. Если требуется отображать метку времени в
24-часовом формате, как 16:12:25 вместо 4:12:25
P.M., удалите данную строку кода. */
var time =" A.M.";
/* По умолчанию переменная hours в JavaScript ис-
пользует 24-часовой формат. С помощью следующего
блока кода проверяется, больше ли переменная hour,
чем 12. Если больше, то из значения вычитается 12
и время изменяется на P.M., опять с предшествующем
пробелом для надлежащего 'форматирования.
ГЛАВА 55. Добавление строки даты и метки времени 293

Если необходимо отображать время в 24-часовом фор-
мате , замените этот блок кода следующим кодом:
if (hour < 10) {
hour = "0" + hour;


Данный блок кода if/then добавляет ноль слева от
часов там, где это надо, чтобы шестой час отобра-
жался как "Об", а не как "6". */
if (hour > 12) {
hour -= 12;
time = " P.M.";
}
/* Подобным образом последующие блоки кода if/then
форматируют минуты и секунды так, чтобы они отоб-
ражались с нулями слева, где необходимо. */
if (minutes < 10) {
minutes = "0" + minutes;



if (seconds < 10) {
seconds = "0" + seconds;




/* Теперь сформируем строку метки времени. */
timestamp = hour + " : " + minutes + " : " + sec-
onds + t ime;
/* Запишем метку времени на страницу. */
document.write(timestamp);


Добавим следующий код в том месте, где требуется отображать
на Web-странице метку времени:
<script language="JavaScript">doTimestamp() ;
</script>
Возможно, вы пожелаете сдобрить метку времени дополнитель-
ным форматированием:


<em>This page generated at
294 Строим Web-сайты

<script language="JavaScript">doTimestamp{) ;
</scriptx/em>


Результат дополнительного форматирования показан на рисун-
ке 55.3.



Thispage generated at 9:18:57 А.М.




Рис. 55.3. Добавление мешки времени
ГЛАВА 56.
Разработка таблиц данных
Таблицы данных — это элементы таблиц, которые содержат строки и столбцы дан-
ных. Что касается мнения членов консорциума W3C, то таблицы данных являются
единственным типом таблиц, которые стоят обсуждения, поскольку спецификация
HTML определяет теги <table> именно для этих целей. В консорциуме W3C не лю-
бят, когда заимствуют теги <table> для «неправедных» целей, например, для созда-
ния макета страницы.



Определение
Таблица данных (data table) — HTML-таблица, в которой содержатся
строки и столбцы данных, а не макет страницы.



В таблице 56.1 показаны стандартные HTML-теги таблицы. Многие из этих тегов не
имеют смысла в контексте макетных таблиц, поэтому, возможно, они вам не извест-
ны. Но когда вы создаете таблицу данных, помните о них, поскольку надлежащая раз-
метка улучшает доступность результатов вашего труда для других пользователей.
Табл. 56.1. Стандартные HTML-теги таблицы в порядке их появления в коде
Значение
Тег

table Таблица
caption Заголовок таблицы
Столбец в таблице
col

colgroup Группа связанных столбцов в таблице
thead . Заголовок раздела таблицы
tfoot Нижний раздел таблицы
tbody Основной раздел таблицы; может приводиться несколько раз в таб-
лице для обозначения разных разделов в теле таблицы
Строка в таблице
tr

Ячейка таблицы, которая содержит заголовок строки или столбца
th

Ячейка таблицы, которая содержит обычный элемент данных
td

На рисунке 56.1 показана таблица данных, в которой используются все десять тегов из
•таблицы 56.1.
296 Строим Web-сайты

Просмотрите исходный код для показанной Web-страницы, чтобы разобраться, как
работает HTML-разметка.


yew Favwrtes
File Edit Iods yefe


Table 1 M utageruc Effects of the Kenneth Frequency on HTML Т,з Ые
Cells

3 d
4 5
1 2
:
x= |

(is :67
25
width 17 1108 1202
heiglit 18 J6S [525"
J21 ";26˜ [209

[center
[center
jleft inght right
.•ilisii left
valign [top Ibottom ibottom bc'ttom .bottoi
[bottom
CFF
bgcolor SoOOOFF.eWOPFFF WFFOOFF * M F F 0 ' i JKCTOю кос
5 Г 6
x= i 3 4
1 1 2




Рис. 56.1. В этой таблице данных
используются все десять тегов из таблицы 56.1

Листинг 56.1. Исходный код страницы, вид которой в браузере
показан на рисунке 56.1
•stable border="l">


<!— Первая часть содержимого представляет собой заголовок таблиць —



<caption> '
Table 1. Mutagenic Effects of the Kenneth Frequency on HTML
Table Cells
</caption>


<!— Далее идет описание структуры столбца таблицы. Теги <col> и
<colgroup> в этой конкретной таблице показывают структуру одного
столбца слева, ' а которой следует группа из шести столбцов. Обра-
з
тите внимание, что для тега <col> отсутствует его закрывающая вер-
сия, тогда как для тега <colgroup> закрывающий тег есть. —>


<col>
<colgroup span="6"x/colgroup>


<!— Далее идет головная часть таблицы, в которой описывается верх-
няя строка таблицы данных. Для ячеек таблицы используются теги <th>
ГЛАВА 56. Разработка таблиц данных 297

вместо тегов <td>, чтобы показать, что они являются ячейками голов-
ной части таблицы. —>


<thead>
<tr>
<th>x =</th>
<th>l</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
</tr>
</thead>


<!— Далее идет нижняя часть таблицы, в которой описывается послед-
няя строка таблицы данных. Она должна располагаться до любого из
основных разделов таблицы. Нижний раздел часто полностью совпадает
с головной частью, как в этом примере, но в нижней части может
иметься уникальное содержимое, такое, как строка итогов. —>


<tfoot>
<tr>
<th>x =</th>
<th>l</th>
<th>2</th>
' <th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
</tr>
</tfoot>


<!— Далее идет тело таблицы. Содержимое этой конкретной таблицы раз-
бито на три разные основные части. Первая из них начинается здесь.
298 Строим Web-сайты

<tbody>
<tr>
<th>width</th>
<td>17</td>
. <td>19</td>
<td>25</td>
<td>67</td>
<td>108</td>
<td>202</td>
</tr>
<tr>
<th>height</th>
<td>18</td>
<td>21</td>
<td>26</td>
<td>68</td>
<td>209</td>
<td>525</td>
</tr>
</tbody>


<!— Здесь размечается второй основной раздел. —>


<tbody> .•
<tr>
<th>align</th>
; <td>left</td>
<td>left</td>
<td>center</td>
<td>center</td> . •
<td>right</td>
<td>right</td>
</tr>
<tr>
ГЛАВА 56. Разработка таблиц данных 299

<th>valign</th>
<td>top</td>
<td>bottom</td>
<td>bottom</td>
<td>bottom</td>

<< Пред. стр.

стр. 31
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>