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 handlin
g 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 bro
wser 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 s
erver-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
Jav
ascript 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 t
his 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 defau
lt 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 d
ata 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 i
s 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 wh
ich 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 support
ed 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
somethi
ng 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-t
ime
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 cl
ient 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 th
ese 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 us
er 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. Whe
n 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 alrea
dy 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 fe
el 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 HT
ML. 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. T
his 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 fo
lder. 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 th
at 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 inspe
ct 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 Javascri
pt
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 you
r 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 t
hat 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 f
ile
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 t
ext 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 sa
id 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 u
se 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 co
nsole 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 l
et'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
anythin
g 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 JavaSc
ript. 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 wil
l 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 ty
pe. 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 ear
ly
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 obje
ct 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 equ
al 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 mark
s
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 l
ike 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 i
ndex 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. S
o 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
t
hat 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 gi
ve 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 operat
or 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 t
o 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 w
ill 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 som
e 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. I
t 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 conca
tenation 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 operat
ors 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 na
me 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 i
s 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. Tha
t'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
a
nd 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. W
hat 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
th
en 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. Ca
ll 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 ar
e 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 t
hat 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 el
se 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 strin
g 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 t
rue, 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 tru
e, 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 condit
ion 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 h
ave 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
wil
l 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 pr
ompt 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 cauti
ous 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 swit
ch 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 sw
itch 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 th
ird 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 le
ngth. 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. Y
es, 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 foll
ow. 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 havin
g
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 Mar
k'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 ke
yboard 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 y
ou 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. Le
t'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 L
oop. 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
t
hat 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 t
he 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 k
eyword 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 an
y 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 o
f 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
fu
nction 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, whi
ch 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 JavaScri
pt. 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
wi
th 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 wr
ite 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 whate
ver 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
Jav
aScript 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, fo
r 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
tha
t 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 statemen
t
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
unde
fined 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 provid
es
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 nothi
ng
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 va
lue
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 cal
l 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 Constru
ctor 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 fun
ction, 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 sen
d 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 fu
nction. 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 wha
t 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 th
is 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 o
pen 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 yo
u 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 s
ave 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, s
o 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 Constructo
r. 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 b
ody 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 inv
oking 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 typ
e 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 functi
on 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 i
s 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 func
tion 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 fun
ction. 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 th
at 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
th
e 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 ho
mogeneous 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 wh
at 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
somethin
g 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 programmin
g. 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 a
dded
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 j
ust 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 typ
e
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 h
as 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 c
reating 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
th
at 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 a
nother 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 i
n 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
o
f 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 hav
e
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 w
ay 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 th
e 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. Wh
at 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 wh
ich 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 meth
od
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 inform
ation
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 m
ethod. 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 t
he 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 oka
y 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., th
en 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 o
utput. 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 a
ccess 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 a
t 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 subj
ect 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 t
he 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 res
ize 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 r
esize 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 usual
ly 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 URL
s. 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 some
thing 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 google.com. 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 ha
s 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 avail
able 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 somethin
g
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. N
ow 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 val
ues 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 ava
ilable 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 consol
e 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. L
et 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 wil
l 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 n
avigator 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 an
d 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. T
here'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 Nav
igator
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 b
rowser. 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 addre
ss
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 loc
ation. 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. C
urrently, there is no host. It is nothing like, you know localhost
I have returned or I have written
google.com 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 google.com
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 thi
s 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 www.google.com. 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. Y
eah, 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 www.google.com, 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 somethin
g 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 tha
t 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 fir
st 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 ass
ociated
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 butto
n 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 Jav
aScript 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 he
re 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 t
his 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 inp
ut. 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. Ok
ay. 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 r
ather 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 canc
er. 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 cann
ot 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 w
hich 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 c
an 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
tha
t 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 you
r 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 on
e 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 addin
g 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 sma
ller. 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 defau
lt. 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 p
age. 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. S
o 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 Ok
ay
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 call
ed. 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 so
mebody
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 t
he 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 numb
er 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 w
ant 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. O
kay 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. O
kay, 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 validati
on. 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 ca
n 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 th
en 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 p
aragraph. 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 l
earning. 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.
Comments
Got a question on the topic? Please share it in the comment section below and our experts will answer it for you. For Full Stack Training curriculum, click here: http://bit.ly/2AUZv2y (Use Code "𝐘𝐎𝐔𝐓𝐔𝐁𝐄𝟐𝟎")
Completed successfully. I am a CS student and I wish there is a second part starting advance. This was beautiful explanation and i used mostly 1.5speed. Please let me know if you have part 2.
You know what??? I've only been watching for a few minutes, but this seems to have more info than the thousand videos I've already watched. I thinks It's worth working through that accent.
Wow, no body in youtube has put it in a way as you did, thank you so much.
You earned a subscriber !!!! Excellent tutorial with great clarity!! Looking forward to future advanced Javascript videos! Thank you!!!
Good Session.. For people with java programming background I would suggest start with functions 1:20 for quick learning.
I am falling in love with edureka.. thank you very much
Nice way of explanation, The important point i liked was, Trainer has explained the concepts and parallelly explained by doing hands-on. Thanks a lot to Edureka and Team.
Thanks for the clear explanation mam. Really helpful for beginners!
Thanks for this awesome tutorial, i am really enjoying it.
This is the best and the most useful Javascript Tutorial that i have found, i was badly stuck at Javascript, but Edureka has solved the problem and the way Gauri mam taught was also very impressive. Thanks Edureka.
The way of explanning is so good that anyone can easily understand.Thank u Edureka.....
Thank you very much mem for this session on javascript it is very much useful to understanding form very much basic to advanced. I was stucking on some point in java script and now I understand that. Thank you very much.
Well done and nice video, thanks so much for this tutorial, i like the explanation especially the introduction to JavaScript! Good work done and keep it up
I usually dont comment . But now I have to. Your accent and your way of teaching.I just fell in love with. Thank you edureka
Very interesting. Even if we are starting with a plan of 10 min, we will end up continuing for 3.5 hours. Thanks for this wonderful video.
completed 3:32:34 ...thank you edureka for making such a nice video.
simply amazing i would say.. thanks a ton
Thanks for uploading .. 🤗
Thank you for the excellent presentation. Very valuable!