# Thinker: Javascript Part I
## Part0

- What do you think is the value of definitely?
The value is "yes"
- Is Jimmy going to the prom with Sally?
Jimmy is going to the prom with Sally
- How does this work? (Code, not relationships.)
First run `yes(no)` and it returns `no()`, and `no()` returns 'yes'. Then we look at `maybe(yes)` which should return yes.
- When is the no function called?
It is called when the result of `yes(no)` returns.
- On the line `var definitely = maybe(yes(no))`; there aren't `()s` immediately after no. What is the significance of this?
It means that `no` is a parameter of function `yes()`, but not a function itself.
- Explain how this code snippet works, line by line, part by part.
Varaible defefinitely gets defined. It first calls the `maybe()` function with `yes(no)` as parameter. Because `yes(no)` is a function itself, so it calles `yes()` funtion with `no` as the parameter. This call returns `no()`, so it calls `no()` function which returns `yes`, so it parses `yes` as parameter into `maybe()` function, which returns `yes`.
- What does the ${} syntax represent?
The variable in `${}` bracket refers to the value of the predefined variable. The `${}` functions as a placeholder within the template literal.
- Why are template literals super useful for us?
This makes referring to the value of a variable much easier and formatted in a nicer way.

## Part1
- Click on the link at the top to view the index-simple.html version. Compare the HTML between this version and the Bootstrap version. Compare the JS between this version and the Bootstrap version.
- - How do these two versions compare with regard to helping you understand Javascript?
There is no difference between Bootstrap version and simple HTML version. This means that javascript works the same when the styling is different. Even when we use external html css templates, the javascript functions are the same.
- Play with the interface (each of the buttons) and observe how the program reacts. When tinkering, try changing the order in which you play with the interface. Take note of the printed history.
- Explain how this program works with regard to STATE, SEQUENCE, and CAUSALITY of each line, and/or specific parts of a line as appropriate. Use specific vocabulary, as demonstrated in the notes section.
- STATE
- The default state of `firstName = "anonymous"`. The default state of `lastName = undefined`.
- When user press setname the states are updated by the user.`firstName = userinput`, `lastName = userinput`.
- When user press reset, the state are updated by the system. `firstName = wonderful`,`lastName = walnut`.
- SEQUENCE
- User sets name.
`setName()` called. "setName called():" text is printed within the `#prePartOne` div in HTML. A prompt shows on the webpage asks for first name. Variabl `firstName` is set to userinput. "firstName assigned to (userinput)" text is printed within the `#prePartOne` in HTML. A prompt shows on the webpage asks for last name. Variabl `lastName` is set to userinput. "lastName assigned to (userinput)" text is printed within the `#prePartOne` in HTML.
- User presss greet user.
`greetUser()` called. Variable `displayName` is set to `firstName + lastName`. A message pops ot on webpage. "greetUser called(): `displayName`" text is printed within the `#prePartOne` in HTML.
- User press print name.
`printName()` called. Variable `fullName` is set to `firstName + lastName`. "printName called():`fullName`" text is printed within the `#prePartOne` in HTML.
- Reset
`resetPartOne()` called. Set `firstName` and `lastName`.
- CALSUALTY
By inputting a first and last name, the state of the program is changing. By clicking different buttons in different sequences, the sequence of the program is changing.
- How could you alter the printName function in order to print the users first and last name in the browser window tab?
`fullName = lastName = firstName`
- How would you use the makeFullName function to shorten the greetUser and printName code?
`fullName = makeFullName(firstName, lastName)`

## Part 2
- Play with the interface (each of the buttons) and observe how the program reacts. When tinkering, try changing the order in which you play with the interface. Take note of the printed history.
- Explain how this program works with regard to STATE, SEQUENCE, and CAUSALITY of each line, and/or specific parts of a line as appropriate. Use specific vocabulary, as demonstrated in the notes section.
The default STATE of the user is unknown person with no username and undefined email. The SEQUENCE requires that you first enter a username and email. By entering the username, the `#prePartTwo` div in HTML changes and prints text. By entering the email, the `#prePartTwo` div in HTML changes and prints text. By pressing "Print info", it reads from the input and the `#prePartTwo` div in HTML changes and prints text. By entering username and email, the STATE changes, and by pressing the buttons, the SEQUENCE changes.
- What kind of events are happening in Part 2 and explain how this relates to when the handlers will run.
The input handlers run when the input changes, the button handlers run when they are clicked.
- What is `event.target`?
The read-only `target` property of the Event interface is a reference to the object onto which the event was dispatched.
- What does the dot `.value, .innerText, .innerHTML` represent in this context?
`.value` is the value of the input. The `.innerText` and `.innerHTML` refers to the text inside of the printlog
- Why does `updateEmail` have a parameter for event data but the other functions do not?
You can also use`email = document.querySelector('#email').value;` It is just different ways to get value of the input.
- resetInfo is actually a little broken. Why?
It doesn't reset the global variables `username` and `email` in the javascript, so previous userinputs are still stored.

## Part 3
- Play with the interface (each of the buttons) and observe how the program reacts. Take note of the printed INFO.
Generally, this part allows you to see the data information of an image.The HTML of this part is first an image that is a child of a parent `div` whose `id`is "animalImageParent". Then below it is a set of `button` inside of grid system in bootstrap. When you `on click` each button, a specific javascript `function` will be called.
The JS is very complex. First the default STATE preEL and mysteryEL are set but never used. When `showImageData()` called, it calles the function `printElementPartialData` with the value in id `#animalImage` passed in. When `showParentData()` called, it calles the function `printElementPartialData` with the value in id `#animalImageParent` passed in. When `showImageViaParent()` called, it sets the parentEl to be the value in `#animalImageParent`, and the child[0] is the `#animalImage`. It then calles the function `printElementPartialData` with the value in id `#animalImage` passed in. When `showParentViaImage()` called, it sets the childEl to be the value in `#animalImage`, and its parentElement's id is `#animalImageParent`. It then calles the function `printElementPartialData` with the value in id `#animalImageParent` passed in.
- Compare and contrast the `showImageData` and `showImageViaParent` functions.
The `showImageViaParent` shows the data of the first child of `#animalImageParent`, which is `#animalImage`. So they are the same.
- Compare and contrast the showParentData and showParentViaImage functions.
The logic is the same as the previous question.
- Can you modify the related code so that each time you pressed it, it would show 1 of 5 images, cycling through to the next image per click?
You can write 5 divs of imgs containing information of each image, and use parent[id of the image] to change the image.
- The value is `showButtonData(event)`