例題5.17「2.5.1 Web Storage」

レベル2の出題範囲「2.5.1 Web Storage」からの出題です。
Web Storageについて正しく説明しているものをすべて選択しなさい。

• sessionStorageに保存したデータはブラウザーを閉じるとデータが失われる
• リクエストのたびに保存されているデータをサーバーへ自動的に送信を行う
• localStorageでは5MB程度のデータを永続的に保存することができる
• localStorageでは任意のファイルをデータとして保存することができる

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

答えはこちら

例題5.16「2.5.4 バイナリ―データ」

レベル2の出題範囲「2.5.4 バイナリ―データ」からの出題です。
リトルエンディアンの環境で、以下のスクリプトを実行した結果はどれか。

var buf = new ArrayBuffer(4);
var i8 = new Int8Array(buf);
i8[0] = 0x12;
i8[1] = 0x34;
i8[2] = 0x56;
i8[3] = 0x78;
var i16 = new Int16Array(buf);
console.log(i16[0].toString(16)); // 16進表記での出力

• 12
• 3412
• 7856
• 78563412

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

答えはこちら

例題5.15「2.5.4 バイナリ―データ」

レベル2の出題範囲「2.5.4 バイナリ―データ」からの出題です。
JavaScriptの型付き配列に関する記述で間違っているものを選びなさい。

• JavaScript の型付き配列では バッファ と ビュー に実装を分けている。
• ArrayBuffer は、可変長のバイナリデータのバッファを示すために使われるデータタイプである。
• 型付き配列のビューは自身を表現する名称を持ち、Int8、Uint32、Float64 などの一般的な数値型のビューを提供する。
• ビッグエンディアンとは上位バイトから下位バイトの順に保存する方式である。

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

答えはこちら

例題5.14「2.5.3 File API」

レベル2の出題範囲「2.5.3 File API」からの出題です。
以下のinput要素でファイルを選択したあと、JavaScriptを実行した。
ファイルの読み込みが完了する前にreader.abort()が実行されたとき、出力される結果を選択しなさい。

[HTML]
<input id="fileItem" type="file">

[JavaScript]
var fileItem = document.getElementById('fileItem');
var item = fileItem.files.item(0);
var reader = new FileReader();
reader.readAsText(item);
reader.abort();
console.log( reader.readyState );

• 1
• 2
• EMPTY
• ABORTED

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

答えはこちら

例題5.13「2.5.3 File API」

レベル2の出題範囲「2.5.3 File API」からの出題です。
以下のinput要素で選択したファイルの内容を文字列として取得し表示する正しい手順を選択しなさい。

    [HTML]
<input id="fileItem" type="file" multiple="multiple">

• var fileItem = document.getElementById('fileItem');
  var item = fileItem.files.item(0);
  var reader = new FileReader();
  reader.onload = function(){
  alert(reader.result);
  }
  reader.readAsText(item);
• var fileItem = document.getElementById('fileItem');
  var item = fileItem.files.item(0);
  var reader = new FileReader(item);
  alert(reader.result);
• var fileItem = document.getElementById('fileItem');
  var item = fileItem.files.item(0);
  var reader = new FileReader();
  alert(reader.readAsText(item));
• var fileItem = document.getElementById('fileItem');
  var item = fileItem.files.item(0);
  var reader = new FileReader();
  reader.onload = function(){
  alert(reader.result);
  }
  reader.readAsString(item);

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

答えはこちら

例題5.12「2.5.3 File API」

レベル2の出題範囲「2.5.3 File API」からの出題です。
以下のinput要素で選択したファイルの情報を取得する正しい手順を選択しなさい。

    [HTML]
<input id="fileItem" type="file" multiple="multiple">

• var fileItem = document.getElementById('fileItem');
  var file = fileItem.files(0);
• var fileItem = document.getElementById('fileItem');
  var item = fileItem.item(0);
• var fileItem = document.getElementById('fileItem');
  var files = fileItem.files;
  var item = files.item(0);
• var fileItem = document.getElementById('fileItem');
  var files = fileItem.files;
  var file = files.get(0);

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

答えはこちら

例題5.11「2.5.3 File API」

レベル2の出題範囲「2.5.3 File API」からの出題です。
File APIで取得したFileオブジェクトの、lastModifiedDateプロパティの値として正しいものを選択しなさい。

• 最終更新時間を表すUnixTime(1970年1月1日 0時0分0秒からの秒数)
• 最終更新時間を表わすDateオブジェクト
• 最終更新時間を表す "2016-11-16 13：00：18"のような文字列
• 最終更新時間を表す "Wed Nov 16 2016 13:00:18 GMT+0900 (JST)"のような文字列

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

