- 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!
- This
README.md
, which you should edit with answers to the questions jsPracticeLab.html
, which you'll need to edit and try outjquerylib_submit_example.html
, which you'll need to edit and try out
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.
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.)
-
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.
- Chenrui Shu (crshu)
- Shi Lu (lushi)
- 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?
Double forward slash " // " is used to put before a comment.
- Explain what needs to happen to get a JavaScript program to "run", given the JavaScript you've seen in this assignment.
JavaScript runs with HTML and CSS in most cases. To run the JavaScript code, first we need to put the code in the < script > tag. Then we could open the html file in a browser to run the program.
- 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.
In JavaScript, alert
and console.log
are sililar in function to the print
function in Python. I might use console.log
, because this function would not jump out in front of the web page as alert
function does. We could check the console to see the results and would not influence the users' experiences.
- 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...
The code below should be comment out to get rid of the pop-up box when we load the page.
alert("hello");
Then the code below is added so that a text box will appear that contains the current date and time.
alert(new 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.
Change the value for the variable from document.querySelector('h1').innerHTML = "A name"
to document.querySelector('h1').innerHTML = "Chenrui Shu"
- What does the word
document
represent in this code? Explain briefly.
The word document
represents the whole HTML document object.
- What is happening in line 12 (
document.querySelector('#items').innerHTML = document.getElementsByTagName('li').length
)? Explain, briefly (<= 2 sentences).
The right hand side caculates the number of <li>
tag used in the HTML document, and the left hand side shows this number in the element with id = "items"
in the HTML document.
- What color would the background of this page be if there were no JavaScript in this page?
The color for the background would be white if there were no JavaScript 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.
Because the background color is set to be #b3b3b3 by using background-color: #b3b3b3
and the border color is set to be #FFFFFF by using border: 3px solid #FFFFFF
, so their color are designed seperately and diffferently.
Change the value after background-color:
in the code could change the color of the background and also change the value after border:
in the code could change the color of the broder.
- Edit the code so that, if you highlight
McGill University
and copy it, you see the textO 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?
This function is similar to the Go blue
function already did for University of Michigan
. We could add a copyfunction2
which selects the <div>
element with id = cheer
to add the text O Canada
every time when the McGill University
is highlighted and coped. Meanwhile, we added a oncopy="copyFunction2()"
attribute to the <li>
tag of McGill University
.
- 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>
Every time we click the Wow botton, the function handleClick
would be called. In the handleClick
function, the alert
function is further called and therefore a text box says hello
would pop up.
- Knowing what you learned from the previous question, add code/markup to the
jsPracticeLab.html
file so that there is a button with the textSpring Equinox 2019
on it somewhere on the page, and when that button is clicked, a text box containing the textMarch 20, 2019
appears. (There's no function -- that I am aware of -- to automatically get this info, you've got to type it yourself.)
Please check the jsPracticeLab.html
for the added code.
-
Check out the file
jquerylib_submit_example.html
. This is an example of code that uses a package calledjQuery
(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?
Because the color is set in the <style>
tage. We see that in the code, the error is set to be red and the good input is set to be blue.
<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.)
This line helps to check if the input is one word. I googled regular expression
and I learnt that the regular expression is a sequence of charaters and could help to define a search pattern.
- What's different about the syntax of conditional statements in JavaScript, compared to Python?
In JavaScript, the condition is stated inside parenthesis and the blocks of code after if
or else
condition to be executed are inside curly brackets. However, for conditional statements in Python, no parenthesis nor curly brackets is used, a colon is used after if
or else
condtion instead.
- What do you think the
10000
refers to in the code.fadeOut(10000)
?
The 1000
refers to the time for the text to fade out.
- 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:
$(document).ready(function(){
$("form").submit(function(event){
The first line is executed when the HTML document is succefully loaded and the second line is executed when the form on the HTML document is submited.
- Add some code to the
jquerylib_submit_example.html
file so that, if the input is valid and is specifically the texthello
, rather than the visible output beingNice!
in blue, the visible output should beHello to you too!
, also in blue, just likeNice!
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.
Please check the jquerylib_submit_example.html
for the added code.