Introduction to JavaScript

From the very beginning

Field notes while going through the JavaScript Roadmap

Photo by Luca Bravo on Unsplash

What is JavaScript?

• JavaScript is one of the core technologies used in the World Wide Web (alongside HTML and CSS)
• It is a scripting language typically used to make webpages interactive by programming the behavior of web pages — sliders, alerts, click interactions, popups, etc.
• Modern web browsers support JavaScript through built-in engines
• JavaScript was originally created for the browser. But since the creation of NodeJS in 2009, this runtime engine allows JavaScript to be run outside of the browser. Now we can build real-time, scalable web applications, servers, build desktop applications with Electron and create mobile apps with React Native, etc.
• It supports object-oriented, imperative and delcarative (e.g. functional programming) styles

History of JavaScript

• On 25th December 1990, Sir Tim Berners-Lee introduced the first web browser — WorldWideWeb. It was created on the NeXT computer system in Switzerland — around the same time he created the first web server
• In December 1991, Al Gore invented the internet. He introduced the Gore bill which funded the first browser — Mosaic — developed by Marc Andreessen and Eric Bina at the University of Illinois
• In January 1993, Mosaic was published for UNIX systems. It was the first web browser that introduced the Internet. No JavaScript existed at this point — only the DOM which had yet to be standardised
• In 1993, Andreessen graduated and co-founded Netscape in California. With Netscape Navigator holding over 80% of the browser market share within the first few years, Andreessen noticed that browsers would need to become more dynamic and required a new language to do this
• JavaScript was created by Brendan Eich of Netscape in 1995. Originally it was named Mocha, then later renamed to LiveScript (in September 1995). In 1996, after its release, NetScape decided to rename it to JavaScript (to capitalize on the Java community) even though there was no correlation to Java (while its syntax slightly resembled it)
• In 1996, Netscape submitted it to ECMA International to develop standards for the language. ES1 (1996), ES2 (1998) and ES3 (1999) were released
• No changes were made for a decade since 1999. There was a plan to release ES4 by 2008, but had political issues concerning language complexity and battling compatibility issues between different browsers
• jQuery made way in 2006 which paved way for empowering developers to build web applications. Google Chrome and the v8 engine was released in 2008, another significant milestone for building high-performance applications
• In 2009, Ryan Dahl introduced NodeJS which was built on top of the v8 engine
• From 2010, JavaScript frameworks started booming for single page applications — Backbone and AngularJS being the most popular at the time. The designer of backbone (Jeremy Ashe) also created CoffeeScript which is an important part of JavaScript history as it was the first language that made transpiling mainstream
• ES6 (ES2015) included significant features for writing complex applications. These include: Classes, Modules, Arrows, Enhanced object literals, Template strings, Destructuring, Default param values / Rest / Spread, Let and Const, Iterators, Generators, Maps and Sets, Proxies, Symbols, Promises, Math / Number / String / Array / Object APIs, etc
• In 2015, the emergence of ReactJS (inspired by AngularJS with declarative UI) improved the unidirectional dataflow immutability and the use of the virtual DOM — it solidified declarative UI patterns
• While browser support for ES6 was scarce, it was still available to use as transpiling from ES6 to ES5 was possible.
• ES7 (ES2016) — Introduced the exponentiation operator ** and Array.prototype.includes
• ES8 (ES2017) — Object.values() and Object.entries(), String padding, Async functions, etc
• Every proposal for each new version go through 4 stages of maturity before it makes it to specification

How to run JavaScript

• JavaScript needs to be loaded and run alongside HTML markup. This can be done inline within an HTML document or in a separate file that the browser loads into the HTML document.
• You can add JavaScript to a HTML document by simply wrapping the code within <script> tags that can be placed in the <head> or <body> section — depending on when you want the code to load
• Generally, keeping JavaScript in the <head> section is cleaner as it is not contained within the main content of the HTML document
• However, if the script needs to be run at a certain point within a page’s layout — if you needed to generate content, it should be stored within the <body> where it will be called

If the JavaScript code is placed in the <head> tags, the browser will run the script before loading the rest of the page

If the JavaScript code is used to modify what is shown in the <body> of the HTML, the <script> tag would need to be placed in the <body>

• When working with larger scripts that will be used across multiple pages of a website / app, JavaScript code typically live in one or more .js files that are referenced within HTML documents
• Having separate JavaScript files allows us to better maintain the code and if cached, will be quicker to load in HTML

How to use the JavaScript Developer Console

• Modern browsers have built-in development tools to allow us to work with JavaScript and other web technologies — these aren’t limited to a console, inspector of the DOM, debugging tools and analysing network activity
• The Console is a great tool for logging, writing, managing and monitoring JavaScript. You can even interact with the web page by writing programs within the page’s context. The interface of the console works similar to a terminal shell
• Note that the Console will also print the result of evaluating an expression which will read as undefined when the expression does not explicitly return something
• The Console provides you a sandbox environment to modify HTML pages. But note that it is only temporary, so any refresh will lose any changes you made

DOM — Document Object Model

• When a web page is loaded, the browser create a DOM of the page — which is a tree of objects that outlines the HTML elements in a hierarchical view. You can visualise the Elements tree via the Inspector
• You can inspect and edit DOM elements, as well as see what CSS styles have been applied to each element

Network

• The Network tab allows you to monitor and record network requests
• It shows details of each request: When it loads, how long a request takes, etc. This can help with optimizing page load performance and debugging requests

Responsive Design

• Modern browsers provide you with modes of responsive design so that you are able to emulate different devices on the same application

How to write your first JavaScript program

• We can use the JavaScript Developer Console in our browser to create programs

alert("Hello World!");

console.log("Hello World!");

• To make our programs interactive, we can prompt for an input. This will store your value into this variable “name”

let name = prompt("What is your name?");

alert("Hello, " + name + "!");