JavaScript assignment

Some useful resources

• Some JavaScript tutorials
• The complicated resources in the You Don't Know JS series, including your reading last week
• A resource for CSS/style/colors
• An excerpt from a specific workshop site (for a different audience than yourselves) which addresses some common questions about jQuery
• The simple JSFiddle example from class
• A W3Schools resource on JavaScript output
• Google, Piazza, your classmates, office hours, lab time!

Included files

• This README.md, which you should edit with answers to the questions
• jsPracticeLab.html, which you'll need to edit and try out
• jquerylib_submit_example.html, which you'll need to edit and try out

Your goals for this lab

Broadly

The aim for this lab is to practice adapting to and understanding code in a new-to-you (or not) language and its own libraries/packages -- JavaScript, in this case.

The programming skills you have built up till now are useful for Python programming, but, more than that, they extend to fundamentals of many kinds of programming.

This experience is not in any way about becoming an expert JavaScript programmer. Instead, it is about using what you do have experience with -- and your skills in learning new things that relate to programming -- in order to make educated judgments about some brand new-to-you code, even if you haven't learned in detail about it yet. That's part of what being in technology -- or even technology-adjacent -- will often mean.

Specifically

Below are a bunch of questions and indications of things to do. For each indication of something to do with code, there is also an accompanying question to answer or brief explanation to give.

To complete and submit this assignment, you should:

