質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

515閲覧

コードの内容が正しく理解出来ているかを検証していただけないでしょうか。

taka_oct092018

総合スコア133

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2021/01/06 05:49

「HTML5プロフェッショナル認定試験レベル2スピードマスター問題集 P212 問5-22」より。

1.ユーザーが選択した画像ファイルをimg要素に設定して表示する。
2.ブラウザを閉じた後に再度同一ページにアクセスした際は、選択した画像でデータを取り出してimg要素に表示させる。

<input type="file" id="uploader"> <img src="no-image.png" alt="icon" id="icon">
window.addEventListener("load", function () { var icon = localStorage.getItem("icon"); if (icon) { document.querySelector("#icon").src = icon; } }); document.querySelector("#uploader"). addEventListener("change", function (){ var file = document.querySelector("#uploader").files[0]; var reader = new FileReader(); reader.onload = function () { document.querySelector("#icon").src = reader.result; localStorage.setItem("icon", reader.result); }; reader.readAsDataURL(file); });

「自分なりの解釈」
(1) ブラウザを閉じた後に再度アクセス。
window.addEventListener("load",

(2) Web Storageは同一オリジンにのみ参照可能な機能を利用して、
if文と併せて同一ページにアクセスしているかどうかを検証している。
var icon = localStorage.getItem("icon");
if(icon) {}

(3) 選択した画像データを取り出してimg要素に表示させる。
var icon = localStorage.getItem("icon");
document.querySelector("#icon").src = icon;

(4) ユーザーが選択。
document.querySelector("#uploader").
addEventListener("change",

(5) input要素からファイルを取り出している。
var file = document.querySelector("#uploader").files[0];

(6)ユーザーが選択した画像ファイル。
var reader = new FileReader();

(7)ユーザーが選択した画像ファイルを表示している。
document.querySelector("#icon").src = reader.result;

(8)画像ファイルをlocalStorageに保存している。
localStorage.setItem("icon", reader.result);

(9)ブラウザを閉じた後も利用するため、画像ファイルをreadAsDataURLとして読み込む。
reader.readAsDataURL(file);

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/01/06 05:52

どのようにそのような理解に至ったのでしょうか。 根拠ないままだと「本当に理解しているかどうか」は見えにくいかと。
m.ts10806

2021/01/06 06:09

むしろ「要件を満たすコードとなっているか判断できるかどうか」のほうが大事ではないでしょうか。
gentaro

2021/01/06 07:02

質問になってないただの作業依頼。 こういうサイトで有償で先生雇うか学校にでも通うべき。 https://menta.work/
guest

回答2

0

個人的な意見ですけど、質問者さんのような理解の仕方はプログラムをする過程においては『よい考え方ではない』と思います。

プログラムするといってもやっていることはおよそ
・値の保持
・任意のタイミングにおける関数の実行
だいたいこの2つ程度です。

例えば1番の
ブラウザを閉じた後に再度アクセス
というのはプログラムの命令文とは一切関係のない質問者さんの思い、願望であり
実際に書かれていることは
window.addEventListener("load",function~なので
要するに『画面のロード時に中身を実行してね』ということだけです。

プログラム命令を組み合わせた結果に
ブラウザを閉じた後に再度アクセス』という要件が得られるのであって、その文自体に要件を満たす機能があるわけではないです。

理解している内容と書いてあるプログラム命令とに解離があると、自力で書くときに難しくなるので
最初のうちは命令に沿った理解をして、実現したい要件は分けて考えた方がいいと思います。理解に思いが先行しすぎという感じがします。

ここまで書いておいてあれですけど正直うまくいえてる気がしませんm(._.)m

投稿2021/01/06 06:46

sousuke

総合スコア3828

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/01/06 07:13 編集

個人的には非常に良い指摘だと思いました+1 「書いたとおりに動いてるだけ」という部分を念頭においてもらいたいですね。
sousuke

2021/01/06 07:20

そう言っていただけると助かります!
taka_oct092018

2021/01/06 09:21

sousuke様、回答ありがとうございます。 問題文を軸にして、コードの方を無理に対応させる記述は独りよがりでした。
guest

0

ベストアンサー

こんにちは。

順序付きリストになっていますが、順序には大した意味はないのですよね?
私見ですが、以下の通りです。

(1) ブラウザを閉じた後に再度アクセス。

正しく理解しているかどうかわからない。

(2) Web Storageは同一オリジンにのみ参照可能な機能を利用して、if文と併せて同一ページにアクセスしているかどうかを検証している。

正しく理解しているかどうかわからない。

(3) 選択した画像データを取り出してimg要素に表示させる。

正しく理解していると思われる。

(4) ユーザーが選択。

正しく理解しているかどうかわからない。

(5) input要素からファイルを取り出している。

正しく理解していると思われる。

(6)ユーザーが選択した画像ファイル。

誤って理解しているのではないかと思われる。

(7)ユーザーが選択した画像ファイルを表示している。

正しく理解していると思われる。

(8)画像ファイルをlocalStorageに保存している。

正しく理解しているかどうかわからない。

(9)ブラウザを閉じた後も利用するため、画像ファイルをreadAsDataURLとして読み込む。

正しく理解していると思われる。

投稿2021/01/06 06:02

Lhankor_Mhy

総合スコア35869

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

taka_oct092018

2021/01/06 09:16

返信ありがとうございます。 どのように理解しているかを示すのは非常に困難でした。 そこで、コードが処理している内容と問題文に該当する箇所を対にしてみましたが、 かえって誤解が生じたみたいです。 今後は質問の方法も含めて再考します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問