JavaScript

• JavaScript (and here)
  • reference
  • reference
  • sample scripts

• Embedded within the HTML code:

   
  <script language="javascript" type="text/javascript"> 
  (code) 
  </script> 
  

• Can put the code in separate file containing just Javascript code:

   
  <script language="javascript" type="text/javascript" src="file.js" > 
  </script> 
  

• DOM model / Parsing HTML

• IE Debugging
  • Tools - Options - Advanced - Browsing - Disable debugging / Display script errors

• Firefox Debugging - Firebug
  • debug Javascript variables
  • connect page elements to source code

Javascript demos

<a href="url"
 onmouseover="document.thebutton.src='on.png'" 
  onmouseout="document.thebutton.src='off.png'"
><img name="thebutton" src="off.png"></a>

<input name=thefield  onBlur=recalculate()  > 

<p id="thetotal">0.00</p>

function recalculate() 
{
 var x = document.theform.thefield.value;
...
 thetotal.innerHTML = total;
}

Other things you can do with Javascript

• How to block (or redirect) a link to me from a certain site:

   
   
  var referrer = document.referrer;   
  var badstring = "BADSITE.COM";
    
  if ( referrer.indexOf(badstring) != -1 )
  {
   window.location = "http://mysite.com/badsite.redirect.html";
  }
  
  

• How to stop another site enclosing me in a frame:

   
  
  if (top != self)
   top.location.href = self.location.href;
   
  

Ajax

• Ajax - Variety of methods of building fully user-interactive web applications. Often based on Javascript.

• User interaction on client side causes background communication with server.
• Small parts of the page can change after initial loading, rather than entire page being re-loaded.

• Examples:
  • Gmail
  • Google Maps

• ajaxpatterns.org
  • XMLHttpRequest

• Parsing XML

• JavaScript and Ajax for the Web by Tom Negrino and Dori Smith (7th edn, 2009)
  • scripts

Javascript Ajax demos

 <img   src="button.png" 
 id="thebutton"  name="thebutton"  > 

document.getElementById("thebutton").onclick = runScript;

// runScript constructs URL, then:
		xhr = new XMLHttpRequest();
		xhr.onreadystatechange = showContents;
		xhr.open("GET", url, true);
		xhr.send(null);

// when xhr returns:
// showContents checks return code
// and writes xhr.responseText into defined box

// xhr = XMLHttpRequest();
// when xhr returns:

parseit ( xhr.responseXML );

// or:

xml = (new DOMParser()).parseFromString( xhr.responseText, "text/xml" );
parseit ( xml );	


function parseit ( xml )
{
 items = xml.getElementsByTagName("item");	
 for ( var i=0; i < items.length; i++ )		
 {
  subitem = items[i].getElementsByTagName("subitem");

  s = subitem[0].text;			 
  // or:
  s = subitem[0].textContent;		 
 }	
}