Книга: JavaScript. Учебник начального уровня
Начнём первый проект.
Начнём первый проект.
Как пример, иллюстрирующий написание программ на JavaScript, я выбрал известную игру сапёр. Сделал я это не осмысленно, просто я попытался нарисовать таблицу и поменять в ней что–то при нажатие на ячейку. Сделал и подумал, да это же почти сапёр!
Сразу скажу, что никакой особенной графики в программе не будет, зачастую следует различать создание интерфейса приложения и программирования его логики. Несмотря на то, что разделить их бывает не всегда просто — задача эта важная и нужная.
Ладно, перейдём к делу. Давайте пока просто попробуем нарисовать таблицу:
<html>
<head>
</head>
<body>
<table border=«2» width=«80%" height=«80%">
<tr>
<td>
cell11
<td>
cell12
<tr>
<td>
cell21
<td>
cell22
</table>
</body>
</html>
| cell11 | cell12 |
| cell21 | cell22 |
Как видно из кода, всё новое для нас заключено внутри тэга table. Собственно этот тэг и добавляет таблицу в документ.
Непосредственно в открывающем тэге выставляются ряд атрибутов, давайте коротко поговорим о каждом:
«id» — это идентификатор таблицы, именно с его помощью мы будем использовать таблицу в JavaScript. В общем случае — это произвольная строка. Для этого примера я его сделал равным «tbl» + идентификатор поста в блоге, чтобы не было наведённых проблем, а именно, если из другого скрипта (а он может быть в соседнем посте) будет обращение к элементу с тем же «id», что и в этом скрипте — наша табличка может тоже модифицироваться, что нежелательно.
«border» — это размер так называемого бордюра вокруг ячеек. Как это лучше сказать по–русски… Окантовка, наверное ближе всего. Мы указали, что бордюр будет шириной в два пикселя (пиксель — это как бы единица длины экрана монитора, причём самая маленькая, то есть не может быть пол пикселя). Можете поэкспериментировать со значением этого атрибута, его, например, можно сделать равным нулю и тогда ячейки совсем не будут разделены.
«width» — это ширина нашей таблицы. Можно было задать её в пикселях, как и толщину бордюра, но, в данном случае, как мне кажется, уместнее использовать относительную величину. А именно, 80% от ширины нашего документа. Следует всегда иметь ввиду, что реальный размер пикселя зависит и от разрешения экрана и от его размера. В одном случае объект шириной в 1000 пикселей может занимать половину ширины экрана, а в другом он может на экран не влезть.
«height» — тэг аналогичный тэгу «width», только он отвечает за высоту нашей таблички. Мы его также сделали равным 80%. Более подходящим вариантом было бы сделать таблицу квадратной, беря 80% от минимума высоты и ширины документа, но я решил излишни не усложнять код.
Далее идёт тэг «tr», он означает начало новой строки таблицы.
Следом за ним идёт тэг «td», означающий начало следующей колонки (ячейки в строке).
После тэга «td» идёт текст «cell11». Это тот текст, что будет написан в нашей первой ячейке. Затем опять переход к следующей ячейке, надпись «cell12», новая строка и там ещё две ячейки.
Пока эта таблица ничего не умеет, да и маловата она для сапёра, не интересно играть будет. Думаю стоит сделать её побольше, только вот не хочется для каждой ячейки писать по две строчки, плюс ещё по одной на каждую строку. Эдак у нас для поля 10х 10 получится 210 строчек текста на одну только таблицу, которая ничего не умеет. Может можно сделать это как–то компактнее? Давайте поговорим об этом в следующей главе.
Оглавление книги
- Ошибки проектирования базы данных
- Глава 7 Чего нужно опасаться при моделировании бизнес-процессов. Проектные риски моделирования бизнеспроцессов
- Первый просмотр: краткий обзор
- Семерка - первый шаг нового семейства
- 2.5. Разработка технического задания на проведение детального анализа рынка при работе над инновационным проектом. Основ...
- 7.4. Модель системы автоматизированного проектирования защиты информации
- Ключевые моменты больших проектов
- Перечень типичных просчетов при определении конечной цели проекта
- 3.1. Стратегии интернет-продвижения вашего проекта
- Основания для выполнения проекта
- Форма проекта
- Успешный руководитель проекта