Introduction to Javascript

History of Javascript

 

1. 1995: Creation and Early Days
JavaScript was created in 1995 by Brendan Eich while he was an engineer at Netscape. The language was originally named Mocha, then renamed to LiveScript, and finally to JavaScript when it was officially launched in December of 1995 as part of the Netscape Navigator 2.0 browser.

2. 1996-1997: Adoption by Microsoft and Standardization
Microsoft adopted a reverse-engineered implementation of JavaScript, called JScript, which they included in their Internet Explorer 3.0 browser in August 1996. This step led to a lot of compatibility issues between web pages viewed in Internet Explorer and Netscape Navigator. To ensure consistency, Netscape submitted JavaScript to the European Computer Manufacturer's Association (ECMA) for standardization in 1997. The standardized version was named ECMAScript, of which JavaScript is a dialect.

3. 1999: ECMAScript 3
The third edition of ECMAScript was released in 1999, and it is this version that modern JavaScript is based on. It was a significant update and added many features that are still in use today.

4. 2000s: Period of Stagnation
JavaScript's evolution was relatively stagnant for a few years after ECMAScript 3, with the fourth edition never being released due to disagreements about the language's future among the standard's committee members.

5. 2009: ECMAScript 5
The stagnation period ended with the release of ECMAScript 5 (ES5) in 2009. This version introduced a strict mode and other features to improve error checking and security.

6. 2015-Present: Annual Releases
In June 2015, ECMAScript 2015 (ES6) was released, with significant updates like classes, modules, iterators, and promises. Since then, a new version of ECMAScript has been released annually, each adding new features and syntax to the language. Some of the notable additions include async/await (ES2017), and optional chaining (ES2020).

7. Rise of JavaScript Frameworks
Over time, JavaScript has grown from a simple client-side scripting language to a powerful tool for building complex web applications. This transformation was enabled by JavaScript frameworks and libraries such as jQuery (released in 2006), AngularJS (released in 2010), ReactJS (released in 2013), and Vue.js (released in 2014), among others.

These tools have made it easier to create rich and interactive web applications, solidifying JavaScript's place as one of the most important and widely used programming languages in web development.

Features of Javascript

 

1. Interactivity: JavaScript allows for interactivity in web pages. It has the ability to update and change both HTML and CSS. It can monitor events like mouse clicks, keystrokes, and form input, enabling highly interactive web pages.

2. Lightweight: JavaScript is a lightweight interpreted programming language. It's designed for creating network-centric applications and is embedded directly into HTML pages.

3. Object-oriented: JavaScript is an object-oriented language, meaning that it organizes software around "objects" rather than "actions" and data rather than logic. It uses functions as classes for object-oriented programming, but it also supports other programming paradigms, such as imperative and functional programming.

4. Cross-platform: JavaScript runs on any computer platform with a proper JavaScript engine, such as a web browser or Node.js runtime. You can use JavaScript to script web pages on Windows, macOS, Linux, and many other platforms.

5. DOM Manipulation: JavaScript can manipulate the Document Object Model (DOM) of a web page in the browser, allowing programmers to create dynamic content and effects.

6. Asynchronous Programming: JavaScript supports callbacks, promises, and async/await for asynchronous programming. This allows JavaScript to handle tasks like network requests that can run without blocking other code, resulting in a smoother, more responsive user interface.

7. Event-Driven: JavaScript is designed with an event-driven approach to programming interfaces. User actions like clicks, form input, or page navigation can all trigger JavaScript functions.

8. First-Class Functions: In JavaScript, functions are first-class objects. That means functions can be passed as arguments to other functions, returned as values from other functions, assigned to variables, or stored in data structures.

9. JSON (JavaScript Object Notation): JSON is a syntax for storing and exchanging data, and it is both human-readable and easy for machines to parse and generate. It's based on JavaScript's object literal syntax and has become the de facto data exchange format on the web.

10. Versatility: JavaScript is not limited to the browser. With the advent of Node.js, JavaScript can be used to build backend services, command-line tools, desktop apps, mobile apps, IoT devices, and more.

11. Community and Ecosystem: JavaScript has a massive community and ecosystem, with a vast array of libraries, frameworks, and tools available to developers. These range from front-end libraries like React and Angular to backend frameworks like Express.js and even full-stack frameworks like Next.js.

Different Versions of Javascript

 Let's have a look at the different versions of Javascript.

• ECMAScript 1 (ES1): The first Javascript version was released in 1997.
   
• ECMAScript 2 (ES2): This was the second version of Javascript and was released in 1998 with some improvements.
   
• ECMAScript 3 (ES3): This was released in 1999, and a few new features were added to javascript, such as try/catch error handling.
   
• ECMAScript 5 (ES5): This was released in 2009. It had a few new features, such as strict mode and JSON support, and different array functions were also introduced.
   
• ECMAScript 6 (ES6): This was released in 2015, and it included several new features such as classes, arrow functions, and template literals.
   
• ECMAScript 2016 (ES6): This was released in 2016 and included several new features, such as an exponentiation operator.
   
• ECMAScript 2017 (ES6): This was released in 2017 and included several new functionalities, such as the async/await function.
   
• ECMAScript 2018 (ES6): This was released in the year 2018, and it included several new functionalities were added, such as spread syntax for objects and asynchronous iteration.
   
• ECMAScript 2019 (ES6): This was released in 2019 and included several new functionalities, such as Array. Prototype.flat(), Array.prototype.flatMap().
   
• ECMAScript 2020 (ES6): This was released in 2019 and included several new functionalities.

Why Javascript

If you have tried to learn web development, you can observe that HTML is the language for building web pages. CSS is used for styling. What about Javascript? Javascript is a language for programming web pages!

If you are a student or working professional planning to look into web development, then you should be looking into Javascript. Let's have a look at the benefits of learning Javascript.

1. Javascript can help you create beautiful and functional websites. This will give the users a great experience when they visit your pages.
    
2. Cut down your development time. Javascript has many frameworks and libraries which can drastically change how you create things. These frameworks and libraries can save your time and improve your productivity.
    
3. It is one of the world's most popular programming languages. You can use it for front-end, back-end, game, etc. The possibilities are endless.
    
4. Javascript is everywhere. It comes pre-installed on every web browser. This makes it very easy to learn Javascript, and you need not bother to install many things to get started.    
    
5. Finally, Javascript developers are always in demand for industries. If you learn and practice Javascript well, you could very well land a great job with great pay.

Characteristics of Javascript 

• Case-Sensitive: Javascript is a case-sensitive language, meaning lowercase and uppercase are treated differently.
   
• Asynchronous: Javascript allows asynchronous programming.
   
• Object-oriented programming: Javascript is an object-oriented programming language, meaning we can perform encapsulation, polymorphism, and implement other OOP principles in Javascript.
   
• Interpreted Language: The browser executes Javascript code, and no compilation is needed.
   
• Cross Platform: Javascript is platform-independent and runs the same on all platforms irrespective of the operating system used.

Applications of JavaScript

 

1. Web Development: The most common use of JavaScript is to create interactive web pages. It can be used to respond to user actions, manipulate the Document Object Model (DOM), validate input, handle forms, and create various animations and effects.

2. Web Applications: JavaScript, in combination with HTML5 and CSS3, is used to develop rich web applications. Frameworks like Angular, React, and Vue.js have made it possible to build complex single-page applications (SPAs) that run smoothly in the browser and offer a user experience similar to desktop apps.

3. Server-Side Development: With the introduction of Node.js, JavaScript made its way to the server side. Now, JavaScript can build backend services, APIs, and even full-fledged web servers. Frameworks like Express.js and Koa.js are widely used in server-side development.

4. Mobile Applications: JavaScript frameworks like React Native, Ionic, or NativeScript allow developers to build mobile applications using JavaScript. These apps can run on both Android and iOS devices.

5. Desktop Applications: JavaScript can be used to develop desktop applications. Electron is a popular framework for this; it has been used to create well-known applications like Visual Studio Code, Slack, and Discord.

6. Game Development: Although not as common as other uses, JavaScript can be used for simple web-based game development. WebGL and frameworks like Phaser.js or Babylon.js allow developers to create impressive 2D and 3D games that run directly in the browser.

7. Internet of Things (IoT): With runtime environments like Node.js, JavaScript can be used to develop IoT devices. It can handle tasks like reading sensor data, controlling hardware, and more.

8. Machine Learning: With libraries like TensorFlow.js and Brain.js, JavaScript has started entering machine learning and AI. Developers can train and deploy models directly in the browser or on Node.js.

9. Automation & Testing: JavaScript can be used for automating repetitive tasks on web pages or for automating browser actions for testing purposes with tools like Puppeteer, Jasmine, Mocha, and Jest.

10. Web Scraping: With Node.js and libraries like Cheerio or Puppeteer, JavaScript can scrape data from websites.

These applications demonstrate the power and versatility of JavaScript. Its usage is expanding beyond just being a scripting language for the web, making it an increasingly important language in the broader field of software development.

JavaScript Example

<!DOCTYPE html>
<html>
<body>
<h2>My First JavaScript</h2>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>

Here is what's happening in this example:

The <button> tag creates a button on the webpage.
The onclick attribute is an event attribute that tells the button what to do when it's clicked.
Inside onclick, document.getElementById('demo').innerHTML = Date() is JavaScript code that changes the HTML content of the element with the id "demo".
The Date() function returns the current date and time.
When you click the button on the webpage, the date and time will be displayed below the button. This is a simple demonstration of how JavaScript can interact with HTML elements and handle user events.

Functions in JavaScript

 

A function is a set of instructions that performs a specific task and gives an output. It may take an input depending upon the problem to be solved. The main idea behind using a function is to increase the reusability of code by grouping repeated tasks and creating a function. Instead of writing the same code again, we have to call the function for different inputs.

Syntax

function functionName(parameter1, parameter2, … ){
// Function body
}

 

A function in Javascript is created using the keyword function. The name of the function follows the keyword function. We then provide the parameters to the function within the parenthesis. The code written within the curly braces is the function's body.
 

There are certain rules associated with the creation of a function-

• The keyword function must precede the name of every function,
• The name of the user-defined function must be unique and should not be the same as any library function.
• The parameters should be enclosed within the parentheses and separated by a comma in case of multiple parameters.
• The body of the function should be within the curly brackets.

 

Return keyword-It is used to stop the execution of the function and return a value.

Example

function ninjaSum(num1, num2){
return (num1+num2);
}

console.log(ninjaSum(2,5))

 

Output-

7

 

Explanation-

In the example above, the function we have created is ninjaSum, and it has two parameters: numbers to be added.

In the function body, we perform addition and return the sum of both numbers using the return statement.  

Datatypes in javascript

We know that a particular type of data is being stored in a variable, and datatype indicates what type of data is stored in a variable. Each data value belongs to a datatype which decides how that data will be interpreted.
 

There are eight different data types available in Javascript-

• Number-  I Integer and floating point numbers belong to the Number datatype. Arithmetic operations are performed on them. Apart from regular numbers, certain "special values" also belong to this data type, like Infinity,-Infinity, and Nan ( not a number).
  Not a number (Nan) denotes computational error occurring due to an invalid arithmetic operation.
   
• bigInt- It represents and stores large numbers that cannot be stored in Number datatype. It is created by appending n at the end of a number.
   
• String-  One or more characters enclosed within quotation marks belong to the String datatype.
   
• Boolean- Logical values like true and false have the boolean datatype.
   
• NULL-  The Null datatype has a single null value. It denotes the absence of value.
   
• Undefined- Undefined is also a unique value like null. It is used to represent the value of an unassigned variable.
   
• Symbol-  It is a unique and fixed datatype. They are created by calling the function Symbol(). On each call, a new and unique symbol is returned.
   
• Object- It is a non-primitive datatype, i.e., it is created explicitly by the user. It is an entity having a key-value pair. The key is called the state, and the value is the object's behavior.

Operators in Javascript

 

In Javascript, different operations on values or variables are performed using special symbols called operators. The data values on which operations are performed are called operands. There are multiple types of operators in javascript, such as

• Arithmetic operators: They are used to perform arithmetic operations on numbers. +, - , % (modulo), * , /, ** (exponentiation) , ++ (increment), – (decrement) are examples of arithmetic operators.
   
• Comparison operators: They are used to compare two given values or expressions. They return a boolean value based on the comparison.!= (not equal to), > (greater than),< (less than),>= (greater than or equal to),<= (less than or equal to) are some examples of comparison operators.
   
• Logical operators: Logical operations are performed using logical operators like AND, OR, and NOT. && (Logical AND), || (Logical OR), and ! (Logical Not) are logical operators.
   
• Bitwise operators are used to manipulate binary representations of a given value. Some examples are & (bitwise and), | (bitwise or), ~ (bitwise not), ^ (bitwise xor).
   
• Assignment operators: They are used to assign a value to an operand.

Errors in javascript

An error means the occurrence of any unexpected behavior during the execution of our code. Different types of errors that are there in javascript-

• Syntax error: This type of error occurs when the rules regarding javascript syntax are not followed in the code.For example, if the user uses curly braces for enclosing parameters while defining a function.
   
• Reference Error: This error occurs when the code tries to access a variable outside the variable's scope or access a  function or an undeclared variable.For example, using a  variable declared with the let keyword outside the block in which it was created.
   
• Type Error: This error occurs when the value of the variable used in the code is of the wrong datatype.For example, performing multiplication operations on two operands of string datatype.  
   
• Evaluation Error: This type of error occurs when the eval() function is misused in the code. The eval() function is used to run the string that is passed to it as a javascript code. If the passed string is incorrect, an evaluation error occurs.
   
• RangeError: This type of error occurs when the value of a variable goes out of the permissible range.For example, 
   
• URI Error: This type of error occurred when the values passed to the URI function are incorrect.
   
• Internal Error: This type of error occurs when the Javascript engine cannot perform internal operations for some reason. Some possible reasons for this type of error can be insufficient memory to execute the code or when there is a hardware issue.
   

Javascript provides specific countermeasures for handling the errors that might occur in our code. 

• Try- The code that can give error are written within the try block.
   
• Catch- If the code enclosed within the try block gives an error, then the code written within the catch block is executed.
   
• Throw- This keyword is used when we want to throw a user-defined exception.
   
• Finally- The code written within the final block will always run irrespective of the error, and it is an optional block.

Use cases of javascript.

• Creating interactive websites: Different javascript frameworks such as React and Angular are used to create web pages and applications.
   
• Web server development: It is used in back-end web development to create servers. And also to send data and receive data from servers.
   
• Game development: Javascript is used to make different kinds of games that can be run on the browser. 
   
• Internet of Things (IoT) development: Javascript is also used to create interfaces for different IoT devices.
   
• Mobile Application Development: Different javascript frameworks like React Native is used to make mobile applications.

Limitations of Javascript

Certain limitations are associated with Javascript-

• Client-Side Scripting: Javascript runs on the browser of the user. Therefore, the computational power and resources available are limited. 
   
• Single threading: Few features like multithreading and multiprocessing are not supported by Javascript. Therefore it cannot handle complex tasks.
   
• Cross-Browser Compatibility: The behavior of Javascript differs when run on different browsers or different versions of the same browser. This makes writing consistent code that behaves similarly on different browsers difficult.

Advantages of using javascript 

• Advanced programming language: Javascript is an advanced programming language that supports provides different features like asynchronous programming and supports object-oriented programming principles such as abstraction, encapsulation, etc.
   
• Adds dynamic content: We can use javascript to dynamically add, and delete or remove content from a web browser.
   
• Cross-platform compatibility: Javascript is a platform-independent language which means that the change of operating system doesn’t affect the execution of the javascript program.
   
• Can be embedded in HTML: We can write javascript code inside our HTML file within the script tag.

Disadvantages of using javascript

• Difficult to use in the case of larger front-end projects because as the projects become larger, the code complexity increases, and it becomes difficult to manage such code. The dependency on third-party applications and the configuration of tools for setting up the project environment is a tedious task,
   
• Javascript DOM is slow, and it can never be rendered with HTML. Therefore, we always render it after loading the HTML on the browser.
   
• Browsers are highly intolerant towards javascript errors, and as soon as an error occurs, the browser will stop the execution of the current code and shows the error. The user experience is affected severely by the intolerant nature of the browser towards the error.
   
• Javascript is interpreted differently by different browsers, which leads to the non-uniform behavior of javascript on different browsers. Therefore it isn't easy to write cross-browser code.

Also Read, Front End Web Development

Reasons why javascript is so popular

• No need for compilers: Javascript is interpreted, no compilation is done, and no byte code is created for source code. There is no need for any compiler to execute javascript.
   
• Used to build both client and server-side: Javascript creates a website's user interface by manipulating DOM using different frameworks such as React. And on the other hand, it can also be used to create a web server and application programming interfaces on the server side using frameworks such as Node.js. 
   
• Used in many organizations: Many organizations prefer javascript for web development and programming purposes, making it one of the most popular languages in the industry.
   
• Huge community support: The javascript community is very large, and many developers are ready to help and assist other developers when they get struck. Not only this, there are a lot of free resources available too if someone wants to get started with javascript.

Frequently Asked Questions

What language is JavaScript?

Javascript is a beginner-friendly,  high-level, lightweight programming language that is interpreted by the browser and is used in development. It is also a very popular scripting language. And there are multiple free resources and tools that  are  available for learning javascript.

What is JavaScript used for?

Javascript has many applications. Some of its main applications are creating web applications, game development, and web server creation. We can use it in creating interfaces for IOT devices. We can use Javascript frameworks like React Native in mobile app development.

What are some features of JavaScript?

Some features of javascript are that it is platform independent programming language that also provides asynchronous programming. It is also an interpreted language. It can be added to an HTML file and is also used to dynamically manipulate content from our web pages.

Is it easy to learn JavaScript?

It is easy to learn Javascript since it is a user-friendly language with many applications. The javascript syntax is also straightforward to understand, even for beginners. The Community support for Javascript is also vast and active, and many free resources are available.

Conclusion

In this article, we learned what javascript is and some basic functionalities it provides. 

We got to know that Javascript is a popular and powerful scripting language. It is most commonly used for creating web pages but has many other applications. It is easy to learn javascript; you only need a web browser and text editor. 

You can refer to the following articles to learn about other related topics-

Importance of Javascript to web programming

Synchronous and Asynchronous Javascript

Fundamentals of HTML

Please refer to our guided paths on Coding Ninjas Studio to learn more about DSA, Competitive Programming, JavaScript, System Design, etc. Also, enroll in our courses and refer to the mock test and problems available. Have a look at the interview experiences and interview bundle for placement preparations.

Keep learning, and Keep Growing!