JavaScript
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など処理が重くなり…
$(function (){ var $text_area = $('#text_area'); $text_area.attr('selectionEnd', 0); $text_area.attr('selectionStart', 0); $text_area.focus(); }) focus()を使うと、文末にキャレット(カーソル)が移動してしまうので、selectionEnd属性とselectio…
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>
どうやらjsdo.itからそのままはてなダイアリーに埋め込みができるようになったみたいですね。お絵かき - jsdo.it - share JavaScript, HTML5 and CSS これを作るにあたってのポイントは2つでした。第一に、ドラッグの実装。第二に、マウスの動きに合わせて線…
Google Maps API v3で入力した場所名あるいは住所から緯度経度を取得し、Twitter APIでその緯度経度を使ってタイムラインを検索するアプリを作ったので、その記録。実物はここで見れる。タイムライン場所検索 - jsdo.it - share JavaScript, HTML5 and CSSJa…
<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>
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 第2版作者: Shelley Powers,武舎広幸,武舎るみ出版社/メーカー: オライリージャパン発売日: 2009/11/30メディア: 大型本購入: 6人 クリック: 106回この商品を含むブログ (19件) を見る 現在、このテキストでJavaScriptの基礎をしっかり学…
結論から言うと、プロパティは以下の順番で値を探しに行きます。 ローカルプロパティ __proto__内のプロパティ(prototypeからセットされたプロパティ) __proto__.__proto__内のプロパティ __proto__.__proto__.__proto__・・・と続く undefined 以下の例で…
canvasはHTML5で新しく追加されるHTML要素で、canvas内にJavaScriptを使って図形を描画できる。Flashを使わないで済む。簡単な図形を描いてみた。
オブジェクトでプロパティの最後に「,」をつけると、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…
垂直方向も作ってみました。こちらの方が難しかった。jsdo.itでの更新がブログパーツの方にも反映されるようです。便利すぎ。
使い道はなさそうですが、いい練習になりました。これは、jsdo.itのブログパーツを少しいじって、はてなダイアリーに貼りつけられるようにしたものです。サイズは「465 * 555」がちょうどよさそうです。
初心者の拙者にとっては、理論的な話より、ハウトゥが具体的に書かれているものの方が役に立ちました。その結果、以下のような逆引きリファレンス的なテキストを重宝してます。(一方で、オライリーの本がホコリをカブってる…)Ruby on Rails 逆引きクイック…
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>
$(location).attr('href'); $(location).attr('href', 'http://www.google.co.jp'); // googleに移動
テーブル内のテキストを取得してグラフを描画する際に用いました。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>