こんにちは。前回に引き続き、JavaScriptでUIを実装する方法を紹介していきます。 要素のドラッグ ウェブアプリでよく使われるインタフェースのひとつ、ドラッグを実装してみます。ドラッグを使用するケースは幾つかありますが、今回は投稿用フォームをドラッグで移動できるようにするという使い方を想定してみます。 投稿フォームで入力する際、そのページのコンテンツを見ながら入力したいということはよくあります。フォームを好きな位置に移動できればそれが実現できます。 ドラッグの基本HTML <div class="js-drag" id="js-drag-1"> <form class="js-drag-form" onsubmit="return false;"> <textarea></textarea> <input class="submit" type="submit" value="送信"

週報 2024/04/28 川はただ流れている 4/20（土） 初期値依存性 さいきん土曜日は寝てばかり。平日で何か消耗しているらしい。やったことと言えば庭いじりと読書くらい。 ベランダの大改造をした。 サンドイッチ 一年前に引っ越してからこんな配置だったのだけど、さいきん鉢を増やしたら洗濯担当大臣の妻氏…

来年も作りたい！ふきのとう料理を満喫した　2024年春の記録 春は自炊が楽しい季節 1年の中で最も自炊が楽しい季節は春だと思う。スーパーの棚にやわらかな色合いの野菜が並ぶと自然とこころが弾む。 中でもときめくのは山菜だ。早いと2月下旬ごろから並び始めるそれは、タラの芽、ふきのとうと続き、桜の頃にはうるい、ウド、こ…

そういえばJavaScriptってリスト構造ないなー。と思って簡易リストクラスを書いてみました。 詳細は続きから。 このクラス(List)では、JavaScriptでリスト構造を扱うことを可能にします。Listクラスには次のようなメソッドがあります。なお、リスト要素の番号は1始まりです。 List.push(data) リストに要素をプッシュします。プッシュされた要素はリストの先頭に追加されます。 List.pop() リストから要素をポップします。リストの先頭要素を返し、その要素はリストから削除されます。 List.addBefore(n, data) n番目の要素の直後に新しい要素を追加します。 List.addAfter(n, data) n番目の要素の直前に新しい要素を追加します。 List.remove(n) n番目の要素を削除します。 List.get(n) n番目の要素を取得

JavaScriptが、いま注目を浴びている。 JavaScriptがこれだけの注目を浴びた理由の1つとして、Ajax技術の登場とも相まって、JavaScriptに対する確かな理解の必要性が高まったという事情は否定できない。しかし、それだけでは説明できない急速な注目の理由として、もう1つ、JavaScriptという言語そのものが持つユニークさが開発者の目を引いたという点は看過できないだろう。 もっとも、このユニークさは同時に、多くの開発者が感じているJavaScriptに対する苦手意識と同義でもある。これまでVisual BasicやC#、Javaといった言語でオブジェクト指向構文になじんできた開発者にとって、JavaScriptのオブジェクト指向構文はいかにも奇異なものに映るのだ。ようやくクラスという概念を理解した開発者が、JavaScriptという言語の背後にたびたび見え隠れする「プロ

JSON では、異なるドメインのサーバからデータを取得することができないません。　また、現在の URL かそのサブドメインからしかデータを取得することができません。　従って、同じサーバであっても、/ranking から /json の JSON データを取得することはできません。 このようなセキュリティポリシー問題を解消するために JSONP が用いられます。 クライアントサイド jQuery の $.ajax() や $.getJSON() で JSONP リクエストを作成する場合、URI パラメータは以下のような形式になります。 // getJSON() の場合 $.getJSON( '/json?callback=?', // URI {}, // クエリパラメータ function(json) { // コールバック関数 }); // ajax() の場合 $.ajax({ url