確認テスト(1)

JavaScript基礎まとめ

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


画像をクリックでアラートを表示するJavaScriptを記述しなさい。
(写真は自由。)「function」は使用しない通常のアラート。

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


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


Q04


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


Q05


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



解答例

  • script要素、src属性を利用する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>イベントハンドラの練習(1)</title>
<style>
p img {
  cursor: pointer;
}
</style>
</head>
<body>
<p><img src="img/01.jpg" width="550" height="400" alt="アマルフィ海岸の写真" onclick="alert ( 'アマルフィ海岸の写真です!' )"></p>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>イベントハンドラの練習(2)</title>
<style>
p img {
  cursor: pointer;
}
</style>
</head>
<body>
<p><img src="img/02.jpg" width="550" height="400" alt="アマルフィ船着き場の写真" onmouseover="alert( 'アマルフィ船着き場の写真です!' )"></p>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>イベントハンドラの練習(3)</title>
<style>
p img {
  cursor: pointer;
}
</style>
</head>
<body>
<p><img src="img/03.jpg" width="550" height="400" alt="アマルフィの写真" onmouseout="alert( 'アマルフィの写真です!' )"></p>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>イベントハンドラの練習(4)</title>
</head>
<body>
<p><img src="img/04.jpg" width="550" height="360" alt="アマルフィの写真" onload="alert( 'アマルフィの写真です!' )"></p>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="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>

広告を非表示にする