Getting Good with JavaScript - Andrew Burgess [18]
round / ceil / floor
Math.round is your friend when you want to round a number to the nearest whole number. If you need to round up, use Math.ceil. Rounding down? Math.floor is here to help.
Example 3.34
alert( Math.round(10.4) ); // 10
alert( Math.round(10.5) ); // 11
alert( Math.ceil(10.4) ); // 11
alert( Math.floor(10.5) ); // 10
Combining Math.random and Math.floor, we can write a function that will return a random number between a minimum and maximum number:
Example 3.35
function getRandomNumberInRange(min, max) {
return Math.floor( Math.random() * (max - min + 1) + min);
}
alert( getRandomNumberInRange(0, 100) ); // 39; you'll probably get something different.
pow
This is the function to use when taking the power of a number. The first parameter is the number you're taking the power of and the second parameter is the power.
Example 3.36
alert( Math.pow(2, 3) ); // 8
alert( Math.pow(2, -1) ); // 0.5
Summary
Well, it's been a long haul, but you've pretty much mastered all the basics; you're familiar with all the data types built into JavaScript, and all their methods. You're also proficient using function and control structures (loops and conditionals). With the basics under your belt, we can now move on to some slightly more difficult techniques.
More Concepts and Best Practices
You now have a good grasp of the basics of JavaScript. This chapter will take that knowledge up a level: we'll discuss some of the more complex JavaScript features, as well as some good practices for coding. So let's not waste another moment!
this
The first this we're going to tackle is this. Wait, what? That's right: this. It's rather hard to talk about, because of the name, but it's an important concept to understand. This is a keyword in JavaScript that you can think of as a dynamic variable that you can't control. The value of this changes based entirely on where you are in the code. Let's take a look.
For the majority of your code, this will reference the global object. I've mentioned the global object very briefly, but now is a good time to get to know it better. Remember the parseInt and parseFloat functions we talked near the end of the last chapter? These are functions are actually methods of the global object. This means you can access them via this format:
Example 4.1
alert( this.parseInt("10.2", 10) ); // 10
alert( this.parseFloat("3.14159") ); // 3.14159
Here's a general rule: unless you've done something to change the value of this, it refers to the global object. When this is the case, anything you'd access without specifying an object is a property of the global object. Yes, this even applies to global-level functions and variables of your own. Try this:
Example 4.2
var my_variable = "value";
function my_function () { return "another_value" }
alert( this.my_variable ); // "value"
alert( this.my_function() ); // "another_value"
this doesn't really have a proper name, but it does have a property that refers to itself: window. If you could see this code, it might look something like the following:
var global = {
window : global
. . .
};
this = global;
This means you can also access your variables and functions as properties of window, which is more common than using this. It gets a bit more confusing here, because you can access window to use things on the global object even when this refers to something else. Even then, you don't have to call it off window, unless you have a local variable or function overwriting it.
Now that we've (somewhat) got a hold on what this is by default, let's look as how we can change it.
The new Keyword
The first way of changing this that we'll look at is yet another keyword: new. But first, some context.
You know what a JavaScript object is. Keeping most of your related functionality in an appropriate object and accessing it via an appropriate interface is a very (very, very) basic description of what's called "Object-Oriented Programming" (OOP). Many programming languages use classes to do OOP. Classes are like blueprints: