Web Chat Thing (similar to Meebo). Help.

[TotoTitus]

Hello everyone.
This post will contain an amount of personal feelings within it.

I'm not a very experienced/skilled programmer, and my main 'background', if i can call it so is in windows forms applications (Visual C++, C#), where conceptually speaking, everything is driven by events, the only possible difficulties arriving from the implementation of a specific algorithm to serve the purposes of the program.
Don't ask me why (long story), i have now to build up from scratch a chat-based application in PHP/JS/HTML/MySQL/Web Stuff. Nobody has told me how it should look, but it would best serve its purpose if it looked similar to Meebo, except that it wouldn't serve as a multi-platform login tool (yahoo, msn etc), but it would have its own account list/service.

Now, i know a teeny bit of PHP, HTML and i'm comfortable with the classic send page/postback involved by PHP. The problem is, for the moment, in my mind web programming is a dreadful spaghetti-like mix of procedural PHP with OOP PHP, sometimes intermingled with HTML, and all mixed up with convoluted, overgrown, (add more epithets here), JAVASCRIPT.

Meebo has cool windows. And we know they're made with javascript. But not raw javascript. Oh no no, but libraries, constructed over javascript with their own rules and syntax ! This is the most appaling thing - what should i choose, why, and how should i use it ? Dojo, JQuery, Prototype, script-a-licious (or however it's called).

When i read 'classic code', like C/C++, C#, PHP, it looks all-so-clear, and it has a clear flow of execution. Javascript drives me nuts. It looks just as someone would have randomly put bits of code here and here, import them all around, use weird functions like $( some variables). First of all, could somebody point me to some decent, be it long, Javascript tutorial ? (And don't tell me W3CSChools, the first 12 lessons there are about how to use for() and if () ) . My main problem here is that i have a serious difficulty in conceptualizing Javascript.

On to the chat application. I need a JS framework which will offer be the possibility to create "Windows-like" windows within a page, and to modify me to suit my needs. (Make a buddy list, a chat window, with the possibility to react to specific events).
About AJAX - suprisingly, AJAX was easy to understand, though again, i have no idea how to use a framework's specific AJAX, only 'raw' ajax written by me. About PHP - that will come along, i see it much less horrifying. CSS? It's just design.
Jasvascript, that's the real deal of obfuscation in web programming.

Sorry for the length of the post, i probably let myself go too much but i really need help here. True, i haven't studied enough, but i'm kind of demotivated right now.
Thank you for your understanding !

[TotoTitus]

bump ->

[scrappedcola]

One of the things that helped me to organize my web code was to realize a really basic idea (very simple that I think gets glossed over): There are going to be two parts to your code. There will be a server component and a client side component. The server side code is stateless that runs once to provide the content to the client side (the web browser). The client side code can save information and provide feed back to the server but basically the server side is a storage unit for the client. Server side doesn't have to be Java/PHP/PERL etc it can just be an HTML file stored on a remote machine (or local host). The javascript will maintain its values until you refresh the page but it terminates the current state on page load. Where HTML ties the two together is that it is your gui for getting at the stored data on the server and presenting it to the user and allowing the user to interact with that data. Javascript and it's organization can be as clear or muddy as you make it. There have been great efforts to create standard libs that make it so you don't have to reinvent the wheel 10x over and can rely upon fairly well tested techniques. That is where JQuery, Prototype, etc come in. I would recommend JQuery as a fairly well tested and easy to use lib/framework for javascript. The website http://jquery.com to view info/overview tutorials. But like any lib you will want to understand javascript and its place better before you can comfortably proceed. I would check out the books Javascript: The Definitive Guide and also Javascript the Good Parts. Both are O'Reilly books and generally available in various formats and also at local libraries. If lectures are your learning tool check out the Douglas Crockford lectures for Javascript and also John Resig lectures for JQuery on YUI Theater/You tube. Finally once you look at this open source web chat app https://blueimp.net/ajax/. It uses PHP and perhaps looking at the source might give you a better understanding of how the different pieces of code work together (server and client).
Some other javascript links and also the Crockford lectures are:
http://www.crockford.com/javascript/
http://video.yahoo.com/watch/111593/1710507
http://www.developer.com/tech/article.php/923111/Client-side-Versus-Server-side-Coding---Part-1.htm

[TotoTitus]

Thank you very much. Will study, and post here if anything unexpected comes by.:)