JavaScript、windowオブジェクトやnavigatorオブジェクト！ウインドウを取り扱うメソッドを集めてみた！！

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

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

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

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

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

• ウインドウを取り扱うメソッド

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

その為このブログを読むことで、新しいwindowオブジェクトやnavigatorオブジェクトなどのウインドウに関するJavaScriptメソッドに出会えたり、何か困ったときのカンニングペーパーとして参考になること間違いなしです！

また、新しいwindowオブジェクトやnavigatorオブジェクトなどのウインドウに関するJavaScriptメソッドに出会うたびに追記していきます！！

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

・ウインドウに関するJavaScriptメソッド

ウインドウを扱う魔法使いになるために日々学習した思い出順なのでご了承ください。

・history.back

履歴をひとつ戻る。

・history.forward

履歴をひとつ進む。

・history.go

履歴を引数で指定した数分進む。

・location.href

現在のWebページのURLを取得する。また、パスを指定すると指定したパスに遷移する。

・location.reload

Webページをリロードする。引数にtureを指定した場合はキャッシュを無視してリロードする。

・navigator.maxTouchPoints

ポインターの最大数を取得する。

・navigator.pointerEnabled

ポインターが使えるかどうかを真偽値で判定する。

・window.devicePixelRatio

 デバイスのピクセル比を取得する。

・window.innerHeight

 ブラウザのビューポートの高さを取得する。

・window.innerWidth

 ブラウザのビューポートの横幅を取得する。

・window.ontouchstart

画面がタッチされた際のイベント。

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

新しいwindowオブジェクトやnavigatorオブジェクトなどのウインドウに関するJavaScriptメソッドに出会えたり、何か困ったときのカンニングペーパーとして参考になりそうですか？？

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

最後に！！

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

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

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

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

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

JavaScript、モーダル！ダイアログ等を表示するメソッドを集めてみた！！

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

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

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

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

今回は、JavaScriptのモーダルということで

• ダイアログ等を表示するメソッド

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

その為このブログを読むことで、ダイアログ等に関するJavaScriptメソッドに出会えたり、何か困ったときのカンニングペーパーとして参考になること間違いなしです！

また、新しいダイアログ等に関するJavaScriptメソッドに出会うたびに追記していきます！！

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

・ダイアログ等を表示するJavaScriptメソッド

表示させては消すを四六時中繰り返し学習した思い出順なのでご了承ください。

 ・alert()

OKと引数で指定するメッセージからなる警告ダイアログを表示する。

 例）alert("こんにちは");

・confirm()

OK、キャンセルと引数で指定するメッセージからなる確認ダイアログを表示する。OKを押すとtrueを返し、キャンセルを押すとfalseを返す。

 例）confirm("こんにちは");

・prompt()

OK、キャンセルと第一引数で指定するメッセージ、第二引数で指定するテキスト入力欄初期値からなる文字入力ダイアログを表示する。OKを押すと入力された文字列を返し、キャンセルを押すとnullを返す。

例）prompt("調子はどうですか？？", "元気です！！" );

<おまけ>

・console.log()

ウェブコンソールに引数でしてしたメッセージを出力する。

例）console.log("こんにちは");

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

ダイアログ等に関するJavaScriptメソッドに出会えたり、何か困ったときのカンニングペーパーとして参考になりそうですか？？

これからもどんどん知識を蓄えていきますね(^_^)/

最後に！！

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

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

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

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

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

JavaScriptとDateオブジェクト！日付時間値を計算しよう！！

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

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

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

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

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

•  日付時間値を計算しよう

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

その為このブログを読むことで、Dateオブジェクトを用いた日付時間値の計算ができるようになっているのはもちろん、実際の実装に活かせる技術を手に入れることができます。

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

今回は、

• Dateインスタンスに日時を設定しよう

• 日付時間値を計算しよう

• 経過時間を計算しよう

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

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

・Dateインスタンスに日時を設定しよう

Dateオブジェクトを生成する際、引数に文字列情報等で日付と時間を指定することができます。

指定する際は以下のような形で指定することができます。

数値で指定する際は、年、月、日、時、分、秒、ミリ秒の順番で指定していきます。

省略した場合は0が代入されます。

この際、月に関しては0~11の数値で指定します。

つまり上記では見た目上は6月18日を指定していますが、実際に指定されるのは7月18日になります。

またインスタンス生成後はset○○()系のメソッドで指定できます。

sugulog.hatenadiary.jp

・日付時間を計算しよう

日付時間は以下のように計算することができます。

