• このエントリーをはてなブックマークに追加

HTML5プロフェッショナル認定試験レベル2 サンプル問題

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

2.2 WebブラウザにおけるJavaScript API

例題2.12「2.2.4 Selectors API」
レベル2の出題範囲「2.2.4 Selectors API」からの出題です。
以下のコードを実行した結果として正しいものを選びなさい。

<!DOCTYPE html>
<html>
   <head> 
   <meta charset="UTF-8">  
   </head>
<body>
<div>
       <p class="currencymark"> 200</p>
       <p class="currencymark"> 200</p>
       <p class="currencymark"> 200</p>
</div>
<style>
      p::before{
          content: "JPY";
          font-size: 1.0em
      }
</style>
<script>
     var price = document.querySelector('p.::before');
     for(var i=0;i<price.length;i++){
         price[i].innerHTML="USD";
     }
</script>
</body>
</html>

  • USD 200
    JPY 200
    JPY 200
  • USD 200
    USD 200
    USD 200
  • JPY 200
    JPY 200
    JPY 200
  • 何も表示されない

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

答えはこちら

答え C
querly Selector()とquerySlector All()を使用してCSSセレクタを使用してDOMの要素を選択できます。CSSセレクタには擬似要素がありますがJavaScript のSelector APIでは擬似要素は選択できません。したがってpriceには何も返されずfor文は実行されません、したがって200に疑似要素::beforeで定義されたJPYが付加された元のコードのままで表示されます。
またquerySelector()は指定されたセレクタに合致する最初の要素を返すため、このコードでセレクタを”.currencymark”と変えてもprice変数にはp要素が入りますので、for 文が実行されず同じ結果になります。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 伊藤 眞 氏

例題2.11「2.2.5 History API」
レベル2の出題範囲「2.2.5 History API」からの出題です。
ブラウザの履歴から現在のドキュメントを取り除き、新しいドキュメントを表示したい。以下のLocationのメソッドのうち最も適切なものを選びなさい。
  • assign()
  • reload()
  • replace()
  • push()

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

答えはこちら

答え C
Locationオブジェクトを使って指定したページをロードすることに関する問題です。
A.のassign()も指定したドキュメントを表示させることができますが履歴が削除されませんので、ブラウザの戻るボタンを押されると元のドキュメントに戻りまた同じスクリプトを実行され、新しいドキュメントが再度表示されてしまいます。
reload()は現在のページをリロードするだけです。Locationオブジェクトにpush()というメソッドはありません。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 伊藤 眞 氏

例題2.10「2.2.1 イベント」
レベル2の出題範囲「2.2.1 イベント」からの出題です。
以下のコードで Yellowという文字をマウスでクリックした場合表示がどのようになるか正しいものを選びなさい。

<!DOCTYPE html>
<html>
   <head> 
   <meta charset="UTF-8">  
    <script>
        window.onload = function() {
            document.getElementById('A').addEventListener('click',function() {
                text=document.getElementById('A')
                text.innerHTML= "Blue is Clicked</p>";
            },false)
            document.getElementById('B').addEventListener('click',function() {
                text=document.getElementById('B')
                text.innerHTML= "Green is Clicked";
            },false)
            document.getElementById('C').addEventListener('click',function() {
                text=document.getElementById('C')
                text.innerHTML= "Red is Clicked";            
            },false)
            document.getElementById('D').addEventListener('click',function() {
                text=document.getElementById('D')
                text.innerHTML= "Yellow is Clicked";
            },false)
        }
    </script>  
   </head>
   
    <body>
    <div id ='A'>
     Blue 
        <div id = 'B'>
            Green 
        </div>
        <div id = 'C'>
            Red
        </div>        
    </div>
    <div id = 'D'>
     Yellow
    </div>
   </body>
</html>

  • Blue
    Green
    Red
    Yellow
  • Blue
    Green
    Red
    Yellow is Clicked
  • Blue is Clicked
    Green is Clicked
    Red is Clicked
    Yellow is Clicked
  • Blue is Clicked
    Yellow

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

答えはこちら

答え B
これはイベントリスナーの登録の基本的な例です。addEventListener の引数のclickがマウスクリックのイベントを示します。
この例ではYellowのdiv要素はトップレベルになりますので他には影響が出ずB が正解になります。
GreenとRedのdiv要素はBlueの子要素になっているため、GreenやRedを押した場合、親要素のBlueにイベントが伝搬し、D のようになります。また、Blueを押した場合にも、Blueのdiv要素を書き替えますのでD になります。 A はイベントが起きていない状態の表示です。div要素を全て並列(全てを同じレベル)にして全てクリックするとC のような結果になります。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 伊藤 眞 氏

