jquery

appendTo offers JavaScript Training Courses for Software Teams. In addition to this, we also offer free jQuery/JavaScript training videos for individuals on our YouTube channel. Below is a free video with an Introduction to JavaScript.

 

 

Covered in this video:

How to get help online for jQuery and JavaScript topics

How to use MDN for help

Variable Declarations

How whitespace works in JavaScript

The rules behind using semi colons

Declaring Multiple Variables

What are primitives?

Strings and string literals

Escape characters and single vs. double quotes

Double quotes must be used within jQuery

Operations with Strings

The built-in alert function

Primitives: Numbers (floats, integers)

JavaScript is loosely typed

Primitives: Booleans

Comparison Operators

Control Flow Statements, if else

 

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.

We hope that jQuery Foundations provides you two things. First, we hope it gets you up and running with jQuery reasonably fast. You’ll notice by the end of the course, we’ll actually be doing real world scenarios and applying jQuery very effectively in those scenarios. We also hope that it provides you a great foundation through which to build your jQuery and JavaScript knowledge in general. In that vein, we’re not going to start with anything jQuery specific. We’re actually going to start with some JavaScript knowledge.

You might have some friends or colleagues who are actually able to use jQuery reasonably well without really knowing JavaScript. We really think that’s a mistake. In the short term, you might be able to do a few things, but you’ll quickly realize that you don’t understand a lot of what’s happening effectively enough to apply jQuery in new and interesting scenarios. After all, jQuery is just the JavaScript library. There’s really not a lot of other situations where it makes sense to try and use a language library without knowing the language in the first place.

Today we’re going to talk about a few simple JavaScript language features. We’re going to talk about variable declarations along with that primitive types and some comparisons, and utilizing comparisons inside of if statements.

Before we get into the specific topics though, let’s just talk about searching for JavaScript knowledge online in general. What I would highly suggest you do, any time you’re looking for a JavaScript topic is that prepend MDC to the search.  What that’s going to do is bring up the Mozilla Developer Center’s JavaScript documentation to the top or near the top of the results. This is really important as the community really feels that the Mozilla Developer Center documentation is the strongest out there. The documentation is absolutely stellar.

Let’s look at a specific example. Let’s say we wanted to search for JavaScript string. We’re going to do a Google search here. I’ll prepend MDC to my search. I’ve got the Mozilla Developer Center documentation for JavaScript string right at the top here, so I’m able to easily access that information. I would also send any friends or colleagues who might need this information to this site as well, it’s absolutely stellar stuff. It’s comprehensive, it’s really well written and just chock full of information.

Something else to check out if you’re an owner of a blog or just an owner of any site that’s technology related. Check out promotejs.com. This is a recent campaign started, the recent JS conf. The goal is really to promote the Mozilla Developer Center awesome documentation to the top of results from search engines, that way somebody who doesn’t know about the developer center documentation and might just be searching for JavaScript string is going to get at the freshest and what the community feels best documentation out there related to JavaScript. Please check that out and support them with a banner if you can.

Let’s do this, variable declarations.  Let’s take a look at our first lines of JavaScript. Declaring variables in JavaScript, let’s take a look at the first, top line of JavaScript here. We have a ‘var’ keyword. Notice that we’re not actually defining a type here, we’ll talk about that a little bit later. We’re just saying ‘var’ for variable. We have variable operator. We’re declaring a named variable, ‘foo’, because the assignment operator equals, and then we’re going to assign it to a string. This is the first glimpse of our first primitive type, strings. Then, lastly, we end the statement with a semi-colon.

A few things to note. One, white space. While it’s important to have some white space, white space isn’t critical in that you could have extra white spaces and it wouldn’t effect a statement like this in JavaScript. You’ll notice that I do end the statement with a semi-colon. If you’re coming from a language where you’re not used to semi-colons, you might forget them. JavaScript can sometimes work, even sometimes without semi-colons in the right spaces to end statements, but you will get into trouble at some point with them and experience weird behavior if you’re not using semi-colons. Make sure that you end your JavaScript statements with semi-colons.

