Set - 6

Question 1 :

How to create a popup warning box

Answer :

alert('Warning: Please enter an integer between 0 and 100.');


Question 2 :

How to create a confirmation box?

Answer :

confirm("Do you really want to launch the missile?");


Question 3 :

How to create an input box?

Answer :

prompt("What is your temperature?");


Question 4 :

How to setting a cookie with the contents of a textbox ?

Answer :

Values stored in cookies may not have semicolons, commas, or spaces. You should use the handy "escape()" function to encode the values, and "unescape()" to retrieve them.

//Sets cookie of current value for myTextBox
function TextBoxOnchange() {
	var myBox = window.document.getElementById(myTextBox");
	document.cookie = "myTextBox="+ escape(myBox.value) + getExpirationString();
}
//return a string like ";expires=Thu, 5 Jan 2006 16:07:52 UTC"
function getExpirationString() {
	var exp = new Date();
	var threemonths = exp.getTime()+(120*24*60*60*1000);
	exp.setTime(threemonths);
	return ";expires="+exp.toGMTString();
}

This is called from the event handler in the HTML.

<input name="myTextBox" type="text" id="myTextBox" onchange="javascript:TextBoxOnchange()" />


Question 5 :

How to getting values from cookies to set widgets? 

Answer :

function getCookieData(labelName) {
	//from Danny Goodman
	var labelLen = labelName.length;
	// read cookie property only once for speed
	var cookieData = document.cookie;
	var cLen = cookieData.length;
	var i = 0;
	var cEnd;
	while (i < cLen) {
		var j = i + labelLen;
		if (cookieData.substring(i,j) == labelName) {
			cEnd = cookieData.indexOf(";",j);
			if (cEnd == -1) {
				cEnd = cookieData.length;
			}
			return unescape(cookieData.substring(j+1, cEnd));
		}
		i++;
	}
	return "";
}
//init() is called from the body tag onload function.
function init() {
	setValueFromCookie("brand");
	setValueFromCookie("market");
	setValueFromCookie("measure");
}

function setValueFromCookie(widget) {
	if( getCookieData(widget) != "") {
		document.getElementById(widget).value = getCookieData(widget);
	}
}
//if you name your cookies the widget ID, you can use the following helper function
function setCookie(widget) {
	document.cookie = widget + "=" +
	escape(document.getElementById(widget).value) + getExpirationString();
}


Question 6 :

How to change style on an element?

Answer :

Between CSS and javascript is a weird symmetry. CSS style rules are layed on top of the DOM. The CSS property names like "font-weight" are transliterated into "myElement.style.fontWeight". The class of an element can be swapped out. For example: 
document.getElementById("myText").style.color = "green";
document.getElementById("myText").style.fontSize = "20";
-or-
document.getElementById("myText").className = "regular";


Question 7 :

How to Handle Event Handlers?

Answer :

You can add an event handler in the HTML definition of the element like this,

<script type="text/javascript"><!--
function hitme() {
	alert("I've been hit!");
}
// -->
</script>
<input type="button" id="hitme" name="hitme" value="hit me" onclick="hitme()"

Or, interestingly enough you can just assign the event's name on the object directly with a reference to the method you want to assign.

<input type="button" id="hitme2" name="hitme2" value="hit me2"/>
<script type="text/javascript"><!--
function hitme2() {
	alert("I've been hit too!");
}
document.getElementById("hitme2").onclick = hitme2;
// -->
</script>

You can also use an anonymous method like this:
document.getElementById("hitme3").onclick = function () { alert("howdy!"); }
You can also use the W3C addEvventListener() method, but it does not work in IE yet:

<input type="button" id="hitme4" name="hitme4" value="hit me4"/>
<script type="text/javascript"><!--
function hitme4() { 
	alert("I've been hit four!");
}
if(document.getElementById("hitme4").addEventListener) {
	document.getElementById("hitme4").addEventListener("click", hitme4, false); 
}
// -->
</script>


Question 8 :

How to remove the event listener: ?

Answer :

<script type="text/javascript">
	document.getElementById("hitme4").removeEventListener("click", hitme4, false);
</script>

Key Events
"onkeydown", "onkeypress", "onkeyup" events are supported both in ie and standards-based browsers.

<script type="text/javascript">
function setStatus(name,evt) {
	evt = (evt) ? evt : ((event) ? event : null); /* ie or standard? */
	var charCode = evt.charCode;
	var status = document.getElementById("keyteststatus");
	var text = name +": "+evt.keyCode;
	status.innerHTML = text;
	status.textContent = text;
}
</script>
<form action="">
<input type="text" name="keytest" size="1" value=""
onkeyup="setStatus('keyup',event)" 
onkeydown="setStatus('keydown',event)" 
/>
<p id="keyteststatus">status</p>
</form>


Question 9 :

How to make elements invisible ?

Answer :

Change the "visibility" attribute of the style object associated with your element. Remember that a hidden element still takes up space, use "display" to make the space disappear as well.

if ( x == y) {
	myElement.style.visibility = 'visible';
} else {
	myElement.style.visibility = 'hidden';
}


Question 10 :

How to set the cursor to wait ?

Answer :

In theory, we should cache the current state of the cursor and then put it back to its original state. 
document.body.style.cursor = 'wait'; 
//do something interesting and time consuming
document.body.style.cursor = 'auto';


Question 11 :

How to reload the current page ?

Answer :

window.location.reload(true);


Question 12 :

how to force a page to go to another page using JavaScript ?

Answer :

<script language="JavaScript" type="text/javascript" ><!-- location.href="http://newhost/newpath/newfile.html"; //--></script>


Question 13 :

How to convert a string to a number using JavaScript?

Answer :

You can use the parseInt() and parseFloat() methods. Notice that extra letters following a valid number are ignored, which is kinda wierd but convenient at times.

parseInt("100") ==> 100
parseFloat("98.6") ==> 98.6
parseFloat("98.6 is a common temperature.") ==> 98.6
parseInt("aa") ==> Nan //Not a Number
parseInt("aa",16) ==> 170 //you can supply a radix or base


Question 14 :

How to convert numbers to strings using JavaScript? 

Answer :

You can prepend the number with an empty string 
var mystring = ""+myinteger; 
or 
var mystring = myinteger.toString(); 
You can specify a base for the conversion, 
var myinteger = 14; 
var mystring = myinteger.toString(16);

mystring will be "e".


Question 15 :

How to test for bad numbers using JavaScript? 

Answer :

the global method, "isNaN()" can tell if a number has gone bad.

var temperature = parseFloat(myTemperatureWidget.value);
if(!isNaN(temperature)) {
    alert("Please enter a valid temperature.");
}

 


Question 16 :

What's Math Constants and Functions using JavaScript?

Answer :

The Math object contains useful constants such as Math.PI, Math.E 
Math also has a zillion helpful functions.

Math.abs(value); //absolute value 
Math.max(value1, value2); //find the largest 
Math.random() //generate a decimal number between 0 and 1 
Math.floor(Math.random()*101) //generate a decimal number between 0 and 100