Frank Merchlewitz is a writer, musician and multimedia dude from Des Moines. Frank works part time as an assistant producer and intern at Strategic America in West Des Moines and as the technical director for the Welch Avenue Show. You can see his alt-jazz band Watercolors performing monthly at the Lift and Star Bar (or in this video he made).
He still doesn’t know what he wants to be when he grows up, so he tries to soak up as much as he can. Inspired by the folks he met during his summer internship with Silicon Prairie News, he’s teaching himself to code—sharing some of his posts along the way via SPN. It’s hard, but at least the kid’s trying.
This post originally appeared on Frank’s personal blog, “Idiot Learns to Code,” and has been republished here with his permission.
(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 square miles.)
BECOME A SPONSOR
Join us in championing the narrative of success, resilience, and ingenuity that defines Nebraska’s startup community. Learn more »
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:
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 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 continously 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 (pictured left).
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.
Say 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!
Want to get in contact with Frank? Tweet at him at @Frank_Merk or visit his website.
Credits: Frank Merchlewitz photo courtesy of Merchlewitz.
One response to “Idiot Learns to Code: 5 Javascript things Codecademy doesn’t teach you”
[…] Idiot Learns to Code: 5 Javascript things Codecademy doesn't teach you Frank Merchlewitz is a writer, musician and multimedia dude from Des Moines. Frank works part time as an assistant producer and intern at Strategic America in West Des Moines and as the technical director for the Welch Avenue Show. You can see his … Read more on Silicon Prairie News […]