Moving down here, we can actually declare multiple variables on a single line or in a single statement. Here we’re going to declare not only foo equal to, we’re not only going to assign foo to the string bar, but we’re going to declare a new variable called ‘baz’ and we’re going to assign it to the string ‘boo’. We typically see though is not a bunch of variable declarations strung across one line, but we can actually let JavaScript statements span multiple lines. In our third example is how we would typically declare more than one variable, using the comma to separate the two variable declarations, the semi-colon to end the statement, and a return after each variable declaration. This is nice, clean syntax and it’s very readable. I would suggest you would use it.

Variable names can actually start with letters, the underscore character or the dollar sign character. Note that variable names can not start with a number. After the first character, we can continue a variable name with letters, numbers, the underscore or dollar sign character. Lastly, JavaScript variables are case sensitive.

Looking at our example, we have foo = ‘bar’, perfectly legitimate.  The next two, we have foo = ‘baz’ and foo = ‘boo’, this string. Notice that this is completely legitimate JavaScript. This will run and you can reference both of these variables later in your code. Case sensitivity in JavaScript for sure.

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 back up one step here and talk about primitives in general. Primitives we could define as data that is not an object and does not have any methods associated with it.  JavaScript does not have that many primitive types. If you’re coming from another language, you might be used to a bunch, a whole series of primitives available to you.  JavaScript only has five. We have the big three, string, number and boolean, and then specific types null and undefined. Everything else in JavaScript is an object which we are going to cover in create detail in future lessons. For now, we’re just going to concentrate on the primitive types available to us.

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.

As far as convention is concerned, because we have two options that seem reasonably interchangeable, you can use double or single quotes. They’re both used pretty pervasively throughout the JavaScript community. The jQuery style guidelines for any code that’s written inside of the jQuery library itself or [jQuery Y 00:09:25] indicates to use double quotes. It’s just the decision that was made. It generally depends if we use double quotes as well, although there’s nothing wrong with single quotes and you can feel free to use those for declaring any strings.

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.

Generally speaking when you start out you don’t want to declare variables this way, you want to declare it like the first line shows with just the string literal. There are specific situations where using the second declaration might make sense, but you’ll learn those over time as you grow in your JavaScript skills. For now, I would just use the string literal.

With primitives, with all primitives in strings included, there’s different operators available to us. Let’s take a look at one. Here we’re declaring two variables, ‘foo’ and ‘baz’, and then we’re going to use our first operator, the concatenation operator. The concatenation operator in JavaScript for strings is a plus sign. Here we’re going to concatenate ‘foo’ together with a string literal, single white space, together with ‘baz’. Then what we’re actually going to do is pop up an alert in our browser.

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.

As I mentioned, there is only one number type. There isn’t an integer type in JavaScript. You can get an integer like number however by using a globally available function called parseInt.  ParseInt will take any number or even strings and attempt to convert that number to an integer or integer like value, essentially rounding the number and removing everything after the decimal point.

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.

JavaScript is doing something interesting here. What JavaScript is actually doing relates to the fact that JavaScript is a loosely typed language. Let’s talk about that a little bit. What I mean by loosely typed, this was probably hinted to you that we’re starting our variable declarations with a ‘var’ keyword, not a keyword like ‘string’ or ‘int’ or ‘decimal’. Just ‘var’. JavaScript variables at any point can change from one type to another when assigned to.

As an example, we’re going to declare a variable ‘myStuff’ and assign it to the number 42 and we’re going to alert it. Then we’re going to assign the variable ‘myStuff’ to a string ‘holy toledo’. Now, in some languages, this simply isn’t legal. You can’t, in strictly typed languages, you can’t take a variable that was originally assigned to a number and then assign a string to it. In JavaScript you can. What we get when we run this is 42, and then holy toledo. Any variable at any time could be assigned from one type to another.

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.

