JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Course | Intellipaat

[Music] hey guys welcome to this session by intellipaat in this session we are going to completely learn about javascript so javascript is a language which can be used to create dynamic web pages and also can be used for back-end programming so when it comes to web development javascript is the complete package so now before moving on to this session please subscribe to our channel so that you don't miss our upcoming videos and also leave a like if you enjoy our content before moving on to this session let's take a quick glance at the agenda we'll start off with what is javascript and why do we need it once that is done we'll understand what can we build using javascript after that we'll understand the basic concepts in javascript and also the es6 features of javascript once that is done we'll move on to document object model and javascript events after that we'll move on to asynchronous javascript and we'll learn more about it once all that is done we'll basically learn about a popular javascript framework called node.js so now once all the concepts are done we'll start the practical where we'll be doing a hands-on where we create a sample application using javascript so that's it for the agenda now without any further ado let's begin with this session now let us take a look at what is javascript it is important to understand what javascript is and how it can benefit us mainly because javascript's meaning has evolved from time to time before the current versions of javascript rolled out javascript was only used for web browsers but now it can be used in different ways so let's take a look at what it actually means javascript is a high level object oriented scripting language it was created by bernard ike in netscape in 1995. the javascript was originally created in 1995. now high level object oriented and scripting language are sometimes considered to be a bit more jargonistic than they need to be let us discuss them once first thing is high level so a high-level programming language is basically a programming language that does not deal with the low level memory management stuff that other programs might have to deal with this is because javascript has a runtime environment and what it does is that it takes a look at the code that you have written takes a look at the memory that it will need allocates that memory where and continuously at regular intervals of time keeps checking if there is some memory that can be freed up and if it can be then it frees up that memory and all of the variables that were assigned in that memory are going to be completely wiped off so it will allocate and reallocate memory on its own that doesn't necessarily mean that you have just no control over how things are happening behind the scenes and how you that you don't need to care about memory management at all but at smaller level to medium level applications you don't really have to worry about how applications are being built and how they are going to be used at a large scale application such as a llc javascript with javascript applications such as gmail or google drive you have to worry about how memory is being used and you have to be very efficient about it there are certain things that you can do in order to affect how the memory management is going to take place and if it's effective or not so we'll you can talk about this and discuss about this at length but that's basically what high level means that at the beginning you don't need to worry about how to allocate in the allocate memory whereas in programming languages like c plus plus you would have to do the memory management stuff on your own you would have to allocate a chunk of memory to your program when that program or that piece of program that executes is done you need to then de-allocate that memory if you do not then that memory is going to be reserved and it's not going to be used by your program or by any other program because the compiler has not freed up the memory so just keep that in mind it's also object oriented object orientation is basically a paradigm of programming in which you write code so that your code can reflect real world objects and scenarios such as people person events things like that this is really important because in enterprise level applications when you're building applications for companies the common language that you use are going to be to describe these things in programming however these things are not really something that people consider so you can create your own objects you can create your own uh nomenclatures and translate them into code this is what object-oriented programming allows us to do and it's a scripting language because it was developed in order to write and to be written and be executed by the browser scripting languages are executed by some other programs not by the operating system itself so if you are trying to write javascript in the browser then it's a script not a program however it's very important to understand that javascript has now evolved and now it can be used to build other kinds of applications as well so when it started out javascript was a very simple scripting language that was developed in order to for the sole purpose of manipulating web pages adding content removing content animating things into the frame animating things out of the frame changing the styles and whatever nowadays uh because javascript is so popular and so easy to pick up many of the programming languages are many of the uh paradigms and platforms support javascript you can build javascript you can build use javascript to build mobile applications servers program web servers web applications are already being developed using javascript and there are many other kinds of things as well such as native windows applications and all so you can use javascript to build different kinds of applications it has been supported in on multiple platforms and will continue to expand its support so with that uh we have a clear picture of what javascript is now let us take a look at how you can use javascript in this presentation we'll be taking a look at how you can use javascript in a web browser there are multiple ways of doing so however javascript as we have discussed can be used to build different kinds of applications and we won't be discussing it here with that out of the way let's take a look at how you can use javascript so there are three ways to use javascript especially in the browser so in the browser you are supposed to write the javascript code in the html file or some other file and embed it but how do you do that let's get started and see how we can do that the first thing you have to understand is that the reason why there are so many ways of java writing javascript depends on what kind of code are you writing and in the hands-on for this topic we'll discuss what that actually means so the first thing is that it can be inline basically suggests that the code that you're writing is completely embedded in the html so if you have a button it is right next to the button and it's only regarding that button that the code is going to run so that's one way of doing it the reason why inline code was invented was that if you had some small bit of code that only needs to run on a particular time or at a particular time or when if this is associated to a particular html element then you can just write it there instead of polluting your html with different kinds of things you can just write it there then there's script tag so a script tag basically means that just as an html there's a style tag in which you can write css script tags allow you to write a javascript code when the browser sees the script tag it will take anything written inside the script tank which is the opening and closing tag and consider it to be depending on the version of your browser and what kind of support it provides so in scenarios like this we would have to earlier we would have to have write some kind of a text that describes what kind of script we are writing inside the tags such as text slash javascript or whatever nowadays it is considered that by default you are going to be writing javascript in the script tag so you don't have to worry about that at all then comes script file similarly to script tag you can write your script inside a file give it the dot js extension which is the javascript file and you can embed it inside your browser so you are going to say okay after you are done loading the html page load this file as well this file contains some html code and this file contains some javascript code that needs to be embedded in the html file now different reason the reasons for these different kinds of script files is something we'll see in the hands-on but basically it depends on how much of the entire html page is going to be affected by the javascript so let's take a look at the hands-on and understand how that works how you can write the javascript code will be printing something on the console i'll explain what a console is but first let's see i have a file i've called it index.html and i have opened it in a in a code editor i'm using visual studio code you can use any code editor or text editor that you wish to use open that file inside a inside a web browser uh my file is located in the e drive and it's called index.html but you can call it anything that you want to it's just a convention now let's take a look at the different ways that we have discussed using which we can create our javascript code and embed it inside our html the first thing we have to do is we have to write some html code now in visual studio code i have a snippet that will automatically write most of the html that we need in order to get started so just press this band symbol and press tab this will only work in visual studio code if you're using any other programming environment this may or may not be available there so just make sure that you know that it is there i'll call the title to be js tutorial i will save it and now if i go back to the browser and if i refresh if you take a look at the title right now it's index.html refresh it now it's called js tutorial so in case you're not familiar with uh html that much i would recommend that you first understand html because javascript builds on top of html so if you don't know html then this is not going to work now let's take a look at the different ways through which we can use the javascript code so there are different ways firstly that's the inline code so how do you write code that executes inline well let's say there's a button i call it log button and what i want is when this block button is clicked i want to print something on the console now what is the console different programming languages such as javascript and c have a console now console is basically just a terminal or a command window which will uh show the output of the code that you're writing you can also put the output inside a file or inside some server but basically this is where the output can be seen now in a web browser it's a little difficult so what the every web browser has is a javascript console right click on the web browser and click on the inspect button or press ctrl shift i nowadays every web browser has this when this opens you can see that it has a console button here i go up to that and i can execute my javascript here as well to print something on the console you can just execute some javascript here as well i can write console.log and i'm using google chrome but you can use any web browser such as firefox or the edge browser using microsoft and it will work just fine and you can write hello world semicolons are not required but it is a good practice to write them you press enter and this is what it brings hello world forget about this undefined right now that doesn't really matter now what i want is i want this to be a little more interactive to do that i want to have a button which has the keyword log inside it so if i refresh this you can see there is a button but nothing happens when i click on it so that's a problem now i want to execute the same code that i have written in the console but i want it to happen when i click on the button so don't worry about the syntax right now i'll explain what that means in a moment just to write this javascript hello world and i i can put the semicolon here as well i go back if i click nothing will happen this is because our browser has the old version of our index.html we have to refresh it so that we can fetch the new version to take a look at the current code right click on the page and press view page source as you can see that the button now has console.log because it has refreshed if i refresh this now everything will work if i press log now it prints con hello world onto the code now as i've already discussed the reason why there are multiple ways of doing this is because i only want to run this code when a person clicks the button suppose that there are multiple buttons on my page it's a huge page there's like thousands of lines of code and somewhere down the line or like 1 100 line i write button and i want the same code here one thing i can do is copy and paste it here such as this but this violates an important principle important principle in programming it suggests that you should never copy and paste the code so console.log console.org it does work but there's a problem here that you may or may not see suppose that this is like again as i've said it's on 1000 like multiple people are working on this because this is such a huge file somebody comes along and says okay the message that we want to print is hello world but we want an exclamation mark here as well i put the exclamation mark i save it go back to my html page refresh it so that i can see press on the lock button and okay it's showing the exclamation mark so our code works but the problem is now that the part where we copied the code it's showing the old version because we didn't update it there so now we have to go down again and press this and suppose and this is only for two buttons suppose there are millions of buttons on the page suppose there are buttons and forms and we want to perform these tasks multiple tasks and synchronize them together this could be really difficult right now it's working but it's going to be really difficult there are other ways of doing this of course and we will take a look at those one by one but to overcome these issues after the let me just close this up yeah so i'll just put an h1 tag look inside console now let me just show you what script tag looks like so after this i can write script tag and here i can write my javascript code and it will work just fine this time it won't work when i'm pressing a button that was just for it's just for the inline version here i can just write some code that will be automatically used so as you can see as soon as my browser starts looking at the code it takes a look at the code creates the h1 tag displays it on the screen then takes a look at the script tag what it does is that it prints everything that needs to be printed on the screen and then closes the script type so everything after this needs to be interpreted as html and that happens so this is why when we look at this this gets printed and then this gets printed in the console so that's one way of doing this another thing to understand is that this isn't the only way that you can do this but this is a good way to get started another way to do this is going to be if you can create a script file so now script files are basically just files that you can use in order to write your code inside them so you don't want to mismatch your html and javascript code what you can do is you can just use script.js now to show you how that works all i'm going to do is i'm going to open up a script.js file that i have already written i'll write console.log i'll print hello world it's the same code that i have written thus far but it works now i write it here copy paste save if i remove this now and i just keep it here now do you think it will work not exactly because our html page has no idea that the script tag exists so inside the script tag i have to write another attribute called source and the source file is going to have a name of script.js save this learn this again and now it works so now what happens is it takes a look at the entire webpage takes a look at the h1 tag displays it on the screen takes a look at the script file opens up the script file executes the code inside it comes back closes the script tag closes the body closes the html and is done with it now the reason the script files were invented so that because uh we may have multiple web pages so it's not that we only use one page we could have about.html and many different kinds of files and we want some file to have access to all these pages so in cases like this if i have an about.html i can just copy and paste this script that and that code will be available inside that file as well so when that file is loaded it will be logged on the console as well and if it's like 10 different files all i have to do is just change it here if i want to make another change like this and all of this will be reflected in all the files so that's the reason why we do it this way now again this is not the only way to do it uh as we have discussed three ways you can just you can work them out and understand how to use them very much like css in which you have inline styles uh file level styles and then external styles in which you can create your own css files script tags works the same in other versions because script files are so could be so heavy let's say that you have seven different script files then it could be possible to just merge them all into a single file this is called a build step and you don't need to worry about it right now but basically in cases like this all of the javascript code that you write is taken and merged into a single file by a program called a build system that you can configure yourself and then it creates that single file so that when an http request is sent only one file is sent over the wire and multiple requests are not done so you can take a look at that as well but these are the ways that you can configure a javascript file to work with your html page again you need to know html in order to work with javascript because that's how it was created so that's how you can get started with it all right guys now let's take a look at what can you build with javascript so we have discussed thus far what are the different ways that you can use javascript and what javascript is but now let's take a look at what it can be used to build so using javascript to build different kinds of applications has been the norm many different companies use javascript for different kinds of applications that they build and use let's take a look at what these are so javascript can be used different kinds of applications these are web applications web servers native mobile applications and hybrid mobile applications all of these have different uh ways of being used and different javascript code can be used to use this so let's take a look at them one by one and demystify how these things work so the first thing is web application using javascript to build web applications has been the norm we have been building web applications using javascript since the invention of javascript now the reason why it's so popular nowadays is because there are multiple ways of building a web application using javascript the easiest and the most fundamental way is the way that we have discussed thus far by which you create an html page write the html code embed some javascript in it either using inline javascript or script tags or script files and then that code is going to be used to manipulate the javascript manipulate the html page using the javascript in some way or the other this manipulation can be of several ways either you add some element on the node remove some element on the node get some data from a web server and after getting that data populate the entire html page with some new content that is available let the user know that some new content is available and many different kinds of things now that is important and very very useful but that's not the only way that you can do it the other way is using something called single page applications in which there's just one html page which is used to just give the basic scaffolding and the shell of a page outside that we have a javascript page that takes care of everything else so if you've heard of frameworks such as angular view react they work on the similar premise what happens is your html code is very minimalistic and it is a big fat javascript file that is transferred over the internet once the user's browser has that javascript it tries to execute it when it's executing it it's creating multiple html nodes using javascript putting it inside the html page and then javascript takes care of everything else navigation http calls manipulation of the dom any kind of thing that a web application is supposed to do javascript will take care of it these applications are really javascript rich and html is really used as a skeleton not much of html is used css is used throughout and it will be continued to use throughout but that's the way it works so because of this fundamental shift in how web applications work the responsibilities of web servers have changed so let's take a look at how you can use javascript to build web servers now what used to happen before we had platforms like node.js which we can use to build web server which will also cover in this tutorial but the reason why web servers were a little difficult especially for front-end developers to understand it because of the language barrier so in javascript in the front-end web applications we'll be using javascript all the way and since that was the only language that we would use to manipulate the web applications and its structure but in web servers you can build a web server using different kinds of technologies javascript was not one of them so the way you would use it would be using technology such as php which is still by far the most popular service head scripting language then there's java which is very popular in the enterprise world so it's c sharp and the dot net platform there are other languages such as ruby and python that we use but javascript was not really a big player in that regard so what happened afterwards is that we had the introduction of the node.js platform that allows us to write javascript code so that front-end developers can sort of port their expertise to the back now it's important to understand that just because you can write javascript code on the web server or write the code create a web server that doesn't necessarily mean that you can just copy and paste your entire javascript file from the web browser to the web server and it will work exactly fine mainly because these are two different environments in the browser you will have elements such as a button you will have elements such as a form list and whatever it's a very visual environment in servers you don't have that you have number crunching and different kinds of things such as accessing databases caching data serving up data and whatever so these are two different environments although you can use the same javascript syntax for loops console logging promises and all the features but you can't just port the code from here to there just copy and paste and it will work so that's something to keep in mind now in web servers we use node.js node.js has come a long way we have express js which is one of the most popular frameworks out there node.js is really popular among enterprise as well and any kind of application that you want to build using backend development nodejs is very much likely a good option to do that then comes native mobile applications now the reason why we are making a distinction here between native and hybrid mobile application is something that we'll discuss in a moment but the reason why we are saying that we can build native mobile applications is because before this if you wanted to build an application that your customers could use you had multiple platforms that you needed to platforms such as android ios windows phone and some other platforms as well this was a bit problematic because then that means that if you want your application to be accessed by a large number of users you need to write code for both android platform as well as ios platform these two platforms have different programming language different programming structure different skill sets and different environments in which you can develop applications android is the console so you can build android applications in both mac and windows however apple doesn't allow you to build ios applications on a windows laptop so you need to have a developer account you need to have a macintosh laptop you need to have developer tools installed you need to have an iphone to test your applications there's just a lot of upfront capital required there in android you have the emulator you have the open source tools and everything but still the languages are different javascript is not really the language that they use but they use java in android and in ios the new language that is being used is swift and in android the new language that is being used is kotlin and the previous language in ios was objective c none of these languages are easy to pick up and because javascript is so easy to pick up people more people know javascript than they know java or swift or kotlin or whatever now this pro is a problem mainly because the web applications that people build almost exactly mimic the features that we would want in an application in a native mobile application now there are ways through which you can use your current web application and have it work as sort of a substitute application inside your mobile applications but the problem is that that at the end of the day is using the web browser so what happens is your webpage is loaded into a web browser and it takes care of everything using javascript your application has no access to all the underlying features such as the camera the machine learning features that have been developed um the bluetooth speakers os internal hardwares voice recorders you have no access to them at all so if you're trying to build a camera application you can't do it using javascript or you couldn't have done it nowadays there are frameworks such as react native native script and many other kinds of platforms available where you can use your javascript skills in order to build native mobile applications again it's not as simple as just copying your javascript code from your web application or your server application into a native mobile application however it is very similar to learning not learning a new language but understanding the ins and outs of a platform and then adding your skill set on top of these applications are really native mobile applications and the great part is that when you write the code that code will get converted to both an ios application and the android application you would still need to have the developer account and for testing purposes you would need to have access to an emulator or a macintosh os in ios ios case or whatever but you can still have an application that will work so that's the great part here so this is what native mobile applications do but still it needs a lot of configuration and understanding of the platform before you can even start building an application for the platform on the other hand we have hybrid mobile applications now this is a solution that has been available for a long time what it allows you to do is it allows you to write javascript and that javascript will then get converted into native os calls but this is a little slower than native mobile application if you're building applications that are just there to deliver content such as an application that is there to tell people about the new concepts that a a band is going to have new conferences available new videos available on a video store or whatever then hybrid mobile applications are good native mobile applications on the other hand if you want to access the native features such as camera browser features voice recorder bluetooth gyrometer sensors infrared whatever your application has to whatever your mobile app mobile has to offer so hybrid mobile applications use platforms such as apaches cordova and many other new platforms are available as well you can take a look at these platforms and build these applications yourself it's not very difficult to learn how to build these applications but these are really helpful for us to use and they are very easy to use as well so these are some of the platforms that can be used you can also build native windows applications you can also build native desktop applications using a platform called electron which was developed by github and there are many others as well is it too much to count but these are the platforms that are used as you can see javascript has evolved from a very simple programming or scripting language that was used to manipulate webpages to a full-fledged application programming language in which you can build applications or multiple kinds kind of like python but a little different you can also write machine learning and ai code but that's a whole different topic on its own so that's how you can build applications these are the kinds of applications you can build using javascript this is exactly why javascript is one of the most popular job positions right nowadays javascript developers are in high demand because they can use their skills or already existing skills and learn some new skills in order to build many kinds of applications so with that in mind let's see what else we can learn just a quick info guys test your knowledge of javascript by answering this question which of the following is not considered as a error in javascript a syntax error b missing of semicolons c division of zero d missing of brackets comment your answer in the comment section below subscribe to intellipad to know the right answer now let's continue with the session now we'll take a look at the basics of javascript javascript as a language has several features that we can learn in order to get started with the basic concepts of programming we've never learned how to code then you can follow along with us this section is going to be really hands-on focused so we'll have a lots of hands-on we'll we'll discuss a lot of caveats that you can learn when trying to learn a programming language if you have already learned some basics of some programming language such as python c plus java it's going to be useful for you to follow along with us so that you can understand what are the features and differences between javascript and the language that you have learned so firstly we need to get comfortable with the javascript syntax and language features so how does javascript work what are the features that a javascript program would have and how you can write programs on your own the topics mentioned below other topics that we'll be covering one by one we'll have a hands-on for each one of those and we would like for you to follow along with us you don't need much of setup you all you need is a web browser a code editor or a text editor of any sort such as notepad if you don't have any or visual studio code or you can use other code editors such as sublime text brackets and any other kind of text editor that you prefer and through that we'll go through each of the topics one by one and we'll cover as much ground as we possibly can so let's get started with this the first thing is variables now in case you have programmed before you already know what a variable is but if you don't know let me just clarify this for you a variable is basically a name given to a memory location in which we can hold some data that's basically all that is so if you want to get as an input a user's username and password you can store them inside a variable that variable is then going to take care of everything that you store inside it so we have container that container has a name that name is then going to be used to reference to whatever value we put inside it think of it like a bucket inside a memory think of a memory as this empty room we have a bucket we put it with a name on that bucket we put it inside the room and in the room we inside the bucket we put some information or something let's say that i want the username i create a bucket name username put it inside the memory and now whenever i want to use a person's username i would first ask them okay enter the username that person will enter the username that username that the user entered will be put inside the bucket and now whenever i want to access or remember what the username that the user had entered was we'll take a look at that so that's how variables work variables allow us to store data now it's called a variable because the data inside it can change at any time you it's variable depending on what is the last bit of information you put inside it so that's the way it works it allows us to store and remember data that we would need in a future computation or a future future process now variable store data in computers memory or your systems memory that means that they are volatile so in case your program accidentally closes anything that was stored inside a variable will be lost if you don't want to lose it then there are ways that you can store it inside a file or whatever we're not going to be covering that but that's how variables work the data that you have inside a variable can then be stored inside a file on a web server on other data storage platforms as well but as of now when you're using a variable we are talking about data inside a memory that was given a name so that it can be accessed later the data inside the memory location can change that's why it's called a variable all right so now let's take a look at a hands-on in which we'll be learning variable so we would very much like you to follow along with us in this hands-on and we will cover variables in this hands-on again you don't need much all you need is a code editor i'll be using visual studio code and you need a web browser in the web browser just any web browser that you use use the same setup that we had earlier in which we had created an index.html file open that up in the web browser and in the code editor so that when you make changes to the code you can refresh the browser and see the changes being reflected here open up the console as well because this is where we'll be using the web browser this is what we'll be using inside the web browser as of now so again i will just use the script tag so that i can just embed my code here but the basic understanding here is quite simple the code that we're writing is javascript and we want some input from the user now i will tell you how you can get input from the user in a moment right now let's take a look at how you can declare a variable so in a variable there are multiple ways of doing good things first thing i'd like to show you is how you can write a comment comment is basically something that you write that you want the person who's reading the code to be able to understand but you don't want your browser to interpret that code you're basically saying this is something that is not code that is just something that a person who's reading the code is supposed to get you don't have to worry about it don't interpret it this is not good just move along and skip this line so there are two ways of writing a comment one is you can use two forward slashes or the division symbol and that is a single line comment so single line comment let me just change the theme so that it's a little more apparent yeah hopefully this is visible now so i have a single line comment and now i can have a multi-line comment as well this is what happens when you have a divide symbol for followed by an asterisk or a multiplication symbol and this closes when you have a multiplication symbol and a division symbol so start and the end so the way you start it is this you basically just create this symbol and then you write the code that you want or write the things that you want to write so this code is using a variable and i can write it in your new line variables are being used or whatever you wish to buy this is to explain the code so that the person who's looking at the code can understand what it is doing now a single line comment is good if you just have a single line description if you have a multi-line description then you can have a multi-line comment right so now let's show you about the three things that we need so there are three things that we need to understand first is declaration and second is after declaring the variable we use the variable or you can also call it initialization and the third one is using the variable so the way it works is this to declare a variable in javascript you are likely to use a keyword called var v-a-r var is a keyword that was developed in javascript so that you can use variable of any kind if you come with other programming languages then you would have to use the keywords such as int or whatever to describe the type of language uh here you just need to use the var and now i need the name of the variable let's say user name and this is what is called a declaration i'm saying okay i'm going to be using this variable now javascript to a certain degree is a very relaxed language so even if i were to not use the var keyword and say hello and then console dot log the username it will still work it might throw an error but it will still work so if you it doesn't even throw an error now that is a problem that when you're writing the code there are certain tricks that you can use one of these is something called use tricked which will work in a javascript file i don't know if it works here or not but that way it will be very strict in checking whether or not a variable is there so it says okay the username is not defined and you're using it uh and it will return an error so latch one now uh if you want to use the username just use the var keyword now it's defined and if you want to initialize it immediately initialization basically means assigning a value to the variable as soon as you're creating a bucket you're filling the bucket so you can do it this way i have it here i refresh and it works even if i were to you uh instruct the browser that be strict and don't allow any problems in my code it will still work so that's one way of doing it now that's called initialization that's the second part now declaration is this you just create a variable and you say okay i need this bucket i'll use it later on in my code i don't need it anywhere else i just need it right now now how you can take the input of the user there are various ways one way is using prompt now this is only available in web browsers and this is not used commonly because in web browser you are not allowed to take users input like this or you don't usually do but if you want you can just prompt the user and say enter username and whatever username is entered you can just put it inside using save it and then you can print it so if i go ahead refresh this it says enter username i call it john press enter and this is how i can get a user's input in javascript now again you don't really need to use it but you can if you wish so that's what declaration and initialization is and then using a variable is again the simplest thing that you can do is just print it now printing is not the only thing you can do there are several operations which we'll discuss when we're discussing operators but basically when you're trying to learn a new language understanding how variables work is really crucial i can degrade multiple variables as well such as username and another would be using password now i can declare them on the same line if i wish to or i can declare them on multiple lines like this so that i use the var keyword again and again or i can just put it like this and again if i had another variable name i could do the same thing again but it doesn't matter how you do it the mat what matters is you're describing some type we will always recommend that when you start a javascript file you use the use trick declaration so that when you are using a variable that is not declared it doesn't become a headache to understand how it works and where things happen and how things happen so always use this if possible if you are new and you don't want the safety and instructions then you can leave it but we recommend that you keep it here now again if you're coming with from different programming languages you would think that you would need to describe the kind of data that is going to be stored inside it but such as a string integer or something like that but that's not really the case this is called a loosely typed language or dynamically typed language in which the type of the data is this is just something that the language figures out automatically data types are still available and we'll discuss them now but the reason why they are not available in the same way in other languages is because in javascript everything is loosely typed so if you have data in one language one type and you want to convert it to other type you can do so quite easily let's discuss this now let me just save this up and let's see what else we get all right guys now let's take a look at data types so as we discussed that there is a way for us to get data from the users and put that data inside a variable that variable is something that we can use later on so for instance we took a user's username as some information using the prompt function now that's not the only way that you can take data in fact in a web browser you usually don't take data like that you use a form that the user will submit and you will then get that data and put it inside your web web browser's memory and that's where you use it now the real issue here is that something we haven't quite touched on thus far which is data types so as you can see that data is of different type one the username that could be a long string of text long line of characters one after the other the other is the numeric data so you are asking for a person's age their salary their height all of this is numeric information then there are other kinds of things such as true or false so if you're asking a person if they are above the age of 18 or not if they are senior citizens you can get this information simply by taking a look at their age and determining if it's about certain threshold but there are certain instances where you don't want that information users want to know if they are above the age if they are senior citizens in their own country that's another way uh and so many different kinds of data so what does that tell us about the languages that we use well one thing to understand is that different datas have different operations available to them so if i have a number and i say okay i have 5 multiply it by 10 that makes perfect sense because multiplication is an operation that can be performed on number now if i were to take a look at some other kind of information such as if i were to say okay i have a username multiply it by 10. you're not going to make any sense of that because it doesn't make sense of multiplying a in name by some number it makes no sense to do that so your browser is going to complain your your program is going to complain saying i don't know what you're asking me to do because this is not how this works now how does the browser or the language know what kind of data is stored inside a variable is it a number is it a long text is it some binary information such as true or false or something like that this is done using data types now data types are many types we'll discuss them when we are looking at the hands-on in javascript there are many kinds of data types and in many other languages also there are many kind of data types available as well so these this is the way we use the data types that we have data types allow the compiler or the interpreter when it's interpreting the code to understand if a particular operation is legal or not this is the most important aspect when we're learning something so let's take a look at a hands-on and figure out how this works now let's have a hands-on in which we'll discuss the different kinds of data types that are available for us so for that all you would have to do is just follow along with us open up a web browser same as before and open up the text editor uh you might also not need the text editor right now because we'll just be writing it in the console but it's a good price so i want to declare a variable x is equals to 1. now this is obviously a number but if you want to take a look at the data type of a number you can use the type of keyword and type the name of a variable that is available next so x it will give you number so it indicates that it contains a number now even if i would just write the value value here it will work just fine even if it was a fraction this would work any other kind of value would work so that's a number numbers are quite self-explanatory these are just uh values that you can use similarly in mathematics the same way that works in mathematics they will work here okay guys a quick info if you're looking for an end-to-end training in javascript intellipart provides a full stack web developer course which covers javascript and all the javascript frameworks you need to know for more details check out the description box now we also have the username let's enter the username of john press enter if i were to now let's take a look at the value its username is john and now if i want to take a look at the type of the data it is string the string is nothing but just data enclosed in within quotes so even if i were to write one inside course it will be a string if i were to do it this way this is a string so one thing to understand is that it doesn't necessarily have to be double quotes as you can see here let me just expand this up it doesn't have to be double quotes like this they can also be single quotes like this and this is also string here you go empty double quotes and empty single quotes are strings anything within a double quote is a string anything within a single force is a string so if i want one two five seven six one five four eight these are numbers but these are string if i were to remove this then this becomes a number now the other thing to understand is that even if we have strings like this the important aspect of the strings is that they are just a collection of characters so that's the way it works but if you want to add some sort of a text inside it such as let me just show you now if i if i were to write okay john said let me just yeah john said and now if i want to quote it i can't use double quotes as you can see here this will give me incorrect syntax and i'll get an error uh so if you have started a string with double quotes if you want to add more quotes inside it you can use single quotes so that john said he is not coming so that's a single quote or he is not coming you can write it this way and this is still work now if i were to do it the other way around if this was a single quote then also this would not work so i would have to create a double quote and this will work so as you can see these are how the codes work now this is called a string what about values where you just have values such as true or false so if i want to check for if a user enters a username and if i want to check well the is the username the same as john so in cases like this will you get the value such as true or false these are two values that are used inside javascript and many other languages and it's of type boolean type of and it's boolean so as you can see this is constantly considered to be boolean now there's another type undefined this basically means that the value does not exist yeah it's not defined we don't know what the value is uh if i were to now if i were to create a variable let's say bad and if i were to type bad it has no value assigned to it so right now it's undefined if i were to check the type of bad it's undefined so i can't perform any operation now it comes time for operation and we'll take a look at more of these operations when we're covering operators but just to give you a quick overview for x we have a variable of one right so i can perform for operations such as x plus one one plus one is equal to two so what happens is our compiler or our interpreter take a look at x see if it already has a variable named x assigned some value to it it has a variable named x and the value assigned is 1 so it will substitute it for 1 1 plus 1 equals 2 that works now for user name i have john if i add user name plus one i'll get this gibberish value in which it just concatenates the word john and one so that works now if i were to get the bad variable which has no value and i want to press one it gives me another return that says not a number so depending on the kind of value that you have you will get different output that's one way and if i were to use true plus one and get enter you will get two because underneath true is represented as 1 and false is represented as 1 so these are the kinds of values that we have and this is because we have a simple dynamically typed language in javascript it doesn't really matter what kind of variable it is javascript will try to force one variable into another but if i were to take user name and plus undef undefined you can see this is what i'm getting if i were to get u variable and plus true this is what i'll get so this is the problem that we'll face i will think that i have a number let's say it's 1 but it's a string i assign it here and i say x plus y and let's say y is equal to true so i don't know the type of the data is inside it i expect it to be this and i get this or if i would go x plus 12 instead of getting 2 i'll get 112 in string that's a real problem that's how we can understand how this works and this is why data types are important our operations what operations we can perform is going to be shown here uh similarly if i had username multiplied by 2 i will get not a number because this makes no sense i don't know what you're doing so i'm giving you a result that is not a number if i were to use not a number and take its this really complicated web of how things work don't worry about if you don't get it right now just understand that there are different kinds of data different operations are allowed on different data so if you have two variables you're trying to add them x plus y uh but you're getting not a number that's basically because you have data types of two different types or you're trying to multiply it and you're getting uh some other kind of value let's say you do this then you get zero so this is what happens if you are finding it a little difficult to wrap your head around don't worry just take a look at the different kinds of data that is available now other kinds of data that is available is arrays and objects and we'll discuss both of them in a moment these are containers they can contain multiple values of different data types and they can contain the same containers inside them as well and we'll take a look at that now so let's take a look at this now that we have taken a look at data types and have had a hands-on to understand what different kinds of data types are available namely string numbers boolean and undefined let's take a look at what else we can cover so now we'll cover operator operators are basically used to manipulate data available in memory as i have discussed in the previous hands-on when you want to add two numbers you use the plus symbol that is an operator operators are of multiple kinds to perform multiple operations depending on the data type and the data available in them so we'll take a look at them one by one but the important bit to understand is that operators need some data now you can have operators that are unary binary and ternary unary operators operate on only one variable or one operand operators of operate on variables and those variables or data sets are called operands so if you only have one variable that can be manipulated with an operator it's called an unary operator it only needs one variable to work we'll take a look at the specific examples of these one by one then there's binary operators which take two operands and you can use these two operands to use use these two operands in order to perform some operation using the operators finally there's the ternary operator in which you use few symbols in order to operate something we'll take a look at the ternary operator after we have discussed conditionals and we'll try and explain what that means so that it's a little clearer for you because these these two things are related but these are the things that an operator is so we need to understand what an operator is which is basically just some symbols that we use in order to manipulate some data that we have available in memory basically variables although these values could also be just the literal values that we see and not some data that we get from the user and store inside a variable however that depends on how you wish to use it so now let's take a look at how you can use operators for your benefit now let's take a look at a hands-on in which we'll be taking a look at the different kinds of operators that are available and how you can use those operators in order to work with data that we have available so open up the web browser and open up the console so you can just write the code and see it work now for this you don't really need any kind of a different environment you just need a web browser let me just create a variable call it number and i'll assign a value of zero the first kind of operator that would like to discuss is a unary operator this operator allows you to increment the value of a number so if i have a number and i want to increment its value by one what i can do is num plus plus right now the value of number is zero i do this press num and now the value is one this is called a unary operator because i only need one variable for this to work with this operator now it doesn't necessarily mean that i just have to write the plus plus operator right at the end i can also write it at the beginning and you'll see a difference here so earlier the value inside number was zero i used the plus plus operator i pressed enter and i got a value of 0 here then i when i take a look at the numbers the value inside number it became 1. right now the value inside number is 1 i use the increment operator right at the beginning instead of the ends and i press enter now i get 2 and now if i take a look at this i get 2. so what exactly changed here what happens is if i want to first access the value of a variable and then increment it so i will use the plus plus operator at the end this is called the increment operator so this is called a postfix because i am using the increment operator after the variable name so if i wanted to print it and then increment it so let's say i was going to go like this console.log number is currently 2 press enter so i print 2 but now if i take a look at the value is 3. similarly if i were f would have gone plus plus num right now the current value is three and it should print four so it increments the value and then prints it and in this case it prints it here the current value and then increments it which is this so that's the unity operator uh you don't really have to worry about it because it's not just increment you can also decrement it like this so now we have number three here but if i want to do this i have two and the same thing in the same logic applies here as well so now that we understand unity operator let's take a look at a few binary operators as well this is what we can do in arithmetic so if you want to perform arithmetic operations such a addition multiplication division even subtraction and there's a modulo operator as well and we'll take a look at them now if i have two values let's say bar x is equals to 10 and y is equal to pi and if i want to check x plus y i can just use the arithmetic operator as you can see that this requires two values one on the left hand side one on the right hand side this is why it's called a binary operator binary means two so i get this similarly if i want to subtract 5 from 10 x minus y is going to work if i want to multiply these two values i can do that if i want to divide them i can do the same here as well one thing that you can notice is that if i wanted to take a look at the remainder that we get after we divide x and y we don't get it here but if i want to get that i use the module of it which is the percentage symbol it means divide x and y whatever remainder is remaining print it here since 5 is perfectly perfectly able to divide 10 that means that you don't get any remainder but if i were to divide 12 by 5 if i were to do that 12 divided by 5 i'll get 2.4 which means it doesn't perfectly divide 5 and the remainder is 2 that's the way it works so that's one way of understanding binary operators these are the uh arithmetic operators that have been available to us or for us to use in javascript javascript doesn't necessarily have just the arrays arithmetic operators it also has other operators which we'll take a look at now but it's important to understand that there are these operators are important and there's operator precedence as well such as board mask so you can take a look at that if you wish to as well then there's the assignment operator which we have been using so far so if i have a variable named z and i assign it 45 this variable or this is an operator this symbol that's the equal to symbol this is called an assignment operator if i want to assign a new value i can just use the assignment operator and this box as well so that's the assignment operator again it needs two values so it's a binary operator and then we have addition and multiplication which is something we have already taken a look at increment and decrement is also something that we have taken a look at but one thing that we can also take a look at is a shorthand example so if you are using a variable let's say x i will assign a value of 1 here and what you want to do is you want to increment it by 10 now x plus plus is only going to increment it by 1 but if you want to add 10 to it then you have to assign it again so you have to go the current value of x should be whatever the value of x is plus 10 so i have 1 which will be substituted here and plus 10 which is 11 that's one way but it's a little cumbersome to write x again and again now let's say that the name where the value was users age is 10 so i would have to type the user's age equals to users age plus 10. it's a little annoying so another way you can do it is something called a shorthand you can just use plus equals 10. that says that whatever the value of user is add 10 to it and then assign it to users age variable and that now the user's age is 20. had i just written users age plus 10 i would get the new value but inside the variable i will still have 20. just a quick info guys test your knowledge of javascript by answering this question which event can be fired on a scrollable document element a window b scroll c load d unload comment your answer in the comment section below subscribe to intellipart to know the right answer now let's continue with the session because i have not assigned it i just calculated it and threw up with the variables new value so that's the shorthand operators it works with all the operators that we have taken a look at so far which is the multiplication division addition subtraction and modulus operators as well so that works um another thing is if i were to do this this will raise it to a power it's called double multiplication so if i have a value let's say i have 2 raised to the power 10 it's 1024 so you can take a look at that as well and this also works in the operators so with that now we can also take a look at comparison operators comparison operators are really important to understand because this will form the foundation of the next topic that we'll understand which is conditionals so let's say that i have a user's age let's say i've asked the user to provide their age this is 50. now i want my application to be used only by people who are above the age of 40. so i want to check something which is whether the user's age is above the age of 40 not 40 above the age of 40 which is 41 and anything above 41 so to do this all i have to do is type in x is greater than 40. since current age is 15 it's not equal to 40 i get false this is a value that i can use later on i'll show you how i will do that in conditionals but right now you need to understand that this is what's telling us whether or not a particular statement is true or false uh users age is greater than 40 the compiler is telling us no it's not the user's age is 15 and it is less than 40. so we get the output as such so different kinds of comparisons are available such as less than which is this greater than which is this equal to so if i want to check if user's 8 is equal to 15 i can just use this in javascript this triple equals also available uh since javascript is a dynamically typed language if you want to compare 15 to be equal to 15 you will get true here because what javascript will try to do is it will either convert string to number or this number to string and it will check whether or not those two values are the same but if i use triple equal that means strict equality that basically says okay whatever the value is it needs to be of the same data type and the same value as well don't juggle the type for me just tell me if it's the same and here it's false so that's another operator so we have taken a look at less than greater than inequality operators what about not equals so i want anyone to be able to enter this application who is not the age of 44. for some reason i don't want anyone to be of the age of 44 to enter this application right now age is 15 it is not equal to 44 this exclamation point simply means that it's not so that works now the other operator that is available for us apart from a equality not equality is something called greater than and equal to so let's say i have the age to be 20 and i want to check if anyone who enters the application is of the age 20 or above this is true if i remove this equality symbol that means that age is not equal greater than 20 it is equal to 20 so it's not going to be true this checks both whether or not a person is person's age is greater than 20 and equal to 20. similarly if you want to take a look at less than and equal to 20 this will also work it's equal to 20 but if it's not less than and again if you want to take a look at whether they are equals that's true as well so these are the comparison operators that we have available now we have logical operators as well now logical operators allow us to bunch together some different comparison operators let's say that i have the age of a person to be 18 and their monthly income let's just variable age is 18 and income is equals to 15 000 that's i'm trying to create an application where person whose age is 18 and income is 15 000 are allowed to enter so anything above that can be used so how can i check two conditions basically is the age equal to 18 that is true is the age equal to 15 000 oh sorry not the age it's the income that's also true but how do you check these two things right at the same time so this is where the and operator comes so age is equal to equal to equal to 15 and income is equal to equal to equal to 50 this works this basically means this statement is only true once when both the conditions are true so this is equal to 18 and this is equal to 15 000 as well if both of them are true then it's true and you can also add other things as well such as if the age is less than 19 which is going to be true because 18 is less than 19 so it's going to be but this is just to show you and you can add more conditions like this as well now what if you want to check only one of these conditions is true so either the income is equal to let's say the age should be 20 but if that age is not 20 but the income is equal to 15 000 then they can enter this is where you use the or operator which is these two pipe symbols and that's where you can do that uh doesn't necessarily mean that that's the only way you can mix and match these operators you want to check two things and multiple things as well you can do that here as well but these are the basic uh comparison of a basic uh logical operators that you can use the last logical operator would be not but if i want to check okay is age equal to equal to 50 but i want to check if the age is not equal to 50. so i can just and and age is not greater than 40. so if i want to just make sure that whatever the answer of this is going to be i want to just invert it if it's true make it false if it's false then make it true then use the not operator which is the exclamation point and this will work this will flip the result on its hand so these are the three operators that are available for us there now we have the bitwise operator which you can use bitwise operators are only useful when you are working with binary data so let me just show you the binary data that you have uh in order to check whether or not the binary data is going to be worth full for you binary data is useful because underneath the hood it will always take a look at the binary representation of the data we write the code but it doesn't necessarily mean that the code that we are writing is going to be written in binary so one way to think about it is this let's say that i have a number 5 right now that number if i want to take a look at the binary representation of it so i can just write to string it will convert it this is the two string and so this is basically something that will work if i just type it variable x is equal to 5 x dot to string 2 and this is the binary representation the reason why we have to write 2 here is binary is something that needs 2 as its base so the normal decimal number system that we use which has numbers from zero to nine being used throughout in binary you only have one and zero so underneath the hood your computer can only understand ones and zeros so that's why binary numbers are so important in computer now let's say we have this and we can perform different kinds of operations here so x is 1 0 1 and 2 dot 2 string 2 y is equals to 2 and if you have y you could take a look at 1 0. so we have one zero one and we have zero one zero uh this zero is just padded at the end so that these three variables come in line so now if i want to uh perform some binary operation such as and or or not in case you're not familiar with this don't worry about them but if you are you're working with some low level techniques then you can just use x and y and then what you can do is you can just uh z equals to x and y so it returns the value of zero we check the binary representation of this as well and we get zero the reason why is because if you remember we have one zero one and one zero what happens is it takes a look at the 1 0 1 and 0 1 0 numbers and it takes a look at the adjacent pairs so these are the two numbers that are right next to each other so if they are both one then only the output will have one in that place so zero and one will return zero one and zero and zero one is also going to return zero but in case i had done this now i have seven and if i want to check why i could just said if either of the number is one then we're going to get one and one one one in binary will convert to seven in decimal and there are many other operators available as well such as eleven two shifting the numbers by two and something like that so 11 by 1 is 22 and if i were to shift 11 to the left side by one it's also this so that's the way binary operators work there are many other binary operators available for you to use as well but that's one of the ways you can do it so these are all the operators available for us to use in many programming languages multiple operators are available for you to use if you have always if you have already worked with any programming language these operators may seem familiar the binary operators are operators that you would not have to use unless you are working with some binary data and you want to manipulate it underneath the hood which is why quite rare other than that you can use any of the operators that we have discussed all right let's see what else we can take a look at all right guys now let's take a look at conditional statements so conditionals or conditional statements are used to make decision in a program as we take as we have taken a look into operators and we determined how we can use conditional or logical operators in order to figure out if something is true or false based on these values we can then define how we can how we can how we want our code to perform so for instance if we have some code and in that code what happens is you want to get the user's input and then determine whether or not a person's input the input that the person gave which is the person's age is less than 18. if it is less than 18 then they cannot access your website let's say that it's a voting portal and about the age of 18 is the person that can vote in your country so that's the threshold that you have determined so that's the way it's supposed to happen now you can check using the operators that we have discussed but how do you determine what code to run when a particular condition evaluates to true this is where conditionals come into play now in conditionals we have multiple ways of dealing with things we have if we have else we have switch statements we have if else nested else if statements and there are many other kinds of operators uh that are many other kind of the conditional statements which we'll take a look at also we'll take a look at ternary statements now ternary operator is an operator that we didn't really take a look into in when we are discussing operators but we did alluded to it mainly because uh the ternary operator is a substitution for a simple if statement so if you have an if statement that's really simple and don't want to write that much the lines of code you just want to write a single line of code that will explain it all ternary operators are really useful in that it's called ternary operator because we have already discussed unary and binary operators in a ternary operator we have three operands so in unary operator we had one operand which was the increment and decrement operator and the variable that whose value we were incrementing or decrementing then we had binary operators such as addition multiplication and division operators and other operators as well such as assignments or not and now we have ternary operators so these are the things that we'll discuss in the hands-on so let's take a look at that next now let's take a look at loops loops are used to run multiple times until a specific condition is moved so let's say that you have some code that you want to run multiple times until specific condition gets met let's say that you want to print the multiplication table of a number that the user enters now for that you could write 10 console dot log statements each of in each of which what you will do is you will increment the the number from which you're multiplying that number from so let's say the user enters 3 so you write 3 multiplied by 1 is equals to 3 3 multiplied by 2 is equal to 6 and then you keep going on like that that would be useful however since there's a lot of repetition of code and only the variable only the counter is changing from 1 to 10 we want to automate this process this is where loops come into play now this is not the only place where you use it in fact loops are so fundamental and core to programming that they are used multiple times so basically what we're doing here is we're saying okay we want to execute some bit of code however we want it to be executed for n number of times this comes in handy when you have container objects such as arrays and objects which will discuss after loops but this is also helpful when you're trying to just uh go through something for a n number of times in cases like this loops are really helpful loops are of three types for while and do while we'll cover all of those in the hands-on which we'll take a look at okay guys a quick info if you're looking for an end-to-end training in javascript intel ipad provides a full stack web developer course which covers javascript and all the javascript frameworks you need to know for more details check out the description box all right guys so now let's take a look at a hands-on using loops again the setup is going to be the same we have yeah some code let me just zoom out a little bit so that it's really easier for you to see and i have the same code editor now let's write some code to make sure that we understand let's say that we are getting uh some number from the user uh let's say for num is equals to pass integer prompt and a number now i want to print the multiplication table of a number now multiple ways i can do that one way would be to use the this index and now we can just do it again and again for 10 times let me just start from the beginning so that you can see two two three 4 5 6 7 8 9 10 8 9 so if i were to save this i would it would work if i just named the word console correctly now that's done i'll save it go back refresh 5 press enter and 5 multiplied by 3 is equal to 15 uh it's just a little now it's going to be visible intact i think there's an extra space between multiplication and equals to ruler to just correct that save this go back refresh this 5 enter and now the code is correct so 5 multiplied by 1 is 5 multiplied by 2 is 15 uh oh that's not correct again as you can see the mistakes that we are making even when we are manually trying to recreate some good it's by press enter five ten fifteen twenty twenty five thirty thirty five forty forty five fifty one two three four five seven yeah so it's correct now the issue is that let's say that the person says okay i don't want it just to be there just till 10 i wanted to be there to till 20. so 5 multiplied by 11 12 13 14 15 16 20 till then so now again we have to write the same code and we have to make the same changes this is very tiresome so in order to overcome this if you take a look at the code the only thing that is changing is this number right here and here so we can change that and here where loops come into play before variable i is just 0 i will be the number that we will multiply it for i is just a common variable name that we use for loops i is equals to 0 i is less than let's say 10 but we want it to start from 1 less than equal to 10 and i plus 2 now all i need is just one line of code that's all you can put aside so number plus i save this go back refresh five enter so five multiplied by one two three four and it works so what just happened is so this is the piece of code that's different so let us explain this one by one so it has three parts the initialization phase in which we initialize the variable with the initial value here we have initialized a variable named i with one the condition phase where we check if the condition is true if this condition ever evaluates to false that means we have met the condition we wanted to meet and we want to quit the loop and this is the uh change phase in which we increment so the way it works is our javascript interpreter takes a look at the loop creates a variable assigns value 1 then checks if one is less than or equal to 10 this condition evaluates to true so this code gets executed and then we increment one so it becomes two so we check again if 2 less than or equal to 10 it is go back put number plus when we create the string where number multiplied by 2 which is the current value of i is equals to number multiplied by 2 then we increment it's 3 and the same way we keep going till we reach 10 we check if number is less than or equal to 10 10 is equal to 10 not less than so we execute the code uh incremented by one it's 11 and now this condition evaluates to false so we just come out of the loop nothing left to execute so we just end our code so that's the way for loops for loops are the oldest loops they are used in many programming languages any programming language that you wish to use you can use now if i were to show you the same problem that we had earlier let's say that the person says i want the program to show me the multiplication table till 20 run this and it's showing till 20 uh you can even go further to 30 40 50 whatever you want but now it's just a number change so as you can see it allows us to not repeat ourselves uh look at a lot of not errors and allows us to write code that doesn't contain any error because most of it is automated by the computer so that's just one kind of proof there are many kinds of loop available and we'll take a look at them one by one now instead of getting the input from the user because it's a little tiresome and a little difficult i'll just assign it right now right so this is one kind of loop let me just comment it out so that it stays here but it doesn't get executed so this is done now i'll show you while loop so this is what it looks like but here some things are going to be different so the in initialization phase i is equal to 0 i is less than equal to 10 then we are going to use the same thing that we had written earlier and i plus plus so as you can see we have the same three bits but their position has changed earlier we had them all written in the same place here we have i which is the index variable and it is at the top we can declare it any way we want it doesn't necessarily have to be here similarly if we had declared it earlier some places we can just drop the var keyword and it will work just fine now we have i equals to 0 now we check if the number is less than equal to 10 as long as this condition is evaluating to true we will continue printing whatever it is inside the code and we will check again so we check it we print we increment check print increment check print increment check and we keep doing it again and again if i go back refresh i get same thing however this time it's starting from zero and that is because i had my variable set to zero where it should have been set to one although zero works but still it's the way it works and now we have that so this was a while loop and this works as well again let me comment it out so that you can see and now let me just show you the two while this is what it looks like so we just need a condition here and it's going to work exactly the same variable is equals to this this is the code that we want to execute and the while loop is going to be just if the i is less than and equal to 10 and finally we have to increment it as well again this is going to work exactly the same if i go back to refresh it works but there's a bit of an issue here but not an issue but the difference between while loop and while loop is not just semantics because they look exactly the same but what happens here is let me just remove this yeah so now it's going to print it then going to print it again what happens is if i were to change this variable to be 11 and if i were to change this variable to be 11 as well uh what happens is if i go back and refresh 5 multiplied by 11 is equals to 55. so what's going on here is in the do while loop we have the variable set to be level we print whatever we wanted to print then we increment the value by one and then we check the condition in the while loop we check the condition and then we print something so that's the whole difference it's called the entry controlled versus exit controlled loops in entry control loops before the loop starts we take a look at the condition if it evaluates to false nothing gets executed in exit control groups at least once the e-code gets executed but if the condition evaluates to true after the execution of the code then we get this even then we will still print something so for instance if this code is printed that means that this condition even if it didn't evaluate to true we will still print it once then it increments so 11 becomes 12 and we check if 12 less than equal to 10 it's not uh it is not equal to or less than 10 it is greater than 10 so the loop exists so that's loop in nutshell that's how loops work in javascript and in many other languages these are the three kinds of loops there are other kinds of loops as well which we'll discuss once we are done with arrays and objects because those kinds of loops are used there so we'll take a look at that in the array section so let's take a look at the arrays now arrays so an array is a container type a container type is used to store variables or values of different types so arrays are used to store multiple data points or multiple fragments of data in a single variable uh to give you an example let's say that you want to store the marks of a particular student and you want to store all the marks in one variable if you are trying to store the marks of a person in english in the math science geography these five subjects you can create variables with these name and you can store the data inside them however if you want to store them all inside a single variable then you can use arrays arrays have two parts to them indexes and values indexes are the uh you can think of them as roll numbers so they start from zero and then the marks of the student so whatever you insert at the beginning will go at the zeroth index then the first index then the second index in javascript arrays are dynamically sized so you don't have to worry about running out of space or you don't have to worry about declaring an array of fixed size because they size dynamically so you can store as much information as you want in other languages such as c plus and java you would have to declare an array of a specific size and then use that array only you can't use multiple arrays so that's the difference between the arrays in javascript and other languages also in strongly type languages such as c plus plus java you would have an array that can only store value of one type so if you want to store integer values you can only store integer values only one store string values or other kinds of paths on the other hand here we can store values of multiple types in an array so we can store a variable that is of type integer then string then boolean then again integer then again boolean then again integer and many different kinds of data in any format that you want if long is it supported by the language by the language they can be stored inside here in fact we can store an array inside another array and that also works so that's how this works let's take a look at a hands-on and figure out how arrays can be used in javascript so again to follow along just that we had done earlier just need to have an index.html page uh open up the console and open up the code so here's what we have we have used the used trick now uh we'll take a look at multiple operations that we can perform on arrays the first thing we have to understand is how you can create an array to create an array it's quite simple i'll use the var keyword uh i want a new array so i want an array of the marks of a student i'll call it mars and i'll assign it to this this is an empty bracket i save it go back refresh now if i take a look at marks it's an empty array also there's an array constructor as well so if i just use the new array function this will return the same thing as well but we don't need to get ahead of us this is how we can create an array now creating an array is quite easy you can just create an array but how do you initialize it so this is an empty array if i want to add some values to it let's say that the student has 88 56 55 44 55 these are the forma go back refresh marks and these are the formats if i expand this here we'll take a look at this this is the index which is corresponding to the variable since this was the variable i inserted at the beginning but this is the data that i inserted at the beginning it got the number 0 associated to it similarly 1 was associated to 66 2 was associated to 44 and 3 was associated to 55 and i have a property length which tells us the length of the entire array so basically if i were to take a look at marks dot length it will show me the number of elements inside an array that's one way if i want to access certain values let's say i want to access the value at the beginning there you go so i can just use this 0 1 2 3 to get the values so 1 give me 66 2 would give me 44 and 3 would give me 55 now what about 4 well it will give me undefined mainly because if i these indexes don't exist so they are not available for us to use if i go back this is what it looks like now as we know that we use indexes and indexes are sequential 0 1 2 3 they are assigned on the basis of arrival of the data now if i want to go over these and print all of those one by one what i can do is i can use a loop for variable i is equal to 0 is less than and here's where the marks come into play marks dot length and i so it will go from 0 1 to 3 as soon as i becomes 4 it will end it out of the loop so we'll only get 0 1 2 and 3 which are the valid indexes and i want to print mass of i save this go back refresh and here you get the number now this is where a simple for loop works but another thing we can do is instead of using this because it is a lot of values what i can do is for variable x in marks and if i print x go back refresh yes where you get 0 1 2 and 3 so you get the indexes and you can do it there as well and uh there there's a 4 off loop available as well that you can take a look at you refresh and here which you get values so if you want to take a look at the indexes you can just go for x in and it will get you that if you were to go for off this this is how it would work just a quick info guys test your knowledge of javascript by answering this question which of the following is not considered as error in javascript a syntax error b missing of semicolons c division of 0 d missing of brackets comment your answer in the comment section below subscribe to intellipaat to know the right answer now let's continue with the session so this is how this variable works in other languages you would have to do something like this uh especially in java but here it doesn't work like that so that's the way you can loop over an entire array but how about you have an empty array and you want to enter some values into it the easiest way here is if i go back to my code i'll just show it to you here let's say arr goes to a new array now if i want to add new data into it all i have to do is err this is empty right now dot push push is allowing me to insert some value the f here means i have to put these three brackets here this means it's a function don't worry if you don't understand functions right now i'll explain it to you in a moment but let's say that i want to enter uh some item if i want to enter just one number i can just enter 15 press enter and now err has 15 values but if i want to enter more numbers 16 17 80 all of these will be inserted as well and there you go uh it returns the length of the array so whenever we insert something it will get back the length since we inserted three values after what we get four and this is what's returned we have these four values now that is done but uh let's say i want to remove the element i can just pop and this will remove things at the end now instead of getting 15 16 17 18 i get 15 16 17. uh if you pass in a number and pop it will remove it it won't make much of a difference it will still remove the same things similarly it won't throw an error basically and you have one value if i were to pop again and then again since last value was removed nothing is here so you can't have anything as we discussed arrays can have values of multiple types so let's say it's a string zero true a r is equals to this now if i want to find the uh value i can find the last index of true the true was found at the second index this is easy for me to find things if i want to find some string that but it doesn't exist it will return me an index of negative one so that's how it works anyways arrays are really complicated in javascript you can have a lot of functions a few functions that i'd like to show you that are very important let's say that i have numbers this is an array that has 1 2 3 4 and 5. now suppose i want to create a new array out of this array and what i want is all of these numbers uh squared so 1 multiplied by 1 2 multiplied by 2 3 multiplied by 3 4 multiplied by 4 and 5 multiplied by 5 ah simple logic that we have learned so far is use for loops go over each value or var x off and inside is we pass in nums let me just show you in the code i'll just copy here paste it here then our result is equals to an empty array for x of nums we get x and result dot push x multiplied by now if i console log the result save it go back refresh this is what we get we get 1 4 9 16 and 16 and 25 this is exactly what we want now this works but as you can see again you have to write so much code to get something really simple done uh in other way if you want to do it i can show it to you right now result is going to be equal to and i take nums and i'm going to call a method on it it's called map this function it will uh take another function and i'll display and show you what that means but this is called functional programming we'll discuss more about this when we are discussing functions but right now just take a look at what happens i'll just return x multiplied by x and this is done i save go back refresh and i get the same one so as you can see multiple ways of doing the same thing in javascript some are more concise however it takes a little bit of time to get around those some are really easy to use so we have understood how to declare a an array how to add elements to an array remove an element from an array access elements from an array and loop over there these are the basic functionalities if you want to take a look at the functions available for arrays just type in nums dot and you can take a look at all the different kinds of values that are available for you to use shift unshift splice slice reverse reduce and many other kinds of functions such as index off and last indica the difference between the two is that indexof will give you the first index that it finds of a number so let me just display that for a month let's say that array is equal to one one two two to find the index of one i get zero but if i were to find the last index of this will give me one so if you take a look at this first time i encounter one is at the zeroth index and the last time i do it it's at one if i were to change this variable here and add one at the end now if i were to use index the value is still the same but if i were to use the last index of one i get five so this is the difference between the two let's take a look at objects so objects are the fundamental type in javascript objects are really important in javascript because most of the things that we work with are essentially objects objects are container types basically they contain other kinds of data objects can contain objects arrays and any kind of data that they want similar to arrays they are also heterogeneous meaning that they don't need to contain only one kind of data they can contain different kinds of data the only difference between arrays and objects is that in basic uses is that objects will use key value base now key value pairs are really easy to understand basically just like in arrays they have numeric indexes that are automatically assigned as you add and remove elements so as when you create an empty array there's no elements in it you add new item to it it gets the index zero assigned it to it then you add another item index one is assigned then you add another item index two is assigned when that element is removed index one is the highest value of our index is there and then when you add another item index two is assigned again so as you can see sequential increases and decreases based on the length of the array now the difference here is that in objects you can instead of assigning 0 1 and 2 it's up to you what you assigned to the values so basically if you are trying to create a table like structure in which the name of the person is supposed to be the key and the value is going to be their salary you can do so just put their name as the key salary as the value and keep doing it for all of those and it is an object objects are also fundamental in javascript because they are very synonymous to other kinds of objects such as if you have ever worked with object-oriented programming in other languages and object-oriented programming is something that we'll discuss but in object-oriented programming you have classes and objects those are slightly different from what we're covering right now so don't worry if you don't understand them right away basic idea behind this is that objects are containers that can contain key value bits they are more similar to hash tables or hash maps than they are or dictionaries if you are in python uh but they are more similar to those than they are to classes and objects in the traditional sense of object-oriented programming in case you don't know object-oriented programming and hashes and all of that don't worry about it we'll take a look at a hands-on and which will understand what this actually means however if you are familiar with these topics then you can you have a nice ground level understanding of how what this is how to use it however is something that we'll cover on a handout all right guys now let's take a look at a hands-on involving objects so for this firstly you need a web browser opened you can open it up in any web browser that you want as long as it has a javascript console to get into the console just press ctrl shift i and then click on console find this a little and yeah now it looks so the way you can create an object is very similar to the way you could create an array so for arrays you needed to use either the hand which were two brackets open and close or you can create new array right and that would also create an option now to create an object however it's quite easy to do all you have to do is either just create a new object which is exactly the same or if you take a look at the symbols below you can do this as well and you have an object here as well so let me just show you if you take a look at type of it's an object also if you type and take a look at the type of array it's an object as well as i said object is the fundamental type every uh thing that's not a simple or primitive type such as boolean string and all of that that's an object so you look take a look at that this is a string but this is an object so arrays are also kind of an object so now if i want to create an object i can just assign obj is equal to and here we have it so if i create obj now it's an object again if i wanted to do it the other way all i had to do was create a new object and this works as well it's exactly the same thing as you can see now the object is created now it comes time to add things to an object now as i said objects are key value pairs right so one way you could have done this is if you want to create an object here you can just add things right here so let's say that i want to create an object in which the key here i'm trying to store the name and address of a person or let's say name and salary of a person so all i have to do is type in name and the name is supposed to be whatever i want to it to be let's say john then let's say salary a-l-a-r-y salary and let's say the salary is going to be 50 as you can see that name is string salary is um not string its number so you can you can do it this way as well if you want to it doesn't really matter what kind of a value you have for the values also if i wanted to remove these i can do so as well javascript will automatically convert them into strings so i have this it doesn't really matter if i want string or not i can also have all numbers mapping to numbers as well so let's say 2 4 this works as well now if i create an object i can take a look at the object in the console this is what it looks like 2 will map to 4. name will map to john and salary will map to 8000 uh in a similar fashion of array i can also access these things by indexing into it so if i type 2 you have 4. that's not the only way you can access things though if you want to access the name i can first type object.2 this will give me an unexpected error because 2 is a number but if i access it using the array syntax it will work however if i were to access obj dot name this will give me john if i were to access obj dot salary this will give me the salary of a person so this is how you can get the information from the objects so this is how you can create an object and add data to it right at the same time but how about if you want to create an object on its own and then add data later on as the user adds it so again you can just create an object which is an empty object and now if i want to add anything the same thing i would do anywhere i would just type in obj and now i can do it in the same syntax that i had done earlier so i i can type in name to be equal to john now if i take a look at obj this is what it looks like also if i want i can type in name dot s-a-l-a-r why salary is equal to 50 and now if i take a look at obj this is what it looks like this is how you can add data to an object this is how you can create an object how you can initialize an object add data to an object now let's take a look at how you can remove data from an object if i take a look at this it looks like this if i were to take a look at name and now if i delete it and then take a look at obj it only has salary so this is how you can delete it use the delete keyword in front of the object and the key name that you want to delete it and it will delete everything now you have just one property or one key salary and one value this is 50 000 these are the keys these are the values so this is how that works again if you want to loop over an object you can do so as well let me just again yeah so now we have obj and we have name and cell another thing to notice is that it doesn't really matter how you add things into the object if i add name first and salary first it doesn't really matter it's really fast for lookup also if i try to access an element that's not inside the object let's say not found it will return undefined so just be sure to use this so if i want to check whether or not some key exists inside the object that you can quickest way to do it is check if it's equal to undefined so this is going to be equal to undefined name is not going to be equal to undefined because we have name equal to john now if i want to loop over the objects and print everything inside it all i have to do is use a for loop for variable key in object console.log key plus and this is string concatenation then you press enter and everything is working exactly the way it should be so the salary mapping to value name mapping to this value and this works easily so this is how you can write code and have it be executed now again another thing i'd like to show you which i hope i have shown you by by now if i were to remove these curly braces what do you think will happen it will still print it so the difference between the two is let me just show you so this is what it should look like without the curly braces right if i were to add another line right at the right after this and say next property so if i press enter as you can see first the loop executes this then this and then next property however i want both of these statements to be executed in the loop now for that i have to open up a curly brace and then close the curl depression now if i do this this helps this is what happens so what's going on here is if i remove the curly braces only the first statement gets executed in the loops body if i keep the curly braces then everything inside the curly brace is included in the loops body so for instance if i were to add new code lines to it they will also get executed so this is a good trick to remember so if you have an if statement where you only have one thing to do so let's say that 1 is equal to equal to 1 then i want to print console.log true and press enter so it will work however if you have multiple statements then you don't use curly braces uh depends on the code style that you prefer as well i would recommend that you use curly braces whenever you can but however you if you take a look at code like this don't think that it's invalid it's perfectly valid so now we have looped over the elements we have taken a look at everything another thing that i can show you is the object function so functions are not something that we have discussed thus far we'll discuss them in a moment but the object is in javascript and object itself so you can take a look at a lot of things that these things have for us these are the properties and these are the functions that we can use on objects to understand how to use them you don't have to worry about them right now this is just to show you that javascript has really great inbuilt support for objects if you ever want to use object you want to perform some tasks with an object first take a look at the javascript documentation on mozilla developer network to see if it's not already developed if that feature or that function is not already there then you could implement it on your own all right all right guys now let's take a look at functions so functions as we have already discussed a function is a named block of code which used to wrap a few statements that should be executed one after the other and given them think of a bit support that is really important to you any piece of code that come one after the other so for instance let's say that you want to connect your database that needs certain steps to be followed you need to create the url you need to uh send a connection request and then you need to handle whether or not the connection is successful or not this is going to happen every time these bits of code are going to be executed with each other this is why we need a named block of code so that we can call it whenever we want to this is a function another thing you can think about is how you can write data to a file to write data to a file you need to first open a file uh after opening the file you need to write the data into the file then you need to save the file which is basically closing the file so these three steps need to be executed one after the other all the time so this is where functions come into play you can create a function call it write data to file and that will do the same task for you again and again so that you don't have to do it manually over and over again this is what functions actually do now when we come to actually understanding what functions are and how to use them there are several intricacies that we need to be familiarizing ourselves with function names declaration calling a function first class functions which is a special concept in javascript which will take a look at function arguments and returns so we'll take a look at all of that as we move on to our hands-on so let's do that so again we would want to have the same setup that we did earlier create in index.html open up the console open the index.html inside a code editor i'll be using visual studio code you can use any code editor you wish to use and here i have used the use strict uh declaration so that javascript's interpreter doesn't allow for any small mistakes this will keep our code clean and easier to use now when we're talking about functions let me just show you what a function is suppose i want you to create a i want you to greet someone right so for instance to greet someone firstly what you need is you need to console.log hi then you need to print hope you are well and third one would be nice to meet now suppose this is uh something that you need to use in multiple places in your code so for instance this is one thing now you want to let's say your code is spread across multiple files and now you want to use it in in this file as well this is a separate file let me just comment that out file2.js this is going to be the file name and this is file1.js so this is how it works now both of these files will be included and they will get executed that will work so if i go back refresh and this will be printed two times which is good now what happens is someone comes along takes a look at our code and says this is fine but after nice to meet you put a put is uh put a full stop just to make it dramatically correct so after everything put a full stop i save this we go back and i refresh now as you can see that if the person did know that this code was also written by the same person in some place some other place if they forget basically if this code was written this change was made two or three months after someone had written it and someone else is making the team they have no way of knowing whether or not the changes are there so what happens is this code and this code are now out of sync nobody knows that this code is also doing exactly the same thing but this code was doing the same thing and had some changes applied to it which this code didn't so again that's a bug in your system so how do you come about doing this but you the way you do it is again the simple way in programming is that you do not repeat things so let me just close this out right and now i can create a function for this function will allow me to give a name to this entire block of code and that name is going to be referenced at another places any change i make to this function's definition is going to be changed in other places as well to create a function is quite simple use the function keyword function function give the function a name i'll call it greeting then use these these are called parentheses i'll show you what they are and why they are useful in a moment and then we define the function body the same way that we had defined the bodies of loops as if statements and this is where we are now this is the function that we want to use let's say that this is in its own file right after use trick and now if i want to call this i'll just call greeting here and i'll call greeting here whenever i want to call a function that basically means okay this is a function execute the code inside it these parentheses are going to take a look at the function and execute everything inside it so whenever you put a parenthesis after it it basically means that this is a function and i want to execute it i want to run everything that is inside the body of this function if i save this i go back refresh we get the same result but now if i want to make a change that i had earlier done here here and here save this go back refresh again as you can see the changes are reflected in both places and this is a treble example it's in both places in real world scenarios this can be a reference in multiple places so that's the difference we are trying to avoid so that's one way this is how you can create a function this is called declaring a function or creating a function declaration and this is what's called using a function or calling a function called now that these two things are done let's just return and see what else we can do suppose you want to perform some complicated mathematical operations right let's say that you want to i'll just call it calculate right a person enters a number to your program and what you want to do is you want to take that number and square it then add 2 to it and then divided by 2. so for instance you take let's say the number is 10 right so you want to firstly square it which is basically you can either do it this way or multiply the number by itself so number is equal to number multiplied by number that's the first thing then you want to add 2 to it number is plus equals 2 and finally number should be divided by 2. you can either do it number divided by 2 or the same way that we had done with the addition you can do it this way so that works uh now thing is this will only work with 10 so if i call this function this will work with 10 calculate everything but it won't do anything with it refresh nothing happens what goes on at the end is that it creates a number in memory performs these calculations and then forgets about it because we're not printing it we're not doing anything about it so the way to deal with this is firstly we want to accept some input into a function now either you can just call a prompt and say okay give me the user input but this creates a problem that whenever you are using the prompt function you are tying yourself to the browser because uh because prompt is only a function that is available in the browser what if the user was to was to send the request via an http request and you are writing this code on a web browser instead of writing it here you are writing it in a web server that becomes a problem i just want access to a number i don't care how i get it so this is where parameters come into play if i want a number i put it here so now whatever number user enters i'm just going to square it add 2 to it divide it and now i want to return the result this is also quite easy returning a result basically means whatever i have calculated yeah give the result back to the user who called the function now i'll call number save it and now if i were to console.log and this will take a number so if i enter 10 to go back refresh and this is the output let's check 10 multiplied by 10 will be 100 100 plus 2 is equal to 102 and 102 divided by 2 is equal to 51 so this is exactly what's happening now it doesn't necessarily matter that i only need to have two parameters i can have multiple parameters as well so instead of number i can also say um value and now instead of two it could be three it could be four it could be anything depending on your use cases so i can here possibly to save this go back refresh and it's the same thing but if i want to make changes i can just go 11 and save this go back refresh and this is what you get so as you can see that this works really well now what is a function it is basically a name given to a block of code it can accept some parameters perform some operation on it and can return the output these two things are optional the function body if it's not there then it's basically just an empty thing it's not doing anything it's just a name for no code at all so you can do that as well another thing that you might want to consider is that functions are first-class citizens in javascript this is quite similar to other kinds of languages however most languages don't implement these kinds of things so what that basically means is that instead of using functions as a high level concept it can basically be assigned to a variable so let me give an example let's say i want to create let's say i want to create first action is going to be i can create a function without giving it a name it accepts some value and returns that value multiplied by itself that's it and put a semicolon at it right so this is the first action second action is going to be it takes in a value and it turns the value multiplied by two so now if i want to create a function let's say i want function cal q lit this will accept some actions and it will accept a value so now what i want is for and i can just go over each of the actions so i just go for variable i is equals to zero i is less than actions but length five plus rules now all i need is to go to the actions extract that function pass in the value that was passed in and i can just create a result result is going to be an array that will be passed in and i'll show you what that means result dot push now i just have to return the result so what's going to happen here is this now i'll call the calculate function pass in the actions which is going to be an array of first and second and finally i pass into if i go to console.log this save this go back refresh as you can see this is what the output is just a quick info guys test your knowledge of javascript by answering this question which event can be fired on a scrollable document element a window b scroll c load d unload comment your answer in the comment section below subscribe to intellipart to know the right answer now let's continue with the session 4 and 4 now again if i were to change the number let's say it's 4 so i should get 16 and 8 and this is what i'm getting this is the output now what's happening is since i can assign functions to variables i have created two operations on my own now what i want is the calculate function to accept a number of operations and a number itself and perform these operations and return the result respectively it creates a result array goes through all the actions which is basically me trying to square and uh double it i can also change the name here square end up these are going to be the two operations i want to be performed on this number so i send it to the calculate function it extracts each of the functions performs the actions put the result into the action array and reserve it returns it back okay guys a quick info if you are looking for an end-to-end training in javascript intellipart provides a full stack web developer course which covers javascript and all the javascript frameworks you need to know for more details check out the description box so that's what it means now there's another thing that you can take a look at which is early returns and this is really where the entire function functional calls shine up so let's say that i get an age earlier what we would have to do is i wanted to check if age is greater than 18 greater than or equal to 18 then i would have to create another statement inside it and do the same thing here i can do something else so i can just check if ph is less than 18 or income which is something i need to accept as a parameter income is less than 50 000 then i'll just use the word return this basically means that okay if this is true if either age is less than 18 or income is less than 50 000 then just return from the function don't perform any of the steps that i'm mentioning here other than you can just write valid that's it so that's what you can do now your code is much simpler to read it's easier to understand basically what it's doing is if this is an invalid input don't do anything just return don't perform any functions so if i were to go console.log oh i don't have to console the log as well i just have to use the calculate function pass in the age let's say it's 18 and income is 50 000 save this go back refresh it prints valid now if either one of those turn out to be true or and other one turns out to be false it's not going to do anything it's just going to move on so this is how you can write code so this is how functions work we have con we have taken a look at how to declare a function how to call a function how to compose functional callbacks how you can do all of these things one other thing that i'd like to show you that i didn't show you when arrays were being used is something called map filter and reduce these are the three functions that are the most important ones in javascript when you're using arrays suppose you want to use an array let's say that i create an array of numbers right and i get numbers one two three four five now i wanted to create a new array squared which will be these numbers squared so the way to do this would be in normal terms i would have to create an array then i would have to write a for loop in which i'll perform this thing here what i can do is just type in the word numbers and i used a function called map map is a function that takes in another function as just as when the one we had created when we were creating squared and double functions this function takes in a number single number not all the numbers and now i want to perform my action and return the output so i will return the number multiplied by itself now if have a two cons for log squared this is what i will get 1 4 9 16 25 so this is what we are getting so what's happening is the numbers dot map function is going to take this array and what it's going to do is in this function it's going to pass each of these values one by one so for instance this let's say this function is called this is the function that is called the first thing they will pass in one then it will pass in two three four and five and these values when they are called they will return one will return one 2 will return 4 3 will return 9 4 will return 16 and 5 will return 25 so this is how mapping works basically i want to create a new array out of a previous section this is why functions are so important in javascript and this is why they are called first class citizens because you can pass them around in other functions and nest them and do whatever you wish to do with them this is why functions can be a little challenging when you're trying to work with them so this was map this is also part of functional program if i forget to return it then i am going to get i this which is undefined because i forgot to return it so what happens is i take the number make the calculation but i don't return the result that i want to be included in the resulted array so if i return it only then would it work now you might be wondering okay this is a lot of code to write just to read just to perform this task right and this is true but when we move on to es6 and its features we'll understand how to overcome this as well now this is called mapping if i wanted to filter it let's say filtering would be something that we take a look at when we are trying to reduce the number of uh members so for instance if i want to only include even numbers so i have one two three four five and i want to only return values i want to only include values inside this array if the numbers are valid so i want to check if the number mod 2 is equal to equal to 0 basically if i divide this number by 2 if it doesn't leave any remainder which is basically the definition of an even number include that number in even so 1 goes in 1 mod 2 is 1 so it doesn't get included 2 mod 2 is 0 this gets included this doesn't this does and this doesn't so now if i take a look at even save it go back refresh 2 and 4 are the numbers so this is how filter works so these are the kind of things that you would have to do and understand how to perform when you're trying to build a javascript application we make heavy use of this when we're trying to build some other kind of application but it's important to understand what it actually is finally we can have a reduced function as well reduce function basically takes in initial and accumulated and return i plus accumulated and print save it go back refresh and you get 15. so what it does is that it passes in let me just pass in zero here as well now i refresh this yeah so what it does what it's trying to do is it is taking this array passing it these values so it's passing in zero and one so zero plus one will equal one next it will pass one and two one and two will equal three next it will first three plus three three and three so three plus three will equal six then it will pass in six plus or six and 4 which will return 10 and finally it will pass into 10 and 5 which will return 15. yeah so this is what it's doing basically we pass in the zero as the initial value and we're saying okay for each of the numbers pass them here and create the next result out of those so if you try to reduce the entire array into one by performing some function this is how we do it so that's basically it for the functions some of the important functions i have already mentioned there are many functions available on many objects that you can take a look at too much for me to cover i covered these functions that are map map filter and reduce because these are the most important functions when it comes to writing javascript they greatly simplify your code and we'll learn in future videos how we can even specify better functional parameters to make it work even better let's take a look at what else we can learn alright so now let's take a look at object oriented programming in javascript object-oriented programming is a programming paradigm based on the cohesive units of code called objects and the descriptions that are called class so a class is basically a blueprint in which we describe the kind of data we want the kind of functions we want and what the classes name is is what the entity is supposed to be so to give you an example if you're trying to build a painting application in which you want the user to be able to draw shapes the kind of objects that you would have there would be circles squares rectangles the kind of properties that they would have would be the length width radius depending on the kind of shape you are having and then the kind of functions that it will have would be draw fill and things like that so these are the kinds of functions and data that we're trying to use now why is object oriented programming important object-oriented programming is basically a programming paradigm it's a way to write code other paradigms include functional programming and procedural programming or imperative programming this is exactly what we've been doing procedural or imperative programming basically means you write one code statement after the other and let that execute itself on the other hand in object oriented programming instead of code being just one statement after the other we create small small groups of code called objects these objects are belonging to a specific entity and map onto that entity into the real world so if you're trying to create a employee management system one of the objects that you will create one of the classes you will create is employee then you can create managers and many kinds of things now object-oriented programming is a really complicated topic it can warrant an entire video on its own uh do mention in the comments if you would like for us to cover object-oriented programming in more detail and we'll get on to it if you guys want that on the other hand here we have the object-oriented programming paradigm for us javascript supports object-oriented programming functional programming and imperative programming all the things but the way javascript supports or the way that it has historically supported object-oriented programming is a little different than the way other other languages have so other languages have keywords such as class which you can use to define the classes you have constructors and many other kinds of things in object oriented programming it's a little different and in hands-on we'll see how it's different and how it works so let's take a look at that now so we'll try and create classes and objects for this i'll use the texture data again the setup is the same we just have removed some previous bits of code and brought it to its original state now to use classes you don't really use to in javascript you don't really create the word class there will use the function keyboard that keyword will create a new class let's say i call it person okay this person accepts two things the name and h now i want this dot name to be equal to name and i'll explain what this means in a moment and this dot h equals to h this is done now what i can do now is also if i want to do something else is i can just create a function this dot the name is equals to a function which will concern log the name so you can do it this way or another way of doing it would be to go here use the person keyword person dot prototype dot say name is going to be equal to a function and you are going to print the name similarly if you wanted to create an edge let me just do it here just start say h function and type in console.log this dot h here it's the same instead of using name i'll use this dot name so what was the keyword this means scenario we'll take a look at that in a moment now i'll create a person let's say john is equals to and now create a new object using new person it's the same thing that we have been doing thus far with the new array or new object constructor functions and i'll pass in the name to be john and the age to be 35 then i'll use john dot and here i can use it to say its name or say it h i can call say h function and then say name save this go back to the code create open up the and here you have it so it prints the name it prints the age now again you can do it either way uh unfortunately uh whatever way you prefer is the way that you should use it i like doing it this way because it separates my my data with my functions or my methods method is basically a function that is tagged into a class so what is going on this is a constructor function constructor function this is the prototype function or the method that we are assigning so methods so what happens is prototype is a property that the class takes a look at so whenever you create an object the first thing that happens is it takes a look at all the method names that we're calling so we say okay i'm calling say the object will take a look at itself do i have a function named say age no then it takes a look at its prototype does my prototype have a say h function if it does then i'll call that if not then i'll throw it so that's how this works so these are the two things again it's a little difficult to trap your head around at first but it's works now let's come back to the keyword this this what does this mean let me just create a new function person dot prototype dot print this function console log this save this and now i'll just call it here print print this and now if i go back if i refresh as you can see this returns the object so basically this is a keyword that is used to refer to the current object similarly if i were to console log this here which is outside the class outside an object outside a function i will get window so the way javascript works in the browser it at the end everything is attached to window window is an object that is on the javascript browser it is managed by the browser you are supposed to add things for removing so if i create a variable here where name is equals to peter and save this and if i go back refresh if i type in peter maybe i should type in name so if i type in name this is what i get if i type in window dot name this is what i get so this is what it means now if you take a look at the keyword this it is used to refer to the current object so here when i use the keyword this is practical it basically transforms this call into john dot name so to avoid confusion it's called the this keyword or the context basically what we're doing here is we're saying okay for this object the current object that i'm trying to create whatever value i have assigned to the name and the age print those so this name means john's name print that distort h means john's age print that and here this basically means print the entire john object don't print individual properties just print it entirely so this is what happens if i go back again and i show you something refresh this is what it has these are the two properties open it up this is the prototype open this up and it has these three functions print this pre say age cname and this is the constructor function that takes in the name and the age so this is how javascript works underneath the hood now in es6 there are new ways of creating a class but this is how it works here so you can create a class these are the objects now you might be wondering how is it different from creating a new object let's say i call it john make it equal to this put name equals to john age equals to 35 and then i add these two functions let's say say name function and the similar thing just think about this way so how is it different well the main difference here is let me just go back here instead of john i'll just johnny save this go back refresh joh and why and this is here now so the main difference is this is something that you can't reuse once you created the variable john that's it now if i want to create another person with the same structure here all i have to do with john i will create johnny and he raises 40. so now it has all the properties that the person class has which is this it is the name and the age it also has the name assigned to be johnny has the page assigned to be 40 and it has these functions automatically so i didn't have to create a new object copy and paste the code as we want to reduce the amount of code we write we do it this way so use these object literals these ones that we create like this you can use them but use this when you want to create just one time thing if you want to create something that needs to be accessed and change the data of multiple times then these functions are important this is how you can do it also these data is also called in case you ever come across this it's also called properties and this is how it works so this is how you can create a class in javascript this is the old school way there are new ways of doing it and we'll discuss this when we're discussing es6 but right now this is how you can create a class it will work with all kinds of functions javascript had a difficult start with object oriented programming it was earlier not designed to be an object-oriented language then object-oriented programming came into being and now it's like this so this is how you can do it this is why functions were re-purposed to be classes and objects so you can do it this way there are other ways which we'll discuss in later sections but right now you can understand how you can do this right let's take a look at what next we can do finally take a look at json json stands for javascript object notation it is a popular data transfer format which uses syntax similar to javascript object which can be serialized and from and d serialized to so basically what happens is when you're trying to exchange information between two programs and these two programs may be of different language you need to agree upon some common format in which you will be exchanging data so that when you create that format put the data in and send it to the user the user can then take data out of that format and understand what you have written inside this is where json comes into play similar to json there are other alternatives available such as xml and why aml or yaml ads is called however xml is quite old it's quite verbose yaml is quite new but it's not very useful json has turned out to be one of the most popular data exchange formats it is based strictly on javascript object notation which is basically how you create objects in javascript with a few notable exceptions although it's quite similar we don't add functions at all but we'll discuss those in the hands-on basically json allows us to add data to an object convert that object into a string send it back to the user which may be a python program which could be a an android application could be anything uh usually it happens in client server communication but other programs do that as well once that data is sent that data will then be passed and converted into an object that that programming language can understand and once that's done you can then extract data from that object and use it however you wish to uh basically json allows us to create a stringified version of our objects and pass a string in order to understand how to extract objects out of it so let's take a look at how that works in the hands-on so if you open up your browser open up the console and now let's take a look at how js1 works now again json is like everything else in javascript is a object in javascript so let me just show you and it contains a lot of functions that we can use for our purposes uh in our case it's pass and stringer this is these are important functions but first let's take a look at the center so whenever you're trying to create an object let's say that i am trying to make an object i'll just create variable data equals to and i'm sending back the information about the user let's say the id of a user is one name is john h is 56 so if i take a look at the data now it looks like this now this is fine javascript can understand this and it can pass it but if i were to transfer this data to some other language or some other program such as python 3 java over the internet this will not work firstly uh it will just be sending over a bunch of bytes that javascript can understand what other languages can't so we have to convert this into a string now to convert this into a string we can just we can't just wrap it inside this for instance we can't just do it this way because that makes no sense because let's say that if i have some double quotes in there and this is a long file then this i have to go through the entire system so the other way of doing it would be to use json dot trigger file inside it i'll just pass in the data and as you can see that this has done it for us it has double quoted the entire property double quoted thus these things that we need the properties that are string and it takes care of all of that so this is what the data is now if i want to send it to a user i can send it if i'm creating a web server i can just pass it to the user they will get this data let's say that i am that user i get the data now so i'll just get const trend is equal to variable string is equals to this so now if i take a look at the stringified data this is what it looks like but if i want to parse it i can just go json.parse the string and we get back the object out of it exactly the way we want so this is what json allows us to do now suppose i'm creating a web server i get the data from a database and i want to send it to the user so sending it over the internet i need to convert it into a string which i do using this so json or string if i do data this is what gets sent to the user now let's say i'm creating a front-end application i get the data and i want to convert it into the javascript objects that i can use just use the s1 dot part from the data that you receive and it will work exactly the way you wish for it to work so now this is how this works there are other ways of dealing with data with json as well but they are quite complicated and not very useful because they are really difficult to implement basically you will be uh re-implementing the stringify and passing functions yourself that's not very useful so we recommend that you do it this way so with that now let's take a look at what else we can do all right guys now let's take a look at es6 feature so javascript has been around for a while and new features have been added to javascript in its 2015 version that was a major revamp of the language and it was called es6 es stands for ecmascript ecma or ecma is a standardization committee which takes care of standardizing javascript feature across the process so in 25 2015 javascript had a major revision called the ecmascript 6 or es6 it added new features and new syntax to make a code more concise so this is basically syntactic new features were added in order to make a course easier to read easier to understand and easier to write so these are some of the features some of the most important we need so we'll be discussing those now so let's take a look at them one by one first thing is declaration now for declaration what we need to do is we need to find out new ways of declaring a variable we have already understood that there is a way of declaring a variable using the var keywords var however two new keywords were introduced called let n const and these were variables that were introduced because var has specific drawbacks which we'll discuss and then we'll take a look at how to use let and const instead of var so to understand this first we have to understand what exactly are the drawbacks then we'll move on to how these drawbacks are solved using uh this keyboard so let and const will take care of the problems that were created using what now let's take a look at the hands-on for declarations so for this we'll have to use the let and const keywords so again we'll go back to the same code now this var keyword is what we use to declare a variable right so if i create a variable named name put john inside it save it everything works and it doesn't really take away from the fact that it's going to work just fine so if i take name print it it's the same thing however notice what happens here so if i create a name is equal to john then create a let's say that we create a variable it's called count which is equal to one and then we print it console.log there are count or there is would be appropriate so now if i go back refresh there is one john i think zero count is one and the name there is now so there is one john but if i take a look at the count variable it's also available outside this is a problem this is one of the problems so what happens here is this whenever we declare a new variable here even if it's inside an if statement it will be available throughout our code so it will be available here i can use it in another if statement as well if true console.log count and this will work uh this is the real problem it might not seem as such right now but the problem here is this suppose you're working on multiple files and you try to create a new variable this variable is now called you create a new variable you want to get the username so you get the name you ask for a user to enter the name and what you have essentially done now is you have overwritten the value that might be used someplace else so now if in some other file someone has already declared a variable name and they will use it when user clicks on a button or something they'll get the name that you have declared instead of getting the name that they have this causes a lot of issues when you're trying to build applications at scale when there are multiple files that you need to take care of and how to work with them so in cases like this what we can do is we use the let keyword the like keyword won't let the respects the scope of the variable so if i go back finally all i have to do is change bar to let save it go back and now if i try to use the word count it says no variable named count is defined this process of getting the variable from here which is what happened with var and putting it at the global scope this is what's called hosting just a quick info guys test your knowledge of javascript by answering this question which of the following is not considered as a error in javascript a syntax error b missing of semicolons c division of 0 d missing of brackets comment your answer in the comment section below subscribe to intellipad to know the right answer now let's continue with the session this is a problem in older versions of javascript and this is why the let keyword was created now there's another kind of variable called const this is what const looks like and contrary to popular belief const doesn't mean that you will have a new variable which were that can't be changed for instance let me show you const person is equal to and let's say i call it a person now if i were to change this i can obviously do so person is equal to another and now i can't change it here so that's the way uh const will work it will not allow you to change a variable however if i had uh let me just declare another one john is equals to and john's name will be john now if i were to change john dot name is equals to chain this is allowed because i'm not changing the reference of the variable i'm just changing data inside it so if but if i were to change apply this then it's going to fit because you can't reassign a variable that is declared using const had it been declared using let so let's say let x is equals to x and now if i want to find y to it i can so this is how constant let's work this is the difference the problem was variable hosting variable hosting basically means you get a variable and you assign it in some scope and you don't want it to be accessible outside it but it is accessible outside the scope and that causes a lot of problem for instance if i were to declare a variable here this will be pulled out here and then we will be using it when the javascript runs the code it takes a look at all the variable pulls every variable at the top and now everyone can use this variable so this would mean that a lot of people will be stepping on each other's stores and it's going to be really difficult for them to understand what exactly is going on where is this variable declared and how can i get it to work better on the other hand once you're using this you can use the let keyword and this will respect the block scoping that we use and the const keyword is used to declare constant variables now which one should you use when uh basically the recommendation that many javascript developers give is always use let and const now go start with using const at the beginning unless you need to change the variable some place else first use the const keyword assign some value to it if you need to change it someplace else then change the cons to light basically don't use what never use war because better options are available and this could lead to difficult problems that's how a constant var work this is what the new ways of declaring a variable is and you should use them most browsers support these new es6 features since they have been outside for 20 years 2015 so they've been available for public use since 2015 and most browsers support them in case you want to convert this code into a code that older browsers can understand as well there's something called a transpiler so things like babel chair they will take your code be written in es2015 and convert it into something that older browsers can understand as well you can take a look at that if you wish to all right now let's take a look at what else we do error functions so error functions provide a new syntax to create anonymous functions in a very concise way since we have already taken a look at functions such as map filter and reduce which take in functions as argument and give back in response the result of those function these functions that we pass in are called anonymous functions they have no names they are only used once but it's a little difficult to write the function syntax the same way that we have done earlier so in order to reduce this since all we are doing is creating a function that returns some value based on the values passed into it we can use the arrow functions arrow functions are available in other languages in the format of a lambda so if you've ever worked with python you can understand that arrow functions are similar to lambda lambdas are also functional expressions that can be passed from one function to another similarly this is what happens here as well so now with that let's take a look at a hands-on and understand how that works so to take a look at error functions i'll just open up this text editor and i'll show you what arrow functions are and how they work so there's a bit of a variation on arrow functions as well multiple ways of doing things with it let's take a look at them one by one suppose i was creating an arrow function and from now on instead of using r i'll be using const unless i want to specifically know that this variable that contains data that needs to be changing i'll use the constant keyword which is the recommended way now i'll create a function called f1 this function takes in a variable and it will return x multiplied by x very simple everything that we have been doing thus far so if i go back refresh f1 2 and i get the result back now that works however this is a lot of code most of it is just unnecessary we just want a function that takes in some value and returns some value out of it so the way of doing it would be using x as the argument equals to and then putting the arrow symbol this is why it's called an arrow function and what we want to return is x multiplied by this is how this works now if i were to go and call f1 again it would work exactly the same way and this is what to do now here's the thing that you need to understand first things first this is the list of parameters if there's only one argument that you want to pass it you can also skip the parenthesis it will work exactly the same go back refresh and use it and it works so what's happening is we're saying okay there's a function that needs to be assigned to the f1 variable it takes in one argument returns that argument multiplied by itself and since this is there's only one statement that needs to be executed i don't need to pass in any return statement and i don't need to write anything like that so that works however if there was more than that then i would have to make some adjustments for instance if there were two parameters let's say x and y then firstly i would have to wrap them inside parentheses if there was only one then i could leave off the parenthesis and it would work but right now i can't okay i can just multiply and return x and y and this would work the same if i go back press go up and do this it would but here's the thing if i want to not just use one single line of code but multiple lines of code then i can write it here so i can just write const z is equal to x multiplied by y and then i will return that this works this way so refresh go back run and this works so this is the basic function of arrow functions you create a function it's anonymous you don't need to write a lot of code now compare and contrast this to a function that we had to create so previous version was we would we would have to create a function that takes in x and y as parameters and then we have to write the curly braces we have to return the statement x multiplied by y a lot of code to write just to perform something simple right here we don't have to do that all we have to do is just pass in x and y and return what we want to return if there are more than one statements then we need to wrap them inside curly braces and make sure that we return something if we wish to uh if not then we can just remove the return statement it will return anything that this evaluates to on the other hand if we only have one parameter then we can just leave off the parenthesis as well although it is recommended that you use the parenthesis if and when you can because it makes your code more readable so now where does this help us now again suppose instead of doing it here i'll do it here suppose i have numbers it's equal to and i take one two three four five right so if i take a look at numbers this is what it looks like now if i were to use the map function again this takes in a function instead of passing in the function the old way where i use the function keyword then take the parameter then write it here and then i have to return something which is this way it's multiplied by x press enter this is how it used to be done now i can simply write a really concise version of it if you remember as you can see this is just one two three four five keywords that i had to type here i have to write this entire line of code so it's very simple and very easy to use and since i'm only going to be passing expressions i can leave off the curly braces in parenthesis as well let's say i want to filter so i'll just use filter x and x mod 2 equals to equals to 0 and this returns the even number if i want the odd numbers i can just do it this way and i get the odd numbers similarly i can use the same thing for reduce as well so i take number start reduce this takes in the callback function in which i will pass in the initial value and the accumulated value and return initial plus accumulated and the initial value right at the beginning would be 0 and i get it so all i had to do was write just a little bit of code to get everything to work as i said expected it to work so that's how these inline functions or anonymous functions or lambdas whatever you call them work uh in the newer versions of javascript they have proved to be really helpful many new languages and many new languages have implemented these features itself such as java has implemented the functional capabilities in themselves as well also these are really helpful when you're learning new frameworks such as angular react view they make extensive use of these functions because they make the code more readable with that let's take a look at what else we have to cover let's take a look at restructuring so error functions are quite easy to understand but this structuring is a little different from arrow functions instead of using the same syntax but modifying it a little bit we'll be using a new construct in this structure so when we're restructuring we can extract values from containers like arrays and objects in a very concise way it often happens that we have an array or we have a an object and we want to extract some values out of it and assign them to a variable now when we're trying to do that we want to in previous versions we had to index into the array or name the use of use the name of the properties there but here we can use it ourselves so in cases like this we use d structuring it makes our code really easy to use and really precise to work with so let's take a look at that in our hands-on let's first take a look at the old way of doing things so we had to create a variable i will call it let's say names this is going to be an array and let's say that the array contained three values jane john and jenny so this is how you can use it here but now if let's say i wanted to create three variables x and y and z and i wanted to assign these values to them to do that i would have to use names of zero similarly names of one and names and now if i wanted to print the values of x and y it would be x y and z save this go back to the code open up the console refresh the page and you can change johnny and jenny now this works and similarly for objects also let me just show you how that would work instead of names let's say we had people and we had an object here in which names corresponded to their age john was 40 and jenny was 37. now again if i wanted to get the 8 here instead of the names i would have to again do something similar instructing a b and c and now let's say that i want to extract the name of j then i would have to use the people dot j and similarly i had to do the same thing here which is called john people dot john and finally for jenny i had to extract it like this and now if i wanted to print i had to print jane john save this go back and refresh and now we have this i think i have dispelled something that's why i'm getting with john the j needs to be capitalized that is the issue save this and this works now if i wanted to could just do it this way jenny and now here instead of having those capitalized names you can just type the smaller letters and this works as well as you can see that this is a little tiresome to write so how can we do it in a better way let's start with this let's keep these two things and we'll print these two things but if i want to extract and destructure values out of it for x y and z all i would have to do is this so i use the array syntax and assign it to the arrays now if i were to print it it should print the exact same thing so if i refresh this and it prints the exact name so the way we did it is we created the array syntax and we added x y and z these are the new variables in which i want the values to be assigned should be the zeroth index should be assigned to x first index to y and second index to set so that's how we do that now the same thing we can do here as well so here jane john jenning all assigned like this and now if i were to save this if i were to go back and if i were to refresh the output is still the same so here the name matters earlier i could have named it xyz i could have named them abc in the register string thing but here i have to name them correctly okay guys a quick info if you are looking for an end-to-end training in javascript intel ipad provides a full stack web developer course which covers javascript and all the javascript frameworks you need to know for more details check out the description box so instead of chain i could have just written if i were to write jane like this save this go back refresh and i get jane is not defined this if i were to go here and paste it here go back refresh then i get undefined this is because the keys are not matching up so the keys that we have are jane john engine if i want to create a variable of the same name then i can just restructure it like this and that's the way it works now it's not the only way it can work for instance if let's say that i have a function right and i say okay print the tails it will expect an object that contains the details of a person and i want to print the name and age and i call print details and i can create an object first let's say jane in which name is jane age is 40 and if i pass the variable here now if i wanted to print this i would have to prefix the person and only then will it work if i save this go back refresh it works like this however as we've already learned that we can restructure this thing we will do that here so just paste it here and add it in there so whatever happens is we pass in an object with name and age as key this will extract it and create variables out of it and we can use them here now if i go back and refresh it works exactly the same so that's the way restructuring in objects work this is why the structuring is considered so important and this is why it helps us in writing cleaner and more concise code now let's take a look at the classes in es6 now let's take a look at the class keyboard so in es6 we get a new way of defining classes as we have discussed earlier in javascript creating classes and objects is a little tricky because unlike other languages such as java and python they have their own way of creating a class and if you learn how to create a class and create an object in one language you can pretty much learn how to do that in other languages as well the syntax is going to be a little different but the overall system remains the same that you declare a class using a class keyword create a constructor function add variables to it and add methods to the class and then you use the new keyword or perhaps you don't use it in case of python and you instantiate a new object of that class in which you can set the well values and create the methods that act on those values and so on so this is how you would do in other languages in javascript however before es6 what we had to do was as we have already seen in object-oriented programming section we have to create a function called the constructor function that functions name is the name of your class the function takes in a few values that you can set as properties to your class and in the prototype of the function you attach some functions or methods that are part of that class after that you can create a new object of that class and can use those functions now that works quite easily however this is a really weird way of doing it because you have to instead of doing it the way you would normally do which is basically just creating a class creating an object and functions and class are two different things in other languages however in javascript they're all mismatched together so it's little difficult to get started with however in es6 they have changed this now we can use the class keyword to create a function actually instead of using a function you can create a class on its own now what's happening behind the scenes is exactly the same thing that has happened with the function keyword with adding methods to the prototype and all but just because the new class keyword was introduced we have a new way of creating class which is much more easier than much more easier than the previous way and maps on what other languages allow us to do so let's take a look at that in the hands-on for this i have the same thing here now i'll create the same class that it i had done earlier which is the person class earlier i had to create function person and had to add some properties using name age then this dot name equals to name and similarly this dot h would also become h and then i had to add things to the prototype but this is doable however if i wanted to do this in class it would be really easy just create a class call it person inside it i would create the constructor function it is named constructor it is called and it allows us to create an object constructor functions are called constructor functions because they take in some parameters and create an object and give it back to you so i'll again use the same thing here the body is going to be the same this dot name is equals to name similarly this dot age is going to be equal to h and now i'll use the same functions but instead of attaching them to the prototype all i can do is just create the function say name i don't have to use the function keyword i can just write it like this and type console.log resistor name similarly and now if i were to create a new person i have to pass in name and name could be anything i'll call it john age 35 now john dot say h and again john dot say name now if i were to save this go back open up the console refresh and you can see if i refresh this you have john and 35 so as you can see we are getting the same thing but now if i were to console log john you can see that it's exactly the same thing that we had earlier age and age and name are there and the functions including the constructor function is attached to the prototype so it's just a new way of declaring a class and using a class it doesn't necessarily mean that that's the only way or that even necessarily the right way however this is the way that many people use functions and classes and we recommend that you take a look at that as well when you're trying to do it which one should you use well the recommendation is that you use the newest features as soon as possible because it may be possible that javascript or newer browsers drop support for the older version of code however that doesn't seem very likely but it could be possible so in order to avoid that jump on to the latest version of code as long as it's supported with the supported in the majority of the browsers and these features are supported so you can take a look at those in whenever you want all right so now let's take a look at javascript and dom first we'll understand what a dom is so dom stands for document object model it is a tree like structure which represents the html document and can be accessed and manipulated using javascript so if you remember when we were discussing the history of javascript javascript was created in order to manipulate html pages and the dom is the way that it does that the dom or the document object model as it's called is basically a an interface through which javascript can interact with the html page this is implemented by the browser and what you can do is use the methods on javascript so that they can execute the code and manipulate the dom as you wish we should now these doms and dom elements are arranged in a tree structure just as an html page is created with nodes nested inside each other that's how the tree is formed it's a hierarchical structure in which each node is either a child node parent node or release so this is how the html document is structured and then we take a look at the javascript javascript can be used to perform different kinds of manipulations on the dom let's take a look at them one by one so using javascript there are several kinds of operations that you can perform on a dom element first one is accessing the dom elements so uh depending on how you want to access the javascript dom element you can access it in several ways i will discuss them in the hands-on but one of the ways is using an identifier so if you are creating an html page and you know you want to access it in javascript you can assign an id to it similarly you can assign a class to it as well just as you reference the documents or the elements in css you can reference them in javascript as well and you can use ids and classes for that there are other ways as well you can get the name of you can get the documents or the dom elements using the tag name so if you want all the forms on your on your entire html page you can do so in javascript as well and there are many other ways as well which we'll discuss then comes adding dom elements so what happens is you can create your own dom elements and then you can attach them to the html page as well suppose it's an empty page you want to create a new dom element you can do so using the javascript domain api what happens is firstly you get the dom elements you get some data create a new dom element add element to add data to it and then we can attach it to the top with that we move on to manipulating the dom element now manipulating a dom element is also quite easy what you have to do there is basically you get the data and then you manipulate it you get the dom element you change its style change the text contents you can change different kinds of things about it and it will work exactly the same manipulating the dom elements involve you getting access to the dom element then you making changes to it so you can make changes such as change the order of the elements remove an element add an element which we have already discussed but also you can change the text content inside each of the html html dom nodes and that works as well finally you can take a look at removing the dom elements removing the dom elements might sound a little difficult to understand but it's fairly easy you get the dom element you get all the uh you get all the child elements of it and you remove those child elements and they will be gone forever so they are removed from your screen and then you no longer have access to them so that's how you can create dog elements you can access dorm elements you can add dorm elements you can manipulate normal elements and you can remove them as well these are a whole variety of operations that you could ever want to perform on a dom element in the javascript ecosystem but how do you do that well let's take a look at the dom operations and here we can understand that just a quick info guys test your knowledge of javascript by answering this question which event can be fired on a scrollable document element a window b scroll c load d unload comment your answer in the comment section below subscribe to intellipath to know the right answer now let's continue with the session the first things first i will open up the page i'll remove everything from here and i'll open up this code now here i can write the code that i want so as you can see that the page is empty just for the sake of understanding i'll create an unordered list item and i'll give it an id of list that's about it first thing we have to understand is how do you get access to a domain list which is quite easy you can just use document firstly i need a variable name so you get document dot get element by id this will only written one item because on an entire page it is recommended that you only have one item with the id assigned to it so the id that we had assigned to the list unordered list was list save this and we'll console log the list save this here go back open the console refresh and you get the unordered list here it has nothing inside it thus far that's why it looks like this another thing you can do is use class you can get access to something using a class so instead of this i'll get class but one thing you'll notice is get elements by class save this go back refresh this is an html collection so as we have already discussed that when you are using classes multiple elements can have the same class however ids are unique each element should have its own id so this is where we use that so if we have some element that is repeating on the screen let's say that you are creating an e-commerce application and that e-commerce application needs to show a list of products so each individual product will have a class of product and to get access to all those products in an array you can use the document.getelements by class name also if you don't want to use class names let me just go back and use id you can also get get elements by tag name and the tag that we are using here is unordered list save this and log it to the console again you get an html collection and you get a list like this these are the properties of the list this would look like and this is the same thing so this is how you can create an html collection by using the tag name there are multiple lists you will get all of those here now that we know how to get access to those another way you can do those is if you are familiar with css you can use css like syntax to get access to a particular element so you can use query selector current query selector or inside query selector you pass in the query so i want access to a ul with an id or list save this go back refresh and i get access to this similarly if this was a class then all i have to do is an unordered list with a class of list go back refresh again and i get the same access right so this is how you can do that now quality selector all is another method that will select all the elements of the list if i'm using class and i have two lists with the same class i go back and refresh now i have a node list of two so i have two lists both of the same class and that means the parameter that i have passed in so that's how you gain access to a list let me just clean this up a little bit so that we can take a look at other features as well ideas list so this is how you can gain access to it how you can add items to it is what i'm going to show you so to add item to a list all you have to do is firstly you have to gain access to the list i'll just gain access to the list using document dot get element by id since we only have one list i'll get access to that now i want to add a list item li to it to do this all i have to do is use this so list item is equals to document dot create element the element name is going to be li and i add it here now this item dot text content is going to be equal to list item one save this and now i want to add this to the list so let's start append child and i want the list item i had named it correctly go back to the code refresh and if i take a look at the console list item is not defined okay this is because save this go back refresh and now i have a list item similarly if i want i can create five list items using a for loop it's going to be exactly the same thing all i have to do is for variable i is equal to 0 i is less than 5 i plus 1 and now i will create a new list item whenever the code runs create a new item plus i and save this go back refresh and i i have zero one two three four the five items already attached to it that's how you can create a list item if you take a look at the html content this is what it looks like i open this up and this is what it looks like now if i were to open up the source code as you can see this has an unordered list with no items added to it this is why the javascript console is so useful it tells you the current version of your of your html dom as you can see i have an ordered list after the file is loaded html is passed javascript is executed i get four more or five more items added to my unordered list so that's how that works so creating an item we have already discussed appending the item we have discussed and accessing the items is also something we have discussed now let's take a look at how you can delete a night so i'll just create an ordered list three times i'll call them list item one two three if you go back to the code this is what it looks like now if i want access to the post all i have to do so last item is going to be document dot get elements firstly let's take a look at items get elements by tag name we get all the list items here if i were to log into the console this is what it would look like go back and this is the collection now i want access to the last list icon so i can just go now i'll get an access to the item and i want to remove it then i can just type item dot remove save this go back refresh and this works now if i were to not remove this and go back and refresh it will have the item here and i can just do it here so item dot remove and now it's removed from the list so that's how you can remove items add items manipulate items and all of that you can also manipulate the items by getting an access to item and item dot and you can take a look at the text content you can do several different things so if i wanted to document that create text node i will add in some text here and new content and i will just use item dot print child using document dot text if i use this then new item new element is added into the item now if i want to can very much easily change the text content to be equal to but this won't add new content to it it will just remove the old one and add this one so if i go back and i refresh and that's how you can manipulate that this is just scratching the surface down manipulation goes way deep into it you can also take a look at the styles of a particular class you can take a look at the styles applied to it you can change the styles on the fly you can do a lot of different kinds of things using dom manipulation this is just barely scratching the surface but this is to give you an idea of how you can add things remove things manipulate items and create nodes on your own however doing this all on your own is going to be little tricky and can lead to degradative performance so if you want to use javascript to add items and remove items and track changes react.js is a library that does that phone so you can take a look at that as well now let's take a look at javascript events so javascript allows us to use browser events to perform certain tasks when an event occurs in a browser so there are two parts of an event system although javascript is a fundamentally event driven system you need to understand how to use these events in order to write code that works when user performs certain actions these actions could be when the user submits the form when the user click when user clicks on a dom element when the user is moving their mouse or whatever the reason might be the two parts of a javascript even system are events and handlers let's discuss them one by one an event is basically a description of what has happened so an event could be a click event which basically means some element was clicked on uh it could also be a focus event which means some form field was focused on it could be a submit event which means some form was submitted and so on and so forth so these are the kinds of events that javascript html supports and javascript can use these events in order to hook into these events and perform certain bits of code when these kinds of events happen so for instance when a user submits a form and you want to send that data to a web server by serializing it uh html by default doesn't support it but javascript does so to do this you need to firstly prevent the default behavior of submitting the form then getting the data and sending a request to a web server then processing the request and redirecting the user all of that is done using javascript then comes event handler handlers are functions that take care of the code that needs to be run when an event occurs so we can assign several event handling functions onto a particular javascript event and then when that event happens all of these functions will be executed now let's take a look at a hands-on to understand how that works we have the code here and we have this html page first thing i'd like to do is i'd like to create a button here the text click me and i'll have an id so that i can get access to it button save this now let's first get access to it using document.getelementbyid and inside the id i will type in the id that i have just assigned with this button to do this all i have to do is type in button dot on click this means that whenever the button is clicked before i use this function now i can use the function syntax or i can use the arrow function syntax it can expect any event and now it doesn't have to return anything all it has to do is console.log click i can also remove this save this go back refresh open up the console click here and as you can see it is written here now if i were to do it again and go back refresh and now if i click again as you can see the new handler is being executed now this might be a problem in case you are wondering how suppose i want to perform two different kinds of functions on the button when the button is closed the code that i want to execute is attached into different functions to do this i can just use button dot add event listener and i can pass in the listener firstly i'll type in the past i'll type in the event and then the handler so this event is going to have console.log similarly click now if i go back refresh click as you can see both of these get executed you can also type in the uh if i were to do it here you can also get the event listeners here as well all you can do is you can just add button dot add event listener pass in the type let's say i want click and i'd like to log into the console dhird third in our cyclic this work now you can pass in anonymous function although one way i would recommend is you create a function which will type in here and we'll write port the reason why i would recommend doing this is just going to become a parent in a moment i'll again take the button add an event listener it's going to be called click and i'm going to add f to it right now one thing to notice is that if i click on the button now all of these are executed but if i want to unattach this event listener or remove this event event listener remove event listener and this will take in the type which is click event and the target that i want to remove is this function if i go back now and if i click it as you can see first second and third are executed now this is something that you can't do in the previous versions so if i had not assigned a variable name here i would have no idea how to access the fourth event listener and remove it this also prevents memory leaks so if this button is destroyed from the memory then the event listeners will also be destroyed so that would be helpful there as well so with that we have understood how events work these are not the only kinds of events you can take a look at different kinds of events that you can take a look at for instance you can look at form submissions check box selections button clicks which we have already taken a look at mouse events cursor events touch events for mobile browsers and many other kinds of events so this is the general idea of how you can access them add event listeners remove event listeners or if you just want one event listeners attached then you can use the on click or other kinds of functions as well all right now let's take a look at asynchronous javascript so in case you're not familiar with it let's take a look at what asynchronous javascript means so javascript allows us to write asynchronous code which is executed in an asynchronous fashion asynchronous doesn't necessarily mean that it is uh parallel but it does not block the main thread javascript is a single threaded language uh the envir the javascripts being single threaded means that you can't create new new threads out of javascript so in cases like this the languages like java c plus plus have mult have the capabilities of creating new threads and then you can push some long running tasks on those threads so that the main thread that displaying the user interface and making other things happen can stay responsive and it doesn't end up freezing up but in javascript you don't have this feature on the other hand we have something called an asynchronous runtime environment what happens is when you have a long running task what you can do is you can push things out of javascript and into your browser's thread pool so every browser has its own thread you write some code and you say okay this code needs to be executed by the browser it may take a long while so take a look at the code run it and then send back the response and once you are done send back the response to me and how you get the response back is what asynchronous programming is all about so this is where asynchronous code comes into play now to write asynchronous code we have three ways of doing that first is callback a callback is basically a function that is passed into other function that will call your callback function and will pass in the result or an error if any occurs so for instance let's say that i want to get some perform some complicated computation so i run this function that function will move on to run into the browser thread pool and it will run and perform all the computation and as a parameter i will pass in another function which will be called and when that function is called that function will take in the results that the computation provides us and will execute it the way i want it to okay guys a quick info if you are looking for an end to end training in javascript intel ipad provides a full stack web developer course which covers javascript and all the javascript frameworks you need to know for more details check out the description box so that's a callback it has certain advantages such as being very easy to understand not very difficult to read also but then again if the problem that comes with callbacks is that the callbacks are a little complicated you run into a problem called callback help in which you are nesting one callback into another callback into another callback into another callback and this leads to a really complicated structure and makes your code really difficult to read to overcome this promises came along promises allow us to write asynchronous code as a series of operations where one operation manipulates the result of the previous operation so the way it works is that let's say i have some operations that i want to perform let's say i want to get the data from a server so that requires certain uh certain things to happen firstly i have to make the request get the response after i get the response back from the request i need to pass the request extract the information i want out of that request all of these could take a bit of time so if i want to compose this into a set of linear steps i can do it using promises now promises are great but also they lead to certain problems so in order to overcome those problems we also came along with other kinds of things such as async awaits the problem with promises was that the chaining promises one after the other could be a little difficult and understanding how promises were executed especially when you have multiple execution paths is a little difficult async await turns the asynchronous code into a synchronous code so we can write asynchronous code just as we write synchronous code without using promises or callback with just using the async and await keywords and that was about it our language and our runtime will understand what exactly we're trying to accomplish and it will take care of all of those things on its own so with that let's take a look at how we can perform asynchronous code on our own by taking a look at a hands-on in this i'll write the code in the file and then i will open up my console just refresh this okay now let's take a look at this so first thing we'll take a look at is call back let's take a look at all of this first thing we'll take a look at is call back then we'll move on to take a look at a promise based system and then finally we'll take a look at using await first let's take a look at from uh the callbacks so the best example of callback in javascript is the set timeout function set timeout basically takes in a handler and a timeout so if i pass in the handler it will basically be console.log and the timeout is going to be let's say 5000. now if i go back to my code refresh wait for five seconds one two three four five and this is how it executes so basically what happens is this code will get executed it will wait for five seconds and after five seconds it will run this code whatever it may be i've used arrow functions but you can use any kind of function that you want here so this is how you can do a callback basically this is the long running task let's say that this this was instead of setting a timeout let's say that this was a network request i sent some requests to a network or some web api got back the response but it took five seconds for me to send the request and get back the response so in cases like this we can use a callback in which we say okay after you have performed the task you you know call this function and this function will get the result once the result is gotten all i want is to act on this result so now i can just leave once unlock the result or whatever i want to do but this is how it worked so this is very easy to understand but the problem here is this let's say i have a callback i say okay fetch info right i will get the information here uh let's say that i have to use that time out here so fetch information and i pass in a callback call back now here let's say that i get it the request takes five and five seconds and after five seconds i will call the callback function and pass in the result the result is going to be an object with name of john that's about it so now if i want to save this i'll save it go back to my code run it it says unexpected token online number 18 let's take a look at that oh yeah i have to use the function keyword here now it works yeah so patch info i will call in i will take the function and i will console.log this function will take in a result and will pass in result so let's wait for five seconds and after five seconds it should print so it prints john so suppose this is the response that i was getting back from a web server that's how i can do it i can just pass in a function which will get the result passed into it somehow and then i operate on those results this works however if there were multiple phases of this so let's say that i get this uh response right let me just copy this and come here here let's i get this after getting a result i want to call another function and then pass in a callback so let's say fetch mode i pass in the result fetch more information about this and then call this function now as you can see the code is really complicated now i have a function nested inside and the function and think about how it will go on so that could be difficult so in order to overcome this we use promises now here is where i will be using the promise based api that ships with browsers before browser supported promises some people came along and created libraries that used promises on their own so depending on how you wish to use them you can either use some old school promise based library and you can take a look at those at your own pace one of those one of the most famous ones is queue and blue bird however you can also create your own so what i'll do is i'll make an actual network request if you're connected to the internet you can just use this this is an open api that you can hit and get a response from so i get the response right after i get the response then what i want to do so i will get the response and i want to convert this response to json so i do that and then finally i get the data and i wish to console all the data save this and i can go back and i refresh and i guess it's an unexpected token at line number 24. let me see yeah now it should and we get the response back so this is what it looks like now this works but suppose i wanted to make another request here so i had to after getting the data i have to make another request using fetch and get the data and then pass it here so it can get really complicated it's not really difficult to think how it can go wrong but it's really easy to understand right now another way is going to be async await now to do that i will create a new function so what i will do is call it async then i'll call the function name the name of the function is going to be h user info inside it all i have to do is use the same thing that i had done earlier great thing about it is that async await works with promises so what i'm doing is i'll write it exactly as i would write any other code so i'm saying okay wait for this to finish once it's finished return it into this so we get the response then data is equals to response.json now again i want you to wait for it to convert to json and finally console.log the data so as you can see this is how you would write normally the code just a bits of async and then await sprinkled around it refresh fetch user info call this and you get the response back and this is what it looks like so this is the data that we got back and we can use it whenever we wish to also it says promise pending because if i were to do it there is another way i can just await it and now it wants a promise trending the reason why is because all async functions return a promise if i don't return anything it will automatically return a promise that is spending it doesn't really matter but you can take a look at this um if you want to really use it so you can do it this way now console.log await and you can avoid the function but you don't really need to do it here so it works this way yeah so this is how you can use async await callbacks and promises again these things go really deep into it uh you can use multiple promises you can compose multiple promises and i have them all run it all at once it's a really complicated web that we don't have time to navigate right now you can take a look at the videos that are already available on our channel or you can take a look at the mozilla developers documentation either way you can learn a lot about these things all right so now let's move on and see what else we have to learn now let's take a look at javascript and node.js so node.js is a backend javascript environment that allows developers to run their javascript code outside the browser if you want to build desktop applications if you want to build web servers if you want to build any kind of applications that works outside the sandbox of a browser then you can use node.js node.js basically is a javascript wrapper around ac plus plus api so what happens is when you write some node.js code it gets converted into uh it whenever you call a function in node.js the nodejs runtime environment will convert that function call into a c plus plus function call and that c plus the function call will then interact with the low level operating system details such as memory allocation the allocation and other kinds of things node.js was created by ryan dahl he was a google engineer and what he did was he took out the v8 compilation engine v8 is a javascript interpreter or the javascript engine that is used in google chrome and that was he took the code out of that and then created a node.js platform in which you can write code and it will be executed outside the browser and it's allowed to run on the server and you can also build servers desktop applications mobile applications and many other kinds of things node.js is by far one of the most popular things in javascript right now mainly because it allows us to expand this uh the subset of technologies that we can tackle using javascript so with that now let's take a look at a hands-on involving node.js so to do that firstly you will have to download and install node.js on your system go to nodejs.org downloads or just go to nodejs.org and click on the downloads link here you have two options here you have lts and current the difference between the two is that the current version will be the latest version available for you to use it will be at the time of the recording it's version 15.4 however in the lts mode you get a slightly older version in this case it's 5 to 14.15.2 however the thing that is important here is uh even though you have the older version it's a version that will be supported by the node.js community for a long time if you run into some issues some bugs appear new patches will be deployed into it however in the current version if you were using version 15 you come into some issues some bugs are there you have to upgrade to a newer version the newer version might not have the same feature set as the previous version maybe some api has changed and now you have to change the code so only use the current version if you want to try out the latest features for production lts is what is recommended now to download it you can choose the windows installer depending on the operating system that you have i'm on windows so i can do download this you can download mac os installer or you can download the source code of the entire node.js project and build it yourself uh if you're on linux you can download the linux binaries they are available here as well after doing that you can just install it like any other software and then you can get started now if you want to use node.js first thing you have to make sure that it is that is installed and it's available in your command prompt so open up your command prompt in any folder you like type node dash dash version press enter the version 14.15.1 is the version that i have installed and you also have to check npm version i will see in a bit what npm is and how it works just a quick info guys test your knowledge of javascript by answering this question which of the following is not considered as a error in javascript a syntax error b missing of semicolons c division of 0 d missing of brackets comment your answer in the comment section below subscribe to intellipat to know the right answer now let's continue with the session npm stands for node package manager it's similar to pip maven or any other package manager in other languages the version that i have installed is 6.14.9 also you have to check npx dash dash version although if you have installed node.js and it's showing you the version to be about 12 you don't have to worry about checking npm and npx because they are all installed all at the same time unless you run into some error however if it's good to check whether or not you have everything installed correctly also make sure that the version of npm and npx match because they both work in tandem i'll clear the screen and i'll show you how it works here now i have a file named index.js if i were to go back take a look at the directory i only have the same file here now if i want to run this file i can type node space index.js now there's nothing here i can't run this file or i have run this file but there are no instructions in it so node.js just exits also if you want to perform some small bit of code you can just write node press enter and it will open up a terminal session for you in which you can write the node.js code you want to run now again windows is not something that is available global is the reason for this is because it is not a browser environment so things like clear clear timeout and all of set time out all the features that are available in window in browser environments will not be available ei because window is not here global is what the object is called after this what you can do is write some code using node.js simply javascript code that uses console.log and here the console is this terminal so it will print it here in browsers if it was the browser console so print hello you can also type in any other browser code that we could we want to write so x is equal to 45 now x is equals to 4 and we get an error because constant variables cannot be reassigned so that's it let me just exit out of it this is how you can run node.js in terminal session but what if you want to create a project where you write the code and all of those code files are combined together and they work with each other in cases like this first you have to create a node.js file we'll see how to run a single script if you're creating a project the setup is a little different and we'll take a look at that as well so here what i'm going to do is i'm going to write console.logs and i'll write hello i save this go back to my code and i type node space index.js and here the file gets executed and then after executing file it exits out any javascript code is valid here as long as you're not referencing the browser-specific code such as uh document dot get elements by id or window or history or things like that any other javascript code is valid here node.js ships with a few modules on its own so that you can use things like file manipulation file handling http requests and so on you can read about them at your own pace now let's say i want to create a project in which multiple files are there and i want to be able to share this project with other people to do this first thing you have to do is you have to initialize an empty node.js project in a folder i'm in a folder named node in my e directory in my e e drive to initialize a project i have to write npm in it and it will ask you a series of questions now i don't want to have to answer this question so i'll just write dash dash y press enter all of the default values are put for the answers the questions that i would have asked would have been the name of the project the version description and so on so doing this ends up creating a package.json file this is what specifies the node.js project so any directory that has this file in this format is a node.js project or is a valid node.js project now uh the reason why npm is used is so that we can use the code created by other developers we can import libraries to perform tasks without writing the code for them suppose i want to build a web application for that i want to import a web framework such as express js if you have ever worked with node.js expressjs is quite a popular web framework let me show you how you can use it here to do this type npm install and make sure you're in the same project where you have initialized a package directory if you have not initialized an empty project then this command might throw an error or might install something but could lead to some issues make sure that you have done that now npm install express press enter this will install a single package however multiple packages can be installed it won't take a lot of time because it's a really small package after the package gets installed we open up the same folder and the structure has changed now we have a package lock.json and a node modules folder the node modules folder contains all the modules that are required for the package that we have installed and the package itself so the package was called expressjs right if you take a look at express.js it's here and all the code in it is available here as well so if you want to take a look at how it's implemented you can do so here as well now that that's done let us take a look at how we can use it in our index.js file so i will just use it here i'll import express uh in node.js you use the required keyword although the import keyword is also something that is supported nowadays but you should just for the sake of clarity use if you require right now now that we have imported express i'll create an application of express here here i can pass some configuration options i don't want to right now but i can't app.get if i get anything for this i will just try to request and response and the response dot send hello save this and now i have to start the file so app dot listen on port 3000 and after you're done listening type in listening on port 3000 save this go back to our code and type in node space index.js i press enter it shows me that it's listening on port 3000 that means that i can go to my folder localhost folder 3000 press enter and this is the response that i get this is a local web server that is running and now i can create my html files templates whatever this is how it works again it's it what now what happens is the reason why we did all of this is because let's say that now i want to share my code so what i can do is i can just share this package.json and index.js file these two files will do it entirely for me so now when a person opens up this they will say that okay this project depends on express and they don't have to install it manually themselves just open up the folder where they have these two code files and type npm install the node package manager will take a look at all the packages your project depends upon in in our case it's just expressjs and it will install everything that is listed in this automatically so you don't have to dispatch the commands on your own and then this node modules and package.json file discrete automatically and then you can use it so this is how node.js works in a nutshell uh they we are barely scratching the surface here uh because node.js is quite deep and it takes a lot of time to understand so this is just the beginning and you can take a look at more uh packages and more ways of doing things in node.js if you're interested now let's take a look at how we can build an application in javascript uh using the technologies and topics that we have heard so far and we'll try and use as many of these technologies and screen and the features that we have learned about javascript so far into one single small project we'll try and build a to-do list application now to do that you can follow along with me all you need is just a browser an html file a text editor in which you have opened both the html file that is got this code and it has a reference to a script file and this is the script file here just to make sure everything is working correctly i'll just type in console.log and i'll just log hello save this go back refresh and take a look at the console now if it has the word hello that means everything's wired up correctly and it does so everything's working fine now it's time for us to build our application now the application that we're trying to build is a to-do list application basically what should happen is that there should be a form in which the user can enter some text and a button to add that text into the into into the uh browser's window so what to do is firstly we have to create a form here we'll create a form using html the action i can just leave as hash because i don't want to submit this form anywhere this is something that the browser needs to take care of on its own the input of type text id is going to be description because this is going to be the description of the to-do and finally what we have to do is create a an input of type submit save this everything's working thus far if we go back and if we refresh we have these two things now write something for the placeholder so that when the person is taking a look at this they can understand the placeholder text is going to be to do description save this go back refresh here and it's showing us the total description here now if i add something here let's say to do submit it it firstly you can see that it refreshes completely we need to stop that and nothing happens here as well so how to deal with this basic formula is firstly we have to open script.js first thing we have to do is gain access to the dom nodes that we want to manipulate to do this first thing i'll do is i'll also create a horizontal rule then i'll create an h3 that says to-do's and then i'll create an unordered list with the id of list and this is what will house our entire to-do list application now again if i go back and if i refresh this is what it looks like so add the to-do's here and they will show up here you can obviously style things up using css but right now we won't be doing that so save this go back to your code and now here we'll write the code first thing i have to do is i have to gain access to um the form now i can get access to the form quite easily so i'll create an id here and call it submit or i can call it f o rm form to gain access to that all i have to do is type form and since we are in the browser environment i can type in document.getelement iid the id that we assigned to the form was called form so now if i save this go back refresh log into my console and since it's on the browser i can just type in form press enter and this is the form that we get which is exactly the form we want access to now when the form is submitted i want to do something so form dot on submit this is going to take in a function i am just going to use an arrow function here but you can use the normal functions as well if you wish first thing i have to do is prevent the default behavior which is it submits the form and it reloads the page i don't want that to happen now what i'll do is i'll console log the event just to show you what it actually looks like so if i go back add to do here click on submit this is what we get this is a submit event it has a load of properties that we could take a look at source element target timestamp type submitter these are the kinds of events that we get access to these are constructed by javascript itself we don't have to worry about how that event happens but we just want to access it and then make sure that everything works so we get that it tells us okay what made it submit and this is what made it the input submit button uh the source element was the form and many other kinds of things you can take a look at how the html path is there so we have window on which there's a document on which there's an html tag inside it there's a body tag inside it there's a form pack with the idea form this is what we have right now and these are all the other properties that you can take a look at if you wish to now what we want to do is when the form is submitted after this i also want access to input box so document dot get element y id i'll use the id of input as far as i'm aware i have not assigned the id yet so i'll go back to the code and the input box has an id of description i can just call this input that'll work as well now when we get this what i want is firstly i want to extract the description to be e dot target or not the target sorry the input text dot text one save this console.log the description save this go back refresh again we'll add a to submit it and we don't get anything now if we take a look at the input here go back refresh and submit it you can take a look at how that shows up so if i were to go back and say document get element by id and if i were to get the input this is what it would look like which is exactly the same but if i then take a look at the properties that are available to me you can also take a look at that here or you can take a look at that so what we want we have text content class child or you can also take a look at the node value property there are many properties that you can take a look at you can also take a look at the in the text or inner html whichever one you wish to choose there are many properties that are available for you in order to gain access to it you have to use the javascript files that you are using so to gain access to the text inside an input in using javascript the thing that you have to do is use the text property input dot in a text let's see if that works so we go back refresh to do submit it's still not working so let's take a look at that and we can also take a look at the values so now we are getting the output that we want so here all we have to do is just type it here after we get the value as the description we want to add this to our list again we can do this here by getting access to the list get element by id we named it list save this here's the list that we have after getting access to the list we want to we can do it here but i think we can create a function here as well so i'll call it add to list inside the list i have to just pass in the description and that's about it now i can create a function named add to list this will take in a description now what it will do is firstly it will create a list item document dot create element this is what we learned in our dom manipulation text and here we want to append a child and for that appending we need document dot create text node and that would be of type description after attaching this all we have to do is use the list and append children element of the listing and that's about all we have to do to do that so if i go back now refresh this bluetooth submit and now a new item is added here so that's how you can do that it's not very difficult to do you can do it quite easily that's the to-do list that you can build you can add more items to it uh there are many other features that you can implement such as for it to interact with the web server and many other kinds of things that you wish to do one cool thing that you can do now is since this is implementing it here we can just take a look at this one problem that you might face is that once you're gone done with this firstly this box is not clearing secondly if i click submit it adds an empty one as well so here's what we can do after adding it to the list we use input dot value to be nothing that's the first thing the second thing that we want to do is we want to if after extracting the value check if value dot length is zero then we just return save this go back refresh if we click submit we get an error value is not defined okay okay not value its description go back refresh submit and now as you can see we are getting no errors here there is no input and if i add it as you can see this input gets cleared and new thing is added here now again you can uh pretty this up using css you can add more data you can clear up the code a bit you can wrap it all inside a function and execute that function whatever you wish to do depends on how you think things should go this is just one way of solving the problem the reason why we created a function to do this is because this is a chunk of code that is always going to be executed the same we always are going to create an element always are going to create a text node appended to the element and then append that to the list so since it's always going to happen we are doing it here now the reason why we executed these at the top and not in the functions is because we only want to do norm accesses once because this could get really really uh performance induces so we want to be able to do it once and then gain access to them and then not lose the access because querying the entire dom can take a lot of time so that's why we do this now if you have some other features that you'd like to implement take this as the starter code and you can implement it there as well features such as taking the to-do list application and adding a checkbox so when the user is done with the tool he will click on the checkbox and that to do will either get deleted or that to do will have a strike through it and there's a button right next to it that the user can click to delete the completed tools depends on how you wish to do this completely up to you but that's how you can do it uh this is the basics of how you can do it also if you want to save this in the local storage you can you can do a lot of things with it okay guys a quick info if you are looking for an end-to-end training in javascript intel apart provides a full stack web developer course which covers javascript and all the javascript frameworks you need to know for more details check out the description box okay guys that brings us to the end of this session i hope this session was helpful and informative for you if you have any queries leave a comment down below and also if you want us to let us know to take a different topic or a concept in the next video please leave that down also and we'll note it and do it in the near future so thank you meet you in another session you

Channel: Intellipaat

Views: 55,903

Keywords: JavaScript Tutorial For Beginners, JavaScript Training, JavaScript Course, JavaScript Full Course, Javascript, JavaScript Tutorial, Javascript Full Course, Javascript For Beginners, Javascript Complete Course, Javascript Crash Course, Javascript Tutorials, Java Script, Learn Javascript for Beginners, JS Tutorial, Javascript Beginner Tutorial, Java Scripting Tutorial For Beginners, Javascript Advanced Tutorial, Javascript Training, Javascript Intellipaat, Intellipaat

Id: 1h46cNkyXlE

Length: 234min 45sec (14085 seconds)

Published: Thu Feb 04 2021