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

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

  • mrbrainwash

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

    Spritz 11 мая 2014 г. 8:26

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

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

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

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

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

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

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

    adw/0
  • mrbrainwash

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

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

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

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

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

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

    Спустя 10 сек.

    соглашусь

    @md5, да, хорош

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

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

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

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

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

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

    adw/0
  • mrbrainwash

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

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

    Получилось вот так вот. А как сделать , чтобы сохраняло историю и её потом можно было посмотреть?
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=&quot;UTF-8&quot;>
    <title>Калькулятор</title>

    <link rel=&#39;stylesheet&#39; href=&#39;style.css&#39; type=&#39;text/css&#39;>

    <script type=&#39;text/javascript&#39; src=&#39;jquery.min.js&#39;></script>
    <script type=&#39;text/javascript&#39; src=&#39;jquery-ui-1.10.4.custom.min.js&#39;></script>
    <script type=&#39;text/javascript&#39; src=&#39;app.js&#39;></script>
    </head>

    <body>

    <div class=&quot;calc_app&quot;>
    <div class=&quot;calc_header&quot;>
    <div class=&quot;calc_title&quot;>Calculator</div>
    <div class=&quot;calc_memory&quot;></div>
    <input type=&quot;text&quot; class=&quot;calc_display&quot; name=&quot;calc_display&quot; disabled>
    </div>
    <div class=&quot;calc_body&quot;>
    <div class=&quot;cifral_buttons&quot;>
    <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=&quot;width_2&quot;>.</button>
    </p>
    </div>
    <div class=&quot;operation_buttons&quot;>
    <button>/</button>
    <button>*</button>
    <button>-</button>
    <button>+</button>
    </div>

    <div class=&quot;operation_function&quot;>
    <button class=&quot;calc_reset_btn&quot;>C</button>
    <button class=&quot;width_3 calc_equal_btn&quot;>=</button>
    </div>
    <dib class=&quot;memory_functions&quot;>
    <button class=&quot;memory_btn_set&quot;>MS</button>
    <button class=&quot;memory_btn_get&quot;>MR</button>
    <button class=&quot;memory_btn_clear&quot;>MC</button>
    </dib>
    </div>
    <div class=&quot;calc_footer&quot;></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 = $(&#39;.calc_app&#39;);
    /**
    * Обозначаем переменную в нашем приложении
    * для дисплея калькулятор
    * @type {*|HTMLElement}
    */
    this.disaplay = $(&#39;.calc_display&#39;);
    /**
    * Определяем временную переменную для &quot;памяти&quot;
    * @type {undefined}
    */
    this.memory = undefined;

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

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

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

    /**
    * Биндим кнопку

    */
    $(&#39;.calc_reset_btn&#39;).click(function(){
    $t.clearDisplay();
    });

    /**
    * Работаем с &quot;памятью&quot;
    */

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

    /**
    * Проверки на ошибки вычисления
    */
    if(equal == NaN ) {
    $t.isError = true;
    $t.setDisplay(&#39;Ошибка&#39;);
    return;
    }
    if(equal == Infinity) {
    $t.isError = true;
    $t.setDisplay(&#39;Деление на ноль&#39;);
    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(&#39;&#39;);

    /**
    * Добавляем значение к уже существующему
    * значению на нашем дисплее
    */
    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(&#39;icon.png&#39;) 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=&#39;#f0f6fb&#39;, endColorstr=&#39;#d7e2ef&#39;,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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Спустя 11 сек.

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

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

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

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

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

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

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

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

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

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

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