JavaScript Examples

1. Clear cookie example
   Cookies can be deleted in the same way as they are created but with the expiry date set to any past date. The example below shows how to delete the cookie from the browser using JavaScript.
    
2. JavaScript getElementById innerHTML
   In JavaScript method document.getElementById() is very useful for containing any element reference. We can handle the properties of element by having once the element's reference. In this example we have to show the use of innerHTML attribute property with getElementById() method.
    
3. JavaScript getElementById Style
   In this part of JavaScript examples, we have created a simple example which shows the use of style attribute over any element by using the method getElementById().
    
4. JavaScript add row dynamically to table
   We can add rows to the table by adding a pair of  <TR></TR> tags. If we want to add row to a table dynamically then we can also do this with the JavaScript code. In this example we will describe you how to add row dynamically to the table by the program.
    
5. JavaScript blur event
   When any text box, text area or select box looses its focus then the blur event occurs. The onBlur event handler can execute the specific JavaScript code on the invocation of a blur event. To explain this onBlur event handler, we have created a simple example here which will provide you the clear understanding of blur event.
    
6. JavaScript Change link
   The modification of HTML code is quite simple. Now to modify the link's text, we have created a link that dynamically changes when you pass the mouse pointer over it.
    
7. JavaScript Checkbox getElementById
   In the given example we are going to show an image on clicking the checkbox. This is done by using the JavaScript method getElementById() that is used to get the value of the particular element by their id.
    
8. Javascript clear textarea
   The text in any text area can be deleted or erased using Javascript. In the example below, we have created a text area  element containing some text.
    
9. JavaScript Clock Timer
   In the given example, we have created the instance of Date to show the time. Here we have created a condition that if the number of minutes, seconds or hours is less than 9, then it will add 0 in front of min, sec or hour value like 09 in the timer and it will add AM or PM according to the hour value.
    
10. JavaScript Cookies
    A cookie is a temporary file that contains the visitor's information on the particular web page. In the given example we have created a cookie that stores the name of a visitor for 1 day.
     
11. JavaScript Date Difference
    As you have already learnt about the JavaScript method Date.getTime() that returns the time (in milliseconds) elapsed from 1st January, 1970 to the current Date instance. In the given example, firstly we have created two instances of Date to set two dates i.e current date and the date specified.
     
12. JavaScript duplicate string
    We can create a strings duplicate string with the use of JavaScript's duplicate method. In this example code we have called the duplicate method on the text range object to create a duplicate copy of that text and then it will be displayed through the alert() method.
     
13. JavaScript Email Validation
    JavaScript allows to perform a client side validation of email Ids in several forms. For this purpose, we have created an example which shows how you can validate an email address for a form.
     
14. javascript focus input
    JavaScript can be very useful while the user fills the form containing number of fields in the web page. You can automatically transfer the focus to any other input field in the page.
     
15. JavaScript getAttribute Href
    In JavaScript we can get the URL value of the linked resource by getting the HREF value of the link. We can achieve this in two ways :
     
16. JavaScript getAttribute Style
    We have discussed in our previous examples the use of getAttribute() method. Visit the link http://www.roseindia.net/javascript/javascript-getattribute-method.shtml to get the example of getAttribute() method.
     
17. JavaScript getElementById div
    In JavaScript we can get access to any node by using the method document.getElementById(). This method is very important for the JavaScript and is the entry point of the DOM (Document Object Model) scripting.
     
18. JavaScript getElementById Iframe
    We can also use document.getElementById() method with the IFrame. In this example we have created an html page into which we have one IFrame window which takes another HTML page.
     
19. JavaScript getElementById select
    We can use document.getElementById() over the <select> tag to perform any operation with the selected value as a option. We will be describing you here to use getElementById with select by using a very simple example.
     
20. JavaScript get excel file data
    By the use of JavaScript we can get the excel file data as well. Here is the example which gets the data from the excel file with the cell and row index values.
     
21. JavaScript Hide Button
    In the given example, we have created a button. The document object grabs the button and refers to property 'visibility' with style object. The 'visibility' property makes the element visible or invisible.
     
22. JavaScript Hide Div
    In the given example, we have created a div element using <div> tag. The method document.getElementById('div') grabs the text of the div element and refer to property 'visibility' with style object.
     
23. JavaScript hide image
    In the given example, we have defined an image using <img> tag inside the <div> tag. The method document.getElementById('div') grabs the id of the div element and refer to property 'visibility' with style object.
     
24. JavaScript Hide Table Column
    In the given example, we have created a table consisting of four columns. Here we allow the user to enter the column number they want to hide.
     
25. JavaScript Hide Table Rows
    In the given example, we have created a table. The method getElementById() of document object grabs the id of the table.
     
26. JavaScript Key Event
    In the given example, we are going to show you how to display the text of textField1 on the text field2 on key up. For this purpose, we have created two text fields text1 and text2.
     
27. JavaScript link
    JavaScript's Link object has the property text which allow the user to get the text value of the link. Here we have used this property with the document.links[0]. To invoke this property from the function,
     
28. JavaScript method location
    JavaScript provides several ways to display any other page in the current browser window using location property of the window object. One of them is location.href which redirects the user straightforward to the specified URL.
     
29. JavaScript move div
    In the following code, we have defined a div element consisting of text 'Hello World' in order to move it on the browser.
     
30. JavaScript move file
    In the given example, firstly we have created an ActiveXObject object which is used to enable and return a reference to an Automation object.
     
31. JavaScript move image
    In the following code, we have defined an image 'node.jpg' in order to move it on the browser. For this, we have used onClick event handler to specify what should happen when the mouse is clicked on the window.
     
32. JavaScript Navigate Back
    In this tutorial, we will learn how to navigate back to the page where the user came from. JavaScript provides several methods for this purpose.
     
33. JavaScript navigate to page
    In this section, you will learn how to navigate from one page to another using JavaScript. For this purpose, we have created two html pages navigatePage.html and page.html.
     
34. JavaScript Navigate to URL
    JavaScript provides several methods and properties which allow the user to navigate to the various locations. Here we are using the 'href' property of location object for this purpose.
     
35. JavaScript indexOf substring
    In this section, we are going to find the location of substring using the JavaScript method indexOf(). When this method is called from the string object, it returns the index of the position where the specified string first occurs in a string.
     
36. JavaScript onkeypress event
    In the given example, we are going to show you how to restrict the user to enter any number into the input field. For this purpose, we have created a text field.
     
37. JavaScript Open file
    You can see in the given example, we have created a file component to let the user select the file to be read and a button to submit the request.
     
38. JavaScript Open link in new window
    To open a new window with a link within the web page, we have used the JavaScript method window.open(). Now in order to give specific look to the new window, we have used some attributes like scrollbars, width, height, left, top etc.
     
39. JavaScript Open Modal Window
    As we have already discussed about the window.open() method of Window object which is used to open a new window.
     
40. JavaScript Open URL
    As we know that window.location object that contains the current URL information. In the given code the document.forms[0].url.value gets the entered URL and used this object to open the entered URL.
     
41. JavaScript parse date
    JavaScript provides the function parse() that takes a date in string format and returns the equivalent number of milliseconds elapsed since 1 Jan 1970.
     
42. JavaScript Remove Element
    JavaScript provides several methods which allow the user to remove particular HTML element. Here we are going to remove a div element.
     
43. JavaScript Remove Focus
    To remove the focus from the window, we have used blur() method of  the Window object. It removes the focus from a window and moves it behind other windows.
     
44. JavaScript Remove Spaces
    To remove the spaces, we have simply used JavaScript methods split() and join(). Now to use these methods, we have defined a string. Firstly the split(" ") method splits the string into an array of strings.
     
45. JavaScript reverse text string
    In the given example, we have created a function reverse() which is called by the button "Reverse". In the reverse() function, we have created two variables 'text' and 'str'.
     
46. JavaScript Show Date
    You can see in the given example, we have created Date object which holds the current date and time. Now, in order to display the date,
     
47. JavaScript Show Hide table
    In the given example, we have created a table. The method document.getElementById('div') grabs the id of the table and refer to property 'visibility' with style object.
     
48. JavaScript Slideshow
    To display a series of images in an automated slide show, we have created five instances of the image object referring their images.
     
49. JavaScript sort list
    You can see in the given example, we have created an unordered list using the <li>with <ul> html tag. The method document.getElementById() defined in the function grabs the id of the list and stores it into the variable listItem which uses the length property to get all the list elements.
     
50. JavaScript sort table
    In sort.js file, we have created a for loop which iterates through the rows of the table in the function sortTable() and populates the array 'columns' with the contents of selected column. Then, we created for loop to loop through the array 'column' and copy the array columns[i] to array[i]. The method columns.sort() sorts the column items.
     
51. JavaScript substring length
    You can see in the given example, we have defined a string and used the JavaScript method substring() in order to extract the substring from  the defined string.
     
52. JavaScript toFixed method
    Where numberObject is the number at which we will apply toFixed() method and digitsAfterDecimalPosition are the number of post decimal digits for precision.
     
53. JavaScript toGMTString method
    toGMTString() method of JavaScript is used to convert any date into the string according to GMT( Greenwich Mean Time ) and returns the converted string.
     
54. JavaScript toSource
    JavaScript toSource() method is usually used by the JavaScript internally not explicitly but we can use toSource() method for debugging purpose.
     
55. JavaScript toString method
    JavaScript's toString() method is used to convert any object into the string object. If we want to convert an object from one format into String format then it is very useful.
     
56. JavaScript write to IFrame
    The <iframe> tag defines an inline frame which allows to embed an HTML document inside another HTML document.
     
57. JavaScript write to text file
    In the given example, firstly we have created an ActiveXObject object which is used to enable and return a reference to an Automation object and  used it with the CreateTextFile(), a JavaScript method , which generates a file specified and returns a TextStream object to read from or write to the file.
     
58. JavaScript XML Http Request
    The XMLHttpRequest object allows to update a web page without reloading. It requests and receives the data from the server after the page has loaded.
     
59. JavaScript XML Parser
    XML parser reads and loads the xml into computer memory and converts it into DOM object. After loading the document, the data can be manipulated using DOM  with JavaScript.
     
60. JavaScript XML to HTML
    As you have already learned how to access and manipulate the DOM parser in the previous section. Here we have used the DOM reference to display the data of XML document into html table.
     
61. JavaScript Zoom in and Zoom out
    Here we are providing you an example to show the image effect. For this purpose, we have created three functions.
     
62. JavaScript toLocaleLowerCase method
    If we want to convert whole string into the lower case letters then we can do this with a single step by calling method toLocaleLowerCase() on the string object.