確認テスト（1）
JavaScript
- ステートメント（命令文）の終わりはセミコロン「；」
- ステートメントは、上から順に実行される
- 命令に与える値を、引数（ひきすう）という
- 文字列と数値の扱いの違いに注意する
- メソッドはオブジェクトに対する処理
- メソッドは、「オブジェクト名.メソッド名(引数);」の形式で呼び出す
- 引数が複数ある場合は、カンマ「,」で区切って指定する
- documentオブジェクトのwriteメソッドは、文字列をwebブラウザに表示する（出力）
- documentオブジェクトは、windowオブジェクトの子供
- プロパティ（属性）には、読み出しかできないものと書き換え可能なものがある
- プロパティに値を設定するには、「=」演算子を使用し代入する
Q1
- 同一ディレクトリ内のJavaScriptファイル「sample.js」をHTMLファイルに読み込むには、どのように記述すればよいか書きなさい
Q2
- 以下のスクリプトを実行した結果、コンソールに表示される値はなんですか？
<script> var x = 10, y = 20; x = y; y = x; console.log (y); </script>
Q4
- 以下のスクリプトを実行した結果、コンソールに表示される値はなんですか？
<script> var fruits = ['りんご', 'みかん', 'パイナップル', 'ぶどう', 'バナナ']; console.log ( fruits[2] ); </script>
Q5
- 以下のスクリプトを実行した結果、コンソールに表示される値はなんですか？
<script> var fruits = ['りんご', 'みかん', 'パイナップル', 'ぶどう', 'バナナ']; console.log ( fruits.length ); </script>
Q6
- コンソールに「50」と表示するには、空欄「（1）」に何を記述すればよいですか？
<script> var number = [[10, 20], [30, 40, 50, 60], [70, 80, 90]]; console.log (number（1）); </script>
Q7
- 連想配列では、インデックスのことをなんと呼びますか？
Q8
<script> var user = { name:'山田太郎', age:25, height:170 }; console.log (user（2）); </script>
Q9
<script> var profile = [ height:170, weight:60 ]; </script>
Form
Q18
- 以下のように表示するよう設定をしなさい
Q19
- 以下のように表示するよう設定をしなさい
Q20
- 以下のように表示するよう設定をしなさい
Q21
- 以下のように表示するよう設定をしなさい
Q22
- 以下のように表示するよう設定をしなさい
解答例
- script要素、src属性を利用する
- 先にyの値をxに代入しているので、xの値は20に上書きされています
- 数値の10に文字列の '10' を連結した結果、xの値は文字列型の「1010」になります
- インデックスは「0」から始まります
- 配列名「.length」で配列の要素数が取得出来ます
- 2次元配列の場合、次のようにインデックスを指定します
配列名 [ 外側の配列のインデックス ] [ 内側の配列のインデックス ]
キー
- 連想配列は「キー」と「値」のセットが複数集まったものです
- 連想配列の要素の値を取得するには、ドットを使います
- 連想配列の初期値は、カールブラケットで囲んで指定します
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>年賀</title> </head> <body> <script> document.write ( 'あけましておめでとう！' ); alert ( '今年もよろしく。' ); </script> </body> </html>
<!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>１年間の秒数は？</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>
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>改行</title> </head> <body> <script> document.write ( '長いメッセージの場合は、','<br>','改行します。' ); alert ('長いメッセージの場合は、\n 改行します。' ); </script> </body> </html>
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>質問を行う</title> </head> <body> <script> var flower flower = prompt ( '好きな花は？', '（例）ひまわり' ); alert ('あなたの好きな花は、' + flower + 'ですね。' ); </script> </body> </html>
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>if文のテスト</title> </head> <body> <script> var age; age = prompt ( '年齢を入力してください', 20); if (age >= 20) { alert ( 'あなたは成人ですね' ); } </script> </body> </html>
