JavaScript for Beginners Masterclass | Juan Galvan | Skillshare

JavaScript for Beginners Masterclass

Juan Galvan, Tech Entrepreneur | Marketer

JavaScript for Beginners Masterclass

Juan Galvan, Tech Entrepreneur | Marketer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
32 Lessons (3h 41m)
    • 1. JavaScript For Beginners Intro

    • 2. JavaScript Marketplace

    • 3. JavaScript Job Opportunities

    • 4. VS Code & Extensions

    • 5. Browser Dev tools & JS Console

    • 6. Common Console Errors - Syntax, Type, Reference

    • 7. Intro to Terminal

    • 8. Crash course on GitHub

    • 9. Online Resources

    • 10. Coding Challenge: Hello World in JS

    • 11. Execution Context Object

    • 12. Single/Multi Line Coding

    • 13. Working with Variables

    • 14. Hoisting in JavaScript

    • 15. Declaration, and Assignment

    • 16. Operators

    • 17. Operator Precedence

    • 18. Coding Challenge

    • 19. Coding Challenge Solution

    • 20. Strings & Properties

    • 21. String Manipulation

    • 22. Numbers

    • 23. Number Manipulation

    • 24. Null and Undefined

    • 25. Null and Undefined

    • 26. Boolean Logic & Control Flow

    • 27. Truthy/Falsy values and Equality Operators

    • 28. If/Else Statements, nesting if/else

    • 29. Ternary Operator

    • 30. Switch Statements

    • 31. Code Challenge

    • 32. Code Challenge Solution

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

JavaScript for Beginners Masterclass

In this practical, hands-on class you're going to learn how to use JavaScript for beginners!

Even if you already have some experience, or want to learn about the advanced features of JavaScript, this course is for you!

In this class you’ll learn:

  • JavaScript coding basics
  • VS Code & Extensions
  • Common Console Errors - Syntax, Type, Reference
  • How GitHub works
  • Single/Multi-Line Coding
  • Execution Context Object
  • How to work with Variables
  • How to work with Operators
  • String Manipulation
  • Number Manipulation
  • Boolean Logic & Control Flow
  • Truthy/Falsy values and Equality Operators
  • If/Else Statements, nesting if/else

This class gives you foundational training on JavaScript so you can increase your coding skills and start pursuing a career in a field that is increasingly in demand as the global reliance on technology grows.

Meet Your Teacher

Teacher Profile Image

Juan Galvan

Tech Entrepreneur | Marketer


Hi I'm Juan. I've been an entrepreneur since grade school. My background is in the tech space from Digital Marketing, E-commerce, Web Development to Programming. I believe in continuous education with the best of a University Degree without all the downsides of burdensome costs and inefficient methods. I look forward to helping you expand your skillsets.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.