例題2.9「2.2.5 History API」
レベル2の出題範囲「2.2.5 History API」からの出題です。
History APIのpushStateメソッドを使用して、存在しないWebページのURLをスタックに追加した場合の結果を選択しなさい。
  • JavaScriptのエラーになり、404 Not Foundと表示される
  • JavaScriptのエラーになるが、現在のページが表示されたままになる
  • アドレスバーに指定したURLが表示され、404 Not Foundというページが表示される
  • 何も変化しない
  • アドレスバーに指定したURLが表示され、現在のページが表示されたままになる

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

答えはこちら

答え E
History APIはWebブラウザの"戻る"、"進む"といったボタンのような機能をJavaScriptから操作する方法です。
ページ移動の履歴はスタックという形で保存されます。
スタックは荷物を積み上げるイメージに近く、後から追加したものは前の荷物の上に置き、取り出すときには一番上の荷物から取り除くことになります。
指定したURLの有無に関わらず、pushStateメソッドの結果は、アドレスバーに指定したURLが表示され現在のページが表示されたままになります。
Ajaxのような非同期通信による内容の書き換えを行なう場合に、そのままではURLが変化しないため、ブックマークや、メール等でURLを教える場合などに内容を維持できません。
そこで、内容の変化に伴なってURLを変化させることで、ページ全体のリロードを行なうことなくURLと内容を一致させることができます。
このような技術をpjaxと呼びます。

出題範囲の詳細

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

例題2.8「2.2.5 History API」
レベル2の出題範囲「2.2.5 History API」からの出題です。
現在の画面から、ブラウザの戻るボタンや履歴によるフォーム入力画面への遷移を無効にしたい。
有効な手段を全て選択しなさい。
ただし、画面遷移はA(前の画面)→B(フォーム入力画面)→C(現在の画面)となっていることとし、prevurlにはA(前の画面)のURL、nexturlにはC(現在の画面)のURLが格納されているものとする。
  • 現在の画面でhistory.pushState()を用いてダミーの履歴を作成し、onpopstateイベントハンドラを用いてダミーの履歴に戻るようにする。
  • フォーム入力画面をロードする時に window.history.forward() が実行される様にする。
  • フォーム入力画面から遷移する時に window.history.replaceState(prevurl) が実行される様にする。
  • フォーム入力画面から遷移する時に window.location.replace(nexturl); を利用する。

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

答えはこちら

答え B, C, D
history.pushState()とonpopstateイベントハンドラを駆使して、現在の画面からの戻るボタンを抑止する方法は、戻るボタンの単発のクリックには有効ですが、履歴から辿れてしまいます。
フォーム入力画面のロード時に必ずhistory.forword()を実行するようにすれば、入力後の画面に遷移した後にフォーム入力画面に戻ろうとした時には、必ずキャッシュを使った現在の画面表示に強制的に進められます。
ただし、キャッシュとはいえフォーム入力画面に戻っており、history.forward()を呼び出す以前のJavaScriptがあれば、実行されてしまうので注意が必要です。
history.replaceState(prevurl)は、フォーム入力画面で自分の履歴を前の画面のURLで書き換えているため、現在の画面から戻るボタンや履歴で戻る場合には、前の画面に戻ることになります。
location.replace(nexturl)は、現在の履歴を消去した上でnexturlに遷移する、という動作のため、データ送信は別途AJAXなどで行い、データ送信が完了してからこれを呼び出す必要があります。
location.replace()やhistory.replaceState()を使った手法は、フォーム入力画面の履歴が残らないため、履歴から戻れることはなくなり、history.forwrd()より安全と言えます。

出題範囲の詳細

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

例題2.7 「2.2.6 テスト・デバッグ」
レベル2の出題範囲「2.2.6 テスト・デバッグ」からの出題です。
JavaScriptで、コンソールに指定したDOMオブジェクトをXML/HTMLで表示するメソッドを選択しなさい。
  • Console.log();
  • Console.dir();
  • Console.dirxml();
  • Console.element();
  • Console.dump();

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

答えはこちら

