TINKER - Javascript Part II

--- tags: mstu5003, tinker, js --- ## Group member: Tianyi Dong, Tai Ishikawa, Beikun Ma, Megan Henderson # TINKER - Javascript Part II  - See demonstration: https://codepen.io/jmk2142/pen/oGxwPQ - Tinker Markdown: https://hackmd.io/zJmA8GKJR5-Oe2Zy4r1wqw?both  ## Devtools You will also want to watch this video on the `console` as we will be using it extensively to Tinker this week. General Video on Console: https://youtu.be/GAqOggzH_GE?list=PLn93-yl6k7zUkSFNI8MQqmIVn017z8vKO One of the most important tools we'll use is the `DEBUGGER`. :::success **Debugger Demonstration and Youtube Video**  CODE: https://codepen.io/jmk2142/pen/RwZErre DEMO: https://cdpn.io/jmk2142/debug/RwZErre YOUTUBE: https://youtu.be/RdF7j4no0Ts ::: I recommend that at some point, you watch these demonstrations and use these tools to explore the Tinker. :::info In order to use `console.dir(object)` and see the object property/values, make sure your console setting is set to DEFAULT. ![](https://i.imgur.com/cmR16Mg.png) ::: ## Tinker GIST: TODOS > Good bye, "Hello World!" `Hello World` is probably the most common introductory program around as it's so simple. ```javascript= alert("Hello World!"); // Or alternatively... console.log("Hello World!"); ``` Unfortunately, it's not very useful. It doesn't really show the range of different programming concepts and to be quite frank, it's boring. Many beginners like us are interested in creating interactive applications and this requires a range of programming concepts. 1. HTML Elements 2. CSS 3. Variables 4. Operators 5. Functions 6. Control Statements 7. Events 8. Data Structures + Data (e.g. Arrays, Objects, Booleans, Numbers, Strings) And you really cant get a sense of how these things work together with a 1 line program like `Hello World!`. ### Enter TODOS Some clever programmer realized this and probably thought: > What's the simplest, _real_ program I can build that will incorporate all the important aspects of a basic interactive program? And the **TODOS** or **TODO LIST** program was born. The beauty of TODOS is that it has everything in a pretty simple package. It can be solved using a variety of different strategies and can be created to be _simpler_ or _more sophsiticated_ depending on ones needs. It tends to now be the defacto standard for demonstrating a full interactive application. Beginners AND advanced students alike build TODO apps as they learn new things. For example, our TODOS Tinker is designed to demonstrate the base JS concepts with a few _stretch_ challenges embedded in it. In my regular practice, when I have to learn a new library or framework, I will probably start by viewing an existing TODO app built with that specific library to see how that library works. Sort of like how you might compare a basic HTML page with a Bootstrap page (of the same content) to be able to compare and contrast the two. If you're interested, you can briefly look at [this page](http://todomvc.com/) which is an archive of the TODO application built in various different frameworks. And this is where I am hoping to take this class, the culmination of all the things we've been working towards - to understanding this first, real, interactive program and hopefully - you can apply some of these concepts in your own works. ## Tinker Tasks In this tinker, were going to: 1. Review prior concepts in this new context: - Variables, functions, events, and arrays 2. Observe, analyze, and study new concepts: - Control statements (E.g. `if`, `for`) - Logical operators (E.g. `===`,`&&`, `||`,`<`,`<=`,`>`,`>=`, etc.) - Objects (and `array` of `objects`) 3. Learn how to use more developer tools to study JS code - Source (i.e. debugger) - Console (i.e. `console.log`, `console.dir`) We will continue to observe, analyze and think about this program in terms of: > What is the STATE? > What is the SEQUENCE? > What is the CAUSALITY? ### Part 0: Conceptual Program Overview Play with the program and observe how it reacts to user interactions. - _Without_ talking about it in _programming terms_ explain the user observable steps/process of the following three interactions and how the program responds. - Adding a todo - user types something - hits enter or clicks Add - computer takes input value IF NOT NULL - computer makes to do item - Completing a todo - user clicks on item - computer registers item clicked on - changes styling from standard to strikethrough - computer adds to queue of items that can be removed - Removing a todo(s) - User select the tasks that they want to remove. - user clicks on "Remove" - computer takes values with strikethrough styling - computer deletes from list Be specific but imagine you are talking to a _non-programmer_. Think about this in terms of observable actions and reactions. > User puts toast in the toaster. Sets the length of the timer. Pushes the lever to start the toaster. The toast pops out the toaster after the time is completed and goes "DING". - For each of the interactions above write in _pseudocode_ the steps of how the program for that interaction unfold and results. Pseudocode is semi-formal structure to write out the gist of how your program would work. It uses some keywords but is largely language agnostic. There isn't a single correct way to do it but the following are some rules that can help. - RULES: - One statement per line - CAPITALIZE initial _keywords_ - READ, WRITE, IF, ELSE, REPEAT, UNTIL, AND, OR - Indent to show hierarchy and groups of operation - Keep statements language independent Pseudocode: - Add to do - user TYPE the input - Read user input - User hITS enter or CLICKS Add - EVALUATE if the value of textbox is empty or not - WRITE to do item - IF user complete todo - user clicks on item - computer registers item clicked on - changes styling from standard to strikethrough - computer adds to queue of items that can be removed - Removing a todo(s) - User select the tasks that they want to remove. - user clicks on "Remove" - computer takes values with strikethrough styling - computer deletes from list ``` # Making toast for a big family READ loaf of bread READ slice of loaf Put slice in toaster WRITE time to toast Start the toaster Cook the toast READ time WRITE time by one second less REPEAT UNTIL time is zero Remove toast REPEAT for all slices in loaf # Serving toast WRITE number of slices total READ number of family members READ toastiness IF toast is burnt AND (total slices >= number of family members) throw away toast decrement slices total ELSE serve toast to family member ``` Using your pseudocode, identify the function(s) in the actual JS code that relate to your pseudocode. - Compare and contrast your pseudocode with the actual code. - There are a lot more line items and specifications in the actual javascript code - Program begins with 'initializeToDo' function - Explain what similarities and differences you noticed about the instructions / steps / processes in the code vs. your psuedocode. - our pseudocode is very basic and there are many more steps and componenets to each in the actual code - Manipulate different parts of the code as you see fit. Why did you decide to manipulate that part? What happened? (More structured tinkering to follow.) - Changed value of "wake up" task in data variable to "false". This deleted everything added after landing on the page, refreshed to the basic to do list again. It also crossed off the item. ### Part 1: Variables, Functions, Arrays, and Events - Explain the `data` variable. - What does this data (and the data inside) represent conceptually? - Each of object of the array is a line item or thing to be done. They are tasks with three values each, id, name, and boolean value of whether its done or not. - If I wanted to access the second object, how would I do that in code? - data[1] - If I wanted to access the `done` property of the first object, how would I do that? - data[0].done.textContent; - Look through the rest of the code where this `data` array is used. When the user does things, am I manipulating the visual display and updating the data to reflect those changes? Or am I manipulating the data and updating the visual display to reflect those changes? - The data array is being directly manipulated rather than only manipulating what is visually displayed - Is this what you would have thought of? - No, and using the filter function wouldn't have been a first thought - What might be the significance of this program design decision? - It's clean, and won't get bogged down over time with thousands of crossed off to do's - What do these lines in my code do? ```javascript= var todosEl = document.querySelector('#todos'); var inputEl = document.querySelector('input'); var completedEl = document.querySelector('#counter'); ``` -defines the variables as they relate to the html code - Why declare these (see above) variables at the Global scope instead of in the functions? - it would be a lot more code, by defining initially you don't have to define throughout each function - Or not at all... (E.g. `document.querySelector('#todos');`) - this would repetitive and inefficient - The `toggleComplete` function has an event parameter. Inside the function I access `event.currentTarget`. What is the difference between `event.currentTarget` and `event.target` which we used previously? - Hint 1: You can add a `console.log(event)` etc. inside that function to test the value of `event.target` and `event.currentTarget`. - Hint 2: When testing, click on a todo to "complete" it. Click on two areas: the `li` as well as the `i` (font icon) element to see the differences. - Hint 3: You can pass multiple arguments to `console.log()`. I often pass two: first a string label, second the thing I want to log. This will basically make the logs easier to identify if you use `console.log()` a lot. - event.target returned the list item `<li></li>` that I'd pressed to mark as completed. - currentTarget is linked to where the listener is nested, which could be in a parent element. It returned an error as undefined when i used the console to display it in debug mode after trying to cross off the line item ```javascript= console.log("SOME LABEL: ", dataToLog); ``` - In the `toggleComplete` function, there is a `event.currentTarget.id`. Is that `id` the same thing as the id property in my todo objects in the `data` array? - No, it would be the html id of the element that has the listener nested into it (onclick or onchange). The id values in the data array are a made up title "id" for a number value representing a time stamp. - What does `!something` mean? (The exclamation mark) and how is it used in this code when we `toggleComplete`? - toggleComplete includes this line of code ` todoData.done = !todoData.done; ` which takes the done value of the object (boolean) and switches it to the opposite value (true to false, or false to true) - Try calling some of the functions directly from the console. Some will work. Some won't. - Explain what you find. - removeTodoItem(event) did clear any item that was crossed off - resetInput() did work to clear anything typed in the input field that hasn't been submitted - getTodoData(id) didn't work because id is not defined, we'd need to put in an id value from the data array itself. Running it with getTodoData(1497141891479) returns "null", but not undefined - Look at the function declarations in the JS panel. - _Where_ is each function being called? - they would be called in console.log() or inside other function. - _When_ is each function, actually called? - when we enter something to trigger the function. - What parameter(s) does that function have? - in function addToDoItem, we set the parameter as task. It could also be event or item. we just defind a function and enter a variable as parameter. - What is the argument that is passed into the function when it is called? - in function addToDoItem, we passed new input.El into the function, so we could add a new task in the to do list. The argument is actual variable we use. - Use the console (in Chrome devtools) to `console.log()` and `console.dir()` the following. What is the difference between `console.log` and `console.dir` and why is `console.dir` kind of more useful for looking at some kinds of data? ```javascript= console.log(data); console.log(todosEl); console.dir(data); console.dir(todosEl); ``` > when we use console.log() to output in the JS, we will only see the original outcome, the direct information. But when we use console.dir(), we will see all properties and contents of one object. > console.dir()show more complete structure and adequate information of data, we could inspect them more easily. ### Part 2: Objects and Arrays of Objects - Manipulate the different _properties_ of the _objects_ inside the `data` array. - Change all todo objects' `done` property to `true`. >All the checks on the UI is now checked - Change some of the task values. > The todo name on the UI has changed - Run your code and explain how this changes what you see and why. > Changing the task value and done boolean reflects on the UI because the data array is used in the functions. - `console.dir()` the `data` array. Goto the console and _OPEN_ the `> Array(3)` text by clicking on it. Go deeper by opening up the nested objects. Analyze what you see. Then add a new todo through the user interface. `console.dir()` the `data` array again and investigate the insides. - What is the difference between `data` before and after adding a new todo? > New object has been added to the array and the length of array is now 4. - Run the following code: ```javascript= data.push({ done: true, task: "Goto Aikido Lessons", id: getTimeStamp() }); console.dir(data); ``` - What did the code above do? > Push new object to the data array. - Does our page reflect the changes made? Why or why not? Prove it. > Yes, because if I manupulate the done value or task value, the UI immediately changes according to the change I made. - Does order matter in `Objects`? > Yes, it matters if the functions designate an object using the indices of the array. - What is the difference between `Object` keys (E.g. `done`, `task`, `id`) and `Array` indices (E.g. `0`, `1`, `2`)? > Array indices are efficient to use when we want to designate specific position of an object in the array no matter what value type it is. - How are they similar? > They all log "Code" in the console ```javascript= var myAry = [123, "Code", true]; var myObj = { id: 123, task: "Code", done: true } console.log(myAry[1]); console.log(myObj["task"]); console.log(myObj.task); ``` - Compare the following in the console: ```javascript= var element = document.querySelector('ul'); var author = { first: "Mark", last: "Twain" } var example = { theAnswer: 42, student: true, hobby: "Fishing", sayHello: function(){ alert("Hello"); }, favNums: [1,2,3], favAuthor: author }; console.dir(example); console.dir(el); ``` - What is an `element` really? > Element is a query selector which designate the ul tag in the HTML - How does our `element` relate in terms of similarities and differences to `example`? > Both element and example are variances. example has properties and values while element does not. element functions to substitute or manupulate the contents in the ul tag in the HTML. - If I wanted to call the function in the `example` object, how would I do that? Prove it. > example.sayHello(); - Try the following code in the console. How does dot notation and bracket notation differ and why would you want to use one or the other? > If the string is one word, you can use both dot notation and bracket notation, however if it were two or more words, such as "user name", you can only use bracket notation. ```javascript= var x = "username"; var user = { username: "happyCat" } console.log(user.username); console.log(user["username"]); console.log(user[x]); console.log(user.x); ``` - Identify various areas where the `.` object notation is used and explain the thing on the left side of the `.` and the thing on the right side of the `.` - E.g. `document.querySelector()` `document` is... `querySelector` is... - HINT: There are MANY choices here. > data.push(newTodo) data is a name of array and push is a method that add a new object in the end of the array. newTodo is a variance which is to be added to the data array. - In two areas of my code, I use what is called a `filter` function. It's a function that arrays can use like `list.pop()`, `list.push()`. - How does a filter function work? > The filter() method generates a new array consisting of all the arrays that passed the test implemented by the given function. - What is the significance of the function argument that is passed INTO the filter parameters? > The argument set the threshold of the filter - With regard to the function that is passed into the filter as an argument, that function must `return` a boolean or evaluate to a boolean. What is the purpose of this? > If boolearn is true, the array passes the filter and if the boolean is false, the array does not pass the filter. - What does the _filter function_ return? E.g. `var x = list.filter(...); // What was returned to x?` > An array that passes the filter designated by filter the function. - CAUTION: NOT the function argument that goes into the filter. - HINT: If you don't know, can you use console to "test" an idea out? - Does filtering an array _change_ the original array? > No, it does not. ### Part 3 Control Structures - I use the `if` statement in several places in this code. Explain why a conditional is necessary in: - `updateTodoItems` - `updateRemoveButton` - `onEnterKey` - `validateTask` - `addTodoItem` - `getTodoData` - HINT: You might want to `console.log` the boolean condition where you see the `if` statements to understand what condition we are evaluating. ```javascript= if (booleanCondition) { ... } console.log(booleanCondition); ``` - Comment on how the boolean condition works as there are many different examples. > - `updateTodoItems` > there will be several situationes. we could remove tasks or add a new task, and the to-do list should be different > - `updateRemoveButton` > we need to identify if the task is done or not > - `onEnterKey` > we need to identify if the user press the enter or not > - `validateTask` > the computer should filter the empty input and add some actual task > - `addTodoItem` > after we identify the input should be validated or not, we could add the new task. > - `getTodoData` > the computer need to know the input exist in the list or not, and then it could show the data of this element. - In this code, there are two kinds of `for` loops. The more traditional that looks like: ```javascript= for (var i=0; i < list.length; i++) { // CODE } ``` and a `for of` loop that looks like: ```javascript= for (item of list) { // CODE } ``` - How does a `for of` loop work?] > In the loop, we will repeat to inspect something until all item included has been present. and we only inspect the item in the code list. - What does the `item` represent? (It can be named anything: `x`, `item`, `thing` etc.) > it is the variable or elements which include in our code. - Why are `for of` loops convenient compared to the traditional `for`? > it could output all value and properties of one item, show more details. and it could delect complicated condition and logic to loop - For what purpose(s) do I employ a `for` or `for of` loop in this program? > we want to repeat to pass the variables in the list to the function, or we want to show the a myriad of elment in one function. the loop could be convenient to repeat do something. - On Facebook or Pinterest, or Twitter, how does a loop through data relate to the display of content? > when user enter some keyword to search for something, they could show use loop to show all related element or art works in one page by repeat to identify the value of elements and present suitable ones. ### Part 4 Specific Routines - Take a look at the `updateTodoItems`. Comment it out and replace it with this alternate, but functionally identical version. How does this function work and how do they relate / differ? ```javscript= function updateTodoItems() { todosEl.innerHTML = ""; if (!data.length) { var liElement = document.createElement('li'); liElement.innerText = "Nothing todo..."; todosEl.appendChild(liElement); } else { for (todo of data) { var liElement = document.createElement('li'); var iElement = document.createElement('i'); liElement.id = todo.id; liElement.onclick = toggleComplete; if (todo.done) { liElement.className = "complete"; iElement.className = "fa fa-check-circle-o"; } else { iElement.className = "fa fa-circle-o"; } liElement.appendChild(iElement); liElement.innerText = todo.task; todosEl.appendChild(liElement); } } updateRemoveBtn(); } ``` - Take a look at the helper function `getTimeStamp`. This function will return a number, in milliseconds, the current time stamp since January 1, 1970. - I call this when I create new todo items, what are some ideas as to why I might be using a timestamp for todo `ids`? - to perhaps distinguish from other line items with similar text. It could be not the text that makes it unique but the time entered. - Take a look at the incomplete functions `markAllComplete` and `updateItemsLeft`. - Can you complete these and add the functionality to this app? - yes, added the button and listener in html, and added function logic to javascript - todoData.done = !todoData.done; updateTodoItems();.. ### Part 4 Debugging, Tools Using the Chrome debugger (source) tool create breakpoints and watch the program execute line by line, part by part. Experience how this tool can give you insight into your program's _STATE_, _SEQUENCE_, _CAUSALITY_. #### Chrome Debugger - Set breakpoints at the following locations of your program - `function initializeTodos` - when refresh page this is also triggered - `function onEnterKey` - `function addTodoItem` - `function toggleComplete` - Use the `Step over the next function call` feature to watch how the program pauses during the _SEQUENCE_ of its routines. - This jumps the next function entirely, doesn't execute it - Use the `Step into the next function call` feature to watch how the program pauses during the _SEQUENCE_ of its routines. - This goes directly into the next function - What is the difference between `Step over` and `Step into` and how does this help you understand programs? - One skips over the next function and the other goes direclty to it and includes it. IF you step over, whatever logic is in that function would not be executed. - Use `Step into` until you've reached the line `var inputEl = document.querySelector('input');`. Should be highlighted in blue. - Highlight the variable `todosEl` on the line before it and `right click` on it. Select _Evaluate in console_. - What does the console print? - ITEMS HERE section of html - Highlight the variable `inputEl` on this highlighted blue line. - Why does the console say `inputEl` is undefined? - it is defined when something is entered by the user, nothing defined yet - When you step through your code, does the blue line represent code that is about to be executed or code that has already executed? How do you know? - about to be executed, after it moves away the values are shown to the right of what was highlighted in blue - What do you predict would be the console value of the variable `completedEl` on the next line if you _Evaluate to console_ at this point? - an array of the `<li>` that are crossed off - its a counter embedded in the remove button that counts the number of line items that are "done" - Watch how debugger annotates your source code with the updated _state_ of different variables as your program progresses. - How does the debugger behave when you enter a loop in your program? - It jumps through the loop as many times as there are variables or list items for it, then exits - How does the debugger behave when you reach the a `filter` function call? - it just flashes on whatever is in the bracket after the filter function x number of times, representing the number of times the filter applies. In the case of the updateRemoveButton() function, this is the "return" line item - What does filter do and how does it work? - It's like an embedded if then statement that parses out an array into a subarray where the value specified is true for certain criteria of the filter ### Part X: Putting all together **Explain the program line by line with sufficient details, part by part.** :::success - Line by line - Part by part - Be sure to copy blocks of code into this markdown using code formatting/fences as references to your explanations. - For repetitive code, you can explain how a line works then summarize how it would work for the rest. ::: **HTML** - <!DOCTYPE html>: Declares the typye of the programming language. - <html lang="en">: English is used for all the text on the page. - <head> </head> : Contains the metadata of the page. - title : Contains the title of the page. - <link rel="stylesheet" : Import relevant predefined materirals from Bootstrap. - body: The main content of the HTML doc. - h1: The biggest heading. - id: Spcificy a name for a value. - div class: Classify a division for later use. - button on click: Special effects from importing the boostrap. - href: Target to a new link. - onclick: If you click something, the javascript executes it. - onkeypress: If you press something from the keyborad, the javascript exectures it. **CSS** - font family: Defines the font of the html. - padding: Generates the space around elements. - font size: The actual size of the words. - cursor pointer: Produces special effects when mouse is point over an element. - text decoration line through: The special effects that a line cuts through the texts. **JS** - Var: Declares a variable in JS. Var data predefines certain elements and booleans in the UI, the VAR data section make sure there always will be something on the page whenever the user refreshes the page to give a demonstration. - Document.querySelector: Returns the first Element within the document. - Function: Reuseable methods to call upon - function initializeTodos() { updateTodoItems(); }：Marks the initialization of the sequence. - function updateTodoItems() { var todosHTML = ""; for (todo of data) { if (todo.done) { todosHTML += `<li id="task-${ todo.id }" class="complete" onclick="toggleComplete(event)">`; todosHTML += `<i class="fa fa-check-circle-o"></i>`; // Font-awesome } else { todosHTML += `<li id="task-${ todo.id }" onclick="toggleComplete(event)">`; todosHTML += `<i class="fa fa-circle-o"></i>`; // Font-awesome }：first set a variable to an empty string, then use control statment to make hypothesis regrading whether completing the task. - function updateRemoveBtn() { var completedTodos = data.filter(function(todo){ return todo.done === true; }); completedEl.textContent = completedTodos.length; if (completedTodos.length) { completedEl.parentElement.disabled = false; } else { completedEl.parentElement.disabled = true; } }: the filter method creates a new array, if the data satisfied the desired condition, they will be in a new array. It also updates the disabled condition for the program. - function onEnterKey(event) { if (event.code === "Enter") { addTodoItem(); } }: test if the user press the "Enter" key, if so, then add a value to the todolist. -function validateTask(task) { if (task !== "") { return true; } else { return false; } }：validates whether the task is true or false and add a text in a new line if there is something to add; - var newTodo = { id: getTimeStamp() }; newTodo.task = inputEl.value; newTodo.done = false; data.push(newTodo); updateTodoItems(); resetInput(); } function toggleComplete(event) { var todoID = parseInt(event.currentTarget.id.replace('task-','')); var todoData = getTodoData(todoID); todoData.done = !todoData.done; updateTodoItems(); }: The function here complets the todo list by replacing the old elements with the new ones and pushs new elements in the array. - function removeTodoItem(event) { var incompleteTodos = data.filter(function(todo){ return todo.done === false; }); data = incompleteTodos; updateTodoItems(); }: The remove function removes the old completed task by applying the filter function which will return a new array that updates the todo list. function resetInput() { inputEl.value = ""; } function getTodoData(id) { var todoFound; for (var i=0; i < data.length; i++) { if (data[i].id === id) { todoFound = data[i]; // var indexAt = i; break; } } if (todoFound) { return todoFound; } else { return null; } } : The gettododata function uses the for controls the flow to check if there is or will be any new data and returns null if it finds none. function markAllComplete() function updateItemsLeft() The last two functions in the end have their respective meanings. The first one checks if all the items are complete and the latter checks how many items are left uncompleted. **Make it yours (group's)** :::success - Try to extend this program to do something cool, as a group, your own original idea(s). - What is something that a Todo list or todo list user might benefit from? ::: The Todo list significantly boost the efficiency of the user by listing out all the things to help them get a clear mind of what's coming. The users will also feel accomplished and motivated when crossing the lines in their todo list.