What Is JavaScript?

Technology is advancing rapidly and web development is no different. New tools and services are constantly coming into existence to help you build the next big thing. It’s great to have so much innovation in web development, but it can be very intimidating for people who are just starting out in the field and have no idea where to begin.

You have probably heard terms like JavaScript, jQuery, React, and so on. In this article, I’ll take a very beginner-friendly approach to explaining what those words mean with a special focus on how JavaScript is related to jQuery and React among other buzzwords that you will hear very often as a front-end developer.

Before we start, I want to mention our free online course on How to Become a Web Developer. Follow along with this course and you’ll learn all the key web technologies, like HTML, CSS, JavaScript, and PHP! 

What is a Programming Language?

If you are an absolute beginner in the field and have never done any type of coding before, you might not even be sure what exactly a programming language is.

Think of a computer program as a set of instructions on how to do something. I am certain you have seen how we need to give careful instructions, step-by-step to kids on how to do something for the first time. The language for instructions can be English, Chinese, Hindi, Spanish or anything else. The point is that kids should be able to understand what you want them to do.

It is a bit more complicated but computers are similar to kids in this manner. You need to give them very specific instructions to get things done. The difference is that computers need a lot more instructions and they will always do what you tell them to do. The languages that are used to give these instructions to computers are called programming languages.

This is just a simplistic view of the job of programming languages. If you want to understand the history and theory of programming languages more deeply, I would suggest that you start with this article.

Just like human languages, there are a lot of programming languages around. They all have their own strengths and weaknesses making them useful for different tasks. Some are used to develop apps for smartphones (like Swift and Java), some are used to create websites (like JavaScript and PHP), while others might be used for creating operating systems (for example C and C++). The list goes on.

What is JavaScript?

You can entirely create a website by just using raw HTML. It gives instructions to computers on what to display on a webpage. However, HTML is not a programming language. It is a markup language as suggested by it’s full name: HyperText Markup Language. A markup language is intended to describe content, not to give instructions to a computer. Also, pages created with HTML alone usually don’t look very pretty and they aren’t very interactive.

You can make a website more visually appealing by adding CSS that goes with the HTML. CSS is used to tell browsers how they should display a particular piece of HTML. CSS isn’t a proper programming language either. It just tells the computer how to style a webpage. So, HTML tells the computer what to display, and CSS says what it should look like.

Next comes JavaScript. Now, JavaScript is a proper programming language. It runs inside the web browser or on the server and can do a lot of things. JavaScript is used by by front-end web developers to add interactivity and functionality to a webpage. This can include things like showing notifications or pop-up messages, responding to mouse clicks, creating animations, or validating data. It can also be used to dynamically update the content of a webpage after it has loaded. It’s also used on the back-end, to store and share data.

What are jQuery, React, Angular, and Vue.js?

There is good chance that you have heard one of these terms mentioned in the context of web development. They are basically all JavaScript-based libraries and frameworks written to address a unique set of problems. Although JavaScript is very powerful, and can be used to create almost any kind of browser-based app, it can be time-consuming and repetitive to code every app from scratch. That’s where libraries and frameworks come in—they encode some common patterns and best practices for creating apps. By creating a platform to build apps on top of, JavaScript libraries and frameworks save developers a lot of time.

In this section, I’ll provide a brief explanation of these libraries and frameworks.

jQuery

jQuery has long been one of the most popular libraries for JavaScript. It has helped many coders speed up the pace of their web development. It’s not the most cutting-edge library, but it takes care of a lot of work that had to be done by front-end developers in order to provide a consistent user experience across browsers. The library also comes with a lot of methods that make DOM traversal and manipulation (changing the content of a web page) an easy task.

Things have improved a lost since the early days of jQuery but the library can still be used to do things more easily than vanilla JavaScript.

React

React is also a free and open-source JavaScript based front-end library. Its purpose is to build interactive user interfaces. You can use it to build single-page applications.

Angular

Angular is a framework for building mobile and desktop web applications. Similar to React, it’s purpose is to build interactive user interfaces and single-page applications. Angular actually uses TypeScript, not JavaScript, but the languages are very similar.

