Нестандартный калькулятор « JavaScript

Сообщения: 3 Репутация: N Группа: Кто попало

11 мая 2014 г. 19:26

Здравствуйте, помогите, пожалуйста решить задание (нужно сделать своеобразный калькулятор): есть html страница, в которой подключены файлы скрипта и стиля. Скрипт загружается и подымает DOM, навешанный обработчиками. Естественно, пишется все используя ООП. Калькулятор состоит, как минимум, из нескольких объектов, которые обмениваются между собой событиями. К примеру, есть базовый объект "Кнопка", которую наследует объект "Кнопка 1". Она умеет кидать событие "Click", которое перехватывает некая сущность(пусть будет view), и объект, отрисовавший поле ввода. Получается иерархическая, распределенная модель. Кнопка кидает событие с параметами, оно всплывает, его перехватывают вьюха и кто-то еще. Кнопка - инициатор события, поле ввода только слушает, вьюха тоже слушает и хранит историю, чтобы можно было отменить операцию. И , если задача пойдет легко, можно выполнить это все в диалоге, который тоскается по экрану.

md5

Сообщения: 11960 Репутация: N Группа: в ухо

11 мая 2014 г. 21:15, спустя 1 час 49 минут 15 секунд

соглашусь

все умрут, а я изумруд

adw0rd

Сообщения: 22959 Репутация: N Группа: в ухо

11 мая 2014 г. 21:20, спустя 4 минуты 33 секунды

Отличный план, стандартный калькулятор нервно курит

https://smappi.org/ - платформа по созданию API на все случаи жизни

mrbrainwash

Сообщения: 3 Репутация: N Группа: Кто попало

11 мая 2014 г. 22:07, спустя 47 минут 24 секунды

И все же. Получил такое задание на собеседовании. Не пойму с какого конца к нему подойти. Не поможете ли?

phpdude

Сообщения: 26646 Репутация: N Группа: в ухо

11 мая 2014 г. 22:15, спустя 7 минут 14 секунд

@mrbrainwash, может тогда не надо?)

Спустя 10 сек.

соглашусь

@md5, да, хорош

Сапожник без сапог

adw0rd

Сообщения: 22959 Репутация: N Группа: в ухо

12 мая 2014 г. 0:09, спустя 1 час 54 минуты 19 секунд

И все же. Получил такое задание на собеседовании. Не пойму с какого конца к
нему подойти. Не поможете ли?

@mrbrainwash, ну делаете все как написали, создаете класс, наследуетесь, пишете обработчики.

Что у вас уже получилось, еще совсем ничего? Ну тогда прочитайте как вешать события, что такое прототипы, откройте браузер и в его консоли потренируйтесь

https://smappi.org/ - платформа по созданию API на все случаи жизни

mrbrainwash

Сообщения: 3 Репутация: N Группа: Кто попало

14 мая 2014 г. 21:02, спустя 2 дня 20 часов 53 минуты

Получилось вот так вот. А как сделать , чтобы сохраняло историю и её потом можно было посмотреть?

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Калькулятор</title>

    <link rel='stylesheet' href='style.css' type='text/css'>

    <script type='text/javascript' src='jquery.min.js'></script>
    <script type='text/javascript' src='jquery-ui-1.10.4.custom.min.js'></script>
    <script type='text/javascript' src='app.js'></script>
</head>

<body>

    <div class="calc_app">
        <div class="calc_header">
            <div class="calc_title">Calculator</div>
            <div class="calc_memory"></div>
            <input type="text" class="calc_display" name="calc_display" disabled>
        </div>
        <div class="calc_body">
            <div class="cifral_buttons">
                <p>
                    <button>7</button>
                    <button>8</button>
                    <button>9</button>
                </p>
                <p>
                    <button>4</button>
                    <button>5</button>
                    <button>6</button>
                </p>
                <p>
                    <button>1</button>
                    <button>2</button>
                    <button>3</button>
                </p>
                <p>
                    <button>0</button>
                    <button class="width_2">.</button>
                </p>
            </div>
            <div class="operation_buttons">
                <button>/</button>
                <button>*</button>
                <button>-</button>
                <button>+</button>
            </div>

            <div class="operation_function">
                <button class="calc_reset_btn">C</button>
                <button class="width_3 calc_equal_btn">=</button>
            </div>
            <dib class="memory_functions">
                <button class="memory_btn_set">MS</button>
                <button class="memory_btn_get">MR</button>
                <button class="memory_btn_clear">MC</button>
            </dib>
        </div>
        <div class="calc_footer"></div>
    </div>
</body>

</html>

/**
 * Объявление в общем глобальной видимости
 * переменной нашего приложения
 * @type {calc|*|{}}
 */
var calc = calc || {};

/**
 * Изолируем jQuery
 */
