JavaScript練習課題06〜09

JavaScript 授業

JavaScript練習課題（1）

【J06】

ボタンをクリックしたらアラートで答えを表示するJavaScriptを記述しなさい。「function」を使用します。（質問と答えは自由。）

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>js06</title>
    <style type="text/css">
	body {
		width: 200px;
		margin: 0 auto;
	}
	</style>
  <script>
	function question() {
		alert('富士山');
	}
	</script>
</head>
<body>
  <p>問い</p>
  <p>日本で一番高い山は？<input type="button" value='答え' onClick='question()'></p>
</body>
</html>
【J07】

「h1要素」と「ｐ要素」を、例のように表示するJavaScriptを記述しなさい。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>js07</title>
    <style type="text/css">
	body {
		width: 500px;
		margin: 0 auto;
	}
	</style>
</head>
<body>
   <script type="text/javascript">
	 document.write('<h1>はじめてのJavaScript<\/h1><p>ゼロからJavaScriptを記述できるように練習します。<\/p>');
	 </script>
</body>
</html>
【J08】

次の語句を説明しているものを選びなさい。
（1）onload
（2）( )
（3）alert
（4）;

（a）ポップアップウィンドウにメッセージを表示する
（b）JavaScriptのコードの行の終端
（c）ウェブページの読み込み完了を示す
（d）関数に渡される情報を囲む


(1) onload (c) ウェブページの読み込み完了を示す
(2) ( ) (d) 関数に渡される情報を囲む
(3) alert (a) ポップアップウィンドウにメッセージを表示する
(4) ; (b) JavaScriptのコードの行の終端

【J09】

ボタンをクリックするとアラートに「Hello JavaScript!」と表示させなさい。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>js09</title>
    <style type="text/css">
	body {
		width: 500px;
		margin: 0 auto;
	}
	h1 {
		font-size: 1.2em;
		border-bottom: 1px solid #ccc;
	}
	</style>
  <script>
	function greeting() {
		alert('Hello JavaScript!!');
	}
	</script>
</head>
<body>
  <h1>アラートを表示する</h1>
  <p>ボタンをクリックするとアラートが表示されます</p>
  <p><input type="button" value='クリックしてください' onClick='greeting()'></p>
</body>
</html>