お爺さん製Javascript理解度テストの解答

こんばんわ。
筋肉痛に悩まされているお爺さんです。
さて、2週間ほど前にUPした、ダメダメJavascriptテストの解答です。


Javascript理解度テスト解答編



1.言語
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
(1) Javascriptでサポートしている制御命令をえらべ
  A. if () {} else if () {} else () {}
  B. unless () {} else {}
  C. for (i = 0; i < 10; i++) {}
  D. for (A in b[]) {}
  E. foreach A (b[]) {}
  F. while (i < 10) {}
  G. do {} while (i < 10);
  H. switch () { case 1: ; case 2:; default:;}
  J. goto LABEL;
  I. last;
  K. next;
  L. die;
  M. continue;
  N. break;
  O. LABEL:

 解答 A,C,D,F,G,H,K,M,N,O

 この問題には、Perlの命令を入れておきました。
 したがって、B,E,J,I,K が間違いです。
 引っかけとして、goto文がないのに、なぜかラベル構文はあります。
 break LABELとすることが出来ます。ですので、Oは正解。


(2) 次の比較演算子でJavascriptでサポートされていないものを選べ
  A. &&
  B. and
  C. ==
  D. =
  E. eq
  F. is

 解答 B,D,E,F

 これもPerlのとかが混じってます。
 それは、 B, E, F。
 で、その中で、引っかけ(これは正解にしてもいいかな?)は
  D. =
 なんですが、これは比較演算子ではないので×。


(3) 以下のデータの記述形式をなんと言うか?
  var1 = { foo1:"hoge", foo2:"hoge2"};

  A. ハッシュ
  B. XML
  C. SGML
  D. JSON

 解答 D

 これはJSONです。したがって、D。


(4) JSON形式でデータが記述されている文字列を持っている場合、連想配列に変換する方法として正しいものを選べ
  abc = 'var1 = { foo1:"hoge", foo2:"hoge2"};';

  A. var1 = json.parser(abc);
  B. eval(var1);
  C. var1 = new DOMParser().parseFromString(abc, "text/html");
  D. 上記以外

 解答 D

 正解としては、eval(abc);となるので、上記以外のDが正解。


(5) (4)で変換後、どのようにアクセスするか。正しいものを選べ。

  A. var1.foo1;
  B. var1->foo1;
  C. var1.get("foo1");
  D. var1.getAttribute("foo1");

 正解 A

 JSONのデータは普通にアクセス出来ます。



2.XML::DOM
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
(1) 次のXMLをDOMオブジェクトに変換する方法を選べ。ただし、ブラウザはIEとする。
  XMLString = "<hoge><node attr='var1'/></hoge>";

  A. 実はXMLのパースエラーが起こるので変換できない
  B. xd = new ActiveXObject("Microsoft.XMLDOM");xd.loadXML(XMLString);
  C. xd = XMLString.parser();
  D. xd = eval(XMLString);

 解答 B

 IEのため、ActiveXのXMLオブジェクトを作って、パースします。従ってB。
 FFだと、次の方法。

  xd = new DOMParser().parseFromString(XMLString,"text/xml");


(2) HTML中に次のHTMLタグがあるとする。このタグを取得する方法を選べ
  <div id="div1"></div>

  A. for(i = 0; i < document.divs.length; i++) {if (document.divs[i].id == "div1") break; }; d = document.divs[i];
  B. d = document.getElementByTagName("div");
  C. d = document.getElementById("div1");
  D. d = document.search("div:div1");

 解答 C. d = document.getElementById("div1");

 タグは大体getElementByIdかgetElementsByTagNameで取得します。
 getElementByTagNameというのは存在しないのでBは間違い。
 Dのsearchメソッドなんていうのは存在しません。


(3) 先のdivタグの中に"hello"という文字列を入れるにはどうすればよいか?
  <div id="div1"></div>

  A. d = "hello";
  B. d.appendChild(document.create("Hello"));
  C. d.write("hello");
  D. d.innerHTML = "hello";
  E. d.text = "hello";

 解答 D

 これはinnerHTMLの知識を試す物です。
 Aはそのまま文字列を変数に代入するので間違い。
 BはHelloタグを作る様な動きしてますが、createメソッドはありません。
 CはDOMにwriteメソッドがないのでダメ。
 EはDOMにtextという属性がないのでこれもダメ。


(4) 先のdivタグの中に"hello"という文字列を付け加えて、なおかつ強調するにはどうすればよいか?
  A. d = "hello";
  B. b = document.createElement("b"); b.innerHTML = "hello"; d.appendChild(b);
  C. d.write("hello").bold;
  D. d.innerHTML = "<b>hello</b>";
  E. d.text = font.bold("hello");

 解答 B, D

 上と同様の理由でAは間違い。
 Bは正しくタグを作って、文字を入れて、appendChildしているので正解。
 Cは上と同様に間違い。
 Dも正解。
 Eも上と同様の理由で間違い。



