Impetus
JavaScript was first developed in 1995 by Brendan Eich the prototype of which he had created in 10 days. The motivation for developing a new language, which was mostly driven by Netscape and Sun systems was to develop a language which would help augment many of the shortfalls of using HTML. Even though HTML was extremely useful in displaying information between different devices, it was not useful or not enough for it to be dynamic in nature and also create better connection with the servers. The unique aspect about JavaScript is that it works on both ends to create an extremely holistic experience allowing for the development of web applications which are unique and able to take thousands of different data points to create user experiences as well as websites which makes sense.
Progress
In 2000, the first popular JavaScript framework was released. It was called Dynamic HTML (DHTML). DHTML was used to make basic changes to web pages. The sort of changes you would make with CSS easily these days. DHTML was released in 2000. In 2006, a lot of frameworks and libraries were released. The most popular being jQuery. jQuery was created to help developers build sophisticated web pages. This framework is quite powerful, challenging the issues faced by developers with the subtle differences in browser implementations. jQuery also abstracted all of the complexity of client-side web development at the same time, making it easy for developers to learn and use. For server side development, node.js is one of the most powerful tool available.
Triumph
Radio.garden is one good example that has show case the power of JavaScript. The website allows the user to choose any streaming radio around the world by allowing them to zoom in and out on their preferred location and understand how the different stations are mapped. In other words, it uses information from geolocation as well as the existing database in place to create an immersive experience for the user. The user is able to zoom in and out which is an aspect of the flexibility of the language. On the server side, a company which is using the capabilities of node.js is Linkedin. Previously, LinkedIn uses ROR based app, which was synchronous in nature due to which system was bursting as its seams. However, with the use of JavaScript the company was able to overcome this and allow millions of users to interact with the website efficiently with exactly the same user experience. Before the implementation of JavaScript, the company was not able to deliver the user experience and the fast response that it was expecting. However, this was mostly due to the limitations of the previous languages which were being used to try to sync up information between the front end and the servers to allow for better communication and faster response time.
Demonstration
Example usages of Javascript:
-
Validate user input
- Name: *
- Age:
-
Manipulating DOM
-
Remove and insert HTML element upon user action:
-
Call javascript function to calculate user input:
+ Total :
-
Remove and insert HTML element upon user action:
-
Change css style
Font color:
Font Type:
Hello World! - Call Ajax to send and retrieve data from server asynchronously without reloading the web page.(Refer Table below)
- Set Timer to call javascript function. It is also useful for ajax function as it can make the website update the content periodically.
The retrieved data from website (https://coronavirus-tracker-api.herokuapp.com/v2/locations) will be populated into the table below when user click button "Fetch Data" or "Fetch Data Periodically".
User action:
| NO | COUNTRY | COUNTRY POPULATION | PROVINCE | LAST UPDATED DATE | CONFIRMED | DEATHS | RECOVERED |
|---|
After knowing the basic of javascript and what javascript can do.Hereby, we will discuss about a javascript library named JQuery.
JQuery is one of the most popular javascript libary. JQuery make javascript coding much more easy and simple.
It has a lot of features such as manipulating DOM ,Change css style and Call Ajax. JQuery is convenient of manipulating
DOM as it contain many methods that help it to access HTML elements.
The example of data fetch above is using JQuery to populate data into the table as well.
Sample code:
$("#coronavirus-table > tbody").append("<tr></tr>");
- $("#coronavirus-table > tbody") To access <tbody> of table with id=coronavirus-table
- .append("<tr></tr>") To append <tr> into the <tbody> of table