Vue.js

This is yet another framework that you can use to build single page applications and web apps. It is smaller in size and comparatively easier to learn than Angular.

There are many more libraries and frameworks that you might hear about every now and then. If you are just starting out, my suggestion would be that you don’t worry about all these libraries and frameworks. Start with the basics of JavaScript. Try to create some simple projects using the language without relying on any library.

Learning the language itself is more important than just jumping directly into a framework. You will always need to have a deep understanding of JavaScript if you set out to create something complicated irrespective of the library or framework that you are using.

How to Get Started? Learn the Basic Concepts of JavaScript

It is important to familiarize yourself with the basics of JavaScript before you start thinking about creating something practical. Some of the skills and concepts could seem very alien to you if you have never done any programming before.

Things get easy once you have learned at least one programming language because the fundamental concepts stay the same. Different languages might introduce new features and get rid of some of the limitations of other languages but those will be easy to learn.

If JavaScript is the first language that you want to learn, there are some basic concepts that you should consider understanding. They will usually be helpful when you start learning other languages as well.

Variables

Variables are an important part of all languages and not just JavaScript. You can use them to store and manipulate information about anything like keeping track of total number of images on a webpage.

Different languages have their own rules about declaring variables and where the value of those variables will stay well-defined etc. MDN provides a good deal of information about variables in their introductory series.

Arrays

Let’s say you want to keep track of the value of src attributes of different images on a webpage. Coming up with a unique variable name to store them all will be error-prone and won’t have much utility. You will most probably want to manipulate them as a group. This is where arrays become helpful.

This MDN tutorial covers the basics of Arrays in JavaScript pretty well.

Strings

Strings are used to store textual information. This can be a single character or entire sentences and paragraphs. JavaScript gives you access to many useful methods once it knows that you are storing a string in a variable.

Once again, MDN will teach you all the basics of strings that you need to know.

Functions

There are some things that you would want to do again and again when writing code. This could include things like creating darker shades of a given color. Use of functions helps you avoid code duplication. You write your code and give it a name to call it again from different places.

Functions are also described in detail on MDN. There are many things that you will learn there about functions on the page.

Learn JavaScript With a Free Online Course

If you want to become a web developer this is the course for you. In this course, Envato Tuts+ instructor Jeremy McPeak will teach you everything you need to know to get started with web development. You’ll start by learning how to create web pages using HTML, CSS, and JavaScript. 

You’ll learn how to do DOM manipulation in jQuery and vanilla JavaScript, fetch JSON data, use CSS transitions, and more. 

Not only that, but you’ll also go on to learning one of the fundamental languages for back-end web development: PHP. You’ll learn how to set up a server on your own computer for development, and how to create a simple PHP application to render a web page. By the end, your app will be able to receive data from the user and respond to it.

It’s easier than you think!

Where and How Can I Practice my JavaScript Skills?

The best way to learn any skill is to start doing it. This is applicable to any new programming languages that you want to learn as well. In this section, we will show you the steps you can follow to take your JavaScript skills to the next level.

Browser Console

There is no need to install any special applications to run JavaScript. You can start writing and running JavaScript code in your desktop browser itself. Desktop browsers come with a JavaScript console that you can use. Here is a screenshot of the browser console in Firefox.

Online Tools

Writing code in browser console is great if you are just starting out but you will need to write more complicated code at some point. There are a variety of websites with user-friendly interface that allow you to write your JavaScript code along with HTML and CSS.

Two popular ones that come to mind are JSFiddle and CodePen.

Reading Code from Open Source Projects

One awesome thing about programming is that people will solve different problems according to their own thought process resulting in some unique solutions.

You should start implementing your own solutions for different things once you are confident that you know the basics of JavaScript. You can then head over to GitHub and read the source code for projects that do something similar to you. This is beneficial irrespective of the fact whether you could implement it own your own or not.

Final Thoughts

Our aim in this article was to help people who might have never learned any programming languages and want to start with JavaScript. Hopefully, you know have a basic idea of what programming is and how you can get started on your journey to learn JavaScript.