New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

JavaScript Essential Training
Illustration by

Working with numbers


From:

JavaScript Essential Training

with Simon Allardice

Video: Working with numbers

Working with numbers comes easily in JavaScript. We've already done this. We can create variables and put numbers in them. And like any language, we have the notion of numeric variables, we have the notion of numeric literals. In this case, just the value 200 written in your code is a numeric literal. But if you're coming from another programming language, you're likely to be thinking, "What kind of number is this. What kind of variable is this? Is this an integer, is it a floating- point number, what kind of number is it? We don't have to ask those questions in JavaScript because internally all JavaScript numbers are 64- bit floating-point numbers.
Expand all | Collapse all
  1. 3m 28s
    1. Welcome
      1m 1s
    2. What you should know
      1m 44s
    3. Using the exercise files
      43s
  2. 15m 41s
    1. Introduction to JavaScript
      8m 6s
    2. Creating your first JavaScript
      2m 13s
    3. Getting to know the tools and applications
      5m 22s
  3. 56m 8s
    1. Understanding the structure of JavaScript code
      7m 9s
    2. Where to write your JavaScript
      3m 56s
    3. Creating variables
      6m 21s
    4. Working with conditional code
      5m 44s
    5. Working with operators
      13m 28s
    6. Sending messages to the console
      2m 59s
    7. Working with loops
      8m 1s
    8. Creating functions
      8m 30s
  4. 36m 13s
    1. Working with arrays
      7m 57s
    2. Working with numbers
      6m 13s
    3. Working with strings
      8m 27s
    4. Working with dates
      5m 38s
    5. Working with objects
      7m 58s
  5. 9m 6s
    1. What is the DOM?
      5m 49s
    2. Working with nodes and elements
      3m 17s
  6. 25m 17s
    1. Accessing DOM elements
      11m 3s
    2. Changing DOM elements
      5m 42s
    3. Creating DOM elements
      8m 32s
  7. 24m 45s
    1. Introduction to JavaScript event handling
      8m 16s
    2. Working with onClick and onLoad events
      7m 36s
    3. Working with onBlur and onFocus events
      2m 36s
    4. Working with timers
      6m 17s
  8. 21m 41s
    1. Common JavaScript errors
      7m 14s
    2. Using Firebug
      4m 7s
    3. Going through a debugging session
      10m 20s
  9. 10m 13s
    1. Accessing form elements
      4m 20s
    2. Preventing a form from being submitted
      2m 36s
    3. Hiding and showing form sections
      3m 17s
  10. 9m 49s
    1. CSS and JavaScript
      3m 46s
    2. Removing and applying CSS classes
      2m 16s
    3. Changing inline styles
      3m 47s
  11. 19m 44s
    1. Understanding JavaScript style
      7m 39s
    2. Minifying your code
      4m 28s
    3. Using JavaScript code checkers
      7m 37s
  12. 22m 24s
    1. Introduction to JavaScript libraries
      3m 17s
    2. Linking to multiple JavaScript files
      2m 11s
    3. Introduction to jQuery
      12m 7s
    4. Using a content distribution network to deliver JavaScript files
      4m 49s
  13. 17m 35s
    1. JavaScript in HTML5
      9m 37s
    2. Using Modernizr
      3m 2s
    3. Using Strict Mode
      4m 56s
  14. 33m 3s
    1. Knowing the JavaScript to avoid
      6m 35s
    2. Introduction to regular expressions
      6m 56s
    3. Working with AJAX
      10m 44s
    4. Working with objects and prototypes
      8m 48s
  15. 21m 10s
    1. Example: Countdown
      8m 3s
    2. Example: Resize
      5m 47s
    3. Example: Accordion
      7m 20s
  16. 4m 58s
    1. Where to go from here
      4m 0s
    2. Goodbye
      58s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
JavaScript Essential Training
5h 31m Beginner Jul 22, 2011

Viewers: in countries Watching now:

Use JavaScript to add new features and a richer, more compelling user interface on web pages. This course keeps current best practices and practical uses for JavaScript in mind, while covering syntax, working with the DOM, and developing and debugging across multiple platforms, devices, and browsers. Author Simon Allardice also shows how to progressively enhance and gracefully degrade web pages, and take advantage of the world of JavaScript libraries now available.

Topics include:
  • Understanding the structure of JavaScript code
  • Creating variables, functions, and loops
  • Writing conditional code
  • Sending messages to the console
  • Working with different variable types and objects
  • Creating and changing DOM objects
  • Event handling
  • Working with timers
  • Debugging JavaScript
  • Building smarter forms
  • Working with CSS, HTML5, and JavaScript
  • Using regular expressions
Subjects:
Developer Web Web Design Programming Languages Web Development
Software:
JavaScript
Author:
Simon Allardice

Working with numbers

