sugulogの日記

JavaScript、onload!画像読み込みが完了するまで「読み込み中」と表示させよう!!

f:id:sugulog:20210808214329p:plain
こんにちは、すぐるです!

sugulogをお読みいただきありがとうございます!!

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準に書いています。

少しでもお役に立てれば幸いです。

 

今回は、JavaScriptとonloadイベントいうことで

  •  画像読み込みが完了するまで「読み込み中」と表示させよう

について簡単に解説します!!

その為このブログを読むことで、onloadについて理解が深まるのはもちろん、画像読み込みが完了するまで「読み込み中」と表示させられるようになります。

是非最後までご愛読ください。

 

今回は、

・画像読み込みが完了するまで「読み込み中」と表示させよう

の順で解説していきます。

では早速、みていきましょう!!

・画像読み込みが完了するまで「読み込み中」と表示させよう

まずはHTMLでロード中、ロード後の表示箇所を記述します。

f:id:sugulog:20210808205954p:plain

次にCSSです。

f:id:sugulog:20210808210013p:plain

今回はロード後に、load_noneセレクタを当てることでロード中の表示を非表示にします。

最後にJavaScriptです。

f:id:sugulog:20210808210024p:plain

各要素を取得後、onloadイベントでウインドウのロード完了を監視しています。

今回はより処理が見やすいようにロード時間をわざと伸ばすためfor_load関数を定義し、for_load関数の処理が終わった時にはtrueを返すようにしています。

if文ではそのfor_load関数の結果を受けてから処理を走らせています。

load_noneクラスを付与しロード時表示箇所(div要素)を非表示にし、ロード後表示箇所(img要素)にimg_boxクラスを付与し画像の大きさを定義しています。

そしてsrcで画像のパスを指定し、画像を挿入しています。

では実際に動きを見てみましょう。

f:id:sugulog:20210808210036g:plain

ロード中は「読み込み中」と表示され、ロード後は画像がしっかりと表示されているのが確認できますね!!

 

以上、今回のブログでした。

onloadについて理解が深まり、画像読み込みが完了するまで「読み込み中」と表示させられるようになりましたか??

余裕があれば自分なりの読み込み表示を実装してみてくださいね(^_^)/

 

最後に!!

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度、読者登録お願いします!

またTwitterでもプログラミングに関することを中心に情報を発信してます。

宜しければそちらのフォローもお願いします。

最後までご愛読いただきありがとうございました!!

JavaScript、visibilityChange!タブがバックグラウンドになったときに音声を止めよう!!

f:id:sugulog:20210803214046p:plain

こんにちは、すぐるです!

sugulogをお読みいただきありがとうございます!!

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準に書いています。

少しでもお役に立てれば幸いです。

 

今回は、JavaScriptとvisibilityChangeということで

  •  タブがバックグラウンドになったときに音声を止めよう

について簡単に解説します!!

その為このブログを読むことで、visibilityChangeイベントについて理解が深まるのはもちろん、タブがバックグラウンドになったときに処理をさせる実装力が身につきます。

是非最後までご愛読ください。

 

今回は、

・タブがバックグラウンドになったときに音声を止めよう

の順で解説していきます。

では早速、みていきましょう!!

・タブがバックグラウンドになったときに音声を止めよう

まずはHTMLに音声を埋め込みます。

f:id:sugulog:20210803222457p:plain

次にJavaScriptの記述です。

f:id:sugulog:20210803223900p:plain

まずはaudio要素を取得し、visibilitychangeでタブのコンテンツの表示・非表示を監視しています。

イベント内ではdocument.visibilityStateを使用し、visible(表示)とhidden(非表示) でコンテンツの状態を取得し場合分けしています。

後はplay()で音声再生、pause()で音声停止を行なっています。

では実際に動きを見てみましょう。

f:id:sugulog:20210803224820g:plain

再生状態からコンテンツを非表示状態にし、さらに表示状態にした時の再生時間に注目してください。

非表示状態の際、音声が停止され再生時間が進んでいないのが確認できますね!

実際に実装してみるとしっかり音声が止まっているのも確認できます!!

 

