Dr. Mark Humphrys

School of Computing. Dublin City University.

Home      Blog      Teaching      Research      Contact

Online coding site: Ancient Brain

coders   JavaScript worlds

Search:

CA170      CA668      CA686

Online AI coding exercises

Project ideas


JavaScript



Reference



Where to put the JS

Client-side JS. Code is sent with the page. Where should the JS code go on the page?
  1. Embedded within HTML:
     
    <script language="javascript" type="text/javascript"> 
    (code) 
    </script> 
    

    In fact this will probably work (and default to JS) on just about every browser:

     
    <script> 
    (code) 
    </script> 
    


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

    Q. Why might you use .JS files?


  3. One-liners inside certain HTML attributes. See Event attributes.
    
     <div onmouseover="fn();" > div content </div>     
    
     <button onclick="fn();" > button text </button>      
    
    

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




When should the JS be run?




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)

Treats the page as an object that can be manipulated even after initial download.

How to write to page




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

How to access console/debug in different browsers


View object

  

View page "source" after JS




Is JS safe?

Remote site sending you code to execute is a strange idea.
  1. It does not ask permission to execute. It just runs. Why?
  2. Can it:
    • Access your files?
    • Fill your disk?
    • Crash your computer?
  

Infinite loop

What happens if a remote site sends you an infinite loop? Can JS crash the tab / browser / OS?

Try this:


        <script>
            while ( true ) { }
        </script>

Or this:


        <script>
            var i = 1;
            while ( i > 0 ) { }
        </script>

  

Loops in Javascript

  

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.