Link for all dot net and sql server video tutorial playlists
Link for slides, code samples and text version of the video
In this video we will discuss the disadvantages or downsides of using JavaScript.
There are two main disadvantages of JavaScript.
Security : JavaScript runs on the client machine. So a malicious user may use Javascript to do a variety of things like tracking your browsing history, stealing passwords etc. This is one of the main reasons why people disable JavaScript.
Browser Compatibility : Not all browsers treat the same piece of JavaScript in the same manner. This means the functionality and the user interface may vary from browser to browser. That is why cross-browser testing is very important. However, with JavaScript libraries like jQuery Browser Compatibility is no longer a major issue.
JavaScript Browser Compatibility Examples
Example 1 : innerText property is supported in IE & Chrome, but not in Firefox. This means the ValidatForm() JavaScript function that we worked with in Part 1, will only work in IE & Chrome but not in Firefox.
function ValidatForm()
{
var ret = true;
if (document.getElementById(“txtFirstName”).value == “”)
{
document.getElementById(“lblFirstName”).innerText = “First Name is required”;
ret = false;
}
else
{
document.getElementById(“lblFirstName”).innerText = “”;
}
if (document.getElementById(“txtLastName”).value == “”)
{
document.getElementById(“lblLastName”).innerText = “Last Name is required”;
ret = false;
}
else
{
document.getElementById(“lblLastName”).innerText = “”;
}
if (document.getElementById(“txtEmail”).value == “”)
{
document.getElementById(“lblEmail”).innerText = “Email is required”;
ret = false;
}
else
{
document.getElementById(“lblEmail”).innerText = “”;
}
return ret;
}
For the above JavaScript function to work in all the browsers that is in IE, Chrome & Firefox, replace innerText property with textContent as shown below.
function ValidatForm()
{
var ret = true;
if (document.getElementById(“txtFirstName”).value == “”)
{
document.getElementById(“lblFirstName”).textContent = “First Name is required”;
ret = false;
}
else
{
document.getElementById(“lblFirstName”).textContent = “”;
}
if (document.getElementById(“txtLastName”).value == “”)
{
document.getElementById(“lblLastName”).textContent = “Last Name is required”;
ret = false;
}
else
{
document.getElementById(“lblLastName”).textContent = “”;
}
if (document.getElementById(“txtEmail”).value == “”)
{
document.getElementById(“lblEmail”).textContent = “Email is required”;
ret = false;
}
else
{
document.getElementById(“lblEmail”).textContent = “”;
}
return ret;
}
Example 2 : The following JavaScript function ddlGenderSelectionChanged() works in Chrome and Firefox but not in Internet Explorer.
[%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”WebForm1.aspx.cs” Inherits=”Demo.WebForm1″ %]
[!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ”
[html xmlns=”
[head runat=”server”]
[title][/title]
[script type=”text/javascript” language=”javascript”]
function ddlGenderSelectionChanged()
{
alert(‘You selected ‘ + ddlGender.value);
}
[/script]
[/head]
[body]
[form id=”form1″ runat=”server”]
[div]
[select id=”ddlGender” onchange=”ddlGenderSelectionChanged()”]
[option]Male[/option]
[option]Female[/option]
[/select]
[/div]
[/form]
[/body]
[/html]
For the JavaScript function to work in all browsers (Chrome, Firefox & Internet Explorer) it needs to be modified as shown below.
[script type=”text/javascript” language=”javascript”]
function ddlGenderSelectionChanged()
{
alert(‘You selected ‘ + document.getElementById(‘ddlGender’).value);
}
[/script]
