JavaScript

`bin/webpack`を読んだ

webpackerを理解するため、rails g webpacker:installで追加されるbin/webpackや設定の中身を読むことにした。 bin/webpack newenv = { "NODE_PATH" => NODE_MODULES_PATH.shellescape } cmdline = ["yarn", "run", "webpack", "--", "--config", WEBPACK_CO…

一回だけのイベントをバインドする

$('#content').bind('blur keyup', function () { // ... $(this).unbind('keyup', arguments.callee); }); コールバック関数の最後で、unbindを使う。unbindされるコールバック関数は自分自身なので、arguments.calleeを指定する。 keyupなど処理が重くなり…

jQueryでテキストエリアのキャレットを先頭に移動する

$(function (){ var $text_area = $('#text_area'); $text_area.attr('selectionEnd', 0); $text_area.attr('selectionStart', 0); $text_area.focus(); }) focus()を使うと、文末にキャレット(カーソル)が移動してしまうので、selectionEnd属性とselectio…

jQueryでの選択解除

HTML <table> <tr> <td> <input type="radio" name="A" value="0" /> <input type="radio" name="B" value="1" /> <input type="radio" name="C" value="2" /> <input type="radio" name="D" value="3" /> </td> </tr> <tr> <td> <select> <option selected="selected" value="AAA">AAA</option> <option value="BBB">BBB</option></select></td></tr></table>

canvasでお絵かき

どうやらjsdo.itからそのままはてなダイアリーに埋め込みができるようになったみたいですね。お絵かき - jsdo.it - share JavaScript, HTML5 and CSS これを作るにあたってのポイントは2つでした。第一に、ドラッグの実装。第二に、マウスの動きに合わせて線…

Google Maps APIとTwitter APIのマッシュアップ

Google Maps API v3で入力した場所名あるいは住所から緯度経度を取得し、Twitter APIでその緯度経度を使ってタイムラインを検索するアプリを作ったので、その記録。実物はここで見れる。タイムライン場所検索 - jsdo.it - share JavaScript, HTML5 and CSSJa…

jQueryによるアコーディオンパネル

<ul> <li class="pref"><a href="#">miyagi</a></li> <li class="city"><a href="#">sendai</a></li> <li class="city"><a href="#">kesennuma</a></li> <li class="city"><a href="#">ishinomaki</a></li> <li class="city"><a href="#">onagawa</a></li> <li class="pref"><a href="#">iwate</a></li> <li class="city"><…</li></ul>

JavaScriptのループ文あれこれ

1. 典型的なfor文 for (var i = 0; i < array.length; i++) { statement } ループ開始前に「var i = 0」でループに使う変数を宣言する。ちなみに、「,」でつなげると、複数の変数を宣言できる。 「i 「i++」が各ループの最後に実行される。「i++」はiが0のと…

セレクトボックスの値を動的に設定する

select1の値が変更されると、select2の値がselect1と同じ値に変更される。セレクトボックスがたくさんあって入力が煩わしいインターフェイスを改善するときに、考えました。HTMLSelectElementのselectedIndexプロパティには選択されたoption要素の番号が入っ…

「初めてのJavaScript」は初心者向けじゃない!

初めてのJavaScript 第2版作者: Shelley Powers,武舎広幸,武舎るみ出版社/メーカー: オライリージャパン発売日: 2009/11/30メディア: 大型本購入: 6人 クリック: 106回この商品を含むブログ (19件) を見る 現在、このテキストでJavaScriptの基礎をしっかり学…

プロパティの参照順序について

結論から言うと、プロパティは以下の順番で値を探しに行きます。 ローカルプロパティ __proto__内のプロパティ(prototypeからセットされたプロパティ) __proto__.__proto__内のプロパティ __proto__.__proto__.__proto__・・・と続く undefined 以下の例で…

Canvasで図形を描画する

canvasはHTML5で新しく追加されるHTML要素で、canvas内にJavaScriptを使って図形を描画できる。Flashを使わないで済む。簡単な図形を描いてみた。

IEでよくあるバグ

オブジェクトでプロパティの最後に「,」をつけると、FFではよくてもIEでバグる。細かいから気づきにくい。Bad var options = { label: '合計', data: access_data, }: Good var options = { label: '合計', data: access_data }:

セレクタのリファクタリング

セレクタがごちゃごちゃするとき、以下のように書き換えると処理速度が向上するそうです。なるべくセレクタはシンプルにまとめて、find()を利用するといいそうです。Before $("tr td").remove(); $("tr:first", this).remove(); After $("tr").find("td").re…

jQueryでテーブルを垂直方向に分割する

垂直方向も作ってみました。こちらの方が難しかった。jsdo.itでの更新がブログパーツの方にも反映されるようです。便利すぎ。

jQueryでテーブルを水平方向に分割する

使い道はなさそうですが、いい練習になりました。これは、jsdo.itのブログパーツを少しいじって、はてなダイアリーに貼りつけられるようにしたものです。サイズは「465 * 555」がちょうどよさそうです。

わかりやすかったテキスト(Rails, jQuery編)

初心者の拙者にとっては、理論的な話より、ハウトゥが具体的に書かれているものの方が役に立ちました。その結果、以下のような逆引きリファレンス的なテキストを重宝してます。(一方で、オライリーの本がホコリをカブってる…)Ruby on Rails 逆引きクイック…

jQueryでchangeイベント内で変更後の値を取得する

HTML(セレクトボックス) <select id='date_year' name='year'> <option value='2005'>2005</option> <option value='2006'>2006</option> <option value='2007'>2007</option> <option value='2008'>2008</option> <option value='2009'>2009</option> <option value='2010'>2010</option> </select>

jQueryで現在のページのURLを取得する

$(location).attr('href'); $(location).attr('href', 'http://www.google.co.jp'); // googleに移動

jQueryで複数のテキストを取得する方法

テーブル内のテキストを取得してグラフを描画する際に用いました。HTML <table> <tr> <th>1月</th><td class='item'>10</td><td class='user'>3</td> <th>2月</th><td class='item'>5</td><td class='user'>1</td> <th>3月</th><td class='item'>20</td><td class='user'>4</td> <th>4月</th><td class='item'>30</td><td class='user'>6</td> <th>5月</th></tr></table>