以上、今回のブログでした。

visibilityChangeイベントについて理解が深まり、タブがバックグラウンドになったときに処理をさせる実装力が身につきましたか??

場合分け内の処理を変えるだけで自由に実装できそうですね(^_^)/

 

最後に!!

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度、読者登録お願いします!

またTwitterでもプログラミングに関することを中心に情報を発信してます。

宜しければそちらのフォローもお願いします。

最後までご愛読いただきありがとうございました!!

JavaScript、animate!アニメーションをJavaScriptで実装しよう!!

f:id:sugulog:20210727212154p:plain

こんにちは、すぐるです!

sugulogをお読みいただきありがとうございます!!

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準に書いています。

少しでもお役に立てれば幸いです。

 

今回は、JavaScriptとanimateいうことで

  •  アニメーションをJavaScriptで実装しよう

について簡単に解説します!!

その為このブログを読むことで、animateについて理解が深まるのはもちろん、JavaScriptでアニメーションを実装できるようになります。

是非最後までご愛読ください。

 

今回は、

・ アニメーションをJavaScriptで実装しよう

・プラス実装情報

の順で解説していきます。

では早速、みていきましょう!!

・ アニメーションをJavaScriptで実装しよう

今回は正方形が回転しながら横に移動するアニメーションをJavaScriptのanimateを使い実装していきます。

まずはHTMLからです。

f:id:sugulog:20210727184518p:plain

次にCSSで正方形を形作ります。

f:id:sugulog:20210727184716p:plain

最後にJavaScriptです。

f:id:sugulog:20210727184733p:plain

第一引数ではアニメーションの動きを指定します。

今回はtransformを使い動きを指定しています。

translateXで横軸の動き、rotateで回転を指定しています。
第二引数ではアニメーションの詳細を指定します。

durationでアニメーションの実行時間、iterationsで繰り返し、directionで繰り返し時の挙動を指定しています。

では実際に動きを見てみましょう。 

f:id:sugulog:20210727213308g:plain
正方形が回転しながら横に移動しているのが確認できますね。

・プラス実装情報

基本的にtransformを使えば上記のような移動、回転するアニメーションや大きさの変化するアニメーション(scale)を実装することができます。

その他にopacityを指定すれば透明度を変化させるアニメーション、filterを指定すれば明度や彩度を変化させるアニメーションも実装することもできます。

自分なりに色々組み合わせて実装してみましょう。

 

以上、今回のブログでした。

animateについて理解が深まり、JavaScriptでアニメーションを実装できるようになりましたか??

animateを使うことでJavaScriptのみでアニメーションが実装できます。

知識としてしっかり保持しておきましょう(^_^)/

 

最後に!!

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度、読者登録お願いします!

またTwitterでもプログラミングに関することを中心に情報を発信してます。

宜しければそちらのフォローもお願いします。

最後までご愛読いただきありがとうございました!!

JavaScript、innerHTML!都道府県プルダウンを作成しよう!!

f:id:sugulog:20210722162847p:plainこんにちは、すぐるです!

sugulogをお読みいただきありがとうございます!!

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準に書いています。

少しでもお役に立てれば幸いです。

 

今回は、JavaScriptとinnerHTMLいうことで

  •  都道府県プルダウンを作成しよう

について簡単に解説します!!

その為このブログを読むことで、innerHTMLについて理解が深まるのはもちろん、都道府県プルダウンを作成できるようにもなります。

是非最後までご愛読ください。

 

今回は、

都道府県プルダウンを作成しよう

の順で解説していきます。

では早速、みていきましょう!!

都道府県プルダウンを作成しよう

まずはHTMLでselect要素だけ記述します。

f:id:sugulog:20210722181230p:plain

次にJavaScriptです。

f:id:sugulog:20210722181238p:plain

まずはoption要素に適用するための都道府県が格納された配列を定義し、select要素を取得します。

今回は初期表示として「都道府県を選択してください」を表示させたいため、まず始めに変数optionに定義しています。

ポイントとしては文字としてoption要素も記述し代入することです。

