Scribd
Upload
56 views15 pages

Wenks

The documents demonstrate different techniques for detecting browser details, setting cookies, using timing events, and creating JavaScript objects. Code snippets are provided to get the browser name and version, retrieve additional details about the browser, set and retrieve cookies, create simple and infinite timers, make a digital clock with timers, and directly instantiate or use a template to create JavaScript objects. The outputs of running the code snippets are also included.

Uploaded by

api-26570979
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
56 views15 pages

Wenks

The documents demonstrate different techniques for detecting browser details, setting cookies, using timing events, and creating JavaScript objects. Code snippets are provided to get the browser name and version, retrieve additional details about the browser, set and retrieve cookies, create simple and infinite timers, make a digital clock with timers, and directly instantiate or use a template to create JavaScript objects. The outputs of running the code snippets are also included.

Uploaded by

api-26570979
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 15

Detect Visitor browser and browser version

<html>
<body>
<script type="text/javascript">
var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)
document.write("Browser name: "+ browser)
document.write("<br />")
document.write("Browser version: "+ version)
</script>
</body>
</html>

More details about the visitor's browser

<html>
<body>
<script type="text/javascript">
document.write("<p>Browser: ")
document.write(navigator.appName + "</p>")

document.write("<p>Browserversion: ")
document.write(navigator.appVersion + "</p>")

document.write("<p>Code: ")
document.write(navigator.appCodeName + "</p>")

document.write("<p>Platform: ")
document.write(navigator.platform + "</p>")

document.write("<p>Cookies enabled: ")


document.write(navigator.cookieEnabled + "</p>")

document.write("<p>Browser's user agent header: ")


document.write(navigator.userAgent + "</p>")
</script>
</body>
</html>

Output:
Browser: Microsoft Internet Explorer

Browserversion: 4.0 (compatible; MSIE 6.0; Windows NT 5.1)

Code: Mozilla

Platform: Win32

Cookies enabled: true

Browser's user agent header: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)

All details about the visitor's browser

<html>
<body>

<script type="text/javascript">
var x = navigator
document.write("CodeName=" + x.appCodeName)
document.write("<br />")
document.write("MinorVersion=" + x.appMinorVersion)
document.write("<br />")
document.write("Name=" + x.appName)
document.write("<br />")
document.write("Version=" + x.appVersion)
document.write("<br />")
document.write("CookieEnabled=" + x.cookieEnabled)
document.write("<br />")
document.write("CPUClass=" + x.cpuClass)
document.write("<br />")
document.write("OnLine=" + x.onLine)
document.write("<br />")
document.write("Platform=" + x.platform)
document.write("<br />")
document.write("UA=" + x.userAgent)
document.write("<br />")
document.write("BrowserLanguage=" + x.browserLanguage)
document.write("<br />")
document.write("SystemLanguage=" + x.systemLanguage)
document.write("<br />")
document.write("UserLanguage=" + x.userLanguage)
</script>
</body>
</html>

Output:
CodeName=Mozilla
MinorVersion=;SP1;
Name=Microsoft Internet Explorer
Version=4.0 (compatible; MSIE 6.0; Windows NT 5.1)
CookieEnabled=true
CPUClass=x86
OnLine=true
Platform=Win32
UA=Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
BrowserLanguage=en-us
SystemLanguage=en-us
UserLanguage=en-us

Alert user, depending on browser

<html>
<head>
<script type="text/javascript">
function detectBrowser()
{
var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)
if ((browser=="Netscape"||browser=="Microsoft Internet Explorer") && (version>=4))
{alert("Your browser is good enough!")}
else
{alert("It's time to upgrade your browser!")}
}
</script>
</head>

<body onload="detectBrowser()">
</body>

</html>

Output:
Create a welcome cookie

<html>
<head>
<script type="text/javascript">
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}

function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : "; expires="+exdate.toGMTString())
}

function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
{alert('Welcome again '+username+'!')}
else
{
username=prompt('Please enter your name:',"")
if (username!=null && username!="")
{
setCookie('username',username,365)
}
}
}
</script>
</head>
<body onLoad="checkCookie()">
</body>
</html>

Output:

Button animation

<html>
<head>
<script type="text/javascript">
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}

function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : "; expires="+exdate.toGMTString())
}

function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
{alert('Welcome again '+username+'!')}
else
{
username=prompt('Please enter your name:',"")
if (username!=null && username!="")
{
setCookie('username',username,365)
}
}
}
</script>
</head>
<body onLoad="checkCookie()">
</body>
</html>

