Scripting

Why Use jQuery for Simple JavaScript Tutorials?

Why Use jQuery for Simple JavaScript Tutorials?A trackback on one of my previous posts (yeah, trackbacks aren’t just for spam) alerted me to an interesting point brought up by a blogger named Matt Pass. In his post entitled Walnut, Meet jQuery Sledgehammer he politely explains why he feels it’s overkill to use jQuery in a simple tutorial post.

His main point is summarized in this quote: “Do you really need a 90k JavaScript library (and thats the minified version) to toggle the size of a menu?”

Some JavaScript Resources Worth Checking Out

Some JavaScript Resources Worth Checking OutWith any programming language, the learning journey is seemingly an endless one. Because I don’t have a computer sciences background, I feel I’ll always struggle to keep my JavaScript abilities up to par.

Over the last year or so I’ve stumbled across a number of useful resources that I think are worth mentioning here. Many of these are not for the faint of heart. Some pretty heavy stuff often geared towards advanced JavaScript developers and front-end engineers.

Recreating the MLB.com Content Switcher with jQuery and CSS3

This article was first published on June 1, 2010 and has been updated to include a few extra features and an improved code base.

The MLB.com Content Switcher Recreated with jQuery and CSS3I’m a huge baseball fan, so earlier this year, just for a fun side project, I recreated the MLB.com Flash content switcher using jQuery and CSS3.

My goal with this project was to try to recreate the switcher without any extraneous images or other non-essential elements that tend to make stuff less maintainable.

My version uses CSS3′s border-radius, RGBA colors, opacity, and a small use of a gradient, and still looks acceptable in non-supportive browsers (although the jQuery is not as smooth in IE6 & IE7). Be sure to look at the real version on MLB.com for comparison; there are a few small differences, but mine is basically the same.

Making Unobtrusive JavaScript Practical Again

Making Unobtrusive JavaScript Easier to Track DownMaybe it’s just me. Maybe I’m a JavaScript debugging n00b, or maybe it’s my limited knowledge of Firebug.

While I fully support the use of unobtrusive JavaScript in all projects, I do find it has one weakness: Connecting the HTML element with the code that acts upon it.

If you’ve been coding JavaScript since the dark ages of the web, you’ll know that JavaScript used to be commonly implemented in an obtrusive fashion that mixed markup with behaviour, which made your code messy, and added extra code to every individual page rather than putting it in an external reusable file.

Here is a simple example:

Using JavaScript’s Try-Catch Statement

Using JavaScript's try-catch StatementI don’t consider myself an application developer. I think I have some knowledge of application design principles, but it’s something I’d like to improve on, especially in the area of JavaScript and Ajax-driven applications.

One technique that I believe is quite helpful when developing high-powered JavaScript apps is the JavaScript try-catch statement (also referred to as try-catch-finally). I became familiar with try-catch sometime last year, and although I haven’t used it much, I found it could prove useful in a number of circumstances.

In this article, I’m going to describe what try-catch is, how it can be used, and how it can help make web applications less annoying to users.

Getting Buggy CSS Selectors to Work Cross-Browser via jQuery

Getting Buggy CSS Selectors to Work with jQueryAlthough the lack of cross-browser CSS selector support has caused a number of useful CSS selectors to go almost unnoticed, developers can still manipulate styles on their pages using some of these little-used selectors through jQuery.

Below I’ve prepared a simple table that describes a number of CSS selectors that are not cross-browser compatible, along with the jQuery syntax for each. The syntaxes are exactly the same as they would be in CSS, save for the jQuery wrapper (just remove $() and the quotes to get the CSS syntax), so using these selectors in jQuery will provide somewhat of a practice ground to prepare you for when they’re fully supported by all commonly-used browsers.

Avoiding Problems With JavaScript’s getElementById Method in Internet Explorer 7

Targeting Elements Using getElementByIdEvery week this website gets about 700 unique visits from Google searches, mostly from people searching for solutions to problems with JavaScript and CSS. I’m flattered, and I hope I can continue to publish useful articles that will assist people and help with the exchange of ideas and techniques. One search phrase that leads surfers to my site pretty much every day is something along the lines of “getElementById explorer 7″.

If you type this phrase into Google, Impressive Webs currently comes in at around result 115. Not to mention the fact that the article that comes up doesn’t really address this issue directly. That’s not a very good ranking for that search phrase — yet somehow people are still finding one of my pages through that search.

It is obvious that developers — likely beginners — are having issues getting the proper results when utilizing the getElementById method available in JavaScript, particularly in Internet Explorer versions 6 and 7. And since the users seem to be searching through dozens of web pages looking for a solution to their particular problem, then obviously the pages discussing this JavaScript method are either too confusing or don’t specifically provide a practical solution.

A Consideration of Variable and Function Scope in JavaScript

A Consideration of JavaScript ScopeMany aspects of JavaScript code development are taken for granted, and scope is really no different. Of course, in many cases where minimal code is required, variable scope (or function scope) is a non-issue. But if you’re planning to get into larger application development with JavaScript, then you need to understand at least the basics on scope in JavaScript.

Using some simple code examples, I’m going to run through the basics of scope and try to give beginning to intermediate JavaScript developers a better grasp of this very important concept.

10 JavaScript Quick Tips and Best Practices

JavaScript Quick Tips and Best PracticesRecently, a few blogs and tutorial sites have posted some really good articles on JavaScript tips and best practices, and I thought that was a good topic that could easily be expanded upon. So I put together a list of 10 fairly simple JavaScript tips and best practices of my own.

I tried to include stuff that was not mentioned in those other posts, but I’m sure there is a little bit of overlap. Keep in mind that these are brief tips and recommendations, so I don’t go into great detail about the reasons and such, but I may go into some of them in depth in future articles and tutorials.

In the meantime, please enjoy this list of tips, recommendations, and best practices for JavaScript coding.

10 Essential DOM Methods & Techniques for Practical JavaScript

DOM MethodsWhether you use a JavaScript framework, or you are a purist and always resort to coding your client-side scripts from scratch, there are certain DOM syntaxes with which you should be at least a little bit familiar.

It’s true that a library like jQuery or MooTools will perform these methods for you, behind the scenes. In fact, if you rely on JS libraries for virtually all your JavaScript code, you’ll rarely have to use any of these methods directly.

But the reality is that, whether we develop as freelancers or work for a development firm, we may not always have the luxury of working on fresh projects where we can pretty much do what we want; we may have to maintain sites that rely on “obtrusive” scripting methods, or, for one reason or another, we may not be permitted to use certain libraries.

Whatever your situation, the following review of various practical DOM methods will hopefully serve to bolster your JavaScript knowledge and possibly help you more readily see practical solutions to various client-side issues.