TINKER - Javascript Part II

--- tags: mstu5003, tinker, js --- Mariana Lederman, Marcelo Falciano, Lexuan Li, Jiayu Li # 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 - Completing a todo - Removing a todo(s) 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". **Answer:** > Users will write on the blank box what they want to add to their TODO List. Then the user press `Add` button. The task that they registered will appear on the TODO List. After completing the task, they can press the task they want to cross from the list. If they click on the `Remove` button, the completeds tasks will disappear. - 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 ```markdown= # 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 ``` ```markdown= # Adding a task on TODO List READ write a task on blankBox WRITE task on blnkBox IF press addButton add task to the todo list ELSE nothing happen ```markdown= #Completing a task on TODO List and removing it CLICK on the task you have completed CHECK on the circle of completed tasks CROSS the task completed IF click on remove button task disappear ELSE nothing happens ``` - 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. - Explain what similarities and differences you noticed about the instructions / steps / processes in the code vs. your psuedocode. The function itself is really more extensive and complicated that pseudocode. Althought they do have the same structure. The use of IF/ELSE is how the code was structured to determine what is or not happening at each step. - 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.) We decided to play around with true and false. As we change, the code stops working since they are one connected to the other. For example, on line 57, if we change the true/false, the add button disappears, and the remove button stops working. ### Part 1: Variables, Functions, Arrays, and Events - Explain the `data` variable. - What does this data (and the data inside) represent conceptually? The data is an object and inside it are their properties. - If I wanted to access the second object, how would I do that in code? write on the console: data[1] ![](https://i.imgur.com/dI0Eben.png) - If I wanted to access the `done` property of the first object, how would I do that? on console write: data[0].done; ![](https://i.imgur.com/eH32zbX.png) - 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? - Is this what you would have thought of? - What might be the significance of this program design decision? The `data`is used through all the code when you need to recall all of the objects that are part of the data. So, data is part of the function `updateTodoItems`, `updateRemoveBtn`, `toggleComplete(event)`, `removeTodoItem(event)`, and `getTodoData(id)`. This decision makes it easier to select all the objects you must change since you can incorporate news and remove objects that were there at the beginning. - What do these lines in my code do? ```javascript= var todosEl = document.querySelector('#todos'); var inputEl = document.querySelector('input'); var completedEl = document.querySelector('#counter'); These lines select the `todos`, `input`, and `counter`. So they are global variables that can be used in any function. - Why declare these (see above) variables at the Global scope instead of in the functions? - Or not at all... (E.g. `document.querySelector('#todos');`) Because you need to be able to change them as you add/remove tasks. - 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. ```javascript= console.log("SOME LABEL: ", dataToLog); ``` The `event.currentTarget` makes visible in which element the event was attached. While the `event.targt`tell us where the event started. - 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? - Yes. Because that is how is possible to update all to-do items. - What does `!something` means? (The exclamation mark) and how is it used in this code when we `toggleComplete`? According to w3school, when you use! before something, it means NOT. So would be `todoData.done` is false. - Try calling some of the functions directly from the console. Some will work. Some won't. The functions that we were able to call from the console were: Date.now() and getTimeStamp(). Each one of them results in an ID. The others just show "undefined". - Look at the function declarations in the JS panel. - _Where_ is each function being called? Mostly from JavaScript and the buttons off add/remove items from HTML - _When_ is each function, actually called? initialize tool event enter key - What parameter(s) does that function have? event parameter validate task. there are different parameters in each task. - What is the argument that is passed into the function when it is called? - 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); ``` The console.log() displays the string of an object, while the console.dir() dispplays a list of properties of an object. ### 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`. - Change some of the task values. - Run your code and explain how this changes what you see and why. `Answer: changing the done property will make a strikethrough on the list's item. Besides that, changing the task value also changes the content, because data has been manipulate.` - `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? `Answer: A new object has been added to the orginal array.` - Run the following code: ```javascript= data.push({ done: true, task: "Goto Aikido Lessons", id: getTimeStamp() }); console.dir(data); ``` - What did the code above do? `Answer: It adds new information, in the case is a task in the todo list.` - Does our page reflect the changes made? Why or why not? Prove it. `Answer: Just the console data shows the added task in the array.` - Does order matter in `Objects`? `Answer: Definitely, it will display the exact order defined in objects. ` - What is the difference between `Object` keys (E.g. `done`, `task`, `id`) and `Array` indices (E.g. `0`, `1`, `2`)? `Answer: The first one (Array indices) refers to data stored using subscripts. The second one (Object key) refers to data stored using property. - How are they similar? `Answer: We can extract information in a easy manner. However, they have different goals.` ```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(element); ``` - What is an `element` really? `Answer: It is part of the html code.` - How does our `element` relate in terms of similarities and differences to `example`? `Answer: While *example* returns the value of a specific object, *element* returns the underlying information of object` - If I wanted to call the function in the `example` object, how would I do that? Prove it. `Answer: we could use the console.dir(example.sayHello) for that` - 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? `Answer: The Bracket notation would set better in the “username” compared to Dot notation. It pulls the string.` ```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. `Answer: Console is the place where log is printed. the log(example.example) displays the indexed path of the object.` - 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? `Answer: Filters help to create new arrays. These arrays will contain elements that match certain conditions to the function work.` - What is the significance of the function argument that is passed INTO the filter parameters? Answer: The array filled with all elements that pass the function's test.` - 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? Answer: The function will only return those elements determined to be true. Second, it will add the elements to a new array.` - What does the _filter function_ return? E.g. `var x = list.filter(...); // What was returned to x?` - 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? `Answer: It will return the array's elements considered to be true in a new array.` - Does filtering an array _change_ the original array? `Answer: No, it doesn't` ### Part 3 Control Structures - I use the `if` statement in several places in this code. Explain why a conditional is necessary in: - `updateTodoItems` `Answer: It is used to determine complete/incomplete.` - `updateRemoveButton` `Answer: To remove if the completed todo is true.` - `onEnterKey` `Answer: We aim to run the function addTodoItem() if there is an event of Enter` - `validateTask` `Answer: True will be returned, if validateTask is not blank.` - `addTodoItem` `Answer: If validateTask works, it is to input a todo item` - `getTodoData` `Answer: To return the data and add to the tasks.` - 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. `Answer: removeTodoItem() applies the filter() function that returns values from other function.` - 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? `Answer: It defines a repeating process for the conditions in the function.` - What does the `item` represent? (It can be named anything: `x`, `item`, `thing` etc.) `Answer: It represents the property s value.` - Why are `for of` loops convenient compared to the traditional `for`? `Answer: It is simple to code and easier to unsdertand. - For what purpose(s) do I employ a `for` or `for of` loop in this program? `Answer: for loops would go through the code a number of times.` - On Facebook or Pinterest, or Twitter, how does a loop through data relate to the display of content? `Answer: It is applied to the timeline of such apps.` ### Part 3 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? If there is no data, the list element is created with "Nothing to do.." text and if there is data/task, the list element is created with the id of the task set on the list element, and an event listener is added on the element whereby when it is clicked it marks it as complete. If the task is done the list element is given class complete which strikes through the task, italicizes it, and gives it a font color of grey. Also, class "fa fa-check-circle-o" from font awesome is added to that adds a marked circle to the task. If the task is not complete/done, the circle from font-awesome remains unchecked/unmarked with default styling i.e, not italics, no strike-through, and a default color of black. It updates the tasks to the parent elements in the document body which is `<ul>` tags. Remove button functions is then called which checks if the task is done, it is activated and the user can remove complete tasks from the list if not it remains disabled ```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`? Because the value generated is different each time as milliseconds pass by therefore different values are generated for each new tasks `id ` no matter how fast the user enters new item - Take a look at the incomplete functions `markAllComplete` and `updateItemsLeft`. - Can you complete these and add the functionality to this app? ### 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` - `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. - Use the `Step into the next function call` feature to watch how the program pauses during the _SEQUENCE_ of its routines. - What is the difference between `Step over` and `Step into` and how does this help you understand programs? Step over runs the function calls in the breakpoints only while step into runs each piece of the functions and where there's a loop it runs the part until the loop is satisfied each time giving the results at that specific state. step over helps in understanding how the function is being executed and the results of each execution, while step into helps in understanding how parts of a function is is being executed and seeing the states of each part of the code. - 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? The console prints `ul` tag with `id` of `"todos"` - Highlight the variable `inputEl` on this highlighted blue line. - Why does the console say `inputEl` is undefined? Because it has not yet been executed. - 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? The blue line represents code that is about to be executed because if you highlight that code and hover over it gives undefined. - 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? It would be `undefined` since the code has not been executed yet. - 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 goes through the code until the loop is complete each time giving the results of the complete execution of one item before moving into another item. - How does the debugger behave when you reach the a `filter` function call? It checks if done key in the todo returns true for each item in the data until the loop is complete. - What does filter do and how does it work? It generates new array of elements that satisfy a test provided by a function in the filter() method. ### 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. ::: ```javscript= var data = [ { id: 1497141891479, task: "Wake up", done: false }, { id: 1497141913701, task: "Eat breakfast", done: false }, { id: 1497141937545, task: "Learn code", done: true } ]; ``` Define array for input in the html section ```javscript= var todosEl = document.querySelector('#todos'); var inputEl = document.querySelector('input'); var completedEl = document.querySelector('#counter'); ``` Retrieve element for easy selection ```javscript= ``` ```javscript= function initializeTodos() { updateTodoItems(); } ``` Define function to trigger `updateTodoItems()` function ```javscript= 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 } todosHTML += `${ todo.task }`; todosHTML += `</li>`; } if (todosHTML === "") { todosHTML = "<li>Nothing todo...</li>"; } todosEl.innerHTML = todosHTML; updateRemoveBtn(); } ``` Clear the todosHTML element. Loop through `data` array. If the child is not finised, add it to the todosHTML as item unfinished without tranverse line, otherwise as finshied item with tranverse line. Print out in the todosHTML in the end. If there is nothing to do, print out `<li>Nothing todo...</li>` ```javscript= 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; } } ``` Select items whose `todo.done` is true. If there is finished objects, change the value of item that is parent to todo element into false; otherwise true. ```javscript= function onEnterKey(event) { if (event.code === "Enter") { addTodoItem(); } } ``` Trigger `addTodoItem()` when Enter key is pressed ```javscript= function validateTask(task) { if (task !== "") { return true; } else { return false; } } ``` If the task text is not empty, change its value into true, otherwise false. **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? ::: Easily used and managed, it can enhance organization, increases productivity, and provides motivation.

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.