答えはこちら

例題5.10「2.5.3 File API」

レベル2の出題範囲「2.5.3 File API」からの出題です。
以下のinput要素で選択したファイルの個数を表示する正しい手順を選択しなさい。

    [HTML]
<input id="fileItem" type="file" multiple="multiple">

• var fileItem = document.getElementById('fileItem');
  alert(fileItem.length);
• var fileItem = document.getElementById('fileItem');
  alert(fileItem.files.length);
• var fileItem = document.getElementById('fileItem');
  alert(count(fileItem.files));
• var fileItem = document.getElementById('fileItem');
  alert(count(fileItem.files));

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

答えはこちら

例題5.9「2.5.1 Web Storage」「2.5.2 Indexed Database API」

レベル2の出題範囲「2.5.1 Web Storage」「2.5.2 Indexed Database API」からの出題です。
Indexed DatabaseとWeb Storageの違いとして正しくないものを2つ選択しなさい。

• Indexed DatabaseはRDBMSであり、Web StorageはKVSである。
• Indexed Databaseではトランザクションを使用できる。
• Web Storageではデータの内容による検索はできない。
• 最大データ容量は一般にIndexed Databaseのほうが小さい。
• Web Storageには文字列データしか格納できないが、Indexed Databaseにはバイナリデータも格納できる。

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

答えはこちら

例題5.8「2.5.2 Indexed Database API」

レベル2の出題範囲「2.5.2 Indexed Database API」からの出題です。
データの更新においてトランザクション機能を持つAPIを選択しなさい。

• Indexed Database API
• File API
• Web Storage API
• Cookie API
• RDBMS API

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

答えはこちら

例題5.7「2.5.2 Indexed Database API」

レベル2の出題範囲「2.5.2 Indexed Database API」からの出題です。
openメソッドで作成したIndexed Databaseを削除する場合に使用するメソッドを選択しなさい。

• exit()
• close()
• deleteDatabase()
• dropDatabase()

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

答えはこちら

例題5.6「2.5.1 Web Storage」

レベル2の出題範囲「2.5.1 Web Storage」からの出題です。
以下のスクリプトの表示結果についての説明として正しいものを選択しなさい。

        
for(var i = 0;i < localStorage.length;i++) {
  console.log( localStorage.key(i) );
}	
	
    

• localStorageに格納されている全ての値をキーのアルファベット順に表示する。
• localStorageに格納されている全ての値を追加した順に表示する。
• localStorageに格納されている全ての値を表示するが、順番はユーザエージェント毎に異なる。
• localStorageに格納されている全ての値をキーのアルファベットの逆順に表示する。

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

答えはこちら

例題5.5「2.5.1 Web Storage」

レベル2の出題範囲「2.5.1 Web Storage」からの出題です。
Local Storageに保存されている全てのデータを削除するスクリプトとして正しいものを選択しなさい。

• localStorage.clear();
• localStorage.removeItems();
• localStorage.removeItem();
• localStorage.clearAllItems();
• localStorage.deleteItems();

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

答えはこちら

例題5.4「2.5.1 Web Storage」

レベル2の出題範囲「2.5.1 Web Storage」からの出題です。
以下のスクリプトの実行結果として正しいものを選択しなさい。

        
var obj = {'a':'A','b':'B'};
localStorage.setItem('object',obj);
document.write(localStorage.getItem('object'));	
	
    

• "undefined"と表示される
• "{'a':'A','b':'B'}"と表示される
• "[object Object]"と表示される
• エラーが発生し何も表示されない

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

答えはこちら

例題5.3「2.5.2 Indexed Database API」

レベル2の出題範囲「2.5.2 Indexed Database API」からの出題です。
次のJavaScriptのソースコードを含むWebページを表示するブラウザには、バージョン1のbooksデータベースとbookオブジェクトストアがすでに作成されています。
そのブラウザで再度次のWebページを表示した結果として正しいものを1つ選びなさい。
なお、オリジンなどの条件も同一であるとします。

        
var idb = window.indexedDB,
	　request = null,
	　db = null,
	　store = null,
	　transaction = null;
		
request = idb.open( "books", 1 );
request.onupgradeneeded = function () {
	db = request.result;
	
	store = db.createObjectStore("book", { keyPath: "isbn" });
	store.createIndex("by_author", "author");
	
	store.put({ title: "The Woman in the Dunes", author: "Kobo Abe", isbn: 123456 });
	store.put({ title: "Confessions of a Mask", author: "Yukio Mishima", isbn: 234567 });
}

