Learn and Master JavaScript Foundations from Beginner to Professional | Rajesh Pillai | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Learn and Master JavaScript Foundations from Beginner to Professional

teacher avatar Rajesh Pillai, Co-Founder at Algorisys Technologies

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

15 Lessons (5h 51m)
    • 1. JS foundations Intro

    • 2. Understanding Strings

    • 3. Understanding call, apply and bind functions

    • 4. Understanding Closures

    • 5. Understanding constructor function

    • 6. Understanding Class

    • 7. Fixing new keyword bug when invoking constructor function

    • 8. How to add instance method

    • 9. Understand how inheritance works

    • 10. Override methods

    • 11. Static methods

    • 12. Todo App: Code a simple Todo App

    • 13. Todo App: Refactor the code and add edit todo feature

    • 14. Todo App: Add pagination feature to the todo list

    • 15. Implement Drag and Drop with JavaScript

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Dear Friends,

Welcome to early access to the JavaScript fundamental course. 

Some of the topics we will cover is listed below  (content will be incrementally added and user feedback will be taken into consideration)

The Core

  • Introduction and basics

  • Objects

  • Functions

  • Arrays

  • Object Oriented Programming using es5/es6

  • Call, Apply and Bind

  • Closure

  • Lexical Scoping

  • Arrow functions

  • Spread Operators

  • REST Parameters

  • Promise

  • var/let/const

  • IIFE


  • DOM Manipulation

  • Better practices

Building Application

  • Building Reusable Libraries/Components

  • Implementing Drag and Drop without using third party library

And more...

Hope you enjoy this course!

What are the requirements?

  • Basics of HTML and CSS
  • Knowledge of any programming language will be helpful but not a prerequisite

What am I going to get from this course?

  • The student will be able to build large scale applications, understand how things works in deep level, and overall master the fundamental principles of programming.
  • Understand closure, call, apply and bind function thoroughly
  • Build your own reusable component
  • Build and refactor a simple CRUD app
  • Implement drag and drop without using any library
  • Build your own pagination control/library

What is the target audience?

  • Beginner programmer who wants to learn and understand how to use JavaScript to build websites and applications

The complete source code is outlined below.

01- Intro

02- Strings

03- Call, Apply and Bind

04- Understanding Closures

05,06,07,08,09,10,11 - Understanding Class

es5 - https://jsbin.com/vasoxez/edit?css,js,output
es6 - https://jsbin.com/hososum/edit?css,js,output

12,13, 14 - Todo App

- https://github.com/rajeshpillai/youtube-js-todo-basic

- https://github.com/rajeshpillai/youtube-js-todo-refactor-crud-2


15 - Drag and Drop

Meet Your Teacher

Teacher Profile Image

Rajesh Pillai

Co-Founder at Algorisys Technologies


