Let's start with some examples based on the requirements provided.
1. Open Notepad or another text editor, then save a new file on your desktop called index.html You may have to put index.html. in double quotes, like so: "index.html", otherwise text editors may save the file as index.html.txt. If the file is saved properly, you will see a web browser icon on your desktop with caption "index". If you double-click on the icon, a browser will open the file and show an empty page. From here, each time you modify the file, press reload or refresh to see your changes.
Start your document with HTML 5 style doctype:
My Page
Now, to create textboxes use:
To create text areas:
To create buttons:
2. You can include captions for textboxes and other HTML input fields by using HTML:
Please enter 10 characters:
3. Now, for the validation, you will use JavaScript. You have to fire the validation event in the correct spot, and then you have to use the right field to check. Here is an example:
If you do not want to use onSubmit() event in the form tag, you can use a simple button:
If you are using onClick() in the button, you do not have to return true or false. The form is not actually being submitted.
Note, that the name of the form is "fd". You can check for value in each field by using: document.forms.field5.value. The function validate() returns false if there is a problem on the form.
4. Counting vowels is easy. It actually doesn't matter they are vowels, it is just a list of any characters. You need to create a function, just like validate(), or just add the code to validate() function.
The key is provided: singleCharacter = stringName.charAt(i);
One way to do this is this:
function check()
{
var str =document.forms.fd.field1.value;
var singleCharacter = "";
var a = 0; var e=0; var i=0; var o=0, var u=0;
//Counting all the vowels except y. By the way, this is a JavaScript comment.
for (pos = 0; pos < str.length; pos++)
{
singleCharacter = str.charAt(pos);
if (singleCharacter == "a" ) a++;
if (singleCharacter == "e" ) e++;
if (singleCharacter == "i" ) i++;
if (singleCharacter == "o" ) o++;
if (singleCharacter == "u" ) u++;
}
Here is an example of vowels counting function, which uses match() function:
var vow = function(str) {
var matches = str.match(/[aeiou]/gi);
var count = matches ? matches.length : 0;
alert(count + " vowel(s)");
return false;
}
To include JavaScript as an external file just put the JavaScript into a text file, name it file.js. Next, in index.html include tag:
5. Requirement 5 needs this type of code:
document.forms.fd.field3.value = a;
or
document.forms.fd.field3.value = "Number of a letters: " + a;
6. Now to locate the highest variable and change the background of the box.
First create an array:
var all = new Array();
all[0] = a;
all[1] = e;
all[2] = i;
all[3] = o;
all[4] = u;
Next walk through the array and save the biggest value in a temp variable. I won't show this part of the code. Once you know which element of the array has the highest value, this is how to change the background of the field:
document.forms.fd.field1.style.backgroundColor='yellow';
This manipulates the CSS of the HTML field.
7. Package the files.
The HTML5 comments are used like this:
My file
This is a CSS comment:
/*This is a comment*/
You should use the comments to explain the code you will use.