Abdul Rehman

My coding journey

JavaScript-Blog 1

What is JavaScript?

JavaScript is a lightweight programming language commonly used by web developers to add dynamic interactions to web pages, applications, servers, and even games. It works seamlessly alongside HTML and CSS, complementing CSS in formatting HTML elements while providing user interaction, a capability that CSS alone lacks.

Pre-requisites

  • HTML
  • CSS

Setting up environment for JavaScript

We must have at least two things, a browser, and an editor to write the JavaScript code. While JavaScript can be written in any text editor, I highly recommend a full Integrated Development Environment (IDE). IDEs provide us with extra features and functionality such as code highlighting, linting, debugging, project management and more. So, I will be using Visual Studio Code as IDE and Google Chrome as browser.

Download and install the Visual Studio Code for windows. Click here.

  1. Create a new text file in vs code and save it as “script.js” (or any name) in your “JavaScript” folder (.js is the extension for javascript file). We will be writing code in this file.
  2. Go to “file” in the upper left corner of vs code and click on “open folder”. Now open the folder in which you saved your file. Click on explorer in the left bar of vs code (just under the “file” tab). You can see a folder named JavaScript (or the name of your folder) here. Click on the folder and you can see your “script.js” file here.
  3. Right click on empty area in the explorer and create a new file and name this “index.html”. An html file will be created in your JavaScript folder. Open this file and press shift+1 and press enter. VS code will generate the boilerplate code for html.
  4. Now write <script src="first.js"></script>” after the body tag in your html file. This will link your html file with javascript file.
  5. Write console.log("Hello World!"); in your javascript file and save it.
  6. Go to the folder where you saved your files and open index.html. It will be opened in Google Chrome. A blank page will open. Right click and select “inspect”.

Leave a Reply

Your email address will not be published. Required fields are marked *