How to Learn Javascript — JavaScript Tutorial

7 min readSep 4, 2019

JavaScript — along with HTML and CSS is the indispensable triad for building web front-end. If you want to build webpages, follow this, we will give you the instruction: How to learn JavaScript — JavaScript Tutorial.

What is JavaScript?

JavaScript is a programming language for web that allows you to implement complex things on web pages. JavaScript involves in every action that makes webpages “variable” — it adds the interactive and behavior to a statistic web page. For example, Facebook, Youtube, and Amazon use JavaScript as their client-side language. As you can see, all the animated 2D graphics, menu, dialog boxes, interactive maps, scrolling down button and much more are the result from programming with JavaScript.

JavaScript now has extended its power to both client-side and server-side, from desktop to mobile. Most web browsers include Chrome, Firefox, Safari, IE, Opera… and mobile browsers are supporting JavaScript too.

In front-end development, JavaScript can execute some feature that allows you to:

Interact with users: We can write code in response to certain events occurring on a web page.
Declare variable then store and retrieve value inside variables
Define classes, functions

And much more.

Top 3 reasons why you should learn JavaScript

It’s a friendly programming language with Beginner

Javascript is not a complex-structure language so you can learn it without any difficulty. More than that, you can start coding straight from your browser without setting up any development environment. Just focus on learning how to code because javascript has abstracted away most of the complex details of the machine. Finally, it also has a variety of range of support tools and libraries and frameworks that we will figure out later. But remember to learn the basics before moving on to what at the higher level!

It has a large community!

A large community means greater support. Every time you get stuck, ask someone in your community. Best of all, in a large community, there will always be people who build useful tools to make the JavaScript code process faster. Learn JavaScript has never been easier!

More than that, they also contribute to the community with many free available learning resources on the internet; some site you can check it out is CodeAcademy, CodeSchool, W3chools, and others. You only need to search “learn JavaScript” on Google and thousands of results will show up.

It brings you greater career opportunity!

As companies or services are more and more focus on developing a website for themselves — JavaScript will only increase in popularity and technology will be improved every day.

The demand for JavaScript developers in companies has always been increasing and their salaries and benefits are not small. A survey from StackOverFlow also shows that the average salary of JavaScript developers is about $56k.

How to learn JavaScript

We will start by looking at some typical requirements from a company when recruiting a JavaScript Developer:

So as a starter, you must absorb some knowledge about:

CSS and HTML
Solid JavaScript foundation
JavaScript Frameworks, Tools and Libraries
Understanding of OOP
A plus point with testing knowledge

Let’s figure out in detail on how to learn JavaScript:

HTML and CSS

HTML stands for HyperText Markup Language. It helps users to create and structure elements in websites or applications, split paragraphs, headings, links, blockquotes, and so on…

HTML is not a programming language; means that it cannot create “dynamic” functions. It is just like Microsoft Word, used to layout and format web pages.

CSS or Cascading Style Sheet describes how HTML elements are to be displayed on a screen, paper, or in other media. People used CSS to specific web pages’ style with favorite fonts, rational layout, and prominent color. If HTML is the foundation then CSS is absolutely an aesthetic element.

So, why are they related to JavaScript?

As we said before, JavaScript makes a webpage variable. Just HTML and CSS can only make a static website without any interaction with users. With JavaScript, we can update and change both HTML and CSS. Latest version is HTML5 and CSS3.

You can learn about CSS and HTML at:

Basic JavaScript

Once you know how to program a static web with HTML and CSS, it’s time for you to create a dynamic web from JavaScript. These are the most basic knowledge that you need to master when programming with JS. First, figure out how JavaScript Embedded with HTML. Then research about the variables: Basic variable type (number, string, array, object, and functions) and how to declare it. You also have to learn about control flow (If…ElseIf…Else, switch), basic loop (while, for), JavaScript Operator (Assignment, arithmetic, string, and comparison), function (used to group a block of code to execute it as many times as you want)

You can learn about JavaScript at:

Object-Oriented Programming

At University, Object-Oriented Programming (or OOP) is a difficult subject that every IT student must pass through and the priority knowledge when recruiting. Some OOP programming languages: JavaScript, Python, Ruby, Golang, C++

OOP is the art of observing objects in their natural appearance and trying to capture the functional abstract in descriptive programming way and to visualize them as virtual-workable objects

In simple words, OOP helps to solve the problem by observing and imagining the action and attribute of the object in real life then bring it in programming as a virtual object.

OOP has four main attributes:

Abstraction
Encapsulation
Inheritance
Polymorphism

Some resources you can learn from — especially OOP in JavaScript:

JavaScript Frameworks and Libraries

JavaScript Libraries are the collection of pre-written JavaScript code that can be used or reused to perform a common JS task. Libraries help you save wasted time when rewriting a block of code. Libraries are only a tool without any direction or opinions about what you have to do, you can use it flexibly according to your need.

Two famous JavaScript Libraries are jQuery and ReactJS.

JQuery helps simplified interaction with DOM and Ajax in JS. It provides APIs that make it easier to browse HTML documents, animation, event handling, and follow AJAX actions. Learn Jquery, jQuery 101: A Quick Intro Tutorial and W3School — JQuery are three resources you can have a look at.
ReactJS is a JavaScript library that specializes in helping developers build attractive, fast and effective user interfaces. Launched by Facebook in 2011, ReactJS now become more and more popular with over 1,300 developers and more than 94,000 websites in use. Some course to learn are Tech 101: What is React JS guide, React Crash Course and Official Facebook documentation

On the other hand, JavaScript frameworks are a full toolset that helps shape and organize your website or web application. Frameworks provide a structure or instruction to base your entire project.

Commonly used JS Frameworks are AngularJS and VueJS :

AngularJS is an open-source framework developed by Google for building the complex front-end. It is an MVC framework provide two-way data binding between model and view. When you need a framework that can handle everything to build a complex front-end web application then AngularJS is the right choice. You can learn how to use AngularJS at Thinkster.io — A Better Way to Learn AngularJS, CodeSchool — Shaping Up With AngularJS and AngularJS.
Unlike AngularJS, VueJS is a progressive framework use MVVM model (The different between MVC and MVVN here) allows developers to build app step by step. Vue is designed from the ground up to be incrementally adoptable. A few resources you can refer to are https://vuejs.org/, Vueschool, and VueJS Fundamentals

There is no related between these libraries/frameworks, but we recommend that you should learn from an easy level to some difficult ones because Angular and React have a complex architecture. Hence, you must have a solid base of JavaScript then move to JQuery and Angular or React for the last.

Testing

Who said testing is not important for a developer? It really is. The goal of Testing is to reduce risk by proactively finding and helping eliminate problems that would most greatly affect the customer using the software. Testing is really important for your code to work the way you expect it to. It gives you satisfaction and a sense of security. Jasmine is one of the most favorite testing tools you can follow.

Some basic unit testing course you can learn at:

Maybe all these fundamental JavaScript knowledge above will make you feel dizzy but believe or not, these are the basic foundation you must know if you want to learn Javascript!