Turing School of Software and Design

Quick Notes on Basic JavaScript

We’ve actually already seen some JavaScript such as variable assignment and functions while playing with jQuery.

JavaScript is a lot like Ruby, which you were introduced to yesterday. The syntax and some of the concepts are a little different, but the two have more in common than not. With JavaScript, you can do things like:

• Perform basic arithmetic (2 + 2, 3 * 3)
• Create some strings
• Create an array
• Assign a value to a variable

Unlike Ruby, you need to use the var keyword when declaring a variable for the first time. If you forget the var keyword, your variable will be declared in the global scope—whether you meant it that way or not. (For our purposes today, forgetting the var keyword will not be the end of the world, but just know that it could cause subtle bugs in our code. Let’s get in the habit of using it now.)

var x = 1;
x = 2;

Conditionals in JavaScript

JavaScript conditional statements have a few extra decorations as compared to Ruby.

var secretPhrase = $('.user-input').val();

if (secretPhrase === "turing") {
  $('h1').addClass('highlighted')
} else {
  alert("DENIED!")
}

    if () {
      // do some jQuery!
    } else {
      // do something different!
    }
  

Optional side note: Working with Numbers

JavaScript has two ways of seeing if two values are equal: == and ===. == is notoriously weird, so we tend to avoid it. But there is a small problem with using === and getting numbers from input fields that we need to discuss.

Let’s consider the following example:

See the Pen Is this two? by Turing School of Software and Design (@turing) on CodePen.

Hmm—that’s curious. It doesn’t seem to work. It’s actually a good reason. No matter what, input fields always hold strings of text. So, we’re actually getting the string "2" and not the number 2. It makes sense that those things are not equal. What we need to do is to turn that string into a number before we compare it.

This is pretty common, so JavaScript gives us a function for doing it called parseInt().

parseInt("2") === 2; // true!

Now, we can update our code as follows:

$('.user-submit').on('click', function () {
  var number = $('.user-number').val();
  if (parseInt(number) === 2) {
    $('.message').text('You are right!');
  } else {
    $('.message').text('Sorry, that is not the number 2.');
  }
});

It works now!

See the Pen Is this two? (Non-Working) by Turing School of Software and Design (@turing) on CodePen.