Сформировать «Таблицу умножения»
Ребята, помогите пожалуйста разобраться с заданием. Мой код не работает. Спасибо всем, кто откликнется!
Задание:
1. С помощью циклов сформируйте таблицу 9 х 9.
2. В ячейки таблицы выведите результат умножения i * j (числа первой строки на числа первого столбца, то есть таблица умножения).
3. Первый ряд и первую колонку выведите с красным фоном.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
doctype html> html> head> meta charset="UTF-8"> title>Lab-3-5title> head> body> script type="text/javascript"> var n=9; document.write(""); for (var tr=1; trn; tr++) document.write(""); for(var td=1; tdn; td++) { color=((tr==1) document.write(''); document.write(td*tr); document.write(" "); } document.write(" "); } document.write("
"); script> body> html> как вывести таблицу умножения js
Таблицу умножения можно вывести с помощью вложенного цикла:
for (let i = 1; i 9; i += 1) for (let j = 1; j 9; j += 1) console.log(`$i> x $j> = $i * j>`); > console.log(); // добавляет пустую строку после каждого блока >; /* => 1 x 1 = 1 1 x 2 = 2 1 x 3 = 3 1 x 4 = 4 1 x 5 = 5 1 x 6 = 6 1 x 7 = 7 1 x 8 = 8 1 x 9 = 9 2 x 1 = 2 2 x 2 = 4 2 x 3 = 6 2 x 4 = 8 2 x 5 = 10 2 x 6 = 12 2 x 7 = 14 2 x 8 = 16 2 x 9 = 18 3 x 1 = 3 3 x 2 = 6 3 x 3 = 9 3 x 4 = 12 3 x 5 = 15 3 x 6 = 18 3 x 7 = 21 3 x 8 = 24 3 x 9 = 27 4 x 1 = 4 4 x 2 = 8 4 x 3 = 12 4 x 4 = 16 4 x 5 = 20 4 x 6 = 24 4 x 7 = 28 4 x 8 = 32 4 x 9 = 36 5 x 1 = 5 5 x 2 = 10 5 x 3 = 15 5 x 4 = 20 5 x 5 = 25 5 x 6 = 30 5 x 7 = 35 5 x 8 = 40 5 x 9 = 45 6 x 1 = 6 6 x 2 = 12 6 x 3 = 18 6 x 4 = 24 6 x 5 = 30 6 x 6 = 36 6 x 7 = 42 6 x 8 = 48 6 x 9 = 54 7 x 1 = 7 7 x 2 = 14 7 x 3 = 21 7 x 4 = 28 7 x 5 = 35 7 x 6 = 42 7 x 7 = 49 7 x 8 = 56 7 x 9 = 63 8 x 1 = 8 8 x 2 = 16 8 x 3 = 24 8 x 4 = 32 8 x 5 = 40 8 x 6 = 48 8 x 7 = 56 8 x 8 = 64 8 x 9 = 72 9 x 1 = 9 9 x 2 = 18 9 x 3 = 27 9 x 4 = 36 9 x 5 = 45 9 x 6 = 54 9 x 7 = 63 9 x 8 = 72 9 x 9 = 81 */ Урок 6 — Операторы цикла: for
Хотя JavaScript не универсален и не всемогущ, не велик и не ужасен, это всё же язык программирования, и он позволяет выполнять сложные математические вычисления. Иногда возникают ситуации, когда требуется многократно выполнить программный код, пока не выполнится определённое условие. Допустим, сдать карты в пасьянсе (очень хитроумная задача). Или сложить подряд числа от 1 до 15 (простейший вариант). Для этих целей существуют операторы, которые позволяют выполнять циклы — повторяющиеся действия.
Оператор for
Его синтаксис напоминает оператор if: условие в круглых скобках, код — в фигурных. Но условие более сложное:
for (начало; область действия; шаг)
Начало: здесь задаётся начальное условие, при котором оператор включается.
Область действия: границы, в которых выполняется код.
Шаг: способ продвижения цикла от начального к конечному условию.
Арифметическая прогрессия
Предположим, нам надо узнать и записать на странице сумму всех чисел подряд от 1 до 10.
Объявляем переменную счётчика i и переменную, собирающую знчения — x. Назначим ей нулевое значение. Все значения должны куда-то складываться, а неназначенная переменная — это Null («посмотришь на его место, и нет его»).
Начальное значение счётчика — 1. Граница — до 10 включительно, то есть меньше или равно 10. Шаг — 1 (каждое следующее целое число).
Привыкайте к специальным обозначениям. Если не помните, что такое ++ или +=, зайдите в прошлый урок и посмотрите табличку.
В коде x += i каждое новое значение счётчика приплюсовывается к переменной x.
Затем выходим из цикла и публикуем на странице итоговое значение.
А теперь чуть поинтереснее.
Вытащим на страницу все промежуточные значения счётчика. Для этого поместим document.write не выходя из цикла (то есть внутри фигурных скобок). А чтобы числа не печатались сплошной нераздельной строкой, добавим в него разделитель:
1; 3; 6; 10; 15; 21; 28; 36; 45; 55;
А как сделать, чтобы вся строка заканчивалась, скажем, точкойх
Для этого скомбинируем этот оператор с уже известным нам оператором if. else. То есть при последнем значении i (10) у нас должна выпасть точка, при остальных — точка с запятой и пробел:
1; 3; 6; 10; 15; 21; 28; 36; 45; 55.
Примечание: Кстати, вот оно, реальное различие методов write и writeln. Вместо пробела здесь можно применить метод writeln. Если мы запишем
Кстати, вот оно, реальное различие методов write и writeln. Вместо пробела здесь можно применить метод writeln. Если мы запишем . . if (i == 10)
то пробел делать не обязательно, его поставит сам метод.
Поскольку конечное значение счётчика — уже существующее условие, а не назначаемая величина, ставим сдвоенное равенство. И не запутайтесь в фигурных скобках.
А сейчас, допустим, нам захотелось вывести таблицу умножения — вот такую:
Да чтобы руками эту таблицу не форматировать и опечаток не наделать.
Давайте найдём алгоритм для составления такой таблицы.
Как мы помним из HTML, таблицы надстраиваются горизонтальными рядами , которые, в свою очередь, делятся на ячейки .
Рассмотрим содержимое первого горизонтального ряда.
Первый множитель увеличивается на единицу. Второй остаётся без изменений.
А в вертикальных столбцах — наоборот. Первый стоит на месте, а второй приращивается.
Рядов в нашей таблице девять (от 2 до 10), а колонок в каждом из них по 8 (от 2 до 9).
Попробуем сначала сформировать все через счётчик i.
Почему от 2 до 10, а не от 1 до 9?
Ну конечно, мы их потом будем использовать и для значений содержимого таблицы, а оно начинается с 2х2.
Наш первый должен выглядеть вот так (× — это спецсимвол HTML для отображения «школьного» знака умножения):
То есть внутри него ещё один цикл — из .
Эти циклы можно вкладывать, как и операции с if. else. Вложим?
Для второго цикла определим счётчик j.
var i, j; // Сначала нарисуем саму таблицу. // Внутренние кавычки (внутри тэгов) можно сделать одиночными, // а можно, как здесь, воспользоваться спецсимволом (см. урок 2) document.write(«») for (i = 2; i
Обратили внимание? Если i
Таблица умножения готова. Таким же способом можно сделать, например, таблицу символов Unicode. Полезная штука. Подобные алгоритмы используются в скриптах меню или календарей.
Оператор for. in
Оператор for. in используется для анализа всех свойств объекта. В результате выполнения производится перебор свойств объекта. Переменная цикла при каждом повторении содержит значение очередного свойства. Количество повторений тела цикла равно числу свойств, определенных для объекта.
переменная — переменная счётчика, как и для цикла for.
объект — любой объект JavaScript, который мы хотим «выпотрошить».
инструкции — код для тех действий, которые мы хотим произвести с объектом.
Итерация элементов массива
Что такое массивы, мы лучше узнаем через несколько уроков. Если объяснять «на пальцах», то это собрание в одном «флаконе» (объекте) маленьких «объектиков», которые мы с помощью различных кодов можем доставать из объекта-контейнера, как фокусник из цилиндра. Массивами являются некоторые встроенные коллекции документа: например, все картинки на странице — document.images, или же все ссылки — document.links.
Каждая ссылка — это отдельное свойство «большого объекта» — коллекции links. Размер всей коллекции (общее количество ссылок) тоже является её свойством. Давайте с помощью for. in пересчитаем все ссылки на данной странице.
Вообще, так сказать, «потенциальных» свойств в каждом объекте заложено очень много. И в разных браузерах эти дополнительные наборы могут отличаться. Как правило, эти «второразрядные» свойства объект не использует, и их значения являются пустой строкой или величиной null (то есть «ничто»). Но наш цикл будет добросовестно нанизывать эти километры ненужных свойств. Чтобы этого не было, мы поставим в нашей функции маленькую «заглушку» и выведем только реально существующие свойства.
Переменная msg «нанизывает» на себя все значения свойств (если они есть) с переводом каретки ( ), чтобы они располагались одно под другим. Чтобы вывести их на страницу, нужно теперь вызвать функцию:
Так вот, оказывается, сколько тут ссылок.
Это не все ссылки на странице. Последняя, 84-я находится несколькими абзацами выше этого списка.
Дело в том, что скрипт исследует данные от начала страницы до того места, где он находится. И все последующие ссылки оказываются за пределами его внимания (подробнее см. чуть ниже).
В IE отображаются только адреса и порядковые номера ссылок, а также общее их количество. Обратите внимание: общее количество на единицу больше последнего порядкового номера, потому что нумерация с нуля.
Браузеры Mozilla и Firefox выдают ещё имена функций, которые использовались в скрипте для всплывающих меню, тем самым участвуя в образовании ссылок:
Links[item] = function item() < [native code] >
Links[namedItem] = function namedItem()
Вообще-то можно этого избежать, поставив не , а .
Тогда давайте в самом конце кода страницы, перед тэгом , поставим скрипт, проверяющий атрибуты href всех наших ссылок:
1. Когда в атрибуте ссылки href мы прописываем «#», браузер понимает это как адрес текущей страницы с нашим значком в конце. В JavaScript адрес текущей страницы находится в конструкции self.location.href. Для поиска «забитой» ссылки необходимо включить в атрибут эту конструкцию.
Конечно, было бы проще сразу поставить все необходимые ссылки, а потом проверить присутствие/отсутствие этих страниц на сервере. Но для этого нужно воспользоваться другими языками: JavaScript — клиентский язык.
2. Почему в самом конце? Это как раз тот случай, о котором я упоминал в уроке 1. Браузер читает код страницы последовательно. Если его просят пересчитать ссылки, когда он ещё не прочитал их в документе (например, если он помещён в head), то он встанет в тупик и выдаст undefined. Если его поставить в середине страницы, то он остановится там, где находится. Поэтому нужно попросить его сделать выводы, когда он уже «переварил» всю необходимую информацию.
Просмотр свойств отдельного объекта
А теперь возьмём одну из этих ссылочек (допустим, одиннадцатую) и посмотрим, из каких свойств она состоит.
В результате мы получили полное «досье» на эту ссылку (в «Мозилле» опять же с кучей дополнительных параметров, но без некоторых свойств, которые поддерживает только IE: innerText, outerText, outerHTML).
Сейчас нам совершенно не нужны эти подробности. Просто я показал, как работает оператор for. in. Когда вы станете более опытными, то иногда понадобится вот так вот «взламывать» объекты в поисках каких-нибудь «экзотических» свойств, с которыми можно поэкспериментировать и, возможно, решить какую-нибудь нестандартную проблему.
- как работает оператор цикла for;
- как заглянуть внутрь объекта с помощью цикла for. in.
- А также научились:
- выводить сообщения на помеченные ссылки.
© 2003 — 2023 Дикая Правда — все права защищены, перепечатка статей запрещена
Используя оператор цикла и функции document.write() сформировать на веб-странице таблицу умножения чисел.
Здравствуйте,буду благодарен если поможете,подскажете ,с помощью оператора цикла и функции document.write() сформировать на веб-странице таблицу умножения чисел. Выглядеть она должна примерно так, как на рис. 2.1.
Используя два вложенных цикла вывести на экран таблицу Пифагора – таблицу умножения двух целых чисел
Используя два вложенных цикла вывести на экран таблицу Пифагора – таблицу умножения двух целых.
Вычислить таблицу значений функции, используя оператор цикла while и Repeat
Вычислить таблицу значений функции, используя оператор цикла while и Repeat. Результат вывести на.
Вывести с помощью цикла и функции document.write() в HTML документ текст
Вывести с помощью цикла и функции document.write() в HTML документ текст по следующему образцу:
Вывести таблицу значений функции f(x). Задание нужно выполнить используя оператор цикла с параметром (for)
Задание нужно выполнить используя оператор цикла с параметром (for) Даны действительные a, b и.
Сообщение от Nickname1244 
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
function element(tag, . contents) { return `${tag}>${contents.join('')}${tag}>`; } function map(iterable, mapping) { let result = []; for (let item of iterable) { result.push(mapping(item)); } return result; } function* range(from, to) { for (let i = from; i to; ++i) { yield i; } } const html = element('table', element('thead', element('tr', element('th'), . map(range(1, 9), i => element('th', i)), ), ), element('tbody', . map(range(1, 9), i => element('tr', element('td', i), . map(range(1, 9), j => element('td', i * j)) ) ) ), ); document.write(html);
td:not(:first-child) { background-color: lightgreen; } td, th { text-align: right; }
Самый нелапшеобразный результат, которого мне удалось добиться в рамках условий задачи.