Step By Step Mastering JavaScript | Mukesh Ranjan | Skillshare

Step By Step Mastering JavaScript

Mukesh Ranjan, Learn Everything Step By Step

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
53 Lessons (5h 5m)
    • 1. Course Introduction

      5:34
    • 2. How To Include JavaScript To WebPage

      5:10
    • 3. Lets Understand Browser Console

      3:16
    • 4. All about Variables Constants Comments

      10:22
    • 5. DataTypes In JavaScript

      4:38
    • 6. String DataType In JavaScript

      12:11
    • 7. Number Datatype in JavaScript

      12:56
    • 8. Template Strings

      4:45
    • 9. Arrays

      9:47
    • 10. Null And Undefined

      3:32
    • 11. Boolean And Comparisons

      12:06
    • 12. Loose Vs Strict Comparison

      3:00
    • 13. Type Conversion

      4:34
    • 14. Control Flow Introduction

      3:02
    • 15. For Loops

      5:42
    • 16. While Loop

      3:44
    • 17. DoWhile

      2:31
    • 18. If Block

      3:11
    • 19. Else And Else IF

      4:00
    • 20. Logical Operators

      4:58
    • 21. Logical Not Operator

      3:25
    • 22. Break And Continue

      3:15
    • 23. Switch Statement

      4:48
    • 24. Understanding Functions

      2:31
    • 25. Function Declaration Vs Function Expression

      5:31
    • 26. Argument and Parameters

      4:48
    • 27. Returning Values

      2:35
    • 28. Arrow Function

      4:46
    • 29. Callback Functions

      6:03
    • 30. Function Vs Method

      3:22
    • 31. ForEach Method

      5:51
    • 32. JavaScript Objects

      2:56
    • 33. Creating An Object Literal

      6:03
    • 34. Adding Methods To Object Literal

      2:35
    • 35. This Keyword

      4:34
    • 36. Math Object

      4:24
    • 37. Primitive Types Vs Reference Types

      6:47
    • 38. Document Object Model

      4:28
    • 39. QuerySelector

      10:22
    • 40. Get Element By ID CLASS TAG

      4:38
    • 41. 40 Adding Modifying Page Content

      8:05
    • 42. Get And Set Attributes

      3:49
    • 43. Get And Set Style

      3:47
    • 44. Add And Remove Class

      3:34
    • 45. Node Relationship

      8:51
    • 46. Events

      9:03
    • 47. Project PopUp

      14:20
    • 48. Forms

      8:19
    • 49. Filter Method

      4:31
    • 50. Map Method

      7:35
    • 51. Reduce Method

      4:42
    • 52. Find Method

      8:36
    • 53. Sort Method

      7:21

About This Class

Step By Step Mastering JavaScript is the course for absolute beginners who want to learn Coding with JavaScript. In this course i am teaching how to do programming with JavaScript and also getting ready for upcoming Advance JavaScript concept. My goal with this course is to give you the best of JavaScript programming knowledge in a Step By Step manner so that a non computer science background student should also get the career scope in web development.

You will learn following topics in this course

Step By Step Mastering JavaScript
    01-How To Include JavaScript To WebPage
    02-Lets Understand Borwser Console
    03-All about Variables - Constants - Comments
    04-DataTypes In JavaScript
    05-String DataType In JavaScript
    06-Number Datatype in JavaScript
    07-Template Strings
    08-Arrays
    09-Null And Undefined
    10-Boolean And Comparisons
    11-Loose Vs Strict Comparison
    12-TypeConversion
    13 Control Flow Introduction
    14-For Loops
    15 While Loop
    16-Do While Loop
    17-If Block
    18-Else And Else If
    19-Logical Operators
    20-Logical Not Operator
    21-Break And Continue
    22-Switch Statement
    23-Understanding Functions
    24 Function Declaration Vs Function Expression
    25 Argument and Parameters
    26 Returning Values
    27 Arrow Function
    28 Callback Functions
    29 Function Vs Method
    30 ForEach Method
    31 JavaScript Objects
    32 Creating An Object Literal
    33 Adding Methods To Object Literal
    34 This Keyword
    35 Math Object
    36 Primitive Types Vs Reference Types
    37 Document Object Model
    38-QuerySelector
    39-Get Element By ID-CLASS-TAG
    40-Adding Modifying Page Content
    41-Get And Set Attributes
    42-Get And Set Style
    43-Add And Remove Class
    44-Node Relationship
    45-Events
    46-Project-PopUp
    47-Forms
    48-Filter Method
    49-Map Method
    50-Reduce Method
    51-Find Method
    52-Sort Method

Transcripts