Working with numbers comes easily in JavaScript. We've already done this. We can create variables and put numbers in them. And like any language, we have the notion of numeric variables, we have the notion of numeric literals. In this case, just the value 200 written in your code is a numeric literal. But if you're coming from another programming language, you're likely to be thinking, "What kind of number is this. What kind of variable is this? Is this an integer, is it a floating- point number, what kind of number is it? We don't have to ask those questions in JavaScript because internally all JavaScript numbers are 64- bit floating-point numbers.

That's how they're stored under the hood. So you don't concern yourself whether it's an integer or a small integer or a large integer and so on. Now if you're familiar with floating- point arithmetic, you'll know that you can have issues with that. In practice, that doesn't tend to be a problem in JavaScript because most people aren't really doing complicated financial calculations in client-side code. But yes, JavaScript numbers are floating-point numbers and all the usual rules apply to that. But if you want to store something in a JavaScript variable that has something after the decimal point, you simply write it.

No special formatting is needed. It's very easy. However, there are a couple more things we need to talk about with numbers. One thing that you need to be aware of is just the behavior that happens when variables have certain values in them. So let's say we start off with a couple of variables here, var foo and var bar, both equal to the number 5. I can tell it's the number because there's no quotes around it. And we write out console.log. It's foo+bar. We will write out, not surprisingly, the number 10. If on the other hand, we say var foo = 5 and var bar = 5, these are strings.

They're surrounded in the double quotes, or the single quotes will work too. The console.log message, while it looks exactly the same, the Plus sign is going to do concatenation. It's just going to slam these two together because it thinks you want to treat them as a string. Now, sometimes you do. Say, for example, that these are holding area codes and phone numbers. You might want to concatenate them together instead of adding the numeric values together. But just be aware of that behavior. More likely you're interested in what happens in this kind of situation.

What happens if one of them is a number and one of them is a string? Well, in this case it's going to do concatenation. If any part of it is a string, it's going to treat the whole operation as a string. But that can lead us into more significant issues. What happens if one of these variables is a string and we're trying to do something with it that just doesn't make sense? In this case, we're trying to do console.log(foo*bar). We're using the asterisk. So 5 multiplied by b, well, what's that going to do? Well, actually, what it's going to do here is evaluate as NaN-- that's an uppercase N, lowercase a, uppercase N--which is "Not a Number." This is a special meaning in JavaScript.

It's telling me here this expression did not make sense, and sometimes we need to know this, because think about this situation. Here's the situation we might be more concerned about. Let's say we know we're going to get a variable. Now it should be equal to a number, in this case 55, even though that's a string. But it could be abc, it could be a word, it could be some text, perhaps we're asking the user for some input. We hope they type a number, but what if they don't? Well, step one is what I try and do is I try and make a new variable, in this case myNumber, and create that by calling the function Number and passing in this variable foo.

Now this function Number is built into JavaScript the same way that alert is built into JavaScript. We pass it something and it will try and convert it to a number and return that value. Now if it can't convert it to a number, let's say this was abc, it will return "Not a Number." But I need to know if that was the case. I need to know if the variable myNumber is not a number, and luckily, we can check that. We have another built-in function that we can ask, which is isNaN, isNotaNumber.

Now again, it's the odd casing here. Is is lowercase, uppercase N, lowercase a, uppercase N. In this case, we pass in the variable myNumber and the isNaN function will return either true or false. Now, be very careful about what it's doing here. We're asking if it is not a number, so it return true if it's not a number. And we can write out the message, "It's not a number!" And what's often the case is you're actually more interested in knowing that it is a number, and we don't have isNumber function, unfortunately.

Well, I could of course just write an else statement after my if and then process some code there, but if I want to directly ask, what I'll do is phrase this as kind of a double-negative here. What I'm asking is if NOT NotaNumber is true, and I'll do that by calling isNaN function with the exclamation mark in front of it. So if isNaN returns false, we'll use the exclamationmark to flip that to true, and then we say console.log( "It IS a number" ). Yeah, you've got to love programming.

And finally, something that's coming very handy with working with numbers is something called the Math object in JavaScript. This is an object that's just available to you, has some very useful behavior, some useful functionality you can just tap into. Well, how do we use it? Well, let's just say we start off by creating a variable called x that's equal to 200.6, and I want to round that number. What I can do is just type this code. I'll create a new variable and set it equal to Math, and we use the word Math with an uppercase M, .round, passing in the value x. And that's going to round it to the nearest number. In this case, it's going to be 201.

So what you'll see is a lot of Math. abilities. We have things like Math.max, which we can create multiple variables, pass in two or three or four or five, and it will just return the biggest one. Flip side of that, Math.min. And the Math object has a lot of these options. We have Math.PI, Math.random, Math.sqrt, Math.log. Useful functionality and useful behavior for working with numbers.

There are currently no FAQs about JavaScript Essential Training.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed JavaScript Essential Training.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.