JavaScript for Beginners (includes 6+ real life projects) | Kalob Taulien | Skillshare

JavaScript for Beginners (includes 6+ real life projects)

Kalob Taulien, Web Development Teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
59 Lessons (8h 9m)
    • 1. Welcome to JavaScript for Beginners

      1:14
    • 2. 7 JavaScript Facts

      7:07
    • 3. Your First Script

      5:22
    • 4. A Brief History

      6:06
    • 5. Introduction To Variables

      10:02
    • 6. Merging Variables

      10:41
    • 7. Console Logging

      5:50
    • 8. Selecting HTML Elements

      7:46
    • 9. A Way To Share Code

      4:24
    • 10. JavaScript Mini Project #1

      6:11
    • 11. String Manipulation

      18:42
    • 12. Accepting User Input

      8:57
    • 13. Introduction To Comparison Operators

      9:39
    • 14. Handling Opposite Operators

      5:01
    • 15. JavaScript Mini Project #2

      9:30
    • 16. Handling Special Cases

      6:42
    • 17. Code Comments

      4:23
    • 18. Introduction To Arithmetic

      6:04
    • 19. Boolean Logic

      8:23
    • 20. Making Lists With Arrays

      9:22
    • 21. Checking Variable Types

      7:30
    • 22. Variable Casting

      7:23
    • 23. More Comparison Operators

      12:15
    • 24. JavaScript Mini Project #3

      6:07
    • 25. Functions

      9:57
    • 26. Practice With Functions

      14:53
    • 27. JavaScript Mini Project #4

      7:01
    • 28. Query Selectors

      13:13
    • 29. Introduction To Events

      9:51
    • 30. JavaScript Tip Calculator Project

      14:59
    • 31. Anonymous Functions

      6:33
    • 32. IIFE

      4:29
    • 33. The `this` Keyword

      6:13
    • 34. Scope

      6:52
    • 35. Hoisting

      10:51
    • 36. Introduction To Event Listeners

      7:01
    • 37. Getting Input Values

      5:58
    • 38. Changing CSS With Event Listeners

      10:35
    • 39. JavaScript Mini Project #5

      8:21
    • 40. Objects

      14:43
    • 41. For Loops

      11:20
    • 42. While Loops

      7:58
    • 43. For Each Loops

      8:22
    • 44. JavaScript Guessing Game Project

      7:54
    • 45. Let and Const

      7:53
    • 46. Introduction to OOP

      10:44
    • 47. Extending Classes

      12:37
    • 48. JavaScript Modal Project

      16:20
    • 49. Home Stretch

      1:23
    • 50. Template Literals

      3:13
    • 51. Object Literals

      3:04
    • 52. Destructuring Arrays, Objects and All the Rest

      13:02
    • 53. Timeouts

      3:51
    • 54. Intervals

      2:51
    • 55. APIs and Ajax using Fetch

      11:58
    • 56. Arrow Functions

      8:46
    • 57. Adding and Removing CSS Classes

      3:48
    • 58. JavaScript Final Project

      14:55
    • 59. JavaScript for Beginners Summary

      3:05
116 students are watching this class

About This Class

Hello fellow developer! 

Welcome to JavaScript for Beginners! Here's a little information about me, what's in this course, and what you'll learn in this course.

I've been teaching JavaScript for over 8 years, and I've been using JavaScript since the late '90s. I've helped over 45,000 students around the world learn this fun and fantastic programming language, JavaScript!

Are you looking for a thorough course to learn JavaScript?

Welp.. that's this course!

  • Over 8 hours of video
  • Over 55 lessons
  • 5 mini projects
  • 3 mid-sized projects
  • 1 final project
  • Completely beginner friendly!
  • Comes with source code 

Is this course for you?

  • If you're new to JavaScript this is the perfect course for you! 

  • If you have some prior JavaScript experience, this course is still for you due to how thorough it is.

  • Plus the projects that come with this course are very practical and really help you use what you've learned.

Here's what you'll be learning in this course

In this JavaScript for Beginners course you will learn everything you need to become a confident JavaScript developer. Some courses only teach you the programming side of JavaScript, and other courses only show you the interactive side of JavaScript. But the truth is: JavaScript is an interactive programming language and you need to know both sides of JavaScript.

  1. JavaScript fundamentals - You'll learn how to write JavaScript, where it's applied, and how to execute it. We'll be looking at JavaScript syntax (the funny looking curly brackets). We'll also look at ways to easily debug your JavaScript code so you aren't wasting your valuable time staring at broken code.

  2. Variables - A variable is a tiny piece of memory that's allocated in your computer. It's used for storing a tiny piece of data, like your name, a number, or several lines of code it should execute.

  3. Web page interactivity - The #1 reason why JavaScript is so popular is because of its ability to interact with a web page. You'll learn how to accept user input, change what your page looks like, and take an action based on the users action. This is what make websites truly interactive.

  4. Data types & data structures - Unlike other courses, in this JavaScript for Beginners course you'll learn the different data types and how to use them. You'll learn about numbers, strings, floats, functions, objects, undefined, null and more... and why they are important to know.

  5. Conditional statements - These are the little checkpoints in a program that make a computer actually do something. For example, if you're 18 or older you're allowed to vote. This is a real life "conditional statement". It reads like this: if age > 18: do something. This is exactly how computers know what to do and you'll learn how to write these.

  6. Functions - When you write enough code you'll eventually end up copying and pasting the exact same code over and over again. A function lets you write a piece of code one time and use it over and over. You'll learn about regular functions, immediately invoked functioned, anonymous functions and arrow functions!

  7. Loops - One of the most powerful concepts in computer science is the idea of a "loop". Basically it lets you do one action over and over again until it's told to stop. You'll learn about for loop, foreach loops and while loops!

  8. JavaScript quirks - JavaScript has some strange functionality that other programming languages don't have. We'll cover several "quirks" together in this course and you'll learn about things like hoisting, closures, promises, and block scoping.

  9. Objects, Classes and OOP - In JavaScript there's a special data type called an object. It lets you store named data points for easy access along with functions. In modern JavaScript we can write a class, much like other languages such as Python. Classes are a nicer way to write JavaScript objects. You can extend them, over write pieces of them, and re-use entire chunks of code — they're like functions but much bigger. And you'll learn all about these!

  10. API's and Ajax requests - API's are inevitable in web development. It's important to know how they theoretically work, and how to work with them. You'll get hands on experience with a real life API and an Ajax request.

Are you ready to start writing JavaScript?

If not.. consider this: I have a couple other JavaScript courses with over 45,000 students and over 2,000 reviews in total! Here are a few real reviews from my other JavaScript courses:

I've been trying to lean Javascript for a few months now. This course is helping everything fall into place.

I really like and appreciate this tutor for his way of explaining. Fantastic!

Not completed the course just yet, but from the lessons so far I have found Kalob's explanations to be clear and succinct. He explains exactly what he is doing and why. The pace is spot on and I never felt the explanations were verbose. I've never had the most confidence with Js so I decided to buy this course. I feel the lessons are helping and I am slowly gaining in confidence by the day. Great for beginners.

Its amazing, the explanation is so simple, I wish I had gone through this course earlier.

Yes, so far its been very easy and has a great start.

IT'S A GREAT JS BEGINNER COURSE

I've been teaching JavaScript for several years, helped thousands of people learn to read, write and understand JavaScript — and I've put 3x more effort into developing this course than all my previous JavaScript courses. I promise you will enjoy it! 

See you inside! :) 

Transcripts

