innerHTMLの代わりにinsertAdjacentHTML()を使ってみようか。（DOMおれおれAdvent Calendar 2015 – 01日目） | Ginpen.com
DOMおれおれAdvent Calendar 2015 – 01日目 HTML文字列からががーっと生成する場合は el.innerHTML=htmlText と書くのが普通だと思うんですが、 insertAdjacentHTML() というAPIもあります。 var el = document.querySelector('div#out'); var html = '<b>BOLD</b>'; var position = 'afterbegin'; el.insertAdjacentHTML(position, html); // -> <div><b>BOLD</b></div> "position" はHTML文字列を挿入する位置を指定します。以下のいずれかです。 "beforebegin" "afterbegin" "beforeend" "afterend" それぞれ開始タグの
よく使う括弧の名前（日本語、英語）を調べてみたよ。ブラケット、ブレースとか。 | Ginpen.com
その他 括弧全般を指す場合はBracketと呼ぶみたい 上記以外にも呼び方の種類は多い、特に英語 鍵括弧 「 」 はCJK(中日韓)で利用される かつて日本の数学では ( ), { }, [ ] の順に小、中、大括弧と呼ばれていたが、今はそうでもないらしい 世界的には ( ), [ ], { } の順に小、中、大が用いらる場合が多いらしい というか初期以外は丸括弧 ( ) の入れ子で全部表現するようになるよね 一般に使われる山括弧 < > は、実は括弧ではなく数学の大小記号 本来の山括弧 〈 〉 は角度が浅い形をしたもの（フォント）が多そう。たぶん 英語WikipediaでもHTMLタグの山括弧をAngle bracketsと記述しているので、別に混同しても問題なさげ 例: ” tags enclosed in angle brackets (like <html>)” 出典 Bracke
全世界で最も多く利用されているCSSプロパティを発表します。ぱんぱかぱーん！（CSS Property Advent Calendar 2013 – 03日目） | Ginpen.com
元ネタ Googleが出している統計を利用しています。 Chromium Dashboard 自動収集される膨大な情報を即時解析し、直近二十四時間分のCSSプロパティ利用統計を見せてくれる。 Google Chromeには使用統計を自動的に送信する仕組みが組み込まれています。 「設定＞機能＞詳細設定を表示…＞プライバシー＞使用統計データや障害レポートを自動的に Google に送信する」がそれです。たぶん。 で、この機能で送信されてきた統計情報のうち、CSSプロパティの利用状況についての情報が上記のものです。あ、なのでたぶんページ単位ではなく閲覧単位です。よく見られるページで利用されていれば使用率は上がる事でしょう。いずれにしろ人気度という観点で問題ないと考えています。 ちなみにCSS以外の統計情報もありそうなんですが、本記事執筆時点ではまだ公開されていないようです。 第1位はwidth、
お寿司屋さんでバナナの天ぷらを食べてきたよ。（寿司 Advent Calendar 2013 – 2日目） | Ginpen.com
寿司 Advent Calendar 2013 – 2日目 先日のHTML5 Conferenceでのセッションが大盛況となった谷拓樹さんと一緒に前々から気になっていた、道玄坂すし台所家 渋谷本店の変わりメニュー、バナナの天ぷらを頂いてきました。 大通りにも面していて入りやすく、店員さんの愛想も良いお店です。 寿司ィ 海鮮ェン まずは普通に海鮮丼を頂きます。普段はただの回転寿司屋さんなのですが、お昼時はこういうメニューも出しているようです。 見るからに美味しそう。汁物付きでした。 さてお寿司の方も重ねて頂こうかなと回転レーンに目を向けると。 澄ました顔して流れてきました。 ベァナーナ ノゥ テンプゥーラ 注文すると奥へ声をかける様子が見て取れました。今揚げてくださるのですね！ サクサクだ！ 初見。チョコレートソース付きです。 断面から覗くのはたしかにバナナ。 ホイップクリームを付けて頂きま
Dashを入れてみたらjQueryやらのドキュメントを見るのが想像以上に快適だったよ。 | Ginpen.com
自分も正直「え、別にブラウザーで見れば良いじゃん？」と思ってたんだけど、想像以上に快適だったので、皆さんにもお薦めしておきますよ。 なにそれ？ jQueryやBackbone.js、HTMLにCSS、あるいはRubyやJava、PHPといったもののドキュメントを閲覧するソフトウェアですよ。 事前にダウンロードしておくのでさくさくだし、検索が簡単だから欲しい情報がすぐ手に入るし、グローバルキーボードショートカットなんか設定しておくと一瞬で検索開始できるからお手軽です。 ウェブブラウザーのブックマークから開いて見れば良いじゃん、てな人も一度使ってみてくださいな。 インストールも簡単です。 検索してみたところ。 公式サイト Dash – Documentation Browser, Snippet Manager – Kapeli インストール App Storeからインストールします。公式サイ
CSSだけで円を描く方法と、それを使った閉じるボタンの例。（CSS おれおれ Advent Calendar 2012 – 02日目） | Ginpen.com
CSS おれおれ Advent Calendar 2012 – 02日目 円を描く前に、角丸の話をしましょう。というか、角丸の丸をめっちゃ丸くしたのが円です。（ネタバレ） 角丸 border-radius
jQueryが要素検索に使うSizzleについて。 | Ginpen.com
jQueryの強力な機能のひとつに、 $('#the-target') のようにCSSのセレクターを用いて要素検索できるというものがあります。この要素検索を行うモジュールにはSizzleという名前が付けられています。 一方、近代的なブラウザーには .querySelectorAll() がネイティブで実装されています。こちらもCSSのセレクターで要素検索できるメソッドです。 セレクタを使用した DOM 要素の指定 | Mozilla Developer Network var $elems = $('elem#id.class, .and.more.selectors'); var elems = document.querySelectorAll('elem#id.class, .and.more.selectors'); JavaScriptで何かするよりも、ネイティブでやった方が高速
Ginpen.com | Powered by JavaScript and JapaneseSushi
JavaScript and Web by Ginpei
jQueryでフォームの値を取得する方法をまとめておくので、コピペでご利用ください。 | Ginpen.com
必要ならどうぞ。 デモ jQueryでフォームの値を取得する方法をまとめ – jsdo.it – Share JavaScript, HTML5 and CSS jQueryでフォームの値を取得する方法をまとめ – jsdo.it – share JavaScript, HTML5 and CSS 共通：要素の探し方 input要素なんかにid振っちゃうのが一番なんだけど、属性セレクターを使うと楽な場合があります。つまり[name=xxx]で検索するやり方。 <form id="my-form"> <input type="text" name="my-text" value="This is text." /> </form>
JavaScriptをもっと上達したい人へのヒント（JavaScript おれおれ Advent Calendar 2011 – 24日目） | Ginpen.com
JavaScript おれおれ Advent Calendar 2011 – 24日目 JavaScriptを書くプログラマーさんでも、JavaScriptも書くデザイナーさんでも。 いっぱい書く とにかく書く事です。何でもいいです。作りたいものがあれば作ってもいいし、面白そうなものを見かけたら真似してみましょう。 ライブラリーやフレームワークは躊躇なく使う 簡単に書けるならそれに越した事はありません。どんどん使いましょう。そもそも便利なライブラリーを習得する事だって大切です。 分かりやすいと最近評判の本ですね。プログラミングの知識が全く無い状態の読者を想定しているそうです。 「Webデザイナーのための jQuery入門」という本を書きました – Takazudo hamalog で、私が書いた本の話に戻りますが、「Webデザイナーのための jQuery入門」は、読者が、プログラミングの知
関数使って豪華な置換（JavaScript おれおれ Advent Calendar 2011 – 21日目） | Ginpen.com
JavaScript おれおれ Advent Calendar 2011 – 21日目 文字列を置換するやつあるじゃないですか。 .replace()ってやつ。あれ、第1匹数も第2引数も普通の文字列を渡したりしますけど、第1匹数には正規表現を渡す事ができるんですよ。あと第2引数には関数を渡す事だってできるんです。 アンダースコアで連結された名前をキャメルケースに置換 var result = "hoge_fuga_123".replace( /_./g, function(matched, /* m1, m2, ..., */ offset, original) { return matched.charAt(1).toUpperCase(); }); console.log(result); // => "hogeFuga123" matchedはマッチした文字列、offsetはその位置
JavaScriptの型は6種類だけど大きく分けた2種類を絶対に覚えておくべき（JavaScript おれおれ Advent Calendar 2011 – 20日目） | Ginpen.com
JavaScript おれおれ Advent Calendar 2011 – 20日目 これだけ。 undefined null boolean number string object 配列とか日付とかは、全部オブジェクトの一種です。 さらにこれらもobjectとそれ以外でも分かれていて、objectじゃない方をプリミティブ型と呼びます。 （※primitive … （形）原始的な、根本的な） null以外の型を調べるにはtypeof演算子を利用します。 console.log(typeof undefined); // => "undefined" console.log(typeof null); // => "object" // "null"じゃない！ console.log(typeof true); // => "boolean" console.log(typeof 1);
jQuery.gpKey 0.1を公開しました。 | Ginpen.com
はいこちら。 jQuery.gpKeyでキー操作が楽々に。 向こうのページにも書いてますが、 任意の要素単位で管理 親しみやすい記述でキーを割り当て の2点が特徴で、ウェブアプリで機能を実現するためのメタ的な機能を提供します。 あんまり需要ないかなーとは思わないでもないですが、自分で欲しかったので。 色々考え中でまだガラッと仕様変更になるかもしれません。とりあえずバージョンも0.1にしときました。数字キーとShiftキーの組み合わせと、あと記号キーの扱いをどうしようかなあと思案中。記号キーはkeyCodeがバラバラで……USキーボードなんていうものもあるし……。
コードAとBを一瞬で切り替える複数行コメントの書き方（JavaScript おれおれ Advent Calendar 2011 – 18日目） | Ginpen.com
1行目を書き換えて、スラッシュ/をひとつ消したり加えたりするだけです。 ひとつ目のコードでは1行目と3行目から5行目がコメントになります。 ふたつ目のコードでは1行目から3行目と5行目がコメントになります。 コード整形のSyntaxHighlighterがうまく解釈してくれなくて、コメント色になってませんが……。
.apply()を駆使してスルー力を極めろ（JavaScript おれおれ Advent Calendar 2011 – 16日目） | Ginpen.com
JavaScript おれおれ Advent Calendar 2011 – 16日目 （※「スルー力」は「するーか」じゃなくて「するーりょく」です。） .apply()を使って他の関数を実行できる事は昨日示しました。 これを応用して、メソッドが呼ばれた際にそのままスルーして、別のメソッドが呼ばれたかのように振る舞う事ができます。
0.1+0.2は0.3になりません（JavaScript おれおれ Advent Calendar 2011 – 13日目） | Ginpen.com
なんでかというと、現代のコンピューターの性質で、数値を2進数、つまり2の階乗の和で表現しようとするためです。 例えば0.5は簡単ですね。2-1です。また0.25は2-2ですから、0.75は2-1+2-2という事になります。 ちなみにJavaScriptで階乗を扱う場合はMath.pow()です。 console.log(Math.pow(2, -1)); // => 0.5 console.log(Math.pow(2, -2)); // => 0.25 console.log(Math.pow(2, -1) + Math.pow(2, -2)); // => 0.75
5種類の .length（JavaScript おれおれ Advent Calendar 2011 – 11日目） | Ginpen.com
JavaScript おれおれ Advent Calendar 2011 – 11日目 オブジェクトによりちょっとずつ意味が違います。 配列 文字列 関数 引数 一般 配列の .length これはご存知ですよね？ 一般に .lengthといえばこれです。 配列の要素数を得られます。また設定する事もできます。 配列の .lengthは代入できる（JavaScript おれおれ Advent Calendar 2011 – 10日目） 文字列の .length 文字列の長さを得られます。バイト数ではなく（Unicodeでの）文字数である点に注意してください。 例えば「あ」等日本語はしばしば「2バイト文字」という表現が用いられてきましたが、Unicodeではあくまで「1文字」と数えます。（ちなみに3バイトだったり4バイトだったりするみたいです。） また、JavaScriptの文字列は不変である
任意の倍数に丸める（JavaScript おれおれ Advent Calendar 2011 – 9日目） | Ginpen.com
JavaScript おれおれ Advent Calendar 2011 – 9日目 例えばドラッグ＆ドロップで移動して、移動先の座標を25px単位にしたい、とか。 要は単位数の整数倍になればいいので、何倍か（係数）を調べて、それを整数化し、単位数で乗じれば、ぴったり倍数になります。 var source = 123; // 元の値 var unit = 25; // 単位 var result = Math.trunc(source / unit) * unit; // 結果 => 100 console.log(source, "→", result);
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MD-Notes | Ginpen.com
JavaScriptをもっと上達したい人へ、最後のヒント | Ginpen.com