Person

Defining classes and inheritance

<script type="text/javascript" src="prototype.js"></script>
<script language="javascript">

/** new, preferred syntax **/

// properties are directly passed to `create` method
var Person = Class.create({
  initialize: function(name) {
    this.name = name;
  },
  say: function(message) {
    return this.name + ': ' + message;
  }
});
// when subclassing, specify the class you want to inherit from
var Pirate = Class.create(Person, {
  // redefine the speak method
  say: function($super, message) {
    return $super(message) + ', yarr!';
  }
});
var john = new Pirate('Long John');
john.say('ahoy matey');
// -> "Long John: ahoy matey, yarr!"
// define a module
var Vulnerable = {
  wound: function(hp) {
    this.health -= hp;
    if (this.health < 0) this.kill();
  },
  kill: function() {
    this.dead = true;
  }
};
// the first argument isn't a class object, so there is no inheritance ...
// simply mix in all the arguments as methods:
var Player = Class.create(Vulnerable, {
  initialize: function() {
    this.health = 100;
    this.dead = false;
  }
});
var bruce = new Player;
bruce.wound(55);
bruce.health; //-> 45
</script>

How Prototype extends the DOM

Prototype adds many convenience methods to elements returned by the $() function: for instance, you can write $('comments').addClassName('active').show() to get the element with the ID 'comments', add a class name to it and show it (if it was previously hidden).

<div id="comments"> hello world!! </div>
<script type="text/javascript" src="prototype.js"></script>
<script language="javascript">
$('comments').addClassName('active').hide()
</script>

很多Element.extend屬性試不出來

Introduction to Ajax

<script type="text/javascript" src="prototype.js"></script>
<script language="javascript">
/*
# onUninitialized,
# onLoading,
# onLoaded,
# onInteractive,
# onComplete and
# onException
onException which fires when there was an exception while dispatching other callbacks
The onUninitialized, onLoading, onLoaded, and onInteractive callbacks are not implemented
 consistently by all browsers. In general, it's best to avoid using these.
*/
new Ajax.Request('/some_url',
{
    method:'get',
    parameters: {company: 'example', limit: 12},
    onSuccess: function(transport){
        var response = transport.responseText || "no response text";
        alert("Success! \n\n" + response);
    },
    onFailure: function(){
        alert('Something went wrong...') 
    },
    onCreate: function(){
        alert('a request has been initialized!');
    }, 
    onComplete: function(){
        alert('a request completed');
    }
});

</script>

另外可以傳一張表單

<script language="javascript">
//One of the primary applications for the parameters property is sending the contents of
// a FORM with an Ajax request, and Prototype gives you a helper method for this, called Form.serialize:
new Ajax.Request('/some_url', {
  parameters: $('some_form_id').serialize(true)
});
</script>

Evaluating a JavaScript response

<script language="javascript">
new Ajax.Request('/some_url', { method:'get',
  onSuccess: function(transport, json){
      alert(json ? Object.inspect(json) : "no JSON object");
    }
  });

</script>

JSON (JavaScript Object Notation) is a lightweight data-interchange format.

JSON 是利用了成對的 {} 來包住各物件(object), 用成對的 [] 來包任各陣列(array), 用成對的 "" 來包住各字串, 用逗號來區隔各變數, 而資料型態有 string, number, array, object, 另外有三個常數, true, false, null. 下面描述了一個 object obj1 擁有兩個成員變數, 而另一個為 array 擁有 5 個 number 的範例:

{ 'obj1': {
  'child1':'value1',
  'child2':'value2'
  },
  'array1': [1, 2, 3, 4, 5]
};