To Do This Week:
Catch up on tutorials. Start reviewing JavaScript’s (and programming’s) basic concepts. See links to W3schools topics below.
Post to Slack: Describe in 5-10 separate lines, in natural language, the sequential steps for an idea you would like to pursue for the E-Lit Project. The E-Lit project, due Feb 20th, will be some creative manipulation of text using JavaScript.
Just describe the programming steps, nothing about design. For example:
- display a random sentence of text
- make each word in the sentence hoverable
- on hover, the word animates a list of other possible words
- when not hovering, a new word is selected from the animated list, replacing the original word
- when a new sentence is figured out with all new words, play a sound
You will eventually translate these steps into functioning JavaScript. And once the script is worked out, you will then design the work and populate it with other elements, arrays, media. This is the conceptual step or “algorithm design” when you work out the logical steps of a process for the work to begin scripting in code. Remember, we did this in class with Hangman.
Class
Review
statements
variables
data types: strings, numbers, booleans, arrays
basic operators and “shortcut” operators
comparison operators
arrays
adding javascript to a page (internal and external methods)
javascript commenting
objects / methods / properties
functions
for loops
conditional statements
scope
Generative Literature
Generative digital art or writing refers to a type of creative expression that uses a computer script or algorithm. The computer generates the artwork, poem or story based on parameters set by the artist/writer or through self-generating processes. The output can be a unique, often random and evolving, digital work.
JavaScript and Poetic Text
Taroko Gorge
Taper: an online literary magazine for small computational pieces
https://taper.badquar.to/2/local_optimum.html
https://taper.badquar.to/2/find_someone.html
https://taper.badquar.to/2/why_2k.html
Interactive text toy
template – story-generator
template – line scramble poem
Past student work:
- random pizza Shane Sanders
- narrative game: Bed Bugs, Holly Slocum
JavaScript/CSS Animation
js/css animations
Working with strings (manipulating text):
- strings
- string methods
- regular expressions…
Regex (regular expressions) Basics:
// TO BREAK A LINE AFTER A PERIOD
// find all periods: \.
// replace with: \.\n
// TO ADD QUOTE AT START OF LINES
// find beginning of line: ^
// replace with: ”
// TO ADD QUOTE AND COMMA AT END OF LINES
// find end of line: $
// replace with: “,
// TO REMOVE ALL LINE BREAKS
// find: \n\s+
// replace with nothing
Student Examples:
E-Lit Project (10%) DUE Wednesday Feb 22nd
In this project, you will be creating a work of “electronic literature”– a digital work of poetry or storytelling that uses programming (in this case JavaScript) to manipulate text. Here are the steps for this project using ChaGPT as an assistant:
- Come up with an idea for what you want to do with text. Break down the idea into a sequence of specific steps. Be as detailed as you can. Write out the steps in natural human language.
- Check with ChatGPT about the sequence of steps needed for programming your project (still in natural language). Compare the ChatGPT results with your written steps. Adjust.
- Try to translate the sequence of steps into what you know so far about JavaScript’s programming concepts: variables, operators, functions, loops, arrays etc. Come up with what you think you will need to code in JavaScript with each step. Do you need arrays? Functions? Note these JavaScript concepts with each step in your list.
- Start to write your JavaScript. Make sure you have all the HTML in place. Don’t worry about CSS design yet. Just use basic outlines to show what is happening.
- Use ChatGPT to figure out certain tasks in your script as you build it. For example, “help me write a function to animate a div horizontally across the browser page.” Working with ChatGPT on each task will give you maximum control over your work and your will learn how to write JavaScript. If you ask it to write the whole script, you will not have control of the script and you will not learn anything!
- Test your script. Check the console for problems.
- Apply CSS design.
- Upload the project to the server and post the url in the Slack channel along with a description of the steps that you started with.