by Mat Mullen (pyro)

Greetings Exo Magicians. Mat here and I am very excited to be writing to you for the second time at ExoMagic. I would like to present to you a new way of approaching magic that I have been conjuring up over the last few months. Some of you may know me as pyro222 from PhatusMagic and if so, you will already know that my approach to the art is often off the beaten path. In this article, I will be expanding upon some existing concepts of what I like to call “tech magic” and hopefully together, we might just wear in a new path for some savvy magic and perhaps even pickup some skills you can use elsewhere along the way.

If you are an Exo regular, you will have undoubtedly come across the infamous “Google disappearing OOs” trick. I absolutely love magic of this kind, not just because of its visual aspects, but because when we combine technology with illusion, our gimmicks take on a whole new “virtual” element where ideas can become more dynamic, and most importantly, the materials are free and unlimited. Now I will be honest, this is not for the faint of heart, and if you are not familiar with some of the current web technologies, this may appear somewhat intimidating for some however I will attempt to keep it as simple yet informative as possible so hang in there and lets give it a shot. In the following steps, we are going to be using a technique, perhaps already familiar to some, called JavaScript injection. Now the google trick I spoke of earlier is a great intro to this style of illusion, however it has its limitations in that it does one thing and one thing only. You are also bound to the fact that the server hosting the “fake google” page must be available to you at the time of performance. However with javascript injection, we rely only upon the magician (ourselves) and our understanding of the technology. The more you understand and research, the broader the possibilities will be for you. Ok, enough said, lets get to the good stuff.

First things first lets discuss some basic html and then we will move into how we can manipulate the html using JavaScript. Just about every document you will view on the web will always rest upon the html that is presented to your browser. Sure there are server side scripting languages such as php, asp, and so forth, but in the end it will render the html and that is what you see now before your very eyes. There are probably literally hundreds of different ways to manipulate this html with JavaScript injection however I will just be covering some of the basics and we will leave the advanced stuff for the forum discussions. Also note that everything we do from here on out is case sensitive and also keep in mind that some browsers (say your buddie’s) might have a script blocker add-on installed and will need to either be disabled or set to allow scripts temporarily. That being said, lets do some javascript injection.

First open a new tab in your browser. If you have never done any programming before, it is mandatory that every “noob” start with the customary “hello world” program. (Sorry I don’t make the rules). Highlight the text in your browser’s address bar and replace it with the following text and press enter…

javascript:alert("hello world")

Congrats! You have just injected you first piece of JavaScript code. If you did this correctly, a small alert window should popup containing the text “hello world”. Lets try something a little more fun now. Make sure you have closed the alert window and point your browser to http://www.exomagic.com/blog and once the page is loaded, select the text in the addressbar, replace it with the following and press enter paying special focus to the welcome message in the upper right of the blog…

javascript:void(document.getElementById('welcome').innerHTML="<h1>Ace of Spades</h1>")

Now were getting somewhere. If all went well, The text in the welcome box should now display “Ace of Spades” in big letters. To briefly explain, we basically injected some code that identifies the tag containing a particular ID, in this case we were after a div tag with the ID “welcome” and we changed its html contents to “ace of Spades”. Pretty cool eh, but still, not of much use to a magician. We’ve gotta be more magical. Lets throw in a delay and see what happens. Again point the browser to Exomagic.com/blog and change the address text to the following hit enter, and count out 4 seconds in your head…

javascript:void(setTimeout("document.getElementById('welcome').innerHTML='<h1>Ace of Spades</h1>'",4000))

If you did everything correctly, there should have been a 4 second delay this time before the welcome box changed. Note that all we did differently here was encapsulate our code inside the setTimeout() function. The “4000″ at the end is the amount of time in milliseconds we wish to delay the code from being executed. Now obviously 4 seconds is not much time to cover your tracks, so this is where your misdirection and timing skills come in. Say you set the delay to one minute (60000ms) and executed the code just about 5 seconds past the minute on the computer’s clock. You could then have enough time to replace the code with the blog url (exomagic.com/blog) and then just wait for the computer clock to tick over the next minute. Place your hand over the box and you know you now have about 5 more seconds before it changes. Pretty clever eh? You can also change images, vanish images, alter buttons, move things, fade in and out, or just about anything else you can come up with. The possibilities are really infinite and the more you understand, the more you will be able to conjure up on the fly, and most importantly, use your timing skills, do the math, and setup early. Now I know a lot of you are pretty savvy these days and could probably school me in the ways of JavaScript so be sure and post your ideas and code snippets to the forums, and If any of you have been confused by this or don’t quite fully understand, that’s ok because thats what the forums are here for and I, and I’m sure many of the other Exo members will be more than happy to answer your questions. That’s it for now. I hope you all have enjoyed this article and check back often as there is plenty more to come.
Peace out!
-Mat