Intro to JavaScript

JavaScript, The Language

This is an intro to the third and final major component of frontend website development. JavaScript.

Where HTML is used for the content and structure of a web page, and CSS is for the layout and appearance, JavaScript is used for behavior and interactivity.

The HTML says "here's the content"
The CSS says "here's how it should look"
And the JavaScript says "here's what it should do" (if anything)

Programming languages, simply put, are how we tell computers what to do. HTML and CSS are relatively simple, mostly declarative programming languages. We tell the computer "make a paragraph" (<p>) and it does so. A lot of the details are abstracted away, which is nice! We don't have to worry about telling the computer how to draw the box on screen, how much memory to allot, how it should react to changes in the viewport size, or other rudimentary details.

Most programming languages do however deal with those lower level details, to varying degrees. This brings a lot more complexity and a steeper learning curve, but it's also more expressive and gives us more control. They have grammar and constructs that let us check for certain conditions, encapsulate repeated functionality to avoid repetition, store information and state into named variables, and a whole lot more.

JavaScript can do all of these things. So while we won't get too far into such details in this lesson and demo, I think a little bit of context is helpful. I personally think that a deep understanding of CSS and how it works is an underrated skill, and that people underestimate its potential and complexity because getting started is very easy. JavaScript can seem quite a bit more difficult at first, because it exposes more programming capability right up front.

In the Browser

When JavaScript is run in the context of a browser, it has tools and methods for working with the HTML and CSS that are being displayed.

Using JavaScript we can say "hey computer, how big is that div?" or "what's the text in that paragraph?"

We can also say "hey computer, make that div x wide" or "when y happens, set the paragraph text to this: …"

Let's open the demo and use the JavaScript console to print a few properties about the page!

In this context, JavaScript is a client-side language. This means that script files are downloaded as plain text along with the HTML, CSS, and other assets of a given web page. The code is interpreted and executed by the browser, so the user's computer does all the thinking and processing.

All of the design and development that happens on the client-side, in the browser, is collectively called "front end" design and development.

"Back end" development refers to code and the parts of web applications that run on the server side. Servers can (and do) run many different kinds of languages and code, not just JavaScript. Most of this is invisible to the client. As visitors to a website there is very little we can see or know about the code that's running on the server.

Outside the Browser

JavaScript was originally created for Netscape, a web browser that was incredibly popular until the early 2000s.

JavaScript was originally created just for use in the browser, for working with web pages. It is the only language available for this purpose. Browsers don't support any other programming languages. Since the web has grown astronomically since JavaScript's first debut in 1995, the language's popularity has grown with it.

For the programming language itself, this means that it has become incredibly fast, feature rich, and mature. And since it's familiar to every web developer in the world, JavaScript is now used in many places well beyond web pages. (It makes sense that we might want to use a language we're probably already familiar with in other places, too!)

Node.js is an implementation of JavaScript for dynamic server-side applications and build tools. It runs outside of the browser, and instead of including tools for working with web pages, it has built in tools for handling files and networking.

In other places still, Adobe products use JavaScript for creating custom actions. There are even frameworks that can convert JavaScript into native apps for iPhone and Android! JavaScript is everywhere.

Libraries, Frameworks, and jQuery

We're going to use jQuery for this demo. Here comes a definition in a mouthful so I'll try to explain a bit better:

jQuery is a widely used JavaScript library that simplifies DOM manipulation and JavaScript syntax. It's lightweight and extensible, meaning anyone can author plugins that add additional functionality to the library.

wut.

The DOM, or Document Object Model, is basically the same as the structure of the HTML. It's also often referred to as the document tree. If you haven't thought of it this way, the HTML of a web page is often visualized as a tree. The <html> element is the root element, and each additional element is a branch, with more elements branching off as we get further into nested elements.

A library, or framework, is a large collection of functions and definitions that make a certain tasks easier to do in a given programming language. It's basically "boilerplate" code that saves you from reinventing the wheel every time you start a new project.

