I'm up to my neck in priorities right now, so unfortunately I can't provide any tuts on the subject.
I'm no expert; w*schools.com taught me most of what I know, and the rest was trial, error and improvement. Probably not the correct way, and I'd say I'm a Javascript noob.
The best thing I've made in Javascript was the real-time forum topics update box for my site, but I couldn't be bothered to apply the Web 2.0 crap to my whole site so I reverted to pulling it from the database on each request. I think I deleted the whole code for that.
If you look on my site, the containers can be minimised and maximised. Pointless, but here's the code:
Code:
function minimizeContainer(containerTopId, containerHeaderId, containerContentId, containerFooterId)
{
if(document.getElementById(containerTopId) && document.getElementById(containerContentId) && document.getElementById(containerHeaderId) && document.getElementById(containerFooterId))
{
document.getElementById(containerContentId).style.display = "none";
document.getElementById(containerFooterId).style.display = "none";
document.getElementById(containerHeaderId).style.marginBottom = "*em";
return *;
}
else
{
return 0;
}
}
function maximizeContainer(containerTopId, containerHeaderId, containerContentId, containerFooterId)
{
if(document.getElementById(containerTopId) && document.getElementById(containerContentId) && document.getElementById(containerHeaderId) && document.getElementById(containerFooterId))
{
document.getElementById(containerContentId).style.display = "block";
document.getElementById(containerFooterId).style.display = "block";
document.getElementById(containerHeaderId).style.marginBottom = "0";
return *;
}
else
{
return 0;
}
}
function closeContainer(containerTopId, containerHeaderId, containerContentId, containerFooterId)
{
if(document.getElementById(containerTopId) && document.getElementById(containerContentId) && document.getElementById(containerHeaderId) && document.getElementById(containerFooterId))
{
document.getElementById(containerTopId).style.display = "none";
document.getElementById(containerHeaderId).style.display = "none";
document.getElementById(containerContentId).style.display = "none";
document.getElementById(containerFooterId).style.display = "none";
return *;
}
else
{
return 0;
}
}
Creating the Digg links, etc.:
Code:
function createNavigationBarLink(listItemClass, linkHref, linkClass, imageSource, imageWidth, imageHeight, imageAlt)
{
if(listItemClass && linkHref && linkClass && imageSource && imageWidth && imageHeight && imageAlt)
{
var nameSpace = "http://www.w*.org/****/xhtml";
var listItem = document.createElementNS(nameSpace, "li");
listItem.setAttribute("class", listItemClass);
document.getElementById("navigation_bar").getElementsByTagName("ul")[0].appendChild(listItem);
var link = document.createElementNS(nameSpace, "a");
link.setAttribute("href", linkHref);
link.setAttribute("class", linkClass);
if(!listItem.appendChild(link))
{
return 0;
}
var image = document.createElementNS(nameSpace, "img");
image.setAttribute("src", imageSource);
image.setAttribute("width", imageWidth);
image.setAttribute("height", imageHeight);
image.setAttribute("alt", imageAlt);
if(!link.appendChild(image))
{
return 0;
}
return *;
}
else
{
return 0;
}
}
I mostly learn as I go along.
For this, I was implying that you use an XMLHTTP request to load the member page's DOM tree, then find the part you want and pull data from that node. All these sorts of dynamic browser requests are limited to the current domain, so syntax******.info couldn't get its users' browsers to pull the page from all-nettools.com. If it was on all-nettools, the info could be sorted with JS in the user's browser.
I can't type coherently again, so I'm probably making mistakes.
What order should I learn them in? Javascript, XML, DOM, AJAX ?
First make sure you know HTML well enough, then learn about XML documents and XHTML so you can make your sites all valid XHTML or even XML. Then, you can use Javascript to work with the DOM, which is basically the structure of a web page. Each element (such as <div></div>) is a node, and you can move up and down the tree. You can manipulate data in nodes; their attributes, etc.
AJAX is just a web 2.0 term to describe the way that pages can be dynamic. Javascript can be used to request XML from a server without a whole page re*****, then the XML can be parsed for whatever reason.