カテゴリ：JavaScript：記事一覧

html内で次のようにスクリプトをasync属性で呼び出すと、非同期で読み込まれる。 <script async src="https://xxxx.com/script"></script> 非同期で読み込まれることで、ブラウザのファーストビューのレンダリングが高速化されるというメリットがある。 しかしasync属性で呼び出したスクリプトは、DOMContentLoadedイベントを捕捉できるときと、できないときがある。非常に対処に困る事例なので、対処法を考えてみた。

プログラムでとても重要なのがデバッグです。JavaScriptも例外ではありません。そこで今回は、JavaScriptでの基本的なデバッグ方法をお伝えします。

htmlなどのテキストファイルをそのままの形で読み込んできて、正規表現で検索したらハマったのでメモ。

JavaScriptで今日の日付を取得してフォーマットする方法と、サンプルです。

予約語とは何らかの意味を持っているキーワードです。そのため変数名や関数名などの識別子として使用できません。そこで、どんなキーワードが予約後なのかどんなケースで使用できないのかどんなケースで使用できるのかという点についてお伝えします。

JavaScriptはオーバーロードという機能を持っていません。しかし先達たちは、様々な方法で疑似的なオーバーロードを実現しているようです。そこで僕も、自分なりに疑似的なオーバーロードを実装してみます。

JavaScriptのCanvasAPIを利用すると、canvas要素に描画をおこなうことができます。CanvasAPIの使い方と、利用できるメソッドについてまとめてみました。

JavaScriptでCanvasに描画していたら、SecurityErrorが出ました。原因を調べてみました。

JavaScriptでサーバー上にある画像を読み込んで、Canvas要素上に貼り付ける方法をお伝えします。

JavaScriptのCanvasAPIで描画をするとき、頻繁に使用するパスはPath2Dを使用すると何度でも使いまわすことができます。アニメーションなどを表現するなら、とても便利な機能です。そこで今回は、Path2Dについてお伝えします。

JavaScriptのCanvasAPI にisPointInPath()というメソッドがあります。パス内に指定した座標が含まれているかどうか確認するメソッドですが、どんなケースで使用するのか不明でした。そこで自分なりに使用目的を考えてみたところ、ブラウザ用で図形の内側がクリックされたかどうかの確認できると思いいたりました。そこでデモとして、クリックした図形を塗りつぶすJavaScriptコードを作成しました。

画像が読み込めないときにダミー画像を表示したかったので、JavaScriptでコードを作成してみました。

今回はURLで指定された画像を読み込むJavaScriptコードを作成してみます。読み込みエラー時の処理も、しっかりと作りこみます。

htmlのCanvas要素をJavaScrptで動的に追加すると、うまく表示してくれないことがあります。その原因の一つが、タグ上とcss上のサイズ指定の動作が異なるという点です。理解すれば単純なことですが、理解せずにCanvasを使用するとハマります。

Canvas APIは画像描画時に globalCompositeOperationを使用すると、元からある画像との合成方法を指定することができます。ここでは、globalCompositeOperationに指定できる値と結果を一覧にしてお伝えします。

JavaScriptのCanvas APIでグラデーションの塗りつぶしができますが、少しクセがあります。大いに悩む点なので、まとめてみました。