1. JavaScript For Beginners Intro: Welcome to the JavaScript for beginners masterclass. In this particular class, you're going to learn the basic fundamentals of JavaScript. In this lesson, we're going to go over all the different sections that we're going to cover in this particular class. So this class is for everyone whether you are a beginner, maybe you have some intermediate level of experience. You're still going to be able to learn different tips and tricks until let's go ahead and jump into the next slide. Here we are. We're going to go through the section one course introduction. So in this section we're going to go over the JavaScript marketplace. You can expect as a JavaScript developer. And then we're going to go over the JavaScript job opportunity. So what does the market look like for various JavaScript jobs if you want to become a front-end developer, right? What other skills are going to make sense for you to have along with JavaScript. And also if you want to be a full-stack developer, right? What other skills are going to make sense whether you want to be a front-end developer and where you're just working on websites, just working on the actual front end, right? Look of a particular app or website. Or if you want to be a full-stack developer where you are handling the front end as well as the back-end, right? So then in section two, we're going to walk through an introduction to JavaScript. So we're gonna go over the VS Code and extensions. We're going to go over all the various browser development tools and the JS Console, we're going to go over common console errors syntax. We're going to go over the terminal, and then we're going to walk through a crash course on GitHub. And then in section 3, we're going to walk through coding basics. This is where we're going to walk through single and multiline coding. We're going to go over working with variables, hoisting. We're going to go over operators, how to work with operators, right? Then we're going to have a simple coding challenge. And then in section 4, we're going to go through primitive datatypes. This is where we're going to walk through string manipulation, number manipulation, symbols, Boolean, logic, and control flow. We're going to go over the truth and false values and statements. And then finally, we're going to walk through a coding challenge. So that's going to be here for the introduction to JavaScript masterclass in loosely on the inside. 2. JavaScript Marketplace: In this video, we're going to go over the JavaScript marketplace. So the current trends in today's market as far as a JavaScript marketplace, this is something where JavaScript is a very highly sought after skill, right? Because when you think about front end developers, oftentimes their skill set is going to be HTML, CSS, and JavaScript. Z ability to add different types of motion, different types of graphics, right? Make things very interactive. And so this is something that's going to be a great skill set to add onto your resume, right, so that you can become a full-fledged front end developer and a recent survey on Stack Overflow. So that about 70 percent of professional developers stated that the youth JavaScript, right? So JavaScript is increasing in popularity. It's a very nice and unique tool to be able to add a lot of interactiveness to different websites, different apps frame. And then according to the data provided by stack share data IO. Over 10 thousand companies worldwide use JavaScript in their stacks, right? So this is something that is going to be here to stay write. Javascript is increasing in popularity. But it's really a very important skill to have if you're looking to be a full-fledged front end developer, right? You're going to need HTML, you're going to need CSS and then also JavaScript. So if you're looking to learn about JavaScript or obviously in the right place. 3. JavaScript Job Opportunities: In this video, we're going to go over JavaScript job opportunities. So this is where we're going to go over. What type of jobs are there out there in the marketplace? What can you expect to see, right? What are companies looking for? So let's go ahead and jump into JavaScript job opportunity. So about 1 third of all programming related jobs that are listed on sites like require JavaScript proficiency, right? And so this goes back to the front end developers. This is a skill that is essential for you to have if you are a front end developer, if you're looking to become a front end developer, right? So the strong presence of JavaScript jobs can be attributed to two things. So the foundational nature of the language right, which helps provide a bunch of interactiveness rank to various websites. And then the robust array of features that JavaScript brings to those foundation. So it's very, very important for you to be able to understand, right? What is the actual reasoning behind the increase in popularity and why are companies looking for individuals with JavaScript skill sets, right? So some of the most common JavaScript jobs include front-end developers, right? And so just like I've been mentioning in the other lessons, Front-end developers are essentially needing to know JavaScript, right? You have to know this skill, you have to learn this language. And it's very important for you to be a highly respected front end developer. And so let's go ahead and look at Full Stack Web Development, right? Just like we've been talking about, more and more businesses are realizing the importance of a web presence, right? To be able to stay relevant in the marketplace, especially now in the digital age. So this is why it's important for developers to be able to have those JavaScript skills so that they can make websites lot more interactive, right? That can make an epsilon more interactive. Very, very important, right? Especially with various sales products that are increasingly becoming a popular SaaS startups that are just popping out of nowhere, seems like every other day, right? Especially out of Silicon Valley. So JavaScript is going to be something that is very crucial for front-end developers to have. So again here write JavaScript development is very important for those that are really looking to become full stack developers. And according to indeed, JavaScript stack developers earn as much as 93 thousand per year. And so keep in mind that there's a difference between full-stack development and front-end and back-end, right? Front end, like we talked about previously, is going to be your HTML, CSS, JavaScript backends going to be typically with Python, AWS, right? Where you're hosting this site, you're making sure that you have a server, right? And a lot of times it's going to be through AWS where it's going to be in the Cloud. So but still having the ability to be a full-stack developer and know all the different types of programming languages. Coding rate is going to be very, very crucial. So JavaScript job tasks, these types of job tasks include updating JavaScript content on existing websites, fixing bugs and preexisting code. And then sometimes it building new JavaScript features from scratch. Just think about like a button, right button on a website. It can be as simple as a Buy Now button or a Add to Cart button, right? A lot of times when you can have those buttons there be interactive, right? Maybe changed colors or maybe be changing a different color when you're hovering over them. That's going to be a lot of the interactiveness and the different features that can be built on using the JavaScript language. And so here's some additional examples of the various job tasks. So design and develop new front end applications, develop scientific, develop specifications and designs for complex applications, or modifying and maintaining complex existing applications. Performing code analysis, requirements analysis, and the identification of code metrics, system risk analysis in a software reliability analysis as well. So this is a quick overview here of the JavaScript job opportunities. As you can see, what we've gone over here is pretty much showing great opportunity, great promise, and the JavaScript field. And there's a lot of opportunity for you to be an actual JavaScript developer. Just really add that to your resume so that you can be a full-fledged front-end developer. And if you already have the back-end skills, then you can really become a full-fledged full-stack developer, right? So that's going to be here for this one, and we'll see you on the next one. 4. VS Code & Extensions: Welcome back. Now we're at section two, lesson two, VS Code and extensions. Vs Code is a text editor, but it's pretty much also an IDE, which is an interactive development environment. And there are lots of other IDE. So let's take a look at some of the other ones out there and then come back to this page. This is a wonderful paging yet to top IDE index. And it lists the ones most downloaded, essentially, where are people googling to find the download pages for these? And Visual Studio, which is Microsoft Visual Studio, is number one, that's not VS code, but that is a full featured IDE that supports a lot of languages that work well on, on Windows, like Java and C sharp and C plus plus. There's also Eclipse, Android Studio, Visual Studio code, that's BS code. The one we're going to use. Pycharm is really popular as well with Python. And intelligent J is also a very common and popular IDE as well. And there are a few others, very popular ones. Xcode is for developing iOS applications. Adam is extremely popular. Sublime Text is extremely popular as just very well rounded text editors. And then there are a few others as well. But VS Code is a very common code editor that we're going to use for the rest of this course. And it has a ton of extensions and tools that help us organize and format our code. So let's take a look at VS code. When you Google VS code, you'll be able to find this page here. Clicking on that, you can see Visual Studio Code, code editing redefined. And this is actually built for Windows, Mac, and Linux. It's pretty easy to use on all of those. And then you can just hit here to download. And you can choose your operating system. So if you're on Windows, and I already have it, so I'm gonna go ahead and just show it to you. Once you install it and get it running. It's going to look like this. So I already have it open to our project right now. And this is what it looks like. As you can see, I have already loaded it with section two, Lesson two, and put some files in here. But this is Visual Studio Code. You have all the regular desktop application options and features. And we can also look at some of these extensions. So let's come back to these files here and a second. Well, let's just take a look at these extensions. So I have a few installed that are, that are very useful. So you can look at prettier. There's prettier and then there's a bunch of other versions as well. This is a, this is a very good one prettier code format or as you see, it's been downloaded 9 million times. Let's go and install that. And there are a few others. You can look at ES lint. And this is for lending, which is basically cleaning up JavaScript code. So I'm gonna go ahead and install that as well. Okay? So there are bunch of others you can get as well that do a lot of different tools, a lot of different things for you. We don't need to get into all of them right now. This is how you get back to your Explorer, your file, your file base, and you can search with that. You can do source control. So this integrates directly with GitHub and Git. And you can run your programs here and a few other options as well. These are just integrations for other applications that I have. So let's go back to here. If I want to see a preview of this, I have two ways of doing that with the S code. There is an extension called live server that you can use to do a live preview in the browser. But I'm gonna do the simple way. The simple way is just to open a browser window. And so let me just do that real quick. So I've got this browser window open. I've actually got to open to the dev tools as well. So if you right-click and hit Inspect, and you can open up these devtools. Okay? It automatically put in here just nothing. There's nothing in this HTML file. It wants there to be, but there's nothing in there. So, so yeah, we could put something in there though. And that's pretty much it for this lesson. I just wanted to show you visual studio code. You can use this to type out code. And there's an HTML file intro. We can do the head, we can do the body. And there, there you go. There's a properly formatted HTML file right there. And then we look at our JS file. And we could do whatever we want to in here, we could set up some variables and gets this, create some string. Hi. And say that. Okay? And there you go. This is Visual Studio Code. You can use this to edit your JavaScript files in your HTML files and any other programming files that you use. Basically you can use this as a general text editor and then use it to plan and edit your projects. And there are lots of tools built in here. One other thing I wanted to go over is the terminal. So we're going to learn a little bit more about terminal in an, in a future lesson. But in here you can use the command line tools. I have bash installed, which is for Linux scripts. Okay, so let's get back to that later. You can say your preferences right here, go to File preferences, settings. And there's some things you might want to add having here. You could do an auto save. You could do. So let's just turn that on. After a delay. So after 1 second it's going to automatically save. And then those settings are automatically saved. Okay? And that's it for today. So that's Visual Studio code, a very popular text editor that we can use to edit our files. So in the next lesson we're gonna get into some browser dev tools. And how do we actually see the output of these files in a browser and manage those files accordingly. Okay, thank you. We'll see you soon. 5. Browser Dev tools & JS Console: Welcome back, and we're now on section two, less than three, browser dev tools and the JavaScript console. So we're going to look at the developer tools in the browser, which basically let you log information associated with a webpage. And so that, you know, those are things like network requests, JavaScript, CSS, security errors and warnings, as well as other errors, warnings, informational messages logged by JavaScript code running in the page context. So this will let you interact with a webpage by executing JavaScript expressions in the context of the page. And to access this, to open this in Chrome or Edge or Firefox, just right-click and then select inspect. So let's take a look at that. So you remember we have our JS code open. I'm going to copy this and just set it up on our lesson three as well. Okay, so now we're in lesson three and we've got an HTML file, and we have our JavaScript file, and they'd been saved. So let's see what we can do about looking at these in the browser. Okay, so I have a browser open now to less than three index.html. And it's just a blank page, as you can see, I don't have any content in my HTML. If I wanna change that, I could give this a header. Lesson three. Okay, if I refresh this page and you'll see lesson three right there in HTML. And now how do we get to the dev tools? You just right-click anywhere in conflict, ends fact. Ok. So now here is the dev browser and we've got elements, console, sources, network, performance, memory, application, security, and Lighthouse. I won't go into everything, but let's take a look at sources. This will just show you what files we're looking at. So when you're on a webpage, there'll be other information. But if you're looking at just codebase or in files on your computer, then it will show you the path for that. And now let's go back to elements. Elements is showing you just the HTML. As you can see, it matches the HTML that we have in our text editor and BS code. And then if we want to look at the styles that we put in here, it just has these default styles, so there's nothing special. And because we don't have a specific CSS file in here. But it also shows us the settings that are built-in by default to this. So I have a fairly small window because of how much this is taking up. So that's Elements. And then if you go to console, this is a JavaScript console where you can actually see JavaScript information. So if I wanted to say, let x equal five, and then we go x times two, we should get ten. There you go. So you can just run JavaScript right here in the console. And it will work just fine. Okay, in addition to that, there are the elements where you get to see the HTML and the CSS. You have the console where you can use JavaScript. And we have sources where we saw the files. And then we have network where you can see if there are any scripts that are running and passing information from this website to another website. And there's nothing at this point. Okay? So that in a nutshell, is the browser, developer, console and tools. So that's pretty easy to access those just right-click in your browser and hit Inspect. And on most keyboards you can also do F 12. And so that's F2 on your keyboard to open up the same menu where you can access all of the files that are being accessed by your website, all of the styles and HTML, and then any additional scripts or anything that's reaching out through the internet to other websites. Okay, so that's it for lesson three. And we'll come back and listen for and talk about some common console errors that you'll find in JavaScript. And look at how those errors will affect your code. 6. Common Console Errors - Syntax, Type, Reference: Welcome back to section two, less than four, common console errors, syntax and type references. So basically in JavaScript, the console is going to tell you if something went wrong. Most of the time. Sometimes there are going to be problems that you won't notice because they won't reach the console or your code will run and it will compile in your code thinks it's doing the right thing. So there's no error and you're just gonna have to go into your code and find out the problem or whatever, whatever thing is happening that's not showing you what you expect. So in those cases you mostly just have to print out to the terminal, to the console what outputs you're expecting to see, and then see if you need to change those at that time. But as far as built-in errors that will really help you understand if there's something wrong in your code. We have some that are built into the JavaScript console. One is a syntax error, so this is probably the most common. And this is a load time error, which means that JavaScript has detected improper syntax in a statement. And the error message almost always tells you the exact line and character where the error occurs. And then there's the expected open parentheses or missing or expected close parentheses. And these are, if you did not include a and synthesis or a right parenthesis, then it will tell you that there's a mismatch. And then you should be able to just go into your code at a specific line and fix that, and then your code should run just fine. Likewise, if there's an expected curly brace, open or closed curly brace left or right, then it will notify you of that as well. If there is a semicolon that's required in a certain section of your code. Which is basically anytime you have the end of a line or the end of a single action or expression of code and JavaScript, you should probably just put the semicolon. If it's not bear than sometimes it will get confused and not know what to do. Some languages don't require semi-colons. Some require them all the time. With JavaScript, there's somewhat optional, but it's just a safe, better safe than sorry rule to just put semi-colons at the end of each line of code. And then you will get an unexpected identifier or missing. This error tells you that for some reason the previous statement didn't end properly. And for some reason, or you'd begun a new statement with an invalid value. So if JavaScript thinks you've haven't finished statement properly, maybe it's because the semicolon is missing, or maybe you forgot to include a, the opening symbol for a multi-line comment or something like that. Some additional symbol is expected that is not being shown in your code. You might also see x is not defined. So this most often refers to if there's a specific variable that's not defined, it will be a variable named x that has not been declared or initialized or that you were trying to use in an expression. If that's the case, you just need to declare and initialize that variable. Another possible cause is that there's a string that isn't enclosed in quotation marks. So it's basically trying to read it as special keywords and it doesn't understand what those keywords mean. And so you need to put a string, which is just a line of text in quotation marks. And then check to see if also if you just misspelled your variable names, sometimes it can't find your variable or it says your variables not defined just because you misspelled it. You'll also see something that says x is not an object or x has no properties. That's if you try to use a variable as an object literal, but you don't give it properties or you're trying to use a string and the way you'd use an object or something like that, final one here is an terminated string constant or an terminated string literal. Both of these messages mean that you started with a string literal with a quotation mark, but forgot to close the quotation mark. So you started a line of text and you did not finish the line of text. You might also see another one that says a script on this page is causing your browser to run slowly. Do you want to abort the script or you'll see it say lengthy JavaScript still running, continue. And so these errors will tell you that your code is probably fallen into an infinite loop. And if you don't get any specific information about what's causing the problem, you'll need to scour your code to look for the possible cause. Alright, I will include a link to the resource for this in the notes. That is basically the list of the common console errors that you're gonna see and type references in JavaScript. So let's take a look at an example. Ok, so if I wanted to show you some of these errors in the browser console, let's do that. Now. We've got less than four up and my HTML. And now it is doing a script tag in the head to call my index.js. So now my JS file is connected to my HTML file. So once I show it in the browser, I should be able to see the changes that are listed. Okay, so if I wanted to print to the console, I can do that here. I can do console.log and I can just log string. Alright, now if I save that, and then I run this again, then there we go. We get this printout of high to the console because that's all I told it to do. Go to my console and log or print out this variable. And this variable has a value that says, Hi, we're gonna get a lot more into variable types and everything soon. Alright, so what if we want to produce some errors here? Let's see if we can produce some errors. So let's try that and do this again. And boom, uncaught syntax error, unexpected identifier. So it's saying what is wrong here. This doesn't make any sense. These are on the same line and it's misunderstand double. So if I take it onto a new line, it will get rid of the error and it will understand it. But if we wanted to have it on a single line, we could as long as we separate the commands with semi-colons. So that's why it's best to just have a semicolon at the end of your line. Okay? And if we wanted to see some of these others, What if we do a missing open parentheses? So if we do that and then refresh, we've got another unexpected identifier. And if we do that same thing, let's try to make another problem happens. So let's go undo. And let's not close this other string here and see what problem is syntax error, invalid or unexpected token. So it's, this is saying that because we didn't close our quotes. Okay, so that gets rid of the error there. And then we can see some other things like x is not defined. So if I take this and I put it into a comment, commenting something out basically makes it so that your code is not going to read it as a command, is just going to acknowledge that it's simply a text note. So if I commented out then it won't run. And so if I save and then refresh, we'll get uncaught reference error. Str is not defined. So this means that our variable is not defined. We're going to need to define it, give it some initial value and state that it exists in order for it to be understood by the console. So let's bring that back out of the comment. And you can either do your comments by two forward slashes or you can use just a shortcut. And most code editors you can do a control forward slash or on Mac command forward slash. Okay, so let's take that back out and see if that fixes the error. Yes, it does. Okay. And then we could produce another one like an infinite loop. We could do an infinite loop with a for loop. So I'm building a little for loop right here. So normally a for-loop would stop at a certain spot. And then, because it would reach this condition and then stop. But if we start at 0 and we say, as long as I'm less than 0, then continue until there. As long as I'm greater than 0. Let's start at one. Ok, so I created a for-loop and we're starting at one. And now if I say i is greater than 0, as long as i is greater than 0, then continue to the next line and increase i by one. Okay? Well, it's just going to keep doing that. If i is greater than 0 and will increase i by one, et cetera. So let's save it and run it. And let's do console.log. Okay, now that we've set up our infinite loop, let's run it and see what happens. Ok, as you can see, we created a problem. It won't stop waiting and thinking. It's really, really trying hard to get this right. Let's take this out and save it. And let's force refresh this page. Alright, so we got rid of the infinite loop and we eliminated the problem of it just spinning forever and ever. So, that's just a few examples of these common JavaScript error messages. Let's get back to our reference. So, yeah, that was less than four common console errors for syntax and reference type errors. You will see these a lot. You'll see these all over the place when you put in some code and expect to get something, but you don't get what you expected. Thankfully, the console log is going to do you a whole lot of good by telling you what those errors are. Okay? So for our next lesson, we're going to switch gears a little bit and learn about terminal. The terminal is something that command line terminal essentially is something that we have on Windows, on Mac, on Linux. And it will allow us to manipulate the computer from just a command line. So we'll just actively enter some codes that will allow us to navigate the computer. Okay, let's stop there and we'll see you in the next video. Thank you. 7. Intro to Terminal: Okay, so now let's get started on Section two, less than five. Less than five is Intro to terminal. So what is terminal console shell? What do these things mean? Basically, a terminal is a location where you can execute a line of a command to your computer. And it will do, it will execute that command. So the word terminal comes from terminate, which is just meaning the end of a communication. So if you write a bunch of instructions and then you stop, then that's the termination of that communication. So we've built terminals into computers so that we can interact with them. The very first computer commands were done just in text form. So we have a console that looks something like this, where you have a list of where your files are. So you have a drive, a hard drive where you keep your files. You'll have certain folders and then you'll have certain files in there. Inside your folders. You could have, you know, a bunch of these different files. And this is an example of a React Project, Node modules package.json yarn dot loc. And these are files that you'll see a lot in React projects and JavaScript projects on node. And then Command Line is where you can execute these commands. So this, for example, Ls means to list all of the stuff in the folder. So that's the way I think of it. Ls lists stuff. And it's going to show you the contents of the folder. So you can obviously manage your file browser, like you have Finder on Mac, or you have the Windows Explorer on Windows. And there you go. So you can do that in those graphical user interfaces, but using the command line, you actually have a lot more freedom. So why should we learn the terminal? It's because those graphical user interface programs to manage your files won't let you do everything that you need to do, and also won't let you access a bunch of commands that Bash and these terminal languages will let you do. Okay? So the console is basically the idea of a, you know, some piece of furniture that will have a screen that will have some information on it. And the very first computers were only consoles. They were essentially terminals. Because all you could do with a computer was to give it text commands and it would give you text responses. And eventually we had, you know, graphics command of computers. And we could go a lot further. And then the terminal and the console idea became a little bit separate. But the reason we should learn terminal is so that we can manage our projects very much more easily execute certain commands to run our projects and test our projects and go from there. There's also this term called shell. And the shell is basically a little program that's run in the terminal. And so the shell will generate the output and pass it back to the terminal for the display. And these amount to different programming languages. Essentially, the one we're going to concern ourselves with is Bash. But there's also Z Shell and a bunch of other shells. Windows has PowerShell. And a lot of these integrate features that are built into Linux. And bash. Bash is the most recent Linux programming language for the terminal. Okay, so let's take a look at how these work in our codebase. Let's start with lesson five. Okay, so let's start with lesson five. And here is our terminal. So you can get to it if you just go up to here and VS Code and hit New Terminal. And we can see where we are in this little terminal here. We can just list what we've got in here in this folder, we've got Section two. Ok, if we wanna go by one directory, we can do CD change directory space dot, dot. And if we wanted to go down further into the next directory, we could do that and we just choose cd. And then you can put any part of the command and then tab, and then you'll be able to go in there. So cd JS will take you down into where we were before. Let's cd into section two. And then C, we've got, okay, we've got these lessons here planned out for section two, and then we can go into one specifically. So let's go into lesson five. Let's cd into lesson, lesson five. And look again. And we've got the index HTML and index.js that we have right here. Okay? So this is our terminal and we're using bash. If you wanna get bash on Windows, it's a pretty easy process. To get bash on Windows. We're gonna do just Git Bash windows. It's gonna download both Git Bash. So that's, that's what we're going to use. The reason we want to do that is not just to have Bash, but also have the Git commands where we're going to talk about in the next lesson. So you can just download. And then you're gonna get an EXE file. And then once you install it, and then open VS code, you should have batch here in this dropdown. And that way you'll be able to use Bash commands to navigate your files. Okay? And so the basic instructions that we're going to have are things like list. And then cd. If you wanna go back to your root directory, you can do cd space tilda. And if you want to get down into an additional directory, you do the CD and then you say the name of the folder. If you want to create a file, you do touch, then you could do touch test.txt and just watch what happens. As soon as we do that. It showed up right here and we can add something to it and save it. So we've just got a text file right here. What if we wanna get rid of that text file? What's going to, what are we gonna do? We could do remove, be very careful with this. R m is going to completely remove that file. It's not gonna go into the recycle bin. So it's just going to disappear from the folder completely with no easy way to get it back. So let's just gonna remove test.txt. We did it. What do we see? Deleted now it's deleted so we can't use it anymore and it's gone. Okay? Alright, so that's basically it for terminal. So the main things to know, RCD, you can also do make directory. And you can make a small directory, will make it to test directory. And then if we ls, you can see we now have a test folder in here and it has nothing in it. And if we want to remove test, we can't and we need to remove it as a directory, so we do. Okay. You're going to RMRF to remove a directory. That is it. So let's go ahead and that the, so that's our review of the terminal and the console and the shell and the terminal console. And now for the next lesson, we're going to get into a crash course on Git and GitHub. This is going to be extremely important because we are going to be managing all of our files using Git and GitHub. That's not the only way that you can manage Git repositories you can, there are a number of other things like Firebase and BitBucket and get lab. But GitHub is the biggest ones. The easiest way to create a project very quickly in JavaScript and store it hosted on a server, and then be able to execute and run your application online. Okay, so we'll see you in the next video. 8. Crash course on GitHub: Welcome back to the course and we are now on lesson six crash course on Git and GitHub. Now these are very, very important. Git is a free and open source distributed version control system designed to handle everything from small to very large projects with a lot of speed and efficiency. There have been other version control systems in the past. Just so you understand what version control is. It's basically a process where you can keep track of all of the changes that occur in the files and folders in your project without having to store a full copy of every single change. So I'll full copy of the files and folders. Whenever a change is made. It also helps you keep track of when those changes were made. So it's easy to go back to a version of your software before maybe a certain bug was created or something else happened. Also, it's easy to see which changes different people make. So if you're working on a project with multiple people, it can make it very clear who did which change. And as a result, you can manage your project more efficiently. So that is what Git is. That's the open source system. And it's this set of functions and basically a library of commands that you can use. And then there's also GitHub. Now github is just one of many hosts. So it's a, it's an actual company, a private company that hosts these projects online to make it much easier for you to collaborate with these projects with other people. Get hubs, the biggest one. There's also Bitbucket and git lab and a number of other hosts that will allow you to store your Git repositories online and then collaborate with other people on those. So let's take a deeper look at how we can get started with Git. So first what we're gonna do is actually go to git hub. So here is If you create an account, is pretty easy to do. So just put in a username, email, and password, and then you can sign up. I'm gonna sign in because I haven't account and I'm going to sign in here. And then it's fairly easy to create a new repository. Repository is basically a folder with get enabled so that you can manage a project. So here you just choose a name for it. And I'm just going to give it a description. And I'm going to keep this one public. I'm going to add a readme file, and I will choose a license. These are optional steps you can skip, but it's very good to have a readme file to describe what your project is and what it's for. I'm going to have readme files in multiple folders in our course documents and GitHub so that you can see resources for each lesson. And then we create the repository. So we have one main branch called main, and then we have basically all the code that's in here. It initializes with this README file, it's in markdown. Markdown is basically a just a rich text document, just like a text file that uses markdown similar to HTML in order to connect this and then start editing this and then make it easy for us to edit any files in this project and then upload them back to GitHub. We're just going to copy this link. So we just click here on code and copy this link right here. And then we're gonna go over to our folder. So I've created a folder here on my computer and I'm just going to clone. Now I'm going to get clone this right here. Okay? And so it cloned that repo. Basically cloning means it's going to download it and it's making a copy, a clone of that folder onto my computer. And so now I've got that on my computer, it's here. I can check. And notice that all I have inside this folder is another one I can get into. So I can CD change directory into that one and then see what's in there. And how much just the license in the read me the ones that I created in Github. Okay, so now I can do whatever else I want. I can create new files in here and see I can save them. Let's do a quick console log. And then save this as test.js. Okay? And then save that file. And now if we ls again, now we have that file right here. So let's check our git status. Okay? And our git status command just tells us that which changes have been made to the repo locally. So that we can compare that with what was already in the project, which is synchronized with So this branch is up-to-date, but there's an untracked file, test.js until nothing has been added to the commit. So it's not going to synchronize anything online just yet. We need to do a few more commands to make that happen. We could also build this file on a branch so we can get checkout dash b. And we can name a branch. I'll just name it with my name. Peace Ellsworth. Okay. So now we're on a new branch and I can create files on that branch. So I could touch a file and just do test.js. Go into my test2. Console.log. Hey, I'm writing JavaScript. Ok. Then we can save that. We can save that. Let's check on our git status. Alright, so let's go ahead and get add dot. What that did is it added those file changes to my repo. And now I'm going to git commit dash m, adding the first commit to the repo. So you just put some message there that's descriptive. That will clarify what code was changed in that first Edit. Ok, now I'm going to commit origin on my branch. And it's going to push those up to GitHub. So let's go take a look at those. Okay, so it immediately showed up and GitHub pace Ellsworth has recent pushes less than a minute ago. Let's do a compare and pull request. And let's take a look at these changes. So we create a pull request. And we've added two files, test.js and test.js. Great. Alright, so then let's close that poll request. By merging it. If you had a reviewer and if someone else was reviewing your code, then you wouldn't be the one to merge the request. You would add them as a reviewer by adding them as a collaborator on the project in GitHub. And then you would ask them to do this merge. And it's confirmed the merge pull request successfully merged and closed. Okay? So once that's done, you can safely delete the branch or you can keep it open and keep using that branch in the future. And there you go. So now here's the history of poll requests. And we can see each individual change made in that poll request. That is a crash course on Git and GitHub. In the next lesson, we're going to talk about some online resources that you're going to want to use just to answer basically any question that you have about JavaScript. So in that, we're going to look at W3 schools, at the Mozilla Developer Network and it StackOverflow. Alright, we'll talk to you soon. 9. Online Resources: Okay, welcome back to the course. Now we're on section two, less than seven online resources. So the purpose of this is just to show you that if you are stuck in JavaScript or you don't understand what some word means. Or you need to see an example of some of the coding actions so that you can fix a problem. Then there are tons of resources online and these are just the three biggest ones. But there are many others. And you can check tons of examples of projects that are out there. But let's get started with just these three. So W3 schools. And this is from the W3 Foundation and they're actually very central to just education on the internet in general. So they have this wonderful website, W3 And then we'll also look at the Mozilla Developer Network. And this is great because, well, the founder of Mozilla, which is the creator of the Firefox browser. That's Brendan Eich. And so he was the one that created JavaScript. So that's why this is an amazing resource for JavaScript as well. And then there's Stack Overflow. This is a wonderful website from StackExchange and it's basically an open source community of developers asking and answering each other's questions. And so there are millions questions and millions and millions of answers on all kinds of little things that people do in all programming languages, not just JavaScript. So let's take a look at these more in depth. So here is W3 schools on the intro to JavaScript. You can take a look and see there is a whole menu where you can go into each different concept in JavaScript. You can look at syntax comments, variables, numbers, strings, dates for loops, hoisting scope, arrow functions. These are all things that we're going to discuss in our course. And the differences between ES five and ES6 and JSON. And then so much more about objects and functions and classes, asynchronous coding, DOM manipulation, lots of things. Okay, so let's dig into just an example. One of the best things that I love about W3 schools and their JavaScript page is that they have a Try it Yourself example on just about every single page. They can. You can click here and you can see how JavaScript is rendered in a browser window, how it is working in the middle of an HTML document. You can see if we run this it in, you just click this button here. It changes the text from one thing to another. So onClick, it's going to, it's just executing the JavaScript right here in this button onClick. Normally, normally what you do is onclick would have a reference to a specific JavaScript file or a reference to a specific script element on the page. But this one just straight up puts the JavaScript right in there and it does document.getElementByID demo. So it's looking in this HTML for the demo tag. And it looks for this selector id equals demo. Once it finds that ID. It looks at the inner HTML. So that just means what's between the opening tag and the closing tag of this HTML element right here. And so once it finds that inner HTML it changes. It had reassigned the value to Hello JavaScripts. So that's what you see when you run that right there. It'll change this. That's the default to the content that is specified right here. Hello JavaScript. And you can see the way this works is there's a single quotes and then they'd use double-quotes to keep things separated. Okay, so that's an example of JavaScript running in a web browser. You just do it directly inside this onclick attribute of this button element in HTML. Just writing the JavaScript directly in there. You know, you could do an insanely long JavaScript file right here, just separated with semi-colons if you wanted to. All right, so that's an example and that's, that's what makes W3 schools. So helpful, is that you can look at these documentation pages for JavaScript, SQL, Python, lots of different languages. But it's very, very all-inclusive for JavaScript. And as I said, there are Try it Yourself, links just about everywhere. You can try this yourself. And then we'll open up this test. Sweet, where you can download this, you can run it, you can change anything. So if I wanted to change this from ten over nine, Try and it's going to say true, if I change this to eight over nine and run it, try it, it's going to say false because eight is not greater than nine. Okay? So there you go. So this is a test of Boolean logic. Boolean just means checking if something is true or false. Okay? So there you go. That's W3 schools. I highly recommend checking this resource out first, whenever you run into a simple question of what does a specific word do? What does this specific function do in JavaScript? So it will help you a lot with understanding variables and all the other data types that can be assigned to variables and different ways of manipulating information in JavaScript. Okay, then we move on to Mozilla and the Mozilla Developer Network. This is just resources for developers by developers. It's also open source, but it's organized by the Mozilla Foundation. So if you can go, you can look at web technologies and you can look at web references for JavaScript. And so on this page, you can reference all of these different things. Look for built-in objects, expressions, functions, classes. Look at complete beginners. So I would definitely start with javascript basics and first steps. And look at some of these things in here. And you can look at guides and can feel free to search if you want to search for something specific like you could search for. Let. So in this, the web JavaScript preference statements, let, the let statement declares a block scoped local variable, optionally initializing it to a value. And then I have an example in here. And just like in W3 schools, they have an example that you can test and run. Not every page has these examples, but many of them do. And then you can change these right in here. So I can change that one x plus two, and run it again and instead of one I get three. So yeah, it's perfect. And you can reset it. So this is a fantastic resource and likewise has references for not just JavaScript, but some other languages as well. Okay? And then the final one I want to cover today is Stack Overflow. Zoom in a little bit on this. So Stack Overflow is this great website where developers basically just ask each other questions and get answers. For the most part, the way people access questions on Stack Overflow is simply by Googling a question and then stack overflow is typically one of the top few responses. But you can just put something in here like how to reverse a string in JavaScript. Ok? And then you might need to comply with some robot query. And then there you go. Trying to reverse a string using arrays, not by classic method, but it doesn't work as expected. How to reverse a string, recursively, reverse a string in JavaScript in a for loop. So there's all kinds of different examples in questions. You'll probably find something that's close to what you're looking for. And so basically, there are lots of different answers. Typically, if you were to ask a question on here, you would get an answer fairly quickly. But before you ask any questions on Stack Overflow, definitely search for your answer and see if it's already been asked. Nine times out of ten, probably closer to 99 times out of a 100. Your question has already been asked. So you'll be able to find multiple answers for it. And you'll be able to get on your way very quickly. But all of these questions are in here because somebody asked them originally. So don't be afraid to ask if you don't see an answer. Ok. So that is Stack Overflow. And I highly recommend using it to find any kind of niche answers or more significant examples. A fourth resource, which is kind of a bonus, is simply to put in GitHub and then your question. So if you do git hub reverse string, then, and we wanna say JS, then what it'll do is it will link you to specific GitHub repos where people have tried to implement different things that might be related to your question. So we can go to this one. And there's a string reverse in JavaScript, and it just shows you somebody's actual project where they have made an attempt at something related to what you're asking about. So definitely using these for resources, W3 schools, the Mozilla Developer Network, StackOverflow, and GitHub itself. You should be able to find almost every answer that you're looking for while you're coding JavaScript. From time to time, there is something you won't be able to find. And so I highly recommend getting in touch with a developer community. So that's what these are as well. But if you could get in touch with developers, find them, you know, people that have gone through coding schools. Then you should be able to get a lot of help developers, for the most part, are very interested in helping one another. There's, there's not a competition mentality that's that you see in a lot of other industries very much so everyone wants to help each other with these projects because the more code is built, the more things people can do. And it really benefits pretty much everyone to have open source projects that we can all contribute to. So that's it for this lesson. And let's go back to the review. So that was online resources. Next, we're going to do a challenge where we're just going to do some actual JavaScript code and do a simple hello world. Okay, and we'll come back to that. 10. Coding Challenge: Hello World in JS: Okay, welcome back to lesson eight. We're going to jump right into a coding challenge. So all we're gonna do, I've set this up for you here with just a simple HTML file. And then all this does is calls the index.js script. So in your index.js file, now you can use some example too. Print out to the console, hello world. Ok. So all kinds of ways you can do this. Very simple way would be to simply console log Hello World, but you could also set hello world to a variable and then console log the variable. That's the challenge for this one is to go ahead and save it. And then if you want to test this in a browser, and here we've got that browser window open. And there's nothing printing out to the console. So you can go back to a previous video and see how we did that in one of those. Go ahead and type it out yourself here in JavaScript. And then you can let me just downsize this. Oops. So go ahead and add your JavaScript code here, and then test, printing it out here to the console so that by the end you can have something printing out to the console that just says hello world. Okay? So that would be the cheating way to do it, but do it in your index.js file. So it performs the same solution. Okay, and we'll come back to the next video for a solution. 11. Execution Context Object: Now we're on section three, coding basics. So we're going to get past the environment that we learned about in section to the history of JavaScript into a lot of actual coding now. So first things first, section three, Lesson One is about the execution context. This is more of an abstract idea. And so we're not going to learn a whole lot of code in this lesson. The whole purpose of this lesson is to understand how JavaScript runs. And really it's just the idea that whenever any code is run in JavaScript, it's run inside a specific execution context. So there are three that we'll learn about. There's the global execution context, the functional execution context, and the evil execution context. So let's take a look at those encode. So we've looked at this before. We are looking at the example from the end of our coding challenge from Section two. And we have a global execution context in this script that basically refers to anything that is set up and run at the highest level of the code. For example, this variable declaration right here, MSG for message. This is R1 at the global execution level. There is also a function which is defined globally. But then the contents of this function are inside of another code block. And these are running in a functional execution context. That just means that they are running inside the function. And the purpose of execution context is more of a memory usage. So it's just saying that this is its own script. Within a script is what functions are. So it's a block of code that's going to run inside of this other larger script. So it's like the global execution context is running. On top of that. You may have a function that runs and that it would be a second execution context. And then a third execution contexts is evil. So e val basically you can use to evaluate Javascript code and execute it. It's not recommended that we use this anymore. But you can it's not nobody's going to slap your wrist. But definitely it's something that is deprecated, mostly replaces functionality, better functionality that we use in the general context. So I would recommend not using eval. It's not necessary to run your proper code. At the, the reason it's not preferred is that because it runs in its own execution context, it runs its own set of memory. So it uses memory on your computer. And it does so with less efficiency than the global execution context and the functional execution context. So we can refresh this, and it will execute that code for us. And it will do it inside its own context. But generally it's understood that, you know, we don't prefer to use email. Okay. So we're going to go ahead and comment that out and make a note here as well. Eval is not preferred in ES six Plus, which is the current version of JavaScript. Ok. So that's pretty much it for less than one. The execution contexts we just wanted to show you the difference between the global execution context where anything happens at this top level. The functional execution contexts where anything inside a function will run in its, in its own process. And then this no longer used eval process which you can use to run code in its own context as well. Okay? How the order of these operations happen when it's running the script that will run the global context first. Then it will run any functions. And if it has any evolves, it will run those as well. Okay? That's it for less than one onto listen to, on to lesson two, we're going to be talking about single line and multiline commenting and type coercion and variable mutation. Okay. See you soon. 12. Single/Multi Line Coding: Welcome back. We're now on lesson two, section three, single line n, multiline commenting, type coercion and variable mutation. First thing we're going to talk about a single line and multi-line comments. And then we'll come back to this and talk about type coercion and variable mutation. It's best practice to use comments frequently to document your code. It's also extremely useful for commenting out code you're not sure is working properly or to test various versions. So let's take a look at our code. So as you recall from our last lesson, we looked at this example of the global execution context. So how could we document this further? How could we do a better job explaining this here and cleaning this up? Okay, first, let's make sure this is going to the right one. So one thing we could do is add a single line comment. And the way we do that is with two forward slashes. And you could also do a control forward slash. It'll toggle between Comments and not comments. And we could explain. This is the global execution context. So this is a form of documentation context. So we can explain to the reader of this code what we're trying to explain here. And then we could jump in here and say function execution context. Okay? And we could go down here. And instead of having these two lines which there really kind of sequential, let's do a multi-line comment. So the way we do multi-line comments is with a forward slash asterisk. And then we can say evil execution contexts. And then when we have multi-line comments, we don't actually need to have the original double line comments anymore. We just need to end it with one of those. And so these could be just on their own separate lines. Multi-line comments are nice, especially when you have a long paragraph that you want to document. Some people would like to do this with multi-line comments just so that all the lines are indented to the same degree, definitely up to you. But the purpose here would be two, comment something out that is multiple lines. And especially for documentation purposes, if you have a long paragraph that you'd like to comment out and break it down into multiple lines. You can certainly do so with a multi-line comment. So that's forward slash asterisk, and end it with an asterisk, forward slash. So that's how you do it. There's a very similar process that works in an HTML as well, with a multi-line comment. Okay, so that is single-line commenting and multiline commenting. And what's nice about single-line commenting is it's easy to toggle those on and off to test individual lines of code. But now let's get into the. Next section of this, which is type coercion. So let's learn about type coercion. Now the purpose of type coercion is just that JavaScript automatically converts numbers and Booleans to strings during concatenation with the plus operator and strings. That's a lot of information. Let's take that piece by piece. Okay? Javascript is going to automatically turn numbers and true or false values into text during the process of adding these pieces of information together in a line of text. Okay, so let's look at an example. Now the reason this is important to note is that we need to understand that certain pieces of data are just going to be read and understood a little bit differently depending on the way that they're used. So let's start with let. And let's just set up these three variables. Ok? And what's happening here is something called declaration. We're gonna get into that in the next lesson a little bit more. We just did a declaration of multiple variables. Now we're going to assign them some values. So let's just say this animal is a dog. And lets do is hungry. Okay? Make sure that you're using the same variable names that you've already set up. If you have a typo, it's not going to understand it. Among this do age equals 12. Ok? So as you can see, we have three variables here. Animal is hungry and age. And with this one, notice that the second word has an uppercase letter. This is called camel case. And it's just a very nice way to be able to read a variable name that has multiple words in it. So this is a standard across a lot of programming languages. There are other ways to make variables easier to read if they have multiple words, like snake case, which is like that, kebab case, which is like that. But the preferred way for variable names and JavaScript is camel, camel case like this. Okay? So we've got these three variables. We have assigned values to them. And notice that this one looks different than this one, then looks different than that one. That's because this is a string. And this is a Boolean, which means it's a true or false value. And this one is a number. So obviously this looks like a line of text. It's in quotes. This looks like a number, and this looks like it's not exactly the same as this. It's not a line of text as understood by JavaScript. It's not a string. It's a special keyword that indicates that something is true. So this type coercion right now and we're gonna get into, is to show you what happens when we automatically push these together. So let's console log. And then we use the plus to concatenate. Concatenation means we're going to glue multiple texts together. And then we don't need to put the variable in quotes. We just say the name of the variable and that's going to execute or invoke that variable. And then we do is so, so far what is that gonna say? That's gonna say myDog is, let's add age and then add years old. Now one thing I gotta make sure of is that I have spaces in here because it's not going to add the space is automatically for me. Okay? So now we've got spaces and then let's add. Okay, so we went ahead and save that and let's test it out. Mydog is 12 years old. So interesting, just to note that even though 12 as a number, it changed, it coerced. So it forced the number 12 to be understood as a different type. So the string is one type booleans and other type numbers and other type. So we can actually force a Boolean to act like a string or force a number to act like a string if we concatenate it in strings. So we could actually console log. We could do if, if is hungry, then console log, my animal is hungry. So we have this conditional expression happening right here, where we're saying, if my dog is hungry, then print out my dog is hungry. Is hungry is true. In this case, it is true. So it should print out to the console. Mydog is hungry. And there you go. And worked. My dog is 12 years old and my dog is hungry. So that's what we did to coerce the type of 12 and true to be acting as. So let's just test to see what happens. If we say our dog is hungry. It's true. He's hungry. Okay. So now we're gonna see what happens when we refresh. So because it is hungry, we made this conditional expression in this if statement and said if hungry is true, then console log. It's true, plus he's hungry. So it turned out as true right here, which is a special word. It's not a string into a string because we concatenate it with strings. Alright? So that is type coercion. Variable mutation is the simple idea that you can take this and change the value. Now if I want my age to be 13, I could do that. And that is variable mutation. And if I change is hungry to false. Now if I try to run this again, do you expect it to run a second time? Let's see. Now, it only ran once. And in fact, if I comment this one out, just so you can see, it doesn't run at all. Because now hungry is false, so it does not meet the conditional expression required to run this line of code. So that is it for our review of single line comments, multi-line comments, type coercion, and variable mutation. And we'll see you in the next video. We're gonna talk a lot more about what variables are the different versions of variables and how we can make those work. 13. Working with Variables: Okay, welcome back to lesson three. We're gonna talk about variables. So what is a variable? If you've taken math classes and especially algebra and calculus, you've probably heard of variables basically what they are ideas for just basically a shortcut that will refer to some other piece of information. In math, it's usually numbers. But in programming it could be anything, could be text, it could be a number, it could be a true or false value. It could be a set of other pieces of data which are some of those other values as well. Okay? So in this context of variable is going to be basically picture a box and you put stuff into that box, and then what you label that box. That's what the variable is. So another way to look at it is probably closer to what's accurate for JavaScript is that the variable is a shortcut. So if you think about shortcuts on your computer, that is a file that links to another file. And so that's a lot like what variables are. You're really just assigning some data to a specific variable name. And then that variable name is uses, used as the shortcut to arrive at the data that you assigned to it. In JavaScript, we have three different types of variables. We have var, which is the one that's been around since 1995. And we have let, which has been around since at least 2015 and const as well since 2015 with ES6. Now the reason we added let and const two JavaScript is that they are a lot more strict and specific. And they are block scoped as opposed to vars which are function scoped. Because let and const our block scoped and they're more specific. They are much easier to use in a development environment that is calling for strict typing and trying to prevent some common errors from happening. So we're just going to use let and cost for the rest of our time. And a rule of thumb is that you should use const until you can't, and then you should use let. The reason const and let our different is that const is a constant variable. It means once you set it for the first time and give it its first assigned value, it can no longer be edited with a different value for the same data type. Let is a little bit different. It can be reassigned, so that means you can mutate it and give it a different value. However many times you want to. Some basic rules that apply to all of these is that you can't give a variable name that starts with a number. So you can't have a variable called three or something like that. Or even have a variable that's three test or something. It also can't contain symbols except for the dollar sign and the underscore. And it can't be a reserved keyword like the word function or the word. If the word delete. These are special keywords in JavaScript that need to be used and understood only in the context of their special powers. And the best practices for naming variables is simply uses semantic naming convention. Semantics is just the study of meaning. And so a semantic naming convention means have a meaningful name for your variable. If your variable is going to store a bunch of numbers, then maybe you should call it number list. Or if your variable is storing a person's name. Maybe your variables should also be the name of that person, or it should be person one or something like that. Camel casing is a standard for variable names in JavaScript. And then there are a few other standards depending on the type of variable. One common suggestion is that if you have a constant variable, it's a constant variable that's used as a constant for your whole script that you do all caps for that variable. These rules are not iron clad. As long as you are consistent across your own scripts, then it's something that people can understand well. So to get started, if you don't have a preference, go ahead and use camelCase for your regular variables. And we'll just use camelCase for all variables in our examples. Okay? So let's take a look at some of these variables in action. Okay? So as you can see, we're starting with the example that we ended with last time. We have animal is hungry and age shows you the examples what it looks like when we console log this information. We're going to toggle word wrap so we can see these easier. And then, now let's look at another example. Okay. I'm gonna show you a few other things that we can use to manipulate our window as well. Okay, so let's add to this and add our first and last name. And for the last name, we could make it specific or we could also do a prompt. Prompt is going to tell our browser to ask us for what it's going to be. And then we'll be able to store that value in that new variable. So then we wanted to console log will be able to just say firstName, last name. Ok. So then it's going to print out here the first name and last name. Let's save that. Run this again. What is his last name? Ellsworth. That's my last name. Pace Ellsworth. Cool. So we told it what the firstName was, and then we asked the script to for a different last name. Let's try that again. Let's just do paste Jones. As you can see. It's gonna take whatever we tell it. So that's the power of programming, is some dynamic interactive information. So this is what variable mutation is, is that we're actually changing the value of this variable depending on something else. Okay, so we can change it manually in the code. We can have it change based on a userInput. And that's called mutation. And so that was simpler to an alert. We can also alert the same thing. We just do an alert with the same information. Unlike a console.log, it's not going to output this information only to the console. It's going to put it in a pop-up. Let's do submit this time. So Pace Smith going in the console because of line 22. But pay Smith showing up here in this alert because of this alert line. Ok. So now you know that prompts do a pop-up and asked for information, and alerts do pop-ups that just output information. Now to be more specific about the differences between the three, let's take a look at var and let and const. And const. So if I do a var test bar, then I can set this to any piece of data that I want. And then I can reassign it. Okay? I can also specify this without using var. So because bar is the default, if I just do test bar, then it will understand it as a VAR type. It won't understand it as a LET type. Okay? This can be declared, it can also be redesigned. So this is a declaration right here. Because I stated the variable type and the variable name. And it's an assignment. Okay, because I also assigned it this variable right here with this assignment operator equals sign and the number. This is just an assignment. So this is a reassignment, also known as a mutation. Okay? And this also is a declaration and assignment, but because it's a var, it doesn't require me to state the word bar, but unfortunately, I can also redeclare the same variable. And this isn't necessarily a problem for JavaScript. So it's a re-declaration and assignment. But the problem with this is that it's not very clean code. Unfortunately, what this means is you don't have very clean code when you reuse the same variable, re-declaring it. What you're saying is that you don't have a very semantic purpose for this variable. It's not being used in a very specific way. So instead we prefer to use lead because it does prevent those types of errors from happening. Let's go ahead and comment this out. Let's clean this up a little bit. So with let, if we were to do a test bar, see for that would be totally fine. There's a declaration and assignment there as well. But if I tried to do it again, we would run into an error. And there'll be a syntax error that test Farsi has already been declared. So this is really good. Let prevents us from reusing our variable names in ways that would cause our code to be more confusing. But we are able to very simply mutate this variable. However we like, is totally fine. Const is the one that prevents us from modifying this variable. It can be declared with the number, whatever variable we want to give to it. But notice that the color is a little bit different on here, and that's by design. In Visual Studio Code. I can't modify this now with another number. If I try and run it, it will say uncaught type error assignment to constant variable. As a result of trying to assign this to a constant variable, it shouts at me and says, no, this is a constant. Constant means it does not change. So therefore, I cannot reassign For redeclare. You can reassign, but you cannot redeclare a lead. Okay, so that is it for just to go into a little bit more depth here. If we were to set a new variable up. But we did not give it any value. And then we console log it. And then we see what happens. There is a syntax error at line 45 that we're missing an initializer in the const declaration. So that's not good. What if we turn this into a let? And it doesn't require an initial value, but it is undefined. So it's going to start out. Let's go ahead and clean this up. So it's gonna start out undefined. So as a result, it doesn't have any information to start out with. Now if we were to do null, it would have a value of null, but that value would essentially be empty. So we can change this to be null. And that's a special keyword as well. And if we do that, let's put that right here and save it. So now instead of being undefined, it is null. It still means it's empty, but we're explicitly telling it that it's empty. So at this point, this is undefined, and at this point this is null, that is it for now. So we learned about variables, we learned about the difference between BR, let n constant. And we learned that there are certain limits. You can't start variables with numbers. You can't have variable names that cane symbols other than the dollar sign and the underscore. And they can't be special reserved keywords like function if or delete, and best-practice, definitely use a variable name that is meaningful. So it's easy to read your code. And we prefer to use camel case and some other ways of reading very clearly as opposed to having everything lowercase. Okay, well, we'll come back and we'll see you next lesson. We're gonna talk about hoisting. 14. Hoisting in JavaScript: Welcome back. I'm pace Ellsworth and we're on to lesson for hoisting. Hoisting in JavaScript is this idea that all of the declarations for functions and variables are moved to the top of the scope. So basically, first things first it's going to read your code to see if there are any syntax errors or type errors. Once it does that, it's going to move everything to the top of the scope that's declared. It's going to set variables to undefined so it won't break things, but it won't return the value either until that variable is set. You can also call a function before it is declared in the code. Because the parser for JavaScript is learning the whole page and prepping everything with the variables and functions declared before anything is executed. So let's show you what an example of this looks like. For example, here, we can assign x to the value five, and that's happens before we declare it. So we can also find an element and display X is the element. And these are before x is declared. Let's show you what this looks like for variables and for functions. Alright, so let's do add equals three plus one. So it's gonna be four. And then let's declare that variable. And we want to see what happens if we console log this before it's been changed. And we also want to see what happens at various steps of the way. So let's see what happens there and then save it and run it. Okay? So first things first that we notice, we can do this with FAR and it's hoisted to the top where we console log it. And it's undefined. And then we modify it and run it again. And it is four. And then once we've declared it, it's also still four. Will this work with let? And we'll show you. Let kind of prevents this method of hosting. So it's an uncaught ReferenceError that you cannot access add before it is initialized. Because it does hoisted. It knows that it's a let and it knows that we can't access it before it's been initialized because we're using let instead of bar. So we have to get rid of that. And now we can console log it. It's undefined. But if we move this value down, then we're totally fine. Ok? So let n Constable prevent, we think for variables. Now let's look at an example of hoisting. Let's just keep this variable handy. And then just say this is bar hoisting. And let's look at an example of function hoisting. So what we're doing here is actually adding these two together, executing a function that doesn't exist yet. So let's add the function down here. Okay? So even though the function was declared later, we were able to console log it ahead of time. So if we do this, we should get four console logs. The undefined, this four and this four. And then the final one. Oops, typo console.log. There we go. So if we cancel these out or comment those out, and then try again. That's all we get. This one right here. And this we can change to any value we want to. 761 would leave us with 68. So you can hoist functions and you can hoist bars, but you cannot always let or constant. And this is totally fine just because it's understanding the definitions of the functions and the definitions of ours before it executes the rest of the code on the page. So that is bar hoisting. And that is function hoisting. Hoisting is not a feature in every programming language. And for the most part, just like we said, use constant instead of var. There's not a whole lot of benefit to using hoisting. It's usually the preference to actually declare your global variables at the beginning of your scope. Anyway. So the recommendation is just to put your variables at the beginning of your code if you can manage it. And that's it for hoisting. In the next lesson, we're gonna go over a little bit more into declaration and assignment and learn a little bit more about those. Top T2, right? 15. Declaration, and Assignment: Welcome back to section three, Lesson five, declaration and assignment. Today we're gonna be talking about variable declaration and assignment and how we use variables in JavaScript. Variable declaration is simply using var, let or Const. These special function keywords that we use to denote that we're initializing a variable and giving that variable a name. So in this situation we would use either constant or let or var. And I can talk about the differences of those. And then you just give your variable a name. Your variable cannot start with, remember it cannot start with a number. There are a few other rules. But for the most part, you want to give your variable a name that is descriptive for what you're trying to accomplish. If you want the value of this to be something related to a car. Car would be a very good name for your variable. If you wanted to have some number that you're probably going to change using some other code, then count is a great name for that variable. And you can make these whatever you want. Variable assignment is when you use the assignment operator, which is the equal sign, to give the variable a value. So you're going to start with some value, use the assignment operator and then your variable name. And that way there'll be tied together. Variable assignment can be described either as putting this data into a box with this label, or alternately thinking of the variable as a shortcut. Like on a computer, you can set a shortcut to open a file. The variable is a shortcut which is linked to this piece of data. So whenever you access the variable, it will access this piece of data in an algebraic way. So you can do them both separately or together. You can just do them by themselves where you declare and do the assignment later. Or what typically is happened is you do both at the same time. So you would say the variable keyword denote the name of the variable, use the assignment operator and then do the assignment. So let's go look at our code. Okay, so let's show you an example of how we do this variable operation. We're going to start with declarations. So I'm just going to start with a let and say let count equals 0. Okay? So alternately, I could have started with just let count. Then assign count equals 0. Let count, count equals 0. Okay? So this is a declaration and this is an assignment. Okay? If you want to do them at the same time, let's do a separate one. You could do a declaration and an assignment in the same stroke. Declaration and assignment. Okay, the declaration comes from declaring the variable by stating the variable keyword. And then the name of the variable. The assignment comes from using the assignment operator and giving it a value. So if I want, I can set that one to one. And now we have the difference between the two of them. And I can access my variables. Okay, so let's save that and see how this looks. 01. Okay, let's zoom in on our console so we can see that. Alright, so that is declaration and assignment in JavaScript. And you can do the same thing. Some other things you might need to understand is that you're gonna run into some issues if you do this with constant. So if we save that, just adds is and give it a shot. There's a problem because const is for constant variables. And that means you cannot edit them after they've been declared. You need to initialize a constant variable with a value. Okay, so you need to give this some kind of a value to start out with. And it's going to keep that same value. And you're not gonna be able to edit that value because it's a const. And the purpose of const is precisely that, is to have a variable where you set the value once and then the code will not let you reset that value later. Ok? But as you can see now we can. Another thing you can note is that you cannot access count three before it's been initialized. So let's move the console log down. Remember you can hoist with var, but you cannot hoist with const. So 10123 go and we've got them. Ok. And of course you can do the same thing with var. Now the tricky, The funny thing about Var is that you could actually just declare a variable and reassign it. And this is by default, are going to be a var. So it's the same as if you had the var keyword. So the default behavior for variables in JavaScript is VAR. And that's why we have to specify if it's a lead or a const. Ok, so we save that. Refresh. Count four is not defined. So let's do that again. Let's say that. Let's get rid of that one. Alright, so you can see where that's being defined. Okay, so console log count one, count to count three and count four. In this case, this is a var. And so it'll behave the same exact way as we had before. That's being specified as a VAR. And if you don't specify anything, it's still a var. Okay, so that is our assignment for our lesson for declaration and assignment. Now we go on to lesson six. 16. Operators: All right, welcome back to section three, less than six operators. So today we're gonna talk about how you do operations in JavaScript. So operations are basically simple methods for doing mathematical expressions or logical expressions that can help us determine how something can be true or false. Or to change some value, mutate some number or some string into a different value. So that's called Data mutation, where we're going to change the value from one number to another. And we can use some basic mathematical expressions to do that. So there are many basic JavaScript operators that arithmetic, assignment, comparison, logical and type of. And there are others as well. So we're just going to start with those and look into them. Okay. So those are the ones we're gonna take a look at that. So let's jump into examples. Ok, so now we're in our JavaScript and let's just take a basic number. Okay? Let's just take our basic number that we're going to declare into sine of count of 0. So what can we do with this count? Ok, well, we can reassign it. We can set it equal to something else. And let's just go through the standard arithmetic operations. So we can do count equals count plus one. We could also do count equals count minus one. And so that would be taking 0 to one and then taking one back to 0. We can also do multiplication. We can times that by one. We can do a division as well, divide by one. And there are some others as well. We could do remainder. This is also called modulo. So we could do a remainder operation with this. So this would be, if you divide by that number, then it will get either remainder. So one divided by two, the remainder would still be 0 OR 0 divided by two, the remainder would still be 0. Ok? And then we can do increment. So if you wanna do this, you could just do count plus plus and that's going to be the same as count equals count plus one. You can actually do this from the other perspective, you could do plus plus count. There's a minor difference between those two. So count plus plus is going to add one to it. But technically this actually in, inside of a function returns. So this is a very unique case. This is actually going to return or to change the count up by one and then it's going to return the final value in this example, it actually returns the value and then it adds the one after it returns it. So you actually don't get the same return value in either case. Okay? But both of these do count plus one, so they're the same functionally as this one right here. Okay. Alright, and then there are a few others. So we could do count equals minus count. So this would be the negative of that option. Okay? Oh, I guess corollary to this, you could do count minus, minus or minus minus count. Okay, so that goes, that does count minus one in the same exact way as this does count plus one, okay? You can also do exponents. So we can do exponents. So if we do that does count to the power of, so we can do count to the power of two. Ok? So these are the arithmetic operations. Call them right here. For arithmetic operations. Operators. But there are many more than this. So let's take a look at comparison operators next. Okay, so there are some comparison operators. Now with comparison operators, you are going to be doing some logical comparisons. You're going to find out whether something is the same as something else. Okay? So this expression is going to resolve as either true or false. We can see count equals 0. Now this is going to be a check to see whether it is true or false, okay? And that's called a boolean value. Okay? It's to find out whether it's a Boolean value. You can do the same thing, but slightly different. Here. Let's just copy the first part of this. You can do the same thing but slightly different in say, not equal to 0. And there's another, actually, sorry, this is only one exclamation. So the way that you do not equal to is exclamation equals 0. Okay? And then a strict equal also called congruent. So you do count equals, equals, equals 0. So what this will do is it will check to see that the values are the same, not just the same, but there's also a sameness in the type. So they're the same data type. So that means if this was actually the string 0, so this would actually be a string-like, as you would have in a word. It would not actually be true that it would be the strict equal to 0. Okay? You can do the strict not equal and that is with the exclamation equals. So in the case where you were to check whether they were the same data-type, if they were not the same data type or the value was different, this would be seen as true. And then the next ones you're probably more familiar with, count greater than 0 and count less than 0. Ok? And then there are a few more of those. So there's count greater than or equal to 0, and there's count less than or equal to 0. Ok? And obviously you can have any expression on the left side of this. And any expression on the right side of this. Okay, so it's a little bit simpler than simply an assignment. We're not assigning any values here, were not mutating or changing any data. All we're doing is checking to see whether or not something, a relationship between these two values is true or false. So that's the difference. There are a lot of other types of operations we could do. I'm just going to show you a few others what are called the assignment operators. So these assignment operators can kind of shortcut some of the other things that we've been looking at. So first things, first, count equals 0, that is our regular old assignment operator. If we want to do in addition assignment. So that's combining the addition operator and the assignment operator. Then we can do count plus equals one or any other number or any other value. You could do this with strings and you could use this to concatenate strings together. So that's addition assignment. So this is the same as count equals count plus one. And then you can do a subtraction. You could do count minus equals and do the same thing as count equals count minus one, as you can see up on line five. And you can do multiplication, assignment. So you could count times equals. Let's just do that for differences. And then you could do division assignment, count divided equals, and you can do remainder assignment. So same thing right here. And count equals exponentiation assignment. So you can do it just like that. So this is the same as count equals count to the power of some other number. Okay? And there are also a number of others you can look at left shift assignment, bit wise, logical assignment, and a number of different things. So feel free to look at the resources for how you can use some of these other operations. But these are the ones that you're going to be using most of the time. There are a few other logical operators that I want to cover real quick. So these kind of go along with the comparison operators. You can do. Just, one thing you could do is just say, all right, count is greater than 0. And so these are, these are what's called logical operators. Logical operators, count is greater than 0 and count is greater than three. So that means they both have to be true at the same time. Or we can say less than three. So both have to be true at the same time for this to be the case. There's a very similar operation for not and, but or, so you could say or with the pipe key. And that is the one that's just to the left of the Enter key, just above the right shift on the keyboard. And gift to, you'll have to make sure you do. You have to do a shift on that. Ok. And this means or so you're saying this one or the other one. Okay? So either of these can be true and then this would result as true. Okay? So those are the basic operators. There are a few others that you could learn. String operation is just, you know, you can concatenate using the plus, which is the addition operator. And there are a few others as well. But that is it for the basics of JavaScript operators. And we'll see you in the next lesson. 17. Operator Precedence: Welcome back to section three, lessons seven, operator precedence. So this is a little bit of a follow-up to the operators discussion we just had. But we're going to learn a little bit more about how comparators come before arithmetic, unless you use parentheses and just the general order of operations in JavaScript. So you might have learned about order of operations if you learn about mathematics and school, that parentheses would come before exponents come for multiplication, division, addition, and subtraction. And there are, you know, slightly different orders of operations in different math classes around the world. Now since there are more operations in JavaScript, we have to have in order for them so they understood in the right order. And this will also will review that X equals x times y is the same as x times equals y. So that's the arithmetic operators we learned last time. And this variable plus plus and variable minus minus is the same as plus plus variable and minus minus variable, except that in sequence, this would get returned first and then the operation would happen to increment. This would get returned first, then the operation to decrement. Likewise, this would cop to contrast. This would get added first and then the final variable, the changed variable, would get returned. This would get reduced first, decremented first, and then the variable would get returned. So let's take a look at this example and then we're actually going to put it into our code. Let's say we have variable now is 2020 or will do 2021 and then fight a year. Let's say it's 2008. Full age would be would be 15. Well, it's, let's make it 13 for our example, is full h is now minus Fido year less than or equal to the full age, true is the fido age now minus Fido year and then Whiskers age nine, just to be a different animal. And it's, let's take the average of the two. So let's add these things together and divide by two. So notice what's happening in these examples. Right here, we're using minus in, also a comparison less than or equal to, and also parenthesis. So there's three different types of operators happening here. Same thing here, three different types of operators. You've got parentheses, we have plus, and we have division. Okay? And then multiple assignments declare these variables x and y. And then you can go ahead and assign x to the value of y at the same time, you can assign the value of here. So let's just break it all down for you. Okay, let's go over and do this in our code. Ok, so we're here, we've got our blank slate. And let's start with this. And just as a review, this is the operator precedence. So you can just go to this page from the resources. This will be in the MD and web docs on Mozilla. And so this table is about halfway down. And this tells you the order that it's going to read those operations in. So it's going to start with grouping. That's the parenthesis. And then it will do any this, these ellipsis, This is for the spread operator. And then it will do also the new operation we can get into in the future. And then it will also, then it will do these right here. The logical not. Bit wise urinary type of and then it will get into the arithmetic operations, exponentiation, multiplication, division, subtraction, remainder, addition, subtraction. So this as you can tell, is in the same, the same order as a traditional math operations. And then there are others down here. You have the comparison operators for greater than equal to etcetera. And then you get into logical AND, and, OR, and some other conditionals. And then you get into the assignment operators. And you saw a few others in this table that we didn't go over. Okay, so let's get into the example. So let's start now with let now equal 2021. And then let's do let Fido year equal 2008. Okay. Unless lit full age. So this is how old the dog is going to get to 15. Okay. So as the 15 yet, if he was born in 2008, we will know. We can just we're just telling that by just looking at it. So let's actually do the math. So let's do, let is full aij equal. Now, we're putting this in parentheses minus Fido year. Okay? So we could start with that, and that would be just 2021 minus 2008, that would be 13 years. This is asking, is he the full age yet? So we're gonna say, is it true that he is less than or equal to the full age? Or I guess if we wanted to ask, is he full age, then we'd say, is that greater than or equal to the full age? And so that would be false. Okay. Let's go ahead and see if we get that correctly. Okay, so let's go ahead and console.log is full HX. Let's see what happens. Okay, false. Now if we said is the less than, the full age is not fully. Ok. And then we asked if we could look at that. That would be true. Okay. Let's double-check it. True. There we go. So all we did is we changed this greater than two or less than, greater than or equal to two, a less than or equal to. And we found out that 2021 minus 2008, which is 13, is less than 15. So since 13 is less than 15, that's true. And so true gets stored in is not full age. Okay. Just to double-check all these numbers. Here's now. Okay, let's do, let's do all of these. Okay? So let's do this will be now this will be Fido year will still be full age. And that's not full h. Okay, save that. Run it again. So you can see we have those same values here inside JavaScript. And here's what happened. 2021 minus 2008, that's 13, that is less than or equal to 15. And if we go back to our other example, is it the full age already? Is a greater than or equal to? Is 13 greater than or equal to 15? No, it's not. So that would be false. That's false. Okay. So that's what we get. Alright? So what if we go further? If we wanna go down here? And let's take these console logs out. We're just going to comment them out. Remember our little trick, you can just do a Control forward slash or command forward slash on Mac. And that way you can comment out multiple lines. Okay, now let's go further. Let's check and see let Fido's aij equal now minus Fido year. So let's just copy that down. So we don't have to use that. We can basically just use the variable. All right, let's do. Now, let's add whiskers. Whiskers is going to be a cat. And we're going to start that out at nine years old. Okay? Now let's get the average equal Fido H plus whiskers h divided by two, because that's how many items that we have. Do we get the average. So let's console log that average and see what it is. Okay, save and run that. It's 11, it's the average of 15, or rather it was 13, right? 2001 minus 282008 is 13 years. 139 averaged together. That's 11 because you take 13 plus nine, that's 2222 divided by two is 11. Okay? Now let's do another example to show you some operator precedence will get into some more math and just show you let x and y. Ok, so we've got x and y. And let's just show you that you can actually do this. Now this, you're going to see this very often out in the wild and JavaScript, but you can totally do this. You can do six plus two times five minus seven. Okay? And what is this going to be? Eight? We're going to solve for the parentheses first. So that's going to be eight. And that's going to be eight times five. So eight times five is going to be an eight times five, and then it's minus seven after that. Okay? So that's the same as 40 minus seven. And so that's going to be 33. Alright, so we just did that in our head. What if we wanna just console log x and y just so we can see what those values are. Ok. Let's just console.log x comma y. And that'll console log both of them side-by-side. Okay, let's hide that one just so we don't have to deal with Fido and whiskers again. 3333. So what it did is it did the order of operations to solve for these values here and store that in y. And then it also tied X as a shortcut to the same data that Y is tied to is a shortcut. So those variables have the same value because they use the assignment operation to say, alright, x equals y. So y equals x. Ok. And then just as a review, will just show you that if we change x equals x times five, that's the same as doing x times equals five. Alright, so we'll just show you what the console log is. After each of those cases. We know it's 33. So let's take 33 times five, that would be approximately 165. So that's the same right there when under 65. And now let's just move it down here. And let's hide these lines. Ok, so it's only going to use this and multiply that by five. And we should get 165. Still. We still get 165. And how do we know that? We're not just seeing our old code will do onetime, will do that times six. There you go. See it added another 33. Okay? So those are the same. X equals x times five and x times equals five. So let's go ahead and wrap it up, but that is operator precedence. So showing you the order of operations for JavaScript that you're gonna have to solve parentheses first, a few other things first. And then you'll do the arithmetic operations, and then you'll do the logical operations and so on from there. Okay. See you in the next video. 18. Coding Challenge: Okay, welcome back to section three, less than eight. And this is our section three challenge. So we're going to review everything that we went over in section three with this. And that's including go through them with this challenge right here. So we're going to start with these variables for the ages for Fido and whiskers. Fido age equals 12. Whiskers age equals nine. So copy those down into your code and then store the number seven as a variable named Dog Years. And store the number five is a variable named Kat years. So we have four variables you need to have in your code. Fido age 12, Whiskers, age nine, doggy or seven, cat years five. Now you're going to calculate how old Fido and whiskers are in human years. Okay, so put in a, another calculation that will do that and store those in new variables. And you can choose what names you want to give to those. And then you're going to create a Boolean to say whether or not Fido is older than whiskers. Okay? Then you're gonna print a string to the console with the Boolean variable, like is Fido older, true. Okay? And there are a couple ways you can do the string, and we showed you those in the past. So you can do string concatenation or string interpolation. And those are your challenges. Ok? So we gave you some variables, calculate what they are in human years and inhuman years, which PET is older, Fido or whiskers. And then print out to the console. If Fido is older, say is vital older true? And if it's false, then is vital older false. Okay. That's it. Good luck. And we'll see you in the next video for the solution. 19. Coding Challenge Solution: Welcome back. So now we're going to look at the solution for the section three challenge. And so we're gonna do this code together. So let's start with the variables that we said we'd start with for Fido and whiskers. Let's do Fido age equals 12. And let's do a let Fido aij equal 12. And this is Fido. And let's let whiskers h equal nine. And that's for whiskers, the cat. And now we're going to store the variable of the number seven as dog years. So let's let dog years equal equals seven. And then let's let Cat years equal five. Okay? So now we're going to calculate how old these animals are in human years. So how would we do that? So we would say Fido. Let's do let Fido human years equal fido Aij times dog years. Okay? So that would be 12 times seven. Okay, so 12 times seven, we can do our math in our head, that should be 84. Okay? And then we can let whisker, let whiskers. Human years equal Whiskers age times Cat years. Okay? Which is a smaller nine times five. So that would be 45 K. So right off the bat you can see is 84 bigger than 45? Yes. Let's create a Boolean to say whether or not Fido is older than whiskers. So let's do, let is fido older. And then we can say, let is Fido older equal to, and very simply you can just say Fido human years is greater than whiskers human ears. Ok. So this being a conditional expression, is going to tell you 84 greater than 45. Is 84 greater than 45? If so, then the answer true will be stored in is Fido older. So then all we need to do is print a string to the console with the Boolean variable like this. So we can just console.log is Fido older. And then we can just put is vital older deck. And then let's see if it worked. Oh, let's make sure we go the right lesson. Right? Is vital older, true? If we want to not be so small there, we can see how that fits on a single line. Okay, that is one solution to this challenge where you're gonna state the variables. We set the state, do the math that we said to do the math four, do the comparison we wanted to do, and then just print that to the console, just like so. And this is fine if it's lowercase, that's more accurate. Okay. We'll do that. Okay. So that is the result of the challenge and good job on section three. Next, we're gonna move on to section four, and we're gonna get into primitive datatypes and get into lots of details around how strings work, how numbers work, how symbols and null and undefined and Booleans work in much more detail. Ok, and we're also going to get into conditional operations. If else statements, switch statements, it's going to be a long section full of valuable stuff that we use every single day in JavaScript. Alright, thank you and we'll see you then. 20. Strings & Properties: And now we're at section four. We're gonna cover these primitive data types and that's strings, numbers, booleans, the basic building blocks of data that are in JavaScript. So less than one is strings and properties, string primitives. This is your basic, your basic text can use single quotes or double quotes. You can't mix and match. So you can't start with a single quotes and then end with a double quote or start with a double quote and end with a single quote. Now one word of caution, string primitives and string objects are not the same. So there's a way that you can actually make a string object, which is similar to the way you use strings in other programming languages with the special keyword string. And then you put the word that you want to put in as a string in the parentheses. So that's using the new keyword as well. So I'm focused just on the primitive data types where if you just put something in between quotes, it will automatically be interpreted as a string in JavaScript. So let's take a look and see what that looks like. Okay, so now let's take a look at some strings. So we're just gonna make some string variables here. We're going to let string one, string two, string three, string one. We're going to just say that is equal to, so we're going to assign a value to it. And we're gonna say, hi, string two. We're going to assign, this time we're gonna use double quotes just to show you that you can use either. We're going to say, I'm new here. And then with our third string, will assign my name. And let's do a little ten front. My name is paste. Ok. So here are our three strings. And basically this is how they work. We can do anything we want to with them. There are a number of different things we can do with strings. And I'm going to go over those in the next lesson. But the basics of strings here basically you can assign them to variables and you can also get their length if you want to. But let's just show you what happens when we use these. So we can console log strings very easily. We can just do these one at a time or all at once. And again, it doesn't matter what your variables are named, but name them something appropriate to what the content is. So in this case, it's appropriate that I call them string because that's when I'm using. So let's go ahead and run this. Hi, I'm new here. My name is pace. I just printed them off one after the other. So it printed them all as the same line of text, basically the same as stringing them all together. And so that's why they call it a string. You're just making a sequence of characters. And there's a property that you can access on strings, which is dot length. So string three dot length would be the length of that string, which is the number of characters in that string. So let's save that and test it. I would expect to get 123456789101112131415161717 is how many characters that we have in there it counts empty spaces as well. Let's go and refresh and see if that's right. Yep, 17. So that's how many characters we have in the string. Ok, so that's our first lesson on strings for JavaScript. And we'll see you in the next one. 21. String Manipulation: Welcome back to section four. Now we're going to cover less than two string manipulation. So in the last lesson, we learned just what strings are there, basically these lines of text in quotes, single or double quotes. And now we're going to learn some ways we can mess with these strings, mess with this text, and there are a number of ways to do that. So one is concatenating strings, and there are a number of ways to concatenate. Actually, you can use the concat method. You can use the plus sign. There's also a way to do it with string interpolation. But basically you can do multiline strings and that's totally fine. And you can do template literals and expression interpolation. So we're gonna look at all of that over here in javascript. Here's the example right here. So string concatenation. Let's say if we started with a variable, My name is that's one string. We can concatenate with the plus sign and do an empty string there. So just a space. Concatenate again our final word, Fido. So if we do that separately, we can do My name is and then string plus equals. So that's using the assignment operator, the addition assignment operator to do equals string plus that space and then string equals string plus Fido. These accomplished the same thing. You can also, if you have two separate strings, you can concatenate multiple values using the concat method. And the method is basically a function, so a, a block of code that you can run on a specific object. And this is a, this is a specific object right here. We're going to concatenate these values and add those two string one. Okay? So that's going to accomplish the same thing there. And then you can also do multiline strings. So this is where your console logging multiple lines using the new line character to indicate a new line. This backslash is useful to escape various characters for special operations like this where you want to have a new line. And then here you can do the same thing. If you use these special back ticks right here. It's like this special quote. And you're gonna find this at the top left corner of your keyboard is below the escape key. You can use this for string interpolation. You can also use it for multi-line strings without having to use the newline character and then template literals. What this means is that you can't do interpolation. Basically these back ticks indicate a template. And you can interpolation means you are going to reference some variable or other nickname property like a, like a parameter or an object's property directly inside the string. And you're going to use the special syntax, dollar sign. Curly braces, and then the name of the shortcut value, like the variable. And then you end it with a curly braces right there. And that's the syntax for interpolating. So it's to put something inside of the string. Okay, now let's take a look at all that in JavaScript. So let's start again with string concatenation. So let's just look at a string concatenation. Now concatenation really, what this refers to is just piecing multiple strings together. And there are a few different ways we can do this. So let's just start with stream one. And we can say my dog's name is bones. That's the name of my dog. Right? My dog's name is bones. Now to test this, we could go ahead and console log and make sure that we're getting what we expect. So let's just constant log string1 and save, and then run it. My dog's name is bones. It concatenate it the string together using the addition symbol right there. Let's try to do the same exact thing, but let's do it in a little bit different way with string too. So let's start with again, my dog's name. And now we're gonna do something a little bit different. We're going to modify string two. We're going to manipulate it this way. So after we've previously assigned it, we're just going to do a plus equals. And now in this one we're going to see is. And then we can do that again. But this time we're gonna do the name of the dog at the end. So you can see the structure is very similar, okay? And this plus equals is the same as saying string two equals, string two plus and then my string. Okay? You can see those are the same. That's why we use, use this addition assignment operator to contract that process. Because we don't want to have to do the repetition. Don't repeat yourself. That's one of the principles in programming. Don't repeat yourself DRY. And we call that the dry method. Okay? So if we do that, we tried to console log that fact. We can comment that one out. Actually, let's keep that into C. You can see there are two at the same time. Save that and run it. So you get the same thing twice. This one right here and this one right here, that both accomplishing the same thing, gluing these together. And now we're going to let string three equal my dog's name. Okay, and now we're going to do let string for equal string three, dot concat, and doesn't have to be string four. Or we could do string three again, overdue dot concat is fit. And now we'll test that doing string for this time because that's the final product. My dog's name is bones. Okay. Again, we could have just done the string three, would have been the same. You can reassign more values, 2p, string 3s, o string that he's already been declared. So we don't need the let twice. There we go. Okay, so that's string concatenation, that's just gluing strings together. Now let's take a look at multiline strings. Strings. What that means is the string is going to go down onto multiple lines. So let's just console log first line. And now we're doing the special newline character, as you can see it colored at differently inside my editor. And now we actually don't need to do anything else. We don't need to put this on multiple lines in our code, but it's useful just to know what we're, what we're trying to do. So we could say second line two. And that's it. So if we do that and run it, it puts it on two separate lines. So kind of as a nice note for ourselves, we can just remember that that's what we're trying to do. And we can put those on two separate lines. How many spaces before doesn't matter. These spaces don't mean anything. So that'll work just fine. Now we can do a similar thing with console log. But this time we're going to use our special back ticks. So in this case, the formatting does mattered. So we're going to say first-line here. And we're going to do a new line, and then do a second line. And here you go. 12. Ok. So there you go. So because we're using these special back ticks, it's going to remember the formatting that we've put in place. So it's going to understand or parse the string in a slightly different way. Alright, but that's how the two ways you can do multiline strings. So now let's start a little bit more about template literals and interpolation. Interpolation is another way you can use. You can put multiple pieces of data together in strings. Okay, for example, we're going to do let string for equal bones. So I'm going to keep that handy. It's just going to be sitting right there. And now we'll do a let string five equal. We're going to use these back ticks. And we're gonna do my dog's name is. And then we use our special dollar sign, curly braces, string four. And then we end it with the back tick. Now if we console log that a string five and see what happens. When we should get is the same line again, this time using interpolation. So what happened here is, is starts reading. It says, sees this and says, oh, I'm gonna do some special formatting in here. If I multiline, then I'll multiline. But if I see anything with this syntax, a dollar sign, and in curly braces, I'm going to try to reference that information from somewhere previous in my code. So there you go. It sees that there's a string for and there's an assigned value to that. And so it takes that assigned value and puts it right in this spot. Okay? And that's what happens when you console log the string. It goes and sees, oh, what's this string defined as? What goes and finds out, finds out that it requires another reference and then it goes and grabs that, puts those together, and then you're done. So that is string manipulation. We used one method right here, but there are many string methods that you can look at. Their, they're all here in this one resource. If you go to the MDM docs, you can go and see string. Talks all about creating strings and various different escaped notation that you can use inside strings. And then multi, multiple lines strings. And then these different methods you can use. You can find a certain character at a specific index. You can concatenate. You can find out if a string includes a certain search string, find out if it ends with certain values, et cetera, lots of different ways you can modify information in strings, find information inside of strings. And so I recommend you try a lot of these different string methods in your practice. Ok, we will see in the next video. 22. Numbers: Now we're on section four, less than three. And we're going to talk about numbers. Numbers are a very basic datatype in JavaScript. Lots of other programming languages use other data types to represent different numbers. And we're talking about numbers like 0 to infinity and negative numbers to some of the other data types in other languages or decimals and floats, int 32 or 64. These are 32-bit numbers, et cetera. And so these are used to represent things like 37 or negative 9.25 or anything else. Now, when we start with strings, we can't put a number inside of a string and it'll treat it as a string. If it is, if it can be interpreted as a number, we can use the number method. And then turn that string into a number, and then it just becomes a number. So we can turn anything into a number if it, if it will work. And numbers can be written as decimal, binary, octal, or hexadecimal, very different ways. And these represent different bases. If you want to understand what that means as far as numbers go, binary is base two. So numbers that are only 0 or one. Octal is base eight. And that's related to hexadecimal, which is base 16. And notice those are multiple powers of two. So 2 times 2 is 4, 4 times 2 is 8. 8 times 2 is 16. Hexadecimal is actually used a lot in programming. It's the basis for how we use a lot of our characters and special characters in language. So when you type a character in on the computer or an emoji or something, those usually have a hexadecimal reference that is interpreted by the computer as something that's part of a kind of this common lexicon that computers use called Unicode. So let's take a look at that and little bit more about numbers in code. Okay, So we're here at less than three. Let's clear this out. So numbers look like this. That's a number. This is a number right here. We could do some math and we can get a resulting number. Okay? So let's go ahead and see what that console log does when we look at num three. Okay? It does 3.333 repeating and 5. Interestingly enough, JavaScript can do some weird things at lowest digits, at far digits. And then there'll be some interesting rounding happening. And that has to do with the behavior of floats. And so basically, it's treating portions of the number as fractions. And as a result, it, you can get some weird behavior, very, very tiny numbers in JavaScript. Okay? But these are various numbers. If we wanted to have a string, we can have a string like this. Okay, Let's just say string of five. And that's going to be interpreted as a string. Now if we want to print that out, take a look at what that looks like. As you can see, it doesn't treat it the same way. It treats it as a string. But if we change this to a number first and then print it out, it turns it into a number. If we turn it into a number and then print it out, it is interpreted now as a number. Okay? Alright, so now if you wanted to turn this back into a string, you could. And there are few. The simple way to do that is to go string. String equals string stream. That turns it back into a string. Another way that you can turn this into a number is by doing parse int. So you could just do parse Int. And what that's going to do is it's going to actually look for the numbers at the beginning of the string and turn that into a number. Let's save that. Now that's a number. And if we started with 55, 67, Fido, this would interpret this as 55, 67 as the number. It's going to find the number at the beginning and then stop there. Interesting HA, whereas if you tried to do this with number, it would say, Hey, that whole thing's not a number. That's not a number. Nan. Okay. You can learn a little bit more about numbers on the MDM docs will have the resources in the project. And we'll see you in the next video. 23. Number Manipulation: Hello and welcome back to section for lesson four, number manipulation. So what we're going to talk about here of as a follow-up to the previous lesson which was on just numbers and how those are formatted. We're gonna talk about a number of different methods you can chain onto the number library in order to verify numbers limit. Okay, so let's take a look at this in code. First things first, we saw that we could take a string. So let's take a string like now. If we try to turn this into a number, let's just see what happens. Okay? And it returns as not a number, but it has been modified by the number class. So let's try something else. Let's try. Let's try to turn 567 into a number. And we can see that that turns into a number just fine. And now we're going to try is a number is NaN. So what this checks is, if this thing has been turned into a number, is it not a number? Ok. So basically we're just checking to see if this is not a number. Ok, returns a boolean value indicates whether the value is a reserved value, not a number. Unlike the global. This won't forcefully convert it to a number. So there's a difference here, basically, I'll show you the difference. So that checks and says this is false. Okay. It's it's not a number, not a number. But if we did go here and get rid of this number class and just use the default is not a number. And save that. You could see that returns as true, okay? Now if we were to do that here, this would also return as falls for this second value. Because it is a number. And if we wanted to return true, then we could do something like we could do something like let string equal. And then we could number that string first. And then we could check whether that is not a number there. So now this second value here, it's going to verify that this is not a number. So it has been modified by the number class and it's still a string, George. So it's not a number. Ok? It's converted, it forcefully converted it to a number type, but it can't parse this as a number value. So it is the reserved value, not a number at this point. Okay. We were just to console log what that is. You could see it. Not a number. Ok? So if it returns with this value not a number, then number is NaN will return as true. Okay, so let's look at a number of other methods that we're gonna do is finite. Okay? So let's start with, let's start with console log. What we're gonna do is finite. Now, finite means it just has an N does not like pi. Pi doesn't have an end. It's an irrational number that goes on forever. This also, let's just see what happens. Now, ten divided by three is interesting because three is not a factor of ten. If you divide ten by three, you get 3.33333 repeating. So let's see what it says. That returns as a finite value. So unlike the global is fine. It also, it doesn't forcibly convert the parameter to a number. But because it understands that this actually is a rounded number, because of the numbers work in JavaScript. If you print this out, it's going to round it. So it's not going to misunderstand that. And it's going to treat it as a finite number, such as two senior aware of that. Now we can check if this is an integer and it should fail this one. An integer means it has no decimal values, so it has no period after the number and no trailing digits after a period. So if we tried this one, we get false, understandably because ten divided by three is a decimal number. So it'd be like, it'd be the same as me just doing three. 0.33c, 3.3.3, 3.3.5. Or to be more specific, if you were to round it with proper grounding, you'd be just that. Okay. This is not an integer, this is a decimal value, and so it shows up as such. And you can also develop what is called a safe integer value. And check is safe integer. And that's going to check for any value less than negative, this number, N greater than positive of that number. So what that's going to do, the reason for that is the number primitive class right here for primitive numbers in JavaScript just doesn't support double precision or rounding to numbers outside of this range right here. So you could check this number and see, hey, is this safe? It is, but if you go one higher, isn't. Ok. So any number in that range, and this corresponds with the value two to the 53rd power minus one. So two to the third power is not a safe integer because it is higher than that double precision number two to the 53rd power, okay, in bits that would be one higher than or one digit more. In binary, then the value represented by two to the 53rd. Okay? So that will show you what is a safe integer if you want to use numbers bigger than this, which you might want to do at some point, which is about nine quadrillion. So if you wanted to show this in with commas, you could do this. Obviously, this won't be understood by the, by the code, but that's what the number would look like with commas and type. If you want to use numbers bigger than that, then there is a class you can use big int. And that's, that's something that will allow you to use numbers bigger than nine quadrillion. Okay? A couple of the things you can do. You can do parse float and parse int. So if we parse int with, we can say 99 balloons. And we'll do the same thing here. So if you try with that, it's going to grab whatever numbers are at the beginning of that string and convert that string into a number. So it's just going to use whatever it can find. Its going to parse it, which means it's going to read through it and find the float, which is one type of a number. It's going to read through it and find the integer, and then stop. Okay? So this is very similar. This is basically the same as you can use this without the number class. We can just use it globally like this. And do the same thing. And it's just going to grab the numbers from the beginning of the string and go from there. But the difference here is that between these two is that parse float will grab decimal values. Okay? But parse and as you can see, will not grab decimal values. So you get 99.45 out of 99.45 balloons and 99 out of 99.45 balloons with parse int, because this is an integer and integer, as I said, is a rounded number with no decimal values. A float is, can be a decimal value with, with multiple decimals. Okay? And that's it for number methods. There are a number of other ones you can take a look at. So check the resources. We'll see you in the next lesson. 24. Null and Undefined: Welcome back. This is lesson five on symbol datatypes. And these are relatively new primitive datatype that was added in 2015 to JavaScript, invoking the function symbol, then this is a specific class, produces an anonymous unique value. So this is a very, very interesting datatype. Basically, you're going to use this to create a specific ID that you can use for any type of unique value purpose. Okay, so let's take a look at this type of code here and see what it does. We're gonna create symbol one and sample two. Notice that they're tied to the same type of information, ok, the same description right here inside the quotes. And otherwise these look exactly the same, but they're not going to be the same value. Because what symbol does is create a unique value for each time. So we'll show you what that looks like. Ok. So we'll just let symbol one equal symbol. And we're gonna give this a description. And the description is totally optional. It's not necessary at all. We're gonna use these descriptions just for the purpose of showing you what's going on here. So we wanted to see whether or not these are the same. So we'll do a console.log and we'll say is exactly the same as cm2. Okay? Now let's just see what happens. It's going to return false. Interesting. Okay? And obviously what that means is if we check for the opposite, it's going to return true. Or they even partially the same note. Okay? Now let's see if we can actually see what this value shows. Ok, when you console log this, it's not going to give you necessarily what you expect, okay? It's gonna give you this special symbol value. And obviously if we do the same thing here, it's going to look the same, but these are actually separate values. Remember, we check to see if they were the same and they're not. So if we want to actually get them as the same value, then we'd have to convert them to strings. So if we convert both of them to strings, we can do like this and then check it. Those are true because those both would show up as just symbols, symbol like that. But what's nice about these is they create these unique values just like that. And if you want it to access just the description, you could. By doing this, you could console log just the description. And you get just the value that's there in the description. So as you can see, I could change it and it would change accordingly. Okay. So let's change that back. Just for ease of understanding this, let's keep it that way. And then run that again. You can see symbols M, Okay? So symbols are not used a lot, but you can use them as IDs in databases, as properties of objects. And we'll get into objects x2, okay? And that's it for today. 25. Null and Undefined: Welcome back to lesson six, null and undefined. This means null is it intentionally points to a nonexistent or invalid object address. Think of a room that explicitly has been marked as empty. And then undefined is a little bit different. That's assigned to a variable that was just created, just declared, but no value has been assigned to it yet. So it's not explicitly empty. It, it's as if there is no room there. So it's kind of the difference between having a room that's, you know, as empty and having a room that you haven't visited yet so you don't know what's in it. So we're going to look at these in code and learn a little bit more about them. Okay, so here we are, and there's not a ton to get into right here. But basically we can just do some sample variables. And let's just say we declare this variable, variable one. Now if we just go ahead and console log, then we're not going to get a specific value. What we are going to get though, is this value undefined. And it's not necessarily a problem that a variable is undefined. It's okay if it doesn't have a value. Certain variable types, it's not okay if they don't have a value. So const, for example, it's going to shout at you, hey, since you're not going to be able to edit this value later, you need to initialize some value in this declaration. So you're not gonna find const variables that are undefined. But we could set this to null. And if we want it to, we totally could and give it a null value. So that means it's explicitly empty. What's fantastic about this is now we have a variable that is always going to be null. Very interesting. So since we can't reassign it to any other thing, right? Remember how const, we can't give this a separate value later because it will catch us and be like, hey, you cannot assign to a constant, variable, stop that. So we're better off just like that. And we have null and undefined. So in computer science and null value is it represents a reference that points intentionally to a nonexistent or invalid address. So that varies among languages. But basically here we're just saying this has null value, which if you interpret this as a true or false value, it is false. Okay, it's fairly primitive. But as far as it being a primitive datatype like numbers and strings. But there are other things that you can do with this involving objects, and we'll learn about those later as well. Now, undefined, if you recall from this other example. And we can't do a const, let's do a let. So if we just set this up and just give it no value, we just declared it, but we did not assign anything. It is undefined. Okay? So this comes in handy when we need to calculate the variable value later or if the value is dependent on the user's input. So we can just create a variable now and use it later. So say later on we want to reset the value to some user information. So we'll just, we'll just prompt for, for some value. And then we say, hey, and then we could console log that as well at the end. So let's say Hey, and there you go. The prompt spat out the answer to that prompt. Prompt is a really cool thing that you can. As you can see, you can use it to just make a little quiz question anywhere you want. Prompts are used a lot for authentication on websites. Hey, you need to login, put your password and things like that. Just built right into JavaScript is very basic, basic function, as you can see, ok, that is it for null and undefined. And we will come back to you soon. 26. Boolean Logic & Control Flow: Alright, welcome back. Run less than seven Boolean logic. Boolean is named after a man, George Boole. He was an old mathematician in the 18 hundreds. And he really kind of defined the terms that we have for logic. And that's used a lot in mathematics and use fantastically in programming. It's used all over the place and programming. Basically he invented and worked on very primitive gum computers and algebraic problems, boolean logic. So a couple of different operators we have and, and that's, and that means both of the values to the left and right of this operator have to be true. Or means if one of the values or both to the left and right of this are true, it will, it will continue. The exclamation mark is usually is paired with other operators. So like exclamation equals would be not equals, as you can see here, are not exactly equal to and then you have these others as well. These are other comparison operators this is similar to or congruent to are the exactly the same as? This is the same value and datatype. This is less than and less than or equal to the left caret, right is red. Care is greater than, greater than or equal to. The value on the left is greater than the value on the right. And then you have some bitwise operators. We can look at these as well. We don't use bitwise operators very often in JavaScript, but they're, they operate on a bit string and bit array or binary numeral at the level of individual bits. So it's kind of what computer programming does at a more basic level. And you can perform those on binary numbers as well to, okay, so let's take a look at some values in code. All right, so now in JavaScript, let's just focus on some of the ones we use most, most often. So let's just say let equation five is greater than two. And so we could just check to see is this true. So we could just console logging the variable itself equation. And then we'll see, hey, is five greater than two? And the answer is yes, it is true. Now, if we check, is it less than two? That's false. Five is not less than two. Is it less than or equal to two? No, that's false. Is it less than or equal to five? Yes, five is less than or equal to five because five is equal to five. Is five less than five? No, that's false. So you can see, you could use these comparison operators to check is something less than or less than or equal to something. And then you can use five is greater than, 22 is greater than one. Okay, so let's just see how this goes. Let's just read this right now. True. Ok, so five is greater than two, that's true, too, is greater than one. That's true also, okay, these are both true, and this says both have to be true. And so this is true and this is true. So if we change this one to four and we check it again, it's false because two is not greater than four. So since this side is true, this side is false. It's true and false, which means the total is false. There's any false value in there, then the whole thing is false. Okay? Because that's the final value that's being checked or checking. Is this true? Yes. And is this true note. Okay. So are they both true? No, that's the real question. Now, if we change this to or then one of them being true is ok. As you can see, that's true. What if we make them both false? Okay, we make them both false. Then, boom, neither one is false or is asking, is at least one of these true. That's what war is asking. Okay? So that's how you get and, and, or there's also not. We can say this. Five equals five. Ok. Is that true? Yes, five is equal to five. You can also do ten divided by two. Is five exactly the same as ten divided by two? Yes, because ten divided by two is five. What if we say is not equal to? Let's check that. No, that's false. Five is not, not equal to five. So let's try again with, let's change this value to four. Is four different than ten divided by two? Yes, the answer is true. There you go. So that's how you can use equals to say is the same as not equals. The not symbol to say is not the same as. Ok. Just be aware, obviously, you might have gotten a little tripped up when I was saying, hey, is this not the same as the other thing? And you say yes or no. Humans, especially in English, have a hard time asking and answering questions which involve not like Is this not the same? What are you supposed to say? Yes or no? So we keep it simple and JavaScript, true or false, but still beware of using, not just so you don't get confused with what you need to do. Okay? Alright, so that is the basics of Boolean logic in JavaScript. And we'll catch you in the next video. 27. Truthy/Falsy values and Equality Operators: Welcome back to lesson eight, truthy and falsey values and equality operators. So we looked at a quality for comparison for resolving true and false last time. But now we're going to bring in not just true and false, but truthy and falsey values. So truthy and falsey values will resolve to true or false. And there are some things that if you just, if the value is one of these things, and empty string, or the number 0, or the values null or undefined, or the value not a number. So it's a number type, but it's trying to understand it as a number, but the value is actually not, not a number that it can represent v's. If you just check to see their value, as far as Boolean logic, it's going to compute their value as false, okay? Obviously if you printed something out that has this as its value, it would just give you this as the return. But if you're going to do a comparison between two things, it's going to understand them in their truthy value as falsey. Okay? And then there are some things here like five being equal to five. This one is a string and this one is a number. P. Check both of them with this equals. It's going to say, hey, these are the same value even though they're not the same data type. If I can pair them as the same value, then yes, that's true. If you say Are they exactly the same, then no, it's going to be like this one is a string and that one's a number. You can't convince people to do the exact same thing, okay? Okay, so let's play with this in JavaScript a little bit. Let's just take, let's just take this number and set it to 59. Okay. And let's do a little. If, if so, we're checking if this value and when you do if whatever is in parentheses will be evaluated for its true or false value. And so is 59 true? Well, yeah, it's truthy because it's not 00 is falsey, which means it will be interpreted by a Boolean logic Checker as false, but any other number is going to be resolved as true. Okay? So let's choose console log. Variable is defined. And then we can do an else. And then check the value here. If it's not true, then let's just set this message that we're gonna get. Variable has not been defined. Okay? Let's be extra clear about that. Alright, so if taking this, let's go ahead and print that out. Variable is defined. Why? Because we gave it a value. Now, what if we gave it 0? We initialize it with 0. What's going to happen now? Variable has not been defined loops, we gotta typo here. Variable has not been defined. Interesting. So it's technically defined. So we could clarify, this has a false for falsy value. Now obviously we can give things a true value directly. So we could just say, hey, it's true. Or we could just say it's false. But if we give it any one of these five things, 0 or null, or undefined, so we just don't define it. We give it an empty string, has a true value because the string is not empty. See, there are two characters in here. So the spaces means something. Even one space means something. But make it a completely empty spearing with nothing in between those quotes. And it's false, Interesting. Or we could do it as, you know, some, some value that's not a number. I check that, that's false. But if we do some number, that's actually a number, that's true. Okay? So then we just tested for truthy and falsey values. And we try to few different iterations to show you how those work. Okay? And again with the equality operator is just to recap those. If we wanted to give you the example here, let's just say this one is 59, okay? And then we can use if and else statements to say, okay, is this exactly equal to 59? And then we can say, okay, yes, variable has a value of 59. And then this one does not have a value of 59. Okay? It has a value of 59. What if we change this to a string called 59? That won't work? It does not have a value of 59 because it's the wrong datatype. Strings are not numbers, but they can be interpreted as numbers if you use this comparison operator, okay, so this is similarity operator and we check it. The value inside the quotes is the same as the value right here for the number. So it will interpret it that way. Okay? So that's truthy and falsey values and a comparison operator for equality. This is checks for the same value and data type, and this is just for the same value only. Alright. See you next video. 28. If/Else Statements, nesting if/else: Welcome back round lesson nine, if else statements. So I showed you a little sneak peek of these in the last video. And you're actually going to be using these types of condition checks, lots and lots in JavaScript, and that's what's called Control Flow. So control-flow is when you're checking if one thing is true, then cool. Execute one set of code. If it's not true, then execute a different set of code. So you can use multiple checks. So you can say if the is, it just cascades like a waterfall. It's going to check this one if that's false, it'll check that one. If that's Paul's, it'll check that one. If that's false, it'll check everything else. Basically it'll just go to the final set value. So you can always set these up so there is no code that gets run if you just choose to do an if statement or just if and else if then it won't actually execute the else. But if you have the else in there, it will always execute this if everything else is false. So the else is when it does not meet the condition. Else if is when you want to check for a second or third or fourth, et cetera, condition. Okay, so let's take a look and play with this. So let's just set in initial value here. Let's do pet name, Fido. Okay? And let's give this mood. Let's give our Fido a mood of happy. Great. Fido is very happy. That is a permanent mood because we use the const. So let's go ahead and check to see what the mood is. Is the mood exactly this string right here, these five characters in succession, and no other, Nothing Else. If so, then let's console log, woo. Let's console log. You. Name is a mood, is pet, name is totally a mood. Dogs. Ooh. Alright, Let's try that out. So if we just do the if by itself, then it's going to check it. If it's true, it'll execute this line of code. So you can just use if, if's just by themselves, nothing else. Whenever you wanna just, hey, make a certain line of code conditional, totally cool. And there are other ways to do that as well. Okay, but what if we gave us an else condition? Okay? This is just saying if the, if this value up here wasn't true, then let's just say something else. Let's say let's say. We'll hopefully be happy suit. Okay, so that's totally fine. And obviously this is still true. But if we change this to sad, all, poor dog, Fido will hopefully be happy saying, well, now with this constant one, let's change that to a let and maybe we can change it. Now let's give this a, another value. Let's give it a value of, let is hungry. Oops. Is hungry. True? So as Doug was hungry, let's check if it's hungry. So let's just sometimes easier just to copy and paste. Or actually not, not hungry as a, as a string. Let's just, all we have to check is, is hungry. Remember truthy and falsey values? Well, we don't have to do with truthiness obviously because the value here is explicitly true. So if that is true, then console log, let's say is hungry. Or else we'll hopefully E2. Okay? All right, so if it's not hungry and hopefully it's C and let's just see. Fido's hungry. If we make that false. Hopefully eats in C. So depending on the conditional expression, if this conditional expression is true, the one inside these parentheses, then it will execute this line of code. So is, is hungry true? No, is hungry is false. Is the mood happy? Note, the mood is sad. Okay? So if this doesn't trigger, then it will move on to the else condition if one exists. Let's look at another example to let's do weight equals 45. And let's do this, do to animals that Sue Fido's weight. And then let's do whiskers. And it's, it's an cats whiskers. Whiskers. And let's say, yeah, that's good number. So we can use comparison operators like we had in one of the previous lessons to see if one is bigger than the other. So let's do Fido weight greater than, keep that in parentheses, greater than whiskers weight. So if that's the case, then we can console log Fido ways, more ways than whiskers. Okay? And then we could do else if then we could check for similar condition. But this time we're going to check for if they're exactly the same weight. Ok? So if they have the same weight, then let's do another value and say they weigh the same. Fido and whiskers weigh the same amount. We see this one. And then we'll have an else condition. So logically, if Fido doesn't weigh more than whiskers and they don't weigh the same, then what is the only possible other condition? The only other logical condition that could, that could happen, assuming obviously these both exist, which in our case they do, is that whiskers weighs more than Fido. Okay? So what if Fido lost a ton of weight? And then whiskers gained a ton a week. If that were to happen, then whiskers would weigh more than fido. If we change our values back, then, Fido weighs more than whiskers. And if for some reason we've got a real chunky whiskers, then they would weigh the same. Okay? So there you go. Using comparison operators if, else, if and else to do comparisons and decide which line of code we want to. Well, we'll find out. It'll tell us, Hey, this line of code is the one that's true. This line of code is the only one that's true, etcetera. Ok. So that is if else comparison operators and Javascript control flow. And we're going to learn more about control flow with other ways of comparing between multiple things in another video. Thank you. 29. Ternary Operator: Okay, welcome back. Now we're on less than ten and we're gonna learn about the ternary operator. This is extremely similar to an if and else short version. Ok, so this is shorthand expression that's going to be the same as an if and else. What's really nice is how concise the language is. All you're basically going to do is do the first condition that you're gonna check for. Just the same as if you did if fruit is mango. Return that. Else, return that. This is going to save you having to say return. Save you having to say else. And it's just going to put it all into this question mark is really written out as a question. Is fruit the same as mango? Hmm? If true, it will return this value. And if false, it'll return the value after the colon. Okay? So it uses a question mark after the conditional statement and a colon after the first return if the condition is met. So let's take a look at that in code. All right, so why don't we start with this example right here. And let's bring this over to less than ten. Alright? So we have Fido is a, will be happy soon. Let's make him happy again. Fido is a Happy Dog who, Okay. So how would we convert this into a ternary operation so that we can simplify this? Well, all we would have to do is take the conditional expression right here. And then we just put a question mark. In fact, what we could do is just console.log, this whole thing so we can use return values instead. Colon. Okay? And I'm thinking we're probably missing some, oh, we're missing the end parentheses on the console log. Alright, so all of that fit right there. And let's simplify this just so we can read this a little bit cleaner. Happy. And then we'll just see. Okay. So it's really this simple. Ok. This is the same as this mood. Happy. Is it true? Yes, happy if not, not happy. And you'll see them both change. Not happy. Happy. Very good. Okay. So that's the ternary operator. Ternary operator. And it basically replaces simple if else statements and really cleans it up as you can tell. So here's where your comparison is going to be. Here's what your true return is going to be in. Here's what your false return is going to be. Okay? And that's it for the ternary operator. 30. Switch Statements: Welcome back. This is lesson 11, switch statements. So switch statements are very similar to if-else statements in that you are going to perform different actions based on different conditions, but they're much more flexible. The break keyword will stop the code when the condition is met. So similar to an if else middle one condition can happen. But the difference here is that with case, you're allowed to do multiple conditions at the same time. So if it's strawberry or Raspberry, then it will perform this section of code. If it's blueberry, this section, banana, this section. And then a switch statement needs a default at the end, which is like the else in an if-else that will execute a block of code if the conditions are not met. Okay, so let's take a look at it. He and JavaScript. All right, so let's start with, start with a compost. Fruit is strawberry. And let's do our switch case, the switch fruit. So it's going to check the value that set for fruit. And then in different cases, when we say in English that's not the case. We're talking about different scenarios. So in the case where it's strawberry, it will move on. And in the case where it's raspberry, it will execute this block of code here. Roots is red. And then we have to break. I'm going to jump out of the entire logic at that point. And then we go to case where blueberry. Instead we're gonna see blue. And then we're going to see a case where banana, we see a banana is yellow. And then we have to end it with the default. And inside my default, I can say I can say I don't know. I don't know what the color of I don't know what color the something is. Let's come up with another one. Okay. So if this the case, let's just test it out, see what happens. Strawberries read. Our raspberry is read. Blueberry is blue. The nana is yellow. And if I put it in some other thing like Apple, I don't know what color the apple is. Awesome. So this is exactly what we wanted to see. As you can see, this is a little bit more flexible than an if statement. It's actually a preferred in variety of cases when you're developing in JavaScript to use switch case instead of using if-else. And you can certainly use if-else and, or you could use a ternary operator. And you could nest ternary operations and nested if else statements to get where you need to go and to do very similar logic. But switch case definitely simplifies some situations where you want to have a similar format in many cases and different formats in other cases. So, and there you go. And then obviously you can get switched case structures that are much more complex than this. But this is a great example to get started. All right, that's it for section four. We're gonna move on to our code challenge in the next video. 31. Code Challenge: Okay, welcome back. Today is our section for code challenge. So here we're going to do a little bit more than we've done in code challenges in the past. We're starting to build on our skills and we're gonna do something a little bit more complicated. So based on what we've learned, you're going to write an if-else statement and then write an if else if else statements. So that's just the one that has else ifs in the middle. And then you're going to convert your if else, if else, if else statements into ternary statements. Remember that's the one with the question mark in the colon. Okay? And then you're gonna take your if else, if else statement and make it into a switch statement, okay? So you can be as creative as you want, do whatever you wanna do with this. And we will see you in the solution. But go ahead and take as much time as you need and recommend just taking about 20 minutes or so and just come up with some easy examples. You could use pets, you could use fruit, you could use college majors. You could use biggest cities in your country or in your state, anything like that. So just come up with a few different things. Start with some variable that has a value and then check if the value of that variable, or you could use multiple variables and just see how they relate. Okay, so let's start with that and we'll see you in the next video. 32. Code Challenge Solution: Okay, welcome back. Now we're gonna do the solution for a section for code challenge. So let's take a look at a few possibilities. Now this could be anything, of course. So let's just start with our if-else statement. Let's get h here. And let's just put 33. So irregular if statement would be something like if age is greater than 33, then console log. I am now middle age. I don't know. Maybe middle age is a little bit older, but let's just go with it. And then else. We could just say console.log. I'm still young yet. Alright, so let's just try that out. And I would get, I'm still young yet because the age is set to 33 and that's not more than 33. And Matt, let's change this to 40. Okay, so let's go 45. And then we test that. Now middle aged back down with 33. I'm still young it okay, great. So we could do something else with that 33. We could say if we could start with this same if and do an add, just an else-if In the middle. Else-if age equals 33. Hey, that's how old I am. And then else we can keep the same L statement. Okay? Alright, so since our h value is 33, that's what we'd get if we change this to 32, it would be the same as the previous one. Now, since it's 33, it's, it's falling into this else if condition. All right, now let's convert these into ternary statements. So how would we convert this first one into a ternary statement? Well, we would have to take this first conditional expression right here. And then we do question mark. And then we do the one case. And then we do the other case. We go, Alright, so that works right there. How would we do the same thing with a ternary in here? See, this gets a little trickier and now that we have an else, if, so, we're going to have to do some nesting of some of this ternary. So first we check the first condition and we see if that's true. Then here's what we get to say. If it's false though, we're going to check for another expression, another Ternary. So we're going to nest another ternary in here, which we could do in parentheses just so that we can read this a little bit more easily. And we can say age, question mark, colon, console log. Oh, we can do that suits do this one right there, and do the colon there. So this might be a little bit hard to read, but basically what you can do is read it like this. Is the age over 40, if so, console log unknown, middle aged, if not, is the age 33. If so, console log k. That's so well that I am. And if not, I'm still dealing yet. Let's give that a shot. Right? So this worked. So this is a repeat of that one. And that's in a ternary expressions. So you could all do all at all on the single line. That would be totally fine. Ok, now for number four, we've got to take art if else, if else statement and make it into a switch statement. So we're gonna take this right here and re-imagine this as a switch statement. Now if we were to do what we did last time, where we would take switch and an age and then check it against specific values. That wouldn't help us with the range that we need to, we need to deal with. So there's greater than 40. We're going to have to see if this is true instead of just checking for a specific value. So let's change this to switch, true. And then we can do case where age is greater than 40. And then console log that break. And then case where age is 33. And then console log that break and then defaults. And that's the same as the else statement. Here we go, right there. So now if we save that, that'll give us the same behavior there. Notice these are 33, so that accounts for that one, that one, and that one. And if we make this 32, I'm still young yet, if we make this 45, I'm now middle-age. Fantastic. Okay, so there's our example of the section for code challenge and well done.