JavaScript Tutorial for beginners
Javascript Tutorial: JavaScript is the most popular and widely used client-side scripting language i.e. it runs within the client's(user) browser.
It is used to make webpages interactive and to add dynamic effects to the web pages.
JavaScript is an object-oriented language, i.e. it supports all object oriented concepts like c++ or java. But, the JavaScript is not related to Java language in any way.
History:
JavaScript was originally developed as LiveScript by the Netscape in the mid 1990s. It was later renamed to JavaScript in 1995, and then became an ECMA standard in 1997. It is a client-side scripting language for web-based applications, and it is supported by almost all web browsers available, such as Google Chrome, Mozilla Firefox, Apple Safari, Edge, etc.
In 1995 Netscape was in competition with Microsoft and that’s why they approached Sun Microsystems, which was about to launch a new programming language JAVA. Java was a programming language which had all the features of Object Oriented Programming. Unlike C/C++ Java’s compiled bytecode was machine independent, it could run on different operating systems. It could also develop applets which could run on websites. Due to all these features, Java became very popular language.
Java was used for system programming and applet development but there was still a need for a scripting language for websites to enhance the user’s interactivity with the website. Netscape in collaboration with Sun Microsystems thought of developing a scripting language especially for Netscape to compete with Internet Explorer of Microsoft which was gaining popularity. In early 1995 Netscape contracted Brendan Eich to design a scripting language. It resulted in the birth of LiveScript. This Scripting language could easily be written directly inside HTML and could run on Netscape browser.
Later on, LiveScript’s name has been changed to JavaScript, because of Java’s popularity. The first browser which could support JavaScript was Netscape 2.0.
JavaScript engine
JavaScript Engine is a computer program which works on simple steps:
- It reads the script (Parsing).
- Then it converts or compiles the script to the machine language.
- Execution of the code.
Every browser has its own JavaScript engine like Chrome has V8, Firefox has SpiderMonkey and Safari has JavaScriptCore. All the engines do the same job.
Capabilities of JavaScript
JavaScript's functions sometimes depend on its running environment. For example, Node.js allows JavaScript to read and write arbitrary files, perform network requests along with object orientation. But normal In-browser JavaScript allows just webpage manipulation. JavaScript can interact with users and also with the server. Some more features of JavaScript are:
- It can display dynamic content based on the user profile.
- It can react to user operations to increase interactivity, like mouse clicks or key presses.
- It can perform form validation in javascript before submitting the data to the server.
- It can create set cookies in the browser.
- Supports the storage of data in the local storage.
- JavaScript is lightweight and cross-platform script.
- It is not compiled but translated.
- The JavaScript Translator in browsers is responsible to translate the JavaScript code.
Advantages of JavaScript
Some quick points on advantages of JavaScript are:
- Easy to Learn : It is easy to learn JavaScript. It has simple syntax, predefined method which helps in easy implementation of JavaScript. Although the advance part of JavaScript takes a bit more effort.
- Less server interaction :As we have said it does client side
validation, that means it validates the data before sending it to server. Hence the user interacts with the server only when all the data gets validated. It saves server traffic, which means less load on your server. - Creates interactive pages: It creates interactive pages that react on user’s operations like an event gets triggered when the user hovers over any page element or by pressing a keyboard key, etc.
- Interactive components :JavaScript includes elements like
drag-and-dropcomponents andsliderswhich provide richer interface to the users. - User Notification :JavaScript can be used to give different types of notifications to the user by its
dynamic pop-ups. - Develop Server Applications :A framework of JavaScript called
NodeJScan be used to create server side applications. It is built on Chrome's JavaScript runtime for building fast and scalable network applications. - Responsive Design :The JavaScript can also be used to make a website responsive to different screen sizes of different devices. Although it is much easier by the help of predefined JavaScript based frameworks like Bootstrap and only CSS based PureCSS.
- Back-end Data Loading : The
AJAX(Asynchronous JavaScript) Library of JavaScript is a very effective tool to load the back-end data while you are doing some other work on the page. By the help of this library, the webpage gets the ability to refresh some parts of it without reloading the whole page.
Limitations of JavaScript
- In-browser JavaScript does not allow you to copy, execute or read/write arbitrary files on the hard disk and any access to Operating System function is also not allowed.
- JavaScript does not support network applications so it cannot be used with them.
- It doesn't support multi-threading and doesn’t have multiprocessor capabilities.
What makes JavaScript unique?
We all know that JavaScript is an Object-Oriented Language. In OOP, objects encapsulate data and methods together which are defined by a hierarchy of abstract classes. In an OOP language, especially like Java, the concept of classes is very important. Classes are necessary for the Object Orientation Language but JavaScript doesn’t have them even after being an OOP supporting language.
During developing the JavaScript, Brendon Eich removed the classes. He developed a new style of OOPs in Objects could be created and linked to other objects without having any need to define a class. Now JavaScript has the Capabilities of OOP but was free from the complexity of classes.
Some other features of JavaScript which make it unique
- It is supported by almost all browser.
- It is fully integrated with HTML/CSS.
- It has simple syntax as compared to other OOP supporting languages.
Alternatives to JavaScript
JavaScript is the most popular scripting language but still if it is somehow for some reason is not suited for a project then there are its alternatives available in the market. There are some tools like the Coffee script, Typescript, and Dart which allows the developers to write code in any other language and then auto-convert the code into JavaScript code.
JavaScript is Client-Side
JavaScript is called as a client-side scripting language as it runs on the client’s systems. This client-side mechanism provides many advantages over traditional Common Gateway Interface (CGI) server-side scripts. For example, in a form, you can set validations for email addresses, for usernames for password strength, etc. to check whether the user has entered valid data in all the fields or not. When the user submits the form then instead of sending the data to the server, the JavaScript checks the data and if all the data is validated then only the data would be submitted to the Server.
Difference Between Client-side and Server-side Scripting
| Client Side | Server Side |
|---|---|
| Client-side scripting languages such as JavaScript, VBScript, etc. are interpreted and executed by the web browser. | Server-side scripting languages such as Java, Python, PHP, ASP, Ruby, etc. are executed on the webserver and the output is sent back to the browser in HTML format. |
| JavaScript can be used to validate the data entered by the user in a form field before submitting the form to the web-server for final data validation and further processing in order to prevent unnecessary network bandwidth usages and the exploitation of server system resources. | Response from a server-side script is slower as compared to a client-side script, because server-side scripts are processed on the remote computer not on the client's local computer. Hence, client side validation is faster. |
JavaScript Development Tools
We have discussed some editors like sublime, brackets, etc. in the previous tutorials which can be used to develop websites. JavaScript can be written on any editor and it doesn’t use any compiler as it uses browser’s own interpreter. But there are some major software, specially designed to support JavaScript. These software has proper JavaScript editing tools, some of them are:
- Microsoft FrontPage : This is a popular editor developed by Microsoft which is used in website development. It also has a number of JavaScript tools to assist in the creation of interactive websites.
- Macromedia Dreamweaver MX : It is one of the most popular editors, the Macromedia Dreamweaver MX is used by professional web developers throughout the world. It also has prebuilt JavaScript components. It gets frequent updates to stay updates with new standards in web development.
- Macromedia HomeSite 5 : It is one more editor by Macromedia which can be used to manage personal websites effectively.
JavaScript is a MUST for students as well as working professionals to become a great Software Engineer specially when they are working in Web Development Domain. I will list down some of the important key advantages of learning JavaScript:
Why Learn JavaScript?
It is very important to learn JavaScript for aspiring designers and developers as it is the most powerful tool through which they can make very bold and attractive websites. We don’t need to convince you all to study JavaScript as it is kind of a necessity for you all to add this skill in your C.V. but, still we have listed some points which are kind of a summary of all we have studied above. Have a look:
- JavaScript is the most popular scripting language in the world, almost all web programmers know about it and use it in their projects.
- JavaScript helps in developing front-end as well as the back-end software and applications by the help of its different frameworks like jQuery, AngularJs, ReactJs, NodeJs and many more.
- The frameworks of JavaScript which were discussed in the previous point has tons of predefined libraries which helps in the rapid development of the project. It helps the programmers to quickly finish, and implement things and see the results and launch the product in the market.
- The newer versions of JavaScript supports the development of mobile applications, game development, and desktop application development as well. As it widens its capabilities, opportunities for the developers in various fields has also been opened up.
- The job market is filled with JavaScript related works. The demand for JavaScript Developers is high, as a result, the payouts are also sufficient according to your skills and experience. Search for it in any job portal, and you will know the situation.
- The biggest reason that JavaScript is so popular and widely used is because of its compatibility with all the browsers, it comes installed on web browsers so there is no need to set-up any special environment for it to run.
JavaScript Application
- Client-side validation
- Dynamic drop-down menus
- Displaying data and time
- Displaying pop-up windows and dialog boxes (like alert box, confirm box and prompt box)
- Adding or removing elements from the webpage.
Hello World using JavaScript - The first program
After all this theoretical knowledge, let’s see the first JavaScript Program. Yes, our favorite, The “Hello World” program. Look at the use of <script> tag to define the type of scripting which we are about to use within the document. We are using JavaScript so language type is also the same. The script contains only one line to print Hello World on the screen. Run it in the Try-It Editor to see the results.
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript </title>
</head>
<body>
<h2>Welcome to JavaScript</h2>
<script> document.write("Hello JavaScript"); </script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript </title>
</head>
<body>
<h2>Welcome to JavaScript</h2>
<script> document.write("Hello JavaScript"); </script>
</body>
</html>
Output
Welcome to JavaScript
Explaination:
- The
<script>tag includes the JavaScript code. - The
text/javascriptis the content type that provides information to the browser that the script used is javascript. - The
document.write()function is used to display dynamic content through JavaScript. We will learn about document object in detail later.
Tip : The type attribute for
<script> tag (i.e.<script type="text/javascript">is no longer required in HTML5.
JavaScript is the default scripting language for HTML5.
JavaScript Can Change CSS
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Change HTML Style </title>
</head>
<body>
<p id="demo">JavaScript can change the style of an HTML element.</p>
<button type="button" onclick="document.getElementById('demo').style.fontSize='20px'">Click Me!<br />
</button>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Change HTML Style </title>
</head>
<body>
<p id="demo">JavaScript can change the style of an HTML element.</p>
<button type="button" onclick="document.getElementById('demo').style.fontSize='20px'">Click Me!<br />
</button>
</body>
</html>
Output
JavaScript can change the style of an HTML element.
JavaScript Can Hide Element
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Hide Element </title>
</head>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can hide HTML elements.</p>
<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Hide Element </title>
</head>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can hide HTML elements.</p>
<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>
</body>
</html>
Output
JavaScript can hide HTML elements.
JavaScript Can Show Elements
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Show Element </title>
</head>
<body>
<p>JavaScript can show hidden HTML elements.</p>
<p id="demo" style="display:none">Hello JavaScript!</p>
<button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me!</button>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Show Element </title>
</head>
<body>
<p>JavaScript can show hidden HTML elements.</p>
<p id="demo" style="display:none">Hello JavaScript!</p>
<button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me!</button>
</body>
</html>
Output
JavaScript can show hidden HTML elements.
Hope you like all the basics of this Javascript tutorial.
Recommended :
Color Picker
List of color names supported by all browser »
Character Code
List of character codes to display special character »
Language Code
List of all language supported by all browser »
Country Code
List of Country code supported by all browser »