Dr. Mark Humphrys

School of Computing. Dublin City University.

Home      Blog      Teaching      Research      Contact

Search:

CA216      CA249      CA318

CA400      CA651      CA668


JavaScript (More)




Demo: "Powerpoint-ify" a page.

See button above.
Display/hide parts of a page (div's) one by one.
This is done using my file powerpoint.js.
View HTML source and JS source for usage.

Note it does key handling (arrow keys) using document.onkeydown and Key codes.


Exercise - Get "Powerpoint-ify" working on your site

  1. You need a long page on your site. I suggest: Copy the module home page to your site.
  2. Examine the HTML of this page and copy in the section you need.
  3. Set up div's on the page and number them.
  4. Test it works.
  

Exercise - Write a more flexible "Powerpoint-ify"

  1. Don't have to number the div's. Just mark them:
    <div class=pp>
  2. Don't need MAX.
  3. JS finds all div's of that class using:
      
    var a = document.getElementsByClassName("pp");		// array   	   
    for ( var i = 0; i < a.length; i++ )
      // if i is current page then show a[i] 
      // else hide a[i]
    
  


Some 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";
    }
    
    

    Exercise: Re-write the above with includes()
    Test it on your own site, with one page linking to another.

    
    
    
  2. Hide mailto: link from spambots. See example.
     
    s1 = "<a href=mail";
    s1 = s1 + "to:user";
    s1 = s1 + "id@dc";
    
    s2 = "u.ie>email me</a>";
     
    document.write ( s1 + s2 );
    

    Q. What does spambot need to extract this address?

    
      
    
  3. How to stop another site enclosing me in a frame.
     
    if (top != self)
     top.location.href = self.location.href;
    

    • Framekiller
    • It used to be that many big sites (like Google Images) would frame you. But not any more.
  



Linkis is for sharing pages on social media. It frames the pages that are shared.
A search for Linkis links to tcd.ie reveals the page above.
View source and you see it uses iframe to frame this tcd.ie page.
It adds extra bits to the page, even on top of the original page. It also hides the original page's URL.




Move CPU load onto client

Javascript can do all sorts of calculation on client side without burdening the server.
Good (for both client and server) to move CPU load onto client. Why?



Separate Javascript from HTML

If we label elements of a page, we can avoid mixing Javascript and HTML in Event attributes.
HTML labels the elements but does not assign Javascript functions:

 <input  id="thebutton" name="thebutton"   type="button"   value="Click to run function"   />

Javascript then assigns the functions at startup:

 
    document.getElementById('thebutton').onclick = fn;




Transforms of Javascript

If interpreted code is run millions of times, maybe it should be "compiled" to be as efficient as possible.



Compile other languages to JavaScript

You can trust that your user has a JavaScript interpreter.
You cannot trust that they have other client-side technologies.

There are schemes where you can write in other languages and compile to JavaScript.


WebAssembly




Javascript server-side and command-line





Feeds      w2mind.org

On Internet since 1987.