jsbasics
Published in

jsbasics

#1. Get Started with JavaScript

So here we begin the journey to learn an amazing, powerful, ubiquitously used programming language JavaScript!

JavaScript is evolving exponentially & every day you see new things added to it, lot of frameworks built around it. To keep up with such technology involves consistent follow up & scanning through lot of resources. In my learning journey the only resource i found that covered everything was the official MDN documentation. Its great in explaining the basics & but it will be little tough to follow for the beginners.

So, with the current series my aim is to bring in the best of javascript to the readers in the most simplistic way & in smaller size so that it is easy to follow & consume.

By the end of this blog you will be able to run a simple JavaScript program all by yourself!

So before we jump into action, let’s spend a minute in getting to know what JavaScript & Why do we need to learn it.

What is JavaScript?

It is a
- lightweight (small memory footprint, easy to implement, minimalistic syntax & features),
- interpreted/just-in-time compiled(does not need a separate build process to execute the code, the code is compiled during the execution or runtime)
- Prototype-based (Objects can be created & accessed without the Class creation)
- Single Threaded
(All the code runs on single thread making it lightweight & enabling it to run on even low resource devices)
- Multi Paradigm
(Supports various programming paradigms such as Object Oriented, Imperative, Functional etc.,) programming language.

If you were not able to follow or understand some of the terms don’t worry now, as this series will cover each of them in coming blogs. We need not be aware of all these terms to get started with JavaScripts.

Why do you need to learn JavaScript?

JavaScript is the probably the only language currently which is being used for

  • Web Development
  • Backend Development
  • Mobile App Development
  • IOT apps
  • Machine learning/AI Systems & more…

So, JS is highly values skill in the current market.

Let us get started!

The best thing about the JavaScript is that you don’t need any setup to learn & experiment code. You can start with Browser that you are currently reading this article on. However, you can chose to code in the IDE if needed.

All browsers can execute JS code natively, hence you can write the code in browser & load any JS code into the browser by including it in a HTML file.

1. Run JS natively in Browser

  • Open any browser of your choice, i choose chrome :)
  • Right click on the page & click on ‘inspect’ or press ‘F12’ key.
  • It will open the ‘developer console’ as shown below. Please have the console tab open. This is where we can execute our javascript code without the need of any IDE.
  • Please paste the below snippet of code
// Prints the 'Hello World' in the console
console.log('Hello World!')
  • Press Enter to see the result. Yay!
Sample output from the developer console

Whenever you want to quickly test any js code you can use developer console.

2. Run JS by including in HTML

Even though we can run quick code in the developer console, we cannot manage the code in it & needs to write in actual files. So let’s write some code in the files & load it.

Any JS Code, that needs to be run on the browsers has to be loaded via an HTML file. Create a test.html file in your machine paste the below content into it & open it in a browser

script section in where we need to write our javascript code. paste the below code inside the script tags.

alert(‘Hello from Script Section’)

Reload the page & you would see alert pop up in your browser.

However, it is not good to have HTML & Javascript codein the same file. So its better to move all your JS code to separate file & load inside the required HTML file. Any javascript code file need to saved with .js extension. Let’s give this a try as well.

Create a new file called test.js in the same location as test.html & paste the below content.

We can include any external JS file inside HTML using the same script tag. The updated HTML content will look like below,

Reload the page & you would see alert pop up in your browser from both the script sections.

The steps explained above are default process of executing the JavaScript for Front end or Web development. However, JavaScript is not limited to just web & can be executed outside the browser for developing backend or server side apps as well. This is covered in my upcoming the blog & link will be updated soon.

Hope this current blog was helpful, please share queries/feedback.

--

--

--

Series of blogs to explain JavaScript as simply as possible to enable better adoption & understanding

Recommended from Medium

Solid World February 2019 summary

Accessing Widget’s Size and Position in Flutter

How to Make Custom Pagination In React JS with Hooks

How to create a Pagination in React

JavaScript- Array remove element in forLoop

Ten important topics of javascript you have to know

Demystifying Scope in Javascript ⚡

Quick Sort Explained in Under 5 minutes

An animated image of a sorting algorithm

Should I use Node.js to Process My Images?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Subodh Kumar

Subodh Kumar

JavaScript Enthusiast & Visual Designer

More from Medium

Javascript: Basics 101 — Variables & execution context.

My understanding of JavaScript filter

Problem Solving in Javascript & HTML

Objects in JavaScript: An odyssey

Understanding Object-Oriented Programming on JavaScript.