the main reason that makes me writing this articles is one of my friends told me that he is not going to use ajax in his web site because he needs to be highly seo optimized.

many reason that makes my friend and many other think like that is poor developers that uses this technology in the bad way , you can write javascript code to perform ajax in many ways some of it can get the benefits of seo and we are here to clear and study that ways so lets begin

first : google or other search engines cant crawl javascript so the secret is dont EVER let javascript handle the links without html support in another meaning lets see that example

<a href="mylink.html"><img src="anyone.jpg" /></a>
<img src="anyone.jpg" onclick="location.href='mylink.html'" />

the two lines declare two simple ways to link and the two ways actually work but one of them is seo friendly which is the first one because we use simple html tag attribute (href)

the same thing in the ajax make the links in simple anchors with (href) attribute but handle click event of this anchor make the ajax request and prevent the browser default action by returning false

lets see it in action

$(function(){
 
$('a.ajx').click(function(){
 
$('div.response').load('ajaxfile.html');
 
});
 
});
 
<a href="ajaxfile.html" class="ajx">Click me i am seo friendly ajax link</a>
 
<div class="response"></div>

when search engine crawel the page it reads only the html tags so he read this anchor and (href) attribute and follow the page ajaxfile.html to crawel it and add it to the site map

and when human go to this page and click on the link the click event fired and we do tha ajax request and because the return false the page never reloaded

this is the point think as the search engine and you will win

feel free to feedback me

thanks

jquery cheat sheet in png format  1920×1200

source gmtaz.com

ok lets start

first to select a DOM you must wait the full page to load, the javascript programmers know that if we want to control an element in the web page we use
window.onload event to run the code in it
but the problem is that this event will fire after all page downloaded including images and other heavy element

jquery has a similar event but the event fired when the DOM is ready


$('document').ready(function(){
// your code here
});


ok now we know when we will run our code and how and where we write

now the good part of our articles : selectors

if you know css you will use selectors perfectly because simply
jquery selectors = CSS
yea its a true, don’t believe me look at the next example


//jquery code
$('document').ready(function(){
$('div.mydiv').hide('slow');
});



/* css code */
div.mydiv{
display:none;
}


do you believe me now try to pick a different between the jquery selector and css selector no different

so if you want to select a element with id simple_id
simply type
$(‘#simple_id’)

global elements

for example
$(‘a’)

class
$(‘.simple_class’)

just know css selectors and use it with jquery

the next post in jquery i will discuss the advanced selectors with jquery & css 3 , so keep watching me

first : what we mean by javascript framework ??
“A software framework, in computer programming, is an abstraction in which common code providing generic functionality can be selectively overridden or specialized by user code providing specific functionality.”
from wikipedia

so we can say that javascript framework is abstracting to tranditional javascript codes so you can do amazing things with javascript just with a few lines of code
you can control DOM ,doing amazing animation , ajax and alot of cool things that helps when you develop a website

now ,we  knows what it means but there is alot of frameworks what is the best

we will go in a short tour with the best 10 javascript frameworks

1- jquery:-

the best framework ever for javascript , specially with the new realese 1.3 the jquery become lighter , faster , more powerful
you can control DOM easly with the DOM engine using CSS3

website :-  jquery.com

license : MIT & GPL

2- prototype:-

the fastest framework it really very fast an also contain a good DOM engine but not powerful as  jquery.
note: i tried very hard to make prototype works side by side but i failed so if you have any ideas please suggest:)

website:- www.prototypejs.org

license : GPL

3- mootools:-

its a really a nice one , honestly i didn’t work with it but many developers prefer it , i saw many demos but i didnt test its DOM engine ( if you test it please feed back me)

website:- mootools.net

license : GPL

4- google web toolkit:-

big big big so big one , it have many features i cant even imagine how google developers code it , google
in short:- it perfectly for large projects , it have many features you cant find in any other framework

website :- code.google.com/webtoolkit

license:- Apache License

5- Ext Js:-
big framework too , but so slow in compare with other frameworks , so big and so complicated too.

website :- extjs.com

license:- commercial version  1.3

6- DOJO :-
new framework i didnt test it , but many developers beign to work with , so easy and powerful , and may be it face jquery & prototype & mootools one day

website :- www.dojotoolkit.org

license :- BSD & AFL

7- script.aculo.us :-
poor framework , based on protoype ,  it have small features and i dont recommended it

website :- script.aculo.us

license : GPL

8- YUI:-
big framework coded by yahoo , but so big so complex as ext js

website:- developer.yahoo.com/yui

license:- BSD License

9- midori:-
small but good framework for small projects

website :- www.midorijs.com

license :- MIT License

10-MochiKit:-
small but good framework for small projects, highly documented as they said

website:- mochikit.com

license :- MIT & AFL

that is all i have for now , if you have any other javascript frameworks do you want to add to this list , just comment

references:- frameworks websites , wikipedia , and   google