Learn Javascript Fast by “Hacking” Your Favorite Websites

The best way to learn a new programming language is to learn by doing. Learn some useful JavaScript functions in less than 30 minutes by trying out these scripts on your favorite website(s). This walkthrough is good for beginners. No fancy setup, just you, the browser, and the terrifying yet beautiful programming language that is JavaScript.

STEP 0: Open the dev tools console.

If you are using..
Chrome:
View → Developer → Developer Tools and then click the Console tab

Firefox:
Tools > Web Developer > Toggle Tools and the Console tab should already be open

You will be copying and pasting the code below into the browser’s console and then hitting the enter key. I encourage you to play around and modify the code as you go through these 5 hacks. All these hacks are using vanilla JavaScript (aka no jQuery).

1. Learn to use JavaScript’s alert() function

Sometimes used in debugging, alert() will pop up a small dialogue box in the browser. Go ahead and modify the code below to include your own message. (Don’t worry, you are the only one who will see this dialog box, you aren’t actually hacking the website!)

alert('HACKING IN PROGRESS!!! ^%$ I HAAZ HAXX (&&* 1337 ');

 

2. Use Math.random() to give everything different orientations

By selecting the div, p, span, img, a, and body tag(s) and using Math.random() you can give everything on the page random orientations, producing a very entertaining effect!

Array.prototype.slice.call(
  document.querySelectorAll(
    'div,p,span,img,a,body')).map(function(tag){
	tag.style['transform'] = 'rotate(' + (
    Math.floor(Math.random() * 3) - 1) + 'deg)';
});

Something is not quite right here…

3. Use .style to implement hacker colors

Learn how to change CSS with Javascript using .style. Feel free to modify this script to the font color, family and background-color of your choosing.

var allDivs = document.querySelectorAll('div');

for(var i = 0; i < allDivs.length; i++){
  allDivs[i].style['background-color'] = 'black';
  allDivs[i].style['color'] = 'green';
  allDivs[i].style['font-family'] = 'Monospace';
}

Example below of “hacking” twitter

4. Change all  tags to have cat pictures

This script selects all of the images on the page and adds a new src tag. Modify this script by adding a link to your favorite photo (you can use the Cat API for all your cat picture needs).

Array.prototype.slice.call(
  document.querySelectorAll('img')).map(function(tag){
    tag.src = 'http://bit.ly/2okYTfn';
});

 

5. Set a booby trap with setTimeout

Use JavaScript’s setTimeout function so that the script inside of this function will not run until the user hovers over the web page for 5 seconds. You can wrap any of the hacks we’ve done here in this set of functions to create the same effect. This particular script will turn the web page upside down.

setTimeout(function(){
 document.onmousemove = document.onkeypress = 
 function(){
     document.body.style['transition'] = 'transform 3s';
     document.body.style['transform'] = 'rotate(180deg)';
 }
}, 5000);

 

I hope you have fun with these JavaScript hacks! Hacks #2, #4, and #5 are from Codebox so definitely take a look at their other pranks. If you are ready to take your hacking skillz to the next level, you should apply to Thinkful’s Engineering Flex program below.