①ではインスタンス化された日付の月をgetMonthで取得し1を引くことにより、1ヶ月前の月を計算しています。

②ではインスタンス化された日付の日をgetDateで取得し15を足すことにより、15日後の日を計算しています。

③ではインスタンス化された日付同士をgetTimeでタイムスタンプ値として取得し、引くことにより差分を計算しています。

また取得した値(タイムスタンプ値)はミリ秒単位です。

そのため今回は日で表示したいため、24(1日の時間)×60(1時間の分数)×60(1分の秒数)×1000(1秒のミリ秒数)の値で割っています。

では実際にコンソールで確認してみましょう。

それぞれしっかりと計算されているのが確認できますね！

また③で時間として表示したい場合は60×60×1000、分として表示したい場合は60×1000、秒として表示したい場合は1000で割りましょう！！

・経過時間を計算しよう

では今回のブログの学習を応用し、ブラウザが表示されてからボタンが押されるまでの経過時間を計算し表示してみましょう。

まずはHTMLにボタンと表示箇所を記述します。

次にJavaScriptで以下のように記述しました。

 ポイントとしてはブラウザが読み込まれた時(ファイルが読み込まれた時)とボタンがクリックされた時のタイムスタンプ値をDate.now()を使い取得していることです。

この結果2つの差分を求め、今回は秒単位に変換し経過時間を表示しています。

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

ボタンがクリックされる度に経過時間が更新されているのが確認できますね！！

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

Dateオブジェクトを用いた日付時間値の計算ができるようになり、実際の実装に活かせる技術を手に入れることができましたか？？

チケット等の有効期限の計算などにも応用できそうな実装でしたね(^_^)/

最後に！！

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

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

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

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

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

JavaScript、日付や時間を扱うDateオブジェクト！Dateオブジェクトを取り扱うメソッドを集めてみた！！

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

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

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

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

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

• Dateオブジェクトを取り扱うメソッド

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

その為このブログを読むことで、新しいDateオブジェクトに関するJavaScriptメソッドに出会えたり、何か困ったときのカンニングペーパーとして参考になること間違いなしです！

また、新しいDateオブジェクトに関するJavaScriptメソッドに出会うたびに追記していきます！！

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

・Dateオブジェクトに関するJavaScriptメソッド

Dateオブジェクトを日々探求しながら学習した思い出順なのでご了承ください。

※const date = new Date();でインスタンス化したものとする。

・getFullYear()

西暦を4桁の数値で取得する。

例）date.getFullYear() → 2021

・getMonth()

月を0~11の数値で取得する。そのため実際に表示する際は1を加算する。

例）date.getMonth() + 1 → 3

・getDate()

その日の日付を数値で取得する。

例）date.getMonth() → 18

・getHours()

時間を0~23の整数で取得する。

例）date.getHours() → 20

sugulog.hatenadiary.jp

・getMinutes()

分数を0~59の整数で取得する。

例）date.getMinutes() → 30

・getSeconds()

秒数を0~59の整数で取得する。

例）date.getMinutes() → 45

・getMilliseconds()

ミリ秒数を0~999の整数で取得する。

例）date.getMilliseconds() → 950

・getTime()

タイムスタンプ値を取得する。

例）date.getTime() → 1616770800000

sugulog.hatenadiary.jp

・getDay()

曜日を日曜から0~6の数値で取得する。そのため配列で予め数値に対応する曜日を格納しておく必要がある。

例）date.getDay() → 0

・setFullYear()

西暦を設定する

例）date.setFullYear(2021)

・setMonth()

月を0~11の数値で設定する。

例）date.setMonth(0)

・setDate()

日を設定する。

例）date.setDate(28)

・setHours()

時間を0~23の整数で設定する。

例）date.setHours(18)

・setMinutes()

分数を0~59の整数で設定する。

例）date.setMinutes(30)

・setSeconds()

秒数を0~59の整数で設定する。

例）date.setSeconds(45)

・setMilliseconds()

ミリ秒数を0~999の整数で設定する。

例）date.setMilliseconds(950)

・toLocaleString()

利用者の言語環境に合わせた日付時刻の文字列を取得する。

例）date.toLocaleString() → 2020/6/18 20:15:45

・toLocaleDateString()

利用者の言語環境に合わせた日付の文字列を取得する。

例）date.toLocaleDateString() → 2020/6/18

・toLocaleTimeString()

利用者の言語環境に合わせた時刻の文字列を取得する。

例）date.toLocaleDateString() → 20:15:45

・Date.parese()

日付文字列からタイムスタンプ値を取得する。

例）Date.parese("2021/03/27") → 1616770800000

・Date.now()

現在のタイムスタンプ値を取得する。

例）Date.now() → 1616770800000

sugulog.hatenadiary.jp

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

新しいDateオブジェクトに関するJavaScriptメソッドに出会えたり、何か困ったときのカンニングペーパーとして参考になりそうですか？？

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

最後に！！

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

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

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

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

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

JavaScript、プリミティブ型とオブジェクト型！データの型について詳しくなろう！！

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

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

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

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

今回は、JavaScriptのデータ型いうことで

•  データの型

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

その為このブログを読むことで、データの型についての知識が深まるのはもちろん、データの参照、メソッドについても理解することができます。

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

今回は、

• プリミティブ型とオブジェクト型

• データの型を取り扱うメソッドを集めてみた

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

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

・プリミティブ型とオブジェクト型

JavaScriptには大きく分けてデータそのものであるプリミティブ型とデータを参照するデータであるオブジェクト型に分けられる。

・プリミティブ型

具体的にプリミティブ型を見ていくと次の6つの型が当てはまります。

1. Boolean(真偽値)
2. String(文字列) 
3. Number(数値)
4. Undefined(未定義)
5. Null(値が存在しない)
6. Symbol(ユニークな値)

これらのデータはそれ自身がデータの元であり、他のどの値を参照しているわけではないというのがポイントです。

また例え変数に代入したとして変数の値を変更したとしても変数の値が変更されただけで元の数値のデータ自体は変わらないように、イミュータブル(immutable)というデータ自体が書き変わることのないという特徴を持っています。

さらにはあるデータを変数から別の変数に渡すときは値渡しとなります。

・　オブジェクト型

プリミティブ型であげた6つの型以外は全てオブジェクト型です。

配列やオブジェクトが代表的な型です。

配列やオブジェクトは要素として、"sugulog"や18といった文字列や数値を参照して作られます。

このようにプリミティブ型を元として作られるというのがポイントです。

また配列の要素の内容を書き換えることができるように、ミュータブル(mutable)というデータ自体を書き変えることができるという特徴を持っています。

さらにはあるデータを変数から別の変数に渡すときは参照渡しとなります。

・データの型を取り扱うメソッドを集めてみた

オブジェクトに関するJavaScriptメソッドに出会った順に書いているのでご了承ください 。

・typeof

指定した値のデータ型を調べる。

例）typeof "sugulog" → string

・instanceof

指定した値が指定したオブジェクトのインスタンスかどうかを真偽値で判定する。

例）today instanceof Date → ture

・Boolean()

引数で指定した値を真偽値型に変換する。

例）Boolean(1) → ture

・String()

引数で指定した値を文字列型に変換する。

例）String(1) → "1"

・Number()

引数で指定した値を数値型に変換する。

例）Number("1") → 1

・parseInt()

引数で指定した文字列を数値型(整数)に変換する。

例）parseInt("1.5") → 1

・parseFloat()

引数で指定した文字列を数値型(浮動小数点)に変換する。

例）parseFloat("6.18") → 6.18

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

データの型についての知識が深まり、データの参照、メソッドについても理解することができましたか？？

データの型を理解することはより正確なコードを書くための第一歩にもなるので、少しずつ理解していきましょう(^_^)/

最後に！！

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

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

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

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

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

JavaScriptと分割代入！まとめて値を代入しよう！！

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

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

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

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

今回は、JavaScriptということで

•  分割代入

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

その為このブログを読むことで、分割代入について理解できるのはもちろん、分割代入を利用した実装についても理解が深まります。

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

今回は、

• 配列の分割代入

• オブジェクトの分割代入

• 配列をシャッフルしよう

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

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

・配列の分割代入

分割代入とは個々の値に個々の値を代入するための記法のことです。

配列の場合は[変数1, 変数2,...] = [値1, 値2,...]のように記述します。

実際にみてみましょう！

分割代入されているのが確認できますね！！

・オブジェクトの分割代入

オブジェクトの場合は{変数1, 変数2,...} = オブジェクトのように記述します。

実際にみてみましょう！

変数にはオブジェクトのキー名を指定する必要があります。

それぞれの変数にキー名と一致する値が分割代入されているのが確認できますね！！

また変数を変えたい場合には{ 変数：変えたい変数}のように記述します。

・配列をシャッフルしよう

配列を偏りなくシャッフルする際にはFisher Yates（フィッシャーイェーツ）のアルゴリズムを用いるのが便利です。

