JavaScript Primers #18

By Joe Burns

WEBINAR: On-demand webcast

How to Boost Database Development Productivity on Linux, Docker, and Kubernetes with Microsoft SQL Server 2017 REGISTER >

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