Introduction to Javascript

 INTRODUCTION TO JAVASCRIPT

MODULE 1- Introduction to Java script 

(00:00)

Hello guys, welcome to our series Java script.

Before learning Java script it is mandatory to have basic knowledge of HTML and CSS.

In order to move further in Java script a pre requisite knowledge of HTML and CSS is expected.

So if you wish to learn HTML and CSS you can go through the course video of LearnVern HTML5 and CSS.

These course videos will help you to learn HTML and CSS

HTML and CSS are considered to be pillars of Java script.

First pillar is HTML and second pillar is CSS, so how does these functions work? In order to understand that I request you to learn these two courses and then only move further to learn Java script.

The first segment which we are going to study under Java script is- ‘INTRODUCTION TO JAVA SCRIPT’.

Before learning Introduction to Java script, few things to be considered are, Why is it important to learn Java script, Why do we need Java script? What do we have to consider?

To understand this, let’s see an example, here I have opened LearnVern’s website, so if you have already learned HTML ad CSS then you know that with the help of HTML and CSS we can create static page for website.

For example, this is our logo of LearnVern, this is our text field, where you can see All courses menu.

On clicking it menu will be opened and on again clicking it menu will be hidden.

There are few more buttons like Join for Free, when I hover on it, it turns yellow from white.

Moving downwards there are some other contents.

So basically if we have to develop this site only with the help of HTML and CSS then we can place content with help of h1 tag we can add content , P or with help of some other tag we added this content, with the help of button tag we can add this button.

With the help of Input field we can add Input and with the help of CSS we get hover effects, colors and designs.

But, after adding HTML and CSS why do we need Java script?

Here is another example, let’s consider a human body, here we can see human head, hands, body parts, legs, etc.

After assembling these parts we can construct human body, but we want our hands to function i.e. move even our face is movable.

So how does these functions work, by just assembling parts a body will be constructed but without any movement our body is not useful.

Similarly, when we create a web page or website if we have to add movements, effects or events then how will we do it?

We can do it with the help of Javascript. For example, if you click on this button and the menu is getting opened, how is this getting opened? It is getting opened due to Java script. If I move downwards here I have a menu as I go clicking on it the portion on right hand side starts changing.

Same way if I click here this gets changed, again I changed it. So these changes which are occurring, when I am clicking somewhere and something is getting changed on the basis of that click, how is it happening?

Again we will look further on the same site, here he we have testimonial section as I start clicking on these buttons here changes are getting performed, If I drag and drop here i.e. I scroll this end as you can see on click this end appears, again I start moving my cursor it starts moving.

So how is this movement taking place, on clicking button how my testimonial change is getting performed. So behind all this operations the responsible entity is Java script, all the events which we are performing for example I am clicking something a event is getting fired, If I am scrolling something a event is getting fired, I scroll down and hover on some button and the events which are getting performed due to my click, my scroll etc. etc. all this is happening with the help of Java script.

(05:11)

So we tried to understand basic of Java script with the example of a human body, that if we assemble hands and legs our body will be constructed, but movement won’t take place.

Similarly, if we want to make our website dynamic, if we want to add movements in it i.e. we want to add events in it. So how can we do that? With the help of Java script we can do that.

Now let’s move towards our slide, this was our basic understanding, to put in layman’s term what is Java script? What we saw on our Learnvern’s site was an example of Java script

Now let’s move further and see what exactly is Java script? Java script is basically object oriented scripting language which was developed to perform cross platform operations.

Now the question arises, What is Object based scripting Language? In order to understand it in a better way let’s see a example, here I have an image where you can see different cars, now consider when we used to go school we used to sit in a classroom, there used to be many students in our classroom, each student i.e. if we have 40 students they all were placed in same classroom, each student used to be a part of class, every member or the student had different identity, when a I card was given to student every student had one but the details on that card used to be different. What is the property of every student? Their I card, every student is given an ID, roll no., so that becomes the property of each student.

That every individual different student was part of one classroom, and all the different classes were part of one school.

Now let’s apply the same scenario in our system, In the image shown over here consider a class, what is class? Class is a collection of different entities, i.e. a class made up of property and method is considered when we speak about any object oriented language.

We will see object oriented language later, first we will understand what is Class? In object oriented language class is an entity including members which are its property and their methods as in their functions.

If we talk about students in class, some students are monitor some are topper some are average, but giving exams is mandatory for every student, which leads us to common function of students i.e. studying, each student has to study, each student has to give exam.

Every student has a common property which is their I card, let’s apply the same thing in our object oriented language programming example. We have a class here, let’s say we have Car named class.

Let’s consider any car as an example, what things are to be considered ? car has a model , it has color, it belongs to a particular brand. So what are the color, model and brand?So here model, color and brand are the properties of car, also known as Data members. So here our class is ‘car’, it’s data members are ‘ model, color, brand’, but what is the function of car? It’s speed and size are considered to be the functions of car which varies for different car such as some cars cannot run faster than 120 KPH whereas some cars can go up to 180 KPH.

So every car has different speed according to which car runs. It is not necessary that 120 KPH car won’t run at 60. It can run at 60, 70 or 80. Here we can see a difference that car can run at its own different speed.

Same goes for size, different car comes in different sizes. These differences which we see here are our method.

(10:25)

