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.
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).
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 ');
Math.random()
to give everything different orientationsBy 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…
.style
to implement hacker colorsLearn 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
<img>
tags to have cat picturesThis 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';
});
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! Thank you for reading!
#javascript #website #hacking #programming