NSEG 第 40 回勉強会で、mebius こと砂原昌史さんが発表でお使いになったスライドを代理でアップロードしました。
{"is_any_tile":false,"sources":[{"source":"bmc_bonus_type","table_games":false,"bonus_types":false,"game_providers":false,"slots":false,"live_games":false,"is_live_dealer":false,"payment_methods":false,"sport_types":false,"live_streaming":false,"cash_out":false}]} ウェルカムボーナス {"is_any_tile":false,"sources":[{"source":"bmc_bonus_type","table_games":false,"bonus_types":false,"game_providers":false,"sl
セレクタが便利そうなので、jqueryを使ってみました。 elementを選択するには、 id : $("#idname") class : $(".classname") tag : $("tagname") なんてのが使える 他にも便利なセレクタがありますが、名前でも選択が可能です。 以下のように書けばいいです。 $("*[name=target]") これって・・・「name」属性が"target"のものを取得するということになります。 てことは、別に、nameじゃなくても、idでも、classでも、hrefでもlangとかでも出来るらしい。 って、ただ単に、cssの セレクタ の記述方法だけど(笑) 正規表現でマッチとかもそのうちできたらいいのになぁ~ ...cssが対応すれば出来るかも?? 先は長そうな気がする(笑)
JavaScript Advent Calendar 2011 (フレームワークコース) の9日目です。 せっかくの機会だったので、ものすごく気になってたけど、触る機会がなかった、Underscore.jsをいろいろと弄ってみました。 配列関係の便利メソッドの集合ライブラリなイメージでしたが、タイマーやユーティリティ関数、条件判断関数など、いろいろ機能があって面白いですね。 とりあえず、ひと通り実行しながら、すべての関数を触ってみました。 非常に見難くて恐縮ですが、以下のGoogleスプレッドシートにいろいろとメモを取っていったので、参考にしてください。 間違いなどあるかもしれませんし、自分自身理解しきっていないため説明がおかしい箇所があるかもしれません。 その際はご指摘いただけると助かります。超めんどくさかったので、自主的なアップデートは、たぶん、しません... リンク先: Unders
JavaScriptで毎回forループ書くのは面倒だし、そのためだけにライブラリ使うのもなぁという状態の時についこんなこんな感じの実装をしたりしてしまいます。 でこれだとbreakが出来ないので他のライブラリではどうやっているのかなぁと思ってみたので調べてみました。 ECMAScript5のforEach 下記のような実装になっているためbreakは出来ないです https://developer.mozilla.org/ja/JavaScript/Reference/Global_Objects/Array/forEach someでそのようなことは実装出来るのでそちらを使えということなのかな https://developer.mozilla.org/ja/JavaScript/Reference/Global_Objects/Array/some jQueryのeach ソースを見て
スマフォwebページのスライドメニュー アプリでは当たり前のように実装されているスライドメニューですが、webページではなかなか使い心地のよいスライドメニューが実装されているのは見かけません。 スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきやスクロール制御のめんどくささからもうwebページでネイティブアプリ並のスライドメニューを実装するなんて無理と思っていました。 Facebookのwebページですらボタンの反応は悪いしアニメーションも動かないし最悪です。 一方Google先生はパーフェクトなスライドメニューを実装していた さすがGoogle先生! 俺達に出来ないことを( Googleのスライドメニューは以下の点でパーフェクトです。 スライドのアニメーションがとても滑らか・ちらつかない ボタンの反応にストレスを感じない メイ
jQueryの$(this)とthisの違い jQueryのイベントハンドラやコールバック関数内のthisについてです。 大した内容でもありませんが、なんとなく知らないまま使っている人もいるみたいなので、ちょっとメモ書き。 $(this)とthisの違い thisはDOMエレメントです。 イベントハンドラのthisはそのイベントが発生した要素、eachのコールバック関数内のthisは順番の回ってきた該当する要素です。 一方$(this)の方はと言うと、この要素を$関数に渡して、単にjQueryオブジェクト化しているだけなんですね。 使い分け という事で、使い分けは、 DOMエレメントのプロパティやメソッドを使うときはthis jQueryオブジェクトのメソッドを使いたいときは$(this) ということになります。 例えば a要素のhref属性を取ってきて何か処理を書こうと思ったとき、 何も
JavaScriptにおける(変な)数値と文字列の相互変換の方法のまとめ。 使い古されたものばかりなので、かなり既出。 基本の方法だけ使ったほうが、安全かつ美しいコードが書けるのでトリビア扱いで。 数値→整数編 ビット演算は符号付き32bit整数として扱われることを利用したテクニック。 一歩間違うと小数の誤差やらオーバーフローにはまってしまう、諸刃の刃。 //基本 Math.floor(n); //-1とAND n&-1; -1&n; //0とOR n|0; 0|n; //0とXOR n^0; 0^n; //0回シフト n>>0; n<<0; //2回補数を取る(=もとに戻るので整数化の効果のみ残る) ~~n; 文字列→数値編 算術演算を行い、演算子の前後の項が数値であるという仮定から数値化するテクニック。 //基本 Number(str); parseFloat(str); //0を引く
●任意の文字に一致 書式:/文字/ 例1:"abcdefg".match(/a/) 結果:a 例2:"abcdefg".match(/cde/) 結果:cde 例2:"abcdefg".match(/xyz/) 結果:null ●改行文字を除く任意の1文字にマッチ 書式:/.文字/ 例1:"abcdefg".match(/.f/) 結果:ef ●複数個の文字にマッチ 書式:/../ (.はマッチする個数並べる) 例1:"abcdefg".match(/.f/) 結果:ef ●指定文字のいずれかにマッチ 書式:/[任意文字]/ 例1:"abcdefg".match(/[ahg]/) 結果:a ●指定文字以外のいずれかにマッチ 書式:/[^任意文字]/ 例1:"abcdefg".match(/[^ahg]/) 結果:b ●複数の文字列のいずれかにマッチ 書式:/任意文字列|任意文字列|...|
スムーススクロール・タブ切り替え・ロールオーバー・アコーディオンなどといった、サイト制作時によく使われる機能をまとめて実装することができるjQueryプラグインのまとめです。 予め使用する機能がはっきりわかっていれば、こういった便利なものを使用することでファイルの散乱も防げますし、管理もしやすくなりますね。 紹介するプラグインの中には必要な機能だけを選択してダウンロードできたりもします。 yuga.js web制作を優雅にするために作られたjQueryプラグインで、7種類の機能が実装されています。 ライセンスはMIT Licenseで、ライセンスに従う限り許可なく自由に使用できるそうです。 機能 ロールオーバー 現在のページをハイライト表示 外部リンクを別ウインドウで開く 画像をthickboxで表示(thickbox.jsを使用) スムーススクロール タブ機能 CSS3の擬似クラスをクラ
<script type="text/javascript"> /* イベントの型を取得 */ function getEventType(event){ var frmObj=document.frmevent; frmObj.elements["txt"].value=event.type; } </script> <form action="#" name="frmevent"> <p><input type="text" onFocus="getEventType(event)" /></p> <p><input type="checkbox" onclick="getEventType(event)" /></p> <p><select onchange="getEventType(event)"> <option value="">▼選択してください</option> <opt
attr()でdisableをどうこうするばあいは、 true or falseで設定します。 (かなり古いバージョンのjQueryはこの記事通りですが) また前の人が指摘している通り、 1.6でprop()にかわり、1.6.1で後方互換が導入され、どちらでも使えるようになりました。
ここではオブジェクトに対してプライベートな変数を設ける方法と、クラスに対してプライベートな変数を設ける方法を紹介します。JavaScript第5版のP.197-198を見て少し勉強しました。javascriptのプライベート変数というと、varというキーワードを思い浮かべるかもしれません。しかしvarキーワードで宣言したプロパティの値は、varキーワードを囲っている関数の実行が終わった後は破棄されてしまいます。だからといって、varキーワードが無ければ、グローバルオブジェクトとなり、外部から誰でも参照できるようになってしまいます。特定のプロパティを外部から参照されたくない、なおかつ値も保持しておきたい。そんな場合に以下のようなテクニックが必要となります。 JavaScript 第5版 作者: David Flanagan,村上列出版社/メーカー: オライリー・ジャパン発売日: 2007/0
JavaScript では、以下のように記述すると参照が代入されるだけで、実体は同一アドレスをさす。 C 言語と似たようなものである。 [HTML / javascript]var src = ["A", "B", 1, 2]; var copied = src; src[0] = 0; copied[1] = 0; alert(src); // 0,0,1,2 alert(copied); // 0,0,1,2 以下に、参照ではなく、実体もコピーするサンプルスクリプトを示す。 Array.concat を使用する方法 Array.concat は配列に要素を追加した配列を返すものであるが、要素を追加しなければ 元々の配列のコピーが返されるので、それを利用する [HTML / javascript]var src = ["A", "B", 1, 2]; // 何も要素を追加しなければ、元の
ブログ用のテーマを修正する時に、RequireJSの使い方を調べたので、メモ。 いろいろ使い方があるけど、今回は、リソース取得の制御と、jQueryモジュールの読み込む場合がメイン。 require.jsは、バージョン2.1.4を使用。古いバージョンと、2系でライブラリ依存周りの指定が変わっているようなので、注意。 呼び出し側の設定 require.jsのパスに合わせて、定義。require.js自体をCDN参照にしたい場合は、読み込み失敗時のフォールバックを含めて、指定した方がいいと思う。 <script data-main="/assets/js/main.nocdn" src="/assets/js/require.min.js"></script> require.jsでの設定 main.cdnの実装は下記のような感じにする。 設定方針は、下記。 CDN経由で取得できる場合は、そち
解説 jQueryのイベントシステムは W3Cの規格に基づいて実装されています。 イベントオブジェクトは、イベントハンドラの引数として渡されます。 イベント発生時には、イベントの種別や環境によって、さまざまな名称や状態でイベントオブジェクトが渡されます。 jQuery はこの違いを吸収し、イベントオブジェクトに対する統一されたインターフェースを提供します。 また、ネイティブイベントのほとんどのプロパティはマージされますので、それを使用することもできます。 jQuery のイベントオブジェクトを生成し、使用する例は、jQuery.Event(src) を参照してください。 イベントオブジェクトが持つプロパティとメソッドは次の通りです。 プロパティ currentTarget : イベントのバブリングフェーズにおける現在のDOM要素 data : バインド時に渡されたデータ pageX : イ
先日公開した「投稿スラッグ(Post slug)が空白なら警告してくれるWordPress用Greasemonkeyスクリプト」を開発しているときに、JavaScriptでのイベントのキャンセルまわりで見事にハマってしまいました。そのときに調べてわかったことをまとめてみようと思います。(間違いがあれば是非ご指摘ください!) やりたかったこと WordPressの投稿画面で「公開(Publish)」ボタンをクリックしたときに、「投稿スラッグ(Post slug)」のテキストボックスに値が入っていなければ、確認ダイアログを出す。そこで「キャンセル」ボタンが押されたら、フォームの submit を中止する。 最初に思いついた方法 まず頭に浮かんだのは、submit ボタンに対して HTML でイベントハンドラを記述するという、とても古典的な方法でした。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く