You now have flickrgeo.php, a server-side proxy for talking to
Flickr. Before you turn your attention to directly connecting Google Maps with Flickr,
I’ll remind you about two basic interactions between the DOM and JavaScript:
Reading and writing DOM elements, <div> elements, and form elements
Handling simple events to connect form input and displaying calculations
In this section, I will remind you how to do some basic things in browser-based JavaScript. Specifically, I’ll review how to manipulate certain DOM elements. This section will seem trivial to experienced JavaScript developers, but the example provides a starting point for the rest of the chapter.
To that end of learning some basic JavaScript techniques, create the following HTML file:[136]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Dom Play</title>
</head>
<body>
<div id="container"></div>
</body>
</html>
Fire up the JavaScript Shell and the Firebug extension to follow what happens when you type the following commands:
document
[object HTMLDocument]
div = document.getElementById('container')
[object HTMLDivElement]
div.innerHTML = 'hello';
hello
Notice that the word hello shows up on the web page now. You’ve just used JavaScript to write to the DOM, specifically hello to the innerHTML of the <div> element with the ID of container.
The next step is to write an example with an input box and a submit button. When you hit submit, the calc_square() JavaScript function calculates the square of the number and updates the result box (the answer span). Start with the following, though we’ll leave the calc_square() function empty for now:[137]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Squaring the input(square1.html)</title>
<meta ?http-?equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<script type="text/javascript">
//<![CDATA[
function calc_square() {
}
//]]>
</script>
<form action="#" onsubmit="calc_square(); return false;">
<label>Input a number:</label>
<input type="text" size="5" name="num" value="0" />
<input type="submit" value="Square it!" />
</form>
<p>The square of the input is: <span id="answer">0</span></p>
</body>
</html>
In the JavaScript Shell, try the following pieces of code:
document
[object HTMLDocument]
document.forms[0].innerHTML
<label>Input a number:</label><input size="5" name="num" value="0" type="text">
<input value="Square it!" type="submit">
document.forms[0].elements[0].value
0
Change the value in the text box, and try it again to see the new value reflected (note num is the ID of the <input> element):
document.forms[0].num.value
8
The following gets you the <answer> element:
span.document.getElementById('answer')
[object HTMLSpanElement]
Finally, this will fill in 16 to the <answer> element:
span.document.getElementById('answer').innerHTML = 16
16
Next, you’ll want to figure out how to programmatically submit the form (you’ll use this logic later). Instead of having to hit the submit button, you will create a method that responds to the button submission event. Remember, in the previous example, it is the job of the calc_square() method (which was left empty) to read the input, calculate the square of the input, and write the answer to the answer box. Let’s fill in calc_square with something like this:[138]
<script type="text/javascript">
//<![CDATA[
function calc_square() {
var n = document.forms[0].num.value;
document.getElementById('answer').innerHTML = n*n;
}
//]]>
</script>
<form action="#" onsubmit="calc_square(); return false;">
<label>Input a number:</label>
<input type="text" size="5" name="num" value="0" />
<input type="submit" value="Square it!" />
</form>
<p>The square of the input is: <span id="answer">0</span></p>
<script type="text/javascript">
//<![CDATA[
document.forms[0].num.onchange = calc_square; //register an event
//]]>
</script>