JavaScript Primers #18

By Joe Burns

Use these to jump around or read it all


The Concept
The Script
The Script's Effect
Deconstructing the Script
What You've Learned
Your Assignment


The Concept

This primer takes Primer #17 a little further. Here again you'll transfer information into the function, but this time you'll transfer a string that the user enters into a field. The string will then be used to search Yahoo.


The Script

<SCRIPT type="text/javascript">

function Gofindit(){
 var searchfor = document.formsearch.findthis.value;    
{                                
 var FullSearchUrl = 
"http://av.yahoo.com/bin/query?p=" + searchfor ;
location.href = FullSearchUrl;
}}

</SCRIPT>

<FORM NAME="formsearch" action="">
Search Yahoo for:
<INPUT NAME="findthis" SIZE="40" TYPE="texT">
<INPUT TYPE="button" VALUE="Go Find It"
onClick="Gofindit()">
</FORM>

The Script's Effect

Search Yahoo for:

Deconstructing the Script

This script again requires that you have a solid grasp on the concepts of hierarchy. It comes into play a few times.

  • First off, a function is created that calls for the variable "searchfor". This variable is the result of something in the document, in something called formsearch, inside an item called findthis, which has a value.
  • Now, we do another function inside a function. See the second set of {brackets}?
  • Another variable is created called "FullSearchUrl" that is the address to Yahoo's search engine plus the input of document.formsearch.findthis.value in the form of the variable "searchfor".
  • Finally, the location.href is set as the variable "FullSearchUrl". The process will take all the information and send the user to that page when the function is triggered.
  • Now, we move on to the FORM commands. There are two: One is a TEXT box that receives a string from the user and the other is a button that enacts the function.
  • Note the entire form is named "formsearch". Remember that from the hierarchy statement above?
  • Next, the TEXT box is named "findthis". Remember that in the hierarchy statement from above? See it building from larger to smaller?
  • The button then has the onClick command that fires up the function.
  • Finally, make sure you have a </FORM> command to kill the form. Mission accomplished.

What You Have Learned


Your Assignment

Alter the script so that it searches a search engine other than Yahoo. Also, make it so that when the user clicks, an alert pops up that reads "Going to Search..."

Here's a possible answer to this assignment
(this will open a new window)


The Concept
The Script
The Script's Effect
Deconstructing the Script
What You've Learned
Your Assignment



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date