[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>"); //построили очередную горизонтальную линию, нужно перейти на новую строку
}
Запускаем и получим результат - Таблицу Пифагора, правда таблицей это назвать трудно, таблица разъехалась.
Мы можем использовать теги 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>");
Можно нашу таблицу сделать ещё красивей - давайте выделим полные квадраты полужирным цветом с помощью тега
<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>");
У Вас должен получиться такой результат
Хотелось бы немножко остановиться на используемом в условии 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. Введение и практикуйте.