Dr. Mark Humphrys

School of Computing. Dublin City University.

Home      Blog      Teaching      Research      Contact

My big idea: Ancient Brain

Search:

CA114      CA170

CA668      CA669      Projects


JavaScript



Reference



Where to put the JavaScript code

Client-side JavaScript.
  1. Embedded within the HTML code:
     
    <script language="javascript" type="text/javascript"> 
    (code) 
    </script> 
    

    If you leave out language="javascript" type="text/javascript" probably every browser defaults to JavaScript:

     
    <script> 
    (code) 
    </script> 
    


  2. In separate JS file containing just Javascript code:
     
    <script language="javascript" type="text/javascript" src="file.js" > 
    </script> 
    

    Q. Why might you use .JS files?


  3. Put it in <head> or <body> ?
    Whether embedded in HTML or in JS file: Can be included in <head> or <body>
    If put at end of <body> page may load faster.
    If script uses document.write to insert content, it must appear at a certain location.


  4. One-liners inside certain HTML attributes. See Event attributes.
     <div  onmouseover="fn();" > When mouse over here function is called  </div>
    
     <input  type="button"    value="Click to run function"  onclick="fn();" />
    

    This mixes up Javascript with HTML, which is a bit messy. See more on this later.




Include remote library

You can include a remote library at run-time:

   <script  src="http://remotesite.com/library/file.js" > </script> 

Q. Why might you prefer to use a local copy?



Document Object Model (DOM)




Javascript demos

I remove the header and footer to make it easier to View Source.

With these examples, the JS is inside the HTML file.
The exception is the syntax highlighting, which uses an external file.


Demo HTML JS
Javascript page change demo HTML  
Javascript page change demo (Minimal) HTML  
Javascript menu demo HTML  
Javascript environment variables demo HTML  
Javascript syntax highlighting HTML JS
Javascript demo - doing calculations on client side HTML  
Javascript percent encoder/decoder HTML  



Debugging

Debugging Javascript can be difficult.
Where do you write output debug info to?
Syntax errors may generate error messages somewhere, but they are not on screen.

Q. Does the client want to see Javascript errors?



Writing output

  

ancientbrain.com      w2mind.org      humphrysfamilytree.com

On the Internet since 1987.

Wikipedia: Sometimes I link to Wikipedia. I have written something In defence of Wikipedia. It is often a useful starting point but you cannot trust it. Linking to it is like linking to a Google search. A starting point, not a destination. I automatically highlight in red all links to Wikipedia and Google search and other possibly-unreliable user-generated content.