Friday, March 29, 2024

JavaScript Primers #18

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


Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured