# **Tinker Javascript Part I**
* Group members:
Jiawen Zheng, Qihuan Zhang, Yuki Qu
* Google Doc URL: https://docs.google.com/document/d/1DalHhvjOWuiuG9z--37xakA_jwm5q_JOKIJo1fE9hDg/edit
## **Articulate**
- What is the STATE?
* Yuki: When nothing entered by users, how the surface looks like. The initial value of the code/variable.
- What is the SEQUENCE?
* Yuki: Active function? How users manipulate. Like clicking, dragging, typing.
- What is the CAUSALITY?
* Yuki: The relationship between cause and effect. When click/ gave a certain order, how the system response.
## **Part 0**
- **What do you think is the value of definitely? Is Jimmy going to the prom with Sally?**
* Yes.
- **How does this work? (Code, not relationships.)**
* Start from `maybe(yes(no))`, we first run line 1 `yes(no)`, and it returns `no()`. Before it returns final result, `no()` is called and line 4 runs and returns "yes". So in line 2, it actually returns "yes". So line 10 becomes `maybe("yes")` and we begin run line 7, and it returns "yes". So definitely is declared and assigned "yes".
- **When is the no function called?**
* On line 2 inside the “yes” function
- **On the line var definitely = maybe(yes(no)); there aren’t ()s immediately after no. What is the significance of this?**
* This means no here served as an argument/ choice instead of a function being called. It does not need to return anything back (?). If it has a (), the code here should be the result of `no()` but not the whole code
- **Explain how this code snippet works, line by line, part by part.**
* Variable `x` equals to the string variable “bitter”; variable `y` equals to the string variable “sweet”; variable `z` equals to the string variable `“Coffee is ${x}, Sugar is ${y}, Monday mornings are ${x}${y}.” `
- **What does the ${} syntax represent?**
* ``${x}`` has the same meaning as `` + x + ``, so it’s concatenating the literal (string) with the variable `x` and `y`.
- **Why are template literals super useful for us?**
* It helps us to put different variable (the value, not only the variable name) into the string instead of messing up.
## **Part 1**
:::info
**Parts 1-4: Breaking it Apart**
It might help to start by forking the codepen into four separate pens. And for each pen, reducing/removing all unused code, i.e. both HTML and JS for that part, so that all that remains are the functional ones for that part to work. (There is a reason why I don't do this for you...)
Reducing what is visually in front of you can greatly help you to focus on the bits that are relevant to the sub-problem at hand.
Note that `printLog()` is utilized across multiple parts.
:::
- **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?
- HTML between index-simple vs. Bootstrap
- Simple version does not have CSS, instead, it used ``<style>`` in the HTML part to format the canvas.Bootstrap version has the CSS part for formatting.
- Both of the versions using ``<meta charset="UTF-8">`` in their ``<head>`` parts. *[ UTF-8: The Unicode Consortium develops the Unicode Standard. Their goal is to replace the existing character sets with its standard Unicode Transformation Format (UTF)]*
- Bootstrap using `container` class every time before typing some content in.
```htmlmixed=
<h1>Tinker: JS <small><a href="https://codepen.io/jmk2142/pen/zEqzjp"
target="_blank">Jump to Simple Version</a></small></h1>
</div>
```
* The way of using button class are different:
* Bootstrap:
```htmlmixed=
<button class="btn btn-default" onclick="setName()">Set Name</button>
```
* Simple:
```htmlmixed=
<button onclick="setName()">Set Name</button>
```
* History for both are written in the same format.
* JS between index-simple vs. Bootstrap
* The JS for both simple version and Bootstrap version are very alike.
* **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.
- Be sure to articulate both aspects of the HTML and JS.
- What does the `prompt` function return?
- The prompt function returns a first name and a last name
- Explain what you think the `document.querySelector()` does. Talk about this in terms of the functions vocabulary presented in the Notes.
- If I told you that `document.querySelector` RETURNS something, what do you think that something is?
- The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.
- How could you alter the `printName` function in order to print the users first and last name in the browser window tab?
- How would you use the `makeFullName` function to shorten the `greetUser` and `printName` code?
## **Part 2**
- **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 SEQUENCE of this part is that the user needs to enter a username and email and then press the print the info button to show the specific updated info.
The first function is `updatedUsername` and the id is `#username`. When user inputs their name, their updatedUsername will appear in the print log. The second function is `updateEmail`. It will go over the same procedure that when user inputs their emails, their updated email will appear in the print log. The next function is `printInfo`. When user click on the print info button (HTML), the input username and email will be grabbed and it will appear in the print log. The last function is `resetInfo`. When user click on the reset button, it will clear the print log while leaving the word history.
The CAUSALITY is if the user does not input any info but press the print button, “no username - undefined” will be printed. However, if the user inputs the username and email, the page will have an update username with the new info. And then when the user presses the print button, their updated info will appear.
What kind of events are happening in Part 2 and explain how this relates to when the handlers will run.
The `document.querySelector('#username').value` in the `updatedUsername` function means that Javascript will goes to the onchange attibute in html section and select the elements with the id username . And then the content will print in the print log. Same for the updateEmail function.
The `The document.querySelector('#userInfo').innerHTML `in the `printInfo` function means that Javascript will goes to the onclick attribute in the html section and work with the button to handle the event. So when user clicks on the print info button, the username and email will be printed.
- **What is `event.target`?**
The variable email is declared by event.target and then passed to the print log to print.
- **What does the dot `.value`, `.textContent`, `.innerHTML` represent in this context?**
The `.value` represent the username that user inputs.
The `.textContent`, `.innerHTML` represent the text that appears in the print log. But the `.innerHTML` add html features to the text.
- **Why does updateEmail have a parameter for event data but the other functions do not?**
I’m not sure why there must have a parameter for event data. I tried to delete it and it works fine.
- **`resetInfo` is actually a little broken. Why?**
Because after user reset the info, if they click print info, the previous history will print again.
## **Part 3**
- **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**: var `preEl` = `document.querySelector`('#prePartThree');
var `mysteryEl` = document.querySelector('body');
**SEQUENCE:**
1. User clicks the show image data button
change element triggered
`showImageData()` called with element data passed in as argument
`showImageData`routine begins
`ImageData` state is sent to HTML showimage data element
`showImageData` routine ends
2. User clicks on the showParentData button
click element triggered
`showParentData()` function is called
`showParentData()` routine begins
`ParentData` state is sent to the HTML showparentdata element
`showParentData`routine ends
3. User clicks the Show Image Data via Parent button
click element triggered
`showImageDataViaParent() `function is called
`showImageDataViaParent()` routine begins
`parentEl`state is sent to the HTML parentEl via document.querySelector.
`childEl` state is sent to the HTML childEl via parentEl property of children.
`showImageDataViaParent()`routine ends
4. User clicks the show Parent Via Image button
click element triggered
`showParentViaImage()` function is called
`showImageDataViaParent()` routine begins
`childEl`state is sent to the HTML via document.querySelector('#animalImage');
`parentEl` state is sent to the HTML parentEl via childEl property of parent.
`showParentViaImage()` routine ends.
5. User clicks the show button data button
click event triggered
`showButtonData()` called with event data passed in as argument
`showButtonData()` routine begins
`partialData` state is sent to the HTML parentEl via event property of target.
6. User clicks the change image button
Click element triggered
`changeImage()` function is called
`changeImage()` routine begins
partialData state is sent to the HTML imgEl via document.querySelector('#animalImage')
`changeImage()` routine ends.
7. User clicks the reset part three button
click element triggered
`resetPartThree()` function is called
`resetPartThree()` routine begins
partthreestate is sent to the HTML via document.querySelector('#animalImage') and document.querySelector('#prePartThree').
`resetPartThree()` routine ends.
CAUSALITY: If the user doesn’t click on the buttons of show image data, show image data via parent, show parent data via image, and show this button data, there will be no info appearing. The same thing applies to the buttons change image and reset. If the user doesn’t click on those buttons, the image will stay the same.
- **How do these two different functions achieve the same output?**
Because the document of those two functions are both `#animalImageParent`, which makes the output appear to be the same.
- **How do these two different functions achieve the same output?**
Because the document of those two functions are both `#animalImage`, which makes the output appear to be the same.
- **Play with the Change Image button.
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?**
There are several ways to solve this.
I changed the order of links of images in `var imgEl`.
Play with the Show This Button button.
- **What is the value of the property onclick of the button?**
The value is `showButtonData(event)`
## **Part 4 - Challenge**
- **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.
Be sure to articulate both aspects of the HTML and JS.**
**STATE:**
var selectEl = `document.querySelector`('#coffee');
var radioEl = `document.querySelector`('[name="whichDrink"]:checked')
var checkboxEls = `document.querySelectorAll`('#coffeeTime input[type="checkbox"]:checked');
var times = [];
for (var checkboxElement of checkboxEls) {
times.push(checkboxElement.value);
var textareaEl = `document.querySelector`('textarea');
textareaEl.value = "";
var `realTimeStoryEl` = `document.getElementById`('realTimeStory');
`realTimeStoryEl`.innerHTML = "No Content";
`realTimeStoryEl`.nextElementSibling.textContent =
**SEQUENCE**:
User selects from preferences and makes choice from querySelector('#coffee').
User clicks the checkbox to choose coffee time from the value [name="whichDrink"].
User types in text ,updateComment() called with event data passed in as argument. UpdateComment routine begins. InputElement is set to the HTML input element, via event property of target. Comment is set to the text, via the value property of inputElement. updateComment routine ends
**CAUSALITY**: If user doesn’t make choices among the preferences in checkbox and doesn’t put in the reasons, there will be no info sent to HTML input element and database.
- **Explain the differences between select, checkbox, radio, textarea with regard to how we get the input values.**
All of them are HTML attributes that collecting information from users.
**Select** : offers a drop down and asks users to select their ansers.
**Checkbox** : click on buttons to show their options (multiple answers allowed)
radio : the user click to select one of the options
**Textarea** : the user type their answer in the blank and click save button
Each time those events happened, the js function is called.
- **What is the importance of the name attribute, especially for radio buttons?i**
Name is a HTML attribute. The JS function need to refer back to the radio buttons elements with the `name="whichDrink"` and to pass the value to the document.querySelectorAll() function.
- **Explain the significance of e, banana, bananaEvent, and event.**
**How are they the same and how are they different?**
- **Try tinkering with some of these functions to produce some different looking, behaving results in the results pane.
Explain what you tinkered with and what the results were.**
Google Drive
Gist
Clipboard
Sign in with Wallet
