Javascript
Javascript is the most popular client-end scripting language used by every website. Javascript provides a way to create custom tools for the websites which are used to improve the overall site quality and UI (User Interface). It's also popular as it allow the audio and video streaming too.
Google used the javascript to load the web page contents dynamically i.e., instead of redirecting the user to a new page or refreshing the same page, the contents are updated on the required parts on the web page. This dynamic content loading approach is known as AJAX which has now become much more popular as almost every website is using this, at least, to validate the form.
Javascript vs No-Javascript
Some people often disable the javascript from their browser settings. If you are one of them and think that javascript is a security threat, then, you are completely wrong. Javascript is a way to improve the website quality according to the client's machine and navigator. If someone wants to get into your system, they wouldn't do it with the javascript. The javascript can be used to arise a deadlock situation in your system, but that is very rare and you shouldn't bother about it.
With javascript disabled, one is missing a lot of useful features. Facebook also uses AJAX for almost everything including News Feed, Status Updating, Commenting, Liking and many more. And AJAX is nothing but javascript.
If you still don't want to enable javascript on your navigator, don't worry most of the websites are designed and developed while keeping in mind such little but important things or else most of them would just fail.
If you are a web developer and wondering how to deal with such a situation when the client has javascript disabled, change your approach and design and develop the website primarily keeping in mind such users and then use javascript to reflect the changes for clients with javascript enabled. If you are puzzled, take a look at the following example:-
Lets say that you want to scroll the document to the top when the user clicks on a scroll to top handler, the basic approach would be something like this:
<html>
.
.
<style>
#goto-top{
.
.
display: none;
}
</style>
<body>
.
.
.
<a id="goto-top">Top</a>
.
.
<script>
var scroll;
window.onscroll = function () {
scroll = window.scrollY;
if (scroll >= window.scrollMaxY / 4) {
document.getElementById("goto-top").style.display = "block";
} else {
document.getElementById("goto-top").style.display = "none";
}
};
scroll = window.scrollY;
if (scroll >= window.scrollMaxY / 4) {
document.getElementById("goto-top").style.display = "block";
} else {
document.getElementById("goto-top").style.display = "none";
}
};
document.getElementById("goto-top").onclick=function(){
scrollToTop(500);
};
function scrollToTop(duration) {
var scroll = -window.scrollY / ((duration / 15));
var tID = setInterval(function () {
if (window.scrollY > 0) {
window.scrollBy(0, scroll);
} else {
clearInterval(tID);
}
}, 15);
}
var scroll = -window.scrollY / ((duration / 15));
var tID = setInterval(function () {
if (window.scrollY > 0) {
window.scrollBy(0, scroll);
} else {
clearInterval(tID);
}
}, 15);
}
</script>
</body>
</html>
The problem you will face in this method is that if the javascript is disabled, the document will not be scrolled to the top and nothing would happen actually.
Now, look at the following method:-
<html>
.
.
<body>
<div id="top"></div>
.
.
.
<a id="goto-top" href="#top">Top</a>
.
.
<script>
document.getElementById("goto-top").style.display = "none";
var scroll;
window.onscroll = function () {
scroll = window.scrollY;
if (scroll >= window.scrollMaxY / 4) {
document.getElementById("goto-top").style.display = "block";
} else {
document.getElementById("goto-top").style.display = "none";
}
};
scroll = window.scrollY;
if (scroll >= window.scrollMaxY / 4) {
document.getElementById("goto-top").style.display = "block";
} else {
document.getElementById("goto-top").style.display = "none";
}
};
document.getElementById("goto-top").onclick=function(e){
e.preventDefault();
scrollToTop(500);
};
function scrollToTop(duration) {
var scroll = -window.scrollY / ((duration / 15));
var tID = setInterval(function () {
if (window.scrollY > 0) {
window.scrollBy(0, scroll);
} else {
clearInterval(tID);
}
}, 15);
}
var scroll = -window.scrollY / ((duration / 15));
var tID = setInterval(function () {
if (window.scrollY > 0) {
window.scrollBy(0, scroll);
} else {
clearInterval(tID);
}
}, 15);
}
</script>
</body>
</html>
Here I have just made some minor changes. Now, I'm not hiding the element already but I'm using the javascript to hide the element. This means that if javascript is disabled, the element will still appear which was not the case in the earlier method. Then I have added another element with an ID which is again used in the anchor tag's href attribute preceded by #. The anchor tag can be used to scroll to any particular element in the document. I'm using the javascript to prevent its default functioning so that I can animate the scroll. This means that if javascript is disabled, the document will be scrolled to the top immediately or else the document will still scroll but within the specified duration.
This was just a minor example but when development is carried out, many situations arises where you must specify two methods for handling the clients with and without javascript. Another important example for the same is form validation. If you are using javascript to validate the forms on your webpage, you must also validate the form on the server side using server side scripting languages like PHP. If you don't do so, there are chances that the client without javascript may submit invalid data which will be accepted as no validation is done on the server-end.
There are many more similar situations. So, develop good as you don't want to disappoint any client visiting your website or web app.
Comments