Course: JavaScript

Progress (0%)

  1. Foundation

  2. Numbers

  3. Strings

  4. Conditions

  5. Loops

  6. Arrays

  7. Functions

  8. Objects

  9. Exceptions

  10. HTML DOM

  11. CSSOM

  12. Events

  13. Drag and Drop

  14. opt Touch Events

  15. Misc

  16. Project: Analog Clock

JavaScript Introduction

Chapter 1 20 mins

Learning outcomes:

  1. Frontend vs. backend technologies
  2. What is JavaScript exactly
  3. Statistics of JavaScript — common tools, average salaries, surveys
  4. What can JavaScript do
  5. History of JavaScript
  6. Why should we learn JavaScript

Frontend vs. backend technologies

Before getting introduced to JavaScript, it'll be worthwhile to understand the distinction between frontend and backend technologies and see where exactly JavaScript stands. If you're already familiar with this distinction, feel free to skip this entire section.

So what is a frontend technology and how does it differ from a backend technology?

To start with, the terms 'frontend' and 'backend' are most commonly associated with web development which is one of the most prolific fields of computer science and software engineering.

A frontend technology is basically anything that is concerned with building the frontend of a website or web application. The 'frontend' is simply whatever the user ultimately sees on his/her device.

The three core frontend technologies are HTML, CSS, and JavaScript (so, it's related to the frontend). We can't imagine even any simple website today without all three of these — they sit right at the heart of the web!

Following from the increasing complexity of web apps over the years, we now have many many new frontend technologies to help us in designing and adding interactivity to our web applications. They include things such as Angular, Vue.js, React, Bootstrap, Tailwind, SASS, SolidJS, Svelte, and so on and so forth.

On the other side of the mirror we have backend technologies.

A backend technology is simply anything that is concerned with the backend of a website or web application. The 'backend' refers to the web server. Hence, a backend technology is anything that runs or helps perform computational tasks on the server of a website.

Some highly popular backend technologies are PHP, Python, Ruby, Java, Go, Redis, MySQL, PostgreSQL, and lots and lots of frameworks built around these languages and database systems.

Before beginning to learn any new web technology, it's crucial to know exactly which category it falls in. That helps us possibly guess what we can and can't do with the technology.

JavaScript, as we learnt above, is a frontend technology.

So what does it exactly allow us to do on the frontend? Let's see it...

What is JavaScript exactly?

JavaScript is a programming language created by Brendan Eich in 1995, originally for the Netscape Navigator 2.0 web browser.

It's a high-level, scripting language that is parsed and executed by a web browser program.

By 'high-level' we mean that the JavaScript code is highly readable and very easy to write and reason about. It closely resembles natural English language whereby we don't have to worry about many of the internal complexities of machines when programming, in contrast to a low-level language such as assembly.

Being a scripting language means that JavaScript is powered by another language that's capable of parsing and executing the programs, otherwise known as 'scripts', written in JavaScript.

A scripting language, like JavaScript, PHP, Python, operates inside a virtual environment that's powered by another program, often called the engine of the language, in contrast to being compiled into native machine code and then run on its own, like C or C++.

The engine is sometimes also referred to as the implementation of the language. The most popular implementation of JavaScript is the V8 engine, developed by Google.

What is an implementation?

A computer language is merely an idea, an abstraction, for talking to a computer.

JavaScript is an example of a computer language. So is C, so is PHP, so is Python, and so on. A language on its own is just a set of grammatic rules (syntax) and their meanings (semantics) — nothing more that that.

A piece of software that is capable of understanding a piece of text written in a computer language, and then possibly even executing it depending on the language, is called an implementation of that language.

The implementation is free to use any methodology to bring the mere lines of text of the language to life by compiling them or executing them, as appropriate.

Some common methodologies are compiling the program into native machine code, as happens with C and C++; interpreting the file in the old-school way reading each statement sequentially and executing it; or a more hybrid approach bringing the best of both these things into the equation, often called JIT compilation, as happens with JavaScript in the V8 engine and with PHP in the Zend Engine.

There might be, and usually are, numerous implementations of a language. Theoretically, a language's implementation could even be written entirely in the language itself and many already have been!

The V8 engine runs inside Google Chrome and is responsible for executing JavaScript therein. In other words, if we view a webpage on Google Chrome, all the JavaScript code that we interact with in there is powered by V8.

The V8 engine is written in C++ and is able to optimize JavaScript code to extremely efficient running times. It's even used in the popular server-side runtime environment called Node.js, where JavaScript powers the backend of a web application.

Besides V8, there are other popular JavaScript implementations as well:

  1. Mozilla has its own engine called SpiderMonkey. In fact, going back in time, this was the very first implementation of the language which merely interpreted JavaScript source code.
  2. Safari uses the engine JavaScriptCore.

The friendly competition between all these implementations with one another constantly transforms JavaScript into becoming more and more efficient than ever thought of before, all thanks to a theory known as JIT compilation.

Back in the day, JavaScript was purely interpreted. However, nowadays, this is not the case for most engines. Instead, they use a hybrid approach that mixes together interpretation with compilation.

For us, we just need to know one thing which is that when we make any changes to a JavaScript program, we can go on and immediately run the program — we don't have to compile JavaScript to a machine code executable and then run it.

Moving on, like most mainstream languages, JavaScript supports more than one programming paradigm, i.e. the style in which programs are written.

In particular, it supports the procedural, object-oriented and functional paradigms.

We'll explore each of these paradigms in detail throughout the rest of this course.

JavaScript is imperative by nature which means that source code describes 'how' something is done (by the different commands and statements used therein).

However, a declarative style can be achieved easily via its functional paradigm. In a declarative style, which is the opposite of the imperative style, source code describes 'what' is being done — the 'how' portion is abstracted away from the programmer by the language.

If all these terms are completely new to you, don't get worried — you'll get to know about all of them throughout this course and your journey of programming.

Moving on, as for the grammar and syntax of JavaScript, it's mostly influenced by Java and C. Most of the structures provided by JavaScript resemble similar C-like structures. Hence, if you're coming from a Java or C background, you'll pick up the syntax of JavaScript very quickly.

Into the stats

JavaScript, as of today, is quite a mature language. There are numerous tools built around it that are frequently used in web development and other software development concerns.

Let's take a brief look over some of these tools.

Awesome tooling

To aid in creating complex web applications, we have the provision of a handful of sophisticated JavaScript frameworks, abstracting away much of the complexity of app development. To name a few, there is:

  1. Angular, built by Google, to develop robust web applications.
  2. Vue.js for building user interfaces, created by Evan You.
  3. Svelte"a radical new approach to building user interfaces."

In addition to these frameworks, there exists a plethora of libraries to aid in performing complex tasks such as constructing UIs, visualizing data, lazily loading media, polyfilling unsupported features across browsers, and so on and so forth.

By far, one of the most popular libraries of JavaScript has been jQuery. It was released in 2006 with one simple goal: to aid in accomplishing simple tasks that were otherwise cubersome in plain JavaScript, owing to the inconsistencies across browers and the nature of the involved interfaces.

In addition to this, we have other libraries such as:

  1. React, built by Facebook, to help us create interactive user interfaces.
  2. D3.js for data visualization.
  3. anime.js for complex animations.
  4. Chart.js for creating graph and chart diagrams.
  5. Swiper for creating highly-interactive mobile touch sliders.
  6. Lozad.js for lazily loading resources.
  7. Modernizr for detecting and polyfilling features across browsers.
  8. MathJax for mathematical notation.
  9. Mocha for unit testing JavaScript code.

...and so on and so forth.

This is just a brief overview of the huge ecosystem of JavaScript at our dispense. If we add server-side frameworks and libraries into the equation as well, then it'll require a whole article on our side just to list and give a one-liner description of each of the technologies!

Moving on, let's now talk about the salary of a JavaScript developer.

Average salaries

Can we really expect good figures here?

Surely YES!

JavaScript developers have real significance in today's diverse web. New web applications are being made almost everyday while the existing ones are being continuously reshaped.

It's such a lucrative programming language that even complete newbies can expect a good income from their very first JavaScript job.

But what really is that good income, in numbers?

According to Indeed, the average JavaScript developer salary in the United States is approximately $100k. This is quite a remarkable figure. Similarly, according to PayScale, the average salary is close to $90k.

Furthermore, as mentioned on Talent.com, the average salary for an entry-level JavaScript job in the United States is around $90k while that of an experienced position goes as high as $150k.

Obviously, this all varies across different countries, cities, salary surveys, and most importantly, across different experience levels.

Nonetheless, if you're a JavaScript developer, you can for sure expect a pretty decent salary even if you are applying for your very first job in JavaScript!

Let's now talk about some surveys conducted before that help justify the popularity and potential of JavaScript.

Popularity of JavaScript

According to the StackOverflow Developer Survey 2021, JavaScript was the most popular programming language with over 60% of the total votes. To suprise us, JavaScript has maintained this position consecutively in the survey for the ninth year!

Furthermore, as determined by the HackerRank 2020 Developer Skills Report, the best known language was JavaScript. In fact, it has maintained this position throughout the years 2018 - 2020!

Clearly, these aren't some mere achievements — they are purely evident of the widespread popularity of JavaScript across the entire developer community spread across the entire world.

To boil it all down, JavaScript is a very good option for anyone — be it a beginner, a mid-level, or an experienced developer — to learn.

There is a mind-boggling ecosystem and scope of the language with staggering salary figures and jaw-dropping survey achievements that all together are evident of the fact that learning JavaScript is a fruitful idea that'll surely improve your portfolio and technological inventory.

What can JavaScript do?

JavaScript has received an overwhelming amount of new features over the decades since its initial release on the Netscape Navigator in 1995. Back then, many many things weren't even thought of in the realms of JavaScript, but today they are routinely done in it.

To be specific, let's list down some of the thousands of things that could be done using JavaScript. It's time to explore its real potential.

JavaScript can be used to:

  1. Add, update and remove HTML content dynamically.
  2. Add, update and remove CSS styles from specific elements or the whole document.
  3. Make web pages interactive by listening to events.
  4. Download resources as needed.
  5. Get dimensions of given elements.
  6. Validate and interact with form data.
  7. Work with timers.
  8. Process cookie information and even create cookies.
  9. Enable drag-and-drop behavior.
  10. Create highly-controlled animations.
  11. Store data locally via the HTML5 Storage API.
  12. Create real-time web socket communcation.
  13. Interact with the microphone and camera hardware.
  14. Create 2D or 3D games using WebGL and other low-level APIs.
  15. Asynchronously talk to a server.
  16. Perform multithreading via service workers.
  17. Paint graphics using the canvas API.
  18. Work with audio and video media.
  19. Collect analytic information.
  20. Create Single Page Applications, or SPAs for short, resembling native desktop applications.
  21. Work with binary data using array buffers.

But why JavaScript?

Before learning any new technology in the world of computing, the first question that comes to the mind of the learner is 'why should I learn this?'

Let's try answering this question for JavaScript.

No installations required

The best thing about learning JavaScript is that you don't have to carry out even a single installation on your side to set up its execution environment. All you need is a web browser installed on your operating system, that's it.

Popular language

JavaScript is undoubtedly amongst some of the world's most popular languages, as you have seen in the stats above. Every website uses it in some form or the other. It's the only programming language that can be used on the frontend.

Huge support already available

Owing to the fact that JavaScript is extremely popular, it has a huge community of developers to help you out in anything you can't understand. Name anything you are confused about in JavaScript and there is a 99.999% chance that it may have already been asked for and answered.

Developers are continuously developing pages, creating helpful tools, writing blog articles to increase the awareness and core understanding of the language.

Very easy to learn

As we said even earlier, JavaScript is not a difficult language to learn. It has a very simple syntax and abstracts away tons and tons of machine-level detail from the end developer.

It is surely huge, but not something that'll require a lot of effort to get into our minds, as opposed to languages such as C++ that do have some sort of direct correspondence with machines in their syntax.

Can open up new learning paths

Learning JavaScript means that you can try exploring out famous JavaScript libraries/frameworks such as Angular, React, Vue.js, Svelte, D3.js, etc. All these tools are built on top of JavaScript and so knowing the language could mean that you can better understand their functionality and logic.

Learning JavaScript also means that you could go on to learn other languages such as PHP, Python or even C. That's because by the point you start learning these languages, you would've already tasted the flavor of programming.

Knowing one language really helps in learning others, and JavaScript is a very good choice for the very first programming language of a newbie programmer.

From now onwards..

Now that we have covered some solid ground on the details of JavaScript, it's time to start exploring it.

Starting from the next chapter and then going all the way to the very end of this course, we will introduce you to each and every single aspect of the language that'll ultimately make you capable enough to build any program whatsoever for the frontend.

In short, it'll be an amazing journey of learning one of the most popular languages out there!

The real question is: are you ready?