(function($){
    /**
     * Выполнение скрипта по событию OnDOMReady
     */
    $(document).ready(function(){
        /**
         * Описание нашего объекта
         * @type {{init: init, setDisplay: setDisplay, clearDisplay: clearDisplay, checkDisplay: checkDisplay, addDisplay: addDisplay}}
         */
        calc = {
            init : function() {
                /**
                 * Устанавливаем глобальную переменную
                 * нашего основного объекта
                 * @type {calc}
                 */
                var $t = this;

                this.calc = $('.calc_app');
                /**
                 * Обозначаем переменную в нашем приложении
                 * для дисплея калькулятор
                 * @type {*|HTMLElement}
                 */
                this.disaplay = $('.calc_display');
                /**
                 * Определяем временную переменную для "памяти"
                 * @type {undefined}
                 */
                this.memory = undefined;

                /**
                 * Устанавливаем по умолчанию значение равное нулю
                 */
                this.clearDisplay();

                /**
                 * Делаем наш калькулятор "перемещаемый"
                 */
                this.calc.draggable();

                /**
                 * Биндим кнопки [0-9] + Кнопки операций
                 */
                $('.cifral_buttons button, .operation_buttons button').click(function(e){
                    $t.checkDisplay();
                    $t.addDisplay( $(this).html() );
                });

                /**
                 * Биндим кнопку 
                 */
                $('.calc_reset_btn').click(function(){
                    $t.clearDisplay();
                });

                /**
                 * Работаем с "памятью"
                 */

                $('.memory_functions button').click(function(){
                    /**
                     * Отрабатываем нажатия кнопок
                     * http://javascript.ru/switch
                     */
                    switch ( $(this).html() ) {
                        case 'MR':
                            if($t.memory != '' || $t.memory == undefined)
                                $t.disaplay.val( $t.memory );
                            break;
                        case 'MS':
                            $t.memory = $t.disaplay.val()
                            break;
                        case 'MC':
                            $t.memory = '';
                            break;
                        default :
                            break;
                    }
                    /**
                     * Восстанавливаем знаение из "памяти"
                     */
                    $('.calc_memory').html($t.memory);
                });
                /**
                 * Биндим кнопку [=]
                 */
                $('.calc_equal_btn').click(function(){
                    /**
                     * Производим вычисления при помощи js.eval()
                     * http://javascript.ru/eval
                     * @type {Object}
                     */
                    var equal = eval($t.disaplay.val());

                    /**
                     * Проверки на ошибки вычисления
                     */
                        if(equal == NaN ) {
                            $t.isError = true;
                            $t.setDisplay('Ошибка');
                            return;
                        }
                        if(equal == Infinity) {
                            $t.isError = true;
                            $t.setDisplay('Деление на ноль');
                            return;
                        }

                    $t.setDisplay( equal );
                });
            },
            /**
             * Установка определенного значения на дисплее
             * @param val
             */
            setDisplay: function(val) {
                this.disaplay.val(val);
            },
            /**
             * Очистка дисплея
             */
            clearDisplay: function() {
                this.setDisplay(0);
            },
            /**
             * Проверка дисплея, на отображение ошибки
             */
            checkDisplay: function() {
                /**
                 * Если ошибка на дисплее
                 * - сбрасываем ошибку с дисплея
                 * - обнуляем данные о присутствии ошибки
                 */
                if (this.isError == true) {
                    this.clearDisplay();
                    this.isError = false;
                }
            },

            /**
             * Добавление на дисплей калькулятора
             * @param digit
             */
            addDisplay: function(digit) {
                /**
                 * Удаление нуля на дисплее
                 */
                if(this.disaplay.val() == 0)
                    this.disaplay.val('');

                /**
                 * Добавляем значение к уже существующему
                 * значению на нашем дисплее
                 */
                this.disaplay.val( this.disaplay.val() + digit);
            }
        }


        /**
         * Инициализируем приложение
         */
        calc.init();
    });
})(jQuery)

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.calc_app {

    background: #dae5f2;
    border: solid 6px #8dc8fb;
    position: relative;
    margin: 5px;
    float: left;
    -webkit-box-shadow: 1px 1px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    1px 1px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         1px 1px 5px 0px rgba(50, 50, 50, 0.75);
}

.calc_title {
    cursor: pointer;
    background: #8dc8fb url('icon.png') no-repeat 2px 50%;
    padding: 2px 10px;
    text-indent: 12px;
    font-size: 14px;
    line-height: 24px;
}




.calc_body {
    width: 145px;
}

.calc_body > * {
    margin: 0;
    padding: 0;
}
.cifral_buttons {
    float: left;
}
.cifral_buttons p {
    margin: 0;
    padding: 0;
}
button {
    margin: 2px;
    height: 30px;
    width: 30px;

    text-align: center;




}

button, .calc_display {
    line-height: 30px;
    font-size: 14px;
    border: solid 1px #8797aa;
    color: #1e395b;
    text-shadow: 1px 1px 0px rgba(150, 150, 175, 0.36);
    background: #f0f6fb; /* Old browsers */
    background: -moz-linear-gradient(top,  #f0f6fb 1%, #d7e2ef 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#f0f6fb), color-stop(100%,#d7e2ef)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f0f6fb 1%,#d7e2ef 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #f0f6fb 1%,#d7e2ef 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #f0f6fb 1%,#d7e2ef 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #f0f6fb 1%,#d7e2ef 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f6fb', endColorstr='#d7e2ef',GradientType=0 ); /* IE6-9 */
}
button.width_2 {
    width: 65px;
}
button.width_3 {
    width: 102px;
}


.operation_buttons {
    float: left;
    width: 34px;
}
.operation_buttons button {
    float: left;
}

.calc_display {
    text-align: right;
    width: 118px;
    margin: 2px;
    padding: 0 10px;
}