(Disclaimer: I’m sure I’ll make a lot of errors in how I describe basic computer science and code-specific terminology. That’s the “Idiot” part coming through. This is all written in the language of my understanding. I hope it’s yours, too. I love it when people correct me in the comments or via social media. Take everything you read here with a grain of salt the size of an asteroid the size of Texas, which is of course 268,820 sq miles.)
A list post! Hooray!
It was only a matter of time before I created some good old-fashioned clickbait.
Let me start by saying I love Codecademy. I couldn’t have gotten to the level I’m at now without their introductory Javascript course. But as any good web developer will tell you, the best way to learn is by actually building something.
I’m getting there, slowly but surely. My biggest recommendation for Codecademy users is to use it as jumping off point; get the basics under your fingers, then go out and find a decent book dedicated to the language you just got a primer on. For me, that’s Javascript. So without further ado, the most important things I learned about JS after Codecademy.
1: DOM Structure
Theoretically, if you’re teaching yourself Javascript, you already know a little bit of HTML and CSS. I’ve always felt that beginning devs ought to first learn HTML–the building block of the internet–then CSS which styles HTML, then Javascript, which handles data and dictates how CSS and HTML objects are animated or interact client side.
So after I finished Codecademy’s JS course, I wanted to know how it actually functioned in the browser. But there’s nothing in Codecademy’s JS introduction that tells you how to implement Javascript in your webpages. The go-to “print” command in their lessons is “console.log()”, which does just that: Logs to the console, where Codecademy’s preview takes place. In practical terms this works but not in functional terms. The actual display of text and other data output on web pages is done with HTML, which is manipulated by Javascript.
Enter the DOM, or Document Object Model. It’s a convention that specifies how web documents are accessed and modified (usually with JS). Think of it as a hierarchy where the HTML elements are accessed in the order that they’re organized and nested:
This graphic (from W3C) shows part of the “DOM Tree”. If you’ve ever used the “Inspect Element” function of your browser, you’ve probably seen a js function called “document.getElementById()”. It’s probably the most important function for Javascript beginners. It gives direction to functions so they get valid data and/or input, moving down the branches of the DOM tree to retrieve information.
So, you write some Javascript in the <head> of your HTML document (another convention you ought to be aware of). Here’s a stupidly easy example of Javascript working with HTML:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<head>
<link type = “text/css” rel = “stylesheet” href = “Doop.css”/>
<title> Hello </title>
<script type = “text/javascript”>
function greeting() {
var text = “hello!”;
var output = document.getElementById(“output”);
output.innerHTML = text;
} </script>
</head>
<body>
<h1> Derpy derp derp </h1> /*I title a lot of things “derp” or some variant. It’s my version of “Lorem Ipsum */
<button type = “button”
onclick = “greeting()”>
click me
</button>
<div id = “output”>
</div>
</body>
</html>
So here’s what I did in terms of things Codecademy doesn’t teach:
- Put some Javascript in our HTML page with the <script> tag. The browser sees <script type = “text/javascript”> and processes what’s in between the tags as a Javascript element. Once it sees </script>, it returns to processing the HTML with respect.
- In this case, we’ve got a simple function called “greeting()” that outputs “hello” when you click a button. How do we get there? DOM scripting, of course! That little built-in function, “document.getElementById(“output”)” tells the browser to scan the HTML document for an id called “output” contained in a <div> tag. We’re first accessing, then manipulating the DOM.
- As the browser interprets the page, it interprets our button element which contains instructions to execute our “greeting()” function at “onclick”. When that happens, it triggers the function to access our <div id = “output”> and do…something. We use another simple function, “.innerHTML”, to display the text “hello!”. Through the DOM, we’re accessing the <div> and altering its HTML content through Javascript, taking empty space and putting a greeting tied to the user’s input of clicking a button. Here’s what it looks like:
So, in so many words, that’s how to get a Javascript working on the page and outside of the Codecademy IDE. Not only that, but you can sort of see the value of js for processing user input.
2: JSON
No, JSON is not the weird spelling of some alt-dude’s stupid band. JSON stands for JavaScript Object Notation, a language-independent data format used by a lot of APIs. It follows the basic method of how objects are notated in Javascript (maybe that’s why they call it Javascript Object Notation! Neat!)
An example:
{
name: “Frank”,
favoriteSandwich: “Too Much Tunafish” }
Simple enough, but websites can build enormous databases with this simple tool. I first encountered JSON when I got a hair-brained scheme to build a widget for Discogs, an online database that allows vinyl junkies and music collectors of any physical medium to create a digital catalog of their collections. Their API is JSON-based, so you can access objects for artists, releases, master releases, tracklists, rawk-hairstyles(?) and infinity. A handy tool for someone looking to expand their collection or share it with friends, families and jealous fellow-collectors. But I digress.
JSON isn’t mentioned in Codecademy’s Javascript course, but might be referenced in some of the API tutorials that I haven’t browsed yet. But since Javascript’s most powerful attribute is it’s ability to access data and convert it into an HTML-usable format, you may want to take the time to learn a bit more about how JSON functions in the real world. The real world being the internet.
3: AJAX
AJAX is another fun abbreviation that sounds scarier than it actually is: Asynchronous Javascript and XML (XML being a script-based data storage method). With Asynchronous I/O, web applications can function without having to contionously refresh a page. For example, when I listen to 89.3 The Current’s web stream (like the good hipster I am), they have AJAX built into the web tool that allows the stream to continue playing while changing the information it displays, such as the current track and album art. The XML document receives information in real time about what song is on the air, the artist’s name and so on. Meanwhile, Javascript has instructions on when to access the XML document and updates the page accordingly–without altering the navigation menu on the right hand side:
To be honest, I haven’t spent a lot of time working with AJAX or its syntax yet (You saw my example program…), but it’s important to know that AJAX exists for when you start building more complex apps. Ain’t data fun?
4: Node.js and other JS branches
In the most dumbed-down explanation possible, Node.js is a port built in C that allows Javascript to run as a server-side language.
What?
(Remember the difference between client-side/server-side?)
Node can make server requests and is event-oriented. I’ll get to events in my next Dum-Dum summary of computer science terms.
For now, don’t expect to truly understand what Node is before you have a decent understanding of what Javascript and backend languages do. I certainly don’t. The most important lesson to glean from Node.js is how dynamic Javascript is as a language. It’s constantly in a state of branching and development. That’s something that blew my mind when I began to learn how to code; not only are there a virtually infinite number of programming languages, but they’re constantly changing and morphing into crazy new languages that can do more and more powerful things. Node is still in its infancy, but developers appear to be excited for its potential, and it’s good to keep developer developments on your radar as they develop.
Uh-huh.
For other branches, check out CoffeeScript, Dart and ActionScript. Or don’t. I’m not your dad.
5: jQuery
I know, I know, Codecademy has a chapter devoted to jQuery. That’s why I have it as the final item on the list; they don’t integrate it into the Javascript chapter. I’d rather have it as part of the Javascript course material considering how a lot of the cool stuff people want to do with JS is handled by jQuery. That includes animating text on events like mouseovers, showing and hiding divs and so on.
jQuery is a “write less, do more” Javascript library. I think of it (perhaps incorrectly?) as having an analogous relationship to HTML and CSS. CSS styles HTML using built in elements and guides, and jQuery uses Javascript methods to guide JS functionality; CSS tells HTML what to do, just as jQuery tells Javascript (and by extension, CSS & HTML) what to do.
Codecademy has a decent intro to jQuery as well, but as with everything, supplement your knowledge with books and more online resources.
And remember, Knowledge is Power!
