JavaScript Tutorial for Beginners – Learn JavaScript in 2021 | Course - Learn JS

Our JavaScript Tutorial is designed for both beginners and professionals. JavaScript is used to create client-side dynamic pages.

JavaScript is an object-based scripting language that is lightweight and cross-platform.

JavaScript is not a compiled language, but it is a translated language. The JavaScript Translator (embedded in the browser) is responsible for translating the JavaScript code for the web browser.

What We Will Cover in this Article 

(Click on Each Link or Click Next Button at the Bottom )

1. JavaScript Introduction (This Page)

2. JavaScript Basics (Next Page)

3. JavaScript Objects

4. JavaScript DOM

5. JavaScript DOM

6. JavaScript Validation

7. JavaScript OOPs

8. JavaScript Cookies

9. JavaScript Events

10. Exception Handling

11. JavaScript Miscellaneous

12. JavaScript Advance

13. JavaScript Differences

14. JavaScript Questions

15. JavaScript MCQ

16. JavaScript Interview Questions (Scroll Down )

What is JavaScript

JavaScript (js) is a lightweight object-oriented programming language that is used by several websites for scripting the webpages. It is an interpreted, full-fledged programming language that enables dynamic interactivity on websites when applied to an HTML document. It was introduced in the year 1995 for adding programs to the webpages in the Netscape Navigator browser. Since then, it has been adopted by all other graphical web browsers. With JavaScript, users can build modern web applications to interact directly without reloading the page every time. The traditional website uses js to provide several forms of interactivity and simplicity.

Although, JavaScript has no connectivity with the Java programming language. The name was suggested and provided in the times when Java was gaining popularity in the market. In addition to web browsers, databases such as CouchDB and MongoDB uses JavaScript as their scripting and query language.

Features of JavaScript

There are the following features of JavaScript:

1. All popular web browsers support JavaScript as they provide built-in execution environments.
2. JavaScript follows the syntax and structure of the C programming language. Thus, it is a structured programming language.
3. JavaScript is a weakly typed language, where certain types are implicitly cast (depending on the operation).
4. JavaScript is an object-oriented programming language that uses prototypes rather than using classes for inheritance.
5. It is a light-weighted and interpreted language.
6. It is a case-sensitive language.
7. JavaScript is supportable in several operating systems including, Windows, macOS, etc.
8. It provides good control to the users over the web browsers.

History of JavaScript

In 1993, Mosaic, the first popular web browser, came into existence. In the year 1994, Netscape was founded by Marc Andreessen. He realized that the web needed to become more dynamic. Thus, a 'glue language' was believed to be provided to HTML to make web designing easy for designers and part-time programmers. Consequently, in 1995, the company recruited Brendan Eich intending to implement and embed Scheme programming language to the browser. But, before Brendan could start, the company merged with Sun Microsystems for adding Java into its Navigator so that it could compete with Microsoft over the web technologies and platforms. Now, two languages were there: Java and the scripting language. Further, Netscape decided to give a similar name to the scripting language as Java's. It led to 'Javascript'. Finally, in May 1995, Marc Andreessen coined the first code of Javascript named 'Mocha'. Later, the marketing team replaced the name with 'LiveScript'. But, due to trademark reasons and certain other reasons, in December 1995, the language was finally renamed to 'JavaScript'. From then, JavaScript came into existence.

Application of JavaScript

1. JavaScript is used to create interactive websites. It is mainly used for:
2. Client-side validation,
3. Dynamic drop-down menus,
4. Displaying date and time,
5. Displaying popup windows and dialogue boxes (like an alert dialogue box, confirm dialogue box and prompt dialogue box),
6. Displaying clocks etc.

JavaScript Example

<script>
document.write("Hello JavaScript by JavaScript");
</script>

Javascript example is easy to code. JavaScript provides 3 places to put the JavaScript code: within body tag, within the head tag and external JavaScript file.

Let’s create the first JavaScript example.

1. <script type="text/javascript">  
2. document.write("JavaScript is a simple language for javatpoint learners");  
3. </script>  

The script tag specifies that we are using JavaScript.

The text/javascript is the content type that provides information to the browser about the data.

The document.write() function is used to display dynamic content through JavaScript. We will learn about document objects in detail later.

3 Places to put JavaScript code

Between the body tag of HTML
Between the head tag of HTML
In .js file (external javaScript)

1) JavaScript Example: code between the body tag

In the above example, we have displayed the dynamic content using JavaScript. Let’s see the simple example of JavaScript that displays an alert dialogue box.

1. <script type="text/javascript">  
2.  alert("Hello Javatpoint");  
3. </script>  

---

2) JavaScript Example : code between the head tag

Let’s see the same example of displaying an alert dialogue box of JavaScript that is contained inside the head tag.

In this example, we are creating a function msg(). To create a function in JavaScript, you need to write a function with function_name as given below.

To call function, you need to work on the event. Here we are using the onclick event to call msg() function.

1. <html>  
2. <head>  
3. <script type="text/javascript">  
4. function msg(){  
5.  alert("Hello Javatpoint");  
6. }  
7. </script>  
8. </head>  
9. <body>  
10. <p>Welcome to JavaScript</p>  
11. <form>  
12. <input type="button" value="click" onclick="msg()"/>  
13. </form>  
14. </body>  
15. </html>  

External JavaScript file

We can create an external JavaScript file and embed it on any HTML page.

It provides code reusability because a single JavaScript file can be used in several HTML pages.

An external JavaScript file must be saved by the .js extension. It is recommended to embed all JavaScript files into a single file. It increases the speed of the webpage.

Let's create an external JavaScript file that prints Hello Javatpoint in an alert dialogue box.

message.js

function msg(){
alert("Hello Javatpoint");
}

Let's include the JavaScript file on the HTML page. It calls the JavaScript function on button click.

index.html

<html>
<head>
<script type="text/javascript" src="message.js"></script>
</head>
<body>
<p>Welcome to JavaScript</p>
<form>
<input type="button" value="click" onclick="msg()"/>
</form>
</body>
</html>

Advantages of External JavaScript

There will be the following benefits if a user creates an external javascript:

1. It helps in the reusability of code in more than one HTML file.
2. It allows easy code readability.
3. It is time-efficient as web browsers cache the external js files, which further reduces the page loading time.
4. It enables both web designers and coders to work with HTML and js files parallelly and separately, i.e., without facing any code conflictions.
5. The length of the code reduces as only we need to specify the location of the js file.

Disadvantages of External JavaScript

There are the following disadvantages of external files:

1. The stealer may download the coder's code using the URL of the js file.
2. If two js files are dependent on one another, then a failure in one file may affect the execution of the other dependent file.
3. The web browser needs to make an additional HTTP request to get the js code.
4. A tiny to a large change in the js code may cause unexpected results in all its dependent files.
5. We need to check each file that depends on the commonly created external javascript file.
6. If it is a few lines of code, then better to implement the internal javascript code.

Now On The Next Page, You will Learn About Javascript Basics (Click the Next Button or Click Hear )