Задачи по javascript из книги "Выразительный javascript"

Задачи по javascript

Подборка задач из книги Marijn Haverbeke "Eloquent Javascript" (2nd). Вместе с этими задачами (или до них) стоит параллельно решать задачи по html/css. Решение задач и возможность проверить свой код по ссылке http://eloquentjavascript.net/code/. Еще цитаты из этой же книги по общим вопросам программирования.

Треугольник. Напишите цикл, выводит такой треугольник:

1
2
3
4
5
6
7

#
##
###
####
#####
######
#######
FizzBuzz. Напишите программу, которая выводит через console.log все числа от 1 до 100, с двумя исключениями. Для чисел, нацело делящихся на 3, она должна выводить ‘Fizz’, а для чисел, делящихся на 5 (но не на 3) – ‘Buzz’.Когда сумеете – исправьте её так, чтобы она выводила «FizzBuzz» для всех чисел, которые делятся и на 3 и на 5.
Шахматная доска. Напишите программу, создающую строку, содержащую решётку 8х8, в которой линии разделяются символами новой строки. На каждой позиции либо пробел, либо #. В результате должна получиться шахматная доска.

1
2
3
4
5
6
7
8

# # # #
# # # #
# # # #
# # # #
# # # #
# # # #
# # # #
# # # #
Минимум. Напишите функцию min, принимающую два аргумента, и возвращающую минимальный из них.

1
2
3
4

console.log(min(0, 10));
// → 0
console.log(min(0, -10));
// → -10
Рекурсия. Ноль чётный. Единица нечётная. У любого числа N чётность такая же, как у N-2.Напишите рекурсивную функцию isEven согласно этим правилам. Она должна принимать число и возвращать булевское значение. Потестируйте её на 50 и 75. Попробуйте задать ей -1. Почему она ведёт себя таким образом? Можно ли её как-то исправить?

1
2
3
4
5
6

console.log(isEven(50));
// → true
console.log(isEven(75));
// → false
console.log(isEven(-1));
// → ??
Считаем бобы. Символ номер N строки можно получить, добавив к ней .charAt(N) ( “строчка”.charAt(5) ) – схожим образом с получением длины строки при помощи .length. Возвращаемое значение будет строковым, состоящим из одного символа (к примеру, “к”). У первого символа строки позиция 0, что означает, что у последнего символа позиция будет string.length – 1. Другими словами, у строки из двух символов длина 2, а позиции её символов будут 0 и 1.Напишите функцию countBs, которая принимает строку в качестве аргумента, и возвращает количество символов “B”, содержащихся в строке.Затем напишите функцию countChar, которая работает примерно как countBs, только принимает второй параметр — символ, который мы будем искать в строке (вместо того, чтобы просто считать количество символов “B”). Для этого переделайте функцию countBs.
Сумма диапазона. Напишите функцию range, принимающую два аргумента, начало и конец диапазона, и возвращающую массив, который содержит все числа из него, включая начальное и конечное.Затем напишите функцию sum, принимающую массив чисел и возвращающую их сумму. Запустите указанную выше инструкцию и убедитесь, что она возвращает 55.В качестве бонуса дополните функцию range, чтобы она могла принимать необязательный третий аргумент – шаг для построения массива. Если он не задан, шаг равен единице. Вызов функции range(1, 10, 2) должен будет вернуть [1, 3, 5, 7, 9]. Убедитесь, что она работает с отрицательным шагом так, что вызов range(5, 2, -1) возвращает [5, 4, 3, 2].

1
2
3
4

console.log(sum(range(1, 10)));
// → 55
console.log(range(5, 2, -1));
// → [5, 4, 3, 2]

Обращаем массив вспять. Напишите две функции, reverseArray и reverseArrayInPlace. Первая получает массив как аргумент и выдаёт новый массив, с обратным порядком элементов. Вторая работает как оригинальный метод reverse – она меняет порядок элементов на обратный в том массиве, который был ей передан в качестве аргумента. Не используйте стандартный метод reverse.

console.log(reverseArray(["A", "B", "C"]));

// → ["C", "B", "A"];

var arrayValue = [1, 2, 3, 4, 5];

reverseArrayInPlace(arrayValue);

console.log(arrayValue);

// → [5, 4, 3, 2, 1]

Список.Объекты могут быть использованы для построения различных структур данных. Часто встречающаяся структура – список (не путайте с массивом). Список – связанный набор объектов, где первый объект содержит ссылку на второй, второй – на третий, и т.п.

