Dr. Mark Humphrys

School of Computing. Dublin City University.

Home      Blog      Teaching      Research      Contact

Online coding site: Ancient Brain

coders   JavaScript worlds

Search:

CA170      CA318      CA686      CA686I

Online AI coding exercises

Project ideas


JavaScript (More)

See explanation.


Some things you can do with Javascript

  1. Hide mailto: link from spambots. See example.

     
    var m1 = "mark.humph";
    var m2 = "rys@dcu.ie";
    
    document.write ( "<a href=mail" + "to:" + m1 + m2 + ">" + m1 + m2 + "</a>"  );
    

    Q. What does spambot need to extract this address?

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

    See indexOf.

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



Frame killer

  



Linkis is a site for sharing pages on social media.
It frames the pages that are shared.




How to edit another site's page

If you use a page regularly, and its functionality frustrates you, then use the console to edit their page!
  


How to change link colours (on another site)

Say you are struggling to see which links you have visited (and which you have not) on someone else's site.
You can use JS to insert CSS / change CSS of the page!
Obviously you are not changing it for other people. You are only changing your view in your browser.
In our example, to change color of visited links, open console, and type something like:

var css = "<style> a:visited { color:red; } </style>";
document.head.insertAdjacentHTML ( "beforeend", css );

See insertAdjacentHTML.

  


How to make every link open in new tab (on another site)

Say a site has a page you use regularly, with lots of links. And you want to explore links but keep the page in the browser.
So you find you do a lot of right-click - Open in New tab.
It might be worthwhile to edit the page so every link opens in new tab. No more right-clicking.
Ideally, need this in the page head:

<head>
<base target="_blank">
</head>

See base.
However, the page has already loaded.
So we use JS to "fix" the page.
Go to console.
Copy and paste this:


var b = document.createElement('base');
b.target = "_blank";
document.getElementsByTagName('head')[0].appendChild(b);

Now every link click opens a new tab.




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

Most JS can be moved to separate files.
But some JS may remain mixed with the HTML.


Consider how to assign a JS function to a HTML element like a button.

  1. First method: Assign it in the HTML definition.
     <button onclick='fn();' >Go</button>    
    

  2. Second method: Assign it separately.
    We have pure HTML in the page:

     <button  id='thebutton' >Go</button>    
    

    and we assign the event separately in JS when the page has loaded:

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

    We can entirely avoid mixing JS and HTML. This is called "Unobtrusive JavaScript".

Exercise: Implement both of these.





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




The future of compile-to-JS:
Demo of Unreal Engine written in C, compiled to asm.js and running in Firefox web browser.



This JavaScript world uses WASM.
Click to run World: animation key frames at Ancient Brain.


  

Javascript to call remote server program

Because we can include remote JS from a 3rd party site:
 <script src="https://remoteserver/file.js"></script> 
We can actually call a remote server-side program, provided the server cooperates:
 <script src="https://remoteserver/prog.php"></script> 
The server code, even though it may not be a Javascript program, should return output as content type Javascript:
 Content-Type: text/javascript 
and return as the output valid Javascript commands, such as
 document.write ( output ); 
Using these kind of tricks, JavaScript can grab data from around the Web and use it in pages.
More on this in JSONP.
  

Example of remote content

I use remote JS to keep a count of the number of Worlds on Ancient Brain.
There are currently worlds on Ancient Brain.
  


Javascript server-side and command-line

A big growth area is Javascript actually running on the server-side.


ancientbrain.com      w2mind.org      humphrysfamilytree.com

On the Internet since 1987.      New 200 G VPS server.

Note: Links on this site to user-generated content like Wikipedia are highlighted in red as possibly unreliable. My view is that such links are highly useful but flawed.