Become A Web Developer - Part 9: Javascript | Andrei Neagoie | Skillshare

Become A Web Developer - Part 9: Javascript

Andrei Neagoie, Senior Software Developer + Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
14 Lessons (2h 40m)
    • 1. Introduction to Javascript

      1:36
    • 2. What is Javascript?

      5:33
    • 3. Your First Javascript

      11:41
    • 4. Variables

      15:09
    • 5. Control Flow

      16:36
    • 6. Javascript On Our Webpage

      9:05
    • 7. Functions

      23:53
    • 8. Data Structures: Arrays

      13:06
    • 9. Data Structures: Objects

      15:25
    • 10. Exercise: Build Facebook

      11:16
    • 11. Javascript Terminology

      3:43
    • 12. Loops

      22:22
    • 13. Exercise: Build Facebook 2

      8:02
    • 14. Javascript Keywords

      3:02
31 students are watching this class

About This Class

Javascript

This is the tutorial you've been looking for to become a web developer in 2018. It doesn’t just cover a small portion of the industry. In this multipart video series we will covers everything you need to know to get hired: from absolute zero knowledge to being able to put things on your resume that will allow you to live the life you want. 

Sounds too good to be true? Give me 5 minutes of your time to explain to you why I built this course and what is different here than thousands of other courses all over the internet.

  1. There is no wasted time here. We won’t be using outdated technologies like PHP, Wordpress and JQuery. Although still useful, outdated technologies like the above are low paying and demands for them are decreasing. In this course, you will learn the specific technologies that are the most in demand in the industry right now. These include tools and technologies used by the biggest tech companies like Google, Facebook, Instagram, etc… It’s geared specifically for people that want to learn employable skills in 2018.

  2. After finishing this course, you will be able to apply for developer roles, or upgrade your job title as a developer and earn a higher salary. We won't be taking any shortcuts in this course. I am going to take your from absolute zero, where I teach you how the internet works, to mastery, where I show you how to build an image recognition app using a Machine Learning API (a subset of Artificial Intelligence).

  3. This course is taught by an instructor who has worked in silicon valley, and one of the top tech companies in Toronto. I have built large scale applications, and have managed a team of developers. I have worked directly with these technologies. I am not an online marketer or a salesman. I am a senior software developer who loves programming and believes that there needs to be a course out there that actually teaches valuable skills.

  4. I know your time is valuable. You want a course that outlines the best way to learn the topic in simple, well explained methods so that you fully understand topics instead of watching somebody on your screen and having no clue what is going on. I have created this course after consuming hundreds of books, tutorials, and online courses while I was learning. I have taken the best pieces, the best methods, that I have found, and condensed everything so that you can learn in the most efficient way possible. 50 hours of videos doesn't mean much if the instructor isn't engaging or focuses on outdated topics. 

  5. We have a thriving online chat community so you really feel like you are part of a classroom and not just watching videos by yourself. You will have a chance to communicate with fellow students, work on group projects together, and contribute to open source. Anytime you have a question you can ask in the chat and someone will surely be able to help you right away. 
  6. The course is designed to give you employable skills so you can get a job. Here is what one student recently wrote after taking the course and being hired right away: 
    "I’m a self taught dev, who has been out of work for ~6 months. I had some family things that came up that prevented me from seeking permanent employment, so for awhile I was Postmates/Uber delivery driver.
    After taking this course, I immediately got catapulted back to where I was before, but better equipped and with the knowledge to take on the next job. I had just finished the React section when I went to a recent interview, and it really helped me excel. As of today, I am officially re-employed back in the field, and it is all thanks to this course. I had a blast creating the final project, and FINALLY got around to learning SQL statements, and getting to use them in a project. I’m really ecstatic that Andrei went with teaching relational databases over something like MongoDB, which can also be fun, but is less practical for use on the job. So thanks Andrei , I really enjoyed the course and will be making sure to share it with others who find it helpful. I’m also looking forward to the new ES7/8 content that was recently added, and going through the DB stuff again when I go to build a personal project."

In this course, you will be taken through online videos and exercises where you will be able to do the following things by the end:

  • Build real complex applications and websites
  • Build an image recognition app together at the end of the course so you can add it to your portfolio
  • Go into a job interview confident that you understand the fundamental building blocks of web development and the developer space in 2018
  • Be able to go off on your own and grow your skills as a developer having built a solid foundation
  • Learn how front-end, servers, and databases communicate and how they all fit together in the eco system
  • Build your own startup landing page. 
  • Go off and remotely work by being a freelance developer and bid on projects.
  • Know EXACLTY what a day in the life of a developer is like and what the day to day technologies and tools will be that you are using. 

By the end of this course you will be comfortable using the below skills and you will be able to put them on your resume:

  • HTML5
  • CSS
  • Bootstrap 4
  • Javascript (ES6/ES7/ES8)
  • React + Redux
  • Git + Github
  • Node.js
  • Express.js
  • NPM
  • PostgresSQL
  • SQL

This course is the accumulation of all of my years working, learning, and teaching coding and all of the frustrations and incomplete information I have encountered along the way. There is so much information out there, so many opinions, and so many ways of doing things, that unless you have spent the last years working with these technologies in a company, you will never fully understand. So this course is the answer to that exact problem. I have gone through thousands of coding books and online tutorials and bootcamps. I have worked with these tools on real applications. Throughout the years I have taken notes on what has worked, and what hasn't and I've created this course to narrow down the best way to learn and the most relevant information. 

I will succeed if you succeed in this course. Therefore, I will be there every step of the way helping you understand concepts and answer any questions you have.

I am 100% confident that you won't find a course like this out there that is as well organized, and as useful, to build a strong foundation for you to start a new career. We're not going to be building simple todo applications and cat image sliders. We are going to learn actual practical skills that will put you into the workforce. Some unique sections that you won't find anywhere else are:

  • React.js + Redux: you will learn the library that companies like Netflix, Facebook and Instagram use to build fast, scalable applications. This is one of the highest in-demand skill in the industry.
  • A day in the life of a developer: What will your day to day look like and what tools will you use? I will take you through a sample day at a tech company.
  • How does the internet actually work. What is the history of these technologies: I will actually have you understand the underlying concepts of the internet, and how the technologies we have now, have come to be where they are.
  • How do you actually deploy a real life app so that it is secure, and won't get hacked: How does a real life app get out to the public?
  • What is Machine learning and how you can harness it's power: Whether you have heard about it or not, this is something that you will hear more and more in the coming years. Those who understand the high level concepts and can harness it will have an advantage. 
  • What is your developer environment on your computer look like: We will be setting up our computers with all the tools necessary of a developer so you can use the same setup when you go into the workforce.

Why do we teach the above? Because in this day and age, just knowing HTML CSS and Javascript is not good enough and you won't be able to grow in your role and command a higher salary. I am teaching you these things because these are the things you should know in 2018 so that you are miles ahead of the rest. 

Make this the year that you took a risk, you learned highly in demand skills, you had new experiences, and you received new opportunities. I hope you join me in this journey. 

This is the proudest work I have ever done in my life and I am confident that you won't find a course better than this. 

See you inside!

Taught by: 

Andrei is the instructor of the highest rated Web Development course on many platforms. His graduates have moved on to work for some of the biggest tech companies around the world like Apple. He has been working as a senior software developer in Silicon Valley and Toronto for many years, and is now taking all that he has learned, to teach programming skills and to help you discover the amazing career opportunities that being a developer allows in life. 

Having been a self taught programmer, he understands that there is an overwhelming number of online courses, tutorials and books that are overly verbose and inadequate at teaching proper skills. Most people feel paralyzed and don't know where to start when learning a complex subject matter, or even worse, most people don't have $20,000 to spend on a coding bootcamp. Programming skills should be affordable and open to all. An education material should teach real life skills that are current and they should not waste a student's valuable time.  Having learned important lessons from working for Fortune 500 companies, tech startups, to even founding his own business, he is now dedicating 100% of his time to teaching others valuable software development skills in order to take control of their life and work in an exciting industry with infinite possibilities. 

Andrei promises you that there are no other courses out there as comprehensive and as well explained. He believes that in order to learn anything of value, you need to start with the foundation and develop the roots of the tree. Only from there will you be able to learn concepts and specific skills(leaves) that connect to the foundation. Learning becomes exponential when structured in this way. 

Taking his experience in educational psychology and coding, Andrei's courses will take you on an understanding of complex subjects that you never thought would be possible.  

See you inside the course! 

Transcripts