var list = {

value: 1,

rest: {

value: 2,

rest: {

value: 3,

rest: null

}

};

Списки удобны тем, что они могут делиться частью своей структуры. Например, можно сделать два списка, {value: 0, rest: list} и {value: -1, rest: list}, где list – это ссылка на ранее объявленную переменную. Это два независимых списка, при этом у них есть общая структура list, которая включает три последних элемента каждого из них. Кроме того, оригинальный список также сохраняет свои свойства как отдельный список из трёх элементов.

Напишите функцию arrayToList, которая строит такую структуру, получая в качестве аргумента [1, 2, 3], а также функцию listToArray, которая создаёт массив из списка. Также напишите вспомогательную функцию prepend, которая получает элемент и создаёт новый список, где этот элемент добавлен спереди к первоначальному списку, и функцию nth, которая в качестве аргументов принимает список и число, а возвращает элемент на заданной позиции в списке, или же undefined в случае отсутствия такого элемента.

Если ваша версия nth не рекурсивна, тогда напишите её рекурсивную версию.

console.log(arrayToList([10, 20]));

// → {value: 10, rest: {value: 20, rest: null}}

console.log(listToArray(arrayToList([10, 20, 30])));

// → [10, 20, 30]

console.log(prepend(10, prepend(20, null)));

// → {value: 10, rest: {value: 20, rest: null}}

console.log(nth(arrayToList([10, 20, 30]), 1));

// → 20

Глубокое сравнение. Оператор == сравнивает переменные объектов, проверяя, ссылаются ли они на один объект. Но иногда полезно было бы сравнить объекты по содержимому.Напишите функцию deepEqual, которая принимает два значения и возвращает true, только если это два одинаковых значения или это объекты, свойства которых имеют одинаковые значения, если их сравнивать рекурсивным вызовом deepEqual.Чтобы узнать, когда сравнивать величины через ===, а когда – объекты по содержимому, используйте оператор typeof. Если он выдаёт “object” для обеих величин, значит нужно делать глубокое сравнение. Не забудьте об одном дурацком исключении, случившемся из-за исторических причин: “typeof null” тоже возвращает “object”.

var obj = {here: {is: "an"}, object: 2};

console.log(deepEqual(obj, obj));

// → true

console.log(deepEqual(obj, {here: 1, object: 2}));

// → false

console.log(deepEqual(obj, {here: {is: "an"}, object: 2}));

// → true

Свертка. Используйте метод reduce в комбинации с concat для свёртки массива массивов в один массив, у которого есть все элементы входных массивов.

1
2
3

var arrays = [[1, 2, 3], [4, 5], [6]];
// Ваш код
// → [1, 2, 3, 4, 5, 6]

Разница в возрасте матерей и их детей

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

Обратите внимание – не все матери, упомянутые в наборе, присутствуют в нём. Здесь может пригодиться объект byName, который упрощает процедуру поиска объекта человека по имени.

function average(array) {

function plus(a, b) { return a + b; }

return array.reduce(plus) / array.length;

}

var byName = {};

ancestry.forEach(function(person) {

byName[person.name] = person;

});

// Ваш код

// → 31.2

Историческая ожидаемая продолжительность жизни.

Мы считали, что только последнее поколение людей дожило до 90 лет. Давайте рассмотрим этот феномен поподробнее. Подсчитайте средний возраст людей для каждого из столетий. Назначаем столетию людей, беря их год смерти, деля его на 100 и округляя: Math.ceil(person.died / 100).

function average(array) {

function plus(a, b) { return a + b; }

return array.reduce(plus) / array.length;

}

// Ваш код

// → 16: 43.5

// 17: 51.2

// 18: 52.8

// 19: 54.8

// 20: 84.7

// 21: 94

В качестве призовой игры напишите функцию groupBy, абстрагирующую операцию группировки. Она должна принимать массив и функцию, которая подсчитывает группу для элементов массива, и возвращать объект, который сопоставляет названия групп массивам членов этих групп.

Every и some

У массивов есть ещё стандартные методы every и some. Они принимают как аргумент некую функцию, которая, будучи вызванной с элементом массива в качестве аргумента, возвращает true или false. Так же, как && возвращает true, только если выражения с обеих сторон оператора возвращают true, метод every возвращает true, когда функция возвращает true для всех элементов массива. Соответственно, some возвращает true, когда заданная функция возвращает true при работе хотя бы с одним из элементов массива. Они не обрабатывают больше элементов, чем необходимо – например, если some получает true для первого элемента, он не обрабатывает оставшиеся.

Напишите функции every и some, которые работают так же, как эти методы, только принимают массив в качестве аргумента.

// Ваш код

console.log(every([NaN, NaN, NaN], isNaN));

// → true

console.log(every([NaN, NaN, 4], isNaN));

// → false

console.log(some([NaN, 3, 4], isNaN));

// → true

console.log(some([2, 3, 4], isNaN));

// → false

Векторный тип. Напишите конструктор Vector, представляющий вектор в двумерном пространстве. Он принимает параметры x и y (числа), которые хранятся в одноимённых свойствах.

Дайте прототипу Vector два метода, plus и minus, которые принимают другой вектор в качестве параметра, и возвращают новый вектор, который хранит в x и y сумму или разность двух (один this, второй — аргумент)

Добавьте геттер length в прототип, подсчитывающий длину вектора – расстояние от (0, 0) до (x, y).

// Ваш код

console.log(new Vector(1, 2).plus(new Vector(2, 3)));

// → Vector{x: 3, y: 5}

console.log(new Vector(1, 2).minus(new Vector(2, 3)));

// → Vector{x: -1, y: -1}

console.log(new Vector(3, 4).length);

// → 5

Ещё одна ячейка

Создайте тип ячейки StretchCell(inner, width, height), соответствующий интерфейсу ячеек таблицы из этой главы. Он должен оборачивать другую ячейку (как делает UnderlinedCell - из примера книги), и убеждаться, что результирующая ячейка имеет как минимум заданные ширину и высоту, даже если внутренняя ячейка была бы меньше.

// Ваш код.

var sc = new StretchCell(new TextCell("abc"), 1, 2);

console.log(sc.minWidth());

// → 3

console.log(sc.minHeight());

// → 2

console.log(sc.draw(3, 2));

// → ["abc", " "]

Интерфейс к последовательностям

Разработайте интерфейс, абстрагирующий проход по набору значений. Объект с таким интерфейсом представляет собой последовательность, а интерфейс должен давать возможность в коде проходить по последовательности, работать со значениями, которые её составляют, и как-то сигнализировать о том, что мы достигли конца последовательности.

Задав интерфейс, попробуйте сделать функцию logFive, которая принимает объект-последовательность и вызывает console.log для первых её пяти элементов – или для меньшего количества, если их меньше пяти.

Затем создайте тип объекта ArraySeq, оборачивающий массив, и позволяющий проход по массиву с использованием разработанного вами интерфейса. Создайте другой тип объекта, RangeSeq, который проходит по диапазону чисел (его конструктор должен принимать аргументы from и to).

1
2
3
4
5
6
7
8
9
10

// Ваш код.
logFive(new ArraySeq([1, 2]));
// → 1
// → 2
logFive(new RangeSeq(100, 1000));
// → 100
// → 101
// → 102
// → 103
// → 104

Искусственный идиот

Грустно, когда жители нашего мира вымирают за несколько минут. Чтобы справиться с этим, мы можем попробовать создать более умного поедателя растений.

У наших травоядных есть несколько очевидных проблем. Во-первых, они жадные — поедают каждое растение, которое находят, пока полностью не уничтожат всю растительность. Во-вторых, их случайное движение (вспомните, что метод view.find возвращает случайное направление) заставляет их болтаться неэффективно и помирать с голоду, если рядом не окажется растений. И наконец, они слишком быстро размножаются, что делает циклы от изобилия к голоду слишком быстрыми.

Напишите новый тип существа, который старается справится с одним или несколькими проблемами и замените им старый тип PlantEater в мире долины. Последите за ними. Выполните необходимые подстройки.

// Ваш код

function SmartPlantEater() {}

animateWorld(new LifelikeWorld(

["############################",

"##### ######",

"## *** **##",

"# *##** ** O *##",

"# *** O ##** *#",

"# O ##*** #",

"# ##** #",

"# O #* #",

"#* #** O #",

"#*** ##** O **#",

"##**** ###*** *###",

"############################"],

{"#": Wall,

"O": SmartPlantEater,

"*": Plant}

));

Хищники

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

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

// Ваш код тут

function Tiger() {}

animateWorld(new LifelikeWorld(

["####################################################",

"# #### **** ###",

"# * @ ## ######## OO ##",

"# * ## O O **** *#",

"# ##* ########## *#",

"# ##*** * **** **#",

"#* ** # * *** ######### **#",

"#* ** # * # * **#",

"# ## # O # *** ######",

"#* @ # # * O # #",

"#* # ###### ** #",

"### **** *** ** #",

"# O @ O #",

"# * ## ## ## ## ### * #",

"# ** # * ##### O #",

"## ** O O # # *** *** ### ** #",

"### # ***** ****#",

"####################################################"],

{"#": Wall,

"@": Tiger,

"O": SmartPlantEater, // из предыдущего упражнения

"*": Plant}

));

Повтор

Допустим, у вас есть функция primitiveMultiply, которая в 50% случаев перемножает 2 числа, а в остальных случаях выбрасывает исключение типа MultiplicatorUnitFailure. Напишите функцию, обёртывающую эту, и просто вызывающую её до тех пор, пока не будет получен успешный результат.

Убедитесь, что вы обрабатываете только нужные вам исключения.

function MultiplicatorUnitFailure() {}

function primitiveMultiply(a, b) {

if (Math.random() < 0.5)

return a * b;

else

throw new MultiplicatorUnitFailure();

}

function reliableMultiply(a, b) {

// Ваш код

}

console.log(reliableMultiply(8, 8));

// → 64

Запертая коробка

Рассмотрим такой, достаточно надуманный, объект:

var box = {

locked: true,

unlock: function() { this.locked = false; },

lock: function() { this.locked = true; },

_content: [],

get content() {

if (this.locked) throw new Error("Заперто!");

return this._content;

}

};

Это коробочка с замком. Внутри лежит массив, но до него можно добраться только, когда коробка не заперта. Напрямую обращаться к свойству _content нельзя.

Напишите функцию withBoxUnlocked, принимающую в качестве аргумента функцию, которая отпирает коробку, выполняет функцию, и затем обязательно запирает коробку снова перед выходом – неважно, выполнилась ли переданная функция правильно, или она выбросила исключение.

function withBoxUnlocked(body) {

// Ваш код

}

withBoxUnlocked(function() {

box.content.push("золотишко");

});

try {

withBoxUnlocked(function() {

throw new Error("Пираты на горизонте! Отмена!");

});

} catch (e) {

console.log("Произошла ошибка:", e);

}

console.log(box.locked);

// → true

В качестве призовой игры убедитесь, что при вызове withBoxUnlocked, когда коробка не заперта, коробка остаётся незапертой.

Регулярный гольф

«Гольфом» в коде называют игру, где нужно выразить заданную программу минимальным количеством символов. Регулярный гольф – практическое упражнение по написанию наименьших возможных регулярок для поиска заданного шаблона, и только его.

Для каждой из подстрочек напишите регулярку для проверки их нахождения в строке. Регулярка должна находить только эти указанные подстроки. Не волнуйтесь насчёт границ слов, если это не упомянуто особо. Когда у вас получится работающая регулярка, попробуйте её уменьшить.

— car и cat — pop и prop — ferret, ferry, и ferrari — Любое слово, заканчивающееся на ious — Пробел, за которым идёт точка, запятая, двоеточие или точка с запятой. — Слово длинее шести букв — Слово без букв e

// Впишите свои регулярки

verify(/.../,

["my car", "bad cats"],

["camper", "high art"]);

verify(/.../,

["pop culture", "mad props"],

["plop"]);

verify(/.../,

["ferret", "ferry", "ferrari"],

["ferrum", "transfer A"]);

verify(/.../,

["how delicious", "spacious room"],

["ruinous", "consciousness"]);

verify(/.../,

["bad punctuation ."],

["escape the dot"]);

verify(/.../,

["hottentottententen"],

["no", "hotten totten tenten"]);

verify(/.../,

["red platypus", "wobbling nest"],

["earth bed", "learning ape"]);

function verify(regexp, yes, no) {

// Ignore unfinished exercises

if (regexp.source == "...") return;

yes.forEach(function(s) {

if (!regexp.test(s))

console.log("Не нашлось '" + s + "'");

});

no.forEach(function(s) {

if (regexp.test(s))

console.log("Неожиданное вхождение '" + s + "'");

});

}

Кавычки в тексте

Допустим, вы написали рассказ, и везде для обозначения диалогов использовали одинарные кавычки. Теперь вы хотите заменить кавычки диалогов на двойные, и оставить одинарные в сокращениях слов типа aren’t.

Придумайте шаблон, различающий два этих использования кавычек, и напишите вызов метода replace, который производит замену.

Снова числа

Последовательности цифр можно найти простой регуляркой /\d+/.

Напишите выражение, находящее только числа, записанные в стиле JavaScript. Оно должно поддерживать возможный минус или плюс перед числом, десятичную точку, и экспоненциальную запись 5e-3 или 1E10 – опять-таки с возможными плюсом или минусом. Также заметьте, что до или после точки не обязательно могут стоять цифры, но при этом число не может состоять из одной точки. То есть, .5 или 5. – допустимые числа, а одна точка сама по себе – нет.

// Впишите сюда регулярку.

var number = /^...$/;

// Tests:

["1", "-1", "+15", "1.55", ".5", "5.", "1.3e2", "1E-4",

"1e+12"].forEach(function(s) {

if (!number.test(s))

console.log("Не нашла '" + s + "'");

});

["1a", "+-1", "1.2.3", "1+1", "1e4.5", ".5.", "1f5",

"."].forEach(function(s) {

if (number.test(s))

console.log("Неправильно принято '" + s + "'");

});

Названия месяцев

Напишите простой модуль типа weekday, преобразующий номера месяцев (начиная с нуля) в названия и обратно. Выделите ему собственное пространство имён, так как ему потребуется внутренний массив с названиями месяцев, и используйте чистый JavaScript, без системы загрузки модулей.

1
2
3
4
5
6

// Ваш код

console.log(month.name(2));
// → March
console.log(month.number("November"));
// → 10

Вернёмся к электронной жизни

Надеюсь, что глава 7 ещё не стёрлась из вашей памяти. Вернитесь к разработанной там системе и предложите способ разделения кода на модули. Чтобы освежить вам память – вот список функций и типов, по порядку появления:

Vector

Grid

directions

directionNames

randomElement

BouncingCritter

elementFromChar

World

charFromElement

Wall

View

WallFollower

dirPlus

LifelikeWorld

Plant

PlantEater

SmartPlantEater

Tiger

Не надо создавать слишком много модулей. Книга, в которой на каждой странице была бы новая глава, действовала бы вам на нервы (хотя бы потому, что всё место съедали бы заголовки). Не нужно делать десять файлов для одного мелкого проекта. Рассчитывайте на 3-5 модулей.

Некоторые функции можно сделать внутренними, недоступными из других модулей. Правильного варианта здесь не существует. Организация модулей – вопрос вкуса.

Круговые зависимости

Запутанная тема в управлении зависимостями – круговые зависимости, когда модуль А зависит от Б, а Б зависит от А. Многие системы модулей это просто запрещают. Модули CommonJS допускают ограниченный вариант: это работает, пока модули не заменяют объект exports, существующий по-умолчанию, другим значением, и начинают использовать интерфейсы друг друга только после окончания загрузки.

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

Массивы

Добавьте поддержку массивов в Egg. Для этого добавьте три функции в основную область видимости: array(...) для создания массива, содержащего значения аргументов, length(array) для возврата длины массива и element(array, n) для возврата n-ного элемента.

// Добавьте кода

topEnv["array"] = "...";

topEnv["length"] = "...";

topEnv["element"] = "...";

run("do(define(sum, fun(array,",

" do(define(i, 0),",

" define(sum, 0),",

" while(<(i, length(array)),",

" do(define(sum, +(sum, element(array, i))),",

" define(i, +(i, 1)))),",

" sum))),",

" print(sum(array(1, 2, 3))))");

// → 6

Замыкания

Способ определения fun позволяет функциям в Egg замыкаться вокруг окружения, и использовать локальные переменные в теле функции, которые видны во время определения, точно как в функциях JavaScript.

Следующая программа иллюстрирует это: функция f возвращает функцию, добавляющую её аргумент к аргументу f, то есть, ей нужен доступ к локальной области видимости внутри f для использования переменной a.

1
2
3
4

run("do(define(f, fun(a, fun(b, +(a, b)))),",
" print(f(4)(5)))");
// → 9

Объясните, используя определение формы fun, какой механизм позволяет этой конструкции работать.

Большие изменения в парсере делать не придётся. Мы просто поменяем skipSpace, чтобы она пропускала комментарии, будто они являются пробелами – и во всех местах, где вызывается skipSpace, комментарии тоже будут пропущены. Внесите это изменение.

// Поменяйте старую функцию

function skipSpace(string) {

var first = string.search(/\S/);

if (first == -1) return "";

return string.slice(first);

}

console.log(parse("# hello\nx"));

// → {type: "word", name: "x"}

console.log(parse("a # one\n # two\n()"));

// → {type: "apply",

// operator: {type: "word", name: "a"},

// args: []}

Чиним область видимости

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

Эта неоднозначность приводит к проблемам. Если вы пытаетесь присвоить новое значение нелокальной переменной, вместо этого вы определяете локальную с таким же именем. (Некоторые языки так и делают, но мне это всегда казалось дурацким способом работы с областью видимости).

Добавьте форму set, схожую с define, которая присваивает переменной новое значение, обновляя переменную во внешней области видимости, если она не задана в локальной. Если переменная вообще не задана, швыряйте ReferenceError (ещё один стандартный тип ошибки).

Техника представления областей видимости в виде простых объектов, до сего момента бывшая удобной, теперь будет вам мешать. Вам может понадобиться функция Object.getPrototypeOf, возвращающая прототип объекта. Также помните, что область видимости не наследуется от Object.prototype, поэтому если вам надо вызвать на них hasOwnProperty, придётся использовать такую неуклюжую конструкцию:

1 2	Object.prototype.hasOwnProperty.call(scope, name);

Это вызывает метод hasOwnProperty прототипа Object и затем вызывает его на объекте scope.

specialForms["set"] = function(args, env) {

// Ваш код

};

run("do(define(x, 4),",

" define(setx, fun(val, set(x, val))),",

" setx(50),",

" print(x))");

// → 50

run("set(quux, true)");

// → Ошибка вида ReferenceError

Строим таблицу

Мы строили таблицы из простого текста в главе 6. HTML упрощает построение таблиц. Таблица в HTML строится при помощи следующих тегов:

<table>

<tr>

<th>height</th>

<th>country</th>

</tr>

<tr>

<td>Kilimanjaro</td>

<td>Tanzania</td>

</tr>

</table>

Для каждой строки в теге <table> содержится тег <tr>. Внутри него мы можем размещать ячейки: либо ячейки заголовков <th>, либо обычные ячейки <td>.

Те же данные, что мы использовали в главе 6, снова доступны в переменной MOUNTAINS.

Напишите функцию buildTable, которая, принимая массив объектов с одинаковыми свойствами, строит структуру DOM, представляющую таблицу. У таблицы должна быть строка с заголовками, где имена свойств обёрнуты в элементы <th>, и должно быть по одной строчке на объект из массива, где его свойства обёрнуты в элементы <td>. Здесь пригодится функция Object.keys, возвращающая массив, содержащий имена свойств объекта.

Когда вы разберётесь с основами, выровняйте ячейки с числами по правому краю, изменив их свойство style.textAlign на «right».

<style>

/* Определяет стили для красивых таблиц */

table { border-collapse: collapse; }

td, th { border: 1px solid black; padding: 3px 8px; }

th { text-align: left; }

</style>

function buildTable(data) {

// Ваш код

}

document.body.appendChild(buildTable(MOUNTAINS));

</script>

Элементы по имени тегов

Метод getElementsByTagName возвращает все дочерние элементы с заданным именем тега. Сделайте свою версию этого метода в виде обычной функции, которая принимает узел и строчку (имя тега) и возвращает массив, содержащий все нисходящие узлы с заданным именем тега.

Чтобы выяснить имя тега элемента, используйте свойство tagName. Заметьте, что оно возвратит имя тега в верхнем регистре. Используйте методы строк toLowerCase или toUpperCase.

<h1>Заголовок с элементом <span>span</span> внутри.</h1>

<p>Параграф с <span>раз</span>, <span>два</span> элементами spans.</p>

function byTagName(node, tagName) {

// Ваш код

}

console.log(byTagName(document.body, "h1").length);

// → 1

console.log(byTagName(document.body, "span").length);

// → 3

var para = document.querySelector("p");

console.log(byTagName(para, "span").length);

// → 2

</script>

Шляпа кота

Расширьте анимацию кота, чтобы и кот и его шляпа <img src="img/hat.png"> летали по противоположным сторонам эллипса.

Или пусть шляпа летает вокруг кота. Или ещё что-нибудь интересное придумайте.

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

var cat = document.querySelector("#cat");

var hat = document.querySelector("#hat");

// Your code here.

</script>

Цензура клавиатуры

В промежутке с 1928 по 2013 год турецкие законы запрещали использование букв Q, W и X в официальных документах. Это являлось частью общей инициативы подавления курдской культуры – эти буквы используются в языке курдов, но не у турков.

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

1
2
3
4
5

<input type="text">
<script>
var field = document.querySelector("input");
// Your code here.
</script>

След мыши

В ранние дни JavaScript, когда было время кричащих домашних страниц с обилием анимированных картинок, люди использовали язык очень вдохновляющими способами. Одним из них был «след мыши» — серия картинок, которые следовали за курсором при его движении по странице.

Сделайте такой след. Используйте с абсолютным позиционированием, фиксированным размером и цветом фона. Создайте кучку элементов и при движении мыши показывайте их следом за курсором.

К этому можно подойти многими способами. Можно сделать очень простое или очень сложное решение, как угодно. Простое – хранить фиксированное количество элементов и проходить по ним в цикле, двигая каждый следующий на текущее место курсора, каждый раз когда случается событие «mousemove».

<style>

.trail { /* className для элементов, летящих за курсором */

position: absolute;

height: 6px; width: 6px;

border-radius: 3px;

background: teal;

}

body {

height: 300px;

}

</style>

// Ваш код.

</script>

Закладки

Интерфейс закладок встречается часто. Он позволяет вам выбирать панель интерфейса, выбирая одну из нескольких торчащих закладок над элементом.

В упражнении вам нужно сделать простой интерфейс закладок. Напишите функцию asTabs, которая принимает узел DOM, и создаёт закладочный интерфейс, показывая дочерние элементы этого узла. Ей нужно вставлять список элементов <button> вверху узла, по одному на каждый дочерний элемент, содержащих текст, полученный из атрибута data-tabname. Все, кроме одного из дочерних элементов, должны быть спрятаны (при помощи display style none), а текущий видимый узел можно выбирать нажатием кнопки.

Когда оно заработает, расширьте функционал, чтобы у текущей активной кнопки был свой стиль.

<div data-tabname="one">Закладка один</div>

<div data-tabname="two">Закладка два</div>

<div data-tabname="three">Закладка три</div>

</div>

function asTabs(node) {

// Ваш код.

}

asTabs(document.querySelector("#wrapper"));

</script>

Конец игры

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

Подредактируйте runGame, чтобы она поддерживала жизни. Пусть игрок начинает с трёх.

<body>

// Старая функция runGame – поменяйте её...

function runGame(plans, Display) {

function startLevel(n) {

runLevel(new Level(plans[n]), Display, function(status) {

if (status == "lost")

startLevel(n);

else if (n < plans.length - 1)

startLevel(n + 1);

else

console.log("You win!");

});

}

startLevel(0);

}

runGame(GAME_LEVELS, DOMDisplay);

</script>

</body>

Пауза

Сделайте возможным ставить и снимать игру с паузы по нажатию клавиши Esc.

Этого можно достичь, поменяв функцию runLevel, чтобы она использовала другой обработчик событий клавиатуры, и прерывала и возобновляла анимацию по нажатию Esc.

На первый взгляд может показаться, что интерфейс runAnimation не предназначен для этого – но если вы поменяете его вызов из runLevel, всё получится.

Когда получится, можете попробовать ещё кое-что. Мы регистрируем события с клавиатуры не самым лучшим способом. Объект arrows – глобальная переменная, и его обработчики событий находятся в памяти, даже если игра не запущена. Можно сказать, они утекают из системы. Расширьте trackKeys, чтоб можно было разрегистрировать обработчики и затем поменяйте runLevel, чтоб она регистрировала их на старте, и разрегистрировала на финише.

<body>

// Старая функция runLevel – поменяйте её...

function runLevel(level, Display, andThen) {

var display = new Display(document.body, level);

runAnimation(function(step) {

level.animate(step, arrows);

display.drawFrame(step);

if (level.isFinished()) {

display.clear();

if (andThen)

andThen(level.status);

return false;

}

});

}

runGame(GAME_LEVELS, DOMDisplay);

</script>

</body>

Формы

Напишите программу, рисующую следующие фигуры:
1. трапецию
2. красный ромб
3. зигзаг
4. спираль из 10 витков
5. жёлтую звезду
Рисуя две последних, консультируйтесь с описаниями функций Math.cos и Math.sin из главы 13, которая описывает получение координат на круге с их использованием.

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

1
2
3
4
5
6

<canvas width="600" height="200"></canvas>
<script>
var cx = document.querySelector("canvas").getContext("2d");

// Ваш код
</script>

Круговая диаграмма

Ранее мы видели пример программы для рисования круговой диаграммы. Поменяйте её, чтобы имя каждой категории было показано рядом с куском, который её представляет. Попробуйте отыскать симпатичный вариант автоматического позиционирования текста, который бы работал и на других наборах данных. Можно предположить, что нет категории меньше 5% (чтобы текст не громоздился друг на друга).

Вам снова могут понадобиться Math.sin и Math.cos.

var cx = document.querySelector("canvas").getContext("2d");

var total = results.reduce(function(sum, choice) {

return sum + choice.count;

}, 0);

var currentAngle = -0.5 * Math.PI;

var centerX = 300, centerY = 150;

// Добавьте код для вывода меток

results.forEach(function(result) {

var sliceAngle = (result.count / total) * 2 * Math.PI;

cx.beginPath();

cx.arc(centerX, centerY, 100,

currentAngle, currentAngle + sliceAngle);

currentAngle += sliceAngle;

cx.lineTo(centerX, centerY);

cx.fillStyle = result.color;

cx.fill();

});

</script>

Прыгающий мячик

Используйте технику requestAnimationFrame из глав 13 и 15 для рисования прямоугольника с прыгающим внутри мячом. Мяч двигается с постоянной скоростью и отскакивает от сторон прямоугольника при соударении.

var cx = document.querySelector("canvas").getContext("2d");

var lastTime = null;

function frame(time) {

if (lastTime != null)

updateAnimation(Math.min(100, time - lastTime) / 1000);

lastTime = time;

requestAnimationFrame(frame);

}

requestAnimationFrame(frame);

function updateAnimation(step) {

// Ваш код

}

</script>

Предварительно рассчитанное отзеркаливание

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

В нашей игре, где есть всего один преобразуемый спрайт, это не проблема. Но представьте, что вам надо рисовать сотни персонажей или тысячи вращающихся частиц от взрыва.

Подумайте, как можно было бы рисовать инвертированного персонажа без подгрузок дополнительных файлов и без постоянных преобразований вызовов drawImage.
Согласование содержания (content negotiation)

Одна из вещей, которые HTTP умеет делать, но которую мы не обсуждали, называется согласованием содержания. Заголовок Accept в запросе можно использовать для сообщения серверу того, какие типы документов клиент желает получить. Многие серверы его игнорируют, но когда сервер знает о разных способах кодирования ресурса, он может взглянуть на заголовок и отправить тот, который предпочитает клиент.

URL eloquentjavascript.net/author настроен на ответ как прямым текстом, так и HTML или JSON, в зависимости от запроса клиента. Эти форматы определяются стандартизированными типами содержимого text/plain, text/html, и application/json.

Отправьте запрос для получения всех трёх форматов этого ресурса. Используйте метод setRequestHeader объекта XMLHttpRequest для установки заголовка Accept в один из нужных типов содержимого. Убедитесь, что вы устанавливаете заголовок после open, но перед send.

Наконец, попробуйте запросить содержимое типа application/rainbows+unicorns и посмотрите, что произойдёт.

Ожидание нескольких обещаний

У конструктора Promise есть метод all, который, получая массив обещаний, возвращает обещание, которое ждёт завершения всех указанных в массиве обещаний. Затем он выдаёт успешный результат и возвращает массив с результатами. Если какие-то из обещаний в массиве завершились неудачно, общее обещание также возвращает неудачу (со значением неудавшегося обещания из массива).

Попробуйте сделать что-либо подобное, написав функцию all.

Заметьте, что после завершения обещания (когда оно либо завершилось успешно, либо с ошибкой), оно не может заново выдать ошибку или успех, и дальнейшие вызовы функции игнорируются. Это может упростить обработку ошибок в вашем обещании.

function all(promises) {

return new Promise(function(success, fail) {

// Ваш код.

});

}

// Проверочный код.

all([]).then(function(array) {

console.log("Это должен быть []:", array);

});

function soon(val) {

return new Promise(function(success) {

setTimeout(function() { success(val); },

Math.random() * 500);

});

}

all([soon(1), soon(2), soon(3)]).then(function(array) {

console.log("Это должен быть [1, 2, 3]:", array);

});

function fail() {

return new Promise(function(success, fail) {

fail(new Error("бабах"));

});

}

all([soon(1), fail(), soon(3)]).then(function(array) {

console.log("Сюда мы попасть не должны ");

}, function(error) {

if (error.message != "бабах")

console.log("Неожиданный облом:", error);

});

Верстак JavaScript

Сделайте интерфейс, позволяющий писать и исполнять кусочки кода JavaScript.

Сделайте кнопку рядом с <textarea>, по нажатию которой конструктор Function из главы 10 будет обёртывать введённый текст в функцию и вызывать его. Преобразуйте значение, возвращаемое функцией, или любую её ошибку, в строку, и выведите её после текстового поля.

1
2
3
4
5
6
7

<textarea id="code">return "hi";</textarea>
<button id="button">Поехали</button>
<pre id="output"></pre>

<script>
// Ваш код.
</script>

Автодополнение

Дополните текстовое поле так, что при вводе текста под ним появлялся бы список вариантов. У вас есть массив возможных вариантов, и показывать нужно те из них, которые начинаются с вводимого текста. Когда пользователь щёлкает по предложенному варианту, он меняет содержимое поля на него.

// Строит массив из имён глобальных перменных,

// типа 'alert', 'document', и 'scrollTo'

var terms = [];

for (var name in window)

terms.push(name);

// Ваш код.

</script>

Игра «Жизнь» Конвея

Это простая симуляция жизни на прямоугольной решётке, каждый элемент которой живой или нет. Каждое поколение (шаг игры) применяются следующие правила:

— каждая живая клетка, количество соседей которой меньше двух или больше трёх, погибает — каждая живая клетка, у которой от двух до трёх соседей, живёт до следующего хода — каждая мёртвая клетка, у которой есть ровно три соседа, оживает

Соседи клетки – это все соседние с ней клетки по горизонтали, вертикали и диагонали, всего 8 штук.

Обратите внимание, что правила применяются ко всей решётке одновременно, а не к каждой из клеток по очереди. То есть, подсчёт количества соседей происходит в один момент перед следующим шагом, и изменения, происходящие на соседних клетках, не влияют на новое состояние клетки.

Реализуйте игру, используя любые подходящие структуры. Используйте Math.random для создания случайных начальных популяций. Выводите поле как решётку из галочек с кнопкой «перейти на следующий шаг». Когда пользователь включает или выключает галочки, эти изменения нужно учитывать при подсчёте следующего поколения.

1
2
3
4
5
6

<div id="grid"></div>
<button id="next">Следующее поколение</button>

<script>
// Ваш код.
</script>

Прямоугольники

Определите инструмент Rectangle, заполняющий прямоугольник (см. метод fillRect из главы 16) текущим цветом. Прямоугольник должен появляться из той точки, где пользователь нажал кнопку мыши, и до той точки, где он отпустил кнопку. Заметьте, что последнее действие может произойти левее или выше первого.

Когда это заработает, вы заметите, что изображение прямоугольника дрожит и его плохо видно. Можете ли вы придумать способ показа прямоугольника во время движения мыши, но чтобы он не выводился на холст, пока кнопка не отпущена?

Если не придумаете, вспомните о стиле position: absolute, который мы обсуждали в главе 13. который можно использовать, чтобы выводить узел поверх остального документа. Свойства pageX и pageY событий мыши можно использовать для точного расположения элемента под мышью, записывая нужные значения в стили left, top, width и height.

tools.Rectangle = function(event, cx) {

// Ваш код

};

</script>

<body>

</body>

Выбор цвета

Ещё один часто встречающийся инструмент – выбор цвета, который позволяет щелчком мыши на картинке выбрать цвет, который находится под курсором. Сделайте такой инструмент.

Для его изготовления понадобится доступ к содержимому холста. Метод toDataURL примерно это и делал, но получить информацию о пикселе из URL с данными сложно. Вместо этого мы возьмём метод контекста getImageData, возвращающий прямоугольный кусок картинки в виде объекта со свойствами width, height и data. В свойстве data содержится массив чисел от 0 до 255, и для каждого пикселя хранится четыре номера — red, green, blue и alpha (прозрачность).

Этот пример получает числа из одного пикселя холста, один раз, когда тот пуст (все пиксели – прозрачные чёрные), и один раз, когда пиксель окрашен в красный цвет.

function pixelAt(cx, x, y) {

var data = cx.getImageData(x, y, 1, 1);

console.log(data.data);

}

var canvas = document.createElement("canvas");

var cx = canvas.getContext("2d");

pixelAt(cx, 10, 10);

// → [0, 0, 0, 0]

cx.fillStyle = "red";

cx.fillRect(10, 10, 1, 1);

pixelAt(cx, 10, 10);

// → [255, 0, 0, 255]

Аргументы getImageData показывают начальные координаты прямоугольника x и y, которые нам надо получить, за которыми идут ширина и высота.

Игнорируйте прозрачность в этом упражнении, работайте только с первыми тремя цифрами для заданного пикселя. Также не волнуйтесь по поводу обновления поля color при выборе цвета. Просто убедитесь, что fillStyle и strokeStyle контекста установлены в цвет, оказавшийся под курсором.

Помните, что эти свойства принимают любой цвет, который понимает CSS, включая запись вида rgb(R, G, B), которую вы видели в главе 15.

Метод getImageData имеет те же ограничения, что и toDataURL – он выдаст ошибку, когда на холсте содержатся пиксели картинки, скачанной с другого домена. Используйте запись try/catch для сообщения об этих ошибках через окно alert.

tools["Pick color"] = function(event, cx) {

// Your code here.

};

</script>

<body>

</body>

Заливка

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

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

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

Вам вновь понадобится getImageData для выяснения цвета пикселя. Скорее всего, удобнее будет получить всю картинку за раз, а потом уже получать данные по пикселям из получившегося массива. Пиксели в массиве организованы схожим образом с решёткой из главы 7, по рядам, только каждый пиксель описывается четырьмя значениями. Первое значение для пикселя с координатами (x,y) находится на позиции (x + y × width) × 4

Включайте в рассмотрение четвёртое число (альфа), потому что нам нужно будет различать чёрные и пустые (прозрачные) пиксели.

Поиск соседних пикселей того же цвета требует пройти по поверхности пикселей вверх, вниз, влево и вправо, пока там находятся пиксели того же цвета. За первый проход всю группу пикселей найти не получится. Вместо этого нужно будет сделать что-то похожее на отслеживание в регулярных выражениях, описанное в главе 9. Когда у вас есть больше одного возможного направления, нужно сохранить все те, по которым вы прямо сейчас не идёте, и просмотреть их позже, по окончанию текущего шага.

У картинки среднего размера много пикселей. Постарайтесь свести работу программы к минимуму, или же она будет работать слишком долго. К примеру, игнорируйте пиксели, которые вы уже обрабатывали.

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

tools["Flood fill"] = function(event, cx) {

// Ваш код

};

</script>

<body>

</body>

И снова согласование содержания

В главе 17 первое упражнение было посвящено созданию запросов к eloquentjavascript.net/author, спрашивавших разные типы содержимого путём передачи разных заголовков Accept.

Сделайте это снова, используя функцию Node http.request. Запросите, по крайней мере, типы text/plain, text/html и application/json. Помните, что заголовки запроса можно передавать как объект в свойстве headers, первым аргументом http.request.

Выведите содержимое каждого ответа.
Устранение утечек

Для упрощения доступа к файлам я оставил работать сервер у себя на компьютере, в директории /home/marijn/public. Однажды я обнаружил, что кто-то получил доступ ко всем моим паролям, которые я хранил в браузере. Что случилось?

Если вам это непонятно, вспомните функцию urlToPath, которая определялась так:

1
2
3
4
5

function urlToPath(url) {
var path = require("url").parse(url).pathname;
return "." + decodeURIComponent(path);
}

Теперь вспомните, что пути, передаваемые в функцию “fs”, могут быть относительными. Они могут содержать путь “../” в верхний каталог. Что будет, если клиент отправит запросы на URL вроде следующих:

myhostname:8000/../.config/config/google-chrome/Default/Web%20Data myhostname:8000/../.ssh/id_dsamyhostname:8000/../../../etc/passwd

Поменяйте функцию urlToPath для устранения подобной проблемы. Примите во внимание, что на Windows Node разрешает как прямые так и обратные слеши для задания путей.

Кроме этого, поразмышляйте над тем фактом, что как только вы выставляете сырую систему в интернет, ошибки в системе могут быть использованы против вас и вашего компьютера.
Создание директорий

Хотя метод DELETE работает и при удалении директорий (через fs.rmdir), пока сервер не предоставляет возможности создания директорий.

Добавьте поддержку метода MKCOL, который должен создавать директорию через fs.mkdir. MKCOL не является основным методом HTTP, но он существует, именно для этого, в стандарте WebDAV, который содержит расширения HTTP, чтобы использовать его для записи ресурсов, а не только для их чтения.
Общественное место в сети

Так как файловый сервер выдаёт любые файлы и даже возвращает правильный заголовок Content-Type, его можно использовать для обслуживания веб-сайта. Так как он разрешает всем удалять и заменять файлы, это был бы интересный сайт – который можно изменять, портить и удалять всем, кто может создать правильный HTTP-запрос. Но это всё равно был бы веб-сайт.

Напишите простую HTML страницу с простым файлом JavaScript. Разместите их в директории, обслуживаемой сервером и откройте в браузере.

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

Используйте форму HTML (глава 18) для редактирования файлов, составляющих сайт, позволяя пользователю обновлять их на сервере через HTTP-запросы, как описано в главе 17.

Начните с одного файла, редактирование которого разрешено. Затем сделайте так, чтобы можно было выбирать файл для редактирования. Используйте тот факт, что наш файловый сервер возвращает списки файлов по запросу директории.

Не меняйте файлы непосредственно в коде файлового сервера – если вы сделаете ошибку, вы скорее всего испортите те файлы. Работайте в директории, недоступной снаружи, и копируйте их туда после тестирования.

Если ваш компьютер соединяется с интернетом напрямую, без firewall, роутера или других устройств, вы сможете пригласить друга на свой сайт. Для проверки сходите на whatismyip.com, скопируйте IP адрес в адресную строку и добавьте :8000 для выбора нужного порта. Если вы попали на свой сайт, то он доступен для просмотра всем.
Сохранение состояния на диск

Сервер держит все данные в памяти. Если он упадёт или перезапустится, все темы и комментарии будут потеряны.

Расширьте его функциональность с тем, чтобы он сохранял данные на диске и автоматически загружал их при перезагрузке. Не волнуйтесь насчёт эффективности, сделайте самый простой вариант
Обнуление полей комментариев

Общая перерисовка всех тем работает неплохо, потому что нет различия между узлом DOM и его заменой, когда они одинаковые. Но есть исключения. Если вы начнётё печатать что-либо в поле комментария к теме в одном окне браузера, а затем в другом окне добавите комментарий к этой теме, поле в первом окне будет перерисовано, и будет потеряно и его содержимое, и фокус.

При горячем обсуждении, когда несколько человек добавляют комментарии к одной теме, это очень раздражало бы. Можете ли вы придумать, как избежать этого?
Улучшенные шаблоны

Большинство шаблонизаторов делают больше, чем просто заполняют шаблоны строками. По меньшей мере они позволяют добавлять в шаблоны условия, аналогично оператору if, и повторения частей шаблона, аналогично циклам.

Если б мы могли повторять кусок шаблона для каждого элемента массива, второй шаблон («comment») был бы нам не нужен. Мы могли просто сказать шаблону “talk”, чтобы он повторялся для массива, содержащегося в свойстве comments, и создавал бы узлы, которые являются комментариями, для каждого элемента массива.

Это могло бы выглядеть так:

1
2
3
4
5
6

<div>
  <div template-repeat="comments">
    <span>{{author}}</span>: {{message}}
  </div>
</div>

Идея в следующем: когда при обработке шаблона встречается атрибут template-repeat, повторяющим шаблон, код проходит циклом по массиву, содержащемуся в свойстве, названном так же, как этот атрибут. Контекст шаблона (переменная values в instantiateTemplate) при работе цикла показывала бы на текущий элемент массива так, чтобы метку искали бы в объекте comment, а не в теме.

Перепишите instantiateTemplate так, чтобы она это умела, и потом поменяйте шаблоны, чтоб они использовали эту возможность, и уберите лишние строки для создания комментариев из функции drawTalk.

Как бы вы организовали условное создание узлов, чтобы можно было опускать части шаблона, если определённое значение равно true или false?
А кто без скрипта?

Если кто-нибудь зайдёт на наш сайт с отключенным JavaScript, они получат сломанную неработающую страницу. Это не очень-то хорошо.

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

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

Не заставляю вас его реализовывать. Достаточно описать возможное решение. Кажется ли вам такой вариант сайта более или менее элегантным, чем тот, что мы уже сделали?