to class -- to about -- to syllabus -- to people -- to the library

introduction to midterm assignment


Over the next two weeks, you will learn the basics of JQuery selectors, javascript functions and json objects. This will give you the rudimentary tools to select and manipulate elements on a webpage, as well as to store and transform data in the form of objects.

For this midterm, we ask you to be a parasite. A parasite is a creature that “eats alongside”, who hijacks the functions of a host organism and reappropriates them for a different purpose.

Choose a website and analyse its affordance, functions and context. In what ways does its aesthetic, functional and socio-cultural embodiment give meaning to its content or experience?

Using a combination of JQuery, JS functions and JSON objects, subvert the purpose of this website to create a different narrative and experience.

This could be:


Things you can do through console:

easy ones: alert


Live edit page content


DOM properties

Remember the DOM?

Here are all the DOM properties you can play with.

setting style = "red"

e.g. change style.background property for the whole body‘url(“”)’

setting innerHTML

element.innerHTML = "put something new inside those tags!"

setting outerHTML

element.outerHTML = "<h1>new text AND new tags!</h1>"

removing with remove()

var element = document.getElementById('thiselement'); 

simulating a click event



DOM selectors

getElementById selector

document.getElementById('*id-here*').style.border="solid 1px red"

Only works for #id objects

getElementsByClassName selector

document.getElementsByClassName('*className-here*').style.border="solid 1px red"

Only works for .class objects


document.querySelector(" <CSS SELECTOR HERE> ")

returns first instance

FOR LOOP alert! (alert('for loop time!'))


document.querySelectorAll(" <CSS SELECTOR HERE> ")

returns an array


Use querySelectorAll with a for loop to change all imgs to something

var imgs = document.querySelectorAll("img");
for (var i = 0, l=imgs.length; i < l; i++) {
imgs[i].src="" };

use document.getElementByClassName to change innerHTML

document.getElementsByClassName('m-bannerMessage__content')[0].innerHTML = "get lost!" 

remember, querySelectorAll can take CSS selectors

var h1text = document.querySelectorAll("p, h1, h2"); // CSS selectors
for (var i = 0, l = h1text.length; i < l; i++) {
h1text[i].innerHTML = "you smell!";


Michael Rakowitz, paraSITE

Parasitic Architecture

Parasitic Architecture

Parasitic Architecture

Parasite fish