JavaScript

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

• javascriptkit.com
  • reference

• 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> 
  

Document Object Model (DOM)

• DOM model / Parsing HTML

• Treats the page as an object that can be manipulated even after initial download.
• Can label parts of the page and then address them and change them later:

    <p id="mainparagraph"> default text </p>
  

• id= is recommended.
• name= is backward-compatible for some elements.
  
• Could use both to be sure:

    <img   src="Icons/play.png"  id="x2"  name="x2"  >  
  

Debugging

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

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

• Online Javascript checker

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

1. 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";
   }
   
   

2. How to stop another site enclosing me in a frame.
   See examples.

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

3. Hide mailto: link from spambots. See example.
   View Source

    
   
   s1 = "<a href=mail";
   s1 = s1 + "to:user";
   s1 = s1 + "id@comp";
   
   s2 = "uting.dcu.ie>email me</a>";
    
   document.write ( s1 + s2 );
   
   

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

• help.dottoro.com
  • XMLHttpRequest
  • XMLDocument

• ajaxpatterns.org
  • XMLHttpRequest

• javascriptkit.com
  • XMLHttpRequest

• Parsing XML

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

• Same origin policy - Javascript in HTML document must make HTTP request to same server as the HTML document.

• Workaround to same-origin policy
  • There are ways around the same-origin policy which use the JSON format.

Browser-independent code

• XMLHttpRequest
  • backward compatibility code

• Use other people's function libraries
  • jQuery - Javascript functions to take care of the complexity of browser-independent Ajax queries for you.
  • Prototype

Javascript Ajax demos