A Ajax Diagram and GIS simple application
http://www.thescripts.com/forum/thread575221.html
Showing posts with label Ajax. Show all posts
Showing posts with label Ajax. Show all posts
2008/03/22
Online Mind Tool オンラインマインドツール
WiseMapping: More Ajax Mind Mapping
WiseMapping is the latest Ajax mind mapping tool developed by Paulo Veiga and three friends.
Wise Mapping is a free web mind mapping tool that leverages the power of Mind Maps mixing new technologies like vectorial languages (SVG and VML) and the power of the whole Web 2.0 concept. The tools uses SVG and VML which allows straightforward vector graphics animation without the need of installing any plug-in.
We asked Paulo about the development experience.
The main challenge was to develop an abstraction layer between SVG and VML (there was no open source framework to do this at the time we started working on the project) in order to support multiple browsers such as IE and Firefox/Opera (some efforts are being made at the moment to support Safari 3.0.4+). Using this layer for the core for the client side, a very intuitive, simple, nice looking, full Drag and Drop enabled graphical mind map editor is provided.
All the UI is powered by Mootools using DWR for the Ajax interaction with a backend made with Java 1.6 with Web Spring for MVC layer and Hibernate.
There have been some reports that VML is broken on IE 8. Hopefully this is a beta 1 bug, as without that legacy support, a bunch of applications (including this one) will not work.
There seem to be many mind mapping tools in Ajax, second only to RSS readers.
4.4 rating from 16 votes
MindMeister brings the concept of mind mapping to the web, using its facilities for real-time collaboration to allow truly global brainstorming sessions.
Users can create, manage and share mind maps online and access them anytime, from anywhere. In brainstorming mode, fellow MindMeisters from around the world (or just in different rooms) can simultaneously work on the same mind map - and see each other's changes as they happen. Using integrated Skype calls, they can throw around new ideas and put them down on "paper" at the same time.
Explore MindMeister
| AJAX NEWS | |||||||
|
Mindmeister: Take your mind map offline
http://ajaxian.com/archives/mindmeister-take-your-mind-map-offlineCategory: Showcase
Mindmeister has taken their mind map tool and now allow you to map offline.
The tool itself is a nice Ruby on Rails application (includes pink fade effects! yellow is so 2006) that gives you a visual canvas to play with your mind.
Their approach to offline is similar to Google Reader in that the user has to say “hey, take me offline”. The interface to that is a nice little slider widget. At the point your maps are sync’d down to the local store.
I would love to see it auto sync, and I noticed a couple of issues when I actually went offline but didn’t tell the tool first (would be nice to have the tool grok that) but the mind map tool in general is a nice app to use. It feels like Geni.
MindMeister brings the concept of mind mapping to the web, using its facilities for real-time collaboration to allow truly global brainstorming sessions.
Users can create, manage and share mind maps online and access them anytime, from anywhere. In brainstorming mode, fellow MindMeisters from around the world (or just in different rooms) can simultaneously work on the same mind map - and see each other's changes as they happen. Using integrated Skype calls, they can throw around new ideas and put them down on "paper" at the same time.
Explore MindMeisterMindmeister: Take your mind map offline
Category: Showcase
Mindmeister has taken their mind map tool and now allow you to map offline.
The tool itself is a nice Ruby on Rails application (includes pink fade effects! yellow is so 2006) that gives you a visual canvas to play with your mind.
Their approach to offline is similar to Google Reader in that the user has to say “hey, take me offline”. The interface to that is a nice little slider widget. At the point your maps are sync’d down to the local store.
I would love to see it auto sync, and I noticed a couple of issues when I actually went offline but didn’t tell the tool first (would be nice to have the tool grok that) but the mind map tool in general is a nice app to use. It feels like Geni.
2007/11/13
Dynamically loading an external JavaScript or CSS file
http://www.javascriptkit.com/javatutors/ is a very good site about javascript and ajax.
I found a good article about dymaniclly load external javascript and css
Dynamically loading an external JavaScript or CSS file
The conventional way to loading external JavaScript (ie: .js) and CSS (ie: .css) files on a page is to stick a reference to them in the HEAD section of your page, for example:
<head>
<script type="text/javascript" src="myscript.js"></script>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
Files that are called this way are added to the page as they are encountered in the page's source, or synchronously. For the most part, this setup meets our needs just fine, though in the world of synchronous Ajax design patterns, the ability to also fire up JavaScript/ CSS on demand is becoming more and more handy. In this tutorial, lets see how it's done.
Dynamically loading external JavaScript and CSS files
To load a .js or .css file dynamically, in a nutshell, it means using DOM methods to first create a swanky new "SCRIPT" or "LINK" element, assign it the appropriate attributes, and finally, use element.appendChild() to add the element to the desired location within the document tree. It sounds a lot more fancy than it really is. Lets see how it all comes together:
function loadjscssfile(filename, filetype){
if (filetype=="js"){ //if filename is a external JavaScript file
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", filename)
}
else if (filetype=="css"){ //if filename is an external CSS file
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
if (typeof fileref!="undefined")
document.getElementsByTagName("head")[0].appendChild(fileref)
}
loadjscssfile("myscript.js", "js") //dynamically load and add this .js file
loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file
loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css fileDemo:
Load "myscript.js"
Load "mystyle.css" "myscript.js" source:
var petname="Spotty"
alert("Pet Name: " + petname) "mystyle.css" source:
#demotable td{
background-color: lightyellow;
}
#demotable b{
color: blue;
}
Since external JavaScript and CSS files can technically end with any custom file extension (ie: "javascript.php"), the function parameter "filetype" lets you tell the script what file type to expect before loading. After that, the function sets out to create the element using the appropriate DOM methods, assign it the proper attributes, and finally, add it to the end of the HEAD section. Now, where the created file gets added is worth elaborating on:
document.getElementsByTagName("head")[0].appendChild(fileref)
By referencing the HEAD element of the page first and then calling appendChild(), this means the newly created element is added to the very end of the HEAD tag. Furthermore, you should be aware that no existing element is harmed in the adding of the new element- that is to say, if you call loadjscssfile("myscript.js", "js") twice, you now end up with two new "SCRIPT" elements both pointing to the same JavaScript file. This is problematic only from an efficiency standpoint, as you'll be adding redundant elements to the page and using unnecessary browser memory in the process. A simple way to prevent the same file from being added more than once is to keep track of the files added by loadjscssfile(), and only load a file if it's new:
var filesadded="" //list of files already added
function checkloadjscssfile(filename, filetype){
if (filesadded.indexOf("["+filename+"]")==-1){
loadjscssfile(filename, filetype)
filesadded+="["+filename+"]" //List of files added in the form "[filename1],[filename2],etc"
}
else
alert("file already added!")
}
checkloadjscssfile("myscript.js", "js") //success
checkloadjscssfile("myscript.js", "js") //redundant file, so file not added
Here I'm just crudely detecting to see if a file that's set to be added already exists within a list of added files' names stored in variable filesadded before deciding whether to proceed or not.
Ok, moving on, sometimes the situation may require that you actually remove or replace an added .js or .css file. Lets see how that's done next.
Dynamically removing/ replacing an external JavaScript or CSS file
Any external JavaScript or CSS file, whether added manually or dynamically, can be removed from the page. The end result may not be fully what you had in mind, however. I'll talk about this a little later.
Dynamically removing an external JavaScript or CSS file
To remove an external JavaScript or CSS file from a page, the key is to hunt them down first by traversing the DOM, then call DOM's removeChild() method to do the hit job. A generic approach is to identify an external file to remove based on its file name, though there are certainly other approaches, such as by CSS class name. With that in mind, the below function removes any external JavaScript or CSS file based on the file name entered:
function removejscssfile(filename, filetype){
var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none" //determine element type to create nodelist from
var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none" //determine corresponding attribute to test for
var allsuspects=document.getElementsByTagName(targetelement)
for (var i=allsuspects.length; i>=0; i--){ //search backwards within nodelist for matching elements to remove
if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1)
allsuspects[i].parentNode.removeChild(allsuspects[i]) //remove element by calling parentNode.removeChild()
}
}
removejscssfile("somescript.js", "js") //remove all occurences of "somescript.js" on page
removejscssfile("somestyle.css", "css") //remove all occurences "somestyle.css" on page
The function starts out by creating a collection out of either all "SCRIPT" or "LINK" elements on the page depending on the desired file type to remove. The corresponding attribute to look at also changes accordingly ("src" or "href" attribute). Then, the function sets out to loop through the gathered elements backwards to see if any of them match the name of the file that should be removed. There's a reason for the reversed direction- if/whenever an identified element is deleted, the collection collapses by one element each time, and to continue to cycle through the new collection correctly, reversing the direction does the trick (it may encounter undefined elements, hence the first check for allsuspects[i] in the if statement). Now, to delete the identified element, the DOM method parentNode.removeChild() is called on it.
So what actually happens when you remove an external JavaScript or CSS file? Perhaps not entirely what you would expect actually. In the case of JavaScript, while the element is removed from the document tree, any code loaded as part of the external JavaScript file remains in the browser's memory. That is to say, you can still access variables, functions etc that were added when the external file first loaded (at least in IE7 and Firefox 2.x). If you're looking to reclaim browser memory by removing an external JavaScript, don't rely on this operation to do all your work. With external CSS files, when you remove a file, the document does reflow to take into account the removed CSS rules, but unfortunately, not in IE7 (Firefox 2.x and Opera 9 do).Demo:
Load "myscript.js"
Remove "myscript.js"
Load "mystyle.css"
Remove "mystyle.css" "myscript.js" source:
var petname="Spotty"
alert("Pet Name: " + petname) "mystyle.css" source:
#demotable td{
background-color: lightyellow;
}
#demotable b{
color: blue;
}
Dynamically replacing an external JavaScript or CSS file
Replacing an external JavaScript or CSS file isn't much different than removing one as far as the process goes. Instead of calling parentNode.removeChild(), you'll be using parentNode.replaceChild() to do the bidding instead:
function createjscssfile(filename, filetype){
if (filetype=="js"){ //if filename is a external JavaScript file
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", filename)
}
else if (filetype=="css"){ //if filename is an external CSS file
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
return fileref
}
function replacejscssfile(oldfilename, newfilename, filetype){
var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none" //determine element type to create nodelist using
var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none" //determine corresponding attribute to test for
var allsuspects=document.getElementsByTagName(targetelement)
for (var i=allsuspects.length; i>=0; i--){ //search backwards within nodelist for matching elements to remove
if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(oldfilename)!=-1){
var newelement=createjscssfile(newfilename, filetype)
allsuspects[i].parentNode.replaceChild(newelement, allsuspects[i])
}
}
}
replacejscssfile("oldscript.js", "newscript.js", "js") //Replace all occurences of "oldscript.js" with "newscript.js"
replacejscssfile("oldstyle.css", "newstyle", "css") //Replace all occurences "oldstyle.css" with "newstyle.css"
Notice the helper function createjscssfile(), which is essentially just a duplicate of loadjscssfile() as seen on the previous page, but modified to return the newly created element instead of actually adding it to the page. It comes in handy when parentNode.replaceChild() is called in replacejscssfile() to replace the old element with the new. Some good news here- when you replace one external CSS file with another, all browsers, including IE7, will reflow the document automatically to take into account the new file's CSS rules.Demo:
Load "oldscript.js"
Replace with "newscript.js" instead
Load "oldstyle.css"
Replace with "newstyle.css" instead "oldscript.js" source:
var petname="Spotty"
alert("Pet Name: " + petname)
"newscript.js" source:
var petname="Beauty"
alert("Pet Name: " + petname) "oldstyle.css" source:
#demotable2 td{
background-color: lightyellow;
}
#demotable2 b{
color: blue;
}
"newstyle.css" source:
#demotable2 td{
background-color: lightblue;
}
#demotable2 b{
color: red;
}
Conclusion
So when is all this useful? Well, in today's world of Ajax and ever larger web applications, being able to load accompanying JavaScript/ CSS files asynchronously and on demand is not only handy, but in some cases, necessary. Have fun finding out what they are, or implementing the technique. :)
I found a good article about dymaniclly load external javascript and css
Dynamically loading an external JavaScript or CSS file
The conventional way to loading external JavaScript (ie: .js) and CSS (ie: .css) files on a page is to stick a reference to them in the HEAD section of your page, for example:
<head>
<script type="text/javascript" src="myscript.js"></script>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
Files that are called this way are added to the page as they are encountered in the page's source, or synchronously. For the most part, this setup meets our needs just fine, though in the world of synchronous Ajax design patterns, the ability to also fire up JavaScript/ CSS on demand is becoming more and more handy. In this tutorial, lets see how it's done.
Dynamically loading external JavaScript and CSS files
To load a .js or .css file dynamically, in a nutshell, it means using DOM methods to first create a swanky new "SCRIPT" or "LINK" element, assign it the appropriate attributes, and finally, use element.appendChild() to add the element to the desired location within the document tree. It sounds a lot more fancy than it really is. Lets see how it all comes together:
function loadjscssfile(filename, filetype){
if (filetype=="js"){ //if filename is a external JavaScript file
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", filename)
}
else if (filetype=="css"){ //if filename is an external CSS file
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
if (typeof fileref!="undefined")
document.getElementsByTagName("head")[0].appendChild(fileref)
}
loadjscssfile("myscript.js", "js") //dynamically load and add this .js file
loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file
loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css fileDemo:
Load "myscript.js"
Load "mystyle.css" "myscript.js" source:
var petname="Spotty"
alert("Pet Name: " + petname) "mystyle.css" source:
#demotable td{
background-color: lightyellow;
}
#demotable b{
color: blue;
}
Since external JavaScript and CSS files can technically end with any custom file extension (ie: "javascript.php"), the function parameter "filetype" lets you tell the script what file type to expect before loading. After that, the function sets out to create the element using the appropriate DOM methods, assign it the proper attributes, and finally, add it to the end of the HEAD section. Now, where the created file gets added is worth elaborating on:
document.getElementsByTagName("head")[0].appendChild(fileref)
By referencing the HEAD element of the page first and then calling appendChild(), this means the newly created element is added to the very end of the HEAD tag. Furthermore, you should be aware that no existing element is harmed in the adding of the new element- that is to say, if you call loadjscssfile("myscript.js", "js") twice, you now end up with two new "SCRIPT" elements both pointing to the same JavaScript file. This is problematic only from an efficiency standpoint, as you'll be adding redundant elements to the page and using unnecessary browser memory in the process. A simple way to prevent the same file from being added more than once is to keep track of the files added by loadjscssfile(), and only load a file if it's new:
var filesadded="" //list of files already added
function checkloadjscssfile(filename, filetype){
if (filesadded.indexOf("["+filename+"]")==-1){
loadjscssfile(filename, filetype)
filesadded+="["+filename+"]" //List of files added in the form "[filename1],[filename2],etc"
}
else
alert("file already added!")
}
checkloadjscssfile("myscript.js", "js") //success
checkloadjscssfile("myscript.js", "js") //redundant file, so file not added
Here I'm just crudely detecting to see if a file that's set to be added already exists within a list of added files' names stored in variable filesadded before deciding whether to proceed or not.
Ok, moving on, sometimes the situation may require that you actually remove or replace an added .js or .css file. Lets see how that's done next.
Dynamically removing/ replacing an external JavaScript or CSS file
Any external JavaScript or CSS file, whether added manually or dynamically, can be removed from the page. The end result may not be fully what you had in mind, however. I'll talk about this a little later.
Dynamically removing an external JavaScript or CSS file
To remove an external JavaScript or CSS file from a page, the key is to hunt them down first by traversing the DOM, then call DOM's removeChild() method to do the hit job. A generic approach is to identify an external file to remove based on its file name, though there are certainly other approaches, such as by CSS class name. With that in mind, the below function removes any external JavaScript or CSS file based on the file name entered:
function removejscssfile(filename, filetype){
var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none" //determine element type to create nodelist from
var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none" //determine corresponding attribute to test for
var allsuspects=document.getElementsByTagName(targetelement)
for (var i=allsuspects.length; i>=0; i--){ //search backwards within nodelist for matching elements to remove
if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1)
allsuspects[i].parentNode.removeChild(allsuspects[i]) //remove element by calling parentNode.removeChild()
}
}
removejscssfile("somescript.js", "js") //remove all occurences of "somescript.js" on page
removejscssfile("somestyle.css", "css") //remove all occurences "somestyle.css" on page
The function starts out by creating a collection out of either all "SCRIPT" or "LINK" elements on the page depending on the desired file type to remove. The corresponding attribute to look at also changes accordingly ("src" or "href" attribute). Then, the function sets out to loop through the gathered elements backwards to see if any of them match the name of the file that should be removed. There's a reason for the reversed direction- if/whenever an identified element is deleted, the collection collapses by one element each time, and to continue to cycle through the new collection correctly, reversing the direction does the trick (it may encounter undefined elements, hence the first check for allsuspects[i] in the if statement). Now, to delete the identified element, the DOM method parentNode.removeChild() is called on it.
So what actually happens when you remove an external JavaScript or CSS file? Perhaps not entirely what you would expect actually. In the case of JavaScript, while the element is removed from the document tree, any code loaded as part of the external JavaScript file remains in the browser's memory. That is to say, you can still access variables, functions etc that were added when the external file first loaded (at least in IE7 and Firefox 2.x). If you're looking to reclaim browser memory by removing an external JavaScript, don't rely on this operation to do all your work. With external CSS files, when you remove a file, the document does reflow to take into account the removed CSS rules, but unfortunately, not in IE7 (Firefox 2.x and Opera 9 do).Demo:
Load "myscript.js"
Remove "myscript.js"
Load "mystyle.css"
Remove "mystyle.css" "myscript.js" source:
var petname="Spotty"
alert("Pet Name: " + petname) "mystyle.css" source:
#demotable td{
background-color: lightyellow;
}
#demotable b{
color: blue;
}
Dynamically replacing an external JavaScript or CSS file
Replacing an external JavaScript or CSS file isn't much different than removing one as far as the process goes. Instead of calling parentNode.removeChild(), you'll be using parentNode.replaceChild() to do the bidding instead:
function createjscssfile(filename, filetype){
if (filetype=="js"){ //if filename is a external JavaScript file
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", filename)
}
else if (filetype=="css"){ //if filename is an external CSS file
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
return fileref
}
function replacejscssfile(oldfilename, newfilename, filetype){
var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none" //determine element type to create nodelist using
var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none" //determine corresponding attribute to test for
var allsuspects=document.getElementsByTagName(targetelement)
for (var i=allsuspects.length; i>=0; i--){ //search backwards within nodelist for matching elements to remove
if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(oldfilename)!=-1){
var newelement=createjscssfile(newfilename, filetype)
allsuspects[i].parentNode.replaceChild(newelement, allsuspects[i])
}
}
}
replacejscssfile("oldscript.js", "newscript.js", "js") //Replace all occurences of "oldscript.js" with "newscript.js"
replacejscssfile("oldstyle.css", "newstyle", "css") //Replace all occurences "oldstyle.css" with "newstyle.css"
Notice the helper function createjscssfile(), which is essentially just a duplicate of loadjscssfile() as seen on the previous page, but modified to return the newly created element instead of actually adding it to the page. It comes in handy when parentNode.replaceChild() is called in replacejscssfile() to replace the old element with the new. Some good news here- when you replace one external CSS file with another, all browsers, including IE7, will reflow the document automatically to take into account the new file's CSS rules.Demo:
Load "oldscript.js"
Replace with "newscript.js" instead
Load "oldstyle.css"
Replace with "newstyle.css" instead "oldscript.js" source:
var petname="Spotty"
alert("Pet Name: " + petname)
"newscript.js" source:
var petname="Beauty"
alert("Pet Name: " + petname) "oldstyle.css" source:
#demotable2 td{
background-color: lightyellow;
}
#demotable2 b{
color: blue;
}
"newstyle.css" source:
#demotable2 td{
background-color: lightblue;
}
#demotable2 b{
color: red;
}
Conclusion
So when is all this useful? Well, in today's world of Ajax and ever larger web applications, being able to load accompanying JavaScript/ CSS files asynchronously and on demand is not only handy, but in some cases, necessary. Have fun finding out what they are, or implementing the technique. :)
JavaScript Tutorials The prototype object of JavaScript
The prototype object of JavaScript
No, we're not going to discuss how to construct a new version of JavaScript in this tutorial. The prototype object of JavaScript, introduced starting in JavaScript 1.1, is a prebuilt object that simplifies the process of adding custom properties/ methods to all instances of an object. I know, I'm starting to sound a little geeky already, but hay, JavaScript isn't just about fun and games...it's important to learn the serious side of it too.
A little background first...
In JavaScript, you're allowed to add custom properties to both prebuilt and custom objects. Here's an example of each:
//adding a custom property to a prebuilt object
var myimage=new Image()
myimage.size="26k"
/*adding a custom property to the custom object "circle"*/
//First, create the custom object "circle"
function circle(){
}
var smallcircle=new circle()
smallcircle.pi=3.14159
A custom property added this way only exists for that instance of the object. If I were to spit out another instance of circle(), called "bigcircle", for example, bigcircle.pi would by default return "undefined" until I go over the process again of first defining bigcircle.pi, as with smallcircle.
There are times when you'll want to add a custom property that's only reflected on a particular instance of an object, and times, when you just wished all instances of the object would recognize the custom property already. For example, all circles- and not just small circles- have a pi, so it's reasonable to assume you'd like the custom property "pi" added in a way so that it's default across all instances of the circle object. That's where the prototype object of JavaScript comes in.
Using the prototype object to add custom properties to objects
The prototype object is here to help when you wish to quickly add a custom property to an object that is reflected on all instances of it. To use this object, simply reference the keyword "prototype" on the object before adding the custom property to it, and this property is instantly attached to all instances of the object. A demonstration is worth a thousand words, so I'll show one right now: Let's define the custom property "pi" in the above in a way so it's a default property of all instances of circle():
//First, create the custom object "circle"
function circle(){
}
circle.prototype.pi=3.14159
Having done the above, all instances of circle() now has the pi property prebuilt into them.
There is an important thing to take note at this point in the tutorial. While you are free to use the prototype object on any custom objects, this is NOT the case with prebuilt ones (such as image, string etc). JavaScript only allows you to "prototype" prebuilt objects that are created with the new keyword, such as the following:
The image object
The string object
The date object
The Array object
In the final part of this tutorial, I'll demonstrate an example involving prototyping a prebuilt JavaScript object.
Let's move on to see how to use the prototype object to add custom methods.
Using the prototype object to add custom methods to objects
The prototype object can also help you quickly add a custom method to an object that is reflected on all instances of it. To do so, simply create the object method as usual, but when attaching it to the object (you guessed it), use "prototype" beforehand. Let's extend our circle object so it contains a default method that does something simple, like alert the value of PI:
//First, create the custom object "circle"
function circle(){
}
circle.prototype.pi=3.14159
// create the object method
function alertmessage(){
alert(this.pi)
}
circle.prototype.alertpi=alertmessage
Now, all instances of the circle object contain a alertmessage() method!
Putting things into perspective- Examples
If you're having a hard time staying awake while reading this tutorial, I can't say I blame you. The prototype object of JavaScript isn't exactly as flashy and fun to learn as say, document.bgColor or window.open, and the rewards aren't always instant. But if you're at all interested in extending JavaScript and creating your own objects and libraries, the prototype object is a must learn. Allow me to show you now a couple of practical examples on using the prototype object of JavaScript:
-Example 1-Extending functionality to the pre-built string() object
As mentioned earlier in this tutorial, the prototype object can be used on pre-built JavaScript objects created with the new keyword to add custom properties/ methods to them. Let's see an interesting example on how to extend the prebuilt String object of JavaScript to include a method that writes any string backwards when called upon:
<script type="text/javascript">
/*code for extending String object with method that writes text backwards*/
//core custom method for writing text backwards
function outputbackwards(){
for (i=this.length-1;i>=0;i--)
document.write(this.charAt(i))
}
//Attach custom method to string object
String.prototype.writeback=outputbackwards
</script>
The above code may not look like much, but it just added a whole new functionality to the default string object- the ability to output any text backwards! Here are a few examples:
<script type="text/javascript">
var message1="Welcome to my site!"
message1.writeback()
var message2="Today is a beautiful day"
message2.writeback()
</script>
Output:!etis ym ot emocleW
yad lufituaeb a si yadoT
We're playing Frankenstein with the JavaScript language!
-Example 2-Extending functionality to a custom JavaScript object
For the most part, you'll probably be using the prototype object to extend and expand a custom JavaScript object you created earlier. JavaScript developers who create custom objects often know that the traditional way of assigning custom properties/ methods to an object isn't exactly a walk in the park (See "Creating Custom objects in JavaScript"). With the prototype object at hand, however, this process becomes a lot simpler and intuitive.
I'll quickly demonstrate the concept by first creating a "dummy object", and using the prototype object- and only this object- to equip the dummy object with properties and methods:
<script type="text/javascript">
//create dummy object
function dummy(){
}
//Create custom property
function dummyproperty(){
}
//Create custom method
function dummymethod(){
}
dummy.prototype.prop=dummyproperty
dummy.prototype.method=dummymethod
</script>
The key to take away from this example is how easy it is to attach a property/ method to an object (so it's reflected on all instances of it)- by using the prototype object of JavaScript.
No, we're not going to discuss how to construct a new version of JavaScript in this tutorial. The prototype object of JavaScript, introduced starting in JavaScript 1.1, is a prebuilt object that simplifies the process of adding custom properties/ methods to all instances of an object. I know, I'm starting to sound a little geeky already, but hay, JavaScript isn't just about fun and games...it's important to learn the serious side of it too.
A little background first...
In JavaScript, you're allowed to add custom properties to both prebuilt and custom objects. Here's an example of each:
//adding a custom property to a prebuilt object
var myimage=new Image()
myimage.size="26k"
/*adding a custom property to the custom object "circle"*/
//First, create the custom object "circle"
function circle(){
}
var smallcircle=new circle()
smallcircle.pi=3.14159
A custom property added this way only exists for that instance of the object. If I were to spit out another instance of circle(), called "bigcircle", for example, bigcircle.pi would by default return "undefined" until I go over the process again of first defining bigcircle.pi, as with smallcircle.
There are times when you'll want to add a custom property that's only reflected on a particular instance of an object, and times, when you just wished all instances of the object would recognize the custom property already. For example, all circles- and not just small circles- have a pi, so it's reasonable to assume you'd like the custom property "pi" added in a way so that it's default across all instances of the circle object. That's where the prototype object of JavaScript comes in.
Using the prototype object to add custom properties to objects
The prototype object is here to help when you wish to quickly add a custom property to an object that is reflected on all instances of it. To use this object, simply reference the keyword "prototype" on the object before adding the custom property to it, and this property is instantly attached to all instances of the object. A demonstration is worth a thousand words, so I'll show one right now: Let's define the custom property "pi" in the above in a way so it's a default property of all instances of circle():
//First, create the custom object "circle"
function circle(){
}
circle.prototype.pi=3.14159
Having done the above, all instances of circle() now has the pi property prebuilt into them.
There is an important thing to take note at this point in the tutorial. While you are free to use the prototype object on any custom objects, this is NOT the case with prebuilt ones (such as image, string etc). JavaScript only allows you to "prototype" prebuilt objects that are created with the new keyword, such as the following:
The image object
The string object
The date object
The Array object
In the final part of this tutorial, I'll demonstrate an example involving prototyping a prebuilt JavaScript object.
Let's move on to see how to use the prototype object to add custom methods.
Using the prototype object to add custom methods to objects
The prototype object can also help you quickly add a custom method to an object that is reflected on all instances of it. To do so, simply create the object method as usual, but when attaching it to the object (you guessed it), use "prototype" beforehand. Let's extend our circle object so it contains a default method that does something simple, like alert the value of PI:
//First, create the custom object "circle"
function circle(){
}
circle.prototype.pi=3.14159
// create the object method
function alertmessage(){
alert(this.pi)
}
circle.prototype.alertpi=alertmessage
Now, all instances of the circle object contain a alertmessage() method!
Putting things into perspective- Examples
If you're having a hard time staying awake while reading this tutorial, I can't say I blame you. The prototype object of JavaScript isn't exactly as flashy and fun to learn as say, document.bgColor or window.open, and the rewards aren't always instant. But if you're at all interested in extending JavaScript and creating your own objects and libraries, the prototype object is a must learn. Allow me to show you now a couple of practical examples on using the prototype object of JavaScript:
-Example 1-Extending functionality to the pre-built string() object
As mentioned earlier in this tutorial, the prototype object can be used on pre-built JavaScript objects created with the new keyword to add custom properties/ methods to them. Let's see an interesting example on how to extend the prebuilt String object of JavaScript to include a method that writes any string backwards when called upon:
<script type="text/javascript">
/*code for extending String object with method that writes text backwards*/
//core custom method for writing text backwards
function outputbackwards(){
for (i=this.length-1;i>=0;i--)
document.write(this.charAt(i))
}
//Attach custom method to string object
String.prototype.writeback=outputbackwards
</script>
The above code may not look like much, but it just added a whole new functionality to the default string object- the ability to output any text backwards! Here are a few examples:
<script type="text/javascript">
var message1="Welcome to my site!"
message1.writeback()
var message2="Today is a beautiful day"
message2.writeback()
</script>
Output:!etis ym ot emocleW
yad lufituaeb a si yadoT
We're playing Frankenstein with the JavaScript language!
-Example 2-Extending functionality to a custom JavaScript object
For the most part, you'll probably be using the prototype object to extend and expand a custom JavaScript object you created earlier. JavaScript developers who create custom objects often know that the traditional way of assigning custom properties/ methods to an object isn't exactly a walk in the park (See "Creating Custom objects in JavaScript"). With the prototype object at hand, however, this process becomes a lot simpler and intuitive.
I'll quickly demonstrate the concept by first creating a "dummy object", and using the prototype object- and only this object- to equip the dummy object with properties and methods:
<script type="text/javascript">
//create dummy object
function dummy(){
}
//Create custom property
function dummyproperty(){
}
//Create custom method
function dummymethod(){
}
dummy.prototype.prop=dummyproperty
dummy.prototype.method=dummymethod
</script>
The key to take away from this example is how easy it is to attach a property/ method to an object (so it's reflected on all instances of it)- by using the prototype object of JavaScript.
JavaScript Tutorials JavaScript and Object Oriented Programming (OOP)
JavaScript and Object Oriented Programming (OOP)
Credits: This tutorial is written and contributed by Tim Scarfe. Edited by JavaScriptKit.com for content/ structure. Please see footnote for more information on author.
JavaScript is an excellent language to write object oriented web applications. It can support OOP because it supports inheritance through prototyping as well as properties and methods. Many developers cast off JS as a suitable OOP language because they are so used to the class style of C# and Java. Many people don't realize that JavaScript supports inheritance. When you write object-oriented code it instantly gives you power; you can write code that can be re-used and that is encapsulated.
What's so great about objects?
Objects work so well because they act just like real life objects- objects have properties and methods. So if we were talking about a lamp, a property of it may be its height or width, say 12cm. A method of it may be to shine (an action). And when it's shining, its brightness property would be of a greater value than when it wasn't.
JavaScript gives you the ability to make your own objects for your own applications. With your objects you can code in events that fire when you want them to, and the code is encapsulated. It can be initialized any amount of times.
Creating objects using new Object()
There are several ways to create objects in JavaScript, and all of them have their place. The simplest way is to use the new operator, specifically, new Object():
<script language="javascript" type="text/javascript">
<!--
person = new Object()
person.name = "Tim Scarfe"
person.height = "6Ft"
person.run = function() {
this.state = "running"
this.speed = "4ms^-1"
}
//-->
</script>
We define a custom object "person," then add to it its own properties and method afterwards. In this case, the custom method merely initializes two more properties.
Creating objects using Literal Notation
Another inline way of defining an object is via literal notation. Supported in JavaScript1.2 and above, it's a more robust form of creating an object on the fly:
<script language="javascript" type="text/javascript">
<!--
// Object Literals
timObject = {
property1 : "Hello",
property2 : "MmmMMm",
property3 : ["mmm", 2, 3, 6, "kkk"],
method1 : function(){alert("Method had been called" + this.property1)}
};
timObject.method1();
alert(timObject.property3[2]) // will yield 3
var circle = { x : 0, y : 0, radius: 2 } // another example
// nesting is no problem.
var rectangle = {
upperLeft : { x : 2, y : 2 },
lowerRight : { x : 4, y : 4}
}
alert(rectangle.upperLeft.x) // will yield 2
//-->
</script>
Literal notion can contain arrays or arbitrary JavaScript expressions or values.
While using the new operator or literal notion to create a custom object is both simple and logical, the biggest shortcoming is that the result is NOT reusable- we cannot easily initialize different versions of the created object. For example with the first demonstration above, if the person's name is not "Tim Scarfe", we would need to redefine our entire object just to accommodate this change.
Object Constructor and prototyping
In the world of OOP, the previous ways of defining an object is too limiting in many situations. We need a way to create an object "type" that can be used multiple times without having to redefine the object every time to meet each particular instance's needs. The standard way to achieve this is to use the Object Constructor function.
An object constructor is merely a regular JavaScript function, so it's just as robust (ie: define parameters, call other functions etc). The difference between the two is that a constructor function is called via the new operator (which you'll see below). By basing our object definition on the function syntax, we get its robustness as well.
Lets use a real world item "cat" as an example. A property of a cat may be its color or name. A method may be to "meeyow". The important thing to realize, however is that every cat will have a different name or even meeyow noise. To create an object type that accommodates this need for flexibility, we'll use an object constructor:
<script language="javascript" type="text/javascript">
<!--
function cat(name) {
this.name = name;
this.talk = function() {
alert( this.name + " say meeow!" )
}
}
cat1 = new cat("felix")
cat1.talk() //alerts "felix says meeow!"
cat2 = new cat("ginger")
cat2.talk() //alerts "ginger says meeow!"
//-->
</script>
Here the function "cat()" is an object constructor, and its properties and methods are declared inside it by prefixing them with the keyword "this." Objects defined using an object constructor are then instantiated using the new keyword. Notice how we're able to easily define multiple instances of cat, each with its own name- that's the flexibility object constructor brings to custom objects. Constructors create the blueprints for objects, not the object itself.
Adding methods to our object using prototype
We saw above how to add a method to our constructor function by merely declaring it inside the function. Another approach is through prototyping, which is also more popular due to its elegance. Prototype is a type of inheritance in JavaScript. We use it when we would like an object to inherit a method after it has been defined. Think of prototyping mentally as "attaching" a method to an object after it's been defined, in which all object instances then instantly share.
Lets extend our original cat() object above with an additional method to change the cat's name, using prototype:
<script language="javascript" type="text/javascript">
<!--
cat.prototype.changeName = function(name) {
this.name = name;
}
firstCat = new cat("pursur")
firstCat.changeName("Bill")
firstCat.talk() //alerts "Bill says meeow!"
//-->
</script>
As you can see we merely use the keyword "prototype" immediately following the object's name to utilize this functionality. The custom method changeName() is now shared by all instances of cat.
Using prototype on prebuilt JavaScript objects
Prototyping works on both custom objects and select prebuilt objects, such as Date() or String. For the later, the general rule is that you can prototype any prebuilt object that's initialized with the "new" keyword. I'm now going to give you an example of the later, by adding additional functionality to the prebuilt Array object of JavaScript.
IE5 doesn't support the shift() and unshift() methods of Array that NS4+ does, so lets prototype them in!
<script language="javascript" type="text/javascript">
<!--
// The shift() and unshift() methods.
if(!Array.prototype.shift) { // if this method does not exist..
Array.prototype.shift = function(){
firstElement = this[0];
this.reverse();
this.length = Math.max(this.length-1,0);
this.reverse();
return firstElement;
}
}
if(!Array.prototype.unshift) { // if this method does not exist..
Array.prototype.unshift = function(){
this.reverse();
for(var i=arguments.length-1;i>=0;i--){
this[this.length]=arguments[i]
}
this.reverse();
return this.length
}
}
//-->
</script>
The possibilities are endless.
Subclasses and Superclasses
In Java and C++, there is an explicit concept of the class hierarchy. i.e. Every class can have a super class from which it inherits properties and methods. Any class can be extended, or sub-classed so the resulting subclass can inherit its parent's behavior. As we have seen, JavaScript supports prototype inheritance instead of class based. It's possible for inheritance to happen other ways, however.
The following is an example of inheritance through functions.
<script language="javascript" type="text/javascript">
<!--
// thanks to webreference
function superClass() {
this.supertest = superTest; //attach method superTest
}
function subClass() {
this.inheritFrom = superClass;
this.inheritFrom();
this.subtest = subTest; //attach method subTest
}
function superTest() {
return "superTest";
}
function subTest() {
return "subTest";
}
var newClass = new subClass();
alert(newClass.subtest()); // yields "subTest"
alert(newClass.supertest()); // yields "superTest"
//-->
</script>
Objects as Associative Arrays
As you may know, the dot (.) operator can be used to access the [] operator used with arrays.
<script language="javascript" type="text/javascript">
<!--
// These are the same
object.property
object["property"]
//-->
</script>
The important thing to notice is that in the object syntax the property is an identifier, whereas in the array syntax, it's a string. The obvious benefits of using an array syntax to access an object is because of the literal data type, you can easily concat strings and play around with them to access an object. For this to work with the standard syntax, an eval() would need to be used.
How do I loop through properties in an object?
You need to use a for/in loop.
<script language="javascript" type="text/javascript">
<!--
testObj = {
prop1:"hello",
prop2:"hello2",
prop3:new Array("helloa",1,2)
}
for(x in testObj) alert( x + "-" + testObj[ x ] )
//-->
</script>
What about JScript.NET?
Once you have mastered JScript, you will find it easy to move over to .NET
As the .NET compiler will compile your code into the IL (Intermediate Language) you have the same power to create fully fledged applications as a C# programmer. The great thing about JScript.NET is that it supports typed and untyped programming, (for simple things) so you can still churn out apps quickly.
If you are making complicated Interfaces and such, there is no automatic recognition for this.
Getting as quickly to OOP as possible, I will quickly run over the slightly new syntax with you.
<script language="JScript" runat="server">
var tim : String = "hello";
foo : Array = ["1", "2", "3"];
</script>
You may now explicitly set the data type for a variable.
To make an object, you can use the old fashioned way with JScript, or make a class. For example;
<script language="JScript" runat="server">
public class timObject (n) {
private tim : String = hello; // tim is a property of the object
private name : String = n;
private talk : Function = function(e) { // method
alert ( this.name + " says hello")
}
}
</script>
Is there a prototype equivalent?
Yes; but you may still use prototype inheritance.
<script language="JScript" runat="server">
public class extends timObject {
function changeName( n ) {
this.name = n;
}
}
</script>
It is possible in .NET to make entire web services simply by making a class that extends the framework.
About the author: Tim Scarfe is a Web Developer/IT Guy from West London, England. He is very keen on W3C Standards and Accessibility. Tim runs http://www.developer-x.com
Credits: This tutorial is written and contributed by Tim Scarfe. Edited by JavaScriptKit.com for content/ structure. Please see footnote for more information on author.
JavaScript is an excellent language to write object oriented web applications. It can support OOP because it supports inheritance through prototyping as well as properties and methods. Many developers cast off JS as a suitable OOP language because they are so used to the class style of C# and Java. Many people don't realize that JavaScript supports inheritance. When you write object-oriented code it instantly gives you power; you can write code that can be re-used and that is encapsulated.
What's so great about objects?
Objects work so well because they act just like real life objects- objects have properties and methods. So if we were talking about a lamp, a property of it may be its height or width, say 12cm. A method of it may be to shine (an action). And when it's shining, its brightness property would be of a greater value than when it wasn't.
JavaScript gives you the ability to make your own objects for your own applications. With your objects you can code in events that fire when you want them to, and the code is encapsulated. It can be initialized any amount of times.
Creating objects using new Object()
There are several ways to create objects in JavaScript, and all of them have their place. The simplest way is to use the new operator, specifically, new Object():
<script language="javascript" type="text/javascript">
<!--
person = new Object()
person.name = "Tim Scarfe"
person.height = "6Ft"
person.run = function() {
this.state = "running"
this.speed = "4ms^-1"
}
//-->
</script>
We define a custom object "person," then add to it its own properties and method afterwards. In this case, the custom method merely initializes two more properties.
Creating objects using Literal Notation
Another inline way of defining an object is via literal notation. Supported in JavaScript1.2 and above, it's a more robust form of creating an object on the fly:
<script language="javascript" type="text/javascript">
<!--
// Object Literals
timObject = {
property1 : "Hello",
property2 : "MmmMMm",
property3 : ["mmm", 2, 3, 6, "kkk"],
method1 : function(){alert("Method had been called" + this.property1)}
};
timObject.method1();
alert(timObject.property3[2]) // will yield 3
var circle = { x : 0, y : 0, radius: 2 } // another example
// nesting is no problem.
var rectangle = {
upperLeft : { x : 2, y : 2 },
lowerRight : { x : 4, y : 4}
}
alert(rectangle.upperLeft.x) // will yield 2
//-->
</script>
Literal notion can contain arrays or arbitrary JavaScript expressions or values.
While using the new operator or literal notion to create a custom object is both simple and logical, the biggest shortcoming is that the result is NOT reusable- we cannot easily initialize different versions of the created object. For example with the first demonstration above, if the person's name is not "Tim Scarfe", we would need to redefine our entire object just to accommodate this change.
Object Constructor and prototyping
In the world of OOP, the previous ways of defining an object is too limiting in many situations. We need a way to create an object "type" that can be used multiple times without having to redefine the object every time to meet each particular instance's needs. The standard way to achieve this is to use the Object Constructor function.
An object constructor is merely a regular JavaScript function, so it's just as robust (ie: define parameters, call other functions etc). The difference between the two is that a constructor function is called via the new operator (which you'll see below). By basing our object definition on the function syntax, we get its robustness as well.
Lets use a real world item "cat" as an example. A property of a cat may be its color or name. A method may be to "meeyow". The important thing to realize, however is that every cat will have a different name or even meeyow noise. To create an object type that accommodates this need for flexibility, we'll use an object constructor:
<script language="javascript" type="text/javascript">
<!--
function cat(name) {
this.name = name;
this.talk = function() {
alert( this.name + " say meeow!" )
}
}
cat1 = new cat("felix")
cat1.talk() //alerts "felix says meeow!"
cat2 = new cat("ginger")
cat2.talk() //alerts "ginger says meeow!"
//-->
</script>
Here the function "cat()" is an object constructor, and its properties and methods are declared inside it by prefixing them with the keyword "this." Objects defined using an object constructor are then instantiated using the new keyword. Notice how we're able to easily define multiple instances of cat, each with its own name- that's the flexibility object constructor brings to custom objects. Constructors create the blueprints for objects, not the object itself.
Adding methods to our object using prototype
We saw above how to add a method to our constructor function by merely declaring it inside the function. Another approach is through prototyping, which is also more popular due to its elegance. Prototype is a type of inheritance in JavaScript. We use it when we would like an object to inherit a method after it has been defined. Think of prototyping mentally as "attaching" a method to an object after it's been defined, in which all object instances then instantly share.
Lets extend our original cat() object above with an additional method to change the cat's name, using prototype:
<script language="javascript" type="text/javascript">
<!--
cat.prototype.changeName = function(name) {
this.name = name;
}
firstCat = new cat("pursur")
firstCat.changeName("Bill")
firstCat.talk() //alerts "Bill says meeow!"
//-->
</script>
As you can see we merely use the keyword "prototype" immediately following the object's name to utilize this functionality. The custom method changeName() is now shared by all instances of cat.
Using prototype on prebuilt JavaScript objects
Prototyping works on both custom objects and select prebuilt objects, such as Date() or String. For the later, the general rule is that you can prototype any prebuilt object that's initialized with the "new" keyword. I'm now going to give you an example of the later, by adding additional functionality to the prebuilt Array object of JavaScript.
IE5 doesn't support the shift() and unshift() methods of Array that NS4+ does, so lets prototype them in!
<script language="javascript" type="text/javascript">
<!--
// The shift() and unshift() methods.
if(!Array.prototype.shift) { // if this method does not exist..
Array.prototype.shift = function(){
firstElement = this[0];
this.reverse();
this.length = Math.max(this.length-1,0);
this.reverse();
return firstElement;
}
}
if(!Array.prototype.unshift) { // if this method does not exist..
Array.prototype.unshift = function(){
this.reverse();
for(var i=arguments.length-1;i>=0;i--){
this[this.length]=arguments[i]
}
this.reverse();
return this.length
}
}
//-->
</script>
The possibilities are endless.
Subclasses and Superclasses
In Java and C++, there is an explicit concept of the class hierarchy. i.e. Every class can have a super class from which it inherits properties and methods. Any class can be extended, or sub-classed so the resulting subclass can inherit its parent's behavior. As we have seen, JavaScript supports prototype inheritance instead of class based. It's possible for inheritance to happen other ways, however.
The following is an example of inheritance through functions.
<script language="javascript" type="text/javascript">
<!--
// thanks to webreference
function superClass() {
this.supertest = superTest; //attach method superTest
}
function subClass() {
this.inheritFrom = superClass;
this.inheritFrom();
this.subtest = subTest; //attach method subTest
}
function superTest() {
return "superTest";
}
function subTest() {
return "subTest";
}
var newClass = new subClass();
alert(newClass.subtest()); // yields "subTest"
alert(newClass.supertest()); // yields "superTest"
//-->
</script>
Objects as Associative Arrays
As you may know, the dot (.) operator can be used to access the [] operator used with arrays.
<script language="javascript" type="text/javascript">
<!--
// These are the same
object.property
object["property"]
//-->
</script>
The important thing to notice is that in the object syntax the property is an identifier, whereas in the array syntax, it's a string. The obvious benefits of using an array syntax to access an object is because of the literal data type, you can easily concat strings and play around with them to access an object. For this to work with the standard syntax, an eval() would need to be used.
How do I loop through properties in an object?
You need to use a for/in loop.
<script language="javascript" type="text/javascript">
<!--
testObj = {
prop1:"hello",
prop2:"hello2",
prop3:new Array("helloa",1,2)
}
for(x in testObj) alert( x + "-" + testObj[ x ] )
//-->
</script>
What about JScript.NET?
Once you have mastered JScript, you will find it easy to move over to .NET
As the .NET compiler will compile your code into the IL (Intermediate Language) you have the same power to create fully fledged applications as a C# programmer. The great thing about JScript.NET is that it supports typed and untyped programming, (for simple things) so you can still churn out apps quickly.
If you are making complicated Interfaces and such, there is no automatic recognition for this.
Getting as quickly to OOP as possible, I will quickly run over the slightly new syntax with you.
<script language="JScript" runat="server">
var tim : String = "hello";
foo : Array = ["1", "2", "3"];
</script>
You may now explicitly set the data type for a variable.
To make an object, you can use the old fashioned way with JScript, or make a class. For example;
<script language="JScript" runat="server">
public class timObject (n) {
private tim : String = hello; // tim is a property of the object
private name : String = n;
private talk : Function = function(e) { // method
alert ( this.name + " says hello")
}
}
</script>
Is there a prototype equivalent?
Yes; but you may still use prototype inheritance.
<script language="JScript" runat="server">
public class extends timObject {
function changeName( n ) {
this.name = n;
}
}
</script>
It is possible in .NET to make entire web services simply by making a class that extends the framework.
About the author: Tim Scarfe is a Web Developer/IT Guy from West London, England. He is very keen on W3C Standards and Accessibility. Tim runs http://www.developer-x.com
2007/11/07
[javascript] MochiKit-1.3.1 と dojo-0.3.1 との連携CommentsAdd Star
sample.html の内容は
こんな感じにしてみました。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hoge</title>
<meta http-equiv="Content-Style-Type" content="text/css; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript; charset=utf-8" />
<script type="text/javascript">
// <![CDATA[
var djConfig = {
compat: '0.2.2'
};
var MochiKit = {
__compat__: true
};
// ]]>
</script>
<script type="text/javascript" src="dojo-0.3.1-ajax/dojo.js"></script>
<script type="text/javascript">
// <![CDATA[
dojo.setModulePrefix('MochiKit', '../MochiKit-1.3.1/lib/MochiKit');
dojo.require('MochiKit.*');
// ]]>
</script>
</head>
<body>
<h1>ちょうテスト</h1>
</body>
</html>
そうすると
Firebug とかで確認すると Ajax で依存関係が読み込まれているのが分かります。
ちゃんと連携されてました ^^
でも、 Ajax で読み込むと eval されるので重いです。なので最終的には dojo.js と packed/MochiKit.js/MochiKit.js と他の dojo のクラスたちを連結させてひとつのファイルにして一番上に
var djConfig = {
compat: '0.2.2'
};
var MochiKit = {
__compat__: true
};
と追加すればいいと思います。
ちなみに
この
var MochiKit = {
__compat__: true
};
という記述は、 MochiKit の様々なクラスをグローバル領域にエクスポートするためのものです。 MochiKit.Color.Color などのようにフルパスで指定してもいい場合は false を指定するか、何も指定しないで OK です。
MochiKit はパッケージ管理システム(dojoやJSAN)といっしょに読み込まれるとグローバル領域を汚さないようにします。
それを逆に防ぐための方法です。
Permalink | コメント(2) | トラックバック(1) | 22:20 このエントリーを含むブックマーク このエントリーのブックマークコメント
[コメントを書く]
Voluntas Voluntas 『感謝の言葉しか出てきません、本当に有り難うございました。
__compat__: ture はどうがんばっても出てきませんorz
フルパスで指定しない場合も色々模索していたのですが
手がかりもまったくなく？？？でした。
>dojo.js と packed/MochiKit.js/MochiKit.js と他の dojo のクラスたちを連結させてひとつのファイル
これを明日にでも早速やってみようと思います。
疑問が一気に解決しました…有り難うございました。』 (2006/10/04 23:29)
amachang amachang 『__compat__: true は僕も出来なくて悩んでて、ソース読んでやっと出てきました ^^;
そういう意味でも、ブログ界隈でこのような話題が出て Google からクロールされて、世の中のナレッジとして蓄積されていくのはうれしいですね。』 (2006/10/05 16:08)
こんな感じにしてみました。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hoge</title>
<meta http-equiv="Content-Style-Type" content="text/css; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript; charset=utf-8" />
<script type="text/javascript">
// <![CDATA[
var djConfig = {
compat: '0.2.2'
};
var MochiKit = {
__compat__: true
};
// ]]>
</script>
<script type="text/javascript" src="dojo-0.3.1-ajax/dojo.js"></script>
<script type="text/javascript">
// <![CDATA[
dojo.setModulePrefix('MochiKit', '../MochiKit-1.3.1/lib/MochiKit');
dojo.require('MochiKit.*');
// ]]>
</script>
</head>
<body>
<h1>ちょうテスト</h1>
</body>
</html>
そうすると
Firebug とかで確認すると Ajax で依存関係が読み込まれているのが分かります。
ちゃんと連携されてました ^^
でも、 Ajax で読み込むと eval されるので重いです。なので最終的には dojo.js と packed/MochiKit.js/MochiKit.js と他の dojo のクラスたちを連結させてひとつのファイルにして一番上に
var djConfig = {
compat: '0.2.2'
};
var MochiKit = {
__compat__: true
};
と追加すればいいと思います。
ちなみに
この
var MochiKit = {
__compat__: true
};
という記述は、 MochiKit の様々なクラスをグローバル領域にエクスポートするためのものです。 MochiKit.Color.Color などのようにフルパスで指定してもいい場合は false を指定するか、何も指定しないで OK です。
MochiKit はパッケージ管理システム(dojoやJSAN)といっしょに読み込まれるとグローバル領域を汚さないようにします。
それを逆に防ぐための方法です。
Permalink | コメント(2) | トラックバック(1) | 22:20 このエントリーを含むブックマーク このエントリーのブックマークコメント
[コメントを書く]
Voluntas Voluntas 『感謝の言葉しか出てきません、本当に有り難うございました。
__compat__: ture はどうがんばっても出てきませんorz
フルパスで指定しない場合も色々模索していたのですが
手がかりもまったくなく？？？でした。
>dojo.js と packed/MochiKit.js/MochiKit.js と他の dojo のクラスたちを連結させてひとつのファイル
これを明日にでも早速やってみようと思います。
疑問が一気に解決しました…有り難うございました。』 (2006/10/04 23:29)
amachang amachang 『__compat__: true は僕も出来なくて悩んでて、ソース読んでやっと出てきました ^^;
そういう意味でも、ブログ界隈でこのような話題が出て Google からクロールされて、世の中のナレッジとして蓄積されていくのはうれしいですね。』 (2006/10/05 16:08)
Dojoで簡単にクロスドメインAjaxを実現
Dojoで簡単にクロスドメインAjaxを実現 このエントリーをブックマークに追加
こんにちわ、hideです。
最近、JavaScriptライブラリのDojoを使い初めて、その便利さに目覚めてしまいました。Ajaxで使用される通常のXMLHttpRequestではセキュリティ上の理由から、現在表示しているページ以外のドメインに対してリクエストを送ることができません。そこで考え出されたのが、JSONP(JSON with padding)という方法です。JavaScriptのインクルードは、同一ドメインでなくても読み込めるという性質を利用しています。
まずは下のボタンを押してみてください。実際にYahoo!から画像検索が実行されます。サーバを介さずにブラウザから直接Yahoo!APIを呼び出しているところがポイントです。
簡単に説明するとこういう仕組みです。次のようにリクエスト時のパラメータとして、callback関数を指定します。
http://example.com/json/?callback=importJS
サービス提供側は、このcallback関数でくくってデータを返します。
importJS([{"color":"red", "price":100}, {"color":"blue", "price":200}]);
このレスポンスは、JavaScriptとして実行されるので、importJSという関数を自分で用意しておけば、JSON形式のデータを引数で受け取って処理できるというわけです。このJSONPは、いろいろなJavaScriptライブラリから使えるのですが、DoJoを利用すると通常の XMLHttpRequestと同じように利用することができます。
次が、サンプルコードです。
<html>
<head>
<script type="text/javascript" src="dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.io");
dojo.require("dojo.io.ScriptSrcIO");
function getJSONP() {
dojo.io.bind({
url: 'http://api.search.yahoo.com/ImageSearchService/V1/imageSearch?appid=jsondemo' +
'&output=json&results=20&query=beach',
transport: "ScriptSrcTransport",
jsonParamName: "callback",
load: function(type, data, event, kwArgs) {
showOutput(data);
}
});
}
function showOutput(json) {
data = json['ResultSet']['Result'];
var html = '';
for (var i=0; i<data.length; i++) {
html += '<a href="'+data[i].RefererUrl+'">';
html += '<img src="' + data[i].Thumbnail.Url + '" height="100"></a>';
}
document.getElementById('output').innerHTML = html;
}
</script>
</head>
<body>
<input type="button" onclick="getJSONP()" value="Run"/>
<div id="output"></div>
</body>
</html>
このDojoですが、IT戦記さんのブログで紹介されているようにMochiKitを管理下に置けたりしてかなり面白いです。難点は日本語の情報がほとんどないことですが、本家のドキュメントが充実しているので使い方は理解できるんじゃないかと思います。
今、僕はDojoとPythonで書かれた非同期フレームワークTwistedをバックエンドにおいたComet型チャットを作っているので、近いうちに公開したいと思います。
こんにちわ、hideです。
最近、JavaScriptライブラリのDojoを使い初めて、その便利さに目覚めてしまいました。Ajaxで使用される通常のXMLHttpRequestではセキュリティ上の理由から、現在表示しているページ以外のドメインに対してリクエストを送ることができません。そこで考え出されたのが、JSONP(JSON with padding)という方法です。JavaScriptのインクルードは、同一ドメインでなくても読み込めるという性質を利用しています。
まずは下のボタンを押してみてください。実際にYahoo!から画像検索が実行されます。サーバを介さずにブラウザから直接Yahoo!APIを呼び出しているところがポイントです。
簡単に説明するとこういう仕組みです。次のようにリクエスト時のパラメータとして、callback関数を指定します。
http://example.com/json/?callback=importJS
サービス提供側は、このcallback関数でくくってデータを返します。
importJS([{"color":"red", "price":100}, {"color":"blue", "price":200}]);
このレスポンスは、JavaScriptとして実行されるので、importJSという関数を自分で用意しておけば、JSON形式のデータを引数で受け取って処理できるというわけです。このJSONPは、いろいろなJavaScriptライブラリから使えるのですが、DoJoを利用すると通常の XMLHttpRequestと同じように利用することができます。
次が、サンプルコードです。
<html>
<head>
<script type="text/javascript" src="dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.io");
dojo.require("dojo.io.ScriptSrcIO");
function getJSONP() {
dojo.io.bind({
url: 'http://api.search.yahoo.com/ImageSearchService/V1/imageSearch?appid=jsondemo' +
'&output=json&results=20&query=beach',
transport: "ScriptSrcTransport",
jsonParamName: "callback",
load: function(type, data, event, kwArgs) {
showOutput(data);
}
});
}
function showOutput(json) {
data = json['ResultSet']['Result'];
var html = '';
for (var i=0; i<data.length; i++) {
html += '<a href="'+data[i].RefererUrl+'">';
html += '<img src="' + data[i].Thumbnail.Url + '" height="100"></a>';
}
document.getElementById('output').innerHTML = html;
}
</script>
</head>
<body>
<input type="button" onclick="getJSONP()" value="Run"/>
<div id="output"></div>
</body>
</html>
このDojoですが、IT戦記さんのブログで紹介されているようにMochiKitを管理下に置けたりしてかなり面白いです。難点は日本語の情報がほとんどないことですが、本家のドキュメントが充実しているので使い方は理解できるんじゃないかと思います。
今、僕はDojoとPythonで書かれた非同期フレームワークTwistedをバックエンドにおいたComet型チャットを作っているので、近いうちに公開したいと思います。
2007/10/31
AJAX, Flash, Silverlight, or JavaFX - which will win?
AJAX, Flash, Silverlight, or JavaFX...
Must we choose?
By: Ric Smith
Sep. 26, 2007 07:30 PM
Digg This!
AJAX has forever altered user expectations regarding the experience delivered by the Web. In today's world, users sit at the edge of their seat waiting to see what scrumptious eye candy AJAX will serve them next. Some of the more notable visual effects and desktop-like interactions include Prototype-esque fades, Dojo style fisheyes, the near ubiquitous drag-and-drop, and, of course, who can live without the entertainment provided by the assortment of animated loading icons that now distract us while AJAX does its asynchronous "thing." Yes, it would appear that AJAX can do it all and that no desktop visual effect or gesture is safe from being outsourced to the Web.
High-Definition RIA Solutions: What Are They Good For?
This was my opinion, until I saw Apple's new Finder in the company's recently announced Leopard release of OSX. The Finder includes a file browsing feature called Cover Flow, which lets users page through previews of files that are displayed in a three-dimensional carousel. It is visual effects like this - effects that rely heavily on vector graphics - that are difficult to replicate with "pure" AJAX. In fact, competing technologies such as Adobe's Flex, Microsoft's Silverlight, and Sun's recently announced JavaFX render vector graphics substantially better than do AJAX frameworks such as Dojo or Yahoo! UI Library (YUI). Believe it or not, there is a significant business case mounting for Web-based vector graphics in terms of rich Internet application development that extends well beyond savory morsels of eye candy. This need is best represented by data visualization components that display business analytics (e.g., SAP and Oracle) as well as video playback and image editing software (e.g., YouTube and MixBook). Of course, RIA technologies that deliver vector graphics are not limited to the visualization domain; the Flex-based word processor BuzzWord provides a vivid example of one high-definition (HD) RIA solution delivering a complete Web application - one that is set to contend with a more popular application with AJAX roots, namely Google Docs. Thus, vector graphics are not the only thing HD RIA solutions bring to the table. Such frameworks also provide rich facilities for developing applications that deliver sound, sockets (pushing data), local storage, and video - areas where AJAX tends to lag behind.
Is the AJAX Revolution Over?
Does this mean AJAX has met its match? Not at all. It's true that Adobe Flash and similar technologies compete with AJAX, but there are certain limitations to these HD RIA frameworks that prevent them - for the time being - from being an out right replacement for AJAX without some considerable due diligence. Here are a few of the more notable things to consider when deciding between HD RIA solutions and AJAX:
• Plug-in required: HD RIA solutions require a browser plug-in. As of March 2007, 83.4% of PCs in the U.S., Canada, UK, Germany, France, and Japan have the Flash 9 player installed. Thus, it is arguable that Flash is virtually ubiquitous. However, even with a near universal install base, the need to upgrade a plug-in can be disruptive. More than half of users prompted to upgrade a plug-in upon visiting a site often abandon the redirect to download software and navigate to another site - possibly a competitor's site - in an effort to avoid the hassle of downloading and installing software. Note that neither JavaFX nor Sliverlight currently enjoy a fraction of the market share owned by the Adobe Flash Player. Also note that the 83.4% market share enjoyed by Flash 9 pales in comparison to the native AJAX support found in modern browsers such as IE 7.0, FireFox 2.0, and Safari 3.0.
• Lack of open standards: AJAX, unlike HD RIA solutions, is built on open standards such as (X)HTML, CSS, and JavaScript. HD RIA is traditionally proprietary with few open source options, much less standards. JavaFX, initially introduced as an open source effort, appears to be the leader at this time in terms of changing the status quo for HD RIA solutions, but it is by far the least evolved.
• Skills scarcity: Flex, Silverlight, and JavaFX each introduce its own respective language(s). AJAX on the other hand, relies on JavaScript, which is relatively well known, and is readily combined with other popular technologies such as Ruby-on-Rails, PHP, Java, and .NET.
• Does not play well with HTML: For new applications developed entirely with Flex this is not so much an issue, but for existing applications it can be a considerable problem. AJAX and, moreover, JavaScript, were created to complement HTML. The Flash runtime on the other hand lacks the flexibility to manipulate the structure of existing HTML pages with the ease that the JavaScript DOM object provides.
• Large download footprint: Flash-based RIA solutions tend to have a larger download footprint than solutions that rely on native AJAX support (e.g., Dojo, ICEFaces, Backbase, or Oracle ADF Faces Rich Client). The consequence of a larger download is a prolonged wait during application startup.
• Searchable, but not always found: In recent years, search engines have introduced the ability to index swf files into their respective Web crawlers. Yahoo and Google are the most well-advertised supporters of the file format, though the methodology used is not widely published or well understood. To optimize search results, Web designers often build both a Flash and a traditional HTML site or opt for embedded Flash movies within a traditional HTML site as an adornment to text-based content. Note that at the time of writing this article I could not procure information on how or when search engines will address this issue with emerging HD RIA technologies such as JavaFX and Silverlight.
• All clients are not created equal: With newer PCs, this concern is becoming less of a factor, but since HD RIA environments make heavy use of client resources to execute business logic as well as render visual effects, application performance is governed by the configuration of the client machine. Therefore, the user experience can vary from machine to machine. AJAX-based solutions that come with an inherited server-side component (e.g., Oracle ADF Faces Rich Client) can utilize server resources to off load both processing and rendering to ensure more uniform delivery to clients.
The reader should note that none of the considerations listed should prevent you from choosing Flash or similar products over AJAX. AJAX is certainly not without its own faults - many of which have, in recent years, had more visibility than those found in HD RIA solutions. Some of the more prominent issues that come to mind include slow JavaScript execution, memory leaks, numerous browser bugs, two connection limits, and CSS rendering issues. Simply put, to create an application on the order of Google Maps or GMail with AJAX, you must not be opposed to any manner of hackery. In addition, this article has already identified cases where HD RIA solutions outperform AJAX-based solutions, specifically in the realm of rendering vector graphics. But, at the other end of this equation it is apparent that AJAX is better suited for incremental updates to existing applications than say Flash or other HD RIA solutions, and AJAX is also better equipped to handle text-based content, which is currently the prominent medium for content on the Web - though, the more media-centric, real-time driven Web 3.0 might tip the scale to a richer format in the near future. Thus, currently no RIA solution on the market is absent of limitations.
Fortunately, the limiting factors of both AJAX and HD RIAs are - in general terms - mutually exclusive. Therefore, AJAX and technologies such Flash actually complement each other well and, as sites such as YouTube and SlideShare have proven, can be combined to create robust applications that provide both rich media and dynamic text. But, this introduces yet another dilemma and that is - not all developers are created equal, which conjures up the question of whether this concoction of RIA solutions is achievable by mere mortals?
The Best of Both Worlds, But Not Without Cost
The initial litmus test proves positive. Adobe Labs currently provides a Flex-AJAX Bridge that allows developers to manipulate a Flex application with JavaScript. In addition, the Silverlight DOM is accessible via JavaScript. Thus, HD RIA solutions are already looking to provide integration points for AJAX development. However, despite having APIs for integration, there are other complexities that lie a little further below the surface, namely the problem of finding skilled developers who have knowledge of Flash (or Silverlight and JavaFX), CSS, HTML, and JavaScript with a dash of PHP, Ruby-on-Rails, or Java. In addition, developers' skills are generally split between client and server functions, either being skilled in Flash and/or AJAX, but not server-side technologies. The inverse is also true. Therefore, you may need to hire one Flash and one AJAX guru rather than one or the other - doubling your expenditure on talent. Finally, there are few development tools, much less end-to-end development frameworks, that package all of these technologies into a single rapid application development environment. Ideally such an environment would include methods for visual development and other coding accelerators in addition to tools for declarative data binding. Thus, it would seem that productivity in terms of skills and tools is at a deficit for projects attempting to leverage both Flash and AJAX, or are they?
AJAX and Flash, Together at Last
In 2004, JavaServer Faces (JSF) set out to drastically simplify Web development and it appears that the standard, with the help of a few vendors, is looking to reinvigorate this effort once again. JSF is a server-side component framework that allows developers to use a single API to build Web-based applications that are capable of rendering to multiple devices. The key facet that enables such deployments is a highly flexible rendering engine or more specifically a render kit. Component frameworks such as Oracle ADF Faces have introduced render kits that not only render to HTML browsers, but also telnet clients, WML browsers, and ASK clients, creating multiple channels of delivery without the overhead of having to understand the nuances of the underlying technologies. You can easily see how this concept can be extended to AJAX and Flash. The idea being to create a set of components that render in AJAX as well as Flash, where AJAX is used to deliver enhanced forms, layouts, and data tables while Flash-based components serve more specialized purposes such as mapping, graphing charting, and other data visualization needs. Simply having a single API for development eliminates the need to understand JavaScript, (X)HTML, CSS, XML, JSON, and Flash (or any other RIA solution). Developers simply need to know the semantics of Java and the JSF API. Moreover, the need for deep understanding is lessened by the extensive tooling and visual design times (e.g., Oracle JDeveloper, NetBeans, Eclipse) currently available for JSF. The outcome is a development environment for creating and delivering highly interactive RIAs that are accessible to a broad range of developers with varying levels of skill.
However, despite an extensive choice of tools, there are few JSF component vendors that provide both Flash and AJAX-based components in a single framework. Some of the more notable JSF component vendors distributing AJAX-enabled frameworks include Backbase, ICEsoft, Oracle, JBoss, and ILOG. Presently, Oracle ADF Faces Rich Client represents one of the only frameworks that provides both AJAX- and Flash-enabled components. Moreover, to dispel any notion of proprietary intervention, Oracle recently announced at this year's JavaOne the contribution of Oracle ADF Faces Rich Client to the Apache Foundation as the MyFaces project Rich Client Framework (RCF). RCF demonstrates that JavaServer Faces can provide an open source solution, built on industry standards, that brings RIA developers the best of both worlds - HD RIA and AJAX - under one API.
Resources
• "How to Choose an RIA Path: AJAX or Adobe?" by Jeffrey Hammond http://ajax.sys-con.com/read/400296.htm
• "How to Design Flash Pages for Google" by James Gonzalez www.peachpit.com/articles/article.asp?p=454163&rl=1
• Apache MyFaces Rich Client Framework Proposal http://wiki.apache.org/myfaces/RCF_Proposal
• www.adobe.com
• http://labs.adobe.com
• www.microsoft.com/silverlight/
• www.sun.com/software/javafx/
Published Sep. 26, 2007 — Reads 7,577
Must we choose?
By: Ric Smith
Sep. 26, 2007 07:30 PM
Digg This!
AJAX has forever altered user expectations regarding the experience delivered by the Web. In today's world, users sit at the edge of their seat waiting to see what scrumptious eye candy AJAX will serve them next. Some of the more notable visual effects and desktop-like interactions include Prototype-esque fades, Dojo style fisheyes, the near ubiquitous drag-and-drop, and, of course, who can live without the entertainment provided by the assortment of animated loading icons that now distract us while AJAX does its asynchronous "thing." Yes, it would appear that AJAX can do it all and that no desktop visual effect or gesture is safe from being outsourced to the Web.
High-Definition RIA Solutions: What Are They Good For?
This was my opinion, until I saw Apple's new Finder in the company's recently announced Leopard release of OSX. The Finder includes a file browsing feature called Cover Flow, which lets users page through previews of files that are displayed in a three-dimensional carousel. It is visual effects like this - effects that rely heavily on vector graphics - that are difficult to replicate with "pure" AJAX. In fact, competing technologies such as Adobe's Flex, Microsoft's Silverlight, and Sun's recently announced JavaFX render vector graphics substantially better than do AJAX frameworks such as Dojo or Yahoo! UI Library (YUI). Believe it or not, there is a significant business case mounting for Web-based vector graphics in terms of rich Internet application development that extends well beyond savory morsels of eye candy. This need is best represented by data visualization components that display business analytics (e.g., SAP and Oracle) as well as video playback and image editing software (e.g., YouTube and MixBook). Of course, RIA technologies that deliver vector graphics are not limited to the visualization domain; the Flex-based word processor BuzzWord provides a vivid example of one high-definition (HD) RIA solution delivering a complete Web application - one that is set to contend with a more popular application with AJAX roots, namely Google Docs. Thus, vector graphics are not the only thing HD RIA solutions bring to the table. Such frameworks also provide rich facilities for developing applications that deliver sound, sockets (pushing data), local storage, and video - areas where AJAX tends to lag behind.
Is the AJAX Revolution Over?
Does this mean AJAX has met its match? Not at all. It's true that Adobe Flash and similar technologies compete with AJAX, but there are certain limitations to these HD RIA frameworks that prevent them - for the time being - from being an out right replacement for AJAX without some considerable due diligence. Here are a few of the more notable things to consider when deciding between HD RIA solutions and AJAX:
• Plug-in required: HD RIA solutions require a browser plug-in. As of March 2007, 83.4% of PCs in the U.S., Canada, UK, Germany, France, and Japan have the Flash 9 player installed. Thus, it is arguable that Flash is virtually ubiquitous. However, even with a near universal install base, the need to upgrade a plug-in can be disruptive. More than half of users prompted to upgrade a plug-in upon visiting a site often abandon the redirect to download software and navigate to another site - possibly a competitor's site - in an effort to avoid the hassle of downloading and installing software. Note that neither JavaFX nor Sliverlight currently enjoy a fraction of the market share owned by the Adobe Flash Player. Also note that the 83.4% market share enjoyed by Flash 9 pales in comparison to the native AJAX support found in modern browsers such as IE 7.0, FireFox 2.0, and Safari 3.0.
• Lack of open standards: AJAX, unlike HD RIA solutions, is built on open standards such as (X)HTML, CSS, and JavaScript. HD RIA is traditionally proprietary with few open source options, much less standards. JavaFX, initially introduced as an open source effort, appears to be the leader at this time in terms of changing the status quo for HD RIA solutions, but it is by far the least evolved.
• Skills scarcity: Flex, Silverlight, and JavaFX each introduce its own respective language(s). AJAX on the other hand, relies on JavaScript, which is relatively well known, and is readily combined with other popular technologies such as Ruby-on-Rails, PHP, Java, and .NET.
• Does not play well with HTML: For new applications developed entirely with Flex this is not so much an issue, but for existing applications it can be a considerable problem. AJAX and, moreover, JavaScript, were created to complement HTML. The Flash runtime on the other hand lacks the flexibility to manipulate the structure of existing HTML pages with the ease that the JavaScript DOM object provides.
• Large download footprint: Flash-based RIA solutions tend to have a larger download footprint than solutions that rely on native AJAX support (e.g., Dojo, ICEFaces, Backbase, or Oracle ADF Faces Rich Client). The consequence of a larger download is a prolonged wait during application startup.
• Searchable, but not always found: In recent years, search engines have introduced the ability to index swf files into their respective Web crawlers. Yahoo and Google are the most well-advertised supporters of the file format, though the methodology used is not widely published or well understood. To optimize search results, Web designers often build both a Flash and a traditional HTML site or opt for embedded Flash movies within a traditional HTML site as an adornment to text-based content. Note that at the time of writing this article I could not procure information on how or when search engines will address this issue with emerging HD RIA technologies such as JavaFX and Silverlight.
• All clients are not created equal: With newer PCs, this concern is becoming less of a factor, but since HD RIA environments make heavy use of client resources to execute business logic as well as render visual effects, application performance is governed by the configuration of the client machine. Therefore, the user experience can vary from machine to machine. AJAX-based solutions that come with an inherited server-side component (e.g., Oracle ADF Faces Rich Client) can utilize server resources to off load both processing and rendering to ensure more uniform delivery to clients.
The reader should note that none of the considerations listed should prevent you from choosing Flash or similar products over AJAX. AJAX is certainly not without its own faults - many of which have, in recent years, had more visibility than those found in HD RIA solutions. Some of the more prominent issues that come to mind include slow JavaScript execution, memory leaks, numerous browser bugs, two connection limits, and CSS rendering issues. Simply put, to create an application on the order of Google Maps or GMail with AJAX, you must not be opposed to any manner of hackery. In addition, this article has already identified cases where HD RIA solutions outperform AJAX-based solutions, specifically in the realm of rendering vector graphics. But, at the other end of this equation it is apparent that AJAX is better suited for incremental updates to existing applications than say Flash or other HD RIA solutions, and AJAX is also better equipped to handle text-based content, which is currently the prominent medium for content on the Web - though, the more media-centric, real-time driven Web 3.0 might tip the scale to a richer format in the near future. Thus, currently no RIA solution on the market is absent of limitations.
Fortunately, the limiting factors of both AJAX and HD RIAs are - in general terms - mutually exclusive. Therefore, AJAX and technologies such Flash actually complement each other well and, as sites such as YouTube and SlideShare have proven, can be combined to create robust applications that provide both rich media and dynamic text. But, this introduces yet another dilemma and that is - not all developers are created equal, which conjures up the question of whether this concoction of RIA solutions is achievable by mere mortals?
The Best of Both Worlds, But Not Without Cost
The initial litmus test proves positive. Adobe Labs currently provides a Flex-AJAX Bridge that allows developers to manipulate a Flex application with JavaScript. In addition, the Silverlight DOM is accessible via JavaScript. Thus, HD RIA solutions are already looking to provide integration points for AJAX development. However, despite having APIs for integration, there are other complexities that lie a little further below the surface, namely the problem of finding skilled developers who have knowledge of Flash (or Silverlight and JavaFX), CSS, HTML, and JavaScript with a dash of PHP, Ruby-on-Rails, or Java. In addition, developers' skills are generally split between client and server functions, either being skilled in Flash and/or AJAX, but not server-side technologies. The inverse is also true. Therefore, you may need to hire one Flash and one AJAX guru rather than one or the other - doubling your expenditure on talent. Finally, there are few development tools, much less end-to-end development frameworks, that package all of these technologies into a single rapid application development environment. Ideally such an environment would include methods for visual development and other coding accelerators in addition to tools for declarative data binding. Thus, it would seem that productivity in terms of skills and tools is at a deficit for projects attempting to leverage both Flash and AJAX, or are they?
AJAX and Flash, Together at Last
In 2004, JavaServer Faces (JSF) set out to drastically simplify Web development and it appears that the standard, with the help of a few vendors, is looking to reinvigorate this effort once again. JSF is a server-side component framework that allows developers to use a single API to build Web-based applications that are capable of rendering to multiple devices. The key facet that enables such deployments is a highly flexible rendering engine or more specifically a render kit. Component frameworks such as Oracle ADF Faces have introduced render kits that not only render to HTML browsers, but also telnet clients, WML browsers, and ASK clients, creating multiple channels of delivery without the overhead of having to understand the nuances of the underlying technologies. You can easily see how this concept can be extended to AJAX and Flash. The idea being to create a set of components that render in AJAX as well as Flash, where AJAX is used to deliver enhanced forms, layouts, and data tables while Flash-based components serve more specialized purposes such as mapping, graphing charting, and other data visualization needs. Simply having a single API for development eliminates the need to understand JavaScript, (X)HTML, CSS, XML, JSON, and Flash (or any other RIA solution). Developers simply need to know the semantics of Java and the JSF API. Moreover, the need for deep understanding is lessened by the extensive tooling and visual design times (e.g., Oracle JDeveloper, NetBeans, Eclipse) currently available for JSF. The outcome is a development environment for creating and delivering highly interactive RIAs that are accessible to a broad range of developers with varying levels of skill.
However, despite an extensive choice of tools, there are few JSF component vendors that provide both Flash and AJAX-based components in a single framework. Some of the more notable JSF component vendors distributing AJAX-enabled frameworks include Backbase, ICEsoft, Oracle, JBoss, and ILOG. Presently, Oracle ADF Faces Rich Client represents one of the only frameworks that provides both AJAX- and Flash-enabled components. Moreover, to dispel any notion of proprietary intervention, Oracle recently announced at this year's JavaOne the contribution of Oracle ADF Faces Rich Client to the Apache Foundation as the MyFaces project Rich Client Framework (RCF). RCF demonstrates that JavaServer Faces can provide an open source solution, built on industry standards, that brings RIA developers the best of both worlds - HD RIA and AJAX - under one API.
Resources
• "How to Choose an RIA Path: AJAX or Adobe?" by Jeffrey Hammond http://ajax.sys-con.com/read/400296.htm
• "How to Design Flash Pages for Google" by James Gonzalez www.peachpit.com/articles/article.asp?p=454163&rl=1
• Apache MyFaces Rich Client Framework Proposal http://wiki.apache.org/myfaces/RCF_Proposal
• www.adobe.com
• http://labs.adobe.com
• www.microsoft.com/silverlight/
• www.sun.com/software/javafx/
Published Sep. 26, 2007 — Reads 7,577
2007/10/29
Ajax Frameworkを評価する
Ajax Frameworkを評価する
作者 Scott Delap, 翻訳者 松本 清一 投稿日 2007年9月4日 午前12時0分
コミュニティ
Java
トピック
Webフレームワーク
Dr. Dobbs氏は、T. Rowe Priceの開発チームで作業をする過程で選択したAjaxフレームワークのケーススタディについて書いている。そのチームは、次世代のアプリケーションに利用するために、次にあげる著名なAjaxフレームワークの評価を行った。
* Dojo 0.3.1 (dojotoolkit.org).
* Prototype and Scriptaculous 1.4 (www.prototypejs.org and script.aculo.us).
* Direct Web Reporting 1.0 (getahead.org/dwr).
* Yahoo! User Interface Library 0.11.1 (developer.yahoo.com/yui).
* Google Web Toolkit 1.0 (code.google.com/webtoolkit).
初めのレビューで、新たにJavaベースAPIを必要とするUIとバックエンドを開発するレガシーチームの部門があったことから、GWTを評価の対象から除外した。さらに、DWRについても、T. Rowe Priceで評価に使用したWebsphereアプリケーションサーバのバージョンでは、パッチが必要であったことから除外した。この結果、Dojo、Prototype、Yahoo UIの評価を行うことになった。
それぞれのフレームワークが、タブベースのAjaxの画面コンポーネントと動的に表示/非表示が切り替わるタイトルバーのついたハブコンポーネント (※1)を作成するのに必要となるものが十分に満たされているか、というケーススタディを行った。3つのフレームワーク全てがタブ画面に求められる機能を満たしていたが、特にDojoに関しては、型にとらわれず一番良いものを提供していた。T. Rowe Priceチームは、次にロード時間の評価を行った。
フレームワークがよりコンパクトなサイズであれば、パフォーマンスの低下を防ぐことができます。JavaScriptファイル全てを圧縮したサイズは、Yahoo UIが22K、Prototypeが32Kであり、Dojo単体でのファイルサイズだけで200Kもあることから比べると、とてもサイズが小さいと言えます。3つのライブラリ全てが、高帯域のネットワーク接続でスムーズに動作しますが、YUIとPrototype/Scriptaculous prototypesについては、56Kのダイアルアップ接続でも快適に動作しました。
最後に、T. Rowe Priceチームは、開発のしやすさについて評価した。Dojoについては、画面コンポーネントなど良いものを提供しているが、修正の際にいくつものファイルを修正しなければならないという点で、メンテナンスの面では難があるという意見で一致した。最終的には、YahooのWebサイトにコードを解説したドキュメントや詳細なチュートリアルが十分にあるという点で、 Yahoo UIが一番に選ばれた。
作者 Scott Delap, 翻訳者 松本 清一 投稿日 2007年9月4日 午前12時0分
コミュニティ
Java
トピック
Webフレームワーク
Dr. Dobbs氏は、T. Rowe Priceの開発チームで作業をする過程で選択したAjaxフレームワークのケーススタディについて書いている。そのチームは、次世代のアプリケーションに利用するために、次にあげる著名なAjaxフレームワークの評価を行った。
* Dojo 0.3.1 (dojotoolkit.org).
* Prototype and Scriptaculous 1.4 (www.prototypejs.org and script.aculo.us).
* Direct Web Reporting 1.0 (getahead.org/dwr).
* Yahoo! User Interface Library 0.11.1 (developer.yahoo.com/yui).
* Google Web Toolkit 1.0 (code.google.com/webtoolkit).
初めのレビューで、新たにJavaベースAPIを必要とするUIとバックエンドを開発するレガシーチームの部門があったことから、GWTを評価の対象から除外した。さらに、DWRについても、T. Rowe Priceで評価に使用したWebsphereアプリケーションサーバのバージョンでは、パッチが必要であったことから除外した。この結果、Dojo、Prototype、Yahoo UIの評価を行うことになった。
それぞれのフレームワークが、タブベースのAjaxの画面コンポーネントと動的に表示/非表示が切り替わるタイトルバーのついたハブコンポーネント (※1)を作成するのに必要となるものが十分に満たされているか、というケーススタディを行った。3つのフレームワーク全てがタブ画面に求められる機能を満たしていたが、特にDojoに関しては、型にとらわれず一番良いものを提供していた。T. Rowe Priceチームは、次にロード時間の評価を行った。
フレームワークがよりコンパクトなサイズであれば、パフォーマンスの低下を防ぐことができます。JavaScriptファイル全てを圧縮したサイズは、Yahoo UIが22K、Prototypeが32Kであり、Dojo単体でのファイルサイズだけで200Kもあることから比べると、とてもサイズが小さいと言えます。3つのライブラリ全てが、高帯域のネットワーク接続でスムーズに動作しますが、YUIとPrototype/Scriptaculous prototypesについては、56Kのダイアルアップ接続でも快適に動作しました。
最後に、T. Rowe Priceチームは、開発のしやすさについて評価した。Dojoについては、画面コンポーネントなど良いものを提供しているが、修正の際にいくつものファイルを修正しなければならないという点で、メンテナンスの面では難があるという意見で一致した。最終的には、YahooのWebサイトにコードを解説したドキュメントや詳細なチュートリアルが十分にあるという点で、 Yahoo UIが一番に選ばれた。
2007/10/25
javascript java style package and constructor demo
javascript java style package and constructor demo
//------------------------------------
// declaration
/** create package pkg. keep the exits package */
var pkg = (pkg) ? pkg : {};
/** create class Test */
pkg.Test = (pkg.Test) ? lgr.warn("pkg.Test already exists, ignore.") : function (str) {
/** private member */
var _str;
/** property get */
this.getStr = function () {
// not need "this." for the private variable
return _str;
}
/** property set */
this.setStr = function (str) {
// not need "this." for the private variable
_str = str;
// smalltalk style return this
return this;
}
}
//------------------------------------
// test pobject, load the package before execute
var test = new pkg.Test ("init test");
test.setStr("modified");
// another object
var test2 = new pkg.Test ("init test2");
test2.setStr("modified2");
// inspect second object, should display "test2"
alert("test2 is" + test2.getStr());
// inspect first object, should display "test"
alert("test is" + test.getStr());
// try to inspect private variable, should display "undefined"
alert("try to access private member _str from outside. result is" + test._str);
2007/10/24
YUI
YUIのｖ0.11.2を眺めていたら、yahoo.jsにYAHOO.extendが追加されていました。要するに継承の実装なわけですが、 prototype.jsのextend のようなシンプルなコピーではなくて、コンストラクタとメソッドをチェーンでつなぐと。うーん、今、試す時間がない、けど、メモ。
/** * Utility to set up the prototype, constructor and superclass properties to * support an inheritance strategy that can chain constructors and methods. * * @param {Function} subclass the object to modify * @param {Function} superclass the object to inherit */ YAHOO.extend = function(subclass, superclass) { var f = function() {}; f.prototype = superclass.prototype; subclass.prototype = new f(); subclass.prototype.constructor = subclass; subclass.superclass = superclass.prototype; if (superclass.prototype.constructor == Object.prototype.constructor) { superclass.prototype.constructor = superclass; } };
と思ったら、READMEにちゃんと書いてありました。
0.11.0 * Added YAHOO.extend, which provides an easy way to assign the prototype, constructor, and superclass properties inheritance properties. It also prevents the constructor of the superclass from being exectuted twice.
ざっくり訳::0.11.0 * YAHOO.extendを加えました。(YAHOO.extendはプロパティの継承をプロトタイプ、コンストラクタ、およびスーパークラスに割り当てる簡単な方法を提供します)。 それによって、二度スーパークラスのコンストラクタがexectutedされることはありません。
別物ですが、一応、ちなみに、prototype.jsのObject.extend
Object.extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination; }
ついでに、私が愛用しているコピー関数copyOj。prototype.jsのObject.extendと等価ですがObject汚染しないただの関数です。
function copyOj(oj,aoj) { for(var i in aoj){ oj[i]=aoj[i] };return oj; } //applyを使わないのはfor MacIE
ちなみに、JavaScriptでの継承つながりで、こういうのを作っている方もいます。 クラスパッケージ化ツール CPT
/** * Utility to set up the prototype, constructor and superclass properties to * support an inheritance strategy that can chain constructors and methods. * * @param {Function} subclass the object to modify * @param {Function} superclass the object to inherit */ YAHOO.extend = function(subclass, superclass) { var f = function() {}; f.prototype = superclass.prototype; subclass.prototype = new f(); subclass.prototype.constructor = subclass; subclass.superclass = superclass.prototype; if (superclass.prototype.constructor == Object.prototype.constructor) { superclass.prototype.constructor = superclass; } };
と思ったら、READMEにちゃんと書いてありました。
0.11.0 * Added YAHOO.extend, which provides an easy way to assign the prototype, constructor, and superclass properties inheritance properties. It also prevents the constructor of the superclass from being exectuted twice.
ざっくり訳::0.11.0 * YAHOO.extendを加えました。(YAHOO.extendはプロパティの継承をプロトタイプ、コンストラクタ、およびスーパークラスに割り当てる簡単な方法を提供します)。 それによって、二度スーパークラスのコンストラクタがexectutedされることはありません。
別物ですが、一応、ちなみに、prototype.jsのObject.extend
Object.extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination; }
ついでに、私が愛用しているコピー関数copyOj。prototype.jsのObject.extendと等価ですがObject汚染しないただの関数です。
function copyOj(oj,aoj) { for(var i in aoj){ oj[i]=aoj[i] };return oj; } //applyを使わないのはfor MacIE
ちなみに、JavaScriptでの継承つながりで、こういうのを作っている方もいます。 クラスパッケージ化ツール CPT
Ajaxを超える高速クライアント開発も実現 Cacheの最新版は開発効率をさらに向上
Ajaxを超える高速クライアント開発も実現
Cacheの最新版は開発効率をさらに向上
2006/11/16
インターシステムズジャパンは11月16日、同社のデータベース「Cache」（キャシエ）の最新版「Cache 2007」を12月にリリースすると発表した。
Cacheは米インターシステムズの売り上げの約90％を占める主力製品。高性能で開発効率の高いオブジェクト指向データベースとして、医療業界などでの採用が進んでいる。
Cache 2007は、主な新機能としてユーザー・インターフェイス開発技術の「Zen」、そしてオブジェクト／リレーショナルのマッピングを自動化する「Jalapeno」を搭載する。
米インターシステムズの戦略立案担当副社長 ポール・グラブシャイ氏
「ZenはAjaxのコンセプトをCacheに実装したもの」と米インターシステムズの戦略立案担当副社長 ポール・グラブシャイ氏は説明した。Zenでは、一般的なAjaxと同様、ページ定義にXMLを用いたJavaScriptによるWebブラウザベースのユーザー・アプリケーションを開発する。だが、付属のコンポーネントライブラリを用い、XMLによるページ定義と合わせてコンパイルすることで、高速な実行が可能になる。
Zenではオブジェクトをサーバとクライアントで共有することができる。また、テキスト部分だけをユーザー・アプリケーションから切り分けて管理できるため、単一のアプリケーションに対して容易に多国語版を提供することが可能になる。
JalapenoはJavaオプジェクトとデータベースの接続における新方法。両者の接続を自動化する方法としてHibernateなどのO/Rマッピングツールが提供されているが、これではXML定義ファイルをメンテナンスするなどの手間から解放されない。これに対しCacheはO/Rマッピングという作業自体を不要にし、オブジェクトデータベースとしてのCacheへの直接アクセスを実現することで、この手間を削減した。とはいえCache側でクラス定義を作成してからJavaのプロキシクラスを生成するという作業が必要とされていた。そこでJalapenoでは、Cache側のクラス定義を自動化し、開発者がJavaアプリ開発に専念できるようにしたという。
Cacheの最新版は開発効率をさらに向上
2006/11/16
インターシステムズジャパンは11月16日、同社のデータベース「Cache」（キャシエ）の最新版「Cache 2007」を12月にリリースすると発表した。
Cacheは米インターシステムズの売り上げの約90％を占める主力製品。高性能で開発効率の高いオブジェクト指向データベースとして、医療業界などでの採用が進んでいる。
Cache 2007は、主な新機能としてユーザー・インターフェイス開発技術の「Zen」、そしてオブジェクト／リレーショナルのマッピングを自動化する「Jalapeno」を搭載する。
米インターシステムズの戦略立案担当副社長 ポール・グラブシャイ氏
「ZenはAjaxのコンセプトをCacheに実装したもの」と米インターシステムズの戦略立案担当副社長 ポール・グラブシャイ氏は説明した。Zenでは、一般的なAjaxと同様、ページ定義にXMLを用いたJavaScriptによるWebブラウザベースのユーザー・アプリケーションを開発する。だが、付属のコンポーネントライブラリを用い、XMLによるページ定義と合わせてコンパイルすることで、高速な実行が可能になる。
Zenではオブジェクトをサーバとクライアントで共有することができる。また、テキスト部分だけをユーザー・アプリケーションから切り分けて管理できるため、単一のアプリケーションに対して容易に多国語版を提供することが可能になる。
JalapenoはJavaオプジェクトとデータベースの接続における新方法。両者の接続を自動化する方法としてHibernateなどのO/Rマッピングツールが提供されているが、これではXML定義ファイルをメンテナンスするなどの手間から解放されない。これに対しCacheはO/Rマッピングという作業自体を不要にし、オブジェクトデータベースとしてのCacheへの直接アクセスを実現することで、この手間を削減した。とはいえCache側でクラス定義を作成してからJavaのプロキシクラスを生成するという作業が必要とされていた。そこでJalapenoでは、Cache側のクラス定義を自動化し、開発者がJavaアプリ開発に専念できるようにしたという。
2007/10/22
a japanese prototype page
* (1) - Prototypeオブジェクト
* (2) - Classオブジェクト
* (3) - Abstractオブジェクト
* (4) - Object.extendメソッド
* (5) - Objectオブジェクト その他の拡張メソッド
* (6) - Functionクラス bind、bindAsEventListenerメソッド
* (7) - Numberクラス toColorPart、succ、timesメソッド
* (8) - Tryオブジェクト
* (9) - PeriodicalExecuterクラス
* (10) - Stringクラス gsub、sub、scanメソッド
* (11) - Stringクラス truncate、strip、stripTagsメソッド
* (12) - Stringクラス stripScripts、extractScripts、evalScriptsメソッド
* (13) - Stringクラス escapeHTML、unescapeHTMLメソッド
* (14) - Stringクラス toQueryParams、toArray、succメソッド
* (15) - Stringクラス camelize、capitalize、underscore、dasherizeメソッド
* (16) - Stringクラス inspectメソッド、その他のメソッド
* (17) - Templateクラス
* (18) - $break、$continue、Enumerableオブジェクト eachメソッド
* (19) - Enumerableオブジェクト eachSlice、all、anyメソッド
* (20) - Enumerableオブジェクト collect、detect、findAllメソッド
* (21) - Enumerableオブジェクト grep、include、inGroupsOfメソッド
* (22) - Enumerableオブジェクト inject、invoke、max、minメソッド
* (23) - Enumerableオブジェクト partition、pluck、rejectメソッド
* (24) - Enumerableオブジェクト sortBy、toArray、zip、sizeメソッド
* (25) - Enumerableオブジェクト inspectメソッド、その他の別名メソッド
* (26) - $A関数、Array.fromメソッド
* (27) - Arrayクラス _reverse、_eachメソッド
* (28) - Arrayクラス clear、first、last、compactメソッド
* (29) - Arrayクラス flatten、without、indexOfメソッド
* (30) - Arrayクラス reverse、reduce、uniqメソッド
* (31) - Arrayクラス clone、size、inspect、toArrayメソッド
* (32) - $w関数
* (33) - Operaブラウザに対するArrayクラス書き換え
* (34) - Hashクラス コンストラクタ、Hash.toQueryStringメソッド
* (35) - Hashクラス _eachメソッド
* (36) - Hashクラス keys、values、mergeメソッド
* (37) - Hashクラス remove、toQueryString、inspectメソッド
* (38) - $H関数
* (39) - ObjectRangeクラス、$R関数
* (40) - Ajaxオブジェクト
* (41) - Ajax.Respondersオブジェクト
* (42) - Ajax.Baseクラス
* (43) - Ajax.Requestクラス コンストラクタ、requestメソッド
* (44) - Ajax.Requestクラス onStateChange、setRequestHeadersメソッド
* (45) - Ajax.Requestクラス success、respondToReadyStateメソッド
* (46) - Ajax.Requestクラス getHeader、evalJSONメソッド
* (47) - Ajax.Requestクラス evalResponse、dispatchExceptionメソッド
* (48) - Ajax.Updaterクラス
* (49) - Ajax.PeriodicalUpdaterクラス
* (50) - $関数
* (51) - document.getElementsByClassNameメソッド
* (52) - Element.extendメソッド
* (53) - Element拡張 visible、toggle、hide、showメソッド
* (54) - Element拡張 remove、update、replaceメソッド
* (55) - Element拡張 inspect、recursivelyCollectメソッド
* (56) - Element拡張 ancestors、descendants、immediateDescendantsメソッド
* (57) - Element拡張 previousSiblings、nextSiblings、siblingsメソッド
* (58) - Element拡張 match、up、down、previous、nextメソッド
* (59) - Element拡張 getElementsBySelector、getElementsByClassNameメソッド
* (60) - Element拡張 readAttribute、getHeight、getWidthメソッド
* (61) - Element拡張 classNames、hasClassNameメソッド
* (62) - Element拡張 addClassName、removeClassName、toggleClassNameメソッド
* (63) - Element拡張 observe、stopObserving、cleanWhitespaceメソッド
* (64) - Element拡張 empty、descendantOf、scrollToメソッド
* (65) - Element拡張 getStyle、setStyleメソッド
* (66) - Element拡張 getDimensions、makePositioned、undoPositionedメソッド
* (67) - Element拡張 makeClipping、undoClipping、childOfメソッド
* (68) - Element._attributeTranslationsオブジェクト
* (69) - Element拡張 hasAttributeメソッド
* (70) - Internet Explorerに対するElement拡張書き換え
* (71) - Element.addMethodsメソッド
* (72) - Toggleオブジェクト
* (73) - Abstract.Insertion抽象クラス
* (74) - Insertion.Before、Insertion.Topクラス
* (75) - Insertion.Bottom、Insertion.Afterクラス
* (76) - Element.ClassNamesクラス
* (77) - Selectorクラス コンストラクタ、parseExpressionメソッド
* (78) - Selectorクラス buildMatchExpression、compileMatcherメソッド
* (79) - Selectorクラス findElements、toStringメソッド
* (2) - Classオブジェクト
* (3) - Abstractオブジェクト
* (4) - Object.extendメソッド
* (5) - Objectオブジェクト その他の拡張メソッド
* (6) - Functionクラス bind、bindAsEventListenerメソッド
* (7) - Numberクラス toColorPart、succ、timesメソッド
* (8) - Tryオブジェクト
* (9) - PeriodicalExecuterクラス
* (10) - Stringクラス gsub、sub、scanメソッド
* (11) - Stringクラス truncate、strip、stripTagsメソッド
* (12) - Stringクラス stripScripts、extractScripts、evalScriptsメソッド
* (13) - Stringクラス escapeHTML、unescapeHTMLメソッド
* (14) - Stringクラス toQueryParams、toArray、succメソッド
* (15) - Stringクラス camelize、capitalize、underscore、dasherizeメソッド
* (16) - Stringクラス inspectメソッド、その他のメソッド
* (17) - Templateクラス
* (18) - $break、$continue、Enumerableオブジェクト eachメソッド
* (19) - Enumerableオブジェクト eachSlice、all、anyメソッド
* (20) - Enumerableオブジェクト collect、detect、findAllメソッド
* (21) - Enumerableオブジェクト grep、include、inGroupsOfメソッド
* (22) - Enumerableオブジェクト inject、invoke、max、minメソッド
* (23) - Enumerableオブジェクト partition、pluck、rejectメソッド
* (24) - Enumerableオブジェクト sortBy、toArray、zip、sizeメソッド
* (25) - Enumerableオブジェクト inspectメソッド、その他の別名メソッド
* (26) - $A関数、Array.fromメソッド
* (27) - Arrayクラス _reverse、_eachメソッド
* (28) - Arrayクラス clear、first、last、compactメソッド
* (29) - Arrayクラス flatten、without、indexOfメソッド
* (30) - Arrayクラス reverse、reduce、uniqメソッド
* (31) - Arrayクラス clone、size、inspect、toArrayメソッド
* (32) - $w関数
* (33) - Operaブラウザに対するArrayクラス書き換え
* (34) - Hashクラス コンストラクタ、Hash.toQueryStringメソッド
* (35) - Hashクラス _eachメソッド
* (36) - Hashクラス keys、values、mergeメソッド
* (37) - Hashクラス remove、toQueryString、inspectメソッド
* (38) - $H関数
* (39) - ObjectRangeクラス、$R関数
* (40) - Ajaxオブジェクト
* (41) - Ajax.Respondersオブジェクト
* (42) - Ajax.Baseクラス
* (43) - Ajax.Requestクラス コンストラクタ、requestメソッド
* (44) - Ajax.Requestクラス onStateChange、setRequestHeadersメソッド
* (45) - Ajax.Requestクラス success、respondToReadyStateメソッド
* (46) - Ajax.Requestクラス getHeader、evalJSONメソッド
* (47) - Ajax.Requestクラス evalResponse、dispatchExceptionメソッド
* (48) - Ajax.Updaterクラス
* (49) - Ajax.PeriodicalUpdaterクラス
* (50) - $関数
* (51) - document.getElementsByClassNameメソッド
* (52) - Element.extendメソッド
* (53) - Element拡張 visible、toggle、hide、showメソッド
* (54) - Element拡張 remove、update、replaceメソッド
* (55) - Element拡張 inspect、recursivelyCollectメソッド
* (56) - Element拡張 ancestors、descendants、immediateDescendantsメソッド
* (57) - Element拡張 previousSiblings、nextSiblings、siblingsメソッド
* (58) - Element拡張 match、up、down、previous、nextメソッド
* (59) - Element拡張 getElementsBySelector、getElementsByClassNameメソッド
* (60) - Element拡張 readAttribute、getHeight、getWidthメソッド
* (61) - Element拡張 classNames、hasClassNameメソッド
* (62) - Element拡張 addClassName、removeClassName、toggleClassNameメソッド
* (63) - Element拡張 observe、stopObserving、cleanWhitespaceメソッド
* (64) - Element拡張 empty、descendantOf、scrollToメソッド
* (65) - Element拡張 getStyle、setStyleメソッド
* (66) - Element拡張 getDimensions、makePositioned、undoPositionedメソッド
* (67) - Element拡張 makeClipping、undoClipping、childOfメソッド
* (68) - Element._attributeTranslationsオブジェクト
* (69) - Element拡張 hasAttributeメソッド
* (70) - Internet Explorerに対するElement拡張書き換え
* (71) - Element.addMethodsメソッド
* (72) - Toggleオブジェクト
* (73) - Abstract.Insertion抽象クラス
* (74) - Insertion.Before、Insertion.Topクラス
* (75) - Insertion.Bottom、Insertion.Afterクラス
* (76) - Element.ClassNamesクラス
* (77) - Selectorクラス コンストラクタ、parseExpressionメソッド
* (78) - Selectorクラス buildMatchExpression、compileMatcherメソッド
* (79) - Selectorクラス findElements、toStringメソッド
2007/10/19
2007/08/22
Subscribe to:
Posts (Atom)