1. Introduction to Javascript: Welcome back. We're about to take the biggest step in our developer careers. Now, this is by far my favorite thing to teach, and I cannot wait to get started. But before I do, I want you to know one thing. When I first started learning JavaScript, it was the hardest thing to get. I remember feeling confused and frustrated along the way. And to be honest, if this is your first time learning a programming language, you'll have those moments. I'm here to tell you to stick through it just like learning any language. With enough time in practice, you can become fluent now, unlike human language, though, you don't have to remember as many wars and sentence structure. So you will get there. I promise you this. Now, don't just watch the videos in this section and fly through the content really work on the exercises I give you at the end of the videos and make sure you understand each topic. Finally, this section will teach you the basics of javascript. It'll seem very strange and detached sometimes from HTML and CSS. As a matter of fact, we won't be touching a c'mon silly assess very much However, in the next section I will show you how our newfound knowledge of JavaScript can now be connected to our HTML and CSS websites. This is when the real magic happens. So stay strong. Stay determined. You'll get there in due time. Lets get started, shall we? Seeing the next one. But why? 2. What is Javascript?: welcome back. JavaScript was created in 1995 but the Netscape Web browser right over here. It was a way for them to be able to add actions to websites. Think of Javascript as the verb in anything you do on a website. You tweet. You play a YouTube video, you sign up for a user name, these air, all actions we take on websites made possible through JavaScript in 1995. It was a way for this browser Netscape, to beat the competition, which were other browsers at the time, because at the time, escape was the most popular. Other browsers started adopting their own version of JavaScript so that websites will work on their browsers as well. And thus less people switch over to their browsers. Can you guess what happened next? Well, every browser had their own idea of what Javascript waas. So there was no standard. Eventually, a standard had to be created to make sure that everyone had the same idea. What? Javascript Waas. So that Web developers can build one website and have it work on all browsers. This standard was called Atma script. So yes, Javascript and Acma script can be used interchangeably, and you will hear both of these a lot. But it's the same language now, this browser compatibility issue browsers having their own teams, their own schedule and her own code sound familiar. Yep, if you remember, it's the same thing that happened with HTML and CSS. The same issue that we keep having over and over recover this topic in Web developer Fundamental Part two. You see, it's always a big problem. Make sure that all browsers have the same understanding off what are really HTML CSS and JavaScript should be so that when we send each one of those files, we don't have to write one specific for each browser. And just like HTML and CSS, JavaScript is evolving. So there are new things that we can do now that you weren't able to do in 1995 with JavaScript in the ES six video section. Later on, in the course, we will talk about these new features, so don't worry. Now let's take a look at what Javascript does. We can open up the browser, and I have you Demi over here. Well, you Demi uses a lot of job script. I mean clicking on a course, adding it to cart liking a post. All these things well, they're all JavaScript. Even if you open categories over here, you see this drop down and I can select things. And there's actions constantly happening throughout the West site. That's old JavaScript. But it's not just the Web. Hagi's JavaScript on instagram. Well, Instagram uses JavaScript. What about something else? Maybe virtual reality. Yeah, you can do that to you can do VR VR games VR apse with javascript. Okay, that's that's pretty cool. What else can javascript you? Well, you can actually program drones with JavaScript and control them from your Wii remote if you want to. Dio. What about ah, robotics? Yeah. This guy built a robot that he can control from his web browser. How cool is that? Now, remember, no Js We talked about this slide of the beginning of the course and how we're gonna learn these topics. Well, some of this is able to be done because of it, but no, Gs is pretty much javascript. It is javascript. So you learn javascript. You can pick up back and stuff very easily. And then no Js section of this course will be a breeze. It's not a new language that you'll learn. So is express. So is react. So this is why JavaScript is so important. What we will learn here will take you very far in the rest of your career. This is one skill that really opens up a lot of possibilities. Here's the beauty of JavaScript. Oh, and any other programming languages, Because what is javascript really? It's It's a file. Ah, Father, you can write instructions to a computer. In the example of a robot arm. All you had to do is write. If I press this bun, move arm to the right. If I press this button move arm to the left, it all looks extremely complicated. But as you will see, no matter how complex a program, let's say, an online game like World of Warcraft. Well, everything is built one block at a time. One simple logic at a time. In the next section, we're gonna start writing our first JavaScript in our first simple pieces of logic. Don't let that fool you, though. Although it may look simple the start of the building blocks that allow you to build big web apps like Facebook or Google. Exciting things. They're gonna happen with your newfound power. So I'll see in the next one, but by 3. Your First Javascript: Hello. Let's learn some JavaScript. We're gonna open up Google Chrome here, and we're gonna go to view developer and this time, javascript console. So you can do command Option J as well. And it opened up this console, which is, if you remember elements you've seen it before. That's your a she male console is where we can write JavaScript on the right. You'll see the outline of what we'll talk about in this JavaScript segment. We'll go one by one, and some of them will come back to. But don't worry. By the end, you'll know everything in here. So let's start JavaScript. JavaScript has seven types. You can think of types as values that JavaScript can have. Let's start with the 1st 1 and that is number. So the number type well, in Java script, you can do something like this. Look, that the console allows us to write JavaScript as much as we want. So, by writing this and the consul, giving us an answer means that Yep, this is valid JavaScript. Okay. What else can we do? What we can do three times five 15 12. Divided by 43 That's awesome. What else can we do? 12 minus four. Eight. Um, can we do this? Can we do three plus four? Close the bracket times two. So that's seven times to 14. Yet it works, and we can even do this. And this is a special character that you might have not seen before. It's cold module and lets see what happens. Gives me zero. What if I do? 12 module. 05 It gives me to what this symbol does. And let's make this bigger so you can see clearly. And I'm gonna clear this just so you can see a better. And I could do clear here with these brackets and ill clean up everything for me. So one more time. What I did was 12 Margallo five, and that gives me to and what module does is it gives me their remainder. So 12 divided by five is well, it gives me a reminder of two because five can only go to 10 and then you have to reminder . So if I do, let's say 12 Margallo five for let's to nine. I get a remainder of three when you're thinking, Oh, God, you just you're just teaching me math. But Don't worry. This is only a small part of it. I just want to show you that the first JavaScript type is a number and we can do operations on them, just like a calculator can. The second type in javascript is a strength. So a string is just text. And all you need to do to let javascript know that you're writing a piece of text is double quotes. So I can just say, Bob, I can say my name and you can also use single quotes. And that is a strength. But what else can we do with the strength? Let me clear this. Well, you can also do this. You can say hello. Plus, there. What do you think will happen here? Let's see. Hello there. But it is one word. We need a space. So we would have to do Hello space. Plus there and there We have the space. Okay. So we can at things. So at two sentences together. What if we do? What if we do something like this? This isn't very nice. I hit enter and okay, that works. That's good. But what if I use single quotes here? What if I go like this. And remember I said that I can use single quotes and JavaScript. Well, you see, the syntax changes, and I get a little air. Well, because I'm using a single quote and then inside the string, I'm trying to use a single quote, and that would happen as well if I use double quotes. So if we go back to the example beauty before and I add another quote in here, well, again, I get in there. So let me clear that. How can we avoid this problem? Well, with the string and JavaScript, you can do something like this. This was to use single quotes. This isn't and watch this. This isn't very nice. And this backslash has a special meaning. The backslash says, Hey, whatever comes after this, it's a special meeting. Means just ignore it. Don't say that. This is a piece of string. I just want the back deck. So if I run like this, uh, oops. I made this index over here wrong. Obviously, they're quotes need to match. So let's try that again. There you go. This isn't very nice. Okay? I have another question. What happens here? 10 plus string of 34. So that's number 10 plus string of 34. Let's see what happens. Who? Weird. So Javascript automatically looked at this and said he's adding a number and a string. He's probably trying to add strings together. So JavaScript converts the number 10 into a strengthen and does 10 34. That's kind of weird, right? It's one of the quirks of JavaScript. There's a few of them. You just have to get used to it. Let's try something else. What about if I do? 10 minus three. Press Center. Now I get seven. What is going on here? And because with the string you can release, obstruct the string. I mean, let's see if I go Hello minus by. I get this weird symbol which will get back to you. But that doesn't work. So now JavaScript says, I'm going to because he's abstracting. I'm just gonna assume that he means the number three, so he's trying to help you out, but sometimes it can have unexpected behavior. So ideal. You never do things like this ideal. You keep numbers with numbers and strings with strings, and you keep the actions between the like types. So Let's go back to this. What just happened when I say hello? Minus by Well, n A N stands for not a number, and it's technically in JavaScript. You can see the blue highlighting here. It's part of the number type. So numbers can you know Cambridge from one stand to, you know, 567. But there's also the Nn When it's saying, Hey, whatever you just wrote is not a number. So that's the case as well. I know it's really, really confusing, but don't worry is just the quirks of the language that we're learning. Okay, I'm gonna show you one other JavaScript type before we get to some fun things in the next video. So the next one is bullion, and the Boolean type is very simple, bully and just means true or false. That's it. And sometimes that could be represented as ones and zeros. And for those that know a lot about computers, you might know that computer is pretty much runs on ones and zeroes, and that's that's where it comes from. But bullion zehr very, very useful because now we can do something like three is greater than two, and I'll say true three is greater than two. If I do, five is greater than 10. Well, say false five is not greater than 10. We can also do. Five is greater than or equal to five. So we'll say true because I can do greater than equal to, and I can also do. Five is smaller than or equal to five now What if I want to say, Does three equal three? I get an error. Why is that? Well, because in JavaScript, if you want to say something is equal to something, you have to say three equals three equal Sign three and I got true. And in the next video, we'll tell you why that's the case. It's very, very interesting. But for now, just remember, that's always a tricky point that a lot of beginners get confused above. Just remember, if you're comparing two things three equal signs the last one I want to show you is this. Three doesn't equal three. Isn't that confusing? So this is saying thus three not equal three false because three equals three. I know it. It can get really, really confusing, but think of this as the opposite off the equal sign. So, for example, if I do, four doesn't equal five. I'll get true because you're right. Four doesn't equal five. So what? We just learned our JavaScript comparisons, and they're the things right over here. That's it. You just have to remember these. Who? Well, that was That was fun, right? But we're just getting started. After this video I have left and exercise she for you try to find the answers to the problems and then copy and paste them each of the questions each of the line into the JavaScript console. So, for example, if I said, you know, evaluate three plus five, you'll copy this, put it in the console and just press enter. And I want you to be uncomfortable working with console and playing around with it experimenting around. And like I said, Really try and work on the next problem sets. I haven't giving you a lot because I don't want you to get overwhelmed. Uh, there's a lot more interesting things happening in JavaScript in this, and you can pick this up fairly easily. But I do encourage you to make sure you do the exercises. No. Can you get all of them? Good luck. I'll see you in the next video. But by 4. Variables: Welcome back. Up to this point, we've played around with some JavaScript types. Onley three out of seven. Dorie will get to the rest of them. But there's one problem. How does a program remember things? For example, if we right these pretzels are making me thirsty. Ham will do this. Plus we need the exclamation. Okay, I enter that. Okay, I get that. That's that's good. But if I need to use this again well again, I have to ride Thes frets ALS are making me thirsty and imagine he had to do that hundreds of time. That's kind of annoying rain that's computers are supposed to help us, But instead we just keep writing stuff and keep writing stuff. And that's not very efficient, is it? Well, to catch and hold values, JavaScript has something called variables. And variables can be used with the word of our. So now if I go var George so far is for variable equals thes Pretzsch cells are making me thirsty plus exclamation mark. Notice the Sami calling here. I'll explain what that does in a bit. I press enter, I get undefined. Does not worry about that. That doesn't matter for now and now If I go George and you'll see that Google Chrome actually helped me and recognizes it a press center, these pretzels are making me thirsty. How awesome is that? So we're able to store this value, and obviously this is simple. But imagine this was a long calculation that we had to make, and we want to access it well. All we need to do now is have George. It's a variable. So now you see in the last video when I said that when we're comparing things, we have to use three equals. Well, because when you do three equals three, it's saying, assigned the number 3 to 3. But there's a rule with variables with variables. Can't start with numbers. So if I go variable three equals three, I'll get on air. But if I go variable three, he calls three. Well, that's no problem. And variables have a few rules. The rules are well, it needs to start with a letter. It can end with a number that's fine, but it needs to share with the letter, and it can't start with a symbol so I can do far and sign Hello, he calls five. No, I'll get in there. So a very bold needs to start with. The letter can end in a number. That's fine. And there's a few other special cases. A variable can also start with a dollar sign or an underscore, but we don't need to worry about that too much. And the standard and JavaScript So you won't get an error if this happens. But you do something called Camel case. So if it was a word, let's say first name you do camel case because these are two separate words. You do lower case the first word Second word is gonna have upper case. So first name. So you capitalize the first letter and that's called Camel Case. So still not getting what variables are. Well, I'm gonna I'm gonna demonstrate this point further and why we need to store values in a programming language. I'm gonna introduce you to a little cool trick called prompt and prompt. When I used these brackets and I press center, look at that. I got something here and it's asking for something and I press okay and look at that. It returns. Whatever I typed. Let's try that again. If I go Prompt press enter, I say hello Press. OK, I get that response back. Okay. So how can we say something like, what's your user name and store that value? That's something that we use quite a lot. On what sites, Right. Well, with prompt, you can dio prompt opening and closing bracket. And then here will say What is your user name? So we're entering a string here in a front press center. Okay, so it says, what is your user name? So now if I got bin My user name is Andre. I get the user name. So using that knowledge, let's make a calculator. Let's do of our first equals prompt enter first number And then I'm gonna press shift here so that I can add a new line. So shift enter and I'm gonna say variable second equals prompt. Enter second number. And now if I press enter, I'll get enter First number. I'll say five press. OK, then enter. Second number. I say 10 and press. Ok, Okay. But now I got undefined. But here's the cool thing. Now I have these values held in these variables so I can use them if I check first. I have five. If I check second, I have 10. But you'll notice that I have double quotes around them, and that's because prompt automatically changes it to string. It's expecting a form of text, so there's a cool trick to change a string into a number and all we need to do. And this is just syntax we need to remember is number. And then we'll do first and I will give us five. So all we need to do now is do number first plus number second, and we'll get the some of these two. But again, we can use a variable here. I don't want to keep typing this. So what if I do? Variable Some equals number. First plus number second, Sammy Colin, Press Center. Nothing yet because it's in the some now. So if I as for some, I guess 15. Okay, so let's write our first program here. I'm gonna show you one other cool trick and that is alert. So instead of frump, we're gonna use alert and alert. What it does is says hi there. And for a press center, I get a pop up, but without anything to enter Justin. Ok, button. So using this, we can create a calculator. So let's do this. And in chrome, if you actually press the up arrow, it will remember your history and you can pull up whatever you've typed in. So you remember, here we have first, second. So those are the two prompts, and then I'm going to say variable some equals number. The first plus number of the second. And finally, again, I do shift, enter, and so that the code doesn't get executed. And I do alert some. So just looking at this, what do you think's gonna happen? I first asked for a prompt, and I store that value in first. The second prob asked for a second number, stores it in the second the some calculates the two numbers and then I alert the some gonna press center and see what happens. And your first number? I'm gonna say 15. Okay. Next number. I'm gonna say 20. Okay? And look at that. I got 35. That is the answer. And again, knowing what we know about strings and numbers I can now do again, I'm pressed up to have exactly why I wrote back and now I can say within the alert, the sum is close the bracket plus some. So let's see that from Breast Center. I'll go three plus four. The sum is seven. Look at that. Our first program variables can hold any JavaScript type. Think of them as little drawers in your desk. So in your desk you can open up that drawer and put anything you want in their your pens, paper, erasers, calculators and he and close that door. And whenever you need a pen or a calculator, you can open that drawer and grab it. And that's what variables are now. The one thing that I've kind of omitted and I haven't told you about is this little weird seven. Colin here. Why do we need it? I mean, we were able to do three plus four, and we didn't see a semi Colin well in JavaScript. Semi Kahlan means the end of an expression. So what does that mean? A fragment of code that produces a value is called an expression, so any the hell you that's written really is an expressive. So if I do three well, that's an expression. It produces a value three plus four is an expression in JavaScript. The rule is, and then there are some people actually that don't use semi colons anymore. But the way was built in the way that it's intended to work is to do three plus four at a semi colon most of the time. If you forget, it will still work. There's Onley small cases where I'll break your program, but just to form good habits for now by the end of each expression. So that is anything we've done so far had a semi colons and you'll get used to it. Okay, let's keep going with variables because they're very interesting. What if I do variable a equals? True? Because, remember, variables can hold anything so variables can hold brilliance and variable skin holds shrinks, and variables can hold numbers of as we've seen. So where you gonna hold variable A equals? True. But now what if I Well, I can access a But what if I say a equals? Hello? What do you think will happen if I press a and then enter? Well, I get hello because you can re assign a value to a because initially the program thought a equals two. True. But then we said, Well, a equals hello now. So it discarded the true value. And now a is equal to hello. And we've completely forgotten about truth. Okay, Another little trick. What happens if I go like this? Does that work, or will I get in there? Let's see. Okay. Undefined. I didn't get that red bar nowhere. Okay, what if I access ta? Let's see what happens. Well, hello was assigned the last parcel. Let's let's do a different variable. So if I do variable B which we haven't used before, and I do this, let's see if we can access it. Undefined B is undefined, and you may have noticed this before, but undefined is our fourth type in JavaScript. And I know it's weird because you're you're asking yourself what is undefined and, well, undefined is just one thing in javascript. As the name suggests, this means that the variable has not been assigned, So think of it as you'll get undefined if variable password is like this. So if a user doesn't put in a password, well, you'll get undefined and you'll be able to say, Well, password is undefined. You need to enter a password. Or maybe a form requires an email address. Well, if email is undefined than you can't sign them off to the fore. So on defined is used when nothing is assigned to a variable. So remember this. Just like you move stuff out of the drawer in your desk and put something else in. Variables can be assigned two different things. I can move my pen from one door to another. I can change things in that drawer. And if there's nothing in that drawer, bullets undefined. Okay, that's a very, very big concept in Javascript. Hopefully understand, I have a few exercises for you at the end of this video. I know you can do it. Good luck and see you in the next video, the by. 5. Control Flow: and welcome back. Hopefully, those exercises weren't too tough and you breezed right through them. We're going to talk about something called control Flow. Up until now, we've been doing this this little arrow, we write a line of code than another line of code than another line of code than another line of code. And everything executes, and one line just flows. Just kind of like water. If you're pouring water down, is just going straight down. But what if we had conditions? What if we want to say something? Like, If user name is Bob, say, hi, Bob. If not, say I don't know you maybe signing again or we don't have this user. And that's called conditional execution. And it looks something like this where we get to a point in the program and we have two options where we either want to go one way or the other and then continue executing. So in this lesson, we're gonna talk about exactly that conditional execution. Let's try some up. So JavaScript condition ALS. That's what they're cold. We're going to start off with what's called an if statement and an if statement kind of reads like English we could do something similar to this. I say if name equals, remember three equal signs here because we're not assigning a very bold we're comparing. If name equals Billy, close the bracket and this is just a notation that you'll have to get used to again is just like learning a language. You just have to know that when you're doing an if statement, you have to have these brackets close the brackets and then you do Curly bracket holds shift and enter so that the program it doesn't execute and we'll say I've added a tab just so you can see for indentation, I can say alert Hi belly and I close the bracket. And again, just like I said, each expression, something that produces a value, needs to have a semi call. And you might think that you need a semi colon here, but again, with an if statement, you don't add one but alert. That's an expression. We had a semi calling here. Now you might be asking yourself Well, we haven't assigned a variable to name yet, so let's do that. I'm going to say name. Variable name equals will say Billy and I'm gonna Press central. Let's see what happens. Hi, Belly. Okay, so that looks like it's working. Just the double check. What if I change name to Susie? Who's semicolon not calling. Okay. And now if we run this program again going to just copy it, this name equals belly alert. Hi, Billy. Nothing happens. I just get undefined and no alert. So that's a conditional statement, But let's be realistic here. You often won't just have CO that executes when a condition holds true, but also code that handles other cases. Such as when the name isn't Billy. Maybe when the name is Suzy. So this alternate path is shown. If you remember in the diagram by the alternate arrow, we need to have a new alternate route in case the name doesn't equal Billy. So let's go back again and see what we can do. So the second keyword that we're gonna learn is else so you can do something like if name equals Billy and I just press right. Chiara Here again, Google Chrome is smart enough to know that you've typed this before. And now instead off leaving it like that. I know press space else. So if name equals Billy Alert High Billy Else, the kind of res like English, right? And then again, else opening Curly bracket closing curly bracket. And within here I'm going to say alert. Mm, I don't know you. So now let's see what happens. I don't know you. And why is that? Because if you remember name, you go. Susie. If I change name to Billy well and redo the program, get Hi, Billy. So that's what's called an If else statement, you write a condition. If something equals true, then do something else. Do something else, and this is just a syntax you'll have to learn. But as you can see, it's fairly easy. You write it a couple times and you'll get the hang of it. Okay, but now you might have another question. What if What if you have something like Vicks something a little bit more complicated like this, where you have multiple conditions? Let's see what I'm talking about by showing you another example and this one, we're going to use something called else. If so again, I'm going to say if name equals Billy again, I'm just gonna press the right key here, and it's gonna load up whatever it before. So if name equals Billy Alert High Billy else alert. I don't know. I don't know you, But what if we also want to check for the name Susie? Well, I could do something like else if name equals Susie close bracket, I'm gonna say hi, Susie. And at the Yank here, you can leave it as is or again, we can add an else statement. So if both of these fail, both of these comparisons fail, I can say else alert. I don't know. You close the bracket again. Don't forget to close. Close bracket press enter and says Hi, Billy. Because remember, my name is Billy. But if I do name equals Susie and I rerun the program again. Press the arrow key and I press center again. Hi, Susie. That's pretty cool, right? You can think of this Kind of like how passwords work, right? This is what forms air doing. They're checking your email when taking your Paris sword. Using simple logic like this. Now I want to show you also with condition ALS what's very useful. And that's something called logical operators. I'm gonna show you the three of them. If I cannon comment this there, you and these are the three. So let's clean this up and try something. I can go if name equals Billy four, these two lines. So that's right above your enter key. This means or in JavaScript for name equals and then alert. Hi, Billy! Or an closer bracket. What do you think will happen here? Let's see. Name equals Billy Re X. Q. The Program. Press Center. I get high Billy or an but if now the name is and and I re execute the program Press center again. Hi, Billy. Or and that's that's pretty cool I can do or comparison. What's another one that we can do? Well, we can also do and which is two of these signs. And this means if name equals Billy and name equals and huh? Let's see if this works. No, let's to name Nichols an and we do the program and I'm not getting anything. What if I do Billy and execute? No nothing. Why is that? Well, this doesn't make sense, right? I mean, name equals Billy, and name equals an But as we've discussed a variable holds well, holds a value It's a drawer in your desk and it has a certain type of look to it. It either has a pen or a bunch of files. I can have both 1,000,000,000. And at least now, with what we've learned so far, so this doesn't make sense. Where you would use end is maybe to check somebody's name so I can do if First name Remember, I'm using Camel case here, Bob and last name. He calls Smith closer bracket curly brackets. I'm gonna say alert Hi, Bob Smith. Closer brackets Gurley Brackets Press Center. And looks like I made a mistake here. And it says First name is not defined. And, well, that's true because I've never said what first name is And last name is before I've already defined what name was, but it needs to know what these variables are. Otherwise, it's saying, Hey, I'm JavaScript and I've never encountered these words before Were you talking about? So before we do this, we have to say variable first name equals club and variable last name equals Smith. Okay, I actually want to draw your attention back to the air. You'll get this a lot. And when you're starting off reference there. First name is not defined. It's pretty good air, But keep that in mind. Reference area just means I I don't know what this value is. It's not referencing anything. Okay, so now that we have first name and last name defined repress up again to get to our little execution piece here and I go press center again Hi, Bob Smith. If I change the first name or last name to say, Jones Press Center and let's re execute this piece of code again nothing because first name and last name must match. Okay, I have one last one over here. And that's the exclamation point or exclamation mark, not point. Um, let's see what it does. This is a little bit tricky, but see if you can follow along here. If exclamation mark name equals bad opening brackets alert. Hi, Bob. And close it press center and I get high. Bob. Huh? Ok, let's remember one name. Waas. It's Billy. Why am I getting high, Bob when Billy's the name clearly name doesn't equal Bob Because of this. This is the not operator. So it's the opposite. So it turns this expression which is name equals Bob, which is false, too true. So just to show you if I go this and then false I got true. And if I go this true, I get force. So that's why I use the brackets here. I'm saying Evaluate this, and once you do this, add the opposite to not, and it seems like Why would I ever want her do that? When would I ever use this? And this is a good thing to use whenever. Let's say you wanna turn off a switch. So just like I showed you, if I go not true, I can say Now it's off, not false. Light comes on so you'll see cases when we do use this and I promise you it's very, very, very important that we have it in the language. So let's just review what we've learned up to this point so that in the next video we have a sense of where we've been and where we're going. We've talked about JavaScript types. We've learned about numbers, strings, billions and two undefined. We've also learned about JavaScript. Comparisons that be used sometimes in conditional seem. It's like if statements we've learned about JavaScript variables we've learned about JavaScript conditional that if else else, if statements and we've learned about JavaScript, logical operators, thes end or and exclamation marks and there's a few more that we haven't covered yet. And don't worry, we will. I know this is confusing. This is new syntax. It's learning a new language, but it's not too bad. It definitely doesn't have as many wars as a real language. You just have to get used to this and practice typing in the console and practice with the problems and get yourself familiar with running these sin taxes and it will click, and it'll become second nature. Like I said, everybody goes through this. You'll get it. I promise. I know I keep saying this, but I only say, because I know when I started learning this stuff, that's how I felt in. And that's how everybody else feels. So I wanna just make sure that don't worry. You'll get there. You're gonna be a master of JavaScript by the end of the score, so I'll see you in the next one. Can't wait to show you more talk to you then, but I 6. Javascript On Our Webpage: and welcome back. We're gonna take a quick break from learning JavaScript syntax to show you how javascript gets implemented in the browser. We're gonna go back to this image that we've seen many times before in this course, and we have a pretty good idea of what hte email and CSS does. If you remember, HTML gets sent to the browser than it sees the link tag, and the CSS gets sent to the browser. But what about our, ah, new friend JavaScript over here? What happens with him? Well, in this video, we're gonna learn exactly that. So I have over here and index dot html file. I'm gonna open it with Google Chrome. It's completely empty now, and I'm also going to drag it to my sublime text so that we can add something to it. So I have sublime texts and the browser, and we're going to use our little short command to create a quick HTML file Java script and let's had just have a simple header that says javascript and html save and refresh Perfect . Where master is this already? We all know what's going on. So how do we add javascript to this I mean, with CSS. We had the linked attack, right? And we have this h ref where we tell it where it is. Well, if you remember Javascript again, just like 18 months, he says, is just a file. So let's create one first and sublime text. I'm gonna create a new file. I'm gonna save it, and I'm gonna say script dot Js See the dot Js at the end. That means JavaScript notice what happens when I click Save at the bottom. Sublime. Taxed now converted syntax the JavaScript. So now I can write something like four plus three. When I get the cool JavaScript colors, I can write. If four plus three equals seven, I can alert. You're smart so you can see that it does the same tax for me. Okay, Perfect. I'm gonna just say that. Let's see if we can add this to you. I forgot the semi Colin here. Always forget it too. Let's add this to our a c m o. If it works, we'll get an alert saying you're smart. So how can we do this? Well, there's an HTML tag called script AC. So linked AG, for style, she script AG for JavaScript. And all we do is this. We have the type text JavaScript you see over here. How? With CSS, We have text CSS. Well, we're telling it that this is javascript and in here javascript can be written right over here. If I go alert. Hello. And you might remember this because it's kind of like the style tag for CSS. Let's see what happens. Gonna refresh and I get Hello. Look that we just added javascript to Morishima. But I really want her Use this file as we know with CSS, we don't necessarily want our JavaScript to live on a shema. We want separation of concerns. We want the job script in the JavaScript file. Well, the way we do that is through a source file. So all we do is source. You might remember this from images. So instead of h rough and link, we have source and we say script dot Js I save and I refresh and I get your smart. Now again, we can say script IGs because, well, it's in the same folder. It's in the desktop folder. If it wasn't, then let's say this html wasn't in the desktop folder, we'd have to do something like desk stop. Okay, so that's very interesting. What if I have multiple JavaScript files? We might have seen that in. Remember Bootstrap and Bruce Trump. We have, like, three script tags. Well, yeah, you can just just like you can with link. You can have multiple script axe, and you can just say script to script three. And again, Each one gets executed one at a time. Okay, Now, one question you might have is why did I just put the script tag at the bottom here at the bottom of the body? Why didn't we? And let me just remove this for now. Why don't we just put it at the top like we do with the CSS file? Well, let me show you something. Let's put it up here. Let's see what happens. I'm gonna refresh. Okay? I get your smart. I don't know if you saw that. Did you see the JavaScript go? Let's change us quickly. Let's say our website is now freshen you and I'm gonna say waiting for JavaScript. I'm gonna save notice what happens to the header? I refresh. It hasn't changed it. I have to click your smart, you see it. It's completely gone. Click OK, and only then it shows up because the browser reads the file, goes and gets the CSS file and then sees a script act and says, Who? I'm gonna go read what's over here. And here is an alert, and what an alert does it. It waits for us to click. OK, so the browser can't display waiting for JavaScript. So you will see in older websites people that put the script as in here. But that actually delays. We'll get seen by the user instead. If we put it down here and change the text again to not waiting, gonna save, let's see what happens. Not waiting for JavaScript that got changed. So we ideally want to put our script tax at the bottom of the body. What that means is that the website gets displayed, gets rendered, and then we have to still wait for the JavaScript low. Let's say we had a cool animation. It will have to wait until that loads, but to a user, it appears like the website loads a lot faster because they might not click on a drop down many or see the animation right away and notice that there's alive, but they will see a delay if they don't see anything on the page. So script tags at the bottom. One last thing. How do we get that console? Two prints stuff out. It would be nice if instead, off alert all the time. I can get something in the consul well, and JavaScript, you can do something called console dot log, and here I could say hello. So this syntax a little bit weird. I'll explain later on what is going on here, but console dialogue is a special little syntax that we can use. And now, if I refresh the page, I get longing over here so I can write as much as I want here. Kind of like alert, but without getting that annoying pop up, over and over and refresh, and I get hello and we'll be using Consul log a lot in the next couple of videos. You can see here that it's a nice way for us to print something to the console before we learn how to change our HTML. So I'll see in the next one public 7. Functions: welcome back functions are the hardest part of JavaScript, and it will take some time to fully get it. However, in this video we're going to try and do that. We're gonna learn JavaScript functions. So let's start off with water functions. Well, there piece of code that perform actions without functions. JavaScript wouldn't really do anything. The beauty is that functions can perform one action or multiple actions, but we'll get back to that. First. Let's talk about how you already know some Java script functions without even realizing it . You've seen them before. Alert. That's a function prompt. That's a function you've seen these before. So JavaScript provides for us some functions that are really, really useful so that everybody who writes JavaScript can use them without having to write them over and over. So with functions, we have two options. One is using existing JavaScript functions like alert and prompt, and to we can create our own. So before we get into how we create our own functions and what is so useful about them, you might have no sudden noticed one thing. These brackets that are right next to each other with functions what what did they meet well, that Angela Scream means to execute the function. So let's see if what happens when I just type in alert and press enter. I get f alert and some were stuff f over here stands for function. You can see when I hover over it. It says function alert. This is what running a function means in order to run alert. I executed by calling it like this. So these brackets mean calling a function so I can call a function. And you also noticed that within alert again at thinks like Hi there these air called arguments And I know I'm throwing a bunch of jargon, a bunch of words that you but these are just things that you'll hear over and over when you're a developer and they'll stick to you. It won't the first time, But like I said, just try and get there one step at a time. So arguments are what's given to functions. For example, when we did in our example here hello and the consul log was an argument. And the interesting thing is that you can have multiple arguments. For example, if I remove this and just have leisure staff Consul Lock for now, I can dio How are you? I save and refresh and I get Hello. How are you? See? I can have multiple arguments but just adding a comma. But again, that depends on the function. No, again before we start creating our own, let's review alert is a function alert with the brackets. I'm calling the alert function, and I am calling the alert function with the argument. Hi Alert Needs to be called otherwise is just sitting there now. The big reason to use function is that you can call them as many times as you want. Think about alert. Imagine having to say every time Hey, computer, create this pop up window and print whatever argument I put in every time. I mean, that would really suck. Isn't it nice that we can just call alert and that pop up window pops up for us and everything's done for you? Well, that's pretty much. What functions do they make life easier by having actions bundled up? See, only write them once and then you can just call it Okay, so let's get to the fun part. Let's create our own functions. So if we go back to our document here. Let's see, right here. We have two ways of creating functions. I'm gonna show you the first way. Actually, I'm gonna show you this on first. So let's create our own function using the first method, which is function declaration. And we're gonna use our script Js Year. That's linked to our HTML that we did in the previous video. So here I can say function. Say hello is console got log? Hello again. The syntax a little bit different, but you just have to remember it. I'm saying function is gonna be cold. Say hello. We have those brackets that are very familiar to us and then console log. Hello. Let's see what happens when I save. Have a fresh, huh? Nothing happens. Why is that? Well, we declared this function, but remember what we did with alert. Well, it exists, but we haven't run it. We have to call the function. So we have to say Say hello. Like so now when I refresh, I get Hello. So think of this with the variable. When I say variable A equals five, that's not going to do anything until we actually get the A and that's when it prints five . Okay, so that's one way. What's the second way of creating a function? The second way is cold function expression. And this goes like this I can say variable Say bye equals function console dot Log by again . I'll say this and refresh. And again we only get hello because, well, again, we have to call that function. So I say, Say bye. Run it and refresh Hello. By now, one thing you may have noticed here is that we're assigning this function to the saved by variable. But what is the name of the function? I mean, here clearly functions. Name is Say hello. But here we're just assigning to the variable. I mean, technically, the function doesn't have a name, and this is called an anonymous function. We've assigned this function to say by, so we can reference it if you say bye. But otherwise we can't really access this function. Well, you'll see why that's important in later videos. But you could technically do this and call this function. Bye bye. Okay, so now that we know how to create functions, why do you leave? Need these arguments? Remember Why do we need stuff inside the brackets? I mean, dese look useful enough, right? Well, let's try something. Singles to a function sing, and this thing will have will have console dialogue and I'll say, Ah, that's that's me singing. And it also have consul dialogue to this Always saying Now if I see this and refresh, make sure it's still sing, so I have to call it Let's refresh beautiful song Ah t But now every time I want to change to a different song Maybe I wanted to say lah di dah. Well, I have to either delete this and changes to La de da or I have to create a new one calling Sing too. Console the log and you can see over here how annoying that is that I'm typing the same thing over and over and just changing these things. And now I have to run sing too, and I refresh. And who now starring okay, I did all of this And now imagine if we had thousands of songs that we want to sing were Spotify and we want toe display all the song lyrics. I mean, that's pretty, pretty tiring Rain and one of the rules with developers is Is this idea of dry? Do not repeat yourself. Ideally, you want to make things as efficient as possible. And one thing you can do is by adding arguments so I can add something like song. And now let me just delete this for now in the console log I can just say song So now any time I want to change the song, I can say La deed Ah, sing blue, then sing Backstreets back. All right, so now I save and refresh and look at that. You see how many lines of code we just saved and how I can now use sing any time I want and I can customize it to what I want. Kind of like alert. That's what arguments do. Arguments allow us to not repeat ourselves and make our functions what we calm or extensible they can be customized. Let's do one other thing to learn a fun thing about functions. We're gonna delete this and try function, multiply and we'll give it a M B. This will accept to arguments, and we'll do a times be, and now, within a Times B will say multiply and it will call Multiply 5 10 save and refresh. And now we should have multiply available to us. You can see over here multiply a be a times B exactly where we wrote. Okay, So what happens if I do multiply five in 10? What do you think I'll get? Let's see. That's really weird. Let's try that again with a different number still undefined. Why is that? Well, this cold debugging. Let's see if we can figure out what's happening here. I'm gonna do a console log here, and I'm gonna log out A and B to make sure that this functions actually running. So I'm gonna save and refresh. Okay. Console, log A and B. Let me just run the function again. Council. Okay, so it looks like it's running, But then I'm getting undefined over here. Well, I can show you this in a diagram. So we function is an input. We give it some sort of an input May. Sometimes it's empty. So that's whatever is in the bracket. In our crace, it's a M B. So those air number, so five and 10 and then the function does whatever we tell it to do In our case it was to multiply five and 10 and then we get an output. But we're not getting that output. Why is that? Well, because of function works like this. And don't worry, I've just added a bunch of arrows, but I'll go through everything and explain it to you. The input is receiving five and 10. The function does some stuff. And up to this point, we've Onley done consul lot. And the way Consul Log works is the function is saying, Yeah, just log it to the console in the browser. But we've never done it where we've returned a value. Let me show you what I mean. When we don't return something, we get undefined. When we return something, we get the valley. So let's see over here if we can explain this So here. Whenever I'm saying multiply 10 and five and I'm going to remove the console just so it doesn't confuse us. Save and refresh, I get undefined. That is because, as you see in this diagram, we're not returning anything. So in Javascript, the way you return things is you have to put in return inside of a function. So now it's going to return AM Times B and you see that it's, Ah, special word and JavaScript it highlighted. And red. Well, now it's saying, Yep, we're going to return the value. So even if we added Consul Log, you'll do Consul Lock and then ask, Hey, do I have a return? If I do, I'm gonna send it a valley. Hopefully, that's not too confusing. Let's see if it works. I'm gonna save and refresh. And now if I do multiply five and 10 I get 50. Yeah, we got our function of working, and that's is a very important key concept that we need to remember is that we need to return something from a function. I mean, we don't have to, but ideally we do so we don't get these cases where we just have undefined and we don't know what the function does. It's kind of like a black box that does something, and we might get a consul log or not, but we don't know what's happening inside. It's nice to have a return to make sure that the function acts the way we expected. Teoh. Okay. What if we do something like this? What if I do return a and I forgot a semi calling in here and returned be What do you think will happen? Let's refresh and run this Okay, What if I change the order and I put a first? Let's try that again. I get fought and return is the final way to end a function. If that makes sense of as soon as you say return in a function the program exits. So to go through this, I say multiply five and 10. It goes to the function. It says Yep, I have the function multiply. I'm gonna put a US five and 10 as B, and now it goes into the function and says, Return five, which is a So it returns that ended excess the function. So now these two lines are being run it all. The program simply reads. This goes to hear, reads the first line of the function and then exit. So in a function you should have one return statement. Or is that right? Let's see a case where that might not be correct. Let's add an if statement to this. Let's say that we want to do multiply, but we're also kind of lazy in Wana be too hard with the computer. So let's say we want to say that if, well, you remember this statement. If a is greater than 10 four, if B is greater than 10 we can say return. That's to heart, otherwise will return a times be. Let's see what happens here. I'm gonna save and refresh. Let's to multiply five and four. I get 20. What if we do? Five and 40 I get That's too hard because now it's reading the function five and 10 and it's saying B, which is 40 is higher than 10. So, according to the if statement, I'm going to that's too hard and because a return exits the function, it never gets to this. Even if I do return a Times B, it will never get there because the return exits the function. Just a double check. Let's do that. Let's dio five times 40 and it never gets to any of these lines because as soon as a Caesar return, it exits the function. I know it's a lot, and we'll get to why these things are important in the next couple of videos. But I wanted to also show you that you can have inter function. So in JavaScript functions are variables and what that means is that we were able to assign functions like this, right? And if we did something like this, well, we can call A in the same way that we did when we just assigned Function is variable. So technically we could do something like this. So let's have multiply. Let's go back to the way we had it. We'll leave, multiply the way it is and the simple form and we can actually se alert, multiply and then here will do three and four. And I know that's a lot of brackets. Don't worry, we'll go through it. But let's just save this and refresh and see what happens. I get 12th because what's happening is we're starting with the Inter function were saying, Hey, we want to alert something. What do you want to alert? Well, we want toe multiply. We want to call this function and give it three and four so it goes to multiply and it says , Yeah, I will sign A and B 23 and four and I want to return and be so now multiply gets changed too. 12 and then we alert. So you see that now, instead of having something like total multiply for five and then putting total here we can just assign, multiply into here that was That was a lot, but I want to show you that we've we've tackled, I think, the hardest topic in JavaScript which dysfunctions and we've also covered return well, which is very, very good. The one other thing I want to show you is that a lot of people get confused with the terminology and I don't think is as important. But I just want to clarify it. There's the concept of parameters and arguments now. Parameters and arguments kind of are are very similar, but just slightly different. So arguments, as we've said, our four or five so functions can have arguments and they get cold with arguments. Parameters are what A and B is. So multiply has two parameters of A and B. I know that's a little bit confusing. You can read up on it a little bit more. I don't think it's important to really know the difference, but just so whenever you're reading articles or learning, maybe through YouTube that you'll hear these words almost interchangeably. They pretty much mean the same thing, just a little bit. Slight difference in them. All right, I know, I know. I thrown a lot of terminology you, but after repeating it a few times, it will make sense. So stage strong. But that's it for function. It's time for you to try some exercises. Re watch this video if you need to. You really want to make sure you understand functions, since it will be the core of JavaScript. Just remember what we're doing with functions is we're creating new words in the language in the JavaScript language so we can create variables. Or we can create functions to add vocabulary to the language. And up to this point, that's all we've been doing. We got this JavaScript that had a few words that we can use, and we've added new ones like multiply and total in order to make it more useful to us. And that's what programming is. I'll see you in the next one today, 8. Data Structures: Arrays: Welcome back. I hope you took a nice long break after the Functions video because I know we covered a lot . We're gonna learn something a little bit easier this time around, and we're gonna learn our first data structure. Now, what is a data structure? Up until now, we've only learned about numbers, strings, bowl Ian's undefined and functions. But how do you store all of them? We said that a variable is like a desk drawer, but you don't want to throw everything in there and have a huge mess or you don't want to throw just, ah, pen and close that drawer ideal. You can store more things you can organize them. Data structures are like compartment holders in your desk. Kind of like this picture over here. Different data structures are good, a different things. For example, in this picture, it looks like the file cabinet is really, really good for finding things because it's sorted in alphabetical order and data structures give us this ability to store information and access it in a way that is useful to us. So let's learn our first data structure, and that is a raise. Let's open up our consul and we have our script file here, and we're gonna write our first array by doing variable list. And we will have square brackets, Tiger Cat Bear and let's do Bird. So it's still a variable and, you see, strengths year. The only thing that's different are these square brackets. But I call this list and it does look like a list. But I could have called this anything list of animals, for example. But in a very like I said, is a way to organize information. And this is organized in this way. But how do we grab it? How do we grab one of these four items from the desk drawer? The way you access an array is with something like this. Okay, so variable name square brackets a number and score brackets. Let's to console, doll log and see what happens. I get Cat who now most of you might have thought that we would get tire. I mean list. We want the first item in the list. Maybe that's how you read it. But that's not actually how it works. In computer science, developers like counting from zero. So zero is the first number than one, then two, then three. So we always start counting from zero. So if you want to get Tiger from this list, you do zero Unless refresh and we get Tiger. Let's play around with this in the console. If I copied the list and put it like this, Okay, The consul actually gives us a nice look of the array and we see that we have zero tiger, one cat to bear, three bird. So, as you can see or never, Ray is just a nice way for us to list items in an order from 012 and three. Now what kind of things can erase hold? Is it just drinks? Well, not really. We can do variable numbers and have want 234 We can have billions and we can have true, false, True again. And this is the fun part. You can also have functions as an array, so I can do function apple console, log apple and then close up with the score brackets and function list Now has Honore location zero off. Apple here is even whack here. You can do a variable. Let's call it mixed list, and that can contain strings can have numbers calf undefined. You can have bully ins and, like I showed you before you can have functions and mixed list now has a whole bunch of wacky stuff. Now this is not advised. It's actually a bit of a performance issue when you have a raise with different types, so you want to keep it the same. But I do want to show you that we can put anything in a race. We can also make a raise within Honore. Do you see what I just did here? We have an array that has an array of Tiger cat bear bird. So if we save this and refresh, what do you think will happen? We get an array that has Tiger Cat Bear Bird, but we accessed zero. Let's try that again without the zero and see what happens. This time we get an array just like it says here that has and hurry inside of it. So how do we get, Let's say, bear? Well, we would say we want the first array and then another pair of square brackets, and because Tiger is at 012 we want to, or they say, Tiger and then there. So we're getting the first array, this one. And within that first array we want 012 the bear. Let's see if that works and then we get there now a razor. Cool, because JavaScript has pre defined methods for them. And what are those for? Now think of them as functions. Their functions that we can use on a race. Don't worry about too much. The term a method will get to it later. But let me show you what I mean. If we return this list of the way it waas back to Tiger Cat Fair Bird. So let's two. Let's look a list, what we have in list. Now you have Tiger Cat Bear Bird. Okay, so let's see what sort of methods we can add to the list lists. Let's do shift. Let's see what that does. I get back, Tiger. But if I look at the list now, Tiger has been moved. I've shifted the array to remove Tiger, and now everything's shifted to the left. What if I do list dot pump. I get bird. So if we look at the list now, it's popped Bird off of the end of the array. And now I only have cat in there. What if we do less dot push and then push needs to have an argument. Let's do elephant. And now we get back the number three. You might guess what that means and let's look a list. And now we have cat bear and elephants. So three items in the wreck. Let's clean this up a bit. Let's just double check what we have in the list. Perfect. What's another thing that we can do? Well, we can also do list dot con cat fork on Katyn eight. And in here we can, actually at another way, let's do be and dear this press enter. And now we have an array of five items Cat, bear, elephant be and deer. And I haven't told you this, But when we look at the number 01234 they're called index in a race. So index means cat has an index of zero. Bear an index of one elephant of to be a three deer on index off four. Okay, let's do one last thing, and then you can go do some exercises as you can see a raise or a ton of fun. One last thing I want to show you is this If we do list dot sort. Well, as the name suggests, we now have a sorted list. But well, why do we only have three items? Why not five? And this is a little bit tricky. You have to you have to practice a bit with the race to understand them. We've sorted our array. But on Lee, the original one, the one that we contaminated the one that we added, we didn't assign it to a variable, so it created a new array. So now we had to raise in existence the list which only had bear cat in elephant and another list. Can cats be dear that we didn't capture the value If we didn't assign it to a variable to show you, let's copy this again and try this variable. My list equals Okay, we have these five items and let's do very volt. My new list equals my list dot com cat and we'll do an array with monkey. So now if I look at it my list, I have five items. Cat, bear, elephant be dear, but if I look at my new lists. I have six items with monkey in it. So there are some methods that creates new lists like Khan Cat and some methods like Push or pop, that don't create a new list. Just modify the current one. I have some exercises for you at the end of this video. This is a really fun data structure. Hopefully, you're excited about learning this one. That's it for a race. Once you understand the syntax and the structure, this has a lot of power. The last thing I wanted to show you was that our good friend W three C has a great list of references of what methods a race have so you can read through them as you work on your exercise. There's a few things that I didn't cover in the video that you'll have to search yourself through here to figure out why you'll need to solve the problems I'll see in the next one. But by 9. Data Structures: Objects: objects. They are really powerful data structures. And as you can see, it's the second data structure that we're gonna learn in JavaScript. And as a matter of fact, they're also a JavaScript type. Objects are collections off property. Well, what does that mean? Let's take a look by trying to write an object. So to write an object, I can have something like a user and curly brackets. And within this, we can say name equals John. I can say age is 34. Hobby is soccer, and maybe we can even put is married two. False and the comma. The end. Here I can leave it off or add it. It works both ways. But now if I see this and refresh, let's see if we have the user object. Yep, Looks like we have named John H. 34. Hobby. Soccer is married false, and you see over here that we have on object and it looks a little bit different from an array, doesn't it? Because if we remember, an array looked like this apple banana orange. So never Honore. If we refresh, we have user that looks like this and a list that looks like this. If I open this up, we see that we have a bit of a difference. Because an object is more dynamic. I can have properties and value. So property name Valley John. Property age value 34 with an array. We had an index zero, which held Apple and an index one which held banana. Interesting. OK, but how do I grab properties? Because with an array, I could do list. Grab the second element with one and I got banana. What with objects. What you can do is you can say user dot name john user dot age 34 user dot hobby soccer and user dot is married false. Okay, Now, with Honore, we had methods like pop or push to change the array. We even had one cat. How can we add properties to an object? Well, very simple. We have to do is say something like user dot favorite food and I'll do equals and I'll do spinach. Now if I look at the user object, I have favorite food spinach. So we've just expanded the user object. What about this? Can I change to is married to true, say our friend John over here just got married. Well, now, if I go to a user, I have is married to true. Very cool. So you see the difference there between an array and an object. Now, one question you might be having is why isn't array a JavaScript type? But object is well because in simplified terms, technically, an array is just something like this. We even saw it when we looked at the list that we have zero close to apple, one Egleston banana and two. He goes to orange and you see what the power of data structures are in javascript, that idea of a desk drawer and in that drawer you don't want to have a mess. You don't want to just put one thing You wanna have multiple things, but you want them organized. So maybe you want the pens all organized in a section and the files organized in a different section. And as I mentioned, data structures help us organize things better. So, for example, on array is really, really good at maybe containing a shopping list or a to do list. But an object might be really, really good at containing something like user information. So if you think of a game? Let's say you're building a game. Where you controlling this wizard? Well, this wizard, how told the wizard is how powerful it is, how many experience points that has. Well, that will be really, really good to put in an object, because that wizard is an object. We need properties and valleys. But maybe the spells that could be a list. Because we can just have a string of all the spells that the wizard would know. So doesn't mean that we can have a raise inside off objects. Yeah, if the user was a wizard, I can put spell or spells, and I can do an array of all the spells Deborah Cadavra for Suzanne, or I can dio do so Now I have an array inside a user. Okay, what about the other way around? Can I have a user inside of an array? Well, yeah, you can. Let's say we wanted have a list of users over app or our website. We can have a list of objects where we have user name candy who has password secret, and we can have user name Jess that has the password. 123 Let's see this in action. I'm gonna refresh and say list. Look at that. Within this list, I have the first item with the user name and password and the second item user name and password. So lists are really, really good at all, making lists and those air a race and objects are really, really good at containing objects. But how do we access them now? Well, let's look at the user first. If I wanted to access a spell, well, I could do user dot spells and I'll get in a ray back. But if I wanted to, let's see access shoes. Sam. Well, I would just do user doctor spells And then because it's an array, I get the second item by using one. She's, um, the other way around for the list. I can say list the first item, which is Andy and I want to get his password. Well, I'll do password, and now I get well, Andy misspelled. This password should say secret, but we get secret. So that's how you access things. Okay, One other question that I have What if I want to say that this user John, who's a wizard, also can shout. Maybe it can do some sort of an action. Can we add a function to an object? Yeah, we can. All we have to do is do function. And you see, the color changed means we're doing something right. I can say function, console dialogue, shouting. Ah, let's say that. And let's see that in action. User, make sure that we have the shot there. Yeah, and look, it has the f for function. And now if I go user dot shout and remember, I have to call the function I get Mm, very cool. So I can have functions inside objects. And one thing you might notice is hold on a second. I thought functions were supposed to say something like, you know, Elect, But this one we have user dot shout. So this is a little bit different than what we've seen before, and this is actually called a method, and this is another terminology that we're going to learn. But a function inside an object is a method. So I can say that shout is a method off user, just like with an array like lists. And if I do pop well, pop is a method of list. And another thing that you might have realizes console dot lug. What do you think long is that we've been doing all this time? Well, console, as it turns out, is just an object. Do you see that console has all these looks like method on it. So this entire time, we've just been doing console log, But I can also do Let's do info if I do console dot info and I saw all say hello. Well, I get Hello. Nothing changes. But what if we do something like error? Well, I can do console, got error. And now look at that. I get the air. So that's what methods are their functions inside an object. Okay, I have one last cool thing to show you. And that is can I do something like this? Can a user be on empty object? Yep. It works. So if I get user too, I just get the empty object and there's nothing really in it. Okay. What about a race? Can I do a list that is empty? Yep. I can do a list that is empty, but as you can see, I can really use any properties in user to because, well, it has no properties and I can't really access list zero or list 20 which is the empty one . Well, because there's nothing in it right now. So this reminds us of when we don't declare a variable, we get on defined, but with an object and a list, we can have something empty and it's not undefined. But there is one thing I want to show you. There can be an empty object. So if I do have are empty object, well, it's an empty object. But there is something called No, and that is our sixth data type. And no, is a special type that just says that an object is no. So let's see what that means. If I look at empty object, I get an empty object. If I get a null object, it returns. No. So this is a special character that will get into later on in the lessons. But it just means that there is nothing in this object. If I go, no object dot Name Pickles. Andy? Huh? I can't set property name of No. But if I do that for an empty object with which is just an empty object. Well, I can say name equals Andy. And look, I have Andy. So that's what a no object is. It is empty, completely empty and well, right now, it kind of looks useless. Like we don't need it. But I will show you cases where this is important for us. Okay, That was a whole lot of stuff, But you've actually learned so much in JavaScript. This is pretty much, I would say, 80% of why you need to know in JavaScript to work professionally. And it sounds like we didn't cover that much. Or maybe to summon may feel like we covered a lot, but in terms off, syntax, just looking at this, we've only learned a few words in a few ways of doing things with this newfound power. I'm gonna show you how we can build a simple Facebook with what we just learned. I'll see you in the next video. That way 10. Exercise: Build Facebook: Hello. Welcome back in this video we're gonna combine everything that we just learned to show you why JavaScript is useful. Because I know some of your thinking. Okay? We learned a whole bunch of new ways off writing JavaScript, and we learned about a raise and objects, but I don't really know how that relates to me building websites or Web APS. But I'm gonna show you that we can build a simplified version of Facebook with what we just learned. So let's get started. We're gonna have a database with user names and passwords. We're gonna have a newsfeed, and we're gonna have users. So let's start off by thinking about how Facebook works with Facebook. We have a sign up form. Usually we need to sign in. And once we sign in, if it's correct, it goes to our profile where we can view our news feed. So let's build that. We can start off with having something called a database, so we'll have a variable database, and in this database, we can have multiple users. Right. So what we need here? We need an array, a list of users. So now I can say I have a user name and this might look familiar from our previous lessons . We'll have a user name off Andre and a password off Super secret. For now, we're just gonna leave it at one user. We have a database, and we also want to have a newsfeed. Right. So let's have a variable cold newsfeed. And in here, a newsfeed. Well, again, it's a list, an array of news so we can have a user name Bobby that on his timeline, has maybe so tired from all that learning. We also have we We have more than one item, usually in a newsfeed. We can say that user name Sally Sally on her timeline just posted. JavaScript is so cool. Okay, so we have a newsfeed which has an array of objects, and we have a database which is an array off. Just a single object right now. A user name and password. Now, how can he built a sign? Inform? Well, we would want to perform an action to check a user's credentials, their user name and password. What we've done this before, right? We've used prompt before. Accepts a user's input so we can do variable user name prompt will say equals prompt. What's your user name? Okay, we also have I'm gonna make the smaller just so everything fits in here. Hopefully you can still see. We have variable password prompt. That equals prompt. What's your pastorate question, Mark. Okay, so we have this working when we open up this file and refresh h e mails going to get loaded line by line and we see we have a script, let me load the script and then the browser reads line by line. We have a database, we have a news feed, and then it's going to say user name prompt equals prompt, and it's gonna ask us for what's your user name, and then it's gonna ask us for what's your password? It was just test that I'm gonna save and refresh. And there you go. What's your new user name? Andre. And what's your password? Super secret. That's very nice. But when I sign in, I either want to know that my password is incorrect or if I log in and everything is correct, I want to get my niece fee. Right. So it sounds like we need to perform an action, but we don't really have. Ah, sign in function in JavaScript, Dewey, it's, ah, custom function that we need to build ourself. So let's think about this. We want to create a function called signing and to sign. And what do we need? Well, we need a user name and password, and we can name these whatever we want. And just to prove that to you, I'm just going to do user and password. We'll do pass like that. Okay. And if we remember to create a function this function declaration have my curly brackets and in here I can do something. So again, let's think about this logically. In order to sign in, I need to check user name and password. Well, if the function gets the first argument to user Well, I can say that if user name on this case user equals Well, what does it equal? We need to check against our database. Right. Our database. When Andres signed up for Facebook, he put his user name down and password down. So we have that information. So we can say that when you sign in, we're gonna check user to see that the user matches database and it's an array. So we're gonna grab the first element in the array, and we're gonna grab the user name property, okay? And we also want to check the password. Right. So what do we do when we have to check two things? Bolts? A conditional That has. And so here I can say password should equal database first sight him in the array. And this time instead of user name, it's password. I'm gonna put this on on new line just so you can see it. There you go. So sign and function is going to say if user equals whatever we have in the database. User name and password equals whatever we have in the database. If that is right, well, we can say soldat log and we'll say newsfeed else. If the password or user name is not correct, we'll just say alert. Sorry. Wrong user name and password. So we have our function. But this disappeared somewhere, and we'll save this. And let's just refresh. Okay? What is your user name will say, Andre. And what is your password? But we'll say super secret. A press center. Okay. And now nothing happens because, well, we haven't called the function rain. We just know that Sinan exists. Just check that signing exists. Signing is not defined. Oh, it's because I spelled it. I spelled there wrong. Let's do signing again and let's refresh Andre Super secret. And if I look for a sign in now, yep, there's the function. So let's run it. Let's do sign in and we'll say User name prompt password prompt. Look at that. We just received our newsfeed. That's very cool. Let's put this inside those. So the script just runs and and we'll get our answer right away, so we'll do User name prompt and password prompt. Now, just to show you what I did here I am calling the function signing that accept two parameters user and password. So when I call the function, I'm going to give it to arguments to match those parameters. I'm gonna give it the user name prompt, which contains whatever we've written in the first prompt and then password prompt, which contains whatever we've written in the second prompt. So now if I save this and refresh, I can say, What's your user name? Andre. Password supersecret. And look at that. Now I'm logged in and I can view that Bobby is so tired from all that learning. And Sally. Well, Sally finds JavaScript really, really cool. Let's also try out the else statement in case we mess up our information. I press refresh and I'll do Andre and for password ologists, do you want to Three. I'll get Sorry, Wrong user name and password. There you go. We've built a basic Facebook and that's what's so amazing about JavaScript is that you look at websites like Facebook that seem really, really complicated, but they're all made of these small chunks. And the functionality that you see on Facebook is exactly that we are signing in and they're checking the sign and information against the database. And then based on if we're right or wrong, we either get the news feed or we get, you know, please sign it again. And that's the power of JavaScript right here. And this is why I'm so excited to teach you the stopping because it opens up a whole new possibility off pretty much doing anything online. Now I have another exciting video for you coming up next. I'll see you on that one, but my 11. Javascript Terminology: Hey there. Welcome back in this quick video. I just want to go over the terminology that we've been using again. I'm just going to repeat it so that you really have it nailed. The 1st 1 that we've learned about is the idea Off function, declaration and function Declaration is a way for us to create functions like this. We also learned about function, expression and function. Expression is a way for us to grave functions with a variable like this and function expressions can also have names. Four. It could be an anonymous function like this. You're more likely to encounter this than with names. But I want to show you both of those. Okay, what else do we have? We also have this idea of expression and an expression is well, this actually gives it a good good overview. And expression is something that denotes of value. So one plus three is an expression, and we end expressions with semi Colin. If we do variable a equals two, that's an expression. If we're returning something from a function were returning true. That's an expression. Some expression is something that produces a value. Okay, how do we make a function. Perform that action, who recall that cooling or invoking function. And we do that by doing alert and then the brackets. Or we can do something like new function parameter one parameter to and we cold or invoke a function this way. We also a sign a variable, and we do that by well, we assign it variable A true okay. We also learn about function versus methods or method, and a function is something like this is a function. A method is something that is inside of on object like this is hey method. So the way we access them is different. A function is access like this. A method is accessed with a dot in front of it. And there you have it a few terminologies that I've been using them. Hopefully you've learned them by now, but wanted to recap everything so that it really, really sticks. And this should make everything more clear. I'll see in the next one. But by 12. Loops: Welcome back up to this point, we've learned about codes. Just executing from talk to bottom just in a straight line we've learned about conditional is where we can add an if statement and have it go one way else go the other way. And then we also learned about if else and else if so, if else if else if Els and then what if we wanted to do something like this, Something where we keep doing it over and over. And that's called looping. And that's where we're gonna learn about in this video. And as you can see in our online JavaScript looping, we're going to go through all of these in this video. Let's get started, have an empty script. I hear that again is attached to our A she male. And let's start off with maybe a to do list and a to do list has well, should be an array, and we wanna have maybe clean room. We wanna have brushed teeth, maybe exercise. She definitely study some JavaScript and finally what? We should get healthy. All right, so we have a to do list. Let's say that we wanted to add an exclamation mark at the end off these two do oeste items . I mean, these are all really important. We want to emphasize that, but I mean, that is kind of tedious, right? I have to go one by one and at an exclamation mark at an exclamation mark. And imagine if to do list was hundreds of lines. And as programmers, we want to do things efficiently. That's what we have machines for. So let's add some looping to this to do. Ah, Loop and JavaScript. One of the main ways you can do it is called a four loop, and you're gonna learn a new syntax here and be warned. It looks confusing at first, but it's one of those things again. You have to do it a few times and you'll get the hang of it. So the 1st 1 is variable. I equals zero. Well, do I is must then to do start length and then we'll do hi Plus. Plus, don't worry. I'll explain what this means. We have the curly brackets and then within here. For now, let's just wait and explain what's happening. So I'm saying for which is a JavaScript Wards saying we're gonna do a loop now in this loop . The first thing we're gonna do is we're going to say I equals zero. So it's just a random variable eyes. It's common to be used in a for loop stands for an index, so I starts off with zero. We have a semi Colin, which means that's the end of the expression we just assigned the I variable zero and then in the next Lyness says I, which is at the moment. Zero. If that is less than the two DUIs length and two DUIs length. We've never seen this before, but it's saying, How long is the list in this case? 12345 So zero is greater than five. If that's the case, then run this loop. And when you're done, do I plus plus, which means I plus one. So let's go through that first off. Two DUIs doll length. If I go, if I copy this and I do to do start plant, I get 55 items. I could also do hello dot length and I got eight. So 12345678 So let's just tells us how many items in the list. And if I do variable I equals zero. Well, I zero. But if I do I plus plus and I look at I again I see that it's one. If I do, I plus plus again Well, I get to. So this is incremental. I So what we're doing is we're saying Start off with zero as long as I is less than five. Then run what's ever in this block, and once you're done with it, add 12 I. So let's see what happens If I do console dialogue, I hear that's save and refresh. 01234 So we're doing a loop where we starts off with zero. Then we add one. It's not one. Then we add another one to another. 123 and another 1 to 4. And how come we don't have five here? Because as soon as I equals five, that's going to match the to do's length and the loop stops. So that's how we tell the loop to stop. Okay, so how can we do this if we wanted to add exclamation mark on the end of these? Well, we can access to dues by because it's an array by I. Because the first go around, I will be zero, which will be clean room, then one which is brushed you then two, which is Exercise three, which is study JavaScript and four, which is eat healthy. So let's double check that if I do two DUIs I and Safe refresh and I should change this back to Hi, There you go. Otherwise, if I do this, this actually worn run much us because, well, this is five equals five. So it's never gonna It's never going to go through the loop. So let's change that back to I am refresh Clean room brush teeth exercise study. JavaScript eat healthy. Perfect. So now I can just do hi plus exclamation mark. Let's refresh. Look at that. That's how important these items are. But if I do to Dio or two DUIs well, my to do's don't actually have thesis exclamation marks. We've just Consul logged them, but we haven't actually changed that to do it. So let's do that. We can now say that two DUIs I equals two DUIs. Hi plus exclamation mark. So let's see, I refresh. Nothing happens. But now if I checked two DUIs. Look, that I have exclamation marks you need to have might produce. And again to break that down. We're saying clean room now equals clean room plus exclamation mark. Very cool. Okay, let's learn a few others, actually, before we do. What if we want toe cross cease off the list? Maybe we want toe cross them off because we've done them well, we can do something like to do Stop pop. If you remember, that's, Ah, an array method pop that removes the last item. So if I go save and refresh, I got to do so. I pop is not a function. Why is that? Well, because we're saying clean room pop, and that's a strength. What we want to do is two duce dot pop, because that's the array. So if I save and refresh that, let's see what we have And are two Duce clean room and brush teeth. Why is that? Well, because initially this was zero, and to do list length was five. But then because we popped it this change to for and this to one and then three, and to so, as you can see, we removed, eat healthy study JavaScript and Exercise. But because our to do's length changed well, it stopped halfway through. So what's one way that we can fix that issue? Well, we can do variable two DUIs dot length two DUIs. Length equals two DUIs dot length. So now this variables five. So if I just do the variable two DUIs length, this is going to remember because it's only gonna run once it's gonna this is gonna run. Then we're gonna sign 5 to 2 DUIs length, and then this is gonna loop over. So if I see this and refresh, let's look at two DUIs like that. We finished all of our to do's very cool. Okay, let me show you another option. Which is the wild loop. The while loop it goes something like this. While its creator Very well. Here, variable counter contra one. We're going to say that that is zero, and we're gonna say while counter one is less than 10. In that case, I want to console, log, counter one, and then I want Teoh. I kinda want plus plus, remember, we're doing we're adding, so every time were increasing counter by one. Let's just see what happens here if I save this and refresh. 0123456789 And then it stops because? Well, as soon as this, it's 10. This is no longer right. So this part of the bloc doesn't run. Okay, Can I do something? Maybe the other way around where we say that the counter is 10 and this time we want to count down. So while the counter is 10 keep going and otherwise stop. And the way we do that, we obviously wanna subtract. We don't want to keep going 11 or 12 because otherwise is going to keep going forever. The way we do that is minus minus, which is the exact opposite. So it subtracts one. Let's see what happens. 10 987654321 There you go. Now, out of curiosity, what will happen if I go like this? Where the number just keeps increasing from 10 to 11 to Well, infinity, right? They're just going to keep going up. And you can do this in Google Chrome if you want. Um, it's actually pretty pretty entertaining. What happens is it just keeps going forever and ever. You'll just get a list of all these things and it's called in an infinite loop. An infinite loop means it pretty much goes infinitely. Except it doesn't really, because eventually Google Chrome's gonna crash. It's going to say, I can't handle this information. You're driving me crazy and it's gonna stop working. Okay, so we learned, though. Four loop we learned the while. What else to be half We have the do So this is called the Do a while loop, and it's a little bit different in the while we start off with do then curly brackets and we say, Counter, let's school a counter to this time we're do variable counter to because 10 and do come for two plus plus, so add counter to and also console dot log counter to, and we want to move council log at the top, because this way, we'll start with 10 then increase. Oops, that should be subtracted. So we do 10. It's gonna lock 10. Then it's going to subtract. So the next time it comes around here it's gonna be nine, and then we do while and we give a condition here. So the conditions going to be counter to is going to be greater than zero. Okay, so let's see what happens here. I refresh. 10 987654321 It looks like we just did the same thing as the wildly, didn't we? So let me just test that out. Let's refresh here and we see that we have 10 through one for the while loop and 10 through one through the do while loop. So what is the difference here? The difference is that with a while loop, we check the condition for so we say, is Kana Juan greater than zero? Okay, then do the stuff versus the do while loop that says, do the stuff first and then do counter to let me just demonstrate that point. If we do 10 here and 10 let's refresh. I only get one. Let's check something here. I'm going to say this is the while loop and this is the do while loop, save and refresh. So it looks like they do while ran. But the wild loop never did because, well, 10 equals to 10. This fails and the loop doesn't run versus the do while loop that does this first and then checks the condition if they should lose. So that's the difference between these two. But to be honest with you, most of the time you're gonna be using a four loop, and the four loop is what you're gonna get used to. But there's actually a better way off doing it. If you look at the section outline, we see that I have one last one, which is four each. And it says New and Eckman Script five. So, as you remember, JavaScript is constantly evolving. An Acma script five was a new standard that added the four each method. So what is the four each method? Well, I'm gonna show you the difference between a four loop and a four each. They both do the same thing. But tell me which one looks better So with here, Well, say consul dot log. Hi. So we're just logging the I. And with a four each loop Aiken due to do's thought for each function I console dot log hi might look a little bit from confusing, but let's just try it up. Let's see what happens. So it looks like a Line 10 is printing out. 01234 and line 14 is printing out. Clear room brush. Chief exercise study. JavaScript eat healthy. What are we doing here? Well, the four each it takes an array in this case that to do so and it asks for an argument, that is tell me what to do with it. So the action that we want to perform on the to do's can be represented in a function. So I say function and this function receives the argument of I, which is the each individual item in the two Duce. So I could just say to do here and to do and refreshes or still be the exact same. So you see here that we're not necessarily accessing the index like we are with this one, because here, in order to get that two DUIs, I had to do two DUIs square bracket I five refresh. Okay. In that case, now it's all the same. OK, but how do I access the index within the for each? Well, the second parameter on the second argument that it receives is the I the index. So now if I do I and refresh 01234 So the same thing as drink this in the for loop and refresh. And look at that. Now, by looking at these two, which one tells you more about what it does, this one or this one? Let's read it in in English to dues for each run, a function that Consul logs that to do and the index versus Well, frankly, this looks confusing. So four each is a really, really great method that they've added to the language that really simplifies things. Most people might get confused by this part, the function. But just to show you how powerful for you is, we can actually do this. I'm gonna take out the function and I'm gonna call it log two DUIs. And now all I have to do is have a function and call it glogg two Duce. And now I'm gonna comment this out. It's going to do the exact same thing, but I can now use Lock two Duce in other places so I can now do. Let's say I have another list that has maybe exclamation marks like we did in the 1st 1 two DUIs important. So now I can do to do is important for each and use the same function log to do so I save and refresh and look at that. We have these two deuces well, so you can see that it's very extensible now. The one caveat I want to show you with four each is that it's a new standard as we do with all new standards. We should check that they work on all browsers. So if you remember, we had, can I use dot com that we use for this? And we used it at CSS to make sure that our CSS three features like blocks, shadow and transitions work on all the browsers. So let's do that. Let's do for each and you see here at my script five for each, it looks like, well, full sport. Everything looks good. We just off offer on many that has partials report. So it looks pretty good. Unless we're really worried about opera mini we can use for each in the browser and just a test. If we open up our console Well, we can definitely see that an array has four each. So there you have it. We had the four loop the while loop the do while loop, and then finally, for each and the next video, we're going to expand on our Facebook example and have multiple users so that we can loop through the data base of multiple users and see if the user name and password match any of those I'll see in the next one. Come on. 13. Exercise: Build Facebook 2: welcome back. Using our newfound knowledge of loops, we're gonna make our Facebook app a little bit better. I mean, because Facebook has more than one. User rate is not just one user. It's got millions of them. So how can we check somebody's password by going through? Not just one user, but multiple ones. Well, it sounds like a perfect solution for loops, so let's give it a go. I'm gonna add a few more users in here. Just copy this and we'll have Sally with the password. 123 And we'll also have Ingrid with passwords. 777 So let's refresh that. I'm gonna make this on our new line just so you can see it. I'm gonna refresh. And let's type in Ingrid 777 Sorry. Wrong user name and password. And that makes sense. Right? Because when we created our sign in function, well, it's only checking the first item in the database, but we want to check through all of them. We want to check through the first item in the array. The second and the third. Looks like we need to add a loop in here. So how can we do that we should No. At a four loop, I'm gonna say in here. Well, actually, gonna comment this out first and we'll say that when we sign in, we want to do four. Variable. I equals zero. We remember this syntax from last video Will say hi is less than the database dot blank. So database length, that's three. And we'll increment i every time open and close brackets. And then here we want to say if data base I So instead of zero now we can say I because eyes gonna go 012 So if database I he calls and we should had user name, here's all. So if the user name equals the user name that we receive, which is the input user name and going to start a new line here database. Hi, dog password equals the password that we received from the user. Well, if that's the case, what should we do? Well, if that's correct, will do. Console log. You see, otherwise we'll do alert. Sorry. Wrong user name and password. So now I'm gonna save. Let's try this out. User name Ingrid. Password. 777 Sorry. Wrong user name and password. Sorry. Wrong user name and password. But then I get the news feed. What just happened? Well, what we just did it was we did a four loop. But we ran this three times. So the first time I got Sorry. Wrong user name. The second time I got Sorry. Wrong user name because it's checking Andre, then Sally. And then it's checking Ingrid which finally works and gives me back the newsfeed. So our logic here isn't right. What can we do to solve this? Well, I have an idea. Let's create another function. I'm gonna call. This function is user valid. And this function is going to receive the user name and password. And here we can copy this and move it over here. But we don't really want to do what happened here where we constantly log Instead, we would want to say return true. So if user is valid returned true. If the user is not valid, then we should return false. Right? But how can we do that? Well, if I do return false here, let's look at the logic. I am looping through everything. If at any point, the user name and the password match will what we have in the database returned true. And we remember that a function stops and exits when it sees returned, so it's gonna return troop. But if it does the looping three times and this if condition never passes, it's going to go to the next line, which is return false. So now is user valid. Well, let's test this out. I'm going to say console dot log is user valid and we'll give it user name and password. You could see that the user name and password is coming from here, so let's see. I'm gonna save and refresh angry 777 True. That's right. Let's test something where it's not right. I'm gonna say duh and garble garble False. Okay, it looks like our is user volatile function is working. So now what's this? We can remove the log and uncommon our original function. And instead of doing all this check, we cannot say if is user valid user name and password, which is again this user name and password that we receive over here from the prompt. If this is true, then run the newsfeed. If it's false, well, else you say sorry wrong user name and password. Let's saving Refresh. Okay, lets go. Ingrid. Password. 777 We get our news feed and if we enter the wrong information, begin. Sorry, Wrong user name and password. How cool is that? We now just created two functions and a reiss pretty nicely, right? It says signing here's of user name. Here's the password. We go to the sign in function. It says, Hey, if is user valid? Yes, users. Vallat then blogged newsfeed, otherwise alert. Sorry, wrong user name and password. And that is a really important concept of naming things and ordering codes so you can kind of read it like English, and it makes sense. And there you have it. We have our Facebook app. You can see here the par of javascript again. We've created these functionalities that can be applied on grander scale on riel Web apps. I'll see in the next one, but my 14. Javascript Keywords: welcome back. I wanted to show you something that we haven't really talked about. But again, it's important to know. And that is that JavaScript has its own language to start off with and these air cold key wards. And you can see here these are all JavaScript keywords. And what they mean is that when I change this from Mark down to JavaScript, we'll all of these can see have changed colors. And that is because all these words are cues within javascript that if you use them, it already has a prettified meaning attached to it. So, for example, if we open up the browser and I do variable four equals seven, I'll get a syntax error because, well, four is used for four loop. I can't do var equals var equals eight because, well, var already means something in javascript. So JavaScript key words are words that you cannot use because it will have unintended consequences. JavaScript is going to read it and say, Oh, you're trying to meet something that I already know the meaning off. So this list over here, you just have to be cautious that you don't name your variables or your functions this way . But as you can see, these are the words they have. We've been using up until this point to create functions, to create four loops, and we'll encounter these throughout the course. But I wanted to leave this for you in the next section so that you'll have it as a reference. I also want to show you what we've learned so far, and I'm gonna change this back to mark down. So it's a little bit cleaner. Look at all this stuff we've done. We've done looping. We've learned about data structures. We've learned about functions, logical operators, condition, ALS, variables, comparisons and types. And there's still a few things that are great out here. But we've learned 80% of what's really, really important in JavaScript. These other ones will get to in the advanced section. But what we've learned up until now is something that all computer programs have. Once you learn this, if you wanted to learn a new language, they're small, minor differences. But they all have types. They all have condition. ALS. They all have loops. So once you master one programming language, you can move on to others a lot faster. than your 1st 1 So use that as motivation to go through all these things that we've learned because in the next few sections we're gonna learn even more. We've got in the law covered. I'm really proud of you making it this far. Can't wait to see you in the next video, but by