3.ブラウザオブジェクト・フォーム部品
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
(1) ブラウザウィンドウを開くJavascript文を選べ。
  A. window.createWindow();
  B. navigator.openWindow();
  C. window.open()
  D. document.appendChild(document.createElement("Window"));

 解答 C

 解説のしようがありません。


(2) 一度きりのタイマを使用する場合の構文を選べ。
  A. window.setTimeout(func, msec);
  B. window.setInterval(func, msec);
  C. window.timeout = msec; window.onTimeout = func;
  D. window.setAlarm(func, msec);


 解答 A

 BのsetIntervalは何度も呼び出されますので、これは間違い。
 他は論外。


(3) 次のフォームがHTML中にある時、テキストnameをabcに書き換える方法を選べ。
  <form name=f1 action="http://hogehoge/a.cgi" method="post" id="f1">
   <div id="ndiv">名前 : <input name="name" type="text" value="" id="namearea"></div>
   <div id="pdiv">PW : <input name="pw" type="text" value="" id="pwarea"></div>
   <div id="hdiv">身長 : <input name="height" type="text" value="" id="heightarea"></div>
   <div id="wdiv">体重 : <input name="weight" type="text" value="" id="weightarea"></div>
   <input type="submit">
  </form>
  
  A. document.forms[0].elements[0].text = "abc";
  B. document.f1.name.text = "abc";
  C. window.f1.name.value = "abc";
  D. document.f1.name.value = "abc";

 解答 D

 Aはフォームが一番最初にあるとは限らないので、間違い。
 Bはtextではなくて、valueに入れるので、間違い。
 Cはフォームの変数はdocument配下にあるので、window直下ではない。


(4) (3)のフォームでPW(パスワード)を、パスワードフォームに変えたい。
  A. window.f1.pw.type = "password";
  B. document.getElementById("pwarea").type = "password";
  C. document.getElementById("pdiv").innerHTML = 'PW : <input name="pw" type="password" value="" id="pwarea">';
  D. var pwarea = document.createElement("input.type=password"); getElementById("pwarea") = pwarea;

 解答 C

 これはかなりの高等問題だと思ってる。
 FFであればBも正解だが、IEの場合はBでは動かない。このため、Cのみが正解となる。
 Dはtypeの指定方法が間違い。




4.イベント
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
(1) 以下の操作が行われた時に対応するイベントを答えよ
    クリック/フォーカスを失う/ページが読み込まれる
  A. onClick/onBlur/onLoad
  B. onPress/onFocus/onLoad
  C. onMouseDown/onFocus/onReset
  D. onClick/onChange/onResize

 解答 A

 とほほのJavascriptとかでイベントについて見てください。。。


(2) 3-(3)の問題文中のフォームで、submitボタンを押した時に、すべてのフィールドが埋まっていない場合、エラーを出したい。どのようにすればよいか。
  A. submitボタンのタグでonClickイベントを取得、dieする。
  B. formタグの中でonSubmitイベントを取得、エラーを出してreturn falseする。
  C. id=weightareaタグの中でonChangeイベントを取得、すべてが埋まっていない場合はエラーを出す。
  D. http://hoehoe/a.cgiの中でパラメータを確認、すべてが埋まっていない場合はエラーを出す。

 解答 B

 Aはdieってなんじゃ?の世界です。Perlの構文ですね。
 Cはweightareaのタグが変更された場合のみ呼び出されるので間違い。
 Dはhoehoeドメインが嘘。


(3) 3-(3)の問題文中のフォームで体重が変更された際に数値である事を確認したい。
  A. window.f1.weight.onChange = chk_weight;
  B. document.getElementById("weightarea").addEventListener("change",chk_weight,false);
  C. Event.observe(document.getElementByID("weightarea"),"onChange",chk_weight,false);
  D. document.getElementById("wdiv").innerHTML = '体重 : <input name="pw" type="text" value="" id="pwarea" onChange="chk_weight()">';
  E. document.getElementById("weightarea").attachEvent("onchange",chk_weight,false);

 解答 IEの場合はDとEのみ、FFの場合はBとDが正解。

 Aはフォームはwindowのプロパティではないので間違い。
 BはaddEventListenerが使えるのはFFだけのため、IEでは間違い。
 CのEvenet.observeはPrototype.jsのメソッドのため、普通は使えない。
 DはinnerHTMLでやってるので、正解。
 EのattachEventはIEのみ。



