Hey what’s up aliens done by our four telesco learnings and in this video tutorial we are going to be typing our very first JavaScript program that is the hello world program because all the program began with the hello world program right it’s a convention being followed so as before starting off with actually typing the code I want to talk about the software’s that we are goingto be using and we are only going to be needing two different types of software’s and one is actually the text editor wherein we are going to be typing the code and the other one is actually a basic browser yes we only need these two things and we do not need a separate integrated development environment which is sort of like Android studio or Visual Studio nothing that heavy we just need a basic text editor so even your system doesn’t need to be very high-end to run all these basic text editors so the text editor that I am going to be using is Visual Studio code by Microsoft so let me just show you that text editor so if you open up your browser and just type in Visual Studio code you will be redirected to this website and this is that text editor it is free to download it’s not child or it is not paid so you can just download it you can see free open-source runs everywhere it’s a basic text editor just like notepad plus plus or sublime text and I highly recommend that even you use this because I did some research and turns out that VisualStudio code is highly preferred for especially for JavaScript so I’m going to be using Visual Studio code even I am new to this text editor I’ve been using sublime text and notepad plus plus for I don’t know how many years but then yeah I’ve been using Visual Studio code for quite a long time now and I think it’s pretty good so I would recommend Visual Studio code for you the next thing is we require a browser and we already have it I have Google Chrome you can use we will grow more Mozilla Firefox I don’t know how the Internet Explorer handles JavaScript that is the s Explorer I have never used it so yeah my recommendations would be Visual Studio code for text editor and Google Chrome for the web browser so the reason why we don’t need any kind of other ide is because these browsers that is the latest Google Chrome or Mozilla Firefox or any other latest browser actually comes along with the JavaScript engine that runs the JavaScript code in-house itself you know so JavaScript is interpreted and basically, the fire that runs or execute the JavaScript is already embedded in these browsers and also most of these browsers that is the latest browsers have JavaScript by default enable so in your case if it is not enabled or if it’s not working especially for the chrome you just go to the settings search for JavaScript you can see in the content settings over your JavaScript is allowed so if it’s off you can just go to this and you can just turn it on so this was just about the two different softwares that would be you’re going to be needing let’s start off with our code now so I’m gonna open Visual Studio code okay so on the right-hand side I have my Visual Studio code text editor already open also the reason why we are using a specific text editor is that there are a lot of features when it comes to these text editors which are specifically for programming they have something called as syntax highlighting we have indentation we have debugging we have intelligence and whatnot you know you can use your basic notepad but that is not going to be as powerful as this there are a lot of features apart from what I just mentioned so I highly recommend you use a specific text editor you can go ahead with sublime as well okay so as you can see on the right-hand side I have a basic structure of an HTM document I have named it default dot HTML you can pause the video and you can type this code I would highly recommend that you type it out if you are abeginner please do not just read the code if you are a beginner the best way to learn to program is you actually type it out yourself and of course I will be sharing all these four files with you guys.
so you can check out the video description for all these files but I would recommend that you don’t copy and paste the code I would recommend that you type along with me and yes so this is a basic structure of an HTML document which is named as default dot HTML let me just show you where I’ve saved it so is the folder that I have saved it I’m just gonna double click it and run it and there you go you can see my title is running over here and as of now there is nothing inside this so that’s why it’s showing nothing it’s totally blank document so this is just the bare bone structure and now we are going to start off with our JavaScript code so there are two different ways in which JavaScript can be included in your HTML so either you can embed it right inside your HTML document that is inside this default dot HTML using the script tag so this is what the script tag is for or you can have a separate JavaScript file with an extension of dot GS and then you can include that javascript file in this default HTML again using the script tag itself so we’ll start off with method number one that is embedding the JavaScript in your default dot HTML file
itself so inside the script tag you just have to mention that type so I’m going to see it type and you can see equal to n double-quotes already came in typed along with it so that’s the power of this text editor and here we just have to mention what type of code are we gonna write inside the script tag so since it is JavaScript there is a default value for this so we have to say text slash JavaScript this is the default value whenever you want to include a JavaScript now even if you don’t include this entire attribute you
are good to go and I think your JavaScript would work but it is always better to actually mention it this type is an attribute of this script tag, okay so I hope you have a basic idea of HTML now inside this we are going to say document dot write in the opening and
closing round brackets that is parentheses inside the double quotes I’m going to say hello world now don’t worry I will be explaining to you what is document what is this dot right and so on and so forth but right now just pipe along with me give a semicolon save this and just refresh your web page and there you go you can see we got hello world
which means our JavaScript worked perfectly fine so talking about this document dot write line so this document is basically an object that represents the entire document so we’ve already seen what is the document object model in the previous video right so this
the document object is a by default object given in JavaScript which represents that entire document and then this dot right or this right is a function or a method which basically prints this message on the browser so you can directly print HTML tag as well so
inside the double quotes if I see H 1 and H 1 close so this is the heading tag so I’m going to say heading 1 if I save this and if i refresh this the entire heading tag is also printed right so the heading tag has its own style that as it is a bit bolder and it is larger in size compared to the normal paragraph text so you can completely print entire HTML
tags also using javascript okay so this was method number one that is including
or embedding the entire JavaScript in your HTML document itself now you can include the script anywhere on this page it does not have to be inside you can include it inside the body and it will still run if I see you this I’ll just change the name just for verification if I refresh you can see adding a tag to the deciding – so you can include it at the bottom outside the body you can include it outside the HTML if I keep it at the end and change the heading 2 heading 3 save it and run this you can see it is working perfectly fine
now typically when the JavaScript codevise off a lot of lines so let’s see you a hundred lines of code typically then the JavaScript is included at the bottom of the file because whenever your document is loaded whenever you run this default of HTML and the browser renders it takes a lot of time if javascript is at the top right because it goes line by line so it has to load all the javascript code first and then render there all divisions all the sections and all the parts of the HTML tags so that’s why typically when the code is large and when it’s going to be performing a lot of activities it is included at the bottom but in our case, we can include it anywhere initially because our JavaScript initially is going to be very small and it won’t have an effect on the performance okay so method number one then method number two is to have a separate JavaScript file as mentioned so I’m just going to double-tap over here and create a new file or you can click on
this or you can say file new file what I’m going to do is I’m just gonna copy this entire line or in fact, cut this line go over your paste it and I’m gonna save it as a demo and I’m gonna save it as a JavaScript file okay so in the same folder where we have our default or HTML I’m gonna save it as a demo and the type as JavaScript make sure you select
JavaScript if I had saved it’s saved as a JavaScript file you can see the code is highlighted I’m just gonna cut this and put it in the head so if you go to the file explorer you can see that we are all default at HTML and we have our separate demoed of GS file now to include this demo dot J’s file in the default or HTML file you have to again
use the script tag itself but we have to use another attribute which is known as SRC or source hit enter and you can see equal to n double-quotes already there and now we have to navigate where the J’s file is so since it is in the same folder we just have to give the name of the file that is demo dot GS and these have dot J’s as extensions if I had let me just go in the dot GS and let me make some changes I’m gonna say external
file save the GS file come back to the HTML file and now let’s try to refresh our browser and there you go you can see the external file which means this code worked perfectly fine we included the external demo dot GS file into our HTML document okay so these are the two different ways in which JavaScript can be used in our HTML code and this was a very basic program wherein we just printed some value on the browser so in
In the upcoming videos, we’ll see a lot more practicals and with that being said
I’m just gonna wrap this video over here I just wanted to show you a basic JavaScript code how it runs on the browser and the different software that we are going to use so that’s it for this video guys I hope you have an idea about how we are going to be using
Javascript two different ways in which JavaScript can be used in our HTML document in further videos we’ll start off with the proper syntax of JavaScript and understanding the fundamentals so thanks for watching guys if you like this video please give it a thumbs up to let me know in the comments how this video was to subscribe on this channel if you haven’t done subscribe and share it with your friends as well thanks for watching I’ll see you guys in the next video peace.
