JavaScript made simple: April 2009

Thursday, April 30, 2009

Displaying Calender through javascript

Displaying the Calender is the most common script in all the websites. Now-a-days in every web application requiring the calender application. We have so many calender scripts found in the internet if we search, But i prefer this is the most user friendly calender script we can use. This was downloaded from cool dhtml website.

I have used this and found to be very useful and very flexible. IN the provided example we are given with all the possible options like displaying only the date or displaying the date and time option, By clicking single click the calender script will be pop up and we can select the appropriate date.

All the events are clearly mentioned. We can directly paste the code in our application and can use the following code.In this script we are provided with the draggable option.

Preview

Monday, April 20, 2009

Reserved Key words and Triggering scripts with events

Javascript has some strict rules and referring to vairables. Your function name and variable name must begin with a letter and they can contain only letters, number and underscores. By conversion function and variables names must begin with lower letters, but they use uppercase for additional words. For example autotext() is completly different from autoText() in the javascript. Javascript is case sensitive.

Reserved Keywords:

abstract , boolean , byte , case , catch , char , class , const , debugger , default
delete , do , double , else , enum , export , extends , false , final , finally , float , for , function , goto , if , imports , in , int , interface , null , new , package
public , protected , return , this , throw , throws , typeof , true , try , void

Triggering scripts with events

autoText The scripts loads when a page is loaded. Like this we can call scripts when the user clicks the button or mouse overs on a image. Each of these clicks are called as events.
Some events are used by the document's BODY as a whole, and some are used by specific tags such as images , anchor tags , buttons.

Events that are assigned to the BODY Tag

1. onLoad when the document loads.
2. onUnload When a new document is loaded.
3. onFocus When the browser window recieves focus.
4. onBlur When the browser window loses focus.
5. onHelp when the user presses F1(IE only).
6. onKeypress when the user presses a key. Except the function keys.

Events that are used to tags includes

1.onFocus When the tag receives focus.
2.onBlur When the tag loses the focus.
3. onMouseOver When the user moves the mouse over the tag.
4. onMouseOut When the use moves the mouse away from the tag.
5. onChange When a form element value is changed.
6. onClick When a tag is clicked.
7. onSubmit When a form is submitted.

we can use these events to run our scripts based on different user actions

Sunday, April 19, 2009

Checkbox array Enable / Disable

There will be two types of checkboxes one is the general checkbox and the second is the checkbox array. There will be a scenario that we need to read the value from the checkbox or the checkbox array.

Writing a javascript for the general checkbox is more easy when compared to the checkbox array. We need to write the javascript for checkbox array For example : We have a music options available and we need to provide option to enable the disable the checkbox array.

The below code explains how to enable and disable the checkbox array.

<Html>
<head>
//Music skills
function musicskills(value)
{

if(value==1)
{

chkvaluer=document.form.elements['chkmusic[]'];
for (r=0;r<chkvaluer.length;r++)
{
chkvaluer[r].disabled = true;
}
document.form.txtmusic.disabled = true;
}else{

chkvaluer=document.form.elements['chkmusic[]'];
for (r=0;r<chkvaluer.length;r++)
{
chkvaluer[r].disabled = false;
}
document.form.txtmusic.disabled = false;
}
}

</head>
<body>
<form name="form" method="post" action="testfile.php">
<input type="radio" value="yes" onClick="musicskills(0);">Yes
<input type="radio" value="no" onClick="musicskills(1);">No
<input type="checkbox" name="chkmusic[]" value="Punjabi">Punjabi
<input type="checkbox" name="chkmusic[]" value="classical">Classical
<input type="checkbox" name="chkmusic[]" value="devotional">Devotional
<input type="checkbox" name="chkmusic[]" value="westren">Westren
</body>
</html>

Thursday, April 16, 2009

Checkbox read only

The below code will explain how can we make the checkbox enable and disable. Here we use the function deDemo() to enable / disable the checkbox and return the value of the checkbox is enabled.

<html>
<head>
<script type="text/javascript">
function doDemo(form) {
var cbObj = form.cbObj;

if (cbObj.checked)
alert("Value is " + cbObj.value);
else
alert("No value will be submitted.");

if (cbObj.disabled)
cbObj.disabled = false;
else
cbObj.disabled = true;
}
</script>
</head>
<body>
<center>
<b>Read-only Checkbox Demo</b>
<form>
<input type="checkbox" name="cbObj" value="Y" disabled>
<p>
<input type="button" value="Execute" onClick="doDemo(this.form)">
</form>
<hr>
</center>
</body>
</html>

Saturday, April 11, 2009

Checkbox array select / unselect

Generally in the checkbox, we have two different type of checkboxes one are plain checkboxes and the second one are checkbox array. The javascript for both differs a lot. The default checkbox script will be very simple to write and can be found any where in the net. The checkbox array scripts would be difficult.

The below example would define how to write a javascript for a checkbox array.

<html>
<head>
<script language="javascript">
function checkarray(form) {
var total = 0;
var max = document.form.elements['gender[]'].length;

for (var idx = 0; idx<max; idx++) {

if(document.form.elements['gender[]'][idx].checked==true)
{

if(document.form.elements['gender[]'][idx].value=="any")
{
for (var idx1 = 0; idx1<max; idx1++) {

document.form.elements['gender[]'][idx1].checked=true;
}
}

}else{
if(document.form.elements['gender[]'][idx].value=="any")
{
for (var idx1 = 0; idx1<max; idx1++) {

document.form.elements['gender[]'][idx1].checked=false;
}
}
}

}

}

function checkarray1(form) {
var total = 0;
var max = document.form.elements['gender[]'].length;

for (var idx = 0; idx<max; idx++) {
var cc=0;
if(document.form.elements['gender[]'][idx].checked==true)
{

if(document.form.elements['gender[]'][idx].value=="any")
{
cc=1;
}

}else{
if(document.form.elements['gender[]'][idx].value=="m")
{

document.form.elements['gender[]']['0'].checked=false;;

}
if(document.form.elements['gender[]'][idx].value=="f")
{

document.form.elements['gender[]']['0'].checked=false;;

}
}

}

}
</script>
</head>
<body>
<table class="right_linksr" width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td valign="middle" width="10%" align="left"><label>

<input size="5" name="gender[]" onclick="checkarray(this.form)" value="any" type="checkbox">
</label></td>
<td valign="middle" width="90%" align="left">Any Gender</td>
</tr>
<tr>
<td valign="middle" width="10%" align="left"><input name="gender[]" onclick="checkarray1(this.form)" value="f" type="checkbox"></td>
<td valign="middle" width="90%" align="left">Female</td>
</tr>

<tr>
<td valign="middle" width="10%" align="left"><input name="gender[]" onclick="checkarray1(this.form)" value="m" checked="checked/" type="checkbox"></td>
<td valign="middle" width="90%" align="left">Male</td>
</tr>
</tbody></table>

</body>
</html>

Here we have two javascripts function used. One function checkarray() selects all the checkboxes and the function checkarray1() unselects the any checkbox if any of the another checkbox is selected.

Checkbox array Mutiple select

Friday, April 3, 2009

Increase website font

This example mainly concentrates in the font of the web application. We use a default font in our websites and there may be situation we need to increase the font size of the text in the website. The example will help you to increase the font of your web application.

For using the example you need to download the javascript file and add place it in your folder. Call the javascript in the html or any page. Before using this javascript you need to to maintain the structure of the html. <body> tag must be started and as well as closed. You need to take care about this.