In JavaScript, we can use the location.reload() to reload a page, which is part of the native JavaScript Window interface. location.reload(); Or a longer version. window.location.reload(); Table of contents: 1. Reload the page and bypass the cache 2. Reload page with JavaScript 3. References 1. Reload the page and bypass the cache The location.reload() method […]
In JavaScript, we can use document.querySelector() to check if an element exists. The document.querySelector() searches for and returns the first element matching a selector or set of selectors. If it finds no matching elements, it returns null. For example, to check if an element with the id elementId exists: if (document.querySelector("#elementId")) { // The element […]
In JavaScript, we can use the built-in filter() function to remove a specified item from an array. Table of contents: 1. Remove specified item from the array with filter() 2. Remove two specified items from the array with filters() and includes() 3. JavaScript examples 4. References 1. Remove specified item from the array with filter() […]
A JavaScript example to show you how to get the selected value or text from a dropdown list. A drop box list. <select id="country"> <option value="None">– Select –</option> <option value="ID001">China</option> <option value="ID002" selected>United State</option> <option value="ID003">Malaysia</option> </select> Get option value : var e = document.getElementById("country"); var result = e.options[e.selectedIndex].value; alert(result); //ID002 Get option text : […]
In JavaScript, we can use for, forEach or for..of to loop an Array. 1.1 for //old-school, classic for loop var str = ["a", "b", "c", "d", "e"]; for(var i =0; i < str.length; i++){ console.log(str[i]); //a,b,c,d,e } output a b c d e 1.2 forEach() var num = [1, 2, 3, 4, 5]; num.forEach(anyFunction) function […]
In JavaScript, we can use forEach(function) to loop an Array. The provided function in forEach() will run once for each array element. var total = 0; var num = [1, 2, 3, 4, 5]; num.forEach(anyFunction) function anyFunction(data){ total += data; } console.log(total); //15 var words = ""; var num = ["a", "b", "c", "d", "e"]; […]
In JavaScript, we can combine indexOf() and splice() to remove a certain element from an Array. var array = [1, 2, 3, 4, 5]; console.log(array) // I want remove num 4, find the index first, -1 if it is not present. var index = array.indexOf(4); if (index > -1) { // found array.splice(index, 1); } […]
In JavaScript, we can use either location.replace() or location.href to redirect a page. Normally, we use location.replace() to simulate an HTTP redirect. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <h1>JavaScript – How to redirect a page</h1> <h3>1. location.replace</h3> <button onclick="httpRedirect()">location.replace</button> <h3>2. location.href</h3> <button onclick="mouseClick()">location.href</button> <script> // Simulate an HTTP redirect function httpRedirect() { location.replace("https://www.mkyong.com") […]
In JavaScript, we can use the classic indexOf() or the new ES6 includes to check if a String contains a substring. // old school, classic way var str = "mkyong"; if (str.indexOf(‘yo’) > -1) { // returns `-1` if it is not present. console.log(‘match’) // display this } else { console.log(‘not found’) } // ES6 […]
In JavaScript, you can use JSON.stringify to convert an array or values into a JSON formatted string. var output = {} output[0] = "a"; output[1] = "b"; output[2] = "c"; console.log( JSON.stringify(output) ); Output { "0":"a", "1":"b", "2":"c" } 1. jQuery Ajax Request Often times, you need to convert the JavaScript values into JSON before […]
Below is a JSON string. JSON String { "name": "mkyong", "age": 30, "address": { "streetAddress": "88 8nd Street", "city": "New York" }, "phoneNumber": [ { "type": "home", "number": "111 111-1111" }, { "type": "fax", "number": "222 222-2222" } ] } To access the JSON object in JavaScript, parse it with JSON.parse(), and access it via […]
Below code snippet shows you how to execute a JavaScript in Selenium WebDriver. WebDriver driver = new ChromeDriver(); if (driver instanceof JavascriptExecutor) { ((JavascriptExecutor) driver).executeScript("alert(‘hello world’);"); } 1. WebDriver Example In this example, it uses WebDriver to load “google.com”, and executes a simple alert () later. JavaScriptExample.java package com.mkyong.test; import org.openqa.selenium.JavascriptExecutor; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; […]
In this tutorial, we will show you how to use PrimeFaces extensions – Maven plugin, to compress and combine JavaScript and CSS files, a web resources optimization example, to make web site load faster. Tool tested : PrimeFaces 3.3 PrimeFaces-Extensions 0.5 Maven 3.0.3 Note This guide is example-driven, for detail explanation and all other plugin […]
For security concern, many users like to disable JavaScript in their web browser, and it raise a big problem in many website which depends on JavaScript to function well. The easy and simple solution is using the HTML “noscript” tag to display different content if JavaScript is disabled. See following full “noscript” example : If […]
In some cases, your JavaScript may need to depend on a particular variable to “define” or “exists”, in order to process on the next step. Note I don’t recommend to do so, as JavaScript shouldn’t involve any business logic, it should be purely basic validation or UI enhancement, but, many still like to code complex […]
In JavaScript, there are two ways to check if a variable is a number : isNaN() – Stands for “is Not a Number”, if variable is not a number, it return true, else return false. typeof – If variable is a number, it will returns a string named “number”. Note Normally, people use isNaN() to […]
In this tutorial, we show you how to link an external JavaScript file (file extension end with .js) to web page. Note In HTML, you can either embed JavaScript on web page or external JavaScript file, or implemented both ways together. 1. External JavaScript file Create a new file end with “.js” file extension, and […]
In JSF 2.0, you can use <h:outputScript /> tag to render a HTML “script” element, and link it to a js file. For example, <h:outputScript library="js" name="common.js" /> It will generate following HTML output… <script type="text/javascript" src="/JavaServerFaces/faces/javax.faces.resource/common.js?ln=js"> </script> JSF outputScript example An example to show you how to use <h:outputScript /> to render a “common.js“, […]
In JavaScript, you can use following two ways to get hidden field value in a form : document.getElementById(‘hidden field id’).value document.formName.elements[‘hidden field name’].value See an example here… <html> <body> <script type="text/javascript"> function printIt(){ alert(document.getElementById(‘abcId’).value); alert(document.formName.elements[‘abcName’].value); } </script> <h1>Access Hidden value in JavaScript</h1> <form name="formName"> <input type=hidden id="abcId" name="abcName" value="Wall Street! Money Never Sleep"/> <input type=button […]
To increase the website performance and reduce the total file’s size return, you may consider to load JavaSript (.js) file when it’s required. In jQuery, you can use the $.getScript function to load a JavaScript file at runtime or on demand. For example, $("#load").click(function(){ $.getScript(‘helloworld.js’, function() { $("#content").html(‘Javascript is loaded successful!’); }); }); when a […]
For some security reasons, you may need to convert your HTML file into Javascript (js) file, and display the JS file instead of the HTML file directly. The concept is quite simple – using the document.write HTML <h1>Convert HTML to Javascript file</h1> Javascript (js) document.write(‘<h1>Convert HTML to Javascript file</h1>’); 1. Test.html Create a simple HTML […]
Often times, we need to “preload” an image into browser’s cache for performance concern. For instance, we have a mouseover event and the image needs to be update without any delay. This “Preloading” stuff can be achieved in two ways , either JavaScript or HTML code. Javascript We can “preload” an image with the following […]
The focus() method is used to give focus to a textbox, or other html components. Here is a simple example to make a textbox focus automatically after page load. focus is not working in IE The above code is working fine in Firefox (FF), but not in Internet Explorer (IE). Actually the IE is supporting […]
In JavaScript, you can use getElementById() fucntion to get any prefer HTML element by providing their tag id. Here is a HTML example to show the use of getElementById() function to get the DIV tag id, and use InnerHTML() function to change the text dynamically. HTML… <html> <head> <title>getElementById example</title> <script type="text/javascript"> function changeText(text) { […]
This article shows different function calling in both JavaScript and jQuery. At the end, we will show an example of how to call a function to create dynamic content after a page is loaded, both in JavaScript and jQuery. Table of contents: 1. JavaScript Function Calling 2. jQuery Function Calling 3. JavaScript – Function calling […]
Many webmasters like to disable the right click button to protect their own content. Here is the JavaScript to disable right click button on a website : <script> <!– //edit this message to say what you want var message = "Function Disabled"; function clickIE() { if (document.all) { alert(message); return false; } } function clickNS(e) […]
This article shows how to call a function after a page is loaded in Javascript. Table of contents: 1. Document: DOMContentLoaded event 2. Window: load event 3. Javascript calls a function after the page loaded 4. References 1. Document: DOMContentLoaded event In modern JavaScript, the most common way to run code after loading the page […]
