Be Dangerous: Just Enough JavaScript[1]

The last post, and also the first, in this series was referenced as "0" - a nod to how programming languages generally index items in a list as well as indicating it was something of a prologue.

I ended that post by saying this one would focus on:

How to install node.js and make it say hello

My reason for using node as a basis for an introduction to the JavaScript is that it divorces the language from the browser and allows us to focus purely on the language itself. This series is meant to mostly de-mystify JavaScript and how it works and the simpler the implementation - the closer we get to that goal. Using node means we don't have to dissect a web page to see JavaScript in action.

However, I realized in consdering this post that installing node is sort of a chore itself. We can actually get our feet wet just using the browser you are staring at right now and still completely ignore web pages as well.

What kind of sorcery is this? Simple - we're just going to change the most fundamental part of your browser.

The location bar. That thing above this post which should say something like "joshbirk.herokuapp.com" and the like.

See the web is navigated using Uniform Resource Locators or URL's. I actually demonstrated a flaw in a company's attempt to completely block JavaScript from any page browsed on their internal network using nothing more than URL's. The demo was called Evil URL, or EURL and EURL showed that despite their best efforts I could still pretty much run whatever JavaScript I wanted.

How? Well the page you are viewing right now was transported to you via a specific protocol. Like a secret handshake that both the browser and server understand. Probably HTTP (HyperText Transfer Protocol). You may not see http:// in the location bar above this page because most browsers hide it as it's just the assumed, but your average URL looks something like:

http:// www.domain.com / yourpage.html

The spaces divide it into protocol, domain and resource. Your browser (probably) understands a lot of other protocols. When you shop online, you should see https in the location with a friendly icon telling you it is secured. HTTPS is like HTTP for serving web pages, but with a layer of encryption added.

Now in your location bar, type the following and hit return. You will probably have to type it out, as browsers like to reform protocols with links. Don't worry this page (probably) won't go anywhere.

javascript:  

Probably nothing happened. That's because you invoked the JavaScript protocol but didn't give it anything to do. This protocol sends code directly to the browser's JavaScript engine.

Since we have a limited amount of space here, we are going to invoke one of JavaScript's native functions. A function is a block of code we can run all at once with a single command. You could pass a function two numbers and it could return the result of some math of them to you.

By a native function, I mean one that is included with JavaScript itself. They are the basic tools for building out your code.

We'll use one you rarely need anymore. Type the following into your location bar:

javascript:alert("Hello!")  

And hit enter. Boom, you just made the page say hello. You ran one line of JavaScript. The alert function tells the browser to create a prompt with the text of your choosing.

Now JavaScript is pretty casual about things like format. Obviously the location bar doesn't make for a good development environment, but we can still make this a little more complex by adding something called a variable. Variables are simply slots which can hold a value. That value can change, but we have a reference to what that current value would be by giving the variable a name.

So now type:

javascript:var s = "Hello!"; alert(s);  

Boom - same outcome. You established "s" as a variable (shorthanded to var) and gave it the value "Hello!". You then passed that variable to the alert function. Functions take what we call parameters to determine how they should run. To the alert function, this and the previous command are identical.

So why put it "Hello!" into a variable if alert sees it exactly the same way?

Your homework is to ponder on that. Next we will look at variables and functions more closely.

comments powered by Disqus