JavaScript Tutorial

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

JavaScript is an object-based scripting language which 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 is JavaScript

JavaScript (js) is a light-weight object-oriented programming language which 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.PauseNextMute

Current Time 0:10

/https://techzone360.shop/javascript-tutorial/

Duration 18:10

Loaded: 4.77%Fullscreen

Although, JavaScript has no connectivity with 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 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 1994Netscape 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

JavaScript is used to create interactive websites. It is mainly used for:

  • Client-side validation,
  • Dynamic drop-down menus,
  • Displaying date and time,
  • Displaying pop-up windows and dialog boxes (like an alert dialog box, confirm dialog box and prompt dialog box),
  • Displaying clocks etc.

JavaScript Comment
JavaScript comments
Advantage of javaScript comments
Single-line and Multi-line comments
The JavaScript comments are meaningful way to deliver message. It is used to add information about the code, warnings or suggestions so that end user can easily interpret the code.

The JavaScript comment is ignored by the JavaScript engine i.e. embedded in the browser.

Advantages of JavaScript comments
There are mainly two advantages of JavaScript comments.
Pause

Next
Mute
Current Time
0:13
/
Duration
18:10

Fullscreen

To make code easy to understand It can be used to elaborate the code so that end user can easily understand the code.
To avoid the unnecessary code It can also be used to avoid the code being executed. Sometimes, we add the code to perform some action. But after sometime, there may be need to disable the code. In such case, it is better to use comments.
Types of JavaScript Comments
There are two types of comments in JavaScript.

Single-line Comment
Multi-line Comment

JavaScript Single line Comment
It is represented by double forward slashes (//). It can be used before and after the statement.

Let’s see the example of single-line comment i.e. added before the statement.


.
Let’s see the example of single-line comment i.e. added after the statement.

JavaScript Cookies

A cookie is an amount of information that persists between a server-side and a client-side. A web browser stores this information at the time of browsing.

A cookie contains the information as a string generally in the form of a name-value pair separated by semi-colons. It maintains the state of a user and remembers the user’s information among all the web pages.

How Cookies Works?

  • When a user sends a request to the server, then each of that request is treated as a new request sent by the different user.
  • So, to recognize the old user, we need to add the cookie with the response from the server.
  • browser at the client-side.
  • Now, whenever a user sends a request to the server, the cookie is added with that request automatically. Due to the cookie, the server recognizes the users.
JavaScript Cookies

How to create a Cookie in JavaScript?

In JavaScript, we can create, read, update and delete a cookie by using document.cookie property.

The following syntax is used to create a cookie:PauseNextMute

Current Time 0:09

/

Duration 18:10

Loaded: 4.77%Fullscreen

  1. document.cookie=”name=value”;  

JavaScript Cookie Example

Example 1

Let’s see an example to set and get a cookie.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. </head>  
  5. <body>  
  6. <input type=”button” value=”setCookie” onclick=”setCookie()”>  
  7. <input type=”button” value=”getCookie” onclick=”getCookie()”>  
  8.     <script>  
  9.     function setCookie()  
  10.     {  
  11.         document.cookie=”username=Duke Martin”;  
  12.     }  
  13.     function getCookie()  
  14.     {  
  15.         if(document.cookie.length!=0)  
  16.         {  
  17.         alert(document.cookie);  
  18.         }  
  19.         else  
  20.         {  
  21.         alert(“Cookie not available”);  
  22.         }  
  23.     }  
  24.     </script>  
  25.   
  26. </body>  
  27. </html>  

JavaScript Events
The change in the state of an object is known as an Event. In html, there are various events which represents that some activity is performed by the user or by the browser. When javascript code is included in HTML, js react over these events and allow the execution. This process of reacting over the events is called Event Handling. Thus, js handles the HTML events via Event Handlers.

For example, when a user clicks over the browser, add js code, which will execute the task to be performed on the event.

Event Handler Uses:

It can be used directly within HTML elements by adding special attributes to those elements. They can also be used within the


Exception Handling in JavaScript

An exception signifies the presence of an abnormal condition which requires special operable techniques. In programming terms, an exception is the anomalous code that breaks the normal flow of the code. Such exceptions require specialized programming constructs for its execution.

What is Exception Handling?

In programming, exception handling is a process or method used for handling the abnormal statements in the code and executing them. It also enables to handle the flow control of the code/program. For handling the code, various handlers are used that process the exception and execute the code. For example, the Division of a non-zero value with zero will result into infinity always, and it is an exception. Thus, with the help of exception handling, it can be executed and handled.

In exception handling:

A throw statement is used to raise an exception. It means when an abnormal condition occurs, an exception is thrown using throw.PauseNextMute

Current Time 0:07

/

Duration 18:10

Loaded: 4.04%Fullscreen

The thrown exception is handled by wrapping the code into the try…catch block. If an error is present, the catch block will execute, else only the try block statements will get executed.

Thus, in a programming language, there can be different types of errors which may disturb the proper execution of the program.

Types of Errors

While coding, there can be three types of errors in the code:

  1. Syntax Error: When a user makes a mistake in the pre-defined syntax of a programming language, a syntax error may appear.
  2. Runtime Error: When an error occurs during the execution of the program, such an error is known as Runtime error. The codes which create runtime errors are known as Exceptions. Thus, exception handlers are used for handling runtime errors.
  3. Logical Error: An error which occurs when there is any logical mistake in the program that may not produce the desired output, and may terminate abnormally. Such an error is known as Logical error.

Error Object

When a runtime error occurs, it creates and throws an Error object. Such an object can be used as a base for the user-defined exceptions too. An error object has two properties:

  1. name: This is an object property that sets or returns an error name.
  2. message: This property returns an error message in the string form.

Although Error is a generic constructor, there are following standard built-in error types or error constructors beside it:

URIError: An instance is created for the error that occurs when invalid parameters are passed in encodeURI() or decodeURI().

EvalError: It creates an instance for the error that occurred in the eval(), which is a global function used for evaluating the js string code.

InternalError: It creates an instance when the js engine throws an internal error.

RangeError: It creates an instance for the error that occurs when a numeric variable or parameter is out of its valid range.

ReferenceError: It creates an instance for the error that occurs when an invalid reference is de-referenced.

SyntaxError: An instance is created for the syntax error that may occur while parsing the eval().

TypeError: When a variable is not a valid type, an instance is created for such an error.


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *