Tuesday, March 28, 2006
Google It
Blog Entry #34
In the last two entries, we've discussed scripts highlighted by functions with parameters that enabled these functions to accept and act on literals sent to them by their function calls. However, we've also seen that a function can act on external information in the document without that information being 'fed' to the function. For example, the answer to the Primer #17 Assignment featured a script with a function that recognized a global variable preceding the function. In addition, the image flip functions of the Primer #16 Script and Assignment could from the document head recognize the names of image elements (e.g., "mypic" as appearing in up( )'s document.mypic.src="up.gif" statement) in the document body. We continue today in this vein as we examine HTML Goodies' JavaScript Primers #18, "Form Fields and the Value Property"; as we'll see below, the Primer #18 Script contains a function that acts on the literal value of the value property of a text object without that value being passed to the function. More generally, the values of all of the properties of form control objects (and of all other document body objects, as far as I know) are 'available' to a function.
After we work through Primer #18, you might want to revisit Blog Entry #29's hybrid prompt/confirm box script and Blog Entry #30's quadratic equation script, both of which contain functions that also act on unpassed text object values.
As noted at the end of the previous post, we'll be using the Primer #18 Script to search a search engine, namely, Yahoo!. "Yahoo!? What about Google??" Chill out - Primer #18, which unfortunately lacks a "Posted on XX/XX/199X" date, was clearly written before Google hit the big time. But even as a tool for searching Yahoo!, the Primer #18 Script is 'outdated' in a much more important sense: it doesn't work. So here's what we'll do: we'll first look over the script, as is our custom, and then make some minor modifications that will allow the script to successfully search both Yahoo! and Google with a single mouse click.
N.B. Joe's script demo works OK - try it yourself - but check the Primer #18 source code, which contains a corrected script differing from the original script below.
The Primer #18 Script
<script type="text/javascript">
function Gofindit( ) {
var searchfor = document.formsearch.findthis.value; // function command #1
{
var FullSearchUrl = "http://av.yahoo.com/bin/query?p=" + searchfor; // function command #2
location.href = FullSearchUrl; // function command #3
} }
</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>
In the document body, the script codes a form, named "formsearch", comprising two controls: (1) a text box, named "findthis", in which the user types a search term of some sort, and (2) a "Go Find It" button that, when clicked, triggers the Gofindit( ) function, which conducts a search using the Yahoo! search engine. The Gofindit( ) function 'grabs' the entered search term, which is the value of the findthis text object in the formsearch form object in the current document, and assigns it to the searchfor variable in function command #1.
In function command #2, the searchfor search term is concatenated with a partial URL, "http://av.yahoo.com/bin/query?p=", of a Yahoo! search; note from our discussion of the location object in Blog Entry #19 that the "search" part (a.k.a. the query string) of a URL begins with a question mark. Where did the partial URL come from? "All I did was go to a search engine, do a search and copy the address from the Location bar. Ta Da!" Joe helpfully explains in the Primer #18 Assignment answer - as you might guess, it's this partial URL that's defective, and we'll get it sorted out below. In any case, the partial URL plus the searchfor search term composes a full URL, which is assigned to the FullSearchUrl variable.
Finally, function command #3 assigns the value of FullSearchUrl to the href property of the location object, thus setting up a link to the FullSearchUrl URL - i.e., a link to a Web page of Yahoo! search results for the searchfor search term - in the current window as we have done previously.
One more point before moving on: you've probably noticed that function commands #2 and #3 in the Gofindit( ) function are surrounded by a second set of braces ("another function inside a function," Joe tells us in the "Deconstructing the Script" section of the primer); are they necessary? Not at all - leave them out.
A new, improved script for searching both Yahoo! and Google
<script type="text/javascript">
function Gofindit(searchfor) {
var google_url = "http://www.google.com/search?q=" + searchfor;
// from the Primer #18 source:
var yahoo_url = "http://search.yahoo.com/search?p=" + searchfor;
window.open(google_url, "", "width=700,height=200,scrollbars");
window.open(yahoo_url, "", "width=700,height=200,top=325,scrollbars"); }
</script>
<form name="fx">
<b>Search Google and Yahoo! for:</b>
<input name="tx" size="40">
<input type="button" value="Go Find It" onclick="Gofindit(document.fx.tx.value);">
</form>
Try it out:
Giving credit where credit is due, my script above borrows in some respects from the multiple search engine script discussed in HTML Goodies' JavaScript Script Tips #42-44. Although designed to search Google and Yahoo!, the script is clearly extensible to searching as many search engines as you wish.
A couple of points:
• Unlike the original Primer #18 Script, my script directly passes document.fx.tx.value to a parameterized Gofindit(searchfor) function. It's not necessary to do this, but I like doing it this way.
• Searching more than one search engine at once requires the respective Web pages of search results to be opened in separate windows via window.open( ) commands, which can be customized as desired.
The Primer #18 Assignment
We conclude this entry with a quick comment on the Primer #18 Assignment, for which Joe asks the reader to retool the Primer #18 Script so that it searches a different search engine. In his answer script, Joe chose to search WebCrawler, which is now a "metasearch" engine (a search engine that searches other search engines); I find that this script does still work once we put the "http://webcrawler.com/cgi-bin/WebQuery?searchText=" partial URL all on one command line.
HTML Goodies' JavaScript Primers #19 features yet another script with a function that acts on text box inputs, and breaks little new ground, but I'll still have a few things to say about it in the next post.
reptile7
- posted by A. Peak @ 3:10 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)