2014-11-15

2014-11-15

確認演習(1)Add Star

 

 

JavaScript

  • ステートメント(命令文)の終わりはセミコロン「;」
  • ステートメントは、上から順に実行される
  • 命令に与える値を、引数(ひきすう)という
  • 文字列と数値の扱いの違いに注意する
  • メソッドはオブジェクトに対する処理
  • メソッドは、「オブジェクト名.メソッド名(引数);」の形式で呼び出す
  • 引数が複数ある場合は、カンマ「,」で区切って指定する
  • documentオブジェクトのwriteメソッドは、文字列をwebブラウザに表示する(出力)
  • documentオブジェクトは、windowオブジェクトの子供
  • プロパティ(属性)には、読み出しかできないものと書き換え可能なものがある
  • プロパティに値を設定するには、「=」演算子を使用し代入する

Q1
  • 同一ディレクトリ内のJavaScriptファイル「sample.js」をHTMLファイルに読み込むには、どのように記述すればよいか書きなさい


Q02

 

 

画像をクリックでアラートを表示するJavaScriptを記述しなさい。

(写真は自由。)「function」は使用しない通常のアラート。

 

 

f:id:web-css-design:20111102103155j:image


<body>
<p><imgsrc="img/01.jpg"alt="アマルフィ海岸の写真"onclick="alert('アマルフィ海岸の写真です!')"></p>
</body>


Q03

 

 

マウスオーバーでアラートを表示するJavaScriptを記述しなさい。(写真は自由。)

 

 

f:id:web-css-design:20111102103317j:image



Q04

 

 

ページを開いた瞬間にアラートを表示するJavaScriptを記述しなさい。(写真は自由。) 

 

 

f:id:web-css-design:20111102103556j:image



Q05

 

 

1年が何秒かを表示するJavaScriptを記述しなさい。

 

 




解答例

f:id:css_design:20130618094707j:image

  • script要素、src属性を利用する


<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>イベントハンドラの練習(1)</title>
<style>
p img {
  cursor: pointer;
}
</style>
</head>
<body>
<p><imgsrc="img/01.jpg"width="550"height="400"alt="アマルフィ海岸の写真"onclick="alert('アマルフィ海岸の写真です!')"></p>
</body>
</html>

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>イベントハンドラの練習(2)</title>
<style>
p img {
  cursor: pointer;
}
</style>
</head>
<body>
<p><imgsrc="img/02.jpg"width="550"height="400"alt="アマルフィ船着き場の写真"onmouseover="alert('アマルフィ船着き場の写真です!')"></p>
</body>
</html>

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>イベントハンドラの練習(3)</title>
<style>
p img {
  cursor: pointer;
}
</style>
</head>
<body>
<p><imgsrc="img/03.jpg"width="550"height="400"alt="アマルフィの写真"onmouseout="alert('アマルフィの写真です!')"></p>
</body>
</html>

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>イベントハンドラの練習(4)</title>
</head>
<body>
<p><imgsrc="img/04.jpg"width="550"height="360"alt="アマルフィの写真"onload="alert('アマルフィの写真です!')"></p>
</body>
</html>

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>1年間の秒数は?</title>
</head>
<body>
<script>
var byou = 60;
var fun = 60;
var jikan = 24;
var nichi = 365;
var time = byou * fun * jikan * nichi;

document.write ('1年が何秒かをJavaScriptで表示します。<br>');
document.write ( byou, '秒×', fun, '分×', jikan, '時間×', nichi, '日 = ', time, '秒');
</script>
</body>
</html>