Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

javascript

JavaScript学習日記 その0004 jQueryの$.ajaxでjsonpを取得する

参考にさせて頂いたページ 今回これを参考に動かしてみた jQuery.ajaxでphpから出力したjsonpを扱った時のメモ | ミラボ jsonpって何なのか JSONPで悩むある程度の人々へ はじめに ドメインが違うサーバーから、オブジェクトのデータを取得したい場合はdataT…

JavaScript学習日記 その0003-01 jQuery UIのDatepicker | 曜日ごとに色を変える、任意の座表に絶対配置する、インラインに配置する

参考にさせて頂いたページ 絶対表示の位置変更について position() jQuery UI Datepicker(カレンダー)表示位置の調整 | Eniod's Blog jQuery UI Datepicker(カレンダー)表示位置の変更 サンプル .position() | jQuery UI API Documentation jQuery UI の…

JavaScript学習日記 その0002 ES5入門とES2015入門のこと

参考にさせて頂いたページ ES5について ECMAScript 5 (ES5) 新機能 まとめ - galife ES2015(ES6)な時代だからこそ、ES5を改めて調べたJavaScript初級者のメモ - Qiita ES2015について ES2015 (ES6)についてのまとめ - Qiita 春からはじめるモダンJavaScript …

JavaScript学習日記 その0001 thisとかオブジェクト指向、call、applyのこと

参考にさせて頂いたページ javascriptにおけるpublicとprivateについて // Speaker Deck 最強オブジェクト指向言語 JavaScript 再入門! [A 3]SSJSでも使える!Javascriptでオブジェクト指向プログラミング入門 applyとcallの使い方を丁寧に説明してみる - …

vue.js 1.0 その0001-001 公式ドキュメントを読む(ガイド編) 自分用インデックス

参考にさせて頂いたページ vue.js はじめに 公式ドキュメントのガイドを見返すときに、「あれはどこに書いてあったかなー?」というのが、左カラムの大きい見出しだけ見てもまだよくわからなかったりするので、小さい見出しを展開したうえで少し要約して、と…

JavaScriptのfor文でオブジェクトの要素数だけループする

参考にさせて頂いたページ for..in文 - 繰り返し処理 - JavaScript入門 keyの取得と出力 例として以下の通り。 var obj = { "hoge" : "hoge", "foo" : "foo", "fuga" : "fuga", } for(var key in obj){ console.log(obj[key]); } 最近は、モダンなブラウザ向…

さくらvpsとcakephp2.6.7で開発日記 その0018 jQueryを使用してAjaxでテーブルデータを取得する

参考にさせて頂いたページ CakePHPとJSONでAjax用APIを作る方法 CakePHPでjQueryのAjaxを使う方法 以前作成したお問い合わせフォーム 以前以下の記事でお問い合わせフォームを作成したので、試しにcontactsテーブルのデータを非同期で取得してみようと思う。…

AngularJS1.x その0014 DI(依存性注入)コンテナー機能を使う

参考にさせて頂いたページ AngularJSの依存性注入を利用するには? - Build Insider AngularJSのDIの仕組み、minify対策は覚えておこう! - Qiita 依存性注入(DI) | AngularJS 1.2 日本語リファレンス | js STUDIO DIを使用しない記述 これまではcontroller…

AngularJS1.x その0013 標準モジュール

参考にさせて頂いたページ AngularJSでモジュールを定義するには? - Build Insider 標準モジュール 自分で作成するモジュールの他に標準で用意された以下のようなモジュールがあるようです。 ng ngAnimate ngAria ngCookies ngMessages ngMock ngMockE2E ng…

AngularJS1.x その0012 モジュールの作成とその構成部品に何があるのか見てみる

参考にさせて頂いたページ AngularJSでモジュールを定義するには? - Build Insider モジュールの構成部品としてcontrollerを登録する controllerだけは以前やった。 AngularJS1.x その0004 myAppモジュールを作成して、その構成部品のcontrollerとしてSampl…

AngularJS1.x その0011 タグを自作する(Custom Elementsを作成する) templateとng-transclude

参考にさせて頂いたページ Angular.jsについて AngularJSカスタムディレクティブのtranscludeオプション、ng-transcludeディレクティブの使用例 | VPSサーバーでWebサイト公開 備忘録 ~Linux、MySQLからAJAXまで AngularJS Directive なんてこわくない(その…

AngularJS1.x その0010 Controller自身のDOMを選択したり、その他のプロパティを取得する

参考にさせて頂いたページ javascript - How do i get current scope dom-element in AngularJS controller? - Stack Overflow ng-app.jsの記述内容 例として以下の通り。 // myAppモジュールを作成 var app = angular.module('myApp', []); // myAppモジュ…

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の作…