まずは記述をみてみましょう！

ではFisher Yates（フィッシャーイェーツ）のアルゴリズムをみていきましょう。
for文において今回の場合、iは4、3、2、1、0と変化し処理は合計5回繰り返されます。

for文の中ではMath.randomで0以上1未満の値を取得しており、i + 1ではiは4、3、2、1、0と変化するので処理ごとに5、4、3、2、1を取得します。

その為randomにはMath.floorで数値以下の最大整数が代入されるので、0~4のランダムな数値が代入されることになります。

その結果、分割代入の際にrandomには配列インデックス内のランダムな整数が入り、iでは4~0と順に配列要素にアクセスし要素同士をシャッフルするという処理が行われます。

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

配列内の要素がシャッフルされているのが確認できますね！！

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

分割代入について理解でき、分割代入を利用した実装についても理解が深まりましたか？？

Fisher Yates（フィッシャーイェーツ）のアルゴリズムは知識として頭の片隅に入れておきましょう(^_^)/

最後に！！

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

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

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

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

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

JavaScriptとオブジェクト！複数データを管理するオブジェクト型を学ぼう！！

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

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

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

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

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

•  オブジェクト

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

その為このブログを読むことで、オブジェクトについて理解できるのはもちろん、オブジェクトに使用するメソッドについても理解できます。

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

今回は、

• オブジェクト

• オブジェクトの値を取得、更新しよう

• オブジェクトを取り扱うメソッドを集めてみた

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

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

・オブジェクト

{}で囲み複数のプロパティー（キー：値）の形でデータを管理する。

また値として格納できるデータには制限がなく数値や文字はもちろん、配列、オブジェクト、関数なども格納できます。

実際に例を見てみましょう！！

JavaScriptで予め用意されているDataオブジェクトやWindowオブジェクトなどもこのオブジェクトの形を基本としていますので覚えておきましょう。

・オブジェクトの値を取得、更新しよう

オブジェクトの値を取得する際は、オブジェクト[キー名]かオブジェクト.キー名で取得できます。

オブジェクトの値を更新する際は、オブジェクト[キー名] = 値かオブジェクト.キー名 = 値で更新できます。

では実際に上記のオブジェクトを使用し取得、更新を行なってみましょう！！

・オブジェクトを取り扱うメソッドを集めてみた

オブジェクトの深海のような深い深い階層に溺れながら学習した思い出順なのでご了承ください。

・ Object.assign()

引数で指定したオブジェクトを複製する。第一引数で{}を指定し第二引数で複製したいオブジェクトを指定する。

例）Object.assign({}, object)

スプレッド演算子（...）を用いても複製できる。

例）{...object}

・ Object.keys()

引数で指定したオブジェクトのキーを配列として返す。

例）Object.keys(object) → ["string", "number", "array", "obj", "method"]

・ Object.values()

引数で指定したオブジェクトの値を配列として返す。

例）Object.values(object) → ["文字", 7, [※省略], {※省略}, () => {※省略}]

・ Object.entries()

引数で指定したオブジェクトの各プロパティーを配列として返す。

例）Object.entries(object) → [["string", "文字"], ["number", 7], ["array", [※省略]], ["obj", {※省略}], ["method", () => {※省略}]]

・ Object.freeze()

引数で指定したオブジェクトに対するプロパティーの追加、削除、変更を禁止する。

例）Object.freeze(object)

※オブジェクトはconstで定義したとしてもプロパティーの追加、削除、変更は可能

・ Object.isFrozen()

引数で指定したオブジェクトの変更が不可能であるかどうかを真偽値で返す。

例）Object.isFrozen(object) → true（禁止されている）

・ Object.seal()

引数で指定したオブジェクトに対するプロパティーの追加、削除のみを禁止する。変更は可能である。

例）Object.seal(object)

・ Object.preventExtensions()

引数で指定したオブジェクトに対するプロパティーの追加のみを禁止する。削除、変更は可能である。

例）Object.preventExtensions(object)

 ・hasOwnProperty()

指定したオブジェクト内に引数で指定したプロパティーがあるかどうかを真偽値で返す。

例）object.hasOwnProperty("string") → true

キー名 in オブジェクトでも判定することができる。

例）("data" in object) → false

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

 オブジェクトについて理解でき、オブジェクトに使用するメソッドについても理解できましたか？？

オブジェクトはデータ管理の基本です。

少しずつ扱いに慣れていきましょう(^_^)/

最後に！！

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

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

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

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

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