Blog by Sumana Harihareswara, Changeset founder

20 Dec 2013, 13:18 p.m.

JavaScript and How I Learn

Hi, reader. I wrote this in 2013 and it's now more than five years old. So it may be very out of date; the world, and I, have changed a lot since I wrote it! I'm keeping this up for historical archive purposes, but the me of today may 100% disagree with what I said then. I rarely edit posts after publishing them, but if I do, I usually leave a note in italics to mark the edit and the reason. If this post is particularly offensive or breaches someone's privacy, please contact me.

From yesterday's JavaScript explorations:

"I have now discovered that element.innerText works in Chrome and in Epiphany but not in Firefox."

"This is why you use jQuery."

And now I do! My "presidential" "speech" generator is now a web page that calls upon a CSS file, jQuery, and my JavaScript to grab three buzzwords from the user, choose random items from some pre-written lists, interpolate everything appropriately into a text template, hide the input div, and display the letter to the user -- with a little footer that floats right. It's all "client-side", as the kids say.

Some more things I learned:

  1. Oh right, ordering matters. My <script> loading tags need to load up jquery.js before loading any JavaScript files that use jQuery functionality! Or else the web console says "wtf is '$'?" in more polite language ("ReferenceError: $ is not defined").
  2. I was wary of the whole event-handling paradigm but now I'm getting used to it and might like it. Instead of the default idea being "here I am, a script, doin' everything by myself, maybe shoehorn in some interactivity with the user sometimes", the default idea feels like "I'm a set of useful reactions to possible things the user will do".
  3. I know the windowshade-style hide and show jQuery functionality is a pretty clear "look! jQuery demo!" signal. And now I know why: because it is cool and easy and just works! Yay .hide()!
  4. To get the value of a text input: $( "#InputIDName" ).val();
    To stick a string into a div: $("#divName").html("string");
    I am pretty sure the ".html" method escapes things to keep you from opening up an XSS vuln but I'm not sure and need to check. Argh escaping!
I still want to fix up a bunch of user experience, but right now I've clearly achieved the goal of porting my toy from Python to JavaScript, so that makes me happy. My batch of Hacker School ended yesterday but I am keeping the momentum going (I got speech.js working this morning).

At Hacker School I followed my own advice and found or made up silly and boring and helpful projects to use while learning. My current rhythm seems to be: start by working through the first few chapters of a textbook to learn basic concepts and syntax, then think up a silly project to make and start making it, then run into problems one at a time, causing me to learn idioms and libraries and gotchas from a mix of my colleagues and the Internet. Maybe someday I will come back to chapter three of the book and engage in some more spiral learning! It's nice to have a diversified portfolio.

Comments

Roan
20 Dec 2013, 14:49 p.m.

I am pretty sure the ".html" method escapes things to keep you from opening up an XSS vuln but I'm not sure and need to check. Argh escaping!

Nope! .html() is unsafe, and it's deliberately named that to communicate the fact that it expects raw HTML and is therefore unsafe (not very clear, I know; frameworks that care more about this explicitly use the words "unsafe" or "raw"). The safe version that escapes things is .text().

I'm happy to see that you thought about escaping and XSS vulnerabilities. A shocking number of people don't.