JavaScript is the functionality behind Dynamic HTML, and while I am not the JavaScript Guide, I often get questions about how to do things “using HTML” that can only be done using JavaScript. While I am not an expert on JavaScript, if you're interested in learning DHTML, you can start with these simple scripts to make your pages more dynamic.
Playing with Dates
Dates are very easy to manipulate with JavaScript. You can display the current date or count down to a specific date.
An easy date script — dates are easy with JavaScript because, like most programming languages, there is a date function you can use to display your date. It's not very prettily formatted but it does work.
<script language="javascript">
<!--
document.write(Date());
-->
</script>
See how this script looks: Display the Date - the Easy Way.
A slightly harder (but prettier) date script — this script is a bit more complex, but it displays the date in a much nicer format and leaves out the time, which isn't as interesting. This script will display the date in the form: January 2, 2010.
<script language="javascript">
<!--
Today = new Date();
TodayDay = Today.getDate();
TodayMon = Today.getMonth();
TodayYear = Today.getYear();
if (TodayMon == 0) { TodayMonth = "January"; }
else if (TodayMon == 1) { TodayMonth = "February"; }
else if (TodayMon == 2) { TodayMonth = "March"; }
else if (TodayMon == 3) { TodayMonth = "April"; }
else if (TodayMon == 4) { TodayMonth = "May"; }
else if (TodayMon == 5) { TodayMonth = "June"; }
else if (TodayMon == 6) { TodayMonth = "July"; }
else if (TodayMon == 7) { TodayMonth = "August"; }
else if (TodayMon == 8) { TodayMonth = "September"; }
else if (TodayMon == 9) { TodayMonth = "October"; }
else if (TodayMon == 10) { TodayMonth = "November"; }
else if (TodayMon == 11) { TodayMonth = "December"; }
else { TodayMonth = TodayMon; }
document.write(TodayMonth + " " + TodayDay + ", " + TodayYear);
-->
</script>
See how this script looks: Display the Date - the Hard Way.
Countdown to a day — countdown timers can be a fun way to remind people of a planned event or to mark an announcement.
<p>
There are
<script language="javascript">
<!--
Today = new Date();
TodayYear = Today.getYear();
if (TodayYear < 2000) TodayYear += 1900;
// put your date here
DateToFind = new Date("December 16, " + TodayYear);
difference = DateToFind.getTime() - Today.getTime();
difference = Math.floor(difference / (1000 * 60 * 60 * 24)) + 1;
note = ""; // add a note if the day is today
if (difference < 0) {
difference = 365 - difference;
TodayYear = TodayYear + 1; note = " +/-1";
}
document.write(difference + " days to December 16th, " + TodayYear + note);
//-->
</script>
</p>
See how this script looks: Display a Countdown Timer.
Adjusting Forms
Validating forms is a popular use of JavaScript. But you can also use DHTML to adjust the form fields as your readers are entering the data. You can make sure that a URL or email address is all lowercase or set a character limit for a text box.
Force text to lowercase — you might want to make sure that all submissions you get from a form are in all lowercase. You can ask your readers to do that, but they might still use uppercase letters. This script will convert the text field to lowercase automatically.
<p>
Type something (with capital letters):
</p>
<form name="tolowercase">
<input type="text" name="tolowercase" size="30"
onChange="javascript:this.value=this.value.toLowerCase();">
<input type="button" value="change">
</form>
See how this script looks: Convert to Lowercase. You can also convert to all uppercase by changing the command to toUpperCase();.
Block long submissions — Sometimes you have a character limit that you need people to respect. You can use DHTML to display an error when the text is too long.
<script language="javascript">
<!--
function checkchars(cur) {
var error = "";
var maxlength = 10; // change to the length you need
if (cur.tenchars.value.length > maxlength) {
error = "ERROR!\n\nYour submission is too long.\nIt must be less than " + maxlength + " characters.";
}
if (error) {
alert(error);
return false;
} else {
alert("CONGRATULATIONS!\n\nThat was less than " + maxlength + " characters.");
return false;
}
}
//-->
</script>
<p>
Try to submit more than 10 characters:<br>
</p>
<form onsubmit="return checkchars(this);">
<textarea name="tenchars" cols="15" rows="2"></textarea>
<input type="submit" value="Try">
</form>
See how this script looks: Block Long Submissions.
Tell them the character count — but it's not good to just put a limit, you want to tell them how many characters they have typed. You can do this dynamically so that the numnber updates as they type.
<script language="javascript">
<!--
function CountChars(field,cntfield) {
if (field.value.length >= 0)
cntfield.value = field.value.length;
}
// -->
</script>
<p>
<form name="myForm" action="#">
<textarea name="textarea" cols="25" rows="2"
onkeydown="CountChars(document.myForm.textarea,document.myForm.charlength)"
onkeyup="CountChars(document.myForm.textarea,document.myForm.charlength)">
</textarea><br/>
<input readonly="readonly" type="text" name="charlength" size="3" maxlength="3" value="0"> characters
</form>
</p>
See how this script looks: Display the Count.
These scripts are fairly simple. If you are looking to do more complex things with JavaScript, you should check the JavaScript site at About.com.
This article was written for Jason.