Hello, I'm Rajesh.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. JS foundations Intro: total number. The brief history of JavaScript. You can goto the for language. Wikipedia, you, Earl, the new industries kind of a bit of important to understand where the language came from. No, I would not go to the details of this Wikipedia, but the important thing here in new observed that it was what you're asking for dollars somewhere around 1995 and later on, adopted by Microsoft and other major organizations in the world. Now, initially, casket was developed to provide some kind of interactivity to the static HTML pages that was available At that point in time. The world has humano, your, you know, develop great. It started with hypertext markup language, where we had a language known as HTML that we can use various elements to re present textual data on the syrup as a document. At that time, there was no interactivity, kind of every label within on the river and my men and this filter. But the javascript came into play, so it actually kind off came in at the very small language which eventually grew into one of the most prominent language in this new it off programming. That wedding you can use your skid plate from your Web development to your R UT races, right from the server side, programming toe databases and all things possible, right? So as I forces that as we at once for during toe this language development, you will see it was kept getting more and more powerful and it could be one of the main mainstream languages, just a moto, the modern implications. Right now it is still. But then, I hope toe you think she will be on the race over a period of time? Does some of the cool features of the JavaScript a programming languages a supportive underwent architectural? It's kind of functional. SLS imperative intruding, object oriented and put a typist. Now, don't worry about all the stumps, and Terminal Largest will be covering them in detail in subsequent episodes. So the thing to understand it initially javascript waas kind off developed Toby executed on the brothers secretary. The Web browsers Okay, So typically, if you look at any morning up architecture, it's more of a client's over. Kind of like a picture where you go, some piece of court that is executed on the server and some piece, of course, that is executed under claim for the early adoption on your skin was mostly from the claim third development, wherein the court was executed under and you this brother. But over a period of time, Joe Skip has been extended to all other platform, including several were sent other devices as right Right now you think your script, you cannot. Both the claims that court as whether the server side could more on that again in a later episode during the early part of this course curriculum I'll be using their own landed. It is like J has been to demonstrate the fundamental concepts. But as that gamble could, smaller and more complicated, we'll be moving to wear full fledge. Heidi. At this point, I don't want to bring the complexity opened in Haidian to play its understand most of us off this episodes are curriculum will be kind of new to programming, and ah, top priority would be to first understand the principles and the fundamentals and then more to diabetes and integrity is working with it. So let's kickstart decision within collection two variables. What variable, sir, how to use them? And what are some of the important things to know about them. When I opened up the Jay has been You will see a couple off different sections in the united. Your next team injection. You have a serious destruction. You have a job script. You have Ah, consultation as well. Let's let's not patrician. Before this demonstration, I will heard tht molester lettuce yeses, and I'll keep open the JavaScript and, uh, consult section here so that we can trade output. Now, the first thing that we're to understand this 40 So variable. So JavaScript lets you do names to values using variables. So what do I mean by that? For example, this ferret in 123 so all distinct celebrated in javascript. But then I cannot do anything with them. So I that has to be a way to give names to them so that I can access them. This is their variables will come into play. So, for example, here I could say well, agency Quito then know what I'm doing here is I am creating a variable named H that content a value off then no, from memory perspective. What will happen in JavaScript is internal is a specific location will be created for this variable called age, and it will container value off. Then whenever we need to accept this value tent, we can defer it by this variable name. This is a variable name. So one side is we're able created. I can definite. So for example, I could kind off go back in here and I can use a special command called control Dart log and then printer variable. You'll see that the moment they're in this command and I click on this run to execute it, you will see the 10 getting printed onto the console window. Any right to this means we can accept the variable by the name that were assigned to it. So what does this indicate? Family man perspective. So we're able to nothing. But you can imagine it to be a box that has a name in this case it and it has some value. And then we can use this variable name to do whatever we want. In this case, we're printing it to the console. But in case so you are not using Jay's being and using some moderator, this concerned art log can also be seen in duck developer tool So in this case I'm using. The chrome browser can bring up the developer tool by right click click, clicking on the window and clicking on inspect or maybe going to the menu and bringing it back. And within this window I can go to the control tap and in here when you click it, you will see it. Output getting rendered in the console also right? So for simplicity purpose I am using J spent so that I can see the input and the output side by side. No one take to note. Here is no motive. Modern bozo that we are using at this point uses what is called the deck Must Fight and Acma Script 68. That is our standards on which this language has been implemented. If I go to the Wikipedia on DA to the seawater of the script, you'll see that a lot of additions in the correct you're the fourth edition with them. And then you're the fifth tradition, which is the most widely used. And we also the upcoming sex relation Escalada seven tradition. So I'll actually make a point to highlight some teachers as we are going to the Dept. of the jobs cripple drumming and talk about the future session one day. Okay, But from the variables perspective, now we have one more thing in here. So where it has been there since age old, which is supporting us for years. But that's all of the major standard that will come out. We also something called desolate with Let also, I can create a available like this and say no value. Maybe anything. Maybe single. You like this? Okay, you are number value, like district for this off where were to create a variable and that's a letter to create a variable will go into detail the different between where and let But for now, I understand that this other two ways But just to complete this discussion kind of highlight that the variables that is created with where this function scope and the variables that we create with lead is block scope. But we'll talk about function and block school in a letter. Part of the episodes Ah, when actually we have some materials stood deal, are delve into the topic and also worked with some examples for no ism that wherever I can you so I can also use, like to begin with, we'll go into the details of the data type in JavaScript shortly. But I understand. Ah, from this demo perspective, when you create a number or an in teacher or a numeric later tape, we don't put any courts around that value. But if you're creating a string or a text personally, we can put a double court. We can't around the value within the the ball court or the single court. For example. I could also do messages in Quito Hello, grating or something like this. So either a single court order, double court word look, okay, getting a little So did this one more way toe kind off the note, the text or the template with variable that is using the back dick that will shortly demonstrate to you. Okay, so what is the legal way to define Now we're able the important thing to know Terry's ajo stripping and if l a variable can start with the letter and in the school order dollar sign and the subsequent characters can also be did it? I wanted to know Terry is your Oscar, Please. Case institute so on Upper Casey will not be the same Answer Lower Casey. Okay, We can until use most of those characters from the I s O. It did finance our unique or letters also talk about that I guess ascended and unique auditors and subsequent episodes somewhat illegal. Variable himself, for example, I could say Well, se age underscore Today this is a relative name. Okay. Temp underscore 19 and is also a valued name. Dollar credit is also valid. Name and underscore Name is also valid Name okay. And what are they? Invalid name. So I cannot say then name but they were able cannot start Piter number get it is invalid. Okay, let's say some variables in action. So clean up this screening here and create a variable called greeting can. Now, at this point in time, if you look it the variable grating What do you observe? Right. So we have a variable called the clear upto we're doing here. And we have a variable called creating that does not contain anything. Right? So it's empty at this point in time. If I tried to log this value to my console So what will be the output off this if I come back in the RNC Concern. Dark log grating. Get the moment a type in disc amount and click on run. You will see the console outputs undefined that this is because if you look at the way he was greeting it doesn't know what it contains side. It's not yet defined, even though the variable name has been going here. But then, no value has been assigned to the variable to enable you declare a variable. But don't assign value to it. You actually get undefined, Esther Output. So after this, I can assign some value area. Right? Maybe Elsie rating Ethical do Hello Java script the moment they do this. But we happening, Heiress. Okay, so this grating were able be heard here. Right? This will condemn contained the text. Hello, JavaScript. Okay, now, if you try to print this out, you will be presented Builder grating on total consults. I could say controlled outlook creating and the content to execute it. You will see message. Hello. Javascript is big blotter. It don't worry about it on defend to 10 because we haven't cleared the window. So I'll clear the screen and turn again. We'll see. The frustrating is on defied later on greenish laced creating toe. Hello. Your script and the Portland here controlled it. Long is printing the rating onto my control. Okay, So is it only a way to declare and initiates a variable? Definitely not. We can also create a variable like the same message. And in this less immediately Say hello. How are you? So in this case, the declaration and that statement is happening and the same way. And I could log this information should the control. Right. So if I clear the window and click on 10 you will get the Hello. How are you? Message in here. The one thing to note areas elsewhere, This window again. So if I come back in here and say I was right in the command controlled or to log and give it a variable that I'm not created, for example, say in this case I haven't created age rates will give it us age year. Okay. And if I don't diss application will get the matter. You get dearer reference other. This is because of spelling mistake Here. I'll clear out this spelling mistake corrected here and clear the men don't like Condron. So you get the reference at our age is not defined. Okay, but this is the other that you will get when you try to access an identifier or a variable if it is not declared. Okay. So whenever you see the reference other message, please be aware that you are trying to access a variable or unidentified. That is not yet declared. No, let's talk a bit about the data types. Nine. Jaschan, whenever you see double codes within the value that indicates a string variable. Okay, if you don't hear the Belcourt again, for example, if I create a very able called age here without edible court Okay, this indicates numeric variables. So what are the types of variables in JavaScript? So I will clear this out. So basically, we have string tape. We have number tape, we have bullion tape and we have a date type. The thing to understand here is there are a lot not a lot more type that can be created by programming. But they said the fundamental blocked a couple off more bitch will see in here to the strengthen. Variables are enclosed between our double court decisions. String okay. Or it can be a good fit in a single court yet another string. The numeric tips are just numbers you can just gain. There s assis. Get the bullion type is a true or false the date type of the actual day. Tinder. Did he remember every way and some time for mitt? Okay, so you can take that former shortly conducting because it is harder for important types in JavaScript. Let's see how to kind off create variables using this stapes. So the first we'll start with the numeric type. So let's create and were able called H said that contains some value here writes a 15 I could say controlled out to log and print the value into my control. Stay clear the screen and K Conran, you get out POTUS 15 Now this is Anu Malik very polite so we can do some arithmetic operations on this numeric variable sort of the arithmetic operations. You can add two variables we can stopped like one variable from the other. You can multiply two variables or you can divide what variable from the at the variable that they said the common arithmetic operation that also percentage symbol for model ISS, which means the remainder of the division. So how can this be done? Right. So I could actually directly use my control dot lock Command to demonstrate this They can take until not lock h plus then So what will this all put onto the screen? This will take the value of age which is 15 at this point in time and at 10 to it. So it put out this will be 25 again. So if I clear it out and run it here you see, first the age was 15 then you added tend to it and they just know 25. Okay, at this point in time, if I log the age again what little bit of value printed here again So early lead. But 15 you had a 10 to 8. It became 25. And then again, you're printing the is here. You will see it is still 15 3 scientists 15 and not 25 is because in the concern totally lock statement theory added the age, but we have not re ascending. Variable rate variable is still pointing to the age with the value off 15. OK, but if I do it this way it is equal to H plus say 20 and then control dart Log age. At this point in time, what will happen is initially the ages 15. So I knew Loved h He will say 15 ist output connects us saying control not log age plus 15 . So it will be 10%. 10 is 25. I guess I don't if ever will be logged Then you're saying controlled outlaw gauge. So it at this point is 15. It will look 15 again Then we're saying age is equal to H plus 20 So what What Over the last stage was 15. It will have 20 to it so it becomes 35 the new Malu certify will be assigned to the age variable Not be actually modifying the age variable. I feel longer it variable It will print 35 because the value has been money Fight. Could you see that output coming out here? It so this we had actually kind of re ascending the value in again. I can let go somewhere calculation on the eight year. So I cleaned up the editor and returned from commander to initial. The variability is 15. So if I look at the variable box. We have a variable called eight that contains a value off 15. Then we're saying controlled or log Agent Toto, the 15 into two will be 30. Get in. We're seeing each divided by two. So 15 year old better will be 7.5 undressing H plus two rates of 15 plus two will be 17. Okay, then we think age minus two. So 15 minus two will be 13 then guessing 15 percentage. A model is told that minced you mean remain the right. What did the remainder When you d wade the age by door it so if I had aged, which is 15. Okay, If I divided by to the seven to June 14 I get one as the remainder. Right? But this is the one that you get in here. Okay? This model is operator is very useful. We'll see some application off this in the future. Episodes? No, here since we're talking about the number data. Okay. Very in the value of this variable is the number. There are some methods or functions that we can invoke on this number. The for example, that two important functions are to string and our value off. So suppose I create a new variable year called Our Age String became just calling it a staged ring, and I'll say Age talk those things okay and donated longest Oda Green Castle. Once I clear the wind doing click on Run, you will see the age is printed on the controller. Then you'll also see that this is wrap it inaudible coat. But this toasting function is used. Tooken work the value from the number two the strength. This is kind of important in some situations when we do string manipulations and we're we have to convert from one data type to the other data types. Similarly, we also help a function called us value off against it directly without ascending a variable rate, I could say controlled or to log H taught value off again. Let's hit output first to, you know, clear the window and click on run, and you see that to thing is giving you the thing value. The value off is giving you then number value. Now this value of function it returns toe permit you value off the specified object rates for years, especially objective. The age which is a number variable rate. So this is actually giving me a primitive values. So what is a primitive early open numeric villages and the numeric value itself? Right. That is that this 15 is being printer dear. Now, later on, we'll have a more in depth discussion on this rally off function and see how this can be kind off. This is kind of used in certain situations, right? So, no, since we're only talking about simple tapes here ah, output will be exactly seen. But then later on, we can also create over custom types. You think that JavaScript object? Little notation? Okay, that one. And then we'll talk about the value of Fromkin in more depth. You can refer them modular, develop a network for more information on this functions. No, we'll also look at her. One more important function in javascript colder is any and released Nan stand for not a number. Okay, not this function in this kind of really important, because this can help us to award certain tricky situations when we are dealing with numbers and values. What is this? Not a number, right? Sometimes when you do some at Matic Mathematical operations on the number it could accidentally return in called It's Not a Number in case the data type of the values are not correctly given to the operation that we are performing right that it's not a number or Eastern intention. Contento Oh play so hot cocoa under this can This can be used to help clear up the window here And I love coming dissenter thing for no okay and I'll come back in the guarantee considered art log a camping east man Not this East name function is available on the global window Object will talk about the global object later that no tear East Man I, yes is in smaller case and capital a small and in capital again clamping its name for if I click on down here, you get the value through this indicates that the text for this not a number right But if it's what the indication of this this is like a soiled on moting console, not block He's nan say for Casely fake taken cleared and ridiculous e But there is something injector east landed So associate Della script is kids and to this end should be capitalised So I ran it. And it is also the first text for its not a number. And you get the value s true. Okay. And the second for even though defeats that text. Okay, but this is a number, right? That's making is not a numbers returning false toe this specific input in here. Okay, I have this kind of makes it clear it where dysfunctions could be Ah, useful. Okay, let's say one more thing with respect to ah Nanya Foca mode and comment or discord. Let's see some more examples where this East name function can be used. Give it before some theory under his name. So nn on anything, every abbreviation for not a number on it represents an illegal number. Used the East name function to determine whether a number is legal are valued According to that, you see in May 262 specification get This is a C m e r 262 specification. Which details is man function, specification or details? You can google this and you'll get the information. Okay, Now there are very situations where you can get an invalid number It, for example. The number is divided by zero. It would be legal number in JavaScript. OK, similarly, the string Well, you that wish that we just saw a senior. This number four is not a number as well, right? So all the people made her different interpretation of what is and what is in the number. The stream for is not the number to the east and function, whereas festering four new Malik Ford is a number that said This is late edition Something to play. Let's see one more kind off usage of this. So I love just come back to the top of my skin just so that I'm kind of having some empty space to work with you. I could say celebrated new variable called a that contains the value 10 create one more value are variable called people attend. This contains a text called Hello Okay, human real world. The value of this variable is coming from my user right from a browser, right? So for demonstrations and we haven't yet looked into hotel they can put from the user. I'm just using the variables to demonstrate the future here. Let's say I'm kind of creating 1/3 were able called result which is the result off. They wish enough. A divided by B If they logged this value Dessert. What do you think that output will be here, Right? When I logged this tell, you know, off the value you heard a variable 8 10 the king and the value and the beast. Hello. You're trying to divide 10 by a Sprinkle. Hello. Right. If you playground here, you will get door protests and enrichments. Nauta number. So this is kind of an indication that look at the division is kind of not Ah violated. So I could also do some conditions here to avoid this kind of another, they could say so we'll have a detailed look at the conditions and condition states mint in jail escape. But to demonstrate this specific feature, I'll use any statement here something if he's nan a d rated baby. Okay, So consoled art lock the desert e's daughter number. So what I'm doing doing it is and you see in the east and function within an a flock. Now this If block and it'll be true, or it can be false. So if it is true, the result is not a number will be long gone to buy console straight. So a divided by B the result of east and will be true then output that were expected to see under control is it is not a number, right? So when I cleared is simply contrary. You see the output in here This is the way you can. You dysfunction before kind of assigning it into variable. And you need to make some condition to ensure that this operation is valley, right? That's what a statement, Ah, condition logic could be used. But don't worry about this. If statement here will recover in this in more detail. Similarly, if I tried toward put controlled or log say, zero divided by zero, you'll also get out protests Notre number because they want everybody road race kind off, not defined. Before I went up on these nine topic, let me show you one moting what this isn and returns so that the 50 it will be very, very clear kind of thing. Right? So what else do we say? Look, come back in here And creator say variable called or bad IHS dessert. Okay, I'm just calling it. It is alert and they restored or put off East Man a divided baby in this prison. Okay? And then hearing for nothing East and a good Yuta variable is there is a great this additional to give me that same old Padilla. But then if I logged this value console dot log is resolutely did it either true or false. So in this case, they should be true because the division or this doesn't result into a number. So you see, that would put this drew in the late on the right. So in Dave, Condition kind of tells to this court busy kind of exhibiting quarter result is true. Then execute this statement or else I could write it. Result is not true for some reason. K log, it s controlled art log valued number. Right now this l statement will only learn if this a drizzled resulting now false right? So when will this is the result will be fault. It will be false. When you provided a valid number to the operations in here, it so at this point in time, you will see the message the little days, Nauta number it. But then if I give a valued value here flailing, Uh, okay. And I just remove this string here just to make it very clear. So no bs ing result is equal to 80. Ordered by be sort would will be 12. So we're checking whether East man a divided by B definitely it will be false because it is a valued number and he's his health condition will not be true. So it will go to the else part of the court and output will be rather did number printed on toe my control. If you look at the output here, you see the value number getting winter. Okay, so again for no, don't worry about this April statement. We'll be covering this in detail in the subsequent episodes. Okay, No mixes this time. So let's do some small exercises. You think what the where we are learned so far. So I love kind off open a new window here so that I can start it from a clean slate. I'll go to chase been dot com, and I lied everything. Except I'll open up the JavaScript place unless the control men doing here. They set out a window that is are required. I don't need the output window. So that's clear. Stomach assess here. Okay, so suppose we have a variable called 2nd 10 minutes. Okay, So how many seconds are there in minutes? Definitely 60. Look, And let's read one more variable called minutes in N. Oh, how many minutes during an hour? Definitely 60. Okay, so given this to information, how can you compute? How many seconds is dead and then, All right, so take a moment ing through it and then come back into the solution so we can once you are . Ah, talked through it and tried to talk. So let's look at the solution. The solution is to create a new were able called seconds in an hour Virginia thing. But Second Tin, when you see him naming my variable in a very descriptive way so that this kind of it is to understand, multiplied by minutes in and all right, so this will give me second in an hour, and I can use the control daughter log statement, and no, this lock statement can take multiple perimeter circuits. I could start with the string, So seconds in an hour east, okay. And then put a comma opened a second, actually. Variable value seconds. And then Oh, okay. So what this will do? It is still first output. This text calls attention an hour, and then it will output the value of this variable. If I click on run, can you actually get the message or minutes in an hour? So you remember the reference at a rate when they were able is not declared right? In this case, I couldn't misspelled the name minutes in an hour. So, um, I knew dus minutes in. And what? I just copy this variable name here and put it here simply condon, until you get out. Protests second in an hour. This 3600. So there are 3600 seconds and then Oh, no less to the second exercise flamed second Xena, they get So let's create a variable called off enough. They saw this case institute is very important. Okay, if you miss played the cases when you are doing control, oppression totals, anywhere, any other pitching the court, you will get there if instead of exception. So how maney alternately are that left 24 about energy cannot be able to figure out how many second Tina day, Right? So please try it out. We already have the very below us in our day. We also have a variable called less Second in an hour. It that's used this variable and figure out second in now deposit for a moment and come back and create a variable called seconds in the day is nothing but us in a day multiplied by second and then All right, so this will give Mr Continue today. Then I can use console dot Log will give a second text Metical. Seconds in a day is followed. Better variable in second. Enough date. We can't know if I clear this old. And the Condron, you get the output. Second in a day. Is the autistic Children 400. Okay, now, similarly, Azan exercises, try out. Find it in seconds. Okay. This is a exercise for you to try out. You can post a solution in comment. Comment? Okay, so I hope this introductory video gave you some brief. Finally. Let's ah controlled this episode by looking at the implementing and documenting operators that can be applied on this numbers. Okay, so I look clear out my window, Ennio, and let's see how enter things were called. So just to start again and Peter Variable called H and a same some value to it. Okay, not a couple off operators. Right? So the operators are electorally kind of put into my little in common for your weapons. So anything that you put within this slash and Estrich Okay, this is a comment. Okay, I'll put putting up instead. Operatives, severe plus plus, we ever my nest maintenance. And we have a place equal to and we have a minus equal toe. Okay. We can also use our division and multiplication separator. Indelicate. Let me demonstrate how this can be used in the variations off this. No, If you look at the initial value, they just 21. Right? So I'll come back in the UNC controlled or log. Aah! Bliss Bliss! Guess what? We without put off this operation. Right? So when I click on turned, you'll see that protest 21 my 21. Typically, when you when I say h plus Plus, it should have been ages equal to age. Plus wondered. But then thesis smart is not being reflected. The right beware of this is because for h plus predecessor posting payment operator, that means first value of the age will be used and then it will be implemented. Okay. This essential investment, the control dot log happened. The value of days was 21. So it out put it the 21 year and then it implemented. That essentially means if a do a console dart log here again, you will see the value getting change to 22. We'll go see the value getting changed to 22. Okay, so this is important to understand. Okay, this is a posting agreement. Operator defend directly using this patina function. OK, but then if I used this way within a variable, it will not be the same. Beware it. For example, if I commend it out here, okay? And automatically say age plus plus. And then if I try to control dot law eight, you will see the value is 22. You'll see the value is 22. Because in there is no odor function year, this operation is escort is doing. It is equal to H plus one. Okay. And that would put at the letter point in time. Definitely will be because they just been updated. The new radio days will be reflected here. Just make a note of this. Let's see. How did the first from the pre agreement Operator. OK, so this is a post increments. So I commented the entire code here. So the only old age is 21 Now, I could come back in here again. Consoled out log, You know, I'll say plus plus age. Okay. Nothing is a slight difference here. The here. We're calling it as h plus plus. And here we're calling it plus passage knife around this application here. No, here the output will be 22 because passport indicates first increments the value of the variable, and then you sit it without party. Right? So this age prospects meant first used the variable and then inclement here. And this means first the inclement and then use right. So the value date is 21 this plus plus H will result in the value. Ggot, where you been changed to 22 under control. Log happens. You'll see the value off 22. Being out. Put it here. Okay. Gets him. Really? You can use other apparatus. I'll reset the age to say 24. No. So I'll second sold or log age minus minus So what really thought Portrait? They should be clear. Nor it it's 20 because this is a post disagreement operator. This is a post agreement. The first include the value of the age and then discriminated. But after this point in time, if I loved the value of age, it will be 19. This will be 19 and this will be 20 it. So if I click unclear and Randy Command, you see, this is 19 commando done Wanted Korea. Just just see these two values in action. Right? So this is post detriment, I guess. Similarly, we have predicaments I could say controlled out log my next message that this means first decree, mandate and then used evaluate. So if I commend this and getting out for no okay, because I don't want to create noise in mount put case of the age values 20 year then we're saying consoled out. Lock my nastiness. A dismiss first Dick Clement value and then used this age in the control tort law. Great. So this 20 will become 20 minus one, which is 19. That output will be 19 India. Good. This is older post increment and pre equipment operators were cooking this predicament study be the agreement similar. You can also use a multiplication, right? I'm not sure the operative, but I'll just take the multiplication here. But in a different sense. Remember, I'll show you one more variations on this, so I could also do console dot log A plus equal to us are the age plus equal to one. Could this implement a just equal to H plus one? I guess we'll comment out this control dot log here. Now the ages 20 Getty condition You'll see the ages 21 because this is not the post England . This is simply a just equal to H plus one. Similarly, can also use control, not lodge a shortcut. Connecting age classical. Due to this means age is equipped to age. Let's do Okay, So at this point, age was 21 right? So it will become 23 And your friend output. When did it? You can also use it with a minus separator. So control dot log H minus sick weirdo. Sit then. Okay. So I can put the space here? I may not. It depends on your style. Choice. So what are the last value of the age rate. So the last value of data was 23 or 23 minus 10 is starting the similar. Lopata, you gonna tell you Sunday? Multiplication. So control or log age into equal to toe. Get this implement areas equal. Do agent to toe a knife, a run This application, you will sit out, put this 26 8 but at the last value was 13 and 13 into two is 26. So I hope this clears up the being agreement and post increment and pretty crimen Temple Detriment operator and also the into equal to minus equal to pass equal to operator that venues on this number data types. But thank you very much for this episode. And please do some practices with example that we have seen and keep on improving Europe or running. As for less, JavaScript skills became the second next resorts to electoral take it further and look into other data types like strings dates, brilliant and maybe objects as well. So until then, have a nice day programming 2. Understanding Strings: Hello. This is tragic. Believe with yet another represent on JavaScript foundations. In this episode, we will have a look at the strengths and text values in JavaScript and how to deal with them. I'll open up a new Js bean and ah, let's get according with strings in javascript Noel hide html pain. It also had a siesta. Spain, I'll keep the consulting open and also the output being in Iraq. Let's get started. This now looking it string, I can create available year and maybe I can call it a some long string again. They love puts, um, last spring in it. So maybe a little politics. Hello. Jealous. Okay, now the thing with JavaScript is when you create a string it has to rap with, you know, the ball court Get this kind of one way to create a string and a way to create a string is , for example, a short string. Okay. Hello, world. Okay, you can also have the thing within that single court. So either double coat or single court will our work table. You cannot miss and match the courts here, for example. They cannot say some string Quito. Hello. And maybe I'll end up with a double core tricked. This is invalid. So the opening and closing plus urban core shirt Ah, match. This is the fundamental drawstring. Now, when? If you're using your six or higher rate can also use the let keyword to define this thing, they may be naming Quito radish. Okay, let age equal toe State 30 Maybe I think night This is a new medic feel the ages and nomadic field. And the name is a strength. Really funny for some reason, it if I want that age to be a number feel right. I could just drive within an appeal Court order single Kutesa it is it the way you create strengths in JavaScript? We can also use so certain Unicode characters and ah dealing agree. Or maybe in the er maybe Porter gets get if I go to the Mozilla Network right? I cannot took the adjusting using variety of unique would characters, right? So they let some strange thing I think will do. Okay, I can put dusting in here. Britton double coat thing is the string should coveting never could. Okay, are maybe within the single good. So if I create things like this. Think maybe I could output this? Things I could say Control dog, Look, some strange string like See if I could put this thing in the air. You can tell that finger things that the spelling is to be correcting. Right? Soto? A word spelling mystical. Just copy this variable for me around. Put it here. Nuclear deal window going down again and you get the output here. This is the way to create strings so toe really create. Long thinks that's kind of very difficult to put them test ring in northern land. That's where we can use some escape sequences and, ah, kind off make work. Working with things much easier, right? It does think it's much larger kind of thing. Let's have a look at how to create ah long strings in different ways. Okay, so let's take this long thing and let's see our Internet way to kind of represent this. So that began now easily kind of following. So tell doing here I'll create us. A new variable may be mixed. Spring is just quite as mixing, and I'll start with the book would, and I'll take the first part off the string grit and I cut it from you. Maybe I'll copy it from here and put it with inaudible. Good. Okay. And then I put a plus sign. So placements concatenation every time. Khan. Captain ating The spinster weather can go to a new line, maybe. And just to have a sane formatting. I just kind of a line it correctly seconding excelled in copy the next part of this ring and kind of put it within double courts in here. Okay? And then again, put up a blustering here so that I can do for the concatenation that would take out some more strings from here, okay. And completely. And there centred to see it. And then finally I'll this has to be in the bull court again, OK? And finally Laputta, Semi Colon. Yes, it is Kind off. One more way to create a A long thing. Let me check where the terrorists coming over near. Okay, so if I kind off read the right syntax error invalid or unexpected, our token selects quickly, kindof verified this. So I have a mix ching here started our double cords and credible coat. Okay, here we're missing under Bill Cody writes I'll put double court here. You know, we have the spring coming up correctly. Now. I could do an alert here if if I wanted to do it so that I can t dusting in the I just remove this alert for that. I don't want to kind off get a lot every time and I make changes to the text. This is 1 May toe deducting using string concatenation. I feel as though the plus operator right here it is kind of all ordered. So if I'm using the plant's operator with a text field, it will. Can Katyn eight contentment just join the strings together? If you do bless operative with a numeric variable city will do. In addition, that's the one more way to define the media boehlje along finger it so I'll let and a dusting is equal to you. The same thing if I could use, uh, this double codes. Okay. And I copied this entire thing, but I lot copied the closing double court. Okay, But then I could say I need to continue this right. I can indicate the continuation by giving a backslash get her back. Fleischmann's I'm actually condoning with this ring I get. Then I'll go to the new lane and, uh, copy the second part of this thing again. I'll not copy that. The ball courts here, the only new double courts one. Once again, I need to indicate that we're continuing. This will put a backslash again. And finally a Kopita that started things here. Okay. And I'll copy that. Closing Courteney in in the very few absorbed. Right. So we have a string starting with a double court, because this is a string, and then we don't have immediate Ah, double court closing in red. We have a backslash indicating that this thing we're containing on a separate line, then in a separate land, we don't have to put the world court again because this is continuation. Okay? And at the end of the text housing here, we again put edible court to close this string. This is getting under way to create a string. Okay, but it's one more way. Okay, In case you are you thinking you're six, we can use the template little committee starting with the back dick. Okay, so let's see how to use this back. Take select. Maybe I can use where all that just feel free to exchange rattle, Let at this point in time. So maybe just to keep consistent tell us where for No. Okay, yet another string is equal to I'll take the same text. Okay, I'll, uh, copy this text now. But instead of putting our double coats or the single Kotal put up tactic, you can put the text year, you know, without doing anything I have ah, opening back take here and I ever closing back to correct. But then I could simply kind of goto then doctor texts and go to a new line. OK, I still have the back ticket. Right? Then I copied the next thing yet I don't want this back. Ah, backslash and just copy the thing. You copy the rest of the part of the string year again and just go to a new lane and put the next to you. You know, this template Little allows me to create my still instance directly. There's no need to give any special backslash or I don't need to conduct con captain interesting Garrett Aiken directly use at the back ticket who work with the application. So at this point, in time if I tried to do a controlled or log yet another string. Hopefully I look at the correct output again. Okay, I get the correct output. So in all the future, the most we will kind of when we are working with large strings. Well, prefer to use the template little back Pick our notation to below. What? String guitar? Various additional benefit to using this back straight back. Take a look. You will see a clean subsequent episodes where and we will kind of replace variable stana McCleave. It takes part off string. No. One of common requirement is to find out the length of the thing. No one thing up there here. Whenever we're using the back, take care. You get this cruelly, Lane said this indicates a matter, right? But ignored it for the moment. This is just a deer's when it's not ableto highlighted correctly. Paralytic notice. So Schooley land for the moment. So it's sort of the common operation that is needed, right? Maybe I need to find the length of the string Lee. So the idea fair for me, it's actually so if I have this thing here, you can add this finger It will clear the window. You know I could on the string object I could call the length property. This will give me the length of this meaning which is 1 42 there 1 42 characters in this finger. It can quickly relief a with a small drink. Welcome back in here and take control dot lot. Say Hillary. So they should go. Me if I can take this. OK, but then we face a hello dot length directly I get out. Put us five. OK, so this is a screen, right? We can call the length mentor directly under variable or directly under string as you please make a note. Audacious. This will be required in future exercises. SP do it. Let's see some operations on the string. Right? So I'll just comment it out. I refuse. Console for narrative s a controlled Dr Log. Uh, thing a blustering Be Get out, Put maybe a b because, as I said, right, the plus operator is kind off overloaded. Let me check wide output This not coming up, Deborah Proxies Not a function of the console door to log. Sorry, I just got a tweet. Open run it again. So you don't put a bullet but this egg concoction ated with the B. But this is how this spring is created in this mix string variable that you had direct. We use the con coordinated operation. Technically, I could also use objection. Your let's try it out. Okay. See what I get when I supply to suppress this thing. It's giving me not a number. It just be a bit of we already a family with Notre number. Thing like this is there that we get in here in case in your application. You're trying to subtract testing. You make it, not a number. Okay, let's see what the weekend multiply string. Okay, Fate I don't It again. You get Nauta number. The only valid operation that can happen in this thing is a plus. Not thing to note areas. I can actually kind of use double Courteney year. And would be I can use a single court required. Okay. Do not give me out. Because of what? Our independence string Still give me a B. Esther Output gave it for consistently purpose. Either use single good argues double court. Okay, let's say one more thing here with string So far? No, I just commend out this control dot log can create a variable. Records say h a maybe name. And I'll put the name and say Rocky Okay, on D C. I have a variable called maybe. Okay, I'll call. It s a first name, maybe a first name rocking and l a variable called last name, Which may be hey, par get Okay, polite. And I'm just bringing up some names Indirect so I can get a new variable called Say full name, which is nothing but first name bless last name. You know, I just kind off disabled. This locks here so that I get simply a window. No, I have a label called First name in here. We have a typical last name and I have a really big called full name. That is a concatenation off first name plus last night so I could come back in here and, uh, long this fully get that put. I get the in your ears. Iraqi bar. Right? You notice. Occupied. What if I need a space between Rocky and Paul? Give me with a couple of options, but I could actually put the space right after the white. Here, get this electoral agreement or keep on. This is one way to do it. Okay, Maybe I could, uh, come back in here and remove the space. And just before the pl give us this, you still get rocky path. This is other way to do it. Okay? When my mom one more way to do this, I could remove the space from here. I still get up for people. So one word. And then right after the concatenation here, I could put a double coat. And what the space here followed Buyer plus and then can coordinate with last name again. Get the full again. Give me rocky body again. The first name followed by a space and then followed for you last name. Good. This is the way we can do string concatenation. Okay, now let's do some work. String concatenation. Know what you need? Toe output theories. I need to put the text. The full name is from people, right? So how can I do that? So maybe I can come back in here and say let's create a variable called sentence And here rail writing us. The full name is bliss fully get the neck and take insulin. Not long for Lee. Okay, Fate latest running out and look at the output. Not full name. Sorry. I need to use control dot Log in. Put in the very devil s sentence here. Good God put The full name is strong people I get to This is a string concatenation that I can do. Let's see how we can optimize this thing with her template. Literally. So maybe I'll come back in here and come in this and keep it. Keep it like this. Okay, let's come back here and there. Sentence little Maybe I just call your sentence literal. Gail started a back kick back and I'll and the text triggering. So whatever we will put maybe between the back take here I cannot The benefit of this back ticket this second set the full name is you know there is no need to do any string concatenation. What? I can do it if I need to substitute this variables value right here, right? I can put a dollar same than a curly open. And then it got really close. And within this took early I can put the variable for anemia. Okay, lets it out. Put first fit. Output is the full name. Ah, it's rocket. It is coming from this first look a lot. So I would put the second love year until dart lock sentence. Little keyboard dot Put are exactly the same. You know what is happening here? Right? So here we have a text that is starting with the back take and then ending with the back take. And we think this whenever we had to substitute of any variables, right? Very was main thing that changes. Okay, that can because $10 right things, that doesn't change. But then it's not a hard coded value. At this point in time, we can you the dollar sign forward particularly open and the curly clothes and then use the dollar strains value there, which is a variables value year. And this figured substituted when this thing is evaluated. Okay, So whenever we had to do some string concatenation and they were using more than roses, Or maybe we're using term plans pilots like Babel typescript. We called those things in future videos. Okay, we can use this template little string notation, and it will kind of eases right? Because we don't have to do anymore thing. Concatenation treat this good kind off for help us towards certain creepy books in future. Now, before seeing some string operation, let's also have a look at one more way to define Texas. So what if I assume you have to create a variable that contains text or the string? But then you also heard toe kind of maybe include a single court within the text, right? So I'll just show you an example Here. Suppose I have a texture exaggerating, and I need to output. Hello, Se Rajesh. Maybe can. Then I'll second floor door lock greeting. It's like a genetics. Hello, Rajesh. I want this a lot on this. I just have been single called. I could actually come back in here and put this largish between a single quarter like this could actually work yes or no effect. Leah The window and click on run a game you get. Hello, Rajesh. In there are dishes in single court. Okay, now what if you need to put this allegation say double coat. OK, so they were there for a minute. It's maybe I could come back in here again. I'll just copy this text here, come back in again and let's get a very bill call grating to. And I'll start with a single court, maybe close it with a single court. And then I'll grab the text. Rajesh. But in another court, this is another way to oh, kind off put dusting within their number. Good. Okay, so I'll wrap it in double court and then inside that I can use a single Cortes de limiter for that specific text. Okay, I could a little kind offer you some escape sequences and then do the rapping at selected just for demonstration. I'll show it to you in case you and conduct scenario. So just to complete this, I'll just put controlled out log greeting to work it out. Put it still. Bloor dish and the text largish will be in double court like this is just a back back sledge indicating because an escape sequence what if I don't need to use in Belcourt double cartoons? They only need to use maybe double courts and then get this requirement as select. Maybe I can do this. Meeting three is equal to Chelsea. Hello, Rajesh. But then, no. Any to wrap this Rajesh Dependable, could I? If I directly used double court here like this, This will give me kind of better, I guess So. For example, if I come back here and deadly contra and you get the rest in Texas are next opportunity for it because it's double court and do the world court get closed out. And this actually creators and tactical error. You know, what I can say is I can tell the doorstep interpreter that this double gold it's a special right, like an actual indicate this is a special thing by putting it now back flesh. Similarly, this second double court again, it's a special because this in this to work related the right so I could take ticketed backs. Life like this. Can I tell what kind of it? I could come back in here and say, Controlled out Lock greeting three output will still be seem okay, so this backslash can be used to escape. The correct assessor could just make a note August and guess you may encounter certain strings, but like this, right? But then, if I willing with the modern brother, you think compliance pilots will talk about trans pilots later on, I'll kind of prefer to use the template little notation I'm able prepared to use this kind of approach. No, let's say some common sting operations, which is kind off useful in day to day programming life. No, I'll keep different open and start up a new Js mania so that we have a clean slate to start with. I just find that don't need that stimulus. All I did HTML pain. I don't need us here. Successful. I'm open the consultant direct. So you only need to control for no. Yeah, I heard it like this. So now let's see. What other from other common string operating The first thing you say finding a string enough string. Like if, for example, I have a string called My name is Rajesh. I could say I need to see whether the text Rajesh is present in the variable s Tyga. Okay, so let's find this Actually the for finding this thing. We can use a method called index off the index office emitted treatments. The index of the first occurance offer justified text Enough King Get so the index self mentored attend the first occurrence rate for example for the first occurance off the Veria off the string Rajesh within this variable rate. So if you look at so the index start from Director dear 01 23456789 10 11 Rate attend Levin position that takes charge of his person. Right, So let's clarify this. I could save our position Difficult to fingered index off. See Rajesh again, then there to log this until dart lock position life a clear descend Ducky Condra and I get this in tax Other here. Let's check this. Why? We're getting this in Texas area canceled Art log Casey, I got the position s 11 this Minister text Rogers is starting at position 11 year they say so you can use ah district that index acclamation to check whether and string is presenting now. And the stream getting this kind already. Oh, yes. Okay. So what if this king is not presented? For example, if I try to such say where position to ethical to string dot index off, say a j a J person within Detest AEA Last year contained, available. My name is Rajesh. So you will get Let's see what do you get actually, in the control dot lock. Let's lock the position to variable. Can also give it a text es so that we can know which were able belonged to which tag kind of thing. And I would put us post too. Okay, so when the string is not born, you actually get minus one at a result. Okay, So if they're using the index off function and you get the result as negative one, that means the specific string is not percent within dusting that you're searching for it. It's a very handy function. You can actually use it for various operations, right? Maybe they could use conditions later on. Like if pause to is greater than says greater than or equal to zero it. So this means this is percent phoned. Still talk about this condition later on. Okay, so you're not getting that text phone? Yeah, right. Because this position to Ajay snot Delic, but I dishes directly if I make it push to Okay, this is saying you can't don't put this foreign. Direct goddess position is a valid position here. And this poster is negative. So that myth it was never defined. The text a J with industry est ear with content My name is Rajesh. So you stay index off our mattered to find the first occurance off the special air text within a string. No, let's continue with the service. Frig mattered because the index off we already know it. So maybe remotest if condition not like what will be covering the fenders statement later. Kind of things. Let's have a look at tell method called less lost index. So it looks exactly like the first index. So but the last index or will search from the end of the string. So what do you mean by last? Index off. Let's say we have a variable year called look kind of comment or this control tort law. For that, we have some clear window. Okay, so let's say we have a variable. Your called us is a message that contains hello this year. Roger here. Modish. Just reached. Okay, so I have a texture called about. This is I guess you're right May feel observed, right? You're I just had to position here. So if I kind off, I say, let's try to find this tradition again in this text, So I create a very book called Find Radish and I'll say message, start index off. Sarah. Dish. This index off will give me the first position. You could say thank you for this. So console and try to print it out. Executive converted are too long. Okay, so the index off is giving me the value. 50 indictments. This first rental value started the position 15. But I also want more largest year. I want if, in certain situation you want to find from the end of the string lead that you want to find the next, really share it. This is the reckon use index Off will create one more variable called Find Raj ish from the last and Elsie message not last index off again. No, I'll try to look until dot Log They have planed radish from last night. If you look at the position here, you get the position s 29 okay, because now this Roger starts from the position 29. Okay, so it start injected. Zero the next is 123 So this ali said position 29 this Ari said position 15. Okay, So the index of mental, such from the beginning of the string on the last index Topple site from the end of the string because to make up make it a point, because this two functions are very handy when you work with Tele stripped string. No, let's have a look at the slice. Mentored the slice, minted extracts apart off a string and returns to extracted part in a new string. Again, the slice matter takes in two perimeters the starting position and the ending position. I can Let's have a look at the slice. Mature, No, create a variable to maybe say fruit. Get that contain some fruit. Maybe say apple. But I know. Hey, orange. I see Mellon gets a disorder. Put it in my variable called fruits lets you slice metadata. Okay, we'll do the slice matter. It takes two parameters The starting index and the ending index. I guess they get a could see say, where visit is equal to foods. Dark slave ability. What happens if I say slice it from some starting location? Let's see what happens if I don't give the ending, Look it any other way. So you gonna be a saying? Okay, take the first variable and cut it from the seventh position. Okay, I'll actually kind off committed other controlled oclock to avoid the nice. So I log it out. Controlled art log wizard. Absurd output. What? What you're getting You're getting banana or range and melon, right? You're not getting apple right? Because they say, take the food cerebral and slice it from seven. So what? The position? Seventh. Right. So zero is a then oneness, be 12345 This basis six and the bee starts from seven. To this is that extraction happens. So the slice What? It does it it takes a start index. And if you don't give an ending decade will and extract and dieting again, this is actually available in the new variable. Eerie. The sliced mentored gives a new or put back which you can ascend to a variable again And then we can print it here again. Just take one more revision of a slice here. Something extracted from the seven position, but extract up to say the ending And exhibitors said Good. Let's see what will happen now. Here. Okay, lets see this extract from 7 to 13 right? So I get the output. This banana. If you look at this the seventies banana. 8789 10 11 12 and 13 You get Don't put banana. It is extracting upto the 13. Position it if they say lectured on Tuesday 15 position. You get even the comb. Isolate the space because it has extract up to, say 19 position. You get half of the text of inch slices slicing the text funder starting and the ending index. Other position that this is a very handy function. And please note that the slice from unit enter new string, which you can stroll into a variable here. Now, one more thing to notice they injected your specific here can also be to get you They feel given a getting windows, it will start counting from the end of the string. So negative index ground from end off during the for example. See, I have this Ah, variable year again and just kinda copy descent test off and paste it here. I'll kind of comment about this controlled or log. Maybe I'll say this is nothing but my for Terry two for no look. And, uh, here, I'll see. I started from sending a beautiful get some negative elements started from the pole position from the end of the string. If I don't give anything Everything from the end of the string, right? If I click on when you get the the half of the orange. Okay. And the Mentalist actually counting from the backs of zero. 123456789 10 11 12. Ready for sailing a do 13. You get door in just one. You could say negative 13 and then extract six. Getting this funding? Yes, we get the output. That orange followed by a comma. If I feel fine, you get orange. WalMart pay for dinner, followed by a commander space. Hey, faggot assistant. Get on. Enjoyed. So from 13 the 10th position you're getting it there. So 13 12 and twenties a rate negative means from the back from the people. So the text keep a note of this and do some practice on the slice with a positive barometer as solicitor. Negative barometer. Just remember that giving a negative index minute will start counting from the back off the string cancer. He was commenting kind of thing. The eight minute start from the position that video. 13 Gonna get you, Then again. So what is negative? 13 to get it or tennis? See? Start. Formulate. Oh, okay. And negative oil will be, huh? *** too. Then will be. 11 will be okay. Okay. And it except upto a At this point in time, 1st 11 it will give me a lot. Okay. Okay. I wanting to know Terry, if the answering 19 3 the last thing is not included. You get one. Minolta last one. Okay, that's where you get it. Actually, excluding the last one. Just keep in. No doubt that. Okay? Just to in for this again, I'll come back to Madame. Oh, here. And I take this floats to hear, actually should have taken foods two year, But that's fine, but I hope you got the conception year, and they'll say, start extracting from saves. 01234567 thing as they start expecting from seventh. Okay, So you get from banana, right? And then things I haven't specified the end is extracting the entire thing upto the end, which is melon while to start extracting from 70 up to five. I concept to fight appearance e 789 10 11 Sexual beautiful. So from 7 to 12 position, I cannot see you're not getting a 12 value read that cult values a This is excluded. You actually get up to end. So seventies be eighties a 90th and Dennis A 11 is and you're getting up to 11. Rightly stole minus one You're getting if I need the AOL. So I had to give this a starting look into the last index is not included it someone less tender last index. I hope this clearance of the slice Mataric, please to some practice here. You can go to the developer dot Mozilla our talk and do some more additional practice on the string operations the next month Or that little heart Take a look at it. The sub string matter. Right? So it just kind of note Adonia sub string mentored. No, this method is exactly like your slave method. Okay, except the second perimeter theories Len Doctor extracted part. I guess that's the second Panamint er toe those up segment that is the length of the extracted parts and a second animated A slice meant that is the position, right? Let's see the difference between the two now. So say, for example, I have the string erectile The kind of comment this out. So we only need one foot variable? No, just delete different I part. Okay, I'll come in this out here. So we have a foods variable yell again, right? I'll just kind off keep it here for reference. Okay, so we have a Variable Corp foods that convinced apple or injured Mylan drinks. Let's see how to you the sub string you felt the one result is equal to fruits, not sub string. Start from seventh and I Celent history. No, this means get from Joe. Seventh position, three characters. Okay, this is what the meaning of this is. They will go to the seven position here. Just kind of put the logger consult our love You clearly don't click on and you see you get Don't put us be and writers have in position is be so from b unit three characters, right? So you get be you get a and you get And this is what's up saying it's all about it, actually that lent off the expected text like and if you're using the slice the second Pelham, Italy the position off expected text. So suppose if I need to extract, say, from the seven positions. If I characters, I can see I can give it us fight. This will give you be any and Ohio. I hope this is kind of clear The different pretence of Stringer the placement Third, just do some practice on this. So he filled, you know, get doing nexus to the substantive. It will start kind off searching it from the end of the string. So I said it is exactly like the slice meant that accept the way the second parameter RB years this one more kind off similar matured in Java script known s sub string. Right? But again, it's actually S t r a N j. Okay, now this this too is kind of confusing. That's a substantive and suffering right now. Here it leads again, similar to slice, but it does not except negative In Texas, this is the only difference. Could just make a note off this off. Substance and substance can accept negative in Texas, but something cannot accept to get you in Texas was depending on the use cases. You made a U sub stink a substance are. You may use substance both the same almost except one except the negative in Texas, there's a condition accepted negative in Texas to do some homework. Here, do some assignment on this. Give it boot positive as the less negative in Texas. Now let's see how to do spring replacement McHale. Scare of the screen, you know and kind of create a variable year. Say maybe against foods and that contingency Apple, orange, the melon. Let's see how to replace nine year. It's like and say, Let's create a new variable your say, ah, position and ah, we'll see Fruits dart, replace, Get the first thing is the string to replace it. It's every place orange wit see by an input. So let's see what out Put out this second, sold our love fruits and also love the position. As case I clear this sort simply Condra Nia. So if you look at this, the initial values apple, orange and melon, then we're saying our food's start replace. We're replacing the text orange with the world pineapple, and you get output as apple, an ambulance melon. Nothing to know Terry's this Texas case, since it your it so you have this ordinance, USA uppercase. You actually will find the same would put here because it's not replacing it's case sensitive search in case you want to make it get insensitive later on. Maybe in future. But we will have a look at how to use a regular expression to make this kind of thing work . Let's do some clarification, Engineer only Lord, the 40 orginal fruits if a kind off again make this is smaller. Case and click. Condron, you get Apple off. Indian militant original fruits. We are kind of longing, right, because what happens is that the place will give you a new string here. Okay? Actually, name it correctly and quite as new foods. Okay? And I felt I had to love the new foods. Here. You get the new old put here. Give it is actually kind of containing pineapple. Okay, but the foods it's still containing apple, orange and melon. The new food. There's no containing happen pineapple and melon. Okay, so they place will return a new value. It it's kind of not mutating it mutated means are changing the existing value. Okay, It's not changing. The existing value is returning your new value. Okay, We'll talk about mutation, variable notation and future of sorts. No, let's see how to transform the text from a buckets to lower case isn't always Elissa. So it didn't We have this variable called foods here. Right? So maybe I just really descend acting on oil saying Well, say a perf fruit physical to NLC food start to a case. So again, this to upper case will it in the new value? Right, Let's see. What is this value else? A concern. Dart log upper fruit. Just correct the spelling of the foods in here. And I know if I clear the Salton Sea Conran, you will get spelling Mistake is still there, right? So it kind of corrected out here. No, see you all the text has been converted into a pocket state. 3. Understanding call, apply and bind functions: Hello. This is traditionally with yet, and rep is on dollar scrip in this city's will go through some other details of the most common interview question that is usually us pain. Most of the major companies our goal is to not only understand the questions from in every point off you, but to really see how it works so that you can apply this in your little recording. In this episode, we'll be discussing about call apply in mind. So let's begin. Since this example so small we will be using the Js spin to demonstrate the court. So far, it's Let's go toe touched a melting in England. So in here we have ah temple with label off company. It doesn't input type. It has an idea of company and name of company, and it has a Burton which displays a text get caught every three seconds, and when we click on the button, I matured, called French court will be invoked. We'll have a look at the JavaScript shortly, right? So that would put off the testy Melis. Ah, kind off despair on this right side. So what? We don't let you ah, with the spirit of the Oscar that maybe that thing is, whenever we click on the get quote every three seconds, Burton. So whatever you type in your right, So in this case, apple and maybe Microsoft and IBM. But, ah, it's your displayed a court every three seconds. Does the idea behind this small like the size and, ah, we'll see the issue first, and then we will see how the bind and maybe the lexical scoping addresses this issue. Let's know, understand that javascript part of this. So I had to such terrible pain. I'll open on the JavaScript else open upto console so that we can see the locks of locks, if any. So in this JavaScript, we have a global variable title which has a value of thing. Though we have a constructive engineer called store Court Cabbage takes a company as a parameter gets remember the company near it. Currently, we support three companies Apple, IBM and Microsoft. This is a very rudimentary example kind of thing in here. This also is a title which is said, Ah, the full value of the company that you purse and couple of properties in here the most important when he read the courts object little that contains straight company information along with the place. Now, the stock court is a concept of from generate. That means the plane are the usual duplication. Can you dis application by invoking this Are creating the sense of this look good by using the new keyword, Then we also have a get court matter on the prototype of the stop court. Right. So here we will log out this data so we'll expect a title, Toby, the title that we person Toby printed in there I don't know if I go back to that temple again, you will see that on the button we have a cake and learn. And whenever the click happened, we called him a turd called French Court. Right, that that's called you displayed here. This is the first court implementation. So what does such a fetch court door it So the fed score toe get access to the or dorm element company, which is this and takes the value. It creates a new restaurant of soft stock court process companies, the perimeter, and so this will give a saint center this top court object. Then for every three seconds we have a certain double wherein we call the get court mentored under court object. So we expect that when we call this mattered, this information is correctly printed every three second. Yes, I hope this small application Two years of what? We're trying to get you in direct. So this get could we be executed every three seconds because of the setting of us? Let's not run this application and said output. So we're expecting this information, right? The title and the complaining to In this case, the complete name is Apple. I will prevent it onto the control when I click on Get court. So after three second, the court got get, coach would fire and then we see the other getting log on to the controller. So let's suppose for a moment and take a look at why this area is coming up in here. So if you look at the law gear title, right, so it's actually printing as window. What we're expecting, where that I told, should rip into this apple, right, because we are setting that. I tell toe the company name that we are passing, but other than that, it actually printing it, printing the value from this global variable title. But this indicates that whenever this get court Waas called, the context was not the court object, but for some reason the context became the global window object. After that, you get all kinds of errors in there it because I know this properties will be accessible, right? Because there is no company name property under open door objected because Esposito turtle eyes kind of being sent to India in the global context. It's also kind off. Ah, window can we can actually kind of verified that portrait. So within this guide coat, if I come back in the air, endure, controlled or log and printed this Let's see what this points to here. Right. I want to make this change and run this application. What a play second to get court will be fired again and you will see the error along with some more information about logging in here. Okay, so let's click on, get good. Let's wait for three seconds, okay. And ah, no see received this information getting locked right? We all served the current dis context being logged the right so it despair. This is on object off the window. But we were expecting the object should be off type store court. And that's exactly the error. The reason we're getting the said it is because here we're creating an instance off the court object And then actually, after three seconds were in walking that get court mentor, not a set interval is executed within the global context, right from the global context. I know this get court method was executed that this ah was changed to the window object And it was not the court object that we originally intended Get This typically happens whenever you make a sink. All objects called sorry when handlers that this is the thing that typically can't just most of the day. Lepas to be more clear how this work this exact quote We could say something like this in your it so I'll just create a variable cord. Get court is equal to court. You get good. Okay, so this court don't get could we extract Got into a very will call. Get coat. No, I can use get caught directly that this is what is happening, right? So if I execute this again, you will get the same matter if I come back in here, clear the window and click 100 bridges and ah, then I'll click on this button. Jilted. Exactly. Are getting longer in here. Okay. Is it exactly right? The contact is being changed. The window Very tender. Stop. Court objected. The reason night become very clear, right? The set interval is executed from the global context and this Get court. Now, if you look at the gun court right, it's not within the context of the court object. It's actually no longer it in the context of the window object. And that's where the problem is now fixed. Is that a couple of things they can do began? The first thing that we will do is to see how we can fix this by using lexical scoping right to Maybe if I could wrap this within anonymous function, I get this a little. Also. What kind of things That we have this certain level. And here I later anonymous function like this. Okay. And, ah, within this anonymous function, I call the get court. Okay? So know what will happen. Uh, here is the context is not lost kind of thing in there, right? So we had this. Ah, get court mentor of the year. Okay. And the Satinder will take so function right, which will be executed after three seconds. Now, since this is a delayed execution that this function Panamint described locally creates a closure with this get equipment at any other beach, actually, kind of binds to over court object, but they still conducting work. So if I go back in here, clear it out, click on the images and click on Get caught every three seconds. So we should see the output getting Logan correctly. Okay, so, you know, we're still getting the error. So let me just take a moment and look at the court looking unless sixties, so we don't need to kind off create this way. They were leaning right. We actually did it for demonstration of how this context was getting changed here. They could directly see court dot get coat and the remotest variable from here. What is happening in here? This the set interval is kind of wandered toe dysfunction which will be exhibited after three seconds. But then we have a reference to the court variable, which is pointing to the store court concept of function it at this point in time If a limb otis untold outlook this year so that the control is kind of clear Clear this up on with Js just would have my new country is executed And when I click on get quote every three seconds No, you should see it all put getting coming up correctly in your little title apple. If I change it from apple to say IBM and ah, click on get caught every three seconds. Okay, well, see the title IBM coming up and apple. Oh, sorry. Because they're talked to even handle snow Kind of firing in here. Okay, so this is one way to fix this. You think lexical scoping by your singer function in the surgeon double. Now let's see how we can fix this. Your finger by admitted. So instead, off this What? I don't know. This. I'll delete this entire thing. Okay, so I'll see. Execute. Ah, go dot Get good. Okay, so this is this was our original mentored, you know, different. Not working. So we will call the bind mentor here. I mean, with buying metal parts in the context. I guess so. I like executive decision explained output off this. So want to make this change and click on images and click on Get court Now the output will still work. Guess we're getting the correct outward. No, What did this by in doing it. So the bind method returns back a new method. Look, it the bind matured, written back a new method. But the context of the new matter now really point to the court object. I get that this is out of alignment. It is creating in the orbiter than setting up the correct context. Okay, so whenever you see this buying, getting called in javascript so some object dot bind. So, for example, to demonstrate the serial say, let's something some object equal toe code dot get object dot find And when you part in that subject, the band of Dick Gregory tender new instance kind of thing in that's so to demonstrate that here, this will give you new function. Okay, who's context will be set to the court object that you are passing so that when later on when the subject is involved after, say, three seconds. Okay, the context is not window, but the contact he said to the court object. I hope this case of this ah, concept and ah, how this went Method can fix up the problem with scope in here. So this problem had that really motivated here. We actually used her stop court, which was a constructor function right now, in case we are using the latest version Obvious. Ah, five years, six years, seven. Are any any of the violation state? So we have something called less class. Right? So let's see the same thing very quickly. How it be hit in class. So here we have a class topcoat stop quarter which had to construct weather. Takes in the company in it example X exactly the same year. The same much to Melania. Okay. And it has the same parameter Sena, get the new test. Get court mental. Right? So they get a equipment, it is automatically at it with a prototype. Okay, so the thing that we're done in here, Okay, it's kind of one line on here so you can have a look at my adult video wherein I explain in detail how this work. OK, then we have a French court matter, the aerate, and if horrendously will have the same problem, right? Of a necklace, Condron, The window to context built into the window object because of the third interval in India. Okay. And, uh, output will be some other way. Commodity the same exact same Another two were using industry were seven. You know, to fix this out, I could come back here. Maybe I can put an enormous Mancini A Or maybe I could do to buying method and path in the context. So instead of this change in here and then this application, you'll see the or put correctly getting printed. Okay, so some matter in here, let me end off quickly than this out. Liquid get caught every three seconds again. Sometimes it doesn't refresh correctly. Yes, I went there. The first couple of Tempted seems to work in here now. So this is the way it works in? Yes, I as for less years, six. So both this parliament available in both the operations of the javascript. Any one thing in here? This eso we had the Saturn double, right? So I don't even know where we used patentable. We had to get the idea of the certain travel somewhere, okay? And Ah, later on, we're to call clever Interval on that. Right. But for this demo, I'm not doing that because that was not the point of discussion in India. Okay, I hope this clear subject you set your mind mentored. So, no, let's have a look at the contract off call and a play and see how that works out in here to create a very different examples to demonstrate the call on the play feature. Okay, let's have a look at the color plan. Bind as when we have, ah, numbers rain here. Could it has some value. Okay. And supposedly need toe love the minimum numbers I can use controlled art log mad men. And then I expect this numbers to be plus right. But then when I click on ah, when I do this court and look at the output, you will see that POTUS and not a number kind of thing in the elect. That's kind of coming north India. That is not what we expected. This is happening because the main function actually doesn't taken areas were in case if a person comma three comma free coman 10 comma one. And if I were in this application, you will get the correct Really? Which is one. Okay, so the mean actually, Anita, individual perimeters and not an array of PanAm better now, what if I need to kind of make this mean her work with an array of parliamentary that for apply will come into play oil, appended the word back from them again, Click 100 you get not a number and know what I can do is I could say, OK, man, thought men do not apply. Okay, the first perimeter for Kolender play is the context straight the context. Now, we can actually give any context here, but in this specific case, uh, way don't need to person in context. So we can't simply sentinel like another thing with this call in a place. So here, we mean involved a min mentored okay from the math library again, That play kind of take the Pelham. It doesn't another. Okay, so apply can take this perimeter, and I say and pass. It is an individual ah, element to this main function in your perfectly decently Condron, you get the same old putting you on it. So this is fair play will come into play can. No one more thing. Here is the reason we give nearly here because here we don't need to specify any specific context. We just need toe involved airplane matter and, uh, we can just personal this, indicate the context of the window and passing down lumps. Right, Because I play take the parameter is in a hurry off. Well, you Yes, but if you so playbooks now, you can also fix this. You think that year six notation rate so it could come back in here and taken, told or log? Matt, not men. And our daughter? No. And using the spread operator, it's perfectly contra. You could say more put in here. So this triple door is exactly what is happening with the airplane here. There takes the values from this Harry and convert it doesn't mean individual perimeter, and that individual parameter has been busted. The main function. Okay, I hope this a place. Ah, you said you play function is clear. Now let's see when more application of the buying function before we wind up. So this typically is called ask occurring in computer science case occurring in the process off taking a function that accept an argument and turning it into a chain serious off and functions each taking one argument. It is kind of interesting, right that this is some some kind off a partial application off function, kind of. But there are partial application and getting are not the same kind of thing in the the Cuttings implements the process of picking up on Kindle accepts and number of arguments and turning it into a series off in functions each. Taking the one argument, I think an example here will make it clear. Let's take one more example. Here we have a personal Jack literally contains a first name, last name and get free. Lim Ah, method to get for limiter takes waiting as a parameter and when any returns a grating plus the first name and the last name again. Now we also one more object or person go that has a first name and last name. So the first name and last name is common among both the subject, but the second percent object doesn't have a gut full name. But what if we need toe involved to get fully matter within the context of percent o k. That further calling a planetary will again come into play. So let's see this in order portrayed. So maybe I could come back in here and print it out. Se person don't get for lean Hello. This is straightforward, right? Because the person of jocularly head of get for limiter my frankly, Condi anemia will get the output. Hello? Where is this pirate? Limited rate. So Hello, Al Gore. It is private limited. Okay, so let's see how to call the get for limited. Now, on the percent to object, remember, Percent object don't have the get for limit. All right, so let's come back in here. And they controlled art lock were to say, person don't get fully, Okay? No, we can use a play and change the context. 2% 0 you know, we're saying we're calling the get full name, but the context will be a person toe for their play. When we are calling this get for limited the perimeters if when it should be partisan other . Right. Well, I can see Hello. Okay. Yes. And every when I semi colon clearly taught and click on run Now you see Hello World courses Private limited and helo tech academy. A little period. So, no, we actually call the get for limited. But in the context off person to a cave Since he used airplay, the perimeter had to be positive. Mary, unless you the same thing. But you think call or it So I can say concerned are log. But then don't get for a lame duck call the context this person too. But then the perimeter needn't be an area that I can simply past the perimeter directly like this. Okay, maybe it'll just chained up more than Gary. Say hi. Okay, click on turn here, and you're good. Metallica Dysentery units. Let's go back here and check this party. You know? So we think person dart, get for limb dot Call. Okay, Within the context off person to look at this end, right? And should be capitalised. Not clearly. Don't and run the application and you see the collecting coming up here. This is so we can You took all a plane collects it. Example of bind Also here. Now, please. Not one thing here. The call and apply both immediately will invoke the get full name function that that's an important thing to note. But then you for using the bind. The function is not immediately involved. You will actually get a reference to the function back. So for example, I could say say let Or maybe where? Here I get full name. Give me back and call any and anything I can say Get for lame. New Maybe again. I could say Ah for thunder to get full name dot Bind Remember, no buying will not invoke dysfunction but will return reference to this Get full name function for changing the context. Let's stay in the context to person toe again. No, Here we have a new function. God get called Get full name New But when we invoked this function the context will be 32% to kiss. I'll come back here and say console the dart log, Get full name and a cola. Okay, so context this person to read person to tech economy LLP like Loreto can click on brand. OK, you get some mirror. So let's see this. It's get full name. New can clear it up. They can turn again and you gotta collecting coming over here. It for the important differentiation is apply and called me immediately called the Function , whereas buying will return a copy of the function and later on we can invoke that copy at any point in time and part in the required parameters. Now let's see when more application off the buying function before we wind up. So this typically is called ask occurring in computer science case occurring in the process off, taking a function that accept an argument and turning it into a chain sidious off and functions, each taking one argument. It is kind of interesting, right that this is some some kind off a partial application off function kind of. But they're parcel application and getting are not the same kind of thing in the cuttings implements the process of taking upon candidate accepts and number off argument and turning it into Siri's off in functions each. Take no one argument. I think an example here will make it clear. First, let me commend out this court ordered The control is kind of clear, and we are free from distraction, okay? And ah, somebody have, ah, a function called Multiplied that takes into Parliament, Erica's A and B. It is a very simple function that simply irritants and Toby can. Now we can invoke dysfunction directly, right? So market play and passing. Maybe Phi Tau without which would be 10 here. Nothing great so far. Right? So we get the our boat. No, it currying. What we can do is we can actually kind off pause this ah functions in a delayed a parliament of the function in a delayed faction. Right? So if you remember the definition of the car, being late is a process of taking function that takes en para arguments, right? So in this case, how many arguments were taking? There are two arguments okay? And are turning it into a chain theories off in functions each taking one argument. That means if there are two arguments, this will be converted into to function that will take one armament. Does the ah logic band this? Let's see this in here. So right now we have a multiplayer function that takes in two perimeter with currying. We will convert this into two functions. That takes one that I mean each. This is the idea. So let's get to the example straight now. So let's create a function called say multiply by to okay. And we will use toe multiply function. Can I will call the bind mattered not Remember from our earlier discussion buying method will written a new reference our returns a reference to my money to pay function. Okay, so you're not changing the conduct. I'm just keeping this because the contact doesn't matter here because we don't have an object. Right? But we're actually getting a copy of the ah, multiply mentored. And we're passing the first perimeter as to Okay, now, this is the first step, right? So we have a matter call, multiply by two. Okay, which actually is bounder toe the first perimeter? No, To demonstrate this from a diagram attic perspective. At this point in time, we have a new method here. This is a new method, but then the first para meter off this new matter, which is a right so here is equal to do here. A secret toe to this essentially means in the next step, I can invoke this, multiply by two mattered rate and pass in the second perimeter because the first perimeter , we already positive, which is to I guess so. Maybe I can come back in here No, and invoke this method. Okay, consoled out the lock, Multiply by two and the first perimeter two is already there. It's a will pass in 10. Now this implements multiply two by 10. Right? So the output should be 20 with output is 20. Okay, so let's call it one more time. Controlled are long multiply by two and passing this matter direct. So 13 Toto should be 60 13 to do it. 68. So this multi play by to function actually kind of his bonded to the first the first perimeter A which is said to on the second perimeter we can dynamically passing. We can actually create more formations like this site for demonstrations, I can say Well, multi fly by, say three and they begin usedto money to play. Not bind this and say Let's change a the experimenter to three, you know, in a log it out, multiply by three. Okay, so the first parliament is three and the second perimeter process that 10 rate or put your bit and into three which is 30 if accurate and anecdote output will be 30 year. Okay, this is how though currying works. But this is kind of very useful because we're here cashing the parameters of the function, right? This will become very handy when you build recursive functions like factorial or similar programming things. I hope this clears up the discussion off. Call a plan. Bind. Thank you very much. 4. Understanding Closures: Hello will come back. This is very desperately here again. And in today s episode, we will try to understand what closures and some of the application that you encounter in your day to day programming. Okay, lets get the ball rolling and we will use two years been to demonstrate the examples. Feel free to use any editor that you're comfortable with, including with your code. So blame on item I have, my dear, has been to Tapia. We don't need this html tab and the C s a step. What we need is toe output that maybe I lost. Open up the developer tools so that we can put some locks in case required. Let's see what closures are and what are some of the applications. From our definition perspective, the closure of the combination off a function and the lexical environment within which that function was declared another implement confusing what we will delve into it to understand more most of the references for the coaches I have taken it from the Mozilla Developer network. I'm putting down there you earlier for your reference. They described the UFO for your reference here other than tapping it down Yes, Our agenda for today's understand Rojas understand? Lexical scoping implications off glow Ghous. So we're going tomorrow of this Her session. So before we Dell in little just let's see what exactly we do we mean by closures and there . And some of the basic applications are issue that we typically in country and no day to day life in programming terms, of course. Okay, so say I have a function here called message and this sadism operation. Maybe it declares a variable can descended on anything said this point in time I could yes log hello from right within the message function can call this function by King in the name forward body parentis is at this point in time you should see a message. Hello into the console. So exactly Conran here and say hello world in here. Nothing great in here. Now, one thing to understand Here this in javascript the variable self always cope at the functional level. So for example, this variable Hello that we see here. This is scoped with a function mrs This really but will not be accessible right outside the function to if you try to access this variable. Hello from altered the function, you will get some error message. So let's see this in action. If I tried to exit, the were able maybe hearsay console dot lock. Hello. And if you try to run the application, you will see the era. Hello. It's not defined which is going in here. The reason for this is the hello is scoped to the Metis function and it's not available or trade imitate function. Now the interesting thing to observe is right from within the message function we can access Hello and also any variable declared in the global scope or window to be specific in terms of brother. Okay, No wonder closures. Lawyers are mostly in a functions that have access to the variable take lead within the pattern function, and anything declared within the global context s for again. That's not very clear. So let's drill into the example and try to understand this before we go for the less the one moting Amiga. Let's defend the variable say global and let's see what the weekend access it from it within the function create a variable called Global message Hello from global And within the function I could go back and log dismiss. It could also look this outsider function. Take a condom. You should see the message Hello from Global and I'll tell the other meticulous, not defined, since this other variable is not accessible but in the context of the low building. But this global messages a reliable because the context are seen selectable back end nor Delon Tudo spent upto closures along with some basic understanding off lexical, scoping a little dissent example for no. And let's start with the new sort off course. Nipper. So let's put a global header for now so that we know this is coming from the global header . I'll create a function gold message that takes a message Perimeter and this Mrs Function riddance a function, say Call show, which takes a parameter again. Inside the show, I'll try to log in controlled art. Lock the message perimeter as the letter parameters Thunder show matter. One more thing I'll do is I'll create a variable within the message function. College message. Dayton Kiss nothing but some texting up a guess it This could be anything. It also tried to log this message Stater Night. Within the show function, take a moment and have a look at this function. What, exactly what we are trying toe doing here. So we have a message function Ear, which has a local variable called message data It It returns a show function that takes up time it inside the show function. We are accessing the message title were able of the parent we had accessing the but I meter of the message function and also accessing the parameter auto show function itself. Let's see that behavior of dysfunction with me execute this so I can come back in here and let's say we need to execute this function. Vacancy Well, message is equal Toe would rather see well, show is equal to message. Say my message. Interestingly, Observe what this lane off Gord means. We're in walking the message function with the barometer off my message. And what does the message from gender turns? The message fortunate on a stroll function that takes a perimeter So essentially means began in water show mattered Written additional barometer like this. So at this point, if I tried to run this application, we're getting something. Taxes. Let's correct this out before we go further. Let me read it Quickly. Check this. So we have a message it and so show. No, the show is actually a function toils a show. It's released earlier. A missed the function key word here. Have a look at this output. So we actually get the message. We get the my message perimeter that were passing with the message function. We're also getting the tradition perimeter being loved. How with this map kind of think oil. Just expand this logic. So this message is coming from the message title. The my message is being passed from the function Call. The additional perimeter is passed from the show mentored, you know, absurdist. Now, when this message function is defined, test taxes to the global head of it has access to the message one parameter, it has accepted a message. Straighten it has access to their shoma terrestrial. No, we cannot directly call the show. Mattered from the global context. The only way to call the show mentored is to invoke the message function, get an instant off, get the reference to the show matter and then invoke it the way we have done it in here. Now, while the show is being defined While the show matter is being befriend here, what is the lexical scope of the show mattered. What is the lexical cope of? The show mattered. So in layman terms, lexical scope means the date I really But at the time off declaration of the function, typically you can treat this had the source code level what all things are available to the function. This is what's implement lexical, scoping if you look at it, the show function want it was defined, had access to the perimeter people in taxes to the message Peyton had access to the message . Better meter, so all distinct were accessible to the show Mattered now at this lane off court when the message function was involved, a reference to the show function. Waas returned here, which is kind off in here in this variable. Now, after this statement, once a message is executed that it's no reference to message title anywhere. There is no difference to missus Turtle anywhere because the scope of the Metis state awas within the Matich function itself. For technically outside this context in here there is no way I could access message. It'll because of the scoping now one interesting thing here is to the message from 10. Didn't show mattered while the school was being determined? Are during the lexical face the show mattered had access to the message title. So when you let around invoked the show mattered from the global context and part in any perimeters. This show mattered has told re access to this message title and all the perimeter that waas available when dysfunction was defined. And there's a reason we can get all this output here in good. This is sort Clearasil aboard. So this Chopin can created a closure with the message function as the less with the global context. For example, just to worry favor that this global variable is available within a message function. Let's log it down, s maybe I'll go to this message title and also log the global her diarrhea. So play contract and you will see the global head are getting printed on the screen. Sorry. Okay. No. What interesting here. This we can actually invoked this show mattered at any point in time. It's not required that we have to immediately in focus. For example, let's Porter Lee Candler on the document so I could write us. Importantly, Kandla like this. So documented. And he went listener. Okay, Glick and, uh called back metal. Okay, so you could just take or do anything but for the simple case taken directly, you don't need to you Ah, Dom events. So what we're doing here is your thing. Whenever a click happens under document, I'll be calling the sure function with some parameters. So let's say we are just passing a new dating number format look so naturally of years, but should without foot. So all this information will happen, the additional kilometers will be locked. And then whenever the click happens given over the click happens on the document. We need to also opened output window here. I just enabled output window so that we can do a click. Let me just verify this part. So document got add even listener click whenever the click happened. We are calling the show mattered and passing in the new date. Okay, so ideally, what should happen is the show matter should be called and all this information should be loved and no P one should point to the new date in number format that you're passing. Okay, so Let's click on the or put window and see what's happening in here. At this point, nothing is happening. That could be some Eterindo court. Next opened the global, our developer tool and to accord inspection. Let's expand this a bit. I go to the concern clearly. Doubt. Click on the output. Didn't know what else are coming. Let me very fair again. It's a list LaCantera and then click under window. Yes, Assam flicking. You'll see this new perimeter is being part and our part is correctly lock and it also has access to all the previous kilometers. Celesta Message Title variable As for Leicester Global Herder now, technically, if you look at this evaluation, what's happening here is even though this show function worse returned and there was no longer the message title in scope, the show function created a closure which enabled the message title Toby available at a later point in time. And this is a pretty classic example, wherein you always see that whenever anyone handle happened, you can get access to certain parameters at a little point in time. The same concept is also applicable when you make objects calls in the application so Let's clear this out in just the cab would be Dedinje. Okay, so we have a message function that takes a pill a meter. It has a message title. And whenever you involved Armitage function reference to show from Chinese straightened. Since the show function is creating a closure, it's nested within the message function. The only way to exit a show function is to store this into a variable. When the message from Chinese invoked, for example, the way we did it here, even though after the Metis function was executed and we have a reference to show and even given the fact that the Metis turtle is not still in scope but because of the closure created better show function. All this environment variables, the show function has access to Candid can use it in the way it deems fit. Okay, this is much closer. This all a boat. It's enclosing everything, everything the surrounding environment, and that's the heart of disclosure function out of some of the applications, right? So somewhat application Talk to your functions are definitely maybe say you. You may need to create play with media bills, our functions, or you may need to create. I believe the evolution off court functions are are a couple of other things. And also one thing we have to have you here to bear up there is aware of the common mistake that happens when we create closures in a little. Have a look at this. Partners will deter some other basic things there, too. Goto case. Let's come back in again and try out some more examples. The first thing we try to do is is to simulate the private public method. What I'll go for now is I love amend out discord and lets him let some private public matter in here. So as you know, we have a setting object. Okay, that takes So you are okay. And ah, let's say let's told that you were willing to a variable. Now, technically, this names could be anything but just to make it very explicit, I'll say New York on and call it s new you earlier. Nothing in this setting function we have ah, where you are a witch told. There you are. That's also Petya. Uh, receipt Count variable in here. So let's implement a function called get you other. Okay, this is a function, it's imploded and so you are kill. It's also implementer to string. Function may be well to shrink equal toe function. And what toasting will the will just send us? They would put it a string to the or it and stood up You the well, certainly. You see iss six so that we don't have to loose string concatenation I could say get meter. You are variable Lord by, uh, the sitter count It is nothing but is coming from the visitor radio. But again, this art putting our returning back to values and strength Moment I let an agreement function. They hand Ritalin. Clement do is it will simply inclement visitors owned a one and they're tender with it account And finally we will attend the function so that user can make you solve this settings object of functional you may call it s for the requirement Elarton object on the subject contains to sing with it which points to our to string total content to get you other and also a method called increment visitor which point student increment function. You take a look at this subject. Let let's try. Let's try running this and then come back. Good explanation of this. So no, I could say Well, I'll go refuses equal to setting dot com. Yes. So I will call the setting function with the required perimeter and then maybe I could log this information like concerned are to log on. Go. This is dot to stink. Maybe l go that this dot Get ur select Sida or put off this. We're getting some matter here with Better is not defined. Friend of chocolate city Where the terrorists So we have Is it account? And this one here they should be visitor count. I cannot see if they're in this application. We get the output Ivory said dot com Mr Content zero No, What we need to do is we need toe increment. The visitor can't see Maybe when I will the use of Richard syrups that we need to implement it before this, we will simply put a even handler Lets copy or don't. You went under that chair Britannia and put it here. And then when where we click on the document will simply inclement We sit account so I'll go. This is Dr Increment Visitor Ganden Maybe we will log this information again. Let's cooperate and put it here. A lot of the information. Now, at this point, we have a nice application which can love the visit account. So if I come back to this application, I'll open up the JavaScript console and output tap. And when I click on the output tap, you'll see the Wistrich Countess getting logged correctly here can know what area chewed by implementing this kind off Corden here. The one thing to note here is the obesity count. Variable is private Toe the sitting. There is no way I can accept this visitor convertible outside feting function. So we need to put a protection so that doubts state planed other user is called making use of the setting for setting object may not directly modify this value. Don't leave it to change this value is the other increment function No closure. What? What exactly is happening here? Right, So if you look at this subject closely, we have a function here. Okay, that take so you Otto. Okay, now this you're really stood into a variable called You are we have a visitor count variable and then we have the get function. So that we can read this value since we cannot directly except the Ural, we're providing a function for you. They lead us Year six Selectman script totaling 16. We have got a sensitive Cecil. I'm not going into the topic at this point in time. Then we will create a two from Do string from center that we can love this information to console nothing. What's happening is the toasting function. The get you are a function the implement function They are actually we defend with India settings from community This even though I had not haven't named it But since we're starting into the variable, I can call it a setting function here. Okay, now these all dysfunctions 12 and three They had actually kind of creating a closure with my setting function that essential image one dysfunction is executed. If I have access to this three methods, I can refer toa the internal variable light within the function because what exactly the closure is is actually creating a scope off the function itself along with the parent function and the global context defending so finally wanted to setting from gender turning the setting function is returning, creating stores When is a toasting mattered that get the world mattered And the inclement method? Now what we assimilated here, it's a kind off private public visibility. Ah, contact within the application. Anything that this function returns this public that these three things can be used by the client or the calling application. Okay, No, no. The various leg You are little visit to counter or any other variable so function that your defend can be directly accessed. So you provided some kind off encapsulation year off protecting the private variables. This is what this one application off Chloe it is all about Yes, I feel come back to the court again. Let's see how discord is being and we call the setting functions and part in the U R will overdose setting that were Then we have the document, that argument listener, that is, whenever we are clicking on the document we are calling the inclement recent terminated the reason we were able to call the agreement with it, ERM attorneys, because we are returning that here, which is kind of think from here to here, right, So this Al Gore icis has access to all this. Three matters are a label and Tim Disagreement murdered is pointing toe the agreement function here. This increment of function has already created the closure with my visitor count Variable. So this was a duck on will be available everywhere within the function itself, I get the decision application off closure where we can similar to private public, kind off visibility. Scope it in the application. Okay, I hope this is clear. We'll also have a look at one more example of closure very shortly. Okay. Lets no have a look at one more application of closure, the concept off partial functions or partial application. They were doing their partial functions or partial application. It implements the process of applying a function to sum up its arguments. The partially applied function gets written for later use in other words, a function that takes a pension with multiple parameters and attend a function with pure parameters. You know, this seems kind of weird to understand, so let's get into an example to make things clear. So I'll start a brand new jasmine and gained the court. Let's say tonight function. But this time I lose a year six in text arrow function notation to keep the court contagion short and also you also get 90 airport holdings attending in the year. Six can enable year six people just so that I can on this application in case of an issue. So I'm creating a at function which takes a parameter and which Britons a new function that takes end up a tomato and this new function will return the some off the previous perimeter plus sticker in Pelham it. Now let's quickly go to this definition so we haven't at function here, which takes a bad Amido, which Retton's of function that takes be and irritants a plus B. What? What What do you mean where this execution there Let's see this in action and it will make it much more player. I can use this function like this I could say Let add chemicals to add off Stent kid NLC controlled art log had 10 toe fight, then considered art log and canto. Then can I feel look at the output you will see the first ad 10 is adding 10 to the perimeter Fi and I would put that you're getting is 15 the second at 10 deciding 10 to the 10 and giving a don't put us 20. You know, this is kind of very strange looking function, but let's dissect the court. What we're doing first is when we invoked this ad function. Okay? It's returning back or function that takes ended a pedometer. So this ad, then, is a function that takes be a separate emitter. But if you look at the B are the function the second function in here? It has a closure to the outer function, as it is everything. The variable A from the previous function because of the lexical scoping when this function was defined. The inner function has access toe both this parameters. Okay, Now, when you call this ad function, you already get a written deference to this second function. Okay, When you say, add then and but in the perimeter. Fay, this perimeter fire will be passed to the inner function that that is already passed this parameter to the first function. Okay, so what will add 10 off? I return, Fate will return. This is 10. And it is fi output will be 15. Okay. The next year's friends were thing ad 10 and putting the perimeter often now act and we already have 10 past here. Amir earlier. This is already there. Get in. Racing In what? The second function? Passing 10 again to this essential amenities. 10 plus 10 which will give you 20. Esther, put This is one application off. Partial function. Well, it's, ah, writing one more function in ear just to clear up the concepts cell C let add five is equal to add fight. Now you know what might happen. Take until dark Log had 5 to 10 and should get output 15. Okay, just get sorted. Everything is We are actually instance creating this function again and plus in fight. Okay, So is equal to five. Then we are in working dysfunction again. And passing in 10 is the value. So be use equal to 10. And finally, when we returned this, this will be a plus B, his type lis 10 and they would put will be 15. A condom. You will see. They would put 15 coming out in here. I hope this makes this application off. Partial function. Ready? Clear. Thank you. Let's see how using closures fit enough or look could create some issues. So we have available bitches off tie. Perry, let's say the small for loop, but we're doing inside the for loop ease Were just assigning a function to the areas. Okay, so we are dysfunctions created, so there will be three functions created with nearly because a low piece running two times . And when we invoked the function you're expecting the value of I should be printed. So every time for the first time, the value off I should be one are in this case zero second temperature, everyone that our time it should be. This is what we expect when me print the function of spending function so well, I just long for look and Plato called the function inside the loop. So what we are hoping here is we are seeing the value trees being opportunity time what we were expecting where the value of 01 and two. What is happening yet? Let's take a look at the court very closely Now, when this function was created, Dina function, which is this Lynn created a closure to the variable I It was out of uncanny, which is created better for the one thing we know any ISF I This variable scope is global. At this point in time, get the reliable scope. It's kind of global at this time because if you try to open the value outside here, this will still point to the last. Really, which it's too or three. Let's see it out. So what I'll do is go back here and Justo controlled out long the value of I. Maybe I is equal to right. You see the value three is being printed because opportunity aeration, the value became three and the loop came out or it's stopping regarding the look kind off the menu street. So when we call this function again functional zero function of one function off to what we were expecting. The value off ice Leroy's one and eyes to be printed. This problem is there because when we take into consideration the lexical scoping when this function was defined, where the gold was written okay. And when it was executed, the value off I became three, right? And within the closure, this enough function is holding on to this. I is enough and Can is holding on to the hi. So what will be the last value of the I when this entire court is executed value if I will be three and Mrs Bartra getting him again, Not this problem. A specific specifically because of this scoping issues with this very declarations. Okay, that's how to fix this. Okay, To fix the problem, we will wrap this function within an anal function. So what I will do is I will within this function, Victor a new function like this again. Then I'll make this function anonymously. Executing our self, executing on on the Muslim chin kind of like this and passenger value off I Okay, so this sanction this parliament raising available year, I could call it I maybe was Saeko simplicity. I'll call. It s a while. Okay? And this in a function will refer to the rally. So at this point, if you try to execute this, you will see that output is coming out correctly in Yes. So I value with zero. I value this one I value is to For example, I could also do things like Fung Soft zero. This will zero from self one would have been one. Okay, Sit out for days coming up correctly. What would here? Let's have a look at the good ready closely to fix this problem. But we did. Waas we wrap they are the function within any no function here. Now the inner function is Mr So kind of closure is created within these two functions in here. So there's enough function will help access to all the variable declared within this function as well as a parent function. What did the parent function doing? The parent function is actually kind of us health executing anonymous function, and it's actually passing in the value I hear. So every time in the loop, this ice part as a perimeter to the function which responded Tomainia is a well, okay, and enough function is pointing to this man, you know, a kind of closure is created here. So every time within the loop, this inner phone can have a unique while available to it. Because this is actually a new instance of develop, because this function is called every time. Okay, so this is one way to solve the problem. Okay, I'll clarify this one more time. Let's have a look at the golden here. The auto function is being self anonymous, living executed and passing the value of die explicitly get this values available here is a parameter well, and the enough function is pointing. Do it in here. So this can doctor you to the closure with the parameter of the motor function. Okay, so this is one made to fix the problem off closure. So after this point in time, you will see that would put coming out correctly. When you're all dysfunctions. Independently, there's one more easy way to fix this. So in case via your singing a six. I said this was because of the problem with this a while, right? So we can simply fix this problem by replacing the work a word with the let let's statement . All right, let's have a look at that, Kolya. So in this case, we don't have to wrap the function, so I simply make it let remote this coming. Good. I actually meant the court, as is at it, was earlier. There is no need for this. No can demo. This part of the court s a okay, Andi hopeful. Listen, tactically, the good is correct. Reference looking. This is actually pointing to now. Look at the output here. We're still getting the correct value. 01 and two. And this stand for general and one What? We did this actually, that I sort of testing the work you would We actually used to let to define a variable here . This is the new he s six and 16 year, six feature kind of thing. Okay, what's the different between this lead? Using light variable within the for loop actually binds the scope of the lead to the fall. It points the scope of the letter, the for look. So every time within the left you have a new ready for the I just go piss bounded to death for look earlier when you're using the where the scope was not bonded to the four Look, it was bonded to the global in this case. Okay, this is one easy way to fix the problem and you have the same or put coming out any minute . If you print, you get the value zero in value like but this is the year six, they're solving the problem off tojail within a follow. Okay, let's say one more reliable application of this closure in a low problem. I did this example from them the end website. So we have a very simple upset in here. Say I'll open up a new J Spain and put in the court from the model of upsetting here. So what? We have years, IHS. Couple up input boxes. Now. What we need is Astor you to focus us on this input boxes. We need this message. Help almost with a period, Toby. Dynamically change. Based on the input that as the focus, let's try to implement this feature. This is only markup that you need to point out this in this case, we have email. We have name Ria, which, and we have a paragraph pitter idea off help. Lester put it here for the reference and our motor, the court will go in tow. JavaScript section in India. So I love simply heard in that stream melting and come back to the just taking. Let's take a close look at this. We have this in Putin era with email name, and H Okay, So what we need is when and where the focus is on this Pacific input. We need a helpful lord to appear here lesser, taken the gold and put it together for reference. So I take the court from the Indian and put it here. So let's go to the court first and then understand how it kind of beer. Now, at this point in time, if you if I click on this focus, you see the messaging just to your age, you must be over 16. The problem is, the focus is on the email and you are getting the last value, which is your ridge. Even the focus. If I change it to name you, the message is still the orange 30. Faith Put the focus on the the Magus. Still you? The message is not changing as but the focus is changing. Right? Let's understand what is happening in here, so Yep. So we have a function called show help That takes Ah, help object from here. And it shows in tow. The do. Okay, so this is what it's kind of happening. Okay, this help parameter is being passed, and this is actually referring to this input in here. Okay, so we have a function gold set up help between year executing nondescript is being run inside the threat of help. We have an airy here off help text, and for every input element here. We have a corresponding and three here. So, for example, the help text. We have the first element decide email the help messages. Your email address the second. Decide the name. Help me said Yes. Your full name. In the thirties age and the help messages. You must be over 16. Now what we're doing here is we are looping through all of the help text I get. So how many elements are there? 019 toe that mellitus. Lope. Children three times the loaf. Children, three times you have. This is clear. Delia, get the reason This court is not kind of working. It become very of beers. Once you dissect this code can No. Within this court, if you look at, we have a for loop, okay? And written before. Look, we are starting the help text passing and they index into a variable call item. Okay, then we're saying document or Gettleman by Eddie item dot i d. So, first time the ideas email the second time died this name that third time, the ideas age and we're finding that element by the idea and hooking onto our own focus event. Okay, That means whenever doesn't put refuse. Focus. The show help Mattered will be called now One thing to note theories within this for loop his own phone focus function is kind off a closure that is getting created. Okay. And the problem here it is on is not the problem. Kind off. This own focused function will only be executed whenever this input refused to focus. That means if you taken to the lexical scope what it a lexical scope of his entire function . Okay, if you take into account a lexical scope by the tempers cooled is executed. The relabel item is pointing to the last element. Okay, By the time this code is executed, this entire court is executed. The variable item is pointing to the last element which is you must be over 16 age and that is being foundered in this show. Help mentored. Okay. Sindhis on focus function is directly bounded. Are oppressing this item? Help variable The item at any point in time after the execution will always point to the last element from this away. And this just they were getting the problem in your very where you keep the focus on my face. You get in the last 20 years. I have. The problem is care now, right? The primary reason you to understand this by the time don't focus is executed. This loop is already rocky, and the variable item is being pointed to the last item. Indy. But it now, this one simple way to solve this problem or to fix this problem. Let's accept now. So what I can do is to fix this. Problem is, I could kind off create a new function. Ah, that will return this show. Help back to me. In fact, we're trying to create one more closure here. Okay, We're actually creating a new lexical environment. So what? I'll do it. Yes. I'll come back in here and create a new function called Make Help Call back. Okay. And this Willard Anna function. Okay, which many regarded we called show help. And then in here. What we'll do is we'll say, make help, call back and passing item dot Help. Okay, so we come back to discord. Let's see how it's kind of working for an office. So if I know, take the focus to email, you get the material email address. If I change the focus to name you Get the material your fully. If attend the focus to wage you get the message. You must be over 16. How does this kind of working, right? Not if it's looking because see what you're doing here is okay for earlier the own focus callback or sharing the same lexical scope. Every call back us up into the same lexical scope. But in this case, what we did is we actually created a new lexical environment For every call back, we created us New Mexico and alignment for every call back with your first Tudor help object which are first to go. Help object. Ok, and finally, this is pointing to the correct value within this away. If you take a look at this, what exactly is happening? It is so this on post focus function will be executed at a later point in time. Okay, but then this is actually connected with the make help call back there passing in the actual text value that we I need to show at that point in, I think. Okay, so, on the fisted first situation, the three point Odo first value sake imitation, different point of the second value. This make help call back is actually returning a function again. Not this enough function is creating a closure with the perimeter of this auto function. So this is correctly bonded because I knew a lexical environmental scope is created and every situation in the loop this new and my modest correctly connected with each attrition as it quite good. This is how the problem is kindof fixed. Okay, So the important thing here is we created a simple factory in here, which is nothing better pestered function, which is bonding to the outer functions. Perimeter scope get. So this is one solution their dissolution. We already any rate, which is kind off wrapping the function within an anonymous call back. Right? Let's see that connection. So I love come back in here again. So let me just put this s Rilya. So I just put in the court for now. Let's replace the good. Okay. So I mean this for the court to this remote dish. Make help, call back. Can't you sit? Output is still sit still. 5. Understanding constructor function: Hello. It is radish relate with yet and a bitter on JavaScript. In this episode, we will have a look at doing object oriented programming using JavaScript would es y and er six version. In this first cities, we will have a look. It functions, classes, inheritance and static methods. And, ah, how to build a small application that tastes all these concepts together. I used excellent on generated He has been for this demonstration, so I will be opening up to taps on one type. I'll write the code using the years facing tax and on the other type, I low read the court Lucinda Year six or the studio than 16 10 tax. So let's say this connection, we will be building up, but this small, rudimentary JavaScript alert level E that will log the messages to the console. In real application, you can build an alert library that can show a pop up a dialogue over the way you weigh your name feet for your applications purpose. To keep this demonstration simple and to concentrate on the court concepts off object oriented programming will be kind of simply logging the information to the council. Let's start with the years PFI court and ah, let's build over constructor function for their presenting an alert Class 20 s if I can create a function and give it a name, Okay. And this actually becomes your constructor function. Know what is a constructive function? Constructive function is typically identified by the name starting with a capital letter. Now, this is a convention escape born kind of and force any kind of rules on this. Now this constructor function can take a perimeter. Let's call this s title. And inside this constructor function, I'll store this parameter title to one instance variable and I'll also called the variable s title. You can name this thing anything. Okay. I also kind of put a guard condition that if the title is not passed, I'll put in a default textures alert any years. And I'm done with the contractor from Cantonese five typically in Javascript. You actually invoke a function by tapping in the function name and then calling in winter. Parentis is open and close parenthesis and you can buy a symptom. Panam ataxia. This is the way. Typically you invoke a function, but this is a constructor function, right? As I mentioned at the convention for the contractor functioning is that the name should begin with her capital letters again. This is just a convention. You can still create a constructive from Ken using the smaller case name. But that is not recommended. Do you work this contractor function? Typically, I won't directly involved dysfunction legs. I will use the new key word against or something like this. So new alert and then you can pass in your custom messages in here. This is how you pass parameters, toe function. Nobody fold the constructor. Function it. Retton's an instant off itself. Okay, Window. There is no explicit written statement here, right? But then the constructor function by the fall will return on instance of itself, right? That essentially means I can store this information in tow variable and then use that are variable somewhere. It's all quite a while equal to new alert. So this a will contain an instance off the alert function. And then if you kind of go back and work unsold art lock and print the A dot data. Okay, I feel Look out for the console message in here. You will see them a teach my alert being printed. This is how you access any properties or mattered from the instance of the variable that you create just to make the flow off this application. Medicare. It also put a concert art log here so that we can track how this constructors are being called just politest. Save one alert and I call This is from the constructor dish allies the constructor text, obesity or just for my information. Now, while there were nagging, you'll see that when you call the new alert constructive from Chinese Salon and the log is being happening on the right setting here. And then when you print a dart tighter, the correct Italy is being output cuts into your passing. My other tell perimeter if I don't pass in any perimeter in here but before the alert text will be as this cut on the right side in here 6. Understanding Class: Now let's do the same example with year six classes. I just put my before toe little toe this alert from Canon here, call it. Does my look OK? And now let's see how this is kind off can be re personal with your six classes. No, For easy translation, I will simply copy discord from one tap and I go to a new tab in now their spin and put my court in there. We get to the issue The court for the yes six here is all actually is also called just 2015 2016 2016 is also coming up on dissent. It is also coming up kind off China. Let's kind of changes in here. So in year six, we have the class keyword. Yes. Why? Can't see glass alert but this will create a class. So I just took and remotest perimeter from here. So the class start physically open and a lovely clothes inside the class can awaken Creator constructor, You think that constructor cured and wrap this entire thing within a consider function and take a title, right? So we lots of uber data. But this is the exact chord of this constructive function using the year six last notation Goodnight. If I run this, you will see the same or put being shown in the like cancer dealing. So whatever done, you're right. So instead of using the constructor function, we are you seeing a class and the initialization off this class, whenever you do the new used, the new key word here will happen in the special method call constructor. So inside the constructor matter, we can put some initialization called in here and you said it remains exactly the same s yes. Fight. We see how this went? One are conflation is happening from us. Try to the Essex. I would also like to point out that the yes six and operations off McMaster plac es 78. They are not supported by all the brother. But the good thing is, at this point off time, most of the modern brothers importing grown Mozilla Firefox, even ie edge all supports this class in Texas. So what many people do when they built regular tame production application is to use some kind of plants pilot. Right? So one of the most well known Principalities, Babel Years or Babel. Jeez, you think people. We can write the code using the latest and greatest in JavaScript using your 60 x 17 tanks , and it will convert the court back to the years facing tax, which all voters can supports. I would comment, rate. When you build your real production implication, use the transporter like babble, all even trust transferred elect typescript. Even typescript is kind of pretty useful, and it also gives us a magician community. It's like types. So take whatever you feel good and about what you are comfortable with. No, since I am, you think room at the latest version of Groom. This class in Texas will work directly in the poser, and I don't need any kind off transpired us. But then, later on, you will see there a certain aspect to this classes right, which is not supported at this point in time. And that's their Bible. Another transplant list will come into play 7. Fixing new keyword bug when invoking constructor function: let me show you some issues that could happen when we are using. Yes, right now. As I mentioned that are nes by this constructive from tennis purely by convention? It so what if I accidently forget to put the nuclear area right? So let's see the coordination and then understand the behavior of the seller. So I'll just click it up my console, you and, uh let's see moda new a word from your it. So when they do this now, let's cedar behavioral this. So if I click Condron, you will get a good dear that cannot read property title off undefined. Now, this is kind of strange not see what is happening in your list. This? No, I'm actually kind off in working this function. Laker Normal function. Right? So when you call a normal function like this, right, so when you call it, it will come back in here. Good. The title My allergy is being passed. No, inside the my elect function. What is this pointing to? So since this is a global scope, right, this entire thing we sit in the global scope now, right? This This will point to the window object. That's one thing to remember now when I involved this function like a normal functions in tax. But if all the information is not returning anything, right, so this a will be on defined. Okay, so now when you call the title mattered on this a You could be error message can ordered property title off undefined. You know, this is important to note. Next. Very fire understanding. No. So I'll go in 30 Select function and law controlled or lock this. So remember, I remember the nuclear body elect? Not exactly. Condron, you get the message and our message. And also you see that this is getting love invigorates, which is a very big object like this is object window. This is how you are getting the other that I think that undefined when you do get out stated this is a very common after that happened. So when you are doing open your new to programming in the concept of functions JavaScript and ah, not this kind off thing may kind of sketch minter price it and it could sometimes be difficult to troubleshoot. Decision? No. As, um you are you thinking? Yes, fine. Your production project Lee. So can you kind of take care of this nerdy over there in that you can make a replication work whether you call the alert function like a normal function, All you call it by your Cinda new keyword. So you see, the nuclear word will definitely work here. Right? But how we do enforce day one thing is you can use some glinting rules and other things to make it work and can enforce some rules that if you kind off use different function without using, the neutral matter is thrown up. One more thing you can do is to kind of put a guardian. You are alert function that takes care of this thing automatically. For example, if I remove the new from here and nick you, we could hear a message so I can come back to my electron Kenya, and then I can put a guard function year so it in there that I will say if this instants off alert. So what I say is I will say if this not this actually can point toe window if you omit the new key word. But this can point to the alert itself. If you're using the nuclear. So what we're seeing is if you are missing the nuclear word if and this is not an instance often alert, let's written a new alert and research things will remain the same. You know, if I run this application without getting the nuclear, the application will still work. Right? So let's see this in action first. So the application is working s correct. Now what is happening here is now here. When I'm in working this alert message, I am missing the new key word. So when the execution comes to the concept of function in here in this case, a normal function we're checking whether the instances off type a lot right there to Mr are the new key word here. The instance will be off type window in the instance is not off the idea that we are returning a new alert. So when you call New alert again, this contractor from generally big call. But then now you think the new alert scope and within dysfunction this will point to the instant all the alert that this written will be escaped here it will come back in here Ascender default title for about what it is your person by default. When you use the new keyword right, you get the instance back that will be stored in Hey, and this will take care off this missing new thing. And you can still, but with the application and that you think that new I told you, think than you. So now if you are new keyboard here, application will still work as expected. This is kind of a small protection that you are putting in a year so that you don't get an expert for data when you're running this court and the patella promises the new people. 8. How to add instance method: Let's continue with the replication and ah, let's add some methods to our alert, constructive function, not about multiple ways in which I can add the mental state said Obvious. They could be I could come back, Toto Constructive tension and see this start show. If he isn over metadata function and I simply log the title. Dodo control. This will work. But this is not a recommended practice. I will see shortly. White knife. I come back in here and they say they don't show. And if I run the application, you will see Milon thing displayed in the output. Now let us see why clear documentaries like this in a constructive on Sonny's not good. I assume that we have, ah, carry off a lot stick. So I'll save a allergic sequel story. And maybe I have a for loop era wherein I could say for Let I equal to zero and I less 10 Satan and I plus plus again within the four look say I'm creating the allergic so I'll say alerts dot Bush. Then I could say new alert and I just simply pass I elder. But I mean tonight tecum outside this loop and toe log the alerts. Let's it out. Put first So I'll come back in your lit up. Make insulin do, Alan. So you'll see. So about 10 instances off alert function is getting created in, right? I could say alerts dot Lent this to be very clear. Tell me then there are 10 instances off a lot. But the problem with this is that there are 10 instances off the alert object. There will be 10 instances off the show mentored. Okay, terribly Britain. Instances of this showman. So if I open up the Google developer console you and look at my concern you see at the often like this is kind of getting, ah la Granier they films off this a large function it you will see the show matter directly on the alert objected, and this is repeated 10 times. But if it's bad from a memory usage perspective now, what we wanted was that the show matter should only be a real Lebanon deported once, and all this 10 instances should use the show mattered. Okay, so that's the best way to do this. So never, ever kind off the sign. The methods directly within the instance or directly within the concert prevention like the way that we did hear right? So let's correct this anti how we can optimize this and also kind of free up some memory while we are doing object oriented programming in JavaScript. So let's take the show mentor from inside this contractor fencing and let's put it outside the function. So this is kind off that effecting I'm doing now. Instead of this talk show, we will use alert dot photo time doc show whenever you create functions for your instances are for your constructive functions. It's always recommended to put that function with tinder prototype so that all the instances will share this method consistently. And the memory would also be kind of optimal because there will be only one instance of the showman rather than 1000 or whatever you're kind of creating. At this point in time, everything will work as expected, that ah can alerts created. But let's see in the console how maney instant of the show matter. Just empty alert. Let's the motor lent from here and then open up our control again. No, if you look at this instances, you will see that there is no show matter on the instances off this alert, right? The American dish Oh come from the show will come from the prototype. So will come from the This is how you had to create your instance maturing. Jealous, he said. No, no, This alert melted will directly, however, so much so if you opt out, the prototype will see the show. Mentor is within the prototype. It's pointing to the prototype. Please remember it's pointing is not a copy of the photo, Tapia. Now let's see how to create incense matter using the US six classes. Now I'll do some clean up here, right? I don't need this address here. I'll just put that comment here for your reference. As I will say this, you are all with you. And now let implementer show mattered on the GSX. So I'll just copy dysfunction. Maybe I will go to the six tab in here and in here. What we can do is site within this alert. Plus, I can create a show mentored and then but the law gear. But if it is the year six way to create in since matter now, one thing to note the recent they're using your six. We don't. There is no need toe. Get this function here We have this short form or creating an instant solution right within . The pluses with the show mattered will be part off the instance. Oh, are the prototype of the alert class that were clearly so If you come back in here and say it out, show output will still be same. What is a kind of things we don't have to worry about? Because internally, what will happen is when this thing is kind of interpreted better Boza and compilation stuff may happen. The show mentored will be added to the prototype of the alert functionally, and Dallas community really doesn't have last kind of thing. Great. This internally, that is still like a constructive function being generated. And that's so kind off at the classes works in JavaScript, including the U. S. Six. Let's create one more Mitterrand. The pro day you call this method has to string and let's return and usedto your six back pick here. This is the back thing that you can plane near you escape key and, uh, end off return the text alert followed by the value of the title. So how can access the value off the title within this year? Six. Template Li little I Can you $2 sign forward Better Cally races and then within the college basis I can put in the stock title. So let's come back in here and just print it out it out, too. Shrink, I'll get up my console, Condron, and you see, uh, the my alert getting printed. But let's take why this is not coming up here. Guess so. I have to string mattered. Alert, not prototype not to stream. And this is sickening it. Okay, we had to put the console dart log as the to stigmatise returning a string. It's clear it up the convent and you see the myself getting printed. Yet I am using one moment it because I'll, I'll show you how to use a test from the pattern class from the data classes later. That's why I'm putting this toasting method in years. Let's also do the same thing for over a year. Six Class No. So in the year six class, I could simply created toasting mattered by writing in the name of the function for our players fantasists, and then they're turning alert. This stock Dayton? Exactly. Same. They could come back in here. I don't have been controlled out. Lock, They don't toasting case. I'll clear up my concern and click on. Yes, I would think seems to be Seems so. This is the year six toasting matter which is headed to the prototype and the system. Toasting mentor? Yes, my notation. 9. Understand how inheritance works: Now let's see how inhabitants works in JavaScript. The first really go to the yes fight and then see how inheritance work and how kind of it's kind of difficult to create this kind of system. Using yes, fight and our years simply face inheritance toe, make much more Lena code. So let's come back in here and here. We haven't alert class site, so this is basically our base constructor function to be more clear. So no, I need to create one more class called Success Electorate, which could have a different behaviors. Any Essex, I can create a constructor from Gene called Success Alert. This two takes in a title. You can actually part in more parameters as required. So this and this will have one more property called type. And I call this tape etc. Success and for troubleshooting purpose. I will log this information to the console. So I am putting in the lock to make it very clear how the flow of this conflict a function is happening. So this feel kind off Alagi told you. Know what? We did this. We created a simple success alert, constructive function which has an additional property called type? No. At this point in time, this alert and the success alert functions are not connected. Know what we need to do is to make it inherited from the base class which is alert. Don't make inheritance work in the s fight. The first thing we have to do is to call the construct emitter of the pattern. Plus in this case, the parent classes T elect functioning, right? So right within the constructor Materia, we can call alert, not call us in this and pretender perimeter title. So what we're doing is calling the parent which is alert Constructor. I have yes. Using the JavaScript calm. It's not. It is very important. Call matter. Similarly, we also haven't apply. Metta Ananda, bind method. So with calm 1/3 we are invoking the constructive function alert passing in The context of this not this year will point to the success alert class When you call the constructor function right alert. It takes a perimeter right with this title. With that title, we are passing it from in here as a second perimeter. But this will kind of make up the street rates at this point in time. If I come back in here and create available called success and saying new success. It look so I could pass on a message, successfully sealed, maybe anything like this. I could do anything like this. So whenever this new success alert function is called, the first thing that will happen is the constructed function of the alert function will be called back. And then the type property in additional thing will happen. Okay, so at this point in time, if I clearly told and click on Run, you'll ob so that this party is coming from the first other here. Okay. And this part is coming from the second. And you see, when you called Success alert, right? The first thing that happened was here. You're calling the pattern constructed. Right. So you got this message One alert constructor, which is coming from here. But this actually, to make it more clear, clear, I'll just label. It s too successful at right. This will clear up the flow. When I click on clear area, you'll see first thing that was called called worse One alert contractor from Colonel Dependent, which is alert. And then the constructor from 10 of the child which was successful. It right? This is how things are connected. But this this is not Dayan leading to do. We had to look up, love more steps to make it work. The purpose off inheritance that we are trying to a Jewish so that we can reuse some three Children the base class. So now the alert clause that we have it It also is already have a show mentored. Let's see whether we can new to show ometer from you at this point, hopefully we could derail, right? So it's a success Start show, You know, when I clear the console and run the application we get the message that took the door show is not a function. Okay, now just call in the conception will not solve the problem. We have to kind of assign the prototype off the alert function through the prototype of the success Alert order, deride, function. Okay, that the second step kind of thing today. So let's come back in the Jordania and let's kind of see success alert dot proto type is equal to So let's copy the prototype from the alert the castle say object or create alert dot photo So what this will do? Is they still set DiPoto type of the success alert constructor function. So the prototype off the alert by copying every value from the porter tape. So this success in it So once I do this, hopefully things will work. No rights. When I clear things out here and click on the Iran will get the message successfully. Cigarette. So they successfully statement Age is actually being involved from success dot show. But then the success dot show right success class of the Success Alert Law didn't have the show meant it went to deport or pay. And then it actually find the show mature there and then it in walked and get given the correct value in here, let's for the moment understand how javascript resolved the functions. So we have a will elect glass in here, right? And we also have our success Elect glass in here and as soon this alert class has shown mattered on the poor. Today, in the success of the last, this endeavor show mattered when I create a new instance of the success alert class. Right? And when I called the show mentored, what first happens is just triple tried to look into this success alert class, and it will try to find the show mentored. Okay, if the show metal is not phoned, it will goto the prototype off the success alert 19 for a moment that we are not kind of inheriting from the alert. Plus, what will happen in JavaScript is the porter tape off This sophisticated class will come from object and insanity object. It will try to figure out whether the show Methodist there are not. When it doesn't find a show mentored, it will throw another. This is how kind of inert insists looking No. And now let's say we are generating the success alert class from the alert function here. So what will be the B area when I call in as dot show? The first thing is it will go to the success alert function and ah, look out for show mentored so it doesn't find it, okay, doesn't find it, so it will go to the prototype. But then we said the prototype of the success alert to the prototype of delight, right? That essentially meant it will come back and search the alert from gender and it find the show mentored the ones that fine dish dramaturg it will in work the show mentored and within the show, mentor the context. This will point to the instance off the success Alert Bluff. And that's how this poor types inheritances kind off working with. So from a kind of perspective, you can think themselves this trait you have, ah, success alert. You have, ah, alert and that it's ah for your type. So this alert border type is pointing here and the success of the exporter techniques Also me blunt idea. But this is for the dissolution happened. First arbitration, it will have been treating the class on which a matter this invoke, then it'll go toe the got your type and try to resolve it. In case the method is not found in the prototype, it will goto alert, stored or tie plate, which is subject again and it will try to look for that Minton in this sport protect If the mental dis phoned, it is involved. If the matter is not phone, it will throw an error. And to be more clear on how this broader dominated is working with our success class. I'll give you an actual implementation party. Right? So we have this success alert function here, and then we have this alert function here it and then this alert Tessa torte. Okay, The success alert. We are setting the success alerts for good tape, okay? And we are cloning. You seemed object dot Create in passing in the alert dot prototype You were actually copying everything from the port or tape of the alert into the prototype of the success of it. This is so the entire copy is being made available from here to here. Now, let's take a look at the code and observe wanting in here. So we have this alert class. We also created the success alert class and inside the success of that. Plus, the first thing that we do is calling the constructive functionality based classic is alert . And then we said photo type of the success alert close to the copy of the prototype from the relentless. Now, at this point in time, if I tried to log in a controlled art log and say I tried to log in, the constructor gave it his success. Start, constructor, Observe that what you get in the success toward constructor it a constructor of the alert function. Right? But it is. This is not what is intended. This is happening in here because we actually kind of created a clone of the And they're alert dot photo type which also include the constructor. In this case, after you create this object that create and you ascend or reset the prototype of this Exeter alert, the constructor also got change, right? But what we wanted the constructor Toby the setback. We don't wonder Constructor of the success Alert Toby Allergic. What we want is we have to. They said the constructor back. If you don't do this, you will actually find interview institution where replication is kind of not behaving as you kind of expect. Right? So how can you kind of rates at the constructor? We could simply say success alert dot photo type dog conflict er if equal to success a look . So once you do this now, the in a legend, constructor was the alert function when to put in this lane off court and clearly controlled and run the application you will see now the constructor is correctly pointing to the success alert class but these are the kind off steps that is required to make inheritance work with year 65 Nadia. Six. Prettiest fight. Now let's see how Americans work with Year six. Select Creator Success Alert Class In year six when the Essex we can create a class called Success Alert, we can use Texans keyword and ah usedto alert Delta Second Calumet area. So what we're doing here is you're saying that the success class should inherit or extend from the alert Plus on This is the only step required to inherit in Yes, six. No more mess, no more prototype taking normal, consider from chain ticking. Right. So this success alert class or the direct plus can have its own constructor which can have a title and ah, inside this, you can initial s it. So I'll just put control dot Log, I said could distort type toe success. Now, one thing to note here is right. So if you observe the yes vice in tax So when you call the success alert constructive function, you are first calling the constructor of the parent alert notices record. Right? So that the correct initially they should happen now in yes, why you had to call the ah constructor. Using the alert dot call mattered and he s six. You could simply kind off used a super mattered in passenger parameter. The super mentored will call the constructor of the parent last. So in this case, the alert loss. It's at this point in time when you clear it and I can come back to the control and create a new say object called Success alert. And I could call the method called Show On This Success alert and you get output coming out . And here it So let's see what this show is not coming ashore. Metalist Logging their title India get the start title, right? So success alert extents toe I looked less and ah, we're passing successes the parameter to the success alert We're calling super off Titan. So pro cattle. Sure, gardenia. Once I clear it out, you could success Macedonia some ah issue with refreshing the screen. So inheritance as it's as simple as extending the class in the Essex 10. Override methods: Now let's see how toe over read the methods of the base class and also kind of see how toe call the matters of the based last under better place. You think? Yes, I n your six. Let's begin with. Yes, five first. So we in the US where the alert class. We have a mattered call to sling. Now, synthesis on the prototype. This two things mattered could be involved from any off that derived class off the alert. So in this case, I only have a success. Alert message. For example, Suppose you all took They had one more last called say failure alert. Okay, that can also have the toasting matter delivered. Right. So let's kind off very quickly. Creator Fellow Alert last just to demonstrate this. So what I'll do is I'll copy this entire success alert function and ah, best it here. I'll call it does say failure alert can rename the things here. This is really alert. This is surely one look. It was fairly well. Look, this is Phil Kessel. Know what really desiccated. One more. Or consider function called bolo alert, which is kind of deriving from the alert and the same strip is kind of being followed. The prototype is big set and the constructor is being reset. So I could use this material writes I could create a mature ah variable called say failure . They called the new failure alert. Ever fading data, Maybe some method I will pass. Okay, Once I have this, I could call failure dot show maybe. And also kind of failed your daughter to think because I think we're kind of working. Right. So when I write it together, you could demonstrate here saving data. And also the correct one story is being kind off called. Okay, So this success alert is coming from the constructed off contractor looking that we had been earlier kind of hearing from here for the future. So now this failure alert doesn't have a Tofino assume for a moment that right, we need toe a right. The failure alert federal toasting matter so that we can custom made them. I said that is being sure near So at this point in time, you simply at the message. Like what? We're showing areas alert and the title it so us getting alert. And the Stayton let me click one more time they'll ordered to strengthen. So the failure orderto string will output alert and title Is this not coming immediately? Verify Show is showing you the collect later. Can't let's check with their any arrest. There are not in the console. Europe Run the application. Okay, It's kind off working and in the does string mattered. I just put some more information just so that I can say this is coming from the twisting. Okay, it's actually working. We have to log it outside. I'll put console, not lock. They lure dot Just ring tickly Condron. And look at the what party right now is in for a moment that we had to custom at this message of toe strain. That case, what we can do is we can go toe though. Failure alert constrictor function look and kind off already prototype of this. So maybe some very erect I could say feller alert dot So torte Bdart toasting. Now we're really finding the two string again lotion and I can give a new implementation here. So what I'll do with the two string here is in the failure thing first. Now this is this depends on requirement, right? What I want If I never Someone called the toasting maternal failure alert. Close. Maybe the first thing I need to do is to call the to spring on my base. Classic. What? I can do it. I could say my base classes alert so you can go to the boto tape off. My baseless Calder toasting mattered. Lucinda call mattered called function and person. This is the context additional called the toasting maternal alert class. Pity the base class and the result will be stored in the reserves variable in case they quite do this in case not required. Don't you don't the state this kind of shows that we can customize all over there in the ocean method here and then finally elegant something from this two things mattered. So you near. What I'll do is I write a little. It returned the old result rate, which is from the parent plus And then I also put in a new value called the start type. Okay, I'm deciding it Here. This start type are in tow. If I go to the failures photo type here. Right, So this is your type is set to success. Let's change it to failure so that this will get clogged whenever we called to string mature. No, this is when we took call. The parent mattered from the derive class. I'd say the direct class or the right function. Our concept of function is fellow alert and from the fellow alert we're calling a toasting mattered Under alerts prototype The effect of the soul can click on run. You'll see the output getting here correctly. It's to alert. Send it off type Say you already know that this is coming from the fellow Alert to string mattered And this is coming from the dosimeter of the electrolysis This is how you over right now methods of the lid off the parentless No, does not see how toe what are Demeter, Do you think that year six class notation. So in the year six I can create a or the right plus very deliberate. So let's copy this success alert close and paste it here I'll call it Okay, let's rename things Xenia and change the type two failure and you're done with that. This is the way to creator there. Plus any a +68 Let's override the string method also called for the implementation of the twisting from the yes, Lying Go back in here again to implement art ordered the toasting mattered. I could simply give the matter name here, okay? And I could this returned of little value. The difference here is So when I called her to sing matter right, I could make it work this thing. But then he had ensured off. You think this column it'll read like what, Simply say, super dot hosting the super points to the parent classic this. Actually, we also learn from the constructor definition Here, man, you created the constructor and called the concept of the two permitted to here. We're calling that two things mattered under super class. You know, I'll save this and, ah, let's go back and copy the implementation court from the yes thing. And let's put it in your six year the same thing. Like so we have a federal alert created, we call the show mattered. And finally we called the failure dot to shrink. So I clear this and play Condron and you get the same old food. So doing this in years six is kind of petty. Is he right? And ready? Red ever less one. So we just heard toe implementing better. Now this typically works it right in both away in both es y as the last year six. So when you call the failure dot toasting range the first object that is checked for this toasting mentally the failure alert. Okay, so it will go to the failure. Alert it, find the toasting internally. Since you were called Super earlier, it called the parent mattered one day, elect plus and then incidents back here if you look at for the same thing success rate. So if I come back in here and call it a success, start toasting. And if I look at the output, you will still see the message here, right? Some very estimated will come out in year. When, when you call the toasting on the sexual seller class right, it goes to the success alert class. It will find that there is no method calls to spring in here. Then it will actually go to the pattern class within the prototype chain, and it will find that toasting Medea and it'll involve dismantled This two thing that that was not here, it would have, Tony recalled. matter, not fund attempting would have a plan for the yes play Constructive from Genesis. So I hope this makes it clear how to kind of create over right the matter tender direct plus. 11. Static methods: The final topic for this episode today is to see how static Method works with both yesterday as the last 50 years. Six. Let's first kind of go back to the he s record and let's create a static model here. Yes, I kind of created a static mitt earlier. Now, the static method are directly assigned to the class again, not toe the prototype or toe the instance of the class. So here I created a method called create alert on the alert Alert Construct a function directly which takes a type and a title. Okay, which takes up day Pender title, then inside this this is like a factory medal for us. We're using us, which are gay statement. So we're checking whether that eyepiece success. So if the type of success we are returning a new instance off a success other class with the required perimeter, the type is a failure. We are returning a new instance off a failure alert glass passing in the title. And if none of this matters, we are returning the default alert with the perimeter title. This is the way you create static mentoring. Yes, like the same things that play for years successful, but with some further optimization that will happen in future. The list. So how can I use this? Create a lot, right? The one thing to note here is that this this created ourselves as a factory mentor because it you speck a new instance offer derived. Last, right. So when we're creating objects in your directly right, you're seeing new keeper directly. It's not kind of for the commander practice, because it creates a kind of tight coupling with within the application, Right. So in future, if you need to make a dynamic or maybe unit to create classes based on some perimeter, there are a lot off court in your that you need to do if you correctly used the new key word. Well, since we have this stack lamented Creator, instead of using the new directly, I can start your thing there documented. So I'll come back in here and maybe for no I comment or the entire court Okay, I'll create a new success. Nottage, by using, I look not create alert passing successes, that type and I'm a figure eight. So maybe data submitted successfully. Good. Then I could call success not show and maybe even control Daughter law. Sex Good, Disgusting. And everything should work as expected When I clear this out the contra and you get the output correctly. Okay, so center spelling mistake and it should be consoled. Similarly, if I want, I can create an intense offer Tailor a message. So failure equal dollar create alert button failure as the type. And maybe I could Oh, give some message, addict during trying something like this. And then I could typing failure Dirk show. And then Taylor got toasting. So this create other Tissa factory function for me when I can pass in a tape and some message and it will give me the correct instance off their derived class given in click unclear and run again, you get both the messages coming out correctly. Okay, so this is the Yusof static methods and this history it is just in years The same thing also worked with the U. S. Successor. No, let's Ah you the same thing in the s successful, so I can copy this static method from here in the US by section Goto the year 16 year and then just outside the select lis I can create a static mitt. Exact thing will work here on the alert. We're creating a static method. Then I can use my ah application court from here from the years We'll just copy the court from here. They come back to my successor reckless. And I can come in this out existing court and put in the new code the same thing. Nothing. Nothing has changed in here a condom and everything seems to be working correctly. So for this static method, it's same whether you're UCs lie. Yes, six kind of dignity. But then within a year, six Okay, there are some new changes coming up. For example, maybe into each of original fee. Essex, you can directly create a static monitored in the class like this static, say maybe something like maybe create alert. They could do function. So this feel working future bridge in off year six. In case you plan to use this kind of syntax. The current version off Year six, you can use the Babel clasp a lot here. So this paper, less already this feature kind of think. But naturally, brothers are not implementing this police maker. No talk. This 20 year six, you can create Ah, static metal directly within the plot itself. Okay, but until all the brothers supports this, you have to use the people Trance pilot, in case you don't want to. Utah transponder. And ah, what would native about this upper directly? You can just use the old way of creating a static method. This is work. This is the conclusion for this session off getting programming. You think JavaScript using yes, fly as the less Year six. I hope this make the concept very clear. And in future episodes, we will kind off expand on this and will some application. You think object oriented programming and see how this things can be applied to be a world use cases. 10 credit much. There are some new changes coming up so we can directly create the static mattered er in year six. Using syntax like this, for example, say static create alert are too. Maybe And then you can write the code in here Now, this may not work. Oh, in all the posers. But then you can use the Babel transpire. Lorraine here. Okay. And you can actually convert the court from a yes six later switching into? Yes. Like in case you're kind off planning toe. Use some features which are not supported by all the brothers are Please feel free to use. Baber transpired lor in the development mode and once it is compel, you get the he s fight combat compatible. Good, which actually worked for most of the modern roses, has a little problem assessment. 12. Todo App: Code a simple Todo App: Hello, everyone. This is modest, really Again here with a smaller total application. So in this episode, we will build a simple toto application wherein we can have some to avoidance remove items . And Margaret would wait and says Completed using nothing. But we are JavaScript no react Know Jaco t know angular. This is the first version of the application, and I actually keep some open points so that I can post this as an assignment. All of us were interested in interning building this application. Now let's have a look. Look at how this application will look in its final home. So when when you open up the index sort extremophiles, you really be presented with a simple input box and the left total of items, I could come back in here and create some to room click on that photo is created. Can everyone existing Toto? They are not all market told us completed. They cannot turn do my changes. This is what the application will look like in the past. Face, it's begin bay building up the full A structure for of application. So what I don't need had created a fuller called you ask it to do Basic in my Windows Explorer folder. You can name it whatever you want. Once you do this, open this for learning your favorite text editor. This case I'm using me a score trusting nor do is to create and basically structure it in this and create, uh, for look called nap. Create one more full of Carla's thesis. This should be sent the just drag it and up with you don't say. Okay, so our main fairway beast would within death older the CSS for this story application will be stored within the CSS folder and they will talk the a 10 index dot html. So what? I don't know. This I love and a copy Dutch demon and explain you the basic market that will be using I don't want to write this extreme away from scratch. That will reduce this. I saw the red us that. So here is Tashima. The entire estimate for total application. All right, now, we haven't created this to do that. Yes, but we haven't created this i dot Js file as well, but we were created shortly. But before we do that, how? Let's have a good look at this monk up. So we have a dog type, which is, uh, said twitched. Huma, you have a head back had there? Francis, sir. So does the assistant, which will be shortly creating. We're not using any specific CSS framework for this will be writing about are we will be just tryingto sample theaters failed for this application created from scratch. So we have a container do within the container. We have a deal with the class offer. We have ah h two with the class of two to weather The simple to do I am recitative having a tree with a message. Or do I want to do today? And I have one more off information here. The contents of form which has an input with an idea off to do a type of text, the place all that off my toe. We have a Burton with the type off button with a text off had to do. And when we click on the button, we actually call a method. I told you on the to do object we haven't yet created this. Told where objected that will be created in the to go dark side, all the list or told us we were entered within this tree. Grow together. We haven't an orderly stock items that a 90 off dodos and dynamically will lead to do list . In here is a list object. This is what the structural I look like. I will be uploading the simple Goto Better for your reference. Now let's go back and put in the CSS Filia. So what? In the fuses folded, I lightly can create a new file call. It s side dot CS is we'll probably diseases in here. Okay, let's quickly go to the C axis. So we have some default styling for the body. Yeah, and then we have a plus named container which uses a display of flex. So all the modern bugs that should support it. We said the flag direction to call him. We had the alignment of center and we had a background color. Then we have a dodo herder styling here with a bit of 100% in the textile line to center. I haven't yet told that Oh, but if we to style, it has required and we have a totally subject sailing in here. So every toe this list object will have a border with the parenting intern, background color and every element within the to do list. We'll have a parting left set to zero in the modern, out of conviction so that no other told Louis Marcus completed will set aside decoration tow line through this will actually can restrict through windows uh, effect on your element. And then couple of Morsi s is in here. So this is whatever fantasy ASUs looks like Weather, Total application? Yes, Cold. Stroll through it slowly so that you can person gain this in your side dot CSS file. Yes, he did. This had a basic thing that is required for this application to work. Were took it one more up. Morkel called Toto don't yet that will actually contain all the logic for this to the application. So let's go back to AB folder actually can create a new file called esto dough dot Js. So, at this point in time, even if I don't write any chord, I can open this application in my brother and we should see some sample input onto the screen. Okay, so let's kind off go back to a replication. So I actually got to write folder here. So I'm actually directly opening my father in my chrome, going to tell you to full left. Good luck. You ask it to do basic. Fuller and I opened the index dot html file. You see some basic input that we're seeing wanted under the screen in here at the chase for the application with looked like Now we have to kind of put in the court in the total garage s right to make it work. Yes, let's go back and really with the court. Could be if I go back to me in exile. The important thing here is if you look it, we only have one acceptable item Eagle Call button on the click off its we're calling a method to do under Toto object. Now we have to start building this Toto object. This total app object will actually be conducted upper for all the fun charity that we need . It's always a good practice to segregate your court according to different responsibilities for here. I'm actually kind off keeping Mr Tickets to, in the no doubt extremely file and all the dynamic you and that will be creating. We'll put that in a photo dot just fine. So let's go. Totally right. Yes. Then now here I greeted some sample later for our application. They call this estate. Don't conferred this to react and get your come near with react. I'm just kind off using the same naming convention within the state. Now the state can contain not off objects. In our case, we literally tore the list of Trudeau's. So we have three total. That idea now each other. To do that, you'll see, hasn't really It's a mosque and a status that it has conducted to true that it was convicted to fall. One thing to note really is we're not actually building us over this point in time. So all the holders will be stored within this state. Not so does today. And we electrically will not use a pope woman logic to create dead. Yes, So we're not worried about unique. It's at this point in time, we had the basic thing ready near. You know, one thing that I do is I need to be able to get access toe these two objects. One is this input element that the richest at too low button so that I can track events on this. So can I go back to the court and create couple of variables here? So far to go, Input is equal to document dot Get women by a D and C total. Okay, Infertile do Listen, I'll see what I do listed. Melco Bachmann dot Get element by I d Do this. Guess what? No, if you look at our naming convention here, so they input has an idea off Lulu and you will that we created Had an idea off photos yesterday Said that the object that we're referencing in the does your plane One more thing . I do know that if you look at the button on click, we are actually calling a at Dodoma Toner told where? Okay, so let's clear the photo app object. This is a simple object little notation for creating a singleton object But this we contain a method called at total Have you nothing of function So at this point kind of we're good to go So if I do If I write in an alert here Hi. You know, if a go back with the application, do it a fresh and typing something you will see a hard coded alert coming up called high. Okay, so even handle is coming correctly connected. Now, what we had to do so I never weekly conduct. Or do we have to kind of take whatever the user types team and update the state at it so that we can get the list of all the totals being this predator bottom fan here, this is going to know that, partner. So remove this alert now. So the similar dad to the function, the first thing I'll do is and see tatter before doing that. So let's do one thing in here. We already have. Ah, hard coded lifter. Toto CIA. Right. Let's render this to doing toe the onto the screen so that we can see this light and being rendered. And then we can add the attempts into the behavior. So what I can do for that is I'll create a metal coalesce render here, and it is nothing but the function. Okay? We have to build esteem and directly, so I'll create a variable. Now you think elect, let keyword here. Now there's a different between the where and the letter. I'm not going into detail of doctors in this indecision. The thing to remember this let has a block scope where that aware that we create is actually belonged to the function school. Okay, we covered this in more detail. It So we get a nest. Amillia. So whatever they will say it stayed dark. Toto got lend. If it's zero, I get it in. There are no Toto's guess what I'll do is sell. See, I have to kind off update my user interface so that I can give a message like Noto Lucius, No totals yet A place creating two or something like that we can do in here? I guess so Let's do that part now. So many say whenever we have this so no does we will se todo list dot in knowledge Tiemann equal toe No to lose yet be awesome and create some totals. So, ideally, what should happen long? This if he called her in the function And if there are no totals, which would see a message Notaro see it blah, blah, blah. Ok, now, one thing to note here is we are actually not in moving. This went under constant at any point in time. So initially, without application starts. So this index or this demon lord's up the absolute total. Gorgeously so. Initially, we had to do it one time and telling you can see Don't do it. Render the full poser rendered weapon and say this and go back. Handover fresh. You're staying on getting that output That's open the console and check with Iranian early There are not so there are no others yet. So let's kind of trouble should this that this is not happening here. So what I'm doing it is on the page Lords in here. So we're actually calling a matter called todo app not render so. And Richard called this and ERM Attard and then in limited, What we're doing is you're saying go list. Not interested in Mali, Quito, something and then Britain also it's not required. Technically, no. Let's put on alert here. Alert state. I say this and, uh, the other fresh. Okay, this is still not working. Kind off. Yes. Let me quickly verify this. Well, we have the total where we are calling the under function. That's it exactly coming out in here. Elect, I I feel this. You go back door depression. We're getting color tie. Okay? Yeah, that's create actually here. In fact, they removed and, um, kind off, Uh, when Totally some more than the religious. Not empty. And the reason it's going on going inside this elect, It was kind of silly. Mystic. Yes. I'll say this information for No, no, no, we have a provision. Very. Actually, we cant you an empty some messages in Gaidano Trudeau's Okay, but let's display all these students from the area into while you the interface don't know what we can do. You can see there a couple of things you may remember when we were trained off in the demo application. There are some dynamic text that we beach one minute could with complete all in the north complete state. Okay, so we create some variables for that, I will say. But then text complete, maybe so clear. But then on go. They don't know this potentially but and I'm a click. Created initially it is empty. Then every theater, the lead Britain became not just still it, but actually we're using the Year six template notation, so I'll use the back tick so that we can actually put this stem markup in multiple lines and then I don't believe Britain code. Sure. You having a button off Caperton? The class off for 10? The texture off, okay. And I'm conflict off. This person were actually calling that total have got remote Toto and passing in this context, this actually will point to the studio app. Okay, at this point in time, we have We haven't implemented. Doesn't Moto do, But we will implement it shortly. Okay, so we have the basic things ready at this point in time, we have to look through. All the studios can create a list item for every Toto in this list so I can come back in here and looked through all the photos. Let I equals toe hero. I left them state guard toe. Do start length. I bliss bliss. Okay, so this is where we will write the loop to render all the to do items on the ST dot dodo's eso We create couple of variables inside this loop. Requesting that we do is we get the first item from the array and put that into their total variable. We in its place that old white, um style which will be late or not we actually also creator, but on a noted oh text buddy privileges in its last winter complete as a text. Then they will say if dodo dot status status can But ruffles is true So we will certain style in here. What they're saying is that the total status is true. That is the truth in the completed state. Okay, we're setting the items today toe to toe hyphen completed on this class will likely point toe towed away from completed class, which is kind of given here, So this is actually connected. Okay, then we also said so if it is completed, we actually said the buttons take to undo If it is not completed, the but in text will be complete. It's very toggle between Ondo Incomplete. Kind off now. We had to create a button. Mitchell, actually. And in this text, I guess I hear electorally docs six template notation. So this is not a single good. This is a back kick. Okay, so let's put us back. Dick phoned near escape key on most keyboards. Okay, So what you're creating here this Obertan and on click of the button, we called todo app dot travel photos and us in this this will point toe it will go ornamented called Pragelato, which we haven't yet implemented. And the text were actually adding it here dynamically. So when we're using the acting in the year six template little we can use dollars saying And within the curly braces we can pass a variable. So this variable that we created a disk would later be complete. Orlando, depending Wonder toto dot status. Yes, that that valuable people today And this is much better than doing string concatenation. So without the year six syntax, you will do something like this. Yes, this kind of concatenation you had to do. Okay, I just try more from your decision and under example kind off. So now we have the button which will be having this undo our complete tester text. I cannot finally be able to build up the edge to Yemen I put in the court rather than typing into say sometime. So again we are using the back pick here so that we can use this template little kind of thing in here. So what we're doing here is so this as we look to right? So there are three items? No. So we had to create three. Ally. So we already have the search team A were able initiatives to empty within the loop. We are adding toe this estimate element. So we're creating an ally for every element. So everything I do is equal to dollar Curly open galley close to daughter. Ready? So this toad authority anyway, point to this first element under twisted first generation. The second iteration of the look, This little bit of a second to do and vessel. Okay, then he said that last two todo item style which is created in here. Okay, Then we also put in the dodo title or test our task here, which is actually coming from this this task. Okay. And we also put in the Ondo Burton as Celesta delete better, which we created identities on No Burton in this is the believe Britain. Finally, once we are done with this, we have to add the sustainable toe over total list. Totally start in a esteem. Municipal toe HTM it. Okay, so at this point in time, we should actually get all our total items rendered onto the screen. So I'll go back to the brother. And the first my pitch you habitable to the application being displayed and also the status correctly abducted, desperate so that the state is completed. A citizen's completed Our true you see this undoes coming here at the vacuity, the complete text coming. And in fact we condition thing will happen because we have to implement that double todas method. We have to implement the remote odometer. We are implemented at the Dementor. That's what we will be doing now. Let's start with that. I told a function the first thing that we do is take the input from the U. S or dodo input daughter value. So if you remember, we had this Toto input give it to you Nothing but the form in good that we had here. Okay, so we put that into a very well called dodo and repeat a newt toe Do missing object. Little syntax notation for novel you terribly s ST dot dodo start lent plus one. This is a very good way to create Daddy in the whole case. This short come from the date of it can we will let we re election. The fact that this in next tradition on the photo. So that task is nothing but the dodo that we stored in the variable and ready for men. You created neutral that it that it said to false. So we have the new Toto object creator. We had to update our states at ST dot does No. It's a good, generally good practice. You should never mutate our state object treatment which would not directly change any object that we have it in a replication. But this idea has been propagated by the reactor ducks and also an angle Anomaly said. So we'll try to stick to the best practice and we won't do something like this. We don't do this, but this will work in this application. Okay, But again, this is not the best practice because we are muted in the state. And that could be some possible debugging double shooting issues. Aziz, this application scary sold. So this way. But I'll just quickly show you you see this thing, Okay? One more thing is that whenever we had a total a better total, we have to call the distort under function it that this points to tow the web and told weaponry function will look through all the photos and under it were to call them render function. Yet he saved this. Go back, do it a fresh. So will this work click on that? Yeah, it's looking so well. This this gets added here. Okay, let's actually do it in the right way. Now, as I said, this works. But then it's better to use the year six notation now to add this Elsie ST dot So do sea Quito We will do the Jozic de structuring operator will say dot, dot, dot State dark photos that this is the existing state Whatever told was there so I had the liftoff three Toto's right So all these three told us will be spreading this Saturday And then finally we will add of a new to do as a last element off the area. Okay, let's see this in action than Alec Lindus in digital. I'll say this information. Go back door refresh. I can add something here. You can enter dough and you see the relegating print radio. So what exactly is happening with this de structuring? Yes, Let's take over the good moment in you and I understand this. So what? We're doing is we're saying, OK, take every element. Take every element from ST dot or does and spread. Spread it here, get that. Such that tryingto take a real mental What may happen in this. So in this abbey. So first order will be coming out here. Okay. And then second totally becoming out here then third total will be coming out here. And then finally, our new total will be added here. So this is like this happening with this districting operator, I guess. You know, we ever working application were in weekend at the photos, let's know, implement the motel room entered. So we had that toe, the other implemented and that's implement removed Tournament of the year. The removed will be taken element Good element on Rita. Click happened so that we can actually get died from here If you look at the mark, appear Okay. So here we have a form we ever you will on this. You will instead This you will. We're creating dynamically stadiums. I guess if you look at the list items here so it really system at this button village. When you click on this button delayed, we actually have to goto the parent and lie and get this I d Once you get this, I d. We can actually remove this. And men from the state Toto's away. Get that This is kind of important to understanding here. So when I click happens on the button, delete. Now click happens. We go to the parent, the parent of this Ah specific child. But anus this away. Can we go to this party, get this I d and then removed from the area? Yes, that is what we have to do. Kind off. Okay, so let's go back to a functional. So we had this element being bussed, so I'll just show you again. So yeah. So if you look at this button, you know, when we sent Toto Abdullah remote Odo if yes. So let's come back in here again. Just a collection. Tell me here this level point with the button, Okay. And not, uh, that my amp yes, We'll come back here engulfing. Let dodo, Heidi Equal toe element dot president nor dot i d this looking meat. I d the one. Take it dearly. I will map through all my toes. Okay, So once I got Daddy so I so this very briefly terminated Because map will return all the elements of your toe filter it. And with in the future we will say that 10 toe daughter I d not equipped to So do ready. So what will happen with this? Is it return you all the elements except the Taliban that were deleting it is his right What I will do well, actually look at the map from schnitzel Neapolitan, actually. Ah, all the element in the area with the modifications for trouble Actually committing literary is all Israeli made from the area. In this case, since we have a moving and attempt to you, stuff is limited And finally, one figured this new list will update our state. We're simply saying co pay it back and then here to see you have dot Endeavour courtesy this start Brenda. So know what we're doing in the motor odometer? We're getting the 80 from the pattern note we looked through by using the filter and we're only returning those element whether it doesn't match with the told you already that escalating when ticket this new Eri we are starting the tyrant overstayed your toes and then we're calling the. They start under matter. Linda will look for all the state or toward a subject, and then it will get to you. So come back in here to worry fresh. If I said remove that item is kind of removed. Know if there are no items in the center, you get the message Noto does. Yet we are some in. Create some totals. Let's add some dodo. Hello. So we can add in the little Toto. My step that we will do is to implement the toppling that order that Desmond, if you can't, is complete, this certain amount is completed. Okay, I'll go toes function that takes a militant get almost similares. I'll say, get the code already by element are pattern. No, not really. Okay, so let's use the map from Kenya. You're too dumb. Math from junior. Okay, now what murder do is so if the status is true, we had to suggest it is to false. So we looked at all the photos for every Trudeau's electrolytic deriding and check whether the I demand just with the two ready, we came the status to tow this dot skaters. I guess it just it just It's true. Presented to falls and the fair justice false We decided to true and then returned object. Nothing with the map is if there are three element in port we get all the three output as well get only different being well, it in there. But we could change the state. We could change some other parameters as required. Just take a look at the trouble to this matter again So looked through all the photos you died Imagine if it I d that we're talking Change the state If it is true, make it false. If it is, we'll make it through this. After this loop is executed, a new era will be stored in the Troodos variable here then fee the comma here So want to get that Trudeau's variable? We have to update the state just as the way we do earlier. And then we will say this thought. Brenda, Given this, we complete the double door Open Knesset Realistically go to it again. Good dirty looked with photos is in the map function But every toe check my diary My chest with the to do that you are troubling picking dictators. If it is true. Make it false. It But is forced naked truth pretender to do when the slope is completed, a new and they will be stored with NATO does. And then we copy this every back to overstate and then called the under maternal over object. Okay, so let's go back here. Do it a fresh Notley condo. See, when you click on undo that texting just to complete and the land is removed. No bacon complete, actually. Mark that. Ask us True. Okay. Can remove the Toto can at the photo so much we can do all the operations with this to the application. Now we kind of saw in the small episode how to how we can actually very quickly creator Simple, clear rate update. We have your temperament update in this episode, but the lettuce implementer okay in a very cook manner without using an external library stick. But is there any other things like that? We can make this court much better. And we can also kind of indigo discord with the bill system like rep Eric or gulp and then add additional pictures to the application as well. Okay, that's it for this episode, I hope this is kind of interesting. And a lot of Shannon exercises access is so that you can try out a couple off changes in this application and so that you can actually gain better understanding of what we're trying to develop. Thank you. 13. Todo App: Refactor the code and add edit todo feature: I will come back. And this is legit. Chevrolet with yet another episode of grilling Total application that JavaScript in this episode we will the fact that the total application and give it some structure and also improve the performance off our application for optimizing the to do items rendering first . Let's I didn't ever some of the problem with the current application. One of the big problem is the entire application is contained within this single file called Toto Dodgers. And also that data are the state. It's mixed with application logic. So what we need is we need to segregate this into separate file so that we can his element and application gather part off. The problem with this application is whenever we added to the weight, um, we're calling the Render mentored. Whenever we remove one item from the to do, we are again calling the and the Method. Now this sentimental, this kind off, looping through all the photos and recreating the list again. And this is kind of not good from performance perspective, because I assume you have told himself agents in the total list. Adding one item to the list renders the entire item on the page, which could take up sometime, depending on the spirit of the application and about the rest. Well, kind off this other things that we will look to mice and in the process it also gives them structure. And the fact that this according to multiple files, let's let's see this application in action application will look exactly like the previous , apart from some new modifications to it. So we can add a to do. Okay, we can market told us complete we can undo the complete staters. So when I could added this to do by double clicking on the Toto, if I need to cancel their that, I can press the escape Britain. If I need to change my at it, I could pretty enter Britain. Well, if I wish I could remote or do so in a sense, we will complete entire create, read, update and delete. Typically, we call it a skirt operation on this total list and also do the required reflecting. The first thing that I will do is to move the state information into us operate file and that also move all the operation that deals with the state like create read Update. Undulating toe. Separate file. We'll call that by less to do service starts Jays. So let's create a file called Toto Serviced RTs So we'll go to the APP folder. I'll right click and create a new fuller. You can call this whole address So everything is now inside this folder. I'll create a new file called to Do You Can name. This has to do service to do hyphens resort toe daughter bristle qualities todo dot So we start gifts. So this is that, although state information and our action on discredited legal, the benefit of this approach is in case now Manimal Wayne demand a server part of this total application, they say the only place we have to make the change right now we only working with storing the state information on the brother or a line site. Let's also the furthest Odo daughter with dot Js file in our index start html so that we don't get any service loader. I'll say this line. I go back to buy brothers on and do what? The Lord. Just to ensure that all my parents are loaded correctly open my neighboring window, you good. Then it worked up and reload the brother. Now you will see that that'll do services correctly loaded Even though it is empty at this point, we are sure that it will work as and when we had more court. So this file open up the dodo service Js fail And the first thing that we will do here is to more was state information from the to do projects well into service a total Silvestre Js file Can the one thing you love the here that apart from the i d the task the status I also added the addict property toe this We will use this a date property to handle the at it Toto aerating kind off for that whenever you double click conduct Oh, do it will go into the right mood And whenever you press escape out and turkey, it will actually reset back to the display mode that the Fed is that it is there we will have their and their logic for the studios are everything to an object So creator variable called toto service And within this all the functions for dealing with this to do like create, read, update delete everything will be going into this. You know, that is kind of a very good obstruction, because we can easily adapt this later on. The show is to sort this information into a database if required. So the first thing that we will implement is the get all mattered. The cattle mattered will return all the photos from the store. In this case, we have this tree are to continue. Okay, so when you connect with the bag and later on, we'll actually make an index call and get this information from the back. And so we have a little function that returns all the to do from the steak object. This is as simple as this. Kill Assad. One more matter too. Add the to do. Okay, So the actor, no matter takes a new to do object. Okay, get a science. A 90 now. In this case, what we're doing is we are taking the length of the Tulou ending, lamenting it by one. This is not kind off a good practice to create Eddie. Not a good practice to create Heidi. OK, but this will work for no later on this idea generation will happen from the so once I get the new to do. I ascended and ready, and then I had this. Don't go back to our state so we'll say ST dot So does equal toe we're using in the year six de structuring notation. So what we mean by this is take all the existing to do and spread it here and upend a new to do at the end of the day, Let's know, implement of death to do, um, entered. So here we have the update to do method case That update to do matter takes her to do I d and new to do value. The first thing that we will do is to use the to do service and find the existing to Dubai . Heidi, remember, we haven't yet implement and find toe do matter, but we will implement it shortly. So find Toto will take a two to Andy and attended to do back to one. Take it that to do back we will modified the task value to the new value that is being passed from this method. In this case, we are mutating the state. This is not the kind off good practice. OK, but then we will kind of keep it for now and then come back to it later Point in time. It is a so purposeful now, after this, we helped implement up find Toto Method again Find to do is kind off. Very simple and not not that much complicated kind of thing. The fine total mattered takes a to do highly It then looks through all the state door toes . And you said the fine method and every two way to Miss Pasto this inner arrow function and what we're doing is we're only returning the Toto that matches with the idea that is being passed. Okay, so if I pass to do ah say if I called it find to do from 10 with an idea of, say one electorally, get this entire object back. It is just like is happening in the find Toto. Okay, so this is how this two functions are connected? Let's know, implementer demo todo mattered now the remote odometer. It's all almost similar to like you're fine mattered, except we're using the freedom Attard in here so the remote odometer will take a total wedding. It will kind off filter all the photos, and ah, it will only written a list of all the to do that is not matching the idea that you are Pass Enya, Get a little statement is certain to do this To do dot i d is not a call to to do highly. So this is a very quickly to filter all the items except the one that you're passing. So I figured a new Ari off to do Now this filter matured will not mutate that state. It will give you a new area back. I want to get this new earlier you can awarded existing state like ST dot Toto's is equal to dr dot to do so. This will create a copy of this new object and assign it to ST dot tourists. OK, and you're done with that Kimoto method Now we will implement the doorbell. It mentored the local and it mattered will set the respective produce a date property to either true or false. So let's have a look at this toggle edit Mentored the talk. A letter addict Minter takes a total i d. The first thing that it does. You said the fine to room Attard too retired that'll do from our store And once we find that Trudeau will set the addict property toe, not tow dot at it. So what this will do is this stain will negate the property. So if total or edit is set to true, this will started to false and if so, dude towed out and it was false, it will set it to true. But this is a very quick way to stop the bullion value from true to false scent whatsoever . So we'll see this in action when we will connect this talk on a date with about a date functionality of the Toto and not let him commander last maternal for what service called toggle complete. The toggle complete will be responsible for changing the status of the to do from completed toe doctor. True or two falls. The let's have a look at this method. Yes, we have a top of complete materia that takes to do Eddie. We create a local variable called current Odo. Then we looked through all the produce within the map function. I remember the map function will not muted area. It will give you a new early again within the map function. What we're doing is We're looking through all the dodo. And if the tour does, Idema chested told already that we are passing from dysfunction the store that will go into a local variable so that we can turn it back. We change off the table that Odo status tow, not toe. Do stated. This is exactly like the not to do a retreat. The Intertoto skaters, his true this will become false. And if the state is his fault, this will become true and right within the map function you're returning the total want This map function is completed. You will get a new array off photos with the status being toggle for the respective to do. Once they get this new body, we will update the state back as usual, right? So that our stories updated. And then we will find a very tender Karen Total, which we actually found it here. Yes, it is as simple as that. And now we really modify our main toe. Do tortillas fail to use that to do so? Risk that we just created It's a rico, But put their toe daughters and do the cleanup will remove this state it because now this status more to to do service start Js again. So this is this is the thing that we kind of did to start with this modification. And now we have to modify this at to do the total toe does and the other matters for optimization as the less for using Those are read that we just created. Now let's begin by modifying that I had to row mattered to use over toe daughter this that we just created. Now if you remember, we already have a reference to the dodo daughter without us fell in our index start html five. That means then descended toward his temple Police loaded the dodo dodges a total of it suggests release noted First and this bill are the methods in this will be available toe to toe Dodgers fan as well. I guess I'll go back to the total failing here. And let's modify the had to do so. The first thing that will change here is that although import or the list with them in the same year, right? So we have this to do, which we are trying it from to ruin, put our values or nothing changes in here. We cannot This idea creation, right? Remember, now, if you go back to that service state when you pay it and you to lose the ideas no created in the service. So that essentially means we don't need this idea Creation in the year. No, I can't sell the motor and the creation from the new total. So that's the other thing. We love him in the same way, assigned the task and passing the new total value. And whenever a new to lose creator that the fall status is said to false and true love, adding the total directly in here, they will you start to do service. So do celery. Start at Toto and fastened the new. Okay, so this is what we have to No, I will say this file for no, right and no See what is happening here? No. So we get this new to do object. We are calling the ad to loom 1/3 of the total service and passing. And then you, Toto, they should go back to your total service tortillas at Taru, takes on your toe, do a Santa 90 and then abducts over state. Okay, so this is the team that we made one more thing. That we will not any restore. Right? See, we have this distorted and demeter it as a certain my earlier, uh, kind off a sessional earlier part of this video it So this daughter, under a needs to be optimized because when we're adding a new to do, we don't want the entire render Toby called. Okay, We just want only one item, Toby under toe May toe do list. So what I will do is we'll create a function called apparent element that will add this new to due to our existing on ordered list of items. Okay, So, Lexi, mood ists this stuff in Demeter from here, and they used the start happened element which we have to implement and path India new Goto kang and distort the happened element method. Looks like this. Okay, so what the pendulum in does is it takes two to do. It actually creates the HTML from this individual to wait. Um and then it happens to our to do list child element. Ok, now this uses a matter, call this start up artist email, and also it also you says I help limited call this start get item view. Get so we have to implement this to mattered. Seeinya, right? We have a look at this matter to less first implementer get item view mattered which takes enough to do. It's a real implement. A good datum Well mattered. No, this get item you monitored will actually represent this entire view. Descent, I view. Okay, because one Toto's simply means whatever this within this four look great. This is actually my one total. So this item has to be abstracted into a mattered called get item. Well, Castle, a kind off. Put the matter here, and then we will work through this. Okay, so we have a method called get item Bill. Okay, let's take a close look at this matter. It's almost like you're in, Demeter. That too, had in earlier it. Later on, we will kind of improvise on this unlimited. Okay, so if you take a look at this get item, you're it. So get item you takes a to do. Okay, so it's takes a told white and we can call it total or total item. Get an it actually build up your esteem. A the way that we did indolent number that exactly like did nothing new in your right. Do you have this button created? Your don't know. But in gated, you create a life for that specific total item. And then you also check if their toe do not. This is kind of a new Korea, right? So what you're doing here is by default. When you believe such Kimmel, you're building an ally with a simple next year. Get that. This is a decidedly fall dignity fair. It is not true. OK, but if additives said too true, this will typically happen when we double click on the total item. Okay, we'll see how this happens. Okay, so we are creating a new HTML again. So this estimate will be Warrenton in their Gitmo, and we're creating an ally again. But instead of rendering us simple label, we are entering an input. Yes, so that we can do that. It you're rendering an input and we are type setting the type to text, and we are setting the value toe to toe item. Does I tender tastic. So what? We're told, what time we here we are actually taking the value from it and putting it here you see in the year six. No, Titian OK? Because if you take this a back ticking near it. But up in the center thing within a tactic now with a couple of more things in the air. Right. So the one thing that top wr this whenever you heard in portrait So we said right, you can actually can tell the Include by President s Caperton Are your foot kind off confirmed the changes peppers in the interpretation. Right? So we are actually looking out for the on key our people even here. So whenever the on key up even happens, he will call the same total, perhaps on update Totem entered pass in the event a solider respective to do already you will see how this murderous implemented like let's take a close look at this again. So get out of use almost like you are in the matter with a couple of changes in your right . So first thing that you see here is the button that even called Toto Abduct. Remove it. I'm not This is Mary Move Britain were simply called of Emoto. Matured under told web And then we have this soul toggle button erect which feel actually called Otaru Abdullah on total Toto passing the instance off this as unless the toe duetto item being doubled. Okay, and then we're creating a todo list. If you are in the edit mode natured off, rendering a simple text here we are entering an input and then put us a key president. OK, which will take care off saving or cancelling this input. This is for you. Got that embryo Looks like. Okay, One more thing to note here is now this get item view this actually returns you and HTML Okay, dissidents when html Okay. And then we need to add this estimable toe. This to do list not to do list is a dorm element. We cannot directly add our upend and a text. You're Dom Element, right? So what we do, it will convert this html the desert and from this gator Tamu Okay. And we will do this process, Tiemann. It'll be Wester right format for depending it to over dominoes. Okay, we will take a close look at that process Temple file. Okay, So passage dimmable simply kind of take this string html and convert it into a node. Okay, Let's take a look at the past. Such demon method. So the process Timon takes a string, and it turns Saddam element. Right, So this start get items, you will return you in html for the total item, and then that is being passed to the past html five will, which will convert that to one node, which can be appended to their to do list. Right. So this process to Melissa very simple matter. We actually create an element off type template. And then we set the inestimable off the template toe the ex Tamil or the string that were passing. And then finally, we're returning the clone often. Word from the teetered contend are blown north and passing you Tessa True. Together the clone Nord matter Direct. It actually creates a copy off this node and right answer. Clone. Now, this clone note will copy all the attributes and the value. Now, if this has an extra Children, right, So passing this true with also clone all the descendants of the Children. If we pass, it s fault, it will not do the turning off the descendants straight. This is for the past. Estimates continues entirely doing not one more thing here it So in this process, team will be Are you seeing document or creative women and passing in a template that this template, IHSAA or the temperate element, is a new mechanism for holding client side content? OK, that is not to be rendered when the pages loaded, but then later on weekend, render this using Joe's secret. If I actually had created a DVR it and then kind off returned back and upended, it is immediately kind of rendered great. But I'm played this kind of a good place holder for it we're in. We can temporarily keep our content and then later on, do the necessary rendering. You can referred the model inet book more on this template element. So let's revisit the court again, right? So because we're it in a lot of Courtenay, right? So we are actually using a had to do matter here. We're modifying that whenever New Toe decided we actually involved the service and then called the event element method, the EPA and element matter takes the to do get stressed, he ambled past Esteem will get Saddam and then we upend their dog to the to do list And now this. Get items you is kind off your almost similar court Like your and the function. You abstracted most other things from this under function to render only one item. Right? So this get item you is to render one item from a list of item. Now, since you already know how to render one item using the get item view now, you can re factor the render mentored and remove all this cord can remove all discord from here. And then we can modify a with the new court that uses over get item you and then completed and telling off this function. Right? This is the kind off. Ah, new Courteney, Let me just correct assault. Okay, so see, this is a new render matter for this it's concise, is beautiful It so all the drink has been more toe get items. You so know what we're doing in the river matter? These exactly were starting an HTML to empty string. We get a list off. All the produce is in there to do service dog get all method right? Remember they got all method, the Gettleman irritants, all the photos. So once you get all the produce. We're checking whether there are any item or not. If there are no it something that to do, we just set a text court. Noto does yet it and it's written from it here. So if there are some totals, we looked through all the dodos. Okay, then we call to get item view for every tour. This is the beauty that we kind of abstracted this logic into a method called get item. You discuss your testimony back once you get the HTML here. Now, since we're doing an initial rendering great, I can directly take this esteem ill and set that to do list. Interesting animal back toe this string, this will do kind of fun. And this is kind of good for performance here because we're computing all the north or toe once and then ascending it here again. Get This is one of the fastest way to add it. Comes to the don't. Okay, so now you'll see how these three things are connected and how refectory Incanto create some kind of beautiful and concise court which kind of helps in maintaining and troubleshooting the application later, Andre, in case something is wrong with my indulge a late um, Now I know exactly where to look old for, which is to get item You mattered No, let's refectory were removed Todo mattered if you take a close look at the world removed to room literate from where it is called. So if you go back to our get items view you have this button which has this So click mattered on click You're calling that or Tuapse toe this to wear with nothing but this told Well, you're calling that total perhaps remote odometer. And you are passing this No, diesel actually point to the button here, which is element and also passing in that photo I d Toby promote. Okay, let's actually make this change into the remote, although mattered. No. So survey more total mattered as an element as Celesta. Good. Already. Okay, so now what? We can do it. We don't want all this tingling. We don't want to get the parent element because we already have the idea. We could simply say to do surgery. Start memo to Duke in passenger to do I d. Look. And when this is done, we don't want toe chain the state here remoter state changes and the motor in the rolls Right now, One thing to note series. So when I call the Moto do this specific to do item has to be removed from my on ordered list. Okay, so in earlier videos are in an entirely a session, actually just called this George render which looked through all the items which is not good from a promise Mint off. You're right. So here we will implement a method called removed element which can be pass the patent Nord . So this element is the button, right? So buttons parent node will be my ally element actual Toto Element Toby remote that we have to implement this remo element matter. But here actually used this that this will always point to this current object. We could also use 10 year todo I am God Rameau element to be more explicit because it is a singleton object, right? Only one instance of this told we will be there now we have to kind of implementer primo element method. So deliver a women matter This kind off. Not really complex it takes Ah, it only takes actually an element. Toby Remote. Okay, so I'm just logging It will remove the log. And whenever this limo element is called with element to be removed, we just call the removed child on the to do list. Right? So remember the story of this item but yet a parent. You alright? And we're calling the mutual and passing in the element Toby the mold and then you're done OK for no incident ended in the interview. You're only removing the Pacific dorm elephant, right? This will actually give you some performance benefit again. Now let's go clear on this app and see what that over the moto two and add to do matter is working the double toe Do that. It will still not work because we haven't yet implemented feature. So I go back to my application to worry fresh jalapeno be controlled to see whether any other is there are not. So let's add some Ah, that's great. So our task three add So yeah, I'm able to add the total right. Let's see whether we can remove the dodo likely contra move. Yes, you can quickly remove the told us. Well, right. So actually, what happens when I click on this? Our new or completely. So now we're we don't see this matter Getting implemented it so we see so dark on double toes is not a function, right? So no. Whenever we click on this so covered so do we have to implement a method called on Tuggle? Toulouse can select Implement that. Okay, so if you look at the get items, view the indoor, you do Britain, right? So this is where the on trouble total mattered was being invoked, right? Which is kind of not defined at this point in time, que selects kindof implement this method. Okay, so I'll come back in here and implement a metrical on Tuggle totals, which takes an element and there to do already, I guess. You know, for what it is kind of very simple, right? We can simply call the toggle complete maternal under two loser within part in tow. Do Eddie. So once I change the status of the to do from complete stay true to false, I need to render my item again. Right? But then I don't want to do a completely rendered. We only want to update that Pacific vitamin madam. Okay, That's a will create a new mattered call update element that will take my parent node and respective Toto be updated. Okay, so in the next step, left implementer of get element method here is the court for the object element method. So nothing great. Very concise and very small, right? So if you took it, I look at this rate element, your passenger parent node, and a total weight. Um, okay, let's take this to perimeter. And for those notice is as easy as setting The Baron Elements Or press team will put the new to do item view that you can actually get it from the get item beauty to already entered trait. So just call that mattered. With the right total element, you get touched Camelback, and that you're directly assigning put elements out of which team will so every took me to of data and existing dorm element. Now let's check whether where the trouble to do it's working off. Not after this have get element change. Let's go back to oppose that. Do a Lord. Now, when I click on this one, do you see this is getting troubled correctly and Renee Market has completed. You heard the correct state back right? So this kind of thing is working. Okay, Now, after this, we have to implement the ad. It mattered, right? Whenever I double click on this tour, I want our textbooks, Toby, shown with this value. Okay. And instead of textbooks, whenever I press, enter the dog who has to be up Gator often our a press escape. The update has to be cancelled. Let him women that change No to implement that it mattered. I don't want to attach the double click even toe every off this individual total y timeless , right? Because that will not be good from a performance. I suspect you're right. So what we will be doing issue some kind of event delegations so that this double click is only attached to this in order to list. And then we can actually kind of check for their target and then do the necessary operation . Right? So rather than attaching this, they went to individual and separatism your 1000 elements right here. So did the book Liquori Beer ties to all the one total element, which is kind of not very good. Okay, let's go back to over court. And then that's attached to double click. So this one ordered lists. Elsie on double click Milito todo app dart on Carver addict. Okay, so what we're doing is we're actually attaching that the world clique handler to our parent on ordered list, tight memory. And whenever the double play happens, we call the horn double at it mattered. Okay, so let's go back to our court and implementer aren't Uggla. It mattered again. It kind off. Not very difficult. So I'll come back in here and, uh, put the on Tuggle and it mattered in here. It's so some logging is that I'll remote this logging. So see what we're doing here. Right? So on their own double edit mentored, we are first checking whether the event not target. D'Artagnan, Bartolo, lower cases away. We only want to try to the bar click happening on the ally. Okay, so if it is not on the ally, okay, we're just doing a return here. If it is on the ally, we're actually getting the idea from their target object. Okay, so if you look at, we have this idea certain as part of the total rendering, right? So if I go back to my God item you years, you can get a number, You. And if you look at this ally, you have the i d sick. Okay, so we're reclaiming this idea on which the double click happened. Okay. And, um, once I could Daddy, I'll call him a turd called Travel at it. Que pasa in the target s celesta two. Ready. Being addicted. Okay, this is how my travel and it looks like this gorgeous critical year, right? Because if we don't take care of the safe condition, right, what if the double click is being actually kind of happening on an order list? And then there are no Why decide who will get some errors? That's where we had to put this guard condition in here cannot. Let's implement the toggle edit function. You can know again. This is simple because most of the work is already done in the gate Embryo. Okay, so I'll come back in here and put the tabulated. That's Akagera. And it takes a target. And that will do it. I need to be troubled. Get the first thing that we will go Is called that produce harvester talk allergic and passenger worldwide. Remember to validate function and that will do service. Right? So let's go to the top. Allergic. So what it will do is set the added property to either true or false. So it was true. It was said to the false if it was faulted the truth. So this property is being talking to a doctor who are false. Okay, Someone see kind off tobel debt, and then we have to update that specific alive we don't want to do in an entire year. And I think we only want to object. Right? So we already have dubbed it element material. So what is happening? See, we called update element mattered Pass in the target as well as a total in the update element Mentored. We are calling the get items for you. Right? So if you go inside the gut items view, you actually have a condition a year. With that where you are checking with tight um, it in their late more If it is not in their date. Mort, you this render a simple Eliatamby text. If it is in the edit mode, you actually rendered an input again. This input also has some Attard called on. I'm ready to do, which we have to implement again. This is what connects this out. Now, Yes, I'd like to go back in here on double go to save this and let's come back and see the other kind off. Let's to refresh. Okay, Lets DoubleClick say the moment you double click. You got decidedly if I press escape, you get demented on a great to do. It's not a function because we haven't yet implemented the own update to Rome entered. Okay. And okay, let's do that. And in the own update to limited, we will look out for the keys if it is. And Turkey, we have to save this toe if it is an escapee and we had to cancel this at it. So here is the on armed it Tudo mentored again. This is not very difficult because most of the goddess already being written Okay, let's have a look at this. So when it is on a bit to do cold whenever you with a press, the enter key or the escape get it because we have the event. Hope it on any, right? So if we look at the addict in the input, you have the unarmed. A total matter being called, You know, this will be called for every key up. OK, then we had to check for the Pacific is that we are interested in Let's go to on update. So we're checking whether the even dot which will tell you the key. Correct. So this is a normal listing which would work on most old Ebola. So the key code to indecent means you pressed escape key. Now, if you presidents give me, we simply called that they start oval edit and part in the pattern note and the tour already the rest of the thing filled automatically taken care off, right? Because we know the toggle a treatment that we implement it. But if it is enter committee of the key 13 we need to update the to do so if the keys 13 we call the two loser with update to room entered passenger to do ready and the new value of the to do. And when this happened, it happened. We again called tabulated so that it can actually go from edit mode, toe known, and it mood. And if it's in a non ended more, it can come back to the edit mode that this is the on update totem. It'd So let's save this and go back to the Boston and do it fresh. That's double click on this Yet in that it moved our new a modified task. Okay, for press enter, it should be sealed. I guess it when I presenter it sailed, right? If another click again and make some modification. No, I need to cancel this modification. Right. I good President escape. So this is also walking. Almost all the projects are looking right. The complete is working their newest looking that it was working, the attitude was working, right? So we are kind of done with ever. So do re factoring. Okay, bye. You think some simple design principles Now this controls over just little reflecting off their to do app that we were building. You think your JavaScript we kind of learned a bit about him off the best practices and certain things still need to be taken Care off. Which kind of it will revisit back in one more iteration, right? At this point in time, all the photos that we have is still stored in the browser memory. Okay, so this Typically we will take care of. And when we started the no j a session on well, passes this information in tow North service memory or maybe mongo db l tickets may be right. So the important thing to understand here, this kind off As you start building the application, it's very important to take a look at what has been billed Revisited Reef accurate. It's attending some wrong, wrong kind of tingly. All this trade with you that Ah, that kind off Mac toe affected things unless you feel things are great shape, great shape kind of thing. This will help. Are you wrote in the long term kind of thing? Also, when you work in a group, I thought off their lepas from around the world. A lot of this contest will come into play it because everyone has different coding practices. But a murder best practices will stick among all our feel kind off. Okay, so that's what for this has been okay. And the next step is word. Maybe we will actually have a look at some more optimization that can return to this Toto application and also talk about a more better practices. I'll try to stick as much Ah Oporto scrape it or resorting to any library during the initial are part of this total application development. But you will see that this application will rather grow in a huge slice. And then there will be a time we may have to adapt to some kind of likely offering book to make the development is a thank you image. Have a nice day. 14. Todo App: Add pagination feature to the todo list: a lot of his dish, believe it yet and ended up. Is it on? She's a hard part after cities there were reeling into the application from scratch using nothing but gastric. In this episode, we will have paid in its intraday existing to replication, and we will build this presentation library from scratch without placing any typewriter globally. So let's get started. And before we have a look at the court that's going to see this application in action. So if I open up the door applications in the cloud is Kimmel in the brother, it will be indicated for lanes three. No, here you see, there are a lot after whitened in here, and this also pagination on top of this application. When I click on this next actually go to the next speech you nightly conduct. Livia's takes me to the previous pitch for Ellen industry than tattled accounts. One giant listeria kind of segregating this application in two pages. It also never get to any other fistic pages by clicking on the Pacific detonation. But in the days presented on the screen, they say the pagination control got some scratch and hopefully have fun in the us next couple of more items. So this lease and wait about that this pain itchiness getting correctly updated right now, at this point in time, we can tell there are about 50 Cal State if I come back to my input box in here and him and him just randomly that they spend enough of Carrot writes it. And one moment there are daytime three automatic, the new Pages theater a moment that morning company you'll see in the new pages stage. This entire ignition is happening from the line side now, later on, maybe in subsequent episodes when we connect the extra's day's server. With this total application, we can also implement or get the state of 100 server side. Right now, the entire application is toward what end of memory? A PSA local very but very doable. Fresh in here, pressing on the refresh button. Mueller did that, they added, and get law get lost in the persistence is not the important part of this demo at this point in time, but later it could be one more thing. I'll make a note in the year, the moment at any white Um, I have taken to the last paid under. The reason is because in not application, the new item is being represented at end of the list people. Then you can adapt this application together and maybe quite continues. Okay, So first, let's grab the source code of the previous episode so that we can continue it from there. If we are just came to this start, part of the serious I would recommend you are to have a look at the 1st 2 part cavities to spread on the screen. I'll be sharing this link within the with your description. The score for the crash parties shown on your screen in the mosque or plastic and bodies also kind of played in here. We will actually take it from the second part and start out in the pagination on the second part again, As I mentioned, I'll put this you all into the description, so the first thing I'll do is to play on this court for the second part. If I click on this button here, I LA click on this. I can do copy this to the Click Book, then I'll go back to my application. I'll open up a console window and in this case, I have a folder in here. This is the place I'll be toning it. I'll say it grown, and I'll based in there You are. So this little kind of grabbed the applications Rose court from my great repository under to create a polar within this specific area. When this is done ordered, I can city into this wonder. Okay, because your top two years total repacked Correcto. This will take us to the exact previous state that we kind of concluded. Our obligation to this honorable lingers to this application to confront s. So this is the starting point for the third part of this episode. So once I had this whole scored, I can go into the specific folder and take the index shortest camel and open that within my brother. In this case, I am using the grown brother it. But this is the state of the application from the last episode train. I could add the Toto I could mount a toad was completed. I could remove the Toto. I could never click on this to maybe added the to do. Yes, it is kind off person. Enter here. That order will be our sale right? But it is. There will be out in the detonation cord. So now fire up your favorite editor and opened up. This was caught in it. Let's have a medical pp of the court. They open this application, you will have this application which has Earth which has been developed. A couple of folders like we have the index artistry multiple in the road that contains era presto total with us for less to do dodges that would condemn the logic. And we had an folder that contains toe court for the services and also it in the happy also have all called Toto don't two years it is responsible for entering this dodo was the starting point for implementing pagination right within the folder, right click Fournier And they had a new file Alana Metis pagination dodges and this is the court for the pagination will live at this point it's empty but then not open the way for third, I'll just refer this right within my court toward any kind of issues. Maybe a lot. Come back in here l A copy this total dodge a script court and place it here on and just replace the toe. Partiers fit imagination. Days may now have the stripped her configured and ready. So I'll also kind of end this dragon here, you know, do some realignment. Now, if I save this file and open up the Broza and also bring up their developer tools in you And if I go to the network camp, if I do any fresh on sure, amply, I clicked on this old, all awful terranea. When I do the refresh, you will see the pagination fellas getting loaded up correctly. So it will be up here I'm doing at this point in time. But we will be start right under God in there. Not since we have the court set up already. So let's begin by putting a placeholder where our pagination control should co for what we're doing here is ah, right within the area. Very have a list of Trudeau's. I'm not worried much about the fiercest at this point in 10. Put a break for that. That's an empty line in there that could today with an idea imagination. Okay, this is that ever ammunition control will live and see the sights. At this point in time, we February fresh, you will see an empty our pagination m today with their definition being rendered most entry already have a TV in here We can go toe to our pagination Rogerson and start writing the court for implementing the imagination. Fasting Aldo in the airless get the pagination do Are you saying that documented Not get Helaman badly for our ideas Pagination This will give me a ho control that the element that we just created well paid and abjectly to recall pagination This is that anti logic with a presentation with lives or what don't need for opinion each night The first thing you should know which is your current pitch So by the foot I'll keep it as one You should not up agent so bad if all I'll give it a petulant profit and getting what are the total record set So this will be fading dynamic labored for No, I'll put a default value of, say, 15 year so that were some data to work with, But this is the basic structure of our imagination. I'm Jake Library, another one of the important thing in here. There should be a way to render the pagination button, right? So that's better rendered from general coming toe play that end up in General Lender. A possible list of imagination, but depending on the page, lenders for little record before implementing the vendor function, let's also create some sample data so that we have some number of records to work with. So for acute work around, I can go back to Manto Do or servitude days. And here I quote, simply write in a for loop and start creating some stuff data. So what's implicitly, what I'm doing here is I am Cait creating kind off safe 46 records in the attacking with for the reason I'm doing it this way so that I have a continuous we conserve idea in there . And then I'm randomly pushing this timeto not randomly kind off sequentially pushing hard coded values off some to write something toe, may toe and say, Ah, put this quote in here and save this sale and opened my brother and the other fresh you will see a list off on my 100. This is on this actually know will make make it radically and then we start implementing the ignition. So in your world you will see that there are about 58 thin the right. What we'll be doing it will be kind off Billa pagination with 10 records. Perpich, Could that set this page? Land will come into play. We can customize this. We just have to change the way. But then things will be automatic liquor some nice for us. I will do one more minor changes before proceeding with the pagination. Because while testing with application, I phoned about wearing the latest ideas creator it so just to 50 taught. What I'll do is I just comment out existing in the creation court and putting according great. But what we're doing in this court is fat and actually kind of sequential. Incriminating, dial everyone, We're getting the max i d from the to do survey. Once I get them excited from the February, I'll kind off you have this already as part off my new total, right? You simply you deciding and just implemented by Get this look at off, prevent you from my everything that but that I was end up mentioning in that. So this is good fun. Oh, and no. Once you're done with this, we can go back to the page emission, but just to ensure nothing is broken, I'll go back to the boat where do very fresh and put in some value and started adding it in here just to ensure that that things are getting injured correctly. Now let's get on with the implementation of the imagination library. So the first thing in the end, up in Chinese I need some information about the total number off the corporate will create a local instance variable called Total records. And, uh, I don't have a way right not to get total the courts. But then what I can do is I can modify my service and impairment, a method called Get Dodo's ConEd give It should be with comfortable for getting me the total record. Right now, we don't have a method called get to lose. Count on my roots Always. Let's go back to the total service and start implementing immature call. Get to lose, Count said the bottom under, According here, I'll implement a new method called Get produce cone, which is nothing but a simple function that will return information from the state in this case, the state doctor who thought Lent. This will do the media total items on my list. This is ah, good for no conducting. So, once I had this information in here, the next thing that I need to do is to create number off pages. How do you know how many pages needs to be there? So if you take take the daughter that called safer Adam, you have 50. They're called site before Divine 50 bite and tennis champ Angel in the number of records pulpit. So I get five. If a directive tree but and I get for that essentially means I need to create five pages. So this second Tim pleaded with a simple calculation like Get a variable called pages and I'll say the start total Recall's divided by the start page. Lind, get this. Ideally, we work. But then something. What will happen? The result of this division will be, ah, floating point. Well, or it may be, for example, 5.15 point. Oh, well rounded to the nearest chanted your fancy math dot C and politics and death in Kenya, right? What will see little sense if it out put out the division is if I 0.1 to save it and mystics it. I would put this four point, say, three, for some reason together than me fight including, you know, note values. So now I have the total records, as well as a number of pages that is required to be created. Once I create this, I love put this alter into a local variable within this instant object little and then they can go and create a list off button, Slaughter said. No, I can actually legal for how many buttons has to be created for the specific originated control. Now, irrespective of the number of buttons on this speech, we know that at least two buttons should always be pretend right when he's the previous button, and the other is an expert in some bleeding on the previous. But and I should go to the previous page, and clicking on the next button should take me to the next page. Let's create both off this button now. Professor X rated previous but completely it available call button that will hold the entire Britain because there will be more than one patents and then I'll say. But it's still a sequel to do that, Uh, the text I'm about to read is contact mated with this the tables, because if it simply to equal toe, everything in the buttons will be awarded tonight. Classical toe. And I looked a back kick. Okay, I'll be using the year six temporal little. I'll do the back pick here. Now the benefit of this back tickets I don't want to do saying concatenation right within this button, right? Because we're getting that steamer and back tick. You are temporary. Little allow Mr Kind of replace the variables dynamically. So within this, we have to create a button, assign a class. So this button called imagination Britain against in. So this will be responsible handling the previous. I'll also give class off previous. And then I could give a type two the button. And, uh, I think at this point, I am kind off done with this pretending here and also closed about one pack. Similarly, let's also create a previous incident while copy descent tapping. And Chasity noted, I'm doing a plus equal to because I want bought off this text to be apparent to the bottom . Right? And him. We have a class in here and I took off previous. I'll call it as next. One more thing I'll do is within this person. I'll give itto textiles. So this is habeus, Maybe for you. And this is Father next. Okay, so now we have a variable called buttons that contains the chairman Mark up to render two buttons, one for the previous and one father. Next. Finally, what we can do is they can take the eliminate deal. So if you if you look at our any, we have a reference to the pagination do in this hell. Variable it. I can see your dark. You know, I estimate is equality buttons At this point in my time, if I save this and go back to my brother and do any fresh you won't see any button in here because we haven't yet called that environmental off the imagination. So what I can do? No. With just outside this collaborators here one the definition of the pagination istan. I can invoke the the diameter of the pagination by calling the and the method. Like once I do this and make the changes sailed, go back a member over. And if I had to worry fresh. Now you will see to what I'm getting rendered right near the previous very the next. Within this to button we had rendered the pagination. But tonight, depending on the number off, petulant kind of thing, I guess I hope this kind of make it medically. And we have our kind of hook in the human. They were infinitely on the next. It has to kind of the next page information and things like that. So I will be doing it shortly. A couple of seasons classes to style, this button. So we want meat Well, in deep into the CSS A. To this point in time. About 10 for the cooker corrections. I can open some pain. She assists my life, witnesses his folder and based in some classes. What about convict? I'll give you a very brief overview about the CSS. Is going in here really quickly. So here we have a current age class that has a background color, sky blue and detection of black. And then we have a page ignition button plus and with imagination, we may have a first test pilot. The last button, the background color, this slide quarter and the textual Lewis Black can't similarly for the on next and a previous button it. But this next end up your But it is what we just created the first on the left, but they're not creating in. But I created a style in case we may have it in future episodes. We will use testing here. So when that this information and say we talk and do a refreshingly brother, you see that the colors are not applied for some reason, Let me really quickly verify y looking must address a bit along conducting a donor to do the space in the in it. So I just kill. But on dark Nathan button dot previous the first and at that time not dozing in right now. If I just remove it right, I don't want to kind off contradistinction here. So when they say this and open up the brother and do it eventually, will street styles getting applied just for verification. Our place feel afraid to put any off your and each of any kind of off your dress in here. You know, since we are done with this telling, let's come back and create the rest of the buttons in there. We will take care of actions. SL right. So right now we have the previous winter. Never let an expert in our depending on the pages were to render all the button controls right between this site. So know how far to make it work. What I can do is write her between these two variables. I could write a for loop gift from, say, one I spun and ice. There's an equal two pages because that many buttons were to create in the night plus plus and I could writer but invasion court fight within this or loop. But then that will kind off make this court harder to read. What I'll do is I'll write and helper mentally. Here all get Burton and passenger Index, this index, it's always an idea of department. Now this get put mattered will return the requisite each team and for the button. So once I have appended to my button Sorry. Finally this antenna and they will be opinion back to my Internet statement. Okay, lets no implement get button metal in here, so I'll, uh, right after the render from Cinemania, I'll put a comma and create a new method called get button. That's a function that takes it except that index that we are passing. Then I'm just calling it as text for now. So here we had to create a list of Burton. Not exactly. Stop Burton. About one for every text that is being passed. Right? So what's like state? A variable call last name so that we can kind off style this puttanesca because we also need to style back to But tonight. So by default, everyone will have a glass off imagination. Burton, I cannot remember if you look at district area, right? We had this, uh, current page thing in your life. So what we'll be doing in the area feel safe? This stock current pages, equality equal to text. I could be more explicit in Tripoli Quill to write. But then for nine, escaping it. Difficult to hear if we took a rampage and also attacked a class name off current pitch to it. I will be consistent and use single court here just to avoid any confusion. The Lord hear what I'm doing here is something okay? All the button that we're creating will have ah, class off pagination button, but then if it's a cannon, Beach will also, in addition, class off current pitch and no space here because we want that all this stuff is should have a space in between it and we had a rest. This thing will be a one string, and the cells will not be applied once. Have the classes depending. Let's stay in an estimate for the button available college team and this is again a template. Little spring. It's a back pick, and within this now I can create a button a lesson and I d also to this person. Skacel Call it us Bt In haven and idea to make a dynamic that's a dollar early, open girly clothes. But in the next that you're passing in from the function in here in Let's spot in the class name s for okay. And the type of this bitterness Britain. Okay, let's close this tank. And finally the text should be printed on the button and the button. It has to be ghost, you know, this will create the button. So when the button is created, I will return this such table from here. So this is a basic code that it's required to make it work. Let's take a very quick look at this. So what we're doing is between this for loop, we are calling that they start get button passing in the index you know who wanted but this get not get button will return me an extremely for the Pacific button will happen that a streaming toe over but unsuitable that we created. And finally, when the Lopez done, the entire estimate will be set at an inner stream into my pagination. They If I say this and open up, my brother, get into words fresh, you will see the bottom getting in and out here and also you to see this one. Page one is highlighted in different color it because there's a current page. I could kind of click on any other pages to make the pagination book, but then we have to write big our escape methods that makes a being booked whenever we change the paid number. No, let's implement a matter that will actually kind off for bringing come date according to the pain number. So the first thing that we will do with sudden implementing the next and a previous will implement the click on this individual button so will implement a method called less Goto Page that will take in the button as well as the page number. And then, according to page number, it will bring in the data from my service. And when did this, you element. So let's get on with implementing that Goto page mentored. Okay, so let's nine payment How go to page mentored. So if I opened up my brother in here, what we need to do is so each of this button, right? 12345 we should have a mattered were in when they click on the button. We can directly take user to that specific or page with these but entire created within Does get button method, right? So right within this get button in here we'll hook onto a non procurement the 2nd 1 click. So when the click happens, they will say pagination dot goto page. Yet implement this method to pagination. Don't go to pitch. This method takes in the button object so that we can I kind of said the current state and things like that and also we need to pass in the text right see it because we're using this text is an idea, right? So we have to pass protect so that we can return that button from the dorm and do some actions on that as well, if need be. Okay, so I I I can use a year six complete substitute. Where do we everything dollar between a Deloitte apartness text in here. So this is a simple way to involved a good toe pavement with the button as Celester text off the button that we're passing so that we can retrieve it later on using their don motorists in there. So no, where to go and actually implement this. Go to pitch. So this takes into matters. That's off now. Okay, so let's Santa go go bitch method. This is a function that takes sub Burton as the lesser Beijing about it. So it remember, detective, they're passing it up a number to permit the first thing I do. It said the current pace number to the page number that we are passing league this year doing because when we click on this button, enter toe maybe that we want the current page to be sent to a neck click on find the current paid should be sent to five. You know, the reason we are are going definitely solicitation in here. And then we're toe get though I know what will happen is if you look at the court in here, you will see that the current pages highlighted in blue. Right? So when I click on three, we want the three Toby in blue, and, uh, the other style should be removed, but there are easy way to remove it. But for now, while simply kind of get all my button element here, we'll call it as imagination buttons user document dot qwerty selector on can get all the pagination. But once I get get this button, I can look to it. You can look trick and then again, grab the individual button, okay? And go to the last least plastics week immediately stopped office attached to it and call the remove it and I'll remove the current beach Plus from this button. Okay, because I want the current pace to refer to this button. It literally correct the name. Here it is routine. Yes. I want the current ph toe with it to the witty and that we are passing in here so that the next time people do so, we'll see. But ended his Negrin button not classically start at a new class called current Rich. Yes. So now what this will do. So let's say this for a moment and come back to overcoat. Do with a fresh set back a country. You see the three getting ah highlighted in blue red, typically con for the four is getting highlighted for some reason This previous lesson on getting removed let's take step part. So I know this problem. But then let me show you how to trouble Should are distinct near it. So I'll go back to member with an and do a Depression refresh here and I look one of the sources from my be bugging Tulia and goto the file app Open up the pagination. So go to pay Toby. Without that, this pagination that remove classes not working so easy for me to pick that out is I will put a break point here in the for loop. Now, when I click on this button, the court will be halted at this point in time. So when I click on this button the court is halted, right? I can click on next, but I'm still not sure what its going incentive fall upon a trick. So they is every four minutes. I'll removed one of this break point and I'll keep a break point right within the loop. That essentially means when, exactly this court. My call Courts should be halted at this point in temperate, perfectly concept five, you sit. McCord is not halted. That Miss my God, is not going within the for loop into here. I can also that I'm using the patronage in button here. They should have been regulation, but in the Heartland. Okay, Hand as the other near its one. Terrific. That court. My obligation should work. I'll come back to my quote in here. And I have taken this object, which is a collection, right to think. Ignition button dot Leant over the moment I make this change and go back to my court. We have a break point here, right? So now you had to worry fresh and click on the button. You see, the break point is getting hit the red That Mr Code is executed correctly on the motor break point for no and click on this Ah radium script Execution. And you see, the colors are getting correctly highlighted here. If I change the page to fight with the pitch, bias in blue color and rest of the classes are correctly remote. If so, used to comb are debunking Tulio, which is kind of very handy to identify common geography Paris and it will definitely save you some time. Okay, Now, since the other buttons sending up correctly, we have to write the code to get in the correct set off data light. So within this Goto page Minter, let's create a reliable call Ph date on it. No, which Competent had the responsibility for bringing the literary? Definitely our photos are we that we created for We will go to over to room service and call a matter called get paid State on this matter Does not yet implemented were to implement it shortly. This mother takes the patient about the perimeter and also the length off the beach. I want to pass on this information. We're expecting that that get patriot actually attend meet appropriate number of data for the current beach. So let's so implement to get paged automated now. So let's go to our studios of it or case. And just beneath the ghetto looks commented that Internet implement omitted call Get page data that a function that takes a page number and a page lent. Yes, it is where the pagination will happen. The first thing that we will do is is to get the start off the page rate because we don't know what to start off the page at this point in time. Apart from the page number and the pavement, let's get a variable called start pitch. When we can compute is you think the number minus one in to pitch Lent. So this will give me the start of the pitch. What are we doing here? Right? So we're taking the pain number. It's so sincere, Toe asserted. One because an actual daters and it starts from zero right support. A page number is so say one, So this will mean one minus 20 row there into Palin will be zero to start from. The real context support the pain number is fire it. So five minutes when it's four okay and four into page identifier of page and it's 40 so according toe for Atlantis, 10 rate, so turn into four will become 40. So the start page will be started. The record still be 48 record. Okay, this is what the calculation is happening in here. So I take it this I need to get there. And Dr Patriot. So another page is nothing but start pitch. Bless the patron in December meter and off the pitch. So one, check it. This I can create a variable called page data. This is nothing, but I'll go to my state object goto the truth and used to slice function from Okay, This lifetime thing is available in the jobs get. Really don't do this place function because I function will actually modified the area. The slice function will give you a new area. Right? And give them start in decorative start bit and then in decorative and pitch Trying to get the data returned. This data back to the color right? Third and the page data. Okay, so we have a matter now that the data according to the page number, Once I get this data, I can come back to my imagination. Okay. And then I have to render the data rate. That means I have to modify my toe to app that we already have and call the render mattered With this new set off data, not this point in time. It will not work because we have ended modified their in diameter of the web. So let's do the modification. No. Okay. Before we modified their inter matter of the world where let's do some re fact playing great. So it's always good to go back to your court and care up some confusion. But here I'm calling its page number. It's actually not be ejected. It's start off the record, right? So what I'll do, I'll do some renaming here. So right, click on this really able and click on the name and this is not start yet. It is talk off record, get this kind of makes things very clear. And this end I Larin emitters. End of record. Maybe I just effect like in in good. This is not clear, you know? Well, can get the pastry tough on the application. You say if I go to my page emission. Okay, we have the period data. Now we're calling the random occurred on the Tour UAP and passing India Beach data. Okay, so let's ah, go back to a weather our to our render metal under to do up. So I'll open up the total application. So if I look at the end a matter of the total application here, so it doesn't take a perimeter, right? So, no, we will actually part in a polemic recalled Dodo's okay. And now we don't want toe get the data from here, Commander Cody, because they are passing that produce from the pagination. It's at this point in time, the application should work. But then what will happen is less very quickly see and save this thing in here. So if I look at the page ignition So I'm calling their implemented with the page stating it . But then when the application starts and if I do a refresh, she was in no detainee right way because if you look at the application that has been bootstrapped, if I look at to do tears were calling to we have got rendering. We're not passing an imitator here. What will happen is since the random Attard in here origin a leader and had the data being passed Okay, so this will be no. And you'll likely get the message. Or maybe it won't display anything. Any rate is an empty string in here. So we have to fix this way to figure. This year will come back, Toto Dark two years and each other and omitted Elsie Tudo so that we start get pH data. We already have a mattered and say Get the page it over the first page. Because when the application start, we wonder data for the past, Patrick. And the length is we can actually go toe pagination object and get the Vaillant. Get the one tired of this change. Now save it and refresh your brother. You will see all the data coming up correctly, right? But this fixes the problem. A computer courts in you reload a page. They let me very quickly Recap part where did so right within the pagination. Okay, where did this go? To pitch off function being written. We're going to the service and getting the date according to the page number. And then once the a candidate we call the random Mitterrand that will doapp and in the middle of the road UAP Now it takes a list of totals to be rendered. We comment out. The tourists always get all called because non details coming from the pagination to risk, maybe, and restaurant things are exactly scene. We just kind of model weather and limited again to get the first page cater for that double . It is kind of being the official number will reload the page back. Okay, so I refresh it And you had apparently did not coming up correctly, right? At this point in time, if I click on three, you see the later getting change rates. The pagination is working out correctly so I can go to any page number. The presentation is still showing me the correct data. The next and previous will not work because we haven't yet implemented it. But the media pushing on the court of kind open. So we have a slate. You a problem, Eric? The US getting distracted because of the size. Let's stick. So you wave it so that it's a thing doesn't dynamically agenda with according to data it I'll fix this out. What? This destruction. Okay, so they had to figure that you were the strengthening is I'll go back to my CSS file and goto my another list element here because the studios and I set a fixed with off safe 600 pixels for now. So I say this thing and open up the brother. Do worry fish and know when I go from one place to the other, the US not kind of distracting as the previous night, Alexey wanting here now before we put a reported with implementing the previous and the next life A at some to do. We're seeing the touristy merely again in you know, this is not the behavior that we wanted, because if I do a next, maybe are they go back to another pages that is not coming up correctly, right? So what we want in here is where we had an element we need to add Element attend off my list, and our alienation should be correctly highlighted on the correct number. Wrestler. That's what I need to do the pound if I'm on the third page. If a coordinate, um, when clicking on add item, I should be taken into the right location where the item is at it again. Let's make that change now, so let's go to the court here. Close or decide tortoises still is no longer required. I'll open up Metodo daughter Jason Island Goto the mattered where we're adding the total recall. This is the place that will decide it at this point and that we haven't done any modification. So on one more thing to notice. As we had items right, our paid numbers could change because made a number of attempts. So in my total are buried. The first thing I'll do is I'll say pagination dot Rendall. So in case my pagination ISS implemented often it's implemented. More projects are required to be rendered. The buttons are correctly rendered right. That's the first thing I do. I can do some optimization, literally a right to prevent unnecessary than to. What I want is whenever I add item in fear and in that under the end of the list, we need to go to the last pitch call. But the my imagination object in more committed called go to last page. So we haven't returned this matter yet, but this will come in handy for what we're doing here is so whenever we're adding the item , we are calling the presentation not render as the less pagination got pagination. Don't go to last pitch. Okay, so we help Impairment is go to last page mentored. Similar changes also need to be done in the remote toe. Do Rachel copy of the speech Discord from here and go to my chemo. Our total mentored. Let's quickly check it out. Yeah, this is that the total being removed and I'll put the same court in here because same same effect will be here. So no, that's implementer. Go to last page. Matured. So go back to your imagination library and in here that the matter call go to last each. This is a function that doesn't take any perimeter. No, actually, it's really simple. Ate what? I can do it. This I could tell the dot current paid equal to last Peg it to start pages. It was simply sitting though current page to the bill got pages 3.0, my last page. Next were to blab toe, but and for the last Great. So I could complete see document God, Cattleman by Eddie and button hyphen And the current page number. This looking meter are correct button for the last pitch So once I have this button, I could simply do this. Start court to page because this matter is already implemented. But in the right button, in this case, which is current page Britain and also the current paid to do nothing about this lot current pitch. Once I do this change, I am good to go with my insert and the late part of this application. Answer. So I'll save this sale and go back to my brother and do it fresh so the ammunition correctly works older than extended. Period is not get implemented. No. See, I Montreat talk page right? If I go back here and add some task that past 100 15. Implement Drag and Drop with JavaScript: was the back. And this is not just believe it yet under the sword on JavaScript. In this episode, we will call it a simple guy n drop application. Just you can extend this application. Do any under application that use this feature. Maybe like a shopping cart are. Maybe win went us from one panel together. What will you deem fit? Many people use external libraries are components averages for implementing drag and drop? That is nice. Knowing how things work internally is what leads to programming. We wanna, let's say, the Venice application in action. So we will have a simple application with two paints left and the right venue the gray or black angle that you see, which has a lift off task, that this can be anything right so we can actually move past from one paint. Oh, dear. There's about inflate pregnant dropping. This is what we're trying to implement, using a very simple approach and by your invest email, flying, drag and drop feature some background before we get into the court. Now the first thing to note here is that in esteem, if I that ragin dog, it's part of the standard and any element can be credible. Get that somethingto note. We also complex events like black start, drag or and drop, which actually can get her to Ovidius scenario that we're trying to achieve. Let's kind of begin by Lingam touched, you know? So I have already people ditched Yemen and I kinda copy 10 Put it here and then briefly explain you this team apart. So we have a daughter. You with the class self rapper. We have one energy with the class off box. We have one more energy with a class off box. Okay, I'll put some CS is also so that this application can be about style of it. Take some seriousness and put it to you. No, you can cheetah a book which has been displaying the output window on the side. So I am using Js bean. What? This demonstration of the example is very short now, the thing to notice area that we can reckon nearly men from this deal with the class off box to any other do with a class off box. That's what we want to it. Until they will go drag this task from this to this trip. Meditator basic structure. And now you, if you look at the sea, is this Let's quickly go to the C s s s kind off. So we have a Barney. No margin is said to 40 pixels. How did you get the class off? Rapper Were you think that she is so screwed so that we can align this column Esparta requirement by setting display Too great. We sent Joe Collum stood the screen. But you've seen the great temperate followem. One fraction indicate one portion of the screen thing to be again one fraction twice. Here this is actually Creator two column layout. We also specified the gap between the great to be 10 picture and then the backbone in the foreground color and the individual boxes styled also be a total write off. 90 were delight Shame. Another task had been straight with the background that off Think the for one color of black man in mom departing in the much. But this is the basic esteem Volunteer said That is equitable. This bag and drop application I had the theater's been now the resting topped aviaries every task women that we want to but like we had to send a class off task so that we can track of each element is being like that. Fellas, The attention ideas not to make the Helmand credible, we have to set drag a political drew. For example, if I come back in here and they're trackable toe fall for this first element with a task Radio one. Okay, I cannot drag that Western women if you look at the screen. Right, but the second in the settlement can be kind off are black, Okay? But it's not kind of very easily visible in years, but to make any element credible, we have to set the drug ability to that. The first step we have to do okay not to implement that Children and drop. We have toe be a read off a couple of events. So when is toe no payment? Lanista track over. Even in death. Arista Black started int. But they said the three important event that we need to be have arrows. You know, if you are attacking this event directly toe that stream and we just depending on before this. Okay, so on drop on dragon and on black start. But if I am dynamically attaching this event. Byah Joe Skip, I can just remove Just used a drop drag or what? In the back start the one thing to notice any of this even being used. So as I said, to make any and women trackable we have to set track up don't to. It isn't the first thing we have to do and to make any panel or any do probable. Or maybe that I get off the drop. We have to implement the drag away event. This is actually and off they went that enables Moellemann being dropped the target. If you don't implement this event, you cannot implement that office. Nobody fault other drop is prevented, right? So within this event, we will just get grab onto the event perimeter and prevent the default period by calling even dot even default. And finally, when the drop happens, the on drop even face when the drop happens to be owned problem and just no, when we are dragging it, Okay, we need to capture some data that we can do within the black start event capture some initial later. This is done in the backs document This one more even called less on drag but it is continuously fired. Another right happens when that happens. And the on black started Stephen. I went it only fired. Once a drug is initiated, so decide for important events that we need to be aware of. Now, if we wish we could directly attached this events like track over drag start to this day vineyard, for example. If I need toe no hook onto the argument, I could go back to the elementary, which is being black, And, uh, but anyone under lake on drag stuck and then give you toe potion even parameter being passed. Yes, this is one way to Oh, really? I can't wait for all the other tales, Esther. And respectively, we also have to come to Europe. He went on to this box, for example, on draw, people on drop. So this visit will be implemented on drop and drag. Haven't kind of it, but then know what happens Many times we want to attach this event dynamically at runtime. That means we need to find this element by class or variety and then dynamically attack statement. But let's take a look at help do there that didn't hard quoting they win statically within this statement aspect, saying the motus are quartered. Event from here and we will implement the stretcher programmatically. First, let's grab some elemental that we can hook onto the bridge so they get the top target by using documentary ready selector and give a class guests know what we're doing here is theoretically making this operetta drop get rather than individually end up hooking onto the box. The reason for this is it's always better practice. Toe Hope prevented the parent Redden individually attacking. They went to the entire element available possible kind of begin Tim performance. You know, within this thing, we can check for the target and then do that. This is a reaction. So we just got the drop target and let's get all the Regulus you think document dot org she let go all but in a task. Yes, I know we want all this task even greater task One task to win mastery. So this isn't thing, but in a way off elements now, in this case, we want that drag start Toby attached to each of these individual elements. Can I finish? We could also attacked. So went toe box and then get the target and do the necessary things. But I will show you an alternate way to attach at this event. Individuality individual to the individually to all the task elements. So I can come back in here. I can look through this events. Okay. So it can define a ah utopia. And then grab Billy meant based under index off the look and add an event listener. Okay? And we had to look out for the drag start he rent Berita callback function with an event, but I make that. Okay, so this is how does function body looks like. So within this now we need what we need to do is tell women that were dragging safe. Remember Tasman Toes? Toto Street as an idea, right. We need to store this idea so that at a later point in time, whenever the drop happened, we can retire. This element from the early and correctly happened this due to the respect to target element. Okay, So you stayed. What we can do is we can use the data transferred, object from David object and use a method called said data, and I can give it a key. For example, I would call it a society. The element that is being dragged and actually ideal element that is being grand. We can get it from the window. Don't get not I d. So now I could happen to use my number b start the drag of another drag start happens. We grab the elementary lee and set it in the data transfer object for that at a later point . Whenever dropped happens, we can read this data back and then do the necessary action. Now let's set up the drop target. The one thing that we talked earlier verse that the the top target should implement the plaque or what? Even we thought, which I thought maybe it will not work kind. All right, so let's go back in here and implementer you are not get you. In the end, descent of their drag over event give it a callback function, and by the fold, drop is preventer till they will say even dot prevent before, so that the default behavior does not happen. So this is what is needed to make any target event probables. In this case, this is a deal with class off proper, and now, finally, comes, toe drop evened itself. So what we can do is they can hook onto the drop event on the top target. Same process going to the government. Give it a callback function with David. Parameter can know when that drop happened, the last thing that we're doing is preventing the default area. And then we will get the Doggett. Just your doctor in this case that I get will be the with the class of rapper. No, we will grab the sorcery that was being dragged. Right? So this we already stored in the data transfer object so we can get it from there. So instead of using get data, as I said, data will use him a tactical get data and passing that key, which so sadly, yes. So I felt the fear. You said data and passing. That key s Oh, sorry. We're using the get data and passing that Key s society. Excellency, grab the element. We can say Even dark target. That's what I get. Is the deal here happened, child. Okay. And get the element, baby. Get element by Heidi and gave itto so sad. Okay, so this is what completes stir up. So what we're doing here is we're grabbing the target, reclaiming the 80 and then we are grabbing that I get from the video target here. Actually, weaken directly used this target because we put it into a variable. I could say target dot happened child and get a source element by 80 sosocial men would be husband us toward mastery. Okay, let's get it. Just do okay? And we're calling their franchise method. So you find no go back in drag and drop it here. Okay? You see, something is not working. Let's refresh it and let us try to draw drop again. Okay, So something is not working in your right. So let's open up today. What? Window? Okay. And go back to the council. Okay, so there's a spelling mistake. It's a document, doctor. Very select Elizabeth selector. Okay, so let's go back in here and do the correction. So I see at least see against the us collectively it out now and then. No. Tried writing. And you know, you can drag n drop. I guess I can like it back here. The one thing Observe. You're right. We mentioned that we only want to drop this element on a day with the talking with the class of box, right? So, no, If I tried to drag it here, this will still work, right? But then I can drag it within the same element. Also, this is this picture I don't want. No. In case you want this feature, you can keep it right. So what I want is I want disturb only big. Drop a ball on a deal with a class off box. Dicta. Lex kind off. Put that check and prevent this element being back to itself. Scenario. Look to prevent dropping it onto itself. It's kinda busy, right? So what we can do is we can, ah, creative variable call. Probable. And then we can use the car, get element and looking to the class list and check whether that target element contains at last box. Okay, Now, if the targeted women because their deal wherever we are dropping right, if it contains a box, this culpable value will be set to go. So we want this happened to happen on leave capable If true, you can say fittest through then only doda happened. No one say make this change in here. I can go back and do a drop here. Everything seems to be working. But then I cannot like this element in onto itself, right? No, no, it's not working. Okay, so we kind off fixed diving element on toe. But then we can track among the different boxes get this historic, conclusive, simple drag and drop operation. Now you can actually, under this obligation And, like various kinds of elements, including deals, text boxes or maybe even images, right, the usual imagination and start building a better track under publication. But by the interest sickly understanding how the actual Dragon WP a book. Thank you Imagined. I hope you really enjoy this episode. Please leave feedback or comment. And also let us know if you need any kind of additional tutorial on this.