JavaScript. Учебник начального уровня (DarkGoodWIN) - страница 5
«height» — тэг аналогичный тэгу «width», только он отвечает за высоту нашей таблички. Мы его также сделали равным 80%. Более подходящим вариантом было бы сделать таблицу квадратной, беря 80% от минимума высоты и ширины документа, но я решил излишни не усложнять код.
Далее идёт тэг «tr», он означает начало новой строки таблицы.
Следом за ним идёт тэг «td», означающий начало следующей колонки (ячейки в строке).
После тэга «td» идёт текст «cell11». Это тот текст, что будет написан в нашей первой ячейке. Затем опять переход к следующей ячейке, надпись «cell12», новая строка и там ещё две ячейки.
Пока эта таблица ничего не умеет, да и маловата она для сапёра, не интересно играть будет. Думаю стоит сделать её побольше, только вот не хочется для каждой ячейки писать по две строчки, плюс ещё по одной на каждую строку. Эдак у нас для поля 10х 10 получится 210 строчек текста на одну только таблицу, которая ничего не умеет. Может можно сделать это как–то компактнее? Давайте поговорим об этом в следующей главе.
Как программирование помогает сделать вашу страничку компактнее.
Помните пример из прошлой главы? Там мы рисовали табличку из четырёх ячеек на чистом HTML. Глава закончилась на том, что для создания таблицы 10х 10 ячеек будет нужно 210 строк внутри основных тэгов. Посмотрим, сумеем–ли мы сделать текст более компактны с помощью JavaScript.
Вот, что получилось у меня:
>
>
> head>
>
> function initTable()
> {
> var rowCount = 10;
> var colCount = 10;
> var tbl = document.getElementById(«tbl»);
> for (var i = 0; i < rowCount; i++)
> {
> var row = tbl.insertRow(i);
> for(var j = 0; j < colCount; j++)
> {
> var cell = row.insertCell(j);
> cell.innerHTML = 'cell' + i.toString() + j.toString();
>}
>}
>}
> script>
>
В итоге получается такая табличка: Начнём анализ с содержимого тэга «body». В самом открывающем тэге появился новый атрибут «onload». Как можно предположить из названия, этот атрибут отвечает за то, какое действие выполнится после загрузки страницы. В нашем примере мы указали, что после загрузки страницы должна выполниться некая функция, которая называется «initTable». Более подробно об этом поговорим несколько ниже. Что ещё поменялось в тэге «body»? Мы убрали всё содержимое тэга «table». Это вполне логично, так как заполнять его мы решили при помощи скрипта. Раз уж упомянули слово скрипт, придётся отдуваться. «script» — это самый большой тэг в примере к этой главе, но, как вы видете, он всё–таки значительно меньше 210 строк. Внутри него нет ничего, кроме скрипта на JavaScript. А теперь внимание, требуется перестроиться, внутри этого тэга больше не будет привычных для HTML конструкций. И если в HTML разбиение кода на смысловые блоки происходило с помощью тэгов, то теперь это будет происходить с помощью фигурных скобок.>
> table>
> body>
>html>