To Do This Week:
JavaScript Codecademy #2 (DUE February 19)
If you have not already done so, complete the remaining modules in the tutorial:
- Arrays
- Loops
- Iterators
- Objects
Screen grab your completed modules and upload them to Canvas. Ensure the browser address bar is visible in the screenshot.
Module Notes
Important:
- Submit your projects to Canvas and verify the submission is a working URL!
- Include a commented-out statement with the logic steps in JavaScript terms (as best you can). Use a list format for easier reading.
- For the next projects in this class, add your own comments in your script, along wth ChatGOT comments explaining what is happening at each step. Study these comments to understand the logic in the syntax.
- When using ChatGPT, specify that you want to use ES6 syntax, and maybe subtract ternary functions and arrow functions (if you want).
Review:
- Statements
- Variables
- Data Types
- Operators (basic and “shortcut” operators)
- Comparison Operators
- Arrays
- Adding JavaScript to a Page (internal and external methods)
- JavaScript Comments
- Objects, Methods, and Properties
- Functions
- For Loops, While Loops
- Conditional Statements
- Scope
Generative Literature:
What is Generative Language Art?
Generative language art is a type of electronic literature (e-lit) where a computer script or algorithm dynamically generates poems, stories, or other text-based works. These works often incorporate randomness or evolving digital processes to create unique and engaging outputs.
JavaScript and Poetic Text:
Examples of generative literature:
- Taroko Gorge by Nick Montfort
- Taroko Script (with comments)
- Taper: An online literary magazine for small computational pieces
Student E-Lit
Code Guidelines for Taper:
- All code (HTML, CSS, JavaScript) must fit within 2KB (2048 bytes).
- Use a Minifier to compress code or Unminify for readability.
More Taper Projects
- https://taper.badquar.to/2/if_jupiter_had_turned_into_a_star.html
- https://taper.badquar.to/4/links.html
- https://taper.badquar.to/6/chance_infections.html
- https://taper.badquar.to/7/night_voyagers.html
- https://taper.badquar.to/7/moons_of_jupiter_7.html
- https://taper.badquar.to/7/verdigris_7.html
- https://taper.badquar.to/11/returning_thoughts.html
- https://taper.badquar.to/11/hollywood_hitmaker.html
- https://taper.badquar.to/11/infinite_scroll.html
- https://taper.badquar.to/11/this_bird_has_flown.html
- https://taper.badquar.to/11/hail.html
- https://taper.badquar.to/10/sense_of_existence.html
- https://taper.badquar.to/9/hell_is_overthinking.html
- https://taper.badquar.to/9/life_plan.html
- https://taper.badquar.to/9/nein_finality.html
- https://taper.badquar.to/8/wreckage_of_the_infinite.html
- https://taper.badquar.to/7/flaneur_treadmill.html
Manipulating Text:
Key JavaScript methods for text manipulation:
- charAt(): Get a character at a specific position in a string
- slice(): Extract a part of a string
- toUpperCase() / toLowerCase(): Change case
- replace() / replaceAll(): Replace text
- split(): Convert a string into an array
Array Methods:
- pop(): Remove the last element
- push(): Add a new element
- shift(): Remove the first element
- splice(): Add/remove elements
- slice(): Create a subarray
- sort() / reverse(): Sort or reverse elements
Regex (Regular Expressions):
Examples of common tasks:
// Break a line after a period
Find: \.
Replace with: \.\n
// Add a quote at the start of lines
Find: ^
Replace with: "
// Add a quote and comma at the end of lines
Find: $
Replace with: ",
// Remove all line breaks
Find: \n\s+
Replace with: (nothing)
Try it with Sample Text.
JavaScript Objects:
Tutorial: JavaScript Object Basics
E-Lit Project (5%):
DUE Wednesday, February 26
This project involves creating an electronic literature (e-lit) piece, a digital form of poetry, language art or narrative that uses JavaScript to dynamically manipulate text. To ensure a structured and effective approach to your project, follow these guidelines, using ChatGPT as a tool throughout the process:
Your Steps:
- Idea Generation: Begin by brainstorming ideas for your e-lit piece, focusing on how you can manipulate text in a digital narrative or poetic form.
- Conceptual Breakdown: Once you have an idea, break it down into a sequence of specific, actionable steps. This involves detailing how user interactions will alter the text or narrative flow.
- Consult with ChatGPT: Share your project steps with ChatGPT to refine the sequence and ensure it aligns with JavaScript’s capabilities. Adjust your plan based on the feedback.
- Script Planning: Identify the JavaScript concepts needed to execute each step (e.g., arrays for storing text segments, functions for changing text based on interaction). Note these alongside your steps.
- Coding with JavaScript: Start implementing your JavaScript code, making sure the HTML structure is in place first. Use ChatGPT to assist with specific tasks or to clarify JavaScript functions.
- Testing and Refinement: Test your script extensively, checking for bugs and ensuring the intended functionality works smoothly. Use the browser’s Console to identify and fix errors.
- Styling with CSS: Apply CSS styling to enhance the visual design of your piece. The focus here is on complementing the textual interaction, not overshadowing it.
- Include a Statement: In the source code, comment the list of your steps and describe briefly how you used ChatGPT.
- Final Submission: Validate your HTML and CSS, upload your project to the server, and submit the URL in Canvas.
Suggested Ideas for Your E-lit Piece:
- Interactive Poetry: Allow users to input or interact with words/sentences, which are then visually and textually transformed on the page in creative ways.
- Generative Language Art: Create a poem or work of language art that changes based on user choices, inputs or through autoplay.
- Recombinant Narrative: Develop a narrative that evolves and changes through different combinations of elements.
- Text-Based Puzzle: Design a puzzle or game where users solve challenges through text manipulation or interpretation.
Project Prompting
Describe in 5-10 lines the basic sequential steps for your E-Lit Project. Use natural language to outline the programming logic (not the design).
Example:
- Display a random sentence from a text array
- Make each separate word in the sentence hoverable
- On hover, the word animates a list of other possible words
- When not hovering, a new word replaces the original word
- When a new sentence is completed, play a sound
Now try to figure out how Javascript might complete each step the way you want. How would you display a random sentence from an array? Or make each word hoverable? Think about it and then check you answers for each step with ChatGPT. You can either describe in natural language or try to code it.
You will eventually translate such step into functioning JavaScript and refine the working project with additional arrays items, media, and design elements.
Follow the structured process outlined above to create your electronic literature project. Use ChatGPT to assist with brainstorming, refining, and implementing your ideas. Remember to include a commented statement at the top of your source code outlining your steps.
Student Example:
JavaScript Animation
let box = document.getElementById("box"); let position = 0; setInterval(() => { position += 2; // move 2px per tick box.style.top = position + "px"; }, 50);
JavaScript/CSS Animation
js/css animations
#box { position: absolute; width: 50px; height: 50px; background: red; animation: moveDown 2s linear infinite; } @keyframes moveDown { from { transform: translateY(0); } to { transform: translateY(200px); } }