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

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

JavaScript for Beginners (includes 6+ real life projects)

teacher avatar Kalob Taulien, Web Development Teacher

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

59 Lessons (8h 9m)
    • 1. Welcome to JavaScript for Beginners

    • 2. 7 JavaScript Facts

    • 3. Your First Script

    • 4. A Brief History

    • 5. Introduction To Variables

    • 6. Merging Variables

    • 7. Console Logging

    • 8. Selecting HTML Elements

    • 9. A Way To Share Code

    • 10. JavaScript Mini Project #1

    • 11. String Manipulation

    • 12. Accepting User Input

    • 13. Introduction To Comparison Operators

    • 14. Handling Opposite Operators

    • 15. JavaScript Mini Project #2

    • 16. Handling Special Cases

    • 17. Code Comments

    • 18. Introduction To Arithmetic

    • 19. Boolean Logic

    • 20. Making Lists With Arrays

    • 21. Checking Variable Types

    • 22. Variable Casting

    • 23. More Comparison Operators

    • 24. JavaScript Mini Project #3

    • 25. Functions

    • 26. Practice With Functions

    • 27. JavaScript Mini Project #4

    • 28. Query Selectors

    • 29. Introduction To Events

    • 30. JavaScript Tip Calculator Project

    • 31. Anonymous Functions

    • 32. IIFE

    • 33. The `this` Keyword

    • 34. Scope

    • 35. Hoisting

    • 36. Introduction To Event Listeners

    • 37. Getting Input Values

    • 38. Changing CSS With Event Listeners

    • 39. JavaScript Mini Project #5

    • 40. Objects

    • 41. For Loops

    • 42. While Loops

    • 43. For Each Loops

    • 44. JavaScript Guessing Game Project

    • 45. Let and Const

    • 46. Introduction to OOP

    • 47. Extending Classes

    • 48. JavaScript Modal Project

    • 49. Home Stretch

    • 50. Template Literals

    • 51. Object Literals

    • 52. Destructuring Arrays, Objects and All the Rest

    • 53. Timeouts

    • 54. Intervals

    • 55. APIs and Ajax using Fetch

    • 56. Arrow Functions

    • 57. Adding and Removing CSS Classes

    • 58. JavaScript Final Project

    • 59. JavaScript for Beginners Summary

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

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





About This Class

Hello fellow developer! 

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

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

Are you looking for a thorough course to learn JavaScript?

Welp.. that's this course!

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

Is this course for you?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Are you ready to start writing JavaScript?

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

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

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

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

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

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


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

See you inside! :) 

Meet Your Teacher

Teacher Profile Image

Kalob Taulien

Web Development Teacher


Hi everybody! I'm Kalob Taulien.


Here's the TL;DR (short) version about me:

I have been coding since 1999 and teaching people how to code since 2013 I have over 350,000 web development students world-wide I'm on the Wagtail CMS core development team (Wagtail is Python's #1 most popular website making system) I try my best to answer EVERY question my students have  I love teaching — it's definitely one of my natural talents  Also I love goats! (Great conversation starter with me if we ever get to meet in person)

Below you can find all my Skillshare courses. The categories go from easiest to hardest, except for the Misc. Coding Courses at the very end. 

If you're brand new to coding, start with BEGINNERS WEB DEV.&nb... See full profile

Class Ratings

Expectations Met?
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
Reviews Archive

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

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

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