正解 C
2.2.5 テスト・デバッグに関する出題です。
Console.dirxmlメソッドは、引数に指定されたDOMオブジェクトを、XML/HTMLの書式 で開発者ツールのコンソールに表示します。
JavaScriptのオブジェクトを引数にすると、Chromeではオブジェクトリテラルとして 表示されます。

D,Eの選択肢のメソッドは存在しません。

Console.dirとConsole.dirxmlメソッドはブラウザによって実装状況が異なります。
実際に動作を試す場合には、Chromeを使用すると良いでしょう。
dirxmlはIE(11),Firefox(49.0)、Safari(10.0)ではConsole.logと同じ表示になりま す。
dirはIE(11),Firefox(49.0)では、オブジェクトをツリー形式で表示します。
Safari(10.0)では、Console.logと同じ表示になります。

出題範囲の詳細

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

例題2.6 「2.2.4 Selectors API」
レベル2の出題範囲「2.2.4 Selectors API」からの出題です。
以下のHTMLにおける、スクリプトの実行結果を選択しなさい。

<div id="elm">
 <p<HTML5</p>
</div>

document.querySelector('#elm a');

  • エラーが発生する
  • { }
  • undefined
  • null
  • [ ]

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

答えはこちら

正解 D
2.2.4 Selectors APIに関する出題です。
querySelectorメソッドで、該当する要素の存在しないセレクタを指定した場合の結果はnullになります。
セレクタの記述が不正な書式の場合はエラーになり、例外SYNTAX_ERRが発生します。
querySelectorに似たメソッドにquerySelectorAllがありますが、このメソッドで該当要素の存在しないセレクタを指定した場合は空配列が返ります。

HTML要素を操作するスクリプトが思ったように動作しない場合は、各Webブラウザに搭載されている開発者ツールのデバッガを使って、メソッドの結果を確認したり、コンソールにエラーが出ていないか確認してみると良いでしょう。

出題範囲の詳細

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

例題2.5 「2.2.4 Selectors API」
レベル2の出題範囲「2.2.4 Selectors API」からの出題です。
以下のHTML中の "ul要素内のli要素" 全てを選択するためのスクリプトを選択しなさい。

<ol>
  <li>ABC</li>
  <li>DEF</li>
</ol>
<ul>
  <li>GHI</li>
  <li>JKL</li>
</ul>

  • document.getElementsByTagName('li');
  • document.getElementsByQuery('ul li');
  • document.querySelector('ul li');
  • document.querySelectorAll('ul li');

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

答えはこちら

正解 D

2.2.4 Selectors APIに関する出題です。
HTML5では、HTML要素のDOMオブジェクトの取得を行なうメソッドとして、これまでのgetElementByIdや、getElementsByTagNameに加え、querySelectorとquerySelectorAllが追加されました。
querySelectorやquerySelectorAllでは、CSSセレクタと同様の記述でHTML要素のDOMオブジェクトを取得することができます。
querySelectorは、セレクタに該当するDOMオブジェクトの最初の要素(該当するものがなければnull)を取得できます。
querySelectorAllは、セレクタに該当するDOMオブジェクトを全て取得できます。


A. の結果は、olとul内のli要素を全て取得してしまうため間違いです。
B. のメソッドは存在しません。
C. の結果は、ul liに該当する最初の要素(<li>GHI</li>)だけを選択されます。


元々、jQueryのメリットとして挙げられることの多かったCSSセレクタと同様の要素 取得機能ですが、HTML5ではJavaScriptにその機能が取り込まれたかたちになりま す。 同様にアニメーションもCSS3で実現できるようになったため、時代の流れとして jQueryを導入しない選択肢も考えられるようになってきました。

出題範囲の詳細

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

例題2.4 「2.2.3 ウィンドウオブジェクト」
レベル2の出題範囲「2.2.3 ウィンドウオブジェクト」からの出題です。
クロスドメインで呼び出したウィンドウとメッセージをやりとりしたい。
セキュリティ上、有効な実装を全て選択しなさい。
  • 呼び出し元からのpostMessageメソッド呼び出しにおいて、呼び出し先のドキュメントを一つに特定するために、第二引数にURLをパスまで指定する。
  • 呼び出されたウィンドウにおいて、呼び出し元をチェックするために、messageイベントハンドラの引数のoriginプロパティを利用する。
  • 呼び出されたウィンドウにおいて、呼び出し元をチェックするために、messageイベントハンドラの引数のsourceプロパティを利用する。
  • やりとりするメッセージの中において、互いに信頼できる情報を含める。

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

答えはこちら

正解 B, D

呼び出し元のpostMessageメソッドでは、URLをパスまで指定できますが、スキーマ、ホスト、ポートまでしかチェックされず、URLを一つに特定することはできません。
しかしながら、サイトのチェックのために、スキーマ、ホスト、ポートの指定はすべきです。

呼び出されたウィンドウのmessageイベントハンドラで受け取れる引数には、data、source、originの3つのプロパティがありますが、呼び出し元の情報が必ず含まれるのは、originです。
このoriginプロパティで確認できるのは、スキーマ、ホスト、ポートまでで、パスは含まれないことに注意が必要です。

また、やりとりするメッセージの中に互いに信頼できる情報を含めるのも有効です。
呼び出し元がファイルシステム(スキーマがfile)やブラウザの拡張などで、originプロパティが利用できない場合には、別途信頼できる情報をやりとりすべきです。

出題範囲の詳細

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

例題2.3 「2.2.2 ドキュメントオブジェクト/DOM」
レベル2の出題範囲「2.2.2 ドキュメントオブジェクト/DOM」からの出題です。

下記の記述にあるinput要素を変更してユーザによる値の変更を抑制したい。

<input class="test" type="text" value="test">

変更後の結果として、レイアウトや機能に影響を与えずに実現可能しているものを全て選択しなさい。

    
    A. <input class="test" type="text" value="test" style="display:none">
     <div class="test">test</div>
    
    B. <input class="test" type="text" value="test" style="visibility:hidden">
     <div class="test">test</div>
    
    C. <input class="test" type="text" value="test" disabled="disabled">
    
    D. <input class="test" type="hidden" value="test">
     <div class="test">test</div>
    
	

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

答えはこちら

正解 A, D

「style="display:none"」の追加と「type="hidden"」への変更は、要素の描画領域が確保されず、全く表示されなくなるため、代わりに値を表示するdiv要素を追加し、レイアウトを崩さずに実現しています。

「style="visibility:hidden"」の追加は、要素の描画領域を確保したまま不可視にするため、レイアウトを崩してしまいます。

「disabled="disabled"」の追加は、フォームをサーバに送信するときに、送信対象から外れてしまい、機能的に影響が出てしまいます。

出題範囲の詳細

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

例題2.2「2.2.6 テスト・デバッグ」
レベル2の出題範囲「2.2.6 テスト・デバッグ」からの出題です。
DOMオブジェクトを引数とした時に、オブジェクトのプロパティを表示するconsoleオブジェクトのメソッドを一つ選びなさい。
  • dir
  • log
  • dirxml
  • profile

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

答えはこちら

答え A

DOMオブジェクトのプロパティを表示するのは、dirメソッドです。
dirxmlやlogは、DOMオブジェクトであれば、DOMツリーとして表示します。

profileは、profile("識別子")からprofileEnd("識別子")までの処理にかかった時間を開発者ツールのProfilesタブ(Chromeの場合)やパフォオーマンスタブ(Firefoxの場合)に表示します。

consoleオブジェクトには、logメソッドだけでなく、デバッグに便利なメソッドが他にもあります。

log以外に、error、warn、info、trace、assertなどのお馴染みのキーワードのメソッド、group("識別子")からgroupEnd("識別子")までのログ出力をグループ化するメソッド、time("識別子")からtimeEnd("識別子")までの経過時間を表示するメソッド、オブジェクトをツリー形式でなく表形式で表示するtableメソッドもあります。

出題範囲の詳細

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

例題2.1「2.2.1 イベント」
レベル2の出題範囲「2.2.1 イベント」からの出題です。
以下のイベントハンドラのうち、documentオブジェクトでサポートされているものを全て選択しなさい。
  • onload
  • onunload
  • onbeforeunload
  • onloadstart

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

答えはこちら

答え A,D

onunloadとonbeforeunloadは、windowオブジェクトでサポートされているイベントハンドラであり、windowオブジェクトに含まれるdocumentオブジェクトではサポートされません。
onloadは、body要素やframeset要素でサポートされているイベントハンドラであり、documentオブジェクトやwindowオブジェクトでキャッチできます。
onloadstartは、メディア関連のaudioやvideo、img要素でサポートされているイベントハンドラであり、これらの要素を含むdocumentオブジェクトにもイベントは伝播します。

出題範囲の詳細

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

このページの先頭へ