コンピュータグラフィックス 演習4

WWWサーバが apache2 httpd の場合

手元のMacで WWW サーバを動作させて、自分の HTML ファイルを公開してみましょう。

下の例では Mac 環境の /Users/自分のアカウント/Sites/ にファイルを置いて、それをWWWサーバで公開する場合です。 同じマシン上のブラウザからは http://localhost/~自分のアカウント名 で参照できます。 自分のアカウント名が nitta の場合は http://localhost/~nitta/ です。

WWWサーバを起動する

手元でのWWWサーバの起動方法( Apache httpd版 )。

ブラウザでアクセスする。

  1. Chrome ブラウザを起動します。
  2. URLを指定します。ここでの例は自分のアカウント名 が nitta の場合を示しています。
    3.   /User/nitta/Sites/ にあるファイルの一覧を見る  http://localhost/~nitta/
  /User/nitta/Sites/a.html にアクセスする        http://localhost/~nitta/a.html
  /User/nitta/Sites/b/a.html にアクセスする      http://localhost/~nitta/b/a.html
  3. Chrome において画面の上のメニューから「その他のツール」-->「デベロッパーツール」-->「Console」を選択し、Chromeの画面の右半分にJavaScriptコンソールを表示しなさい。「Console」のlogが表示されている状態にしなさい。

作成したプログラムが正しく動作することを確認したら、それぞれの 提出先に提出しなさい。

提出した後は、正しく提出されていることを http://ynitta.com/class/cg/local/handin/ で必ず確認しておいて下さい。

課題提出〆切は次回の講義が始まる時刻です。

課題4: JavaScript

提出ファイルcg-kadai4.html
コメント欄:なし
提出先: 「宿題提出Web:コンピュータグラフィックス：課題4」 http://ynitta.com/class/cg/local/handin/up.php?id=kadai4
  1. apache2 httpd を起動し、~/Sites/ で自分のHTML ファイルを公開できるようにしなさい。
  2. Emacsを起動し~/Sites/cg-kadai4.html というファイルを作成しなさい。
  3. 作成したファイルに Chrome でアクセスしてJavaScriptの動作を確認しなさい。javascript コンソールを表示させること。
  4. 正しく動作することが確認できたら、課題を提出しなさい。

JavaScriptを使って、1000000以下の双子素数のうち最大の組をコンソールに表示するcg-kadai4.htmlファイルを作成しなさい。

cg-kadai4.html (抜粋)
<html lang="ja">
<head>
  <meta charset="utf-8" />
</head>
<body>
CG 課題4
  <script type="text/javascript">
  //<![CDATA[
var N = 1000000;
var p = primes(N);
var i;
for (i=N; i>=2; i--) {
  if (p[i] && p[i-2]) {
    console.log((i-2)+" "+i);
    break;
  }
}

function primes(N) {
  var a = [];

  // 課題: ここに適切なコードを書きなさい。

  return a;
}
  //]]>
  </script>
</body>
</html>
これ以下はWWWサーバにpythonを使う場合の説明です。 2023年度の授業のデフォルト環境 (apache2 httpd) では関係ありません。

WWWサーバがPythonの場合

手元のMacで WWW サーバを動作させて、あるフォルダに置いた HTML ファイルを公開してみましょう。 同じマシン上のブラウザからは http://localhost:8000/ で参照できます。 下の例では Mac 環境の ~/cg にファイルを置いて、それをWWWサーバで公開する場合です。

WWWサーバを起動する

ターミナルで操作します。

  1. ホーム・ディレクトリに新しいフォルダ cg を作成します。
    2. mkdir cg
  2. カレント・ディレクトリを cg に変更します。
    3. cd cg
  3. Python2で WWW サーバを起動します。
    4. python -m SimpleHTTPServer 8000

ブラウザでアクセスする。

  1. Chrome ブラウザを起動します。
  2. URLを指定します
    3.   cg/ にあるファイルの一覧を見る  http://localhost:8000/
  cg/a.html にアクセスする        http://localhost:8000/a.html
  cg/b/a.html にアクセスする      http://localhost:8000/b/a.html
  3. Chrome において画面の上のメニューから「その他のツール」-->「デベロッパーツール」-->「Console」を選択し、Chromeの画面の右半分にJavaScriptコンソールを表示しなさい。「Console」のlogが表示されている状態にしなさい。

作成したプログラムが正しく動作することを確認したら、それぞれの 提出先に提出しなさい。

提出した後は、正しく提出されていることを http://ynitta.com/class/cg/local/handin/ で必ず確認しておいて下さい。

課題提出〆切は次回の講義が始まる時刻です。

課題4: JavaScript

提出ファイルcg-kadai4.html
コメント欄:なし
提出先: 「宿題提出Web:コンピュータグラフィックス：課題4」 http://ynitta.com/class/cg/local/handin/up.php?id=kadai4
  1. ~/cg/ フォルダ内で、pythonを使ってWWWサーバを動かしなさい。
  2. Emacsを起動し~/cg/cg-kadai4.html というファイルを作成しなさい。
  3. 作成したファイルに Chrome でアクセスしてJavaScriptの動作を確認しなさい。javascript コンソールを表示させること。
  4. 正しく動作することが確認できたら、課題を提出しなさい。

JavaScriptを使って、1000000以下の双子素数のうち最大の組をコンソールに表示するcg-kadai4.htmlファイルを作成しなさい。

cg-kadai4.html (抜粋)
<html lang="ja">
<head>
  <meta charset="utf-8" />
</head>
<body>
CG 課題4
  <script type="text/javascript">
  //<![CDATA[
var N = 1000000;
var p = primes(N);
var i;
for (i=N; i>=2; i--) {
  if (p[i] && p[i-2]) {
    console.log((i-2)+" "+i);
    break;
  }
}

function primes(N) {
  var a = [];

  // 課題: ここに適切なコードを書きなさい。

  return a;
}
  //]]>
  </script>
</body>
</html>