In the context of a web page, a JavaScript object is any scriptable HTML element – that is any HTML element within a document that may be accessed through the JavaScript language. Scriptable HTML elements are associated with the Document Object Model, also known as the DOM.
Object:
In JavaScript, you interact with the browser throught the use of built in objects; these objects exist already, and can be accessed from your JavaScript code by name. The built-in objects are Date, Math, String, Array, and Object. Each is used in a unique and not-quite-consistent way. Objects have properties, which you can think of as characteristics of an object. Here are the four most commoly used objects:
1. The String Object:
The String object is used to manipulate a stored piece of text. The String object of JavaScript allows you to perform manipulations on a stored piece of text, such as extracting a substring, searching for the occurrence of a certain character within it etc. General method of using String Object is to declare a variable and assign a string, in other words a text to the variable.
String Object Properties:
length – The number of characters in the string. (# characters)
prototype – For creating more properties
String Object Methods for HTML Formatting:
|
Method Name |
Returned Value |
| anchor | <A NAME=”anchortext”>foo</A> |
| big | <BIG>foo</BIG> |
| blink | <BLINK>foo</BLINK> |
| bold | <B>foo</B> |
| fixed | <TT>foo</TT> |
| fontcolor | <FONT COLOR=”green”>foo</ |
| fontsize | <FONT SIZE=”-1″>foo</FONT> |
| italics | <I>foo</I> |
| link | <A HREF=”linktext”>foo</A> |
| small | <SMALL>foo</SMALL> |
| strike | <STRIKE>foo</STRIKE> |
| sub | <SUB>foo</SUB> |
| sup | <SUP>foo</SUP> |
| toLowerCase | uppercase |
| toUpperCase | UPPERCASE |
2. The Math Object :
The Math object allows you to perform mathematical tasks. The JavaScript math object can be invoked without creating an instance of it. But unlike the String and the Date object which requires defining the object, Math object need not be defined. So in conclusion The Math object of JavaScript allows you to perform certain calculations by using method functions of the Math object.
JavaScript Math Object Properties:
E – Euler’s constant
LN2 – Natural log of 2
LN10 – Natural log of 10
LOG2E – Base 2 logarithm of E.
LOG10E – Base 10 logarithm of E.
PI – Value of Pi
SQRT1_2 – Square root of 1/2.
SQRT2 – Square root of 2
Math Object Method:
|
Method |
Description |
| abs(a) | Supplies the absolute value of a number |
| acos(a) | Supplies the arccosine of a number |
| asin(a) | Supplies the arcsine of a number |
| atan(a) | Supplies the arctangent of a as a numeric value between -PI/2 and PI/2 radians |
| atan2(a,b) | Supplies the angle theta of a point as a numeric value between -PI and PI radians |
| ceil(a) | Supplies the value of a number rounded up to the nearest number |
| cos(a) | Supplies the cosine of a number |
| exp(a) | Supplies the exponential value of a number |
| floor(a) | Supplies the value of a number rounded down to the nearest number |
| log(a) | Supplies the logarithm of a number |
| max(a,b) | Supplies the number with the highest value |
| min(a,b) | Supplies the number with the lowest value |
| pow(a,b) | Supplies the value of one number (a) to the power of the second number (b) |
| random( ) | Supplies a random number between 0 and 9 |
| round(a) | Supplies a number rounded to the nearest number |
| sin(a) | Supplies the sine of a number |
| sqrt(a) | Supplies the square root of a number |
| tan(a) | Supplies the tangent of an angle |
| toSource(a) | Refers to the source code of an object |
| valueOf( ) | Supplies the primitive value of a math object |
3. The Date Object:
The Date object is used to work with dates and times. Generally in web page the Date object provides information about the current date and time on the client’s machine. The Date object is similar to the String object in that you create new instances of the object when you assign it to a variable. It differs from the String object in that you use a statement called new to create it.
JavaScript Date Object Properties:
constructor – Returns a reference to the Date function that created the object .
prototype – Allows you to add properties and methods to the object.
Instantiating a date object:
new Date()
new Date(milliseconds)
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds, milliseconds)
JavaScript Date Object Properties:
| Method | Description |
| Date() | Returns today’s date and time |
| getDate() | Returns the day of the month from a Date object (from 1-31) |
| getDay() | Returns the day of the week from a Date object (from 0-6) |
| getMonth() | Returns the month from a Date object (from 0-11) |
| getFullYear() | Returns the year, as a four-digit number, from a Date object |
| getYear() | Returns the year, as a two-digit or a four-digit number, from a Date object. Use getFullYear() instead !! |
| getHours() | Returns the hour of a Date object (from 0-23) |
| getMinutes() | Returns the minutes of a Date object (from 0-59) |
| getSeconds() | Returns the seconds of a Date object (from 0-59) |
| getMilliseconds() | Returns the milliseconds of a Date object (from 0-999) |
| getTime() | Returns the number of milliseconds since midnight Jan 1, 1970 |
| getTimezoneOffset() | Returns the difference in minutes between local time and Greenwich Mean Time (GMT) |
| getUTCDate() | Returns the day of the month from a Date object according to universal time (from 1-31) |
| getUTCDay() | Returns the day of the week from a Date object according to universal time (from 0-6) |
| getUTCMonth() | Returns the month from a Date object according to universal time (from 0-11) |
| getUTCFullYear() | Returns the four-digit year from a Date object according to universal time |
| getUTCHours() | Returns the hour of a Date object according to universal time (from 0-23) |
| getUTCMinutes() | Returns the minutes of a Date object according to universal time (from 0-59) |
| getUTCSeconds() | Returns the seconds of a Date object according to universal time (from 0-59) |
| getUTCMilliseconds() | Returns the milliseconds of a Date object according to universal time (from 0-999) |
| parse() | Takes a date string and returns the number of milliseconds since midnight of January 1, 1970 |
| setDate() | Sets the day of the month in a Date object (from 1-31) |
| setMonth() | Sets the month in a Date object (from 0-11) |
| setFullYear() | Sets the year in a Date object (four digits) |
| setYear() | Sets the year in the Date object (two or four digits). Use setFullYear() instead !! |
| setHours() | Sets the hour in a Date object (from 0-23) |
| setMinutes() | Set the minutes in a Date object (from 0-59) |
| setSeconds() | Sets the seconds in a Date object (from 0-59) |
| setMilliseconds() | Sets the milliseconds in a Date object (from 0-999) |
| setTime() | Calculates a date and time by adding or subtracting a specified number of milliseconds to/from midnight January 1, 1970 |
| setUTCDate() | Sets the day of the month in a Date object according to universal time (from 1-31) |
| setUTCMonth() | Sets the month in a Date object according to universal time (from 0-11) |
| setUTCFullYear() | Sets the year in a Date object according to universal time (four digits) |
| setUTCHours() | Sets the hour in a Date object according to universal time (from 0-23) |
| setUTCMinutes() | Set the minutes in a Date object according to universal time (from 0-59) |
| setUTCSeconds() | Set the seconds in a Date object according to universal time (from 0-59) |
| setUTCMilliseconds() | Sets the milliseconds in a Date object according to universal time (from 0-999) |
| toSource() | Represents the source code of an object |
| toString() | Converts a Date object to a string |
| toGMTString() | Converts a Date object, according to Greenwich time, to a string. Use toUTCString() instead !! |
| toUTCString() | Converts a Date object, according to universal time, to a string |
| toLocaleString() | Converts a Date object, according to local time, to a string |
| UTC() | Takes a date and returns the number of milliseconds since midnight of January 1, 1970 according to universal time |
| valueOf() | Returns the primitive value of a Date object |
JavaScript Object, Method, propeties for Ajax:
- history: Represents the list of URLs that the browser had already been to.
- window: Represents the browser itself.
- XMLHttpRequest: The object that you use in Ajax to communicate with the server.
In JavaScript, Objects have methods and properties. A method is a chunk of code built into the object that performs some action. For example: you use the document object’s write method, which you access as document.write, to write to the document (in the current web page).
- document.write: Lets you write text to the current web page
- history.go: Moves the browser to a page in the browser’s history
- window.open: Opens a new browser window
Properties, on the other hand, are just settings that you can place data into. JavaScript properties often take their names from the attributes of HTML elements, such as the bgcolor attribute of the <body> element.
- document.bgcolor: Holds the background color of the current page.
- document.fgcolor: Holds the foreground color of the current page.
- document.lastmodified: Holds the data the page was last modified.
- document.title: Holds the title of the page
- location.hostname: Holds the name of the page’s host.
- navigator.appName: Holds the type of the browser
See Also Following Topics:
]]>What is form validation?
Form validation is the process of checking that a form has been filled in correctly before it is processed. For example, if your form has a box for the user to type their email address, you might want your form handler to check that they’ve filled in their address before you deal with the rest of the form.
There are two main methods for validating forms: server-side (using CGI scripts, ASP, etc), and client-side (usually done using JavaScript). Server-side validation is more secure but often more tricky to code, whereas client-side (JavaScript) validation is easier to do and quicker too (the browser doesn’t have to connect to the server to validate the form, so the user finds out instantly if they’ve missed out that required field!).
Client-side form validation (usually with JavaScript embedded in the Web page)
Server-side form validation (usually performed by a CGI or ASP script)
In this how-to we’ll build a simple form with client-side JavaScript validation. You can then adapt this form to your own requirements.
Source:ELATED
JavaScript can be used to validate data in HTML forms before sending off the content to a server.
Form data that typically are checked by a JavaScript could be:
- has the user left required fields empty?
- has the user entered a valid e-mail address?
- has the user entered a valid date?
- has the user entered text in a numeric field?
Required Fields
The function below checks if a required field has been left empty. If the required field is blank, an alert box alerts a message and the function returns false. If a value is entered, the function returns true (means that data is OK):
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{
alert(alerttxt);return false;
}
else
{
return true;
}
}
}The entire script, with the HTML form could look something like this:
<html>
<head>
<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{
alert(alerttxt);return false;
}
else
{
return true;
}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_required(email,"Email must be filled out!")==false)
{email.focus();return false;}
}
}
</script>
</head>
<body>
<form action="submit.htm" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>E-mail Validation
The function below checks if the content has the general syntax of an email.
This means that the input data must contain at least an @ sign and a dot (.). Also, the @ must not be the first character of the email address, and the last dot must at least be one character after the @ sign:
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@");
dotpos=value.lastIndexOf(".");
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false;}
else {return true;}
}
}The entire script, with the HTML form could look something like this:
<html>
<head>
<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@");
dotpos=value.lastIndexOf(".");
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false;}
else {return true;}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
{email.focus();return false;}
}
}
</script>
</head>
<body>
<form action="submit.htm" onsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>>
Source : w3schools
Any interactive web site has form input – a place where the users input different kind of information. This data is passed to ASP script, or some other technology and if the data contains an error, there will be a delay before the information travels over the Internet to the server, is examined on the server, and then returns to the user along with an error message. If you run a validation of the user’s form input before the form is submitted, there will be no wait time and redundant load on the server. “Bad data” are already filtered out when input is passed to the server-based program. It also allows to simplify server-based program. Client side form validation usually done with javascript. For the majority of your users, JavaScript form validation will save a lot of time up front, but double-checking the data on the server remains necessary, in case the user has turned JavaScript off. Form data that typically are checked by a JavaScript could be:
- Required fields
- Valid user name
- Valid password
- Valid e-mail address
- Valid phone number
validateFormOnSubmit ( ) This is a main function that calls a series of subfunctions, each of which checks a single form element for compliance. If the element complies than sufunction returns an empty string. Otherwise it returns a message describing the error and highlight appropriate element with yellow.
function validateFormOnSubmit(theForm) {
var reason = "";
reason += validateUsername(theForm.username);
reason += validatePassword(theForm.pwd);
reason += validateEmail(theForm.email);
reason += validatePhone(theForm.phone);
reason += validateEmpty(theForm.from);
if (reason != "") {
alert("Some fields need correction:\n" + reason);
return false;
}
return true;
}validateEmpty ( )
The function below checks if a required field has been left empty. If the required field is blank, we return the error string to the main function. If it’s not blank, the function returns an empty string.
function validateEmpty(fld) {
var error = "";
if (fld.value.length == 0) {
fld.style.background = 'Yellow';
error = "The required field has not been filled in.\n"
} else {
fld.style.background = 'White';
}
return error;
}validateUsername ( )
The function below checks if the user entered anything at all in the username field. If it’s not blank, we check the length of the string and permit only usernames that are between 5 and 15 characters. Next, we use the JavaScript regular expression /\W/ to forbid illegal characters from appearing in usernames. We want to allow only letters, numbers and underscopes.
function validateUsername(fld) {
var error = "";
var illegalChars = /\W/; // allow letters, numbers, and underscores
if (fld.value == "") {
fld.style.background = 'Yellow';
error = "You didn't enter a username.\n";
} else if ((fld.value.length < 5) || (fld.value.length > 15)) {
fld.style.background = 'Yellow';
error = "The username is the wrong length.\n";
} else if (illegalChars.test(fld.value)) {
fld.style.background = 'Yellow';
error = "The username contains illegal characters.\n";
} else {
fld.style.background = 'White';
}
return error;
}validatePassword ( )
The function below checks the password field for blankness and allow only letters and numbers – no underscopes this time. So we should use a new regular expression to forbid underscopes. This one /[\W_]/ allow only letters and numbers. Next, we want to permit only passwords that contain letters and at least one numeral. For that we use the seacrh() method and two more regular expressions: /(a-z)+/ and /(0-9)/.
function validatePassword(fld) {
var error = "";
var illegalChars = /[\W_]/; // allow only letters and numbers
if (fld.value == "") {
fld.style.background = 'Yellow';
error = "You didn't enter a password.\n";
} else if ((fld.value.length < 7) || (fld.value.length > 15)) {
error = "The password is the wrong length. \n";
fld.style.background = 'Yellow';
} else if (illegalChars.test(fld.value)) {
error = "The password contains illegal characters.\n";
fld.style.background = 'Yellow';
} else if (!((fld.value.search(/(a-z)+/)) && (fld.value.search(/(0-9)+/)))) {
error = "The password must contain at least one numeral.\n";
fld.style.background = 'Yellow';
} else {
fld.style.background = 'White';
}
return error;
} validateEmail ( )
Next we want to see if the email address the user entered is real. This means that the input data must contain at least an @ sign and a dot (.). Also, the @ must not be the first character of the email address, and the last dot must at least be one character after the @ sign.
At first we check if the user entered anything at all in the email field. Next, we use regular expression and the test() method to check the field for a compliance. Also we will use trim() function that will trim leading whitespace off the string. This won’t be perfect validation — it is possible to slip not compliant addresses by it — but it’s normally good enough.
function trim(s)
{
return s.replace(/^\s+|\s+$/, '');
}
function validateEmail(fld) {
var error="";
var tfld = trim(fld.value); // value of field with whitespace trimmed off
var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ;
var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/ ;
if (fld.value == "") {
fld.style.background = 'Yellow';
error = "You didn't enter an email address.\n";
} else if (!emailFilter.test(tfld)) { //test email for illegal characters
fld.style.background = 'Yellow';
error = "Please enter a valid email address.\n";
} else if (fld.value.match(illegalChars)) {
fld.style.background = 'Yellow';
error = "The email address contains illegal characters.\n";
} else {
fld.style.background = 'White';
}
return error;
}validatePhone ( )
The function below checks if the phone number is valid. At first we use regular expression and the replace() method to clear out any spacer characters. Next, we use the isNaN() function to check if the phone number contain only numbers. At last we check the length of the string and permit only phone numbers with 10 digits.
function validatePhone(fld) {
var error = "";
var stripped = fld.value.replace(/[\(\)\.\-\ ]/g, '');
if (fld.value == "") {
error = "You didn't enter a phone number.\n";
fld.style.background = 'Yellow';
} else if (isNaN(parseInt(stripped))) {
error = "The phone number contains illegal characters.\n";
fld.style.background = 'Yellow';
} else if (!(stripped.length == 10)) {
error = "The phone number is the wrong length. Make sure you included an area code.\n";
fld.style.background = 'Yellow';
}
return error;
} check Dropdown()
Finally, we want to make sure that the user has selected an option from our drop-down menu (and not the first option, which isn’t an option at all, but just a “Choose one” header). For this, we use the select object’s selectedIndex property, which returns the index of the selected option. If the index is 0, we reject the input.
function checkDropdown(choice) {
var error = "";
if (choice == 0) {
error = "You didn't choose an option
from the drop-down list.\n";
}
return error;
} checkRadio()
To make sure that a radio button has been chosen from a selection, we run through the array of radio buttons and count the number that have been checked. Rather than sending the whole radio object to a subfunction, which can be problematic (because the radio object has no property indicating which value has been chosen), we pre-process the radio form element in a for loop and send that result to a subfunction for evaluation.
for (i=0, n=theForm.radios.length; i<n; i++) {
if (theForm.radios[i].checked) {
var checkvalue = theForm.radios[i].value;
break;
}
}
why += checkRadio(checkvalue);
function checkRadio(checkvalue) {
var error = "";
if (!(checkvalue)) {
error = "Please check a radio button.\n";
}
return error;
}isDifferent()
We want to do a few more kinds of validation. If you present a license or something similar in a text box for the user to accept, you want to make sure that it hasn’t been altered when the form is submitted. That’s done very simply by comparing the submitted string with the string you were expecting.
function isDifferent(strng) {
var error = "";
if (strng != "Can\'t touch this!") {
error = "You altered the inviolate text area.\n";
}Alternately, you can use the onChange() method to catch the user in the act of modifying the text and stop them before they submit the form.
HTML Form
This script accompanies an HTML form. When the user clicks the Submit button on the form, the form data is sent to a JavaScript validation function that checks each field to make sure that it is in the appropriate format. The HTML form could look something like this:
<html>
<head>
<title>WebCheatSheet - JavaScript Tutorial</title>
</head>
<body>
<h1>WebCheatSheet - JavaScript Tutorial</h1>
<form name="demo" onsubmit="return validateFormOnSubmit(this)" action="test.htm">
<table summary="Demonstration form">
<tbody>
<tr>
<td><label for="username">Your user name:</label></td>
<td><input name="username" size="35" maxlength="50" type="text"></td>
</tr>
<tr>
<td><label for="pwd">Your password</label></td>
<td><input name="pwd" size="35" maxlength="25" type="password"></td>
</tr>
<tr>
<td><label for="email">Your email:</label></td>
<td><input name="email" size="35" maxlength="30" type="text"></td>
</tr>
<tr>
<td><label for="phone">Your telephone number:</label></td>
<td><input name="phone" size="35" maxlength="25" type="text"></td>
</tr>
<tr>
<td>
<label for="from">Where are you :</label></td>
<td><input name="from" size="35" maxlength="50" type="text"></td>
</tr>
<tr>
<td> </td>
<td><input name="Submit" value="Send" type="submit" ></td>
<td> </td>
</tr>
</tbody>
</table>
</form>
</body>
</html>Javascript form validation – doing it right
When using Javascript for form validation, there is a right way, a wrong way, a very wrong way, and a suicidally wrong way! Unfortunately many sites use one of the wrong ways, including even some which claim to be form-validation tutorials. This page tries to help people in the right direction.
- The suicidally wrong way is to have the validation in Javascript only, and not on the server. A malicious user can easily bypass it and – depending on what you are doing – may wreak havoc with your database. Apparently there have been cases of online shops shipping computers for $1 because they had no server-side validation!
- The very wrong (but all too common) way is to simply assume the user has Javascript. Readers who have disabled it (and there are several good reasons for doing so) or who do not have it available, spend their time filling in the form and then find nothing happens when they click the submit button.
- The wrong way is to give the non-Javascript user, or the user of a browser other than IE or Netscape, a terse message telling him he can’t use your site.
- The right way (got there eventually!) is to use Javascript as an optional extra to improve user-friendliness. All form submissions are validated on the server. If the reader has Javascript available, an initial validation is done on the client, to check for simple errors such as missing information or non-numeric characters in a numeric field. This means the reader gets faster feedback than waiting for a response from the server.
The essence is thus that Javascript validation is always optional. Since the validation must be on the server anyway, it is silly to insist that the user must have Javascript. Adding Javascript validation should help some readers and hinder nobody.
How it works
I’m not going to describe all the workings in detail, as they are commented in reasonable detail in the code. If you aren’t familiar with the basics of Javascript and forms, there are plenty of sites on the Web which can help. Instead I will point out the key features of this approach.
- It uses a standard submit button and onsubmit handler; therefore the submission still works if the user has no Javascript available.
- Validation is done by onchange handlers, so the user gets immediate feedback on each field. (Not onblur, which can lead to premature validation if e.g. a pop-up fires off, or the user wants to copy data from elsewhere.) The calls to the validation routines are repeated in the onsubmit handler, in case the user skipped over some fields.
- It makes minimal use of alert boxes: errors are written into the HTML. The user is not driven up the wall by alert boxes for every error, and the error message remains visible until he/she has finished the correction of the field.A single alert pops up if the user clicks ‘Send’ while there are still errors. This is necessary to give positive feedback.
- The script checks for older browsers and less well-endowed browsers (e.g. Netscape 4, WebTV). This is not to exclude them; on the contrary, it is to ensure that users of these browsers can also use the form – they just have to wait for the validation to be performed by the server.
- The detection of these older browsers is done by feature detection, not browser sniffing – this is much more reliable (and simpler as well!). For example, the script checks whether methods such as document.getElementById are defined, rather than checking whether the browser claims to be Mozilla.
- The formatting of error and alert messages is done by setting the CSS class of the element concerned. This is both simpler and more maintainable than using FONT tags or setting CSS properties directly.
One thing I have not done is put up a positive OK indication by fields when they pass validation. My feeling is that this could be misleading, as one only really knows the field is OK after the server validation is complete. But in some circumstances it might be a good idea.
One other thing I have not done, which is rarely if ever a good idea, is to force the user to complete fields in a particular order, or to prevent him/her from leaving a field until it is correct. I do use the focus function to assist the user, but he/she is free to move to a different field if desired.
Auto-completion problem
There is one small problem that a couple of correspondents have pointed out to me. There is a bug in Internet Explorer (all versions, as far as I know) whereby the onChange event does not fire if the user makes use of auto-completion. There doesn’t seem to be a good way around this. (I have found a couple of sites referring to the non-standard onPropertyChange event, but this fires on every keystroke, so is not of any use.)
The only option seems to be, if in a particular case this is likely to be seriously confusing to the user, to switch auto-completion off with the non-standard autocomplete attribute on the form. Or perhaps one could use IE Conditional Comments to at least give IE users a warning message.
How much validation?
Exactly how detailed client-side validation should be is a debatable point. There is little point in trying to make it really rigorous, since some aspects can typically only be validated on the server anyway. And since the aim is quick response to the user, it rather defeats the object to load the form down with many kilobytes of Javascript. On the other hand, if one is for example validating an e-mail address, I think one can do rather better than simply checking that an ‘@’ is present somewhere in the string, as I have seen a couple of times.
On only one point do I have strong feelings: input should never be rejected due to the presence of leading or trailing white-space. It may be difficult for the user to see that the white-space is present, and failing to strip it off before validation is pure laziness on the part of the programmer. (This includes line-breaks, which may inadvertently be included if the user copies text from elsewhere; using ‘\s’ within a regular expression will look after this.)
There is of course much more to be said about validation in general. Witness the site designers who insist that credit-card start-date is a compulsory field, although some credit cards (including mine) do not have a start date. But this page concentrates specifically on the client-side aspects, so I’ll leave the rest for another time.
Source: View here
See Also Following Topics:
]]>This script demonstrates various techniques for fading the background of your selected HTML components such as buttons, text boxes, page backgrounds, and others to different color.
Installing Fader effect in your page
1. Copy the coding into the HEAD of your HTML document
2. Add the id property into the BODY tag
3. Put the last coding into the BODY of your HTML document
Paste this code into the HEAD of your HTML document
<HEAD><script type="text/javascript"><!-- Begin /* This script and many more are available free online at The JavaScript Source!! http://javascript.internet.com Created by: Tony Tschopp :: http://www.goodturnwebdesign.com *//* comp = name (ID="comp") of the HTML page component to fade cbeg = start value for color in #rrggbb format cend = end value for color in #rrggbb format iter = number of steps in the fade from start color to end color time = number of milliseconds to display each step rbeg = start value for red component of rbg color gbeg = start value for green component of rbg color bbeg = start value for blue component of rbg color rend = end value for red component of rbg color gend = end value for green component of rbg color bend = end value for blue component of rbg color */var hstr = '#'; var hdig = "0123456789abcdef"; function mOvr(comp, cbeg, cend, iter, time) { var rbeg = hdig.indexOf(cbeg.substr(1,1))*16 + hdig.indexOf(cbeg.substr(2,1)); var gbeg = hdig.indexOf(cbeg.substr(3,1))*16 + hdig.indexOf(cbeg.substr(4,1)); var bbeg = hdig.indexOf(cbeg.substr(5,1))*16 + hdig.indexOf(cbeg.substr(6,1)); var rend = hdig.indexOf(cend.substr(1,1))*16 + hdig.indexOf(cend.substr(2,1)); var gend = hdig.indexOf(cend.substr(3,1))*16 + hdig.indexOf(cend.substr(4,1)); var bend = hdig.indexOf(cend.substr(5,1))*16 + hdig.indexOf(cend.substr(6,1)); for ( i = 1, r = rbeg, g = gbeg, b = bbeg; i <= iter; r = Math.round(rbeg + i * ((rend - rbeg) / (iter-1))), g = Math.round(gbeg + i * ((gend - gbeg) / (iter-1))), b = Math.round(bbeg + i * ((bend - bbeg) / (iter-1))), i++ ) { hstr = '#' + hdig.charAt(Math.floor(r/16)) + hdig.charAt(r%16) + hdig.charAt(Math.floor(g/16)) + hdig.charAt(g%16) + hdig.charAt(Math.floor(b/16)) + hdig.charAt(b%16); setTimeout('var el = document.getElementById("' + comp + '"); el.style.backgroundColor = "' + hstr + '";', i * time); } }function mOut(comp, cbeg, cend, iter, time) { var rbeg = hdig.indexOf(cbeg.substr(1,1))*16 + hdig.indexOf(cbeg.substr(2,1)); var gbeg = hdig.indexOf(cbeg.substr(3,1))*16 + hdig.indexOf(cbeg.substr(4,1)); var bbeg = hdig.indexOf(cbeg.substr(5,1))*16 + hdig.indexOf(cbeg.substr(6,1)); var rend = hdig.indexOf(cend.substr(1,1))*16 + hdig.indexOf(cend.substr(2,1)); var gend = hdig.indexOf(cend.substr(3,1))*16 + hdig.indexOf(cend.substr(4,1)); var bend = hdig.indexOf(cend.substr(5,1))*16 + hdig.indexOf(cend.substr(6,1)); for ( i = 1, r = rend, g = gend, b = bend; i <= iter; r = Math.round(rend - i * ((rend - rbeg) / (iter-1))), g = Math.round(gend - i * ((gend - gbeg) / (iter-1))), b = Math.round(bend - i * ((bend - bbeg) / (iter-1))), i++ ) { hstr = '#' + hdig.charAt(Math.floor(r/16)) + hdig.charAt(r%16) + hdig.charAt(Math.floor(g/16)) + hdig.charAt(g%16) + hdig.charAt(Math.floor(b/16)) + hdig.charAt(b%16); setTimeout('var el = document.getElementById("' + comp + '"); el.style.backgroundColor = "' + hstr + '";', i * time); } } // End --></script></HEAD>Daily Welcome Cookie
This script sets a cookie, with an alert window that only comes up the first time you visit the page each day. Good for calling attention to daily specials and news updates. Can be configured to work in other ways also.
Paste this code into the HEAD section of your HTML document
<script type="text/javascript" src="dailyCookie.js"></script>Paste this code into an external JavaScript file named: dailyCookie.js
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Ted Man | */
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() {
var todaysdate = new Date()
var day = todaysdate.getDay()
switch (day) {
case 1:
day = "Monday"
break
case 2:
day = "Tuesday"
break
case 3:
day = "Wednesday"
break
case 4:
day = "Thursday"
break
case 5:
day = "Friday"
break
case 6:
day = "Saturday"
break
case 0:
day = "Sunday"
break
}
var thedate = getCookie('thedate')
if (thedate != null && thedate != "") {
if (day == thedate) {
} else {
alert('Be sure to check our daily specials!')
}
} else {
thedate = day
if (thedate!=null && thedate!="") {
setCookie('thedate', thedate, 365)
alert('Be sure to check our daily specials!')
}
}
}
// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
checkCookie();
});Copy from Forms to Clipboard
There are many scripts for copying text from a Web page that work fine in MS Internet Explorer but not in Firefox, Netscape, or Opera. This cross-browser script, however, will do the trick. It will copy a designated portion of text into the Windows clipboard, using a small Macromedia Flash file to perform the copy on the browser’s behalf.
Paste this code into an external JavaScript file named: clipboardCopy.js
/* This script and many more are available free online atThe JavaScript Source!! http://javascript.internet.comCreated by: Mark O'Sullivan :: http://lussumo.com/ Jeff Larson :: http://www.jeffothy.com/ Mark Percival :: http://webchicanery.com/function copy(text2copy) { if (window.clipboardData) { window.clipboardData.setData("Text",text2copy); } else { var flashcopier = 'flashcopier'; if(!document.getElementById(flashcopier)) { var divholder = document.createElement('div'); divholder.id = flashcopier; document.body.appendChild(divholder); } document.getElementById(flashcopier).innerHTML = ''; var divinfo = '<embed src="_clipboard.swf" FlashVars="clipboard='+escape(text2copy)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>'; document.getElementById(flashcopier).innerHTML = divinfo; }}Paste this code into the HEAD section of your HTML document.
<script type="text/javascript" src="clipboardCopy.js"></script>Paste this code into the BODY section of your HTML document
<form name="form1" action="">
<textarea name="results" cols="40" rows="6">All of the text here will be copied. Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum.</textarea>
<br>
<input type="button" value="Copy This" onclick="copy(document.form1.results.value);">
</form>