Creating an Element: A To Do List

 

This shows how to use the 'createElement' command to create a new element for a To Do List. This writes the To Do List to the current window. With a little editing, you could have the list written to an external text file.

The HTML and JavaScript:

<script type="text/javascript">
function addItem() {
 var myitem = document.getElementById("ItemToAdd").value;
 var mylistItems = document.getElementById("mylist");
 var newP = document.createElement("li");
 var textNode = document.createTextNode(myitem);
 newP.appendChild(textNode);
 document.getElementById("mylist").appendChild(newP);
 return false;
}
</script>
<br />
<form action="#" onsubmit="return addItem()">
<span style="color: #741b47; font-family: tahoma,lucida grande;
"><b>New Item for 'To Do' List: </b></span>
<input id="ItemToAdd" type="text" value="Go to bank" />
<input onclick="addItem()" type="button" value="Add" />
<br />
</form>
<br />
<span style="color: #741b47; font-family: tahoma,lucida grande;
">To Do Today:</span> 
<br />
<ol id="mylist"></ol>
<

Try it out. Enter some text and click the button to add new items to the to-do list:

New Item for 'To Do' List:

To Do Today:

Want HTML Code? Go to: http://write-html-code.blogspot.com/

Please leave me a comment on this site.

Opening a URL from a Select Form

This gets the value associated with the selected text (a URL) and opens the web document. Some details follow below.

First the HTML code for this:

<script type="text/javascript">
function openURL() {
 var selectionIndex = document.forms.urlChoose.elements["theURL"];
 var myURL = selectionIndex.options[selectionIndex.selectedIndex].value;
  document.location.href=myURL;
  return true;
}
</script>

<form action="" name="urlChoose">
<select gtbfieldid="23" name="theURL">
   <option selected="selected">Choose a Website</option>
   <option value='http://www.scriptsforapple.com/'>AppleScript Site</option>
<option value='http://read-and-write-german-language.blogspot.com/'>German Site</option>
<option value='http://editing-web-color-html.blogspot.com/2009/12/box-style-properties.html'>Color HTML Site</option>
</select>

<input name="submitURL" onclick="openURL()" type="button" value="Go to site" />
</form>

When a choice is selected and the button is clicked, 'onclick' sends a call for the 'openURL' function in the JavaScript (script) section.

The variable var selectionIndex is assigned a value of document.forms.urlChoose.elements["theURL"] . This gives it the value of the element named 'theURL' which is a URL of derived from the form named 'urlChoose' of the current document.

Next, the variable 'myURL' gets the value (a URL) of the index number 'selectionIndex' of 'selectionIndex' and opens the appropriate website.

Here what is shown on the page:

Choose a Website AppleScript Site German Site Color HTML Site

Bookmark 'Learning How to Write JavaScript Code' on Delicious

Please leave me a comment on this site.

For a look at using color with HTML go to: http://editing-web-color-html.blogspot.com/

Getting Value of Element from a Select Form

This gets the value of the selected text and displays it in an alert box. This can be a little confusing (only a little), so some details follow below.

First the HTML code for this:
 

<script type="text/javascript">
function displayLanguage() {
 var selectFromForm = document.forms.languageChoice.
elements["language"];
 var myValue = selectFromForm.options[selectFromForm.
selectedIndex].value;
  alert('Your native language is \"'+ myValue +"\"");
  return true;
}
</script>

<form action="" name="languageChoice">
<select getFieldId="23" name="language">
   <option selected="selected">Select language<
/option>
   <option>English</option>
   <option>French</option>
   <option>Spanish</option>
   <option>German</option>
   <option>Italian</option>
</select>
<input name="executeButton" onclick="displayLanguage()"
 type="button" value="Language" />
</form>

Bookmark 'Learning How to Write JavaScript Code' on Delicious

Keep in mind that to understand this, first focus on the form block of the HTML which gathers the data that will be used by the JavaScript block.

With that said, when a choice (English,French ..whatever) is selected and the button is clicked, 'onclick' sends a call for the 'displayLanguage' function to the corresponding script.

The variable var selectFromForm is assigned a value of document.forms.languageChoice.elements["language"] . This gives it the value of the element named 'language' of the form named 'languageChoice' of the current web document.

Next, the variable 'myValue' gets the value (text) of the index number 'selectedIndex' of 'selectFromForm' and then, finally displays it in an alert box.

Look below and this should be fairly clear.

Note: You may have noticed above, that the logic of the variable assigned reads from right to left.

What is shown on the page:

Select language English French Spanish German Italian

 

Please leave me a comment on this site.

For a look at using color with HTML go to: http://editing-web-color-html.blogspot.com/

The For Loop and For...In Loop

Sometimes you need to execute code repeatedly for a given number of times. The For Loop and For...In Loop structures accomplish this. These are similar to AppleScript's Repeat and Repeat In structures.

<html>
<body>
<script language=javascript>

var degreesFahrenheit = new Array (212, 32, -459.15);
var degreesCelsius = new Array ();
var repeatCount;

for (repeatCount = 0; repeatCount <= 2; repeatCount++)
{
degreeCelsius [repeatCount] = 5/9 * (degreeFahrenheit [repeatCount] - 32)
}

