WISDOMBAY

in4mation ... organized

First Page of this Article | Second Page of this Article | Third Page of this Article

Master Javascript by Typing PART II

Page 2

Here we are assigning or storing a string in to our already declared variable called info. The Navigator is a built in object which contains information about browser. So we are using some methods of this object to tap in our required information. The navigator.appCodeName will return the code name used for the current build of the client browser. The navigator.appName will return a string indicating the name of the client browser. The navigator.appVersion will return the version of the browser. The navigator.platform will help us in determining the platform in which the browser is running. The navigator.cpuClass will return a string indicating cpu on which the machine runs.

The \n character that we used in the end of each line is called an Escape Character and it will result in a newline character after each line.

Now lets take a look at how we called this function. The below given sentence was used to call our function. The onLoad handler means that, this function will get executed whenever the html page on which this code resides gets loaded completely.

<body onLoad="getClientBrowserInfo()"> .

HANDS ON LAB FOR THE FUTURE JAVA SCRIPT MASTER
Change the above given code in such a way that, you can we the browser info whenever a button is clicked.

HINTS:
1. Add a button to the page. Refer our 2nd example in last issue for incorporating buttons to a page.
2. Remove the onLoad handler from body.
3. Add a onClick="getClientBrowserInfo()" to your button.

Still groping in the darkness, download the code.



ANOTHER FORM OF FUNCTION - Functions with Parameters

Take a look at the format of writing functions in Java Script, that we mentioned earlier. There is a thing called argumentlist. When talking about the format i said that 'The argument list is a number of entities that you want to pass in to your function. '

A simple example for a function is shown below.
var yourMessage ="Hello from Spider Creations India"
function showMessage(yourMessage){ //the variable yourMessage is the argument here
alert(yourMessage) //here the message send to the function showMessage() is alerted.
}

Lets elaborate on that. Arguments are any data, that you send to function to add more customization or functionality. We can make that point a bit more clear by taking a look at a practical example. We are going to built a function that can be used to change the foreground colour & background colour of a page. We are going to design it in such a way that, the function will set the colours according to the arguments passed or send to it.

<html>
<head>
<title>My first script</title>
<script language="JavaScript">
function set()
{
// This function reads the 2 values set by user in text boxes
// and passes them to a function called setColor(forecolor,backcolor)
var uf,ub
uf = document.all.cl1.fc.value //read forecolor to a variable called uf
ub = document.all.cl1.bc.value //read backcolor to a variable called ub
setColor(uf,ub) // call the setColor() function and pass the 2 values read from text //boxes
}
function setColor(forecolor,backcolor)
{
// This is were all is happening
//Use document.body.text object to set foreground color. Set our first argument to //it
document.body.text = forecolor
//Use document.body.bgColor object to set background color. Set our second //argument to it.
document.body.bgColor = backcolor
}
</script>
</head>
<body>
<form name="cl1">
<table>
<tr><td>Foreground Colour :(enter a color code like #ccffcc) </td>
<td><input type="text" name="fc" value="#000000"></td></tr>
<tr><td>Background Colour :(enter a color code like #ccffcc) </td>
<td><input type="text" name="bc" value="#FFFFFF"></td></tr>
<tr><td colspan=2>
<input type="button" value ="Set Colour" onClick="set()"></td></tr></table>
</body>
</html>

First Page of this Article | Second Page of this Article | Third Page of this Article

Google