JavaScript the Basics for Beginners- Section 1: Building Blocks | Rob Merrill | Skillshare

JavaScript the Basics for Beginners- Section 1: Building Blocks

Rob Merrill, JavaScript Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
11 Lessons (1h 16m)
    • 1. JavaScript the Basics Building Blocks - Promo Video: Skillshare

      1:55
    • 2. JavaScript the Basics - Building Blocks: Variables

      4:53
    • 3. JavaScript the Basics - Building Blocks: Variables Lab

      4:16
    • 4. JavaScript the Basics - Building Blocks: Strings

      5:13
    • 5. JavaScript the Basics - Building Blocks: Strings Lab

      5:29
    • 6. JavaScript the Basics -Building Blocks: Operators

      7:48
    • 7. JavaScript the Basics - Building Blocks: Operators Lab

      6:46
    • 8. JavaScript the Basics - Building Blocks: Increment and Decrement Operator

      4:51
    • 9. JavaScript the Basics - Building Blocks: Review

      16:56
    • 10. Project 1: Kelvin to Fahrenheit Walkthrough

      9:51
    • 11. Project 2: Cat Years Converter

      8:22
25 students are watching this class

About This Class

Course 1 - Building Blocks of JavaScript

The capstone project(s) for this course are creating a Kelvin to Fahrenheit converter and a Cat Age converter you can find under the "Your Project" tab.  You will find a PDF to download each challenge. You will try to accomplish the project(s) on your own. The last video(s) of this course will involve me walking through these project for you.

In this course you will cover: 

  • variables
  • strings
  • operators
  • 2 mini-projects: Kelvin to Fahrenheit and Cat Age Convertor 

Through our whole JavaScript the Basics for Beginners course series you will find this is your one stop necessary to enter into the language of JavaScript. We are going to start from scratch and build up our understanding of the world's most popular programming language together. 

View JavaScript in action with whiteboard videos optimized for viewing on your smartphone. This is truly a course that you can engage with no matter where you are. Take your JavaScript eduction on the go! With whiteboard videos you get to visualize what JavaScript does under the hood. 

You can practice JavaScript in your web browser! Take advantage of Google Chrome developer tools to put the JavaScript you have learned during our whiteboard lesson into practice with further examples and challenges. This is our JavaScript playground.

Learning JavaScript is like learning a language. This course won't make a false promise of saying you will master JavaScript overnight. However, this course will immerse you into the world's most popular programming language. 

Each course will introduce you to something new in JavaScript :

  • JavaScript Syntax
  • JavaScript Building Blocks
  • JavaScript Best Practices
  • JavaScript Objects
  • JavaScript Arrays
  • JavaScript Regular Expressions
  • JavaScript Functional Programming
  • JavaScript Algorithms
  • JavaScript Data Structures
  • JavaScript ES6 Syntax

You'll finish this course with an understanding of JavaScript that will let you take a deeper dive into the language and possibly launch you into a new career as a JavaScript web developer.

Learning a new language can be difficult and even feel intimidating. JavaScript the Basics makes the the learning process feel accessible and welcoming!

Once you finish this class you can move on to the next JavaScript Basics topic or you can jump right into learning how to build with JavaScript by taking my course on how to Build a To Do App in JavaScript!

5ea59f82

You can also check out my newest course on JavaScript Algorithms here as well!

680c1a46

Transcripts

