DOMによるDOMの操作(第1部)

11523 ワード
rescript テキストリンク
場合によっては、1つのページのWebアプリケーションを書くことがありますが、あなたは直接のような反応のようなフレームワークを使用するDOMを操作したいと思います.
我々が構築しようとするプロジェクトは、三角関数に基づいて2つの方程式にパラメータを求め、それらの方程式から極またはlissajous図形を描く.

設定


Rescriptプロジェクトを作成し、名前を変更してディレクトリに移動します.
git clone https://github.com/rescript-lang/new-project
mv new-project domgraphs
cd domgraphs
The src ディレクトリには2つのファイルがありますDemo.res , ソースファイルとDemo.bs.js 生成されたJavaScript.(The bs バックルスクリプトの略です.バックロススクリプトは書き換えとして改装されている削除する.bs.js ファイルとソースファイルの名前を変更します
rm src/Demo.bs.js
mv src/Demo.res src/DomGraphs.res
次に、HTMLをファイルに入れますsrc/index.html .
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>DOM Graphs</title>
    <style type="text/css">
      #canvas {
        width: 450px;
        float: left;
        border: 1px solid black;
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <h1>DOM Graphs</h1>
    <canvas id="canvas" width="400" height="400">
      Your browser does not support the &lt;canvas&gt; element :(
    </canvas>
    <div>
      <p><input type="text" size="3" id="factor1"/>
      <select id="fcn1">
        <option value="sin">sin</option>
        <option value="cos">cos</option>
      </select>
      (
        <input type="text" size="3" id="theta1"/>
        &theta; +
        <input type="text" size="3" id="offset1"/>&deg;
      )</p>

      <p><input type="text" size="3" id="factor2"/>
      <select id="fcn2">
        <option value="sin">sin</option>
        <option value="cos">cos</option>
      </select>
      (
        <input type="text" size="3" id="theta2"/>
        &theta; +
        <input type="text" size="3" id="offset2"/>&deg;
      )</p>

      <p>
        Type of graph:
        <input type="radio" value="polar" name="graphType" id="polar"/>
          <label for="polar">Polar</label>
        <input type="radio" value="polar" name="graphType" id="lissajous"/>
          <label for="lissajous">Lissajous</label>
      </p>

      <p><button id="draw" value="draw">Draw</button></p>
    </div>
    <script type="text/javascript" src="DomGraphs.bs.js"></script>
  </body>
</html>
The <script> 最後の要素はアプリケーションコードを含むJavaScriptファイルの名前を与えますDomGraphs.res ファイル.
リスクリプトはDom DOMの基本的な操作のためのライブラリですが、より多くの力と便宜のために、あなたはbs-webapi 図書館.依存を設定するbs-webapi プロジェクトのbs-config.json ファイル
  "bs-dependencies": [
    "bs-webapi"
  ],
インストールbs-platform and bs-webapi :
npm install # installs the ReScript platform
npm install --save bs-webapi
最後に、コンパイラによって生成されたHTMLファイルとJavaScriptを受け取り、1つの素晴らしいWebアプリケーションに置くバンドルが必要です.この記事ではparcel , それは箱の右から動作し、設定の多くを必要としないため.あなたがすべてのプロジェクトのためにそれを複製する必要がないように、グローバルにインストールしてください.
npm install --global parcel-bundler

DOMへのアクセス


では、いくつかのモジュールを見てみましょうbs-webapi あなたが頻繁に使用すると、我々はこのプログラムで使用するもの.
Webapi
├── Canvas
│   ├── Webapi.Canvas.Canvas2d
├── Dom
│   ├── Webapi.Dom.Attr
│   ├── Webapi.Dom.ChildNode
│   ├── Webapi.Dom.Document
│   ├── Webapi.Dom.Element
│   ├── Webapi.Dom.Event
│   ├── Webapi.Dom.EventTarget
│   ├── Webapi.Dom.HtmlElement
│   ├── Webapi.Dom.HtmlInputElement
│   ├── Webapi.Dom.MouseEvent
│   ├── Webapi.Dom.Node
│   ├── Webapi.Dom.Text
│   └── Webapi.Dom.Window
JavaScriptのクイックテストをしましょうWindow.alert() 関数.コードをあなたのDomGraphs.res ファイル:
let testAlert = Webapi.Dom.Window.alert("It works!", Webapi.Dom.window)
The bs-webapi ライブラリは、ほとんどの時間、あなたが(この場合、我々は警告のために使用しているウィンドウ)で動作している要素は、呼び出しの最後の引数であるように設定されます.
コンパイルとバンドル
npm run build # or: bsb -make-world
parcel build src/index.html --public-url ./
The parcel command 1 iアプリケーションのエントリポイントを指定するsrc/index.html ) そして、この場合、JavaScriptを提供するときに使用するURL、HTMLと同じディレクトリ--public-url ./ ). これはローカルインストールcssnano パッケージ.あなたは--no-minify このローカルインストールを防ぐフラグ.
これらの手順が完了すると、ファイル名DomGraphs.bs.js , を返します.dist これは、バンドルされたWebアプリケーションが含まれます.
$ ls dist
DomGraphs.bs.5acda38d.js  DomGraphs.bs.5acda38d.js.map  index.html
あなたが走るたびにparcel , これは、処理されているファイルの内容に基づいて、バンドルされたファイルに追加する新しい番号を生成します.複数の異なる取得を避けるために.js and .js.map あなたの蓄積ファイルdist ディレクトリを再構築する前にディレクトリを削除します.こちらがbash スクリプトを実行します.
#!/bin/bash

npm run build # or bsb -make-world
status=$?
if test $status -eq 0
then
  rm -rf dist
  parcel build src/index.html src/*csv --public-url ./
fi
すべてがうまくいけば、あなたが開くときdist/index.html ファイルをブラウザに表示すると、警告を表示されますIt works!すべてが設定されたので、プロジェクトコードを書き始める時間です.
Unity Androidのストレージ残量を取得(Android4.4.2、5.1.1、6.0.0による確認済み)
09異常処理