JavaScript DOM & BOM: From Fundamentals to Advanced

1. Class Intro: Hello, and welcome to Mastering JavaScript Dom cos. My name is John Shokar. I'm FSTaC web developer and online instructor. We know the importance of JavaScript in website and Document Object Model and browser Object model play the key role in JavaScript. Using Dom, we can manipulate Stimus structure. Also, we can manipulate CSS values. We can add element anywhere in our web page. We can animate things using JavaScript Dom. We are going to learn a lot of things in this class. So let's talk about the core structure. At first, I'm going to give you the introduction, What is Dom. Then we are going to learn about targeting methods. We are going to learn about Dom gate methods, set method, query selector, Dom CSS styling method, event listeners, class list method, parent elements, child and child nodes, first child, last child, Ne sibling, create element, create text, attenil all type of dom property. Then after learn all type of dom property, we are going to start B browser object model. Here we are going to learn window height, window wide open window, close, move by move to method, resize, decides to scroll, scroll to location object, history object, page Yosete, page X Osit and minim. This is the complete tutorial about Java Sweep doom and boom. If you have basic knowledge about CSS, HTML tags, and Java Sweep, then this class is for you. 2. What is DOM ?: In this tutorial, I'm going to introduce you what is JavaScript Dom. The full form of JavaScript Dom is document object model. As you know, the most strong point of JavaScript is events. With that, Javascript have another strong point, which is Dom we can do a lot of stuff if we combine these two section. Before we work with Dom, we need to understand what is Dong. And what is Dom tree? Dom is a part of HTML, and the most important part of Dom is document. Inside this document, we have a main tag, which is known as TML tag. Otherwise, we can call it hoop tag. And then come to child tag of HTML tag, which is head tag and body tag. Head tag and body tag, they both are siblings and there parent ag is HTML tag. Now, let's talk about head tag. Title tag is one of the child tag of head 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. 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 attribute ID. With that, also we can set another attribute class to our heading tag. This attributor also work as a child tags. All the attribute and elements, you can see here, we call all of these nodes in JavaScript. This is element node, this is text node, this is attribute node. Now you might think, what is the usage of it in JavaScript? Here I just introduce you, what is Dm tree? Using this Dm tree, you can do two things in JavaScript. At first, you can get theta from the Dm tree. Suppose you want to extract the ID name of this attribute. In that case, you need to use G keyword, especially GT is a method. You can get any value using this method. At the opposite way, if you want to set a new value to your dome 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 a animation using help of JavaScript, otherwise, if you want to develop games, anything you want to do with your dom using help of JavaScript, you need to use this to Mod, G and sit. Also, you can change the attributes using this to Mathod. You can change class, ID, elements, whatever you want to change. You can add new STM element in your document. Otherwise, you can delete SML element. Otherwise, you can delete existing SML elements. If you want to delete H one tag, yes, you can delete it. Otherwise, if you want to add another child, ins at the body tag, yes, you can. In this tutorial, I just introduce you what is DOM. From the next tutorial, I'm going to show you how we can use it practical. Thanks for watching this video, statue. 3. JavaScript DOM Targeting Methods Tutorial: Good to see you guys. Again, I'm back with a new tutorial related JavaScript Dom. In these tutorials, we are going to learn Dom targeting method. In our previous tutorial, we already learned what is Dom tree. With that, I told you what is the usage of G and set method. Now the question is, if I want to get su value otherwise, sets a value, how we can target this element? Suppose I want to change H one tech. 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, JavaScript have some special methods, and we are going to learn the special methods in this tutorial. To target Dom element, there are 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 that 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, and inside this document, I want to search an ID. Here inside the round presses, we need to pass the ID name. It is one of the method of 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 by class name. Inside the round dresses, you need to provide the class name of this elemage. If you want to target it by their tag name, in that case, you need to type document dot, get element by tag name. Inside the rounddress 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 method. As you can see, side by side, I open my Visual Studio code editor and my browser using light server extension. I already created an ETM document named index dot HTML. As you can see, in this document, we create a TML 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, subheading, content the right side, you can see a sidewa section and we have some anchor tag on this list. Also we have a normal footer section. So in this basic layout, we are going to explore all the targeting method. You can see in my estim file, we have header section, we have menu section, we have content section, and also we have cyber section and foot of section. I already link a Style file with this estim page, style dot CSS, and you can see the file. As I link a JavaScript file with main dot js. Now it's an empty document. If you notice the ID name and the classes, we have a ID name wrapper, header, menu, content. Also, we have some class list, sidebar ID outer ID. For this image, we assign a class name, content image. Keep this file as it is. Let's jump into the JavaScript file main dot js. We are going to experiment all the dom targeting methods in this file. At first, I'm going to declare a variable where element. For now, I'm going to assign any value to this variable. In the next line, I'm going to assign a value to this variable. So Hemotype element equal to document. SemigonNI line. Now I'm going to ping this element in our console. Hemotype console, dot log inside the roundress or variable element. The Semgro two in this line. If I set this file and show you my casos section, let me show you, you can see it return document. It's an object. Let's see what is aside in this object. If I open this document, you can see the whole TML structure. It return all the TML structure from our page. If I type document dot all and this is this file, now you can see in my console, it return STM all collection. It return all the tag from our SML page. With that, it returned the tag index number. Suppose I want to target menu section. If I over on Menu, you can see it highlighted our menu section. Similarly, if I over my cards around header section, you can see the same result. Now I want to return the title section. For that, I'm going to clear the console. Here I'm going to type document Dot all inside the square basis, I want to return index number two. Then semicond two in this line. If I press Enter, as you can see, is written our title. Hm. But if I run the same command here, let me show you inside the square basis, I'm going to pass two and set this file, is written the same result. Home. Similarly, we have a lot of targeting methods. One by one, we are going to explore it. Help me to duplicate this line and comment out previous one. Now I want to target the head section. For that, we need to type document dot d. Here I'm going to type document dot head. If I set this file, you can see in Console, it return the TMS structure of head section. You can see the title, you can see the link, you can see the script tag inside the head tag. I mean, it target the complete head section. And now I want to target the title. Again, I'm going to degate this line and comment out previous one, and I'm going to type document dot title. If I set this file, you can see the result. It return the title home. At the same way, if you want to target all the body section, you can. I'm going to deviate this line and comment on previous one, and I'm going to type document dot Bonny. I'm going to set this file. After set this file, as you can see, it's written null. Why I don't know. Let's run the same command directly in our console. Here I'm going to type document dot boy. If I press Enter, you can see it's complete body section. You can see all the tags inside the body section. Remember, you can run any JavaScript command in your body section. Now I want to target all the links from our HTML page. Here I'm going to do this line and comment out previous one. I'm going to type document dot links. If I set this file, you can see it's return something. If I open this drop down, you can see it return all the ancha tags and the total length of anchor tag is eight. We have to tell H anchor tag in this page. If I over my cursor in our first anchor tag, you can see it highlight home section. Similarly for As, if I Ober my cursor, index number one, it highlight about section. Now I want to particularly target index number two. Certain links, I'm going to use square pass and here I'm going to pass two. If I set this file, you can see, again, sit undefined, why I don't know. I'm going to run the same command in our console directly. Copy this command and here I to paytge. If I set this file, you can see it's written Gallery. At the same way, you can target images. I want to duplicate this line and comment out previous one here I'm going to type document dot images. If I set this file, as you can see, it's written in array, and if I open it, you can see array length one. I I open my cars on it, as you can see, it highlight our image. If you want to target this image for that, you need to type document dot image. Inside this square presses, we need to pass the index number, which is zero. The semi do this line. If I press Enter, as you can see, is written, it's written our image tag. But if I pass an index number which is not available, let me show you document dot images. Inside the square press, I'm going to pass one. The semi do this line. If I press Enter, as you can see, it's 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 duplicate this line and comment on previous one. But 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 time. Here's one. It's going to run this Doc type from our HTML page, Doc type HTML. If I set this file, as you can see, it Doc type HTML. This is it for this tutorial. In our upcoming Tutorial, we are going to cover remaining ones. Thanks for watching this video. 4. JavaScript DOM Targeting Methods Tutorial part two: So again, I'm back with a new tutorial, and here I'm going to complete the remaining targeting method. Our next targeting method is URL. This method is used to target the website URL. So here I'm going to type document.in capital URL. If I set this file, as you can see in Cazoo, it's written the local server address as RN. Because you want quit Local Vos server. That's why it's written this URL. It is the same URL, you can see in my URL bar. Now, similar to URL, we have another method named domain. Again I'm going to duplicate this line and comment out previous one. I'm going to type domain. If I set this file, it is going to return the actual domain name, let me show you. Here you can see is written the IP address and it is our domain. It's always written the actual domain name, not the other pages like URL. Similar to URL and domain, we have function, which is best URI. Let me show. Here tie document dot base URI. This method also return the URL. If I set this file, you can see the result. This method return the complete URL. It's written the URL with protocol name, and our protocol is HTDP. These are all basic targeting functions. Now we are going to use the main targeting method. At first, I'm going to target the element by their IDA. I'm going to duplicate this line and comment out previous and to target element with ID name, we need to type document dot, gate element by ID. Inside the round presses, we need to pass the ID name. Now, let's back to the table page. Here you can see a lot of ID, rapper ID, header ID, Mini, and I want to target header ID. I'm going to copy the name. And back to my Min Dot Js file. Inside the double code, put it to pass the DM and our Dym is header. Let's set the file and see what is written. If I set this file, it's written null. Let's run the code directly in C Zoom. Copy the line and in myc Zoo, I'm going to type document dot get element by ID header. If I press Enter, you can see it successfully identify our header. And if I open it, you can see inside the head tag and inside this D, we have H one tag. Now using this method, I want to target Footer. Again, I'm going to type document dot Gate element by ID and inside the Double course, I'm going to type Footer. If I press enter, you can see it's written the foot and D. In this tutorial, I S teach you how can we target elements by their tegname, by their ID, by their class name, et cetera. But in our upcoming tutorials, we're going to learn what we can do after target this element. Now I'm going to target element by their class. Again, I'm going to do this line and comment out previous one and I want to type docunG element. By class name. Is the down presses and inset the double course, we need to pass the class name. Again, I'm back to the stable page. In this page, her use only one class name, content Image. I'm going to target this image by their class name. I'm going to copy the class name and back to my main dogs file. Inside the double course, I'm going to pay strep content image. If I set this file, you can see in Csoles written estable collection. Inside this estimate collection, we have only one class, length one. Another question is when we target element by the class name, in that case, why in our console written line. But when we target element by their ID, in that case, it's written directly the structure. Because ID is unique because we need to use ID in one particular tag. We cannot use the same ID multiple time, but for class, we can use the same class multiple time. That's why it's written in. If you notice also you can see the difference between method names, the method name is get Element. But for class, we need to type get Elements. Because ID is unique and class is not. If you want to target the particular index for that, you need to pass the index number. Here, in set the square basis, I'm going to pass zero because the index number of this image is zero and set this file again, it's sitter undefined. I'm going to run this code in my console directly. And if I press Enter, you can see the result. It return the image tag with class name contain image, and now I'm going to target elements by their tag name. Again, I'm going to duplicate this line and comment out previous one. And here, I'm going to type get elements by tag in. And inside the round brasses, we we need to pass the tag in. Let's get to the estimate page, and I'm going to target this time, I am going to target this UL tag. I copy the UL and in my JS file, I'm going to payscript. If I set this file, as you can see, again, it written table collection because in one estimate document, we can use UL tag multiple time. If I open the estimate collection, you can see total length of UL tag is three. If I show you my index that estable file, here you can see, we use UL tag multiple time for sidebar for content, and for main. If I over my cursor, index number zero, as you can see, it highlight menu section. And then I over my cursor index number one, it highlight content section. And if I over index number two, it highlights side verse section. Now I want to target the particular URL tag. I want to target this side verse section. I'm going to copy the method and I'm going to run this command in my console section and I'm going to paste it. After round ss, we need to use square *** and inside the square vases, we need to pass the index number. I need to pass two. I I press Enter, as you can see, it select whole sidebar section, which is made with UL tag, and you can see all the LA tag inside the UL tag. In this tutorial, we learn how we can target element by their class name, by their ID, and by their tag name. Also we work with other targeting methods. This is it for this tutorial. In the next tutorial, we are going to learn get and set value methods. Thanks for watching this video statue. 5. JavaScript DOM Get Methods Tutorial: Nice to see you back, guys. Again, I'm back with a new tutorial related JavaScript Dom. And in this tutorial, we are going to learn how we can get value from a stable document. Also, we are going to learn how we can set value in a Stable document. For that, we are going to use set and Gate method. In our previous tutorial, we'll learn how we can target Dom elements. But in this tutorial, we are going to learn up to target the elements, what can we do with that? First, we are going to learn what we can get from an element. In JavaScript, help up Dom, we can get three things. Atm text attribute. We can get three types of value using Gate method. For these JavaScript have some different methods. The first method is IAT text. This method help to get text from an element. Next one is IRA table. It's written the TM of this element, and our last three methods help to get the attribute video, gate attribute, get attribute node and attributes. Let's see how innerText and Inertable works. As you can see side by side, I open my Visual Studio code editor and my browser using Lifesaver extension and I open my previous ETL document. With that, we have Mindjs file. At first, I'm going to resolve the issue. If you remember, when we run documented body function in our console, it's written null. Some of the commands written undefined, otherwise null. So 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, it sit on the whole body section. Now our console, not going to return null, otherwise undefined. Now we can run every command in our main dot js file. But what is the problem? If we use JavaScript inside the head tag, in that case, the main problem is when we save our file, it loads the scrip tag before the body tag. That's why our JavaScript will not work properly. That's why we need to use the scrip tag end of this body tag. Now it's worked perfectly. So let's get to the JS file. At first, we are going to learn inert text. So let's get to the index dot t file. As you can see, we have a header ID, and inside this header ID, we have H one tag. And now I want to extract the text from H one tag. For that, we need to tie document dot, Gein by ID. Inside the round press, 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 table structure, but I want to return inert text from this tag. Here, we need to use a gate method, dot, inner text. If I set this file, now you can see return your logo, just the text. Let me show you another example. You can see my index dot estimate file. Here is ID named contained inside this content, we have H one tag, ING tag, Bagrptag, 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 get element by ID inside the down press is content. If I set this page, as you can see, it's written all the text from our content section. I do not return any TML tag. It is just written pure text. This is the usage of inner text method. Let's talk about our next method, which is inner HTML. Here, I'm going to duplicate this line and comment out previous one here I'm going to type inner HTML. If I set this file, you can see my Cole is written the whole estimus structure inside the content section. As you can see, it's written all the estimate tags with the text. If I pass header here, so I'm going to replace content with header. And this at this file, you can see is written the inner HTML, H one, with that, is written the text, your logo. This is the usage of this method. Next, we are going to learn how we can get attribute values. For that, we have to tell C method, attribute, get attribute nodes and attributes, and we're going to start with G method. Also we are going to find out the difference between get attribute node. Again, I'm back to my silts studio code digital. So first, I'm going to use Gate attribute method. Here I'm going to type Gate attribute. And now we need to pass round races and we need to provide the attribute name which attribute value we want. Let's back to the table page. As you can see in this D, we have only one attribute, ID, and here I'm going to use another attribute. Class class for now, I'm going to type XYZ, and I'm going to set this file. Now I want to return the class name from this tag. Here I'm going to pass inside the double code class. If I set this file, you can see, you can see the console, it written the class name, XY Z. Here we target our Dip tag using its ID, which is header, and we return the class name of this element using Gate attribute Bathon. But if I pass ID here, then what happen? ID. If I set this file, it's going to return the same ID name, header. Let me show you. If I set this file, you can see in my console written header. Let's add another attribute to this element. Here I'm going to add another attribute and our attribute name is style and I'm going to set border to this element. Border, one pixel. And I want solid boer. With that, I want red color. And I'm going to set this file. And in my Minto Js file, here I'm going to pass the attribute name, which is Style. And now it is going to return the value of style attribute. If I set this file, you can see the result, border one pixel, solid rate. Now let's talk about our another method, which is get attribute non. Here, I'm going to type get attribute no. If I set this file, now you can see in my Csoles written the attribute name with their values. If you want to return only the attribute value, in that case, you need to use G attribute, and if you want to return the attribute name with value, in that case, you need to use get attribute no. That was the main difference between get attribute and get attribute no. But if you want to return only the value using this method, yes, you can. Just you need to type dot value. If I set this file, now you can see it return only the value. Now I'm going to talk about our let's get method, which is attributes. This method going to return all the attribute names from this element. It's going to return an array and inside this array, it's going to return all the attribute names. Let me show you the practicals. I back to my index estimate file, you can see inside this header ID, we have total three attribute, ID, class and style, and here I'm going to type on the attribute. I'm going to remove all of these header dot attribute. If I set this file, as you can see, it's written an array. Sorry, it's not written an array, it's written an object. If I open this object, as you can see, total length of this object is three. Because we have to do three attributes 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 races and 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 its value, XYZ. Now I want to return only the value, not the attribute name. For that, just need to type dot Value. If I set this file, you can see the result. It's return XYZ. With that, also you can return attribute name. For that, just in tot dot name. If I set this file, you can see the result. I return 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 methods. Thanks for watching this video. Stay tuned. 6. JavaScript DOM Set Methods Tutorial: Good to see you guys. Again, I'm back with a new tutorial and in this tutorial, we are going to learn how we can set dom values. We have put all five methods and using this method, we can update any dom value. Otherwise, we can add any dom value. We can change inner text. Also, we can change the TML. We can set new attribute, we can remove attribute. Without wasting time, let's study the practical and see how it works. As you can see, side by side, I open my visors studio code editor and my browser using live server extension, and I already opened my previous TML file and Mindtgs file. Let's jump into the index dot HTML file. Here you can see we have a ID named header. Inside this header tag, we have H one tag. I decide I'm going to change the inner TML of this ID. I want to say heading to tag with different, but I don't going to change anything in my index dot file. I'm going to do the job using set method. For that, I'm back to main dot js file. Here I'm going to tie DcndtG element by ID header. Then our method name dot inner TML. Because I want to change the inner. Equal to is at the double codes, were 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 turn the inner HTML in my console. For that, head to pass document get element by ID, header, par TML. Then subgran to end this line. If I set this file, as you can see in the header portion, it strains the content. It replace H one tag with H two tag because we change inner HTML. At first, we target the element by their ID name. Then we change the inner estival of this ID. If I show you my Console is packed, console, you can see the result. Here you can see now our new estimate structure is H one, two, hello. But if I print this inner estimate 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 paste it before they set. So 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 and our second result come from after the change. This is how we can change inner TML using set method. Similarly, you can set inner text to any element. For now, I'm going to remove these 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 get to the visa studio coded. If I show you my index file, as you can see, is at this deep we have multiple attributes, ID, class name, si now I want to change class attribute V. I want to replace xyz with AVC. Let's get to the JS file and see how we can do it. At first, I'm going to duplicate this line and comment our previous one. Here I'm going to type document dot get element by ID header. We target our element by their ID name, and 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 brass, first, we need to pass our attribute name, which is class. And in our second parameter, we need to pass the value name, which is ABC and sepgoron to this line. Now, let's sing the attribute in our console. For that, again, we need to type a gate method gate attribute. Get attribute inside the round brass, we need to pass the attribute name, class. If I satisfyle you can see my console, we successfully replace our class name with ABC. If I show you my elements section, as you can see, let me show you anoccy replace our class name in my dog with ABC. This is how we can change any attribute value. Using set attribute method, also you can change inline CSS value. Let me show you the example. Again, I'm going to duplicate this line and comment out previous one. This time, I want to target our attribute and our attribute name is style. Here I'm going to pass a new value and our view is border border, colon and her to pass the values. Border, ten pixel dot ate, and I want to set border Color white. If I set this file, you can see the result. Successfully replace the inline CSS value using this method, but this is not the right way. In our upcoming tutorial, we are going to learn about it. If you want to print the value in your console, just her to type style. If I set this file, now you can see my console, the value, border, ten pixel, dotted and white color. Basically, I want to say, with the help of JavaScript, we can change CSS properties, and we're going to learn about it in our upcoming two studios. Now, let's talk about our next method, which is attribute method. Again, I'm going to duplicate this line and comment on previous one. For now, I'm going to remove these unnecessary lines and I'm going to type document dot Gate Element by ID attributes. As you know, He we need to pass Ry. Inside the square passes, we need to pass the index number and the index number of our class is one. If I show you why index 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. Hem pass dot value. Then we need to use equal to sine inside the double course, we need to pass the value, and I want to set our class name Z Z Z. Semi in this line. Before I set this file, I want to print our attribute in. Here I'm going to pass class, I'm going to set this file. Now you can see in my Casole it replaces our class name with ZZZ. If you use this method, you need to remember the index number. But in our previous method, 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 jump into the studio code editor and see how it works. As you can see in this D, we have to do three attributes, ID, class, and style. As you can see, this Dwb red border color. Let me increase the size ten pixel, and 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 JavaScript. Let's get to the MinjsFle. Again, I'm going to duplicate this slide and comment out previous one. And 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 round presses, inside the double codes, we need to pass the attribute name and our attribute name is style. Semicon two in this line. If I set this file, you can see the result. Now you can see in my browser, it's removed 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 estimate structure from the elements section, now you can see inside the body tag inside this div, we have a header. But if you notice, you can see we have only two attributes, ID and class. It successfully removed the style attribute. But if I back to my index tal file, you can see, still our style attribute exist in this deep. In this tutorial, you learn how we can target dog values and also we can set new values to our dom. This is it for this tutorial. In our upcoming tutorial, we are going to set CSS. This is it for this tutorial. Thanks for watching this video. 7. JavaScript DOM querySelector & querySelectorAll Tutorial: Good to see you guys. Again, I'm back with a new tutorial related JavaScript Dom. In this tutorial, you are going to learn two methods, query selector and query selector. In our previous tutorials, we learn how we can target Dom element by ID, by class theme, by tagni. But the problem is if we need to target the different objects, in that case, you need to use three different method. ID, get element by ID or class, get element by class name, and for tag, get element by tagnin. But what? If we had only one method to target all the elements, who can target ID, class name and tagnin. For that, JavaScript introduce two method, Qui selector and Qui selector. For QI selector, we need to type document dot Qui selector. Inside the round brrass we need to pass the CSS selector. Similar way, if you want to use Qi selector, for that, you need to type document Qi selector. Inside the round brass, you need to pass CSS selector. But what is the difference between qui selector and query selector? If you use querySelector, it's going to target the first object. Maybe there are similar objects with same class name, but it's going to select the first one. But if you use query selector, it's going to target all the elements. That is the basic difference between two method, Qui selector and Qui selector. Without wasting your time, let's study practical and see how it works. As you can see side by side, I open my Visual Studio code editor and my browser using Lifesaver extension, and I already opened my previous document index dot HTML. That's the JavaScript file, we practice our JavaScript methods. Let's use the first method, which is query selector. I'm going to remove all of the unnecessary lines, and here I'm going to type document dot QuiriSelector. Query selector. And inside the round basis, we need to pass the selector name and here I use ID selector, header. For that, we need to use hastexSin because it's an 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 tML of this element. For that, her into type IRTML method, IRTML equal to inside the double course, I want to replace heading one tag with heading to tag. For that, I to use H two tag, H two. Between these two tag, I'm going to type Hadu. In the next line, and forget, again, I'm going to use Kari selector all. Here I'm going to replace Gate element by ID with query selector. Kiri selector. Again, we need to use Hateg sign because we are selecting the element using its ID. That's why we need to use HDAC and I want to return the inner HTML of this element inner TML. 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 HTML, hello. As you can see hero 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 query selector method. If I back to my index dot t 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 list and instead the mend js file, here I'm going to type Query 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 written all the inner estimal from the first element. Using query selector, we can set new value, otherwise, we can get within. Now, let's talk about our second method, which is query selector. Let's see how it works. If I tied query selector, and this file, now you can see, hoops, we need to remove the inner estimL because we are going to select multiple element. Now you can see my Csole is written in node list and the length of this list is two. If you notice, you can see, first we use the class name list with UL tag, then you use the class name list with paragraph tag. If I show you why index dot ETL file, first we 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, here we can use class name, tag name and ID name. Here you can use any type of selector to target the element. Similar to other method, if you want to target paragraph tag, for that, here you need to pass. Inside this square brass is the index number. One. If I set this file, you can see the result. You can see in Csole the complete paragraph tag. You can see the class name, you can see the content, et cetera. Let me show you another example, qui Selector all. If I show you my index dot t will file, as you can see, we use UL tag multiple time. We use it in our content section. We use this tag in our cyber section, also use it in our menu section. And now I'm going to use the Bath Wood by their tag name. Instead the round presses, we have to pass the tag name and our tag name is UL. As 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 node list, you can see the total length of UL tag is three. One by one, if you want to return the inner TML, yes, you can. For that, here you need to tie Square ss and inside the square dress, we need to pass the index number. I want to return index number two. Then we need to use dot inner TM. If I set this file, you can see Console, it's written all the inner estimate section from index number two. It's written the sidebar menu list items, home about us, gallery, contact us, et cetera. Now I'm going to use little Advanced *** selector. You can see my index dot t file. Inside the header section, we have H one tag, your logo, 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 type our ID name header space the element name H one. If I set this file, you can see the result in Mica zone. It's written the H one tag, which is inside the header section. If I back to Y, index dot M file and to wet this line multiple time, accept this one. Now you can see inside by node list we have 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, her can use Advanced CSS selectors. This is the usage of Cir selector and Query 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, stay tuned for our next tutorio. 8. JavaScript DOM CSS Styling Methods Tutorial: Good to see you guys again. I'm back with a new tutorial, realtate JavaScript Dom. In this tutorial, we are going to learn Dom CSS styling methods. 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 list. Using this method, you can get CSS Vu. Otherwise, you can set CSS then. Suppose you want to extract CSS 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 worked. As you can see, side by side, I open my Visual Studio code editor and my browser using Live Server extension and I open my previous estimate document name index dot HTML. With that, I open MindjsFle. At first, we are 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 A stable file, as you can see in this D, we have a ID named header, and also we have style attribute in this D. I'm going to target this element using header ID. Copy the ID name and back to my main dojsFle and I'm going to tie document dot query selector has tag or ID name, header. At first, I'm going to show you how we can get style property from this element. For that, you need to type dot style. If I show you my index dot T, as you can see, inside our style attribute, we have a property name border. I want to get border property value. I copy the property name border and back to my main Js file and here upper style, I'm going to use dot and our property name border. Before I set this file, I'm going to open my Cul some inspect Czome. If I set this file, you can see my calzone is written the border property value from the header element. You can get CSS value from this math. But if I pass a property which is not easiest 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 here, and then set this file, as you can see in my console, it's written blank. Now I'm going to set a font color to our header section. Back to our Idexot TML file and here I'm going to type semicolon and after semicolon, I'm going to use another property which is colored. Color yulu. If I set this file, you can see my consoles written yellow. For now, I'm going to remove the responsive mode, and if I type something inside this D, so I'm going to type hello. And set this file. Now you can see in my header section, the font color is Lu. This is how we can get 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 element. In our previous example, we get value using style method, and now we are going to learn how we can assign a new property value to a TML element. Now I want to set background color to this element. I'm back to my Minot Js file and I'm going to copy this portion, 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 say dab down color. Here I'm going to type background color background color, and I want to use blue semicon to this line. Remember, in CSS, we need to use dash between background and color. But in Java Street, you don't need to use dash sign and also you need to capitalize C character. Let's set the file and see what it return. After set this file, you can see the result. Here you can see it stays the header background color. I do not set my table file, that's why hello is still exist in our header portion. Let's set the index file again. Now it's gone. If I show you my elements section and how my cars are on this header portion, here you can see it set a new CSS property, which is background color, background color, blue. Similarly, I want to add another property to this element. Again I'm going to duplicate this line and I'm going to comment out previous one. Now I want to add padding. Here I'm going to remove the blue color and the background color property and after style, I'm going to type padding. For every direction, I want 50 pixel padding. Hemo 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 these, you can get any class value. As you can set any class name. Let's study practical and see how it works. Let's back to the Atable file. As you can see in our headed deep we have a class named XYZ, and I'm going to remove it now. Now in this element, we don't have any class and I want to say a class name to this element. Now, let's get to the main dot js file. First, I'm going to get this line and comment out previous one. Here I'm going to type document dot query selector dot method name, which is class name. Class Name. And I want to set a new class name and our class name is ABC. 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 duplicate this line on I'm type our variable name element. Element equal to document dot Quay selector header and I want to return our class name only. I don't want to set anyway. If I set this file and show you my console, it's written ABC. Here we set a new class name and get new class name using this method. And also you can see the class name in my elements section, class ABC. Now you might have question, 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 our CSS file style 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 ABC ABC. Instead the calibers, I'm going to type padding. Padding 50 pixel. If I set this file, you can see the result. It at padding from all direction. But if I back to my main Dogs file and omen out this line and the set this file, you can see now there is a no padding because now we do not assign any class name AVC. If I show you my elements section, as you can see, there is no class name ABC, but we already style this class in our style section. If I uncommen this line and set this file again, as you can see, it at padding from all direction. If I back to my console, you can see the class name ABC again. So this is one of the main practical usage of this method, class name. Using these Dom methods, we can set any CSS properties, any attribute to our table 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 done both the classes name, ABC and XYZ. 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 XYZ. Now, let's talk about our last CSS styling method, which is class list and what is the difference between class list and class name? Let's start the practical. So first, I'm going to duplicate this line and comment out previous one and 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 written both the class name. But if I type class list here, let me show you and then stifle, now you can see it's written and array, dom token list. If I open this dropdown, you can see rutain these two for both the class name it assigned different index number. At zero index number, it assigned ABC, at one index number, it assigned XYZ. Class list return array, but class name return string. But the main difference is this function come with its own methods. I'm not going to show you all of this method in this tutorial, but in this tutorial, I'm going to show you the two methods or first method is a at first, I'm going to remove all of this class name, XY D and AVC, and in my table file, I'm going to ascend the class name here, class ABC. And if I set this file, you can see there is no changes because we already add a CSS 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 going to remove all of this and her type class les dot, and using this method, we can add multiple classes. Here I'm going to add a class name QWE. If I set this file, you can see in my console, it returned to class name ABC and QWE. But in our estiv file, here we assign only one class ABC. But we assign the second class from the Javascript dom. If you want to add another class with that, yes, you can. Just up to quotation, hero comma and inside the double quotes, you can pass another class n and her type ASD. If I set this file, you can see my Console. Now we have to do three class in this element, ABC, QW and ASD. Using this add method, you can add multiple class at once. Now, let's talk about next plus list method, which is remove. At first, I'm going to remove this method, add then I'm back to my indexOdEtable file here inside the class, I'm going to assign to another classes in my table page. X Y and ASD. I'm going to set this file. Up to set this file, you can see my console. I written four plus name because we do not save our Mind js file. If I set this file, you can see the result. Now it sit on and arrow. Because you do not use any method here, that's why it's sit on an arrow. But if I comment out this line and set this file, now you can see in my console, it's three class name, ABC XYZ ASD. Now I want to remove one of the class from this list. I want to remove XYZ class. Here I'm going to use a method name. Remove. I uncommen this line and here I'm going to type remove. Inside the round presses, we need to pass the class name and I want to remove XYZ. Inside the double pose, I'm going to type XYZ. If I set this file, you can see the result. It's **** two class name ABC and ASD. Using this class list 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 ASD class. So per coma, inside the double course, you need to type ASD. Now it's written only one class name, ABC. I've both the classes, XYZ and ASD. But if I show you my index or estimate file, all of the three classes are still exist in this element. But using Dom, we remove both the class name XYZ and ASD. This is it for this tutorial. In our upcoming tutorial, we are going to learn add even listener. Also, I'm going to cover all the class list methods in our ongoing tutorials. Thanks for watching this video statue. 9. JavaScript addEventListener Method Tutorial: Good to see you guys. Again, I'm back with a new tutorial related JavaScript. In this tutorial, we are going to learn JavaScript, add event listen. These are all basic events and we know how we can use that. For those events, we need to use event at tribu. As you can see in this button, we set an event on click and after click this button is going to call AVC function. So 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 JavaScript, you already familiar with that. But there is a problem with this technique. Every time we need to go back our estimate document to set this attribute. Here we use in line events and it creates our estiv file heavy and complex. We don't want to mess up Javascript attribute with estim tank. For that, Javascript come with two solution. In our first solution, we assign the event by the help of dom. You can see, document dot Get element by ID, we select the particular element by its ID name, then we set the particular event and call the function. Whenever tick the estim element, you're going to call the function. Let me show you the practical example and see how it's sworn. As you can see, side by side, I opened my Visual Studio code editor and my browser using Lifesaver extension. I opened my previous document t file and mendot Js Now in our JavaScript file, I'm going to call our even. Whenever I click on this header portion, I want to change the background color. At first, I'm going to tung in this element by its ID name. Here I'm going to type Documen gate element by ID. Is that the round verses, we need to pass the ID name and the Dame is, as you can see, header. Copy the ID name and paste it here. Now, here we need to pass the event name. I'm going to type dot and our event name is on P. Equal to and here we need to call the function name and our function name is ABC. Them going to this line. Now, we call the function, but we do not create the function. For that, I'm going to create the function. He type function, and our function name is ABC round braces. Then inside the calicis and I want to change the header background color when I click on it. Again, we need to select this element, and I want to select this element by its ID name. Copy this line and paste it here. Dot style. And we already learned about style method in our previous tutorials. After style, we need 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 semign in this line. Now I'm going to set this file up set this file, and when I click on this header section, as you can see, it's going to change the color. It's gray to green. Let me show you again. If I repress this page, as you can see, now the header background color is gray. But if I click on it, as you can see, it's turned into green. In that way, we can add events in our estimate tag. This is in the next two, we are going to show you how we can use Add even Eisner method. Now, let's talk about Add even Eisner method. It is the very useful Vo in JavaScript. After select the element, we need to type Add Even Esner. It is the method name. After that, you need to pass two parameter. Si, you need to pass through the three parameter, but for now, I'm going to show you two parameter. In our first parameter, we need to pass the event name. Remember, for click method, just need to type kick not on Tk. Similarly, for on mouse Enter, just need to type mouse Enter and for on deval Kik, we need to type DVO click. 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 keyword, then run presses and inside the calibrass you can pass your statement. So let's start the practical and see how we can use it. Again, I'm back to visa Studio Code reader. Here I'm going to use the Add even listener method, and I'm going to call AVC function. Somebody remove this slide and I'm going to type add even listener. And then we need to use round ss and here we need to pass to two parameter. In our first parameter, we need to pass the event name, which is lick. And in our second parameter, we need to pass the function name, which is ABC. If I sub this file and over my cursor on this header session and if I praise click, as you can see, again, it's turn into gray to green. This is how it works. 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'm going to duplicate this line and here I'm going to type Adnllar and our event name is Muse Enter, Muse Enter. As I told you, if we use this Bathod we don't need to type the full name of our event. Just we need 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 queer function. Inside the round presses, I don't want to pass any parameter for now. Then we need to use Cariss inside the calices, we need to pass this statement. At first, I want to slick the same element by its iD name. I'm going to copy this line and paste it inside the Cass. Then I'm going to type style function. Style, dot, and this time, I want to play with border property of this element. I'm going to type style dot, border equal to inside the double code. I'm going to pass then pixel solid and I want blue border. Here I'm going to pass the semicolon to end this line and set this file. Now I want to open my cursor on this header portion. If I open my cursor on this header 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 and 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. I'm going 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 water width is two pixel with that the background color is gray. If I click on it at the same time and the same time it changed the background color. Also it changed the border width and the color. This trick is possible if you use only this method, add even listener. Now, let me show you another advanced thing. Here you can see, we target this element header and we assign event to this element P and also style the same element in our function. We can use a shortcut and remove this section from here. Here I'm going to use this keyword. This dot style dot border. This means the element we target, and here we target the header portion. Using this keyword, we can reduce some characters from it. If I set this code and over my curt on this header section 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 are going to talk about the third parameter of Add even listener function. Thanks for watching this video. 10. JavaScript addEventListener Method Tutorial part two: So we already learn how we can use Aden listener math. 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, and the parameter name is use capture. This parameter return to either false will. Now, what is the meaning of that? Let's try to understand what is the meaning of that. Here you can see two container out and inner. First one is out dip and second one is innate you said, click event, boot the D Now if you click on inner Di section, it's automatically triggered the outer dip T. I want to say, in that case, it's going to run both the events, and if you want to run the inner Deep event, then you want to run outer Dip 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 visor studio code editor and my browser using icererEtension, and I already created an TML, and I already created an TML file named index two TML. With that, I create a JavaScript file maint dot Js. As you can see, in my browser, we have outer Deep and inund now I'm going to add to similar event both the deeps. And then we are going to see how we can use SceptureParameter. First, I'm going to target the element. I'm going to type document dot QuiriSelector. Inside the roundress put it to 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 here I'm going to use add eventi seller our event name is. Here, I'm going to create the inline function. I want to type comma function. Function round resis. Is at the Calories. These dot style dot background equal to, and I want green background color when I click on INT. Green. We go on to this line. If I set this file and click on this innat 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 Dip section. I want to get this line and I'm going to pass out. I want background color. No. And I'm going to set this file. In this programs, we do not use or s parameter use capture. So first, I'm going to show you the devastation without use capture. So I'm going to set this file again and I'm going to click on inner Dip section. When I click on In a dip section, as you can see, it's also effect on outer dip section. To make it more clear, let's add to alert box inside this event. Here I'm going to type alert and inside the alert box, I'm going to type inner D inner DF outer DV I'm going to type O D. I'm going to set this file. Now, if I click on the Inadi section, as you can see, first it run inert D. If I press Okay, then it run outward D. But if I pass the third parameter, which is use captured and I want to pass through. Also, I'm going to pass two parameter for our outward D. True I'm going to set this file. If I click on my inner section, now you can see at first it run out a de portion. If I press Okay, then it run in a D. It is possible pass when we pass through value, both the element, and if I pass false, both the functions, let me show you I'm pass falls, also, I'm going to pass wholesa. Falls and set this file and click on Iative section. Now you can see it run the default function. First, it run Iative event, then it run outta Diff event. This is the basic usage of this parameter. Now, let's talk about our st 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 click event going to change the border style. As you can see, we opaal our previous example file. And here we use two click events. So first, I'm going to remove the second function. And then I'm going to change the event name, and I'm going to change mouse leave. I'm going to set this file. As you know, when we use this event, whenever we over my cursor on this element and remove the cursor, it's going to apply this function. Let me show you. I'm going to over my cursor on this header section. If I remove my cursor, as you can see, it's 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 to get this line. A I'm going to tie, add event listener, and here I'm going to use another event, which is, I'm going to call a different function and our function name is XYZ. So let's create the function. I'm going to type function, XYZ, then round braces. Then inside the calcs. I'm going to type document dot, G element by ID, and our ID name is header. Copy this portion and paste it inside the round braces. Dot, now we need to use the function, which is remove event isonRmove event lisaer. And here we need to pass the event name, which event I want to remove. I want to remove this event Muse. At first, we need to pass the event name which is Muse copy the event name. Inside the double codes, I'm going to pass it, and then we need to pass this function name and the function name is ABC and semi go on to N this slide. So after I set this file, I hop my cars are 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 I 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 sillasty because I pass the function name inside the Dole code. I don't need to pass the function name inside the Dole codes. So I'm going to set this file again. Again, I'm going to move my cursor on this header portion. This time, I'm going to press click. Utter press the click and if I remove my cursor from this portion, as you can see, now the background not changed the color. This is the usage of remove event listener. This method is used to remove Evans. As you can see, to remove mouse lif event, we said other event, which is clique. After press the clique, it's going to call this function XYZ, and in our XYZ we use remove even Listener method. And this method, going to remove this event from this function. This is how we can use remove even Listener function. So thanks for watching this video. Stay tuned for our next two tudio. 11. JavaScript classList Methods Tutorial: Hello, guys. Good to see you back. Again, I'm back with a new tutorial related JavaScript Dom. And in this tutorial, we are going to learn class list methods. In our previous tutorials, we already learned a little bit about class method. We learn about add method and remove method. We learn using this method, 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 toggle contains, item, length. So one by one, we are going to learn all of these methods. So let's start to add and revo method. So as you can see, side by side, I open my Visual Studio code editor and my browser using Lifesaver extension, and I already created an estimate document named index dot HTM. As you can see in our header section, we already define a class, 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 are going to use class last Mthons. I want to add another class named XYZ to this element. But before, I'm going to style this class. So here I'm going to create a class name XYZ, X Y Z, and hemos background color green. I'm going to set this file. For now, it's not going to effect on anything. Now it's time to jump into the Mind js file. Here you can see we already use Aden Listener method. I also use ClickEBn 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 classist method. For that, we need to type document dot get element by ID header. Let me show you dot the methodym class list. Plus list. Here I'm going to type plusls dot a. Is the round verses, I'm going to pass the class name, and the class name is XYZ. Then semigraun to end 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 open my header section, as you can see it adds a new class to our header element, XYZ and the background color come from this class. Using A method, we can add multiple classes at once. If I press comma and then pass another class, QWE and set this file and click on this section. As you can see, in my 11 section, now we have another class named QWE. 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 list. I'm going to add two more classes in our table document. I'm going to type XYZ and Egg and I'm going to set this file. Now, let's get to the Mindjs file. For that, we need to duplicate this line, and I'm going to comment out previous one. Here I'm going to use classles dot remove Method. V. And I want to remove XYZ and EFG. I'm going to pass EG, and I'm going to set this file. After tick this header portion, I want to remove XYZ and EFG. So to set this file, if I click on header portion, as you can see it back to the previous color. I mean it remove XYZ. If I show you my elevated section, now you can see we have only one class AVC I remove XYZ and EFG, but it still exists in our TML document. ABC, XYZ, and EFG. But the help of glass list method, we remove it successfully. Here you learn how we can use remove method. We already learn how we can use add and remove method, and 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, XYZ, Eb gene, 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, we need to tie dot length function. In and I'm going to set this file. After I set this file, if I click on header section, now you can see the result. It return 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 Tabul method. What is that and how we can use it? For this example, let's back to the index A table file and from here, I'm going to remove these two classes XYZ and EBG. Now we have only one class in this element, ABC. Let's back to the main dot js file here, I'm going to duplicate this line and uncoven this line. Here, I'm going to use the D toggle method. I'm to type class dot Toggle. In this method, I want to toggle only one class on the XYZ. 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, and 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 I click this portion, now you can see it add XYZ. Also, you can see it change the background color. If I click again, now you can see it remove the class XYZ and apply another background color, which from ABC. You can remove and add class using Toggle method. Now let's talk about another method, which is item. 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 ABC, I want to add XYZ. With that, I want to add EPG, and I'm going to set this file. Then I'm back to main dot js file. First, I'm going to comment on this line, I don't need it here I'm going to type last's dot or function name, item. Inside the round press or to pass the index number. I'm going to pass one. After set this file, if I click on this header section, you can see it's written only one class name, XYZ. But you can see my element, we have to three class, ABC XYZ, and EFG. But here I specify the index number using item function, one. That's why it's written XYZ. So if you want to use this method, you need to provide the class index number. If you pass zero, then it return 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 to Tether falls. If the class name is exist in this element, it's going to return true. Otherwise, it's going to return false. So let's start the practical and see how we can use it. As you can see in our header, we have to draw three classes. So let's get to the main dot js file and her to replace item with contains. Call teams. And inside the downdresses and inside the double codes, we need to pass the class name, and I'm going to pass XYZ. If I set this file and click on this header section, as you can see, it's written 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 heal portion again. Now you can see teton falls because this class is not easiest in our element. Most of the time we use this method with the condition, and according to the result, we run different programs. This is it for this tutorial. These are the all class method 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, Stay tuned. 12. JavaScript parentElement & parentNode Method Tutorial: Good to see you guys. Again, I'm back with a new tutorial related JavaScript Dom. And in this tutorial, we are going to learn Dom traversal method. There are tutor 12 methods that's under traversal method, like parent element, parent node, chant, first child, last child, net sibling, previous sibling, et cetera. These all methods are used to target table 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. A is parent element, and B, C, B EF is child element of A. In JavaScript term, we can call it node otherwise element. If we ask who is the first child of A, then the answer is B. B is the first child of A. If we ask, who is the last child of A, then F is the last child of A. So these are all child of a element. Now, these all elements are siblings, BCDE F. They are all siblings. If I ask you, who is the next sibling of B, the answer is E, E is the next sibling of B, and if I ask you, who is the previous sibling or B and the answer is C, C is the previous sibling of B. These are the terms that you need to know before we start from traversal math. If you understand this simple chart, you can understand all of this method. Let's start the practical and see 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, sit side, I open my Visual Studio code editor and my browser using fester extension and I already created an TML document named index dot TML. With that, I already link our main DoJs file, Min Dot Js. Now it's completely blank. You can see in the body section, we have a outer deep. Inside this outer deep, we have Inert inside the inner Deep we have some child elements. A, B, C, D, E, in our outer deep, we set an ID, outer. Similar to inner Deep we set an ID, inner. And in the child sibling, also we set an ID named child C. We have to tell five div element inside the inner container. So we're going to start our practical with paren mode and parent element. At first, I want to target out Div using inner DV. Let's jump into the JavaScript file and see how we can do it. Here I want to type document dot get element by ID. Inside the round presses, put it to pass the ID Name and the ID nav 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. I'm going to move this line into a variable where A equal to document dot get element by ID dot parent element. Now I'm going to print this variable in our console section. Sound type console dot log inside the roundresses are 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 diff section. If a Hobermcar on this section, you can see it highlight the outer dif section. So inner deep parent is out D, but who is the outer dip 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? So I want 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 T. TML 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 estimL we can change style, we can change whatever we want. Suppose I want to change outer background color. I want to duplicate this line and comment out previous one. Here I'm going to tie parent element dot style method. And here I want to change background color background, equal to, and I want to set background color red. If I set this file, you can see the result. As you can see, it add a background color to our TML tag because here we pass outer element and it select the parent element of outer element and the parent element of outer element is HTML. But if I pass inner hair, Then set this file, now you can see it 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 now slur for you how we can target parent element. Now I want to select the inner element using the helpop child element. If I show you my index dot STL file, you can see there is a child element named C also you said an ID, child C. Some copy the ID name, hL and back to the main dot js file, and here I'm going to replace inner with child C. If I set this file, now you can see we successfully change our inner background color rate. Now, let's stop out another command which is parent node. There is not too much different between parent element and parent node. So to duplicate this line and cont out previous one. Here I'm going to tie parent node. Paren, no. If I set this style, 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. And if we use parent node and if the parent element is not available, then it's going to return something. Let's make it more clear. I'm going to remove this style portion. I want to return parent node. If I set this file, now you can see in my consoles return inner because the parent of C child is inner element. But if I get to my index dot estiLFle as you can see, in our estimL tag, there is an ID, M and I'm going to copy this ID. And back to the main dot js file. I want to pass the ID name. Now I want to return the parent element of HTML tag. After I set this file, as you can see, is written the document. I do not return any null. But if I pass parent element here, let me show you. I'm going to duplicate this line and comment on previous one and I want to pass parent element. If I use this function, and set this file, as you can see is written null because there is no parent element of HTML tag. So this is it for this tutorial. In the next tutorial, we're going to learn children and child node methods. Thanks for watching this video. Stay tuned. 13. JavaScript Children & childNodes Methods Tutorial: Good to see you guys. Again, I'm back with a new tutorial related Dom traversal methods. In this tutorial, we are going to learn children and child node method. In our previous tutorial, we already learn about parent node and parent len. So let's see what is the difference between children and child node. As you can see, side by side, I open my Visual Studio code editor and my browser using if server extension, and I already opened my previous ETML document, index dot ETL file. With that, we open main dot Js file. Basically, using this methode, we can target children's 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. So let me show you the demonstration. First, I'm going to target the outer element children. So here I want to pass the ID name outer. And 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's written table collection. Here you can see my console, it total two children, H two tag and inner dip section. If I show you my estable structure, as you can see, inside the outer dip, we have total two children, inner dip section and H two tag. That's why it's written two element. If I target the inner element and I want to return all the child tag from inner element, so here I want to tie inner. And I want to set this file. Now you can see in my equal so 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, her need to use square braces and I set the square braces, we need to pass the index number. As you can see, the index number is three. So to pass three here. After I set this file, you can see the result. It's written this child element, C. Now let's set a style to this targeted D. For that, I want to pick this line and comment out previous one. I'm going to remove the variable. I'm going to type docotGtelement by ID and the ni is and the parent Inevis inner. Also the child element. Children inside the square ss three. So here we need to use style function, style dot background. I want to say red background color. So to type equal to inside the double code 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 TML of this element in my console, let me show you. Here I'm going to type children inner TML. Then this file, as you can see in my console, it's print C. This is the usage of children metal. Now let's talk about child loan. 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 type dot child ones and I'm going to set this file. Now you can see in my Casos section, now you can see its length is 13. As you can see, it's written all the childrens from the inner section. But as you can see in our first index, it's written text. Another quien is, what is that? If I over on two section, you can see it highlight this section. But if I over on text section, it doesn't highlight everything. Now you might have quotien what is the text node? From where it count. Suppose if you use any character like Enter space on your code, then child node also count as an element. Let me show you that. Let's d to the index te estimate file, and here I'm going to commend one of the DV element, this B, and I'm going to set this file. Now you can see my conso section, it's also written the command, if I open this command, as you can see, there is a attribute named data and also written what is inside the command. Similarly, if I open our zero index, as you can see, it's written new light director, backslash eight, child notes 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. He just want to pass the index number. If I pass one, so I'm going to pass inside the square basis one. Then I'm going to apply style 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 node counts everything as an element. This is the basic difference between these two method. Thanks for watching this video. Stay tuned for our next two studio. 14. JavaScript firstChild & lastChild Method Tutorial: Good to see you guys. Again, I'm back with a new tutorial related Dom Taersa method. And in this tutorial, we are 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 study practical and see how we can use it. Here you can see a Dom chart and A is our parent element B, C, B E F 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 F. F is the last child of A element. So let's start the practical. As you can see, side by side, I open my Visual Studio code editor and my browser using if server extension and I already created an TML document named index dot HTML. As you can see in my body tag, we have Outer Dev IAD Dev, and some child Dems. Also we link JS file with this STL file, main dot Js. At first, I want to return the first element child of this IADm. At first, I'm going to remove the unnecessary lines. I don't need it. And then I'm going to select document dot get element by ID inner. We target our inner element. Then I'm going to use our function name, which is first element child. I'm going to tag first element child. If I set this file and show you why Console, it's going to return H two tag. Let me show you. So if I show you console section, as you can see, it's written H inner. Because heading two is the first child of inner element. You can see the two tag inside the inner element. So after target this element, we can do anything with that. Suppose I want to return inner HTML. So I'm going type inner HTML. If I set this soil, you can see my console, it's return 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 two tag. Remember, first element child always target the first HTML tag. At the opposite way, we have another function, which is st element child. Some duplicate this line and comment out previous one and Hamer type st element child. 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 inner Dan. Now let's talk about another method, which is first child. So I'm going to duplicate this line and comment out previous one. And if I select first child here, I'm going to type dot first child and semicolon to this line and set this file, as you can see, is written text. It written a text node. If I open the text note, as you can see, inside this data, we have newline character. It's mean we use 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 D 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. So this was the basic difference between first child and first element child. First element child always return the first tamal 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 learn 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 topate this line and comment out previous one. And here I'm going to tie last child. If I set this file, you can see the result. Again, it's written a text node. If I open this text note, as you can see the data div 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 error. Let me show you. I'm going to apply style to this last element. This last child that style background rate. If I set this file, as you can see in my console is written error, type error. We cannot style text notes. Let me show you another example of first child bethod. I'm going to comment out this line and uncomment previous line. And here I'm going to change the selector, and I'm going to use this selector, child C. I want to pass this ID, and if I want to return the first child of the child C element, up to set this file, you can see in my console is written character C. Because if I show you my index table file, as you can see, inside this D element, we have only one character. C, there is no space, no newline character. Similarly, if I return the last child here, someone to type to pick this line and comment on previous one, and here I want to pass last child. Last child, as you can see, again is ton character C. I hope now these concepts are clear for you. Thanks for watching this video. Stay tuned for our next Tutorial. 15. JavaScript nextSibling & previousSibling Method Tutorial: Good to see you guys. Again, I'm back with a new tutorial real t Dom traversal methods. In this tutorial, we are going to learn next sibling and previous sibling. In our previous tutorials, we learn about parent node, child node, children, first child element, et cetera. In this tutorial, we are going to cover next 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. Here, A is the parent element and B, C, D, E F 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 E, E is the next sibling of B element. If we ask you, who is the previous signing of D and the answer is C. That's the basic difference between these two element, next and previous. If I want to find the previous signaling of B element, as you can see, there is no previous sibling of B element, but there is the next signaling of B element, which is C. Without wasting your time, let's start the practical and try to clear the concepts. As you can see, side by side, I open my Visual Studio code editor and my browser using if server extension and I already created an HTML document named index dot HTML. As you can see in my browser, we have outer DV, inner DV, and some child elements. You're already familiar with this structure. Let's jump into the Mindjsfle. At first, we are going to start with next element sibling. As you can see in my main Dot Jsfile, we already target this element, this C element using its ID, child C. If I show you my index STL file, you can see the ID name, child C. Here I'm going to tie next element sibling. Next element sibling. I'm going to set this file. After set this file, as you can see, it sit on our next element, which is D. Similarly, if I return previous sibling, somebody topic this line and comment out previous one and her to type previous element sibling. Previous element sibling. After step this file, you can see it written element, this one. Using those function, we can target previous element, otherwise mixed element. After target this element, also we can apply style. Let me show you. Here I'm going to type style, dot background. Equal to inside the double course rate. After I set this file, you can see the result. As you can see, it add red background color to the previous element. Also, if you want to return the TML of this element, yes, you can. Just into type dot inner stML. If I set this file, you can see my console, it's written on the character B. Now I want to return the next element sibling of E element. For that, I'm back to the index dot tML file, and I'm going to set an ID to this element. ID equal to child E. I'm going to set this file here, I'm going to type child E and I want to return the next sibling of this element. Here I'm going to type max element sibling. If I set this file, as you can see in my console is written null because after E element, there is no sibling element. That's why it's written null. If you want to apply any style, then it's going to turn 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 notes, otherwise, comments, et cetera. You're already familiar with that. Now I'm going to use next sibling method and previous sibling method. Again, I'm going to duplicate this line and comment out previous one, and I'm going to type previous sibling. Vias sing. 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 Newlin character. If you remove the Nuland 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 visual studio code editor automatically prettify my code and add a new line to end up this Nestable element. If I set this file, as you can see, it add a new line. That's why again it return text mode. Somehow, if you can remove the Newland character from this line, in that case, it's going to return the element. At the same way, next sibling method work. If I type next sibling head, next sibling and then set this file, as you can see, again, it return tplode. Because this function can count character spaces or means as a JavaScript node. That's why you see done pick. 16. JavaScript createElement & createTextNode Tutorial: Hello, guys. Good to see you back. Again, I'm back with a new tutorial related Javascript Dom. In this tutorial, we are going to learn Dom create Mthuns. Basically in JavaScript, we have to re create method, create element, create text node, create comment. Let's try to understand these methods. Suppose you want to add a 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 ame is create element. And 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 Tan. And if you want to add a comment in your estimate page using the helpop 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 Visual Studio code editor and my browser using Live server extension, and I already create an estimate document named index dot t. Inside this estimate document, we have a heading tag, Dong create methods, and also we link with the JavaScript file, dogret dot js. And in this JavaScript file, I'm going to use all the create methods. At first, we are going to create an element in our document. So here, I'm going to create a variable. Where, and our variable name is new element. Equal to document, document dot, and our method name, which is create element, create element. Create element inside the round presses inside the Duval codes, and inside the doule codes, we need to pass the tag name, which is pagrapP and semigrom two in this slide. Then I want to print this variable in my console. So here, I'm going to type Console, dot, log. I say the round presses or variable, new element, new element. Then semicon two in this line. I press this file, if I show you my console, as you can see, is print our tag name, P. Similarly, if you want to create different tag, suppose you want to create two tag. For that, you need to type at the double code and you need to set this file. As you can see, it creates heading to tag. You can create any HTML element using this method, create element. Now I'm going to show you how can we create takes Node? For that, I'm going to take another variable that and the variable name is newt newtext equal to here I'm going to call our new method, which is create takes Node, document dot create takes Node. Then inside the round verses and inside the quotation, we need to pass the text and here to pass Hello world. And semicon two in this line and I'm going to set this file. Before I set this file, also, I'm going to print this variable in my console. I up 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 of word, thousands of character as much you want. Now I'm going to show you how we can add and comment to an estimate document using the help of JavaScript. Again, I'm going to create another variable that and our variable name is new comment New comment. Equal to document dot, create comment, create comment. Inside the doll codes. Just only to type the comment. We don't need to use any greater than sign otherwise exclamation sign. For now, I'm going to type this is comment. And then I'm going to print this variable in my console. So I'm going to this line and here I'm going to pass new comment, New comment. Up step this file, as you can see in my console, it's sprint, this is comment. Here you can see the TML comment, less than sign exclamation sign, dash dash, this is comment, and greater than sign. As you can see using JavaScript, we can create TML element, text node, comment, et cetera. In the next tutorial, we are going to insert this text node inside this element. This is it for this tutorial. Thanks for watching this video Sytune. 17. JavaScript appendChild & insertBefore Tutorial: Hello, guys, good to see you back. Again, I'm back with a new tutorial related JavaScript doom in this tutorial, we are going to learn JavaScript doom Append methods. Basically in JavaScript, we have total two append methods, Appenhild and insert before. Let's see what can we do with that? In our previous tutorials, we learn how we can add a STML element in a StimLPage using JavaScript. For that, we use Pit element method, and also we learn how we can add text in a StimulPage using JavaScript with the help of quit TexN. Now the quot is how we can join this text with this element. I want to move this text inside this paragraph, how we can attach it with an element. That, JavaScript introduce a special method, which is a paint child. Using this method, we can add text with an element. Not only that, using this method, 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 my Visual Studio code editor and my browser using if server extension, and I already create an estable document named index dot HTML Also I link a JavaScript file named men dot js. Here you can see, we create a deep element and I also style this deep element. We set hide with 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 node, hello world. And if I show you my console, as you can see, we have heading to tag and the text node, hello world. And now we need to attach this text with this element. So we need to append this text note in this element. For that, we need to use Append hil method. Here I'm going to type the variable m which is new element, New element, and in this new element, I want to append the text node. So to type dot Append child. Append child. Inside the round dresses, we need to pass the variable limb which I want to appaent and I want to appaent new ties. I copy the variable limb and I'm going to paste it here and sim to slide. If I set this file and show you my console, as you can see, it append text note in our new element section, which is heading two. I successfully append the taste inside the heading two. Now I want to show the heading two inside this DB element. For that, again, I'm going to use AppenJL method. Inside this dang deep I'm going to append the element. If I show you my index estimate file, as you can see, there's a D with ID named taste. I'm going to copy this ID name. Let's back to the Mindjs file and I'm type after AppenchL method with new element, I'm going to type document Dot, get element by ID is at the roundres we need to pass the ID name, which is paste. Then I'm going to use the method, apinhild append child. Then inside the round process, here I want to append the new element. I copy the variable name new element, and I'm going to paste inside the round pass semigra 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 DF we have an element H two and its print hello world. But if I show you my index dot H file, as you can see, there is no element name H two. Also, there is no text, hello world. So 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 event. So this is how we can create text node, otherwise element and we can attach it with existing element. Remember, this apenchil method always add the element, otherwise, text node, end of the paren node. Let me show you. So here, I'm going to add some paragraph. So to use PtagParagraph, and I want to type some text, Lorem 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 adds the to element. Remember, apenchil 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 wet this line and comment out previous one here I'm going to tie insert insert foe. Then inside the roundress we need to pass total two parameter. First in our first parameter, we need to pass the element name. Which element I want to append in our DP and I want to append this element, new element. I copy the element name and I'm going to paste it here. 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. I'm to type, document, dot get element by ID, inside the round presses taste. I'm going to assign this target in a variable. I type where and our variable name is target. Target equal to this location. Now I'm going to replace this sector with this variable, target. I'm going to type target dot insert before, inside the round press new element. Now in our second parameter, I'm going to type target dot childs. And I'm going to specify the position. Inside the square basis, 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 dip it move the new element before the paragram. If I show you my element section, as you can see, first it print new element, then our paragraph. This is how we can use insert before method. I hope now it's clear for you how we can use apengile method and insert before method. Thanks for watching this video, stay tuned for our next tutorial. 18. JavaScript insertAdjacentElement & insertAdjacentHTML Tutorial: Hello, guys, good to see you back. Again, I'm back with a new tutorial related JavaScript dom. In this tutorial, we are going to learn Java script insert adjacent methods. In our previous tutorial, we learn two JavaScript append methods, Append hild and insert before. It is used to append existing element and takes note to a parent element. Appenchild always plays the element at the last position to use insert before, we need to specify a position and this method, append the element before this specified position. We already learn about it in our previous tutorial. After that, we have insert adjustment element, insert adjustin SML, and insert adjustin text. These three method also used to append the element, but there is a difference between this three method and these two method. Our previous two method is only used for append purpose. It can append the existing element, otherwise, text element in the paren element. It cannot create the element. It is used to only append the element, but our last three methods 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 notte method. Before start the practical, let's try to understand what is the difference between all of these three method. Suppose you want to create a estimate tag with the same time you want to append it. I want to create this paragraph tag and the same time I want to append it. For that, we need to use this method. Insert adjust and element. If I use this method, at the same time it creates the element, also it append the element. But if you want to create tag and take node at the same time, in that case, you need to use this method, Insert adjustin table. Here you can see we create a paragraph, also insert the tax node inside this paragraph. Using this method, we can create tax node, we can create element. Also we can append the element. We can do three tasks at once, if you want to create a simple text node, for that you can use insert adjacent text method. This method can create the text, also it can obtain the text. You're already familiar with that, what can I do with these 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 take nodes. And the positions are before begin, up begin, before end and upara. We have total four different positions, so let's try to understand the positions more clearly. Suppose we have a deep container and inside this deep container, we have a taste. And now we need to create this take 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 and if I use up begin position, in that case, then it's going to append the element at the first position inside the container. And if I use uptur end position, then it's going to append the element up end of this container. And if you use before end position, in that case, it's going to append this element in that position. Inside this dictiner 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. So as you can see, side by side, I open my Visual Studio code editor and my browser using live server extension, and I already create an TML document named index dot HTML. With that, I create a JavaScript file MindotJs I also link this file with this table page, MindotJs. 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. Inside this deep element, we have a paragraph. We are going to start our practical with insert adjust and element. Let's jump into the main Do js file. For that, I'm going to create an element. Here I'm going to type where and our variable name is New element. Equal to here, I'm going to create a heading element. Here I'm going to type, document, dot, create element, create element. And inside the rounders, I want to create a heading two element, have a praise H two. Then semicolon two N this line. Now I'm going to create a take node because we need to insert the text node inside this heading element. Hemo type, and our variable name is new text, new text, equal to document, dot, create text node. Create text node. Inside the round press, I'm going to pass a random text. I'm going to type hello word. And semicolon two in this line. We create a element and it takes mode, and now we need to append this text node inside this element. But before, I'm going to explain what is insert adjacent element. Now when to create a target. First, I'm going to create a target. I want to target this DV element. If I show you my index EL file, as you can see, in this DP we set an ID, ID taste. I copy the ID name taste and back to the main dot Js file here I'm going to type word our variable name is target. Equal to document dot get element by ID, inside the round press is our ID name, paste and Semgron two in this line. We create the target element. Where I want to append this H two element. Now I'm going to use insert adjacent element. So to type target dot, insert, adjacenelement. Inside the rounds, inside the dole codes, here we need to pass two parameter. First, we need to pass the position. Where 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 going to type new element. I copy the variable new element, and I'm going to paste it here. And subcu 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 elements section, here you can see inside this body, before this D element, we have H two element. And if I show you my index node STL file, as you can see, before the D 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. Semi go to end this line? If I set this file, now you can see the result. Now you can see in my browser, it appended the new element before this DV element. Now you can see our element is outside of this element. But if I change the position, so I'm going to duplicate this line and comment out previous one and root up to begin. Up third 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 TML. For this method, we need to create TML element and text note. I'm going to comment out both of this line. Also, I don't need a pen gil method, so I'm going to comment out it again. We need the target element and our method. Now I'm going to call the method name. Here I'm going to type target the insert adjacent HTML. I'm going to replace element with HTML. 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 tie H two. As I'm going to close this tag, H two. And here I'm going to type hello world. I'm going to set this file. After 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. We successfully insert this element at this position. This is the usage of insert adjacent stable method. At first, we target the DV element and stored it in this variable named target. Then we apply this method to this DP 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. I set this file, you can see the result. Now it at the element up end of this deep. One by one, you can check out the positions. So if we use this method, we can scape this three line. This is the benefit of using this method. Insert adjacent TML. We don't need to create the element, we don't need to create the te 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 takes node and append it, nothing else. So I'm going to duplicate this line and comment out previous one. Here I'm going to type insert adjacent fixed. 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 the 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 Dave, it add the text, hello world. This is the usage of all of these three insert method. I ho 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 this tutorial. Stay tuned for our next tutorial. Thanks for watching this video. 19. JavaScript replaceChild & removeChild Tutorial: Hello, guys, good to see you back. Again, I'm back with a new tutorial related doom in this tutorial, you are going to learn two JavaScript methods. Replace child and remove child. If you want to replace and remove TML tag using JavaScript for that, you need to use those methods. Repress 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 results studio code editor and my browser using if server extension. I already create an ETML document named index dot TML. Inside this document, as you can see, in our body tag, we have UL tag. Means under list, and we have to tell four list item. These are all fruit names, orange, apple, grapes and banana. At first, I want to replace our first list item with another fruit name. As you can see in our first list item, we have orange. Let's back to the Mind js file. At first, I'm going to create a new AI tag. I'm going to create the new element. So type there and our variable name is new element. New element. Then equal to document dot, create element. Inside the roundreO element name, which is list item, now we need to create the text. I want to say takes node. Here I want to type where our variable name is new text. New text, equal to document, dot, create text node, create te node, inside the rounds inside the Dule code for now, I'm going to type a fruit name and the new futome is mango. Now we need to append this take note in this element. As you know, for that, we need to use Appenhild method. Hemotyp Nu Element dot append child. Is the rounders is the variable name, which is new ts. And subgraan two in this line. Now we need to target the parent node from where we want to remove the list item. As you can see, we have an ID in our list. Copy the ID name list and back to the MindoJFle. Now I'm going to create the target variable where and our variable name is target. Equal to document dot get element by ID. Inside the round presses the variable list, and mg to this line. We target the parent node and store it in this variable named target. Now I'm going to target this child element. I'm going to create another v that and our variable name is old element. Old element. Equal to target dot, children method. Then inside the square processes, we need to pass the index number, which is Z semicon to this line. I'm going to set this file. If I print this variable in my console, let's print the variable in our console. Hemotype Console, dot, log. Is the roundress are variable Old element. Hold element, and s in this line. After set this file, if I show you my CSO section, here you can see it's written the list item. Inside 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 replace Child Method, replace child. Then inside the round press, we need to pass to the two parameter. Inside this round reress in our first parameter, we need to pass from which element I want to replace with. I want to replace with new element. Here I'm going to 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'm going to pass old element and semiconn to this line. After set this file, as you can see in my browser, it replaces orange with mango. If we change the index number here, I'm going to pass to and set this file. Now you can see, it's going to replace grabs with mango. I hope that's clear for you how replace child 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 another function which is remove child. Now I want to remove the first element from this list. At first, I'm going to comment out all of this line. Then her need to pass the index number, which I want to remove. So I'm going to pass index zero. And now I'm going to use the method name remove child. So I'm going to duplicate this line and comment out previous one and Hemo type target dot remove child. Remove child. Then inside the laundress, her need to pass only one parameter. And our parameter name is old Element, some type old element. Now I'm going to set this file. I preset this file, as you can see, it's removed orange from this list. Now we have to tell 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. 20. JavaScript cloneNode Tutorial: Welcome back, guys. Again, I'm back with a new tutorial related JavaScript dome in this tutorial, we are going to learn JavaScript clone none. Using this method, we can clone any nodes. In your left side, you can see order list, mango, banana, grapes, and apple. And in our right side, we have vegetable list, carrot and radish. Suppose I want to copy grabs from the fruit list and I want to paste it in the vegetable list. For that, we need to clone the LI tag of these graphs, and we need to use the method name Cronen. 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 Live Server extension, and I already created an ML document named index dot HTML. With that, we link with mando js file, main doot gs. For now, it's an empty file. Also, you can see in my body tag, we have total two unordered list. Also, we assign ID to this list, List and list two. And now I want to copy the first LI tag from this list, and I want to paste it inside the List two. For that, we need to use a method named crown. So let's jump into the Mindojs file. First, I'm going to take a variable that and our variable name is target. At first, we need to target the element, which element I want to clone. I want to clone, last one, equal to document do get element by ID inside the rounddresses, inside the dowel codes, we need to pass the ID, which is list. As you know, here we need to use Children method, some t children. Children inside the square presses, we need to pass the index number. At first, I want to copy orange, so here I'm going to pass zero, so we're going to end this line. And now we need to copy this element using ro node method. So here, I'm going to create another variable there, and our variable name is copy element. Copy element. Equal to target clone node method. Con node. For now, I don't want to pass any parameter, but you can pass two parameters through other falls. Now, let's print this variable in our console. Hemo type console dot log, the round press or variable copy copy element. So we're going to end this slide. After I set this file, if I show you my console section, here you can see it copy only the element name AI. It did not copy the text which is inside the AI tag. Because as I told you, clot come with two values. By default, 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 XYZ, and I'm going to set this file. Now you can see in my console, it copy the tag name with class attribute XYZ, 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, there you need to pass true value. Somehow to pick this line and comment out previous one. I'm going to pass true val. Through, and I'm going to save this file. Now you can see the Cazole. It's copy the tag name, also the attribute, and the value orange. I successfully copy the element. Now we need to append this element in our second list and to append this element, we need to use Appenchal method. Here I'm going to type DapumenG element by ID, and the ID name is is two. Last two. Successfully target our second list. Here, we need to use a method name, which is append hild append child. An append child, I want to append this copy element. I copy the variable name, copy element. And inside the tower cost, I'm going to paste the value, copy element, and Semgro two in this line. After I set this file, as you can see in my browser, it appended the fruit name in our new list, orange. Basically, we crone 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 crone node method. So this is it for this tutorial. In the next tutorial, we are going to learn about contains method. So thanks for watching this video, stating. 21. JavaScript Contains Method Tutorial enhanced: Hello, guys. Good to see you there. Again, I'm back with a new tutorial related Javascript dome in this tutorial, we are going to learn JavaScript contain method. Here you can see a deep and we set an ID to this deep, which is outer inside this outer deep, we have to three child deeps and I want to search an ID which is inside this outer container. Suppose I want to search in an 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 return only two type of wave through either forms. As you can see, this dV is child of outer deep, it's going to return true. 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 deep, but here we target the outer deep and we search if there is an IDNM inner 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 forms. Simply, I want to say, if the ID is exist inside this outer dip, it's always written 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 Visual Studio code editor and my browser using Lifesaver extension, and I already created an TML document named index dot HTML. With that, also link a JavaScript file with this document. Our JavaScript file name is main dot Jsfle. For now, it's an empty. If I back to my index TML file, and as you can see in our body tag, we have a container with ID named taste. And inside this container, we have a paragraph tag and another deep element. And in this deep element, we have another child paragraph. And in this paragraph, we set an ID named ABC. Now, this paragraph become grandchild element of this ID named taste. So first, we need to target the parent element. Let's get to the main dogs file, and here, I'm going to create a variable where and our variable name is parent element. Parent element. Equal to document, dot, get element by ID. Is the round dresses, the double codes, and the ID is taste. Then Semgraun two in this line. Now I'm going to target the element, which ID is ABC. Here I'm going to create another variable there and our variable is target. Target equal to document dot get element by ID inside the round presses inside the double codes, the ID name ABC. The Semgoru two in this line. Now I'm going to search this ABC ID in the test container. If the ID is easiest, then it's going to return true. Otherwise, it's going to return false. So let's find the AVC ID in the test element. For that, again, I'm going to create another variable and our variable is find. Equal to parent element dot our method here I'm going to use contains method. Contains inside the round presses, and now we need to pass which element I want to find. Here I'm going to find the ABC element. We need to pass the variable name target. I want to search the target element. The we're going to end this line. Now, let's bring the variable in our console. Here I'm going to type, Console. Dot log inside the round versus the variable name, fine and semicurn to this line and semicon to this line. I'm going to set this file. If I show you my console, as you can see, it's written true because our target ID is available inside the parent element. But if I change the ID name, so here I'm going to replace AVC with XYZ. Then set this file, now you can see it's written for because this ID is not exist in our document. This is a usage of contents function. I hope now it's clear for you. Thanks for watching this video, stay tuned for our next tutorial. 22. JavaScript hasAttribute & hasChildNodes Tutorial enhanced 90p: Hello, guys. Good to see you. Once again, I'm back with a new tutorial related JavaScript Dom. And in this tutorial, you are going to learn has attribute and has child attribute. We are going to learn these two methods in this tutorial. Here you can see, we have a DV with ID named taste. With that, we have a class named ABC, and it contained a text, hello world. And 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, and this method going to return on a true result True, either fals. This method always return Volan value. If the attribute is available in this element, in that case, it's going to return true. Either it's going to return false. 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 Visual Studio code editor and my browser using b server extension, and I already create an estimate document named index dot html. With that, we create main Dot js file. Also I attach MindoJsfle with this estimate document. As you can see in my body tag, we have a DV element in this DV element, we have an ID named taste. Inside this deep element, we have two child element, H two tag and a paragraph tag. At first, in my JavaScript file, I'm going to target this DV element. I want to copy this ID name phase. Then back to my main Js file and here I'm going to tie. The, 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 brasses and inside the double course, I'm going to pass a value. We need to pass the ID name, which is past. The cyc to this line. Next, I'm going to find the class attribute in this target element. Here, I'm going to create another variable there, there and our variable name is fine. Equal to or Vim target now I'm going to use the method has attribute has attribute. Then inside the round presses, inside the double code, we need to pass the attribute name and our attribute name is class. Inside the double codes, I'm going to type class and semicaloN this line. We already know that there is no class available in this element. Let's print this value in the console. I'm going to type console. Dot log inside the round presses are variable m, find. Then semigun two in this line. After step this file, if I show you my console, and you can see it's written forms because there is no class attribute in this element, only we have only one attribute ID. Now I'm going to pass the attribute tame in this element. Hemotype class inside the double codes, and our class name is XYZ. And I'm going to set this file. Now you can see my Console, it's written True. I hope now it's clear for you, how can we use hash attribute? Now, let's talk about our next method, which is has child nodes. As you can see, there is a deep and I want to check there isn't child element in this deep or not. Suppose I pass a simple text in this deep. In that case has child node methods return to through other forms. If any type of child available in this Dev in that case, is going to return true. Let's jump into the visual studio code 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 has child node methods. So do to this line and comment out previous one and I'm to type target dot, has child nodes. Here we need to use the round braces. Inside the round dresses, we don't need to pass any parameter. If I set this file, now you can see it's written true because we have child elements in this deep. I hope now it's clear for you how we can use the methods, hash attribute and has child nows. Thanks for watching this video, Stay tuned for our next tutorial. 23. JavaScript isEqualNode Tutorial : Hello guys, good to see you back. Again, I'm back with a new tutorial related JavaScript Dom. And in this tutorial, we are going to learn a new method, which is JavaScript equal u. Here you can see a list, List A, and we have some foot ename 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 footname in List A and List B, banana. And now I want to compare List A first node with sV first node, banana and banana. Want to compare both the list items. For that, we have a method named equal loads, and it's written only two value, true, either fals. It's always Bollan 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 list items are under list item. That's why it's going to return true. So it's matched 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 mode name. I want to say if first one is list item, it also would be a list item. Otherwise, it's going to return false. And 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 mode V. 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 crew. 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 I assign with a class, also List B item assigned with a class. Also their attribute value should be the same. If we use class XYZ, also, we need to use the same class XYZ. 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 Visual Studio code editor and my browser using Live server extension, and I already create an TML document named index dot html. Also with that we attach a Javascript file main dot js. As you can see in my body tag, we have total two oddn east. In our first last, we assign a ID, List one. In our second last, we assign List two. At first, I'm going to compare List one first node with ListVF mode, and then I'm going to compare list one first node with second node of the List B. So at first, I'm going to target this mode. For that, we need to use this ID. So let's back to the Mind js file. And here I'm going to create a variable and our variable name is target one. Target one, target one equal to Dumain dot gate Elman by ID. Instead the round presses, we have to pass the ID name. In our first order list, we have ID list one. So I copy the ID name and I'm going to paste it here. And now we need to select this node, first node, orange. For that, we need to use a method, which is first child, first 11 child. So we're going to end this line. Now I want to compare orange with GaA. I'm going to duplicate this line and I'm going to change the variable name, target two. Here also, I'm going to change the ID name list two. So I'm going to compare last one first element with least two first element. Now I'm going to compare both the loads with E equal method. For that, I'm going to create other variable equal. Equal to target one dot our methodnym is equal, is equal. Instead the round presses, we need to pass the second variable and our second variable name is target two, target two. The semiconum two in this slide. Now I'm going to print equal variable in our console. I'm going to type console, dot log inside the round presses are variable m equal and emgro to end this line. As you can see in my console, it's written falls. If you notice, you can see it match all the criteria, but it do not match with node value. Our first value is orange and our second value is Guava. That's why this method written forms. 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 passes, we need to pass the index number, as you can see, the index number is one because our index start with zero. I I set this file, now you can see my console, it's written true. And now I'm going to add attribute this to one item. Let's get to the index or estimate file, and here I'm going to add a class. Class for now, I'm going to leave it back. After I set this file, you can see my console, it return forms. But if you notice you can see their value is same, their word is same, but their attribute is different. Here we use attribute name class. But if I pass the same attribute name in list two, let me show you her type class, empty class and set this file, now you can see it's written true. But if I use different class name, then what? Here I'm going to use X, Y, and Z, second class, I'm going to use ABC. If I set this file, now you can see, again, it return forms because their class name is different. But if I use the same class name ABC and ABC and this of this soil, you can see it writ and true. This is the usage of is equal t function. Thanks for watching this video. Stay tuned for our next studio. 24. JavaScript Form Events Tutorial : And 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 Java Script from vine. In our previous tutorials, we already learn about some basic events like click, double click, right click, mouseover, et cetera. But in this tutorial, we are going to learn some basic from events. These are all basic from events we are going to learn in these tutorials. First, we have some key press events like key down, key press, keyup, focus blur, and then we have some selects events. We already learn about key down, keypress and keyup events in our previous tutorials. We are going to start this tutorial with focus and blur event. So as you can see, side by side, I open my visual studio code editor and my browser using b server extension and I already create an TML document named index dot ATM. As you can see in my estimate page, we have a ETMLF 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. And then it shows some country name options like India, Pakistan, Nepal, USA, Japan. And you can see the estimus structure in my page. We have from tag, label, 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 click 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 inbuilt feature of browser, but we can customize it using on focus event. At first, I'm going to assign a ID to this first input field. Here I'm going to type ID equal to if name. FNM stands for first name. Then inside this script tag. With that, also, I'm going to add an event, which is on focus, similar type on focus. Then here we need to provide a function name and our function name is focus function. Then I'm going to create this function inside this script tag. So type function for function, and our function name is focus function, si copy this function name. Then we need to target this input field using its ID, which is Anime. Here type document dot, get element by ID inside the rounddresses, then inside the Cls. Inside the roundresses only to provide the ID name, which is If Name. Then I want to apply a background color whenever I focus this input field. 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 set the file and click on this input field. 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 want 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 quotien 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 I call our function inside the round dress, I'm going to pass this keyword, this. Also, I'm going to pass this keyword in our second input feed, this. Using this keyword, we can apply this particular function in this particular input feed whenever we focus on it, and to handle it, we need to take a variable in our function. Inside the round dresses, we are going to take a variable name and our variable n is element. Element, then I'm going to replace this section with this variable element. That's Now, let's sub 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 changed the background color of name input field, and if I want to apply the same event in our country section, yes we can. Just on to copy this function on focus event and we need to paste it after this ID in our select tank. If I set this file and click on this country option, now you can see this time it apply the background color in our drop down option. This is how it works. 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 cursor and click on other section, now you can see it still show background color red. Now we need to remove this focus color. So how we can do it? For this, we need to use blurve. For that, at the same way, we need to use this event up on focus function. Here I'm going to type the event name on blur. Also in at the double code, we need to pass a function name. I'm going to copy this function name Focus function, and I'm going to change focus function name with blur function, Darcy I'm going to do the same thing for the next input field. I'm going to copy this section and paste up on focus event. Also in our select option. Then I'm going to duplicate this function and I'm going to change the function name. Focus two blur. I'm going to remove the color name and leave it blank, and I'm going to set this file. Now first up, 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 works. Now you understand how focus and blurr events 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 in. This event apply when we try to fill the input field. Basically, we use this event with input field and text area. I do not work on CD box and radio buttons. Let's start the practical and see how we can use. So let's call the event in our first input section, and our event name is on input. Inside the double codes, we need to pass a function and our function name is input function. Then inside the rounders. 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 fill this input field, I want yellow background color, so I'm going to pass yellow. I'm going to set this file. Up to 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 addOne. As you can see, when we type some text in this field, it changed the background color red to yellow. 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. So thanks for watching this video. Stay tuned for our next 25. JavaScript Form Events Tutorial part 2: Hello, guys. Good to see you back. Once again, I'm back with another tutorial related Java Strep from events. In our previous tutorial, we cover focus blur and input event. In this tutorial, we are going to cover change, select, submit invalid even. Let's start the practical with change event. As you can see, side by side, I open my is studio code editor and my browser using if server extension and I open my previous HTML document name index dot HTML. As you can see, we have total two input field name and class. With that, we have a option box, name country, and here it provides some country. And we are going to start our practical with on change event. Let me show you how. Basically, you can use on change event in input text also select box. Also, you can use it in a text area. At first, I'm going to use the onchange event in our select box. After onblur function, I'm going to call this event on change. On change and our function name is change function. Change function. Now, also, we need to define this function in our script tag. I'm going to copy the function name, and I'm going to duplicate one of these functions section and replace this function with change function. That's it. As I'm going to change the background color, which is blue. And I'm going to set this file. Now you might have questioned 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 change function called, let me show you how. Now, as you can see, in our select box, we use onchange function. Also, I'm going to assign a ID to our select box, and our ID name is select. Then inside the script tag, we need to target this select box using its D. Here, I'm going to remove element and replace with document. The get element by ID is that the round presses to provide the ID name which is select, that's it. After I 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. After I click on USA, as you can see, the background color is changed. Now it's turned into blue color because this time it's going to call change function, and it is possible buy only for this event on change. So this is the usage of on change. When I lose the focus, otherwise, remove the focus, then it's triggered on change event. So this is the usage of on change. And remember, this on change method work on any input field. We can use it with input box, text studia, et cetera. Now, let's talk about another event which is select. This on select event works after select the input field value. Suppose in our name field, I'm going to type in name adver. Basically, it's going to trigger when I select this value. Let's call this event in our name input box. SubterO input, I'm going to type on select. Then I'm going to type a function name which is select function. Now we need to define this function inside this script tag. Inside the script tag, I'm going to duplicate 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 nav is if name. FNM stands for first name. Here I'm going to replace select to it if named. Then I'm going to change the background color. I'm going to say background color. Pink. Up to step this file. Now, I'm going to fill a name in our name field, which is Raul. But if I select this ten name using my cursor, now you can see now you can see our input background color change into pink colored because this time it's triggered on select function. So this is our wetting use on select function. Now let's talk about next from Evet which is submit. Basically, we use this event from tag. We can trigger this event up third, fill up the from and press submit button. So let's go to the visual studio code and see how it work. So as you can see in my browser, we have a basic from, but we don't have any submit button. So let's create a submit button. Then inside the from tag, and below this left tag, I'm going to take a input tag input. Input, type submit. And I'm going to set this file. After set this file, you can see, now we have a submit button, and now I want to trigger on submit event, a click on submit button. And as I told you, we need to call this event inside the front tag. As you can see, this is the Frontag starting position. Then inside the front tag, I'm going to call this event on submit. And inside the double codes, I'm going to pass the submit tag name. And inside the double codes, we need to pass the function name, and our function name is submit function. Now we need to define this function inside the script tag, so I'm going to copy the function name. At first, I'm going to duplicate this section. Then I'm going to replace the function name. Select function with submit from function. Next, I'm going to remove all of the unnecessary starts. Here I'm going to type console dot, g, inside the round presses inside the double code, you submitted a from. And Semgram 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, Console. And if I press the submit button, you can see it's not work pretty well because in our action tag, we need to pass a PHP Path, otherwise.net Path, but I don't have it. So I'm going to print the message in my alert bombs. I'm going to replace console dot log with Alert bobs. Alert. And I'm going to set this file. After I set this file, if I click on Submit button, now you can see in my alert box, it return, you submitted a from. So this is on submit method over. Now you might have question, what is the usage of it? We can extract value from these input fields. Suppose I want to extract name from these input fields when I submit the f. For that, first, I'm going to comment out this line because I'm looking at vari there and our variable name is X, X equal to document. Dot get element by ID. Is at the roundreses. Is the double codes. We need to pass the ID name, which is a name. Then I want to extract the varu from this input field. So type dot Val. So we're going on to end this line. And now I'm going to print the name in our Alert box. So type Alert. In the roundre the down codes first type hello. Hello, then we need to use concatenation sun and I want to concatenate with our variable. Semiground in this line. If I set this file, He 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 ad one. This is how we can extract data using on submit method. We can store 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, any select tag, and we can trigger this event only using submit button. After press this submit button, it's 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 in our frog, 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 a 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 frog and hit submit button, now you can see it's w. It do not show any error messages, but I want this name input field always being fed. For that, we need to use attribute, a stable attribute which is called required. Here, inside this input tag, Imo type required. Then I want to set this file. Now it's necessary to fill up this name. 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. This fill in this field. 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 to saw this and to show the custom message we can use on invalid event. Just to type the event name on invalid. Then inside the double course, Harry directly type any Java Sweep code. I want to print a alert bombs. Alert, inside the round dresses, inside this single course because we already use double course. That's why we need to use single codes. I want to type a custom message and the message is please fail the name field. 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 Davitt 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. So after press Submin button, now you can see my alert box with print, please fill the name. Basically, we use it with email and phone numbers. Let me show you how. So at first, I'm going to change the label ape, name to email. And also, I'm going to change the input type, which is email. 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 entered Correct. Email. And I'm going to set this file. So if I type in wrong email address and try to submit this form, now you can see it return this message. Enter correct email, and also it retain a default message from is Tamil. Please route and iterate in this email address. So these are all very important from events that we learn in this tutorial. So this is it for this tutorial. Thanks for watching this video Schedule for the next tutorial. 26. JavaScript setInterval & clearInterval Tutorial: Hello, guys, good to see you back. Once again, I'm back with another tutorial related Java script. And in this tutorial, we are going to learn Java script, set interval, and peer 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, you release the two parameter, a function name and time, and you need to put time in second. This second parameter work as a timer. 1,000 millisecond equal to 1 second. Now let's talk about the function, how this function going to work with this second parameter. If I pass 1 second, I want to say if I pass 1,000 millisecond, then after 1 second, every time it going to call this function and whatever we perform in this function, it going to run it. Basically, I want to say on again, every time it going to call this function. If you want to call it up three second, then you need to pass three second. If you want to stop this animation in a particular time, in that case, we have another method, which is peer 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 opened my Visual Studio code editor and my brother using Lifesaver Extension, and I already created an table document named index Zoot table with that I create another file, a JavaScript file, which is animation dot JS. For now, our animation file is blank. Now if I back to the index file, here you can see, here we create a deep element. Basically, her create a square box, height, 150 pixel and width, also 150 pixel, and I set a background color range, and now I want to animate this square box. I want to move the square box right side up to every once again and to animate this square element, we need to jump into this Js file animation dot js. Set first, I'm going to call our math, which is set interval. Set interval is the round press is first way to pass our function name, and I'm going to set this function name Annie. With that, I want to set it t 1,000 millisecond, which is equal to 1 second. Also, you need to provide the semicolon, and then we need to define this anime function. Let's create the function. First, I'm going to type function Keyword and our function name is Nin. For now, I'm going to show you how set interval method work. I'm going to print something in my console. So type console dot log inside the round presses. I will type hello. Before I set this file and run this code, I'm going to turn on my consoe Inspect Console section. If I set this file, as you can see in my console section, it print hello, one, two, three, is continuously counting and print hello in my conson. This is how set individual function over. For now, I don't need this console dot log. I want to comment out this and set this file again. Now I'm going to declare a variable outside the function and our variable is that a A assign with Z, Semicron two in this slide. Then insert this function, I'm going to increment A variable with ten. Sound type A equal to A plus ten. Basically set interval continuously called Nim function after 1 second. And every time it call the function, it's going to increment the A value with ten. So first time it's going to print ten, then it's going to print 20, 30, 40, and it keep going on. And now we need to target this square element using its ID. Sumo type where target equal to Dum Document, get eleind by ID. Then inside the round resis, let's back to the index file and see the ID name, and the ID name is taste. Copy the ID name and back to the JS file. And inside the double codes, I'm going to pass the ID name, Ts and semig to tin this line. And now we need to move this element using CSS. 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, lap equal to our variable A and semigal in this line. Every second, it's going to increase the margin by ten. Basically, it's going to move our squared 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 the margin lip property. I'm going to use concatenation sine and inst the single ate, 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, upter 1 second. So 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. And if you want to increase the animation speed, then you need to decrease the misecond value. Suppose if you pass 200 millisecond and uncommen this line and set this file again, now you can see the animation speed. It increases our animation speed. So I'm going 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. When our box achieve margin lip 200 pixel. Basically, I want to say, when 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 p condition, if A value equal to equal to 200, then inside the condition, I'm going to do something. I use square sis. Also, I'm going to create sparse. Inside the square resis, inside the sp, I'm going to animate this section. I copy this one and I'm going to wove it inside the else condition, and I also uncomment this line. Then inside the IP condition, now we need to stop this animation using peer interval. But for that, we need to convert set interval into peer interval. So I'm going to store this set interval in a variable. So hero type where and our variable name is, you can take any name. For now, I'm going to take ID. And now we need to call clear intergral method. We are interval and at the round res or to pass this value set interval. I'm going to pass I. And so we're going to this line. Before I set this file, I'm going to increase the animation speed. I'm going to pass 100 megain I want to set 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. Up reach, 200 pixel margin at left side, our car interval, stop this set interval. Here you can animate any CSS 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. So let's animate the w. So I'm going to configure this section and comment out previous line. And I'm going to change target style, He to add W. I want to change the width property. With and I want to increase it up to 200 pixel. After reaching 200 pixel width, it's going to stop the anivation. 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, stay tuned for the next tutorial. 27. JavaScript setTimeout & clearTimeout Tutorial: Hello. It's good to see you back. Once again, I'm back with another tutorial related Java script. And in this tutorial, we are going to learn about two method, set time out and tear time out. Using this function, we can specify the time of animation. And this method going to take total two parameter, function name and millisecond. This second value again work as a timer, and you need to provide as value, 1,000 milliseconds stands 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. I mean, 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. And if you want to stop this animation before it start, then you need to use this method, a timeout. So let's start the practical and see how you can use this meth. So as you can see, side by side, I open my result studio code editor and my browser using life server extension, and I already created TML document name index dot TML. With that, here you can see, we create a file name animation dot JS. In our basic TML layout, we create a box with ID taste. As you can see, here we say 150 pixel high and 150 pixel weed. And now I want to extend the width up to certain time. For that, we are going to use set timeout method. I want to extend the width up to 500 pixel. So let's jump into the animation dot js file. At first, I'm going to degla variable, we ID. ID equal to set time out. And as you know, this method going to take total two parameter, first function. And for function, I'm going to take N and I'm going to pass three second, it means 3,000 millisecond. Now I'm going to define this function. So to type function or function name is an. Then inside the calibss at first, I'm going to print something in my console. I'm going to type, console, dot, log inside the round resis. Inside the double codes, I'm going to type hello world. And semig this line. Now, before I set this file and run this code, let's open our console. Inspect, Console. As you can see, we are in my console section. So if I set this file, as you can see, up to three second, it's going to print hello word. And as you can see, it prints this statement only for one time. I do not repeat itself. And now I want to extend the debi up to three second. So 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, where, and our variable name is target. Target equal to document dot, Gt Element by ID inside the round presses and inside the dopo codes, I'm going to pass the value, which is taste. Then semicon to in this line. Then I want to increase the width using style dot with Mathod S type target, dot, style dot weight equal to I want to increase it up to 500 pixel, 500 pixel and Semgrat in this line. Now, if I set this file, as you can see, up 3 seconds later, it's going to increase the of this DB element. Basically, if we use the set timeout method, it's going to run our animation only for one time. Now I want to stop this animation before it start. I want to stop it before three second. For that, we need to use Dear timeout method. For that, we need to go back to the TML document, and here we need to take a button. So 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 a attribute name on Greek method on P. And in this event, I'm going to call a function, which is stop animation. I'm going to use this shortend is animation. And I'm going to copy the function name. And now I'm going to define this function in JavaScript page. Here I'm going to type function, and our function M is animation. Then inside the Clrass when I call this function, it's going to clear the timeout to this ID. So I'm going to call this function PR timeout inside the round res is, we have to pass the I. And semicorn two in this line. It's mean whatever time we set, it's going to clear the time. For now, I'm going to increase the time. I'm going to make it 5,000 ways again. And now I'm going to set this file. After I step 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. So I'm going to click this animation button. I'm waiting for five second and adecuac after 5 seconds, it not run our animation. Before the five second, I stop this button. This is how we can use both the method together, set timeout and clear time out. Thanks for watching this video. Statue for the next tutorial. 28. JavaScript BOM Introduction Tutorial : Hello, friends. Good to see you back. Once again, I'm back with another tutorial. And in this tutorial, I'm going to introduce you what is JavaScript bomb. The full meaning of boom is browser object model. Here I'm talking about the browser window. Boom 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 and I did not mention their name here. These are the most popular browsers. Boom is especially related to browser window, not the viewport area. I don't care what goes inside and if you want to control inner part of your browser, then you should learn Dom. In JavaScript, 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 heightened 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 win. Here we are not going to use our cursor to resize our browser. We have some in build method of Window objects, and using those method, we can resize and place our window anywhere in our screen. Also, we can scroll our browser window without using our cursel. 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. So in our upcoming Tutorias we are going to learn all about it one by one. So don't miss the interesting videos. Thanks for watching this video. Stay tuned. 29. JavaScript Window Height & Width Method Tutorial : Hello, friends. Good to see you back. Once again, I'm back with another tutorial related JavaScript bong. And in this tutorial, we are going to learn how we can get into height and windowed. Here you can see browser window, and to get Winto height and wet, we have total four methods. These methods are inner height, inner width, outer height, outer width. Now, let's try to understand what is inner height and what is outer height. This is inner height, which contain the viewwod 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 wed. This is the inner width area and it doesn't count the school war section. At the same way, we have outer with and it's count the scroll bar section. Outer with, count the border area. I said something wrong. Also, the outer weight doesn't count the scrollbar area. It count the border area of the trower. Without wasting your valuable time, let's start the practical. As usual, side by side, I open my visual studio code editor and my browser using lifesaver extension, and I already create an estimL document named index dot t. Inside this index dot estimL page, we have body tag, and inside the body tag, we already type script tag. So first, inside this 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 Window dot inner height. Then SemgrounN 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 resist or variable name, I height. Then Semgraun to in this line. At the same way, I'm going to take outer height. I'm going to create another variable there and our variable name is outer height. O height. Outer height equal to window dot out or height. Then semigo 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 ins the round press outer height and semicon to this line. I'm going to set this file. If I show you my console, so let me show you. I'm going to write in my browser and I want to kick in speed section. Herogc 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 reload the browser again. Now you can see now our inner height is 303, but our outer height remains the same. 1047. As I told you, inner height always count the actual viewport height. But outer height, count the whole browser height. So 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 radio the height of the whole browser and then reload 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. And to resolve this, I'm going to call on resize event. I'm going to call the event in our body tag. Here I'm going to type on resize. On resize and our function name and our function name is resize function. Resize function. Here I call a function name resize function, and now we need to create the function. Here more type function, and our function name is resize function. I copy the name and paste it here inside the Calise, I'm going to move this code and set this file. After set 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 printed. Now the inner height is 295 and the outer height is 1037. At the same way, we can print inner width and outer width. 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 with. Inner width equal to inner Width, equal to window dot, inner W. Then console log, print, inner with. At the same way, I'm going to print outer with. So I'm going to type out with window dot, out with, and then print Console dot log out with. If I set this file, now you can see my console, it's print blank. But if I increase the browser width, then what happened? After I 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 would print inner Width 823 and the outer width 1045. This is how we can get inner height, inner width, outer height and outerwid. Thanks for watching this video. Stay tuned for our next Tutorial. 30. JavaScript Window Open & Close Method : Us. Good to see you guys. Once again, I'm back with another tutorial related JavaScript bomb. And in this tutorial, we are going to learn JavaScript, open window and close Window method. Here you can see 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 meth. Which is open method. To use open method, we can use button, otherwise, any link. 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 a Window. At first, we need to type the object name, which is Window. Then we need to use the method, and our methodym is open window dot open. Then inside the round dresses, Here you need to pass to three parameters, 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 the full form of URL is uniform resource located. Here you need to pass the website domain name. At first, we need to pass the protocol HTTP, otherwise, TDPs. Then slash slash www dot our website N. 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 underscoblank, underscopParent, undersco sil and underscoT. If you want to create a external window, then you can use this parameter, underscoblank. And if you use UnderscoParent, then it's going to replace the existing window. Thence come undisco Sell. We use self parameter where we use iframes. If you want to open this website in a particular iframe, then you can use it. And our last parameter is underscoT. We use this parameter when we create our website in a frame set. Currently, no one create website inference. The popular parameter is undiscoblank. Most of the time we use this parameter. Now, let's talk about our last parameter, which is space. It's main specification. It come with some predefined views, like width height, lift and top. Using height and width, you can define the size of this window using left and top, you can define the position. Why do you want to open the window on your screen? Without these, specification come with some extra properity, but these are not necessary now. Let's start the practical and see how we can use. So finally, we are in my Viz Studio code editor. 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 STL document named index dot HTML. At first, I'm going to create a button tag inside our body tag. Button. And our button name is Open undo. And inside this button tag, I'm going to call on L function. And our function name is Open Window. I'm going to set this file. Now you can see in my browser, we successfully create a button named Open Window. If I click this button, it's going to call Open Window function. Now inside the script tag, I'm going to create Open Window function. I copy the function name and inside the script tag, here I'm going to type function. Function, and our function name is OpenWindow. Then inside the alirass here I'm going to use Window open method. Hemp Window, dot open and Semgroon two 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 creates a new tab and I'm going to close this tab. Every time it creates 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 slash our website name, www.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 you tab and redirect to google.com. Now let's talk about our second parameter, which is name. Here I pass a comma 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 tab and redirect tool.com, but it do not change anything. The title name came from the actual website. Also, here we can use some predefined values like undiscoblack. It's a default wine. If I set this one and praise open Window button, her it create a new window. But if I use another predefined parameter, which is underscoParent. If I set this file and press Open dot Window button and press this button, here you can see it redirct the website on the same page. I do not create any new window. Without that, we have two views, self and talk. Here I'm not going to use these views. If you work with IFrames, then you can use self value. 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 default, every time it's going to create a new window. Now, let's talk about our third parameter, which is specification. Supra comma inside the doll course. First, I'm going to specify the width of the browser. Width equal to 500 pixel. Then after coma, we need to specify the height, height equal to 200 pixel. Remember, the properties always accept pixel value, not percentage value or EM value. After set the file, if I praise, open window button, now you can see laptop corner on your screen, it open a new window with 200 pixel height and 500 pixel weight. Hair it creates separate window with specify 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, lift and top. Let me show you how you can use it. Using lift and top value, you can set a margin for your window. Let me show you how. Supercoma first I'm going to type IP left equal to 300 pixel. Comma and from top, I want 200 pixel, top equal to 200 pixel. I'm going to set this file. If I praise open window button, now you can see it open new window. But it said 300 pixel margin from left side and 200 pixel margin from top side. This predefined value can open your window exact where you want. We already learn 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 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'm going to paste it here. As I said the Rundre we need to use close Window method. But before we need to declare a variable. W and our variable name is MyWindow. That's begun to end this line. Using this variable, we are going to link this to Math. Here I want to type my window equal to Window open function inside the closed window function, here I want to type, my window dot close function. A semicro this line, and I'm going to set this file. Now you can see in my browser, we have to t two different button, open window and close window. Before I run this code, I want to tell you something. In Chrome browser, closed function do not over. That's why I am going to run this code in Firefog browser. So I'm going to open my Firefrogs browser. As you can see, I already open this file index amL. If I praise open window button, as you can see, it open our window at the specified position with specify height and specify wing. If I call closed function using close Window button, now you can see it close our tab. This is how we can use open and closed method. Thanks for watching this video. Stay tuned for our next to Jill. 31. JavaScript Window moveBy & moveTo Tutorial : Again, I'm back with other tutorial related Java kit do in this tutorial, we are going to learn window W B and opt method. Here you can see on your screen, we have a window named A and using this window, I open another window, which is B, and we already learn about open method in our previous tutorial. With that, we also learn about specifications. As I told you in our previous tutorial, if you do not pass left and top value, by default is going to open our window at the laptop corner. But we can specify the window position using left and top Val. But now after I 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 B and move. Both the method do the same job, but there are minor difference. So without wasting your time, let's start the practical and see how we can use it. Side by side, I open my result studio code editor and my browser using if server extension, and I open my previous estimate document. In our previous tutorial, we 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. So Dub 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 HeplPub open window and move window. Then I'm going to remove the left and top property because I want to place it default position, mean left top corner. Now we need to create the move window function. I copy the function name and her type function, and our function name is move Window. Then the CalisF I'm going to use move two math. Here I want to type my window dot move two. Then you said the down dresses, we need to pass two parameter. We need to specify the position. Here we need to pass to two, left and right. So for XXs I'm going to take 100 and coma for YXs also I'm going to take 100. So I'm going to 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 after praise, open window button, it will paint a new window at default position. If I praise move window button, it's not going to work. Let me show you. Here I praise move window button. As you can see, after praise, move window button, it not move our window at a specified position. If I show you my console section, in spec, Console, here you can see an error 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 bar, then what happen. Here I'm going to pass a bank value to our first parameter. I remove. And set the file again. Now again, I'm going to press open window button, open hour window, and now I want to move the window. If I press Window button, now you can 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 up move the window, we lose the focus of this window. Now it's focus to this window. Now up 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 praise, open window button. As you can see, it creates a window. If I praise, move window button, now you can see, now it redirective focus to this window. Now what? If I specify the exact position when we open the window, let me show you. Here I'm going to pass left and top value once again. P equal to 300 pixel. Top equal to 300 pixel. Now, let's open the window again. So praise open window button. Now you can see it open our window in specified position. From left side, it takes 300 pixel. From the top also it take 300 pixel. If I praise move window button, it move our window to the exact position where 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 Hem to use move by method. Move by. Move to function, move our window according to the screen, but move by function, move the window according to the relative position. Let me show you what. Pre set this file. I I praise open window button, as you can see, it open our window at this specified position. But if I praise 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 to function. Just one thing you need to remember, move to function from the absolute position and move by function from the relative position. This is the basic difference between two function. Thanks for watching this video. Stay even for our next todo. 32. JavaScript resizeBy & resizeTo Tutorial : Good to see you back, guys. Once again, I'm back with another tutorial, relatate JavaScript bomb. In this tutorial, we are going to learn two other methods, Resize by and resize two. Here you can see a browser window. When we open the window, we specify a size hundred by hundred pixel. Now you want to resize this browser without drag and draw and also you want to specify hide and week. For this type of resize, we have two method in Java script, Resize B and resize two. Without resting your time, let's start the practical and see what is that. As usual, side by side, I open my visors to your code editor and my browser using Live Server extension, and I open my previous estimate document named index dot t. If I praise open window button, as you can see, it creates a new window and we already specify height and weight to this window with 500 and height 200. And now I want to resize this window without dragging. For that, first, we need to take a button. I'm going to duplicate this line and here I'm going to change the function name. I'm going to replace open We resize. Our function name is resize Window, and also we need to change the button fixed, Resize window. And now we need to define the function in our script tag. I copy the function name and I type function, and our function name is resize Window. Then instead the Cariss we need to type my Window dot our method name, which is resize two. And here we need to pass the width, and I'm going to say it heightened width 400 by 400, 400 comma 400 and semigraund two in this line. So let's set the file. Here you can see both the buttons. So I'm going to praise open window button. And now I want to resize this window. So I'm going to praise resize window button. After praise, Resize window, you can see the result. It's changed going to height and we. This is the usage of recess two method. Let's see our second method, which is resize Bye. At first, I'm going to duplicate this line and comment our previous one. I'm going to replace recess two with recessed Bye. Another question is, what is the difference between resize buy and recess two method? If we use resize By method, it's going to extend the existing height and wei. 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 please set this file, I'm going to open the window. Now you can see our Window height is 200 pixel and W is 500 pixel. But if I praise resize window, now our tab height is 600 pixel and tab with is 900 pixel. Resize by method work with existing value and recess to method, but recess to method work separately. So this is the difference between resize by and recess two method. So thanks for watching this video. Stay tuned for our next to view. 33. JavaScript scrollBy & scrollTo Tutorial : Good to see you guys. Again, I'm back with another tutorial related Javascrip bomb. And in this tutorial, we are going to learn scroll by and scroll two method. And you can see a browser window in your screen. And also, you can see particle scrollbar and horizontal scrollbar. Now, you want to scroll the window without touching the scrollbar. For that, Javascrip introduce to special method. Scroll B and scroll two. Before I start the practical, we need to understand how many type up score bar we have in our browser. As I told you, we have to tap two type up score bar, vertical and horizontal. If you want to manipulate vertical scroll, then you need to pass YXs L if you want to manipulate horizontal score, for that, you need to use XX W. If you want to move the scroll bar upside, for that, you need to pass minus YXsh if you want to move it downside, then by default, you need to pass the V. You don't need to mention plus sign. Similarly in horizontal scroll bar, if you want to move left side, you need to pass minus V, if you want to move this scroll bar right side, you need to pass las 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 visor studio code editor and my browser using if server expansion, and I already create an estimable document named index dot t. As you can see inside the body tag, we have a hearing gang, 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 speed tag, I'm going to type im 2000. Here I'm going to add 2000 Wardro paragraph. It's a huge one, and I'm going to set this file. Here you can see a scrollbar in our browser. Now we need to add a button below the heading tag. Here I'm going to type button. And here I'm going to type a caption and I'm going to type scroll window. With that, I'm going to call a function with click event. So here I'm going to type on cle on clay on click and our function name is scroll Window. And I'm going to copy the function name. And inside the script tag, I'm going to define the function. Function, and our function name is scroll Window. Then in Calvis here I'm going to type Window, Window dot, here I'm going to use scroll by method. Inside the downdrass I'm going to pass through two parameter. For now, I don't want to pass X xs. I pass zero for YXs I want to scroll down 40 pixel. I pass for me and then semicrotN this line. And I'm going to set this file. After I set the file, you can see the scroll window button. As you can see, our scroll bar is on top, but if I praise, scroll 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 we need to pass minus window. I pass -40 and set this file. After praise, scroll window, as you can see, it move our scroll bar upward direction. So here we work with vertical scrollbar. Let's work with horizontal scrollbar. For that, we need to take a deep tab. So here I'm going to type D. And I'm going to move this paragraph inside this dip tab. I cut this paragraph and press it inside this deep tab. And now I'm going to use style attribute in paragraph style, and I'm going to use with property. Weight, hose in pixel. Upset this file, you can see the result. Here you can see a horizontal scroll bar in our browser. Now I'm going to pay with X texas value. I'm going to make YX value zero. And in xx zero, here I'm going to pass 100. Up set this file. If I press scroll window, you can see up press Window button, I scroll out browser 100 pixel at xxs direction. If I use minus value here and the set this file, and then again, I press this button. Now you can see it moved the paragraph opposite direction. This is how we can use XX Z and X W. Now, let's talk about scroll property. I want to dig this line and comment on figures one here I'm going to change scroll by with scroll do. I'm going to set this file. Also, I'm going to change the d zero at XXs and zero at YXs and set this file. Before I praise, scroll window button, I'm going to move down or scroll bar. If I praise, scroll window button now, as you can see, back to the default position. Sorry, it is not the default position because her said XX is zero and YX is zero. That's why I hit back to the starting position. Similarly for horizontal scroll bar. If I move it little bit and then press this button, as you can see it back to the previous position. Scroll by work relatively and scroll to work absolutely. This is the difference between scroll by and scroll to method. Thanks for watching this video stay tuned for our next two. 34. JavaScript Location Object Tutorial : 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. And 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, and 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 sult studio code editor and my browser using light server extension, and I already create an estimL document named index dot HTM. And now we are 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 HTML file from the b server. If you open the file from the Local vo server, otherwise, any online server, then you can use these properties. Now, let's open the Console and try location object. Here motype console dot log, Console dot log ins at the round presses location. Hemo type location. If I press Enter, now if I open the dropdown section, here you can see all the properties name from the location object, hash, host, host name, HID, origin, part name, hot, et cetera. As 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 rounddress is location. And Semgro two in this slide. If I press third, and open the dropdown section. Now you can see the similar type of data provided by the google.com. Here you can see host name and host is same. Also, you can see the path and the origin and the protocol is TDPs, as you know, S stands for secure. If I show you my local server data, as you can see, protocol is HTDP. I mean it is not secure site. That's the different topic. Now, one by one, I want to get all the values. 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 type Console dot log is at the rounddresses. First we need to call the location Object. Location, dot, and our property name, and our property name is H. And semicon to can this line. If I press Enter, as you can see, it return the host name. It returned the IP address. And if you on the same command for the go page, let me show you sound press this code and press Enter, now you can see it's written the host name www.google.com. As you know, our index dot t file run from the Local vos server. That's why it's written the IP address, but google.com run from the online server, and as you know, the 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 this code, it's written this same result. But if you run the same command on Locaos server, let me show you location dot host name. Then run the code. Now you can see, it's written the only IP address, but in host, it written the port number also. Now I want to return the complete URL of this website. For that, we need to use HRDA. Hm pays the code, location dot HR. 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 for. So to run the command and location dot four. Again, I'm going to run this command and here I'm going to type location dot port. 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 console dot log Location protocol. And this code, you can see it return HTTP. If I run the same code on google.com page, copy the command. And if I run this code here, now you can see it written protocol HTDPH. Now, let's talk about another property which is hash. Re fore in our Ido bar, up to slash, I'm going to use has hash second. If I press Enter, as you can see, is written error because hash is not available, that's why it's written error. But if I run this command, let me show you console dot log location dot hash. After press Enter, as you can see, it's written seconds second. Now let's talk about another property which is search. For that, I'm going to jump into the Google tab and first, I'm going to search something image. In my console, I'm going to run a command, console dot log location dot search. If you want to return this search value from the URL or that, you can use this command. Just 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 itself. Also you can see the self search query in our ERL 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 only that, also we can set the values. Let me show you. I'm back to the index estimate page, and here, I'm going to type location dot HRF. Now I want to set a domain name. For that, to type equal to inside the double codes, first, we need to type the protocol. Here I'm going to use TDPs. Colon slash the domain name, www.google.com. Then semi going to this line. Now, if I set this file and repress this index dot TML page, let me show you. As you can see, it's reditggle.com. You already learn about how we can use this property to set value and get value. Now let's talk about location object methods. These are assigned reload and replace. If you want to set a new value on this vado bar, for that, you can use assigned method. If you want to replace your page for that, you can use reload. The last one is replace. It is also pretty similar with assigned method, but there is a little difference between them. So let me show you. Here you can see you already created button name click and also we add on the event. You can see the function click. In this function, first, I'm going to use location ad reload method, reload. If I set this file and after I click this button, every time you can see in my URL bar, it reload my browser. Now I want to assign a new value to our URL bar. For that, we need to use assign method, location dot, assign Inside the Runddress we need to provide the domain name. First, we need to type the protocol, HTTPs, colon slash slash www.google.com. After set this file, if I click this button, now you can see it's rewrite to google.com. This is the usage of assigned method. Now, let's talk about our last method, which is Ripples. I'm going to pick this line and comment out previous one. Here, I'm going to tie location dot RPLs. This method also work like assigned method, but it removed the history. Let me show you. Inside 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 redirect to go.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, Stid. 35. JavaScript History Object Tutorial : Hello, guys. Good to see you back. Once again, I'm back with another tutorial related JavaScript bomb and in this tutorial, we are going to learn about history object. In this tutorial, we are 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 in property you can get. Let me show you the property in practical. As usual, side by side, I open my users studio code editor and my browser using Lifesaver 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 Hemo type console dot log, Console dot, Log inside the round brress Hemo type history. Then submicron to Nil. If I press Enter, now you can see in my history tag, now you can see a drop down. If I open this dropdown, as you can see, length is one. And if I drop down the prototype option, now you can see some Maths, back forward, go, length, et cetera. Now, let's add an cut tag inside the body tag. Here I'm going to type A and the link is HTTPs colon slash slash the website is google.com, www.google.com. I'm going to set this file. Also, we need to add a text to this Ange tag. 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 google.com. If I show you my length now, in my console, I'm going to type Console dot log. Is the round presses, I want to return the length. Here I'm going to type history dot Length. As Semira to end this line. I press this file. If I press Enter, now you can see it return to. Another question is why it's return to Because now you have backward history. If I click this go back button, now you can see it is back to my index dot estimL 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 link. You can see the result. I hope now clear for you how lens function work. Now, let's talk about the method of history object. Normally we have total three useful method back 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 method. If you want to go forward, then you need to use forward and using go Method, you can do the mood. Let's jump into the salt studio code and see how we can use it. At first, I'm going to change the link address. Here I'm going to tie index dot HTM. And I'm going to replace Google with page two, page two, and I'm going to set this file. And also, I'm going to change the heading. I'm going to replace JavaScript History Object with We are in page one and set this file. And now we need to create index dot to estim page in my current working directory. So here I'm going to create another page, index two dot HTML. And I'm going to copy the whole code from Index stimLPage. And paste it inside index two dot estimate page. I'm going to replace at first, I'm going to replace our heading. We're in page two. Again, I'm going to create another page. Here I'm going to change the link name, page three. As we need to redirect to another page, index three and set this file. Then I select the honk and copy it. Again, I'm going to create another index dot stimLPage. Index three dot HTML. I'm going to paste all the code here. As 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. I'm going to remove this cat tag, and set this file. Now you can see in my browser, we are in my index HTML page. Man page one. Now I want to jump into the page two. I'm going to click this link, page two. As you can see in my URL bar, it's redirect to index two DML. Again, I decide to jump into our next page, which is phase 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 Roundbress history. Now you can see the history length is three because we have to do three page because we visit three page at the same Wint. 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. Also, here we need to call an event, which is click. On click and also need to provide our function name and our function name is B function. Back function. With that, I'm going to create another button. I do we get this line and our new button name is forward. And also need to change the function. So here I'm going to type forward. And now we need to create both the function in our script tag. So first, I'm going to copy Bap function. And here I'm going to tie function, and our function name is BP function. Then inside the roundress I'm going to tie history dot B. For back function, I use back method. And again, and then I'm going to date this section and also I'm going to change the function name forward function. Copy the function name and overwrite it. And also, I'm going to change the method here. I'm going to replace back with forward. This is it, and I'm going to set this file. So 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 praise forward button, as you can see, it's redirect to page two. And if you decide to go backward, just praise Back button. So again, we are in page one. And now I'm going to praise forward button two time. We are in now page two, and also I'm going to jump forward at phase three. So again, I'm going to praise forward button. So now you can see we are in phase three. But what? If I praise forward button again, then what? As you can see, up press forward button, it's redact to nothing because after phase three, we don't have any forward option. And also you can see it at URL section. Our forward leak is deactivated. Now, let's talk about our last method, which is go. For that, I'm going backward. I want to say I'm going to back phase two, and also, I'm going to open index two dot HTM. Here, I'm going to create another button. I duplicate the button and I'm going to replace forward function with GoFunctionG function. Also, I'm going to change the button name. Go. Now I'm going to create the function in our script. Function and our function n is go function. Go function. Then inside the calis, here you need to type history dot, go. Then inside the undress, here you need to pass a parameter. If you want to go forward, then you need to pass positive value. 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 pase two. Now you can see there is a button NMG. If I press go button now, as you can see, redirect to page three. Now, let's do the same thing at index three dot stimLPage. So I copy this section. And then I'm going to jump into the index three dot stimLPage and I'm going to replace it with new cod. 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, here you need to pass negative film. So here I'm going to pass minus two. Now you can see in my page three, go button is appear. If I praise go button, now you can see it's redirect to page one, it's Skip page two. Also I'm going to do the same thing at page one. Again, I'm going to copy the old 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. And if I set this file, you can see the button. If I praise go button, now you can see it is reedit to page three. Hero successfully use three type of history method backward, forward, and go. I hope now it's clear footing. Thanks for watching this video. Stay tuned for our next Tutorio. 36. JavaScript pageYOffset & pageXOffset Tutorial: Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related Javascript bound. And in this tutorial, we are going to learn about two new method, page Y opposite 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 scroll bar, and also we extract the horizontal scroll bar distance. For that, JavaScript introduce two method. PageY osite and page opposite. So without wasting your time, let's start the practical and see how we can use these methods. So as you can see, side by side, I opened my Visual Studio code editor and my browser using lip server extension, and I already create an TML document named index dot TML. If you notice, you can see, there is no scrollbar in our browser, not the vertical, not the horizontal. So for now, in our body tag, I'm going to add a W Parag, P, and I'm going to add lot of O. Lorem, 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 little bit. With that, I want to extract the value how much we scroll. So I'm going to use pageY Osit method. So here I want to type script tag inside the body tag, Script. Then inside the Script tag, as you know, we are working on window object type, Window. Then I'm going to add scroll event. I'm going to use add event listener. And inside the round presses, I'm going to use scroll event. So when I scroll this page, it's going to call a anonymous function. So I'm going to create a function. Function is at the colics, and now I want to extract the vertical scroll value. With that, I want to print this value in our console. So I will type Console, dot, log inside the roundss inside the door codes. I'm going to type page Yost. With that, I'm going to use Cgation sign, and I want to print the Window Y upset value, window dot page Y upset. And I'm going to add semicolon to end 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. Upper set this file, you can see the value. Page Y opposite value is 563. We scroll 563 pixel at YXs direction. And if I move the scroll bar 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 page Y poste Vee 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 R Mathur. And subgin to end this line. And 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 this scrollbar upward, otherwise downward, you can see only one value. It's print the exact value of scroll word. At the same way, we can extract the page x opposite value. So I'm going to duplicate this line, and this time I'm going to print page x opposite. But the problem is we don't have any horizontal scroll word in our paragraph. For that, I'm going to take a DV element in our body tag. So before the paragraph start, here I'm going to take a Dev element. Deep dot, dot, box. And also, I'm going to style this deep element using its class name. So Hemo type dot box inside the Caris is first propriety, I'm going to use with with 1,200 pixel. Height 300 pixel. And I'm going to say background color. Background color rate. That's it. If I set this file and move the vertical school upward, now you can see our page Y opite value is zero, also our page, we need to change the name page Xosite. Also, our page X oposite Value is still zero. Now, if I move our horizontal scroll a little bit, here, you can see the value. Now you can see our page X opposite value is 174 pixel and our page Yosete VW is still zero. So if I move both this scroll bar, you can see the result in my console. So this is how we can extract this scroll value using these methods. So this is it for this tutorial. In the next tutorial, we are going to learn about two new method, Oset top and Osete leg. So thanks for watching this video. Stay tuned. 37. JavaScript offsetTop & offsetLeft 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 method, Oset top and opposite it. 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 left side to extract the values JavaScript introduced two methods. Opposite top and Opsete it. So let's jump into the Visual Studio code editor and see how we can extract these values. So as usual, side by side, I open my Visual Studio code editor and my browser using ipserEtension, and I already create an estimate 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 paragraph, a Tumi paragraph, and I already style these box deep. Here we said background, also set then hike 300 pixel. Also, we have a border. And now I want to measure the value from the top and the left. 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 roundses I'm going to print a statement box opposite top. Box opposite top, colon, and then I'm going to use Configuration side. And now only to target this box. To target this box, I'm going to create a variable inside the script tag. So our variable is where BOX box, box equal to, and I'm going to use document dot query selector method to target this box, document dot querySelector. Then inside the round presses, inside the double codes, we need to pass the box ID. Sorry, the box class name, which is dot BOX and the semicon too in this line. And now I'm going to use this variable name box. Box dot, and our methodomsopposite T. And semicolum to end this line. At the same way, if we want to extract the value from the lab, we need to get this line. And I'm going to replace this statement. Why Oset it. And also, we need to chase the method name. Why offset it. 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 box opposite top eight and box opposite lab eight. Now the quotien is whites written eight and eight from both the direction because this is the default margin of body tag. That's why sometimes we need to use margin zero from all the direction in our body tag. And also you can notice the eight pixel gap from the top side and from the lap side. But if I use margin property, first, I'm going to use margin property in our body tag. So here I want to type body and inside the Cariss margin. Margin Velo zero. If I set this file, now you can see in my console, it's print box opposite to Value zero, and also opposite lib Vo is still zero. And if I add margin at psit, let me show you margin, P 100 pixel. And this set this file, you can see the result. Now our box oposte lab value is 100 because we have 100 pixel margin at lab position. Also, if I add margin top 50 pixel and the set this file, you can see the value. Now you can see in my console, box oppose top value is 50. But what? If we add a paragraph before this box dip, let me show you. So I'm going to add a Dai paragraph. Lorraine, and I'm going to add 200 wardop paragraph. After set this file, you can see the value. Now you can see our opposite top value is 354 pixel. The distance between browser top to Dave is 354 pixel. So this is it for this tutorial. In the next tutorial, we are going to learn about two other method, scroll top and scroll lip value. So thanks for watching this video. Stay tuned. 38. JavaScript scrollTop & scrollLeft 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 methods, scroll top and scroll let. Suppose we have a deep element, and we say, height and width to this deep element. And as you can see, we have total two scrollbar in this deep element, vertical and horizontal. This scroll bar will appear p 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 scroll 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 Visual Studio code editor and my browser using live server extension, and I already create an TML document, named index dot HTML. And in this TML page, as you can see, we have a deep element with class named box, and I already style this box deep. Here you said, background, heightened width, 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. Lorim 500 W. And I'm going to set this file. After set this file, as you can see, it's overflow from our 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 little bit from the YXS direction, and now I want to extract the Scrollto value of this deep element. To extract the value, we need to jump into the script tag. So here, I'm going to type script. Inside this script tag, at first, I'm going to target this box using its class name. So to type document dot query selector. Inside the round presses, inside the 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 event 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 a anonymous function. So pracma I'm going to call a function. Function. Round dresses, then inside the Carcis Then inside the function, I want to print the scroll value in my Console. He type console dot log, console dot, Log I the rounds I at the double ports. First, I'm going to print a statement which is scroll top. Stroll off concatenation with. And here we need to pass the targeted box. For that, I'm going to create a variable that, 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 document dot query selector with target variable. Also, I'm going to use the target variable in my console selection. Target. With that, we need to call our methodnym target dot scroll Dog. So if I set this file and turn on my console and scroll this deep element, little bit, you can see the value, scroll value. But the problem is you can see a lot of values. That's why I'm going to use clear function, Console dot clean. This function going to clear unnecessary values. If I set this file again and scroll this deep element a little bit, now you can see the scroll to value. It is pretty similar with Y Oset and X opposite methods. We apply pageY Oset 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 led. So in this deep element, I'm going to create another deep element. DevTt box too. Also, I'm going to style this box two deep element in our style section. So type tat box two is at the calibraces. I'm going to use background, background, read. Then I'm going to use id. With 700 pixel and height 80 pixel. That's it. I'm going 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 continer and you can see the horizontal scroll bar. And now we need to extract the scroll left value of this scroll bar. For that, first, I'm going to duplicate this line, and I'm going to change scroll top to scroll let also, we need to change the method name, scroll it. If I set this file and scroll the horizontal scrorebr little bit, you can see the scroll left value. Now it print 48. And from the scroll top, we have zero value. If I scroll the vertical scroll bar a little bit, now you can see scroll top 148 pixel and scroll just 48 pixel. So this is how we can extract the scroll lip and ScrotoValo. I hope now it's clear for you. So this is it for this situdal. Thanks for watching this video. Stay tuned. 39. JavaScript scrollWidth & scrollHeight 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 two Javascript new methods, scroll width and scroll height. As you can see, we have a deep element, and inside this deep element, we have some dummy data. And how we use overflow property to this deep element to hide the extra content. That's why it ad vertical scroll bar 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 introduced a new method, which is scroll height. 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 methods. So as you can see, side by side, I open my visual studio code editor and my browser using if server extension, and I already create an TML document named index ot TML. If you notice you can see in our body tag, we have a deep tag, and her set in ID box. Also, I style this deep tag. We said background color pig with 300 pixel and height 300 pixel. So you can see there is no scroll bar in this deve lement because we don't have overflow content in this deve ilment. Basically, it's an MTD. And before I add the content in the box, I will show you how we can use these 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 where and our variable name is target. Target equal to DocumenTt Coy selectt. Instead, the roundress I'm going to pass the ID name, Hashtag box. Then seg to this line. And now I'm going to create two other variables, one for scroll width and another for scroll height. So first variable, I'm going to use that and our variable name is scroll with. Underscop. Equal to our target dot our method name scroll with. Semico this line. Then I'm going to beg this line and replace with with height. Also, hammer type, scroll in. That's it. And now I'm going to print both the variable in my console. For that, I'm going to type, console, dot, log inside the roundss inside the double core. First, I'm going to print scroll with. Scroll wed. Then concatenation sign, I'm going to call the variable, and our variable is scroll wing. And so we go on to end this line, then I'm going to get this line, and this time, I want to print scroll height. So I'm going to replace with height. Also here I'm going 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 click on it and inspect, and I'm going to trun 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, here we assign with 300 pixel and height 300 pixel. That's why it return this value. But this time, I'm going to include some dummy data in our deep tag. So here, I'm going to type Lorin I'm going to add total 600 W, 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 we type overflow. But before I use overflow property, as you can see, still it return, scroll height is 926 pixel because this is the content height inside this container and our width still 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 I set this file, now you can see the height to scroll area is 2034 and scroll with this 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 effect our result. Now scroll with these 323 and scroll height is 274. And now we need horizontal scrollbar. For that, I'm going to create another deep element inside this deep element, some type deep dot box two. And I'm going to style this DB element. So Hetype dot box two, in the Cali resist 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 bar at the bottom position. So this is how using this method, we can extract the scroll area value. We can extract scroll height value. As we can extract scroll with Value. So this is it for this tutorial. Thanks for watching this video. Stay tuned for the next tutorial. 40. JavaScript offsetWidth & offsetHeight Tutorial: Hey, 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, which is opposite width and opposite height. In this example, you can see a deep element. And in this deep element, we say border. Also, we have text and padding in this box and a vertical scroll r. 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 Strip introduce a new property which is opposite height. At the same way, if we want to extract the width of this element, in that case, we need to use Osetewidth property. If you notice, you can see, we have ten pixel border, padding area, also we have content area and a scrollbar. Oset with otherwise obsete height, going to return the total with. Oset width and Osete height returns the width and height of an element in pixels, including padding, border and scrollbar. If we have horizontal scroll bar at the bottom, it's going to add in our height. So this property going to provide total within height, including border win. I 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 Visual Studio code editor and my browser using Lifesaver extension, and I already created an estable document name in the Exotetable. So if you notice in our body tag, we have a deep tag with class name box, and I style this box Dev in our style section. Here we said, we then height 300 pixel and set a background color orange. And now I'm going to use JavaScript property opposite width and opposite height. So here I'm going to use script. And inside the script tag, first, I'm going to target this box using its class name. So I'm going to create a variable where, and our variable name is target. Target equal to Documen dot query selector inside the roundresses inside the dowel codes, we need to pass the class name dot BOX box and semicolon two in this line. And now I'm going to create two other variables for opposite weed and opsite height, some type, and our variable name is weed. W equal to target dot opposite weed. Semicron in this line. There I'm going to duplicate this line, and I'm going to replace it with height. And here I'm going to type target dot offsite high. And now I want to print this value in my console. So I'm going to type, console dot, Log inside the roundreses. Inside the dog goes, I'm going to type Osete with concatenation with wheel and semicolon to end this line. And the same way, I want to print opposite height. So duplicate this line and her type opposite height. Also, I'm going to replace with with height. And I'm going to set this file. After I set this file, if I turn on my console, you can see the result. Opposite W is 300 pixel and offset heights, and oppste height is 300 pixel because Hey assigns same amount of height and weight to this container. But what? If I add some border sound to type, border 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 oposite width become 320 pixel and oppste height become 320 pixel. Also, if I want to add padding, sub type padding from each of the direction I want to add 50 pixel padding. If I set this file, you can see the result. Now each of the direction it at 50 Weixel padding, also it at ten pixel border, and the actual heightened width, 303 hundred. Using these proprieties, we can get total height and total width of an element. So this is it for this tutorial. Thanks for watching this video, stay tuned for the next tutorial. 41. JavaScript clientWidth & clientHeight Tutorial: Hey, guys, nice to see you back. Once again, I'm back with a new tutorial related Java sweet. And in this tutorial, we are going to learn about two new properties client height and client W. So as you can see, we have a development, and in this deep element, we have border content text, and padding. Also, we have a scrollbar. And now I want to extract the inner height of this development. 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 scrollbd, and I don't want to add this scrollbar. To resolve this problem, JavaScript introduced two new propriety client width and client height. We already learn about this type of property in our previous tutorial, Oset width and opposite height, and the different is Osetew and opposite height provide the total width of this element, including border and scrollbar. 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 scrollbard 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 studio code editor and my browser using Lifesaver extension, and I open my previous estabil document. In our previous estabil document, we'll learn about opposite width propriety and osite height propriety. And in this tutorial, we are going to extract client width and client height. So as you can see in this D 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 Opsete weed with client weed. Client we. And also, I'm going to replace Opsethd with client height. Client height. Before I set this file, as you can see, now current Oste is 420 pixel and Osete height is also 420 pixel. But as I told you, if you use these properties and the set this file, now client we and client hide become less than this value because it do not going to include the border area. So if 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. 42. JavaScript ClientX & ClientY 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 are going to learn about two JavaScript new property, client takes and client Y. As you can see in this example, we have a browser window, and you can see a mouse Carsa 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 VLU also YXSZeF that JavaScript introduced to mouse event property. Which is client takes and client Y. And remember, it's work only inside the viewport area of this browser. This is the viewpot 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 these events, then we can extract the YXS and excess video, means clients and **** DI view. 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 Visual Studio code editor and my browser using Lifesaver extension, and I already created an ETL document named index dot tamal. For now, my EST page is completely black. At first, I want to extract the mouse coordinates when I my cars on this be boot area. For that, we need to go back to the body tag and Hemo type script tag. And now we need to add an event in our document using add even listener method. So inside the double codes, I'm going to type document, dot, add even listener. Then inside the round presses, 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 semicolon two in this line. And as you know, with that, also, you need to call a anonymous function. So I'm going to create a function after comma function, and inside the Cariss, I'm going to use these properties, client to I and clients. What that would you take to variable? Sum type where, and our variable name 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 shorthand. So I'm going to type E. So here I type E dot client is. Then we're going to end this line? And at the same way, we are going to extract xS value. So I'm going to duplet this line and replace X with Y. Also, we need to replace client with client Y. And remember, X and Y should be capital. Otherwise, it's not going to run. And now I'm going to print XX and YXS value in my console. So I'm going to type Console. Dot log inside the roundress inside the doubled code, I'm going to type flints colon, concatenation W, X value, and semignto in this line. I'm going to duplicate this line, and this time I'm going to 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, EPAC console. Also, I'm going to print Console dot clear. If we do not use the clear function, then it's going to print lot of value. So Hemotype Console dot Tear Method. Semicon in this line. If I set this file and my cars in my viewport area, you can see the value. Now you can see our XX point is 168 and xs point is 352. If I move it upward, now you can see it reduce YXs point. And if I move it top left to corner, now you can see XXS value is 13 and x's value is nine. So this is how we can get Xian one YX value of our cursor. So that's the usage of these properties, clientX and client Y. Also, you can target in a deviment. For this example, we do not use any deviment. Here we target the old browser, the old browser window. So this is it for this tutorial. Thanks for watching this video. Stay tuned for the next tutorial. 43. JavaScript pageX & pageY 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, pageX and pageY. 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 scrollbar at the right side. Which 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. And after stroll this page a little bit, I put my mouse at that this and I want to extract xx position of this mouse, also YXsPosition of this mouse. To extract the value, JavaScript provide total two property. PageX and pageY. In our previous tutorial, we already learn about clientes and client toy property. It was pretty similar with pageX and pageY, but there is a difference between clients and client toy and pageX and pageY. It is only work inside the wood area. But in pageX and pageY property, if I scroll the vertical scrollbar, otherwise horizontal scrollbar, it's going to change the cursor point. And as I told you, these properties are work with only mouse event. So we need to use mouse event to use these properties. So these are all mouse event on click on Double click on Context Menu, on mouse move, on mouseOver, 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 Visual Studio code editor and my browser using Lifesaver extension, and I already create an TML document named index dot TML. 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, Xxs and YXs. 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 at event listener. Is that the round addresses, Is at the dole codes, otherwise, single codes. Here, I'm going to pass the event name, which is mouse mode. As you can see, we need to close the quotation. We need to move it inside the single quotes otherwise total code. Then we need to call a function. A anonymous function. So type function is at the carirass. It is an anonymous function. Then inside the function, we need to take a variable as an Eve. So for et, I'm going to pass P, that's it. And here we need to take total two variable to store the two V where our first variable n is X, X equal to E dot Page X. Then I do begin this line, and this time, I'm going to type another variable pageY page y equal to E dot, page Y. And now I'm going to print this to value in my console area. So I'm going to type Console, dot, log inside the round dresses, inside the double codes. First, I'm going to type page x value, page x value. Semicolon. Then I'm going to use concatenation sine and our variable name semicolo in this line. Then I duplicate this line, and I'm going to replace pH h with HY. Also, you need to replace the variable name. Y. Before I set this file, here we need to type console dot Tear method, Console dot par. This method going to clear the unnecessary ride which is print in our console. Before I set this file, I'm going to turn on the console, inspect console. And now I'm going to set this file. After I set this file, if I Her my Carter in this window, here you can see the value. You can see page H value is 254 and page Y value is 357. This is pretty similar to our previous tutorials. We already familiar with that. You might think it pretty similar with client ts and client Y, but there is a different. So I'm going to create another variable. I'm going to duplicate this section, and this time, I'm going to t At first, I'm going to change the variable name, A, and I'm going to type E dot Clieni. Then I'm going to change Y with B, and this time I'm going to type client Y. And also I'm going to print clientis and ClenYVu in my Console. So I'm going to duplicate this two line. And I'm going to replace page with client. Clients V, also client IV. And now I'm going to duplicate this whole section, and I'm going to replace Pasegs with clients. Client takes values. Also, we need to replace the variable, A, and clientY values, and we need to replace Y with B. After set this file, if I hover my cars on this window, you can see the result. You can see client takes value and Page value is still sin. Also, pageY value and client toy value still sin. But what? If I add some paragraph. So inside the body tag, I'm going to use P tag paragraph. And then I'm going to tie LM, and I'm going to add 1,000 word. And I'm going to set this file. After I set this file, as you can see in my document, there is a scroll word at the right side. After set this file, if I over my cars at any point, suppose this point, you can see pageY value is 275 and client y value is 275. But what? If I scroll down my page, then what? So I'm going to scroll down my page. After scroll down this page, as you can see, now page Y value become 1016, but the client toy value still remains same 275. That's the difference between these two property, client toy and clientics. Client toy propriety, otherwise, clientes property work on window area, but page I property, otherwise, page x property work on documentaria. That's the basic difference between these two properties. Basically, it returned the Carsa height according to content size, but it returned the carsar 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. So if I add a deep element, smotype DV, and I'm going to assign N ID, ID equal to box. And if I style this DV element, so let's back to the style section. Up at title, I'm going to type style. Is this style tag, first, I'm going to target this box using its ID name has tag, box. Then I said the liv says, at first, I'm going to assign with 900 pixel. Height, height, 100 pixel. And also, I'm going to say it a background color. Background red. If I set this file, here you can see, now it provide a horizontal scrollbar. And if I over my cursor at that position, you can see, now our value is 86. Also our client value is 86. 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 clientex value is 97. Because as I told you, clientexPpriety measured the distance from the browser border, but page x propriety measured the distance from the content starting position. That's why it's print different to. I hope now this concept is clear for you. So thanks for watching this video. Stay tuned for our next tutorial. 44. JavaScript screenX & screenY Tutorial: Hello, guys. Good to see you. Once again, I'm back with a new tutorial related Java sweep. And in this tutorial, we are going to learn about two new property related Java Sweep. 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. And in this browser, you can see a cursor pointer. And now I want to extract the mouse cursor coordinate. I want to extract the XX point and YXS point of this mouse Karsel. But this time we are going to measure the distance from the screen border area, not the browser age. For that, Java Strip introduced two property screenX and screen Y. In our previous tutorial, we already learn about similar properties, but these properties are measure the distance from the browser H. We already learn about clients and client Y property, but the difference is clients and client Y property work on viewpot area. It's going to measure the distance from the viewpot border. It's only work on browser viewpot area, but screenx and screen Y property work on monitor resolution. It is work on exact screen resolution. And 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 cursor position according to the screen border area. So let's jump into the visual studio code editor. So as you can see, side by side, I opened my Visual Studio code editor and my browser using live server extension, and I opened my previous TML document named index dot html. In our previous tutorial, we'll learn about pageX and page WI propriety. Also, we learn about client ticks and client Di propriety. And now I want to extract my cursor distance according to the screen size. I want to say I want to extract the XX value of my cursor according to this point, this screen size. From the lip side, I want to measure the cursor point. So first, I'm going to remove the unnecessary lines, and I'm going to replace pageX property with screen screen X. Also, I'm going to remove this line and Hemotype screen x value is and you're going to print 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 I set this file, when I open my cars are in my screen, here, you can see the result. Now you can see screenX value is 1357. It's been 1357 pixel. And if I move it at the right corner, right side, now our screen ex Vo is 1918 because our screen resolution is 1920 5,080, and it prints screeng Wow nearly 1920. And if I remove my casa outside the browser, now it's not going to work. It's work on only the browser window area. It measured the distance when I move my cursar inside the viewport area. At the same way, we can extract YXs W we need to duplicate this line, and we need to replace variable N X with Y, and here 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 I set this file, if I open my cars are at that position, here you can see the Y screen value from the top side. Here you can see YX 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. Stay tuned for the next tutorial. 45. JavaScript offsetX & offsetY 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 are going to learn about two new JavaScript propriety. Oset eggs and Oset Y. So as you can see in this example, we have a browser window, and inside this browser window, we create 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 resolution. For that, Javastrep introduced two new property Oset eggs and Oset Y. We already learned about similar properties in our previous tutorial. Client text and client toy also screen x and screen y. Clienex and clienyPbit provide the value according to the browser window size. I want to say it's going to measure the distance from the browser access point, and screenx and screenyPbit 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 event 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 Xxs and YXs using Oset X propriety and Oset Y propriety. So as you can see, side by side, I open my Visual Studio code editor and my browser using Lifesaver extension, and I already created a stable document, named index dot atb. 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. Here we say with 500 pixel and height 400 pixel. Also, I said 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 name is target. Target equal to, I want to target this bog steep. So here, I'm going to use qui selectra method. Documin dot i selector. Then inside the rounds, inside the double course, otherwise, single course, I'm going to type dot box. We are going to select this D element using its class name. Then semicolon do in this line. And now I'm going to add an event to this target variable. For that, I'm going to type target dot. I'm going to use a method name add event listener, add event listener. Then inside the round presses, our event name is mouse name. Coma, and here I'm going to call the novos function. And in this function, I'm going to pass a variable. As a short form, I'm going to use P. And now I'm going to create two variable, which going to store our xx zero and XS. So I'm going to create and our variable n is X. X equal to first, I want to get the xx zero type Et opposite X. Then semicon into this line. Then I'm going to duplicate this line, and this time, I'm going to replace X with Y. And this time, I want to store Y X value. So here I'm type Oset Y. And now after I stored the value, I want to print both the value in my console. Console, dot, log inside the round presses inside the single code. First, I'm going to print Osete H. Oset values colon, Cgation sine, and I'm going to pass the variable X and semicolon 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 semigon to end this line. 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 I set this file, if I hober my cursor on this deep element, here you can see the value. Oops, I forgot something. We need to clear our CSO section. Otherwise, it's going to print all the values at once. So here type console dot Tear Method. It's going to clean our unnecessary lines. After step this file, if I open my cars on this deep element, here, you can see the opposite x value and oste Y value. Oppste X value is 230 and Oppste Y value is 219. If I move my cards are at the laptop corner, up move my cards are at the laptop corner, as you can see, now it trained Oset X two and Osete Y also too. So this is how this properties are work in JavaScript. I hope now it's clear for you what is the usage of it. Thanks for watching this video. Stay tuned for the next tutorial.