JavaScript Complete Beginners Course For Web Development

1. Introduction to the Course: That you want to take web development to next level. And you take some Java is script courses and tutorials. And don't you confident to code? Then Java Script complete beginners course for web development is perfect for you. This is the most comprehensive and best course I ever built. Java is nowadays one of the most demanding language art. There are lot of materials available on Java script, but a lot of them are outdated and not complete it. It is the most completed last course on JavaScript on a skin shear, which take you all the way from beginner to the junior level development discourse divided into different section. At plus b, you will learn the introduction to the course. Then you will learn the fundamental to the java script. Then you will learn operators in the java script. Then you will learn the built-in methods in the JavaScript. After this, you will learn the control flow or decision-making in the java script. After learning the control flow and decision-making, you will move the, the Java script even. Then you will learn that loops in the JavaScript than you will learn the arrays in the java script. After completing the ad, you will move to the functions in the Java script and you will also learn beyond the basics in the Java split after learning these Al section and built your concept. So we will move to the java is script Document Object Model, African material, the dom, we will move to the Java Script Object Oriented Programming. After completing the object-oriented programming, you will move to the advanced Java Script section. After completing it, advanced Java Script section, we will move to the java script at my script six bridges, ES6. At last, we will learn the generator and it was iterations and much more. This course come up with 12 hours of video lectures, downloadable resources, real-world examples, friendly and fast way of teaching, assignments and quizzes and lot of coding challenges. If you are a complete Java is bigger and there will be definitely be something for you in this course. So if you want to become a web developer, don't waste your time enrolling in the course and get started. I'm very excited to have you onboard. So what are you waiting for? Enroll and make a first step to web development. 2. Coding Editors: Hey guys, welcome to this lecture. In this lecture, we are going to talking about that, how you can set up your environment for the web development. You set upping your environment for the web development, there is a software use which is a dream v were Dreamweaver is a software which is prosperity of web development tools from Adobe IMC. And it was created by macro media in 1997 and developed by them until macro media was acquired by Adobe system in 2005. Adobe Dreamweaver is available on Mac operating systems and Windows operating systems as well. Remember that Adobe Dreamweaver is a software which is not free. You have to pay for it if you are looking for the free software. So you have to run brackets. Brackets is the software which is also developed by Adobe, but it is an open source editor with are primarily focused on the web development helps you get that. Here in this lecture, we are using the Adobe Dreamweaver. If you want to download the free versions of bracket here, you just simply click on this bracket and downloaded from here. Here you can see that you have to simply click on buy now or simply download the free trial version of Adobe Dreamweaver. So I already have the version of this Adobe Dreamweaver. So here you can see that I have 019 version of Adobe Dreamweaver hair procedure of installation of Dreamweaver is very simple. You just simply click on Install. Then you have to find the directory option where you can set your directory for the software. And here you can see that this is our directory location. You set your language hair and simply click on continue. And here you can see that you are installation is proceeding right here. After finishing the installation, you have to find the finish button and simply click on Finish and your software will be installed. This is how you can set up your Adobe Dreamweaver. If you find any of the problem right here in this lecture, please let me know and thanks for watching this lecture. 3. Front End and Back End Development: Hey guys, you are warm. Welcome to this lecture. And in this lecture we are going to talking about front-end and back-end development. And I will tell you the difference between the front and back-end development. You open a new browser tab, type in a URL and press the Enter, the site's load instantly and it nearly take your breath away with it's ultimately layout and well-constructed pages and impress you. Visuals, front-end and back-end are two of the most used terms in the computer industry. In a way, they become worse. They dictate the type of job you do as a software developer and the technologies you use and how much you get paid. So let's talk about the difference between these two terms. Bay, they exist in the first place, and the different paths you can take in your software development career. Before starting the front and the back end development, we just need to understand that what is the site rendering. To begin this journey, we need to understand the concept of sight rendering, enlightenment's term, the site rendering means generating or rendering the HTML output. Html is a markup language that web developers use to create the web pages. It's sad that the site rendering can happens both ad server side or client side level. So what does this means? It's worth nothing that front end, the client sides are synonyms. The same is true for the backend end, the server side. Firstly, we are going to talking about the server-side rendering, which means that a back-end development, not till two long ago, server-side renderings or a back-end development was the de facto way to create the website and web applications. You visit a page, send a request for the content and the server processes this request and create a response that is sends back to the browser when aside renders server-side all the processes involved in creating an HTML page that you are web browser can understand and handle on a remote server hosting the website or web application. This includes curing database for informations and processing any logic that you are Web applications requires while the remote server is busy at work, your web browser is ideally waiting for the server to finish the processing that request and send a response. When the response is received. Web browser interprets it and display the content on the screen. Now we talking about the client-side rendering, which is a front end development. In more modern days, a new form of sight rending emerged. Card client-side rendering or the front and development with client side rendering, the rendering of the content happens to your computer instead of the remote web servers using the de facto language of the web, which is JavaScript. In partial terms, it's means that a server is only needed to serve the raw web applications and the browser will be in charge of rendering this applications in its final form, HTML. It's also means that some of the logics involved in creating the webpage is especially the one in charging of dealing with how things are presented to the users on the screen, which is car presentations logic, which are handled on the server side. Client-side renderings become popular with the advent of java script libraries such as Angular, React, and BU. Let's say you decide to start a business of your shop and let suppose this is the Bakery or a tailor shop. You need a professional website to present your company or to your customers and tell them where you are located. Maybe you will include a few photos and some information about your products. I'll you need our front end technologies to build your website. Now that we understand the different type of site rendering methods, it is easier to understand that front end development is the art of creating the site and web applications that render on client side. The technologies used for the front end developments are, while there are many different type of technologies and is tax, most front end developer use HTMLs, CSS, and JavaScript that defect or building blocks of the web. And the client side frameworks such as Angular, React is tensile and view. Not everything's happens to the front end. Through client-side renders. Application is still rely on the services and APIs that run on the backend, remote servers or the cloud. What are the some front and jobs? Firstly, VC designer, a web designer, you guessed it, are designing of the website. The job title of the web designer is a pretty broad through a web designer or just someone who designed the sites in a program, like Photoshop or fireworks, and never touch the code. But in other locations are web designer could do all the designs comes in Photoshop and then be responsible for creating all the HTML and CSS in JavaScript to go along with it. Then we how the user interface designer, which is a UI designer. This is basically a visual designer and it's generally focused on the designs. They are not usually involved in implementing of the design, but they might know a light HTML and CSS so they can communicate their ideas more effectively to front end development. Then we have the UX designer, which is a user experience designer. So the UX designers work in a front end, which is studying and researching how people use the site. And then they make changes through a lot of testings. Then we held a front end developer, also called front end developers. They can create a side without any back end development side they would create without a web developer or using the backhand. It is a static website. I static side is something like ice side of restaurants or a hair salon. It does not require any information to be stored in a database. The page will almost always stay the same unless it's time for a redesigning. A front end developer may be required to Hell a grip on the testing as well as B, well, worst in HTML, CSS, and JavaScript, this person may or may not have the experience with creating the design in design program. A different version of this title is a front end engineer. People who worked with aspecific front and languages like Java script are also consider as the front end developer. So this is the lecture today. Hopefully you understand now, if you not understand any of the point here in this lecture that what is the difference between the front end and the backend development? So please let me know and thanks for watching this lecture. 4. Hello world basic Syntax Program JavaScript: Hey guys, welcome to this first coding lecture on the Java script. In this lecture, I'm going to tell you about that, how you can create a basic syntax program in a Java script. But before starting this program, we just need to understand that what is the difference between the HTML and JavaScript and how HTML interact with the JavaScript. Html, which is does not have any Smarts. Which means that the HTML, how not much smarts intelligence, which means that if you are doing the mass operation, so in HTML, this is not possible. In HTML, you cannot figure out if someone has correctly fill out the form or not. And it cannot make decisions based on how of web visitor interact with it. Basically HTML let people read the texts, look at the picture, watch the videos, and click the links to move to another web pages. This is the actual task of HTML in order to add intelligence to your webpages so they can respond to your site visitor. At that purpose, you need JavaScript. Javascript let a webpage that react or wrecked intelligently with it. You can create a smarter web forms that let visitors know Venn Day, hell, forget and to include the necessary information, which means that you can make elements appear or disappear. How like HTML was designed to add interactivity to HTML webpages, which means that you can interactivity to the HTML and JavaScript together. Java script, remember, that is a scripting language and html is a hypertext markup language is script, or scripting language is lightweight programming language. Remembered that java is, is usually embedded directly into the HTML forms. Now here you can see that I will tell you that how you can create a JavaScript and the HTML together. This is our first lecture, and I will tell you that how you can create a basic syntax program. Basic syntax. Or you may say that a helloworld program is a classic and time honored tradition in the computer programming. It is assort and complete first program for the beginner. And it is a good way to make sure your environment is probably or your environment is properly configured or not. Here you can see that I'm just creating a new file. You can create a new file with this link as well. Or you can simply create a new from here, or you simply write control or n. Here. You can see that this is the file, and I'll just write that this is the basic syntax file. This is my first basic syntax file, what I'm just creating with an HTML. You can see that if you are working with a dreamy, We're, so this will be shown to you like this. Or if you are working with a notepad or Notepad Plus, Plus. So you have to go to the new and you can create a new file right here. And when you are just saving the file, like control and.s. So you have to find this box like that. Here you can see that you just simply write like HTML or you can have basic San text dot html, or you just simply write a Java script. So HTML and the java script here are the extension of your programming language if you are writing the HTML here. So this means that this is the extension of the HTML programming language. If you are writing the JavaScripts with This means, that means, that means that this is extension of the JavaScript. Or if you are working with Python, so you have to write PY or if you are writing g o. So this means that this is a goal programming language. You're simply write safe. So you are file here is created with JavaScript. You can see that here we don't need Notepad or Notepad Plus, Plus right here because we are using our very best editor right here, which is a dreamy world. Now here you can see that the two is, I'm just showing this to you guys that how we can create our first JavaScript program. Firstly, we how to write HTML files right here, you can see that. And another one is, I'm just creating a new file right here, which mean which is the name here is you can see that I just write basic sent texts dot java script. Okay? So I'm just editing these two and we'll show you here. You can see that fastest step right here when you are just creating a Java script. So there is our tag using for that purpose, which is the script tag when you are just writing the Java script code. So this tag is needed right here, which is the script tags. So you can code your JavaScript between these tags. Javascript can be implemented using JavaScript statement that is placed within a script tag. So this script here is, you can see that this is an HTML tag right here. And you just write JavaScript code right here. Okay? Now here you can see that inside that when you are just writing your JavaScript code right here. So you need to write language right here. So I'm just selecting the language from that. So I just select Java script right here. So what is the language? The language attribute specifies? What is scripting language you are using. Like typically we are using right here, which is the Java Script. Or they are some scripting language which are like the typical programming language here is HT, XHTML. So this is just a scripting language right here. Okay, So for that I just pronounce that as a programming language. Okay? Now here you can see that we have the scripting language right here, which is the Java script. Now after that, here I just set the type of it. So inside the type you just simply write text slash JavaScript. What is a type? So this attribute is what is now recommended to include or indicate the scripting language in use. And it value should be set like text slash JavaScript, which means that we are using the text file of JavaScript right here. This is how you can create your Java Script tag. After this, you can see here that we are going to create our first program right here, which is like document. Sorry for that here you can see that this is document.write, right? So this document dot write means that menu are just getting a output here or when you're just getting some of the value right here. So you can write inside this document dot write. This is a method using a JavaScript. When you are working with us C plus plus, there is a method using which is C out when you are using Python. So there is a method using which is like print matter to getting the user output right here. Same is the case like inside this java script. This document.write method is using to getting the output right here. Now as you can see, our code for helloworld is computer right here. Now I just go to the file and just go to the browser, opening into the browser, Google Chrome. And as you can see, this is a helloworld program where we are just writing here. So this is our output right here. One ended delta-V, that how you can get your Java is clipped output. For that purpose, we need Java Script console.log method. Here you can see that I just use this math right here, which is console dot log. In this mattered VR, print the same string that you want to print the shallower. Or if you want to print any of the tin right here, let suppose here I just write that v are learning Java. These two are this string here, which is the hello world, and we are learning the Java. So here we are using the console dot log method. They just see that here. I just go to the browser, refresh this. You can see here we didn't find any of the output right here. So I just go to the inspect more heritage to go to the console. And you can see here that, yes, we didn't find any of the output right here. Let's just go back right here. And here we can see that yes, Fie, ms, semi-colon right here. So I just save this program, refresh this. So you can see here, we are learning the JavaScript right here. This is one another way that how you can get your output in the JavaScript. Let's just go to the java script file. Here I just go to the Dreamweaver then file. And here you can see that I just open Java Script basic syntax file right here. Here you can see that I just write document dot write file. And inside this I, I'm just writing that high VR learning Java Script. Okay? And here it is, right? Hello, I am instructor. Okay. Now you can see that how I'm just linking this JavaScript file with the HTML. And I just get this output right here. I just go to the SML right here, and here I just write source. So SRC means that a source of your file. So here you would provide the source of your file, that V8 source file you are linking with your HTML. This is how a java script interact with HTML. Here you can see that I just write that this is basic sent x-dot JavaScript file. I just saved this file right here. I just go to the browser. So you can see here. And I just refresh this. So you can see here that high VR learning JavaScript and Hello, I am your instructor. So I just link this JavaScript file and this XML file together. So this is one other way that you can write your java script file or JavaScript code into the JavaScript and you simply link your file with your HTML and get the output. Hopefully you understand now that hall V can write our first program in the JavaScript, any of the point you not understand right here, please let me know and you can ask any question. Thanks for watching. See you in next lecture. 5. Javascript Comments & Statements: Hey guys, welcome to this lecture. In this lecture, I'm going to show you the java script is statement and comments. In this lecture, you will learn that what are the statement in the Java script and how we write the comments to that statement. First of all, I will show you the grammar of the JavaScript. What is the grammar of the JavaScript? The grammar of the JavaScript means that when you are writing the estate. So when you are learning a programming language. So programming language is a lot like learning a new language. Which means that if you want to learn Spanish or French, so you need to learn the new words and the pronunciations of it. As well as you are going to the master a new set of rules. And just as you need to learn the grammar of French and the Spanish programming language. And you will learn that how to speak. You must become familiar with the grammar of the JavaScript to program Java script. In this lecture, we will cover that concept. How you can write and how you can set the comments on that, and what are the commerce. If you already have the experience on the java script programming. So many of these concept may be old to you, which means that you might just as Kansas lecture. But if you are new to the Java Script or you are still not sure about the fundamental of java script. So this lecture is very much important for you. Before starting the java script statement, we just need to understand that what is this statement? A JavaScript statement is a basic programming unit, usually which is representing a is tap in the JavaScript program. Think off I statement as the sentence. As like other languages like Spanish, English, or French, seems a case like I am just writing some of the word like, I'm happy. So this is just a sentence. So in JavaScript, as you see in the last lecture that we are writing, a single line is taken here, which is document dot right, which is printing the string right here, which is Hello World. This is car, the statement here. You can see that I just said this into the script tag and I just paste it right here. So this is a single is statements which open into the document.write. And that is print us the message which is slower. In many cases, I statement is a single line of code. And Egypt statements end with a semicolon. You can see that like a period at the end of the sentence, the semi-colons make it clear that the step is covered and that the JavaScript interpreter should move on the next election. This is actually card, this statement. Now let us come to the comments. What are the comments? The comments in any programming language, which are very important, because as you can see that we are running the basic syntax program right here. If you are working with a complex applications. So there the comments are very important because if you are writing for P 1000 lines of code and after one year, you didn't understand even you are Encore that what line is actually doing. Working. For that purpose, VR writing the comment. To create a single line comment in JavaScript, you place two slashes with it. You can see that here you can see that this is statements changes color, which means that I just comment this statement right here. You can see that I just write these two slashes in the front of the core or the TextView wishes to comment into the JavaScript interpreter, or you want to ignore. When you are placing these two slashes, all the texts to the right side will be ignored until the next line. You can see here I just go to the next line. And here I just write that this is document and document dot write. Okay? And here I just based a string like hello world. So you can see here this is statement is taking, but here I just simply create this statement as the comment, only a single line right here. Now, I know that a question into your mind that this is a single line comment, how we can write a multiple lengths command. Like I just wanted to comment this statement. And this is treatment as for that purpose, you need one slash. Then is Tarik, then is Tarik sign here and then close right here. Let's just see how here you can see that I just write slash. Here, I just write hysteric. Then you can see here, I just didn't closest Herik right here. You can see here, if I just write thousands of lines here, and I just didn't close this comment right here. So this will be commend all the code to closing this, I just simply create hysteric again and then close this slash right here. Here you can see that I just copy. And here I just be, as you can see here, I just start this from a new line, and this is our card, a multi-line comments. You can see here, this is inside these multi-line comments. Hopefully you understand now, now you can see that I just comment, I statement right here. Let suppose this is double backslash and I just write that this code is for understanding. So you can see here, I just comment, this is statement, I just remove this. You can see here. And you can see that this is for a better understanding of my code, that this is the score is for understanding. So you can see here, I just write that double backslash is right here. This is document dot. Write this statement. Ok. Hopefully you understand now that how this comments work and how this comments are important in our programming language or any of the programming language helps you understand now. So if you find any of the problem regarding to this lecture, please let me know and thanks for watching this lecture. 6. What are the Variables and How we Use Them: Hey guys, welcome to this lecture. In this lecture, I will show you that what are the variables and how we use them. In programming language, a variable is a value that can be changed, which is depending on the conditions are on the information which is passed to a program. Typically, a program consists of instruction remote that that tells the computer what to do and the data that the program uses when it's running. The data consist of constants and fixed value that never changed, and a variable value which are usually initialized to the 0. And the variable value can be changed. Here. Let suppose V while the value a. And somebody tells you that at this value into this box. So here you can see that I just add this a into that box, or I just write this a into the whiteboard. Okay? You can see here, this takes some of the space on this white board right here. Which means that the variable takes some of the memory allocations and take some of the SPS right here, which is changeable. At other stage, someone tell you that remove this a from this whiteboard and on the place of a, you just ride b, so you just simply write b as well. So B also takes some of the memory space up. So you understand now and your concept about the variables are clear. The variables are used to store informations to be referenced and manipulate in a computer program. They also provide a way of labeling data with our descriptive name. Or our programs can be understood more clearly by the reading and out cells. It is useful. It is useful to think of variables as containers that hold information. As you can see, that this whiteboard hold some of the information which is a and B. Their sole purpose is to label and store the data in memory. This data can be this data can then be used to out our program. I will tell you that how you can assigning the value to the variable. Let us see that vehicle variable a and you just assign the value of this E. Let's suppose 0 for assigning. So you just write is equal to sign here. Naming variable is known as one of the most difficult task in the computer. Programming. When you are naming the variables, think hard about the names. Try your best to make sure that the name, as you assign your variable is. Means that accurately describe two and understandable to another reader. Sometimes that other reader is yourself when you like, reversed a program that you wrote months or even a year earlier. So at that purpose, the variables or the names of the variables take very important role. Let's suppose if you are writing a program where you just ride or weird, you just take the interior of the student. So at that purpose, you just write firstname as the variable. So as you can see that this first_name, which is equal to 0, or firstname ij is equal to 0 right here, which is very much understanding for you. If you are watching your court even after an year. Hopefully you understand all this is just our guideline. Now, I will tell you that how you can create a Java Script variable. Here you can see I just write a script tag, okay? And I'll just close this script tag right here. Okay? This is just an a script tag, as you know, when you are just working with JavaScript. Here this is a header section, so I'm just coming into the body. Okay, now here you can see that I just write a script. Inside this script, I just write v. As you know, that VR is a keyword to creating the variable into the JavaScript. Here I slide VaR. Then here I just write that E and E, which is equal to I, just write ten. And you have to close with a semicolon. So here, the variable a, which is equal to tens, means that I just assign the value of a. I just create a variable a, and I just assign the value to it, which is ten. Then here you can see that I just tried variable B, which is equal to here. I just write that this is 15. And I just close this code right here. Now you can see that I just tried variable c and c, which is equal to a plus b right here. And I just closest score right here. Here you can see that I just create a logic right here, which is adding the two numbers right here, which is a and b. Ok, now here you can see that I just tried document, document.write. And here I just paused the value of the variable c right here. Hope so you understand now here I am just simply getting the value of the C right here. Let's just go to the browser and here into the Google Chrome. And here you can see that the value of the ten plus 15 here are, here, are 25 here, which means that the value of a which contain, so that variable a contains the value of ten. And variable b. Contain value 15, which means that you have a white board right here. And into the white board, you just allocate some of the space which is ten to the a. And for B, you just allocate 15. And for c, you are showing the result of these two, which are 25. Hope so you understand now, know this is the way that how we are creating the variable in a very small program. This is your beginning of your JavaScript. Now I will tell you about the complex obligation. Or here firstly, I'm distributing this variables right here. So here you can see that I just cleared this logic into the JavaScript file. And here you can see that there I am just writing these files right here. And here you can see that I just write that this is a language, language which is JavaScript. And here you can see that after this here I just write that simply the type, type, which is text or slash java script. And now here I'm striding source. So the source of this variables here are variable dot javascript harems removing this. So you can see here that we are writing this JavaScript code right here. And now I am just showing you the output of that as well into the Google Chrome. And here you can see that same code example right here. Hopefully we understand now that how we can work with a java script file and HTML files together, now come to the point that how we are declaring the variable into the complex obligations. Here you can see that this is a pause restaurants system. Okay? Which is our big application right here, which is made in a PHP, HTML, CSS, JavaScript, JQuery and Bootstrap's. Okay, now here you can see that these are some of the files. You can see that I'm just using the coordinator version right here. So don't worry about that. We are focusing on the JavaScript right here, where every file is separately. Take his place right here. Now here you can see that I just go to the JavaScript files. And here you can see that it go to the polls. And here you can see that this is our entire Java Script folder into that project. And go to the JavaScript. Here I just go to the calculator and run this into the brackets right here, records it's one either IDEO's, you may say that this is an editor right here to writing your web-based code right here. Now here you can see this is a function. Don't worry about that. We will also learn a function's air, and we will also learn the if statement here. Just focus on these variables right here. Here I just create the variable. You can see that here the variable is Calculator. And I'm just initializing some of the values right here, which is running total, running, sorry, the current value set, set current value that execute the action and display. So these all here are our variables of our this calculator door Java Script code. Here, you can see that these variables taking the values right here, which is empty string, empty string, this is a boolean value, empty string, empty string, not worry about that. We'll learn about the data types of the variable in next upcoming lecture. So here just make your variables concept that how we can create the variable. Here, you can see that a question to you guys that how VR creating the variables right here into the complex applications. And you can see here, there instead of is equal to Vr writing the column here, you can see that I'm just creating one variables right here, which is a variable calculator and the calculator which is equal to the sub values or sub variables right here, which is running the total running current values. Set current values, execute the action and display right here. This is how you can see that the only one variable right here, which is the calculator, but here, this is the value to that variables. We are taking these values right here from our GUI based code, which means that when we are cleaning the pore system, so add the calculator sides, VR running the total values, which means that you can get the current values from their current value here is 25. Then you can set the current value into the ordinary. Just click on that 25 right here. Then here you can execute the action. Then here this will display 25 to you guys. And then you can run the total or running the total right here. So this is the coding example of that project, but don't worry about that, just focus on that. So here you can see that inside this complex application, we also create the variables seem as a case like that variable. You can see here this is the variable right here. Then here you can see that the calculator is the variable name and then is equal to sign, and then we are assigning the values to that. All right, here. You can see that to call this calculator right here. You can see that here I just assigned the value ten, but here you can see that I just assigned the value here running current values set, current value executed action and display right here. Hopefully you understand now that how we can create variables, what are the variables into the JavaScript? If you find any of the problem right here in this lecture or any of the plant is just not clear to you guys. Please let me know and you can ask any of the question. Thanks for watching. See you in next lecture. 7. Different Types Of Variables and Data types: Welcome to this lecture. In this lecture we are going to talking about the java is clipped data types and variables. In datatypes. All you deal with are different types of informations everyday. This is useful like yourname, the price of the food, what you buy, the address of your office, and the date of your next birthday. All our information that is important to you. You make decisions about what to do based on this information. Computer programs are no different. They also rely on information to get things done. For example, you are going to calculate the total of your shopping garden scene as a case like our old example where I just calculate the u, where I'm just using the variable calculator, where I just run the different types, where running the total, running the current value, set, the current value, execute x and, and the display. So these are some of the types right here. Let us come to our program right here. Here you can see that computer programs are no difference right here. Okay? Here. You can see that I'm just running the shopping cart. And here you can see that this programs need to know the price and the quantity. Price and quantity of each order to customize a webpage with a visitor name, you just you have to write like Welcome to this page name XYZ. The programs you need to know the name right here. In programming languages usually categorize information into the different types, and they treat Egypt or type in a different way. In JavaScript, there are three most basic type of data, vis our number is trained and Booleans. Firstly, I will tell you that what is the number? The number are used for, counting and calculating. You keep track of the number of the day until the summer vacation. Let suppose here you can see that I just tried 1010 is the number, 20 is a number for diesel, number 100 is a number. So these are the numbers that I am here. I will tell you that how we can initialize our number deterred HIV into the Java script. Here, there are two V's of datatypes, or there are two categories of the datatype. First one is statically datatype, and another one is a dynamic later died. The esthetically deterred types are used in static programming language, but the dynamic data types are used in our dynamic programming language. What are the static programming language? The static static programming languages are C, C plus plus and Java, or C like here we are. We're, I just tried integer and integer here our lake, let's suppose a0, which is equal to ten. This means they're statically typed the integer right here. Same is the case like C, C plus plus and java right here, okay? And when you just declaring the string, so you have to write a string fast and then you have to write b, which is equal to string, which is hello word. Ok. Here, inside java script, the scenes are not like that because the Java script here is the dynamically typed languages where you can write variable. So VR is just a declaring the variable we are inside a which is equal to ten. Which means that by default, this e is taken the value ten as an integer right here, because integer value R1, 2345, or from 0 to number of. Okay? What are the dynamically typed languages? The dynamically typed languages are Ruby, Python, Java, script, etc. Here you can see that I just tried datatype here, which is the integer. Okay? Now after that, I just create variable variable B, which is equal to here I just write, this is a string type variable where I just write hello. So here you can see that this is the another data type here, which are the, sorry, string right here. So what is a string? The string playing a name or a sentence, or a series of letters. So I string is just a series of the correctors VR, you can set the letters and other symbols, like Welcome to our webpage, Hello Word, or any of you are quote marks right here. So this is how a string work. Let's just turn to the Boolean data type and I will tell you that what are the Boolean data types? Boolean data types, whether the numbers and the strings. After most limitless variations. Here you just take only two values right here. Let's suppose variable c, which is equal to, I just said that this value here is true. Or here I just write variable d and d here is, I just write the d here is false. So we are taking only two values right here, which is true or false right here. Seems a case like in our this code right here where I just said that set current value which is false. So this is car, this is the Boolean value right here. Helps you understand now. So this is how the Booleans work. Now you can see that this is our integer type, this is our string type, and these are the Boolean data types. Here you can see that if I just create this variable here is, let's suppose E and E, which is equal to here, I just write 10.5. So by default, JavaScript will take this number here is flawed because 10.5, which means that float right here. So this is a floating point number. These are the some of the data types. What we are used in the Java script helps you understand now, if you find any of the problem regarding to this lecture, please let me know and thanks for watching this lecture. 8. Using Variable Print Message: Welcome to this lecture. In this lecture, I'm going to show you that how you can create a variable and how you can show the message. In the text editor. You can see here, I'm just creating a file with the SML expansion right here, where I just said that heritage right at one tag, which means that this is heading number one, which is a much bigger heading then reading number 234 and up to six heritage, right? I am using variable right here. Okay? Now, after this, you can see that I'm just creating the script tag right here. And inside this script tag, I'm just creating two variables between this script tag. I'm just tried variable number one, which is let suppose I just tell you at the beginning of the program which is first name. You can see that this is a variable. Naming or naming is tendered right here that you are creating the variable like a 123, then you have to write a underscore 1-2-3. You cannot write variable like 1-2-3 or like one underscore. This is a crab wrongly, These two are the correct way of your writing of variables. Okay, now here you can see that I'm just creating the name right here, which is dangerous. Ok, this is the first name of that. And then here you can see that I am disputing the second name right here, or the last name right here, which is last underscore name right here, which is equal to, I just write that this is a dangerous. And, and then he says Smith, Okay? Now here you can see that I just created two variables right here, which is a type of a string. So here you can see that I just created the two variable, which is a firstName is Daniel, and last name here is the smith. So I'm just storing these two is trained values right here. And here, I will tell you that how you can concatenate these values. Now you can see that here. I just write that this is document and document dot Harris, Right? Right. Okay, so this command is just showing you the output of that. And here I just said that ice right? Forced underscore name than Harris, right? Then here I'm just showing you the empty string right here. And after this ice, right, plus and the plus here are lastname. So this is last underscore name right here. What is a plus sign right here? Plus sign here, when you are just using between these two values are between these tags. So this means that this is adding the two values, which means that Daniel Smith right here. And this is empty string. We just showing you a single or which enqueuing, showing you Lei kong. Space between these two texts. This is also carved. This plus value is also called, This is a concatenation. Here you can see that, that this value is tore into the variables and you create here that document.write. Firstly, we will get the firstname value. Then we will get the last name value right here, which is in the document.write command here into this firstname variable. I just store the Daniel's value and into the last name I just store is myth value right here. Let us run this code right here, okay, into this browser. And here you can see that I just go to the browser. Here you can see that firstly, that this score is shown to me, which is H1 tag, I'm using variable. And then these two values, you can see here the Daniel Smith. Hopefully you understand now that how you can run a variable and concatenate two values and print any of the message. Hopefully you understand now, this is a good programming practice that you can work with our good naming of variables. I just write any of the variables like a, B, C, D. But you have to write your own variables like firstName, lastName, like this helps you understand now, if you find any of the problem regarding to this lecture, please let me know. And you can, if you have any of the problem according to my course recording to any of the lecture. So there is an option available to you guys which is post any of the question into your calm. Hopes you understand now. Thanks for watching. See you in next lecture. 9. Javascript Arithmetic Operator: Hey guys, welcome to this lecture. In this lecture we are going to talking about the operators in the JavaScript. An operator in a programming language is a symbol that tells the compiler or interpreter to perform specific mathematical or logical operation, and that is produce a final result. In this lecture, we are focusing on the arithmetic operator in Java script. Before talking to the arithmetic operator, I will tell you the importance of the operator. As you know, at a thematics is skills are a useful thing to have in these days. We use them to determine how much money we will save on purchases to determine if we have enough time to run a quick earned before our bus come. And to do the balanced in our or and to balance our bank at home. The fact is that it is difficult to function without at least random battery. Arithmetic scale means that if you, if you didn't have escaped, you cannot do these kinds of stuff. Cme as a case like in a computer through they are fundamentally logic machines. Programmer can make them perform the numeric operation as well. To do that, they use capability, which is card operator. Now, what is the arithmetic operators and how we use them? And operator is an indicator remembered that, which is a symbol that shows some specific operations need to perform within a computer program. These operators can be arithmetic, logic, and relational. Okay? Now come to the arithmetic operators in Java script and any programming language. There are arithmetic operator where we use plus, minus, multiply, divide, and you have write modulus of the flow or the floor division, okay? Now here V L plus operations, subtraction, multiplication, and division. These are the four major operators in the arithmetic. I will show you the example right here, where you can see that let's suppose x plus y. Ok? X here is, you know, a variable, y here is the variable. Ok. And here you can see that this is the operator, which is, operator is doing the operations between the x and y, which is AD. So let's suppose here we have 1010 plus ten, which is equal to 20. So this is did our addition operation, operation. And then here that will give me the result which is 20 right here. Same is the case like subtraction, multiplication, and division. Let us come to the coding example of these. Here you can see that I have to write script. Script here is, as you know, JavaScript tag. Now here I just create a variable. Variable here is x, which is equal to, I'll just write that the value here is ten. Then here. After this, you can see that x, which is equal to ten. Then here I describe creator variable, which is y and y which is also equal to ten. So these are the two operators right here, sorry, the two variables right here. Let's just check. Here. I just write variable, variable z, which is equal to, I'll just write that X plus Y right here. And you can see here that I just simply write document. And here you can see that I just ride document dot write. And here I have to write that this is just an printing off the zed right here and then closest score. So what I just actually done right here. Here you can see that I just assigned the value ten to the variable x. Value tend to the variable y. Then here I just perform the operations right here, which is addition operator. So this is plus here is addition operator, which is a category of, you can see here the arithmetic operator. Okay? Now here you can see that when I just check the result of that into the browser. So you can see open into the browser right here. So here, ten plus ten, which is equal to 20 right here. This is first operator, which is the adding operator right here. Now you can see here, I just copy this. Paste are right here. Then here it is right that this is multiply k here is x1, y1, and z1, and here is write z1, okay? Cme as a case like I just create for the subtraction right here, where I just write Z2, Z2, Y2, and x2 right here. And we add loss, the division operator right here, which is that three, y three, sorry, x3, y3, z3. And here we held it. There are three as well. Okay, there's just go to the browser, refresh this. You can see here firstly, we held the 20 right here. Then we have the one just because, then we have a 100 right here, just because of ten multiplied by ten, which is equal to a 100 right here. Okay? Then we just perform the minus operator, which is 0. And then at the last V, hell 20 right here. Okay, now let's just see, I am just writing a single end break between them. This is just on BR tag right here. Okay? And you can see that this is the output which is much clear to you right now. Okay? So this is division. Okay? Now here you can see and just refresh this. So here or here, a formal way to write a single end break right here, which is slash n. So I just write slash invaded. So here it's right slash n. Okay? Now I just copy paste, paste, paste right here. See if this code run to the browser. And sorry for that here. The hell. I just tried. Different slash right here. This is backward slash. Ok. So I just write forward flesh idea. Now here I just replace this and go to the browser, refresh this. And you can see here, firstly, we are adding the value. So you can see here, this is the result and value here, which is 20, which means that ten plus ten here is 20. Then here ten multiply by ten, which is written value here is a 100. Then ten minus ten, which is the value here, is, you can see that 0 then here ten divided by ten, which is the value here is one. So here you can see that I described addition operator, multiplication, subtraction, and this is our division operator right here. And these are the category of the arithmetic operators in Java script. Hopefully you understand now that how we can create edit emetic operators in the JavaScript. Hopefully you understand now if you find any of the problem regarding to this lecture, please let me know. And if you have any questions according to this lecture, you can post your question. Thanks for watching. See you in next lecture. 10. Javascript Assignment Operator: Welcome to this lecture. In this lecture we are going to talking about the assignment operator in Java script. And assignment operator is the operator used to assign a new value to a variable or a property event or indexed or element in the JavaScript programming language, assignment operator can also be used for logical operators, such as bit-wise logical operator. Or you ride in with integral or the Boolean operands. Here I just used the word operand. The operand here is let suppose the x and x, which is equal to I just write ten. Ok? Now here, x is my variable and X is also my operand here. So here you can see that this is an operator and this is the value what I just assigned to this operand right here. So this is, you can see here. Here I just write x which is equal to ten. So this is equal to sine is taking the place of the assignment operator right here, which means that I just assign the value to this variable x right here. Now, I just run our example on that where I just used some of the arithmetic operator and then I just used the Simons operator as well. Let's, let's see, I'm distributing a variable. Variable here is let suppose x, which is equal to right hand. Okay? Then here I just write that this is a value of x, which is ten. And then here it is, right, that a value of total which is equal to, I, just write the total here is 20. Ok? Now here eyes right document dot, right. And then here I have write that value of total. And the total which is equal to here, I write that and then here I just write plus operator. So I will not tell you about this plus operator right here. And then I will tell you about this plus operator next upcoming lecture. Now here. I will write the value here, which is total, okay? And the total here is my variable right here. And then total, which is plus, is equal to ice, right? X. Okay? Now, just check the logic right here. Now here I just write plus, plus here is I have to write that BR tag. We're just close this BR tag right here and then close this statement. Now. Now here where I just use assignment operator when I just defining the value to this variable, which is x is equal to ten. So here you can see that that is equal to sine t police of the assignment operator right here. Okay? Now here you can see there are managers getting the user output right here. We're just first derive the string value of the total right here. And then here I just write plus operators. So I will not tell you about that plus operator, that what is a plus operator right here? I will tell you about that in our next upcoming lecture. So here you can see that after this, I will just get the value of this variable total right here. Then here you can see that I just write plus is equal to I just assigned the value of this total right here, which is x. And then here a simple single line break right here. Here you can see that I just use plus operator. So this means that this is the addition operator, which means that ten plus total, which is 20, is equal to the value here, is 30 right here. Okay? Let's just check. So firstly, I'm just checking the output for this and then we will move forward. Here. I just write browser, then run here you can see that ten plus 20 is 30. So as you can see that this is variable total, which means that this is operand right here. Then here just use operator for addition plus, which is equal to which means that I just assign this total value two x and I just add this value as well. So this is one another way to adding your values. So don't confuse it right here. Let's just run it again. So you can see here I just write minus here. Then here I just tried divide as well. Then here I described the multiply as well right here, okay? Or you can take the modulus of this value right here, which is percentage sign. Go to the browser, refresh this, and here you can see firstly, additional value. Then here you can see that this is the subtraction right here. Then here you can see that this is a division. Then this is, you can see here that this is the multiplication right here, and then add the last. We are going to write the modulus right here. Okay? This is how you can assign or this is how you can use the assignment operator. So you can see here, this is only a Z equal to sign, which is equal to, sorry, which is used for assignment operator. Here I will tell you one other thing because you are very beginner to the JavaScript right here and now you can see that only one is equal to sine when you are just using between your values right here like this, x and y. So it will mean that x is assigning, or sorry, the y is assigning to the variable x right here. I just make it simple right here, which is x, which is equal to ten. So this means that penny is assigning to this X right here. If you are writing x, which is equal, equal to ten. So this means that you are comparing xn tn right here, which means I let suppose I decide x which is equal, equal to y. So this here, this W is equal to signs means that you are comparing the value between x and y right here. We will also learn about that in next upcoming lectures. Hopefully you understand now that this is just an assignment operators in the java script, which is just for assigning the value. If you find any problem regarding to this lecture, please let me know and thanks for watching this lecture. 11. Javascript String Operators: Hey guys, welcome to this lecture. In this lecture we are going to talking about the string operators in the java script is strings are concatenated beyond the plus operator. This can work. The other operand, two I string, if one of the operand is a string, how legacy? Here you can see that. I just tell you in the last lecture that I will explain this plus operator. This means that this is the concatenation. Kenneth getting ations means that when you are just adding plus sign between the two operators there, suppose e plus b. So here you can see that you are adding the two values. But if you are simply writing this with the help of these two strings right here. So this means that you are concatenating this string right here. Okay? Now, here you can see that this plus sign is doing the cutting ation right here. Blood. This plus n is equal to sine, is doing concatenation and assignment right here. We're the upper end, total and the X right here. It has come to the example right here. And we will study about that. I just tried to variable, variables that are suppose STR, which is equal to erase, write hello. And then I just closest core. Then here is red Variable STR two, which is equal to word. Ok. Now it's close this right here. No, I strike document. Document here is document.write. And then here you can see that I just write SUR one plus I'll just write SDR. There. You can see that I just use the concatenation operator to add two strings together. See if this run this course. So you can see here this is HelloWorld. So you can see here I just adding the two is strings right here. So this means that this is a string operator. You can also do right here. You can see that I just write that here. Str one pluss is equal to SDR to, okay, here I just closes. And you can see here I had to write that document.write. And then here we'll print the value of string number one. The browser refresh this. So you can see here this is also an shallower right here, just because of you can see here. Here I just do a concatenation. And here I just do concatenation. And is Simon opera where I just provide or we are just fixed the string number one value to this string and what we're Hello and words together. And here you can see that I just said two values, Office string. So this is just an E string operator in the java script if you find any of the problem and if you do not understand the planet right here, so you can post your question. Thanks for watching. See you in next lecture. 12. Incrementing and Decrementing Operators: Hey guys, welcome to this lecture. In this lecture we are going to talking about the increment and decrement operator in JavaScript. What is the increment operator? Increment operator is means that when you are adding one value with the existing value, this means that you have the value like one. So when you are just adding the increment operator with one right here, which is n plus sign. So this sign is meaning that this is an increment operator. Okay, here, before this increment and decrement operator, I will tell you the type of it when you're just writing plus and plus after this value. This means that this is a post increment operator. Okay? And when you are just writing plus n plus one, so this means that this is a pre-increment operator. So pre-increment operator is let suppose this is plus N plus one. So here, one is adding one value with it, and that will return the value like two right here. And seen as a case like this postfix increment operator, which is one plus one, which is equal to two. Okay? When you are just adding, let suppose the increment operator with your value. So this means that this value will be equal to two right here, because this increment operator will add one another value with one. So this is the resultant value here is two. This is just an increment operator. Okay? Now here you can see that firstly, I will implement this increment operator right here. So you can see here I just write a script tag. Now here variable. And let suppose here inside variable x, okay? Now here I'm just declaring the variable right here. And now here you can see that x, which is equal to, here, I just write the value ten. Or here you can see that x, which is for us, ok, x which is equal to ten. Okay? Now here offer this. I just write that this is the document. And here I decide document.write. Ok. And here you can see that here I had described that this is x and x plus plus. So this is our post increment right here, okay? And seen as a case like that. So here you can see that I had right, that this is just n variable. And now you can see here that I am just writing pre-increment operator right here. Okay? Or here I have to remove this and copy this for your better understanding right here, which is here. Suppose the value here is ten and copy and paste it right here and then closes. Okay? And here you can see that I have to write plus, plus sign closest code. And you can see here. Okay, let's just check the output for this into the browser. So you can see here that firstly we have the value which is ten. And after increment operator, we print the value here is a lemon because ten plus one which is equal to 11. So this increment operator mean that you are adding one value with your operator. Now here let us turn to the decrement operator. The decrement operator when you are just using the minus sign with your variables for this means that this will decrease one value from your operator. Let's suppose you have the value which is ten. So this decrement operator means that you are resulting value here will be nine right here. Okay, let's just check copy. And here you can see that I have to be is this core. And here you can see, so this is just decrement operator and seen as a case like here. This is our predicament operator and this is the post decrement operator right here. Now here you can see that I just run this course. You can see here this is nine and this is ten. Is it just because of hair? You can see that I have to print the value of the X right here. Okay? Now here you can see that this is just a 99 right here. Okay? So you can see here the difference between the increment and decrement operator and the difference between pre-increment and post-increment. How? Let's just see. Firstly, you can see that this is our post decrement operator. Let's just check the output for this. So you can see here frosty, that will tenant then 11. So I will tell you the logic of the post decrement operator. When you're just writing the pre decrement operator or pre-increment operator right here. So this means that when you're just getting the output of this, so this will be, let suppose you are, the expert would be ten. So in the output, your resulting value would be 11. But when you are writing the post increment operator right here, so this is plus N plus right here, which is equal to at firstly, that will give you the result and value here is ten. And then after this, when you are just getting the value of that, so that will be given to you in the next iteration. So this means that this is a post increment operator, CME as a case light decrement. So this is the logic of the increment and decrement operator in the java script. If you find any of the problem regarding with this lecture, please let me know and thanks for watching this lecture. 13. Javascript Logical Operators: Hey guys, welcome to this lecture. And in this lecture we are going to talk about the logical expressions or logical operator. The logical operator where we studied about AND OR and NOT, which perform Boolean algebra and are often used in conjunction with the relational operators to combine two relational expressions into one more complex expression. We will discuss one by one in this lecture about logical AND logical OR, and logical node. In order to fully understand these types of operator, you may want to review the concept on the Boolean expressions where we studied about the true and the false. A Boolean value which represent true or false. Or you may say on and off and yes-or-no. There are only two possible values of this type. The reverse war are true and false. To evaluate two, these two values. Let's suppose if we have a which is equal, equal to four, okay? Now here we have the two state. If a which is equal to four, then this value will be true. If a which is equal to five, then our, this value will be false right here. So this is just an boolean value where we have only two states which are true and false on and off. And the another state here is yes or no. Hope so you understand now. Now let us come to the first logical expression, which is N. The logical end can be understood at three different level. At the simplest level, when we use the Boolean operands like n, VSB perform the boolean and operator on two values. It returns true if, if only like first operand and the second operands are true, which means that like first operand a and second operand B. Ok, so these both are true. So our output will be true right here. Hope so you understand now. So the and operator is used when the condition must be satisfied. Hopefully you understand now let's suppose X, which is greater than six, and we are using n sine right here. And I just write y, which is equal to five. So this means that x should be greater than five and y must be equal to the condition five. So here this condition becomes true. And third example here is like if we are writing the both operands are non-zero, then the condition becomes true in an operator. Let's suppose a here I just write and sign, and then here I just write b. So now this operator will be true right here. Okay? Hopefully you understand now. Now we just come to the example of that. So here I just write variable and variable a, which is equal to here I try to, okay? And then here I just write that variable and variable B, which is equal to false. Hopefully you understand now. Now here I just write if variable and variable c, which is equal to here, I just write that this is a single membrane. I just wanted to give a single a2 that, okay. Now here you can see. Now firstly, we are taking the two statements right here. I'm just writing the single and bridges because of VR Just to creating the OR and the NOT operator as well in the same core. Now here you can see that I just ride that a document. And here just write, document.write. And then here you can see that I have to write that firstly, sorry, and firstly I have to write that the value of a, and here I just use the value of p. Ok? Now you can see this is just an output statement, and here I am just writing the logic right here. Let's suppose our result here is equal to, I. Just write that a and E here is the enzyme which is equal to b. Okay? And so for them this is a dollar sign and I have to write and sign with that. Okay? Let's just check that our if true is true and b here is false. So what will be our output right here? And here, I have to write that document.write and document.write here we'll print the result. Okay? So that will print the result of this expression right here, which is the logical N. Now here I have to write that document and document dot write fright here. And here I will print the variable C for the single embryo. Commonly, if you want to print, then okay, if you're not, leave it. Now let's just check. And here. And here we have the output. So you can see here the than the logical and a and b here is false. Why this is false? V, how the question mark here is why our, This statement is false right here. This is just because of here we have one true statement and one false statement. That's why this statement here is false. Now I just write both the true statements right here. Go to the browser, refresh this. So you can see here by this expression, here is true. Hopefully you understand now then how this logical and operators work. If you see logic gates and understand the logic of the logical operator. So same is a concept right here in the logic operators. Here you can see that we are studying about NOT AND and OR operator into the n operator here. You can see that went to offstage, which means that you have the value here is also off 0 means of N, one mean on right here. If one of your value here is on, this means that this is off-state. Seems a case like that. If both statements are true right here, which means that your result will be here true in the and operator. Let us see here the value here is falls like falls and falls here, which means that falls into the n operator. One value here is false and one value here is true. Which means that this is also falls into the n operator hour when nearly hair is true and another value here is false, which means that this is also falls right here. If both the values are true into the and operator and logical and operator, which means that you have the true output right here. Let's just come to the or operator where both the statement, our fault. This means that this is false statement. If one of them are true here, which means that this is the true result, similar case like that. And if both the result hair are true. So this statement is also true right here. Now let us come to the logical and into the truth table, add the JavaScript as well. If you have the Falls is state. So the output of this folded state here will be true. And if you have true state, so this means that you have the output is false. This is the opposite of your statement into the n operator. So these are just n logic gates right here. Ok, hope so your concept is much clearer about the logical operators and the logic gates. Now here, let us come to the another example of the logical OR operator. The logical or operators perform the Boolean or expressions on its two operands. If one of both operands is true, it's returned true values. If both the operands are false, it will return false value. Very simple example of that helps you understand now, let's suppose the OR operator is used. One of the conditions meet must be true. As I just told you. Let's suppose if we have the value here is equal to four. Here I just ride OR operator. And then IS described if y, which is equal to if y which is less than three right here. So this means that the condition is true when the x is, must be when the x is equal to five, or y is less than three. So here, what will be the output? Let's just check. Now. I will tell you about. The two more values, let's suppose v, how the values here is ten and another value here is 20. Okay? Here I just write a r operator be if one of the two operands are non-zero. The other statement right here, then our conditions become true. So you can see here our both values here are non-zero, so our result here are true. Let us go to the example right here, and I will tell you about that, that how we can write the example on the logical operators. Here, you can see that I just defined variable, one other variable right here, okay? And if you want to work on that, so this is a preview. Here. I just write variable x, which is equal to, I'll just write N. And then we have variable y, which is equal to eyesight six. Okay? Here I just write that. This is document and document.getElementByID or you have write document.write. This is just for your understanding that you can work with both these output statements. Here I just write that logical or operator. Okay? And here it is, right, this is inner dot HTML statement, okay? Now here you can see here firstly, I have write that if x, which is equal, equal to four, ok? And then here I just write and operator, sorry, or operator. And then here I said y, which is equal, equal to three. Okay? So what will be our output? And here it is right there. This is just a single line break right here. And then here is write the concatenation sign. Okay? Now I just copy this statement and I just run multiple types of statement on that. Now here you can see that here I just write if our value here is ten and our another value here is 0. So what will be our output? Then here we have, let suppose our value here is 0 and another value here is let us suppose six. So what will be our output right here? Okay? And then here you can see that if our, this value here is ten and another one, and another value here is six. So what will be our output? So here you can see that at first stage we have the two different values. Then here we have the value ten, and then this is 0 and this is 0 right here, and this is the value six right here. And then we have the same output values right here, okay? And then close the score. Now just go to the browser and check this statement. So firstly, we have to save this. And then you can see. So before running this output, I just forget one thing right here to show you, the xi's are tried here where I tried ID and ID here is the logical OR operator. And then here I disclosed score. Now I'll run this output into the body section right here. And you can see that here, our first date. You can see that false, true, true, and true. Okay. Why this is false. At first stage, you can see here v, how the two false statement, which means that falls in the logical OR operator. If one of them are true. You can see that this is a true statement and this is the fall of the statement, which means that we have the truest statement right here. Then here you can see that same is the case like dead hour. One of the statement here is neat. So this is false and true, which means that this statement is true. And add the last we have the two, both true statements and true and true here in the true in logical or operator. Hopefully you understand now. So through the logical OR operator is the most often used simply as the boolean or operator. Like. Or operator has more complex behavior. And it starts by evaluating its first operand, the expression on its left side or its left side, if the value of this first operand is true in sort like circuits and that is returned that true values without ever elevating the expressions on the right side. How I will tell you, let's suppose that we'll check the expressions from the left side. From here. If logical or operator, fine here, the value true. So that will not check this expression right here. And that will simply go to the result and that will show us the result right here, true. If the logical operator result here falls, then that will move to the next Expressions. Check this here is true. So and then that will show us the result right here. If both the values are false. So firstly, that will move with this expressions and then, and then it will make the decision as the falls right here. Hopefully your concept is much clear about the logical OR operator. Knowledge has come to the logical, not the logical, not the sign here is not sign. This operator is the unitary operator. It is placed before a single operand. The purpose of that is, in words, the Boolean value of its operand. For example, our value of x here is true. So that will inward or that will reverse this value for falls. And if our value here is false for that will convert this value into true right here. So this is the simple concept of the logical NOT operator. Let us come to the example of this logical NOT operator. Here, getting the example of true and false values. And you can see the hair. I just copy this. And here I just change this width, not OK. Just come here. You can see that I have to write result. And Firstly, I will check this result on then operator. So here I just write naught sine. And then here I just write if a and a and b values here. Okay, I just said these both values are true. And if a and B here are true, then how this true value we'll make by make falls by this logical NOT operator. Now here, I have the right logical, sorry, document dot write, and right here is a result. Ok. You can see that. Now just go to the browser and refresh this. You can see here that V, How the both a and b states are true. So our output here is also true. You can see that in this example that we have this value output here is true. So with the help of this not operator, we make this output as the false. So this is just an work off the logical NOT operator. So as I just tell you that logical NOT operator is used when the, the value here is true. And if you want to make this value as the false, okay? So let's suppose we have the expression like not, x is less than or greater than five. So if our this value is true, so by default, this not operator will make this value as the falls right here. Hopefully your concept is much clearer. And now with the logical operators in JavaScript, if you find any of the problem and any point in not understand in this lecture, please let me know and thanks for watching this lecture. 14. Javascript Comparison Operators: Hey guys, welcome to this lecture. And in this lecture we are going to talking about the relational or the compressions operator or expressions in the JavaScript. These types of operators test for our relationship, such as is equal to less than or the property of between two values. And that is returned the result in the true or false, which is depending on whether that relationship exist or not. Relational operator always, I would wait to a Boolean value. And that value is often used to control the flow of your program execution, like when you are just using ifStatement while statement or the for statement. So you have to use this relational or the compressions over. A compression operator, compares its operand and return the logical value based on whether this compression is true or not. The operand can be numerical, is string, logical or object value is string when you're just using a string here. So strings are compared based on the standard Lexi, lexicographical ordering using the Unicode values. In the most cases, if the two operands are not of the same type, JavaScript's attempt to convert them and appreciate types of compressions. And this behavior generally desert in comparing the operands numerically. Okay, so let us see how we can use the compressions operator into our example. One another thing, I will tell you that if the value of five here, let suppose a which is equal to five, and b which is equal to 20. Now, you have to understand, you have to better understand this logic right here. Firstly, we will check the compressions operator between the equal to, as I just told you, when you are just writing single equal to, let's suppose a which is equal to five. This means that you are assigning the value to a, which is five. When you just write a which is equal, equal to b, which means that you are comparing a with B with these two is equal to sine. Now here, you can see that we have the value E here is five, and value b here is 20 right here. So here what will be the output? The output here is false just because of five is not equal to 20 hops. You understand now, now here we are going to check one another statement right here, which is a, means five is not equal to b or 20. So here we have this statement is true right here. Then here I write five is greater than 20. So this is also falls right here. So here you can see that I am comparing a with B, that if a is equal to B, the result will be, then H is not equal to B. What will be our output n If a is greater than b. So what will be our ope? Now here you can see that I have to write that a which is less than B, or a, or five which is less than 20. So this statement here is true. So you understand now, or you have to write a which is greater than or equal to b, or a which is less than or equal to B. So we are working on these types of examples right here. Let's just see. I have right on of my script tag right here. So this is a script tag and I'll just close this script tag right here. Firstly, same is a case of our diagrammatical example. I just write e, which is equal to five. And then here I just write variable B which is equal to 20. Okay? Now here I have write that document. So this is a small document. And document dot here I have to write that document.write. And here you can see that I just write that a which is equal, equal to b. This is our first expressions, okay? Where we are comparing these values. And you can see now here, I'd write that. Let suppose V, how one another variable, which is result. And the result here is you can say a which is equal, equal to b. So here what I just drew right here. So you can see I just comparing a which is equal to b, right? Harish means and five, which is equal, equal to 20. So we will see that what will be our output. So here I had right, that this is document and document dot write. And here I just pause the result right here. Okay? Now here you can see that I just check the output for this code and run to the browser. So you can see here that five, which is equal, equal to 20. So as I just told you that this is, the Falls is Take me right here. Hope so. You understand now. Now here, after this, I have to write that document and document dot write. And here I have to write that simple. Or you can say that here I just create variable c and c, which is equal to I have to write a single line break because we are running the multiple statement is right here. So I will give it a single LAN break right here. Okay? Now you can see we just move to the one, another expression right here. So I just copy this code right here and pasted this code right here. So here at that stage, I tried that a which is not equal to b, okay? And you can see that here I just write that E, which is not equal to b right here. Let us check the output. So you can see here five is not equal to 20. So this statement here is true. Hope so your concept is clear now. Now you can see that here I have to write one another statement. Let's suppose a which is less than b. And here we also have ride a which is less than B. Then here you can see that I have right, that a which is greater than b and seen as a case like here, a which is greater than B. So this is just an output statement. Okay? So don't confuse it right here. And you can see that document.write again. And here we have write that a which is greater than b and seems a case like here, a which is also greater than B. Novae, how to run one another statement, a which is less than or equal to, and a which is less than or equal to and add loss. We are going to write that e, which is greater than or equal to. And here you can see that a which is greater than are equal to. Let us run this statements right here. So you can see here, I just write e which is equal to five, and b which is equal to 20. Okay? At first stage, you can see that a which is equal, equal to b. So this statement here is false. Then we have to write that five, which is not equal to 20. So this statement here is true. Then you can see that a which is less than v. So v, how this statement is false right here. And you can see that a, which is greater than b, which is also falls right here. Okay? So we have run two statements right here, okay, which is greater than unintegrated. Then let's check this statement. And you can see that e, which is less than, less than and greater than, and greater than. Okay? And I have to remove this, run this code again. So you can see here if a is greater than B, so this is a false statement, is less than or equal to b. So you can see that this is a true statement right here and seen as a case like a which is greater than or equal to b. So we have the false statement right here. So this is how our this compressions or the relational operators work in the JavaScript. Hopefully you understand and your concept is much clear about this logic. If you not understand any of the plant right here. So please let me know and thanks for watching this lecture. 15. Build-In Methods in Javascript alert: Hey guys, welcome to this lecture. And in this lecture we are going to talking about the alert dialog box in JavaScript, or the alert function or method into the JavaScript. The alert method in the JavaScript, which is display an alert dialog box with a specified message and an OK button. It is often used to make sure that the information has come through to the user. The alert box or alert dialog box, take the focus away from the current window and focus or forces the browsers to read the message. And you should avoid overusing this method as it prevents the user from accessing other parts of the page until the box is closed. Helps you understand now. Now let us see that how we can use this alert dialog box into our core. Firstly, you can see here that I'm just creating one button right here. Okay? And this is our button. Button here is I just said this button into the onclick. Ok. And here I just write that a Alert box. I just leave this on click method because here I just paste the function where I am just creating into this script tag. Now here I just create a function. So I just create function with small f. We will learn about the functions later in our lectures as well. And here I just write this is alert function. Okay? So I will tell you the definition of the functions that what is the function exactly? I'm talking about this function keyword, okay? A function is a group of reusable code which can be called anywhere in your program. This eliminates the need of writing the same code again and again. It helps programmer in writing modular code. Functions allow programmers to divide a big programs in the small number of pogroms, which is manageable, easy. Like any other advanced programming language, Java script also supports all features necessary to write modular code. Using function. You must have scenes, the functions like alert. This is our first function where I'm just using right here, which is Elor. Then we have the right functions as well. So we are going to use these types of function as well, like prompt, a Alert, confirm. So here let us come to our topic and I will tell you about Deller dialogue box. So for writing the alert message, I have to write the keyword alert. And here I just showing the message to you that hello, you are learning Java Script. Okay, and I just closed the score with semicolon. Now here you can see that this is just an function's declaration. And now I'm just calling this functions into onClick. Hope so this is much confusing for you because V naught already studied about the functions. But make, just make your concept right here because the function is very much easy. I will tell you about the, some of the diagrammatic explanation of the function where you can see that let's suppose v, how the big programs right here, which is LMS system, which is Learning Management System, a very common example. This is our entire functionality. If you want to divide this functionality into this small program. So let's suppose v, how three modules right here into this LMS system, which is firstly teacher is Turin and administration. So you can see here, I just divide this big program and to the three is small modules. You can see that this is actually the functions do and VR reusable this teacher functions, this is student functions in this administration functions are several number of times. Instead of writing our code again and again. A simple example of the functions right here. Like once I just declare this alert message, so I will not write this alert message again and again. I just simply write the name of the functions. So our entire code will be executed into the this button or any other functionality. This is the reusability concept. Hope so you understand now. Now let us go to the browser and check the output. Ok, here you can see that one of the button is created right here with the name of Alert box when it just click on this button. So you can, we have an error right here because our function is not working and that is not showing the display output. And just because of here, we miss these parenthesis. Now run it again. And you can see here that when I just click on this button, so a dialog box messages appear to me, which is alert message on the website, which is hello, you are learning the java script right here. Hopefully you understand now and this concept, it's much clearer to you. Okay, so the alert method, as I just told you in the JavaScript, which is displaying the alert box. And it's display I specified message along with the OK button. You can see that I'm talking about this OK button. And this is generally used to make sure that the user get the informations and it returns the string which represent the text with the displaying in the alert box. Okay? So this is how our alert dialog box or alert function is working. Alert is a base built-in functions. And you can see here this is just an keyword. Okay? And we will learn about the functions in a separate lectures as well. So you, this concept is clear to you guys. And if you find any of the problem regarding to this lecture, please let me know and thanks for watching this lecture. 16. Javascript prompt: Hey guys, welcome to this lecture. And in this lecture we are going to talking about the prompt box. After learning a Alert box, we have to move to the prompt box right here. A prompt box is often used if you want the user to input a value before entering a page. When a prompt box pop-ups, the user will have to click either OK or Cancel to proceed after entering an input value. If the user clicks on the OK button, the window method prompt will return the Inter value from the textbox. If the users click Cancel, the windows method prompts return none right here. Let us see how we can work with it. At first. As you can see here, that I'm creating a form. And form here is I'm just creating one input field. Input field I have write that input field here is the button. Then we write the value. And the value here is I have to write that. Click me. Okay? And then here you can see that I have to close this code right here. Now, here you can see that I have to write that this is just in function right here. And function here is the prompt functions, okay? Now here you can see that inside this function I have write firstly a variable. Variable here is you can see that I have read value or you can say anything, I have to write that. Let suppose, prompt, ok. But here I just create a value right here where you can see that I have to use prompt as the keyword. Okay? And here you can see that enter your name. Okay? And then here you can see that I had to ride one another string, which is the name right here. Now let us see I have write that a document dot write. And you can see the document.write. And here you can see that you have in turn. And then here I just concatenate the value of this prompt, what you write into this text field right here, okay? Now you can see that our this script tag is complete right here. Now here I have write that onclick. And this onclick here is equal to 2p, right? Prompt right here. So you understand now that I am just simply calling the method right here. Firstly v, how the type input, which is the button, then the value on this button here is click me. And then we have to run on click method, which is equal to our function name right here. Obscure concept is much clearer now. Now here you can see that I have run this code. And you can see that when I just click on this button right here. So you can see we have find an error message right here, and we have to clear this error message. The error here is you can see that we just go to tech and yes, ok. This is prompt. We are not using the prompt as a function name here just because of hair, you can see that v, how prompt, as defined as the keyword. Now you can see that I have right trombones. Maybe your concept is clear about the prompt, that this prompt is the keyword and we are not using the keyword here as the function name. Save this code, go to the browser, refresh it, and you could click on, Click Me. Here. This is just a name field. You can see that this is the name right here. So this name is shown to us right here. Okay. Now here you can see I just go to browser, refresh this, click me, and here I just write that. This is the funky. I just click on ok. So here you can see that you have entered funky right here. Again, refresh, click me. Man, I just click on cancel. So you can see here you have entered the null value as I just tell you at the beginning of the program that when you are just writing your name or anything into the text field, you can get the output. And if you not write anything, so you can get the null value. Hopefully your concept is much clearer about the prompt method into the JavaScript. If you find any of the problem regarding to this lecture, please let me know and thanks for watching this lecture. 17. Javascript confirm: Hey guys, welcome to this lecture. In this lecture we are going to talking about the confirm dialog box method in JavaScript. The scenario here is sometime you need to take the user confirmation to proceed to the next step. For example, you want to take the user conformations before saving the updated data or deleted existing data. In this case or in this scenario, we use JavaScript built-in function, which is confirm, confirm function, display a pop-up message to the users with two buttons, which are OK and Cancel. And you can check which button the user has to click and proceed accordingly. So if the users click on OK button, the window method which is confirmed, will return the true value. If the users click on the Cancel button, then the confirm returns false value helps you understand now. Now here will go to the example of that. Here, as you can see, firstly, I had to create the function and function here. Let suppose I just write the function name here is hello. Okay? Now after this, you can see that here I just used confirm as the keyword, which is a method, ok. and here I just write. Please press any Burton to continue. Okay? And then a closest code right here. Now here, our, this logic is confirm is a keyword. Our function name here is hello. Now here I just create one button to display this functionality right here, where I just create a button on click method. And here you can see that I have to pass this hello function name. And here it is, right that click me to confirm. Okay, now here you can see that I have to go to the browser, will grow. And here you can see that click me to confirm. When I just click on this button, our dialog box is shown to me, which is the confirm dialog box or conformations dialog box. Whereas I just tell you that you are finding two options right here, four, OK, and Cancel. I just tell you that if the users will press on OK button, the window method confirm will return true. And if the user is pressing on the Cancel button, then the confirm returns false result. So this is our message here. You can see that. And when I just click on this OK button. So you can see here this dialogue box is disappeared and we are proceeding to the next step after this. This is just our functionality like that. And when you just click on cancel, so this means that this confirm matter return us the value as the falls and you are on the same page. Hopefully your concept is much clearer about the confirm dialog box metered in JavaScript. If you find any of the problem regarding to this lecture, please let me know and thanks for watching this lecture. 18. Javascript If Statement: Hey guys, welcome to this lecture. And in this lecture we are going through the controlled statements in JavaScript. Where in this lecture we totally focused on the if statement. But I will tell you some more about the flowchart and the if statement as well. While writing a program, there may be a situations when you need to adopt one out of a given set of pot. In such cases, you need to use the conditional statements that allows your programs to make correct decisions and perform the right action. Javascript include if else conditions take must control the program flow similar to other programming languages. Here v, how if condition, if else conditions and if conditions. Okay? Now here you can see that I will tell you firstly that how our programs flow into the if, else if statement. Lets just see here that I'm just writing the flowcharts to you guys, which is this circle sign means that your program is, take, start from that. Then after this you how some types of condition, okay? Conditions will be. Let's suppose if a is greater than five or if a is less than ten, okay? Or anything like if h is equal, equal to five hops, you understand now that condition is anything, any logic, you can press right here. Then you can see here, if you are program will writing the same conditions. Let, let's suppose a0 which is greater than five. Let's suppose the value of E here is ten, then you are program flow will be easily to the finish step. So you can see here this is our I'm finished. Then after checking this condition, let suppose a which is greater than five and the value of a here is ten. So our program will flow like here, that will firstly check the condition, then that will check the condition code right here, and then that will execute the result for us. Hope so you understand now inside if statements, if your result is false, let suppose I just write that two which is greater than five, or two which is less than five. Okay? Two is less than five. This is a true statement. And if T2 is greater than five, so this is the form of the statement. If over this statement here is false. So program flow will be going to the falls and simply that we'll move to the finishes tab and didn't show us any of the result right here just because of an if statement, we only focused on the condition right here. We not focused on the else condition. Hope so your concept is much clearer now that you can see that an if statement, we take the program start. Then here we will check this statement. If our statement e, which is greater than five, let's suppose two which is greater than five, which is our false statement right here. If this statement is false. So here you can see that our program will be. Directly move to the finish step and not show us any of the output. And if this is tap is true, so that will simply move to the next step, check the condition code, and then going to the finished state right here. Hope so, it's clear now. Now you can see that we are going to discuss about the if statement. So if a statement is the fundamental control statement that allows JavaScript to make the decisions and execute the statement conditionally. How you can see that let's suppose we have this script tag. Inside the script tag. Firstly be how the if statement, if here is the keyword. Remember that when you are just writing the if, so, if means that keyword, then you have the expressions right here. What is the expression? Expression is anything. Let's suppose E is greater than five, a is greater than ten and is less than ten, or a which is equal, equal to or greater than or equal to a naught equal to ten. And you have the numbers. So a is just our condition right here. So this expressions here are conditions. Then you have to run with these curly brackets. Then you have to write your statements code right here. Now, I will run this into your, do you guys into flowchart, where you can see that here our program will start. You can see that from here our program is starting. Then you can see that here we have the if statement and you can see here we have an if statement and the condition. And then we have the block Office statement or block of code. After this else block. If this condition is true, then our program flow will be moving to this condition. Let suppose any of the code right here. And then we help. The finish is tab right here. If our programs working correctly like a which is equal equal to five, which means five which is equal equal to five hour stair running state here is true. So that program will be moving easily if our, this program is false. Which means that at the place of Avie how the two, SO two, which is not equal to five. So our program flow will be directly go to the finish and not show us any of the reserve rate here. Hopefully you understand now here you can see Javascript or Java expression is evaluated. From here you can see that JavaScript expression is evaluated if the resulting value is true. So the Galen is statement are execute. And most of the time you will use like compressions operator while making these decisions. And if a statement is false, so then no statement would be executed right here. Okay. Let us see the coding example, right? Hopefully your concept is much clearer about the if statement right here. Now, you can see that I am running the if statement. So if here is a and a which is greater than 0, this is our statement right here. You can see this is our expression. This is the keyword, and now I am just running the block of code. Let's suppose I am just running the alert command. And alert here is, I just write that five is, sorry, H is greater than five. So here you can see that five is greater than ten. Okay? You can see that. So what is the five? So five is our if statement right here. Okay? Now, you can see that I just check this code. So here you will see that we didn't find any of the operator. Just because of here, we just only define our if statement. Now I am just defining the number two. Check this if statement is true or not. I just write one variable and variable V, which is equal to here, I just write that 2pq. Okay? Now here you can see that when I just run this core, so save this and you can see that. And you can see here that I'm describing, let suppose document and document.write. Here I'm just showing you the output on your Kim document.write. And here I have write that. Let's suppose the result of if statement. Okay? And then here I have to close this statement right here. Here you can see that our This statement is false. That's why we didn't have any of the result. As you can see, you can see here, we didn't have any of the result right here. Now, when I just run this code, sorry, firstly, we have to save this, and then we have to run the score. So as you can see, my This program is not showing me the output. Just because of here. I'm just telling the logic. Firstly, you can see start here the, how, the conditional statement, you can see that. So here we have the condition which is a is equal to two n. Our statement here is, is greater than five. If we are pressing the value here is five. So this program will not show us the result as well. So here we have the false value and the program flow will be directly going to the finishes state. And that is showing as no research just because of here we only work with if a statement. I repeat again and again, this concept just because of the need, this concept in next upcoming lectures. Okay? Now here you can see I just provide five. Just because of here you can see that this is 55, so five is not greater than five. So this statement is also not true right here, when we are just writing six instead of five right here, because six is greater than five. So let us check our output right now. So firstly, v, how alert command, which is running right here, which is five, is greater than ten. Okay? And then you can see that I just press on, okay, so V, How the result of the if statement. So now our code is running right here, and this is showing us the correct result. So here, from here we are starting here that will check the condition if this condition is match right here. So that will show us the core body. Otherwise, that will directly move to the finishes state and didn't show us any of the result here inside this if statement. Hopes week, this concept is much clearer now. Now this is our first statement. Now we are running one another statement right here, which is, let's suppose e, which is less than five. This is for your better understanding who came. And here I just simply write that alert message. And the alert message here is Hello. This is for checking the condition. Ok. And closest code right here. Refresh this. And you can see there first the statement is executed, and this is a second statement. And you can see here, this statement is, you can see that six is less than, you consider six is less than five, which is a false statement. So this statement here is not executed to us. Hope so this concept is much clearer now that how we can use if-else statement and how we can work with true and false and if statement. If you find any of the problem regarding to this lecture at any point you not understand into the flowchart of the if statement, any point you not understand that how we can create the condition and how we can check or how we can evaluate true and the false value into the if statement. And if you're not understand any of the point right here into this course, please let me know and thanks for watching this lecture. 19. Javascript if else Statement: Hey guys, welcome to this lecture. And in this lecture we are going to talking about the if else statement into JavaScript. Sometime we need to execute a block of statement only when a particular condition is meat or not. This is simple card decision-making. As we execute a certain code after making a decision into the program logic. For example, making in JavaScript VHA four types of control statements, which are if statement Nasser, if statement, if, else statement and if else if statement. Okay? As you know, we already studied about if statement in JavaScript. Now we are focused on the if else if statement. In last lecture, you have seen that be strategic about the if statement and inside the if statement, if our one of the condition is meat, so our program will execute the result and the core blog if our condition is not made. So that will simply go to the finished and not show us any of the reserve. But here in if else statement, like some sometime you how a conditions and you want to execute a block of code if condition is true, and execute another piece of code if the same condition is false. This can be achieved in JavaScript using if else statement, how we can work with the if-else statement. Firstly, I will tell you the flowchart of if else if statement. Lets suppose here we are going to start our program. And here we have the condition let suppose a and a which is greater than 50. Okay? Now you can see that if our this statement is true right here. So that will simply go to the block of code. What we write here, like it will insert into the code body what is defined with this condition. That will check the code and then that will execute the result right here. Means that will simply go to the finishing stage if our this certain condition is not met. So then that will simply go to the else block of code right here. That will check the else block of code and show us the else block of code right here. Now I just tell you that what is the if statement and what is a else-if statement. So as you can see here, we have the if statement and here you have to write your condition. And inside the condition you have block of code right here. Okay? Now, if our this block of code is working right here, so that will simply execute this block of code with true result if this result is not possible in to the condition. So we simply move to the else and here that will run the else block of code right here. So this concept is. Much clear to you guys. Now let's just see the example on the if else statement. Here. You can see that inside this script tag, I just define one variable. And let's suppose variable here is age, and the age of the variable here is 25. Now you can see that I am just defining if statement. So here you can see that if is a keyword and now I just write H. So H here is I just defining the condition right here. So if age is greater than 18, so you have to write a document and document.write, which is you are not in teenage. Okay. Then semi-colon right here. Now, if this statement is true, so that will simply run this block of code. If the block code is not true, then that will go to the else block of code. So else here is the keyword, ok. And now here you can see that I have the right document and document.write. And here we have that you are teen age or hope so. You understand now. Now you can see that we are going to run this if else statement right here. And you can see that here. You can see that our age here is 25. So there is showing us and message here, which is you are not in teenage. Okay? Now here you can see I just write 16. So when I just refresh this, so you can find that you are teenagers because our ages less than 18 right here. So this is a very basic example, what we cover in this lecture. Now let us move to the complex one. I just remove this because it says much easier to you guys. Here we are getting a form where we are going to collect the Mars or we are going to get the grades of the students. Here you can see that incidences worried hang. I'm just creating one of the form right here. Okay. So form here is firstly, I just said the name of the farm, which is equal to, I'll just write this is form. Then after this here I have right that, that form, sorry, here I had right action. So action here is we didn't dude any action on that because we didn't have any of the links. So I just write this blank link right here. So firstly, as you can see, I just write the form name because we need this form name when we are just declaring this script JavaScript right here. So after this, inside this form, I have to take one user input. So this is input right here. So input here is the type of text where V, How to Write that a name. So name here is I have to write that this is a name of text number one. And the value here is, I just knew this value as a blank. Here I just write the message. Which is Please enter your marks. Okay? Now I just take one either input, and the input here is the type of button. And then after this, I just define the value of this button means what? We set the name on that button. If we write the value right here into this input field. So input insight, input field v, how the predefined value will be shown to you guys. After this, you can see that here I just defined the value. So value here if the button is ice, right? Check your grade. And I just closed the score right here. Okay? Or here you can see is closest score right here. Now we are going to this script tag right here. Firstly, VR creating the function, and the function name here is grids. Here. I have to write that on click method. And inside onClick method, I have to write that this is gates. Ok? And you can see that now after this, you can see here I just create this function, then grade and I just pause this functions into the onClick method inside this button. Now let us come to the logic of if statement. Inside an if statement, Firstly, I have the right document to the output statement. Then here I just write form. So form here is this form name. Then I have to write dot and then I just write this text number one. So I'm concatenating this documents with form and text right here, then I have to write or I have to provide the value. This means that I am providing the logic right here. If your form is matched, then you are text is match, which means that this is our form. Firstly, that will get the value of the firm. Then inside this form, we have some kind of text bar where their texts will match. The result means the texts would match this value logic, so that will show us the output. So I just defined the value here. If the marks is greater than 90, then I have to show alert message right here where you will find that grade is a audio or grid right here. Hope so. This concept is clear for you by if this concept is not matched means if this value is not met, then that will go to the else block of code where I just define one another if statement. You can see that. And the if statement here is you can see I have to write the document once again. And this documents and once again, I her eyesight. Firstly, that will make the form, then that will match the text number one. And then I just provide the values if these two things are matched. So then that will simply go to that, that if grades are greater than 80. And so you can see here that V are getting the logic of the n operator right here, because we are comparing two values right here, which means that you can see the value is greater than 80. And you can see here I just write that documents dot form text1. Here you can see the value. So you can see if the document.write form dot text number one dot value is greater than 80 and Documents.findOne text number one dot value is less than 90. Then you have to write alert message where you can see that you are grade is. So firstly, we have the grid, here is a plus, and here you have the grid is a hope. So you understand now that what logic I am talking about right here. Now, same is a case. You can see that I have to copy this else block of code. Okay? And then here I have to paste this block of code right here. Here, I'm just changing the value that if the value is greater than 70 and less than 80, then you have to provide the grade is b plus. Then you can see one another else block of code. And inside this else block of code, I'm just defining the if statement. So if value is greater than 60 and less than 70, then you hell the grade B right here. Okay? Now, after this you can see here that we are moving to this else block of code where I just show the alert message. And the alert message here is if none of these statements are met. So you have grid C right here. So this concept is much clearer for you guys. Now, I will tell you the logic of these are where you can see that firstly, we have the if statement. So this is our program flow control, where you can see that if our this statement is match means the user's held 90 plus marks. So this statement is matched and that will execute this block of code and show us the result as you dead, you held the grade. If this is not met, then that will move to this else block of code right here and here that will show us, that will check this statement right here, then that is matching the result in 8070 or 60 means that the users hell 80 marks. So then that will run this block of four and seen as a case like here and here, if none of these statements is true right here, means that the user health 59 months or users health 50 ml, then this alert Grade C and the L block of code will be executed. Hope so this concept is clear to you guys and you will understand what I am asking about. Now as you can see, I just copy this code and paste it into the header section. Okay? Because when you are just writing the script file, so it's very important that you have to write your script file into header files and just go to the browser, refresh this, and here you can see that please enter your marks. So I just write 90 marks here. And here I just click on the button. So you can see that inside this V, How the grade, which is a plus. Ok. Here I just write that this is the 80 marks. Check your grade B, how the grid here is a, okay? Now here I just write that 48 marks. Check you are good. And v, how the Grade C right here, as you can see with the help of if else Program v, how create this grading system into the JavaScript. This is not a grading system, but you have to calculate your grid that you can see. So this is our real life example, what you have to study in this lecture hopes would this lecture is very clear to you? And if not, if you not understand that, how we can declare this grade, how are we can declare this if statement? What is the L statement right hand and why we are declaring this if statement. Okay? So you can post your question. And if you have any question regarding to this HTML code as well, so you can post your question. I'm slow down because this is a very beginning course and here I am teach you every speck of the JavaScript so you can post any questions. If you have. Thanks for watching, please let me know. 20. Javascript if else if Statement: Hey guys, welcome back to this lecture. In this lecture we are going through the else if conditions in JavaScript. The if else if condition or statement is an advanced form of if statements. That's allow JavaScript to make correct decisions out of several condition. Like in last lecture, you have seen that we run two examples. But I will not tell you in the second example that what we are doing. I was just simply focused on the concept of the else-if statements to you guys. As you can see, I just tell you the server time. This is the if statement which is inside one another. For inside this else statement. Here. In today's lecture, I will tell you that what is the if statement, then else statement, and then if statement again. So as you can see in last lecture, we have seen that we use if statement first, then we use else-if statement. And after this else-if statement, we used if statement again. So in this lecture we totally focused on this lecture. So as you can see, firstly, we are going to start our code. So this is starting of the code right here. Then here you will run your condition. I just write the name of this condition as the one. Then let's suppose v, how one another condition. Let's suppose this condition here is two and add the last vehicle. One other condition, which means this is the condition number third right here. So this is the statement of the condition one. This is a statement of the conditions two, and this is a statement of the condition three. And here we are going to the else block of code right here. And then we are writing that this is just an exit or a finish, okay? As you can see, that our code is it starting from then? If our, this condition is matched, let suppose here I just write that if a is greater than five, okay? Then if this condition is true, then this block of code will executed or this statement executed. And simply there's program will go to the finish state right here. If this condition is not met, then the program flow will be going to the next iteration, which is on condition number two. Let suppose I just ride if the value of a is greater than ten or less than ten. Or any logic you want to create right here. Okay? Let suppose I decide if the value of a is greater than four, then if this is true, then this statement will be executed to you. And simply the program flow will be going to the exited state. If we didn't have any of these two conditions. So then this program flow will come to the third eye iterations. And let suppose here we hell, if the value of a is greater than three, then V, How run this if statement? And if this statement is true, then that will move to the finished stage. Now, the question here is. Then if there is none of this statement is true, then what block of code will be executed? Then the program flow will be directly go to the else block right here. You can see that. And then here that will run the else block of code and go to the finish state. So hence, a user can decide amongst multiple options right here. The JavaScript, if statements are executed from the top down. As soon as one of the conditions control the if is true. The statement associated with that if executed and the test, or sorry, add the rest of the Java condition or else if letter is by a pos, if none of the condition is true at that stage, you can see here, if none of the condition is true, then the finally block of statements will be executed right here. As we come to the, our last program right here you can see, you can see v how firstly, if statement, after this if statement v, how the else block of code here, and after this block of code v, how one end of the if statement right here. You can see the program flow. If this condition is true, then that will go to the, then that will go to run this block of code which is a alert grid a plus. Okay? If this statement is not true, you can see here, here we just simply write the sending of that. And if this statement is not true, then that will go to the if statement again right here, then that will check another condition. And you can see if none of these conditions are true. So add the laws that will print that you have the Grade C. Ok, so this concept is much clear to you guys. Now, I will run examples, do you guys? Or Firstly, I will tell you about the syntax of the if statement. And you can see here that we have, sorry, we have fastly the if statement. Then we have the condition right here. We will check the conditions here. And then after this, we will execute the statement or the block of code right here. Then we write else. If conditions seem as a case like our old example. And then we will check the condition again and run the block of code obsolete and stand now. Now here you can see that I just write script tag. And inside this script tag, I just create a variable. So variable here is let suppose v, how? The variable is salary, okay? Or I just write my salary. And then my salary here is, let's suppose 5 thousand, okay? And then here I just created that your salary. Okay? And your salary here is I just write for 5041500. Ok. Now let's just check what I do here. As you can see. Firstly, I just write if statement and if my condition here is my salary, if my salary is greater than your salary, then execute the block of code, which is alert. And alert here is my salary. Is greater than your salary. So you understand now, if this statement is made right here, so that we'll run this block of code. Otherwise, that will go to the else statement. And then inside this else statement v, how one another if statement. And I'll just write that my salary, which is less than your salary. So print a message right here, which is the alert message. And the alert message here is my salary is less than your salary. Hope so you get the meaning that what I am talking about. Firstly, we have the if statement. If this statement is true, that will run this block of code. Otherwise that we'll move to the else statement and then that will take one another if statement right here, and show you the output result right here. Okay? Then here you can see v, how one another else-if statements. So you can see that as if, if this statement is not true, then that will move through the algebra again. And here, v, how the statement right here. And you can see we have the statement right here, or the condition right here, which is if my salary, which is equal equal to your salary, then execute the block of code, which is alert and alert command here is, I would write that my salary is equal to your salary. Hope so you understand now, if none of the condition are meet right here, then you will have to write the S block of code. But here at that stage, we didn't need any of that. You can see now I am just running the score and the browser. And you can see that the alert message here is that you have right, that document.write and then you have to pass your message. So the alert message here is my salary is greater than your salary because my salary here is 5 thousand and your salary here is 4,500. And if I just write that 6 thousand here, and then I just go to the browser and refresh this. So you can see here my salary is less than your salary. Then I just go to the equal to n here I just write that this is 6 thousand. Refresh this. You can see here that my salary is equal to your salary. So this is the logic and the simple logic of the if, else if statement. Hope so, you get that how we use if and else if statement. The key points that you have to remember when, when you are working with if else if statement or anything. So use of if-else condition is statements to control the flow of program. Okay? If you want to use this if else statement, this means that you have to control the flow of the program. Javascript includes forms of if conditions, which are if condition, if else condition and else-if condition. Remember that the if condition must hell conditional expressions into the bracket CME as a case like that, you can see you have write the if statement into the brackets only. And when you're just writing the block of code. So you have to write curly brackets with that. Else condition must be placed only once at the end. And it must come after. If you are none of the condition is true. So this is just and logic of the if else if statement hopes. Do you get that? If you're not, please let me know and thanks for watching this lecture. 21. The Ternary Operator: Hey guys, welcome back to this lecture. In this lecture we are going through the ternary operator in the JavaScript. A ternary operator can be used to replace if-else statements in the certain situations. Before you learn about the ternary operators, be make sure that your concept is much clearer on if else statement what we already studied about. Firstly, a ternary operators, I will lose our conditions and executes a block of code based on the condition. The syntax of the ternary operator is firstly, you have to ride condition, okay? Then you have write, question mark, sign, and then you have to evaluate first expressions, then colon, and then you have to elevate your second expression. The ternary operators. I will wait the test conditions. If the condition is true, you're fast expressions here will be executed. And if your condition is false, then you are second expressions will be execute right here. So you understand now, here you can see that the ternary operators break three operands, hence the name ternary operator. It is also known as the conditional operator as well. Now, we are moving to our coding example. Firstly, I am creating a variable. Let's suppose our variable here are marks, okay? Now here I have the right prompt. So prompt as you know, this is a prom dialog box and here I just write that into your marks right here. Okay? And then here you can see that I have to close this with a semicolon. Now, here you can see that I have right, a reserve. So reserve which is equal to here, I just write that firstly, we have to call this variable marks right here. And then here I have to write that if marks are greater than percentage of 40, okay? Then you have write the grade here is pause. Otherwise, you have right, that you are failed the exam. Here you can see V, How three, I just tell you that we have the three operands right here, plus d v. How the condition here, then we have fast expressions and the second expressions here. Here we have the conditions. Let suppose marks are greater than or equal to 42. You are result here is passed. Otherwise you fail the result. You want to give it 50 marks here, or you want to give it 30 marks here. This is up to you. Ok? Now here after this I have to write that document. And document.write here is I have to write that u. And then here you can see that I had that your result is. And then here I have to write that result right here. I just call this variable right here. Okay? Now here you can see that I have to go to the ternary operator right here and then refresh. Check into the browser. If I just press 30 marks and press on the okay, so you can see here that you are result here is fail. If I just write 40. So you can see that you are result here is if I just write 90, so same is the case like your result here is paused. So here you can see that we write three different values like 304090 right here. Firstly, that will check the condition here is Marx. So if Mars is less than or greater than or equal to 40. So if this is less than 40, so this expression will be, I will write here, if this is equal to 40 or greater than 40. So this POS expression is evolutive right here. Hopefully you understand now that what is a ternary operator, which sing replaced the ternary operator and how we can use the ternary operator if you find any other problem regarding to this lecture, please let me know and thanks for watching this lecture. 22. The Click Event (onclick): Hey guys, welcome back to this lecture. In this lecture we are going to focused on the onclick events. But before starting the onclick event, we just need to understand that what is the events? An event is something that happens when user interact with the web page, such as when he clicked a link or a button. I'll user will enter a tucked into the input box are the text area. Or a user made selection on the select box or pressing the keys on the keyboard. These all our cards events or the user will move the mouse cursor or submitting some types of form. These all are called events. In some cases, the browser itself can trigger the event such as the page load or page page unload events, okay? In JavaScript, you have to interact with HTML's is handled through the events That's occur when the user or the browser manipulate a page. Let's suppose when a page loads it called even when the users click a button, as I just told you, this is called I knew in, or the user will click on to the, or user will submit some type of homes. These are all cards events. Developer can use these events to execute the JavaScript quoted response, which causes the button to close the window. The messages to be displayed to the users and the data to be valid. And this is like virtually any other types of response imaginable. The events are used in the three types. First is like, you can use events in the DOM. Then you have to use events in HTML, or you have to use the events into the JavaScript code. Now I will tell you that how we can click on, how we can use onclick. Even the click events occur when the user will click into the element of the webpage. Let suppose here I am just clicking into the Googles for this card, this is click un, or I'm just clicking on this button. So this card, this is a click event. Let us see how we can create this click events. So firstly, I have to write this script tag. Inside this script tag, I have write, let suppose document.write, and when I just click on button, so here the message is, sounds to me that this is on click, event on button. Okay? Then I have to close this code right here. Now let's see. Here I'm just creating one of the paragraph tag where I just said that this is on click event. And after these, I'm setting this onclick events into the button where I just write that in port input, which is the type of button. And here you can see that the button here is on. Click off. So you understand now that this is the onclick event, I'm sitting on this button. Here. I just define the function. The function here is on click one. And then here you can see I just copy and paste this into this text right here. Now here I am just calling this onclick event right here. Okay? We already worked with that, but here you just need to understand that what are the onclick event? And here I just said the value of which is on click event. And then I have to close this code right here. I just go to the browser and check this output. So when I just click on that, so you can see here, the window page will move into the next stage where you can see that this is onclick event, okay? Here. This is our paragraph tag, a p tag. This is the value of on-click event, and this is a button when I just move the mouse cursor on it, and I'll just click on this. So this function will run right here and this is showing me the output here, which is this is the onclick event on the button here you can see. So you get that, that what is the onclick event and how we can use it. Hopefully you understand if you find any of the problem regarding to this lecture, please let me know and thanks for watching this lecture. 23. The Mouseover Event (onmouseover): Hey guys, welcome back to this lecture. In this lecture we are going through the mouth or event in the java script. Or you may say that the onmouseover or on mouse out. These two are the same thing. So these two events type will help you to create nice effect with image or event with the text as well. The mouse or events trigger when you bring your mouse over on any element and the mouse out trigger when you mouse, when you move your mouse out from the elements, let's just try how we can work with it. Here you can see that facility or how to create the function. So this function right here, sorry, firstly, I have to create the JavaScript tag, and this is a script tag. And inside this script tag, firstly, I'm distributing the two functions where I had to write that functions for the mouseover. And here I have to create one another function for the mouse out. Okay, now here I will go to that script tag, sorry here, HTML tag, where I had to write that one of the DIV tag. And then here you can see that here I just write that on mouse over. Firstly, I have to take this function name as the most or which is equal to mouse, sorry, on mouse over. And here you can see that I have right, which is equal to, firstly, I have to take this function name as the author. Then here you can see that I have right the on mouse out. So this is on mouse out, event and hair. I have to write that a function name as the outright here. And then I have to closest score. Okay? Now here I just define one heading right here. Let suppose this is heading number two, and here it is, right, this is the function body. Here. Let us come to the function Hour and I just write that this is the document and document.write where I had right, that this is mouse or I will tell you, or I will explain this course to you and I am just executing this program. So ice right again is document and document.write. And here I have to write that this is mouse out and closest core. Here I just run this code. And you can see, so how this mouse over and mouse out functions are. Most out events work. As you can see that when I just mouse hover on it. So you can see that this is changing his value that you are mouses or you can see that. You can see. And you can see here when I move this mouse here, so that is changing is value right here. So this is the actual work that what mouseover events to, Okay? So the moused over events occur when the user, or when the user moves the mouse pointer on the element, as you can see here, you can see that and the mouse out events occur when the users moved the mouse pointer outside the events element. So I will tell you now that how we can work with mouse out event as well. Same is the case, like you can see here, that we already work with this mouse out event right here. Let us suppose here we are creating one button. So Burton here is the type of input which is a type of button. And then here you can see that a first-year How to Create, Create on mouse out. He went right here. Okay, and here I have to show the alert message to you guys where I just write that. This is mouse out event. Okay? And here you can see that after this I have to close this core. Now here you can see that IS right, that this is mouse out event right here. Okay? Now, I just rephrase this. So you can see here when I just move my mouse or this button. So you can see that alert message is shown to me that this is the mouse out even N1, just click on this button. So you can see here, this is also a mouse, or hopefully you get that how we can create the mouse over and mouse out event into the JavaScript. If you find any other problem regarding to this lecture, please let me know and thanks for watching this lecture. 24. Javascript Load Event: Hey guys, welcome back to this lecture. And in this lecture we are going to talking about the load event in the JavaScript. The Lord events occur when an object has been loaded. Onload is most often used event within the body element to execute as script. Once a page has been completely loaded, all the content there is including images, is script file and the CSS files, etcetera. Now here I will tell you that how we can work with it. Firstly, here, inside this body tag, I'm just running the event right here, where you can see that when the body is loaded, when we load the body, so Hair onload event will occur. And here I have to write that this is just a window dot alert message. So I am just showing the alert message to you guys where I helped write that page is successfully loaded up. So you get that. And I just close this code right here. Now inside this body tag here I have to write one of the script tag. And I just write that this is document and document.write. And here I had right that this is the page is loaded successfully. Ok, and here I have to close this code right here. Hope so you get that. How Firstly we are, we have the body tag. Inside this body tag. I'm just running this onload event right here. Okay, then here I'm just showing the alert message to you guys that the page is successfully loaded. And inside this script tag, here we have run this script. Let us check. Here. I just go to the browser and check that. So you can see here that this is the page load events, but this onload event is not working right here. Just because of here, I just did a little mistake where I just write this L as the capital right here. Okay? Now, refresh this again. And and the page is not loaded yet because yes, here we miss something. Here we have to write a single quotation mark just because of the already gave it are double quotation. So that will replace that. And you can see here a single quotations again. And now here I am just refreshing this. So when I just refresh this page body, so my load event is running right here, which is showing me the option or the message right here. That page is successfully loaded when I just press on. Okay, so this message is shown to me. So you can see here the space on, okay, so after this message, our page body will be executed. Hopefully you understand now. So this is just a page onload event. If you find any problem regarding to this lecture, please let me know and thanks for watching this lecture. 25. Javascript Keyboard Events: Hey guys, welcome to this lecture. And in this lecture, I will tell you about the key down events into the javascript or the keyboards events into the JavaScript. Firstly, I will tell you the key down events. The key down event and the key up events provide a code indicating which key is pressed. Why creep pressing indicates which character was entering. For example, a lowercase a will be reported as a 65 by key down and the key up, but as 95 by the tree press and uppercase is required as the 65 by all key events. Let us check that how we can work with that, and how we can work with this JavaScript key down event. Here. Firstly, I have write H1 tag where I just tried that. Please enter something. Okay. Then after this hair, I will write one of the script tag. And inside this script tag, possibly I have to create the function. And the function here is I have write that this is a key down event. This is any function name. So it is a function name. You have to write any of the function name right here. Now here I have write that this is document and document dot here I have write, document.write or you have right, got document.getElementByID. This is up to you. So you can see here, I have write that document.getElementByID. And hey, I have derived that this is in port by user, okay? And here after this I had ride that alert message. And alert message here is eyes right that press any key or press a key. Now here I have to go to the In port input. Here is the type of per ton, or, sorry, first year how to write input is a type of text. And then here a hydride that ID, which is equal to here. You can see that, sorry, plus D, I'm just getting the ID right here. Let suppose this is the import number two, and you can see here that this is n for number two here, which is IID. And here I have write the key down event. And now here I am just running this function name where I have write that this is a key down and then I had to close it with parenthesis. So you understand now that how we can work with a key down event. Now I'm just running this into the browser. And here you can see eyesight. Hello. So you can see here you press any key. So here I just went to just press again key. So this alert message is shown to me. Okay? So you can see here I'm expressing any, any key right here. So you can see that. And now you can see when I just press any key right here. So this message is shown to me that you press something here into the text view. So this is car, the key down, even. Hope so you understand now. And what is the key up even? So the keyup event is when you're just pressing something into that, like I just press anything into the key. So this is work as a CME, as a key doll. Ok, so don't worry about that on the place of that, you have to simply write, let's suppose you have to write the key event, okay? This is sorry. This is key on key up. Okay? Now here you can see this is 19. The faces when I just press something. So you can see here this is also working right here. Hopefully you understand your concept as much clear about the keyboards event. If you find any two problem regarding to this lecture, please let me know and thanks for watching this lecture. 26. The Focus Event: Hey guys, welcome to this lecture. And in this lecture we are going to talking about the focused events in java script. Firstly, we learned about that. What is the formula when a form event is fired? When a form control deceive or losses the focused or when the user modify a form control value, such as typing the text in input area or a text input area, or select any options in a select box, et cetera. So at that case, the form event is come in the row. Now, we will see that what is the focus? The focus event fires when elementary CVE or loses the focused. There are two means, e, focus events which are focused and the blur. The focus event fires when an element has received the focus and the blur events fire when element has the focus. Let us see in a coding example that how we can create this blur and focus event. Here. Firstly, I'm creating the form. And now you can see that this is the form which is the ideal of ice, right? That idea form right here. Okay? Now here I will write a user input. Input is the type of, sorry, this is the type of text. And then here I will write that this is a place holder and the place holder air is username, which means that this is your farm. Okay? Sorry, this is your text in per bar. And when you are running discord, so a username will be placeholder into this text field. Okay? Now here you can see that I have to write input, which is a type of password. So why I just write hyp password right here when just right hyper, when you just type password into this textbox. So I steric type will be come to you and your possible will be hydrate here. Okay, now here you can see that I have right the placeholder, which is the possible right here. Okay, now as you can see, I just create a text field or the text boxes right here. Now, if I just run this course to you guys. So you can see here, these are the two types of text fields right here. Okay? Now let us come to this script. Plus dv will provide the constant. So what is the constant here? So the constant here is the keyword and the constant declarations create our read-only reference to a value. And it does not mean that the value is stored is immutable. And simple word, when you just writing the constant, this means that the value cannot be changeable. Okay? The constant value here, as you can see, the value of pi or the value of that gravity. Okay? Hope so your concept is much clear about the constant right here. So I just write constant as the password. Which means that the password value will be not changeable right here. Here I just write document dot i stride Curie. And here is the Curie selector. Okay? So the QT selector methods return the first element that matches are specified. Css is script in documents. Okay, now let's just see that we are just taking the user input. So here we have the input which is the type of and the type here which is equal to, I had arrived at, this is the password, and I have to close this code after this. Now here I just write that the password dot add event listener. Okay? The add event listener methods allow you to add event listener on the HTML DOM objects such as HTML element. We will learn these in next upcoming lectures as well when we are just working with DOM. And here you can see that firstly, I'm just running the focus matter. As I just told you, is the focused and here I have write that E or you have write event, this is up to you, okay? So I just write e here for the events for I'm just running the event right here. And then after this, I have to write that e dot targets. So I am just targeting the locations. And here I would write style. And the style here is the background. Which means that I'm just setting the background as the blue right here. As you can see that firstly, I'm just targeting the add event listener, which means that you are using this matters to allow add event listener on the HTML elements, okay, and then here I'm just focusing the background of this password, okay? Now, after this I am disclosing this core. And now here I have to write that this is the password and password or add event listener. And then here I have write that this is just a blur as well. Okay? So this is the blur event. And then I have write that this is equal to E dot target, and target dot is Tile and is tiled dot. Here I'll just write that this is the background color. And this is the background color right here. Helps you understand now and seems a case like here, this is the background color right here, okay? And the background color here is the empty string because he already geared this background color right here. And then here I will pour closest score right here. Okay? As you can see that I just set some kind of focus events into the password field where I just change the text. Background color as all n. This is the blur event right here. So as it just to review that blur events choir when an element has lows, the focus. Let's just see. I just run this score. And when I just click on this password, so you can see here and then just click into the password field. So the focus event is running right here and when I'm just outing this password free. So here you can see that this is the focus outright here or lose the focus as the blur event. Helps you understand. Now in this example, I will tell you that how you can handle the focused and the blur events. When you move to the focus as a password field, the background color change to the blue right here you can see. And if you, if you move the mouse cursors do the username or any of the other thing. So this will change his color as the white right here. Also, this is much understandable to you. You can see here that I'm just writing this password right here. So possibly also you can see here hidden with the help of this input password fee. Hope so this concept is much clear to you guys that how we can run a focused un in the JavaScript. If you're not, if you not understand any of the problem, or if you not understand any of the point right here, please let me know and thanks for watching this lecture. 27. The Submit Event: Hey guys, welcome to this lecture. And in this lecture we are going to talk about the submit event in JavaScript. Or you may say that the onsubmit event in JavaScript, the submit events only occur when the user submits a form on the webpage. And you can handle the Submit Form event with onsubmit event handler. Let just see the example on the submit event and we will see that how this submit events work in JavaScript. Firstly, I will create a form. From here, I'm just creating an action and here we do not have any of the links, so I just leave it this as the blank link right here, as you may say that a dummy link when you're just adding the hash to it. Now here I am just writing method as the pose because VR sending the information. And after this, we have it right on submit E1, where I have to write alert message. And the alert message here is formed is and here I've derived from is successfully submitted. Okay? Now here I have to close this and then here, closer to semicolon and then closest tag right here. Okay? Then here you can see that I have to write one input field. And then after this input field, let's suppose I have write that this is the type of the text. And where do you ride the name which is equal to I. I would write the name as the first name right here. Okay? And then I have to close this firstName. And here I have right there, this is require. Now here I'm just creating one of the label. And the label here is the force name. Now input type, which is the submit. And sorry, this is a button right here. And, or input type, you may say that a submit button, okay? And then here you have to provide the value as the Submit. Here, as you can see that we are using the event handler, which is the name of On Submit legis, check the output of it, and save this. And here we are going to check that we are is the file. Yes, this is a submit event. And then go to the browser here you can see that let's suppose I just write that a funky here when I just click on the submit button. So here you will find that form is successfully submitted and I just press on ok. So you can see that how we can use this onsubmit matter to submitting some kinds of value into the JavaScript. Hopefully you understand now, if you find any of the problem regarding to this lecture, please let me know and thanks for watching this lecture. 28. Javascript While Loop: Hey guys, welcome back to this lecture. And in this lecture we are going to talk about the, what are the loops and what is the while loop in the JavaScript? As you know here in this lecture. As the title mentioned, we studied about the while loop in JavaScript, but it is important to learn about the concept of the loop in the JavaScript that what are the loops in real life? Or you may say that in a computer science, a loop is a programming structure that is repeated a sequence of instructions until our specific condition is meat. Program or use loops to cycle through the value n sums of numbers, repeat functions, and many other thing. Let's suppose if you have some kind of gold, let's suppose you, how you are a university student and you want to clear the university students. And some of your paper here is fail. So you will try, try to pass your paper until this will not be same as a condition like here in the loop. The loop function uses almost identical logical and send text in all programming languages. Does a specific statement or a group of instructions is continuously executed until a specific loop body or boundary execution is lead. Let's suppose the loop body will execute until a condition is reached. The result of the entire loop bodies first operations cycles serves as the next repetitions is starting point. As you see the flow chart of this loop here. So you can see here the loop are supported by all the modern programming languages. Does their implementation and the send text maybe differ, means that the implementation of the loops and the sentence are different in other programming language, but the concept of the loops are sin. Two of the most common type of loops are vile and four loop in any programming languages. Here, as you can see, we are going to discuss the while loop. But before proceeding the while loops, we just need to understand that what are the loops? As I just told you, that you are the university student and some of your paper here is fail. And you want to pause your paper. Okay? So you will try until your paper will past. Okay? So same is the case like here into the loop that if you, how conditions, let's suppose you have the condition here, is that a which is less than ten. And you want to print the loop condition until a specific condition is not reached. So this loop will be executed ten time right here, which is starting from 012345 and up to nine right here because these are the ten values right here, because we are starting from 0 right here. So Sam is a low body means that it will check the condition. Then if condition is true, that will run the statement or the block of code. That we'll move to the next condition and seems a case like this will create a loop right here. And if the conditions Meet falls right here, so simply that will terminate the program at the end, means that it reached the value ten right here. So this loop will be stopped their work. So as you see, loops are useful when you have to execute the same line of code. Rapidly means if you want to execute the same lines of board, a multiple numbers of time. So the loop concept come in the room for a specific number of times as long as the specific condition is true, which supports or lake. You can see that suppose you want to type hello world or hello message a 100 times into your webpage. Of course, you have to, you have to copy and paste the same line, of course, a 100 time instead of using the loop. And you can complete this task in just three to four minutes. But when you are using the loop, let suppose v, how the condition here that a which is less than a 100. Okay? And I just want to print the statement hello right here, which is a 100 time. Okay? So that will run the statement, a 100 time right here and at the end when it's reached 101. So that will simply terminate the program and then stop execution right here. Now let us come to the while loop statement in JavaScript. The JavaScript while statements create a loop that execute a block of code as long as the test conditions I would wait to true. Or you can say that this is the most basic loop in the JavaScript, which is a while loop, and which will be discussed in this lecture today. And the purpose of this while loop is to execute the statement or the block of code rapidly, as long as the expression is true. Once expressions become false, loop will terminate it. How you can see here. Let suppose v, how the while loop right here. So while loop will run until a specific condition or until conditions not meet falls if the condition is false. So Luke will simply terminates the program if all of the conditions are true, so loop will be executed his body. Hope so you get that. So as you can see here in the definition, that the while loop executed as long as a specific condition is true. Inside the while loop, you should include the statement that will end the loop at some point of the time. Otherwise your loop will never end and your browser maybe crashed right here. Here you can see that this is just a simple syntax of the while loop where you just simply write while and here you will write the expression. What are the expressions right here? Expressions here is let suppose we have like a and E which is greater than or less than a 100. So this is here. You will simply write the conditional expressions right here. And then you will run the block of code right here. The vile statements, I would wear the expressions before each iterations of the loop. So remember that posted that will check the expressions and then that will run the block of code right here. If the expressions I will refer to true, the while statement execute the statement and if the expressions I will have to fall. So the executions continue with this statement after the while loop. And the while loop, the expressions before each iterations true. Each isolations, therefore, the while loop is known as the preset loop. Hope so you understand now, so as you can see that this is just a flow chart of the while loop right here. Firstly, that will start from here. Then that will create the conditions that suppose h is greater than a 100 or a which is less than a 100 right here. If the conditions that will lead to falls. So that will simply go to the end condition if the condition here is true. Okay? So and then that will check the statement or a block of code right here. And then that will move to the next iterations. Here, I will tell you about the iterations. Here you can see that here how a, a which is less than five. And we want to run five iteration. And our variable here is let suppose 0. So 0 is less than five right here, or one is less than five right here. So here you can see that firstly, that will check the conditions one. So if one is meet right here, then that will Here you can see that one is less than five. Okay? So I will remove this. So one is less than five. So here you can see that my statement, my condition here is true, that will run citations right here. Then let suppose two which is less than also 53, which is less than also 54, which is less than also five. So that will run too as well. That will run three as well, that will run forever when it is reached to five, which is less than five. So this is not true. So simply the loop Bill and his work right here. Hope so. This concept is much clear to you guys that what are the flow of the while loop right here? Note that if you want to execute this statement at least one, and check the conditions after the each iterations, you should use the do-while loop up. So you get that, that why you use do-while loop and very you use while loop right here. We will also learn about the do-while loops in next upcoming lectures. Here, let us turn to the example of the while loop right here and here I am writing the script tag. Now here I'm just showing you or I'm just demonstrating the examples of the while loops to you guys. We're firstly, I will write a variable. Here, variable i, which is equal to I, just write one. Seam is a case like our example. This is the while. While is a keywords to declaring the while loop right here and I, which is less than or equal to, I just write five or you have the right eye, which is lesson five right here. So you have to write this loop right here, okay? Here, this is the keyword. Then here we have the condition and this is the parentheses. You have to start your code right here. Now here you can see document dot write, and here I have write that simple a paragraph tag. And the paragraph tag here is the number of while loop. Or a while loop is. Okay. Then here I'll just write plus, plus ice, right? I, and then plus. So I will tell you that what is this logic? And here I have to close this p tag right here, and then close this statement. Firstly, as you can see here, I strike document.write then paragraph tag. Then here this is the statement or the line of code. And here I just can't get in it my this variable right here. So firstly, that will run i which is equal to one. So condition here is while, while here is I, let suppose 11 is less than or equal to five. So that will execute this block of code 012345 time. So you can see here 1234510. So I think you are much confusing about 01234 time. So here, firstly, I will tell you that what is the index? So index here is, let's suppose v, how the five values, let's suppose 12345 values. So the index of these values here are, you can see that I just, I just divide this into the boxes. So here, the index really starting from 01234. So you can see here in the computer science sense, the value is, is starting from 0, that will goes up to number of n. So here we have the face value, so starting from 0, so 01234 right here. Also your concept is much clear now. And after this we are running this while loop. So here we just simply do the increment operator because this value will be starting from one and that will goes up to five. So here this increment operator will work like like here. I plus, plus work like, like here we have one. So here we'll do one plus one which is equal to two, then two plus one which is equal to three. Then three plus one, which is equal to 44 plus one which is equal to five. And here this is 0 plus one which is equal to one right here. Hope so this concept is much clearer to you about the increment operator. Now, let's just run this code. And here I just run this code into the browser. We are, this is the while loop. Ok, here you can see that this is the iterations which will starting from 12345. So that will run 0 plus one, which is equal to one, then 2345 right here. Okay? So here you can see that v how, while and while, which is a statement i, which is less than or equal to five right here. So thirsty that was set one right here. So one is true, two is also true, three is also true for is also true, and five is also a group. Just because of here, I just write five which is less than or equal to five. If I just write five which is less than five, so this statement will not be executed right here. Then you can see here that loop will check six, which is less than or equal to five. So this condition is false. So simply loop will terminate his program or terminate his body. This is how a while loop work in the JavaScript. If you find any of the problem regarding to this lecture, please let me know and thanks for watching this lecture. 29. Javascript For Loop: Hey guys, welcome to this lecture. And in this lecture we are going to talking about the for loop in JavaScript. It computer science, a four-loop. Or you may say that a simple for loop is a control flow statements for specifying the iterations which allow the code to be executed rapidly. For loop is a programming language conditional statement which is used to check for certain conditions and then rapidly execute a block of code as long as those conditions are meet. The for-loop is designated or you missed, is derived from other looping statements through an explicit loops, counter and loop or variable, which allows the body of the loop to know the exact sequence of the titration. How you can see that I will tell you the flow chart diagram of this for loop right here. Here. Just focus on this diagram. Firstly, we are starting our loop body from here. So as you can see here, we have the first condition is a if this condition is made, so that will simply move to this condition. If this condition is true, then that will move to this, that will move this loop to this sea conditions are then add glass that we'll move to that deconditioned and then execute this block of code. This is simply the sequence right here. Okay, I will tell you that. I will tell you first did this sequence. Now here you can see that I have to write. I have to show you that when we had the false statements are what we will do here. If any of the statement here is meet falls. So this loop body will be simply going to terminate this loop and finish the iterations right here. So this is not clear diagrams to you guys. Here you can see that firstly, our loop is starting from here. Then here that will check the condition. If the condition is true. So it simply that will move the block of code or the statement, and then that will move to the next iteration. And same is the case like if we have like 55 iterations. So that will simply move firefighter patients like that, okay? If I want none of conditions here is meat. So simply that will top the iterations of the loop right here. As you see, a for loop enables a particular set of conditions to be executed rapidly until a condition is satisfied. Imagine a situation when you would have to print the number of 100, what would you do? And when you type in the print F or when you type in the document.write print f is just in C plus plus Kumar. But here you can see that we have right document dot write a 100 time. So come on a 100 times or tried to copy pasted. It's simple task would take an eternity. Using a for loop, you can perform this action in three statements. How you can see that here, you can see that v, how the send text of this for loop right here. So the syntax of the for loop here is firstly, the four here is a keyword to writing the for loop. Then here we have this statement number one, then you have the right semicolon then is statement number two, then semicolon and Dennis statement number three and semicolon, you have to write block of code right here. Ok, here you can see that at Firstly we have to initialize our loop. How? You can see that we have for loop as a keyword. Then we have the statement number one. In first statement, we how to initialize our loop. How initializing the loops means that lets suppose here we have the value i, which is equal to 0. So initially loop initializing is where V initialize our counter or where we initialize our value to our starting value. And the initialization statement is executed before the loops begin. Then we have the test condition. The test condition here is let suppose i, which is less than or equal to or greater than or equal to five. So this is a test condition right here. So test conditions which will test if a given condition is true or not. If the condition is true, then the code a game and inside the loop will be executed otherwise, the control will come out from the loop. Hope so you understand that how this for loop work, then we have to move to the third citation or this statement right here, where you have to write the iteration is taken. What is the i iteration is taking right here. I iteration is statement right here is means that you have to write the increment and decrement operator. Let's suppose I plus, plus or i minus, minus right here. So these are the three statements right here, where you have to firstly, Right? Initialized like i, which is equal to two, or eyes which is equal to three. Then here you have to write like i, which is less than five, and then you have to write that i plus, plus. Ok. So i iteration statement is where you can increase or decrease the counter as I just told you that you have right increment or decrement operator right here. Let's just turn to the according example of that. Here we have to go to the coding example, and here I have right, one of the script tag right here. Firstly, I'm just showing you a simple example where I just simply print the FOR loop and I will show you the iterations. Let's suppose here we have the right document and I just write document.write. And here I have write, that loop is starting from here, okay? And then here I have write one BR tag. Ok. And here you can see that this is here. So as you can see when I just run this code right here. So with the for loop and yes here. So as you can see here that we have simply the loop is starting from here. Then we have to write the loop. Here we have the 44 is a keyword right here. Then over here we have to write i which is equal to 0, or you have write simply the counter which is equal to 0. Then here I have write that counter, counter, which is less than ten or which is less than 15. This is up to you. You have to write any value. And then here I have to write counter plus, plus. Ok. Then here I have to start the loop statement where I have write that this is document. And document here is I helped write document.write. And then here I have to print that a single line break, ok, here you can see. Then here you can see that I have to write that this is document. And here I have to write document.write. And where here I just write that this is current and current counter right here. Okay? And then here I have to write or I have to concatenate this counter. So you can see that here I am just kept getting, getting this counter. So concatenations means that if you have the counter is starting from 0, so 0 plus one which is equal to one, then one plus one which is equal to o. And seems a case like that will run up to value of 15 off. See you understandable here when the loop is top. So this statement will be executed right here, which is document.write. And here I have to write that simply. This is loop and loop here is topped. And here I have to close this code and closes coat as well. So here you can see I just go to the browser and refresh this hole. As you can see here, the value will be starting from 0 and goes up to 14 right here. So here you can see that there are traditions here is I want to print this value up to 15 numbers of time. Okay? So loop iterations will be starting from 0 right here. So 0 plus one, which is equal to one plus D, That was 0 plus 0. And then here 0 plus one, then one plus one which is equal to two, then two plus one which is equal to three. And then CME as a case like here, up to 14. And then after this, after this current loop will be executed like 15s number or 50 nitration, the loop will be terminated and that will print AS that you have to stop this loop right here. Hope so this concept is clear to you guys at how we can work with the for loop in the JavaScript. I think this example is not great enough to you guys. And here I'm just demonstrating one after the another example to you. Here you can see that v, how variables and variables here are, I just write that variables here are fruits. Here you can see that I have dried fruits. Here are apples. Then we how? Simple mangoes. Then here, cherry. And then offer that's here. You can see that I had ride that simply orange. And here I had right, that one of the, another name here. Let suppose this is banana, okay? This you can see here I have write for loop and for hair. Firstly, I'm just using the i iteration right here, as I just told you that our first step here is the loop initialization. Okay, so here I have the right variable. Variable is my let suppose i, which is equal to 0. So I just is tarred my variables from i here. So here you can see that then I just move to the second iterations right here, or second statement right here, which is i, which is less than fruits. Okay? And then here after this, I just use increment operator, which is i plus plus. Here you can see that I have the right document, dot write. And here you can see that I have right, simply a paragraph tag. And this is a paragraph tag right here. And then here I will concatenate the fruits right here, which is my variable. And here I just provide the index on i right here. Then here I just write plus N, then simply, this is the paragraph tag. Hope so you get that how we can create the for loop right here. Go to the browser, refresh this, and here you can see the output is not shown to us. And just because of this script tag. And here I just save and refresh this so our output is not showing to us. Let us check the error right here. And yes here you can see that we have to provide this condition right here. But I will not provide the length of the flute right here. So I just try and just use lent met her here. Okay, and here this code as well. This is our old coarser, don't confuse it right here, so we just work on that as well. Refresh this. So you can see here that firstly we how Apple then mango, cherry, orange, n, banana right here. So you can see that firstly, we are creating a variable on the fruit. And then here I'm just creating the list of these fruits right here. Okay, then here after this I am disputing a for loop which is a keyword. And then here variables. So this is my variable right here. Then for citation, second iteration will fastest statements secondary to the statement and the third statement right here. And after this, I am just executing these all block of codes right here. Hopefully you understand now that how we can work with these loop. So here you can see that at these are some of the loops element. Or I just use these loops element as the edit right here. So don't confuse it about arrays. We will learn about the air is next time in upcoming lectures, you just make a concept right here that we are creating the multiple numbers of food site here or multiple numbers of listed here. So v are going to work on this area in next upcoming lectures as well. Just focused on this for loop right here in this lecture. Hopefully this concept about the for loop is very much clear to you. If you not understand any of the point right here, please let me know and thanks for watching this lecture. 30. Javascript Do While Loop: Hey guys, welcome to this lecture. And in this lecture we are going to talk about the do-while loop in JavaScript. In previous lecture, you learned while loop in JavaScript. A do while loop is similar to the while loop, with one exceptions that it execute the statement inside the body of the do-while before checking the condition. On the other hand, the while loop, the condition is checked and then the statement in the while loops are executed. So you can say that if a condition is false at the first place, then the do-while will do while loop will be or would return ones. However, the while loop would not return at all. How much TV, how the blue, and then v, how the while loop, okay? If the condition is false, so this loop will run at one time or at least one time. If you recall the way the for and while loops work, you will remember that these loops type check for the loops conditions at the beginning of the loop. Unless the condition is satisfy, the loop will not be executed. The loop or the do-while loop checks the condition at the end of the loop. Which means that firstly, that will check their statement inside foo, and then that will check the condition. Okay? This means that the statement inside the loop body will be executed at least once, even if the condition is not true. Here you can see that the automation is the technique of making us system operate automatically. In programming, we use loops to automate the repetitions or repeat, repeat, repeat tasks. The loops are one of the most useful feature of the programming languages. And in this lecture we will learn about the vial and the do-while loop in JavaScript. The while loop or the do-while loop, take wins in the JavaScripts are similar to the conditional statements, which are block of the code that will execute if it's specified, result in the true. Unlike an if statement in which only I will wait one, a loop will return multiple time until the conditions are no longer true. Here you can see that this is our diagram or the flowchart diagrams of the do-while loop. Where you can see that firstly v, how the do's statement. You can see here. Then if the condition is true, then this loop will move to the while statement. Otherwise, that will run at first statement only. Ok. Here you can see the next stage that will simply move the loop body. And if the condition is true right here, so that will check the condition here. So if the condition is true, that we'll move to the two condition and then that will repeat this type of process again. Hopefully you understand now if the condition is false, simply that will execute one segment and then move to the debt, will move to the false statement, and then simply loop will terminate its reserve. But the do-while loop will run at least one time. Seems a case like here. Move to this target, then check this statement. Then that will check this. Condition. If the condition is false, that will simply run the false condition and then the loop will terminate it. This is a syntax of the do-while loop here. Firstly, we have to do, then we have the statement right here. Then why does a keyword due is also the keyword right here. Then that will check the condition in the while and simply print as a reader. As you see, the do portion of the loop come first and is followed by the while loop. The code block or the core block will run, then the conditions will be tested as it is an unnormal while loop. Let's just check the coding example on the do-while loop and we will see that how this do while loop works. I just write a script tag here. And here you can see that inside this script tag, I have the right variable and variable here is seen as a case like our old example. Isolate the variable here is counter. Then here I helped write document.write, and here we have the document.write. And here I decided that I am using the current counter right here. Then here I'm just concatenating this counter. Okay? Or here you can see that firstly, I'm just running this statement where I had right, that this is the starting of sorry, is targeting of the loop right here. And then here I have to concatenate one of the BR tag right here. Okay? And then closes score. Now here we are officially start our do while loop. Here. Firstly, I have right do. This is the do as a keyword, then these are the parenthesis, or sorry, the curly bracket records right here. And now here I have write that this is the document, document.write. And here I have to write that this is just an Current counter. Okay, then here I have write that this is the counter as the variable name. And then plus here I'll just write that one BR tag for the finger land break. Now here you can see that if I just write counter plus plus, and then we will move to the while loop. We're, I had to write that this is the counter if the counter is less than five. So simply you have, right, sorry, sorry, here. If the counter is less than five. So simply you have right, that the document dot write v or v. How? Loop statement. Stop. Okay? And you can see here, so we are going to execute this. And sorry for that. And here we have. And you can see that here. Firstly we how they're starting off the loop condition, then these are the loop what we are running right here, as you can see here, our counter is less than five. If we run counter is greater than five. So let's just check the output. So you can see here that the current counter here is ten, because I just tell you that do-while loop will run. At least one time. Ok. So as you can see that that will get the current counter and simply loop result will be terminated right here. Hope so. This concept is much clearer to you guys that how we can run the do-while loop right here helps you understand now, now here I'm just running one or the another example to you guys where you can see here, this is a very quick example. And here you can see that I just create a variable seeming like it's like that. Here I said I, which is equal to one very simple example. Then here I just write do-while loop. Inside the do while loop here I just write that this is the document or right? And here I have to write that. The number is, and here I have to concatenate my variable right here, okay, and here I have to close this core. Now here I just choose increment operator. And then here after this, I am just going to execute the while loop where I just run the condition. So condition i, which is less than or equal to five. And then here the closest chord. Let us check it out for right now. And you can see here. So let's just check that single line break. And you can see here, so this is a chart, heck, and this is a tr tag right here. Run it again. So here you can see that at first stage the number is one, then the number is two, then the number is 345 because we meet the condition right here. You can see that if you write ten here, then we will check the output. So you can see here the number here is two because that is running the current iteration right here. Okay, knowledges turned to this and no M. Explain more to you. Here. You can see that if our condition is neat because our variable of counter here is equal to ten. So firstly, you can see here that we'll print the facade iteration 0. Then here that will print secondary iterations one, then here 234, you can see here 12345 numbers. And then the loop will terminate it right here and stop. The loop. Helps you understand now that how we can run do-while loop in the JavaScript. So what is difference between the while and do-while loop? So the while loops differs from the do-while loops in one important way that with a while loop, the conditions to be able to get it is tested at the beginning of the each loop iteration. So if the condition express Elvish to default, the loop will never be executed. But with a do-while loop. On the other hand, the loop will always be executed once. If even the condition will be false or conditions, I will leave it to the false. Unlike the while loop, the condition is I will do it to the end of the loop. Iterations rather than the beginning. Hopefully you understand now, if you find any of the problem regarding to this lecture, please let me know and thanks for watching this lecture. 31. Javascript Switch Statement: Hey guys, welcome to this lecture. And in this lecture we are going to talking about the switch statement or the switch case statement into the JavaScript. At the beginning of this switch case is taken. The conditional statements are amongst the most useful and common feature in all of the programming languages. If you are working with C, C plus, plus Java or JavaScript or Python. So here I will tell you that how you can work with a switch statement in the JavaScript. But before starting the switch statement, I'm just simply call your some of the concept on the if and else statement. So as you know that if, else if statements are the conditional statements into any programming languages. And these all are the keywords. In addition to the if-else is taken as in the JavaScript has a features known as a switch statement. And the switch is a type of the conditional statement that will evolutions and expressions against the multiple possible cases and the execute one or more blocks of code based on the matching cases. The switch statement closely related to a conditional statements, which is containing the many as if block of chords. And then that can be often used in charge ability. You can also use with the if else if statements or sorry, with switch case statements as the while loop and other looping structures either because these all are the controls flow. In this lecture, you will learn how to use the switch statement as well as how to use the case and break statement. And you will also learn about the default keyword as well. Firstly, we will move to the switch statement. Switch statements, I will wait and expressions and execute the code as a result of matching case. At first it can look a bit and mediating, but the basic scientist is similar to that. If, that an ifStatement, how you can see that possibly Vi Hart right? Switch, switch here is the keyword. Then you had write expressions. Then you have run this with curly brackets. Then here, one another keyword is using as a case. Let's suppose we have a case one or case x. After completing the case body, we have to break this case right here. So brake is also running for or break is also a keywords to break. This case right here. If we hold the multiple types of case, let's suppose case number y or case number z. So we have to break each case with the help of this break keyword right here. Hopefully you understand now and add the last vehicle to run default case as well. As you can see here, that case is a keyword, switch is a keyword, break is a keyword and default is also a keyword right here. So this is the default ok. Here you can see that So when you are just her finishing this case here, so you have to end this case statement without colon and the break here with us semicolon and seen as a case like default right here. I just tell you the architecture of the if-else statement. So firstly, you can see here we have the if statement, then we have the else-if statement, and then we have the else statement. Seems a case like here. You can see that how the switch then we have first case, second case, third case, if none of the cases are match right here in the flow of the program, then the program flow will be directly moved with a default conditions and run the block of code into the default condition right here. Hope so. This concept is clear to you guys. So as you can see that here fasted that we'll evaluate the expressions right here or the conditions right here into the switch statement. Then the first case will be run right here. So the first case, which is the X right here, will be tested against the expressions. If it matched, the code will execute and break the keywords and that we'll move to the end of the switch block. None of the conditions are run right here. If this condition is not met, then that will move to this case right here. And same is the case like this case right here. If none of the cases are meteorite here, so simply that we'll move to the default case and run the block of code into their default case right here. Hopefully you understand now. So the objective of the switch statement is to give an expressions to evaluate, and thus several different statements to execute the based on the value of the expressions and, or the interpreters check that each case against the value of the expressions until the Met phone. Here I will tell you that how we can run our switch statement in the Java escape code. Let's just check that. Here I will teach you about the two-way that how we can write the switch case. Firstly, we have rights which and here you can see that that v, how the switch of grids. Okay, firstly, we are going to calculate the grades of the students. Here. I'm just creating a variable. Variable here. Our grades and grades here are equal to ice, right? That kids are starting from one right here. Here you can see that ice right document.write. And sorry, this is document.write here. And you can see that here I have write inter in your block. Okay? And then here I have write a single line break closest code right here. And we will move through the switch cases right here. Now here I am just writing the first case. So first case is for the grade eight. Our first input here is the a right here, which is the variable name. Okay? If this case is matched, so simply that will run the block of code and that will ignore all of the cases right here. So you can see here I have to write that document.write. And then here I have to ride. That, that is a plus grade right here, closest chord. And then we will move to the case number B right here. So as you can see here, we have the case B. And then here we are starting the case b right here. Now here, document.write. And then here you can see that here we have that B grade right here. Okay. Here as I just tell you that when you're just writing the case to breaking this case, you have to run a break statement right here. So break here is the keyword. Hope so you understand now, No, I'm just copy this and paste it right here for the case c right here. And this is a C, C, C grade and hair you have seen that we have the D grade as well. Ok. So as you can see here, that our grade here is d. So if none of these statements are executed right here, so simply that will move your default keyword. And you can see here I have write that document dot write. And here you can see that I have write that. Phil, Okay? And closes code right here. Now here after this you can see here I'm just running one of the another statement. So document dot write. And here you can see that I have to write that, that switch and did and closes core right here. Now here I am just running this code into the browser. So you can see here as the output here is firstly v, how enter to the blog, where we have the grade a and then we have the switch case ended right here. If you are writing b here. So you can see here and I just fresh this, so B block will be executed right here. Hopefully you understand now that how this switch case is working and how discrete cases similar to the if else if statements right here. Hope so you get that. Now here you can see that I'm just running the days is crypts right here. How you can see that I'm striding script. Now here I'm just creating the variable. And variable here is, let's suppose days, which is equal to here, I'm just writing the new. New is a method here and this is date as the method here. Now here I'm just wanting to switch case. Switch case here is d dot get method and get the date right here. Okay? And here you can see that I have to write that date. And this is the day right here. Firstly, I'm just running the case number 0. So hopefully you understand now that our, these are the starting from the 0. And then if the day is 0 right here, then here we have write that document, dot write, and here I have write that today is Sunday because our Callender is starting from Sunday. And then here I have write that a break statement right here. Then we are moving to the another case, which is case number one, and this is case number two here I just write that this is Monday, and this is Tuesday. Now here, this is a case number three. And here I have arrived at this is witnessing. And then here we will move to the case number for case number five. Case number six right here. So this is a case number five and this is a case number six. So Wednesday and Thursday. And here we have the Friday and Saturday if none of the cases are meteorite here, so the loop body will be executed. Default statement. So same is the case like L, this statement right here. So here we have write, document.write. And here I stride there no information found right here. And closes core here. Now here I have right, this is a break statement as well. And let's just run this code. So firstly a Hadoop copy this and then run this code right here. So we did us likely mistake right hairdo adding the colon and the place of this date. And here I had arrived one single line break and the HR tag. Now I just refresh this. So here you can see that here it's run that today is the monday right here because that is running that day. Here, which is Here's Amanda. Yes. That is running the case number one. Hopefully you get that that how you can get the date with the help of the switch case and how the switch case is works right here. So as you can see here, firstly, we have the conditions right here. If this condition is made. So that will check the cases right here. If this case is mu two simply that will execute this block of code and ignore all of these all block of codes right here. If none of the cases are meet right here. So same is the case like if else two, then that will simply move to the else block of core. So here at the place of S block of code here we have the default case right here. So the benefit here is of the switch case. As I know that you have this type of question that what is the benefit of the switch statements and why we use them here, the main advantages is that in this, the user can compare are no off the value of the variables by a single switch statement and using a number of the cases right here. It's make error detections easier as the program is divided into the more US through these cases. And it is generally used when many values of our variables are to be Compare right here. Okay? So the purpose of the switch statement is the type of the selections control mechanism used to allow the value of a variable or expressions to change the control flow of the program. And that will executions via the search and the maps. Ok, hopefully you understand now if you find any the problem regarding to this lecture, please let me know and thanks for watching this lecture. 32. Javascript Array: Hey guys, welcome to this lecture. In this lecture we are going to talking about what is an array and how we can use in our programming languages. An array which is a data structure consisting of a collection of elements, values, or variables, each identified by at least one. Indexed or key. Array are an important part of the programming languages and areas are used to store multiple values in a single data structure. An Arab journalists tore a collections of item at the continuous memory locations. And it can be also called as the list in the collection in most of the programming languages like Python. Okay? As it is, tell you a short answer on the array. So an array can be defined as n ordered collections of the item's index by the continuous integer. As it is. Tell you about the long answer. So air is closely related to a way how bookstore informations. Let, let, let, I just gave you the example of that here you can see that v, how English book, or v, how Java book. Inside the book, v, how ten chapters. Okay? As it just tell you that an Arab can be defined as ordered collections of the item. This is not mean that your chapter number one will come at the end of the book. Are you a chapter number ten is come at the first of the book. I just tell you that the array is the order collections of the items or the elements. Hopes event is ten out. Here you can see that how you can access the element often added right here. Remember our book example, where we spoke about the index and order in an array. Each elements inside the array has an index. The index is nothing but our numbers, as you can see on your screen. But the index is not a random number, as you know here you can see that we have l as a random numbers right here, which is, is TOR inside the array. I will tell you about the indexing as well. Ok. Here you can see that v, how five items or the elements which are as tore into the, added right here. In last example, you can see when I just worked with a for loop. So I just tell you about this indexing right here. So as you can see here, v, how five value, which is TOR inside and edit right here, which is 56, sorry, 5650. 342412. The indexing of these all values here are 01234, seems a case like that here. So as you can see, integer index is starting from 0 and goes up to one at a time. Hence, it is called 0-based index. Here you can see that on the index number 0, v, how the values Tor, which is 56, then on the index number one we have the values Tor, which is 50, and index number two, we have the value storages 34. Helps you understand now. So you can see here how we can accessing the element of an adder right here. So the index is starting at 0 and goes up CPU one at a time. But there are a few programming languages like JavaScript, Java stretcher, extract, SRA, veer, array indexes starting from the one, or sorry, not our Javascript or Java inside a lower programming languages or keyboard programming languages, the index as a starting from one naught zeros helps you understand now that inside the JavaScript, we are starting the index from 0, okay? But inside the other programming languages like LA, Ed Key bowl, so at adhere, VR using the index is starting from one hopes. So you understand now, but that is for clarity all our discussion in this series, we'll assume an array to help us 0-based index, okay? Because in JavaScript we use a zero-based indexing. Hopefully you understand now here you can see this is element in assorting form. So this area is sorting. Sorry, this is not assorted elements because salmon 1165, if you see the sorted element of an array. So firstly, that will take the small value, then capital value, and then seen as a case like that will goes up like here. If v, how the 2346789 types of elements, if we want to sort this error right here. So firstly, we have to write 234, then we have write 6789 because this is a sorted type error. This is not assorted type error. Ok, so leave it on the sorted array. We are making one of these separate lecture. So here you can see that v, how some kinds of value inside, which is storing inside the array and the index of these values right here. You can see here 0123456789. So this is length of nine size arrow right here, which is starting from the lower bone and debt goes up too upper-bound right here. As you can see here, that adding a new element in the array at different positions in wall or different kinds of heavy lifting work. Generally adding a new elements to the end of the array is n, Easy, peasy Foster and requires a less work. All we had to do it go one number higher. Buddha, last index number on the edit right here. So as you can see here at first-aid that how we can adding the new element to an array when we are working with our programming. So you will be completely understand this concept. Here. You can see that v hell, some kind of arabinose our age size. And we want to add this value into this area. So simply we are adding the 100 AD, the last of the erudite here. Hope so you understand now, so as you can see here, that this is our sorted form erudite here, every area is positioning, add his own. You can see here 12233445566778198900 right here. Helps you understand now. So we are adding one of the, another value right here, which is a 100 AD, the positions of index eight right here. So adding a new element at the end is faster and easier. Generally, the area method functions to use adding the value at the end, just add one, the last index used to accommodate a new element right here. Here we have the problem. And I am just defining a solution as well. So it was simple because we had to store just five size of array numbers. And now let us assume that we have to store 505 thousand integer numbers. Are we going to use 500 variables at that stage or not? Here you can see that to handle such situations, almost all the programming languages provide a concept which is called an array. An array is a data structure which can be store fixed size collection of the elements of the same data type. If you want to store floors. So these all numbers will be flawed if you want to store it. Integers to all number will be integer. An area is used to store a collection of data, but it is often more useful to think of an Eddie as collections of variables of the same type. Instead of declaring the individual variables such as number 12 and up two numbers of n. You just declare one array, which is a variable number of integer, which is a type of Like a number which is starting from 012. And that is goes up to number of n to represent the individual variables. And here you can see that that is simply write 0 up to number of n's are the index associated with the Arab variables. And they are being used to represent the individual elements variables into Eddy. So all areas are consist of continuous memory locations as I just tell you. So the loess areas, compounds or components, or the corresponds to the first element as the highest address today or last element right here. Here you can see that this is the first element which is touring and you can is TOR, array into the last element right here, helps you understand all of the theoretical examples of that area and what is an array? Let's just turn to the example of an array and we will see that how we can work with an editor right here. The here, you can see that I'm just creating a simple add a program. Here. This is a script. So this is a script tag right here. And here you can see that I'm just creating the variables right here. Firstly, I'm just creating a variable off. Let suppose here we have fruits are old examples right here, okay? What we already is turning moment. So fruits here are, sorry, which is equal to, so the food's here are, firstly, we are creating a pole. Then here we have cherry, then here we are mangos. And this is a comma right here. And to writing the ADA, you have to simply write this brackets right here. And this is equal to mangos. And here we have write orange right here. As you can see here, this is the four size of array. And if we see as the index wise, so this is three because 10123 right here, and you have to close this area with a semicolon. Now here I am just writing or I am just printing this array to you guys. Where you can see here that I am just simply print fruits as the name of the array. And here I have write that this is plus V or I have write, simple thing, a line break right here. And here we have to go to the edit ITU and edit dot HTML. Refresh this and here, there is not showing us the output. Let us take the ADA right here that what we did a mistake. So here we have the little mistake right here, and now it's fine. There's a go to the browser and rephrase it. So you here, you can see that I just get all of the elements from the air right here. And this is our area. Now you can write like how variable and the variable here is. You can see that I have to write the let suppose a color and the color which is equal to n is defining a single element. Let suppose this is a red. And here you can see that I just write the array which is color and refresh. You can see that you can also get a single element of the array as well. Now here you can see that how we can accessing the element often edit right here into the Java script. Any element can be accessed by their indexed using the square brackets notations. And adding index is odd numbered that represent an element's positions in an array. At index r is starting from the 0 based. And this means that the first item of an array is torr at the index 0, and then that will goes up to number of N. Let's just see that how we can, is toward the area indexed or how we can access the attic elements by the index wise. Here you can see that we have to write documents are right. And then here we had ride, let suppose this is fruits. And here I have to write this bracket and I just want to access the element on the 0 right here. Okay? Then here you can see that this is a BR tag. So that will simply access the element, add the number 0, which is a pull. So this is 0123. Okay, here I just rephrase this. So you can see here that will access the element as the upper-right here. Then here I strike 32. So let's just check that. So here you can see that that is accessed orange and mangle. So here, oranges on number three. Firstly, that will print number three and then number two, which is mango right here. Hopefully you understand that, that how we can access the element, element of an error right here. So you can also get the SRA length as well and how you can get that. So there isn't simple LinkFunction is using for that here you can see that you have right document and document.write here where you have write that this is fruits dot here, I have write that this is length as well. You can see, you can see that here. You can see that we have the four size of edit right here. Hopefully you understand now. Now here I will tell you that how you can create different integers arrow right here. How you can see me how the variable and variable here is. Let us suppose a person and the person which is equal to here, I just write that the person name here is nannies. And then here we have another person name image is john. Okay? And here I just also write the age of John as well. So you can see there that AGE hair is 25. Now here you can see that how we can access that. So simple, you have write document node, right, and the right here is person. Okay? Now refresh this. You can see here that firstly that will access Dennis John N, The Age of that as well. Hopefully you understand that, that how we can work with an array in JavaScript if you find a new the problem regarding to this lecture, please let me know and thanks for watching this lecture. 33. Javascript Sorting Arrays : Hey guys, welcome to this lecture. And in this lecture we are going to talk about the sorting an array in JavaScript. If you have an array of an object that you need to sort into a certain order, you might be tempted to delete for Java script library. But before we do, remember that you can do some pretty neat sorting with nature's Arrays.sort function. We will discuss this function later in this lecture. So sorting is one of the most significant issue in programming. Whether you are a beginner or are working developer, you will face sorting algorithms in your exams. Are jobs into you. Likely in real life scenarios. We don't need to implement any sorting algorithms from scratch. Javascript has it on beta and sorting method. And in this lecture we will cover this sorting an array in JavaScript. So what is a sorting algorithm? In computer science, a sorting algorithm is an algorithm that puts element of our list in a certain order. The most frequently used order, our numerical order or lexicographical order. For our specific case, a sorting algorithm, mostly D's with elements in the term of sorting their order alphabetically or numerically by changing the position of each element in the array. The sorting can happens ascending or descending based on your preference. How here a method is using, which is a sort method to sorting your adding. And here you can see that what is the sorting edit right here. So as we take a real life example on alphabetically wise, so we will see that how we can sort our alphabet. Let just see here, you can see I just write b, a, d, c, and e. As you can see here, that I just take five index right here into this array. Okay? This is 12345 values. If you take this as an index y, so 01234. And as you can see that this is the unsorted form, because B is at the first DCN E If we sort this array. So we will do that first day. You can see here that we are going to be ride like a. Then here we will write b, then here we will write C, and then D and E right here, as you can see that. Ok, so I just use this as a procedure. So I'll show you a completely step of this sorting error is right here. You can see that this is there. Suppose b, a, d, c, e. So firstly, you can see that I just US or I just swipe the values between a and b. So firstly we held a, then I am just writing B here, okay? And then same is a case like D, C, and E right here. Okay? As you can see, my two values here are sorted. Then I just write a at the place, be at the place. Then here I just sort these two values. So you can see here I just swipe c and d together. So as you can see, a, B, C, D, and E. So over all area here is sorted right now. So you understand now that how we can sort it as a graphical way. Let us see that how we can use a sort method and simply with the help of this function, we sort out our all eddy. So the sort methods allow you to sort elements of an array in the place besides running the sorted array, the sort methods chain the position of the element in original adding. By default, the sort method sorts the area element in ascending order with the smallest cost n largest last value. As you can see what I just she wants to you. Let's just go to the coding area and we will see that how we can sort the added right here. So as you can see here, that this is our edX example. So I am just taking this example right here. And you can see here that I'm just creating a variable of roads. And now here you can see I'm just simply changing the values of that. Here, orange. And here you can see I just write that this is layer. Suppose banana. Then here I will write that this is TV. Okay? So as you can see here, I just create 123456 type of eta right here where you can see their index while 1234, a sorry, as 012345, index of added right here, ok. Here you can see that I just created a variable. So variable here is I just write sort, which is equal to here. I just write that. I just want to sort this error right here. So for that purpose, hair eyes, right dot sort method. Hope so you get that. So this is the sort method to sort is a keyword right here. And this is the area what I just created right here. Now here you can see I have write document and document dot write where I had right, that this is fruits and fruits plus, and here I had to write that this is a BR tag. Okay? So this is just an output right here. So let's just see how we can check our output firstly of these fruits right here. Then here you can see, I can write that this is document.write where I had right? That this is our sword or sorts adding. Okay? You can see I just close this code right here. Now. I just go to the browser and here I'll refresh this. And you can see firstly v, how at Apple, mango, banana, cherry and TV right here. Because here you can see that this is our sorting method right here. You can see that with the help of this, we can sort our, this method right here. Okay? As you can see, firstly, this will apple than mango, than Nana, cherry, KV, and orange. So, so as you can see in the output that we are not getting any of the results right here. Like one, we are getting two result right here, which is a and m. So this is a and means apple and Mango's here are sorted instead of these all values. Your question will be that why we, this, this sorting algorithm will not sort these values and why this algorithms is sorting these values. So a question here is because here you can see there I just write a is a capital here, and m is also a capital here. So the sorting algorithms work. If you have all of the values are capital, means uppercase, or you are all of the values are lower case, or a small letter. So here I just use a mixed values. Let us see now into the code where you can see that here, a and M right here. So all of these first letters are, is smalls. Save and refresh this. So you can see here, I decide this array here is sorted form because a, b, c, then K, M, O. So you can see here these all areas are in sorted form right? Now. Hopefully you understand now if you want to give all of the values here are capitals, so C, a, and here I have to write m, Then here, o, then here I strive to be, and this is add the last k. So you can see here, and I just rephrase this. So here, these all values are in sorted form, is if you, if you give them mixed value like capital a, capital B, and these all values are small, so that will simply sort you are this area first and that will leave your and other values up so you get that the plant. If you find any of the problem regarding to this lecture, please let me know and thanks for watching this lecture. 34. Functions and Functional and OOP difference: Hey guys, welcome to this lecture. And in this lecture we are going to talking about the function. And I will tell you about the functional and object-oriented programming concept into JavaScript. In programming and named section of a program that performs a specific task. It's guard function. How? Let suppose v, how our entire system of library management system. And we have one function name which is book, okay, or a books. Books function is used or perform a specific task. This is card here in this LMS system, which is a function or a module. In this, since a function is a type of procedure or routine, some programming languages make distinctions between a functions which return a value and a procedural which performs some operations but does not return a value. Functions and the procedures are the basic building blocks of program. They are a small section of a chord that's are used to perform a particular task and they are used for two main reasons. Let just see here that V, how the LMS system, okay? Here we have the basic building blocks of the program. Let's suppose book authors and we have some kinds of like IB n numbers. Ok? So here you can see that in this big LMS system, we have three Moore's module. So these are the functions means that a big programs are divided into the small part of the program, which is reusable. The first reason is that they can be used to avoid the repetitions of command within the program. If you have operations that are performed in the various different parts of the programs, then it makes sense to remove the repeated code ants create us separate functions are the procedures that can be card from these places. Instead. Not only will this reduced the size of your program, but it will make the code easier to maintain and it will remove the possibility that some of the code segment will update, updated, but not other. Here you can see that for this lines of code, for this lines of sentence here that we'll see is that you were LMS system once you write the book function, then all of the modules view will define in this book so you don't have to write your own code again and again. So the benefit here is debt will reduce your program size as well, and that will reduce your programming effort as well. Here you can see that, that what is the function programming? If you have a background in the mathematics and you have a head-start on the function programming. So this is, this is because the function programming petagram treats computing like mathematical functions. If you do not have a mathematical background, did discord leave you feeling confused? Basically, the functional programming treats the functions and the data as the immutable. And you will pass data into functions. And it's generally returns that the data transform or some other types of the data. In functional programming, the function should never change the original data or the program state. There is a similarity to a Unix philosophy that each program should do one thing well, and a function should not touch various parts of your program. Instead, it should take it input and give you an output. How you can see that a function will take an input right here. And let's suppose the function here is book, so that will take an input, and then that will show you output of the program as well. So identically function should be pure whatever possible in a functional programming, this means that a given the same input, the functions output will now, output will always remains the same. Hopefully you understand now. Now here you can see that the functional vs. the object oriented programming. This is a dramatic departure of a, something like object-oriented programming in object oriented, object-oriented programming. In object-oriented programming, you often how a basic object with various method dedicated to chain their data or state that are a part of that object. Method may even alter data or estate, if not explicitly, is tilted, means that in object-oriented programming you have to create an object of the class and then you have to use it. But in practical Programs sometime That's mixins. And this dead set, it can make programs harder to maintain and it's not always clear what is altering that is T8 or the data and functional programming language was originally used to academic the environments, but can also help to prevent dots. Those sorts of problems. In function programming, you have to create the functions. But in object oriented programming, there is a concept of the classes and object you have to create. The class means that a create a class of book. And inside the clause there are lots of functions. Let's just turn purely to the functions that what function exactly do. Functions encapsulate a task. They combine many instructions in a single line of code. And you can see that most of the programming languages provide many built-in functions that would otherwise require many steps to accomplish. For example, computing the square root of a number in journal. We don't care how of functions does what it does, and only that is does it when a function is called, the programs leave the current section of the court and begins to execute the first line instead of the functions, does the functions follow the control where you can see that the function or the program comes to a line, of course, which contain a functions call. Firstly, you have to declare the function name and then you have to call your function name. Okay, the programs enter the function which is targeted at the first line in the function score. And all the instruction inside the function are executed from the top with the bottom's. The programs leave the functions and goes back to where it started from. Any data computed and return by the functions is used in place of the functions in original line of code. Here I know the question in your mind that why we need functions in the JavaScript to improve the readability of your code, you have to use function, improved the reusability of the code. You have to, you have to use function and some functions can be used in any programs rather than writing the same code from scratch. Like here, you can see that you have to simply write, let's suppose a function name here is book. So you have to create simple functions book and you have to define all of the functionality is inside this book function and then you have to use it. So this is called the, sorry, this is called reusability. What is a Readability? So readability means that here, when you are writing the book function, then you have write one another function which is author, and then you have right, one other function which is IBM number. So here you can see that every module or every function will be well clear to you. So this is car Readability. So debulking over the code would be easier if you are using the functions and arrows are easy to trace because when you are using the book module and you will find an error inside this book module. So you have to simply check the book function instead of checking all of your entire code up. So you get that, that how we can debug or how, how easier is debugging when you are using the function. Functions also reduce the size of the code which duplicate the set of statements are replaced by a function, which means that here you can see that if you are not using the function, so you have the right book many time into your cord. So once you declare the functional and she writes a function right here, so simply you have to call your functions again and again, or simply you have to call you or this block of code. So this is car, or this is called to reduce the size of your code with the help of functions. Hopefully you'll get that. Now here you can see that in the JavaScript, you have to firstly define the function, then you have to write functions in. This is the pedometer of your function and then you have write your statement, the line of code here, this is a program of factorial and we are finding the numbers of factorials right here. So you get that now just turn to the example and we will see that how these functions work. Firstly, you know, we already worked with a functions in this course, but here I will completely gave you a knowledge of function. Writing the function here v, how the function name first we are, let suppose a function name here is SBC, okay? As you can see here, that this function here is the keyword. And then this is the name of the function. And you have to write the arguments are so you have write the pedometers or the functions. Let's suppose you have right pedometer right here inside this parenthesis. And then you have write the block of code or statements right here. Hope so you get that. Now here you can see that I just create a function which is a name of hello. And we are, we didn't pass any of the parameter right here and here I just simply use the alert message to you guys where you can see that this is an alert message. And here, you can see that here inside that Java script. So here two types of functions, but I am just using right here, which is a user-defined function. And this is a built-in function, which is the alert message function right here. Let's just run this code right here. And this is a function HTML file. And as you can see here, so my code here is not running. Just because of, you can see here that I'm just simply creating a function. Okay? The function will be running because the function is running here, because we didn't call the function right here. Once you declare the function, you have to call that function as well. How you can see that here, you can see I have to go to the script tag VR. I described that. Sorry, this is a script tag here and here inside this body hair IS right that this is just a paragraph tag. And where you can see that here, right, that this is function copy, this is script pacer into the header tag. And here you can see, here I just create a form. And the form here, as you can see that inside this form, I just write the input and input here is a type of button. When I just click on this button. So I just use onClick method. We already work on that onClick method. And you can see that here is right on click method. So on click method, I just simply write the name of my function here is hello. Okay? And then here I just close this code right here. You can also define the value to that function. Let suppose the value here. Click me. Okay, here when I just go to this chord and refresh this. So you can see here that this is a function which is a p tag. And then here when it just click on this button. So this function will be shown me do assurance to me, output right here, which is a java script right here, when I just click on that, so this is just an OK right here. So as you can see here, that firstly we are going to create this function with the name of hello. Then here a user diversity, our default function is available, which is alert message. And then that will show me the alert message of the JavaScript right here. So you can also use document dot, write with it. Okay? And you can also use dopamine rod or tried with it. Refreezes and advantages. Click on this, click me buttons. So this all professionals to meet with the help of this function. Now here you can see that once I define this function name, so I don't need to write this function again and again. Ok, here you can see that I just simply copy. And here you can see that I just write that button and Button click right here. So here I'm just creating one of the, one of the, another button right here. So as you can see here, we have the two buttons and we'll just refresh this. So you can see here, I just click on this button or these buttons. So same function will be shown to me as the output right here. So this is car that will reduce your size of the program that will simply best for your code readability and usability as well. This is how the functions, this is how we can create the functions add. We can call the function, so we can call a function right here. Okay? No, just come to the program where we are going to create. Functions pentameter as an adult. And I will tell you that how you can create the functions pedometers. So till now, we have seen functions without the pedometers, as you can see on your screen. But there, there is a facility to pause different parameters while calling functions. These pause the pedometers can be captured inside the function and any manipulations can be done on those parameters of functions can take multiple parameters separated by the comma. How you can see here, this is my first function. Now here I'm just shooting one of the, another function right here. And the function name here is let suppose this is abc. Now here you can see that I'm just creating the name of this function right here. Sorry, the parameters of this function right here, but I'll just write number one and this is number two right here. Okay? And here you can see that I am instituting a variable. And variable here is I'm just writing a variable name, which is a total. And total here is number one plus number two. So you get that. Now here I'm just writing document.write and document.write here is printing the result and the total right here. Hope so you get that, that how we can create this function night here. So this is a functions which will take two parameters, the number one and number two right here and here you can see we are creating a variable. So when you're just creating a variable, so this is VR. And here you can see that this is the name of this variable here, which is total. So I just write total which is equal to number one and number two, I'm adding two numbers right here. And after this, I'm getting the result of this total light here. Knowledges See, this is just our defining of the functional definition of the functions or how you can declare the function. Now, you can see here, I'm just writing ABC, which is a function name. Here, I'm just calling the function pasty, I'm just providing the first parameter value. Let's suppose this is at ten and then we have one number to value here is 50. So what will that print? Will print 60 right here. Okay, and here you can see this is document.write. And then here you can see that single and break. And after this here, I started ABC and ABC here is printing the result as like one of the minus value. Let's suppose minus six t. And then here I just write that this is a 100. Okay? And this is also semicolon. Go to the browser, refresh this. So here you can see that firstly, at the first stage, that will result as the 60 pages. Because off here you can see that the value here is 50 plus ten, which is equal to 60. And then we have minus 60 and plus a 100. So the result here is, you can see that this is 40 because minus 60 plus 100 here is four p. Now, I will tell you the program flow. Firstly, we are creating a function name, which is ABC, then passing the two parameters right here with the name of number one and number two right here. Okay, then here you can see that I just get, I just create a new variable which is the name of total. And then here you can see there I am just calling these parameters right here, which is number one and number two right here. And then here documents or documents are right, and that will show me that result. Any of the numbers here, you can see that I am just calling the function. Function where I just provide the PRI, the values to this number one and number two, which is 1050 ands minus 1600. And then here, this is for a single embryo. Don't confuse it, okay. Now you can see that you can also create a function name, which you can also create a function with a first name and last name as well. So here you can see that ice right firstname. So this is a real life example. And here you can see that this is the last underscore name. Helps you get that. Here. You can see that a function name here is I just write names. Okay? Now as you can see here, I'm streaming this and after these here I'll just write that this is F underscore name, which is my first name as a parameter. Then I just write plus empty string and then I strike plus, which is a continuation here and which is last underscore name right here. Okay, this is just a function declaration and providing the output value. And now here you can see this is inside that function and closest score. Okay? And sorry for that and ok, now, fine. Here you can see now I'm just calling this function. So as you can see here, I'm just writing names. Names where I just write the name here is Bob. Then her eyes, right? The last name here is Ken. Okay? And then I just closes function calling right here. So here I'm just calling the function. And then here you can see I'm just going to browser and refresh this. So here as you can see, that our firstName Harris Bob, and second name hair is can't right here. Now, if you are defining the value to that function, sorry, the pedometer number one. And if you're not providing the value to the pedometer number two. So what will happen there? Just C plus D, I'm just writing the value. Let suppose this is Bob, and here you can see I'm just not providing any of the other values to that lastname. Rephrase this so you can see here. So firstly, I'm just writing a single line break, document.write and single and break here. And you can see that. And as you can see here, that will print firstly the Bob and second value is shown me, shows to me that it is undefined value because we didn't define any of the values right here. So you get that, that how we can use the function, how we can create the functions, how we can call the functions, how V can adding the parameters to our function. This is how functions work in the java script. Hope so you understand all of the points right here in this lecture. If you not understand any of the points in this lecture, please let me know and thanks for watching this lecture. 35. Javascript Function Expressions: Hey guys, welcome to this lecture. And in this lecture we are going to talking about the function expression in the JavaScript. So far as you work with defining a function's calling a function than adding the parameters to the function. Here in this lecture, I will tell you that how you can create a functions expressions. So a function expression is very similar to and hands most almost the same syntax as the functions declarations. You already studied about the function declaration in last lecture. So the main difference between a function expressions and the function declaration is the function name which can be omitted in a function expressions to create anonymous function legacy according example. And I will tell you that how we can create this function as the anonymous function right here. Here you can see I'm just creating a function in the script tag, which is the name of, Let's suppose variable and variable here is some, okay? And which is equal to here. You can see that I am just writing this as the function name. Then here I'm just passing the parameters as the number one and this is the number two right here. Now you get that a difference between a function declaration and the function expression. So here you can create a variable which is a sum. And then here you can see that this is a function. Ok? Now, after this, the same example, so valuable here is total, which is equal to I. Just write number one plus number two. And that will use a return statement is our total. So that will returning the value of this total variable right here. Okay? Now here after this ice, right document dot write and document.write here is firstly, I just get the sums where I just provide the values to that pedometers. So let suppose this is five and this is 80 right here. Then I just can coordinate. And I just concatenate the BR tag and closes or so here, this will print 85 As the sum value. Now I decide variable, variables here are, you can say that let's suppose some. And then here that will write sums, which is my, this variable name or a function name. And then here you can see that this is 20 and then provide another value which is 60. So now here you can see that that is right. Document dot write, where I had to write the value of this sum as well. Go to the browser and check the output. So at first stage you can see that that is print 85 just because off. Just because of five plus 80, which is equal to 85. Okay? And then here you can see that this is 60 plus 20, which is equal to 80 right here. So this is how you can see that a function expression is work in the JavaScript. So in this function, in this code, you can see that we use, we already used to create a function and we all already create a function's calling. But here you can see that firstly, we are creating a function, simply provide the values to it. So for me, simply provide the logic and then return this value. And seems a case like here, you can see that and we are going to calling that. So here, as you can see that this is just an function expression right here. This, our code here is function, sorry, highway did I'm little mistake right here. Here you can see that this is a constant declaration. Sorry, in our last lecture here you can see that this is a function's declaration. Ok? And here you can see that this is a function expression right here. So you get that, that how we can use a function declaration and a function expression. So this is also called the function declaration inside this function expressions, but don't confuse it right here. There is a simple difference between that. So there is no need to put a semicolon after closing curly brackets in a function declarations, but function expressions on the other hand, you should always and the code with a semicolon. How you can see like here. You can see once you declare the functions expression, so you have to close with a semicolon right here. Hope so you understand now. So if you find any of the problem regarding to this lecture, please let me know and thanks for watching this lecture. 36. Javascript Variable Scope: Hey guys, welcome to this lecture. And in this lecture we are going to talk about the scope variables in Java script. Before starting this scope variable, we just need to understand that what are the scope variables and how we use them? Variables are a fundamental part of many programming languages and are amongst the first and most important concepts for noticing quarters to learn. There are a number of different properties of the variables in the JavaScript, as well as the several rules which must be followed when naming them. In JavaScript, there are three key words using to declare a variable. First one is variable, second one is constant. And third one is let n. The, each one effect how to code will interpret the variable differently. In this lecture, I will tell you about that, how you can declare the variables and how you can use them. As you all know that variables which are containing or used some of the memory space and that will restore some of the memory is based in to the disk. We held two types of variables. First one is the global and the second one is the local. The global variables are those variables, those declared outside the function block. And the local variables are the variables which are declared inside the body of the function. Let's see. Here we have the function which is a name of ABC. Here you can see that this is the function body and inside this body when you're declaring the variable. So this means that this is local variable. If you are declaring the variable outside the function body and you are using them inside the function. So this means that this is the global variable. Hope so you understand now, now here you will see ice right script tag. And inside this script tag, here I will write a function. So function here is, let's suppose ABC function. We already work on the function. Here you can see you are using let as creating the variables you are creating VR to creating the variables, you are creating the constant to creating the variable. This is up to you. So here you can see that I have right, that variable. And here I just write that this is local variable. And the local variable here is z equal to Harris, right? That this is a local variable. And I'll just close this code right here. As you can see, that here we are creating a variable inside the function body. This means that this is a local variable. Now here you can see that I have read that document and document.write where I had to call diff variable, where I'd tried there, this is a local and this is a local variable later, okay? And closest score right here. Now here, I just call this function. Refresh this into the browser. So here you can see that this is a local variable and this is showing me the output variable which is declared inside a function body is card local variable. Now here you can see when I just declare a variable, which is hair, eyes, right? Var, and this is global. And global Here is a variable. V is equal to heterozygous is global variable, and I just close it. And here inside this function body, I just simply calling this variable name right here, which is a global variable. Okay? Here, I just rephrase this into the browser so you can see that this is the global variable right here. So as you can see here, a function which is used outside, sorry, a variable which is used outside the function body. This is car global variable and variable which is used inside the function body. So this is called a local variable. A local variable will always be used inside the function, but with the help of global variable, you can access this variable inside many of the functions bodies where you can see that here the function is ABC. Let suppose you have another function which is x, y, z. So you can call this global variable anywhere inside your code. So you understand now. So these are, these are the global and the worry was localist cope in JavaScript, if you find any of the problem regarding his lecture, please let me know and thanks for watching this lecture. 37. Cookies in JavaScript: Hey guys, welcome to this lecture. And in this lecture we are going to talking about the cookies in the JavaScript. A cookie is a small text file that lets you store a small amount of data. It's nearly four k b's or something more than that. So on the user's computer, they are typically used for keeping track of information such as the user preference that the side can retrieve to personalize the page when user wizard the website next time, how let us see here, when you search any of the website right here, let's suppose I just write x, y, z, n. Ok? So here you can see that this is x, y, z. Our website when I just login to that, sorry, when I just started this. So here, at that stage you can see here you will find a Cookies option. So here you will find some of the messy that you want to accept this cookie. So click on, okay, otherwise cancel and you just click on OK. So when you come to this website next time, so you are cookies will be saved, saved, right hip. So cookies are an old client-side storage mechanism that was originally designed for use by the server-side scripting language, such as PHP, ASP.net flaws, Jaguars Director Hall, our cookies can also be created, accessed, and modified directly using Java escape, but the process is little complicated and messy. How? So a web browser, we just go to the web browser and the server, which is using HTTP protocols, which means that hypertext transfer protocol to communicate and HTTP is a stateless protocol, you know, but for a commercial website, it is require maintain sec sessions information among the different pages. For example, one user register ends after completing many page, but how to maintain the user's section information across all the web pages. Here, you can see that I will tell you that how this Cookies and thesauri, how the cookies work. So your servers send some of the data to the visitor browser. You can see like here, you have a some kind of cookies option. So that will collect some of your data and send to your browser from a cookie. The browser may accept the cookie if it does, it, is it store as the plane tags record on the visitor? Harddrive means that the cookie is saved into your own heart right? Now, when the visitor a rise at another page, you are on your side. The browser end. Same cookie to the server for retrieval. Once this retrieval, our servers knows, remember what was in store, alien. Hope. So you understand now that our several Understand that what was it store in these cookies earlier? So the cookies are in plain text data which is recorded for a five variables lens field. First one is expires, then we have the domain, then we held a path. And we also have the secure and names and the values they expire is the data of the cookie will expire. If this is blank, the cookie will expire when the visitor goods browser, how, when you quit the browser here. So cookie will be expire idea. What is a domain? So the domain name of your website is saved. Your cookie, like this is like www dot funky program or.com. Okay? So this will save your cookie as well. When you have the path, the path to the directory or a web page that said the cookie. This may be blank. If you want to retrieve the cookie from any directory of the page, then you have the secure. So if this field contain words secure, then the cookie may only be retrieved with a secure server, not anything else. Then you have to set your cookies named that what cookie name will be stored right here. How you can installing the cookie. For that purpose here, you need a command. Let suppose here this is script tag, and inside this, I just write that document. And document dot here you will write cookies. Helps you understand now. Then here, first the eyes tell you that you have to define the key. Then here, the value. So this is a key and the value right here, the cookie key here is the name and the value here is same. The value. Nancy Miller case like you had to define key number two and then you have write value number two. So this is up to you. And then the last you have, right? Like her expires. So expires here is u will be defined simply the date and add the and you have to end this with a semicolon right here. So you get that. Now here let us come to the coding example of that. So here you can see I have write a function to function here is ice, right? This function is cookies. Here IS right. If document dot here, I will create a form. And eyes right from here. And form is the name of firm. We're a hub, right? Action. And action here is the empty link. Here IS right intern name. And then here I will write that input. Input, which is a type of text. And then here you will write that the name which is equal to hair, I decided let suppose this is your name. Now here I just create one input field, which is a type of button made. You have to set the values. We're eyes right? That set cookies. Okay? And here is right on click method. So this is on click method. And then here I write that this is cookies as well. So this is our function name, or I'm just calling right here. And then I have to close my code right here. Now here you can see that I have right Document which is the form. And then here I will write that the name of that, you can see that. And the name here is your name. Okay? So I just write the name here, which is your name. And then here I will write the value. Okay? Then her eyes, right, plus, and then closest chord and closer score right here. Now here I will write document and document or cookie. And then here I cited a cookie which is equal to the name. And I strike plus cookie and, and cookie value. Okay? Now here you can see that I just remove this from values, sorry, remove this form value. And here i decide value which is equal, equal to this empty string right here. Now, let us check that. And here inside that, I have two card this and hair eyes choose alert message where I just ride that, enter some values for cookies. So this is just an enlarged measure what I'm showing you guys. And then that will return the value right here. After this, you can see here that firstly I'm just writing the document dog cookie value. And then after this, so yes, ok. And here I close with our curly brackets. And then here you can see that I have to write that this is a cookie and cookie value. So you can see here, this is a cookie value as a variable which is equal to here is right, that I just use escape, which is document.write form. And then here I have write that you're underscore name. And then here I is right, that the value here is plus and a semicolon and then close the score right here. Now here I said that this is document and document dot write where I just setting the cookies. And then here I'll write that a name which is equal to plus cookies value for the cookie value. And then I just close the score right here. Now let's just check. So I just tell you that cooked to setting the cookies in the JavaScript is a little bit confusing right here. And I just, I know that you have a little bit confusion. Firstly, I just create a form. So form here is when I just run this code. So you can see here this is our form right here. Okay? Then here we have one input field, which is a text. And the text here is you are a text type, here is texts and the name here is username. So you can see here, okay, and this is the intern name right here. Now here you can see I just set up button, set the values here is, is a set cookies. And then here I just used this function name right here. I'm just calling this function name right here. Then here you can see that I just create a function which is a name of cookie. So here I just use if statements. So if document.write form dot fewer name and the value here is empty string just because of we are giving the value right here. So that will collect the values from here. So if this is if the user will enter the values, so here that will show alert message which is intercept values for a Cookies and that will return the value. Here you can see that I just create a variable of cookies values. Then here I just write escaped document dot form, DOD Heuer named dot value here that will possibly collect the document from. Form means that will collect the information from the form, then that will collect your name, and then that will set the values into the cookies. Here you can see that I just tried document or cookie, which is equal to name, dot name. And then here I just can't get in it this value. And add the last hair that we'll setting the cookies right here. Now, as you can see here into the browser that we didn't have any of that saved cookie right here. Ice, right? Funky, set the cookie. So you can see here. Here you have seen that we didn't find any of the cookie right here. And now you can see that here we have our little mistake where name is equal to and here IS right, that this is, let's suppose any name like here I started that this is customer. Okay? You call when you are just when a customer will visit your website. So it's Virginia name right here. And this is also on changing the name right here because your, unlike here you can see that you're underscore name is not taken right here with underscore sign. Here you can see their eyes, right? Funky said the cookie and head. You can see that you have setting a cookie name as the funky. And you can see here. So as you can see here, that our cookie name is saved right here with the name of funky right here. Hopefully you understand now that how you can create the cookie and how you can set the cookie. Now, I just refresh this. So if your field here is empty, so when I just click on this Set-Cookie, so here that will show me a message, alert message which is into your enter some value for the cookies. So this is how we can create the cookies if you find any of the problems we got into this lecture, please let me know and thanks for watching this lecture. 38. Javascript Page Redirection: Hey guys, welcome back to this lecture. And in this lecture we are going to talking about the page redirect or PhD directions in the JavaScript. You might have encountered that a situation where you click a URL to reach a page a. But internally, you were directed to the editor page B. It's happened due to the page three directions. And this concept is different from the Java script page refreshment. You are just refreshing the page. There are some reasons that you want to redirect our user from one original page to another page. You didn't alike to, you didn't have like the name of your domain and you want to redirect your users to the another domain. This is the one case. You how a buildup various page based on your browser versions on their name, or maybe based on different countries. You can also use this console or you can also use this technique for gain your audience as well. Like here, this is, this is just for advertisement purpose as well to redirecting your page. Now here I will tell you a simple technique that how you can redirect your page from one browser to another browser. Here I just tried that H1 tag and here I just write that this is page the direction. Ok. And here you can see that IS right that a button. And the button here is onclick, or here I just create a button. Button here is onclick. And then I just closes buttons right here. Now here you can see that I have to create a function, and the function name here is ABC. And then here I will write that our location, so location dot Replace is using for the radar actions of your page. So I just want to read on this page or this link to my website. And you will see here I'm just giving the link which is SCTP double backslash and funky programmer.com. Okay, and here I will copy and paste this function name. So I'm just calling this function name right here. So button here is Click Me for re direction. Okay? Now here you can see that I have checked this output into the browser. And you can see when I just click on this button. So you can see here my page is redirected to this funky programmer website. Okay, so sorry, this is funky program or dot UK. Now, go back and refresh it again. Here you can see when I just click on that. So this will be moving to this website right here. Hopefully you understand now that how we can redirect our website from one location to another location. So this is how you can redirect your website. So as you can see here, I just redirect this website vid a button. Now, I will tell you then when you are refreshing your website or when you are just loading your website. So your website will automatically. Moving to or automatically redirect who you are and other website. For that purpose, you just use set setTimeout method. And here you can see that I have to write one of the script tag. And then I just write here that this is a function. And the function here is let suppose XYZ or function here is the direct. Okay? So here you can see that offer, this IS right, set and set timeout. And the timeout here is pasty. I'm just defining a time Odette, location and location dot reload. Okay? And reload here is true. Then after these eyes, right? Hama and t, and this is the T as my pedometer for the timeout. Now here, I just used Nikon body of the page. And here you can see that I just remove this function. And here you can see I have write that on load method and unload method here is ice, right? That this is Java Script. And on Lord method here is Java script. We are, I have read that article. Refresh, and here you can see that out here refresh here is 500. Ok. And here you have to see that this is just an paragraph tag. And here I said that this page is G direct in 5. Second. Okay. Now here I just copy and paste this into the header tag. And let's just run this tab when this core. And you can see here, this page is redirect in five seconds. So this is how you can set your time out to your webpage, to the redirection here you can see that I'm just redirecting the website. So eyesight window dot, location and location here is equal to eyesight. That HTTP double dot node backslash, where I said that www dot funky program or dot uk. And I just closes code right here. Okay? And then here you can see that I had to write that this is, let's suppose document, document.write. And here you will see that I have right, that you are page will be redirected to our main page in five seconds. Ok. Here. You can see that after this, I have to set the time interval or the timeout where I just write that here, redirect. And then here, you can, sorry, this is our redirect, which is a function name. And here you can see that I have right there redirect here is 5 thousand. So 51000 means that when you are just writing 1000 and this means that this is your 1 second right here, okay. Here you can see rise, remove this from this main page. This is just for your understanding. And now I just refresh this. Here you will find that our page will be redirected to the funky program or website after five seconds automatically. So as you can see here, this is a page read directions. This is how our page redirections work. Hope so you understand now, if you find any of the problem regarding with this lecture, please let me know and thanks for watching this lecture. 39. Javascript Confirmation Dialog Box: Hey guys, welcome to this lecture. And in this lecture we are going to talking about the confirm dialogue bulbs in JavaScript. You already studied about the dialogue vaults, alert messages. The confirm dialog box means that you have the two options, which is OK and Cancel. A confirmed dialog box is mostly used to take the user consent on any options that display our dialogue box with two buttons, which is OK and Cancel if the user will click on ok. So this will simply proceed to the next tab or confirm, and that will return the value as a true. And if the user will click on cancel, so that will confirm the result as the false. Let's just check the output for that. And here you can see that I have write this script tag, where you can see here I just create a function, function which is name of hair. I tried that. Dialogue. Confirm. Okay, and then here you can see eyesight. Now here I'm just creating a form. And the form here is the input field of. So this is the input field which is a type of and button here is the value of, value of. Click me. And then here you can see that I just used, I just call this method, call this function here, which is a name of dialogue confirm. Ok. And here you can see that I have to close this function name right here. Now here insight that I'm just using two values, which is OK and Cancel. And here I just create a variable. Variable here is ice, right? That confirm and Sue and I just write it as a variable name and Harris, right? That confirm as the keyword. Here you can see that I write that. Do you want to continue the page or continue anything you have? Write this message right here into confirm. And here you can see their eyes, right? If, if CON, Which is equal, equal to true. So you have to thin the output as document dot write. And here you can see that hey, eyesight that users want to continue the page or the process, anything. Okay? Now here, eyesight that, that will return the value.s, the true right here. Now after this, I just moved to the else condition. And as hair is ice, right, that this is document.write. And here you can see that I had to write that this is the user and the user does not want to continue the page. Okay? And then I scroll score right here. Now here you can see their eyes to turn as the false value. Okay? And this is the false value. Hopefully you get that here you can see eyesight paragraph Tang and I just write that this is confirm dialogue box. I just check this output into the browser. And here you can see that this is a button which is shown to me, and I just call this function name into the button onClick method here you can see that firstly, we are creating the variables. Then here I'm just creating a variable limit is gone. And here I just write confirm message, which is do you want to continue? Confirm has a keyword. Then here you can see I start if statement and if this variable, which is equal, equal to true, so this means that this is you want to continue. This means that this is a coding for the OK button. And this coding, this is according for the cancel button right here. Now here when it's click on Click Me. So here you can see conform message is shown to us, which is this page says that do you want to continue if you click on okay, so here are the message shows to you that users want to continue the page. And if I just click on cancel here, so users do not want to continue this page. So this is how confirm dialog box work Hindi JavaScript. If you find any of the problem regarding to this lecture, please let me know and thanks for watching this lecture. 40. Javascript Void Keyword: Hey guys, welcome to this lecture. And in this lecture we are going to talking about the void keyword in the JavaScript. And I will tell you that how this void keyword in JavaScript and how we use them. Void isn't important keyword in JavaScript, which can be used as a unitary operator that appear before it's single operands, which may be of any type. This operand specifies an expressions to be our unweighted without returning a value. White keywords in JavaScript which donates that a method does not have a return type. However, even through a constructor method can never have a return type and it does not hell, avoid keywords in its declaration. Let's just turn to the coding example of this wide keyword and I will tell you that how you can work with it. Here. I just use void. So as I just told you that wire is a keyword and here I just write a function. Or Why'd you may say that a function, or you have to write any of the name with this void as the keyword. Okay? Here you can see that I just created a void keyword. Then here you have write that let suppose this is Java script and then this is one of the, one of the, another example with a void function as well, okay? Or you have to declare a wide key word as the word, and then you will have to write, let suppose a function and this is one either way you have to write this wide keyword and add the last vehicle like Java is CREB. This is anything I am just writing here. You can write any of the Thing right here. So I just write this column and then here I write wide and then I started function and then closes. This is some of the methods you have. Write a void as the keyword. Now here I will draw a simple examples to you guys for your better understanding that how we can work with a void keyword in a Java Script and how we can use this in real life examples to you guys. Okay, let's just turn to the while keyword example. And here I just create one of the link right here plus d. I'm just feeding a message here or the paragraph tag, which is P tag. And here I started that this is void keyword. Now here you can see I have to write a which is anchor tag for link. Here I write that this is JavaScript, and I write this column sign here, then void as a keyword. And then I decide that this is document and document.write, where I have write that high void. And then here you can see I have right venue as well. And then after this, you can see here there IS closest chord where I just right there this is. And here I have two closest score. And here I started that this is Click Me OK. And here I stride single petitions mark. And it seems the case like here. And you can see when I just check this as the output. So you can see here my quarters right here. Now, I just turned to the one of the, another example and we'll show you completely understanding of the white keyword. So let's just remove this. And here I will turn to the example of this wire as a keyword right here. We're, IS right that a firm. And here I'm just creating a form. And the form here is the name of form number one. Okay? Then here I strike a HREF, which is an anchor Tang and reference. And here I cited this is Java script and the JavaScript here is I have write that avoid keyword and wired keyword will show alert message where I had right, that you clicked on this hyper link to show the message. Okay? And then here you can see that I have to close this core. And here I just write that. Click me right here. Okay, now you can see here I just use void keyword and refresh this. And when I just click on that, so you can see here I alert messages, shows to me that you click on this link. Okay, this is how you can work with a wide keyword in the JavaScript. Once again, I will tell you that a java script wide keyword is used in a function second nature to indicate that the functions does not return any value. Basically in java script, it is n unitary operators which will be appears before it single operand. And this operator defined an expressions which will be elevated without returning a value. Void keyword is used in a function signature to indicate that the functions does not return any value, okay? And it will take an expressions of any type as its operand and the value define the wired. It just means that void means that which has no return value, which means that this is a value of 0. Functions which actually determines null and work wonderfully by canceling the page load. Hopefully you understand now if you're not, please let me know and thanks for watching this lecture. 41. Javascript Page Printing: Hey guys, welcome back to this lecture. And in this lecture we are going to talking about that, how you can print your page in the java script. Many time you would like to place a button on your webpage to print the content that the webpage via an actual painter. Javascripts help you to implement this functionality by using the print function of the window. As many time, you realize that if you use your LMS system or if you use your school management system or you have use any types of system like a pause. There is an option available for printing like here is school minibus system. There is an option available to printing the reports. Lms management system, you have to also prints the reports as well. In pause management system, you have to print the precepts. So all in all of these systems, there is using a brain functions or a print matter. Let's just talk about this print method and you will see that how we can work with it. Here. You can see that I'm just creating firstly, our button to printing some of the output or some of the pages. Here. I just use onClick method. Okay? And then here I will close this and here is Rider slit to print the page or anything. Okay, so I just right click to print. Here. I'm just creating a script tag. Where inside this script tag I'm just creating a function right here where you can see that I write function, which is display function. And then here I just use window dot print method. And I just close this code right here. As you can see, the JavaScript function, which is window dot print, is the current, is printing the current webpage when you have to execute. How you can see that here I just use this display method and I am just calling this method or a function inside this button. And let us check the output right now into the browser. And you can see that here we had a printing option right here when I just click on this print button. So you can see this entire screen is presenting to us like here. You can see I just write that as one tank. This is printing page. Now after this, I have to write a paragraph tag. Vr, going to print this page. Now, refresh this. And you can see here we have this kind of messy right here or any page right here, when I just click on this button. So you can see here that this message is shown to us. So you can setting more of these printing setting from here. So this is up to you. So as you can see, this is how we can print our entire page in the JavaScript. Hopes we understand now, if not, please let me know and thanks for watching this lecture. 42. What the Document Object Model: Hey guys, welcome to this lecture. And in this lecture we are going to talking about the document object model in JavaScript. The DOM document object model is an interface that represents how you are as HTML and XML documents are raided by the browser. It allows a language JavaScript, to manipulate its structure and didst hide your website. After the browser reads your HTML document, it creates a representational tree, which is called Document Object Model and defines how tree can be excess. We will learn about that tree in literary In this lecture. The document object model is a programming interface for HTML and XML documents that represent the page. So that's program can change. The document is structured, is style and content. The document object model represent the document as the node and objects. That's why a programming language can contact to the page. A webpage is a document. That document can be either displayed in a browser window or the HTML source. But it is the same document. In both cases. The dome represent the same document so it can be manipulate. The document is an object-oriented representation of the webpage, which can be modified with scripting language such as Java script. As you can see here on your screen, that this is our representational tree. And here you can see that how it can create by the browser. Firstly, you can see here that this is our root window. Ok. So what is the window object right here? This is a top heirarchy and it is the almost element of the object hierarchy right here. Then as you can see here, that V, how some kinds of elements right here, where you can find the elements are HTML and XML. So these are the elements type right here, which is turned into the browser elements helps you get that. So this is, you can see here the window hierarchy. Then we have the document objects you can see here. So these are the documents objects. And each edge humor HTML documents that get loaded into a window become an object document. Then you can see that a form body, so everything is enclosed in the form, which is type of the tags. Ok, so here you can see that we have the body tag right here. And here we have also elements right here. Okay? So as a hierarchy you can see here that firstly add the route stage. We have windows where we talking about the frames, then we talking about the parent windows, then we talking about the self constructors, and then we talking about the top padding. So that will be linked locations, document and history. Ok. So now here you can see that after this v, how documents and inside this document v, how some kinds of documents objects are linked. So document objects hell, some kinds of links, tags, some kinds of form tanks, and some kinds of anchor tags, etc. Then here you can see that inside this link v, how some kinds of another hierarchies which are there. Suppose a form tag, head tag, body tag title, H1 tag DIV tags and heading tag portfolios and P tags. Where's your paragraph tags? And you can see here, these are all of the attributes which is the heirarchy of these all elements right here. So you get that. So these all are cars, anchor objects, which is HREF tags, links to objects, form objects and add last you can see here that which are the form control elements, which is come like radio buttons, buttons, and check boxes, etc. The advantages of the DOM is the DOM is manipulating like her by the manipulating DOM you how infinite possibilities and you can create the applications that a bit the data of the page without needing a refresh. And also you can create the applications that customizable by the user and then change the layout of the page without a refresh and you can drag, move and delete the element. The question here is, how is the DOM created? The don't contains a bunch of nodes where each node represents an HTML element. As HTML element is just an HTML tag. Okay, so this tags always come at the top. You can see here, this is always come at the top right here, which is card, which is linked to the root node. And the rest of the North come under the hints, which is called child node. So this is the child node to this HTML node. So you can see here, this is the child node and this is, you can see that a leaf node if you studied about the linked list in data structure. So you will better understand of the root node, leaf node and child nodes. Hope so, you'll get that. So end up JavaScript. The DOM is actually a class that's mic. It really easy to define each elements present within our web page and so it can be modified later. This is card don't. So as you can see here, that why it's called an object model, the documents are modelled using objects and the modal includes not only the structure of the document, but also the behavior of the documents and the object of which it is composed of like tag elements with attributes in HTML. So here you can see that I'm just telling you a hierarchy of these DOM models. Let suppose firstly v, how the HTML tag. Then we have the header tag, then we let suppose our title. So better to understand this, you can see here firstly, we held the HTML tag. Then here we have the heading tag. Then after this V How the title. And then you can see that we have the body where you can find the S1 Pang and paragraph tags. So this is how the domes work. Let us go to the browser. So here you can see there are some of the models which are using, or some of the methods of documents object which are using in this dome. Firstly v, how right string method, right string is given a string on the documents only. Then you have to use getElementByID. So it's returned the element having the game an id value. Then we have the get element by name so that we'll returns the elements having the Gaiman names values. Then we have the getElementsByTagName VC. Turn all the elements, having the gamer tag name, and add the last v. How get element by the clause, which return all the elements having the Gaiman class name. One another important thing, I want to include it right here that a domes hell, three level or or the DOM, how four levels? Three as the index wise and four as the, you may say that a number wise, because it isn't starting from level 0, where you have to provide the low level set of interface, then we have the level one way or the DOM level. When can we described the two parts, which is a core functionalities and the HTML. The core functionalities will provide the low-level interface that can be used to represent any structure, documents and the HTML provide the high level interface. Then we have the level to which consists of six specification, which is core two views even sends tile. So core to will extend the functionality of core IS pests required by the DOM level one. Then we have the views which is programmes to dynamically across and manipulate the content of the documents. Then we have the events. So events RS clip that is either executed by the documents when the user react, reacts to the webpage. Then we how this ties which allows the programs to dynamically access and manipulate the content of this tile sheet. After this, we have the triangle soil and range. So traversal allowed allow the program to dynamically traverse the documents. The range allows programs to dynamically identify a range of content in the documents. Then we come to the level theories of the dome. So level three consists of five difference specification which is core three, document and documents and save validations, events and XPath Viet document core three extends the functionality of the core is specified by the domes lower tool. Then we had the loads and the CVS which allow the program to dynamically load the content of XML documents into the DOM object dorms document and saved the DOM documents into the XML documents by its civilizations. Then we have the validations, event and export. So well edition, as you knows, allow the program to dynamically update the content and the structure of the program or document while ensuring documents return valid. Then we have the events which extend the functionality of the events specified by the DOM level two. And X bar is the POD language that can be used to access the DOM tree. So this is how in this lecture we learned about the DOM in JavaScript. Hope so you understand how your concept is much clearer about the DOM. If you not understand any of the point right here, please let me know and thanks for watching this lecture. 43. Javascript HTML DOM Methods: Hey guys, welcome back to this lecture. And in this lecture we are going to talking about the DOM HTML elements. The DOM is an often refers to as the DOM tree and debt is consist of a tree of objects such as card nodes. In this lecture, we will talk about the HTML domes method and which is essential to work with our JavaScript and the DOM. And we will learn about the DOM tree as well. So understanding the HTML and the JavaScript terminology is essential to understand how to work with the DOM. Firstly, here you can see that I have a document HTML. Then we have the HTML tag, header tag, title, head, and body. Inside the body, I'm just creating one of the H1 tag and here I just write that. Hi, this is don't. Okay. Now here you can see. So here we have linked some of the dorms elements right here. We're firstly v, how the root documents, okay, then we have the root element, which is the HTML element right here. Then we how the child elements, okay, which is head and the body tag right here. And then we have the ICA siblings. So as you can see that this is just an sibling like so as you can see at this stage, we how the parent node, then we have the first child node. And here we hell, let suppose a sibling hopes you understand all that how this don't work has an HTML. If we see anchor tag right here, let's suppose N Karachi REF, and here I just ride at funky programmer.com and then closest core. So this is here. As you can see, this is firstly how the anchor tag entertain languages it had. Then here that is linked to h, r, e, f attribute. Then here I'm just linking this tag to a funky programmer.com, which is the attribute value. And here you can see that if you want to give it our text right here, let's suppose funky for grammar. So this is card, this is home text. So as you can see that everything between the opening and the closing tags combined making the entire HTML element right here. So this is card. This is, as you can see, how this all modules are linked with each other. So this is guard HTML DOM, As we see dome as a tree and the nodes level. So here you can see that v, how the elements, nodes, text node and the command north. Here we have the elements, here we have a text node, and here we have the command node. So these all are links which e-tailer when an HTML elements is n items of the DOM and it's referred to an element node. Any long. Texts outside of the elements is our text node and HTML, comments. Sorry, comments is our comments nor in addition to these three nodes types of the documents itself and a document's node, which is the root of all the other nodes right here. So you understand now that how we can create with nodes and the tree. So I just speak that this is element nodes. So element notice is starting from the body, then we have the text mode, which is our text that is not part of the elements you can see here. Okay, and then we have the commit command to node, which is the HTML comment. Ok? Hopefully you understand now. So this is what we are using, the HTML DOM elements. If you find any of the problem regarding to this lecture, please let me know and thanks for watching this lecture. 44. Accessing a DOM element By TagName: Hey guys, welcome to this lecture. And in this lecture we are going to talking about how you can access a DOM element by tag name. A JavaScript can finds the element in the HTML based on the tag name and Z turn an eddy of the matching note, which is an inbuilt in functions of the document objects is available to this getElementById, the tag name. Here, I will tell you about frosty ever tell you about the tag name. So this is our tag name which is GET, or I just write that document dot get element by tag name of. So you get that this is the word tag name, that how we can get our element by the tag name here I just create a tag which is H1 tag, and I just write that this is tag name and VR going to access this. Okay, now here you can see the eyes right there, document.getElementsByTagName where I had ride my tag name here, which is the H1 tag. And then here I just access the area of the index. Let's suppose is added or allele of the index 0. And here inside that this is inner HTML dot inner HTML. If you measure this or if you want to access this specific number like her, this is our tag. Simply gave it. This is a tag here. And then you have to close this. Okay? Now I just accesses into the browser. And you can see here that this is our tag. Hope so you get that, that how we can access the element by the tag name. And if you want to remove this from here, you will see that that will show us entire message right here. So as you can see that this is how we can get element by the tag name. You just simply write your tag name area of the index and simply you have to move to your this tag right here. Hope so. You get that if you find a new the problem regarding to this lecture, please let me know and thanks for watching this lecture. 45. Accessing a DOM element By ClassName: Hey guys, welcome to this lecture. And in this lecture we are going to talking about that, how you can access a DOM element by the class name. Javascript can find the element in the HTML based on the class name attribute of the elements and return an array of matching nodes. This is the built-in functions which is available like get element by the class name to access these elements. How you can see that script tag. And here inside this script tag I just write that document. And document dot get element by class name, as you can see here. And here, you have write your class_name. So this is just incentives of the getElementsByClassName here, I'm just creating a class. Let's suppose this is a class of etch, or this is a class of p tag. And here's write class where I ride the class, here is para, and here I just write a paragraph like this is a paragraph, okay? And of the DOM element. As you can see here, now I just come back to this tag, and here I just write the name of this tag, which is, let's suppose a p, sorry, the name of this class here which is a para. And then here you can see that I have to get the index of an array. And after this here I just write that this is inner HTML. And now I just then this into the browser. So you can see here that this is the paragraph of the DOM element. And you can see here if you want to access some of the text form here. So you just simply copy this text and paste it right here. And this is refreshed. So you can see here our this element by class_name is working and we can access these all elements by the class name of so you get that. So if you find any other problem regarding this lecture, please let me know and thanks for watching this lecture. 46. Javascript Style Property: Hey guys, welcome to this lecture. And in this lecture we are going to talking about the style property in DOM. So we can use this property reset or edit the existing Is tile property of HTML tag. How legacy? Here you can see that I just create a tag here. Let suppose this is a paragraph tag where I just said the ID and ID here is that suppose ABC. And then here I just write that this is Java is craved, is tiled property. Now after this I am just creating a script tag. And inside this script tag here, method is using so which is a document and document.write getElementByID. And here I just said, right, the ID which is a, b, c. So this is a name of this id which is a paragraph id eight here. And then here I just write that dot is tiled. And tiled dot here. I just changed the color of this text, which is equal to, I just write that this is blue. Okay, and now here I just run this into the browser. So you can see here my this text is changed into the blue. So you can also change as tight of the formed. You can also change the size of the form. So this is how it's tiled properties work in the DOM. If you find any of the problem regarding with this lecture, please let me know and thanks for watching this lecture. 47. HTML Elements by CSS Selectors: Hey guys, welcome to this lecture. And in this lecture we are going to talking about the HTML element by a CSS selector. And if you want to find all the HTML elements that Maja is specified CSS selector. So you have the right ID, class name, types, attributes, values of the attributes extraction. So you have to use one of the meteorite here, which is ice right in I script tag, where you can see that this message here is Curie. And Curie, which is Selector. And so this is the matter where you are which is using for a select element by a CSS selector. Now I'm running a program and we'll show you that how we can use this. Here. I just write H1 tag, where I just write that, you can find the HTML Curie selector. Okay? And this is HTML. Now here after this, I decide that this is a paragraph tag. And the paragraph tag here is Hello. How are you? This is just our greeting message. And then here I'm just creating a paragraph tag. We or I just said the class and the class name here is Intro deduction. Okay, so here's decide that this is, this is DOM and DOM CSS selectors. Now here I am just copy and paste this as well. And here I just write that this is the DOM CSS selector with java script. Okay, now here I just write a paragraph tag. Paragraph tag here, which is equal to, I say ID and ID here is, let's suppose our demo ID. And now here we will move to the script tag. So this is small p. Here you can see I just create a variable x which is equal to Harris, right? That this is a document dot QD. So here you can see that this is a cutie selector all command where I just select P dot intro deduction, as you can see here. So p here is my tag name, and then this is our class name or dam just accessing right here. Now I just write that the document dot here, I just write getElementByID where the id name here is. You can see that this is ID, demo. And demo dot Harris write inner HTML which is equal to, I. Just write that. This is the paragraph where class_name is equal to four e clause, which is equal to, I. Just write that introduction. Okay? And then here I just write that this is a concatenation of X, which is index 0. And here i stride that the paragraph which is also accessing that indexed, which is 0 right here. Okay? Now here you can see that this is a class which is X. Can continuation of class which is x here. And sorry for that here we have to write single quotations mark. Okay? Now here you can see that dot inner HTML again. And then here I just close this code. Okay? Now as you can see, our script tag is closed here. And we will going to run this code. And you can see here. So firstly, you can see here that we have a heading tag, which is, you can find the HTML QT selector. Then here you can find a hello. How are you, which is our paragraph tag. Then here our className, which is our introduction. And where I decided this is a DOM CSS selector and this is a DOM selector with JavaScript, These are the two classes name here. And here you can see that with this empty tag I'm just creating or I am just showing this message to you guys in this paragraph tag. Hope so you'll get that net how we can use QT selector all command method which, which is using to select all of the HTML elements that match with our specified CSS selector. Note that the QT selector all command does not work in Internet Explorer eight and the earlier version, because this is a new version of the HTML. Hopefully you get there that how we can use the QT selector. So if you find any of the problem regarding to this lecture, please let me know and thanks for watching this lecture. 48. HTML DOM Write Open Close Method: Hey guys, welcome to this lecture. And in this lecture we are going to talking about the DOM right method. The DOM right methods, right, SG html expressions or java script code to document. The right mattered is mostly used for list testing. If it is used after an HTML documents is fully loaded, it will delete all the existing HTML and that will show us the output. Let us see how we can work with this dome as HTML, right method. Here, you can see that inside tang ice, right? That this is a document dot. Here. I will write this write method. We already work with this dome method in our most of the lectures. Most of the lectures. And here you can see that I have to write that hello world. Ok. Here you can see. So this is card document dot write method, what we already studied about. So note that when this method is not used for testing, it is often used to write something text to taking an output is team opened by the document or open matter as well. So here you can see that I will show you one of the examples on the document dot open method. So this document dot open method will open your Laika. Like open the output is team to collect the output from any document or tried five. How you can see that here, I'm just creating, let's suppose a function. So this is a function right here. The function name here is ABC. And then here inside this function's body, I'm just writing this documented open method. And you can see now here I'm just copy and paste this according to this function. And here you can see their document dot close method. So open method is using force opening this type of text. And close method is using foreclose the text. Here. You can see that I'm just creating a button which is on click vintages, click on this button. Here. I'm just writing ABC, which is the function's calling right here. And then close it, Harris, right? Open the text. So when I just click on this button, so this texts will shown to us. Let's just take the output into the browser. And here you can see that this is the DOM right method. And here I just run this. So as you can see here, I just click on this button. So after clicking this, this will move to the new window, which is hello word right here, which is our text right here. So as it's telling you that we used here the right method open and the close method. The open method is open and output is team did to collect the outperformed any document.write method or document.write line method. Once all the writes are performed, the document or prose methods causes any output written to the output steam to be displayed home. So you get that. If you're not understand any the pint right here, please let me know and thanks for watching this lecture. 49. Using the Document Object Model: Hey guys, welcome to this lecture. In this lecture we will introduce some code examples to familiarize you with the document object model. These examples should help you become more comfortable using the DOM. To work with DOM code examples, you need to create an HTML file, as you can see on your screen. To create an HTML file as you can see on your screen. So here, let's just start work with it. Here. You can see that firstly, I'm just creating a script tag. And here you can see that official way to write this is cribbed. Here you will write the language and here I just tried language. Here is JavaScript. Ok. Now after this here you can see there I'm screwing of function. And the function here is open and open window right here. Now, inside this function, I'm creating a variable and variable here is I just write that this is a new window which is equal to Ys, right? That window dot i, just using the Open method right here. So open method we already studied in our last lecture. And here you can see that I have to write this. Let's suppose v, how this DOM dot java is Dondo GPG, Emmys right here. So we are going to access this image into this open method. Now here I will write that this is new window as the name right here. And here you can see I have to write that this is wet and wet, which is equal to S, right? 450. And then here I will write the height, height, which is equal to ice, right? 400. Okay? Now here you can see that inside this body, and I just copy this script tag and here pasted into the header section. Now here inside this body section. Firstly, you can see that here if you want to change the color of the body color. So here you just write bg color and you just select the color picker if you want to select black, blue, white, any color. So I select here, which is, let us suppose this color, okay, which is a quarter of that. You can see here that will automatically change your color right here. Now here, you can see I'm just creating a anchor tag here, which is a HREF. And here you can see I had to write that this is Java Script and JavaScript here is colon. And now here I am just calling this open window method or function here. And then closes core. Here I just write that this is the using the document object model. Okay, now here you can see that I just run this into the browser. And you can see here. So here the background color is, as you can see, green. And this is the using the Document Object Model and it just click on that. So here a size of 400 VET and sorry, 450 wet and 400 height picture is appear to us right here. You can see that. So here you can see I'm just firstly create a variable then new window which is equal to windows doors open. So here I'm just using the Open method when here I'm just writing this picture and then name of this picture and wet and height. So as you can see here, the meat of this script is a single line, of course, which found inside the open window function. The first parameters pause the functions is what you wish to open. Thus, that can be another as HTML documents or an image. The second parameter is pause. This name of the variables that is going to represent this new window. As you can see here. This is already well, in our case. In our case, that is the new window. The last parameter is the height and the width of the new window are opening. This is script is fairly simple and easy to use and can be very useful. For example, if you have a list of products or your website, or you do not wish to clutter the HTML documents with all the details of every products. You can use this scripts to allow the users to view a page with those details after clicking the name of the products. Hopes you get that. How you can see here that you hell, you didn't want to show the MS2 or some of the files to the user. You want to, you want the users to click on this link and then that will find this image after clicking on this link. So you have to use this script at that stage. So this is how we are using the Document Object Model and very simple examples. But I am just showing to you guys if you find any of the problem regarding to this lecture, please let me know and thanks for watching this lecture. 50. Adding New Elements to DOM: Hey guys, welcome to this lecture. And in this lecture we are going to talking about that, how you can add a new element to the DOM. You can explicitly create a new element in HTML DOM or HTML documents using the document dot create element method. Let us see how we can manipulate this method into our code. Let us see here I'm just writing script tag. And inside this script tag, I'm just using function. So function name here is I just write that this is insert element. And then after this, I have dried variable, which is a new element. Ok? Here you can see that ice, right, which is equal to document and document dot create and create element here, which is a DIV tag. So what are the DIV tags? Or I will create a DIV tag here in my body tag. And I just close this tag. So here I'm just creating a new DIV element. So this is a quote for a new DIV element. Here, I just provide a ID which is equal to, I'll just write that the ID name here is the main DIV tab or I mean id. Here. I'm just creating one tag. An H1 tag here is ice, right? That this is DOM. And I just quite the IE to this H1 tag which is ID is equal to this is our titled. So as you know, this is the title. We call this as the norm. And then here you can see that I have right there the paragraph tag and the paragraph tag head is the ID of, Let's suppose this is a para. And here I just write that this is a simple DOM element. Hope so you get that. Now here you can see I have to create a variable. And variable here is a new content. So this is just a variable. You can set your own name here. So this is not worry about that. So here, this is a new element, new element one. And this is my variable here. Now here you can see that I have right there, this is the document dot create and create. Here is the text node. Why I'm tea creating the text node right here. Just because of here, I'm just creating the element. So I just tell you that firstly we how the root node, then here we have the child node and then after this VL, a sub chiral. So for that purpose, why am I here? I'm just writing the text node, which is here is right, hello, VR adding new element. Ok, so this will be our message when we are just pressing some kind of veterans are when we are just using like when we are creating a new element. So this message will be our element. Now here, after this, I just create a new. Element number one dot append method. So here I'm just using a pen child matter right here and here. I just pause. Like this is our new content. So there must be a, will be a confusing confusion to you right here, which is why we use a pedometer and what is a pen child method? Append child methods depends on node as the last child of the node. And you can also use this method to move in elements from one elements do then. So you get that, that why we use this append child method. Once again, I'm just repeating that append child methods adds a node to the end of the list of the children of specified parent node. And if the given child is our reference to a creating node in the documents, append child moved to append child, which is moved to it from a current positions to the next positions means this is moves the child from one position to another position. Hopes you get that. Now after this, I am just writing one of the, another variable right here, which is current DI we tag or the current element. Okay, this is our new element. This is our current element is equal to Harris ride, document. And document here is get element by ID, and here we will get the ID of the main DIV tag. Okay, Now here I say document dot body tag. And here I just get the body of the page and here I strike a pen. And a pen. Here is a child where I just create arises, get here a new element number one. And then we will print next element here, which is current element. And then here I just close this core. So you get that. Now here I just create one button. So button here is the type of button where I had, right? This is onClick method. And this is on click method where I had to write this insert element here. Okay, so this is the insert element, what I am just calling this into the button. So harris, right? Insert your element. Our code here is completed. I just run this into the browser and as you can see here, insert your element when I just click on that. So here you can see Hello, we are adding a new element right here. So you can add your element by clicking this button. Let us come back to the code. So here we are creating a simple DIV tag to creating these all pegs right here we have the title, paragraph and button. Then here I'm just getting a function which is a name of insert element. And here I'm just creating a creative element method, or I'm setting this create element method here to creating a new element for this DIV tag. Whenever I just press on this button. So this message is shown to me, which is create a next node y. I'm just creating this because this will link one node with another. Okay, now here I'm just using a pen child method. So as I just showed you that append child matters adds a note to the end of the list of the children of specified parent node. Then here IS ride variable which has a current element. So here I'm just getting the ID of this main element to printing this value. And then after this here it's right bodied or dependable. And here I'm just linking this or node with a new node. Here means that once this mode will be appear like here, once this node will be appear to you. So this will link this morbid next node. Hope so you get that. If you find I knew the problem regarding this lecture, please let me know and thanks for watching this lecture. Thank you. 51. Javascript Constructor : Hey guys, welcome to this lecture. And in this lecture we are going to talking about the constructor and the class base JavaScript object oriented programming. I was not focusing in last lecture that when we are working with the object based, object oriented programming language, like in Java script because V didn't clear our constructor concept. Firstly, we heard we play our constructor concept, and then we will move to it. Constructor. The constructor method is special, is it is very, you initialize the properties. It is card automatically when a class is inherited. Like you can see here in the constructor, a Java is can, can JavaScript constructor method is a special type of method which is used to initialize and create an object. It is called when a memory is allocated for an object. The two definitions here, okay? So the points to remember that when you are working with the constructor, so constructor is a keyword is using to declare a constructor method in the class. Contain one constructor method only means that if you have a class of ABC, so this means that this class will be contained only one constructor. Ok. And JavaScript allow us to use parent class constructor through the super keywords. So we will not moving to the super keyword in this lecture, we are totally focused on the constructor and the class is concept means class's object oriented concept in JavaScript. Let's just run our first example without classes in Discord because I'm just vastly, vastly gave you a knowledge about the constructor object in JavaScript. Here you can see I'm just creating a script tag. And inside this script tag, I am just writing function. So function here is the human or a person. So I just write function name. Here is the human where our pedometers, our first firstname, then we have last name. Then are we also held age? Okay, now here you can see that this dot, first name, sorry. Firstly we have parameters as the name, last name, and age. Okay, so here I'm just writing the properties of that. It is firstname and the first image is equal to the pedometer first. Then we have femtometer as the first. Then we have to write this dot lastName, where we had right last. So last here is our pedometer. Then we have to write this dot age, which is equal to Harris, Right? Okay, so these are the function and the properties right here. Now here I'm just getting the object to the person where I just died variable. And you can see that a person hell, let's suppose a father. So Heaviside father, which is equal to Harris, write new human. So as you can see that I'm distributing. Object to that, which is when you are just creating objects. So you have the right variable and then you have write new as a keyword, and then you have the right human. So human is all functioning. Okay? Now here I strike this is John. And then here I just write that John and then the last name of that here is Bob. And then here the age here is 50. Now here you can see that our court for this constructor is complete right here. So I'm just creating the object to our constructor here. And now I'm just running this core. And you can see that this is not showing us an output right here. Just because of here you can see that I have right, document dot. You have to also write get element by ID or anything. So if you have the get element by ID here, so you have to simply write a paragraph tag here. And then inside this paragraph tag you have to simply write ID, which is equal to I. Just write the ID here is a for anything, okay. You have to write your own name here. Her eyes, right? A. And then here you can see that I have to write in our HTML and inner HTML, which is equal to IS right, that my father is. And here you can see that I have to write that plus no Harris write Father, Father is our ready. We'll name it. I'm just getting object. And here, if you want to get the age of the father, so simple, you have read eight here. Okay? So here you can see that I stride plus. And then here you can see that I have right dot. So don't here just for ending the line. Now I rephrase it so you can see here my father is twin. My father is 50. If you want to get the name of your father here in the US and you simply write the name of your father if you wanted to get the last name, so it's employee last name here is Vauban, if you wanted to get the firstname so you, you have to write your first name of the father here. So this is how we can create our constructor. So as you can see, we are using this keyword here. So this is a keyword in the JavaScript when it is used in a constructors is strip. It's referred to an instance that is created with a constructor. Ok, now here we are moving to our classes example. Java is script. How? Let's just check it. So Declaration of the classes is declared by a class as the keyword. And Harris, I'm striding script tag. And inside this script tag, I am writing the class of, let suppose is a class of employment. Helps you get that how we can create a class, FastCV, how the keyword then class name. So this is how we can declare our class. Now I just tell you that we are using constructor as the keyword. So this is constructor as a keyword here. And now you can see here that fuzzy I'm just creating a constructor of an object. So pedometers here ID and then employ name. Use this as a keyword and I say I E, which is equal to ID. And then here you can see that I started this dot name and name ij is equal to name here. Hopes you get that how we can create a constructor for CBR when to create a class, class name here is employing then constructor of an object. And then here you can see that the pedometers, and then you can see that the property of that here, you can see that detail of employee. So this is our method here. So here I'm just defining the method and now here I'm illustrating document dot, right? And you can see here I started this dot plus D, I'm just getting the ID plus. And then here I'm just concatenating this dot name. And plus here is single line break. Hope so you get that how we can define our method inside this class. Now you can see here our class_name is created, our constructor is cluttered here. It is created here. Now we are creating the object and we are passing the variables and the values to it. Now variable here is employee number one and employee number one, which is equal to here I knew as a keywords to getting the new object. And here I'm just creating the employ as the class name. Plus the I am just writing the employee ID like one. And then here imply name, which is let suppose Bob. And then here you can see that I just created variable and variable here is employee number two, which is our new object here. So here I swear I knew as a keyword, then this imply and Harris, right? Imply IDE2. And then here I just write that this is the name as the Daniels. Hope to get that. Now you can see here that we are creating the object, but here we are not creating any of the methods right here. So I am just writing imply, sorry, EMP v1 dot here, I decide that I'm just creating the method here. So matter here is detail imply. And then we had ride that EMP to any MPEG-2 that Dort imply detail. So this is our methods, okay? Now Amazon in this core and before ending this core, we have to be this piston right here. Okay? Now here, I'm saving this and run this course. So you can see here purposely we held the ID and then Bob and then second id, and then Danny's As the name. So now you can see here, firstly, we are creating the class, then imply. Class. Here is our keyword, and employ here is our class name. Helps you get that. Now here, after this you can see here we are creating a constructor. So constructor here is the pedometer of ID and the name. Ok, but I just tell you that constructor is just an keywords to declaring the constructor method. And the class contain only one constructor. So this entire class will contain only one constructor here. Okay? Now here you can see that I just tried to properties and then method here. So this is the output statement. And then here you can see that we are creating the post objects and second object and here first calling n, second calling. Hope. So you'll get that how we can clear the class-based object-oriented programming in the Java SDK. If you find any problem regarding with this lecture, please let me know and thanks for watching this lecture. 52. The This Keyword with Building Block Of OOP: Hey guys, welcome to this lecture. And in this lecture we are going to talking about the java is cribbed these keywords and we'll work with a disk keywords and I will show you that how you can work with it. This keywords in the java script when it is used in a constructor, it's referred to the instance that is created with our constructor. If you are trying, let suppose this is the cord here. And if you are trying console dot log and here you will find, here you will write this as the keyword. So here, this is a constructor. And you have noticed that the theme as our logging example. So it is like using instance itself. What is this keyword? This keywords which is refers to an object and that object which is executing the current bit of the JavaScript code. In other words, every JavaScript functions while executing has a reference to its current executions contexts. Hope so you understand now, now here you can see that I will create an example on that. And here you can see in our last example, you can see that I described human as the function name. And then here I'm just passing the parameters to that function which are firstname, then this is our last name. And here you have seen that this is our age. Now I just write that this is controlled or log. And the log here is I'm just using this as a keyword. So these are the other properties of the other properties often Method. And now here you can see that I am just writing const add the keyword. Keyword, where you can see that I have to write that this is the Bob and Bob which is equal to half disputing the object which is to the human. And this is for the human, sorry, human, where I had to write that this is the bob. Then second name here is dangerous. And then here you can see that I have right than this if 50, sorry, this is here. 50, okay? And I closest score right here. So as you can see here for C, I'm just shooting a function than parameters. Then this is a console log. You can write document.write on, on that place. And then here you can see that I'm distributing the object to it as well. This keyword is very important concept in the object-oriented programming, so you need too familiar with it. Ok, let us come to the building blocks of the object oriented programming. And we will see that why we use object-oriented programming and what are the building blocks of an object-oriented programming? Object-oriented programming make code organized. As you can see here, this core is being organized because function. Then you have to call these functions. And you can let like creating the classes. And then you have to write the properties. Okay, very, she's very much understandable to you. Then you have to write the object to that classes, okay? So as you can see, object-oriented programming is also easy to maintain. Its follow the dry method. So dry matter, which is don't repeat yourself, which means that the code is reusable and you can reuse your code means once you write your class, you have to repeat it again and again. Then you have to bend. Then you have the benefits of object-oriented programming, which includes the security. And that is also prevent the unwanted access to the data where you can use abstraction and the data hiding concept. Or here you can see that that is exploding. The proper IT IS cords through the encapsulations and the abstractions. Both are discussed further in the principle of an object oriented programming. What we discuss in this course, you can see here in next lecture we are going to cover encapsulations or inter inheritance and abstraction that as well. So do programmers create object oriented programs? Well, the shorthand, so her hair is making the classes and creating the objects from the classes. In object-oriented programming, everything is an object and classes from the blueprints for how data and behavior are structured. Objects are created for a specific instance of a class. As a programmer, you might create a doc class for blueprint as and as I turned her way to organize all the input, all the important informations about the dough. Like what is the color of the dog? What does a read of the robe? Where is the name of the dog? Just like that. Okay. Now here you just move to the building blocks of the object-oriented programming. So the building blocks in the object oriented programming first come in the row is a class. You are creating the class, then you have to create the objects to that class. Second important thing. Then you have to create the methods to that class and add the last. You have to define the attributes to the class. What are the classes? So classes, you can see here you have to create a class. Then you have the right method inside you are class. Then you have to define the attributes which are your variables like bead of the dog, like Color of the dog, age of the dog. And then you have to write the object to yet class. Here you can see that the classes are just an blueprint. Then object here is just an instance. Then actually boots are our data. What I just tell you that variables, dog color, dog, a dog breeds attraction. And then you have seen that this is the method which are our behavior that how this dog functioning or how this dog Laika behave, okay? On how this functionality works, okay? Now here you can see that this is a coding example. Let's suppose we have the variables here. As you can see here, this is the object of individual dog. Ok, means when individual dog. And here you can see we have the dog which is variable, and this is a dog name, which is refers. And then here you can see that these are our attributes, okay? As you can see here, that these are our attributes and data. You can see here. And these are the properties. Okay? Now here you can see firstly, we heard a dogged him then date of birth. Okay, then we, how the age of the donor here you will see that these are our methods or the functions at How this dog will behave. Here you can see that I just returned simply date now. And here I'm just using this keyword and get the birthday end date of the dog. Ok, here you can see that this is a second individual dog where you can see that firstly you are find the behavior, then these are the properties, functions and seen as a case like our older. So this is how the building blocks of object-oriented programming works. If you find any of the problem in this keyword lecture and the building blocks of object-oriented programming lecture, please let me know and thanks for watching this lecture. 53. Javascript Encapsulation: Hey guys, welcome to this lecture. And in this lecture we are going to talk about encapsulation in JavaScript. In object oriented programming, encapsulation is the inclusions within a program's object for all of the resources needed for the object to functions, basically the methods and the data. The object is said to be published its interface, other objects adhered to these interfaces do use the object without having to be concerned with how the object is accomplished. It the idea is, don't tell me how you do it, just do it. An object can be true of self contained at the object interface consist of public method and instantiated data. In telecommunications. If we see the example in the telecommunication as encapsulation, encapsulation is inclusions of one data structure with an elevated structure so that the first data structure is hidden for the time being, for example, you are using TCPIP format data packet can be encapsulated with an ATM frame and other kinds of transmitted data unit within the content context of transmitting and receiving the ATM frame, the encapsulation picked is simply IST of BID between the ATM data and the distributed transfer means that in the ATM machine, the TCPIP is pegged when you sending the data. So here you will simply receive is team of blood between the data sender and the receiver. Encapsulation is one of the fundamental of the object-oriented programming and the key concept. It's referred to the building. It's level to the bundling of the data with methods that operate on that data. Encapsulation is used to hide the value or this takeoff is structured data object inside the class, like preventing the unauthorized parties directly access to them and publicly that is accessible method are generally provided in the class. So that is called getter and setter methods. Who access the value and other clients classes called these methods to retrieve and modify the value within the object. Here we can see that I'm just taking example of encapsulation as the car. So car hell, different types of attributes. Let suppose car hell, model. Then we shall see that car hell is speed as well. Then you can see that car hell engine and the capacity as well. Then car hell is peed limit as well. Okay. And at the last car is you can see that you can drive the car and UK and you can stop the car as well, or you can set the speed to that car. So if we take this car in a real-life component, so car usage of the abstractions principle define the context of the data that will be needed in our application. In this case, we will need a car property model name, content currently speed, maximum speed, and the Boolean engines properties that will be responsible for I stayed if a car is turn off and turn on, like here, you can see that this top here is will be installed function. So the encapsulation principles means that we should add to the same class behavior matters, which is dr, is top and set the speed limits, etcetera. Those may be used in our applications and also to provide the restricted access to change in the class instance state. And we don't want our client of our class to be able to turn off the car and then is till be able to set a speed value. Let us suppose it is up to a 100 miles per hour. If the, the more complex here in the encapsulation. So if you see the more complex applications and encapsulation, so you may need more properties that describe the other car, which is subsystems like car lives, car wheels, car seats, and the engine capacity and engine functioning. So this will be the more complex, okay? In this case, you will have to make few abstractions for those system. And that will be encapsulated, it's state and the behavior. And then you will be able to combos a car class and like, like that, functionalities like here, you can see that a simple example. I am just creating a simple car here. So this is not look like a cardboard, This is a car. Ok. Here you can see you can see here a simple car. But you do not know the engine here, the seats, the door, the speed limit. So here every functionality is available, but that is encapsulated means that this is hiding right here. Hopefully you get that. Now here you can see that I'm just giving you a simple real life example on that. So firstly, we will see that the encapsulation means encapsulations advantages right here. So you can, you can use encapsulations. The functionally is defined in, the functionality is defined in one place and not in multiple places. This is a first advantage of the encapsulations here. The encapsulated code is more flexible and easy to change with new requirements. And you can define the logical, logical place and the place where the data escape. You can also prevent the other classes and the access to the privates fill as well. Here you can see the data inside our object is not modify unexpectedly by internal code in a completely different part of our program. When we use a method, we only need to know that what result the method will produce. And we do not need to know the detail about the objects internal and others to use it. So we could switch the using another object within our completely different on, inside and not having to change any code because both of objects how the same interface. Okay, one of the, another example here is it encapsulations, keeps our data and code save for the external inheritance. Does the encapsulations heads to act your security and it is improved the maintainability of your application. Hopefully you understand now. Now here you can see that I'm just demonstrating all of the examples to you guys here. You can see here we have the class, and as you can see here, we have the class. Here. This is encapsulations. So all the data here is available inside this encapsulations where you will find the variables. And the method means that if you see the entire class right here. So inside this class you can see here we house some kinds of data members, methods and the behavior. So basically capsule here you can see is encapsulated several combinations of let suppose medicines. If the combination of the medicines are variables and the methods, then the Capstone will acts as a class. Okay, means that this capsule will act as a class right here. And the whole process is called encapsulation. The encapsulation technique was technique. We declared the field as a private in the class to prevent other classes from accessing them directly up. So you get that. Now here I am just demonstrating some of the examples. Do you like? First example here is you are going to the school and a school bag is one of the most real example of the encapsulation. Like a school bag can keeps you a book, pens, etcetera. So this is called encapsulations means you're bag held these all kind of stuff like Penn and books extraction. So as you can see, you can only see the books was inside your bag. There are several books and the pens. Okay. Now here, the another example is when you are logged in to your email address or an email account such as Google or you are using Yahoo mail, or you are using the same platform you are earning. And so there is a lot of internal processes take place in the background and you have no control over it. Like here, you can see that you can simply going to add your email and then you are going to add your password here. So you don't know that what functionally a facility actually performing and the BEC bed round of your interface like here, you can see that you are a simply show. I'm just showing a simple interface to you. But here you can see that the actual functionality here is hidden from you as you can see here. Okay, net how I made the header tag, how I made the paragraph tag, and how you can see that I am just making or I'm just adding these images right here. Okay. Now let's just So here, when you are entering the password and password for logging, they are retrieving an encrypted form and validate, and then you are given the access to your account and you do not have the control or it that's how the password has been verified. Does its Keep has its keep whore password or it's keep or a count safe from bringing the misuses. Hopefully you get that these are the, some of the examples. Hope so. Your concept is much clearer now and you will be very much familiar with the encapsulations and you will be understanding how VR using the encapsulation in the real life. Let us come to the coding example of the encapsulation. And we will do some of the tough on this encapsulation. And I will demonstrate some of the examples to you to make your concept more clear. Like here, you can see that I'm just creating a script tag. Where you can see here that I am just writing the class. As you know, as you all know class here is the keyword. I'm using. My old example here, which is employer hopes you understand now firstly, I'm just setting the implied details. So here you can see that this is employee and employee details here. Where you can see here they imply insight is implied detail. You have to write the name of the imply the age of the employee, and then you have to write like designation of the employer right here. So you get that. Now, I am just using this dot name, which is equal to here I'm striding name. Then here I am writing this dot id, which is equal to I decide ID. And then here I said this dot designations, which is equal to eyesight designation here. As you all know here I'm just creating the method and these are some of the attributes do these method here. Okay, now here you can see that I'm illustrating get Employee ID. So this is a matter what N is running right here, which is get imply ID. And here I am just getting the employee ID with the help of dates. Or here I'm striking return disk dot id. Okay? Now here you can see I'm just calling or I'm just creating the variables like EMP, which is equal to new employment. Here I'm just creating the object of this class. You can see here. And then you can see that purposely I am just writing document dot, right. Where you can see that I have to write that EMP, which is my object here and here you can get the employee ID method. And then you have to close your cord. So as you can see here, I'm just creating a separate matters to getting this ID here. I'm not telling you the logic right now, okay? Just to make your concept here and see what I'm actually doing here. Now here I am just writing get imply name. And here I'm just returning this dot name. Okay? And then here you can see that I'm just creating document.write and Harris, right? Get or here I'm citing employer name. Okay. Or sorry. This is get employed him. Now here I'm just creating third function, which is here. I'm starting get. Designation, where you can see that hams writing that this is return and return here is this dot designation. And I'm just copy and paste this method here and here you can see that firstly I'm just calling imply IT, then I am calling employer name and then the designations of the employer here. So as you can see here, that person DVR defining one function here, which is a name of employee detail, where the attributes here, our name than introverts are IID and this is designation of your imply. Hopefully you'll get that. Now here, you can see that you are only only function is shown to you, which is set in detail. Okay? Now here you can see that there is no detail is provide insight these functions instead of just attribute. Here you can see I am just getting one by one. These all attributes using these functions which is get, imply ID, get, imply name, get designation. And last example you have seen that we are simply calling this get Employee ID and then we can get all of the details right here. But encapsulations, You have to select only the needed data, all the functionalities here are, you can see that high. So this is encapsulated right here. And you can access these functionalities one-by-one as per your need. Okay? Now here you can see that I'm just defining or I'm just providing some of the values to it. Like here I'm starting EMP and then here is I just write set employee details where I had right there. Let suppose this is John and here you can see that I have to write the age of that, which is 25. And age of imply here is 25. And here you can see that the phone number here is sorry, the designation here is I'm striking that this is the IT imply. Okay. But you can also write the phone numbers of your empire hair. Ok? Hopefully you get that. Now here I am just running this course, do you guys, where you will find the output and here it is not showing us output right here. Let us check an error. There is a mistake you can see here that we are going to add the age here. So instead of id, we are adding the age here. And you can see here this is an age. And okay, it's fine. Now. Now I just run this. So here you can see that this is our encapsulated date. How, what do we get from this quote? They are slightly mistake between the age and ID, Sorry for that here. So as you can see here, I just tell you that this is the all encapsulated data and we are accessing one Y1 using the methods, ok, and here I am just simply create an object and then spread assigned the values. And here you can see that I'm just getting these values right here. Let us come to the second example on the encapsulation. And I will completely give you the knowledge on the encapsulation or the validation that how you can validate your data using encapsulations. The main concept is using right here. Let's suppose we had a class of students, okay? And then we have seen that we have some kinds of constructor as we use in our last example. Okay? This is our constructor. And here I'm just writing the two attributes or the variables here, where Firstly I helped write name and then we have seen that I just tried mark. Okay, now after this here I'm starting get firstly you have to get the name. And then here seems a case like our old example here you can see that I had to write return and this dot name. Okay? Now here after these, I'm just writing one of the, another function here which setName pastimes writing getName function. And then here I'm striding setName function where I just paused the pedometer as the name. And here I write this dot name, sorry, this dot name, which is equal to here, it's right name. Okay, now here I am just writing and other functions for getting the marks. So this is our Mars here you can see. So GetMax, where I just write this is the return and return here is this dark marks. So you get that. Now here after this, I am just writing set marx function and where I just paused the pedometer as the marks. Now offer these ice, use if statement. So if here is the marks and marks is less than 0, where I had to use the or operator. And here I slide that marks which is greater than a 100. Okay, now here I just use alert message. And the alert message here is I have to write that this is invalid marks. And here I have to close this code. Now we just moved the else condition here. And the else condition here is I have write this dark marks and marks which is equal to Harris, Right? Marx. Ok. Now here you can see that I had right? Or I have to set the variable which is a student, or a student. Student, Is there a class_name? So I have to write std, SGD, which is equal to I strike New Student. Okay, now Hair Ice closest code and hair eyes, right, STD dot set name. So I'm just calling these matter here where I just said the name here is let suppose this is Bob. And then here you can see that I have to write S t dot set marks. So this is setting the mocks. So I will tell you the functioning of that here. I'm setting the marks here, which is 90. And you can see I have dried document dot write where I had right student dot getName. Sorry, firstly I have to write getName. And then here I'm just concatenating SGD dot get marks. And then I have to close this course. Here, as you can see, I'm just writing a beer tagged for a single and break. So what does this actually do right here? Firstly, I'm just creating a Mars, sorry, class, which is a students, which is getting the mars and the name of the students here. So here M is define a constructor and these are the attributes, okay? Now here you can see that these are the, this is the encapsulated data, what we wanted to get using these functions. So here I'm just writing the getName. So firstly, that will simply get the name of this. And then here I'm just setting the name of that here. Now seems a case like GetMax and set marks here. So here I'm just setting the name as the Bob and setting the Mars as 19 means that Bob get 19 months. This is the logic. If Mars is less than 0 and this is all pregnant here I strike Mars which is greater than 0. So that will show us. Invalid marks means the mars is no less than, less than 0 and Mars is no higher than a 100 ledger CVR providing the correct value here. So refreshed this. So here you can see that that is Bob 90 and it is showing us the correct result here. If I just writing Mars here is 111. So here you can see that alert message method is invoked here. So you can see reserved, refresh and here you can see that in Willard mocks. Hope so you get that. And here you can see that Bob and undefined Mars here. Hopefully you get that how we can use encapsulation in the java is flipped. And what is the benefit of encapsulation in the JavaScript? So your concept is much clear now, if you not understand any of the plant right here, please let me know and thanks for watching this lecture. 54. Javascript Encapsulation Prototype Based : Hey guys, welcome to this lecture. And in this lecture we are going to talking about the encapsulations prototype based approach. A last lecture, you have seen a brief discussion on the encapsulations, where you learn a lot about the encapsulations in the JavaScript. Here I will tell you the prototype based approach on the encapsulations. The prototype based language such as Java is cleaved, does not make these distinctions. It is simply has an object, a prototype is language has its, the notations of the prototype objects. But it means that here we are simply creating a prototype objects and object used as a template for which to get the initial properties for a new object. Any object can specify its own property either when you're creating, when you created, or at runtime in editions, any object can be associated as a prototype for another object, allowing the seconds object to share the first object. Like every object in the Java Script has a prototype as it's way for it to be linked to the another object. Talking about the prototype based inheritance. And here you will see that how we can work with it. Here. Same is the case. Like for example, I am just writing is clip tech forcefully. And then here I have write, let suppose variable and variable here is name was equal to the name here. Now here I just typed variables and variables here are Mars, which is equal to IS right, that these are the marks. Okay? All of the things in our last example we covered here, you can see I helped write object, object or define. Define here is the property. Here. I just used this dot or this, and then here I'm just writing name. Ok. Hope so you'll get that. So this is the static method object, which is defined property as you can see here. So that's defined a new poverty directly on an object, and that is modifying existing property on an object and return the object here. Okay? Now here you can see that I have right? That firstly I'm deciding get, get here is the function, sorry, this is small f. This is a function. Okay? Which means that I'm just getting getMethod to getting the function. And now here I am just writing return and return. Here is Nim. Then her eyes right, said comma. And now here I am just setting the function here. So this is a function. Function we are, I'm just passing the parameter as the name. And then here I write this dot name which is equal to ice right? Name. As you can see here, pastimes is defining this heading method property, which is defined property here. Then here I'm just writing get functions where I'm just getting only the name here. And then here I'm just writing set function and setting the name here. Hope so your concept is much clear now. Now same is a case like I am just using same thing with Marx. Here you can see that first the I'm citing object or define property where ice right marks here. And then here I'm just getting the function and the function here is Marx. And then here you can see that I have, right? These are the marks here. And this is Marks which is equal to I have write that these are the marks. Okay, here you can see that how our project, sorry, how our prototype based approach in the encapsulation is work. Now here I would write variable let, STD and SGD, which is equal to her eyes, right? New Student. Okay, and here I have right there. Let's suppose a student here is bald, and then the marks of the student here is 18. Now here I have the right document dot write, and here I had ride that std. Then her eyes is get the name, which is plus. And here you can see that I have to write plus SGD, which is, which means that this is a concretization login. And here I have the right marks of the student posse that will get the result of the student name and the marks of that student here. Here, you can see that I'm adding function. And you can see that this is a function here where ice right, the function here for the students where I had right name and the marks. And here you can see that IS closest chord here. So this is a student as a function name. And instead of that hair, I'm just adding these curly brackets right here. Now I'm just running this code where you can see here that our first value, Harrisburg and second value here is 80. Now let us come to the code here. Firstly, I'm just defining a function and the pedometer to that function here is the name and marks. Here I'm just creating two variables, which means that this is encapsulated value. And here I'm just getting the values with the help of broad prototype based approach. Firstly, we will get the name, and then here we will get the mars of us tokens and seems a case like our old example here I'm skidding and you object to that class and providing the values. And here you can see that I'm just getting these values for the output and showing you as output right here. So this is how we can work with a project-based sort of prototype is approached in the encapsulations. If you find any of the problem regarding this lecture, please let me know and thanks for watching this lecture. 55. Javascript Encapsulation Example 3: Hey guys, welcome to this lecture. And in this lecture we are going to talking about the java is stripped encapsulations and we are going to make programs that will run a encapsulations and draw a circle where you will manage the size of that circle with the increment and decrement operator. As you can see on your screen inside this script tags, I'm enclose some of the CDN JavaScripts library. So cd and JS is a library repositories which hosted on the cloud fair.com. It freely available CDN for the common JavaScript and CSS libraries. Cdn j as most host mostly known productions ready version of the Java script N CSS libraries. Cd NGS also supports the beta versions on their platform with the help of n m, npm slash getfield. Knowledge is turned to the example of this code. And here you can see that I had to write this script tag firstly. And now here you can see that I'm just creating a functions. And the function here is name of the setup up. So you get that. Now here you can see that I'm distributing the two buttons right here, which is a name of you can see that this is the create button. Okay? And then here I'm just writing that this is the increase size. This is a button name here, dot here you can see there I'm just using the function name, which is mouse pressed. Which means that when you just press your mouse on this button, so the size will be increased right here. Okay, and here I'm just using on btn. And here I just write that this is let suppose increment. So this is btn and which is increment. Click. And I had to close this chord here. And this is a bracket which is close right here. Okay, now, now you can see here, I'm just creating one of the, another button right here, which is a name of decrease the size of your circle. And then here I have write that this is a mouse pressed. And here I have write that on btn and VT and hair is decreased the click. So here, as you can see, I'm distributing the two buttons for the increasing the size and decreasing the size here and offer these. I'm just creating one of the another variable. Create p and where I have write that this is an empty string. Where I will create this for circle here, okay? Now here you can see I'm excluding a variable and variable here is shaped. And then here you can see that I am just create, I am just calling this variable inside this functions, which is equal to here. Just write new shape and shape. Here is our object. And I have to closest core here. Now here you can see I have to write that this is Create, and here I'm just using this as the canvas, where the canvas size here is eight hundred and six hundred. And I have to close this function here. Okay? Now you can see that we are creating a setup of the buttons here. And then we are creating the increase and decrease size of button. Then we are feeding one of the empty string right here. And after this, I am creating a canvas tag. And then here I just write that shift which is equal to new shape object here. Now here I'm just showing you the output for this. So you can see here that increase size button is greater right here. But here you can see that we didn't show us the decreased size button just because of here. Here we are not aligning these buttons. So let's just align these button first right here. So I am distributing a function here. And the function here is you can see that object button clicks or I'm distributing this function name here and I am just calling this function name here. Okay? Now here you can see that I have to write that this is the shape and shaped dot here I just write increment and then here you can see that I just provide the size of ten here. Okay? Now after that here you can see that I'm striding function and the function here is on button decrease. And the decrease button here is the click. Now here I am just writing the shape. And the shape here is, I have write that this is decrease and decrease here is ten. And I have to close this code here. Nor logistic the output right now and here manages fresh this, refresh this. So you can see here we find a two buttons for the increasing and decreasing here. Okay? Now here you can see that I have to draw some of these circles right here. Now you can see that I'm just creating a function. And the function here is I just use draw as a function name where I had to write that. This is firstly, I have to write the clear. So this is a clear method here, which is, and here's the background. Ok, now here I stride ship shaped dot dre. And here you can see that I had right? This is the wet and the wet hair is divided by two. And here I have write hide, which is also divided by two here, which just means that that will get the half height and half vet. Ok. And as you can see that this is shaped dot draw function. No, after this here you can see that I have to go to the function. And here I'm just creating one of the another function which is function shape object, as you can see here, okay. And here inside this function name, I have to write this dot. I am just getting the radius of that. And the radius here is 50 births. Ok. Now after this here, I had to write that shape and shaped object here is dot. I am just writing this as a prototype and prototype.js increment operator, which is equal to Harris, Right? This is a function. And inside the function here is the parameter of n. And then here you can see that I had to write that this dot, radius and radius, which is increment operator of number of this parameter n here. And then here you can see that I have to write that this is a shape. And as you can see here, I had right that shape and shaped object here is prototype and the prototype here is the decrement operator, where you can see that this is a decrement operator which is equal to Harris, right? That this is a function and the function here is parameter of n. And then here I tried this.radius, this.radius, where I had to write decrement operator on the pedometer. And here, ok, now here you can see that I have arrived shaped dot, sorry, this is shape object dot prototype. And here I will create a prototype here of draw. Sorry, this is draw and draw here, which is equal to I have write this a the function. And the function here is the parameter is n, sorry, the function of parameter here is x and y. So here I'm just getting to another parameters and where you can see that I had, right? This is lipase and where you can see that I have read x and y, which is my parameter name. And Firstly, I have to write this dot radius and the radius here is the esoteric off to. So here I am just, I'm disputing the circle, okay? And then here is right, and this is a radius and the radius is, is tearing of two here. And I had to close this code. Now as you can see, our code is successfully created right here and VR successfully draw or circle with increment and decrement button. Here. Firstly, I'm explaining the score to you guys person. You can see here that we are creating a variable of ship. Here. I am disputing offered is a function which is a setup. So inside this setup function V, How to buttons, which is increased size and decrease size, which means that when you are just pressing the increased button, so the circle size will be increased and when you are pressing the decrease burden, so circle size will be decrease here. And that action will be performed on the mouse press events. Because when we are pressing this menu or pressing the click on these two button, so the action will be performed right here. Then here you can see that I'm just getting to functions of button, on button incrementally and on button decrement clip. So these functions are available right here. So let's just see here that we are creating a simple string to printing this canvas. Here you can see that I am just writing create canvas, which is a size of eight hundred and six hundred. Then here you can see that I just write shape, shape, which is equal to new shape object, which is you can see here. And this is our function shape object or I am just calling right here. So you can see here that we are enclosing some of our properties with the help of this encapsulation. Then here you can see that I just created one another functionality right here, which is a function named draw. And then here I just pause clear and then shaped or draw, which is a of two and height of two here. Okay, then here you can see that the function is on button click and which is position of ten. And same is the case like this decision of ten here. Now here you can see that this is a function of shape object. And here you can see that I just enclosed this.radius here in this function. And now you can see that here I am just writing prototype is inheritance. So here I'm just trying to prototype. And then here I say dot I-N-C function name. And this is the parameter of the function, and I just call these parameters right here. And then here you can see that I just tried this.radius, which is setting increment operator on the increment button as you can see here. Okay? Now here you can see I have write decrement, same functionality for the decrement. And here you can see that I decide this for this decrement operator. And at the last You can see here, I just draw the shape and create 2x is right here, which is x axis and y axis. Ok? And here I just draw the radius here, which is a radius. This.radius, which is the aesthetic of two and this.radius, which is Derek off two right here. Let's just run this code and I will show you the output of it. And here you can see that these are our two buttons, and this is our circle here when I just press on in this increased size. So you can see here this size will be increased right here. Okay? And when I just press this on the decrease size button, so here you can see there the size of this circle here is decreasing. Ok? So as you can see how we can create or how we can use the encapsulation here and create a, create a circle with the help of that. Hope. So you get that if you find any of the problem regarding to this lecture, please let me know and thanks for watching this lecture. 56. Javascript Inheritance: Hey guys, welcome to this lecture. And in this lecture we are going to talking about what is inheritance in JavaScript. Inheritance is a mechanism in which one class acquires the property of another class. For example, a child inherits the triads of his or her parents. With inheritance, we can reuse the fields and methods of the existing class. Hints inheritance facilitates that reusability and is an important concept of object oriented programming. The process by which one class acquires the property and the data members and the functionality methods of another class is called inheritance. The aim of the inheritance is to provide the reusability of the code so that a class has to write only the unique feature and rest of the common properties and the functionalities can be extended from the end of the class. Like in a technical, technical words. Creating a new class by using the existing class functionality is called inheritance. Lets you see how. Here you can see that v how example or a diagrammatical example here. There. You can see that here v, how a parent class, which is the name of bank gold. Let's suppose you are going to the bank account or you are going to the ATM here. So you can see that firstly, you will see your bank at home where you have your account number, your total balance in your account, your deposit, and withdraw of balance, and you have to get your balance here. Let suppose you are going to the ATM and withdraw some kinds of your money here. Here, you can see that you wizard the bank and click on this Vidra option here. After the withdraw, you will find two options. There. You can see that you have a checking account or you have the saving a calm, or you have a current account or you help us saving account. You said that I have a current account or a checking account and you will deposit or you will be dry your firm's form. You recall here you can see here a base class or a parent class is bank account. And our child classes here are checking or current account or a savings account. So these classes are derived from this parent class, which is up BankAccount, which is using the facility of account number, total balance, then deposit, withdraw and get the balance. Let's suppose you are withdrawing every drying Some of the account from someone with the cash from this checking econ. So firstly, you will check your or your system will check account number, then this system will check your balance, and then this will withdraw your MO. Or do you want to deposit? So firstly, that will check your account number, then that will check your total balance, and then that will deposit your amount. So you get that this is a client. Sorry, this is parent and child architecture right here. Let's just move to the another example. Here you can see that let's suppose you have some of the electronics items where you, how? Let suppose sound systems and the phone system. So here, electronics items, our parent class and the phones here are derived or a child classes means that these are derived from electronics. You can see here. Then here we have the subclasses here, which are a child classes to this phone, which is a parent class, and then these are the child classes. Now I will tell you the architecture of this. So here you can see that at first stage V, How the parent class as the electronic and child class as the phone and sound system. Then we have the further child classes. You can see that with our phones and card phones, sorry, mobile phone than the card phones. And there here you have the earphone N Is to use. So these are the child glasses. For that. You can see that for that classes, which is a child classes, the food here is the parent class. You can see. And for debt classes, electronics items, there are a parent class. Hope so you get that. Now here you can see that in a real example, you have some kinds of humans. So I chase, inherited the features of its parents, such as the beauty of the mother and intelligence of the Father. Let suppose here you how moment dads, which are your parents here we have the class of human, then we how the mom and dad, and this is a sun. Ok. Let's suppose here you will hear you or some will inherit your hair color from the dad and I's from the mom. Okay, then hide from the dad. And then let suppose intelligence from your mom. So here this sun is inherit all the properties of his patent here. Hope so, your concept is much clearer now. Here let us come to the animal example where you can see that here animal is a base class or the parent class which will extend you or another classes which are dog, cat, and call. These are the derived classes or the child classes. So our relationship in the JavaScript represent the inheritance if some mechanism of using the extent keywords to extend here is a keyword. Let suppose here I just write animal. And animal will extend the class of dog or cat or call S retro. Here we have one other example and that will make your concept more clear. Here we have the parent class, which is worker there, worker how the daily routines, GitHub. Break forth, Go to the work, work here, returns to the home, relax and sleep. Same is the case like here. Here we have the different types of worker. This is a real life example loci on the project-based, where you can see that this is a fight firefighter, lumberjack, hair postman, and the manager. So here, that will inherit the properties of this work. So a worker or the firefighter will set up these routines. I'll number Jack is also using these routines. A postmen is also using this routine and a manager will also using this routine. Here you can see that that will inherit the work from that. This is work. Heard the word from that. And postmen in inherit the work properties from that here, from this worker class. But here you can see that a manager is also working here. And here this will also inherit is headed the Relax property from that worker as well. And add the last. You can see here we held a class mammal where you can see that v, how some kinds of predator, wildcats and the pets DO, okay, which is inherit these properties right here. So these are some kinds of diagrammatical example, what I'm just showing it to you guys. What did the advantages of the inheritance in the object oriented programming? Like? But one many argue that across all the classes you how repeated peace of course, means that this is our reusability concept, a mechanism that facilitates to reuse the fields and the methods of the existing clause into the new class is known as reusability. And when you are creating a new class, you can use the same field and the methods already defined in the previous class, like as you can see here in a worker example of so you get that. So this is called reusability. To overcome this, you can create a parent class, let's suppose, say count, as you can see in our first example, you can see here. So this will implement the same function of the deposit and withdraw and make the child class inheritance, which is Class a count of checking or savings account, and so that they will have access to withdraw and deposit functions of your econ class. Hopefully your concept is much clear now that how we can use inheritance and what is a reusability concept. Let us come to the coding example of the inheritance. And I will tell you that how you can create your coding example with inheritance. Where you can see here that I'm just creating a class. And the class here is let suppose a car. We're inside this car class name. I just said the name of the car. Firstly, you can see here these are the parent class and the properties of parent class here is set name. So here this is a function. And here I just write this dot name and I just get the name here. Now here you can see that one another property which is is tarred engine, where I have to write that this is document dot right where you have write that engine is targeted for. And here I just write plus. Sorry, here I just write that this is plus and this dot name. So as you can see here, that V, How the Parent Class Name car, then we have the properties of this car is set car name and then start engine. So this car start, this engine will be started for this car name here. Now here you can see that. So these are the two properties. What I just get here. So car here is the parent class. Remember that now here you can see their eyes right car. Let's suppose car here is play or tau, or car here is 14x endings. Okay? Now here this car will extend. So this Twitter, I will extend the parent class, which is car. As you can see here, that this is our parent class and this class is derived, sorry, this child class is derived from this parent class where that will use these properties here. Where you can see that I'm striking some of the end of the functions here, which is top speed. And here I just write that this is, is speed here. So you get that. Now here you can see that I have arrived is toward the end the engine. And here you can see or I just want to add one of the end of the property which is engine stop. We're I just write that document dot right. And here I have to write that engine is topped for this dot car name. Now here you can see that I have to create one function name. We are hurt, right? That the speed of the car where I have to write the document. So this is the document here. And document.write where I had arrived there. The top is PDD. The car here is plus this dot name of the car. And here I have write plus. And here I side is, and then here I will write this speed of this car. As you can see here, that this property is of the car here, of the Twitter here is using his own property means that like this is the on property of this Toyota. And now here we will get the property of our parent class. Let's suppose this is a start and this is tarred engine. And here I am calling this again and you can see here that here I strike document. And this is document dot write where I had to write that this is engine. An engine is, is targeted for the child class. And I just closes core here. Now as you can see here, I'm just using LED has a keyword for the variable. So here is right, let my car, which is equal to new Toyota, which is my child className. And then here you can see that I have read that my car and my card or I'm just getting the name of the car. So this is. Setname. We're, I just write set name here is let suppose this is the name here is for tuner, okay? And I'll have the closest chord here. Now here I am just writing my card or is tarred engine and it's tart engine for disk Carney. Then I start my card or stop the engine. And the stop engine here is, you can see that this is the function images TOP engine as top engine is for the car name fortunately. And now here I'm setting the speed of my card dot top speed. And the top speed here is I cite 250 kilometers per hour. So as you can see here, all functionality is computed here for the inheritance. So here I'm just telling you that how this class is inherited from this parent class. As you can see here, this is our parent class, which is a name of car. And then we have that child class here is Toyota, which is a category of this car and a company of this car categories. Ok. Now here, inside this car means every car has the name, every car, how they start engine and every car how the stop engine. Now here I just used Toyota and here I just simply said the speed of the Toyota, which is a property of this Toyota car, means every car hail or every car company how is on speed? Okay, now here, I'm just inheriting this is tarred engine properties from this parent class. And then I will get, this is firstly, I will set the name of this Toyota car and inherit this setName from this pattern className, which is fortunate as an aim. And then here you can see that I have to write is start engine. So it started engine is also the property of this car clause. And then here this top engine is also the property of this class car. And add the last you can see here I'm just getting the property of this Toyota car here. Now here you can see that I have right, my car here and the place of that. I just run this core. And as you can see here, that firstly, we have seen that the engine is starting from the child class. Then engine is top for the dinner. And then here you can see that the top speed of the runner is 250. As you can see that how these car or how this Twitter child class is inherited, the parent class property that will inherit the name than is taught engine property than its top engine property and add the last that we'll run his own property, which is top is P. Hopefully you understand now that how we can use inheritance to inherit some of the properties from the parent clause to the child class. Now here I am just running one of the examples you guys, where I'm just using the super keyword and the constructor as well. Here I just write one another script tag where I have to write that. Let suppose this is a car of bike, okay? Now here you can see that I stride. Firstly, the constructor. And the constructor here is, you can see that I am just writing the variables here. Let suppose this, this dot here I had ride the company and the company here is, you can see that I have to write the company here is Honda or Yamaha, anything? Okay. Now here you can see that frosty, This is my car, sorry, bike as a class name, which is a parent class here. Now here I'm striding class. Let suppose this is a vehicle and this className hears away color and hair. I strived to extend and extend. The parent class name is Mike, so extended here as a keyword as you know. Now here I write the constructor. And the constructor here is four, that is prestigious, strike name. And then here I will write the price of that bike. Here, I'm just using super as a keyword. So why we are using the super keyword? The super keywords refers to the parent class. It is used to call the constructor of the parent class ends to excess the parent class properties and method. When you have to use the super keyword this is used for to get or to access the parent class properties and the methods to understand inheritance concept I, parent and the child class is better to read firstly, or it's better to watch over article on the classes in the Java script and you have to watch the java script class's lecture. Okay? Know when, when, when use in the constructor of the super keywords appear alone and must be used before this keyword is used. The super keywords can also be used to call the functions on the parent object. Now here, after this, I'm striking. Let suppose this dot name, an image ID equal to IS right name. And then here I say dish.price. And the price here is equal to I strike the price. Okay? Two properties here, name and the price after the super keyword. So I am just getting the name enterprise here, OK. Now after this hair I strike variable. Variable here is let suppose, recall and vehicle which is equal to I write new vehicles. So I'm just creating the object of that class first. And then here I stride that the Honda is, let suppose the name of the Honda is, let suppose Honda actuator, okay? So this is the name of the owner right here. And the price of that here is, I'm just defining the prize here. Let suppose the price here is 80 thousand, okay? Or hair as a prize here is let suppose 800. So this is up to you, okay, you can get any of the price. So here I say document.write where I have to write that plus T v dot, get the company where the company is the method of the year, the company is the property of this parent class. And then here you can see that I have to write concatenations of V dot name, which is a name of that bike. And then here I will write that plus V dot price. Okay? And I have the closest corner. Now, I just want this into the browser. So you can see here that firstly we how the company name Honda, which is getting from our parent class, then v how Honda actuator, which is the name of this pipe. And then here we have the price of this bike here. Hopefully you get that, that how we can inherit the parent class properties with the help of these inheritance. So this is how we can use inheritance in the java is read. Hope so you understand now, if you're not, please let me know and thanks for watching this lecture. 57. Prototypes and Prototypical Inheritance: Hey guys, welcome to this lecture. In this lecture we are going to talking about the prototype based inheritance. In programming, we often want to take something and extended, for instance, v, how a user object with its properties and methods and want to make admin and guest as slightly modify variants of it. We did like to reuse what V, How in the users and not copy the re-implemented, it mattered, just built a new objects and the top of it. The prototype. In JavaScript, the object, how is Pashas hidden properties, which is card prototype as name in the specifications that is either null or references through another object. This object is called prototype, like here, you can see that firstly, you have to create the prototype, which is our object. Then here you will create the object here for this prototype. So when this prototype object will be created, so this means that this is our prototype. The prototype is a little bit magical and when we want to read a property than object and it is missing, the JavaScript automatically takes it from the prototype. In programming setting is card prototypal inheritance. A prototypical programming is this tile of object oriented programming in which the behavior is we used, which is known as inheritance, is performed via a process of reusing existing object that, that serve as a prototypes. This model can be also known as prototype or prototype object oriented, classless instance object programming. Here we talking about the class less inheritance and I'll show you that how you can create it. Here. You can see that I just write a script tag here and insert the script tag. Possibly I'm just using a simple prototype vehicle inheritance to you. I strike constant. Constant here is a person and person which is equal to here I write that this is first name. And the first name here is there. Suppose this is the bulb. Okay, then here you have to see that I helped write lastname and the last name here is Dan. Yes. Ok. Now after this here you can see that I had to create one method or the function here, which is get forelimb. And the full name here is the function name here to getting the return properties of and the return properties of hair is right that this, sorry, you're right that this dot first name. And then we have write that this is getting the property of this dot lastname. And I had to close this code right here. Up to here you can see that I have to close this pore similar case like our old example. Here you can see that I'm just creating another class. You can see that this is a class of developer. And where you can see that I have right, firstName and first_name, which is equal to Harris, right? John. And then here I write lastname, which is equal to, I have to write that. The last name here is david. And I have to close this code here. Now here you can see that I'm just using the prototype where I had right, that they say that developer and developer dot underscore here I just write that this is Frodo. And then here you can see that I helped write that which is equal to person here. So you can see that this prototype properties is a simple accessor properties. An object which is Leica on object dot prototype, which is consisting of a getter and the setter functions. A property access for the protocol that actually like constants. Okay, hopefully you understand now. So I will tell you again, this protocol property is an object, is a property that's mapped the prototype of a constructor functions of an object. Hopefully you'll get that. Now let us come to the example now and you will see that how we can work with it. Now here you can see that at the last, I'm just accessing person. And the person here is get full name, which is my a function name. And then here you can see that I have right, developer, developer dot, get full name of the developer here. Now here you can see firstly, we are creating the Person class, which is a parent class where I just said the firstname and lastname here. Okay, now after this you can see here I'm just getting the full name, which is a method here where that will return us this.name and distort last name here in the developer eyesight, firstname and lastname here. Where you can see that after this, I'm just getting the full name here, which is properties of the parent class. So I am just getting this properties here in a child class as well, which is a full name you can see here. So this is how prototypal inheritance works in JavaScript. Now, let us turn to the another example here, so you can see that. So I just leave this example here and I'm just creating one of the, another example here. So as you can see here, that I'm just creating a function. So here you can see that I am just using constituted the keyword, but here I'm just using the function here, like our old example, eyesight bike. So here I'm just running the example here, or pedometer here. As a company. This is a function as a bike, which is our parent class. Or this is our constructor function where I just write that this.com. So this is a functional level inheritance here. So where I'm just using. Prototype S1. So Harris write company which is equal to company, and company which is equal to company here. And then here I have the right bike dot, prototype dot get the company, which is equal to, I. Just write here function. And the function here is return this.com. Okay? Now here you can see firstly, I'm just making this constructor, which is apparent constructor of this function. So you can see here, I'm just inherit this function from this vehicle. Okay? Where I had right name and then price. Now here I write this dot name, which is equal to name. And then this door prize. So this is Prize which is equal to price. Okay? Now here you can see that fuzzy, this is the function which is a parent function here where I just create a constructor company. And then here this is a prototype, OK. Now after this here you can see that this is a child function. And you can see that a child constructor function where I just said the name and the prices. So after this here you can see that I have right variable bike and I'm just creating the object here where I have to write the byte which is equal to mu bike, where I had right, that the bike name here is, or by company name here is Horner. And then I have to closest code. And then here you can see that I have right vehicle and vehicle dot here I tried prototype, which is equal to eyesight. Bike. Here you can see that now this bike we'll treat as the parent of the vehicle. Okay? Now here you can see that variable and variable here is the vehicle and this is the wakeful here and which is equal to nu. And nu here is the vehicle where I just said the values to it. Let's suppose this is the Honda shine and here the price of that here is 800. And I disclose its hair eyesight, document dot write and document.write here is you can see that wake her hair eyes, right? Get company. And this is a good company methods. So you can see here this is a good company, whereas using here. And then here I side plus. And plus here is wakeful dot name. Okay? And then here I just choose, again can continuation of vehicle. And this is vehicle dot prize of that. And I have to close this. So now, so now I am explaining this course to you where you can see that this is a function which is a bike, which is our parent constructor hetero parent function here. Now here you can see that this is a property of this function and now this is a prototype. What I'm describing here, which is a bike dot prototype. This will get the company name, which is equal to functions and that will return the company. Here you can see that this is a function which is a way cool. And here you can see that I have to write the parameters to that, which is name and the price. So here the pedometer is company, this.name that we'll get the name first and dish.price that we'll get the price was, It seems that kids like our old inheritance. So this function will, so this function will inherit this parent function. So this is another, You can see that a child function which is a vehicle and this is a bike as a parent function. Okay? Now here you can see that I'm just getting the map object to this function here. Or you can say that I'm just calling this function. So you can see here after this eyesight, wakeful dot prototype and bike. So here you can see that this bike, we'll treat two, this we call as the patent. Hope. So you get that now, I just defined the values and add the last, getting these all values n can continuations and underscore. So here you can see that this is the name of the company which is Honda. This is a name of the byte and then this is the price of the bike. Hopefully you get that how we can work with a prototype based inheritance in the Java SDK. If you find any of the problem regarding to this lecture, please let me know and thanks for watching this lecture. 58. Javascript Property Descriptors: Hey guys, welcome to this lecture. And in this lecture you have seen that we are going to start working with some of the advanced in the Java script. And in this lecture we are totally focused on the property descriptor in the Java script. And I will tell you that what is the proper descriptor and how we use it. Like an every object property is more than just name and value pairs. Each property is having the property descriptor that's helped to see all the attributes of that properties. How you can see that v, how let's suppose our variables of car. You may say that this is just a class of it. And here you can see that you have the brand of that car, that you have the model of that car, you have the engine capacity of that car, and you also have the maximum power of that car as well. To paramedical object's constructor has a method which let us view all the descriptor of any property of an object. For example, you can view the descriptor of the property brand of the car object by calling it how you can simply write console.log and then you have the right object. Get your own, like get on property descriptor where you just write the class name. Let's suppose a class name here is car, and then you have dried the property of that car, which is, let suppose brand or modal or engine. Okay? Let us see here that I'm just showing you an example on this property descriptor and I will tell you that how you can create in here, you can see that I'm just creating a script tag where I had to write, let suppose a variable and variable here is the car was equal to. Here I just write net. Suppose brand of the car which is equal to, I just write the brand here is od. Okay? Now here you can see that I have to write the brand of the car here, which is od. And here you can see that I have to write that model of that car. So I'm writing, or I am going to writing the mortal of that car here is sorry, this is column mark. And now here you can see that I described, this is our eight, sorry, R8 model, okay. Now here you can see that I have right the engine capacity of that car. So this is engine, and the engine here is, I have to write that the safe V8 engine, which is in his heart inside this car here, helps you get that. Now here you can see that I have to close this core and I have to write console dot log where I have to write that this is an object, okay? And object dot get your on property descriptor where I had to write firstly the name of the car averages tell you. And then here you can see that I just want to get the property of engine here. So I just simply write the name of that. And then here I will close this score. So in this example, you have seen that we are logging all the Attributes of the property, which is the engine of the object car. Using the method get your get on property descriptor. So we can see that additions to the value attribute, it has three more attribute which is configurable, in innumerable and writeable. So all of these are true by default. So let's just see how we can work with it or how we can, which is the output of this. Let us run this code. And you can see that I'm just going to inspect more and the console. So here you can see that we have an object right here. Firstly, we how, you have seen that firstly, we how the configurable, I'm configurable property, which is true. Then we has 7y how animatable we just drew. The value of here is you can see that I'm just define the value here which is an engine, and I just get the value of that. So here the value here is v tan and writing well here is true. The writable attributes decide whether the value associated with the property can be changed or not. So you can see where it is true. So this means that this is changeable. And we can modify the property attributes by using object dot defined property, how you simply write here, like like here you can see that I'm just writing console dot log. And here I will simply write on the place of that which is defined property. So this is just to define property here, where you have write your car and you are className, which is car, and then you have write your engine. And then here you have right comma, which is here you can write writable and writeable here is false. Okay? And then you have to define, let suppose card or hair. I just tried engine and here I'm inserting the new property here on V, a lemma. And I just closed the score here. Now here you can see that I'm running this. So you can see here the value here is changeable. So you can see that we tend, we tend here and when it's open days. So you can see here the mortal and everything is shown to us. We just drew a hair. You can see that. Hopefully you understand now. So this was the writable attributes inside the property descriptor. So as you can see here that we are writing, we are writing the writable attribute to the property engine, which is modified to the falls, which means that the MTD on writable, then if we tried to change the value of the engine property is stroll error, which is seeing the tribe. We're just seeing the type error cannot be assigned to the read-only property, okay? Then we have the innumerable attributes, which is by default the property for an adding objects are innumerable meaning and we can loop over them. By default that behavior can be modified by sitting the innumerable attributes to false for the properties. Then we held a configurable properties. Property, as you can see here, that I'm just removing this. And you can see here, I'm just refreshing this. So here you can see that v, how configurable. As you can see here, our configurable hair is true. So we can configure all the properties of an object. But if we set the configurable attributes to the false, it's prevents certain attributes being changed and prevents the deletion of the property itself. Then you have to simply write get and set attributes on that. So what does it get instead attitudes, so attributes get an sets are the functions which work on the getter and the setter, which is respectively for the property as well. Hopefully you get that, that how we can use the property descriptor in our core. If you find any of the problem regarding to this lecture, please let me know and thanks for watching this lecture. 59. Javascript Method Overriding: Hey guys, welcome to this lecture. And in this lecture we are going to talking about the mattered or writing in JavaScript. The matador writing in object-oriented programming is a language features that allow a subclass or a child class do provider specific implementations of a method that is already proved by one of its superclass or a parent class. If a subclass child clause or a child class has the same methods as declared in the parent class. It is known as method overriding, which means that here inside this class name, let's suppose you have the parent class name which is caught. And inside the car. You already have defined the function of let suppose model, and you want to declare this mortal inside your subclass or a child class. So this is car method overriding because you are implementing the same matter here. Hopefully you get that. Now here I will tell you a simple example on that matador loading sorting method while writing there, you can see that I have it right? And I have to write that function. And so inside this, firstly I just write script. And then here I tried that a function which is the name of leg. Multiply, sorry. Multiply where I just ride parameter is x, y and said, okay, now here you can see that I have write that. Let suppose this is return, and the return here is X multiplied by Y and y multiply by z. Here, as you can see, I'm just creating one matter here. Now here you can see that I'm just creating function, function which is multiply. As you can see, same function name I'm just using here. Where I just write x, n, y. Okay? Now here you can see that I have to write return and return here is x static y. And you can see here, I just give it a variable which is let suppose our reserve, which is equal to here, I write multiply where I strike the values 123 or 123 here. And then here you can see that you have to simply write document door, right? And here I will get the result of it. Okay? Now here you can see I'm just running this code to you guys and then I will explain this. So as you can see here, my resultant value here is two. Ok, now let us come to the corner here how this matter or writing work in function. So here you can see that I'm just defining a user-defined function. And the output here is two. So as you can see here, the value is multiplications will be equal to two instead of six. In this case, the only functions available, which is multiply. If so, we think VR making a call. A multiply function which is x, y, and z. And it's actually calling the multiplier of this x, n, y here. So the remaining pedometer will be ignored at this stage. How you can see that just make a concept of the method overriding. Don't focus on this output. So here you can see that once I just declare a function with the name of same function, I'm just declaring second Pam. So this means that this is method or writing. Hope so you get that. Now here you can see that firstly we how the multiply function, where I just multiply x, y, and z. Okay, this value. So here, the value of x, y, z 123 instead of outputs six v get as output two here, just because of, I just tell you that this is the method or writing, in this case, the only functions available multiply, which is a parameter of x and y. So beating that, we make a call to a multiplier of x, y, z. But it's actually calling multiplier of x and y. And the remaining pedometer will be ignored. Hope so you get that, that what is the process of the method of writing and how it's, how it's ignore the value or fewer. First function helps you understand now. Now here you can see that I'm just telling you one of the example that how you can use metalwork method or writing on the built-in function. This is the user-defined function. Now just come to the inbuilt function here. Now here you can see I have to write a variable. Variable will show us the alert message which is equal to I just write function. And the function here is a parameter of the message. And now you can see here that I'm just creating document dot write. We're, you can see that I'm just passing this message as the parameter. I'm just wanted to get the value of this passage here. Now here you can see that I just used the following calls to invoke or writing alert function, which is our built-in functions. Okay? Now here you can see that I have to write that a java script. And then here you can see that I have to write that Manilla message again. And here I'll just write that. This is learning, okay? And i is closest score here. Now I just go to the browser, refresh this. So here you can see that this is JavaScript and learning here. Okay? I think your question, Harry, the most of the time, alert function will displaying the message into the alert box. But here we have already done it. Now, it's displayed the message in the document.write hopes you get that, that how this display function work in that if you remove this and the place of that we are writing alert message to simply that will show us the output into the alert message. But here I just tell you that I am just operating the inbuilt function here. Okay, so that's why that is showing us the output into the this document or message here. Hopefully you get that. If you're not, please let me know and thanks for watching this lecture. 60. Javascript Property getters and setters: Welcome to this lecture. And in this lecture we are going to talking about the Property getters and setters matters into the JavaScript. In JavaScript, a setter can be used to execute a functions whenever is specified property is like attempt to attempt to be changed. Center are the most often used in conjunction with a getter to create a type of pseudo property. And it is not possible to simulate or simultaneously how setter on the property that hold on actual value. Now here I will tell you that how you can use the getter and setter properties and how you can get the data and said the data. The first kind of in the data properties. We already know that how to work with them. All the properties that we have been using until now where our data properties in Second types of properties is something new that accessor properties and they are essentially functions that execute on getting and setting value, but looked like a regular properties to an external core. Let us see according example firstly, and I will tell you that how you can use get property here. Now here I am just writing the script tag. And inside the script tag, I'm just writing a variable. And variable here is the parcel and the porcelain which is equal to I strike that. The first name of that person. Let's build a farce name here is the jom. Okay, and then here the last name of the person is. And here I'm starting the last name of that person and last name of that person here is daniels. Ok. Harris, right. Comma. And then after this hair I strike that. What language he speaking here? So I just write the language Harris English. So you get that. Now here at the last, I just tried that get, get here is the length. So I just use get as a keyword here. So lang here is I just create a new object here. And now here you can see that I'm strike return. Return is does Dart language. So I just get the language from this property here with the help of this getting or with the help of this Get keyword. Now add the last hair. You can see that I have the right document or if you want to write document.write or document or get element by ID. So this is up to you. So you have right, i have read document dot write where I had to write that this is the person and person dot length. Okay, And I have to close this code here. Or if you want to write like car document dot getElementByID. And here you have to simply write a paragraph tag where you have to write simple ID and ID, which is equal to here, eyesight ID, which is a good demo. And here you can see that I have to write that. This is getting the demo hair. And now here you can see that I helped write inner HTML, which is equal to I strike person and person dot lang here. Okay? And removing this, so let just see now, no. And open into the browser. And you can see that we didn't get any of the upper-right here. They're just check the core. And the core here is, you can see that first TV, how the firstname John, then dangerous, then the language Harry's English. And we have to remove this BR tag. And I just turned again. So here you can see that how we can get the property of this language here, okay? This is how we can getting the properties from with the help of this get as a keyword. Now on the place of this Get keyword, I'm just writing set has a keyword. Okay, and here you can see I have to comment this. And now here you can see that I have to, I have to write set which is length. And where I had to write that is providing the value. And the value here is, you can see that I described this language here. And language is equal to Harris, right? Value. Ok, now you can see here that we didn't have any of the language right here, or you want to change the language here. So you just simply see that here I am just writing person and person dot length and which is equal to hair. I decide that this is Romanian. Ok. Now you can see here and go to the browser and rephrase it. So as you can see, this is undefined language and let's just check the core. And here I will get the language as the molecule. Ok, now here as three phases here you can see I just simply set a new value with the help of this setter method. This is how we can get the value and set the values into the Java script. If you find any of the problem regarding the discourse or regarding to this lecture, please let me know. And thanks for watching this lecture. 61. JS Animation: Hey guys, welcome to this lecture. And in this lecture we are going to talk about the java script animations. Firstly, I will run two animations to you guys for your better understanding. And then I will create an animated form for you. So this lecture maybe going too lengthy, but this will be worth it to you. Here you can see that I'm just creating a script tag here. Where you can see that this is a script tag. And you can see here, I'm just creating a variable and variable here is an image object which is equal to Harris, right? Image object is null. Then here I have write init method, and then here I just write, this is the name of the messy-looking. Here I just write MJ object, which is equal to document dot, get element by ID, where the id here will be my image. And I just quote closest chord here. Then I just tried image object dots tile, where I have to write the positions and the position here is relative. So this is just an a positions which is relatively based. And after this you can see here that I'm just creating the image object again, where I have write this tile. And his title of the image here is left. So you can see here there's Tyler image here is left, which is 0 pixel. So here you can see that fuzzy and is getting the idea of them. Uj is my image here. Then here I have right image object, which is the style of the positions relative. And then here you can see that I helped write the positions here is left means that on the page of your web browser, your image will be look like that. Okay? Now here you can see that I just want to move this image. So this means that I am just animated this image here. So here I just write that this is move right means that if your image is placed in the left side here, so that will move right side with the help of one button. Okay? Now here you can see I had to write that image object and dot style dot left, which is equal to here I stride parse ent. And then here you can see that I have to write that this is an image object dot style, dot, left. Okay? Which means that your image will be going to left side to the right side. Then eyesight plus ten. This is just and position of that. And then here I just concatenate pixels, hair and eyes closest code. Okay, now after this Harris right, window and window will be lowered. When will we lowered on onload event? And here you can see that which is equal to Lord is init method. So you can see here this is the init method again. Now here you can see that inside this body tag, I'm just creating one of the form here. So form here is. Firstly, I'm just getting the image. We're here. Image which is the ID. And the ID here is this my image here, okay? And then after this I have write source which is equal to the browser. And here you can see that this is the advanced tag and I just get one of the image from here. Okay, this is just an DOM image again. Now here I'll closest chord. And then here you can see that I have to write a paragraph tag where I said that. Click on the button to move your image. And then here I will write that this is the input, input, which is a type of I cite button. And then here you can see that the value of that here is Click Me to move. And here this event will be load on click and onClick here it'll be using this mouse right function. So it is move right function. And this is the move right function and closest code and closest score here. Now here you can see that I'm running this course, you guys, where you can see that this is our image. And when I just click on this, click me to move button. So here you can see that, sorry, this image is not moving here. Let us check the error. And yes, here we have some kind of mistake where you can see the right side, this window load events outside the script. And this is a curly brackets right here. There's this, refresh it again, and then you can see that Harry's right-click me to the move. And you can see that this image is moving by mouse-click here, you can see that. So this is the one type of animation where I am inserting On the picture. Now here you can see that I'm just going to create some kinds of animations where a box will move from the top to the bottom. Here you can see that ice right. One button tag. And button here is onclick. And this is on click button. Here I have to write one function name, which is in script tag. And firstly, I'm just reading the script tag here. And inside this script tag, I am just creating a function. And the function here is move function name. Okay? So I just pause this move function name inside this button. And now you can see that here I just said the values to it, where the values here is. Click Me to move. Ok. Now here you can see that I have to write one DIV tag where the id of the tag here is equal to. I'll just write that this is animation and I just close this code here, okay? Then here inside this script tag, I'm just going to add one variable. And variable here is a l m, which is equal to document.getElementByID, where the id here is animation. So okay, so this is my ID here. Okay? So I'm just writing this ID inside this. Then after this I have right. Vr was, which is equal to dispose means positions, okay? Positions is equal to 0. Same is the case like our this example. Ok, now after this Harris Right, variable ID and the ID which is equal to set interval. So this interval, which is the frame, and the frame here is ten. So here you can see I'm just starting to types of IDs, which is here, where you can see that firstly, eyes right position, relative, and then left. And here you can see that I just framed the positions he has ten. But here you can see that I have to write frame is ten here. Okay? Now after this I am disputing the function. And the function here is, I have to write the function is frame. And then here you can see that I have right, if position and position it is equal, equal to 350, then you have to write clear the interval. And the interval here is I0. So this will clear the interval ID here. Now for this, I have to write that this is the else block of code. And as luck of core here will be pause and then increment operator. Okay, Now here I stride languages, dots, tile, and this is LMS means the element. Ok, that's why I'm striding m, lm. Okay? Now top, which is equal to the positions, means pause variable which is concatenations of pixel here, and then ice closest core here. Now here you can see that Alan's mean element dots tile style here is dot left. And then here you can see that which is equal to the pause. And then I slide that this is plus and the plus here is the pixels. So as you can see that our JavaScript is core Java, JavaScript code is completed here. And now you can see that here we have the animation which is Id, and then this is the button which is on Click Me. Now we are going to giving, we are setting some of these tiles right here. And the style of that here is there's a c. Now here. Firstly, I'm just writing this ties for the animations. And the size of the animations here is where a, sorry, this is wet and the width here is, I have to write that 50 pixels. Then her eyes, right? The animation size, which is height, and the height here is also 50 pixel here. Now position, so position, position here is equal to eyesight. This is an absolute positions and then add the last. I have the right background and the background here is, or the background color here is. You can see that I have right, that this is royal blue. Okay, now I just closed the score. So here when I just run this chord, so let's just see that this is Click Me to the move. And here you can see that when I just click here. So this animation will be moved like this. You can see here this is the 350 pixels. What I am just creating here, okay? And where's the three s? This is the positions which is 350. So this Phillip moving on the positions 350 here, okay, you can see that this is just an animations of the box. So hope so. Your concept is much clear about the animations and the basics types of animations here in the JavaScript. Let's just turn to the form base animations. And I will tell you how you can create some kind of form based animation. I tried JavaScript animations one, and let us see here, you can see that I'm just creating firstly the metatag, which is UTF eight. And then here you can see that after this, I am just writing Mehta and then SCTP equivalent, okay, where I have to write x slash, UA slash compatible. And then here I have to write that this is the content and the content here is Internet Explorer h. So this is the content of the Internet Explorer eight. So this is just a matter tag what I am disputing here. Now here I'm just creating the relative positions or response you as the layout where I write name. And name here is I'm just writing the viewport. Viewport means that if you are checking the webpage on the mobiles tablet, laptop, on the PC. So this will be accessible to you, means that this website will be responsible to you. Now here, eyesight, wet and wet, which is equal to device. And the device here is, I have to write that this is the vet and the vet after this, I'm striking that this is initial and the initial Here is this kill of equal to 1. Okay? Now here you can see pasta e. This is the viewport board. Then content and content here is wet and wet. Wet fish is equal to D, equal to device, and then vet. Okay, and then here you can see that this is the, this is just an initial SQL which is starting from 1. Now you can see that I have the right link, link, which is the reference of this style sheet. And then here I have to write HREF, which is a link tag. And then I started CSS slash main.css. So this will get the CSS five-by-five. Okay? Now here you can see that I have right script tag and script tag here is the source of HTTPS, which is WOW, backslash. And this is the API, what I'm just linking with this animations form. So you can see here this is a link of this API where I'm zooming here. So which is pop motion slash, disk slash, all motions dot Global, dot, min dot java script as closest chord here. Ok. Now after this, I'm just going to the body section of the page and we will going to start our form plus B, I'm just writing DIV tag. And the DIV tag here is the class of container. So this is a container class here or demonstrating. And then here you can see that first demonstrate H1 tag. And here I fill out the form. Ok, now offer this. You can see here that I'm executing one of the parallel of Tang again. And here's side please. Fill out the form below, because that's what we really need to do. Okay. Now, after this, I have to create one of the form here. And incidents form physically, I'm distributing the spam tag, sorry span tag, where I had right, the class. And the class here is the message, OK, and here he's tried that full name, please. Then after this, you can see here that I'm going to create one of the inputs. Input here is a type of text. And you can see that here I said that this is a place holder and place holder is name. And then here I am right class and the class here is I have to write that this is a text field. So TXT, FLP, okay. Now here I had right in port input, which is a type of text, which is the placeholder. And the place holder is email address where I had right? This is the class of text feed. And I have to close this core. Now here you can see that I have great input and produces a type of submit. And this is a Submit button here. And then here I started value. And here inside inter info means into your info and Harris write class. And the class here is the btn is stand for button. Now, you can see that some kinds of form is created here. And you can see that. So this is just an loading rate hit and you can see there fill out the form and this is our initial form, what we are going to create it here. So this is just an HTML work. So far we are done in here, okay? Now here you will see that we are moving to some of the JavaScript tags. Will Harris write script is clipped here is the source of SGP swam disconnecting the API here. So the API here is this one. Okay? Now offer this here. You can see that I'm just going to the script tag. And inside this script tag here you can see I'm just writing firstly the constant. The constant here is, I'm just creating the constant as the container which is equal to IS right. Pop motion. And this is a pop motions dot is Tyler. Ok. Here I just create our heritage is fixed. This M in the place of n. And then here you can see that I have the right document and a document dot QD selector Kumar. And this is QD selector. And then here you can see that I have read dot container. So this is our container here. Okay? Now I have to close this core. Where you can see that firstly, I am just writing constant as a container, which is you can see that variable. Then here I'm just getting this pope motion API then said there's tyler Dewar. Then here I just write document.write querySelector command, what we already studied about. And then here I'm just linking this with this container cloth. Okay? Now after this here you can see that I have to write this is the constant. And the constant here is form elements VD is equal to here. I said that this is document and document dot Curie. And a cutie selector, where I have to get the inner. Okay? Now here I strike constant. And the constant here is message, message pulp, which is message promotion, which is equal to ice ride. This promotion here, sorry, pop motion here. And which is Dort is tyler, where you can see that here I said that this is document document.write QT selector command, where I have to set this on message, which is my this forelimb. You can see that forelimb please. Okay. This will be set on this message here. After this, you can see here I strike constant and the constant here is my animations, which is equal to Harris, right? That this is Paul Motion where I had to write this is motion is twin, where you can see that I have right that from dot. You can see that I'm just setting the scale. And the scale here is salmon. And then after this here you can see that I just ride opacity. And opacity here is, you can see that this is 0. And add last eyesight, y xs, which is on minus 300. So I will explain this chord well while I was running this program, so don't confuse it. So now Harris write 22 here is, you can see that I have the right scale and the scale which is equal to one. And here you can see that this is opacity. And this is the opacity here, which is one. And then here you can see that this is y axis on 0. And then harris, right? Comma and then duration. And this is a duration which is on one minute, Holly, Okay, this will visible to you in one minute. Now here you can see that this is a constant here. And constant here is my animations to which is equal to Paul Motion. Where you can see that I have right key and the key here is frames. Now here I strike values. And values here is the container and the container hair is set. No hair I stride complete. And the complete here is equal to hurt, right? That this is my animations to dot v or I had to write message. And message here is the pulp message, okay? Which is dot set. So I will tell you what is a set. Messi, while I wasn't running the program. So just focus on the lecture here. And you can see that here I have to close the score. So I just remove this colleague breakers and closest chord here. Now after this I have the right constant. And the constant here is, is Tyler. And this is Tyler's which is equal to I just get the eddy. So I or I just create an ad it which is here plus the isocitrate form. So form elements here is dark children. Ok. Now after this hair I cite dot map. We will learn about the map in next upcoming lectures. So harris, right pulp, which is motion, is Tyler. And I had to close the score here. Now here you can see that I have dried constant. And this is a constant here as a keyword and here he cites Tyler, sorry, animation. So this is any missions that should equal to array. And the array here is I had to write it. This is as Tyler's, which is dot length. Okay? And this is Lent. And here I tried that dot fill and fill. Here is Paul. Motion. Dot Heaviside is spring. Okay? Now here you can see that I have to write that form, which will be starting from a 100. And then here you can, this will be goes up to 0. And here I have the closest school. Now here I strike pop motions and the pop motions dot is tagger. Where? Sorry, this is tagger. We're I have derived this as any missions and emission will be set on a 100. After this, I helped write star. And this heart here is V, which is equal to IC, which is equal to N greater than ice, right? V dot for each issue, where I had to set X n i. And then here I said that this is equal to and greater than is Tyler. So get the index i here. And then here I tried door set. And the set here is I can write y. And then here I started x axis. And then here you can see that I have to close this court as well. So I just copy this and paste it here and here as well. Okay, and sorry for that. Here. I will paste it here. And then I just closed the score. So as you can see here, my JavaScript code is completed here for setting the animations are I will discuss each and every thing in a while. I'm just running this program. Now, you just come to the tiding section of this code. Now here you can see after this, I said this tile. And then here you can see that firstly I'm just writing HTML and then style to the body where you can see their eyes, right? Margin in the margin here is 0. Then here I said the background and the background of this. Body here is I have to write that this is light green. Ok. Now after this here you can see that I have dried form and the font here is and the foreign family here is equal to area. Okay? Now after this you can see here that I just said H1 tag. And the H1 tag will be setting the margin of 0. Then closest chord. And here I strike dot container. And this is the container class what we are just getting. And then here you can see that I said vet, vet, Here it is, and 50 pixels. So this is a container for the form. And then here I strike padding and the padding here is two m. So this is the imprecise, ok. Now Harris Right background and the background here is I have to set the color white. And then here I had right at the border and the border radius, which is equal to eight pixel. So this is eight pixel. Now here I cite margin and the margin which is ten pixel, 10%, our poll. Now after this, you can see here we are getting the container here. Now here you can see that I just get the text field and setting, designing for the text fields. So harris, Ri, dot, TXT and FAD, which is the class name here. Here is right wet, wet, which is calculator. Here is a 100% and minus two e. And then here I have dried padding in the padding here is one EM, okay? Now here I have the right margin and the margin is the top margin here. We're I had right? This is one, E m, Okay? Now here I just write btn and the btn here is the red. And the red here is a 100%. And the background and the background here is, you can see that this is the color of light blue. Ok, now here, this is the button color, okay? Now here I strike color and the color here is vite. Okay, the text color here is white. Now I'm studying the margin, top, top margin of the button. So top margin is two m and then harris right border and the border here is equal to non button. How no border? Now I started border radius. And this is a border-radius and which is five pixel. Now padding. And the padding here is one EM and the form size. And the font size here is 2.1.2 EM. And then cursor. Cursor here is the pointer cursor means that I am wing this mouse, so this will be a pointer cursor. Okay, Now here I strike paragraph tag where I just write that the color of the paragraph tag is also green. For this Einstein message. And the message here is the position of absolute. And the padding is dot five E n. And the background. And the background is RGBA, which is meaning that red, green, blue. So here I write this is RGB colors 000. And then here I said 0.8. So let us see that. What is the color here? So this is the black color, okay? So this is a mixture of RGBA. And then here I have the right color and the color here is white. Or you have to write hexadecimal value, which is has triple F. And then here I cite best city. And the capacity here is 0. As you can see, our entire core is completed here. Before checking this output ledgers, check our court force. And you can see that, yes, here, he s Here we have an a problem where I just missed some of the commands. And you can see that here you have right, this is the update. And this is an update here. And then you can see that here I said that this is my animations dot is tarred. Okay? Now here I closes core. So this is the start. Okay? So as you can see, this will be done here. Now here inside this you can see that I just providing the values to the frame. So you can see that here I started firstly the value on the y axis, which is minus 50, where the opacity is. And the opacity is 0. Okay? Then here you can see that the opacity is 20 minus 20 and the capacity here is also minus 20. And you can see that here I side though passage will be starting from one and this is also one here. And then it adds the last eyesight opacity is 0 on 0. Okay? I strike comma here. And then here I cite, sorry, this is a comma. And then here I slide that these are the times. And the times here is equal to 0, then 0.2.8, and then one. Okay? And here I strike duration. And the duration here is, and the duration here is 3 thousand, which means that 3%. Okay? Now our code is successfully completed right here and we are going to the browser and refresh this page. So you can see here that how this page is any matrix. So you can see here. Now let us explain this code here. So you can see that firstly is starting from this container section. And here you will find the H1 tag, p tag and the form stack. So here you can see that this is H1 tag, this is paragraph tag, and this is two inputs and one button, okay? Which is name, email address, and then, so here you can see that these are the text field, both. And then this is a message button and this is at last the submit button. Ok. So here you can see that you will find the firstname, please. You can see here that this is, you will find the firstname please. So this is here. You will find that we're, we define the force. Sorry, here, let us check that. Sorry, that was a full name. So you can see here this message will be shown to us like hair, OK, when we are refreshing this program. So you can see here this is a full name please option, okay. This is also animated. Now here you can see that this is a constant and container as a constant. So I just take this container as a constant here. And then here I just said document dot QD selector on that. And then this is the inner HTML files, Edward. Then this is pop motion is tyler on the message here, which is our this name and this will be shown us full name, please message here with the help of this Kumar. Now here you can see that I tried constant animation first, where you can see that I just said the scale salmon and the capacity here is 0. Let's just check. So this is a scale salmon and opacity is 0. So there is no opacity. Opacity means that the color of your, this background, let us check that opacity is five. And refresh this. So you can see here that this is an opacity of five-year ok. And now here I will change the opacity as well. Okay? So you can see that. So this is called opacity. Then here this is a scale, a scale which is meaning that this is a size of entire your form. And then this is a y-axis and egg means this is the positions on the y-axis, just on positions. Okay? Now here you can see that. So you can see that this is a durations, which means that 100. So duration here is 1 second. So here you can see that this means that the duration of the moving of this animation is 1 second here, okay? You can see that this is invisible after 1 second. Here. Come to the my animation where you can see that this is a pop motions which is key for him. So keyframe here is this is the entire frame here, okay? Now after this you can change the opacity from here. And then this is a time. So time duration is 0.2.812 and time durations here is three seconds. So you can see here, which is 3 thousand, okay? Now here this will be that is taught the container set. And then after complete that will show us the message, which is pop message. Here you can see that this will show us this message after completing of frame load. And then here you can see that this is the cost constant as this tyler, This is getting the array of children element and then pop motions tyler, which is getting from map. And here you can see that this is the animation which is the length of a 100 to 0, and this is animation which is up to a 100 person. So here you can see this is getting the start method and here I'm sorting for each loop and then is Tyler dot set. So hopefully you understand now that how we can work with the Java Script animations. And if you don't understand the point right here, please let me know and thanks for watching this lecture. 62. JS Maps: Hey guys, welcome to this lecture. In this lecture we are going to talking about maps in Java. I scream from classical for-loop to the for each loop methods, various techniques and methods are used to iterate through the data sheet in JavaScript. One of the most popular method in the java script is map method. The map creates an added from calling a specific functions on each item in the present, array. Maps is a non mutating method that creates a new array as a lake, opposed to muting the methods which only make change to calling the array. In this lecture, we will see the maps and I will tell you that how this maps keys and the values were. To creating the maps. There is an keywords which is using new map. With the help of this keywords, you have to create the maps or a new map. As you can see here. Then you have to write simply map dot set. And here you will write keys and the value to the map. So this will is toward the key by the value, okay, means there's Philae store, you are key by your value. Let us see how we can create the map. So I just use let as a keyword which is equal to I just write new and new hair is map. The Harris write Map, dot, set and set here is, you can see here I'm just firstly creating string map. So here I cite one. Harris write one, and then here after this ion, right? String number one. So as you can see here, I just define the key as a string. Then I strike map.get set. And here I have to write one. And then here I will write that. Let suppose this is a number. So you can see here, sorry, this is one, and here we have the number. So this is, you can see here this is an numeric key right here. As you can see, this is one, so this is a numeric key. Now here I site map set, and then here I will write the map for the Boolean value where right true. And then here I tried, this is Boolean. So this is b and the Boolean here. And this is the number. Okay? And I closest chord here. Now after death, I have to write a alert message where I show the alert message to getting the map. So Harry said map.get method where I just frosty get the numeric key here, which is one. And then here you can see that I have right alert message. And the alert message here is I will get the map dot get, and the get here is the string key. Okay? So I start here and I have to closest code here. And at last you can see here I'm just getting the size of the map. So map dot size where you can see that I have the closest size. So remember the regular object, it would convert the key to the string and maps key to type. So there are the two different ways, so you have to get the strings and the numeric keys as well. Let's just run the example. And we will see the output for this. So you can see that firstly that we'll get the key one. And the key one value here is number. Ok, then that will get the string value, sorry, string key and the string value here is string. And then add the last that will show me the size of the map, which is three. Ok? So some keys points that you have to remember while you are working with the map. So a map object cannot contain the duplicate value. Remember that a map object can contain duplicate values as the key and the value can be any types which is allowing a both object and the parameter values. And the map objects, ice sheets it's element in the insertion order. Hopefully you get that. That map value cannot contain the duplicate key, but's it can pin the duplicates value. Okay, so this is how we work with the maps in the JavaScript. If you find a new problem regarding to this lecture or any point you not understand right here, please let me know and thanks for watching this lecture. 63. JS Timing: Hey guys, welcome to this lecture. And in this lecture we are going to talk about the Java Script Timer. A time or is a functions that enable us to execute a function at a particular time using the time, or is you can display the execution of the code so that it does not get done at the exact moment and event is triggered on the page. Let's suppose you are loading the page and some kind of timer is available deer, so execution will be here. You can see that let's suppose this arrow is normal execution of your program when you just set timer, let's suppose I just set the timer up to 3 second on this website. So after three seconds you are program will be executed. For example, you can use the timer booting the advertisement banner on your website at regular time intervals or display a real-time clock, extra, extra. How most of the time you can see some kinds of advertisement on the website that lets suppose 50% of, 50% of discount, okay? Or you can see that a 100% of this content, this type of advertisement is chosen after page loading up to three seconds or five, taken upwards three or five seconds. This advertisement are shows to your website, so these are done by the timer. And there are the two functions. What we use in the timer, which is first one is V, How set time out function. Okay? And then we have setInterval. So set time function is taking entire clock and set time interval is taking the time interval means that this is the tick. Now here you can see that we are running a programs that will execute the code after some means, some seconds of delay. Here you can see that I just write a code here, which is the JavaScript code. I just write a script tag. And inside this script tag, I'm just writing a function. So function here is my function or you just say that this is a time function. Here. I'm just showing the alert message to you guys where you can see that this is the alert message, hello, word. Ok, this is just a message. Okay? Now here, after this script tag, we are going to create one button. And here you can see that this is just in button here, which is onclick. Onclick here is this my function name? Okay, this is the name of the function. Here. You can see that I have to write this first damages, right? Set time out. And then here is write my function. And I just write that this is 343 thousand, which means that this will wait up to 3 second. And here it is, right. This is Click Me. Ok. So this will be displaying the results to you guys after three seconds. So the setTimeout function is used to execute a functions are specific piece of code just after a certain period of time. Mse mean that after time complete. This will be executed. I just want this into the browser and here you can see that I'm clicking on this button. So after three seconds, your function will be executing. So you can see here your program will be executing like this. So 100 means that this is 11000 milliseconds, which is equal to 1 second, okay? That's why I'm just writing 3 thousand here. So these are the 3 thousand milliseconds, which is equal to 3 second here. Okay? Hopefully you'll get that. Now here I am just running one of the, another examples. Do you guys vir, I just create a clock. Okay? And I will tell you that how you can create the clock here. So after that, I'm just going to the program here. And here, I'm just writing the script tag again. And inside this script tag, I am just writing firstly the clock. So here you can see that I just created a variable. So variable here is, I just write that this is interval ID. Okay? This is just an, you can say that variable here. So after this variable, I am just writing this as a function. And the function here is firstly, I am disputing the functions for show the time. Okay. I just tell you that I'm just waiting. Clock here where you can is top you are crop as well, okay? Or you can say that the, stop the execution of your timer as well. So firstly, you can see that I'm just creating function which is the short-time where I strike variable d and d, which is equal to new date. Okay? After creating the variables to the date, I'm just writing document dot getElementByID. And here I just get the ID here is clock. And then I'm just defining the Id clock here. And then here you can see that I cite innerHTML, which is equal to d. D is my variable here and d dot here. I tried that too. Local date string, okay? Which means that that will get your local time. And here you can see that I'm just creating a paragraph tag here. And here you can see that I'm assuming a paragraph tag and here is right then the current time on your computer is. Computer is, and then here I just write that this is a span tag where the ID is equal to clock. So as you can see here, I just said, or I just get the element by ID, which is the clock here. And I just closest code here. Okay? Now here, after this you can see that after getting the local time, I'm just won a function. And the function here is, is top the clock. And inside this function I just write clear the interval, okay, which means that after this, your time will be taught here. So here I am just writing clear interval, and here I'm just passing that interval ID, which is the variable right here, and encloses core. Now here, after this you can see that I am disputing of variable and variable. Here is the interval and interval ID, which is equal to i sights set interval. And here I just firstly write show time. And then here after this ice right there, this is 11000 milliseconds, which means that 1 second. And you can see that our core is here, completed. Now here you can see that I'm just going to the header tag and insurgents header tag. I'm just writing Hash clock and I'm just setting the designing or sorry, firstly, I'm citing this tile here. And after this is Tile, I'm just setting the designing to it where let's suppose this is the clock. And clock here is I'm setting the background and the background here is equal to, you can write black or you can write 000. Or sorry, this is a colon here. And here is write triple 0. Then here I tried pairing. And the padding here is two pixels, sorry, 20 pixels here, or you can set the pairing as auto. Now here I said the margin. And the margin here is 20 pixels and 0. Now here I'm writing the color here, and the color here is you can set the color here is green or the light green, or you can set the color here is LAN green or anything you can write here. Then here eyesight display, which is block. And then here it is, right, that this is the form of 48 pixel monospace. Sorry, this is a 48 pixel which is mono. Okay? So you can see that here our program is completed. Now I'm just running this course. So you can see that our clock here is showing to us which is getting the data only. Okay? Now here you can see that I'm just going to the code. And here I'm just running, or I'm just creating a button here. So you can see that here I just write that this is the button which is onclick. Sorry, this is onclick. Onclick, which is equal to here, it's right, then this is this top clock, or this is a stopped clock here. And after this, you can see here that I am just closing this and here it is right there it is. Top the clock that is showing me the date here. Just because of hair, you can see that I just said the tool local date string, so that we'll get the date string here if you want to get the time string. So you just simply write the time on the place of that. So you can run this function. And then here you will run your code again. And after some seconds here what we are just defining, your date method will be executed here. So this is OK, OK string. And here you can see that I just run this code again. And you can see that I just get the current time here. You can see that. And after this when you are just topping this. So you can see that this top the club, when I just click on stop the clock. So you can see here your interval is, is top right here. So this is how you can execute and you can install your execution with the help of the timer method. So you get that both setTimeout and set interval methods return a unique ID and a positive integer value, which is called timer identifier, okay, which identify the time created by these methods. So you get that if you knew the problem regarding with this timer method in the JavaScript, please let me know and thanks for watching this lecture. 64. JS Validation : Hey guys, welcome to this lecture. And in this lecture we are going to talking about the java is gripped validations. It is important to validate the form submitted by the users because it can help improve Ashish values. So well edition is must to attend to gate the user. Java is corrupts, provides the facility to validate the form on the client side. So data processing will be faster than the server side validations. Most of the web developer preferred Java is script form validations to well, it sometimes will form. Like webs form help become an essential part of the web applications and it is often used to collect the user information such as name, email address, location, and age. When you are submitting some kinds of application. Or you want to apply some kind of package, or you want to get the online order. So here, as you see there, that there are some kinds of forms and some forms how the forms validations. Let's suppose you have some kinds of input field and input field name here is name. And if you leave this field blank, so a message is generated to you that you have to add the name here. So this is card the form validations. So client-side validation is also helpful in creating the better user experience, since it is false too, because the validations occurred within the user's browser. Whether the server side validations occur on the servers, which require the user's input to first submit and send the data and then offered that that will validate that data. At Firstly, you can see that I'm just creating some kinds of form here. And then I will tell you that how we can validate this form. So this is just, this is not just a form, this is a single input field. What I am disputing to you guys for your better understanding. Then after this, we will create some kinds of TextField as well. In next lecture we will work on are, we will create our entire form. Ok, so here I'm just telling you about the validations of the forms and how we validate our text weeds. Okay, now here I just said the name of the form, which is my form. And then here you can see that I have to write on submit method. Okay, now here you can see that I am disputing function and function here is I just write that this is validate the form. Okay? This is my function name. And here I just write this function name here, and I just get the return value of it as well. Now here, you can see that inside this form, here, I'm just creating the name. And name here is the input field. And input here is the type of text, which is the name of fname. Fname I just write here just for a first_name. And then here inside the input, input, which is a type of submit. So this will be the burden of Submit button. And here the value here is submit. Okay. As it just run this into the browser. So you will find the output like this so far, okay? No offer this. We are going to the script and here I just validate this form, plus yeah, just create a variable, variable x, which is equal to document and document dot here I just write forms. Ok? Now here, inside this form here I have write that this is my form, which is my this form name as you can see here. And then here you can see that I have to write that this is the first dimerize smart duality. This forced him as well. So I'll just write value. And then here I, if x is equal, equal to Harris, write empty string. Then here I have to write that a lawyer and alert here is name must be filled. Okay? This means that you have to submit your name and you cannot leave your field blank here. That's why I'm just writing the empty string here, means that if your field is empty, so that will be simple. Simply showing a message to you guys. Ok, and here is right false, return and the fall, the statement. Okay? Now here, I just run this first year, I had to write that this is a funky and I just submit this. So you can see that this is submitting right here and the name here is submitted. Now refresh this and click on Submit button. So here you can see there are messages shows to me that name must be submitted means that you cannot leave this field blank here. Hopefully you are. Concept is much clear that how we can validate our forms in the java script. Now here you can see that how a weekend validate our field with the help of password, like if you leave the password as blank, so that will ask you for the password. Okay, let us see how we can work with it. Now in this example, we already worked with the name, and here we will work with a possible that if the password is less than six digit or a digit, correct her. So that will be not showing you as the output or that will be the formal nor be submitted right here. Here. You can see that I have derived BR tag and then here I have write et heartache for your better understanding that we are working with the different scripts. Here inside script tag. Inside the script tag here I'm starting function. And function here is validate form number one. Okay? And here inside that we are going to create our step. Now we just come to the form here. So form here is the name, that name which is equal to here it is, right. My phone my phone number one is my name of that. Okay. Then here I have write that this is on submit. And this is on submit. And here I have write that this is return. And return here is my function name. Okay? And I have to close this code right here. Firstly, I had right, that this is, let suppose full name. And the full name here is equal to the input field and infer feel hair is a type of text. And this is a type of text here. And then here we have to set the name of this input field which has a name. And name. Here is the name. Okay? Then here I have write BR tag for the single end break. And after this we are creating the password field here. Okay? And the password field here is, you can see that which is a type of input and input hair is a type of, I just said that this is a type of password. And then the name here is also a possible, okay? And then here I have write that it is a BR tag. And this is a BR tag here. No offer this I had to submit. I have to get the submit button and which is a type of submit. And here we have to set the value. And the value here is login, or the value here is register. This is up to you, ok? You can set any of the values here. So as you can see here, our form is look like this. Firstname and forelimb, password and register. Let's just validate this form. And here you can see that we have to create two variables, postponing the variable name. And then we have the variable and variable here is a password. Okay. Personally I have the right document. Sorry, this is document dot my form. And my form here is my form one. You can see that this is the name of the form. And then here I had to write the name and name dot value here. And here you can see the document dot form. I just copy this and paste it here. And then here I have to write, and this is password. And here the password here is the value. So firstly, this form will get the values with the help of these variables and is toward the value into this variables. And after this hair, you can see that I had to go to the if statement. And if name which is equal equal to null. You can see that in last lecture we write the name as the empty string. But if you leave this field as a null, or you can see that name which is equal equal to empty string. So a message is generated to you, which is a alert message and alert message here is that name cannot be blank. Okay, and then here you can see that I have to close this core and that will return the result as the faults. Why I just write falls here because that will not move into submitting any kinds of information. Okay? Now here I started else if, else if condition here is, we just said the condition on the password. So if POS, which is equal to or if passages dot length and here I just stride length is less than six or lent his less than eight means that you must be given a digit of characters or eight digits of numbers here. Now here I strike alert and alert here is password must be at least. It character long. Okay? And then here I have two closest chord. And here you can see that I had to write return. And the return result here is false. We can now here I'm zooming this chord again, see if this code and refresh this. Firstly I decide or just turn. So you can see here name can't be blank. And here you can see that I had ride that high is a full name. And then here 12345678 digit characters. So he digit characters here. And click on register. So you can see here this forms are submitted if I just write register. So you can see here the password must be at least one character long. So as you can see here, this is just a form validations on the first name and the password. Now here I will tell you that how you can add the text field right here means annex text field, which will only take your number, means that if you want to take the user's mobile number, so add that field you have to write, you have to only get the numbers you, you didn't dispute it, didn't take any of the tags, string characters. Okay? Here you can see that. And we are going to the code here. And now here you can see I have write as if and else if here is, I have arrived, that is number and here I have to write this is num. Okay? Now here you can see that I have to create a variable. And variable here is num. Num, which is equal to Harris, right? That this is document dot my form number one dot here I had right, that this is number and number dot value. Okay, now here we are going to add one of the fields right here, which is the number field. And here it is, right? This is number where I had right? That this is the input and input which is a type of text. Ok. And here the name is num. Okay? Now here you have right is Pan Tang and his pen tag here is the id. And ID which is equal to here. I started there. This ID here is equal to Num Lock. And I have to close this code here. And then this is BR tag. Okay, now here you can see that now we're just going to this script. And here I had right, that this is document and document. Document dot get element by ID and hair. The ID here is you can see that Num Lock. And then here you can see that I have right, which is equal to inter numeric value only. So this will be the message here, and then that will return the result as the false here. Ok, hope to get that. Now here. So this is if-else and here we have write this, okay? Refresh this. So you can see here we are going to add only number. This is the password field, and this is the name. I just click on that so you can see here my art, it her hair is submitted. If I just leave any of the fields blank here. So you can see here, so a sorry, this is the number and that will not show us the message here. So here we have to go to the else statement. And inside this as a statement here I write that this will be return true here. Here we have some kinds of Fair I just tried is number here, but here I'm just choosing is nan here, which is a function. And then here I just run this code and the password field and then I just click on that. So that will be submitted here. And and if I just write this corrector values, so let us check the error. We call this as not taking this string here. Sorry the number here. And yes, we miss in our HTML here. Refresh this. Save and refresh again and heritage right then hello is a full limb. This is the password. And if I just write the correctors here into this number field and just click on register. So here you can see that in turn numeric values only. And here you can see that when I just geared to numeric values, so that will be taking as the resultant value here. Hopefully you get that, that how you can work with a form validations in the java is clip. So this is how we can work with our JavaScript formulations. If you find any of the problem right here in this lecture, please let me know and thanks for watching this lecture. 65. JS Validation Form: Hey guys, welcome to this lecture. And in this lecture we are going to talking about the error handling in JavaScript. Before starting the error handling or the exceptional hurling in the JavaScript, we just need to understand that what is an error? Error is an illegal operations performed by the users which result in abnormal, Abnormal work off your program. How? Like here, I just write a script tag. And this is where I'm just closing script tag here. So this is your normal flow of program, okay, which held no errors, then you are not giving this Trump tag here and not closing this his grip. So our error message is generated right here, which is car and error. So what is an adder handling? The error handling refers to the response and recovery procedures from the error condition which is present in the software applications. In other words, it is a process which is compressed of anticipations and detections and resolutions of the application's error. Programming errors or the communications error. Errors handling helps in maintaining the normal flow of a program executions. In fact, many applications based numerous design challenging and a challenging and considering the error handling technique. So I just tell you about the adder and the error handling in the JavaScript. Now here you can see that what is the exception handling? An exception which signifies the presence of an abnormal conditions vis a vis required the specials operating or technique. Just tell you that the error handling. So I'll show you the air in the air V, How the illegal operations performed by the users which result in abnormal working of the poland seems a case like here in the exception. So in the exception v, how the programmings term and exceptions of the anomalous chord that's brig, the normal flow of a code, such as exceptions require specialized programming, which is VCE construct from the execution. So now here I will tell you that what is the exceptional exception handling in programming exception handling is a process or method used for handling the abnormal is statement in the code and that is executing them. It is also enabled the handle, handle of flow control of your programs from the handling the core, which have the various handler are used that process the executions and execute the code. Ok. We have several types of adder handling where we help us the ascent takes error. So where is the sand takes era? The sentenced error here is, I just tell you that you are going to write a script tag here. And then here you have to close this script. Tag, okay, so this is normal for program when you just not ride is script tag here. So this is called, this is a syntax error, which means that when our users make a mistake in a predefined sent text of a programming language. And the syntax error we may appear here. Then we have the runtime error. The runtime error here is occur when an air, like during the execution of your program, such as an error is known as run-time error. The cores this create runtime errors is known as exceptions, helps you understand now, does the exception handling are used for the handling of runtime errors. Then we have the logical errors. The logical errors are the errors which occur where the Lodge, where V makes a logical mistake in the programs that may not proceed that desired output and may terminate abnormally, such as an error is known as logical error. Now here you can see that I'm just running a programs. Do you guys? We're VR throwing some kinds of errors. Do you? Ok, here you can see that I have to write a script tag. And Firstly, I am just writing the sentence based errors to you guys. Where you can see that here I strike window dot. Here, I just write print function. Ok. And here you can see that I held close. I heard not close this parenthesis right here. Okay. Now here I'm just running this error into browser. So you can see here that is resulting, but this is not resulting because we not give it any of the values right here. Now here you can see I have to write that this is document and document dot write. And right here is I have to write that this is error. And here you can see that I have to close this code. Now here when I just run this. So you can see here that this is not showing us the value just because of here. We are not giving a parentheses right here. So this means that this is car en, sent text-based. Hope so you understand now, now here, I will tell you about the runtime error right now. Now here you can see there I heard right? Document and document.write where you can see that I have to define the string but not given any other value right here. So you can see that here, let us check the result of it. And then here I just go to the inspect mode and a console. So you can see here, there is showing me the error of this line. Okay? So here I'm just removing this error here. And let us check now. So here you can see that this is a right statement. Now, okay, at, in our last example, you can see here that was a sentence Bayes error. But here you can see that we define our right, right line of code. But that is not showing as a result because here we are making an error which is showing us a runtime error right here, which is not showing us the, any of the output value, okay? Now here let us turn to the logical errors here. So what are the logical errors? The logical errors can be the most difficult types of errors to track down. These errors are not the result of a scientist or a runtime error. Instead, the occurs when they make a mistake in a logic that's drives your script and you do not get the result of you do not the expected result. Okay? Now here you can see that we rise this type of an error with a try catch. And finally as a keyword, what is try? Tries to judgments let you test a block of code of error. How you can see that here, if you hell, is starting your program, OK, then here you have the conditions where you are. Try your core. If your conditions hell, no errors. So that will be going to the catch block and that is ignore, sorry, that is ignore the catch block and then that will execute, or is it okay if this conditions have an adder? So that will simply going to the try again, which is reset your trie, then that will execute a catch block of co-writing. Let us see how. You can see here that I'm just using try as a keyword. Then here you can see I'm just using a alert message. And the alert message here is, you can see that Harris right? Try block runs. Okay? And here you can see that after this, I'm just using one of the alert message here again. And alert here is It's right here and of high time block. Ok, here you can see they're offered this tri-state men run. You just have to catch an error right here. Okay? The enter here is, you can see that. Here you can see the error here is alert. And the alert message here is, here we are catching and the catching is ignore because there is no error. Ok. Here you can see, Let's just run this course. So you can see here this is a try blocks run and try blocks n because there isn't no error here and no exception is cached right here. Hope so. You get that here. You can see that or I'm doing some kind of mistake here. Like here I am writing alert. Okay? Now here you can see that I just saved this program, reset try blocks R1. And then here you can see that there is ending. Yes. Okay, here we have to find an error. And here we are writing the alert. Alert here, as you can see that, OK. Here I just did a little mistake. So the error variables is not defined here, okay? Now here when I just run this sold here you can see their tribal ox run first. And then here you can see that that will ignore this alert message here in the try block, and that will simply move to the catch block here and catch your exception. Hopefully you understand now. Now here the point is that try and catch blocks only work with our runtime errors. Hope so you get that. Here. You can see that here we are going to run a program with cat, sort of a trie Castro and finally as the exception here. So Prize statements let you test the block of code like this. Then catch exception, let you handle the error, then true statements let you create a customs error. And finally statements let you execute the code after the tie and catch. Ok. Regarding to the reason. Now here you can see that this is a time catch, but we already studied about. Now here we are going to working with throw an error, which means that we are trying error by default. Okay, now here you can see that here I'm creating a new script where I have to throw an error. Here you can see I have to define the body inside its body here I'm just creating a paragraph tag. We're eyes right there. This is true error. Okay? Then here I have to create an input and produce a typo button. We're the value here is click me. And then here I have right on click method. And for onClick method here we have nucleate the function name. I have declared the function, which is where I started that this is a function as a function name. And here I have to pass this function name or how to call this function name to this button. Okay, closest chord. And now here you can see that I'm just drawing and add our hair posting. I'm just shooting a variable a and variable a which is equal to 200. And then here I have the right variable B and variable B, which is equal to here, it's right 0. So here I'm just defining a 0 division error. Ok? And here you can see that I have right, if b which is equal equal to 0, b which is equal equal to 0. And here I just used TO as a keyword, okay? And throw as a keyword here. And then here you can see that I had right there, this is divided by 0. Okay? And here I have to closest core. Now I just go to the else condition. And the else condition here is I have the right variable c and c, which is equal to a divided by b. Where you can see that here after this, I hope will catch this error, this error. So here I write E as exception or the error we're I had right? Alert message and alert message here is error and error will be Ken continuations of e, which means that here I'm adding the EDA, this statement. Okay? Now here you can see that I have to run this code right now. So firstly, that will run the first statements. And here you can see that the caches ignore because of there is no error. Here. This is running this score. And now here I just said, okay, And then you can see that I'm going to just click on this Click me button. So here you can see that a throw error is generated right here, which is error divided by 0 error. Ok, so you can use toy statements to write your built-in exceptions into your program, or you have to customize your exceptions. So you get that. So let us move to the final statement and the finally statements let you execute the code after a try and the catch regardless to the reason how legacy. Now here you can see that when this core, I'm just writing a Finally as a keyword. And here I'm just using the alert message. And the alert message here is I'm writing HI, I M finally. Okay. And here I have to close as core. Now I just run this code. So first you can see here our this tries to Edmund is run. Then here the exception is occur, where this will move to the catch. And now here you can see that offered these, we are moving to the finally as the keyword right here. Hopefully you understand now that what is an adder and what is exception handling into the JavaScript hopes you get that if you find any of the problem at any point you not understand right here in this lecture, please let me know and thanks for watching this lecture. 66. Javascript Error Handling : Hey guys, welcome to this lecture. And in this lecture we are going to talking about the error handling in JavaScript. Before starting the error handling or the exceptional hurling in the JavaScript, we just need to understand that what is an error? Error is an illegal operations performed by the users which result in abnormal, Abnormal work off your program. How? Like here, I just write a script tag. And this is where I'm just closing script tag here. So this is your normal flow of program, okay, which held no errors when you are not giving this term tag here and not closing this his grip. So our error message is generated right here, which is card an error. So what is an adder handling? The error handling refers to the response and recovery procedures from the error condition which is present in the software applications. In other words, it is a process which is compressed of anticipations and detections and resolutions of the application's error. Programming errors or the communications error. Errors handling helps in maintaining the normal flow of a program executions. In fact, many applications based numerous design challenging and a challenging and considering the error handling technique. So I just tell you about the adder and the error handling in the JavaScript. Now here you can see that what is the exception handling? An exception which signifies the presence of an abnormal conditions vis a vis required the specials operative or technique. It just tells you that the error handling. So I'll show you the air in the air beheld the illegal operations performed by the users which desert in abnormal working of the poland seems a case like here in the exception. So in the exception v, how the programmings term and exceptions of the anomalous chord that's brig, the normal flow of a code, such as exceptions require specialized programming, which is construct from the execution. So now here I will tell you that what is the exceptional exception handling in programming exception handling is a process or method used for handling the abnormal is statement in the code and that is executing them. It is also enabled the handle, handle of flow control of your programs from the handling, the code which had a various handler are used that process the executions and execute the code. Ok. We have several types of adder handling where we help us the ascent takes error. So what is a syntax error? The sentenced error here is, I just tell you that you are going to write a script tag here. And then here you have to close this script. Tag, okay, so this is normal for program when you just not ride is script tag here. So this is called, this is a syntax error, which means that when our users make a mistake in a predefined syntax of a programming language. And the syntax error we may appear here. Then we have the runtime error. The runtime error here is, this is occur when an air like are during the execution of your programs, such as an error is known as run-time error. The CORS is create. Runtime errors is known as exceptions, helps you understand now, does the exception handling are used for the handling the runtime errors. Then we had the logical errors. The logical errors are errors which occur where the Lodge, where V makes a logical mistake in the programs that may not proceed that desired output and may terminate abnormally, such as an error is known as logical error. Now here you can see that I'm just running a programs. Do you guys? We're VR throwing some kinds of errors. Do you? Ok, here you can see that I have to write a script tag. And Firstly, I am just writing the sentence based errors to you guys where you can see that her eyes right window dot here, I just write print function. Ok. And here you can see that I held close. I heard not close this parenthesis right here. Okay. Now here I'm just running this error into browser. So you can see here that is resulting, but this is not resulting because we not give it any of the values right here. Now here you can see I have to write that this is document and document dot write. And right here is I have to write that this is error. And here you can see that I have to close this code. Now here when I just run this. So you can see here that this is not showing us the value just because of here. We are not giving a parentheses right here. So this means that this is car en, sent text-based. Hope so you understand now, now here, I will tell you about the runtime error right now. Now here you can see there I heard right? Document and document.write where you can see that I have to define the string but not given any other value right here. So you can see that here, let us check the result of it. And then here I just go to the inspect mode and console. So you can see here, there is showing me the error of this line. Okay? So here I'm just removing this adder here. And let us check now. So here you can see that this is a right statement. Now, okay, at, in our last example, you can see here that was sent Higgs Bayes error. But here you can see that redefine our right, right line of code. But that is not showing as a result because here we are making an error which is showing us a runtime error right here, which is not showing us the, any of the output value, okay? Now here let us turn to the logical errors here. So what are the logical errors? The logical errors can be the most difficult types of errors to track down. These errors are not the result of a scientist or a runtime error. Instead, the occurs when they make a mistake in a logic that's drives your script and you do not get the result of you do not the expected result. Okay? Now here you can see that v Rice, these type of an error with our try catch. And finally as a keyword, what is try? Tries to enrichments. Let you test a block of code of error. How you can see that here, if you hell, is starting your program, OK, then here you have the conditions where you are. Try your core. If your conditions hell, no errors. So that will be going to the catch block and that is ignore, sorry, that is ignore the catch block and then that will execute, or is it okay if this conditions have an adder? So that will simply going to the try again, which is reset your trie, then that will execute a catch block of code. Let us see how. You can see here that I'm just using try as a keyword. Then here you can see that I'm using an alert message. And alert message here is, you can see that Harris right? Try block runs. Okay? And here you can see that after this, I'm just using one of the alert message here again. And alert here is It's right here and of high time block. Ok, here you can see they're offered this tri-state men run. You just have to catch an error right here. Okay? The enter here is, you can see that. Here you can see the error here is alert. And the alert message here is, here we are catching and the catching is ignore because there is no error. Ok. Here you can see, Let's just run this court. So you can see here this is a try blocks run and try blocks n because there isn't no error here and no exception is cached right here. Hope so you get that here. You can see that or I'm doing some kinds of mistake here. Like here I am writing alert, okay? Now here you can see that I just saved this program, reset try blocks R1. And then here you can see that there is ending. Yes. Okay, here we have to find an error. And here we are writing the alert. Alert here is you can see that, OK. Here I just did a little mistake. So the error variables is not defined here, okay? Now here when I just run this sold here you can see that tribal ox run first. And then here you can see that that will ignore this alert message here in the try block, and that will simply move to the catch block here and catch your exception. Hopefully you understand now. Now here the point is that try and catch blocks only work with our runtime errors. Hope so you get that. Here. You can see that here we are going to run a program with Kat, sorry, we try Castro and finally as the exception here. So Prize statements let you test the block of code like this, then catch exception, let you handle the error, then true statements let you create a customs error. And finally statements let you execute the code after the tie and catch. Ok. Regarding to the reason. Now here you can see that this is a time catch, but we already studied about. Now here we are going to working with throw an error, which means that we are toying error by default. Okay, now here you can see that here I'm creating a new script where I have to throw an error. Here you can see I have to define the body inside its body here I'm just creating a paragraph tag. We eyes right, that this is true error. Okay? Then here I have to create an input and produce a typo button. We're the value here is click me. And then here I have right on click method. And for onClick method here we have nucleate the function name. I have declared the function, which is where I started that this is a function as a function name. And here I have to pass this function name or her to call this function name to this button. Okay, closest chord. And now here you can see that I'm destroying and add our hair posting. I'm just shooting a variable a and variable a which is equal to 200. And then here I have the right variable B and variable B, which is equal to here, it's right 0. So here I'm just defining a 0 division error. Ok? And here you can see that I have right, if b which is equal equal to 0, b which is equal equal to 0. And here I just used TO as a keyword, okay? And throw as a keyword here. And then here you can see that I had right there, this is divided by 0. Okay? And here I have to closest core. Now I just go to the else condition. And the else condition here is I have the right variable c and c, which is equal to a divided by b. Where you can see that here after this, I hope will catch this error, this error. So here I write E as exception or the error we're I had right? Alert message and alert message here is error. And error will be Ken continuations of E, which means r. Here I'm adding the EDA, this statement. Okay? Now here you can see that I have to run this code right now. So firstly, that will run the first statements. And here you can see that the catch is ignore because of there is no error here. This is running this score. And now here I just said, okay, And then you can see that I'm going to just click on this Click me button. So here you can see that a throw error is generated right here, which is error divided by 0 error. Ok, so you can use toy statements to write your built-in exceptions into your program, or you have to customize your exceptions. So you get that. So let us move to the final statement and the finally statements let you execute the code after a trie and the cat regardless to the reason how led. You see. Now here you can see that with this core and is writing a Finally as a keyword. And here I'm just using the alert message. And the alert message here is I'm writing HI, I M finally. Okay. And here I have two closest core. Now, I just run this code too fast. You can see here our this try statement is run. Then here the exception is occur, where this will move to the catch. And now here you can see that offered these, we are moving to the finally as the keyword right here. Hopefully you understand now that what is an adder and what is exception handling into the JavaScript hopes you get that if you find any of the problem at any point you not understand right here in this lecture, please let me know and thanks for watching this lecture. 67. The let Keyword: Hey guys, welcome to this lecture. And in this lecture we are going to talking about the java is cribbed ES6. And inside this we are going to talking about the let keyword in JavaScript. Es6 is specifications introduce two news way to declaring a variable's in the java script with let and const and the cost as the keyword. In this lecture, I will tell you about the lead as the keyword. The let keyword is used to declare the variables in the java script. And the V-A-R keyword is also used to declare our variables. But the key difference between them is lies in there is Cope likes variables in the variables we use in the function is Cope and let me used into the block is coped. Hopes you get that. To understand the let keyword, it is important to understand that how let n variables are different from each other. Here I will tell you that this is the VaR as a keyword and this is LET as a keyword. And that can used to create the global variable. The both are used to create the global as the variable. So here inside this variables V, How to redeclare? Redeclare the variables and D3 declarations is involved right here. And we also use this variables here in to the function is scope. Ok. But here into the let variables, the re-declaration is not a loud in the same scope, and this is used in to the block scope. How you can see here, there are, I'm just creating a script tag here. And inside this script tag here you can see that like I just define console dot log where I had to write that the value of the x here is. And then here you can see their eyes defined x. Okay? What does x where the x here is my variable and x which is equal to ten. And then here is write x, which is equal to x plus five. So as you can see here, this is a normal variable where I'm scooting here with this function is okay. Now here you can see that I have right console, console dot log, okay? And here you can see that I have right there, this is a value of x after block. So as you can see here, this variable here is a function based approach, which is I'm using the console function, okay, now here you can see that I have right function, function which is equal to finger as a keyword. And then here you can see that I have to simply call this function named outside this function. Okay? This is a function here. Now here you can see I have to go to the browser. And check this. So inspect mode and console. So you can see here the value of the x here is undefined and the value of x after the block here. Hopefully you get that this is just an variable-based approach right here. Now here we are going to take this as the let keyword as an ES6 and lead-based approach, I just create a function here. Then here you can see that I'm just commenting this. So here you can see that this is not the x is not none here and the tie is uncommenting the line. Okay? Now here you can see that I just change this as a let, let x is equal to ten and x, which is equal to x plus five. Now here you can see that I just remove this function based approach right here. Okay? Now here you can see that I just run this court. So here you can see that the x is not non here, helps you get that. So first, you can see here the variables. You can see here how we can declare the variables and how we can declare the LED. So here you can see that in a second example of the LED. So the lake, I care, I just write line number 16, which represent that X, which is equal to x plus five. So note that this is only non that defined within the blog. It is means a define block of code which is declare in. Okay, now here, I'm not going to confuse you more about this. Here IS right, that script tag again, we just move to the let keyword. So here's died. Let suppose, let mangle. I'm just running this as a blocks is cobe. Okay? Now I'm not using the function here. Now here you can see that the mango color here is ice ride that yellow. Ok, now here I start if mangle and the mango hair is equal to the flow, then here I have to write that this is the let and let his a keyword and let mango, which is equal to Harris, Right? Blue. Okay, then here I write console, console dot log. And the log here is I just paused mango as the variables. Now here you can see that I have read console log and console log here is mangle, okay? Here you can see that I have to run this core. So firstly, you can see here that we'll run blue and yellow. So mango is declare as the yellow and the line number first hairs or here you can see that. But we are re-declaring the mango as the blue here with the help of this lead keyword in this line number 26. So here you can see that inside this if block, however, the output is shown at the mango is declared inside the if block and v has an is coped with that blocks only. And the outside of that block V, originally print the mango here for that case. Firstly, you can see here the blue is printed and then here we originally print our Mango as the yellow here. Hopefully you'll get that. Now here, I am running one of the, another example to you guys. We're a hydride script tag. And inside this script tag I had right, let x which is equal to one, let x which is equal to one. Then here I have right, if x which is equal, equal to one. And here you can see that I had to write let x, which is equal to two. Same is the case like yellow and the blue as a mango. Ok, here you can see that I have right console and console.log file here, x here, and then here. After this you can see that same is the case like our old example here, I would write console controller log and printing the ordinal value here, which is x. Ok? Now here you can see that the first DNA add initially we have to declare the value of x is one. And then here you can see that if x which is equal to, equal to one, then here we are changing this code right here, which is x, which is equal to two. Let us run this output and run it. So here you can see that first year it will print the resulting value as a tool. And then we have the value here as the one seen as a case like our this example. So this is how VR renting or VR creating the let keyword in the java script ES6. So hopefully you understand now this example, if you not understand any of the point right here in this lecture, please let me know and thanks for watching this lecture. 68. The const Keyword: Hey guys, welcome to this lecture. And in this lecture we are going to talk about the Ackman script constant keyword. The constant declarations create read-only reference to a variables. And it does not means that the value is hold is mutable, just that the variables identifier cannot be Italy is fine. Okay, and the constants are the block scope. Remember the ad and a much like variables defined using the let statements. The following rules you have to applied on the cost constant keyword in EC six, where you have two cannot change the Reyes. I cannot change the value of the variables, and you cannot reassign the value to a variable as in Constant six and constant ES6, you have bu, you cannot read, declare your variables as well. And a constant require an initializer. That's constant must be initialized during the declarations. You have to declare cost as a keyword to mutate or do mute your variables. How legacy? Here you can see that I have to write that. Let suppose this is a paragraph tag and here I have defined the ID and IE which is equal to demo. And here I have to write that this is a paragraph tag, okay? Now here I have write script tag where I had to running section here where you can see that I have to firstly define the cost as a keyword. The constants means that the value cannot be changeable. And here I just write 2.3.14, which is the value of i. And this is the value here, okay? Now here you can see that after declaring off, after assigning this value, I just write pi again, which is equal to 3.14 hops, you get that. So here, at first stage you can see that this is a constant, which is the value is not changeable. And then here you can see that I have, I have to reassign this value here, which is 3.14. Okay? So now here you can see that I have to write that this is catching an adder here. And the error here is I have to write that document dot getElementByID, where the id here is demo. And then here I have write that this is dot inner HTML. And then here you can see that I have to generate an error here. Okay? Now here you can see that the error here is generating an error here that you cannot change value. Ok? Now here I'm just running this core. And you can see here that you cannot change the value, which is my statement here, which is my a, this paragraph tag here. And here you can see that after this, you can see this is a type error and the assignment to the constant variable, okay? Which means that we cannot redeclare a variables after Constant, our this variables hopes you get that, that how we can create a constant in ES6. If you find any of the problem regarding to this lecture, please let me know and thanks for watching this lecture. 69. For Loop in ES6: Hey guys, welcome to this lecture. You already studied about the for loop in the JavaScript. Here I will tell you that how you can create a for loop in ES6, the for loop will execute a block of code is specified the number of time, and it can use to I28 or a fixed set of values like, such as an Arab. Let us see how we can create a for loop in JavaScript ES6. Here you can see that I have to create for, for as a keyword here. Then here I described let. Let here is, I'm just creating a temporary variable here. Now here you can see that I'm just initializing the value of i and a value for i here is 0. Then here I strike J, which is equal to one. And then here you can see that j, which is less than 30. Okay? Now here you can see that I have to write temp, temp, which is equal to i. And then here you can see that I heard right? I, which is equal to j. Ok? Then after this here you can see that I have right, coma and G, which is equal to i and i plus temp. Okay? Now here you can see that I have right console, console log. And the log here is I'm just printing the value of the G here. So here you can see that I'm just running the fiber nicely series example where you can see that I have to assign a multiple expressions here, okay, two combining the for loop. So you can see here firstly, I just define the four. Then let has a keyword. So these two are the keyword. So let is a variable here. Then here I just create this as a temporary variable and I is also temporary variable, sorry, i is also a lead has a variable. And then here we are defining a value of the j. Here. I'm just defining the expression here. Let suppose in variable example, which is a function based approach where you can see that you have to define let suppose that I which is equal to number. Then you have to define i which is greater than or less than, which is equal to 30. And then you have to define i plus plus. But here you can see that I have to define this as four, let temporary variable then here IS defined on you. Every variable is i, and then here the variable is j. Then here we define the variable condition here. Then here you can see that I start temporary variable, which is i and i, which is equal to j and j which is equal to I plus temporary variable, which means that if you're temporary variable is equal to I and II here is 0, okay? Then here's 0, which is equal to one in this stage, okay? Then here you can see that one which is equal to 00 plus one, okay? Now here you can see that, that our V1, which is equal to one plus one. So that will execute the research like this, okay, at it initially this will result in value will be one, then 12, then 358, and so on. Okay, let us check the output for this course. And here you can see that I had to run this into the browser inspect mode and here the console. So you can see here the value here is one, which is a two-time here. You can see that then here we have 2358132134 right here. Hope so you get that, that how we can run a for-loop in ES6, okay? If you find any of the problem right here in this lecture, please let me know and thanks for watching this lecture. 70. ES6 Template Literals: Hey guys, welcome to this lecture. And in this lecture we are going to talking about template literals in JavaScript. In this lecture, you will learn about the JavaScript tempted literal. That's a love you to work with us. Simple string template, which is very easier. Like period to ES6, you can use single quotations or double quotations to whip up a string literals. And the string has a very limited functionality to enable you to solve more complex problems, which is ES6 template literals provides the syntax that allow you to work with is string in a foster and cleaner way is our template literal. Template literals are a string literal That's allow imbedded expressions and you can use mighty lines is strings and strings like interpolations features with them. They are called template literals. Here you can see that I'm just writing some of the following program for our template literals where you can see their eyes, right? Let and let here is strings and the strings which is equal to here, you can see that I have to write these quotations marks sign, and here inside this is a template literal. Ok, and I had to close this core here. So here you can see that you have to define a mighty is string here. And you can also use the string formatting to your string here. Okay? Now here you can see that if you get the result of it here IS right, that console and console.log file here is, I have to write that this is strings and legis check the result and value of it. Where I have to run this string literal. And you can see, you can see that in inspect mode and then here you, so you can see here that this is our template literal, okay? Now here you can also find the length of your literal as well. How you can see here I had right console and console dot here I write log and log here is I have to write strings. And string dot. Here I just find the length of my string as well. Okay? And you can also write console log. And here you have the right type of, You can also find the type of your keyword, type of your variable as well with the help of this type of keyword. So here you can see that we have an error right here which is in length, is string dot length here. And let's just check the error. The error here is here I define capital String. Let's just run this code again. So you can see here firstly, we have to get the templates retro, then the length of this literal here is 1027. And then here we have, right, we have to get the type is string. Here, why we use the template literals? Let suppose here I'm just creating key, I'm just creating a variable. The variable here is a string, one, which is equal to here is right. I just write, let suppose here. If I just define this quotations mark here, so you can see here I inside here. So when I just define this, so you can see here this is not taking as the quotations mark into your string. Ledges check with a string literal. So your template literal, so we're just right here, and here is, the template IS right that this is a template literals. And now here I have write console.log. And the log file here is I have to write that this is a string number one. Ok, let us run this code right now. So you can see here, this is touring is come up with here. And here you can see that this is a quotation mark well into your string. Hopefully you understand now that how you can run your example with template literal in the Java escaped. So this is our example today. If you find any of the problem regarding to this lecture, please let me know and thanks for watching this lecture. 71. ES6 Default Function Parameters: Hey guys, welcome to this lecture. And in this lecture we are going to talking about the default function's parameter in the java is webbed ES6. So here you will see that how we can handle our default function's parameter. Here I'm just creating a function, function which is hello. Okay, so inside the script tag, I'm just declaring the function. And the function here is Hello. This is a function, function is hello. And I just run this. Okay? Now here you can see that I am just pausing pedometer as the message. And here you can see that I'm assigning the value to this value is Hello. I am function. Now, as you can see here, I'm striking console. Console dot log file here is, I'm just running this parameter here, which is the message here. And as you can see here, I'm just running this function, or I'm calling this function right here. So the default value of the message parameter here is you can see that this is into the hello function and the function value here is Hello, I am function. In JavaScript, the function's parameters allow you to initialize the name pedometer with a default value. And if no value or an undefined is passed into a function legacy, what is the output of it? And here you can see that I'm just going to the inspect more and console here. So you can see here, this is the value of the function. Here. Helps you understand now that what is the default function's parameter into this ES6 in JavaScript? If you find any other problem regarding to this lecture, please let me know and thanks for watching this lecture. 72. ES6 Arrow Functions: Hey guys, welcome to this lecture. And in this lecture we are going to talking about the arrow function in the JavaScript. Arrow functions were introduced with ES6 as a new set sent takes off writing JavaScript function. This CVS developer times and simplify the function is scope. Here I will tell you that what are the arrow functions? The arrow functions are also called the fat arrow from you can, if you use the coffee is clipped as the trans compiled language. So r, these are the most concise scientist off writing the function expression and they utilize a new token, which is let suppose is equal to and greater than sign dash look like a fat arrow. Here you can see that which is equal to and greater than sign. Okay? So the function arrow functions are anonymous and that has changed the way this behind this binds in function. Okay? So arrow functions expression is scientifically compact icon nature to the regular functions expressions through without is on binding to the, this argument and super keywords, new door target keywords. So arrow functions, expressions are situated as the method and they cannot be used as a constructor. Let us check about the example of the arrow function and we will see that how we can use this. So I just write a script tag here. And inside this script tag, I am just writing the constant as the keyword, which is for declaring the variable here. So let's suppose I am just writing constant materials, which is equal to I just define the material here. So constant means that the value cannot be changing well, okay? Now here you can see that the materials here are firstly, I'm just writing the car materials. Ok. Then here you can see that, as you can see here, I'm just creating an array. So this is inside the brackets here. Then here you can see that I'm just writing the truck material. Then offer these hair. You can see that I have right, that plain material. Then here you can see that at the last hair I tried that. Let suppose cycle materials. So as you can see here, I'm just defining some kinds of AD is here. And now here you can see that I'm just getting the length of it. So you can see here I'm just defining console.log. And here you can see that I have derived material, material Durham just using map it. And then here you can see that I had write material which is equal to and greater than sign, which is a sign of arrow function here. Hope so you get that. Now here you can see that material dot Loc, sorry, Material dot here is defined or hems getting the length of these venues here. Legis check the expected output for this chord. Where you can see here IS right, I just run this into Google Chrome and then here console. So you can see here the air is size here is four, and then the first value Lent here is 13151515 here. So you can see here this is a prototype of an array here. Ok, hopefully you understand now. So where do we use arrow function? So this is here, arrow function, which is a fat arrow here. If you find I knew the problem regarding to this lecture, please let me know and thanks for watching this lecture. 73. ES6 Classes: Hey guys, welcome to this lecture. And in this lecture we are going to talking about the classes in ES6. Object orientation is a software developed in Paradise Grom that's followed the real-world modelling. Object orientations consider a program as the collections of the objects that communicate with each other via the mechanism of the methods. Es6 supports these object oriented components to where you have to define the object, where you have to define this state behavior and identity. Then you have to declare the classes as well, where a class in the term of object-oriented with object-oriented programming, which is a blueprint for creating the object and a class encapsulate the data for the object, then you have to use the methods as well. You can also use constructor and function as well. So the constructor is responsible for allocating the memory for an object into the class and the functions are represent the action of object can take. Let us take the example of creating a class and creating the object to it into the ES6. Here you can see that we are going to create a class. The class here is I just create a class of polygon. We're, you have to see that firstly, I'm just creating the constructor. So as I just tell you that the constructor here for allocating the memory, where I have to define the variable height. And the wet. Here I just write this dot height, which is equal to IS right, that this is a height here. Then here after this, I am just using this dot W. So W is for wet, and here I had to define the breadth of that. Now here I should define the test. So I'm just testing these conditions who controlled or log. And the log here is i is defined, this is height of the polygon. And then here you have seen that I had right, this dot edge. Okay? Now here you can see that I had to define wet and wet of the polygon. And here it's defined I dot w here, sorry, this dot w here. Now here I am disputing the instance of the class here where you can see that hair is dyed OBJ Pauli, ok, where you can see this object here and here is a new. And new. Here is a polygon is within a class name. And then here I define the height which is 20 and where which is equal to 250 here. Okay? Now here you can see that I have right OBJ, OBJ polly dot here. I'm just running the test function here. So in this example, you have seen that we are creating a class which is a polygon. And the class constructor takes two arguments here, which is the height and vet, which respectfully respect to v. Okay, so here you can see that I just used this keyword. So this keywords refers to the current instance of the class which is hide and then the wet. In other word constructor here is initialized two variables, which is h and w, with the parameters value passed to the constructor. Here you can see that I'm just running the test functions in the class, which prints the value of the height and the width. Okay? Make the scripts functional. The object of the class here is created into this object poorly. So here you can see that that is refers to a variable here and here I am disputing the object. Okay, let's just check the output for this. And you can see here, I'm just going to inspect more and console. So you can see here the height of the polygon is 20 and the width of the polygon here is 50. This is how you can declare your classes in ES6. Hope so you understand now if you not understanding the point right here, please let me know and thanks for watching this lecture. 74. The Rest Parameters: Hey guys, welcome to this lecture. And in this lecture you will learn how to use Javascript rest pedometer to gather the parameter and put them in all in Arabic. How ES6 provide a new kinds of parameters. So card, pedometer, arrest pedometer that has a prefix of three dots. The rest pedometers allow you to represent an indefinite numbers of arguments as an eddie. How you can see that? Let us suppose this is an inside this script tag. I'm just creating a function. The function here is, you can see that this is a function and here I Stride parameter a, b. And here you can see that I just write three dots where I just tell you. And then here I just define arguments into it. So last pedometers argument is prefixed with three dots, which is called rest pedometer. All the arguments that you post in the functions will map to a pedometer list in the sent text here you can see. And the first argument is mapped to a, and the second argument is mapped to B. And the third, fourth, etc, will be as tore into the rest parameter, which is argument, okay? As an edit. Here you can see that I'm just running example. Do you guys, we're here. You can see that this is a function. And here you can see that this is an argument. Ok. And now here you can see that I'm just getting the return value of the arguments. Here are arguments here. I'm just defining the red Reduce. So as you can see here, that I'm just defining the rest pedometer here. Now here I just write that this is preview or hair. He's right that this is previous. And then here, after this you can see I'm just defining the parameter as the current here. Okay? Where I just defined this arrow function. And now here you can see that I have to define return value. And the return value here is previous plus cutting. Okay? And I had two closest core here. Now here you can see their eyes define cutoff, consoled or log value. Where Firstly I heard to define the function name or I have to call the function name where I just sum these values we are, you can see that Harris, right, 1234. And after this hair, you can see that I have right console and console.log file here is I have to define the function. I have to call the function. We're ice, right? 12456. Okay, and here I have to close the score. Now. I'm just running this into the browser. So you can see here inspect Console. So first value here is ten and then 18. So ten here is 236 and this is ten. And then here you can see that salmon. And here you can see the 1313 plus six. Here is, you can see that the value here is 18. Ok? This is our rest pedometer in JavaScript ES6. Hopefully you understand now, if you're not understand any of the plant right here in this lecture, please let me know. And thanks for watching this lecture. 75. The Spread Operator: Hey guys, welcome to this lecture. In this lecture you will learn about the JavaScript is pretty operator that is spread out the elements of an iterable object. Es6 provides a new operator, which is card is played operator that consists of three dots as seem like rest pedometers. So they split operators allow you to split out the element hope and rotatable objects such as an add a map set, etc. Here you can see them. And as you finding this script tag, and inside this script tag, I'm just defining the constant as a keyword or anything. So I just tried constant or which is equal to here, m is defining the adding there. Suppose one to five, sorry, one comma two comma five. Ok. Then here, so one comma three, comma phi because we're here, I'm just creating the order number Eddie. And here salmon as well. Okay, now here you can see that I have right constant. And the constant here is I just define one another variable which is combined and the combined which is equal to here, it's right that this is, let suppose 2468. And here you can see that I'm just defining the grid operator where I had to redefine three dot sine. And then here I have write or so r is my variable here. Here I have to write console, console.log file, where you can see that here I'm just running this combined value. Ok. This is my variable here. So let us check this output into the browser and inspect Console. And here you can see that Eris has eight. So here you can see that I'm just combined these two value without constant. So 2468123 and cell or an even value here, okay? Now here in this example you have seen that the main focus here is, is paid operator, where the spin operator is located into the 4d area here, where you can see that these are the $3 signs and the strip operator is unpack the element of an array here. Okay? So we also use these three dots science for the rest parameters as well. But Dreze pedometers are using as the arguments into your function. But here you can see that we are using this as an operator here. Hopefully you'll get that. If you find any of the problem regarding to this lecture, please let me know and thanks for watching this lecture. 76. ES6 Destructuring Assignment: Hey guys, welcome to this lecture. In this lecture we are going to talking about disrupting assignment in JavaScript. Disrupting assignments allow you to assign the properties of an array or object to variable using the sentence that's looks similar to array or object literals. Destructing assignments is a coolest feature That's come along with ES6. Disrupting assignments is a Java is expressions that make it possible to unpack the value from areas or properties from objects into the distinct variable. That is, we can extract the data from array and objects and assign them to a variables. Look question why, why it is necessary to use destructing assignments. Let us see, imagine v0, v1 to extract data from LA. So how this will be done, you already studied the array. Now here you can see I'm just creating a variable. Variable here is, you can see I'm striding variable intro, which is equal to, I'm just screwing the arrow airing. So very site high. Here I write i. Then here I write I m. And here you can see there I'm just creating another variable, sorry, under indexed array here and here it is, right, that high funky programmer. Okay? So here as you can see, I'm just creating the array. And then here you can see that I'm distributing the variable. Variable here is I am writing this is a variable for the greeting. And then here I'm discrete getting this Adi, and I just want to print the airway on the index number 0. Same is the case like here. I'm just, I just want to print, let's suppose the name and name here is, I just want to print the name of that funky here. So you can see here, I just want to print, sorry, 0123. And so I just wanted to print this index number three here, which is my name. Ok. So here as you can see that I just get to index values here, which is 03. Ok? So d rho 0 is high. Entry here is funky. Okay? This is a normal area, what I'm describing here, okay. Now here you can see that I'm straight months soul console.log. And then here firstly I'm just printing this variable greeting. And then here after this, I have to print this variable name. And here you can see that I just want to print the name here. Okay, now here you can see that I'm running this program and go to the console. And here you can see. It will normally print us the index 0 and index number three, which is our funky here. So we can see that when we want to extract the data from array, we had to do the same thing over and over again means if you want to get the index number 0 value, so we have to get the value 0000 again and again. So ES6 destructing assignments make it easier to extract the data. How to do this? So let's just see now. Now here I'm just running example eliminating a basic example on this disrupting destructing assignments. Now here you can see that I swan to print the script. Now here, I just get this era here. So you can see here this is my adding. Now here I'm just creating the variable. Variable. Here is firstly, you can see that I'm just deleting the variable here. Firstly, this is the variable for greeting. And then here, if you want to get the name, so simple, you have to write the name here. So which is equal to Harris, Right? Intro. Hopes you get that. Now here I have write console, console log file. And then here after this, I just get greeting. Sorry, here I just get greeting. And then here I will get Console and console.log. And log here is I have to get the name of that. Or here you can see that we already get the name. So here I'm writing that. I sworn to print the pronoun. And here you can see that the pronoun here, okay, now here you can see your eyes go to the browser and refresh this. So you can see here policy that will print me reading message which is high, and then that will print me the pronoun, which is I here. Ok? So as you can see here, that how we can assign a basic is trucked basic destructing, okay? Now, you can see that how I'm just declaring a variable with this, okay, now here you can see that this is a script tag. Now here I'm just copy this and printing here. Then here I just remove this air is values and here you can see. So this is my variable here where I'm just creating, which is greeting and the pronoun. Hopes you get that. Now here with the help of these variables. So I just assign the variables to these array. So as you can see here, that this is greeting and the pronoun here. Now which is equal to hi, I'm funky programmer. And seemingly you just want to get here. So as you can see, I just rephrase it so you can see here fuzzy that will print hi, and then I hear, hopefully you get that how we can use or how we can assign the variables before, how we can declare the variables before assigning. Now here you can notice that a variables are set from the left to right, as you can see here. So the first variable get the first item in the array and the second variables get the Second Variables in the array and so on. If you want to print some of the another value like I, M, And then here you have to create one other variable. Ok? So this is how we can declaring the variables before assignment in destructing method. Ok, hopefully you get that and your concept is much clearer about this topic today, which is disrupting assignment. If you find any of the problem regarding to this lecture, please let me know and thanks for watching this lecture. 77. ES6 Destructuring Assignment 2 : Hey guys, welcome to this lecture. And in this lecture we are going to talking about the java script generators. The java script generator or the generator functions are one of the lesser known feature of Ekman scripts. It's which is ES6. They can look a bit strange. In this lecture, I will tell you that how you can use it. So now you can see what our generator, generator sits somewhere between I traitors and functions. The way normal functions work is very simple. When you invoke a function, it will return until it completions. It will execute all the code inside it or until it encounters the return statement. I Twitter's work in a similar way. How let us take the example of the for loop and imagine that you have an array with some data or you want to use for loop do I trade or it, when the for loop it start, it will return, it will run the Until, it will run until it stopped by the conditions you specify it. Or it will identify that this is what distinguished between the java script I traitors from the functions and I traitors. Sorry, the java script generators from the functions. And the first difference is that the generator will not execute their code when you involve them. Instead, they will return is PESTLE object, which is called generator. The second difference is that unlike a loop, you will not get all the value at once. When you use Generator installed, you get each value only if you want hit hopes you get that. Know what are the advantages of generator and why we use them. This is an evolutions model which delays the evolution of an expressions until its value is needed. The generator, our memory efficient and it is like identify the repeating area and generating techniques are identifier's. Okay? Now here, you can see that here we are going to run examples on the generator here. So first example here is I just run a regular function example first for you guys. For your better understanding. Here, you can see that I had to write function which is ABC. And then here you can see that I have to write that. Let suppose this is console and console.log here is I have write that this is I. Then here you can see that high ice, right? I, then here I write M funky programmer. Okay? Now here you can see that this is the function name which is ABC. And here you can see that these are some of the values what I just assigned here. And here you can see that I have to write that this is ABC and I was calling this function here. Now here you can see that I just run this into the browser. And you can see here the resulting values, which is Hi, I'm funky programmer. This is a normal functions. What we already studied about. Now here you can see that how we can. Convert a regular functions to the function generator or the generator. Here. You can see that personally I am just writing the static to it, which is Tarik ABC or here you can see that is Tarik generate. So you get that. So as you can see here now, our function name is generate, or if you want to write a, b, c, two, this is up to you. Now here, you can see that I have to write console dot log. Here you can see that I have to write that. This is I have to write this is in walked and walked her eyes, right? This is first time. So I just want to involve this function. And then here you can see that I have to write this in walk second time. Ok? Now here you can see that I have right? Yet as a keyword. Okay, yet as a keyword, OK, first time. And then here you can see that I have right, yelled and yelled to add the second tan. So at Firstly, you have seen that we held right is take first with the function keyword, as you can see here, to making this function as a generator. So it's static. Static donates that agenda rate functions or this is now, this is now not an normal function here. Okay? At second statement, you have seen that we have right yet statements vis return a value and pause the execution of the function. Hopefully you get that, that how we can use yell statements, okay? Once again, I will explain this yell statements. So as you can see, this yelled, Here is a keyword. It is a bit like return but not returned. Simply debt will return after a functions call and it will not allow you to do anything after returning this statement. Okay, now here you can see that I have to run this code here. And here you can see that our, sorry, yes, okay. Here we have a little bit mistake where we have, you can see that here we have the right ABC, ok. And here I have to write let lead gen, which is equal to here, it's right, generate. So as you can see here, I'm just getting a generator here. And so here I'm just, I just invoke the generator here, pasta, you have seen nothing in the console as you can see here if I just run this. So you can see here, okay. And after this, you can see here, I'm just right. I just tried console, console.log and log here is I just print generator here. Now just refresh. So here you can see that the generator here is suspended, okay, when I just click on that. So you can see here that the status of the generator is suspended. And here you can see that it is a function receiver. And the scopes here are three. This is one example of what we create on the generator ledgers talking about the more examples on the generator here, where you can see that I have right scape, Sorry, script tag. Where you can see that here I had right function. And the function here is, is tiring. Similar case like our example here IS right, abc. Okay, Now here I write let. Let here is the index on 0. Now here you can see that I have to write while loop. While loop here is the statement. If the statement here is true, means that the 0, so you have to simply write yet as a keyword. And then here I have the right index and index plus, plus, which is my increment operator. Okay? So this is, this will be my increment operator here. Now, after this you can see here I have write let F, which is equal to, here I have write that this is abc. So this is an object where I am stating here. So this is suppose our variable and then here I'm just calling the function. Ok, now for this here I have to write consoled or log file where I have write f dot next value, sorry, f dot next value. Okay? So this is F dot next value. And then here I have to close this. So my next one you hear, next burn your hair will be expected result as 0, then here one, then two. Okay, you can see here. Now here, go to the browser, refresh this. So here you can see that the value here is 0 than false value one then falls, value2 then falls. So here we have three values and index y, this is two values, as you can see here. So this is how you can see that we are going to print our generators here. Hopefully you get that, that what is a generator and how we use, and what is the many footer row benefit of it? If you find any of the problem regarding to this lecture, please let me know and thanks for watching this lecture. 78. ES6 Generators: Hey guys, welcome to this lecture. And in this lecture we are going to talking about the java script generators. The java script generator or the generator functions are one of the lesser known feature of Ekman scripts. It's which is ES6. They can look a bit strange. In this lecture, I will tell you that how you can use it. So now you can see what our generator, generator sits somewhere between I traitors and functions. The way normal functions work is very simple. When you invoke a function, it will return until it completions. It will execute all the code inside it or until it encounters the return statement. I Twitter's work in a similar way. How let us take the example of the for loop and imagine that you have an array with some data or you want to use for loop do I trade or it, when the for loop it start, it will return, it will run the Until, it will run until it stopped by the conditions you specify it. Or it will identify that this is what distinguished between the java script I traitors from the functions and I traitors. Sorry, the java script generators from the functions. And the first difference is that the generator will not execute their code when you involve them. Instead, they will return is PESTLE object, which is called generator. The second difference is that unlike a loop, you will not get all the value at once. When you use Generator installed, you get each value only if you want hit hopes you get that. Know what are the advantages of generator and why we use them. This is an evolutions model which delays the evolution of an expressions until its value is needed. The generator, our memory efficient and it is like identify the repeating area and generating techniques are identifier's. Okay? Now here, you can see that here we are going to run examples on the generator here. So first example here is I just run a regular function example first for you guys. For your better understanding. Here, you can see that I had to write function which is ABC. And then here you can see that I have to write that. Let suppose this is console and console.log here is I have write that this is I. Then here you can see that high ice, right? I, then here I write M funky programmer. Okay? Now here you can see that this is the function name which is ABC. And here you can see that these are some of the values what I just assigned here. And here you can see that I have to write that this is ABC and I was calling this function here. Now here you can see that I just run this into the browser. And you can see here the resulting values, which is Hi, I'm funky programmer. This is a normal functions. What we already studied about. Now here you can see that how we can. Convert a regular functions to the function generator or the generator. Here. You can see that personally I am just writing the static to it, which is Tarik ABC or here you can see that is Tarik generate helps you get that. So as you can see here now, our function name is generate, or if you want to write a, b, c, two, this is up to you. Now here, you can see that I have to write console dot log. Here you can see that I have to write that. This is I have to write this is in walked and walked her eyes, right? This is first time. So I just want to involve this function. And then here you can see that I have to write this in walk second time. Ok? Now here you can see that I have right? Yet as a keyword. Okay, yet as a keyword, OK, first time. And then here you can see that I have right, yelled and yelled to add the second tan. So at Firstly, you have seen that we held right is take first with the function keyword, as you can see here, to making this function as a generator. So it's Tadic gender, aesthetic donates that agenda rate functions or this is now, this is now not an normal function here. Okay? At second statement, you have seen that we have right yet statements vis return a value and pause the execution of the function helps you get that, that how we can use yell statements, okay? Once again, I will explain this yell statements. So as you can see, this yelled, Here is a keyword. It is a bit like return but not returned. Simply debt will return after a functions call and it will not allow you to do anything after returning this statement. Okay, now here you can see that I have to run this code here. And here you can see that our, sorry, yes, okay. Here we have a little bit mistake where we have, you can see that here we have the right ABC, ok. And here I have to write let lead gen, which is equal to here, it's right, generate. So as you can see here, I'm just getting a generator here. And so here I'm just, I just invoke the generator here, pasta, you have seen nothing in the console as you can see here if I just run this. So you can see here, okay. And after this, you can see here, I'm just right. I just tried console, console.log and log here is I just print generator here. Now just refresh. So here you can see that the generator here is suspended, okay, when I just click on that. So you can see here that the status of the generator is suspended. And here you can see that it is a function receiver. And the scopes here are three. So this is one example of what we create on the generator ledgers talking about the more examples on the generator here, where you can see that I have right scape, Sorry, script tag. Where you can see that here I had right function. And the function here is, is tiring. Similar case like our example here IS right, abc. Okay, Now here I write let. Let here is the index on 0. Now here you can see that I have to write while loop. While loop here is the statement. If the statement here is true, means that the 0, so you have to simply write yelled as a keyword. And then here I have the right index and index is plus, plus, which is my increment operator. Okay? So this is, this will be my increment operator here. Now, after this you can see here I have write let F, which is equal to here I have write that this is abc. So this is an object lamps getting here. So this is suppose our variable, and then here I'm just calling the function. Ok, now for this here I have to write consoled or log file where I have write f dot next value, sorry, f dot next value. Okay? So this is F dot next value. And then here I have to close this. So my next one you hear, next burn your hair will be expected result as 0, then here one, then two. Okay, you can see here. Now here, go to the browser, refresh this. So here you can see that the value here is 0 than false value one then falls, value2 then falls. So here we have three values and index y, this is two values, as you can see here. So this is how you can see that we are going to print our generators here. Hopefully you get that, that what is a generator and how we use, and what is the many footer row benefit of it? If you find any of the problem regarding to this lecture, please let me know and thanks for watching this lecture. 79. Generators are ES6 iterable: Hey guys, welcome to this lecture. In this lecture we are going to talking about that generators are icy bone and object is an iterable if it defines nutritions behavior such as what values are looped or in four, construct. Some built-in types such as Eddie or maps how default iterations behavior. While other types such as an objects are not in order to enable an object must implement I traitor mattered. That simplify. That simply means that the object or one of the objects of its prototype chains, chain must have a property with a symbol dot i Turkey. I triple objects is our generalizations of adding. Debt is a concept that allow us to make any object usable or usable in a for, of loop. Okay, of course, at a writable. But there are many other Belton's built-in objects that are eye trouble as hopefully you understand now. Now here you can see there I'm just generating or I'm struggling one of the examples right here and make your concept more clear. So as you can see, script tag. Here, I have write function, function. I just make this function as a generator. So here you can see that I had where I generate and generate here. And now here you can see that I had to write that this is gelled as a keyword, value number one, then here when the number 23. So as you can see, well, you know 23 here. Okay? And here you can see that I start ice, right? That this is return value. Now I have right, let, let here is, you can see that this is generate, which is equal to Harris writer, this is a generated value. So as you can see here, this is a variable here. And now here you can see that I have right for-loop for let value of generate. Okay? Now here you can see that I have to print the alert message on the values. So that will print the value 12, not three. Okay? Now here you can see that I will tell you one other thing right here, that how we use iterations. The java script iterator is an object that's defined a sequence of potentially of return value upon this termination. As you can see here in our last example that we have the values and done the venues means that the next value in the iteration sequence with 012 and then is a true means dense mean. This is a true if the last value in the sequence has already been consumed. If the value is present along side, then it's the I triple E will be return the values here. Okay? Now here you can see there, let's just check the output for this. And here I was running this output. As you can see here, that this output is not executing the result here. Okay? So let's just check now again that what we, what mistake we did here. Here, we did a little mistake there. We want to get this variable here. Okay, now here I am just refreshing this. So you can see here firstly, we get the alert message on the value one and then two. So this is how we can i tradable aij i trouble or the generator. So you can see here for that purpose I am just using the FOR loop here. So hopefully you understand now and if you find any of the problem regarding to this lecture, please let me know and thanks for watching this lecture. 80. Symbol.Iterator Method: Hey guys, welcome to this lecture. And in this lecture we are going to talking about symbol dot iterator method. Symbol dot i traitor is the protocol that's make nato object like Eris set and maps IT double the item table by providing a hope into language features like for loops. And there is spread operator. Here. I'm just running the examples. Do you guys where we are going to check that how we use symbol Lord iterator method. I just use let range. So range here is the function. Okay? So why we use range function? And the range function is a functions that basically take a starting index and ending index that's returned a list of all integers from start to end. Here I strike from the, from mean the value we are going to start. So I stride one. And then here I have right too. So I just write the value ten here. Okay? So instead of range function, you have to also use for loop as well. Okay? Now here you can see that I am just using generator then here using symbol and symbol dot iterator method. Okay? After this here, I'm just using 44 let value, which is equal to here, I say this dot from. And then here you have to see that I have right, that a value and value which is less than or equal to. So this is pretty cure. And here is this dot two. As you can see here, I cite if value this door from is equal to n value which is less than or equal to this dot t2. So simply you had right value plus, plus, okay? And then here you can see that I have blue closest corner. Okay? Now here you can see, so for lead. Now here, after this I have write that this is yelled as the keyword. And yelled here is I'm just yielding the value here. Closest score shows the alert message, where I have to write firstly parenthesis. Then here I have write that this is a bracket sign and here I just print the range here. Okay, is spread keyword. So let us check what is the expected values right here. And I just run this chord. So you can see here my dysfunction is not working legis check the atom now. So we have some kinds of stake here, which is three dots. And this is from, Okay, now I just run this code here. So you can see here that will give me the range of one to ten values here. This symbol dot iterator method. So as you can see that the symbol dot i Twitter is a protocols that make the nato object like Eddie. And that said Edit, sets and map. And this is the i treatable by providing a hope into our language features like for-loop and spirit operator. So here you can see their eyes uses prayed operator. This is the for loop and here this is a range where we define the range one to ten. So you get that then how we can work with symbol Lord, I iterator method. If you find any of the problem regarding this lecture, please let me know and thanks for watching this lecture. 81. ES6 Generator throw: Hey guys, welcome to this lecture. In this lecture we are going to talk about generator throw method. The generator throw method is used to pass an error to the yield. The generator resumes the executions after throw has been carved by throwing an error and returning the object FID properties done n values. As we observe in an example like generator symbol I trade group methods and generators are IT doubles example. So the out, the code we used here passes the value into the generator as the result yet. But it can also, I trade throw an error here as well. Let us see how we can use generator throw matter in the java script. Here I write script tag. And inside this script tag, I have to write that a function. I just made this function as the generator here. And then here I'm just using the exception to throwing an error here. Here I just write let, result and result which is equal to here, I have write that this is yet. Then here I had right, two plus two which is equal to. So this is just a statement right here, which is two plus two, which is equal to o. Again. Now here I am just showing the alert message. And the alert message here is I heard right, that the execution does not reach here because the exception is thrown. Okay? Because we are throwing a separate ink exception here. Okay. You can see it. Now after this, I have to go to the catch statement and the cash statement here is e. And then here I have to catch the exception right here, which is my variable e. Okay? So here that is that this exception, catch exception will show us the error. Okay? Now here you can see that I have to write let. And let here is, you can see that I have right generator which is equal to gen as a function name. And now here you can see that I have right? Let here have right question, which is equal to Harris, right? Generator dot next. Ok. Here you can see that I have right dot next value. Ok. Now here as you can see that this generator where we move to the next value right here. Now here, you can see that I had right generator dot throw matter. So I just used throw matter here which will generate a new error here. And as you can see and hear IS right that the answer is not phone. Let's suppose I decide the answer is not found in my database or in record, is not found in my record. And I have to close this code here. Now here you can see that I have to run this code which is the generator throw method. And you can see that here. I'll just go to the console and you can see here, okay, as you can see here, that VR tone an error here, but this alert message is not showing us the any error. Let us check our code here. Now here we have a little errors which is next, and this is statement and this semicolon, sorry, this parentheses assigned here are, sorry, scholarly record, sign hair are after this headlock. Let us run this code again. And you can see here that will show us the era that this answer is not found in my record here. Ok. So as you can see here that we are showing you an error which is towing like exception in the generator, which is, you can see here in this line, which is lead generator, which is equal to generator. And after this, that will print Annex II iterations here, okay, here as you can see that I am choosing a yell keyword in this example with the help of try and Ted, Because we are throwing an adder here. Ok. Hopefully you understand now. So this is a generator.me in a JavaScript. If you're not understand any of the plant right here, at any point, which is not clear to you, please let me know and thanks for watching this lecture. 82. ES6 Async iterators: Hey guys, welcome to this lecture. And in this lecture we are going to talking about a synchronizations. I traitor age synchronize I traitors allow us to iterate over the data that's come asynchronously on demand, like the instant when we download something chunk by chunk or an Network. And is synchronous, generators make it more convenient. Let's see how we can use a single asynchronized I traitor. In this lecture. Here, you can see that I had to write script tag. And inside this script tag here I'm choosing let, let arrange, and here I'm just setting the range here where the range is starting from, starting from one. And then hear that Phil goes up to ten. Okay? Now here you can see that I have to write symbol and symbol dot here I had to write iterator. Okay? Then here after this, I'm just opening the curly brackets. So this is using four off calls. This method using means a very, This method is using at very beginning. Okay? Now here I will show you that how you can return the iterator object. Let us see here IS write return. Okay? And return here is I just use current value, okay? And the current here is this dot from. Okay? Now here you can see that I have to get this from. And then here I have right last value. And the last value here is this dot two. Okay? Now here, that will also work for off, which is the object, which is asking for the next iteration values. Okay? Now here you can see that I just use next here. So as you can see here, the next is a keyword. And then here you can see that I am just using an if statement. So as you can see here, I'm just calling this next. Okay? So if this dot current value and the current value which is less than or equal to sign. And here inside this dot last value, which mean that firstly that we'll get the current value and then that will get the last value. Now here, I had right, that this is return. And the return here is I have to use dun. Dun here is false. We already studied about them in our generator lecture. And then here after this we write value. So the value here is I have write that this dog current value, okay? And then here I have to use concatenation signs off it, which is plus plus. Now after this, you can see here that I had to write else statement as which is a return value and S, which is the return value. And the return value here is, you can see that this is done and then here is true. Okay? Now here I have to close this core. And then here you can see that I have to close this code here as well. Okay? Sorry. Closest code here, and then I have to close the score here as well. Now, you can see that I have to write for loop. So for let the value of and the value of the rain, which means that the range value, what we define here, okay, we are taking the foreloop. So simply show us the alert message, which is the value. And I have to closest chord here. Now here our code is complete and here the range which is equilibrium. Now here I'm just running this core to you guys. And as you can see here, my for loop is running and shows a value right here. You can see here this is an asynchronous, okay? Which is like our downloading files, which is ordering one-by-one. Okay? Now here you can see that, that this values will go up to the ten, ok, as you can see here, and the loop will end here. So this is asynchronous I traitors and generators right here in this lecture. Hopefully you understand now, if you're not, please let me know and thanks for watching this lecture.