Motomichi Works Blog

その日学習したことについて書いている日記です。誰かの役に立ったらそれはそれで嬉しいです。

javascript

jQueryを使わずにHTML要素を参照する

参考にさせて頂いたページ JavaScriptについて検索すると、jQueryを使った方法ばかりがヒットしがちなので、忘れないようにリンクを控えさせて頂いた。 【DOM連載#1】JavaScriptのDOMでHTML要素を参照 - Noise of Web Programming

AngularJS1.x その0009 イベントリスニングの開始と任意のタイミングでイベントを発生させる方法 $on, $emit, $broadcast

参考にさせて頂いたページ 【AngularJS】 $on, $emit, $broadcast | COTeggのバケツ ng-app.jsの記述内容 例として以下の通り。 // myAppモジュールを作成 var app = angular.module('myApp', []); // myAppモジュールにParentCtrlコントローラーを登録 app.…

AngularJS1.x その0008 コントローラーを入れ子にして、親子関係を作る

参考にさせて頂いたページ AngularJSのControllerをネストしたときのスコープ - hokaccha.hamalog v2 ng-app.jsの記述内容 例として以下の通り。 // myAppモジュールを作成 var app = angular.module('myApp', []); // myAppモジュールにParentCtrlコントロ…

AngularJS1.x その0007 a要素をクリックしたときに遷移させないようにする

参考にさせていただいたページ AngularJS ng-click で preventDefault したい - Blogaomu ng-app.jsの記述内容 例として以下の通り。 // myAppモジュールを作成 var app = angular.module('myApp', []); // myAppモジュールにSampleCtrlコントローラーを登録…

AngularJS1.x その0006 クリックイベントが発生した要素の$eventオブジェクトの取得

参考にさせて頂いたページ AngularJSのDOMイベント処理と注意すべきディレクティブを知り、HTMLテンプレートを使いこなそう (1/3):CodeZine(コードジン) ng-app.jsの記述内容 例として以下の通り。 // myAppモジュールを作成 var app = angular.module('m…

AngularJS1.x その0005 Controller as構文を使う

参考にさせて頂いたページ AngularJSの$scopeをController as で置き換えるべき理由 - Qiita ng-app.jsの記述内容 // myAppモジュールを作成 var app = angular.module('myApp', []); // myAppモジュールにSampleCtrlコントローラーを登録 app.controller('S…

AngularJS1.x その0004 myAppモジュールを作成して、その構成部品のcontrollerとしてSampleCtrlを登録して使う

参考にさせて頂いたページ AngularJSでモジュールを定義するには? - Build Insider 今回やること AngularJS1.x その0002 ng-controllerを使う - MOTOMICHI WORKS BLOG の記事おいて非推奨な記述とされていた記述のまま、 AngularJS1.x その0003 ng-clickデ…

AngularJS1.x その0003 ng-clickディレクティブ

参考にさせて頂いたページ AngularJS AngularJS: イベントリスナーを登録するには?(ng-clickなど) - Build Insider index.htmlの作成とその記述内容 例として以下の通り。 <div ng-controller="SampleCtrl"> <input type="text" ng-model="name" /> <button ng-click="onclick()">送信</button> <div>{{msg}}</div> </div> ng-app.jsの作成とその記述内容 例として以下の通り。 var Samp…

AngularJS1.x その0002 ng-controllerを使う

参考にさせて頂いたページ コントローラーについて | AngularJS 1.2 日本語リファレンス | js STUDIO AngularJS TIPS - Build Insider Controllerの役割 参考にさせて頂いたページによると コントローラーは下記のようなことをするのに使用されます。 ・ $sc…

AngularJS1.x その0001 バインディングしてみる

参考にさせて頂いたページ 公式ドキュメント(英語) AngularJS — Superheroic JavaScript MVW Framework とりあえず一通り勉強するのに良さそう AngularJS TIPS - Build Insider js STUDIO のAngular1.2日本語ドキュメント AngularJS 1.2 日本語リファレンス …

bodyがwindowより短いときにfooterを下部にposition:fixedで配置する

footer.position.changer.jsの記述内容 jQueryと一緒に以下を読み込みます。 var FOOTER_ELEMENT = $('#js-Footer'); var resizedTimer = false; //footerのpositionを fixed / static に切り替える関数 var FooterPositionChanger = function(){ var _windo…

