HTML5プロフェッショナル認定試験レベル2 例題解説

例題解説とその内容については、例題提供者の監修です。内容や試験問題に関わるお問い合わせにつきましては、LPI-Japan事務局ではお応えできませんのでご了承ください。
例題解説のご提供者さまを募集中です。LPI-Japan事務局までぜひご投稿ください。選ばれた方の例題解説は本サイトに掲載させていただきます。

2.1 JavaScript

例題1.32 「2.1.1 JavaScript文法」
レベル2の出題範囲「2.1.1 JavaScript文法」からの出題です。
以下のオブジェクトから、プロパティ"key-sample"の値"value-sample"を取得できるものを全て選択しなさい。
          
var obj = {

  "key-sample": "value-sample"

}
          
         
  • obj.key-sample
  • obj["key-sample"]
  • var propertyName = "key-sample"; obj.propertyName
  • var propertyName = "key-sample"; obj[propertyName]

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2019年7月17日

答えはこちら

正解 B、D
オブジェクトのプロパティにアクセスする方法には、ドット"."を使うドット記法とブラケット"[]"を使うブラケット記法の2つがあります。

ドット記法では、"object.propertyName"のように、ドットの後にプロパティ名を指定します。
ブラケット記法では、"object["propertyName"]"のように、"["と"]"の間にプロパティ名を指定します。

ドット記法では、プロパティ名に変数と同じ命名規則が適用されます。そのため、数字始まりのプロパティ名や、ハイフンを含むプロパティ名を用いることはできません。よって、Aは文法エラーとなります。

ブラケット記法では、"["と"]"の間に任意の式を書くことができます。よって、任意の文字列、例えば数字始まりやハイフンを含む文字列をプロパティ名として指定することができます。よって、Bはプロパティ"key-sample"の値を取得できます。

また、ブラケット記法は変数をプロパティ名として使用できます。よってDは変数"propertyName"の値である"key-sample"をプロパティとして指定し、その値を取得できます。

対してドット記法は変数をプロパティ名として使用できません。Cはプロパティ名として"propertyName"を指定していることになります。よって、"key-sample"の値は取得できません。
プロパティ名に変数を使いたい場合は、ブラケット記法を利用しましょう。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 NTTテクノクロス株式会社
HTML5レベル2認定者 鈴木 雅貴 氏

例題1.31 「2.1.1 JavaScript文法」
レベル2の出題範囲「2.1.1 JavaScript文法」からの出題です。
以下のスクリプトを実行した出力結果として正しいものを選択しなさい。
          
console.log(typeof [1, 2] + typeof null);

          
         
  • arraynull
  • objectnull
  • arrayobject
  • objectobject

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2019年7月4日

答えはこちら

正解 D
typeof演算子は、プリミティブ型であればその種類を文字列で返し、オブジェクトであればオブジェクトであることを示す文字列"object"を返します。
[1, 2]は配列で、プリミティブ型ではなくオブジェクトです。ですので、typeofの結果は"object"となります。
nullは「値が存在しない」という意味のプリミティブ型なので、typeofは"null"が返ってきてほしいところなのですが、歴史的経緯のある仕様バグのため、結果は"object"となります。
そのため、回答としては"object"を2つ結合したDが正解です。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 NTTテクノクロス株式会社
HTML5レベル2認定者 鈴木 雅貴 氏

例題1.30 「2.1.1 JavaScript文法」
レベル2の出題範囲「2.1.1 JavaScript文法」からの出題です。
以下のスクリプトを実行した出力結果として正しいものを選択しなさい。
          
function fn() {
  {
    var x = 'a';
  }
  console.log(x);
}
fn();

          
         
  • エラーになり、何も出力されない
  • undefined
  • NULL
  • a

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2019年6月4日

答えはこちら

正解 D

varで変数を宣言すると、変数の巻き上げにより、宣言部分は最も近い関数スコープ、もしくはグローバルスコープの先頭に移動し、代入部分はそのままの位置に残るという動作をします。
先程のスクリプトは、このように実行されていると考えることができます。

          
---
function fn() {
  // 最も近い関数スコープの先頭に巻き上げられた宣言部分
  var x;
  {
    // 代入部分はそのままの位置に残る
    x = 'a';
  }
  console.log(x);
}
fn();
---
          
          
		  

よって、fn()の関数スコープ内で宣言された変数xにaが代入され、そのxをconsole.log(x)で出力することになるので、結果としてはaが出力されることになります。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 NTTテクノクロス株式会社
HTML5レベル2認定者 鈴木 雅貴 氏

例題1.29 「2.1.1 JavaScript文法」
レベル2の出題範囲「2.1.1 JavaScript文法」からの出題です。
変数名として適切なものを全て選択しなさい。
  • 1_name
  • _name
  • default
  • $

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2019年5月22日

答えはこちら

正解 B、D
変数名には、以下のルールがあります。
(1) 使用できる文字は半角のアルファベット、「_」、「$」、数字
(2) 数字から開始しない
(3) 予約語でない

Aは数字から始まっているため、変数名として使えません。
Bは「_」から始まっており、残りは半角アルファベットで構成されているため、変数名として使えます。
Cのdefaultは予約語のため、変数名として使えません。
Dは「$」のみのため、変数名として使えます。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 NTTテクノクロス株式会社
HTML5レベル2認定者 鈴木 雅貴 氏

例題1.28 「2.1.1 JavaScript文法」
レベル2の出題範囲「2.1.1 JavaScript文法」からの出題です。
コメントの表記方法として適切なものを全て選択しなさい。
  • // コメント文
  • // // コメント文
  • /* コメント文 */
  • /* /* コメント文 */ */

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2019年5月8日

答えはこちら

正解 A、B、C
コメントはプログラムとして評価されません。そのため、ソースコードに説明を書くために使われています。
JavaScriptには、2種類のコメントの書き方があります。 1つは1行コメントで、1行づつコメントを書くときに利用します。「//」以降から行末までが全てコメントになります。そのため、A,Bともに1行コメントとして扱われます。
もう1つは複数行コメントで、複数行のコメントを書くときに利用します。「/*」と「*/」で囲まれた範囲がコメントとして扱われます。複数行コメントは1行で使うこともできるため、Cはコメントとして扱われます。
Dは、1つ目の「/*」と1つ目の「*/」の間がコメントとして扱われます。そのため、最後の「*/」に対応するものがなく、文法エラーとなります。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 NTTテクノクロス株式会社
HTML5レベル2認定者 鈴木 雅貴 氏