1. Course Introduction: Hello, guys. Welcome to another course in this course, we are going to learn about step by step mastering modern JavaScript. So this course is the coast three or fine, step by step Web development cities. So prior to this course, I have released two more courses earlier in this series that I will show you. So if you're going to my profile, then you will find that this is the first course, which is a loan is terrible. Five Promise Grant to step by step. And the second courses, the fluency is history from a scratch on the same aspect, I'm going to release the course three, which is a step by step mastering Morning, Joe. A script. My earlier two bulls is not a prerequisite for this course. If you have already knowledge about estimate five and see its history. So in this course I trade took over almost every conceptual aspect off JavaScript. So let's look into the topics. What are the topics we're going to learn in this course? So we're going to start with whole to include your escape to repeat. Then we will look in tow browser console. Once we grasp the understanding of the roads of console. Then we will look into the variable constantly and comments in Javascript. After that, we will discuss about the data types in Javascript. In the same aspect, we will look into the string later type and the number data types within JavaScript. Once we understand that, then we will proceed. For that. We will look into the temple to strength. That is really very interesting feature off Year six. That helps us to designing the permitted output in a very easy manner. Once we understand that, then we will proceed for the and we will look into one of the important object off Java script that is their ease for getting on the standing off the areas. We will look in tow work actually, nor less how it is different from undefined once we understand that, then we were looking bullion and called prisons. In the same aspect, we were looking toe another topic that is, lose verses, a strict comparison. After that, we were looking toe type converts till type conversion. You get better understanding about the JavaScript basics. After that, we will start learning about the control flow in that aspect with cover venues topic like for loops while look, do I Look, if block else and Elsie block logical operators Logical, not operators break and continues. Which a statement All these topic will give you a Tora understanding about control flow in javascript. So if you through to the topic number 22 then that means you were in a very comfortable position, right? Logic within the program. But to make your knowledge more concrete, we must have to understand that what actually the functions is so that we can easily design the modular programmes and this approach is not limited. Toe javascript. You can find that this approach is applicable toe any of the programming language? No, from the topic number 23 hour functional and modeler programming Germany will start. And in this aspect we were looking toe function declaration was dysfunction, expression, argument and perimeter returning values at a function called back potion function worsened method for each method. Once you re still topic number 30 then that means you have no total understanding off functional programming within JavaScript from the topic number 31 onwards, we are going to learn about javascript objects. So in the same aspect, we were looking toe to create an object. Little's out that matter to the object literally. Then we will learn about the this keyword. After that, we were looking toe math objects. Topic number 36 is really very important. It helps us to understand the difference between primitive type was his reference types. Once we understand that, then we will proceed further and we will start our journey with document object model document object border within job I escaped is one off the court and one of the most important topic in JavaScript. Once you understand this topic, then I can assure you that you become one of the best Web developer in your career as Web development is nothing but manipulation off their document object mortal. So in this aspect, we are going to learn about what? Actually, the document object model is for this query selector. Then we will learn about get element way I d get element wake last name, get element by tag All these things we are going to learn. Once we understand the selection off elements within document object model, then we will understand a boat adding, modifying, reach, content get answered that revealed scared answered the style are done. Dribble glasses. We will also look into the northern relationship within document Object model. Once we understand that we will look into how to associate and even within the document object model elements. Once you understand the event, then we will do a small project called Papa. It is very a small project, but it covers many aspect of document object model. After that, we will look into forms. Once we're in this transform, then we will proceed for though, and we will look into some of the important method off area objects that this filter map reduce point sort. So till here, you will get a good understanding about the modern javascript that we are going to use in our next course, which is on react topic. So on this note, time is dropping over here. See? In the course. Still then, Barbara, take care 2. How To Include JavaScript To WebPage: Hello, guys. Welcome to another session in this session, we are going to look in tow. How to include JavaScript, a webpage. So let's jump into the visual studio code. So we're into the results to do you could. And the next test of we're going to do is that we are going to include a file card index, not esteem ill. And here we will generate an estimated five chord with the help off STM. L snippet. So, to do that, you need to select this snippet and it will give us the boilerplate code for the esteem and five. So another question over here is that how do we can add the JavaScript in this pile? And where do we add the joists in this file? So, to answer your question, you can add the joy script at anywhere within the head section, as well as in the body section. Soto and the JavaScript into the head section. What you need to do, we are going to use a script act on Dhere. We will specify a lot, and then we will tell that let its loan JavaScript. So this particular script block will add joy scripting this system will pitch on this court . Particular line of court will give us the pop up into our estimate page. So let's run it. You need to click on this page and click on F one, and here you will get the first option. You need to select this one. This will give us an option toe open in browser or in visual studio. We're going to use open in browser and the moment where Page will open it has given us this pop up a dialog box, and here it has given us the okay, but you need to click on this. So this is one of the way way with you can attach the joists could filed into the esteem in . So let's go back to the visual studio code. So this is one of the way. But sometime what happened that it will give us the problem whenever we're attaching the job by escaping to the head, and it will create some problem while loading. So the better place we can also keep this is script at the end of the body tag, and it will do the same thing, whatever it is doing right now, so if you will save it. And if we will go again back to the estimable beach with a browser, you will see that the same output so CEO. So let's go back. So it is always recommended to use the job a skip code at the end of the body tag. So let's add some more cold over here. We cannot hear something called Judgment. Let's loan Joe I script and save it and go back to the browser. And when you click on this so it will load Bill, let's learn JavaScript. So, no, let's proceed photo and let's look into some other way to attack the JavaScript files. At least I mentioned that it is better to use the JavaScript into the body attack when you are having a single estimate. But suppose if we're multiple edged table file and where you want to use the same court in different pitch, so it is always better to put it into the other file on which is being saved that door. Jace extension. So let's do it. So how we can do it. We need to create a file and save it as an extension. I'm goingto call it as my yap Nordea's. So the final has been get it so know what we will do. We will go to the index tortes TML and we will come in this out by pressing safety or a Buddha comment Aurelia So once the comment is being done now, the next step is we need to add the script block over here and here. We need to specify the source off the JavaScript file which we have created over here. So we're goingto tell that my Abd Arges is going toe associate within this No, we attest, my abd, or just know we will go back to the money Abd or Jess. And here we can add the same food which we have written earlier. So right a lot. And we will tell that let's learn more than Jess. Save it. No, let's go back to the browser and see the effect. So you will see that it is auto reloaded because we're using Hartley loading with the help of that simple. So over No, you will click on it Then you will find the same effect loaded the page. We're achieving this with the help of external Js file which we have attached into the estimable file. One thing you notice over here that we haven't used the script block over here because we have already mentioned tag over here and here we have a special fight that sorts Which file is going to be the source for this particular script Actual, that it is being associated with this esteem ill and from decision onwards. We're going to you the same method where we are having the best email into the separate file and adjacent to the separate foil. And we're going toe right, All our javascript in tow, this Js file and which is being attacked here with the help off this a script file and that is being established in tow, The end of the body tag. One thing I wanted to mention over here that whenever we're writing any javascript a statement, it should be ended with the semi colons. Without semi colons, your court will work, but sometime it will give us the problem. When we were writing the larger piece off court within a project than it is difficult to identify the error. So it is always good practice to provide the semi colon at the end of the statement. So this is what I wanted to demonstrate you in this sessions here in the next session Till then, buh bye. Take care. 3. Lets Understand Browser Console: Hello, guys. Welcome to another session in this session. We're going to look into a browser console, so let's start our discussion. So far, we have launched about how to include us. Crypto were paid. No. We will have the understanding about the browser council. In this course, we're going to use the chrome browser, chrome pros or offer, says the developer tool and the console and these tools, or browse and help us to develop the JavaScript code while designing the application. So how we relaxes the developer tool and the console in browser, so let's look into that. So here you need toe press after well, and it will open the developer tool. And here you will find the console option. You need to click on console and it will give us the sandbox where we can execute our Joe a skip cold. For example, if we want to add to number the moment you will write two plus two, you will find that out. What is given over here the same way you can run the JavaScript, whichever you want put on within this webpage so you can test it over here and then you can put it into the JavaScript file. This is one of the example. The other example. We can use this console to log some output. So how we can do that? Let's look into that. For example, if we want to or put something within the council, so what you need to know you need to write. So he yoke and soldered log and the thing which you want to print or whatever you want to look. For example, I want to launch two plus two just for the sake off example. I wanted to show that we were going to use it so much. End up coming Szczecin. Suppose we want to put some message. Also, that's long console log. Save it now. The moment you will run it, you will find that it is being logged within the council. So let's look into that. So no, let's click on it. Then you will find that it has loved the output into the council because we have told that we need concern. Dort lock for two plus two as well as the message over here. So it has logged into the council. This is really very handy tool for debugging whenever If we're facing any issue or any error within the STM, a beach or while designing the application, then this comes really handy waiting to find that what, actually causing the issue or what actually causing the error. One thing you notice over here that it has first printed for and then printed this. Let's long console log. It is because job description prompt upto bottle and that the reason it is printing four first and then the messes. As we have told into the A script file, See you if you change order, then it will print. The 1st 1 is let's loan console log and then two plus two. So let's save it. So let's look into that. No, it has repressed due to heart reloading. So click on OK, then you will find that it has post printed Let's long console lock and then, for let's proceed further. If you're not understanding about this console dort log, don't worry, we're going to discuss about it. This is nothing but a function within the JavaScript function. We're going to cover in detail in the upcoming sessions, so don't worry about that. You can just consider that this console long help us toe print anything within the console . So this is what I wanted to demonstrate your indecision. Seeing the next session till then, Bob, I take care. 4. All about Variables Constants Comments: Hello, guys. Welcome to another session in this session. We're going to look into all about variables, constant and comments. So let's jump into the visual is to record to understand this topic. So we're into the visual is to do. You could know. Let's understand that what actually valuable says variables is one of the important concept not only in Javascript. It is also very important concept of any programming language. Whether you are learning, bite on whether you are learning JavaScript, c, sharp Java and any other language. And in all the language, the concept of the valuable is seem and the concept is very well is one of the mechanism by which you can restore the values, any values, name, number, date, Willian, true falls. And once you has told the values, then you can use that very well within the program anywhere. So now the next question over here is that how we can create the variable. So to answer your question, I can tell that there are various ways to create the variable. So first we will look into that. We will tell that there is a keyword card. Let and then you will tell the name of the variable, which you want to keep. I'm going to tell that the variable name is course name, for example, mustering Joyce Crystal. He'll cause, namely, the variable where I am. A story mastering JavaScript string. So here, with the help of this course name variable, we are restoring this value, and we can use it for their anywhere within the files on how we can access. For example, if we want to print this value into the console, so what we need to do? We need to tell that canceled or clog and the name of the variable so it will print that value into the console. Let's save it. That's looking to the browser concern. So here you will find that it has printed must drink JavaScript. That's what we is stored in the variable. Let's proceed for the no, we will discuss about reusability of the variable. We can use the same variable, which we have defined earlier. We can use it now when it's like some other values onto the variable. So that's looking toe that if you will, right that course name. No, you don't need to define again with the help off. Let keyword. You just need to reassign it. So how we can reassign it? We will tell that the variable name, the unequal to sign, and we will tell that this time mastering Web development. Semi colons. Save it now Let's look into the browser. Cancel prior to looking into brother console. We must have to print it after this else it will print this valley only, and we will not get the course names. Let's write it over here. Save it. No, let's jump into the console. No, you will find it over here that it has printed mastering Web development. So the rear or football's lasting joy Skip, let's clear this console how you can clear it. There is this icon you need to click on clear console, no legs reloaded so that you will get the word isn't late the valuable. So let's reloaded. And here you will find that it has printed on leader mastering Web development, as it was later in its life. With this strange no legs proceed for, though no what I want at any point of time. If I assign a variable, that should not be change. So how we can do that. So there is another key word that is called Const that we will use to define our variable. So how we can do that? So we will use the cost keyword over here and the name of the variable. For example, we want to tell that gender were going toe store the gender in a variable cora gender. So let's write. It may save it now. Little point of time. Whenever you want to Jane in tow, this variable it will not accept it will throw errors. So let's try to do that. So now I want to assign gender male too premium and he'll we will save it. And when we will go to the console log, then we will get the other. So here you will see that it is throwing us two winners. We got to click on that and you will find it is telling assignment to constant variable that is not allowed that the reason it throws the error. So let's go back to the visual studio code. One thing you noted on the let and the constant keyword is the latest addition in the job script. This is more than we to create the variable within the JavaScript language. So one rule of thumb you should remember whenever you were creating a variable went to use let and went to use constant. Whenever the value off the variable is getting changed, you should go with let. And whenever there is a no change and the value is going to be constant most of the time, then there is going to re constant. So that means here we need toe, specify the gender with the constantly would. So here you must re asking These are the new we to create the variable. So what is the older way? And what is the older mechanism to create the variable within JavaScript? So there is another key word, which was mainly used earlier to declare the variable, and the key would we reuse earlier was what do we need to specify the war on the name of the variable and the very well. This time we're going to use each and we will tell 68 So let's console log it. So let's write console dot lock and we will tell the print, age and semi colons. Let's remove this one so that we will not get better. Save it. Let's jump into the rather console, so here you will find it. Hats console log the value 68 for the age variable. Now let's proceed for the No. Let's discuss about some of the general rules while declaring your variables, and the rules are you are not allowed to provide the spaces between the variable name, so the moment you will give their spaces than editor itself through the Aero variable name should not contain they space. This is the rule number one, and the rule number two is It is always better to provide the camel casing for the valuable name. Camel casing means the first letter. First word would have the smaller case and then off towards the other word. Should I start with the capital Liquor? This we'll be clearing the variable or defining. The variable is called camel casing, so it is always a good practice, and this is a recommended practice within the industry. The third point on another point, you should remember that a variable name should not a start with the number the moment you pure eight number in front off the variable name it will through their CEO. It has thrown later. The editor. It's a it is not allowed within the JavaScript, but you can use the number within the variable name anywhere apart from the starting character, for example, caused them to will. This is allowed. Then you can use under the score also within the variable. Another point you should remember. You can't use result key work for variable name, for example. Here result. Keyword is like let const where? So these are the result. You'll you can't create a variable name called where the moment you will rate it, it will throw their. So you should make sure that this world doesn't belong. Toe the result keyword. So let's change it. I will share the some of the references which you can referred to. Get the detail in Bordeaux. Mazzochi would within javascript Another point. You should remember that this is not related to JavaScript programming. You can use it for any of the programming language. Whenever you create a variable, you should provide something meaningful name so that it will represent the context off the variable. For example, if you were writing something regarding the course, you should have a variable name called course name if you're designing some of the application for online course. So this really helps toe other developer who actually walking along with you in the project . They can also understand what is the context off this particular variable. So it is always recommended that you should provide something meaningful name, toe the variable name. So no one of the important point which I want to to discuss is that is documentation off your cold. Whenever you're writing any off the application in any of the language, you should document your court. So how you can document your court, so to document our code, what we need to do we need to use There is something called comments, and in the Aurora script it offers to taper comment. One is in line coming, and 2nd 1 is the block comic. So for inland common, we use double slash and then whatever we want to print, for example, where we are using course name so variable to a store horse name. So it will telling course name variable is used to restore the course name. So this way, other programming whoever is looking into your court, they can easily understand it. This is one off the way. You can be fined the documentation with the help of Finland. Comment. There is another way you can use the block comments. So how we can define the block coming last star against our clothes. So this is no block permit and the benefit off using block comment is that you can create any number off line within, and that is not being passed by JavaScript. Interpreter. So this cereal, right this court block will never be executed within the page as it is a comment so you can use it for documentation. And whatever the detail with you want to provide for this particular block off court, you can write it over here gender for boarding, gender detail age for a detailed something like that. Whatever you're writing, you can write it over here as a documentation on this. This is really a good practice. One more point for coming is that you can't want to use for the documentation you can use. Comment the block as well. Suppose if your writings I'm called and you want to retained that piece of cold within the file, but you don't want toe. Execute it. So So In that case, you can come in that block by using in line. But if you want to come in all the blocks so you can use the block comment like this so whenever this program will done, it will not execute the commentate called another point which I wanted to discuss about whenever you are using Let and const So it is always recommended. You should use the chrome browser. If you're using some word rows of late, I eat I nine or 11. It is not being supported within that browser. So it is always recommended to use the crew Mroz of on this note. I'm a stopping over, you see in the next session till then. Bye bye. Take care. 5. DataTypes In JavaScript: Hello, guys. Welcome to another station in this session. We're going to talk about data types in Javascript. So let's start our discussion within the hour. Escaped? We have various tape of data type. You might not be aware that in our last station we have used to type of data type that is number where we have used the each. And then we have used a string where we have written the mastering JavaScript as well as mastering Web development. So in this station, I'm going to walk you through and give you the overview about all these data types, which we're going to cover in detail in the upcoming station. But decision I have kept it for to give you the somebody about each of the data type rich region really using JavaScript. So, no, let's start with numbers numbers. We have already seen that when we were doing the example in our of legalization, where we have used the number that it's 68 we can even please the symbol value as well. Then we have discussed about the string where we have used mastering javascript where we have written, this is string and we have a story in tow. The variable and the variable wa scores name where we have restored the string toe the variable course name for bullion we used true and false. There is a special type of variable that is Cornel within JavaScript, and that means that it is not having any values. No, let's proceed. For the we have another type of variable that is called undefined. Undefined is also refer to the no value, and there is a very thin line difference between null and undefined. No means an empty or non existence value. In no case, Noel is assigned and explicitly means nothing, while un different typically means of variable has been declared but no defined yet. If you're not understanding about Nolan undefined right now, no problem. I'm having our details isn't about it, and we will do some example on this. Then you can easily understand it for a timing. You just consider that Noel is a kind off day today, which is tours no values and undefined. It is also the same. Were variable has been declared, but it is not defined yet. No, let's proceed. Photo. Joe Episcopo forces another type of data types that is object. So in this respect we have various types off object data types. That is, Ari dates literal, which we're going to use in the upcoming session. We're going to discuss in detail about all these values. All these concepts. No, let's proceed. Photo. In a recent tradition, we have a data type that is called symbol, which is again are kind of object, which we will look into in our upcoming session. One thing you should remember that whenever we are using lead on the cost while defining the value, we don't need to explicitly say that you have to restore the number you have to restore the string you have restore bullion. It is not like that. We have to simply passed the value, and whatever the type of value we're passing, it should restore that kind off later. For example, if we're passing a tickle toe 68 that means that variable is a number day that I if we're passing a value mastering your way script than that district, become string data type. If you're passing true or false value, that means it becomes a bullion value. Same is the case off all other data type which region to these touring variables. So here you must be asking that What if you want to use the same variable to restore some different data, which is off different data types, So can we do that? Yes, we can. You can override the existing variable with the new value, which is off different data types. That is possible in JavaScript and that the reason the job escaped is mainly called as loosely type language where you can use a single variable to his tour, the number, values and later point of time. If you want to use the same variable, we store the string values you can use. The same valuable and interpreter will not complain about if you have ever been worked with she sharp or C plus plus, where you can find that data types. Nature is a strict type where you have defined a particular variable as an integer, so that particular variable should store one leader. Indeed, your value. You cannot continue current a store. The string value within that were table without casting it. You don't understand the world that that's okay. It is not required over here. We just have to understand that we have to type off data types. One is the loosely data tape. Another one is the restricted that I We will have a total discussion about these concepts in our upcoming station. So don't worry about this. I will make sure that after completion of the schools, you will understand all these concepts. So on this note, I'm stopping over here seeing the next session. Tilden Bob, I take you. 6. String DataType In JavaScript: Hello guys will come to another station in decision. We are going to discuss about the string data type in JavaScript. So let's jump into the visa list to real court to understand string data type in JavaScript . So prior to writing the court for the string data type in JavaScript, we have to understand that what? Actually we stood in string data type. We can use the stringer to taped to it store letters, characters. We can use it to his to name email, address, gentle and something like that. So, no, let's cite something into the a string and that will be printed in console log. So how we can do that? We have already seen that. So we will write Concern Law, and either we can use double courts or a single court. And then we will mention the thing, which we want to explain to the console look. So here we can rate loan Java script step by a step, saving. Let's jump into the Roeser to see the output. So here you will find that it has printed the string, whichever were provided into the console door lock function. Now let's proceed further. So this is one of the street example we can use with the variables. So how we can write that we will tell that Let name I will provide my name and he'll save it. And now I can console, log it, console door long and we will write the name and semicolon. No, let's go to the browser. So here you will find it has printed my name over here. Now let's proceed further. You can also store email within I string so we can tell that the medical to endorse your engine at x y z dot com. So this way you can install Damon and that also you will print. You can print who is drink within the same console by writing like this comma separated, it'll email, Save it. Let's jump into the browser. So here you will find that it has printed both those strings. No, we will discuss about the concatenation operation in Joey's. Whenever we are adding to a string together, that operation is called current Captain Nation. So how we can do that? We can define a variable that is called forced name. We can call it apt name and here we will tell that my first name and there is another variable where we are keeping the last name. So here we will tell that my last name and we will also put the semi colon over here. And then we can tell that full name over here and we can define it. Let and then we will tell that after name, plus on for a space we need to specify this character is space character and then again we need to specify the plus operator and the last name. This plus operator is worked as a concatenation operator within Jiawei skipped, which will act to a string together. So let's look into that. Here we are, adding pre string one is the first name. 2nd 1 is this space character along with the last name. So let's jump into the browser and let's look into the output. Worked or put were getting so for that we need toe, log it into the console and we re tell their full name and here save it, nor let's jump into the browser. So here you will find the third log is our concatenation operation, where we have added to a string together in this example, I have used my first name and the my last name took on Canton eight with a space. No, let's proceed further. Now we will discuss about extracting the character from strength. If you closely look into a string than you will find that it is nothing but a character ready and which is having different, different value. Add different, different places. So what? I mean that suppose I wanted to extract the post value from the first name. So how we can do that, we can use the position value. So how we can write that we will tell that console dark log, and here we will specify APP name, and we will tell the position off the character in JavaScript, the position it starts with zero. So you should write zero over here on saving. Let's go to the browser and you will find over here that it has printed the first character off that particular string. So this way you can easily extract any of the character from my string. Suppose if you want to extract the second District, then you need to specify one as it is a starting with zero so 01 that is the second position is drink than go to the browser to see the output. So here you will find that it has extracted the second character. That is you in my first name. Now let's proceed further. No, we will discuss about the length property off the strength. Supposed that if we want to calculate the length off our first name. So how we can do that? So there is a length property and we will tell that console dot law and F name and we will tell Lenin Seaweed goto the browser. And here you will find that it has returned the number six as my name is containing six characters. So it has returned six. No, we will discuss about method. So suppose if you want to convert this first name in tow. Upper case. So how we can do that? So, joy script off first us so many operations in the form of methods. So, for example, for this case, we are goingto tell that console not love and we will tell that I want my first names would be printed at to a parts. So there is something called to open. So here we will specify to upper case and this is a method which we're calling toe convert . Whatever the value which it contains, it should be converted into the upper cave Semi colon Over here Let's go to the browser to sweet output. Any will find it has printed my name the first name into the upper case. One thing I wanted to tell you that whenever you were passing any variable who grew up OK, so it is not changing the original value. Suppose if we're printing again the f name, then it will return the same case whichever we have provided over here that is the capital case. If you save it and you want you go back to the browser, you will find that this has capitalized this one but the original value will remain the same. So let's go to the browser. And here you will find that it haven't changed anything within the original variable. So let's proceed for the here. I have given only one example of the method. There are various method for different different operations which we want to perform on my string data type the way we have used to upper case, there is something called to lower case that we used to convert it into the lower case off the given string. So no, let's look into some of the important methods which we're going to use for a string operation. On the other method we're going to use is that last index off method, this method we generally used to provide the index off last occurance off corrector within I string. So, for example, if we were printing console dot long and here was prior to using it, we will store it in tow. Variable. So tell it, let last index off variable. And here we will tell that my last name and I want the last index soft matter that will find last index off character. He here we are using to a occurance is there. If you will see your my last name, then you will find that there is to Auckland so free so the output it will return the number four Why? Because the indexes starts with zero So 01234 even though it is existed. The number five position and number five position is when you start counting from the zero pollution than it Wickham for here We have to specify on index off, Save it, goto the browser and see you. It has returned number four. So why it has to turn number four because it fouled the last occurance off character within the string is at the fifth position and when you are counting from zero toe this position, then you will find that it is returning the number four as our indexes starts with zero in JavaScript. Who? Let's proceed for the no. We will discuss about another method that is called SLICE, which we generally used to slice the strength toe. Let's look into the example Suppose we are having a str and where we're having We have written like let's understand, slice So here we want toe extract this Let's word So how we can do that? We can use the slice method. So let's do it. We're going to create a variable called str slice and then we will tell that from this str I want to extract the character from where to where you want to extract? Oh, here we will specify slice method on. We need to specify the position from where to where you want to extract the character, and we're going to tell that we want for character, and that will start with zero. So we were told that zero comma and how many characters we want to extract? We want to extract four character, that is, Let's so write it for Save it right console on school. Thought long, and he'll reveal a specify yesteryear. Slice. Save it. Let's jump into the browser. Then you will find that it has extracted the four character. That is, Let's so this way you can easily extract characters from Are given a string? No Suppose if we want to extract this, understand word. So how we can extract that. So let's go on the position. So it is that it starts with Let's is four words than the space fifth, and it starts with six and then 78 9 10 11 toe. 13 14 15. So here, from 6 to 15 I want to extract so that we will get the word understand. Save it. Let's jump into the browser. We have a wrong calculation. We need to specify position five. So here you should, especially for a position five. Save it. Let's go to the browser and then you will point that we have extracted the world, Understand? So this way you can use slice method No, we were looking toe Another method that is it willing to slice? That is service string So sober string on slices Almost same You can look into the output Then you will understand that What? Actually their differences But I will give you some of what we were about it So with slice were telling that from which position Toe which position you want to extract the string? So what we will do? We will copy this one and instead off slice we're going to use We will tell that serve str and here we will tell that serve str This is the method we're going to use on Then we will print the serve str and you will get the difference about slice and sub string So let's jump into the browser. So here you will find that sub string given us from position five till position 15 wanted with the character it founds It has extracted that value But here you will find that the service string return from fifth position to 15 characters so it has extracted 15 characters from the Given a String. So let's understand, with an example over here with the slice were telling that then it's logician. Position is at Position five and from Position five to position 15 Water with the character we are having. They turned those. But here with the service thing, we're telling that I want the character position, whatever the character. Which existing position. Five till 15 characters on the position. It starts with Trip Place and return me 15 characters after that so that the reason you will find over there it has returned. 15 character, if you will count over you. 123 45678 9 10 11 12 13 14 15 So it has returned. The 15 character from fifth position slice has returned the character from position. Faith to Position 15. No, let's look into some other method that is called replaced. So let's look into that. So how we can use replace? Suppose that in this a string we want to read place the slice with JavaScript word. So how we can do that? So we returned that str replace. We're going to create a variable And here we will use str dot Replace on. We want toe change from slice toe JavaScript. Save it. No. Do the console. Log on. We will tell that Mystere every place. David, Let's looking toe the output. So here you will find it has replaced the world slice to job script. So with the help off, replace method. You can easily replace the world or any characters. So with the help of replace method, you can easily replace any string or any character within a given the strength. So this is what I wanted to demonstrate you in this session. See, in the next session till then, Bob, I take care. 7. Number Datatype in JavaScript: Hello, guys. Welcome to another session in this session. We're going to look into number data type in JavaScript. So far, we have seen the string that that I know we will work with number data type. So let's jump into the visual studio code to get the understanding on number data type. As we already know, that number has various forms, interior as well as has decimal form it as well. To understand it better, we're going to do an example where we will create a calculator to convert the cell system Preacher to Farrah Night temperature as we know that we used to types off. You need to measure the temperature that is Celsius and another one is the for tonight. So for this particular case, we're going toe create a calculator where we will pass the census temperature and it will convert it to the Maronite temperature. So for that, what we need to do, we need to define a variable cord Celsius. And here we will tell that of value for normal body temperature. We will pass it 37 for the normal human body temperature and then we will define to constant valuable. It should be 1.8 as it This is coming into the formula. So we need to tell that const one equal toe 1.8 year. We will specify the semi colons and there is another constant which we need to specify. That is goingto be 32 that is constant toe. So no, the formula to calculate from Celsius to Farrah night is like this. We need toe tell that it is going to be like this. So here we will use the block comment which we have already seen and the formula of it. We're going to use it Celsius. Multiply it by 1.8 plus 32 on desert is our fair and right. So let's do this formula. So what we need to do we need to tell that ruin programming. We will tell that letter equal to sell that it sells yes, multiplied by 1.8 plus 32. So here you will find that we are using to operator One is the multiplication operator. Another one is the addition operator and along with that, you will also see that we have used their decimal value as a constant as well as the indeed your value as a constant, and along with that, we are also passing the value, which is going to change. And whenever we want to calculate any kind of temperature from Celsius to for a night, then we need to pass that. So, for example, we have been its allies. It 37 as 37 is the human body temperature. So let's do the console lock and the other night it Let's jump into the browser to seethe out. But then you will find that it has returned 98.6 temperature. That is the fat tonight skin for a normal human body temperature. No, let's proceed photo, and we will look into some of the operators between used generally to perform the operations on numbers. So let's jump into the visual studio code. Let's understand what are the operators have level within the job escape format operations , so we have following operators. We are having plus operator, which we have already seen. Then we have multiplication operator than we have. The reason operator than we have percent is operator that will return us the remainder than we have a square root operator that is double a strict. So let's look in tow one by one. So we will define to variable let a equal to 20 let be equal toe 30 And here we will provide the semi colons and then we will tell that console dot law and here we will specify output, which we're going to declare this variable ears of what we will first print it. So here we will tell that output equal toe a plus B. This will return us the edition off two numbers. So let's look into the browser. So here you will find that it returned us the edition off to number with the help of the plus operator, let's proceed further know instead of plus operator, we will use minus operators. So let's look into the output word output we will get to hear. You will find that it has returned minus 10 as it has sub structured a smaller value but the larger value. So these all our basic operations. Then we will look into the divine if you will use this divide operator, let's look into the output word out. But we're going to get so it has returned the decimal value that is 0.6. Except now let's look into the remainders for remainder were going to use we over here and over here, and we will use the percent a sign our let's looking toe the output so it has returned the number 10 that is one and zero. No, we were looking toe Esquire route. So how we can calculate the square root so we're going to use the double district sign to calculate their square roots. So let's look into the output. So here we get the larger number. Let me reduce the number so that you will understand this output. So let it be to win three so that you can see the difference. So it is calculating the square root off the variables, so let's jump into the browser. Save it seed out. So here it has calculated three to the power toe that is nine, and when you reverse it, it will give out eight. So let's do it this time. Let's calculate a to the power bi save it. It will return output eight. So here you will find that it has returned output eight because it is too to the power three. So let's proceed further. No. We will discuss about the order off operations order of operation used by JavaScript to do the complex calculations who, let's understand with an example. But prior to writing an example, I would like to tell you about order of operations. Order of operation is mainly related toe in what order? The operations on the number is being performed when we are having multiple operators used within a complex calculation to another question. Over here is how javascript or from this complex calculation. So it is based upon the same mathematics rule which we have learned in our primary courses off Matt and the rule which we were falling earlier. The same rule is applied over here. That is the rule off board must we will tell that board waas So be for bracket or for order . Order means the power operation and the square root operation. All this belongs to this order operation than the reason then multiplication, then addition, then subtraction. So this is the order which job script interpreter follows while doing the complex calculation. So let's write a little complex calculation. So in this example, we're going toe, create a variable cord axe on this time, we're going to write some complex calculations, so we're going to tell that to multiplied by 20 Penis tell square weight toe. So save it. So how this calculation happened, So what will happen? It will first calculate this break it operation because it starts with B. Then we followed by this order operation that is a square root and at the end it will calculate whatever the result, which comes with this calculation, it will be multiplied way, too. So we will write console dot law. It'll that ax save it. Let's jump into the browser to see the output. So here you will find that it has returned. Now put 200. That is indeed a correct output because to minus 10 as 10 and 10 to the power to his 100 multiplied way toe is 200. You can verify this by doing little changes in this calculation, so let's do it. Let's remove the bracket from here, and this time we're going to place this. Break it over here. Let's see what out, what you will get as it has changed the order off execution off the operation. So let's look into the output. So this time you will find that earlier it has returned 200 but this time it has given us the output minus 60. Why? Because we have changed the order off operations. No, let's proceed. Photo. No. We will discuss about shortened operators, which actually gives us the handy mechanism to perform the addition and subtraction off the values in a shorter way. So what? I mean to say that let's understand with an example, suppose that if we're having a variable called count and that is any sliced by zero and if we want to inclement this by one. So how we can do that? We can write that count. Will to countless one who let's look into the output. Get out what we need to write the console locks on its carpet and here we will tell that Don't save it. Let's look into the output now. When did it has implemented the value by one? So this is one off the way you can increase the count, but there is a sort ist way also every level practice court by using those sort and operators. So how we can use it, we will simply tell that instead of this we can tell that count plus plus So this will incriminate by one. So here it is telling zero No output will be the same. Whatever we got earlier, that is one. So let's look into the output. So here you will see that earlier it has returned one this time. Also it has returned one. No, let's proceed further. Now suppose that if we want to increment by count too. So how you can do that? So there is other way you can do it. You can tell that count plus equal to So this is one of the way you can inclement it. So let's come in this out. Save it. Let's look into the output. So here you will find that it has indeed incriminated I value to. So we have seen the addition operation so we can do the same thing for this abstraction. So let's look into the visuals to record. So this time we're going to tell that or minus two. Let's look into that. What's out? But we will get to hear we got minus toe earlier. We got to because we have. In addition, short and operator But this time we have use obstructions or turned operator that's proceed for the likes looking toe this minus minus operator as well. So here, instead of plus plus what we will do, we will use minus minus and we will look into without portrait should return minus one. So let's look into that we ended. It has returned minus one, and you can use this with multiplication operator as well, so he'll save it. It will return us the value for so let's look into them. But first, let's come in the steel we need to change in its laser willingness lies it with to save it . So let's look into the output else. What will happen that if you provide zero over here, so it it multiplied zero into to it? Return zero. So that doesn't make any sense. So we need to tell that would be some value other than zero. Save it. So let's jump into the browser to see the output. So here you will find that it has returned the value for family. You can use the division operator with the sorting Let's do it so it this time it will return one. David Then here you will find that it has returned one. No, let's proceed for the no, we will discuss about now. That is not a number. What exactly? Nannies supposed that if you want to trace something irrelevant, which is not making sense like dividing a number with the string. So it will return, Nancy. So let's create a variable. Or let on example on this time what we want to do. We want to divide a number 66 divided by how you so once you do this thing, then it will return man way because this operation doesn't make any sense. So let's look into the output. But prior to seemed out. But we have to look and so log so that we can get out. Put on example semicolon, Save it. Let's jump into the browser now. So here you will find that it has returned now. So that means not a number in a simple down. We can tell that it is an invalid operation on number so that the reason it is returning then Now let's proceed for the no here. When we're performing the operation like this, sweetie has returned us now. But suppose that if you want to add or con coordinate, I string with the number. So what will happen that internally, it will convert the number into a string and then it will can coordinate it. So let's look into that. Suppose that if we want to bring the count with the number so how we can do that, we will trade console log And here we really specifying the count equal to Plus this is the addition operator region really used for Concorde in ating to a string. But here we are specifying the count which we have calculated earlier. So now here you will find that it will add two plus two and it will return for So let's look into that jump into the browser. So here you will find that it has returned us count equal to food. This way you can concoct in it are string on the number. So this is what I wanted to demonstrate you in this session. So let's grab decision. So in this session we have seen how to assign a introgen how to assign a decimal number than we have also seen how toe convert or Celsius toe affair a night a scale then we have seen different operators over here. Then afterwards we have looked in tow. The board most principle were the order of operations JavaScript follows. So we in the suspect we have looked into a world must rule. Then afterwards we have also seen that short and operators. And at last we have seen the nine operator as well as we have also seen the concatenation off a number with I strings on this. No time is dropping over. You see, in the next session till then, Bob, I take you. 8. Template Strings: hello. Gays will complain a decision in this city, and we're going to talk about template strings in JavaScript. So let's jump into the visually studio to discuss about template the strengths. So we're into the visual studio code. So let's understand what actually template strength in our previous is and we have discussed about on Kartini Tingle String with the number with bless operators who, in the same given scenario, suppose that if you have more than five string and five numbers and if we're going toe can coordinate with the plus operator than it looks very messy to how we can do such concatenation using template history. So let me write an example prior to using the template of string so that you can better understand the temperature string concept. So let's slide without template. Example. So suppose if you're having a number 1 to 4 to let state number one equal toe body that number two equal toe 30 blood number 3 70 were having let number four equal to 40 TV and the last we're having total and we're telling that party telling that number one bless number two plus number three plus no. Before now what we want. We want toe bring some message, something like this. So let's create a message Variable. And here we want to print something like this. Number one is greater than number toe. Then we won't toe tell the number three is total off number one and number two save. Now we are going to extend this message again. We re tell that number for years till that equals two plus number one. Finally, we will tell that the last message they want to keep his toe or all four numbers is number four. So let's look into without foot. So this way we air con coordinating number in the string together. So let's look into the output. So let's console log it first and tell that message. Let's jump into the browser to see the output. So you will find that it has concatenation the strength as well as the number. So it has given us the message. 40 is greater than 30. 70 is the total of number one and number 2 40 equals to 40. The total off all four numbers 40. That is wrong with your belt, that is it all. So what is the total. So let's look into that. We should mention over here. Total Save it. Now let's look into the output. So here you will find that it has printed the message. The total off all four number is one itty so CEO Home s is this. There are so many concatenation operator we have used. When this number is getting increased, it is getting more complicated. So what is another way? So that we can simply find this complication. So the way is template testing. So let's looking toe that. So we're going to use the same number, but our way off on coordination off the number with the string is different. We would use the tempter district, so we will tell it. Let the message equal toe the template listing. You can specify with the help of back ticks, so we have a specified whatever the message will right over here, you can easily specify the valuable with the help off dollars line along with the curly braces. So let's look into that. Now suppose that if you want to access this variable, so how you can access it, you need to press dollars saying and the curly braces And within that you will tell that number one is greater than dollar sign number two. So see you. I haven't used any kind of plus operator over here. Full stop. Then we were told that dollar number three is total off. Total number one and number two No full stop over here. So we re tell that dollar the variable s number four is equals to number 12 here we have to mention Oh, no. Here we will mention the total will tell that the total Oh, all four numbers says dollars total. We need to specify a dollar and then we will, especially for a total. Save it. Let's console log it console dot law on de specify the message that's looking to the output to that's jump into the browser it throws at her. Dimas is no different. Spelling is wrong. We corrected. So here the spelling Israel double s they were Let's jump into the browser. That's clear. It reloaded. So here you will find that it has printed the same message like this with the help of template a straight No. You can imagine how easy it is with the help of template history. and it is really easy to manage. This is what I wanted to demonstrate. Your decision seemed an excess until they involve I take your 9. Arrays: Hello Guys will come to another session in decision. We're going to look in tow areas in the away script. So let's look into the topics water, the topics we're going to cover and decision. So in this session, we really start our discussion with understanding. Every once we understand that it, then we will learn about how to create number. Every once we're comfortable with number arid than we will create a string area. We will also look into an example to create mix Terry. Once we understand that we will use the Barry Properties once we understand that the properties then we will look into is useful methods off JavaScript Harry that provide the print functionality all day. So let's start our discussion by understanding the addict. So what? Actually a raise in any programming language? The definition off the arrays. Same. An area is a single variable that is used to restore different elements. If you closely looking toe this diagram, then you will find that we have used the Java scripts in text and we have created a variable cord addy and within that we have a store, different elements which contains different number. This is a number, and we have provided different numbers on each of the different positions off the indices who suppose that if we want to access the first element than you need toe access the 0 10 This is suppose that if we want to access the fifth element than you need toe access, the fourth in this is why it is so because the area and this is it starts with zero be used at it because sometimes we want to his toward list off element and access them by. Your single ready will addict comes very handy when we want to design some logic, which is based on group off data, and we want to apply single operation on that group of data than such kind of for functionality we can easily achieve with Harry within programming language. So it is very important concept to understand, always jumping toe. The visual studio called to see all the examples how to create our number every how to create a string Gary makes Jerry. We will also discuss about some of the properties. We will also look into some of the other methods, so let's jump into the visual studio code No. Let's create the number. Every how we can create the number is well, number at a create number, as we can tell that. Let no Mary and we need to specify the square bracket to create Inari within JavaScript. And we can specify any really, whichever you want toe put into this number at like two comma pulled coma. 8 10 So this way you can create number Ari. Let's console log it. No marry. Save it. Let's planet. Let's step into the browser. So here you will find that it has printed the Addy and it has given us this information and he will see you. It starts with zero and at zero position. It contains the number two at first for at 2nd 8 and 3rd 10 and it issuing the length. This is length. Is the property off? No, Mary, no. Let's proceed for the No, We were looking toe How to create a string, Gary. So let's do it. And here we will create the ruble, Harry. And here we were defined some of the fruits, apple or ranges, Gray papaya. Now we will console Log it. So how we can do that? We need to tell that console door law, and we will tell that our fruit ball Ari and he'll save it. No, let's jump into the grocer to here. You will find that it has granted oh, string Gary, and it contains the same. Whatever we have provided within the area are different positions. So this way you can easily create a string Eric within. Joe ask. You know, we were looking toe how to create mix, Terry. So let's jump into the visual studio code. So here you can create makes Terry by simply mixing board the data type within the single lady. So how we can do that, let's do it. And here we will define some fruits Apple, orange A's great, and some, indeed, your value. You can specify it is not making any sense, but you can use it. So, intent on showing you this example, I wanted to demonstrate that it is possible to create mix set in their ways script. If you consume, lock this, then you will find that it will not throw any error, and it will print all the values which is being installed within this area. So let's jump into the browser to see the output. So here you will find that it has given us the mix. Terry Output. No, let's proceed for the no, we will discuss about the properties off area and property, which we're going to discuss about is the land property. We can easily calculate the length off the area and the length of the every means. How many number off element exists within the Ari. You can do this all pop lend property. So if you're right here, makes area door length than it will return you the length off the area. So let's look into that. It has five elements, so it will return the number five who see you. It has returned the number five because we have printed the length of the mixed, adding to Let's proceed for the no, we will discuss the world some of the method which is being used within a day. So first we really start with how we can join the element off Ari. So we will use the joint method so we can tell the joint may 3rd. So how we can do that? We will use the joint method. We can tell that for example, fruit ball. I will take so fruit ball door joint and we will join with semicolon separated. So what happened? That it will give us the output as a single string and which is containing all these fruits with the semi colons separated? So let's printed with console long. Let's do it the next jump into the browser to see the output. So CEO, it has returned us a single listing and it has returned. Although element off fruit ball, which is semi colon, separated this way, you can join all the elements off an airy. Now let's proceed for the another matter. We will look into the index up supposed that if we want to find the position off a particular element. So how we can do that? We will use our method card index off. So, for example, if you want to find the position off oranges in fruit, Balto, how we can write it. We can tell that football dot index saw and we will pass the name of the element oranges. And here we will tell that consoled or log save it. Let's jump into the browser so it has returned the position one, and that is indeed it is existed. Position one. Why? Because so because in JavaScript position to start with zero. So let's proceed for the now. Another method we will look into that is called concatenation con coordinate Method is used to contact in it. Two areas. Let's do it. Suppose that if we want to con Katyn ate some more even numbers in this number. Every so how we can do that. So let's do it. So here we will tell that let reserves equal to numb Addy. And within that we can tell that one cat and we will pass some more. Even number 12 14 16 Save It meant it consumed dot Long. No married. So let's look into the output. Let's go to the browser. We need toe console log result No goto the roser. So here you will find that it has conquered innate ID to worry. So this way you can contact anywhere is let's proceed for the other method which we're going to discuss about is the push method push method is used toe add are in certain new weight, um, within the ari. So, for example, if we want to add some more fruits in this fruit ball, Larry. So how we can do that? We are going to use a method called Push. So, for example, let's do it. Root ball door push on. This time I'm going to add beach. Save it. No console. Log this fruit. Let's do it. Console dot law group ball. Save it. Let's jump into the browser to see the output, and then you will find that it has indeed added the fruit Pete over here. So this way you can insert a new item within the existing area, said, Let's proceed for the no, we were looking toe. Another method that is compartmentalize is generally used to remove the last element from the area. So, for example, we have added the PCI element into the area. So if you rape our with football, then it will take out the peach elements. So let's trade. So we will tell that pop and we were tell that food bowl daughter, we don't need to pass any element, and this time we will console log it controlled Citro will be better. We can delete this one. Save it now let's jump into the browser toe. Three. The output it has this time it has taken out the speech elements, So let's look into that. So see you. It has taken order Beach Element, which we have pushed by using Bush metal. But this time we have taken a toll pop method, so poppy isn't really used to remove the last element from the area. So no, you must be asking that how I can remove the oranges or grapes or any other element which existing some other indices to. Let's look into that how we can do that. So let's do it. We're going to use a method called this place, and this time we were Tell that fruit bowl dot this place and we will specify the position from which position I want to remove so we can tell that start number should be one body and I want to remove. So let's looking toe that what it is coming that support the console love Over here. Save it. There's something to the browser toe. See you. It has removed the oranges from the fruit bowl list football area. This is what I want to toe the mistreat you in decision. So let's wrap the station. No so in decision we have discussed about Ari. We understand what is actually a raise. We have looked into number Ari. Then we have also created a string away. We have also launched about how to create mix. Terry, we have seen length property than we have discussed about Adam Metals. We have seen various methods like joint index, off concatenation push box place. So I hope you enjoyed decision and you understand Ari and know you have good understanding about Aryan JavaScript. So on this note, time is dropping over here. Seeing the next session till then. Bye bye. Take care. 10. Null And Undefined: hello. Gays will come to another session in this session. We're going to discuss about Nolan undefined. So let's start our discussion. So so far we have already seen the number data type string data time as well as we have also seen the areas in our last session. So let's a star discussion or Norland on the point. What Norland undefined is almost similar. So no means and empty. Your non existence value now is assigned and explicitly means nothing, while undefined typically means variable has been declared, but not yet defined. So let's understand with an example, so that you can have a better understanding about non an undefined. So let's jump into the visual studio code. Suppose if we're having a variable cord marks, let's tell it marks and we're not going to assign any value, and we trade toe print this variable. So let's look into that water to actually returning. And so Lord Law and pray toe, print it, save it. Let's jump into the browser to see the what. So see you. It has returned us on different. So we have seen that if we haven't assigned any values, then Rosa has assigned it undefined. Supposing kids, if we try toe, do some operation on this on different variables. So let's looking toe that what will happen? So just marks plus 40 and we will use some temperate string over there, and we re tell that my mother is dollar. So let's jump into the browser to see the output. So CEO Roeser has automatically assigned this undefined value wherever it finds the marks variable to hear the first point to remember Come undefined is being assigned by browser Whenever. If we don't provide any kind off in this lay addition toe the variable, which we have declared within a program than in such scenario, Roeser will automatically defined it as undefined. Now you must be asking that what? Actually then Now let's then to answer your question. No, only the value which we explicitly assigned to the variable. So let's look into that. We have seen out very worried for inter marks. Lovelier, it is assigning it as earned the point. And that is being assigned way Broza. No, In this case, we're going to assign no value. That means it is an empty So let's look into the output. What out? What it is giving us two senior it has given us the first value is no practice for months. And then we have used the formula marks plus 40. It has returned us the number 40 and then it has returned us. My mark is no. But in the uglier case, if we haven't have applied the non value than in that time for the second value, it has returned us Notre number. So here, the second point to remember come null is an empty value. Which region really provide toe the variable toe? You You must be asking that Why actually reuse? No, it means that empty value. Then, to answer your question, I will tell that knowledge is generally being used as a research tool. So where does it mean? So it means that whenever if we're working with any form and user is feeling some form on the user submitted the form than on that scenario. We need toe reset the form so that it will look like the data is being submitted and you will get the new instance off the forms. Who at that time it is no can be used to clear out each of the fields within the form. So in this time is dropping over here. I hope you in your decision and, you know, know the difference between Norland on different. If you have any doubt, can drop me a message. I will answer your question. So that's it. Gates seeing the next. Until then, why take 11. Boolean And Comparisons: Hello, guys. Welcome to another session in this session. We're going to look into bullion values as well as we will also discuss about companies and operators. So let's jump into the visual studio code to understand this topic. So we're into the visual studio code? No, we were looking toe what exactly 1,000,000,000 values in JavaScript. In joy script, the William Value is represented with true and false keywords. So let's understand with an example, suppose that if you're writing console daughter log and if you're writing through and if you're writing false, then you will see you. You will find that the color of this text is different. That means it is representing the bullion value it is, nor the normally string which region really print like this. If we write like this true comma vaults, then through which you have written with all gold sack is different than through which you have written with the court. So these are two different thing in javascript context. So, for example, if you print this, then you will find that it will be represented like this. So let's jump into the browser. You will find over here that it has printed as is there is no much different, but we will see the difference in our next example. You just remember that this is how it is being printed, the bullion values printed without the courts on the string values printed with the courts . No, let's proceed further toe, understand it better. So now you must be asking that what? Actually this true and false is to understand it better. Let's jump into a diagram. So in the last session, we have used this diagram when where we have discussed about the number data type and the string data type. No, there is another data type that is called bullion data type that is, mainly having to values one is true. Another one is the faults. So whatever we have discussed, no. So that is Ah, the presentation off the bullion data tape. So here the next question comes, is what actually the significance off these bullion values, why we should use these William values. So, to answer your question, I can say that it is useful and controlling the program flow using conditional statement when we are going to learn about Ifill's the statement or switches, or while or Doyle, and we want to compare the condition and ask for the output. We want to perform some logic than on that time. This Boolean data type comes very handy. Toe handle the logic, so let's go toe. The visual is to record to perform some of the exercises so that you can have better understanding about what Actually the significance off this Boolean values through and faults. Now, to understand the significance of the bullion value, let's do an example. So first we will tell that there is a variable called email address. We wanted to very find that whether it is a valid email or not. So we will tell that email address, and within that we will pass one. The military's like Okay, store engine at x y z dot com, and then what we will do. We will have an output variable, so tell that let out put out variable and where we will check that whether this is a valued email or not. How we can check it didn't method offered by your job. I escaped for the string that is called includes. So let's use this one, and within that we will pass the symbol at the rate so that it will return. It is a valid or not, and then we will put the result so consoled or log on within that we will pass our port. Let's look into the output what our portrait given us. So here you will find that it has returned the value proof. So this is a bullion value, which now we will use for further logic if we want to design any off the logic within the application. So this comes very handy for designing the application wherever we won't check some condition. So no, let's proceed for the now suppose that if we want to check that, whether the value exist within an area or not. So how we can do that? Let's create an added Let's take an example of Leah example. Suppose that if we're having old Woolery and we are having different fruits over here, apple or ranges Greathouse supposed that. If we want to check that, whether the any of the fruit is exists over here are not so let's look into the airport. What output it it gives us. So here we will tell that output equal to fruit ball dot includes and we will pass the value which which we want to search. For example, in this case, I'm passing happened. So let's look into the output workout portrait returns So see you it has returned true. Now we will pass some different value which is not exist within an area when we will look into what Actually that put it provides eso No, we're going to provide the value which is not exist. There's, for example, peach. Save it. Jump into the browser to see the airport to see you. It has returned falls this way. You can also check for the value which is exist within a day or not. No, let's proceed for the no, we will discuss about the competence and operators. So let's coming this out supposed that if you're having to numbers and you want to compare those two number with that, what are equals or not? So how you can do that? So let's do it. Let equal to 20. Let be equal to 20. So suppose that if you want to compare both off this number, so how you can do that, you need to tell that a double equal to be so it would. The values are same than it will return through. So let's look into the output. So here you will find that it has returned true. Now suppose if we're going to change any value like this be to 25. No, check that. What? Actually the output is You will find that it has returned false. Why? Because he and we are not equal. Now let's proceed for the another way to do The comparison is with the help of not equal toe so not equal to is represented with this exclamation equal to sign. It means that not equal toe. This time this will return true Why? Because A and B are not equal. So let's look into the output. So CEO, it has returned true Why? Because he and we are not equal. So it is satisfying the conditions. So so far we have seen to competence and operator What are those equal to sign that is represented with double equal to now we have seen not equal to no, we will discuss about the greater than sign. So this greater than sign is used toe check whether the one value is greater than another value. So let's do it or year really checking that whether is greater than being. So you tell what would be the result exactly. It would be false. So let's jump into the browser to your right. It came false, because is a smaller than be so let's jump in tow. The result is to record to see other example. No, We were looking toe less than Soto to find which value is less than we will use this symbol . So this competence and operator help us to find the value is lesser or not. So here we're asking that whether is less than or be so tell me the output. Yes, it is going to wither true. You are right. So let's jump into the browser to see the output and exactly give us output True. Why it is so, because is lesser than be. Let's proceed further. No, let's look into some other companies and operator that is greater than equal to. So this would be very handy when you want to check whether the value to value is greater or equal to condition. So in this scenario, we are goingto tell that whether is greater than equal toe be on this time. I'm going to change the value 25. So let's look into without foot water. Put it return so it has returned through as well because it contains both are containing 25 25 we're checking that either it should be greater or equal to with the help of greater than equal to companies an operator. Now, if we will pass over here 26 so in this condition also it will return through. So let's look into that. So this time also, it has returned through over here. So let's clean it and reload it, so you will understand it. So see you, it has returned through. Now let's go back now. Let's provide some lesser value over here, so we will provide 24 this time and save it. Let's jump into the browser to see the output, and this time you will find that it has returned false. So let's clean it and then reloaded so that you will understand it better. CEO, it has returned us false. Why? Because is having lesser value than be that is 24 is less than 25 Now. Let's proceed further No. We will look in tow less than equal to sign. So this time it will compare for equal toe as well as less as value. So this time we're going to tell that less than is less than equal. Toby. Yes, it is indeed. So let's look into that. So see you it has returned. True. Now let's go back now. Supposing for providing the value 25 again. So this time it will return through as both are equal. So here we're comparing the both the condition whether it is less than or equal to condition solar jump into the browser. So see you, it has returned. True. No, let's stay with some other condition. No, this time we're going toe. Give the bigger value 27. No, let's go toe the browser to see that put this time it will return. False. And indeed it has returned Folds. Let's clean clear it reloaded and you will see you. It has returned false. This is about number competence. And so suppose a scenario if we want to compare the string so you can do that as well. So let's do that. You can use the same operator for a string comparison as well. For example, if I am having a string, let name one equal to the occasion. And there is another name. Late name to equal toe. Dominick. Now suppose if I want to compare it so we can do that as well. We can use console. Who thought Log on. This time we're checking. Name one equal to name two to see the output water. But we will get so it has returned False to falsities. Coming. Let me on comment. Let me come in. The other console. Look So here that come in this No, save it. Goto the browser So you will find that it has given us the faults as name is not the same. Let's provide the same name so that we can check that it is working. Save it not Let's look into the output. And this time it has returned True. So that means that this operator will work for both the did the tapes. That is for number as well as the strength here. One thing I wanted to tell you that whenever if you're using greater than and equal to sign with the spring then it will compare the position off that particular string in the alphabet. So, for example, if you're going back again, the name toe is Dominic. And if you were comparing that, which name is greater than equal toe So you will find that a value Dominic is greater than the value Mukesh Wyatt a show Because here you will see that the letter D is coming early, then look ish. Why? Because so because the position off the tee is at number four and for position off M is 13 . So that means the comparison between four is greater than position 13. So let's look into the output water. But we will get so it should return. True. So lets looking toe that. So indeed it has returned. True as the same logic which I have explained, you don't let's look into another scenario. Suppose that if I am going to compare the smaller case with the upper case, who can you tell me what would without Porto? In this scenario? The lower value The lower case is always having higher position than the capital value. So if you compare this than this time, it will return false because it considered that name to with greater than name one, and it will return us fall. So let's look into the browser and it indeed return falls. So let's proceed further. So this is what I wanted to demonstrate you in this session. I hope you have learned about bullion and the companies and operators. So whatever we have learned in this session, we're going to using the upcoming session when we loaned Defense block as well as in the loop section as well. So on this note time was stopping over here, See, in the next session till then, Bob, I take here. 12. Loose Vs Strict Comparison: Hello, guys, Welcome to another station in this station we're going to discuss about Lose. Worse is a strict comparison. So to understand this topic, let's have been to the visual studio code between our losses and we have discussed about this equality Operator where we have used this double equal to sign to compare two numbers . So if you run this program, then you will find that it will return us the true Valley. So let's look into that. And here it has indeed rate almost the true value. So now the question over here is what actually lose comparison is so to answer your question, I was tell that knows, comparison is the comparison between two values. Ignoring the data title. Where does it means so here, whenever you are using double equal to so that means you are ignoring the data type. In case if we're passing this value like one is the 30. Another one is also 30 but that is our strength. If you compare this, then you will find that this will return us troops. So let's look into that and here you will find that it has indeed returned true, But both are different one is a string and one is the number. So to make it a strict comparison, we need to put another equal to symbol over here. Then it will return us false. So let's looking toe that will CEO, it has returned falls as we have all the JavaScript interpreter that you have toe also compare the data type by adding another equal to symbol along with it. So that means we are restricting it with the data type comparison as well. On this ray off comparing the values is called a strict companies and strict comp arisen also contains data type comparison along with the value companies and that we will specify with that we will specify with three equal to symbol. So here you must be asking why JAVASCRIPT is telling to dis truth even though both are having different data types. So what is happening behind the scenes? This system value is first converted into a number and then it is being compared and all this happening behind the scenes so that the reason whenever you are comparing with two equal to sign, that means lose companies and we're using So on that time it is ignoring this string value and behind the scene it is converting into a number and then comparing it and that the reason we are getting through every time. But the moment you will put another equal to sign, that means you're telling that don't convert it better. You can directly compare it so it forms that this value is a string value. And this one is the number value onboard data type is not matching and that the reason it is throwing faults, it is giving us doubt put as false like this over here. No, we were looking toe not equal toe with a strict comparison. And in that case, you just remove the first equal to sign and put exclamation mark so it becomes a strict not equal to sign. So that means it will check the same thing for north equality. Let's look into it on this time it will return through the CIA. It has indeed returned, true as what? The values are different in terms of data type. So this is what I wanted to demonstrate you in decisions in the next session. Till then, Bob, I take you 13. Type Conversion: hello grades. Welcome to another session in this session, we're going to discuss about my conversion. So let's jump into the visual is too difficult to understand this topic. So we're into the visual studio code who know, Let's understand what actually type conversion is. But prior to understanding type conversion, I wanted to ask you one question. Can you tell me the result off this statement? Whenever we're printing this, what would be the result off it? So let's look into the output then we really start our discussion. So here it has returned us 101 instead off 11. Why is it so? Because we are initializing then as a string and whenever it is finding this plus operator . So it is con captain ating the system that the reason it is giving us one. So how do we come to know that whether it is a string or a number, so there is a method which we can use that is called type of the type off, minimally rate type of. And then we need to check that what is the type of the car variable? So let's look into that so CEO, it has returned the data type of counties is strength. So now the next question is how we can convert it into a number sotto convert it into a number. We're going to use a method car number, and here we really specify number. And then we will specify. Account on this process is called type conversion. When we're converting from our one type to another type of process is called type conversant. So here we're converting our A string to a number. So let's look into the output now saving. Let's jump into the browser. So this time you will get the expected value. Now count is implemented to 11 on it is off type number. Now let's proceed further. No, another question for you. Can you tell me the answer of this question? What is the output off this question? If I wanted to convert like that, then what would be the airport? So let's look into that. So this time it has returned Nan because we're trying toe perform the action on our string that is Northern number. And whenever we do any kind of invalid operation, which is northern number, then it will through Nan Aron. No, let's proceed for the this time we will call it as output put on here also, we will know that I poff output No. Can you tell me the answer of this question about put equal toe string 50. Can you tell me the whole put off this this a statement? The line number four So let's look into the hole Put in browser So this time it has returned the value 50 which is off type is string. Why is it so? Let's understand that this is because we told that this number 50 should be converted into a strength. So here we're doing the type conversion as a string and then we're printing doubt. So after converting this 50 as a strengthen, it is assigning toe output that is no become mystery that the reason it is renting as string over here. No, let's proceed for the no we were looking toe another example Now tell that let output equal to bullion And this time we will tell that. Then can you tell me the output? Let's look into the out now. So this time it has returned to on the type is bullion. Why is it so? Let's understand it any value apart from zero if it is converted to William than the value become true, and that the reason it has printed through over here and the type is off. Julian suppose if you're passing zero over here, then it will return us false. That's looking toe that. So this time it has returned false over here, and the type is bullion because we have converted zero into bullion and zero has become faults. Now let's proceed further. Now let's look into the other example. Suppose if we are having a string value and we're converting into bullion, so can you tell me what would be the output? So let's look into that. So this time it has returned is true and the type is bullion. Why is it so? Because we have passed the strength and whenever any string is having the characters that is returning as a one and one has become true so that the reason it is true and we are having six character word, and that is more than zero. That means any value apart from zero, it becomes true Now suppose if you're passing the empty value, then let's looking toe that what would without foot this time passed them devalue. Delete this one. Save it. Let's looking toe that. So this time it has returned. False. Why? Because we're not having any characters. So it becomes zero and zero has become false so that the reason it returned fault and the type is bullion. So this is what I wanted to demonstrate your indecision seeing the next session till then, Bob, I take it. 14. Control Flow Introduction: Hello, guys. Welcome to the another station in this session. We're going to look into control. Flu? What, exactly? The control fluids? No. From this session onwards, we are going to look into control flows. So here we will discuss the world various forms of control floor which we didn't really use to design the logic in the JavaScript application. So let's jump into the diagram to start our discussion. So whenever we're writing any application in any off the language, there were required a mechanism to control the flow off the application. So, for example, if you're designing a model where you want, whatever the string Gary, which you will pass toe that particular model that contains the smaller case off the string and you want to convert it into the upper case. So to achieve this functionality, you need a mechanism by which you can iterate through each off the element and then you can apply some function over there that it will convert it into the upper case. So to resign, such logic we require control, flow and control flow offers various forms off loops as well as conditionally. Street went to handle the application logic. So the diagram, which you're seeing over here is a representation off the control flu where we're passing and Ari, which contains the a smaller string. And here we are applying our string method that is converting a smaller cases string into uppercase and all this happening within a loop in the upcoming session, we're going to look into various forms off loops along with the conditional statement. So, in a simple term, if anybody will ask you what actually controlled floor in JavaScript is than you can say that control flu is a combination off loops and the E fell says statement or say conditionally statement, that helps you to controlling the logic off the application for this particular scenario. You must be asking that. Okay, I understand that here we have used the loop. But how do we use the conditional s treatment over here? So just given a scenario, this is for representation purpose. You can use it something like this. Supposed that if we're passing the capital case off grapes, for example, grapes. So in that scenario, you can introduce or conditionally statement over here and check that whether this contains upper case or not, if it contains the upper case than it will nor convert into the upper case as it is already existing upper case. So such logic you can design you can use for conditionally statement whenever If we're designing our logging pay to check that whether the user is valid or not on top offered than you are awaiting the further screen user is valid if it is not valued than you can show the error message. Who collectively Lupin conditionally statement makes control flow on both. Lupin conditionally statement comes in various forms which we're going to see in our up coming session. So don't worry. If you're not understanding any off this, we're going to perform various examples. And I'm sure that after completing that examples, you were very comfortable with the control flow concept in javascript. So on this note, I'm stopping over here. See you in the next session. Till then, Bob, I take you 15. For Loops: Hello, guys, Welcome to another station in this session. We're going to look into first control flow that is far loops. So let's jump into the visual studio code to understand this topic. So prior to writing the quote for four low, I wanted to let you know that there are really a straight pop. Groups have a level within the joys, but the first kind of flu, which we're going to see its four lobes. So, no, let's start our discussion on four look. So first we will look into how we can write the four loops and text. So the syntax for the four loop we need to write for keyword. And after that we need to specify either initialize er that is I equal to zero. And then afterwards we need to specify the condition. So we need to tell that if I is less than 10 this is one of the example I'm suing right now . And then afterward we will s specify the agreement I plus Plus, after that, we will start the body off the loop and within that, we are going to write whatever the logic which we want to execute within the loop. This will go inside this body off the loop to one point to remember Over here is that loop is required toe iterate the court at number off times whichever we will specify you over here in case off for local coming toe this curly braces. As I already said that this is going to be the block in this block in a more technical terms, this is called as court block. So whatever you want to execute within the loop, you should specify you over here. No, we understand that good block toe here we will discuss about these three sexes which is being separated with the semi colon. The fourth section is the Ennis Laser, where we need to specify that room where this loop get they started. So we have a specified zero. If we specify one than this loop will start with one for this case, it is going to start with zero. Then afterwards, at every iteration, it is taking them condition. So whether the slope ease ran for 10 number of times, If we Trenton number time, then it will exit from the loop on. This is the incremental that will increments after every execution it will in agreement by one with this plus plus operator which we have already discussed earlier in Sort and Operator. So no, we have returned the loop. So what we want to do over here is that we want to print the values off the loop. So how we can do that? We can tell that console door clog and then we will tell that a step. And after that we will specify over here the I. So let's look into the I'll put water put It is giving so you can see over here that it has executed 10 times and every time it has incriminated way one, as we have mentioned over here. No, let's proceed for though now let's do something meaningful If you remember that when we have introduced the control flow, I have shored new one example regarding the fruit ball where we're having the fruit ball information. All the string is in a smaller case. No, what we will do. We will take that Harry and convert it into the up. OK, so let's do it. So first we will create an ari and that we are goingto tell that fruit ball. And here we will in this lies this with apple oranges. And then we will tell that grapes. No, this is all in a smaller case. No, my requirement e they want to convert this into uppercase. So how we will do that. Let's look into that. What we're going to do, we're going to write to look for I equal toe. Let me come in this one And here we will tell that let I equal to zero and then what we will do We will take the length of the sorry so that it will execute one. Did that amount of time so I can tell that is less than proof bowl door lead so that it will execute the number of time fruit ball length is And then we will tell that I plus plus now the next step, What we have to do, we have to take each off the element and convert it into uppercase. So how we can do that? So let's write it. But let's declare upper variable. And within that we are going to keep the values off upper values which we will convert from a smaller toe uppercase and here we were tell that fruit ball ball I This is the index and then we will tell that to a perkies. On this we will console, log it, consoled or clog, and within that we will print the upper. Now save it. Once you save it, let's look into the output. But prior to executing it here we have drink some mistake. It should be less than the length that else it will through one error because it will incrementally more than the actual. And now let's look into the output that jump into the browser. So here you will find that it has converted the smaller case to the upper case Now, although string is being printed in upper case. So this is one of the example and the simplest example which I have given how you can use the control flu that is four loop over here. The weighted it through Ari and we have converted the value in tow up a case. In the real time world, you will face number off situation where you required to use for low toe iterate through collection data types. Sometime it is required to try to read through the databases than four loops comes very handy in such scenarios. So this is what I wanted to demonstrate you in decision. I hope you enjoy decision and understand that. What? Actually, the four loop it, which is our first control flow. And you will also get an understanding that in words in are you you can use the for loop. So on this note, I'm stopping over here, See? In the next session till then, Bob, I take care. 16. While Loop: Hello, guys. Welcome to another session in this session. We're going to look into why loop that is another type of control floor which also can be used to loop through collection objects. So let's jump into the visual studio code to understand this topic. In our last session, we have seen this example where we have used the four look to iterate through the fruit ball, Ari, and that was provided into a smaller case. And then we have taken each off the element off route ball and converted into the to upper case. In this session, we're going to perform the same exercise. But with the help of why look, the difference between while opened the four Lopez in their Sin tech network ways. Both are doing the same thing. So let me come in this out, and then we will write the program for with the help of a while loop. So here what we're going to do, we will, right? First we will in its lies the variable which we're going to use within the white little We will tell that I equal to zero. This I initialization happened at the outside of the loop and Then we will tell that while while is a key word and within that we will specify the condition. And the condition over here is I is less than fruit ball land to see you if you see that we have provided earlier like this. But here this time we're providing it into the loop over here. This is the condition we need to specify like this. So you should remember it. And then we need to specify the court block. And within that we're going to write the same thing which we have used. That is a park will toe root ball. And we need to specify that I and then we will tell that to a Poke eight and we will specify semi colons. And after that we need to turn rent it into the console, write it up, and then most important is we need to increments the value off I else what will happen? It got stuck in infinite loop. So if you look into that, then you will find that it has in a slice to zero. And if we're not incriminating and every time loop is iterating, it finds that I zero and it got stuck in zero and program Gotta stuck in in for Nate. Look, so toe handles a situation we need to incriminate the loop. So we need to tell that I plus plus save it. No. We have designed the same logic which we have designed with the for loop. But this time we have used the white look. So let's do a dry run for this application which we have return No the first time. What will happen? I is being in its light with zero and then it come toe the loop and it will check that zero is less than what is the length it will find the length it is three. So it will tell that yes, it is less than the three. So it will go inside, check the first element and convert it into uppercase that up apple and then print it. And then it will include mint I plus plus by one. Then it second time, it will check that the value of the eyes one and it will check their one is less than the length three. Yes, it will happen till all the cases is being satisfied. And at last, when the value of Phi is getting increased more than the length of the fruit ball element count, and the moment it get greater than the fruit bowl length, the loop will stop working. So let's jump into the browser to see the output. So see you. It did the same thing, which he did with four look. But this time we have done with a why look. So let's proceed further. So here we have understand the white look. I hope you are enduring May course. If you're liking the course, it would be really great. You could provide five rating along with some positive comments so that the course will reach to the maximum audience. So on this note, I'm stopping over here soon in the next session. Till then, Bob, I take you. 17. DoWhile: Hello, guys. Welcome to another station in this session. We're going to look into do way. Look, that is another control flow. So so far, we have already seen the four look and the way I look on the same aspect do while Loop is also used for looping the content off the collection data type. But it has different Centex. So let's jump into the visual studio code to understand this topic in our last session. We have seen this example and you are aware about what Actually this program is doing so it is basically I treating this fruit ball, Harry that contains three elements and it is converting from a smaller case to upper case. So for this example, we are going to perform the same exercise. But with the help off, do I loop? So let's convert this program in the farm off. Do I look so what we need to do? We need to take over this condition on. We need to put it over here and then we need to specify Over here, do and remaining thing is going to be the same. What will happen? This will perform the same activity. What we were achieving through the while loop and the four look. But the only difference is that the prior to taking the condition it will perform the good block execution, which we need some time in different scenario. Not in this particular scenario. It is required to execute the do good block earlier than condition check. And we want that our loophole execute at least once in our programming logic. So let's look into the output to hear output poise. You will not find any differences. It is performing the same activities which we were achieving through the far lope as well as the Vilo. We are achieving the same with the Do I look? So you must be asking that what actually the benefit off using Do I look compared to the other look? So the benefit out off it. Whenever we want to execute the loop at least ones then we can use their do I look So, for example, if for you and it's like the value with to and what happened when it will go inside the loop, it will implement it three and we will check that three is less than three. Even though this condition is not satisfying it executed at least once. And because of that, the last element get into upper case. So let's look into the output. And here you will find that it did the same. We have any sliced. I went to the window after incriminating the value off my within the loop to three. Still the do while loop is ableto converted from a smaller case toe the upper Kate. So this loop is very useful whenever we want to execute the condition at least once, even though criteria is not meeting. So this is what I wanted to demonstrate to indecision seeing the next session Tilden. Bye bye. Take care. 18. If Block: Hello, guys. Welcome to another session in decision. We're going to look in tow if blotto. This is another kind of control flow which mainly used toe. Check the condition. If the condition is true, then it will execute the particular court blood. So let's jump into the easily studio. Cool to understand this topic. So we're into the visual studio code and we are going to learn about each block. So to understand the IV block concept in a meaningful manner, I'm going to use the same example which we have used earlier in the fertile obsessions. What we're going to do in this session, we're going to introduce some more fruits which is already in upper case and whenever within or Lou, if it find that element is in upper case, it will escape the execution and it will. Nor do the upper case conversion to let me introduce two new routes over here. The 1st 1 we're going to introduces each that is in upper case. Another one, which we're going to introduce is the banana that is also in the pokey. And what will happen? It will not. Onboard the peach and banana, which I'm going to right now and whenever it finds that it in upper case, it will not convert this into a pok And whenever it will find that there is a smaller case element that will be converted to the upper case. So no, to achieve this, we're going to introduce the IV block. So let me write it, what we're going to do, we will tell that if our fruit ball position off the element and we will tell that not equal toe fruit bowl position off the element door to upper case. If it is not equal toe, then only this operation will be done and it should be printed. So what will happen every time whenever loop will execute? So you will find that the I will be enslaved with zero and then it will check that at zero position it is found the apple and it will check that whether the case off this happened is similar to the case off the upper case. It find that No, it is not. Then it will go inside on. Then it will convert it into to a poor case and then printed and whichever is already being in the pockets that will not be printed because it will not go inside the loop. End it, friend, that Peaches already is having a upper case so it will not go inside. It will escape and it get incriminated. And then again, it will check the condition, and this time it find oranges. And then it went that the case is not similar. Going inside converted into uppercase and write it. Same is the case with leap and defensive. It will find that banana than it will find that banana is having our pockets, which will not go inside that, and it will escape it on the loop will get over and the program stop execution. So let's look into the output. So, CEO, it has printed on Lee the three fruits, which was in a smaller case and converted into the upper case. Because all these are a smaller case. So let's proceed photo. So this is the way you can use the if statement that is another control flow for checking the condition and ask for the condition. You can design the logic, so this comes very handy while designing the logic. In the next session, we will learn about Ifill's block. That will also help us designing a more robust court while handling the conditional statement on this note. I'm stopping over here, seeing the next session till then, Bob, I take here. 19. Else And Else IF: Hello guys. Welcome to another station in decision We're going to look into else. And Elsie Block. This is a continuation of the earlier session. And this topic is also a part off control floor topic. So let's jump into the visual is to do kowtow, understand this topic. So we're into the visual studio code and we are into the same example which we have used in our earlier station. That is, if block session Soto take it for though and understand else. And Elsie Block, I'm going to change the logic than this program. No, earlier it is not giving any message. If the fruit of spelling is already in upper case, it is simply s keeping. But it was not printing any message. But this time I'm going to introduce or else block where I can handle whenever it finds that route name is in upper case. Then it will print the message saying fruit is already in upper case. So let's do it. How we can do that. We will tell that else and the good block. And here we will write console dot long and the specified or template to string. And here we will tell that dollar of the bracket to start root ball and within that in this is off. That and here we will specify, is already in upper case. Save it. So let's jump into the browser to see the out put. So here you will find that it has printed the message whenever it friend the name off the route is already in upper cased. So it is escaping that and giving the message like this. Each is already know pockets. Banana is already in up. OK, so it is giving us the meaningful information that which fruit name is already in upper case. Now let's proceed for though now we will understand Elsie Block Soto on the standards of block I'm going to do little change in tow this program on the changes I'm going to introduce a new logic with some more conditions like I want to convert to lower case all those fruit name is in upper case and if it contains e in their spelling to how we can achieve this. So here we will use else if block along with this court. So let's look into that how we're going to do that. So first we will handle that. We need to write you let it be like this. And here we are going to introduce a block called l Save Els Eve. And then we will provide the condition like this a fruit ball, the name of the fruit which come over here. And we will check that if it contains that means includes the character E. Then it will convert it into lower case. So how we will do that? No, we will write like this. Let law and then we will list specifying Over here root ball, the element. And here we need to tell that to lower case and then close it. Save it now we will print the console over here console dot long on. We will type lower over here. Save it some matter. So we need So here we need to respect for your space. Save it, nor jump into the browser to see the output and CEO. Every name is in upper case except Pete. Because we told that if it is in upper case and if it contains e than it will be converted toe the law. Okay, So this way we have used else if a bloke. So there are certain situation in actual programming when you want toe handle multiple conditions. So in such scenario, this comes very handy, which helps you to design the logic like this. So here you can see that it went toe the IV block as well. It went toe the L C block as well, as well as it also went toe the else block that the reason we're getting over here. Banana eyes already in upper case and it doesn't contain any Ian toe their spelling. So let's proceed. For those who know, we have understanding about how we can use else and Elsie Block. And if you have any question than you can send me the message, I will get back to you. So on this note, I'm a stopping over. You see, in the next session, Tilden. But I take care 20. Logical Operators: Hello, guys. Welcome to another session in this session. We're going to look in tow. Logical operators, Logical operators is also a part of control floor topic. So let's jump into the visually should you call to understand this topic. So we're into the visual studio code and the example which we're going to use is the same example which we have been falling from the earlier session. So this time we are also going to use the same example to understand the logical operators . But prior to writing code, we have to understand that what actually the logical operators in joy escape were using to symbol to represent logical operators to represent to the and condition we will use double and person on to represent the or condition we will use double pipe, so this will be represented as and on the double pipe will be represented as or and this will be used to check the multiple condition simultaneously and is used whenever we want toe check multiple condition and we are expecting both. The condition is being true. Then only the court block will be executed. But when we're using or blow or say or logical operator than in that scenario, we would be acting only one condition should be true than for their court. Law gets executed or let's understand, with an example. So to understand it better, I'm going toe Greek, the larger in this program and introducing some complexity to understand the logical operator. So the new logic it's so this time what we want. We want to convert the name of the fruit to upper case only to those fruit whose spelling is greater than land. By then, only it gets converted toe uppercase along with this condition. So how we can achieve this scenario. So for this situation, I'm going to use logical and operator. So let me introduce the logical and operator. So for this, what we are going to do, we are going to use and operator. Over here we will write double M person and then we will specify the condition and we warned that led off. This is Stringer is greater than why Then only this court block will get executed. So let's look into that. So this time you will find that only oranges and grapes is get converted. Toe up a case apple not get converted toe up a case as it is not satisfying this both condition. So let's look into the output. So let's jump into the browser. But prior to that, what we need to do, we need to remove this method else. It will give us somebody so that we can remove it over here. No, save it and let's jump into the browser to see the output. So, as expected, Apple is not being converted to uppercase because it lent is not greater than five. And as well as it is not in upper case as well. So what? The condition is not meeting so that the reason it is is keeping So let's proceed for the so no, we understand that both this condition should be true then only if this body part will get executed. Now we will discuss about or logical operator. So to understand the ontological operator, we're going toe introduce one logic in the same program where in the else it block, we're going to introduce a logic. Suppose that if any off the route name contains the character be it should be converted into lower keys along with the condition E. So currently what It is doing very where it is finding the character e into the name off the route. Me Then it is converting into the lower case. Now what we want, we want toe introduce the same logic for the character. Be if it found in any off the fruit name, it should also be converted toe locust. To support this, we're going to use the or condition So how we can raid the or condition. So for that we're going to tell that the pipe operated and here we will tell the same condition. We can take this one and the specifying Over here be saving. Know what will happen? Both this speech and banana get converted toe the lower case. So let's jump into the browser to see the photo. As expected, Beach and Banana is now converted toe floor case because for the peach case, it contains the letter in the world and for banana. It contains the B which we were checking, and this week and this we have achieved through or logical operator. And you know that why apple is not converted toe up, okay, because it is not meeting the criteria with an conditions. So let's proceed for them. So now you have a good understanding how you can have multiple condition in a single s statement to design your complex logic for your application with the help of and logical operator as well as or logical operated. So on this note, I'm stopping over here, seeing the next session till then, Bob, I take you. 21. Logical Not Operator: Hello, guys. Welcome to another station in this section. We are going to look into logical, not operators. So let's jump into the visual studio code to understand this topic. So we're into the visual is to do cold and we're going to use the same example which we have used in our last session so prior to understanding the North. Logical operator, we have to understand that what actually the same will be used to represent the North. Logical operators or north Logical operator is represented by exclamation marks off. You need to use this exclamation mark on what is the purpose off this? Not operator. So we have to understand that so north operator is usedto negate any off the conditions what it means. So it means that something if you are having any variable, for example, let equal to true and you want to make it fall. So what you need to do you need to tell that consoled art law, not it. So it means that whatever the value e contains, that is a boolean variable that should be converted tow opposite off group that this faults and how we can achieve this thing. We will use the north operator. This is the North logical operator. Know the cushion over here is why do we actually use this North logical operator? To answer your question, I would tell that this comes very handy whenever we're designing any toggle large where we have to design on and off button so that we can take the current list teachers. And if anybody is clicking on the button so we will take the current status converted into the opposite off the current status. So to understand it, let's look into the output. So here what we did we have provided are true value. But when we use this exclamation mark, that is a North logical operator in front off E. So that means I'm negating this value and it will print opposite off this. So that means it will print falls. So let's look into the output. So, as I said, it printed the false values. So this comes very handy whenever we want to design toggle option. No, we understand that not logical operator. What we're going to do, we're going to use into this program to redesign some different logic. The first letter first, let's look into the output. So currently you will see that apple peach, orange grapes, banana. So oranges and grapes are in a porky's and peach and banana isn't smaller case. But what I'm going to do, I'm going to use a North logical operator in one of the condition. And because of that, what will happen? Everything is in a smaller case, only Apple is going to be converted into the oppo, Kate. So let's do that. What I'm going to do, I'm going toe use a north logical operator. Whatever the value, which is being returned in this condition, I'm negating it. So see you. What will happen? Because off this negation. So let's look into the output. So it has changed the entire meaning off the program. This was the earlier are put on. This is the current output. You will find that apple is the only A spelling, which is converted to a book is and remaining isn't a smaller case. So this is one of the example I can give you apart from that we can use in our application for negating the current estate. If the state contends through our walls value or say boolean values on this no time stopping over, you're seeing the next session till then, buh bye. Take care 22. Break And Continue: Hello, guys. Welcome to another session in this session. We're going to look in tow, break and continuous treatment. So let's jump into the visual is to record you understand this concept reared into the visual studio code and here, prior to writing the court, I wanted to discuss some concept about break and continue a statement, and then we will do the example to understand the concept. So far, we have worked with group and we are very about that. What is the purpose of those groups is being used toe iterate. The core block had given number of times. But suppose a scenario where we want the loop to stop executing right to completion off execution. So to achieve this functionality, we use breaking statement within the loop. So here, the first point to remember comes for this session. Is the breaking statement breaks or say stop the execution off a loop entirely the break. Its treatment can also be used to affect switches statements. You know, we understand the breaking statement. Let's have some discussion about continuous statement. So what is the purpose off continuous statement. So the continuous statement terminates execution off the current iteration in a loop. So where does it mean? So to understand the concept Off continuing break. Let's do an example. So let me write a program toe print number from 1 to 10. So how we can, right? We need to tell that far. Let high equal toe one eyes less than equal toe 10 and I plus plus And then we need toe console long. I now save it. Goto the browser and see the output. So here you will find that it has printed from 1 to 10. Now let's proceed for the know. My second requirement is I've warned only even number should be printed. So how we can design the logic. So here we will use the continuous statement. Let's look into that. What we are going to do we're going to write if block and we will check the old operation even number. So let's right. And once you find that if it is uneven number, let's continue it then printed. So cut it from here and placed it over here. So let's look into the output. So here you will find it has printed all the even numbers. So how we have designed the logic we have designed the logic with the help off continue, Estate went No, let's proceed photo and understand the breaking statement. So we're going to use the same example. But this time what we want. We warned that whenever before numbers say the loop should is talked about how we can achieve this, we can achieve this with the help off. Break a statement. So I'm going to copy this and let me come in this out. And here this time we will tell that if I equal to six, then it should break. So what will happen? It will printed number five. The piece should be a small over here. There it Let's jump into the browser to see the output. So CEO, it has printed still number five. And when it for number six after that, stopped the iteration off the loop completely, that means it to stop the look and exit from the Luthor. No, let's proceed for the toe. Know we have understanding about when to use break and went to use. Continue while designing our application logic On this note, I'm stopping over. You're seeing the next session till then. Buh bye. Take care 23. Switch Statement: Hello guys. Welcome to another session in this section. We are going to look into switches treatment, so let's jump into the result story accord. To understand this concept really into the result is to do cold and the Syntex, which were getting over here, is the Syntex off switches statements or prior to writing the cold. I wanted to discuss about the same text off, so it's a statement. So here the question is what actually switches statement? Do the switches treatment? He will rates and expression matching the expressions, value toe aqueous clothes and executes a statements associated with the case. It will also execute the statement in the cases that followed the match. In case who in this Syntex you are getting so many things like switch expression k, the value of the case so won't actually. First we will discuss about expression, an expression whose result his match against each case close in more Lehman Tome. We will say that expression we will pass over here on switch will evaluate that expression and pass it accordingly. Toe the cases cases are the options which is being provided supposed that if we're providing on expression whose values value one. Then what will happen? This case is being matched and wanting with the statement which exists over he'll it will be executed in another scenario you're passing off value to at this time. It will go to case number two and it will execute the statement and then it will bring but supposes scenario. If there is a no breaking statement, then what will happen if this case got mass? Then along with that, the case with the valley toe also get executed if break a statement is not being provided. So let's do an example to understand it better. So let's right the courts. Who? We will tell that const And here we will tell that fruit and we will specify one proof This fruit is an expression. We're goingto tell that apple and here we will design or switches statement and here we will pass the fruit name and within that we can specify the case. And this time we will specify keys apple And then we were tell that console dot Long writes off here we will tell the group name Apple is 100 groupie Europeans 100 David again people create the cases for another fruits. So let's a specifying that this time we're goingto tell that And here we must have to provide break a statement else Both the statement will be executed that this time we're going to tell that or ranges Here we return that oranges on the string. We will tell that one for two these and bird cage Revilla specify And here don't forget to mention break its treatment Save it. This time we will tell that grapes also we will especially for a break Else it will execute and the last option we must have to express if I the default option. If any of the kids will not masked then this a statement should be executed. So we need to specify that this group is our door Start save it. No what we really don't. We will run this program and see that we're told what we will get And here you will find that it has printed price off Apple is Rupees 100 Why it has executed this court Why nor the orange one. That is because we have passed this expression apple If you will change it toe oranges then this time it will print this case. So let's look into the output. So CEO, it has printed the output which belongs to our injured. So let's proceed for the no way wanted to show one thing. I suppose that if you were removing this break its treatment, then what will happen if you pause oranges? Then it will bring the value off grapes as well. So let's look into that. Let's jump into the browser. But prior to that, we need to change over here grips so that we will see their different. No, let's jump into the Roeser. So, CEO, we have removed the break and because of that reason, these statements ran together as it formed, that program doesn't have break a statement that the reason it is important to provide the break its treatment else. It will execute both the cases in this particular scenario. So let's put it back and let's run it again. Save it semi colons, save. Let's jump into the browser to see the output, and this time you find that it has printed on leader oranges. Let's proceed further so no this way you can design any logic where we have multiple condition, and each condition has different parts off execution. Then you can choose switches statement to design your logic. So on this note, I'm stopping over here seeing the next session till then, Bob, I take care. 24. Understanding Functions: Hello, guys. Welcome to another station in decision. We're going to discuss a world functions. Let's start. Our discussion of function is one of the core building. Block off any programming language. So the question comes over Here is what actually the functions is a function. Is a sub program designed to perform a particular task and the nature of the functions are functions are executed when they're called. And this behavior is known as invoking a function when we had using any function than some function officers to pass the value into the function and that can be used within the function. One important point. You should remember that functions always return a value and enjoy script if north on radios a specified the function with little undefined. Another point to remember For JavaScript functions, his functions are object data type within Joyce Crypto diagram it you're single. Well, here is the representation of the function where we're passing an input to the function and it performs home defined logic and then a dispute off the output. The benefit of rating the functions is that you can use it many times with different in put the simplest example which I can give over here is if you remember that we are having a fruit ball where we're having different dispelling off the fruit. Some of the spelling is in a smaller case and some of the spelling is in upper case and we're converting the smaller case into the upper case that we have written in a single program to make it function based program. We can change the logic off checking whether the S spelling is in upper case or in lower case in tow function. And whenever we're going toe, convert it into the upper cased prior toe that we will send the fruit dispelling toe the function toe, verify whether it is a smaller case or up. OK, so that function will return true or false, according to the case off the word if it is upper case than it will return true. And if it is lower case than it will return falls. So that thing we can easily design into the functions. This is one of the simplest example I can say over here. So he was re asking that in war scenario, I can write the function than to answer your question. I tell that whenever you find that there is a repetition off the court, then you must convert that according Toa functions on this note, I'm going to stop over here in the next session on roads were going to do some examples on function so that you can better and dis turn the function to see in the next session Till then, Bob, I take you. 25. Function Declaration Vs Function Expression: Hello, guys. Welcome to another session in decision we are going to discuss about functions. Declaration was the function expression. So let's jump into the visual studio code to understand both the concepts were into the visual studio code, and the first concept which we're going to learn is about the function declaration. So Function declaration is one of the way by which you can create the functions. So let's do it. But Brad aerating the court, I wanted to let you know that what actually we're going to perform in this exercise. So this is the same exercise which we have used earlier, where we're having different number of fruits within our Eric or fruit ball. And some of the element is in a smaller case and were identifying that fruit of spelling is in lower case or a spot upper case. If it is in lower case, then we're converting into the upper case and this thing we are achieving through there to uppercase methods, what we're going to do, we're going toe convert this part off the court block into a function, and that function will record within the loop. So let's create the function with the help of function declaration. So we need to use the keyword called function and then or towards We need to a specify a function name. So this time we're going to tell that you are bouquets and here we will provide better meter. We're going to have a detailed discussion about para meter bosses argument. So what? Actually the paramilitaries and work Actually, the argument that we are going to discuss about these two concepts perimeter and argument? No. Let's cut this portion on. We need toe. Put it over here, take this one also out from here, saving. And this time, what we will do, we will call this function. So let's call it. And here we need to Espace, if I str on this one should be okay. And here we need to pass the fruit ball element one by one. So for that, we need to specify I over here, save it. Now let's jump into the browser to see the output. So see you, we have achieved the same thing. But this time we have created a function with the help of function declaration and then we're calling the function to convert it into upper case Now let's proceed for the so this is one of the way by which you can create function in JavaScript. On that method is called Function Declaration. Now the question over here is weren't actually the function expression is so whenever we are using anywhere you able on that we are keeping the function reference within that variable that is called function expression. So let's look in tow that so the same function we are going toe use it, just copy it. And this time I will come into it out and he'll we will create a wary able let a better cost. So because it is not going to change because and this time we're goingto tell that the same thing. But what will happen here? This name would work as a variable and we need to assign it like this. On remaining thing would be the same. And when you will run it, you will find that it is giving the same or put there is no difference. So let's look into the output. So this is our put with regard here. This is the output from the function expression and this is the output from the function declaration and there is no difference in the output. The only thing is that all we have created the function that way is different. So output ways there is no difference, no, the thing which I'm going to discuss next. That is really important concept and that concept is being asked in many off the interviews and the concept is called wasting. So to understand the resting concept, you have to understand that what actually the difference whenever we're creating off function with function, declaration and ah, function with the function expression. So whenever, if you were creating a function with the function declaration, the scope of the function is known everywhere within the program file. So what it means. So let's look into that too. Let's come in this out on Let's re inability to hell. If I cut this function and put it below, then also this function is able to execute. So let's run it again and see the output. So see you. There is no difference between the outputs, what we got earlier and what we are getting now. Even though the function is being declared, Belodeau calling, the scope of the function is being known Why is it so? Because arresting whenever the program runs in JavaScript, I interpreter put all the function at top and then uses off. That function is below to the function declaration. But this is not the case whenever we're creating the function with the help of function expression. So let's look into that too. Let's put it back, control that and he'll we will come in this and then we can re enable the function expression. And this time, what I'm going to do, I'm going to put this below and we're calling this prior toe the declaration off the function. So let's look into the or put word out. But we will get this time. We will get the error. So see you regard their reference cannot taxes to uppercase before initialization so we can't use the function expression, pride toe declaration off the function and hoisting is also nor being performed on function expression. So let's proceed for the so no you understand that what? Actually there difference between function, declaration, function, expression and what Actually the concept off resting is thrown this no time stopping over. You see in the next session till then, bravo, I take you 26. Argument and Parameters: Hello guys, Welcome to another station in this session. We're going to look into argument and para meters in functions. So there jump into the visual is to do cool to understand this concept. So we're into the visual studio cold and the example which were going toe use for understanding, argument and perimeter is the same example which we have created in order earlier system. So the concept off argument and parameters related toe the passing, the values toe the function which we have declared at the time off calling the function. So let's discuss about this example over here. If you see you, we have declared off function over here called to Apo and here we are receiving a value called STR when we are receiving the value within function that is called barometer on when we are sending the value. While calling this function, it's called an argument. So you must be asking that weren't actually the benefit off using argument and perimeter. So the benefit it off first is the reusability. So if you closely look into the program we're having on Ari, which contains different number of elements on which is fruit name, and we're passing one way one each time whenever we're calling this function. So that means within the loop, whenever we're calling to upper case. So it is accessing the element off fruit ball with the help off. Indus is the Indus is is I over here and it is sending this value this function and then it is being converted over here. And then it is being printed within a function. You can pass any number off argument and you can define any number off parameters over here . For example, if you want to introduce another perimeter, then you need toe. Do it like this. You need to specify a comma and then you will tell that for example, price off the fruit. Just one example I'm giving over here So you can tell that price and you can print along with for example, you will tell that the fruit name and here you will specify we can use the template the string over here sold. So here we will use the tactic. And within that we've returned dollar and then we will A specifying that would price is here again, we can tell their dollar, and we were told that price on while calling, We need to send the value the price, so each time you can send different value as well. So let's create a price area as well so that we will send the price. So here we will tell that the price would be for Apple 100 oranges. 60. Any value can put 94 5 items were having for save it. And this time we're going to tell that we're going to send the price as well. So we will tell that price off each of the fruits. So here we need to specify I over here, save it. Now let's run it. So see you. You can easily print the price off the fruits which we are taking from some other area. So let's proceed further. So this is the point which I wanted to mention that you can pass any number off argument, and here you can receive any number off perimeter. But one thing you should remember that the orders would be the same toe what it means. I suppose that if we're creating a function and you're keeping the order like food, name at first and price would be second, then you should provide the value in the same order. If you will provide price at first on fruit ball at a at second, then it will throw errors. So let's do it and let's verify it. So what we're going to do? So what I'm going to do, I'm went toe. Just wipe the position over you, so let's do it. So first, I will send the price, but I'm going to keep the perimeter, as is. Save it. Let's go into the Rosa to see the output and CEO it has through the error, So let's proceed further. So to resolve this issue, either you can change it over here or change in the declaration of the function just swept the perimeter over here. See with no, let's look into the output. No CEO. It has resulted issue just clear it and then reloaded. And then you will find that there is no error, so it is really very important to maintain the order. Now let's proceed for the so So I hope that you understand the concept off argument and perimeter and how it is important to maintain the order off the argument and perimeter. That means whatever the artery, which you are keeping at the time of declaration off the function. You should pass the argument in the same order as you have defined the perimeter while declaring the function. So on this note, I'm stopping over. He'll see in the next session till then, Bob, I take you. 27. Returning Values: Hello, guys. Welcome to another station in this session. We're going to talk about returning value. This is one of the important concept and functions, so alerts jump into the visual is too difficult to understand this topic so really into the visual studio code and the example which we're going to use is the same example which we have used earlier. So so far, what we were doing. We have designed this function and dysfunction is taking the perimeter and heal. It is converting it and printing it. And that is not very much useful. If I want to print this value, then you will not get any off the valleys over you. For example, if your log it consoled or law, we're tryingto access up. Oh, it is not accessible. So we can't use this upper as it is a local value. If you try to print it, you will not get any value. So let's look into that to see you. You will get another as it is not defined. It is defined within the function that is local. So what? My requirement It I can just past the variable. I would say I can just pass the name of the fruit in a smaller case and it get converted and then it will be printed outside off this function. So that means this to a poor function. When we do the conversion from Muller case toe oppo case on the converted value, I can use it outside off the function anywhere wherever we want to use it. And this is the proper way by which you can design the function which will perform their respective task. So how we can achieve this. So here we will use the return value concept. So I will cut it over here and read. Don't the upper. And to use the supper, what I will do, I will create a variable over here to apple. And you I will call this function. So let me call it, Save it. Let's look into the output water put. We will get to see you outside of the loop. Also, I'm able to get took converted value from a smaller case to up OK, and this comes very handy to writing your business larger in your application. Even we can sort of this as well. Instead of that, we will just return it Oh, here we will delete this one. Control. Next return. Save it. Now let's run it again. This time we will raid. Let's launch. Always grip, step by step or say more than Joe. A script step by. Step out Syria. Let's jump into the browser to see the output and seal. It has returned us from a smaller to upper case whatever we're passing there. And this time it has a tone. Let's loan more than Joe. A script disturbed by a step. So let's proceed for the So I hope you understand the concept off returning values. So on this note, I'm stopping over. You're seeing the next session. Until then, Bob, I take care. 28. Arrow Function: Hello guys will come to a decision in this section. We are going to look into arrow functions. So let's jump into the results to the accord. To understand this topic so at a function is one of the most recent tradition within the JavaScript that is basically a cleaner and sort of way to rate the function. So the function which we have written over here is the regular function. So now what I will do, I will convert this regular function with an arrow function. So how we will do that So most we will write cost and then the name of the function. That is to a poor case. And this time we're not going to use any tape off key word. Instead of that, we will equal toe and the function symbol over here and within that, we need toe past the perimeter steer. And then again, we need to rate equal to sign and then the greater than sign. And after that, we need to express if either curly braces, opening and closing and the function body, we need to write it over here. So for this case, I'm going to write return and the same thing. Whatever we are doing to oppose case, close it, save it. So we have written to function. One is the regular function and another one is the arrow function and both are doing the same. And this is the shorter was and off dysfunction. We don't need to write the function keyword over here. Let's do one thing. Just come in this out, save it and let's run it. You will find no difference for this. So let's jump into the browser to see the output. But prior to think that would put let me know certain changes so that we will get the output off this one as well as this one. So what I will do? I will cut this up on remove this one, and I will put it over here. Save it. And this time I will also put it in tow. Opera on. Then I will console dot log put up over here. Semi colon. Save it. No, let's jump into the browser to see the output. So CEO it has converted to uppercase, whether it was in loop or whether it is outside the look, we're able to use the arrow function who? Let's proceed further. So one thing you notice over here that there is no parentis is whenever we're using one barometer over here. But if it has to, then you should use the parentis is over here. For example, if you're having to perimeter like steer and some message just for demonstration and here just toe the console lost soul dot log message and we will pass some message. This is for demonstration. I wanted to demonstrate that whenever you are using to perimeter over here, so you need to provide within the parent. This is if there is a single permitted then you don't need to provide. The parentis is over here. And this time, whenever we were using it, we need to pass the value. Some message over here Demo And he also we need to specify Demo one. Save it. Let's jump into the browser. So this is just a demonstration that the reason I have used that them over here. So here, every time, whenever it is being called. So it printed their demo over here. So, no, let's proceed for them. So let me change it back. Controls it. So let's say injectors. So it is being chained now. So no, The question you will re asking if there is no perimeter so does it require toe? Does it require? I should not provide. The parentis is over there, you know, you need to provide the parent. This is over here. If you are not having any kind off perimeter within the function, you should have to provide this parentis is as it is, a basic Syntex off at a function for this case. We're using it. So let's provide str save it another magic off the arrow function. Is that supposed that if you were just having a single return value, then you don't need to provide this. We just remove it and you should. And you should also remove the return key word it will or to write on the value. So this is a one liner function. Now save it on. This will still work. So let's jump into the browser to see the output. So you will find it over here that without writing the body, if we're having a single return value, then you can complete the function within a one liner and it will work as expected. So CEO. It is growing the conversion over here from a smaller case to upper case. No, let's proceed for the one last point. I wanted to tell you about the Arab function. When you are having a multiple lane, of course, than it should not be written like this. You must have to use the curly braces. And within that you should rate the multilane off logic as per the requirement. So I hope you understand this arrow function concept and you are now comfortable with ara function concept. So on this note, I'm stopping over here, seeing the next such until then, but I take care. 29. Callback Functions: Hello, guys. Welcome to another station. In this session, we're going to discuss about callback functions. So let's jump into the visual studio code to understand this topic. So far, we have understand the concept off functions. What, actually the functions is and in the same aspect, we have also understand about the what is perimeters. What is argument so so far, what we were doing. Whenever we're calling a function, we're passing the argument and the type of argument we're passing like a string number and any other data types. You know what we will do? We will pass the function as an argument within a function. And when we do this, this concept is called callback function. So to understand, it better let me write the program for callback function, and then we will discuss about callback function, but practice rating the cold. I wanted to explain one more thing. Why do we actually need the callback function? Callbacks are a great way to handle something after execution off some of the function in more clement. Um, I can tell that Suppose if we want to execute a function right after the return off some other function than In that scenario, we can use the callback functions who know, Let's design the callback function. And the example which we're going to do over here is we will create a mini calculated. So let's later to lex. Right? And arrow function over here. That is constant medical collector. And then we will pass to perimeter over here to number E and B, and we also need to specify the operations what operations were going to pass. This is going to be a function. So this is the reference off the function. And then this is the body off the arrow function. And here we will define document dot Right this time we're going toe print the output on the webpage. I'm using it here. We will use the template testing, which we have launched a vote on Dhere. We will specify number one, and here we will specify a dollar and the valuable A. And afterwards we will unspecified. Number two on that is going toe dollar. Let me Colin. And now we will call the operations Cooperation bridge. The spelling is wrong Over here Operation. We need to pass the argument over here. Save it. So this is our medical kalitta function, and it contains three perimeter who is for number, and this one is for function. So let's design it. So we're going to design four functions on day one for adage in one force obstruction. The 3rd 1 is for multiplication, and the 4th 1 is for the reason. So let's do that on those function will be passed over here while calling. So let's do it. So we need to rate it is going to be a single line function, which we have already seen, and we need to specify ad and to argument. We need to specify G and B, and here we need to us. But if I document don't rate because we also want to print some message along with the result on this, we're going to keep over here, and we will keep it in tow. The photograph be tag. So here we will specify the beat tang, and within that, we need to specify a result or say addition result equal to and here we need to a specified dollar. Curly braces a start e plus, we leave it, copy this one and paste it four time we can do it for so abstraction, multiplication and division to save it. So obstruction. And here we need to tell that it's obstruction here, multiplication. And here we need to change the name multiplication. And here we need to specify minus and here my application on at last division and for the reason we need to specify into reason. Dessert and here. Division symbol. Save it. Now we need toe. Call it so how we will call it. So we need to specify many calculator on the perimeter. We're going to pass two numbers, for example, six comma six and what operation we want to apply. We want to a play addition first. So let's write an addition. Add Save it and let's jump into the browser to see the result. So see you. You have designed a callback function, which is a mini calculator and where we're passing to number and it is doing an addition. Now let's do all the four operations together and see the result. So let's copy it and paste it four times. One is already there, so that's it. Substructure in and here we will tell where duplication and here we were, tell that they've written here We will change the value, whatever the value. Want to pass? You can pass it here. We will keep keep it. Same force obstruction. We can keep 40. Save it next. Jump into the browser to sit out and seal. It has printed like this. Whatever the value values and the operations reposed. So it is performing those operations. Let's proceed for the so this is the way you can design the callback function. So here you have designed one function, and within that you are passing as argument over here, another function. So this function, which we have designed, it is performing some task. And then we're calling this callback function. And as I already mentioned that, why do we use callback function? Whenever we want to execute a function right after the return off some other function, then callback function can be used. So I hope you have understand the concept of callback function. So on this note, I'm stopping over here. See you in excess until then. Bye bye. Take care 30. Function Vs Method: Hello guys will component decision in decision. We're going to discuss about functions, verses, methods. So let's jump into the visual studio code to understand the difference between functions were, says methods. So what is the difference between functions and the method? In a simpler time? I can say that a function is a piece off court that is called by your name, as we have already seen, like analysis. And we have designed a callback function where we're calling the fund by its name. Now the question over here is what actually methods. Method is also a function, but that is being associated with the object. So far, in our course, I haven't discussed about objects and I don't want to confuse you on object topic. So in simple time, I can tell that an object is an instance. Off classes class and objects are the core concept of object oriented programming. So basically, whenever we create a custom rated on that time, we use classes. So we're designing the classes. We use radio staple variable that is called class variable and very staple methods to define the functionality for that particular custom data type. So the function, which we define within the classes that discord of method on which is being called with help off object with started notation For example if you remember our example of Lear example what we did we have used the to upper function over here like a steer door to upper keys So str is an object over here on we're calling the to upper case This is the method so you can't call directly the two up Oh you have to call with this str object and then the daughter notation and then you have to call so function you can call directly with the name like this way I have created a function over here and within that internally I have used this str object on then I am calling the method to convert it into the to upper case So this is scored method So here So here I have defined this at a function and within that I'm calling the str method to oppa creates for converting from a small in case to upper case. So if you closely look into this program, then you will find that this is the function which I'm calling directly without any daughter notation with any off the object But here we had having this object on. Then we're calling the associated function. So this function is basically Caldas Method because it is being associated with this particular str on internally it is a a string class. If you look into the implementation off the string clause, then you will find that there are various methods that is being defined. So let's look in tow. What are the methods available supposed that if we were having a string variable for example str one And here you are assigning some value any value you can tell that and now you look into this. Then you will find that str one door So these are the methods is being available CEO. It is represented as method as it is a string class CEO. It is telling their to Tiso a string claws And these all methods are every label with a string class and that can be used for different, different purpose. So no way hope you understand the difference between function and method. So on this note, I'm stopping over you see in the next session Till then, Bob, I take you 31. ForEach Method: Hello. Gates will come to another station in this session. We're going to look in tow cordage method. So let's jump into the visual studio code to understand the uses or forage method. So after last session, you have understand the difference between functions were said method. In this session, we're going to use one of the areas may 3rd that is called for it to do this exercise. So let me give you the brief about what actually we're going to do in this session. So so far, whatever we have done, we have done and printed in tow the console dot log. We haven't done any kind off output displaying on the estimate Peach, whatever we're displaying were displaying Unconsoled or claw. That is not the right way. That is good for designing the larger. But at the end of the day, we have toe create the application which will be presented on webpages. Toto understand the forage method concept. What we're going to do, we're going toe use the same example which we have used earlier, where we have an article fruit ball and we were converting it into the upper case. Now what we will do we will do in this exercise. We will reprieve all the elements one way one and we will convert those elements in tow oppo case and then we will display it in tour estimable page using you will and a light tackle. That means we can create the dynamic last email court that we will generate with the help of JavaScript, and we can dynamically bind the output off that particular dynamically generated code with the webpage. So let's a start writing the program. So first, what? We will go. We will go to the index Daughter's team will page, and there we will create a class with you element that we can retrieve within the program. Using query selector. Don't confuse about Curie selected that we're going to discuss when we will discuss about Norm Element, which will come further in this court. So now let's jump into the index dot html and hear what we will do. We will introduce a ul element that we're going to select, and within that we will tell that the class name and the classes ball and he'll we will lose it. Say we know. Let's jump into the day s fight and we will start writing what we will do First we will grab the you will reference which we have created now. So we will tell that Const You will equal to document door query selector And the thing which we are selecting is the fruit ball Here we will specifying football which we have created over here just now. What it will do It will grab this you attack using the class name No next test of what we will do. We will proceed photo and creator the STM else So what we need to do? We need to specify Let s demon We need to define or heather element in a template history So we need toe tell that each one and within that we will specify ball That's to some for mating Over here we will tell that this time equal toe color even littler should be blue We have defined the style over here. Save it now Let's proceed for though the next test of what we will do we will access each off the element which is existing over here And then we will create the l. A. Also lets do it or we can do that. You know, we relaxes the fruit ball and there is a method which is being given called for With the help of that, we can iterate through each of the elemental. If you remember, we are having this is going toe with a fruit is going toe with a local variable This is here I'm defining the callback function If you remember the concept of callback function So this is the same callback function we are going to define over here with the help of pharaoh function and within that we will access each of their limit and do the formatting. However we want to do so what we will do, We will take the estimate this variable which we have created and we will upend it or we will happen it plus equal toe and heel. Within that we will a specifying ally And within that we will provide the style and we warned that each element should be green while printing. And then afterwards we will tell that the dynamic valley how we can access the dynamic value dollar curly braces and within that route which we have refined over here, this fruit don't keep toe up a case. You with help off this for method. Now we will close it now we will close this L A. We have closed their life now save it. And once it is being saved now let's log this so that we can understand that what it has generated over there long, we will print their stable, the court which is being generated. And then we can bind it with the help of Weiner STM and we will assign the esteem in which we have generated Save it. No, let's jump into the browser to see the output and see you. We have dynamically added this ally element in to our webpage on which is inside the U element. We can see what the court we have generated by pressing after well, so it will open the console. And when you go inside the console, then you will find that we have generated because the sexual tag and within that was the Sichuan tag. And after that, we have the l A elements. So how many number off elements exist? It has entreated those number off a light tag on at last water. Did it blinded this esteem toe the U element on that you will element which we have selected through the query selector. So this way you can use the for each method which is coming very handy whenever we're iterating something and we want to generate some dynamic or on top off some airy, then it is very handy function. So this is what I wanted to demonstrate you in this sessions on this note. I'm stopping over here seeing the next session till then, but I take care. 32. JavaScript Objects: Hello, guys. Welcome to another station. In this session onwards, we're going to discuss about job. I escaped objects literal. In this session, I will give you some brief about what Actually javascript object is if you want to read successful showers crew programmer than it is really, really important. To understand the concept of JavaScript objects in the earlier station, we have seen one type of an object that is Garland Ari, but I haven't discuss about work. Actually, the object is so let's start our discussion toward actually an object is an object is a collection of properties on the property is associates in between a name and the value along with the property. It has methods as well. So let's look into the example which we did earlier than you can easily relate the definition with the example which we did earlier. In order earlier example, we have created an eric or fruit ball, so this is actually an object, and it offers us property as well as the method. So let's look into the water, the properties it offers. If you remember that when we wanted to calculate the length off this area, who how did we calculated that. So if you remember, we have used there is a property core, little CEO, the sizzle property and it returns us the length off this fruit ball Lent means home in the number of element it has. And then it has also afford us various methods. If we remember that we have used something called index. Also, these are the method it it offers. So here you can see that it has office does this method and there are other methods as well . Lake foreign joint. So these all are methods which comes with this area. Object. One thing you should remember that objects in JavaScript, just as in many other programming language can be compared. Toa objects in real life. So, for example, if you take an example off a phone, that is a real time object and it has properties like color size models and many other properties. Along with this property, it has also the functionality, like bringing, taking a picture. It has music player. You can use it as music players. So all these functionality is being offered by mobile objects on the same aspect. The object in javascript is no different. It has also the property and it has also the methods which provides those various functionality. If you're taking an example over here, you can see that and a days an object which offers the properties like land. It offers various method that provides various functionality. So far, we have seen so many various staple for objects, which is being provided with the always script. But in our upcoming session, we will see that how we can create the custom object along with the custom object. We will also look into some of the joy school provided object like math object eight objects on this. No time stopping over here from the next session onwards, we were looking toe objects in a more practical way. So see you in the next session till then, Bob, I take kid. 33. Creating An Object Literal: Hello, guys. Welcome to another station in this session. We're going to look into creating an object literal. So let's jump into the visually studio court to understand this topic. So in the last session we have discussed about what, actually the JavaScript object. It's so no. In this session, we will look into how to create an object literal, So to create an object. Little's we have to a specify like this. We need to tell that let and the variable name name of the object, and then you need to specify the curly braces, the start and end. So this way you can create the object. And within that we need to specify the key. Really weird. So, for example, we need to specify employees that is going to be some number comma and then another property, which is related to this object like name off the employees. So we will tell that it's an extreme retell render age of the employees were little fortifying fall whatever the phone number is. With this way, you can create an object. Now the question over here it is Now we have created No, let's bring this object employees and let's look into the output word output we're getting . So how we can do that? We will tell that console daughter log on Dhere. We need to specify employees and save it. That's jump into the browser and he'll when we have printed, consoled or clog employee. Then you will find that it has given us object, and within that you will find that it has provided the key really prayer that is a properties off the object. So the idea property is having this value named properties having the really wonder and ages having 45 along with the phone number. And here it has given some proto information that we will discuss when we will discuss about object oriented programming in JavaScript. On that time, we will cover all this topic before a timing. You can see that how we can create the object literally in JavaScript. No, let's proceed for the no. The question over here is how we can access the value off these property directly. So to access it, we will use their daughter notation. So let's look into that. We will tell that console dart log employees dot which property you want to access. I want to access name, you can save it and let's jump into the browser to see the output and he'll it has returned Brenda the name of the employees. So this is one off the way you can access. Same way you can access the age of the employees like employees 0.8. Let's look in tow the output. So he turned, it turned out, Photo 45 That is, they is often employees. No, the another way we can use with the square bracket notation. So what it means Suppose that if I want to access any variable like four number, any property like phone number. So we need to tell employees the object and then they're square record to start on. This is goingto be a string. So for that reason, we need to specify which property you want to access for this time, we want to access for save it. Let's look into that. So here the output it has given this number. Now let's proceed. For the this notation is very handy whenever we're designing some dynamic logic. So, for example, if you make up and ari off all the property that improper, you can define let improper equal to all the property value. I can tell over here I d common name than they can say age food. So no, I have created an added Let me first come in this one and now what we will do. We will grab each of the property and printed into the console. So let me access the employ proper carry on the method we're going to use the for each method. We can create a callback function with the arrow functions in text, and here we will specify the prop. And then we will tell that console dot long. And here we need to a specify employees on the province's the dynamic property. Save it. Let's look into without worked out what we will get and CEO. It has given us all the output off each of the property without accessing it. Individually. We have access to it through dynamically, so let's proceed for the so this notation is really very helpful. The square bracket notation and it is very handy whenever we want to design some dynamic logic. Now, another thing, we will look in tow the type off the employees variable, which we have created So let's looking toe that. So we will tell that console North Law and he'll type off and then we need to specify employees. Save it. Let's look into the type off employees and you will find that it has returned us as an object. So let's proceed for the one last point I wanted to mention over here. If you want to update the value, so how you can update it, you need to tell that your employees, for example, if I want to update the phone, I need to tell that phone equal toe the new value. Save it and let's look into the output water. Start working Soldat Law Lloyd got for favorite Ex. Jump into the browser to see the output, and here you will find that this value is being updated with the new value for 564565 So let's proceed for them. So no, we have understand that how to create an orbit literal enjoy script and we have also seen that how we can access each of the properties with the daughter notation as well as the square record notation. The square bracket notation is very helpful. Whenever we want to design any dynamic logic on that scenario. It is very handy. We have also seen that home we can update the property value often object along with We have also seen hope to check the type of variable. So on this nor time stopping over here. See in the next session till then, Bob, I take you. 34. Adding Methods To Object Literal: Hello guys. Welcome to another station in this section. We are going to look in tow. How to add methods toe object, literal. So let's jump into the visual studio code to understand this concept. So in the last session we have seen about how to create an object. Neutrals enjoy a script and we have also seen that how to add property within the object to know we were looking toe hold to add object method within JavaScript. But tryingto that I wanted toe remind you what Actually the object may 3rd says if you remember the example between did earlier that is converting from a smaller case to upper case On that time we have used str door to a bookie. So that particular method is a method of string object that actually performed the logic off. Conversant from its smaller case to upper case the same way we can design our custom method for our custom object or this case I'm going toe creator met third for this employee object and the myth of discord, prints of print functionality, I'm going to introduce in this object. So how we can do that? We need to tell that print, and then we need to specify a function. And over here we need to specify here first coma. And within that we need to tell the logic to Let's do the logic over here. So first we will again take the reference off all the properties. So if you remember, we have used last time improv. It contains all the properties, information like I d name. And then we have a and then we have phone. Now we would like to read each of the property and print the value. So how we can do that again, we will use improper. It's for each mid third, and this time we're going to define the callback function with the help of pharaoh function . And here we need to specify the problem that is for properties. And we will console, lock and sold or clogs. And here we need to a specifying go ploy. Over here, employees and each of the property. I need to access it the same way we can implement it with a print method. No, we have designed this print method. So how we can access it. We simply need to tell that employees dot Prince Avery Let's jump into the browser to see the output and see you. It has printed all the information about the employees object. So let's proceed for those who this way you can introduce the functionality within the object. And this is called method of the object this court print method. We have defined a print may 3rd within employees object. So on this note, time is dropping over. You'll see in the next session. Till then, buh bye. Take care. 35. This Keyword: Hello, guys. Welcome to another station in this session. We're going to look into this keyword, So let's jump into the visual studio port. To understand this concept in the previous position, we have learned about how to create object literally. Along with that, we have also seen that how we can add methods within the object Literal swell creation. Now, in this session, we were looking toe work. Actually, this keyword is and why we need this key would while working with objects in javascript First, let's understand about the problem or the problem. We have supposed that if we're having an every object within this object, for example, this employee is also having the project which Seaworld don't, for example projects. And we can tell that and it is going to be an area object. And we will tell that project one my project to just for sake off simplicity. I'm keeping to project Project two and here coma. And now what I want. I want to introduce a method which will lives down all the projects he walked upon. So I'm going to introduce all of the function called get projects. And within that we will define the functions function and here we need to access the project. So if you think like I can Barrick Lee go on, do the console log and access the project radically, as we had inside this object like this, then it will throw Eric why this project is nor directly accessible within it. So let's look into the output water put we got. If we trade toe access employees dog project, let's look into the output water what we will get. Then you will find that here it has throw an error. Projects is not different even though it is defined within the object literalists who let's proceed further and looking toe how we can resolve this issue or say how we can resolve the sailors who hear. If you introduce the keyword cord, this door projects and now you try to access it. Then you will find that it will return though project. So let's look into the port of CEO. It has returned this project daddy and it contains two Project Project one and project to you want to print the project individually? Let's do it So to do that, what you need to do, you need to tell that this door projects and then for each method and within that, we need to design a callback function. And here we need to tell print although projects so here. We need to specify the project. And it is a perimeter we need to define to access the project individually. Say we're here, you can take over. This s removed this disc e were to save it. Let's jump into the browser. And here you will find that we have iterative one by one all the projects. So now let's proceed further. No, you understand that hole to use this keyword, But let's understand what? Actually this keyword is so basically, this keyword is representation off the current context. The current context means it is representing this current object. And within the current object, it is telling that whatever the object we're having, I want to access project Saturday. So this keyword is a representation off the current context? No, Let's bring what actually this object contains. So let's would take in tow this print object. What we will do over here, we will tell that consumed dot law and within that we will print this save it and here it will call print. No, let's jump into the browser to see the output. And here you will find that this has returned us the current context. That is our object because we're printing through this giver. No, let's proceed. Photo. But if you print this ski world outside off this object than the context will be changed, how is it so let's look into that if you will, right, consoled or log. And here you will rate this than what will happen. It will bring the context window. So let's look into that. Now you will look into here. It has printed. The context is window if we are printing outside off the object. So this keyword current text is changing as per the object. Earlier, we are printing in the current object that is our object which we have created, and outside it is printing for window. So no, let's proceed further. So, no, I hope that you understand what actually the significance off this keyword and went to use it and where to use it and how to use it. So if you have any questions, you can rob a message to me. I will answer your cushion. So on this note time stopping over here, seeing the next session till then. Bye bye. Take care. 36. Math Object: Hello, guys. Welcome to another station in decision. We're going to talk about math object. Matt Object is the building object within JavaScript, math object operas, various properties and the method, which helps us designing the logic sometime in our application. So let's jump into the visual studio code who look into some of the properties. Some of the methods off Matt object. So let's look into the matter object. We're going toe stand. What are the properties on water? The method available within the math object. First, we will consulted or clog and check that work. Actually, within the math object you Matt object, is accessible with the help of Mad World and make sure that it should start with, um, capital. No, let's jump into the browser to see the output, and here you will find that it has given us videos methods along with some of the properties, like by. So to get the value of the point, we need toe tell that console dot log, and we need to specify matt dot my save it. Let's jump into the browser and you will see you. It has returned the exact value off by which is internally we used 3.14 but in this case, it has given complete value. No, let's proceed for the same way to find the value off E. It has also provided the property e. So it has given the value of that is you learn number. So right over here console not long, man. To get the value of feet. I mad, not e save it. Let's jump into the browser. So it has returned the value off E. As we all know that the value off is the golden number within math. Now let's proceed for the so So far, we have seen the properties also offers so math object also offer various method. For example, if we are going to have a number for example caused just, for example X and we can assign some value like 4.5. And if you want to calculate the round off this number, so how you will calculate, we need to tell that console dark log and we need to especially for me, start role within that we need to pass value off act what it will do. It will roll off the number to five as it is applying the logic. If it is greater than equal to fight, then it will only two number five. So let's look into the airport to see you. It has not only did two number five now, let's looking toe another method that is called seal method, which will take the higher value. So that means with seal. If we're providing this value 4.5, it will also return the value five toe. Here you have seen that this fight is printer by round, and this five is printed way. Seal Seal is taking the next higher value, so let's look into that. So, for example, we will make it X only, and this time I'm going to change it to 4.4. So let's look into the output here. You will find that found has kept it for because it is lesser than 0.5 after the symbol visit. But with the seal case, it is lesser even, but it has taken the higher value off that. No, let's proceed for the in the same aspect. There is another method that discord lowered. That floor meant we generally used to get the lower value. So what it means if I will tell floor than what will happen if I will provide the value. Five. Over here. 4.5 so it will print only four, even though it is greater than equal toe. Five, it will take only four. Now let's look into the output. Don't see you. It has taken the food. No, let's proceed for the so how we can generate the random number. We can tell that console dot long and over here we need to specify Matt, start random, this random number. We will multiply with hundreds. What will happen? It will generate the random number between 1 200 Or let's look into that. But we will also make sure that we should rounding it off else it will give us the decimal number, so make sure that we're rounding it as well. So let's do it. Save it now let's jump into the browse to see the output. So see you. It has generated a number 45 every time whenever you re press the peat, it will generate the random number this time of generative 66 this time 33. So this way you can gender the random number see you later, Generator 96 this time. So no, let's proceed for those. So this way you can use math objects. There are various methods also every level so you can look in tow That So on this note, time is dropping over here, saying the next session till then, why am I take it? 37. Primitive Types Vs Reference Types: Hello, guys. Welcome to another station in this session. We're going to talk about primitive types vs reference type. So let's start our discussion. So so far in our courts, we have seen various types of data types like number, string bullion, all undefined object symbolises. Still, Temple is yet to discuss So one thing I wanted to let you know about the data types, all these details which we have you so far it is being cared. Toe grazed into two types that is called primitive types, and the difference tape on the data tapes, which belongs to a primitive types, is numbers string billions. Now on the point on the same boat. On the other type of reader type is a reference tape in this category, the data tape which belongs toe. This is an Object Aires function, deeds and all other objects, which we will work with. All belongs to the reference type category. So here the question comes over here. Is that what actually the primitive type and the reference types is so the concept of primitive data types and the refrigerator type is related toe the memory. That means how we're keeping the information within the memory. So what happened whenever we're creating a new number, new string and any Boolean values, So it will be a student. Something called Stack Stack is just a stack that has different values in a memory, and it can be accessed very quickly. But the stack has very limited space within the memory. But when we create an object, literal Ari functions, then it will be stored in a place called He he passed More has been several level that is bigger, that will hold the object types. But the problem with the heat compared to the stack keep is a little slow. So here, IAM dis turned that the first difference between primitive type and the reference type is that primitive type historian stack and reference type with touring he keeping the litter in stack is faster than he. But why you stack is fast and why he pits low. The reason behind is the data exist within Stack is directly available, but when we want to access the heap, ditto. Then it will be forced loaded into the stack as a pointer, and then it will really treat so it will look something like this. So the data from the heap is is the reference through the pointer within the stacks. Whenever, if you're accessing the reference variables forced, it is being access to Pointer. On this point, there is being later referent to the object and their values, and then the values off the object is accessible. And because of this mechanism, stack is fast and hippest slow. So no, let's jump into the visual studio code. And I wanted to demonstrate you one of the major difference. Whenever the data exists within a stack and you are making a copy off that variable, what will happen? And whenever we were having a data in tow, he that is a reference type and you are making a copy of the reference type. And if you are updating than how reference type and the primitive type behaves. So let's jump into the visual studio code to understand the copy behavior off primitive data type as well as the reference data type. So we're into the visual studio code, so, no, let's look into the example. So what we will do, we will first create a valuable core number one, and we will assign some value like 40 and then we will create another variable that is Cornum too. And I'm going toe assigned the same value which is being stored in number one. And then we will print it console Dort log. And within that we will use the temperature string and we will tell number one equal toe dollar number one comma number two, equal toe dollar numb toe. Save it. Let's look into the output. So you will find that it has printed the number 40 and number 2 40 No, let's proceed for though, and update one off the value. So know what we will do. We will update the value off someone equal to 60. Save it not. Let's look into the output water, but we will get so here You will find that it has updated the value 60 but it hasn't updated the number two. Why is it so? That is because whenever we're using primitive tape, it will make the copy off primitive data types. So that means it will not affect toe number two because it is entirely every label within different location or the memory. But this is not the case with the reference data type. So let's look into that. So no, we will look into the reference type that will see the example. We will create an object and we will make a copy off that object. So let's do it cause to e m. P equal to we will keep the properties name Brenda and age for the sake off simplicity. And we will tell that 45 we will make a copy off this The MP object e m p. Equal to the MP one equal to P MP. No, we will console or log. We will use the template of string on. We will tell that e m. P and we will e m p age and we will tell that dollar E M p curly braces first and we will tell the TMP nor to eat and same for the e M P one. Save it. We will give a comma based it. On this time we will tell that the MP one over here and save it. Let's jump into the browser to seethe out what and you will find that it has printed 45 for both the object. No, let's look into the difference. So let's jump into the visual studio code. So this time I abrade the age off GMP. So let's do it. So how we can do that? We will tell that, um, we don't eat equal to, and we will tell that it is going to be 50. Save it. Let's jump into the browser to seethe out and CEO. It has operated the age off the MP and E M P one. Both off them is 50. But when we do with this with primitive type, it didn't happen. It has only updated the number of one, and in this case it has updated but the variable. So why is it so? Because we have created two variables in reference type, but it is refering to the same location. It has made one leader replica off the reference. So let's look into a diagram toe, understand this concept. So when we use the primitive type, the number one will be assigned to numb toe, so it maker replica. It is a separate copy, so no, whenever I'm changing any value within any off the variable, so it is changing toe that particular variable, so it is not affecting the other variable, but This is not the case with the reference type for reference type. What is happening? It is making the copy off the reference, but it is pointing to the same location so that the reason whenever if we're updating any value, for example, for the each case we have updated from 45 to 50 and both are refering to the same information. So that the reason the changes over here for E. M. P. H and the MP one age giving the same information. So I hope you have understand the difference between the primitive type and the reference types on this note. I'm a stopping over here, seeing the next session till then. Buh bye. Take care. 38. Document Object Model: Hello, guys. Welcome to another session in this session we're going to discuss about document object model. In short, we can say there don't. So let's start our discussion. What is document Object Model? Or in short, what is dogs? When Broza loads the estimate P, it creates the document object modern for that particular piece. Who at the end of the day, we wanted to interact with the estimate document from all JavaScript code. We can easily modify the content off the S Tamil document. We can introduce some new element within this Jamel document. We can modify the existing element with the help of JavaScript code so prior to interacting with the JavaScript. Cool. What is happening behind the semen browser, Lord, the webpage. The browser creates an object and the object is called document object. And then document object contains many different properties as well as it also contain many different methods that we can interact with the documents. So whenever we want to do something on the browse like somebody is clicking on the button, you want to add something in the browser or if we want toe, remove something from the browser. If anybody clicking on the button. We can achieve such functionality with the help off document object to give you the glimpse about the document Object. Let me open a browser and I will show you the document. Object in action. So we're into the browser. And if you tape over your document and in tow, then you will get this document off. Check on this document object models, though, Stolp. So if you click over here, then you will not get any kind of a property of with you. You will see a esteem. Ill documented structure. So now the question over here is how we can access the property off this document and how we can access the methods off this particular document to access it. We need to, especially for a document art. And then you can find all the properties and the method which is being associated with this document. Object. For example, if you want to access the document location than you can click over here toe, then you will get the detail information about the document location. Same way you can access other properties. For example, if you're right, if we want to access the document door to you are Then you will get the You are loved this particular document If you want to get the information about some of the elements So how we can get that So we need to write document or get element by i d. If you want to access some element with the I d, then you can use this. Matters were here. The first point to remember is company. If you want to play with this has table document with programmatically, then you must have to get the context of this particular document object and then you can manipulate any off the elements within the STM l document. So now let's proceed further and we will look into how actually the document object model represent the estimable document. So basically document object model is a hierarchical document, a structure that contains various Now Also, if we close you look into this diagram Then you will find that the root element is the estimable element and within that we're having two different elements. The 1st 1 is the head element. Another one is the body element. Head element contains the title element on which within that it contains the text the same way. The body element contains the H one element along with the paragraph element and within that it represent the text. So document object model maintained all these things as a head article element. And if you want to manipulate any off the element than you have to access that particular node, So, for example, if we want to manipulate this heather one each one, then you have to access the body element. And within that need, toe access this etch one element with the help of JavaScript using document object model. And whenever we're doing any kind of manipulation within the North, we use different types of methods off document object using JavaScript. So you tell you that just remember this diagram as this is really very helpful whenever we want to do any kind of manipulation within the estimate document, as all of the estimated document maintained the same kind of her document structure within the browser. And if you want to perform any kind of manipulation with inestimable document than on that time, this diagram comes very handy to access the estimate document. If you haven't understand about any of the concept, whatever we have discussed ill. No, don't worry. We're going toe So many practical example in the upcoming session that will help us to build our document object model concept. So on this note, I'm stopping over. He'll see in the next session till then, Bob, I take you. 39. QuerySelector: Hello, guys. Welcome to another section in this session. We're going to look into credit selector, so let's start our discussion. So in earlier session, we have looked into document object model and document. Object model is nothing but a tree like a structure where all the element off the STM ill document exist within and hierarchy, as we have already discussed previously, how all these elements are placed together within and hierarchy. So one rule of thumb by wanted to let you know that whenever you were adding or removing any content on the as table document, then you have to first decide that which element you want to target toe, add or remove the content within the element, and then you need to reach to that particular element within the dome and the process off reaching toe. The doorman Selecting the element is God's greatest selection. So in this session we're going to focus on this a step and then letter. In another session, we will look into how to add and remove content within the selected element, but first we will own that. How to select the element within the dorm with the help off very selector So let's jump into the visual studio code to see the set up for this. Examples were into the visual studio code and the kind of set of we're having for index dot html. It will look something like this where we are having one heather element actually element along with three paragraph element. And along with that, we are having a one mean development, along with some internal David immediate element. And with one paragraph there is, ah, class associated with it that is called appliance style. And along with that there is in a Dave. You can find that there is a class associated with name called Social Icon. And if you look into the browser, it will look something like this. So this is the output you will get with the return STM all five court. So our first exercise would be we want toe grab the reference off. This forced Pitak with the help of job. So let's look into the example how we can get the reference off the first pitak. So let's goto the Js file and hear what we need to do. We need to define a variable the court const. And then we will tell that cost paragraph equal toe and then we need to a specified document dot Grandy selector on the Syntex which we need to remember we're here is that within this query selector it expect the perimeter. So we need toe a specified oh element or the reference off the element which we want to grab. So, for example, if we want to grab the p tag, we need to a specified be over here. No, save it. So what happened with this line of court? What it will do? It will go to the estimable document and it will grab the first element which is off B type , and it will grab that preference and it will ignore other pitak. It will just grab the forced reference off the P tag. So to prove you this point, what I will do, I will console law this variable. So how we can do that? We need to tell that console dot log so that we can very find that what? Actually, after Sarah contains now let's jump into the browser and console and we will look into the output. So we're into the browser we need to press after well, so CEO, you will find that the output which is being returned way the valuable F pera is the reference off forced most be element that is a step by step. So no, we get the reference off this pitak the first detect. No, we can do any off the activity way, adding content to this particular P tag and removing it so we can do any of the thing that we will see in upcoming session. No, let's proceed for though, So this is quite a straightforward. But for example, if we want to select this be tag or the second Peter go, we can do this. So, for example, toe this time what we will do, we will grab the reference off this particular be tag which is having a class apply a stain . So how we can do that? Let's look into that. So what we need to do? We need to specify the CSS elector over here, and we need to tell that dot Apply a style the name of the class, verify that we had having this a player style. No, let's look into the browser to see the output. Very element is being selected now. This time you will find that it has selected a pitak which is having the appliance style. Now let's proceed for the one thing you should always remember that created selector except O. C s a selector. If you want to learn about CS is on the CSS selector, then you can refer my course loan sees history from a scratch step by step where I have covered. See Issa selectors in more detail. No. Suppose if we're having multiple elements with the same class name how we can select one individual element with the same class name. So let's look into this example. So over here you will find that there is multiple live and it contains an image and eating majors having the same class name. So how we can make sure that a particular element is being selected, What you have to do, you need toe goto the browser and here if you want to select the YouTube icon, then you need to click on inspect and wanted to open this one. Then you need to right click on this on it will open this window and here you need to click on copy And then you will find copy selector once you click on the copy selector now, goto, though easily story you could and you should based it over here. And then you will find that it has a unique name. So for this case, it has grabbed the reference off that particular day. So no, let's save it and let's look into the output in console. So let's go. So let's click console over here and then you will find that it has selected that particular image that is YouTube dot B and E, which we have selected through the query select. And this is really very handy whenever we want to grab the reference off nested element within Dom No, the same way. If we want to grab the reference off the learning Pitak, that is a second Pitak. So you need to select this one. Inspect, and then it will open this one. And here you need toe click over here on copy copy selector. No, let's go to the visual studio and paste it over here and here. You need to basted so it has selected that particular Pitak. So let's verify it into the console. So here you need to click on console, then you will find that you need to repress it before go to save it. So let's save it over here. Now goto the browser so clear this one reloaded. Then you will find that it has selected that particular element. Now let's proceed for though. So so far, whatever we have discussed, that is selection off the single element. But now I want to select multiple element for exams. But I want to select all the P element, and the system will document how we can do that. So let's look into that. So for selecting multiple element, there is another selector that is called Grady Selector. All on it will grab all the element, all that particular type, for example. In this case, I'm going to grab all the P tag reference or let's look into the airport So you will see it over here that it has given us the normalised and it contains three p tax with the zero p one and the Pito, and over here you will see that it has also returned the third element that is having this appliance style class. One thing I would like to tell it over here that this your list is look like an array. But it is not an array, so we can't use the other mattered on this nor list. So we can't use all the anima third on the Nord list. But there are certain methods we definitely use with the North list. So what we can do with this normalised? Let's look into that. We can select the element off the North list with their square bracket notation. Supposed that If I want to select the second element, then I need to tell that one over here. Save it as it is, starting with zero index, so that the reason the second element is represented with one. So let's look into that, but and you will see over hell it has returned the second paragraph element. Now let's provide some other number. No, this time provide value to for the third element. Save it. Let's look into the output and you will find that it has returned. The third element Just clear. It reloaded and CEO. It has returned Third element, which is having the appliance study class. So no, let's proceed for the other method. We can use with the North list is the forage method for this time, what we will do better. And over here what we will do, we will tell that thought for E and within that we can create a callback function on. Then we will specify you over here, the paragraph and here we need to specify the body of the function. And here we can consoled or log and specify the paragraph. Save it and let's look in tow output and you will see it over here. It has returned all the elements, which is off by paragraph element. We're getting this two times. Why is it so? Because we're printing this as well. So just commented out. Save it. Let's jump into the browser to see that So clear it reloaded. Then you will find that it has printed when did the single time. And it has I dilated the normalised so nor list is a group off elements. Same way what we can do, we can select this. So So like on on this time, we will apply it over here and we will tell that ought Sosa like, Oh, save it on. We will tell that element. Better name is element would be good early and over here, Ellie, save it. Let's look into doubt on this time it has given all the development which is having a social icon repress it. So this time you will see over here. So it has returned. All the elements with this was a lake on. And we're right orating with the forage metal off lord list. So now let's proceed for the so no. We have seen that credit selector and the query selector all is usedto Grab the reference off the element within their document Object model. So this is what I wanted to demonstrate you in this session. Seeing the next session till then, Bob, I take care. 40. Get Element By ID CLASS TAG: Hello, guys. Welcome to another station in this session. We're going to look into get element by I d get element weight class and get element by tax . So let's jump into the visual studio courtroom district. What? Actually it is. So in our earlier session, we have looked into how to grab the reference or the dorm element within and hierarchy using creative selector and credit selector, all when we want to reference the single element than we have used the credit selector. But when we want to reference all the element, then we will use credits. Electoral no, in decision. We will look into some of the other methodology by which we can grab the reference off dome element. And then we will select that element to do the further processing. So let's look into the estimate page. What are the element existent? Then we will ride the court accordingly. Who? This is the same estimate page. We're having our diff with the 90 on another day within that that is having a classes know what we will do in this exercise? We will grab this idea and we will select the main Dave using I D. By your method core get element by i d. So let's do it. Earlier we have seen the C s a selector using the various electoral indecision we're going to look into the get element by 80 forced. So let's do it so cost. We can tell that get element by idea equal to And we need to specify a document dot get element by i d. And we need to specify which. Ideally, we want to take the reference. So here we are going to use this man who let's do it right means they we know we will console law this variable. So how we can do that? We need to tell console Dark Long and specify the variable. Save it. Let's look into the output water output. We got one thing you make sure that you should specify within the courts will save it. Now jump into the browser to see the output to see you. It has grabbed the i. D Maine and whatever the element exists within that. So this way you can grab the element by I D. No, let's proceed further. No, we will look into some other method that is called get element by class names Who? Let's do it. Let's go grab the same thing Copy pasted over here and the specify in ST Off Get element Way I d. We need to specify, not get element by class Name on the class, which we're going to grab is the social icon. So take the reference off it on this time we will pass it over here and make sure that it is in tow. The courts save it. Let's jump into the browser to see the output. So this time it has returned the estimable collection. And within that all the element which is having the social liken it has kept it. And this has Timon. Collection is different than normalised lord list. You were having a for each method for esteem l collection we don't have. If we try to use the for each method, it will not work. It will throw error. So let's straight. So let's state it grab the object. And over here we need to it specifying for like how we're specifying And here we need to specify the perimeter. And from there we need toe grab this perimeter and we need toe consoled or log and here we need to a specifying G. Save it. Let's jump into the browser to see the output. What out? What we're getting. Save it and you will find that it has returned there. D dot Forage is not a function, so in short, you can't play for each metal on estimate collections. Who let's remove this, Elect this woman, Remove it, save it? No. So to grab the single element how we can do that? We need to express by the square record notation and we need to specify the index. Save it. Let's look into without photo Here you will see that it has returned us the first element from my Stammel collection. No, let's proceed for the no, we were looking toe get element way tag name. So how we can do that? It is almost the same way the method will be changed. So we need to specify you. Will you so better take off Pete Street over here and then a specifying get element way tagged him. And here you need to specify with strong you want to grab, so you need to a specifying, for example, we are having over here the Pitak we can take the reference of the Pitak save it and this time we need to remove it. Later we will do this exercise. So save it. No, let's jump into the browser to see the output. And here you will find that it has returned the estimable collection. So if we want to grab a single element, how we can do that? We have already seen this. We need to specify their square bracket notation over here, so you don't save it. Let's look into the output. On this time it has returned the sister by a step so you can clear this out real or did. Then you will find that it has returned the first element, which is our index zero off D. A s Tamil collection. So all these methods are is one off the way by which you can select the element within the dome. So, apart from query selected, you can use all these method as well whenever you required. But most of the time the query selector is very handy for selecting the dom element. So on this note, I'm stopping over here, seeing the next session till then, Bob, I take it 41. 40 Adding Modifying Page Content: Hello, guys. Welcome, turn A decision in decision. We're going to look into how to add and modify beat content using JavaScript. So let's jump into the visa list to record to see this in action. So in order realization we have looked into how to select the Nord within the Dome. Iraqi using credits Electorate element by I d Get element Wake last name. Get element way tag Now after the selection, what we need to do, we need toe do the changes within the estimate. Documenta. Let's look into the indexed or tents team. Well, what we're having, I'm going to use the same example which we have used earlier, and we're having one heather element. Then we are having three paragraph element. Along with that, we are having their Dave with the meat and within that we are having differently, which contains also, like on CSS class. Now let's do some exercises over here. What we will do first, we will grab this element, the Forestell paragraph element, and we will grab the inner text. So let's look into that. How we can do that, Do that. We need to specify const and over here must be tagged equal toe document door and you We need to specify our favorite query selector and we need to specify the B tag over here. Now we have selected the question of Algeria's how we can access the content within this Pitak Toto access that we need to tell Console Dark log. We will print it into the console and we will specify Happy tag forced petered our inner text. So this is the property which we need to access and it will return us the next within the attack. So let's look into that now. If you look into the console, then you will find over here it has returned a step by step the world which is being Britain within the first paragraph elements. Oh no, let's proceed for the you know, we have seen that how to grab the content. But now what I want I want to change the country off this particular pretax. So how we can do that? We need to specify the tag element reference and then we need to again use the inner text and we will assign some other text, for example, step bias to have JavaScript favorites. Let's jump into the browser to see the output. And this time you will find that it has updated the court over there so just clearly and reload it. Then you will get the current output and you will find that it has updated the inner text. Now let's proceed further. No, I don't want to override the existing text. What I want I want toe happen Budo Existing text. So how we can do that? It is pretty much a straight forward. You need to specify plus sign over here and remove this one and you can tell that more than July script. No, let's look into the output. So what it will do, it will actually grabbed the inner text and then it will happen This text So let's look into that. Then you will find it to here that it has upended the text within the inner text off the first paragraph in here. Also, you will find that it has also updated over here. Now let's proceed photo. So this is the way by which we can grab the first pitak. But suppose if we want toe grab all the P tanks so how we can use it? We we need to create another variable called All Pete Tags. And here we need to use the same thing with which we have seen earlier. So that is our greatest electoral. And within that we need to specify the Pitak. Now, once we grab it, we need toe iterate This So how we can iterated, we need to use the method worry and within that we need to pass the callback function. And here we need to specify the tag Be tag over here and we need toe iterate one by one. So we need toe tell that if we want to update oh, inner text that we need to tell that we tag door in the text and we want to add something that we can tell that updated wrong would save it. Now let's look into the output of how we can see that we need to a specify over he'll soldat long and here we need to specify Pitak nor in a text saving or let's jump into the browser to see the output. And here you will find that it has offended updated from court. In each of the photograph element, Lexa specify the space over here. You need to specify this space. Save it. Let's look it again. No, it is coming properly. So no, let's proceed further. So now we have seen that. How? Toe of day content within element. Using JavaScript. So what we will do now? We will look into how toe upend an estimate element using JavaScript. So let's look into that. So first we will do. We will come over here. We're going toe create or development Soul. Right, Dave. And here we will specify class equal to my content. And here we will take this and put it over here. Now the next step what we will do, We want toe add another Pitak after learning Peter. So how we can do that? Let's look into that. So go to the Js file. And over here what we need to do We need to a specify like this. Go on strike! Untenable toe document dog. Very selective. And within that we need to a specify our class. That is my content. See? We don't know. We have grabbed the development. Now what we need to do we need toe a prenda. Interesting emails. So how we can do that we need to tell that my content door, inner esteem l plus for a pending than equal to. And then we need to a specify you over here another Peter which we want to insert. JavaScript court. And here we need toe. Close it, save it. And also we can console log arrested over here on this one, we should commented Save it, Let's look into the output. And here you will find that it has inserted this line this paragraph over he'll insert from javascript cord and here you will find that it has returned all the element inside the my content class. So this way you can easily add the estimate element within the dome hierarchy. So now let's proceed. For though we have understand that how we can add a stable element well done time with the help of an arrestable what we will do No, we can create our you will element if we remember that we are having or you will element in our earlier example on this time we're going to use the same example and we're goingto tell that the class is going to be fruit ball and then save it. And here this time we're going toe coming. This one. We will come in this one and we will create toe an Ari. If you remember our favorite Terry that IHS root ball. And this will contain different fruit like apple or ranges on great history fruits we're having now we rely to rate it and add it into the bulleted point. So how we can do that? To achieve this, we need to tell that, you know, we have created the fruit bowl area. You need to specify fruit ball 0.0.40 and within that, we need to define a callback function, but each of the fruit from the area, and then grab this and know what we need to do. What? We will define you over here. So this is the variable which we need to create over here, and then we need to specify a light tags plus equal toe. Then we need to specify the temperature string, and then we will build the estimable element over here, and then we need to spit straight dollar Could Liberace is start, and we need to specify the fruit. And here we need to close the ally elements. They know this is being done. We need to select the through ball you will element which we have already created. So select good ball you will element will toe document doors Kredi select over here and within that we need to specify in crude ball. So this is the class name which we have used once it this is being selected then we need to a specify here you don't forget to mention the door notation that it is a representation off the class. Then we need to specify Select a variable and then we need to tell that interesting animal we want toe a bit and we will specify a light attack. We need to assign the created as table over here. Now we are done. Let's save it. Let's look into the output. Let's verify it Everything Here we have done the mistake. This is the fruit not for bull Say well, let's jump into the Rosa So CEO, it has created the bulleted point using the you Ellen ally element. No, let's proceed. For those who know, we have seen that how we can dynamically add and modify the content off the as terrible document with the help of JavaScript. So this is what I wanted to demonstrate You Indecision seeing the next session till then, but my take here. 42. Get And Set Attributes: Hello guys will control a decision in this session. We're going to look into how toe get and said that tribute off steam element using JavaScript. So let's have been to the visual studio. Cool to get our hands dirty. So let's discuss about what exercises we're going to perform in this session. So this is RS table peach, and this is team Will beat contains four images that is the social like or for Facebook, instagram, Twitter and YouTube. If I will run this, then you will find out. Put like this. So see you. The output off the S table pages, something like this. So what we're going to do in this exercise in this exercise we are going toe grab all the images on We are going toe Jeanne the freeze bookie meat using JavaScript with the help of get attribute and set attributes. Let's proceed for though, Now let's go toe the Js file. And here we need to a specifying forced constant only made reference. We're going toe gravel, the made reference, and we need to tell that how we can grab it. You remember that exactly. We're going to use the credit selector all which we have already used. And we need to a specify the image class. So working middle class we're having. So we need to tell Take the very meat over here and here. You can specify that, but I will suggest that you can use the image stag. So here I have grabbed all the mystery act like this. Now let's look into the output. That means what I contributed content. So how we will do that? We need to specify all in major revenue for each and now we will create a callback function over here. We will specify in me and here we need toe iterated and we need to specify Over here console dot long And here we need to tell that I want to meet and the activity there is a method core Get attributes which attribute I want to access the source attributes. So I need to specify source over here. Save it and let's look into the output what output were getting Then you will find over here It has returned the sore softer image. So now the next tested this is are forced to step. We grab it now we want to change the Facebook emit. So how we can do that? This is the first element. So let's look into that How we can do this. So here we need to A specifying all image on the first element is the facebooking me and here I need to tell that set attributes. So this set attribute. We need to specify which attribute which we want to set source. And here we need to specify the new source. So I will tell that image and I'm having a new Facebook you made over here. So I need to specify anyway. So I fun new, not BNG No save. You know, Let's jump into the browser to see the output And this time you will find that it has replaced the image. So what was the limit? I can show you once again If I will come in this one, then we will see the applied image. So this is our earlier remit. Now I will uncover in the line which I have commented and here I will remove the comments. Save it now let's jump into the browser to see the output and then you will find that it has replaced the source image with the new source of me. Now let's proceed further. So in decision, we have seen that how we can grab the attributes. So this way you can grab any off that review for any of the element. The only thing you should make sure that you have to select the element which you want to grab the attributes so you need to specify, and then you can get the reference. And after getting the reference, you need to take the attribute with help off get attribute method and then afterwards. If you want to change something at run time, you can use the set attribute by which you can provide the which attributes you want to change. You need to specify over here, along with the values which you want to apply to that particular attributes. In our case, we have applied the new source images on this. No time is stopping over. You see in the next session, Tilden Bob, I take care 43. Get And Set Style: Hello, guys. Welcome to another station in this session. We're going to look into how toe get and said their style using JavaScript. So let's have been to the visual studio code. So you know what organization we have seen That how to get and said that you pressed email element using the away script. Now in decision, we will look into how to get answered their state or to demonstrate you the capability off this way of getting and setting their style. I'm going to use the same example which I have used earlier. In order your example, we're having indexed or esteem. And And if you run this, then you will find out what like this When this example, what I'm going to do, I'm going to grab this header one element that you one element And then I will apply their styling through the JavaScript so allergic jump into the reason the studio code. So let's start writing the code. The first word we need to do we need to specify constant const Head one equals document, door ready selector as it will grab the first element. We're having only a single edge. One element of audio So we need to specify each one on then forced what? We will look into that. What is their style applied over there? So we can do that? We need toe tell that console thought Law had one daughter's time say Well, let's look into the output reported contents. So let's look into the console. We need to press after well so it will open the council and you will find it over here. First, we will clear it and reload. It's and you will find it over here. It has given us all the properties off CSS, which we are using. We're designing the webpage and see you. It contains all the property. So what we will do? We will grab the color property first and then we will assigned the value to it. So let's look in today. So currently, if you will look into the color property, then you will find that there is no a style applied over here. Now the next to step, we will apply some value toe this color property. So how we can do that? So let's look into that. So we need to tell that we will take the head one object and we need to specify Estyle Door color, equal toe blue. Save it. Let's jump into the browser to see the output. And here you will find that it has applied the color blue. So let me reduce the site so you will see it over here. No press f 12. Then we will look into without nuclear reloaded. And here you will find that the color property contains blue here. Earlier it was black, but no, we have a plan. The color blue that the reason this property contents blue No, let's proceed for the same way we can apply the foreign sites. We need to tell that head Want a style dot won't Saiz And then you need to specify the size . I'm going to a specified 70 pixel. Save it. Let's look into the then you will find that it has also applied. The wrong size is 70 pixels. Let's verify it. If you will click over here, click on inspect, then you will see it over your 70 pixels. That's very plain console log as well. So here you we will find that the foreign sides we will get over here on the phone side that 70 vixen. It has a flying. So let's proceed for the so no. We have seen that how we can get and said the style using JavaScript, the one little rule you should remember well, playing with any of their dorm note. First, we need to grab the reference off the north, and then we can do anything what they will be want to do. In this case, we are applying the style by grabbing the reference off the Dom node. So on this note, time is stopping over here. See in the next session till then, buh bye. Take care. 44. Add And Remove Class: Hello, guys. Welcome to another station in this session. We're going to look into how to add and remove classes using JavaScript. So let's jump into the visual studio code. So for decision, the kind of set of we're having, which is something like this, we are having an estimable file, which is same as what we are using earlier. Along with that, we're having a style Dorsey asses and it contains one of the season's element called a place time and which is being applied to the header one. And now what we will do. Forced to step, we will grab the head of one element and we will look in tow water. The class is being applied to that particular header element. So how we can do that as is well, we will be using cost on Dhere. We need to respect. If I had one equal toe document dot very selector and we will specify the court other element actual and then we will console dot law and we will tell that heard one on the property which we're going to use is the class list. So class list will return us all the classes, which is applied to that particular S T mobile element. So let's look into that. What are the classes is being applied toe. This hatch wants a large jump into the browser to see. They'll put no press after well over here. And then you will find that it has written Tom Token list. And it contains the applied style as it contains only the single A style that the reason it has little the length one. So know what we will do. We will introduce another class and that we will apply at the runtime using JavaScript. So let's add it. So I'm going to add a classic or green box on that green box contained padding off 10 pixel . Along with that, it contains color green, and the border is going to be one pixel, and that is off type dust, and that is off green. Save it. So this is the new class we have introduced and what I'm going to go. I'm going to apply this at the runtime, So let's do it. How we can do it. We need to tell, had one dot We need to tell that classless Tau taught at and then we need to specify the green box, the class name which we have created and save it. No, let's jump into the browser to see the output, and you will see it over here. It has applied the style using class. If you look into the output in console, then it will look something like this after will. And here you will find that it has returned us to classes. One is the appliance style. Another one is the green box, and here it returns to classes. Apply a stale and the green box that the reason it is returning to, and it also returned the position at work position. The style is being applied with the help of classes. At the first position, the classes apply it still, and at the second position, the classes green box. Now let's proceed for the no. We will look into how to remove the classes at runtime, so to do that, we need to tell, Had one dark glass list don't remove and then we need to specify Over here I want to remove . Apply a style, save it. Let's jump into the browser to see the output so visually, there is not much change. But if you will look into that, then you will find there is no 40 pixel is being applied over here. See you. It is not being applied. If you go to the console, then you will find it over here. It has applied only one class that is off court. Green box. So this way you can remove the glasses are turned time. Now let's proceed for though. So this way you can easily add and remove the ceases classes at the wrong time. So on this note, time stopping over. You're seeing an accession, Tilden, but I take it. 45. Node Relationship: Hello guys. Welcome to another session in this session. We're going to look in tow, no relationships or let's jump into the diagram to understand this concept. So so far we have done this. Turned that how to grab the reference off the STM ill element within the Dominator key. So in this aspect, we have seen that how to use query selector, very selector all get element by i d get element Wake last name get element by tag and that will help us to do the basic manipulation like change in the style as well as change in the classes who know we will discuss about what, actually the North relationship within their dorm elements of host understand that what actually the North Reznor Pre is the visual representation off the dorm elements which organized as an hierarchy. So if you closely look into that, then you will find that it contains various elements like her body title Actual and P. Div. There are many elements and that actually makes the STM ill peach. When this notary let's understand what actually those sibling, it's so the element which exists at the same level that is a sibling so That means the relationship between this other one that's one element with this be element is sibling relationships. Wherever the element existed the same level, then it is represented as sibling in this case, this etch one p and there is the sibling off each other at the below level this B H one and Davis sibling off each other. So this relationship is called sibling relationship. No, there is another type of relationship that is parent child relationship. Over here, the development is the parent, for he had a one and this develop. These three element exists at another level and which is being associated with this dude has immediate parent and this relationship risk or parent child relationship with these two kind of religions have to exist, and we will use this relationship, travels the dog, and that will help us to do the bigger selection in the dome. So let's jump into the Visual Studio Court to understand this with an example. So we're into the visual studio code and the kind of example we're going tohave. There is a little variation in the clear example. So I have introduced an article tag over here, which is apparent tango these elements and these element is having relationship a teacher that has a sibling relationship. What article is the parent relationship for all these elements? Know what we will do? We will grab all these elements and apply the class dynamically. So how we can do that was we will remove this one and then we can travels all the north and then we can apply the thesis class to it on the class, which I'm going to apply over here is this style. Dorsey says File is having dark green box toe this class I'm going toe apply by traversing each of the north inside the article tax. Who Let's do it. So how we can do this. So what we need to do we need to define a variable. And here we need to define article equal toe document, door credit selector and here We need to specify in the article this article I want to grab and I want travels each of the Children off this article notes. So how we can do that and we need to access the Children property. Let's look into that Our door Children, we will first console, log it so that we will see that what it has. Save it. Let's jump into the browser to see the output and then you will find it over here. It has grabbed all the element which exist within the article. Elemental. Let's proceed for the one thing you notice over here is that this is an estimate collection and this temple collection doesn't support for each method. So how we can iterate all the element and apply the class to took it the support of forage method We need to convert the sustainable collection to area object. So let's do it. No. So what we need to do we need to specify over here at a daughter. Um And then we need to specify from where you want toe create that A. I want to create it from our door and here, and we need to specify Children, save it and console log it so that we can very find that whether it is creating the area, object or not. Let's look into that consoled or law. Close it, save it. Let's look into the output. Then you will find it over here. It has returned our element. No, what we will do, we will. I tear eight it using forage. So let's do it. So grab this one and on top of it, we will applying over here dot for each and within that we will pass the arrow function and here we will tell that each north and within that we need to a specify what we want to do. So we want to grab each note than we will click on each node dot class list. And here we need to expect if I add method and within that we will pass the class name and the class we are having green box say witness looking toe the output water. But we get no, you will see it over here It has applied the green box class to each of the child element off article element. So now let's proceed for though, So this is one of the way by which you can get the information about the Children element to know we were looking toe how to grab the information about the parent element and then apply the class to the parent element. So let's do it. So first we will come in this out. Let's commented and know what we will do. We will instead of particle. We will grab the That's one tag and he'll we will tell that each one and then return. We will tell that had one and we will specify Over here had one door peering Telemann. And within that we need to a specify not class list on or add. And here we need to specify the class and our classes. Green box. So let's look into the output. What out? What we will get and see you. This time it has applied the class. So the parent element off as to that is an article element and article element. Now have the class called Green Box Let's inspect And here you will see that last equal to green walks on this We're applying through the court. So let's proceed further. No, what I want I want to apply the green walks class toe the sibling off this actual intact. So that is next sibling. So that means here I want to apply this. Pitak should have a class called Green box. So let's do it. So we will do some changes over here. Let's come into toe. Copy this one. And here we will tell that next element. Sibling, save it on. Remaining thing is going to be the same and we're going to apply this green box class will , Don't be tank. This is because next sibling in detail. So let's jump into the output and CEO. It has applied the green box clout with the next sibling off each one tank. That is the speed magnets inspected and you will see you. It has applied this class green box dynamically at the wrong time. So let's proceed for the same way. We're having something called previous elements sibling. So let's use it. But one thing I wanted to show it over here. We don't have any previous element off this H one tank. What we will do, we will select this one and we will try toe apply the green walks class. So this head of one, the Sichuan tangs Well, let's do it. So here we will change it to Peter. Now it will select the first Pitak and its previous element is though that's one element. So here we can tell that matter and instead off actually had one better save it. Let's look into the output and you will see it over here. It has applied the green box class So the h one tank So let's look into the hotel here You will see that it has returned and CEO it has applied the class green box toe this actually element. So let's proceed for the so now we have seen that how to select Children, how to select president, how to sell it Next element sibling How to select apparent element Sibling No one Last thing I wanted to tell you so you can use the changing things So chaining is the process by which you can select one after another. For example, if I want to select this p element and then we will specify that the Children the parent off this Pitak So we will tell that parent element And if we want to know that which is the parent element off this be this parent be element And if you want to know about the parent element off Parador parent element and we need to specify you again apparent elements So let's look into the output water put it will return So we need to tell that console not log here. It will return us the parent off this p element. So let's look into that water taste. And it returned the body. So this is the body element. It returns as it is apparent off article and article is the parent off the paragraph element, which we are refering now. So here, if you will look into that we have selected the first p element. This is a step by step on the pavement off this oneness. The article and article parent is the body. So that the reason it has returned like this and how we have grabbed it. So we have grabbed it through chaining on this escort changing. So this is what I wanted to demonstrate in this session. So in the next session till then, Bob, I take care. 46. Events: Hello, guys. Welcome to another station in this station. We're going to look into events. So let's jump into the visual studio code to understand this concept. So in our earlier station, we have seen that how to select the elements within the dorm using credit, selector and various mechanism. Along with that, we have also seen that how to apply a styles dynamically using the JavaScript code. So know what I feel that it is right time to introduce the concept off event. So the concept of event is mainly related to the actions. So in a more lemon tome, I can say that if any user visiting a webpage So, for example, if you're visiting Google site and there you are writing some search query and then you were pressing the in tow. So that is your action, which you are performing on the webpage off Google. Once Google will take your query and then it will return the response according to your request. So entering the search query toe the textbook is one event. Once you entered a and pressing the enter key is one off the event as well s after entering the search query taking the search glass icon is one event. So whatever the moored off, even or user take certain actions performed with that event. So in this session we're going toe looking toe klik event. We will understand that how to handle the click event whenever a button is being click to how we can capture that event and performed the required task. So to understand the concept of events, I'm going to use the falling set up. So we are having an indexed or text email. Along with that. We are also having a style Lord CSS. Where we are having our ally Element is tiled with Maxwell Fighting margin bag, Northern Border on for even handling. We are going to write the event in this Js file, which is being attacked with Index North esteem. And so, overall, our our stable document looked like this where we have pre Ally Element and we are having a button whenever I will click a button or one new waiter will be added on this list. We're calling it as a fruit Balto, where this functionality it required three strips. So step one, we need to grab the reference off the element where the event will have pencil. In this scenario, this Ardmore Burton is that element. So the Steptoe is at the event listener toe the element on even listener Actively Listen, the user events on the specific element on the step three years we need to rate a callback function that will refire whenever they even got triggered. So in this example, whenever users click on the button, that callback function gets fired. So let's write all these steps into the code. So let's jump into the visual studio Court. So the step one is right. Const. Grab the button with the help of document don't query selector And the thing which we want to grab is the button. So we need to specify button over here. Save it. No, the Steptoe is aren't they went listener which keep on listening the event which has been triggered by user how we can do that. We need to tell button dot add event listener. So there are a lot off event available. I will give you the reference off that for this example we are going to use the click event . So we need to specify the click over here. So this will actively listen the click event on this bottle and they're the second argument that is the callback function, which we need to specify. So whenever this event is get triggered, so this function gets executed and it will perform the respective task. So let's add the callback function in the form of pharaoh function. So we need to specify your when you so we can console log. Something's who here We can tell that a new fruit which is being added to the console, not toe the US you we will handle later. So for this now, so you can add beach over here. Let's look into that whether it is adding the Pete into the console, So let's jump into the browser. So no, here you need to click on actual so it will open the console, and now we need to click on this button. Add more. Then we will find that it has added the peach into the console. So that means this button is triggering the event and it is being listened by event listener and then the callback function is being triggered. So no, let's proceed for the so no, let's make us some meaningful program over here. So what we will do? We will add a text box over here and where we can enter the fruit name. And once we click on, add more button, then it will be appended to this particular list. So let's do it. So first we need to go inside the index door test email, and over here we will add a textbook. So how we can add the textbooks we need to add a input field, which is off type text. And here we need to specify the I D and ideas going. Toby, we will tell it I d will to text fruit. Save it. No, we have added the textbooks. Let's look into that, too. Here you will point that we have added their textbooks. No, let's proceed for the So let's right the callback function. Let's update it. So how we're going to do that? So what we need we need to first grab the dual element. So how we can do that? We need to specify you will, and we need to grab their document dot very selector as we are having a single ul element so we can grab with the you will tackle. It will give us the reference off the U. S. Tank. After that, we need to grab the reference off their textbooks. So how we can do it? We need to specify context. New fruit and over hell. We need toe Tell that document don't get element by i d. We need toe gravity, The get element by i d as we have a specified over here. If you look into that, we haven't specified text fruit. Take this one. Come over here and here. We need to specify the reference off it so that we can grab the value off this textbooks. And then we will happen toe the l a element. So no, we need to create the STM ill element for a lie. So how we can do that? We need to specify an object for l. A. And here we need to create with the help of document don't create element. There is a method called create element and where we need to a specified wort element we want to create within the dome. So we want a lay element Toby created, and we need to set their tribute quarter to build. We want to set, We need to tell Set a tribute and what I attribute the i d We need to create an idea for that. And for that we need to a specify the value. So what really we want? We're specify you over here We will tell that text new fruit daughter value. And after that what we need to do We need toe happen this to l A elements. So let's do that alli dot happened child we need to take the open chain and within that we need to create the text north. So for that we need to write document dart, create next lord And then we need to specify the value What really we want? We want that text new fruit here we have made the spelling mistake new fruit dot value And after that once we have done with this, we need toe Add this l a element Buddha you will as a lie. It's exist within the U. S. So we need to specify you will don't happen, child. And within that we need toe pause This ally element. So that's it. So no, we will goto the browser and see the output along with the action to normal. Specify over here, banana, and then we need to click on this button. It should be added over here. So let's do it and then you will find that it is being upended. Toe this list. So this way you can easily handle the event. So let's proceed further. So prior to wrapping up the session, I wanted toe let you know about what are the things which we have learned in this. So we have seen that how to grab the reference off the target element where we want to apply the event. Once we grab the reference, then we have to add the event listener so that it will listen toe this click event and was the event is being executed. So this callback function gets executed. And within that what we have done, we have taken the reference off the U element. And after that, we have also inserted input field over here. So and we have provided the idea as well. And then we have taken the value of that input field. And after that we have created an element on the fly in the run time called L A element. Another new court which we have seen over here, is the apparent child. With the help of this, we are a pending lord. And after that a pendulum l attack within you will tax. So this is what I wanted to demonstrate your indecision. So on this note time stopping over here, seeing the next session till then. But why take here? 47. Project PopUp: Hello, guys. Welcome to another station. In this session. We are going to do a project. So so far we have learned so many things in our courts. And now we are in a position to design something meaningful. So in this session, we are going to build a project where we can design the proper functionality with the help of learning, which we have done so far. So let's jump into the visual studio code for writing the court for this project. So I'm into the visual studio code and we're having nothing over here, so let's create it. So first, we will create a file card index dot is Timon. And here we will generate the estimate five court. So how we can generate it. We will use the snippet we need toe will that as table five minutes. I like this one so it will generate this body. So now what we need to do we need to specify the link. We are going to also create a style, Dorsey says, Fine. So how we can use that? We need to specify link, and here we need to specify is tiled or CSS, which we are going to generate. And there is a script file we're going to keep. That is called SRC Over here. We need to specify the source and here we will tell that script dot Yes, so, no, we need to create this to file in this. So let's do it Style. Dorsey s is here. We will appoint the CSS, and then we will also have a script or Jace. So now what we will do. We will raid, though it's team l courts who Let's do it. So currently we're not having anything over here, so it is blank. So let's look into that. So run it first and you will find it over here. There is nothing in this were paid. So what we will do, we will create a But that will be a pop up. So let's start writing the court. So let's first create a button called Pop Me Up. So this is our button. And then we need to specify the rapper on the rapper, which we're going. This is a rapper class we need to create, so we need to tell their David rapper on within that we need to specify another class that is called Pop Up. So this is going to be inside it and after that we need a close button as well. So how we can do that? We need to create another different which contain a class called clothes. And here we need to specify the Crossman. And then afterwards we will have ah as to tag which will contain the information like fruit offer. This is a part off the football, so I'm keeping it as a fruit office, so and afterwards, who it will give the information about what offers we are having. So we're having 30% off in all fruits. Then afterwards, we will also have the link to check the offer. So there is an anchor tag which is being required over here. So we need that is going to be some paid for a timing. I'm keeping it in the same reference into the pit, and we can tell that. Check it now, save it. So let's look into the page how it will look like now. So this is the age which we have created, and it doesn't look like any proper So know what we will do. We will use the CSS to define some of the classes, which will give us some styles that will convert this information toe the top of page. So whenever you will click on this button so that button will open this pop up. When you click on this cross button, it will close it. So let's right the CSS now. So we'll tow the style Lord CSS and then I start writing the CSS White. One thing I would like to tell you we're here that if you haven't completed the CSS scores , you can go and watch the CSS scores off. My that is goes to off Web development cities. So no, let's start rating the court. So first we will rate it for but that we are having a button we will write the ceases for. But so display I want is blocked display. So I will tell that it should be a block. And then I will tell that the margin off this button should be 20 picks and and remaining thinking or 10 background. I warned. That should be blue. Tell that it should be blue. I don't know profit. The text off the weapon should be quite so I need to tell the color why I don't want any border. So I need to mention zero. I were riding off six pixel and as well as 10 picks who the six pixels for top and the bottom and 10 pixels for the left and the right. Now proceed for the So we have returned us. Yes, us for our buttons. So let's look into the browser how the button look like now, and you will find that this is the button which we have now opera applying. The CIA says no. Let's proceed further. No, let's look into the esteem ill. So if you look into this team, we're having a rapper class. So this rapper class contains the pop up. So no, we will raid The CS is for this rapper class, so let's do it. So how we can do that? We need to tell that the rapper and within that we need toe provide the opacity with help off bag grow, and we need to tell there is a method RGB year, and within that, we need to provide the opacity, so we need to tell that 0.5 it should be either one or zero in between that whatever the value you want to keep. So I'm going to keep it zero point frame, save it. Let's look into the changes what it brings. So it brings the falling changes. So whenever the pop off will open so you will point that open will open on top of the beach . So such effect you can bring with this. So let's proceed further. No, we need to specify the position should be fixed. And then we need to tell that top is going to be zero left is also there. Over it. I want 100. Wasn't wait. I should tell that 100% height. Also, I want 100% so that it will cover all the PD 100% every No, Let's look into that. Now you will see Over here it has covered all the pages. Now let's proceed further. No work next. So no, If you look in tow the estimate, then you will find that there is other class that is a popular so how we can provide the proper behavior, how the proper behavior will look like so that whenever the prop a pillow pants or what is the window size so we need to rate or CSS, which look like or dialogue is being opened. So let's write it. So we need to tell that poor book and then we need to specify four family and I want to use Sand Saref. And afterwards I need to tell that the text alignment should be sent, although that it would look nice than we need to tell that the rich should be 100% should be 100% and then the maximum rate. It should be 300 pixels so that it would look like a pop up 300 pixels and the margin I want in person, auto and afterwards the padding should be similar for all top bottom left and right that is going to be 20 pixel background by war. It should be white and position I want it should be relative off this trapper, this rapper class. So let's proceed for those. Oh no, Let's look into the output. How it looked like favorite first, no jumper to the browser. No, you will find that it looked like dialogue box which is being popped out. Now what we need toe hand along. We need to handle this cross likened. It should come over here, so let's do it. You know, if we will look over here, we have also RDI which contained this X mark, and that is off course close. So we need to create the ceases for this close. So how we will do that? Let's write it. If you're having difficulty off understanding this, I would suggest that you should go through my CSS classes. There is a course on CSS. You can refer that. So no, let's straight it. We want a position should be absolute. So position should be absolute and it should be top. I want it should be five pixels and it should be right on that days off pixels. And I warned that when it card, sir will go there, it will change two pointers. So I need to tell Point. Save it. Let's look into the output, how it will look like no effect. So regard this now. If we're placing the cursor over here, then it changed the course. So let's proceed further so it looks very barred. What we will do, we will change this anchor and so that it will look like a button. So let's right ceases for this also. So no way want our anchor tag within the pop up Should be look like a working. So how we can do that? We need to select the proper class. And within that, the anchor and I want to tell that I ground should be blue so that it will similar toe the button Colletto, whatever we're having and the color off the text within that is why. And text decoration. I want to remove the underlying so that it would look like button I won't takes Decoration should be none. So it should be none and size. We will keep the same as we are having the same for the warden. Practice six pixel in 10 pixels. So I will keep it for open bottom six pixel left and right. Should be 10 pixels. Expects a low over here. 10 pixels. Save it. No, let's look into without foot. No, you will see it over you. We have decorated like this. No, we have done with the styling. No. We will add the functionality with the help of JavaScript so that whenever I will flick on this supper button, it should be displayed. What currently it looked like the pop up is being coping. What I can do so that I will not see this. They've actually. So let's do it. So to achieve this thing we need to produce so property within the rapper class that is called display and display. I want not save it. Let's look into the output What are what we get And no, you will point that there is nothing. But if you click over here, you will not get anything. So for that we need to write the JavaScript. So let's do it. So now we need toe goto the script or Js file and we will first target the bottle. So how we can do that? We need to tell caused but on equal to how we will select If you remember document door, very selector and what we want to select We want to select the bottle. There is a single button ever level so we can easily take this $100 The first reference As you know, save it Now we have grabbed you know, if we will know the second step we need toe adds the event listener as we have discussed in our earlier session. So let's do it. But dot ad event listener and what even we want to capture We want to capture Click Given And here we need to a specifying a callback function. So whenever it is being flicked so this action should be performed. So I want what I want. The public should be enabled how it Praveen able by assigning the value off this play property toe the block. Currently, it is not. We need to return to the block. So how we can do that? We need to specify the rapper class over here. So how we can do that First, we need to appoint the rapper class over here so we will tell that rapper I want to bring it back after clicking on this button forced. I need to tell that query selected document or query selector. War thing I want to select. I want to select the rapper. You go here and you will find that we have this wrapped, but this is currently displayed on we have told over here display not know we're bringing it back with the help of javascript. First were getting the reference of that rapper class. Now we guard the referent. Know what we need to do. We need to assign the display property through Joyce. Let's do it. Rapper dot style Taurus Play Equal to Block were prior to that Here, we're doing a mistake. You need to specify their daughter warrior than it will select the class. Save it. Now let's jump into the browser. No, just click on this button. Then you will find that the pop up will come. But the functionality which were missing over here is if we click over here, that thing will happen and it is not closing. And we also warned that if we click outside off this dialogue, it should close. So this to think we need to add. So let's do it. So first we will add the clothes functionality. If you go over here, then you will find that there is accent. There is on this day, we have a close class, so we need to grab the reference off this element, and then we will apply the even listening over here, and then we will trigger the function. So let's do it. So let's go toe the scripture, Jess. And over here we need to grab the reference of the close class right const Close Equal toe document door, very selector, and we need to specify the reference off the clothes class regard the reference now Now we will add day event listener. So what we need to tell closed ought add event listener and we want to add click. Even then, we need to specify a callback function. What will happen when anybody will click? So I want this thing to happen and we need to tell that a rapper should go away. So I need to tell that the rapper display property we none save it on. Let's jump into the browser to see the output. And here, if you click over here than it will give us this dialogue, this popular click on this cross, I can't it went away. No, the next functionality we want to add now the next functionality I want to add whenever I click over here and I will click outside, then it will go away. So how we can do that? Let's do it. So if you closely look into the behavior, then you will find that if you're clicking on the rapper class, then it is closing. So that means we need to assign their display off upper class toe done so that it will go away. So let's do it. What we need to tell that I want to add an event on rappers so and even listener and what he went, I want to add. I want to add clip on what functionality I want to add over here when what? Anybody will click so it should go away. So how it should go away, It should go away by assigning the display property to Not again. I will tell that that style, so display not save it. Let's jump into the browser to see that. But now click on this button, it is dead. If we will click outside, it will go again. Click on it. Click on this. It will go of it. So this way you can easily design the top of our dialogue box. Whatever you will say, let's proceed further. So I hope you enjoyed decision. And in this session we have almost covered most of the things which we have learned so far , and that is pretty much required so that you can use your learning to design something meaningful. If you're not available, CIA says, then I would recommend that you should go through My lawn sees history from muskrat scores where I have covered the CSS tree in detail. So if you go to the skills here, then you will find that I have a course on this. That is a course to don't ceases from scratch. And I have also the course for known as table five from a scratch. This is the course one, this is the course to. And this morning, Joe, a script is the third course in this series. So on this note time stopping over, you see in the next session building while I take your 48. Forms: Hello, guys. Welcome to another station in decision. We're going to look into how to create an interactive form that user can use to provide the information on the where to hear. You must be asking that what? Actually the estimable form is so in a simple tome, I can see that a terrible form of the document which is too thin for making off the user or no reputable using interactive control. And we can design their stable for with the use off various elements off STM. Also, in this example, we're going to create an HTML form that is for simple registration process and this restriction from contains the user name and the email i D. Once the user provided the information, he clicks on the submit button and that is being submitted in this example. We're going toe print the submitted information on the console. So let's jump into the Visual Studio Court to see all this thing in action. So we're into the visual studio code and if you look into that, then you will find over here there is nothing there, so we need to create three things. The first thing we want to create index dot html We comptel text Don't estimate afterwards . We need to have specifying style or ceases. We will provide some style Buddha ist MLP. This is going to be about four. And along with that, we will also create with our script file called a script dot Js find. So let's generate steam along. I'm going to gender. They're stable five court So how we will do that? We need to a specified a snippet estimable fight with this village in rate the boilerplate court Not we associate the CSS and the script file what we need to do. We need to it specifying Over here Link And here we need to specify a stein dot CSS and to associate Dodge always kept for it. We need to specify over he'll script SRC script guard chase. So no, would the finally is incorporated in tow. This a stable document. So let's create the registration form. So first we need to write form tag And over here we need to specify the field which we want to keep into the form. So I'm going to keep input that is off type user name. This is going to be a text input. And over here we need to specify the idea. We will tell that this is going toe with the user name, user name and then we need to a specified place older so that it will look like it is what user name. So we will tell that placeholder will toe user name once it is being done. One for email. Ladies, let's write it. Let's call it so that it would be better. And then we need to A specifying Over here you maybe make it a small aqueous. And after that we need to specify the input name. That is a submit button. So we need to tell that input on this time. I want to submit weapon and the value. Which one you want to keep? It is the submit to Lex, right? It's of no, we have created the form. Save it. Now let's look into that how it looked like so our form look like this. So to make it little beautiful, what we will do, we will rate some CSS who Let's write it. No, let's go toe the CSS file. And over here we will specify in that I want home should be off maximum bridge, the 300 pixels and margin. I want to keep it for open bottom 40 pixels, and for left and right. It should be auto bhangra, and I want to keep white and planting off, then fixer for top and bottom as well as the left and right filing off and picks a. Now let's do some for mating for input will. I want imported coming of length. So let's make it block Knows why, what this place would be blocked or that it will look like a stacked large. And I want to keep 10 pixels for open bottom and auto for left and right banding. I want to keep full pixel except place on background color off the entire party. Who we can tell that body background color who be this look good. So, you know, let's look into the stable form how it looked like, So let's save it or jump into the browser so no or form will look something like this after applying CSS. So no nerd sides of functionality toe this form. So whenever I click all some Midwestern after filling out this form, then it will be printing toe the console, but practice that. I wanted to show you one thing over here if you arrange something over here. And if we're clicking on this summit is taking me some other places, which I don't want. So this is the default behavior, and I want to stop this people behavior post. Then I want to reply my own logic. So how we can do that? Let's look into that. For the 1st 2 step, we need to define a class for this form. So I'm going to tell that class and over here we will tell that registration iPhone form. So this is our class name? No. We will grab this class and then we will apply the JavaScript. So how we will do that? Let's look into the first. We will tell that as is well caused and we will tell that form, and I want to grab a registration form class. So how we can do that? We need to tell document door query selector And over here, we need to specify that class. Take the copy off it based it. Over here. Save it. No. We have grabbed the reference off the registration. For now, the next test of what we need to do. We need to add, though he went listener to alerts and it Waldo and you weren't listening. And we need to handle the submit even and what we want. We want to prevent their default. The states The one thing I wanted to let you know that whenever you before, many action generate an object that is called event object and we need two months that he went object how we can pass it. We need to specify E as a perimeter. So no, we're passing this even as a perimeter. So this contains a method called Prevent Before Be Were. So let's use it. He don't prevent before and once you will do it. So let's look into that what will happen? So let's have been to the browser, But prior to that, you should make sure that you are using dot over here, So save it. Now let's jump into the browser to see the foot. So no, if you click over here and if we will submit it and it is not taking it to the other location, and that means it is not behaving with the default behavior So no, let's proceed for, though, and what we will do. We will grab the information which is being interred over here, and we will present it into the console. So let's do it. So what we need to do we need to A specifying the reference which we have grabbed for and within that we need to grab the user name the idea. This is the I. D. We should grab it and we want the value within that. So there is a property core value and we will grab it. And what we will do, we will console, log it so lost they would make another copy off it. And this time we will print over here he made. So now let's look into the how it comes. So let's provide our input over here. For example, if I'm going toe right, David and over hell, I can tell David at x y z dot com and submit. Once we submit it, let's look in tow. What, actually printing toe the console? So how we can check it, we need to press F Well, then you will find that it had rented it in to consult same way If you want to change it over here, for example, if we want to change it to Joe, let's do it. And over here we can tell that John Submit and you will find that it is displaying into the council provided information which we have provided in tow this fall. We can handle this in a different way. For example, if we want to submitting Tinto the database that we will covered later but for time being just time, printing it into the console. So let's jump into the visual studio courts of Prior to wrapping of the station. I wanted to wait to read that what we have, don't we have created an STM will find which contains a form and which contains two different input. Element one is for user name and another one is for email. Along with that, we are having a input water that is for submit and then we have handled this to make our form look beautiful. We have also created the style Dorsey asses, and after that we have created the script or Jess within that First, we have removed the before behavior off the former. Using this Priven default method off even and afterwards we are taking the reference off the user name and the email, which is being provided by the user. And we're printing it in tow. The council. So I hope you have enjoyed decisions that this is what I wanted to demonstrate. So on this note, time is stopping over here. See in the next session. Tilden Bob, I take care. 49. Filter Method: hello Guys will come to another session in decision. We're going to talk about any filter method. So let's jump into the visual studio. Cool toe. Understand filter method. As the name suggests. That filter method is the method which we actually use to filter Ordo Ari as brothers or 10 criteria. So to understand it better, let's work with an example and see the usage or filter method ghost. Let's understand that. What's that if we're having for this example, if you go into the index daughters Jamel, we are having the set up, and if you look into doubt, but you will get this output. So let's look into that. So currently the set of we're having is something like this. This value is coming from static text that I want to generally asper the Istok availability to. In this example, I'm going toe have a fruit ball airy, which is an object which contains two properties. One is the name, and another property is the in the stock name. Property holds the name of the fruit and instruct properties the bullion value that represents that whether the fruit is every level within this talk or not. If the value is true that value is being displayed over here. And if it is false, then you will not get that fruit within this list. So let's design it. So the first step, I'm going to delete this ecstatic value. Save it. No, let's look into the roser. Then you will find that it is gone now. No, let's go toe the Joy Script file and write the court for dynamic list as border stock availability. So, no, let's go to the JavaScript file. And here first we will define the fruit ball objects. How were we will define right, Const. And we will tell that fruit ball and this is going to re and Barry off object and where you need to respect if I name, I'm going to keep the chapel and there is another product is in stock and this is going to be true falls William Value. And now we need to clear the replica of the same copy. Paste it so that we will save the time. So four fruit we will keep. We will tell that orange and then we will tell that grapes on this one. We will tell that peach and this value, I will make it false. So now I want toe keep those fruit which is in a stock into the list. And I don't want to display the route which is not in the stock into the list. So how we can do that? So first, we will grab the U element. If you remember that homey and grabbing it this time I'm going to use this class to grab the reference off the U element. So let's do it. So we need to tell that Const you will document dot very selective Lord ready selector And here we need to express If I thought you l at Wal. This is our class. Take the copy, Paste it. No, we get the difference. If you will take the next step, we need to generate their dynamic ally. First, we will create an empty very well let ally equal toe. This is the empty won't know. We will take the fruit ball, Larry, and this contains a freighter method. We will use that filter matter and here it will accept the arrow function and where we need to pass the roof, eat individual fruits from the football. So we will pass the perimeter over here. We need to a specifying the fruit object. No, we will check the criteria whether in the stock value is true or false. So we need to tell that the fruit or install. And then we will tell that if it is true, then we will design this ally plus equal toe template history. And within that we will design the attack a light act. And here we need to express If I onda within that, we need to specify their dynamic value dollar And here the value we will bring it over. Here is the fruit brought name. Save it. No estimate will be created for L. A. No. I want to assign this ally to the U. N, which we have grabbed the reference of how we will do that. We were tell you Well, don't in arrest Yemen, If you remember that I have discussed about this in the realization. And here we need a specifically plus equal toe so that it will happen and we will tell l a . Save it now you will see that these three value will be printed on this. Well, we will not print so Let's look into the output in the browser and CEO. It has printed the three value No, I will change the one off the value. No, I will remove Apple two faults. Now let's looking toe that No, you will find that apple is nor displaying. So no, let's proceed for though no, make it all value True. Apple is also in the stock and beaches also instruct. Save it. Let's jump into the Roeser to see the airport. Then you will find that it is displaying all the value. No, let's proceed for the So you can understand that how filter helps us to design such logic very easily on this. No time stopping over here seeing the next s Until then, Bob, I take care. 50. Map Method: Hello, guys. Well, component decision in decision. We're going to look in tow area Map matter. So let's have been to the visual studio code to understand this concept. So what exactly the Adam map MK thirties? So Adam Map Methods is one of the method within the area object that creates a new ERI with the result off calling function for every area element. So within the map, matter reports the function which we want to apply on the individual area element. And once it is being done, then it will return us the new eri with the updated value after applying the operations. So let's look into that. For example, if I am having all variable called my Airy, which contains Norton Element like 20 40 60 8100 and what I want, I want toe the weight each of the individual element by two and want to generate a new Eri . So how we will do that? I will create a new variable cornu, my area which is altogether different daddy and which is being generated after the plank door operations. So I will grab the area and use the map method and passed the function which will the wait wait, toe. And here I will grab each of the individual element off binary bypassing as a perimeter. Now, to find the body, you can pass anything over here not like numb. You can rate. And also so you will write like little and by two. So it will be weight each of the individual element. No console log. Different. My every first also console. Long new my Eric. Save it. Let's look into the output water What we get so you will find it over here. It has returned us to different daddy, and each of them is containing different value. This one is the reason a laddie and this is a new area where operations is being applied. Like we have a proud over here, they waited way too. You can do any kind of cooperation which you want to do, and it will return us the new Ari with the updated value. So, no, let's looking toe the real name implementation off the map method. So what I'm going to do in this example, So I'm going toe use the football example where I'm going to generate to list. The first list contains stone fruit names with the actual price. And the second list contains the fruit with their discounted price. And then I will print you to into this. We're preach, so let's design it. So first, let's delete it and do some changes within the STM ill So what changes we can do So first we will introduce her development and here and within that I'm going to create who container. Dave. So let's created there and this container they contain as to element actual price. Along with this you attack and copy. This would be a straight to video and we will tell that discolored price. And here we will tell that day you will live with the new class. Let's creator class as well over here. Close until that we can tell the route to stall appropriate. No, let's create this plus in tow the style. This time we will tell that through Pistol and I won't display should be in lane blood. They let's look into the how it is coming now. So it is coming something like this. Now, below that, the actual price list with the name will come and hear fruit with the discounted price will come. So let's do it So no large jumping toe though. Joe, escape oil. And over here I will tell that cause Fruit ball. We will create the area for object in this area for object Contains name off the fruit. Every little forced fruit is the apple. Then another properties. We will call that in the stock and this is going to be a 1,000,000,000 value. There is another property we will keep. Price will tell that ₹100 Opiate. Let's copy this one and we will print it four times a week. And no change the value or ranges. We will tell who were here. Grapes Beach. Wait So valuable. You 200 or under 300 Say we know what we will do. We will grab the individual reference off each of the you will class so that we will generate the l A for each of the individually will class and then we can associate it. So let's do it. So how we will grab the reference If you remember, we have learned about this. So we were tell that caused you will equal toe the first you will. We're going to grab with the name of the you will f ball copy and past the reference over here dot the name of the class today we can grant for another you will for discounted praise. People call it as the you will discover pretty well and here we will take the name of the class. But this is the D U left bowl Beast it. Now we have grabbed the reference off each of the individual you'll element Now, First we will bring this original place and then we will bring their discounted pray So original praise. We will print it like this room ball door for each within that what I'm going to do, I'm going toe generate l A. So for that we need to different variable ally equal toe that will hold their lay element. And there is another one discounter delay which will hold the discounted early. And we didn't that we will pass the an enormous function over here. This is our Adam function and we will specify over here grab each of the individual fruit object and within that religion really early. So how we do it, we will tell that I like less equal toe template district the L A element we need to tell them like this on the dynamic value. We will grab it dollar. And within that we need to specify fruit name through Gortney and then fruit place. So no, we have generated there lay and outside off it we will associate with you. Attack. You were dark, indirect human plus equally toe ally. So let's look into the are put water with regard. Then you will find that it has printed the fruits along with the actual price. So no, our next step will be We will grab the price and I want to apply the 50% discount on each of the individual fruit place. So let's do it. So no, the next to step what we will do, we will grab the fruit ball and we will apply the map method. And here we need toe past each of the individual fruit object and within the body off it. What? We are going toe. We will apply the discount off 50%. That fruit door price multiplied Way zero point for you and then what we need to do we need to generate, though at late tech. So how we can do it. We will tell that delay upended completed string the L A element we need to generate. Copy this one. Priest it over here and here. Replace with the ally. Save it now. Associate the disc ultra you will be. You will taught in arrestee Emel plus equal toe. Really save it. No legs looking toe the output. So no, you will see it over here. This one is printing the actual price on this one as printing the discounted place. So, this way you can use the map method where you can keep the original value in separate Terry and the process value within the separate area. So two designs a scenario. It is really, really handing. So this is what I wanted to demonstrate to indecision. Seeing the next lesson. Tilden bomb, I take it. 51. Reduce Method: Hello, guys, Welcome to another station in this session. We're going to discuss about produce method. So let's jump into the visual is too difficult to understand this concept. So in the realization, we have seen that how we can use the map method to process the individual element within and add a with different type of operations. So, no, I'm going to use the same example to understand the reduce method off area object. If you talk about the reduce method than the definition of the reduce mid thirties reduce mint that reduces the ari toe a single value. So now the question comes over here is why actually it is required. Why do we want to tone my Aryan toe individual value than toe? Understand this concept of I will explain you one scenario with my earlier example. So let's jump into the browser forced. So so far we have designed a very good application where I'm come toe, however, what is the actual place and what is their discounted praise and I'm able to displace those things. But how about customer wants to know about home with saving? I'm going total on all the approaches is if I am going toe porches, all the fruit than how much total number of saving and doing in my pocket. So if we're going to design such logic with old mechanism of JavaScript, then you need to rate so much lane off court. But if we're using the reduce method than this task is very easy because reduce method operas us the accumulator variable as a perimeter that will basically calculate the running total. So let's designed this logic this time. What I'm going to do, I'm going to introduce our total saving heading over here, and that one displaced their total amount off saving We have done after discounted price. So let's do it sotto handle this. First we need to do the changes into the index tortes team, and this time I'm going to introduce another Dave within this defendant. And here we will specify it. It and this container class or total saving. I'm going to introduce a class court total savings so that I can target this. They're saving older jump into the hallway script file, and this time what I went to do, I'm going to introduce or variable called Total were to bowl dot reduce and this contained toe perimeter. First I'm going to pass the arrow function over here, and this will continue to perimeter One is the accumulator and another one is the current value. And then afterwards I will perform the required action within the body of the function. And here I will tell that accumulator will add to the existing price and passing the object like this. And here I need to specify the Innis laser for this accumulator. So we need to specify zero over here. And prior to that, we need to also return it. So then once it is being done the entire process. So we need to return each of the individual accumulated running total. So each time it will take the price value it will add into the accumulator. At the very first instance, it will in the slated to zero and each time it will add the running total. So this way we will calculate the total. Now we need toe add this total into the element. So here I want to printed. So how we can do that? Let's do it. So for that reason, what we need to do we need toe specify something like this to get the reference off the total saving classes we need to tell that calls Total saving Equal toe document talk very selected. We need to pass the class name. So let's grab the class name over here. Take it, paste it over here, save it. No, let's go below. And now what we will do. We will a panto that which we have taken the reference. So let's do it. We need to tell that daughter saving door in arrest him and I want a printed. So plus equal toe, I will take the help of the registry. I will create as three element. And I will tell Bootle saving this tall, not implicated string. And I need to especially for you over here total. And here we need to close the estate tax. We need to specify that street saving older jump into the browser to seethe out. So it is not displaying, so there must be some married. So let's check it were there is a place of 12 and then you will find that in a dirt at human. So large have been to those a list of local. Let's verify the reference. So here we did a mistake We haven't provided. Don't save it. No, let's look into the output. And this time you will get that we are doing saving off 500 If you calculate this than it is 1000 groupers, Bill. And if we're going with the discount replaced, then it is ₹500 built that. So that means we're doing a saving off ₹400. So now I hope you understand that. Why? Actually we used the reduced function or for Adam 1/3. This is really, really handy. Whenever we want to design such logic where we want to calculate the running total Some average calculations, some called. So in that scenario, we use the reduced Matador Fary on this no time stopping over here seeing the next session . Tilden Bob, I take you 52. Find Method: Hello, guys. Welcome, turn A decision in decision. We're going to look in tow at his fine method. So let's jump into the visual studio called toe Understand wine method of firing in our previous is and we have looked into reduce method, which we used for calculating the running total. No, let's understand what actually the fine method off area. So as the name suggests, findings usedto wind the value within the array. The same, like other method find, also accept function as a perimeter and where you performed by an operation on each of the elements. So let's understand with an example, suppose that if we're having an addict, Const. My airy and here we need to specify some value. Why in 30 50 90 100. So this is my area. How I want to find the number which is greater than 50. So let's right the court. So we will tell that haunts all equal toe my yelling or wine and I want to us all the individual element as a perimeter. And here I will read the body and I will tell that return element which is greater than 50 . Save it once we have returned this. Let's console log console dot law found next will jump into the browser to seethe out. Then you will find it over here. It has returned only 90. Why is it so? This is because wine works like this whenever joins the first element which meets the criteria and it returns that element and then it to stop. So you must be asking that what is the use of such function, which is not returning all the values and it is returning the only the first occurance. So this function comes very handy While designing certain feature, let's understand it. Suppose a scenario where you want to add a feature in this application, where, whenever you want to add any new fruit than it will check that with this fruit is exist within the list or not. If it exists in list, then it will return us. The fruit is already living in tow the list. But suppose the fruit is not existing than it will add that fruit over here. So such kind of functionality. We can easily be eight with fine method, which helps us to get the information about existing item within the area. So let's design this feature into this application to what we will design. We will pass any fruit which is not exist over here. Then it will be upended. Toe this actual price list and over here, if it is existing in tow, this list, then it will give us the message that the fruit is already in tow. The list solar jump into the visual is to record operate the logic. So first we will remove all this thing. No, the first test. We need to grab the Britain reference here. We're having the button over here. This is our button. I want to grab this and I want to it as the event listener which we have already seen earlier. I'm going to utilize that system. No lady over here, how we can grab Britain information. So we need to tell that const went on equal to dock mentor, query selector. And within that I have only one Burton. So I can directly refer this. See if you know what is the next sister next to step? I have selected the Burton. I want to it as the event listener. So that on click off the Burton all this thing will happen. So let's do it first. We will tell that button Lord add even listening on which it went we need to do I want it is being done on likely given and then were thing I want to perform I need to specify all those things within an adult function. So here I need to specify that now anybody is coming to our application is writing the value taking on the bottom The first word we need to do We need to grab the reference off their textbooks so that we can retrieve the value which is being typed into the next waltz Alerts jumping toe the esteem in on the idea of the text boxes text fruit. I'm going to use this one. So here I need to a specifying const, I will create the same variable like this. And I will tell that document. Doria, tell Ament by I d and I need to pass the element idea over here. Once this is being done No, the next test. We need to also grab the reference off, though this actual place you will list so that after validating the thing, it should be added over here So let's do it. We need to tell over here. Const and I will tell that you will have equal toe one variable. I'm going to create document already selector. And this time I'm going to grab the class name because we have to. You will think I will grab the class to get the reference off. This you will make sure that you will providing dot Over here. Now the next step, you need to grab the value. Although this textbooks which is being inter so how we can grab it? We will tell that there is one variable. I'm going toe career that input fruit, equal toe text fruit and I want to grab the value. So I will tell that value No way Grabbed the input route name? No. In our programme we're having this fruit ball. So I want to check that whether the name of the fruit is exist within this area or not. So how we can do that? Let's right. We need to rate a function expression to check this. So let's do that. We will tell that Const when we will tell that get through and I want to check the fruit ball. So I need to write fruit ball point. So here I'm going to use the fine method. And within that I will fall. Pass each of the individual element as a perimeter and within that I need to return the name off the fruit root door name If it is matching with the input fruit with user has written, both are matching, so it will return that element. Let's console log it. No, save it. Let's jump into the browser. So no, we need to rate it over here grips. And after that I will click on add more so it should be printed over here. It should return us the found item. Click on it. So you will see it. You It hasn't done that object which contains the name, grapes and all other information All other properties. So it is finding it. But when you provide any rally which is no, they're like banana. Then it will return us on the point. So know what we will do. We will define No, we will create a function and we will validate this information and return us true or false . So let's create that function now. We will create another function explosion and we will tell that const ease through exist. If it did exist, it should return us proof or false. So I'm goingto be clear An Arab function over here and within that I will check that you get fruit, equal toe, earn defined then return me through return brew and different is not. And if it is existing than it will return me falls. So no what? I will go. I will use this function and I will design the larger which will upend the l A element as but this condition. So let's do it or I'm going toe check the CVS fruit exists And within that I'm going toe if it exist, then alert me a large fruit dollar and the value we're going tohave over here. Input fruit Gravitt input Truth is already in less. Save it. L we will create the ally tax or how we will do that. Let's look into that so toe create any element which we have already seen, that I'm going toe clear A variable ally equal to document door. There is a method called create element and within that I'm going toe tell that I want to create a lie element and I want to say that tribute set at revealed I d i d. And I'm going to keep the value and the value. I'm going to keep the values input, fruit, comma, input fruit over here and now I will happen the text. So how we can happen? The text I will tell that l a door happen, child And here within that I need to a specified document or create text nor and within that I will again past the value we have given in to the text box. So that is our in Peru afterwards, Once it is being done, I will upend the allay toe. You will tag. So how we will do that you will not a print child alike. I have returned it. So let's jump into the browser to see the airport. So here close this one. So let's check for peach first rate beach Add more So it is not doing anything. I believe some weather we're having plus after wealth and we will find that it is telling that get fruit is nor different. Let's look into that. So here we have done a mistake CEO. We have created our very will. Get through. This effort is a small and this one. I have kept a camel casings who Let's change it. And along with that, we have also done some mistake over here. If I'm going with this condition, then it should be no t quit one D point and then it will do the required expected thing. So let's jump into the browser now. Close this one. The fresh air was checked that the item, which is existing like beach, had more toe peaches already in less totally with banana banana had who it is adding. So this way we can easily design such features. So no, we have seen that how we can utilize the fine method orphan Ari And we have designed a very nice, useful feature for an application. So, no, you can understand that way to use the fine method often at the object. So on this note time stopping over, you're seeing the next session till then, buh bye. Take care 53. Sort Method: hello grades. Welcome to another station in this section. We're going to talk about Addis Sort method. So let's jump into. The visual is to record pull the straight or metal over the object. We know radicalization. We have looked into the fine method and with the help of fine method, we have built a feature, so know what we will do. We will use the sort method that will short the list item, so let's jump into the browser. So this is our current application, and the thing which I want to do in decision is I want to add a functionality called shorting what it will do whenever you click this button. The short button. It will arrange the list item as per the route name in alphabetical order. We will also add another button, which will sort this list the actual price list as per praised value. So to resign this functionality, I'm going to use the sort method off every object. So let's jump into the visual studio cord to design this functionality. So to design this functionality, I'm going to do some of the changes. So currently we're refering this Burton as Burton, if you look over here, then you will find that we are refering. The button has Burton. Instead of that, we need to grab the class which is being applied over here. We really take this. And we can refer with this because we're going to introduce two new Wharton. So if you were refering with the Burton so it will create the area and we need toe access it through index off that, Terry that I don't want. I want to report the class and then I will get the reference off the button. Do I need to add two more button over here? So let's do it first. What? I need to do a need to copy and he'll we will tell that or buying fruit name. Copy this one wasted Soared by fruit place. So this to functionality, I'm going to introduce their Let's jump into the browser. How it is coming. You will see you. We have added to Britain. If you click no, nothing will happen to let's add the functionality. So this is our step one, added the Briton. No, the second district? No, in the second district, I'm going toe get the reference for both the bottle So I will tell that Bt and root name And over here I will access it with the class name query selector And here I need to grab the class name. So let's do it. So I have a plan here I need protein that sort by route place Make it like this so that it will not be duplicated. Grab the last name and over here specify with the daughter notation as I already mentioned in one of the station save it No core PP is the same thing as I'm going toe use the price one as well And this time we have a specified in ST off name. I'm going to use the place Matic. This is fine. No, I have grabbed the reference No, the third step Better we can cut it from here and I'm going to write it over here so that you can take it as a free school. Now the 30 steps we need to grab the you will off actual price. So we re take this one appears and here we will specify. Const, I'm going to tell that you were left. We have already taken it, so I have the reference over here. We will use that one over here. So I'm going to use the same object. Just I'm taking it from here. I haven't used anywhere in this. Why? I'm leaving it as it's to Just make sure that you are refering though you will. So no, the photo step. What we need to do We need to act as the event listener. So I will like that for Bt and half name. And here I will tell that add You weren't listening. And I want to listen the click event. So I need to specify. Click over here. And within that I'm going toe past the arrow function. And here I will s specify what I want to 80 with this click event. So what? I want post. I will remove although existing element in arrestee Emmel. And then I will short it and make an area. And then I will assign it. So let's clean it first. So I have cleaned the ally from actual price. You will So no, we will raid the sort function. So how we can use the sort function First we will tell the name off the area that is our fruit ball. And over here you need to specify a sword. And over here you need to write an arrow function, which is like this and we need toe past the argument over here with two Argument e and we I will explain you what? Actually this e n b is representing. And within that we need toe Tell that IV E door name. This is name off our fruit and be dark name. This is the second entry off the fruit. Then it will return minus one else. Save Els IV and here we need to specify the condition. And this time I will check that you don't name is greater than be dot name. And this time I will return one else. Make sure that there isn't a space between that and here We need to specify the else condition. If both are same, then it will return zero. Save it. So let's jump into the browser to understand it. Here, we're getting some mirror. Let's look in tow. The BDNF name has already been declared Bt in F price. It should be two times I have declared sorry for that. Save it. No, let's jump into the browser. So this time regard the list. So here what will happen whenever If we will click on this button so it will compare It will take to wait. Um, this one is e and this one is be second time. It will get executed. Then it will take this one and this one and this become e and this become be and it will sort asper the alphabetical order to make sure that you are providing zero over here. Save it now I have created this sort functionality. Now what they need to do, I need to specify let's sorted alike will to blank. So in the 1st 2 step, I'm grabbing this And then whenever it has been clear, I'm removing all the elements. Then I'm sorting it and now I'm again creating the element. So how I'm creating, I'm telling the sorted L. A. You want to create, I'm grabbing the fruit ball and I'm telling that I trade through each of the element. After sorting, I'm grabbing the fruit and telling that sorted ally equal to plus equal to I'm going to use the template string over here. Here. You should make sure that we should provide this air operator on here. We will mention Ally. I will use the temp registering ally dollar who make sure that you are using the curly Break it route Door name. We need to also passed the price for gin. Used dollar route toward praise. Save it now the next test that we need to grab this one and associate with the you will. So how we will associate it, We will tell that you were you. LF don't in arrest Yemen plus for happen Sorted Ally, save it. Now let's jump into the browser to see the foot. So no, we're having oranges Post grapes supposed to apple and peach? No, it should be apple first, then Greep than oranges, then peach. So let's straight. So you will see it over you. It has arranged passport the alphabetical order to know You can imagine how quickly you can design the sort functionality with the help of Aris short methods, you know, let's create the functionality for soared by fruit place so that it is being sorted with the value of this proved. Pray to how we can add the functionality. Just copy this one based it And here we will grab the reference off that particular button . Apply it. And instead, off name. We will go. Wait a price. Wait. The price over here. Right? Right. Nice. Save it. Let's look into the output. So let's jump into the browser. So no, you will see you. We have ah earlier. A rendering alphabetical order. No, it will be sorted by price. So let's do it. Sort by Price CEO. It has a rent as per price. So this is what I wanted to demonstrate you in decision. See in the next session till then, Buh bye. Take care.