DML入門−第2部:機能テンプレートの使用

32215 ワード
webdev oop programming javascript テキストリンク
DMLはJavaScriptのみを使用して動的なWebコンテンツを作成するための新しいアプローチを備えています.これはいくつかの新しいデザインパターンを可能にします.このポストは、機能テンプレートの使用を説明するでしょう.
他のフレームワークのテンプレートは短いHTMLスニペットから生成されたデザインパターンです.外部パラメータを使用してランタイム中に配置される1つ以上のHTML要素を含めることができます.DMLが動的にすべての内容を生成するので、テンプレートは機能またはクラスの使用によって提供されることができます.これを「機能テンプレート」と呼ぶ.デモとして、シンプルな電卓アプリケーションは、テンプレート関数を使用して構築されます.各ステップについて詳細に説明する.

シンプルな電卓アプリ



空のHTMLページと2つの外部ライブラリが必要です.
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://efpage.de/DML/DML_homepage/lib/DML-min.js"></script>
機能テンプレートは以下のように簡単です.
// round button
function RB(s, color) {
  const r = 30;
  return button(s, "width:" + px(r) + "; height:" + px(r) + "; border-radius: 50%; background-color: " + color + ";  margin: 3px;")
}
これは直径30ピクセルの丸いボタンを作ります.これは単なるボタンではなく、本物のテンプレートです.しかし、それはデモンストレーションとして機能するかもしれません.そして、異なる特性(そして、要素)がテンプレートとして機能する機能を使って結合されることができます.
我々のアプリケーションには、ボタンの2種類が必要です
のための
  • 黄色のボタン
    オペレータ
    • のための
  • グレイボタン
    そこで、rb ()を使用し、さらにいくつかのプロパティを追加する2つの関数を追加します.
    // yellow button for numbers
function number(s) {
  let bt = RB(s, "yellow")
  bt.onmouseover = () => bt.style.backgroundColor = "orange"
  bt.onmouseout = () => bt.style.backgroundColor = "yellow"
  return bt
}

// gray button for operators
function operator(s) {
  let bt = RB(s, "silver")
  bt.onmouseover = () => bt.style.backgroundColor = "#6060FF "
  bt.onmouseout = () => bt.style.backgroundColor = "silver"
  br() // create line break
  return bt
}
    ここでは、ボタンやいくつかのイベント機能には、ホバー効果を作成するさまざまな色を適用します.CSSを使用して、同じ効果を生み出すことができました.しかし、CSSはスタイリングのみに限られていますが、私たちがテンプレートに適用する関数は、いくつかの操作上の特徴を定義することもできます(値をチェックし、データベースに何かを格納します).テンプレート関数は非常に強力であり、DOM要素へのプログラムロジックも直接適用できます.
    演算子関数は、各ボタンの後に改行BR ()を作成します.
    両方の関数は、新しく生成されたボタンへのアクセスを与えるために新しく作成されたボタンへのリファレンスを返します.今、我々はキーボードを作成したい.DMLでは、この作業を行うことができます.まず、ブロックを作成します.
    const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, ".", 0]
// build number block  
sidiv("", "margin-right: 10px;") // ---> create a box 
i = 0
for (n of numbers) {
  number(String(n)).onclick = numberClick
  if (++i % 3 == 0) br() // line break after 3rd column
}
number("C").onclick = () => { op = "="; display.textContent = ""; buffer = "0" }
unselectBase() // <--- finish box
    ボタンはDMLのDISC内で生成され、sidiv ()はインラインコマンドであり、インラインdivを作成し、このボックスに挿入ポイントを設定します.数字のボタンは、配列“番号”からループで作成されます.すべての3番目のボタンの後に行を挿入します.OnClickイベントを作成時にすべてのボタン(OnClick -> NumberClick ())に適用してボタンを操作します.
    Cボタン( clear )は別のイベントを必要とするので、arryから作成されず、手動で事前に作成されました.
    同じ手順を使用して演算子ボタンを作成します.行ボタンbr ()は、各演算子ボタンの後に必要なので、テンプレート関数演算子( s )
    const operators = ["+", "-", "*", "/", "="]
