In the Previous Tutorial, we learned the following –
- Is JavaScript an Object Oriented programming language?
- What is Object Oriented Programming (OOP)?
- What are OOP principles?
- Why should you care about JavaScript and OOP?
- Prerequisites for this tutorial
In this tutorial we’ll continue that learning and setup our system so that we can learn by doing, instead of reading dull & boring information.
Let’s get started.
Installation
The beauty of JavaScript lies in that it has built-in support for browsers. So we won’t have to install tons of things to make it work.
Google Chrome browser
I’ll be using Google Chrome Browser mainly for its Developer Tools. If you right click over any opened page in Chrome and select Inspect, it opens the Developer Tools either in the lower part of the browser or in the right pane (depending on your local configuration).
We’ll mainly be using its Console tab to play with JavaScript objects and verifying console messages. Want to experiment? Type window in the console and press enter.
Visual Studio Code (VS Code)
- Download Visual Studio Code (VS Code)
- I’ll be using VS Code as a code editor. While you can use any other editor, I’ll recommend it for ease of use and high flexibility.
- I’ll be using VSCode’s extension Live Server to host a basic server. You can use any other server. However if you want to use live Server this is how you can configure it –
- Launch VS Code
- Click on the Extensions icon in the left panel and search for extension “Live Server”. Click on the Install button to install the extension. Note: In the below screenshot you are not seeing Install button because it is already installed in my system.
- Once you have installed the Live Server all you need to do to turn it on/off is to click on the Go Live icon at the footer of the VS Code. The current opened folder in VS Code will act like the root of the server.
Creating folder and files
- For the sake of simplicity I’ll be using only two files – one to serve HTML and the other one to hold JavaScript.
- Create one folder named “OOJS“.
- To open the folder in VS Code select File -> Open. Go to the directory where OOJS folder is created and select that folder.
- Create two files “index.html” and “myjs.js”.
Writing boilerplate code
- To test the setup our myjs.js file will contain only one line of code
console.log('Hello World');- Now open index.html in VS Code and include some boilerplate code. And here comes the magic of VS Code. Just type ‘!‘ without quotes and press tab. Refer the gif below, it should add following boiler plate code –
- Modify index.html and make it refer myjs.js file. This is how the final code should look like –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Object Oriented JS</title>
</head>
<body>
<script type="text/javascript" src="./myjs.js"></script>
</body>
</html>- If the Live Server is not running turn it On and navigate to the following URL in Google Chrome to access our website – http://127.0.0.1:5500/index.html.
- Open Developer Tools -> Console and if everything is setup properly you should see the following message – Hello World!
Summary
Congratulation!!! We’ve successfully configured our development environment. We did the following setup –
- Google Chrome & its Developer Tool
- Visual Studio Code (VS Code)
- Live Server (VS Code extension)
- Writing some boilerplate HTML and JavaScript Code
- Running the app and verifying Hello World
What are you waiting for? Let us join the union of JavaScript & Object Oriented Programming in the Next Tutorial.