例題1.27 「2.1.1 JavaScript文法」
レベル2の出題範囲「2.1.1 JavaScript文法」からの出題です。
以下の変数aに代入されたJavaScriptのオブジェクトを復元可能なテキスト形式のデータに変換するための正しい方法を選択しなさい。
          
var a = new Array('A','B',100,200,new Array('C','D'));
          
         
  • a.toString()
  • JSON.stringify(a)
  • JSON.encode(a)
  • a.encode()

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2019年2月19日

答えはこちら

正解 B
JavaScriptでは、オブジェクトをデータ化(シリアライズ)してテキストデータにする方法があります。 テキスト化する書式をJSON(JavaScript Object Notation)と言い、使い勝手が良いことから他の言語でも使用されています。
JSON形式のデータは、JavaScriptのデータを保存したり、サーバサイドプログラムとJavaScriptの間でのデータ交換などに使われています。

JavaScriptでJSON形式のデータを作成するには、JSON.stringifyメソッドを使用します。引数としてJavaScriptのオブジェクトを渡すと、オブジェクトに含まれているオブジェクト、配列、数値、文字列、真偽値、nullをテキストとしてシリアライズします。
オブジェクトに含まれているメソッドはシリアライズされません。

選択肢Bの結果は、 ["A","B",100,200,["C","D"]] という文字列になります。この文字列を JSON.parseメソッドの引数として渡すと、元のオブジェクトと同じ内容で復元されます。

選択肢Aの結果は "A,B,100,200,C,D"になるため、配列の中に配列が含まれているという構造を正しく復元できません。
選択肢Cと選択肢Dのメソッドは存在しません。

出題範囲の詳細

例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏

例題1.26 「2.1.1 JavaScript文法」
レベル2の出題範囲「2.1.1 JavaScript文法」からの出題です。
文字列 '@$'を処理した結果が'@$'のままとなるメソッドはどれか。
  • escape
  • encodeURI
  • encodeURIComponent
  • htmlspecialchars

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2019年2月5日

答えはこちら

正解 B
escape,encodeURI,encodeURIComponentメソッドに関する問題です。
これらのメソッドは、漢字やカタカナ、ひらがなや一部記号などを別の文字に置き換えるメソッドです。

URLには日本語や一部の記号はそのまま記述できないため、URLで使える文字に置き換える(エンコード)必要があります。
たとえば、'あ'は、%E3%81%82という形に置き換えます。
他にも、空白(スペース)も%20という形で置き換えられます。

escapeメソッドは記号のうち、@*_+-./はエンコードしません。
また、Webブラウザ毎に仕様が異なるため現在では非推奨となっています。

encodeURIとencodeURIComponentの違いは、encodeURIは ;,/?:@&=+$# など、URLのなかで意味のある記号はエンコードされないのに比べ、encodeURIComponentは 全ての記号をエンコードします。

文字列'@$'を各メソッドで処理した結果は以下の通りです。
escape : @%24 (@はエンコードされない)
encodeURI : @$ (@$はエンコードされない)
encodeURIComponent : %40%24 (全ての記号がエンコードされる)

最近のWebブラウザではURLをアドレスバーに表示する際に自動的にデコードするため、エンコードされたURLを目にすることは無くなっているかもしれません。
その場合はアドレスバーのURLをテキストエディターにコピー&ペーストすると、エンコードされたURIを確認することができます。

選択肢 DはPHPの関数ですので、JavaScriptでは使用できません。

出題範囲の詳細

例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏

例題1.25 「2.1.1 JavaScript文法」
レベル2の出題範囲「2.1.1 JavaScript文法」からの出題です。
以下のスクリプトを実行した出力結果として正しいものを選択しなさい。
          
var a = 0;
eval('a = 1;document.write(a)');
document.write(a);
          
         
  • 0
  • 11
  • 1
  • 01

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2019年1月22日

答えはこちら

正解 B
eval関数に関する問題です。
eval関数は、文字列として与えられたJavaScriptをプログラムとして実行します。 出題では、変数への代入とdocument.writeによる文字出力を行なうスクリプトを文字列としてevalに渡しています。
実行されると、文字列が実行され、変数への代入と文字出力が共に問題なく実行されます。

evalの前に宣言されている変数aですが、初期値として0が設定されています。
evalが実行された際に1を上書き代入されるため、evalの後のdocument.writeによって1が出力されます。
つまり、evalの内と外では変数のスコープが分離していないことがわかります。

AJAXなどと組み合わせると変更が容易な柔軟なプログラムが作成できますが、evalにユーザが入力した文字列を与えることはセキュリティ上問題があります。
任意のスクリプトが実行できてしまうため、ページの書き換えやなりすまし、情報漏洩などにつながることがあります。
現在では、プログラム開発でevalの使用は避けるべきとされています。

出題範囲の詳細

例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏

例題1.24 「2.1.1 JavaScript文法」
レベル2の出題範囲「2.1.1 JavaScript文法」からの出題です。
以下のスクリプトを実行した出力結果として正しいものを選択しなさい。
          
var a = 0;
if( a = 1 ) {
  console.log('a = 1');
}else{
  console.log('a != 1');
}
          
         
  • a = 1
  • a != 1
  • 何も表示されない
  • エラーになる

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2019年1月8日

答えはこちら

正解 A
if文と比較演算子に関する出題です。
if文は与えられた条件式の結果によって、プログラムの実行を分岐させる構文です。
if文の例は以下のようになります。(他にも様々なパターンがあります)

if (条件式) {
条件式の結果がtrueの時に実行されるプログラム
} else {
条件式の結果がfalseの時に実行させるプログラム
}

出題では、if文を記述する際によくある間違いを扱っています。
通常、条件式では二つの値を比較する比較演算子などを使って条件を作りますが、左右ふたつの値が等しいかどうかを判別する演算子は == を使います。
しかし、この問題では a = 1 と記述しているため、変数aに1を代入しているだけになっています。
数値の1は条件式として見た場合にtrueに該当するため、 console.log('a = 1'); が実行されます。

