Wednesday, December 8, 2010

jQuery - The REAL Beginners' Tutorial

I started this blog because I got tired of finding jQuery, Prototype and tutorials that start on chapter 3. I know there's problems when others start with defining Javascript then jump to tutorials starting with chapter 3, and I need information contained in chapter 10. Online tutorials and even the books I purchased just don't know how to teach a programming language.

This blog is my personal account of learning and writing these higher-level languages that I'd like archived so that I can easily access it in the future.

I had a hard time finding that basic explanation for the "syntax" of jQuery. What is the very first step (after uploading the library to your website server) and why do you do it? Is there an order to what you do? Can you have duplicated commands with different parameters? What parameter values can I use? E.g., I was attempting to install the jQuery UI accordion and even the jQuery UI site didn't tell me what the library will accept for the animated option (parameter). That sent me on a seemingly never ending hunt for the answer and the idea to start this blog archive.

I got frustrated with installing "plugins" and ended up either installing the same library more than once or different versions of the library that essentially do the same thing. I was just duplicating effort and bandwidth.

This blog assumes that you understand HTML, Javascript, and programming techniques on an elementary basis. If you have never written any code of any language, then this blog is not for you. replying to basic questions about HTML, XML, XHMTL, DHTML, Javascript or other associated tasks. I am not here to be your personal tutor, especially for those who are entering this blindly. I hope that you at least have a book on jQuery and have read and understand the first chapter.

What are these Higher-Level Javascript Languages?
jQuery, jQuery UI, Prototype, Script.aculo.us, and some other less known libraries?
These are just libraries of Javascript modules written by others. It allow you to quickly implement Javascript features. Go to the jQuery site for more information - if you know what "events", "AJAX", DOM, and other entities are. They even have tutorials, some for a price where you don't know what you get until you pay. Reading this blog is free.

Why Javascript? Because it can create a dynamic web page that responds to your user's mouse or clicks or typing without reloading the page. With Javascript, you can apply logic (if ... then ... else) to a web page whereas HTML doesn't have logic except for clicking links.



K.I.S.S. Understand that these libraries can conflict with each other. So, if you have something already installed and is working, then you install something else and it no longer works, it could be a conflict. Keep within the neighborhood of what's already working. If you're using jQuery accordion, don't install Prototype autocomplete because from experience, these can conflict and break.

Speaking of installing, there is an order to how you list the <script> links to jQuery. As far as I know, the core files must be listed first, then the extensions/plugins/whateveryouwantocallthem.

KNOW WHAT YOU'RE INSTALLING
When you install any plugin, ensure to check the version. I've installed different versions of the jQuery library without realizing it. Generally, if you install the newest version, it should work for older versions.

You download the jQuery and have several *.js files. Now what? Do you install all of them or just a select few. If a few, what ones do you know are relevant, are duplicates of others?

Well, I have to go now but I'll be back to further archive my progress with jQuery and jQuery UI.

No comments:

Post a Comment