Day 4

jQuery

Having done the CodeAcademy track for jQuery, I went through this section pretty quickly. jQuery is definitely a useful tool for adding cool animations onto websites. The section was pretty straight forward, learned the basic syntax of $(document).ready(function(){}); and the first homework assignment went through a lot of different methods (by having you write them). 

I was kinda surprised that we didn't use a separate file for jQuery scripts. But then again we didn't do too many animations. The first assignment that made me think was the one that had you click a picture which changes into another corresponding picture that fits like a puzzle (so think a picture divided horizontally 5 times. And when clicked, it would change to another picture that is also a puzzle. I'm pretty proud of being able to write it in one line of jQuery:

$(this).attr('src', attr('src').replace('ninja', 'cat'));

The attribute method allows for change, specifically in this case the source of my image. Since each image (ninjas0, cat0) have the same numbers to represent its vertical placement, I decided to just change the name of the image.

For the last assignment, it asked us to do a fade in/out of images as you hover over them and this is where I cheated a little and used the same pictures for the 4 images they wanted us to have. This part is where you get to use parameters and I wrote a pretty short piece of code. That's when a friend of mine in the cohort asked me, "what if all the images had to be different" and that got me to thinking about how you can have the same effects but not repeat the code. Obviously I had to use a variable but specifically do I put in it? A method? But with what parameters?

And thats when my friend and the previous assignments instruction started to make sense; use "data-alt-src" and store it as a variable so that it's hidden but the data is still there and use jQuery to surface it! There's an advanced jQuery section but that's not until later. The next unit is ERD and MySQL!