How to use browser features of Javascript?

In this blog, we will learn rich features of Javascript with the browsers,  whose speed is beyond our imagination. Learning of Javascript is itself an interesting and sometimes gives surprising result which automatically tends us to learn more about this. Let’s start with learning different powerful browser features of Javascript.

1. JSON

JSON(JavaScript Object Notation) is a lightweight data-interchange format. This is not in JavaScript, but a subset of JavaScript. JSON is a human-readable & serialized JavaScript Object. It means, if we serialize a JavaScript Object we will get a JSON Structure.It is used primarily to transmit data between a server and web application, as an alternative to XML. It is a text format that is completely language independent.

JSON can be built on two structures.

  • A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.
  • An ordered list of values. In many languages, we have observed as an array, list, or sequence.

We have two inbuilt JSON objects which are actually supported by all browsers after IE 7.

1- JSON.parse();

It is a method to parse a JSON string, constructing the JavaScript value or object described by the string. Any other optional reviver method could be given to perform a transformation on the resulting JS object before it is returned back.

json_example

2- JSON.stringfy();

This method converts a JavaScript value to a JSON string, optionally replacing values if a replaced function is specified, or optionally including only the specified properties if a replaced array is specified.

json_example

NOTE: If you want to give JSON support to IE7 then download json2.js from json.org

Storing JSON Data in Arrays

In order to do this, we can enclose multiple objects in square brackets, which indicate an array. For instance, if I needed to include details about two users in one variable, we might be using the following way:

To access this information, we will need to access the array index of the user which we want to access. For example, we would need to use the following code to access info which is stored in families variable:

document.write(families[1].name); // Output: Kyle
document.write(families[0].age); // Output: 24

NOTE: This is useful for user’s if it will be necessary to loop through the stored information of variable, as it lends itself to a for loop with an automatically incrementing value.

2. LOCAL STORAGE

It is an Object to hold key & value pair init, Local Storage are not cookies, It is a browser property to store any value and the major difference between cookie & local storage is a server can access cookie but can’t local storage. The read-only localStorage property allows you to access a Storage object for the Document’s origin; the stored data is saved across browser sessions. localStorage is similar to sessionStorage, except that while data stored in localStorage has no expiration time, data stored in sessionStorage gets cleared when the page session ends — that is, when the page is closed.

In simple terms, all that web storage does is to store named key/value pairs locally and unlike cookies, this data persists even if you close your browser or turn off your computer.

We can add local storage in two ways:

localStorage.userName = “sush” // localstorage to set an property for localstorage
localStorage.setValue(‘age’, 25);   //   here we have declared an Integer localStorage will convert into string to use as Integer we need to convert by our own using parseInt();

To remove the item from local storage :

localStorage.removeValue(‘age’);     // is to remove an Item from Local Storage.
We have another method available to clear all localStorage currently exists on the browser.

localStorage.clear();

3. Error Handling

Our JavaScript code might contain syntax errors, or logical errors, that are difficult to diagnose. Errors can be coding errors made by the programmer, errors due to wrong values, and other unforeseeable keywords, but instead of errors, we can take the issue into our own hands. By using try, catch, throw and finally statements of JavaScript lets you counter the error prune territory and “reroute” when a JavaScript exception is encountered.

The try statement tests a block of code for errors.
The catch statement handles the error.
The throw statement will create custom errors.
The finally statement forces execute code, after try and catch, for the releasing memory & resources.

try/catch

try {
showMessage(“Welcome Home!”);
}
catch(err) {
console.log(err.message);    // Output: showMessage is not defined
}

The above written code tells us that when try encounters an error, it immediately skips any remaining code inside it and goes straight to catch. By default, the error will be displayed that is obviously suppressed, now though we can still fetch this information by accessing the Error object that gets indirectly sent to catch statement.

finally

Note: We can have nested try catch statements to handle the very complex errors & statements.

throw :  Throw statement is for creating custom errors. We can also explicitly throw our own exceptions to force that to happen on demand. At the time of waiting for 1 of the six types of errors user get above statement to occur before control, it is automatically transferred from the try block to the catch block. It is great for creating your own definitions of an error is and how control should be transferred to catch. In following ways, you can throw an error:

1. throw “An error has occurred”
2. throw true
3. throw new Error(“I detect an error!”)
4. throw new SyntaxError(“Your syntax is no good”);

The above JavaScript function will ask for a number using prompt below 25 and throw an error if the number is invalid. This is all about Javascript browser features which I have covered in this blog.

CONCLUSION

The above explanation could be pretty complicated but it will be helpful once you understand it completely. Javascript has many code style guides. This blog is also one among them. For any related query, suggestion or feedback, you can post that on the comment box.

Happy Coding!!! For more interesting blogs, click here

Follow me!
Latest posts by Imran Saifi (see all)

1 thought on “How to use browser features of Javascript?”

Leave a Comment