To Do This Week:
CodeAcademy – just the lessons, not the projects
Learn Javascript :
8. “Iterators“,
9. “Objects“
Read: Eloquent Javascript:
—–
Javascript Codecademy #1 (due January 29)
Learn JavaScript:
Complete the following modules: Introduction, Conditionals, Functions, Scope
For submission on Canvas: Screen Grab and Upload what you have completed from the above modules. Include in the screen grab, the browser address bar.
Class
Interactive Website 10% – see below…
REVIEW
in-class tutorials from last week javascript-tutorial 2nd week
variables – declare and/or initialize a variable
let score = 0; “let” allows for variable change later
const name = “James”; “const” for when variable will not change
strings – “text treated as text (not code)” – in quotes
i++ – increment the integer variable “i”
i– – decrement the integer variable “i”
score+= 10; add 10 to the current score
comparison operators – comparing values
x > 10 && x < 25
x > 10 || y < 25
conditionals – “if”, “if else” and “else if” statements
let x = 8;
if (x > 5) { console.log('x is greater than 5'); };
let x = 3;
if (x > 5) {
console.log("x is greater than 5");
} else {
console.log("x is not greater than 5");
}
let x = 4;
let y = 6;
if (x > 5) {
console.log("x is greater than 5");
} else if ( y > 5) {
console.log("y is greater than 5");
} else {
console.log("x and y are not greater than 5");
}
arrays – lists of items, each item has an index starting with 0
arrays can be made of any data: strings, variables, numbers, booleans, other nested arrays.
let fruits = ['apple', 'orange', 'banana', ['strawberry','blueberry', 'blackberry']]; fruits[3][1];
functions – stores the steps or instructions to do something. but you need to call a function. with or without parameters
function myMessage(message) {
console.log(message);
}
myMessage("Hello");
scope –
global scope variables are outside all functions and therefore accessible from all functions.
for (let i=0; i<5; i++) {…}
local scope variables are within functions and therefor not accessible outside its parent function
let i;
for (i=0; i<5; i++) {…}
for loops – perform an action again and again on any element or data. i is an integer variable that gets counted up to a point
for (let i = 0; i <=5; i++) {
console.log(i);
}
FORMS and QUIZZES
JavaScript and the DOM:
traversing // get to elements on the page
document.querySelector();
Events:
event listener // interacting with elements
dom events // types of interaction with elements
dom style reference // getting/changing css values of elements
Math Methods:
Math.random // returns a random number from 0 (inclusive) up to but not including 1
Math.round // rounds a number to the nearest integer.
Math.floor // rounds a number DOWN to the nearest integer.
Math.max() // returns the number with the highest value.
Math.min // returns the number with the lowest value.
String into Array Method:
split() // splits a string into an array of substrings, returns the new array, does not change the original string.
Array Methods:
pop(); // remove the last element of an array:
push(); // add a new item to an array:
shift(); // remove the first item of an array:
unshift(); // add new items to the beginning of an array:
splice(); // adds/removes items to/from an array, and returns the removed item(s)
sort(), reverse() // the sort() method sorts an array alphabetically, and sets number arrays to ascending or descending, also random sorts
slice(); // returns the selected elements in an array, as a new array object.
join(); // method returns an array as a string and does not change the original array.
Array Iterator methods:
forEach(); // calls a provided function once for each element in an array, in order
findIndex(); // returns the index of the first element in an array that pass a test (provided as a function)
filter(); // creates an array filled with all array elements that pass a test (provided as a function).
map(); // creates a new array with the results of calling a function for every array element.
some(); // checks if any of the elements in an array pass a test (provided as a function).
every(); // method checks if all elements in an array pass a test (provided as a function)
reduce(); // method reduces the array to a single value
Switch vs Conditionals
Quiz Building Workshop
Multiple Choice Quiz
What Thing Are You? Quiz
What is your superpower? Madeline Brookman
Student Pairings – overview of pairings script
In-Class Exercise
With your partner decide what the topic will be for your own What Thing Are? Quiz. Discuss what information your questions should reveal about the user. How will you organize the values of the various radio buttons? What are the steps needed to compute the answers and return a result. How will you present the result.
- Using ChaGPT, describe the form to generate the basic HTML/CSS of your page – get it to generate a sample question with radio buttons.
- Fill out the other questions for your quiz, the radio button answers and the values for each answer.
- Work out the steps of the function that will compute the form and return the results based on the user’s clicked answers. Get help from ChaGPT.
Interactive Website: 10%
DUE: Feb 7
This assignment is designed to bring together your understanding of basic syntax, variables, conditionals, arrays, functions, and loops in JavaScript. The key objective is to create a dynamic website that allows for user interaction, resulting in changes on the webpage without altering the URL. It should have an effective visual design and thoughtful interaction design, but this is not intended to be a big project requiring extensive CSS design work.
Statement:
You must add a commented statement to your source code that lists the sequential steps in natural language (English!) before the code is written. Use JavasScript terms in your step descriptions. Statements should be at the top of the page’s source code, so use HTML comments <!–…–>
ChatGPT Assist:
You may use ChatGPT to help with this project (but it is not required!). Get it to produce HTML for you as that is time consuming. Use ChatGPT in any way that is useful to you as a student of programming. Ask it questions. Get it to help with working out the steps. Get it to help you write each step of the code. If you use ChatGPT you must summarize how you used it in your source code project statement.
YOUR STEPS:
- Conceptualize an Interactive Website: Think of an idea for a website where user interaction is central. It could be a simple game, a to-do list, a dynamic form, a quiz, or anything that involves user input leading to visible changes on the page.
- Sketch your idea. Get a visualization of how things are going to work. Storyboard what happens and when
- Describe Your Site Design to ChatGPT: With your website idea in mind, describe it to ChatGPT in detail, including:
- The layout and design of the website.
- Any unique features or media elements (like images, audio, animations) you want to include.
- ChatGPT will assist you in generating the HTML and CSS code for your website quickly.
- You will apply your own beautiful CSS design at the end!
- Detail the Interactivity and JavaScript Steps:
- Describe the interactive elements of your website. What happens when a user interacts with various elements?
- Outline the JavaScript steps required to make these interactions work, using programming concepts. Try to describe these steps in natural language, incorporating programming terms as best as you can.
- Scripting with ChatGPT’s Assistance:
- With the steps outlined, attempt to script each one. ChatGPT can provide hints or fill in gaps along the way, correct your scripts, and ensure you’re using programming concepts appropriately.
- The goal is for you to think through the scripting process, enhancing your ability to conceptualize and implement JavaScript code.
- Read the generated scripts and comments closely. Get to understand the logic of JavaScript.
SUGGESTED IDEAS FOR YOUR WEBSITE
- Interactive Quiz: A simple quiz where users answer questions, and get immediate feedback.
- Dynamic Media Gallery: A gallery where users can filter or sort images, sounds and/or videos – based on categories.
- To-Do List: A task manager where users can add, mark, and delete tasks.
- Customizable Timer: A timer where users can set and start a countdown for various activities.
- A Generative Art Work: Produce change on the page with random numbers and interactivity
- A Digital Art Work: Create dynamic displays of image, text, sound and/or video
- Branching Narrative: Design a simple interactive story, like on Twine