PHP/JavaScriptの記事一覧
今回はブラウザにファイルをドロップしたときの制御をJavaScriptでおこなってみます。ドロップエリア外にファイルがドラッグされたら、ドロップを無効にします。
JavaScriptでDOM要素を操作する場合、addEventListener()メソッドを使用します。このメソッドの第三引数にtrueをセットしているコードをよく目にします。しかしtrueでもfalseでも同じように動作するので、どんな意味があるのかわからない人も多いのではないでしょうか。そこで今回は、addEventListener()メソッドの第三引数についてお伝えします。
JavaScriptのasyncとawaitというキーワードは、非同期処理を簡潔に記述することができます。しかしプログラムの流れを変えてしまう面もあり、理解するのが難しい機能でもあります。そこで今回はコード上での流れを中心に、asyncとawaitについて解説します。
htmlはdata属性がサポートされています。この属性は、タグごとに任意のデータをセットできて、とても便利です。そこでここでは、JavaScript上でhtmlのdata属性を操作する方法をお伝えします。
JavaScriptでスライドパズルを作成しようということで始めた企画の3回目です。今回は、ピースをシャッフルする機能と、ピースが揃ったときの処理を追加します。また最後に全ソースを掲載します。
JavaScriptでスライドパズルを作成しようということで始めた企画の2回目です。今回は、パズルのピースの描画とクリックしたときの移動をアニメーションで表現します。
Canvasは、表示されているサイズと描画をおこなうエリアのサイズがことなります。そのため、ブラウザ上でクリックされた座標を求めるには一工夫必要です。
54は5を4回掛け算したもので、累乗とよびます。そして4回の部分が、マイナスや分数など自然数以外にも範囲を広げたものをべき乗と呼ぶそうです。累乗なら繰り返し掛け算すれば計算できますが、べき乗は難しそうです。そこで、JavaScriptでべき乗を計算する方法をお伝えします。
JavaScriptで偶数奇数判定をおこなおうとしたら、組み込み関数が存在していませんでした。そこで独自に偶数奇数判定をおこなう関数を作成してみます。
JavaScriptコード実行時、次のようなエラーで処理が止まることがあります。Firefox:『ReferenceError: can't access lexical declaration `・・・' before initialization』Google Chrome:『Uncaught ReferenceError: Cannot access '・・・' before initialization』これって何でしょうか？
div内のinput要素を一括で使用不可したい場合、次のコードで実現できます。document.querySelectorAll(div#id input).forEach( e => e.disabled = true );しかしinput要素にも個別にdisabledを設定していて、その状態を維持したいときは、上の方法では問題があります。そこでいくつかの方法を考えてみました。
文字列でXMLデータを保持しているとき、内容を確認するなら文字列を検索するよりも、一度オブジェクトに変換したほうが利用しやすいです。そこで今回は、XMLテキストをオブジェクトに変換する方法をお伝えします。
ブラウザ上でサーバーからXMLデータをダウンロードして、値を取り出す方法を３つ紹介します。今回はネイティブなJavaScriptだけでなくjQueryもとりあげます。
このサイトでは、サンプルコードを掲載している記事が多いです。時々、サンプルコードに行番号を付与した方がいいのではないかと思う時があります。そこでpreやdiv内に行番号を付与する方法をお伝えします。
