JavaScript Tutorial for Beginners | JavaScript Crash Course | Learn JavaScript in 2 Hours

hey what's going on guys welcome back to another video so this is a javascript crash course for beginners we will go through a couple of slides and we will understand why we need to learn javascript in 2021 and we will also cover a lot of javascript syntax and fundamentals so if you are a beginner and looking to start learning javascript programming then i recommend you to watch this crash course so that you can make most out of it so if this sounds interesting then stick around also don't forget to subscribe the channel and press the bell icon so that you don't miss the videos like this one so let's get started [Music] so we will go through some slides and understand some facts and theoretical stuffs about javascript but in this quick introduction i want to answer three frequently asked questions by beginners about javascript and that is what is javascript what can you do with javascript how javascript code runs let's start with the first question what is javascript javascript is a high level just in time compile programming language just in time means you don't need to compile your code before running it it will be interpreted by the browser directly unlike java but if you want to run your code then you need to compile it first with a program called compiler and then you can run your code although java is very different language and most printers think they are same but no javascript and java are completely different programming languages javascript also confirms to ecmascript specification in fact javascript is one of the implementation of ecmascript specification although there are some other implementation as well like actionscript jscript but they are not very popular as javascript you can run javascript code on browser and server as well we will see in a bit next javascript is a dynamic typed language that means when declaring variables you don't need to specify type like string numbers which we usually do in c c plus plus java etc you just declare a variable with the value and during runtime the engine will decide the type according to the value javascript is also multi-paradigm you can write your code in many different ways you can write object oriented code or functional code not unlike other languages where you need to write in a certain way and that's why javascript is one of the most popular programming language here are some of the stats published by stack overflow where you can see javascript is on the top of the list and big companies like twitter netflix facebook google and amazon hires a lot of javascript developers every year as they have built a lot of applications entirely using javascript now let's see the second question what can you do with javascript you can choose a career as front-end development where you will build ui interfaces and will be using frameworks like react angular view or you can choose a backend development where you will write server side logic deal with apis databases and real-time chat application using node.js express and the third option and the most popular one is full stack development where with a single programming language you can build both front-end and back-end and that's the beauty of learning javascript in today's world javascript is all over the place if you want to build web mobile applications or you want to build real-time chat applications you can also build desktop applications with electron js which is javascript library of building desktop applications or even games so now you must have realized how important is to learn javascript and the third question is how javascript code runs let's understand with a small example you have a simple javascript function that gives a sum of two numbers you don't need to worry about functions now it's just a theoretical concept so that you can understand how this code execution happens now when this application runs in the browser the browser renders the javascript code with some javascript render engine and these engine execute your javascript code line by line for chrome we have v8 javascript engine and for mozilla we have spider monkey there is another way of executing javascript code and that is node.js a runtime environment built on chrome v8 engine for executing javascript outside your browser so now you have good understanding of javascript let's see what are the topics we cover in this video we will cover the basics of javascript syntax and fundamentals we will also look on the variables data types operators and conditions we will look on the arrays objects how we write functions how we write loops constructor functions and prototypes and in the last we will see for the window object dome manipulation events and some feel of es6 so let's jump into the code all right guys so now we have a simple html document and first thing we are going to see is how we can add the javascript into our html document so we can add javascript into our html document using the script tag so i'm going to add a script tag here all right and the next thing i'm going to do i'll just simply write an alert and i will write js tutorial and this will simply give the browser alert on the screen so now if i save you can see that there is an alert saying js tutorial so so this way you can add your javascript code but usually we never add script tag in the head section because if you have any error in your script tag then the code execution will stop there itself and your html will not render on the screen so we always avoid adding the script tag on the head section and instead of that we add it in the body section so we add the script tags at the bottom of the body so here and the output will still be the same but it's always recommended to have a separate javascript file and you link that javascript file into your html document so we are going to do the same thing so what i'm going to do i'll just remove this alert and in the script tag i can add a source and i'm going to give these path of my script file so currently i don't have any so let's create a new javascript file so i'll create a new folder i'll name it a js and inside the folder i'm creating a new file and i'll name it as script.js okay and now i will just link the file here i'm going to give a path it's in js and it's in script.js right so now we have linked the javascript file and now we don't want this html file anymore because we are not going to write any html for now we we are going to do everything uh in the script file so let's go to the script file and now in the script file if i alert again so this time i'm going to write simple hello okay and now if i save it so now you can see that there is an alert on the browser with hello so now let's see what are the ways we can actually output our js code so obviously alert is one of the way you can do it and the next way you can do it if you want to accept some input from the user you can use prompt and when i use a prompt i'll just type what is your name okay and i'll just comment the alert because now we don't want and if i save me now it's prompting me that give me your name it will take an user input so what i'm going to do i'm going to say the page and if i click ok nothing will happen because we are not doing anything with the user input but if you want to see what is the user input next way to output a javascript is the console and which is the most uh developers they use console to do debugging and to print any uh data in the console so let me add a console so what i'm going to do i'm just going to add a console log here and i'm going to add a console.log so that i can log what the data or what the input user has entered all right so now if i say the page and if i write ok then we can see it in the console but how we go to the console so to go to the console it's very easy you just have to do a right click you'll click on the inspect and inside the inspect you can see the first step highlighted is the element but you need to go to the console so this is the browser console and in the browser console you can see my name the page here and this is because we entered the page when it was prompted so you can see that it's on the line two the console is from line two and this is our line two so this is the console so in console i mean you can log a lot of different things so console log is one of the way just to log a simple data in your code so i will just add i am in script file so when i do this it will simply print it on the console but console has more methods i mean it's just not the log method but you can also have more methods so in this one i'm going to do is console.error if you want to console some error on the console you use console.error and when i say i will write i am an error and you can see that now this is is the error you have a different visualization when it's an error it's it's going to be have a red color and there's a cross mark similarly we can have a warning as well if you want to output the warning then we can have a console one and i will write i am a warning and now you can see for warning you have a yellow triangle and then it is the different color so this means you can see it's a bonding so apart from the warning you can also in log some normal information so i will add console.info and this is going to give me a normal text on the screen i am a info and it's going to give me a normal same so info is more or like similar to the log but from the name we understand if we need to output some information we use console info if we just need to do some output on the console then we can use console.log if we want to output the error we can use error and if we want to output warning we can use the one but these are not limited only four methods there are more i mean you need to check but i'm going to cover only four so i i'll just going to remove this and the next thing we are going to talk about are variables so in javascript you can declare a variable in three different types so earlier it was where but when es6 came the es 2015 we say uh in es25 they introduced let and const so let's see what actually this where is what is this let and what is this constant and what actually the difference between them which one to use when and how to use so what i'm going to do i'm going to declare a simple variable x equals to 5 all right and then next i'm going to declare a let y is equals to 10 and the other one is i'm going to declare a const z is equals to 15. all right so i have declared three variables and so let me console them first so i'll write a console log and i'm right x and i'm just going to copy paste this for y and there and you can see the outputs here but if i want to change the value of z let me assign z is equals to 20 now and if i save you can see i'm getting an error and that error is because z is declared as constant and you cannot change the value of the constant so for the constant is clearly a difference that constants are something which has to be constant throughout your application the values cannot be changed so you declare all the variables as constant and you only change this constant to let when actually you know that this variable has to be changed late execution of the application so in that case you just change the cons to the led but now what is the difference between let and variable so when you declare something as variable or where it has a global scope that variable will go to the window object we're going to see what is the window object latest need to understand that when you declare any variable as where then it it is having a global scope but when you declare a variable with the let it will have a block level scope so to make you understand the block level scope what i'm going to do is i'm simply going to have a small if condition and if it is true then only i'm going to print the console of x and console of y all right and when i do so i'm just going to comment this out now all right so when i do this you can see that i i simply get the same output because the condition is satisfied it's true and you will get x and y i can declare a let y is equals to 5 here and i'm going to declare a where x is equals to 6 and if i save this time then the value of x and y will obviously it will change because i have overwrite the values which were previously declared but when i want to print these two outside of this and in this case i am going to comment this out all right so when i print this outside the block of the my if condition you can see that i get and for the line number 17 which is the x i still can access x outside the if condition but for y i'm not able to access y outside the if condition and that is because when you declare a variable as let it will have a block level scope that means the variable y will only be available within this block if you try to access is outside the block you won't be able to access it but if but on the other hand if you declare a variable as where you can access it anywhere in your application because it's going to be added as a global scope it's not a good practice to add every variable to a global scope because then your global scope will get polluted and your application will behave uh not exactly how you want because you will never know what value of the variable is change what time it's better to use constant everywhere but if something is not being fulfilled with the constant you change it to the let but you avoid using variables so these are the variables where let and constant all right so the next thing i'm going to show you is the operators so let's see what are the operators so javascript has a simple operators like you have in other programming languages like you can have let me add a console dot log and i'm going to simply add two plus two all right so these are some of the arithmetic operators and let me go to console back and if i add 2 plus 2 is 4 if i can use the multiplication it's going to give me 4 i can use sub subtraction it's going to give me 0 and i can use divide it's going to give me one so these are the arithmetic operators but apart from these arithmetic operators javascript also have an assignment operator and the assignment operator is if i write const x equals to 10 that means the equal to is an assignment operator and using the assignment operator we actually assign a value to a variable so this is the assignment operator and if i print this constant then i will get 10. apart from the assignment operator you can also use an increment operator so for increment i need to change the value let me change it to where and you add plus plus so when you add plus plus it is going to the actual value and when you do the next print then it's going to give you an 11 because it is incremented by one so if you want that first the value should be incremented and then it should be printed then you can add the plus plus here and i'll just remove this so in this case it's going to give me 11. all right similarly you can do the decrement operator so minus minus so first is going to take the current value it will do a minus minus to it that means it's going to decrement it by one and then it's going to print the values so when i save it i'm going to get nine all right so these were the operators we usually use in the javascript the basic operators next thing we will see the data types in javascript so javascript has primitive data types and non-primitive data types in the primitive data types we have the string we have number we have boolean we have null and we have un define we also have symbol but symbol is not which is generally used in i mean i have never used symbol by myself in in in the coding so we we're not going to discuss symbol because it's not one which is being frequently used so let me assign some variable i'm going to give a name of of the page all right then i'm going to have an age as 29 okay then i'm going to have that is pro grammar i'm going to say it true yes i am a programmer then i'm going to say no value for no value i'm going to give null and then i'm going to give a let on [Music] assign and to unassign i'm not going to give any value to unassign all right so now if we want to see that the name is what is the type of the name then we are going to do console dot log and if i write type of name so if i write a type of name then it should give me string because i i have assigned the value string to the name so in javascript you you don't need to specify the data type you simply specify the value and when actually the code is executed the javascript engine on the runtime it will decide that it's a string out it's a boolean or it's a number so if i save it now it's going to give me a string which is actually name is a string so if i want to see about this then this should give me a boolean and yes it's giving me boolean so for for the numbers we in javascript we don't have floats or decimal we only have numbers so if if i have here let me give you here first i will give h i'm sorry we should not declare a variable with a capital so if i write if i want to see h it's going to give me a number but if i if i write minus 1 then also it's going to give me a number or if i write 0.5 it will still be a number because javascript doesn't have floats or decimals it treat everything as numbers so let me show you if if we see the type of no value then it's not going to give me a null it's going to give me an object because type of null is object and you don't ask me why why the type of null is object is actually a gotcha uh so it's an exception in javascript that when you try to check the type of a variable which is having a null value it's going to give you an object so let me check for the type of unassigned and i haven't assigned a value to an assigned variable so whenever you declare a variable by default you have an undefined value in it and when you add the value to it then it takes the value otherwise it will always give you an undefined as its value all right so so this is why we say that javascript is a dynamic type language because you don't need to specify the type of the variables when you declare the variables so if you want to have a type while declaration like let name should be a string then you should use typescript instead of javascript because typescript is a typed language and when you declare variables in typescript you need to specify the type of the variable you use so that that's an another topic of discussion but i just wanted to say you that yes i mean typescript is the superset of javascript that means all the features of javascript will be there in the typescript plus typescript offers you some additional features all right so these were the data types and now next let's see about strings and string methods so what i'm going to do is i i'll just declare a first name and i'm going to give first name as the page all right then i'm going to give a last name and i'm going to give a last name as malvia and i'm also give going to create one more variable i'm going to give languages and the languages will be html css and java script so i simply created three variables and assigned some string values one thing i want to show that if you want to define a string you can also define a string as let name is equals to new string and i'm going to give as the page also one of the way of declaring a string but we we never use this constructor object or the constructor function to define the string because now when you see that if if i'm going to write a console.log and if i want to have a type of if i write a type of first name it's going to give me a string but if i write the type of name it's going to give me an object and not the string so performance wise if you check on the performance it's always recommended to use uh the simple way and not the constructor function to declare ring it's not only for the string you you can do it for numbers booleans for all the primitive data type we saw you can do it all right so we i just remove it because we don't want this part and now if i do this first name then i'm going to get string so there are some of the string methods which you can use on the string like if i want to know the length of it i can simply write length and i can get the length of my string okay you can also use concatenate so if i want to concatenate then i can use concatenate method and then i can use last name so this is going to concatenate and the other way you if you want to concatenate is you can use it is my first name is then if you want to concatenate with the variable then you then you put a plus sign here okay and then you add your variable first name and then you want to add a string again then you add a plus now you add a string here my last name is you add a plus and you write a last name and this is going to give that my first name is the page my last name is the page but there is a better way of writing using a template literal and that es6 way is uh it's very easy you write console.log and you use backticks and in the backticks you can simply write my first name is and when you have to have a variable value here you add a dollar sign then you add a curly base and you enter the variable name and then you simply write my name is the page and my last name is you can dollar and then you can add your last name and it's going to give me the same way so this is a much uh better way of writing you you avoid all the plus signs and then codes and again plus sign and again codes so now let's see some of the string methods which we can use if you want to have a substring of the complete string then you can do that as well so there are some of the methods in the string which you can play around with the strings so what i'm going to do i'm going to have a language and i'm going to do a substring okay and on the substring from where i want to have the substring so i'm need to give the first argument as a start so i'm going to give it from one and if i save it it is going to start from the one that means the index of h is zero the index of t is one and i need a substring which is starting from one so that's why it's starting from t m l and you can also add the second argument these starting from the one how many characters you want more so if i add that from one i want five characters more so that is going to take that from one which is one two three four five and the fifth one is a comma and then the space so if i write a six here i'm going to get the string till c so this is the sub string so there is a similar method called sub string and in that sub string let's go and check the substring so i'm going to add language dot and i'm going to add the sub string but in the substring you you add the first and the last and it only picked the values in between not including the last one so let me give you one comma six so when i give one comma sick that means start from the first index and go to the sixth index but don't include the sixth one so that means if i start from the first index which is t and c is the sixth one in substring the last index is not included that means c will not be included here so this is the difference between sub str where you have a start and you have a number of characters as the second argument but in substring you have a start and you have an end but you don't include the end in the result next i want to show you is this split which is very useful and we often use split so like i have languages and i need to split based on the comma and when i split it i'm going to get an a new array of strings and now you can see that i got a new array of strings all right and one thing i want to show you also do a replace so if i add a console log and i'm what i'm going to do i'm going to add languages dot replace and i want to replace the html with html5 all right and if i save now you can see the html string is replaced with html5 all right so so these were some of the string and string methods and the next thing discuss is about the arrays so let's see how we can declare the array so let me have a variable i'm going to give a name as frameworks and i'm going to have angular then i'm going to have react so these are the javascript frameworks and view okay and i will going to create a one more way so this is one of the way of creating arrays and declaring arrays and assigning values the other way you can do is let me have a data basis and you can use the same the constructor object with new keyword new array and then you can assign the values i will assign the value db2 and i'm going to give db all right so now next thing we will see how we can access the elements so if you want to access the uh element from the array you can access it using the index so i'm going to do framework and i need to have a value of 0 index so it's going to give me an angular so similarly i can do it 2 and if i write something which is not present in the array is going to give me an undefined because it's not there in the array and if i remove it i want to have i want to just log the complete array then it's going to give me a complete array with indexes and lengths if i want to change the value of the zeroth index then i can do like database of zeroth and i can change it to oracle and if i save it and now let's do the console log of databases then it's going to give me an oracle okay so we see that how we can declare the arrays how we can access the values the next thing we can see that what are the array methods available that we can use right so i'm going to do a console.log and i'm going to have the i need to find the length of my array so let me add the length so i can get three as the length of the array uh i can also use if i want to sort the values of the array i can use sort method and when i use sort method you can see that now it is sorted alphabetically so if if similarly i can do it for databases then it's going to have a mongodb oracle and sql all right so so next we will see that if we want to remove an element from the array we can use it pop and then pop will remove the element from the last so now if i want to see the databases what will be the values the database will have only mongodb and oracle because when you use pop method it's going to remove the last element now if i want to remove the mongodb which is the first element so if you want to remove the first element a database dot shift and you save it so now if i print the console log again here you will see that now the first element which was mongodb is now removed similarly if you want to add an element then at the last then you use push so let me add an element so what i'm going to do i'm just going to add a push here and in the database i want to push cassandra which is a database and now if i add it you can see that there was earlier it was mongodb oracle and now cassandra is the new one added to the array and if you want to add at the first index then instead of push you can do unshift postgre so unshift will add the element at the zeroth index all right so one thing i want to show in array is if you want to check the type of array and then if i do type of frameworks then it's not going to give me an array it's always going to give me an object because rays and objects they are primitive to type and they are always treated as object but if you actually want to see whether it's an array or not there is an another way of checking that so i'll show you what is that today so what i'm going to do you can use array and then you can use is array and then you can pass the value and this is going to give me true yes it says an array so this is a one of the way of checking the array and the other way you can do is let me add a console.log in the console.log you can always check the instance off so framework is an instance of is an instance of array then it's going to give me a true yes framework it is an instance of array all right so the next thing we are going to see is the objects in javascript okay and how you can declare an object in javascript it's very simple you just declare a object literal so so this is how you declare an object simple so now this is the object in javascript this is an empty object you can add properties and methods to this object so let me add so if i want to have a console.log and employ it's going to give me an empty and if i check the type off it's going to give me an object so it is an object now let's add the properties in this object so this is an employee object so an employee will have an employer id then the employer will have the first name i'm going to give the page the employer will have last name i'm going to give malvia the employer will have age i'm gonna give 29 then the employee is going to have a date of joining i'm going to give 2010 2019 all right i'll just make this a string and you can also have the employee is going to have an address so an address it's again an object inside an object and the city will be mccarthy and the country will be pains and i'm going to have a skills which will be an array so this employee has skill of html css javascript sorry i just need to add the colon here all right so this is the object we and i have created a little bit bigger and complex object with different types in it so there is a simple properties in it and there is an object which is an address inside an object and there is a array which is inside an object which is skill so now if i print this object then i can see the complete object here okay now let's see how actually you can access the object properties so let's access the properties the simple one is i'm going to write is that employ dot id employer dot id is going to give me an id so similarly if i want to have the so you can see now i get all the properties on my employees here so if i write i want to have an address then it's going to give me an another object but if i want to access the city of the employee then i'm going to add a dot and i'm going to add a city and this is going to give me the city if i want to access the skills of the employee then i can access skills and it's going to give me an array and if i want to have the first index then i can add an index here and i can get css so this is where you can access the values apart from the properties you can also have methods in your objects so let me add a method in my object i'm going to add a full name as a method and this method is going to return me i'm going to use string literal again okay and now so now i have the first name and last name and now if i want to access the method i'm going to add full name now you can see that when i actually trying to access the full name just wrote employee dot full name the similar way i i was accessing the properties like employee dot address employee dot skills employer dot first name but when i write employee dot full name it's going to return me a function but i don't want the function i want the values so you need to have a parenthesis here if i save now it says that reference error first name is not defined at object dot full name and why is it so we have first name in the object but and this is because if this is a function and the values you are trying to access inside the function is the first name and the last name but there is no direct reference you cannot access the values directly you need to have to add this keyword and when you add this keyword and if i save it i get the values so this keyword here is actually referencing the employee itself and if you want to see that i can do a console.log here and i can write this and i can save if i write this and it's give me the complete object and our object which is the employee itself that is why i have to write this keyword here if i want to access the properties so this keyword has different behaviors so let me talk a little bit about the this keyword so if i write a this keyword here console.log and this then you will see and i save it so you can see that on line number 21 which is console log this giving me a window object but if i do the same thing on the line number 16 it's going giving me the object itself so this keyword will always be referenced to its callee like when we call this keyword on the line number 21 we are calling it on the script file itself which is the by default the topmost parent is the window window object so here we are calling it on the window object but in this you can see the full name and in this case when you call the full name this method is called and when this method is called you get this line is executed and in this case this will be referencing to the callee and the colli of this method is the employee itself so in this way this keyword is referencing to the employee so this keyword has a different behaviors if you directly write this keyword then so if i write this keyword here itself then it's going to have an window object because now the callee is the window itself so it is going to reference to the window but in this case when i called employer.fullname the callee of this name method was employ so it is referencing to the employee i don't need to confuse you much about this keyword but for now you can always keep in mind that this keyword will always reference or always point to the callee of the function all right so there is an another way of accessing the methods and that way is the destructuring so let me show you the ees 6 d structuring so what i'm going to do is in d structuring you can create a variable and then in the parenthesis you can have you can pick the values from the employee object so if i want to pick the first name and age what i'm going to do i'm going to pick first name and i'm going to pick age all right and they i'm picking those from the employee object so i'm going to give an employee here all right and now if i console dot log the first name it's going to give me the page and if i console log h it's going to give me an h so this is called d and it's very useful when actually you work with the react framework now let me show you uh one thing uh we will have an array of objects so what i'm going to do i'm going to create an array of employees all right so this will be an array of employees and now i'm going to have this object and i will add the object here and now we don't want so many things we only know needs few things so this is one object let me create another object change this to amit and i'm changing this to duvet all right and let's age is 35 and i'm going to give your age as 25 all right so now we have an array of objects and this is the actual uh a replica or you can say in real life when you actually build projects you are going to receive a data always be in in the form of array of objects like this can be an array of books or this can be an array of people or person or this can be an array of cars and then you pick the values and you display it on your html so how how you can access this so if you want to access this you can have console log let me first print all the employees so all the employees so now you can see that each of the element is in a is an object so if i want to access the first object then i'm going to do i'm going to write index 0 and this is going to give me the first object now if i want to access the second object then it's going to give me the second object and if you need to access the values then you can write dot and with the dot you can access the values further right you can access age so this way you can add access further so if if this had an address as well it was an object and i had a city of mccarthy and i had a skills and on the skills i will write html so now if you wanted to access the skills then what you will do you need to have an employees you will have the second object and then you going to have skills and you wanted to have the first object in skills so you can object it and you will get html so it's very easy i mean you need to trace uh you need to trace to the element which you want to access and usually you trace it with the dot in between so if i wanted to have an address okay and i wanted to have a city i will go and i will add dot and i'm going to traverse it till the property i want to access so actually when in real projects when you want to send a data to the backend server you actually have to send it in the form of json so json is a way of communicating from a front end to the backend on backend to the front end so the data transfer is happened is in the form of adjacent objects so this is a javascript object you cannot send the javascript object directly to the to the server so you need to printify this and how we can convert this to a json object so i'm going to do a constant and i'm going to show you employees jason and i will have a json dot stringify and then i'm going to add my employees here all right and now let's print this constant so i'm going to do a console.log and i'm going to add employees json and i'll save it so this is the actual json all right so what i'm going to do uh uh now if we want to see this json then i will click here and i'll just add this json and now you can see that this is the json object which you actually send to the server so this is when you actually send it from your front end to the server but when you actually receive the response back from the server which will be in this form in that case you actually need to convert it back to an array of objects and how you can do that so that you can do uh you can write constant emp array okay and now json dot parse and now i'm going to pass this employee json okay and now i'm going to console log this so that you can see the difference of json stringify and json parse so now you can see now this is a back i am back to my javascript array of objects using the json parse so when you send the data to the server you need to stringify your array of objects and convert it to a json string and then you send it and when you receive the json string you pass it and then you get back your array of objects so this is the the idea behind showing you the array of objects because when actually you build projects you will be dealing with this all right so the next thing i want to show you are the loops in javascript how you can use loops in java script so javascript also have a similar loops like the other languages have you can use for loop you can use while loop so let me show you how you can use for loop and i'll just remove this and the first one we can use is the for loop so i'm going to do for let i is equals to zero so i want my loop should start from zero and i want my i length so let me have the employee length okay and i plus plus all right so i'm going to loop through all the first name so what i'm going to do i will write console.log will have the employees of i dot first name and now it's going to loop through all the first names similarly if i want to have an age i can have an edge as well so this is was a simple for loop and you can also do this the same thing using while loop so let me have a while loop here zero and you add a while this j should be less than your employees length okay and then you can have console.log you can have employees of j and you can have j plus plus and you will get both your objects so if from the object if i only want the id of the employees then it's going to give me only the ids there is one more which is the uh for off loop and to use the for of loop you can have a for okay and you will have a let variable employ of employees and now the each employee is actually the each object of the employees array so if i going to do a console.log so now it's going to give me both the objects so it's going to the loop will go on until it gets all the objects of my employees so you can now if you want to have the first name then you can directly use the first names it's going to give me the first name other than this we also have some higher order uh array methods which are from the es6 so let's take a look on the es6 array methods so i will just comment this out and i'm going to add from here all right so the first one is the for each loop so let's see how we can use the for each loop so i'm going to have an employees dot for each and inside the for each i will have a function i i will have an employee an individual employee and then i can use console.log and i want to have each employee's last name all right and i'll save it so now you can see that using for each we can actually loop through all the employees and get the access to the values so this was for each for each the other one i want to show is the map so using map a map will loop through all the employees and it's going to pick one of the employees and then you can manipulate the data of that employee and it's going to return you a new array so how i can do that from this employee object i need to have an array of first names so if i want to have array of first names what i'm going to do i will have a constant and i'm going to have names and employees dot map and i'm going to have a function here employ and then it can return me the employee dot first name and now let me print this so dot log names so the names will give me now the array of the names and i can see that i got undefined and that is because i am accessing employees but actually i wanted to access employee emp right so now you can see we get the page and the cache so this is the map and the third one i want to show you is the filter you can also filter it and let me show you how you can filter it so i'm going to have a constant employee okay and what i want is i want em from the employees i will do a filter okay i will have so all have a very similar way of uh writing uh you need to have an inner function and then you have so i'm going to return and employ dot id is equals to 101 and i'll save it and now let's console this so i will do a console.log and i'm going to have an employee sorry this should be double equals to so when i do employees now you can see that from the employees array i have filtered out some of the employees based on the criteria all right the best thing is you can also do chaining of it so if i do a chaining so what i get the output of this i'm going to have a map on it and in the map i'm going to have one more function and i'm going to have an em b and i want all the names of those employees which match with the criteria so here i'm going to return the emp dot first name all right and now you will see that i have did a chaining of these uh higher order array methods i did a filter first and then i applied a map on it the next thing we are going to see is the conditions so let's see conditions so what i'm going to do is uh let me have an variable x and i'm going to assign a value of 10 all right and i'll do if x equal to equal to 10 then i'm going to have a console log x is equal to 10 okay and if this condition doesn't match then i'm going to have an else and in the else i can add console.log x is not equal to 10 okay so yes now we have the value as 10 and then it says yes x is equal to equal to 10 the condition match so we will get this value to be printed on the console but if i change it to 20 then it will say x is not equal to 10 all right here i want to show you something about double equals to and triple equals to so double equals to is the equality operator while triple equal to is the strict check so when you say double equal to it only matches the values but when you do the triple equal to it actually matches the value but it also matches the type of the values on both the ends so it will also match that yes x is also type of number and 10 is also type of number so if i want to show you then you can see that if i do this and if i make it 10 here again it still says x is equal to 10 which is actually not correct because we assign the value of x as 10 which is a number but now we are checking that x is equal to equal to 10 which is a string so it is an implicit type casting but if i want to do a strict check that check the values but also check the types of it then i'll say a triple equal to and if i save it now i'm actually going to get x is not equal to 10 because the values are matching but the types are not matching so this is called triple equal to strict checking all right you can also add a if statement here and you can say if x is less than 5 then i want to have and i can add an else here and i can add actually console dot log x is not less than 5 then x is less than 5 yeah so now you can see that if i make the value of x 4 it's less than 5 and if i make the value of 20 then it's going to say x is not equal to 10. this is the uh if else and i i wanted to show you that you can add the operators uh operators here so if i have a let y is equals to 10 okay then y is also triple equals to 10 then x or y is equals to 10 i will just change this all right so now it says that because this condition x is equal x is triple equal to 10 is not matching but this condition is matching so it will go here but if you want that both the conditions should be fulfilled then only it should go inside now in this case it will not go here so this way you can write the if condition you can also use the ternary operator let me show you the ternary operator dot log and i'm going to have if x equals to equals to 10 if this is true then i need to print something but if this is false then i need to print something so you add a question mark and you add a colon so if now x equals to equals to 10 if this value is true then the text here is will be printed and if it's not true then the text here will be printed so now the value of x is 20 which is not satisfying so this is giving me a false value so if it's false then it will not go here and it will go here that's the reason it's printing false but if i make this 10 then it's going to print me true so this is a ternary operator you can put a condition in in a single line statement and you can check whether the condition is true then you can display something or you can show some text if the condition is false then you can show some other text all right so apart from this you can use switch case so let me remove this now and a constant i'm going to write a dev is equals to html and sorry html and now i'm going to add a switch and that switch is going to take a variable which is there okay and then now i'm going to add cases so if the case is equals to html okay then in that case console.log i am html developer okay and then break we can add other cases as well so i'm going to add a case css then you can have console.log and you can print here i am css developer you can do a break and then you can add a default case okay and you can add a console and you can add something i am a beginner all right and i'm going to add a break all right so now you can see we have an html and this dev we pass it in the switch and it matches this case and that's the reason we are getting that i am an html developer if i change it to css it's going to give me i am a css developer and let me change it to javascript then it's going to go into a default because i don't know javascript and i am still learning javascript so i am a beginner all right so the next thing we are going to see are functions let's see how we write functions in javascript okay so if you want to write a function in javascript then you can simply write function show text name of the function then you give a parenthesis and then you use curly braces and inside the function let me add console console.log i am inside a function okay so this is just a function a declaration and a function definition but if you want to execute this function you need to call this function so how you call this function you write a console you make a log so you will write the function name and then you add parentheses to execute that function so if i remove the parenthesis then it's going to return me a function but now if i want that this function should get executed i need to add parentheses and now if i add parenthesis you can see that it says i am inside a function so this is a simple function so you can also take this function can also take some argument let me take an argument of text and this time what i'm going to do i'm going to pass the text from here good morning okay and now what i pass it i just want to display that so this is now says good morning so this means that in the function you can actually pass arguments and you can pass more than one argument so let me add one more argument i'm going to add good knight okay and then i'm going to take an another argument here and this time i'm going to say text 2 or text 1 and then i'm can display the other text as well so i will add here and i'm going to add yeah so this is going to give me good morning and good night so you can pass n number of arguments in the function so this was a simple way of uh declaring and using functions now let's see what is the es6 way of writing functions so in the es6 what i'm going to do i will have a constant short text all right and then you add parentheses and then you add an arrow function and then you write a curly braces so this is the es6 way of writing a function it's simply if you want to turn this function into an es6 way then i can simply change this to constant show text one i'm going to write an equal to then you can just remove this part okay and then you have your open and closing brackets and then you add a arrow function and now this is changed into an arrow function and if i save it then you can see you still get the same result so this is the es6 way of writing and function and we call it as es6 arrow function because you use an arrow while writing a function but the benefit of this uh arrow function is that you can actually write the whole function in a very short way i mean you can reduce it so if i want to have uh what i'm going to do i'm going to do a backtick here and i'm going to have one here and i will so i want to show you something so if you have something like this text one okay now i can easily remove this because i am already printing both there and i'll close this back tick all right so now if you have only one statement a single line statement in the arrow function then you can actually remove these parentheses as well so if i remove this parenthesis and then i can take this to the single line and if i save this now you will get same result so now you can see that how short we have returned the whole function and now it's just a single line and it actually a function all right so the next thing we are going to see is the constructor object okay so the constructor object uh if is is the way of creating uh when you use object oriented programming so let me show you how you can create a constructor object so let me have a function and i'm going to give a name mobile so it's always better the to use a upper case while declaring a constructor object and you when you declare a function you this so this way you can distinguish between a function and a constructor object okay so what i'm going to do i will have a constructor object object and then this object is going to take values as brand brand and i'm going to have a price and a launch date okay and this dot brand is equals to brand this dot prize is equals to price and this dot launch date is equals to launch date okay so now you have created a constructor object and now using this constructor object you can actually create the object instances so let me create an object instance of s two it's a samsung s2 and you can use a new keyword to create a instance of a mobile and i'm going to give samsung as a brand and i'm going to give a price dollar to 50 and i'm going to give a launch date 10 12 2019 okay and now you can actually console this object instance so let me add this object instance and now you can see that this is the object instance so s2 is an instance of an object mobile and you can create multiple instances of this mobile now so this mobile constructor object will act as a blueprint which which you can say as a classes in if you are coming from a java or a cec plus plus background or if if you know the concepts of object oriented programming where you have classes and then you create objects using new keyword we are doing the very similar thing we created a constructor which is acting as a class and then we created an s2 which is acting as an object of the class so you can create multiple you can have one plus and i can have here one plus i can change it to 350 and i can have it it was launched in 2018 so in this way you can create as many objects as you want and let me add here one plus all right so now you can see i want to show you one thing that whenever you create an object so every object will have a proto property and you can see that this is an object and this object is having a proto property which is actually an object and you actually can add properties and methods to this proto property and if you want to add any method or any object to this proto property then you can actually do it so i have the mobile dot prototype dot and let me add a property and i'm going to give a 4 gb ram and if i save it then now you will see that there is an extra property added to this proto so you can create you can create a methods as well in the prototype so i will add mobile dot prototype dot get launch year which will be a function function and that function will return us this dot date dot get launch year all right now let's see so this is the proto and now we have a method as well added to the proto so it's it's a good practice that you declare your properties and then you add some methods to the proto object using the prototype so let me show you one thing i'm going to have a date object here so that now if i want to get the launch year then i can actually add dot get launch year and if i will do that then i'm going to get the launch year of samsung s2 which is 2019. okay actually i did something wrong here it should be get full year okay so now if we see that s2 dot get launch year i'm getting 2019 and when you use the date object you actually get access to some of the methods like launch date dot you can access get date you can do get day you can do full year hours milliseconds get minutes seconds time zone and everything so if i do a get date then it's going to give me a date which is 12 and that's what we gave it 12 10 20 19. so this was the old way of writing but you can actually achieve the same thing using es6 syntax it's just a syntactic sugar nothing is changing they are just trying to have a similar concepts of class and objects so the people who are coming from the java background or a c plus background they they see a familiarity with the class and objects so i'm going to create is i'm just going to convert this simply into es6 and now you can see that i have a class i still have a constructor function and then i have a method in it and if you see it now you will still see it similar there's nothing changed you still have a gent launch year method you still have a ram you still can access the prototype and it's the same so this is called the class and then you created an object here so you have in class and object concepts in javascript as well all right so now let's jump on to window object so we'll see what is this window object and what is this dome all right so i i will just want to do a console log and i'm going to have a window all right and i'll see what actually i get so i'll do this or whether i do console log this i'm going to get the same thing because the callee is still the window object and i'll just comment this out and let's see what actually we have on this window object so this window object has actually have a lot of methods in it and you can use these methods so let me show you one of the method just to have if i do window dot location and i'm going to get what is the route of my page is and all the information related to the uh browser history so now if i expand this you can see that my host is this the host port number and the page name and also if you want to have the access of the complete uh html document then you can actually do the document here so i'm going to do a document and this is going to give me the complete html of my page so you can see this is the complete html of my page so this is the window object and now let me show you how you can actually select the dom elements which is the document object model and you you can actually select the dom elements that means whatever the html element tags you have in your html document you can access them in your javascript as well then you have some of the methods which only uh you can select single element in from using that so single element and the other one are the if you want to ha if you want to access multiple elements still let me have this multiple elements so to do that let me add an html structure on the page so i'm going to add some html structure so that now we can play with the dome and then we select the dom and then let's manipulate the dome all right so i already have some html code with me let me just copy paste all right so i added some html i have simple form and i have given some css styles so you need to know a basic html and css so if if you are not familiar with it check out my courses on html and css and then you can jump back to this point so now i have a simple form so let me show you the form i have a form with the username enter an email submit a simple contact form and now let's select something so let me show you something first so i have a section here i have an another section here so now what i'm going to do is if you want to select and single element then you can do it by window dot document we know that using window.document we actually get the document of the page itself but we can actually select the elements a single element on it document dot get element by id and i need to specify an id here so let me see what is the id i have a contact id so if i want to select this i'm going to add the contact i can do console log of this so long save it and then let's go to the inspect and i see so now you can see that i have a section so you can remove this window as well it is an optional because by default it will take window so let me remove this so you can select a particular element by id you can also use let me use console.log and this one which i very use very frequently which is the query selector and let's select a section itself okay so before saving i just want to show you that on the html structure we have two sections but when i write section here actually which section is going to select so by default uh it will always select the first match so whenever it it will traverse the whole html element document and as soon as it finds this section it's going to return that section and it will not go on looking on the other sections so these two are the methods on the document where you can have a single element selection but if you want to select multiple elements then you can do let me add a console.log and i can have document dot get element by class name and i can have the class name here so let me add a class name of section and if i add a class name of section actually i don't have any class with the name section so let me go to the html and add something so i will just uncomment this so now i have three allies with the class item so let me add that item and let's see what happens and now it can see that it is returning me an html collection but the draw back of this is when you add the get element by class name it you returns the html collection and you actually cannot apply array methods to this html collection you first need to convert this html collection into array and then only you can apply for loop and access in each item you can also use so let me add a tag name here so the tag name is li so the tag name will also return you an html collection but there is one property called query selector all and that query selector all actually returns a node list so let me add a query selector all and that query selector all actually returns a node list and now you can actually apply a for loop on it so let me actually show you how you can apply a for loop so what i'm going to do is i will just copy this okay and i'm going to add a node list okay and then what i'm going to do is node list dot for each node and i can actually console.log the individual node so now you can see that i can have an individual element so this way you can actually access your dom elements and you can do the loops you can apply loops and manipulation on it so this was the selection of the elements now let's see how you can actually manipulate dome so i will just remove this and i will add manipulating dome elements all right so now let's manipulate the dome elements so what i'm going to do i will actually change the text of this item and to change the text of this item i first need to select this h3 this is an h3 so what i'm going to do i will have a document dot query selector and i'm going to have the class name tag underscore underscore list and an h3 inside the list which will give me an access to this h3 once i have the access to this h3 i can do h3 dot inner text change the text to contact list and this is going to change the the text value from item to contact list so you you can actually change from the other methods as well so apart from the inner text you can actually change it with h3 dot text content and using text content also you can change the contact one and if i save it it will change to contact list one so this way you can actually manipulate the element or the text on the html document now let me change this list so what i'm going to do i'm going to first get the reference of the ul and i'm going to do document.query and this time i want to have dot contact go list and inside the list i need to have an access to ul if you want to see the html structure i'll just show you so that so this is the contact list and inside the contact list before we try to get an access to h3 but now i'm trying to get an access to ul i have an access to ul and on the ul i can do the first element child and then i can change the text i will change the text with inner text and i'm going to change it to html so that's going to change it to html similarly if i want to access the last child so i'm going to do a last child element and i'm going to change it to java script and it will get javascript and if you want to have an access to the middle element then what i'm going to do i'm going to have an ul dot children and i'm going to have an access to the first index and then i am going to add so you can add inner text you can add text content as well and the third thing is you can add ner html as well so let me add an html what i'm going to do i will have an h4 i'll close the h4 and here i'm going to write css so now you can see that we so the first one we used using the inner text the last one we use using the text content and the css we used the inner html so you can also add an html to your dom from javascript all right so you can also apply styles to it so if i want to apply a style then let me apply a style to the first element child i can use dot style dot background and i'm going to change the background to my favorite color which is tomato and that will change the color of the li alright so so this way you can actually manipulate the dom elements and the next thing we want to show is the let me remove this are the events all right so you you can actually have events in the javascript so and i will add a constant and i will just select this submit button first let me change the submit button to the toggle because i want to show you a toggle functionality how actually you can toggle so or let me just copy and add the ones i'll just copy okay so now i have a button and i'm going to give a toggle here okay so now this button is the toggle button and what i want that when i click on this button i actually want this elements to get disappear then reappear so i wanted i want to hide them if they are height then i want to show them if they show then i want to hide them so let's try to do that so i'm going to have a btn and that will be equal to and i will do one thing i'll just give an id of toggle so that i can select the element btn and then i'm going to do document dot get element by id and the id is toggle all right so now i have the button and now if i want to add an event to it then i can do button dot add event listener so this event listener will add an event and what event i want i want a click event all right and next thing is what actually going to happen when you actually click on the button so the next is you need to have a function i'm going to write an arrow function here and that function is going to receive an argument which is e or you can say the event and let's first see what actually we get this in the event okay all right so now if i click on the button i get an event and let's see what you get on the events so you have a lot of properties you can actually get all the information of the element we are doing so it is to the element a button and button is having an id of toggle there there are a lot of properties which actually you can use use it so what we are going to do is i need to have a reference to my ul so i'm going to take a reference to my ul so i will have a constant ul i will have a document dot query selector and from the query selector i'm going to select the dot contact list and ul so now i have an access to the ul now i will check the condition that if this ul dot style dot display is equal to equal to to block then i actually want to hide this element so what i'm going to do apply display none to it else apply block to it so now if i click on it you can see that now if i click i get the so now it's toggling so this way you can actually using events you can actually create a interactivity on your static websites so you can do some events when you click something you can change something on the page so you can also change the styles you can change the content you can change a lot of interactivity you can add to your page all right and the last thing i want to show you is i i want to create a little bit add your name you can add your email id you can submit it and when you submit it i want to have the content to be displayed in the list here and as a contacts and also i need to have a little bit of validation to be applied so let's quickly jump to that and let's do the form validation and now i can remove this toggle button again because we don't want this toggle button now all right and i will just remove this as well and we want to have a this contact ul and in the contact ul what we are going to do when you type a username and you type an email id and you submit submitted we are going to dynamically create the li items from the javascript so let's take a reference of first so i'm going to take a reference of form and i'm going to have a document dot query selector and i'm going to have a form and now then let me have for the input then for the email and then for a message so i'm going to change this to name this i'm going to change to email this has become a message and this is going to become a name this has become an email and this is going to become a message all right so so these are based on the classes and the ids which i have here so so i'm going to change this to get element by id and this is also get element by id okay and the next thing i'm going to do is i'm going to add a form and i'm going to add an event so i'm going to have an add event listener and i will have and submit event and when you have a submit event i'm going to give a function name here all right now let me write this function right function submit on submit you are going to get an event and then you can alert and let me have a clicked here all right so when i click here you actually get alert but you can see that the page actually gets refreshed you won't be able to see it here but let me add a console dot log okay and when i do the inspect now if i click you can see that there is a click blinking but actually the page is getting refreshed because we are using the form and when you submit a form the submission takes it to the another page so if we don't want the refresh of the page on submit we can actually uh prevent this default behavior so how we can prevent this default behavior i will add the event dot there is a property called prevent default and this prevent default will actually prevent the default behavior so now what i'm going to do uh let me check if uh the name dot value is equal to equal to is empty and email dot value equal to equal to to empty then we need to have a error displayed because if if they are empty we need to have an error to display that you need to have a mandatory fills so let me add let me add all fills our mandatory all right and if if they are not empty then we can have alert as success all right so now let me check if i click here it asks me that all fills are mandatory but what happens if i fill it so i'm going to have it the page and i'm going to have a mall via and if i click it so okay so i need to have an email id actually there and if i submit it it gives me a success all right so now i don't want this and what i want that actually when the error happens i need to add a text in this and i need to display this paragraph tag so what i'm going to do is first i'm going to have the message dot style dot display and that will be equals to why this typo happens every time when i type style okay and this should get block okay and when it gets blocked i need to add a message dot text content to it and that will be equals to my this message okay and then if it's else what i need to do is i will create an li so let me create an ul element that is equals to document dot get element by id contact underscore underscore ul so now i have selected this ul now i need to create the dynamic ally items and i need to add the ally items so now let me create an ally so i will have an li and i'm going to do a document dot create element so now i have created an ally element the next thing is i need to append to this li lie and what i'm going to append i need to append a text node in it because i need to have some text in it right so i'm going to do document dot create text node and inside the text node what i want to display i want to display the name name value and i need to display the email id so i need to have an email dot value all right so now we can append this li item to our ul element so now i have an ul element dot append this alight all right so now after doing this what i want that i want to clear my forms as well so let me clear my form as well so i'm going to have a name dot value equals to this empty and i will have email dot value equals to empty okay so we have done a lot of things here so now let's try something if i write the page and if i write malvia at the rate gmail.com and if i click on search i actually get this all right so now let's see what happens when actually we click on submit so when we click on submit it actually says all fails are mandatory and if we fill the form back and if we submit we get it but we also want that this should get removed so what we can do for that is we can add an on click event here so let me add an on click and when you click it you need to have a remove message method here and the same i can add on the email as well and then we will just write the definition of this method so when you do this what you want is you want that this message should be display none back so let me add none okay so i need to add a function here remove message and now if i click here i actually see the error and when i click here the error actually is hidden so i can do again i can do click i can add the cache and i can add nick at the rate gmail.com you can click it to get more to be added i can add test and i can do test at the red gmail.com add it but when i refresh it it will clear out because we are not storing the information anywhere and it's it's just on the browser so disappear when actually we repressed because we are not storing the state anywhere so i i hope we have covered a lot of things uh in this video about javascript if you are beginner then then this is absolutely fine you have learned a lot of uh concepts fundamentals syntaxes of javascript and es6 as well so i hope you like the video and a thumbs up is appreciated uh you can put in the comments if you want to have some deep dive into some concepts uh let me know on the comments i can create a video on it and i can try to explain you more better so yeah let me know in the comments if you need anything or if you want me to make a video on some concepts with the deep dive i'll do that as well and you can also connect with me via facebook or instagram i will add the links in description below and please make sure you subscribe my channel and press the bell icon so that you get notifications when i create these awesome videos thank you thanks for watching

Channel: Dipesh Malvia

Views: 6,434

Keywords: javascript, javascript programming, javascript tutorial, learn javascript for beginners, javascript basics, javascript course, javascript crash course, learn javascript, learning javascript, programming tutorial, js tutorial, javascript tutorial for beginners, javascript tutorials, javascript lesson, javascript beginners, java script tutorial

Id: sptS-bgg8Ro

Length: 107min 17sec (6437 seconds)

Published: Wed Apr 21 2021