Sunday, February 16, 2020

How to implement the various JavaScript Number properties with examples


Hello guys! good morning to you all and welcome to my new tutorial on JavaScript. I want to use this medium to wish you all a happy Valentine's Day. In my last tutorial post we discussed about Learning JavaScript Number Object with examples, so in this tutorial we will be using few examples to demonstrate the properties of Number.

Wednesday, February 12, 2020

Learn JavaScript Objects in this in-depth tutorial with series of examples


Hello guys!! morning to you all. I want to welcome you to my tutorial on JavaScript. In my last tutorial we talked about the step by step guide on how to use JavaScript to print the content of your web page ( JavaScript Page Printing ).

In this tutorial we are going to be discussing about JavaScript Object Overview, and i will advice that you pay full attention to this topic because it is more advanced than the previous topics we have been treating on JavaScript.

Wednesday, February 5, 2020

Step by step guide on how to use JavaScript to print the content of your web page( JavaScript Page Printing)


Hello guys!, good evening and welcome to my new tutorial post on JavaScript. In my last tutorial post we discussed about JavaScript void keyword which was discussed with some examples.

In this section of my tutorial on Javascript, we are going to be discussing about how to print a webpage using JavaScript.

Tuesday, February 4, 2020

Step by step tutorial guide which explains how to implement JavaScript void keyword with examples


Hello everyone, afternoon to you all and welcome to a new tutorial section on JavaScript. In our tutorial post we talked about JavaScript dialog boxes and I believe by now you can easily create the various dialog boxes without much stress.

In this tutorial post we are going to be discussing JavaScript Void Keyword. 

Saturday, February 1, 2020

Learn about the various ways in which JavaScript can be used to create an alert, confirmation and prompt dialog boxes in this step by step guide


Hello guys evening and welcome to my new tutorial post on JavaScript. In my previous tutorial post, i talked about JavaScript Page redirection.

Now in this tutorial, am going to be talking about JavaScript dialog boxes. Kindly read through carefully and ask questions where you don't understand properly. 

Friday, January 31, 2020

Learn the various ways in which JavaScript can be used to redirect a web page to another


Hello guys evening and welcome to my new tutorial post on JavaScript. In my previous tutorial post we discussed about JavaScript Cookies.

In this tutorial post we will be discussing about JavaScript Page Redirection.

What is Page Redirection?

You might have encountered a situation where you clicked a URL to reach a page X but internally you where directed to another page Y. It happens due to page redirection. This concept is different from JavaScript Page Refresh.

Sunday, December 29, 2019

Step by step guide on how to Create, read, update and delete a cookie in JavaScript


Hello guys! evening to you all and welcome to my new tutorial post on JavaScript. In my last tutorial post we discussed about JavaScript Event tutorial with examples.

In this tutorial section, we are going to be looking into how to set cookies using JavaScript.

What are Cookies?

Web Browsers and Servers use HTTP protocol to communicate and HTTP is a stateless protocol. But for a commercial website, it is required to maintain session information among different pages. For example, one user registration ends after completing many pages. But how to maintain users' session information across all the web pages.

In many situations, using cookies is the most effective way of tracking and remembering preferences, purchases, commissions, and other information required for better visitor experience or site statistics.

You can also read our tutorial post on: JavaScript Variables

How it works? 

Your server sends some data to the visitor's browser in the form of a cookie. The browser may accept the cookie. If it does, it is stored as a plain text record on the visitor's hard drive. Now, when the visitor arrives at another page on your site, the browser sends the same cookie to the server for retrieval. Once retrieved, your server knows/remembers what was stored earlier.



Cookies are a plain text data record of 5 variable-length fields-
  • Expires - The date the cookie will expire. If this is blank, the cookie will expire when the visitor quits the browser.
  • Domain - The domain name your site.
  • Path - The path to the directory or web page that set the cookie. This may be blank if you want to retrieve the cookie from any directory or web page.
  • Secure - If this fied contains the word "secure", then the cookie may only be retrieved with a secure server. If this field is blank, no such restriction exists.
  • Name=Value - Cookies are set and retrieved in the form of key-value pairs. 
Cookies were originally designed for CGI programming. The data contained in a cookie is automatically transmitted between the web browser and the web server, so CGI script on the server can read and write cookie values that are stored on the client.

JavaScript can manipulate cookies using cookie property of the Document object. JavaScript can read, create, modify and delete the cookies that apply to the current web page.

You can also read our tutorial post on: JavaScript Syntax

Storing Cookies

The simplest way to create a cookie is to assign a string value to the document.cookie object, which looks like this.

document.cookie = "key1 = value1; key2 = value2; expires = date";     

Here the expires attribute is optional. If you provide this attribute with a valid date or time, then the cookie will expire on a given date or time and thereafter, the cookie value will not be accessible.

Note - Cookie values may not include semicolons, commas, or whitespace. For this reason, you may want to use the JavaScript escape() function to encode the value before storing it in the cookie. If you do this, you will also have to use the corresponding unescape() function when you read the cookie value. 

Example 

Try the following example. It sets a customer's name in an input cookie. 

<html>
     <head>
          <script  type = "text/javascript">
               <!--
                    function  WriteCookie()  {
                         if ( document.myform.customer.value == "" ) {     
                              alert("Enter some value!");
                              return; 
                         }
                         cookievalue = escape(document.myform.customer.value) + ";";    
                         document.cookie  = "name=" + cookievalue; 
                         document.write("Setting Cookies : " + "name=" + cookievalue );
                    }
               //-->
          </script>
     </head>

     <body>
          <form  name = "myform"  action = "">
               Enter name:  <input  type = "text"  name = "customer"/>
               <input  type = "button"  value = "Set Cookie"  onclick = "WriteCookie();"/>   
          </form>
     </body>
</html>

Output

Below is the output of the above example.


 Enter name:


Now your machine has a cookie called name. You can set multiple cookies using multiple key = value pairs separated by comma.

You can also read our tutorial post on: JavaScript - Switch Case 

Reading Cookies

Reading a cookie is just as simple as writing one, because the value of the document.cookie object is the cookie. So you can use this string whenever you want to access the cookie. The document.cookie string will keep a list of name = value pairs separated by semicolons, where name is the name of a cookie and value is it's string value. 

You can use strings' split() function to break a string into key and values as folows:

Example 

Try the following example to get all the cookies.

<html>
     <head>
          <script  type = "text/javascript">
               <!--
                    function  ReadCookie()  {
                         var  allcookies = document.cookie;
                         document.write("All Cookies : " + allcookies);   

                         // Get all the cookies pairs in an array 
                         cookiearray = allcookies.split(';');

                         // Now take key value pair out of this array 
                         for (var  i = 0;  i < cookiearray.length; i++)  {
                               name = cookiearray[i].split('=')[0];
                               value = cookiearray[i].split('=')[1];
                               document.write("Key is : " + name + "and value is : " + value);     
                         }
                    }
               //-->
          </script>
     </head>

     <body>
          <form  name = "myform"  action = "">
               <p>Click the following button and see the result</p>
               <input  type = "button"  value = "Get Cookie"  onclick = "ReadCookie()"/>     
          </form>
     </body>
</html>

Note - Here length is a method of Array class which returns the length of an array. We will discuss Arrays in details in a separate tutorial post. By that time, please try to understand it properly.

Output

Below is the output of the above example. 


  Click the following button and see result
  

Note - There may be some other cookies already  set on your machine. The above code will  display all the cookies set on your machine.


Setting Cookies Expiry Date

You can extend the life of a cookie beyond the current browser session by setting an expiration date and saving the expiry date within the cookie. This can be done by setting the 'expires' attribute to a date and time.

Example 

Try the following example. It illustrates how to extend the expiry date of a cookie by one Month. 

<html>
     <head>
          <script  type = "text/javascript">
               <!--
                    function  WriteCookie()  {
                         var  now = new Date();
                         now.setMonth( now.getMonth() + 1);
                         cookievalue = escape(document.myform.customer.value)  + ";" 

                         document.cookie = "name" + cookievalue; 
                         document.cookie = "expires=" + now.toUTCString() + ";"
                         document.write("Setting Cookie : " + "name=" + cookievalue);
                    }
               //-->
          </script>
     </head>

     <body>
          <form  name = "myform"  action = "">
               Enter name: <input  type = "text"  name = "customer"/>
               <input  type = "button"  value = "SetCookie"  onclick = "WriteCookie()"/>     
          </form>
     </body>
</html>

Output

Below is the output of the above example. 


 Enter name:


You can also read our tutorial post on: Css Dimensions

Deleting a Cookie 

Some times you will want to delete a cookie so that subsequent attempts to read the cookie return nothing. To do this, you just need to set the expiry date to a time in the past. 

Example 

Try the following example below. It illustrates how to delete a cookie by setting it's expiry date to one month behind the current date. 

<html>
     <head>
          <script  type = "text/javascript">
               <!--
                    function  WriteCookie()  {
                         var  now = new Date();
                         now.setMonth( now.getMonth() - 1);
                         cookievalue = escape(document.myform.customer.value)  + ";" 

                         document.cookie = "name" + cookievalue; 
                         document.cookie = "expires=" + now.toUTCString() + ";"
                         document.write("Setting Cookie : " + "name=" + cookievalue);
                    }
               //-->
          </script>
     </head>

     <body>
          <form  name = "myform"  action = "">
               Enter name: <input  type = "text"  name = "customer"/>
               <input  type = "button"  value = "SetCookie"  onclick = "WriteCookie()"/>     
          </form>
     </body>
</html>

Output

Below is the output of the above example. 


 Enter name:


Alright guys, we have come to the end of this tutorial post on JavaScript Cookies. In my next tutorial post i will be discussing JavaScript Page Redirection.

Always feel free to ask your questions via the comment box, they will be attended to as soon as possible. Follow us on our social media handles to stay updated with our latest posts. Thanks for reading and bye for now.

Sunday, December 8, 2019

JavaScript Events tutorial with examples


Hello morning to you all, welcome to my new tutorial on JavaScript. In my last tutorial post we rounded up all about JavaScript function. 

In this tutorial we are going to be discussing Events in JavaScript. JavaScript's interaction with HTML is handled through events that occur when the user or the browser manipulates a page