-もはや入力チェックやアラートダイアログを出すだけの存在ではない! #content *React [#v5f7464a] -Virtual DOM -コンポーネント中心。MVCのV担当でJSの中にHTMLを記載できる。 -JSではタグが扱えないので事前にコンパイルするか、実行直前に変換する。 -PHPのようにRenderでHTMLの一部を返すような仕組み。 **Redux [#j6f4b75d] -状態やそれに対応するActionなどを管理するフレームワーク **参考サイト [#r89c3817] -https://qiita.com/tomzoh/items/7fabe7cb57dd96425867 *Chromeでデバッグ [#ed472737] https://app.codegrid.net/entry/breakpoint-1 *クラスの定義 [#a0113691] // この一文でprototypeプロパティが使えるようになる function Foo() {}; // ここで定義を代入。 Foo.prototype = { init:function() { alert('A');}, test:function() { alert('B');} }; // newして使う必要があるのか・・・ var foo = new Foo(); foo.init(); function Foo() {}; Foo.prototype = { init:function() { alert('A');}, test:function() { alert('B');} }; Foo.A = function() { alert('A is static'); } Foo.B = function() { alert('B is static'); } // newして使う必要があるのか・・・ var foo = new Foo(); foo.init(); // prototypeをはさまないとそのまま実行可能! Foo.A(); Foo.B(); *便利なライブラリ [#b33761a8] **Prototype.js [#n312497a] 一昔前の主流 **JQuery [#yd9d8996] 2009年現在はこちらのほうがよろしいらしい。 http://www.slideshare.net/hayatomizuno/jquery-7665168 ***プラグインの作り方 [#nd6af0df] http://web-terminal.blogspot.jp/2012/11/jquery4.html ***onLoadで動かす。 [#k014610b] $(function () { alert('test'); }); ***タイマーを仕込む [#udf36952] setInterval(function(){ alert('test'); },10000); ***指定の要素の数をカウントする。 [#m8797115] if ($('#探したい場所のID .その配下のクラス').length > 0) { alert('test'); } **関数が定義されているかをチェックする [#d37a9ff9] alert(typeof($.cookies.set)); 定義されていればobjectとでる。 **Jqueryのセレクタ [#p1395bd3] -LI要素 $('li') -LI要素かつクラス名hoge $('li.hoge') -LI要素かつIDhoge $('li#hoge') -子孫セレクタDIV contentsのLI $('DIV#contents LI') -子セレクタ DIVの直下のLI $('DIV#contents > LI') -グループセレクタ(カンマで区切る) $('#first, #third") -Aタグのhref要素を回す $("a[href]").each(function(){ } -DIV#hoge以下のAで絞るバージョン $("DIV#hoge a[href]").each(function(){ } -チェックボックスをすべてOFF $("input[type='checkbox']").removeAttr( 'checked' ); -チェックボックスをすべてON $("input[type='checkbox']").attr( 'checked', 'checked' ); -クラス名hoge以下クラス名fuga以下のチェックボックスOFF $(".hoge .fuga input[type='checkbox']").removeAttr( 'checked' ); **属性セレクタ [#i9ddcbf4] -href属性を持つものを取得 $("[href]") -href属性がhogeであるもの $("[href='hoge']") -href属性がhogeで始まる、終わるもの $("[href^='hoge']") $("[href$='hoge']") **フォームの操作 [#i29a493a] -値の取得と設定 $("input").val(); $("input").val("初期値"); **変更関連(フォーカスON,OFF,変更) [#i9dac245] $("input").("focus",function(){}); $("input").("blur",function(){}); $("input").("change",function(){}); **フォーム用のセレクター [#f042c258] input[type='text'] input[type='password'] input[type='radio'] input[type='checkbox'] input[type='submit'] input[type='image'] ***セレクトされたもの、チェックされたもの [#z6c50405] :selected :checked **Joose [#cf2a08b5] *その他 [#ld4fcca9] **Rhino [#qe6c92fe] JavaでかかれたJavaScript実装。J2SE6.0から標準添付