1. JavaScript the Basics Building Blocks - Promo Video: Skillshare: Welcome to Java script. The Basics. JavaScript is the most popular programming language in the world has been called the language of the Web Stack Overflow listed as the most popular deaf technology and get have numbers it as the top ranks language learning JavaScript will allow you to be a full stack developer or fund a specialty on the front end or the back end. With JavaScript, you'll be able to cope with front and frameworks like react and angular on the client side . And you can also cut on the back end server side with no Js and create databases with Mongo . DB JavaScript is a language, so it's going to take some time to learn before you can write poetry or a novel in any language, you have to first learn the languages alphabet, how to make words and see how others use it. To learn JavaScript. We're gonna look under the hood. This isn't just going to be an exercise in copying someone else's code to wind up with an application you don't understand. Everything we do will be visual in the form of a whiteboard lesson where you can really see how everything works and connects. If you are a visual learner, this is the course for you. This isn't about going 0 to 60 or zero to hero, because if you really are starting at zero, those courses leave you behind quickly. It's about learning. Understanding and applying is that you could build and create with JAVASCRIPT. Way will then follow our white board. Lessons into the lab way will enter into the Google Chrome software developer. Consul thistles are Java script playground. There is nothing you will need to download for this course. No special tools, no extra steps. Just Google, chrome, everything. You learnt the lesson we will then recreate in the lab together. I'll then give you a code challenge to recreate what we learned together and then we'll look together at a possible solution. Welcome to Java Script. The basics. Let's start speaking job script 2. JavaScript the Basics - Building Blocks: Variables: Welcome to Java. Script the basics In this section of the course, we're gonna look at several JavaScript building blocks. In this lecture, we're gonna start with variables. What is a variable? JavaScript? Variables are containers for storing data values. Variables are named containers you can place data in and then refer to the data by the naming the container. Let's look at some code to see how to declare a variable. What about Variable is and naming best practices? Here we have our transportation equals. The string car later will put this into the consul in the lab and see what happens. But let's break down this line of Java script. First way have the keyword far in JavaScript there keywords that are reserved words letting the JavaScript interpreter know what you want to dio here. The keyword var lets the JavaScript interpreter know that you are declaring a very next we have the variable name. This is sometimes called the identify of the target. In our case, we're giving the variable the name transportation. Now let's look at how to name variables and best practices. We'll start with some invalid variables. First, invalid variables begin with a number anywhere else in the variable is fine. We just can't start with the number involved. Variables containing JavaScript keyword, as we saw earlier, far is an example of a JavaScript keyword, making it an invalid variable name involved. Variables contain a space between words. No. Let's look at some ingredients for valid very winnings. Names must begin with the letter upper or lower case, but can also begin with the dollar sign and also with an underscore. Let's look at two best practices for naming variables. First Camel case style Camel case is the preferred method because of its ease of readability. Because JavaScript doesn't allow variables toe have spaces, it can make reading variables and challenge. This is where Camel case comes to the rescue. The first word is all lower case and the remaining words all capitalize. The first letter, Another best practice tip is for your code to be human readable named variables for those who come after you. And this applies to all of code. Yes, computers are very picky and require things to be done in a specific way, and so we write for them. But we also right for those who come after us after a task of starting a project building a feature or fixing a buck, Your variables and your whole code should always keep in mind that you are coding for human readability. So when possible, variable should describe the kind of data in the variable holes. Think of moving. You take all the articles of your home and you put them in boxes. For instance, if you pack up your kitchen, you might write kitchen or dishes on the box instead of X, which may be faster to write and take less ink. But you wouldn't know the best place to unpack the box in your new home. Based on the label, let's look an example. Far X equals 25 is not as helpful as far. Apples from a tree equals 25. Even though the code is shorter, less code doesn't always equal better code. As you progress further in a Java script, there will be tools you can use for production to minimize your variables. Shorten your coat. Now let's go back to our original line of code. The equal sign isn't a Simon operator. Way will look at operators in a later venue. For now, it says that you are going to assign value to the variable. Thistle is also used to update a value given to a very until a variable is assigned value, it is un initialized and its value is undefined. Now let's close by looking at JavaScript as an unscripted, dynamic language, this'll means that you don't have to define what the variable type is. You don't have to tell the variable transportation that car is a strength. It knows it. You don't have to tell the variable past lie detector that false is a Boolean. It knows it, and you don't have to tell the variable grocery bill that it is a number. The JavaScript interpreter will know what to do with the value that you passed to it thistles called dynamic typing. If we do a type of operator on Oliver variables, Java stripped will tell us that transportation is a strain. Past Lie detector is a Boolean and grocery bill is a number time. There you have it. Thanks for looking at variables with me and let's head into the lab to put what we have learned into practice 3. JavaScript the Basics - Building Blocks: Variables Lab: all right, we just finished our lesson on JavaScript variables. We learned that they could be thought of his containers to store data values, like putting items in storage and then labelling the box so we have a way of accessing the contents based on its title. We learned about parameters for naming variables as they have to begin with the letter, a dollar sign or underscore. We also looked at the best practice of camel casing are variables when there are more than one word. Since this will be our first time using the Google chrome developer tools, I'll walk you through the process for getting started. This is our JavaScript playground and where we will be spending the majority of our coating together in the lab. Go ahead and open up the Google Chrome Consul. You will see a hamburger icon in the upper right hand corner consisting of three horizontal lines. Go ahead and click that and hover over more tools and click that finally hover over developer tools and click that as well. Make sure you are in the console. The shortcut that I recommend you memorizing for this. Using a Mac is command option. J. and on Windows, it is control shifted. J. Let's do that real quick and see that it closes the window. Then let's do that one more time to open the window. Back up. Depending on what page you're in, the consul might be a bit active. The best way to prevent any kind of interference is to go to the address bar and to enter about colon blank. This will give you an empty screen, and then you can slide the consul open toe. Have more space to work in. I'll go ahead and repeat them the next couple videos and will soon be natural for you to let's do one quick refresher of our lesson content. Feel free to coat along. We begin every variable with the keyword var. This is a reserved a word in javascript that lets the interpreter know that we're creating a variable. We think of the very bold name, also known as the identify or target. Then we place a data value without having to label the type of value because JavaScript is dynamically typed and then it is best practice to end the variable declaration with the semicolon for a lab challenge. I'm going to write out several variables that will either be invalid or bad practice, and I want you to change them to valid and best practice. A couple tips for working in the Consul. If your consul is getting to full type in clear with open and clothing parentheses to empty it out, everything you have entered, it's still available in memory. Lastly, if you want to bring up something you just typed, you can press the up arrow and it will recover your latest commands. Go ahead and pause the video and right thes the right way. All right, how to go? Let's fix thes involved or bad practice variables with some possible solutions. In our first example, we can see that the variable starts with number, making it an invalid variable. Ah, possible solution could be to change it to var. Pet. One equals bear as numbers are okay in the variable as long as they aren't the first character. Our next two examples are valid variable names, but they aren't best practice. When we have more than one word, we want to do camel case where the first word is all lower case and all words following have the first letter capitalized. Next. We haven't involved variable because it is two words separated by a space. We have a few options to choose from. We can connect them with an underscore or simply just camel cased them together. Our last example was an invalid JavaScript variable because a Java strip keyword var was used for the variable name. To solve this, we can enter anything but a JavaScript reserved word. Ideally, we want the variable to hint at the data it contains. So we could do far travel equals car. That's it for a laptop. We'll see you in our next lesson. 4. JavaScript the Basics - Building Blocks: Strings : welcome in this lesson. We're going to cover strengths. What is a strength? Strings are data type, used to represent text and are wrapped in either a single or double quote. A string is one of six JavaScript reminisce along with numbers. Boolean is no undefined and the new edition of Symbol. We'll give Primitives a further look in upcoming lessons. Let's look at two lines of JavaScript code to get started as mentioned. This is the same value assigned to a variable, single and double quote to do the same thing. Best practices to fund one convention and to stick with it. If you are on a team or working on a project as you further develop their job script skills , you may find that there's a style guide you are following, which will determine which approach that you take to make sure that you don't mix them. Putting a single quote and a double quote around. Joe is going to give us an error for the rest of this lesson, and for most of this course, we will try to stick with a single quote. Convention were impossible. Now, using these quotes will turn anything into a strength we can use the type of operator in our depth tools consul on these values to see what type they are. Now let's try wrapping these different data types. These numbers. Boolean is an undefined and quotes and see what JavaScript does when we wrap them in single or double quotes. Type of 24 returns string type of true returns, string and type of undefined return string. When all of those are wrapped in single or double quotes, we're going to spend the rest of this lecture looking at quotes within strings, special characters, the string property length and a sample string method. What do we do if we have a quote within our strength? Our Java script interpreter is going to have some problems with this. Let's look at a couple examples. If our quote matches what we used to enclose the string, we will receive an air. We can solve this in a couple ways. One solution is to make sure that you're single or double quotes. Don't match was containing the whole strength. That means using double quotes on this top example to create this string and using single quotes on the inside for other example, we will use single quotes on the outside and double quotes on the inside. There is another solution. Is it the escape or Backslash character? The back slash escape character turned special characters into stream characters. In our previous example, we saw that the Java script interpreters sees quotes a special characters, so we have to be careful how to use them. Or we might wind up with an error. However, if we place a back slash escape character than the interpreters simply sees them as strengths. We can use single quotes for the whole expression by putting the escape character before the single quote. Within the string, we can use double quotes for the whole expression by putting the escape character before both the double quotes within a string. There are a number of other things that escape character will be used to work for with special characters. But hopefully this gives you a taste of how it works. Now let's look at the string property of length. The length of a string can be found using the length property. This property is available to any string that you create. This will become a handy features. You continue to grow as a Java stripped developer. Let's look at this code line. We have a very both greeting and a string of it's good to meet you. All we need to do is attach the length property to this variable, and we will get the length of the string greeting dot length returns 22. Now that we have looked at a property of strings, let's look at one of the built in methods that all strings you create one hair it. We'll talk about methods more in later lessons where we look at functions. Let's start by looking at the to upper case method and the way that you will know that something is a method versus a property is by the in vocation call of the two parentheses. The length property does not have the parentheses after them. While the methods do. Let's begin by setting up a greeting Variable are greeting will say Good to see you. Let's put this method to work on our greeting variable and story in a new variable called Shout Greeting. We're going to attach the to upper case method to the end of our greeting variable and assign it to our new shout greeting Variable. Now let's look at shout greeting in her consul and we get good to see you. That's all we have for this lesson on strings. Thanks for joining me in Java. Script the basics and we'll see you in the lab. 5. JavaScript the Basics - Building Blocks: Strings Lab: all right, we just finished her lesson on the JavaScript at a type string. Let's open up the Google Chrome developer Consul. We'll go over this quickly one more time and the future videos. If you don't remember, you can come back in reference. Thes earlier videos. Go ahead and hit the hamburger icon in the upper right hand corner. Hover down to more tools, then developer tools. The shorthand on Mac is command Option J in Our Windows, Its control shift. J. Let's go ahead and practice that quickly to close an open our consul. Make sure to go to the address bar and typing about dot blank, and you're all set now. Remember, if your consul starts to get filled up, you can simply clear it out by writing clear than to parentheses. And if you ever want to recover something that you've entered, you can simply press the up arrow to recover it. All right, let's get back to reviewing strengths. We learned that strings are used to represent text. We saw how to turn any primitive data type into a string by adding single or double quotes around the characters. We then saw how to use the escape back slash to handle special characters within our JavaScript string. Finally, we had a couple looks at the length property and the to upper case method. We'll start off and look at a few lines of code that we want to be a string but needs some help. We have our animal equals the string horse with an opening single quote in a closing double quote. We also have our answer equals false with no quotes. Go ahead and pause a video and let's see if you can come up with a solution to turn these into valid strengths. All right, that shouldn't have been too tough. Our first line of code was airing out because we have mixed single and double quotes, an attempt to assign a string to the variable horse. The solution is simply to make the quotes match. Our second line of code needs to be wrapped in quotes to change your value from a Boolean of false to a string of false. All right, let's move on to our next challenge. When we were writing strings which represent text, it is normal to use apostrophes and quotes within those drinks. However, this presents a problem for the JavaScript interpreter. As we discussed in our lesson, let's look at two examples of single and double quotes within strengths. Our first example. We have our greeting. One assigned the value of double quotes around. Sam says Hi with High, also in double quotes. In our second example, we have our greeting, too, assigned a value of single quotes surrounding the phrase. It's great to see you with an apostrophe. In the word it's go ahead and pause. A video reread these lines of code in a way that the JavaScript interpreter can understand and use them as strengths. For now. Don't use the escape character. After that, we'll go ahead and work on a solution together. All right, How to go. Hopefully that wasn't too challenging. In the first case of greeting one, we simply needed to change the outside quotes to the single quotes. In the second case of greeting to, we just needed to change the outside quotes to double quotes. Now let's get started using escape character within strengths. Let's look at another string. We have our greeting. Three. A signed of value wrapped in single quotes with one single quote within it. Here is your challenge. Like the earlier examples, we have a quote conflict. Instead of changing single or double quotes, please use the escape character to fix the conflict. Also, this one is a really long line taking up the width of the page. Used the escape character in the letter end two times in this sentence to shorten the width of the space taken up. Go ahead and pause this video and give it a shot that will find a solution together. All right, this one was a bit trickier. Let's go ahead and fix that long faulty string. We're going to go in and put the escape character before the single quote and don't and then to shorten the length. We're going to put the escape character in the letter and after newspaper and the word be and the result is exactly what we were looking for. Let's go ahead and close at her challenges with the length, property and the to upper case method. Let's stick with our greeting three variable because we worked so hard on it for this challenge. I want you to find the length of greeting three and turned the whole sentence in the upper case. Go ahead and give it a shot. I will find a solution together. All right? No, that went well. To find the length of greeting, three were simply going to add a dot length at the end of it. Remember, this isn't a method, so we aren't going to invoke it with prophecies. Lastly, let's turn this into a show by attaching the to upper case method to greeting three. And there you have it. Thanks for joining us in the lab and taking a first look at strings. We'll see you in the next lesson. 6. JavaScript the Basics -Building Blocks: Operators: welcome back in this lesson of Java script. The basics. We're going to look at operators and JavaScript. What is an operator in JavaScript? Operators air used to assign values, compare values, perform arithmetic operations and more. Operators allow programmers to create a single value from one or more values. They do a lot, so let's get started. JavaScript has both binary and you Neri operators and one special turn Eri operator, the conditional operator. We won't look at turn Eri operators in this lesson will focus on binary in you Neri operators. For now, a binary operator requires two operations one before the operator and one after the operator. For example, two plus three or X multiplied by Z, a une area operator requires a single operate and either before or after the operator, for example, why plus plus or plus plus why. Let's begin with arithmetic operators, the basic arithmetic operators for multiplication division, module ists, addition and subtraction. An arithmetic operator takes numerical values either literal zor variables as their operations and returns a single numerical value. Let's look at a few examples. Here's an example of the addition subtraction operator. Many of the arithmetic operators should be intuitive. If you have any familiarity with math, the plus operator will also be used for string concatenation, which we will look at at the end of this lesson. The division and multiplication operators are what you would expect as well. Hopefully, that shouldn't be anything too new to you. Next. Let's look at the module ist operator represented by the percentage symbol on your keyboard . This will give us the remainder of two values. So far, remainder equals 21 module. ISS four four will go into 21 5 times with one remainder module. ISS may be helpful in the future when trying to choose the values that are only even or implementing some sort of filter for choosing every other value. Now let's move on to the assignment operators. An assignment operator is signs of value to its left operate and based on the value of its right operate. We've already been using this all throughout this course. The simplest assignment operator is the equal sign, which isn't asking if two values are the same. But is this stunning the value of its right operate and to its left operandi? Let's go deeper with the addition assignment and the subtraction assignment. Suppose we have our count equals five. If we wanted to add four to the value of count, we could just do count equals count, which we know is five plus four to get nine. Or the addition of Simon operator allows us to simplify this by putting count plus equals for this plus sign in front of the equal sign will take the value of the variable, which is five and added to the fore. This is less code and still very readable. If we were to do the subtraction assignment, we will follow the same pattern. Now let's move to the comparison operators. Comparison operators compare both sides of the equation and return a logical value. Based on whether the comparison is true, the operations can be new miracle, string, logical or object values. In this lesson, we're gonna look at the equality operators double equal and triple equals checks for equality between two values or operations. But they have two different definitions of equality. Double equals looks to see whether to operations air equally. Using a more relaxed definition of equality while triple equals is the strict equality operator and checks whether to operations or equal using a strict definition of equality. That concept might sound a little strange right now if you're new to programming, so we'll flush out some examples. Let's do Variable X assigned the value of the number eight and very bold Y assigned the value of string eight. Now remember that the single Equal Signs is not a new quality operator. It is an assignment operator, assigning a value to a variable also known as the target or identifier. If you want a check of these, two are equal. We just use the double equal sign. Remember, not one, because we aren't ascending a value. We're checking for equality. This conditional statement is returning a value of truth. The number type of eight is equal to the string type of eight. This might be a little confusing. It would be kind of like saying that the color red is equal to an apple, even though red is a color and apples of fruit. Yet we can see the connection that is there. They're both the color red. How does Java script do this? As you dive deeper in a JavaScript, you'll find the Java script wants to be your friend. While other languages throw errors in such cases, JavaScript will try to help you when it can. Why is this true? JavaScript does something called coercion. At this point, we won't go into that right now, But basically, JavaScript wants to be your friend and we'll try to help us when I can. This is one of those cases. It is like trained the fruit apple and to the color red. So it is no longer fruit to match the color red as they have that in common coercion. Kamu. Very helpful at times. But it can also lead to unexpected results if you aren't looking for it. So you need to be aware of this feature of double equals. But what if we don't want Java script to be so friendly? What if we want to make sure that ex and why are the same value and type? If that is so, you will find yourself using the triple equals. While double equal checks for value, allowing coercion triple equal checks for value and type generally triple equals is going to be the best practice and leave your code bus buggy. Lastly, let's look at the string operator. We saw the plus sign previously as an arithmetic operator, but the plus sign can be used on strings when it is used on strings. The plus operator is called the concatenation operator. Let's go to an example to see this in practice, let's create my full name out of its individual parts on your own. You can try this with your name if you like. Let's create a variable and fill it with strings for my first name, middle name and last name, then can catch them together for my first name. We have variable. First name equals the string rob for the middle name we have. Our middle name equals the string grant for the last name. We have our last name equals string Merrill. Now let's put all these strings together in a variable called full name. So full name is equal to the variable first name, plus a string with a space in it, plus my middle name plus assn. Other string with the space in it plus the variable last name. Don't forget to add a string with the space placeholder. Otherwise your name will be all cramped up. For the most part, JavaScript ignores white spaces in your code. But if you have them within strings, they will be applied. Now, if we investigate what full name is the consul will give us. Rob Grant. Merrill. Hope you enjoy this intruder operators, and we'll see you in our next lab. 7. JavaScript the Basics - Building Blocks: Operators Lab: all right, we just finished our lesson on JavaScript operators. We learned that operators air symbols that are used to perform an operation there used to assign values, compare values, perform arithmetic operations and more. Let's go ahead and get started with a few quick arithmetic operator challenges to get warmed up. Let's go ahead and fill in the examples below with arithmetic. Operators use addition, subtraction, multiplication and module ISS. Remember, an arithmetic operator takes numerical values, other liberals or variables as their operations and returns a single numerical value? Go ahead and pause the video and give it a shot that will come back together to find a solution. All right, all of those should have been basic enough for you. For addition, we could do five plus four, giving us nine subtraction. Seven months, three multiplication, five times three, Division nine divided by three and module ISS 20 than the percentage sign for Let's code. Some assignment operators remember and a Simon operator as signs of value to its left operandi based on the value of its right operate for a challenge. I'm going to write out some expressions, and I want you to use the addition assignment and subtraction assignment, along with multiplication module lists to make the code more concise. Go ahead and pause a video and make those changes. Then we'll come back with some solutions together. All right, how to go? Let's go ahead and take these samples and shorting them with our Simon operators for the addition. Assignment. Weaken Dio X plus equals five for the subtraction assignment. Weaken Do X Monos equals five for the multiplication assignment. X Times equals five and for the remainder or modules assignment we have X module ists equals five. Now let's do some comparison operators. Comparison operators evaluate and return a Boolean value of true or false. Remember, a comparison operator compares its operations and returns a logical value. Based on whether the comparison is true, the operas can be numerical string, logical or object values. In our lesson, we learned about the double equal and triple equals operators they serve as equality and any quality operators. The double equals is going to be true if the values being compared or unequal value. If they're different types, the quot operator will convert them to match the triple equals, also called identity or stripped Equality Operator is going to return true Onley If the value and type are equal For the challenge of listed out several examples, I want you to go through the equations and change all the operators. So the result is true. Just a heads up. I didn't throw in one little twist that you will score bonus points. If you get right, go ahead and pause the video and take a shot at solving it. Okay, How to go? Did you get the twist setting X two double equals Why came out true. So there is nothing to change. The double equal sign was just measuring for value in which our friend Javascript used coercion to determine they were of equal value. However, the next two statements were false. So how do we get them to return a Boolean of True? We only need to put an exclamation mark followed by one or two equal signs. This exclamation mark is called the inequality operator. It will be more useful later on than you can probably first imagine. So we can write ex exclamation mark double equals why? And it will evaluate to true we do a double equal because X and why have the same value, but they're different types. This may be a little confusing when the exclamation marker in equality operators being used a single equal sign plays the same role that the double equals did without the inequality operator checking for value alone and allowing coercion. And when the exclamation mark is used, the double equal plays the role of the triple equals mark without the inequality operator checking for value and type. If we had said that Ex n equality operator and a single equal sign why, I would evaluate to false because X and Y have the same value. So because that is true, if you put an exclamation mark in front of it, it would return false. Next, we have X exclamation mark equal sine Z to return. True, we only have to do a single equal because X and Z have different values. You could also do ex exclamation mark equal, Equal Z, and it would return true in this case as well, because they're of different types and values. You'll probably need to spend some time with double and triple equals operators to get a handle on how it work, especially when you add in the inequality operator. Lastly, let's move on to the string operator. We're going to concoct innate some strings together. Remember when the plus on is used on strings. The plus operator is called the concatenation operator. We will create a happy greeting and an angry greeting. Let's go ahead and set up our code together. Var greeting is assigned to the value of string. Hello next will create an angry at guest variable and finally will make a happy with guest variable as well. For your challenge, I want you to use string concatenation to make a string that says Hello. Thanks for coming over and store it in the happy greeting variable and another that says Hello. Get out of my house and story in the angry greeting variable. Go ahead and pause the video and come up with your solution. Then we'll look at this together, all right. Hopefully, this was mostly straightforward will create a variable happy greeting and set it equal to the variable greeting plus string with an empty space for a placeholder, and then add the variable happy with guest and get our desired results. Then, for angry greeting, we just created variable angry greeting and we assign it the variable greeting plus a string with an empty space plus angry at guest variable and check out our results. That's all we have for this lab. Thanks for taking a look at operators with me and we'll see you soon and our next lesson. 8. JavaScript the Basics - Building Blocks: Increment and Decrement Operator : All right, welcome back to Java script. The basics and this lesson. We're going to look a incremental and deck remain ting of value in this combo lesson of white board and lab time. Well, look at thes similar arithmetic operators that can make a big unexpected difference if you aren't aware of their slight difference of implementation. We looked at them briefly as we looked at her operators in an earlier lesson. Let's talk about our increment operator first and the differences between putting our double plus sign in front of our value versus putting our double plus after our value, the increment operator increments adds, want you its upper end and returns of value. Let's look at this syntax if used post fix with operator after operandi, for example, X plus plus. Then it returns the value before incremental. If used prefix with operator before operandi, for example, plus plus X, then it returns the value after incremental real quick. Just a refresher operator in this case, are the plus symbols, and the operandi is the value being acted upon. All right, let's go straight into the lab and put this into practice will declare a variable called X and assigned to it the value of the number five. When we checked the value of X center console, it returns five. Now let's put a plus plus. After the X, the immediate value of X is returned as five. However, now when we look up the value of X again, we get a value of six. The value is incriminated by one after the original value is first returned. Now let's try the double plus sign before our value of X, which is currently six. It immediately returns the value of seven. When we check the value of X again, that remains seven. All right now let's head back to the white board for a quick lesson on deck, lamenting a number. The deck Ament operator Decorah mints or subtracts one from its operate and and returns of value. Let's look at this syntax if used post fix, for example, X minus minus. Then it returns the value before deck, preventing if used prefix, for example, minus minus X. Then it returns. The value after deck remain ting. All right, let's go into the lab and put this into practice. Let's go ahead and declare a variable called why will sign it? The value of seven Here is the mini challenge for this lesson. I want you to use the deck Ament operator and such a way that it immediately returns a value that is one less than the original value. After that, I want you to use the deck Ament operator in such a way that it returns the original value immediately and on. Lee subtracts when you have called the value of the variable. Why again? All right, How to go? Let's give it a shot. The first thing we want to dio is immediately returned. The lower value. We do that by placing the Tu minus symbols immediately before our Y variable. When we enter that into our console, we get the value of the number six. Now let's go ahead and use the deck Ament operator in such a way that it first returns. Theory. Gin. Alvaro. You when it is called and then when it is called again, returns the deck. Prevented. Value will do that by placing both negatives. After our Y variable. Our first value is six. And when we look at why again, way have the value of five all right. That's all we have for now. Thanks for taking a look at the increment and Decker Ament operators with me. We'll see you in our next lesson. 9. JavaScript the Basics - Building Blocks: Review : All right, welcome back to Java script. The basics and this lesson. We will be reviewing our building block section of the course. So far, we're going to cover variables, strings and operators. We're going to do this in a quiz format. I'll bring up some code or a question on our white board. I would then suggest pausing the video. Take some time to think about it. Remember, struggle is good for learning. If you were on your desktop, you can even open up your chrome browser as you watch the video and do some code. If that helps you come up with a solution. When you have given it your best shot, continue the video and we'll look at a solution. Together. These quizzes won't have new content, so if you're more advanced and you have the topic down, feel free to skip. However, this should be beneficial even to those who have a pretty good understanding of the topic, as it helps toe edge into your mind these concepts even further. Let's go ahead and get started with our first questions on variables. Let's look at a quick refresher definition of variables. JavaScript Variables are containers for storing data values. You can then refer to the data by naming the container. Here is the first question multiple choice, which is the proper way or ways to declare a variable in JavaScript, a color equals string. Blue B var color equals string. Blue sea variable color equals string blue or D var color. Go ahead and pause the video for a moment to come up with the solution and then resume the video. When you are ready, the answers are A B and E A is a little tricky because it is missing the variable keyword var. However, unless you are running in strict mode, which you probably should and will cover that in future lessons, color will be registered as a variable at the global level. This isn't good practice but does create a variable be was probably the most obvious choice to you with the var keyword and a sunning in the value of a string, blue See is incorrect. Variable is not a Java script keyword, and so are JavaScript. Interpreter will return and air. Lastly, D is correct. The value of our variable is un initialized at this point, but it is still a variable declaration way haven't given it a value. So it returns undefined, which not to go into too much detail. But undefined is a kind of value in Java script anyways. All right, question Number two. Now we're going to talk about best practices for naming variables. There are ways of coating that are sent tactically correct, and the JavaScript interpreter can run, but they aren't considered best practice. Which of the following code snippets are best practice and which are bad practice? Go ahead and pause the video, and when you have come up with the solution, resume viewing and we'll look at it together. All right. Best practices would be considered to be C and E, and maybe D See is written in Camel case Camel case as where we take a variable of multiple words. And because we aren't allowed to have spaces, we squish them together. Then for human readability. We have our first word and lower case and then capitalize the first letter of each of the following words. A is difficult to read because, without any words capitalized, it is difficult for the human eye to see the words, and they can even find different words. If we don't know where the new word starts, B is close just off the mark of having the first word an upper case. Next, we have E as a best practice and maybe d. The reason we might argue that E is more best practice than D is for human comprehension. Remember, we code for those who are looking at our code. Along with the Java script, Interpreter X is shorter and will take less memory, which are JavaScript, interpreter lakes. But my favorite color allows those working on our code to know why we're working with the string red. Let's look at the next question this time. I want you to look at the options and spot the invalid variable names we previously looked at best practice and bad practice. Now let's look at values are JavaScript Interpreter won't even work with. Go ahead and pause the video and pick out the invalid variable names. Feel free to open up the chrome console and input thes. If you need help with the solution, all right are involved. Variable names R A, C E and G A is invalid because variable names may not start with the number. However, as in the letter B, they may follow. The first character in the variable name See is invalid because function is already a Java script reserved keyword, so it may not be used for a variable name. E is an invalid variable name, as were not allowed to have spaces. The weights resolve using multiple words is to put them together. Camel case style, as we saw earlier f, is a valid variable as they can also begin with underscore as well as a dollar sign. Lastly, G is an involved variable because of variable name cannot have the ampersand symbol hope you felt good about the variable review. Now let's review what we have learned about strings. We'll start off with the definition to remind us. Strings are a data type used to represent text and are wrapped in either a single or double quote. Let's start off with our first question. Which of the following strings will return an air when the JavaScript interpreter attempts to assign value to the variable? A wraps text and two single quotes be text is wrapped in a single and double quote. See text is wrapped in a double and single quote and de text is wrapped in to double quotes . Go ahead and pause the video and resume it when you are ready with the solution. Both letters B and C will return heirs, while the string can be wrapped in either single or double quotes. As we saw in letters A and D A string cannot be wrapped in a combination of the two. Our second question will revolve around what to do when our string consists of single or double quotes, such as when people write a contraction or using quotes and their text. Look at the following strings which are valid and which are invalid and why now? I'm not in English grammar expert, so let's focus solely on the single and double quotes and how the JavaScript interpreter handles them. Go ahead and pause the video and come up with your solution. Try throwing them into the consul If you need some help. When you are ready with your solutions, go ahead and resume the video. The valid strings are B, C and E involved. Strings are A and D. A is invalid because the string contained within two single quotes has another single quote in it. B is valid because within the string designated by two single quotes, we have used double quotes on the inside. So the Java script interpreter knows that we're giving our text quotes to be read not for declaring a string see is valid because even though we have a single quote within a quote defined by two single quotes, we have used the escape backspace character immediately before it, letting our interpreter know that this is meant to be part of the text that we read. De isn't valid for the same reason is a Onley. Instead of single quote within two single quotes, we have a double quote with in double quotes. Lastly, we have the letter e. This is valid because while we have double quotes with in double quotes, as we did with Letter D, we have used the back slash escape character in front of each of the double quotes, letting our interpreter know that we want thes double quotes to read as part of the text. Last question. Suppose we want to find the length of a word and we also want to turn a string into all uppercase. Which options will help you find the length of the assigned value given to the greeting and turn the greeting in tow all uppercase letters. Go ahead and pause the video until you have come up with a solution. Then click play to resume and the answers are be an F to turn a string in tow. Upper case. We used the to upper case method because this is a method we have the parentheses attached to the name to find the length were using the property length properties do not have parentheses as a new developer, as you are still trying to grasp the difference between properties and methods with your eye, you can always tell by the presence or absence of those parentheses. Now let's close out this review by looking at operators. Let's begin with a definition recap. JavaScript operators are used to assign values, compare values and perform arithmetic operations, and more operators allow programmers to create a single value from one or more values. Our first question involves the increment and deck Ament operator. Look at the following statements and identify the true and false statements. We'll say that X equal seven for each choice. Let's imagine that X resets. The value of X isn't changing as we go down. Our list of options were just looking at how each operator returns the value of X. Go ahead and positivity you and resume when you have come up with a conclusion. All right, The correct answers are B and D. A is incorrect because the increment operator is after the operandi X so X will return its original value of seven. However, the next time we look at X, it would increase to eight. B is correct because the increment operator is before the operator and increasing the value to eight than returning it as eight See is incorrect because the deck Ament operator would subtract one from seven before returning it for a value of six. De is correct because the deck Ament value after the operator and will first return the value of seven. Then subtract one for the next time we look at X, go ahead and plug those into your console. If that is still a little foggy to you next, let's look at the module ist operator. What will the following module ist? Operators return? Remember the module ISS operator is returning the remainder value. Pause the video and work on it in your head or your consul. All right. Nine goes into 34 3 times with the remainder and return value of seven. Four goes into 12 3 times with the remainder and return value of zero to goes into 94 times with the remainder and return value of one four goes into 15 3 times with the remainder and return value of three. Now let's look at the comparison operators. Look at the following options and determine whether they will return true or whether they will return a value of false go ahead and positive video. If you do so by using the console, try to see the pattern of how the double, triple and inequality operators work. Resumed the video when you are ready to review the answers. All right, A and D were true. Well, B and C were false. A is true because we use the double equal sign which checks for value. JavaScript does something called Coercion where it tries to help us. In this case, it is smart enough to know that the number eight and the string with the eight character are the same value. However, for programming reasons, you may not want the interpreter to help you. You may want it to recognize those as not really being the same. That is where the triple equals comes into play. It checks for value like the double equals, but it also checks for type, no matter what the value. The number eight and the string eight are not the same type, so we return a false value. No, let's look at sea as false. We are using the exclamation mark for the inequality operator. When we attach a single equal to the inequality operator, it works like the double equals, just checking for value. So C is saying that the value of number eight and the value of the string eight aren't equal, but that is false because they are equal in value. As we discussed with Letter A, D uses the double equal with the inequality operator. In this case, the double equal works like the triple equal checking for value and type. So D is saying that the value and type of the number eight is not equal to the value and type of this string with the character eight, which is true. There we go. That's a review for this portion of the course. Hopefully, that was a breeze. Even if it was a little challenging. That's okay. Anytime you struggle, it just means that you're continuing to learn. However, if you felt lost most of the time, then it would probably be of value to go through the previous lessons again leading up to this review. Thanks for joining me in this review of Java script building blocks, and we'll see you in our next lesson. 11. Project 1: Kelvin to Fahrenheit Walkthrough: All right. Welcome to our many project Kelvin to Farron I Hopefully you're able to go through the previous challenge and successfully accomplish this. But if you struggled in any sort of way, I'm happy to walk you through a possible solution. Or you may want to follow me up until the point where you did get stuck. I can show you how to get past that part, and then you can finish the challenge yourself. Let's go ahead and take a look. There are several different ways that you can enter your code and accomplish this project. I'm gonna show you a quick and simple way to set up a coding environment where you can accomplish this task and then be ableto hang on to your code to look back on in the future . So the way to do this is you'll go ahead and open up the console. And when you've done that, what we're gonna do is instead of being on the Consul tab, we want to be on the sources tab and in the sources tab, we're going to go ahead and we're going to create a new snippet and I'm gonna go ahead and call this snippet kelvin to Fahrenheit. Since that's what we're trying to accomplish in this mini project now so that we can have some space. Let's go ahead and close up some of this content that we don't need. So first I'm gonna click this icon toe hide the navigator that hides all our files and then down below. And this may be a little bit different based on how your screen opens up, but I might click this hide deep bugger icon to open up some space below. Now, the last thing we want to dio is we need a consul still to print too. And so you can go ahead and do that in the Google Crown Counsel just by pressing the escape key. And when you do that the council will appear. You can remove the console by clicking this X. You can bring it back with the escape key and you can remove it with the escape key. Alright, If you're Consul does have any activity in it, you can go ahead and click this clear Consul icon as well. All right, we have everything we need to get our development environment started. Okay, so in this money project. We're going to create an application in the console that converts temperature from Kelvin to Fahrenheit. All right now, I listed out the six steps below you'll need to take to build out this many applications. All right, here's our challenge. Convert any given temperature in Kelvin to Fahrenheit. So step one. Let's imagine that the weather report says that the temperature today will be 301 degrees. And Kelvin, how should you dress for the day? Let's couldn't app that lets us know the temperature in Fahrenheit to start creative variable named Kelvin. 10. So declare variable Kelvin temp animals said equal to 301 Now, with each one of these steps, I'm asking you to write a comment explains this line of coat. This is gonna be helpful. So as you look back on this project, you'll know what you are attempting to dio or as maybe someone else in the future is looking back on your code, they can see what you are attempting to do yourself. So go ahead and paste in my comments. You We don't have to wait for me to type it out now step to find the temperature in Celsius . The temperature in Celsius is actually similar to Kelvin. Celsius is 273.15 degrees less than Kelvin. So we're gonna convert Kelvin two Celsius by subtracting 233.15 from Calvin Temp variable, and we're gonna story in a variable called Celsius town. So far, Celsius Joe is equal to Children temp minus 273.15 And again, you're going to go ahead and write a comment above that explains this line of code. All right, let's look at Step Three. We're gonna use the following equation. Fahrenheit is equal to Celsius times within perent nine divided by five plus 32. So we're going to use this calculation to store of value to the variable Fahrenheit. So far, Fahrenheit Champ is equal to Celsius. Town times nine, divided by five plus 32 and we'll go ahead and comment our line of code. Okay, Now, Step four is going to be the law to the consul. The value of Fahrenheit temp. Now, this is a good time to actually make sure that you've saved your file. The great thing about working in sources in the chrome deaf tools is that you can actually save this file. You can do that on a Mac with command s. And now this file will always contain this code that you're writing. So go ahead and close this icon. First. Let's type in consulate that log Fahrenheit temp. Now, to run our code, we can click on this icon here that says run snippet or on a Mac weaken type command, enter or command return. And that will run our code below. And so we should have 82.13000 something. If you've gotten that far, then you're definitely on the right track. Okay, let's move on to step five. We're gonna go ahead and remove this line of code because we don't need it for application . Now, we're going to use the floor method from the math library to round down the Fahrenheit temperature, and we're gonna save the results to the Fahrenheit temp variable. The floor method is new to us in this course, so I posted a link here so you could check it out. But because it might be new to you, I'm gonna go ahead and do a quick demonstration, I'll go ahead and open the console, clear out the activity and the methought floor function or method is going to return the largest integer less than or equal to a given number. And so let's say we have the number 6.25 math dot floor. And if we pass in 6.25 it's going to return the largest imager less than or equal to a given number. Now, if we have 6.75 what do you think's going to happen? You might think that it would round up to seven, but it's going to actually round down because, remember, that's what this method does. It returns the largest, integer less than or equal to a given number. If we wanted to have a rounding system that rounded up, we would use the math dot seal method and we could pass in 6.75 and it would round up as we would expect. Or we could pass in 6.25 And it's going to round up because that's what math dot seal does . If you wanted a method from the math library that actually rounded as you and I usually think of a number rounding. We could use math dot round and passed in 6.25 which will round down to six. And if we passed in 6.75 it would round up to seven. Okay, this is all the information we need about the math dot floor method in the math library to accomplish this task. So Fahrenheit temp is equal to math. Thought for no pass in the current value of Fahrenheit. Jump. Let's go ahead and add a comment to this line of code so that we know what we're attempting to dio. Now, finally, in our last step, we're gonna log to the console the string The temperature is temperature degrees Fahrenheit in the string temperature should be the value of the Fahrenheit temp variable. So let's go ahead and log this to the council council dot log. The temper sure is. And we got to be careful with spacing that we want tohave now we pass in the Fahrenheit, attempt variable Plus. Now he can catch innate or string degrees. Sir Knight. All right, go ahead and add a comment. Explain this line of code and I'm gonna go ahead and just clear this Consul, and I'm going to run this snippet. And the result is that we have logged to the consul. The temperature is 82 degrees Fahrenheit. If you weren't able to solve this on your own the first time, go ahead and returned the challenge and give it a shot again. All right. And if for any reason that your code isn't working as you would expect, go ahead and check the resource file for this lesson to check your code against mine. All right. Great job. And we'll see you next time. 12. Project 2: Cat Years Converter: all right. In our next many project, we're gonna go ahead and look at cat years in which we, in a very unscientific way, calculate how old we are in cat years by looking at our human years. So let's go ahead and get started by setting up our environment. I'm gonna open up chrome Deb tools and make sure that I am on the sources tab and then we should see a snippet section. Or there should be an icon that says, Show Navigator, if you don't see the snippets section from here on my click new snippet and a man named this cat Yes, and I'll have to do is press enter and there we go. Now I want to clear up some space, so I'm going to hide this navigator. And also, if this bottom section is open to the deep bugger, I'm going to hide the D bugger. And then I'm gonna press the estate key which can open and close the consul. Now, I'm gonna want to go ahead and clear out this console and all the noise that's in there as well. All right. So hopefully this challenge was pretty straightforward. The challenge is to convert your age to cat years. Now we've been given the information that the 1st 2 years of a cat's life count is 25 cat years, each each year following equates to four cat years. So instead of trying to figure out how old you are in cat years in your head, we're gonna create a mini application that does this for us. So go ahead and walk this steps. Step one is run a creative variable my age and said it equal to your age as a number. I'm just gonna say 20. I'm a little bit older than 20 but anything older and our cat would be dead for sure again , for all these steps, we're gonna comment our code. So in the future, we can look back and see what we're trying to accomplish with each line, or someone else can look at our code and understand what we were attempting. Some of this may seem unnecessary. What? It's good practice for you as a beginner to really think through the code that you're writing. All right, so the next step is going to be to create a variable early years, and we're gonna assign a value of two to it. And we're gonna use this to account for the fact of how fast cats grow during their 1st 2 years of life. Okay, now, Step three is used the multiplication assignment operator that we've learned in previous lessons in this section by using the star or gastric equal sign to multiply the value saved too early years by 25 and reassigning that your early years variable. So we'll assign to the early years variable that we've already declared and initialized Well, now set it equal to times equal 25 to account for how fast cats grow. All right, since we've already accounted for the 1st 2 years, we're gonna take them my age variable and subtract two. And we're going to assign the value to a variable called later years. So far, later years is equal to my age, minus to All right, So on the 75 we're gonna multiply the later years variable by four to calculate the number of cat years accounted for by your later years, we're gonna use the multiplication assignment operator to multiply and a sign in one step so later years Times equals four and So this accounts for how fast a cat grows once it gets past age, too. Now, for step six, we're gonna go ahead and just check our work. Let's go ahead and council dot log early years and we'll consul dot log later years. Go ahead, make sure that you save your code if you have it, and then we'll go ahead and run our code. And so early years is the number 50 which is what we would expect because early years is initialized it, too. And then we assigned a new value of early years times 25. So two times 25 now, later years is initialized at my age. One is to which B 20 minus two, which would be 18 initially. And then we multiply 18 by four, which is 72. All right now, let's go ahead and move on to step seven. We'll make sure that we deleted the lines of code from Step Six is we don't need them for our final application. We're going to create a variable called my Age in cat years, and we're going to assign it the value of early years plus later years. Okay, now let's go ahead and move on to step eight. You're gonna save the value of your name to a variable called my name So far my name and I might go ahead and give my name. You can go ahead and give yours. All right. Now for our last step, we're gonna log to the consul A statement that says my name is name. I am human age, years old in cat years which is capped age, years old and cat years All right. And I've broken that down Where name should be That my names Are you human aids Should be the my age value Cat age should be the my age in cat years value All right, so let's go ahead and get started with locking this to the consul and we're going to use string concatenation. My name is and we're gonna add the my name variable to get its value plus strengthen coordination period. I am. Then we're gonna add that my age value and I might go ahead and hop on a new line here plus strength and coordination again. Years old in human years, which is plus my age and cat years. No, my go ahead and hop on a new line. One more time plus years. Hold in chat years. All right, let's go ahead and make sure that we've saved our file. And if you have it, make sure that you've cleared your console and let's go ahead and run our code snippet. The result is my name is Rob. I am 20 years old and human years, which is 122 years old. And cat hairs. That's a really old cat. All right, great job in this challenge. If you have any problems with this code, go ahead and try it again until it feels natural to you. And if for some reason your code isn't working as you would expect, then go ahead and click on the resource for this challenge to compare your code with mine. All right, great job and we'll see you next time.