Проект: Калькулятор на Javascript
Вы получили много знаний на Codecademy, но пришло время покинуть это уютное место и создать что-то с использованием Javascript на своем собственном компьютере.
В этом проекте будет множество мелких задач для того, чтобы вы поняли язык. Вы можете создавать их в текстовом редакторе, а затем скопипастить на JS Fiddle. Вы можете выполнять функции (например, нижеприведенную my_max()
) с логированием в консоли, например console.log(my_max([1,56,2,3,-1,0]))
должно выдать 56.
Отправьте решение на Github
На разогрев
- Создайте функцию
my_max()
, принимающую массив и возвращающую максимальное число. - Создайте функцию
vowel_count()
, принимающую строку и возвращающую количество гласных (AEIOUY). - Создайте функцию
reverse()
, принимающую строку и возвращающую все символы в обратном порядке, напримерreverse("this is a string") // "gnirts a si siht"
Калькулятор
Настало время создать калькулятор в браузере
- Создайте функцию
add()
, принимающую два числа и складывающую их. - Создайте подобные функции
multiply
,divide
иsubtract
. - Создайте ряд
<div>
ов, с метками от 0 до 9. - Создайте слушателя, чтобы при нажатии на клетки, в лог выдавалась эта цифра. Это может быть сделано назначением функции на свойство
onclick()
div'а (используйте этот вариант, если вы еще не знакомы со слушателями в jQuery). На данный момент допустим и хардкод (напримерonclick(function(){ console.log "1" })
). - Теперь добавьте к калькулятору "кнопки" (еще одни div'ы), отображающие "+", "-", "*", "/", "=" and "clear".
- Заставьте калькулятор работать! Это значит, что вы должны "сохранить" в переменную или массив первое нажатое число, а также "сохранить" список сделанных операций (например, сложение). После нажатия "=" должна сработать функция, которая рассчитает полученный результат и выведет его в лог. Понадобится немного практики, чтобы научиться передавать значения из "кнопок" в основную функцию калькулятора. Будет непросто, но вы справитесь.
- Нажатие "=" или "С" должно очищать любые переменные и сохраненные операции.
- Отправьте проект на Github.
- Дополнительно: Если знакомы с jQuery, создайте "экран" - еще один
<div>
, который будет отображать вводимые цифры и результат вычислений. - Дополнительно: Создайте "родительский фильтр", проверяющий ввод недопустимых цифр (например 80085), и выдающий сообщение в этом случае.
Решения студентов
- Решение 1 | Посмотреть в браузере
- Решение 2 | Посмотреть в браузере
- Решение 3 | Посмотреть в браузере
- Решение 4 | Посмотреть в браузере
- Решение 5 | Посмотреть в браузере
Дополнительные ресурсы
Этот раздел содержит полезные ссылки на дополнительные материалы. Это не обязательно, так что расценивайте их как нечто полезное, если вы хотите поглубже погрузиться в тему
- Учебники по Javascript и jQuery от Jumpstart Lab