比較演算子 == と、代入演算子 = の書き間違いは明確なエラーにならないことも多いので、記述する際に気をつけましょう。

出題範囲の詳細

例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏

例題1.23 「2.1.1 JavaScript文法」
レベル2の出題範囲「2.1.1 JavaScript文法」からの出題です。
以下のスクリプトを実行した出力結果として正しいものを選択しなさい。
          
var b = new Boolean(false);
if(b) {
  console.log('true');
} else {
  console.log('false');
}
          
         
  • true
  • false
  • なにも表示されない
  • エラーになる

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2018年12月18日

答えはこちら

正解 A
JavaScriptでは一般にプリミティブ型で使用される真偽値ですが、Booleanオブジェクトも存在します。
Booleanオブジェクトはnew Boolean(値)という形で作成することができます。
値が省略された場合、または、値が0,-0,null,false,NaN,undefined,空文字列の場合にfalse、それ以外は全てtrueになります。
従ってnew Boolean('false')は値が文字列のため結果がtrueになるので注意してください。

また、Booleanオブジェクトは条件式の中では必ずtrueとして扱われます。
出題のようにnew Boolean(false)として作成しても条件式の中ではtrueとして扱われてしまいます。

もし、条件式の中で使用したい場合は、b.valueOf()のようにvalueOfメソッドを使うことで、プリミティブな真偽値として扱うことができます。

出題範囲の詳細

例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏

例題1.22 「2.1.1 JavaScript文法」
レベル2の出題範囲「2.1.1 JavaScript文法」からの出題です。
以下のスクリプトのうち、結果がtrueになるものを選択しなさい。
  • isFinite(Infinity)
  • isFinite(NaN)
  • isFinite("0")
  • Number.isFinite("0")

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2018年12月4日

答えはこちら

正解 C
JavaScriptで扱える数の範囲(Number.MIN_VALUEからNumber.MAX_VALUE)を越えると、Infinityとして扱われます。
Infinityには厳密には正負の無限大(Number.POSITIVE_InfinityとNumber.NEGATIVE_Infinity)があります。

また、計算結果などが数値として表わすことが出来ない場合にNaN(Not a Number)という値で表現されます。
これらの特殊数値では無いことを判別することができるメソッドが、isFiniteまたはNumber.isFiniteです。
(Number.isFiniteはInternet Explorerではサポートされていません。Edgeではサポートされています)

isFiniteは、有限の数(Number.MIN_VALUE 〜 0 〜 Number.MAX_VALUE)の場合にtrueそれ以外の値の場合、falseを返します。
文字列が与えられた場合、有限の数に変換できる場合にはtrueが返ります。
選択肢Cは、"0"という文字列を与えていますが数値に変換され結果がtrueになります。

Number.isFiniteメソッドは、より厳密に有限数であるかを判別します。
isFiniteと異なり、数値ではない値を与えた場合もfalseになります。
選択肢Dは"0"という文字列を与えているため、falseになります。

出題範囲の詳細

例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏

例題1.21 「2.1.1 JavaScript文法」
レベル2の出題範囲「2.1.1 JavaScript文法」からの出題です。
以下のスクリプトを実行した出力結果として正しいものを選択しなさい。
          
var array = new Array();
Object.prototype.msg = 'hello';
Array.prototype.msg = 'good-bye';
console.log(array.msg)       
          
         
  • エラーになり、何も出力されない
  • good-bye
  • hello good-bye
  • hello

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2018年10月18日

答えはこちら

正解 B
prototypeプロパティに関しての出題です。

JavaScriptでは、オブジェクトという単位でプログラムの動作に必要な変数とメソッドをひとつの部品にまとめることができます。
このオブジェクトを使ってプログラムを組み立てることになるのですが、プログラムによっては良く似たオブジェクトがたくさん必要になります。
このような場合にそれぞれ全く新規にオブジェクトを作ると冗長ですし、間違いも発生しやすくなります。

そこで、複数の部品に共通する部分を抽出して別のオブジェクトにまとめ、必要なオブジェクトではそのオブジェクトを参照します。
この仕組みを継承と言います。
HTML/CSSで言うと、複数のWebページに共通するスタイルを外部ファイルにまとめ、個別のWebページで必要なスタイルをそれぞれ上書きしたり追加したりする手法に似ています。

JavaScriptの全てのオブジェクトはprototypeというプロパティが自動的に設定されます。
継承関係にあるオブジェクト(親と子と言われます)の場合、子オブジェクトのprototypeプロパティには、親オブジェクトへの参照が代入されています。
プログラム中で子オブジェクトのメソッドやプロパティを使用した場合、そのオブジェクト自身が呼び出されたメソッドを持たない場合、prototypeプロパティを使って、親オブジェクトのメソッドやプロパティを探しに行きます。
この仕組みがあることで複数のオブジェクトに共通する機能を簡潔に記述することができるようになっています。

new Array()を使用して作られたArrayオブジェクトのprototypeプロパティには、Arrayへの参照が設定されています。
ArrayのprototypeプロパティにはObjectへの参照が設定されています。
これはnew Array()で作られたオブジェクトはArrayの機能が使えますし、Objectの機能も全て使えるということです。

JavaScriptのオブジェクトは全てprototypeをたどっていくとObjectにたどりつけるようになっています。

出題では、new Array()で作られたオブジェクトのmsgプロパティを出力しようとしています。
オブジェクト自身はmsgプロパティを持っていませんが、ArrayとObjectそれぞれにmsgプロパティが設定されています。
prototypeを辿ってarray->Array->Objectの順番でmsgを探していき、見つかったところで探すのをやめるため、Arrayのmsgプロパティが使用され、Objectのmsgプロパティは使用されません。

出題範囲の詳細

例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏

例題1.20 「2.1.1 JavaScript文法」
レベル2の出題範囲「2.1.1 JavaScript文法」からの出題です。
以下のスクリプトを実行した結果の数値が10進表記で10にならないものを選択しなさい。
  • parseInt('010');
  • parseInt('10+30');
  • parseInt('10',16);
  • parseInt('10');

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2018年6月5日

答えはこちら

