読者です 読者をやめる 読者になる 読者になる

JavaScript

Java の上の JavaScript エンジン Nashorn の基本

Nashorn とは Java7 までは JavaScript スクリプティングエンジンとして Rino が同梱されていましたが、Java8 からは Nashorn が同梱されるようになりました。 ナースホルン(Nashorn)はドイツ語でサイを意味します。 Nashorn は ECMAScript-262 に準拠してお…

サーバサイドエンジニアのためのフロントエンド入門 〜ECMAScript編〜

フロントエンドの移り変わりが激しすぎてついていけない。 というサーバサイドエンジニア向けのフロントエンドの概要第3回目です。 より深い話題については他を当たってください。。 前回は CSS について見ました。 etc9.hatenablog.com 今回は ECMAScript …

サーバサイドエンジニアのためのフロントエンド入門 〜Sass編〜

フロントエンドの移り変わりが激しすぎてついていけない。 というサーバサイドエンジニア向けのフロントエンドの概要第2回目です。 より深い話題については他を当たってください。。 前回までで、node と gulp を導入しました。 etc9.hatenablog.com 今回は …

サーバサイドエンジニアのためのフロントエンド入門 〜環境編〜

フロントエンドの移り変わりが激しすぎてついていけない。 というサーバサイドエンジニア向けのフロントエンドの概要です。 より深い話題については他を当たってください。。 node とは 近年のフロントエンド開発は node が無くては始まりません。 説明の必…

これぐらいでイイ これぐらいがイイ Riot.js

Riot.js(ライオット) とは React と Polymer のコンセプトをすごくシンプルに体現したUIライブラリです(Riot 2.0)。 公式サイトでは大きく以下が挙げられています。 CUSTOM TAGS ENJOYABLE SYNTAX VIRTUAL DOM TINY SIZE しかし、一番のポイントは、「Small …

AngularJS Directive チュートリアル STEP6〜STEP8

Step6 transclude transclude はディレクティブのコンテンツに外部スコープを適用可能とする。 コントローラで $scope.value を定義し、 .controller('AppCtrl', function($scope) { $scope.value = 'hello' }) htmlでは以下のようにディレクティブのコンテ…

AngularJS Directive チュートリアル STEP1〜STEP5

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>

AngularJS チュートリアル step-4

前回からの続きになります。 前回分の 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>

AngularJS チュートリアル step-3

前回からの続きになります。 テンプレートとして 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>

AngularJS チュートリアル step-2

前回からの続きになります。 まず前回の単なる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 just got faste…</p></li></ul></body></html>

AngularJS チュートリアル step-1

前回からの続きになります。 単なる次回のひな形作成のみ 前回ファイルを以下のように変えるだけ <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>

AngularJS チュートリアル step-0

はじめに はじめに単なる 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> …

HTML テーブルをナイスに扱う DataTables 〜ThemeRoller編〜

前回からの続き。。 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>

HTML テーブルをナイスに扱う DataTables 〜Ajax編〜

前回からの続き。。 DataTables によるHTMLテーブルは当然かんたんに Ajax 対応できる。 arrayでのレスポンス 簡単な例として、サーバへのAjax呼び出しの結果としてarrayを返却する場合。 HTML のテーブルは前回と同様。 <body> <table id="table_id"> <thead> <tr><th>Rendering engine</th><th>Browser</th><th>Platform</th></tr></thead></table></body>…

HTML テーブルをナイスに扱う DataTables 〜導入編〜

DataTables とは HTML テーブルを操作する jQuery のプラグイン。 本家は以下 http://datatables.net/index 簡単な例 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>

jQueryライブラリなどの CDN 指定方法

CDN 利用の利点 −jQuery などのライブラリ読み込みは、スケールされたサーバの CDN を利用することで高速化が期待できる。 −多数のページが URL の CDN を指定することでキャッシュの有効活用が期待できる。 −開発時にはお手軽。 商用でも多数の CDN サービ…

はじめての jQuery Mobile 1.0 〜その4:ツールバー〜

] はじめての jQuery Mobile 1.0 〜その3:リストビュー〜 - etc9からの続きです。 ヘッダー ヘッダーは 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> が…

はじめての jQuery Mobile 1.0 〜その3:リストビュー〜

] はじめての jQuery Mobile 1.0 〜その2:ページ遷移〜 - A Memorandumからの続きです。 リストビュー jQuery Mobile にて最も多用されるウィジェットがリストビューになると思います。 jQuery Mobile は、HTML にて箇条書きのマークアップを行い、data-rol…

はじめての jQuery Mobile 1.0 〜その2:ページ遷移〜

はじめての jQuery Mobile 1.0 〜その1:コンテンツの記述〜 - etc9からの続きです。 ページ遷移時のイベント jQuery Mobile では、1つのHTMLファイルに複数のページビューを定義できます。外部ページも非同期リクエストにて取得したページビューを、既存の …

はじめての jQuery Mobile 1.0 〜その1:コンテンツの記述〜

jQuery Mobile とは jQuery Mobile は HTML5 と CSS3 の機能を利用して、複数のモバイルプラットフォームに一貫したユーザエクスペリエンスを提供するための JavaScript フレームワークです。jQuery と jQuery UI の利用経験があれば、簡単にモバイル向けの…

HTML5 のカスタムデータ属性を使ってポップアップウインドウを制御する

よくあるポップアップ onclick イベントにて window.open 関数でポップアップを表示するよくある方法。 <a href='#' onclick="window.open('hoge.html', 'target', 'width=300, height=200');"> ポップアップ</a> この方法の問題点は、href にリンク先が設定されていないため、JavaScript を有効にしていない場合にリンク先のページを見るすべがないこ…

JavaScript のリテラルパターン

オブジェクトリテラル オブジェクトの作成はコンストラクタにて以下のように書けます。 var car = new Object(); car.goes = "far"; が、より簡素なオブジェクトリテラル表記を使うべきです。 var car = {goes: "far"}; オブジェクトコンストラクタに数値を…

JavaScript とかによるブラウザ判定方法のまとめ

JavaScript でのブラウザ判定について まとまった情報がサクッとヒットしないので、まとめ UserAgent によるブラウザ判定 よくある単純な例 var userAgent = window.navigator.userAgent.toLowerCase(); if (userAgent.indexOf('opera') != -1) { return 'op…

単独 var パターン

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>