5.オブジェクト指向
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
(1) 以下の文章の空白イロハを、選択肢から選び埋めよ。
  Javascriptは、[ イ ] のオブジェクト指向である。
  この特徴として、クラスが[ ロ ]に決定されておらず、インスタンス変数とメソッドの違いは重視されておらず、新しいオブジェクトは[ ハ ]作成される。

  A. クラスベース
  B. プロトタイプベース
  C. ホームベース
  D. 動的
  E. テンプレート的
  F. 静的
  G. 最初からクラスの機能を備えて
  H. 空もしくはクローンで
  J. インスタンス変数のみで
  I. newした後、はじめて変数にアクセスするタイミングで

 解答 イ B、ロ D、ハ H

 Wikipedia とかを当たってください。私もかみ砕いて説明できるほど詳しくないです。


(2) javascriptのオブジェクト指向は普通、次のうちどれをサポートしているか?
  A. カプセル化
  B. 継承
  C. 多様性
  D. コンストラクタ
  E. デストラクタ

 解答 B,C,D

 Aのカプセル化はそう簡単にはできません。やる方法はあるはずなんですが。
 Cはどう何でしょう?という所はありますが、可変引数をサポートしているので多様性はサポートしていると言ってもいいんでしょうか。
 Eはあまり聞かないので、不可という事で。
 聞いた事のある人は教えてください。


(3) javascriptでprototype文はどの時に使用するか、以下から正しいものを選べ。
  A. プリプロセッサとして動作する
  B. 関数の引数を定義する時に使う
  C. newするクラスのひな形を定義する時に使う
  D. ブラウザオブジェクトで、ブラウザの設定を取得する際に使う

 解答 B

 これはそのままです。


(4) 次のようなコードがある時、最初に何のAlertが表示されるか?
  なお、ライブラリはPrototype.js。
  var A = Class.create();
  A.prototype = {
   A: function() { alert("A"); },
   initialize : function() { alert("initializeA"); },
   funcA : function() { alert("funcA"); },
  };
  
  var a = new A;
  a.func();

 解答 initializeA

 Prototype.jsでは、継承クラスのコンストラクタとしてinitializeが呼び出されます。



(5) 以下からJavascriptの継承方法として正しいのを選べ
  A. subClass.prototype = superClass.prototype;
  B. subClass : superClass { foo : function() {}, };
  C. subClass = extends( superClass, { foo : function() {}, });
  D. for (var prop in superClass.prototype) { subClass.prototype[prop] = superClass.prototype[prop]; }

 解答 D

 同僚の方々にこのテストを行ったんですがね、問題文の一番長いのが正解だ!と言って正解を引き当てました。。。
 そういうモノじゃないんですけれどね。
 とまれ、継承の方法としては、prototypeの中身を子クラスへ受け渡すことで、prototypeチェーンを作って継承を行うという仕組みです。

(6) 以下からJavascriptの例外として正しいのを選べ
  A. try { hogehoge; } catch(e) { error handling; }
  B. window.onerror = function (mes,file,num){error handling;};
  C. if (!eval("hogehoge;")) { error handling; };
  D. on error goto ERROR_SUBROUTINE;

 解答 A,B

 try - catchとwindow.onerrorでトラップ出来ます。
 Dのon error goto はVBScript。


(7) 以下のようなコードがある場合、alertとして何が出力されるか答えよ。
  function myFunc(a,b)
  {
   this.first = a;
   this.second = b;
  }
  function myFunc2(a,b,c)
  {
   this.third = c;
   myFunc.apply(this,arguments);
  }
  myObj = new myFunc2(1,2,3);
  alert(myObj.second);

  A. undefined
  B. 1
  C. 2
  D. 3
  E. NaN

 解答 2

 これはapplyの知識を問う問題です。


6.CSS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
(1) 次のCSSが定義されている時、id=div1のdivタグの色を黒に変えたい。
  どのようにするか?
  div {color:white;}

  A. document.getElementById("div1").style.color="#000000";
  B. document.getElementById("div1").color="#000000";
  C. document.div1.style.color="#000000";
  D. document.div1.color="#000000";

 解答 A

 DOMオブジェクト.style.属性というのがやり方です。


(2) 次のdivタグを、ブラウザの(100,100)地点に配置したい。
  どのようにするか?
  <div id="div1" style="position:absolute;">hoge</div>

  A. e=document.getElementById("wdiv").style; e.x=100;e.y=100;
  B. e=document.getElementById("wdiv").style; e.top=100;e.left=100;
  C. document.getElementById("wdiv").move(100,100);
  D. document.getElementById("wdiv").style.moveto(100,100);

 解答 B

 縦横の位置はスタイルでtop,leftです。

(3) cssのposition:staticはどのような意味か?
  A. 親オブジェクトからの相対位置
  B. 規定の位置
  C. 絶対座標
  D. ウィンドウに対して固定

 解答 B



ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 1

なるほど(納得、参考になった、ヘー)

この記事へのコメント

この記事へのトラックバック