React.jsその0005 ボタンのonClickイベントでclassを取ったり付けたりする

バージョン React v0.13.2 react_sample.htmlの記述内容 <html> <head> <script src="build/react.js"></script> <script src="build/JSXTransformer.js"></script> <script type="text/jsx" src="app/react_sample.js"></script> </head> <body> <style type="text/css"> .example{ display:none; } .is-show{ displ…</body></html>

Riot.jsその0006 親子関係とそのプロパティへのアクセス

参考にさせて頂いたページ Riot API バージョン Riot v2.0.15 riot-sample.htmlの記述内容 <body> <elm-example hoge="parent_value"></elm-example> <script src="./js/core/riot+compiler.js"></script> <script type="riot/tag" src="./js/tags/riot-sample.tag"></script> <script> riot.mount('elm-example'); </script> </body> riot-sample…

Riot.jsその0005 イベントリスニングの開始と任意のタイミングでイベントを発生させる方法

参考にさせて頂いたページ Riot API vue.jsその0007 イベントリスニングの開始と任意のタイミングでイベントを発生させる方法 - MOTOMICHI WORKS BLOG バージョン Riot v2.0.15 riot-sample.htmlの記述内容 <body> <elm-example></elm-example> <script src="./js/core/riot+compiler.js"></script> <script type="riot/tag" src="./js/tags/riot-sample.tag"></script> <script> riot.…</body>

Riot.jsその0004 カスタムタグの中に任意のhtml要素を入れ子にする <yield/>

参考にさせて頂いたページ Riot API バージョン Riot v2.0.15 riot-sample.htmlの記述内容 <body> <elm-example thisid="1" title="タイトル1"> <div>inner-content-1</div> </elm-example> <elm-example thisid="2" title="タイトル2"> <div>inner-content-2</div> </elm-example> <script src="./js/core/riot+compiler.js"></script> </body>

Riot.jsその0003 属性を付与して、opts.hogeとして使用する

参考にさせて頂いたページ Riot 2.0 | A React-like UI library Riot.js 2.0 を触ってみた — まだReactで消耗しているの? - Qiita バージョン Riot v2.0.15 riot-sample.htmlの記述内容 <body> <elm-example AAAAA="AAAAAです。" bbbbb="bbbbbです。" cc_cc_c="cc_cc_cです。"></elm-example> <script src="./js/core/riot+compiler.js"></script> </body>

Riot.jsその0002 riot.mountするときにoptsを渡す

参考にさせて頂いたページ Riot 2.0 | A React-like UI library Riot.js 2.0 を触ってみた — まだReactで消耗しているの? - Qiita バージョン Riot v2.0.15 riot-sample.htmlの記述内容 <body> <elm-example></elm-example> <script src="./js/core/riot+compiler.js"></script> <script type="riot/tag" src="./js/tags/riot-sample.tag"></script> <script> riot…</body>

Riot.jsその0001 Riot.jsを使う準備とカスタムタグの定義

参考にさせて頂いたページ Riot 2.0 | A React-like UI library Riot.js 2.0 を触ってみた — まだReactで消耗しているの? - Qiita バージョン Riot v2.0.15 ダウンロードする 公式サイトで、riot+compiler.jsをダウンロードしてみた。 riot-sample.htmlの作…

React.jsその0004 input type="text" の要素に入力した値をbutton要素のonClickイベントで反映する(UnControlled Component)

参考にさせて頂いたページ reactjs - React.jsでFormを扱う - Qiita バージョン React v0.13.2 react_sample.htmlの記述内容 <html> <head> <script src="build/react.js"></script> <script src="build/JSXTransformer.js"></script> <script type="text/jsx" src="app/react_sample.js"></script> </head> <body> </body></html>

React.jsその0003 input type="text" の要素に入力した値をonChangeでリアルタイムに反映する(Controlled Component)

参考にさせて頂いたページ reactjs - React.jsでFormを扱う - Qiita 今話題のReact.jsはどのようなWebアプリケーションに適しているか? Introduction To React─ Frontrend Conference | HTML5Experts.jp バージョン React v0.13.2 react_sample.htmlの記述…

React.jsその0002 scriptを外部ファイルに切り出す

参考にさせて頂いたページ いま最も注目のライブラリ「React.js」でシングルページアプリケーションを作ってみよう! 【前編】 (2/3):CodeZine バージョン React v0.13.2 前回のreact_sample.htmlの記述内容 <html> <head> <script src="build/react.js"></script> <script src="build/JSXTransformer.js"></script> </head> <body> <div id="example"></div> </body></html>

React.jsその0001 公式サイトのHello, worldをやってみる

参考にさせて頂いたページ Getting Started | React いま最も注目のライブラリ「React.js」でシングルページアプリケーションを作ってみよう! 【前編】 (1/3):CodeZine React.jsチュートリアル【日本語翻訳】 | mae's blog バージョン React v0.13.2 ダ…

vue.js 0.11.x その0013 兄弟にあたるオブジェクトが発したイベントをリスニングする(兄弟にイベントを伝搬する)$broadcast

参考にさせて頂いたページ http://vuejs.org/api/instance-methods.html バージョン Vue.js v0.11.5 参考にした過去記事と$broadcast vue.jsその0012 インスタンスの親子関係 $parent - Motomichi Works Blogで$parentとか_children[0]とか_children[1]につ…

vue.js 0.11.x その0012 インスタンスの親子関係 $parent

参考にさせて頂いたページ Redirecting... 体で覚えるVue.js - インスタンスメンバ編 〜 JSおくのほそ道 #024 - Qiita Vue.js v0.11の変更点(予定)まとめ - blog.koba04.com バージョン Vue.js v0.11.5 サンプルソース Redirecting... にならって、以下のよ…

vue.js 0.11.x その0011 Vue.component()で登録したcomponentを入れ子にする

バージョン Vue.js v0.11.5 今回やってみたこと vue.jsその0008 Component Systemを使用して、html要素のコンポーネントを作る - Motomichi Works Blog vue.jsその0009 Vue.component()で登録したcomponentにparamAttributesで属性を付与する - Motomichi Wo…

vue.js 0.11.x その0010 チェックボックスをチェックしたら or テキストフォームに一文字でも入ったらボタンを有効化する

参考にさせて頂いたページ http://tech.ewdev.info/2014/02/1615/ バージョン Vue.js v0.11.5 v-attrの中に条件式を入れられる v-attrは <button v-attr="disabled: !agree">Submit</button> とか <button v-attr="disabled: textValue == ''">Submit</button> みたいな感じで、条件式がtrueのときdisabled属性が付くという事ができるんですね。

vue.js 0.11.x その0009 Vue.component()で登録したcomponentにparamAttributesで属性を付与する

参考にさせて頂いたページ http://vuejs.org/api/options.html#paramAttributes バージョン Vue.js v0.11.5 サンプルソース(属性を適用する) 例えば<hoge-hoge class="aaaaa" hoge="bbbbb"></hoge-hoge>みたいな感じで普通に属性を付ければ付く <div id="sample"> <hoge-hoge class="aaaaa" hoge="bbbbb"></hoge-hoge> <p v-component="hoge-hoge" class="ccccc" hoge="ddddd"></p></div>

vue.js 0.11.x その0008 Component Systemを使用して、html要素のコンポーネントを作る

参考にさせて頂いたページ vue,jsについて Redirecting... 体で覚えるVue.js - ViewModel生成編 〜 JSおくのほそ道 #022 - Qiita Custom Elementsについて http://www.html5rocks.com/ja/tutorials/webcomponents/customelements/ バージョン Vue.js v0.11.5…

vue.js 0.11.x その0007 イベントリスニングの開始と任意のタイミングでイベントを発生させる方法

参考にさせて頂いたページ http://vuejs.org/api/instance-methods.html#Events 体で覚えるVue.js - インスタンスメンバ編 〜 JSおくのほそ道 #024 - Qiita 体で覚えるVue.js - ViewModel生成編 〜 JSおくのほそ道 #022 - Qiita バージョン Vue.js v0.11.5 …

vue.js 0.11.x その0006 Instance Propertiesについて

参考にさせて頂いたページ http://vuejs.org/api/instance-properties.html 体で覚えるVue.js - インスタンスメンバ編 〜 JSおくのほそ道 #024 - Qiita バージョン Vue.js v0.11.5 Instance Properties var vm = new Vue({/* Options */}); みたいな感じでイ…