JavaScript

JavaScript PostMessageでiframeとやりとりするには?

子のiframe内から 親のindex.html にイベントを送る。 iframe.html window.parent.postMessage で親ウィンドウにメッセージを送ります。 親のindex.html 親のindex.html から 子のiframe にイベントを送る。 親のindex.html document.querySelector({iframeを指定}).contentWindow.postMessage で iframe にメッセージを送ります。 iframe.html iframe の高さにリサイズする例 window.parent.postMessage で親ウィンドウにメッセージを送ります。 親のindex.html

JavaScript の総復習

Strictモード プログラムの先頭や関数の先頭に記述します。 分割代入 分割代入で変数の値を入れ替えられますが、1行目のセミコロンが無いとエラーになりました…セミコロン必要ですか… プロパティのアクセス プロパティへのアクセスはドットとブラケットの両方とも使えます。 プロトタイプ function版 class版 for of 数値の桁区切りに _ を使うことができる。(Numeric separators) これは PHP7.4以降 と同じですね。 ↓3桁以外の場所にも入れることができます。 バッククォートの中では、変数を展開することができる(→テンプレート文字列)。改行も普通にできる。 タグ付きテンプレート文字列。関数が呼び出せます。 includesで配列の中の値を検索できるようになった。 ようするに $.inArray、indexOf。PHP では in_array。 atメソッドが追加され、配列、文字列の最後にアクセスし易くなった。 アロー関数内の this は、アロー関数が作られた場所の this を指す。 …(スプレッド演算子)でリストの残りの値を変数に代入できる。 ?? PHPにもありますね。 ??= PHPにもありますね。 ||= falsy の場合に代入します。 &&= truthy の場合に代入します。 ?.(オプティカルチェーン) 参照先が null、undefined かを確認しないで、プロパティを取得したりメソッドを実行することができます。 PHP8.0 の「?->」ですね。 Symbol型 プライベートなアクセスに使えるようです。因みに、ES2022 でプライベートが使えるようになりました。 FetchAPI WEB から …

JavaScript の総復習 Read More »

JavaScript の Class について

Pichuクラス とそれを継承した Pikachuクラス を作成して確認しようと思います。 ↓下のコードのポイントです。 ①JavaScriptでクラス②継承③コンストラクタ・・・PHP の construct ではなく constructor なのです。④デフォルト引数⑤super・・・parent ではない。⑥this・・・this は PHP と同じですね。this-> ではなく this. です。⑦コンストラクタでプロパティの宣言・・・ゲッター、セッターと同じ名前はNGです。⑧ゲッター⑨セッター⑩メソッド・・・メソッド名の前に function はありません。⑪メソッド上書き コンソールログの実行結果です。 CLASS を別ファイルに書き出す ↑上で作成した javascript を別ファイルに書き出してみます。そのままファイルに書き出すだけではありません。また、scriptタグ で javascriptファイル を読み込んだのは昔の話です。 pichu.js ↑ポイントは1行目。クラスを書き出す場合、class の前に export を付けます。export を付けないと他のファイルから import することができません。 pikachu.js ↑ポイントは1行目。Pikachuクラス は Pichuクラス を継承するので、import で Pichuクラス を読み込む必要があります。 ↑ポイントは4行目。scriptタグ の type に module を指定することです。module を指定しないと、以下のエラーがでます。

JavaScript の querySelector について

↑気を付けておくところは「document.」を付けることです。無いとエラーになります。 querySelector はエレメントを1つ返します。 querySelectorAll は複数のエレメントを配列で返します。 querySelector と querySelectorAll のサンプルプログラムです。

Googleマップ 以外でJavaScriptで地図を操作するには?

こちらの HTML をコピー ブラウザで「map.html?lng=139.7649308&lat=35.6812405」にアクセスすると東京駅が表示されます。 地図を動かすと、中心のマーカーも動き、常に地図の中心を指すようにしています。これは moveイベント で、マーカーを地図の中心にセットしているからです。 次に↓下の部分に注目してください。地図移動後に、緯度経度を親のウィンドウに postMessage で伝えていています。 iframe で地図を表示して、地図移動後にイベントで緯度経度を取得します。 postMessage された緯度経度を、messageイベント で受け取り、テキストボックスに表示することができました。

Scroll to Top