An Introduction to jQuery [notes]

inally getting on to actual jQuery! This about sums it up: "...we can use jQuery to perform its core functionality: getting some elements and doing something with them." All this reading is well and good, but I need to actually be querying and scripting in order to really understand. Therefore, I think it's time to go back to Codecademy for the jQuery lessons as soon as I read through jqfundmentatals.

The jQuery Fundamentals page links to the CSS2 spec on CSS Selectors, but there are some changes in the CSS3 spec. Memorizing the spec details isn't the most critical thing for me right now, and I have a pretty good grasp of combinators and pseudo-elements, IDs and classes.

The trouble with W3C specs, of course, is that user agent (UA, aka browsers) implementations may vary. Pseudo elements: I should try out :first-letter for drop-caps (though it wont help with my image drop-caps).

Q: So what exactly is a jQuery object? What does one do with it once it's created? Where is it stored and what is its lifespan? Backing up slightly, what does a regular old JS object look like?

A: As usual, I'm complicating things. Your generic JS object looks about like the code below, using literal notation to make the comparison easier. "All objects in JavaScript are descended from Object; all objects inherit methods and properties from Object.prototype, although they may be overridden" (MDN reference) "Objects are a collection of properties, and properties are associations between a name and a value"(more MDN). If a property is a function, then it is a method for that object. Pretty much everything in JS is actually an object. (see also: prototypes and classes)

var Bunny = {
ears : "long",
tail : "puffy",
hop : function (height) {
console.log("Hopped "+ height);
}};

The jQuery object is a JS object in that it stores elements and has methods, but it is an array-like object that just lists the DOM elements from the query. An array-like object has key:value pairs, but the key in this case seems to just be the index.

var a = $('div');
console.log(a);
/*returns from my blog homepage, more or less:
{
0: div#navbar.navbar section,
1: div#Navbar1.widget Navbar,
2: div#navbar-iframe-container,
3: div.body-fauxcolumns...}
*/

The jQuery object can be stored as a variable, or just called once and used, otherwise it disappears after use (?). I'd like to better understand memory and troubleshooting leaks (StackOverflow discussion). Basically, it looks like as long as there's a reference to an object, that object has memory allocated to it.

"Truthy" and "falsy" are a little ridiculous sounding... what's the difference between those and just true/false? Anything that evaluates to True is truthy, to False is falsy, but there are other possible evaluation results as well, like NaN, undefined, null, and any number of things – these are not specifically True or False, but they have trueness or falseness ascribed to them. It's descriptive instead of referring to the specific True/False booleans that you might return. This short article from 2011 explains it much better than I am (and I like his zebra).

Helpful tidbits:

• $() is a function. Functions in JS are objects and have methods and properties. $() always returns an object, and objects are always truthy.
• $( 'li' ).eq( 0 ).is( '.special' ); to find whether the selection using .eq() to select a specific single{ element matches the parameter in the .is() method (selector, DOM element, jQuery object, function); returns boolean.
• Use getters and setters (methods) to do things with jQuery objects. Iteration over elements can be explicit (.each();)or implicit (.html();), and you can chain methods together on a single selection. 
• Then we also have filtering, .not(); .filter(); .has(); on selections, which are more or less "without," "within previous selection," and "contains," respectively. ...many more methods here in the top hit on Google for "jQuery cheatsheet" (includes CSS selectors!). I'm a visual person.
• Plus, find other items/make other selections relative to a previous selection with things like .children();, .next();, .parent(); etc and add to existing selection with, by george, .add();
• More on how to use jQuery in the context of your basic HTML page here from the jQuery folks.

That's probably enough for now. I have a bit more of the jqfundamentals page to read through, then back over to Codecademy, then moving on to "JavaScript: The Good Parts." Please comment if you notice something I've got wrong or that could use clarification.

JavaScript Hoisting

ust in case there weren't enough clueless people on the web trying to figure this out, I thought I'd add a bit here in the interest of my figuring it out. In the process of processing JavaScript (Note to Self: see "JavaScript Interpreter"), things are sometimes executed in ways you might not be expecting. This can change the scope of some variables and functions and confuse the bejeezus out of anyone who isn't paying enough attention. Including me.

Some definitions:

• A JS function expression: var myCode = function(a, b) {stuff;};
• A JS function declaration: function myCode (a, b) {stuff;};
• Hoisting: Pretty much what it sounds like, some things are lifted upwards and therefore are executed sooner in the script than where they were originally written. So, something that was written like so:
  function bunny (){
  rabbit();
  var carrot= 2;
}
  Is actually executed like so:
  function bunny (){
  var carrot;  //declaration gets hoisted
  rabbit();
  carrot= 2;  //assignment stays put
}


So, what does this have to do with scope? JS has function level scope. Blocks do not create a new scope (eg if statements do not create a new scope, only functions can. Compare/contrast with a C-based language). This is actually the most helpful block of text (from Ben Cherry) that I've read while pondering all this:

In JS, a name enters a scope in in one of four ways:

1. Language-defined: All scopes are, by default, given the names this and arguments.
2. Formal parameters: Functions can have named formal parameters, which are scoped to the body of that function.
3. Function declarations: These are of the form function foo() {}.
4. Variable declarations: These take the form var foo;.

Function declarations and variable declarations are always moved (“hoisted”) invisibly to the top of their containing scope by the JavaScript interpreter. Function parameters and language-defined names are, obviously, already there. [names are also resolved in this order] [emphasis mine]

When to use what: If you're aware of hoisting and how things will execute, then use whatever floats your boat, even intentionally use hoisting to get your function declaration moved up. Because a function declaration is all declaration, not declaration plus assignment as in a function expression, the entire function gets hoisted at once. A function expression only has the "var blah;" hoisted, leaving the actual function body (assignment expression) behind. (see also Angus Croll on function declarations/expressions. The fifth time I came back to that page I got the right quiz answers (and not just from memorizing them)).

How functions execute with hoisting when a script runs (examples taken from my hangout on air with JBeach):
Written like so:
(function () {
  a = grapefruit;
  b = applesauce;

  function grapefruit () {  //function declaration
  return 'citrus in your eye';
  };
  var applesauce = function () {  //function expression
  return 'goodness';
  };
}());

Executed like so:
(function () {
  function grapefruit () {  //function declaration hoisted
  return 'citrus in your eye';
  };
  var applesauce; //function expression declaration (?) hoisted
  a = grapefruit;
  b = applesauce;

  applesauce = function () {  //function expression
  return 'goodness';
  };
}()); // returns "citrus in your eye" for a and "undefined" for b.


I think I've got the concept, even if I haven't quite got the details of how it runs (slight lack of applied JS knowledge here, but working on that).

There was also mention of NFEs and IIFEs somewhere along the way here. NFEs are nicer than anonymous functions should you need to track one through a tangle of code. IIFEs are somewhat also known as Self-Executing Anonymous Functions, but with some nuance. An IIFE does invoke itself, can be anonymous or named, and can be self-executing.

• Named Function Expression (NFE): var myFunc = function myFunc (){code here}
• Immediately Invoked Function Expression (IIFE): (function myFunc (){code here}());

Disclaimer: For goodness' sake don't take my word for any/all of this if you've just stumbled across my blog. I'm just learning and these posts are essentially my notes. Please do read the articles I've linked to, read as much as you can, experiment, and figure it all out for yourself, too.

And if I've got something not quite right or downright wrong, please leave a comment. Thank you...

Basic notes on JavaScript

bout a year ago I spent a good chunk of time obsessing over Codecademy lessons and my "streak." Despite the headache I got from figuring out the math on a couple of loops, I really enjoyed JS as a language and am pleased to say I can still just write out a loop (at least for something simple) on demand. I stopped poking at their lessons just because I wanted to move on to some other subjects and work on live projects, but I would still like to finish up at some point. I've certainly learned that everyone has a different style and that syntax/best practices change and vary continuously.

Just did a little brushing up on JavaScript generally going through this JS basics page, then moseying over the Mozilla Developer Network (MDN) pages for further reading. I also have JavaScript: The Good Parts on hand to chug my way through, though I think that may be ongoing and involve more practice/ trying things out, too.

• Use a function expression (var myCode = function(a, b) {stuff;};) rather than a function declaration (function myCode (a, b) {stuff;};). Finally got a good explanation for this here: "To quote Ben Cherry’s excellent article: 'Function declarations and function variables are always moved ("hoisted") to the top of their JavaScript scope by the JavaScript interpreter.'"
• Consider scope! Variables declared without var are global, so (almost) always use var.
• Hooray for OOP. I do like putting things in boxes and generally tidying up.
• Object literal syntax: var thingy = {property1: 'value', property2: 'value';};  Point: if value is a function (rather than a primitive?), then the property is a method. 
• Dot notation: objectname.propertyname
• Bracket notation: objectname['propertyname']
• While I can handle this, I don't particularly like this.
• Ternary operators, shorthand for if/else: var status = ( a === 'aaaa' ) ? 'Panic' : 'Calm'; (had a hard time coming up with a neutral for this one. Essentially: For status, if value of a is panicked screaming, assign value of "Panic" to status. Otherwise, assign value "Calm.")(Personally I much prefer "Don't Panic" to "Keep Calm and Carry On," particular since the latter has been so overused lately)
• Further reading on JS overview here was very helpful for just clarifying where it stands in relation to Java and ECMAScript, plus some basic properties. Once I found MDN, I abandoned old W3Schools. 
• I need a better understanding of how code executes. Closures? Hoisting? ack.
• So, scope? 

Things read: 

JQuery Fundamentals: JS Basics

& all the links at the bottom of the JS Basics page.

This bit on JS closures (still not sure I understand).

And "If Hemingway Wrote JavaScript," which is amusing even if you don't know anything about code.