1. Welcome to JavaScript for Beginners: JavaScript, the hottest programming language today, from full blown websites to mobile APS to programs like Slack and Spotify, JavaScript is everywhere. It's the modern programming language every developer needs to know. If your brand new to Web development and don't know where to begin, Look no further. This course is absolutely for you. In this course, you will learn everything you need to know to get a strong understanding of the fundamentals of JavaScript. It doesn't matter if you're already super skilled in Web development or your brand new decoding. This course was designed for you. JavaScript is one of the world's most popular coding languages, and it's Superfund alert. In this course, you will learn the basics of JavaScript, variables, Web page, interactivity, data types and data structures, conditional statements, functions, JavaScript, quirks that make it different from all other languages, objects, classes and object oriented programming. AP Eyes and Ajax requests and everything in between. There's also five mini projects for immediate practice, and one final project to test your overall knowledge. Join today to become a JavaScript developer 2. 7 JavaScript Facts: Hello, end. Welcome to Javascript for beginners. All right, I think we should actually start off with saying what JavaScript is, where it's available and furthermore, what it is not. So let's just start off with number one. What is Javascript? Not JavaScript is not Java. There's a big distinction between Java and JavaScript. Java has been around longer than JavaScript. JavaScript was only named JavaScript so that it could leverage some of the popularity behind Jave a back in 1995. And they're actually not related at all. In fact, Jaffa is strictly a server side language, and JavaScript is almost strictly a front on language, although it can be used as a server side language now because it's been adapted to work that way. The key take away here is Java is not Java script. So whenever you're talking about JavaScript, please don't just call Java, because that's going to confuse other developers. Number two. Every Web browser uses it. 100% of all Web browsers use JavaScript. Now you as a user on let's say, chrome or Firefox. You can decide to disable javascript if you want to, but your browser comes with it so whenever you download a browser. Firefox Chrome Safari Edge. Even Internet Explorer comes with JavaScript support. In fact, JavaScript is actually the only language that you can use on the front end. So let's put that in there to JavaScript is the Onley coding language that you can use on the front end. It's the only one. There's HTML, CSS and JavaScript, and that makes up the entire front and stack of any website. HTML and CSS are not languages. JavaScript is a coding language, and it's the only one out there, and that actually contributes to its massive growth and popularity. Because there are no other choices. You have to know JavaScript to be a front and Web developer. Okay, Number four. As a developer, you're going to hear lots of words. You're going to hear things like Jake Weary React view, angular libraries and frameworks. There is a difference between all of these, and we will get more into this as the course goes on. But behind the scenes behind Jake Weary react view and angular, it's just vanilla javascript. It is all written in plain boring JavaScript. A library is a JavaScript file or a set of functions that allows you to make shortcuts. So I, for example, J Query is a library, and that's because it doesn't really come with all the extra things that ah full framework does. And a framework is like reactive you or angular, where it comes with more than just binding event listeners. That comes with a certain way of writing things that comes with a certain style, ah, coding style. That is on how you actually write your code, and it does almost everything you need. So that's the difference between a library and framework. But we'll talk more about those in the future. Number five. Can you use JavaScript online or offline? Yes, the answer is yes. You can use Js offline. Now, Why do I say that? Or how do I say that Rather is JavaScript whenever you hit a website, whenever you have you a website, your browser downloads a bunch of HTML CSS and JavaScript along with images and maybe a few other files, and your browser tries to cash those so that it doesn't have to reload it over and over and over again. Once you have a javascript file, you can execute that file in your browser, even if you don't have Internet. So even if you don't have Internet throughout this entire course, guess what? You can simply open up your browser and you can type code right in here, which is something I'll show you in just a little bit. And it will just say Hi world and that is JavaScript. So you don't need Internet for it. With that said, a lot of websites still have some sort of a p I out there and you're going to still need Internet to actually leverage the full usage of JavaScript. However, you don't necessarily need it all the time. JavaScript files JavaScript files and in dot Js So just like an HTML when you were learning html, it was dot html or CSS was dot CSS or dot python and taught pie, right? So it's the same thing, so dot Js and you're going to see this all over the place as well. So all JavaScript files end in dot Js and last but not least, you can create entire programs using JavaScript these days, so it started off. Once upon a time, you could only create programs in certain languages like C or C plus plus. And then it sort of shifted towards things like python recon. Make entire python python programs for an operating system, and now you can actually do the same thing with JavaScript. And the nice thing about that is it's one language to rule them all. So what you can do is you can create an entire program, and it can be on multiple operating systems. It can work on. Your mobile device is doesn't matter of its IOS or Android or Windows or Mac or Lennox or anything else. It's one system to rule them all. And a good example of this is Spotify, Spotify and slack. These air two huge applications that have for a very long time been using something called Electron. And what this does is it basically compiles all of your JavaScript into an actual program, and then you can go and send it to people to download on Windows, Linux, Mac os, android, iPhone, you name it. It has support for it. And so now JavaScript that's actually write this note. JavaScript is used to create entire programs, so that is sort of seven fun facts about two JavaScript. We're going to get into a lot more of the stuff as time goes on to finish off this video on the left. You see, my editor I am using ves coded is made by Microsoft is completely free. And you can get it by simply downloading it. You're going to need a text editor like this. So if you don't already have one, I would suggest V s code on the right. I simply have Google Chrome open. It's a browser. And in fact, all I did here was I went to a boat blank. So brand new page, right click inspect. And if you go into your console up here and let's make that bigger, you're gonna actually write javascript right in here as well. Hello. Hi. I just like that And we have some javascript. So you're going to see that my screen is split up into two. So I've got my editor on the left, and then I've just got ah, browser on the right. Something like that. If you have two monitors you can use to monitors, you can just flip between full screen on V s code or your text editor and chrome or whatever browser you want to use. It doesn't have to be Crumb. But this is how I have it set up in the video so that you can see all of it just laid out in front of you. Where that said, let's jump to our next lesson where we are going to create our first JavaScript script. 3. Your First Script: All right, let's jump directly into JavaScript. At this point in time, you should have a text editor like V s code. Adam Sublime. Something like that. And all we're going to do is create a new file. And I'm just going to say this as a dot html file and I'm going to call this your first script dot html. So at first, it looks like we're creating an HTML file, and in fact, we are. So I'm going to create will make that smaller. I'm doesn't to create a quick little HTML five layout here, and the first thing I want to do is I want to create a java stripped and so inside of my HTML, usually at the bottom of your page just before the body tag. You're the ending body tag. We put a tag called Script in Here script and slash script, and that's how we pretty much do anything with javascript inside of the page. Now, if you're following along with this course, Really, you don't actually need this stuff. You just need doc type html head body and then put script inside of your body. I'm just gonna leave that in there just, you know, for reasons cause heavy escort automatically puts it in there for me, so I'll just keep it in there. Let's call this your first script. And where we have our script in here, all I'm going to do is type alert, bracket quotation. Mark. Hi. My name is Caleb. And then I put an end in quotation marks and unending bracket or parentheses, and then a semi colon. And so if I save this file and I go into chrome and I simply hit commando or control Oh, you can also go into file open. And if I just open up that file, it will automatically execute my JavaScript for me. And so there's an alert in here. This little annoying box that pops up says Hi, my name is Caleb. And any time I refresh the page, it says Hi. My name is Caleb. Hi. My name is Caleb. Let's do it again. Hi. My name is Caleb. What happens if I click it once more? It will say hi. My name is Caleb. And that's because everything between this tag here this opening script tag in this closing script tag. All this javascript is going to run. Now, at this point, we don't know about things like syntax, which is like the structure of the language. Why do we have a semicolon? Why do we have a parentheses? Why do we have a quotation marks? What is an alert? We don't know that stuff yet, and that's actually OK. But for now, what I would like you to dio is just create a little script like this. So if you need to feel free deposit video and just create a script says hi, my name is whatever your name is, and just make sure it's it's an alert. Make sure it looks a lot like my code here. The important part is lying. 15 Tow line 17 here. You don't have to worry too much about this stuff. We're not looking at creating a responsive website, which is what basically this is doing. We just want some javascript to run and then open it up in your browser. There is an alternative to doing this if you want to. You don't have to do this in the file. You can also do this right in your browser. So if you open up any page right click Inspector, and you're gonna want to click on the tablets as consul. And in here, This is just your JavaScript console. Your able to write any javascript you want. So, for example, I could say alert JavaScript for beginners if I could spell it right. And there we go. It says javascript for beginners, and you notice that it looks like the exact same code as what I wrote over here. The text is different inside of it. We'll talk about that later. Ah, but basically, it looks the exact same. So you could do it that way. Or if you wanted to. You could use code pen dot io, which is a tool for basically sand boxing html CSS and JavaScript. And I'll show you that one in a couple of videos from now. But these are the two main ways that we execute JavaScript. Basically, your large scripts go in here. And if you ever need to test anything hey, just open up your browser. Right. Click, inspect. Go into your console and you can write any javascript you want. The next thing to be aware of is how do we link to JavaScript files? Well, if you're familiar with HTML and CSS in CSS, it's a link. Elements in JavaScript. We do script SRC instead of a draft. SRC is equal to Let's go scripts and your first script dot Js we could do type is equal to whatever type we want it to be. And we basically just closed the script. And what this is going to do is try to load from the scripts folder and is going to look for your first script jazz. Now this does not exist, so this is not going to work. But that is how you would use an external file. So if you have multiple HTML files that you want JavaScript to run on, you don't have to copy and paste it. You can simply use an external file, and that is something you should have learned in CSS and HTML as well. So your task for this video is to basically just create a script in open script tag, a closing stripped tag. Make sure it's just above your body. Don't want it up in the head like I wrote up there. Let's get rid of that. You want to just above your slash body tag and you know, you have all your HTML in here and then just alerts to the world. Hello. My name is. And then whatever your name is, once you've done that, let's head on over to the next lesson. 4. A Brief History: All right, let's talk about a brief history of JavaScript. I know this is not the most important thing in the world. I also know this is not the most interesting thing in the world. But it is, in my mind, a fundamental of learning a language. You sort of want to understand where it was coming from in order to project where it is going. And JavaScript, to me has a fairly interesting history. So first things first JavaScript was or is. Actually, Jeff Script is a relatively new programming language. In fact, it's called You Have a Script because it was a scripting language. It wasn't actually a full programming language until recently. It was developed in the year 1995 and it was made entirely in 10 days. Now the JavaScript that we write today significantly more complex and has taken way more than 10 days to create. But the original JavaScript prototype only took about 10 days throughout the late 19 nineties. Going into the early two thousands, a lot of people actually thought JavaScript was a fad because you had to write a programming language to make a website work, and you actually had to write a programming language on the back end so that you could do things like accept payments and you had to write a programming language on the front end so you could have small little interactions and it couldn't do very much back then. So it's understandable to think why it would have been a fat. But then, as more people came online and more people wanted interactions, JavaScript actually didn't really take off. Not not super well anyways. Flash became the default animation language now, as most of us know, flashes not really around anymore. And it's basically all JavaScript. And that's because Flash had too many security problems and JavaScript well, as it was maturing slowly in the background, it was able to do more and more things that Flash was able to dio and eventually just completely replaced it. When one day Google and a bunch of other people said no more flash. This is a major security problem, and Flash basically was given a a timeline said like, Hey, you've got a couple years to live, and then we are cutting your support. We're cutting off your life support, and we're going with JavaScript so everyone be prepared for that. And that's what ended up happening. And so throat that period. While Flash was sort of on its last legs, JavaScript really took hold. People really started to adopt it and make it better and make all sorts of libraries and frameworks that we use today. I had mentioned a few videos ago that JavaScript is the Onley front and programming language out there, and well, that was true at one point. It is not entirely true. There are other programming languages you can use on the front end, but they're not really four websites more than therefore programming languages. And the biggest threats to JavaScript successes is one called Web assembly, or blossom for short. It actually didn't even get proper browser support until late 2017 early 2018. Now, Web assembly is basically an actual programming language. A riel programming language that runs very, very, very fast is much more efficient than JavaScript for your browser. However, it hasn't really taken off, and I think it hasn't taken off because JavaScript grew so quickly through just a few years , really, about a decade and Web assembly was late. Tow launch. They were supposed to launch way before 2017. Originally, JavaScript simply grew too fast for Web assembly to catch up. That being said, if Webb Assembly did become a standard, that would be a great leap forward for basically every website or any program that's running through a browser. But I don't think that's gonna happen anytime soon. But, hey, that's neither here nor there because we're learning. JavaScript and JavaScript has huge demand today, But it's just good to know that if one day JavaScript was to be replaced for front and Web development, it would probably be by Web assembly and so fast forwarding a couple of years. We now have a server side JavaScript, called node dot Js, and is massively popular frameworks like React, created by Facebook and view dot Js. There was another one called angular, created by Google and basically view dot Js eight up the entire angular community. Ah, and React is king of JavaScript frameworks. But going back touching back on that node.js. Basically, there is an engine that can read your javascript and break it down into very performance code, and so you can write javascript and your computer. Basically, you can think of it as a way as it compiles your JavaScript into C and then as it's executing your C code, I'm doing air quotes here, but your C code. It is actually way faster. And so this is server side JavaScript, meaning that you can actually write JavaScript on a Linux machine and actually have it connect to a database and all those things that's fairly new. It's fairly popular to these days, and the nice thing about that is you can write one programming language on the front end, one programming language on the back end, and you can write basically any program that you ever need that needs to be connected to the Internet. You have javascript down pat, and you could do so many things with it. That said, when it comes to server side languages, it's still not as powerful as languages like Python Python can do significantly more. For example, a lot of AI artificial intelligence and ML Machine Learning is written in Python. It's not written in JavaScript, so that's a brief history on JavaScript. Where is going to go? Nobody really knows. I sort of suspect JavaScript is going to keep taking off again. It's the only front and programming language out there for a website. And so as more and more people come online, it becomes more and more popular. There's no choice. It has to grow, and you can think of it like this. JavaScript is the only child in a family, and so it gets all the attention. Whereas when you talk about other programming languages like C or Cortland or Java or python or any other programming language out there, you can basically hot swap most of those. In a sense, you can write an entire program in C. You could also write entire program in Python. Where is you don't really have that choice when it comes to front end Web development. And so we always use JavaScript. And I think because of that JavaScript is really going to take off ah, lot more than it already has in the coming years. 5. Introduction To Variables: Hello and welcome back in this video, we're going to talk about variables. Now, if you're not very interested in math, if you don't like math, maybe you're not good at math and you're hearing the word variables and you're freaking out a little bit. Don't worry. It's actually not as complex as it seems. A lot of people think of variables as, Hey, we're going to be right in calculus. And to be totally honest, me, my sit like as my person. I don't know calculus, and I work with variables every single day. Hundreds, maybe even thousands of them. Variables basically are just a way to store little pieces of data on your computer and then use them later. You can manipulate them, you can check them. You can tell your computer to execute a certain command based on a particular type of variable and the value that that variable holds. So let's take a look at what a variable looks like. And so I'm just gonna create an HTML five website here, and you know what? I don't need all that stuff that's call us very bulls variables and because we're not gonna have any HD melon here. I mean, we would put it in here generally, but we're not going to. We're just going to write some basic JavaScript for now. So we're going to stick with a script tag and down here, we're gonna put another script tag. And so when we start talking about variables, really, all we mean is a piece of data that we can swap in and out. And we do that with var. And this is very interesting that it's saying Django template. So let me quickly change. That's to regular HTML. There we go. And so we have a VAR declaration. This stands for Variable and Vier basically says they JavaScript. Just so you know, we're about to declare variable and then you give it a name, so whatever you want that name to be is equal to And then there's different ways of declaring different types of variables and we'll get into this overtime. So we're going to keep it simple for now. So I'm just going to say my name is Caleb and let's make that a little bigger here. So I have a variable. It's called name and the value is Caleb. And so we know of this alert function already. We'll talk much more about this down the road. If I just simply said alert name and I open this page in Google Chrome, you can actually see that. It just says Caleb. That's all it does. If I wanted to swap this out at any time, I get, say, Caleb, Darlene, save I'm gonna go over here hit Refresh says Caleb, telling you could even do more than that. So let's let's create another variable. Let's call it course. What course are we currently taking? Right now we're taking JavaScript for beginners, and you can see that it wrapped onto a new line. That's actually OK. It's just because my phone is a little too big here. Then underneath, you could say alert course and let's go ahead, refresh our page and this is javascript for beginners. And so this is really all of variable is now you can reassign a very bill at any time, so we're not using name anymore. I did mention earlier. Semi colons are thing. Generally, this tells a computer that hey, this is the end of the line and whatever comes after this is a new statement, so just as an example, we would not want to put these both on the same line like this, because if we did that and hit refresh, we're not going to see anything. In fact, you can actually right click, inspect and you can see that we have an error in here and let's open up our consul and you can see we have an error in here says something that is too hard to read in. There we go. Uncaught, syntax, error, unexpected token var And it tells us right exactly where it is. So if I click it and says Line 11 and showing me right here so that's pretty cool. So that's a debugging little pro tip there for you. And so even my editors saying, Hey, something's not right here. And so what we want to do is usually we just put that on a new line and put a semi colon at the end. This is the simplest way of maintaining us, and if we click, refresh again, it alerts us as expected, and there's no error in our council. And by the way, any time you run into a JavaScript, they're always open up your console. Take a look at what that area is because it can tell you as a javascript developer. What the problem, actually, as maybe it is something that the user did. Maybe it's something the developer did. By the end of this course, you'll be able to know exactly whose fault something is. Usually is the developers. They didn't implement something properly. Okay, so we have variable name and course, and we're just alerting this. Let's go ahead and overwrite our variable. Now we could it simply do have. Our course is equal to Python for beginners. And as I say this and go to refresh this page, it will now say python for beginners. And so that works. So basically we've created one variable. We didn't use it at all. And then we overrode the entire thing with a new value in here Now, because this variable has already been declared as of our this gets into hoisting a thing we'll talk about later down the road. We don't need to declare bar again. It's already there, so we really only need to declare var once on a particular variable. And after that we don't really need to do that anymore. So let's go ahead and save this and hit refresh finances. Python for Beginners Council didn't complain. Things were looking good. All right. One more thing that we should go over is what is with this. So you see these quotation marks around there? There's two other ways to do this. So we could do, for example, of our age. How old am I? Well, I'm 30. We could do this. And if I alert age and refresh this page, it says 30. And if I go in here and type age, it already seems to exist. It also gives me 30. And if I type in course in here, it already exists. Oh, my browser understands that there are variables in here that are accessible to the council . And so now we're sort sort of starting to interact with JavaScript in a script tag or a dot Js file. If we were to move it to an external file, and over here we can access some of these variables as well. So we're sort of starting to connect our editor and our browsers terminal or the council. So we see here, age does not have quotations around it it can. It can have quotations around it. Ah, you can also see that the semi colon was basically optional. I didn't need it, and that's OK because I was putting on my coat on new lines. And JavaScript is smart enough these days to understand that for a good practice, let's go ahead with that cynical in that in there and refresh our page, and it's still says 30 looks no different. But if I type in age here, you can see it has the quotations around it. This is a fundamental difference between different variable types. We will talk all about this down the road, but it is important to sort of get the idea right now. That's a variable that's called a variable, a variable actions called var var one. Anything that has a sentence or spaces in it. Any sort of space is like what you see in here that needs to be in quotations so we can't just put 30 30 30 30 30 with spaces in there and alert of our one. This is going to give us an error. There we go. Unexpected number, but if we put quotations around it, give this a refresh? It works. So at this point, you should be a little bit confused if you're brand new to javascript about what all this is about. So when we use quotations, this is called a string. So this is a string, and this is a type of variable that basically says, Hey, this is a sentence And then we have Let's save our two in here is equal to just the number 30 or any number or 30.5, something like that. And this is called a number. Or in other programming languages. It's sometimes called an integer. Actually, in this case it would be afloat. But that's neither here nor there. At this moment, we will get into that a little down the road. And JavaScript actually sums this up nicely is and they say, how we don't care if it has a decimal point or not. We just care. Is it a number? Is it not a number? And so when you're dealing strictly with a number, you do not need quotations around it. There are no spaces in there. You just have numbers and decimal points, and that's it. No commas, no dollar signs nothing like that. It is simply numbers and a period. So now if I go ahead and say, Let's alert far, too. And what I want to do here is get rid of these. Refresh our page. It's going to say 30.5, and it here. If I type far too, you can see 30.5 has no quotation marks around. Let's make that bigger has no quotation marks around it. But var one does. And that's because this is a string and far, too, is a number. So why is that important right now? Great question. Well, as we're learning JavaScript right now, it's not important to us. But it will become important to us very, very soon. And I think the earlier people understand this sort of difference in a variable type, the better your programming is going to be down the road. So that's all there really is for this particular video in the next one. Let's go ahead and start murdering some variables together so you can actually see sort of how a variable is supposed toe work, because right now these variables and I mean we're hard coating them, so they're not really variables were just saying, Hey, assign courses equal to JavaScript for beginners and then immediately override it. So that's no use. The variable needs to be something that can change. And, hey, if you don't fully understand this entire video, don't worry about it. Move onto the next one anyways, and eventually this will all just click into place. It becomes a lot easier once we actually start writing more JavaScript together. 6. Merging Variables: Hello, End. Welcome back. In the last lesson, we learned a little bit about variables. In this last, we're going to learn how we can merge them together. No, merging variables together like combining sentences, is called Concoct a nation. See that word here? Concatenation. You'll often see it just as the word come cat as well. Why is it called Cat Nation? I don't know. We could just call emerging. But hey, developers like their fancy words. So hey, we call it concatenation. Now in this video, I am going to actually do most of this in the console. So I go to the console and let's go ahead and make chrome bigger because we can. And so on my left, I just have ah, merging variables that HTML open. That's just the source code in here. There's currently nothing in there, no JavaScript, and it looks like a blank page, and we have a terminal in here. So I could say alert. Hi, and this will work. Let's go ahead and clear this clear council and let's create a couple of variables together and then can cat need them? So let's create an age and an introduction to who I am. So let's say Var intra was equal to Hi, my name is Caleb, and I am something something, something years old. So this is my intro. And if I type that you can see that it just spits out exactly what I had written already. Now, if I type in of our age is equal to 30 type and age again, we can see that age doesn't have quotations around it. So we know it's actually a number, and we want to inject that number in here. So how do we go about doing this? Well, we sort of went about this backwards because we defined this. First, we define intro first, and then we define their age. But guess what? We can overwrite variables so we can say intro, and it tells us what the intro is already is equal to instead of just having this blank in here. What I can do is I can actually quit the sentence by putting another quotation mark in there, put a plus sign, and then the variable, another plus sign and then a quotation. And there are different ways of doing this and more modern javascript. But you're going to see this all over the place. We're going to learn this way first. And so basically, this is saying, Hey, intro, you're already defying so we don't need toe use. VAR says Hi, my name is Calvo. Good old Calvo tabl e in. My name is Caleb and I am And then it quits the sentence and says, Hey, also add the age in their whatever that value is. Put it in there and then Oh, hey, start that sentence back up again with another plus sign and then another quotation and just put the rest of the sentence in there. And so if we hit enter, we can see Hi, my name is Caleb and I am 30 years old, and honestly, that's all there is to concoct nation. Now the problem gets into when you try to concoct Nate numbers. So if I create another variable called, uh, number two, I guess, and we'll make that 40.123 we can see in here Numb to is equal to 40.123 Now what happens if I wanted to say 30 40.123 So the number should look 3040.123 How are we gonna can Cabinet that? That is trickier because these air numbers and when you do a plus sign with numbers in most programming languages, it simply adds the numbers together, and that's not what we want. So if we did age plus numb to look at that, it gives us a number we don't want 70.12 to 99999 This is a funny little thing in computer science where there is actually no hole number on JavaScript occasionally runs into This is actually pretty cool example. But instead of saying 70.123 it says 70.12 to 99. Nn nn Nn and Infinity, infinity and so on. But this is not what we want. So how how do we merge these together? What? We can do this by contaminating a string in here. So remember that last lesson? Right side strings and numbers are a little bit different. Kind of important to know. Well, already we need to know the difference here so we can do this and always said was, Hey, take the number 30 added to an empty string and empty sentence and then add the second number to it. And so if we hit enter, we can see this is no longer actually a number. This is a string and we can tell it to string because it has quotations around it. And so this is saying this is a string of 3040.123 Also note how it says 0.123 and not 1 to 29999999 is because it's not a number. The computer doesn't have to work out a rounded number like that. It only has to say, Oh, this is a string. So yeah, I understand that there are numbers in here, but we don't have to perform a bunch of math stuff behind the scenes to make that work. This is just as if it was regular English letters. Negus doesn't have to be English letters. It could be any letters. Really? Ah, but yeah, just the difference between letters and numbers here. And so this one now thinks that these air all basically letters instead of numbers. So let's go ahead and add one sentence with two cats. So let's say ah of our cat one. His name is going to be a Zephyr. Is that for and of our cat two is equal to Henry. So these are my two cats. By the way, you're going to see this undefined. Whenever use Vyron, this gets into hoisting. This is a more complicated JavaScript feature to sort of tackle Right now, we'll tackle this a little bit later. But if you see undefined like this, don't worry. Nothing is wrong. It's just sort of JavaScript away of registering a variable and then registering the value of the variable. It's called hoisting again. We'll get into that in the future. And so now I want to say, var sentence is equal to I have two cats and the 1st 1 is going to be cat one. And the 2nd 1 is going to be cat too, and we could just leave it here just like that. And so what we're saying here is hey, I've got a sentence. But I also want to put the variable of cat one in there so whatever that is going to be, it happens to be Zephyr. But it could be any other name in the world. And maybe it's been over written 100 times. We don't know. Whatever that end result is, we're gonna put it in here, and then we're going to contaminate a another piece of the sentence, just the word end. And then, using the plus sign, we're going to concoct Nate Henry. We're just cat, too, so let's go ahead and type sentence and you can see I have two cats, Zephyr and Henry. Furthermore, we could actually get even deeper into this as well. We could dio of our age one. So let's say Age of Cat One is going to be four and of our age two. That's cat to whatever that age is going to be. We know it's Henry. I know his age is currently, too, so we've got a four year old and a two year old cat. Now we want to actually can captain eight into another can caffeinated sentence already so sentence has already been defined, and as you can see, I can take this into my console and it tells me, sort of in faded out text. I have two cats, Zephyr and Henry. Let's go ahead and say sentence is equal to sentence plus, So it's gonna take this value, and we're gonna can cat need something on top of that? So we want to put ah, period at the very end here and let's say and they are something years old, so something and something years old, so four into this is what we want to get into here. So it's always helping me to when I was learning how to concoct. Nate is just put like underscores in there. And then you can simply do your funny concatenation kind of style in here, where you have closing quotation plus sign and then in here we could put age one plus sign quotation and you can see it's an opposite order. So goes quotation plus sign, and then to get back in You do plus I in Quotation, and we're gonna do the same thing over here. And this is just so I'm going to be aged two and let's go ahead and hit. Enter. Oh, and by the way, we can put semicolons at the end of this. But we don't necessarily have to because our consul or chrome in this instance knows that every command is its own command, so we don't have to do this a semicolon thing. But again, it's just a good practice to get into. As Javascript gets older, we use semicolons a lot less and cool. You were probably screaming at the screen saying, Caleb, age to does not exist. It is called age one. You can see that here. I didn't call it aged two. I just called it a judge. And so let's go ahead and redo this. We could also just redefine or just define a variable called Age Two, and this would fix it. Let's go ahead and change us to age. And there we go. And now it says I have two cats, Zephyr and Henry, and they are four and two years old. And so if I go ahead and clear this and take sentence again to make that bigger, I have two cats whose F 100 they are four years old. So I've got aging here. We know ages two, we've got age age one is for we know that we have a cat one. We've got Cat two and then we've got sentence. So we have done a bunch of variable declarations in here. We have defined variables and we have merged them together in a sentence. And then we emerge it into that sentence one more time. So that's basically all there is to concoct nation. Now, you're going to see this all over the place because javascript is a language where you can modify your Web page, your HTML and even your CSS, and you're going to want to eventually take a variable and replace some text on your page with whatever that variable value is going to be. And so this is how we do can Cat Nation. Now, if you're interested in giving this a shot, you can do exactly what I did in this variable and just say, Hey, my name is whatever your name is. I have a cat or a dog or I have How many books do you have? Maybe you have 1000 books and you could do something like that. It's always good to go in there and give us a shot. Don't forget. If you ever have questions, I am here to help you. You can always leave a comment or question down below 7. Console Logging: Okay, Welcome back. In the last lesson, we talked Book and cat Nation. And this lesson we're going to talk about not uncashed nation. We are actually going to look at a better way to print variables to our consul instead of using alert. So, up until now, we have been saying alert test and then when we refresh our page, it just annoys us with this. And every time we hit refresh, It annoys us with this. And you know, at first when you're starting JavaScript, that's not a big deal. But you don't really see this functionality in the wild. People don't use alerts too often anymore. Unless it's like, Oh, you started to write a post and then you hit the back button. Are you sure? Because, like, do you really want to leave? That's a totally different thing, actually. Just sort of looks the same. So in here, what we want to do is just log something to our consul in here. And so whatever javascript re we right in here, anything. It could be literally anything. We just want to put it into the console that we can see what it is, and this is a very, very useful way of debugging your JavaScript. So let's go ahead and create a variable. And I'm going to put my name is Caleb Tallinn and of our profession. I am a teacher by trade. Yeah, that's actually entirely true. Also Web developer, So teacher and Web developer. And let's get rid of this alert. And let's say you just have to put on your imagination hat here for a second. But let's say we have 10,000 lines of JavaScript and we don't know what the value of name currently is. And so we have a town of code, and what we're going to do is we're just going to pretend that is way up here somewhere, and we can't really access it easily, but we want to see what it is. So, yes, we could do alert name, and when I go over here, it'll tell me what it is. But that's annoying. And if you happened to be in a loop, we'll talk about loops later. This could execute for 100 1000 generations. It will just keep alerting you just over and over and over and over and over. Your browser might even crash from it. Who knows? That's not a good way to live your life. A better way to live your life as Let's go in here and let's say, consul dot Log. And then we could just put anything we want in here. So let's say name and then a comma and let's put the name variable in year so that's actually put name Colon and so you can see this is a string and this is a variable. Let's go ahead and refresh your page here, and I'm gonna have to make that a little smaller. Thank you. So we can see name Caleb Tallinn, and it executes online. 29 of the file called 60 Underscore console underscore log dot html And if I click it, it'll tell me exactly where this is being executed. This is a great way to debug your code. In fact, this is actually just a really good way of sort of figuring out what's going on in code. In general, let's go ahead and type profession in here and again. I just added a comma and we can see in here. It says. My name is Caleb Tallinn and teacher and Web developer is my profession so moving forward? We're probably going to use console log a lot more often than we're going to use. Alert Alert is just a little obnoxious, and it sucks sort of having to click into it all the time. And it's like, Hey, here's alert. Okay, here's another alert click. OK, here's another alert click OK, and just it gets a little manana as a little too much, especially as you start writing more and more code. And the bright side about this is when you're writing code that goes on a live website, it's only going to show up in your console. So if I get rid of this council here and I just refresh, nothing happens. Lisa looks like nothing's happening. But if I right click, inspect, go into my counsel, this continues toe happen. And so really only a developers ever going to see this. And so if you're testing something out in production on a live website, you can always use this method. Now there's a couple other ones you can use to so we could do console dot warn warning, stranger danger that went to lower case and I want uppercase Ah, this one goes yellow warning. Stranger danger. And we could also do. Consul, let's make that lower case counsel dot error error, and we'll just pace that over and over again. And because these are all in their new lines, they don't need a semicolon. But let's throw it in there anyways. And now we're going to see a warning, a regular console log and an error. And there it is. We have warning. Stranger danger. My name is Caleb, calling him a teacher, a Web developer, and also error, error, error, error and also the respective lines that they're all taking place online. 28 9 29 and line 30. So that's a better way to live. Your JavaScript life is to use console log. You're not going to use console War Council error too often. Generally, we just use console log. Now, if you come from another programming language, this is very similar to the print function. So if you use Python, for example, this is like print. If you come from a huge P background, it's like saying echo something and the Javascript way is simply rejected. It did. Ah, consul dot log. So again moving forward, we are going to be using console log a lot more, so you're gonna want to make sure you know how to open up that Consul in your page again. That's his right click. Inspect well. Generally open up your elements first, and you'll just have to click. Consul. Sometimes you have to go in here and click Consul, depending on how big your screen is. Ah, but there's always a consul tab in there, and you can always just open that up and see what the code is doing if it's giving you any warnings, logs or errors. 8. Selecting HTML Elements: Hello and welcome back in this lesson. We are going to get into some of the actual reason why we're learning JavaScript and that's to modify HTML elements. And so the first thing we want to do is we want to create a script tag. We always need the script to be just above the body. Oh, by the way, the reason that it's above the body and not in her head. Well, we used to put javascript in the head, but now we put javascript at the bottom of her page so that all the extra HD milk unload. First we put it at the bottom of the page so that, for example, if we have and h one in here hello world and we just refresh your page, we see hello world. And basically, if we're going to be using any elements and JavaScript, this needs to exist first. The HTML needs to be there before the JavaScript is loaded. And in some cases, if you put javascript above this, the javascript will load. It will then try to look for an H one called Hello World or has a hello world text in it and it won't find it because it hasn't been loaded. And, yes, one line can make a difference. So in most programming languages, generally a program runs from the top to the bottom. JavaScript is no different. It runs from the top to the bottom. And so we're gonna put hello World in here. Ah, and let's give this an I d. So this is just some basic HTML and I have an HTML course if you need a quick little HTML refresher called the ultimate HTML developer. And so let's just give this an I d of test. Now. When we save and refresh us, this is not going to do anything. It's not going to do a single thing for us. And so what we need to do is we need to learn how to actually select this element and then be able to modify it a little bit. And so JavaScript is largely known for working with HTML and X html markup basically anything that has tags like this. JavaScript is pretty good at working with, almost like it was designed to work that way. So there are many different ways to select an HTML elements or a group of elements or like all the H ones on a page. But we're not going to do that. We're just going to stick with something basic called get element by I D. And so it looks like this. That's Ah, move that up. Documents dot get element by i d. And then we just put the idea in here, and so this i d matches test, and that's up there. And if we save us again, we're not gonna see anything happens. Doesn't matter how many times you refresh all it's doing is grabbing this element note. So this is called a node. We need to actually store this in a variable. So let's go ahead and put this in a variable called test. And again, if we refresh your page, nothing is gonna happen. But what happens if we go into our consulate type test? Oh, look at that, says H. One with an idea of tests. And it's actually selecting it for us. Look at that. So moved down. Nothing move up, and it has selected it for us. Now we can do things. So if we had dot we can see all sorts of different things in here and this is where JavaScript gets to be. A very, very big world. There are so many things actually, so far we are looking at event listeners, more event listeners, more event listeners, more event listeners. And it just keeps going and going and going. We can change this style. We can change the title tag. If we wanted to animate it, we could give it a class name or remove a class name. We could do all sorts of things in here. But let's go ahead and figure out what the Texas and this is just dot inner text and that's just going to give us the tax. We can also do this with HTML. We do dot inner HTML and so we can see that this now says hello world, knowing that we can now go in here and say test dot inter html and this is if we want to write HTML so we could say, uh, do an underlying Although that's deprecating. Let's do an underlying take anyway since two how low slash you world and let's go ahead and save us and see what happens. Damn! Look at that. It underlined it for us. But If we go and actually view the page source, there's no underline. That's all. JavaScript. So what Javascript did was said, Hey, grab that node. Grab this H one element, this one right here and change the Inter html. Now what we could do is we could store the old stuff, too, so we could say the Inter html is going to be high. Welcome to JavaScript floor beginners, but let's go ahead and store the old stuff. Let's do of our old text. Let's make that camel case is equal to test dot inter html, and that's just going to grab that inter HTML and store it in a variable and will be able to access it through a console. So let's go ahead and save this. Hi, Welcome to JavaScript for beginners. And if we try to access this very bowling here called old text, we should just be able to write. Let's make this bigger. Well, l d ah, hello. There it is. That's the old stuff. We stored the old stuff in a variable before we changed it. And now we can actually change it back as well, because we still have access to test as a node. Let's go ahead and change the inner text to the old text. And so now we're using variables pretty efficiently at this point. And at the same time, we're also grabbing this entire HTML elements this node and we're saying, Hey, yeah, I understand that you wanted to say hello, world, but, hey, when the page loads and against the JavaScript actually work some magic and change it for us, that's what Javascript did for us. Now again, there are a lot of different things we can do on a HTML node, so we could type in test hit dot and then we could literally just scroll through this for days and days and days and days and days. And you can see this list just goes on and on and on and on him. And so JavaScript is a really big world in all. Honestly, we're not going to learn about every single thing in here because we are going to be here for a very, very long time. My teaching methodology is to teach you how to learn efficiently so that if down the road you're working at a company and they're using something called scroll to Well, you know how to access scroll to and you know how to figure out what that is. Even if we don't learn it in this course now, we're going to learn a lot in this course. But there's just no possible way we can learn every single thing. So what I would like you to do as, ah, little test a little, a little bit of hands on experience creating new html file and just create any tag It doesnt not have to be in a church. One give it a ni de of something. Doesn't really matter what that ideas as long as it matches this value here. Not this one. This is the name of our variable. But this one right here and this one here those do need to match. So create that element and then select the node with get element by I d Remember, we used documents dot get elements by idea. We'll talk more about what that dot means down the road when we get into more advanced javascript and then just change the inner html, maybe give it underlined, maybe italicize it, maybe make it bold. You do anything you like what you write any HTML you want in there as long as you use inter html. And if you're ever just going to change the inter tax, you could always just do inner text. And then your browser doesn't have to parse and render a bunch of JavaScript or not JavaScript html. It could just do regular text, which is actually a lot more efficient. Go ahead, Give that a shot. If you get stuck, leave a question down below and I am happy to help you. Otherwise, let's head on over to the next lesson. 9. A Way To Share Code: Okay, let's talk about a way for you to share your code. That's relatively simple. So if you don't use get if you don't know I get or get Hub is I'm not gonna force that on you right now. It's It's good to know, but right now, if you don't know that, just know that there's a better way to share html CSS and JavaScript, and that is in the form of code pen. So if you go to code pen dot io and you can click of button, this has just start coating. And really, all this is going to do for us is create three sections where we have HTML, CSS and JavaScript, and we can literally right any HTML CSS and JavaScript in your that we want. And then we can save all of this code, and then we can share it with someone else so that they can see the code as well. So let's go ahead, and I'm gonna put each one in here and say Hi, my name is Caleb, and what I'm actually going to do is I'm going to javascript this a bit, but I D Span is equal to name so html doesn't look any different. Ah, the CSS. Let's change the span. Let's change that span to have a text decoration of underlying And in the JavaScript let's go ahead and select name as an I d and change it. We're gonna create variable. We're gonna call it Name is equal to document dot Get, Actually, let's change his view. I don't really like this view. Let's do, Yeah, this one's a little better here, and we can also make that a little better, but we don't need to see the C s s anymore. Okay, that looks a little better. Yeah. There we go. Okay. Document. Don't get element by i d. It's camel case. So every word that's not the first word has a capital letter. We want to get name that matches this idea in here name dot Inner text is equal to and let's say this has been hijacked by my cat named Zephyr. And let's go ahead and give this a safe. And Ono is asking me to log in. You can totally log in creating count. It's completely free. Okay, so I just logged in, and here we go. We just want to change the text so we save it and you can see in my your L says code pen dot io slash Caleb Holley and slash pen and then some hash, and you can actually just copy and paste the entire code to someone else. So if I open this up in a new tab, it's going to save all my code in here. That's pretty cool. And so that's a great way to share your code. You can also change it. So name changed by my cat. And when a refreshing here, it also changed the name There, there it is. Now, if it in any point in time you're working with Consul Law, you can also just open up that consul in here. And you could conta log really anything you want so we could do con so new console dot log test, and it shows up in their cool so you can collect save at any point in time. You can even take someone's code and fork it, which means basically, you're going to create a copy in your account of their code so it doesn't change their code it all, but it gets saved in your account and you can like it and you do all sorts of things. You change your view, but most of all you can take that you are l. And you can copy and paste. It's two friends. You can ask a question with a girl with your sample code in here like a Caleb. Why doesn't this work? And you could put all your code in there. That's super great way of sharing code and asking for feedback and asking for help. And lastly, when you are creating a project, if you want to, you can always use code pen and just share the final screen. You could take a screenshot of the final screen and share the code pen you earl in your skill share project. Of course, if you don't want to use code pen, if you don't want to create an account, you don't have to. You can continue to use HTML files and JavaScript files and take screenshots. That's totally okay to just again. Don't forget, you can always share your project with the rest of the group and most importantly, me. I will take a look at your code and your final product, and you know If you want any feedback, I can also give you feedback. But you have to make that project on skill share first and moving forward. It's definitely a good idea to put any of the code that you're writing in here. Ah, in a skill share project so that I can actually give you feedback on it. I'm not going to use code pen too much throughout the rest of this course. I just thought this would be a great way to show you how you can share your code in a nice and clean way. 10. JavaScript Mini Project #1: All right, let's take a look at our first mini project. It's time to start putting some of the things we've been learning to practice because what better way to get hands on experience than to actually experience it? So we've learned quite a bit so far, and we're going to use just a few of the pieces that we have learned. And what we want to do is we want to in this mini project, concoct innate a string and variable together. And then I want you to output that string to the page of that final variable. I want you to output that to the page by selecting an element and changing the inner HTML. So let's ah, let's quickly write that out. Number one. Create a script. You can catch a string and a variable together Number two, using dot inter html and get element by I d. Change the inner html of an element to be what your variable is. So that's really it. It doesn't seem like a lot at first, but you were going to do this over and over and over and over again in your Web development career. And so this is really, really good practice right off the cuff. Now, if you want to see the solution, just keep watching this video and I'll show you exactly how I do it. Otherwise, if you want to give it a shot, now is the time to pause the video and try doing this on your own, which I strongly urge you to do. Definitely try to do this on your own first. But you know what? If you don't feel confidence in doing all that just yet Hey, that's OK. You can watch my solution, and then you can give it a shot after, if you like. So I'm going to create an H one in here. Just some large text, and I'm going to say my favorite cat is and then in here, I'm gonna put a span of cat name, has an idea of cat name, and it's gonna start off with the name Zephyr. And when I refresh my page in here, you can see my favorite cat is effort. Now, what I want to do is I want to exchange his effort for something else. Now I'm going to take a slightly more complicated route here, and I have to start with my script, right? So I'm gonna start with an opening and closing script tag, and I need to select cat name. So variable cat name is equal to documents dot Get element by I. D. Cat name. And if I save and refresh, you'll see. Hey, nothing's happened. That's expected. All we did was put a note in to a variable. And if we do this, if we type in cat name, you can actually see that it's being selected years. So let's hinges. Cat name and it's just selecting Zephyr. That's it. Now the goal is to basically take a string and can Katyn eight to that string. So let's go ahead and actually do is a little more complicated method. And let's call this variable called Zephyr, and we're going to get the cat name dot inner text. And if we do consul dot log is ever and refresh our page here it says effort just like that . Right in there. It's a little squishy, but hey, that's OK because this is just for debugging anyways, So we have his effort in there, and that's the current text. That's the current inner text. But for this mini project we want to concoct. Need a string and a variable. So we have a very bullying here. So let's can Cat named the string to it. So let's actually change us. Let's overwrite it. Let's do Zephyr is equal to Zephyr and let's cum cabinet a string to it. So it's going to say my favorite cat is Zephyr is equal to Zephyr, whatever that currently is. So it just happens to be this text in here and Henry now this sentence is not going to make sense, cause I'm plural. Izing it. But that's OK. We don't have to make it make sense right now. We just need to make this work. And so let's go ahead and type cat name on the dot inner text or inner HTML is equal to suffer, and so this gets a little messy. But hey, let's give us refreshing says my favorite cat is ever and Henry now, actually, a better way of doing this is not necessarily overriding this. That was just an example. We would probably want to new variable for this so called cats, and we would change us two cats as well. So we're gonna create a new variable called whatever's efforts has ever his name in there Plus and Henry. So if we work through this backwards, we have cats is equal to Zephyr. What does ever zephyrs equal to the cat named inner text? Well, that's using a variable called cat name. We know that that's this element up in here and getting that inter text. So we know Zephyr is basically this value right here. That's pretty much what it is. Actually, that is exactly what it is. And so it's kind of like saying Zephyr, Katyn, eight and Henry. And when you put those together, it looks like this. And so that's what in her H e mails going to be, your inner HTML is now going to be a Zephyr and Henry. And so that's sort of how it works. And if you ever need to replace variables with hard coated like strings or other values, that's totally okay. Honestly, whatever helps you learn this in your own way, is okay, So let's go ahead and save us. Refresh. And we can see that cat name is still in here Cat name and its likes all of it cool and that is how we replace it. Now. If we wanted to double check this, we could always view page source. And in our view, page sources says, my favorite cat is Zephyr. However, when you actually view it with JavaScript enabled, it says, my favorite cat is ever and Henry. Okay, so that's how we would go about doing that. Don't forget, you can always create a code pen, and you can share it on skill share in your project. Or you can just basically take all of your code. You can copy and paste it in there. You could take a screenshot of how this works. You can sort of do, ah, visual studio on the left and then the final output on the right. You can take a big screen shot of this and just say that in your project, and I can take a look at it and give you some feedback and hate. If you get stuck on this, don't forget. You can always leave questions, comments and concerns down below, and I will get to them as soon as I possibly can 11. String Manipulation: Hey there. I hope you enjoyed that many project. We're gonna do a few more of those down the road and, ah, we're sort of going to learn a bunch of stuff in between them so that we can, you know, learn a little practice a little, learn a little practice a little. I think that's a really good way of learning JavaScript. And so in this video, we're going to learn about string manipulation, and it sounds fancy, but really it's not. It is actually super super common in JavaScript to so string manipulation is basically we take a variable that's like a sentence or maybe a number, and we we manipulated. We change it. We force it to be something different, and there are several different ways of doing us. But in this video, we're just going to go over a few of them. So we're going to go over to lower case to upper case, split joined slice and sub string. There are way more of these, but I think this is a really, really good way. Do you sort of just get used to how we can manipulate some data? So first and foremost, let's create an H one with an i d of sentence and let's go ahead and put some Lauren Ipsum in here. And so when I say this, it's just gonna look pretty boring. And that's okay. We're not trying to make this look nice right now. We're simply trying to do some javascript. JavaScript does not necessarily mean things Look nice. CSS means things look nice. JavaScript means things are functional. And so let's go ahead and create a script in here. And we want to grab all of this text in here. All this Laura MIPs. Um, so we could do you know of our sentences equal to and then we could pace are lower MIPs, um in there. Or we could do it the javascript way and say documents does get element element by i d sentence. Let's call this sentence node, and I'm enough to make that smaller. Hopefully, that's still OK to see. And then let's do of our sentences. Eagle to sentence node dot inner text and let's go ahead. Just console log this council dot log The sentence is going to be sentence. And when we refresh and right click, inspect every click, inspect and go to our council. Ah, there it is. We see all this gross text in here, and this one might actually be better if we change the view to Let's change a to bottom. And so we have a sentence in here and it's a a bunch of Lauren Ipsum stuff so we can go ahead, get rid of that console log We know that is working and that our sentence is in fact, a string. How do we know that it's a string? Well, we could always do type of sentence tells us it's a string that's pretty cool. We can also just type sentence sentence and because it has a quotations around it, you know, it's a string, so let's just clear that out And let's put sentence back in there and you can see that it's sort of highlighting itself there. But it's not actually doing anything yet. So cool. We have our sentence text now. What if you wanted to make this all uppercase? Let's do var Upper sentence is equal to send in start to upper case. That's literally all we have to do, and we can actually test this out in our consul, too so we could do send in stud to upper, and you can see that it's auto feeling for me and then opening and closing bracket. And what this says is this is a function. We'll learn more about functions down the road. But basically this is going to actually take our sentence, the Lauren Ipsum text, and it's going to do something with it, and that's what this means. These opening and closing brackets or these parentheses means it's going to do something with it. Let's go ahead and hit, enter and look at that. It's all uppercase now, all of it. So we know that works, and we can simply keep that in there. We can also do of our lower sentence and let's go ahead and do sentence dot to lower case. And by the way, we're creating new variables here based on whatever this string is this variable. So we're not overriding sentence over and over again. We're taking the same sentence, which is this value in here, the Laure MIPs Um and we're saying hey, make it upper case. That's not gonna work either. Hey, make it uppercase. And then also hey, make it lower case And so basically, we're just copying the data over and over again without actually overriding it. So if you ever want to see this actually work, we could go ahead. Let's just copy that. Grab that whole thing Copy Paste and let's type lower sentence. Now we can see that it's all lower case. The first l should be upper case. It's not. It's lower. Case are right here. Should be upper case. It's not. It's lower case. And so that worked. What if we just wanted to get, like, the 1st 10 characters of a sentence? For whatever reason, we just want the 1st 10 and this is actually strangely useful. You wouldn't think you would use something like Just get the 1st 10 or the 1st 4 but yeah, we use it quite a bit in JavaScript. So let's go ahead and create a sub string. So we're gonna call this 1st 10 Chars is equal to that stands for characters sentence dot sub string, and this is going to take two optional parameters here, really out of the first ones. Not really option. So let's just do 10 and let's let's not do this in here. Let's go ahead and do it right in here where we can experiment so we can actually see what is returning here, says M. Dolar. Sit. Omit. So did todo m dollars it, um, it So what this is doing is saying, Hey, start at character 10 and grab everything else. So we've got 123456789 10. So it took those 1st 10 characters and completely disregarded them, and it started here M dolar sit omit, probably butchering that Latin, by the way. And we can actually see that. That's what it returns here. M dolar Sit in it. Cool. And so that's how we use sub string. This is pretty cool. I didn't didn't actually know that the council would do this, but it gives me from an optional length. How many characters do we want so we can start at the 10th character and let's say we just want to the next 10 characters. There's 10 11 12 13 14 15 16 17. We could do the next. That's a 30. There we go. So we have between character 11 and 30 showing up in here. And so that's what sub string does. And that's actually really useful. Because sometimes, you know, maybe a user inputs that you, Earl, and they don't put www in front of it. And maybe your website requires that or http in order to turn it into a proper link. This is where we do something like that. So let's go ahead. This is gonna be 1st 10 characters. Let's do zero and 10 and let's do zero and 10 in here cause this is basically a live preview. Zero and 10. We see Laura Ipsen lets you 11 Lauren Ipsum 1st 10 And because that variable says 1st 10 characters, let's do first 11 characters. Okay, These next two are going to introduce a new data type. So we know about strings and we know about numbers. We haven't really used numbers too much, but we know about them now. What happens if we wanted to get all the individual words in here? Well, in javascript, we have this method called Split, and basically we can tell it to split anything. So split anything in here and we can tell what to split on. So we say split on every sentence. What this is going to do is take every single, every single space in here like what we have here. So it's just gonna match whatever is in there, and it's going to turn this into a list is going to turn it into an array. So let's go ahead and let's do a live example. Don't do sentence dot split and let's split it on every single space. And let's do words is equal to and look at that. We have all the different words in your and if I make this bigger, we have all the different words and we can actually open and close this and it's going to show us all the words. So we have a list now. Now these air called a raise and JavaScript this call and a ray let me type that out. It's called an array Hurry array, And so really, all in array is is a giant list of numbers or strings or objects, which we haven't learned about, or all sorts of other different types of data and data types that we haven't learned about yet. And it can hold all of them in a list and it will maintain that order. So we can see Florham Ipsum Dolar said I met so on and so on and so on. So now we can go in here and we can say Vier all words is equal to sentence dot split and split it on every single space. And let's go ahead and do consul dot log all words. I didn't give this a refresh and this console log for me and this gave me all the words. Now, where is this useful? All right now, in the US, this is not very useful. But down the road, this could be very, very useful. We can use a thing called a four loop and loop through every single one and perform in action on them. We're not going to get into that just yet because that's a little more complicated than what we generally like to do at the very beginning of JavaScript. I just feel like that might overwhelm some people. It certainly overwhelmed me when I was learning JavaScript way back in the day. And so I would like to keep this, you know, nice and simple. Learn step by step, but okay, so we have all these different words in here and Let's say, Let's say for whatever reason, we wanted to peace those all back together. But we didn't want a piece him back together using a simple space. We don't want the sentence to look like a normal sentence anymore. Maybe we wanted to put parentheses around every single word. Well, we could do that. We could do Let's do far. We're gonna bracket the words here and we're going to join all of these together. So we're going to take all words not sentence. We want to take this one because this is the list. All words don't join and then it takes a string. What do we want to join it by? Well, if we do this and that's actually just save this and let's see what bracket words looks a look of that bracket words has all the different brackets around it, to the exception of the 1st 1 in the last one. Well, guess what? We can do some string and cat nation here so we can add a bracket there and we can do a bracket here and refreshing. Let's do you bracket words and ha ha! Look at that. All of our words have brackets around him now. And just for fun. What if we did sentence node dot in her text is equal to bracket words. Hey, look at that. So now we're actually doing something with our page. That's pretty cool. So I'm going to remove that because I don't want to change that yet. And there's one more that I want to talk about. And so, really, when we're looking at this and this, we have split and join. So Split is going to take a sentence and split it based on whatever you want to split it by . In this case, we used just a regular space, and then we took whatever that list of words was and we said, actually join them all together with something else. And so this looks a little weird. We don't actually need to use opening closing parentheses like this. We could if we wanted to use a bunch of spaces, and that's go ahead, refresh and type bracket words and look at that so we could do that as well. And so join and split usually work in tandem together. And there's one more in here. What if let's go ahead, actually refresh us. And let's do all words. We have this list of words in here. What if we just wanted the 1st 3 words? So let's go ahead and type all words dot slice and it's going to say this is a function. That's what the F means. It's a function. Where should it start and where should it end? Let's start at zero, because when it comes to computers, we start counting at zero. As humans, we start counting. 12345 computers. Don't computers go? 012345? Because to a computer, zero is a number to a human. Zero means nothing. There's literally nothing there. So number zero and let's go to number three. And that's going to give us the 1st 3 words. Laura, um, Epsom Dolar So? And then we can go ahead in our code, and we can say far, first three words is equal to sentence. No, that's not right. Already fooled myself. All words dot slice and just take the 1st 3 Just just grab a slice of it. So we just want to slice this. We say, Hey, if this was a giant pie, we want three pieces. Alternatively, we could also dio words dot slice. And what happens if we just said Start at this one here? So six went one too many. I guess on that one, because I didn't count them, Ahmed says. All words dot slice start at number five and go to the very end so you can see here. Ah, there's 20 items in this list. Now again, we'll talk more about lists down the road. They're super super useful, actually. Not super complicated, either, but it's going to start at number five, so it's going to start on 012345 And that's the one we told it to start on. Start on Consecutive tour probably should have used words that I can actually read. Uh, yeah, there is. It starts on consecutive tour, and now what we can do is we can say, Hey, we actually just want every word between the fifth word and the 10th word. We want all of them and that we want to put it into a sentence. So now we can actually do something kind of neat with this. So let's go ahead. Let's grab far middle words is equal to all words dot slice and we want to grab number five to number 10 and then we can do of our I don't call it makes sentence middle words dot join and let's join them with a just a regular space. And then let's go ahead and do sentence. Node dot inner text is equal to make sentence, and that's just give this a refresh and watch how it's going to take, probably from here to here ish I'm guessing, cause I'm not counting the words and it's going to replace this text with those middle ones . Tutta Just like that. It just replaced them for us and again one last time. If we go in view our page source Look at that. We have all of it in here. But hey, Javascript said no. Grab the sentence node, grab that inter text so that we can work with us as a variable. And so we've got a copy of sentence here. A copy of sentence here, a copy of sentence here, here and then with these, we can do different things if we wanted to, and like at the end where basically we took that sentence, we took this sentence. We took all over those words and we broke it apart based on spacing. And then we turned all of those words into bracketed words. So there were no more spaces, just brackets all over the place. And that's where where leave leaves off because we didn't do anything with that. Then we said, Actually grab the 1st 3 words and we said, Okay, well, there's a list of words in here broken apart by the space. That's what split is here. And we said, Just grab the 1st 3 So we grabbed Laura Ipsum Dolar, and that was the 1st 3 words. And then we said, Our we're not actually going to do anything with that. Let's take the middle words. Let's take all the words again. That's all of these Split on the space, Grab number five. So 012345 and then grab up until the 10th word. So 12 three or 89 and then done. And then we said, Hey, you know what grabbed those 10 words and put it back into a sentence so we don't want a list of things. We just want a regular sentence and Then we said I change that text, Change it to be whatever those five words are. And there it is. We have those five words just like that. So this is a base introduction into string manipulation. Now, at this point in time, you're probably thinking, Hey, that's not useful at all. But in the coming lessons, we're going to make use of quite a bit of this. So it's really, really good to know that these exist, even if you don't use them every single day is good to know that they exist. Now, me as a developer has a full stack developer that includes the front end. I use these almost every single day. But, hey, if that sounds like a lot of pressure, you're still learning. JavaScript. Just remember, you are still learning. You are a student of JavaScript. You don't need to be the very best. You don't need to know all of this off the top. Your head can always google it Pro tip. All of his senior developers, We girl things non stop all day. So don't feel bad if you ever have to google it and then lastly, just don't feel like you have to remember all of it because, frankly, you don't. You just need to know that these types of functions exist. So it's like if you wanted to take all of your words and make him uppercase, you don't really need to remember that it's dot to upper case. You just need to remember how to access it. And so, for example, we could do sentence dot and I just type you peopie for uppercase and look at that. It gives me to upper case, and all I have to do is add parentheses around it, and it does it for me. And so it's like a little reminder all the time. It's always there, and you don't have to feel the pressure of knowing all of it right away. Now, I would really, really appreciate if you could give this a shot. Just go through each one of these, write it out by hand. I know it can suck writing things out by hand, but if you write it out by hand, you're going to create muscle memory. And one day when your brain gets stumped and you can't really remember all of it, you know what your fingers were just gonna start typing away and they know what they're doing. You're thinking about something else and your fingers air just doing the work, and it does actually work like that. So go ahead, give that a shot, and then we're gonna head on over the next lesson whenever you're ready and let's learn about accepting some user input and making use of that. 12. Accepting User Input: Hello, Welcome back. Hopefully I didn't lose you on the string manipulation video. I know it was a little long. There's a lot to learn in there, but it's also very, very important stuff to know in this video we're going to learn how to accept user inputs in the form of a prompt. And so when we open a page, it can ask for your name or an age or something like that, and then you can actually work with that. And then you can turn it into upper case or lower case or anything like that. So I just have an HTML file here, and I'm going to create a new script. And let's move this sort of in the center of the screen here and let's create a new script and we're going to use a brand new function. It looks a lot like alert, but it's not alert. It's called Prompt, and this is just going to prompt someone for some input so we could say prompt and what is your name? And when I refresh this says, What is your name? I'll type in Caleb. Nothing happens. That's because all it did was asked for my name. I didn't store it in a variable. I didn't force the HTML to change. We didn't update the document object model. We didn't do anything. We just said, What is your name? And that's it. So while that's a cool function, currently it's not useful. So let's go ahead and make it useful. So let's save our name is equal to prompt what is your name? And then let's go ahead and console log that consul dot log your name is and name refresh. Put Caleb once more. Ha. Your name is Caleb just like that. And so that's how you ask someone for really any sort of data. Now, the big thing to take note of here is that whenever you use prompt, the input always comes back as a string. So if you're trying to add numbers together, so if you have to promise, like enter number one and then enter number two and then maybe enter number three, you might not get the results you're looking for. And as an example, let's go ahead and type name and we can see that it has quotations around it, so we know it's a string, but we can always also type type of name, and that tells me it's a string. So let's go ahead and get rid of this and let's inject this change. These underscores here from custom input to whatever the value was that someone put in there. So when I say what is your name? And I type in Caleb, these underscores. That should change to Caleb. So first things first. We need to grab this note This h three. Let's go ahead, create a new variable. It's called H three note. I guess documents dot get Elham meant by i d. And we're going to use custom input again. That just matches up here. And then we could say h three don't know. Dutch inner text is equal to whatever the name is. Let's go ahead and refresh and say, What is your name? Well, my name is going to be Caleb. Ah, look at that. Your name was or is Caleb. It's change what it is because I am not past tense. I am present tense. Now. What if we wanted to do some sort of string manipulation on this? What if I wanted to make sure l the input all of it is always lower case. Well, we could do two things if we know that is always, always, always, always, always going to be lower case. We could change it right away because a name is equal to name dot to lower case. And whenever we reference name down the road, such as in here, it will always be lower case. So let's give this an example. Caleb in all caps and I hit OK and it shows up in lower case. That's what we're expecting now. If you don't want this to always be lower case and you want to preserve whatever the user inputs and you just wanted to be lower case, just once you could do dot to lower case here, and then we could all stew like a console log, and we can log the original name. And so what we're doing is saying, Hey, what is your name store that invariable. Then we grab the age three note. That's this custom input and we say, Hey, let's grab that inter text and change it. Let's change it to whatever the users inputted. But let's actually make sure that it's always lower case and then Let's Consul logged the name. Now, at this point time, do you think the name is all going to be lower case when we do a console log? Will the name be entirely lower case? Because we said it's a lower case here or do you think it's going to be not lower case because we only changed it this one time? Now, that's actually good question, because different programming languages operate differently in this respect. So let's let's experiment with this. Let's go ahead and put Caleb in in all caps and we can see all lower case. But when we console log, it's all in caps. So this did not actually change it at all. So what we did here named out to lower case It didn't actually change the name value. It just changed it this one time. It just changed the value of this one time, but it didn't actually change the entire name forever. And so this is where we get into a lot more variable manipulation, string manipulation, things like that. Because now we can preserve the user input. That's the name. And we can say, actually, you know, just in this one case, make it lower case, but in every other case, keep it the same because we might want to do something with it. So this is a very simple way of accepting user input. And in the wild, in a live website you don't see this used, you see text fields being used, you see text areas drop down, things like that, and we're going to get to all of that. But we need to learn how to manage user input to begin with, and this is a really good stepping stone for that. So we've learned how to accept someone's inputs, save it in a variable, grab a node and then change the value of that note to be whatever the prompt was, whatever the user input was. And this sort of prepares us for a thing called event listeners, event listeners are how we can basically say, Hey, any time someone types in a text area or changes a select field, weaken, do something based off of that. And it's at this point that our code actually becomes quite dynamic because up until now we haven't been able to accept custom input. We've had alerts that tell us things but we've never actually been able to inject any sort of text or variable information onto the page. And now we can. And so I think, for the next couple of videos were going toe, learn how to sort of work with this a little bit, and that's going to really prepare us for the more future JavaScript. When we deal with the event listeners and more user input and how to manage all of that. And just as a refresher, let's go ahead and let's say name and let's do alert name. What is your name? My name is Kate Lubbe, and they're gonna click. OK, it's just going to alert. My name is Caleb. My name is Galeb, just like that. And that's all there is to prompt and alert. And now you're a prompt and alert pro to be totally honest. Okay, so I just undid that Now what happens if you want some default? Texan here, let's say you're tinkering around and you know you're experimenting. You're learning your playing with javascript as you should be, but every time you refresh the page, you have to type in the name. Well, eventually you're gonna start typing and stuff like this that's not super useful. Let's give it a default. Let's go ahead and the second parameter of prompt is going to be. I'm just putting my name. What is your name? Caleb? And when I refresh, it's automatically filled in for me. And another thing to note in here is when we refresh, Let's get rid of this and let's click OK, and let's go in here and say What is name? Name is an empty string. There's nothing in there now. What happens if hit Cancel instead of leaving it empty while it says My name is null, So let's go ahead and see what name is. Name is a string called No or so it seems. Let's double check that you type of name, and it is a string, and so basically there's nothing in here. In the next video, we're going to learn about these things, called comparison operators to make sure that our input is actually what we're expecting and if it's not, do something else, and this is how we give computers commands based on user input. So let's jump over the next video where we learn about comparison operators, and this is really where everything we've learned so far turns into riel programming 13. Introduction To Comparison Operators: Okay, let's take a look at comparison operators. Operators are the little pieces of logic in a program that tell us to do a certain thing or tell us not to do a certain thing. Basically, it's how we taken action based on a variable value. This is where variables really become super importance, not just about alerting things or console logging, its about giving a program a particular task to do. Or maybe not to dio. And so a comparison operator basically looks like this. Let's go ahead, make some room here. It basically says, If your name is Caleb, do something otherwise or else do something else that's basically all it is. And in fact, in the world of Python, it actually looks a lot like this. Very, very, very similar. JavaScript has a different type of syntax, so the way we make it look, let's go ahead and create a script tag here. And let's take a look at our first if statement. So we're gonna hard code this and then we're going to turn it into a prompt where we can actually accept user input. So let's do far name is equal to Caleb. We're gonna have to make this little smaller here. And then we could say, if parentheses? Because it's doing action, right? If it's going to do an action, you're gonna need some parentheses in there if name equals equals Caleb Opening Curly bracket closing curly bracket just like that. And this is an if statement. So you're saying, Hey, if a variable is equal to whatever you're expecting it to equal to alert, do something and let's go ahead and refresh and it says, Do something now why did you do that? Because you can really see that name is equal to Caleb. And if the name is equal to Caleb now, there's one caveat here is we're using to equal signs. One equal sign means this is the variable. Variable is equal to whatever this value is. That's one equal sign to equal signs. Means hey, is the name Caleb are, which we're checking to make sure that it is actually the right name. So this one is called an assignment operator, and this one is a comparison operator. Now there are several other comparison operators out there, but we're really just going to learn about this 1st 1 For now, to keep it nice and simple. So now let's change this to prompt what is your name? And now I can refresh is going to say What is your name? And if I type in any other name, let's I'm gonna be my cat for a moment. His name is Zephyr. I'll type in Zephyr. Nothing happens. And that's because if we go in here and we type in name, we can see it. Zephyr. And we're saying, Hey, if the name is equal to Caleb, do something, It's not Currently it's saying its effort, But if we refresh and I type in Caleb with a capital case so it matches this value right there, he says, do something cool. So now we actually have something to work with. Here we can say, Hey, ask the user for some information, and if that information matches what we're expecting, Weaken, do something else. So now let's make this a little fun or let's make an H one here I d is equal to just call Welcome. And let's turn this into eight nodes of our welcome node is equal to documents dot Get element by idea it auto fills for me That's nice name. Make it smaller. So it fits on one line. And now we have this in here, and we can say, Hey, if the name is Caleb, Welcome note dot Inner text is equal to welcome to your website, Caleb. And before we give this a shot Ah, I just noticed that we have document I get l element by i d. It's not the name. Welcome. In my fit of excitement, I got a little too ahead of myself there and, you know, fun Fact that happens to all of us. So now I'm gonna hit, refresh and say, What is your name? I'm going to say my name is Caleb. And now it says, Welcome to your website, Caleb. And if I say any other name, if I said my name is no, not Zephyr. Let's be Batman. My name is Babin does nothing. Batman is not supposed to be here. And Snow, we have some logic and something happening based on the fact that my name is Caleb. Now, what if we needed this to be a little more accepting? Because right now you need a capital K. If I type in Caleb with a Capital R, A lower case K, nothing happens. Okay, well, now we need to actually change this. We need to say if name is equal to Caleb with a lower case K. Well, that's not gonna change for that. And that And that and that and that. Those are all the different variations and mix and matching them, Of course. So what we can do is we can say, if named to lower case. So we're gonna take whatever the name is turned into lower case and then compare the lower case value. Let's go ahead and do this. Lets you all uppercase Caleb. And then let's say okay and says, Welcome to your website, Caleb. And that's because we said, Hey, if the name all capital letters, Caleb, and then we force it to be lower. Case is equal to lower case Caleb. And now it's going to match on every single one. We could say K a l O b. Damn. It still works. And this is where string manipulation gets very, very useful. So now at this point, we need to take a look at the actual if statement itself. What is making this trigger while it's not just the fact that it does match Caleb. Yes. It's looking for a match with the logic behind it is saying, Is this statement true? Does name dot to lower case equal? Caleb? Well, if someone were to type in Caleb like this, would that match? No, those air different to a computer. But we said to lower case, which is the same as saying, Is Caleb equal to Caleb? And if yes, this would be true, Your computer then says Yep. This is true. Logically. Beep, beep, beep, beep. Yep, This is true. Make it do something. And so your if statements should always return true. And then what happens if we don't return? True, how do we handle something that is the opposite of true? How do we handle something that's false, or how do we handle multiple scenarios? Well, those are things we're going to get into in just a little bit for now, I think we should just practice a simple comparison operator just to sort of get the hang of it, because this is where we can have a lot of fun with it. We can do anything with our website at this point. based on just if statements. And then, lastly, let's take a one more quick look at the syntax here. So we've got if parentheses and then inside of these parentheses, so I could actually delete that if whatever in here is true, so if value one is equal to value to, then you have some curly brackets. You've got opening curly bracket and in closing curly bracket, do some stuff in here. And if it's not true, if your if statements does not turn out to be true, this does not execute at all. It just skips over your program, says there's nothing there. I'm not going to do anything with that. And that is essentially the core of every single programming language on the planet. If you want to get into artificial intelligence, if you want to get into machine learning, guess what most of it is a ton of. If statements, it's if a data points matches a certain value. If a set of data matches exactly the outcome that you're expecting. If it is not, do something else that's really all it is. Even if you look at you know, more fantasy movies like I robot, you know the machine, The sunny was his name. Sonny will look around and he will analyze the entire picture. And you will say If there is a person there, say hello. If there is no person there, keep walking. So that's an if else statement. And at the end of the day in programming, everything boils down to something called a Boolean. It is either true or is false. That's it does not really a whole lot of middle ground there. And so that's all we're doing here is we're saying, Hey, is this true? A of this statement? If this if statement is true, do something. And if it's not, maybe do something else. But we'll learn about that in a future lesson. So what I would like you to do is give this a shot, ask for your name using a prompt, and then check to see if that name matches a value that you're looking for. And if it does match that value, then do something else. Just write an if statement and sort of get used to it. And don't forget, you can experiment. You're not going to break anything. You could always do, like hey, if my name is Nathan. If my name is Zephyr, anything like that, he could also do. I doubted that data instead of to lower case you could do to a bird case. You could do something like that. You do all sorts of things, So don't forget to just tinker around that. Have fun experiment. You're allowed to experiment. And once again, there's no possible way you can break anything on your computer just writing this so you are totally safe to experiments to your heart's content. 14. Handling Opposite Operators: hello and welcome back. In the last lesson, we learned about comparison operators. In this lesson, we are going to learn about handling the opposite of something that is true. So, for instance, if we have a script that asks for my name and it says, Hey, if my name is Caleb, welcome me. What if my name is not Caleb? What if you're asking for a course and it is not JavaScript for beginners? Let's go ahead and do that. Now let's say var that was called input is equal to prompt. What course are you taking? And then we could say with an if statement if input dot to lower case is equal to JavaScript for beginners and that just make sure that it doesn't matter if there's Ah, capital letter or no capital letter and then let's make this smaller curly braces. And then we could say, you know, do something in here. And so we're familiar with this already. In fact, we could actually clean this up to we could say, input lower. Let's just call it that of our input lowers equal to, and we'll just create new variable called in, put lower, and that just matches this one here. But what if the course is not JavaScript for beginners? What if you're taking another course of mine called Javascript essentials? Well, you need to be able to handle that. In fact, what if what if someone types in anything that is not this while you need an else statement ? So if something else do something else and really it boils down to something like this. You can sort of read this like a sentence to let's make some space here. And you could say, you know, if the course is javascript for beginners, do a thing otherwise or else do something else. And in fact, this is interesting, because if we said this, this is python. Mrs. Python sent syntax. And so, by learning javascript syntax here already somewhat familiar with python syntax. So no, your skills and python or your skills and javascript rather are actually paying off because you're learning how to apply logic in other languages. It just looks a little different, but yeah, this is how it works. And so you can actually read this as a sentence if courses javascript for beginners do something. But if it's not, do something else. That's all it is. And so the world of programming is really just made up of, if else statements. It's a bunch of if statements l statements and ah, hybrid of both called and if elsewhere, else f depending on your language. So if this is JavaScript for beginners, let's add add. Ah, welcome message. And if it's not, let's say you're in the wrong course. Well, we need something to do here, So that's a H one. Let's give this a name of text and i d of text and we need to grab a node here. So let's grab this node. Vier text is equal to documents dot get element by i d text. And then, let's say text dot inner html is equal to It's too strong. Welcome. It's that strong to JavaScript for Let's do another strong beginners. And now we're writing some html inside of her JavaScript. And what if it's not? Right? Well, we could do this and just copy that, cause I don't want to write all of it over again. We could just say you're in the wrong course and watch this. What course are you taking? Okay, well, let's say I'm taking another course that I have called javascript Essentials. Yeah, because I'm in the wrong course because we're not in javascript essentials. In fact, the one that I'm in is JavaScript for and that's really messes up Once put it all in capital letters or the last word's gonna be capital letters. JavaScript for beginners. Welcome to JavaScript for beginners. And if we view our source here, we doesn't actually doesn't really look like it's bold, but it is. We've got a strong element there. We've got a strong element here and regular text in here. So there we go. And that is how you do in, if else statement. So basically, you're saying, Hey, if this is true, if we are in fact in JavaScript for beginners, execute this otherwise doesn't really matter what the answer is. We're saying any other answer in the world, execute this line. So go ahead. Give that a shot. You're going to need to know how to do this for our mini project that is coming up. You're definitely going to need to know how to do it if else statement and at this point time, if you get stuck with this, don't forget, you can always leave a question down below. I am always here to help 15. JavaScript Mini Project #2: Welcome to your second mini project. This one has to do with comparison operators. So I hope you had watched the previous two videos in this many project. What I would like you to do is ask the user for a you Earl, and then check to see if that link starts with http. And if it does not start with http, I want you to fix up that link. So fix up the variable and then injects that as a link into the page. And so, for part number one, you're going to want to use prompt for part number two, you're going to want to use sub string. Part number three is you're going to want to use and if maybe if else statement or statements and then part number four, you're going to want to grab an HTML elements node and change the inner HTML toe, have more html inside of it. I'm going to do this project right in front of you as well in the same video, but I think would be best if you could pause the video now and just give it a shot yourself . Get as far as you possibly can and then you know what? If you get stuck, just resume the video and you can watch exactly how I end up doing it. So go ahead, click Pause. Give it a shot and I'll see you in just a couple of minutes when you hit Resume. Okay, So the first step was we needed to ask the user for input. So let's create a script in here where we put our JavaScript and that's a fire. You where l is equal to prompt. Enter a u R l whatever that's going to be. And so we'll just do this piece by piece. Here I'll refresh. Enter, You are out and I could do coding for everybody dot com does nothing as expected. So we just have a girl in a variable, but we haven't actually done anything with it. Let's go ahead and move on to step number two. Let's see if it starts with http or if it does not start with http so we can say if you are own dot sub strings up string 04 so starts at character zero, which is one in computer language. Go up to the fourth character is equal to http then it's good and we can console log that we can say Council don't log the euro is good, Otherwise we need to fix it. So consul dot Warren and so bad you, Earl Bad, Bad. You are ill. Let's go ahead. Give this a shot So I go ahead again. Any type coding for everybo