JavaScript
はじめに CSS で三角形を作る 準備 ボーダーで正方形を書く ボーダーを広くする ボーダーをさらに広くする 不要なボーダーを消す 2つ目の三角形を作成する 2つの三角形の並びを調整する テーブルを作る ソートインジケータ を付ける クリックイベントで動き…
Nashorn とは Java から Nashorn を使う Java オブジェクトを渡す JavaScript の関数を Java から呼び出す JavaScript のオブジェクトを Java から呼び出す JavaScript 内で Java クラスを利用する JavaScript と Java の型 文字列 数値 配列 リストとマップ…
フロントエンドの移り変わりが激しすぎてついていけない。 というサーバサイドエンジニア向けのフロントエンドの概要第3回目です。 より深い話題については他を当たってください。。 前回は CSS について見ました。 blog1.mammb.com 今回は ECMAScript につ…
フロントエンドの移り変わりが激しすぎてついていけない。 というサーバサイドエンジニア向けのフロントエンドの概要第2回目です。 より深い話題については他を当たってください。。 前回までで、node と gulp を導入しました。 blog1.mammb.com 今回は gulp…
フロントエンドの移り変わりが激しすぎてついていけない。 というサーバサイドエンジニア向けのフロントエンドの概要です。 より深い話題については他を当たってください。。 node とは CommonJS とは node を nodebrew でインストールする npm とは gulp と…
Riot.js(ライオット) とは 簡単なサンプル マウント ループ Conditional expressions イベント Named elements タグのネスト update unmount yield Observable Router まとめ Riot.js(ライオット) とは React と Polymer のコンセプトをすごくシンプルに体現…
blog1.mammb.com Step6 transclude transclude はディレクティブのコンテンツに外部スコープを適用可能とする。 コントローラで $scope.value を定義し、 .controller('AppCtrl', function($scope) { $scope.value = 'hello' }) htmlでは以下のようにディレ…
Step0 事前準備 index.html <html lang="ja" ng-app="app"> <head> <meta charset="utf-8"> <title>My HTML File</title> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> </head> <body ng-controller="AppCtrl"> <p>{{value}}</p> </body></html>
blog1.mammb.com前回からの続きになります。 前回分の index.html にソート条件追加 Sort by: <select ng-model="orderProp"> <option value="name">Alphabetical</option> <option value="age">Newest</option> </select> で、ソート条件を orderBy で追加 <li ng-repeat="phone in phones | filter:query | orderBy:orderProp"> で以下のようになる。 </li>
blog1.mammb.com前回からの続きになります。 テンプレートとして index.html を以下のように変更。 app/index.html <html lang="ja" ng-app="phonecatApp"> <head> <meta charset="utf-8"> <title>Phone Gallery</title> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> </head> </html>
blog1.mammb.com前回からの続きになります。 まず前回の単なるHTMLをそのまま。 <html lang="ja" ng-app> <head> <meta charset="utf-8"> <title>Phone Gallery</title> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <ul> <li> <span>Nexus S</span> <p>Fast…</p></li></ul></body></html>
blog1.mammb.com前回からの続きになります。 単なる次回のひな形作成のみ 前回ファイルを以下のように変えるだけ <html lang="ja" ng-app> <head> <meta charset="utf-8"> <title>Phone Gallery</title> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <ul> <li> <span>Nexus S<…</span></li></ul></body></html>
はじめに はじめに単なる HTML ファイルを準備。 app/index.html <html lang="ja"> <head> <meta charset="utf-8"> <title>My HTML File</title> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <p>Nothing here {{'yet' + '!'}}</p> </body> </html> …
blog1.mammb.com前回からの続き。。DataTables によるHTMLテーブルは jQuery の ThemeRoller に対応している。 最初は、 HTML のテーブルは前回の状態から、 <head> ・・・ <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"> </link></head>
blog1.mammb.com前回からの続き。。DataTables によるHTMLテーブルは当然かんたんに Ajax 対応できる。 arrayでのレスポンス 簡単な例として、サーバへのAjax呼び出しの結果としてarrayを返却する場合。 HTML のテーブルは前回と同様。 <body> <table id="table_id"> <thead> <tr><th>Rendering engine</th><th>B</th></tr></thead></table></body>…
DataTables とは HTML テーブルを操作する jQuery のプラグイン。 本家は以下datatables.net 簡単な例 Microsoft の CDN でホストされているため、stylesheet と script を以下のように指定。 <head> ・・・ <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"> </link></head>
CDN 利用の利点 −jQuery などのライブラリ読み込みは、スケールされたサーバの CDN を利用することで高速化が期待できる。 −多数のページが URL の CDN を指定することでキャッシュの有効活用が期待できる。 −開発時にはお手軽。 商用でも多数の CDN サービ…
] blog1.mammb.com からの続きです。 ヘッダー ヘッダーは data-role="header" の data 属性を付与することで、後はjQuery Mobile が上手くやってくれます。 <header data-role="header"><h1>Page Title</h1></header> div タグでも同じです。 <div data-role="header"> <h1>Page Title</h1></div> が、header タグを使用しておくべきでしょう。 ヘ…
]blog1.mammb.com からの続きです。 リストビュー jQuery Mobile にて最も多用されるウィジェットがリストビューになると思います。 jQuery Mobile は、HTML にて箇条書きのマークアップを行い、data-role="listview" 属性を追加するだけでネイティブアプリ…
blog1.mammb.com からの続きです。 ページ遷移時のイベント jQuery Mobile では、1つのHTMLファイルに複数のページビューを定義できます。外部ページも非同期リクエストにて取得したページビューを、既存の DOM に挿入することでページ遷移を実現します。 こ…
jQuery Mobile とは jQuery Mobile は HTML5 と CSS3 の機能を利用して、複数のモバイルプラットフォームに一貫したユーザエクスペリエンスを提供するための JavaScript フレームワークです。jQuery と jQuery UI の利用経験があれば、簡単にモバイル向けの…
よくあるポップアップ onclick イベントにて window.open 関数でポップアップを表示するよくある方法。 <a href='#' onclick="window.open('hoge.html', 'target', 'width=300, height=200');"> ポップアップ</a> この方法の問題点は、href にリンク先が設定されていないため、JavaScript を有効にしていない場合にリンク先のページを見るすべがないこ…
オブジェクトリテラル オブジェクトの作成はコンストラクタにて以下のように書けます。 var car = new Object(); car.goes = "far"; が、より簡素なオブジェクトリテラル表記を使うべきです。 var car = {goes: "far"}; オブジェクトコンストラクタに数値を…
JavaScript でのブラウザ判定について まとまった情報がサクッとヒットしないので、まとめ UserAgent によるブラウザ判定 よくある単純な例 var userAgent = window.navigator.userAgent.toLowerCase(); if (userAgent.indexOf('opera') != -1) { return 'op…
var宣言の巻き上げ(hoisting) JavaScript では関数内部のどこにでもvar文を書くことができますが、これらの変数はその関数の先頭で宣言されたものと同じように動作します。 以下のコードは、1つ目の alert で"undefubed"が表示され、次に"local"が表示されま…
Function.prototype の拡張 Function.prototype に methodメソッドを追加することで prototype オブジェクトにメソッドを追加できる。以下の例では該当するメソッドが存在しなかった場合に指定したメソッドを追加する。 Function.prototype.method = functio…
undefined にデフォルト値を設定 存在しないメンバを取得しようとすると undefined が返される。||を使ってデフォルト値を設定することができる。 flight.departure; // undefined flight.departure || "None"; サンプル <html lang="ja"> <head> </head></html>
