diff --git a/outline.js b/outline.js index 146ad45..ed5789a 100644 --- a/outline.js +++ b/outline.js @@ -226,10 +226,10 @@ export const outline = [ text: 'Live coding', link: '/lectures/objects-loops-live-coding.html', }, - // { - // text: 'Workshop', - // link: '/workshops/objects/index.html', - // }, + { + text: 'Workshop', + link: '/workshops/objects/index.html', + }, ] }, // { diff --git a/workshops/objects/index.md b/workshops/objects/index.md index 3112149..648a123 100644 --- a/workshops/objects/index.md +++ b/workshops/objects/index.md @@ -1,111 +1,58 @@ -# Workshop on JavaScript objects, loops, and files +# Workshop on JavaScript objects and loops -## Part 1: Practical +For this workshop, tell a story using JavaScript objects, arrays, and loops. -The practical part of today’s workshop is mostly in one file, “shapes.js”. -Download it to get started. +You can use any story you like, including re-using the story you wrote for the [JS +Values and Variables](http://localhost:5173/web-development/workshops/values-variables/) +workshop. Try having a browse through [Aesop’s +fables](https://www.read.gov/aesop/) to see if one of those +stories captures your imagination. -There are some optional steps at the end that also require two other files: -“extraColors.js” and “package.json”. Download both files or -copy-paste into your own versions to get started. Then follow the -instructions in “shapes.js”. +Here are a few promising fables that have a nice story, action, and even some repetition that can be used for arrays and loops: -[Download shapes.js](https://github.com/Birkbeck2/web-development/blob/main/workshops/objects/starter-files/shapes.js) +- [The Crow & the Pitcher](https://www.read.gov/aesop/012.html) -<<< @/workshops/objects/starter-files/shapes.js{js} +- [The Oak and the Reeds](https://www.read.gov/aesop/011.html) -[Download extraColors.js](https://github.com/Birkbeck2/web-development/blob/main/workshops/objects/starter-files/extraColors.js) +- [The Heron](https://www.read.gov/aesop/015.html) -<<< @/workshops/objects/starter-files/extraColors.js{js} +- [The Hare and the Tortoise](https://www.read.gov/aesop/025.html) -[Download package.json](https://github.com/Birkbeck2/web-development/blob/main/workshops/objects/starter-files/package.json) +- [The North Wind and the Sun](https://www.read.gov/aesop/143.html) -<<< @/workshops/objects/starter-files/package.json{json} +## Steps -## Part 2: Creative +1. Create a GitHub repository from the link on Moodle. -Choose one of the three options below. +2. Create an `index.html`, an `index.js` or `script.js`, and link them together. -## Creative option A: Make something! +3. Write your story in the JS file. Your program does not have to modify or + output anything to the HTML, just the browser console. -Scenario: Choose something that you can represent in code with arrays and -objects. It can be info about some of your favorite songs, TV shows, -clothes, hobbies, pets, work, etc. +::: tip Structure tip +Try breaking the story down into sections, like +the situation, the action, and the result. Before you start writing code, +write the structure out using comments so you can see the overall shape. +::: -Goal: Write a program including arrays, objects, and loops that uses that -info to tell a story or investigate the answer to some questions about the -info. +::: tip Objects tip +Make your characters into objects, assign their qualities as object properties, +and program their behaviors by means of object methods. +::: -## Creative option B: Explore 1980s hit song data +::: tip Arrays and loops tip +To use an array in your program, think about what part of the story is repeated +several times. Then write an array that contains the information about the repeated +actions. Then loop over that array to make the action happen. +::: -### Scenario +## Requirements checklist -You are a developer working on a music streaming app. You use -JavaScript to work with data about songs, albums, artists, and audio -generally. You’ve been provided with a list of top singles from the UK in -the 1980s (see starter files below). +For homework credit, here are the main things to try to get right: -### Goal - -Ask some questions that the data can answer, using loops. Can’t -think of any? Try these. - - 1. What’s the longest song title (in terms of number of characters)? - 2. What’s the shortest title? - 3. Is “I” or “You” used more often? How about “Me”? How about “Love”? - 4. What was the top ranked song for each year? - 5. Which artist appears on the list most often? - 6. Can you use a for loop to write an HTML document (a string) with markup - for a `ul` and `li` items, using the data? - -### Starter code - -[Download songData.js](https://github.com/Birkbeck2/web-development/blob/main/workshops/objects/starter-files/songData.js) (too long to show here) - -[Download songs.js](https://github.com/Birkbeck2/web-development/blob/main/workshops/objects/starter-files/songs.js) - -<<< @/workshops/objects/starter-files/songs.js{js} - -## Creative option C: Image factory (warning: challenging!) - -### Scenario - -You are a developer working on a web app where users can -choose a color and download geometric shapes in that color. The shapes are -made with SVG (scalable vector graphics), which is a markup language that -can be used to encode graphics like logos, icons, and illustrations. - -### Objective - -In the starter code below, you are given a square, encoded -using SVG markup. Create at least five copies of the square in different -colors, and save them all as files in the folder called “output”. - -### Starter code - -[Download images.js](https://github.com/Birkbeck2/web-development/blob/main/workshops/objects/starter-files/images.js) - -<<< @/workshops/objects/starter-files/images.js{js} - -### Clues and tips - -- Program structure: First create an array with all the color codes you want, or an - object with color names and color codes as key-value pairs. Then you can - iterate over this with a for loop to create one copy of the image for each - color. - -- SVG format: Don’t worry if you haven’t used SVG markup before--you - already know some of it, because it’s similar to HTML and CSS in many - ways. Look for familiar patterns. Can you tell where the color is - defined in the code? - -- Changing the colors: Once you have found the color definition in the SVG - code, you’ll want to change it. Try looking up how the `replace()` - method works on strings. - -- Saving each file: You’ll need the built-in function called `writeFileSync()`, - which is already imported for you on line 1. It is used like this: - `writeFileSync('output-folder-name/file-name.txt', 'content of file as - a string')`. Note: on Windows, you have to use backslash (`\`) between - the folder name and file name, and on Mac and Linux, you have to use - forward slash (`/`). +- At least one object with properties that are accessed or changed in the program. +- At least one array (or string) that is iterated over using a loop. +- The variable, property, and method names make sense and are consistently styled. +- The program tells a story. +- Key information is logged to the console. +- There are no errors when the program runs. diff --git a/workshops/objects/starter-files/extraColors.js b/workshops/objects/starter-files/extraColors.js deleted file mode 100644 index 5a32041..0000000 --- a/workshops/objects/starter-files/extraColors.js +++ /dev/null @@ -1,4 +0,0 @@ -const pinkAndYellow = { - extraPink: '#d703fc', - extraYellow: '#fcf803', -} diff --git a/workshops/objects/starter-files/images.js b/workshops/objects/starter-files/images.js deleted file mode 100644 index ab6ed45..0000000 --- a/workshops/objects/starter-files/images.js +++ /dev/null @@ -1,33 +0,0 @@ -// images.js -// This line imports some built-in Node helper functions -import { accessSync, mkdirSync, writeFileSync } from "node:fs" - -// This creates a subfolder called 'output' if it doesn't already exist -try { - accessSync('output') -} catch (err) { - mkdirSync('output') -} - -// Here are a few geometric shapes for you to work with. -// They are encoded using SVG markup (Scalable Vector Graphics), -// which is used for icons, logos, and illustrations. -// Keep in mind, within this JavaScript file, they are just -// strings, so you can treat them as strings. -const square = ` - - - - ` - -const triangle = ` - - - - ` - -const circle = ` - - - - ` diff --git a/workshops/objects/starter-files/package.json b/workshops/objects/starter-files/package.json deleted file mode 100644 index 3dbc1ca..0000000 --- a/workshops/objects/starter-files/package.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "type": "module" -} diff --git a/workshops/objects/starter-files/shapes.js b/workshops/objects/starter-files/shapes.js deleted file mode 100644 index 65906fb..0000000 --- a/workshops/objects/starter-files/shapes.js +++ /dev/null @@ -1,90 +0,0 @@ -// shapes.js -// Workshop on objects and loops - -// 1. Make an array called 'shapes' containing strings that are the names of -// shapes. It should have at least three shapes. - - -// 2. Log the third item in the array to the console, without retyping the -// name of the shape. - - -// 3. Add another shape to the array - - -// 4. Write a loop that goes through all the shapes in the array. -// In the loop, log each shape to the console. -// Also log the second letter in each shape. - - -// 5. Choose three colors. Get the hex code for each one, and pick a name for each one. -// Make an object called 'colors' that has a property for each color. -// Use the color name as the key, and the hex code as the value. - - -// 6. Log the hex code of one of your colors to the console, without retyping the -// code. - - -// 7. Write a loop that goes through the colors. For each one, log a sentence to -// the console that says "I have a green triangle with code #000000" but -// substituting the particular color name and code each time. - - -// 8. Write a loop that goes through the colors. For each one, transform the -// hex code to lowercase letters, changing the property values as you go. -// Then log the colors object. -// Hint: Not sure if it's working? Make sure there's at least one uppercase letter in -// the object definition above, and check that it's lowercase when logged. - - -// 9. Write a loop that goes through the shapes. Inside the shape loop, write -// another loop that goes through the colors. Inside the color loop, log the -// sentence "You have a red rectangle" but substitute the shape AND the color -// every time. - - -// 10. Modify the above code so that it only logs the sentence if the hex code -// contains the letter 'e'. - -// 11. Build an array called 'hexCodes' listing just the hex codes. To build -// it, please use a for loop that goes over your colors object, rather than -// retyping the codes. Then log the array to the console. - -// 11b. OPTIONAL -// The next two steps involve exporting and importing with a pattern from ES -// modules. We did not cover all the steps in class, so they are optional. -// Make sure you've downloaded the file package.json and saved it in the same -// folder as this one. -// Here is a one minute video demo of "type":"module" in package.json: -// https://www.youtube.com/watch?v=I4gR-1qMjk0 - -// 12. OPTIONAL -// Make sure you've downloaded the file extraColors.js and saved -// it in the same folder as this one. Modify the line where the pinkAndYellow -// object is defined, so that it is exported. Then import it below, in this -// file, and log it to the console. - - -// 13. OPTIONAL -// Write a loop that goes through pinkAndYellow. Inside the loop, add each -// new color to your colors object. Log the updated colors object to the console. - - -// 14. OPTIONAL CHALLENGE Use more loops to build an object called -// 'charFrequencies' that -// records each character that appears in the hex codes, and how many times -// each one appears, overall. Each key should be a character, and each value -// should be the number of times that character appears. Then log it to the console. -// For example, at the end of your looping, your object might look like this: -// charFrequencies = { -// 'e': 5, -// '6': 1, -// ... -// } -// Hint 1. For each character, the action to take will vary, depending on -// whether you've already added that character to the object. Try using an if -// statement to handle this. -// Hint 2. You may need to use the built-in hasOwnProperty() method of the object. -// Hint 3. Try excluding the hash (#) from charFrequencies. - diff --git a/workshops/objects/starter-files/songData.js b/workshops/objects/starter-files/songData.js deleted file mode 100644 index cd33dff..0000000 --- a/workshops/objects/starter-files/songData.js +++ /dev/null @@ -1,605 +0,0 @@ -// songData.js -// Rank, title, artist, and year from -// top singles from the UK in the 1980s -export const songs = [ - { - "rank": 1, - "title": "Do They Know It's Christmas?", - "artist": "Band Aid", - "year": 1984 - }, - { - "rank": 2, - "title": "Relax", - "artist": "Frankie Goes to Hollywood", - "year": 1983 - }, - { - "rank": 3, - "title": "I Just Called to Say I Love You", - "artist": "Stevie Wonder", - "year": 1984 - }, - { - "rank": 4, - "title": "Two Tribes", - "artist": "Frankie Goes to Hollywood", - "year": 1984 - }, - { - "rank": 5, - "title": "Don't You Want Me", - "artist": "The Human League", - "year": 1981 - }, - { - "rank": 6, - "title": "Last Christmas/Everything She Wants", - "artist": "Wham!", - "year": 1984 - }, - { - "rank": 7, - "title": "Karma Chameleon", - "artist": "Culture Club", - "year": 1983 - }, - { - "rank": 8, - "title": "Careless Whisper", - "artist": "George Michael", - "year": 1984 - }, - { - "rank": 9, - "title": "The Power of Love", - "artist": "Jennifer Rush", - "year": 1985 - }, - { - "rank": 10, - "title": "Come On Eileen", - "artist": "Dexys Midnight Runners & the Emerald Express", - "year": 1982 - }, - { - "rank": 11, - "title": "Tainted Love", - "artist": "Soft Cell", - "year": 1981 - }, - { - "rank": 12, - "title": "Eye of the Tiger", - "artist": "Survivor", - "year": 1982 - }, - { - "rank": 13, - "title": "Blue Monday", - "artist": "New Order", - "year": 1983 - }, - { - "rank": 14, - "title": "Stand and Deliver", - "artist": "Adam and the Ants", - "year": 1981 - }, - { - "rank": 15, - "title": "Especially for You", - "artist": "Kylie Minogue and Jason Donovan", - "year": 1988 - }, - { - "rank": 16, - "title": "The Lion Sleeps Tonight", - "artist": "Tight Fit", - "year": 1982 - }, - { - "rank": 17, - "title": "Fame", - "artist": "Irene Cara", - "year": 1982 - }, - { - "rank": 18, - "title": "Ghostbusters", - "artist": "Ray Parker, Jr.", - "year": 1984 - }, - { - "rank": 19, - "title": "Uptown Girl", - "artist": "Billy Joel", - "year": 1983 - }, - { - "rank": 20, - "title": "Ride On Time", - "artist": "Black Box", - "year": 1989 - }, - { - "rank": 21, - "title": "Swing the Mood", - "artist": "Jive Bunny and the Mastermixers", - "year": 1989 - }, - { - "rank": 22, - "title": "Do You Really Want to Hurt Me", - "artist": "Culture Club", - "year": 1982 - }, - { - "rank": 23, - "title": "Hello", - "artist": "Lionel Richie", - "year": 1984 - }, - { - "rank": 24, - "title": "I Know Him So Well", - "artist": "Elaine Paige and Barbara Dickson", - "year": 1985 - }, - { - "rank": 25, - "title": "Imagine", - "artist": "John Lennon", - "year": null - }, - { - "rank": 26, - "title": "Don't Stand So Close to Me", - "artist": "The Police", - "year": 1980 - }, - { - "rank": 27, - "title": "Agadoo", - "artist": "Black Lace", - "year": 1984 - }, - { - "rank": 28, - "title": "Woman in Love", - "artist": "Barbra Streisand", - "year": 1980 - }, - { - "rank": 29, - "title": "Red Red Wine", - "artist": "UB40", - "year": 1983 - }, - { - "rank": 30, - "title": "Antmusic", - "artist": "Adam and the Ants", - "year": 1980 - }, - { - "rank": 31, - "title": "Into the Groove", - "artist": "Madonna", - "year": 1985 - }, - { - "rank": 32, - "title": "Save Your Love", - "artist": "Renée and Renato", - "year": 1982 - }, - { - "rank": 33, - "title": "Feels Like I'm in Love", - "artist": "Kelly Marie", - "year": 1980 - }, - { - "rank": 34, - "title": "Pass the Dutchie", - "artist": "Musical Youth", - "year": 1982 - }, - { - "rank": 35, - "title": "Never Gonna Give You Up", - "artist": "Rick Astley", - "year": 1987 - }, - { - "rank": 36, - "title": "Prince Charming", - "artist": "Adam and the Ants", - "year": 1981 - }, - { - "rank": 37, - "title": "Mistletoe and Wine", - "artist": "Cliff Richard", - "year": 1988 - }, - { - "rank": 38, - "title": "Don't Leave Me This Way", - "artist": "The Communards", - "year": 1986 - }, - { - "rank": 39, - "title": "I Don't Wanna Dance", - "artist": "Eddy Grant", - "year": 1982 - }, - { - "rank": 40, - "title": "This Ole House", - "artist": "Shakin' Stevens", - "year": 1981 - }, - { - "rank": 41, - "title": "The Land of Make Believe", - "artist": "Bucks Fizz", - "year": 1982 - }, - { - "rank": 42, - "title": "Nothing's Gonna Stop Us Now", - "artist": "Starship", - "year": 1987 - }, - { - "rank": 43, - "title": "Vienna", - "artist": "Ultravox", - "year": 1981 - }, - { - "rank": 44, - "title": "Seven Tears", - "artist": "Goombay Dance Band", - "year": 1982 - }, - { - "rank": 45, - "title": "Freedom", - "artist": "Wham!", - "year": 1984 - }, - { - "rank": 46, - "title": "One Day in Your Life", - "artist": "Michael Jackson", - "year": 1981 - }, - { - "rank": 47, - "title": "Making Your Mind Up", - "artist": "Bucks Fizz", - "year": 1981 - }, - { - "rank": 48, - "title": "Super Trouper", - "artist": "ABBA", - "year": 1980 - }, - { - "rank": 49, - "title": "The Birdie Song", - "artist": "The Tweets", - "year": 1981 - }, - { - "rank": 50, - "title": "19", - "artist": "Paul Hardcastle", - "year": 1985 - }, - { - "rank": 51, - "title": "Every Loser Wins", - "artist": "Nick Berry", - "year": 1986 - }, - { - "rank": 52, - "title": "Shaddup You Face", - "artist": "Joe Dolce Music Theatre", - "year": 1981 - }, - { - "rank": 53, - "title": "Like a Virgin", - "artist": "Madonna", - "year": 1985 - }, - { - "rank": 54, - "title": "I Wanna Wake Up with You", - "artist": "Boris Gardiner", - "year": 1986 - }, - { - "rank": 55, - "title": "Reet Petite", - "artist": "Jackie Wilson", - "year": 1986 - }, - { - "rank": 56, - "title": "D.I.S.C.O.", - "artist": "Ottawan", - "year": 1980 - }, - { - "rank": 57, - "title": "Frankie", - "artist": "Sister Sledge", - "year": 1985 - }, - { - "rank": 58, - "title": "I Want to Know What Love Is", - "artist": "Foreigner", - "year": 1984 - }, - { - "rank": 59, - "title": "The Tide Is High", - "artist": "Blondie", - "year": 1980 - }, - { - "rank": 60, - "title": "Let's Dance", - "artist": "David Bowie", - "year": 1983 - }, - { - "rank": 61, - "title": "Total Eclipse of the Heart", - "artist": "Bonnie Tyler", - "year": 1983 - }, - { - "rank": 62, - "title": "True", - "artist": "Spandau Ballet", - "year": 1983 - }, - { - "rank": 63, - "title": "Chain Reaction", - "artist": "Diana Ross", - "year": 1986 - }, - { - "rank": 64, - "title": "We All Stand Together", - "artist": "Paul McCartney and the Frog Chorus", - "year": 1984 - }, - { - "rank": 65, - "title": "The Only Way Is Up", - "artist": "Yazz and the Plastic Population", - "year": 1988 - }, - { - "rank": 66, - "title": "Living Doll", - "artist": "Cliff Richard and The Young Ones featuring Hank Marvin", - "year": 1986 - }, - { - "rank": 67, - "title": "Ebony and Ivory", - "artist": "Paul McCartney and Stevie Wonder", - "year": 1982 - }, - { - "rank": 68, - "title": "Only You", - "artist": "The Flying Pickets", - "year": 1983 - }, - { - "rank": 69, - "title": "You Drive Me Crazy", - "artist": "Shakin' Stevens", - "year": 1981 - }, - { - "rank": 70, - "title": "Wake Me Up Before You Go-Go", - "artist": "Wham!", - "year": 1984 - }, - { - "rank": 71, - "title": "The Lady in Red", - "artist": "Chris de Burgh", - "year": 1986 - }, - { - "rank": 72, - "title": "Geno", - "artist": "Dexys Midnight Runners", - "year": 1980 - }, - { - "rank": 73, - "title": "Down Under", - "artist": "Men at Work", - "year": 1983 - }, - { - "rank": 74, - "title": "Dancing in the Street", - "artist": "David Bowie and Mick Jagger", - "year": 1985 - }, - { - "rank": 75, - "title": "Town Called Malice/Precious", - "artist": "The Jam", - "year": 1982 - }, - { - "rank": 76, - "title": "I Should Be So Lucky", - "artist": "Kylie Minogue", - "year": 1988 - }, - { - "rank": 77, - "title": "Together We Are Beautiful", - "artist": "Fern Kinney", - "year": 1980 - }, - { - "rank": 78, - "title": "Coward of the County", - "artist": "Kenny Rogers", - "year": 1980 - }, - { - "rank": 79, - "title": "I Feel for You", - "artist": "Chaka Khan", - "year": 1984 - }, - { - "rank": 80, - "title": "Ghost Town", - "artist": "The Specials", - "year": 1981 - }, - { - "rank": 81, - "title": "I Wanna Dance with Somebody (Who Loves Me)", - "artist": "Whitney Houston", - "year": 1987 - }, - { - "rank": 82, - "title": "Move Closer", - "artist": "Phyllis Nelson", - "year": 1985 - }, - { - "rank": 83, - "title": "(Just Like) Starting Over", - "artist": "John Lennon", - "year": 1980 - }, - { - "rank": 84, - "title": "It's My Party", - "artist": "Dave Stewart and Barbara Gaskin", - "year": 1981 - }, - { - "rank": 85, - "title": "Being with You", - "artist": "Smokey Robinson", - "year": 1981 - }, - { - "rank": 86, - "title": "Working My Way Back to You", - "artist": "The Detroit Spinners", - "year": 1980 - }, - { - "rank": 87, - "title": "When the Going Gets Tough, the Tough Get Going", - "artist": "Billy Ocean", - "year": 1986 - }, - { - "rank": 88, - "title": "Billie Jean", - "artist": "Michael Jackson", - "year": 1983 - }, - { - "rank": 89, - "title": "9 to 5", - "artist": "Sheena Easton", - "year": 1980 - }, - { - "rank": 90, - "title": "A Good Heart", - "artist": "Feargal Sharkey", - "year": 1985 - }, - { - "rank": 91, - "title": "Baggy Trousers", - "artist": "Madness", - "year": 1980 - }, - { - "rank": 92, - "title": "Take On Me", - "artist": "A-ha", - "year": 1985 - }, - { - "rank": 93, - "title": "Happy Birthday", - "artist": "Altered Images", - "year": 1981 - }, - { - "rank": 94, - "title": "Hands Up (Give Me Your Heart)", - "artist": "Ottawan", - "year": 1981 - }, - { - "rank": 95, - "title": "Ashes to Ashes", - "artist": "David Bowie", - "year": 1980 - }, - { - "rank": 96, - "title": "Woman", - "artist": "John Lennon", - "year": 1981 - }, - { - "rank": 97, - "title": "Love & Pride", - "artist": "King", - "year": 1985 - }, - { - "rank": 98, - "title": "Golden Brown", - "artist": "The Stranglers", - "year": 1982 - }, - { - "rank": 99, - "title": "All Night Long (All Night)", - "artist": "Lionel Richie", - "year": 1983 - }, - { - "rank": 100, - "title": "Love of the Common People", - "artist": "Paul Young", - "year": 1983 - } -] diff --git a/workshops/objects/starter-files/songs.js b/workshops/objects/starter-files/songs.js deleted file mode 100644 index 036eb47..0000000 --- a/workshops/objects/starter-files/songs.js +++ /dev/null @@ -1,4 +0,0 @@ -// songs.js -import { songs } from './songData.js' - -// console.log(songs)