So what do we get here? Here we have our class, that is Car , it’s properties( i.e. model color and brand ) we will consider that as data members, where as speed and size will be considered as it’s method. 

 If I consider speed I will get different values every time sometimes my car will run at 60, sometimes I will run at 80. If I consider all three factors in a car named class, so different cars will be available to me like for example here we have a car, it’s model name is Ertiga, color is- maroon whereas it’s brand is Maruti. Similarly, we have another car in black color, it’ brand is Mahindra and model is XUV500 .

So now what we have is two cars, but how are they different from each other? There are some properties such as their model color and brand which tells apart these both cars. Similarly we have third car with model swift, color red and brand maruti. So here we have only one class. Which class is it? It is cars.

But we have three different cars, now why are these different? Because of their properties. It is not necessary that both XUV and Ertiga will run at same speed, speed at which ertiga and XUV will run can be different. So what are these different cars? They are our objects.

Which means, what is our class? It is car, like even Ertiga is car, XUV is also car and swift is also car, I have three car named class which becomes my objects. Which means they have their own properties, what is common factor between these three objects? It is model, brand and color. So what does we basically have in object oriented language? We have class and objects. Here what is my class? It is car, which has few properties such as model, color and brand, and it also has few methods which are speed and size.

Which three object am I getting? That is Ertiga XUV and Swift. So here what you have to understand is one class can have many objects. It is not necessary that only 3 or 4 objects will be formed. You can make as many objects as you wish.

Now consider this same thing in real time environment scenario, let’s say we consider a system i.e. if you go to a bank, you must be having your own account. Now if you have your account in bank, in system whatever bank’s application or product which bank is using, they have just one class that is user, but for you, being an user, you have your own account name, account number, you have your own details. Similarly, another person will also have an account number but their account number will be different. So what is the common property between two users? It is account number.

Let’s say you and your friend have open an account in same bank, you both will get account number, you both will get your own username, you will have your own password, you will have your own bank details, you both must have deposited different amount in bank. So what are the common things here? Both person will have account number, username, password, amount.

But the values are different in both case. Similarly our bank is using whichever product, have single class that is User or we can consider customer. For bank customer is single, i.e. customer named class, under which many users are there. In one bank there are almost 1000 to 1200 users which shows us that under one class lakhs of object can be formed.

So here it is not necessary that as we took example of car only 3 or 4 cars can be considered. As many as we want objects can be formed of class.

But why are these things useful? When we do programming, i.e. object oriented programming, it becomes easy for us to avail some properties, we can retrieve data easily with the help of method.

Class is formed, few properties are given to it, few functions are given to it, now as many objects we create, we can assign values and methods through properties and easily get the values and set the values.

This is the advantage of Object oriented programming that we play with objects we work with objects and it becomes easy for us to access the properties and methods.

Let’s move back to our slide, I hope that you all understood the concept of object oriented programming which we studied today, how this object oriented Java script works.

(15:40)

Java script is also a scripting language which works on basis of object, what are the objects which we use in Java script? We will look into it gradually one by one in different modules.

Next, Java script is not compiled language, but it is translated language. Which means if you anything about C and Java then you must know that both C and Java are Programming languages, we need to compile these languages.

But in case of Java script we don’t need to compile this language it is translated with the help of Translator. Where is this translator found? It is found in web browser.

Whenever we work with Java script if an error comes, we can resolve that wit help of in built translator in our web browser.

So translator is basically responsible for translating the Java script code for the web browser. So whatever you have written with the help of HTML and CSS will be compiled and shown there but how to add Java script code? With the help of Java script translator we can see our code running.

Now let us see what is Java script? Java script is also known as JS in short. This is our logo for Java script.

Moving forward, Java script is a light weight object oriented programming language. Why is it used? It is used by several websites for scripting the webpages. What is scripting? If we want to perform any activity in our website or webpage dynamically we use Java script which is known as Script. Running of script means as script runs the activity is performed alongside.

How can we run these activities and events in our webpage? With the help of Java script. Java script is full- fledged programming language that enables dynamic interactivity on websites when applied to HTML document.

Same as I said in a HTML webpage when we want to apply any dynamic activity we can do it with the help of Java script.

Java script was introduced to us in year 1995 and the company which invented Java script was Netscape Navigator browser. And Netscape navigator was first able to enable Java script in their browser and that is the reason there is a class named Navigator is available to us in Java script which helps us in getting browser details.

With Java script, users can build modern web applications means if we want to add anything dynamic which interacts with our webpage we can do I with our java script.

We can do some more things with the help of Java script like as it is written over here several forms of interactivity and simplicity, means in simple way we can transform our website from traditional to dynamic.

Although, Java script has no connectivity with Java programming language. Now this is very important, even I didn’t have much knowledge about Java script initially during my career. Even I was confused when I heard Java script for first time during my college days that java script and java programming must be having some sort of connection and that’s why it is named as Java script. But it is nothing like that, java is totally different independent programming language whereas Java script independent scripting language which we use for website. We never use Java in website.

There are some more things like web browser, databases such as CouchDB and MongoDB . While working with these Java script become very useful to us. For example, we need to show some data in our website using database for that we can take help from Java script. Only HTML and CSS cannot be used for database connectivity, they are used only for designing webpage. So Java script is very important in order to interact with our database.

Guys this is it for today’s segment, we will continue this in next segment. Till then, good bye.