Writing your first Javascript code - Javascript basics
Table of contents
Javascript is a weakly typed, high level, interpreted, object oriented, single threaded programming language. Its most popularly used for building the forntend of websites. About 98% of the websites on the internet are build using javascript. Since now you are not a noob, so I thought why not throw a more advanced definition of what is javascript. dont worry we'll soon debunk the jargons, but js is simply a programming language.
How to run JavaScript
Well in my previous blog I already told you two ways to execute js. You can run it in the browser or on your local system with node. If you have Node.js or any browser installed on your system, then open up any text editor you like, you can use nodepad or you can use what cool guys use, vscode a more optmized code or text editor. It has extensions like you can have in chrome, which makes it more powerful than just plain notepad. Once you have installed and opened vs code it looks something like this.
Like other text editor you can create files in any desired path. Just go to the file and select your path. Then click on the plus icon to create a new file. In my case you can see the icon beside the TUTORIALS text. Press that button to create a new file.
We will create two files. Once you press the create a new file icon, type the name of your file, we generally name the first html file as index.html, html is the file extension for html files. Now create a js file ending with .js extension, for example script.js can be the name of your js file, once that is done, in the html file paste this html code given below. you can take the help of emmet(a plugin built in vscode). for that in your html file, Just press "!+enter" and it'll generate the same code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
This is just boiler-plate code (common code that you need to write everytime) for html. Now in here you can use the <script></script> tag*,* just before the closing body tag (</body>) and insdie the script tag you can write js code. For example in js to print anything in the console, we use the console.log() command, and inside "" we type the text we want to print in the console.
<script>
//console.log() is a command to print something in the console
console.log("Hello");
// ";" is not compulsary in js
</script>
</body>
The above code is an example of what I just explained. now if you open the same html file in your browser, you can see the output in the console. after opening, right click on the browser window, then from the drop down select the inspect option then from the dev tools go to the console tab. Here you can see Hello is being given as output by the browser, in the console.
The chrome dev tools are basically tools that tells us what's going behind the scene when the browser runs your code. We'll learn more about it later. Among the devtools is one console section or tab that gives you the output of your js code. if you get any error you'll be able to view it here as well.
Now one more thing, when we have little js codes like just one console.log(), we can write that within the script tags but when we have may lines of codes,lets say 1000 lines of code, we write that in a separate js file and then link it with our html file. That's why I have made you create a script.js file. Now cut the js code within script tag and paste it in the script.js file. In the html file add a src attribute to the srcipt, this takes the value of the path where your js file exists. what this will do is. It will link your js file with the html file ( kind of like how we link external css ). After all these things, your script tag should look like this. Save both files and then goto the devtools(developer tools), you'll be able to see the same output in the console.
<!--the src attribute in script tag takes in the path to js file as value-->
<script src="script.js">
// your js code is in the script.js file
</script>
Out of browser( in terminal)
Now since we have got that out of our way, let's see how to run js out of the browser console and in your local system where you can see the output in the termial or command prompt. For that you dont need to do anything extra. In your vscode type "ctrl+~" shortcut, this will open up the terminal. Just like below image.
This generally opens your system's default terminal (powershell in case of windows). Remember I told you about node.js, the runtime environment for js, we'll need that now, so make sure you have installed that. Now in the terminal type node followed by the file name and press enter. Just after that you'll be able to see the output in your terminal. Just like this.
OK that's it. That might be a lot, but once you get a hold of it and keep practicing. It takes no time to become a seasoned js programmer. If you get stuck at any point, refer this blog as your manual and hope you'll be able to run your js code.
Revision
So let's do a recap. To print anything in js console we use the console.log() command and we can add the text in "" or '' which we want to print. ";" semicolon is not required to run the code, but it tells us the end of line and makes the code readable. We can run js in two environments. The browser console and in our local system through node.js( js runtime environment). thankyou for your time and hope you learned something, do checkout my youtube channel for videos on interesting topics like this. Thankyou and goodbye.