Showing posts with label JavaScript Developer. Show all posts
Showing posts with label JavaScript Developer. Show all posts
Thursday, January 3, 2019
JavaScript's window.history object
January 03, 2019
As we all know JavaScript is most popular programming or scripting language among programmers, without JavaScript you can't develop a creative website, But if you want to develop such a creative website then you must have some basic knowledge about JavaScript like methods in JavaScript, keywords in JavaScript & JavaScript function, one of them i am gonna tell you in this post, So Let's See.
Here in this post we talk about JavaScript's window.history object, This object will contain browser history and It also contains an array of URL's visited by the user, You can also count the length of the URL visited by the user using length property of window.history object. So Lets See.
Every Website developer should have basic knowledge of JavaScript, Because without JavaScript you can't imagine validation in your website or without validations your website like a man without head, So if you don't wanna look like this so please use JavaScript for validation in your website.
window.history object's Methods :
window.history.go().
window.history.back().
window.history.forward().
Note : You can also use only history object instead of window.history object It alone works fine, Because window part can be removed from window.history, If history object does't work alone then you should try window.history object.
window.history.go() - : This method will loads the given page number, The history.go(distance) function works as same as back and forward button and the one another thing is it also specify the exact page which you want to load.
<!DOCTYPE html>
<html>
<body>
<button onclick="goFunction()">Go To Selected Page</button>
<script>
function goFunction(){
window.history.go(3);
}
</script>
</body>
</html>
<html>
<body>
<button onclick="goFunction()">Go To Selected Page</button>
<script>
function goFunction(){
window.history.go(3);
}
</script>
</body>
</html>
Note : The window.history.go(3) will not works when next 3 page does not exist in history list, This go function works as same as you press forward button 3 times.
window.history.back() - : This method will loads the previous page as same as clicking on the back button of browser.
<!DOCTYPE html>
<html>
<body>
<button onclick="backFunction()">Go Back</button>
<script>
function backFunction(){
window.history.back();
}
</script>
</body>
</html>
<html>
<body>
<button onclick="backFunction()">Go Back</button>
<script>
function backFunction(){
window.history.back();
}
</script>
</body>
</html>
Note : This window.history.back() function will not work if previous page does not exist in the history list. When you click on the Go Back button this button will redirect you on the previous page.
window.history.forward() - : This history.forward method will loads the next page as same as forward button of browser.
<!DOCTYPE html>
<html>
<body>
<button onclick="forwardFunction()">Next Page</button>
<script>
function forwardFunction(){
window.history.forward();
}
</script>
</body>
</html>
<html>
<body>
<button onclick="forwardFunction()">Next Page</button>
<script>
function forwardFunction(){
window.history.forward();
}
</script>
</body>
</html>
Note : This window.history.forward() function will not work, If the next page does not exist in the history list, When you click on the Next Page button this button will open a next page. Both function exactly work same as our browser's back and forward button works.
Monday, October 8, 2018
Add Auto Complete and Suggestion Feature in Your Website Using JavaScript
October 08, 2018
If you want to add this feature who work something like When Someone start typing something in your websites address bar your website will Automatically Completed it and start Suggesting keyword related to your searched keyword.
If YES than this post gonna help you to add Auto Complete and Suggestion feature in your website, There are many ways to add auto complete or suggestion feature in your website using JavaScript, Basically There two ways to add auto complete and suggestion feature in your website, The First one is using JavaScript that is above mentioned and another type is using Frameworks that is jQuery, But I am gonna tell you this using JavaScript very simple, very small & very easy way, That you can understand easily.
If you don't know advance JavaScript don't worry about it, I you know only basics of JavaScript it's ok, Because I am gonna tell you in very simple, small and easy way using basic concept of JavaScript, So let's start learning something new.
So Let's Begin,
Using JavaScript :
JavaScript method will show result faster than Frameworks method.
<!DOCTYPE html>
<html>
<head>
<title>Auto Complete & Suggestion Feature using JavaScript</title>
</head>
<body>
<script type="text/javascript">
var tags = [
"Gwalior",
"Indore",
"Punjab",
"Haryana",
"Delhi",
"Madhya Pradesh",
"Rajasthan",
"Ujjain",
"Shivpuri",
"Bhind",
"Dholpur"
];
//options
var n = tags.length; //n= number of tags
function AutoComplete(value){
document.getElementById('datalist').innerHTML =";
/* setting tagslist empty, If you skip this step, same name will be repeated. */
l = value.length; // input query length
for( var i=0; i<n; i++){
if(((tags[i].toLowerCase()).indexOf(value.toLowerCase()))>-1){
//comparing if input string is alredy existing in tags[i] string
var node = document.createElement("option");
var val = document.createTextNode(tags[i]);
node.appendChild(val);
document.getElementById("datalist").appendChild(node);
//create and append new element in 'datalist'
}
}
}
</script>
<body>
<input type="text" list="datalist" onkeyup="AutoComplete(this.value)">
<!--onkeyup calls the AutoComplete function everytime when key is released.-->
<datalist id="datalist">
<option value="Delhi"></option>
<option value="Haryana"></option>
<option value="Punjab"></option>
<option value="Rajasthan"></option>
<option value="Indore"></option>
<option value="Gwalior"></option>
<option value="Bhind"></option>
<option value="Dholpur"></option>
<option value="Shivpuri"></option>
<option value="Ujjain"></option>
<option value="Madhya Pradesh"></option>
</datalist>
<!--This tagslist will be edited through JavaScript-->
</body>
</html>
<html>
<head>
<title>Auto Complete & Suggestion Feature using JavaScript</title>
</head>
<body>
<script type="text/javascript">
var tags = [
"Gwalior",
"Indore",
"Punjab",
"Haryana",
"Delhi",
"Madhya Pradesh",
"Rajasthan",
"Ujjain",
"Shivpuri",
"Bhind",
"Dholpur"
];
//options
var n = tags.length; //n= number of tags
function AutoComplete(value){
document.getElementById('datalist').innerHTML =";
/* setting tagslist empty, If you skip this step, same name will be repeated. */
l = value.length; // input query length
for( var i=0; i<n; i++){
if(((tags[i].toLowerCase()).indexOf(value.toLowerCase()))>-1){
//comparing if input string is alredy existing in tags[i] string
var node = document.createElement("option");
var val = document.createTextNode(tags[i]);
node.appendChild(val);
document.getElementById("datalist").appendChild(node);
//create and append new element in 'datalist'
}
}
}
</script>
<body>
<input type="text" list="datalist" onkeyup="AutoComplete(this.value)">
<!--onkeyup calls the AutoComplete function everytime when key is released.-->
<datalist id="datalist">
<option value="Delhi"></option>
<option value="Haryana"></option>
<option value="Punjab"></option>
<option value="Rajasthan"></option>
<option value="Indore"></option>
<option value="Gwalior"></option>
<option value="Bhind"></option>
<option value="Dholpur"></option>
<option value="Shivpuri"></option>
<option value="Ujjain"></option>
<option value="Madhya Pradesh"></option>
</datalist>
<!--This tagslist will be edited through JavaScript-->
</body>
</html>
Output :
Thursday, July 19, 2018
These 10 Useful JavaScript Tips & Tricks That Every JavaScript Developer Should Know
July 19, 2018
1 - Use Semicolons at the end of the line for termination :
As every programmer know about the value of Semicolon in programming world, Semicolon is used at the end of the line for line termination, But if we did not use Semicolon in JavaScript its ok with it JavaScript will not going to give you an error if you forget to use Semicolon, But its a good practice to use Semicolon at the end of the line for line termination.
2 - Use = = = instead of = = :
Here = = = and = = are two different thing in JavaScript, You should aware about this difference in both operators, The = = operator performs an automatic type conversion if needed.
3 - Don't forgot to use var keyword to assigning a variable's value first time :
var keyword is use for creating a variable in JavaScript, you can also assign your variable at the creating time, you should avoid global variable in JavaScript.
var name = " Syntaxios " ;
document.write(name);
eval() also called function constructor, eval() always called script engine each time to convert a source code into a executable code, That's by you always try to avoid this function in JavaScript.
var function1 = new Function (functionCode);
var function2 = eval(functionCode);
5 - Avoid using with() :
The with() is used for insert a variable at the global scope, Thus, If you have another variable with same name the this could cause confusion and may be overwrite the value of your another variable.
6 - Create an object constructor :
function Person(firstName, lastName){
this.firstName = firstName;
this.lastName = lastName;
}
var Aman = new Person("Aman","Singh");
//Here we create an object Aman.
this.firstName = firstName;
this.lastName = lastName;
}
var Aman = new Person("Aman","Singh");
//Here we create an object Aman.
7 - Create a Self-Calling Function :
Self-Calling function also called Self-invoke anonymous function or immediately invoked function. The Self-Calling function always execute automatically when you create it.
(function(){
//Put your code here that you want to execute or call automatically
})();
(function(a,b){
var answer = a+b;
return answer;
})( 7, 5 )
//Put your code here that you want to execute or call automatically
})();
(function(a,b){
var answer = a+b;
return answer;
})( 7, 5 )
8 - Get a Random Number between specific range :
To generate a random number between the specified range you have to import the Math library, Math library have random function that is used to get a random number in a specified range, This code is useful when you want to generate some fake data for testing like age between min age than max age.
var age = Math.floor(Math.random()*(max - min + 1))+min;
9 - Get random item from an array :
This code will help you to get random number or item from an array.
var items = [1, 440, 'aman', 2, 530, 'singh', 3421 119, 'rajawat', 5, 765];
var random_items = items[Math.floor(Math.random()* items.length)];
10 - Generate an array of numbers zero to max :
This code will generate the array of numbers with numbers from zero to max,<
var number_array = [];
var max = 100; // maximum number upto 100, max = 100;
for ( var i=1; number_array.push(i++)< max);
//Numbers = [ 1, 2, 3, 4, 5, ......., 100 ];
var max = 100; // maximum number upto 100, max = 100;
for ( var i=1; number_array.push(i++)< max);
//Numbers = [ 1, 2, 3, 4, 5, ......., 100 ];
Subscribe to:
Posts (Atom)