for (repeatCount = 2; repeatCount >= 0; repeatCount--)
{
document.write ("Value " + repeatCount + " was " + degreeFahrenheit [repeatCount] + " degrees Fahrenheit");
document.write (" which is " + degreeCelsius [repeatCount] + " degrees Celsius<br>");
}

</script>

</body>
</html>


This statement sets the parameters for the loop. The parameters are separated by a semicolon:

for (repeatCount = 0; repeatCount <= 2; repeatCount++)


The first two parameters, repeatCount = 0; repeatCount <= 2;
, set the loop count to start at 0 and end at 2.


The last parameter, repeatCount++
, increments the loop by 1 each time it loops through. As you might have surmised, repeatCount--
would increment the loop by 1 each time from from a higher initial value such as 3.

The For...In loop is used mainly with arrays. It makes it possible to loop through arrays without needing to know ahead of time how many elements are contained in the array.

Example:

var textItemArray = new Array("Books", "Magazines","Newspapers");
var theTextItem
for (theTextItem in textItemArray)
{
alert(textItemArray [theTextItem])
}


This loops through the elements in textItemArray
and displays an alert containing each.

Want HTML Code? Go to: http://write-html-code.blogspot.com/

Using the Switch Statement

The Switch Statement is a sort of Conditional, it tests for instances of something, usually a variable value.

 

Here the function displayAlert assigns a value to the variable OSName by way of a prompt box:
 

Edit code, then select and copy:

<html> <body> <script language=javascript></code> <code>function displayAlert() { var OSName = prompt("Enter the name of an operating system:",""); switch (OSName) { case "Macintosh": alert ("The best operating system is Macintosh!" ); break; case "Windows": alert ("Windows is almost as good as Macintosh!" ); break; case "MS DOS": alert ("Windows evolved from MS DOS!" ); break; case "Unix": alert ("Unix enhances Mac OS and makes it more compatible with Windows." ); break; case "Linux": alert ("Linux is a relatively new OS!" ); break; default: alert ("Don't know that operating system!"); break; } alert ("Execution continues here."); } </script>  

Command-A/command-C to copy (Mac) | alt-A/alt-C (Windows)

Here the function displayAlert is called by clicking on an image in the main body of the page:
 
<a href="http://www.yourDomain.com/" onclick="displayAlert()"><img src="http://www.yourDomain.com/yourImage.jpg"/></a> </body> </html>

Or you could create a button, 'Switch Activate' in this case, to do the job:

<button type="button" name="Switch Activate" onclick="displayAlert()"></button>
 

Want HTML Code? Go to: http://write-html-code.blogspot.com/
 

Dealing with Error Messages with Try...Catch

Sometimes you want to give the user some feedback based on information that they have entered. If they have entered something that does not fit with the information requested, you want to be able to tell them so that they will understand what course of action to take.

The syntax of the 'Try...Catch' pair of JavaScript will look fairly familiar to you if you are familiar with 'try...on error' used in AppleScript. It has the same purpose.

So, let's examine this script and see how it works:

<script type="text/javascript">
function ageMessage()
{
var ageInteger=prompt("Please enter your age:","16");
try
{
if(ageInteger<0)
{
throw "errorCase1";
}
else if(ageInteger<16)
{
throw "errorCase2";
}
else if(ageInteger>16)
{
throw "errorCase3";
}
else if(isNaN(ageInteger))
{
throw "errorCase4";
}
}
catch(error)
{
if(error=="errorCase1")
{
alert("This is someone who has not even been born yet!");
}
if(error=="errorCase2")
{
alert("You must be at least 16 years old to apply for a driver's license in this state! Sorry.");
}
if(error=="errorCase3")
{
alert("Please come in and register with us to apply or revalidate your driver's license.");
}
if(error=="errorCase4")
{
alert("Invalid entry! You must enter an age here!");
}
}
}
</script>
<input type="button" value="Reply Prompt" onclick="ageMessage()" />

License bureau's records division to determine if the user is of legal age to apply or revalidate a current driver's license. The default is 16 (the legal age in most US states to acquire a license)

var ageInteger=prompt("Please enter your age:","16"); The prompt that sets the variable 'ageInteger' that will be evaluated.

The 'try' segment evaluates the variable var 'ageInteger'

If the variable value meets a particular value, then it is assigned a 'throw' or case value that is sent on to the 'catch' (error) subroutine, which will respond with some feedback.

Try this out to see how this can be put to use in one of your pages:

Want HTML Code? Go to: http://write-html-code.blogspot.com/

JavaScript to Open URL in New Window

Sometimes you want to confirm an action before it is carried out. This script displays a confirmation box and, if confirmed, opens the specified URL:


<script type="text/javascript">
function userConfirm()
{
var response=confirm("Do you want to go to the Home page?");
if (response==true)
{
window.open("http://www.yourURL.com/")
}
else
{
alert("User Cancelled!");
}
}
</script>

<a href="http://www.yourURL.com/" onclick="userConfirm()"><img src="http://www.yourURL.com/wp-content/uploads/2009/06/yourImg.jpg" alt="Image Name" title="Image Name" width="115" height="80" class="alignright size-full wp-image-520" /></a>


Click on the graphic below to see how this works:

Want HTML Code? Go to: http://write-html-code.blogspot.com/