1. Welcome to JavaScript for Beginners: JavaScript, the hottest programming language today, from full blown websites to mobile APS to programs like Slack and Spotify, JavaScript is everywhere. It's the modern programming language every developer needs to know. If your brand new to Web development and don't know where to begin, Look no further. This course is absolutely for you. In this course, you will learn everything you need to know to get a strong understanding of the fundamentals of JavaScript. It doesn't matter if you're already super skilled in Web development or your brand new decoding. This course was designed for you. JavaScript is one of the world's most popular coding languages, and it's Superfund alert. In this course, you will learn the basics of JavaScript, variables, Web page, interactivity, data types and data structures, conditional statements, functions, JavaScript, quirks that make it different from all other languages, objects, classes and object oriented programming. AP Eyes and Ajax requests and everything in between. There's also five mini projects for immediate practice, and one final project to test your overall knowledge. Join today to become a JavaScript developer 2. 7 JavaScript Facts: Hello, end. Welcome to Javascript for beginners. All right, I think we should actually start off with saying what JavaScript is, where it's available and furthermore, what it is not. So let's just start off with number one. What is Javascript? Not JavaScript is not Java. There's a big distinction between Java and JavaScript. Java has been around longer than JavaScript. JavaScript was only named JavaScript so that it could leverage some of the popularity behind Jave a back in 1995. And they're actually not related at all. In fact, Jaffa is strictly a server side language, and JavaScript is almost strictly a front on language, although it can be used as a server side language now because it's been adapted to work that way. The key take away here is Java is not Java script. So whenever you're talking about JavaScript, please don't just call Java, because that's going to confuse other developers. Number two. Every Web browser uses it. 100% of all Web browsers use JavaScript. Now you as a user on let's say, chrome or Firefox. You can decide to disable javascript if you want to, but your browser comes with it so whenever you download a browser. Firefox Chrome Safari Edge. Even Internet Explorer comes with JavaScript support. In fact, JavaScript is actually the only language that you can use on the front end. So let's put that in there to JavaScript is the Onley coding language that you can use on the front end. It's the only one. There's HTML, CSS and JavaScript, and that makes up the entire front and stack of any website. HTML and CSS are not languages. JavaScript is a coding language, and it's the only one out there, and that actually contributes to its massive growth and popularity. Because there are no other choices. You have to know JavaScript to be a front and Web developer. Okay, Number four. As a developer, you're going to hear lots of words. You're going to hear things like Jake Weary React view, angular libraries and frameworks. There is a difference between all of these, and we will get more into this as the course goes on. But behind the scenes behind Jake Weary react view and angular, it's just vanilla javascript. It is all written in plain boring JavaScript. A library is a JavaScript file or a set of functions that allows you to make shortcuts. So I, for example, J Query is a library, and that's because it doesn't really come with all the extra things that ah full framework does. And a framework is like reactive you or angular, where it comes with more than just binding event listeners. That comes with a certain way of writing things that comes with a certain style, ah, coding style. That is on how you actually write your code, and it does almost everything you need. So that's the difference between a library and framework. But we'll talk more about those in the future. Number five. Can you use JavaScript online or offline? Yes, the answer is yes. You can use Js offline. Now, Why do I say that? Or how do I say that Rather is JavaScript whenever you hit a website, whenever you have you a website, your browser downloads a bunch of HTML CSS and JavaScript along with images and maybe a few other files, and your browser tries to cash those so that it doesn't have to reload it over and over and over again. Once you have a javascript file, you can execute that file in your browser, even if you don't have Internet. So even if you don't have Internet throughout this entire course, guess what? You can simply open up your browser and you can type code right in here, which is something I'll show you in just a little bit. And it will just say Hi world and that is JavaScript. So you don't need Internet for it. With that said, a lot of websites still have some sort of a p I out there and you're going to still need Internet to actually leverage the full usage of JavaScript. However, you don't necessarily need it all the time. JavaScript files JavaScript files and in dot Js So just like an HTML when you were learning html, it was dot html or CSS was dot CSS or dot python and taught pie, right? So it's the same thing, so dot Js and you're going to see this all over the place as well. So all JavaScript files end in dot Js and last but not least, you can create entire programs using JavaScript these days, so it started off. Once upon a time, you could only create programs in certain languages like C or C plus plus. And then it sort of shifted towards things like python recon. Make entire python python programs for an operating system, and now you can actually do the same thing with JavaScript. And the nice thing about that is it's one language to rule them all. So what you can do is you can create an entire program, and it can be on multiple operating systems. It can work on. Your mobile device is doesn't matter of its IOS or Android or Windows or Mac or Lennox or anything else. It's one system to rule them all. And a good example of this is Spotify, Spotify and slack. These air two huge applications that have for a very long time been using something called Electron. And what this does is it basically compiles all of your JavaScript into an actual program, and then you can go and send it to people to download on Windows, Linux, Mac os, android, iPhone, you name it. It has support for it. And so now JavaScript that's actually write this note. JavaScript is used to create entire programs, so that is sort of seven fun facts about two JavaScript. We're going to get into a lot more of the stuff as time goes on to finish off this video on the left. You see, my editor I am using ves coded is made by Microsoft is completely free. And you can get it by simply downloading it. You're going to need a text editor like this. So if you don't already have one, I would suggest V s code on the right. I simply have Google Chrome open. It's a browser. And in fact, all I did here was I went to a boat blank. So brand new page, right click inspect. And if you go into your console up here and let's make that bigger, you're gonna actually write javascript right in here as well. Hello. Hi. I just like that And we have some javascript. So you're going to see that my screen is split up into two. So I've got my editor on the left, and then I've just got ah, browser on the right. Something like that. If you have two monitors you can use to monitors, you can just flip between full screen on V s code or your text editor and chrome or whatever browser you want to use. It doesn't have to be Crumb. But this is how I have it set up in the video so that you can see all of it just laid out in front of you. Where that said, let's jump to our next lesson where we are going to create our first JavaScript script. 3. Your First Script: All right, let's jump directly into JavaScript. At this point in time, you should have a text editor like V s code. Adam Sublime. Something like that. And all we're going to do is create a new file. And I'm just going to say this as a dot html file and I'm going to call this your first script dot html. So at first, it looks like we're creating an HTML file, and in fact, we are. So I'm going to create will make that smaller. I'm doesn't to create a quick little HTML five layout here, and the first thing I want to do is I want to create a java stripped and so inside of my HTML, usually at the bottom of your page just before the body tag. You're the ending body tag. We put a tag called Script in Here script and slash script, and that's how we pretty much do anything with javascript inside of the page. Now, if you're following along with this course, Really, you don't actually need this stuff. You just need doc type html head body and then put script inside of your body. I'm just gonna leave that in there just, you know, for reasons cause heavy escort automatically puts it in there for me, so I'll just keep it in there. Let's call this your first script. And where we have our script in here, all I'm going to do is type alert, bracket quotation. Mark. Hi. My name is Caleb. And then I put an end in quotation marks and unending bracket or parentheses, and then a semi colon. And so if I save this file and I go into chrome and I simply hit commando or control Oh, you can also go into file open. And if I just open up that file, it will automatically execute my JavaScript for me. And so there's an alert in here. This little annoying box that pops up says Hi, my name is Caleb. And any time I refresh the page, it says Hi. My name is Caleb. Hi. My name is Caleb. Let's do it again. Hi. My name is Caleb. What happens if I click it once more? It will say hi. My name is Caleb. And that's because everything between this tag here this opening script tag in this closing script tag. All this javascript is going to run. Now, at this point, we don't know about things like syntax, which is like the structure of the language. Why do we have a semicolon? Why do we have a parentheses? Why do we have a quotation marks? What is an alert? We don't know that stuff yet, and that's actually OK. But for now, what I would like you to dio is just create a little script like this. So if you need to feel free deposit video and just create a script says hi, my name is whatever your name is, and just make sure it's it's an alert. Make sure it looks a lot like my code here. The important part is lying. 15 Tow line 17 here. You don't have to worry too much about this stuff. We're not looking at creating a responsive website, which is what basically this is doing. We just want some javascript to run and then open it up in your browser. There is an alternative to doing this if you want to. You don't have to do this in the file. You can also do this right in your browser. So if you open up any page right click Inspector, and you're gonna want to click on the tablets as consul. And in here, This is just your JavaScript console. Your able to write any javascript you want. So, for example, I could say alert JavaScript for beginners if I could spell it right. And there we go. It says javascript for beginners, and you notice that it looks like the exact same code as what I wrote over here. The text is different inside of it. We'll talk about that later. Ah, but basically, it looks the exact same. So you could do it that way. Or if you wanted to. You could use code pen dot io, which is a tool for basically sand boxing html CSS and JavaScript. And I'll show you that one in a couple of videos from now. But these are the two main ways that we execute JavaScript. Basically, your large scripts go in here. And if you ever need to test anything hey, just open up your browser. Right. Click, inspect. Go into your console and you can write any javascript you want. The next thing to be aware of is how do we link to JavaScript files? Well, if you're familiar with HTML and CSS in CSS, it's a link. Elements in JavaScript. We do script SRC instead of a draft. SRC is equal to Let's go scripts and your first script dot Js we could do type is equal to whatever type we want it to be. And we basically just closed the script. And what this is going to do is try to load from the scripts folder and is going to look for your first script jazz. Now this does not exist, so this is not going to work. But that is how you would use an external file. So if you have multiple HTML files that you want JavaScript to run on, you don't have to copy and paste it. You can simply use an external file, and that is something you should have learned in CSS and HTML as well. So your task for this video is to basically just create a script in open script tag, a closing stripped tag. Make sure it's just above your body. Don't want it up in the head like I wrote up there. Let's get rid of that. You want to just above your slash body tag and you know, you have all your HTML in here and then just alerts to the world. Hello. My name is. And then whatever your name is, once you've done that, let's head on over to the next lesson. 4. A Brief History: All right, let's talk about a brief history of JavaScript. I know this is not the most important thing in the world. I also know this is not the most interesting thing in the world. But it is, in my mind, a fundamental of learning a language. You sort of want to understand where it was coming from in order to project where it is going. And JavaScript, to me has a fairly interesting history. So first things first JavaScript was or is. Actually, Jeff Script is a relatively new programming language. In fact, it's called You Have a Script because it was a scripting language. It wasn't actually a full programming language until recently. It was developed in the year 1995 and it was made entirely in 10 days. Now the JavaScript that we write today significantly more complex and has taken way more than 10 days to create. But the original JavaScript prototype only took about 10 days throughout the late 19 nineties. Going into the early two thousands, a lot of people actually thought JavaScript was a fad because you had to write a programming language to make a website work, and you actually had to write a programming language on the back end so that you could do things like accept payments and you had to write a programming language on the front end so you could have small little interactions and it couldn't do very much back then. So it's understandable to think why it would have been a fat. But then, as more people came online and more people wanted interactions, JavaScript actually didn't really take off. Not not super well anyways. Flash became the default animation language now, as most of us know, flashes not really around anymore. And it's basically all JavaScript. And that's because Flash had too many security problems and JavaScript well, as it was maturing slowly in the background, it was able to do more and more things that Flash was able to dio and eventually just completely replaced it. When one day Google and a bunch of other people said no more flash. This is a major security problem, and Flash basically was given a a timeline said like, Hey, you've got a couple years to live, and then we are cutting your support. We're cutting off your life support, and we're going with JavaScript so everyone be prepared for that. And that's what ended up happening. And so throat that period. While Flash was sort of on its last legs, JavaScript really took hold. People really started to adopt it and make it better and make all sorts of libraries and frameworks that we use today. I had mentioned a few videos ago that JavaScript is the Onley front and programming language out there, and well, that was true at one point. It is not entirely true. There are other programming languages you can use on the front end, but they're not really four websites more than therefore programming languages. And the biggest threats to JavaScript successes is one called Web assembly, or blossom for short. It actually didn't even get proper browser support until late 2017 early 2018. Now, Web assembly is basically an actual programming language. A riel programming language that runs very, very, very fast is much more efficient than JavaScript for your browser. However, it hasn't really taken off, and I think it hasn't taken off because JavaScript grew so quickly through just a few years , really, about a decade and Web assembly was late. Tow launch. They were supposed to launch way before 2017. Originally, JavaScript simply grew too fast for Web assembly to catch up. That being said, if Webb Assembly did become a standard, that would be a great leap forward for basically every website or any program that's running through a browser. But I don't think that's gonna happen anytime soon. But, hey, that's neither here nor there because we're learning. JavaScript and JavaScript has huge demand today, But it's just good to know that if one day JavaScript was to be replaced for front and Web development, it would probably be by Web assembly and so fast forwarding a couple of years. We now have a server side JavaScript, called node dot Js, and is massively popular frameworks like React, created by Facebook and view dot Js. There was another one called angular, created by Google and basically view dot Js eight up the entire angular community. Ah, and React is king of JavaScript frameworks. But going back touching back on that node.js. Basically, there is an engine that can read your javascript and break it down into very performance code, and so you can write javascript and your computer. Basically, you can think of it as a way as it compiles your JavaScript into C and then as it's executing your C code, I'm doing air quotes here, but your C code. It is actually way faster. And so this is server side JavaScript, meaning that you can actually write JavaScript on a Linux machine and actually have it connect to a database and all those things that's fairly new. It's fairly popular to these days, and the nice thing about that is you can write one programming language on the front end, one programming language on the back end, and you can write basically any program that you ever need that needs to be connected to the Internet. You have javascript down pat, and you could do so many things with it. That said, when it comes to server side languages, it's still not as powerful as languages like Python Python can do significantly more. For example, a lot of AI artificial intelligence and ML Machine Learning is written in Python. It's not written in JavaScript, so that's a brief history on JavaScript. Where is going to go? Nobody really knows. I sort of suspect JavaScript is going to keep taking off again. It's the only front and programming language out there for a website. And so as more and more people come online, it becomes more and more popular. There's no choice. It has to grow, and you can think of it like this. JavaScript is the only child in a family, and so it gets all the attention. Whereas when you talk about other programming languages like C or Cortland or Java or python or any other programming language out there, you can basically hot swap most of those. In a sense, you can write an entire program in C. You could also write entire program in Python. Where is you don't really have that choice when it comes to front end Web development. And so we always use JavaScript. And I think because of that JavaScript is really going to take off ah, lot more than it already has in the coming years. 5. Introduction To Variables: Hello and welcome back in this video, we're going to talk about variables. Now, if you're not very interested in math, if you don't like math, maybe you're not good at math and you're hearing the word variables and you're freaking out a little bit. Don't worry. It's actually not as complex as it seems. A lot of people think of variables as, Hey, we're going to be right in calculus. And to be totally honest, me, my sit like as my person. I don't know calculus, and I work with variables every single day. Hundreds, maybe even thousands of them. Variables basically are just a way to store little pieces of data on your computer and then use them later. You can manipulate them, you can check them. You can tell your computer to execute a certain command based on a particular type of variable and the value that that variable holds. So let's take a look at what a variable looks like. And so I'm just gonna create an HTML five website here, and you know what? I don't need all that stuff that's call us very bulls variables and because we're not gonna have any HD melon here. I mean, we would put it in here generally, but we're not going to. We're just going to write some basic JavaScript for now. So we're going to stick with a script tag and down here, we're gonna put another script tag. And so when we start talking about variables, really, all we mean is a piece of data that we can swap in and out. And we do that with var. And this is very interesting that it's saying Django template. So let me quickly change. That's to regular HTML. There we go. And so we have a VAR declaration. This stands for Variable and Vier basically says they JavaScript. Just so you know, we're about to declare variable and then you give it a name, so whatever you want that name to be is equal to And then there's different ways of declaring different types of variables and we'll get into this overtime. So we're going to keep it simple for now. So I'm just going to say my name is Caleb and let's make that a little bigger here. So I have a variable. It's called name and the value is Caleb. And so we know of this alert function already. We'll talk much more about this down the road. If I just simply said alert name and I open this page in Google Chrome, you can actually see that. It just says Caleb. That's all it does. If I wanted to swap this out at any time, I get, say, Caleb, Darlene, save I'm gonna go over here hit Refresh says Caleb, telling you could even do more than that. So let's let's create another variable. Let's call it course. What course are we currently taking? Right now we're taking JavaScript for beginners, and you can see that it wrapped onto a new line. That's actually OK. It's just because my phone is a little too big here. Then underneath, you could say alert course and let's go ahead, refresh our page and this is javascript for beginners. And so this is really all of variable is now you can reassign a very bill at any time, so we're not using name anymore. I did mention earlier. Semi colons are thing. Generally, this tells a computer that hey, this is the end of the line and whatever comes after this is a new statement, so just as an example, we would not want to put these both on the same line like this, because if we did that and hit refresh, we're not going to see anything. In fact, you can actually right click, inspect and you can see that we have an error in here and let's open up our consul and you can see we have an error in here says something that is too hard to read in. There we go. Uncaught, syntax, error, unexpected token var And it tells us right exactly where it is. So if I click it and says Line 11 and showing me right here so that's pretty cool. So that's a debugging little pro tip there for you. And so even my editors saying, Hey, something's not right here. And so what we want to do is usually we just put that on a new line and put a semi colon at the end. This is the simplest way of maintaining us, and if we click, refresh again, it alerts us as expected, and there's no error in our council. And by the way, any time you run into a JavaScript, they're always open up your console. Take a look at what that area is because it can tell you as a javascript developer. What the problem, actually, as maybe it is something that the user did. Maybe it's something the developer did. By the end of this course, you'll be able to know exactly whose fault something is. Usually is the developers. They didn't implement something properly. Okay, so we have variable name and course, and we're just alerting this. Let's go ahead and overwrite our variable. Now we could it simply do have. Our course is equal to Python for beginners. And as I say this and go to refresh this page, it will now say python for beginners. And so that works. So basically we've created one variable. We didn't use it at all. And then we overrode the entire thing with a new value in here Now, because this variable has already been declared as of our this gets into hoisting a thing we'll talk about later down the road. We don't need to declare bar again. It's already there, so we really only need to declare var once on a particular variable. And after that we don't really need to do that anymore. So let's go ahead and save this and hit refresh finances. Python for Beginners Council didn't complain. Things were looking good. All right. One more thing that we should go over is what is with this. So you see these quotation marks around there? There's two other ways to do this. So we could do, for example, of our age. How old am I? Well, I'm 30. We could do this. And if I alert age and refresh this page, it says 30. And if I go in here and type age, it already seems to exist. It also gives me 30. And if I type in course in here, it already exists. Oh, my browser understands that there are variables in here that are accessible to the council . And so now we're sort sort of starting to interact with JavaScript in a script tag or a dot Js file. If we were to move it to an external file, and over here we can access some of these variables as well. So we're sort of starting to connect our editor and our browsers terminal or the council. So we see here, age does not have quotations around it it can. It can have quotations around it. Ah, you can also see that the semi colon was basically optional. I didn't need it, and that's OK because I was putting on my coat on new lines. And JavaScript is smart enough these days to understand that for a good practice, let's go ahead with that cynical in that in there and refresh our page, and it's still says 30 looks no different. But if I type in age here, you can see it has the quotations around it. This is a fundamental difference between different variable types. We will talk all about this down the road, but it is important to sort of get the idea right now. That's a variable that's called a variable, a variable actions called var var one. Anything that has a sentence or spaces in it. Any sort of space is like what you see in here that needs to be in quotations so we can't just put 30 30 30 30 30 with spaces in there and alert of our one. This is going to give us an error. There we go. Unexpected number, but if we put quotations around it, give this a refresh? It works. So at this point, you should be a little bit confused if you're brand new to javascript about what all this is about. So when we use quotations, this is called a string. So this is a string, and this is a type of variable that basically says, Hey, this is a sentence And then we have Let's save our two in here is equal to just the number 30 or any number or 30.5, something like that. And this is called a number. Or in other programming languages. It's sometimes called an integer. Actually, in this case it would be afloat. But that's neither here nor there. At this moment, we will get into that a little down the road. And JavaScript actually sums this up nicely is and they say, how we don't care if it has a decimal point or not. We just care. Is it a number? Is it not a number? And so when you're dealing strictly with a number, you do not need quotations around it. There are no spaces in there. You just have numbers and decimal points, and that's it. No commas, no dollar signs nothing like that. It is simply numbers and a period. So now if I go ahead and say, Let's alert far, too. And what I want to do here is get rid of these. Refresh our page. It's going to say 30.5, and it here. If I type far too, you can see 30.5 has no quotation marks around. Let's make that bigger has no quotation marks around it. But var one does. And that's because this is a string and far, too, is a number. So why is that important right now? Great question. Well, as we're learning JavaScript right now, it's not important to us. But it will become important to us very, very soon. And I think the earlier people understand this sort of difference in a variable type, the better your programming is going to be down the road. So that's all there really is for this particular video in the next one. Let's go ahead and start murdering some variables together so you can actually see sort of how a variable is supposed toe work, because right now these variables and I mean we're hard coating them, so they're not really variables were just saying, Hey, assign courses equal to JavaScript for beginners and then immediately override it. So that's no use. The variable needs to be something that can change. And, hey, if you don't fully understand this entire video, don't worry about it. Move onto the next one anyways, and eventually this will all just click into place. It becomes a lot easier once we actually start writing more JavaScript together. 6. Merging Variables: Hello, End. Welcome back. In the last lesson, we learned a little bit about variables. In this last, we're going to learn how we can merge them together. No, merging variables together like combining sentences, is called Concoct a nation. See that word here? Concatenation. You'll often see it just as the word come cat as well. Why is it called Cat Nation? I don't know. We could just call emerging. But hey, developers like their fancy words. So hey, we call it concatenation. Now in this video, I am going to actually do most of this in the console. So I go to the console and let's go ahead and make chrome bigger because we can. And so on my left, I just have ah, merging variables that HTML open. That's just the source code in here. There's currently nothing in there, no JavaScript, and it looks like a blank page, and we have a terminal in here. So I could say alert. Hi, and this will work. Let's go ahead and clear this clear council and let's create a couple of variables together and then can cat need them? So let's create an age and an introduction to who I am. So let's say Var intra was equal to Hi, my name is Caleb, and I am something something, something years old. So this is my intro. And if I type that you can see that it just spits out exactly what I had written already. Now, if I type in of our age is equal to 30 type and age again, we can see that age doesn't have quotations around it. So we know it's actually a number, and we want to inject that number in here. So how do we go about doing this? Well, we sort of went about this backwards because we defined this. First, we define intro first, and then we define their age. But guess what? We can overwrite variables so we can say intro, and it tells us what the intro is already is equal to instead of just having this blank in here. What I can do is I can actually quit the sentence by putting another quotation mark in there, put a plus sign, and then the variable, another plus sign and then a quotation. And there are different ways of doing this and more modern javascript. But you're going to see this all over the place. We're going to learn this way first. And so basically, this is saying, Hey, intro, you're already defying so we don't need toe use. VAR says Hi, my name is Calvo. Good old Calvo tabl e in. My name is Caleb and I am And then it quits the sentence and says, Hey, also add the age in their whatever that value is. Put it in there and then Oh, hey, start that sentence back up again with another plus sign and then another quotation and just put the rest of the sentence in there. And so if we hit enter, we can see Hi, my name is Caleb and I am 30 years old, and honestly, that's all there is to concoct nation. Now the problem gets into when you try to concoct Nate numbers. So if I create another variable called, uh, number two, I guess, and we'll make that 40.123 we can see in here Numb to is equal to 40.123 Now what happens if I wanted to say 30 40.123 So the number should look 3040.123 How are we gonna can Cabinet that? That is trickier because these air numbers and when you do a plus sign with numbers in most programming languages, it simply adds the numbers together, and that's not what we want. So if we did age plus numb to look at that, it gives us a number we don't want 70.12 to 99999 This is a funny little thing in computer science where there is actually no hole number on JavaScript occasionally runs into This is actually pretty cool example. But instead of saying 70.123 it says 70.12 to 99. Nn nn Nn and Infinity, infinity and so on. But this is not what we want. So how how do we merge these together? What? We can do this by contaminating a string in here. So remember that last lesson? Right side strings and numbers are a little bit different. Kind of important to know. Well, already we need to know the difference here so we can do this and always said was, Hey, take the number 30 added to an empty string and empty sentence and then add the second number to it. And so if we hit enter, we can see this is no longer actually a number. This is a string and we can tell it to string because it has quotations around it. And so this is saying this is a string of 3040.123 Also note how it says 0.123 and not 1 to 29999999 is because it's not a number. The computer doesn't have to work out a rounded number like that. It only has to say, Oh, this is a string. So yeah, I understand that there are numbers in here, but we don't have to perform a bunch of math stuff behind the scenes to make that work. This is just as if it was regular English letters. Negus doesn't have to be English letters. It could be any letters. Really? Ah, but yeah, just the difference between letters and numbers here. And so this one now thinks that these air all basically letters instead of numbers. So let's go ahead and add one sentence with two cats. So let's say ah of our cat one. His name is going to be a Zephyr. Is that for and of our cat two is equal to Henry. So these are my two cats. By the way, you're going to see this undefined. Whenever use Vyron, this gets into hoisting. This is a more complicated JavaScript feature to sort of tackle Right now, we'll tackle this a little bit later. But if you see undefined like this, don't worry. Nothing is wrong. It's just sort of JavaScript away of registering a variable and then registering the value of the variable. It's called hoisting again. We'll get into that in the future. And so now I want to say, var sentence is equal to I have two cats and the 1st 1 is going to be cat one. And the 2nd 1 is going to be cat too, and we could just leave it here just like that. And so what we're saying here is hey, I've got a sentence. But I also want to put the variable of cat one in there so whatever that is going to be, it happens to be Zephyr. But it could be any other name in the world. And maybe it's been over written 100 times. We don't know. Whatever that end result is, we're gonna put it in here, and then we're going to contaminate a another piece of the sentence, just the word end. And then, using the plus sign, we're going to concoct Nate Henry. We're just cat, too, so let's go ahead and type sentence and you can see I have two cats, Zephyr and Henry. Furthermore, we could actually get even deeper into this as well. We could dio of our age one. So let's say Age of Cat One is going to be four and of our age two. That's cat to whatever that age is going to be. We know it's Henry. I know his age is currently, too, so we've got a four year old and a two year old cat. Now we want to actually can captain eight into another can caffeinated sentence already so sentence has already been defined, and as you can see, I can take this into my console and it tells me, sort of in faded out text. I have two cats, Zephyr and Henry. Let's go ahead and say sentence is equal to sentence plus, So it's gonna take this value, and we're gonna can cat need something on top of that? So we want to put ah, period at the very end here and let's say and they are something years old, so something and something years old, so four into this is what we want to get into here. So it's always helping me to when I was learning how to concoct. Nate is just put like underscores in there. And then you can simply do your funny concatenation kind of style in here, where you have closing quotation plus sign and then in here we could put age one plus sign quotation and you can see it's an opposite order. So goes quotation plus sign, and then to get back in You do plus I in Quotation, and we're gonna do the same thing over here. And this is just so I'm going to be aged two and let's go ahead and hit. Enter. Oh, and by the way, we can put semicolons at the end of this. But we don't necessarily have to because our consul or chrome in this instance knows that every command is its own command, so we don't have to do this a semicolon thing. But again, it's just a good practice to get into. As Javascript gets older, we use semicolons a lot less and cool. You were probably screaming at the screen saying, Caleb, age to does not exist. It is called age one. You can see that here. I didn't call it aged two. I just called it a judge. And so let's go ahead and redo this. We could also just redefine or just define a variable called Age Two, and this would fix it. Let's go ahead and change us to age. And there we go. And now it says I have two cats, Zephyr and Henry, and they are four and two years old. And so if I go ahead and clear this and take sentence again to make that bigger, I have two cats whose F 100 they are four years old. So I've got aging here. We know ages two, we've got age age one is for we know that we have a cat one. We've got Cat two and then we've got sentence. So we have done a bunch of variable declarations in here. We have defined variables and we have merged them together in a sentence. And then we emerge it into that sentence one more time. So that's basically all there is to concoct nation. Now, you're going to see this all over the place because javascript is a language where you can modify your Web page, your HTML and even your CSS, and you're going to want to eventually take a variable and replace some text on your page with whatever that variable value is going to be. And so this is how we do can Cat Nation. Now, if you're interested in giving this a shot, you can do exactly what I did in this variable and just say, Hey, my name is whatever your name is. I have a cat or a dog or I have How many books do you have? Maybe you have 1000 books and you could do something like that. It's always good to go in there and give us a shot. Don't forget. If you ever have questions, I am here to help you. You can always leave a comment or question down below 7. Console Logging: Okay, Welcome back. In the last lesson, we talked Book and cat Nation. And this lesson we're going to talk about not uncashed nation. We are actually going to look at a better way to print variables to our consul instead of using alert. So, up until now, we have been saying alert test and then when we refresh our page, it just annoys us with this. And every time we hit refresh, It annoys us with this. And you know, at first when you're starting JavaScript, that's not a big deal. But you don't really see this functionality in the wild. People don't use alerts too often anymore. Unless it's like, Oh, you started to write a post and then you hit the back button. Are you sure? Because, like, do you really want to leave? That's a totally different thing, actually. Just sort of looks the same. So in here, what we want to do is just log something to our consul in here. And so whatever javascript re we right in here, anything. It could be literally anything. We just want to put it into the console that we can see what it is, and this is a very, very useful way of debugging your JavaScript. So let's go ahead and create a variable. And I'm going to put my name is Caleb Tallinn and of our profession. I am a teacher by trade. Yeah, that's actually entirely true. Also Web developer, So teacher and Web developer. And let's get rid of this alert. And let's say you just have to put on your imagination hat here for a second. But let's say we have 10,000 lines of JavaScript and we don't know what the value of name currently is. And so we have a town of code, and what we're going to do is we're just going to pretend that is way up here somewhere, and we can't really access it easily, but we want to see what it is. So, yes, we could do alert name, and when I go over here, it'll tell me what it is. But that's annoying. And if you happened to be in a loop, we'll talk about loops later. This could execute for 100 1000 generations. It will just keep alerting you just over and over and over and over and over. Your browser might even crash from it. Who knows? That's not a good way to live your life. A better way to live your life as Let's go in here and let's say, consul dot Log. And then we could just put anything we want in here. So let's say name and then a comma and let's put the name variable in year so that's actually put name Colon and so you can see this is a string and this is a variable. Let's go ahead and refresh your page here, and I'm gonna have to make that a little smaller. Thank you. So we can see name Caleb Tallinn, and it executes online. 29 of the file called 60 Underscore console underscore log dot html And if I click it, it'll tell me exactly where this is being executed. This is a great way to debug your code. In fact, this is actually just a really good way of sort of figuring out what's going on in code. In general, let's go ahead and type profession in here and again. I just added a comma and we can see in here. It says. My name is Caleb Tallinn and teacher and Web developer is my profession so moving forward? We're probably going to use console log a lot more often than we're going to use. Alert Alert is just a little obnoxious, and it sucks sort of having to click into it all the time. And it's like, Hey, here's alert. Okay, here's another alert click. OK, here's another alert click OK, and just it gets a little manana as a little too much, especially as you start writing more and more code. And the bright side about this is when you're writing code that goes on a live website, it's only going to show up in your console. So if I get rid of this council here and I just refresh, nothing happens. Lisa looks like nothing's happening. But if I right click, inspect, go into my counsel, this continues toe happen. And so really only a developers ever going to see this. And so if you're testing something out in production on a live website, you can always use this method. Now there's a couple other ones you can use to so we could do console dot warn warning, stranger danger that went to lower case and I want uppercase Ah, this one goes yellow warning. Stranger danger. And we could also do. Consul, let's make that lower case counsel dot error error, and we'll just pace that over and over again. And because these are all in their new lines, they don't need a semicolon. But let's throw it in there anyways. And now we're going to see a warning, a regular console log and an error. And there it is. We have warning. Stranger danger. My name is Caleb, calling him a teacher, a Web developer, and also error, error, error, error and also the respective lines that they're all taking place online. 28 9 29 and line 30. So that's a better way to live. Your JavaScript life is to use console log. You're not going to use console War Council error too often. Generally, we just use console log. Now, if you come from another programming language, this is very similar to the print function. So if you use Python, for example, this is like print. If you come from a huge P background, it's like saying echo something and the Javascript way is simply rejected. It did. Ah, consul dot log. So again moving forward, we are going to be using console log a lot more, so you're gonna want to make sure you know how to open up that Consul in your page again. That's his right click. Inspect well. Generally open up your elements first, and you'll just have to click. Consul. Sometimes you have to go in here and click Consul, depending on how big your screen is. Ah, but there's always a consul tab in there, and you can always just open that up and see what the code is doing if it's giving you any warnings, logs or errors. 8. Selecting HTML Elements: Hello and welcome back in this lesson. We are going to get into some of the actual reason why we're learning JavaScript and that's to modify HTML elements. And so the first thing we want to do is we want to create a script tag. We always need the script to be just above the body. Oh, by the way, the reason that it's above the body and not in her head. Well, we used to put javascript in the head, but now we put javascript at the bottom of her page so that all the extra HD milk unload. First we put it at the bottom of the page so that, for example, if we have and h one in here hello world and we just refresh your page, we see hello world. And basically, if we're going to be using any elements and JavaScript, this needs to exist first. The HTML needs to be there before the JavaScript is loaded. And in some cases, if you put javascript above this, the javascript will load. It will then try to look for an H one called Hello World or has a hello world text in it and it won't find it because it hasn't been loaded. And, yes, one line can make a difference. So in most programming languages, generally a program runs from the top to the bottom. JavaScript is no different. It runs from the top to the bottom. And so we're gonna put hello World in here. Ah, and let's give this an I d. So this is just some basic HTML and I have an HTML course if you need a quick little HTML refresher called the ultimate HTML developer. And so let's just give this an I d of test. Now. When we save and refresh us, this is not going to do anything. It's not going to do a single thing for us. And so what we need to do is we need to learn how to actually select this element and then be able to modify it a little bit. And so JavaScript is largely known for working with HTML and X html markup basically anything that has tags like this. JavaScript is pretty good at working with, almost like it was designed to work that way. So there are many different ways to select an HTML elements or a group of elements or like all the H ones on a page. But we're not going to do that. We're just going to stick with something basic called get element by I D. And so it looks like this. That's Ah, move that up. Documents dot get element by i d. And then we just put the idea in here, and so this i d matches test, and that's up there. And if we save us again, we're not gonna see anything happens. Doesn't matter how many times you refresh all it's doing is grabbing this element note. So this is called a node. We need to actually store this in a variable. So let's go ahead and put this in a variable called test. And again, if we refresh your page, nothing is gonna happen. But what happens if we go into our consulate type test? Oh, look at that, says H. One with an idea of tests. And it's actually selecting it for us. Look at that. So moved down. Nothing move up, and it has selected it for us. Now we can do things. So if we had dot we can see all sorts of different things in here and this is where JavaScript gets to be. A very, very big world. There are so many things actually, so far we are looking at event listeners, more event listeners, more event listeners, more event listeners. And it just keeps going and going and going. We can change this style. We can change the title tag. If we wanted to animate it, we could give it a class name or remove a class name. We could do all sorts of things in here. But let's go ahead and figure out what the Texas and this is just dot inner text and that's just going to give us the tax. We can also do this with HTML. We do dot inner HTML and so we can see that this now says hello world, knowing that we can now go in here and say test dot inter html and this is if we want to write HTML so we could say, uh, do an underlying Although that's deprecating. Let's do an underlying take anyway since two how low slash you world and let's go ahead and save us and see what happens. Damn! Look at that. It underlined it for us. But If we go and actually view the page source, there's no underline. That's all. JavaScript. So what Javascript did was said, Hey, grab that node. Grab this H one element, this one right here and change the Inter html. Now what we could do is we could store the old stuff, too, so we could say the Inter html is going to be high. Welcome to JavaScript floor beginners, but let's go ahead and store the old stuff. Let's do of our old text. Let's make that camel case is equal to test dot inter html, and that's just going to grab that inter HTML and store it in a variable and will be able to access it through a console. So let's go ahead and save this. Hi, Welcome to JavaScript for beginners. And if we try to access this very bowling here called old text, we should just be able to write. Let's make this bigger. Well, l d ah, hello. There it is. That's the old stuff. We stored the old stuff in a variable before we changed it. And now we can actually change it back as well, because we still have access to test as a node. Let's go ahead and change the inner text to the old text. And so now we're using variables pretty efficiently at this point. And at the same time, we're also grabbing this entire HTML elements this node and we're saying, Hey, yeah, I understand that you wanted to say hello, world, but, hey, when the page loads and against the JavaScript actually work some magic and change it for us, that's what Javascript did for us. Now again, there are a lot of different things we can do on a HTML node, so we could type in test hit dot and then we could literally just scroll through this for days and days and days and days and days. And you can see this list just goes on and on and on and on him. And so JavaScript is a really big world in all. Honestly, we're not going to learn about every single thing in here because we are going to be here for a very, very long time. My teaching methodology is to teach you how to learn efficiently so that if down the road you're working at a company and they're using something called scroll to Well, you know how to access scroll to and you know how to figure out what that is. Even if we don't learn it in this course now, we're going to learn a lot in this course. But there's just no possible way we can learn every single thing. So what I would like you to do as, ah, little test a little, a little bit of hands on experience creating new html file and just create any tag It doesnt not have to be in a church. One give it a ni de of something. Doesn't really matter what that ideas as long as it matches this value here. Not this one. This is the name of our variable. But this one right here and this one here those do need to match. So create that element and then select the node with get element by I d Remember, we used documents dot get elements by idea. We'll talk more about what that dot means down the road when we get into more advanced javascript and then just change the inner html, maybe give it underlined, maybe italicize it, maybe make it bold. You do anything you like what you write any HTML you want in there as long as you use inter html. And if you're ever just going to change the inter tax, you could always just do inner text. And then your browser doesn't have to parse and render a bunch of JavaScript or not JavaScript html. It could just do regular text, which is actually a lot more efficient. Go ahead, Give that a shot. If you get stuck, leave a question down below and I am happy to help you. Otherwise, let's head on over to the next lesson. 9. A Way To Share Code: Okay, let's talk about a way for you to share your code. That's relatively simple. So if you don't use get if you don't know I get or get Hub is I'm not gonna force that on you right now. It's It's good to know, but right now, if you don't know that, just know that there's a better way to share html CSS and JavaScript, and that is in the form of code pen. So if you go to code pen dot io and you can click of button, this has just start coating. And really, all this is going to do for us is create three sections where we have HTML, CSS and JavaScript, and we can literally right any HTML CSS and JavaScript in your that we want. And then we can save all of this code, and then we can share it with someone else so that they can see the code as well. So let's go ahead, and I'm gonna put each one in here and say Hi, my name is Caleb, and what I'm actually going to do is I'm going to javascript this a bit, but I D Span is equal to name so html doesn't look any different. Ah, the CSS. Let's change the span. Let's change that span to have a text decoration of underlying And in the JavaScript let's go ahead and select name as an I d and change it. We're gonna create variable. We're gonna call it Name is equal to document dot Get, Actually, let's change his view. I don't really like this view. Let's do, Yeah, this one's a little better here, and we can also make that a little better, but we don't need to see the C s s anymore. Okay, that looks a little better. Yeah. There we go. Okay. Document. Don't get element by i d. It's camel case. So every word that's not the first word has a capital letter. We want to get name that matches this idea in here name dot Inner text is equal to and let's say this has been hijacked by my cat named Zephyr. And let's go ahead and give this a safe. And Ono is asking me to log in. You can totally log in creating count. It's completely free. Okay, so I just logged in, and here we go. We just want to change the text so we save it and you can see in my your L says code pen dot io slash Caleb Holley and slash pen and then some hash, and you can actually just copy and paste the entire code to someone else. So if I open this up in a new tab, it's going to save all my code in here. That's pretty cool. And so that's a great way to share your code. You can also change it. So name changed by my cat. And when a refreshing here, it also changed the name There, there it is. Now, if it in any point in time you're working with Consul Law, you can also just open up that consul in here. And you could conta log really anything you want so we could do con so new console dot log test, and it shows up in their cool so you can collect save at any point in time. You can even take someone's code and fork it, which means basically, you're going to create a copy in your account of their code so it doesn't change their code it all, but it gets saved in your account and you can like it and you do all sorts of things. You change your view, but most of all you can take that you are l. And you can copy and paste. It's two friends. You can ask a question with a girl with your sample code in here like a Caleb. Why doesn't this work? And you could put all your code in there. That's super great way of sharing code and asking for feedback and asking for help. And lastly, when you are creating a project, if you want to, you can always use code pen and just share the final screen. You could take a screenshot of the final screen and share the code pen you earl in your skill share project. Of course, if you don't want to use code pen, if you don't want to create an account, you don't have to. You can continue to use HTML files and JavaScript files and take screenshots. That's totally okay to just again. Don't forget, you can always share your project with the rest of the group and most importantly, me. I will take a look at your code and your final product, and you know If you want any feedback, I can also give you feedback. But you have to make that project on skill share first and moving forward. It's definitely a good idea to put any of the code that you're writing in here. Ah, in a skill share project so that I can actually give you feedback on it. I'm not going to use code pen too much throughout the rest of this course. I just thought this would be a great way to show you how you can share your code in a nice and clean way. 10. JavaScript Mini Project #1: All right, let's take a look at our first mini project. It's time to start putting some of the things we've been learning to practice because what better way to get hands on experience than to actually experience it? So we've learned quite a bit so far, and we're going to use just a few of the pieces that we have learned. And what we want to do is we want to in this mini project, concoct innate a string and variable together. And then I want you to output that string to the page of that final variable. I want you to output that to the page by selecting an element and changing the inner HTML. So let's ah, let's quickly write that out. Number one. Create a script. You can catch a string and a variable together Number two, using dot inter html and get element by I d. Change the inner html of an element to be what your variable is. So that's really it. It doesn't seem like a lot at first, but you were going to do this over and over and over and over again in your Web development career. And so this is really, really good practice right off the cuff. Now, if you want to see the solution, just keep watching this video and I'll show you exactly how I do it. Otherwise, if you want to give it a shot, now is the time to pause the video and try doing this on your own, which I strongly urge you to do. Definitely try to do this on your own first. But you know what? If you don't feel confidence in doing all that just yet Hey, that's OK. You can watch my solution, and then you can give it a shot after, if you like. So I'm going to create an H one in here. Just some large text, and I'm going to say my favorite cat is and then in here, I'm gonna put a span of cat name, has an idea of cat name, and it's gonna start off with the name Zephyr. And when I refresh my page in here, you can see my favorite cat is effort. Now, what I want to do is I want to exchange his effort for something else. Now I'm going to take a slightly more complicated route here, and I have to start with my script, right? So I'm gonna start with an opening and closing script tag, and I need to select cat name. So variable cat name is equal to documents dot Get element by I. D. Cat name. And if I save and refresh, you'll see. Hey, nothing's happened. That's expected. All we did was put a note in to a variable. And if we do this, if we type in cat name, you can actually see that it's being selected years. So let's hinges. Cat name and it's just selecting Zephyr. That's it. Now the goal is to basically take a string and can Katyn eight to that string. So let's go ahead and actually do is a little more complicated method. And let's call this variable called Zephyr, and we're going to get the cat name dot inner text. And if we do consul dot log is ever and refresh our page here it says effort just like that . Right in there. It's a little squishy, but hey, that's OK because this is just for debugging anyways, So we have his effort in there, and that's the current text. That's the current inner text. But for this mini project we want to concoct. Need a string and a variable. So we have a very bullying here. So let's can Cat named the string to it. So let's actually change us. Let's overwrite it. Let's do Zephyr is equal to Zephyr and let's cum cabinet a string to it. So it's going to say my favorite cat is Zephyr is equal to Zephyr, whatever that currently is. So it just happens to be this text in here and Henry now this sentence is not going to make sense, cause I'm plural. Izing it. But that's OK. We don't have to make it make sense right now. We just need to make this work. And so let's go ahead and type cat name on the dot inner text or inner HTML is equal to suffer, and so this gets a little messy. But hey, let's give us refreshing says my favorite cat is ever and Henry now, actually, a better way of doing this is not necessarily overriding this. That was just an example. We would probably want to new variable for this so called cats, and we would change us two cats as well. So we're gonna create a new variable called whatever's efforts has ever his name in there Plus and Henry. So if we work through this backwards, we have cats is equal to Zephyr. What does ever zephyrs equal to the cat named inner text? Well, that's using a variable called cat name. We know that that's this element up in here and getting that inter text. So we know Zephyr is basically this value right here. That's pretty much what it is. Actually, that is exactly what it is. And so it's kind of like saying Zephyr, Katyn, eight and Henry. And when you put those together, it looks like this. And so that's what in her H e mails going to be, your inner HTML is now going to be a Zephyr and Henry. And so that's sort of how it works. And if you ever need to replace variables with hard coated like strings or other values, that's totally okay. Honestly, whatever helps you learn this in your own way, is okay, So let's go ahead and save us. Refresh. And we can see that cat name is still in here Cat name and its likes all of it cool and that is how we replace it. Now. If we wanted to double check this, we could always view page source. And in our view, page sources says, my favorite cat is Zephyr. However, when you actually view it with JavaScript enabled, it says, my favorite cat is ever and Henry. Okay, so that's how we would go about doing that. Don't forget, you can always create a code pen, and you can share it on skill share in your project. Or you can just basically take all of your code. You can copy and paste it in there. You could take a screenshot of how this works. You can sort of do, ah, visual studio on the left and then the final output on the right. You can take a big screen shot of this and just say that in your project, and I can take a look at it and give you some feedback and hate. If you get stuck on this, don't forget. You can always leave questions, comments and concerns down below, and I will get to them as soon as I possibly can 11. String Manipulation: Hey there. I hope you enjoyed that many project. We're gonna do a few more of those down the road and, ah, we're sort of going to learn a bunch of stuff in between them so that we can, you know, learn a little practice a little, learn a little practice a little. I think that's a really good way of learning JavaScript. And so in this video, we're going to learn about string manipulation, and it sounds fancy, but really it's not. It is actually super super common in JavaScript to so string manipulation is basically we take a variable that's like a sentence or maybe a number, and we we manipulated. We change it. We force it to be something different, and there are several different ways of doing us. But in this video, we're just going to go over a few of them. So we're going to go over to lower case to upper case, split joined slice and sub string. There are way more of these, but I think this is a really, really good way. Do you sort of just get used to how we can manipulate some data? So first and foremost, let's create an H one with an i d of sentence and let's go ahead and put some Lauren Ipsum in here. And so when I say this, it's just gonna look pretty boring. And that's okay. We're not trying to make this look nice right now. We're simply trying to do some javascript. JavaScript does not necessarily mean things Look nice. CSS means things look nice. JavaScript means things are functional. And so let's go ahead and create a script in here. And we want to grab all of this text in here. All this Laura MIPs. Um, so we could do you know of our sentences equal to and then we could pace are lower MIPs, um in there. Or we could do it the javascript way and say documents does get element element by i d sentence. Let's call this sentence node, and I'm enough to make that smaller. Hopefully, that's still OK to see. And then let's do of our sentences. Eagle to sentence node dot inner text and let's go ahead. Just console log this council dot log The sentence is going to be sentence. And when we refresh and right click, inspect every click, inspect and go to our council. Ah, there it is. We see all this gross text in here, and this one might actually be better if we change the view to Let's change a to bottom. And so we have a sentence in here and it's a a bunch of Lauren Ipsum stuff so we can go ahead, get rid of that console log We know that is working and that our sentence is in fact, a string. How do we know that it's a string? Well, we could always do type of sentence tells us it's a string that's pretty cool. We can also just type sentence sentence and because it has a quotations around it, you know, it's a string, so let's just clear that out And let's put sentence back in there and you can see that it's sort of highlighting itself there. But it's not actually doing anything yet. So cool. We have our sentence text now. What if you wanted to make this all uppercase? Let's do var Upper sentence is equal to send in start to upper case. That's literally all we have to do, and we can actually test this out in our consul, too so we could do send in stud to upper, and you can see that it's auto feeling for me and then opening and closing bracket. And what this says is this is a function. We'll learn more about functions down the road. But basically this is going to actually take our sentence, the Lauren Ipsum text, and it's going to do something with it, and that's what this means. These opening and closing brackets or these parentheses means it's going to do something with it. Let's go ahead and hit, enter and look at that. It's all uppercase now, all of it. So we know that works, and we can simply keep that in there. We can also do of our lower sentence and let's go ahead and do sentence dot to lower case. And by the way, we're creating new variables here based on whatever this string is this variable. So we're not overriding sentence over and over again. We're taking the same sentence, which is this value in here, the Laure MIPs Um and we're saying hey, make it upper case. That's not gonna work either. Hey, make it uppercase. And then also hey, make it lower case And so basically, we're just copying the data over and over again without actually overriding it. So if you ever want to see this actually work, we could go ahead. Let's just copy that. Grab that whole thing Copy Paste and let's type lower sentence. Now we can see that it's all lower case. The first l should be upper case. It's not. It's lower. Case are right here. Should be upper case. It's not. It's lower case. And so that worked. What if we just wanted to get, like, the 1st 10 characters of a sentence? For whatever reason, we just want the 1st 10 and this is actually strangely useful. You wouldn't think you would use something like Just get the 1st 10 or the 1st 4 but yeah, we use it quite a bit in JavaScript. So let's go ahead and create a sub string. So we're gonna call this 1st 10 Chars is equal to that stands for characters sentence dot sub string, and this is going to take two optional parameters here, really out of the first ones. Not really option. So let's just do 10 and let's let's not do this in here. Let's go ahead and do it right in here where we can experiment so we can actually see what is returning here, says M. Dolar. Sit. Omit. So did todo m dollars it, um, it So what this is doing is saying, Hey, start at character 10 and grab everything else. So we've got 123456789 10. So it took those 1st 10 characters and completely disregarded them, and it started here M dolar sit omit, probably butchering that Latin, by the way. And we can actually see that. That's what it returns here. M dolar Sit in it. Cool. And so that's how we use sub string. This is pretty cool. I didn't didn't actually know that the council would do this, but it gives me from an optional length. How many characters do we want so we can start at the 10th character and let's say we just want to the next 10 characters. There's 10 11 12 13 14 15 16 17. We could do the next. That's a 30. There we go. So we have between character 11 and 30 showing up in here. And so that's what sub string does. And that's actually really useful. Because sometimes, you know, maybe a user inputs that you, Earl, and they don't put www in front of it. And maybe your website requires that or http in order to turn it into a proper link. This is where we do something like that. So let's go ahead. This is gonna be 1st 10 characters. Let's do zero and 10 and let's do zero and 10 in here cause this is basically a live preview. Zero and 10. We see Laura Ipsen lets you 11 Lauren Ipsum 1st 10 And because that variable says 1st 10 characters, let's do first 11 characters. Okay, These next two are going to introduce a new data type. So we know about strings and we know about numbers. We haven't really used numbers too much, but we know about them now. What happens if we wanted to get all the individual words in here? Well, in javascript, we have this method called Split, and basically we can tell it to split anything. So split anything in here and we can tell what to split on. So we say split on every sentence. What this is going to do is take every single, every single space in here like what we have here. So it's just gonna match whatever is in there, and it's going to turn this into a list is going to turn it into an array. So let's go ahead and let's do a live example. Don't do sentence dot split and let's split it on every single space. And let's do words is equal to and look at that. We have all the different words in your and if I make this bigger, we have all the different words and we can actually open and close this and it's going to show us all the words. So we have a list now. Now these air called a raise and JavaScript this call and a ray let me type that out. It's called an array Hurry array, And so really, all in array is is a giant list of numbers or strings or objects, which we haven't learned about, or all sorts of other different types of data and data types that we haven't learned about yet. And it can hold all of them in a list and it will maintain that order. So we can see Florham Ipsum Dolar said I met so on and so on and so on. So now we can go in here and we can say Vier all words is equal to sentence dot split and split it on every single space. And let's go ahead and do consul dot log all words. I didn't give this a refresh and this console log for me and this gave me all the words. Now, where is this useful? All right now, in the US, this is not very useful. But down the road, this could be very, very useful. We can use a thing called a four loop and loop through every single one and perform in action on them. We're not going to get into that just yet because that's a little more complicated than what we generally like to do at the very beginning of JavaScript. I just feel like that might overwhelm some people. It certainly overwhelmed me when I was learning JavaScript way back in the day. And so I would like to keep this, you know, nice and simple. Learn step by step, but okay, so we have all these different words in here and Let's say, Let's say for whatever reason, we wanted to peace those all back together. But we didn't want a piece him back together using a simple space. We don't want the sentence to look like a normal sentence anymore. Maybe we wanted to put parentheses around every single word. Well, we could do that. We could do Let's do far. We're gonna bracket the words here and we're going to join all of these together. So we're going to take all words not sentence. We want to take this one because this is the list. All words don't join and then it takes a string. What do we want to join it by? Well, if we do this and that's actually just save this and let's see what bracket words looks a look of that bracket words has all the different brackets around it, to the exception of the 1st 1 in the last one. Well, guess what? We can do some string and cat nation here so we can add a bracket there and we can do a bracket here and refreshing. Let's do you bracket words and ha ha! Look at that. All of our words have brackets around him now. And just for fun. What if we did sentence node dot in her text is equal to bracket words. Hey, look at that. So now we're actually doing something with our page. That's pretty cool. So I'm going to remove that because I don't want to change that yet. And there's one more that I want to talk about. And so, really, when we're looking at this and this, we have split and join. So Split is going to take a sentence and split it based on whatever you want to split it by . In this case, we used just a regular space, and then we took whatever that list of words was and we said, actually join them all together with something else. And so this looks a little weird. We don't actually need to use opening closing parentheses like this. We could if we wanted to use a bunch of spaces, and that's go ahead, refresh and type bracket words and look at that so we could do that as well. And so join and split usually work in tandem together. And there's one more in here. What if let's go ahead, actually refresh us. And let's do all words. We have this list of words in here. What if we just wanted the 1st 3 words? So let's go ahead and type all words dot slice and it's going to say this is a function. That's what the F means. It's a function. Where should it start and where should it end? Let's start at zero, because when it comes to computers, we start counting at zero. As humans, we start counting. 12345 computers. Don't computers go? 012345? Because to a computer, zero is a number to a human. Zero means nothing. There's literally nothing there. So number zero and let's go to number three. And that's going to give us the 1st 3 words. Laura, um, Epsom Dolar So? And then we can go ahead in our code, and we can say far, first three words is equal to sentence. No, that's not right. Already fooled myself. All words dot slice and just take the 1st 3 Just just grab a slice of it. So we just want to slice this. We say, Hey, if this was a giant pie, we want three pieces. Alternatively, we could also dio words dot slice. And what happens if we just said Start at this one here? So six went one too many. I guess on that one, because I didn't count them, Ahmed says. All words dot slice start at number five and go to the very end so you can see here. Ah, there's 20 items in this list. Now again, we'll talk more about lists down the road. They're super super useful, actually. Not super complicated, either, but it's going to start at number five, so it's going to start on 012345 And that's the one we told it to start on. Start on Consecutive tour probably should have used words that I can actually read. Uh, yeah, there is. It starts on consecutive tour, and now what we can do is we can say, Hey, we actually just want every word between the fifth word and the 10th word. We want all of them and that we want to put it into a sentence. So now we can actually do something kind of neat with this. So let's go ahead. Let's grab far middle words is equal to all words dot slice and we want to grab number five to number 10 and then we can do of our I don't call it makes sentence middle words dot join and let's join them with a just a regular space. And then let's go ahead and do sentence. Node dot inner text is equal to make sentence, and that's just give this a refresh and watch how it's going to take, probably from here to here ish I'm guessing, cause I'm not counting the words and it's going to replace this text with those middle ones . Tutta Just like that. It just replaced them for us and again one last time. If we go in view our page source Look at that. We have all of it in here. But hey, Javascript said no. Grab the sentence node, grab that inter text so that we can work with us as a variable. And so we've got a copy of sentence here. A copy of sentence here, a copy of sentence here, here and then with these, we can do different things if we wanted to, and like at the end where basically we took that sentence, we took this sentence. We took all over those words and we broke it apart based on spacing. And then we turned all of those words into bracketed words. So there were no more spaces, just brackets all over the place. And that's where where leave leaves off because we didn't do anything with that. Then we said, Actually grab the 1st 3 words and we said, Okay, well, there's a list of words in here broken apart by the space. That's what split is here. And we said, Just grab the 1st 3 So we grabbed Laura Ipsum Dolar, and that was the 1st 3 words. And then we said, Our we're not actually going to do anything with that. Let's take the middle words. Let's take all the words again. That's all of these Split on the space, Grab number five. So 012345 and then grab up until the 10th word. So 12 three or 89 and then done. And then we said, Hey, you know what grabbed those 10 words and put it back into a sentence so we don't want a list of things. We just want a regular sentence and Then we said I change that text, Change it to be whatever those five words are. And there it is. We have those five words just like that. So this is a base introduction into string manipulation. Now, at this point in time, you're probably thinking, Hey, that's not useful at all. But in the coming lessons, we're going to make use of quite a bit of this. So it's really, really good to know that these exist, even if you don't use them every single day is good to know that they exist. Now, me as a developer has a full stack developer that includes the front end. I use these almost every single day. But, hey, if that sounds like a lot of pressure, you're still learning. JavaScript. Just remember, you are still learning. You are a student of JavaScript. You don't need to be the very best. You don't need to know all of this off the top. Your head can always google it Pro tip. All of his senior developers, We girl things non stop all day. So don't feel bad if you ever have to google it and then lastly, just don't feel like you have to remember all of it because, frankly, you don't. You just need to know that these types of functions exist. So it's like if you wanted to take all of your words and make him uppercase, you don't really need to remember that it's dot to upper case. You just need to remember how to access it. And so, for example, we could do sentence dot and I just type you peopie for uppercase and look at that. It gives me to upper case, and all I have to do is add parentheses around it, and it does it for me. And so it's like a little reminder all the time. It's always there, and you don't have to feel the pressure of knowing all of it right away. Now, I would really, really appreciate if you could give this a shot. Just go through each one of these, write it out by hand. I know it can suck writing things out by hand, but if you write it out by hand, you're going to create muscle memory. And one day when your brain gets stumped and you can't really remember all of it, you know what your fingers were just gonna start typing away and they know what they're doing. You're thinking about something else and your fingers air just doing the work, and it does actually work like that. So go ahead, give that a shot, and then we're gonna head on over the next lesson whenever you're ready and let's learn about accepting some user input and making use of that. 12. Accepting User Input: Hello, Welcome back. Hopefully I didn't lose you on the string manipulation video. I know it was a little long. There's a lot to learn in there, but it's also very, very important stuff to know in this video we're going to learn how to accept user inputs in the form of a prompt. And so when we open a page, it can ask for your name or an age or something like that, and then you can actually work with that. And then you can turn it into upper case or lower case or anything like that. So I just have an HTML file here, and I'm going to create a new script. And let's move this sort of in the center of the screen here and let's create a new script and we're going to use a brand new function. It looks a lot like alert, but it's not alert. It's called Prompt, and this is just going to prompt someone for some input so we could say prompt and what is your name? And when I refresh this says, What is your name? I'll type in Caleb. Nothing happens. That's because all it did was asked for my name. I didn't store it in a variable. I didn't force the HTML to change. We didn't update the document object model. We didn't do anything. We just said, What is your name? And that's it. So while that's a cool function, currently it's not useful. So let's go ahead and make it useful. So let's save our name is equal to prompt what is your name? And then let's go ahead and console log that consul dot log your name is and name refresh. Put Caleb once more. Ha. Your name is Caleb just like that. And so that's how you ask someone for really any sort of data. Now, the big thing to take note of here is that whenever you use prompt, the input always comes back as a string. So if you're trying to add numbers together, so if you have to promise, like enter number one and then enter number two and then maybe enter number three, you might not get the results you're looking for. And as an example, let's go ahead and type name and we can see that it has quotations around it, so we know it's a string, but we can always also type type of name, and that tells me it's a string. So let's go ahead and get rid of this and let's inject this change. These underscores here from custom input to whatever the value was that someone put in there. So when I say what is your name? And I type in Caleb, these underscores. That should change to Caleb. So first things first. We need to grab this note This h three. Let's go ahead, create a new variable. It's called H three note. I guess documents dot get Elham meant by i d. And we're going to use custom input again. That just matches up here. And then we could say h three don't know. Dutch inner text is equal to whatever the name is. Let's go ahead and refresh and say, What is your name? Well, my name is going to be Caleb. Ah, look at that. Your name was or is Caleb. It's change what it is because I am not past tense. I am present tense. Now. What if we wanted to do some sort of string manipulation on this? What if I wanted to make sure l the input all of it is always lower case. Well, we could do two things if we know that is always, always, always, always, always going to be lower case. We could change it right away because a name is equal to name dot to lower case. And whenever we reference name down the road, such as in here, it will always be lower case. So let's give this an example. Caleb in all caps and I hit OK and it shows up in lower case. That's what we're expecting now. If you don't want this to always be lower case and you want to preserve whatever the user inputs and you just wanted to be lower case, just once you could do dot to lower case here, and then we could all stew like a console log, and we can log the original name. And so what we're doing is saying, Hey, what is your name store that invariable. Then we grab the age three note. That's this custom input and we say, Hey, let's grab that inter text and change it. Let's change it to whatever the users inputted. But let's actually make sure that it's always lower case and then Let's Consul logged the name. Now, at this point time, do you think the name is all going to be lower case when we do a console log? Will the name be entirely lower case? Because we said it's a lower case here or do you think it's going to be not lower case because we only changed it this one time? Now, that's actually good question, because different programming languages operate differently in this respect. So let's let's experiment with this. Let's go ahead and put Caleb in in all caps and we can see all lower case. But when we console log, it's all in caps. So this did not actually change it at all. So what we did here named out to lower case It didn't actually change the name value. It just changed it this one time. It just changed the value of this one time, but it didn't actually change the entire name forever. And so this is where we get into a lot more variable manipulation, string manipulation, things like that. Because now we can preserve the user input. That's the name. And we can say, actually, you know, just in this one case, make it lower case, but in every other case, keep it the same because we might want to do something with it. So this is a very simple way of accepting user input. And in the wild, in a live website you don't see this used, you see text fields being used, you see text areas drop down, things like that, and we're going to get to all of that. But we need to learn how to manage user input to begin with, and this is a really good stepping stone for that. So we've learned how to accept someone's inputs, save it in a variable, grab a node and then change the value of that note to be whatever the prompt was, whatever the user input was. And this sort of prepares us for a thing called event listeners, event listeners are how we can basically say, Hey, any time someone types in a text area or changes a select field, weaken, do something based off of that. And it's at this point that our code actually becomes quite dynamic because up until now we haven't been able to accept custom input. We've had alerts that tell us things but we've never actually been able to inject any sort of text or variable information onto the page. And now we can. And so I think, for the next couple of videos were going toe, learn how to sort of work with this a little bit, and that's going to really prepare us for the more future JavaScript. When we deal with the event listeners and more user input and how to manage all of that. And just as a refresher, let's go ahead and let's say name and let's do alert name. What is your name? My name is Kate Lubbe, and they're gonna click. OK, it's just going to alert. My name is Caleb. My name is Galeb, just like that. And that's all there is to prompt and alert. And now you're a prompt and alert pro to be totally honest. Okay, so I just undid that Now what happens if you want some default? Texan here, let's say you're tinkering around and you know you're experimenting. You're learning your playing with javascript as you should be, but every time you refresh the page, you have to type in the name. Well, eventually you're gonna start typing and stuff like this that's not super useful. Let's give it a default. Let's go ahead and the second parameter of prompt is going to be. I'm just putting my name. What is your name? Caleb? And when I refresh, it's automatically filled in for me. And another thing to note in here is when we refresh, Let's get rid of this and let's click OK, and let's go in here and say What is name? Name is an empty string. There's nothing in there now. What happens if hit Cancel instead of leaving it empty while it says My name is null, So let's go ahead and see what name is. Name is a string called No or so it seems. Let's double check that you type of name, and it is a string, and so basically there's nothing in here. In the next video, we're going to learn about these things, called comparison operators to make sure that our input is actually what we're expecting and if it's not, do something else, and this is how we give computers commands based on user input. So let's jump over the next video where we learn about comparison operators, and this is really where everything we've learned so far turns into riel programming 13. Introduction To Comparison Operators: Okay, let's take a look at comparison operators. Operators are the little pieces of logic in a program that tell us to do a certain thing or tell us not to do a certain thing. Basically, it's how we taken action based on a variable value. This is where variables really become super importance, not just about alerting things or console logging, its about giving a program a particular task to do. Or maybe not to dio. And so a comparison operator basically looks like this. Let's go ahead, make some room here. It basically says, If your name is Caleb, do something otherwise or else do something else that's basically all it is. And in fact, in the world of Python, it actually looks a lot like this. Very, very, very similar. JavaScript has a different type of syntax, so the way we make it look, let's go ahead and create a script tag here. And let's take a look at our first if statement. So we're gonna hard code this and then we're going to turn it into a prompt where we can actually accept user input. So let's do far name is equal to Caleb. We're gonna have to make this little smaller here. And then we could say, if parentheses? Because it's doing action, right? If it's going to do an action, you're gonna need some parentheses in there if name equals equals Caleb Opening Curly bracket closing curly bracket just like that. And this is an if statement. So you're saying, Hey, if a variable is equal to whatever you're expecting it to equal to alert, do something and let's go ahead and refresh and it says, Do something now why did you do that? Because you can really see that name is equal to Caleb. And if the name is equal to Caleb now, there's one caveat here is we're using to equal signs. One equal sign means this is the variable. Variable is equal to whatever this value is. That's one equal sign to equal signs. Means hey, is the name Caleb are, which we're checking to make sure that it is actually the right name. So this one is called an assignment operator, and this one is a comparison operator. Now there are several other comparison operators out there, but we're really just going to learn about this 1st 1 For now, to keep it nice and simple. So now let's change this to prompt what is your name? And now I can refresh is going to say What is your name? And if I type in any other name, let's I'm gonna be my cat for a moment. His name is Zephyr. I'll type in Zephyr. Nothing happens. And that's because if we go in here and we type in name, we can see it. Zephyr. And we're saying, Hey, if the name is equal to Caleb, do something, It's not Currently it's saying its effort, But if we refresh and I type in Caleb with a capital case so it matches this value right there, he says, do something cool. So now we actually have something to work with. Here we can say, Hey, ask the user for some information, and if that information matches what we're expecting, Weaken, do something else. So now let's make this a little fun or let's make an H one here I d is equal to just call Welcome. And let's turn this into eight nodes of our welcome node is equal to documents dot Get element by idea it auto fills for me That's nice name. Make it smaller. So it fits on one line. And now we have this in here, and we can say, Hey, if the name is Caleb, Welcome note dot Inner text is equal to welcome to your website, Caleb. And before we give this a shot Ah, I just noticed that we have document I get l element by i d. It's not the name. Welcome. In my fit of excitement, I got a little too ahead of myself there and, you know, fun Fact that happens to all of us. So now I'm gonna hit, refresh and say, What is your name? I'm going to say my name is Caleb. And now it says, Welcome to your website, Caleb. And if I say any other name, if I said my name is no, not Zephyr. Let's be Batman. My name is Babin does nothing. Batman is not supposed to be here. And Snow, we have some logic and something happening based on the fact that my name is Caleb. Now, what if we needed this to be a little more accepting? Because right now you need a capital K. If I type in Caleb with a Capital R, A lower case K, nothing happens. Okay, well, now we need to actually change this. We need to say if name is equal to Caleb with a lower case K. Well, that's not gonna change for that. And that And that and that and that. Those are all the different variations and mix and matching them, Of course. So what we can do is we can say, if named to lower case. So we're gonna take whatever the name is turned into lower case and then compare the lower case value. Let's go ahead and do this. Lets you all uppercase Caleb. And then let's say okay and says, Welcome to your website, Caleb. And that's because we said, Hey, if the name all capital letters, Caleb, and then we force it to be lower. Case is equal to lower case Caleb. And now it's going to match on every single one. We could say K a l O b. Damn. It still works. And this is where string manipulation gets very, very useful. So now at this point, we need to take a look at the actual if statement itself. What is making this trigger while it's not just the fact that it does match Caleb. Yes. It's looking for a match with the logic behind it is saying, Is this statement true? Does name dot to lower case equal? Caleb? Well, if someone were to type in Caleb like this, would that match? No, those air different to a computer. But we said to lower case, which is the same as saying, Is Caleb equal to Caleb? And if yes, this would be true, Your computer then says Yep. This is true. Logically. Beep, beep, beep, beep. Yep, This is true. Make it do something. And so your if statements should always return true. And then what happens if we don't return? True, how do we handle something that is the opposite of true? How do we handle something that's false, or how do we handle multiple scenarios? Well, those are things we're going to get into in just a little bit for now, I think we should just practice a simple comparison operator just to sort of get the hang of it, because this is where we can have a lot of fun with it. We can do anything with our website at this point. based on just if statements. And then, lastly, let's take a one more quick look at the syntax here. So we've got if parentheses and then inside of these parentheses, so I could actually delete that if whatever in here is true, so if value one is equal to value to, then you have some curly brackets. You've got opening curly bracket and in closing curly bracket, do some stuff in here. And if it's not true, if your if statements does not turn out to be true, this does not execute at all. It just skips over your program, says there's nothing there. I'm not going to do anything with that. And that is essentially the core of every single programming language on the planet. If you want to get into artificial intelligence, if you want to get into machine learning, guess what most of it is a ton of. If statements, it's if a data points matches a certain value. If a set of data matches exactly the outcome that you're expecting. If it is not, do something else that's really all it is. Even if you look at you know, more fantasy movies like I robot, you know the machine, The sunny was his name. Sonny will look around and he will analyze the entire picture. And you will say If there is a person there, say hello. If there is no person there, keep walking. So that's an if else statement. And at the end of the day in programming, everything boils down to something called a Boolean. It is either true or is false. That's it does not really a whole lot of middle ground there. And so that's all we're doing here is we're saying, Hey, is this true? A of this statement? If this if statement is true, do something. And if it's not, maybe do something else. But we'll learn about that in a future lesson. So what I would like you to do is give this a shot, ask for your name using a prompt, and then check to see if that name matches a value that you're looking for. And if it does match that value, then do something else. Just write an if statement and sort of get used to it. And don't forget, you can experiment. You're not going to break anything. You could always do, like hey, if my name is Nathan. If my name is Zephyr, anything like that, he could also do. I doubted that data instead of to lower case you could do to a bird case. You could do something like that. You do all sorts of things, So don't forget to just tinker around that. Have fun experiment. You're allowed to experiment. And once again, there's no possible way you can break anything on your computer just writing this so you are totally safe to experiments to your heart's content. 14. Handling Opposite Operators: hello and welcome back. In the last lesson, we learned about comparison operators. In this lesson, we are going to learn about handling the opposite of something that is true. So, for instance, if we have a script that asks for my name and it says, Hey, if my name is Caleb, welcome me. What if my name is not Caleb? What if you're asking for a course and it is not JavaScript for beginners? Let's go ahead and do that. Now let's say var that was called input is equal to prompt. What course are you taking? And then we could say with an if statement if input dot to lower case is equal to JavaScript for beginners and that just make sure that it doesn't matter if there's Ah, capital letter or no capital letter and then let's make this smaller curly braces. And then we could say, you know, do something in here. And so we're familiar with this already. In fact, we could actually clean this up to we could say, input lower. Let's just call it that of our input lowers equal to, and we'll just create new variable called in, put lower, and that just matches this one here. But what if the course is not JavaScript for beginners? What if you're taking another course of mine called Javascript essentials? Well, you need to be able to handle that. In fact, what if what if someone types in anything that is not this while you need an else statement ? So if something else do something else and really it boils down to something like this. You can sort of read this like a sentence to let's make some space here. And you could say, you know, if the course is javascript for beginners, do a thing otherwise or else do something else. And in fact, this is interesting, because if we said this, this is python. Mrs. Python sent syntax. And so, by learning javascript syntax here already somewhat familiar with python syntax. So no, your skills and python or your skills and javascript rather are actually paying off because you're learning how to apply logic in other languages. It just looks a little different, but yeah, this is how it works. And so you can actually read this as a sentence if courses javascript for beginners do something. But if it's not, do something else. That's all it is. And so the world of programming is really just made up of, if else statements. It's a bunch of if statements l statements and ah, hybrid of both called and if elsewhere, else f depending on your language. So if this is JavaScript for beginners, let's add add. Ah, welcome message. And if it's not, let's say you're in the wrong course. Well, we need something to do here, So that's a H one. Let's give this a name of text and i d of text and we need to grab a node here. So let's grab this node. Vier text is equal to documents dot get element by i d text. And then, let's say text dot inner html is equal to It's too strong. Welcome. It's that strong to JavaScript for Let's do another strong beginners. And now we're writing some html inside of her JavaScript. And what if it's not? Right? Well, we could do this and just copy that, cause I don't want to write all of it over again. We could just say you're in the wrong course and watch this. What course are you taking? Okay, well, let's say I'm taking another course that I have called javascript Essentials. Yeah, because I'm in the wrong course because we're not in javascript essentials. In fact, the one that I'm in is JavaScript for and that's really messes up Once put it all in capital letters or the last word's gonna be capital letters. JavaScript for beginners. Welcome to JavaScript for beginners. And if we view our source here, we doesn't actually doesn't really look like it's bold, but it is. We've got a strong element there. We've got a strong element here and regular text in here. So there we go. And that is how you do in, if else statement. So basically, you're saying, Hey, if this is true, if we are in fact in JavaScript for beginners, execute this otherwise doesn't really matter what the answer is. We're saying any other answer in the world, execute this line. So go ahead. Give that a shot. You're going to need to know how to do this for our mini project that is coming up. You're definitely going to need to know how to do it if else statement and at this point time, if you get stuck with this, don't forget, you can always leave a question down below. I am always here to help 15. JavaScript Mini Project #2: Welcome to your second mini project. This one has to do with comparison operators. So I hope you had watched the previous two videos in this many project. What I would like you to do is ask the user for a you Earl, and then check to see if that link starts with http. And if it does not start with http, I want you to fix up that link. So fix up the variable and then injects that as a link into the page. And so, for part number one, you're going to want to use prompt for part number two, you're going to want to use sub string. Part number three is you're going to want to use and if maybe if else statement or statements and then part number four, you're going to want to grab an HTML elements node and change the inner HTML toe, have more html inside of it. I'm going to do this project right in front of you as well in the same video, but I think would be best if you could pause the video now and just give it a shot yourself . Get as far as you possibly can and then you know what? If you get stuck, just resume the video and you can watch exactly how I end up doing it. So go ahead, click Pause. Give it a shot and I'll see you in just a couple of minutes when you hit Resume. Okay, So the first step was we needed to ask the user for input. So let's create a script in here where we put our JavaScript and that's a fire. You where l is equal to prompt. Enter a u R l whatever that's going to be. And so we'll just do this piece by piece. Here I'll refresh. Enter, You are out and I could do coding for everybody dot com does nothing as expected. So we just have a girl in a variable, but we haven't actually done anything with it. Let's go ahead and move on to step number two. Let's see if it starts with http or if it does not start with http so we can say if you are own dot sub strings up string 04 so starts at character zero, which is one in computer language. Go up to the fourth character is equal to http then it's good and we can console log that we can say Council don't log the euro is good, Otherwise we need to fix it. So consul dot Warren and so bad you, Earl Bad, Bad. You are ill. Let's go ahead. Give this a shot So I go ahead again. Any type coding for everybody dot com and it's not counseled out warm if you were screaming at the screen. Uh, yeah, that's a good call. It's worn fun. Fact, uh, coding for everybody dot com is try this again and says, Bad you are. Well, what if I refresh the page and say H T T p Golin slash slash coating for everybody dot com and says the girl is good? Okay, so we have a working if else statement in here. So if the u. R L is good, we don't really need to do anything. But if the u. R L is bad, we need to fix it. So let's go ahead and fix this. U R l we're now going to fix it by saying the u. R L is equal to http colon slash slash and then we're just going to contaminate the rest of the girl. Yeah, we can get rid of these Consul logs if we want to. Do they're not really doing anything on. The last step was we need to select an HTML element by its i d and change the inner HTML to have a link in it. So let's go ahead and do that. Now let's create a paragraph. Let's say this is the link and let's just create an empty span in here That's called Link is not gonna be anything in there. So when we refresh the page, you see it cancel. It just says This is the link we can actually see that even has an uncaught type air cannot read property sub string of No, because there's nothing in there. That's what happens when we click. Cancel. At this point, we should have somewhat of working. You are assuming you actually type something in there, and then we just need to put it in here. So let's grab that node. Let's do var Link node is equal to or I guess it's a span notes. Oh SPAN note is equal to document. I get element by i D and just called Link and let's go ahead and put span node dot inner HTML is equal to the URL, so we're almost there. Let's go ahead and say coding for everybody dot com. It fixed it for me. Cool. But ultimately, that's not quite what we're looking for. We actually want this to be a link to coding for everybody dot com. So we need to put this into some HTML and this is where it's drink and Cat Nation comes in So we could do this a couple different ways. We could say all of it in one line. A h r E f is equal to and then closing. And then we could go in there and we could say Contaminate this and we could put the U. R L in here. And then we can also contaminate in here with the girl. And so this will work coating for everybody dot com. And when I click it and you can actually see it says, quoting for everybody dot com, boom loads the site. That's pretty nice. Or if you wanted to write some slightly cleaner code, we could also just say HTML will create a new variable called HTML and this way We have our HTML in a new line, and it just doesn't look as crowded so we can do the same thing here. We can't say google dot com and don't take us to http google dot com There's actually a short cut. Ah, we currently have an empty if statement. So like, why even write that? So what we could say is we could skip this whole thing. Let's get rid of the else statement and we get, say, if it's not so to compare something to make sure that it is true, you say to equal signs, to say something is not true or not the same. Rather, you say, exclamation mark equal sign. And that says not the same. So let's just zoom in and it looks like this, not the same. And so what we're saying here is if the girl in the 1st 4 characters is not http, make sure it is http. And then we got rid of that else statement. So now we're saying, basically, if it doesn't start with http, it needs to so overwrite the euro. Let's give this a shot. Let's go in here, refresh. Last time, what side do we want to go to you. Let's go to facebook dot com and bam, that works. What if we already put http in there? You know, a copy and paste You are all that's already in their http YouTube Elcom. It's also working, so it's all good. This is working perfectly fine. And so that is the entire many project. And so what we used is prompt. We use an if statement. Actually, we used an else statement technically, and then we sort of combine that into one line. We'll talk more about this a little bit later. You didn't have to know that one off the top of your head. Then we grabbed our SPEN and then we injected HTML into it. Furthermore, we could actually do this. We could check to see too, if someone has canceled. What is that you are out? Well, that you are l is equal to know type of new URL is an object. And so we know that this is going to be some sort of data type, and actually you might not know that And that's okay. You don't really need to know that what I'm going to do is show you something pretty pretty cool, in my opinion. So we could say if the girl is equal to know Alert, Cancel this quickly because we don't want it to execute. So let's go ahead. Cancel this quickly because we don't want it to execute. And so we could actually say if the girl is equal to know, then cancel this else and then we could wrap everything else in that else statement is now we're saying if basically no one has clicked council, we're good. But if someone has quick council, we're gonna say alert to this, we're gonna say, cancel this quickly. In fact, actually, what we could do is we could do absolutely nothing or we could do console dot ever missing input. Otherwise, if someone did put something in there, we could then do an if statement in here. And then we could do the rest of our logic. And so let's go ahead and give us a shot hit. Cancel missing input just the way we expected it to. So there you go. That is your mini project number two. I did a bunch of stuff in here that I did not expect you to know for instance, if you're l is equal to know. Yeah, I sort of just pulled that out of a hat. You didn't know about that one yet? The if not statement. You didn't know about that one yet either. That's okay. We're learning things together at the same time. We're going to go over all these things a little bit later down the road to and I like to sort of just drop in some of these. I call them Golden Nuggets. Just these little hints of slightly more advanced things in inside of code. That already makes sense. So you're constantly pushing yourself. You're not pushing yourself too hard. Now, don't forget, you can always put this in a code pen. Or, you know, you could just take a screenshot like what I have here. You've got your editor on the left, and you've got your browser on the right, and you could take screenshots and share it in your skill share project. 16. Handling Special Cases: okay. We know a little bit about comparison operators and how to handle something that's returns true. And something that returns false. We know them to be, if statements and else statements. But what if we want to match more than that? What? We could do something like this. You know, if our name is equal to Caleb and then we could say if name is equal to Caleb, do something in here, okay? And what if it's not Caleb? Well, what if the name is Zephyr? Well, then we would have to do if name is equal to a Zephyr. Skins ever action in here and then we have an else statement. And what if the name is not Zephyr? What if it's also not Caleb Wars ever? What if the name if the name is equal to Henry Henry Action in here else? What if the name is not Caleb Zephyr or Henry? And this goes on and on and on and on, and it just gets really gross. I mean, even looking at this right now, it's sort of it seems a little confusing to the naked eye. You just look at it and you go. That's a lot of nesting, and this could go on forever and ever. Luckily, there is a better way to handle this. In the world of JavaScript, there's actually two ways we can do this. I'm gonna show you the main way. The most common way. They wouldn't show you another way. That's a little less common, but also a super useful. So what we can do is if the name is equal to Caleb. Great. You know, council don't log awesome. Okay, we can also do else if the name is equal to Zephyr and then we get, say, council dot log no. And then we can say else if name is equal to Henry Consul, that log little me. Oh, because he's a little kitty. And finally, if it's not Caleb or Zephyr or Henry council dot warren not handled something like that. And let's go ahead and give this a refresh, and we can see it says awesome in your let's make that smaller. And if we change that name to Zephyr, says me. Oh, if we change that name to Henry, we know is gonna say little Meo because that's what we wrote. A little meo and If we change it to anyone else, let's change it to dog. Oh, dog, it's not handled. And so this is how we get away from nesting if statements inside of if statements inside of if statements, we can keep them nice and flat like this. And in fact, my editor and most editors will allow you to do this because you have curly brackets in here you can actually close them to. And so now it actually looks a lot more clean. You can you can actually sort of read this. If name is equal to Caleb, it's gonna do something. If it's equal to Zephyr, do something, Henry, do something, or if it's anything else, do something else. And so if you're ever looking through a lot of code, you're like, Ah, what happens if the name is Zephyr? You just open that up console log meal. And so that is how we get away from a nested. If statements now in Javascript, there is another way of doing this, and many other languages have this as well. It's called a switch statement. You don't see it too often anymore, but it is definitely a thing you can lean on whenever you have a lot of, if else if statements. So you just say switch and you give it a variable, whatever that is going to be curly brackets and then you give it a case. So the case is going to be Caleb. And then if the case is Caleb, you could say council dot log uh, Caleb. And then we say break. And this is like an if statement Onley instead of using curly braces, were using a colon. And instead of this curly brace, we're using the word break. We'll actually see the word break a lot more when we get to wire loops. Four loops for each loops, things like that there we could give it another case. Any other name we could say, Nathan consul dot log. Hi, Nathan break. And then we could say so on and so on and so on. Or if we just wanted to catch any other scenario, we could just say default council dot warn not handled and break. Let's go ahead and let's changes from name. That's changes to family member. And let's create Var. Family member is equal to start off with Caleb, I'll be me and says, Hi, Caleb. And then if I changed it to Nathan Hi, Nathan. And what if I changed it to Wade? Not handled on 9 22 like that, not handled line 22. So this is basically the exact same way of doing. And if else if else statement some people like this way, some people like the if else if way, personally, I lean towards the if else if else way, it just seems a little more explicit. And not everybody knows about the switch functionality. So it can be a little bit harder for someone who has never seen a switch statement like this before to figure out what's going on, whereas every programmer you run into will know about if else if and else statements. And so one thing to note here is is going to try to match that first case and stop. So what we're saying here is if the family member is Caleb, console, log high, Caleb, and then stop. Don't do any of the other ones, just like down here. If the name is equal to Caleb, then just execute this one. But it's not. Then it's gonna try to do. This one doesn't match? No. Then it's gonna try to do this one. Does that match? No. Then it's going to do the else statement. And this L statement is actually optional. You don't need to have that in their you can say if the name is Caleb Words that for, or Henry taken action. And if it's anything else, don't do anything at all. You could totally right that So what I would like you to do for some hands on experience here is right. And if else if else statement it doesn't have to be big, it doesn't have to be complex, you know, just like something. What I have here, just a bunch of console logging. That's totally okay. I just want you to get some experience with the else if syntax and really, when it comes down to this intact, it just looks like someone grabbed an If statement like this one up here and in their else statement, they just pasted it in. That's all it is to give that a shot. Don't forget to have some fun with it, and when you're done with that, let's head on over to the next lesson. 17. Code Comments: Okay, Welcome back to another lesson on learning JavaScript. We are going to talk about code comments now, generally, in a course, I put code comments first, but frankly, they're boring. Unfortunately, they're also super useful, and it makes sense to learn them. And so I sort of wanted to defer that and get to some of the funder stuff before we get into, You know, things that are not as fun like code comments. So at this point, if you don't know what a code comment is, you should be asking Caleb. What is a code comment? Well, a code comment is basically a way to take a piece of code that you've written and tell your browser not to execute it. So I have an example here. Console log comment. One end to and if I refresh my page, we'll just see comment. One and two. In fact, let's make two show up four times to a comment one and then 222 and two. So let's say we have a bunch of code in here on one line and we don't want it to be executed at all. We say, Hey, javascript, don't execute it and All we do is we put one slash with another slash together, and that creates a single line comment. So if I save this and refresh comment, one no longer shows up in here. Now, when it comes to multi line comments, most editors you can hit like a command slash shorts like CMD plus Slash. Or if you're on Windows, it's usually control slash something like that, and you can select all of these these lines and you can comment them all out at the same time. But that's not a multi line comment that's commenting out every single line individually. So if we wanted to get rid of all of them, we would do slash and then an asterisk, and then at the end we would do an asterisk and then a slash, and this will comment on everything between these two points. And so if you remove the space, you'll see my code goes gray, and that's going to keep going on forever and ever and ever. So if I do council, you can see that my code is still gray year consul dot log. Do I show up and let's get rid of that one? Oh look at that. There's actually a syntax error because the comment was never closed. But if we do asterisk and then a slash right after that saying, Hey, everything between here just commented out. So save refreshing. Do I show up? Yes, you do. You do show up because all the other lines Air commented out. So let's view our page source and we can see there's a comment here, and there is a comment, a multi line comment here getting rid of all of number two. You can also comment out the end of a line as well. So instead of just having a comment at the very beginning, you could have a comment after it so you could save our name is equal to Caleb. And then, if you wanted to make a code note a code comment when you put two slashes afterwards and say, This is my name and that's not going to execute either. But as someone as another developer looks at your Cohen says Var name. What is that supposed to be? What kind of name is that supposed to be a person's name and say This is my name? All right, well, I know that's the developers name now, so I can refresh. And it just says every time I refresh, do I show up? Yep, you do show up. And when I refresh this var name is Caleb and let's make sure that it still works that's going here and type in a name. Name is Caleb ha ha. Look at that. And anything over here to the right of your double slashes is not going to show up. That's going to be commented out. So moving forward, you're going to see me doing a lot more code comments. This is a really good way of writing a bunch of code that does not actually need to execute , and it's also a really good way of, just like testing things out. So if you want a consul long something and you're not sure if you're going to use it later , just commented out or a comment comment uncommon to comment on comment. That's all there is to code comments not super super interesting as a topic to learn about , but very, very important, and you're going to see this all over the place in every single programming language, you will see code comments everywhere 18. Introduction To Arithmetic: All right, let's talk a little bit about arithmetic. So basically, that's just a fancy word for math. You know, multiplication division addition, subtraction on. Then you've got things like modules, which is remainder and exponents, and that's really all there is to it. And then, you know, there's a few extra functions we could get into for, like, sign and co sign. And I'm just kidding. We're not going to do all of that stuff. We're just gonna work with the basic stuff for now. Actually, that's really all we're gonna work with at all, because when it comes to coding when it comes to programming, it turns out that most of us coders air. Actually, we're kind of lazy, and we are not interested in writing all sorts of complicated math. We don't want to get into calculus and algorithms and things like that. Yes, algorithms are a buzzword, and it's it's fun to talk about that. But at the end of the day, do we want to be spending eight hours a day writing that honestly know most of us don't. And the good thing about coating is you don't have to. You can get away with a simple, simple math. And so in this video, we're going to learn about a little bit. You know, some of the basic arithmetic behind JavaScript and really, we're just gonna stick with multiplication addition, subtraction and division. Okay, so let's go ahead and let's create a variable in here. So we've got variable Number one is equal to 100 then we've got variable. Two is equal to I don't know, let's say 33.5. I'm honestly just making up numbers at this point. Now. If we wanted to do, let's say, divide these numbers, let's say we wanted to divide 100 by 33. We could do numb one divided by numb to and you can actually see that's going to give me the exact number down here. And so this is division. It's just a sash. That's all it is. And if we wanted to multiply these numbers, it's just the asterisk. So you do, Ah, shift and then the number eight and you'll get an asterisk, although on some keyboards that might be a little bit different. But on a standard keyboard, it's shift eight to get that asterisk, and you're gonna do multiplication subtraction is just a dash, and addition is just a plus sign, and that's all there is to it. And honestly, it's very, very rare to use anything more advanced than that. Occasionally we'll get into something like Module ISS, which will give you the remainder of something. So if we did 10 module ISS three well, 10 divided by three goes three times and then there's a remainder of ones that was 369 and then 10. Minus nine is one. So basically it's just remember Long Division. Well, it's like that. And then that's the remainder. And then we also have exponents, which is just to multiplication signs together. Now there's one rule. When you are working with larger formulas, you also want to keep in mind. Ah, the rule of bed mass and it's actually a different acronym for several different areas of the world. But the way I remember it is bed mass. You have brackets, exponents division and then multiplication, and then addition additional addition, slash subtraction, whichever comes first sub. I don't know how to spell that apparently sub attraction, And so the idea here is whenever you have advanced math It's not really advanced, but it's a little more advanced. I guess. There's an order of operations and it's bed mess. So whenever you see brackets, do your brackets first, Do the math inside of that first, then the exponents inside of those brackets, then division and multiplication, whichever comes first from left to right, and then addition or subtraction, whichever comes first from left to right. So an example of this would be if we wanted to find out what 30 degrees Celsius is in Fahrenheit so we could do Celsius is equal to 30. And then to figure out what the answer is. Well, you could dio see Time's 1.8 plus 32 and actually get rid of See, That should preview for us. There we go. So it's 86 F Now. The order of operations where this becomes important is we did this backwards plus 32 times , 1.8. We had a slightly different number, and while that's not a big deal, it's only 1.6 degrees difference in, you know, regular weather temperatures. If you were 1.6 degrees off in a circle, that could be significantly different especially if you're trying to point a telescope to maybe a particular star. Well, you're gonna miss that by a lot. And so this is just a simple example. But your order of operations is important. And so this is the same as, you know, doing your brackets first. So you've got C, which is 30 multiplied by 1.8 plus 32. And so it's going to do this first and then whatever that is, it's going to add 32 on top of it. And so that's a super super fast crash course into basic algebra. Just be simple order of operations. And again, you really don't need to know too much about this because for the most part, we don't do a lot of math until we get into, like, the really nitty gritty of something super complex. And for most of us, that doesn't happen. So this was your introduction into arithmetic. Just as a quick summary. Here you have num one divided by numb to So you've got a division sign here. Multiplication is your asterisk. Subtraction is just a dash. Just the subtract sign and then the plus sign to add. And if you wanted module iss. You could use the percent sign. And if you want it and exponents, I have no idea what this is gonna be use. Yeah, as a really big number. You use two asterisks side by side, so it looks like multiply, multiply, which is exponents. 19. Boolean Logic: All right, let's get introduced to a new data type called the Boolean, and you see that here and again, this is just a fancy programmers term for either something is true or it is false. That's it. It's either one or zero, true or false, on or off black and white day and night. There's no in between. And you know how people always think that robots or machines only ever think in black and white. Well, they're not entirely wrong because a lot of logic does come down to true and false, and there isn't a lot of giving between their now weaken. You know, when it comes to machine learning, we can give an answer like 0.6, and that leans more towards true than false, and we can work with that. But that's not the same as Boolean logic. We know that 0.6 is a number, and Boolean Logic is true or false, so we can work with us in a few different ways. But first and foremost, let's go ahead and create a script, and in this script, let's go ahead and create a boolean variable. So it's creative. Variable is cat is equal to true. And so let's just talk about my cat Zephyr. And we can say, Is my cat a cat to true or false? And so we could say in a comparison Operator is cat, and so we can actually do this. A couple of ways we can do is Cat is equal to true, which is the more explicit way of writing it. But that's sort of unnecessary, because when you do any sort of comparison operator, it's always checking to see if that statement eventually turns out to be true. And while this is already true, so we could short cut this and just say is cat. It was a console dot log. Zephyr is a cat, and let's go ahead and inspectors and open up our Council Council Council Council. It's actually switched at the bottom. Here we go, and it says Zephyr is a cat, and if we wanted this to be false, we could just say, Hey, you know what is cat false? Maybe Maybe I got a dog and named him Zephyr as well. And nothing is going to show up, However, because we know about the else statement we can now say council dot log is not a cat and there we go. And now we can just talk about true and false is a cat is not a cat. We could even get a lot more complicated with this if we wanted to. And we could ask the user for a name so we could say of our name is equal to prompt and her name If name dot to lower case is equal to let's make that smaller is ever is cat is equal to true. Let's go ahead tonight into a virus. Well, otherwise we're going to save our is cat is equal to false and I'm just sort of really nearly throwing semicolons in here. They're not necessary, but good practice to be in anyways because all JavaScript, once compiled into production gets Min ified and squished, and it all becomes one line of javascript and so it eventually puts semicolons in there anyway, so it's a good practice to have, but not always necessary. And then we could say in here, you know, actually, in real life we would have some other logic and here, based on the variable, is cat. And then we could say if is cat alert. You're a cat kitty cat. And we have a immune to Miami on now. Alert. You're not a cat. You're not a kid. He got at all. Okay, so I refresh. And if we walk through this is going to ask me for the name into your name. Okay, I'm gonna type in is Zephyr. I'm gonna spell it, right? Those effort, and it's going to take that name lower case it and check to see if it matches. Lower case ever. So I hit. OK, and it says your cat says Goes ahead. Says he Okay, there's variable in here. Is Cat is equal to true. Does some logic some other magic stuff behind the scenes and then with another If statement , if it is a cat alert, you are a cat. And so that is your base introduction into Boolean logic. Now there's another way we can do this. We can actually shortcut the If and Ellis. So let's go ahead. And you know what? Yeah, Let's keep that. I like that. That's in there. That's making our programs a little more complicated, so we can also shortcut the if else statement. So if We just wanted to check if something was false. We could do. If is. Cat is equal to false alert, not a cat. So let's go ahead, and I'm going to give this a default as well, so I don't have to take this over and over and over again. Zephyr. You're a cat that's executing line 21 down here. And nothing because it wasn't false, so this didn't execute. But what if we said Henry, my other cats? It says You are not a cat that executes Line 23 it's also going to execute lines 27 through 29 says not a cat. That's right here. Now we can also shortcut this the same way we did. If is cat, we can do the opposite by saying, Exclamation work is cat. This is saying false. So let's go ahead. And what I'm gonna do here is let's go ahead and put these on separate lines. Let's move that up so you can actually see it. So this is going to be false as well. So this is basically saying If cat is false, let's take that out. If is, cat is false. That's what this is saying here you could also, if you wanted to, You could say, If is cat does not equal true, it will only ever be true or false. So if this is false than this, is the false block to execute, execute. And so there are several different ways of doing this. Generally, the most common way that you're going to see this in the wild is if is cat because that's false. It's the shortest way to right if it is not a cat, and then if we head on over to our council here we have a variable called Is Cat. It's false. And if we do type of is cat, we're going to see it is a boolean now. One thing I skipped over that I did not mean to skip over was when you have a Boolean where we hear VAR is, cat is equal to true or false. We do not put it in quotations like this because that's a string that's not the same as true or false. A string can be any any number of characters letters it can mix and match spaces and special characters and all that stuff Boolean cannot a Boolean can only ever be true or false. And so this is a, I think, a pretty good crash course into Boolean logic. It really doesn't get any more complicated than this. The most complicated part is when you see if statements like this. So if is cat when your first looking at this, If you've never seen an if statement before, you're probably thinking, What does that mean? Well, this is saying it's true And if you ever see if exclamation mark is cat, that's the same as saying if the cat is false so you know, nice and simple like that. What I would like you to do, though, is you know, just tinker around with this gets an idea of how Boolean logic works and just create a few if else statements using Boolean logic, you're going to see billions every single day. It is the fastest way to get a yes or no answer. And one more thing before we go. Boolean logic can also be represented by ones and zeroes. I almost actually forgot that that is an important one here. Let's scroll down here, make some room. We could also say far is cat is equal to one, so this is the same as true, and Var is cat is equal to zero. This is false, and this works across almost every single programming language. If is Cata because this will be true. Or you could also say, If is cat and that will be false, something along those lines and that will totally work for you. So maybe also give that a shot. Try assigning a variable to true or false, and then try assigning the variable 21 or zero and just play around with some if else statements. 20. Making Lists With Arrays: Hello and welcome back in this video, we're going to talk about something called an Array. Now, with all things developer related and array is just a fancy term for ah list. That's all it is. We're just gonna create ah, list of variables may be, ah, list of strings, Boolean ins. We could make a list of lists if we wanted to. And in some languages, like Python, we even actually call it a list. But in JavaScript is called an array. So let's go ahead and make this bigger cause I think we can do all of this without actually writing any code in a file. And so an array is really, really easy to create, So there's a couple different ways of creating an array, but we could just say like a R r variable, a R is equal to. And then we have an opening and closing hard bracket, and inside of it, we put Maybe I'll put my name and then a comma and then because it's a string, you put quotations around it and then put my cat's name Zephyr and then Akama. And then if I wanted to, I could put true in here as a Boolean, but false. And there is a Boolean I could put my age in there. I could put Zephyrs agent there. Now none of this is mapped, so it's not really understandable what all this data actually relates to. But if we were to sort of change all of this and say they are are no, not so called a are let's call it names is equal to a list of names we could say, Caleb Zephyr, Henry and a dog Oh, don't go there we go and just hit, Enter. And even if we try to access it again, we have a list here and it says in parentheses there's four. That means there's four items so we can see. And here we have these things called Indices. These air numbers. It's your index value. So it starts at zero because computer start counting at zero. So zero Caleb one is effort to Henry three Dog. Oh, now not only can we loop through all of these different values and you know, performance or inaction on them, we can grab each one individually as well. So we could say var. Caleb is equal to names and then if I wanted to grab one, I could just grab. Let's say zero. Now, if that is a little confusing, you can always trial this out in your console as well. So it's names, and then you've got your hard bracket and then your index number, so I want number zero. So this zero here is going to match this zero right here and is going to say, Caleb, and if I want a dog Oh, I would use index number three and again computers start counting at the number zero to a human, the number zero mean nothing. There's nothing there to a computer, Computers say, Oh, the number zero is actually a number because a computer doesn't understand the concept of nothing. Technically, it just understands that there's a number and it's zero, so it starts at the number zero. So if we want a dog Oh, we would use the name of the array hard bracket and then the index number and then a closing hard hard bracket. And we could call this if we wanted to. Da go is equal to, and then we could do whatever we want with Douglas to let's do uppercase dog. Oh, in all caps just like that. So that is how we basically create an array. There's another way of creating an array. We could do an array of numbers. Let's call it numbs is equal to, and we can just give it a an actual array. We called Array with a capital A and then we could do 1 99 I don't know, 23 and you can see that it created the exact same object. So you know, you've got the hard brackets around here. We have indices in here so we could do numbs. This is going to get a little confusing, but numbs too. If we did the variable name numbs and we put the index of two in there is going to map to the number 23 so, sure enough, it does. It maps to the number 23 now. Okay, let's clear that out and let's work with names. If we take names, our council automatically tells us there's four items in there. What if we want to check to see if there are actually four items? Well, we could do names dot length and this is a property on the names object will talk more about properties and objects and methods and all sorts of complex things a little bit down the road. But for now, you can know that if you do dot length, you're going to get the total number of items in your array. And that's force that four here matches that for their now we also have a variable called Dog. Oh, and this is a string. So this is sort of outside the scope of this particular lesson. But we could also use length on DA Go to get the total number of characters. So there's a difference here. The difference being names is an array, and this is where data types it's really important that we know what data type we're working with. Your names is an array, and if we use dot length is going to get the total number of items in their whereas dog oh is a string. And if we use dot length, it gets us the total number of characters in there. And just so we know working with their dog Oh is actually Dogg. Oh, so there is five characters and that's why it returned five in here now. OK, that's cool. That's an array. So you know, we've got two different ways of creating an array we could do. A R is equal to an array with our items in there. Or we could just do the shorthand way and use hard brackets. I like using the hard brackets, but occasionally I use a R R K. Why just to be super explicit, depending on the code I'm working on by that. But that's really up to you the way you want to do it. Neither way is wrong. Neither ways, right? Okay, let's look at adding something to an array. So we have an array called names, and we want to add one more person in here or one more name or maybe one more pets. Let's go ahead and say names dot push and we want to push something into this array. Let's put the word parrot in there, and you're going to see it automatically returned the number of items in the array, and if we take names again, we can see that there's Caleb's ever Henry dog. Oh, and the new one parent and the total number of items is five now, if we wanted to get something out of here. What we can you slice? So let's say we wanted to get Ah, the 1st 2 items in here we could do two items is equal to names dot slice Where to start, where to end started? Zero. And that, too. And here we go. We get two items we get, Caleb ends effort. And so it just sliced out array and sort of just said, You know what, slice it right down this sort of center line. You're almost center line and remove Henry Dog one parent. Actually, what he's saying is Copy Caleb in Zephyr and put that into a new array called two items. Now if we just wanted to get the very last item and you're going to see this one a lot, too, we used dot pop, and this is the same across several programming languages. It's clear that we have names in here and we want Parrot. Let's go ahead and create a new variable called Parrot is equal to names dot pop, and that's it just dot pop with parentheses around it and watch this Perritt is now equal to parrot. If we did type of parent, and this is going to be a string because it did not return an array. It just returned this last item in year. But more interestingly, what it did was, if we type in names, it actually got rid of parents. What it did was inside grab the last item in the array, actually remove it from that array and put it into anywhere. Now, we don't necessarily have to store that in a variable either. We could do names dot pop, and this is not going to store the last one anywhere. So the last one currently is dog. Oh, it returns, dog. Oh, but we didn't start and variable, so it's not accessible to us anymore. And if we type names, we only have three names. And so this is a good introduction into a raise A raise. Get really, really powerful when we get Maurin toe loops. So, for example, for every name in names we get say hello. My name is Caleb. Hello. My name is ever Hello. My name is Henry. We get right in three lines that over and over and over again. And if this array was 100 items long we would still only have to write three lines of code versus having to right now Say council that log. My name is Caleb, and then consulate log. My name is ever consider log. My name is Henry Constant log. My name is Dog. Oh, you get the point. So on and so on. We're going to talk a lot more about a raise down the road. But for now, you are now fully introduced into the world of a raise in new data type called an array. And just as a quick recap of the most important thing that you can know about an array right now are the indices. So if we did this, we open this up. If we wanted to get his effort, which into C would we use? We would use number one. It's not the first item, because the first item is Caleb. It's the second item. And so we off put every number by minus one, because computer start counting at zero. That is the key take away here. So I would highly recommend that you get a little bit of experience writing a raise. You don't have to do a lot with them. You could just create a simple array with names and then maybe just get the middle one using an index. Otherwise, if you feel pretty comfortable with this already, let's head on over to the next lesson. 21. Checking Variable Types: all right. Up until now, we have learned about strings, numbers, arrays, Boolean ins, and there's a few more that we're going to learn down the road. But for now, I would like to explain a particular function that I've been using to show you if something is a Boolean or a string or an array or a number. Now, behind all of these, these different types of variables is this thing called a data type or, in some languages, a data structure. So let's go ahead and look at a few of these. So it's create of our age is equal to 30. Okay, we know that this is a number, but what does Javascript think it is? Does it think it's a string number? Anything like that? Let's create another one in your Vyron name is equal to JavaScript. Four beginners. What does JavaScript think? This variable is? Var. You know we did this one already. His cat, true or false? And let's create one more of our cars is equal to folks Wagon Lambeau and Audie Audio. Audie. Something like that. Let's yeah, let's put that on one line again. And so when we refresh your page we're not gonna see anything happen. We've declared a bunch of variables, but we're not doing anything with them. Let's go ahead and console log each one. So consul dot log age is. And in here we're going to use a function called Type Of and it's just simply going to say ages and then what it actually is. Let's go ahead and save us. We're going to see ages a number that's the variable type or the data type. Let's go ahead and create another one in here. Say the name is the name of this course is whatever that's going to be is cat is going to be to do. To do is cata. And lastly, we have cars. Is the data data todo cars? Okay, so before I refresh my page actually gonna make some space here so that this actually looks somewhat ledge a ball, We know that age is a number, JavaScript told us It's a number. What do you think? Name is from What do you think cat is and what do you think cars is? We have at some point gone through all of these, but we haven't actually fully explored their data types. I mean, we sort of have, in a sense, but not completely so. If I hit, Refresh on this page will save us and hit Refresh. We're going to see that age is a number. Name is a string is Cat is a boolean and cars is an array, so age is a number. Name is a string is cat is a 1,000,000,000 cars is Oh, what's this? It's not an array. Well, that's interesting. Even though we told it to be an array, it's actually this thing called an object. And interestingly enough, even if we do this, do, do, do, do, do, do do let's go ahead and change us to the word array. We're going to see that this does not change Hit, refresh, And it still says cars is an object. What is with that? Well, in JavaScript and in many other languages, object orientated programming languages. We have this idea of an object, and an object really is just a data structure that allows you to have several components in it. Whereas an age in this case, a number is just a number. You can't really do too much with that you can't turn it to upper case or lower case. You can't pop it so you can't get rid of, you know, the last item because there's only one item in here. It's not even a list or an array. We can't really do anything with that. We can't add too many custom functions to it. It's just a number, whereas with the variable called cars, it's an object and we can actually do a lot more with objects. Let's go ahead and take a look at this real quick cars dot and all I have to do You can see that it says, Can Cat array here is hit dot and then just scroll down and you can see all these different things that I can perform on this particular type of object. Now we're going to get into objects much more in depth down the road. So you don't have to worry about knowing the difference between an array and an object right now, because yeah, well, totally cover that in this course. But the thing that I did want to make you aware of is different data types using the function type of one type cars, and it gives us an object. Now why is this important? Well, let's take a look at the difference between one particular property. So if we did age, dot length what we don't have age, darling. That's because there's a number. There is no length to a number. I mean, in human terms there is. But to a computer, there is not. It just says that the number. I mean, what do you want for me? And the number is the number, and so the numbers are pretty basic. If we said name dot length, we know that this is a string. If we did name dot length we know that this one is in particular a string, so it's going to count the number of characters in it. So J a v A S e r I p t space for space b e g i N N e. R s 22 characters now what if we did is cat dot length undefined. It doesn't even have a property called length. Same thing with numbers doesn't have a property called like we can't use that, but with cars because it's an object or as we currently know it as an array, we can do dot length and this will return three. Where this gets important to know is if I did that wrong, if we did, if we did cars dot length, we're going to get three as the total number of cars we've got. Volkswagen, Lambo and Audie. But if we did name dot length, ignore the one that I messed up there with the typo. If we didn't game dot length, we're going to get the total number of characters, and so that's very different. And so if you try to do dot length on a string versus dot length on an array, you're going to get different answers. And that might change your logic down the road, you might say, if the Array has five names and it do something. But if your logic says, if variable dot length is equal to five and someone just types in a word with five letters in it, that's also going to trigger. And so that's sort of the difference between data types is, you know, some of them have certain functions or properties on them that we can use, and some of them don't and so you will inevitably run into this down the road where you're like, oh dot length on name is 22 but dot length on cars is three. Why is that? Because when I count cars, there's too. Plus five is seven plus four is 11. So you think that return return 11. But no, it doesn't. It returns three causes three items in there. Now you're not going to need this right away. But it is very good to know, and I have been every now and then showing you the function called the type of just to show you what this is. So if you're ever concerned about what a particular variable is or what the data type is, you could always just use the function type of, put your variable name in there with parentheses around it and just looks like that. And it will tell you Oh, I'm a Boolean. Oh, I'm an object. I'm a number. So there's nothing you have to do with this particular lesson. I just wanted to show you this just so that you are aware because you will run into this issue down the road, and I just wanted you to be prepared for that 22. Variable Casting: all right, we've looked at checking variable types. We've looked at different data types or variable types. We know about numbers, Boolean strings, arrays, things like that. But occasionally you're going to want to do this thing called typecasting. So if you have, for example, ah, variable age is equal to 30 and you want this to be a number well, currently, this is a strings. Let's do council don't log type of age, and it says it's a string, but it's actually a number, just has quotations around it. So what we what we can dio is this thing called type casting, where basically, we take a particular variable and we try to very forcefully turn it into a different type of variable. So, for instance, age we could type cast us as a number by typing number with the capital end and then age. And if we refresh this, it now says it's a number. So that's how we would typecast in number. Now, where this gets important is, let's say you're asking for someone's age so far, age is equal to prompt your age is, and that's do council dot log type of age, and we're gonna see here, I'm gonna type in 30 and it's going to say it's a string. What we take in a number. We didn't type in a strength, but because it doesn't know what you're going to put in letters or numbers or true or false , it just assumes that is going to be a string. So if we type in true, it's still a string. But what we can do is we can typecast this now so we can say age is equal to number age, and when we do this, this will work. However, there is a little caveat here when we try to do this again and let's type the word hours. But my name Caleb, it says it's still a number that's cool. But what is that number? Let's type and age, says Nan. This is another JavaScript data type, and A N means not a number. It's not a number. It doesn't know what to do with it. And if we refresh your page and let's just type in 123 and let's check the age in here, it says 123 so it's either going to work or it's not going to work And so you have to really know what your data is supposed to be. If you're asking for someone's age, you can always say, Is the age actually number? And so now we can actually try to test this. We can say, If age alert, you have a proper number. Let's go ahead and give this a shot So it's type in Caleb, and that's not going to work for me, right? But what if we did 30? It says you have a proper number, and that's because this number actually turned out to be a proper number. And so when we were learning about billions, basically any number in JavaScript that is not the number zero is true in some. Other language is it could be the opposites. But in Javascript, unless it is explicitly zero, it is always considered true. Nan is considered false. It's not a number, but if you give it any other number, it's true. So that works so pretty nicely. So now we can say we have a proper number in here. We can detect if it's an actual number. Okay, so now we have a proper number. So now what we can do is we can actually detect if the number is something. Now, we haven't got into more comparison operators yet, and this is a little bit of a sneak preview into the next dozen. But we could say if the age is greater than or equal to 18 council dot log, You can vote. So now this is going to ask me for my age. I'm gonna put an agent is going to cast it as a number is going to say, Is that actually number? Oh, it is actually number alert that you have a proper number and then is going to say, Hey, if your age is over the number of 18 you can vote and so says you have a proper number. And sure enough, you can vote and also console logs, the type of age, which is a number we can also take. Cast the other way. He doesn't have to be from a string to a number. We could go from a number two strings. Let's say of our age is equal to a string. Nope. Nancy, the wrong way of our age is a number of 30 and we wanted to say actually, the age is going to be a string that's forced us to be a string and consul dialogue. Let's put the age in there and the type of type of age. Uh, it's a string now. The nice thing about that is because it is now a string we can do age dot length. We can see that there two characters in there, whereas with a number we weren't able to do that before. And so there are benefits to typecasting. We can also do this with like Boolean is and things like that as well. So let's try this. That's se var is Cat is equal to its a string, But let's go ahead and cast this as a Boolean. So is Cat is equal to Boolean of Is Cat, So we're just overriding itself with itself as a Boolean. Let's see what happens here. That's copy this down and uncommon. That and let's change age to is Cat. Look at that. It's actually true, and it understood that true as a word could actually be confirmed as true as a Boolean. And so now we can say, if is cat or if is not a cat, okay, and let's do one more in here. Let's do Var course is equal to Js for beginners. Now we know that this is a string already because well, we declared it as a string. As soon as I had spaces, we put quotations around it. Let's say we want to turn this into an array. What we could do is course is equal to array. Of course. So now when I refresh the page and we do course uh huh Look at that. It is now in a race. It only has one item in it. It really only has the one in desy or index for Heather. Ah, but it is an array. And so now we could do, for example, course taught length and get how many items are in here? Well, there's only the one which is not the same as getting the length of a string which would be over 10 whatever that number is going to be. And actually we could do this. Of course. Zero don't length. It's 16 and so weaken typecast into basically any other data type in javascript. All we have to do is say Hey, this is a Boolean. Hey, this is a string. Hey, this is an array or hey, this is a number and as we learn more data types, we can create new ones as well. And so basically, this is how we cast variables, and that's really all there is to it. And it really helps you when you're using certain properties or methods or trying to figure out how to work with particular data types again. This is becoming more and more relevant as we get through this course, and it becomes more and more relevant in modern day JavaScript. So it is good to know, even if you don't use it every day right now, you will eventually end up using it quite a bit down the road. 23. More Comparison Operators: already. Let's take a look at some more comparison operators. Up until now, we have really only worked with is equal to or is not equal to. And if something is true or if something is false, there's actually a lot more weaken Dio, for example, we can see if something is not equal to which we sort of dabbled in, but not formally. So we'll take a look at this one in just a little bit. We also have is greater than or equal to is greater than is less than is less than or equal Teoh. And then we have, lastly, a strict comparison operator, which will get to at the very end of this video. So first things first. Let's look at the is not operator. Let's go ahead and comment this out, and so we need to be able to compare. Something is not. We've sort of looked at this before, but let's formally take a look at it now. So we have a variable. And let's say the course is equal to just a JavaScript course or something, you know, simple to compare. And we could say if the course is equal to Js Council dot log is J s course. And let's go ahead, make that little smaller and refresh our page. And it says, is a J. S course regular. Okay, no problem with that. But what if What if it's not? Well, this is not going to do anything. But let's go ahead and change this. Let's say if the course is not a J s course, let's say if the course is not a PHP course now, this logic doesn't really make a lot of sense. But it is a good example of how to use the opposite. A comparison operator. We're basically saying right here. JavaScript. The string JavaScript is not equal to PHP. Are they different? It's correct. That statement is correct, so it returns true. And so what the computer sees behind the scenes is Yep. If it's true, which it is true, execute this. And so that's sort of how we get to that point using the not operator or the not equals operator. Rather next, we have greater than so let's go ahead and create an age. Age is equal to 17 and we can say if age is greater than 10 then console dot log you can play soccer or something along those lines. Let's go ahead and refreshing. It says you can play soccer Now. What this is doing is again. Basically, we can replace this saying a 17 greater than the number 10. Yes, it is. So this statement turns out to be true, and because it's true, it will execute this block of code. Now what happens if we said, Oh, in order to actually play professional soccer, you need to be 18 or older. You can play pro soccer again. Let's make that one step smaller and let's give that a save. Nothing happens because this returns false. This is saying, if the age 17 is greater than 18 was 17 a bigger number than 18? No, this turns out to be false, so it does not execute. Remember if statements always need that final conclusion to be true. Next we can do the same thing, but we can say is greater than or equal to. When would we ever use this? While let's say your age is 18 and you need to be at least 18 in order to vote, you can vote. We can also do an else if statement here. So else, if age is greater than equal to 21 I'm purposely setting us up for failure on this one, and I'll show you in just a sec, you can drink alcohol. It says you can vote. But this is also true. Age is also greater than 21 now. We learned about this a little while ago, but it's always good to retouch on the fundamentals and JavaScript. It runs from top to bottom and says, Yep, this is true. This is the if statement we want to connect to and don't worry about anything else below it . So this else if statement gets ignored. But what we can do is if we get rid of the else and just create another. If statement, it still says, you can only vote. But if we did this, it says, you can vote and drink alcohol. Now again, where do you use something like this? Well, if you're checking someone's age, 18 year olds are allowed to vote. It's not people who are greater than 18 or people who are greater than 17. In life, we say people who are 18 or older are allowed to vote people who are 21 or older in the United States are allowed to drink alcohol. We can also do basically the exact opposite, so we could say, But that's a variable. Let's do something different here. Long name is equal to Caleb Tallinn, so that'll be my full name. Let's not use long because that's not a long name. But let's do full name. And we could say, if full name dot Length is greater than 10. Confidante log, Long name. And it says I have a long game. Okay, well, we did that one already. But what if it's less than less than we could say This is a short name, It's now we can say, Hey, if this name has 012345678 or nine characters in it because it's less than the number 10 this will say Short name. It doesn't have that. Let's go ahead and shortened my name to just my first name and it says short name. So that's a less than operator. We can also do less than or equal to if we wanted to. Let's do you have our name is equal to John Smith what we have in here. We've got 10 characters in here. That's a perfect name, actually. Should be used in the first example we could do. If name dot length is less than or equal to 10 Council log total length is less than or equal to 10. And let's go ahead. And also let's put this on new lines cause we can. JavaScript gets us, gives us all sorts of white spaces. Put this as the second parameter in here and, let's say name dot length total length is less than 10 and we can see that the actual value here is 10. Which other ones do we have to go through? Ah, I think, really. The main one that we have here is the strict comparison. So all these other ones air really basic math is something greater than less than equal to Really, that's all it is. Where it gets a little bit weird is the triple equal sign in JavaScript. This is a strict comparison, so that means that not only does the value have to match, but the data type has to match as well, and this is actually a lot more performance. It works a lot better on your computer. It's much faster code because it doesn't have to try to determine really any other factors . It just says, Hey, is this a right data type? Yes. Is this the right value in the data type? Yes, move forward. It doesn't have to try toe, say, like, Oh, is three the same as three? I mean, JavaScript doesn't know that. So it tries to figure it out or is true. You know, the same as true. One is a string one is a Boolean, and it has to sort of figure that out. Whereas if you can get rid of that using a strict comparison, your programs, your scripts will actually be a lot faster. It's not noticeably faster to the human eye. However, when you are dealing with large programs, maybe you're starting to crunch a lot of data. Like what Netflix does. Maybe you want that kind of performance. Regardless, you're going to see a strict operator in the wild quite a bit because it is fairly common in modern JavaScript. So let's take a look at this. This is the biggest one to take note off. Age is equal to Let's say 30 and watch this. If age is equal to 30 consul dot log, you are 30 and sure enough, it says you are 30. Despite age being a string and this being an integer or a number, those are two different data types, and so it still works out. It's still understands that Hey, yeah, this could still actually be a number as well. So this means that JavaScript is a loosely typed language. It means you can sort of mess around with it and get away with breaking some of the general rules that you would find in programming languages like C or Python. So now what happens if we do a strict comparison? If we do the strip comparison with three equal signs, let's make that larger three equal signs. This is not going to execute. In fact, let's at an else statement console dot do, warn, wrong data type, and let's make that smaller. Let's go ahead. Save that and refresher page and it says wrong data type. Why is it the wrong data type? Well, it's because we have given it a string and we're saying compared to a number, so what this is saying is, String 30 is equal to number 30. That's not the same thing in the world of data types. They're not the same. The value is the same to a human. It is the same to a computer. It is different. And so you can sort of think of this as string is equal to number. Well, those don't work out the same. You can't compare a string to a number that's like so this is kind of like comparing a watermelon to a a rock. Ah, yes, their shape might be the same, but fundamentally, they're different. They're entirely different things. And so you're going to see this strict comparison a lot in the wild, and I just want you to be prepared for that. Let's go ahead and touch this up. Let's go ahead and save. Refresh says. Wrong data type. And if we change this to an integer or a number, as it's called in, JavaScript says, you're 30. Even if I did, 0.0 still says you were 30. You know, if you come from another programming language, you are probably familiar with decimals or floats in JavaScript, decimals, floats and integers are all the same thing, it is equal to a number. Let's go ahead and throw this on a new line as well, so we can keep that in our notes. And so that is a quick little introduction, I guess. And so this was the more comparison operators lesson. Where we looked at does Not Equal is greater than or equal to is greater than is less than is less than or equal to n a strict comparison. These are the most common operators you're going to find is very rare, that you ever find anything other than these. And as one last example here with the strict comparison, Let's just go ahead and let's turn this back. You know what I mean? A copy, this whole thing because I like that example the way it is. So it's common died out. Copy this pasted in there rather and let's do 30. So this is going to give us wrong data type. Well, in the last lesson, we talked about typecasting or variable casting. Let's go ahead and force us to be a number number Bam. It works. So we had we had originally a string and we said, Oh, this is a string. We're expecting it to be a number moving forward. We always want this to be a number. So we over wrote the variable called Age. We type casted it as a number and the parameter for the number function that we see here is basically that and output 30 as a number. And so now when we do the strict comparison, it works. So that is all we have for more comparison operators. Definitely take a few minutes out of your day and tinker with these, especially the last one with strict comparisons. This is a very important one. All the other ones, I think most people for the most part can get them. Preeti quickly. It's really just Hey, is one number bigger than the other number? Or does one thing match something else? You don't need to be a professional at this point, you just need to be somewhat familiar so that in the next mini project, when you are asked to create a strict comparison or you are asked to write some code for a client or your next employer and you see something like this, you don't go. What is that? You can say? Oh, I know exactly what that is. So there we go, setting you up for success. When you're done that let's head on over to that next lesson and actually think the next lesson is going to be a mini projects. So let's ah, let's have some fun with that. 24. JavaScript Mini Project #3: welcome to many projects. Number three in this little challenge, what I would like you to do is ask the user for a number and then cast that number to an actual number because we know what's going to come back as a string. So cast it as a number and then make sure that number is valid. It cannot be N a n and n means not a number. Make sure it is actually a number. And then if that number is over 18 or 21 whatever you like, then and change the text on the screen to say yes, you are allowed. So as a couple of hints here, So step number one asked for the user number. I asked the user for a number you're going to use prompt cast the input to a number. You're going to use number with a capital end. Make sure the number is valid. So you're going to need a if statement in there, and then if that number is over 18 check or change some text on the page to say congratulations. You're over 18 or yes, you can vote or, you know, do a particular action. So I know this mini project is a little bit dry, but it is really, really good practice because you're going to use things like this all the time in real life . JavaScript. Now, as always, I will provide you with my solution as well as with many things in life. There are different ways to accomplish this, but I'm going to show you my way of doing it. But I would like if you could, in just a couple of seconds, pause this video and give it a shot on your own. And if you get stuck, then you know, resume the video and you can watch my solution. Or if you just want to, you can just straight up watch my my solution and then try to input it yourself. Whichever way helps you learn the best. All right. So I am going to get started on this mini project. First things first. We need to ask the user for a number, cast the input to a number, make sure the number is valid, and then if that number is 18 say something like you're allowed to vote. So let's go ahead and write some javascript. So in here we want to ask the user for a number of our number is equal to prompt. Enter a number. Step two. We need to cast us as a number because if we did consul dot log type of numb, this will be a string. Let's make that a little bigger that's going to end up being a string. So we need this to be a number. So let's go ahead and take cast us as a number numb and number. There we go and we need to make sure that this number is actually valid, cause if someone types in something that's not a number is going to return and A n and A and not a number. So we need to say, if numb, we need to say, Hey, this is definitely a number So if it is a number, let's go ahead and execute something in here and then we can say if numb is equal to or greater than 18. Actually, the instruction said over 18. If you want to get finicky about it, buddy, you know let's do greater than our or equal to. So if you are 18 or older, you can grab an element from the page and change its let's create an element here of our Elem is equal to document dot get element by i d. And let's just call this l m. Make it one step smaller here so we can see it all in one line and then we can dio l m dot in her text Or we could do inter html and say you are 18 or older now that's all great, but getting an element by i d with an element idea of e l E M does not exist yet, so let's go ahead and get rid of that. And let's create an H four with an i d of e l E m and leave it at that. So let's refresh your page. Enter a number. Let's go ahead and type Caleb. Not with quotations, although quotations don't hurt. Yeah, nothing happens. And hey, by the way, that came back as a string. Let's go ahead and type of number. Let's say I'm 17 Okay, well, it's still not gonna work because, you know, that might have executed, but it did not pass this if statement, and it's still saying it's a string which is supposed to. In fact, let's go down here and let's change us from string to number. So this is now going to say string and the numbers, so don't here, it'll say string and the number. Let's refresh once more. Let's give it my proper age of 30 and that 2nd 1 didn't show up because I didn't save my file. So let's quickly we do that age of 30. There it is. String number. You are 18 or older, and that is the mini project in a nutshell. So that's all we're doing. Okay, so if you want to take this one step further, we haven't actually learned about this yet. But if you wanted to, you could turn our two if statements, because it's one inside of the other into one. If statement. So let's go ahead and delete this and bring him toe one line and say, and and so what this is saying is if number is actually number, So if it's true and the number is greater than 18 then execute this. Otherwise is not going to do anything. Let's try this again. 30 bam! Just like that. So we didn't learn about that. I don't expect you to know that right now, but it's ah cool little thing that we can tinker with in the future. So that is many Project number three all wrapped up. If you have not given us a shot to definitely try this on your own, try to not have to reference the video material if you don't have to and tried to just do it from memory. If you get stuck. Hey, that's OK. Just resume the video again. You can watch it over. No problem there, but it's good to make your brain sweat a little bit once you're done with this. If you're happy with your solution, let's head on over to that next lesson. And hey, don't forget. Take a screenshot of your code and throw it into your project down below for skill share so that no, I can take a look at some of your coat and you can share and inspire other people as well 25. Functions: Hey, how low? I hope that last minute project went well for you in this video. We're going to learn a fundamental of programming, and it is called a function. Now. A function is really just a way of writing one piece of code so you don't have to write it over and over and over and over and over again. There is a benefit and a downside to this. So the benefit to writing just code once and then using it over and over again is that it's less code to maintain, so you don't have to worry about fixing something. If there's a problem, you don't have to fix it 10 times. You could just fix it once, and it will take effect 10 different times or wherever you're using. It will get into that in just a second. You really just need toe fix it in the one place. Now a function has a downside, and that downside is it is a little hard to understand at first, so if you are brand new to programming, this might hurt your brain a little bit. But bear with me on this, I want you to work on this until it makes sense because you're going to see functions in every single programming language. You're going to see functions as commonly as you see variables in the world of JavaScript, and it really does make your code easier to work with. So in this video, I'm just going to show you what a function looks like and we're not actually going to write a function. We'll do that in the next video, but I just want to show you what it looks like right now. So let's make this way bigger. And we have a function. So it starts with the word function. You can see that my editor V s code has highlighted that it says function, whereas, you know, if it wasn't a key word, it would be great. But it is a key word, so it is nice and colorful, so we start with the word function and we give the function a name. So let's give this the name of greeting. And then we put parentheses because it's a function and because it's going to be taking some sort of action. Generally, there are a set of parentheses after it, and then in here we can just say, consul dot log Hello, world. And so all the code you want to execute inside of your function goes between these curly braces. It looks a lot like an if statement, actually. And then to execute your function, all you have to do is type greeting with your parentheses, and this will say hello, world. So if I open this up in chrome, you're going to see down here It says, hello, world Now functions can take these things called parameters or arguments. And so you can say what is someone's name So you can pass in a name into this particular function, and then you can contaminate it. You can say hello plus name. And you can use this variable name inside of these brackets and then to pass in a name, you're just passing like a string or a number or a Boolean or something like that. We're gonna pass in a string called Caleb and let's go ahead and refresh our page. And it says down here Hello, Caleb. And so now, inside of our function, we have this ability to use any sort of name. And what this is doing is saying, Hey, There's one parameter in here. There's one parameter in here. Let's say that name is now equal to Caleb in basically what it is doing behind the scenes is saying Name is equal to Caleb. Now, if you want multiple parameters, absolutely, you can do that. So let's say there's a name and there's an age. So let's say hello Name and age is Let's put age in there and we also need to pass in an age. So there's two parameters in here. We need to make sure we have two parameters in here. We do that by separating these with a comma, and we've actually seen this already with council dot log. And then we said something, and then we had a comma and then said something else. And so what this is saying is there is an object called Consul will get to objects later, but basically there is a function called log. This is the first parameter. This is the second parameter, and it's no different than our function here called Greeting, where we have our first parameter and then we have our second parameter. So let's save that open up, chrome and refresh and it says Hello, Caleb. Age is 30. So now we actually have two parameters or two arguments inside of our greeting function. There's two more points in here that we should look at. One is in more modern JavaScript. We can actually give us a default age as well or a default name. So let's go ahead and maybe even do that. It's a default name is going to be his effort. My cat and his age is not 30. He is four. Let's go ahead and get rid of these parameters. So what we're saying here is if there is no name parameter as the 1st 1 it used to look like this. If there is no name parameter, just assume the name is Zephyr. If there is no second parameter called age, just assume the ages four. So let's go ahead. Save. Refreshing. It says Hello, Zephyr Ages. For that's relatively new JavaScript, it's actually super useful. Many programming languages have had this for many, many, many years, and it is finally the time for JavaScript to use it as well is a beautiful feature. Now, the last thing to know about functions, at least for this particular video is a function can return of value and we do that with the keyword called Return and this can return anything. So let's go ahead and return space x and thats all its going to return Semi. Colons are optional when it's on a new line, but let's go ahead for continuity sake. And so when we refresh your page, we're actually not going to see Space X shows up anywhere. What this is doing is saying, Hey, if this function runs and it is being stored into a variable, that variables value is now going to be Space X, So let's go ahead and save greeting into a variable. So far, I just called var, named variable name is equal to greeting. It's still going to execute the console log stuff because it is still executing this function. However, of our name is now going to be whatever is returned here and that could be an array could be an object. It could be a string Ah Boolean a number, you name it. It could be anything you want to return, but you only get one. You can only return once, and anything down here does not get executed. so watch this. Consul dot log does not work. So this next example we're going to see that this console log is not going to work. But var name is also going to be Space X as a strings. Let's go ahead and give this a shot. Okay, I refresh Issa's Hello is effort ages four. The console log did not work. Didn't show up because anything below the return statement doesn't work. Let's go ahead and get rid of it since it's useless and let's take a look at var name. Look at that, it says Varney MySpace, Six of our name here has the value of Space X, and you could do anything with variables to so you could do age to the exponents of age, which could get really dangerous if you're using a large, large large number. But in this case is going to be four to the power of four, and that's what the number is going to be. So let's say new number and okay, it did our regular console logs. Now let's type in new number and we see 256. We got that because four times four times four times four is 256. And then lastly, when it comes down to using a function, all we have to do is re in Stan. She hated re initializing Let's go ahead and say, Caleb and 30. Let's go ahead and create a new one in here and this is going to be Henry and he is to And so this is going to be, you know, let's change this return to something that makes sense. Let's just return the name. And so this is going to be default name and this is going to be Caleb and this one is going to be Henry. So watch this as I hit, Refresh says. Hello, Zephyr. Ages four. Then it returns. The name stores it in a variable called default name. Then you go to the next line says, Oh, there's a function appear. OK, run that code. We gave it a name called Caleb, and we give it an age of 30. Hello, Caleb. Age is 30. Okay, so it does. That line stores it in variable called Caleb. Next goes to Line 18 says, Oh, there's one in your called Henry. It's running a function called greeting, just like the other two times it's gonna say, OK, well, I'm gonna stop here. Look for a function called greeting. The first value is Henry. So we're not going to use the default value his age is to. We're not going to use the default value of four. And so it's going to say hello, Henry. Age is too, and then it's going to return his name. This part here is going to store that in a variable called Henry. And sure enough, we see Hello, Henry. Ages, too. So if we go ahead and say default name heads from right here, we get suffer. Kayla is Caleb. Henry is Henry. So functions are a critical point when it comes to programming in any language, not just javascript, but in any language. And they almost all work the same way. You have some way of defining it. You give it a name, you give it some parameters if you want to. Ah, you perform some sort of logic in here, or in this case, we're just doing a console log and you return something, and then maybe you store it in a variable, and then you could do something with that variable down the line, so that's functions in a nutshell. In the next lesson, let's go ahead and get some serious hands on practice with functions we're gonna right. A number of them is going to be fairly fast paced. But hey, you can always slow down the video. You can always pause it and try it yourself, and I'm here to guide you every step of the way. 26. Practice With Functions: in the world of programming, there are a few hurdles that are hard for the mind to wrap around the 1st 1 Its functions. It can be hard to understand at first, and really, you just need to practice with it over and over and over again until it just clicks in your brain. Just like that. The next one is loops, and then we've brought objects and object orientated programming and things like that. But the 1st 1 is functions, and once you understand functions, things actually get a lot easier. But this is the first major mind hurdle to get over, so it's really good for us to get some serious practice with functions right now. Now, functions are an everyday part of life. We actually need to know these. You can't write JavaScript without functions. Well, actually, that was a lie. You could, but you're not going to get very far. Your your general code or your Your entire application is going to be extremely basic and not very dynamic, and it's going to get very, very long, and you're going to copy and paste a lot. Now there's a general rule and programming called Dry, which means don't repeat yourself, and how we do this is with a thing called a function, so we can write the logic just once, and we can execute it over and over and over again. And so, for example, if we were converting Celsius to Farron Heights and we wrote out the formula the long way 10 times and we realized that we we got the formula wrong and it's in four different files , we're going to have to go and change those four different files into a find and replace on all of them. That kind of sucks, Whereas if it was just a function, you could just fix the function once, and it fixes it everywhere else. Now, functions can be a little confusing if at first. But you know what? Honestly, just keep working at them because they get easier with time. And I think without further ado, we should just really jump into this. So let's first create a simple and useless function that adds 100 divides by three and just going to take one number, divide by 100 or rather add 100 then divide by three and return whatever that number is So we start off with function. It's a keyword and let's just call it do math and it's going to take whatever number we give it. We have some opening and curly brackets for it to do some logic in here now, we don't know if this number is actually going to be a number. We could make sure it's a number, so we could always say Numb is equal to number numb and let's make sure that's spelled correctly. There we go and then we can say If numb is an actual number, then we could do stuff in here else, not a riel number. And so now our function is split into two because we've got a if else statement in here now , we could do a return statement down here. We can also do a return statement in here and in here, so let's do that. If it's not a real number, let's just return a Boolean of false and if it is a real number, so do do do do do is a real number. We said we want this number to add 100 divide by three. Let's say of our new number is equal to NUM plus 100 divide by three. And if we want to make sure that that strictly turns out this way, we can use the rule of bed, miss Brackets, exponents, division, multiplication addition, subtraction. So it's going to do number plus 101st whatever that turns out to be. And then it's going to divided by three. And let's just return new number. So this is either going to return false or it's going to return the new number. And let's make that a little smaller so we can see this on one page. And don't here, let's say of our custom, Numb is equal to do math, whatever number we want to give it. So let's give it 343 because random numbers save that. And if you were to open this in your page right now, you'll see that nothing happens because we performed all of this logic and we returned either a Boolean or a number into this particular variable called Custom Numb. But we didn't do anything with custom them we didn't console log it or anything like that. So let's go ahead and console log now. Consul dot log custom numb. Now let's open up her page and hit Refresh, and so we can see the number. Here is 147 point 6666666666666 What if we give it something That's not a number? Let's say the number is Caleb. Well, Caleb's not a number. I'm a person, not a number. It returns false because that was not a number. It did not turn out the way we expected it to. Now, should we want to execute this function over and over and over and over again? We could simply do this. We could say, Let's do it with 30. Let's change all of these do do do do. Let's move that up and let's go ahead and just console log every single one of these. And so here it is. It's just gonna console log every number. We're just constantly overriding the same variable here. Let's go ahead and see what this returns. 1st 1 is false, and that's because the name was Caleb. Yep, that's not a number. The 2nd 1 was 30 so we added 100 divided by three and we get 43.3. Repeating next one was 50 so 50 plus 100 is 1 50 Divide by three is 50. That turned out really nicely. 501 plus 100 divided by three, 200.3 repeating. Then we get 41 minus 90. This is an interesting one. So minus 90 plus 100 is just 10 10. Divided by three is 3.3 repeating and then three plus 101 103 divided by three. 34.3. That was a lot of threes. Wow! And so that is the power behind a function. And, hey, if one of these turns out to be incorrect, we can always go back here and say, Oh, actually, that wasn't supposed to be Divide by three was supposed to be divided by four. And watch this All those numbers change. So if you're interested in working along with me, here's what you can do. Create your first function and just pass in a number as its one and only parameter, and then just work with a number a little bit, even if you just do return numb. That's better than nothing So go ahead and give that a shot. Otherwise, we're going to move on to the next function, which is going to be a little bit different. But, you know, sort of the same thing. Let's create another function in here. But this time we're going to create a function based on something that JavaScript does. You notice how we've been writing document? I get element by i d. And then whatever the element is the element i d We've been writing that a lot. We can shortcut that. In fact, you actually see this a lot in a lot of JavaScript libraries. We can write a function, we'll just call it dollar sign and we're gonna pass in the I d. And then what? Weaken dio is weaken simply return this. And so now we've got a function called dollar sign. It takes an I d whatever that ideas. And it says, Hey, returned documents dot get element by i d. We need to change that to our variable, and it's gonna look for this inner document object model, and it's just simply going to return it. Then we can work with a little bit later. So let's Let's try this. Let's say Var title is equal to idea of title and then we want to change. The title dot inner text is equal to custom inner text, and we need to actually make sure this exists. So let's go ahead and create each one in here with an idea of title. There's nothing in it. JavaScript will populate this for us. And just to make sure we know what's going on, your console log I d. Is. And this looks like a function. No, doesn't it function of log first parameter second parameter. Let's open up her page and hit Refresh, and we're going to see custom inner text. False was from this one up here. Let's just go ahead and comment that out for now and you can see the ideas title. So what this is doing is saying, Hey, get the element by its I d of title matches up here. Store that in a variable with your return statements. That's what we did. We were We stored it in a variable called title, and then we can use that. It's the exact same as doing this. Just bear with me here. It's the exact same is doing this. Only now you're writing a lot less. And if you ever wanted to create another one, you could always do of our custom element. Whatever your element is is equal to custom I d. And then custom Ellam dot inner html is equal to something here. You could do something like that and now you're short cutting it. Now you're not writing documents. Don't get element by i d parentheses. Whatever your ideas over and over and over again. You're just writing dollar sign. So it's a nice way of short cutting. Met. Lastly, let's go ahead and create a function where we convert Celsius to Fahrenheit. So we start with the function that's called C to see if I can spell this right the first time fair in hate. It's actually do this. That's called, Uh, yeah, I don't really like this. Is that so? It's just to see two f and we can add a comment in here. Ah, Celsius to air ridden height. Now we need to give this a number. What is the Celsius number? So see, numb? Something like that doesn't need to have an underscore can. If you want, we need to perform some math here. So let's do variable of our Fahrenheit Fahrenheit There is equal to what is the math that we want to do. Variable Fahrenheit is equal to whatever Celsius is. S O. C. Numb times 1.8 plus 32. And so let's put the brackets in here. So that's always executed first again, that's just order of operations. You don't necessarily need it because multiplication is going to come before division. That's not the here nor there that is just math. And then we can return fair night. Now we're not doing any checks in. You were not typecasting. See numb as a parameter as a variable, we're just assuming that it is a number of some sort. So let's go ahead and create some variables in your we got far. Let's say with zero degrees is so C to F well, to put the number zero in there so whatever that's going to be and lets you counsel dot log zero. Hey, fun fact. You can also put lines of code on the same line as long as there is a semi colon. So your computer is going to read this from top to bottom and say Fire zero is equal to and they get to the semi, Colon says. Oh, hey, Okay, well, this part is done, so let's go ahead and execute this as if it was on its own line. So we're gonna do that. One. What is room temperature while room temperature in Celsius is 20? Let's call this 20 and what is boiling so boiling boiling in Celsius is 100 degrees. What is that in fair night and just for fun? Z's Let's do freezing and let's put in a number of minus 40. So what is minus 40 in fair night? Let's go ahead. Refresher page. So we have that going to log from our previous function, but we can see zero degrees Celsius is equal to 32 degrees fair night. That is correct. 20 degrees is 68 F and freezing minus 40 Celsius is the same in fair