Covered in this video:
Primitives: Numbers (floats, integers)
Full Video Transcript:
Hello, and welcome to jQuery Foundations, presented by appendTo. My name is Andrew Wirick, and I’ll be guiding you through each of these lessons through this course.
The last variable is very interesting. We can actually just use the dollar sign as a variable name, no other characters necessary. If a single character named dollarsign and we’re going to set it equal to ‘qux’, the string. This, if you’ve used jQuery before, if you’ve seen jQuery before, this might be ringing some bells in your head, and it’s certainly something we’re going to discuss in greater detail in the future.
Let’s start with strings. We’ve seen strings in action already a little bit. It’s interesting to note that so far, we’ve only been using double quotes to create a string literal, but you can actually use single quotes as well to create a string literal. In our example here, our first variable ‘foo’, we’re assigning it to a string literal bar using double quotes. On the second line, we’re declaring a variable named ‘baz’ and we’re assigning it to a string literal ‘boo’, but we’re only using single quotes here. They are essentially interchangeable when it comes to declaring string literals.
The one thing you have to think about is escaping specific characters. On our third example here, ‘qux’, we’re assigning it to a string, we’re using double quotes on the edges and there’s a single quote inside of our string. We don’t have to escape that single quote because we’re using double quotes.
There’s a point of confusion that can often come up, especially developers that come from a background like [C sharp 00:09:47] or Java. There’s a different way to declare a string, sort of. Let’s take a look at an example. We have our first variable declaration, ‘foo’. We’re assigning it to a string literal of ‘bar’, just like we’ve seen in previous1 slides. The difference here is in the second line. ‘Baz’ we’re assigning it, and we’ve got this new syntax that we haven’t seen before, new string and then a string literal inside of a ‘qux’. It’s important to note about this it’s creating what we call string object. It’s not just the literal, there’s extra stuff going on there.
Alert is actually a function available to us in any browser. We’re going to cover functions in greater detail in later lessons. What’s really important for now to know is that you can execute or invoke functions using the parenthesis. Here, we have alert and we’re invoking it by the open and closing parenthesis and we’re passing to alert a single parameter which is going to be the result of ‘foo’, plus white space, plus ‘baz’. What we would expect as a result of the concatenation is ‘bar’, white space, ‘qux’. If we go ahead and run this alert we can see that’s indeed what we get.
Let’s move on to another type, primitive numbers. The number type, there’s only one first of all. Some of you might be panicking already, we’ll talk about integers in a second. There a 64-bit floating point. Because we only have one number type, things like [1 00:12:31] a [1.0 00:12:32], [1.0 00:12:33], are actually equivalent. We declare the numbers simply using a number literal. Here’s a very simple example of declaring a number. [var num 00:12:42] equals 5.2.
In our example, we have our first line here. We’re again using variable declaration. We’re going to declare a variable named ‘myInt’. Use the assignment operator equals and we’ll assign it to whatever the result of parseInt is. Here, again, parseInt is a function. We’re going to invoke it using the parenthesis and we’re passing in a string, 3.416. The parseInt function will take that string, attempt to convert it to a number which it should be successful in doing, and then round that for us and return to us a number without anything after the decimal point.
Looking at our second line, we’re actually going to declare a float as well. We’re going to declare a variable called ‘myFloat’, and we’ll assign it to the result of ‘parsefloat’. The parsefloat function will simply try to take something like string and parse it to a floating point number. We would expect ‘myInt’ to be set to 3 and ‘myFloat’ to be set to 3.1416. If we look at the two alerts we’ve got set up, our first alert is simply ‘myInt’, so we would expect 3. Our second alert, we’re exposing ourselves to our first number operator, which, shocker, you can add numbers together. ‘myFloat’ 3.1416 plus my 3 should result in 6.1416. If we go ahead and run these alerts we see the first is three, the second 6.1416. I know, shocking, adding numbers together.
There’s other operators obviously available to us than just addition. There’s all of your basic arithmetic operators. Things like [modulus 00:14:58], represented by the percent sign. Let’s take a look at a couple of other operators and what’s happening.
We’re going to declare three variables this time, ‘myInt’, ‘myOtherInt’, and ‘myString’. ‘myInt’ is going to be 42, ‘myOtherInt’ number 16, and my string is going to be a string we’ll assign it to the string candles.
Our first alert we’re going to do [myInt – myOtherInt 00:15:20]. We would expect 42 to be subtracted from 16. We’d expect the alert to show 26. The second alert is more interesting. We’re taking ‘myOtherInt’, the number 16, and we’re adding to it a string. This is going to be telling. Let’s go ahead and run it and see what shows up. 26, 16 candles.
At this point it’s interesting to note that we can actually detect what type of variable is using the ‘typeof’ operator. The ‘typeof’ operator is ‘typeof’, all one word, all lowercase, and it occurs just before the variable or value we want to know the type of. Here we’re declaring a variable ‘whatAmI’, the number 42. When we say type of ‘whatAmI’, we would expect the returning result to be number. ‘typeof’ actulaly returns to us as a string what the type is, and so we get number.
You might think that ‘bar’ will be equal to false, but when we run our alerts, the first one is true, that makes sense. Bar is also set to true. What’s happening there is the condition on which a string is evaluated is true or false is whether or not a string is empty. An empty string is false. Anything else is true, even the string false. Quite quirky.
Let’s apply that to another example here. Let’s take a look at the negation operator. The negation operator exclamation point comes directly before any value. It can be used to convert any value to boolean. Now, it’s a negation operator, so a single exclamation point will not only convert it to boolean but then immediately change it to the opposite. For example, if we were to negatve boolean true, it would be false.
We often see the negation operator used twice, directly in a row. What that will do is convert to a boolean, negate it, and then negate that again. It will kind of give us whether or not our original value was a [truth e 00:22:09] or [false e 00:22:10] value. Let’s take a look at a couple of examples.
The third one, ‘hare’ equals false, once again, it’s important with a string as to whether or not the string is empty. The string is not empty. It doesn’t matter what’s inside of the string, it’s just a non-empty string. We would expect ‘hare’, that third alert, to result in true. In order, we would expect true, then false, then true. Let’s go ahead and run these, and indeed we get true, we get false, and we get true.
Let’s try that with two of them. Let’s try not a number and zero, and if we run each of these alerts, we’ll see that we get false for each alert. There are a number of values that when coerced to a boolean type will evaluate to false and these are those values. Everything else is considered [truth e 00:24:05].
Triple and not equals equals by comparison are strict comparison operators and will not try to do any type conversion. Let’s take a look at an example. Our first alert, we’re going to compare the string 3.16 and the number 3.16. We’re going to use the non-strict equality comparison operator. In the next alert we’re going to compare the same values, only this time we’ll use the strict comparison operators. Let’s just run these alerts and see what we come up with.
True. The string 3.16 and the number 3.16 are equivalent when using our non-strict comparison operator. With our strict one they’re false. My suggestion to you is to use the strict comparison operators unless you have a specific reason to not be using them. This will keep you out of trouble of getting in an unexpected behavior situations.
Putting our comparisons in action, let’s take a look at an if statement and see how to use them. In our example here, line one, we’re just going to do our normal variable declaration. We have [lionel 00:26:05], we’re going to set it to a string ‘hello’. Then we’re going to use an if statement. If [lionel 00:26:11] is indeed set to hello, we know it is, we’re going to use strict comparison to check and that if statement will evaluate the true, and so we would expect the alert that’s inside of the if statement to fire. Pretty simple.
Let’s write some bits. Let’s try out the exercise, use what we’ve just learned. Now, I now we haven’t gotten to anything super sweet yet, but don’t worry, we’re only a few lessons away from doing incredibly awesome things like randomly showing Lionel Ritchie posters on your webpage.
If you need jQuery Training for your team, check out our hands-on, expert-led jQuery courses.
Latest posts by Kyle Pennell (see all)
- Falling Back in Love with the Front End: An Interview with Azat Mardan - May 18, 2017
- How WebRTC Has Changed Web Communication - May 11, 2017
- The Angular CLI: A Simple Way to Fire up an Angular 2 Project - April 18, 2017