正解 C
グローバル関数であるparseIntは文字列を整数に変換します。
parseIntは第1引数に変換したい文字列を指定し、第2引数に基数を指定することができます。
選択肢Cの場合、第2引数に16を指定しているため、文字列を16進数として扱い整数に変換することになります。
16進表記の10は10進表記で16、つまり10にならないのでこの選択肢が正解になります。
その他の選択肢は以下の通りです。

選択肢Aは、ECMAScriptのバージョンと実装によって結果がわかれるため、推奨されない書き方とされています。
ECMAScript3 までは、文字列の先頭が0で始まる場合、8進表記として扱うことを認めていました。
しかし ECMAScript5 では、0で始まる文字列でも基数が指定されていない場合は10進表記として扱うと定められました。
現在主流のWebブラウザでは10進表記として扱うはずですが、念のため基数を明示的に指定したほうが良いでしょう。
parseIntは変換のルールとして、文字列の先頭から数値として読み取れる部分を取り出して数値化します。
したがって選択肢Bのような文字列の途中に数値として扱えない+記号がある場合、その前の'10'までを整数に変換します。
もし+が先頭にある場合('+10'など)は、数値の表記として正しいのでそのまま変換されます。
選択肢DはparseIntの一般的な使用方法と言えます。
しかし、前述のようにWebブラウザによって仕様が異なる場合があるため、Cのように基数を指定することが推奨されています。
10進表記ですので、基数を指定するとparseInt('10',10)という記述になります。

出題範囲の詳細

例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏

例題1.19 「2.1.1 JavaScript文法」
レベル2の出題範囲「2.1.1 JavaScript文法」からの出題です。
以下のスクリプトを実行した結果、resultの値として正しいものを選択しなさい。
          
var array = new Array('Alice','Bob','Chris','Dan');
var result  = 2 in array;          
          
         
  • true
  • false
  • "Chris"
  • "Bob"

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2018年5月22日

答えはこちら

正解 A

in 演算子に関する問題です。
in 演算子は、演算子の左側で指定したプロパティが、右側で指定したオブジェクトに存在する場合にtrueを返す演算子です。
Arrayオブジェクトは生成時に要素を指定した場合、左から0,1,2と数値をプロパティ名にして値を格納します。
したがって問題の配列は、0:'Alice',1:'Bob',2:'Chris',3:'Dan'というプロパティを持っています。
2というプロパティが存在するので、結果はtrueになります。
また、in演算子はfor/in構文のinとは違いますので注意してください。

出題範囲の詳細

例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏

例題1.18 「2.1.1 JavaScript文法」
レベル2の出題範囲「2.1.1 JavaScript文法」からの出題です。
文字列 "http://example.jp/sample text.html"を引数にしてあるメソッドを実行したところ、文字列"http%3A%2F%2Fexample.jp%2Fsample%20text.html"が得られた。
使用したメソッドとして正しいものを選択しなさい。
  • window.escape()
  • window.encodeURI()
  • window.encodeURIComponent()
  • window.htmlentities()

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

正解 C

文字列のエンコードに関する問題です。 ある文字列を別の文字列に変換することを文字列のエンコードと言います。
エンコードは規約に合わない文字(URLにはスペースや日本語などは本来含めることができない)の変換や、セキュリティ(XSS対策やSQLインジェクション対策)のために行なわれます。
用途に応じて変換対象になる文字は異なります。
JavaScriptでは、文字のエンコードに使えるメソッドとして、windowオブジェクトのescape(),encodeURI(),encodeURIComponent()の3つがあります。
これらのメソッドはそれぞれ変換対象の文字が異なります。
encodeURIComponent()メソッドでは、"http%3A%2F%2Fexample.jp%2Fsample%20text.html"のように、 ":"は"%3A","/"は"%2F",半角スペースは"%20"のように変換されますが、 encodeURI()メソッドでは、"http://example.jp/sample%20text.html"のように、 ":"や"/"、そして"&","+","="は変換されません。

escape()メソッドの結果は"http%3A//example.jp/sample%20text.html"のようになりますが、現在escape()メソッドは非推奨になっているため、encodeURIまたはencodeURIComponentを使用してください。

window.htmlentities()というメソッドはありません。

出題範囲の詳細

例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏

例題1.17 「2.1.1 JavaScript文法」
レベル2の出題範囲「2.1.1 JavaScript文法」からの出題です。
以下のスクリプトを実行した結果として正しいものを選択しなさい。
          
var array = new Array();
var elm = array['key'] || 'empty';
      
         
  • エラーになる
  • 変数 elm に trueが代入される
  • 変数 elm に undefinedが代入される
  • 変数 elm に文字列 'empty' が代入される

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

正解 D

配列に存在しないインデックスを指定した際の動作と、論理演算子 ||(OR、論理和) についての問題です。
配列オブジェクトに存在しないインデックスを指定した場合、結果はundefinedになります。 undefinedという値は、論理値としてはfalseと見なされます。
また、論理演算子 || は、基本的には左右の論理値がともに false のときに false、 それ以外の組み合わせならtrueになるというものです。
しかし、実際の動作としては、左側の値(ここではarray['key'])が true とみなすことができる場合はその値を返し、
左側の値がfalseとみなせる場合には右側の値('empty')を返します。
この特徴を利用して、入力された値がnullやundefinedだった場合にデフォルト値の設定をするために使われるのを良く見掛けます。
この問題では、array['key'] は undefined で false とみなされるため、右側の値 'empty' が式の結果となり、変数 elm に代入されます。

出題範囲の詳細

例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏

例題1.16 「2.1.1 JavaScript文法」
レベル2の出題範囲「2.1.1 JavaScript文法」からの出題です。
以下のスクリプトを実行したときに表示される文字列を選びなさい。
          
try {
	document.write('A');
	throw 'B';
	document.write('C');
} catch(e) {
	document.write(e);
} finally {
	document.write('D');
}
       
       
  • ABCD
  • AD
  • AeD
  • ABeD
  • ABD

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

正解 E

JavaScriptの例外処理についての問題です。
通常はプログラム実行中に復帰不可能なエラーが発生した場合にはプログラムを即時終了します。
しかし、例外処理の機能を使用すると、エラー発生時に復帰処理を実行したり、独自のエラー表示などを行なえるようになります。

