Front End Masters: Introduction to JavaScript and jQuery

FrontEnd Masters: Introduction to JavaScript and jQuery

I’m blogging about learning how to code while being transparent and honest about my experiences.

One of my coding goals is to complete one course per week at the popular web development tutorial site Front End Masters. I’m also going to blog about it here.

My recently completed first course is Introduction to JavaScript and jQuery.

Shout out to Learners Guild (full disclosure: I’m engaged in a rigorous 10-month software development apprenticeship there).

The disclaimer from FrontEnd Masters: Note: This course (came out in 2012) is still valuable, but has been superseded by our comprehensive, Introduction to Web Development course.

My backstory: before I was accepted to Learners Guild, I had shamelessly bypassed prerequisites for college Computer Science classes online. Don’t try this at home, kids.

Now consider the mind-boggling plethora of online courses and tutorials. You know the ones.

I’ve Codecademied, FreeCodeCamped, KhanAcademied, Udemied, have WatchedandCoded, and have been CodeSchooled and even Skillcrushed. Go Team Treehouse!!

Library books? We don’t have time to discuss those. Documentation? I’ve bookmarked, read, reread, and re-reread. Re-re-reread?

In this Introduction to jQuery and JavaScript video workshop, Karl Swedberg is the instructor. His humble manner belies the fact that he possesses lots of knowledge. You’re in good hands.

I’m a newbie software development apprentice and revere practical instruction that doesn’t overwhelm with jargon. Condescending undertones are not acceptable. Even though it’s a few years old, this video workshop filled those requirement!

The videos are 3–12 minutes in length. Between each video are effects, animations, and music that reminded me of CodeSchool.

jQuery lets you dive in and go from beginner to advanced in a short amount of time. With excellent documentation, jQuery is efficient for developers. It helps you write consistent code that works well.

At its core, jQuery is a simple concept that reduces browser inconsistencies.

Nearly everything written in jQuery begins with $. For example, you can target every element on a page with $(‘div’). This method applies to other selectors as well.

$(‘div’) is the equivalent of JavaScript’s getElementsByTagName(‘div’) function. Seeing these examples side by side reinforced my knowledge, syntactically.

Elements ‘listen’ for actions by the user. Other actions include communicating with a server, and manipulating and animating elements.

For the JavaScript part, Karl offers a primer that is still relevant and accessible for intermediate-advanced beginners. Bear with me as I recap this tutorial and also confess something: JavaScript intimidates me.

However, this course helped me reinforce prior knowledge.

JavaScript works with strings (textual content with “double” or ‘single’ quotes around them), numbers (integers and more), booleans (true or false), arrays (simple lists indexed using []), and objects (lists of key, value pairs appearing within {}).

The index of an array always starts with 0. Nested arrays have strings, numbers, etc.

Information is stored in an object: {name: [‘Lisa’], loves: [‘sushi’]}.

I was befuddled when I started using ES6 last September. Which variable do I declare now? Do I use var, let, or const? Eric Elliott addresses this dilemma in the informative article, JavaScript ES6+: var, let, or const?

Let’s move onto conditionals and operators. Conditionals include if, else, and else if statements and the switch statement. More at MDN.

Arithmetic operators include: +, -, *, %, ++,- -.

Note that in addition to add, the + sign concatenates (links things together in a chain or series). I’m still trying to use % (the remainder operator). Link at MDN for arithmetic operators.

Comparison operators include: >, <, ==, !=, ≥, ≤, ===, ==, and !==.

The crucial difference between (double equals == ) vs. (triple equals ===) is that == means ‘equal to’ whereas === means ‘equal value’ AND ‘equal type’. When you use != vs. !==, != means ‘not equal to’ whereas !== is ‘not equal value’ OR ‘not equal type’.

Some operators in JavaScript include assignment operators, bitwise operators, conditional (ternary) operators, typeof operators, and logical operators.

Logical operators include: ! (bang aka not), && (and), and || (or).

Loops iterate through lists. JavaScript helps you build lists(collections), so you can do something with each item in the list.

CSS uses implicit iteration, and JavaScript uses explicit iteration. jQuery can do both!

Most common are the ‘for’ and the ‘for in’ loops. There’s also the ‘while’ and ‘do..while’ loops. The for loop has three statements (1. initial value, 2. the condition, 3. how to increment).

With a function, you name and define a block of code to use later. Functions can be defined with parameters and then called with arguments.

Every function has an arguments object. It’s a collection of arguments passed to the function when called. It allows for a variable number of arguments.

Functions can also be named or anonymous. You can also run functions WITHIN functions. I accidentally discovered this in the enrollment game for Learners Guild, much to my delight.

If you’re considering FrontEnd Masters, I found this preview video to be helpful. It’s from this specific course.

Most functions are anonymous in jQuery. Anonymous functions create closures, are used as callback functions, and can be used as object properties. Functions can be passed as arguments, too.

Almost everything in JavaScript is an object, except for numbers, strings, and booleans. Those are primitive data types and have object wrappers.

Objects include RegExp (regular expression) objects, global objects, date objects, math objects, RegExp string objects, and more.

To access properties of an object, you can use dot notation and array notation. Karl goes in depth in the videos with coding exercises.

JSON is JavaScript Object Notation. It’s a format for passing data back and forth.

Regarding script referencing: it’s crucial to add your style sheets AFTER you put the script tags in your document. Reference custom scripts AFTER you add the jQuery core code.

Reference plugins should be included in the jQuery core and custom scripts. Scripts should be referenced in between the <head></head> tags or before the </body> tag.

jQuery can be downloaded from the jQuery site or referenced with a CDN (content delivery network). You can find CDNs on jQuery, Microsoft, and Google.

Karl goes into deeper detail with real examples. A major takeaway for me was that script placement, and execution can affect user perception and overall experience.

In the syntax for CSS selectors, you’ll see the difference between #navigation and $(‘#navigation’). The first is regular CSS, but the second is its jQuery equivalent. Wrapped in quotes as a string, it’s then contained in brackets after the $.

There are other selectors in jQuery that include CSS attribute selectors and custom form selectors.

I advise checking out the jQuery documentation for further details.

One of the hardest sections for me was the video about traversal! To traverse means ‘move through’.

Traversal in jQuery means that you can find HTML elements as they relate to their position.

jQuery extends your ability to move in many directions with traversal, rather than the limitations of using CSS selectors.

image courtesy of DevNDesign

I admit that I had to rewatch some of the videos, especially the ones for filtering and chaining with jQuery traversal.

Karl’s attention to detail is outstanding, and I made use of the pause function throughout the videos.

Watch this space for my next review, which will be for the course Introduction to Web Development (the one that supersedes this course).

Personally, I’m excited to build a meaningful learning trajectory through these tutorials in the coming weeks. Thanks FrontEnd Masters and Learners Guild!


Leave a Comment

Your email address will not be published. Required fields are marked *