What is JavaScript
Javascript is a dynamic programming language to make websites interactive. A website is generally composed of HTML and CSS which are static languages to add text and decoration to webpages. Javascript, on the other hand, allows users to interact with a webpage or application. For example, pressing a Like button on Facebook, submitting a form, playing games and many other functions that bring life to an otherwise stale webpage.
Javascript was originally developed by Netscape in 1995 with the aim to make webpages more dynamic. It was earlier named LiveScript but the name was later changed to JavaScript to ride on the popularity of Java.
In its evolution, Javascript has become a completely independent and different programming language from Java. Javascript is also standardized with ECMAScript and has its own specifications, libraries, frameworks, and various developer tools.
Today, modern Javascript is not only used as a client-side scripting language but also executed at the server-side. The scope of JS has broadened and it is now also used in mobile applications. Basically it can be executed in any environment with JavaScript engine.
Javascript engine is developed by browser vendors and typically every browser has a unique engine.
Here are some of the popular JS engines:
- V8 by Google and used in Chrome and Opera.
- SpiderMonkey by Mozilla for Firefox.
- JavaScriptCore by Apple for Safari
- Chakra by Microsoft for Internet Explorer and Edge Browser
- Hermes by Facebook for Android Apps
Intro to JavaScript Coding
JavaScript is either embedded in the webpage along with HTML and CSS or included as .js file separately. JS files are auto-downloaded in the visitor computer and processed by the browser.
Adding JavaScript code directly on a webpage is quite straightforward. It’s added in a similar way as CSS which starts with <style> tags. JS on the other hand use <script> tags to indicate the beginning and end of JS code. The tags guide browser rendering engine to indicate the presence of Html, CSS or JS code.
Hello World Example
Below is the “Hello World” example with JS code in the HTML document
<!DOCTYPE HTML>
<html>
<body>
<p>This is my first JavaScript Code</p>
<script>
alert( 'Hello World!' );
</script>
</body>
</html>However, the clean and efficient way of coding JS is by adding it as a separate script file. The benefit is that the browser downloads the file and store it in the cache. The files are not downloaded again when other pages reference the same script. Instead, the browser uses the initially downloaded file from the cache. It improves the efficiency and also the page speed.
JavaScript files are in the .js format and added in the Html document with src attribute. Here are the examples below
<script src="/example_script.js"></script>Here, /example_script.js is an absolute path to the script file from the root directory. A relative path can also be provided from the current page. In that case, src=”example_script.js” would mean the file “example_script.js” is located in the current folder.
A full URL can also be used, for instance
<script src="https:example.com/example_script.js"></script>Use multiple tags for more than 1 file:
<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>Here is the right way of coding by referencing the file and calling the JS code inside HTML.
<script src="file.js"></script>
<script>
alertMe();
</script>Code in file.js
function alertMe() {
alert( 'Hello World!' );
}JavaScript Libraries and Framework
JavaScript has become the most popular programming language in web development. It is now imperative for a good web developer to get knowledge of JS frameworks and libraries to quickly add various functionalities to a website.
JS frameworks have remarkably changed the development of web applications. For example, Node.js allows developers to build a complete front-to-end web application using just one programming language, JavaScript. AJAX has transformed the GUI performance and speed by updating a webpage from the backend without reloading the whole page.
The aim of this section is to give you a basic introduction to JS frameworks and libraries which are important tools for a full stack web developer.
What is JS Library
JavaScript library is a pre-written JS code with a collection of useful functionalities. Typically it includes functions to return values i.e. dates, sorted array, string, HTML, events, cookies, network requests, DOM elements, etc. You could choose to implement the returned values however you like. In simple terms, libraries are like components of a machine that you can use to build the whole engine.
Libraries save developer time and help to avoid inconsistencies in the code by providing a clean and tested code. Some JS libraries make the integration of Javascript with other web technologies like PHP, CSS, Ruby etc. Library would help you concentrate on the high level business logic and avoid writing the lengthy code which is already written and tested by other developers.
Popular JS Libraries for Web Development
jQuery
jQuery is the most popular JS library which is used in more than 70% of the websites today. It’s distributed with other popular CMS platforms like WordPress that has amplified its usage.
jQuery is simple and easy to use JS library that is written to accomplish various common tasks. The main purpose is to ease the usage of JS for web developers. It has simple code and syntax wrapped in methods for common tasks that otherwise require long lines of code. Developers can simply call the methods to utilize it on their website. Here are its main features:
- DOM elements selection
- Handle events
- CSS manipulation
- Ajax application development
- Create Animations
On top of this jQuery has a lot of plugins to achieve almost any task out there. It also has an active community to find support from.
React
React is another popular open-source JS library developed by Facebook. It’s the goto library for building User Interfaces. The focus of React is on the Model-View-Controller (MVC) to create UI components that would retain the state. The components can then be combined to build sophisticated user interfaces.
React is helpful especially for beginners who can work on individual components and then integrate them later into a complex UI of the website structure. It’s an upcoming and thriving library with a growing community. With Facebook backing it up you can get good learning resources of React online.
D3.js
D3.js is the most extensively used JS visualization library. It’s also very popular in data themed web sites that like to showcase data visually on the page. D3 manipulates DOM based on data and make changes to HTML, CSS and SVG. The visual representation of data can be seen in any modern browser. You can also add animations and interactions with different elements of the page.
D3.js utilize SVG to create all the visuals and that is the core building block of the library. SVG elements can then be styled with CSS to showcase your data. Interactions can also be added with D3.js by using data-driven transitions and transformations.
Chart.js
Chart.js is another very popular open-source JS chart library. Its used to create HTML 5 charts with responsive design in webpages using the canvas element. It has 8 basic chart types i.e. line, bar, pie, polar, doughnut, etc.
Chart.js is perfect for beginners who are looking to create simple charts for small projects. It is very lightweight with only 11kb size after zip and minification.
Anime.js
Anime.js is the most used and good javascript animation library. It has a small file size, simple but powerful AP, and easy to use even for beginners. It also supports all major modern browsers like Edge 11+, Chrome, Firefox, etc.
What is JS Framework
Javascript framework is like the skeleton of an application. It is a pre-written code and logic that require you to build your own logic on top of it to create the end product. Events, Storage, Data binding and other basic functionalities are already provided. In simple terms, framework is like a car with body and working engine. Now you can paint and modify the car however you want but basic specifications would remain the same.
JS frameworks provide abstraction at a higher level than the libraries. It helps you quickly build the first 80% of your project. But there are some downsides that you should be aware of:
- It is difficult to build the last 20% if the scope of your application goes beyond the confines of the framework
- Migrating and updating framework can be difficult
- Core framework code could get outdated as there are always improvements in the technology and new and efficient ways are developed to do the same thing.
Popular JS Frameworks
AngularJS
AngularJS is an open-source MVC application framework adopted by many big companies. It is mainly maintained by Google, independent individuals and some corporations which actively use it. It is a single solution for developing modern and dynamic single-page web applications.
AngularJS extends the attributes of HTML to inject the components of the application. It adds new attributes with Directives and also binds data with Expressions.
The primary goal of AngularJS is to simplify the development of web applications. It supports the development of dynamic web apps and supports MVC architecture.
It should be noted the learning curve of AngularJS is steep. It is not something to start away with if you are not even familiar with the basics of JavaScript.
Vue.js
Vue.js is a lightweight open-source progressive JS framework for building user interfaces. The virtual DOM view layer is similar to React. It is designed to easily adapt and integrate with other JavaScript libraries. At the same time, it is fully capable of powering single-page web applications.
Vue.js framework was created by Evan who also worked on AngularJS. He extracted the parts he liked from AngularJS and put it in Vue.js
Vue.js in contrast to AngularJS is easier, and the knowledge curve is not that steep. This is the best framework to work on for beginners if you have a good understanding of Javascript.