Locked History Actions

Diff for "JavaScript/JSDT"

Differences between revisions 13 and 14
Deletions are marked like this. Additions are marked like this.
Line 24: Line 24:
他のバージョンのEclipseにプラグインとして道入することもできるが、どれを道入すべきかはわかりにくいので、道入済のeclipseの新たにダウンロードする方が簡単である。 他のバージョンのEclipseにプラグインとして道入することもできるが、どれを道入すべきかはわかりにくい。また、jsdtのみ道入しても使いづらいので、あらかじめweb関連のプラグインが道入済のeclipseを新たにダウンロードし、そこにjsdtをインストールした方が簡単である。
Line 26: Line 26:
 [[http://www.eclipse.org/downloads/]]の「Eclipse IDE for JavaScript Web Developers」をダウンロードする。
 * [[http://www.eclipse.org/downloads/]]の「Eclipse IDE for JavaScript Web Developers」をダウンロードして実行する。
 * 上記本家に示されたupdate site「http://jsdt.googlecode.com/svn/trunk/org.ayound.js.debug.update」を指定してjsdtをインストールする。
Line 96: Line 98:

Eclipse JSDT

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

参考

Eclipsed

インストール

他のバージョンのEclipseにプラグインとして道入することもできるが、どれを道入すべきかはわかりにくい。また、jsdtのみ道入しても使いづらいので、あらかじめweb関連のプラグインが道入済のeclipseを新たにダウンロードし、そこにjsdtをインストールした方が簡単である。

Web Projectの作成と実行

上記「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と４つの色分けされた正方形が描画される。

html5の判別

  • IDEはhtmlファイルのDOCTYPEを見て、htmlバージョンを判断している。例えば、最初の 

<!DOCTYPE html>

を 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

に変更すると、canvasタグについて「Unknown tag(canvas)」という警告が表示される。

ただし、いずれの場合でも実行してみるとcanvasは機能し、色分け正方形は表示される。

last edited 2018-06-28 07:14:16 by ysugimura