Falling in Love with JavaScript

JavaScript, it was love at first byte.

Scroll down...

Content

Resources

Comments

Let's learn by doing. Let's learn by getting incredibly confused.

Don't worry, the actual curriculum starts after you survive this, but this process will help you get a sense of what JavaScript is even like, and it will help you read for content in the curriculum to come.

The way this will work is we will ask you to input some code into the console and make things happen right on this page. If you're worried something got messed up, just hit the reload button on your browser and it'll all be washed away.

One tip: if something returns undefined, that doesn't mean it didn't work. It just means it didn't return anything.

Dev Tools

As just mentioned in the previous lesson, the easiest way to play with JavaScript is to look at it in the browser console, so fire up your Developer Tools (either right click anywhere on the page and select "Inspect element" or Command + Option + J if you are a Mac user) and click the Console tab. For best results, you want it side-by-side with your browser window.

Developer tools Console tab

Hello World

First, go into the console and input console.log("Hello World!");, then hit return.

When you get multi-line instructions, use a SHIFT+ENTER rather than a carriage return between each line so you don't get errors trying to execute half a function. We highly recommend you actively type these in rather than copy-pasting, because muscle memory matters. Try to guess what's going to get output in each one before it runs, and feel free to play around with this stuff further!

So now try this:

var myFirstString = "Hello World!";
console.log(myFirstString);
alert(myFirstString);
alert("Now adding to" + myFirstString);

Cool! You just made something happen in the console and in the browser!

When you declare a variable for the first time, make sure to start with the var keyword. You're going to learn why in a couple lessons. Also, notice how common those parentheses and semicolons are.

Arrays and Loops

Unlike most programmers, computers thrive on repetitive tasks. When coding, you will often find yourself with a bag of data and the need to manipulate each morsel of datum in that bag. Arrays are the perfect bags for our data, while loops and iterators provide the perfect means for operating upon them. Give this a shot in your console:

var myArray = ["a", "b", "c"];

for (var i = 0; i < myArray.length; i++) {
    console.log("i is " + i);
    console.log("and myArray[i] is " + myArray[i]);
};

myArray.forEach(function(element) {
    console.log("forEach loop outputs " + element);
});

We promise you will understand how these functions work soon enough. For now, see what you can infer from the oddly broken English of the code and its result in the console.

Objects are Everything

You're about to meet objects. In JavaScript, nearly everything is an object. An object is essentially a bundle of data and behavior. Programming objects can often analogize to real-world objects (a Viking object might have a name and weapon for its data, with the ability to pillage as its behavior), but they can often represent more abstract concepts, like a number (whose data might be its value, and its behavior the ability to add and subtract).

var viking = {
    weapon: "Fist",
    name: "Karl",
    age: 38
};
viking['weapon'] = "Battle Axe";
viking.weapon = "ICBM";
alert(viking["weapon"]);

You Can't Have Functions Without "Fun"

First, input these in one block as mentioned before. For once, you can copy-paste it if you're having syntax problems.

function foo() {
    console.log("My name is foo!");
};

var bar = function() {
    console.log("My name is bar!");
};

var myObj = {};
myObj.baz = function(){
    console.log("I'm Baz. I came with myObj.");
};

Then, input the following commands, one by one, looking at the results after each line. Try to guess what you'll get for each one.

foo;

foo();

bar;

bar();

myObj;

myObj.baz;

myObj.baz();

So you can get the browser to output the text of the function you're referencing, and the parentheses are the trigger that makes it actually fire. This knowledge should come in handy later when you have a broader picture of how the language works.

Playing With the Browser

Okay, now let's do the kind of thing JavaScript was born for. Here's a series of one-liners to try, one by one.

Input the following code to the console in this browser tab. Then watch the following header change while you do:

Look Here. I'm an H4 with ID='try-me'

//get ready to read some HTML
document;

//and some more
document.body;

//grab that h4
var tryMe = document.getElementById('try-me');

//look what's here now
tryMe.innerHTML;

//look what we're setting it to
tryMe.innerHTML = "Look What Just Happened";

//keep an eye on that h4
var parent = tryMe.parentNode;
parent.removeChild(tryMe);

// this one grabs a collection
// and picks the first element
var header = document.getElementsByTagName('h1')[0];

//do this, then look up and left
header.innerHTML = "I'm a Viking. MY Code School";

Excited yet? There are definitely easier ways to do this, which you will learn, but it's worth knowing that some vanilla JavaScript with absurdly long function names can always do what you're looking for.

Last Stop: Interactivity

This is a bit more complex than anything we've done so far, so just go along for the ride and get a sense of what is possible. Again, this is supposed to be a high-level tour of pure JavaScript, not something you memorize and expect to know how to do on your own just yet.

Here's a lazy button that doesn't do anything yet. Let's give it something to do. There's a lazy span right under it that doesn't do anything either.

Me Neither

Input this chunk of code into your console, though, and things will be very different. As a bonus, notice the syntax of if statements.

var lazyBtn = document.getElementById('lazy-btn');
var lazySpan = document.getElementById('lazy-span');
var clickCount = 0;

lazyBtn.innerHTML = "Click Me Now!";
lazyBtn.style.backgroundColor = "#66CCFF";
lazySpan.style.color = "#FF0000";

lazyBtn.addEventListener('click', function(){
    clickCount++;
    lazySpan.innerHTML = "Button has been clicked " + clickCount + " times!"

    if(clickCount === 25){
        alert("YOU WIN!!!!!!!!");
    };
});

Needless to say, see what happens if you click that button 25 times. Any guesses how this thing worked?

Wrapping Up

You've done a whole lot of browser coding for someone who may not know a thing about JavaScript!

Lots of this probably feels strange and scary. That's okay; the following unit will begin to put all the pieces together. From here on out, whenever an example seems too abstract, type it into the console and watch it play out before your eyes.

Before you go on, here's a little bonus that shows you how things can go wrong if you're not careful. Don't type it in until you're done with this page, and get ready to hit the "refresh" button afterward.

document.body.innerHTML = "Oops!";


Sign up to track your progress for free

There are ( ) additional resources for this lesson. Check them out!

There are no additional resources for this lesson just yet!

Sorry, comments aren't active just yet!

Next Lesson: How this Unit will Look