Locked History Actions

Diff for "JavaScript/JSDT"

Differences between revisions 11 and 12
Deletions are marked like this. Additions are marked like this.
Line 28: Line 28:
== プロジェクトの作成と設定 == == html5プロジェクトの作成と設定 ==

上記「Eclipsed」に記述された手順に従う。

 * 新規プロジェクト作成で、「Static Web Project」を選択する。ここで指定するのはプロジェクト名のみ。
 * プロジェクトを右クリックして新規ファイル作成で「HTML File」を選択して、名前を入力して、Nextでhtml5を選択する。<<BR>>ただし、この選択は単に自動作成されるテンプレートをhtml5にするだけ(らしい)。
 * 上記「Eclipsed」で用いられているサンプルを入力

{{{
<!DOCTYPE html>
<html>
  <head>
    <title>Canvas test</title>

    <!-- Pull in canvas support for IE -->
    <!--[if IE]><script src="excanvas.js"></script><![endif]-->

    <script type="text/javascript">
      window.onload = function() {
        var drawingCanvas = document.getElementById('canvas1');

        // Is element in the DOM and does browser support canvas
        if (drawingCanvas && drawingCanvas.getContext) {
          // Init drawing context
          var context = drawingCanvas.getContext('2d');

          // Create 4 squares
          context.fillStyle = "#00FF00"; // Green
          context.fillRect(0,0,100,100);

          context.fillStyle = "#0000FF"; // Blue
          context.fillRect(0,100,100,100);

          context.fillStyle = "#FF0000"; // Red
          context.fillRect(100,0,100,100);

          context.fillStyle = "#FFFF00"; // Yellow
          context.fillRect(100,100,100,100);
        }
      }
    </script>
   </head>
 <body>
   <h1>HTML5 Canvas</h1>
   <canvas id="canvas1" width="200" height="200">
     <p>Your browser doesn't support canvas.</p>
   </canvas>
 </body>
</html>
}}}

 * 作成したhtmlファイルを右クリックしてRun As> Run On Serverを選択。
 * 「Choose an existing server」の選択、「HTTP Preview at localhost」の選択になっているので、Finish
 * HTML5 Canvasと4つの色分けされた正方形が描画される。

Eclipse JSDT

以下はeclipse indio + JSDTについて JSDTはJavaScript Debug Toolkitの略だそうだ(Developmentではない)。

参考

Eclipsed

インストール

他のバージョンのEclipseにプラグインとして道入することもできるが、どれを道入すべきかはわかりにくいので、道入済のeclipseの新たにダウンロードする方が簡単である。

html5プロジェクトの作成と設定

上記「Eclipsed」に記述された手順に従う。

  • 新規プロジェクト作成で、「Static Web Project」を選択する。ここで指定するのはプロジェクト名のみ。
  • プロジェクトを右クリックして新規ファイル作成で「HTML File」を選択して、名前を入力して、Nextでhtml5を選択する。
    ただし、この選択は単に自動作成されるテンプレートをhtml5にするだけ(らしい)。

  • 上記「Eclipsed」で用いられているサンプルを入力

<!DOCTYPE html>
<html>
  <head>
    <title>Canvas test</title>

    <!-- Pull in canvas support for IE -->
    <!--[if IE]><script src="excanvas.js"></script><![endif]-->

    <script type="text/javascript">
      window.onload = function() {
        var drawingCanvas = document.getElementById('canvas1');

        // Is element in the DOM and does browser support canvas
        if (drawingCanvas && drawingCanvas.getContext) {
          // Init drawing context
          var context = drawingCanvas.getContext('2d');

          // Create 4 squares
          context.fillStyle =   "#00FF00";  // Green
          context.fillRect(0,0,100,100);

          context.fillStyle = "#0000FF";    // Blue
          context.fillRect(0,100,100,100);

          context.fillStyle = "#FF0000";    // Red
          context.fillRect(100,0,100,100);

          context.fillStyle = "#FFFF00";    // Yellow
          context.fillRect(100,100,100,100);
        }
      }
    </script>
   </head>
 <body>
   <h1>HTML5 Canvas</h1>
   <canvas id="canvas1" width="200" height="200">
     <p>Your browser doesn't support canvas.</p>
   </canvas>
 </body>
</html>
  • 作成したhtmlファイルを右クリックしてRun As> Run On Serverを選択。

  • 「Choose an existing server」の選択、「HTTP Preview at localhost」の選択になっているので、Finish
  • HTML5 Canvasと4つの色分けされた正方形が描画される。