Webページ上のJavaScriptでは特に、途中でエラーが発生するとHTML内に複数のスクリプトがあっても、それ以降のスクリプトが実行されなくなります。
したがってエラーが発生しうる箇所に例外処理を記述しておくことで、スクリプトが実行されないことによる表示崩れなどを防ぐことが出来ます。

例外処理は以下のように記述します。

try {
	// エラーが発生する可能性のある処理;
}catch( e ){ // 変数eには発生した例外が代入される
	// エラーが発生した場合の処理;
}finally{
	// エラー発生の有無に係わらず実行される処理;
}

catch( e )では、変数 e には例外オブジェクトか後述のthrowで指定したオブジェクトが代入されます。
もちろん変数名は自由に変えられますが、catch(var e)のようにvarを付けるとエラーになるので注意が必要です。

また、throw オブジェクト;という形式で、明示的に例外を発生させることができます。

設問を見ると、'A'を表示したあと、throwで例外を発生させていますので、try内のスクリプトはそこで中断され、catchに移動します。したがって'C'は表示されません。
catch内ではthrow 'B'で指定された'B'が変数eに代入されていますので、'B'が表示されます。
最後に、必ず実行されるfinallyのなかで、'D'が表示されます。

出題範囲の詳細

例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏

例題1.15 「2.1.1 JavaScript文法」
レベル2の出題範囲「2.1.1 JavaScript文法」からの出題です。
配列の要素を表示するfor in文の使い方として正しいものを選びなさい。
          
A. var array = new Array('A','B','C','D');
    for (var index in array ) {
	document.write(array[index]);
}
B. var array = new Array('A','B','C','D');
    for (array in var index ) {
	document.write(array[index]);
}
C. var array = new Array('A','B','C','D');
    for (var value in array ) {
	document.write(value);
}
D. var array = new Array('A','B','C','D');
    for (array as index =< value ) {
	document.write(value);
}

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

正解 A

繰り返しのfor inに関する出題です。
for inはオブジェクトに対してプロパティ全てを対象として繰り返しを行ないます。
文法は以下のようになります。

for(var プロパティ名を受けとる変数 in オブジェクト){
	// プロパティへのアクセスは オブジェクト[変数] の形でおこないます。
}

設問では配列に対してfor inを使用していますが、配列もオブジェクトですのでfor inを使うことができます。
配列の場合はキーがプロパティ名になります。

出題範囲の詳細

例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏

例題1.14 「2.1.1 JavaScript文法」
レベル2の出題範囲「2.1.1 JavaScript文法」からの出題です。
以下のスクリプトを実行したときに表示される文字列を選びなさい。
          
var array = new Array('A','B','C','D','E');

var i = 0;
do {
	i++;
	if( array[i] == 'B' ) {
		continue;
	}
	if( array[i] == 'D' ) {
		break;
	}
	document.write(array[i]);

}while( array[i] != 'E' );
        
  • ABCDE
  • C
  • B
  • ACE
  • BCD

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

正解 B

do whileとcontinue,breakに関する出題です。
do whileは、繰り返しの本体部分を先に実行したあと条件を評価するタイプの繰り返し構文のひとつです。
あまり使われることはありませんが、通常のwhileだと繰り返し条件によっては一度も実行されないのに対してdo whileでは最低でも一度は実行されるので、データの入力を受けつけて、データをチェックして繰り返す場合などに使われることがあります。

forやwhile,do whileなど繰り返し構文において、繰り返しを制御する命令として、continueとbreakがあります。
continueは実行されたら以降の処理をせずにすぐに次の繰り返しを開始します。
breakは繰り返しを終了します。
どちらも条件分岐と組合せて複雑な繰り返しを実現することができます。

設問の例では、以下のような動作になります。

繰り返し回数を数えるカウンタ変数iは初期値0です。

出題範囲の詳細

例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏

例題1.13 「2.1.1 JavaScript文法」
レベル2の出題範囲「2.1.1 JavaScript文法」からの出題です。
以下のスクリプトを実行したときに表示される文字列を選びなさい。
          
var str = 'A';
switch(str) {
	case 'A':
		document.write('1');
	case 'B':
		document.write('2');
		break;
	default:
		document.write('3');
		break;
}		
        
  • 12
  • 123
  • 2
  • 1
  • 3

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

正解 A

switch caseとbreakに関する出題です。
switchは条件分岐の一種で、複数の分岐をシンプルに記述することができます。


switch(値) {
	case ラベル1:
		// 値とラベル1が同じときに実行される処理
		break; // 省略可
	case ラベル2:
		// 値とラベル2が同じときに実行される処理
		break; // 省略可
	default:
		// caseで記述された条件に一致するものが無い場合に実行される処理
		break; // 省略可
}

switchを使う場合には、break忘れに注意が必要です。
各caseでは値とラベルが同じ(===で比較)場合に実行する処理を記述しますが、処理の最後にbreakを記述することで、switchの処理から脱出します。

出題範囲の詳細

例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏

例題1.12 「2.1.1 JavaScript文法」
レベル2の出題範囲「2.1.1 JavaScript文法」からの出題です。
以下のスクリプトを実行した結果、trueになるものを選びなさい。
  • '123' === String('123')
  • new String('123') === String('123')
  • new String('123') === '123'
  • 123 === new Number(123)
  • 123 === Number(123)

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

正解 A,E
プリミティブ型とオブジェクト型に関する出題です。
JavaScriptはオブジェクト型指向言語と言われています。
しかし、処理の高速化のため基本的な一部のデータ型については、オブジェクトとしてではなく値そのものを扱います。これをプリミティブ型と呼びます。
プリミティブ型は、Boolean,Null,Undefined,Number,Stringの5種類です(新しい規格であるECMAScript2015ではSymbolが追加されます)。

スクリプトの中で、文字列リテラル 'ABC' や数値リテラル 123 などと記述したものは、オブジェクトではなくプリミティブ値として扱われます。

プリミティブ値に対してメソッドを呼んだり、プロパティにアクセスをすると、JavaScriptは自動的にプリミティブ値を対応するオブジェクトに変換して処理を行ないます。そのためプリミティブ値とオブジェクトを意識することなくスクリプトを記述できます。

コンストラクタ関数であるString()、Number()は、newの有無で生成される値の型が変わります。
String('123')で生成されるのはプリミティブ値で、new String('123')で生成されるのはオブジェクトになります。
一方、Arrayのように,newの有無で生成される値の種類が変化しないコンストラクタ関数もあります。

同値演算子 === を使うと、プリミティブ値とオブジェクト値を区別して比較できます。 プリミティブ値である'123'と、オブジェクトを生成するnew String('123')を同値演算子で比較するとfalseになります。

各選択肢のデータ型は以下のようになります。
A. 文字列プリミティブ === 文字列プリミティブ (true)
B. 文字列オブジェクト === 文字列プリミティブ (false)
C. 文字列オブジェクト === 文字列プリミティブ (false)
D. 数値プリミティブ === 数値オブジェクト (false)
E. 数値プリミティブ === 数値プリミティブ (true)

出題範囲の詳細

例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏

例題1.11 「2.1.1 JavaScript文法」
レベル2の出題範囲「2.1.1 JavaScript文法」からの出題です。
以下のスクリプトを実行した結果、表示されるものを選択しなさい。
          
  function f(val){
  document.write(val);
  document.write(this);
}

f.call('A','B');
        
        
  • AB
  • BA
  • AA
  • BB
  • エラーになり、何も表示されない

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

正解 B
call()メソッドを利用した場合のthisオブジェクトの使い方についての出題です。

thisはコンテキストオブジェクト(カレントオブジェクト)を値とする、読み取り専用の特別な変数です。
コンテキストオブジェクトとは、その時点で処理の対象となっているオブジェクトを指します。
例えば、object.method()と言うかたちでメソッドを呼び出した場合、メソッド内でのthisはobjectを指します。

thisは読取専用のため、直接代入することはできませんが、関数オブジェクトのcallメソッドを利用することで、その関数(メソッド)内でのthisオブジェクトの内容を変更できます。callメソッドのひとつめの引数はthisに代入され、ふたつめ以降の引数は関数(メソッド)の引数として使用されます。

設問のスクリプトでは、call('A','B')としてメソッドを呼んでいるため、'A'がthisに、'B'が引数のvalに代入されて関数が実行されます。
関数内ではval,thisの順に出力されるため、表示は'BA'となります。

jQueryでもその機能を実現するためにcallメソッド(またはapplyメソッド)が使用されています。

出題範囲の詳細

例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏

例題1.10 「2.1.1 JavaScript文法」
レベル2の出題範囲「2.1.1 JavaScript文法」からの出題です。
以下のスクリプトを実行したとき、変数aの値を選択しなさい。
          
function f(){
		f = 10;
}
var a = f();
       
       
  • undefined
  • NULL
  • 10
  • エラーになる

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

正解 A
JavaScriptで関数の戻り値を明示的に指定しない場合、戻り値はundefined(未定義値)になります。
戻り値を明示的に指定するには、

function f(){
	var f = 10;
	return f;
}
var a = f();

のようにreturnの後に戻り値を記述します。この場合、変数aの値は10になります。
Microsoft VBAなど、一部のプログラム言語では関数名に値を代入することで戻り値を指定しますが、JavaScriptではreturnの後に指定します。

出題範囲の詳細

例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏

例題1.9 「2.1.1 JavaScript文法」
レベル2の出題範囲「2.1.1 JavaScript文法」からの出題です。
以下のスクリプトを実行した結果を選びなさい。
          
    var obj = {
	f:function(){
		document.write('A');
	}
}
function f(){
	document.write('B');
}

with(obj) {
	function f(){
		document.write('C');
	}
	f();
}
        
        
  • Aが表示される
  • Bが表示される
  • Cが表示される
  • エラーになる

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

正解 C
withは指定したオブジェクトのメンバ(メソッドとプロパティ)を展開して使用できるようにする構文です。
withを使用すると、メンバ検索の順番が変更されて指定したオブジェクトのメンバを最初に検索するため、グローバルなメソッドや、with内で定義されたメソッドよりもオブジェクトのメソッドが先に該当することになります。

with(document) {
	write('A');
	write('B');
}

のように、同一オブジェクトに対する複数のメソッド呼び出しを短く書けるなど一見便利そうですが、メソッドやプロパティが動的に変化するオブジェクトでは動作が予測できなくなったり、処理が遅くなることなどから現在はwithの使用は推奨されていません。 出題はwithの中で関数定義した場合はどうなるか、ですがwithのブロック内で定義された関数は、通常の関数の内部と同様に優先的に検索されます。
(古いブラウザ(IE5〜10,Android Browser)とSafari(Mobile Safariも)では、withで指定されたオブジェクトが優先されます)

出題範囲の詳細

例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏

例題1.8 「2.1.1 JavaScript文法」
レベル2の出題範囲「2.1.1 JavaScript文法」からの出題です。
以下の選択肢のうち、プリミティブな文字列が生成されるスクリプトを二つ選びなさい。
  • Number(100)
  • new Date()
  • String('abc')
  • new String('abc')
  • Date()

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

正解 C,E
一部の組込みコンストラクタ関数はnewキーワードの有無で返り値が異なります。
String関数はnewがつくとStringオブジェクトが生成されますが、newが無いとプリミティブな文字列を生成します。
また、Date関数はnewがつくとDateオブジェクト、newが無いと現在時刻を表わすプリミティブな文字列を返します。
その他の選択肢はオブジェクトを生成します。

選択肢にはありませんが、Array関数のようにnewの有無で差異がないものもあります。

実際の開発でnewをつけないケースはまず無いと思いますが、newの付け忘れによるトラブルはありえますのでこれらの仕様を覚えておくと良いでしょう。

出題範囲の詳細

例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏

例題1.7 「2.1.1 JavaScript文法」
レベル2の出題範囲「2.1.1 JavaScript文法」からの出題です。
以下のスクリプトのうち、実行した結果、2次元配列のオブジェクトが生成されるものを2つ選びなさい。
  • var array = [];
    array[0][0] = 'a';
  • var array = [];
    array[0] = [];
    array[0][0] = 'a';
  • var array = [][];
    array[0][0] = 'a';
  • var array = [['a']];

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