• Fork (and clone) this repository
• Add our instructional team as a collaborator to your fork (see instructions for adding collaborators on Canvas)
• Edit this README.md file with answers to the questions/prompts, briefly, using Markdown formatting so that the questions appear in bulletpoints and the answers appear clearly below each respective question, not as bulletpoints.
• Add all names of those who worked on this (as indicated below)
• Make the changes that are indicated below to each of the .html files with JavaScript programs provided. (You'll probably do this concurrently with answering questions)
• Commit (as you go) and push your changes to all three files to your GitHub forked repository.
• Submit a link to your repository on Canvas. (This HW doesn't have an autograder -- it will be graded by hand/by humans this time.)

Important notes

• You are more than welcome to work together on this, but you must each submit a repo to be graded on it, so if you do work together, you should do the following:

  • Make sure each one of you understands all the work -- YOU are responsible for using and knowing this information
  • Write each person's name & uniqname who worked on the assignment together on your submitted README.md file (you'll see a space for this below)

• In answering questions, please make sure the formatting is clear to read and that you have updated the names of everyone who worked with you, with your name first (see below).

• In answering questions, assume all of the questions include a explain briefly note -- you do NOT have to, and should not, write extended paragraphs. Be as concise as you can and explain in your own words. Don't worry about "whether it's enough" -- just worry about conveying your understanding so you can read it later, or even give it to someone else, and the answers will help/make sense.

• It is not acceptable to copy and paste answers from the internet and submit them as your own. If you cite things, make sure you provide a citation, including to links. If you get information from a resource and rephrase it so you're basically explaining an idea, that's just fine for an explanatory purpose in this assignment, but you must cite any quotes or examples that aren't yours.

• For grading: we are grading on...

  • Following the instructions
  • Approximate correctness of the code edits
  • Careful & clear answers to the questions
  • Correct answers to the questions
  • Slightly more than half the 1000 points will come from answering the questions. The rest will come from your edits to the code.

Names of people you have worked with on this assignment

• List everyone's names and uniqnames who have worked on this assignment with you, including your own name, but make sure YOUR name is first and bold

• Mark Ramirez (marjosra)

• Katrina Shafer (kkshafer)

• Alexis Fintel (afintel)

• Maggie Foley (marfol)

Questions & code instructions

The first questions address the jsPracticeLab.html file.

• This is just an example question.

This is what an example answer should look like. If you want to include some code, which you probably don't have to do, you can, like this:

Some JavaScript code

• What does a code comment look like in JavaScript? What character/s do you have to put before a comment?

Code comments in JavaScript look similar to those in Python, however you must put // instead of # before the string to make it a comment.

• Explain what needs to happen to get a JavaScript program to "run", given the JavaScript you've seen in this assignment.

To get a JavaScript program to "run," all you need to do is simply open the file. This will prompt the computer to open it in a web browser, thus displaying the encoded information in a visual, more human-readable manner.

• What functions in JavaScript seem to be similar in function to the print function in Python? (There are two.) Why might you use one and not the other? Explain briefly.

The following functions and methods that are similar to the 'print' function in Python are:

alert() // Prints whatever is in the () to be visible in a pop-up box

console.log() // Prints whatever is in the () to be visible in the console

One would use alert() to have things explicitly alert the user in pop-up window or box, where others may use console.log() if they are doing investigation within a webpage with the console itself. GSI Zhen Wang helped me with this problem.

• What code would have to comment out to get rid of the pop-up box when you load the page? (Related to the last question.) Do that in the code file, and then, add code so that a text box will appear that contains the current date and time! HINT: Look through the rest of the code first...

One would have to comment out lines 12 and 13 to get rid of the pop-up box that appears when the page is loaded. I wrote the following code just after these lines to complete the second part of this question:

alert(Date())

• How can you put your own name at the top where it currently says "A name"? Explain very briefly how to do so, and replace A name in the web page with your own name.

Line 17 contains the following code:

document.querySelector('h1').innerHTML = "A name";

I would replace the current string "A name" with my name (which I have done), like so:

document.querySelector('h1').innerHTML = "Mark Ramirez";

• What does the word document represent in this code? Explain briefly.

The word document in this code is representing the page on which the information in the file jsPracticeLab.html is displayed. It allows for the constructions of the webpage's specifications. This ranges from displaying "A name" to specifying the color that the background of the webpage will be.

• What is happening in line 12 ( document.querySelector('#items').innerHTML = document.getElementsByTagName('li').length )? Explain, briefly (<= 2 sentences).

Based on the output on the page that jsPracticeLab.html generates, the above line is searching the document for all items and identifying the ones with the tag <li>. It is then counting the number of times these items appear, which is 9.

• What color would the background of this page be if there were no JavaScript in this page?

The background of this page would be white if there were not JavaScript written in this page.

• Why are there a couple of gray boxes on the screen with a different colored border? How could you edit this code to make them a different color? Explain briefly. Then edit the code to make those boxes some shade of blue, of your choosing.

The following code in jsPracticeLab.html creates gray boxes on the screen with a different colored border:

<style>
p{
	background-color: #b3b3b3;
	border: 3px solid #FFFFFF;
	padding: 3%;
	font-size: 1.1em;
	line-height: 1.5;
}
</style>

To change the color, I would edit the background-color and border values after the # (in the code, it is now 7094db).

• Edit the code so that, if you highlight McGill University and copy it, you see the text O Canada near the bottom of the page. Briefly explain why you made the edits that you did -- how did you know/figure out what to do?

The following line made it clear to me that it was responsible for making "Go Blue!" appear when copying "University of Michigan" on the actual page:

<li oncopy="copyFunction()">University of Michigan</li>

To make "O, Canada" appear when copying "McGill University", I made a similar function called candaCopy(). The following code proved to make this task a success:

function canadaCopy(){
	document.querySelector('#cheer').innerHTML += "O, Canada<br>"
}
<li oncopy="canadaCopy()">McGill University</li>

• In the original code, when you click the button that says Wow, you see a text box! Wow. Explain briefly in your own words why the following code causes that to happen:

function handleClick(){
	alert("hello");
}

and

<button onclick=handleClick() id="wow-button">Wow</button>

What kicks this whole process off is the presence of the tag <button>. The string "Wow" puts the text on the actual button, but it is in the onclick=handleClick() string in which the guts of this process lie. This allows clicking the button that says Wow to trigger the function within it to run, thus causing the line alert("hello") to run. This results in a pop-up box that says hello.

• Knowing what you learned from the previous question, add code/markup to the jsPracticeLab.html file so that there is a button with the text Spring Equinox 2019 on it somewhere on the page, and when that button is clicked, a text box containing the text March 20, 2019 appears. (There's no function -- that I am aware of -- to automatically get this info, you've got to type it yourself.)

I wrote the following:

function springDate(){
	alert("March 20, 2019");
}
<button onclick=springDate() id="spring-button">Spring Equinox 2019</button>

The next few questions address the jquerylib_submit_example.html file.

• Check out the file jquerylib_submit_example.html. This is an example of code that uses a package called jQuery (and this will need you to have an internet connection to run it properly, although the other file does not). Check out resources above for more on jQuery!

• When you enter input that isn't valid, you see an error that is red. Why is the error in red? Why is the response for valid inputs blue?

The responses for both successful inputs and inputs that yield an error due to the following code:

<style type="text/css">
    .error{
        color: red;
    }
    .good {
        color: blue;
    }
</style>

• What is this line var regex = /^[a-zA-Z]+$/; helping with? And if you googled something to figure that out, what did you google, and what, briefly, did you learn? (If you didn't need to google, you can leave that out, but explain briefly what that line is helping the program do, anyway.)

What I have discovered in my searching is that this line of code is making it so that certain expressions can only be characters a-z or A-Z. I googled the line var regex = /^[a-zA-Z]+$/ and came across a post on StackOverflow which can be found at https://stackoverflow.com/questions/3532053/regular-expression-for-only-characters-a-z-a-z, and learned that this string is regularly used in writing requirements or inputs in JavaScript.

• What's different about the syntax of conditional statements in JavaScript, compared to Python?

I have noticed several differences about the syntax of conditional statements in JavaScript compared to Python. The first thing that stood out to me is what is written to execute if the conditional is valid is enclosed in {} instead of :. Another interesting aspect of JavaScript conditional syntax is that the parameters for the statement to be valid is enclosed in () before the previously mentioned {}.

• What do you think the 10000 refers to in the code .fadeOut(10000)?

I think that the 1000 stands for a certain amount of time that the response that appears after entering a word or words stays visible before disappearing.

• What do you think is going on with the following code at the beginning of the program? Note that the most important thing to do for answering this question is to be thoughtful and clear, not to be absolutely correct:

I think that the following code is setting up the bulk of how this site runs. It appears that document establishes a page and things that come after it set the stage for whatever comes after the last {. function() seems to be the actual entity holding this bulk, where .ready() seems to make it execute.

$(document).ready(function(){
    $("form").submit(function(event){

• Add some code to the jquerylib_submit_example.html file so that, if the input is valid and is specifically the text hello, rather than the visible output being Nice! in blue, the visible output should be Hello to you too!, also in blue, just like Nice! is.
  • HINT: You'll have to make some changes to the conditional statement, and possibly look up some JavaScript conditional syntax. You'll also need to look carefully at what generates visible output right now.