Kind of going back to our 16 candles example, it would be interesting to know what the end result here is. We’re going to take a variable ‘whatAmI’, and we’re going to assign it to the result of the number 16 plus the string candles, and we’re going to see what type actually comes out. String. What JavaScript is actually doing for us is an implicit type conversion. Because JavaScript is loosely type, it can take 16 an the operator plus and the string candles and understand what can reasonably be done there. What can reasonably be done is take 16, convert it to a string and perform concatenation using the string concatenation operator. That’s what we actually get here is 16 candles all as a string.

Let’s go back to numbers for one second before we leave them. I want to talk about what happens with numbers when things don’t go quite the way you want them to. For example, if we were try to ‘parseInt’ an integer out of the string ‘oops’ as we see in line one of our JavaScript, that’s not going to go well. JavaScript handles that by passing back a value, the result of ‘parseInt’ that it returns to us is a value of not a number. NaN, capital N, lowercase A, capital N. Not a number is very quirky and very interesting and we could spend probably 20 minutes talking about it, but what I want you to realize for now is that the way to check for not a number is a specific global function called ‘isNaN’. ‘isNaN’ will simply take in whatever value and will return to you true or false if it’s not a number or not.

Looking at our code, ‘oops1’, ‘parseInt’ is going to return not a number. Our second line of JavaScript, we’re just going to explicitly assign a variable to NaN, not a number. We should see true for both of these alerts, meaning both ‘oops1’ and ‘oops2’ are not a number. Just something to note as you’re dealing with numbers, if you ever need to check if things went very wrong in some sort of conversion from another type to a number using the ‘isNaN’ function is the way to do it.

Let’s take a look the third of the big three primitive types, boolean. There are two keywords related to boolean, true and false in JavaScript that relate to, no doubt, boolean true and false. Looking at our JavaScript here, on line one, we are declaring a variable ‘foo’, and we’re just assigning that to the boolean literal true. The second one is a little more interesting. The boolean function, on line two you see to the right of the assignment operator, it’s going to attempt to take that string false, convert it to a boolean, and more or less that’s what it will assign to ‘bar’.

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.

Line one we have ‘alice’. We’re going to set that equal to the string ‘true’. Now, remember, the condition on which a string is true or false is simply whether or not the string has any information. Is it empty, or not empty? We expect ‘alice’ to be true. ‘hatter’ equals zero, and like a lot of other languages, in JavaScript, zero is considered a false [evalu 00:22:35], so we would think that using the double equals, double negation, we would think ‘hatter’ would be false.

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.

Continuing to look at these comparison operators, let’s talk a bit more about what I mean when I say [truth e 00:23:19] and [false e 00:23:19]. We use the term [false e 00:23:22] because JavaScript has a number of values that can possibly mean false. For example, zero, null, false, undefined, empty string. If we use our double negation operators as we’ve seen in the previous slide and we put any of these values under the test, they will in fact evaluate to false.

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].

Comparisons in JavaScript is another quirky subject. We have equals equals, and not equals, if you’re coming from another programming language you’re probably accustomed to those operators. Equals equals for example will attempt to determine if what’s on the left is equivalent to what’s on the right. Return truth if they’re equivalent, return false if they’re not. However, JavaScript actually has triple equals and not equals equals operators. The double equals for example is a non-strict equality comparison. It will actually try to do some things implicitly for us like coercing of types in order to find out if two values are equal.

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.

The second if statement is something we often see in JavaScript and we can simply put [if lionel 00:26:35] and that condition will pass as long as [lionel 00:26:39] is [truth e 00:26:39]. Since [lionel 00:26:41] is a non-empty string, that should evaluate to true, so we would expect the second alert to fire as well. Let’s go ahead and run these. Is it me you’re looking for, because I wonder where you are. Very nice. Thanks, Lionel.

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.

Note: 

If you need jQuery Training for your team, check out our hands-on, expert-led jQuery courses.

Comments