カテゴリ:JavaScript:記事一覧
このカテゴリの記事は、JavaScriptを使ったプログラミングについて、実際にやったことを中心に紹介します。
ラジオボタンがクリックされて値が変更されたとき、onchange属性を使うと関数を呼び出すことができる。しかし選択しを増やすのはコピペでいいが、関数名を変えるときはとても面倒。というかon属性が嫌い。そこでJavaScriptでラジオボタンの変更を捕捉して、値を取得する方法をお伝えします。
addEventListenerで登録したイベントリスナーの引数は、targetとcurrentTargetというプロパティを持っています。どちらもイベントに関連したDOM要素を指していますが、どのような要素を指しているのかすぐに忘れてしまうのでメモしておきます。
URL.createObjectURL()を実行した後、URL.revokeObjectURL()を実行する必要があります。という説明を見たのだけれど、理由がわからなかったので調べてみました。
今回はブラウザに画像ファイルをドラッグ&ドロップして、画像のリストを作成します。その後、リストから選択した画像をキャンバスに描画します。
今回はブラウザにテキストファイルをドラッグ&ドロップして、その内容を16進数で表示してみます。その際、大きなファイルを読み込んだときブラウザの動作を重くする可能性を考慮して、分割読み込みを実装してみます。
今回はブラウザにファイルをドロップしたときの制御をJavaScriptでおこなってみます。ドロップエリア外にファイルがドラッグされたら、ドロップを無効にします。
htmlはdata属性がサポートされています。この属性は、タグごとに任意のデータをセットできて、とても便利です。そこでここでは、JavaScript上でhtmlのdata属性を操作する方法をお伝えします。
JavaScriptでスライドパズルを作成しようということで始めた企画の3回目です。今回は、ピースをシャッフルする機能と、ピースが揃ったときの処理を追加します。また最後に全ソースを掲載します。
JavaScriptでスライドパズルを作成しようということで始めた企画の2回目です。今回は、パズルのピースの描画とクリックしたときの移動をアニメーションで表現します。
Canvasは、表示されているサイズと描画をおこなうエリアのサイズがことなります。そのため、ブラウザ上でクリックされた座標を求めるには一工夫必要です。
JavaScriptコード実行時、次のようなエラーで処理が止まることがあります。Firefox:『ReferenceError: can't access lexical declaration `・・・' before initialization』Google Chrome:『Uncaught ReferenceError: Cannot access '・・・' before initialization』これって何でしょうか?
ネットで調べてみると、ページ読み込み時のJavaScriptの実行タイミングは次のようになっているようだ。(1) 記述した順番に実行される(2) body内のスクリプトは、ブラウザ表示をブロックする。この二つについて、検証するためにコードを作成してみます。
div内のinput要素を一括で使用不可したい場合、次のコードで実現できます。document.querySelectorAll(div#id input).forEach( e => e.disabled = true );しかしinput要素にも個別にdisabledを設定していて、その状態を維持したいときは、上の方法では問題があります。そこでいくつかの方法を考えてみました。