Hey everyone, welcome back and welcome to a brand new series on JavaScript. So in this video, we are going to start a new series that is complete JavaScript, in which we are going to understand everything about JavaScript from the beginner level to the advanced level. So in this video, let's start with an introduction to what JavaScript is and write a simple hello world program in JavaScript. So first of all, let's see what JavaScript is, right?
So JavaScript is just a programming language. Like you have Java, C, C++. Similarly JavaScript is also a programming language which was made for web applications. So the JavaScript language, if you are making a website and you have a web application, then JavaScript language is used to add functionality to it.
So JavaScript is a programming language of web applications. I am not talking about Node.js here. I know that we can use JavaScript without web applications.
But as a beginner, you should know that JavaScript is a web application language. So it is used in web applications. And the biggest doubt that comes to the mind of a beginner is that is it necessary to know Java to learn JavaScript? Or is JavaScript a version of Java? So there is nothing like that.
JavaScript has nothing to do with Java. It is just a version of Java. So, like car and carpet, both have the word car. But does car have anything to do with carpet? No.
Similarly, Java and JavaScript have nothing to do with each other. So, don't get confused. If you don't know Java, it doesn't matter.
JavaScript is a standalone language. So, JavaScript is just a programming language for web applications. Okay?
So, to use JavaScript, you have two ways. Number one, internal linking. and number two, external linking. Okay? So, what does internal linking mean?
That you will write your JavaScript code inside your HTML file. Basically, internal linking. In external linking, what we do is, we make a separate.js file for every JavaScript code and we write our code inside it and we link it with our HTML. Okay? Why HTML?
Because I told you that JavaScript is a web language. So, ultimately JavaScript executes on your HTML. But there are two ways of linking, internal linking in that file and external linking. So, in this video, we will understand both these linkings and make a small hello world program in JavaScript.
So here I have my VS code opened In which I have made a folder JS which stands for JavaScript And I don't have anything inside it right So what I will do is I will first make a 01 folder Because this is our first video And inside this let's make an index.html file So this is my normal HTML file So first we will write an HTML boilerplate code So we have an HTML Then we have a head Inside head we have a title So in title I can say Biyush and after that you have body and inside body we have h1 tag that welcome to complete js course so this is my html document so I will run this so to run this I have used an extension that is live server so you also install this extension This is the live server extension. So, what will happen is that whenever you write an HTML code, you can just right click and say open with live server. So, when you do open with live server, automatically your browser will launch and your code will execute on your browser.
So, this is our normal code, right? In which we have to execute our JavaScript. So first of all, let's see internal linking. So as we talked about internal linking, what I will do in internal linking is that I will write my JavaScript code inside this HTML file. So what I can do inside the body tag, so let's close this, so I will say script.
Because we have written JavaScript, so for that we will use a script tag. And under this particular block, which is this script block, whatever code I will write inside this, will be a JavaScript code. Okay, so this is internal linking and double forward slash means that it is a comment, it won't execute.
So, in this particular block, whatever code I write, it will be JavaScript code and it will automatically execute. So, first of all, let's print hello world. So, to print hello world or anything in JavaScript, we have something known as console.log. Like in C++, we have cout and printf.
Similarly, in Java, we have system.out.println. So, in JavaScript, we have console.log. What does this mean? That you have to log something on your console. What should I log?
Let's say I have to put a string in it. To put a string, what we use? We use double quotes. And in this, I can say Hello World.
Okay? So, as soon as I save it, it automatically formats. And if I go to my browser, you can see that there is no Hello World here. So, where is the Hello World printed? You have to right click and you have to go to Inspect.
And if I go to the console, you can clearly see that I have Hello World printed here. And it is also telling where it is coming from. It is coming from index.html line number 10. So, if I go back to my code, you can see, we have written on line number 10, Hello world!
Similarly, I can say console.log My name is Piyush. So you can write multiple console.logs So that will also be printed on your console So all the JavaScript outputs, errors and messages will be visible on this console. So this tab is called console So by default, you may have elements open So what you can do is just click on the console, your console will open and Because we said console.log, so basically we were talking about this console. So console.log, we logged something on this console, we printed something. So that's how you can write hello world.
So what is internal linking? Because I put my script file inside the HTML file. That's why it's known as internal linking.
Correct? And similarly, you can print numbers too. So I can say console.log 1. So if I write 1 here, then what will happen? My as it is 1 will be printed.
You can even write expressions here. You can even say 1 plus 1. So if I write 1 plus 1, it will automatically become 2. So you can even write expressions. And in JavaScript, there is no compulsory to put semicolons. You can put them, even if you don't put them, it doesn't matter. Like in C, C++ and Java, it is mandatory that semicolons should be there.
In JavaScript, it doesn't matter if you put them or not. It doesn't matter. If you don't put them, there will be no error.
Everything will work out fine. If you put them, it doesn't matter. But I have an extension installed that is prettier, which is automatically putting these semicolons. So you can even remove these semicolons, so there will be no error.
So that's how you can print Hello World via internal linking. Now let's see how we can do external linking. I mean, internal linking is fine, but I usually don't prefer internal linking.
Because when you work on a real application, then your code becomes very long and putting all the code here is not a good practice so here you just put UI related code here just put HTML code what I prefer is that we make a separate JS file and we will externally link that file so what I can do so in the 01 folder we make a file let's say we gave the name of this file script.js the name of the file can be anything but the extension of that should be.js So I have created a.js file here. And what I can do is I have to link this file here. So let's remove this.
So what I can say is script. Okay, script. And I can say src source.
And what I will do is I will give the name of my file. That is script.js. So this file is linked.
Now whatever javascript code I write here, it will automatically execute here. So let's write a console.log here. So I will say console.log. You can also add single quotes or double quotes for strings, it's your choice.
So I'll say that this is a hello from external.js file. So I've written anything here. And when I go back to my browser, so you can see I'm getting that this is a hello from external.js file. And from where is this console.log happening?
This is console.log from script.js line number 1. So if you click on this, so you can see your script. .js file and you can print it from the line number 1 of that script. You can even have multiple console.logs as we discussed earlier.
So you can say console.log that hey there. So as I wrote hey there, so if I go back to console, you can see that yes, my hey there is also coming. So this is external linking. and the best part is that you can mix both of them i.e. you know how to do internal linking and how to do external linking you can even do something like this so here you can add a script tag again and here you can say console.log hey again from internal script so I have added console.log here as well so if I go back to my browser, you can see First, our script.js executed and then our here again form internal came.
Why is that? Because I included the script first and then I run this block. Top to bottom.
If I cut it and paste it here, then this code runs first and then my external code runs. So now you can see, first the internal script, console.log from the internal and then my external code runs. So sequence matters, right? Because this top to bottom runs. So the scripts that will come first will run first.
So that's how you can use JavaScript in your HTML code. So basically you have internal linking, you have external linking. Both of them use script tag. For external linking we use something known as source. You can even have multiple JavaScript files.
So here I have another JS file, hello.js. Inside this console.log hello. And I can also link this. So what I can say, I can say another script tag, src. What will I name this file?
Hello.js and I will close this. So now this file will also be running. So now I can see hello. Why did it come last?
Because I put it last. If I had put it at the top, like if I had put it here, then this hello code would have run earlier. Correct? So you can have as many as script tags you want, internal linking, external linking.
I personally prefer external linking. And during this whole tutorial series, I will prefer external linking. So we will always make a separate JS file and run this JavaScript code in it.
So that's all for this video. I hope you got an idea of how JavaScript works, how to write hello world and how you can use JavaScript in your HTML code. So that's all for this video. See you in the next video.
Until then, bye bye, take care.