INTRODUCTION TO JAVASCRIPT

Ways to write and Add Java script code?

Hello guys, welcome to our series Java script. In last section we studied introduction to java script. Like what is java script? What is object oriented programming? Features of java script and applications of java script. We also saw a small demo how we can run java script practically.

I hope you all understood what we did in our last segment, you can contact us on forum.learnvern.com if you have any query regarding the last segment’s content, we will revert back with solutions to your issues.

In today’s segment we are going to learn how to run java script? Means if we are writing java script program, then what all ways and techniques are available to us. Basically we can run java script program with three ways, in which the first technique is between the body tag of html program then we can add our java script code between it’s body tag. Secondly, between the head tag of html, means our head section, in which we also add our internal CSS, even there we can add our Java script code.

Third way is in .js file means external Java script file. In our CSS course which we conducted, we learned different ways of adding CSS. If we wish to add any external CSS file in our current webpage, we can do that using link. Similarly, if we are generating some external java script file and we want to add that to our current program, then we have to save that file by .js extension and by linking it we can add it. So here in total we have three ways, first is between body tag, second is between head tag and thirdly adding external java script file to our current html. We will study all these ways in detail one by one.

The first way, which we are going to learn is code between the body tag. So will we run this? For that first we will open sublime text, as we have seen in our last segment if we are writing any Java script code, for that we can make a separate js file but we are learning java script from our web application development perspective, I will explain this as related matter comes during our course.

But currently whatever we will do we will do in html file only. So we will select HTML from the sublime text and we will add everything in HTML program only, if requirement occurs for generation and linking of external java script file, then I will inform you and will move further accordingly. So this is our Java script in body tag, that’s why here we will write Example of script in body tag and we will save it as add Java script 1. So we have created a program on html and now we will open it ( 5 seconds gap ) so here you can our program is running and we will write here, because we have to add in body tag that’s why, I will add script in body tag. In script we will write document .write (“This text is through Body tag ‘); , save it and run.

So now you can see the page in our document, after writing java script in our body tag, this text was available to us. What we have done here? We have written Java script in our body tag.

Now I will generate a new program and I will copy paste the same thing. Here what we will change? Example of script in head tag instead of body tag. And will cut the entire portion and paste it under title because this will come under my head tag. I will remove extra space and then save it under the name add Java script 2. Done.

Now we will run this program, now here we have two programs, first is where we are getting output through body tag and the second is where we are getting output through head tag. What is the change in both programs? In first case we added script under body tag whereas in second case we added script under head tag.

We will move onto our slide, first was code between the body tag, you can see here I have written these things in body and in second slide we can see written under head tag. Now our next step is in.js file, so here we are going to use external js file means we will generate an external file and save it under extension .js and then we will link it with current program.

So here we will generate a new file, we will copy our content and paste it as it is. Our script portion will be removed as of now. Okay. Now what we have to do? We have to save it. We will save it under the name add java script 3.

(06:56)

Now here I will generate external file, for that first I will save it, I will select js and then save, let’ say if I have to pass a message from there then I will write message.js. okay, now what I have to do? I just have to call a simple alert function, so I will make function first, as soon as I clicked ctrl and space after writing function this portion which you can see has been generated.

Now if my function’s name is msg and if this is my function in which I am not passing any argument, so this is my format for function. Whenever we write function in java script, how do we write it? So this is our way to write function, key word used should be function because when we type function the text turns italic which indicates this is our java script’s in built keyword also.

This is our function, then comes name of function, now this parenthesis () open and close is the indication that we are generating a function, what is the name of function? It is msg, okay, now whatever task we have to perform in function, that task should be written inside the curly braces.

For example, I want whenever my button is clicked, on clicking that button my function should be this call and notice should appear in an alert, that you have clicked a button. Or welcome to LearnVern, something like that. So alert box which I mentioned is a small screen inside current screen is called alert box. We will type alert and in that we will write “Welcome to LearnVern” ; and save it.

So I have saved this msg.js file. Now I have to link this file with my third file java script, for that fist I will write script, type=”text/javascript” will appear, in that I will add space and write source =”message.js” okay, just make sure the name we are typing is same. It has been saved, now what I have to do?

