JavaScript Full Course | JavaScript Tutorial For Beginners | JavaScript Training | Edureka

JavaScript Full Course | JavaScript Tutorial For Beginners | JavaScript Training | Edureka
Spread the love

Hi guys, welcome  to this interesting session on JavaScript.  So we’re going to start this session by understanding  What is Javascript  and the different data types in JavaScript.  Once you understand the different data types  in JavaScript will go  to The Operators conditional statements  and Loops in JavaScript.  Once you understand all the basic concepts  in JavaScript will look into the functions in JavaScript  and finally end this session with even handling  and objects. In the section of even handling will look  into the browser object model Dom and form validation.  So today we have a special guest Gauri  who’s going to take this session forward.  So over to you Gauri.  Hi all, I welcome each and every one of you. To know  what is Javascript.  We just need to know what are web pages or web apps.  A web app is something  that is available on web or in internet.  So whenever we say the word internet,  what comes to our mind is nothing but the browser whenever  we open a browser and hit a link on the browser  what gets on the screen is a web page page  that is hosted on a browser  that is shown by the browser to us is called as a webpage.  This webpage shows us the data  that we want to see from where the data comes up say.  This is your browser.  It will show you the web page  from where the data comes up data comes up  from something called less most  of the time it comes up from the server.  So both of them keep talking to each other now,  whatever coding that we do on the server side.  It is called as server-side programming and whatever coding  that we do on this browser side.  It is called as client-side programming JavaScript is  a client-side scripting language and not a service.  I’d scripting language.  So what we are learning is on the left hand side here though.  We know that where we have placed our JavaScript  how we will write a JavaScript code to write a JavaScript code.  What do we require is nothing but an HTML file,  what is an HTML file?  Ultimately we have to see our page on the browser  and a browser understands only  markup languages HTML is one such markup language  which stands for hypertext markup language.  So this browser of yours has something called as a parser  inside, which reads an HTML file.  Now, how do we write this HTML file to write this HTML file?  We just have to open up a notepad right  the file as per the rules  that are defined OK and save this file  with an extension as either dot HTML or dot HTM.  So why are we learning about this HTML file it is  because HTML file is the host for our JavaScript code.  If we want to place our JavaScript code.  We need to have an HTML file  because without HTML file we cannot try to JavaScript code  or other we cannot see  what is happening in the JavaScript code.  It’s like a host for our JavaScript code.  So our JavaScript code  which we will be learning will reside in this HTML file.  So we have in short understood  that we are now concentrating only  on the client side programming.  Secondly we want to type  in the code that is Javascript code for that.  We need to have an HTML5.  So let’s start creating our first HTML file  for that simplest thing is to open up a notepad  and keep typing the HTML code.  How do you write an HTML code  in HTML code is always return in these.  Sticks Carlos HTML tag every tag in HTML has two parts start tag  and an end tag  and whatever you write within it is its content.  So basically an HTML tag has two children head  and body head is that child  which concentrates on the title  or how the header of this file will look  like on the browser  whereas body is that child  with concentrates on the complete page  that we will see on the browser.  We will have to save this file with the extension as dot HTML.  Let’s create one folder.  In this folder,  let’s save this file  as static dot HTML make sure that you choose all files  because we have changed the extension.  So we’ll just concentrate that.  I have changed the extension of this file as dot HTML.  If you notice the icon of this page changes  to the default browser it is that makes us sure  that this is an HTML file.  So if I double click this file will open with a browser  if you want to open it with the browser of your choice,  you can say right click open  with Google Chrome or whatever file  that you want or which are browser  that you want to choose in this fight.  If you keep writing some elements in the body part  that will be shown  on the browser what all elements are present in HTML.  Are you can see a button you can see something  like input box.  You can have a paragraph.  Etc so there are many many elements  that we can write in an HTML file.  So when I save this file and try to refresh this file,  I will see a lot of things.  I have seen an input.  I can see a button which is clickable.  This is editable and this is a static paragraph  that I can see.  So these are all the elements I can fit in the body part  which can be rendered on the browser.  Now whenever I create my HTML file its most  of the time a static file.  What do you mean by studying?  Whatever I add on  to this HTML file will be shown on to the browser.  There is nothing extra or there is nothing  that will work at the runtime or dynamically  that cannot happen  if I have a plain HTML file and that’s where the need  of JavaScript comes whenever we use JavaScript in an HTML.  We add that Dynamic – to the edge.  Animal file so as you can see that this is a static paragraph  This is what I have written.  I want to write something  like my name is ABC so here I will have to give all the data  to this HTML file then only that file will render it.  So that is why I call this HTML as a static thing.  Whatever I add into the body part  that will be rendered  and that’s why we want to add something called as JavaScript.  That is the use of JavaScript.  Let’s see.  What is Javascript without any additional libraries.  JavaScript is also called as vanilla JavaScript.  So as I told you then we will be covering up  and first three modules  complete vanilla JavaScript JavaScript is a language  which is case sensitive language.  It is a programming language or other to be very specific.  It is called as a scripting language which helps  in making interactive web pages or like adding some Dynamic –  to the web page.  How is it interpreted?  So it is interpreted in executed on the client.  Machine that is on the browser.  It is used as the default scripting language  for HTML Pages  this particular language reduces the load on the server  as some operations are done on the client side.  Let me give you an example.  Now.  If you have a web page with takes up two numbers  and gives you the summation of two numbers.  If you have this data of two numbers,  you need not go to the server and tell the server  that please add these two numbers  and give me the result back  because JavaScript is a client-side language  which can take up these two values calculate the value  and show the result to the end user.  So that’s how you have lessened down.  The burden since JavaScript is rich in operators  and Loops things  which are possible to be worked with on the client side.  You can do all those tasks using JavaScript.  Thereby reducing the load on the server history of JavaScript.  It was first developed in 1995.  But the Virgin as 1.0 then came up 1.1 then came up  in 1997 1.2 1998 one point three and nine.  We started calling it as jscript 5 now previously.  This JavaScript was supported by only specific browsers,  but nowadays it is supported by many many browsers or other all  the browsers initially.  It was supported by  if you can see Netscape Navigator 2.0 then it started  like Microsoft Internet Explorer also started supporting it  as you can see that till 1999.  It was like only two browsers were supporting it.  But now all the browser’s are supporting it  and to use the best browser to use for UI development  or what is called  as JavaScript coding would be Chrome  as it helps us with many debugging tools.  Okay, we will see what our debugging tools  that the browser has now  as you can see that there is something all its job.  Word in this JavaScript  and many a times we start feeling that  okay, they are something related.  But no,  that’s not the way they both are not related to each other.  Java is an object oriented programming language and rather.  It is a language  which is developed to build your complete business logic.  It has some part like say jsps  which will run on the browser also.  Okay, but doesn’t mean  that it is a purely client-side language.  You can use it on both the sides  whereas JavaScript will be run only  and only on the browser  for Java program to run it needs to be first compiled  and then it is executed.  Whereas for JavaScript  do the compilation happens, but not line-to-line compliation.  We will see what exactly  or how the compiler should happens in JavaScript,  but it is always said  that it is just in time compiler action that it  is basically interpreted.  There is no lag  like Three become by literally it will take some time  and then it will be executed.  No, it is like just-in-time compiler shit happens  and the execution starts for Java.  There is something called as static type checking  and for JavaScript it is dynamic type checking  so we will see this static and dynamic type checking  when we will look into something  or less data types in JavaScript.  Where can we use this JavaScript?  Well, we know  that it can be used  on the client-side scripting to add Dynamic analysis now  in case you really don’t need your server to work or exert  and you can handle all the logic  at client side then such applications do exist,  which are completely made up of JavaScript.  For example,  some gaming applications or mobile apps Etc.  So nowadays JavaScript is booming up a lot  and it can be used in all these fields.  So let’s get started up with the JavaScript part.  How do we write the script  or how do Embed a script in the HTML file.  We have created we can embed it in two ways.  One is internal embedding and one is external.  Let’s see both the ways like any other tag.  Okay, we have these tags here body tag, then head tag,  that is one more tag,  which is available  which helps us to invade JavaScript in HTML  and the tag name is script.  And we can write our JavaScript code  Within These two tags.  So whenever we write any code within this two tags,  it is called as internal embedding  that happens before riding any script in the script tag.  Let us understand basics of this JavaScript  as we write something in the body part of HTML.  Basically what we need to do.  Why do we have  this user interface user interface is available  so that the user will enter some details  so you will get some data work on that data  that is what is the main aim of having an interface.  So we will be adding many elements  so that the user will be able  to add the data with ease for example will be able  to add some radio buttons some checkboxes.  Then we can add some input boxes,  then we can have some buttons Etc.  So all this elements we can just put in on to the body tag  that we have in our HTML page.  When we add all this element in JavaScript,  what we get is nothing  but a big bucket this bucket has all these elements some are  buttons some our input type some on radio buttons Etc.  So these are called as elements in this bucket  and this big bucket is referred in JavaScript  as document to be technical document is a ready-made object  that is available in JavaScript using this document.  I can access all the elements  that are there on this page this document.  That is the object has many methods already Define  which help us to reach to that particular element.  The methods are  like get element by ID or document object you  can use get elements.  Bye guys, ning are there is one more like get element  by class name.  So there are many many methods which are available  which will give us an access to this particular element.  Now if we want to make use  of the methods like get element by ID,  then we should make sure  that we give some identification to these elements.  So when we write these elements we make sure  that they have some ID that is key with pomp.  We will also have to make sure  that if we want by using this method only one element,  then the ID should be unique.  I cannot use the same ID for some other element.  If we want to use something called as class name then I  need to add the class name here.  So as many attributes I can add using those attributes.  I can access these elements  and after accessing these elements I can work around  on this element.  I can work around on its look  and feel I can work around on its functionality.  I can work around on anything because I have got  like I could conquer this particular element.  So to conquer  or to get this element we have many methods  which are available with this document object.  I as a developer,  I don’t create this document object.  It is Javascript,  which prepares this document objects and gives that to us.  We just have to straight away use this object it  is I’ve already made object in JavaScript.  So let’s try to see  how do we use one of the elements use  the object document say get element by ID.  If you just see the naming Convention of these method  is using camel casing  that is the first letter is smaller.  And the next letter of every word is capital.  So I want to access this particular ID  this particular paragraph So  if I want to use this particular paragraph,  I would give it  that I want to get the element whose ID is demo  once I got this element.  I want to change whatever is its inner HTML  that is written so currently it is.  This is a static paragraph.  I want to change it to this is a dynamic paragraph.  So I’m going to change the property of this element  and the name of the property is innerhtml.  So that’s what I’m doing.  What am I doing?  Is that I am taking this particular element by ID  and I’m changing it value.  So previously it was static paragraph.  Now.  I want to change it to Dynamic paragraph.  Now, where have I placed this particular script tag?  If you can see the script tag  that I have added the script tag is below the body  that is where body ends up.  Why have I placed it below the body?  I will explain you the reason in a few minutes.  So let me save this file file is having head part a body part  and a script part script path is added embedded internally.  This is how we add JavaScript internally  within the script part.  I have written only one statement in which  what am I doing?  Is that using the document which is a ready-made object.  I get the element whose ID is demo  and changing its inner HTML.  Let me see how it works.  Can you see that the value  of that paragraph is now Namak bad a graph  if I want to use external scripting then  what do I have to do?  I will have to copy whatever is  in this script tag copy this in another file.  And save this file as a Javascript file  and how do I do that?  Dot J’s.  I put an extension dot Chase and save this file.  If I open it in the folder structure.  I’ll be able to see  that the icon of this Javascript file has changed  which makes me sure that okay.  This is a JavaScript type  of a file and now I will have to link  these two files link this file.  I will have to keep the script tag  as is and just write something colorsource the  from where I am using it.  Now.  I have returned the name of the file  with a complete extension.  That is dynamic Chase.  I want to be double sure then let me just copy it from here  and paste it here.  This is the file that is Javascript file  and in HTML file in which it will be linked.  Both of them are residing in the same folder.  I can directly write the name of the file.  But if this file is residing in some other folder,  I will have to keep its complete path.  I Give its absolute path or its relative path.  So let me see after giving an external Javascript file  will make code work as expected.  Yes, it does.  So this is how we can add internally and externally  the JavaScript path.  Now the question remains  like why did I write that script tag  at the bottom of the file?  If you just want to debug your page,  what you can do is right click on the page and choose inspect  when you choose inspect.  Okay, you’ll get all these values.  So I’m using currently  Google Chrome if anybody is using Google Chrome,  they will see all these values.  So elements will show you all the elements  that are present on this deck.  So there is something like one button there is another button  which is there give within this button is your input.  Okay, then two paragraphs  that is what is there in the button.  So, let me see have I done it that way?  Yes, I’ve kept This button not closed.  So if I just refresh it, so I have a button separately.  I have an input box.  I have a paragraph.  I have another paragraph  and that is what I have in the body there.  Okay.  So if I just want to see any of these elements I can see them  in the elements tag.  What is sources all about if you add anything  externally you will be able to see all the sources  that are attached here.  Currently.  I have a Javascript file  which is attached externally so I can see  that in the sources tab.  What is this console tag all about in learning any language?  We need to actually know  how to test our bugs in it or test whatever coding  that we have done.  Any other language has standard output standard console.  For example, if we use Java we will have a standard console  like a command prompt will be our console  for any other language.  Most of the times command prompt is our consult  for browser to see our console  every browser has This inspect element  and using this inspect element will be a console tag.  Okay our console tab,  which is there that will help us to see the output.  So this is a console tab which is present.  Now if I move the script tag above this about the body tag,  maybe somewhere in the head and I try to refresh the page,  you will see  that whatever I have written in the JavaScript  not get executed why that has happened.  You can see that I have got one error as well.  Just go to the console.  You will see the error.  The error is clear  that is Javascript cannot set the property  called as innerhtml of null  so there is nothing and that nothing’s in a lot HTML.  I have to sit why this is happen  as you write your HTML page and you paste that page  on the browser browsers control start executing.  So the control comes here.  Okay, it reaches head.  It comes to script  so it starts executing  the script in the meanwhile it also start rendering your page  and rendering all the elements so till the time your script  is getting executed.  It may happen  that your element has not rendered  since your element is not present on the page.  Code will definitely give you an error  because there won’t be any element with the ID as demo.  That is why make sure  that you write a script at the end of body tag  so that whenever the complete gets completely rendered then  only a script will work doing this the error goes  and you can see  that your script is getting executed.  So that’s what we have done.  We just got started up with JavaScript.  So that’s where you can see  that how we have added a script I so script tag can be added  within the body tag or even below the HTML.  Even when the HTML gets  over you can write your JavaScript not an issue  how to add it internally and externally minute  to internally add you just have to write script type  and within that all the code of JavaScript  if you want to add it externally,  then you write an attribute in the script tag  that is Sr C stands  for Souls you can write the name of the file is the file  that is the Javascript file exists in the same folder as  that of the HTML file.  If it doesn’t then give it a pop.  Let’s just see  a beautiful example the name of the example is displaced  and in a paragraph on your HTML to do so,  what are the steps you have to open up your notepad file right  in HTML code make sure  that you save your file with an extension dot HTML  or HTM create a one more file called as  a Javascript file save it with the extension as dot chairs  and Link it in your HTML code to link use the attribute SRC  in the script tag.  Okay check that your HTML  and JavaScript files are located in the same folder  as you have just mentioned the name  of the Javascript file Now open up your HTML file with a browser  and check the output  that you have created.  So that’s where we have completed a small part.  Like we’re what is Javascript.  Where is it placed?  And how do I write a JavaScript?  Let’s move on to the next part in the JavaScript  which is data types in JavaScript like document.  There is something called us one more object  that is ready made and available in JavaScript,  which is colors console.  This console object helps us to write something  on the console and console is  what if you just inspect on your browser,  you will be able to see a screen colors consume.  So if you want to see something not on the browser,  but on Console just to check  whether your logic is working fine.  You can use make use of that object called  as console Now using notepad is very trivial you  you can make use of many other text editors  which are available in the market.  Like there’s notepad plus plus there is eclipsed.  There is Sublime Text  which I’m using currently so there are many text editors.  And what is the advantage of using this editors is  that you can get some type forwards you can get some help  so you may not type everything from scratch.  For example,  if I want to now write my HTML page here in Sublime Text,  so I create one more folder here.  Okay, the name of the folder is say add Eureka  and within the said Iraq,  I try to create a file I make sure  that I’d say this file as an HTML file.  So I just create this static or like  say our first Dot HTML file and if I type this HTML code,  can you see the magic?  It has already returned some piece of code,  which is like a basic thing that I need to write  PSI me waste my time in writing all this  so it is help me.  It has done this type forwarding.  They the code forwarding is has been already done.  So that is why I would suggest each  and every one of you to use some kind of IDs.  Okay that will help us to type in faster.  So let’s try to see let’s create one script tag here.  Okay with its sauce as the same folder.  Okay and data.  Data types in JavaScript,  so let’s create one data types dot Javascript file  in the same folder.  See this file in the same folder.  As I said Eureka right?  Click on the folder to save this file as data types God.  Learning data types in this language  that is Javascript language  as I told you  if you want to see anything on the console to learn something.  You should see some output that gives us, you know,  kind of inspiration to learn any new language.  So that is why I have introduced this console topic.  Okay, which is a ready-made object like document  and using this object.  We can type in anything on to this console.  If you want to type something on the browser  using a JavaScript you can use your older object  that is document  and to write something on the browser the method  that is used is document dot write.  Okay.  So let’s use both these so  when I say console dot the method that is used is log  So within this log I can just say  that hello everyone and save this file.  So I’ve written a JavaScript and there is one HTML file  do the HTML file has no elements on this file.  Yes, it has a script that has got embedded.  Let’s try to run this file.  Let’s just open this folder.  So you can see that there is first HTML open it on Chrome.  This is there is no element present  in the body tag.  I will not be able to see anything on this page  if I right click and inspect and I open up a tab console.  I can see that whatever I have typed in console DOT log method.  I can see it here.  Okay, if I want to write  something on this browser using JavaScript,  it would be something like this.  Belson every statement in JavaScript will end  with a semicolon.  Let me run this.  Can you see that?  I have written it on  to the browser now moving ahead with data types in JavaScript.  There are around 56 data types,  which are present in JavaScript.  They are number Boolean string.  Then there is object.  Okay, and there are some special values.  So this type 4 type 5 and type 6 though,  they are different types,  but they are considered as one type in JavaScript call  us object undefined  and not a number are some special values  which are present in JavaScript.  How do we write a variable JavaScript variables  can be considered as containers with store a particular value  or name for a Caleb block  of memory now as any other language  which has a strict type.  For example,  if you take up Java or C++ if I want a number a variable  that should contain only a number then I make sure  that I declare that variable with its type for example  in t a so now variable a will always contain a number  but it is not the case in JavaScript.  You will always Mark  any variable as of the type VAR stands for variable.  So it’s like a general thing you can again imagine it to be  a bucket whatever value you add on to this particular bucket  that type of bucket will become  if you assign to this variable a a number it will be  of the type number.  If you add it a string it will be of the type string  if you add it something like an object will be  of the type of object if you add an array.  It will be of the type array to name your variable.  You should follow some rules.  What are the rules the rules says  that you cannot use any JavaScript language  specific keyword.  That is something like if for do function  so all these keywords have some meaning in JavaScript.  There is some logic there is something that will execute  if you use such keyboard.  So you cannot name your variable with the keywords  that are existing in JavaScript language.  You cannot start your JavaScript variable  with a digit neither.  Can you use  special characters like percentage dollar and person  while naming your variable always start your variable  with an alphabet  and then you can follow that alphabet with a digit  or an underscore you can make use of uppercase  or lowercase alphabets.  So here are some examples see well,  it is something like some  or you can have first underscore name you need an escort.  Just one invalid is you can start it with a digit.  You cannot use a keyword like function and cannot use  a special character called is dollar.  Okay.  So these are some of the rules of defining your variable.  So let’s see all these types of variables to see the types.  Let me remove this code create a variable say a  or you can just create a variable called as general.  Let’s see what this General variable  that I have created.  This is called as a declaration.  I haven’t initialized this variable.  I haven’t given it any value.  Let us see what value by default it takes up.  If I do not initialize it to see  that you can just write console Dot.  long within which you can just type  in this value copy paste it semicolon save the file  and can you see that by default?  It gets the value call as undefined.  That is why it is said  that there is undefined is a special value in JavaScript  to the same variable.  Okay, which is not of any type as of now.  Let me add this General a number and let me see  like what type of variable this becomes to check  that what type of variable is this General keyword  or general variable is the operator to be used  is called as type of All small type  of so this operator.  Okay will tell you whatever is on its right hand side.  What is its type?  Okay, so can you see that the type is now number  if I gave this General?  Okay a string value and now check its type.  Can we see that the type has now changed to string  if I gave it a string value with a single quote?  Let me see.  What is the type that it becomes again a string.  So we have covered up this number and string.  Let’s try giving it a Boolean value.  Something likes it true.  Let us see what value it takes up the variable  now becomes Boolean types.  It is like the paint that you want to paint it.  Okay, it’ll be of that particular type  if I want to give it another type of value  like say null or an early or let us make it an object.  So for all these three types,  the type will be always an object and let’s see  what type it becomes it becomes an object type of data now,  so let’s start with the next data type  that is arrays to write an array.  Okay.  We have a syntax  which is shown here in the Declaration part  when you write this variable space  so space is equal  to and you initialize it to a square bracket.  That means it is  of the type array now array internally  in JavaScript is treated as an object to write this array.  There are two ways  either you can initialize it using a square bracket  or you can Make use of something called as a new operator neck  after the word new you have to make use of array keyword  and then it is followed  by brackets in which you will be writing the name of the elements  or whatever elements you want to add.  What is an array  if you just see this how memory takes it.  For example, this is your memory  and if I try to write something called as variable a  which is equal to 9 then a small memory is allocated  or a small place is allocated in the memory,  which will hold the value 9 few and now your variable  a will be pointing to this memory location.  Now, for example,  if you want to add marks offset 10 students,  how would you go about it?  You will create a variable marks of student one marks  of student to marks of student 3 and so on  so they’ll be so many variables that will be created.  So in such a scenario We will have almost ten variables  that will hold marks of 10 students.  But using array  this problem is solved using array memory is allocated.  Okay, sequentially having elements in it.  Like if you want to store marks of 10 students  and they’ll be ten elements.  If you want to store marks of five student,  then five elements will be created.  Let’s just create an array of marks of five students.  Now, how do we declare an array to declare an array?  We can make use of something called as variable a is equal  to square brackets.  We can add all the marks like this.  This is one way of declaring an array another way  of declaring an array is  that you can make use  of the keyword new with the keyword array  with a capital A followed by this brackets  and within the bracket you  can keep all the values of the elements  so This is the use of it is  that memory is allocated sequentially plus you  can access all the marks using only one variable  and individually also you can access every element  how do you do that?  Every element in the array has one index  and index of the array always starts with 0.  So if you have added around five elements,  then the last index would be 5 minus 1  that is 4 it always starts with 0 and  if you want to individually excess these elements then  how do you do that?  Is that you write a of 0  if you want to access the second element,  you will write a of 1  if you want to access the third element.  It is a of to  if you want to access the fourth element.  It will be a of three.  This is how you can individually excess this elements.  So let’s try to create our array here.  Let’s make this cendol variable to hold an array.  Alexei what type of value it gives us.  You can notice it again gives us object type of values  if you initialize any variable to the type as array,  it will be of the type of object along with this type.  We can also check  what is the length of this array?  So whenever we have an array type of object  we can get its length by using this property Carlos length.  Let’s see.  What is the length of this?  You can check that the length is 4  if you cross check 1 2 3 4 the length is 4 but the index  will have from 0 1 2 & 3.  So these were some of the data types  that are present in JavaScript  which we need to be comfortable with.  Okay.  Now type conversions we have this concatenation operator  called as plus now.  This operator is really magical  or what you can call it as an overloaded operator now  to this operator  if you give on both the sides.  Numbers, so if you see two plus three,  it will add both the numbers and give you the summation.  Let’s just check it.  So if you want to say two plus three and let’s just see  what is the output that I get the spelling is wrong.  It is console.  You can see that it is giving me the some but  if you give on both the side  of this plus operator string type of data.  See High plus say they’re in such a scenario.  It will give you a concatenated string.  So definitely this type  what it gives back is a number type.  This is a string type  and when both the operands on this plus operator our string,  then it concatenates the string.  So what if I give one number and one string?  In this case.  Let me see  how it works it again acts as a concatenated type.  So that is  what is this magical Operator concatenation Operator works  as which is also our topic  or less type conversion a process  where an entity of one data type is converted to the other.  There are two ways in which type conversion is done  in JavaScript there something all is implicit conversions.  We’re in integers converted to string  and back automatically  and that is what we do by using this operator.  Now, for example,  if we have a variable num 1 here,  which is initialized to Phi  so it’s type of will always give us number is the value  to this number.  If I add one more number then definitely num2 will be  of the type integer or a number but to the same number  if I add 5 as the value,  but with coated value  that means I’m adding a string to it that time this num three.  Become a string type of object automatically.  It will change its type.  So based on what value are you adding to the existing value  that type will automatically change by default.  Okay, if you make use of something called as prompt,  what is a prompt a prompter something  which prompts you to write  in the data so like that there is a function in JavaScript,  which is a global function called as prompt.  Okay, if you ride that prompt,  okay, your browser will actually ask you to add some value.  Let’s try doing this.  See if I just see prompt.  Enter some value.  Can you see  that it is asking me to enter some value.  So it is prompting me that okay Enter some value.  So whatever value I add I may add number  three or I may add a string or I may add anything by default.  Whatever value I add in this prompt.  Okay is of the type string so though.  I add a number it is of the type string.  So if I take whatever value that I have given as num1, okay,  and then I want to see what is the type of this num1.  So I type in type of num1.  Let us see what happens.  It asks me.  So I write for and console DOT log.  Let me rewrite it the number  four so you can see the type is string.  So whatever I write in this prompt is  by default taken as string.  So if it is a string, okay,  and then using my value like I want to write  console DOT log.  I think this number one.  Okay, and I want to add number nine to it.  So whatever value you add I want to add number nine to it.  But will this work now it won’t why  because now one is of the type string  and we know that when concatenation operator  has one string type it converts this whole thing as a string  and it will just concatenate  instead of adding these two numbers.  So for that matter,  I will have to convert the string into an integer  or float for that matter.  So there are some methods which are available call  us parse in to pass float to this methods  if you pass a string it will convert it into an integer.  So let us see what is the value that we get?  I have to and I will get the value as 11.  But if I had not done that parseint, okay,  then I would have got to nine.  I still value.  So this is what problem does there is one more method  which is available.  Call us alert,  which also gives you a kind of alert.  Hi.  This is n alert.  So you don’t see the difference  from will probably ask you to write a value.  Whereas alert will just give you a message back.  So these are two different methods  which are available with JavaScript with this  we have completed data types  in JavaScript and let’s now move on to the operators  part of the JavaScript.  So there are these many operators  available in JavaScript are  pathetic operator spring operator assignment  operator comparison Operator ternary Operator  and Boolean operators of which we have covered  up string operator that is your concatenation operator.  We have also seen a dramatic operator  like plus so similarly your –  multiplication division modulus  increment decrement operators will work.  It’s just see it’s practical.  Let’s create one more Javascript file.  And name it as operators dot JavaScript.  We want to link this particular file in the script  so I can add as many scripts as I want.  Okay, so that is just add this file.  So So both the scripts will run first.  The script file will run  then the script file will run as of now.  We have already tested this script file.  So let us commend this file you can commend this file.  So once we comment,  what do you mean by commenting any line is your parser  in the browser will ignore that line to comment in HTML?  It is angular bracket exclamation mark – –  and it with – –  an angular bracket to comment in your JavaScript you  can use two slashes.  So this is a comment.  So let’s learn this art Matic operators now.  Simple operators are there like any other language has  for example 2 plus 3 will add the two values to – save bun.  We’ll subtract.  Okay, so it’s simple  so we can have something like 2-1 directly  or we can have you know,  variable difference is equal to say 3-2.  Okay, and then we can log this console.  That’s different.  So whatever is the value in the difference will come here.  If you want to see a product of two numbers,  you just can say that seven into eight or nine.  Okay, and log that product.  I want to see division then you can create one more variable  if you want and just see  if I divide by and just write it  on the log to see the output to see modulus.  You can just say  that mod is equal to 5 percentage  for so modulus is something which gives you the remainder.  So what does has is difference?  So let’s just try to string College difference.  Here we are writing the product.  So let us know that it is a product.  Here we are riding.  What is the output of the division?  And here we will be checking with the modulus.  Let’s see the output of this.  So the difference is one product is 63 2.5 is the module Division  and modulus has one  what is incrementing and decrementing operators?  Like + + says we have seen that the difference is 1  okay, if you just want to increase it by one.  So what you can do is just say the difference  plus plus it is as good as writing something  like this difference is equal to whatever is the current value  of difference plus 1  if I do it different – –  then it is as good as writing difference is equal  to whatever is the current value of different minus 1.  So these are your increment and decrement operators.  So now you’re  difference value has already got incremented by one.  If you want to test it.  You can just run this and you can see  that previously it was one and now it has become too.  It has got incremented by 1.  So those were  your art Matic operators plus minus division modulus product,  okay and incrementing and decrementing  operators.  This was a string operator, which is already cleared.  Let’s move on to the next type of operator  that is assignment operator of which we have already  checked equal to so whenever we declare a variable variable a  and we just say equal to that means we’re assigning a value  that is this a will hold now so-and-so value.  What is this plus n equal to if it is see the description  it says add a sign so add some value  and then assign that newer value to the variable subtracts.  And assign so you subtract some value  and then assign the value to the variable.  Let us see the examples of that.  Let’s just commend these lines  because this execution has been already seen you  can comment multiple line by using slash star.  Okay.  So all these lines are now commented until here.  I want to comment so you can use slash star back.  Let us now see the next type  of operators which are your assignment operators.  So for example,  if I have a variable say s is equal to 9 so number type  of variable I can do something like nine  plus equal to eight variable S Plus equal to 8.  So it is as good as your writing  s is equal to whatever is the current value of S Plus 8.  So, let’s see.  What is the output that we get here?  Let me run this.  Can you see that the output or the value of s has changed  to 17 similarly?  If you do s minus 8 minus equal to 8.  So the value should be 1 similarly you can make use  of multiplication and division even the modulus sign.  So these were some  of the assignment operator and some normal assignment operator  and some Advanced assignment Operator Let us move on  to the next operator.  That is comparison operators.  Now what I mean by comparison operator  or why do we require comparison operator see  many a times we need to compare two things to draw some Logic,  for example,  if these two variables are equal then I want to do something  if these two things  are not equal then I want to do something.  So that’s College logic building you build up a lot.  And whenever you build a logic,  you need to compare the two operators to build  up a logic the main statement  that we usually use is an if-else statement  which will be covered when will cover up Loops.  So let me introduce  that if-else Loop here to explain you  what our comparison operators let us commend these now  and move on to the next set of operators.  Call us comparison operators.  What does an if Loop?  Okay, how do we see other if Loop  if Loop is see in your day-to-day life.  If you want to write a logic say  when will you drive if you have some conditions put up like  if the road is for Lane,  then I will drive the car today else.  I will not drive.  So if this is your logic, okay,  and that’s what you want to write in your code.  If you want to do that.  Okay, that’s the simplest way  of doing it by using IF else statement  if else statement has syntax,  like if and in the bracket, you will write your condition.  If this condition is true,  then whatever statements you have written  in this brace bracket will get executed  if the condition is false and whatever you have written  in this brace bracket will get executed.  So this condition has to now be the output should be either true  or false and how will you get such an output only  if you make use of something called as comparison operator  and the comparison operators,  which are available with us are equal to equal  to not equal to then  if it is greater than less than so.  All these operators will always give us output  which is of the type Boolean.  For example,  I can have something like variable s is equal to 9  that is variable S 2 which is equal to 8,  so I want to say that whenever s 1  and S 2 are equal then you’d write do something  if they’re not equal then you’ll do something.  If I want to write that in the sewer or in the code  that is Javascript code.  I will say s equal to equal to S 2 that means  if both of them are equal then you write on the console.  Okay that yes S1 is equal to S2.  This is what you will be printing  if it is not equal.  Then you will be printing that.  Yes, both of them are not equal to check  whether they are not equal.  The comparison operator is an exclamatory Mark  and an equal to sign.  So I get the output as s 1 and S 2 are not equal.  Why are they not equal  because once value is 9 and others value is 8  so that is why they are not equal.  So it comes to this else part and executes this part  if I write here the condition  as not equal to and I would say here it is  if part this is else part.  And run this I would get the answer as if part  because what I’m testing here is  if they are not equal to then you execute this.  If they’re equal to then you execute this now  within this equal to equal to the something  or less triple equal to what does it do?  What triple equal to okay.  It also checks its type.  Now, for example,  if S 2 is also 9, but it’s type is string  and you right here s 1 is equal to S2.  Let’s see what gets executed.  It is still in the If part it says  that s 1 s is equal to S 2 though the value is same  but the type is different and  if you want to even check the type,  then you can write one more equal to here  and make it something like s triple equal to S2 in that case.  It will go to the else part  because the value is same but the type is not the same  that is why this will give you false.  Can check something like,  you know if it is greater than equal to so which means  that s can be either greater  than it is to or it can be equal to in both the conditions.  This will get executed.  So, let’s see.  What is the output here?  Yes if part so it is equal to that holds good  if the value is 10 here this will go to the else part.  So this is how we write  this comparison operators wherein we can write greater  than you know lesser than less  than equal to Triple equal to double equal  to not equal to  so all these comparisons can be done using  the comparison operators.  Let’s move on to the next part.  That is Boolean operators.  Now Boolean operators  where to be used this Boolean operators.  These Boolean operators are for example,  if you want to use the same effect statement,  so what was your first condition  if the road is four-lane then will then only  you Be driving the car  if you want to add some more conditions,  like if the road is fallen  and the traffic is very less then only I will drive the car.  So you have just attached one more end  and one more condition.  So if you’re working with multiple conditions,  and if you want all of them,  you know to be true you will use and operator  so it should be like if s  1 is greater than equal to 2  and + S1 is like triple equal to S2.  Okay.  So that means it’s type is also true.  And even this is  condition is true then only we execute this part.  This is how you can attach two conditions  by using and operator.  But what if you want to write conditions  and it is like any one of this condition is true,  then you should execute this part in such a scenario.  You will be using or here, right?  Odd it is two pipelines.  So it depends on what logic you want to write.  Okay, whether you want to write  that both the condition should be fulfilled.  It is Trick, then you will go for and operator  if both the conditions if any one of them is true,  then it is or condition.  What is negation condition.  Now, whatever the output  of this condition may be true may be false.  If the output of this condition is true,  but you want it to be false then what you do is you negate it  that is you add one operator outside this bracket,  which means that when you write a negation here  or a not okay that time whatever is the output  of this inner bracket  that will be negative.  If it is true.  This will be false.  So the output of this whole condition is negation  of this inner bracket.  Okay, you don’t want something to happen.  If this is your logic at that point,  you know how to write the condition of  what should happen.  So you can just write a negation in front  of that logic or in front of that condition.  And last in the final operator is your ternary operator.  What is this ternary operator all about ternary operator  has two syntaxes  or two operators It’s a combination of two operators.  How do you do that?  Let us first commend these and let’s move on to the next  that is ternary operator in ternary operator.  Okay, you have these two parts.  Okay, the pot is divided by your question mark  so question mark has his left hand side  and right hand side on its left hand side.  You will write a logic  that will always give you output as true or false.  So definitely you will be using your comparison operator.  Okay and writing a logic so you write  that 1 is greater than 2  so this is using comparison operator either.  This will give me true or false.  So if this gives me true as the answer then  what should be executed will be returned  on the left hand side of this:  I will type in true  and if the output of this condition is false,  then this will get executed whatever you have written  on the right hand side of this:  so, let’s see what will be the output here.  It may be false  because 1 is not greater than 2 so output  of this condition is false.  So it will go on the right hand side of this:  so ternary operator is always having question mark and:  a question Mass separates the condition  and the result whereas:  separates your true and false results.  So there we end up our operators and let’s move  on with the loops.  So out of this conditional statements,  we have already covered up if and if-else statement.  What is this if-elsif-else statement?  So of this conditional  statements we have already covered up if and if-else now,  what is this eat else?  Fifth statement as I said  that if has two parts when it is true,  it will execute if block if it is false.  It will execute the else block  what if within the else block also you want to write  one more condition in such a case,  you will write a statement  which will have syntax like if then else then again  if and again else,  let’s see an example of such a syntax.  This is a normal if condition see for example,  you can ask the user to prompt your age  and check that H  whether it is greater than 60 and you can write a message  that as your more than 60 years old.  You have to control your salt and sugar intake.  So your condition is age greater than 60  with a comparison operator  which will give you either true or false.  So if it is true then  only this statement will get execute it  if it is false,  then nothing will happen  because there is no else block that is written  if you just move a heat.  You will see that if your age is less than 30 is your condition.  So in this condition if it is true,  then your if block will execute if the condition is false.  Then the else block will get executed.  Okay, so we just have seen like how  if/else block gets executed now  if what if in the else block also you want  to write some condition,  for example, you ask the user to prompt his  or her age the user adds his  or her age you take it in a variable called as H  and in this age variable you write a condition  that age is greater than 60,  then you have to control your sugar and salt intake  then you understand when you will reach else part.  That means he’s not greater than 60  that means his age is either from 0 to 59 So within that also  if you want to categorize it  like whether if age is greater than 30 or not,  so if it is greater than 30,  then definitely has to be cautious about  what he’s eating May.  Control totally but yeah some sense of cautiousness  so that you can put in again one more  if block after else  so such a statement is called as if else  if else statement  so we have seen such beautiful examples on the screen.  Let’s move on to the next conditional statement called  as a switch statement.  What is this switch statement switch statement always  takes one value now,  it is not taking  a comparison operator not always the output of the value  on which the switch statement is  return should not always give you Boolean value.  It may also give you an integer.  It may also give you a floating-point number a string.  So when your condition is going to give you such values  that is not Boolean value,  then you may go for this switch statements.  Now, how is this switch statement return if you just see  that you asked for a user to prompt his or her way.  You can switch this particular wait now wait is what it is  of the type float  and we’re perfect of using this switch statement  for this weight value.  Now after the switch statement the block that will get executed  should have cases  what are this case is all about it is like,  you know a broad spectrum  that you provide like wait can have  the value like 10.5 20.5 or any value for each value.  What is to be done  that you will right next to this case statement,  for example,  if the weight is 10.5 then you will write on the document  that your weight is so and so if your weight is 20.5,  you will write that on the document  that it is 20.5.  What is this default doing here?  It may so happen  that weight will have many many values.  So you will keep on writing all the cases  and sometimes you may miss one of the case,  so it’s better  to Write something called as a default case.  So this case will get executed.  If none of them fits in  if 10.5 doesn’t fit in 20.5 doesn’t fit in  if I write it as 11.5 then  I don’t have a case here to get executed.  So that is why I will go to this default case  and get executed.  So for example,  let’s just try the same example here of the switch case.  Switch will have something called as wait.  Let’s just take this weight value  variable weight is equal to we have to Bosch see float thing  but prompt Enter your weight.  So we take this wait here.  So it has been converted  into float from string and now we are switching this wait.  So we write here are switch block.  Okay, the case can be you know one  or the case can have you know,  wait can have value to wait can have value  say three now whenever the value of case 1 is 3  then I will write something like,  you know document dot write.  your weight is 1  if it is 2 then I will write it as 2 or something  that I want to do.  Whatever logic that I want it to happen or work here is  what I’m going to write next to the:  but if weight is  for the nothing is going to happen because I  haven’t written any default case whatever I will be doing  if the case is 1  if I want to do a lot many statements I will do all those  and definitely make sure  that I write a break statement.  Why am I writing break statement here?  Is that if I do not break it.  Okay, it will execute this case  one also the next cases which are there in the line.  It will not check for these values later.  That is why it is a must  that we make sure we write a break statement.  So let’s just try to execute this.  It asks us for the weight and add for when I add  for there is nothing that is happening  because there is no case for it.  So let’s try to add one default case and let’s try this.  1 comma 2 comma 3 that’s what is the message  that I will be writing.  So right here is 6 and it says  that weight is not in Bound to 3.  So this is how we make use of switch case  and that is why we write a break statement.  If I do not write this break statement  and you can just cross check it so I commend this.  Okay, and I add one so that it matches my case one.  Can you say that it has checked  written weight is one as well as weight is 2  so that means even the case to has got executed.  That is why I should be writing break statement.  Let’s move on to the next that is loops.  Loops are basically blocks of code  that are to be executed for a number of times.  If you want to do the same task number of times.  It is better to go  for Loops in JavaScript one of the most famous Loop,  which is also there in C and C++ and Java is a for Loop.  Which is also that in JavaScript,  it has three parts in its index the first part stands  for initialization the second part stands for condition  and third part for the updation.  Now, how does it work in the first part  when you write a for Loop it initializes.  So when the control reaches this for Loop,  it will first initialize a variable to whatever value  you have mentioned  if you can see it in the example here,  we have created a variable I  and initialized it to zero then it checks  for the condition.  The condition has to evaluate to either true or false.  So if the condition is true Miss now here is  value is 0 it is compared with subjects dot length.  What is this subjects here?  It is an array of this subjects.  So if you can see that it’s length is 3 and yes,  of course 0 is less than 3 that means the condition is true.  So without any problem for the first time.  Executes whatever is written within this brace bracket now  coming back after executing this brace bracket.  It goes to the third part in the syntax  that is updation.  So it updates eyes value now, it becomes Z from 0 to 1.  So it checks again.  Now the condition is one less than 3.  Yes, of course.  So it goes and executes the that again what happens is  that it again now  after executing the complete statement it goes here  for the updation now eyes value become 2 2 is less than 3.  Yes, of course, it gets executed.  Now the eyes value become 3 and 3 is not less than three.  That means the condition is not getting full field.  It is a evaluating two faults Boolean value.  So now it will come out of the loop.  This is how your for Loop will get executed.  Let’s try to execute that follow.  So what they have done is they’ve created  an array of subjects with three Chicks, okay,  and there is one more array which is a blank array marks.  So you will iterate through or previous  through this array of subjects  and you will ask user  for every subject to give you marks.  And once you give that marks you will add those marks  to the newer array Carlos Mark.  Sorry.  Let’s try to go ahead and execute that.  So we have an array.  Okay, call us subjects equal to let’s just try  this directly having here match see physics.  So now we have another array colors marks,  but it is a blank array.  We want to Traverse through this subjects areas.  We create initialization first  variable any variable say for example,  J is my variable which I have initialized  to 0 now G. It will go over this subjects array.  So I will write this subjects array dot length.  So till it is blessed  and length then only it should execute after that.  It shouldn’t and this is my updation.  So whenever J is value  is 0 I want it to ask for that particular subjects marks.  So what I do here is num1 secrete a variable.  And I initialize that variable okay parsefloat.  I asked for prompt enter marks for subject,  which is that subject subject is definitely  in the subjects array.  So I see here subjects dot g  so that means for the first time.  For the First Time The J’s value will be 0  so it will ask for max value second time.  It will ask for physics value.  So once I get these values I will update my maths array also.  So for Mark’s tree value, I will add numb.  So that’s what I will be doing.  Now.  Let me run this code we see what is the error for this?  I haven’t done it and 1 record is missing.  Okay.  Let me run this again so ask for math.  So I say 34.  I’ve got and physics I say 35.  I have got so my marks array has also got formed with this.  So instead of using this older for loop I can make use  of something called as a new will follow Carlos for in look.  What is this for in Loop in this  for in Loop you use for as the keyboard  and in the bracket you use in keyword now in keyword  has two sides LHS, and rhs.  To slept in side  and right hand side on the right hand side  of this Innkeeper word should be one array or anything  that you want to Traverse any list of things.  So, for example, I want to see whatever marks  that has got added.  So I want to Loop through this marks.  So what I will do I will ride  on the right hand side of in the name  of the array marks now every time I travel  through this marks,  I will reach its element 1 then it’s element  to then the third element  and on so I want to add that every element  to a variable and then use that variable in my code.  So that variable will be returned here cm is my variable.  So every time it goes  to the 0 the variable it will come in EM 1 variable.  It will devalue will come in EM again.  So let’s just see  if I want to see console DOT log marks.  Let us see how this will see.  It’s 34 in look.  What you do is  that you just take on the right hand side the list  that you want to Traverse  and on the left hand side is one variable  that variable will be every  for every iteration in the for Loop.  It will point to that current element element will always go  from 0 to n minus 1.  That’s what I have returned me to see  if this works for me.  It’s 45 God then I’ve got 45 again.  See if you’ll be marks  that is the name of the array and each index.  So that index will have the value.  So 67 and 34 so we’ll get both these values here.  Okay, so that is how my for in Loop works  for an in on the right hand side is your list  and here is your index.  So for every index in this okay, you can drop.  Okay, I’ll talk to that element of C that element on the screen.  So this was your for in and for Loop,  let us move on to the last two Loops that is  while loop and a do-while loop.  What is this while loop all about a while loop is something  as the name suggests  while this condition holds true it will execute.  Okay, that is what is do while loop.  This is slight difference in it.  Let’s see it here practically.  So when you write here a while loop you write  your condition here.  So as long as this condition is true,  this piece of code will get executed.  So whatever you write  in this place bracket will get executed  unless this condition is false.  Okay, this will get executed  what happens in a do while loop you can see  that your task to be executed is returned after do  or it is returned before only  whereas the condition is tested later.  That’s exactly what happens in do-while Loop.  So for the first time it just executes this code without even  checking the condition and for the second iteration it checks  if the condition is true only  if the condition is true then only this executes  for the second time,  but by default it will execute for the first time  that is the difference between while loop  and do-while loop.  So, for example,  I create a variable here as I is equal to 8 and I say  that till I Is less than 10 while I is less than 10.  Okay.  I want to execute this thing that console DOT log,  okay and eyes value now I is equal to 8 so I will be  forever lesser than 10.  So this Loop will keep on getting executed  in finite times.  This is called as an infinite Loop.  If you want to make it finite there should be a code  that will implement it slowly  and make it greater than 11 then only this Loop will break.  So let’s write the piece of code.  I plus plus here so slowly what will happen is  that I will become 9 then also 9 is less than 10.  So this will get executed slowly.  I will become 10 K.  Then 10 is not less than 10 so it will come out of this Loop.  So now currently eyes value will be 10.  Let us write the condition the same condition here I is less  than Then 10 and let’s write the same logic console DOT log.  Let’s try to execute both these Loops.  Okay.  So now can you see that 8 is less than ten.  Nine is less than 10  but 10 is not less than 10 still it has got executed and why  so because when ice value was then it came out of this Loop,  but it got executed in this  to while loop now the 10 it just takes 10 is not less than 10.  So for the second time I this do Loop will not get executed.  So that is the difference between while loop  and dowhile loop make sure  that whatever condition  that you put shouldn’t be an infinite condition.  If it is an infinite condition, your code will keep on running.  So this was about the while loop same example,  we have returned in while loop  so what we have done is why lies listed then subjects dot length.  We will ask for the marks in the subject.  Button will make sure  that I plus plus is happening increment is happening.  And we want to see marks of all the subjects.  And again, I lesser than subject dot length Okay,  and then you just write a message using an alert  you give this variable message  as subject is so-and-so  and marks you have received this one.  So so do-while Loop the syntax do change first.  We write do keyword then the condition to be executed  and then the while loop so after do is the statements  to be executed and after a while the condition,  okay, so in do-while Loop  without even checking the condition at least  once the block will get executed.  So as I said that what do you mean by function is bundling  together the statements  that you want you can put them a label now,  how do we write this function  a function will have a particular syntax.  If you follow that syntax then  only it will be called as function in JavaScript.  Uh script so let’s learn the syntax function has  something called as a keyword called dysfunction.  How do we write a function?  So we need to use the keyword function?  Okay, then the name of the function.  Okay, since it is a function.  It should be followed by this round brackets now  in round brackets,  you will send are something called as parameters  also call as arguments  and what this function will do  upon calling is your body of the function  which is written always in the curly brackets.  So this is basically the standard definition  of how do we write function in any programming language.  Now the key word may change here the keyword is say function  or the some key words  in other languages will change but  yeah, we use some keywords then the name  of the function followed by  this round parenthesis very new pass your parameters.  Which is nothing but input given to the function on this input  this function will work  and what work it has to do will be returned  in the curly brackets.  So this curly bracket, whatever we write within this.  Okay, it’s called as body  of the function by knowing this basic theory is get back.  How do we write functions  in JavaScript now functions a set of statements  or nothing but your function body  that perform a task and calculate something of value.  It is defined somewhere in the scope.  So we will learn about what our Scopes it is invoked  by a function call.  There are two parts you define a function and you call  that function definition is  like you just wrap it up pack it  and keep it whenever you want to use it.  You will call it defining  and calling are two different things.  How do we call a function?  So whatever.  Explained here is the definition of the function  if I want to call that function.  Definitely what will I do is  that I will use the name of that function  without any case problem.  It should be de to the same name as it is here.  Okay, and we’ll use this round parenthesis.  So this becomes calling of the function  and within this function,  you will pass if the parameters required,  so if you have defined your function with some parameters,  I will have to send those parameters.  Okay, if I don’t send the parameters  by default undefined value will be sent to the parameters.  So this is called as calling of the function  and the above part is called as nothing but your definition  of the function  what a function parameters a function parameter is a value  which is accepted by the function nothing but input  that is passed to the function.  Parameters in a function  call our arguments arguments are parameters,  which are passed to the function by value.  So whatever value that we pass okay to the function  during the function call our then copied  into the functions variables.  Whatever variables we Define I will get back  to that with a proper example before that.  Let’s complete our function definition here.  What is a return statement  every function should have a return statement in its body  which returns a specific value.  It’s kind of a must in your JavaScript.  If a function does not have a return statement  a default value is returned and the default value  that is returned is nothing but undefined.  Okay.  So this is  how you write your function you call your function and  while writing a function you should make sure  that you write a return statement  if you don’t then  by default it will give you I think God less undefined back.  Okay, how do we write functions in JavaScript?  Well, there are four ways of writing a function.  So on the way how it is returned  or Define functions are categorized in JavaScript.  So there are various ways of defining a function  various ways of calling that function Etc.  So there are altogether categories that are made are  for named functions Anonymous function self,  invoking function and Constructors.  Okay.  So let us understand  if you want to write a small function,  how do we write that function as a named function?  How do we write the same function as  an anonymous function?  How do we write the same function as  a self invoking function or as a Constructor?  Okay.  Now as you can see  that the terms they are self-explanatory basically named  functions are like,  you know functions having  Some or the other name Anonymous function means  they do not have any name self invoking function.  Now.  What is this?  As I told you definition of the function is different  and calling of the function is different calling is nothing  but invoking a function.  So the function  which calls itself is called as self invoking function  and final are you Constructor?  So if your Veil worse with other object  oriented languages like Java,  you would understand what exactly our Constructors?  Okay, so we will see each one of this category in detail.  First are your name function  a function should have always a unique name.  So if there are two 45 name function,  they all should have unique name.  Okay, you can once Define this named function,  you can call this named function at multiple places.  Okay, you can call them n times.  Ten times any number of times?  Okay, there is no restriction over it.  Okay.  So let’s see how they have defined a named function.  Let’s say the example the name of the function here is  if you can just notice function is a keyword in JavaScript  followed by add numb.  So it is the name  of the function followed by round parenthesis  in which there is a comma separated list  of some characters  of some variable names something like ABCD, whatever.  So what does this mean?  These are your parameters?  Okay.  Now you don’t write something  like wear a where be no you just write the name  of the variable so implicitly  one variable is already created with the name  as a another variable is created with the name  as be remember  that you never declare your variables in this parentheses.  You just write the name  of The variable the Declaration is taken care by the browser  or the JavaScript part.  Now follows.  Once the parameter list is created.  Then you go ahead  and you write the function body and the function body  what you write is return a plus b,  so which means  that whatever inputs are coming to this function,  you’re just adding both  of them and sending the summation result back  if this return statement was not there and  if I had called this function  at numb I would have got undefined is the answer.  Okay.  So let us see  how do we create a named function?  So we have our module ones example with operators  and data types with JavaScript.  Let’s create one Moon JavaScript now called as functions.  Difference that we will notice here is that yes,  whatever model ones JavaScript files,  which were added.  Okay, they will like this we had just added them  and after adding all the code in this JavaScript tag,  okay in our HTML, we just added them.  So whenever the control would find that okay,  the script has been added it goes to this particular file  and start executing from statement one,  but now we won’t be doing that way.  It is not the execution  that should start they’ll be some kind of Declaration  and then the execution will take place.  So what we will be doing is that though,  this is also a Javascript file.  We will not directly write  in the code that needs to be executed rather.  We will write all that code  that needs to be executed as a part of a function  and we will call that function instead.  So let’s try to create our first function  which is a named function and let’s see  how it reacts.  So the keyword that we need to write as function.  Then the name of the function is say add number.  Okay in bracket.  How many numbers do you want to add?  So A and B,  for example write the body part of it.  So in the body part  as mentioned one return statement is a must  so that’s what we have done.  So we have called this ad numb.  Okay, we have declared so declare ition part  has been done.  So only declaration will never call it.  I try to use this function dot JS and try to add it here.  So name of our file is functions.  So I’ve added the script file whenever this HTML  will get loaded even this file will get loaded.  And yes, I have defined this function.  So let me try to hit the So this is happened  if I just see in the sources.  Yes, my functions dot JS has got added.  But yeah, nothing is happening.  Okay, let’s try to add some console part here saying  that console DOT log Edna is called.  Let’s see if I get some console output.  And I see  that there is no output if I refresh also no output  when the last module what is to happen was  that whenever I used to load the script it  will just start executing no restrictions at all.  But currently what I’ve done is that these statements okay,  which I want to get executed.  I have clap them together.  Okay in a function  unless and until I call this function this  will not get executed.  Okay.  So once my function declaration is done now,  I will try to call this function.  So here I would send 2 comma  3 and this is a call to this function.  So I’ll just send this name  of the function followed by the parameters.  So here what happens now a is equal to 2  and B is equal to 3.  So if I just hit this now,  my console statement will get executed.  So now you’ll be like waiting for Unto like two plus three,  but that is what has returned as the value  but I have not logged the value as of now.  Neither.  I have caught it in a variable.  Okay, so let me log whatever is the output of this method.  Then I get it as 5  what if I do something like this, you know,  I don’t even say I just say a plus b  and I don’t try this return statement  and I try to hit it.  Can I see that I get the answer as undefined it is  because by default undefined value is returned  by this function.  So this is how we write our named function  and that is why we require our return statement.  I may also write take the value that is returned.  Okay in the some variable and call this method instead.  And now I can log this some variable.  So, can you see  that as many times I am calling this function those many times  this function gets executed  if I call it one more time.  Okay without any reference.  Again, the console statement will get executed three times.  So this is how we write our functions or rather.  This is how we write our named functions moving  to the next part of the function.  That is how do we declare Anonymous function  as the name suggests?  It is anonymous.  It doesn’t have a name now,  you’ll be surprised like if you don’t have a name  how we call it.  So sometimes we don’t require a function to be named  because we don’t want to call it again.  And again at that point,  we will not create any name for that function  or other JavaScript provides a speciality to write a function  without a name.  So let’s try to learn  how do we create Anonymous functions?  So since they do not have any name they can be used  only at one place.  Okay, when it is called immediately  after it is defined  or actual argument to the function.  Our function define is used as an expression.  It can be stored  in a variable past as an actual argument to a function  or can be return as a value by function.  This all points may sound Greek to you.  Let’s see the examples.  No, can you see  that a function has been defined?  So the keyword function exists only the name is missing.  But the rest of the syntax Remains the Same  that is the parameters of the function  and the body of the function.  So it’s perfect it is written.  So that means one function has been declared.  Well, there is no name.  So what we can do is we can assign this function  to a variable  so we have stowed this in the variable.  Now, if we want to call this function,  you can use this variable name  instead and using this variable name  if you want to pass any arguments then  Move add this paranthesis and add this parameters.  This is one way of doing it.  So you want to use it again?  And again, so the solution  for that is you may assign it to a variable.  So this is stored in a variable.  Sometimes it so happens  that any of your functions are defined in such a way  that one of its argument  or parameter is of the type function  if that is the case,  you may give one name of the function  or you may create a function on the Fly.  For example, there is a method in JavaScript,  which is a global method that we have not developed.  But JavaScript has given us this method  and the name of the method is set timeout method.  What does this method do it this method takes up  two parameters first parameter is a function to be executed  and second parameter is nothing  but a number That is time to sleep in milliseconds.  So what this function does is  that this function will execute its first parameter,  which is nothing but a function only  after some time is gone or some time is already ticked  and that time is your second parameter.  So this is how the settimeout function is created.  So in such methods vary in your parameters are  your functions you can Define your Anonymous function.  So these are the two ways you can create  your Anonymous function.  Let’s try to see it’s practical say the same function I create  Named function add name is called.  Okay, so here we will write a console log  saying that anonymous.  Okay now tell me something.  Can I call this function now the way I used to call  this function here by just using its name.  It is simply not possible.  So what do I do is  I add a variable here Anonymous function now,  I want to call this function.  So how do I go about it?  I just say Anonymous and this let me try it.  Okay with the variables as 5 comma 6 let us try to hit it.  Can you see  that the anonymous function is called what have I done?  I have created an anonymous function.  I have a sign its value to a variable.  This is how we can use this Anonymous function  or make it useful by adding it to the variable  as we have seen one example of a set timeout.  So settimeout is a function which is a global function.  It takes up two parameters.  If you just see here the two parameters are like function  and second is the Ali  that should take okay like after  so many milliseconds then only this function will get executed.  So either in this you can write this Anonymous function name  and the timeout say for example, 300 millisecond.  This function will get executed  or you can Define your function here.  As a part of this parameter sin this you can just have you  know a console DOT log.  Saying that it is non immerse function call  in set timeout.  Okay.  So what does settimeout will do when the control reaches here?  It will check that.  Okay.  It has to pause for 3,000 milliseconds  and after that it should call execute this function.  Let’s see if this works for us.  So after 3,000 millisecond then a call to this goes  so this is how we have return a function as a parameter  to another function.  So this is a second use of anonymous function.  So we have learned now two ways  of declaring a function one verse named function.  Another is anonymous functions moving on to the third type  that is Constructors  what our Constructors  basically in object-oriented Paradigm Constructors are  special functions,  and we have already used this Constructor before  when we had declared an array  while using your Constructor  or calling a Constructor you use a keyword  that is called as new this new keyword is followed by what type  of object do you want to create?  Now if you want to create an object of the type array,  then you would say new and array and you will make sure  that array word has a capital similarly  if you want to use  or create an object of the type function,  then you would use the keyword new  and the object that you want to create is function.  Right?  So F will be Capital now after declaring this function,  how do we write  its preceding like ride we ride its parameters.  Where do we write its body?  So everything is a part of that function  and that parent is is  that we write if you can see this in the example,  we have created a new function type.  So new function f is capital,  then you start writing your parameter list  every parameter you write is nothing  but the string value so as many parameters you want you  can write those many.  Names separated by comma  and at last you can write its body send the body  what is returned is return a plus b,  okay and a semicolon  so you can write as many statements  as you want as its last parameter  or its last parameter is nothing  but the body of the function this is as good as writing  like variable add function  is equal to function a comma B. Okay,  and your body has written a plus b,  so this is how you write your Constructor.  That means you’re creating a type.  So this is the syntax using construct.  Let us see it working using Constructors.  So you will have new then function.  And this is what you will be writing.  Now within this function.  We will have your parameter list.  Now.  If you have parameter list has got over right last parameter  as the body of this function,  you will not include anything like Curly braces nothing  within double quotes.  You will write the body of the function.  So if you want to write something like,  you know consoled not log.  in Constructor function Maybe it is double quotes  are getting ended up here.  Let’s try with the single quotes here semicolon.  Okay, and then you say return a plus b  so this is the body of your function return a plus b  and this function that you have created definitely.  It is an anonymous function that got created.  So you have to write  if you want to use it you will be adding it  to nothing but Constructor or any variable  that you will create now,  if you want to call this function,  you will just say Constructor  along with that you will pass the function values same  as you do for anonymous function.  You can log whatever is the output Off this function  all you can take it in another way table.  Okay, so I am in the Constructor function.  Okay, and this is the output in the Constructor function +  3 + 5 is equal to 8.  So this is the way to create one more Anonymous function  but using new Constructor.  So let us see the last way  of creating a function call is self invoking function  as the name suggests the function  that gets invoked by itself or a call.  You call yourself.  Okay, that is what is called a self invoking function.  Now, what is this self invoking function?  These functions are Anonymous functions,  which are invoked right  after the function has been defined.  You can execute the code ones  without declaring any Global variable.  No reference is maintained  to this function not even its return value.  Now, how do we write this function?  Is that you?  The function definition completely.  It is an anonymous function.  So like the baby right  are Anonymous function will be writing this  but after the function has got  over you will just call it to call it.  What do we do for a named function?  You just write the name of the function  and then to round brackets  if any parameters are required to pass the parameters,  if no parameters are required.  Then you don’t pass anything but calling  means writing that function name  and then adding or appending the round parentheses.  So that’s exactly what you will be doing.  You will just call this function  by just appending round parenthesis open and close  that’s exactly is called as self invoking function.  Okay.  So there’s a function like this say function  within which you write nothing but an alert,  but you want to call this function  so you will just write nothing  but 2 round brackets to invoke it.  Let’s see.  example here self invoking function So we have created  nothing but a function.  Function keyword you right here a comma B. Okay.  You just say  that it is returning a plus b and that’s its.  Your function definition is over now you want to call it?  So you just append nothing  but these two parentheses and in this parentheses,  you may write some value.  So this will be invoked to check  whether it is getting invoked or not.  Let’s just try to console inside.  And self invoking function.  This is how we write the self invoking function.  Let’s see if it works.  I’m in the self invoking function  and it has just called the self invoking function.  What is important is the round parentheses?  Okay, you may write it here  or you may just end it even outside  like the way we have seen in the presentation  so you can end it outside the call  or just before the call.  Okay.  So this as a complete entity,  okay takes up and after this complete entity  has been returned.  You can just write this round parenthesis.  Okay.  So all the four paths have been covered up  like how do we create a named function Anonymous function  a new Constructor function  and finally a self invoking function.  So let’s just go to the one more example  like to calculate the square of a number.  How do we calculate it so we can write here  as you can see create one Javascript file  that is to calculate square of a number in  that we can write a function.  Okay saying that it is a square of a number  which will return nothing but multiplication  to itself product of itself.  So that will give us the output.  So let’s try to use all those four types  in this calculating the square  of a number this was functions dot JavaScript.  Let’s create one more Javascript file.  Let’s save this as calculate square.  dot JavaScript So we will be creating nothing  but all four types of functions.  So let’s go with the first one named function here.  So the first function is function.  It is named.  So let’s write n  and calculate square it takes up a single number  and returns back.  Product of itself.  Okay, so we have already declared this named function now  it’s time to call this function.  So let’s just try this console DOT log  and just write a statement calling named function and let’s  just call this function.  Well along with this function.  We will send a value.  This is they’ve created a new Javascript file.  We need to add it in the script tag.  So let’s just comment.  This one as will be confused with the output that we get.  Let’s just add one more script tag.  See the naming convention whatever you have used is  right try to load this file.  Okay, and once you load this file,  the function gets called and you get the output okay  now to call or to create one Anonymous function,  so let’s just create an anonymous function call us.  Just take a number say p  and just return back B into B. Make sure  that you assign it to a variable C E calculate.  So this is how we write Anonymous function.  Try to call this with a console Dot Lock here.  You will be calling in non Ms. Function  and call this variable instead  and to this variable you give a value say 6 let us see  if this gets called then on Ms. Function  is also getting called.  So let’s try to calculate square using new Constructor.  Okay, so to calculate your Square using Constructor,  what are we use is a new keyword that  the function f Capital now everything that is  to be returned in the function made be body or the parameter.  Everything should be pushed.  Okay as a parameter.  So first, let’s write the parameter list will  how many parameters do be required is  just a single one.  So add a parameter then the last parameter will be  nothing but the body  of the function  so you’ll be riding return a into a so this becomes the body  of the function.  Okay, and this is your parameter  since it is an anonymous function.  Let’s just Market or add it or assign it to a variable.  Let’s try to see in the log whether it gets run properly.  So you write a message calling Constructor function.  And let’s just pass a value to it.  Let’s see if it gets called properly.  So we get calling Constructor function 49.  So this is how we call  a Constructor function and let’s go to the last one  that is self invoking function to create the self  invoking function first you create your function  with F small as always only  in the new Constructor f is capital you add  the value whose square you want to calculate.  Okay, right.  Its body.  See a function is now ready.  So you want to invoke it so to invoke it definitely you  will be calling itself by passing a value 9.  Okay.  So let’s try to write in the body of the function.  Okay, man console statement.  calling self invoking function So this is  how it looks this is your function  and this is the body of the function  with its first statement,  then it’s second statement and they’re here the body ends.  And this is where you call the function.  So let me run and I get the final function as well.  And since it just Returns the value  and it doesn’t even write the output.  Okay, what we can do is we can write here the output  or we can write this complete function in console DOT log.  Okay, so simple program  but you can use for different ways  of writing functions as  and when you require need of any type of function,  you can use that if you want name function,  you can go for it Anonymous function.  You can go for it new Constructor.  You can go for it  and self invoking function you can go for it.  Okay, so that’s  where we complete the Practical part of functions.  So we will be now moving towards memory management  in JavaScript as we can see  that the function  how it is returned here is a created a squared function and  that JavaScript is linked in this HTML  and to execute this function we have used alert box instead of  console DOT log in the example,  which we have seen.  You can also use something called as alert.  Okay, and then you calculate the square of a number.  Okay and just display its output on this.  Eddie what are closures are it is an implicit permanent link  between the function and its scope chain  as I told you we won’t be able to see  what exactly is a scope chain,  but there is something called as a scope chain  that exist which means  that to which outerscope it  refers to a function definition hidden reference is  what is scope is okay.  It holds the scope chain.  It is used and copied as  an outer environment reference any time.  The function is run.  We saw an example of closure in the previous slide  where local memory of f is not garbage collected,  even when there is no way to access F.  Let us just see a small example here  that will help us to understand closures.  Okay.  So I’ve created a function the functions name is it is  an anonymous function having a variable.  So this is variable  which is declared in this function.  Plus it has one more function,  which is return back the same way.  We had function G,  which was returned bag by the function.  F similarly.  We have one more function here,  which is returned back and it can access the outer scope  that is counter.  So same example  as that we have seen but just some name changes.  Now this whole function is added  to a variable add like the way we had my G variable.  So that is what I have added.  I’ve sailed invoke this function  and whatever will be the output will be added  to this variable add.  So let’s add this closure dot JS to my function HTML file.  Let us re load this file.  Let’s in the sources closure has got added.  So we have a variable  which has self invoking function.  Now, the function has a variable  of its own and it returns another functions output  and that function actually uses the function  that is defined the outer scope.  So let’s try to call this add function.  Okay in this add function I can see  that initially the counter was Zero.  I call it.  Once again.  The counter is still increasing.  Why this has happened me try to see this?  And show you this closure.  The something Carlos scope  which has a closure within it and closure has all this data.  So now we open up.  This is my outer function  if you just imagine it to be a universal set.  Say this is my outer function.  Out of functions will have some memory some variables.  Okay, and this outer function actually returns back returns  back one more function.  Which is an inner function now,  this inner function uses the variables  that are declared outside.  Okay, and this is what gets returned.  I make sure  that this outer function is referred by one Global variable.  A global variable  which points to this outer function since such a scenario.  What happens is  that and whenever I call This Global variable,  I will call this function for the first time.  So see if this value is 0 now.  I call this function one more time at that time.  What happens is  that the control directly jumps onto this inner function  which takes up the value which was existing here a 0.  Okay.  Once it becomes one it will take that one value.  It will not again remake it as 0 so it’s not a start  from the outer function.  Why because the scope of this points to this one?  Instead of outer function now.  Okay, so that’s what has happened here.  If you can see that the counter has become 8.  So every time I call this add function the counter  will increase Why  because whatever is the newest change,  okay that gets added to this cope this variable.  You can imagine this variable to be not a part of this  and it gets copied here.  Okay, and every latest value  that has got changed it gets incremented.  Okay.  This is how closures work.  So when you have a global variable pointing to a function  which in turn returns 1 inner function  that excesses the outer functions variable,  then those outer function variables become a part  of that inner function  and they don’t get initialized  every time you call this Global variable.  This is a closure you can create something  like variable name and get that data here.  But now one more variable will come up so variable H.  So some age will be put in say variable address.  Summer dress will be put in.  Basically all this data logically if you think  about this data,  it belongs to a single entity may be a user  or a person we will call it  but we have three different variables.  Now, if you go to use array,  then it is nothing but a collection  of homogeneous data type.  So if you have many names you can put together  and create an array out of it.  Okay, but in case you have different different type of data  and logically it represents one entity  then JavaScript helps you with something called  as Json object stands  for JavaScript object notation or in simple terms an object  can be created using JavaScript  so I can put all this data  under one name and that’s what an object is all about.  Okay, and we will be learning also about event handling  what is an event.  There are many events that do take place.  When we load a page.  We have a button upon clicking one event gets generated  when I type into an input box one more event gets generated.  So there are many events that get generated.  So being a smart developer why shouldn’t I take an opportunity  and taken advantage of such events on occurrence  of certain events.  I can do some task.  So that’s exactly what we are going to learn today.  How do we create an object as I told you object?  Nothing, but it is logically all the data  that belongs to one entity is put together under one name  and there are around almost six times we  can declare an object  or we can create an object now one more thing  as we speak about object object in any language,  maybe JavaScript,  maybe Java or may it be dotnet or any language  that we work with objects usually are something  real life entities and we have some specific parts  that are declared.  So let me just explain you  that Basics once an object has something called us properties.  What up properties now?  If I say that human is one object.  So human has many properties  like he has eyes tongue nose hands legs Etc.  So whatever the entity possesses  or whatever the entity has becomes its property  in a second part.  It usually have something called as methods or functionalities.  Which means that  what that entity can do properties is  what it possesses and what it can do forms its methods  so human being can talk human being can walk  can run can do programming.  So all this becomes its functionality.  So this is what all it can do.  So basically you have two parts one is the property  and other is methods.  That’s how you should be designing your object.  So the ways of creating this object we will see now  in a short while now we will tell you  that properties whatever property and entity possesses.  Usually you can access all those properties of that entity  or that object.  How do you access that property using a DOT notation?  For example, if a human being has,  you know name as one property so  for this object whose name is Newman you can use  this name property using human a DOT operator a DOT operator,  which is a must and then the property name.  So using a DOT property you can access all its properties  that is what is very very important.  Okay.  So without taking a minute, let’s learn.  How do we create our object?  Okay to create our object like the way we used new operator  while creating function  we can use this new operator to create an object as well.  So as I told you  for anything you have to declare that variable with a keyword  as we are so that rule also is strictly followed here.  So if you just can see in the example,  we have created a variable whose name is person  and using this new operator we Then object so perfect  using this first line of code.  We have created one blank object.  Now, it’s time to add some properties to it.  So what we can do is we  can Define person dot name is equal to say Saya.  Okay and age is so  and so so we’ve added two properties to this object.  Okay, let’s try to create this object.  So let’s create a new file.  Let’s save that as object dot JS.  Okay, and in object dot chairs,  let’s try to create an object using new operator.  So whenever you use this new operator remember that  if you use it for function or an object make  that f&o Capital that is what is very very important.  So let’s try adding is property saying that.  C designation is a trainer.  Okay person dots a phone number  should be something like this and number so yes,  I’m my object is totally ready.  I have created an object here.  Okay.  Now if we want to push all this in a functional  so that is also a great idea something like,  you know function create person.  If this is my function a named function,  I can just put all this data in this function.  Make sure I indent it let me see.  So my function is ready here.  I can call this function now.  I’m using this function.  I can create a person.  Okay.  So in this what has happened is this function will return  me back flippers definitely and I can take up nothing  but It’s like a factory I have created.  So whenever I want to create an object of the type person  the disease as the properties,  I will call this create person method.  So that’s what I have done.  Let me use it in my HTML page.  The name of the file is object dot JS.  Let’s first see whether it gets.  Called.  Yeah In the sources, is that got attached?  Perfect.  So I have not printed anything  so I can just say console DOT log her and just say  that whatever is the value of this variable.  Let me print that and yes,  I get the object completely with designation name  and phone number  and it’s type is nothing but object.  So this is how I have created my object using new operator.  So instead of this new object  we can just write this two curly braces  and it will work the same  because instead of writing new object.  If you ride just this two curly braces,  that means you have created a blank object.  Okay the type  if you just type in type of person it will be  always an object  because you have initialize it to a blank object  and similarly you can give an attribute to this object.  So maybe you can just copy this.  And say person to wear any voted doing is using this object.  Okay, and here you will just write into and the same thing.  Okay, the same variable will now point to create  person to function.  So that’s what we’ll be doing.  And if you just type in the same thing  and now it is pointing to Cody to so what is the change  that has been done is nothing  but we’ve created a person using this brace bracket.  So the Third Way of creating an object  so you can use the same way  that is using curly braces create your object  but giving a property to that object.  Okay, not only use a DOT notation,  but we can use something called a square brackets  like the baby use for arrays and within that in single quote,  please write your property.  So this is the second way of adding your property.  So now let us try to create the Third Way  of creating a person.  The name would be 3  and here instead of this dot notation.  You would be typing in something like this.  It’s like name you would be typing in here designation.  Okay, same thing phone number.  Okay.  So this is one more way  of writing it you can also write something like this.  You can create an alert saying that okay,  let variable gory point to this third function.  Okay, and let it have Cody 3 as the name  and I want to now excess this name.  Okay saying that it is  the name attached the value then using concatenation operator.  Let me write its designation attach the value using  the object name.  Then the phone number.  So this is  what all the data instead of doing console DOT log,  let me see  that if I get the alert of this so let me run this  and I get the alert saying  that name is Corey 3 designation is so-and-so  and phone number is so and so so we have seen  that the alert gives us all the details  so we can see all the details using console DOT log.  Okay.  Well we can write that console DOT log  in the J’s file of ours or directly on the console.  Okay.  So here we can even type in like this.  And type in Gori it will give you the thing.  So you need not write here console DOT log  because actually I logging onto the console.  So just type in what you want to lock  and it will give you the result.  So these were the some ways  of logging and this was the Third Way  of creating your object  while we just saw that two ways  of creating properties One is using the dot operator  and another was using  the square bracket now instead of creating a blank object  at the start we can fill in all the property name  and the value of it like this separated by a colon.  So every property doesn’t have coats it is the property  whereas the value has coats  if it is of the type string  if it is the number directly the value,  so let’s just see this fourth type  of creating an object.  So here instead of this,  I’ll be creating an object like this.  So name is the first property.  You can just type  in 4 comma another property CH 60 then say designation.  Trainer, this is also a comma and phone numbers.  I’ve created an object like this directly  while declaring this object.  So initialization  and declaration has happened in one statement.  I’m returning that person here.  Let me just say for and let me now see  if this works for me.  So online whenever you’re ending that object do not write a comma  or any semicolon.  That’s a must Now,  let’s see what variable gauri has  it has 40 ages 60 designation is tray now.  So basically here it just renders the value based on,  you know alphabetical order age designation n  and then P No Object creation using a function now  which we have already done  but a bit different you can create something  like a function  which creates an object  but how the function will have a name it will be  definitely a named function  and what will be the body of that function will be nothing  but the properties  of that object now properties of this object  will be always preceded with a keyword called as this  and what is this means this means the current object  that you are creating  like the way we have in many object-oriented languages  called as a Constructor,  so If anybody’s a Java developer,  they would directly feel that.  Okay, this is something like creating a Constructor  so you can create a Constructor  and that Constructor is nothing but your function in JavaScript  where in you create the name of the function and the body  of the function will have all its properties in initialized.  So all these properties will always have a keyword  this which means  that the current object that you are creating this dot name  so current object  which you are creating just add a property name  to it the current object.  You’re creating just add a property H to it.  So once your Constructor is ready your object  isn’t get created  unless this Constructor or the special function is called  and to call this special function you have to use  operator Carlos new so new  and then the name of the function simply  if you just call this function,  it will not create an object you have  to Use the keyword new for it.  So let’s use this create our Constructor function  The Constructor function is a simple function maybe  with the name as this dot name.  5 semicolon then this dot designation.  Trainer this dot h something like 90.  So you have this function ready.  Now.  I understand that after this function is ready.  You have to call it only using the new operator.  So your variable Corey will have something like new person.  What if you just see it gives you a tie forward that okay,  whatever you have declared right now is of the type,  you know class  and you can create an object out of it the class object concept  because you’re using the operator new here.  So this will assign it the newer values  if you just see  if this is working for you and you type in Gori here.  We’ll see that yes one more object has got created.  Okay, that is person with these values.  Okay.  So let’s just see the next way  that is sixth way of creating your object.  So using nothing,  but the type object dot create method.  So you’ll be just creating an object basically  and the object would be like using brace bracket.  You have just made one object.  So here if you see in the example,  the object variable name is animal which has  property typ type has a value in It now it has one more method  that is displayed.  So that’s the way we will be now getting introduced  to how do we add method  to an object same as that of the property?  You just have to write the name.  Okay, that is the method name separated by or assign  it nothing but a function so display type is one method.  Okay, which is assigned to a function and  what that function does is nothing but it just says  that it gives you an alert  that the type is so-and-so this thought type  so it accesses all its property  and gives you the Valium Now using this particular variable.  I can just say variable animal  and display it it will definitely give me an object.  What if I want to create  using this variable more and more objects.  So using object that is witho capital.  Okay this Regular object dot create method  and to this create method we give this variable name.  It will create one more copy of that object.  If I want to create one more time call  this create method one more time and you can change the property  as you want.  Let’s try to use  this object dot create method to create our object.  So what it says is it has created nothing  but a variable say animal  which is equal to Pure object creation.  So in which it is said  that type SQL to invertebrate this is  how we have returned its property comma now,  we want to write something called as a method of it.  So let the method be  like this initialize that method to a function and  what that function does nothing but alert the type of it.  type is What is the type whatever is the type  of this particular object?  It will be typed  in so current object is always denoted by this keyword.  So this is a function  which you have added to this display type.  So simple as the way  we have created here name age designation.  Okay all property separated by a comma similarly.  We just added one more property name,  but to that we initialized it to a function like this.  Now if we want to create many objects using  this this particular prototype,  how do we go about  so I can create something like variable  say horse.  Is equal to I want to create eight of the type.  Animal, okay.  So I use something  as object dot create method have created a horse  using this animal type.  Let us see if this works for us and let me see  what horse has.  So it has object of the type so-and-so and it’s  type value is this  whereas display type is a value which is a function.  Okay.  It also has a Constructor it also has you know Scopes  and it’s type.  So this is what gets created  if I just type in so I get its property.  Okay, that is type and display type.  Okay display type is a method  whereas type is one property and this  is the extra information in the Prototype object  that we have.  So as many now after creating horse Okay,  I want to change its type.  Definitely.  I can go here and change its type to something else.  I can type in like this just say and sea horse.  Value has already changed.  Okay, so that is what is important  that I can definitely go ahead  and change its type whenever I want or using that object.  I can call its method also.  Okay, I can call its method  by using this object which is like dot display type  since it is a method.  Let’s call it.  So I will say and type is something else.  Okay.  So this is how using  object dot create method you can give a prototype.  Oh can create as many objects  as you want and later on change its properties  College methods Etc.  Like the way we do for other object oriented languages.  If you want to create an object and after creating an object,  if you want to delete any of its property,  then it simple there is a keyboard cordless.  Delete OK and will delete  that objects property like the way we have here  a person that object is got created.  Now, if you want to iterate through every property  of this person,  you can use our for in loop as I told you in the in operator.  If you’re using on the right hand side  of the in operator you write the list  that you want to iterate through and in the left hand side  will be its index.  So it’s index here are nothing but  In age weight Etc.  So that’s what comes in the properties then OK  and delete one of its property and then again just see okay  after deleting the property do we have all those properties  still there or not?  So let us try to execute this piece of code  that we have.  So we have here gory as the one person.  Okay that got created.  Even we have here person.  Let’s create one more object.  variable trainer equals  to this So variable trainer has various properties the name  of the trainer CABC comma subjects maybe subjects is  nothing but the array is it takes up Mac.  Okay, then say physics  than chemistry something like that., then teaches maybe  teaches is the one property it teaches who all  okay.  So maybe you know first years then you know,  second years only two years  it takes up age is one property 60 so  and so this is a variable or this is a trainer object  that got created.  Okay, if I want to iterate through this trainer  and I want you to write console DOT log all  the properties that it has.  Okay.  What I can do is,  you know to get the value of this property.  I can just say trainer dot name printed  or subject in a DOT teaches trainer dot each.  But if I just want these values like all  the properties it has four we can do is you can use something  like a foreign Loop for foreign Loops AP is  in okay this trainer Create a variable called  as property see  and to this property you keep adding nothing  but this value P.  So while adding the speeches add a space the way we  have added the space just a space is added here.  Okay, so that every property is separated by a space  or you can have a space as well as one:  so that will make  it neater and let’s try to log these properties  that we have.  Let’s see if this works for us.  I run this.  So firstly it has named then subjects then teaches and then  H so previously the value of properties is undefined.  Right?  So then only after undefined it gets something like name  so you can even make it like, you know null or something.  Let’s see that undefined goes off or not.  It gets null as the value or it should have something  like a blank a blank string here you get an eater output.  Okay.  So let’s try now deleting a property.  delete trainer dot h Okay,  so that’s what we have done use the keyword delete  and then using the name of the object dot the property.  Okay.  Now let us see after deletion.  What is the value in that properties?  Does it change or does it remain the same?  So this is before deletion?  And this is post deletion.  The name is Trina.  You can just copy this here  so that there won’t be any problem.  Now after deletion in the property.  We haven’t gone through the loop of this property.  So whatever was there in this variable has remained  as is after deletion.  If I go through the same thing as that,  so let me now see what comes  as the output before that let me just clear this properties.  Let me again initialize it to blank value.  Can you see that after deletion?  The age has gone so  in the properties it doesn’t remain so this is  how you can delete a property of a variable.  So that is where we have come to an end.  How do we create an object?  How do we access its property?  How do we access its?  It’s that are given to us  so we can change all these properties  using the methods.  We can Define some methods  within the object to change the properties.  Like we had type we had a method display time.  We can have one more method calls change type  and in change type we can just change its type as well.  So we can alter all the property using its own methods also.  So this is how we create an object.  This is how we create properties of objects.  And then the methods  of the object now after learning this bigger topic like objects,  there are some objects  which are ready-made given to us out of which we have already  seen an object College document  which is really made given to us.  Okay, we haven’t created  that and that document object has many methods got defined  which we’ll be covering  at the end of this session similar to that.  We have one more object.  That is also given by the browser to us.  And the name of the object is vindow object,  which is also called as browser object model.  Let’s see it hierarchy how it looks like so  if you want to do something some changes related  to the window, you see?  Okay currently when you open up your HTML you see a window  right now that window  if you want to alter something do some changes to this window.  You need to have some apis with you  that will help you to do that by a pi.  I am and some methods  or some means to do some alteration to that window.  So here it is.  We have a window object ready-made.  Okay at our doorstep using this object we can do a lot  of changes to the window.  We can see on a screen.  Let’s understand its hierarchy this window object that we have.  Okay has many other objects or you can say some children  which are us Ciated with it  like there is a location object which we can access.  Okay location object basically is therefore, you know,  locating your window allocating one of your element Etc.  There is one more object colors history object,  which is also there in association with window.  Object is document object.  There is Navigator object and Screen object  if you can think about it, okay,  you just have to visualize it  like this as window is one bigger object,  which is there with us.  We have many properties  which are associated with it something like,  you know location.  So this is one property with it then document  is one property with it then history Navigator and screen.  History is one more property of Windows object,  which is again an object.  Okay, Navigator.  Okay is one more property which is again an object.  Okay and screen is one property which is again an object.  Okay.  So to access these object,  what you can do is  either you can use your window object dot its property name  or simply the property name also will help us  because that itself is one more object  that has got created.  So this window object has these many properties now again,  if you just go to see the document object has many  of these properties like it has an images object.  It has a form subject it has,  you know links object so you can imagine it to be,  you know, something like this  which is again an object having its own properties.  When you have something like form subject,  okay, then image you subject and so on.  Okay.  So this is  how your windows object will look like and this is  how its hierarchy so let’s get into details  of each of this object and understand its basic working  how it works like and what we can do using these objects or  how it can help us in the look and feel of the application.  So basically browser objects are nothing but your Global objects  by global objects.  We meant we haven’t created them.  They are ready to use given to us by the browser  or the JavaScript you can think  of they are available throughout your code.  It won’t be anywhere.  They are not available know they will be available throughout  so the scope is throughout your JavaScript  then browser object model allows JavaScript code to interact  with browser properties  and images shown below.  Which is nothing,  but the hierarchy of window objects  main object is window object.  Its properties are  location history document navigate a screen document  again is more properties forms images and links.  Let’s see the first object that is window object.  So the first object under B om object  that is window object like a root object  that we have it is again,  a global variable and whatever methods  that it has we can call all those methods to learn  how a window looks like how we can move.  How can we resize it?  Okay, so we can do all this with this window object.  Like if you use  window dot open method it will open up a new window  if you use window Dot close method it  will close the current window.  If you use something like move to so your window,  we’ll just move to another location.  But if it is a full screen,  you won’t even realize that slightly.  It has moved  if you just adjust its height and width.  Okay and make it a small window then it’s moving property.  You will be able to notice you can resize the current window  and you can do a lot more with this window object.  Let’s try a few things that will give us a Hands-On  on what exactly window object look like.  Let’s create a new file saying that P om objects.  Okay receive this,  um object here the save this file  with DOT JavaScript extension.  So having this be om object, okay,  you can just say,  you know window  this object is readily available and there are so many options  that we have.  You know, there is one alert function  that we usually use right and we use it directly.  Basically.  This is a function with window.  Okay using this window object.  You can call this function.  This is a method defined in the window object,  but we can basically use it.  Why can we use it because window is the object  that helps us to call all these methods.  We need not always use this object.  You can directly use its properties.  You can directly use its methods  without using this window dot thing but let me show you  with window dot as the syntax OK  if I just say window Rod open.  Okay.  So this is my JavaScript.  Okay.  Let me add this JavaScript to my HTML file commend this  and kill add a sauce So this is B om underscore  or small objects not script.  Click me run it once again.  Can you see that it has opened up one more tab here.  So that is what has happened one more window got opened up  if I write it in a neater way  that is if I tell what all things I need here.  I need a blank window then I would that is  nothing but the URL I don’t give any URLs.  It’s a blank URL then I would like to give it a name saying  that a new window.  And model features.  I need to add here if I want to add something  like hide should be equal to a hundred,  which should be equal to 200 C.  And that’s what I want to do several to open  up a window of this style.  So let me now.  So this will definitely give me a window of that type.  Let me just add a variable to it say new window.  Okay, so this is the new window  that got created using this new window.  Dot if I use something  like move to I try to move it to another place like this.  Okay some location I gave with x and y axis.  Let us try to see if this works for us.  We have a pop-up blocker understand  that always allowed this pop-up blocker.  You can see a window  that got created and it has come up always with something  like you know there  if you can see the window has already got created  so it will not create once again  if I close this then only it will create one more time.  Okay the size also it has taken up a small size  if I had given up a URL here  likes a blue double HTTP colon slash slash w dot  Let me try this.  So it would have opened up nothing but Google for me.  Okay.  So this is  how your window object looks like whose methods you can use  to move that window to open up  a new window to close the current window you  want to use the window whatever that window has got created,  right if you want to close that window  so you can use this close method to close the window.  So let me see.  It has even opened it and closed it also.  Okay, if you want to close the current window,  which is going on  so you can just save window Dot close.  So it is close the current window and gone back  to the older window.  So this is how you can use window object  and you can do some window related operations.  So let’s put all this in a function  so you can just save function window operations.  Okay, and within this you  will write all this functions or whatever executable statements  that you want to write.  And whenever you want to use this window operations  then only you can call this window operations.  So every time now it will not be called.  So if I open up this new DOT or first dot HTML  in Google Chrome seat is not getting close  because I haven’t called the window operations.  Okay.  This was about the window object that we have.  Let’s move in ahead.  What screen object now  as I told your screen is one property of window object.  Yes, definitely you can use window dot screen  but directly the screen as well you can use  when you use directly the screen object  implicitly a window object is attached to it  because the current object that we are working with is nothing  but window there is no need of writing this window explicitly.  It is the current object that we are working on.  So it’s properties you can directly This  so you can use the screen object.  You can just you know,  we will get what is the width of the screen current screen.  Okay current screens height you will get you will get  it’s available with okay,  that is nothing but the width  that you can see excluding the features like,  you know, taskbar and all that available height for you.  What is the color  that it has or whatever pixel depth it has so all these values  you can get using the screen dot with and all these properties  that this object screen has now  you can even get the values you can even set the values.  Okay.  So if you want to set some color you can use  this color depth and set it  you want to set the height  you can use this High property and set it.  Okay.  So if you want to see  what is the detail of the screen?  Okay, you can write something within the script  like I want to see all these values, you know.  This particular screen.  Can you help me?  So using the screen object?  I can just see all the values  that I have I can either do okay something like alert  or I can even directly write  here something like screen dot say available height.  And it gives me the available height.  Okay now here  if I just assign something like you know or color depth so  color it now in the elements you have this body tag.  I just change its color the background color.  Maybe say equi.  So change its color.  Let me see  if that gives me something the depth of the color  but screen dot just the color.  Is there anything there is only depth of the color  that we have.  So the depth is one number like what is the depth  by which it is giving you that color will see these Styles  when we look after Dom elements and every element of it.  Okay.  Now this is basically for the screen of it.  So available height is let’s see and what is the normal high  that we have height?  So we have Total height of 768  but out of which some height is taken up by this task bar,  since it is taken up by this task bar.  We have available height of seven twenty eight.  So around 40 it has been taken up by these taskbar.  So this is  how our screen object will look like okay screen object  will have certain width as well.  This will be it’s weird  and if you want to see available width Okay.  So total with we  all have complete weight available with us.  Okay, only the height is covered up by your task bars.  Whereas the width is completely believable.  So this is how you can use your window object.  You can use your screen object to get your data.  Okay, what’ll data it has  if you just concentrate on the screen object C is apis  you will be able to know  like you will have certain methods also  on the screen object,  you know to set something or you know to set some values  or they’ll be a lot of things that will be available.  Okay, so that you can work around  and you know get in details of the screen object.  Okay, let’s move on to the next window object  that we have that is a navigator object now,  basically this Navigator object  that I have it is supposed to give me all the information  about the browser.  It so happens  that this information is not that reliable  as I’ll show you what all output it gives us.  But yes JavaScript has made us one object,  which is available with us.  We have to do a bit of work around,  you know together right answer from this Navigator object  like screen object.  It also has many properties the properties are like,  you know app name  at codename the platform on which it is running  whether the cookie is enabled or not.  What is the product of this particular Navigator Etc?  So all these properties are associated with this Navigator,  let us create  and sea water properties it has so I’ve just shown  your screen property on the console DOT log,  so as to just tell you  that okay, even on Console you can see the properties you  can use this functions and JavaScript as well.  Okay, so there are two three Is  of using any property so Navigator properties,  let’s create this function in this letters.  Use Navigator object dot app code name  so I can use something like document dot write.  Okay is a method  in document dot write wherein I can write it code name  so I can write something like,  you know with a break and the code name.  Okay.  Let me see if this function gets called here.  So to call this function I will have to first call it navigated.  Okay, so it gives me the answer to my value  that is app code name.  So after knowing application code and app name,  let us save on what platform or on what operating system  does my browser work on OK to see  that let us type in platform  and using the Navigator object get its property called  as platform run this and I understand  that it is Windows 32.  So it is working on window platform will see  whether the cookie is enabled on this browser or not  and also its product name  whether cookie is enabled Just in case  if you are feeling that okay,  whatever is the property I have written it rightly  or not to test.  The best place is here in the console.  Use your Navigator object.  Okay using this Navigator object,  you will get all the values which are there.  So you will also get something like cookie enabled now  if you want to again check the right answer  rather write it properly just  say navigator dot say cookie and use it.  So using this you can directly use the value  that you have typed in  and you can type it in your JavaScript.  So that will make you sure  that you have used the right Spelling’s  because always browser gives you type forwards.  So in case you are using notepad and not some great ID,  this is a great trick that we can use  whether cookies enabled or not.  And what is the name of the product?  So the product  that I find here usually it is an array that we get.  Save it and let me try to hit it.  Okay.  Sorry, it is just the product name  that I get here.  So cookies enabled.  Yes, the product  that it is using is Jayco does the most  of the browser’s will use the same thing.  So if I hit this particular URL in another browser probably most  of the applications have same values,  so we’ll be able to see more Testa answer.  Okay, so all the values on different browsers May differ,  but internally,  they must be using the same application.  So that is why we get these answers.  There’s something called as user agent as well of Navigator.  So Navigator dot user agent is one more property that it uses.  Okay, and you can see  that it is giving you a series of all the user agents.  If I type in the same thing in say Mozilla  if I want to type in okay  in the console so you can type in Navigator dot user agent.  Okay, so it just gives me  like it is using Mozilla Jayco is the product.  Okay, and Firefox is the company  but for Chrome it gives me these many values  that is why this Navigator object I told you is  not so reliable.  So if you want to find out which browser  on which it is working, okay,  may you have given this JavaScript code to one user  And that user is opening your code in some of the browser  and you need to know on which browser it has been opened.  Okay, then you can use this property of navigator.useragent.  But smartly you will have to type in if this user agent  whatever array that you get  from this user agent has Chrome word in it.  That means it is a Chrome browser.  If it doesn’t have Chrome,  then you go for the else statement and in else you check  whether it has Mozilla,  you can try such a piece of code  in many other browsers and see what all difference is you get  and accordingly you just type in your code to test on which  browser you’re user has opened up your file.  So that’s what is the important test case  when it comes to navigator object in JavaScript.  So let’s move on to the next object  that we have in line.  That is location.  Object know what is this location object all  about Like any other object location object  also has some properties  that’s like H ref hostname path name the protocol  that I’m using then  if you want you have this method called as assign method okay  in which you can just assign some more URL  and open up another you are all in the same window.  Basically whenever I say location it refers to nothing  but this location it is to work with this location.  So whenever I talk about location object,  it is nothing but the address bar I’m talking about.  So let us see what this look action object has to say  about Save this location object.  Let’s always make it a habit since we have learned functions.  Now, let’s always put everything in location.  Okay location properties.  So this location property we can use console DOT log  to log all the properties.  So currently what is the address bar  that you want whatever is the output of this address bar is  what you want.  Let me just say what I’m printing here.  Okay it schref of location.  That’s what I want to see so I’ll use this location object  and print its H ref property.  I’m going to call this method okay,  either I can call it here  or I can call it in the console as well.  So I have this method colors location prop  then I call it here.  Okay, so it gives me that okay,  so and so is the H ref that is getting cold  so I can Define my methods here.  Okay, and I can call them on the console owes just to test  or for that matter.  Okay.  I can even type in you know,  this complete function on this console.  Okay, and just say property 1 so this is one more method  that I have created and I want to call this method  that I’ve got created just by seeing this  so add the runtime.  Also.  I can write some JavaScript using this debugging  to as much as possible.  You should try to use this debugging tool  that helps us.  Okay.  So location dot h ref will give you  what is the current address in the address bar moreover.  It can also give you something like you know,  who’s the host?  Okay.  Currently, there is no host.  It is nothing like,  you know localhost I have returned  or I have written or anything.  What does Protocol it is using file protocol, right?  So it will just see what is the protocol at his file?  Okay, because currently the protocol amusing is fine.  Okay, if I open one can try to inspect here  and type in something like,  you know location dot host  that I’m using it will give me this is the host.  Okay, the protocol I’m using is http.  HTTP okay, so this is how I can just make sure  that what is the address bar present here?  Okay more things like path name the complete path name  that you get  if you want to assign another value to this  so you can just say location.  In this location you can just type in dot assign is a method.  Okay, and in the method say for example,  I want to type in.  And  Let me see without the protocol it opens up or not.  No, it doesn’t.  So, let me put the complete URL  with the protocol HTTP colon slash slash.  Yeah, it has opened.  So whatever operations you want to do with this address bar.  You can use your location object for that.  Okay.  Now come to history object.  History object is a beautiful object  which will keep all the history  what all back or the forward  or whatever I had typed in last time.  Okay.  So all that history will be captured  in this object called less history object.  It has many methods  like bag forward Etc that will help us to get  into what exactly was type before or after or Etc.  So for example,  if I want to use this history object  so I can just type in history Dot I would just say back.  Okay, so back was this,  which is not shown.  Let me again hit back.  So back will be like the first shot HTML  if I just say forward.  So we’ll give me that not found page again.  If I hit forward will give me Google.  So this is how you can use your history object just  to Traverse through what all objects were, you know,  what all pages were displayed  before or after I had something to do  with your history of surfing on this particular browser.  So that can be covered up using this history object.  So these were all the beautiful window objects.  We have covered up so far with location Navigator history  and then there was a window object.  Then there was a screen object  Etc along with that I even showed you like,  how do we use console DOT log then document dot write  which we can cover up.  How do we Define some Properties or methods in this console  and call them  if you are not unaware of the properties of any object  directly tied that object in your console and get the right.  Name with the right spelling copy them and paste them  in your JavaScript.  Your JavaScript will never give you any edits.  These were some of the tricks discussed during understanding  of this browser object model.  And now let’s get into the best or important object  that we have already covered up a bit of it  that is document object model.  I had already drawn a picture in my first module saying  that document imagine it to be a bucket having all the elements  that you have add it to your body part  or rather everything right from the HTML.  Everything is there in your document object.  So there is one more object that is available.  Which also we have used in our module 1.  Okay.  So that is your document object.  It has absolutely everything.  Okay that we write in our HTML file.  So, let’s see.  The HTML Dom is  a standard object model and programming interface for HTML.  It defines the HTML elements as The properties  of all HTML elements the methods to access all HTML elements.  So it has some properties  that will help you to get that particular object.  Also, you have methods to get any of these HTML elements  and every element  will have some events attached to them document object model  of the page is created by the browser  and when a page is loaded at that very point,  it is created.  The HTML Dom object is constructed as a tree  of object like this.  So the HTML Dom object tree  looks like first object is say document is your object within  that the main element root element is HTML  within root element.  There are two sub elements head  and body within head you might have elements  like title within body.  You may have many elements like say anchor tag  or you know can have H1 tag,  or you can have something like input tag.  You can have a button  but now I understand that all this elements  that you have in the body tag.  For example, you have  a button tag Now button itself is one Element.  So LM and consider that element as an object only  because that element will have some properties  associated with it.  So button can have a text it can have you know color  or it can have many things along with the properties.  It has something called as events that is  what is very very important.  So let’s understand our document object.  So this is our document object.  In the document object.  Okay, you will have you can access each  and every element say this is your head Bart.  Okay in this is your body part.  Okay, within body part you can have many elements  like you can have a button.  Understand this button carefully once you get this element,  it will have many properties associated with it.  It’s look it’s field whatever text it has.  So look and feel comes  under styling of this whatever text it has.  It will have some text to it attached.  The text will be also considered and one more thing  that is attached to it are nothing but your events.  So these are the three important things  which are associated with every element you get  in your document object using your document object  if I get an input box also,  there is something  that is associated with it it styling  whatever text you add in it and plus some events  which are associated with it.  What our events  Now button is clickable right still be one event.  Okay, which will get fired  when I click this button not only clicking the button  if I just move my mouse over it will be one event  that will be there  if I take My mouse from that button again,  they’ll be one event that you get fired.  So understand that behind the scene.  Okay behind your browser.  There are these events  which are occurring every time every time you work  on that browser window and all these events are registered.  And now we have two smartly make use of all these events.  That is what is our task.  Okay.  So let us understand browser  where iniki or rather Dom object very Nikki whenever we make use  of this Dom object model.  Okay, so document object model  plus the JavaScript we will be able to create something  called as Dynamic HTML on the client side.  We can change all these elements HTML elements  and attributes in the page.  Whenever we want we can change all the styling  of all the element we can add and remove existing Elements  which are In the HTML JavaScript can react  to all existing HTML events in the page.  So it has access to all the elements in the page.  It can create its own new elements as well.  So now to work with all these elements now  elements here understand  that they are nothing  but all this input box buttons the option box.  Okay our drop-down or some paragraph or anything  that is there in the body.  Now, how will you get that element?  We have already seen one method colors get element  by ID method this method will help us to get  a particular or specific element provided that element  while defining in the HTML has one ID property  and having some value to that ID property now,  you can get any HTML element.  Okay, if you have defined its class property now,  what does this class property or?  About know when you see a button OK button will look  with its default properties.  Nothing with a gray color and the background thought  you want your button to look a bit better.  So what do you create you create some styling?  So always you submit button should look in green  and a cancel button should be always in bread color save  this is your styling  so you can create  to style classes one is for submit button  and one is for cancel button and this classes you can include  okay whenever you’re writing so-and-so button.  So if you have added this class name,  then you can access that element based  on that class name.  You can also access an element using its tag name.  What do you mean by tag name?  A button has a tag button input box has a tag input so  you can get using  like there’s only one input, you know,  and you want to get that input  and you don’t know inside in either.  You don’t know what is the class value have added.  So what you can do is  If you want to get that element input,  you can just say get Elements by tag name  and within this method you can write input.  So this will help us to reach to that element.  And once we reach to that element,  we will be able to do whatever work that we want to do  on that element.  So let us see,  how do we reach to the element in the practicals?  So here is the body that we have.  So let us create a button here.  Okay, then let me create a paragraph here CBC.  Let me create something like your input.  Type is equal to sit text.  Okay, so I have around three elements here  a paragraph a button and an input box.  So I am happy I have three elements and let me try  to use this three elements.  Okay, no script.  I’m adding let me use location dot back method to go back.  This isn’t have any back methods to let me just see.  Sorry, it is history right dot back method.  Okay, again, use the same one and I’m here  and I first dot HTML  and I get access to all these elements  if I just go to this element.  Okay.  I understand that in the body.  There is button paragraph and there is input  if I just move my cursor in this elements tab the specific  element get highlighted.  I can change its styling here and check and the console.  What I want to write is right my JavaScript,  so I would say something like document object. .  Get element by ID and add  some ID sing ABC it will give me null  because none of the elements is having any ideas the value.  So let me say tried,  you know using something like class name now  Elements by class name sad some class name  a random class name say error.  Okay, it will give me an array  but a blank array whose length is 0  so that means there is no element whose having  classes the attribute.  Get element by tag knee this may help me  so I will say input.  So I get in return the input that I have here.  We just see  if I click on that input here it gets highlighted.  So it is talking about the input that has got highlighted.  So if I don’t have all these values I need to go  for this now in case  if I had returned something  like ID here ABC and save this page  and render this page again,  then it would have helped me with this ID values.  It would have given me back my paragraph So this is  how I achieve my object and once I get that object now,  I can work over the object to change any of this.  I can change its styling I can change its text  or I can work around with its events.  Okay.  So let’s move ahead.  This is how I get my objects or other elements.  Okay.  This document dot get element by ID here.  So I’ve got this value now.  I want to change its text.  So the property  that I need to change here is nothing but inner HTML  that will change its text.  So let me try to do  or execute it here have already got the paragraph and I know  that it is the right paragraph  I have so I will change its property Carlos inner HTML  as say that  hi there.  I am inner HTML Can you see  that the property has got changed the to dynamically?  Okay.  So if you want to change anyone’s property or rather text  that it has so you can go for that inner HTML property.  Let’s try to use it for others also.  Let’s see the button.  First of all, you should know  that by typing first you you should get the element  if you’re getting an element.  Okay, it is not giving you a element.  So basically you have to use by tag name and in the tag name,  you should write that tag.  Okay.  So this thing has given you the element dot.  Okay.  Let me see inner HTML.  Let’s see if this is the property it has  okay like cancer.  Okay, so it is not the property that has so let’s see.  value So let us see what are the properties  that button has?  So to see the properties, okay.  I’m just show you  how to do it at runtime to see its properties go to elements.  Click on that button  on your right hand side will be all the styles  that will be present.  Okay, and all this tiles will tell you what is the output  how it should look like?  So that’s how we have changed by the graphs innerhtml.  That is we have changed its text.  Let’s try changing the style.  It has to change the style.  Basically what we can do is set its value like this.  So using that element.  Okay, you can set its attribute and the attribute  that you’re going to set its style and with InStyle.  What attribute do you want to change the color  so you can change it to the whatever color  that you want to change the style of an element  if you have this paragraph here,  so first of all,  let’s get the element that is step one.  Get element by CID.  ID here is ABC.  Okay.  Now you want to change something  like it’s style to change its die.  You can just call the method  that we have here in the example cordless set attribute  in the set attribute.  You can set the style of it that current style  and you can change its color.  Okay.  So let me try this set attribute in which have  what I want to change is nothing but the style  and within the style  what I want to change is the color So change  this color here.  Let me change it here first.  The color has changed, but you cannot make out.  You can see that the color has already changed to Blue.  Okay, it had changed to Green but we couldn’t see that color.  So all this color and styling whatever styling  that you want to change.  You can definitely change  to test you can just type in here for text.  Okay, so maybe like  text alignment would be somewhere like in the left  if you want to move it.  All right, so it is gone  extremely right you want to make it at the center?  Okay, it has overridden.  Chimere like left she just left.  So whatever styling  that you want to change here first ride in the elements block  because you get here a tight forward.  Okay, and you will make sure  that you will never make any spelling mistakes.  Okay, that is important.  So whatever styling  that you want to change you can just change its width.  You can change it,  you know height  and you can do anything with that element here  and in the JavaScript  when you have to do make use of a method called  as set attribute  and women that you are setting which attribute  that is nothing but the style of that  and now within the style you can write these pairs  that is name/value pair name of the style  and the value of the style.  So if you just click  on this button the style that is given to this button is  like color is this  if you want to do some text alignment  you can do it like at the center Center  she wouldn’t understand  that so and so it has come to Center.  You can just change the width  of it and make it like not fit content but not too  or you can also give some pixels to  it’s a 200 me see if it takes up.  These changes will not be shown here  because the text  that I have written is very small.  So using that value or that text only it just creates a button  over it but styling,  you can definitely make use of this block.  Okay using this block you can go  to this console and using this set attribute style.  You can set it Styles.  Okay.  So that covers up the second part 1 was the text part  another was the style part.  Now, let’s move on to the third part  that is nothing  but the event spot now what our events events are nothing  but whatever things  that happen like when a user clicks the mouse  when the web page is loaded  when an image has been loaded  when the mouse moves over an element  when the input field has changed when an HTML form is submitted  when I User presses  a stroke saki all these are nothing but events  that happen behind the scene and those events have some names  which are given up like click double click Mouse move.  Okay, so that means you just move your mouse  over it then Mouse over Mouse down Mouse up  and there is something  like you have touched an element using your mouse pointer.  Okay, you cancel the touch  if you have pressed it key when the key raises up  when the key bows down all these events are registered  behind the scene.  If the form is focused  when the form has become blurred it has got submitted  it got changed.  So all these methods  or other events are registered whichever method  or registered event that you want to work with.  You can choose that particular event.  Okay and write your code accordingly that  on so-and-so event.  I want to I’m so-and-so tasks.  So you are smartly using all the events  for your work to be done.  So how do we add these event listener?  So whatever code we are going to right now  that on particular event.  This court should execute that means what are we doing?  We’re writing our own listeners  what this listeners  would do they will keep on listening to the event  and when your particular event has occurred it  will perform the task.  These are called as event listener.  So let us understand.  How do we add these event listeners?  So you can add  this event listeners either statically or dynamically.  How do I add them?  If you just see here attached event listener  dynamically by using the event  once you get an event in the script to get an event.  We know that there are  many methods either by ID or by class name.  Or by tag name or there are many more methods.  Once you get one element  you call it’s add eventlistener method.  So in this add  event listener method you can add as many listeners  that you want.  Maybe on click you want to add one listener on mouse-over.  You want to add one listener?  Okay on keep down you want to add one listener.  So you can add as many events are there  you can go ahead and add as many listeners to it.  So, for example,  I want to add a listener only  when that particular paragraph gets clicked.  So I add that listener first here  and after adding the Reznor I want to perform  some tasks so that task I have added in a function.  Okay in that function.  What do I do?  I change its styling.  So that’s what I have been doing.  So I call that functions only  when this particular event get soccer.  This function will be Dead,  let’s try to add one event listener here to the code  that we have.  So we have here a paragraph.  Let’s add here an event listener.  So create a new Javascript file save it as event.  So just see event dot j so that the name is smaller.  We won’t make any mistakes.  Okay, the event listener Javascript file has an event  that para clicked.  What is this para click  doing it will get the paragraph document dot get element by ID.  And it’s ID is ABC  once it gets this element it will set attribute.  That is nothing but the style attribute in the style.  I’m going to change its color to say blue  because blue is visible now.  When should I call this paragraph?  I should call this paragraph or this function only and only  when my paragraph is clicked now for that.  What do I do in the JavaScript?  Okay.  I write document dot get element by ID.  That is my abc ID.  Okay.  I add an event listener.  Okay, which will be working only  when I click it and that time I just call this function parakeet  Severa turn a task  that whenever I get this ABC  on the click event of it call this method.  So I go to my HTML page and I try to add my script here.  The name of the script is event dot JavaScript save this file.  Okay.  And refresh this file.  By default.  It has got a color blue.  If you change it to Yellow so by default what happens is  that it just adds a listener.  So when you write this particular file, okay.  See the syntax that is followed.  I have written a function that upon the paragraph is clicked.  OK execute this function now add a listener  while you’re adding The Listener make sure  that you just write the name of the method  and do not call it do not follow it with a round bracket just  mention which method to be called now refresh the page.  Okay upon clicking this particular paragraph.  Your JavaScript will get executed and the value  of this ABC will change  that is called as adding a listener.  Dynamically.  Let us create one more listener now.  Say something like Mouse over.  And here let us put one more function Parra.  Mouse-over and this will be called  when it is mouse  over and at that time let’s make it blue.  So save this file you have added to listeners one is  for click one is for Mouse over.  Let me see if this works for us.  So initially it is black.  I move it move my mouse pointer  it becomes blue if I click on it,  it becomes yellow.  So this is how I have added many listeners  or other to listeners for my paragraph.  Okay, all the listeners  or the events are always in small case make sure about  if there are two words also Mouse over  or Mouse out a key down on load.  Whatever events are there.  They’re always in small case.  Make sure that you write it in small case  and when you add a live event listener dynamically,  make sure you write the function name  without a calling round bracket.  Okay, let’s try to see how we can add value statically.  How do we add statically it is  when we write our HTML the element HTML on that  only we can write the event  like now I have this button event.  So I have this button I’ve written this  statically in my HTML on the click of this button  if I want to call any function,  so I’ll be writing here the name of the function before that.  I will be creating a function here.  button cyclic Okay on the click of this button.  What will I do is I will just set it attribute some  of it attribute.  Let’s put one ID for our button so that will get this.  let the idb be set its attribute.  Okay, let’s just set its color to be blue.  These are all click.  I want this particular method to be called.  So what I do here is I write the method name.  Okay, and it’s parantheses.  This is how I add statically so  while writing the element itself I make sure  that on click event so-and-so method should be called.  Let me see if this works for me.  Guess I’ve refreshed on the click of it.  It’s text becomes blue.  Okay, I can add one more event  if I want but all the events I will have to write here.  Okay, maybe like on you know Mouse over.  The I can call one more method  like button Mouse over onmouseover.  I will call one more function here named as  function on mouse-over and using the same.  I can just say that the color should be yellow.  Let me dries and check it if this works.  Okay, whether I have saved my HTML file here.  I need to see the HTML as well.  And when I Mouse over the value changes to Yellow  when I click it becomes Bloom.  So this is how I can add statically  and dynamically all this methods  or other the event registration can happen.  So this is how we add our events.  Now one of the famous event  that we add is like form validation.  So if I add anything, you know,  like I’ve created a form so the firm has first name  last name age phone number.  So in that in the name part,  I don’t want somebody to write numbers.  So that’s my validation part.  I cannot tell my server to validate  that I have JavaScript on my UI side so I can make use  of that JavaScript and using the JavaScript.  I can do all the validations like this  so I can have a method called as validate form in that form.  I can get whichever value that is there.  Use that value and even right  if it is kept blank then I can say that  okay.  It is a must that you feel the name.  Okay, something like that.  So validation one something like, you know,  if it is not typeof a ‘number then also  it can be taken care of.  So all these things can be taken cared of  when we have validating a form.  So let’s see one beautiful example of how do we  actually validate the form?  So the first step would be creating.  Okay your form so firm may have something like,  you know button.  Okay a paragraph and everything  that is added you think that value we can just test  whether it is a number it is not filled  or whatever is the output  and we can tell the user  that please do feel its values and then make sure  that you add only numbers in it.  Make sure you add only data in it or like text in it,  whatever validations that you want to You can do it.  So let us create a small form create a form.  Okay, what you have to make use  of is a form tag within a form tag.  You may write something like name type is text.  Okay, then you can write it’s a ID name  and you may end the input tag.  Okay.  So this is your name.  Okay, and when you are adding a phone number make sure  that you add one more input.  Okay type.  So let’s also make it as text first.  Okay, it’s ID is phone number?  Okay, after adding both this things you  will submit your data.  Okay.  So now after adding the submit button,  what we can do is we can call a function  so somebody clicks  this particular method we can add something like a valid date.  Maybe a method will be called using this method you  can write a code function name of the method is validate form.  In this method, what do I do?  I want to check.  Okay, whether name is added or not.  So what do I do?  I get that name element first dot get element.  By ID.  And what is the ID here name?  So let me take that in a variable save are name.  Similarly.  I’ll create one more variable phone number  and I will get that element okay in this variable.  So in this validate form form,  I have both the elements now to check  whether the name has been added or not.  If it is blank then I want to tell that okay,  please don’t add something like blank.  Okay before submitted and some value to it.  So what I do is I check whether name dot value.  Okay is null.  So what I do I right here and  if Case okay is equal to is equal to none.  Okay, if that is the case then I put an alert saying that.  Please enter some value in name.  Okay, so let us say if this works for me.  Okay, how do I check whether anything is null  or not null is simple by using this either I can just use  if it is blank.  Okay, or it is null okay or anything.  So let’s try out first null.  Okay, if that doesn’t work then let’s just check  with the blank string tie get this form  and without a submitting.  Okay, I send this submit so well,  it is not null.  It has some value.  Let’s try to check whether it works with this.  She tells me please enter some value in the name.  So only when I add some value in the name,  it will get submitted.  It will not give me an error.  It will give me an error  if I do not add anything in the name.  So I come here.  I feel okay.  I have done one type of validation.  Let me just comment.  All these things add a break statement.  Okay and place it nicely here.  So I have this name and phone number  which I can use I feel phone number is okay.  They may leave it as a blank one.  Now.  I try to check.  Okay, the second test that I want to check is  if name is dot value.  If it is a number that decided or not,  so there is a method call.  It is not a number.  If this value is not a number this will give me through  if it is a number than this will give me false.  Okay, so it is very important that I use.  This is not a number carefully.  So now name dot value should not be a number  so he’s not a number.  Okay should be true here.  So if it is false, then I should send one alert.  Say I refresh this page.  And I add nothing so tells me add some value.  Okay, it also tells me that you have to add some text.  So it tells me that yes,  we’ve added a number and I want you to add some text to it.  So when I add something text then only it doesn’t give me  an error similarly.  I can check it with phone number.  So let me take the phone number object  and this time I don’t want to negate it.  If it is not a number  then I want to add please enter number in number.  So adhere proper values  and here I add instead of a number add some text.  So it tells me  that please add a number value in phone number.  So this is how I can validate my form.  Okay in my own way so I can write all these cases.  Okay, I can beautifully right these cases ini files  or and you know,  if L see fails then then I can make use of you know,  something like and even switch statements.  I can take a switch value.  Okay, and if it is a number then you write something  if it is something so I can do make use of all the loops  all the operators that I have.  Oh can create a beautiful validation form method.  Okay.  Let’s see what presentation has to give us.  So here we have created a ch2 than one paragraph that saying  that please add a number between 1 to 0  and I created one input.  Okay.  I put its ID as Numb  and I have a button okay on click of which okay,  my function will get called my function.  Okay has something  like it has taken a variable value here so directly the value  of that element is taken and that value is check  whether it is not a number  then you put so and so  if it you have added a number then you would say input is okay  and that’s what you write in the paragraph  below that number instead of giving an alert box.  Also, you can add one more paragraph here  after every element you can add one paragraph.  Okay, and that paragraphs inner HTML you can change  so this is Javascript all about when it comes  to event handling and objects.  Your feedback is very very important to us do write  to us to give your suggestion to improve much more  than what we are.  Okay for the great session Corey.  I hope all of you found it informative.  So if you have any further queries related to JavaScript,  please comment in the comment section below until then  that’s all from our side today.  Thank you and happy learning.  I hope you have enjoyed listening to this video.  Please be kind enough to like it  and you can comment any of your doubts and queries  and we will reply them  at the earliest do look out for more videos in our playlist  And subscribe to Edureka channel to learn more.  Happy learning.  


Leave a Reply

Your email address will not be published. Required fields are marked *