## TINKER - Javascript Part I
by Fanyue Shan, Heidi Halsted, Yukari Kimura
___
### Part 0 - Warmup - Definitely Maybe
* What do you think is the value of definitely?
* Is Jimmy going to the prom with Sally?
>
> 1 Step:
> ```
> function yes(no){
> return no();
> }
> ```
> 2 Step:
> ```
> function no(x){
> return 'yes';
> }
> ```
> 3 Step:
> ```
> function maybe(yes){
> return yes;
> }
> ```
>
> So finally the value of definitely is yes and Jimmy is going to the prom with Sally.
>
* How does this work? (Code, not relationships.)
> Like the steps I wrote above, all codes work from the innermost function in parentheses.
>
* When is the no function called?
> After:
>
> ```
> function yes(no){
> return no();
> }
> ```
> Which means after the first function from the innermost parentheses, it’ll return no function.
>
* On the line var definitely = maybe(yes(no)); there aren’t ()s immediately after no. What is the significance of this?
> For `var definitely = maybe(yes(no))`, the no here means a parameter, for the yes function. But if there’re `()`s immediately after no, it means the no function is called.
* Explain how this code snippet works, line by line, part by part.
* Be very specific
* Use important keywords
* Provide explanation of what each syntax detail represents as well.
>
> All codes work from the innermost function in parentheses. So it’ll call `yes(no)` function firstly, which will return `no()`;
> Then the function `no()` will be called, which will return a string “yes”, and the yes will be the new parameter. Finally, the function `maybe(yes)` will be called and the return will be the same as its parameter, so it’s yes!
* What does the ${} syntax represent?
> it allows for the introduction of a variable without concatenating. This is done using` ${var}` to add the variable string in-line to your current string.
> For example,
> `var z = Coffee is ${x}, Sugar is ${y}, Monday mornings are ${x}${y}.`;
> `var n = "Coffee is " + x + ", Sugar is " + y + ", Monday mornings are " + x + y + “.";`
> These two final values are the same.
* Why are template literals super useful for us?
> The great thing about Template Literals is that we can now create multi-line strings! In the past, if we wanted a string to be on multiple lines, we had to use the `\n` or new line character. With a Template Literal string, we can just go ahead and add the new line into the string as we write it. And omit complicated `“ ”, ‘ ’ and +.`
### Part 1
* 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?
> The only difference between the two versions is that the external style is gone in the simple version-this is due to the loss of Bootstrap and other CSS. But all functions are still available-the nature of the function has not changed. So Javascript is in charge of the core content of the web page.
>
> JavaScript makes HTML pages more dynamic and interactive, like for image manipulation, form validation, and dynamic changes of content, etc.
>
* What does the prompt function return?
>
> A prompt box is often used if you want the user to input a value before entering a page.
> When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value.
> If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null.
> So like the first “Hello unknown person.” Part, when you enter your name in the prompt box, it will return your name. Eg.
> ```
> setName called():
> firstName assigned to Selene
> ```
>
* Explain what you think the document.querySelector() does. Talk about this in terms of the functions vocabulary presented in the Notes.
> I guess it’s used to sent data to the screen and printed the specific “query selector” on the page somewhere.
> After I Googled, I realized it means getting the first element in the document with a specific class.
> eg.:` document.querySelector(“.example”);`
> It will get the first element in the document with `class=“example"`.
* If I told you that document.querySelector RETURNS something, what do you think that something is?
> Based on what I said above, and the example in the notes (“It probably sent data to the screen and printed “Hello” on the page somewhere. But it didn’t have a functional data output.”), the `querySelector()` method returns the first element that matches a specified CSS selector(s) in the document.
* How could you alter the printName function in order to print the users first and last name in the browser window tab?
> The HTML part shows
> `<button class="btn btn-default" onclick="printName()">Print Name</button>`
> So, by clicking the button, the printName function will be called.
* How would you use the makeFullName function to shorten the greetUser and printName code?
>
> My method is using the makeFullName function to replace `var displayName = firstName + " " + lastName`; and `var fullName = firstName + " " + lastName`;
>
> ```
> function makeFullName(first, last) {
> return first + " " + last;
> }
> ```
>
> So the shorten code should be:
>
> ```
> function greetUser() {
> alert("Hello " + makeFullName() + "!");
> printLog('#prePartOne', `greetUser called(): ${displayName}`);
> }
>
>
> function printName() {
> document.querySelector('#makeFullName()').textContent = fullName;
> printLog('#prePartOne', `printName called(): ${makeFullName()}`);
> }
> ```
### 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.
* Be sure to articulate both aspects of the HTML and JS.
> This program explains that HTML makes framework of webpage/application, and Javascript makes its functions.
* What kind of events are happening in Part 2 and explain how this relates to when the handlers will run.
> When input `Username` and `Email` and print them, they are displayed on the handler.
* What is event.target?
> Gets the element that is the source of the event.
* What does the dot .value, .textContent, .innerHTML represent in this context?
> Used to access the property. In the code, `event.target.value`, ``.value`` access for a method called “event.”
* Why does updateEmail have a parameter for event data but the other functions do not?
> `updateEmail` have a parameter for event to receive url information of email address.
* `resetInfo` is actually a little broken. Why?
> It should be `resetParttwo` not resetInfo because `resetPartone` and `resetPartthree` exist in Part1 and 2.
### Part 3
Play with the interface (each of the buttons) and observe how the program reacts. Take note of the printed INFO.
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.
> This program explains that HTML makes framework of webpage/application, and Javascript makes its functions.
* Compare and contrast the showImageData and showImageViaParent functions.
How do these two different functions achieve the same output?
> Both call the defined function, `printElementPartialData`.
* Compare and contrast the showParentData and showParentViaImage functions.
How do these two different functions achieve the same output?
> Both call the defined function `printElementPartialData`. There is the code, ``document.querySelector("#animalImageParent")`` in `showParentData`, but another one doesn’t. In `showParentViaImage`, ``var parentEl = document.querySelector("#animalImageParent")`` is substituted in the function, ``printElementPartialData(parentEl)``.
* 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.
The code is as below. Just need yo put 5 picture' links in to ""s.
```
> function changeImage() {
var imgs = ["", "", "", "", ""]
var imgEl = document.querySelector('#animalImage');
imgEl.src = imgs[getRandomInt(imgs.length)];
}
```
I searched how to do it and tried, but I could not solve the problem :crying_cat_face:
The found way I thought I almost solve this is
// Specify multiple image information in html
<img id=" "src=" "/>
//Get img element
var img = document.getElementById(" ");
//Image number to display
var idx = 1;
// Use function to switch images
function changeImage() {
idx++;
if (idx > 3) {
idx = 1;
}
```
> img.src=imgs[idx]
> }
> changeImage();
```
* Play with the Show This Button button.
What is the value of the property onclick of the button?
> The value of the property `onclick` of the button is transmitted data, function ``printElementPartialData(element)``.
### Part 4 - Challenge
---
* Explain the differences between `select`,`checkbox`,`radio`, `textarea` with regard to how we get the input values.
> `select` = dropdown box (get input values by referenceing `id` from HTML)
> `radio` = can only select one option (get input values by referencing `name` from HTML)
> `checkbox` = can select multiple options (get input values by referencing `id` and `input` type from HTML)
> `textarea` = openended written response box (do not need to create a function in JS for this to work)
* What is the importance of the name attribute, especially for radio buttons?
> The `name` attribute is drawn from HTML input and that value _"whichDrink"_ is used to call the function.
* Explain the significance of `e`, `banana`, `bananaEvent`, and `event`.
> `e`, `banana`, `bananaEvent`, and `event` are all parameters which are used to declare and define the function. These parameters are similar because they are all attached to a function. However, when called they all have a different output.
>
* Try tinkering with some of these functions to produce some diffent looking, behaving results in the results pane.
> I played around with adjusting how to respond to the questions. For example, I made it so `class="form-control"` in HTML, so the answer option for _which do you prefer?_ were in a drop down menu. Then I also created `checkbox` buttons for _what kind of coffee do you like?_. At first I thought I could get away with only adjusting the JS code, but quickly realized I had to adjust the `class` attributes in HTML as well.
* What is the STATE of the program?
> The particular condition that something is in at a specific time.
* What is the SEQUENCE of the program?
> a particular order in which related events, movements, or things follow each other.
* What is the CAUSALITY of the things in the program?
> Each rule in programming usually is tied to a SINGULAR result
### State
> We can start to grasp the potential of using variables to keep track of stuff.
>
> It is important to first pay attention to the State, meaning each element, variable, function, parameter, etc. to ensure they are correct, so one can then move on to make sure the order in which these variables are writte read properly.
### Sequence
* what if the user clicks on the SAVE button before they enter any text in the input?
> Undefined empty text is saved and displayed.
* What are the independent groups of code sequences (routines) in my program?
> Greet User and Print Name for Part 1, Print Info for Part 2, All buttons except reset for Part 3 and Save button for Part 4. These groups can work regardless of the Sequence.
* How will the STATES and EVENTS affect the SEQUENCE of the program?
> States and Events affect the sequence of the program to allow people to run programs in order.
### Causality
> Always keeping in mind this program routine of State, Sequence, Causality will help create a funtioning and interactive webpage for the user. As well as keep the code neat and properly working. Causality is the final ouput of one's code.
>
{"metaMigratedAt":"2023-06-15T09:24:12.086Z","metaMigratedFrom":"Content","title":"Untitled","breaks":true,"contributors":"[{\"id\":\"12da584c-3e77-4256-a84d-ca26a723431d\",\"add\":19579,\"del\":10196},{\"id\":\"c6c6e1de-c11b-4fbd-9bb4-210dd5a367f1\",\"add\":2236,\"del\":1177},{\"id\":\"80d5ede5-2b60-4fb9-bc99-5aab68b3bec8\",\"add\":2357,\"del\":119}]"}