I have to call my function, when I have to call my function? Let’s say I take a button, it’s like input, my type is “button” and it’s name is, right we don’t have requirement of name so we will remove it for the time being. We will write value “click me” and on click of my button my function should be called, so “onclick=” what I have to do click? I have to call this function on click, so copy this message and tgen function().

What will happen because of this? Whenever I click the button my msg named function, outside of html file and one function which is java script file i.e. “welcome to LearnVern” a pop up has been created, so I will run that from here. So save, now I will run this program from here, now I am clicking, as soon as I am clicking a pop up box has been generated and appeared on screen, in which Welcome to LearnVern is written, as soon as I click on okay, it will disappear.

Again click me and okay, again click me and okay, so whenever I click on this my alert box will pop up and indicate the message which has passed by me, here the message is Welcome to LearnVern which I have written in alert. If I make changes in this like “Welcome to LearnVern! This place is amazing to learn new Technology”; save and reload, so here my new message will appear which I have updated- Welcome to LearnVern! This place is amazing to learn new Technology. And click on okay.

So this was our third way, like how we can add external java script file in our current html file. Simple, add script in head, in script add inside source. You might remember when we conducted course of CSS, with the help of link tag we used to add our CSS .

(12:06)

But because Java script is a script, so with the help of script tag we add our external Java script file. So these were our three program, now we will move onto our file. Now, the external java script file which we added in our program have few advantages as well as few disadvantages also. So we are going to learn both.

First we will see the advantage of external java file, this has been seen many times, let’s say in our application or let’s just consider our webpage , in our webpage let us say I have to show pop up in multiple places, the pop up is saying that the given data is wrong, or the given data is right, means I want to show a common message from different webpages. Now what will be easy for me? Going to each and every webpage and adding the script or just add java script at one place call it from all webpage.

Definitely the second way of writing in one place and using it in another place is much useful. So writing in one place and using in all places is known as code reusability. So because of code’s reusability also external java script file useful for us.

Now when we write external code, one more thing happens i.e. code is found easily. For example if I am writing code today and want to change something in that after one month, so if I go on searching in every webpage that where is my code written? It is better if I have stored all my java script file in one file then I can easily go there and whatever changes I want to do, I can do it. So my code becomes easy to readable.

Third is time-efficient as web browsers cache the external js files, which further reduces the page loading time. Means, this is very important point guys so listen carefully, whenever we load any webpage the content of the webpage is also loaded like it’s html content it’s CSS content if java script is added then java script content.

So whenever we load java script content, now we have written a small function in our current example which alerts us. So when we build large application there are many codes, that time it is better than loading all these codes with every page we load it only once and use it everywhere.

If I write all those java script codes in every html file, then my website becomes very heavy and it will not be loaded easily. So if we think in that way, then writing code in one place and loading it only once and then using it everywhere is very useful from performance point of view of our webpage. This makes our webpage fast and easy to load and it becomes very time efficient if we load it only once.

Next is it enables both web designers and coder to work with html and js files parallel and separately i.e. without facing any code conflictions. Let us say if I am a script developer and I have HTML developer with me if we work on same file at same time a conflict will be created from both our sides i.e. from java script developer’s side also and HTML developer’s side also so it is better if we keep java script file different and HTML file different. So two developers can work on two file at same time.

This makes our work parallel. When we work in a industry that time you don’t see a person waiting just because someone else is finishing their work. People always work in parallel way, tasks are always performed parallel manner. Two same person can work on same application same page at same time. So it is very useful creating external java script file, so that one person can work on java script file and one person can work on html file. After that there is no need to merge code because the file is already linked so that both can work at same time.

The length of the code reduces as only we need to specify the location of the js file. Means we just have to write code only once, in external file and we have link that in every webpage. For example, this is my message and I want this message to be accessible from two files so I will add my script line everywhere and I will the button also from which I wish to call it. Means three buttons will call only one message and it is easily approachable in all the three files.

So this is our third point that length is reduced of our code, the large code which I added in js file I don’t need to add that in all the three places. You just have to add the script line, once script is added you can use our java script file from any location.

So these were our advantages of external java script file. But if we are using our external java script file then it has it’s own limitations it has some disadvantages also.

(18:10)

First is, The stealer may download the coder’s code using the url of the js file. Means if I want to download my code which I have written in my js file I can very easily, in case if I know the path I can easily download it from js file. So our stealers who want these codes illegally, they just need to find one file instead of finding in every HTML file. So from security point of view it is not highly secure. We can say the stealer can take or code from one place he does not have to open all files and read it.

Second if two js files are dependent on one another, then a failure in one file may affect the execution of the other dependent file. For example here we have created msg.js file, if I create another file and I wish to access some content from first file for another file, for example if I have written here function but I create some function in which I call different function if inside message function (5 seconds gap ) let’s say there is a method named “another message” and my this method is in my this file, okay, so here from one js file I am calling function of another js file.

Now let’s say I don’t write anything in this js file or some error occurs in this js file so what will happen because of this my content from first js file is also affected because there is some error in another js file. So here because of linking of one js file to another js file the performance of my this HTML file will be interrupted because of it’s effect. Means if I am clicking this button my function will be called, but here another function is there with some problem which is in another file so that will affect my performance.

If two js files are dependent on another means if one js file is depended on another js file then failure of first js or failure of second js file will affect the execution of first js file.

The web browser needs to make an additional http request to get the js code. For example currently we have three js files in our folder so this is my java script file and this is my html file both are placed at same place means if I remove js file from here and place it somewhere else in my system or in network I place it in some another system and make sure that this system is accessible by my current system.

It means whenever my html file needs to access the java script file which is placed in another system then my html file will send http request means we are increasing one request. Here it is written that our browser needs to send an external request. If I keep the code in same HTML file then no http request is needed as my code is already in my html file but if I add external js file then my http request gets added.

(22:12)

Next is, A tiny to a large change in the js code may cause unexpected results in all its dependent files. Means, let’s say I have a java script file in which I make huge change or small change, any change I make, but because of that an unexpected result is coming means what I am expecting my function to do is not happening but something else is happening, some kind of mistake or like that. For example, initially it happens we run code it is not necessary that result will generate in first attempt only, sometimes we have to look into deep and gradually as we move further our coding improves.

Let’s say the result we got is wrong in our first attempt, then what will happen? My external js file which is showing wrong result and to whichever html file that file is linked in all those files that wrong result will be reflected. We may have witnessed this in even real time scenarios, let’s say our airways website or railways website or bus booking websites are there, when the users push some wrong code while working then we are able to see that from our system as well as from our friend’s system. Everyone’s system will reflect that mistake.

So this was an example of when we use common things for every user then that common mistake is also shown to every user. So that is possible in our external js file case.

We need to check each fie that depends on the commonly created external java script file. Means we need to check all the files create with external js file, if we have to perform some problem solving equation.

If it is a few lines of code, then better implement the internal java script code. So our last line tells us that if we are not working for a large application, if we have to write few lines of code which is necessary for only one html file, then adding that code in one html page is feasible for us. Means for example, what we have done currently is, this our html file 3, in this, we are just doing it for demo purpose so we have just added an alert message which we are calling from this file, so if we have to do such small task then there is no need to create an external file, you can just add this small task in our html file and access it from there only. But make sure the task is really small, if the task is big and is going to be used in more than one places then creating an external file is more useful. In case of small task you can keep it in same html file only.

So these were our advantages and disadvantages. In our today’s topic we saw adding java script n body, adding java script in head, and how can we add external js file in our current html file. We learnt all these things, and parallel to that if we are adding external file then what are it’s advantages and disadvantages. So guys, you can add as you want based on the requirement, if the task is small, external file is not required then add in html but if the task is big many codes are going to be used, in future also it is going to come you are creating an application in that case you can use external java script file. In today’s segment if you have not understood any part or you have any query then inform us on forums.learnvern.com. We will try to revert you back with solutions to all your problems.

Our next topic is comments in java script that is how we can add comments in java script.

Thank you.

( video duration – 26 min 51 seconds)