[JavaScript] #1 Практикум. Таблица Пифагора

Давайте рассмотрим простой пример - построим Таблицу Пифагора.

Таблица Пифагора – квадратная таблица у которой по горизонтали и вертикали расположены натуральные числа, а в самой таблице на пересечении её строк и столбцов – произведения этих чисел. По диагонали образуются полные квадраты чисел.

Так как таблица у нас двухмерная организуем два вложенных цикла, один будет отвечать за вертикальное построение, второй - за горизонтальное.

var i, j; //две переменные будут пробегать по горизонтали и вертикали таблицы и участвовать в её построении
const N=14; // размер нашей таблицы зададим через N, будет легче поменять в дальнейшем
for(j=1;j<N;j++)
{
for(i=1;i<N;i++)
{
document.write(i*j," ");
}
document.write("<br>"); //построили очередную горизонтальную линию, нужно перейти на новую строку
}

Запускаем и получим результат - Таблицу Пифагора, правда таблицей это назвать трудно, таблица разъехалась.

открыть этот пример в jsFiddle


Мы можем использовать теги html для получения в результате красивой таблицы, заодно и теги подучим.
Таблица обрамляется в теги <table></table>
Каждая строка обрамляется в <tr></tr>
а каждая ячейка в <td></td>
<table border=1">

var i, j; //две переменные будут пробегать по горизонтали и вертикали таблицы и участвовать в её построении

const N=10; // размер нашей таблицы зададим через N, будет легче поменять в дальнейшем

// начинаем строить таблицу, с границей border=1
document.write("<table border=" + 1 + ">");

for(i=1; i<=N; i++)
{
// строим очередную строку нашей таблицы
document.write("<tr align=right>");

for(j=1; j<=N; j++)
{
// а каждый элемент таблицы строим в ячейке
document.write("<td>" + i*j + "</td>");
}

//построили очередную горизонтальную линию, нужно её завершить
document.write("</tr>");
}

// и завершить построение таблицы
document.write("</table>");

открыть этот пример в jsFiddle


Можно нашу таблицу сделать ещё красивей - давайте выделим полные квадраты полужирным цветом с помощью тега <b></b>

Для этого заменим вывод ячеек таблицы в самом внутреннем цикле document.write("<td>" + i*j + "</td>"); на такие строки:

// если номер столбца и ряда совпадают сделаем вывод произведения полужирным
if (i===j)
document.write("<td><b>" + i*j + "</b></td>")
// в противном случае не будем не будем использовать полужирный
else
document.write("<td>" + i*j + "</td>");

У Вас должен получиться такой результат

открыть этот пример в jsFiddle

Хотелось бы немножко остановиться на используемом в условии if написании ===, встретившееся мне здесь впервые.

Начинающих, (ну хорошо, самых-самых начинающих) может сбивать с толку запись a=a+1, ведь это несуразица. Если вместо а представить 4, то получается 4=4+1, а ведь это неверно. Но это не знак равенства, как в математике, который утверждает что левая и правая части равны, здесь это символ присвоения значения. Вычисляется выражение справа, и результат помещается в переменную а. В некоторых языках программирования используется лишь знак =, а компилятор или интерпретатор сами разбираются равенство это или присваивание значения: в условии if –значит проверка на равенство, в другом месте – значит присваивание значения. Но в некоторых языках присваивание значения может стоять где угодно, даже в if, поэтому чтобы компилятор/интерпретатор не запутались, да и программист тоже, используют ==.

Использовать его мне поначалу было как-то необычно. Теперь прогресс пошёл ещё дальше, и как только я привык к == и !=появился тройной!!! знак проверки на равенство ===. Почему он здесь такой? Дело в том, что JavaScript являясь языком с динамической типизацией данных и может в переменной содержать что угодно(по типу), не определяя тип заранее, и даже изменяя тип по ходу программы. Поэтому равенство == это как бы равенство по значению, правой и левой частей, а === это равенство на идентичность объектов.

Смотрите более подробно о ==, === и динамической типизации у @rassen и @qqc

Я попрактиковался в программировании на JavaScript, чего и Вам желаю.

---

Задание 1. Сделайте чётные элементы таблицы полужирным, вот так: 1,2,3,4,5,6,7,...
Задание 2. Сделайте все что ниже главной диагонали таблицы полужирным
Задание 3. Сделайте обе диагонали таблицы полужирным

Решение(результат) вставляйте в комментариях в виде картинки, код вставлять сразу не надо.
(Решение не должно быть зависимым от N, при разных N должен быть соответсвенным результат.) Не отбивайте охоту у других решить самостоятельно.

Если Вы ещё не начали изучать JavaScript смотрите также Практикум #0. Введение и практикуйте.