カテゴリ：JavaScript：記事一覧

JavaScriptでスライドパズルを作成しようということで始めた企画の2回目です。今回は、パズルのピースの描画とクリックしたときの移動をアニメーションで表現します。

PHPやをJavaScript使ったプログラミングについて、実際にやったことを中心に紹介します。

Canvasは、表示されているサイズと描画をおこなうエリアのサイズがことなります。そのため、ブラウザ上でクリックされた座標を求めるには一工夫必要です。

JavaScriptコード実行時、次のようなエラーで処理が止まることがあります。Firefox:『ReferenceError: can't access lexical declaration `・・・' before initialization』Google Chrome:『Uncaught ReferenceError: Cannot access '・・・' before initialization』これって何でしょうか？

ネットで調べてみると、ページ読み込み時のJavaScriptの実行タイミングは次のようになっているようだ。(1) 記述した順番に実行される(2) body内のスクリプトは、ブラウザ表示をブロックする。この二つについて、検証するためにコードを作成してみます。

JavaScriptでコールバックに関数を指定すると実行されてしまう理由を整理してみる。

div内のinput要素を一括で使用不可したい場合、次のコードで実現できます。document.querySelectorAll(div#id input).forEach( e => e.disabled = true );しかしinput要素にも個別にdisabledを設定していて、その状態を維持したいときは、上の方法では問題があります。そこでいくつかの方法を考えてみました。

文字列でXMLデータを保持しているとき、内容を確認するなら文字列を検索するよりも、一度オブジェクトに変換したほうが利用しやすいです。そこで今回は、XMLテキストをオブジェクトに変換する方法をお伝えします。

ブラウザ上でサーバーからXMLデータをダウンロードして、値を取り出す方法を３つ紹介します。今回はネイティブなJavaScriptだけでなくjQueryもとりあげます。

このサイトでは、サンプルコードを掲載している記事が多いです。時々、サンプルコードに行番号を付与した方がいいのではないかと思う時があります。そこでpreやdiv内に行番号を付与する方法をお伝えします。

JavaScriptでプログラムを作成していると、配列や連想配列を使うことって多いですね。僕の場合、入れた順番で取り出したいことがあります。しかし思ったようにいかず、悩むこともしばしば…そこで、配列や連想配列内の要素の並び方を調べてみました。また、Mapオブジェクトを使った連想配列の代替案をお伝えします。

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

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

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

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

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