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
スマフォwebページのスライドメニュー アプリでは当たり前のように実装されているスライドメニューですが、webページではなかなか使い心地のよいスライドメニューが実装されているのは見かけません。 スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきやスクロール制御のめんどくささからもうwebページでネイティブアプリ並のスライドメニューを実装するなんて無理と思っていました。 Facebookのwebページですらボタンの反応は悪いしアニメーションも動かないし最悪です。 一方Google先生はパーフェクトなスライドメニューを実装していた さすがGoogle先生! 俺達に出来ないことを( Googleのスライドメニューは以下の点でパーフェクトです。 スライドのアニメーションがとても滑らか・ちらつかない ボタンの反応にストレスを感じない メイ
スムーススクロール・タブ切り替え・ロールオーバー・アコーディオンなどといった、サイト制作時によく使われる機能をまとめて実装することができる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 でイベントハンドラを記述するという、とても古典的な方法でした。
event.preventDefault() 1.0追加 デモ event.preventDefault() 1.0追加 戻り値:undefined このメソッドが呼ばれると、通常実行されるアクションがキャンセルされます。 デモ 例えば、Aタグのリンクをクリックすれば通常は指定されたページに遷移しますが、その処理をキャンセルすることが出来ます。 また、event.isDefaultPrevented()を使用すれば、event.preventDefault()がイベント中に実行されているかどうかを調べる事が出来ます。 <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <!-- hrefにリンク先が指定されているので普通はこの
jQuery 2.0.1とjQuery 1.10.0が同時リリース。jQueryの2バージョン並行リリースが開始 jQueryは、モダンブラウザに最適化し、Internet Explorer 6/7/8のサポートを廃止したjQuery 2.x系と、過去のブラウザも幅広くサポートするjQuery 1.x系の2つのバージョンがあります。基本的には機能はどちらのバージョンも同じで、互換性があります。 この2バージョン体制になったのは、4月にjQuery 2.0の正式版がリリースされたときからです。今後jQuery 2.0にはjQuery 1.10が、jQuery 2.1にはjQuery 1.11が相互に対応するバージョンとしてペアでリリースされることが発表されていました。 そして5月24日付けで、初めてjQuery 2.x系とjQuery 1.x系の並行リリースが行われました。jQuery 2.
jQueryでidやnameを使って要素を選択しますが、選択した要素のタグを知る方法です。 以下のようにすればいいようです。 ●HTML側 <select id="hoge" name="hoge"> <option value="1"> hoge1</option> <option value="2"> hoge2</option> <option value="3"> hoge3</option> </select> <input type="button" onclick="return getTagName()" value="タグゲット"> ●JavaScript側 function getTagName(){ alert( $("#hoge")[0].nodeName ); } 実行結果は "SELECT" となります。 参考: javascript or JQuery でタグ
説明 一定時間後に処理を開始する「setTimeout」メソッドの処理を停止するメソッド。 「setTimeout」メソッドの設定で,「ID名=setTimeout(処理,時間設定)」としてID名を設定しておくと,そのID名を「clearTimeout」メソッドで指定することにより,指定したID名の「setTimeout」メソッドの処理を停止できる。 用例 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>clearTimeout
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く