JavaScript for Beginners: A Hands-On Guide to Mastering the Basics with Projects

1. Course Introduction: Hey, there. Welcome to the scores on JavaScript for Absolute Bgners. And I'm thrilled to guide you through the journey into the world of JavaScript, which is one of the most essential and popular programming languages when it comes to web development. Now, talking about JavaScript, JavaScript is everywhere. It powers dynamic websites, interactive applications, and even backend today. Whether you are new to programming or looking to enhance your skills, this course is designed to provide a bigna friendly hands on learning experience to help you master Javascript from ground up. Who am I? I am facil, a seasoned entrepreneur and an educator who is willing to share the knowledge that I have gained in all my careers with you. So let's start talking about what we will cover. So we will cover the basics of JavaScript first, where we will understand what Jascript is, where it is used, how can you use it and setting up the environment and all. Then we will uncover the fundamentals of JavaScript, where we'll talk about variables, operators, expressions, arrays, objects, and everything. So this is where we will learn about the building blocks of JavaScript. And then we will do hands on projects wherein we will reinforce all the learnings that we have had so far and we'll build a couple of project to understand how things work when you go from learning environment to that of project based environment. By the end of this course, you will have a solid foundation of JavaScript, allowing you to confidently create interactive web applications and web pages and continue your coding journey. Now, this course is perfect for developers of all levels. So whether you are a beginner, who is looking to just explore JavaScript and who is looking to learn it in a very structured step by step manner, and it is also for intermediate and advanced level developer who is looking to get a refresher of some of the basic concepts of JavaScript. Then you can follow this course because we do not make use of slides that much in this course. I love teaching on the ID itself, and I believe software engineers love working on IDEs and doing things what they are learning. So are you ready to take your first step into the world of JavaScript? I am. Let's dive in and let's start coding together, and I shall see you inside the course. 2. JavaScript in Action: So now what we are going to do is we are going to see JavaScript in action. So what I would recommend is open the browser of your choice. I'm here on Google Chrome. You can even make use of Frefox if you wish to. Just right click, head over to inspect. And here you will have an option to open up the console. Okay? You can resize this the way you want. Now, this console is the browser Console, which is in built, and here is where we can execute our JavaScript statements. So, of course, the first statement that we are going to execute over here is console dot log. You can see the Auto suggest, and I'm going to say hello world. Okay. Something like this. Okay, I'll make W caps and over here, I'm going to press Endo. You can see Hello World is being printed onto the Console. Okay? So if you want to print anything to the console, you can make use of this statement console dot log, and it's a part of Ja Script. We can even print more over here. So I can say Console dot Log, and I can say, I love Jascript. Okay, something like this. So this will give me this output, which is I love. Okay. I should have closed it with single code, and you'll see the output. I love JavaScript, okay? So I opened it with single code and tried to close it with double code. That's why the error, okay? But treatment works absolutely fine. I love jar script. Okay? You can even make use of this console as a calculator. So you can say two plus four and you'll see six ST output 16 plus 16. You'll see 32 SE output. So it can be used as a calculator. You can even make use of the console to show alert boxes or pop up boxes. And you must have seen a lot of alert pop up boxes when making use of these web applications. So let me show you how you can trigger that. I'll first clear my browser console using this clear function. Okay? Everything is cleared, or you can even right click and say clear Console. Okay, that should also do the job. Now here, I'm going to bring in a alert box. So I can say alert over here. Okay. And I can say this is a alert box. Okay. Now I need to close this and if I press Enter, you'll see this is a alert box. Now, whatever message you type in or whatever message you add in over here. This is a new alert box. Let me see. Okay Let me make new end caps. Okay. You'll see this come in as. Here in the Pop. So whatever message you're passing in over here is coming in over here. So yeah, that's how you can run some Jascript code into your web browser, and these were some of the Jascript statements that we have. 3. Getting the Software Tools: Hey, there, everyone. So to run JavaScript, we are going to do some setup on our local machine, right? Now, of course, you can run JavaScript by right clicking like this in the browser and heading over to the console and writing JavaScript treatments over here. But this is not ideal if you want to write long, large scripts for production grade web applications. Now, this is where you need a setup on your local machine. So what we are going to do is we are going to make use of an IDE. If you're not aware of this term IDE, it stands for integrated development environment, which gives you the set of tool to write code and execute it. So I'm going to search for Visual Studio code because that is what we are going to make use of. Now, if you have a Visual Studio code installed already onto your system, or if you're aware how to install it, well and good. But I'm going to assume that you don't have it installed onto your system to benefit the students who are not aware of this process. So I'm going to head over to this particular website, code.visualstudio.com. Okay? A little bit of Zoom in. Now, here, the screenshot that you see is how Visual Studio code looks like, okay? And you can see, there is a syntax highlighting you can see. So interface is being highlighted in a different color. Button props is being highlighted in a different color. So these are all the benefits of the IDE, okay? You can see the nice folder structure on the left hand side. There's a terminal below with all the color coding and all of that. It offers a lot of benefits to the developer. So if you scroll down, you can see Visual Studio code supports. As I'm recording this video, it supports so many programming languages, okay? You can even add extensions. Now, what are extensions? Extensions basically extend or extend the ability that Visual Studio code has by default into it. Okay? So if you want to add some support for Python, okay? So more support for Python. So you can add this extension. If you want to add support for GeucPilotO you want to make use of AI while programming, you can add Get up Copilot CC plus plus. You can see there are tons of extensions, and there's an extension marketplace from where you can download and install all of this, and it's free. You can see Git up copilot, a little bit of. So it's all highlighting different features. You can customize the color themes, settings, profiles. There are a lot of stuff, okay? It has really good integration with otion control system and all of that. Okay? So you can take a look at this website and you can browse through as to what it has to offer. But if you scroll up at the top, here you're going to see this download for Windows button, okay? Now, if you're on Mac or Linux, you're going to see the download option for your appropriate operating system. Or if you're not seeing for some reason, you can go to other platforms and you can see what all platforms are supported over here. Okay? So I already have Visual Studio code installed onto my system, so I'm not going to install it, but the installation is very straightforward. It's like any application that you install on the system. There's no complex configuration that you have to even for Mac, it's easier, and you can see over here, there are multiple versions like if you are making use of Intel chip, you can install this one. Apple Silicon, you have this one over here. And also for Linux Ubuntu based systems over here, you have option to download and install. Okay? Now I definitely have this installed onto my system, okay? So here, I have it installed as you can see. Okay? So if you install it and open it for the first time, this is what you're going to see. This is how it's going to showcase you. Your view might differ a little bit because I'm already a visual studio code user, so I'm seeing the recent projects that I've used. So I'll just close this, okay? And here it's asking me that, Hey, you have not opened any folder yet. Yes, you can open folders here into the left side bar, and it is going to show you the tree structure. You can create files and manage it from here itself, or you can even clone a repository. And like I said, it has a really good integration with Git of Ocean control systems. So you can make use of that as well. Alright? Now, what I would request you all to do is just head over to your folder structure and create a folder, when you are going to practice Jascript. Okay? So this is my folder where I'm going to practice Ja Script, okay? And just open this folder over here in Visual Studio code. Open the folder, you can say open folder and you can navigate to the folder that you have just created. Or alternatively, you're on Windows, you have an option. You can right click. You can say show more option, and you can say open with Visual Studio code over here. Open with code over here. This is what it is. So this is Visual Studio, which is not Visual Studio code, it's different. So you have to take a look at this logo. Okay? This one. Okay? And if you say open, you'll see the folder open up over here. Okay. Maximize it. Okay? You can see. Now I have two instances or two windows or visual studio code over here. Okay? This is my folder that I had created called JavaScript. And this is where I'm going to create all my Ja script related files and everything that I'm going to learn about. So that's about it. I hope you have been able to do this setup successfully onto your system as well. 4. Our First JavaScript Program: So now it's time that we begin writing some code in JAScript. So I hope in Visual Studio code open you have been able to open this folder of your choice, okay, wherever you want to write the Ja Script programs. So I have this folder open, and beside this folder name, you'll see this icon called New File. The first file that we are going to create would be an HTML file. Okay? So I'm going to call this as index dot HTML. Now, why am I creating an HTML file? It's because we'll be making use of HTML to load Ja Script and execute it into the browser. Yes, we are going to run Ja Script into browser and see the output. Okay. So here you can see this index dot HTML and also make a note that here in visual studio code, you also see this tag apa, this tag icon, which represents the type of file that you are creating. Okay? Now, this file is created. What I'm going to do is I'm going to say exclamation. Okay? So the moment you say exclamation, Visual Studio code has good support for HTML, right? I've been seeing this constantly. So it is going to help us generate some boilerplate code, and for that, you have to press exclamation and you have to press Enter. So you'll see some boilerplate code being generated. You can see this, okay. So I'll just collapse this by clicking on this icon. And here you can customize this. So I'm going to call this title over here as Jascript Course over here, something like that. And over here, I can write in some code. Now, this file is not saved. How do you know that? So here you can see this dot appear. If you're over on this, cross will appear, but you can see this white dot appear beside the file lane. It means that the file is not saved, be sure to save whatever changes you are doing in visual studio code. If you're seeing this icon, it means that it is not saved and you won't see the changes that you have done into the file, you would keep refreshing and seeing why you are not getting the desired output. But actually, you have not saved the code. All right? So this happens quite a few times, so you have to just say Control and you'll see that I can go away, right now, what I would do is within body, I'm going to add H one, okay? And I'm going to say JavaScript. Course over here. Okay. I'm also going to add Console log over here. Okay? Now, Console log is a JavaScript treatment. So how am I going to do that? So I cannot write it in HTML tag, okay? So for that, I will have to make use of special tag called script tag. Okay? So here, after body, I'll say script. Okay. And here, I'll say console dot log. And here, I'll say hello world, something like this. Okay? So this is Ja Script, and I have saved it. So basically, how you write JavaScript within HTML is with the help of script tags, right? Now, what we need to do is we need to see the output, whether we are able to run this properly. So I'm going to right click over here and I'm going to say Reveal in File Explorer. Okay, so this will open file Explorer. On Mac, you'll see Reveal in Finder. So this opens up File Explorer. You can see this index dot HTML created. What you can do is you can open this in the browser. So make sure you have a browser, your favorite browser or your preferred browser of your choice, open over here, and the folder also open. And what you can do is you can drag drop this file over here onto the browser. Okay. So what this is going to do is going to open up this file over here. You can see this is a path of the file and you can see Ja Script course being shown over here. Now, why is it coming over here? It's because you have added this in the headrotax. You can right click, say inspect, and you can go to Console and you'll see Hello world uppe, right? So this is the console log that we have shown over here, okay? I'll just minimize this over here, and what I would do is I would actually have this side by side view, okay which is something that I prefer whenever I am coding or whenever I'm doing web development, okay? So this side by side view is what I'm going to use, and you will also have some good clarity as to what output you're getting and what change we're making and why are you seeing this output? Okay. So whatever change you make if you add a couple of more exclamation, if you hit save, and if you refresh over here, you'll see the output being reflected. Okay? But be sure to save the file. Okay? It should not be like you have not saved it, and you won't see the output, you'll just keep refreshing and you'll say, why am I not getting the output? Okay? Also, be sure to make use of the exact syntax that I'm writing in over here. You can see Console. Everything is in small. Log also everything is in small. If you try to write see caps over here, if I save this and if you refresh, you'll see it's not defined. This is not defined. Won't work. Is also telling you where the error is, okay? So I'm also going to show you how you can read errors over here. You can see reference error, console not defined, and the error is on 12. Okay? So this is line number 12, here, right? And it's the fifth position is what it's telling you. The fifth position. If I change this to small C, and if I say refresher, it should show me the output. Okay. Also, we are adding semicolon in the end because that marks the end of the Ja script statement. All right. So yeah, that's your first Jascript program that you have written and you have loaded it with the help of HTML. So I hope this was useful. 5. Structure of JavaScript File: So let me talk a bit more about Ja Script over here. So here, if you take a look at this particular file, this is an tremL file which has Ja script in it, right? Now, these things over here are known as tags and for JavaScript, this is known as statement. Jascript does not have something called as tags. Tags are there in HTML, but Jascript will have something called as statements, and Statement is just a single line of code that can be executed. Now also, you'll notice that Jascript code is written within the script tag. We have added this in the end of the file. Now, I would like to highlight one thing over here. You can get rid of this from here and you can also add it at the top within head. That is also possible if you save this and if you run this over here. Okay. If you see it running, you'll see the output is same. Okay? If I try to make any sort of change, okay, like this and if I refresh, you'll see the output come in like this. Okay? So there is no issue as such, but it's always a good practice to have this script tag in the end, which means that you should load Jascript in the end after all the HTML elements have been loaded. Now, there are reasons for this. Number one reason is to avoid any sort of unknown error. So Ja script, like we know, adds behavior to our web pages, which means that it works with the elements defined on the HTML page. Now, there is a possibility that the Ja script might even try to alter the elements depending on the state, right? If you click a button, it might want to show some information, or it might want to do something with the elements on the page. Now, if you add this script in the head over here within the head tags. The problem is this script might be executed even before all the tags of the HTML are loaded. So there's a possibility that Ja Script might not be able to find the tags that it wants to, and it might through error. So it might lead to error, and that is the reason the script tag is always recommended to be in the end of the HTML file. And the reason is pretty clear so that all the HTML tags have been loaded. Okay? The one reason. Another reason is to speed up the website. So if the script tag is added at top in the head section, what would happen is if there is a lot of script, right now, we have only one line of code, right? So it's fine. But if there is a lot of script that is written, then the script might take a while to execute or load. Okay? And HTML elements below the script or after the head tag would load only once the script has fully loaded, which might lead to slow response time on the web page. And this is not good from the user experience standpoint, and that is why it is always a good practice to load Ja script at the end of the page so that these issues are avoided. Ja Script programs can also have multiple statements, of course. I can add one more line of code over here and I can say refresh, and you'll see the output over here. All right. So yeah, that's that's more information about the Jascript program. 6. Enhancing Your Development Environment: So now let's talk about how can you enhance your development environment. All right? Now, what is happening as of now is we have this HTML file. Within this, we are loading Jascript and we have this Jascript code available in the browser. Now what we have done is we have actually opened this HTML file to see the output over here in the browser console, right? Now, there are better ways. Now what happens is if you are making any sort of change over here. For example, I'm adding one more full stop over here. Okay? If I save the file, this change won't be reflected over here. I have to do a refresh to see the change, okay? If you are constantly doing changes and constantly testing it, this could be a little bit cumbersome, and if you're working on large projects, this could irritate, you know? So things can be much more simpler, and there are some good sort of tools that you can configure within visual studio code that can make your life as a developer or a programmer easier. Now, let me take you through some steps over here that you can do to enhance your development environment. So here on the left side bar here you'll see this option called extensions. Now, in Visual Studio code, you can add or install something called as extensions that can extend the default ability that Visual Studio code has. Okay? So I do have quite a lot of extensions already installed. Okay? I'm going to talk about the ones that I recommend for Ja Script HTML or web development, alright? Now, you can see over here, I have this extension for dev containers, okay? So I work a lot with Docker as well. Okay? So I have this extension installed, but this is not needed for web development, okay? So I'll just talk about the ones that are. So this first extension that you're seeing auto rename tag over here. Okay? Now, if you see this TML file, it consists of tag, okay? One is the opening tag, other one is the closing tag. So if you want to rename the tag. So let's say if this H one, I want this to be H two. So if I do H two over here, you can see the closing tag was also renamed automatically. How is this being handled? This is being handled because of this extension. So if I disable this over here, okay? And if I come over here, now if I rename it, so let me just collapse this a bit. If I rename this to H one over here now, it's still working, I believe the changes were not taken into effect. Okay. But let me rename this H two. Okay. So now after restarting extensions, if you see, if I rename this to H two, this is not being renamed. Okay? So if you're working on a large HTML file, and let's say if you renamed this tag, then you have to rename the matching tag as well, otherwise, you're going to get error. So if I refresh this Okay. There's no error that is being thrown, okay, but the output is not what you would desire. Okay. So probably this might be shown in H two or H one. Okay? So this is not what you would desire. Ideally, A opening tag should have A closing tag as well. So that is what this auto rename tag helps you. Okay, I realized I have not saved the file, so I'll just save the file and I'll do a refresh. Okay. So this is what this auto rename tag enables you to do. So I have this installed for the convenience over here. Okay, so I've enabled this right now, and if I rename this to H one, I'll just save it. Okay? That is what this autor nim tag helps you with. Okay? There is description over here that you can go through. Okay? So this is one tag, bracket pair colorization. So what does this extension do? So if you're working on a large file, okay, then you might have these curly braces to to segregate a block of code, right? Now, you might want to see the color coding. So this helps you give you the color coding of the opening and the closing pair. You can see over here in the icon itself. So that is what this does. Okay? I have some other extensions like DV container, jango, talker, some related to Python, Jupiter notebooks, all right. Then there is this another extension, which is called as Live Server. This is also installed onto my system. So you can search for extension over here. So all these extensions I forgot to mention if you are lacking any of the extension, you can search over here in the market. You can select them and say install. That is it. It's pretty simple. Okay? So live server is an extension that enables a small or a lightweight server onto your development environment. Okay. So by installing this extension, you get this thing over here. You can see this at the bottom, go live this button. If I disable this and if I restart, that button goes away. Okay, if I enable this, you'll see that button up here. So if I say go live, what would happen is this is going to give me a live server. You can see port 50 50. So this has given me a lightweight server on 5500. It's not 50 50. It's 5500. Okay, this is a port. And if you can run this on your local machine, if you try to access this, then the file that you have will be running on the Local server. You can see this.This now running on the local server. And now if I try to make any sort of changes over here, okay? So if I add, let's say, question mark couple of four question marks. Okay. And I'll open the console before saving the file so that you all can see what is happening. Okay, it's failing to rude fabricon. If I save this, you'll see that just after saving the changes, you are seeing the changes being reflected live. So it's very helpful. It's really convenient. So you don't have to press the refresh button again and again. It will take care of showing you the output without you having to do a refresh. So it auto reloads the changes that you do. Okay? So it's really helpful this extension live server, yeah, I use it all the time. Prettier. So this is a code format that will help you format your code. So that is what it does. I have it installed here. So that's it. That's it for HTML and JaScript code. These are the extensions. I have a lot more other extensions like tailwind, Python. Okay, so I do all sorts of programming. So you'll find a lot of extensions in my Visual Studio code, and I keep deleting them, reinstalling them or installing the new ones, trying out new ones, all that stuff I do. All right. So yeah, this is about the extensions that can help you make your development environment better. So I would recommend you switch over to a live server if you're making use of an HTML file to see your Jascript code because it can help you see your changes in real time. 7. JS in Same File vs Separate One: So now it's time that we understand how can you write JavaScript in a scalable way? Now, what I mean by scalable way is right now, what we are doing is we are writing JavaScript within the script tags, right? Now, whenever you are working in a real world scenario or in a production grade applications, you won't have JavaScript of two lines, right? It would be files are really lengthy, like there is a lot of Javascript involved in some projects. So in that case, it's not good to write your JavaScript in this way. It's best if you could separate the JavaScript code from HTML. So that is what I'm going to show you. So what you can do is what we are going to do here is I'm going to create a new Ja Script file, and I'm going to call this as index dot Gs. So you can see the moment I typed in dot JS, you can see the file icon over here. This is This is JS file, and this is an HTML file. So this is a representation by visual studio code that helps you identify which is the file type. Okay? So what I will do is I'll cut these two lines of code. I'll move it over here. Okay. And right now, if I save this, you won't see any output. Okay, because there's no Ja script over here that is written within the EstimL file or not even linked over here. So if you're not writing JavaScript in the EstimL file, you can actually link it and write it in an external file, which is E tot JS file, which stands for Ja script. So what I can do is I can basically take this on the same line and add over here an attribute. So there is an attribute called SRC for the script tag, which enables you to specify the file name. Okay? So I can say index, and you can see the auto suggest over here, index dot Q. So this is auto suggest from Visual Studio code. And I can say Save. And the moment you say Save, you can see over here, hellold hello Old, and it's coming in from index JS. And you can actually make changes over here if you wish to and see the changes being reflected over here. Okay? So yeah, that's about it. Now, one thing I want to mention over here is about live server. So if you want to close the server, you need to click on this button. So that is going to dispose this server. And if you refresh it, then okay, it just won't reload. You can see. And if you want to go live again, you can start it and it'll open it up. Right? So, yeah, that's how you can separate the JS code from the HTML. 8. Comments in JavaScript: Now let's talk about commons. What are commons? So commments are like nodes in your code. Now, these are the set of statements that are not executed and are ignored, and they are just as a reference for you. So if you're coming from any other programming language like Java, Python, it's likely that you are aware of this concept of commons and you know what they are. Now, in JavaScript, there are two types of comments that are supported. One is a single line comment and other one is a multi line comment. So I can have two forward slash over here and I can say, this is a single line comment, something like this. Okay? Now, if I save this, there's literally no impact on the output because this is never executed. I can even comment this line of code. And if I save this, that one line is commented out and it is not executed. So so yeah, this is how you can make use of single line comment. Also, you can come over here in Visual Studio code under Edit over here. You'll see toggle line comment. So this is a shortcut over here. So the shortcut for me is Control plus forward slash. Okay. Since I'm on Windows, so I can keep my cursor on this line, and I can say Control and forward slash, and you can see, I'm able to toggle between the single line comment. Okay, I can even select this entire block of code and I can see Control and forward slash. Now, if you are on Mac or Linux, this shortcut may differ, but I'm just showing you the way as to how you can get the shortcut for yourself. All right. Also, there is something called as block comment, as you can see over here. Now, I told you that this is single line comment or it is also known as line comment. Now, there is something called as block comment or also known as multi line comment. Okay? So you can comment multiple lines of code this way, by having these two forward slash on every line. But there would be situations where you do want to go this way. So that is when you can make use of multiline comment. So to do multiline comment, we'll take a look at the screenshot or sorry, not screenshot, the shortcut. So you can see shift lt and A, or you can even select this option over here. So you can see these two lines of code that I had selected are now into this syntax, which is for multiline comment, and they won't be executed. So if I save this file, you can see literally no output onto the console. Okay? So this is multiline comment. Okay, and I can toggle this. So it was Control Shift and E over here. Oops, I made a mistake. What was a shortcut? So it was shift Old and E. I'm sorry. Okay, so I can select this and I can say shift old and E onto my system. Oops. Okay, it's not working for me. Shift old and A. I should work ideally. But yeah, I don't know. Shortcut is not working for some reason. Let me try once again, shift old and A. Okay, it worked. Probably I was not doing it in the right way on the keyboard. Okay? It worked. And I'll save this so you can see the lines are pack. Okay? So this is single line comment, and if I take this to a new line and if I see something like this over here, okay? This is multiline comments. So I'll add this line over here. Okay? So this is multi line comment. Okay. Now, there is one more way of enhancing the way you comment, which is known as doc comments, okay? So it is also called as documentation comments or doc comments, and it consists of annotations. Okay? Now, what happens is normally you would have a lot of code like functions, classes, objects created in the code, and you would want to have description of what sort of parameters anyone using this particular function is supposed to pass and why these parameters are needed and all of that. Okay? So basically with the help of doc comments, you can make use of annotations and specify all this information. So I'll just add a simple example of talk comments over here, okay? So here, you can see we have a function, okay? If you're not aware of this concept of function, methods, don't stress out. But if you're coming from any other programming language, you must be aware of things like functions, methods, and all, right? So I'm just using this to show this example. Now, here you can see this is do comment. This is the syntax, okay? And you can see over here, what this function does essentially is it adds two numbers, and I've also specified the parameter. So I'm making use of at the rate para annotation over here. Annotation is something that starts with ad derate. Okay? So that is what annotation is. And I'm specifying that this is a number and the name is A, and this is the first number. And again, I'm describing the second parameter and then what is the return type of this function. Now, if you hover on this, if you hover on this function, you'll see this documentation is actually being shown, you can see in this pop up. So anyone trying to make use of this function in some other file, you can see what all you have written or much more information about this particular function. That is what it means, okay? Now the question is, if you are looking at the syntax, you will be a little bit worried, you'll say, Hey, I have to add these asterix marks on every line. So the answer is no. That's auto generated for you. So what you can do is you can have forward slash, and you can have two times asterix over here. So if you add two times asterix, the IDE knows that you want to add the doc style comments and you can actually add things that you need. Okay? And you can make use of you can make use of the annotation over here. You can see. Okay? Now, whenever you press Enter, a new asterix is added. Okay, so you don't have to worry about adding it on every line. Okay. So that's the reason why people use ID. That's another reason. Okay. You can do all of this that we are doing in Notepad as well, but you won't get access to all of these features, you know, these suggestions and auto generation of asterisks and all of that won't happen in notepad, and that is why people make use of IDs, okay? So another another use case of documenting code this way is tomorrow if you want to generate an EPA documentation. So let's say you have written an EPI in JavaScript or some library in JavaScript, and you want to generate a documentation for the same. So you can make use of tools available. There are external tools like one tool is Jstok three. Okay? And you can make use of that and you can generate the documentation. And the documentation is generated using this. So if you have added this around like all the functions and all the EPIs, whatever you have to find, it is going to give you the documentation which you can share with your front end developers or whoever you want to share it with, okay? Now, I would also ask you if you're interested to know more about this style of documenting things. I would request you to refer to this website jsto dot app. Okay. And this is standard, essentially, I would say, or style to document your Jascrit code. And here, if you see, you will see a list of multiple annotations or multiple tags over here. You can see we were making use of Param which you should see somewhere over here. Okay? You can see param. All right. And there are lots of things that you can make use of. If you click on them, you'll have access to more details as to how it can be used. Okay? And, yeah, this is what it is. You can click over here on the right hand side, top, and you can head over to their Github repository as well to know more. Okay? So yeah, this is about GS stock that you can explore more if you're interested in this, okay? But yeah, this is about comments, and I'll get rid of this over here for now. All right. So I hope you have been able to follow along, and I hope this was useful. 9. JavaScript using Nodejs: Hey, what's up, everyone. So let me showcase how you can make use of node Gus to run your Jar Script code. So far, what we have been doing is we have been running our Jar script right from the browser itself, and here I'm making use of VS code with live server extension, and I actually don't need extension except for live reloads, but yeah, live reloads just makes my life convenient, you know, as a developer, you can even open this estimate file directly into the browser and see the output in the console. But you'll have to refresh for every change you make every time, which is not convenient in my opinion. So what's NodeJS, NodeJS provides a runtime environment for JavaScript. So if you just Google NodeJS, you will come over, or you'll see this link nogs.org, which is the link of the official website. Now, how NodeJS came into picture. So what happened is one engineer named Ryan Dahl, what he did is he took the V eight engine. Of Google that enables Ja Script to run in Google Chrome. So in Google Chrome, you see Ja Script is being executed, how it's being executed with the help of eight engine. So Ryan just took this Vet engine and he created NodeJS. So NodeJS essentially is this eight engine that enables you to run Ja Script anywhere. All right? Now, to get this or to run NodeJS without the help of Oh, sorry, Nod Js. So if you want to run Ja Script without the help of browsers, you need to install Nojs onto your system. Right. And you can simply come over to this website. You can either go to Download or you will see this download link here on the homepage. Okay? Just hit this download button and it'll get downloaded onto your system. Or alternatively, you can go to Download and you can select the version. Be sure to select the latest one. Which operating system you are on, okay, and just get it onto your system. So you can even install it using these command line utilities, all right? Or you can have a prebuilt installer as well. Okay, so there are different installation options. I would recommend the installer. You should make use of installer, so just download it and run it. So it's pretty simple to install. It's just like any other software that you would normally install on your system. All right? Now, once you're done installing, I'm not going to show you the installation steps. It's pretty standard. So just head over to terminal or any terminal outside Visual Studio code if you wish to prefer your native operating system terminal. You can do that as well. But since I'm making use of Visual Studio code, it has an in built terminal functionality, which will help me open up this terminal over here. Okay? Now, in the terminal, you can run this command node hyphen, which is going to actually print in the version of node that you have onto your system. So it's very likely that you might see a different son number being printed over here depending on when you're watching this video. But if you have any son number being printed, that's completely fine, as long as it is getting printed. Okay, it should get printed. Otherwise, there is some problem with the nodejs installation onto your system. Either it was not installed properly or it's not installed at all. Okay? So before installation or before downloading this, I would also recommend you should run this command and check whether node exists on your system, right? So it exists onto my system. I know that I installed early on. Now, once node exists, what I would do is I'll clear this I'll say NP or I'll say node over here. So this is a command, and I would pass in the file name for Ja Script file. This index dot chg. But before running this command, be sure that you are in the right directory. So I'll check my directory over here. So right now I'm in this directory, and this is a directory where my Ja Script file also resides. Okay? So I'm going to say node over here. And I'm going to say index dot Gs. And if I say Enter, you'll see the output coming over here, okay? So with this approach, you can make use of terminal and you don't need the browser console over here, okay? And you don't even need the live server, right? So basically, you write some code over here, which is plain JavaScript and you see it being executed onto the console like this. Okay? There's no need of any TML file, any live server, or neither. The browser as well, okay? Because you're now executing Ja Script outside the browser. I explained what node JS is and how it came into picture. Okay? So you're making use of NodeJS over here. But I just wish to show this methodology to you all, okay? I won't be personally using this, okay, because I want to show you how Ja Script works with HTML. So we'll stick to this method. But, yeah, I wished that you should know the other methods as well. And that's why I decided to show it to you. Alright, I hope you have been able to follow along, and I hope this was useful. 10. DOM Manipulation using JavaScript: Let us talk about Dom manipulation. Now, what do you mean by doom manipulation? Now, if you are talking about JavaScript, you must have heard about this term called Dom. Now, Dom stands for document object model. Now, whenever you display a web page in the browser, it is converted into a structure, right, that the web page displays. And this structure is what is known as document object model or do right? Now, JavaScript can interact with this Dom and can even alter it. That is the power of JavaScript. When we say Ja Script add behaviors into the webpages, this is the ability that it brings to the table. So it can interact with the Dom and it can even alter it. Now, I'm just going to show you some capabilities on how it can alter things from Ja Script itself, okay? So here we have this title JaScript course, okay? Over here, you're seeing H one Jascript Cure. So what I will do is I will add probably a PTAC over here. Okay, let's say, it's a P tag. I won't add anything. I'll add an ID, okay? And I'll say this is name over here, okay? So added a P tag, and I've given it an attribute called ID, which is which has a value of name. Okay? Now, why have I given it ID? Because we want to access this P tag from Ja Script and to access any tag from HTML, it should be picked up by Jascript using an identifier. And ID is that unique identifier. So if you hover on this, you'll see defines a unique identifier, which must be unique in the whole document. So this is the entire document, and this should be unique for Ja Script to pick it up in the right way. Okay? Now here, what I'm going to do is I'm going to so first of all, if you refresh this, you you're seeing there is no output over here because we have literally not added anything, right? This is an MTP tag. So here, I can say document dot get element by ID. Okay? So we are seeing from the document, get this element by ID. Now, which element are we asking for? Okay? So we're asking for name. That is the name of our element over here. Okay? Now, using from here, I can access it its property. So I can say inner text is equal to, I can add in hello over here, something like this. Okay. And I'll add a semicolon and I'll save this. Now you'll see hello up here over here. Okay? So this hello is being added into the HTML document or into the HTML code with the help of ChavScript you can see this is the line of code that does that. Okay? And it's pretty straightforward as well. We are saying document, o from the document, get this element by ID, which is the element. So you have to enter name over here. Okay and you can see over here. This get element by ID returns or reference to the first object with the specified value of the ID attribute. That is what it pass. And then we are seeing inner text, okay? So we are modifying the inner text over here and we are adding hello over there. Okay? So that is what we are doing, all right. Now, I'll show you a few more examples. So what I will do is here so within this HTML, what I can do is I can come over here. I have this P tag. I can change this P tag to H one, so that it's better visible. Okay? The size is bigger. Now over here, what I will do is it is displaying hello over here. Okay. I can again say document dot get element by ID, okay? I'll get this element, which is name over here, okay? And then I can say tot On click or I can say tout inner text, okay? Or 1 second. Let me also add a button over here. Okay? I missed adding button, so I'll add a button over here. So what we are going to do is what I'm trying to showcase is on click of this button, I'm going to change the text, change text. Button. Okay. And this is just a button with the text change over here. You can see. I'll just minimize this a bit. Okay. So instead of name, I'll get change. So what was the ID, it is change text button. I'll just give it over here. Okay? And then over here, I'm going to say dot on click on click of this button. Okay. You can see this on click over here. On click of this button, what I need to do is I'll have a function. Okay? This is a function and the function state. Oops. Okay, so I cleared that out and over here, within a pair of curly praises, Okay, I'm going to tell what should happen on the click of this button. Okay? So on the click of this button, this text should change. So I'm going to copy this line over here because this is the line that helps us change the text, and I can say, hello, I can say hello again over here, something like this. Okay. So I hope this is making sense. What we are trying to do over here. All right. We are actually saying document dot get element by ID. We are getting this element. This is a button. And on click of this button, we are saying execute this function. What are functions, in case if you're not aware, functions are nothing but block of code that are designed to do a particular task. And the task that we are trying to do over here is just change the text of particular this particular element over here, and this particular element is a H one tag, okay? So we are getting that H one tag, and we are changing the inner text to hello again. Align this with a semicolon. I'll save this. And now if you say change, you'll see hello again. Okay? So this is a power of JavaScript, okay? You can see how powerful it is. We've just added an onclick listener, and with the help of function we are actually able to update the name. Or essentially, I should say, we are just not updating the name. We are actually altering an pre existing element or a tag on the page. Okay? So that's a power of JavaScript here that you can sense. So it's just not about changing the text, but you can even update the styles on the fly. Okay? And to demonstrate that, let's say if I click on change I on click on change I wish to change the background color of an element to something else, I can even do that with JavaScript. So I'll just duplicate this line over here. And over here, let's say I want to change the style of this particular element to that of red, let's say, for example. So I can say, after getting this particular element, instead of inner text, I can see style, tout, I can see background. You can see there are so many there are so many properties that you have access to, okay? You also have access to text color over here. Okay. No text color. Sorry about that. It's just the color. Okay? So we're talking about background color, so I'll just get the background color over here, and here I can say red. And I'll see if this. Now on click of change, you'll see the text also changed and the background color is now red. If you want, you can even change the color, the text color to that of white. I can simply duplicate this line and I can say color can be white. Okay. And you can say, over here, right? So white because on red, black was not looking that good to me. Okay, my preference. But this is something that is possible with JavaScript. You can see how it can add a lot of behavior into HTML elements, and a static HTML page now has behaviors and things that are updating dynamically on the events that you are performing onto the webpage, okay? So I hope you have been able to follow along, and I hope this was useful. 11. Variables in JavaScript: Let's start talking about what is a variable. Now, if you're coming from some other programming language, it's very likely that you would be aware of variables as a concept. A variable is like a storage box where you can keep a piece of information to use later. Now, what does that mean? Now, if you're building some large programs in any sort of programming language, it is very likely that you would want to store some sort of information. For example, if you are building a calculator, you might want to store numbers and the result so that you can display to the user. You might also want to store numbers. The reason is you want to do calculations on those numbers, right? So you might want to store it somewhere, and those numbers have to be accessible to right? So this is where the concept of variable comes in. It allows you to store the information during the execution of the program. So that's what the definition says. A variable is like a storage box. A storage box because it allows you to store information, right? So the next part says where you can keep the piece of information for them to use later on, right? You can think of it as a label that you stick on something you want to remember. So imagine this box over here and let's say you have a box named or labeled name over here. Instead of label, you are seeing name over here. And inside the box, you put the name Alice. Now, whenever you want to use the name Alice, you can just refer to the name box and you can use it instead of typing in Alice every time. Now, this is a very simple example. Of course, variables can store a lot of complex stuff as well, like sentences and all, o, which you can use during the course of execution of the program, right? Now, creating a variable in JavaScript is pretty straightforward. So we'll create our first variable, okay, and we'll see how we can make use of now let us begin creating a first variable. I'll say is how you create variables in JavaScript and you add the variable name that you want to have. Let's say I want to store the count for counting something. I've created this variable named count. Now, after this statement, if I save the program, I have actually created a variable, but I'm not actually using it. So that is why I don't see anything in the output, right? Now, I can say console dot, log over here, and I can straightaway print or use the variable. So I'm using it means I'm simply printing it right now. Okay, I'm not performing any sort of operations on the variables. So I'll save this and you'll see undefined being printed over here. So this variable does not have anything in it. So you can think of it that the box that you have with the label on it does not have any sort of information. Why? Because you have not assigned any information to it. So you can assign information this way, so you can say count is equal to zero over here. And if you save this, you'll see zero being printed onto the console, right? You can make this code much more concise by combining these two statements. So this is the declaration, and this is the initialization part of creating variables. So what I can do is I can actually combine these two, okay? So let me press Backspace and let me combine this, okay, something like this. Now if I save this, the output will be same. I won't change. But right now instead of three lines of code, I have two lines. So this is how you can create and make use of variable. Of course, the usage that I have shown over here is pretty basic. I'm just printing the variable. Okay? And you can use it as number of times you want during the course of execution of the program. It's totally up to you. So you can see over here, right? And you can even make use of it in arithmetic operations. So I can say console dot log over here, and I can say count plus ten over here. You can see ten ase output. Okay. Now, if the count is ten, you'll see 1010, ten being printed and you can see 20 ase output. You can even change the value of the variable. So here somewhere in the middle of the ttments I can say count is equal to 40, for example. Okay. And I can save this and you can see for three times the count is ten over here, and then the count is 40 40, 50, right? 50 because I'm adding ten to it. So this is simplest explanation for variables. So to take away a few points, a variable is like a storage box where you can keep or store the piece of information that you want to make use of later on. You can think of it as a label that you are sticking on something you want to remember, right? So here I am remembering count. I'm storing the value of count, and I'm actually making use of it during the course of execution of the program. Variable creation involves two steps. First is the declaration part, and then is the initialization part, right? Now here, I'm combining initialization and declaration together into one, okay? And you can make use of, uh, variables as number of times as you want during the execution of the program, you can even reassign the value to a variable as number of times as you want. So I can even reassign this again. Instead of 40, I can make this, let's say, 80 and I can save it. You'll see the change in the output. Okay? So that's variables for you, and I hope this was pretty clear and the simplest possible explanation. 12. Variable Names: Now it's not like you can only create one variable in a program. You can create as many variables as you want in a program. So if I want to, let's say, store a counter over here, counter is five, I can do that and I can make use of it anywhere in the program. In the end of the program, I can say console dot log, and I can print the value. Oops. I'm sorry. You can print the value of counter over here. Okay. And you'll see five being printed. Now, if there is something that is allowed to create a lot because variables, you can create a lot in the programs as many as you like, okay? So if there is something like this, then it's essential that the creation of these things should be governed by rules, right? So similarly for variables, you have some set of rules that you have to follow when creating and naming variables. So now there are quite a few rules, not a lot, but a few rules that you should keep in mind when making use of variables. Now, you're not supposed to by heart these rules, but generally with practice, you will get hold of them, right? And IDs, if you're making use of any modern ID, like visual studio code, the IDs also make sure that they point out any sort of mistakes that you are doing or deviating from the rule. Okay? So if you're trying to name a variable that is not allowed, then ID also help there highlighting the issue. All right? So we'll talk about rules one by one. So the number one rule that I have here on the screen is variable names must begin with a letter, dollar or an underscore. Okay. So you can have a variable name. So let me clear this out a bit, okay. So I'll just get rid of all of this, okay? I'll just keep things clean. So here, this variable is actually beginning with a letter, okay? You can have a variables beginning with something like this. Okay? This is valid variable name. Okay? You can have variable called underscore name over here is equal to, you can say high. Okay. This is also valid. So these are all valid variable names. Now, you cannot have variable name using beginning with a letter. So you can say one name over here. This is not valid, okay? If you try to do this, you'll get an error. You can see, like I highlighted that IDs help you. You can see it's like saying identify it's not able to get what you're trying to do. Okay? Now, why would you want to name variable this way? One name does not make any sense, right? So this is not allowed. I'll just comment this out, okay? So this is one of the rules that you're supposed to keep in mind. And, of course, if don't remember this, don't stress about it because modern IDs, like I said, if you're making use of any sort of modern ID, the IDs will help you pinpoint any sort of deviation from the rules, right? So this is rule number one. Now rule number two says that it can contain letters, digits, dollar and underscore after the first character. Okay? So you can have variable. So you cannot have variable called user. This is not allowed. Oops. So it picked up user activation. Okay. You cannot have variable called user, something like this, right? This is not allowed because it's starting with a number. But you can have a variable called user one. This is allowed because here, the number is coming in the end or after the first character. You can have number after the first character as well. Okay? That is allowed as well. Now you can even have dollar, so you can have dollar over here or you can have an underscore as well. Now, underscore is helpful if you want to separate two words. So if I want to have first underscore name, this is where underscore can be used. Okay? So yeah, this is the second rule that mentions that the variable names, not you, variable names can contain letters, digit, dollar and underscore after the first character. Now the third rule says that variable names are key sensitive, okay? So what this means is, if you are having two variable names, so let me say if it's name over here, okay, name is, let's say, Alice over here. Oops. If it's Alice over here, and let's say you have one more variable name which is name over here. Okay and it is Tom, let's say. So these are two different variable names, and I can show it to you. So you can say Console dot log, and you can print name over here. Okay. And you can say Console, dot log, and you can say name over here, something like this. Okay. If you see the output, you'll see Alice and Tom as the output. Okay, so this is the rule number three wherein variable names are case sensitive. The next rule says that variable names cannot make use of a reserved keyword. Now, what are reserved keywords? Now, in programming languages, generally, there are words with a predefined meaning. For example, let is a keyword. It has a predefined meaning, and it is used to create variables, right? So if you try to create a variable with the name let over here, okay, that's not allowed. You can see. So if you hover on this, it'll say let is not allowed to be used in a name in let or cons declarations. Okay, so this is not allowed, okay, so I'll just comment this out. So you cannot make use of reserved keywords. Okay? Now, you'll be like, Oh, I have to memorize all the reserved keywords, not at all, because with practice, as you start building programs, you'll know what reserved keywords are. Okay, try is a reserved keyword, catch is a reserved keyword. You'll know all of this as you learn new new concepts, and it comes with practice actually. Even I have not by heart the list of reserved keywords. Okay? As you keep practicing, you will learn, like, these are all the reserved keywords, and at places where you forget or don't remember, IDs will help you, right? But this is a rule to keep in mind. Next rule says that variable names should not have species. If you try to add a space in between variable name, that is not allowed. If I try to add a variable name as first name is equal to let's say ten, you can see, this is not allowed. This is not allowed. You have to combine them. It's a single word. You have to combine it this way. First name. This convention over here where you have two words in a single variable name and the second word has capital letter is known as camel case. Okay. So here we are making N into capital, putting N as capital over here so that it's readable. There are two words. That is what we are highlighting. First is a word and name is a word. This is a good naming practice over here. You should not have space in a variable name. So no spaces are allowed. The last thing over here is use descriptive names. This is actually not a rule, but actually good practice to have variable names as descriptive. For example, let's say if I have a variable name, if I want to store, let's say H over here. And if I create a variable name A over here and I'm storing H as let's say 22. I'm not 22-years-old, but I'm just giving this an example. Okay? So let's say I'm trying to store H and I've created this variable name. Now, for anyone reading this code does not know A, what value A is holding. Of course, it's holding 22, but what it is? It is actually an H, right? So a better practice over here is to have a proper variable name where the variable name itself conveys what kind of value the variable is holding. So here, it's pretty clear that this variable is created to store age of a user. Right? So if you're building an employee management project or something like that, okay? And if someone reading your code comes across this variable age, it knows that, hey, this is representing the age of the employee, okay? So it's always better to have variable names descriptive variable names, I would say, unlike and it's better practice to have descriptive ones because having variable names like X, A, B, C, X one, X two, this is not a good practice at all, okay? I'm totally against it. So so yeah, this is the rule over here or this is not actually a rule. You won't get any sort of error if you declare it as A or X, but this is a good practice to follow. All right. Few more things I wanted to highlight about variable creation over here is you can declare multiple variables in a single line as well. So I can have A one. Okay. A two, and I can have A three. So these are three variables being created in a single line, okay? And you have separated them by commas. You can even initialize them over here. So I can initialize them different values, five, ten, and I have not initialized A three over here. I can even initialize A three as 15, okay? And I can add Console log over here. So let me quickly add Console log and show you the output. Okay? This is A one. Okay. This is a two, and this is for a three. Okay. And if I save this, you will see five, ten and 15. Now if I get rid of A two value over here. Okay? And if I save this, A two is undefined, okay? So I'm bringing back the A two value, which is ten over here. So you can absolutely have multiple variables created, declared and initialized in a single line. But normally, this is not how people do, okay? With JavaScript, the general convention is to go about this way. So you would want to have A one, something like this. Okay? And then have A two on a separate line and then have A three on a separate line, something like this. So this is what is preferred over this kind of a syntax because this is much more clear and easy to read, okay? Now, you're seeing all red marks over here. Why? Because variable names in a single program has to be unique, or at least in a scope. Okay. So within a scope, the variable name has to be unique. So you can see here, I'm trying to create a variable name A one, and you can see here A one already exist, right? So if I add A 11 or e22e3, I'm allowed to create. Okay. So yeah, be sure to have unique variable names. And this is also one convention or one thing, one rule, I should say that you should be aware of about variables. You can even chain assignments, so I can create variables like X, Y and Zt over here. Okay and I can have X is equal to Y is equal to Z is equal to 30, for example. Okay. And all of them will have the value of 30. So if you want, I can show it to you. Okay? So it's X. Okay. And then here it's Y, and here it's s. Okay, I I save this, you'll see 30, 30, 30. Okay? All of them have the same value. Okay? So yeah, that's about variables and how you can name them and the rules that you're supposed to keep in mind. So keep in mind these general rules as such, you don't need to by hard them. It's completely okay. Don't stress about it. But once you begin programming, okay, I don't want to be surprised that, hey, it's not allowing me to create variables with this name. Of course, it won't because that is a rule that you should be aware. All right? And modern IDs, like I said, always help you and are there to give you verbose error messages. So I hope this was useful. 13. var vs let vs const: So now it's time that we talk about different ways of creating variables in JavaScript. So in JavaScript, you can create variables using these keywords. You have let const and were over here, okay? Or it's also pronounced as War. So War over here is an older way of creating variables, okay? So you can make use of War and you can say counter is equal to 100 and you can say Console or Log over here and you can see counter over here. Okay, I'll add semi colon. Now you can see this being printed. But this is an older way of creating variables. Usually, as of today, now we only make use of let over here. So if you want to make use of if you want to store counter over here, you can say 100 and you can say Console, dot log, and a new counter. Okay? So this is how you create variables today. Now what is const? So if you're coming from some different programming language, you will be aware of constants. So const is the keyword that allows you to declare or create constants. Now, constant is something whose value never change. For example, here, for new counter, I can reassign a value, right? I can say counter is equal to 200. Okay? And if I print counter again, I'm going to see 200 as the output. You can see over here. Okay. But there will be times or scenarios that you will face when you don't want the value of a variable to change. Okay? And in that particular case, you can make use of const. So you can say const over here and let's say a value of Pi. So you can say 3.14. That is what the value of Pi is, right? Now, I'll just copy this. And you can print in the value of Pi. You can see 3.14. Now, if I try to change this value over here, if I say Pi is equal to 400. Okay. And if I try to save this, you'll see you get an error that assignment to a constant variable is not allowed, okay? And you don't see the output. And you are also seeing. So here you can also see how you can debug your error. So you are seeing index dot has Line number 17. And this is line number 17, you can see in visual studio code, it's highlighting your line number. Alternatively, you can even click on this, so you can click this is a link. If you click on this, you will be taken to the code over here. You can see this is the line where the error is. And if you hover on this, you'll see this is a line that is causing the error. Uncaught type error assignment to a constant variable. All right. So back to Console over here. So if you get rid of this line, yeah. And if you save, you get the output as expected. All right. So constant is where you don't want the value of variable to be changed. And there are many scenarios in which constants you'll need to create constant. For example, if you are working on a banking application, you might want to create a variable or you might want to store a value of interest rate. Now, interest rate does not change, right? It's fixed. So provided it's fixed for your bank, all or the project that you're working on. If it's fixed, then you might want to have a constant because you don't want yourself or you to accidentally change the value of interest rate in the program later on. And also, if you're working on a team, you don't want anyone else to modify that value. So that is why you are explicitly mentioning const over there, okay? And that tells everyone else that, hey, this is constant and not to be modified. Also one convention over here is whenever you are declaring constant, it is normally, you will see constants being declared in capital letters. Okay. So for example, Pi over here is in capital letters. Okay? So yeah, that's about let const and where. Okay? So remember, you can create variables using all these three keywords. You should use let when you want to create a normal variable whose value you can change. R is a older way of creating variables. It's not used today. Okay? I not seen developers using them around me, right? It's an older way. So just forget it. But it's good to know because if you're working on legacy code base, if you join a company, if you're working on legacy code bit, it's best to know, okay, so that you can upgrade, right? Const, of course, if you don't want the value to change to stay to stay same, I mean, okay, you should make use of this keeper. So I hope this was useful. 14. Datatypes: Hey, there welcome, and now it's time that we begin talking about datatypes in JavaScript. So data type is nothing but data types defines the kind of value that a particular variable is holding. Now, if you're coming from some other programming background like Java, Python, or something like that, then you must be aware of what data types are, right? And for those who are not aware, this is a definition. It simply defines the kind of value a variable is holding. Now, data types in JavaScript are broadly classified into two types. One is primitive types, and then we have reference types. So let's first begin talking about primitive types. Now, these are the primitive types of data types in JavaScript. So you have number, you have string, Boolean, undefined. Yes, undefined is also a data type, and you have null. So Number, like it says, represents both integers and floating point numbers. Okay? So if you want to numbers, we are all of it, one, two, three, and even floating point numbers, the numbers with decimal points like 1.1, 1.2, these all fall into the category of number. Then you have strings. Now string is nothing but the sequence of characters like your name and all of that city name, country name, all of this comes under string. Boolean, which has just two values, true or false, then we have undefined, which means no value is assigned, and then you have null. Now null represents that the value is absent intentionally. Now let me demonstrate number over here. So here, what I can do is I can create a variable called H. I can assign it a number. Okay? Let's say H is or let's say H is 70 over here, any sort of number. And you can do Console log over here, o, and you can print in each. Okay. And you'll see the output over here. You can see 70 is the output. Okay? Now, if you want to print in what type of variable this is, then you can make use of type off. So I can say type off. You can see the to suggest. And add a space, and then you hit Save. So you can see the type of this variable is a number. Okay? Now, if I change this to decimal, so if I say 70.5 over here, of course, H cannot go in decimal, but I'll still do this for demonstration purpose, you'll see that the type of H is still a number, okay? So unlike other programming languages like Java, in Java, you have separate data types for floating point values as well as integer values. But in JavaScript, there is no such thing, okay? Depending on what kind of value it is holding, okay, it can be a number, not number can be a decimal value or even a whole number. So here, this whole number, this will also be a number like we saw. Okay? So this is what number is. And then we have strings. So here, if you scroll down, o, I'll show you what strings are. So you can say let name over here and you can add, let's say, John or Alice, whatever, and then you can say Console, Tot og over here, and I can say name over here. Okay. Now, of course, this is going to print in John, but you can say type of and you can save this and you'll see string being printed. And that is because the type of John is nothing but a string. Okay? Now, I'll create one more variable over here. Okay. I can create a city over here and you can also assign or you can even create a string using single code. So here I'm making use of double de, you'll see. You can even make use of a single code over here. Now, city is saying Jose over here, okay. And I'll just copy this over here, this part. And instead of name, you can have city and you can save it, you'll see still, you are having a string being created. Okay? So string can be created in multiple ways, okay? You can see using double codes and also using single code. Now you can even concatenate a string, okay? So you can say Console. Sorry, it's confirm console dot log over here, and you can say you can say name, okay. And I'll say plus, and you can see a lot of space in between, and you can say city like this. You'll see John San Jose. Okay? Now, John Sin Jose does not make sense, but if you have separate variables for first name and last name, you can, of course, concatenate it this way to get a full name. Now many developer, I see prefer single codes for creating strings when working with JavaScript. Next data type that we have is Boolean. Okay? Now, Boolean simply represents two value, true or false. So I can create a Boolean over here is or I can say has graduated over here, and it can be true over here and I can say Console, dot, log, and I can say type off and I can say has graduated. Now, you'll see Boolean as the output over here, okay? You can just type in as graduated also, and you'll see true AE output. All right? Now, Boolean data types are actually used a lot when you're doing decision making, okay? Decision making meaning, if a student has graduated, then you can probably issue him a certificate, right? Or you can stop calculating the attendance. If the user is admin, so you can have a Boolean called I Admin. If a user is admin, then grant him access to a certain features in the app. If he's not admin, then restrict him from these all things. So depending on the value of the variable is admin has graduated, the decisions are taken, and this is being used a lot in decision making. All right? So that's a use case for boolean. It simply represents true or false. Then you have undefined. So undefined means that the variable has been declared but has not been assigned a value yet, okay? So you can say console dot log over here. And let me create a variable first. Okay. So I'll have a variable, let area. And let's say I don't have any value for this. Okay? I'll add area over here, okay and you'll see undefined being printed. Okay? Now, if I say type of, then you'll see undefined being printed. Okay? So this is undefined wherein no value is actually assigned to the variable that has been created. Now the next one we have is null that represents intentional absence of a value. So let's say you have a variable that you have created and you don't want to assign it a value yet. So I can create a variable called empty value. Let's call it empty value itself. Okay. And I'll have null assigned to it. Now, if I say console dot log, and if I say Empty value, I'm going to see null being printed onto the console. Okay? Now, I can say type of and save this and you'll see the type of this is object. So null is actually of object type, okay? But this is actually a type data type in JavaScript. Okay? So yeah, that's about Null over here. Okay? I'll just get rid of this and we'll have this being printed. Now before moving on to reference type, I just want to highlight one small thing over here. When we said type of empty value over here, which is null, we saw object being printed. But actually, this thing is having null inside it, right? So it should ideally be printing null if null is a data type. Okay. Now, I want to just highlight a stack overflow article over here, o which says, Why is type of null object, right? Now here, this was proposed ideally. So if you go to this link over here, this was proposed changing it took 1 second, not this one, but this is the one. Okay. So this was proposed to change it to null over here. Okay? So this is the entire article over here, and this is the stack overflow thing. Okay. So this was proposed to change, but it was actually rejected. So if you run this code over here, you'll still see object o, as the output. But that does not matter, okay? Just remember, you can have null values in JavaScript. You can have variables with null values. That is what matters. Now let's move on to the reference types. So we'll talk about two. One is object, and then we have something called as Rs. Now what is an object? Now, object is actually used to store complex data in the form of key value pairs. Okay? Now, why do we need to store complex data? Let's say I am building an application, and in my application, I wish to keep track of a user. All right. Now, I'll say let user. So let's say I wish to keep track of users H. Let's say users H is 22, and I also wish to keep track of user name over here. Okay? And let's say name is John, let's say, for example, all right. Now I have two variables that is representing single user. Now, let's say if my application scales and I have hundreds and thousands of users, what would you do in that case? Would you create those many variables? Absolutely not. Okay? Then a good thing is to group this. So these two properties or these two variables belong to a single user, right? So why not group them and store them as object? So what you can do over here is a better approach is to have person, because instead of person, I'll have user because we are talking about user over here, okay? I'll have equal to now over here, what I'm going to do is I'm going to have a pair of curly places, something like this. And within this, I'm going to have key value pairs, which will be the attributes of this particular user. Okay? So I can say first name, okay. Name is John over here. Okay. And then I can have H and H is let's say 22. All right. Now what I can do is if you scroll down, I can say I can actually access individual properties. Okay? I can say user dot, and you can see name and H. I have access to name and H, so I can access it this way. Okay? One mistake I made over here, I said it's a key value pair, but I'm actually having equal to being used over there. That's not right. So I'll just change that to Colin and you'll see over here, okay, Console. I missed DotLog also. What am I doing? So now you can see 22 being printed onto the Console, right? User dot H. You can also print in and access name over here. This is name, right? If you wish to change the name, you can change it user dot name and you can change it to, let's say, Alice. Okay. And then if you try to access this again, you'll see Alice as a new name. You can see here, right? Now this is what you can do with the object. You can group related attributes together. Now, this is slightly different from programming languages like Java. In Java, you cannot create an object directly. You first need to have a class, right? So you first define a class which acts like a template, and then you instantiate the class and you create an object, and then you can have variables or class members within that particular class. But that's not how it works in Ja Script. In Javascript, you can directly create objects like these, and they can have key value pairs, and this is really convenient. Right? Now, let's see what happens if you try to print in, so I'll do control. And I'll just try printing in user over here. Okay. Now if you try to print in user, you'll see that you're seeing the entire object being printed. Name is Alice age is 22. Okay? And you can even access the individual properties. Now, one more thing I wish to highlight over here is, I said, you can access individual properties like this, right? This is what we saw. Now this way of accessing individual properties is known as dot notation because you're making use of dot over here, a period over here, the symbol, okay? And you're using it with the object, and you're trying to access its attribute. So that is what you're trying to do, right? And this syntax is just known as dot notation. All right. So there is something that you can keep in mind, right. But yeah, the crux remains that you can create objects like this in Ja Script. You can also have more attributes, like I can have attribute like city over here, I can say San Francisco. Okay, something like this. Okay. And you can see over here, this being printed. And I can access city also using dot notation. Alright? So so that's objects in JavaScript. Let's move on to talk about arrays. Nowata arrays. Now, arrays is a reference type in JavaScript that is used to hold multiple values. So let's say you are building a program and you want to store a list of values, or multiple values, let's say. Now, if you're willing to store a list of fruits, for example, I'm just taking an example. So how do you do it with variables? You'll have a variable, fruit one. And you'll assign it to value here, right? If you want to store ten fruits, you'll create ten variables. But that's not how it's supposed to be. That's not convenient, right? Managing ten variables. Instead, if you want to store ten values or multiple values, more than one, then you can create a single variable. You can call it an array. You can call it whatever you want, fruit, and it will be of type array. So here, I'll make use of square brackets over here. And within the square brackets, I'll have the list of values one by one. So first is, let's say apple, I can have oops. I can have banana over here. Okay, and I can have, let's say, strawberry Okay, something like this. So this is an array over here, okay? And I can say console dot log over here. I can say fruit. And if I print this, you'll see apple, banana, strawberry. Okay. And let's take a look at the type of fruit. Okay. You'll see that it is an object over here. Okay? So yeah, here's how you can create and make use of arrays in JavaScript. 15. Statically or Dynamically Typed: Now let's talk about statically typed and dynamically typed programming language. Now, first, we'll talk about statically typed. So what is statically typed programming language? So in these kind of programming language, you need to declare the type of each variable explicitly. And once you've declared the type of the variable, then the variables type cannot be changed during the course of execution of program. And a very good example of this is Java. So if you have programmed in Java, you'll know or even if you have not programmed, I'll just give you a very simple example. Let's say if you want to store each of a user. Okay? So age 30, this is a Java code that I'm trying to write, okay? Now, over here, you cannot just declare variables this way. You need to specify the type here. Okay? So you will say integer, each is equal to 30. Now, you cannot assign a string, to this particular variable. All right. This is just not acceptable in Java. Okay? It'll straightaway give you an error that, Hey, H has been declared as integer and it is expecting an integer. So during the course of execution of the program, you cannot change the type. This is not allowed. Even if any sort of string, okay, if you add Java over here like this, this is not allowed because this is still a string. So this is an example of how statically typed programming languages behave. If you try to do something like this, they would give you a compiled time error. All right? Now, when you talk about JavaScript, JavaScript is dynamically typed programming language. Now what does this mean? So in JavaScript, variables can change the type during the program's execution. All right? Now, first of all, let's acknowledge that in JavaScript, you don't need to declare the type of the variable that you are creating. So let's say if I have a variable named my variable and let me say, okay, I'll say right now I have not assigned it any sort of value, okay? So I'll say console dot log over here. I'll say my variable, we can see it printed. It's undefined, right? Now, if I make use of type of operator, and if I try to print the type of this variable, you'll see type is undefined. All right? Now, let me assign this particular variable. So wait a minute. I'll just duplicate this, o. Now let me assign this particular variable A integer. Okay? So I'll scroll down here for better visibility, and let's say assign it one, now the type of this variable is number because it is holding a number in it, right? So the type has changed to number. Now let me show you one more magic. If I change this over here, o, and if I modify this to be a string, you'll see the type is now string, which means it is holding now a sequence of characters. And the string can be anything. It can be string like Jascript over here. Okay. And you'll see this. And if I duplicate this line, let me duplicate this as well. Okay. So if I get rid of this, Okay. And if I save this, you'll see Ja Script being printed. Okay. And it will print number as well, like a normal thing. Okay? So you can see how the type of my variable, which is a variable that we have created is changing dynamically during the course of execution of program, right? And this is a feature of dynamically typed language, right? And JavaScript is classified as dynamically typed language. And this is the example or an evidence of how it behaves. Now here, let me give you one more example instead of string and number, if I try to assign it a boolean, let's say, okay? If I save it, you'll see it's boolean and it's true. Now, one point to note over here is I'm not creating new variables. It's the same variable, which has been created once, and it is being reused and assigned different kinds of values, right? So it's changing on the fly during the course of the execution. So that's Javascript. So you need to remember that in JavaScript variables can change the type during the program's execution, okay? And when declaring a variable in JavaScript, you don't need to specify the type. So it's dynamically typed language. Now, we've used this type of operator. It's an operator, first of all. Okay, we have used this type of keyword, I would say, quite a few times. And the use of type of keyword, you know, like it's used to get the type of a variable over here. That is what we are using it for, right? One thing I would like to highlight over here, this type of is an operator. Within Ja script, okay? So it's an operator. I have used this term like we'll make use of type of operator and all. I don't want students to be confused. So that's why I'm explicitly mentioning that this is an operator in JavaScript, right? And I hope this example is pretty clear as to how Ja Script is a dynamically typed programming language, and I hope this is useful. 16. Expressions and Operators: So now it's time that we talk about a few more concepts like expressions, literals and operators in JavaScript. Now what are expressions? Now, expression is any valid unit of code that produces a single value. For example, over here, if I write on the console, if I say three plus three, I get output as six. Now, this is an expression, because of this statement, it produced a single value, right? So this is an expression. What is a literal? A literal is a fixed value that you are writing directly in the code. So here, three is a literal. Okay? So when I say let A is equal to 30, for example, 30 over here is an literal, and this entire thing is an expression, right? Because this is an assignment thing over here. Okay? So what is happening over here is the value on the right hand side is being assigned to the variable on the left hand side. Okay? So that's what a literal is. Now, there are multiple kinds of literal. For example, there is something called as I can say there's something called as if I zoom in over here. There is numeric literal, so this is a numeric literal. There is a string based literal, so I can say JavaScript over here. This is string over here, right? You can even have Boolean literals. Okay? So I can say true over here. This is a Boolean literal. Okay. So literals can be of many types, numeric literal string literal, Boolean literal, and it depends on the type of the value that you are adding in the code, okay? Now, I'm adding this in the console, but actually, you'd be using this in the code. So if you say let A is equal to true, so true over here is A Boolean literal. I hope this is making sense, right? So that is what A literal is. Now, we're clear about expression, expression is anything that evaluates to a single value. So for example, if you're doing some sort of arithmetic calculation or if you are initializing something, any sort of calculation or initialization that is giving you one value, that is what an expression is. Now, what are operators? Now, operators in JavaScript are symbols that would perform operations on the operates. Okay. So a couple of terminologies over here. So plus is an operator over here, okay? Division is an operator minus is an operator. Multiplication, which is represented this way as a asterisk symbol is also an operator. So these are all operators that we are also using in real life to do additions, abstraction, division and multiplication, right? So these are also operators in programming languages like JavaScript. Now, whenever you want to make use of these operators, what you would do is you would say three plus three, right? Or you might make use of variable, right? So you might say A plus B, where A and B have some values respectively. Okay. So here, what is happening is you're making use of this operator, so your plus is the operator. But these two values on which the operation is being performed is known as Opernt. Okay, I repeat over here. So here, plus is an operator. It's a symbol. It is talking about the kind of operation you want to do. You want to add two things, right? Now, the two things that you're adding three over here, three, three, and over here, A and B, these are oprints because the operation of addition is being performed on these two values. I hope this is making sense. All right. So over here, if you see three plus three produced six. So three and three are oprints and plus is an operator. Right? So that is what this says. Operators in JavaScript are symbols that perform operation. What is the operation being performed? Addition. It performs the operation on operns. What are the operns? Three over here in this case, and A and B in this case, right? And they are symbols, it says. So it's a symbol plus division minus multiplication. These are all symbols, right? Now, this is what operators are, right? And depending on the programming language that you're learning, operators will have classification. So there are types of operators in JavaScript. Okay? The first type is arithmetic operators. Now, of course, operator, the operators basically are used to perform arithmetic calculations, right? Like addition, subtraction, multiplication, division, you have modulus, you have increment, decrement. All these are arithmetic operators, okay? Assignment operators, okay? So assignment operators are equal to. If you're assigning something, you are doing an addition assignment, you're doing a subtraction assignment, multiplication assignment, or division based assignment. Now, after assignment operators comes the comparison operators, right? Now, what are comparison operators. Comparison operators like the name suggests, it is used to compare two things, right? Or compare operns. So you have equality, strict equality, inequality, then strict inequality, greater than less than, greater than equal to, less than equal to. Okay? These are the few comparison operators that exist, right? Logical operators. Now, these are used to perform logical operations, and or knot, right? You have uniary operators, which is increment, decrement type of logical knot, and so on. And then you have ternary operators, o, which has this kind of syntax. Okay? So if you're coming from some other programming language like Java, you would be aware of what ternary operator is, and you have a similar one in Ja Script. But if you're not aware of any other programming language, that's absolutely okay. We'll be covering this all. All right. Now, these are the classification, right, and this is what the concept was of expression, literal and operators. So I hope you've been able to follow along so far, and I hope this was useful. 17. Arithmetic Operators: So now it's time that we'll go through the arithmetic operators in JavaScript. So this is a list of operators that are classified as arithmetic operators. Of course, you must be familiar with quite a few of them gradation subtraction, multiplication division. Like we have been using this in our real life too. So I'll paste an example over here, okay, that will give us an idea of how addition, subtraction, multiplication, and division can give the result. So if I save this, you'll see over here. Okay, let me just zoom out a bit. Okay, so you can see the result properly. So you can see addition result is subtraction results seven, multiplication 24, and division is five. Okay? Now, if I change this to so of course, this is clear, addition result, five plus three. Okay, ten minus three, it is giving seven. Okay? If I change this to 13, you'll see the output go to negative. So that is also possible. Okay? If you scroll down over here, multiplication result is straightforward, okay, it will be positive number unless and until you are trying to multiply by zero, the output would be zero. Okay? If you scroll down division result, you're getting a number over here, okay? B 20 is divisible by four. Now if I change this to seven, let's say, see the result of division here is in decimals. All right. So if it's not a whole number, you will get a decimal result as the result of the division. All right. Now, this is about multiplication, subtraction, addition. These are the standard arithmetic operations that we also do in our day to day life. What is modulus? So if you're coming from programming language like Java, you must be aware of modulus. But just in case if you're not aware of what modulus is, I'll just give you a demo, Okay, so I'll have modulus over here. Okay. And the modulus operator is represented with the help of a percentage symbol over here. Okay. And here, I'll have modulus written. Okay, something like this. Now, let's see what modulus is, okay? So Modulus over here and I'll print in the output as modulus result. Now instead of division, I'll change this to percentage. Okay, because we are making use of modulus operator over here. I also sometimes some people pronounce it as modulus modulo, o There are different ways of saying this. So you can see modulus result is zero right now. Okay? So what modulus will do is it will give you the remainder after performing the division. Division does is, it divides and give you the result. But modulus will perform the division and it'll give you the remainder. That is what it tasks. So let's say if you say 20 is clearly divisible by four, so the output will be zero. It is also divisible by five, so output will be zero, you can see. But with six, you'll get the output as two, okay? Because 18 is divisible by six, right? Six threes are 18, and then two is the remainder. So you're getting the remainder as a result, two over here. Okay? If you try to divide this by seven, you should get six as the output. You can see six because 14 is divisible by 772 14, right? And then six is the remainder, right? So six is what you're getting as the output. So basically what Modulus does is it gives you the remainder after performing the division. All right. Now, you would ask me, why you would want such an operator. Like why you want a remainder after performing the di Okay, there are multiple use cases and scenarios or requirements in which you would want to perform or want to get the remainder of the result. One example I can give you here is identifying the odd and even number. Okay? So let's say if you are writing some code or a program where you want to identify whether the given number is odd or even. What you would do normally is you would make use of this remainder operator over here, modulus, okay? So seven modulo and you'll do it with two. Okay. So you'll get the output as one. So this is an odd number. Okay? Six modulo two, you'll get zero as the remainder. Okay. So what this means is, it means six is a even number. Okay? So this way you can make use of modulo, and you can get the result. So this is about modulo. You also have something called as increment, okay? So I'll get rid of this. Okay? This is incorrect now. Okay. Now I'll show you something called as increment. Now increment operator is used or represented something like this, plus plus. Okay? So let me scroll down. And let us say, if you have a value, let's say, I have a variable X is equal to five, okay? And I can say console dot log over here, I can print the output of X, or the value of X. You'll see five as the output. Okay? Now, let me also get this over here. Okay? I'll get this and I can say in incremented result. Okay? Now, this is not incremented yet. You are assigning five and you are getting five as the output. Okay? But what you can do is you can increase the value of let's say if you want to increase the value of X by one. So there are two approaches you can either say X is equal to X plus one. Okay? This is doable. If you save this, you'll get output as six, okay? But there's an alternative way wherein you can simply make use of this increment operator and you can get the same result in a shorthand manner. So this is a shorthand version of this statement over here. You're saying X is equal to X plus one, but actually you are just incrementing the value of X. So why not do it this way? All right. And you can increment it as many times as you want. So I can increment it one more, and you'll see the output as seven. All right. So this is what increment operator is. It's a shorthand version of incrementing the value of a variable. All right? This is about increment, then you have something called as decrement. Now decrement also works in a similar way, okay? So here, if I let me just simply copy this. Okay. So instead of X, what I'm going to do is I'm going to take an example of Y over here. Okay? And let me give you the long form version of this. Okay? So what I would do is I would get rid of this and I would say, Y is equal to Y minus one. Okay? So this is not a shorthand version, okay? And here, I'll say decremented result. Okay And I'm printing the value as Y. All right. Now if I save this, you'll see the decremented result is four, right? Now, I can make use of decrement operator over here. Okay, and I can say over here, y minus minus. It'll give me the same result. I can do this two times or as many times as I want, okay. So essentially, it is similar to increment operator, okay, but it is used for decrementing the value. All right. Now, increment operator is used to increment the value in a shorthand manner, like we saw, and decrement operator is used to decrement the value in a shorthand manner, like we are seeing over here. All right. So these are the arithmetic operators that exist in JavaScript. All right. I hope this is clear, and it's important from all of this, you understand. So rest of the operators are simple but I would say it's important that you understand how model this works. And I would recommend you also try out some examples in the browser console. You can directly type in. You don't need visual studio code for that. So you can directly type in over here and you can see how this operator behaves with different set of values. Okay? So I hope this is useful and you have been able to follow along. 18. Assignment Operators: These are the assignment operators that we have in Ja Script, and let's start talking about each one of them. So this first one is something that we have seen quite a few times until now. It is used to assign the value on the right hand side to the variable on the left hand side. Now I have added a very simple example illustrating what this assignment is. Okay, it should be very easy and not at all difficult for you to understand. Okay? So I'm just assigning a value of five to this variable A, and we are just printing this value. All right? Then we have addition assignment. Okay? So what this does is it also performs the addition along with the assignment. So let me give you an example of this. So I'll add some code here. You can see addition assignment here in practice. I've created a new variable, calling it B. And what I'm doing over here is I want to add three to B. So one way is I will do something like this. Okay? So let me show you this first. Okay. And I'll comment this out. Now if I save this, you'll see the output as 13. It was initialized to ten, but the output is now 13. All right. Now if I comment this out, and if I uncomment this, this is same as writing this. The output would be same. So what this does is it is equivalent to B is equal to B plus three. Right? So it adds three to B first, and then it assigns the total value or the result to B variable. Okay? And then we are printing it to see the output. So this is how addition and assignment work together. This is essentially a shorthand or a convenient way should I should say, to perform addition or adding a number into a particular variable. Now like we have addition assignment, we also have subtraction assignment. What this does is it essentially does the same job of what addition assignment did. Let's say if we have this variable 15 and if you want to subtract five from it. You can either have attment like this, all right. I'll save this and you'll see ten over here, okay, or you can comment this out, and you'll see the same output over here using this shorthand subtraction assignment. So it is essentially performing the subtraction first from the variable and then it is assigning the value to the variable, and we are then printing it out, right? So that is what subtraction assignment is. Next come multiplication assignment. Okay. It is also a similar version, like a shorthand version of multiplying a value into itself, okay? Or not itself. Essentially, you are actually multiplying a value to a variable and then you're assigning that value to the same variable. Okay? Now this is equivalent to, as you can see here in the comments I've written, D is equal to D into two, so I'll just demonstrate this first. Okay. You'll see the answer is 12. Okay? But if I comment this out and if I uncomment this, you'll see the output again as 12 itself. So what this is doing is it expands to D is equal to D into two. Okay. And this is just another shorthand version of performing the same thing, but in a short and concise way. You have something called as division assignment, if you see over here. Okay? It is a similar way in which it allows you to divide a value or divide a variable or value in a variable by something, and then assign the result to the variable itself. Okay? So if I save this, you'll see the output as five, okay? So these are all the assignment operators that exist in JavaScript. 19. Comparison Operators: So now it's time that we talk about the comparison operators in JavaScript and see what each operator means. So we'll go through the list and we'll see a few examples. So first, we'll talk about the equality operator. Now what is equality operator? Of course, equality operator compares two operns and returns a Pollan output. Now, one thing I wish to highlight over here, all the comparison operators will give you Boolean as the result because they are used to do comparison, right? That is what the category says, comparison operators. So whether they comparison is true or false. That is what the output will be. Now, as an example, I can say console dot log over here, okay? And I can say five is equal to five over here. You can see the value is true. Now, if I do this with six, of course, it is going to give me false. Now, this can even work with variables. So let's say if we have A and if we have B over here, and P has six. Okay? And if I duplicate this line, this can also work with the variables over here. So I can say P over here, and this can be A. So you'll see the output is false. Okay? But if I change this to Pi, of course, the output is going to be true. Okay? Now, this is how a comparison operator works. Now what happens if you have a string in comparison? Let's say if I'm doing Console dot log, five is equal to six. If I convert this to a string, let's say this is not a integer, but actually this is string, right? Now, let me also show you that it is also a string. So Console dot log over here. I'm going to make use of type of her. You can see this is a string, right? So if I do a comparison this way, you'll see I get falls over here. Okay. Now, what happens if I convert this essentially to five like this? This is going to give me true. Okay? I'll just move this to the end. So that's easier to see on the console. So the output is true over here. Now, why is it true? Because here you're making use of number Oops. Here you're making use of number, and here this is a string. Why is it true? Because what happens is internally, there is a conversion that is happening from a string to a number, and that is how this thing is being handled. All right? So that would be the output, right? I hope this is making sense. So this is about equality, okay. Now you have something called a strict equality. Now this is different from other programming languages like Java. If you're coming after learning Java, there is something that will be new for you. Okay? So what happens is, we said if Phi is equal to string version of five, it is printing as true, right? Now, what happens if I make use of strict equality operator, which means equal to three times. All right? Now, if I save this, you're going to get false SE output. Okay. So what happens is how strict equality works is it will also check it will compare the value, and it will also check the type, which means there is no type conversion that is performed. And if the values are of different types, the comparison will immediately return false. Okay? Because even though the values are same, the type is different. So that is going to fail. All right? Now, if this is six, for some reason, this is also going to give you false. For this to be true, if this is, for this to be true, this has to be of same type, and that is when you get true over here. All right. Now, keep this thing in mind, all right, this equality, strict equality like this thing over here, the implicit conversion over here or the automatic conversion over here from string to number. Okay, keep these things in mind because when you are doing whenever you're writing actual Jascript programs, actual Ja script code, then you will be making use of these comparison operators a lot within the conditions, and that is where this would matter, right? So this is strict equality. Remember, strict equality is strict. All right? The name says it's strict, and it checks for type as well as the value. So if the type is same over here because both are string, if I change the value, see this is false now. Okay? So I hope this is making sense. Okay, what is strict equality? And equality is not strict, okay? Because there's no strict in its name. So it's actually going to see the value. And if the values of different type, it will convert. I will do a conversion, and then it will display the result, right? So that's the difference between two. Then you have inequality. Now, inequality is pretty straightforward. Okay. So I'll give you an example. Okay? I won't create variables, but I'll straightaway give you an example over here. So is five equal to three? What do you think would be the output? Five is equal to three. Output would be false, of course, you see falls over here. Five is not equal to three. No equal to three, not three. I'm sorry. So if you convert this to inequality over here, o and if you save this, you'll get two as the output because this is just the reverse of equality. Okay? So here we are checking whether the values both are not equal to each other. If they are equal to each other, then this is going to result in falls over here. Right. I hope this is making sense now, okay? So this is inequality. Then you have something called as strict inequality. Now what is strict inequality? Of course, we saw a strict version of equality. This is a strict aversion of inequality. Simple. Okay. So here, if you see, okay, let me duplicate this line, okay? So if I duplicate this line, now, this is going to give us false, of course. Okay. But if this is a string, then too, this is going to give us a false. Okay? Because both are not equal to each other. Okay? Now, what happens if I switch over to strict inequality, okay? If I do something like this, you'll see this returns true. All right. Now here, of course, when we were doing in the normal inequality way, without using strict. Okay. So here what was happening is only the value was being compared and not the type. But here, the type is also being compared. So the value is same, but the type is not equal, so that is why it is returning true. That is how it works. I hope this is making sense, o? And if I duplicate this right over here, then you're going to see if I change this to five, of course. Okay, you'll see true again, okay? But if this is five now, okay, if I change this to five, something like this, you'll see falls over here. Okay. So this is strict inequality, okay? This is the strict version, and this is a loose version. So normally on the Internet, you'll see different terms used with this lose equality, lose inequality, strict equality, strict inequality. All right? Then you have greater than lessen. Okay? So greater than lesson are pretty straightforward. Let me copy these hops. Let me copy these both. Okay. I'll come over here and I'll add a I'll convert this to comments, okay? Now, let's take a look at this, okay? So this is pretty straightforward console dot log. Okay. I five greater than three. Is it? So after comparison, what this greater than operator will do is it will return a boolean results. So is five greater than three, yes. So it would return true, right? You can see true over here. Okay. Now, if I add a larger number on the right hand side. Okay? So let's say here we have seven. And if I save this, it is going to return folds because five is no longer greater than seven. This is greater than. Of course, less than is exactly the reverse of this, okay? And I'll just add less and over here. Okay, you can see the condition is now reversed. So the earlier condition is false, and then it's true because seven is greater than five. Is three greater than five? No. Sorry, I three greater than five? Yes, so it's not, actually, right? So it's less than in fact. So that is why it is giving false SE output. All right. So I hope this is making sense. Now over here, this is a version of greater than and less than, okay? So this is actually having equal to symbol in it. I will also compare for the equal to tion. If you take this example over here, if you have five on both the sides. Okay? What is the output that you can expect? You can see here you are getting output as false over here. Okay? False because both are actually equal. So this condition does not match. But if you update this equal to over here, o less than or equal to. This is going to return true. You can see. Okay. You can even make use of this over here, you can see this is returning true. Okay. So I hope this is making sense as to how this thing works, and I hope you're clear about comparison operators. So keep in mind, comparison operators will return a boolean value after performing comparison of the operants. Now, there are multiple comparison operators like equality, inequality. We have stricter version of these, which also take type into consideration because the normal version does not take type into consideration, right? Then you have greater than less than greater than equal to or less than equal to. Alright? So I hope this made sense, and I hope this was useful. 20. Logical Operators: So now it's time that we begin talking about the logical operators. Now, there are three logical operators that exist, and that is what we are going to explore. So what are logical operators, first of all? So logical operators are used to work with Pollan values, which is true and false, and they allow you to combine or invode these values, right? So there are three of them. You can see logical and which is represented using this particular symbol. You have logical or, which is represented this way, logical naught, which is represented using an exclamation. All right. So let us talk about logical and operator. Now what is logical and operator? Nine comments, I have added some points about logical and so the logical and operator checks if both the conditions are true. Okay? It works on two conditions first of all, so that is what you have to note over here. Both the conditions, meaning it is working on two conditions, and if both are true, then the output is true. Okay? So you can see it returns true only if both are true. Otherwise, it will return false. Okay? Now, if I have to demonstrate this in the form of example, I'll say console dot log over here. Okay? True. And you can make use of logical and over here and you can simply hardcode the Boolean values. Okay. I can see true as the result. Okay? Now, if I duplicate this line and if one is false over here, in this case, you'll see false as the output. So to get true out of this, both have to be true. Okay? Now, either one of them is false, it is going to result in, like, false as the output. Okay? So if I say false over here, you'll see it gets false because both are false, right? Now, if the first one is false, even though you'll get false SA output. So we are getting true only in one case when both are true. Okay? Now, this is very useful if you want to evaluate two conditions, okay? Now, these two values or two operants that we are operating on can be any sort of expression that evaluates to a boolean value. Okay? Now, let me give you an example. Let's say you're building a program, and let's say it's a website that is for managing a concert. Okay? So imagine for logging in to the concert, you need to have both your tickets and the ID. Okay? So what I will do is over here, I will have example written over here. Okay. Example. Okay. Now, let's say we have has tickets as one of the Boolean variables. Okay. Let's say it's initial value is true. Okay. And let's say I have one more variable which is has ID. So whether the user has ID or not, and whether the user has tickets or not, that is what this is helping us keep track of, right? Now, I'll say console dot log over here. Okay. I want to have a mandate that the user should have both of them. So if there is a mandate, both the conditions should be true or if both things should exist for the expression to be valued to true, that is when you make use of and operate over here. So I'm going to say has tickets, and has ID. And I'm going to save this. Now you're going to see true as C output over here because both are true. Now, if either one of them is false, so let me update has ID to that of falls over here. Okay? I'll say it does not have ID, let's say, and I'll print the result again. So you'll see fals over here. Okay? So this is how it works. Now here we are making use of variables, okay? Now, this can be any sort of expression over here. Okay? This can be any sort of expression that evaluates, of course, to A Pollan value. Okay? If I have to give you an example, Okay, let's say here instead of having this has tickets, let's say I have five, greater than three. Okay. Is five greater than three? Yes. Okay. And let's say if I have one more example over here or one more expression over here, five greater than six. Is five greater than six? Absolutely not. Okay? So this is going to give false as A output because this second expression is returning false. And if I save this, you'll see false as A output. Okay? So this is how logical and can be used in expressions and complex decision making. All right. Now, when you start writing complex programs, of course, you'll be making use of these logical operators a lot. Okay? So it's best to understand the concept. Logical and we are done, what is logical and to summarize logical and we'll check if both the conditions are true, it operates on two boolean values as the operates, and those boolean values can be derived from the expressions as well. Okay? Now, this is about a logical. Now, let's talk about logical. Now what is logical or? I'll add some comment for here as the definition of logical or so the logical operator or operator, okay, the logical or operator says it will check if at least one condition is true, okay? So the operan that it is working on, at least one should be true for it to return true. So and was very strict, okay, and said that both should be true. But O is a little bit lenient. It says at least one condition should be true, and I'm okay with that, okay? So it returns true if at least one of the condition is true. If both are false, it returns false. All right. Now to demonstrate this, I'm going to copy this example over here, this typing that I've done. Okay, and we'll replace everything with or over here. Now, is essentially two pipe symbols. You can see this pipe symbols. I'll add this Oops Okay, and this is done. Now, this first thing, this will give true. This will also gift true. This will also gift true. Now, these three statements will give us true because at least one of the oprint is true here in this case. And this is going to give us false because both are false. Okay? So if I save this, you'll see, true, true, true, and then it is giving us false. Now, how can this be used? So imagine you're building a program, which is helping you decide whether you should play outside or not. Okay? And let's say you will go to play outside either if it's sunny or if you have a raincoat. A very simple example. Okay? Now, we are making use of or operate over here because this statement says I can play outside if it's either sunny or if I have a raincoat, right? It's not saying if the weather is sunny and I have a raincoat. If it says and, only then we'll make use of an operator. But right now it's saying either. So of course, the choice is the logical operator. So I'm going to say let over here is sunny. Okay. Is it sunny outside? I'm going to say falso, and sorry, not is has raincoat. Okay. Then I'm going to say true over here, something like this. Okay. And I'm going to do a console dot log over here. Okay. And I'm going to say is sunny and as raincoat. Okay, pretty simple. What would be the output? The output should be true. I can go to play because the condition was either it has to be sunny or either I need to have the raincoat. So the output is true. Okay, here, I can see if I change the value of has raincoat, let's say, to that of false. So now I don't have now there is no raincoat and it's not even sunny. In that case, it is going to return false. Okay? So in case of decision making, this is going to be used a lot, right? I hope this is fun. The third logical operator that we have we should talk about is logical naught. Now, logical naught operator inverts the value of a boolean of a boolean, essentially. So if it's true, it'll change it to false, and if it's false, it will change it to true, like the statement says. Okay? Let us test this. So if I say console dot log over here. Okay. Now, if I say true over here, it is going to print in true, as you can see, right? It is going to print in true. But let's say I want to print I want to invert this using logical operator, so this is going to say false over here, okay? Another question is why would you want to make use of this no operator? What are the use cases? I'll give you an example, right? There are plenty of scenarios in which this operator can be used. So let's say you want to stay inside if it's not raining, o and you want to go out if it's raining. Let's say there is something that is a decision you want to make, okay? And I'll have let is raining because everything depends on rain, right? My decision. So I'll create a variable. I'll assign it to Boolean value. Okay? And I'll say let should stay inside. Okay, something like this. Now, the value of this would be not is raining. Something like this. Okay. And I can have console dot log, and I should stay inside. Okay? So is it raining? No, it's not because this value is false. So should I stay inside? Yes, you should. You can see. Now, if it's raining over here. Should you stay inside? No. You can see. So this is how boolean nought logical knot, I should say. Logical knot operator works, right, and it works in a way which helps you reverse a particular condition. This is also used a lot in decision making, and as you start writing Ja Script code, you'll see multiple use cases of this. Alright? Now, this is about knot operator. I also want to highlight one more concept over here. Now, the concept is about boolean expressions. So what are boolean expressions? A boolean expression is an expression that evaluates to a boolean value. Okay? So if you scroll up over here. Okay, this is a boolean expression. Okay. You have this as a Boolean expression, as a boolean expression. This entire thing is a boolean expression because it is valuating to a single boolean value, right? So these all are boolean expressions that are constructed using logical and or and not operators. All right. So I hope you've been able to follow along, and I hope this was useful. 21. Ternary Operators: So now it's time that we start talking about ternary operator. Now what is ternary operator? So you can see over here conditional operator. So it's a very shorthand way of making quick decisions or choosing between two values, okay? And here you can see this is it's syntax. So let me demonstrate this with the help of an example, ok? So let's say I have a variable. Let's say, let's call it X, all right. So X has a value of ten. Okay? And let's say I have a Pullen expression. Okay? So I can say pollen over here and let me not create a Pollan expression. I'll straightaway have a message over here. Okay? So let's say if X is greater than five, I want to print, X is greater than five, se, I want to print X is not greater than five, right? So what I would do is I would I would have a condition over here, okay? We'll follow the same syntax. Okay? I'll copy this. Okay, what is the condition? Condition is X greater than five. That is what we are checking for, right? So if X is greater than five, this part says, if this condition is true, then this will be evaluated or this will be used. If this condition is false, then this will be worked on. Or this will be used. Okay? Whatever it is there over here. Okay? So condition is something that we have added over here. Condition is added. What is value one? If X is greater than five, I wanted to print a message. X is greater than five, okay for now. And if it's false, I'll have X is less than five, something like this. Oops. So yeah. Okay. And what I will do is I'll say console dot log and I'll print in message over here. Okay. Now what do you think would be the output? X is ten, so it should be X is greater than five. If I save this, you'll see X is greater than five. Okay? Now, if the value of X reduces to that of four, you'll see X is less than five. Okay? So we are making decisions over here, okay? We are Altstspace over here. We're making decisions over here with the help of the ternary operator. Okay. Now here, in this entire expression, I don't need this to be enclosed within a pair of round braces. So you can see over here, this is also fine. But it's normally a good practice to have the condition that you're writing in a parenthesis or I should say, round brackets over here. Okay? If you save this, you'll see this is the output and the output is not impacted. All right. Now here, instead of an expression a boolean expression, you can even have a value that is boolean. Okay. So I can simply type in true over here and you can see this is X is greater than five. And if I say false over here, you see X is less than five. Okay? I'll just do Control set and we'll bring back our pollen expression that we had. Okay? So this is what ternary operator is. So if the condition is true, value the true value is returned. This is true value. And if the condition is false, then this is returned. Okay? And all of this resides between a question mark and a colon. You can see the syntax over here. Okay. So yeah, this is what a ternary operator is. Now, let me give you one example. Okay. Let us write a simple program that will check if the value is boolean or not or sorry, not a boolean. O value is even or not, or a number is even or not. All right. So that is where we can make use of the ternary operator. So let's say I have this number four. Okay. And what I would do is I would have result over here. Now, what is result? Okay, so result actually will have the remainder after division by two. Okay? So what is an even number? Even number is a number that is divisible by two, right? So I'm simply going to say number over here. Okay? Percentage two is equal to zero. And I'm making use of strict equality. Okay? So this becomes now a boolean over here. Okay? I'm not storing remainder over here now. I'm just storing a boolean value, which is the result of this expression. Okay? And 1 second. So here, I can say let EX P over here. Okay? This is what it is. Okay. And now, what I can do is I can say if EXP is true, then you can give the output as even, or you can give the output as odd, something like this. And you can save this and the should return. Okay, we are not printing result over here, so I need to print result as well. Oops, I need to take this on a new line, right, and I need to bring in result. Now the output is even, and if this is five over here, for example, the output would be odd. Okay? Now, instead of having EXP as a variable, you can actually cut this entire expression over here and you can actually bring it over here. Okay, this is also doable. I'll get rid of this. Okay. Now this is doable. All right. You can see how this output output is working fine. Okay? So yeah, this is what the program is. We are actually evaluating whether the number is true or not. Okay? So decision making is really important part of program. You know, let's say if you're building an ecommerce store and if you want a discount to be applicable only to some privileged members. So you can have this kind of decision making. If in member is privileged, then this is a discount value. If it's not, then this is a discount value. So all these kind of decision making form a large part of your Jascript programming, and not just jaw script, any programming. Okay, decision making is all about this, okay? So I hope you're clear about conditional operator or ternary operator, I should say, it is also known as conditional operator, by the way, okay, at some places, but I prefer calling it ternary. Alright? Now, one more thing I want to talk about over here regarding ternary is you can even have nested ternary operator, okay? So what is nested ternary operator, okay? So I'll add an example over here. So let's say if we are building an application and we want to evaluate age at multiple levels. Okay? So if the age is less than 13, okay, we say that the person is a child. Okay? If the age is less than 20, Okay, then we say the person is a teenager, o. And if the age is less than you can say or greater than 20. Okay, we say that he's an adult. Okay. So here, actually, this won't be less than 20, but this will be 13-20. Okay? So if the age is 13-20, he's a teenager, and if the age is greater than 20, he's an adult. How would you do this with the help of Turnary operator? Let me show you. Okay? So first, I'll say let age is equal to, I'll have a value of age. Let's say it's 16. Okay? Now, what is the syntax of the ternary operator? This is a syntax. I'll get the syntax, okay? And I'll have so we'll call this as categorization, child, teenager, adult. Okay? So I'll say category over here is equal to, and this is syntax. So the first condition is age less than 13, right? So age is less than 13, it's better to have this in round brackets. I'll do that. If age is less than 13, what do we say? We call this as a child over here. Okay. So this is a child, right? Now, I'll just turn this gaps and this is T. Okay? Now, what is value two? Okay? Value two, instead of value two, you can actually start another ternary operator over here. Okay. Let me show you how. So here, you can say, another condition over here, I age less than 20. So one thing is confirmed that if you are executing this part of the code, he's not less than 13, right? That part is confirmed, correct? If this part is executed, then he's lesser than 13, right? So what you would do is you would come over here, falls if his age is greater than 13, you would check if it's less than 20. Is it less than 20? If it's less than 20, then you say he is a teenager. Something like this. And if it's not, you would say he's an adult. Understood. This is making sense, let me see if I can bring this on a new line. So this is now readable in a single co. Let me show the category over here. Okay. Okay, so I'll add the category here. Okay? Now, the age is 16, so you can see he's a teenager. Okay. Let me make the age as ten. He's a child. Let me make age as 22. He's a adult. How's this working? So we are first checking for the age over here. If the age is lesser than 13, okay? He's a child. Okay? And if this is false, if age is greater than 13, then we are checking is the age less than 20 or greater than 20? Okay? Because now this condition is done, right? This is false. So if it's coming in the falls bracket, we are checking if he's greater than 20 or less than 20. If he's less than 20, we say teenager, if he's not, we are saying he's an adult. That's how it works. And this example over here is an example of nested ternary operator. You can go on nesting over here also. He also you can add one more ternary operator, and you can just keep on doing that right. But it's not a good practice to nest a lot of ternary operators. One or two is fine, okay? One is fine. In fact, I would say this is okay. All right. But beyond this, I would say it's not readable and it's not a good practice. All right. But yeah, this is about ternary operators or conditional operators, and I hope you are clear. Ternary operators helps us evaluate conditions and perform some actions in our code. So I hope you have been able to follow along, and I hope this was useful. 22. Arrays in JavaScript: All right. So now it's time that we talk about one of the interesting topics called arrays. Now, there will be scenarios when you are writing programs wherein you want to just not store a single value, but instead, you want to store multiple values of similar thing, okay? Now, let me give you an example. You can create a variable to store one student information. For example, you can create a variable called roll number to store a student's role number. What if you want to store thousand students role number? Are you going to create 1,000 variables? Absolutely not. And that is when you can create arrays. So arrays allow you to store multiple values in a single variable, okay? And you can create arrays with the help of square brackets like this. So we're going to talk a lot more about arrays. So let me create an array for you. I'll create array called number. Numbers over here and I'm going to have one, two, three, and four over here. Okay. And you can print it this way. Okay. You can say numbers. Okay. This is going to give you the output as one, two, three, four. Now, you can even create arrays on the console directly. This is a JavaScript console. So you can say num is equal to I can add this. Okay. And you can print in Num over here, something like this, you can see, right? So this is also a way to do, okay, but we'll stick to visual studio code. Now this is how you can create numbers Okay, numbers array. And you can even create an array of strings. So I can say let fruits. Let's take an example of fruits, and you can have apples, or you can have a banana. You can have orange. Allright. And you can choose to Console Lock over here. Okay. So I'll do Console Log and I'll print fruits. Oops. And I'll save this, you can see, like the output over here. Now, the thing is you have created arrays, and creating arrays is relatively simple, right? Now, how do you access elements in an array? All right? Now, if you're having these many elements, okay? This is a list of elements in the array. Now, I want to mention over here that the elements in arrays can be accessed with the help of something called as an index. Okay? So index, meaning the position of the element. So one is at position zero, because the indexes are beginning from zero always. Okay? So you have zero, one, two, and then you have three in array. Okay? Now, how can you make use of these indexes or position? It's actually position, right, that starts from zero Okay, they are zero it follows zero Beast indexing is what they call, okay. But the question is, okay, this is the position, this is the index that I have, all right? How do I make use of it? So you can say Console dot log over here. Okay? And let's say if I want to access numbers, and I want to access the number at position or index three, ok? So you can see four being printed. Okay? I can have it fruits. I can save it. Okay, so there's no fruit at position number three because 01 and two. Okay, so that's why we are getting undefined, but you can have one over here and you'll see panana over here. Okay? So JavaScript has a zero based indexing, and this is common for a lot of programming languages out there. If you're coming in from Java, you will be aware of the indexing over here. Okay. You can even modify the array elements using indexes. Okay? So for example, like I showed you, you can access the elements in the array using indexes. So you can say fruits and let's say the fruit at index one, I wish to have instead of banana, I wish to have cherry, let's say, for example. Okay. And then if you try to print it over here, you're going to see cherry as the output. You can see. So we have modified the element at the first index over here, which is the second position in the array. Okay? So this is about array. You can even have a can even have array within an array. So you can create a sort of matrix over here. So I can say matrix. Let's call it matrix itself. You create array with the up of square brackets, right. Now within this, you're going to have square brackets again and you can say one, two, three. You can have one more four sorry, four, five, six, Okay. And you can have six or seven, sorry, not six. It should be seven, eight and nine. Okay. And you can print this. Okay, we're getting an error, cannot read, okay? Okay, it's probably because I've missed a comma, so this has to be comma separated, and you can see the issue went away. So don't forget the comma if you're trying to create inestd array and you can print in matrix over here, something like this. And you'll see the output here. Okay? So you can see, it's array of arrays. So you can print it this way, zero. And you'll see, like the array at the first index being printed. You can even print the first element. So you can use something like this, double indexing, and you can get one over here. Okay. If you say one, oops, not Q one, you'll see two being printed. Okay? So this is 00, zero comma one, zero comma two. Okay? So this zero first is representing the row, and this is representing the column. All right. So this will be two comma two. All right. I hope this is making sense. All right. So this is how you can make use of nested arrays or this is also known as multidimensional arrays. Now, let's talk about some methods that are provided to us when we are working with arrays. Now, let us talk about some of the methods that are available for developers like us to make better use of arrays in JavaScript, right? So you can see there are multiple methods like push which is used to add an element at the end of the array, pop, which is used to remove the last element, shift, which is used to remove the forced element, and shift, which can be used to add element into the beginning of the array. Slice that copies a portion of an array, and then we have slice that can add or remove the elements at the specific index. So let's take a look at each one of them individually, right? So we'll begin with push over here. Okay, so push. Okay. Now what is push? It says that it adds an element to the end. All right. Now, before we talk about push, let me also remind you of an interesting property over here that array has, which is of length. Okay? So you can get a length of the array and Ja script over here like this. You can see three being printed, which means fruits has three elements in it. Okay? You can see it has three elements. Alright. So now, if you want to push an element into an array, what you can do is you can say fruits, dot, push, Okay I can push any element over here. Okay, I can say orange, probably. Okay, like this. Okay. And I can say console dot log over here, and I can say fruits. Okay. Now, if you print this, you'll see apple, cherry, orange, orange. Orange has been added twice over here. Okay? If I add banana over here, you'll see apple, cherry, orange, banana. That is what it is. Okay. So you're pushing an element into the end of the array. And if you take the length over here of the array, after pushing the element, the length is now four. Earlier, it was three. All right. So this tells us that the arrays in JavaScript are dynamic, right? You can add and remove elements and size of the array can change dynamically. Okay? And length is an amazing property that can help us get the length of the array. Okay? So this is about push. It's pretty simple. It is used to push an element into the end of the array. All right? That is what this says. Then we have pop. Now what is pop? All right. So the definition says removes the last element, right. So now let's see how it helps us remove the last element. Okay? So I can say, I'll copy this console dot log over here. And before console dot log, I'll say fruits, dot, I can say pop over here. Okay. And earlier, it had four elements. Now it'll have three. So you can see apple, cherry, and orange. Okay? You can even get this element that is popped into a variable, so you can say last fruit, for example. Okay. And you can even print the last fruit that you got, okay? That is also possible. So it is possible to catch the last element. You can see apple, cherry, orange, and you got banana as the last fruit over here. You can see the definition over here, removes the last element from the array and returns it. Okay? So it is also returning. If the array is empty, undefined is returned and the array is not modified. Okay? So this is about pop, and the next thing you have is shift. Now what is shift? All right? So shift removes the forced element. Okay? So like pop removes the last element, it removes the forced element. So I'll just get this over here. Okay, or I'll just get this part over here. Okay. And this thing I'll comment for now and you can say shift over here. Now if you run this, you'll see Apple was first. Now you have only two cherry and orange. Okay? You can even get the first fruit over here. Like we got the last fruit, let first fruit over here. Okay, something like this. And let me print first fruit, okay, over here. See apple is the first fruit. All right. So like pop returns, the last element, shift if you hover on this, it removes the first element and it also returns it. That is what shift does. Alright. Then you have something called as unshift away, which is used to add an element into the beginning. Okay? So let me get this method here. Okay. Let's shift. You come over here and let us experience unhefto here. Okay? So what I can do is let's say I have fruits. Now, this is what fruits contain, okay? What I can do is I can say fruits dot and shift, and I can add, let's say, I can add Apple. Apple again, something like that. Okay. And let's print. Let us do a console log. You can see apple again being added. Okay? So earlier, we had apple which was removed, Okay? And then we have Apple again. You can see? Over here. Okay? So this is added unshifted has added this particular element into the beginning over here, okay? And you can see inserts a new element in the start of the array and returns the new length of the array. So it is actually returning the new length of the array. Okay? If you want, you can say new length over here. Okay. And you can say Console, dot log over here, and you can print in new length, something like this. Okay. You'll see the new length of the array. Okay, over here. Earlier, it was a length of two. Now it has length of three. All right. So this is unshift. Now the next thing we have is slice. Now slice copies a portion of the array. Let us take a look at what this means, okay? So this is slice for us, all right. Now, let's say we have an array. Okay, so this is the array of four elements. All right. Let me like slice this, okay? So let's say if I want to slice the elements from index one to two, so from cherry to orange, okay? Because there is three elements, not four, okay? So let me get an array of four element over here. Okay? So I can actually re declare this array over here, recreate or let me see. Okay, your orange, I can see cherry or strawberry, something like this. Okay. So now we have elements an array with four elements. All right. What I can do is I can actually have let, I can have sliced array, and I can say fruits dot. I can say, so here you can see, S. If you type in S, you have slice. We'll make use of slice one comma three. Okay. And you can say console dot log over here and you can say sliced array. Oops. So it's saying, Okay, this has already been declared and we cannot use it again. So I can say new fruits over here. Okay. I should have used the new name, all right. New fruits, new fruits, and I'll save this and you can see banana orange. All right. So this is index one, and then this is index two, and you can see how it's sliced from here. Okay? So this is copying the element from index one to two. That is what it's happening. Okay? So we are seeing one comma three. So what it's doing is 1-2 over here, okay? These both are being sliced in. All right. And if you hover on this, you'll see it returns a copy of a section of an array for both start and end. And negative index can be used to indicate an offset from the end of the array. So minus two, if you say minus two, refers to the second to the last element of the array. Okay? Which means second to the last. So minus two will be orange over here. Okay? It's a second last. All right. So that is how slice can be used. It is used to slice an array essentially. And then you have slice over here, which can be used to remove or add an element at a specific index. Okay? So let me try this slice over here. Okay. Now you have fruits over here. So what I'm going to do is I'm going to say fruits dot, splice over here. Okay. And what we are going to do is we are going to remove one element at index one. Okay? So you can say one element. Okay? So if you hover on this, you'll see some documentation. Okay. So it accepts a few parameters. Start how many values you want to delete, Okay, and string over here. So you can see start means the zero base location in an array from which you want to start removing elements. Delete counts means how many elements you want to remove from this number. So if you say from position one, I want to remove two, so you need to add one comma two over here, something like that. I'll remove two elements from position one, ok? And the third thing, it returns an element containing this is what it's returning. It returns the array containing the elements that were deleted. Okay? So let us try this over here. So what I would do is here, I would say console dot log over here first, and I'll print in fruits. Okay? Now, we're removing two elements, starting from position one, okay? So if I save this, you'll see Apple again only being printed. Okay? So this is array that we had. So we're removing two elements, starting from position one. Okay, so you can see it had Apple again and cherry and orange. So only Apple again is left because two elements from position one means both the elements are removed in the end. Okay? Now, the documentation said that it returns an array containing the elements that were deleted. Okay? So you can actually get them. You can say let deleted items over here. Okay. And I can print deleted items, essentially over here. Okay? So I can say deleted items. Oops over here, and I can save this and you can see, these were the items that were deleted over here. Okay? Now, what magic is after deleting we've used slice to delete the element. Okay. Now, this can also be used to delete as well as add elements at the same time. Now if I specify an element over here. Okay, you can see items. So these are elements to insert into the array in the place of deleted items. You can see this automatically popped up. So you start you had delete count, and now you have a list of items. So I can say new item over here, and I can save this and you'll see new item added. Okay. Let me add one more item over here. Okay. I can add new item again. And you'll see in place of the deleted items, you can even add new items with the help of slice. You can see. This is how it works, splice basically, and it's helpful essentially to modify the array as per your requirements. All right? These are some of the methods that you have access to. I hope you have been able to follow along and I hope this was useful. 23. Objects in JavaScript: Now it's time that we begin talking about objects. Now, what are objects? So objects in JavaScript allow you to group related data and even functions together. Yes, we're coming to functions part. But for now, we'll be talking about the data part. So objects allow you to group related data and functions together. An object is created using a pair of curly breezes. So if you have to create an object, you'd create something like this. You would say let, let's say, if I want to store some data related to a person, right? So I can say person over here, I can have a pair of curly breezes like this, and then I could have key value pairs in it, where each key is also known as property and has a value associated with it. All right. So I can say what would a person have? So a person can have a lot of information, okay? So let's say I'm building a program and I want to store person's information. So either I can create multiple variables, like I can say let person one, and I can say age person one name. Then for person two, I can say person two, each, and so on, but this is not the ideal way to go about it, right? So instead, what you would want to do is you would want to have an object where you can group related data to a particular person. So for person one, I could say name, and I could have name as Alice, for example, o, I could have H and each can be 25. Okay? Now, make a note over here. This is a string over here, right? This is a string. This is not a number. This is a number over here, and I can also have Boolean over here. So I can say is person a student and I can say true falls over here. Okay. So make a note that you can have data of multiple types over here. Okay. So coming back over here, an object is created using a pair of query phrases like we're doing over here, it contains key value pairs. So this is a key, and this is a value. Okay? We each key is also called a property. So this is also a property of the object. So person has three properties, which is name. You can see if you hover on this, it says property over here, okay? And it's called name and the data type is string. If you hover on this, if I hover on this, it's property H and the type is number. If you hover over here, property is student and it's boolean. And if you hover on this, you can see the entire definition of person, right? And you would see data type over here instead of the values. All right. So each key is called a property and it has a associated value with it, right? So this is what we have done by creating a person. And of course, to print it over here, you can print it something like this as well. Alright? And you'll see this being printed onto the console. All right? Now, there are multiple ways in which you can access the object properties. All right. So here we are printing the entire object over here, right? But if you want to access specific property, you can even do that, and there are multiple ways for doing that. Let's say I can say console dot log. Now you can make use of something called as dot notation. So person dot age over here. So we're printing H as 25. This is one way of doing things. Another way is I'll duplicate this another way is you make use of this kind of syntax. Like you have square brackets, and within this, you have the name of the property. You can see. And then you can even access it this way and you'll see the output onto the console. All right. So these are the two ways in which you can access properties of objects in JavaScript. Now the thing is, if you take a look at source code online, you'll see majority of the time, this is what is being used, okay? Like anywhere in your production grade application, in your workplace or anywhere any sort of source code that you read about online, you'll see like this is the convention that is being used at multiple places. This is very rare, and the obvious reason for this is this is not that easy to look and even to type, right? So this is much more easy the dot notation one, and that is why this is being used commonly. All right? Now, we spoke about creating an object. We spoke about accessing properties. You can even add or update the properties. Okay? Now, let us talk about update first. So first, we'll update the age. So you can see person dot H is equal to let's say 66 over here. Okay? And then if you print in this over here, and if you save, you'll see the person age is being updated to 66. And even if I print in the entire object, you'll see it has 66 as a value that it's holding. All right? Now, this is about updating. This is how you update. It's pretty simple. You make use of dot notation or you can even make use of this kind of a syntax over here with the square brackets, and you can update the property by assigning it in new value. Now, how would you add in new property? Let's say I want to add in new property wherein I wish to store the job of the person. So I can say person dot job over here, and I can say engineer. Something like this. All right. And I can print in this object over here. And now if you print in, you will see it has a new property in it called JOB. So this property, first of all, did not exist when we created person, you can see. It did not exist. It had only three properties, name, age, and student, you can see, right? But then later on, what we did is we added a property which said person dot JOB. And we assigned it a value called engineer. Adding a new property is as easy as accessing that new property using dot notation. So if you add any new property name using dot notation, you can assign it to value and that will be added into the object over here. Okay? You can even access it using the dot notation if you wish to over here, like you are accessing the other properties. You can see engine over here. All right. So this all is the possibility over here with or when you want to create or when you want to add or update the properties. All right? Now, you can add a property into an object. You can even delete a property. How would you do that? So let's take a look at deleting properties. Okay? Let's say I wish to delete, I wish to delete is student over here. Okay? So right now, I can make use of Dell keyword, delete keyword, sorry, not tell. It's delete keyword. You can see in order suggest, you can see person taught and you'll have the list of properties over here. Which one do you want to delete? I want to delete is student? Okay. And then if you try to access is student over here, and if you save it, you'll see it gets undefined. All right. And if you just print in the person, you won't see is student as a part of this. You can see earlier is student was there in this particular object, but then later on, you don't have his person over here. So that property is actually being deleted with the help of delete keyword. All right. So it's possible to add properties dynamically after the object is created, and also you can delete the properties after the object has been created. So that all is possible, all right? Now, it is also possible to check if a particular property actually exist in a given object, all right? Now, there will be scenarios, of course, wherein you might want to update a property if that property exist. So let's say if job exist in this person, then you might want to update the job. If you don't add that check, then what would happen is if job does not exist in person, it would be added, it would be newly created, and you don't want that to happen. You want to update only if it exists. Okay? So first thing, what we can do is, okay, check 1 second. We'll check if property exist. Okay? How do you do so? So I'll just scroll down over here. Okay. And I would say, console dot log, and I can see name in person. Okay? Now, this is going to result in a Boolean value. You can see true over here. Why is it giving true? Because name actually exists in person. You can see we've added name over here. If you take a look at the previous console dot log statements, you'll find name being present. Okay? This is one way to check it. There is one more way, so you can say console dot log over here. Okay. And you can say person, dot and you can say has own property, something like this, and then you can say age over here. Okay. You'll again get true over here, okay? So this has owned property determines, you can see the documentation over here, determines whether an object has a property with the specified name, all right? Now, if I change this to age one, if I change this to name one over here. Of course, these two don't exist. So if I save this, you're going to get false over here, right? Because these two does not exist. I'll just do Control Z over here and I'll save it so that I get true printed onto the console. All right? Now, this is really useful. Like I said, if you want to perform updation of properties, depending on whether the property exists or not into an object, you can make use of any of these syntax, okay? And you normally use this with conditional statements, and if it's true, you then probably would update the property. Right? And this in thing over here that you're seeing is an operator over here. Okay? And with the help of this, it allows you to check, essentially, you're seeing what is the use case of in over here. All right. So yeah, this is about checking if the property exists. Now, there is something called a nested objects, okay? Which means an object can contain another object as well or other objects as well. Now over here, the object definition that we saw, object has key value pairs, right? It does not have something nested into it. So there will be scenarios wherein you might want to store some sort of complex data, wherein you might want to have an object within an object, right? Now, let me give you an example. Let's say you are creating objects to keep a track of students, and let's say you have an online academy that you're building wherein a student enrolls into courses. So what you would do is you would have student over here. Okay? I would have an object to store student information, and I would have name of the student. What's the name? Name is let's say pop over here. Okay. Now I want to have a list of courses that student has enrolled in. So I can say courses over here. Okay. And within this, this course is an object because it is going to be a list, right? So you can have mat over here. Okay. Now, here you can say true Okay. You can have signs. You can have falls over here and so on. All right. Now, if you wish to print in this, so you can say Console dot Log, and you can see student over here. Something like this. So you can see name and then courses is again nested over here, which you can expand name and sign. Sorry, maths and science over here. All right. Now the question is, you have an object within an object. It's nested object, right? How would you access the property math? So let me show that to you as well. All right. So over here, you have student. You can say student dot, and you can see suggestion. So name if you want to access age, of course, you can make use of dot over here. Okay, age does not exist. So I can make use of name over here and you'll get access to pop. Okay. Now, if you want to access courses, you can say courses over here, straight away, and you'll get access to this Jason, which is the nested object over here. You can see math, true. Science is false. All right. And if you want to get access to any one of these properties, you can go you can make use of dot notation further and you can say math over here and you'll get true. Okay? So you can chain these dot notations in this way. You can say student dot courses dot math. Okay? So you are saying student dot courses, dot math over here. All right. And it's giving you the output as true. All right? Now, like the outer object, inner object can also have properties with different data types. Right now we are making use of Boolean. Of course, you can store strings. You can have numbers. All right. It's totally up to you as what you want to store, and it's totally based on your requirements as well. All right. So I hope this is making sense. So that's about objects. And before closing, I want to show you one interesting thing when you're working with object, which is known as object D structuring. Structuring. All right. So what is object D structuring? Now, object D structuring is a concept or a convenient way, I should say, to extract multiple properties from an object and assign them into variables. Now, take a look at this object over here. It has multiple properties, right? Any object that you create in JavaScript is going to have multiple properties. So there will be times wherein you might want to extract these properties and assign them to individual variables. Now, that is possible using object destructuring. So we have an object over here. Let's try it on this. So you have two properties like name and courses. All right. What I'm going to do is I want name I want to have a variable called name over here, which will have name value over here for this object, and courses will have the courses value. Okay? So what I'm going to do is I'm going to say let. I'm going to make use of this kind of syntax over here. I'm going to say name and courses over here. Okay? And then I'm going to assign it student. All right. What do you think would happen? This is absolutely valid over here. Okay. But what is actually happening over here is this object is actually broken down and the properties are being assigned. The value of properties are being assigned to these variables. All right. So if I want to print in Console dot log over here, and I can say name. You'll see name being printed as Bob over here. Okay, which is actually the name you have assigned, and then you can have instead of name, you can have courses and you can save this, you'll see the output over here. Okay. So I hope this is making sense. Now, if you change the variable name from name to name two over here, let's say, for example, if you save this, you'll see name is undefined. Now. Why is it undefined? Because in order for destructuring to work perfectly, so name should get assigned to name over here, then this name has to be actually match the name of the name inside this property inside this object, I'm sorry. Okay. So for example, if I change the name of courses to courses too, for example, you'll see it's undefined. Okay, so the name has to be similar to that of the property. The name of the variable has to be same as that of the property for destructuring to work. If you skip any of the variables over here, if I skip courses, you'll see courses is not destructured. All right. So, yeah, that's what object destructuring is. And this is all about objects in Jascript. And I hope this video will help you understand any code that you see, which is making use of Jascript objects in future. Good luck. 24. Type Conversion: So now it's time that we talk about type conversion in JavaScript. Now what is type conversion, first of all? So whenever you create a variable, you store values in it. The variable has a type, right? So either you might store a string, a boolean or a number, right? Now, type conversion is a process wherein you convert a value from one type to another. Okay? So if you're converting string to numbers, numbers to string, that is what is known as type conversion. Now, one thing you need to know is which you already know, of course, JavaScript is a loosely typed language, which means that you don't need to declare the type of a variable, right? And the type of the variable can change dynamically depending on what values you are storing. Okay. Another thing is JavaScript supports implicit and explicit conversion. So what implicit means is implicit conversion is a type where in JavaScript itself automatically converts the value from one type to another. An explicit is where you as a programmer are instructing to convert a value from one type to another. All right? So let's take a look at type conversion. Now, let me give you an example over here. So let's say I'll have X, o and let's say I'll have five plus one. Okay. Now I'll do console dot log over here. Okay. And I'll print the value of X. All right. I'll also do Console dot log over here. Okay, and I'll say type off. I'll say X over here. If I save this, you'll see the output is six, of course, and the output is also number because this is holding the value of type number. Now, let me experiment a little bit, right? Now, let's say I convert this value five into that of a string by adding single code. You can even add double codes. That's absolutely okay. What do you think will be the output? Will it be six? And if you think it's six, then what do you think this will give us an output? What will be the output of type of operator here? If I save this, you'll see the output is 51, and then you have string over here. Okay? So what is happening over here is you have five, which is a string, you have plus operator. You're making use of plus operator on two opernts. So one opernt is a string, and other opernt is in number. So what happens is, this is not a valid addition, right? So what JavaScript implicitly or internally does is, it converts one into a string. Okay? So then it becomes so this equation becomes p, essentially. I have five over here plus one over here in this form. Okay? So what is five plus one over here? In this case? It becomes 51 because both of them are string, right? And a string concatenation is being performed. So if you have let or if I say console dot log over here, and if I say hi, okay over here, plus hello. So I'm going to get output as high hello because a string concatenation is being performed over here. Okay? That is how plus operator behaves with strings. And with respect to numbers, it is going to add those two numbers. Okay? So this is an example of implicit type conversion. All right? I'll just comment this out. Okay? Now, let me give you another example, okay? So let's say I have example two over here, okay? And let me call this as example one over here, okay? So, something like this. Okay? Oops, something. Okay, so this statement is not yet complete. That's why I'm getting an error. Okay? So let's say example two. What is example two, instead of having five as a string plus one. Okay? So let me have this as an integer first. So I'll have minus five minus one. Okay. I'll copy these two lines of statement. I'll piece them over here. And this becomes example two, of course. Okay? This is also two. Now, if I save this, you'll see the output is four because five minus one is, of course, four, and the output is number over here, as a result of the type of operator. Okay? That is what you see. So now let me change this two. A string. Now, what do you think would be the output? Okay? Because here, if you change this string, this became 51, right? You can see it's printing 51. What do you think will be the output over here, okay? Any guesses? So if I save this, the output is still four and the type of example two is still a number. Now why is this so? So here, if you're making use of plus operator, okay, this was converted. This was ASIS, and this was converted into a string, actually, and the output as a result was a string. You can see the output over here. But in case of minus, this changed, right? This is not it's not how it's behaving when you used plus with the sea orprins, right? So the behavior, the answer to this is the behavior of plus and minus operators with strings and numbers are different, and that is why you are seeing a behavior change in the output. So let me explain this. When you make use of plus operators with strings, all right? With strings, there is an option for JavaScript to do concatenation. Okay? JavaScript can do concatenation with strings and JavaScript can do addition when plus operator is used with numbers. Okay? So if you're using this with numbers, it knows, okay, I have to perform an addition. If you're using this with strings, it knows I have to perform a concatenation. But when you are making use of mixed type, what it will do is it will convert number to string. Okay? Now, in this case, minus does not have a role or a behavior when used with strings. Can you print in high minus hello? Okay? That does not make any sense, right? So here, since this converting one to string did not make any sense, what Ja Script did is it converted five to number, right? And it gave you the arithmetic operation as a result, which is four, and the type of the final output was also four over. Okay. And this is something similar. And this is how it'll work if you're making use of multiplication as well, right? So let me show that to you as well. Okay? So I'm going to just duplicate this over here. This is our example three, example three, and example three, and I have five into one. What do you think will be the output? Does string like five in string multiplied by one in string make sense? No. So of course, this is going to be number. Okay. So yeah, this is how things work. And as you can imagine, internally, JavaScript is doing an implicit conversion over here in this case, wherein it is automatically converting the value of five over here, which is a string representation to number over here. Okay? And as you can see, you're getting an output over here. Now, of course, if you duplicate this, let me duplicate this and let me show you one more example. If I scroll down, if I change this to example four, sorry, not five. This is four. This is also four, and this is also four. Okay. Now, instead of five over here, let's say you have, let me get rid of this. Let's say you have a true. Okay. And you can say true plus one. Okay. What do you think will be the output? So the output would be two over here because true is considered to be as one. So if I save this, you'll see two and the output is number. Okay? If I say this is false, you'll see output is one because false is zero. Okay. So I'll just stick to true over here. Okay, and you can see the output. Okay, so this is how things work, and you can very well see how implicit conversion is behaving over here. All right. Now, let's talk about explicit conversions. All right. So I'll come over here. Okay. And we'll talk about converting values explicitly. All right. Now, there will be scenarios first of all, okay. There'll be scenarios wherein implicit conversion won't be enough and you want to do things explicitly, right? So let's say, you are asking user to enter an H, for example, or enter marks. Now, these things are always entered as numbers, right? And your job script program is getting this from HTML. Okay? So what you would do is you would want to make use of this for certain calculations. Now, let us say if you have NUM over here, okay? One, two, three, okay? So in my example that I was talking about, where you are accepting things like age and marks, o, you might want to do explicit conversion wherein you know, the number being entered is a number actually, but it might be it might be given as an input to your program as a string. So you might want to convert it explicitly, right? So let me give you an example. Let's say you have number over here and let's say you have pool over here. This. I have two variables. Okay. Now in order to do some type conversion explicitly, Ja Script offers a set of functions over here that you can see. So when you're working with strings, these are the functions. You have two string and string over here. You also have number, parsent and parse float if you're working with numbers. And if you want to work with Boolean data type, then you can make use of Boolean over here. So let's explore how you can make use of them individually. So first, we'll talk about strings over here, okay? Now, I have a couple of strings created already. So what I would do is I would just move them inside this block over here, not block after the comments. Okay? Now, let me convert or let me show you how to make use of string function. So I can say let num to string over here, and I can say string like this, and I can say Num. Okay? So you just pass the parameter over here, okay? And I can say console dot log over here. Can see numb to string. I can add a coma. And then here I can say type of and let's print type of num to string. Okay. If I save this, you'll see one, two, three and string as the output. Okay? So yeah, this actually is in number and it's being converted into a string. Now, the value is same, one, two, three, but it's in string format right now. Okay? Now, this is one thing. How can you make use of Boolean over here? So Boolean also you can convert, okay? So let me let me create a new variable over here. Let's say Bool to string over here, and I can say string. Okay, I can say bool over here, something like this. And let me copy this. And you can say bool to string and pull to string type of. You can see true and it is now being represented as string. So this is how this string works over here. You can see, right? So this is about string. Now you have two string as well that you're seeing over here. So you can actually say let. So let me say numb to string or let me copy this actually. All right. I'll just copy this entire thing in fact. Okay. And over here, I'll call this as one. This also has one over here. This also has one. I'll append one in the end. Okay. And instead of string over here, I can say numb, tot, to string. Okay. Like this. And for Bool also, I'll say bool, tot, to string like this. And I'll see if this. So you can see the output is same. Okay. So either you can make use of two string over here or just a string in this way. All right? Now, let us talk about numbers, okay? So if you have a value in string, let's say, SDR num. Okay, you can't use it for calculations. So let's say you have four, five, six over here. Okay? You can't use this for calculations. You might want to convert this explicitly into number so that you can make use of it. All right. And let's say you also have eight decimal pies values. I'll say SDR float over here. Okay, or you can say, call it decimal, whatever you want to. And let's say this is 12.55, for example. All right. You can take any random number. Okay. So let us take a look at number first of all. Okay? So you can say let SDR to num over here. Okay? You can say number. You can see number, and you can pass in SDR num Sorry, not float, STR, num. Okay. Like this. Okay. Now, let me print in the value over here and also the type. Okay. So I'm going to copy this and paste it over here. And if I save this, you'll see 456 is the output, and this is of type number now. All right. So this has been converted into a number, as you can see. Okay? Now, I can duplicate this line, let us duplicate this line and let us see an example with parse int over here. So if I make use of parse int, you can say int over here, okay, STR to int and I'll replace this with parsint and I'll save this. Now you can see this is again a number, okay? So this is actually converting it string into an integer. Okay? Now what happens if you add SDR, float over here? Okay. If you add STR float, you'll see it is truncating this decimal part. You can see only 12 is being printed. 12.55 is not being printed. Okay? So this is useful if you want a whole number, right? But what would things look like if you want to maintain decimals as well and also want to have conversion to number and also want to maintain decimal for accuracy. Okay? Because there's a data loss, right? The decimal value is lost. So that is where the sparse float comes into picture. So what you can do is let me like duplicate this over here, STR to float. Over here. And I'll piece this over here, and I'll see if this. Instead of parse end, I'll say parse, float. If I save this, you'll see 12.55. So the decimal value is also being preserved and this is being printed as a number. Okay? So there are three things to remember number, which is used to convert a string to number, parse int, which is used to convert any value you have into an integer. Then you have parse float, which can help you get the entire value or store the entire value along with the decimal. Okay. Now, one thing I want to mention over here, if you try to convert a string to a number, that won't work. So you can say SDR or invalid or num invalid. Invalid, num. Let's say, because this is going to be invalid, I know. Let's say I say number. I won't create a variable here, but I'll directly have number and I can say hello. Okay. Now, this is not valid at all, okay? So you can take this and you can print it over here. But this is not valid, okay? If I save this, you'll see it's not a number, NN meaning not a number, NN, and the type is number, okay? But the value is lost. It's NAN. All right. So yeah, if you're doing a typecasting or a type conversion to number, make sure that the source actually is holding a valid number. Okay? If I add characters into this into four, five, six, I say four, five, a six, then it would be NN again because it's not a valid number, right? I hope this is making sense. Okay? Now, let's talk about boolean over here. So we'll create zero Okay. And I'll also have let non empty boolean string over here or let me remove boolean from here. It's getting longer. Okay. And then I'll have hello. Okay. And let's see how you can make use of Boolean. You can say let zero to boolean. So let's convert zero to boolean first. I'll say Boolean over here, and I'll say zero. Okay. What do you think will be the output? Let me get this statement here, Console lock. I'll replace I'll replace this invalid numb with zero boolean, and you'll see false. So zero is actually translating to false when converted to boolean. And now okay, I added zero accidentally, this should be zero. Okay? Output will be same. But if you convert the zero into one, there's going to give you true. Okay? If you say one, five, six, any random number, it'll stay true. So it's falls only 40 over here. Okay. I hope this is making sense. All right. Now, if you have this string over here, what happens if you try to convert this to Poulin, okay? So let me copy this over here. Okay. I'll go to next line. And instead of zero to boolean, I'll say string to boolean string to boolean. And here, I'll have non empty string. Okay. And I'll copy the string to boolean and I'll add it over here. Let us see what the output is. You'll see true. Okay? So any non empty string you have and if you try to convert it to a boolean, you're going to see true as the output. Okay? So values like zero or empty string, null, undefined, and NN are falsy, which means they are converted to false. So even in place of zero, if you have an empty string, empty string. Okay, it will be false. You can see. If it's any end, let's say, A end. And if I save this, it'll be false. Okay? If it's null, it will be false again. Okay. But I'll stick to zero. Okay. And everything else, apart from zero, empty string, null, undefined NN, these are all false values. If these are converted, they'll translate to false in Bolin, and everything else apart from this is true, right? So I hope this made sense as to how type conversions explicitly work in Jascript. Okay. Okay. This was a mistake over here. I hope this is useful. 25. Project: Build a Color Generator: So let's build a color generator using JavaScript in HTML, right? So here I'm on index dot HTML, so I have this file index dot HTML and index dot Hs. This is a JavaScript file where our Ja Script code will reside. I'll add one more file, and I'll call this astyles dot CSS. So we'll do a little bit of beautification, not much a little bit, but we'll make our web page look a little bit decent, right? So now here in index dot HTML, what I'm going to do is I'm going to type exclamation, and I'm just going to get the boilerplate code for a HTML page over here. All right. Now, you can see I have device and everything here, okay. And here, I'm going to add the document title or the web page title, right? And this title will be random color generator. Something like this. All right. Now, over here under the body, I'm going to have H one tag because this is where I'm going to start writing in the code. So I'm going to say random color generator. And actually, instead of typing, I can directly get this. Okay. This is done, and how this app will function is, we will have a button that will generate random colors every time you click the button. All right. So we need that button. So I'll add a button over here. You can see this button element. All right. I'll close this and I'll call this button as generate color. Okay. Okay. This is done. And then we need to also display the color codes, right. Now the color that is being generated that will be in xassimol code. That will be a Exad assimil code that we can display also to the user. All right. So we'll display the color code. I'll say Ptag over here. Okay. And we'll have some color code printed over here. This is done, right? Now, we need to load the JavaScript as well. So what I can do over here is I can load the JavaScript file. So we have the Ja Script file created as index dot qs. So I'm going to come outside the body tag over here and I'm going to say script SRC, and I'm going to say index dot s over here. And I'll close the stack. All right. We don't have any linking done for CSS yet, but we'll look into that shortly. All right. I'll close this Console. We don't need to see the console anymore, right? Now, over here, if I see this, okay, this should actually display this particular this HTML over here. You can see random color Generator and generate color. All right. Now, we'll head go to index dot JS, right. And this is where we are going to write the Java script that will work with these HTML elements and add life to it. So if you click on Generate Color like I said, it should generate a new color code and the background of this entire web page should be set to that particular color code, and we should also display the color code over here to the user. All right. So what I'm going to do is here if you come. Here we have we have this PTAC. We have some elements and we also need to display the color code over here, o what I'm going to do is I'm going to assign ID to this, because I need to reference this from the JavaScript. Okay? So I'm going to code this as color code over here. Something like this. Okay, and I'll save it. Okay. And let me just remove this code from here. Okay? I'll just have color. I'll come over here. Okay. And what I'll do is I'll say document. So I need to get this P tag where we want to display the color. So I'm going to say document dot get element by ID. So I'm getting the element by ID from the document. Now here, I'm going to mention the idea of the element. So the idea of the element is color or color hyphen code, whatever you have added over there. Okay? And we can assign this to a variable, okay? So I can say color and I can say paragraph, okay, para. And I'll save this. Okay? So we now have access to the P tag, okay? And if you want, you can choose to console dot log over here. Or instead of doing console dot log, what I would say is you can say Color para Tot text content, and you can add test over here. Okay. And if you save this, you should see test being added over here, okay? Which means that you are able to access the paragraph tag, which is a P tag using this ID, okay? And if you hover on this document dot get element by ID, you can see returns reference to the first object with the specified value of the ID attribute. So the ID attribute is color in this case. Okay? And we are able to access D element. Now, you can have a default color code also being displayed over here. Okay? So I can add a color code as hash. So color codes start with hash, and I can say FF FF, FF. Okay. So you can add a default color code which is actually displayed when the page loads. All right. Now, once you have done this, what you need to do is on the click of this button. So on the click of this button, what should happen is the color code should be generated, and the way we are going to generate it is we're going to have a random generation. All right. So what I will do is I'll come over here and we need to get access to the button because on click of this button, some code should run, right? So what I'm going to do over here is I'm going to say, I'm going to assign this an ID over here, and ID can be generate. Okay. E won't be there. Okay. This is there and here I'll come. I'll copy this and I'll see document dot Get element by ID generate over here. Okay. Now, once we have access to the button, I'm going to say on click of this button. Okay. So we need to instruct on click of this button. I need to add A function over here. Okay. Now, this is the syntax for defining a function in JavaScript. Okay. And we're going to define a function. Now, within this, what happens is this block of code. What this function means is this block of code that we are defining here is executed when the button is clicked. Okay? Pretty simple. I'll say let and I'll have a random color being generated. Now, how are we going to generate a random color? Because this is a random color that we would also be displaying. Now to generate this random color, we are going to make use of a formula. Now, whenever you are representing color codes, it starts with hash, and then you have a hexadecimal value like FF, CC, FF, something like this. Okay? So we need to get this hexodeimal value. Randomly, hash, you can append manually, right? So what I would do is I would come over here. We are going to make use of the formula, okay? And we are going to make use of something called as math object. Okay? So I'm going to say math over here and I'm going to say dot now within math or math object in JavaScript gives access to a lot of functions within JavaScript. One of the functions is random. Now using this function, you can generate random numbers. Okay? So if you hover on this, you'll see returns a pseudo random number 0-1. Okay? Now, every time this is executed, it generates a random number. So let me show this to you over here. Okay? So Alco to Console, you can see math taut, random over here. Oops, Mt taut, random, something like this, and you can generate a random number. So every time you run this, it is going to generate a random number. Okay? Now, what we are going to do is we are going to make use of this and we are going to generate a hexadecimal number. How? So I'm going to generate this random number generated, okay? So let me copy this random number that is being generated. So this is a random number that is being generated. I'll clear the console, and I'll multiply this random number with a number. Now, this number is 1627 to 15. Now why am I multiplying it with this number? The reason I'm multiplying it with this number is because this is the maximum value. Okay? This number represents the highest possible or the maximum value for a 24 bit color, o in hexadecimal. So that is what I'm going to multiply it with. Okay. And then once we're done with the multiplication, we get a result. Then I'm going to get I'm going to make use of math dot floor. Now what is math dot floor? So I've copied this value after multiplication. What is math floor? Matt floor is a floor function that will give you so if I have a decimal value of one, four, five, six, so the output would be one. Okay? Now, if you have one, any number you have, it will give you the lowest value in the decimal. Okay? So if you have 1.4 4636, it is going to eradicate or ignore this value over here. So one is the output. Now if I paste this over here, it is, of course, going to give me eight double two, 8937 over here. Okay? And then I'm going to take this value, this value over here and I'm going to convert it to hexadecimal representation of string. To hexadecimal string is what I can say. All right. So I'll say this number dot two string, and I'll pass in 16 as the argument, which means that I need exa decimal value of this. Okay? So it has given me an error over here. Okay. Let me see. Okay, so this has to be for this to work, it has to be in the string form. So I'll copy this again. I'll say hash over here. I'll piece this. Okay. And then I'll say to string and let me try this 16 over here. Let's see. Okay, invalid or unexpected token. 1 second. Let me try again. So this should work ideally. Okay, so this works. You can see so for some reason, it is not working on the console, all right. But let me show this to you on the ID itself, right? So here we said we are going to get a random number. I'm going to multiply it with 16777, Okay, to one, five. Oops, this has to be five. All right. And this entire thing, this entire thing has to be in a pair of round braces, and then I'll pass this thing to floor over here. Okay. So we get the flowed value. All right. Now let me to Console dot log over here. Instead of console log, what we can actually do is we can actually display in coal para. Color para text content is equal to random color. Okay? So we can see the output here itself. All right. Now, if I refresh, let me see what's happening over here. So it will be triggered if you click Generate color. So you can see these numbers are being generated. Okay. But right now, this is not the exadimal representation, right? So what I would do over here is I would come over here. I'd say taught to string over here, and I would say a value of 16, something like this. And I would save this. Okay? I'd say generate color. Now you can see these values are being generated. You can see these exaimal values. Okay? You need to prepend this with hash. Okay? So I'll say has over here, something like this, and I'll say plus Okay. So now you have color codes being generated over here. I'm not sure white's not working on the console. If you know, please let me know. All right. But it's working here perfectly fine, as you can see, all right. Now this is done, okay? And what we need to do is we are actually displaying the random color. What we also need to do is we can change the background to the color that is being generated. So I can say document, tot body, and I can say tot style, tot, and I can get the background color. Oops. Background color over here. And the background color will be random color. And if I save this, you can see Fun, right? So with simple JavaScript, like how many lines of Java script you have written? Not even one, two, three, four, five, five, six lines of code, you are able to generate so much of magic. All right, you can see. So with this formula, we are generating a color code that we are displaying to the user, and we are also setting it as a background color. Now comes dstyle dot CSS, right? So what I will do is we'll come over here. Okay, and start styling over here. Okay. So I'll say font family over here. And I'll add fond familia as Aerial. Okay. And we can say text align. I'll have text align to center. Okay, margin over here, margin, we can set to zero. Oops. And then over here, I'll have padding. I'll have padding to 20 pixel. Okay, and I have background color. I can have background color to hash over here and iFIFI something like this. Okay. So yeah, this is first CSS. Okay, but we need to also link the CSS to HTML file. Only then it'll reflect, right, which we haven't done. So what I can do is I can say link over here. RL is equal to style sheets. Okay. Style Sheet over here, and I can have HRF. And this will be styles dot css, and I'll close it. Something like this. Okay? So you will now see CSS being applied here, okay? Now, body is done, all right. We can style it a bit more. Okay. H one tag. What I can do is I can add color over here. Color can be, okay, instead of this, I can add 333 over here. Okay. Then we need to style the button. So what style can we give to the button? Okay. So let's give it a bluish color. So I have a color code in mind, so I can say I can have blue over here, blue sort of color, you can see. Okay. Now scroll down. Color Oops. Color is white, 55. Okay. And border, I can say none over here. Okay, Boter is gone. We can add padding now to make it look decent, so I can say ten px and 20 px, save it. Okay? Looking decent. Or you can reduce the padding if you want. Okay. Margin. I can have ten pixels of margin. Okay. And I can have font size as that of, let's say, 16. Okay. Or we can have Cursor, pointer over here. Okay, border radius. Okay, Border radius can be five pixel over here. Okay. And then I can have transition over here, transition of background color. 0.3 seconds. Okay. Okay. So this is it. You can see the CSS being applied, okay? And if you zoom in a bit. So you'll have to zoom in a bit, okay. So this is button CSS. Or you can have button hover as well, okay? So button. Okay, H. Okay. And here you can say background color, and you can add dark blue. Okay. You can see the CS is in action. All right. So this is done. You can even have the display where you're displaying the you're actually displaying this color code, right? So you can get that style as well. So, I accidentally press something else. Okay, so we're displaying it over here, color. Okay. So what I would do is I'd come over here. Asta color. I'll get this I'll refer to this ID, and I'll say font size of you can say 24 over here. Okay, font weight is bold over here. You have access to bold. Okay. And you can say color over here. Color, you can add, Okay. You can just keep 333. You can see over here. Okay. And then you can have margin and margin of 20 pixel and 100. Okay. This is done. Now, yeah, this is what it is. I don't think should we add, Okay, so this is done, and we can have more if you wish to. But for now, we'll stop over here, okay? This is pretty much it, right. And it's a very simple color generator. You can see how with the help of simple JavaScript, hardly five, six lines of code, we have been able to add so much of life to our static web page, right. So yeah, you can even choose to use tailwind if you wish to. But yeah, I just choose to write a little bit of raw CSS, alright. So I hope this gives you some insights as to how you can make use of selectors over here. And how you can add listeners to buttons and how you can get a piece of code executed after adding listener to your JavaScript code. All right. So yeah, I hope this is useful, and I hope you have been able to follow along. 26. Project: Build a Temperature Converter: So let us take a look at how you can build a currency converter application. All right. So we are going to work around three files over here like index dot has, index dot HTML and style dot CSS. All right. So we'll begin writing the code in the HTML file. Now what all this application is going to have is it is going to have an dropdown, which is going to help users select from where he wishes or in which unit he wishes to convert the temperature in, right? And then we'll also have a text box where the user can enter the temperature he wishes to convert. And along with that, we'll have a convert button, which user can click and get the temperature converted. So let's go. I'll just have exclamation over here and I'll just get some boilerplate code ready over here. All right. Now, once we have boilerplate code, I'll update the title, so I'll say temperature. Converter over here. Okay. And then within the body, I'll again have the H one tag. So I'll just copy this entirely, and I'll just rename this to H one. All right. So you have temperature converter. Okay. Yeah, you can see. So now what we need to do is we need to add an input. Okay? So the input is of type text over here. Okay, so type text, and I'll have a placeholder as well. I'll say enter temperature. Okay. And we'll close this. Let's add an ID element also over here. So the ID for this can be Oops over here so this is so the ID for this can be temp or temperature, whatever you wish to. I'll just keep it short for temp. Okay. If you see you have this inter temperature text field over here. All right. Now this is done. Now we need to have a select, which is a drop down. I'm going to call this. I'm going to assign this ID of unit. And within this, I'm going to have option. Over here. Okay. Now option will be of type value and the value is C. Now the display is Celsius. Something like this. And if you come over here, you're going to see Celsius up here. I'm going to like duplicate this over here. Instead of C, I'm going to have F over here and I'm going to have farin Fahrenheit, something like this. Okay? So if you come over here now, you're going to see Celsius and Fahrenheit, which is good enough. All right. Now, depending on the selection, C and F will be passed to the application or whatever selector or wherever you are passing the value. Now over here, you can have a button. Okay. I'll add button as convert over here, the ID is convert and Aad text as convert over here. Okay? And then we also need to display the converted value, so I'll say converted temperature over here. So what is the converted temperature? I'll add a span to display the temperature. Okay? So I'll say span over here and we'll have zero initially, and I can add an ID convert something like this. Okay. This is done, so you can see over here. This is what the interface looks like right now. All right. Now we can quickly link it to our application, so I'll say script over here. I'll say SRC and I'll say index s, and I'll close it. We'll also link the CSS part. So I'll say Link RL and I'll say style sheet. Okay. And I'll say I'll add HRF over here as styles dot CSS and lclosS. Okay? So this is done so far so good, you can see the application. Now we need to begin with the JavaScript part, right. So now what we need to do is we'll first so first on the click of this the code should be executed, right? So we need to get that button. Okay? So we can say document dot get element by ID because we're making use of ID over here. Okay? And I can say convert over here, right? And what should happen? So on click of this, we want to execute something. So I'll say on click over here and I'll execute a function. A function does not have a name, it does not have any sort of parameters, and I align this with a semicolon first. And now within this function, we can add whatever we want to or whatever code we want to display or whatever code we want to execute basically on the button click. So I'll first create a couple of variables over here, temperature and I'll get the unit also. Now, we first need to get the temperature as well as unit. Okay. So I'll say document, taut, get element by ID, and we need to get temp taut value. Now, why Temp dot value. So here, this is Temp. So we are getting first the value that the user has entered. And then we also need to get the unit that the user has selected, right? So what I would do is I would copy this over here or wait a minute, we need to complete this. The value that we are getting over here will be in string format. I don't want to make use of string, so we need to preserve the decimal values as well. So what is the right choice over here? Yes, as you can see, I'm making use of parse float. Why am I using parse float? Because user might enter a decimal value. I need to get the decimal value as well. For precision. All right. I'll get this document dot Get Element ID over here, and I'll get the unit over here. Okay, so this has to be in This has to be as a string. So I'll say unit, something like this. Okay. This is done, so far so good. Okay. And once we have the unit and the temperature, what we can do is we can actually write some code on the basis of which the conversion will happen, right? Now, what should be that code? So we'll have to make use of decision making over here, right? So if the user selects farenhight. One formula is applied. If the user selects Celsius and clicks convert, another formula is applied. So depending on what is selected over here, the formula application changes. All right. So let me show you the formula first, okay? So the formula is to convert Celsius to Fahrenheit, we'll say temperature into 9/5 over here plus 32. This is a formula that we are going to make use of this is going to convert C to F. And then to convert Fahrenheit to Celsius, we are going to say temp -32, and we're going to say into 9/5. All right. These two are the formulas. Let me also mention this over here. This will convert F to that of C. All right? Now, how do we know which formula we want to execute, right? So I'll say. So what I will do is I'll say if unit is equal to C. So I unit is C, right? So if the user has selected Celsius over here in the top down, what should happen is we should convert C to F, right? Because then we should execute this, right? Or if it's not true, then we can execute this. All right. And we can have this part in the pair of round braces and even this part in the pair of round braces for clarity. All right? Something like this. Okay. And then I can assign the output of this to convert. Temp over here, which is a variable. Okay. And if I come over here. Oops. So if I come over here, I can so we have this converted temp. We can display this converted temp. So how will I display it? I'll copy this text, and we need to display it in ID converted, right? Is that the ID that we give? Okay, so the ID is converted, yes, we need to display it in the span, right? So converted dot. I'll say text content, and I'll say converted temp dot. I can just display converted temp. Let us see what is the value that we see. So let's say the temperature is 100, I select Celsius. This is Celsius, right? So I need to convert it to Fahrenit. So this is 21, two. Okay. Now, if you want to verify this, you can just Google Celsius to fahrenit and you'll come across this calculator on Google itself, Google search. So you can enter 100 and you can see the output as to one, two. All right. We can do the same for fahrenit if you select fahrenit and say convert. The temperature in Celsius is 122.4, and you can verify this over here. I have Google now fahrenit to Celsius. So this is Celsius to fahrenit. This is farenit to Celsius. So if I say 100, I get, okay, so there is something 1 second. So there's 100 fahrenit and I'm converting Okay, so my conversion, it seems is wrong, so it should be actually 37 degrees Celsius, okay? But I'm getting 122. So if you come over here, maybe something is wrong in the formula. Okay, so this cannot be. Okay, so this should be not nine by five, this should be five by nine over here. Now if you come, you find 100 Fahrenheit convert, you can see 37.77 78. Okay. So now it's proper. All right. There was a mistake in the formula, so be sure to make use of this formula, right? So now, this is not looking good, right? It's 7777, a lot of seven, and then eight. So I would want to move it to fixed decimals or fixed position of two places. So what I can do over here is I can say convert a temp, taut, to fixed, and I can say two over. You can see, number of digits. So this allows you to mention the number of digits after decimal point and must be in the range of 020 to 20, I'm sorry, inclusive. So if I save this, and if you come here, if I enter 100 Celsius is fine. Okay. I will give zero, zero. If you add Fahrenheit, you'll see 37.78. All right. So this is how the temperature converter is working pretty much pretty simple, all right. But with the help of JavaScript, we are able to do a lot, right? Now, let's take a look at the styling over here. Okay. We'll keep the styling as really simple over here. I'll just type in a few. I'll just type in a few styles okay, like style I'll just type in few style elements. So I'll just add a few style elements over here. So for family, let's say like this one over here. Okay, text line. I'll keep center and margin as zero. And I'll say padding as 20. Probably. Okay. And I'll add background color as probably. We can add background as, let's say, Azure. Let's see what it looks like. Okay. Does it look good? It's okay. Azure is looking decent. Courier is also looking decent, okay? Or you can update the font family if you're not liking this, okay? So font family can be you can select aerial Alvita sensor. You can see. This is also okay. Depending on your choice, you can choose the font family. Come over to H one over here. Okay. Now for H one, I'm going to see color. What is the color? You can select probably go down and you can have blackish. I can update it as well, so you can update it to something like this. Totally up to you or you can stick to black over here. I'll just get rid of this. I'll just keep black simple. Okay. Okay. This is done. Now over here, we can see select and the input. So I can say input for type as text. Okay. And for select over here. This is a CSS. Now over here, I can say padding of zero pixel. Okay. I can say font size over here of 16. Okay. Then you can have a margin over here for ten pixels, all right? You can have poder radius of five pixels. All right. You can have poder over here of one pixel, solid, and I'll say hashtg then you can have width over here of 200 pixels. Let us save and see, you can see. This has changed a bit, right? Looking pretty much decent, right? You can add more padding if you wish to. Okay. I can increase the padding to let's say ten. Okay. Padding was not looking that good, but now it's looking decent, you can see. Okay. And now let's move on to so on this, the next is pattern over here. So let's take a look at pattern what all we can add. Okay? So for button, I'm going to say pattern over here and scroll down a bit. Okay. So for button, we can say background color of, uh let me add blue. Okay. I can say color of white, and border is none. And I can add padding over here, ten pixels, 20 pixels, something like this. And you can say font, okay, not font, font size. Font size can be 16 should look decent. We'll modify this if it doesn't, Okay, cursor pointer over here. I can say powder radius is of five pixels, something like this. And yeah, I think this is it. If you come here, okay, it's looking pretty decent. You can add a hover effect if you wish to, okay? So I can say hover on button. Okay, so button hover can be background color, and I can say dark blue. Come here. You can see this effect, right? Pretty much it. All right. And now you can add a styling for PTAC. Okay? I can say font size and din pixels a little bigger than button. And font weight is bold. And then color is 333. Margin of I can say 20 pixels and zero. If you come here, okay? Now, let us add so this thing we have, which is converted, we'll add something to this. Okay. I'll come over here and here, convert it. So for this, I'll say color. Color of we can say I can a it blue. Okay. Depending on your preference, you can say font size. I'll say large and found weight, bold. Let's see how it looks. So you can see pretty decent, right, standing out. You can convert it. Okay. So this our temperature converter, and how it worked is we build out or we wrote some HTML, simple HTML, simple tags we used, we linked like JavaScript and CSS. Within JavaScript, we are getting the convert button, and we are adding it on click Lissner, which is triggered when you click on it, and then you have these values that you're fetching because on the basis of this, you are going to perform the conversion. Be sure to it, get the temperature value as float. Eight. Then we are converting the temperature with the help of you can see over here with the help of ternary operator, right? So you are first checking. This is a condition. Okay, you're first checking if unit is equal to Celsius. If it's equal to Celsius, then you need to convert Celsius to ferrenit. If the current unit is not Celsius, if it's ferrenit, you need to convert from ferrenit to Celsius, and these are the formulas. And then you are displaying the converted result bytrncating the decimal places to upti two, right? And then you have some basic styling added for beautification. So I hope you have been able to follow along, and I hope this was useful. 27. Template literals: Now it's time that we begin talking about template literals and understand what they are. So whenever you work with strings, okay, how do you create a string, right. Sorry for the caps. You can create string in this way so you can say, et name is equal to W double codes, you can assign a name over here. Okay? Now instead of double codes, you can even make use of single code. Okay I can select the text and I can type in single code. So this is also a valid string over here, okay? Now, this is one way of creating strings and another way is with the help of template literals. Now what are template literals? So they allow you to work with strings in a more flexible and more readable way. Now what does more flexible and more readable mean? This is also flexible, right? But this is good with simple use cases. Now, there will be use cases wherein you might want to do, let's say, you'll have to create one more variable. Okay? I want to create one more variable, and I wish to say hello. Okay? And I wish to have name over here, right? So I'll have to say something like this. Okay. Okay. Now, if I do console dot log over here, I can say greeting. Okay. So you'll see Hello Alice over here. All right. So if you want to concatenate two strings, you'll make use of plus over here, right? Now this is one way, but if you want to do multiple sort of if you want to create string on the fly and if you want to make use of multiple variables when constructing a string, because here we are making use of only one variable, right? We are not making use of multiple variables. So this is still okay. But if you have multiple variables wherein you are using multiple variables to construct a string dynamically, then this approach is not at all easy and it's not at all flexible or readable. All right. So in that case, you can make use of template literal. So I'll show you what template litters are. So here we are making use of single quote, okay? And we were making use of plus over here to add the variable in the end. But over here, when you use template literal syntax, you can say, hello, and I'll make use of taller over here because I want to add name over here, right? And I'm going to say name. Okay. So template literal is essentially a syntax that you're making use to create strings on the fly. All right? Now, this won't work. I have not saved the file. This won't work because it is still in single codes. So to get the template literal to work. Okay, let me do control set. Let me have this same syntax. Okay? If I save this, you'll see hello dollar name. So this value is not being substituted. In order to get this value substituted, I'll have to add Bates instead of making use of single code. You can see backticks. Now you have some sort of syntax highlighting over here, and you can see name over here. Okay? Now, this works with any sort of variable. If I have a variable called student name, okay, I can have student name over here, and here I can say let each is equal to 17. Let's say, for example. Hello student, okay? And I can say you are. I can make use of So I want to print in age now, right? So I can say dollar, age. Okay. And you are You're old. Okay. So here you'll see. Hello, Alice, you are 17-year-old. Can you see this? Okay. If I zoom out a bit from the editor, you'll see this being printed. All right. So this is how template literals can be useful. Now imagine doing this with the help of the concatenation operator, the plus operator that we were making use of. Alright? It is not good if the string is a bit complex. It's constructed in a little bit complex way. Okay? And it's not straightforward. If you're making use of multiple variables, then creating strings without the help of template literals is not convenient. Okay? So you can see how convenient the syntax is. It is readable as well. So the definition over here says it's readable, right? And it is readable. So anyone reading your code will know what you're trying to do over here. Okay? And ID also does a great job of doing syntax highlighting over here. So the moment you add dollar and these curly braces, this is highlighted in a different syntax. All right? So template what are template literals? Template literals is a syntax using which you can construct strings and work with it in a more flexible and I would say, a more readable way. And what is a syntax? So normally, you can create a string using single codes or double quotes, right? And you can concatenate using the plus operator, right? But over here, you are making use of batexs. So when you make use of back texts, you are telling Jascript that, Hey, I'm wanting to make use of template literals and this string might have expressions in it. Right? Now, this is an expression wherein the value is being substituted over here. All right? So this is a single line string. Now, there will be also scenarios wherein you want to create a string that is multiline. Okay. So let me give you another example. Okay. I'll add a comment here. Let's take a look at multiline. String over here. Okay? So I'll have multi line and okay, 1 second. I'll have multiline string, like so. Okay. And I can say this is a multiline string. Okay. Now, the moment you do this, you're going to get errors. This is not right. Okay? Because you cannot create a string like this in Ja script. Even if you add single codes, it is not going to work. Now, how do you create a multiline strings, right? In Ja script. So you can make use of template literals, like I said, and make use of backticks. So this won't give any sort of error, right? And you can simply say Console dot log, and you can print in multiline string. So you can see this is a multiline string, right? Now, okay, now I can even take every word on a new line that is also doable over here. If I save this, you can see this is a multiline string, right? So this is the power of, of template literals. And the syntax essentially is you'll have backticks over here, okay, something like this, and you'll have normal string, and it can have expressions over here. Okay, so you can say expression like this. So this is a syntax, Okay, and let me type in. It is syntax over here. Okay. So this is how we can make use of it. Now, let me show you multiple use cases, right. So now here we are just substituting variables, right? But you can even have expressions, okay? So you can say expressions, and you can make use of expressions within template literals. Eight. Let me see. Let's say I have let E is equal to five over here. I have let B is equal to ten, for example, I'll say let result over here. Okay. Now I'll have backticks. I'll say the sum of all right, and I'll say A, and I'll say B is. Now, what is the sum? Okay, we have to print the sum, right? So I'll say A plus P. All right. And then I'll say Console dot log, and I'll say result. So you'll see the sum of five and ten is 15. Okay? So we are now embedding expressions within the template literal, okay? So this is working absolutely fine, and you can see how expressions are also evaluated on the fly and the string is constructed. All right? So this is also possible. We can even make use of template literals with Ja script objects. Let's say if I have a user object over here, which has first name, and I'll have John as the first name. Okay. I'll just have two properties and last name. Okay. Sorry, instead of equal to, this is going to be key value pairs. Alright, so John and I'll say two over here. Now, this is a JavaScript object, right? So what I can do is I can say let user info over here. Let user info be user info, and I'll move to next line. I'll say name is. Now, what is the name? I'll say taller and I'll say user Tt, first name. Okay. And I'll say taller, user tot, last name, something like this. And then I can say console dot log. You can say user info. Something like this. All right. And you'll see user info, Colin, name is John Doe. Now, if you have more user information, for example, you can say age over here. Okay. Let's say it's 33, for example, right? You can still add one more line over here. You can say age is taller and user age, something like this. You can see age is 33. Okay. So yeah, this can also work with things like objects. All right. Now the thing is if you have, how would you work with strings that already have B tick in it? Okay? So let me, create a string. So let's say you have a string E, which says, like, this is a backtick. Okay. Okay, I like it's just printing a message, and it says, this is a backtick, okay? Now you'll see this back tick is being printed over here. Okay. But now as soon as I convert this into a string literal or sorry, template literal, you'll see there's a problem. Okay? So it's thinking that this is the closing backtick. How would you work with this kind of string? So in that case, you need to escape the meaning of this. So to escape, you can add a backward slash over here. Okay? And once you save this, you'll see this is a backtick. Right? So this backward slash is not considered, but it nullifies the meaning of the backtick over here. And this thing over here is known as escaping. Okay? So you are actually escaping back tick over here, which means you are actually escaping the meaning of Bac tick and you are making it part of the string. All right? So this back tick is considered and not this one when closing the template lateral over here. All right. So yeah, that's about template literals. If you are working with JavaScript, then you'll see a lot of template literals in the code. If you're reading or if you're building your own projects, you'll be making use of this concept a lot. All right, if you're working with strings in JavaScript, right? So yeah, that's template literals for you. 28. Doing more with console.log: Hey, there. So now it's time that we begin talking about console dot log. All right. Now, we've used or if you have seen any sort of JavaScript code, you must have already seen or must be aware of what console dot log is. All right, so it's used to print things onto the Console. So if I say hello world, and if I save this, I'm going to see Hello world over here as the output. So whatever I give in over here between these two codes or a single code, I can use single code as well. I'll see that thing as an output over here, okay? And I can also, so if I say console dot log, one, two, three, and if I save this RC 123 being printed. Okay? So this is basic form of logging that you are doing and log is one of the methods or functions you can see available on this console object. So Console is an object, actually, okay? And you're making use of log to get values and print them to the Console. All right. Now what we are seeing over here is basic logging, right? You can, of course, log multiple values. So how would you log multiple values? Okay, so let us take multiple values. So you can say console dot log over here. Okay. And I can print in name. Okay. And I can say over here, I can add Alice, and then I can have each, something like this and I can say 25. Okay. Now, this can also be substituted with variables. Okay, you can see name Ale age 25. Okay. And I'm separating everything with the help of comma. I can even make use of plus over here. So if I copy this, okay, you can add a plus. So instead of this, you can say plus. Okay, it is going to give a similar output. You can see. So yeah, this is a way of printing multiple values. And, of course, these values can be substituted with the help of variables as well, right? So you can make use of variables, like I said, Okay, so you can say let X is equal to ten over here and let Y is equal to 20. Okay. And if I have to print, I can say console dot log over here, D value of X is, and I can add X. Okay. You can see it's variable coming in over here. All right. You can even, like, have expressions. So you can say sum is Okay, X plus Y. You'll see 30. You can see. This is how different things work. You can also make use of template literals over here. Okay, so I can literally come over here. Instead of making use of double codes, I can make this much more readable over here, and I can say taller, something like this, and I can have this. You can see. The sum is 30. Okay, so you're making use of template literals and you're getting the values. All right. Now, if you have an object created, you can log the object as well. Let me show that to you. Okay? So logging objects, right? Now, let me create an object called person over here. Okay? And I'll say name. I'll say Charlie. Okay. And I'll say age is, let's say, we'll say 28, and I can say the profession is developed. Okay. Okay. So it's a person called Charlie is 28 and profession is developer. Okay. Now I can simply say console dot log. Okay, I can say name, sorry, person dot name. And this will print in name, right? You can see Charlie. Now I can just get rid of the name over here and I can simply print the entire person object. That is also possible with Console Log, right? You can you can even have C style or you can even have formatted output. Okay? So this sort of formatted output, you must have seen if you're familiar with C programming, okay? So if I say console dot log, okay, and let me get this. Okay. So if I say value of value of X over here. X is percentage D. Okay? And if I save this, you'll see value of value is, it should be the statement is incorrectly framed, so it should be value is percentage D, or you can have value of X is over here, percentage D. You're making use of percentage D, which is acting as a place holder to substitute the values. Right? Now, if you are making use of this placeholder, only one placeholder. And if you add multiple substitution values over here, okay? And if you run this, you'll see it's just being appended in the end, okay? And, yeah, this is how it works. Now, you can have multiple placeholders as well over here. Okay, so you can say console dot log. And I can say hello, percentage S. Now, percentage S is for string. Percentage D is for decimal values. Percentage D because H is percentage D and I'll say years old. You can see Hello percentage S, are percentage D years old. Now I can have Ale over here, and I can have 22 over here. If I save this, you'll see Hello Alice, you are 22-years-old. All right? So this is how console log can be used in multiple ways. This is log is a method or a function, I told you, right? It's a method available with Console Object. Now there are multiple other methods, okay? So Console methods. Okay? Now there are multiple other methods. What are they? So we have Console Log, which we have seen. You have Console dot error over here, you can see error is also method, and I can see this is an error. You can pass in any sort of error message, and you'll see this is an error. You can see how it's coming in, right? I can copy this and instead of error, I can have warning over here. This is a warning. And if I save this, you'll see this is a warning, right? And if I duplicate this, you can also have informational message over here, so I can say info. So this is information. This is informational. And if I save this, you'll see this is informational, right? So warning is being displayed this way. Informational messages are being displayed this way and error is being displayed this way, right? So yeah, these are multiple ways in which you can make use of console methods. Now, you can also make use of Console table. Okay? So this is another amazing thing. All right. Now, let's say I have this object called person, okay? And if I say, okay, let me say console dot log. If I use Console Log and if I say person, you'll see the display is not that good. It's displaying in JCN form, key value pairs, which is expandable. I want to have this as an output in the form of table. I can see Console, table over here and I can pass in person over here and I can have a semicolon. If I save this, you'll see index is name, value is Charlie. Index H, value is 28, index is profession, value is developer. You can sort it as well. Okay. So a little bit of functionality also over here, and this is the object, just in case if you wish to see it in Json form or the object form. Right? So that's the functionality of table which helps you print complex things like object data structure or object variable onto the console. All right. And you can see this is how it appears. All right. So indeed, Console is very valuable. You can make use of log. You will make use of it very frequently. You can use it to print objects, template literals, substitute values, construct strings on the fly to display as an output. You can make use of formatted output format if you are coming in from programming background like C, C plus plus, all right? You can also this formatted output is also a thing in Java. Okay? You can also get this kind of formatted output in Java as well, right? And then you can have different console methods to print error messages, warning messages, info messages. And in the end, you have table, to have things like objects being displayed in the table format, right? So I hope this is useful and I hope you enjoyed exploring Console Object. 29. Course Conclusion: And that brings us to the end of this amazing journey into the world of JavaScript. Throughout this course, you have built a strong foundation in JavaScript while learning about the fundamentals of JavaScript such as arrays, operators, objects, different data types. You've also understood how JavaScript works in real world environments. We've also talked about some of the practical applications and some projects that we did inside the class. I hope this course has helped you think about Jascript from a completely different perspective. But remember, learning Jascript should not and doesn't stop here. The best way to grow as a programmer is to keep practicing, keep building things, and even experimenting. Because by building projects, you would apply all the concepts that you have learned, and it would also help you get some confidence before you move on to real world life projects. Now I would want to request you to keep practicing, keep exploring and keep experimenting. With this particular course, you will find a class project in the project section, which I would encourage you to complete and share it with the entire class. Thank you for joining me on this journey. I hope this course has helped you gain confidence in javScript and inspired you to keep learning. Happy coding and all the very best.