創造的ウェブサービス構築基礎論

ニフティ株式会社寄付講座

第四回 (2009年10月15日)

Martin J. Dürst, 松本 章代

(X)HTML と JavaScript の基礎

http://www.sw.it.aoyama.ac.jp/2009/Mashup/lecture4.html

AGU

(c) 2009 松本　章代 青山学院大学

今日の目的

今日の目次

先週の宿題について

XHTML とは

HTML との違い

・・・・・・など

XHTML 1.0 の記述例 (前半)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">

XHTML 1.0 の記述例 (後半)

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>（ページタイトル）</title>
</head>
<body>
<h1>（見出し）</h1>
<p>（地の文）</p>
</body>
</html>

JavaScript とは

JavaScript の記述例 (前半)

最初の 6 行は省略
<meta http-equiv="Content-Script-Type" content="text/javascript" />
 <title>アラートのサンプル</title>
<script type="text/javascript">
<!--
  function eventAlert() {
    window.alert("DANGER!")
  }
//-->
</script>
 </head>

JavaScript の記述例 (後半)

<body>
<h1>クリックすると・・・</h1>
<form>
<input type="button" value="OK" onClick="eventAlert()" />
</form>
</body>
</html>

JavaScript 部分を外部ファイルにする方法

HTML ファイル
<script src="XXXXXXXX" type="text/javascript">
</script>

JavaScript ファイル

JavaScript の注意点

ダイナミック HTML とは

DHTML の記述例 (前半)

最初の 7 行は省略
<title>DHTML のサンプル</title>
<script type="text/javascript">
<!--
  function changeImage() {
    document.getElementById("IMG").setAttribute("src","nifty.gif")
  }
//-->
</script>
</head>

DHTML の記述例 (後半)

<body>
<h1>クリックすると・・・</h1>
<img src="agu.gif" id="IMG">
<form>
<input type="button" value="OK" onClick="changeImage()" />
</form>
</body>
</html>

演習：JavaScript・DHTML を用いた Web ページの作成

ボタンを押したら・・・どんなことが起こったらおもしろい？

・・・・・・など、
テキストに載っている機能を複数組み合わせて、
楽しい変化が起こるページを自由に作ってみよう。

作品の提出方法