このような形で代入することにより後でinnerHTMLを使いselect要素に適用する際に、文字のoption要素がHTMLタグとして処理されます。

for文では初期値を0とし更新処理で1ずつ増やし処理条件としてjapanList.lengthを定義することで、配列要素の数分処理を繰り返しています。

for文の中では加算代入を使用し、変数optionに都道府県のoption要素を加算しています。

また今回opton要素のvalueとしてi + 1と定義することで1~47の値が入るようにし、japanList[i]とすることでiには0~46の番号が順に入るので配列の要素が1つずつ取り出されます。

最後にoption要素を大量に代入した変数optionをinnerHTMLでselect要素に適用します。

では実際にプルダウンを見てみましょう。

f:id:sugulog:20210722183913g:plain

 

以上、今回のブログでした。

innerHTMLについて理解が深まり、都道府県プルダウンを作成できるようにもなりましたか??

配列やfor文の理解も必要な実装です。

少し難しいなと感じた場合はしっかりと復習しましょう(^_^)/

 

最後に!!

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度、読者登録お願いします!

またTwitterでもプログラミングに関することを中心に情報を発信してます。

宜しければそちらのフォローもお願いします。

最後までご愛読いただきありがとうございました!!

JavaScript、submit!submitイベントでフォーム送信時に送信確認を入れよう!!

f:id:sugulog:20210722151011p:plainこんにちは、すぐるです!

sugulogをお読みいただきありがとうございます!!

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準に書いています。

少しでもお役に立てれば幸いです。

 

今回は、JavaScriptのsubmitイベントということで

  •  フォーム送信時に送信確認を入れよう

について簡単に解説します!!

その為このブログを読むことで、submitイベントについて理解が深まるのはもちろん、送信確認を実装できるようになります。

是非最後までご愛読ください。

 

今回は、

・フォーム送信時に送信確認を入れよう

の順で解説していきます。

では早速、みていきましょう!!

・フォーム送信時に送信確認を入れよう

まずはHTMLでフォームを作成します。

f:id:sugulog:20210722153047p:plain

次にJavaScriptです。

f:id:sugulog:20210722153029p:plain

ポイントとしてはaddEventListenerでイベントを監視する際に関数の引数で、イベント発生時に生成されるオブジェクトであるeventを受け取ることです。

そしてsubmitで送信をイベントとして監視しています。

関数の中ではconfirmを使用し送信確認を行なっています。

また送信がキャンセルされた場合(false)は、eventに対しpreventDefaultをを使うことでイベントの挙動をキャンセルしています。

つまり今回であれば送信という挙動ですね。

では実際にブラウザで動きを見てみましょう。

f:id:sugulog:20210722154231g:plain

キャンセルを押した時は送信されないためテキストが残ったままで、OKを押した時は送信されるためテキストが消えているのが確認できますね!!

 

以上、今回のブログでした。

submitイベントについて理解が深まり、送信確認を実装できるようになりましたか??

誤送信を防ぐ実装としても役立ちますので、知識として持っておきましょう(^_^)/

 

最後に!!

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度、読者登録お願いします!

またTwitterでもプログラミングに関することを中心に情報を発信してます。

宜しければそちらのフォローもお願いします。

最後までご愛読いただきありがとうございました!!

JavaScript、Elementオブジェクト!form要素やinput要素、textarea要素を取り扱うメソッドを集めてみた!!

f:id:sugulog:20210715223440p:plain

こんにちは、すぐるです!

sugulogをお読みいただきありがとうございます!!

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準に書いています。

少しでもお役に立てれば幸いです。

 

今回は、JavaScriptのElementオブジェクトということで

  • form要素やinput要素、textarea要素を取り扱うメソッド

について簡単に解説します!!

その為このブログを読むことで、新しいform要素やinput要素、textarea要素を取り扱うJavaScriptメソッドに出会えたり、何か困ったときのカンニングペーパーとして参考になること間違いなしです!

また、新しいform要素やinput要素、textarea要素を取り扱うJavaScriptメソッドに出会うたびに追記していきます!!

是非最後までご愛読ください。

 