// Right box for operators
sidiv() // ---> create a box
for (o of operators)
  operator(o).onclick = operatorClick;
unselectBase() // <--- finish box
    仕上げ!我々は、インターフェイスの主要な部分を構築する17の機能ボタンを使用して2 div ';sを作成している.完全なアプリケーションでは、標準的な電卓の作法を模倣する場合は少しトリッキーな操作を評価するためにいくつかの追加のコードがあります.

    全文


    これはDMLの「機能テンプレート」の使用の短いデモンストレーションでした.完全なコードは以下の通りです.
    <!DOCTYPE html>
<html lang="de">

<head>
  <meta charset="utf-8">
  <title>title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <script src="https://efpage.de/DML/DML_homepage/lib/DML-min.js"></script>
</head>

<body>
  <script>  "use strict";
    let i, n, o, v, history, display, buffer = "0", op = "=";
    const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, ".", 0]
    const operators = ["+", "-", "*", "/", "="]

    // round button
    function RB(s, color = "yellow") {
      const r = 30;
      return button(s, "width:" + px(r) + "; height:" + px(r) + "; border-radius: 50%; background-color: " + color + ";  margin: 3px;")
    }

    // yellow button for numbers
    function number(s) {
      let bt = RB(s, "yellow")
      bt.onmouseover = () => bt.style.backgroundColor = "orange"
      bt.onmouseout = () => bt.style.backgroundColor = "yellow"
      return bt
    }

    // gray button for operators
    function operator(s) {
      let bt = RB(s, "silver")
      bt.onmouseover = () => bt.style.backgroundColor = "#6060FF "
      bt.onmouseout = () => bt.style.backgroundColor = "silver"
      br()
      return bt
    }

    function bval() { return Number(buffer) }
    function dval() { return Number(display.textContent) }

    // Click on number
    function numberClick(e) {
      if (op == "=") {
        display.textContent = ""
        op = ""
      }
      if (op != "")
        if (buffer == "0") {
          buffer = display.textContent
          display.textContent = ""
        }
      display.textContent += e.srcElement.textContent
    }

    // evaluate last function and set as display value
    function evaluate() {
      switch (op) {
        case "+": v = bval() + dval(); break;
        case "-": v = bval() - dval(); break;
        case "*": v = bval() * dval(); break;
        case "/": v = bval() / dval(); break;
        default: v = Number(display.textContent);
      }
      return String(v)
    }

    // evaluate the operator click
    function operatorClick(e) {
      let flg = (op != "=") && (buffer != 0)
      let o = bval() + op + dval() + "="
      display.textContent = evaluate() // evaluate the last operator to display
      buffer = "0"                     // clear buffer
      o += display.textContent
      if (flg) {
        history.value += "\n" + o
        history.scrollTop = history.scrollHeight;
      }
      op = e.srcElement.textContent    // set new operator
    }
    /****************************************************************************************
      Build the panels
    ****************************************************************************************/

    // build Main box
    sidiv("", _bigPadding + _radius + _box)

    // left subbox for numbers 
    sidiv("Calculator", "margin-right: 10px;"); br()
    history = textarea("", { readonly: true, style: "resize: none; font-size: 60%; height: 50px;" })
    display = div("", _border + _right + "margin-bottom: 15px; height: 22px;") // result display

// build number block
i = 0
for (n of numbers) {
  number(String(n)).onclick = numberClick
  if (++i % 3 == 0) br()
}
number("C").onclick = () => { op = "="; display.textContent = ""; buffer = "0" }
unselectBase()

// Right box for operators
sidiv()
for (o of operators)
  operator(o).onclick = operatorClick;
unselectBase(2)

  </script>
</body>
</html>
    • his
    AWSのAPIゲートウェイ