Just another WordPress.com site
Example 1
var x = new Array(
new Array(
new Array(“hehe”, “hoho”, “haha”),
new Array(“tenten”, “tintin”, “lala”)),
new Array(
new Array(“hihi”, “haha”),
new Array(“kaka”, “titi”))
);
alert(x[1][1][1]); // returns ‘titi’
Example 2
If you have a structure like this one
var provinces = [
{ name: “Province A”, cities: [
{ name: “City A.A”, malls: [
{ name: “Mall A.A.1” },
{ name: “Mall A.A.2” }
] },
{ name: “City A.B”, malls: [
{ name: “Mall A.B.1” }
] }
] },
{ name: “Province B”, cities: [
{ name: “City B.A”, malls: [
{ name: “Mall B.A.1” },
{ name: “Mall B.A.2” }
] },
{ name: “City B.B”, malls: [] }
] }
];
Then you can populate the dropdowns like so:
function populateDropdown(drop, items) {
drop.empty();
for(var i = 0; i < items.length; i++) {
drop.append(‘<option value=’ + i + ‘>’ + items[i].name + ‘</option>’);
}
drop.show();
}
populateDropdown( $(‘#provinces’), provinces );
And upon an action:
$(‘#provinces’).change(function() {
var provinceIndex = $(this).val();
var province = provinces[provinceIndex];
populateDropdown( $(‘#cities’), province.cities );
$(‘#malls’).hide();
});
$(‘#cities’).change(function() {
var provinceIndex = $(‘#provinces’).val();
var province = provinces[provinceIndex];
var cityIndex = $(this).val();
var city = province.cities[cityIndex];
populateDropdown( $(‘#malls’), city.malls );
});
EDIT
If the data structure on top looks hard to read, by the way, it’s the exact same thing as the following:
var provinces = [];
// populate provinces
provinces.push({ name: “Province A”, cities: [] });
provinces.push({ name: “Province B”, cities: [] });
// populate cities
provinces[0].cities.push({ name: “City A.A”, malls: [] });
provinces[0].cities.push({ name: “City A.B”, malls: [] });
provinces[1].cities.push({ name: “City B.A”, malls: [] });
provinces[1].cities.push({ name: “City B.B”, malls: [] });
// populate malls
provinces[0].cities[0].malls.push({ name: “Mall A.A.1” });
provinces[0].cities[0].malls.push({ name: “Mall A.A.2” });
provinces[0].cities[1].malls.push({ name: “Mall A.B.1” });
provinces[1].cities[0].malls.push({ name: “Mall B.A.1” });
provinces[1].cities[0].malls.push({ name: “Mall B.A.2” });
XML and JavaScript
– Premshree Pillai
Introduction:
XML is a very important base on which Web Services work. XML can be used in conjunction with a lot of client side and server side languages to put it to good effect.
Let us see how we can use XML and client side JavaScript to work. We will see how we can display the contents of a XML file using JavaScript, accessing child elements, manipulating elements etc.
Browser Issues:
When it comes client side languages browser incompatibilities is a major issue. But here where we want to use XML and JavaScript, XML is the issue. Not all browsers have support for parsing XML documents. I will use IE6 to explain the codes. Browsers that do not support XML, cannot read them. When you view an XML file in such a browser it will just ignore all the tags.
Sample XML file:
Let us consider a sample XML file >>
<?xml version=”1.0″ ?>
<company>
<employee id=”001″ sex=”M” age=”19″>Premshree Pillai</employee>
<employee id=”002″ sex=”M” age=”24″>Kumar Singh</employee>
<employee id=”003″ sex=”M” age=”21″>Ranjit Kapoor</employee>
<turnover>
<year id=”2000″>100,000</year>
<year id=”2001″>140,000</year>
<year id=”2002″>200,000</year>
</turnover>
</company>
The above XML file shows employee data and Turnover of the company (just an e.g).
Manipulating XML file data using JavaScript:
· Loading XML file: You can load a XML fie from JavaScript like this >>
var xmlDoc = new ActiveXObject(“Microsoft.XMLDOM”);
function loadXML(xmlFile)
{
xmlDoc.async=”false”;
xmlDoc.onreadystatechange=verify;
xmlDoc.load(xmlFile);
xmlObj=xmlDoc.documentElement;
}
Actually, just the last two lines of the function are enough to load the XML file. The previous two lines are written to ensure that the JavaScript functions that we may use later to manipulate the XML file data, does not perform any function on an uninitialized object. Thus the function verify()is called.
function verify()
{
// 0 Object is not initialized
// 1 Loading object is loading data
// 2 Loaded object has loaded data
// 3 Data from object can be worked with
// 4 Object completely initialized
if (xmlDoc.readyState != 4)
{
return false;
}
}
Now the XML file can be loaded
loadXML(‘xml_file.xml’);
· Displaying contents of XML file: View the entire contents of the XML file using alert(xmlObj.xml);
The entire XML file will be displayed in an alert box as it is with proper indentation.
· Children and nodes: In the above XML file <company> is the top level tag under which all other tags come. These tags are called children. The above XML file can be represented graphically like a folder-tree. A folder-tree is shown below.
|
· |
Thus in the above XML file the top level tag <company> has 4 children.
The numbering of children (as is usual in all languages) starts from 0 (zero).
The <turnover> tag has 3 children under it.
We can find the no of children a tag has by using the childNodes.length property. Thus the no of childen of <company> tag (here, 4) can be found by using xmlObj.childNodes.length
The no of children of <turnover> tag (here, 3) can be found by using xmlObj.childNodes(3).childNodes.length
Here we use childNodes(3) because <turnover> is the 3rd child of <company>
· Testing for children: You can test whether a particular node child has any children using childNodes(i).hasChildNodes
Thus xmlObj.childNodes(3).hasChildNodes() will return true.
xmlObj.childNodes(2).hasChildNodes() will return false, since the <employee> tag does not have any children.
· Getting Tag Name: You can get the tag name of a child using childNodes(i).tagName. Thus xmlObj.tagName will return “company”.
xmlObj.childNodes(0).tagName will return “employee”.
xmlObj.childNodes(3).childNodes(0).tagName will return “year”.
· Displaying content of a tag : In the XML file the content of the 1st <employee> tag is “Premshree Pillai”. You can get this value using xmlObj.childNodes(0).firstChild.text
xmlObj.childNodes(2).firstChild.text will return “Suhasini Pandita”.
Similarly xmlObj.childNodes(3).childNodes(1).firstChild.text will return “140,000”.
· Attributes : In the XML file, the <employee> tag has 3 attributes. An attribute can be accessed using childNodes(i).getAttribute(“AttributeName”). Thus xmlObj.childNodes(0).getAttribute(“id”) will return “001”.
xmlObj.childNodes(1).getAttribute(“age”) will return “24”.
xmlObj.childNodes(2).getAttribute(“sex”) will return “F”.
XML – JavaScript Example: There are many more properties and methods available. Using these properties you can create lots of client side applications. The main advantage of using XML along with JavaScript is that editing of data becomes very easy. XML being structured, it becomes very easy to manage content. One example is a folder-tree menu. Another one is a JavaScript Ticker. You can find a XML based JavaScript Ticker at
http://www.dynamicdrive.com/dynamicindex2/xmlticker.htm
XML based JavaScript Ticker :
We will create a XML based JavaScript Ticker that can tick any number of messages. The ticker reads it’s contents, i.e the ticker style, text to be displayed, the link for that particular message from a XML file. Let the XML file be ticker_items.xml
The structure of the XML document is as follows >>
TICKER
tickerstyle
» pause = “true” / “false” :: “true” for pause onMouseOver
» timeout = any integer :: The delay in seconds between different messages.
» border = any integer :: Border width of Ticker
» bordercolor = #HexColor :: The border color of Ticker
» background = #HexColor :: Background color of Ticker
» width = any integer :: Ticker width
» height = any integer :: Ticker height
tickerlinkstyle
mouseout
» font = “verdana,arial,helvetica…..” :: Ticker link font
» color = #HexColor :: Ticker link color
» decoration = “none” / “underline” / “underline + overline” :: Ticker link style
» weight = “normal” / “bold” :: Ticker link weight
» size = ‘any integer’pt :: Ticker link size
mouseover
» font = “verdana,arial,helvetica…..” :: Ticker link font
» color = #HexColor :: Ticker link color
» decoration = “none” / “underline” / “underline + overline” :: Ticker link style
» weight = “normal” / “bold” :: Ticker link weight
» size = ‘any integer’pt :: Ticker link size
tickeritem
» URL = A valid URL :: Ticker link URL
» target = “_blank” / “_top” / “_self” / ‘any other valid target name’ :: Ticker link target
XML Ticker Script :
<script language=”JavaScript1.2″>
// XML Ticker JavaScript
// (c) 2002 Premshree Pillai
// Use freely as long as all messages are as it is
// Location of script : http://www.qiksearch.com/javascripts/xml/ticker.htm
var xmlDoc = new ActiveXObject(“Microsoft.XMLDOM”);
function loadXML(xmlFile)
{
xmlDoc.async=”false”;
xmlDoc.onreadystatechange=verify;
xmlDoc.load(xmlFile);
ticker=xmlDoc.documentElement;
}
function verify()
{
if (xmlDoc.readyState != 4)
{
return false;
}
}
loadXML(‘ticker_items.xml’);
document.write(‘<style type=”text\/css”>’);
document.write(‘.ticker_style{font-family:’ + ticker.childNodes(1).childNodes(0).getAttribute(‘font’) + ‘; font-size:’ + ticker.childNodes(1).childNodes(0).getAttribute(‘size’) + ‘; color:’ + ticker.childNodes(1).childNodes(0).getAttribute(‘color’) + ‘; font-weight:’ + ticker.childNodes(1).childNodes(0).getAttribute(‘weight’) + ‘; text-decoration:’ + ticker.childNodes(1).childNodes(0).getAttribute(‘decoration’) + ‘}’);
document.write(‘.ticker_style:hover{font-family:’ + ticker.childNodes(1).childNodes(1).getAttribute(‘font’) + ‘; font-size:’ + ticker.childNodes(1).childNodes(1).getAttribute(‘size’) + ‘; color:’ + ticker.childNodes(1).childNodes(1).getAttribute(‘color’) + ‘; font-weight:’ + ticker.childNodes(1).childNodes(1).getAttribute(‘weight’) + ‘; text-decoration:’ + ticker.childNodes(1).childNodes(1).getAttribute(‘decoration’) + ‘}<br>’);
document.write(‘</style>’);
document.write(‘<table style=”border:’ + ticker.childNodes(0).getAttribute(‘border’) + ‘ solid ‘ + ticker.childNodes(0).getAttribute(‘bordercolor’) + ‘; background:’ + ticker.childNodes(0).getAttribute(‘background’) + ‘; width:’ + ticker.childNodes(0).getAttribute(‘width’) + ‘; height:’ + ticker.childNodes(0).getAttribute(‘height’) + ‘”><tr><td><div id=”ticker_space”></div></td></tr></table>’);
var item_count=2;
var timeOutVal=(ticker.childNodes(0).getAttribute(‘timeout’))*1000;
var original_timeOutVal=timeOutVal;
var isPauseContent;
if(ticker.childNodes(0).getAttribute(‘pause’)==”true”)
{
isPauseContent=’ onmouseover=”setDelay();” onmouseout=”reset();”‘;
}
else
{
isPauseContent=”;
}
function setTicker()
{
document.all.ticker_space.innerHTML='<center><a href=”‘ + ticker.childNodes(item_count).getAttribute(‘URL’) + ‘” target=”‘ + ticker.childNodes(item_count).getAttribute(‘target’) + ‘” class=”ticker_style”‘ + isPauseContent + ‘>’ + ticker.childNodes(item_count).firstChild.text + ‘</a></center>’;
if(item_count==ticker.childNodes.length-1)
{
item_count=2;
}
else
{
item_count++;
}
setTimeout(“setTicker()”,timeOutVal);
}
function setDelay()
{
timeOutVal=10000000000000;
item_count–;
}
function reset()
{
timeOutVal=original_timeOutVal;
setTicker();
}
setTicker();
</script>
As you can see in the source code, the ticker reads all the contents/messages to be displayed, the links for each message, the target for each URL, the ticker static style, roll-over style, border width, color, background, the delay between messages etc from the XML file. So if you want to change any parameter of the Ticker, all you have to do is make necessary changes in the XML file.
The ticker shown here is a basic ticker that rotates messages at an interval that is specified in the XML file. There are many effects you could add to the ticker like ‘Fading message’, ‘Teletypewriter’. You could add features to change the ticker speed or to list all messages at an instant.
You can find some Ticker effects at
http://www.qiksearch.com/javascripts.htm
I hope this article has helped you in some way.
Source: http://www.codetoad.com/xml_javascripti_tutorial.asp
>Vous devez sans doute connaître le plugin WordPress WP-cumulus qui est très à la mode en ce moment et qui permet d’afficher un nuage de mots clés dynamique et en 3d qui tourne en fonction de la position de la souris.
Le petit ou gros problème de ce plugin est que le nuage est généré en flash, ce qui peut poser quelques petits problèmes de référencement..
Pour remédier à cela je vous propose un plugin Jquery qui fait exactement le même nuage mais en HTML /Javascript.
Pour connecter à la base de donnée (utiliser PHP et MySQL):
http://www.siteduzero.com/forum-83-580312-p1-nuage-de-tag-3d-jquery-et-recuperation-sql.html
References: http://bidouilleur.com/nuage-de-tags-mots-cles-3d-dynamique-en-jquery/
Une autre tag cloud très intéressante:
http://noupe.com/examples/tagcloud/tag-cloud.html#
>
Here is a list of the best for you:
If you choose Aptana, take a look at Introduction of Javascript IDE – Aptana. Also I suggest you to look at this this similar question: Good Javascript IDE With Jquery Support.
Bold = Best in Intellisense
I choice Aptana ofcouse
Happy Coding!
>
Create easy form htmp with jFormer – Extence of jQuery
Check error by use javascript, and use CSS
http://www.jformer.com/documentation/getting-started/
>
jRating – một plugin rất mềm dẻo của jQuery giúp bạn nhanh chóng tạo được hệ thống đánh giá dạng ajax.
Bạn có thể tùy chỉnh từng chi tiết nhỏ nhất, từ số lượng các ngôi sao tới việc từng ngôi sao đại diện cho số thập phân thế nào. Ngoài ra còn có các lựa chọn hiển thị ngôi sao nhỏ hay lớn hoặc bạn có thể thay thế file ảnh với file khác.
Bạn có thể sử dụng plugin với tất cả các ngôn ngữ php, .NET, java… (tất nhiên vì đây chỉ là phần frontend thôi), plugin được đi kèm file php để xử lý các đánh giá của người dùng.
Cách sử dụng
Để sử dụng, trước tiên bạn cần thêm file CSS, file jQuery 1.4 và jRating vào phần header:
Thêm vào phần body của website:
Với jRating, thuộc tính data rất quan trọng, bạn phải thêm vào theo mẫu: ‘mức trung bình’_’ID’
Cuối cùng là gọi plugin lên làm việc:Bạn có thể xem thêm các lựa chọn khác ở trang chủ và trang demo của plugin
>
Nếu bạn đang phát triển website thì bạn nên thử bắt đầu dùng Live.js. Khi bạn thêm live.js vào trang web của mình, nó sẽ tự động refresh trang nếu bạn thay đổi bất kỳ file nào ở trong mã nguồn.
Để sử dụng live.js, tất cả những gì bạn cần làm là thêm file javascript này vào trang web của mình.
Live.js làm việc với tất cả các trình duyệt như Firefox, Chrome, Safari, Opera và IE6+. Live.js hoạt động độc lập với các framework/ngôn ngữ mà bạn sử dụng (bạn có thể sử dụng Ruby, Python, Django, NET, Java, Php, Drupal, Joomla hoặc bất cứ cái gì đó của riêng bạn).
Trên trang live.js cũng nói tới một mã nguồn rất hay là backfire: cho phép bạn lưu lại thay đổi ở file CSS trong firebug.
Demo: http://livejs.com/demo
>
This is a very short tutorial about Object Oriented Programming in JavaScript, in which we are going to create an object called JSWinbox that simulates a window in our browser.
There are two ways of doing OOP in JavaScript: Classical Inheritance and Prototypal Inheritance. The recommended one is Prototypal because objects will share exactly the same methods and by the classical inheritance the objects will have their own copy of each method which would be a waste of memory.
Other great features you should know about JavaScript are closures, Prototype object, and basic knowledge of the DOM. That information should be enough for you to catch the idea of this post.
Some folks argue that JavaScript is not a real OOP language because it is not use classes. But you know what? JavaScript does not need classes because objects inheritance from objects. JavaScript is a class free language which uses prototype to inheritance from object to object.
There are two ways to create an object: by object literals and by constructors.
Object literals are the most recommended because it can organize our code in modules, in addition it is an object ready to go that does not need a constructor. (Very useful for singletons.)
var myDog = {
name: 24,
race: '',
getValue: function () {
return this.value;
},
}
The other way is creating object by constructors. First of all, functions are objects and functions are what we use to create constructor objects for example:
function Dog(race, name){
this.race = race;
this.name = name;
this.getRace = function(){
return this.race;
};
this.getName = function(){
return this.name;
}
}
To create an instance of the Dog object we use the following code:
var mydog = new Dog('greyhound', 'Rusty');
Now, we just need to use the object we just created. So, lets execute one of the methods. The method to execute is getRace.
mydog.getRace(); // Returns grayhound
If you need a better explanation, go to one of the links at the beginning of the article for further explanation.
SourceCode example: http://www.mediafire.com/?w91389bf211nzho
Reference: http://www.admixweb.com/2010/07/14/oop-javascript-creating-an-window-box/
>
To meet industry demand Silicon Beach Training has updated our JavaScript training course and intruduced jQuery training and Ajax training courses to whet your appetite. Of course if you need HTML5 training or CSS training we can offer these too only 5 mins walk from Brighton railway station.
The real problem with JavaScript (released in 1995) lay with what we now call the DOM (document object model). Browsers implemented what we now know as the DOM in different ways meaning that browser cross compatibility was a nightmare. The standardisation of the DOM made thing a little easier but Internet Explorer (the bane of many a developers life) did not support basics like addEventListener until 2010 in IE9.
JavaScript frameworks provided developers with solutions to more easily overcome many browser bugs, allowing developers more time to develop.
jQuery is the strongest at DOM manipulation, and that’s why we like it.
It provides simple ways to create any custom effect and a range of simple to powerful Ajax methods.
Prototype is a JavaScript language library that extends the feature set of JavaScript but still includes a way to manipulate the DOM. Prototype provides class-style Object Oriented and AJAX, freely distributable under the terms of an MIT-style license.
YUI seems to offer everything! It includes the basics of DOM manipulation and event 
handlers, but also has a huge host of utilities available to it, ranging from internationalisation to history management and animation. What makes YUI special is its ability to load the utilities during runtime, so visitors do not suffer from slow page downloads. Built by frontend engineers at Yahoo! and contributors from around the world, it’s an industrial-strength JavaScript library.
Dojo is akin to enterprise-level JavaScript applications, and its homepage shows off how IBM, 
Cisco and Sun are among those who’ve chosen to make good use of it.
Indeed, Dojo’s documentation demonstrates how accessible the toolkit is via the ARIA support it provides. Dojo saves you time, delivers powerful performance, and scales with your development process
MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the 
intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.
Great stuff to have in common but they all cover the fundamentals of web development in their own way. Most people getting started with JavaScript these days are faced with the challenging task of picking a library to use, or at least which one to learn first. If you’re starting a project from scratch and know that including a JavaScript library or framework is going to save you time and therefore money, then you have the advantage of being able to shop around for the perfect candidate.
jQuery TOOLS – UI library for the Web is a very light weight (2.5kb) collection of the most popular user-interface components offering functionality over load time. It provides libraries for the following jQuery elements: Tabs, Tooltip, Scrollable, Overlay, Forms and Flashembed. jQuery can be downloaded as selected modules, so you don’t have to worry about pulling in the entire UI library if you just want draggable windows, for instance. It has the same benefits as jQuery and is under the same licence, so if you require a standard set of components, such as a date picker, progress bars or drag and drop, jQuery UI is a good choice for you. In addition, all the jQuery UI components can have different skins applied, either by your own designers or with a predetermined template. Both would use the ThemeRoller application, a web GUI for styling jQuery UI components.
jQuery UI is a widget and interaction library built on top of the jQuery core that allows you to animate different elements giving you impressive front-end interactions, all with relative ease.
The UI package is basically a collection of user interface-related functions that and can be broken into 3 main modules:
Script.aculo.us is a popular UI kit that extends the Prototype Framework by adding visual effects, user interface controls, and utilities via the DOM.
Scripty2, essentially the second incarnation of Scriptaculous, goes beyond the animation framework that it was originally known for. Although Scripty2 is still in alpha, it’s likely to be the UI framework of choice for Prototype developers because it builds on the library. In addition to some super-smooth effects, it will come with accordions, dialogs, progress bars, tabs, sliders and an autocompleter.
MochaUI – A Web Application User Interface Library requires MooTools and also requires an XHTML 1.0 strict doctype. So it’s no good for HTML5 entusiasts. It provides a slick UI for windows, drag and drop, file views and panel views. It is a popular extension to the MooTools Javascript Framework and ExplorerCanvas, to develop quick Web Applications, Web Desktops, Web Sites, Widgets, Standalone Windows, Modal Dialogs and much more.
JavaScript libraries and frameworks are making their way into the mobile development community. Mobile is unchartered territory and getting exiting. It’s really where the future of web development is. There are, however many considerations to be met: performance of the mobile device, whether you want to replicate the native UI and whether the mobile device even supports the newest JavaScript methods
jQuery Mobile is a Touch-Optimized Web Framework for Smartphones & Tablets. jQuery Mobile provides a unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. jQuery will support mobile browsers from B-grade and upwards, another reason why we think that jQuery is the one to watch.
jQTouch isn’t so much a framework as a jQuery plug-in that provides a native UI feel to iPhone-based web apps. This includes transition effects, a few template styles for all the UI widgets (such as lists, buttons and toolbars), swipe detection so that it interacts like an iPhone app and, finally, the ability to extend the functionality of the plug-in. There are number of jQTouch-based iPhone apps have already and are available in the iTunes store, compiled via PhoneGap.
XUI is a super micro tiny (3k-compressed) DOM library for authoring HTML5 mobile web applications. It includes Ajax and Effects via Emile.js. Like jQuery, it supports the simple xui.fn.myplug plug-in model, so it’s extendable. The project aims to be compatible with mobile browsers based on WebKit, Mozilla’s mobile browser Fennec, Opera, IE and BlackBerry. It’s still in-project but is fairly stable.
References: http://www.siliconbeachtraining.co.uk/blog/?p=1534
News CNet
Blog's Ta Xuan Hien
hientx 