Упражнения.

Верстак JavaScript.

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

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

<textarea id="code">return "hi";</textarea>

<button id="buttоn">Поехали</buttоn>

<pre id="output"></pre>

<script>

// Ваш код.

</script>

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

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

<input type="text" id="field">

<div id="suggestions" style="cursor: pointer"></div>

<script>

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

// типа 'аlеrt', 'document', и 'scrollTo'.

Var terms = [];

For (var name in window).

Terms.push(name);

// Ваш код.

</script>

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

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

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

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

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

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

<div id="grid"></div>

<button id="nехt">Следующее поколение</buttоn>

<script>

// Ваш код.

</script>