正解 B,D
多次元配列に関する問題です。
JavaScriptでは、配列の要素に配列が含まれているものを多次元配列と呼びます。
配列の中に配列があるものを2次元配列、配列の中の配列に、さらに配列が要素として含まれるものを3次元配列と言い、入れ子になっている階層をnとしたときにn+1次元配列となります。
選択肢Aはarrayに代入された配列は1次元配列のため、[0][0]という形で要素にアクセスできません。
選択肢Bは、最初に作成された配列は1次元ですが、その後で要素に配列を代入しているため2次元配列になっています。
選択肢Cは、配列を作成する書式として、[][]は認められません。
選択肢Dは、配列の要素として配列を作成し、その要素に'a'を格納していますので、2次元配列になっています。
実際にスクリプトを実行すると、選択肢A,Cはエラーになります。

出題範囲の詳細

例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏

例題1.6 「2.1.1 JavaScript文法」
レベル2の出題範囲「2.1.1 JavaScript文法」からの出題です。
以下のスクリプトを実行した結果、表示される文字列は次のうちどれか。
          
var array = new Array('a','b');
array[4] = 'c';
array.length = 3;
document.write(array);

  • a,b
  • a,b,
  • a,b,c
  • a,b,c,

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

正解 B
配列のlengthプロパティに関する問題です。
配列のlengthプロパティに要素の数よりも小さい数値を代入すると、配列の要素が先頭から数値以下の個数に切り詰められます。
もう一つのポイントは、配列の添字を指定して要素を追加する際に、それまでの添字の最大値から間の空いた数値を指定すると、その間の要素は未定義値であるundefinedで埋められるということです。
したがって、最初の二行の結果、配列の要素は['a','b',undefined,undefined,'c']となります。
三行目でこの配列の先頭から3要素に切り詰められ、['a','b',undefined]になります。
document.writeで配列を出力するとカンマ区切りで要素の一覧を文字列化しますが、undefinedは空文字列として扱われるためa,b,のあとには何も表示されません。

出題範囲の詳細

例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏

例題1.5 「2.1.1 JavaScript文法」
レベル2の出題範囲「2.1.1 JavaScript文法」からの出題です。
以下のスクリプトを実行した結果、数値の3を要素として持つ配列を生成するものを選びなさい。
  • var array = Array(3);
  • var array = {3};
  • var array = new Array(3);
  • var array = [3];

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

正解 D
配列の生成方法における複数の記述方法に関する問題です。
配列を生成する方法は2つあり、コンストラクタ関数Array()によるものと、配列リテラル[]によるものです。
Array()は、String()などとは異なり、キーワードnewの有無に関わらずArrayオブジェクトを生成します。
ところが、Array()にはひとつ問題があり、Array(3)のように数値を一つ引数に渡すと要素数3の配列を生成します。 (2つ以上引数を指定すると要素になります。)
したがって、数値の3だけを要素に持つ配列はArray()だけでは作れない(空配列を作ってからarray[0]=3;)ということになります。
一方、[3]では単純に数値3を要素に持つ配列が生成されます。
オブジェクトリテラル{ }では、配列オブジェクトでは無く、単なるオブジェクトを生成しますが、選択肢Bの形式ではプロパティ名が指定されていないためエラーになります。

出題範囲の詳細

例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏

例題1.4 「2.1.1 JavaScript文法 strictモードの概要」
レベル2の出題範囲「2.1.1 JavaScript文法 strictモードの概要」からの出題です。
strictモードについて正しいものを全て選択しなさい。
  • strictモードを使用すると厳密なコードになるため、潜在バグを発見できる可能性が上がる。
  • strictモードを使用すると厳密なコードになるため、処理を高速化できることがある。
  • "use strict"を記述したら、それ以降のコードに適用される。
  • strictモードを宣言したコードは、strictモードをサポートしていないブラウザでは動作しない。

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

正解 A, B

strictモードを適用したコードは、コードの曖昧さが減るため、潜在バグの低減やJavaScriptエンジンによる最適化処理の負担軽減による高速化が期待できます。

strictモードの宣言は「"use strict"」というコードが、スクリプト内、あるいは関数内の意味のあるコードより前に記述されている必要があります。

「スクリプト、あるいは関数の先頭に記述する必要がある」、「関数内に宣言した場合は適用される範囲は関数内だけ」、という意味で、"use strict"を記述さえすれば、「それ以降のコードに適用される」という訳ではありません。


例)
// sample1.js ------------------------
   // comments....
   "use strict";
   var x, y, z;
   ........

// sample2.js ------------------------
   var x = function(){
       "use strict";
       var y, z;
       ........
   }; 

例を見て分かる通り、strictモードの宣言はただ文字列を記述しているだけで、コードとして無意味なので、strictモードをサポートしていないブラウザでは無視され、正常に動作します。

strictモードの使用は、特に潜在バグ低減の恩恵により推奨されるべきと思いますが、strictモードを関数でなく全体に宣言すると、プラグインやライブラリなどの外部のスクリプトを使用する場合にもstrictモードが適用されるため、問題が起きる可能性に留意する必要があります。

出題範囲の詳細

例題解説の提供:
LPI-Japanプラチナスポンサー NECソリューションイノベータ株式会社
武藤 周 氏

例題1.3「2.1.1 JavaScript文法 prototypeプロパティ」
レベル2の出題範囲「2.1.1 JavaScript文法 prototypeプロパティ」からの出題です。
JavaScriptのオブジェクト指向について、間違っているものを一つ選択しなさい。
  • 継承はprototypeプロパティを使って定義できる。
  • メンバのアクセス権に関する構文がないため、パブリックなメンバしか作成できない。
  • 継承する親はいつでも変更できるが、既に生成されたインスタンスには反映されない。
  • メンバはprototypeプロパティを使って定義できる。

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

答え B
解説:アクセス権を設定する構文はないが、スコープを意識すればプライベートなメンバも作成できます。
ただし、プライベートなメンバ変数へのアクセスするにはコンストラクタ内に限られるため、これを扱う関数もコンストラクタ内に書く必要があります。
コンストラクタ内に書いたものは、インスタンス毎にメモリに展開されるため、プライベート変数のgetter、setterだけをコンストラクタ内に書き、それ以外の処理はprototype側に作成するようにしたいですね。

