- ステートメント(命令文)の終わりはセミコロン「;」
- ステートメントは、上から順に実行される
- 命令に与える値を、引数(ひきすう)という
- 文字列と数値の扱いの違いに注意する
- メソッドはオブジェクトに対する処理
- メソッドは、「オブジェクト名.メソッド名(引数);」の形式で呼び出す
- 引数が複数ある場合は、カンマ「,」で区切って指定する
- documentオブジェクトのwriteメソッドは、文字列をwebブラウザに表示する(出力)
- documentオブジェクトは、windowオブジェクトの子供
- プロパティ(属性)には、読み出しかできないものと書き換え可能なものがある
- プロパティに値を設定するには、「=」演算子を使用し代入する
Q1
- 同一ディレクトリ内のJavaScriptファイル「sample.js」をHTMLファイルに読み込むには、どのように記述すればよいか書きなさい
Q02
画像をクリックでアラートを表示するJavaScriptを記述しなさい。
(写真は自由。)「function」は使用しない通常のアラート。
<body>
<p><imgsrc="img/01.jpg"alt="アマルフィ海岸の写真"onclick="alert('アマルフィ海岸の写真です!')"></p>
</body>
Q03
Q04
Q05
解答例
<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>
<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>
<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>
<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>
<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>