request.onsuccess = function() {
	db = request.result;
	transaction = db.transaction( "book" );
	store = transaction.objectStore( "book" );
	
	store.put({ title: "Kappa", author: "Ryunosuke Akutagawa", isbn: 987654 });
}
	
    

• successイベントが発生し、bookオブジェクトストアに新しいデータが追加される
• successイベントが発生し、bookオブジェクトストアへのデータ追加でエラーが起きる
• upgradeneededイベントが発生し、同名bookオブジェクトストアを作成しようとすることでエラーが起きる
• upgradeneededイベントが発生し、同名indexを作成しようとすることでエラーが起きる

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

答えはこちら

例題5.2「2.5.3 File API 」

レベル2の出題範囲「2.5.3 File API 」からの出題です。
次のJavaScriptコードにおいて、色データが格納されたBlobオブジェクトを読み込み、コンソールに「rgba(R, G, B, 不透明度)」の形式で出力するための最も適切なコードを一つ選択しなさい。
なお、コード内のdata変数にR、B、G、不透明度（％）の順にunsigned integerで格納されていることとする。

•         
  var r, g, b, a = 0;
  var reader = new FileReader();
  reader.onload = function(read){
      var rgba = new Uint8Array(read.target.result);
      r = rgba[0]; // Rの読み込み
      g = rgba[1]; // Gの読み込み
      b = rgba[2]; // Bの読み込み
      a = rgba[3]; // 不透明度の読み込み
  };
  reader.readAsArrayBuffer(data);
  console.log("rgba(" + r + ", " + g + ", " + b + ", " + a + ")");
  		
          

•         
  var r, g, b, a = 0;
  var reader = new FileReader();
  reader.onload = function(read){
      var view = new DataView(read.target.result);
      var rgba = view.getUint32(0);
      r = (rgba & 0xff000000)<<<24; // Rの読み込み
      g = (rgba & 0xff0000)<<<16; // Gの読み込み
      b = (rgba & 0xff00)<<<8; // Bの読み込み
      a = rgba & 0xff; // 不透明度の読み込み
      console.log("rgba(" + r + ", " + g + ", " + b + ", " + a + ")");
  };
  reader.readAsArrayBuffer(data);
  		
          

•         
  var r, g, b, a = 0;
  var reader = new FileReader();
  reader.onload = function(read){
      var view = new DataView(read.target.result);
      r = view.getUint8(0); // Rの読み込み
      g = view.getUint8(1); // Gの読み込み
      b = view.getUint8(2); // Bの読み込み
      a = view.getUint8(3); // 不透明度の読み込み
      console.log("rgba(" + r + ", " + g + ", " + b + ", " + a + ")");
  };
  reader.readAsArrayBuffer(data);
  		
          

•         
  var r, g, b, a = 0;
  var reader_r = new FileReader();
  reader_r.onload = function(read){
      var view = new DataView(read.target.result);
      r = view.getUint8(0); // Rの読み込み
  };
  reader_r.readAsArrayBuffer(data.slice(0, 1));
  
  var reader_g = new FileReader();
  reader_g.onload = function(read){
      var view = new DataView(read.target.result);
      g = view.getUint8(0); // Gの読み込み
  };
  reader_g.readAsArrayBuffer(data.slice(1, 2));
  
  var reader_b = new FileReader();
  reader_b.onload = function(read){
      var view = new DataView(read.target.result);
      b = view.getUint8(0); // Bの読み込み
  };
  reader_b.readAsArrayBuffer(data.slice(2, 3));
  
  var reader_a = new FileReader();
  reader_a.onload = function(read){
      var view = new DataView(read.target.result);
      a = view.getUint8(0); // 不透明度の読み込み
  };
  reader_a.readAsArrayBuffer(data.slice(3, 4));
  console.log("rgba(" + r + ", " + g + ", " + b + ", " + a + ")");
  		
          

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

答えはこちら

例題5.1「2.5.1 Web Storage」

レベル2の出題範囲「2.5.1 Web Storage」からの出題です。
Web Storageのセキュリティについて、正しいものを全て選択しなさい。

• ドメインが同じであれば、ストレージを共有できる。
• URL毎に独立のストレージを作成できる。
• ドメインが同じあっても、スキーマが異なる場合はストレージを共有できない。
• セッションの異なるストレージは共有できない。

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

答えはこちら