Unlocking JavaScript: Core Concepts and Beyond

1. Class Introduction: Hi. My name is John Shokar, and I'm the instructor of this course. Honestly, it is the best course I ever built. Now, why about JavaScript? Currently, Java Script is the most important language entire world. But there are a lot of resources out there that can teach you JavaScript. But a lot of them are outdated. Otherwise, it is not complete. Most of the courses teach you the older version of Java Script. But in this course, we are going to complete Core Java Script and advanced Java Script together. With that, also I'm going to give you quizzes, practices, and exercises. We are going to start Java Script from the very beginning and step by step, I'm going to cover all the modern concepts. So without wasting a lot of time, let's see what we are going to exactly learn from this course. This course is divided in two part, Code Javascript part and advanced Javascript part. Let's see what we're going to learn in code Javascript part. At first, I'm going to give you the brief introduction of Java Script. Then we're going to learn how can we implement JavaScript? With that, we're going to learn, how can we add estimate tags in Javascript? Then we're going to learn comments variable What is at and cons variable, data types, all type of operators, if statements, conditional ternary operator, switch case statement, alert box, confirm box, prompt box, et cetera. Next, we're going to learn functions, global and local variables, events, and all type of loops. Next, we're going to start JavaScript arrays, and one by one, I'm going to complete all the array methods. After that, I'm going to introduce you, what is JavaScript objects. Then one by one, I'm going to cover all the map methods, string methods, number methods, date methods, map methods. Next, we are going to start the most important part of Java Script, which is Dom document object model. We are going to learn targeting methods, Gate and set value methods, query selector, CSS styling methods, Addvn listener, parent and child nodes, all about siblings, everything related Dom. Next, we're going to learn another important part of JavaScript, which is bomb. Bomb stands for browser object model. On by one, I'm going to cover all the bomb properties. We are going to learn heighten with method of browser, open, close, location, scroll, et cetera. Next, we are going to jump into the advanced javascript section. Here, again, we are going to learn late cost variable. What is the difference between this type of variable? Also, we are going to learn template string, arrow function, rest operator, spray operator, object literals, destructuring array, destructuring object, et cetera. Then come the most important part of this video, which is object oriented programming. Here we're going to learn classes, module, promise, promis, az X. With that, also, I'm going to give you the brief introduction of API, Async at function, symbol, iterators, generators, street mode, error handling, et cetera. After that, I'm going to update a lot of projects regarding JavaScript. It is a complete package of JavaScript. What are you waiting for? Let's start the journey together. 2. JavaScript Implementation Tutorial : Hello, guys, good to see you back. Once again, I'm back with a new Tutorial related Java script. In this tutorial, we are going to learn how we can implementation Java script in our EstL five. If you want to implement JavaScript in your web page, then we have total two metho. In PAS JavaScript and external JavaSc. Let's talk about IPaS Java Script. In in page Java Script, you can put Java script directly in the estim page. As you can see, this is the boiler template code of est. And also, you can see inside the head tag, we use script tag. If you want to use JavaScript in a estimL page, in that case, you need to use script tag. Script tag used for client st scripting. If you want to use VV script, otherwise, Java Script, in that case, you need to use this tag. Otherwise, you can use it anywhere inside the body tag. Most of the developer use script tag before the ending of body tag, because if you type Javascript in your head tag and your Dava script file is very heavy, there it may take time to load the page, and it can slow out page speed. That's why most of the developer use JavaScript end of this body tag. This is the page process that you can use JavaScript. There is another method, which is external process. Suppose you create a JavaScript file using Dogs extension. And you can take any name for this file. In our case, Script Dot. And remember, without Dodges extension, you cannot create a JavaScript file. Then you need to put this file inside this head tag. Let me show you how you can implement external JavaScript file in your estimate page. As you can see, inside the head tag, you need to take Script tag, and then you need to use a particular attribute named SRC. And then you need to provide the path of the Script dot JS file. And then you need to close this script tag. There is automatically run the JavaScript file in your ETL page. So let's start the practical and see how we can implement it. As you can see on your screen side by side, I open my viste code editor and my browser using Live Server extension, and I already create estL document named index dot STL. At first, inside the head tag, and after the title tag, I'm going to take Script tag. So H I'm going to type script. Then inside this script tag, we can start our Java screen. If you want to type anything in Java screen, then you need to use particular command for that. I'm going to start this tutorial with a basic command, and our command is document dot right. Document dot right. Then inside the parentheses, inside the double codes, I'm going to type hello word. Remember, after this statement, you need to use secodon, to end this line. Now the question is, what is the meaning of this line? What is document? Document is a object, which represent your whole web page. If you want to access any element in estL page, then you always start with accessing the document object. Let's set the file and see what happened. If I set this file, as you can see it print hello world. This was the example of PCSS. And if you want to add some new content in this document, then you can duplicate this line. I just dublcate this line and how I'm going to pass another statement. I am add one. If I set this file, as you can see, sprint Hello world, I am d one. But it doesn't provide any space between these two scents. For that, you can provide space upr world. If I set this file, now you can see this space. Hello world, I am ad one. As I told you earlier, we can use script tag inside our body tag. Here, I'm going to type script tag again. Street, and here, once again, I'm going to type document dot write. Is at the parenthesis, I'm going to pass hey. If I set this file, you can see the result. Hello, I'm add one, hey. If you want to type anything between these two script tag, yes, you can. You can use este tag. I'm going to use H one tag, H one. Ist the H one tag, I'm going to type some day ted. As you can see, it provide two dummy. If I set this file, here you can see in my browser, first d print. Hello over, I am add one from our first script tag, and then you print or esmal content, H one tag content, Laura MPson, and Aa print, he from another script tag. This is the basic in page method. Here we can use Java Strip using Script tag in our STL file. And now I'm going to show you the external method. Here I'm going to create JavaScript file externally. And then I'm going to import this JavaScript file in this STL document. Let me show you. At first, I'm going to show you my current working directory. And in this directory, I'm going to create a new folder, and our folder name is JS. Inside this JS folder, I'm going to create a JavaScript file. For that, I'm going to create a new file. And our file name is Script dot JS. JS is our extension. Then I praise enter. As you can see, it creates a JavaScript file in our organ directory. You can take any name for your file. And here we don't need to use slip tech anymore. We can directly type our command. Let me show you. So here I'm going to type document dot right and here I'm going to use parentheses. Is this parenthesis, you can take double quotes, otherwise, single codes. Here I'm going to use double quotes. After double quotes, I'm going to end this line with semicolon. Between the double codes, I'm going to type the content, and here I'm going to type Hey. Hello again. Hello again. And I'm going to say this file. Now we need to include the external JS file in our index dot a stable file. So first, I'm going to remove this step tag. Again, I'm going to type step tag here. Straight. I said the skip tag, we need to use source attribute, S RC. Equal to, and now we need to provide the path of this Script dot JS file. As you can see, our file is inside this JS folder. Here we need to type JA, s or file, script dot J. So if I set this file, you can see the result. Hey, hello again. This lines came from external JavaScript file, Script dot JS, and we include this file in our stable page using source attribute. I hope now it's clear for you, how we can use Page Java Script and external Java s. Thanks for watching this video, state une for our next Tutorial. 3. Add Html Tags in JavaScript Tutorial: Hello, guys, good to see you back. Once again, I'm back with a new tutorial related Java script. In this tutorial, we're going to learn how can we add estel tag in JavaScript? Without wasting your time, let's start the practical. Here you can see side by side, I open my Visa Studio codeor and my browser using Lip Server extension, and I already create an estemL document index dot STL. In our previous tutorial, we'll learn how we can add JavaScript in our estL page. But in this tutorial, we are going to learn how we can add eTML tag in JavaSc Here you can see there is no space between hello word and IM at one. It's print both the document in one line, but I want to different line for this two object. For that, we can use break tag from STML. After hello word, I'm going to use this tag B R. If I set this file, you can see the result. First it print Hello World, then it print, I am Ad one. Remember, you can use this BA tag only inside the double codes. If I use multiple BA tag, let me show you B R and then set this file. As you can see, it's keep another line. Now I want to make our second sentence it. For that, I'm going to use. Let me show you. This is the starting tag, and after add one, I'm going to type our closing tag. If I set this file, you can see the result. It conduct our sentence, italic. I want to say you can use any estel tag inside the double codes. Now the question is, why do we use this estemL tag inside the JavaScript? Because JavaScript can create content dynamically. We can use this tag with particular JavaScript events. Suppose you want to make your content bolder using one ck. In that case, you need to use JavaScript. In our upcoming tutorial, we are going to learn how we can use this tag in a proper way. Thanks for watching this video, state tune for our next tutorial. 4. JavaScript Comments Tutorial : Hello, guys, good to see you back. Once again, I'm back with a new tutorial related Javascript. In this tutorial, we're going to learn JavaScript comments. Now the question is, what is the usage of comment? Java Strip comments can be used to explain Java Strip code and make it more readable. Also, it can be used to prevent execution when testing alternate codes. Using comment, you can define for what purpose you use this JavaScript code. In Java Script, we have total to type up comment. Single n comment and multiple line comment. At first, let me show you how can we use single n comment? Here you can see, we type a code inside the script tag, document dot tri hello world. After that, we use single en comment using double slash. To create single en comment at first, you need to type double slash, then you can type your text. You can type any text here. If you run this code, it's going to print only hello over, not the text after double slash. But if I use double slash before the document object, then it's comment out, hold the line. If you run this code, then it's not going to print anything. Now, let's talk about multiline comment. In our previous example, we use single en comment. If you use single comment, then it's only effective in one line. But if you use multiline comment, then it's effective in multi line. In Java Script, our multi line comments start with slash star and end with star slash. Let's start the practical and see how it's work. Here you can see side by side, I open my visa Sudo codator and my browser using Lib Server extension, and I already create IndexO estimL file. As you can see in our script tag, we have total two document object. At first, I want to comment out our first document object. Hello world. For that, I'm going to use Single N comment, Double slash. If I set this file, here you can see the result. As you can see in our document, now it started with IM Ad one. If I remove the comments and type some text, your comment. And then set this file, as you can see, now it's provide error. If I show you my browser console, here you can see the error, Syntex error, because we cannot type random text in JavaScript. For that, you need to use comments. If you want to comment out this text, you need to use double slash. If I set this file, you can see the result. Now this texts not going to effect to our code, and it also perfectly execute our document write object. Here you can describe for what purpose you type this code. If you want to use multiple line of comment, let me show you for that, you need to start to it, slash star. You need to end the multiline comment with star slash. Star slash. If I set this file, now you can see it executes our document objects. This is the way that you can use single n comment and multiline comment. I hope now it's clear for you. Thanks for watching this video, state in for our next Tor real. 5. JavaScript Variables Tutorial: Hello, guys, good to see you back. Once again, I'm back with a new teal related Java script. In this dial, we are going to learn Java state variables. At first, our question is, what are variables? Basically, variables are container for storing data. We stored data value in variables. Suppose you want to print hello word in your document three time. For that, you need to type hello word three times. Document dot write hello word, document dot write hello word and document dot write hellow word. But we can store this hellow word in a variable. In our case, X. We can store any type of data in our variables. If you want to use this value again and again, then you can use it. Just you need to call the variable. If you want to print this hellow word three time, in that case, you can call this variable. Document dot write inside the parentheses X or variable name. This is the usage of variable. Let's talk about how we can declare variables in Java script. Basically, there are four s to declare a Java script variable. You can declare i using Q word, using let Qd, and using const Qd. Also, you can declare very well using nothing. And we're going to learn all this method in our accoming tutorials. In this tutorial, we are going to learn how we can declare variable using key word. There are some rules for creating variables in Java Script, and we need to follow the rules strictly. Our first rule is, our Vs name can contain letters, dest, underscores, and dollar sign. Our second rule is, V name must be begin with a letter. Our third rule is, Name can also begin with dollar sign, otherwise, underscore sign. Our fourth rule is, names are es sensitive. Small Y and capital Y are different variables. And our last rule and the most important rule is reserve word. Javascript came with some reserve word like Java Script R. You cannot use some particular name as variable name. We are going to learn about it all in our practical session. Now let's talk about how to use variables. At first, we need to use keyword to declare it's a variable, and our variable name is X, then we need to use equal sign and after equal sign, according to the data type, you need to pass the value. If you pass string data type, then you need to type inside the double codes. If you want to put numeric data type, in that case, you don't need to use double codes. We are going to learn about it in practical session. X is our variable name, and hello world is our vue. Without wasting your time, list the practical and see how it's work. Here you can see side by side, I open my visual studio codator and my browser using Lp Server extension, and I already created estiL file name Index dot eTML. At first, I'm going to take script tag inside the head tag script. Inside the script tag, I want to print a variable value. For that, we need to create a variable. At first, I'm going to use V keyword. And our variable name is z equal to, I want to use string value. That's why I use double codes and our value is hello word. Then we need to use semicolon to end this line. Now I want to print this value in our document. For that, we need to use documented write function. Here, I'm going to type document dot right. Then inside the parentheses, we need to pass the variable, and our variable is D and semicolon to end this line. Remember, If we call the variable name in our right function, then we don't need to use double quotes. Just we need to pass the variable name. If I set this file, as you can see it print hello world. If I use quotation, let me show you double quotes, otherwise, single quotes and type ZD and then set this file. Here you can see, it's print only Z, not our value, hello world. If you want to print variable value, we need to take without codes. You can take multiple variable as much you want. Let me take another variable. I'm going to duplicate this line, and our variable name is A. Here I'm going to type, I am at one. Also I'm going to duplicate this document function. Here I'm going to pass A. If I set this file, you can see, sprint, hello world, I'm add one. Not only that, you can take numeric value also. Suppose here I'm going to pass 100. I remove this one and type 100. If I set this file, as you can see, hello world 100. You can take numeric value, you can take float value, string value. We are going to learn about data type in our occurring torials. Now let me show you one thing. For that, I'm going to comment out this line. Now I want to override the A variable. In the next line, I'm going to type A equal to 25. If I set this file, as you can see, now print only 25. Our new value override our previous value and print our new value 25. We can override our variable as much we want. Let me show you once again. Here I'm going to pass 12. If I set this file, now you can see our new value is 12. If you notice, you can see, we do not use K word before the variable name because you already declared our variable name using keyword. We just override this variable, nothing else. L et's take a look at the correct rules for writing variables. Our first rule is name can contain letter des, underscore, and dollar sign. Here we can create variables name with letter deists and underscore sign. Let me show you. I'm going to create a variable where and our variable name is add one. I said this very well, I'm going to store full name, add one means. With name, we can use disa also. After advance, we can use disease. Suppose I use 99, ad 199. This is also a variable. But we cannot use disease before the name. We cannot start our variable name with disease. This is not a variable. As you can see, it's already provide alert. But if you want to begin your variable name with dollar sign, then you can. If I use dollar sign here, as you can see, now it's a proper variable. Also, we can start our variable name with underscore. But do not use minus sine here. If you use minus sign, in that case, it's not going to work. These are the basic rule that you should follow. Let me revise this section once again. You can start your variable name with letters. Not only that, you can start your variable name with undersco sign. Also, you can start your variable name with dollar sign. But you cannot provide space in variable name. Let me show you. If I duplicate this line and here, I'm going to type a variable a student name. Student space name. You cannot take variable name like this. In that case, you need to use asco sin. You cannot provide space in variable name. Also you can use numbers in your variable name. But you cannot start your variable name with numbers. If I start the variable name with numbers, in that case, it's going to throw. Not only that you can use CamelCase word also. Let me show you. I'm going to capitalize the A, and also I'm going to capitalize. You can take variable name like this. Also, JavaScript provides some reserve word that you cannot use as a variable am, otherwise function name. Let me show you the words. These are all reserved word in JavaScript, Abstract, break, cha, Dvager, double, export, finally, float for function. You cannot use this word as a variable a, otherwise function name. You need to try to remember it. Please do not use this name as a variable. This is it for this tutorial. In the next tutorial, we are going to discuss let and constant variable. Thanks for watching this video, state even for our next tutorial. Oh. 6. JavaScript Variables ( Let & Const ) Tutorial: Hello, guy is good to see you back. Once again, I'm back with a new tutorial related Java script. In this tutorial, we're going to learn late and conced variable. In our previous tutorial, we cover variable. But in this tutorial, we are going to cover late and conced variable. Before we start the practical, we need to learn what is the difference between all of these three variable? Advanced Java script usually have three type of variable, late and const. Latter cons introduce in ES six version. Laten cons introduce in ES six version. Today, we will learn what is the difference between all of this. Let's see an example. The main difference is the declaration method. Also, their value assigning processes difference. If I try to create a variable with, first, we need to type Q world, then variable name assign with value. Similarly for late, we need to type late, and for const, we need to type const. But the difference is, we can redeclare our variable. In our case, where x equal to world. Also we can reassign our value. In my case, x equal to. If I try to print this value, It's written. Using there, we can reassign and redeclare our variable. But in the case of late, we cannot redeclare our variable. But if we try to do it with forcefully, in that case, it's written error. But the good thing is, we can reassign our value, x equal to O. Now our new value is O. Let's talk about const variable. Cons to mean constant value. We can't make any change here. We cannot redeclare our variable. Also, we can't reassign our variable. This was the main difference between all of the variable. Wout wasting your time, let's start the practical. As you can see, side by side, I open my VSO studio coordinator and my browser using Light server extension, and I open our previous file index dot STML. In your previous tutorial, we talk about how we can declare Variable using where. Also, we talk about how we can reassign our variable using where. Let's set a new value to this variable. Here I'm going to remove at one mech, and I'm going to say, IM where. If I set this file, as you can see, it's print IM now I'm going to reassign this value using Q. I want to duplicate this line, and here I'm going to pass IM we reassign. If I set this file, this time, as you can see, it print, I am where with reassign. Next, I'm going to override this value. Some to type A equal to inside the double course, I am width overwrite. Some on to end this line. If I set this file, as you can see, now it's print, I am wherewith overwrite. If we declare our variable with the, in that case, we can reassign our variable. Also, we can overwrite our variable. Now, let's create variable with cost. Some to select both of the line, and I'm going to comment out our previous code. Also, I'm going to comment out this two line. Now I'm going to replace with late. Now we declare our variable with let keyword. If I set this file, as you can see it print, I am. That stands for variable. Let's try to reassign this variable with let keyword. I'm going to remove this one and here I'm going to type late. If I set this file, as you can see, it's written nothing. If I show you my console, as you can see in my console, it's stain error, syntax error. A has already been declared because we cannot redeclare or reassign our variable using let keyword. But we can overwrite our variable if we use let keyword. Let me show you. If I remove this comment and set this file, now you can see it print, I am wherewith overwrite. Now let's try to understand constant variable type. I'm going to select this portion and duplicate once again. I'm going to comment out all this line. Here, I'm going to declare our variable with cons Qard. I'm going to replace late with const. Also, I'm going to comment this line. If I set this file, as you can see, it's print, I am word. Let's reassign the variable with cons Qard. Here, I'm going to type const. If I set this file, as you can see, it's st error. Constant mean constant variable. We cannot reassign our variable, when we use cons Q word. Similarly, if we try to override it, let me show you and they set this file. As you can see, it's also provide error. Also we cannot overide the variable, when we use cons Q word. That's the basic difference between all of these three variable at const. I hope now you understand it. Thanks for watching this video, state tune for our next tutorial. 7. JavaScript Data Types Tutorial: Hello, guys, good to see you back. Once again, I'm back with a new tutorial related Java scrip. In this tutorial, we're going to learn Java scrip data types. Let's try to understand what is data type. In programming, datatype is an important concept. Be able to operate on variables. It is important to know something about the type. In our previous tutorials, you learn how we create a variable and how we store value in our variable. After that, we can use the variable when we need to use the value, and we already learn about it, how we can declare variable using late and constant Q word. But in this tutorial, we are going to focus in values. Basically, type of value is data type. Let's see what kind of data type we have in Jaha script. Our first data type is string data type. If we pass value inside the double cores, otherwise single cores, then it will be string data type. And if we pass numeric value without double quotes, otherwise single tes, then it would be number datatype. Similarly, if we type true otherwise falls, without tes, then it would be Blean datatype. Our fourth datatype is array datatype. As you can see, inside the square ss, we have multiple values, we separate this value using coma. We call it data type, otherwise, lease data type. We are going to learn about it in our accoming tutorials. Our next data type is object data types. Here you can see inside the calices, we create another variable. Also, we provide a value to this variable. It's play the role of key value pair. When we use this value with cvrass, we called it object data type. Our next data type is null data type. If we pass X value null, in that case, it would be null data type. But if we do not pass any value in our x variable, in that case, it would be undefined data type. Now the question is, what is the usage of these datatypes? We are going to learn about all in our upcoming tutorials. I'm going to create multiple video related, string, number, ol array object, et cetera. For now, without wasting your time, let's start the practical. As you can see, side by side, I open my visor to your cortor and my browser using Live Server extension, and I already create a estel document named Index dot estamL. At first, I'm going to take a variable name, and our variable name is X, Sm type X equal to, at first, I want to pass a string v. Hm type, hello world. Then semicon to end this line. If I want to print it, just need to type document write write inside the rounds is our variable name, X. Then semicon to end this line. If I set this file, as you can see, it's print hello world. Now I'm going to duplicate this line two time. Here I'm going to pass a BA tag. Next, I'm going to call a Java Script inel function, and our function name is type of. Here I'm going to type of. Type of our variable x. This function going to return the data type of x variable. If I set this file, as you can see, after hello, it's break our line, and then it print our variable data type, which is stream. Similarly, if I pass only a single caracter, and then set this file, it's provide also stream. But what? If we pass numeric value inside the double cots, let's pass a numeric value. 23. If I set this file, as you can see, it's also print stream. B if we pass anything inside the double codes, otherwise, single codes, it's always written string. As I told you, we can use single codes also. Let me show you. If I remove the double course and use single course and then set this file, as you can see, it's also written string. But if I override the x value and pass 23 again, and then set this file, as you can see, now it's turn number, because now we pass numeric value without quotes. That's why it's tan number. Remember, we cannot use string value without quotation. Otherwise, it's going to return error. If we assign 23.50 and then set this file, also you can see it's ta number. If we assign negative value and set this file, as you can see, also it return number. But if we over at the value with true, let me show you and then set this file, as you can see, now it's written Bleion. Now our datatype is Blean datatype. First, it print our value true and then it print our datatype bleion. Similarly, if I pass false ir, and then set this file, as you can see, it's also written bleion, because true and false is our bleion value. But if I pass value inside the double codes, let me show you and then set this file, as you can see, now it's a stream. It's not a Boolean value anymore. For lean value, we cannot use double codes, otherwise, single codes. You need to remember it. You need to use it without quotation. Let's jump into our next datatype. I'm going to duplicate this line and here, I'm going to pass undefined. If I set this value, as you can see, it's written undefined also datatype is undefined. Undefined is also a value. Let me show you another example of undefined. Suppose I take a new value and our variable is A. Then semicon to n this line. I do not assign any value to this variable. If I want to see the type of this variable, if I pass A and then set this file, as you can see, is S undefined. Because we do not assign any value, that's why it's Seton undefined. I'm going to comment out this line and here I'm going to pass again. I'm going to set this one. Once again, I'm going to duplicate this line, and I'm going to take value inside the square ses. Our first value is HTML. Our second value is PHP. Third, I want to pass a numeric value. I'm going to pass 45. I use without tes. You can pass unlimited value as much you want. But for this example, I pass total three value. If I set this file, as you can see, it's ct object. But the most important is why ton object B it's an array. In other languages, if we use type of function, in that case, it's written array. But in Java script, it written same data type for object and array. That's why it's written object. Let's create an object. For that, I'm going to dig this line, and I'm going to remove square ases. Here I'm going to use Cal ases. Isad the C ***, we need to use key value pair. Our key is our name. For name, I'm going to use a string value, and the name is add one meg. Our second value is H H 32. We override our array value with object value. If I set this file, as you can see, it's print object object, and also it written type of object. To extract object value, we need to use special method, and we are going to learn about it in our coming tutorials. For array and object, Java script was written object, and you need to remember it. It's only happens in Java Script, not other languages. I hope now it's clear for you, what are the data types in Java Script. Thanks for watching this video, state une for our next Tutorial. 8. JavaScript Arithmetic Operators Tutorial: Hello, guys is good to see you back. Once again, I'm back with a new tutorial related Java script. In this tutorial, we are going to learn Java script arithmetic operators. Let's see how many arithmetic operator we have in JavaScript. As you can see, we have total eight different arithmetic operators. But at first, we need to know what is arithmetic operator. Arithmetic operator perform arithmetic on numbers. Here you can see our first arithmetic operatories addition, and our second athmetic operator is substriction. And our third one is multiplication. Also, you can see the sign in your lab site. Our fourth one is exponential operator. For that, we need to use double star sign. Our fifth one is division operator. Then come modulus operator. Then come increment operator and decrement operator. One thing you have to remember, arithmetic operator works when the data type is number, because this operator use for mathematical calculation. Without wasting your time, let's start the practical and see how it's work, and we're going to learn all the operators one by one in our practical session. As you can see, side by side, I open my visuo to codator and my browser using b server extension, and I already created estemL document named Index dot estel. Let's start the practical. For example, I'm going to create Coral three variable. Our first variable m is X, S type x equal to two, then scale to end this line, and I'm going to duplicate this line. Our second variable is y and y equal 24. Our third variable is z. Here, I'm going to use all the atnetic operators. I'm going to use our first Atmetic operator, X plus Y. This is our first Atmetic operator for addition. As you know, for addition, we need to use plus ine, and now I'm going to print this value on my web page. For that, I'm going to type document dot right inside the parentheses, our variable Z. If I set this file, as you can see, It's written six. The addition of this two value x and y is six. Not only that, we can add floating value also. Let me show you. If I pass 2.57 and then set this file, as you can see now, the new result is 6.57. Now, let's jump into our next arithmetic operator. For that, first, I'm going to change the x value. Here, I'm going to pass nine. Now I'm going to use the operator sign. X minus nine. If I set this file, as you can see, it's written five, nine minus four equal to five. But if I -11 from nine and then set this file, as you can see, it's written minus two. Now it's written minus value. It's exactly work like our childhood mathematics. Now let's talk about our third operator, which is multiplication. For that, just I'm going to use multiplication sign, which is star. If I set this file, as you can see, it's written 99. If I multiply nine with 11, it's 1099. Next, I'm going to show you division and modular operator. For that, I'm going to change the y value, which is three. First, I'm going to use division operator. X divided by y. If I set this file, as you can see, it's ston three. But if I divide ten with three, if I set this file, as you can see, now is steton floating value. This is the usage of division sign. Now let's talk about modular sign. What is the usage of modular? Here, I'm going to use modular sign. For modular sign, we need to use percent de sign. If I set this file, as you can see, it's 101. Now the question is why it's 101? Because if I divided ten with three, then as you know, one is the reminder. Modular sign always return the reminder. Let me show you once again. If I divided 11, with three, as you can see, now the reminder is two. But if I divide 12 with three and then set this file, as you can see, it's set zero. As you know, three multiply by four equal to 12. If I divide 12 with three, there is no reminder remaining. That's why it's st zero. Now let's talk about our next operator, which is exponential operator. It was introduced in 2016. It's very new. Exponential operator work like power, and the sin is double star. If I pass x value, two and y value, also two, and then set this file, as you can see, it's on four. Now it's on the square value, because x value is two, also the y value is two. But if I pass y value three here, and then set this file, as you can see, now it's on eight, it's mean two to the power three. As you know, if I multiply two, three times on eight. Similarly, if I pass ten to the power, two, Ten set this file, as you can see, now it's 100. I I pass three here and set this file, as you can see, it's 10,000, it's mean ten in ten in to ten, equal to 2000. This is the usage of exponential operator. Now, let's talk about our s two operator, increment operator or decrement operator. For this example, first, I'm going to comment out this line, and now I'm going to override our X variable with increment operator plus plus. For increment operator, we need to use plus plus sine. Now, if I add this to variable, x plus y, and they set this file, as you can see, it's written 14, not the 13, but the question is, y is written 14. We know that ten plus three equal to 13. What is the logic behind it? As you can see, we overwrite our x value with increment sine. It's mean, let me show you. Now the new value is x equal to x plus one. By default, this operator add one with our old value. That's why now our x value is 11, not ten, so it's written 14. But if I copy the same line and use it before the increment, let me show you and use a break tag hair. And then set this file. As you can see, first 1013 and then it's written 14, because this one written before the increment value and this one written up to the increment value. Similarly, we have decrement value. Let me show you. If I duplicate this line and comment out previous one, and if I use decrement sign here, minus minus and then set this file, as you can see, first t 13 and then it return 12. If I use decrement sign, it means x equal to x minus one. It substract one value from our previous value. Not only that, you can use multiple arithmetic operator at once. Let me show you. Some to comment out this lines. I don't need this one. And here, I'm going to tie x plus y multiply with two If I set this file, it's tn 16, but the question is, y turn 16. You may think it should return 26 x plus y equal to 13. Then if I multiply 13 with two, it's tn 26. But it's not work like this. First, it's going to multiply two with y value, I three multiply two, which written six, then it add ten with six. That's why it's n 16. But if you want to return the 26 value in that case, you need to create the combination. Let me show you. I'm going to create the combination between x value and y value, x plus y. For that, we need to move into inside the round brass, and now it's going to multiply our addition value two. If I set this file, as you can see, now it's ren 26. If you want to execute complex mathematics, in that case, you need to create combination. I hope now it's clear for you, what is arithmetic operator in Java Script and how we can use it. Thanks for watching this video, state une for our next tutorial. 9. JavaScript Assignment Operators Tutorial: Hello guys, nice to see you back. Once again, I'm back with a new tutorial related Java script. In this tutorial, we're going to learn Javascript assignment operator. Let's see how many assignment operator we have in Java Script. These are most basic assignment operator in Java Script. There are other assignment operators beside these, but they are not important. In this tutorial, I'm going to cover this seven assignment operator. In our previous tutorial, we learn arithmetic operators, addition, substriction, multiplication, division, module, and exponential, and if we use it with equal sign, then we call it assignment operator. Our first operator is equal to operator, means assignment operator. Example, if we want to assign Y value in x, in that case, we can use this operator. It's mean x assen with y. Then come addition operator. Example, x plus equal to y. If we use this operator, it's going to assign a new value to our x variable. It's going to add y value with our x variable and override our x variable. Similarly for substriction, it's going to minus y value from our x value and overwrite our x value. Similarly for multiplication, it's going to override our x value. Suppose our x value is three and our y value is ten. Then it's going to multiply ten with x, mean, three which ten, and it override our x value three to 30. Similarly, it's work for division, module and exponential. Moving forward and let's start the practical. Here you can see, side by side, I open my iso Sudo code ator and my browser using Live Server extension, and I already open our old estil document name Index dot estim. As you can see, our X variable value is ten, and our Y variable value is four. If we add this two value, it's n 14. Here you can see, we use our first operator assignment operator. We use it for assignment purpose. Using this operator, we can assign a value to our variable. Similarly, we assign four value with Y variable, and in our ZD variable, we add this two value. For now, I don't need this Z variable, so I'm going to comment out this line. As you can see, our x value is ten, and now I'm going to overwrite our x value, x equal to x plus y. If I print x, and then set this file, as you can see, it's also written 14. Our new x value is 14, not ten. But now I'm going to use assignment operator for this calculation. I'm going to comment out this line, and in the next line, I'm going to type x, and I'm going to use addition equal to operator, addition equal to y. If I set this file, as you can see, it's also written 14. If I change the y value four to five, and then set this file, as you can see, it's written 15. As you can see for the same calculation, we use three different line. Here we just override our x variable with plus equal to assignment operator. This example is same as this line. If we use this assignment operator, basically, it reduces one character from this line. Again, I'm going to change the y value, four, and now I'm going to use minus equal to operator. Means substraction equal to operator. If I set this file, you can see the result. If we minus four from ten, it's st six, our new x value is six. Our next operator is multiplication equal to operator. Star equal to. If I set this file, as you can see, it's N 40. Now it's multiply ten with four. That's why it's on 40, and our new x value is 40. Similarly, we have division equal to operator. If I use this operator, as you can see, now our x value is 2.5, and our next operator is modulus equal to operator. If we use this operator and set this file, as you can see, our new x value is two. This operator always written reminder. That's why it's 102. Let's jump into the last operator, which is exponential operator. Or exponential operator, we need to use double star sign, star star equal two. If I set this file, as you can see, it's written 10,000. It's mean ten to the power four. It's going to multiply 410 at once. That's why it's written 10,000. It's multiply 104 time. I hope now it's clear for you, what is assignment operators. Basically, we can call it short end up arithmetic operator. Thanks for watching this video, state une for our next tutorial. 10. JavaScript with Google Chrome Console Tutorial part 1 : Hello, guys, good to see you back. I'm back with another Tutorial related Java script. And in this tutorial, we are going to learn Google Chrome Consume. Moving forward and let's start the practical. Why should we need to use Come console? Here you can see side by side, I open my viso todo code editor and my browser using Light server extension, and I already create a SML document named Index doot Atmel. And now I'm going to show you how console work and what is console. Just right click on your browser, and here you can see an option name Inspect. Just click on this option, and here you can see developer option, and you can see the console option in the second tab. And also, we can move this option right or lift. If there is an error in our Java scrip code, we can see the error in our console section. If you want to be a Java Script developer, Then console would be the most important tool for you. You can identify all the error from this section. Also, you can use console for testing purpose. Suppose you do not want to print any value in our document. But you can print any variable, otherwise, you can return any function value in our console section. Let me show you another option, how you can open console in your browser. For that, you need to select this option, then click on mote tools. And here you can see deload tools. Also, you can use shortcut key for that. Control shaped. Then click on Delo tools, as you can see, it's open console section. So let's see how we can use it practically. So at first, I'm going to create a variable, and our variable is X. The X equal to, I'm going to assign 34. There's a beg to end this line. We already know if we want to print this variable in our browser, in that case, we need to type document dot right function. Some type document dot right. Then inside the parentheses, we need to pass the variable n. X. Then Smc two in this line. If I step this file, as you can see, sprint our value in our document section. But now I want to print this variable in our console section, not the document section. For that, we need to type console dot log. Console dot log. Then inside the parentheses, we need to pass the variable. There's a to in this line. If I set this file, as you can see in our console section, it print our vile 34. Also, we can execute mathematical calculations. Let me show you. Suppose I want to add ten with our x variable. If I set this file, as you can see, it's st 44, and as you can see in your right side, also it's written, the line number, index dot est. And here you can see we type console dot log at line number 12. Not only that, also we can print here. Let me show you. For that, I'm going to take square bases. And here I'm going to pass some v one, four, five. If I set this file, as you can see, it's ten our array. And if I open this section, here you see a key, and our key name is proto array. It's mean is ary. Also hit print the length, length three, because we have protal, three value in our array, and our values are one, four and five. And as you know, our array start from zero index. That's why it is print zero, one, two. We are going to learn about array in our accoing tutorials. And now I'm going to show you another function. Without using log, I'm going to use table. Here I'm going to remove log. And I'm going to type table. If I set this file, as you can see, it's create a table. It's created a table in our console section. It print our error value as a table format. Let's talk about our next console function, which is error. I'm going to type error. Also, I'm going to remove the vs. Most of the time, we use error with condition, P conditions. Using this function, developer can identify the error. But here, I'm going to print just an error message. Inside the double codes, I'm going to type, something went wrong. If I set this file, as you can see, sprint our message in red color. Something went wrong. Similarly, we have another function for warning. Some to duplicate this line, and here I'm going to type console dot warning. Also, I'm going to change the messages. This is just warning. If I set this file, as you can see, first, it print our error message, something went wrong, and then it print, this is just warning with warning sign. So in that way, we can print our error message and a warning message. Our next function is console dote clear function. As you can see, in our console, we have two message, error message and a warning message. Next, I'm going to run console dot clear function. So type console dot clear. If I set this file, as you can see, it cleared our console. Now there are no error message and warning message. And also it flash another message, console was clear. So this is it for this tutorial. In the next tutorial, we're going to learn time function. Thanks for watching this video, stay tuned for our next tutorial. 11. JavaScript with Google Chrome Console Tutorial part 2: Hello, guys. Good to see you back. Once again, we are in my viso Sudo co editor. This is the second tutorial related Google Chrome console. As you can see side by side, I open my Vs Sudo Cditor and my browser using life server extension. Also I open previous estel document in my cod editor. In this tutorial, I'm going to start with another console command, which is time. Using time command, we can calculate how much time our code take to execute. At first, I'm going to comment out console dot clear function. Then After x variable, I'm going to tie console dot time. Then inside the parentheses, just I'm going to pass a test, which is taste, and then semicolon to end this line. Again, after running messes, I'm going to type console dot time end function. End. Inside the parentheses, I'm going to ty taste. Then semicolon two in this line. Basically, it's going to calculate the time from starting to end. I want to say, it's going to calculate how much time does the functions take to complete. Using time command, we can start counting and using time end command, we can stop counting. If I set this file, as you can see, it's in the time. As you can see, it's take 0.59 millisecond to complete these commands. Now I'm going to show you how can we use IVil Editor from our console? At first, we need to clear our console section. As you can see, there is a second icon. If I click this icon, it's clear our console section. Here we can type any Java script command. Here I'm going to type document dot right. Is the parentheses, I'm going to pass. Hello World. Then semicolon to end this line. If I press E, as you can see in my browser, it's paint hello world. As you can see, using console editor, we can pass data in our browser. I want to say you can check any Javascript command in your console section. Let me show you. If I type document, and then I press enter, as you can see, if I drop down this section, do on our external document structure. Now, let me show you the most important usage of our console section. For this example, I'm going to comment out all of this line, and then I'm going to set this file. Now inside the body tag, I'm going to create H one tag, H one. Also, I'm going to set ID to this tag, ID, Min. Then inside the H one tag, I'm going to type hello world. If I set this file, you can see the result. Now I want to check H one tag value using Java script in our console. For that, we need to type document dot get element by ID. Let me show you. Document dot get element by ID. Then inside the parentheses, we need to pass the ID name, and our ID name is Min. Here I'm going to type Min. Then sub column two in this line. If I press enter, as you can see, it's written the H one tag with the value. This example is part of Dom, means document object model, and we are going to learn about it in our upcoming tutorials. Here I want to show you what is the usage of console. Let me show you one thing. As you can see, this command written whole este structure, but I want to return only hello world. I want to return only the text. In that case, we can type a new command. Let me show you. Document dot get element by ID, Then instead the parentheses, our ID name, and our ID name is main. Then I want to return only inner text. So here we need to type dot, inner text. Then sm to end this line. If I press entire, as you can see, now it's written on the hello world. We are going to learn all about it in our dom part. These are all dom basic commands. Not only that, we can type any Javascript command in our console section. This is it for this tutorial. Thanks for watching this video, state tune for our next Tutorial. 12. JavaScript Comparison Operators Tutorial: Welcome back guys, once again, I'm back with a new tutorial related avascript. In this total, we are going to learn Java Script, comparison operator. Let's try to understand what is comparison operator. In this example, you can see we have total two variable, A and V. Variable A value is 20 and variable V value is 30. If we try to make comparison between these two variable, suppose variable A value is greater than variable V value. It's mean I 20 is greater than 30, is going to return two. Otherwise, it's going to return false. Be 30 is greater than 20, that's why it's written false. How do we use the comparison operator name greater than? Similarly, we have multiple comparison operators, and these operators always return to either false value. Let's see how many comparison operator we have in Java scrit. Our first operator is equal to. For this operator, we need to type double equal sign. If apside value and right side value is equal, in that case, is going to return true. Our second operator name is identical operator. For this operator, ed to type three equals sign. If p side value and right side value is same, and their datatype is same, in that case, is going to return true. Then come not equal to operator. For this, we need to type, explanation sign and equal sign. If left value and right value are not same, in that case, is going to return true. Similarly, we have another operator. If the left value and the right value is not equal, with that, that datatype is not equal, in that case, is going to return true. And then come greater than operator. If the left value is greater than right value, in that case, is going to return two. Our next operator is less than operator. If the right value less than led value, in that case, is going to return true. Our next operator is greater than equal to operator. If our lap side value and right side value is equal, in that case, it's going to return true. Otherwise, if our lapside value is greater than our right side value, also it's going to return true. But if our lap side value is less than right side value, in that case, it's going to return false. In the opposite way, we have less than equal to operator. If pside value less than equal to right side value, in that case, it's going to return true. If both the value is equal, then it's going to return two. Otherwise, if right st value is greater than p side value, also is going to return t. Without wasting your time, let's start the practical and see how it's w. As you can see, side by side, I open my Visa Sudio code editor and my browser using life Server extension, and I already create a estimL document name index dot STL. Here we are going to test our comparison operator. At first, I'm going to take two variable, and our first variable vm is X, X, Assn width ten. Then I'm going to duplicate this line and our next variable m is y, y value is 20. Then I'm going to comparison this two variable in my console section. For that, we need to type console dot log, console dot log, inside the parentheses, I'm going to tie x double equal to y. This is our first comparison operator, and Smig to n this line. If I set this file, as you can see, it's written fails. Because ten N 20 is not the same. If I change the value, y, also ten, then set this file, as you can see, now it's t. Also, if I move y value inside the double codes, let me show you They set this file, as you can see, also it's N true. Here you can see their datatype is different. First one is number, and second one is stream, but their value is same. That's why it's ten true. But if I use our next operator, which is identical operator, and they set this file, as you can see, now it's tn falls, because their value is same, but the data tyve is not same. That's why it's ten falls. If I remove the double codes, and they set this file, now you can see it's stan true. Now, let's jump into the next comparison operator. But before I'm going to duplicate this line and comment out previous one. Here, I'm going to tie six, not equal to seven. If I set this file, as you can see, it's ten true, because their value is different. That's why not equal to operator written true. But if I pass six equal to six and then set this file, as you can see, now it's tn false. If both the value is same, in that case, not equal to operator written false. Let's move one of the operator inside the codes. Six. If I set this file, as you can see, also it return fails, because their value is same, but their data type is different. But if I use our next operator and type another equal sign. In that case, if I set this file, it's written t because their datatype is different. That's why this operator written. Let's jump into our next composition operator. But before, I'm going to duplicate this line, and I'm going to comment out threes one. On here, I'm going to type five greater than six. If I set this file, as you can see, it's ten false. We know five is not greater than six. That's why it's ton false. But if I type nine here and then set this file, as you can see it's ton true. But if I pass nine in our right side and then set this file, as you can see, it's tn false because nine is not greater than nine. But if I use our next operator greater than equal two, and then set this file. Now you can see it's written true. It's mean if psd value is equal to right side value, in that case, it is going to return true. Otherwise, if apside value is greater than right side value, also it's going to return true. Let me show you. If I pass 30, then set this file, as you can see, also it's written true. In the opposite to a, we have less than operator. So to duplicate this line and comment out previous one. Here, I'm going to tie nine less than 11. If I set this file, as you can see, it's written true. Similarly, if I use less than equal to sign and then set this file, as you can see, it's also written true. If I pass nine here and then set this file, as you can see, the condition is also true. I hope now it's clear for you, what is comparison operator and how we can use it. Thanks for watching this video, state tune for our next tutorial. 13. JavaScript If Statement Tutorial : Hello, guys, good to see you back. Once again, I'm back with a neo Tutorial related Java script, and in this tutorial, we are going to learn EP statement. So let's try to understand what is EP statement. Ep statement is a part of Java Script conditional statements, which are used to perform different action based on different conditions. We use E to specify a block of pote to be executed. If a specific condition is true and every condition is written, true value either falls well. And if the condition is true, and then it's going to execute our statement. And if false, then the statement not going to execute. Let me simplify it with a normal example. Suppose e today is Friday. It's mean the condition is true either falls. And if the condition is true, then print Friday, and if false, then out of it. Now, let me show you this syntax, how we can use a condition in Java Split. After deep statement, you need to use round braces. Inside the round brass, you need to put your condition, and then you need to provide start and end car bras. Then inside the car brass, we need to pass our core. You can pass multiple statements, function, how much you want. But if the condition is true, there is going to execute all these statements. Let me show you another example. Suppose we have a variable A, and its value is 20. And then we are going to test with P condition. If A value is greater than 15, then print A is greater. And as you can see A is greater than 15 because A u is 20. That's why it's going to print this document in our browser. But if we change the A value, A assign with five, and then we check the condition, and as you can see A is not greater than 15, that's why it's going to return false. So it's not going to print this line in our browser. This condition is not true. So now it's car for you, how we can create condition with P statement. And also, you need to remember, we need to use a comparison operator to create the codition. In our case, greater Dan, and we already learn about comparison operator in our previous tutorials. So without wasting your time, let's start the practical and see how it s. As you can see, side by side, I open my Vise studio codator and my browser using Light server extension, and I already created estil document named index dot atnL. So at first, I'm going to take two variables. Our first variable is V A and A an W 30, and our second variable is B, B an W 40. And now I'm going to use our IP condition. If inset the parentheses, A greater than B inset the calibraces, I'm going to type console dot log, and set the round races, A is greater. Then semicon two in this line. So we create a condition with greater than operator. It is a comparison operator. So I I set this file, as you can see, sprint nothing in our console section because A is not greater than B. That's why the condition written falls. But if I reverse the condition with less than sine, let me show you and then set this file, as you can see, never sprint A is greater. In that case, we need to type here B is greater, not A. Now the condition written true value. That's why you sprint this line because b value is 40, and A value is 30, and as you can see, we use less than sine A, less than B. Let's drive with another comparison operator. This time, I'm going to use equal to sine, A equal to b. It's means if A value and B is sin, then print this line. If I set this file, as you can see, it's not print this line. But if I change the value, 30, now BL is also 30 and then set this file, as you can see, now it's print this line. Because now the condition is true. Now, let's change the print statement. So H I'm going to type hello over. And now I'm going to change B Value data type, so I'm going to make it stream. 13. If I set this file, as you can see is also print our statement, hello word. As you can see, their data type is different, but it's also written true because in our previous tutorial, we'll learn about it. If we use equal to operator to compare value, it's going to. If we use equal to operator, it's going to check their value, not their data type. That's why it's written true. But if we use identical operator, So here I'm going to add another equal sign. And this set this file, as you can see, now it's ritten false. That's why it's don't print the value. We already know if we use identical competison operator, then with the value, we also need to match the data type. Otherwise, it's not going to retain true. So this is the way you can make condition inside the EP statement. IP condition is very important in Java SiP or any other programming language. Basically without condition, we cannot imagine coding. So this is it for this tutorial. We're going to learn about it more in our upcoming tutorials. Thanks for watching this video, St you. 14. JavaScript Logical Operators Tutorial : Good to see you back guys once again, I'm back with a new tal related Javascript. In this Tutteral, we're going to learn Java script logical operators. But before, let's try to understand what is logical operator, and how many logical operator we have in JavaScript. In our previous tutorial, we'll learn about EP condition and how we can set condition in our Ep statement. And if the condition is true, then you're going to execute our statement. As you can see, we have only one condition in our ep statement. But using logical operator, we can set two conditions, otherwise, multiple condition in our ep statement. And according to logical operator, if both the condition written true, in that case, is going to run our statement. And if one of the condition is false, otherwise, both the condition is false, they need not going to execute our statement. So let's see how many logical operators we have. We have total three logical operator, logical, logical r, and logical t. For logical nd, you need to type two time and person sign. And for logical r, you need to use this sign, and you can find the sign below then Baspas key, and for logical gt, we need to use exclvation sign. But before start the practical, we need to understand how can we use it? Our first operator is logical end operator. We use it inside the condition. We use it inside the statement. If both the condition is true, in that case, it's going to print our statement. But if one of the condition is false, it's going to return false and it don't execute our statement. Our next operator is logical operator. If one of the condition is true, then it's going to execute our statement. And if both the condition is true, also it's going to print our statement, but if both the conditions are fail, then it's not going to execute our statement. Our last operator is logical not operator. Suppose you say multiple conditions, otherwise, one condition in your statement, and to use logical not operator, you need to type exclusion sign before the round brass. This logical operator always return opposite value. If the condition is true, then it's going to return false. And if condition is false, then it's going to return true. So without wasting your time, let's start the practical and see how it's w. And you can see on your screen, side by side, I open my visa sto coator and my browser using Live Server extension, and I already create estemL document named Idexot Atmel, and I also open my cosol in my browser. At first, inside this script tag, I'm going to create a variable, and our variable name is equal to 20. The sp two in this line. Then in the next line, I'm going to use EPS statement. If inside the round process, I'm going to set two conditions. Our first condition is H, greater than equal to 18, and now I'm going to use our logical operator. Here, I'm going to use logical n, for that only to type two time and person sine. It is logical n, and H less than equal to 21, then inside the calibraces. I'm going to type console dot log inside the round ss, you are eligible. Then sic two in this line. Here you can see, first, we set a variable name H and H assigned with 20. Inset the p condition, we set total two condition, and then inset the p statement, we set total two conditions using logical operator. If both the condition is true, there is going to return, you are eg. Otherwise, it's not going to return this statement. As you see to create this condition, we use comparison operators, greater than equal to and less than equal to. So if I set this file, as you can see in my console section is print, you are eligible, because both the conditions are true, because 20 is greater than 18, and also it less than 21. But if I pass 24 here and then set this file, as you can see, now it do not print any statement in our console. Ba now this condition returns false. That's why it do not execute our statement. So in that way, we use analogical operator. Now let's talk about our next operator, which is our operator. For that, we need to use this sign two time. Let me show you. Shep, below the back space, you can see the sign to tie. If I set this file, as you can see, it's print, you are eligible. Because if one of the conion is true, then it's going to print our statement. Also, I, both the conion is true. If I pass 20 and then set this file, as you can see, also it print our statement. But if both the conditions written false, then it's not going to execute our statement. Let me show you. I want to increase the e l. Here I want to type 88, and here I'm going to pass 70. If I set this file, as you can see, now its do not print our statement because now both the conditions read and falls. This is the usage of logical operator. Now let's talk about our last operator, which is logical not operator. For this example, I'm going to remove our statement. Here, I'm going to type console dot log in set the down grasses. First, I'm going to use our logical not operator, which is exclamation sign. Then I'm going to type H greater than equal two, 15, and then semicolon two in this line. If I set this file, as you can see, it falls. But in reality, the condition is true because 20 is greater than 15. But if we use logical not operator, it always return opposite. If the condition is true, then it's going to return false and if condition is false, then it's going to return true. If I increase the value, and then set this file, as you can see, this is the usage of our three logical operators. Thanks for watching this video, state for our next tutorial. T 15. JavaScript If Else Statement Tutorial: Hello guys good to see you back. Once again, I'm back with a new tutorial related JavaScript. And in this tutorial, we are going to learn Java Script, if statement. But before we need to understand what is if statement. In our previous tutorials, we'll learn how statement work. IPS mean condition, and our condition written true either false will. And if it's written true, then need to execute our statement. But in this tutorial, we're going to talk about statement. If the condition written false, in that case, it's going to execute our second statement. It's mean it's not going to return blank anymore. Some results will come in front of you. It's mean we create different condition for true value also for false value. So let's try to understand how we can use it in JavaScript. As you can see, we have ep statement, and if the condition is true, then it's going to print this statement. And if the condition written false, then it's jump into the L section. Then it's written these statements. Let me show you a real example. Suppose we have a variable name X and X N with 30. And then I use if statement. If x is greater than 50, then print consol dot log greater. And as you can see, x is not greater than 50 because X value is 30, and now it's going to jump into the L section, and then it's going to execute consol dot log smaller. So I hope now you've got the point, how portion work. So Wout wasting your time, let's start the practical and see how it's so. Here you can see side by side, I open my visa studio cored and my browser using light sever extension, and I already create a estemL document named index dot estim. At first, I'm going to take a variable x, x assiu two, the ever to end this line. Now I'm going to use if statement. If inside the parentheses, I'm going to set a condition x greater than C t, then then inside the statement, console dot log Inside the double codes, I'm going to print, x is greater. Then we go on to end this line. Also, I'm going to create the S part. Then inside the cases, Ham print console dot log inside the parentheses x is smaller. X is smaller. Then semicolon two in this line. If I set this file, as you can see, it's print, x is smaller. But if I increase the x value, 22, and then set this file, now you can see it's print, x is greater. Let me show you a real example. For that, I'm going to take a new v n is at one M. Inside the double, I'm going to type ad one M. With that, I'm going to take another vari, and our next variable is Z Zener. And Zener is male. Then g to end this line. Inside the statement, I'm going to type I Zener and here I'm going to use equal to operator. Zener equal to male, then prints, I want to print hello Mr.. Hello, Mr.. Also, I want to print the name. That's why I'm going to call name variable. N. As you can see the plus sign, it is not used for addition. It is used for concatenation. Using concatenation, we can join two different stream. Also you can join numeric value with st using. We are going to learn about it in our upcoming tutorial. Then in our ill statement, I want to print Hello M. H are in. Let's set this file and see what happened. If I set this file, as you can see, hello, Mr. Add one Mach. Because our gender is male, that's why it's print this line. But if I sat gender, female hair, let me show you. And the set this file, now you can see it print. Hello, who are you? Is clear for you, how we can use it statement in real life. This is it for this tutorial. I the next tutorial, you're going to learn LCI condition, state une for our next tutorial. 16. JavaScript If Else If Statement Tutorial: Welcome back, guys, once again, I'm back with a new tutorial related Java script. In this Tutteral, we're going to learn Java script, Eels Ep statement. Let's try to understand what is Ils Ep statement. In our previous tutorials, we learn about Ep statement and statement. But in this tutorial, we're going to learn ifelse Ep statement. I want to say we can set multiple condition in our EP statement. As you can see, we create a EP condition. After that, we create another ep condition. If we use it, it's mean if our first condition is true, then it's not going to execute this condition. But if our first condition is false, then it's going to check this condition. Condition two. I want to say then it's going to jump into the LC statement. If both the condition written false, then it's going to execute L part, and the most important parts, we can set multiple LC statement in our p condition. The main part we are going to learn in this tutorial is L. Let me show you an real example for it. As you can see, if H less than 18, Then in our console, I want to print, U or to young. With that, I want to set another condition in this EP statement. That's why we use LC. LC, H less than 30, in that case, I want to print, U are welcome. I both the condition written falls, in that case, in our L section, I want to print, not allow. And in this tutorial for practical demonstration, I'm going to use this percentage and great chart. If result 80-100%, in that case, it to return merit. And if result between 62, 79%, in that case, it to return first division, and result between 45% and 59%, in that case, it to return, second division. I result 30-44%, then it to return third division, and if less than 33, then to return fail. We are going to create a application using LCP condition. Without wasting your time, let's start the practical. As you can see, side by side, I open my Visual Studio code or and my browser using Light server extension, and I already create an estimL document named Index Dot estimL. At first, I'm going to create a variable there and our variable name is percents PER. Here I'm going to set a value, 56, and we can change percents later. Now I'm going to create a EP condition. Here I'm type, if inside the EP condition, percent is greater than equal to eight t, with that, so I'm going to use logical and end operator, and percents, less than equal to 100, then I want to print in my document section, document dot write inside the parentheses, are in merit. Then semicolon two in this line. It's mean if any student score between 82, less than 100, otherwise 100, in that case, we need to return, you are married. For our next condition, I'm going to copy this section. Here, before start our next condition, we need to use LC. Then we need to set the condition. As you can see, we paste out condition after LCP statement. Now I'm going to change only the marks. So I'm going to remove 80 and Amuno pas 60. Here also I'm going to remove the equal to sine and Hamono pas 80, below than 80. It's mean I students score 60, otherwise, greater than 60 and below than 80. In that case, we need to return in first division. Ham type first division. Then to end this line. This is one of LC statement, but we are going to use multiple LC statement. For that, I'm going to copy this section, and I'm going to past it after the cdbras. This time, once again, I'm going to change the scope. If the percent is greater than equal to 45 and percent is less than 60, in that case, we need to pass second division. U R in second division. Next, we are going to create condition for third division. I'm going past LCP condition once again. Her Am pass if percent is greater than equal to 33 and percents less than 45, then print UR in third division. Now I'm going to use our last LC statement. In this statement, I'm going to use only one condition, I don't going to compare it. Here I'm going to pass e percente is less than 33. In that case, I want to print or fail, and E, both the condition written false, in that case, we need to create part. L. Instead the calibrass, I want to print, document dot write, instead the parentheses, please enter valid percentes. Then semicolon two in this line. Let's set the file and see, is it perfectly work or not. If I set this file, as you can see, it's print, you are in second division. As you can see, the percentage is 56, and it's 45-60. That's why it's written, you are in second division. But if I change the percentage, here I'm going to pass 98, and then set this file. Now you can see you are in merit. I want to say if one of the condition is true, then it's going to scape all of the conditions even spar. Similarly, if I pass 22 and the set this file, now you can see you are fail. But by mistake, if I pass more than 100 104, and then set this file. Now you can see, please enter valid percentages. Now it's execute our LS part because all of these conditions written false. Not only that, we can pass floating low also. Let me show you. I I pass 80.89 65, and then set this file, as you can see, you are in mart. It's also work. Basically, we create a most simple application using if an LCP condition. Remember, you can set multiple LCP condition as much you want. I hope now it's clear for you, how we can use it. Thanks for watching this video, state Tune for our next Tu re. 17. JavaScript Conditional Ternary Operator Tutorial : Hello, guys is good to see you back. Once again I'm back with a neurial related Java script, and in this trial, we're going to learn Java script conditional Tina operator. This operator work as like I's condition. Let's see the main difference between FL's condition and tinary condition. Tenary operator also have a condition, and as you know, all the conditions have two result. True either false and we can run different statements according to result. For true, we can run different statement, and for false, we can run another statement. So it's pretty similar with IFs condition. So let's see how we can type it in JavaScript. At first, you need to create a condition, and you don't need to type I for that. You can use round presses also. Then you need to use Kosten Mark sign. And if your condition is true, then you run this first part. And if your condition written false, and then after colon, you need to pass the false statement. So as you can see, it's act like L's condition, but it's not look like L's condition. And the main difference between T ternady operator and ELs condition is, you cannot use multiple condition in this statement. In our condition using L C, we can set multiple condition, but in ternary operator, basically, we pass one condition. So let's see an example how it so. Are you can see, we have put two variable, A and V. And also, you can notice we assign a value in our A variable. But we just declare V variable. Let's see how we can use it with ternary operator. As you can see, if A greater than 15, then then we assign value two. Otherwise, if this condition falls, in that case, We assign value falls, and as you can see, 20 is greater than 50. That's why it's going to assign true value in our V variable. And then we can print it as like normal v. Without wasting your time, let's start the practical and see how it's work. Here you can see side by side, I open my visas to your coator and my dogs that using Live sever extension, and I already create estimate document named Index estim. As usual, I'm going to take a variable that A, A as 25. And then I'm going to use Turnary operator. Then inside the parenthesis, then inside the round press, I'm going to type A equal to equal to 25. As I told you, if we use, Turnary operator will need to use quot Mark sign. Also, I'm going to declare a variable. Here, I'm going to t B. There's avail to in this line. On Hamer pass B. If A value is equal to 25, then I want to assign true in our variable. Equal to, I want to type true. And if the condition is not true, then I want to assign false in our variable. Before create the part, we need to use colon. Clon B assign with false. Then semig to in this line, and now I want to bring this value in our console. Here, I'm going to type console dot log and set the parentheses, B. Then score two in this line. So if I set this file, you can see in my console section, it's ten true. But if I pass 55 here and then set this file, now you can see it's ten falls. Not only that, also we can reduce more character from this line. For that, I'm going to duplicate this line and comment a previous one. Here I'm going to reduce B and equal to sign. As you can see, we already declare value, and here I want to assign a value in our viable. Here I'm going to type B equal to, and I use the stanar operator to assign the value. If I set this file, As you can see, it's also written false. And I I pass 55 here and this this file, also, you can see it's written true. It's mean according to condition, it's written true, and I want to assign this true value in our V variable. You can use any comparison operator. Also you can use logical and a logical or operator. As you can see how we create a condition in a single line. But if we use P condition for that, we need to type multiple line. Not only that, we also pass a message with that. Let me show you. Here, I'm going to type inside the doble codes, value is and then I'm going to use concatenation operator plus sine. And as I told you, the round braces are optional for t ternary operator. So I'm going to remove this one from this place and use it er fur. If I set this file, now you can see it's st, value is true. According to the condition, it's Stan the v. You can create any type of condition using operators. You can use greater than sine, less than sine, greater than equal to sine, et cetera. Just you need to remember you cannot pass multiple statement in this place. So I hope now it's there for you. Thanks for watching this video, state tune for our next tutorial. 18. JavaScript Switch Case Tutorial: Hello guy is good to see you. Once again I'm back with a new tutorial related Java script. In this tutorial, we are going to learn Java script, switch case statement. This statement pretty similar with if else IP conditions. Let's see the syntax how to write. Such fast, we need to type switch. Then inside the round brass, we need to pass an expression. Maybe N. Otherwise, N V. Then we check this value in this condition. But before check the condition, you need to type Ks Q word. Then you can create a condition using any comparison operator. You can use logical and otherwise logical. Then if the condition is true, then it's going to run the statement. I the condition written false, then it's going to check our next condition. Similarly, if it written false, again, it check condition three, and any of the condition written true, then it break the Switch statement. And it's not going to change any other condition. Using brake word, we can stop the execution. Similar to else condition, we have default in switch statement. If any of condition do not return true, then you're going to execute our default statement. Just you need to remember, we need to use s and brake ord before and after condition. Brakes mean no statement run after this. Without wasting your time, let's start the practical and see how it's work. Here you can see side by side, I open my visual Sudo creator and my browser using Lp Server extension, and I already create estemL document name index dot ML. Let's start switch case statement. But before I'm going to create a variable. Hamer type V, and our variable m is D D equal to one. Then sub two n this slide. Now I want to create a switch case statement. Here I'm going to pass a day number, which is going to return our day name as like one for Sunday, two for Monday, three for Tuesday, et cetera. Let's create the switch case. Here I'm going to type switch. And Inside the undress, I'm going to pass our variable name, and our variable me is day, and here, I'm going to pass case one. After colon, I'm going to type document dot right inside the parentheses inside the double cos, two day is Monday. Then semicon two in this line. If we pass case one, then writ Monday, and now I'm going to duplicate these lines six times for our six days. And now I'm going to change case condition and statement one by one. For case two, I want to print, today is Tuesday. Similarly, for case three, I want to print. Today is Wednesday. Similarly for case four, I want to print is Thursday. For our case five, I want to print, today is Friday, and for C six, I'm going to print, today is Saturday, and we need to create another case statement. So I'm going to select this line and duplicate it. For K seven, I want to print, today is Sunday. As you can see, one by one, we create every cas statement for our weekday names. For our default statement, I want to print. Let me show you here I want to print, entered the valid weekday. Let's set the file and see what it written. If I set this file, as you can see, it's print, today is Monday, because we assign value one. Similarly, if I pass for and then set this file. Now you can see, now it's print, today is Thursday. As you can see, this condition is true. That's why it print this statement. After print this statement, our brake Qd, stop executing other condition. I want to say if the condition written true, break doesn't allow to execute other condition. But what happened? If I remove brake word from our statements, let me show you. On by one, I'm going to remove all the brake word. If I set this file, as you can see, as you can see after Thursday, it do not stop executing, and it print all the statement. Today is Friday, today is Saturday, today is Sunday. And also it print intervald Weekday, which is our default statement. The break Key was very necessary in switch case statement. Let's back to the previous position because I need break. If I set this file, as you can see now it's work accurately. I hope now it's clear for you. What is the usage of break war? Let me show you one thing. Now I want to print same value for case one, case two and case three. For that, we can type like this way. I'm going to copy the case two, and after case one, I'm going to paste it. Similarly, I'm going to copy case three, and after case two, I'm going to paste it here. Now I'm going to remove this two conditions. Here, I'm going to pass case three. If I set this file, as you can see, it's today is Monday. In this way, we can return the same result for different cases. As you can see for case one, case two and case three, return today is Monday. Basically, we can check multiple cases in a single line. Also, you can pass here multiple statements. I'm going to date this line, and here I'm going to pass hello over. If I set this file, you can see the result today Monday, hello world. Now I'm going to show you how can we use switch case statement with comparison operator? For that, I'm going to take a variable name H. I'm going to st H 30. Here I'm going to work with only three or four cases. Here I'm going to delete all the cases. Inside the round ss, I'm going to pass. It's mean the switch case statement should go on. Here we do not pass any wh, but it automatically turn on our switch because we said true wheel. But here, I just want to use comparison operator. Inside the round press, and here, I'm going to create a condition. H greater than equal to 18. With that, I'm going to use and operator, and less than equal to 25, then I want to print in my document. I'm going to remove one document statement and here I want to print, you are eligible. This is our first case condition, and I'm going to duplicate this section again. I want to create another case condition. Sorry, I did a mistake. Here we need to use greater than equal to sine. If a greater than equal to 26 and less than equal to 60, then I want to print, you are not eligible. In our difert statement, I want to pass enter the valid age Hg. Let's set the file and see what it's written. If I set this file, as you can see, here you can see, it's print enter the valid age. I think I did some mistake again. Here we need to use greater than sign. If I set this file, now you can see, you are not eligible. As you can see our age 26-60. That's why it's print, you are not eligible. But if I change the age, 22, and there set this file, now you can see you are eligible. But if I pass value less than et and greater than 60, then it's going to jump into the default statement, and Print entered the valid age. Let me show you. Here I pass 15, and then set this file, as you can see, enter the valid age. Also, if I pass 77, and then set this file, as you can see, it's also print, enter the valid age. Because here we create two cases. Our first case, handle edge 18-25, and our second case, handle edge between 26 and less than 60. Here I want to show you how can we use switch case statement with comparison operators. I hope now it's clear for you. Thanks for watching this video, St tune for our next tutorial. 19. JavaScript Alert Box Tutorial: Hello, guys good to see you. Once again, I'm back with a new tutorial related JavaScript. And in this tutorial, we're going to learn Java Script alert box. Basically, we use alert box to display message. And also, we can show different value in alert box. Without wasting your time, let's start the practical and see how we can use it. He you can see side by side, I open my user studio code editor and my browser using light server extension, and I already create an estimL document named Index dot stem. So first, inside the script tag, I'm going to type alert. And then we need to provide round brass. Here we can display any message. Also you can display any variable. I set the round brass, I'm going to type, the double es, hello world. Then semicon to n this line. If I set this file, here you can see in a browser, it provide a alert box and it print hello word. It's tinned up pop up box. I I pres then it's remove alert box. If you want to show a message in a pop up, in that case, you can use alert box. Let's use the alert box with a condition. Here, first, I'm going to create two variable. A A SN 15, then semicon to n this line. Then I'm going to duplicate this line and our next variable is B and B an 20 t. Now I'm going to create a EP condition. If inside the round brass, A, greater than B, then inside the calvss, and then inside the calvss, I'm going to call alert balls, alert. On here, I'm going to pass a message. A is greater. Then subgo line. Next, I'm going to create the sp. Ls inside the calibraces, once again, I'm going to call the alert box, Alert, and I want to print B is greater. Then smog to this line. Let's set the file and see what happened. If I set this file, as you can see, it's written in alert box. I print, B is greater. If you want to show the messes very argently, and with focus, in that case, you can use alert box. And to remove alert box from our browser, we need to press. Not only that, also we can pass simple value in our alert box. If I pass our variable, A and I pass or variable B. And if I set the soil, you can see the result. C. It's written B. I just want to show you can print any masses, otherwise, you can pant any variable in. Also, you can show concatenate in. Let me show you. Here I'm going to type inside the double code Value of Bs and now I need to use concrete net sign plus sign. If I set this file, as you can see, is print, value of B is 20. Not only that, also you can do any arithmetic calculation here. Let me show you. Here I'm going to create a new alert box. Alert inside the undress, I want to join A with B. Then s going to end this line. If I set this file, as you can see, sprint five. I hope now it's clear for you, what is alert box, and how we can use it. Thanks for watching this video, Sun for our next two. 20. JavaScript Confirm Box Tutorial : Hello guy is good to see you B. Once again, I'm back with a new Tutorial related Java script. And in this tutorial, we are going to learn Java script, Confirm box. Confirm box, P is similar with ALT box. But confirm box, ask you a question, which you have to answer with yes or no. And you can perform your next program according to the result. So without wasting your time, let's start the practical see how it solved. As you can see side by side, I open my reser stdio creator and my browser using light server extension, and I already get the esteL document name index dot at. So here, inside the script tag, at first, I'm going to type Confirm. Inside the undress, I'm going to ask a question, and our question is, do you like Java Script. Then semicon to end this line. So let's set the file. As you can see after set the file, it returned a confront box. And as you see, we have put a two button, and cancel. And if you press, E mean, it's screw, and if you press cancel, es mean is false. If I press any of it, it's going to retain nothing. So I'm going to press. As you can see it sten nothing because we have not performed the next program. I'm going to set this confron box in a variable. So type that that X equal to this confront box. Then I'm want to print this contro box in alert box. Here I'm going to call Alert. I say that presses, I'm going to call the variable X. There's suborn two in this line. So let's tap the file and see what happened. As you can see, after reload my browser, it print a confirm box. Do you like J? So here, I'm going to press. After press Okay, you can see, you can see my alert box, it's written because we press. Means. Similarly, if I reload my browser and then press cancel, now you can see it's stoned file. Most of the time, we use it with P condition. Let me show you how. Hm, inside the paraless, or variable x. Then inside the class, I'm going to call Alert. Alert, I want to print welcome. And then we need to create the's condition. Is, inside the calibraces. Once again, I'm going to call alert box. Alert. Here, I want to print, go ahead. Then we go on to end this slide. Let's set the file and see what happened. So press this file and alert this browser. As you can see, it first it asks the tin. Do you like JS? Here, I'm going to press. If es, there is pint welcome. Similarly, if I realert my browser, and if I press cancel, in that case, it's going to print the s part. As you can see it print, go ahead. I now it's clear for you, how we can use confirm box. Most of the time we use it with EPL condition. And also, we use this confirm box with events, like button events. When we press the button, then it asks the tion. If you press S, then it proceed the further over. I also use it when users try to close their browser. Otherwise cancel that download, and we are going to learn about it in our occurring tutorials, how we can use compound box with events. So thanks for watching this video, state even for our next tutorial. 21. JavaScript Prompt Box Tutorial: Hello guy is good to see you back. Once again, I'm back with a new tutorial related Java script. In this tutorial, we are going to learn Java Script Prompt box. In our previous tutorials, we'll learn about ALT box and confirm box. Our prompt box also similar with that. But the main differences, we can get data from the user using prompt box. Without wasting your time, let's see how we can use it practically. As you can see, side by side, I open my Visa Sudo codator and my browser using Lb server extension, and I already create a estil document name Index dot estim. Here, at first, I'm going to type Prompt. And inside the undress, I'm going to pass a message. What is your name? Then semicon to n the line. Let's set the file and see what happened. If I set this file, as you can see, that is a prompt box, and it asks, what is your name? If I pass a name and I want to type add one, and then I'm going to press, as you can see after pressing, nothing happened here because we do not use the value. For that, I'm going to assign this prompt in a variable. Here I'm going to type v x, x assu this prompt box. Whatever we pass in the prompt box, it's going to assign to this x value, and I want to print this value in our console section. Here I'm going to type console dot log inside the rounds, I'm going to pass the variable x. Then semicon two in this line. In my browser, I'm going to open my console panel. Let's set the file and alert the browser. As you can see, after set this file, you can see the prompt box and here, I'm going to pass the name at one means. If I press, you can see the name in my console section at one Manj. Using Pn box, we can get data from the user, and we can get any kind of value using Pn box, numeric, string, et c. Now I'm going to use Pn box with IS condition. For that, I'm going to use our old example. Here, I'm going to set all the lines and remove it. And I'm going to paste our previous example code. As you can see in this example, we past the data, but I want to get the data from the user. For that, here I'm going to use the Pront box. Prompt and inside the round presses, I'm going to type enter your percentage. Whatever our user pass, it's going to assign to our PR variable. Then according to the EP condition, it's going to print the result. As you can see, after Sep the file, it has the percentage. Here I'm going to pass 67%. Then I'm going to press. As you can see, it's print, you are in first division. Be 67 is between this condition, greater than equal to 60 and less than equal to 80. That's why it print, you are in first division. Now we don't need to change any value in our document. We directly get the data from the browser using Prompt box. I hope now it's clear for you. How can we use Prompt box in real example? Thanks for watching this video, state une for our next tutorial. 22. JavaScript Functions Tutorial : Hello guy is good to see where. Once a I'm back with a new Tutorial related Java squeak, and in this tutorial, we're going to learn Java squat functions. Let us see what is the situation where we have to do more work without function. And how can we save time and effort using function? Here, you can see, we write three lines using documented right. And after this three lines, we type other line of codes. Then again, we need to use the same lines. So as you can see, for that, we need to use multiple line of code. And we may have to use this line in the future. But the problem is, if we have to change this line, we have to change it again and again. Suppose I want to change the welcome world. Then in that case, we need to change it A L, and it is very difficult and boring process. And also it increase the unnecessary code lines. To resolve this chyro problen, we have functions. For example, we create a function named X Y Z. And then inside the calibraces, we said this three line of code. And whenever we need to use this line of code, in that case, we need to call our function XYZ. And whenever we call the function, after a function name, we need to use run brass, and then send to end this line. And we can call this function how many time we want. As you can see, we don't need to type unnecessary lines again and again. And if we want to change any statement, then just we need to change in function, and it's going to apply it all over the code. Now, let's talk about the syntax. How we can type in JavaScript. At first, we need to use function keyword, and then we need to assign a name for this function. In our case, our function name is name. And remember, you cannot provide any space in function name. And also, you can use camel case. With that, you can use underscore, but you cannot provide any space in this name. After that, you need to use two round races. And then inside the color races, you can set your statement, and you can write as many lines of code as you want here. And wherever you need to call the function, just you need to type function name, then round races, and sag to this line. And the place where we create the function is called function defination. Otherwise, we can call it function declaration. And whenever we need to call the function, we can call it calling a function. And we can call the function how many time you want. So without wasting your time, less 30 practical and see how it sore. As you can see, side by side, I open my visual so Cordtor and my brother using Light Server extension, and I already create estimate document named Index dot atable. So inside this script tag, first, I'm going to create the function. For that, we need to type function QR. Function. And then we need to pass the function name, and our function name is hello. And then we introduce round races. And what is the actual usage of round races we are going to learn in our upcoming tutorials? Then inside the call ss, I'm going to type our statement. He I'm going to type document dot right inside the round ss, and inside the double cos, I'm going to type hello everyone. The core to end this line. As you can see, hello we declared function hello. And now we need to call the function. For that, just we need to type the function name. Hello. And then we need to use round races. The semen to end this line. If I set this file, as you can see, it print. Hello everyone. Not only that, if I duplicate this line multiple time and there set this file, now you can see it print Hello, everyone. Multiple times. And now I decide to change my mind. I don't want to print. Hello, everyone. I want to print Hello and welcome. For that, just need to change in function definition. Here I'm going to type. Hello, and welcome. I it satisfied, you can see the. You have to change only in one place and rest will be changed automatically. Also you can type anything between this function call. Let me show you. Here I want to type document dot write set the round says, I want to use brake ta B R. Then semag to end this line. Next, I want to print docu dot write, and here I want to print, this is function pi. And then semicon in this line. If I set this file, you can see the result. As you can see, first it print, hello and welcome for our function calling. Then it provide a break. And in the next line it print, this is function torial. After that, it print all the function calling statement. Hello and welcome. I just want to say, here you can use any conditions, loop, any statement, et cetera. Also, we can create multiple function as much as we want. I'm going to date this line, and I'm going to create a new function, and our function name is name. And Ham type, My name is Adon. If I set this file, as you can see, nothing is happening. There is no changes because we do not call the function. Here, I'm going to use another break tag. Document ate break. Then I'm going to call name function. Nail. If I set this file, now you can see, atlas it print, my name is at one. So this is it for this tutorial. I just introduce you what is function and how it's work. And in our upcoming tutorials, we're going to learn advanced version of functions. Thanks for watching this video, state tune for our next tutorial. 23. JavaScript Functions with Parameters : But to see you guys once again, I'm back with a new tutorial related Java scrit in this tutorial, we are going to learn Java split functions with parameters. In our previous tutorial, we'll learn how we can print this three statement multiple time using function. We need to create the function, and then we need to call the function. But every time I want some little changes when I call the functions. For that, we have functions parameter. Let's try to understand it. As you can see in this example, we create two variables x and y, and we say X value 12 and y value 17. Then we addition this two value in our Taku. But if we need to do the same job with different value, in that case, we need to write this three line again. Here we just chase the variable value, nothing else. To resolve this kind of problem, we're going to create a function where we can pass parameter. So here you can see, we create a function, which is nail. And here we take two variables A and V. Both the variables are parameter. And after get the value from the parameter, we can add this two in our document. But when we need to call the function, with that, we need to pass two. In our case, A value and V, 19 and 80. Not only that, also we can pass variable m. In our case, X and Y, X value is 19 and y value is eight. So basically, I want to say we can use this function multiple times with different. So let's see the syntax, how we can type in js. At first, we need to type function key. Then we need to take a function name. You can take any name. Then we need to take the parameters. Inside the grass, we can take variables for parameters. You can take multiple parameters as much as you want. And then inside the colerass, according to the parameter type and value, you can run any statement. You can calculate any statement, you can print any statement. You can do anything you want. And when you need to call the function, just you need to type function name, and then you need to pass argument one and argument two. You can pass directly a argument value. Otherwise, you can take any variable name as argument. So whatever value we pass in argument one, it goes to the parameter one. Similarly for argument two. Whatever value we pass in argument two, it goes to the parameter two. So without wasting your time, let's start the practical and see how it's or. Here you can see side by side, I open my iso Studio code editor and my browser using Light Server extension, and I already create Index dot estable file. So first, I'm going to create a function. For that, first, we need to use function queer, function, and our function name is hello. Then inside the round ses, I'm going to take two parameter. Our first parameter is Fn, and our second parameter is N, en stands for first name, and Lam stands for last name. Otherwise, surname. Then inside the ss, I'm going to print document dot right inside the round ss, I want to print a statement. Inside the double codes, I'm going to t hello. Then plus sine, and I'm going to call our first parameter. Otherwise, our first variable, In Fn, then plus sine, or second variable, I. Then go to end this line. Also, if you want space between name and surname, you need to add another concretination sign. And between them, I'm going to use double cos. Also, I'm going to use a space inside the double. Now, let's call the function. Her type, hello. Then inside the dress, we need to pass the argument. In our first argument, we need to pass first name, and I'm going to pass add one. Then we need to use CA and in our second argument, we need to pass last name, which is ange. Then sem column two in this line. If I set this file, here you can see it print hello at one mech. If you notice, you can see, there is no space between hello and add one. So for that, we can provide a space after hello. If I set this file, now you can see it print hello at one mech. But what? If we do not pass one argument, let me show. If I remove mech, and then set this file. A you can see, it print, hello at one, then it's print undefined. It's mean our second parameter do not get anywhere. And if I remove both the argument, And there at this file, now you can see hello undefined, undefined. To resolve this kind of problem, we can set default value in our parameters. Let be sow. Here, we are going to pass a default value. Snam equal to inside the double course. I'm going to type Na and name equal to inside the double course, I'm going to pass SN. If I set this file, as you can see, by default, it's print hello name surname. So I user are going to provide parameter, then in that case, it's going to print the default one, name and surname. But if users pass their name, let me show you H n Type, first name wheel. And second name of the coma inside the double quote Smit. If I set this file, now you can see it's print hello Wheel Smel. Basically, parameter over read the default wheel. So I hope now it's a little clear for you how we can use parameter with functions. And now I'm going to call this function multiple tie. In this statement, I'm going to concatenate a break ti. Plus, inside the double codes B R. And I'm going to duplicate this line, hello. And in this function, I'm going to pass a defined name and surname. And here I want to pass Step Sma. If I set this file, now you can see in our second line a sprint hello steps. Not only that, also we can execute calculation using function. O that, I'm going to create an other function. H I'm to tie function. Function and our function name is sum. Then inside the down process, I'm going to take two parameter, A and B. Then I'm going to tie Dom that right inside the round process, I'm going to add this two parameter A plus B, then semicon to n this line. Now I'm going to declare two variable. Our first variable is X. H to type X. Assign 23. Then I'm going to depict this variable, and our next variable is y. Y, 30. And now I want to call this function, or some function. S. Then inside the rounder says, Here I want to pass two variable lim as an argument. X, com Y. Then smegal to this line. If I set this file, as you can see in my browser, it's print 53. In our previous function, we directly pass the V. But in this function, we set the value in a variable, then pass the variable as an argument. So I hope now it's completely clear for you, how we can use parameter with functions. Thanks for watching this video, state for our next to the v. T. 24. JavaScript Functions with Return Value Tutorial : Good to see you back guys once again, I'm back with a new tutorial related Javask. In this tutorial, we're going to learn function with written veil. In our previous tutorial, you learn how we can use parameter and how we can send argument to this parameter and print different results according to the veil. But in some situation, we don't need to write the value in our document. I want to use this calculation elsewhere in the future. For that, we don't need to use write statement. We need to use written statement. And to return this value, we have some special method in Java screen. So let's try to understand. Need to tie written QR and value. And our written value going to assign to this variable name. In our case, Z. So as you can see, when we call the function, it going to store the written value in our variable. So without making it complicated, let's start the practical. As you can see on your screen side by side, I open my visas vio codator and my browser using light server extension. And I already created an estimate document Name index dot STML. And also, you can see inside this script tag, we already create a function Name. And he we pass two parameter, F name and name. And also we say deferred name and surname. And now I don't want to print our first name and last name in my web page. I want to return the il. For that, first, I'm going to take a variable that A, A equal to. Now I'm going to call our parameter. Our first parameter is F name. F name. Then I'm going to use congregation si. Inside the double cos, I'm going to provide a space, and after double cos, I'm going to use congennation sine again, then last name. A Semcal two in this line. As you can see, we start the value in A variable, and now I want to return this il. For that, we need to use written word. Return, return A, and Semcal to in this line. Whenever we call the function is going to return a variable. Now, let's call the function. Our function name is name. They inside the undress, O first argument is add one, and coma and our second argument is met and Sec two n this line. If I set this file, as you can see, it do not print a state because whatever value it's written, we do not use this veil. For that, I'm going to store this function in a variable again. Here, I'm going to create that and our variable s n for name equal to our function. Then I'm going to print this variable. So type document dot right inside the undress n. The sem corn two in this line. If I set this file, now you can see is print at one Mach. So when we pass the value as an argument, it's going to store to this parameter. Then it calculate both the parameter and assign into this variable. A. And then we return this variable using written and the written value assigned to this n variable, and then we print the n variable. That's why it print at one M. I hope. Now it's little clear for you how we can use written value. Now, let me show you an adverse usage of written wheel. And now I'm going to create a function which is going to return percentage using formula. And here I'm going to take total three parameter. Let me show you. Also, I'm going to change the function name, which is some. And he pas Mth sins Sc, and for language LNG. Now I'm going to add this three parameter and and ascend this value in this A variable. Ho type, Math sins plus language. Now I'm going to create a variable total. And in set this variable, I'm going to call this sum function. Hm type sum. Then in set the undress, and here I'm going to pass three argument. 34, coma 56 coma 75. And I I put in the total value here, total, and then set this file, as you can see, it's re the total value. We already learned about it. How we can use it. And now I'm going to create another function. Who's going to return the percents. Her type function, and our function name is percents. Then inside the round brass, I'm going to pass only one parameter, and our parameter am is t stands for total. Then inside the round brass, I'm going to create a variable and our variable m is percents. R equal two, and to get the percentes, we need to divide total with 300. And then we need to multiply this division with 100. Now, you can return this value, and also you can print this document directly from this function. Here I'm going to print the document directly from this function. Her type document dot right inside the round races, here I'm going to pass the variable name per means percents. Then seal to n this line, and now I'm going to call this function. So I'm going to remove this line, and here I'm going to call percents. Percents inside the round races. Here I need to pass the return value of some function, which is total, because we stored the reten value in total vari, H to pass total, and semicolon this line. If I set this file, now you can see, is print the result, 55.001. Our first function return the total and our second function print the percents. If I change the number, let me show you 58 and they set this file, you can see, is also change the percents. Basically, here I want to say, we can use the written value in another function as an argument. So I hope now s for you, what is written and how we can use written value in another function. Thanks for watching this video, stay tuned for our next codio. 25. JavaScript Global & Local Variable Tutorial : Hello Ga is good to see you where. Once again, I'm back with a new tutorial related Javas. And in this tutorial, we are going to learn local and global variable. So let's try to understand what is local and global variable. As you can see, we assign a variable z, and its value is 49. Inside the function, we assign another variable y, and its value is 45. The variable outside the function is called global variable, and the variable inside the function, which is called local variable. But there is difference between these two variables. Let's try to understand it practical. As you can see side by side, I open my Visa Studio code editor and my browser using Life Server extension, and I already create an estimate document name in Ezo estim. And inside the script tag, first, I'm going to declare a variable. A, which is a global variable equal to, 34. And then I'm going to create a function name H. Function and our function mes. Then inside the cases, I'm going to type Dum dot right. Is the ss, I want to print the variable A, a subcon to end this line. And now I want to call the function. O function mes H and subgin to end this line. If I set this file, as you can see, its print four, but we create a variable outside the function. And now I want to print this value without function. So here I'm going to type D um dot write inside the ss or variable in A, a semicon to in this line. Also, I'm going to add a beer tag in this statement, which is inside the function. Cgdion sign, inset the double codes B. If I set this file, now you can see it pin 34 and 34, our first value coming from H function, and our second value coming from dopin right state. There, I just want to say, we can use global variable inside the function and outside the function. We can use it anywhere. But if I move this able inside this function, let me show you so I'll cut this able and paste it inside this function. And dest this file. Now you can see sprint 34 only one ti. It's sprint the value from the H function. But it do not print the value from the do state because now it's not a global variable. Now it's local variate, and it's work only for this function, not outside the function. And if I show you why Cs section, you can see an error in line number 70. Let me show you. Inspect Cs. As you can see, is sprint co reference ero, A is not defined. Line number 70, and you can see the. At line number 70, we print this state. Now, A is not a global variable anymore. That's why it cannot bring this statement. But if I redeclate this variable again, let me show you. Now, I'm going to redlate this very well as a global variable, and I'm going to change the il. 44. If I set this file, now you can see our document dot write statement print 44, but our function written 34. Because when we use the same variable m, is that the function, I want to say if we use the local variable using same name is going to override the old variable. That's why our function and document statement written different value. So I hope now it's clear for you. Has for watching this video, state un for our next. 26. JavaScript Events Tutorial : Hello, guys, good to see you. Once again, I'm back with a new Tutorial related Javas and in this tutorial, we're going to learn JavaScript events. These are most basic event lease, and we're going to cover all of these intratorial. Our first click events are mouse click event, click, double click, right click. With that, we have mouse over, mouse out, mouse down, and mouse. And similarly, we have events for keyboard. He pres key up and our last four events for our browser windows. Load, unload resize, scroll. Basically, we use this event to call a function. These are most basic events in JavaSP. Without that, we have some more events. I use the least. That's why I decide to cover most useful and basic ones. If you remember in our previous tutorials, when we refresh our page, it run our function. And if we use events, our function won't run by itself. Now, when you use one of the event, it call our function. So with resting your time, let's start the practical and try to understand how it's sore. And you can see side by side, I open my user studio code editor and my browser using Lf Server extension, and I already create a sml document, index dot a sml. And also, you can see in my script tag, we create a function named hello and a spit hello everyone. In our previous methods, we our function directly. Here I'm going to call our function. So I want to type hello or function. Thin semicolon to in this line. If I set this file, as you can see, is print, hello everyone. So when I press my browser is always call the function and print or statement. Hello everyone. But I don't want to call this function like that. I want when I click a button, is sprint this statement. For that, inside my body tag, I'm going to create a button. And our button name is K. And now I'm going to use an event, and our event name is k. For that, we need to tie on Key on K. And then inside the double codes, you need to call the function which I want to call, and I want to call this hello function. So I'm going to cut this statement from here, cut and paste it inside the double codes. And I'm going to serve this file. Now you can see there is a button in my document. Let's slick the button and see what happened. If I click this button, as you can see, sprint hello everyone. So I hope now it's clear how we can use events. Not only that, using events, you can call Alert box off. Let me show you. Here, I'm going to type er. If I set this file, and this time, if I click this button, as you can see, it's printed alert box, and it's sprint our messages. Hello, everyone. Similarly, we have a lot of events in Java cli. Let's see how to write it. If you want to use click event, in that case, you need to type on click. Similarly, if you want to use Double cliick event for that, you need to use on DV L click. And for e, you need to use on context me. And if you want to call the function when you over the mouse, in that case, you need to use on mouse enter. And for mouse out, you need to use on mouse out, and for mouse down, you need to use on mouse down. And for mouse, you need to use on mouse. Similarly, we have some keyboard es. Key prese. For that, we need to type on keypress. It's going to call the function up to press the key, and then we have key ev. It is also a keyboard ev. This event, call the function after release the key. And similarly, we have some windows events. If you want to call the function, when user load the browser, in that case, you need to use Olo. And whenever user try to close the browser, in that case, you can use this even no. For that, you need to type on no. And if you want to call a function, when you resize your browser, for that, you need to use on resize even, and for scroll, you need to use on Scroll even. I'm going to cover all of this one by one in this turial. Let's back to the code editor. Again, I'm back to my visa studio coordinator. And now at first, I'm going to create a paragraph. Piece. I set this paragraph, I'm going to type some random test. Lom five. I mean it's going to print five random world. As you can see it print a paragraph. If I set this file, now you can see the paragraph in my browser. And now I want to use double ek event in this paragraph. Yes, we can use it with paragraph also. We can use events with button paragraph A. Here, I'm going to call the event name. And our event name is on DL k on D key. After that, we need to call the function, which function I want to call, and I want to call hello function. If I phrase one kick on this paragraph, as you can see, it stain nothing. I do not call the function. But if I double click on it, now you can see it call function. Also, you can see it written the all box. Hello, everyone. Similarly, we have even f right. For that, we need to type on context Min. Let me show you on context main. If I set this file, and I press let click on this paragraph, as you can see, it's nothing. But if I press right click on it, now you see, it call our function. Our next event is mouse. When I hover my mouse on this paragraph, it's going to call our function. For that, we need to use on mouse enter. M tied on mouth, enter. If I set this file and hover my cars on this paragraph, as you can see, it call our function and print the art bones. Whenever I hover my cars on this paragraph every time it's going to call our function. Similarly, we have opposite event, which is mouse on mouse, or that we need to type on mouse. If I set this file, and my curse on this paragraph, as you can see, it's sen nothing. I do not function. But if I remove my cursor from this paragraph, now you can see it function, and it paint our alert box. Our next event is mouse down, or that we need to type on mouse down. If I set this file, as I told you, this event is similar with click event. If I click on this paragraph, as you can see, it call our function. Also, we have another function, which is mouse on mouse. If I set this file, and ps click on this paragraph. But if I release the click in our mouse, as you can see, now call our function. When we release the mouse click, then it call the function. Now, our next event is on keypress a keywot event. Let's start the event name. On key pres. Before I set this file, there is a problem. We need to use this event in our body tag. Otherwise, we can use it with phones. I want to cut this event from this paragra tag, and I'm going to use it inside this body ten, and I'm going to set this one. Now I'm going to select my browser, and I'm going to press any key. I want to press ter key. After pressing the ter key, as you can see, sc event. Now, let me show you some windows ev. These events also work with body ta, and our first event is on resides. He I'm going to tie on resil. After set this file. Now, if I resize my browser, it is going to call the function. Let me show you. As you can see, if I try to resize the browser, it call the function. So every time you try to change the window size is going to call the function. Similarly, we have another useful browser event, which is on scroll. Ham type on scroll. Am sp this one. As you can see in my browser, if I scroll my mouse wheel, it's not going to call the function because we do not have scrollbar in my browser. For that, we need to overflow to this contain, so I'm going to increase the paragrap size. Here I'm going to type in 500, and then I'm going to press enter. It add 500 word in my paragraph. If I set this file, now you can see, there is a score ball. Whenever I try to score my page, it's going to call our function. Now we have only two function remaining load and unload. If we reload our browser, it's going to call the function. And in our unload event, if we try to close the browser, it's going to call the function. But these two events are not compatible with browsers. These two events do not work in every browser. As I told you earlier, before I end the video, I want to say, there are a lot of events in Java Screen. But in this tutorial, I just cover the basic one, and don't worry. We are going to learn about it in our coming Tutorial. So thanks for watching this video, state for our next. 27. JavaScript While Loop Tutorial: Good to see you back guys, once again, I'm back with a new Tutorial related Java script. And in this tutorial, we are going to learn blues, and especially we are going to learn wild loop. But before we need to understand what is loop. As you can see, we have printed similar statement over and over here. Similarly, if you want to print hello world 1,000 times. In that case, you need to type the statement, document dot write 1,000 times. And if you want to change the statement, hello world to hello everyone. In that case, you need to change it thousand times. To resolve this kind of problem, we have loops. Here we declared how many times we need to execute this statement. In our case, 15. Then inside the loop, we need to pass the statement, which we want to execute 15 time, in our case, hello or. And there is a proper way to create a loop. Let's see. Our loops divided in three parts. Our first part of this loop is initialization. In initialization, we initialize a variable. Suppose we assign a numeric value to a variable, and our next part is condition. In our previous tutorials, we'll learn about EP condition. And as you know, condition always written two vs true either false. And if the condition written falls, then it's going to out of loop. It means it's not going to print your loop, and if the condition written true, then it's going to execute the third part of loop, which is increment and decrement. According to initialization and condition, we can increment our value, otherwise, decrement our value. It's depend on situation of the scope. And after increment or decrement the value, It's going to check this value in this condition again. And if the condition written falls, then it stop executing the loot. And if the condition written true, then it's going to increment or decrement this value. And again, it's going to check the condition. This is continuous process until our condition written falls. And if you want to print or execute something, we need to call it between condition and greent decrement. Here we can print any statement, any calculation, any function, et cetera. So loop made with this three case, initialization, condition, and greent decrement. Now the question is, what is increment and decrement? When we go from first floor to second floor by stairs, then we have to go up to the stairs step by state. We need to start from one step, two step, three step, four step, I recall this process increment. And similarly, when we descend from the second floor to the first floor, then we will continue to descend one step at a time. I recall this process decree. This is the main concept of bu. Now, let's see how many type of loop we have in Java Script. We have total five type of loops in Java Script, Qi loop, Dov loop, for loop, foreign loop, and for each loop. Remember, foreign loop, use it objps and for each loop, use it arrays. We're going to learn about this tu when we're going to work with object and s. And in this tutorial, I'm going to cover omni value. Let's see what is the syntax to write Value? As you can see, we declare a variable name A and initialize one number. This is a lo first step, which is initialization. And then I'm going to check this variable condition inside this Value. As you can see in this condition, A, less than equal to ten, then execute this statement, document dot write world. And remember, to use value before the condition, we need to type V Q m. And this is our condition stage. And according to the condition and variable value, this means we are going to print this statement ten time. And thens come our last part of this do, which is increment, otherwise decrement. And as you can see, hero increment the variable, A equal to A plus one. It's mean every time we increment our variable with one. Now, our A variable new value is two, and then it's going to check the condition again. It's mean A two, less than equal to ten, then execute this statement. And after execute this statement, it's going to increment the value again. Now, its value is three, and again, it check the condition. In this way, the condition will fail when the value of A variables become 11, and then it stop executing this statement. Let's start the practical and try to understand it how it's. So Harry, you can see, side by side, I open my visa Sudio code editor and my browser using Live Server extension, and I already create a stem document name index at. So first, I'm going to create a and our V name is A, and it assign it one. And then I'm going to create a condition using il do. Here I'm going to type in. Le and in at the double codes, I want to print a statement ten time. I'm going to create a condition A less than equal to ten. Then in at the cardss, I'm going to print a document. Document dot right, and here I want to pass Ho world. Also, I'm going to use a BA tag for next line. Br, then semicon to n the line. This is our first part of this loop, which is initialization, and this is the second part of this loop, which is, and now we need to jump into the third part of allo, which is increment or decrement, and I want to increment this variable. That's why I'm going to type A equal to A plus one. The semicon ton this lie. If I set this file, as you can see in my browser, print hello ten time. If I pass 30 here, and this at this file, as you can see print hello word 30 time. Now the question is why I increment the value. As you can see, our initial value is one because we are going 1-30. That's why we have to increment. But if our initial value is 30, then we have to decrement the v. To make it understand, I'm going to concatenate the variable. I want to print a variable value in my document. Let me show you. So before this document, I want to concatenate our A variable. Here, I'm going to type A plus our document. If I set this file, you can see the result. Every time it print the increment value before the document. Remember, also, we can use boops inside the estimL tag. Let me show you. After variable, here, I'm going to declare UL tag. I'm to type document dot right inside the round braces, I want to start on water list. So Amo type U. Then sic to n this line, and I'm going to copy this line. Then outside the op, I'm going to past it, and I'm going to type closing UL tag. If you're familiar with STL tag, then you know it is used for under list, and then inside the round proces, I'm going to use LI tag. He type L. This is for list item. Also, I need to use closing tag. L. Before I set this file, I want to reduce the number. I want to print f T. If I set this file, as you can see, it print our list item, hello over 510. I hope now it's clear how we can use loops with increment weight. And now I'm going to show you the example how we can use loops with decrement weight. For that, here we need to take big number. Here I'm going to take ten. And I want to print this document ten time. For that, we need to change the condition. This time, we need to use greater than equal to sine, greater than equal to one. Now you can see our initial value is stained, and we use greater than si. If a greater than equal to one, then print this document. And now we need to decrement the value to print our document ten time. Here I'm going to use minus s. If I set this file, as you can see, it's also print our document ten time. But the difference is this time, I use decrement. According to condition, if the A variable value become less than one, then it's going to stop our loo. To make it tier, I'm going to print the variable value in my document. After LI tag, double es again. Then outside the double coots, I'm going to use. I'm going to use concatenation sign two time. And between the concatenation sign, I'm going to pass our variable M A. If I set this file, now you can see our loop start from 109-87-6543 21. So as you can see, every time it minus one value from our initial value. And when our value getting less than one, then it stop all loop. And now I want to paint this document 15 time. And I would like to go with minus v. In that case, and we need to pass minus five. If I set this file, now you can see it print hello word 16 time because it's also count zero as a value. If you want to print Hello word 15 time, in that case, we need to pass minus four here. If I set this file, now you can see it print 15 time. But if you notice, here you can see it print one by one minus value. After zero, it print minus one minus two minus three minus four. Basically, here I just want to explain our roofs work with increment value, also the decrement value. I hope now it's clear how work in Java script. Thanks for watching this video. 28. JavaScript Do While Loop Tutorial: Hello, guys, good to see you. Once again, I'm back with a new tutorial related Java Script. And in this tutorial, we're going to learn Java Script. Do wild. In our previous tateral, I told you, loop divided in three parts. The first part is initialization, where we initialize a vil, and the dense come condition and condition return only two res, true either false. And if it written false, then it stop executing and if it written true, then it's going to increment, otherwise decrement our value. And again, it's going to check the condition. DVI loop is pretty similar with that. In Dv loop, after initialize the value, it's not going to check the condition. First, it's going to execute the p statement, and then it come to the condition. And then second time, it's going to check the condition. First time, it's going to print this statement, from second time, it's going to check the condition, and you need to remember it. This is the main difference between do il loop and oil. Now, let's see the syntic, how we can type do loop in Jas. Here you can see, we have a variable name A and we assign one value. Then I start do. At first, you need to type. Then you need to use car brass. Then outside the calibraces, you need to type il Q. And then inside the round brass, you need to set your condition. In do, we need to use the condition end of this loop. Do means run, and means until the condition is true. And inside the round brass, we need to pass our document statement. In our case, hello. First time, it's going to print this statement without check the condition. And then we need to increment and decrement this loop. From second time, it's going to check the condition, and then continuously run the same loop up to ten time because here we pass t to make it more clear, let's start the practical. As you can see side by side, I open my se studio code editor and my browser using Live Saver extension, and I already create a estil document name index dot ATML. So at first, I'm going to initialize a variable. Here I'm going to type and our variable name is A, A assign one, assemgal to NS line. Then I'm going to start our Do il. And now I'm going to type D. Go inside the car ss, at first, I'm going to type a document. Document dot write inside the round ss, I'm going to print a statement, which is hello world. Semicon to in this line. Before I use the increment and decrement, first, I'm going to call the loo. Here, I'm going to type y. Y inside the round brass, A less than equal to ten. At first, we initialize a. This is our first state, and then we set a condition. This is our second state, and now we need to use increment and decrement. Here I'm going to type A is equal to A plus one sem to in this line. Also, I'm going to add B a tag after hello world. So to type B R. If I set this file, now you can see it print hello over ten time. As I told you earlier, you can use short form of this increment. Let me show you. Some comment out this line. You can use a plus plus sine. As I told you earlier, this operatory is used for increment. Every time it's going to add one with this variable. So I I set this file, as you can see is sit in the same result. As you can see, it's pretty similar with le. But the main difference is first time it's not going to check the condition. And it's going to execute this documented write function. Let's prove it. So I'm going to change the initialized well. Here I'm going to pass tinting. As you can see, now the condition written falls. If I set this file, as you can see, it print hello word one time. Because as I told you, first time, it's not going to check the condition. That's why it's going to execute this recommended function. But if you use only loop, in that case, it's not going to print any statement. If the condition written false, it's not going to print any state. So I hope now it's clear for you. What is the usage of do? Most of the time we use it, when do we need to run a code block one time. And also, I want to repeat it as long as the condition is true. 29. JavaScript For Loop Tutorial: Hello, guys, good to see you back. Once again, I'm back with a new tutorial related JavaScript. In this tutorial, we're going to learn JavaScript for room. Already know that in Java straight, we have total five type of blues. I loop, do loop, four loop, for loop, for each loop, and we already learn about i loop and do loop. In this two real, we are going to learn foo. Let's see the syntax, how we can type four loop in Java squad. To create four loop, first, we need to type four keyword. Then inside the round ss, at first, we need to initialize a variable. Then we need to check the condition. After that, we need to implement, otherwise decrement our v. As you can see, we use this three important step in a single line. As you can see, we cover three stages at once, Initialization, condition, and increment. And if the conion written true, then it's going to print this statement. Most of the developer use four loop as compared i loop and do op because our work is done in one line. Let's start the practical and see how we can use it. As as you can see, we already created estimL document named Index doot estimL, and also I o paint my browser using Live Server extension. At first, I'm going to type four Keyword because we don't need to initialize any variable before follow. Here I'm going to type four. Now I'm going to initialize a value inside the round ss, V A equal to one. Then subcon to end this line. Then I'm going to set a condition. A less than equal to ten, and subcor to end this line. After that, I'm going to increment the V. Here, I'm going to type A plus plus. Then inside the car ss, I'm going to type our document statement. Document dot right inside the round ress, I'm going to print hello world. Hello world. Also, I'm going to use a BA tag for break the line. Then we're going to end this line. If I set this file, as you can see, it print hello ten time. It's also work like other loops. But you have to write less number of lines here. As you can see, just in a two lines, we get the same result. Now I'm going to explain you, what is the working mechanism of this loop. As you can see, when we run the four room, first, it's going to initalize the variable. In our case, A assign with one. Then it's going to check the condition. As you can see, now, A is less than ten. A means, condition written true. If the condition written true, then it's going to execute the document statement, and then you jump into the increment section at one with previous value. Then again, it's going to check the condition, and if the condition is true, again, it pin this document statement. Until the condition return falls, equal to run the loo. When value become bigger than ten, then equal to stop executing loop. This is the work poses of foo. So watching this video, stay tuned for our next radio. 30. JavaScript Break & Continue Statement Tutorial: Tus UV guys once again, I'm back with a new tutorial related JavaScript. In this tutorial, we're going to learn Javascript, break and continuous statement. Let's start the practical and see how we can use it. As you can see side by side, I open my visa Sudio code editor and my browser using Lib Server extension, and I open my previous tutorial file index dot aten. For this example, I don't want to print this statement. I want to print numbers. For that, I type number. Then double cos. After double cores, I'm going to pass our variable. For that, we need to use concatation sign. Last. A our variable me is A. Again, I'm going to use concatnion sign. Next, we need to use another double code. I want to print a variable value ten time. If I set this file, it's going to print number with stream. Number one, number two, number three, number four, and it print up to number ten. Because we set a condition to run our loop ten time. Now I'm going to show you how can we use continue and break? Suppose inside the four loop, I'm going to use P condition. H n type if inside the round proces am pass A equal to equal to three. If a variable value become three, then I set the cases, I'm going to print a document statement. For that, I'm going to copy this statement, and I'm going to paste it here, and I'm going to do some changes in this statement. I'm going to replace number with hello. If I set this file, as you can see, after print, number one, number two, it print hello three. But the problem is it's also print number three. I don't want to print this statement, number three. I want to replace it only with Hallow three. I don't want to print this line. For that, we can use L part, otherwise, we can use continuous statement. Here I'm going to type continue. The 72 in this line. If I set this file, now you can see, as you can see, this number, do not repeat. After print hello three, it directly jump into the number four. After run the loop, first, it's going to check the condition. If A value equal with three, then it's going to print this statement. Otherwise, it's going to jump into this statement. And when Avalo become three, then it is print hello three, and then you get continuous statement. It means continue the loot. This continuous statement always work with loots. Similarly, we have opposite statement of continue, which is break. I'm going to comment out this line, and I'm going to use break statement here. Break. As in this line. If I set this file, it's going to break our loop a print hello three. Let me show you. If I set this file, as you can see, it stop after print hello three. Break mean, stop executing loop. The break and continuous statements are the only Javascript statements that can jump out of a code block, and the continuous statement can only be used to keep one loop iteration, and the break statement can only be used to jump out of a loop. This is the usage of break and continuous statement. Caspar watching this video, stat une for our next two. 31. JavaScript Find Even & Odd Numbers with Loops: Good to see you guys once again I'm back with a new tutorial related JavaScript. In this tutorial, we're going to learn how we can find even and ODS number using JavaScript. To extract ord and even numbers, we're going to use loops, P conditions, et cetera. I mean, what we learn in our previous tutorials, we're going to apply it here. I don't going to teach you any new statement in this tutorial. It's a exercise. Without wasting your time, let's start the practical. As you can see, side by side, I open my viso too code editor and my browser using Lib Server extension, and I already created a este and document name Index dot et, now I want to extract all the event numbers 1-20. For that, I'm going to use four. Here I'm going to type four instead the round brass, I'm going to initialize a variable, and our variable m is A, A assign with one, then scum two n d, and then we need to create the condition. A less than equal to 20, and then we need to increment our variable A plus plus. Then inside the calibraces, I'm going to extract even number using P condition. Now the question is, what is even number? A number which is divisible by two and generates a remainder of zero, is called even number. Suppose if I divide six p two, in that case, there is no reminder, it's written zero. But if I divide seven with two, in that case, it's written one reminder. Seven is not even number, but six is even number. Let's create the program for even number. Here I'm going to type if instead the round resis, I'm going to create a condition. A modulus two equal to equal to zero. As you know, modulus always written remind. Then in set the Cal ss, I'm going to print a document statement. Do dot right inside the round ss, I'm going to print a variable v. Plus in set the double code, I'm going to use B a tag for new line. The smog to in this line. According to condition, if I divide a variable value every time with two, and if it's render value return zero, in that case, print this document. If I set this file, you can see the result in my browser. As you can see, it print all the event numbers 1-20, two, four, six, eight, ten, 12, foe, 16, 18 20. These numbers are divisible by Here you can see using four loop and ep condition, how we can extract even numbers. We can easily do simple calculation through this. If you want to see all the odd numbers, in that case, just you need to change the condition. Here, I'm going to use not equal to zero, not equal to zero, A reminded two, not equal to zero. If I set this file, now you can see all the odd numbers 1-20, one, three, five, 79 111-315-1719. These are very basic example. We're going to learn this example in our upcoming total also. Thanks for watching this video, state une for our next tu. 32. JavaScript Nested Loop Tutorial: With good perce guys, once again, I'm back with a new tutorial related Java script. In this tutorial, we're going to learn Java script nested loop. Nastate loops are nothing new. It's a different way to write a loot. In our previous tutorials, we learn about how can we use loops? First, we need to initialize a value, then we need to set a condition, and at last, we need to implement or decrement our value. But in nest group, we are going to use another loop inside this loop. I want to say a loop inside a loop. We call this process nested loop. As you can see, inside this outer loop, we have another inner loop, and we can print any statement inside it. Also you can use another loop inside this loop. It's up to you how many loop you want to use. You can use any kind of loop, for loop, loop, do loop, et. Without wasting your time, let's start the practical, how you can use it. As you can see, side by side, I open my visor studio code editor and my browser using Live Server extension, and I already create estil document named index dot estimL. At first, I'm going to create a outer fold. For inside the round process, I need to initialize a V, where I Assn w zero, semicon to in this line. Then after Semorn, we need to set the condition, and I want to run this loop three time. Her type i less than equal to two. Our initial value is zero, that's why we need to pass two. Then need to increment the loop. I plus us, every time I want to increment the loop with one value. Then inside the calices, I'm going to print a document statement. Document dot write inside the round races, I'm going to print underscore first level. Then we're going to end this line. If I set this file, as you can see it print our cotal three time, and Also I'm going to use a B a tag to break it down. B R. As you can see, this is our outer layer, and in our outer layer, we print Ctal three statement. Now inside this fool, I'm going to create another follow. Here I'm going to tie inset the undress, this time, I'm going to initialize another, J as with zero. Again we need to set a condition. J, less than equal to three. Because I want to print four statement inside this loop. That's why I use three, s con. I to increment this lo, j plus. Then inside the css. Again, I'm going to print a document statement. Document dot right inside the round ress I'm going to print underscore underscore second vel loo. We're going to end this line. Also, we need to use B a tag. H type B R. If I set this file, as you can see, every time inside the first level loop, we print total four second level loop statement. This is the basic usage of nested loop. I hope now it's clear for you how we can use it. Now, let me show you some examples why we can use nested loops. You can see is three structure. This structure is very useful to understand nested loops. As you can see, we have total fib row in this structure, and in our first row, we always print one. In our second row, we always print two. As you can see, our columns start with one. In our first row, we have one column. In our second row, we have two columns. In our third row, we have three column, and in our fourth row, we have total four column. In our five, we have to five column. Row is our outer root, and column is our inner here, we need to create total fibro. For row, I'm going to use variable A. For column, I'm going to use variable B. At first, we need to create row for our fibro. To print five rows, we need to use four. First, we initialize this variable value with one. Then we set a condition, and it's less than equal to five. Basically, this loop going to create this five row. Then we need to jump into the inner loop section. Here you can notice every time the column start with one and end with the row number. For row number three is n with three, for row number four is n with four, for row number five, is n with five, for that, we need to start a loop from one, equal to one. As you can see, it's n with the row number. That's why we need to set this condition. B less than equal to A. I mean every time the outer loop run, it's going to send the A value in this loop. I set this inner loop, to print this structure, we need to print the B variable. To make it more clear, list the practical. As you can see, once again, I'm back to my Visual studio cod tor. I'm going to comment all of this line. And then I'm going to create another f to create this structure. Her type for inset the round brass, and I'm going to initialize the variable. A equal to one, and after semicolon on to set the condition, and I want to run this loop fy because p f A less than equal to five. Then after smcor, we need to increment this loop, A plus plus. Then inside this four loop, we need to create the inner loop section. Here, I'm going to create a four. For inside the round ss, this time, I'm going to take another variable, which is B, B assign with one. Then after semicolon, we need to set the condition. But this time, we need to call the A variable to create the condition. B less than equal to A. After secular, we need to increment the variable, B plus p. This loop going to print the columns. As I told you, our column end with the room number. That's why we need to pass a variable here. Now we need to print the v value inside the inner room. Here I'm going to type document dot right inside the round ss, I'm going to type B. With that, also I'm going to print a space. Plus inside the double code, I'm going to provide a space. Now we need to break the line after every row. Let me show you, if I set this file, as you can see, again I did a typing mistake. Here we need to use less than equal to sign. This sign, not the greater than equal. If I set this file, now you can see it print all the row in a single line. To resolve it outside the inner, we need to print a BR statement. Here to type document dot right inside the round press, I'm going to use a BA tag. B R. If I set this file, now you can see this structure. Here, you can see it print our structure perfectly. We have total fib rows, and also according to the row number, we have total similar columns. This is the one example of nested row. If you want to increase the structure size, yes, you can. You need to change the number here. Hm pass, t. If you set this file, you can see the result. Every time the increment value of this outer loot, send to the inner loot, and then it's going to create columns according to the condition. I hope now it's clear for you how it's w. Now, let's talk about our next example. In this example, you can see also total fibro. But the column value is different. Similarly, to create it, we need to take outer loot. For inner loop, we need to take B variable. But if you notice, you can see every time our columns start with different number. For our first row, it start with one. For second row, it start with two, or third row, it start with three. Just you need to focus on starting with, not every way. It started with the row number. That's why this time we need to print a variable value. Let's start the practical. Here, I'm going to duplicate this line and comment out PVS one. I'm going to pass a variable. If I set this file, now you can see the result. Let's reduce the condition value to make it clear. File. If I set this file, now you can see. Every time column will start with the row number. Now, let's talk about our third example. In this example, as you can see, also, we have total five rows. But the differences, we reverse the structure. In our first column, we have total five value, and it start with five, then four, then three, then two, then one. To create this structure, at first, we need to initialize our outer loop variable with five. I want to say, how many row we one, we need total five. That's why we initialize our value with five. Then we need to set the condition. This time, we need to set opposite condition, A, greater than equal to one. As you can see, our initial value is greater than condition value, that's why we need to decrement the loop. So you need to pass a minus minus, and then just we need to print the value in our second loop. Let's start the practical and see how it's w. Again, I'm in my visa studio codaor. This time, I'm going to assign a equal to five. Also, I'm going to change the condition. A greater than equal to one. And then we need to decrement the A minus minus. If I set this file, now you can see this structure. Basically, we just opposite the loop to create this structure, nothing else. I hope nerves learn for you, what is the usage of nested? Without nested loop, we cannot imagine a proper functioning web page in modern day. This is very important to understand nested loop. It's a very important one. Cans watching this video, state une for our next. 33. JavaScript Arrays : Hello, guys, this is the first tutorial related JavaScript array. I know you are already familiar with JavaScript datatype, string data type, number data type, bullion array object null. But A is one of the most important data types in Java script. So let's try to understand what is A. As you can see, how do we create a variable, X, X, assigned with 15. In this variable, we save only one varie. I want to save multiple value in a variable. And if you try to add multiple value using coma, then in that case, it's going to reach an arrow. Otherwise, if you use the one codes, in that case, it's going to convert this variable into string. Then we cannot use this value for mathematical calculation. Now the all the character become one string value. To resolve this kind of problem, Java script introduce array. To declare an array, first, you need to take variable. Then inset the square reces you need to pass the values, and tween values, you need to use coma. I set this array, you can pass multiple value as much as you want. Remember, these values are different v. Now the question is how we can access different value using one variable. For that, you need to follow some special technique. Let me show you. We can access the values using their index number. And remember, our index number start with zero, zero, one, two. These are all index numbers. Suppose you want to excess the third value of this array. For that, you need to use the index number two. And to excess the value, also, we have some special method. So let's start the practical and see how we can use it. As you can see, side by side, I open my visa sudo code editor and my browser using Light Server extension, and I already create an estimL document named index dot ATM. St first, I'm going to create a variable. There and our variable me is AR i. ARY means. You can take any variable me. Then instead of the square verses, I'm going to pass some values. And here, I'm going to pass some numeric values, ten, 15, 20. There's a more value, 25, 30, and then after, I'm going to use S coder. And now I want to print this variable in my document. Here I'm going to type document dot right and set the rounders, I'm going to print this array. H type A R Y. T sub to end this line. If I set this file, you can see the result in my browser. Let's increase the browser size to vis tier. As you can see, it print all the variables from this, and now you want to print one particular value from this array. You want to print second index V. For that, after variable M, you need to use square verses, and I want to print index number two. As I told you earlier, our array starts from zero index zero, one and two. So hundred plus two. If I set this file, now you can see it print 20. And if I pass any index number which is not exist in this array, in that case, let me show you hundred plus ten. As you can see, we don't have ten value in this list. If I set this file, now you can see it print undefined because no values exist in this index number. That's why it's written undefined. And now you want to print all the value again. But in this time, you want to print all the value in a different line. You don't want to print this value at a single line. For that, we need to use four. Here I'm going to use four. Here, I'm going to tie four. Inside the und press at first, I'm going to initialize a value. A, A an with zero, y zero because our array start from zero index. That's why I use zero. So we start our loop from z, and now we need to create the condition. H type A less than equal to four. Now the question is why I use four? Because our last index number is four. That's why I use four. Then after Scoln we need to increment this v, A plus p, and Is the crass, here I'm going to pet a document statement. Document But right, it's the round ss, I'm going to call the array. R. If I print only this statement, it's going to print our whole array five time. But I don't want to print our complete array five t. I want to print their values. That's why here, I'm going to use square ses again, and I'm going to pass a variable. A. Every time when it increment the value, it's going to pass the value here, and it's going to print the index number. With that, also I'm going to add a break to break the line. After Cctnation sign, I'm going to tie and set the double es B. So if I set this file, you can see the rest. First it print in, then 15, 20, 25, and 30. So as you can see, these values are print different line. And also, you can insert this value into a UL tag, otherwise, LI tag. Let me show you. Before the follow, I'm going to take UL tag. So I'm going to type document dot right. I set the round recess and set the double codes, I'm going to take L tag. That's a middle to end this line. With that, also we need to close this tag. I'm going to copy this line, and after follow, I'm going to paste it here, and here I'm going to use closing tag. And for our list item, I'm going to take LI tag in at the forum. Here is at the double codes, I'm going to take LI tag, L. And then I'm going to use concatenation sign. Also, we need to end the LI tag after B a tag. So I'm going to copy the LI tag from this place. And here after Bertag, I'm going to use concatenation sign again. And then I'm going to call the LI tag, and I'm going to close it. If I sat this file, as you can see in my browser, these are all list item now. And now you decide you want to addition all these array values and return the total. For that, you need to take a variable that, and our variable name is S. S assigned with zero. There's a two in this line. Then inside the fo, I'm going to call the variable S. S equal to some plus, and I want to add su with this array veil. Every time it's add a new value to the old value and over at the il. Then outside the loop, after el tag, I'm going to pre in this sum. So an type document, dot write, inside the round races, I'm going to call the variable. Sum. Then semicon to this line. Then outside the calibraces, we need to call this variable. Here I'm going to type document dot write inside the round ss, inside the double es, I'm going to print total. Then colon. After quotation, I'm going to use concation sm. Here, I'm going to call the variable. O variable is some. And sem column two in this line. If I set this file, as you can see, spin D total. The total is 100. If you add this f number, you're going to return 100. Remember, also, you can take string value, an value, Null. Let me show you. Here, I'm going to add a stream. I'm going to add a name, add one. With that, here I'm going to pass a an value. Cro Also, I'm going to pass a null Null. Before I set this file, Harry you can see, we use different data types. That's why it's not going to add the number. So I'm going to comment out this line. Also I'm going to comment out this line, which is in my forum. After I set this file, as you can see, it print all the value in our list items, and the datatype is different. Now it's clear for you, you can use Mixed data type also because their index is different. That's why you can use Mixed datatype. Just you need to remember it, our arrays start from zero index. In our upcoming fora, we're going to learn more about arrays. Thanks for watching this video, state. 34. JavaScript Create Arrays Method II Tutorial: Y, good to see you guys once again, I'm back with a new tutorial related array. In this tutorial, we're going to learn how we can create array in different method. In our previous tutorial, you learned how we can create array and how we can print. At first, we need to initialize a variable, then instead the square ases, we need to pass the value and between value, we need to use coma. When we were creating array, at the same time, we were also adding values. But the situation is, I know the variable then, but I don't have the values. We don't know how much value can be in this array, but I want to declare this variable as an array. For that, we need to follow this math. We need to use this keyword, for x equal to new array. It's means it's going to assign this empty to this variable. We can call it constructor method. Using it, we can create array. Otherwise, we can pass values. If you want to pass values in this array, for that, there is a special method. Let's see the practical and learn the special method, how we can pass new values to this array. As you can see, side by side, I open my is Studio code Eder and my browser using Lp Server extension, and I open my previous estable document. If you notice you can see, we have already five value in our array, and it's contain newer value, string value, Null value, also a an value. Here, I'm going to show you a new process to create an array. I want to tie new array, new array. Then I'm going to use round races. I'm going to move the value inside the round races. Copy, and I paste it here, and I remove our old values. There's to end this line. If I set this file, as you can see, it's also worked perfectly. Suppose for now we don't have any values in our a. I'm going to remove all the values. If I set this file, as you can see, it's create an empty array, and also it print undefined in my browser. Now I want to add some value in this empty array. For that, we need to call this variable array. Then inside the square ress we need to pass the index number. At zero index, I want to add a new le, and our value is a numeric 12. That's going to end this line, and I'm going to duplicate this line two. In our first index, I'm going to add a string w. H I'm going to pass a N at one. And in our second index, he I'm going to pass the bleen True. If I set this file, as you can see, it's worked perfectly. In our zeroth index, it add. In our first index, it ad add one. In our second index, it add two. But again, I'm going to pig this line. But this time here I want to pass fourth index, fourth index and pass number. 20. What if I set this file? If I set this file, as you can see, at our fourth index, it print 20, but at our third index, it print undefined. Using this method, we can scape particular index number. But also you can specify some space to this ary. Suppose if I pass four, it's mean it's going to create four empty index for this array. If I set this file, as you can see it's worked perfectly. This value will not interfere with this array value. He you can see, we pass static value s, and I'm going to comment out this. But I want to pass value through an by the user. I want to get value from the use. For that, I'm going to use another fall. Let me show F and inside the round ress I'm going to initialize the variable. The g four get data equal to z. As you know, our array starts from zero index, that's why I pass zero, and then we need to set the condition. Hm type zero less than three. With that, we need to increment the val. G p l plus. This means this going to take three value from the user. Then inside the ss, and here I'm going to call our array variable. Array, inside the square ss, I'm going to pass v equal to, and now I want to get data from the user. For that, I'm going to use pron box, we already learned about pron box in our previous t h. Here, I'm going to type prompt. Inside the round ss, inside the double es, amo type, enter the v. Then con and sem to n this line. After this file, if I reload my page, every time he's going to ask enter wave through a prompt box. As you can see, according to the condition, or Rob going to run for three time. Also I'm going to pass a value three. Test this file, as you can see, enter the, and here I'm going to pass a new 23. Then I'm going to press. Again, it enter the. Here I'm going to pass a string, and I'm going to pass at one. Again, I'm going to press, and as a last value, I'm going to pass 50. A numeric value. If I press, as you can see in my browser, it's print 23, add one, and 50. We dynamically get data from the user and print in our browser. But we run our print five time. That's why it print two time undefined. To remove this unnecessary undefined, just you need to change the condition. Hair need to pass two. Again, you need to set this file and reload this browser and you need to pass values one by one. Let me show you. If I set this file, as you can see, hair you need to pass the values, or first value is 23. Hair I'm going to pass 23, or second value is add one. And our third view is 15. If I press, as you can see, now I sprint only three statement, 23, and one and 15. I hope now the concept is clear for you. Thanks for watching this video, Stay tuned for our next total. 35. Introduction Multidimensional Arrays: Good to see you guys once again I back with a new tutorial related Javascript. In this tutorial, we're going to learn multidimensional array. In our previous tutorial, we'll learn how we can create arrays. With that, also we learn new array method. As you know, we can put multiple values in an array. But as you can see, there is no relation between this v. But when we work with actual project, in that case, our data is related to each other. Something like that. Harry you can see a student data. Student name, student age, student gender, student class. As you can see Tom, and his age is 70, he is male, and he is in bachelor class. As you can see, all these data in this row related to Tom, similarly for Harry Si and Sara. To handle this kind of data, Java step introduce multi dimensional array. It's means inside a array, we have multiple arrays. If we want to convert this structure into a multi dimensional array, first, you need to take a array. Then inside the array, you need to take four different array as in value. Let me show you the syntax, how we can convert this s structure into a multi dimensional array. As you can see, at first, we need to assign a variable. Then at first, you need to take square bases like this. Then instead the square basis for every table row, we need to create different array. As you can see, inside this array, we have total four values. As you can see, this is our inner square basis, and this is our outer square basis. Between inner square bases, we need to use coma. As I told you in our previous tutorium, every value in an array comes with an index number. And the similar method also work for multi dimensional arrays. As you can see in our outer array, we have total four. Remember, it starts with zero index number, not one. Also you can see, we have total four value in inner array, name, age, gender, and class. Similarly, this array also start from zero index, not one. So let's start the practical and see how we can create multidimensional array in JavaScript. As you can see, side by side, I open my visa Sudio code editor and my browser using Light server extension, and I already created an estimate document named Index dot estimate. So first, set the script tag, I'm going to declare a variable, and our variable is Ary equal to At first, I'm going to take square verses port outer array. Then inset the square resis, I'm going to take four inner array. Again, I'm going to take square ***. After square resis, I'm going to use forma. After outer square ***, I'm going to use semicolon to end this line. Now, in set this inner array, I'm going to put total four w. At first, I'm going to pass a string, and I'm going to pass student name. O student name is Harry. Then I'm going to pass student age 19. Also, I'm going to pass student gender, male. Next, I'm going to pass student class. P is B comm. And then I'm going to get this line. Here I'm going to put next details, which is Tom. And he is 17-year-old, and he's also male. He reading BCA, not H tom, only Tom. Again, I'm going to bet this line. O last is Sonny. Here, I'm going to pass S. S is 16-years-old, and she is a female. And she studied in plus ten. For now, I don't want to add many students. I want to remove the last coma. As you can see, we successfully create our multi dimensional array. Now the question is, how can we print multi dimensional array value? Simply we can call particular array using their index number. Let me show you. Here I'm going to type document dot right, I set the round ress at first, I'm going to call this array, r. Then inset the square ress, I want to print this, all the details from Tom. Here I'm going to pass one because ray start with zero index. This is zero, and this is one, and sub to end this line. If I set this file, as you can see in a browser, it print Tm comma, 17, male and is from BCA. Now I don't want to print all the details from Tom. I want to print Tom name. For that, again, we need to use square ***. Inside the square brass, we need to pass name index number, which is zero. This is our outer array index number at this is our inner array index number. If I set this file, now you can see it is paint on the Tom. Similarly, if you want to print Tom ender, in that case, you need to pass two here. If I set this file, as you can see it print M. Similarly, if you want to print, Harry HH, in that case, at first, in our outer index array, we need to pass zero, and in our inner index array, we need to pass zero. If I set this file, as you can see it print the name, Harry. This is it for this teal. In this tutorial, I just introduce you what is multi dimensional array, and how we can create multi dimensional array in JOS. Here, also you learn how we can access particular value of multidimensional array. This is it for the sural. In our upcoming tutorial, I'm going to show you how can we use multi dimensional array with nested loops. Thanks for watching this video, state une for Ox total. 36. Multidimensional Arrays with nested : Hello, guys, good to see you back. Once again, I'm back with the new tutorial. In this tutorial, we are going to learn how we can use multidimensional array with nested. At first, we need to create outer. I'm going to remove this line, and here, I'm going to tie 44. Four, at the rounder says, I'm going to initialize the V. A, a saluit, zero. As you can see, we have total four value in our array. I add another student in this least add one. I'm going to create a condition A less than four. Then we need to remain this variable. A, last plus. Then inside the round ss, before I create the nastic, I'm going to print on the arrays. Here I'm going to type document dot, right, inside the round ss, I'm going to call a variable array. Is the square recess, I'm going to call the vari, A. Then I'm going to use a concatnate sign, and here, I'm going to use a brake tag for new line. B. I sub to end this slide. If I set this file, as you can see in my browser, sprint all the student details. Harry Tom Sonny Edward. Remember, this is our outer. He you can see, there is a coma between this wheel, but I don't want any coma between wheels. For that, we need to use nested fare. Here, I'm going to type F inside the round ses, we need to initialize a variable. That B, B an with zero, the color. Now we need to set a condition. As you can see inside our inner y, we have total four. Here I'm going to type B, less than four. There is a in this line. I need to plement the v variable. B plus. Then I want to move this line inside the css. At first, I'm going to remove this brick tag. Then inside the square ress I'm going to call B variable. Then outside the nested loop, I'm going to call brick tag. Document dot right. Is the round recess, inside the double codes, I'm going to call B a tag. If I set this file, as you can see, here you can see it reve up all the coma between the and to make it more clear, we need to provide a space. Here, in set the nested loop, I'm going to use congregnation site. Then I'm going to provide a space, and I'm going to set this file again. Now you can see it clearly. In this way, we can pret our multi dimensional array using nested. As you know, our first ses is for outer array values. And our second square ss is for inner array values, and we already learned about it in our previous torial. If you want to bring this data into a table format for that, you need to use some este tags. This is it for this tutorial. I hope now it's for you. What is multi dimensional array. Thanks for watching this video, state you. 37. JavaScript Modify & Delete Array Elements Tutorial : Hello, guys, good to see you back. Once again, I'm back with a new tutorial related Java script. In this tutorial, we're going to learn, how can we modify and delete array elements? In our previous tutorial, we'll learn how we can create arrays. Suppose by mistake you pass wrong age to the student, and now you want to modify this vue. Basically, you want to change one index number. For that, you need to take the variable m and then add a index number, and I need to assign a new w, and it's going to replace the value with the new heel. Let's start the practical. As you can see, side by side, I open my visa Studio code editor and my browser using Light server extension, and I already create estimate document name Index ord estimate. Here you can see a variable name Ay. Here you can see in our array, we have total four in, and it is a single dimensional array. At first, I want to change student name. For that, I'm going to reclar the variable y. Then inside the square process, I'm going to pass the index number, which is zero. Then assign it, inside the double codes. I'm going to put a union, which is hearing. I'm going to do in this line. Let's print the document in our browser. At first, I'm going to print the document without change. Here I'm going to type document. Dot right. Is the round ss Am pass the variable link, which is Ar. Then I'm going to duplicate this line. Now I'm going to move it down after the change. Let's set the file. As you can see in my browser, it changed the name of the student. Harry, let me add a BA tag to make it clear. I'm to use concatenation sign, then instead the doubles to use B tag. M B R, and set this file. Now it's clear for you. It's modify our student name perfectly. Now, let's talk about how we can delete A values. As you can see, we have proto four value in our array, but I want to delete one of this veil, but I want to delete one of this veil. To delete array values, we have predefined Q word in Java Script, which is delete. I'm going to comment out this line and then I'm going to type delete. Delete, then we need to call our able name ad. Instead the squaross, we need to pass the index number, and I want to delete at one. That's why I'm going to pass index number one. I sum going to end this lie. If I set this file, as you can see, now you can see in a dowser, it pint, spin student name, his gender, and his class, and it delete his age. But if you notice, you can see there is two coma. It's mean this delete QR just delete the value, not the index number. The index number still exist, but it removed the value only. So I hope now it's clear for you how it's work. In our upcoming 22 years, we are going to learn more about Ay. Thanks for watching this video stating. 38. JavaScript Array Sort & Reverse Tutorial : Hello, guys, good to see you back. Once again, I'm back with a new Tutorial ded Java step. In this Tutorial, we're going to learn Java strip A methyl. Let's see how many ray methods are there in Java strip. Hell you can see a list of a methyl. We have total 24 ray methods in there, and we are going to learn all about in in our accoming totterial. In this tutorial, we're going to learn short and reverse methyl. We can call it ray method otherwise array functions. As you can see, our first method is sort. Let's see, what can we do with this method? As you can see, site by site, UPN s studio code editor and my browser using Live Server extension, and I already created estimate doc name index dot atm. Here you can see, I set the script tag, we already create an array, and I set the array pit f, advance, me, ale and O li. Using short methode, we can short Vals Alphabetican. Let's change the wader of the student name. I'm going to move Smith first. Copy, delete, and before adv, I'm going to past it. I want to set this file. First, I'm going to paint this array without short. Here I'm going to type document, dot, write, the dress array. There's a gal to in this line. If I said this file, you can see in my brother, it's sprint, meat, adv al Oliver. As you can say, sloop water. Now we need to water by their name. If we use short method, then it's going to print the name, start with A, B, C, and D, like that way. Now I'm going to use short meth. But before I'm going to concatin it, a break, concatnate, inside the double code, B. Then in the next line. Here, I'm going to type our variable m. R dot. Now we can call our function, and our function name is short. Then double code. Then round brass. At round races, I'm going to use Se codon. Next, again, I'm going to call this statement, document statement. I'm going to copy this statement and paste after sale. If I sat this while, now you can see it's organized or name alpha vertically. First, it puts adv then Oliver ah and Sp. I hope now it's clear for you. What is the usage of short methyl? Now, let's talk about reverse method. Basically, reverse function play the role of opposite short function. So let's use it. So copy this line and comment out previous one. Hm to use ra dot reverse function. If I set this file, now you can see, it's reverse our student name order. First, it print Oliver, then print v, then print ad one, at last it print sway. It's reverse according to this list. But if I run short and reverse together, let me show you and they'll set this file. As you can see, now it start with the then O then A. To make it more clear, I'm going to print ather document statement. So copy the statement and prt after the show. Higacy, now it's more clear for you. At first, it short our least Alphabetically. Then it short our least reverse Alpha vertically. I hope now it's clear for him. Thanks for watching this video, state tune for our next tutorial. 39. JavaScript Array Pop & Push Tutorial : Hello, guys, good to see you back. Once again, I'm back with a new tutorial related Java strep. In this tutorial, we're going to learn Java strep, Pop and push method. These are all ra method. In our previous tutorial, we learn short and reverse method. In this turial, we're going to learn pop and push method. Here you can see an array. In this array, we have total three value add one, 16, and Bong. Now I want to tell last value from this array. For that, we need to use a special method, which is p, POP always target last value of an array. At the opposite way, we have another method name Push. Using this method, we can add a new value end of this array. Without wasting your time, let's study practical and see how we can use it. As you can see side by side, I open my visual studio code editor and my browser using Light Server extension, and I already created a estable document named index dot steven. Also, you can see inside our script tag, we create an array, and I our array, we have to four values. I also we paint this value in our document. Smith add one a Oliver. Now I want to delete last value from this array Oliver. Here I'm going to use pop function. I to type the variable N array dot pop. Then we need to use round bases because this is the function. Then smog to in this line. Again, I'm going to print the line. I copy the line and paste after pop function. If I set this file, you can see in my browser, you can see our first dopo statement print our complete arring. But our second doin statement print on three w. Smith add one and Rahul. I remove liver from this arr. Remember, it's always remove lst wh, and now I'm going to use push function. I'm going to comment out this line, and here I'm going to tie R A dot push. Then he set the round recess, we need to pass the value. Here you can pass any string value number value, what you one. Here I'm going to pass a string value. I'm going to type Curn. Then sem in this line. If I set this file, now you can see in our new list at the end of this list, it add Curn. Using Push method, you can add multiple value as one. It's going to add all the value, end of this lost value. I hope now pop and push method is clear for you. In our next tutorial, we're going to learn shaped and unshaped method. Thanks for watching this video, St tune for our next. 40. JavaScript Array Shift & Unshift Tutorial : To uv guys, once again, I'm back with a new Tutorial related Java step. In this tutorial, we're going to learn to other methods, shaped and unshaped. In our previous tutorial, we already learned short reverse pop and pose. In this total, we're going to cover this two methyl, shaped and unshap. Here you can see an array, and inside this array, we have total three value, nine H and education, and now you want to de it first value from this list. For that, you need to use shaped methyl. It is totally opposite version of pop method, which we learned in our previous tutorial. And if you want to add a new value in existing array, in that case, you need to use shape. It's going to add a new value start of this array. Let's start the practical and see how we can use this functions. As you can see side by side, I open my visas to new core and my browser using L live server extension, and I already created a est document named index dot STL. Also, you can see an array inside the script t and t four value inside this array. Now I want to remove first value from this array. For that, we need to use shaped method. Hm type array dot Ship. Then set this line. Again, I'm going to print this array in my document. Copy this line and paste after that. If I set this file, you can see the result. It's remove first value from the least. It remove over zero index value. Now it starts from Add one Role and Oliver. And in the opposite way, if you want to add a new value at zero index, in that case, you need to use unshad method. Let me show you. I'm going to comment out this line, and in the next line, I'm going to type A dot unsha Then inside the undress, we need to pass a V and here I'm going to pass common. As sag to end this line. If I set this file, you can see the result in my browser. Now our list start with Kamal. Add zero index, it assigned Kamal value. This is it for this tutorial. In our upcoming Tutorial, we are going to learn this two method, concat and Join. Thanks for watching this video, stay tuned for our next tutorial. 41. JavaScript Array Concat & Join Tutorial : Hello, guys, good to see you back. Once again, I'm back with a new Tutorial related Java scrip, and English tutorial, we're going to learn concrete and join function. In our previous tutorials, we'll learn all this array meth, short, reverse, pop po shaped unshaped, and English tutorial, we're going to cover concrete and join. Here you can see an array. Inside this array, we have total Advin Rahul and Aman. Similarly, we have another array. Inside this array, we have total two current and R V. Now you want to join this two array and return one array. You want to merge the two array. For that, we need to use concat methyl. Concat means concatenation. Can join two string otherwise to array using this function. Let's start the practical see, how we can use it. As you can see, side by side, I open my visa To code editor and my browser using Light server extension, and I already create a STML document named index dot atm. I set this script, you can see an array, and inset this array, we have total four var, Smith, Ad one, all and liver. Now I want to concatenate this array with another array. To concatenate with another array, we have some several different methods. Let me show you the first process. Here, I'm going to take another variable p equal to, and now I'm going to use our concatinate function. A dot concatenate. And inside the round braces, I'm going to pass to different name. Our first name is Ravi. Our second name is Kumar. Is the double es, C. The semicon two in this line, and now I'm going to print this new array in my document. Here I'm going to type document dot write document dot write, I set the Run brass, I'm going to pass or variable name. B, then score two in this line. If I set this file, you can see in my browser, print a new array. Here we directly concatenate with our existing array. This four value come from our first array, and this two value come from our second array. Basically, we merge this two array. Let me show you another way how we can use concatenate methyl. Some to comment out this line. Again, I'm going to use the same variable ame. B, and now I'm going to create an array. Instead the square ss, instead the double coats, I'm going to take same name Ravi. Our second name is Kumar. Then semign to end this line. Again, I'm going to concatenate this two array. But this time, we need to create another variable to concatenate. Here I'm going to create another variable. Our third variable m is C, C equal to rat concatenate function, con. Then instead the down process, we need to pass our second variable, mean our second array, B. I mean here we concatn, this array variable with this V variable. Both are the array. If I set this file and print this C variable in our document, let me show you Gentrit, C, and the set this file, as you can see, stat in the same result. Now C is a new array, which is made by two array, Ry and B. Not only that, we can merge multiple array at once. Let me show you. Again, I'm going to create another array, and our N is Z, and here I going to pass pneumatic v, 32, and 65. Now I want to merge three array at once. Just we need to use a coma after B. C. It's mean I want to merge this two array with this y. If I set this file, you can see the result. This is the usage of Ponkt function. I hope now it's clear for you. Now, let's talk about another array method, which is Join. As you can see, we have a variable and inside this variable, we have total three value. These are all different value, but you want to join all the value at once and convert into a stream. When you convert this value into a stream, you want to use Ds sign, otherwise, any sign between them. In that case, you need to use join function. It's going to convert your value into one single stream. Let's start the practical and see how we can use it. Again, I vector visa Studio codaor. At first, I'm going to comment out all of this line. Now I want to join all these value and convert into a string. For that, first, I'm going to take a variable. X, x equal to, now we need to use join function. R A, dot join. Then inside the round recess, we need to provide any character, otherwise, any sign, that can use as a separator between value. Here I'm going to use D sign as abcne in this line. Now I'm going to print this variable. Docen right x. If I set this file, you can see the result. Now it's no longer an array. Now it's a stream. Now it's a complete single stream. Between them, you can use any sign or any character. If you want to give a space, and set this file, as you can see, it provide a space between the value, but it is a complete single stream. You can use any sign between these values. For now, I'm going to use slash, and I'm going to set this file. Basically, join function convert array into a stream. This is the usage of join function. I hope now it's clear for you. Thanks for watching this video, state tuned for our next tori. 42. JavaScript Array Slice & Splice Tutorial : Hello, guys, good to see you back. Once again, I'm back with a new Tutoria of the related Java Script. In this Tutoria, we're going to learn lice and plis method. Hello you can see, we assign a variable and inside this ara, we have to three wheel, Ad one Ra and Aman. And now I want to extract Ren Amen from this array, and I want to create a new array. For that, we need to use a array method, name slice. Using this function, you can extract one, otherwise, multiple value from an array, and you can create a new array. In this function, we need to pass to two parameter. Start and n. I want to say starting index and n index. As we already know, we can excess A value to using their index number. According to this index, if we want to extract Raul Amen, for starting value, we need to pass one, and for n value, we need to pass two. Let's start the practical. How it's or. As you can see, side by side, I open my Visor Studio code editor and my browser using Live Server extension. I already created estimate documents named index dot estemN. And I said this script tag, we have an array. And I said this array, we have total four wheel, Smith, Ad one Raul and Oliver. Now from this array, I want to extract adv and Rahul, and I want to return a new array. Let me show you. So first, I'm going to assign a variable x, x equal to, and now I'm going to use the function, slice. For that, we need to call our y R dot, slice. Then inside the round ss, we need to pass through two parameter. We need to extract adv and role from this ic. This is our zero index, and this is our first index. Hrad pass our starting number one, this is our first index. And for end point, I'm going to pass three. Now the question is why pass three. As you can see, Round index number is two, not three, because to run this function, we need to add one with our lost value. I want to say if you want to return index number one and index number two, in that case, you need to start from index number one, but you need to pass three as an end point. So if I after Semicolon, if I set this file, and now I want to print our new a value in my document. For that, I'm going to type document dot right inside the round press, I'm going to pass x. Then semicon to end this line. If I set this file, you can see the result, I print ad one and raun. But if I pass only one, and they set this file, now you can see it print ad one Rule and Oliver. I mean it's going to create the new array from index one. Also we can pass negative value. Here, I'm going to pass minus one. If I set this file, now you can see it print Oliver only because we start our array from minus one index, and this is our minus one index, and after Oliver, there is no value. If I pass minus two, and they set this file, now you can see it print Rule and Oliver. This is minus one value, and this is minus two value. If we use minus value, it's worked from opposite direction. You can access value from opposite direction also. This is the usage of slice function in array. Now, let's talk about PLS function. What is the usage of PLS function? As you can see, there is an array. Inside this array, I want to put new other values. But I don't want to put this value at the start and at the. For that, we have already pushed a unshifted function. But I want to put those values between them. I want to put this value up to Raul and f Aman. For that, we need to use place function. In this function, we need to pass total three parameter, index, number of dates, and new value. We need to start from number two because I want to place it up to Rahul. In our first parameter, we need to pass two. Our next parameter is optional. This parameter is useful, if you want to delete this value, if you want to shrink this value, then you need to pass zero. Then in our third parameter, you need to pass the new lemon. There is another usage of this function. You can delete existing value using this function. Without wasting your time, let's start the practical and see how it's work. As you can see, set this Rt four value, and now I want to add to new value after ale. For that, we need to use PLs method. Ha type R A dot plies. Then you set the round ss, and before I pass the parameter, you need to remember. It's not going to create a new array. It's just going to modify this array. Here, after role I want to pass our value. Here, I'm going to pass three, and I don't want to delete item. After three, I'm going to pass zero, and then I'm going to pass to new value to this array. I set the double quotes, I'm type sm. And our second value is NA, a segun two in this line. Again, I'm going to print this array in my document. I'm going to copy this line and paste it after this function. If I set this file, you can see the result, and to make it clear, also, I'm going to use a break tag between them. Congregation sign inside the double codes, B R. If I set this file, now you can see the result. Here you can see after le, it add Smit ene and it move the liver forward. If you want to delete one value, you need to pass one here. If I set this file, now you can see, it remove Oliver from this ist. Also, we can pass minus. If I pass minus three, and also I'm going to make delete number zero. I set this file, now you can see, here you can see, it put Smith Neha after first value. To avert the confusion, I'm going to change the value name. Here I'm going to pass R V. If I set this file, you will see the result. Now, you don't want to add any value to this existing array, but you want to delete value from this existing array. For that, also, you can use this function. Let's duplicate this line and comment of previous one, and here I'm going to pass only two argument. Let me show you. I want to start from two, and also I want to delete two value 22. If I set this file, now you can see Sta only two value, Smith and add one. I hope nerves clear for you, what is the usage of price function? You can add new value. Also you can delete values. Thanks for watching this video, state tune for our next studio. 43. JavaScript isArray Tutorial : Hello, guys, good to see you back. Once again, I'm back with a neo Tutorial related Java screen. In this tutorial, we going to learn a new methyl related array. Our method name is is. We already cover all of this function in our previous tutorial, and in this tutorial, I cover this function, is A only. Total three variable, A, V and C. Also, you can see the datatypes. A is a, V is a number, and C is a stree. So you can recognize that data type very easily. But how can your program recognize that? Is it array or not? Suppose you want to set it condition. If variable is an array, in that case, you want to perform a code. Else, you want to run other to recognize it, we have a special function, which is is array. Let's see how we can use it practical. Harry you can see side by side, I open my visual studio code editor and my browser using Live Server extension, and I already create estim document name Index estim. Is at the script tag, you can see, we have an array. In this array, we have put four wheel, and I also print this array in my document. And now I want to check, is variable Ar y is A or no. For that, first, I'm going to create a variable. X, x equal to, and now we need to call the function. A dot is. I set the rounder says, we need to pass the variable A R y, then semgal on to n this line. This function always written true either falls. Let's bring the variable in my document. However type document dot right. Is the round process, I'm going to pass the v n x. Pn sub to this line. If I set this file, you can see the result. Is stritn prove. But if I change the data type, let me show you. So to preg this line and comment out previous line. Here I'm going to remove this array and I'm going to insert a pneumatic value, which is 55. If I set this file, now you can see it st falls. Now, let's use this method with a EP condition. For that, I'm going to remove the lines, and here I'm going to type I. Here I'm going to type I inside the round sis, A, dot, is there a function, inside the round races, I'm going to pass the variable name array. If the condition is true, then inside the ciss, I want to print a document statement. Document dot write inside the round ss, and I want to print, this is an array. In our s condition, I want to print s inside the cis, document dot right document dot, we inside the round brass, this is not an array. And also semicon to end this line. Let's set the file and see which statement it going to return. If I set this file, as you can see, sprint, this is not an array because as you can see, our variable data is number. But if I disable this line and uncomment this line and dist this file, as you can see now sprint, this is an array. Using this function, you can check this variable is array or not. Thanks for watching this video stat tune for our next tutorial. 44. JavaScript Array indexOf & lastIndexOf Tutorial: Hello, guys, good to see you back. Once again, I'm back with a new Tutorial related Java script. In this total, we're going to learn index of and last index of methyl. In our previous tutorial, we've already covered Even A meth and in this tutorial, I'm going to cover this index of and last index of. At first, let's try to understand what is index of methyl. Equal CN and our variable m is A, and we have total four value in this, add one, Rahul Amon and Raul again. And now you want to check Rams exist in your array or not. If exist, then return the index number. In our case, is going to return one. Be in our zeroth index, we have add one. In our first index, we have Rahul. In our second index, we have Amen and in our third index, we have again rail. You might confuse. We have total two similar wheels. Ra at index number one, ra at index number three, but the index of function always going to return the first result. In this function as a parameter, first, you need to pass the search key word. In our case, R. So DFL is going to return the first result. After returning the first result, it is not going to return the another result. But if we start our search result from Index two, in that case, is going to return this result Index three. Remember, in our first parameter, we need to pass the keyword and In our second parameter, we need to pass the index number from where we want to start. So without wasting your time, let's start the practical C, how it's w. As you can see, S P S, open my visa stdio code editor and my bows are using life Server extension, and I already create a STL document named index dot Atmel. Inside the script pack, as you can see, we have an array. Inside this array, we have total four w, Smith, Add one, Role and add one A, and we already print our array in our document. As you can see, we have add 12 time in our list. Let's see how index of method worked in this array. At fast, I'm going to create a variable X, X equal to A, dot index of method, index. Then inside the round braces, at first, I'm going to pass only one parameter. I'm going to pass only Q word at one. Then semar to end this line. Next, I'm going to print this x very well in my document. Here I'm type document right inside the rorass, x, and then smilar to end this line. Before set this file, here I'm going to use a B tag. I'm going to use concatenate sign inside the double codes, Br. If I set this file, you can see the result, it's written one because it's written the first result from this array, and the index number of this first result is one. Similarly, if you want to search another value, pass Rahul. Then I'm going to set this file. Now you can see it's written Index number two, and now I want to start our search qu from Index number two. Here I'm going to pass another parameter. Two. Also, I'm going to change the search keyword. This time, I'm going to search Smith. If I set this file, aqua c is going to return minus one. If this function do not find any value in that case, is going to return minus one. Let me prove you that. Here, I'm going to pass another value, which is not east in this list. I'm going to pass V. If I set this file, aqua, again need to return minus one, because we count from Index number two, that's why Smith keyword written minus one. Let's remove the keyword and here I'm going to type at one a. If I set this file, now you can see it's written index number three. As you can see, after index number two, it form the keyword. That's why it's written index number three. Just you need to remember, if the keyword is not available, in that case, it's going to return minus one, and if the keyword is available, in that case, it is going to return the index number, and using second parameter, we can select from where we want to start our s. I hope now it's clear for U, what is the usage of index of function. Now let's talk about our another method, which is last index of. The heregay is the same ara, I set this proto four value. This bathod is opposite of our previous method. It search results from opposite direction. If I search Rd is going to return index number three. Let's start the practical and see how it's work. Again, I'm going to search add one keyword, but I'm going to change the method name, which is last. Last index. Here, I'm going to remove our second parameter. I just want to search add one. If I set this file, hec written nothing because I did some syllmistic. We need to capitalize keyword. I last index. If I set this file, now you can see, it's written three because now it's going to search result from opposite direction, and it found adv keyword at index number three. Similarly, if I pass the second parameter, so here, again, I'm going to pass, again, I'm going to pass two here. If I set this file, now you can see is written index number one. Now it's going to search adv keyword before role keyword. That's why it ret index number one. This is the usage of this two function. Thanks for watching this video, state tuned for our next 22. 45. JavaScript Array Includes Method Tutorial: Hello, guys, good to see you back. Once again, I'm back with a new tutorial related Javascript y Math. In this tutorial, we're going to include Math. Here you can see array, which is story in a A variable. Inside this array, we have total three value add one, Rahul and Aman. Now I want to search a value from this array. In our case, Rahul. You want to check a whole value is exist in this array or not. For that, you can use, include function. Here you need to pass the search item keyword. Here you can search Alpha numeric data type, numeric data type, string, et cetera. It can search any type of value and this math returns and value through either fats. Without wasting your time, let's start the practical and see how it's. As you can see, side by side, I open my Visa studio code editor and my browser using Light Server extension, and I already create estimL document named index dot atm. Is this script, you can see an array. Inside this array, we have put all four Smith, Ad one ale and Ad one Again. Also, you can see, we print our document in this array. Now I want to find a name from this ar. For that, we need to use include method. At first, I'm going to create a variable. That X. X asinuD, A dot include function, R A, dot include. Then inset the round recess and inset the double course, I'm going to pass the keyword, which is add one. Then sub to end this line. Basically, I want to search, add one word exist in this array or not. Let's sprint the very well in our document. Her type document dot right, and set the round presses, I'm going to pass our very well takes, and sub to end this line. If I set this file, you can see the result. It's written t because add one is exist in our array. Similarly, if I pass a value which is not exist in this array, let me show you. Pass Rb. Then set this file. Now you can see it's written fals Remember this function is sensitive. Let me show you. Here I'm going to type Smith. But here I use small case four A. If I set this file, noc sytem falls again. But if I capitalize this S character, and then set this file, Noct. The function is case sensitive and always try to match the exact Q. Basically, we use this kind of a method with e conditions. According to result, we can perform any program. I hope No include method. Thanks for watching this video, state tune for our next to. 46. JavaScript Array Some & Every Methods Tutorial : Hello, guys, good to see you back. Once again, I'm back with a new Tutorial real tate Javascript. In this tutorial, we're going to learn some and every math. Here you can see a variable name age. Instead this variable, we have total four, 18, 13, 21, and ten. Now you want to check adult value from this list. As you can see, 18 and 21 is adult, but you want to check on the values, Is it adult or not? Suppose you create a variable and assign the adult value, which is 18, and now you want to extract which value is equal to 18, otherwise, greater than 18. For that, you can run follow. Instead this folue, you can use P conditions. But it's a quite a lengthy process. But in array, we have a simple solution, which is S. Through this function, you can check the result. But before we need to create a function to get this value, and we need to pass the function in the sum method. For every value of this array, it's going to run this sum function. This function always return ban value through either false. If any of the value match with the condition it is going to return true, otherwise, it's going to return false. So without wasting your time, let's start the practical. As you can see side by side, I open my visas to your code editor and my browser using Live Server extension, and I already created estel document name index dot estemL. As you can see inside the script tag, we have a variable He array, and total four value in this array, and I already print this value in my document, and now I want to check all the value in a condition. For that, I'm going to create a variable x equal to, and Here I'm going to call sum function. H is dot S As I told you earlier, it's going to return only one wheel to either fall. But for that, we need to pass a condition inside this sum function. I'm going to create a function. But before I'm going to call the function name inside this function, and our function name is adult. Let's go to end this line. If I set this soil, it's not going to work. With that, I want to print the result in my document. Here I'm want to type document dot right inside the down ses, I want to print our variable, which is x. On getting into it, I set the doubles, I want to use a B a ta or break the line. Again, seg to in this line. Now I'm going to create the function. Here I'm to type function que function, and our function is adult. Then inside the round races, I'm going to pass only one parameter H. Next, inside the crass, and now I want to return either false value from this function. For that, here I'm going to use written, return. Return, and I'm going to use comparison operator. H greater than equal two, and our number is 18, and the s two in this line. At first, this sum function going to check all the value from this list. As an argument, it's going to pass all the value one by one in the adult function. According to the condition, adult function going to return the result to either fall. If one of the single value pass the test is going to return. Without wasting your time, let's take fin and see what happened. As you can see, it's been true because 19 is greater than 18. Also, if I remove 19, and convert it into 16 and then set this file also it ren true because 22 is greater than 18. But if I change the value, 11 and thens up this file, now you can see it return false. But if I pass 18, as you can see, it return true. Because if any of the value match with this condition, it's always going to return true. Remember, if you want to use some function with A, you need to create a another function because this function as an argument, it's going to take function. Now, let's talk about every function. Every function also pretty similar with that. Here I'm going to duplicate this line and comment of previous one, and I'm going to type every. This function return true if all the value match with this condition, otherwise, it's going to return false. If I set this file, as you can see, it's written false because without 18, all the value do not match with this condition. That's why it's written false. But if I increase the value, let me show you 22. 9021. If I set this vile, now you can see it's written. This function also going to check all the value one by one. But if any of the value do not match with this condition, it's going to return false here. But in our previous method, if one of the value match with this condition, in that case, is going to return true. This is the basic difference between some and every function. I hope now it's clear for you. Thanks for watching this video state une for our next review. 47. JavaScript Array find & findIndex Tutorial : Good to see you guys, once again, I'm back with a new tutorial related JavaScript array methods. In this tutorial, we're going to learn two new methods, A find and find index. Here you can see an array name. Inside this array, we have four, 18, 13, 21, and ten. Now I want to search result based on the condition. I want to search a value which is equal to 18, otherwise, gater than 18. I create a variable and assign a v, which is 18. Then we need to create a function and inside this function, we need to create a condition. As like our previous tutorial. This method also pretty similar with our previous method. But in our previous method, it treated ban value true either four. But if we use find method, in that case, it's going to return the V, it's going to return the first value, which match with this condition. According to this array, it's going to return our first value 80 because it's matched with the condition, and it ignore all the values. But if our first value do not match the condition, in that case, it's going to return 21. This is the usage of fine method. Now, let's talk about fine index method. This method is also similar with fine method. But the difference is it return the index number from this ara, not the V. Fine method always written, but fine index method written the index number, which is zero. Without wasting your time, let's start the practical and see how it's w. As usual, we open our Visual Studio code editor and my browser using Light Sever extension, and I already create a esten document named index dot stem. As you can see it at this script tab we have an array, and we have total four value in this array. As you can see, how we use our previous torial function, adult. This function going to compare the array values one by one. As you know, to execute this methode, we need to create a variable. I create a variable x, x equal to as dot, and our first method name is fine. Fine. Then inside the round press, we need to pass the function name, which is adult. Let's set the file and see what it written. If I set this file, as you can see, it's written 19. It's written the exact value, which is matched with this condition. This is the usage of fine method. It's always written the first value, which is matched with the condition. Let's talk about our another method, which is find index. Here, I'm going to type find index. If I say this file, now you can see it's written two, but the question is, why? As I told you earlier, find index method always written the index number. As you can see at Index number two, we have 19. That's why it's written two. I hope now it's clear for you. What is the usage of Find and find index method. Thanks for watching this video, state tune for our next tvio. 48. JavaScript Array Filter Tutorial : Hello, guys, good to see you back. Once again, I'm back with a new tutorial related Java Script array method. In this torial, we're going to learn array filter. As you can see in our array, we have total four value, 18, 13, 21, and t. Now I want to search value according to conditions, and I want to extract those value who are in 18, otherwise, greater than 18. For that, we need to create a condition inside a function, and we need to pass the function inside this filter method, and it's going to return a new array, whose A is 18, otherwise, greater than 18. Without wasting your time, let's start the practical and see how we can use this method. As you can see, side by side, open vis studio code editor and my browser using Lf sever extension, and I already created eTEM document name Index ATML. As you can see inside the script tag, we already have an array. Also we have total four value in this array, 14, 17, 19, and 15. Also, I'm going to change one of the value from this array. Hm ta 22, I'm going to set this file. As you can see, we already have a function for condition adult, and I use this function many more time in our previous ttfels. Now, let's use the function with this. He is dot filter, and at the round press, we need to pass the function, which is adult. And I say this file, as you can see in a browser, as you can see is written in new ara. According to condition, 19 and 22 is greater than 18. That's why it st this two value. In our previous method, it's written one value, otherwise index number. But using filter method, we can return all this value, which is matched with this condition. I hope nets for you, what is the usage of filter function? Thanks for watching this video, stay tuned for our next sural. 49. JavaScript Array toString, valueOf & fill Methods : Go to Zu Ba guys again ab with a new tutorial related JavaScript array method. In this tutorial, we are going to learn two string method value up method and fill math. As you can see Hazon array. Inside this array, we have to t three value Aman add one and Rahul. Now I want to convert this array into a string. For that, we need to use a function name two string. It is used to convert existing array into a stream. After converting it into a string, we cannot apply any other array methods in it. Without resting your time let's study practical and see how we can use it. As usual, sideway side, we open our Vs sudo code editor and my browser using Live Server extension, and I already created an St and com name in dot Stel array. As you can see inside this script tag, we have an array, X, and we'll have to tal four value inside this array. Add one Rahul Arab Ravi If you want to convert this array into a string for that, you need to type our variable name X dot, and we need to use our metal, two string two string. And then I'm going to print this variable in my document. Here I'm going to type document dot right and I set this down masses, I'm going to pass our variable in x. If I set this file, as you can see, it's in the result. Now, our variable become a string, not an array. Now we cannot apply any array method to this variable. Let's talk about our another method, which is Vu. ValueO is not a very important method. It's a deft method. Using it, we can print our array value in our document. That's it. We can do the same thing using document dot write function. This is not a very important one. Now, let's talk about our third function, which is fil. As you can see inside this array, we have to three different veil. But if you want to fill the places with a static value, in that case, you can use this function. This function going to replace all the value with a static veil, and it return a new array filled with static veil. Let's start the practical C, how we can use this method. Now I want to replace all the value with a single world. As I told you, for that, we need to use fill method. I'm going to duplicate this line and comment out previous one, and Here I'm going to tie x dot, fill. Then in set the round press, here I pass Smith. If I set this file, as you can see, it replaces our value with a static keyword, Smith. I hope now it's clear for you, what is the usage of the methods? This is eight for this tutorial. Thanks for watching this video, state une for our next. 50. JavaScript forEach Loop Tutorial : Good to see you guys. Once again, I'm back with a new tutorial related Java. In this tutorial, we're going to learn for each loop. In our previous tutorial, we already learned, we have to five loop in Java C, Wilk to ilopop, FH loop, and foreign loo. And I already cover i loop to loop and for loop in our previous tutorials. In this tutorial, we're going to cover Forage loop. As I told you earlier, forage loop work with arrays, and foreign loop work with objects. As you can see, we have an array. Inside this array, we have total three v, Amon add one and a Ho. Now I want to print all the values one by one. Also you can perform other function with that. For that, our array provide in build method, which is fora. This method runs for every value from this ary. If you want to print something, otherwise, if you want to do anything, in that case, you can pass a function inside this forum. Here you can create your own function, otherwise, you can use in functions, and then you can print any statement, whatever you want. Now you might think we can do the same thing using for. Yes, we can, but it's bitl NV process. For that, we need to initialize a variable. Then we need to get the n. Next, we need to set the condition to run the loo. We need to do a lot of stuff for four. But here, you don't need to take any variable, and you can normally print any statement using four. W wasting your time, let's start the practical and C, how so. As you can see side by side, I open my Visa studio code editor and my browser using light server extension, and I already created STL document named index dot STL. Inside this script tag, we have an array. Inside this A, we have total four ve add one Raul Alaba. Now I want to print all this value using for e. For that, here, I'm going to type X dot for each. For each. Then inside the round resis, we need to create a function. Here I'm going to type function keywor Function, round ss and crass. Inside the crass, we can type our statement. For every value, it's going to run our for each low, and we need to sort the value in a variable. Inside the round resis, I'm going to take a variable. Now I'm going to print the value inside the car sis. Here I'm going to type document dot. Is the round recess well. Then sem two in this line. Also, I'm going to add a BA tag with that. Ha type, I say the double des, R. Let's set the file and see, but we get. If I set this file, you can see the result. On by one, it print all the name, add one role. Also, we can print their index with that. Here I'm going to take another variable, and I'm going to take variable N index. After break tag, I'm going to use congregation sign. Then I set the tower codes, I'm going to use colon. After colon, again, I'm going to use a congregational sign. Here I'm going to pass our index. If I set this file, you can see the result. I did a symistic. We need to use the BA tag after index. I'm going to cut this portion, and per index, I'm going to paste it. If I set this file, you can see the result. At one index is zero, R index is one, RNA index is two, and RV index is three. Without taking any extra variable and without get lan, we can print their value and their index number. On most important thing. As you can see, we create the function inside the forage, but we can create the same function outside the forage. Let me show you. So I'm going to cut this portion and outside the forage, I'm going to past it. Here, I'm going to take a name for this function, and our function name is loop. And I'm going to call this loop function inside this forge loop. Hm to type look. If I set this file, you can see the result. As you can see its word perfectly. One by one, we'll cover all the A method. This is for this tutorial. Ste even for our upcoming tutorial. Thanks for watching this video. 51. JavaScript Objects Tutorial : Hello, guys, good to see you back. Once again, I'm back with a new tutorial realtd Java script. In this tutorial, we're going to learn Java script objects. In our previous tutorials, we'll learn about, how array made, and how array works. As you can see, inset the square press, we can pass multiple values and we can access them to using their index number. But in this tutorial, we're going to talk about objects. Object is quite similar to an array, but it quite advanced and updated. Object follow key value pair technique. Object made with properties and V. As you can see, we create an object, X, and to create an object, we need to use cases. But for array, we need to use square ses. In arrays, just, we need to pass values. But in objects, we can create property names. As you can see, first name add one, last name means, He 80, country India. If we compare object with ras, object is more well defined. Basically, you need to remember object made with, property and values. Before column, we need to type the property name. After colon, we need to type the values, and we can store any type of value in objects. We can store a function in our object. Also, we can store a array in our object. With that, we can store another object inside an object. These are the most strong point of an object. Without wasting your time, let's study practical and C, how so? As you can see, side by side, I open my visor studio code editor and my browser using Live Server extension, and I already created a estable document name index dot at. At first, inside the script tag, I'm going to create an object. Her type A equal to inside the car ss. Then inside the curve ss, I'm going to take our first property name, which is first name, fname, F name. Then after colon, we need to take the value, and the value is add one. After create first property and value, we need to use coma to create another property and value, and our next property is name. Colon and the value is g. Our next property is. Hm type, H. H is a numeric value. That's why we don't need the whole cos. Hm p 21 only. Our last property is Zener. Ender Ml. I successfully create our object. For now, we just use four properties. Now I'm going to print this object using document dot write method. Hm type document dot right, is that the round ress our object name, A, There two in this line. If I set this file, as you can see, is print object object. It do not print our object data in my browser. But if you want to excess this object in my console, let me show you. Here I'm type console dot log I set the round process or object A. Please suegro in this line. If I set this file, now you can see in my console, we successfully excess this object. And if I open the dot section, as you can see, 21, S Name add one, ender M, M Ming. If you notice you can see, it alphabetically short our properties. If we try to print the whole object using documented right function, in that case, it's always going to print object and object. But if you want to excess one of the value, yes, you can. I want to excess fname property. For that, we need to type our object name A dot fname. If I set this file, now you can see the name, add one. We can excess any value using the property name. Now I want to store a array inside this object. For that, again, we need to use another coma. After that, also, hero we need to take a property name, and our property name is programming language. Her type, P, underscore Lang. Then after colon, as you know, to create an array, we need to use square ***. Then you set the square ***, I'm going to pass some programming language name. Our first programming language name is Python. And our same programming language name is Java. With that, also, I'm going to take another programming language name, which is PHP, and Seve two in this line. If I set this file, as you can see in my console, we have another dp down option, P language, and in s and t and tal three value inside this array. That's why it's print three. If I try to open it, as you can see, at index number zero, we have Python, Index number one, Java, index number two, pH, and also it print the array length in my console three. If you want to print this array in your document, yes, you can. You need to type P underscore n. If I set this file, you can see the A P Python Java S&P. As I told you, inside an object, we can store anything. We can store A, we can store functions. We can store another object inside an object. Not only that, if you want to excess one of the value from this array, yes, you can just you need to use square ss and inside the square ses, you need to pass you need to pass the index number. Hm pas one. If I set this file, as you can see, is print Java only. Now, let's insert a function into this object, and our function name is fame. Her type, full name. Then after coolant, now you need to use a function cure function. As usual, we need to use round ss. Then he said the color ss, I'm going to return a statement. Hm type, return. And in my written statement, I want to concatenate first name with last name. Here I'm going to type F name. F name, and I'm going to use congregation sign. Between congregation sign, I want to provide a space. Then again, I'm going to use a congregation sign and our last name. Name. Then sore two in this line. If I call this function and set this file, it's not going to work, let me show you. A dot, full name. If I set this file, and then we need to use round bases because it's a function. If I set this file, as you can see, it's through an arrow. F name is not defined. But we have the property names in our object. As you can see, we already define fname in our object. Why this function cannot read this property? Because there is a special method to excess object property name in a function, which is this. Let me show you. Here we need to type this dot fname. Also, we need to pass this dot name. If I set this file, as you can see, now it's worked perfectly, it's print full name and one mech. Now the question is, what is the meaning of this keyword? This mean the object. The object we work with. Here we call this do fname means, it's mean I want to excess this objects fname property. We need to follow the special technique to excess objects property in functions. And remember, the function inside an object is called method. As you can see, we can put. Also we can put function inside an object. Now I'm going to put another object inside an object. Let me show you. After H, I'm going to take another property name and our property name is addres adds colon, and here I'm going to use cases. Inside the Cass, our first property name is CT. Inside the do course, I'm going to type C. F value, I'm going to take cat. After that, we need to use coma. Also, I'm going to take country name Country. Country, India. After cars, here we need to use a coma. As you can see, inside an object, we create another object. Let's see how we can access this nested object. Now, let's try to print this object in our document. For that, I'm going to remove this function. And Ham types, A dot or object names. Again, we need to use another dot, and I want to access this CT. H to pass CN. If I set this file, as you can see, its print or sitting in Kolkata. If I show you my console, as you can see, prototype of address is object. This is it for this tutorial. We're going to learn more about it in our upcoming tutorial. Thanks for watching this video, stay tuned for our next Tutorial. 52. JavaScript Objects Tutorial II: Sub guys, once again, I'm back with a new Tutorial related Javascript object. In our previous tutorial, we already learn what is object, and how can we create objects? Also, we learn how can we print in our console and our document. But in this tutorial, we are going to learn how we can create object with different method. Without wasting your time, let's start. In our new method to create an object first, we need to assign a variable as like A, then we need to use a Q word, which is new object. How do not assign any value to this object, but it create a empty object. Later, we can store value whenever we want. To store value in this object, we need to tie, first, we need to tie object name. Then we need to use dot. Next we need to pass the property name. In our case, first name. Then after Colon, we need to pass the value add one. Similarly for last name, we need to pass another value Mach. Let's start the practical and see how we can create it. As you can see side by side, I open my visual dio code editor and my browser using let server extension, and I already create estL document name index dot STML. To create an object, first, I'm going to take a variable. Variable m is where person, equal to deinit to use new keyed, new new object. The em to end this line. The benefit of using this method is we can store value later on it. Let's add some property and value to this object. First, I'm going to insert first name. Her type person dot first name equal to assert the double codes d one. Then sem two n this line. Then I'm going to beg this line and Hm type name. Last name, Ming. With that, I want to pass another property value. So duplicate this line again and metro type person dot H. A is a numeric value, so I don't need doubles, 22. And now I'm going to print this person object in my document. Let me show you. Mo type console dot log inside the round press or object name person. The se two N this line. If I set this file, you can see in my console section, it print our object. He first name, last name. If you want to print any value in your document, yes, you can. For that, as you know, just when you type, document dot right at the round ss, to pass object name, person dot last name. If I set this file, a can is print meg. This is the most popular and useful method to create an object. Let me tell you one thing. Also, you can use square ss to as v. Here you can remove sin, and also you can use square ss. Square ss, Inside the square recess into type this name inside the double os. Copy the name and here inside the double quotes, I'm going to paste it again. If I set this file, Harry you can see it is sten the same result. This is it for this tutorial. In our upcoming Tutorials, we're going to learn about more. Thanks for watching this video, Statue. 53. JavaScript Array of Objects Tutorial : Hello, guys, good to see you back. Once again, I'm back with a new tutorial related Java script. In our previous tutorial, we've already learned how we can create objects. How can we insert an array inside this object? But in this tutorial, we are going to perform the opposite. Here we are going to insert object inside an array. Here you can see a blank variable named students, and it's T y. If I insert some object inside this array, we can call it Javascript array of objects. As you can see, we put total three object inside this array. We have toll two property name and age. Without wasting your time, let's study practical and see how we can use this arr. As you can see side by side, I open my Visa Studio code editor and my browser using Light Sever extension, and I already create an STL document named index dot STL. At first, I'm going to take a variable for an array that and our M is student. Students equal to, now it's an empty array, se two in this line. Now I want to put some different objects inside this array. Here I'm going to take car ases. Inside the car ases, I'm going to take our first property name. O property name is a name, and our value is add. Add born. Between themed to COVA and our second property name is A. And H 23. As you know, H is a nearic. That's why we don't need to take the comes. As you know, we need to use coma between array varies. I'm going to bigt this line. Now I'm going to insert our next ten name, which is Rah. Hm type Rahul, and his age is 20. Again, I'm going to ublate this line. But this time, I'm going to remove the coma because this is our last v, and our last name is Sm He is 22-years-old, and now I want to print this array in my console. Here I'm going to type. Here I'm going to type console dot log instead the undress or variable, which is student. A sub two in this line. If I set this file, you can see the result. As you can see, we have total three object in our array, and the objects are allocated in a differing index number. Now I'm going to show you how can we print it using a room? For that, I'm going to use a four. Here, I'm going to type four, then inside the round process, first, we need to initialize a variable A assign with zero, H e zero because our arrays start with zero index, and then we need to set a condition. A, less then student dot student dot length function. N. Using length attribute, we can extract n. Also, you can see the length property in this array, length three, tensory colon. Now we need to increment this array, A p. Next, inside the css, I'm going to type document right inside the round recess, student Here I'm going to use square verses because it's an arr. Inside the square verses, we need to pass the variable name, which is A. Then I'm going to use dot, and I want to print name from these objects. Here to pass dot name. After that, we need to use a BA tag. Here I'm going to use concretion sign and inside the double cos, I use a B tag. And Samgor in this line. If I set this file, now you can see in my browser, if I zoom it a little bit, here you can see it's print all the name from these objects at one row and speed. If you want to print their age, just interchange the property name. Age. If I set this file, you can see the 23, 2022. In our previous tutorial, we'll learn how we can put arrays inside an object. But in this tutorial, we learn how we can put objects inside an array. This is it for this tutorial. Thanks for watching this video, St tune for our next to reel. 54. JavaScript Const Variable with Array & Objects : Hello, guys, good to see you back. Last I'm back with a new Tutorial related JavaScript. In this tutorial, we're going to learn Java script cost variable with RA and objects. How we can use cosed variable with RA and object. Let's start the practical. As you can see, side by side, I open my Visa Studio code edited and my browser using Live Server extension, and I already created STEL document name index dot HTML. In our sixth tutorial, we've already learned how we can use late and cost variables. In this tutorial, we're going to learn how we can use constant variable with array and objects. Let's create a variable using const keyword. Here I'm going to type const. Cons and our variable name is A A equal to, and here I'm going to assign a numeric 19. The semicu two in this line. Also, I'm going to print this variable in my console. Hm tie console dot log inset the round dress, our variable m A, and semicu in this line. If I set this file, I show you my console, as you can see, is print 19. But if I try to reassign the value, let me show you our variable m A equal to 30. Smog to end this line. If I set this file, now you can see, it's written arrow because we cannot change existing value in cost variable. Suppose we work with an array, and we need to reassign a new ve. Let's create an array. Instead the square ***, I'm going to pass total 31267 and 88. Now I want to over this array with a new array. Here I'm going to pass another array. Here I'm going to create another array, and here I'm going to pass 20, 30, 40. If I set this file, as you can see, it's sen and error again because we cannot reassign new value to cost variable, but we can update ra index one by one. Let me show you. Suppose I want to update 67 to 69. I'm going to remove this one and m type 69. And after the variable, we need to use square brass, and we need to pass the index number and the index number is one. If I set this file, you can see the result. You can see in my console section, we successfully update our array index using this method. Now, let's see how we can use cons variable with objects. I want to remove square bass and here I'm going to take Clirass. Inside the C brass, I'm going to take two property. Name a one. Our next property is H H 21. That's why we need to put in inside the double cops. For now, I'm going to comment out this line. If I set this file, you can see the result in my Conson. If you want to update this object, in that case, you need to type object name A, the property name, which is H, H equal to 33, and sub to end this line. If I set this file, you can see the result. The conclusion is you cannot update the whole object at once. You can update one by one value if you use cost variable. This is it for this tutorial. Thanks for watching this video, Stun for our next tutorial. 55. JavaScript For in Loop Tutorial : 130 Hello, good to see you. Once again, I'm back with a new tutorial related Java clip. In this tutorial, we are going to learn foreign loop. In our previous tutorials, we already learned we have total five type of loops in Java clip, loop, doop, for loop, *** loop, and foreign loop, and we've already covered this four loop in our previous tutorial. In this tutorial, I'm going to cover foreign loop. This loop is specially used for objects. Let's see the example how we can print objects without glue. Suppose this is an object, and our object name is A, and total three property and value in this object, first name, last name, and H. Now you want to print all this value without using a loop. For that, every time you need to type the same statement for first name, for last name and for age. To print this whole object, you need to run the same statement three times to resolve this standard problem, Java Strip introduced for in group. First, you need to type four key word then in set the down braces, you need to assign a variable. In our case, I. Now the question is why we need to take the variable? Because we need to store every value of this object in this variable. And then we need to use in K word. After that, we need to pass the object name. In our case, A, then inside the calirass, you can pass your statement. This loop going to run every properties of this object. At first, this loop will run for first name, then last name and then H, and to time, it's going to start the value in variable. Without testing your time, let's start the practical and C, how it s. As you can see, side by side, I open my visa studio code editor and my browser using Live Server extension, and I already create estL document NP index dot HTML. At first, I'm going to create an object. Here I'm going to type or and our object name is Pj. Equal to, is at the calibrass, or first property name is first name. First name is at the double es add one. Then we need to use coma. I wanted to pick this line, and I to type last name. Last name, Mg. And then we're going to take another property, which is H. H 23. Now I want to bring this object using foreign. I have to tie four inside the round brass. At first, we need to take a variable, and our variable is k. This variable going to store the value of this property, and then we need to use in k word in or object name, OBJ. Now I want to print every value of an object in my document. For that, inside the ss, we need to type document dot write, inside the round resis or object name, Bj. Then inside the square recess, we need to pass the key. Key. With that, I'm going to contin B a tag because I don't want to print it in a single line. That's why I use B a tag. Inside the double course, I'm going to pass Br. A sucroon to end this line. If I set this soil, you can see in my browser, it print, add one, then print mange and then print his H 2023. With that, if you want to print the property name, yes, you can. Let me show. Here type key. Then I'm going to use concatenation sign. Then I'm going to use double codes. I said the double code, I'm going to pass colon. Again, I'm going to use another concatenation sign. If I set this file, now you can see in my browser is print property name and V. I hope now it's clear for you how we can handle Tons property and value of an object. This is it for this Teal. Thanks for watching this video Stune for our next Tal. 56. JavaScript Map Method Tutorial : Is good to see you back. Once again I'm back with a new Tutorial related Java script. In this tutorial, we're going to learn Java script, Map method. This method work with arrays. Also this method worked like a loop like F forgo, but there is a different between map method and loo. Let me show you. Let me show you an example to identify the difference. Are you can see, we say different numeric value in this variable. Now I don't want to change the existing array, but I want to multiply t with all these values, and I want to return a new array like this, 103-050-7090. Here we will see, all the values are multiply with ten. To achieve this, we can use a special function, which is map function. It doesn't change the existing array, but you can perform your function, otherwise calculation for every value. As a result, it's going to return a new array. Now, let me show you the syntex, how we can write map function. Inside this map function, you need to create a function. Then inside the colerass, you can print your own statement. Otherwise, you can perform any calculation to all of these values. Without wasting your time, let's start the practical and see how we can use it. As you can see, side by side, I open my visa Studio code editor and my browser using Live Server extension, and I already created an estemL document index dot atm. Now I'm going to create an array inside the script tag. He Imo type V and our nyms A y equal two, inside the square ss, I'm going to pass some numeric Vo, which is 911 and seven. And semicon to this line. Now I want to multiply all the values within. Also, I want to return a new array after multiplication. Now I'm going to take another variable x. We need this variable to store our new array. H tie RA R Y dot map function. Map. Inside the rounrass, we need to pass that function. But before we need to create the function. Hm tie function, and our function m is taste. Now inside the calibraces, we need to create a calculation that's going to multiply all the values with t. But before we need to start the value in this function. For that, we need to pass an argument, and I'm going to take a variable for that, which is A. Then inside the calibraces, amount type, return, return A multiply with ten. The sebace in this line. Now we need to pass the function name inside this map function. Here Amon to type taste, and Sege two in this line. Also, I want to print the new array in my go. Here I'm going to type document dot right inside the round press. I'm going to pass the variable limp, which is x, and s2n this line. Let's set the file and see what happened. If I set this file, as you can see in my browser, it print 90, 110, and 70. Without changing existing array, we can perform any calculation to all the array values using map function. Now, let me show you another example how we can use map function with array of object. I'm going to uplicate this line and comment out previous one. Inside the square ***, I'm going to create multiple obj. I remove all the values, and here I want to take cars. Is the cases, our first property name is fname. Fname stands for first name, then colon, then colon, and the Vu is add one. C O next property and value is m. N stands for last name, and the Vu is mean. And here we need to use a comma, and also we need to take another two object. I do begin this line two time. Here I want to pass first name Ravi uma. Ravi uma. For the last name, I'm going to take Erne Erne Ry. Now I want to extract all the first name from this object. For that, we can use Map Method AG and which is pretty useful for this situation. For that, just need to tie A dot SN. If I set this file, now you can see in my browser, it print all the first name from our object. Add one, Rab and rno. Also, if you want to print the last name, just to pass M here. If I set this file, you can see the res Mancha and Roy. If you want to print both the value at once, for that, you need to use concatenation sign. Plus, I'm going to use double cores for space. After that, again, we need to use congregational sign, and we need to pass at me, and here I want to pass at Aname. If I set this file, you can see the result, I print, Advan Mage, Rabi Kumar, and Obro. This is the usage of Map function. It's very helpful with arrays. This is it for this tutorial. In our next tutorial, we're going to learn string maths. Thanks for watching this video, state tuned for our next Tutorial. 57. JavaScript String Methods Tutorial Part 1 : Hello, guys, good to see you back. Once again, I'm back with a new Tutorial related Java script string method. These are the all string methods that I'm going to cover in this tutorial series. Remember, without length, all our string methods. Length is a property. Let's start the practical and see all the string methods one by one. As usual, we create our estable document and we also open our browser using Light server extension. At first, in set the script tag, I'm going to create, I'm going to take a variable, and our variable means STR. STR means straight. As you know for string data types, we need to use quotation. Here, I'm going to use double cores. Inside the double cores, I'm going to type, Java script is a great language. There's second to in this line, and now I'm going to apply all the different property and methods in this string. At first, I'm going to apply the length property. For that, I'm going to take another variable A equal to, and now I want to extract the string length. We've already worked with length function with s. It's pretty similar with that. Hanam type str dot length. The sebacon to end this line. Also, we need to bring this variable in my document. Hm type document dot right inside the round ss or variable limb, A, and Sebace end this line. If I set the soil, you can see the result. The total length of the string is 30. Remember, this function also come in this space as a character. Using this property, we can extract how many character we use in this string. Now we are going to learn this two meth, two lowercase, and two uppercase. For that, I'm going to duplicate this line and comment out previous one. Here I'm going to tie a s dot two lower case, two lower case. Also we need to use round bases because it's a methyl. If you use method or function, we need to use round grass. But if we use property, then we don't need to use round graces. If I set this file, as you can see, it's convert all the character into a small case. Here you can see LG and J was capital, but it convert into small case. This function convert character into lower case. Also you have opposite function. For that, I'm going to duplicate this line again and comment out biggest one. O next function is two uppercase. I'm going to remove this one and here I tie T uppercase. If I set this file, you can see the result. It convert all the characters into uppercase. This function convert all the letters into a capital letter. Next, we're going to learn another new method, which is includes. This function is used for search purpose. If the function get the character or the word, it's going to return to otherwise falls. Let's jump into the isudio coor. Again, we are back to a isudio codor, and now I want to search the great word from the stream. For that, we need to use include function. He I'm going to t this line. And comment out pus one. Now I'm going to use include function. Str dot includes. Inside the round recess, we need to pass the keyword. Great. If I set this file, as you can say, it's sten two. If the word otherwise character available in this stream, is going to return two. But if I search a character which is not available in this stream, let me show you. Suppose I'm going to type x y. I set this file, now you can see it st falls. Remember, this function is sensitive. If you typed in capital, This at this file, also, you can see it written falls. Here you need to pass the exact character, otherwise word in this function. Now, let's jump into our next two functions. Now let's jump into our next methos. Our next two method is start with at end width. Start with function use f. If your string start with the matching characters, then it's going to return true. Otherwise, it's going to return false. At the opposite way, end with. If your string end with matching character, in that case, is going to return true. Otherwise, it's going to return false. Let's back to the Vs studio code and try it. Again, I'm going to duplicate this line and comment out previous one, and I'm going to start our function with start with. Here I'm going to type start with. Start with. If I copy the Javascript word from this sentence, and paste it at the double quotes, I set this file, as you can see, it's sten cru. But if I pass, es here, and then set this file, as you can see nos falls. Because our strings start with Java word, that's why it sten fas. At the opposite way, end with function work. If I dep get this line and commit out previous one, and arm to pass ends. If I pass great hair, and this at this file, as you can see, it's written form, because our string do not end with this great world, it's end with language. If I pass language here, and set this file, now you can see Sten true. This is the usage of start with and n with method. Now let's talk about our next method, which is search. It is also work like include function, but there's a difference. This method do not return true either false fit. It's written the exact position of these characters. I want to say it's written the index number. Let's go to the Visa studio code and see how it's work. Again, I'm going to wet this line and comment out previously. H I type str dot Search. And I want to search this word language. If I set this file, as you can see, it's written the index number. It's written the starting index number of this word, which is 22. But what, if the character is not available in the string, then let me show you. H type word. If I set this file, as you can see, now it's writ minus one. If this function do not get the Q word, in that case, is always written minus u minus one. Now, let's talk about the last function for this tutorial. Our last function for this tutorial is match. This function also used for searching purpose, but there is a difference. This function return. If the search caracter repeat in your string, then this function collect all the results and return it as an array. Let's back to the Vis studio codator and see how it's w. Again, I'm going to depict this line and comment out previous one. Her type, match str match. As you can see, already a de changes in my string. I add another is er grad. Now I want to match is Q word from this string. H remove this word, and now we need to use regular expression. Don't worry, we're going to learn about regular expression in our advance section. Whatever we need to search in regular expression, we need to place it between double slash sign. Inside the double slash, we need to pass the keyword, which is e, and I want to serve this keyword globally. We need to pass a command, which is G. It's mean again and again, it's going to find this keyword inside this string. With that, also it's going to collect the all the result and written in array. If I set this file, as you can see, it's written, it's written in array. You need to remember, we need to use it with a regular expression, and this match function always written array. This is it for this tutorial. In our upcoming tutorial, we're going to cover the remaining string methods. Thanks for watching this video, state tune for our next tutorial. 58. JavaScript String Methods Tutorial Part 2 : Hello, guys, good to see you back. Again, I'm back with another Tutorial ted Java Skip string method. In our previous tutorial, we cover this seven method and one property. In this tutorial, we're going to cover these methods. Without wasting your time, let's start the practical and see how it's w. As you can see, side by side, I open my Visa Studio code editor and my browser using Live Server extension, and I already created an STL document index dot stable. Also we have a stree. JavaScript is a great language. I use this example in our previous studio, so I'm going to make it correct now. JavaScript is a great language. Now, let's start with a new methode, which is Index. This index of function pretty similar with search function. Here I'm going to type STR, dot index. Then he set the un press, and you set the double codes, I'm going to provide the search squary, which is great. And sem to end this line. If I set this file, as you can see, it's written 16. It provide the first index number of this. If you want to search result from opposite direction, we have another function, which is last index. Hm ty Last index. Also, I'm going to change this sar squared. So I'm going to copy Java squad and I'm going to paste it inside the double code. If I set this file, as you can see, is 100. As I told you, this function carts result for opposite direction. If I pass only one character, which is g, and then set this file, as you can see is 28, because it's this character index number from this string. But if I change the character G, G two zight, and then set this file. Now you can see son 25. Means this character index number. Basically, I want to say it's w from opposite direction. Now, let's jump into the next method, which is replace. Using this method, we can replace particular word or a character with another character. Let's see how it's so. So first, I'm going to bicate this line and comment out previous one. Here I'm going to use replace function. I remove last index of, and I'm going to type replace. In this method, we need to pass through our two parameters. First, you need to provide which character or word you want to replace. I want to replace great. Copy the word and paste it inside the double coop. In your next parameter, you need to pass your new keyword. Here I'm going to pass good. If I set this file and print this in my document, as you can see, Dt stream, Java slip is a good language. This is how you can use replace map. Let's talk about our next map. Refo I'm going to duplicate this line and comment out previous one. Now, let's talk about our next function, which istream. This method is used to remove extra spaces from lab side and the right side. Let's see how we can use it. For this example, I'm going to duplicate this line and comment out previous one. From here, I'm going to remove great language. Also, I'm going to provide some space after Java Strip and before Javas. If I set this file, you cannot see the difference. It's just print Java sp. It do not provide any space before and up. But if I print it in my Alert box, let me show you. Hermon type Alert is the round ss or variable STR. Then sub go onto this line. If I set this file, now you can see it provides space before Java strip and after Java. To remove the spaces, we can use stream function. For that, just need to use the function, which is trim. STA dot trim. Also you need to use round prices because it's the method. Then I'm going to print in my alert this variable A because we stored this string in this variable A. If I set this file, now you can see the alert box, but it removed this pieces before a up. This is the usage of this method. Now let's talk about our next method. But before I'm going to remove this alert box and duplicate this line and comment out previously. Remember, this function is specially used in input form. Because sometimes we need to remove the extra spaces from the input. Our next method is character ad. In this method, we need to define a position. According to the position, it's written the character from the string. Let's start the practical and see how it solved. H to type character ad. Here, I'm going to define a position for one character. Here I'm going to pass six. If I set this file, as you can see, it's ton r. Remember, our index start from zero. That's why it's ton r. But if I pass a begin number, which is not available in the string, something 500, and then set this style, as you can see, never stain nothing. If the character is available at this position, only this time it is going to return the character. Otherwise, it's going to return blank. Our next two methods are character coded and from character code. These methods are related to each other. This character returns sky code. Otherwise, if you provide any sky code, it's going to return a character. But before we need to understand what is sky code. As you can see, this is the t of Ay code characters. Behind the every character of keyboard, there is a unicode. You can search Ayode in Google and it's going to retain a table like that. Behind the every character of Keybot, there is a Sky coe. For H tag, we have 35. For n percent, we have 38. Similarly, we have Ascote for, for A, 65, for V, 66. These are all four capital letters. Also we have Ay coot for small letters. For small A, we have 97. So let's start the practical and see how it's w. Again, I'm going to duplicate this line and comment of previous one. Here I'm going to use our method, which is character coded. Character coded. Instead the round press, we to pass the index number. So H to pass zero. As you know, in zero index, we have capital. If I set this file, as you can see, is s ton 74. For SI character, we have a decimin value, which is 74. This is the usage of this method. Let's talk about our next method, which is form character code. But before I'm going to wet this line and comment out previous one. Here I'm going to tie from character code. For this, for this example, we don't need stream. I'm going to comment out this one. Here we need to pass an object name stream. String dot from character code. And here, if I pass the decimal number of an SI character, so to pass 65. If I set this file, as you can see, is written A. Here you can see the AI character A and its decimal value 65. Similarly, if you want to print d eight, here you need to pass 90. Let me show you. If I pass 90 here, and this is the schle as you can see, is tal Z. In our upcoming Tutorial, I'm going to show you the practical how we can use this core in actual life. This is it for this tutorial. In our upcoming Tutorial, we are going to cover the remaining methods. Thanks for watching this video, stay tuned for our next tutorial. 59. JavaScript String Methods Tutorial Part 3 : Good to see you guys. Again, I'm back with another tutorial lited Java Ski string methyl. In this tutorial, we're going to cover the remaining string methyl. Our first string method is concat. Using this method, we can join two strings. Also, we can do the same thing using Ccgnition sign, but the function is specially made for this job. Let's start the practical and see how it w. As you can see side by side, I open my Visa Sudio code editor, and my browser using Live Server extension, and I already open our previous document index dot STN. At first, I'm going to duplicate this line and comment out previous one. Also, I'm going to uncomment this variable where STR. With that, I'm going to create another stream, which is STA to. Here I'm going to type in the world. Now we have put two variable, that's two string aves. Now I want to merge both this string using congt function. At first, I'm going to remove this one and aram type STR. These are first variable, and I want to join St two with Str. For that, we are going to use congt function. Str. Concat inside the downress, we need to pass the second variable lin, which is St two, Str two. If I set this file, it's going to merge both the string and written one str. Let me show you. You can see the result. You can see in my browser, Speed. JavaScript is a great language in the world. If I provide a space after language and the set this file, now you can see this space after language. Not only that, you can merge multiple string at once. Let me show you. Here again, I'm going to pick this line, and I'm going to take another very well St three. I Ser three, I'm going to type hell. Afterward, I'm going to provide a space. Now I want to merge eter to an S three with Star. For that, hero we need to use a coma and I'm going to pass Str three. If I set this file, you can see the result. Successfully merge multiple string using Goncat function. Let's talk about our next string method, which is split. This function can break the sentence and create an array using each of the word. Let's say how it's. Again, I'm going to duplicate this line and comment out previous one. For now, I don't need S two and S three, so I want to remove this one. Here I'm going to tie the split function split. Then inside the round press and inside the double codes, We need to pass the character from where I want to split the taste, and I want to split this sentence by using spaces. Here, I want to provide a space. If I set this file, here you can see my browser, it's created an array. As you can see, after Java Stit it provide COVA. It split this sentence using all the spaces. Also you can use different character to split the sentence. Here you can use any character or any sign. Remember, this bathod written an array. Now, let's talk about our next function, which is repeat. Using this function, you can repeat your sentence how many time you want. Let's see it practically. Again, I'm going to pick in this line and comment out previous one. Here, I'm going to use repeat method, str dot repeat. Inside the undress, I'm pass how many time I want to repeat this string. Hm to pass three. If I set this file, you can see the result. You can sign my browser, it repeat your sentence three time. This is the usage of repeat function. Our next method is slice method. Using this method, you can slice your stream. You can specify the starting point and the ending point of the stream. Let me show you how it's work. Again, I'm going to replicate this line and comment out previous one. Here, I'm going to type ester dot slice. Then inside the n press, at first, I'm going to pass one parameter, which is four. If I pass only one parameter and set this file, now you can see in my browser, it print out string after slicing four character from the string. Script is a greater language. But if I pass two parameter, P four, I'm going to use coma and I'm going to pass 16. And then set this file, you can see a different result. Now this function print the character 4-16, and it print script from this string. It print on the character 4-16 position, and it slid down other characters from the string. But if I pass zero, And this at this file, as you can see, nerve ton complete string. This is the usage of slice function. Our next two functions are sub Steror and substring. These two functions are pretty similar with slice function. But there are a little difference between them. Let's start the practical C, what is the difference? Again, I'm going to duplicate this line and comment out previous one. First, I'm going to use serve et. I'm type ester serves. If I pass four here and this at this file, as you can see, after skipping four character, it print all this tree. Similar to slice function. But if I pass another parameter coma five, then set this file, now you can see the difference. Unlike slice function, it print five character after Skip four character. If I pas ten hair, you can see the result. I paint script, and if I pass one hair, and then set this file, as you can see, it print only one character after Skip four character. This is the main difference between sub esteror and slice. In slice function, you need to specify the exact position of stream. But in sub exterior function, you can scape how many character you want with that. Also, you can mention after skipping four character, how many character you want to print. Now let's talk about our another function, which is sub stream. A I to fit this line and comment out previous one. Here I'm going to type Sub stream. This is pretty similar with slice function. If I pass seven here and set this file, you can see the s. It prt total three character after that. This function is exactly similar to the slice function. Now, let's talk about our last two function, two string and Vu. Using two string function, we can convert anything into a string. I want to say if you have numeric value, you can convert it into a string using two string function, and our last function is V. It's a difat function. If you want to print this string as it is, in that case, you can use this function. Let's see how we can use two string practically. Again, I want toplict this line and comment out previous one. H Imo type et dot, two string. We'll to provide round braces because it's a method. If I set this file, as you can see, print out string as it is. Be we don't have any nueric value in this string. I'm going to pick at this line and comment out previous one, and here I'm going to pass some neueric values. Here I'm going to pass 99. As you know, it's a numeric data type. If I set this file, here you can see it prints the same as it is. To prove that is a string, I'm going to add some value with this variable. Her type A in. If I set this file, you can see the result. As you can see, it can't add the value with this stream, but it prints the value up to this stream, 90 19. It is just concanate string and the number. This is the uses of all the string function in Java screen. In the next Tutorial, we're going to learn about number methyl. Thanks for watching this video, stat tune for our next 60. JavaScript Number Methods Tutorial : Good to see you back guys. Once again, I'm back with a new tutorial and in this tutorial, we're going to learn Java Script number Maths, and I'm going to cover the seven number bathde in my code. Let's start the practical and see how we can use it. As you can see, side by side, I open my Visa studio code editor and my browser using Live Server extension, and I already created Stable document named Index dot STL, and we're going to start our practical with our first method, which is number. For this example, first, I'm going to take a variable. And our variable is A, A assigned with inside the double core 98. Sum in this line. As you can see, we assign this variable with a string. Now I want to convert this string into a number. For that, I'm going to take another variable that num. Equal to do we need to use our number function, number. Then you say the round re says, we need to pass the variable lin, which is a a semi to in this line. Now I want to print this numb value in my document. For that, we need to tie document dot right, is at the round recess, we need to pass the variable. Num. With that, I want to add some number, some v, which is ten. Now the question is why I add ten with this variable? Because it's going to prove you that we successfully convert this string into a number. If I set this file, you can see the res in a browser. It's 10108. If you want to convert string into a number, in that case, you need to use this methyl number. Now, let's talk about our next function, which is pars in and part. Per into method is pretty similar with number method. If we pass any decimal value here, it's going to convert this decimal value into in number, and Pert method, play the opposite role of per inch. Let me show you the examples. So first, I'm going to pt this line and comment out previous one. Here I'm going to pass 98.99. Also, I'm going to change the method name. Our method name is pars in. If I set this file, you can see the result. Also, if I remove the addition sine and the number ten, and again, I sat this file, you can see Seton only 98. It remove the D value up to 98, and if I use it without string, let me show you if I use just number, just a floating number, and there at this file. Also, you can see ton only 98. But if I comment out this line and print DTA variable, and the at this file, as you can see, now it's print the floating points. Parson function can remove protein points from a number. This is the usage of this methyl. Again, Ham to type documented right num variable. Let me show you another example with string. If I pass a string here, inside the double cores her to pass 70 here. If I set this file, as you can see, it's stated only 70. This method is end up capable to extract number from a string. This streak only work if the strings start with tisel. Otherwise, it's not going to work. Now, let's talk about our next function, which is pars clot. Again, I want to get this line and he to type parse flote. And comment out previous one. Also, I'm going to change the variable value. H I'm to pass 77.89. If I set this file, as you can see, it's written the floating result. As you know, this function return value with dots. But if I change the variable without dots, let me show you only 77 and then set this file, then this function return the exact veil. This is the usage of pass int and pass float math. Now, let's talk about two other methods, which is is infinite and is integer. These two method always written true either false value. It is specially useful to check the conditions. That's why is stain true either false. Is finite function written true when, if the number is finite. I mean, if the number is countable, then it's stain true, else it's written false. Using is indser method, we can check the given variable is number or not. If indser, then it written true otherwise, it's cten false. Let's go to the so studio code and see how it's wed. At first, I'm going to get this line and comment out previous one. And how I'm going to type our next function name, which is is finite, is finite. If I set this file, as you can see, is 102 because 77 is a finite number. We can count this number. But if I pass is string here, I double codes, I'm going to pass hello. And then say this file, now you can see ston forms, because we cannot count strings. Now let's talk over our next function, which is is tesser. So at this line and comment out previous one. And using is teser function, we need to use a Q, which is number. Number is in tes is taser. If I pass 90.99, and then set this file, as you can see, is Seton falls because this is not an integer. It's a fot v. That's why Seton falls. But if I pass only 90 here and then set this file, now you can see is Seton crew. This is the usage of is finite and is the integer function. Let's talk about our last two functions, which is two fixed and two precision. Let's see how we can use this math. Again, I'm going to duplicate this line and comment out previous one. At first, I'm going to change the variable v. 90 point, 58. With that, also, I'm going to pass to other dis, 78. Here, I'm going to use our next function, which is two fixed. I'm to reduce this one type a two fixed. And I set the undress, I'm going to pass a parameter, and I want to pass two. What is the meaning of that? This function going to return two value after Del point. If I set this file, you can see the result. But if you notice, you can see, it's written 90.59, not the 58. It is the Lumsm value, and this function return the first value. That's why it is print 59. Also you can print three d after Dimel point. If I change the parameter a qu plus three and then set this file, you can see the result. Now it print 580. Now let's talk about our last function, which is two precision. For that, I'm going to get this line and comment out previous one. Here I'm going to tie two precision. T precision. This function always return round about el. I want to say if the floating number is bigger than 50, there is going to print a complete figure, which is 91. Let me show you. If I pass two here and then set this file, you can see sprint 91. But if the number is less than 50, H pass four, and then set this file, now you can see is 90 only. These are the uses of the number functions. Thanks for watching this video, stay tuned for our next. 61. JavaScript Math Methods Tutorial : Hello, friends, good to see you back. Once again, I'm back with a new tutorial related Java screen. In this total, we're going to learn math methods. You can see a list of method related math function. One by one, I'm going to cover all of them. So without wasting your time, let's start the practical. Here you can see side by side, I opened my Visa Studio code editor and my browser using Live Server extension, and I already created an est document named index dot HTML. We do not use this method normally in our website. We use this method for animation for carrousel, video game developments, et cetera. Otherwise, we can use this methode in complex accounting web applications. At first, we're going to learn what is cell and floor math. Sot first, I'm going to start with cell function. For that, I'm going to create a variable. The A equal to to use math functions, we need to use math ur. Math dot S. Then inside the round ss, I'm going to pass a 2.2, and then semag two in this line. Cell and floor, both the functions are work when the value type piece float. If I do not use floating point value, it is not going to work. And cell function always written the upper win. Let me show you. Herm type document dot, right, inside the round sss or variable limb, A. Then Sebag two in this line. If I set this file, you can see in my browsers, it's sen three. So three is the nearest upper value of 2.2. Without zero, whatever we pass up to decimal, it's going to return the upper value. If I pass 2.1, also you can see it sit in the upper value. Three. Also you can use negative value. If I pass -2.1, in that case, is going to return the upper value, which is minus two. As zero, minus two is bigger than -2.1. That's why it's sit on the upper value. Similarly, we have opposite function, which is flow. I'm going to duplicate this line and comment out previous one. And here I'm to type M dot flow. At first, here to pass 2.1. This function always written downward. If I set this file, as you can see, it is 102 on. Also, if I increase the value after desm 2.9, then set this file, also is t two. It's always written the nearest downward in diesel. Now, let's talk about our next functions, which is round and trunk. These functions are also work with decimal values. Let's start the practical and see how we can use it. At first, I'm going to show you the round function. I'm going topic this line and comment out previous one. Here I'm going to type Mt dot round. This function always return the newrest integer v. If the value is greater than 0.5, then is on three. Otherwise, it is son two. Let me prove you that. If I set this file, as you can see is Seton three. If I pass 0.4 and then set this file, as you can see, is sateen two. But if I pass 0.5, then also is going to return upper veal. If I set this file, you can see that result. Son three again. This is the usage of round function. Now, let's talk about our next function, which is rum. Again, I'm going to duplicate this line and comment out previous one, and here I'm going to type M dot t ron. This function always treated intser value. If I set this file, asc C is 102. Whatever value we pass after de el is not related with that. If I pass one, also it real two. Also if I pass nine, asc C is 102 agree. This function always return the exact integer value. Our next math functions are maximum and minimum. Maximum function always return the highest number from the least, suppose we pass multiple numbers. This function return the highest number among the numbers. At the opposite way, minimum function works is stain the lowest number. Let's see how we can use it. Again, I'm going to pit this line and comment out previous one, and H I'm going to pass mat dot max. Inside the round races, I'm going to pass multiple numbers. 234310, if I set this file, as you can see, it is written 43, because it is the biggest number among the numbers. Let's talk about the mean function. If I dglgate this line and hand to tie me. If I set this file, as you can see, it's 1010, it's st the lowest number among the least. Now you might think I call the same variable without comment out previous one. Then why son the mean function because we overid the variable. That's why it's a mean function. Our next functions are SQRT and CV RT. The full name of SQRT is square root. We already learned about it in our school and CV RT stands for Q root. Let's see how we can use this method. Again, I'm going to replicate this line and comment out pigs. Here are Im going to tie math dot SQ t. As I told you, SQ quart starts for square root. I want to extract square root of four, Herd type four. If I set this file, as you can see is Sn two, six and seven standard students also what is square root. If I pass 64 here, as you can see, it's C eight. If we multiply 88, it's Cal 64. If you have a basic knowledge about math, then I don't need to explain it. Let's talk about a next function, which is CV RT. Some to duplicate this line and comment out previous one. Hm type, C R t. As I told you, CV RT stars for Q we gro. If I pass 125 here and then st this file, as you can see, Seton five. Because 525 in two to five equal 125. If I multiply five, three time Seton 125. Now let's talk about the next function, which is PO, P stas four power. This method is used to extract power of V. Here, I'm going to duplicate this line and comment out previous one. Here I'm going to use math dot PO. And Inside the down recess, we need to passthrough the two pyramid. At first, we need to pass the base wheel. Then we need to pass the exponential value, and we already learned about it in our mathematic class. For base value, I'm going to pass four. For exponential value, I'm going to pass three. If I set this file, you can see the result. It's written 64. It's mean it's going to multiply 34 at once. I mean, I want to say four into four into four. If I pass two here, and then set this file, as you can see is son eight. I mean, two in 22 into two. That's why it is son eight. Exponential means I want to multiply the base value this must time. But if I pass one here and then set this file, as you can see is eton one. Because if I multiply 31 at once, always t one. Now let's talk about our next function, which is random. This function always ret in a random number. H to duplicate this line and comment out previous one. I want to tie math dot random. Map dot random. By default, is going to return value 0-1. If I set this file, as you can see, is st is ten a floating number. Every time I call this function, is ten a new number, and now I decide I want a random number 1-10. For that, we need to do some mathematical calculation. For that, here I'm going to use multiplication sign. Multiply with ten, and I'm going to move it inside the round brass. And then I'm going to add one with this result. Plus, one. If I set this file, it's t a number, but it returned a floating number. But I want to return the rest nearest integer. For that, we can use Md dot floor function. We can use this function for that. I copy the function and how to type. Md dot floor. If I set this file, as you can see, it's ct number between one and t. If I set this file again, as you can see is a different dom number. In that way, we can return any random number between one and t. I hope now clear for you, how we can use this function. If you want to return value between 1200, just you need to replace this veil, ten to hundred, and this this file. As you can see, it's written in random number 1-200, and this function written 51. Now let's talk about our next function, which is ABs. This function stands for absolute value. If I pass any integer value, maybe it is decimal value, otherwise, negative value, it's going to return the absolute v. Let's see how we can use it. Again, I'm going to duplicate this slide and comment out previous one. And Ham type matt ABs. If I pass minus value -45, and then of this file, as you can see, it's written only 45, it's removed the minus sign. This is the uses of this method. But if I pass any string in this function, let me show you. Is the double course, I'm going to pass world. This file, as you can see, is N. I mean not a number. Now, let's talk about our last math method, which is Pi. This method always return a constant v. I want to say we cannot change the value of Pi. As you know, it is a static. Here, I'm going to duplicate this line and comment out previous one. I'm going to tie our last function, Mth got Pi. If I set this file, as you can see, it is a static value, and we already learned in our school, the value of Pi is 3.14. For mathematical calculation, you can use this value. This is it for this tutorial. Thanks for watching this video, stay tuned for our next Tutorial. 62. JavaScript Date Methods Tutorial : Good to see you guys again and back with a new Tutorial related Java strip. In this total, we're going to learn Java script date methods. To use date methods, we need to create a variable date object. As you can see, we assign a variable as a date object. After that, we can use the date methods. Otherwise, we cannot use the date methods. Remember, after assignment operator, you need to use this keyword, new date. After that, our variable become a date object. With the help of this variable, we can use any date methods. Here you can see total 16 date methods, and I'm going to cover all of this in this tutorial. Let's start the practical see how it's work. As you can see, side by side, I open my visa Studio code editor and my browser using Live Server extension, and I already created est document me index HTM. As I told you, at first, we need to create an object. Herm type and our variable name is now equal to, we need to type new date. Then round bases. Now this variable become dead object. If I print this variable in my documents, Here amo type document dot, right, I say the round bass amoro type now, as I do in this line. If I set this file, you can see the result. You can see in my browser, it print the complete date. First it print the day, then this month, then date, the year, the hour, then minute, the second. It also print my time location, GMT indeed standard time. Remember, this function get the time from your local computer. The time is not come from the server because it is the client set script. First itload in your system, then it run. That's why it print your system date and time. Now, let's start our first method, which is two date stream. Here, I'm going to tie now dot two date stream. And then we need to pass the round brass. If you want to print your date in a readable form, in that case, you can use this function. If I set this file, you can see a browser, print, print Sunday, October 23, 2022. Basically, this function return day, month, date, and year. Let's talk about our next date methods, which is get date, get full year, get month and gate date. So Let's start the practical and see how we can use these functions. At first, I'm going to duplicate this line and comment out previous one. I'm going to start with G date function. If I type, get date here, and then set this file. As you can see, it is simply written the current date, which is 23rd. Our next method name is get full year. Hermon type, get full year. If I set this file, you can see the result. It's 102022. If you want to print only the current year date, in that case, you can use this method, get full year. Now, let's talk about the next function, which is gate month. Here type git month. If I set this file, you can see the result. It's the month number, nine, ninth mean October month. Now you might think October is a tenth month. Then why is t nine? Because this function count month from the zero index. That's why it return nine. If you want to return the week day, in that case, you need to type gate day. If I set this file, it's going to return zero. Let me show you. Because today is Sunday. As I told you, it starts from zero index. That's why it returns zero. But if I set any date to this object, let me show you. He set the ounces, I'm going to set a date January, fifth 2010. If I set this file, you can see stan two. It's mean according to this date, it's the day number, and it was two is. Similarly, if I pass, get month here, and then set this file. Now you can see est zero because because January is the first month, and as I told you, it starts from zero index. That's why it s zero. If you want to extract any date or day from the past, you can use this maths. Our previous functions are related to date month day. But now we are going to learn time related functions. G hour get meet gate seconds, eight milliseconds. Let's see how we can use this methods. First, I'm going to remove this date, and I would like to work with current time. Now I want to extract the hour from the dates. I get this line and comment out the previous one. Here I'm type now dot get hour gate hour. If I set this file, you can see in my browser, it returns 70. It's mean 5:00 P.M. According to our local ty. If you want to get the minutes, just it to type git mites. If I set this file, you can see the result. It is five or 5:00 P.M. If you want to extract the seconds, yes, you can. Unit to type second sale. Now do gate seconds. And set this file, it t two. Our next method is g millisecond. Hm type git milliseconds. If I set this file, you can see the result. As you can see is print, 566. These are all the methodes related gates. Using this method, we can extract current year, current date, current minute, current millisecond, et cetera. Now, let's talk about our set methods. Using this methodes, you can set any old dates from the history. Also, you can st future dates. Let's start the practical and see how we can use it. Here, I'm going to use set date functions. I'm tie. Now dot set date. Then in set the round recess you already know that today is 23rd, and H 27. If I print this variable, in my browser, let me show you. If I print now and then set this file, as you can see it set a new date to our time. Also, you can see 27th October would be Thursday. If I show you my calendar, let me show you, as you can see, October 27 day is Thursday, and similar to set date, we can set full year. Let me show you. Her pass set full year. And Hm pass a year, 2023. If I set this file, you can see the result. Now the current date is 23rd, October 2023. At the similar way, you can say T millisecond, et. This is it for this tutorial. In our upcoming Tutorials, we are going to start Dom document object model. Thanks for watching this video, S tune for our next Tutorial. 63. JavaScript DOM Introduction Tutorial: In this tutorial, I'm going to introduce you what is JavaScript Dom. The full form of JavaScript doom is document object model. As you know, the most strong point of JavaScript is even. With that, Javascript have another strong point, which is Dm, and we can do a lot of stuff if we combine this two section. Before we work with Dom, we need to understand what is DO. And what is Dom tree? Dom is a part of STML. The most important part of Dom is document. Inside this document, we have a main tag, which is known as STM tag. Otherwise, we can call it root tag. And then come to child tag of HTML tag, which is it tag and body tag. Hit tag and body tag, they both are siblings, and their parent tags HTML tag. Now, let's talk about it tag. Title tag is one of the child tag of it tag. Inside this title tag, we can type any text. For example, we just type website. Similarly, in our body tag, we can create multiple child elements. For example, we can create NP tag. It is used for navigation and a heading tag, H one, and inside the navigation tag, we can use anchor tag as a child. And inside the anchor tag, you can pass any text. In our case, I type about us. Also, we can set an attribute to our anchor tag, which is class, otherwise, ID. Similarly, we can pass a text node in our heading tag. Also we can set a attribute ID. With that, also we can set another attribute class to our heading tag. This attributor also work as a child tag. All the attribute and elements you can see here, we call all of these nodes in Java script. This is element node, this is text node, this is attribute node. Now you might think, what is the usage of p in Java Script. Here I just introduce you, what is D tree. Using this Dm tree, you can do two things in JavaScript. At first, you can get data from the Dm tree. Suppose you want to extract the ID name of this attribute. In that case, you need to use Gate keyword, especially Gate is a mahod. You can get any value using this mathle. At the opposite way, if you want to set a new value to your dom structure, in that case, you need to use set method. You can set a new value to this text. Otherwise, you can create new node as a child element. Otherwise, you can create a new element inside an element. If you want to create animation using Help JavaScript, otherwise, if you want to develop games, anything you want to do with your doom using Help Java Script, you need to use this to Math hood. Get and St. Also, we can change the attributes using this to Math hood. You can change class ID, elements, whatever you want to change. You can add new SML element in your document. Otherwise, you can delete STM element. Otherwise, you can delete existing STML elements. If you want to delete H one tag, yes, you can delete it. Otherwise, if you want to add another child is at the body tag, yes, you can. In this turial, I just introduce you what is Dom. From the next turial, I'm going to show you how we can use it practical. Thanks for watching this video, state you. 64. JavaScript DOM Targeting Methods Tutorial: Good to see you back guys. Again, I'm back with a new Tutorial realt Java Script Dom. In the tutorials, we're going to learn Dm targeting Math. In our previous tutorial, we already learned what is Dm tree. With that, I told you what is the usage of gait and set Math. Now the question is, if I want to get some value, otherwise, set a value, how we can target this element. Suppose I want to change H one tech value. I want to change welcome to Hello World. How we can target this element. Maybe there are a lot of H one tag on this document. How we can do it. To target this element, Java Script have some special methods, and we are going to learn the special methods in this tutorial. To target dom element, there are total three special method. We can target dom element by their ID. Also, we can target dom element by their class name. The last option is, we can target dom element, their tag name. If you want to target element by their ID for that, you need to type a special line. Then you need to type a special command. Document dot get element by ID. Document is an object. Inside this document, I want to search an ID. Here, inside the round press, we need to pass the ID name. It is one of the method document. Remember, you need to type E B and I in capital. Similarly, if you want to target by their class name, in that case, you need to type document dot, get element, get element by class name. Inside the round press, you need to prov the class name of this element. If you want to target it by the tag name, in that case, you need to type document dot, get element by tag name. Inside the round press, you need to pass the tag name. But without three, there are a lot of targeting methods. These are the all targeting methods that I'm going to cover in our tutorial series. Let's start the practical and see how we can use this methods. As you can see, side by side, I open my visa Studio code editor and my browser using Light server extension, and I already created an est document index dot Stable. As you can see in this document, we create a Stable structure, and we create a basic website layout. Here you can see the header, and also we create a basic menu section. Also, we have a content part and inside this content part, we have an image sub heading content, and the right side, you can see a sidew section, and we have some anchor tag on this list. Also we have a normal footer section. In this basic layout, we are going to explore all the targeting method. You can see in my est file, we have header section, we have menu section, we have content section, and also we have side verse section and footer section, I already link a style file with this est page, style dot CSS, and you can see the file. Also I link a Javascri file with it. Main dot JS. Now it's an empty document. If you notice the IDM and the classes, we have DNM wrapper, header, menu content. Also we have some class list side are ID, o ID. For this image, we assign a class name, content image. Keep this file as it is. Let's jump into the avasci file, Man DJs. We are going to experiment all the dumb targeting methods in this file. At first, I'm going to declare a variable. We element. For now, I'm not going to assign any value to this variable. In the next line, I'm going to assign a value to this variable. Hamo type element equal to document. So the line. Now I'm going to put this element in our console. Hmotyp console, log inside the round press or variable lin, L, the bag two in this line. If I set this file, and show you by console section, let me show you how you can see it return document. It's an object. Let's see what is a sit in this object. If I open this document, you can see the whole est structure. It return all the estable structure from our page. If I type document all and this is this file. Now you can see in my console, it return et all collection. I return all the tag from our est page. With that, it return the tag index number. Suppose I want to target menu section. If I hover on menu, you can see it highlighted our menu section. Similarly, if I hover my cars heater section, you can see the same result. Now I want to return the title section. For that, I'm going to clear the console. And Hw I'm going to tie document Dot inside the square basis, I want to return index number two. The subgr two in this line. If I press enter, as you can see, is written our title. Hm. But if I on the same common here, let me show you and set the square basis, I'm going to pass two and set this file, sen the same result. Hm. Similarly, we have a lot of targeting methods. On by one, we are going to explore it. I this line and comment out previous one. Now I want to target the section. For that, we need to type document.it. Here I'm going to type document dot H. If I set this file, and you can see in my console, it return the esteem structure of Hat section. You can see the title, you can see the link, you can see the script tag, I set the head tag. I mean it target the complete section, and now I want to target the title. Again, I'm going to gate this line and comment out previous one and Amo type document title. If I set this file, you can see the result. It return the title. At the same way, if you want to target all the body section, you can. I'm going to get this line and comment out previous one and muro type. Document dot body. I'm going to set this file. After set this file, as you can see it CTN null. Why I don't know. Let's run the same command DT in our console. H type document dot body. If I press enter, you can see it's C complete body section. You can see all the tags is at the body section. Remember, you can run any Java script command in your body section. Now I want to target all the links from our est page. Hat this line and comment out previous one. I'm going to type document dot ns. If I set this file, you can see it ret something. If I open this drop down, you can see it ret all the anger tags and the total length of anger tag is eight. We have total eight anchor tag in this page. If I hover curser in our first anchor tag, you can see it highlight home section. Similarly for about us, I I hover my cursor index number one, it highlight about section. Now I want to particularly target index number two. Sta links, I'm going to use square bases, and to pass two. If I set this file, you can see again defined why I don't know. I'm going to run the same command in our console directly. Copy this command and to past. If I set this file, you can see it stal gallery. At the same way, you can target images. I want to fig this line and comment out previous one, and here I want to type docu dot images. If I set this file, as you can see it ritt array. If I open it, you can see ar length one. If I open my cursor on it, as you can see, it highlight our image. If you want to target this image for that, you need to type document the image, inside the square press, pass the index number, which is zero. The 72n this line. If I press enter, as you can see, is state, straighten our image t. But if I pass an index number, which is not available, let me show you document images, ins the square press, I'm going to pass one. The 72 and this line. I I press enter, as you can see is written undefined. Because there is no image at one index. Similarly, you can target all the forms in your web page. I'm going to replicate this line and comment out previous one. For now, we don't have any forms in this web page. That's why it's going to return undefined. I'm going to run another targeting method, which is doc. P one. It is going to run this doc type from our STL page, doc type STML. If I set this file, as you can see, is doc type STML. This is it for this tutorial. In our upcoming Tutorial, we are going to cover remaining ones. Thanks for watching this video. 65. JavaScript DOM Get Methods Tutorial: Nice to see you guys. Again, I'm back with a new tutorial nlted Java script dom. In this tutorial, we're going to learn how we can get value from a stable document. Also, we're going to learn how we can set value in a stable document. For that, we are going to use set and git method. In our previous tutorial, we'll learn how we can target dom elements. But in this tutorial, we're going to learn after target the elements. What can we do with that? First, we're going to learn what we can get from an element. In Java Script, help up do we can get three themes. A stale text attribute. We can get three type of value using git method. For these, Java script have some different git methods. The first method is ina text. This method help to get text from an element. Next one is Iatable. It's written the est of this element, and our last three methodes help to get the attribute vdo, git attribute, git attribute note and attributes. Let's see how ina text and inner estable works. As you can see side by side, I open my Visa studio code editor and my browser using Live several extension, and I open my previous estable document. With that, we have Mindo js file. At first, I'm going to resolve the issue. If you remember, when we run documented body function in our console, it's s null. Some of the commands written undefined, otherwise null. At first, I'm going to resolve this problem. As you can see, here we use script tag inside the headed tag. But we need to use the script tag. I cut the script tag from here and I'm going to use it before body tag end, and I'm going to set this file. Now you can see when I set this file, s the whole body section. Now our console, not going to return null, otherwise undefined. Now we can run every command in our main DGS file. But what is the problem? If we use Java strip inside the head tag, in that case, the main problem is when we save our file, it load the script tag before the body tag. That's why our Java strip do work properly. That's why we need to use the script tag end of this body tag. Now it's worked perfectly. Let's back to the JS file. At first, we're going to learn in text. Let's get to the index dot est file. As you can see, we have a header ID. Inside this header ID, we have H one tag. Now I want to extract the text from H one tag. For that, we need to tie document dot get element by ID. Inside the round recess, we need to pass the ID name, which is header. If I set this file, as you can see, it's written the complete header tag. It's written the proper Atable structure, but I want to return inner text from this tag. Here, we need to use a gate method dot inner text. If I set this file, now you can see it is written your logo, just the text. Let me show you another example. You can see my index dot estim file. Here is ID name content. Inside this content, we have H one tag, NG tag, paragraph tag, et cetera. If I pass this ID, it's going to return all the text at once. Let me show you. Here I'm going to pass Git element by ID is set the down press content. If I set this page, as you can see, it is written all the text from our content section. It do not return any est tag. It is just written put text. This is the usage of inner text method. Let's talk about our next method, which is inner STL. Here, I'm going to duplicate this line and comment out previous one and here I'm to type inner STML. If I set this file, you can see my console, is sten the whole est structure inside the content section. As you can see, is written all the estate tags with that text. If I pass header here, so I'm going to replace content with header. This at this file, you can see, is written the inner STML. H one, with that, it's written the text, your logo. This is the usage of this method. Next, we're going to learn how we can get attribute values. For that, we have total t method, get attribute, git attribute nodes, and attributes, and we're going to start with git attribute Mathod. Also, we're going to find out the difference between git attribute node. Again, I'm back to by vis to your co or. At first, I'm going to use git attribute method. Hm type git attribute. Now we need to pass round ***, and we need to provide the attribute term which attribute value we want. Let's back to the A seven page. As you can see in this D, we have only one attribute ID, and here I'm going to use another at class. Class, for now, I'm going to type. I'm going to say this file. Now I want to return the class name from this tag. Here I want to pass in set the double class. If I set this file, you can see, you can see in the console, sit the class name, x y z. Here we target our deep tag using it ID, which is header, and we return the class name of this element using git attribute bathroom. But if I pass ID here, then what happen? ID. If I set this file, it's going to return the sa ID name, header. Let me show you. If I set this file, you can see in my console, it's sit header. Let's add another attribute to this element. Here I'm going to add another attribute and our attribute ame is style. And I'm going to say border to this element. Border one pixel, and I want solid border. With that, I want red color. I'm going to set this file, and in my indoJS file, here I'm going to pass the attribute name, which is style. And now it's going to return the value of style attribute. If I set this sole, you can see the result. Border one pixel solid rad. Now let's talk about our another method, which is git attribute non. Here, I'm going to type git attribute no. If I set this file, now you can see in my casole, it's reten the attribute name with their values. If you want to return only the attribute value, in that case, you need to use git attribute, and if you want to return the attribute name with value, in that case, you need to use git attribute no. That was the main difference between git attribute and git attribute no. But if you want to return only the value using this method, yes, you can. Just you need to type dot v. If I set this file, now you can see it's return only the value. Now I'm going to talk about our last get method, which is attributes. This method going to return all the attribute names from this. It's going to return an array and it set this array, it's going to return all the attribute names. Let me show you the practicals. I back to by index dot estable file, you can see, he set this header ID, we have total three attribute, ID, class, and style, and Haram to type only attribute. I'm going to remove all of these header, dot, attribute. If I set this file, as you can see, is written an array. S is not written an array, is st object. If I open this object, as you can see, total length of this object is three. Because we have total three attribute in this object, ID, class, and style. If you want to target the particular attribute, yes, you can. Suppose I want to target the class. For that, after attribute, we need to use square ases. Here, we need to pass the index number one. If I set this file, as you can see, it's written the attribute name and it's v x y eight. Now I want to return only the ve, not the attribute name. O that, just need to type dot. If I set this file, you can see the result. It's written xyz. With that, also, you can return attribute name. For that adjust to type dot name. If I set this file, you can see the result. It's written class. We already learned using this method, how we can get dom values. This is it for this tutorial. In the next tutorial, we are going to learn Dm gate Mthods. Thanks for watching this video, statti 66. JavaScript DOM Set Methods Tutorial: What does you guys. Again, I'm back with a new tutorial and in this tutorial, we're going to learn how we can set dom values. We have put five methodes. Using this method, we can update any dom Val. Otherwise, we can add any dom Value. We can change in a text. Also, we can change the STML, we can set new attribute. We can remove attribute. Whether to at time, let's study the practical and see how it's w. As you can see side by side, I open my visit studio code editor and my browser using Live Server extension, and I already opened my previous STL file and Min DoJS file. Let's jump into the index doe STL file. Here you can see, We have ID named header. Inside this header tag, we have H one tag. I decide I'm going to change the inner estim of this ID. I want to set heading two tag with different veil. But I'm don't going to change anything in my index dot est file. I'm going to do the job using set methyl. For that, I'm back to my main dot file. Hm tie Don dot get element by ID header. Then our method name dot inner estimL. Because I want to change the inner est equal to is at the double codes, we need to pass this tree. As I told you, now I'm going to use heading two tag. Here I'm going to pass H two close, H two. Between heading two, I'm going to pass hell. Before I set this file, I'm going to return the inner et in my console. For that, head into pass doc element get element by ID header, PR STML. Then sub C to D line. If I set this file, as you can see in the inter portion, it states the content. It replace H one tag with S two tag because we change inner STML. At first, we target the element by their ID name. Then we change the inner est of this ID. If I show you my console is packed console, you can see the result. As you can see, now our new estimate structure is h12, Halu. But if I print this inner est section before I change it, let me show you. But at first I'm going to remove this line. I don't need it. I'm going to copy this line. And I'm going to past it before this s. If I set this file, Oops, I forgot to print this element in my console. Copy this line and paste after this line. If I set this file, now you can see the result. Our first result came from before the change. Our second sel come from after the change. This is how we can change in esteml using set method. Similarly, you can set in a text to any element. For now, I'm going to remove this lines. I don't need it. Now I'm going to show you how we can change attribute ves. For that, we need to use set attribute, otherwise, attribute method. Let's go to the Visa studio code DD. If I show you my index dot Stable file, as you can see, he set this D, we have multiple attribute, ID, class name, style, and now I want to change class attribute V. I want to replace x y eight with AVC. Let's go to the JS file and see how we can do it. At first, I wanted to get this line and comment out previous one. H to tie document dot get element by ID header. We target our element by their ide name. Now, here I want to set a new attribute name. For that, we need to use set attribute method, set attribute. Next, I'm going to remove the unusual lines. These are not required for now. Then inside the ground braces, first, we need to pass our attribute name, which is class, and in our second parameter, we need to pass the vu name which is A B C, and Sg two in this line. Now, let's print the attribute in our console. For that, again, we need to type a gate bath, gate attribute. G attribute inside the round braces, we need to pass the attribute name class. If I set this file, you can see my console, which successfully replace our class name with ABC. If I show you my elements section, as you can see, let me show you. Her replace our class name in my dom with ABC. This is how we can change any attribute value. Using set attribute method, also you can change inline Sess value. Let me show you the example. Again, I'm going to replicate this line and comment out previous one. This time, I want to target our attribute and our attribute name is style. And here, I'm going to pass a new value, O v is border. Border colon and he need to pass the values. Border ten pixel dotate, and I want to set border color white. If I set this file, you can see the result. We successfully replace the inline cess value using this meth. But this is not the right way. In our upcoming toil, we are going to learn about it. If you want to print the value in your console, just need to tie style. If I set this file, now you can see my console, the value, border, ten pixel, dot it, and white color. Basically, I want to say with the help of Java Script, we can change CS's properties, and we're going to learn about it in our coming to Tio. Now, let's tow over our next method, which is attribute method. Again, I'm going to duplicate this line and comment out previous one. For now, I'm going to remove the unnecessary lines. And Harm type, document dot get element by ID attributes. As you know, here we need to pass. Instead the square basis, we need to pass the index number, and the index number of our classes one. If I show you why index dot e file, in our zero index, we have it, and In our first index, we have class. That's why I pass one, and I want to change the value of this attribute. He pass dot value. Then we need to use equal to sine. Is and in said the double e, we need to pass the value, and I want to st our class name. Z, and seal in this line. Before I set this file, I want to print our attribute. Here I'm want to pass class. I'm going to set this file. Now you can see in my console, it replaces our class name with Z Z. If you use this method, you need to remember the index number, but in our previous methode, you need to pass the attribute name. That's the difference. Let's talk about our last attribute, which is remove attribute. This attribute is specially used to remove the existing attributes. So Let's up into the to coed at C how it's work. As you can see in this D, we have put out three attributes, ID, class and style. As you can see, this D vab red border color, Let me increase the size, ten pixel. I'm going to set this file. Now when you set this file, you want to remove this border, and I want to remove it using Java screen. Let's back to the Mino file. Again, I'm going to duplicate this line and comment out previous one. Here we need to pass the attribute name. Document dot get element by ID header, and our attribute name is remove attribute. Remove attributes. Then inside the undress, inside the double codes, we need to pass the attribute name, and our attribute name is style, and semicon in this line. If I set this file, you can see the result. Now you can see in my browser, it remove the style attribute with their value. That's why now we don't have the border to this header portion. If I show you the est structure from the element section, now you can see inside the body tag inside this de, we have a header. But if you notice, you can see we have only two attributes, ID and class. It's successfully removed the style attribute. But if we back to my index estable file, you can see still our style attributes exist in this D. In this tutorial, you learn how we can target dom values, and also we can say new values to our dom. This is it for this tutorial. In our upcoming tutorial, We are going to set Css vs. This is it for the tal asp watching this video. 67. JavaScript DOM querySelector & querySelectorAll Tutorial: Good to see you back guys. Again, I'm back with a new tutorial related Javascript dom. In this tutorial, you're going to learn to maths, Query selector and query selector all. In our previous tutorials, we learn how we can target dom element by ID, by className, by techni. But the problem is, if we need to target the different objects, in that case, you need to use three different methol. ID, git element by ID, or class, git element by class name, and for tag, git element by tag name. But what? If we had only one method to target all the elements, who can target ID, class name, and tagnme? For that, Javasclit, introduce two method, y selector and y selector all. For City selector, we need to type document dot City selector, inside the round press, we need to pass the CSS selector. The similar way, if you want to use City selector for that you need to type, document dot y selector all inside the round press, you pass CSS selector. But what is the difference between y selector and arity selector all? If we use Qy selector, it's going to target the first object. Maybe there are similar object with same class name, but it's going to select the first one. But if you use Cary selector all, it's going to target all the elements. That is the basic difference between two method, selector and Qy selector all. Without wasting your time, let's study the practical and see how it works. As you can see side by side, I open my is Studio code editor and my browser using Lefs extension, and I already opened my previous document index dot STM. That's the JavaScrip file, I Practice Ser JavaScrip Mthods. Let's use the first bathod, which is query selector. I'm going to review all of these unnecessary lines, and Ham type document dot query selector, query selector. Inside the round press, we need to pass the selector name, and here I use ID selector, header. For that, we need to use Hs tag sin because it's a ID. If you use class name, in that case, you need to use dot before the class name, and I want to change the inner estil of this element. For that, he to type inert method, IDML equal to, I say the doubles, I want to replace heading one tag with heading two tag. For that, Herman to use H two tag, H two. Between these two tag, I'm going to type hello. In the next line, and for git, again, I'm going to use Qi selector all. Here I'm going to replace git element by ID with Qi selector. Qi selector. Again, we need to use He tax sign because we are selecting the element using its ID. That's why we need to use Hatag, and I want to return the inner STL of this element dot inner STML. If I set this file and show you my console, as you can see in my console, it's written, it's written the new inner STM hello. Also, you can see here we use heading tag. With that, you can see the changes in our header portion. Remember, this selector going to target the first element from your document. For now, I'm going to comment out this line. I don't need it. I'm going to set this file again. And now I'm going to show you another example of y selector method. If I back to my Index dot stable file, as you can see, there is a class name list, and we use the same class name two time. If I select the class name, so I copy the class name st and inst the mendo file, to type y selector, our class name list. But as I told you, for class name, we need to use dot. But if you notice, you can see it's return all the inner estimate from the first element. Using query selector, we can set new value. Otherwise, we can get value. Now, let's talk about our second method, which is query selector all. Let's see how it's so. If I tied Qy selector, all and set this file, now you can see we need to remove the inner estim because we're going to select multiple element. Now you can see by Cole is seated in ate list, and the length of this list is two. If your rote is, you can see, first you use the class name list with UL tag, then you use the class name list with paragraph tag. If I show you by Index dot St file, first you use the class name with UL tag, and then you use the same class name with paragraph tag. The benefit of using this method is, we can use class name, tag name, and ID name. Here you can use any type of selector to target the element, and similar to other method, if you want to target paragraph tag, for that, here you need to pass Is the square basis, the index number one. If I set this file, you can see the result. You can see my console, the complete paragraph tag. You can see the class name, you can see the content, et c. Let me show you another example of Quite selector. If I show you my index dot estable file, as you can see, we use UL tag multiple time. We use it in our content section, we use this tag in our sides section. Also we use it in our menu section. And now I'm going to use the method by their tag name. Instead the round press, we have to pass the tag name and our tag name is U L. Also, I'm going to remove the index number. For now, I don't need it. If I set this file, you can see certainly Node list. If I open this note list, you can see the total length of UL tag is three. One by one, if you want to return the inner estemL, yes, you can. For that, you need to tie square verses, and inside the square verses, we need to pass the index number. I want to return Index number two. Then we need to use dot inert. If I set this file, you can see my console, it's written the all the inner S section from Index number two. It's written the sidebar menu list items, home about s, gallery, contractors, et cetera. Now I'm going to use little advance Case selector. You can see my index dot est file. Inside the header section, we have, we have H one tag, your lobo, and we can select the H one element using this ID. Let me show you. Here, I'm going to remove this one. I don't need it. Inside the double codes, I'm going to tie our ID name header. Space, the element name, H one. If I set this file, You can see the result in my Czone. It's return the H one tag, which is inside the header section. If I back to y, index out estemL file and duplicate this line multiple time. Ist this one. Now you can see inside by node least, total three H one tag. This advanced selection going to return all the H one tag from the header element. Basically, I want to say if you use this method, here we can use advanced se selectors. This is the usage of selector and selector all method. Using one selector, we can target all type of attributes, ID class style, et cetera. This is it for this tutorial. Thanks for watching this video, state une for our next Tutorial. 68. JavaScript DOM CSS Styling Methods Tutorial: Could to see you guys again and back with a new totterial, related Java strip doom. In this tutorial, we are going to learn Dom Ces styling maths. Basically, we have three methods that can use to style Css Dom. The first method is style, and the second method is class name, and the third method is class s. Using this method, you can get Sess value. Otherwise, you can set Sess V. Suppose you want to extract Sess property from element. For that, you can use. For that, you can directly use style method. Also, you can set new value using style method. Let's start the practical and see how it's. As you can see, side by side, I open my Vs to code editor and my browser using Lightsever extension, and I open my previous STEM and recomenname index dot Atmel. With that, I open Mando JS file. At first, we're going to style the header portion. At first, I'm going to show you the example of style property. If I show you my index dot a stable file, as you can see in this D, we have a ID name header. Also we have style attribute in this D. I want to target this element using header ID. Copy the ID name and back to my manor file and I go to tie document dot selector has tag our ID name header. At first, I'm going to show you how we can get style property from this element. For that, need to type dot style. If I show you my index estel as you can see, inside your style attribute, we have a property name border. I want to get border property value. I copy the property name border. Back to I main your file and hair up per style, I'm going to use dot and our property name border. Before I set this file, I'm going to open my c Zoom inp Cs. If I set this file, you can see my Csol is written the border property value from the header element. You can get Sess value from this math. But if I pass a property which is not exist in our element, let me show you. As you can see, here we use only border property. We do not use any other CSS property, like color padding. If I type color hair, and then set this file, as you can see in my console, it's son blank, and now I'm going to set a font color to our header section. Back to Idexoe estable file and here I'm going to type semicolon and up to semicolon, I'm going to use another property, which is color. Color, yellow. If I set this file, you can see my console, it's son yellow. For now, I'm going to remove the responsive mood, and if I type something inside this deep, so I'm going to type hello. And set this file. Now you can see in my head section, the font color is yellow. This is how we can gag CSS property value using style method. Now I'm going to show you using Style method, how we can set new Css property in an est element. In our previous example, we get value using style method. Now we are going to learn how we can assign a new property value to a est element. Now I want to set background color to this element. I'm back to my Minor JS file, and I'm going to copy this portion, and I comment out this line. In the next line, I'm going to paste it. Now I want to say dab Down color to this D. For that, here we need to type dot style method. After that, we need to pass the CSS property name, which I want to say in this element, and I want to see dab Down color. H to type background, color. Background color, and I want to use blue. And semicon to end this line. Remember, in Css, we need to use d between background and color. But in Java Street, you don't need to use das sign, and also you need to capitalize C Carcor. Let's sep the file and see what it written. After sep this file, you can see the result. Here you can see it sta the header background color. I do not save my Stable file. How is still exists in our header portion. Let's save the index file again. Now it's gone. If I show you my elements section and my cursor on this header portion, here you can see it set a new sass property, which is background color, background color, blue. Similarly, I want to add another property to this element. Again I'm going to replicate this line and I'm going to comment out previous one. Now I want to add padding. Here, I want to remove the blue color and the background color property, and upper style, I'm going to type padding. For every direction, I want 50 pixel padding. H to type 50 pixel. If I set this file, you can see the result. It add 50 pixel padding from all of the direction. We learn how we can set value and get value using style method. Now I'm going to talk about our second method, which is class name. Using this, you can get any class value. Also you can set any class name. Let's start the practical and see how it's. Let's back to the Stable file. As you can see, in our headed deep, we have a class name x Y, and I'm going to remove it now. Now in this element, we don't have any class, and I want to set a class name to this element. Now let's go to the Mando JS file. First, I wanted to get this line and comment out previous one. How I'm going to type documented ary selector dot method name, which is class name. Class name. And I want to set a new class name, our class name is A B C. Also, I want to get the class name and I want to print the class name in my console. For that, again, I'm going to dub get this line on Hang type, our variable name, Alim. Element equal to document selector header, and I want to return our class name only. I don't want to set any way. If I set this file and show you myset ABC. Here we set a new class name and get new class name using this math. Also, you can see the class name in my element section, class ABC. Now you might have questioned, what is the practical usage of this method? What can we do after change the class name? Let me show you. For that, we need to jump into the our CSS file style dot CSS. Here I'm going to style a class. Here you can see we already style our header element using header ID. But now I want to add some padding. For that, we can use this class, and our class name is AVC, A B C. Inset the calibraces, I'm going to type padding. Padding 50 pixel. If I set this file, you can see the result, I add padding from all direction. But if I back to my mando file and comment out this line and reset this file. You can see now there is a nope padding because now we do not assign any class name ABC. If I show you my element section, as you can see, there is no class name ABC. But we already style this class in our style section. If I uncomment this line and set this file again, as you can see, it add padding from all direction. If I back to my console, you can see the class name ABC again. This is the one of the main practical usage of this method class name. Using this dom methos, we can set any Sess properties, any attribute to our estable elements. Let me show you one thing. We can set multiple classes at once using this method. Here, I'm going to type xyz. If I set this file, as you can see, now it's seen both the classes name, APC and x Y. But if I select this element and show you this style portion, now you can see The padding come from only one class, which is ABC, not from x YZ. Now, let's talk about our last ss styling method, which is class list. What is the difference between class list and class name? Let's start the practical. First, I'm going to duplicate this line and comment out previous one, and H I'm to type or method name. Class list. If I set this file, you can see my console, it's written the same result. It's written and stream, and in this string, it ret both the class name. But if I type class list here, let me show you. And this at this file, now you can see it Stenn dom token list. If I open this drop ground, you can see Trotn these two, and For both the class name, it assign different index number. At zero index number, it assign ABC at one index number, it assigned xyz. Class list written. But class name st. But the main difference is, this function come with its own methds. I'm not going to show you all of this method in this tutorial, but in this teral I'm going to show you the two methds. O first path is a At first, I'm going to remove all of this class name, x y ad and AVC, and in my Stable file, I'm going to assign the class name here. Class A B C. If I set this file, you can see there is no changes because we already added Sess property in our style file. Now, in this element, I want to add a new class with AVC. For that, we need to use add method. I'm to remove all of this and mo type class s dot, and Using this method, we can add multiple classes. And here, I'm going to add a class name QE. If I set this file, you can see in my console it written two class name, ABC, and QE. But in our estable file, her we assign only one class ABC. But we assign the second class from the Javascript doom. If you want to add another class with that, yes, you can. Just after quotation, to use coma and instead the double quotes, you can pass another class name and Ho type As d. If I set this file, you can see my console. Now we have total three class in this element. ABC, QE, and ASD. Using this add method, you can add multiple class at once. Now, let's talk about next plus s method, which is remove. At first, I'm going to remove this method, add Then I'm back to y Intext dot Stable file. Here, inside the class, I'm going to assign to other classes in my estable page, x y eight and A is d. I'm going to set this file. After set this file, you can see my console. It four clus Name because we do not save our Min DoS file. If I set this file, you can see the result. No Stan arrow, because we do not use any method. That's why it son arrow. But if I comment out this line and set this file, now you can see in my console, it St three class name, ABC xy8ad. Now I want to remove one of the class from this list. I want to remove x y eight class. Here, I'm going to use a method name remove. I commend this line, and he Imo type, remove. Inside the round press, we need to pass the class name and I want to remove xyz. Inside the double pose, I'm going to type x y. If I set this file, you can see the result. It's total two class name, A b c and As D. Using this classless method, you can remove class names. Not only that, at the same time, you can remove multiple class name. With that, I want to remove A D class. Perco inside the double course, we need to type A is D. Now it's written only one class name, ABC. Is reve both the classes, X Y Z and ASD. But if I show you my index that est file, all of the three classes are still exist in this element. But using Dom, we remove both the class name, X Y and ASD. This is it for this tutorial. In our coming tutorial, we're going to learn add even listener. Also, I'm going to cover all the class list methods in our accoing tutorials. Thanks for watching this video, Stu. 69. JavaScript addEventListener Method Tutorial: Good to see you guys again am bag with a new tutorial related JavaScript. In this tutorial, we're going to learn Java Script add event listener. These are all basic events, and we know how we can use that. For those events, we need to use event attribu. As you can see in this button, we set an event on peak and after click this button, it's going to call AVC function. In that way, we can add events on any estable tag. Suppose you want to call a function when you over your mouse to an image. For that, you need to use this event on mouse enter. If you learn basic Java script, you already familiar with that. But there's a problem with this technique. Every time we need to go back our estable document to set this attribute. Here we use inline events, and it creates our estable file heavy and complex. We don't want to mess up JavaScript attribute with estable tag. For that, Javascript come with two solution. In our first solution, we assign the event by the help of dom. As you can see, document dot get element by ID, we select the particular element by its ID name, then we select the particular event and call the function. Whenever you click the estimate element, it's going to call the function. Let me show you the practical example and see how it's word. As you can see, side by side, I open my Visa Sudio code editor and my browser using Live Server extension, and I open my previous document est file and Mando Js. Now in our Java split file, I'm going to call our Even. Whenever I click on this header potion, I want to change the background color. At first, I'm going to target this element by its ID name. He to type document dot gate elimin by ID. Is the round verses, we need to pass the iD name, and the iden ame is, as you can see, header. Copy the ID name and paste it here. Now, here we need to pass the even name. I'm going to type dot and our even name is on P. Equal two, and here, we need to call the function name, and our function name is ABC. There's seg two in this line. Now, we call the function, but we do not create the function. For that, I'm going to create the function. H to type function and our function name is ABC, round races. Then he set the C ss, and I want to change the header background color where I kick on it. Again, we need to select this element, and I want to select this element by its Dname. Copy this line and paste it here. Dot style. And we already learned about style method in our previous tutorials. After style, weed to pass the property name, and I want to change background color, background, background, equal to, and I want to say it green color. Then semgon to in this line. Now I'm going to set this file. After set this file, and when I click on this header section, as you can see, it's going to change the color. It turned gray to green. Let me show you again. If I repress this page, as you can see, now the heater background color is gray. But if I click on it, as you can see, it's turning to green. In that way, we can add events in our este tag. This is it. In the next two a, we are going to show you how we can use Add and Lesar method. Now, let's talk about Add and sar method. It is the very useful bather in Java script. After selt the element, we need to type Addvn tener. It is the method name. After that, you need to pass two parameter. I, you need to pass through the three parameter, but for now, I'm going to show you a parameter. In our first parameter, we need to pass the even name. Remember, for click method, just we need to type kick, not on tick. Similarly, for on mouse enter, just we need to type mouse enter. For on D Val kick, we need to type D Val ick. In our next parameter, we need to pass the function name. Otherwise, you can create the inline function. If you don't want to call the function, you can create the function in this line. You need to type function que word, then un brass, and inset the crass, you can pass your statement. Let's start the practical and see how we can use it. Again, I'm back to VS Studio code reader. Here I'm going to use the Add even listener method, and I'm going to call AVC function. Some remove this slide, and I'm going to type, add even listener. Then we need to use round bases, and here we need to pass total two parameter. In our first parameter, we need to pass the even name, which is key. And in our second parameter, we need to pass the function name, which is ABC. If I set this file and over my cursor on this heaters, and I prese, click, as you can see, again, is turning to great to green. This is how it's work. As I told you, it's a very popular method because using this method, we can add multiple events in an element. Let me show you the demonstration. I want to duplicate this line and Ham type, add veer, and our even Names Mouse enter. Mouse enter. As I told you, if we use this bathod, we don't need to type the full level of our event, just want to type mouse enter, not on mouse enter. Now I'm going to create a inline function. I don't want to pass any function name here. For that, here we need to use function. Function. Inside the round ss, I don't want to pass any parameter for now. Then we need to use cases. Inside the css, we need to pass the state. At first, I want to slick the same element by its i name. I'm going to copy this line and past it inside the cases. Then I want to type dot style style function. Style, dot, and this time, I want to play with border property of this line. So to type style dot, border equal to I set the double code, I want to pass ten peak cell, solid, and I one blue border, and H I'm want to pass this semicon to end this slide and set this file. Now I want to hover my cursor on this heater portion. If I hover my cursor on this heater portion, you can see, it extend our border weight up to ten pixel. With that, it set a border color blue. Now it's run on mouse enter event. If I click on it, at the same time, you can see it's turned into green color. Then it run click event. Using this method, at the same time, we can add multiple events. Now I'm going to show you another tree. Here I'm going to use the same event in the same element at the same time. But for the different task. So to review on mouse enter and here, I'm going to type click again. And I'm going to set this file. As you can see, now the border color is red and bat is two pixel. With that, the background color is gray. If I click on it at the same time, and the same time it change the background color. Also, it changed the border and a color. This trick is possible if we use only this method, add even listener. Now, let me show you another adverse thing. Here you can see, we target this element header, and we assign the event to this element, key, and also style the same element in our function. We can use a shortcut and remove this section from a hair, and I'm going to use this keyword. This this dot style dot border. This means the element we target, and how we target the header portion. Using this keyword, we can reduce some characters from it. If I set this code and over my curve on this header se and click on it, you can see the same result. It's not going to effect in our result. This is it for this tutorial. In the next tutorial, we're going to talk about the third parameter of add listener function. Thanks for watching this video. 70. JavaScript addEventListener Method Tutorial part two: We already learn how we can use add listener method. First, we need to pass the event name, then we need to pass the function name, but there is another parameter, which is completely optional. The parameter name is use capture. This parameter written to either false el. Now, what is the meaning of that? Let's try to understand what is the meaning of that. Here you can see to container, outer and inner. First one is outer deep and second one is Ia D, and you said, click event, both the D. Now, if you click on inert section, it's automatically trigger the outer de ti. I want to say, in that case, it's going to run both the events. If you want to run the inner deep event, then you want to run out deep event. In that case, you need to use use capture parameter. Let's start the practical and see how we can use it. As you can see, side by side, I open my visa to your code editor and my browser sizer extension, and I already created an STL, and I already created an STL file name index to de STL. With that, I create a JS strip file main two dot JS. As you can see, in my browser, we have outer deep and in D. Now I'm going to add to similar event, both the deeps. And then we're going to see how we can use capture parameter. First, I'm going to target the element. I'm going to type document dot Q selector, inside the round recess, p pass the element name, using the ID. So to type has tag, and the ID Name is inner. First, I target the inner element. Then I'm going to use dot, and H I'm going to use add even Lister, our event name is click. And here, I'm going to create the inline function, so type, coma function. Function, round ss. Is that the Cal ress these dot style dot background equal to and I want green background color when I click on T. Green. So we go to end this line. If I set this file, I'll click on this inner section, as you can see, it turned into green color. I want to set this file and back to the previous position. At the same time, I'm going to add the same event in our outer deep section. I wanted to pick this line and I want to pass outer. And I want background color. And I'm going to set this file. In this programs, we do not use or last parameter use capture. First, I'm going to show you the demonstration without use capture. I'm going to set this file again, and I'm going to click on in a deep section. When I click on in a deep section, as you can see, it's also effect on outer deep section, to make it clear, Let's add to Alert box inside this e. Hm type alert and inside the Alert box, I'm going to type in a d. Inner D. For outer D, I'm to type, O D. I'm going to say this file. Now, if I click on the inner deep section, as you can see, first it run inert D. If I press, then it run out of D. But if I pass the third parameter, which is use capture and to pass. Also, I'm going to pass two parameter for our outer D. True. And I'm going to set this file. If I click on my inner section, now you can see at first it run out a deep portion. If I press okay, then it run in a De. It is possible when I pass when we pass true value, both the element. If I pass false, both the functions, let me show you so mer pass falls, also am pass false here. Falls and set this file and click out active section. Now you can see it run the default function. First it run inactive event, then it run out of deep event. This is the basic usage of this parameter. Now, let's talk about our last method, which is remove event listener. As you can see, we apply click event multiple time in our header portion. Our first click event going to change the background color, and our second cliick event going to change the border style. So as you can see, we open our previous example file, and here we use to click events. So fast, I'm going to remove the second function. And then I'm going to change the even name, and I'm going to change Mouse. I'm going to set this file. As you know, when we use this event, whenever we hover by cursor on this element, and remove the cursor, it's going to apply this function. Let me show you. I'm going to hover by cursor on this header section. If I remove my cursor, as you can see, it changed the background color. But I want to remove this event. How we can remove this event? For that, we have remove event listener function. Again, I'm going to select the header portion, we get this line. A H tie, add event listener and Hra use another event, which is k. And I'm going to call a different function and our function em is x y z. So Let's create the function. Harmony function, x y eight, then round brass. Then inside the crass, monotype, document, dot, get element by ID, and our Dam is headed. Copy this portion and paste it inside the round brass. Dot, now, we need to use the function, which is remove event lesser. Remove event lisser. Here, we need to pass the even name, which event I want to remove. I want to remove this event, Mouse. So first, we need to pass the even name, which is Mouse leap, so I copy the even name. Is the double codes, I want to pass it, and then we need to pass the function name, and the function name is ABC, and smeg to end this line. So after set this file, I hooper my cursor and I remove my cursor from the header portion. Now you can see, again, it turned into green. But if I set this file again, this time, I'm going to click on this header portion. I want to call the click event. After press, click event, and if I remove my cursor from this position, as you can see, hey, it's not work. Oops, I did a sllist because I pass the function name inside the double codes. I don't need to pass the function name inside the double codes. I want to set this file again. Again, I'm going to move my cursor on this header portion. This time, I'm going to click. Utter press the click and if I remove my cur from this portion, as you can see, now the background not change the color. This is the usage of remove even isder. This method is used to remove evens. As you can see, to remove mouse live event, we said other event, which is click. After press the click, it's going to call this function X Y eight. In our X Y eight, we use remove even istller method. This method going to remove this event from this function. This is how we can use remove even litller function. Thanks for watching this video, state tune for our Lx to vio. 71. JavaScript classList Methods Tutorial: Hello guy is good to see you back. Again, I'm back with a new tutorial related Java Script doom. In this tutorial, we are going to learn class least methods. In our previous tutorials, we already learned a little bit about class method. We learned about add Mthode and reboth. We learn using this bathod, how we can add class to an object. Also we learn how we can remove class from an object. Without that, there are a lot of methods like Togol contains item lin. One by one, we're going to learn all of these methods. Let's start with add and remove method. As you can see, side by side, I open my visa Studio code editor and my browser using Live Server extension, and I already created an est and document name index dot HTM. As you can see, in our header section, we already define a class AVC. If you show you this style file, as you can see, the red background color come from the ABC class. Now I want to add a new class when I click on this header portion. For that, we're going to use class list Mthons. I want to add another class name Y to this element. But before I'm going to style this class. So here, I'm going to create a class name x y, x y z, and hemos background color, green. I'm going to say this file. For now, it's not going to effect on anything. Now it's time to jump into the indo JS file. Here you can see we already use Aden listener method. I also use click Eben, and after click this header section, I want to call AVC function. For now, our function is completely blank. Now, after click this section, I want to add a new class using class list Mathod. For that, we need to type document dot get element by ID header. Let me show you dot the method name class list. Plus list, and n amo type plus lease dot add, and the rounds is Ama plus the class name, and the class them is x y z. Then sub to this line. Now let's step the file and click on the header section. After click on this header section as you can see, it fill the background color with green. If I show you my console elements, and if I ber my header section, you can see, it add a new class to our header element, xyz, the background color come from this class. Using a math, we can add multiple classes at once. If I press comma and then pass another class, QW E and set this file and click on this section, as you can see in my en section, now we have another class named QE. This is how we can add multiple classes at once. Now I'm going to show you how can we use remove method in class las? I'm going to add two more classes in our estable document. I'm going to tie x y eight and E G, and I'm going to set this file. Now let's get to the Mando JS file. For that, we need to duplicate this line, and I'm going to comment out previous one. How I'm going to use class dot remove method. Vo, and I want to remove X Y and EFG. Ha pass EF G, and I'm going to set this file. After click this header portion, I want to remove X Y and EFG. After set this file, if I click on head portion, as you can see, it back to the previous color. It's mean it remove XYZ. If I show you my ele section, now you can see we have only one class AVC. I remove X Y and EFG, but it still exists in our estL document. ABC, x Y eight, and EFG. But the helpop glasslys method, we remove it successfully. How do you learn how we can use remove method. We already learn how we can use add and remove method. Now we are going to learn how we can use toggle and length method. So let's start the practical and see, what can we do with that? As you can see, we have to three classes in our element, AVC, x y eight, EFG, and to get the length of this class, we print this class list in our console. That's why it return length. But now I just want to return the length, not the value, and the index number. For that, you need to tie the length function. Lane. I'm going to set this file. After set this file, if I click on header section, now you can see the result. It written only three, and as you know, we assign to three class in our element. In that way, we can use length function. Now, let's talk about Table method. What is that and how we can use it? For this example, let's d to the index dot stable file. From here, I'm going to remove these two classes, x y eight and EFG. Now we have only one class in this element, ABC. Let's d to the Mando JS file. Here, I'm going to duplicate this line and uncovn this line. Here, I'm going to use the D toole method. Some to type lastly is dot toggle. In this method, I want to toggle only one class, on the x y z. I remove the second one. Now the question is, what that mean? If I use toggle method and click on this element in our first click, it's going to add this class. If I click again, it's going to remove this class. And if I show you my elements section, let me show you and select header element. As you can see, we have only one class, ABC. But if I click on this portion, after click this portion, now you can see it add x y eight. Also, you can see it changed the background color. If I click again, now you can see it remove the class, x y eight, and apply another background color, which from ABC. You can remove an add class using togal method. Now let's talk about another method, which is I. In this function, you need to pass the index, not the class. It's my typing mistake. Here I need to pass the index number. Let's start the practical and see how we can use item function. Now, let's add two more classes in our estimate file. With AC, I want to add x y z. With that, I want to add EFG, and I'm going to set this file. Then I'm back to y main dot JS file. First, I'm going to comment out this line, I don't need it here I'm going to type lasts dot or function name item. I set the address is only to pass the index number. I'm going to pass one. After set this file, if I click on this head section, you can see it CT and only one class name, X Y. But you can see my element. We have total three class, AC x y eight, and EFG. But Harry specify the index number using item function, one. That's why it's written xyz. If you want to use this method, you need to provide the class index number. If you pass zero, then is ten ABC, and if you pass two, then it's going to return EFG. Now, let's talk about our last class method, which is contains. This method always return two, true either false. If the class names exist in this element, it's going to return t. Otherwise, it's going to return false. Let's start the practical see how we can use it. As you can see in our header, we have to tell three classes. Let's get to the Minder JS fin and amet replace item with contains. Cain, inside the undress and inset the double quotes, we need to pass the class name, and I'm going to pass x y z. If I set this file, and pick on this header section, as you can see, it's ten true because these classes exist in our element. But if I pass a class name, which is not exist, tx Y. And then set this file and click on this headed portion again, now you can see Stam falls because this class is not exist in our element. Most of the time we use this methode with e condition, and according to the result, we run different programs. This is it for this tutorial. These are the all class methode that I cover in this tutorial. In our upcoming tutorial, I'm going to cover parent element and parent node method. Thanks for watching this video, Stium. 72. JavaScript parentElement & parentNode Method Tutorial: Good to see you back guys again, I'm back with a new tutorial related Java script dom. In this tutorial, we are going to learn the traversal methods. There are 212 methods that's under traversal methon, like parent element, parent node, chant, first child, last child, ne sibling, previous sibling, et cetera. These all methods are used to target a stable elements. But before start the practical, we need to understand what is siblings, child element, parent node, first child, because without knowing the basic, it is very difficult to understand it. Assume that it is our dom object, H A is parent element, and BC DEF is child element of A. In javascript term, we can call it node otherwise element. If you ask who is the first child of A, then the answer is B, B is the first child of A. If you ask who is the last child of A, then F is the last child of A. These are all child of a element. Now, these all elements are siblings, Bc D E A. They're all siblings. If I ask you, who is the next sibling of B, the answer is E, A is the next sibling of D. If I ask you, who is the previous sibling of B, and the answer is C, C is the previous sibling of D. These are the terms that you need to know before you start bro traversal math. If you understand this simple chart, you can understand all of this math. Let's start the practical and C, how we can use it. In this tutorial, I'm going to cover only two element, parent element and parent node. As you can see, side by side, I open my visa studio code editor and my browser using Live several extension, and I already created an estable document named index dot est. With that, I already levered Min do JS file, Min dot JS. Now it's completely blank. You can see in the body section, we have an outer deep. Inside this outer deep, we have inner t. Inside the inner tp, we have some child elements. A, B, C, D, E, and in our outer deep, we set an ID outer. Similar to inner deep, we set an ID inner. In the child sibling, also we set an ID named child C. We have total five d element inside the inner container. We're going to start our practical with parent mode and talent element. At first, I want to target outer de using inner D. Let's jump into the Java Skip file and see how we can do it. Here I want to type document dot get element by ID. Inside the round recess, we going to pass the Dam, and the IDA is inner. First, I want to target the inner ID. The pink area is inner element area. Using the help of inner element, I want to target the outer element. I'm going to use parent element method, parent element, and I'm going to move this line into a variable where A equal to do dot get element by ID do parent element. And now I'm going to print this variable in our console section. Sound type console dot log, set the round press our variable. A. Then semicon two in this line. If I set this file, you can see my console, it's written out, it's written outer deep section. If I per my cursor on this section, you can see it highlight the outer deep section. Inner de parent is outer D. But who is the outer de parent? If I select the outer ID here, some pass out, and I want to show the outer ID parent element. If I set this file, you can see in my console, it's body. The parent element of outer element is body. Now the question is, who is the parent element of the body element? I'm going to duplicate this line and comment out previous one. I'm going to tie document dot body dot parent element. If I set this file, now you can see in a console, it is este. ETL is the ultimate parent element of all of the tags. Using this targeting method, we can do anything. I'm going to comment out this line and uncomment this one, and set this file again. Using this targeting method, we can change inner est, we can change style. We can change whatever we want. Suppose I want to change outer background color. I want to picket this line and comment out previous one. And H t parent element style style method. And here I want to change background color, background. Equal to, and I want to set background color rate. If I set this file, you can see the result. As you can see, it add a background color to our et tag because here we pass outer element, and it select the parent element of outer element, the parent element of outer element is STL. But if I pass inner hair, and then set this file, now you can see, it's changed the outer element background color. But we select inner element. Using the inner element ID, we successfully target the outer element, and also we apply a style to this outer element. I hope not set for you, how we can target parent element. Now I want to select the inner element using the help of child element. If I show you index et file, you can see There is a child element name C. And also we set an ID child C. So Copy the ID name Ch C and back to the Mingo S file, and ram to replace inner with child C. If I set this file, now you can see, we successfully change our inner background color. R. Now, let's top out the another command, which is parent no. There is not too much different between parent element and parent node. Some duplicate this line and coven out previous one. Haram type parent no. Parent, no. If I set this file, as you can see, it's written the same result. But the main difference is, if we use parent element, and if the parent element is not available, then it's going to return null. If we use parent node, and the parent element is not available, then it's going to return something. Let's make it more clear. I'm going to remove the style portion. I want to return parent node. If I set this file, now you can see in my console is written inner because the parent of C child is inner element. But if I get to my index dot estim file, as you can see, in our estimL tag, there is an ID, A, and I'm going to copy this ID. And back to the Min Do JS file, and I want to pass the ID name. Now I want to return the parent element of HTML tag. After set this file, as you can see is written the document. It do not return N null. But if I pass parent element here, let me show you. I'm going to replicate this line and comment on previous one and he on to pass parent element. If I use this function, I set this file, as you can see, is written null because there is no parent element of TML tag. This is it for this tutorial. In the next tutorial, we're going to learn children and child methods. Thanks for watching this video, stating. 73. JavaScript Children & childNodes Methods Tutorial: Good to see you back guys. Again, I'm back with a new tutorial related dom traversal methods. In this tutorial, we're going to learn children and child node method. In our previous tutorial, we already learned about parent node and parent elimate. Let's see, what is the difference between children and child nodes? As you can see, side by side, I open my Visa Studio code editor and my browser using Life Sever extension, and I already opened my previous est document, Index dot stable file. With that, we open main dot JS file. Basically, using this methode, we can target children using the parent node. In our previous tutorial, we target the parent node using children. But in this tutorial, we are going to target children's using paren. Let me show you the demonstration. First, I'm going to target the outer element children. Here I want to pass the ID name outer. Here I want to return children. I want to use children method. Children. I'm going to set this file. If I show you my console, you can see my console, it st etable collection. Here you can see my console, it return total two children, H two tag and in a deep section. If I show you my estable structure, as you can see, inside the outer deep, we have total two children. In a deep section, and H two tag. That's why it two element. If I target the inner element and I want to return all the child tag from inner element, here I want to tie inner. And I'm going to set this file. Now you can see in my cs section, it's written total six element, length six. Our first child element is H two tag, and other five elements are deep tag. If I want to target the particular children, suppose I want to target C. For that, heroin to square basis. I set the square basis, we need to pass the index number. As you can see the index number is three. So to pass three here. After set this file, you can see the result. It's written this child element, C. Now, let's set a style to this targeted deep. For that, I want to reck this line and comment out previous one. I'm going to review the variable in. Aro type Do dot git element by ID and the Dems and the parent dinams inner. Also I slate the child element. Children set the square ases three. How do we need to use style function, Style dot background. And I want to set red background color. So type equal to inside the double tes red. If I set this file, you can see the result. As you can see, it apply red background color to our third children. If I want to print the inner este of this element in my console, let me show you I to type children dot inner estim. The set this file, as you can see in my console, it's print C. This is the usage of children methyl. Now let's talk about child. I'm going to comment out this line, and also, I'm going to duplicate this line and comment out previous one. Here I'm going to tie dot child role. I'm going to set this file. Now you can see in my Coe section, now you can see its length is 13. As you can see it's con all the cheers from the inner section. But as you can see in our first index, it's citin text. Now the question is, what is that? If I go on H two section, you can see it highlight this section. But if I over text section, it doesn't highlight anything. Now you might have quo, what is the text node? From where it come. Suppose if you use any character like entire space on your code, then child node also count as an element. Let me show you that. Let's d to the Ixode estimate file, and here, I'm going to comment one of the D element. This D B, I'm going to st this file. Now you can see my console section, it's also written the comin If I open this comment, as you can see, there is an attribute named Data. Also it return what is inside the comin. Similarly, if I open our zero index, as you can see, a certain new line character. Backslash eight, Child lodes count, everything. Similar to the children method, we can set any text in our element. Otherwise, we can change background color. Otherwise, we can apply any style. Here only to pass the index number. If I pass one, so I'm going to pass inside the square basis, one, and then I'm going to apply styled background color, which is red. Copy this line. And paste it here. If I set this file, you can see the result. It is apply red background color to this child load element. You can do everything. What can you do with children method? But the main difference is, child load counts everything as an element. This is the basic difference between these two methods. Thanks for watching this video, state tune for our next to. 74. JavaScript firstChild & lastChild Method Tutorial: Good to see you guys. Again, I'm back with a new tutorial related dom taversal method. In this tutorial, we're going to learn first child method and last child. In our previous tutorial, we already learn about parent node and children nodes. In this tutorial, we're going to learn about first child, first element child, and last child. Also last element child. Without wasting your time, let's sir practical and see how we can use it. Are you can see a dom chart, and A is our parent element, and BC DEF is the child element of A. If I ask you, who is the first child of A element, then B is the answer. B is the first child of A element. Similarly, if I ask you, who is the last child of A element, it is A. A is the last child of A element. So Let's start the practical. As you can see, side by side, I open my visa studio code editor and my browser using Live Server extension, and I already created an Stable document name index dot Stable. Also, you can see in my body tag, we have outer bee inert dev and some child devs. Also we link a JS file with this Stable file. Min do Js. At first, I want to return the first element child of this inert D. At first, I'm going to remove this unnecessary lines. I don't need it. And then I want to select, document or get element by ID inner. We target our inner element. Then I'm going to use our function name, which is first element child. So tag first element child. If I set this file and show you why console, it's going to return S two tag. Let me show you. If I show you why console section, as you can see, it's written inner. Be heading two is the first child of inner element. You can see the S two tag inside the inner element. After target this element, we can do anything with that. Suppose I want to return inner STL. We type dot inner STML. If I set the soil, you can see my console, re this keyword inner. Also, you can add any style to this element. Suppose I want to add a background, dot style dot background. Equal to and I want red color. If I set this file, you can see the result. It add red background color to this S two tag. Remember, first element child always target the first STML tag. At the opposite way, we have another function, which is st element. So duplicate this line and comment out previous one. And Herm type t element ch. If I set this file, you can see the result. It add red background color to our last element, which is E. E is the last child of in a D. Now, let's truck out another method, which is first child. So to pick this line and comment out previous one. If I select first child are sumo type dot, child, and smog to end this line, and set this file, as you can see is st text. It written a text node. If I open the text node, as you can see inside the data, we have new line character. It's mean we use the enter character for a new line. Now, H two is not the first child of this inner element. Now the first child is the enter between inner deep and H two tag. I want to say this function count all type of element as a child. Whatever character you use, it counts as a child. This was the basic difference between first child and first element child. First element child, always written the first este tag. But first child always return the first character. If you use any space, otherwise, new line, in that case, it count as a first character. In our previous lecture, we already learned about it. It also count comment as an element. Now let's talk about our next function, which is last child. I'm going to pick at this line and comment out previous one. Here, I'm going to tie Last child. If I set this wild, you can see the result. Again, it's written a text node. If I open this text node, as you can see the database is new line. If you want to apply any style to this element, it's not possible because these characters are invisible. If you try to do it forcefully, then it's going to return an arrow. Let me show you. I'm going to apply style to this last element. This last child. D style dot Dag ground ad. If I set this file, as you can see, in my console, is s err type error. We cannot style text nodes. Let me show you another example of first child Beth hood. I'm going to comment out this line and uncomment previous line. And here I'm going to change this selector, and I'm going to use this selector, child C. I want to pass this ID. If I want to return the first child of the child C element, after set this file, you can see in my console, is written character C. Because if I show you my index Dot a stable file, as you can see, inside this de element, we have only one character. C. There is no space, no new line character. Similarly, if I return the last child here, some to type, some to pit this line and comment of previous one, and here I want to pass Last child. Last child, as you can see, again Stan character C. I hope now these concepts are clear for you. Thanks for watching this video, Ste tune for our next tutorial. 75. JavaScript nextSibling & previousSibling Method Tutorial: East, good to see you back guys again I'm back with a new tutorial real ted dom traversal methods. In this truial, we're going to learn next sibling and previous sibling. In our previous tutorials, we'll learn about parent node, child node, children, first child element, et cetera. In this tutorial, we're going to cover next element sibling, next sibling, previous element sibling, previous sibling. Before start the practical, let's try to understand what is the difference between next sibling and previous sibling. Here you can see a dom chart. A, A is the parent element, and BC DEF is the child element of A, and these are all sibling elements. If I ask you, who is the next sibling of D element, and the answer is A, E is the next sibling of D element. If we ask you, who is the previous sibling of D, and the answer is C. That's the basic different between these two elements, next and previous. If I want to find the previous sibling of B element, as you can see, there is no previous sibling of B element, but there are the next sibling of B element, which is C. Without wasting your time, let's start the practical and try to clear the concept. As you can see, side by side, I open my visual Sudio code editor and my browser using Life Server extension, and I already create an STL document named index dot HTML. As you can see in my browser, we have outed De inner De and some child elements. You already familiar with this structure. Let's jump into the Mando JS file. At first, we are going to start with next element sibling. As you can see in my Mando J five, we already target this element, this C element, using its ID, child C. If I show you my Index dot STL file, you can see the ID name. Child C. Here I'm going to tie Next element sibling. Next element sibling, and I'm going to set this file. After set this file, as you can see, it Sten our next element, which is D. Similarly, if I written previous sib, someplicate this line and comment out previous one and to type previous element sibling. Previous element sibling. After set this file, you can see it's ten B element, this one. Using those function, we can target previous element, otherwise, next element. After target this element, also we can apply style. Let me show you. Here type dot style, do background. Equal to e set the double cos rate. After set this file, you can see the result. As you can see, it add red dground color to the previous element. Also, if you want to return the estel of this element, yes, you can. Just in to tie.in a estel. If I set this file, you can see my console, it's return on the character. B, and now I want to return the next element sibling of E element. For that, I'm back to the index dot estim file, and I'm going to set an ID to this element. ID equal to child E. And I'm going to say this file. Here I'm going to type E, and I want to return the next sibling of this element. Here I'm going to type next element sibling. If I set this file, as you in the console, it's ton null. Because after e element, there is no sibling element. That's why it's ton null. If you want to apply any style, then it's going to return arrow in our console, because there is no element after E element. These two methods are used to target element. But our next two methods can target anything. It can target text nodes, otherwise comments, et cetera. You already familiar with that. Now I'm going to use next sibling method and previous sibling method. Again, I'm going to dict this line and comment out previous one, and I'm going to tie previous sibling. Revers syning. If I set this file, as you can see in my browser, it's written text. It's written a text node, and as you can see, it's written a newline character. If you remove the new line character between D and E, then you're going to return D element in my console. If I try to remove the newline character and if I set this file, for now, it's not going to work for me. Because my vis studio code editor automatically pritify my code and add a new line to end up this estable element. If I set this file, as you can see it add a new line. That's why again it written text mode. Somehow, if you can remove the newline character from this line, in that case, is going to return the element. At the same way, next sibling method work. If I type, next sibling had, next sibling, and then set this file, as you can see, again, it written text lode. Because this function can count character, spaces, moments, as a javascript node. That's why ton ticks. 76. JavaScript createElement & createTextNode Tutorial: Hello, guys, good to see you back. Again, I'm back with a new tutorial related Java scrip dom. In this tutorial, we're going to learn Dom create methods. Basically, in JavaScript, we have total three create method. Create element, create text node, create comment. Let's try to understand these methods. Suppose you want to add an estimate tag in your document, using JavaScript. You want to add a new paragraph tag on your document. You can add any tag you want. To put a tag in your estimate page, you need to use a method, and the method name is create element. If you want to type text in your estim document, for that, you need to use this method. Create text node. Suppose you want to add this text in your document. For that, you need to use this method. Create text lode. If you want to add a comment in your estimate page using the Help of JavaScript for that, you need to use this method, create comment. Let's start the practical and see how we can use it. As you can see, side by side, I open my visa Studio code editor and my browser using Light Server extension. I already create an estimate document named index dot Stable. Inside this estimate document, we have a heading tag. Dog create Mthods. Also we link with a JavaScript file, Dong create dot JS. In this JavaScript file, I'm going to use all the create methods. First, we're going to create an element in our document. Here I'm going to create a variable. And our variable name is new element. Equal to document dot dot and our method name, which is create element, create element. Create element inside the round recess, inside the double codes, and inside the double codes, we need to pass the tag name, which is paragraph, P, and Sebgor to this slide. Then I want to print this variable in my console. Here, I'm going to type console dot log, I say the round ss or variable, new element, new element. Then seg two this line. Are spt this file, I I show you my console, as you can see, print our tag name, P. Similarly, if you want to create different tag, suppose you want to pate S to tag. For that, you need to type S two at the double codes, and you need to set this file. As you can see, it create heading to tag. You can create any et element using this method, create element. Now I'm going to show you how can we create text node? For that, I'm going to take another variable, that and the variable is new, new text, equal to, I'm going to call our new method, which is create text node. Document dot create text node. Then inside the round press and inside the quotation, we need to pass the text and on to pass Have the world. And score two in this line. I'm going to set this file. Before I set this file, also, I'm going to print this variable in my console. I replicate this line and here I'm going to pass new text. If I set this file, as you can see in my console, it print the text, hello world. Here you can insert thousands, thousands of character as much as you want. Now I'm going to show you how we can add comment to an estim document using the help of Java Screen. Again, I'm going to create another variable that and our able is new comment, new comment. Equal to document dot comment, create comment inset the double codes, just on to type the comment. We don't need to use any greater than sign otherwise exclavation sign. For now, I'm going to type this is comment. And then I'm going to print this variable in my console. I wanted to pick this line and here to pass new comment. New comment. After step this file, as you can see my console, it's print, this is comment. Here you can see the este comment, less than sign, esplal sign, d, this is comment, and g an sign. As you can see using JavaScript, we can create este element, text, comment, et c. In the next turial, we're going to insert this text node inside this element. This is it for this sutural. Thanks for watching this video, statue. T 77. JavaScript appendChild & insertBefore Tutorial: Hello, guys, good to see you back. Again, I'm back with a new tutorial related Java script dom. In this tutorial, we are going to learn Java script dom Apen Mthods. Basically, in JavaScript, we have totaled two Apen methods. APN chan and insert before. Let's see, what can we do with that? In our previous tutorials, we learn how we can add estemL element in este page using JavaScript. For that, we use Pt element method, and also we learn how we can add text in este page using JavaScript, with the help of create text no. Now the question is how we can join this text with this element. I want to move this text inside this paragram, how we can attach it with an element. That, Java Strip introduce a special methode, which is a pen child. Using this methode, we can add text with an element. Not only that, using this methode, also we can attach this element with another element. Let's start the practical and see how we can use it. As you can see, side by side, I open by Visual Studio code editor and my browser using Live Server extension, and I already create an estable document named index dot Stable. Also I link a JavaScrip file named M DoJ. Here you can see, we create a deep element, and I also style this deep element. We set hide we, padding and margin. And if I show you my main dot JS file, as you can see, we already create an element using heading to tag. With that, we also create text hello world. If I show you w console, as you can see, we have heading to tag and the text node, hello world. Now we need to attach this text with this element. We need to append this text node in this element. For that, we need to use append method. Here I'm going to type the M, which is new element, new element. In this new element, I want to append the text node. I'm to type dot Apen a paint child. Inside the round recess, we need to pass the variable m, which I want to a paint, and I want to paint new taxes. I copy the variable m, and I'm going to paste it here. I'm going to pin this slide. If I set this file and show you my console, as you can see, it append the text lote in our new element section, which is heading two. It's successful append the taste inside the heading two. Now I want to show the heading two inside this deep element. For that, again, I'm going to use Append method. Inside this Dan deep, I'm going to append the element. If I show you my index doe estable file, as you can see, there's a D with ID name taste. I'm going to copy this ID name. Les that to the Min DoS file. Ho type, after Append Methode with new element, A type document dot get element by ID inside the round ss, we need to pass the ID name, which is taste. Then I'm going to use the method, a pain child, a paint child. Then inside the round basis, here I want to append the new element. Copy the variable name new element, and I'm going to paste inside the round bases. Sub in this line. After step this file, you can see in my browser, it print hello world. It append the element in our deep container. If I inspect this section, as you can see, inside this deep, we have an element, H two, and it's print hello world. But if I show you my index dot Stable file, as you can see, there is no element name H two. Also, there is no text, hello world. As you can see how we can use append method function two time. First, we append this text in this element. Then we append this element in this deep element. This is how we can create text node otherwise element and we can attach it with existing element. Remember, this append method always add the element, otherwise text node, end of the parent node. Let me show you. Here, I'm going to add some paragraph. I'm going to use P tag, paragraph, and mo type some text, level ten. It's going to add ten word of sentence. After step this file, as you can see, here you can see after end of this paragraph, it add the to element. Remember, a pen method always add the element and the last position. If you want to add this element before the paragraph, for that, we have another method, which is insert before. Now I want to move this heading before the paragraph. Let me show you how we can use it. I want to at this line and comment out previous one. Hm to tie insert insert D four. Then instead the undress, we need to pass total two parameter. First in our first parameter, we need to pass the element name, which element I want to appent in our deep, and I want to appent this element, new element. I copy this element name and I'm to paste it here. C now we need to pass the position, where I want to append this element. But before I pass the second parameter, I'm going to create the target of this parent element. Hm type, document dot get element by ID, inside the round races taste. I'm going to assign this target in a variable. So type where and our variable s target. Target equal to this location. Now I'm going to replace this vector with this variable target. I'm going to type target dot insert before, inside the round races new element. Now in our second parameter, I'm going to type target dot. And I'm going to specify the position. Inside the square press, I'm going to type z. It's mean I want to put this new element before the zero index. If I set this file, now you can see in my deep, it move the new element before the paragrap. If I show you my element section, as you can see, first it print new element, then our paragra. This is how we can use insert before Mthd. I hope now it's clear for you, how we can use a penile method and insert before method. Thanks for watching this video, state tune for our next tutorial. 78. JavaScript insertAdjacentElement & insertAdjacentHTML Tutorial: Hello guys, good to see you back. Again, I'm back with a new Tutorial related Java strip doom. In this tutorial, we're going to learn Java script, insert adjacent methods. In our previous tutorial, we learn two Javascript apen methods, APNchan and Insert before. It is used to append existing element and text node to a parent element. A Penhild always places the element at the last position. To use Insert before, we need to specify a position. And this method, append the element before the specified position. We already learned about it in our previous tutorial. After that, we have insert adjacent element, insert adjustin estML, and insert adjacent text. This three methode also used to append the element. But there is a different between this three methode and this two methode. Our previous two methode is only used for appen purpose. It can append the existing element, otherwise, text element in the pain element. It cannot create the element. It is used to only append the element, but our last three methodes can create the element, also append the element. I want to say if you use these methods, Then you don't need to use create element method and create text node method. Before start the practical, let's try to understand what is the difference between all of these three methods. Suppose you want to create a estimate tag with the same time, you want to append it. I want to create this paragraph tag at the same time I want to append it. For that, we need to use this method. Insert adjust an element. If we use this method, at the same time, it create the element, also, it append the element. But if you want to create tag and text node at the same time, in that case, you need to use this method. Insert adjacent St. Here you can see, we create a paragraph, also insert the text node inside this paragraph. Using this method, we can create text node, we can create element. Also we can append the element. We can do three test at one. If you want to create a simple text node, for that, for that, you can use insert adjacent text methode. This method can create the text, also, it can pain the texts. You're already familiar with that. What can I do with this methods? With that, also we can provide a specific position. So Let's try to understand the position where we can position our elements and text nodes. The positions are before begin, after begin, before end, and a to eight. We have total four different position. Let's try to understand the positions more clearly. Suppose we have a deep container. Inside this deep container, we have a test. Now we need to create this text node with H one element, and also we need to append this element inside this deep. Now, if I use before begin position, in that case, it's going to append the element before the deep start. If I use after begin position, in that case, then it's going to append the element at the first position inside the container. If I use after end position, then it's going to append the element after end of this container. If you use before end position, in that case, it's going to append this element in that position. Inside this dep container, it's going to position it last place. This is how we can use this position. Without wasting your time, let's start the practical and see how we can use it. As you can see, side by side, I open my Visa Sudo code editor and my browser using Live Server extension, and I already created an est document name index dot estel. With that, I create a JavaScript file, Main door JS I also link this file with this estable page, Min door Js. Also, you can see, we have a deep element in our body tag, and I set an ID to this deep element, which is taste, and inside this deep element, we have a paragrap. We're going to start our practical width insert adjust an element. Let's jump into the main DGS file. For that, I'm going to create an element. Here I'm going to tie and our variable name is new element, new element equal to here, I'm going to create a heading element. Here amount of type, document create element, create element. Inside the round press, I want to create a heading two element. He I press H two. Then score two this line. Now I'm going to create a text node because we need to insert the text node inside this heading element. Hem and our variable is new, new text, equal to document dot, create text node, Create text node. Is the round press, I'm going to pass a random tax. I'm going to type hello. And semicl two in this line. We create an element and a text node. Now we need to appen this text node inside this element. But before I'm going to explain what is insert adjacent element, and now we need to create a target. First, I'm going to create a target. I want to target this deep element. If I show you my index dot ester file, as you can see, in this deep, we set an ID ID taste. I copy the ID name taste and back to the main DoS file and Ham to type and our Name is target. Equal to document that get element by ID, inside the round races, our ID name fates and semicon two in this line. We create the target element, why do I want to apaint this H two element. Now I'm going to use insert adjacent element. So to type target dot insert adjacent element inside the rounds inside the doubles, H do we need to pass two parameter. First, we need to pass the position. Where do we want to put the element. I'm going to assign the position and I'm going to type before begin. In our second parameter, we need to pass the element name. Here I'm to type new elem. Copy the variable new element, and I'm going to paste it here. And suegra to this line. If I set this file, it's not going to reflect in our web page because we do not append the text node in this element. But if I show you my element section, you can see inside this body. Before this de element, we have H two element. If I show you my indexed ST file, as you can see, before the deep element, we don't have any H two element. We have H one element. But in my element section, you can see the element name, H two, and now I'm going to append this text node in this element. For that, we need to tie new element dot, we need to use append child method, append child inside the round verses, the variable name, new text. Sebago to end this line. If I set this file, now you can see the result. Now you can see in my browser. It append the new element before this de element. Now you can see our element is outside of this element. But if I change the position, soft brict this line and comment out previous one, and arm type up to begin. After beginning. If I set this file, you can see the result. Now it's appending new element, beginning of this D. Now I'm going to talk about our new method, which is insert adjacent Stem. For this method, would only to create a sL element and text node. I'm going to comment out both of this line. Also, I don't need a pin child method. I'm going to comment out it again. Just we need the target element and our method. Now I'm going to call the method name. Hm type, target the insert adjacent STL. So to replace element with STMl. Then then in our first parameter, we need to pass the position. In our second parameter, we need to pass the element and the text node at once. Let me show you. Inside the double codes, I'm going to type H two. Also close this t, H two. And here I'm going to type hello world. And I'm going to set this file. After I set this file, as you can see, it's written the same result. Just using this method, we can create the text node, we can create the element. Also, we append the element at this position. Successfully insert this element at this position. This is the usage of insert adjacent estable method. At first, we target the de element and stored it in this variable name target. Then we apply this method to this deep and and in this function, first, we pass the position, then we pass the text node and the element. If you want to change the position, yes, you can. So types after n. After set this file, you can see the result. Now it's at the element up to end of this deep. On by one, you can check out the positions. So if we use this method, we can skate this three line. This is the benefit of using this method. Insert adjacent table. We don't need to create the element, we don't need to create the text node, and also we don't need to append the text node in this element. We can do the same thing in a single line. Now, let's talk about our last method, which is insert adjacent text. Basically, this function create text node and append it, nothing else. I'm going to duplicate this line and comment out previous one. Hm to type insert adjacent text. In our second parameter, I'm going to pass a simple text, hello world, not the element name. If I set this file, you can see the result. Here you can see after end of this deep, it adds the text, hello world. If I show you my element section, and body section, as you can see, after end of this deep, it adds the text, hello world. This is the usage of all of these three insert math. I hope, now it's clear for you. If you want to change the position one by one, in your first parameter, you can change the position. I don't want to make this topic more complex. I want to keep it as much as simple as that. In the next tutorial, we will learn how we can replace the existing element. Also we can remove the existing element. This is it for the tutorial, state tune for our next tutorial. Thanks for watching this video. 79. JavaScript replaceChild & removeChild Tutorial: Hello, guys, good to bag. Again, I'm back with a new Tutorial related dom. In this tutorial, you are going to learn to Java strip methods. Replace child and remove child. If you want to replace and remove TML tag using Java Script. For that, you need to use those methods. Replace child and remove child. Let's start the practical and see how we can use it. As you can see, side by side, I open my Visual Studio code editor and my browser using Live Server Extension. I already create an estL document named index dot Stable. Inside this document, as you can see in our body tag, we have UL tag. Means unordered list, and we have total four list item. These are all foot names, orange, apple, grapes, and banana. At first, I want to replace our first list item with another foot name. As you can see in our first list item, we have orange. Let's back to the Min DojS file. At first, I'm going to create a new LI tag. I'm going to create the new element. So type that and our very we name is new element. New element. Then equal to document that create element inside the round recess, or element name, which is list item, L, and now we need to create the text. I want to say text node. Here I'm going to type or very name is new text, new text. Equal to document dot create text node, text node, inside the round recess inside the double cos, for now, I'm going to type a foot name, and the new foot name is man. Now, we need to append this text mode in this element. As you know, for that, we need to use Apenhild method. Hm type, new element dot append. Is that the round res is, the variable name, which is new text. And subg two in this line. Now we need to target the parent node from where we want to remove the list it. As you can see, we have an ID in our parent node list. Copy the ID name list and back to the Mando JS file. Now I'm going to create the target variable, and our variable name is target. Equal to document go get element by ID. I set the round press, the variable a last and s2n this line. We target the parent node and store it in this variable name target. Now I'm going to target this child element. I'm going to create another and our variable name is old element, old element. Equal to target dot, children method. Then inside the square press, we need to pass the index number, which is zero, and semicon two in this line. I'm going to set this file. If I print this very variable in my console, let's print the variable in our console. Hermoty, console dot log, I set the round recess or variable old element. Old element, and Sub two in this line. After set this file, if I show you my Cso section, you can, it's written the list item. I set this list item, we have the wave orange. It's written the first LI tag from our list. Now I'm going to comment out this line and I'm going to use replace child method. I'm going to type target dot replace child method, replace child. Then inside the round process, we need to pass through the two parameter. Inside this round process in our first parameter, we need to pass from which element I want to replace with. I want to replace with new element. Hm type new element. In our second parameter, we need to pass which element I want to replace, and I want to replace our old element. I want to pass old elem, and Smc to n this line. After set this file, as you can see in my browser, it replace orange with mango. If we change the index number here, I'm going to pass two. I set this file. Now you can see, it's going to replace grabs with mango. I hope that's clear for you how replace chil method works. Here you can replace any type of tag using this method. You can replace Dip tag, table tag, paragraph tag, whatever tag you want. Now, let's talk about our another function, which is removed ch. Now I want to remove the first element from this list. At first, I'm going to comment out all of this slide. Then he need to pass the index number, which I want to remove. Some have to pass Index zo. Now I'm going to use the method name Remove child. So I'm going to get this line and comment out previous one, and Hermo type target dot remove child. Remove child. Then at the und press, he need to pass only one parameter. And our parameter name is old element. Some type, old elem. Now I'm going to set this file. Per set this file, as you can see, it's removed orange from this list. Now we have total three fruits name in this list, Apple, grapes, and banana. This is how we can remove any child element from this list. If I change the index number, so here, I'm going to pass index two, and set this file. Now you can see, it's removed another fruit from this list. This is how we can use remove child. Thanks for watching this video, stay tuned for our next tutorial. 80. JavaScript cloneNode Tutorial: Welcome back guys again back with a new tutorial related Java script dom. In this tutorial, we're going to learn Java script clone node. Using this method, we can clone N nodes. In your left side, you can see a order list, mango, banana, grapes and apple. In our right side, we have vest list, art and dish. Suppose I want to copy grabs from the foot list and I want to paste it in the vestable list. For that, we need to clone the tag of these grabs, and we need to use the method name prone node. So Let's see how we can use it practically. As usual, side by side, I open my Visual Studio code editor and my browser using Lis server extension, and I already created an estil domain name Index dot estil. With that, we link with the Min dogs file. Min dots. For now, it's an empty file. Also, you can see in my body tag, we have totaled two und list. Also we assign ID to this list, Last and Last two. Now I want to copy the first LI tag from this list, and I want to paste it inside de list two. For that, we need to use a method name Cron none. So let's jump into the Minto JS file. First, I'm going to take a variable, and our very we is target. At first, we need to target the element, which element I want to clone. I want to clone list one equal to document D get element by ID. Isd the round ress the doule cote we need to pass the ID, which is list. As you know, here we need to use children method. Type children. Children inside the square press, we need to pass the index number. At first, I want to copy orange. Ho to pass zero, and Seb to this line. Now we need to copy this element using rode method. Here, I'm going to create another variable, and our variable m is copy limit. Copy element. Equal to target clone node method. Clone node. For now, I don't want to pass any parameter, but her can pass two parameter, true other falls. Now, let's pt this variable in our console. Hermo type console log is at the round press or variable copy element. Copy element. So to in this slide. After I set this file, if I show you why console section, Here you can see it copy only the element name. It did not copy the text, which is inside the LI tag. Because as I told you, clone note come with two values. By fall, it's come with forms. If I pass false parameter here, in that case, it's going to only copy the attribute and the tag name, not the value. Let me show you the example. Here, I'm going to pass a class name. Class, and the class name is x y z. I'm going to set this file. Now you can see in my console. Copy the tag name with class attribute, x y z, but it do not copy the value which is inside this tag orange. If you want to copy the inner value with that, in that case, you need to pass true value. I'm going to pick this line and comment out previous one. I'm going to pass cruel. T through. I'm going to serve this file. Now you can see the console. It's copy the tag name, also the attribute, and the value orange. Successfully copy the element. Now we need to append this element in our second list. To append this element, we need to use Apen method. Here I'm going to type document dot get element by ID, and the Dame is L list two. Last two. Successfully target our second list. Here, we need to use a method name, which is a pin child, append child. A Apen child, I want to append this copy element. I copy the variable ame, copy element. And I set the double cost, I'm going to paste the value, copy element, and subcon to end this line. After set this file, as you can see in my browser, it appen the foot name in our new list orange. Basically, we clone the element from the list one and paste it inside the list two. I hope, now it's clear for you, what is the usage of Clone node method? This is it for this teral. In the next tutorial, we are going to learn about contains method. Thanks for watching this video, stating. 81. JavaScript Contains Method Tutorial : Hello, guys, good to see you there. Again, I'm back with a new tutorial related Javascript dom. In this tutorial, we're going to learn JavaScript contain method. Here you can see a deep, and we st an ID to this deep, which is outer. Inside this outer deep, we have total three child deeps. And I want to search an ID, which is inside this outer container. Suppose I want to search inner ID. After target the outer element, I want to search. I want to search a child element ID, which is inside the outer D. For that, we need to use contain methods. And this method written only two type of wave, Trough either falls. As you can see, this d is child of Outer deep. It's going to return. But what? If we use the ID in a grandchild element, I want to say inside the child element of Outer deep, I create another child, and then I set this ID to this child. Now, it's a grandchild element of outer D. But how do we target the outer de? Research, is there is an Ina in in this container or not? Whatever element you use, if the ID is still exist in this container, in that case, is going to return through. Other is going to return form. Simply, I want to say, if the ID is exist inside this outer dip, it's always st and true. Without wasting your time, let's start the practical and see how we can use it. As you can see, side by side, I open my Visa Studio code editor and my browser using Live Server extension, and I already created an est document name Index dot HTML. With that, also linked a Javascript file with this document. O JavaScript file name is main dot JS file. For now, it's an MT. If I back to my Index dot estable file and as you can see in our body tag, we have a container with ID name taste. Inside this container, we have a paragraph tag and another deep element. In this deep element, we have another child paragraph. In this paragraph, we set an ID name ABC. Now, this paragraph become grandchild element of this ID name taste. Fast, we need to target the parent element. Let's d to the Minder e file. Here, I'm going to create a variable. W and our variable name is parent element. Parent element. Equal to document dot get element by ID, the rounds, is the double codes, and the IDM is taste. Then sum two in this line. Now I'm going to target the element, which ID is ABC. Here I'm going to create another variable. W and our variable is target. Target equal to document dot get element by ID inside the round process inside the double codes, the ID name, ABC, the sb in this line. Now I'm going to search this ABC ID in the test container. If the ID is exist, then it's going to return t. Otherwise, it's going to return false. Let's find the ABC ID in the test element. For that, again, I'm going to create another variable, and our variable as find. Equal to parent element our method, and here I'm going to use contains method. Contains inside the round ress now we need to pass which element I want to find. Here I'm going to find the AC element. We need to pass the variable m. Target. I want to search the target elem The circ going to end this line. Now, let's print the variable in our console. Here I'm going to type console dot log inside the round ss, the variable limb. Fine, and semicon to n this line, and semicon to n this line, and I'm to set this file. If I show you my console, as you can see, it's ton true because our target ID is available inside the parent element. But if I change the ID name, so Hm to replace AVC with x y. Then set this file, now you can see it's ton falls, because this IDs not exist in our document. This is the usage of contains function. I hope now it's clear for you. Thanks for watching this video, state tune for our next tutorial. 82. JavaScript hasAttribute & hasChildNodes Tutorial : Hello, guys, good to see you BA. Once again, I'm back with a new Tutorial related Java Script Dom. In this tutorial, you're going to learn has attribute and HHI attributes. We are going to learn these two methods in this tutorial. Here you can see, we have a D with ID name taste. With that, we have a class named ABC, and it contained a text hello world. Now you want to check, is there any attribute without ID in this element? At first, I'm going to target this element using its ID. Then I want to search. Is there any other attribute without ID in this element? For that, we need to use hash attribute method. This method going to return on a t result. Trough either false. This method always return en value. If the attribute is available in this element, in that case, it's going to return true. Other, it's going to return false. Wout wasting your time, let's start the practical and see how we can use it. As you can see side by side, I open my Visa Studio code editor and my browser using server extension, and I already create an estimate document named index dot estimL. With that, we create Minot JS file. Also I attach Mando JS file with this estim document. As you can see in my body tag, we have a deep element, and in this deep element, we have an ID name taste. Inside this deep element, we have two child elements, H two tag and a paragraph tag. At first, in my JavaScript file, I'm going to target this deep element. I to copy this ID name taste. Then back to my major JS file and H tie. There there, as usual, we need to create a variable, and our variable name is target. Target equal to document dot get element by ID, inside the round brass and inside the double course, I'm going to pass a val. We need to pass the ID name, which is taste. Let's seg to end this line. Next, I'm going to find the class attribute in this target element. Here, I'm going to create an other variable there and our variable is fine. Equal to or V m target dot. Now I'm going to use the method has attribute. Attribute. Then inside the round process inside the double codes, we need to pass the attribute name and our attribute name is class. Inside the double codes, I'm going to type class and Semg to in this line. We already know that there is no class available in this elevate. Let's pt this value in the console. So to type console dot log inside the round ss or variable limb. Find. Then sub two in this line. After step this file, if I show you my console, and you can see it's written falls because there is no class attribute in this element. Only we have only one attribute, ID. Now I'm going to pass the attribute m in this element. Hm type class in the double es, and our class theme is x y z. I'm going to set this file. Now you can see my console, it's written through. I now it's clear for you. How can we use has attribute? Now, let's talk about our next method, which is has child los. As you can see, there is a deep, and I want to check, there is a child element in this deep or not. Suppose I pass a simple test in this de. In that case, has child node methods return two true other forms. If any type of child available in this de, in that case, is going to return true. Let's jump into the Visa studio core and see how we can use it. As you can see in this deep, we already have two child element, heading and a paragraph. Now I'm going to use H child node methods. Some do to wet this line and comment out previous one. H going to type target dot has child nodes. How we need to use the round places. Inside the round braces, would need to pass any parameter. If I set this file, now you can see it st untrue because we have child elements in this deep. I hope now it's clear for you how we can use this methods, hash attribute and has childs. Thanks for watching this video, stay tuned for our next tutorial. 83. JavaScript isEqualNode Tutorial : Hello guy is good to see you back. Again, I'm back with a new tutorial state Java Script dom. In this tutorial, we're going to learn a new method, which is Java Script equal. Here you can see a list, List A, and we have some foot name in this list. Banana grabs orange apple. With that, we have another list, List V. Also we have some foot names, Banana, guava, and pineapple. If you notice you can see, we have a matching foot name in List A and List banana. Now I want to compare List A first note with List V first note, banana and banana. Want to compare both the least items. For that, we have a method name equal loads and it's written only two value, true either false. It's always bleen value. If you compare both the list item, as you can see, these are identical. It's going to return true, but this method follows some parameters. We know both the least items are under list items. That's why it's going to return true. So it's match with one parameter. The first criteria is node type. If their node type is same, in that case, it's going to return true. The same criteria is node name. I want to say if first one is least item, it's also would be a list item. Otherwise, it's going to return false. The second criteria is, their node name should be same. We cannot compare list item with paragraph, otherwise, any heading tag, and the third criteria is node well. If we compare banana with Guava, in that case, it's going to return false. We need to compare banana with banana. Then this function return true. Next criteria is their child node should be same. If we use any paragraph tag as a child in list A, then we should use the same paragraph tag in list B items. Otherwise, it's going to return false. Also, they need to follow the same attribute. If this list item as with the class, also list b item *** with a class. Also their attribute al should be the same. If we use class X Y eight, also we need to use the same class x y eight. These are the basic criterias that we should follow in this method. So without wasting your time, let's start the practical and see how we can use it. As you can see side by side, I open my is Studio code editor and my browser using Light Server extension, and I only innate an estimate document named indete estimate. Also with that we attach a JavaScript file, Min dot JS. As you can see in my body tag, we have total two unloaded list. In our first list, we assign a ID. Last one. In our second list, we assign list two. First, I'm going to compare List one first lode with List V first node, and then I'm going to compare List one first note with second node of the least V. So first, I'm going to target this node. For that, we need to use this ID. So let's back to the Mando JS file. Here, I'm going to create a variable, and our variable name is target one. Target one, target one equal to the min, the gate man by ID, instead the Rundss would to pass the ID name. In our first under list, who have ID list one. So Copy the ID name, and I'm going to paste it here. Now, we need to select this node, first node, orange. For that, we need to use a method, which is first child. The first element child, I subg to n this line. Now I want to compare orange with Guava. I'm going to compt this line and I'm going to change the variable name. Target two. Here, also I'm going to change the ID name, st two. I'm going to compare list one first element with list two first element. Now I'm going to compare both the roads with is equal method. For that, I'm going to create a variable equal. Equal equal to target one dot, our method name, is equal, is equal. Instead the round recess would need to pass the second variable, and our second variable name is target two, target two. The sb two in this line. Now I'm going to print equal variable in our console. So type console Do log is at the round ss, our variable name equaled and s to in this line. As you can see in my console, its ten falls. If you notice, you can see, it's match all the criteria, but it do not match with node value. O first value is orange and our second value is guava. That's why this method written falls. Now I'm going to compare this node with the second node, orange and orange. For that, heroin need to use another method name which is children. Children inside the square press, we need to pass the index number. As you can see, the index number is one because our index start with zero. If I set this file, now you can see my console, it's written, and now I'm going to add attribute this to one item. Let's back to the index estable file, and here I'm going to add a class. Class. For now, I'm going to leave it back. After set this file, you can see my console, e reten falls. But if you notice you can see their value is same, their vote is same, but the attribute is different. Here we use a attribute name class. But if I pass the same attribute name in list two, let me show you H type class empty class. I set this file, now you can see it's written true. But if I use different class name, then what. Here going to use x y and z. In second class, I'm going to use ABC. If I set this file, now you can see again it triton forms because the class name is different. But if I use the same class name ABC and AC, and this of the soil, you can see is st and true. This is the usage of is equal lote function. Thanks for watching this video, St tune for our next studio. 84. JavaScript Form Events Tutorial : Hello, guys, good to see you back. Once again, I'm back with a new total related Java scrip. In this total, we're going to learn Java Script from Evin. In our previous tutorials, we already learn about some basic events, like click, double click, right click, mouse over, et cetera. But in this tutorial, we're going to learn some basic from events. These are all basic from events we're going to learn in the tutorials. First, we have some key press events like key down, key press, key, focus blur, and then we have some select events. We already learned about key down, key press, and key up events in our previous tutorials. We're going to start this tutorial with focus and blur event. As you can see side by side, I open my Vishal to view code eater and my browser using Live Server extension, and I already create an estim document name intext dot stem. As you can see in my estim page, we have a estil from, and we have two text field and one option field. As you can see, before the first text field, we use Name label, and then we use class label and our second text field. Then you show some country name options, like India, Pakistan, Nepal, USA, Japan. And you can see the estimable structure in my page. We have front tag, level, input tag, select options, et cetera. As I told you, we're going to start our practical with focus event. Now the question is, what is focus? Whenever I click on this name input field, as you can see, now it highlighted the input field with black border. At the same way, if I kick class input field, now it highlighted this class input field. Also, if I click on these options, now you can see, also it highlighted this section. This is called focus. This is the in build feature of browser. But we can customize it using on focus evil. At first, I'm going to assign a ID to this first input field. Here I'm going to type ID equal to F name. F name stands for first name. Then it's at the script tag, with that, also I'm going to add an event, which is on focus. So type on focus. Then here we need to provide a function name. O function name is focus function. Then I'm going to create this function inside this script tag. So Type, function cured, function, and our function name is focus function, sim copy this function name. Then we need to target this in boot field using its ID, which is fname. Here type docu dot get element by ID inside the round races, then inside the Crass inside the round races wanted to provide the ID name, which is fname. Then I want to apply a background color whenever I focus these input field. So I want to use dot style, dot, and I want to apply background color, equal to red. I want to apply red background color. Then semicon two in this line. Now, let's s the file and click on this input field. After click on this input field, as you can see, now our input field background color is red. But if I click on other input field, it's not going to work because we target this particular input field using its ID. Now I want to apply the same event in our second input field. For that, I'm going to copy this section on Focus event and paste it the second input field. But I'm not going to assign any ID to this input field. I'm going to leave it blank. Now you might have how we can select the second input field without the ID. Let me show you. For that, I'm going to use this keyword in our function. When we call our function, inside the round ps, I'm going to pass the this keyword. This. Also, I'm going to pass this keyword in our second input field. This. Using this keyword, we can apply this particular function in this particular input field, whenever we focus on it, and to handle it, we need to take a variable in our function. Inside the round press, we're going to take a variable name and our variable name is element. Element, and then I'm going to replace this section with this variable element. That's it. Now, let's set the file and reload the browser. This time, I'm going to click our second input field. Now you can see it's work on our second input field. It apply the focus event and change the background color. Similarly, if I click on name input field, also it change the background color of name input field. If I want to apply the same event in our country section, yes, we can. Just wanted to copy this function on focus event, and we need to paste it after this ID in our select tang. If I set this file and click on this country option, now you can see this time it apply the background color in our dropdown option. This is how it's work. Basically, we can use focus event in our input fields, options and anchor tanks. Now we have a problem. After focus our input field. If I remove our cars and click on other section, now you can see it still show background color. Now we need to remove this focus color. How we can do it? For this, we need to use Blur event. For that, at the same way, we need to use this event on focus function. Here I'm going to type the event name. O blur. Also in the double cos we need to pass a function name. So to copy this function name. Focus function, and I'm going to change focus function name with blur function. D. I'm going to do the same thing for the next input field. I'm going to copy this section and paste after on focus event. Also in our select option. Then I'm going to duplicate this function and just I'm going to change the function name. Focus to blur. I'm going to remove the color name and leave it black. I'm going to set this file. Now, first of, I'm going to focus the name input field. As you can see, the background color turn into red. But whenever I focus on this class input field, now you can see it remove the red background color from our first input field. This is how it's work. Now you understand how focus and blurry veins work together. Here you can use add event listener also. If you don't want to type this much of code. In our previous tutorial, we already learn about it. Now, let's talk about another event, which is this event apply when we try to feel the input field. Basically, we use this event with input field and text area. It do not work on CT box and radio buttons. Let's start the practical and see how we can use it. So Let's call the event in our first input section, and our event name is on input, and inset the double cods going to pass a function, and our function name is input function. Then in set the roundss, also, I'm going to use this keyword. Now I'm going to duplicate this section and replace the function with input function. Whenever I try to feel this input field, I want yellow background color. I'm going to pass yellow. I'm going to set this file. After set this file, first, I'm going to click on name input field, and I'm going to pass some text, a name, and name is add one. As you can see, when we type some text in this field, it stays the background color, red two, llue. This is the usage on input event. This is it for this tutorial. At the next tutorial, I'm going to cover the remaining events. Thanks for watching this video, state un for our next 85. JavaScript Form Events Tutorial II : Hello, guys, good to see you back. Once again, I'm back with another Tutorial related Java strip from events. In our previous Tutorial, we cover, focus Blur and input event. In this tutorial, we're going to cover, change, select, submit, and invalid event. Let's start with practical change event. As you can see, side by side, I open my visa studio code editor and my browser using Light Server extension. I open my previous TML document name index dot TML. As you can see, we have total two input field. Name class. With that, we have a option box. Name country, and Harr it provides some country name. And we are going to start our practical with on change event. Let me show you how. Basically, you can use on change event into text also select box. Also, you can use it in a text area. At first, I'm going to use the on change event in our select box. After on blur function, I'm going to call this event on change. On change, and our function name is change function. Change function. Now, also I need to define this function in our script tag. I'm to copy the function name, and I'm going to replicate one of this function section and replace this function change function, D. Also, I'm going to change the background color, which is blue. And I'm going to set this file. Now you might have question what change function basically going to do. This method works, when we lose focus from the input field. First, we need to build the focus in the input field. Then whenever we remove our cars, otherwise, remove our focus, then on change function called. Let me show you how. Now, as you can see, in our select box, we use change function. Also, I'm going to assign a ID to our select box, and our IDE is select. Then inside the script tag, we need to target this select box using this hiding. Here, I'm going to remove element and replace with document. The get element by ID is that the round process to provide the ID name, which is select DC. After set this file, I'm going to click on this select box. Now you can see, for now it call our focus function. But if I select any country, suppose I'm going to select USA. At click on USA, as you can see, the background color is change. Now it's turning to blue color because this type it's going to call change function, and it is possible by only for this event on change. This is the usage of on change. When I use the focus, otherwise, remove the focus, then it's trigger on change event. This is the usage of change. Remember, this change method work on any input field. We can use it with input box, take studia, et cetera. Now, let's talk about our gal event, which is select. This select event works after select the input field value. Suppose in our me field monotype name add one. Basically, it's going to trigger when I select this value. Let's call this event in our name input box. Input monotype on select. Then I m type a function name, which is select function. Now we need to define this function inside this script. Inside the script, I'm going to bigate this section. Then I'm going to replace the function name, change function to select function. With that, we need to target the input element using its ID. As you can see, the ID name is name, F name stars for first name. Here, I'm going to replace select to it, I name, and then I'm going to change the background color. And I'm going to say background color. Pin. After step is file, now, I'm going to fill a name in our name field, which is Raul? But if I select the scruten name using my cursor, now you can see, now you can see our input piel background color change into pink color because this time it's triggered on select function. This is how we can use on select function. Now let's talk about next from event, which is submit. Basically, we use this event in our front tag. We can trigger this event up, fill up the from and press submit button. Let's go to the visual stdio code and see how it's w. As you can see in my browser, we have a basic from, but we don't have any submit button. Let's create a submit button. Then inside the front tag, and below this elf tag, I'm going to take a input t input. Input, type, submit. Im to set this file. As this file, you can see, now we have a submit button, and now I want to trigger on submit event after click on Submit button. As I told you, we need to call this event in the front tag. As you can see, this is the front tag starting position. Then me at the front tag, I'm going to call this event on submit. And inside the double tes, I'm going to pass the submit tag name. Inside the double coats we like to pass the function name, and our function name is submit function. Now we need to define this function inside the scripta I'm going to copy the function name. At first, I'm going to replgate this section. Then I'm going to replace the function name. Fill function with, submit from function. Next, next I'm going to remove all of the unnecessary starts. Here I'm going to type console dot log in the round process the double code, you submitted a from. And Sec two in this line. And I'm going to set this file. After set this file, I'm going to open console panel in our browser. Inspect Czo. If I press the submit button, you can see it's not worked pretty well because in from in our action tag to pass a PHP path, otherwise.net path, but I don't have it. I'm going to print the message in my Alert box. I'm going to replace console dot log with Alert box Alert. And I'm going to set this file. After set this file, if I click on submit button, now you can see in my LT box, it returned, you submitted a F. This is how on submit method. Now you might have question, what is the usage of it? We can extract value from this input fields. Suppose I want to extract name from this input field, when I submit d from. For that, first, I'm going to comment out this line. First I'm at the varie and our variable name is x, x equal to document, dot get element by ID. Is that the round ss is that the double tes, we need to pass the ID name, which is a name. Then I want to extract the u from this input field. So type dot. So we want to end this line. Now I'm going to print the name in our R box. So type LR is that the round press, is that the dole tes first titles hello. Halo, then we need to use concatenation side, and I want to concatenate with or x variable. That's Seve two in this line. If I set this file, H to pass a name, add one. Then I'm going to press the submit button. After press the submit button, as you can see, in my alert box, it print hello add one. This is how we can extract data using on Submit method. We can sort the value and use this value anywhere. Just you need to remember, we need to use on submit event with from tag. We cannot use this event inside any other input tag, otherwise, in select tag, and we can trigger this event only using Submit button. After press this submit button, it going to trigger the event. Now, let's talk about our last event, which is invalid. We use this event when user input wrong value. Suppose suppose f we have a input field, which is going to take phone numbers. But without phone numbers, someone type any capital letters, otherwise, any characters. In that case, the invalid function triggered and written error message. Now let's see how we can use it practically. As you can see, we have to tell two input field and one select field. If we don't fill this form and it, submit button. Now you can see, it's where. I do not show any or messes. But I want this same input field always being field. For that, we need to use a attribute, a stable attribute, which is called record. Here, Inset this input tag I'm on type required. Then I want to set this file. Now it's necessary to fill up this name f. Now let me show you how it's work. So to set this file. If I click on submit button, as you can see, now it's show a message. Please fail in this fail. This is the invalid feature of a stable file. Now the problem is, I don't want to show this message. I want to show a customized message. And to show this custom message, we can use on invalid and to show the custom message, we can use and to show this and to show the custom message, we can use on invalid event. Just need to type the event name on invalid. Then inset the double codes, H we directly type a slip code. I want to print a Alert bombs. Alert inside the round ss, inside the single code because we've already used double cos. That's why we need to use single codes. I want to type a custom message and the message is place fail the name fail. Please fill the name, and I'm going to set this file, and now I'm going to submit this prong without filling the name field. First, I'm going to type some Da text in our class section. Then I'm going to select a country Nepal, and I'm going to press submit button. But if you notice you can see our name field is blank. After press submit button, now you can see my alert box, it print, please fill the name. Basically, we use it with email and phone numbers. Let me show you how. At first, I'm going to change the level. Name two e mail. And also I'm going to change the input type, which is e mail. Then I'm going to remove this required field, and also I'm going to change the alert message. Enter, correct email. Some replace with, enter, C e mail. I'm going to set this file. If I type in wrong e mail address and try to submit this file, now you can see it return this message, enter correct e mail, and also it ret a deft message from ATE mail. Please include and address it in this e mail address. These are all very important from events that we learn in this tutorial. This is it for this Tutorial. Thanks for watching this video, for the next Tutorial. 86. JavaScript setInterval & clearInterval Tutorial : Hello, guys, good to see you back. Once again I'm back with another tutorial related Javascript. In this tutorial, we're going to learn Java script, set interval, and tear interval. These two methods are used in Javascript animations. Suppose if you want to animate any element otherwise, any dom element, in that case, this method is very useful, which is set interval. To write this method is to the two parameter, a function name and ti. You need to put time in V second. This second parameter work as a timer. 1,000 V second equal to 1 second. Now, let's talk about the function. How this function going to work with this second parameter. If I pass once again, I want to say if I pass 100 millisecond, then after 1 second, every time it's going to call this function, and whatever we perform in this function, it's going to run it. Basically, I want to say once again, every time it's going to call this function. If you want to call it after 3 seconds, then you need to pass 3 seconds. If you want to stop this animation in a particular time, in that case, we have another method, which is clear interval. Using this method, you can stop the animation anytime. So without wasting your time, let's try to understand this concept practically. As you can see, side by side, I open my visa sto code editor and my brother using Life Sever Extension, and I already created an estel document name in Dot est, with that I create file, a vast file, which is animation dot Gs. For now, our elevation file is blank. Now, if I back to the index dot a steel file, here you can see, he we create a D element. Basically, he we create a square box, height, 150 pixel width, also 150 pixel, and I set a background color rate, and now I want to animate this square box. I want to move the square box right side up to every once again. To animate this square element, we need to jump into this JS file animation dot s. Set first, I'm going to call our math, which is set interval. Set interval is the round press first way to pass our function name, and I'm going to say this function name N. With that, I want to set a ty, 1,000 millisecond, which is equal to 1 second. Also you need to provide the semicolon, and then to define this me function. Let's create the function. First I'm going to type function Q word and our function name is in. F I'm going to show how set intervent method word. I'm going to print something in my console. Some type console dot log inside the round ss, I type heal. Before I set this file and run the code, I want to turn on my consoe. In Spack console section. If I set this file, as you can see in my console section, if print allow one, two, three is continuously counting and print allow in my conson. This is how set integral function. For now, I don't need this console log. Someone to comment out this and set this file again. Now, and now I'm going to declare a variable outside the function, and our variable is that A. A assign 80, seal to n this slide. Then inside this function, I'm going to increment a variable e ten sound type A equal to A plus ten. Basically set interval continuously called an function after 1 second, and every time it called the function, it's going to increment the A value with ten. First of it's going to print ten, then it's going to print, 30, 40, and it keep going on. Now we need to target the squared element using its ID. Some type target equal to do me do dot get element by ID. Then inside the round recess. Let's d to the index file and see the ID name, and the ID name is taste. Copy the ID name and back to the chase file, and inside the double tes, I'm going to pass the ID name taste and semi to ten this line. Now, need to move this element using Cs. First, I'm going to select our target. Target dot style Dot, and I want to move it right side. I'm going to add some margin at lip side. Type margin Lip equal to our variable A and seal two in this line. Every second, it's going to increase the margin by ten. Basically, it's going to move our square right side. But if I set this file, it's not going to work. You might have question, what is the problem Because we do not provide any unit to this margin property. So I'm going to use concatenation sign and in set the single I'm going to pass pixel. I'm going to use pixel unit. If I set this file, as you can see, after every 1 second, it's going to move ten pixel right side, and it continuously move right side up to 1 second. This is how we can animate this square box. For now, I'm going to comment out this line and set this file again to stop the animation. If you want to increase the animation speed, then just you need to decrease the misecond value. Suppose if pass two under misecond, and commend this line and set this file again, now you can see the animation speed. It increase our animation speed. I want to comment out this line and set this file again. For now, I would like to go with 1 second. I'm going to type 1,000 millisecond. But now I want to stop our animation. W our box, achieve margin lip 200 pixel. Basically, I want to say, when our A value become 200, I want to stop the animation. For that, we need to use per interval method. Let me show you. But before we need to use EP condition, if A venue equal to equal to 200, then inside the condition, I'm going to do something. I use square verses. Also, I'm going to create's part, inside the square ses, inside the s part, I'm going to animate this section. I copy this one. And I obe it inside the condition. I also uncomment this line. Then inside the P condition, now we need to stop this animation using clear interval. But for that, we need to convert set interval into clear interval. I'm going to store this set interval in a variable. Herro type and our variable name is, you can take any name. For now, I'm going to take ID. Now we need to call clear interval method. P R interval, and in the round recess to pass this value set interval. So I'm going to pass. And seve gal to in this line. Before I set this file, I'm going to increase the animation speed. I'm going to pass 100 millisecond. I'm stove this file. After set this file, as you can see, up to reach, 200 pixel margin at left side, it stop our box. Basically, we animate this box, 200 pixel at right side. After reach, 200 pixel margin at left side. Our clear interval, stop this set interval. Here you can animate any cases property of this box. If you want to change the color, if you want to extend the width, yes you can. Let me show you how. Let's animate the wight. I want to forget this section and comment out previously. I'm going to change target the style. I want to add with. I want to change the width property. W, and I want to increase it up to 200 pixel. After reaching 200 pixel width, it will to stop the animation. Let's set the file, as you can see, after reaching 200 pixel width, it stop our animation. This is how set interval and clear interval work together. Basically, we use it for animation purpose. Thanks for watching this video, St tune for the next tutorial. 87. JavaScript setTimeout & clearTimeout Tutorial: Hello, guys, good to see you back. Once again, I'm back with another tutorial related javascript. In this tutorial, we're going to learn about two method, set time out and time out. Using this function, we can specify the time of animation. This method going to take total two parameter, function name and millisecond. This second value millisecond work as a timer, and you like to provide S value. 1,000 millisecond stems for 1 second. Basically, if we pass 1 second here, then after 1 second, it's going to call this function. And it's going to run this function only for one time. Ian, it's going to perform the animation one time only. In our previous tutorial, we learn about set interval. Using set interval function, we can run the animation again and again. But if I use this method, we can run this animation only for one time. If you want to stop this animation before it start, then you need to use this method now. So let's start the practical and see how you can use this map. As you can see, side by side, I open my visas to your co editor and my browser using Life server extension, and I already created estel document name index dot e SML. With that, here you can see, we create a file name animation dot JS. In our basic estemL layout, we create a box with ID taste. As you can see, here we say 150 pixel i and 150 pixel with. Now I want to extend the w after certain time. For that, we are going to use set T out method. I want to extend the with up to 500 pixel. Let's jump into the animation dogs file. At first, I'm going to degla variable, that ID. ID equal to set time out. As you know, this method going to take total two parameter, first function. F function, I'm going to take NE. And I'm going to pass three second spin 3,000 millisecond. Now I'm going to define this function. So to type function or function name is in. Then inside the Caliss, at first, I'm going to print something in my console. So type console dot log inside the round ss, inside the double tes, I'm going to type hello world. And Semgal to in this line. Now, before I set this file and run the scot, let's open our console in SPAC console. As you can see, we are in my console section. If I set this file, as you can see after three second, it's going to print hello word, and as you can see, it print this statement only for one time. It do not repeat itself. And now I want to extend the Did after three second. At first, I'm going to comment out this line. I don't need this console statement. Then I'm going to target the test d. For that, I'm going to declare a variable, and our variable in is target. Target equal to document dot git element by ID, inside the round press and inside the double quotes, I'm going to pass the value, which is taste. Then sic two in this line. Then I want to increase the weight using style dot with method. Some type target dot style dot weight. Equal to I want to increase it up to 500 pixel, 500 pixel, and seg two in this line. Now, if I set this file, as you can see, up to three second later, it's going to increase the d of this deep element. Basically, if we use the set timeout method, it's going to run out animation only for one time. Now I want to stop this animation before it start. I want to stop it before 3 seconds. For that, we need to use t time out method. For that, we need to go back to the Atmel document, and here we need to take a button. Here I'm going to take a button tag button. Inside this button, I'm going to type stop animation. Also, I'm going to use the attribute name on gag method on. In this event, I'm going to call a function, which is stop animation, and I'm going to use this short end is animation. And I function name. Now I'm going to define this function in Joc page. Hm type function, and our function s is animation. Then in said the Css, when I call this function, is going to clear the time out to this ID. So I'm going to call this function, Pier and I said the round ss will pass the i. And 72 in this line. It's me whatever time we say it, it's going to clear the time. For now, I'm going to increase the time. I'm going to make it 5,000 seconds. Now I'm going to set this file. After se this file as you can see, we have a stop button below the box. And after 5 seconds, it's going to run the animation. Now I'm going to set this file again. Otherwise, reload this file again. This time, I'm going to stop the animation. I'm going to click this eimation button. I'm waiting for five second and in adequacy after five second, it not run our animation. Before the five second, I stop this button. This is how we can use both the method together. Set time out and clear time. Thanks for watching this video, Stdute for the next Tutorial. 88. JavaScript BOM Introduction Tutorial: Hello, friends. Good to see you back. Once again, I'm back with another tutorial. In this tutorial, I'm going to introduce you what is Java Script bomb. The full meaning of Bombs Browser object model. Here I talk about the browser window. Bomb is related to Browser Window. It can be any browser, Firefox, Google Chrome, Microsoft Age, Apple Safari, otherwise, opera. Without these, there are many browsers. I did not mention their name here. These are the most popular browsers. Bomb is specially related to Browser Window, not the viewport area. I don't care what goes inside. If you want to control inner part of your browser, then you should learn Dom. In Java Script. If you want to do any browser related programming for that, you need to use window object. If you want to manipulate your browser, there are a lot of method related window object. Let's see, what can we do with window object? Using window object, we can get ged width of our browser. Using this object, we can open browser window, and also we can close browser window. Also, we can resize and move our browser window. Here, we are not going to use our cursor to resize our browser. We have some in bil method of window objects, and sing those method, we can resize and place our window anywhere in our screen. Also, we can scroll our browser window without using our cursor. With that, using window object, we can get URL host name protocol of our browser window. Also, we can get the history of browser window. History means here you can see backward and forward option. If you want to go backward, we can use window object. Also if you want to go forward, also we can use window object. In our upcoming futuria, we are going to learn all about it one by one. Don't miss the interesting videos. Thanks for watching this video, Sten. 89. JavaScript Window Height & Width Method Tutorial enhanced 90p: Hello, friends. Good to see you back. Once again, I'm back with another tutorial related Java script bomb. In this tutorial, we are going to learn how we can get window height and window weight. Here you can see browser window. To get window height and weight, we have total four methods. These methods are inner height, inner width, outer height, outer weed. Now, let's try to understand what is inner height, and what is outer height. This is inner height, which contain the view ward area, and that's outer height. This is the height of the actual browser. Remember one thing, outer height doesn't count the toolbars. Now, let's talk about outer width and inner w. This is the inner width area, and it doesn't count the school ward section. At the same way, we have outer w, and it count the scroll bar section. Outer we count the border area also. I said something wrong. Also the outer we doesn't count the scroll bar area. It count the border area of the trower. Without wasting your variable time, let's start the practical. As usual, side by side, I open my visit studio code editor and my browser using Light Server extension, and I already create an estimL document named index dot table. Inside this index dot estimL page, we have body tag, and inside the body tag, we already type script tag. So first, inside the script tag, I'm going to take a variable, and our variable name is inner height. For that, I'm going to type I height. Inner height equal to d dot inner height. I Then bag to this line. Now I want to print this value in my console. For that, I'm going to type console dot log console dot log is the round res is or variable name. I height. Then Sebagr to in this line. At the same way, I'm going to take outer height. I'm going to create another variable the and our variable ame is outer height, O height. Oer height equal to window dot outer height. Then smug to this line, and I'm going to set this file. Then again, I'm going to print this variable in my console. I'm going to type console dot log is such a round ress outer height, and Sebeg to end this line. I'm going to set this file. If I show you my console, let me show you, so I'm going to write click in my browser, and I want to click inspect section. Herc in console, it print inner height, 767, and our outer height 1047. But if I reduce the viewport height, then what? I'm going to increase the console section height and relate the browser again. Now you can see now our inner height is 303, but our outer height remains one than and 47. As I told you, inner height always count the actual viewport height. But outer height, count the whole browser height. From this point to this point is inner height area, and from this point to this point is outer height area. Now, change the outer height area. I'm going to radius the height of the whole browser, and then load the browser. Now you can see our outer height is 854. As you can see, every time we need to repress the browser to see the value of inner height and outer height. To resolve this, I'm going to call on recs event. I'm going to call the event in our body tag. H to type on resides. On resize and our function name, and our function name is recise function. Resize function. Here I call a function name recise function, and now I need to create the function. Here type function, and our function name is resis function. I copy the name and paste it here. And inside the curly ress I'm going to move this code and set this file. After sep this file, you can see in my console, it's print bland. But if I increase the height of the browser, now you can see it print the inner height and the outer height, the browser, and we don't need to refresh our browser to print it. Whenever I increase the browser height, it print it. Now the inner height is 295 and the outer heights, one and 37. At the same way, we can print inner width and outer width. So I'm going to duplicate this line and comment out previous one. Here I'm going to tie at first, here I'm going to change the variable n, which is inner weed. Inner width equal to inner way is equal to window dot, inner wi. Then consolt log print inner wi. At the same way, I'm going to print outer width. So H type outter wi. Wind outer, and then print consolt log, outer with. If I set this file, now you can see in my console, it's print bland. But if I increase the browser width, then what happened? After increase the browser width, you can see in my console, it print inner width, 720, outer width, 916. If I increase the browser a little bit, as you can see, I print inner width 823, and the outer width 1045. This is how we can get inner height, inner width, outer height, and outer with. Thanks for watching this video, stay tuned for our next two. 90. JavaScript Window Open & Close Method enhanced 90p: Good to see you back guys, once again, I'm back with another Tutorial related Javascript bomb. In this tutorial, we're going to learn Java script open window and closed window method. Here you can see a window, and it is Window A. Now I want to open another window using this window. I want to create window B using a window. For that, Javascript came with a special method. Which is open method. To use open method, we can use button, otherwise, any leak. Also, you can use any clickable image. At the same way, if you want to close the window B using Window A for that, we need to use another special method. Which is close method. Let's see what is the syntax of open method? Here you can see a statement to open window. At first, we need to type the object name, which is indo. Then we need to use the method, and our method name is open window dot open. Then in set the ses, Here we need to pass to three parameter, URL, name and space. Basically, these parameters are optional. If you don't use these three parameter, it's going to open a blank window. Let's talk about our first parameter, which is URL, and a full form of URL is uniform resource locator. Here we need to pass the website domain name. At first, we need to pass the protocol. STTP, otherwise, STPs. Then sla W or website name. Then come our second parameter, which is name. It is also a optional parameter. If you want to give a name to your window, then you can use it. In our case, first window. Otherwise, you can use some predefined parameters. As like underscore blank, underscore parent, undersco silt, and underscota. If you want to create an external window, then you can use this parameter, underscore blank. If you use underscore parent, then it's going to replace the existing window, and then come underscore cell. We use sell parameter, where we use i frames. If you want to open this website in a particular iframe, then you can use it. O last parameter is underscore Tk. We use this parameter when we create our website in a framest. Currently, no one create website in frames it. The popular parameter is under Scope bland. Most of the time we use this parameter. Now, let's talk about a last parameter, which is specs. It's main specification. It come with some pre deifined wheels, like with height, left and top. Using height and width, you can define the size of the window. Using left and top, you can define the position. Why do you want to open the window on your screen? Without this, specification come with some extra property, but these are not necessary now. Let's start the practical and see how we can use it. Finally, we are in my Vis Studio Code Editor. As you can see, side by side, I open my Vs Sudio code editor and my browser using Light server extension, and I already create an St document name index dot at. At first, I'm going to create a button tag inside our body tag. Button. O bottom name is Open Hindu. And inside this button tag, I'm going to call on function. And our function name is open window. And I'm going to set this file. Now you can see in my browser, we successfully create a button name Open Window. If I click this button, it's going to call Open window function. Now, in set the script tag, I'm going to create Open window function. I copy the function name and in set the script tag Ham type function. Function and our function name is Openindo. Then I set the calls, H I'm to use window open method. Hermo type window dot open and seminar to in this line. I'm going to set this file again. As you can see in this method, here I do not pass any parameter. Now, if I click this open window button, you can see in my browser, it automatically open a blank window. It create a new tab, and I'm going to close this tab. Every time it create a blank new tab. Now I want to pass our first parameter. I want to open a website in our tab. Here inside the double code. First, we need to type the protocol name, which is HTTPs. Colon our website name, w google.com. Now let's set the file and click on this button. After press open window button, as you can see, it open a new type and redirect to google.com. Now, let's talk about our second parameter, which is Name. Here I pass a coma and inside the double course, I'm going to pass a name and the name is just Google. Physically name is optional parameter. If I set this file and click on open window, as you can see, as you can see it create a new type and redirect to world.com. But it do not change anything. The title name came from the actual website. Also, here we can use some predefined values, like underscore black. It's a default. If I set this one and prese open window button, Hc it create a new window. But if I use another predefined parameter, which is parent, underscore parent. If I set this file and press open do window button, and press this button, here you can see it redirect the website on the same page. It do not create any new window. Without that, we have two wheels, self and top. Here I'm not going to use this wheels. If you work with y frames, then you can use self wil. Now, let's talk about our third parameter. But before I'm going to remove the second parameter, here I'm going to pass blank. Because by de fall every time it's going to create a new window. Now, let's talk about our third parameter, which is specification. Sprocma, in at the dole cos, first, I'm going to specify the width of the browser. W equal to 500 pixel. Then aca, we need to specify the height, height equal to 200 pixel. Remember, this properties always accept pixel value, not percentage value or EM. After set the file, if I praise open window button, now you can see left corner on your screen, it open a new window with 200 pixel height and 500 pixel weight. Here it create a separate window with specific height and weight, and you can drag and drop the window anywhere. Also, you can resize the window. In specification, we have two other values. Left and top. Let me show you how you can use it. Using left and top value, you can set a margin for your window. Let me show you how Spraca, first amount type left. Left equal to 300 pixel. Coma and from top, I want 200 pixel, top equal to 200 pixel. I'm going to set this file. If I prese open window button, now you can see it open a new window. But it say 300 pixel margin from left side and 200 pixel margin from top side. This pre divent value can open your window exact where you want. We already learned how we can open window. Now we are going to learn how we can close our window from existing window. For that, I'm going to create another button. I we get at this line and I'm going to check, I'm going to change the function name, which is close window. Also, I'm going to create a function for close window. Function, and our function name, close window. I copy the name and I want to paste it here. As I said, the round recess, we need to use close window method. But before we need to declare a variable, and our variable name is M window. That's to end this line. Using this variable, we are going to link this to methyl. Her type my window equal to window open function, and he set the closed window function, he type M window closed function. A semicon to in this line, and I'm going to set this file. Now you can see in my browser, we have total to different button. Open window and closed window. Before I run this code, I want to tell you something. In Chrome browser, close function do not over. That's why I'm going to run this code in Firefox browser. Some open my Firefox browser. As you can see, I already open this file, index. If I pres open window button, as you can see, it open our window at the specified position with specified height and specify wing. If I call closed function using closed window button, Now you can see it close our tab. This is how we can use open and close Matho. Hanks for watching this video, stay tuned for our next Tutorial. 91. JavaScript Window moveBy & moveTo Tutorial enhanced 90p: Again, I'm back with added tutorial related Java SkyTo In this tutorial, we're going to learn window op by and op to pathos. Here you can see on your screen, we have a window name A. Using this window, I open another window, which is B, and we've already learned about open method in our previous tutoriu. With that, we also learn about specifications. As I told you in our previous tutoriu, if we do not pass left and top value, by fall is going to open our window at the eftp corner. But we can specify the window position using left and top value. But now after create the window B, I want to move the window. I want to move the window from the window A, not from the window B. For that, we have two methods, move by and move. Both the method do the same job, but there are minor difference. So Without wasting your time, let's study practical and see how we can use it. S best side, I open my visual studio code editor and my browser using Lib server extension, and I open my previous este document. In our previous tutorial, we'll learn how we can open a window in a specified position with specified height and specified. At first, I'm going to create another button. Do we get the button and I'm going to change the button name, which is window. Move window. Also, I'm going to change the function name. Open window two. Move window. After set the file, as you can see, now he P button, open window and move window, and then I'm going to remove the left and top property because I want to place it default position, mean left corner. Now we need to create the move window function. I copy the function name and hem type function, and our function name is move window. Then the cases, first, I'm going to use L two method. Hm type my window dot move two. Then the undress past two parental. We need to specify the position. Haring to past two, left and right. For xx, I'm going to take 100 and for y x, also I'm going to take 100. And someone going to do in this line, and I'm going to set this file again. Now, let's set the code and try to open the window. As you can see apres, open window button, it will pain a new window at default position. If I pres move window button, it's not going to work. Let me show you. Here I press move window button. As you can see apps, move wind button, it not move our window at a specific position. If I show you my console section in Spa console, he see an arrow. Because if we redirect to someone else's website, then we cannot move the window. Then we cannot control the window. Browsers are not allowed to permission to do it. But if I remove the URL butt, then what happen? Here I'm going to pass a bank value to our first parameter. I remove it. And set the file again. Now, again, I'm going to press open window button. It open our window, and now I want to move the window. If I pres move window button, now I see it move our window perfectly. Now we are in our own website. That's why we can control the browser window. Now the problem is after move the window, we lose the focus of this window. Now it's focus to this window. Now I want after move the window, I want to focus the window. For that, we need to use another method, which is focus. My window dot focus method. And then semicon to end the line. I'm going to set this file again. Again, I'm going to open another window. After, open window button, as you can see, it create a window. If I press, move window button, now you can see, now it redirect focus to this window. Now, what? If I specify the exact position when we open the window, let me show you. Here I to pass and top value once again. Let equal to 300 pixel. Top equal to 300 pixel. Now, let's open the window again. So to press open window button. Now you can see it open our window in specified position. From left side, it take 300 pixel. From the top, also it take 300 pixel. If we press move window button, it move our window to the exact position i is specified. Now, let's talk about another function, which is move by. I'm going to duplicate this line and comment out previous one. And Harmo use move by method. Move by. M the function move over window according to the screen. But move by function move the window according to the relative position. Let me show you what. So Precept this file. If I open window button, as you can see, it open our window at the specified position. But if I place move window button, now you can see, it move our window from the relative position. From this position, it move 100 pixel at late, also from the top. This is the usage of move by and mop two function. Just one thing you need to remember. Move to function work from the absolute position, and move by function work from the relative position. This is the basic different between two function. Thanks for watching this video, state even for our next to. 92. JavaScript resizeBy & resizeTo Tutorial enhanced 90p: We you back guys. Once again, I'm back with another tutorial related Java skid bomb. In this torial, we're going to learn two other methods. Resize by and resize tool. Here you can see a browser we do. When we open the window, we specify a size, hundred by 100 pixel. Now you want to resize this browser without drag and draw. Also you want to specify hide and weight. For this type of resize, We have to two method in a script, resis y and recess two. With resting your time, let's start the practical and see, what is that? As usual, side by side, I open my ss to go code editor and my browser using L Server extension, and I open my previas estimate document name Index dot At. If I praise, open Winder button, as you can see, it creates a new window, and we already specify heighten weight to this window with 500 and height 200. Now I want to resize this window without dragging. For that, first, we need to take a button. I'm going to replicate this line, and I'm going to change the function name. I'm going to replace open w resize. Our function name is resize window. Also we need to change the button fixed, resize window. Now we need to define the function in our script tag. I cope with the function name and mo type function, and our function name is recise window. Then inside the car ses, we need to type my window dot or method name, which is resize two. And here we need to pass the d, and I'm going to say heighten width, 400 by 400, 400 coma, 400 and Sem two in this line. Let's set the file. Here you can see both the buttons. So I'm going to press open window button. Now I want to recess this window. So I'm going to press resize window button. After pre resize window, you can see the result. I change into height and. This is the usage of recess two method. Let's see our second method, which is recessed i. At first, I'm going to duplicate this line and comment to previous one. And I'm going to replace recess two with recessed bi. Now the question is, what is the difference between recess i and recess two method? If we use recess by method, it's going to extend the existing heighten weight. Here you can see, when we open our window, we set height 200 pixel. And if we use resizable function, it's going to increase the height with the existing height. It's going to add 400 with 200. At the similar way, it's going to add 400 with 500. Let me show you. So a set this file, I'm going to open the window. Now you can see our window height is 200 pixel, W is 500 pixel. But if I press recess window, now our tab height is 600 pixel and tab is 900 pixel. Recess by method work with existing value, and recess two meth, but recess two method work separately. This is the difference between recess y and recess two method. Thanks for watching this video, St tune for our next vio. 93. JavaScript scrollBy & scrollTo Tutorial enhanced 90p: Good to see you guys. Again I'm back with another tutorial related Java Skip bomb. In this tutorial, we're going to learn score by and scroll two method. And you can see a browser window in your screen. And also, you can see particle scroll bar and horizontal scroll bar. Now, you want to scroll the window without touching the scroll bar. For that Java step, introduce to special method. Scroll by and scroll two. Before you study practical, we need to understand w many type up score bar we have in our browser. As I told you, we have put two type of score bar, vertical and horizontal. If you want to manipulate vertical score, then you need to pass y x value. If you want to manipulate horizontal score for that, you need to use x x. If you want to move the score bar upside for that, you need to pass minus y x V. If you want to move it downside, then by default, you need to pass the value. You don't need to mention plus. Similarly in horizontal score bar, if you want to move b side, you need to pass minus. If you want to move the score bar right side, you need to pass plus V. Let's start the practical and see how we can use scroll two and scroll by method. As you can see side by side, I open my visas to your code editor and my browser using Live Server extension, and I already create an estable document named Index door Stable. As you can see inside the body tag, we have a heading gag. Now I want to use the scroll bar. For that, I'm going to add a paragraph, a big paragraph. Here I'm going to use P tag. And inside the sp tag, I'm going to type Blue im 2000. Here I'm going to add 2000 word paragraph is a huge one. I'm going to set this file. Here you can see a scroll bird in our browser. Now we need to add a button below the heading tag. He type button. Here I'm going to type a caption and I'm type scroll window. With that, I'm going to call a function with click event. Hm type on click on clay. Click, and our function names, scroll window. I'm going to copy the function name. Instead the tag, I'm going to define the function. Function and our function names scrolled window. Then ese the scss Ham type, Window wind dot here I'm going to use scrolled by method. Inside the long ss, I'm going to pass through a two parameter. For now, I don't want to pass x x. I pass zero. For y xs, I want to scroll down for type cell, so I pass 40, and then semig two in this line. And I'm going to set this file. After step the file, you can see the scroll window button. As you can see, our score bar is on top. But if I press score window button, then you can see it move down 40 pixel. If I press again, again, it moved down 40 pixel. But now I want to scroll it upward direction. For that, here need to pass minus do. I pass -40 and set this file. After scroll window, as you can see, it move our score bar upward direction. Here do we work with vertical score well. Let's work with horizontal score well. For that, we need to take a deep tab. Here type deep. I'm going to move this paragraph inside this deep tab. I cut this paragraph and pit it inside this deep tab. Now I'm going to use style attribute in Panagra style, and I'm going to use with property. We it Hen pixel. I percept this file, you can see the result. Here, you can see a horizontal scroll bar in our browser, and now I'm going to pay with x x value. I'm going to make y x value zero. In x x zero, here I'm going to pass 100. After set this file, if I press scroll window, you can see, after press the window button, it scroll out browser 100 picel at x x direction. If I use minus value here, and the set this file, and then again, I press this button. Now you can see, it move the paragraph opposite direction. This is how we can use x x value and y xs. Now, let's talk about scroll two property. So to be this line and comment out previous one. Here I'm going to change scroll by with scroll. And I'm going to set this file. Also, I'm going to change the d, zero at x xs and zero at y x, and set this file. Before I press score window button, I'm going to move down or score bar. If I press, score window button now, as you can see, it back to the default position. Sorry, I is not the default position. Because Harrow set x x is zero and y x is zero. That's why it back to the starting position. Similarly for horizontal score bar. If I move it a little bit and then press this button, as you canly it back to the previous position. Scroll by work relatively and scroll to work absolutely. This is the different between scroll by and scroll to method. Thanks for watching this video, Stdune for our next two. 94. JavaScript Location Object Tutorial enhanced 90p: Hello, guys, good to see you back. Once again, I'm back with another Tutorial related Java Streep bomb. In this Tutorial, we're going to learn Java Streep location object. Here you can see the browser on your screen. As you know, this is the URL bar of this browser. Otherwise, we can call it location bar. If you want to get any type of value from these for that, you need to use location object. Using the help of some special properties, we can get the values. We have total 19 properties and some methods. We are going to learn one by one all of this. Let's start the practical and see how we can get values from the URL bar by the help of these properties. As usual, side by side, I open my visa studio code editor and my browser using Light server extension, and I already create an estiL document named index dot HTML. And now we're going to practice location object properties one by one. Here you can see the location bar. Also, you can see a special thing, which is an IP address, because we run our estim file from the live server. If you open the file from the Locals server, otherwise, any online server, then you can use this properties. Now, let's open the console and try location object. Hm type console dot log console dot log is at the round Bress location. Amo type location. If I press enter. Now, if I open the drop down section, here you can see all the properties name from the location object, has host host name, HDF, origin, pathname, port, et cetera. Also, you can see the values. Remember, you can get the result only when you run your file from the server. Now, let's run the same command on google.com. In other type, I already open google.com. Here, also I'm going to open my Console. I'm going to type console dot log inside the round presses location. And Semg two in this line. If I press enter, and open the dropdown section. Now you can see the similar type of data provided by the google.com. Here you can see hostname and host ps same. Also, you can see the path and the origin, and the protocol is STTP S. As you know, S stands for SQ. If I show you my local server data, as you can see, protocol is HTTP. I mean it is not secure site. That's the different topic. Now, one by one, I want to get all the wheels. For that, we need to use all of the location properties. Let's see how we can get it. At first, I want to return the host name from our local server. For that, we need to tie console dot log is at the round recess. First, we need to call the location object. Location dot and our property name, and our property name is host. And Sem two this line. If I press enter, as you can see, it written the host pe. It written the IP address. If you enter the same command for the CO page, let me show you Sound pass the code and press enter, now you can see, return the host name ww google.com. As you know, our index dot atm file run from the Local host server. That's why it written the IP address. But google.com run from the online server. As you know, this IP address link with the domain. That's why it written the domain name. Similarly, if you want to return the host name, let me show you location dot host name. And run the code. St the same result. But if you run the same command on Loco server, let me show you location dot host name. And then run the score. Now you can see, it's the only IP address. But in host, it return the port number also. Now I want to return the complete URL of the website. For that, we need to use RDF. Ha pa the code.cation do RDF. If I press enter, you can see the result. It return the protocol, server name, server IP, otherwise domain name and the file, which we open. Just you need to remember, HRD property return the page name with host name. Now, let's talk about another property which is pool. So to run the command and location pool. Again, I'm going to run this command and type location pot. If I run this code, you can see it return the port number, which is 5,500. You can see the same port name on URL bar. After IP address, Colon 5,500. And the same way, if we return the protocol, let me show you Cs dot log location protocol. And run the score, you can see triton HTTP. If I run the same code on google.com page, Copy the command, and if I run the score here, now you can see triton protocol HTTP. Now, let's stock out another property, which is has. For, in our UDL bar, after slash, I'm going to use has second. If I press enter, as you can see, it's st err, because hash is not available, that's why it's stoner. But if I run this command, let me show you consol dot log location has. After press enter, as you can see, it's written second, second. Now, let's talk about another property, which is search. For that, I'm going to jump into the Google tab. First, I'm going to search something image. In my console, I'm going to run a command, console location Search. If you want to return the search value from the URL or that, you can use this command. On to type location dot search. If I press enter, as you can see, it's written images. Here we search images command, and the other data is added by the Google cell. Also, you can see the cell Search squary in our URL bar. Search images. Most of the time we use this command when you work with server side language like PHB. We learn how we can get the value from the URL. Not n that, also we can set the values. Let me show you. I'm back to the Index dot est page and here, I'm going to type Location RDF. Now I want to set a domain name. For that, when to type equal to, in set the double codes, first on to type the protocol, and H I'm going to use STDPS. Colin the domain name, WWW and then seg to N this line. Now, if I set this file and repress this index dot estimL page, let me show you as you can see it red two google.com. You already learned about how we can use this property to set value and get value. Now, let's talk about location object methods, and these are Assign reload and replace. If you want to set a new value on this D bar, for that, you can use Assign method. If you want to replace your page for that, you can use read. The last one is replace. It is also pretty similar with Assigned method. But there's a little difference between them. Let me show you. Here you can see, you already create a button name click. And also we add on the event. And you can see the function click. In this function, first, I'm going to use location dot reload method. Reload. If I set this file and after click this button, every time you can see in my URL war, it relote my browser. Now I want to assign a new value to our URL war. For that, we need to use assign method, location assign. Inside the rounders, we need to provide the domain name. First, we need to tie the protocol, HTTPS. Colon WW google.com. After set this file, if I click this button, now you can see it's red two google.com. This is the usage of assigned method. Now, let's talk out our last method, which is place. I wanted to pick this line and comment out previous one. Here, I'm going to tie location. This method also work like assigned method, but it removed the history. Let me show you. I at the double course, I'm going to type the same website, google.com. After step the file, I'm going to click the button. Now you can see it read out to gole.com. But if you focus in my arrow section, as you can see, in our left arrow, we don't have any go back option because it removed the history. I hope location object is clear for you. Thanks for watching this video, Ste. 95. JavaScript History Object Tutorial: Hello, guys, good to see you back. Once again, I'm back with another Tutorial related Java script bomb. In this tutorial, we're going to learn about history object. In this tutorial, we're going to learn all the properties and methods related history object. Here you can see a browser screen. Also, you can see two buttons, backward and forward. If you want to see the backward and forward pages for that, we need to use history object, and our history object came with only one property, which is Ln. At the same window, how many website you open, using length property you can get. Let me show you the property in practical. As usual, side by side, I open my user studio code editor and my browser using Live Server extension, and I already create an estimate document named Index dot, HTM. At first, I'm going to open my console section, inspect and console, and Homeo type console dot log console dot log inside the round ses, Home type history. Then subgoal to end this l. If I please entire, now you can see in my history tag. Now you can see a drop down. If I open this drop down, as you can see, n is one. If I drop down the prototype option, now you can see some maths, back, forward, go n et c. Now, let's add and cut tag inside the body tag. H tie A and the links, HTTP colon s and the website is google. WWW google.com. I'm going to set this file. Also, I need to add a text to this angle tag. Los I'm going to type Google. I press this file, you can see a link in this website, and now I'm going to press google.com. As you can see, is redirect to me google.com. If I show you my link now, so in my console, I'm going to type console dot log I set the round press, I want to return the length. Hm type history do lin as smal to end this line. After set this file, if I pris enter, now you can see it returned to. Now the question is why it's returned to because now we have decir history. If I click this go back button, now you can see, it's back to the my index dot estable page. Again, I'm going to show you this history. Console dot log history. Then you can see now the length is too, because now our forward button is activated. Now we can go forward to google.com without pressing this leak, you can see the result. I hop blower scler for you how length function work. Now, let's talk about the method of history object. Normally, we have total three useful method, backed, forward, and go. If you want to go forward and backward, without pressing this arrow, then you can use this method. If you want to go backward, then you need to use B Mathod. If you want to go forward, then you need to use forward. Using G method, you can do the moot. Let's jump into the visual studio code and see how we can use it. At first, I'm going to change the link address. And I'm going to tie index two atm. And I'm going to replace Google with, page two. Page two, and I'm going to set this file. Also, I'm going to change the heading. I'm going to replace Doa script history object with we are in page one, and set this file. Now I need to create Index two estim page in my current working directory. Here I'm going to create another page. Index two dot HTML, and I'm going to copy the whole code from Index dot estimate page. And paste it inside Index two dot estimate page. I'm going to replace at first, I'm going to replace our heading, where in page two. Again, I'm going to create another page. Here I want to change the link name, page three. Also we need to redirect to another page Index three. I'll set this file, and then I sect the H C and copy it. Again, I'm going to create another index dot estimate page. Index three dot STL. I'm going to paste all the code here, and also I'm going to replace page two with page three. We are in page three. But this time, I don't need any anchor tag to redirect. So I'm to remove this anchor tag. Answer this file. Now you can see in my browser, we are in my Index dot et page, mean page one. Now, I want to jump into the page two. So I'm to click this link. Page two. As you can see in my U bar, it redirect to Index dot two STML. Again, I decide to jump into our next page, which is page three. If I click this link, now you can see we are in page three. If I show you my history, console, Dot Log is at the Round rasas history. Now you can see the history length is three, because we have pro three page because we visit three page at the same win two. If you notice, you can see, we have only backward option, not the forward option, because we are in page three. If I praise backward arrow, now we are in page two. In this page, we have two options. But in this page, we have both the options. We can go backward, also, we can go forward. Now I decide to go backward. As you can see, we can move backward and forward from the URL section. But now I want to do the same thing using buttons. For that, I'm going to create two buttons. Button, and our first button name is back. And also need to call an event, which is on click. On click, and also need to provide our function name and our function name is back function. B function. With that, I'm going to create another button. I to wet this line and our new button names forward. And also need to change the function. Hm type forward. Now we need to create both the function in our script tag. First, I'm going to copy back function. Hm type function and our function name is back function. Then inside the rounds is, I'm going to tie history dot back. For back function, I use back method. Again, and then I'm going to be this section. Also I'm going to change the function name forward function. I copy the function name and overwrite it. Also, I'm going to change the method here. I'm going to replace back forward. This is, and I'm going to set this file. As you can see, we create the function and the button at Index three page. We need to copy this section, and we need to do the same thing at Index two button. Also in the Index one button. Sorry, page. Now you can see in our first page, we have backward and forward button. Now, I want to decide to go forward. If I press forward button, as you can see, it's regard to page two. If you decide to go backward, just press back button. So again, we are in page one. And now I'm going to press forward button two time. We're in now page two, and also I'm going to jump forward at page three. Again, I'm going to press forward button. Now you can see we're in page three. But what? I I press forward button again, then what? As you can see, after press forward button, it's re direct to nothing Because after page three, we don't have any forward option, and also you can see it at URL section. O forward leak is deactivated. Now, let's talk out our last method, which is go. For that, I'm going backward. I want to say I'm going to back page two, and also I'm going to open index two ATML. Here, I'm going to create another button. I duplicate the button and I'm going to replace forward function with go function. G function. Also, I'm going to change the button name, go. And now I'm going to create the function in our script. Function and our function ems, go function. G function. Then he set the crass, here I need to type his three dot, go. Then he set the long ss. Here I need to pass a parameter. If you want to go forward, then you need to pass positive and if you want to go backward, then you need to pass negative. First, I want to go forward. Here I pass one. And I'm going to set this file and reload page two. Now you can see there is a button Nam go. If I p go button now, as you can see in redirect to, page three. Now, let's do the same thing at Index three dot estimate page. Copy this section, and then I'm going to jump into the Index three dot estimate page, and I'm going to replace it with new co. But before I set this file, I want to go two step backward. I want to say I want to jump into the page one from the page three. I want to skip page two. For that, era pass negative fiel. Herod pass minus two. Now you can see in my page three, go button is app. If I place go button, now you can see it's redirect to page one. It's keep page two. Also, I'm going to do the same thing at page one. Again, I'm going to copy the whole section and replace our previous code with new code. From the first page, now I want to redirect to the last page. I want to say page three. For that, we need to pass positive value. If I set this file, you can see the button. If I praise, go button, now you can see is red two page three. How we successfully use three type of history method, backward, forward, and go. I hope now it's clear for you. Thanks for watching this video, state tuned for our next tutorial. 96. JavaScript pageYOffset & pageXOffset Tutorial: Hello, guys, good to see you back. Once again, I'm back with a new tutorial related Java Skip ball. In this tutorial, we're going to learn about two new method, page y opsite, and page X opsite. These methods are work with browser window. So let me show you an example. Here you can see we have a browser window. And if you notice the vertical scroll bar, we already scroll the page little bit. Also for the horizontal scroll bar. We already scroll it little bit. And now we want to extract the distance how much we scroll. We need to extract the distance and we need to measure it. This is for vertical score bar, and also we need to extract the horizontal score bar distance. For that, Java script introduce two methol, page y ost and page x ost. So without wasting your time, let's start the practical C, how we can use this maths. So as you can see, side by side, I open my visual studio code editor and my browser using Lip Server extension, and I already create an estL document named index aTL. If you notice you can see, there is no scrollbar in our browser, not the vertical, no the horizontal. So for now in our body tag, I'm going to add a Db paragra P, and I'm going to add lot of O. LEM 2000. And I'm going to set this file. After set this file, as you can see, it added vertical scroll bar, and now I'm going to drag down the scroll bar a little bit. With that, I want to extract the value how much we scroll. So I'm going to use page y set method. So H type script tag inside the body tag. Script. Then inside the script tag, as you know, we are working on window object. So type window. Then I'm going to add scroll event. So I'm going to use add event listener. And inside the round ss, I'm going to use scroll wind. When you scroll this page, it's going to call an anormous function, so I'm going to create a function. Function inside the C ss, and now I want to extract the vertical scroll value. With that, I want to print this value in our console. So have type console dot log inside the round proces, inside the dos Amon type page site. With that, I'm going to use congregation sign, and I want to print the window y bst value window dot page y set, and I'm going to add semicolon to in this line. And before I set this file, let's turn on the console in our browser. Inspect Console. And I'm going to set this file. Per side this file, you can see the value. Page y set value is 563. We scroll 563 pixel at y xs direction. And if I move the scroll a upward, now you can see the current value, which is zero. And if I move it downward, now you can see the value. Here you can see now our page y set value is 1,505. But now the problem is in our console, it print all the unnecessary values. I want the exact value. For that, we need to clear the console. So Here type console dot clear method, and S begin to end this line. I'm going to set this file. After set this file, now you can see the exact value, how much we scroll, 1,505 pixel. If I move the scorewa upward otherwise downward, you can see only one value. It's print the exact value up scroll ward. At the same way, we can extract the page x ost value. So I'm going to rect this line, and this time I'm going to print page x ost. But the problem is we don't have any horizontal scoreward in our paragraph. For that, I'm going to take a deep element in our body tag. So before the paragraph start, here, I'm going to take a deep element. Deep dot dot box. Also, I'm going to style this deep element using its class name. H type dot box inside the car versus first property, I'm going to use W. W 1,200 pixel. Height, 300 pixel, and I'm going to set background color. Background color rate. D. If I set this file and move the vertical score upward, now you can see our page y set value is zero, also page we need to change the name, page x set. Also our page x set value is zero. Now, If I move our horizontal scroll a little bit, you can see the value. Now you can see our page x offset value is 174 pixel, and our page y set value is still zero. So I I move both the scroll war, you can see the result in my console. So this is how we can extract the scroll value using the methods. So this is it for this tutorial. In the next tutorial, we're going to learn about two new method, Oset top and Oset lift. Thanks for watching this video, Stadium. 97. JavaScript offsetTop & offsetLeft Tutorial: Hello, guys, good to see you back. Once again, I'm back with a new Tutorial related Java strip. And in this tutorial, we're going to learn about two new method, Oset top and Oset late. Suppose this is our browser, and inside this browser, we type some text. And also we take a deep element at that place. And now I want to extract the distance of this deep element from the top side. I want to extract the distance from the top also from the lab site, to extract the values Java strip introduce two methods. Oset top and Oset late. So let's jump into the is Sudo code editor and see how we can extract these values. So as us, side by side, I open my Vis Sudio code editor and my browser using Lipseer extension, and I already create an stML document name index dot HTML. And as you can see, in our body tag, we have a deep class box. And in this deep, we have a paragrap a dummy paragrap and I already style this box deep. Herst background also set we then k 300 pixel. Also, we have a border. And now I want to measure the value from the top and the lift. For that, we need to jump into the script tag. So I'm going to type script. And inside the script tag, I'm going to use console. Console dot log inside the round res, I'm going to print a statement box site top. Box set top, colon, and then I'm going to use congiration side, and now only to target this box. To target this box, I'm going to create a variable inside the script tag. So variable is BOX box, box equal to, and I'm going to use document doy selector method to target this box. Document dot query selector. Then inside the round press inside the double coats, we need to pass the box ID. Sorry, the box class name, which is dot BO X, and the smug to in this line. And now I'm going to use this variable ame. Box. Box dot and our methodmis, opposite to. And semi column two in this line. At the same way, if we want to extract the value from the lab, we need to reg this line, and I'm going to replace this statement, y set lit. Also, we need to chase the method name, y set. And before set this file, let's open the console, inspect console, and I'm going to set this file. After set this file, you can see the v. Box set top eight, and box set left eight. Now the quotin is why's written eight and eight from the body direction because this is the deferred margin of body tag. That's why sometimes we need to use margin zero from all the direction in our body tag. Also, you can notice the eight pixel gap from the top side and from the left side. But if I use margin property, first, I'm going to use margin property in our body tag. Here are type body and inside the car res margin. Margin zu zero. If I set this file, now you can see in my console, sprint box set to value zero, and also set p values steel zero. And if I add margin at lab site, let me show you margin lap 100 pixel. And the have this file, you can see the result. Now our box set lap value is 100 because we have 100 pixel margin at lap position. Also, if I add margin, top 50 pixel, and the at this file, you can see the value. Now you can see in my console, box set top value is 50. But what? If we add a paragraph, before this box deep, let me show you. So I want to add a paragraph. Lo rem, and I'm going to add 200 paragraph. After set this file, you can see the value. Now you can see our set top value is 354 pixel. The distance between browser top to D is 354 pixel. So this is it for this tutorial. In the next tutorial, we're going to learn about two other method. Scroll top and scroll left value. Thanks for watching this video, stated. 98. JavaScript scrollTop & scrollLeft Tutorial: Hello, guys, good to see you back. Once again, I'm back with a new tutorial related Java script. And in this tutorial, we're going to learn about two new math holes. Scroll top and scroll let. Suppose we have a deep element, and we say height and weight to this deep element. And as you can see, we have put two scroll a in this deep element, vertical and horizontal. This scroll war will appear deep data overflow from this container. If you notice, you can see in our vertical scroll bar, I already scroll a little bit. And now I want to extract the distance, how much we scrolled in our deep. At the same way, I want to extract horizontal scroll value. So we need to extract horizontal scroll value and vertical scroll value. To extract these, we have two methods. Scroll top and scroll late. So without wasting your time, let's start the practical and see how we can extract this value. So as you can see, side by side, I open my iso Studio code editor and my browser using Live Server extension, and I already create an estil document name index dot HTML. And in this est page, as you can see, we have a deep element with class name box, and I already style this box deep. Hers background, High tw and border. Now you notice, as you can see, there is no scroll word in this deep element. So I'm going to add some dummy text inside this box. Here, I'm going to add 500 word paragraph. Orm 500 war. And I'm going to set this file. After set this file, as you can see, it's overflow power container. To resolve this problem, I'm going to use overflow property. Here I'm going to use overflow, and I'm going to use auto value. If I set this file, now you can see the vertical scroll bar. And now I want to extract the scroll value of this deep element. Suppose I scroll this contain bit from the Y ax direction, and now I want to extract the scroll to value of this deep element. To extract the value, we need to jump into the script tag. Here I'm going to type script. Inside this script tag, first, I'm going to target this box using its class name. So want to type document dot query selector inside the round press, inside this double codes, I'm going to pass dot box. Then I'm going to use a method. I'm going to use add even listener. Add even listener, and I want to use scroll method. Scroll, After target this box using its class name, then I use a event, scroll event, and when users scroll the data, I want to call an anonymous function. So perca I'm going to call a function. Function. Round ss then inside the carsst. Then inside the function, I want to print the scroll value in my console. So Haran type console dot log, console dot log in the round ress the double potes, first I'm going to print a statement, which is scroll dog. Stroll of concatenation w and here need to pass the targeted box. For that, I'm going to create a variable and our variable name is target. Target equal to, and I'm going to copy this same line. This box. Then I'm going to replace this documented sector with target variable. Also, I'm going to use the target variable in my console section. Target. With that, we need to call our method name. Target dot scroll dog. If I set this file and turn on my console and scroll this deep element, a little bit, you can see the value, scroll the value. But the problem is you can see a lot of values. That's why I'm going to use clear function. Console dot clear. This function going to clear unnecessary values. If I set this file again and scroll this deep element little wit, now you can see the scroll to value. It is pretty similar with y set and x pset methods. We apply page y pset in our browser window, but we apply scroll top in our deep element. That's the different. Now, let's talk about the another method, which is scroll lead. So in this deep element, I'm going to create another deep element. Deep Tot box too. Also, I'm going to style this box two deep element. In our style section, type taught box two is at the calibraces. I'm going to use background background red. Then I'm going to use wed. Weed, 700 pixel, and height. Eight pixel, D. I want to set this file. Now you can see inside this parent deep element, we have another deep element, and we set height and width 700 pixel and 80 pixel. That's why it horizontally overflow from this container, and you can see the horizontal scroll bar. And now we need to extract the scroll value of this scroll bar. For that, first, I'm going to duplicate this line, and I'm going to change scroll top two scroll let. Also, we need to chase the method name. Scroll lit. If I save this file and scroll the horizontal scroll bar little bit, you can see the scroll lab value. Now it print 48. And from the scroll top, we have zero value. If I scroll the vertical scroll bar little bit, now you can see scroll top 148 pixel and scroll lab 48 pixel. This is how we can extract the scroll lab and scroll to value. I hope, now it's clear for you. So this is it for the Stal. Thanks for watching this video, S tuned. 99. JavaScript scrollWidth & scrollHeight Tutorial: Hello guys is good to see you back. Once again, I'm back with a new tutorial related Java scrip. In this truora, we are going to learn two Java scrip new methods. Scrollw and scroll height. As you can see, we have a deep element, and inside this deep element, we have some dummy data. And H we use overflow property to this deep element to hide the extra content. That's why it add vertical scrollbar and horizontal scrollbar. And now I want to extract the height of this content, including the overflow data. Suppose we have this amount of data in this container. So we need to extract the exact length of this data. For that, JavaScript introduce a new method, which is scroll g. At the same way, if you want to extract the horizontal data width, you need to use scroll width method. So let's start the practical and see how we can use these methodes. So as you can see, side by side, I open my visa stdio code editor and my browser using Live Server extension, and I already create an estemL document named in Dexote stemel. If you notice you can see in our body tag, we have a deep tag and has a set an ID box. Also a style is deep tag. We set background color pig with 300 pixel and height, 300 pixel. So you can see there is no scroll bar in this deb element because we don't have overflow content in this de element. Basically, it's an MTD. And before I add the content in the box, I will show you how we can use this methods. So inside the body tag, I'm going to type script tag script. And inside the script tag, at first, I'm going to target this box using its ID. So I'm going to create a variable and our variable is target. Target equal to document T selector ins the round recess, I'm going to pass the ID name has tag box. Then seg two in this line. Now I'm going to create two other variables, one for scroll weight and another for scroll height. First variable, I'm going to use and our variable name is scroll weed. Under scroll. Equal to our target dot, our method name, scroll. Sem to n this line. Then to gt this line and replace w with height. Also mer type, scroll in. That's it. Now I'm going to print both the variable in my console. For that, mero type console dot log inside the round ress inside the double. First, I'm going to print scroll. Scroll w. Then concateation sign, I'm going to call the variable, and our variable is scrolling, and Seve coral to this line. Then I'm going to dig this line, and this time, I want to print scroll height. I'm going to replace with with height. Also here to pass this variable, scroll high. And now I'm going to set this file. Then I'm going to jump into the browser and right pick on it and inspect, and I'm going to try on console. So you can see by default, it print the exact height and width of this container. Scroll width, 300 pixel, and scroll height, 300 pixel. Because in our style section, hero assign with 300 pixel and height, 300 pixel. That's why it written this value. But this time I'm going to include some dummy data in our deep tag. Here, I'm going to type, low in, I'm going to add total 600 wor, and I'm going to set this file. After set this file, as you can see, by default, it's overflow from this container. So we need to use overflow property in our style section. Let me show you how. So here our type. Overflow. But before I use overflow property, as you can see, steel return, scroll height is 926 pixel, because this is the content height inside this container, and our width steel 300 pixel. And now I'm going to use overflow auto value, Auto. And if I set this file, you can see the result. After set this file, now you can see the height top, scroll area is two than four and scroll with 283. And if I add some padding in this box, let me show you padding from all of this direction, I want to add 20 pixel padding. After that 20 pixel padding, as you can see, it affects our result. Now, scroll is 323 and scroll height is 274, and now we need horizontal scroll wa. For that, I'm going to create another deep element inside this deep element. Some type B dot box to. And I'm going to style this DB element. So hemo type to box two set the calibraces first I'm going to use with property with 400 pixel. Height, 100 pixel. Also, I'm going to add background color background color rate. If I set this file, you can see the result. Now you can see our scroll with value become 440. Also, you can see horizontal scroll wire at the bottom position. This is how using this method, we can extract the scroll area value. We can extract scroll height value, so we can extract scroll w value. So this is it for this tutorial. Thanks for watching this video, state tune for the next tutorial. 100. JavaScript offsetWidth & offsetHeight Tutorial: Hey, guys, good to see you back. Once again, I'm back with a new tutorial related java script. In this tutorial, we're going to learn about two new property related java script, which is set w and set height. In this example, you can see a deep element. In this deep element, we say border. Also, we have text and padding in this box, and a vertical scroll bar. And now I want to get height of this deep element. I want to say, I want to extract the length of this deep element from this point to this point. To extract this value, Java step introduce a new property, which is set height. At the same way, if we want to extract the width of this element, in that case, we need to use set with property. If you notice you can see, we have ten pixel border, padding area, also we have content area and a scroll bar. O pset with, otherwise, obst height, going to return the total with. O pset width and set height returns the width and height of an element in pixels, including padding, border and scroll bar. If we have horizontal scroll bar at the bottom, it's going to add in our height. So this property going to provide total w and height, including border win. Just, it do not include the margin area. So let's start the practical and see how this property going to help us. So as you can see side by side, I open my visit Studio code editor and my browser using Live Server extension, and I already created a stable document name in Dexote stable. So if you notice in our body tag, we have a deep tag with class name box, and I style this box deep in our style section. Sight with height, 300 pixel, and set a background color orange. Now I'm going to use JavaScript property set w and set height. So I'm going to use script tag script. Inset the script tag, first, I'm going to target this box using its plus name. So I'm going to create a variable and our variable name is target. Target equal to document, dot query selector inside the round presses inside the double codes, we need to pass the class name dot BO X box and semicolon two in this line. Now I'm going to create to other variables for obste weed and oste height, some type, and our variable name is w. W equal to target dot opposite w. Semicon to in this line. There I'm going to duplicate this line, and I'm going to replace which with height, and here I'm going to tive target dot set height. And now I want to print this value in my console. So type console dot log inside the round ses inside the double gos amo type set with concatenation w w, and semicon this line. At the same way, I want to print set height. So ubicate this line, and he type set height. Also to replace we with height. And I'm going to set this file. After set this file, if I turn on my console, you can see the result. Oset is, 300 pixel and set Hs and set Hits, 300 pixel, because Here assign same amount of height and weight to the container. But what? If I add some border h type, order property, and I want to add ten pixel solid border. And our border color is red. If I set this file, now you can see the result. Now our set width become 320 pixel and pset height become 320 pixel. Also, if I want to add padding type padding from each of the direction I want to add 50 pill padding. If I set this file, you can see the result. Now each of the direction e at 50 pixel padding, also e at ten pixel border and the actual heighted width, 300300. Using this properties, we can get total height and total width of an element. So this is it for this tutorial. Thanks for watching this video, stat tune for the next tutorial. 101. JavaScript clientWidth & clientHeight Tutorial: Hey, guys, nice to see you back. Once again I'm back with a new tutorial related Java script. And in this tutorial, we're going to learn about two new properties, client height and client W. So as you can see, we have a deep element. And in this deep element, we have border, content text, and padding. Also, we have a scroll bard. And now I want to extract the inner height of this dep element. I do not want to include the border height in this measurement. I want to just extract the inner height. At the same way I want to extract inner width, not this scroll bard, and I don't want to add the scroll bar. To resolve this problem, JavaScript introduced to new property, client width and client height. We already learned about this type of property in our previous tutorial, pset width and pset height. And the different is pset w and set height, provide the total width of this element, including border and scroll bar. But to extract the inner length of this element, we need to use client height and client width property. They return the width and height of an element in pixel, including padding, but not the border scroll bar or margin. So without wasting your time, let's start the practical and see how we can use this property. So as you can see side by side, I open my visual stdio code editor and my browser using Lg server extension, and I open my previous estel document. In our previous estable document, we'll learn about Oopset with property and ost height property. And in this tutorial, we are we to extract client width and client height. So as you can see in this deep box, we have 50 pixel padding. Also, we have ten pixel border, and also we have 300 pixel width and 300 pixel height. So at first, I'm going to change the property name. I'm going to replace set we client whe, client whe, and also I'm going to replace set height with client height. Client. Before I set this file, as you can see, now current Oset V is 420 pixel and Oset Hight is also for 20 pixel. But as I told you, if we use this properties and then set this file, now client V and client had become less than this value because it do not going to include the border area. So I I set this file, as you can see, now it's become 400 by 400, because this property do not going to count the border area. So this is it for this tutorial. Thanks for watching this video. I hope now it's clear for you. What is the usage of this property? Thank you. 102. JavaScript ClientX & ClientY Tutorial: Hello, guys, good to see you back. Once again, I'm back with a new Tutorial related Java scrip. And in this tutorial, we're going to learn about two Java strip new property. Client tax and client Y. As you can see in this example, we have a browser window, and you can see a mouse czar in this window. And now I want to extract the mouse coordinates when I move the mouse, otherwise click anywhere in the window. I want to get the exact position of this mouse. So I need to extract the X Xs Value, also y Xs V. For that Java strip introduce to Mouse Event property. Which is client tax and client Y. And remember, it's work only inside the viewpot area of this browser. This is the viewpoint area of this browser. It is not related to monitor screen resolution. It is related to browser window. And as I told you, these properties are related with mouse event, so it's going to work only with the mouse events. And these are all mouse events that we already familiar with. On click, on Double click, on content text menu, on mouse move, et cetera. So when we use the events, then we can extract the Y xs and s value, means client tex and clide y value. So without wasting your time, let's start the practical and see how we can use it. So as you can see side by side, I open my Visal studio cod editor and my browser using Live Ser extension, and I already created an estil document named Index dot steel. For now, my estable page is completely black. At first, I want to extract the mouse coordinates when I per my cars are on this view port area. For that, we need to go back to the body tag and mo type script tag. And now we need to add an event in our document using add even listener method. So inside the double course, I'm going to type document dot add even listener. Then inside the round process, I want to add mouse move event because when I open my mouse, because I want to extract the value when I move my mouse. So type mouse move, and semicorn two in this line. And as you know, with that, also you need to call an an enormous function. So I'm going to create a function after function, and inside the car ***, I'm going to use these properties, client and client x. What that going to take two variable? Some to type and our variable m is X, X equal to also in our function, we need to pass a variable. So I'm going to pass event. Also you can use shorten seal type E. So here on the type e dot client x. Then semicon this line. And at the same way, we are going to extract x value. So to duplicate this line and replace x with y. Also, we need to replace client x with client y. Remember, Xn y should be capital. Otherwise, it's not going to run. And now I'm going to print x x and x value in my console. So I'm going to tie console. Dot log inside the round press inside the double code I type, client x colon, concatenation with x value and sem in this line. And I'm going to duplicate this line and this time I print client y value. Client y, concatenation with, client y, concatenation with y variable. And before I set this file, I'm going to turn on my console. Is pack console. Also, and I'm going to print console lot clear. If we do not use the clear function, then it's going to print lot of value. So Herm type console dot clear method. Sem this line. If I set this file, and my cars are in my view pot area, you can see the value. Now you can see our x xs point is 168 and y x point is 352. If I move it upward, now you can see it reduce y xs point. And if I move it top left corner, now you can see xxs value is 13 and axs value is nine. This is how we can gag xs and one y axis value of our cars. So that's the usage of these properties. Client X and client y. Also, you can target in a Dbment. For this example, we do not use any deb liment, how we target the old browser, the old browser window. So this is it for this tutorial. Thanks for watching this video, Statute for the next Tutorial. 103. JavaScript pageX & pageY Tutorial: Hello, guys, good to see you back. Once again, I'm back with a new tutorial related owl script, and in this tutorial, we're going to learn about two new property. Page X and page y. So as you can see in this example, we open a browser window, and in this browser, we have a lot of text. And also, you can notice there is a scroll bar at the right side. It's means there is a lot of text in this browser. Assume that we have this amount of text in this browser. Also, I show you the overflow data using gray color background. After strolling this page a little bit, I put my mouse at that place, and I want to extract x xs position of this mouse, also y xs position of this mouse to extract the value Javascript provide total two property. Page X and page Y. In our previous tutorial, we already learned about client tex and client to property. It was pretty similar with page x and page Y. But there's a difference between client tex and client to and page x and page. It is only work inside the view vote area. But in page x and page property, if I scroll the vertical scrollbar, otherwise horizontal scrollbar, it's going to change the curser point. And as I told you, these properties are work with only mouse event. So we need to use MouseEvent to use these propilties. So these are all mouse event. On click, on double click, on context menu, on mouse move, on mouse, et cetera. So let's start the practical and see how we can use it. So as you can see, side by side, I open my so studio code editor and my browser using Live seal extension, and I already created an estel document named in Dot estim. For now, our body tag is empty. So inside this body tag, first, I'm going to use script tag. And inside this script tag, I want to extract my cursor point. When I open my cursor in my browser area, I want to extract the cursor location, X xs and Y xs. For that, we need to use document method. Document, and we need to use an event. And to use the event, I'm going to type a event listener. Is the round races in that the double codes, otherwise, single codes. Here, I'm going to pass the event name, which is mouse node. As you can see equal to close the quotation. We need to move it inside the single quotes, otherwise, total. Then we need to call a function, a anoous function. Some tie function is at the cariss, it is the anons function. Then inside the function, we need to take a variable as an event. For e time pass P. Here, we need to take total two variable to store this two, where our first variable is x, x equal to e dot page x. Then I do begin this line, and this type am type or another variable. Page y, page y equal to e, page y. Now I'm going to print this two value in my console area. I'm going to tie console dot log inside the round brass inside the double first I'm going to type, page x value, page x value. Sn cool. Then I'm going to use concatenation sin and our variable name, semicolon to end this line. Then I duplicate this line, and I'm going to replace page x with page y. Also we need to replace the variable name, y. Before I set this file, here, we need to type console dot clear method. Console dot p. This method going to clear the unnecessary ts, which is print in our console. Before I set this file, I'm going to turn on the console in spac console. Now I'm going to set this file. After set this file, if I uber may cars in this window, here you can see the value. You can see page X value is 254 and page y value is 357. This is pretty similar to with our previous tutorials. We already familiar with that. You might think it is pretty similar with plan tex and plant Y, but there's a different. I'm going to create to another variable. I'm going to duplicate this section and this time, I'm going to tie I first I'm going to change the variable A, and I'm going to type e client tex. Then I'm going to change y with B and this time to type client y. Also I'm going to print client text and client y value in my console. I'm going to duplicate this two line, and I'm going to replace page with client. Client tax Vu, also client y. Now I'm going to duplicate this whole section, and I'm going to replace pacex with client tax. Client tax value is, also need to replace the variable N A, and client y value is, and we need to replace y B. After set this file, if I hover my cars are on this window, you can see the result. You can see client text value and page X value is steel sale. Also, page y value and client Y value steel. But what? If I add some paragraph. So inside the body tag, I want to use P tag paragraph. And then I'm going to type LM, and I'm going to add 1,000 word. And I'm going to set this file. Up to set this file, as you can see in my document, there is a scroll word at the right side. After se this file, if I hover my Rs are, any point, suppose this point, you can see page y value is 275, and client Y value is 275. But what? If I scroll down my page, then what? I want to scroll down my page. After scrolled down this page, as you can see, now page Y value become 1016, but the client toI value still remains same 275. That is the difference between these two property, client Y and client tax. Client Y property otherwise, client tax property work on window area. But Page y property, otherwise, page property work on document area. That's the basic different between these two properties. Basically, it returned the cursor height according to content size. But it return the cursor height according to browser window size. It's going to measure the distance from the window top. But it's going to measure the distance from the content top position. That's the main difference, and at the same way, it's going to work on horizontal position. If I add a deep element some type, D, and I'm going to assign n ID. ID equal to box. If I style this de element, so let's back to the style section title, I'm going to tie style. And I said the style tag, first, I'm going to target this box using its ID name. H tag box. Then I say the Civss. At first, I'm going to assign weight we 900 pixel. Hight height 100 pixel, and also I'm going to set a background color, background rate. If I set this file, here you can see, now it provide a horizontal scroll bar. And if I hover my cursor at that position, you can see, now our x value is e six. Also our client X value is e six. But what? If I scroll my browser at horizontal direction and then hover my cursor at that position, Now you can see the basic difference. Now, page X value is 273 and client tex value is 97 because, as I told you, client tex property measured the distance from the browser border. But page X property measured the distance from the content starting position. That's why it's print different va. I hope now this concept is clear for you. So thanks for watching this video, stay tune for our next tutorial. 104. JavaScript screenX & screenY Tutorial: Hello, guys, good to see you back. Once again, I'm back with a new Tutorial related JavaScript. And in this tutorial, we are going to learn about two new property related JavaScript. Screen X and screen y. As you can see in this example, we have a monitor screen, and in this monitor screen, we open a browser. In this browser, you can see a cursor pointer, and now I want to extract the mouse cursor coordinate. I want to extract the x axis point and y axis point of this mouse cars. But this time we are going to measure the distance from the screen border area, not the browser H. For that, Java stripped introduce two property. Screen X and screen Y. In our previous tutorial, we already learned about similar properties. But these properties are measured the distance from the browser H. We already learned about client tax and client Y property. But the different is client tex and client Y property, work on viewport area. It's going to measure the distance from the viewport border. It's only work on browser viewport area. But screenX and screen Y property work on monitor resolution. It is work on exact screen resolion. As you know, these properties are related to it mouse events. For that, we need to use these events, and we already familiar with that. So let's start the practical and see how we can extract the value from the screen resolution. How we can extract CRS position according to the screen border area. So let's jump into the VS Studio code editor. So as you can see, side by side, I open my VS Studio code editor and my browser using Live Server extension, and I open my previous table document named index dot at. In our previous tutorial, we'll learn about pageX and Page wi property. Also, we learn about client tex and Clidi property. And now I want to extract my cursor distance according to the screen size. I want to say I want to extract the x xs value of my cursor, according to this point, this screen size. From the lab side, I want to measure the cursor point. So first, I'm going to remove the unscent lines, and I'm going to replace page X property wheel screen. Screen x. Also, I'm going to remove this line and motype screen X value is and you're going to pant the value in my console. Then before I set this file, I'm going to open my console, and I want to set this file. After set this file, when I open my cars in my screen, here you can see the result. Now you can see screen x value is 1357. It's been 1357 pixel. And if I move it at the right corner, right side, Now our screen x value is 1918 because our screen resolution is 1920 5,080, and it print screen x value nearly 1920. And if I remove by cursor outside the browser, now it's not going to work. I work on only the browser window area. It measured the distance when I move my cursor inside the viewport area. At the same way, we can extract y xs. Just need to dict this line, and we need to replace variable name x with y and we need to use screen y property. Then I'm going to duplicate this line in my console, and I'm going to print screen Y. Screen Y. And I'm going to set this file. After set this file, if I hopper my curves are at that position, here you can see the y screen value from the top side. Here you can see y xs value is 651 pixel. It's going to measure the distance from the exact screen resolution. I hope now it's clear for you, what is the usage of these properties. Thanks for watching this video, St tune for the next Tutorial. 105. JavaScript offsetX & offsetY Tutorial: Hello, guys. Good to see you back. Once again, I'm back with a new Tutorial related JavaScript. In this tutorial, we're going to learn about two new Java Script property. Set X and set Y. So as you can see in this example, we have a browser window. Inside this browser window, we create a deep element. And in this deep element, you can see a mouse pointer. And now I want to extract the mouse coordinates. But this time I want to extract the mouse coordinate according to the deep area. We need to extract the value according to the deep position, not the browser window, and also not the screen resulion. For that, Java strip introduce to new property, set X and set Y. We already learned about similar properties in our previous tutorial. Client tex and client toy also screen X and screen I. Client tex and client wide property provide the value according to the browser window size. I want to say it's going to measure the distance from the browser X xs point, and screen X and screen property provide the value from the screen width and screen height. And we already familiar with that. And as you know, these are all mouse event related properties. We need to use Mouse Even to use this property. And we already familiar with these mouse events. So without wasting your time, let's start the practical and see how we can extract the value of x xs and Y xs using set X property and set y property. So as you can see, side by side, I open my Visa Studio code editor and my browser using Lp Sever extension, and I already created a stable document name index dot A stable. So as you can see, in our body tag, we have a deep tag with class name box. And in our style section, I already style this box element. He west w 500 pixel and height, 400 pixel. Also I set border and background color. So let's jump into the script tag. Script, and at first, I'm going to create a variable where and our variable is target. Target equal to, I want to target this bog step. So here, I'm going to use Qi selector method. Document. Dot query selector. Then inside the round brass, inside the double quotes, otherwise, single quotes, I'm going to type dot box. We are going to select this de element using its class name. There scum two in this line. Now I'm going to add an event to the target variable. For that, Amo type target dot, I'm going to use a method name add event listener. Add event listener. Then inside the round proces, our event name is mouse Name. Comma, and here I'm going to call the NOs function. And in this function, I'm going to pass a variable. As a short form, I'm going to use t. Now I'm going to create two variable, which is going to store our x x zero, x. I'm going to create and our variable m is x. X equal to. First, I want to get the xx zero sum type e set set x. Then semicl to n this line. Then I'm going to duplicate this line, and this time, I'm going to replace x w y. And this time, I want to store y x's value, type set y. And now after store the value, I want to print both the value in my console. Console dot, log inside the round press inside the single. First, I'm going to print set X. Oset x value is colon, concatation sign, and I'm going to pass the variable x, and semicon two in this line. Then I duplicate this line and replace x with y. Opposite, y. Also you need to replace the variable name. Then smog to end this line. And before I set this file, I'm going to turn on my console. Inspect console section. As you can see in our console, there is nothing. But after set this file, if I hover my cars on this deep element, here you can see the value. Oops, I forgot something. We need to clear our console section. Otherwise, it's going to print all the values at once. So H type console dot clear method. It's going to clean our unnecessary lines. After step this file, if I hobby curves are on the deep element, here you can see the Oset x value and oset y value. O pset x value is 230, and pset y value is 219. If I move by curves are at the eftp corner, upper move by curs are at the eptop corner, as you can see, now it pant pset X two and Opset y also two. So this is how these properties are work in JavaScript. I hope now it's clear for you. What is the usage op? Thanks for watching this video, stat tune for the next Tutorial.