{PS-Studio.info}

Используем классы в JS на реальном примере (выводим карточки товара на странице сайта)

Категория: JavaScript

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

10.08.2020

Модальное окно на JavaScript

Категория: JavaScript

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

15.07.2020

Таймер обратного отсчёта на JavaScript

Категория: JavaScript

Спешите! Акция ограничена по времени! До конца акции осталось....Вы часто можете увидеть подобную информацию на сайтах интернет-магазинов, на продающих лендинг-страницах. И одним из побуждающих к действию факторов служит таймер оставшегося времени, который видит посетитель сайта.
Сегодня мы будем делать такой таймер обратного отсчёта, используя JavaScript.

10.05.2020

Делаем табы на странице сайта на чистом JavaScript

Категория: JavaScript

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

В этом уроке мы создадим табы на чистом JavaScript, без использования каких-либо библиотек. Для оформления мы позовём на помощь CSS.

06.05.2020

Практикум №6 (продолжение)

Категория: JavaScript

Завершение практикума, начатого нами ранее. Первая часть здесь.

03.04.2020

Практикум №6

Категория: JavaScript

Сегодня будет итоговый практикум по нашей программе, которую мы составляли все предыдущие уроки. Полностью доработаем функционал.

Задачи:

1. Реализовать по клику на кнопке "Начать расчёт" появление диалоговых окон с запросом информации у пользователя.
Данные, полученные от пользователя, должны автоматически выводиться в полях "Доход", "Год", "Месяц" и "День" в правой части интерфейса программы.

До клика по кнопке "Начать расчёт" все остальные кнопки должны быть неактивны.

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

3. При вводе в блоке "Необязательные расходы" значений в отведённых для этого пустых полях, данные в должны продублироваться в правой части интерфейса программы после того, как будет нажата кнопка "Утвердить".
Данные должны выводиться в строку с пробелами между значениями.

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

При расчёте дневного бюджета должна быть учтена сумма обязательных расходов месяца.

5. При вводе наименований статей возможного дохода в левой части программы, они должны в реальном времени выводиться через запятую в правой части программы в поле "Дополнительный доход".

6. Программа должна рассчитывать накопления пользователя за месяц и за год на основе введённых им данных в полях "Сумма" и "Процент" и выводить итоговые цифры в правой части программного интерфейса.
Расчёт данных должен быть возможен только при активном чекбоксе рядом с фразой "Есть ли накопления?"

22.03.2020

Практикум №5

Категория: JavaScript

В сегодняшнем уроке мы начнём собирать нашу программу воедино: пропишем базовый интерфейс и поучимся получать доступ к элементам нашей страницы через JavaScript.

Задачи:

1. Создать папку task5, а в ней подпапки: css и js. В папке css создать файл стилей с именем style.css, в папке js создать файл скрипта main.js

В корневой директории папки task5 создать файл index.html с базовой html-структурой интерфейса нашей будущей программы.
Подключить файлы стилей и скрипта.

2. Получить кнопку "Начать расчёт" через id

3. Получить все блоки в правой части программы через классы (которые имеют класс название-value, начиная с

и заканчивая )

4. Получить поля(input) c обязательными расходами через класс. (class=”expenses-item”)

5. Получить кнопки “Утвердить” и “Рассчитать” через Tag, каждую в своей переменной.

6. Получить поля для ввода необязательных расходов (optionalexpenses-item) при помощи querySelectorAll

7. Получить оставшиеся поля через querySelector (статьи возможного дохода, чекбокс, сумма, процент, год, месяц, день)

15.03.2020

Практикум №4

Категория: JavaScript

В данном уроке мы добавим наши функции в объект appData, превратив их, таким образом, в методы этого объекта.

Задачи:

1. Перенести все ранее созданные нами функции в объект appData.

2. Добавить в объект appData новый метод chooseIncome, отражающий дополнительный доход пользователя.
Для получения информации от пользователя будем использовать prompt() с вопросом: "Что принесёт дополнительный доход? (Перечислите через запятую)"
И второй вопрос, уточняющий, который будет задаваться после первого: "Может быть что-то еще?"

С помощью метода split() передать полученную информацию от пользователя в свойство income: [] объекта appData.

Отсортировать в свойстве income с помощью метода sort() полученную от пользователя информацию.

3. Написать проверку того, что пользователь в диалоге с вопросом "Что принесёт дополнительный доход? (Перечислите через запятую)" может ввести только строку, не оставит строку пустой, а также не сможет отменить вопрос.

4. Данная задача должна быть реализована внутри метода chooseIncome объекта appData.

Вывести на экран сообщение о способах дополнительного заработка, используя метод перебора массива forEach.
Сообщение должно содержать заголовок "Способы доп. заработка: " и полученные от пользователя данные о способах дополнительного заработка, которые должны иметь нумерацию, начиная с 1 (не с нуля!)

5. Используя цикл for in, вывести в консоль "Наша программа включает в себя данные: " (содержимое объекта appData).

14.03.2020

Практикум №3

Категория: JavaScript

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

Задачи:

1. Оформить блок кода с вопросами "Ваш бюджет на месяц" и "Введите дату в формате YYYY-MM-DD" в виде функции start(), предусмотреть варианты, при которых пользователь вводит некорректные данные в поля модальных окон.

2. Оформить в виде функции chooseExpenses() блок выбора обязательных расходов.

3. Полученную цифру ежедневного бюджета (moneyPerDay) округлить до двух знаков после запятой с помощью метода toFixed()

4. Написать функцию checkSavings() расчёта ежемесячного дохода с накоплений пользователя (если таковые у него имеются), при этом необходимо задать пользователю следующие вопросы: "Какова сумма накоплений?" и "Под какой процент?"

5. Расчёт дневного дохода и его вывод на экран оформить как функцию detectDayBudget()

6. Блок кода с расчётом уровня доходов пользователя оформить как функцию detectLevel()

7. Создать функцию chooseOptExpenses(), определяющую необязательные расходы, при этом вопрос пользователю "Статья необязательных расходов?" необходимо задать 3 раза.
Ответы должны быть записаны в объект optionalExpenses в формате Номер: Ответ, например:

11.03.2020

Практикум №2

Категория: JavaScript

Продолжение предыдущего урока. В этой части мы займёмся оптимизацией кода, полученного нами в практикум №1.

Задачи:

1. Написать цикл if/else, который будет задавать вопросы пользователю.

2. Учесть в цикле условия:

- пользователь вводит в ответ не числовое значение
- пользователь при открытии диалогового окна диалога prompt() нажал "Отмена"
- пользователь, ничего не введя в диалоговом окне, нажал "Ок"
- запретить ввод пользователем количества символов, большего 50
- Предусмотреть вариант, что ни одно из условий не сработало
3. Добавить в объект appData новое свойство (ежедневный бюджет) moneyPerDay

4. Вывести в консоль, в зависимости от ежедневного дохода (moneyPerDay), определение дохода пользователя:

- если ежедневный бюджет менее 500, считать низким уровнем доходов пользователя
- если более 500, но менее 1000 - средним уровнем доходов
- если более 1000, то высоким

07.03.2020