introduction to midterm assignment

parasite

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:

• Making a small, safe haven in an otherwise adversarial or forbidding website (e.g. a U.S. immigration page).

• Taking a website designed for advertisement and propaganda and revealing its deceptions, or using them to sell your own product.

• Using one of the short stories we have read as your new narrative material, and using the navigation of an existing website to reimagine the story. Kafka, perhaps?

Requirements:

• Your parasite should actively engage with the fabric of the site(s) it exists within. For example – it might take in user input instead of the site, or co-opts some kind of infrastructure on the page. A simple overlay is not enough

• Your parasite should incorporate the web technologies and techniques we’ve discussed so far: Jquery, javascript, HTML, CSS.

Things you can do through console:

easy ones: alert

alert(“hello”)

Live edit page content

document.designMode=“on”
-OR- 
document.body.contentEditable="true"

DOM properties

Here are all the DOM properties you can play with.

setting style

element.style.backgroundColor = "red"

e.g. change style.background property for the whole body

document.body.style.backgroundImage=‘url(“https://cdn.mos.cms.futurecdn.net/rqoDpnCCrdpGFHM6qky3rS-1200-80.jpg”)’

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'); 
element.remove();

simulating a click event

document.getElementById("clickhere").click()

blur

document.body.style.filter="blur(10px)"

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

querySelector

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

returns first instance

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

querySelectorAll

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

returns an array

Examples

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="https://cdn.mos.cms.futurecdn.net/rqoDpnCCrdpGFHM6qky3rS-1200-80.jpg" };

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!";
};