・Elementオブジェクトのフォーム要素を取り扱うJavaScriptメソッド

form要素やinput要素、textarea要素のデータを受け取る度に、ニヤニヤしながら学習した思い出順なのでご了承ください。 

・checked

input要素のcheckedboxの選択状態を真偽値で取得、更新(設定)を行う。

取得:input要素.checked

更新:input要素.checked = 更新したい真偽値

・files

input要素のfileの指定されたファイルリストを取得する。ファイルリストの情報は配列の中にオブジェクトとして格納されている。実際に使用する際は、changeイベントが発生した時のevent.targetに対し使用する。

例)const file = event.target.files → file[0].name 選択したファイル名を取得

value

指定したinput要素やtextarea要素のvalue属性の値の取得、更新(設定)を行う。入力欄の値の取得、更新(設定)を行う。

取得:input要素(textarea要素).value

更新:input要素(textarea要素).value = "更新したい文字列"

複数のラジオボタン(name属性で関連付けされている)の場合は、form要素.input要素のname属性の値.valueで指定する。select要素のoption要素の場合は、select要素.valueで指定する。

 

以上、今回のブログでした。

新しいform要素やinput要素、textarea要素を取り扱うJavaScriptメソッドに出会えたり、何か困ったときのカンニングペーパーとして参考になりそうですか??

また新しい知識をどんどん蓄えていきますね(^_^)/

 

最後に!!

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度、読者登録お願いします!

またTwitterでもプログラミングに関することを中心に情報を発信してます。

宜しければそちらのフォローもお願いします。

最後までご愛読いただきありがとうございました!!

JavaScript、classList.toggle!クラスの有無で表示を切り替えよう!!

f:id:sugulog:20210713213131p:plain

こんにちは、すぐるです!

sugulogをお読みいただきありがとうございます!!

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準に書いています。

少しでもお役に立てれば幸いです。

 

今回は、JavaScriptのclassList.toggleということで

  •  クラスの有無で表示を切り替えよう

について簡単に解説します!!

その為このブログを読むことで、classList.toggleについて理解が深まるのはもちろん、クラスの有無で表示を切り替える技術も手に入れることができます。

是非最後までご愛読ください。

 

今回は、

・クラスの有無で表示を切り替えよう

の順で解説していきます。

では早速、みていきましょう!!

・クラスの有無で表示を切り替えよう

今回はクラスの有無によってdisplay-none(要素を非表示にする)を定義したセレクタを切り替え、表示も切り替えていきます。

まずはHTMLです。

f:id:sugulog:20210713223410p:plain
表示を切り替えるテキストもHTMLで記述しています。

次にCSSです。

f:id:sugulog:20210713223556p:plain

今回非表示を定義するセレクタが.text_noneです。

最後にJavaScriptです。

f:id:sugulog:20210713223935p:plain

今回querySelectorAllでbutton要素を配列で一気に取得しています。

そしてその配列をforEachでbtnとして1つずつ取り出し、addEventListnerでクリック監視しています。

クリック時にはnextElementSiblingでbtnの次の要素(今回はp要素)を指定し、classList.toggleでクラスの有無を切り替えています。

classList.toggleは指定した要素に引数で指定したクラスがなければ追加し、あれば削除するメソッドでしたね。

その結果、text_noneが付与されていない場合は表示され、text_noneが付与されている場合は非表示になります。

では実際に挙動を見てみましょう。

f:id:sugulog:20210713224500g:plain

クリックされるごとに表示、非表示が切り替わっているのが確認できますね!

また今回JavaScriptではnextElementSiblingを使い指定した要素の次の要素を取得したりもしました。

少しHTMLの構成も意識しながら実装してみてください!!

 

以上、今回のブログでした。

classList.toggleについて理解が深まり、クラスの有無で表示を切り替える技術も手に入れることができましたか??

少しずつJavaScriptの実装力も高めていきましょう(^_^)/

 

最後に!!

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度、読者登録お願いします!

またTwitterでもプログラミングに関することを中心に情報を発信してます。

宜しければそちらのフォローもお願いします。

最後までご愛読いただきありがとうございました!!