JavaScript ПРАКТИКА - Решение к 11 уроку

JavaScript практика

Разберем домашнее задание из 11 урока.

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

See the Pen JavaScript ПРАКТИКА - Решение к 11 уроку by Denis (@Dwstroy) on CodePen.

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

<h3>Ежедневник</h3>
<form name="dwsForm">
  <label>День недели:</label>
  <select name="days">
	 <option>Понедельник</option>
	 <option>Вторник</option>
	 <option>Среда</option>
	 <option>Четверг</option>
	 <option>Пятница</option>
	 <option>Суббота</option>
	 <option>Воскресенье</option>
  </select><br><br>
  <textarea rows="5" cols="45" name="message" placeholder="Напишите текст заметки..." ></textarea><br>
  <input type="button" value="Отправить" onClick="btnClick();">
  <input type="button" value="Распечатать" onClick="prClick();">
</form>
<br>
<div id="diary"></div>

На этом разметка готова, переходим в JS и описываем саму логику программы.

Описываем логику программы

Первым делом объявлю переменные. Нам понадобится переменная для дня недели, для заметки, установим счетчик равному единицы, объявим массив, и в одну из переменных занесем имя формы.

var day = "",       // день недели
    text = "",      // Текст
    i = 1,          // счетчик
    arrNotes = [],  // массив заметок
    form = document.dwsForm;

Далее описываем, что будет происходить по клику кнопки «Отправить».

Объявляем функцию, которая будет запускаться по клику кнопки, и заполняем две переменные day, где при помощи days и value достаем выбранное поле. Во вторую переменную text ложем текстовое содержание заметки.

day = form.days.value;
text = form.message.value;

Далее формируем массив данных в который будем заносить номер заметки, день недели, и текстовое содержание. 

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

function btnClick() {
    day = form.days.value;
    text = form.message.value;

    arrNotes.push("<tr><td>" + i + "</td><td>Заметка на: " + day.bold() + "</td></tr>"
        + "<tr><td></td><td>" + text + "<hr></td></tr>");
    i++;
    form.reset();
}

Далее полученный массив распечатываем на странице.

Для этого отлавливаем клик по кнопки «Распечатать», обращаемся к блоку, который создавали для печати массива, и при помощи innerHTML выводим массив без разделителей в строковом виде.

function prClick() {
    document.getElementById('diary').innerHTML="<table>" + arrNotes.join('') + "</table>";
}

В конечном итоге получаем формирование массива в табличном виде.

Задание было средней сложности, и те кто смотрел выпуски с самого начала полагаю что в большинстве все справились.

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

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

Урок подготовил: Горелов Денис.

Оставить комментарий: