ФорумПрограммированиеJavaScript → Нестандартный калькулятор

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

  • mrbrainwash

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

    Spritz 11 мая 2014 г. 19:26

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

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

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

    соглашусь
    все умрут, а я изумруд
  • adw0rd

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

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

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

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

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

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

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

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

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

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

    Спустя 10 сек.

    соглашусь

    @md5, да, хорош

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

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

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

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

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

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

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

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

    Spritz 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;
    }
  • md5

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

    Spritz 15 мая 2014 г. 8:50, спустя 11 часов 47 минут 20 секунд

    нет, ну вобще неплохо, продолжай!
    все умрут, а я изумруд
  • phpdude

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

    Spritz 15 мая 2014 г. 8:53, спустя 3 минуты 1 секунду

    блин, кому не сложно поправьте double penetration escape в блоке кода при bbeditor'е?
    Сапожник без сапог
  • master

    Сообщения: 3244 Репутация: N Группа: Джедаи

    Spritz 15 мая 2014 г. 9:58, спустя 1 час 4 минуты 59 секунд

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

    используй кукисы

    гугл "javascript cookie"
    не всё полезно, что в swap полезло
  • phpdude

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

    Spritz 15 мая 2014 г. 9:59, спустя 1 минуту 21 секунду

    @master, local storage же, нахуа кукисы)

    Спустя 11 сек.

    кукисы по размеру ограничены

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

    Сообщения: 3244 Репутация: N Группа: Джедаи

    Spritz 15 мая 2014 г. 10:43, спустя 44 минуты 17 секунд

    @phpdude, с лимитом задача интереснее
    не всё полезно, что в swap полезло
  • phpdude

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

    Spritz 15 мая 2014 г. 10:52, спустя 9 минут 2 секунды

    @phpdude, с лимитом задача интереснее

    @master, для ТС она интересна и без лимитов, советую для начала в простых условиях решить)

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

Пожалуйста, авторизуйтесь, чтобы написать комментарий!