以下、サンプルコードです。

// クラス定義 ///////////////////////////////////////////////////////////
var MyClass = function(){
    // スコープ内でのローカルな変数/関数定義は、プライベートとして利用可能
    var privateVar = "private";
    var privateFunc = function(){
        alert(privateVar);
    };

    // 以下、パブリック
    this.setPrivateVar = function(chg){
        privateVar = chg;
    };

    this.getPrivateVar = function(){
        return privateVar;
    };

    this.publicVar = "public";
    this.publicFunc = function(){
        alert(MyClass.staticVar);    // "static"
        alert(this.protoVar);        // "prototype"
        alert(this.publicVar);       // "public"
        alert(this.getPrivateVar()); // "private"
    };
};

MyClass.prototype.protoVar = "prototype"; 
MyClass.prototype.protoFunc = function(){
    alert(MyClass.staticVar);    // "static"
    alert(this.protoVar);        // "prototype"
    alert(this.publicVar);       // "public"
    alert(this.getPrivateVar()); // "private"
};
MyClass.prototype.protoTwicePrivateVar = function(){
    this.setPrivateVar(this.getPrivateVar() + this.getPrivateVar()); };

MyClass.staticVar = "static";
MyClass.staticFunc = function(){
    alert(MyClass.staticVar);  // "static"
};

// インスタンス生成 ////////////////////////////////////////////////
var my = new MyClass();
MyClass.staticFunc();  // "static"
my.protoFunc();        // "static", "prototype", "public", "private"
my.publicFunc();       // "static", "prototype", "public", "private"
my.setPrivateVar("hoge");
my.publicFunc();       // "static", "prototype", "public", "hoge"
my.protoTwicePrivateVar();
my.publicFunc();       // "static", "prototype", "public", "hogehoge"
//my.privateFunc();      // エラー

// 継承 ///////////////////////////////////////////////////////////
var MyClass2 = function(){};
MyClass2.prototype = new MyClass();  // 継承
MyClass2.prototype.protoVar = "prototype2";

var my2 = new MyClass2();
my2.publicVar = "public2";
my2.setPrivateVar("private2");
my2.protoFunc();       // "static", "prototype2", "public2", "private2"
my2.publicFunc();      // "static", "prototype2", "public2", "private2"
my2.setPrivateVar("hoge2");
my2.publicFunc();      // "static", "prototype2", "public2", "hoge2"
my2.protoTwicePrivateVar();
my2.publicFunc();      // "static", "prototype2", "public2", "hoge2hoge2"

// 継承変更 //////////////////////////////////////////////////////
var MyClass3 = function(){};
MyClass3.prototype = new MyClass();  // 継承
MyClass3.prototype.protoVar = "prototype3";

var my3 = new MyClass3();
my3.protoFunc();       // "static", "prototype3", "public", "private"

MyClass3.prototype = new MyClass2();  // 継承変更
my3.protoFunc();       // "static", "prototype3", "public", "private"
// MyClass2に変更する前に生成したインスタンスなので、"prototype3"のまま。

var my3b = new MyClass3();
my3b.protoFunc();      // "static", "prototype2", "public", "hoge2hoge2"
// MyClass2に変更した後に生成したインスタンスなので、"prototype2"。

出題範囲の詳細

例題解説の提供:
LPI-Japanプラチナスポンサー NECソリューションイノベータ株式会社
武藤 周 氏

例題1.2「2.1.1 JavaScript文法 void演算子」
レベル2の出題範囲「2.1.1 JavaScript文法 void演算子」からの出題です。
void演算子は右辺の式を評価した結果、何を返すのか正しいものを一つ選択しなさい。
  • undefined を返す。
  • 0 を返す。
  • falseを返す。
  • 評価結果をNOT演算したものを返す。

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

答え A
ECMAScript5によれば、式の結果に関わらずプリミティブなundefinedを返します。
http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.2
a要素において、onclickでJavaScriptを動作させるときに、href属性に"javascript:void(0)"を設定して、ブラウザによる再描画を防ぐ手法が有名ですが、"undefined"の9バイトを記述する代わりに"void 0"の6バイトにして、スクリプトの量を少なくする、また、ECMAScript3に準拠した古いブラウザでは、undefinedはグローバル変数として定義されている上に変更可能だったため、プリミティブなundefinedであることを保証したい場合にvoid演算子の結果を使う、などの用途があります。

出題範囲の詳細

例題解説の提供:
LPI-Japanプラチナスポンサー NECソリューションイノベータ株式会社
武藤 周 氏

例題1.1「2.1.1 JavaScript文法 特殊数値(NaN)」
レベル2の出題範囲「2.1.1 JavaScript文法 特殊数値(NaN)」からの出題です。
NaNについて正しいものを全て選択しなさい。
  • 数値でないことを表す特殊な値である。
  • ゼロのゼロによる除算の場合、Number.parseIntメソッドの結果が数値にならない場合、Math.sqrtメソッドの結果が虚数の場合にNaNになる。
  • NaNであるかを調べるには、NaNと比較演算子で比較すれば良い。
  • 数値ではないが、Number型である。

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

答え A, B, D
"Not-a-Number"の略です。
NaNは、NaN自身とも違うもの、とされています。NaNであるか調べるには、Number.isNaN()メソッドを使います。
型はtypeof演算子で typeof(NaN) とすると、"number"と返ってきます。Infinity もNumber型です。

出題範囲の詳細

例題解説の提供:
LPI-Japanプラチナスポンサー NECソリューションイノベータ株式会社
武藤 周 氏

メルマガ登録E-mail Magazine

受験を決めたら、まずメルマガ登録。
学習に役立つ例題解説付きメールマガジンを定期発行

氏名

ご提供いただく個人情報の取り扱いについて

ご提供いただいた情報につきましては、当団体内において管理し第三者には開示いたしません。 ご提供いただいた情報につきましては、当団体のオープンソース普及/促進活動のための統計データに反映し、Linux技術者認定事業サービスの充実に活用させて頂くとともに、当団体からの最新情報やイベント情報のご案内を差上げる目的に利用させていただきます。 当団体のプライバシーポリシーについてはこちらをご参照ください。