TINKER - Javascript Part II

--- tags: mstu5003, tinker, js --- # TINKER - Javascript Part II Group 3 - Bayan Masarwa, Danqing Yang, Zhiyin Wang, Jinny Park, Isabel Carpenter-Zehe  - See demonstration: https://codepen.io/jmk2142/pen/oGxwPQ - Tinker Markdown: https://hackmd.io/zJmA8GKJR5-Oe2Zy4r1wqw?both - Group 3: https://codepen.io/yjp2110/collab/xxzaGKJ  ## 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 Jinny - > When ading another to do list, the newly typed todo list gets stacked at the very bottom of the lists of the todo life. - > The above action can be completed without clicking on the "add" button by pressing the enter key. - Completing a todo Zhiyin - > The color of the words became grey; the words became italic; the words were crossed out; a tick appeared in the circle; the number of remove increased by 1; When the task is the first one to be removed, the background color of the block represneting the numfer of removed turned organge - > there is a function that count the number of tasks removed > Maybe something changes from false to true > maybe a change in class which leads to the change of styles of the words - Removing a todo(s) Bayan - > When clicking on an item on the ToDo List, the Remove button changes color to red. - > then when clicking the Remove button, the clicked item on the ToDo List is removed form it. 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. - Izzy - 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 ``` - Using your pseudocode, identify the function(s) in the actual JS code that relate to your pseudocode. > The pseudocode uses js conditionals, such as if/else statements - Compare and contrast your pseudocode with the actual code. > Both the pseudocode and the actual code follow logical steps of progression - Explain what similarities and differences you noticed about the instructions / steps / processes in the code vs. your psuedocode. > The code ususes more structured grouping (in objects) where the psuedocode follows logic but doesnt use objects as much - 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.) > I decided to try to delete the function to remove a task after completing the todo. This did not break the web app completly but did remove that function ### Part 1: Variables, Functions, Arrays, and Events - Explain the `data` variable. - What does this data (and the data inside) represent conceptually? - >The `Data ` variable is an array that continues three objects; each object has with three properties `of, task, and done.`. The first property is a number, the second is a string, and the third is a boolean. - If I wanted to access the second object, how would I do that in code? - > console.log(data[2]); - If I wanted to access the `done` property of the first object, how would I do that? - > console.log(data[1].done); - 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 is being manipulated to reflect the chanhes to it. - Is this what you would have thought of? - > This is not the answer I would of thought of, I thought that it would have been through the visual display - What might be the significance of this program design decision? - > If it is only the data that is manipulated then it can be more efficiently changed in the future with updates - What do these lines in my code do? ```javascript= var todosEl = document.querySelector('#todos'); var inputEl = document.querySelector('input'); var completedEl = document.querySelector('#counter'); ``` - > The first line is line is defining `todosEl` to perform the action in the HTML part using the id `#todos` the inpute will be displayed there. - > The second line assigns `inputEL` so we can manipulate the input in the HTML - > The thirs line is line is defining `completedEL` to perform the action in the HTML part using the id `#counter` the inpute will be removed when clicking `onclick="removeTodoItem()"` . - Why declare these (see above) variables at the Global scope instead of in the functions? - Or not at all... (E.g. `document.querySelector('#todos');`) - > when declared in the global scope it provides a borader use for these variables. So whenever we need to call `todoEL, inputEL, and completedEL` all we need to do is add the varibale that is already declared in the globel scope to the right place we need. - 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); ``` - 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 its the same id as the property in the todo objects in the data array. Since `the toggleComplete` function removes data so it needs to have the same id to do the added id data from the object. - What does `!something` mean? (The exclamation mark) and how is it used in this code when we `toggleComplete`? - > The toggle removes existing data from an object and returns false. If the data is not there, its added, and the function returns true. the ! will return the opposite. ! logic returns the opposite boolean. - Try calling some of the functions directly from the console. Some will work. Some won't. - Explain what you find. - Look at the function declarations in the JS panel. - _Where_ is each function being called? > inputEl.value - _When_ is each function, actually called? >When the html uses signifiers such as onkeypress= or onclick - What parameter(s) does that function have? > they have parameters such as onEnterKey(event) or addTodoItem() - What is the argument that is passed into the function when it is called? > The value of the parameter - 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); ``` ### 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. >When the value of the property `done` is changed into `true`, the html class attribute `complete` would be add to the element `li`.Therefore, the default style for a newly added task will be gray italic and crossed by a line. - `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? >Text `> Array(3)` turns to`> Array(4)`, the length of the array changes into 4 and there are four objects in the array after adding a new todo. - Run the following code: ```javascript= data.push({ done: true, task: "Goto Aikido Lessons", id: getTimeStamp() }); console.dir(data); ``` - What did the code above do? >Add another new object into data array. - Does our page reflect the changes made? Why or why not? Prove it. >Yes. >![](https://i.imgur.com/mxriT7K.png) - Does order matter in `Objects`? >Yes. The index of the object would change if we change the order of an object. - What is the difference between `Object` keys (E.g. `done`, `task`, `id`) and `Array` indices (E.g. `0`, `1`, `2`)? >An index would be a integer starting from 0. It identifies the element by its ordinal position in the array. A key is always a string which identifies an element in the array "by name." - How are they similar? >They will all return the string "Code". ```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? >It's `ul#todos` here. It represents an HTML element in JS. - How does our `element` relate in terms of similarities and differences to `example`? >`example` is an object, which is a collection of properties, or we can say key-value pairs. While `element` is an HTML `element` which also a collection of properties but only has methods and properties inherit from document itself. - If I wanted to call the function in the `example` object, how would I do that? Prove it. >`example.sayHello()` >![](https://i.imgur.com/7tmKWif.png) > - 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? >![](https://i.imgur.com/cI9CMxw.png) >I prefer to use dot because dot notation is much easier to read than bracket notation. But there are many limitations on dot notation. For example, the property identifiers cannot start with a number or contain variables. ```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. >For `console.log(user.username)`, `console.log` is a method which would output a message to the console. `user` is an object.`username` is the object's property name. - 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 function creates a new array contains the elements that pass a function argument. - What is the significance of the function argument that is passed INTO the filter parameters? >The function would test every element in the array. - 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? >The filter function need a boolean to return an object or not. - 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? >A new array contains all the elements that pass the function argument. - Does filtering an array _change_ the original array? > No. It doesn't. It will create a new one. ### 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. - >The conditions check the state of something and do some actions according to the state. For example, `updateTodoItems` checks the whether`done` is true, and add modify the inner HTML by adding different classes to the element, so that we can modify the visual representation by changing classes. The `updateRemoveButton` uses if statement to check whether there is something selected to be removed, and disable the remove button when nothing is selected. `onEnterKey` detects whether the enter key is pressed on. `validateTask` uses if statement to check whether the task enter is empty, and only update the list when the task entered is not empty. `addTodoItem` uses if statement to filter out empty input (avoid adding empty tasks into the list). `getTodoData` uses if statement to check whether a task is in the list according to an id. - 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? - What does the `item` represent? (It can be named anything: `x`, `item`, `thing` etc.) >The`for of` loop loops through every item of the list and do somthing to every item.`item` represents every item in the list. - Why are `for of` loops convenient compared to the traditional `for`? > We do not have to go through th whole process of setting up the loop.(initializing `i`, the lenghth, and the interval) - For what purpose(s) do I employ a `for` or `for of` loop in this program? >`for` loop is useful when we want to loop through sepecific items (such as odd/even number) by setting the interval between the loop. On the other hand,`for of` loop is helpful when we want to loop through every item in the list. - On Facebook or Pinterest, or Twitter, how does a loop through data relate to the display of content? >It uses a `for of` loop to loop through every item in the post list to print out the post according to a format. ### 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? ```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(); } ``` >The new function first checks whether there is item in the list using an `if` statemtks whether the task list is empty. This is because the new function targets directly at the `className`, but the old function modifies the `innerHTML`. - 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`? > `getTomeStamp` function returns as number that represnet the current time, and since it is impossible to simultaneously create 2 tasks in our function, it gives a unique id to each task. - Take a look at the incomplete functions `markAllComplete` and `updateItemsLeft`. - Can you complete these and add the functionality to this app? ```javascript= function markAllComplete() { for (let todo of data) { todo.done = true; } updateTodoItems(); } ``` ```javascript= function updateItemsLeft() { let textEl = document.querySelector("p") let leftCount = 0; for (todo of data) { if (todo.done === false) { leftCount++; } } textEl.innerHTML="You have " + leftCount + " tasks left." }; //function called in the updateTodoItems() function but outside its for loop. ``` ### 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` ![](https://i.imgur.com/JnU8zaG.png) >setting up the breakpoints at the following locations of the program prevents the code to be executed.For example, adding the breakpoint at `function addTodoItem` will not allow me to addTodoItem and no action will be shown on the result page. When I refresh the page, I got the paused in debugger sign. >![](https://i.imgur.com/O77FpGe.png) - Use the `Step over the next function call` feature to watch how the program pauses during the _SEQUENCE_ of its routines. >`Step over the next function call` allows the program to step over to the next function in the sequence of a routine. For example, If `Step over the next function call` applied to the `function addTodoItem`, it will not addTodoItem. ![](https://i.imgur.com/ggxKoZv.png)However, This is what I got on screen. - 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? > From my understanding the difference between `Step over` and `Step into` are that the step over allows me to step over a sequence into the next function whereas, the step into allows me to step into the sequence of the function. Below is what I got from hitting the step into button ![](https://i.imgur.com/XA6EVNX.png) - 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? > I have pushed`Step into` several times I did not reach the line `var inputEl = document.querySelector('input');` and no line was highlighted in blue. I am not sure where and what I am missing. The console didn ot print anything. ![](https://i.imgur.com/AlwPL1H.png) - Highlight the variable `inputEl` on this highlighted blue line. - Why does the console say `inputEl` is undefined? - 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? - 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? > There are no highlighted blue line for me to input the steps listed above. - 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? - How does the debugger behave when you reach the a `filter` function call? - What does filter do and how does it work? > From trying at different panel other than the Todo List, from my understadning, when I enter loop in my program, the debugger provides the console of the all the sequence happeed. I am still in the porcess of understadning the filter function. ### 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. ::: **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? :::

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.