Welcome to XML Class at RISD

Presenting A Lightning Strike XML Document

Here is the PHP version (note I found a good on-line reference to learn about the item(0) feature):

<html>
<head>
<title>Latest Lightning Strike</title>
<style>
body {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:16px}
</style>
</head>
<body>
<?php 
$dom = new DomDocument();
$dom->load("lstrike.xml");
echo "<h2 style='color:#ff4444'>The latest lightning strike details:</h2>";
$date = $dom->getElementsByTagName("date")->item(0)->textContent;
echo "Latest strike occured on ".$date."";
$time = $dom->getElementsByTagName("time")->item(0)->textContent;
echo "at ".$time."<br/><br/>"; 
$northing = $dom->getElementsByTagName("northing")->item(0)->textContent;
echo "Northing of strike: ".$northing."<br/>"; 
$easting = $dom->getElementsByTagName("easting")->item(0)->textContent;
echo "Easting of strike: ".$easting."<br/>"; 
$tile = $dom->getElementsByTagName("UTM_tile")->item(0)->textContent;
echo "UTM Tile: ".$tile."<br/><br/>"; 
$picture = $dom->getElementsByTagName("picture")->item(0);
echo '<img src="'.$picture->getAttribute('filename').'">';
?>
</body>
</html>

Here is the visual result:

Here is the Javascript version (with the same exact visual result!):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 <head>
  <title>Read XML in Firefox/Opera Browsers</title>
  <style>
  body {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:16px}
  </style>
  <script type="text/javascript">
    var xmlDoc;
    function loadxml() {
      xmlDoc=document.implementation.createDocument("","",null);
      xmlDoc.load("lstrike.xml");
      xmlDoc.onload= readXML;
    }
 
    function readXML() {
		document.write("<h2 style='color:#ff4444'>The latest lightning strike details:</h2>");
		document.write("The strike occurred on " + xmlDoc.getElementsByTagName("date")[0].textContent);
		document.write(" at " + xmlDoc.getElementsByTagName("time")[0].textContent + "<br/><br/>");
		document.write("Northing: " + xmlDoc.getElementsByTagName("northing")[0].textContent+ "<br/>");
		document.write("Easting: " + xmlDoc.getElementsByTagName("easting")[0].textContent+ "<br/>");
		document.write("Tile: " + xmlDoc.getElementsByTagName("UTM_tile")[0].textContent+ "<br/><br/>");
		document.write("<img src='" + xmlDoc.getElementsByTagName("picture")[0].attributes.getNamedItem("filename").nodeValue) + "' />";
    }
  </script>
</head>
<body onload="javascript:loadxml();">
</body>
</html>