A plugin is almost the same thing, only smaller and more specific to a certain task.

An analogy might be helpful here.

Say you're starting a new project—to build a house. That's a lot of work to do completely from scratch! You have to design the floor plan, dig a hole for the foundation, build the foundation brick by brick, and go from there. A library or framework is like a pre-constructed foundation. In fake pseudo-code let's call this "import foundation". With this the digging is already done and a logical size, footprint, and possible floorplan are already laid out for you (probably by someone who knows even more about building houses). This lets you skip a lot of the hard planning and base work, and get right to building the actual house, which is much more important to you.

A plugin in this analogy would be like "import kitchen". This is a smaller, single-purpose room that comes with a pre-installed refrigerator, range, dishwasher, etc. You can still customize things like the cabinet materials and appliance colors, but again you save a lot of time by not building them yourself.

The additional benefit of using libraries, frameworks, and plugins is that they're often open source. This means lots of people have used them, and experienced people have likely contributed to making the code fast, compatible, and well documented.

What jQuery Does

jQuery simplifies the use of certain common tasks that we perform in JavaScript. Tasks that normally take several lines of not-so-friendly "vanilla" JavaScript can be accomplished with significantly less typing and better readability. Hence the jQuery slogan - write less, do more. It was first launched in 2006 by John Resig, and while some of jQuery's core features are now much easier to do in regular JavaScript than they used to be, it remains one of the most widely used JavaScript libraries in the world.

The jQuery website has documentation of everything at your fingertips when using jQuery.

Here's the starter tutorial on how jQuery works. We'll do something very similar to this together, using my demo files, to get you up and running.
learn.jquery.com has textual explanations with sample code that can walk you through the basics and best practices.
Once you're familiar with the basic syntax, you'll probably spend more time referring to the API Documentation. It has definitions of all of the methods, events, etc. available in jQuery, with simple demos showing what they do.

Diving In

Great so how do we get started using it?

Link to the jQuery library in your document <head>

To start using jQuery, it needs to be loaded in your html, like a style sheet or other external resource. Luckily we don't even need to download jQuery to do this. We can get jQuery from the Google CDN.
Link to a script file of your own, or embed your script between <script> tags in the HTML. This is the same idea as linking to a style sheet of your own, or typing CSS between <style> tags.

The jQuery core library doesn't include all of the superfluous animation effects you might want to use. Those are part of jQuery UI, which is an add-on library. jQuery UI includes another .js file, and a style sheet. We will also source these from the Google CDN for this demo.

Once you've linked jQuery, which sets everything up, you can also get started typing your own script file(s).

Now may be a good time to switch over and do the demo!

Some Terminology

Here are some helpful terms to know when getting started, and reading the API Documentation:

jQuery Object - the DOM element(s) you're targeting inside $().
Method - a method is anything you can do with an object. jQuery has tons of methods for manipulating objects.
Function - a chunk of code to be executed. Sometimes it helps to organize our code into smaller chunks. Functions can be called right away, or defined with a name and reused later.
Event - something that happens on the page. Mouse clicks and hovers are events.
Event Listener - a function that is triggered when an event happens.
Callback function - a function that executes when another function finishes.
Chaining - One of the most powerful aspects of jQuery. Methods can be chained together to happen in sequence, similar to a callback function.

About Animations

jQuery is great for very simple animations, but it has trouble with more advanced animations, and with animating lots of things at once.

CSS transitions and animations are better optimized to use the computer's GPU, and spawn separate threads for certain calculations, making them far more efficient. Don't be afraid to use jQuery to animate things! But it's a good idea to use CSS transitions if you have the option.

There are other JavaScript libraries aimed specifically at animation that are more efficient like CSS. GSAP, velocity.js, and d3.js are some of the most popular. Velocity is even a drop-in replacement for jQuery's .animate() function.

Very advanced animation and visualization is all done in JavaScript using libraries like these.

Plugins

Plugins for jQuery (and others that don't require jQuery at all) can be found on the Resources page.