As previously stated, you may browser through the "navigator" object properties and then properly parse the ones interesting for you (for example: "appCodeName", "appVersion" and the omnipresent "userAgent").
Two ways of doing so might be:
function detect()
{
    document.getElementById("bCodeName").innerHTML = navigator.appCodeName + " " + navigator.appVersion.split(" ")[0];
}
or a bit shorter:
function detect()
{
    document.getElementById("bCodeName").innerHTML = navigator.userAgent.split(" ")[0].replace("/", " ");
}
You may do well handling exceptions, in case there was some error whilst parsing this data. See Javascript Try/Catch
Edit:
If you want to show the specific application name and version, take a look to this great SO answer. With this, the final code would be:
function detect()
{
    var N= navigator.appName, ua= navigator.userAgent, tem;
    var M= ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i);
    if(M && (tem= ua.match(/version\/([\.\d]+)/i))!= null) M[2]= tem[1];
    M = M? [M[1], M[2]]: [N, navigator.appVersion, '-?'];
    document.getElementById("bCodeName").innerHTML = M[0] + " " + M[1]
}