Extra Credit

Browser Detector

by Larry Adams

HTML

<h1>Browser Detector for Extra Credit</h1>
<p>There is a few different options to use this extra credit:</p>
<ol>
    <li>Have the student build the script for each browser detector</li>
    <li>Have the students write the code to printout the message which I have provided 90% of the code.</li>
    <li>There is five major Javascript else/if which could be converted into a Switch/Case instead of else/if.</li>
</ol>
<br>

<div>You can test your browser at my website: http://www.uscg.mil/nmc/browser.html</div>

<h2>Browser Detector</h2>
<p>This issue with writing HTML, CSS, and JavaScript is - Not All Browsers and their Versions are created Equal!</p>
<p>Therefore, I recommend that you test your enviromant before actually writing your code</p>
<h2>Please convert this code to Javascript that will print in your browser</h2>
    <div>Things you need to know for testing Browser compatability:
        <ul>
            <li><a href="http://www.w3schools.com/browsers/default.asp" title="Browser Stats" target="_blank">Browser Stats</a></li>
            <li><a href="http://searchenginewatch.com/sew/how-to/2287002/website-launch-checklist-25-things-to-test-before-your-site-goes-live" title="Website Checklist" target="_blank">Checklist for Developing a Websites</a></li>
            <li><a href="http://www.w3schools.com/cssref/css3_browsersupport.asp" title="CSS3 Browser Support Reference" target="_blank">CSS3 Browser Compatabilty</a></li>
            <li><a href="https://html5test.com/" title="HTML 5 Test" target="_blank">Testing your HTML 5 for compatabilty</a></li>
</ul>
    </div>

    <h3>Convert this JavaScript!</h3>
 document.write(''
 +'Browser name  = '+browserName+'<br>'
 +'Full version  = '+fullVersion+'<br>'
 +'Major version = '+majorVersion+'<br>'
 +'navigator.appName = '+navigator.appName+'<br>'
 +'navigator.userAgent = '+navigator.userAgent+'<br>'
)

JavaScript

/*The script was provided by www.scripter.net*/

//The purpose is to get the students to understand how Browser effect JavaScript

var nVer = navigator.appVersion;
var nAgt = navigator.userAgent;
var browserName  = navigator.appName;
var fullVersion  = ''+parseFloat(navigator.appVersion);
var majorVersion = parseInt(navigator.appVersion,10);
var nameOffset,verOffset,ix;

// In Opera 15+, the true version is after "OPR/"
if ((verOffset=nAgt.indexOf("OPR/"))!=-1) {
 browserName = "Opera";
 fullVersion = nAgt.substring(verOffset+4);
}
// In older Opera, the true version is after "Opera" or after "Version"
else if ((verOffset=nAgt.indexOf("Opera"))!=-1) {
 browserName = "Opera";
 fullVersion = nAgt.substring(verOffset+6);
 if ((verOffset=nAgt.indexOf("Version"))!=-1)
   fullVersion = nAgt.substring(verOffset+8);
}
// In MSIE, the true version is after "MSIE" in userAgent
else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {
 browserName = "Microsoft Internet Explorer";
 fullVersion = nAgt.substring(verOffset+5);
}
// In Chrome, the true version is after "Chrome"
else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {
 browserName = "Chrome";
 fullVersion = nAgt.substring(verOffset+7);
}
// In Safari, the true version is after "Safari" or after "Version"
else if ((verOffset=nAgt.indexOf("Safari"))!=-1) {
 browserName = "Safari";
 fullVersion = nAgt.substring(verOffset+7);
 if ((verOffset=nAgt.indexOf("Version"))!=-1)
   fullVersion = nAgt.substring(verOffset+8);
}
// In Firefox, the true version is after "Firefox"
else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {
 browserName = "Firefox";
 fullVersion = nAgt.substring(verOffset+8);
}
// In most other browsers, "name/version" is at the end of userAgent
else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) <
          (verOffset=nAgt.lastIndexOf('/')) )
{
 browserName = nAgt.substring(nameOffset,verOffset);
 fullVersion = nAgt.substring(verOffset+1);
 if (browserName.toLowerCase()==browserName.toUpperCase()) {
  browserName =...