prototype js perl ajax
Download
Skip this Video
Download Presentation
prototype.js と Perl で Ajax

Loading in 2 Seconds...

play fullscreen
1 / 21

prototype.js と Perl で Ajax - PowerPoint PPT Presentation


  • 124 Views
  • Uploaded on

prototype.js と Perl で Ajax. 株式会社はてな 伊藤 直也 [email protected] http://www.hatena.ne.jp/. Ajax って ?. Asynchronous JavaScript + XML 定義はあいまい JavaScript による動的ロードテクニック 読み方 えーじゃっくす あじゃっくす. Ajax おさらい. クライアント側. サーバー側. HTML + CSS. ブラウザ描写 (DHTML). サーバーサイド アプリケーション. DOM. JavaScript.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' prototype.js と Perl で Ajax' - nitza


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
prototype js perl ajax

prototype.jsとPerlでAjax

株式会社はてな

伊藤 直也 [email protected]

http://www.hatena.ne.jp/

slide2
Ajaxって?
  • Asynchronous JavaScript + XML
  • 定義はあいまい
    • JavaScriptによる動的ロードテクニック
  • 読み方
    • えーじゃっくす
    • あじゃっくす
slide3
Ajaxおさらい

クライアント側

サーバー側

HTML + CSS

ブラウザ描写(DHTML)

サーバーサイド

アプリケーション

DOM

JavaScript

XMLHttpRequest

非同期通信

XML API

slide4
Ajaxでありがちなロジック
  • Hello, World!
    • XMLHttpRequest で GET + responseText を innerHTML で表示させる
  • 裏でCUD
    • XMLHttpRequest で POST、DB にCUD
    • 画面遷移なしにデータを永続化
slide5
Ajax用ライブラリ
  • ありがちな処理はライブラリで楽をしよう
  • Survey of AJAX/JavaScript Libraries
    • http://d.hatena.ne.jp/brazil/20050909/1126254775
    • Prototype
      • Rico
      • Scriptaculous
    • MochiKit
    • SAJAX
    • Dojo
    • DWR
prototype
Prototype
  • prototype.js
    • Sam Stephenson
    • http://prototype.conio.net/
  • 動的アプリケーション用フレームワーク
  • Ajax向け"にも"色々機能を提供
  • Ruby on Rails
prototype js
prototype.js 特徴
  • JavaScript書きが割りと楽になる
  • 様々な機能
    • クラスベースOO
    • Ajax
    • DHTML用ユーティリティ
    • Form
    • Effect
    • イベント処理
    • DOMの拡張
prototype js1
prototype.js のドキュメント
  • ない
  • ソース嫁
  • Using prototype.js v1.3.1
    • http://www.sergiopereira.com/articles/prototype.js.html
slide9
使い方
  • scriptタグで取り込む
  • コード書く

// in html

<script type=“text/javascript” src=“/path/to/prototype.js”></script>

// in js

var Animal = Class.create();

Animal.prototype = {

initialize : function (name) {

this.name = name;

},

bark : function () {

document.writeln(this.name);

}

}

var Dog = Class.create();

Dog.prototype = (new Animal).extend({

bark : function() {

Animal.prototype.bark.apply(this);

}

});

prototype ajax
PrototypeのAjax機能
  • Ajax.Request
  • Ajax.Updater
  • Ajax.PeriodicalUpdater
ajax request
Ajax.Request
  • Ajaxなリクエストを飛ばす

<a href="

new Ajax.Request(

\'/hello\',

{

parameters : Form.serialize(this.form),

asynchronous : 1,

onComplete : function(request){

alert(request.responseText);

}

}

);

">blah blah.</a>

ajax updater
Ajax.Updater
  • 特定のエレメントを動的に更新

<a href="#" onclick="

new Ajax.Updater(

\'result\',

\'/hello\',

{ asynchronous: 1 }

);

return false">Hello?</a>

<div id="result"></div>

ajax periodicalupdater
Ajax.PeriodicalUpdater
  • 特定のエレメントを定期的に更新
periodicalexecuter ajaxrequest
PeriodicalExecuter + AjaxRequest
  • 定期的にサーバーサイドのデータを更新

<script type="text/javascript">

new PeriodicalExecuter(

function () {

new Ajax.Request(

\'/autosave\',

{

asynchronous: 1,

parameters: Form.serialize($(\'textform\'))

})

}, 10

);

</script>

slide15
Ajax以外でも便利なの多し

<script type="text/javascript">

var name = $(\'name\'); // getElementById(\'name\');

alert($F(\'age\'));

Form.selialize($(\'profile\')); // name=...&age=...&sex=...

</script>

<form id="profile">

<input type="text" id="name" name="name" />

<input type="text" id="age" name="age" />

<input type="radio" name="sex" value="male" /> male

<input type="radio" name="sex" value="famale" /> famale

<select name="favorite_language">

<option value="perl">Perl</option>

<option value="ruby">Ruby</option>

<option value="php">PHP</option>

</select>

<input type="submit">

</form>

prototype1
フレームワークとPrototype
  • script src="prototype.js" より楽に
  • HTML::Prototype
  • プラグインによる拡張
    • Catalyst::Plugin::Prototype
    • CGI::Application::Plugin::Prototype
    • Sledge::Plugin::Prototype
    • Template::Plugin::Prototype
html prototype
HTML::Prototype
  • 各種プラグインの中で使われている
  • JavaScriptレスで prototype.js
  • HTML::Prototype::Useful
  • 凝ったこともいくつかできる

my $prototype = HTML::Prototype->new;

print $prototype->define_javascript_functions;

print $prototype->periodically_call_remote { ... }

slide18
メソッド例
  • define_javascript_functions
    • prototype.js を展開
  • link_to_remote
    • Ajax.Updater として展開
  • auto_comple_field
    • 入力を補完するための JavaScript を展開
tt html prototype
TT + HTML::Prototype
  • Template-Toolkitと一緒に使うと吉

<head>

[% prototype.define_javascript_functions %]

</head>

...

[% prototype.link_to_remote(\'Hello?\', {

update => \'result\',

url => \'/hello\',

}) %]

catalyst prototype js
Catalystでprototype.js
  • Agile Ajax development with Catalyst
  • Catalyst::Plugin::Prototype

// in your Catalyst application

package MyApp;

use strict;

use Catalyst qw/-Debug Prototype/;

...

1;

// in your template

[% c.prototype.link_to_remote( ... ) %]

slide21
まとめ
  • Prototype を使うと JavaScriptで楽できる
  • Ajaxもフレームワークから使う時代
  • 今日紹介し切れなかったいろんな機能も一杯
  • PerlプログラマもJSを書こう!
ad