Проект: Калькулятор на Javascript

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

В этом проекте будет множество мелких задач для того, чтобы вы поняли язык. Вы можете создавать их в текстовом редакторе, а затем скопипастить на JS Fiddle. Вы можете выполнять функции (например, нижеприведенную my_max()) с логированием в консоли, например console.log(my_max([1,56,2,3,-1,0])) должно выдать 56.

Отправьте решение на Github

На разогрев

  1. Создайте функцию my_max(), принимающую массив и возвращающую максимальное число.
  2. Создайте функцию vowel_count(), принимающую строку и возвращающую количество гласных (AEIOUY).
  3. Создайте функцию reverse(), принимающую строку и возвращающую все символы в обратном порядке, например reverse("this is a string") // "gnirts a si siht"

Калькулятор

Настало время создать калькулятор в браузере

  1. Создайте функцию add(), принимающую два числа и складывающую их.
  2. Создайте подобные функции multiply, divide и subtract.
  3. Создайте ряд <div>ов, с метками от 0 до 9.
  4. Создайте слушателя, чтобы при нажатии на клетки, в лог выдавалась эта цифра. Это может быть сделано назначением функции на свойство onclick() div'а (используйте этот вариант, если вы еще не знакомы со слушателями в jQuery). На данный момент допустим и хардкод (например onclick(function(){ console.log "1" })).
  5. Теперь добавьте к калькулятору "кнопки" (еще одни div'ы), отображающие "+", "-", "*", "/", "=" and "clear".
  6. Заставьте калькулятор работать! Это значит, что вы должны "сохранить" в переменную или массив первое нажатое число, а также "сохранить" список сделанных операций (например, сложение). После нажатия "=" должна сработать функция, которая рассчитает полученный результат и выведет его в лог. Понадобится немного практики, чтобы научиться передавать значения из "кнопок" в основную функцию калькулятора. Будет непросто, но вы справитесь.
  7. Нажатие "=" или "С" должно очищать любые переменные и сохраненные операции.
  8. Отправьте проект на Github.
  9. Дополнительно: Если знакомы с jQuery, создайте "экран" - еще один <div>, который будет отображать вводимые цифры и результат вычислений.
  10. Дополнительно: Создайте "родительский фильтр", проверяющий ввод недопустимых цифр (например 80085), и выдающий сообщение в этом случае.

Решения студентов

  • Решение 1 | Посмотреть в браузере
  • Решение 2 | Посмотреть в браузере
  • Решение 3 | Посмотреть в браузере
  • Решение 4 | Посмотреть в браузере
  • Решение 5 | Посмотреть в браузере

Дополнительные ресурсы

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

  • Учебники по Javascript и jQuery от Jumpstart Lab

Поделиться уроком: