Javascript-форум - Унылого треша тред

Javascript-форум (https://javascript.ru/forum/)

- Оффтопик (https://javascript.ru/forum/offtopic/)

- - Унылого треша тред (https://javascript.ru/forum/offtopic/47728-unylogo-tresha-tred.html)

Унылого треша тред

Завтра я вам покажу свой юракс 0.2 ) это будет эпик) IE8 +

готовьтесь и выкидывайте свои бакдоны

Очередная тема созданная под феназепамом?

monolithed,
в смысле?

Цитата:

Сообщение от megaupload

в смысле?

В том то и дело, что смысла в этой очередной теме никто не видит!

megaupload, ты не правильно делаешь, тему нужно создавать, когда уже есть что показать и в соответствующем разделе, а смысл этой темы мне не ясен.

для поднятия ажиотажа же. теперь все хотят увидеть

щас немного пофиксю кое что и через часика 4 выложу, сможете поиграться)

А так же надо придумать новое название) потому что юракс - говно.

Цитата:

Сообщение от megaupload

А так же надо придумать новое название) потому что юракс - говно.

Оставь. Прикольно же https://www.youtube.com/watch?v=hM6PBzGG07U начиная с 34 минуты ровно :D

Не не не, это как гугл юраксом назвать, эта либа ВЕЛИЧЕСТВЕННА и могуча лучше бакдона. Скоро на ней все писать будут, по этому надо с названием не облажаться.

Цитата:

Сообщение от megaupload (Сообщение 251913)

Назови МаксимусТоталДоминатус :)

Цитата:

Сообщение от megaupload

Да ты вроде не облажался, про нее даже мультфильм сняли и песню написали :)

Цитата:

Сообщение от kobezzza

МаксимусТоталДоминатус

Цитата:

Сообщение от megaupload

Завтра я вам покажу свой юракс 0.2 ) это будет эпик) IE8 +

Готовить будет? Убирать дома будет? По магазин ходить будет?
-нет? ну и наф. это нужно?
скриптов, библиотек делающих что то в мире много, и не одного чтоб готовил , убирал, стирал, по магазинам ходил ...-как напишешь такой -свисти:D

Цитата:

Сообщение от kobezzza

МаксимусТоталДоминатус

каламбия пикчерз не представляет, чего Доминатус здесь затевает :)

alert( 'юракс'.match( /./g ).reverse().join( '' ) + 'оп' );

Цитата:

юракс

парк юрского периода :)

Цитата:

Сообщение от kobezzza

Назови МаксимусТоталДоминатус

new МаксимусТоталДоминатус();

Доминатус.js норм?

почти готово пасоны)) готовьтесь, грядет

Встречайте Доминатус 0.2

Представляю вам чудоскрипт http://yourjavascript.com/31353253412/widget.js
Это класс Widget, он позволяет пилить няшные виджеты, и позволяет отделять логику, структуру и дизайн друг от друга)

грубо говоря то к чему ты применяешь Widget начинает понимать {{теги}}
и внутри этих тегов слово this ссылается на тот обьект который возвращает Widget
все просто как часы

И как вы заметили он делает САМОЕ ГЛАВНОЕ - возвращает все на свои места, логику в javascript структуру в HTML в дизайн в CSS. И делает их независимыми друг от друга и взаимозаменяемыми.

Рассмотрим это на примере калькулятора:

<!-- подключаем скрипты -->
<script src="http://yourjavascript.com/1544031232/fix.js"></script>
<script src="http://yourjavascript.com/31353253412/widget.js"></script>


<!-- описываем структуру калькулятора -->
<div class="calculator">
  <div class="calculator_display">{{this.display}}</div>
  <table class="calculator_buttons">
    <tr>
      <td class="calculator_buttons_i" onclick="this.pushNumber(7)">7</td>
      <td class="calculator_buttons_i" onclick="this.pushNumber(8)">8</td>
      <td class="calculator_buttons_i" onclick="this.pushNumber(9)">9</td>
      <td class="calculator_buttons_i" onclick="this.pushPlus()">+</td>
    </tr>
    <tr>
      <td class="calculator_buttons_i" onclick="this.pushNumber(4)">4</td>
      <td class="calculator_buttons_i" onclick="this.pushNumber(5)">5</td>
      <td class="calculator_buttons_i" onclick="this.pushNumber(6)">6</td>
      <td class="calculator_buttons_i" onclick="this.pushMinus()">-</td>
    </tr>
    <tr>
      <td class="calculator_buttons_i" onclick="this.pushNumber(1)">1</td>
      <td class="calculator_buttons_i" onclick="this.pushNumber(2)">2</td>
      <td class="calculator_buttons_i" onclick="this.pushNumber(3)">3</td>
      <td class="calculator_buttons_i" onclick="this.pushMultiply()">*</td>
    </tr>
    <tr>
      <td class="calculator_buttons_i" onclick="this.pushEqually()" colspan="3">=</td>
      <td class="calculator_buttons_i" onclick="this.pushDivide()">/</td>
    </tr>
  </table>
</div>


<!-- описываем дизайн калькулятора -->
<style type="text/css">

  .calculator {
    -webkit-user-select : none;
    width               : 150px;
  }

  .calculator_display {
    box-sizing       : border-box;
    height           : 30px;
    padding          : 5px;
    font-size        : 20px;
    background-color : #009ee1;
  }

  .calculator_buttons {
    width  : 100%;
    height : 170px;
  }

  .calculator_buttons_i {
    text-align         : center;
    border             : 1px solid #000000;
    box-shadow         : inset 0 0 5px #000000;
    background-color   : #a1c736;
    cursor             : pointer;
    -webkit-transition : all 0.2s;
  }

  .calculator_buttons_i:hover {
    background-color : #bbe63f;
  }

  .calculator_buttons_i:active {
    box-shadow       : inset 0 0 10px #000000;
    background-color : #9cbe33;
  }

</style>


<!-- описываем логику  калькулятора -->
<script>

  var Calculator = Widget.extend(function() {
    this.display = ''; // Калькулятор имеет дисплей
  });


  // калькулятор умеет нажиматься на цифры
  Calculator.prototype.pushNumber = function(number) { this.display += number };

  // калькулятор умеет нажиматься на "плюс"
  Calculator.prototype.pushPlus = function() { };

  // калькулятор умеет нажиматься на "минус"
  Calculator.prototype.pushMinus = function() { };

  // калькулятор умеет нажиматься на "умножить"
  Calculator.prototype.pushMultiply = function() { };

  // калькулятор умеет нажиматься на "делить"
  Calculator.prototype.pushDivide = function() { };

  // калькулятор умеет нажиматься на "равно"
  Calculator.prototype.pushEqually = function() { };

</script>




<!-- привяжем логику калькулятора к структуре -->
<script>  var calculator = new Calculator('.calculator'); </script>

я не понял что это

megaupload,
Что такое

Цитата:

Сообщение от megaupload

Доминатус

Цитата:

Сообщение от quirksmode

я не понял что это

Ага, я тоже.

и почему хуй в говне?

Цитата:

Сообщение от Gozar

Доминатус

Это модуль юракса отвечающий за MVC очевидно же)

Модель HTML, Логика Javascript, Отображение CSS - и все это Доминатус

Цитата:

Это модуль юракса отвечающий за MVC очевидно же)

Модель HTML, Логика Javascript, Отображение CSS - и все это Доминатус

эээ а что такое юракс?:D

Это Культурный феномен 21 века, позволивший слить яваскрипт код и сознание пользователя и обьединить все человечество в разум бога. Ты пропутил штоле?

Цитата:

Сообщение от Дзен-трансгуманист

Мог бы хоть раз повести себя культурно и не выебываться.

У меня в коде так уеба)))) ахах ладно ща поправлю

Цитата:

Сообщение от Дзен-трансгуманист

Здесь мое желание читать дальше отпало.

:lol: что за доминатус? что за юракс? описания нет, документации нет.

зато вот что есть

Цитата:

Сообщение от megaupload

['хуй', 'говно'];

Извини, но это халтура и не уважение к своему труду и ко всем нам. Начнём с того ты постиш в оффтопик, означает, что к данному творению нужно относится как к несерьёзно барахлу. Потом, нет ни документации, ни описания, даже ссылки на исходный код нет. Если ты хочешь серьёзно продвигать этот проект, то сейчас ты сделал только 5% работы. Посмотри на странички всех популярных либ и фреймворков: там везде есть как минимум дока, а также различные гайды, квикстарты, бенчмарки и т.д. У тебя ничего вообще нет, кроме троллинга своей же работы.

Я думал ты стал исправляться, я даже увидел проблеск серьёзности в твоих действиях, но

Цитата:

['хуй', 'говно'];

сняли с меня розовые очки.

kobezzza, и?
Ну вот если честно я думал вы достаточно глазастые и поймете что эта штука делает и как она работает и без док чисто по коду :-? А так вообще очевидно что я и доку напишу и примеры сделаю и.т.п. Все же только начинается.

То есть это пример ЧИСТО для того чтобы вы поняли как быстро реализуются простые логики и что все отделено от друг друга, комментарии указывают именно на это, на то что логика структура и "темка" отделены. и независимы.

Цитата:

Сообщение от megaupload (Сообщение 252065)

kobezzza, и?
Ну вот если честно я думал вы достаточно глазастые и поймете что эта штука делает и как она работает и без док чисто по коду :-?.

По примеру понятно что это ещё один шаблонизатор и ООП каркас, которых в сети over9000. В чём профит? Чем он лучше, чем Backbone, Spine, Angular, Knockout, iBEM ... Как мы можем это понять по твоему сферическому примеру? В чём заключаются killer feauture ?

Цитата:

Сообщение от megaupload (Сообщение 252065)

А так вообще очевидно что я и доку напишу и примеры сделаю и.т.п.

Не очевидно, за всё время, что ты здесь тусуешься ты не сделал ни одного проекта, а вот тем обещаний у тебя было оч много. Более того, как я писал выше, манера твоего общения и подача своей работы настолько низкого уровня, что мне уже даже не интересно (и не только мне), что же в итоге у тебя выйдет. Неужели так трудно быть серьёзным? Или у тебя какие то комплексы и поэтому тебе нравится выставлять себя клоуном?

Цитата:

Сообщение от megaupload

если честно

Если честно, то я увидел реализацию чата в много строк кода. Также я увидел extend который есть сейчас везде.

Данный код сам по себе не имеет ни какой ценности. Раз показал как легко создавать чаты, покажи как легко расширять логику чата. Если у юракса(До-са) есть достоинства, то ты их не показал.

Я и без библиотек и классов уложу логику чата в несколько строчек.

Цитата:

Сообщение от Gozar

аз показал как легко создавать чаты, покажи как легко расширять логику чата.

разумеется)) и еще ты говорил там что-то про зависимые выпадающие списки) да)?

Цитата:

Сообщение от megaupload

еще ты говорил там что-то про зависимые выпадающие списки) да)?

Я вроде про дерево говорил. Неужели ты реализовал списки смежности? Так ты с kobezzza решил посоревноваться? :)

Дерево можно хранить в DOM и оно может вообще ничего не знать про стороение. А само строение будет только в базе храниться.

'alignContent': new ProxyCap(),
        'alignItems': new ProxyCap(),
        'alignSelf': new ProxyCap(),
        'animation': new ProxyCap(),
        'animationDelay': new ProxyCap(),
        'animationDirection': new ProxyCap(),
        'animationDuration': new ProxyCap(),
        'animationFillMode': new ProxyCap(),
        'animationIterationCount': new ProxyCap(),
        'animationName': new ProxyCap(),
        'animationPlayState': new ProxyCap(),
        'animationTimingFunction': new ProxyCap(),
        'appRegion': new ProxyCap(),
        'appearance': new ProxyCap(),
        'aspectRatio': new ProxyCap(),
        'backfaceVisibility': new ProxyCap(),
        'backgroundClip': new ProxyCap(),
        'backgroundComposite': new ProxyCap(),
        'backgroundOrigin': new ProxyCap(),
        'backgroundSize': new ProxyCap(),
        'borderAfter': new ProxyCap(),
        'borderAfterColor': new ProxyCap(),
        'borderAfterStyle': new ProxyCap(),
        'borderAfterWidth': new ProxyCap(),
        'borderBefore': new ProxyCap(),
        'borderBeforeColor': new ProxyCap(),
        'borderBeforeStyle': new ProxyCap(),
        'borderBeforeWidth': new ProxyCap(),
        'borderEnd': new ProxyCap(),
        'borderEndColor': new ProxyCap(),
        'borderEndStyle': new ProxyCap(),
        'borderEndWidth': new ProxyCap(),
        'borderFit': new ProxyCap(),
        'borderHorizontalSpacing': new ProxyCap(),
        'borderImage': new ProxyCap(),
        'borderRadius': new ProxyCap(),
        'borderStart': new ProxyCap(),
        'borderStartColor': new ProxyCap(),
        'borderStartStyle': new ProxyCap(),
        'borderStartWidth': new ProxyCap(),
        'borderVerticalSpacing': new ProxyCap(),
        'boxAlign': new ProxyCap(),
        'boxDecorationBreak': new ProxyCap(),
        'boxDirection': new ProxyCap(),
        'boxFlex': new ProxyCap(),
        'boxFlexGroup': new ProxyCap(),
        'boxLines': new ProxyCap(),
        'boxOrdinalGroup': new ProxyCap(),
        'boxOrient': new ProxyCap(),
        'boxPack': new ProxyCap(),
        'boxShadow': new ProxyCap(),
        'clipPath': new ProxyCap(),
        'colorCorrection': new ProxyCap(),
        'columnAxis': new ProxyCap(),
        'columnBreakAfter': new ProxyCap(),
        'columnBreakBefore': new ProxyCap(),
        'columnBreakInside': new ProxyCap(),
        'columnCount': new ProxyCap(),
        'columnGap': new ProxyCap(),
        'columnProgression': new ProxyCap(),
        'columnRule': new ProxyCap(),
        'columnRuleColor': new ProxyCap(),
        'columnRuleStyle': new ProxyCap(),
        'columnRuleWidth': new ProxyCap(),
        'columnSpan': new ProxyCap(),
        'columnWidth': new ProxyCap(),
        'columns': new ProxyCap(),
        'filter': new ProxyCap(),
        'flex': new ProxyCap(),
        'flexBasis': new ProxyCap(),
        'flexDirection': new ProxyCap(),
        'flexFlow': new ProxyCap(),
        'flexGrow': new ProxyCap(),
        'flexShrink': new ProxyCap(),
        'flexWrap': new ProxyCap(),
        'flowFrom': new ProxyCap(),
        'flowInto': new ProxyCap(),
        'fontFeatureSettings': new ProxyCap(),
        'fontKerning': new ProxyCap(),
        'fontSizeDelta': new ProxyCap(),
        'fontSmoothing': new ProxyCap(),
        'fontVariantLigatures': new ProxyCap(),
        'gridAfter': new ProxyCap(),
        'gridAutoColumns': new ProxyCap(),
        'gridAutoFlow': new ProxyCap(),
        'gridAutoRows': new ProxyCap(),
        'gridBefore': new ProxyCap(),
        'gridColumn': new ProxyCap(),
        'gridColumns': new ProxyCap(),
        'gridEnd': new ProxyCap(),
        'gridRow': new ProxyCap(),
        'gridRows': new ProxyCap(),
        'gridStart': new ProxyCap(),
        'highlight': new ProxyCap(),
        'hyphenateCharacter': new ProxyCap(),
        'hyphenateLimitAfter': new ProxyCap(),
        'hyphenateLimitBefore': new ProxyCap(),
        'hyphenateLimitLines': new ProxyCap(),
        'hyphens': new ProxyCap(),
        'justifyContent': new ProxyCap(),
        'lineAlign': new ProxyCap(),
        'lineBoxContain': new ProxyCap(),
        'lineBreak': new ProxyCap(),
        'lineClamp': new ProxyCap(),
        'lineGrid': new ProxyCap(),
        'lineSnap': new ProxyCap(),
        'locale': new ProxyCap(),
        'logicalHeight': new ProxyCap(),
        'logicalWidth': new ProxyCap(),
        'marginAfter': new ProxyCap(),
        'marginAfterCollapse': new ProxyCap(),
        'marginBefore': new ProxyCap(),
        'marginBeforeCollapse': new ProxyCap(),
        'marginBottomCollapse': new ProxyCap(),
        'marginCollapse': new ProxyCap(),
        'marginEnd': new ProxyCap(),
        'marginStart': new ProxyCap(),
        'marginTopCollapse': new ProxyCap(),
        'marquee': new ProxyCap(),
        'marqueeDirection': new ProxyCap(),
        'marqueeIncrement': new ProxyCap(),
        'marqueeRepetition': new ProxyCap(),
        'marqueeSpeed': new ProxyCap(),
        'marqueeStyle': new ProxyCap(),
        'mask': new ProxyCap(),
        'maskBoxImage': new ProxyCap(),
        'maskBoxImageOutset': new ProxyCap(),
        'maskBoxImageRepeat': new ProxyCap(),
        'maskBoxImageSlice': new ProxyCap(),
        'maskBoxImageSource': new ProxyCap(),
        'maskBoxImageWidth': new ProxyCap(),
        'maskClip': new ProxyCap(),
        'maskComposite': new ProxyCap(),
        'maskImage': new ProxyCap(),
        'maskOrigin': new ProxyCap(),
        'maskPosition': new ProxyCap(),
        'maskPositionX': new ProxyCap(),
        'maskPositionY': new ProxyCap(),
        'maskRepeat': new ProxyCap(),
        'maskRepeatX': new ProxyCap(),
        'maskRepeatY': new ProxyCap(),
        'maskSize': new ProxyCap(),
        'maxLogicalHeight': new ProxyCap(),
        'maxLogicalWidth': new ProxyCap(),
        'minLogicalHeight': new ProxyCap(),
        'minLogicalWidth': new ProxyCap(),
        'nbspMode': new ProxyCap(),
        'order': new ProxyCap(),
        'paddingAfter': new ProxyCap(),
        'paddingBefore': new ProxyCap(),
        'paddingEnd': new ProxyCap(),
        'paddingStart': new ProxyCap(),
        'perspective': new ProxyCap(),
        'perspectiveOrigin': new ProxyCap(),
        'perspectiveOriginX': new ProxyCap(),
        'perspectiveOriginY': new ProxyCap(),
        'printColorAdjust': new ProxyCap(),
        'regionBreakAfter': new ProxyCap(),
        'regionBreakBefore': new ProxyCap(),
        'regionBreakInside': new ProxyCap(),
        'regionOverflow': new ProxyCap(),
        'rtlOrdering': new ProxyCap(),
        'rubyPosition': new ProxyCap(),
        'shapeInside': new ProxyCap(),
        'shapeMargin': new ProxyCap(),
        'shapeOutside': new ProxyCap(),
        'shapePadding': new ProxyCap(),
        'svgShadow': new ProxyCap(),
        'tapHighlightColor': new ProxyCap(),
        'textCombine': new ProxyCap(),
        'textDecorationsInEffect': new ProxyCap(),
        'textEmphasis': new ProxyCap(),
        'textEmphasisColor': new ProxyCap(),
        'textEmphasisPosition': new ProxyCap(),
        'textEmphasisStyle': new ProxyCap(),
        'textFillColor': new ProxyCap(),
        'textOrientation': new ProxyCap(),
        'textSecurity': new ProxyCap(),
        'textStroke': new ProxyCap(),
        'textStrokeColor': new ProxyCap(),
        'textStrokeWidth': new ProxyCap(),
        'transform': new ProxyCap(),
        'transformOrigin': new ProxyCap(),
        'transformOriginX': new ProxyCap(),
        'transformOriginY': new ProxyCap(),
        'transformOriginZ': new ProxyCap(),
        'transformStyle': new ProxyCap(),
        'transition': new ProxyCap(),
        'transitionDelay': new ProxyCap(),
        'transitionDuration': new ProxyCap(),
        'transitionProperty': new ProxyCap(),
        'transitionTimingFunction': new ProxyCap(),
        'userDrag': new ProxyCap(),
        'userModify': new ProxyCap(),
        'userSelect': new ProxyCap(),
        'wrap': new ProxyCap(),
        'wrapFlow': new ProxyCap(),
        'wrapThrough': new ProxyCap(),
        'writingMode': new ProxyCap()
    };

ProxyCapDominatus :D

Цитата:

Сообщение от Gozar

Дерево можно хранить в DOM и оно может вообще ничего не знать про стороение. А само строение будет только в базе храниться.

аддада, вот это вот ВООБЩЕ НИЧЕГО НЕ ЗНАТЬ это и есть то зачем я создаю Доминатус)) я щас примерчики запилю чтобы вы поняли. точнее уже пилю

Цитата:

Сообщение от monolithed

ProxyCapDominatus

таким образом я указываюб какого именно типа должна быть заглушка))
"прокси" (проксирующая на другое свойство при обращении) или "проперти" (тупо копирующая свойство с ближайщим аналогом)

а вообще код пишется для людей и ебал я в рот лишний килобайт)

Цитата:

Сообщение от Дзен-трансгуманист

Для людей, это вот так:

ну вообще-то бывают и другие капы. а твоим способом ты рискуешь повесить 2 разных капы на одно свойство) а в моем случае идешка подчеркнет. )

А ВОТ СОБСТВЕННО СУТЬ:

<script src="http://yourjavascript.com/1544031232/fix.js"></script>
<script src="http://yourjavascript.com/31353253412/widget.js"></script>



<style>
  #box {
    height           : 20px;
    text-align       : center;
    background-color : coral;
  }
</style>



<div id="box" onmousemove="this.mouseX = event.offsetX">
  {{this.mouseX}}
</div>



<script>
  var box = new Widget('#box');
</script>

Отлично, давайдосвидания, а я пока покажу ПРИМЕР С КАЛЬКУЛЯТОРОМ:

Создадим структуру калькулятора и его дизайн.

<div class="calculator">
  <div class="calculator_display">12345</div>
  <table class="calculator_buttons">
    <tr>
      <td class="calculator_buttons_i">7</td>
      <td class="calculator_buttons_i">8</td>
      <td class="calculator_buttons_i">9</td>
      <td class="calculator_buttons_i">+</td>
    </tr>
    <tr>
      <td class="calculator_buttons_i">4</td>
      <td class="calculator_buttons_i">5</td>
      <td class="calculator_buttons_i">6</td>
      <td class="calculator_buttons_i">-</td>
    </tr>
    <tr>
      <td class="calculator_buttons_i">1</td>
      <td class="calculator_buttons_i">2</td>
      <td class="calculator_buttons_i">3</td>
      <td class="calculator_buttons_i">*</td>
    </tr>
    <tr>
      <td class="calculator_buttons_i" colspan="3">=</td>
      <td class="calculator_buttons_i">/</td>
    </tr>
  </table>
</div>



<style type="text/css">
  .calculator {
    -webkit-user-select : none;
    width               : 150px;
  }

  .calculator_display {
    box-sizing       : border-box;
    height           : 30px;
    padding          : 5px;
    font-size        : 20px;
    background-color : #009ee1;
  }

  .calculator_buttons {
    width  : 100%;
    height : 170px;
  }

  .calculator_buttons_i {
    text-align         : center;
    border             : 1px solid #000000;
    box-shadow         : inset 0 0 5px #000000;
    background-color   : #a1c736;
    cursor             : pointer;
    -webkit-transition : all 0.2s;
  }

  .calculator_buttons_i:hover {
    background-color : #bbe63f;
  }

  .calculator_buttons_i:active {
    box-shadow       : inset 0 0 10px #000000;
    background-color : #9cbe33;
  }

</style>

Теперь опишем логику калькулятора

// Опишем логику калькулятора
  var Calculator = Widget.extend(function() {

    this.display = ''; // Калькулятор имеет дисплей

  });



  // калькулятор умеет нажиматься на цифры
  Calculator.prototype.pushNumber   = function(number) { };

  // калькулятор умеет нажиматься на "плюс"
  Calculator.prototype.pushPlus     = function() { };

  // калькулятор умеет нажиматься на "минус"
  Calculator.prototype.pushMinus    = function() { };

  // калькулятор умеет нажиматься на "умножить"
  Calculator.prototype.pushMultiply = function() { };

  // калькулятор умеет нажиматься на "делить"
  Calculator.prototype.pushDivide   = function() { };

  // калькулятор умеет нажиматься на "равно"
  Calculator.prototype.pushEqually  = function() { };

Возникает вопрос, где описывать те самые рычажки за которые будет оболочка дергать логику а логика оболочку? Конечно же в структуре, ОПИШЕМ ЭТИ СВЯЗИ:

<div class="calculator">
  <div class="calculator_display">{{this.display}}</div>   <!-- В дисплее отображается дисплей -->
  <table class="calculator_buttons">
    <tr>
      <td class="calculator_buttons_i" onclick="this.pushNumber(7)">7</td>
      <td class="calculator_buttons_i" onclick="this.pushNumber(8)">8</td>
      <td class="calculator_buttons_i" onclick="this.pushNumber(9)">9</td>
      <td class="calculator_buttons_i" onclick="this.pushPlus()">+</td>
    </tr>
    <tr>
      <td class="calculator_buttons_i" onclick="this.pushNumber(4)">4</td>
      <td class="calculator_buttons_i" onclick="this.pushNumber(5)">5</td>
      <td class="calculator_buttons_i" onclick="this.pushNumber(6)">6</td>
      <td class="calculator_buttons_i" onclick="this.pushMinus()">-</td>
    </tr>
    <tr>
      <td class="calculator_buttons_i" onclick="this.pushNumber(1)">1</td>
      <td class="calculator_buttons_i" onclick="this.pushNumber(2)">2</td>
      <td class="calculator_buttons_i" onclick="this.pushNumber(3)">3</td>
      <td class="calculator_buttons_i" onclick="this.pushMultiply()">*</td>
    </tr>
    <tr>
      <td class="calculator_buttons_i" onclick="this.pushEqually()" colspan="3">=</td>
      <td class="calculator_buttons_i" onclick="this.pushDivide()">/</td>
    </tr>
  </table>
</div>

ТЕПЕРЬ ВСЕ ВМЕСТЕ:

<!-- подключаем скрипты -->
<script src="http://yourjavascript.com/1544031232/fix.js"></script>
<script src="http://yourjavascript.com/31353253412/widget.js"></script>


<!-- описываем структуру калькулятора -->
<div class="calculator">
  <div class="calculator_display">{{this.display}}</div>
  <table class="calculator_buttons">
    <tr>
      <td class="calculator_buttons_i" onclick="this.pushNumber(7)">7</td>
      <td class="calculator_buttons_i" onclick="this.pushNumber(8)">8</td>
      <td class="calculator_buttons_i" onclick="this.pushNumber(9)">9</td>
      <td class="calculator_buttons_i" onclick="this.pushPlus()">+</td>
    </tr>
    <tr>
      <td class="calculator_buttons_i" onclick="this.pushNumber(4)">4</td>
      <td class="calculator_buttons_i" onclick="this.pushNumber(5)">5</td>
      <td class="calculator_buttons_i" onclick="this.pushNumber(6)">6</td>
      <td class="calculator_buttons_i" onclick="this.pushMinus()">-</td>
    </tr>
    <tr>
      <td class="calculator_buttons_i" onclick="this.pushNumber(1)">1</td>
      <td class="calculator_buttons_i" onclick="this.pushNumber(2)">2</td>
      <td class="calculator_buttons_i" onclick="this.pushNumber(3)">3</td>
      <td class="calculator_buttons_i" onclick="this.pushMultiply()">*</td>
    </tr>
    <tr>
      <td class="calculator_buttons_i" onclick="this.pushEqually()" colspan="3">=</td>
      <td class="calculator_buttons_i" onclick="this.pushDivide()">/</td>
    </tr>
  </table>
</div>


<!-- описываем дизайн калькулятора -->
<style type="text/css">

  .calculator {
    -webkit-user-select : none;
    width               : 150px;
  }

  .calculator_display {
    box-sizing       : border-box;
    height           : 30px;
    padding          : 5px;
    font-size        : 20px;
    background-color : #009ee1;
  }

  .calculator_buttons {
    width  : 100%;
    height : 170px;
  }

  .calculator_buttons_i {
    text-align         : center;
    border             : 1px solid #000000;
    box-shadow         : inset 0 0 5px #000000;
    background-color   : #a1c736;
    cursor             : pointer;
    -webkit-transition : all 0.2s;
  }

  .calculator_buttons_i:hover {
    background-color : #bbe63f;
  }

  .calculator_buttons_i:active {
    box-shadow       : inset 0 0 10px #000000;
    background-color : #9cbe33;
  }

</style>


<!-- описываем логику  калькулятора -->
<script>

  var Calculator = Widget.extend(function() {
    this.display = ''; // Калькулятор имеет дисплей
  });


  // калькулятор умеет нажиматься на цифры
  Calculator.prototype.pushNumber = function(number) { this.display += number };

  // калькулятор умеет нажиматься на "плюс"
  Calculator.prototype.pushPlus = function() { };

  // калькулятор умеет нажиматься на "минус"
  Calculator.prototype.pushMinus = function() { };

  // калькулятор умеет нажиматься на "умножить"
  Calculator.prototype.pushMultiply = function() { };

  // калькулятор умеет нажиматься на "делить"
  Calculator.prototype.pushDivide = function() { };

  // калькулятор умеет нажиматься на "равно"
  Calculator.prototype.pushEqually = function() { };

</script>




<!-- привяжем логику калькулятора к структуре -->
<script>  var calculator = new Calculator('.calculator'); </script>