Tag: javascript

Dev Days – Cody Lindley on jQuery

Cody Lindley (Ning)

coauthor of JQuery Cookbook, due out next month
Authored a pdf book of examples called JQuery Enlightenment

jQuery – Intro for Developers

Who uses JQuery?

35% of all web pages running Javascript are running jQuery. 1 out of all 5 sites.

What is JQuery?

– A Javascript library
– helps ealing with the DOM
– Simplifies DOM events and animations

JS Bin – a very cool tool that allows testing of Javascript and HTML.

Shows an example of coloring every odd row of every table on a web page in one line of JS code. Adds roll-over coloring with a couple of more lines.

Why use JQuery?

Helps simplify and speed up web development
Allows us to avoid common headaches associated with browser development
Provides a large pool of plugins.
Large and active community
Tested on 50 browsers on 11 platforms
It’s for both coders and designers

Where to get jQuery?

Download source from google code (moving to github soon)
Use a CDN

Concept 1: Find something, do something.
– use the jQuery function to find an element in a page, and then do something to it.

Concept 2: Create something, do something.
– You can create elements in the DOM.

Concept 3: Chaining
Can use a single jQuery wrapper set and statement to execute a sequence of methods.

Concept 4: Implicit Iteration
E.g. when we call add class it loops over every element contained in the wrapper set.

Concept 5: jQuery() parameters
First parameter – can be passed CSS selectors, HTML, DOM elements, or a function shortcut.
Second parameter – can pass CSS selectors or DOM elements. Tells the engine the context in which you want to search. Default is the document or body element. Important for optimizing JS to narrow search.

Overview of jQuery API
– Core
– Selectors – see http://codylindley.com/jqueryselectors
– Attributes
– Traversing – can manipulate text nodes with the content method.
– Manipulation
– CSS
– Events
– Effects
– Ajax
– Utilities

Put your Javascript code at the bottom of the page to speed up when it executes.

Shows an example of creating a jQuery plugin in 6 steps.

Advertisement

Building an expandable outline for the web

For part of a major work project I found myself needing to view a hierarchical list in an expandable outline form on the web.

On my Mac I used Omni Outliner which works great, but that didn’t work for my colleagues who work in Windows. They translated the list into a Word outline, but outline view in Word is not all that great, and who wants to fire up Word just to view an outline?

No, the answer was definitely to be able to view this list in a web browser, but how to build that?

We’ve been managing most of the work on this project we’ve using a Sharepoint site, but I couldn’t find a way to build a simple expandable list in Sharepoint. Later I found some articles on how to build one in Sharepoint, but they require developer access to Sharepoint, which I don’t have, and some coding in Visual Studio, which left me out in the cold at home over the long weekend with my house full of Macs.

In casting around I came up with two AJAX toolkits that both have expanding and collapsing tree controls – the DOJO toolkit and the Yahoo! UI Library.

I spent some time this weekend trying out the tree controls in both libraries. I was impressed with both – the features and design of both of these toolkits is pretty amazing.

I spent some time with Dojo’s tree control, but I couldn’t figure out how to apply styles to all the nodes at a given level (e.g. all the top level nodes should be green, second level nodes should have smaller type, etc.). Perhaps I just didn’t spend enough time with it – I’m sure it must be possible.

I was able to implement the controls and styles I needed using Yahoo!’s TreeView control, though it took a couple of hours to understand how to fit the elements of the UI Library together – all of these kinds of tools have their own learning curve. I never did get the tree to build from existing markup in an unordered list – I built my tree content in the Javascript code.

I should mention that these are tools for web developers – they’re not just things where you can drop a line of javascript into a web page and use – they take some savvy and some time to use. But it’s a heck of a lot easier than building tools from scratch!

I’m incredibly impressed with the maturation of the market of freely available tools for web developers since I last looked. I’m also struck again by the maturation of the entire concept of what it means to be a web developer now – it’s not just technical know-how, and it’s not just design ability, but a blending of the two in a way that I think is a fundamentally new discipline. It’s interesting to think about where that discipline finds its home in our academic institutions – at present I don’t really think it has one.