DTC 477: Advanced Web Design & Development

Week 9: Electronic Literature + Intro to AI

To Do This Week:

Assignments:

Upcoming Assignments

Using the JS Mentor Metaprompt

JS Mentor Metaprompt is for JS scripting assistance. Just upload to a new chat. You may generate the HTML and CSS outside of the chat, on your own or in another AI chat Think of it as your personal JavaScript tutor. It helps you learn by guiding you step by step (without giving the answer to the full solution).

Start Your JS Mentor Chat

  1. Open a new chat in ChatGPT or Claude.
  2. Upload the JS Mentor — Assignment Mode document.
  3. Copy and paste the following message into the chat:

"Read the attached JS Mentor — Assignment Mode document and follow its tutoring instructions for this conversation.

Begin with the required Assignment Mode signature, then ask me about my JavaScript assignment. Do not provide assignment solutions.""

  1. Send the message along with the attached document.
  2. Confirm that the AI responds with JS MENTOR — ASSIGNMENT MODE ACTIVE.
  3. Share your assignment instructions and begin working through your logic steps and JavaScript code.

Important: Start each new assignment chat with the JS Mentor document and activation message. The AI is your learning coach, not your code generator.

The rule for this class: AI supports your understanding — it does not replace it. You must be able to explain every line in your project. Always document your AI use by including the chat URL(s) in your comments.

Review

This project brings together everything so far — arrays, functions, loops, conditionals — and points it at text. Review as needed:

Electronic Literature

What is it?

Electronic literature (e-lit) is writing that depends on the computer — work that couldn't exist on paper because the code is part of the poem. A script selects, combines, transforms, or rearranges language; randomness and process produce text that shifts each time it runs or as the reader interacts.

These techniques all have practical uses — shuffling data, building forms, assembling shopping carts, generating Q&A. But in the next project you will manipulate language in an artistic way: making things happen in the text of the web page.

Examples of generative literature

Student E-Lit

Taper: an online literary magazine for small computational pieces

Visit Taper

More Taper Projects

Manipulating Text

Array Methods

String Methods

Pick a Random Item from an Array

The engine of most generative text — choose one item at random:

const words = ["glass", "river", "signal", "ash"];

function pick(arr) {
  const i = Math.floor(Math.random() * arr.length);
  return arr[i];
}

console.log(pick(words)); // a different word each run

JavaScript Animation: Text in Motion

Open the E-lit Text Animation Examples demo to explore four examples that combine these techniques:

  1. Falling Words: Three words move down the page using setInterval(). Clicking a word stops it.
  2. Scrambling Letters: Hovering over a word generates random letters. Moving away selects a new word from an array.
  3. Snake Text: Individual letters follow the movement of the mouse.
  4. Word Clusters: Words scatter when hovered over and gather into new random clusters when the mouse leaves.

Methods & Properties

JavaScript can be used to animate words, letters, and other HTML elements. Text can move across the screen, change rapidly, follow the mouse, or respond when someone clicks or hovers. Animation can introduce rhythm, surprise, and interactivity into a digital writing project.

There are two main approaches: JavaScript can repeatedly change an element's properties, or JavaScript can trigger a CSS transition. Both approaches can be combined with mouse events and random values.

JavaScript or CSS?

1. Animation with setInterval()

The setInterval() method runs a function repeatedly at a specified time interval. Each time the function runs, it can change an element's position, text, color, or other properties.

In this example, a word moves down the page by 2 pixels every 50 milliseconds. 

const word = document.querySelector("#word");

let position = 0;

function moveWord() {
  position += 2;
  word.style.top = `${position}px`;
}

// Run the function every 50 milliseconds
let timer = setInterval(moveWord, 50);

The word needs position: absolute or position: relative in CSS so that its top property can be changed. 

#word {
  position: absolute;
  top: 0;
}

Use clearInterval(timer) to stop the animation. For example, clicking a moving word could stop it. 

word.addEventListener("click", function() {
  clearInterval(timer);
});

Objects and Object Literals

Objects store related properties (and methods) together — handy for bundling a fragment with its data (speaker, mood, weight).

JSON (JavaScript Object Notation) is a format for storing and exchanging data. It looks similar to a JavaScript object and behaves in a comparable way.

Simple Object Literal

// JavaScript Object Literal Example
const person = {
    firstName: "Margie",
    lastName: "Pepper",
    age: 50,
    eyeColor: "brown",
};

console.log(`Hi, ${person.firstName}`);

Object Literal with "this"

// JavaScript Object Literal Example
const person = {
    firstName: "Henry",
    lastName: "Smith",
    age: 24,
    eyeColor: "green",
    fullName() {
        return `${this.firstName} ${this.lastName}`;
    }
};

console.log(`Hi, ${person.fullName()}`);

Object Constructors

An object constructor is a function used to create multiple objects with the same properties and methods. Instead of writing a separate object literal for each person, we can use a constructor to create as many people as we need.

Constructor functions are capitalized by convention. The new keyword creates a new object, and this refers to that new object.

// Constructor function
function Person(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;

    this.fullName = function() {
        return `${this.firstName} ${this.lastName}`;
    };
}

// Create two objects using the constructor
const person1 = new Person("Margie", "Pepper", 50);
const person2 = new Person("Henry", "Smith", 24);

// Access properties and call methods
console.log(person1.firstName);
console.log(person2.age);
console.log(person1.fullName());
console.log(person2.fullName());

JavaScript Classes (ES6)

A class is a more modern way to define a structure for creating objects. It serves a similar purpose to a constructor function but uses clearer syntax.

The constructor() method runs automatically when we create a new object with new. Other methods are defined directly inside the class.

// Define a class
class Person {
    constructor(firstName, lastName, age) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }

    // A method shared by all Person objects
    fullName() {
        return `${this.firstName} ${this.lastName}`;
    }
}

// Create two objects from the class
const person1 = new Person("Margie", "Pepper", 50);
const person2 = new Person("Henry", "Smith", 24);

// Access properties and call methods
console.log(person1.firstName);
console.log(person2.age);
console.log(person1.fullName());
console.log(person2.fullName());

Key distinction: An object literal creates one object directly. A constructor function or class provides a reusable structure for creating many objects.

Learn more about JSON and objects:

Open js-demo-object-class-lesson.html to see the examples in action.

Electronic Literature: 10% DUE: Week 11 — 11/04 

Create a work of electronic literature that uses JavaScript to select, combine, transform, or rearrange letters, words, sentences, or passages. CSS should contribute meaningfully to the reading experience.

The piece should have a clear concept. It should feel like an intentional work of writing and design rather than only a technical demonstration. Possible influences include Oulipo, generative poetry, recombinant narrative, concrete poetry, and early net art.

Possible Approaches

Minimum Requirements

Development Steps

  1. Idea generation
  2. Conceptual breakdown
  3. Consult JS Mentor to see if your idea is possible
  4. Work out logic steps with JS Mentor
  5. JavaScript implementation, one step at a time
  6. Testing and refinement
  7. Styling with CSS
  8. Write the project statement*
  9. Final submission (Slack + Canvas)

*The Project Statement

A short paragraph at the top of your script (in a comment) naming your concept: what the piece does, the rule or process behind it, and what you want the reader to feel or notice. This is what turns a demo into a work.