jQuery Joy

One of the delights of being a “full stack” web geek is that every week you get to do something different.

(Full stack, for all my untechy friends’ benefit, is when you handle everything from server configuration, to application administration, to server-side technology, to client side rendering. That’s all g(r)eek for, “You do everything and anything that’s necessary to get a site up, running and looking good on people’s screens.)

This week it’s jQuery.

More background.

When you look at a website these days, there are generally three components that go into making it look how it looks and do what it does.

  1. There’s the HTML (Hyper Text Markup Language). That’s like the skeleton the whole thing hangs on. It’s the page’s structure and content.
  2. There are CSS (Cascading Style Sheets). That’s like the skin. It’s what gives the site it’s look and feel. It’s shapes and colors and textures. Skin.
  3. Then there’s script. Almost always JavaScript (or js). That’s like the muscle. It’s what makes things move around and things change on the page. Whenever you see a color change or words get rearranged, appear, disappear, that’s the Script.

jQuery is a library of JavaScript mini-programs. It allows you, say, instead of writing each little movement or screen change from scratch, to tell the web browser, look in the library for program “make picture fade out and in again” and do that to image “cute-cat-picture.” Much easier. To make it even easier, people have written lots of “plug-ins” that make the library even bigger.

But you still have to fit that into all the other stuff that’s going on around the web page. You still have to script (or “chain”) all those mini programs together in a way that it makes sense and works in the right order.

This week, that’s my job. Two projects, actually:

  1. Use jQuery to make a page that can call up any number of photo galleries by clicking on various icons. Bonus if you can automatically open the right gallery when the page opens, depending on what was clicked on the previous page!
  2. Use jQuery to make information change inside a box depending on which “hot spot” gets hovered over on a picture.

Neither of these are really “hard” to do. Most “front-end” developers would probably call them routine.

Even so, they’re nice diversions from my usual drill.

Joy!