Output:

Image map with added JavaScript

<html>
<head>
<script type="text/javascript">
function writeText(txt)
{
document.getElementById("desc").innerHTML=txt
}
</script>
</head>

<body>
<img src ="planets.gif" width ="145" height ="126" alt="Planets" usemap="#planetmap" />
<map id ="planetmap" name="planetmap">
<area shape ="rect" coords ="0,0,82,126"
onMouseOver="writeText('The Sun and the gas giant planets like Jupiter are by far the largest
objects in our Solar System.')"
href ="sun.htm" target ="_blank" alt="Sun" />

<area shape ="circle" coords ="90,58,3"


onMouseOver="writeText('The planet Mercury is very difficult to study from the Earth because
it is always so close to the Sun.')"
href ="mercur.htm" target ="_blank" alt="Mercury" />

<area shape ="circle" coords ="124,58,8"


onMouseOver="writeText('Until the 1960s, Venus was often considered a twin sister to the
Earth because Venus is the nearest planet to us, and because the two planets seem to share many
characteristics.')"
href ="venus.htm" target ="_blank" alt="Venus" />
</map>

<p id="desc"></p>

</body>
</html>

Output:

The Sun and the gas giant planets like Jupiter are by far the largest objects in our Solar System.

Simple timing
<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 seconds!')",5000)
}
</script>
</head>

<body>
<form>
<input type="button" value="Display timed alertbox!" onClick = "timedMsg()">
</form>
<p>Click on the button above. An alert box will be displayed after 5 seconds.</p>
</body>

</html>

Output:

Click on the button above. An alert box will be displayed after 5 seconds.

Another simple timing

<html>

<head>

<script type="text/javascript">

function timedText()

var t1=setTimeout("document.getElementById('txt').value='2 seconds!'",2000)

var t2=setTimeout("document.getElementById('txt').value='4 seconds!'",4000)

var t3=setTimeout("document.getElementById('txt').value='6 seconds!'",6000)

</script>

</head>

<body>
<form>

<input type="button" value="Display timed text!" onClick="timedText()">

<input type="text" id="txt">

</form>

<p>Click on the button above. The input field will tell you when two, four, and six seconds have
passed.</p>

</body>

</html>

Timing event in an infinite loop

<body>

<form>

<input type="button" value="Start count!" onClick="timedCount()">

<input type="text" id="txt">

</form>

<p>Click on the button above. The input field will count for ever, starting at 0.</p>

</body>

</html>

Output:
Timing event in an infinite loop - with a Stop button

<html>

<head>

<script type="text/javascript">

var c=0

var t

function timedCount()

document.getElementById('txt').value=c

c=c+1

t=setTimeout("timedCount()",1000)

function stopCount()

clearTimeout(t)

</script>
</head>

<body>

<form>

<input type="button" value="Start count!" onClick="timedCount()">

<input type="text" id="txt">

<input type="button" value="Stop count!" onClick="stopCount()">

</form>

<p>

Click on the "Start count!" button above to start the timer. The input field will count forever,
starting at 0. Click on the "Stop count!" button to stop the counting.

</p>

</body>

</html>

Output:

A clock created with a timing event

<html>

<head>
<script type="text/javascript">

function startTime()

var today=new Date()

var h=today.getHours()

var m=today.getMinutes()

var s=today.getSeconds()

// add a zero in front of numbers<10

m=checkTime(m)

s=checkTime(s)

document.getElementById('txt').innerHTML=h+":"+m+":"+s

t=setTimeout('startTime()',500)

function checkTime(i)

if (i<10)

{i="0" + i}

return i

</script>

</head>
<body onload="startTime()">

<div id="txt"></div>

</body>

</html>

Output:

15:34:38

Create a direct instance of an object

<html>

<body>

<script type="text/javascript">

personObj=new Object()

personObj.firstname="John"

personObj.lastname="Doe"

personObj.age=50

personObj.eyecolor="blue"

document.write(personObj.firstname + " is " + personObj.age + " years old.")


</script>

</body>

</html>

Output:

John is 50 years old.

Create a template for an object

<html>

<body>

<script type="text/javascript">

function person(firstname,lastname,age,eyecolor)

this.firstname=firstname

this.lastname=lastname

this.age=age

this.eyecolor=eyecolor

myFather=new person("John","Doe",50,"blue")
document.write(myFather.firstname + " is " + myFather.age + " years old.")

</script>

</body>

</html>

Output:

John is 50 years old.

You might also like