2014-10-16

2014-10-16

チェックテスト(1)Add Starjdsk

 

 

演習課題

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


Q2
  • 以下のスクリプトを実行した結果、コンソールに表示される値はなんですか?
<script>
var x = 10, y = 20;
  x = y;
  y = x;
  console.log (y);
</script>


Q3
  • 以下のスクリプトを実行した結果、コンソールに表示される値はなんですか?
<script>
var x = 10;
  x += '10';
  console.log (x);
</script>


Q4
  • 以下のスクリプトを実行した結果、コンソールに表示される値はなんですか?
<script>
var fruits = ['りんご', 'みかん', 'パイナップル', 'ぶどう', 'バナナ'];
  console.log ( fruits[2]);
</script>


Q5
  • 以下のスクリプトを実行した結果、コンソールに表示される値はなんですか?
<script>
var fruits = ['りんご', 'みかん', 'パイナップル', 'ぶどう', 'バナナ'];
  console.log ( fruits.length );
</script>


Q6
  • コンソールに「50」と表示するには、空欄「(1)」に何を記述すればよいですか?
<script>
varnumber = [[10, 20], [30, 40, 50, 60], [70, 80, 90]];
  console.log (number1);
</script>


Q7
  • 連想配列では、インデックスのことをなんと呼びますか?


Q8
  • コンソールに「山田太郎」と表示するスクリプトです。空欄「(2)」に何を記述すればよいですか?
<script>
var user = { name:'山田太郎', age:25, height:170};
  console.log (user(2);
</script>


Q9
  • 以下は、連想配列の宣言と初期化を行うスクリプトです。間違っている箇所があります。それはどこですか?
<script>
var profile = [ height:170, weight:60];
</script>


Q10

 

 

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

 

 



Q11

 

 

「長いメッセージの場合は、

改行します。」

と表示するJavaScriptを記述しなさい。

 

 



Q12

 

 

以下のように表示するJavaScriptを記述しなさい。

 

 

 

f:id:web-design-advance:20120607134836j:image

 



Q13

 

 

以下のように表示するJavaScriptを記述しなさい。

 

 

 

f:id:web-design-advance:20120607134837j:image

 


年齢が20歳以上であったら、以下のように表示されます。


 

f:id:web-design-advance:20120607134838j:image

 









f:id:css_design:20130618094707j:image

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



f:id:css_design:20130618115009j:image

  • 先にyの値をxに代入しているので、xの値は20に上書きされています



f:id:css_design:20130618115835j:image

  • 数値の10に文字列の '10' を連結した結果、xの値は文字列型の「1010」になります



f:id:css_design:20130618120108j:image

  • インデックスは「0」から始まります



f:id:css_design:20130618120109j:image

  • 配列名「.length」で配列の要素数が取得出来ます



f:id:css_design:20130618121205j:image

f:id:css_design:20130618121206j:image

  • 2次元配列の場合、次のようにインデックスを指定します

配列名 [ 外側の配列のインデックス ] [ 内側の配列のインデックス ]




キー




f:id:css_design:20130618121815j:image

f:id:css_design:20130618121816j:image

  • 連想配列の要素の値を取得するには、ドットを使います



f:id:css_design:20130618122701j:image

  • 連想配列の初期値は、カールブラケットで囲んで指定します



<!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>



<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>改行</title>
</head>
<body>
<script>
document.write('長いメッセージの場合は、','<br>','改行します。');
</script>
</body>
</html>



<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>質問を行う</title>
</head>
<body>
<script>
prompt('好きな花は?','ひまわり');
</script>
</body>
</html>



 

f:id:web-design-advance:20120607134838j:image

 

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>if文のテスト</title>
</head>
<body>
<script>
var age;
age = prompt('年齢を入力してください', 20);

if(age >= 20){
alert("あなたは成人ですね");
}
</script>
</body>
</html>



まとめ

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