Order Description

 

 

 

What follows is a series of tasks for you to perform using your own computer and a series of follow-up questions for you to answer. What you will be submitting, and graded upon, are your responses  to the provided questions. Presumably, in order to compose those responses, you will have previously completed the described tasks.

 

The objective of this assignment is to give you a chance to ease into actually using and exploring JavaScript. You will be asked to utilize the environment you established on your computer in completing the previous assignment and an online JavaScript “sandbox” in order to implement some basic JavaScript programs and experiment with them.

Your development environment

In the previous assignment, you were asked to install and experiment with some browsers and text editors.

 

1. (1 point) Briefly describe the environment within which you are completing this assignment. In particular, tell me which browser and text editor you have decided to use and on which platform. Include specific version numbers.

 

A simple JavaScript program

Near the end of chapter 1 in the book is a section entitled “Your Second JavaScript Program” that contains the source code for a short program. Implement and test this program (including the accompanying HTML document) on your system. Note that the HTML file provided in the book is missing its first couple of lines for brevity, but you should add them to your version so that you end up with a valid HTML5 document. When you are done implementing the program as it appears in the book, take three screenshots (or photos of the screen) showing three different states of the resulting HTML page (that is, one image of the page for each of the three different background colors). Name these files ch01a , ch01b , and ch01c with whatever extension is appropriate to the image type.

1. (1 points) Submit the three image files representing the requested screenshots.
2. (3 points) What happens if you move the script element into the head element of the HTML document? Check the browser’s console and explain the error message that you find there. Be sure you tell me what’s causing the error; I do not just want you to rephrase the error message in your own words!
3. (4 points) Modify the program so that there are two script elements, one, that references a file named body.js , in the original position at the bottom of the body and one, that references a file named head.js in the  head . Start with both of these JavaScript files the same as the one in the book but experiment with them to determine the maximum amount of the original code that you can put in  head.js while keeping the program functioning without errors. When you are done, you should have all of the code from the original JavaScript file split among the two new JavaScript files without any duplication of code between them. Submit the contents of your  head.js and  body.js (with an indication of which is which) and briefly explain your theory as to why the code ends up split in this   particular way.

 

When you are done, you will have two separate JavaScript files for this step that between them contain the same code as the original single JavaScript file. Some of that original code will be in one, the rest in the other. Your task is to figure out how much of the code you can safely move into the JavaScript file referenced in the head of the HTML document and what you must leave    in the other JavaScript file so that the program still runs without errors.

 

Quiz Ninja

 

 

The code presented in the book (and most other books for that matter) won’t necessarily always work the first time you type it in. Often, you will find that you’ve made typos that prevent it from  running, and occasionally you may find that even though you’ve typed it exactly as it appears in the book, the code is either incomplete or contains bugs or browser incompatibilities. In the past,    some students have found this aspect of the assignments frustrating, since they feel like they are spending time fixing someone else’s problems. But that’s actually one of the primary reasons I ask you to implement the Quiz Ninja project! Fixing errors in someone else’s code tends to occupy a large percentage of a professional programmer’s time, and it’s a skillset you’ll need to develop sooner or later. For this reason, I encourage you to take the time to type the code in yourself and fight your way through the obstacles. Many books (including this one) provide code archives for readers to download, but you will learn much more by typing things yourself and working through whatever problems happen to arise as a result. So stick with it through the frustration and keep reminding yourself that you are learning something valuable through the experience!

 

The book uses a project named Quiz Ninja, which is discussed and expanded at the end of each chapter, in order to illustrate many of the concepts it covers. While it is relatively simplistic, it is generally a good idea to actually enter and run the code presented in the books you will read as a web developer. Often, things arise during that experience that are not explicitly covered in the book but are extremely important to the depth of your learning.

 

 

 

The CSS file contains a rather lengthy URL which would be tedious to type yourself, therefore, I have provided it here for you to copy and paste when needed:

 

https://cdn.rawgit.com/alexmwalker/6acbe9040d9fe6e5e9fd758a25e1b2a5/raw/9c8131eb2ccc1e3839a5a5114cb16b5dc74daf04/dojo.svg

 

 

It’s not a requirement, but you are strongly advised to reformat the book’s code as your enter it. In the interest of fitting things more easily onto the book’s pages, the author cuts a fair number of corners when formatting his code. If you do not take the opportunity to reformat that code into a clearer form as you enter it, the decision will likely come back to haunt you later in the course when you need to expand and debug that code!

 

For this assignment, follow the guidance in the Quiz Ninja sections at the ends of Chapters 1 and 2 to implement the first two phases of the Quiz Ninja project on your computer. In completing phase one, add your full name (last name first) to the content of the title element. Retain the use of your name at the start of the title for all subsequent work on the Quiz Ninja project.

main.js with the three lines indicated at the end of Chapter 2; do not add them to the existing code. That is, your phase two solution should only produce two dialog boxes, not three.Produce your screen shots for phase one before moving on to phase two (or create phase two using a separate set of files). And when completing phase two replace the single alert invocation in

Note that in some browsers the alert dialog may appear against the background of an empty browser window (rather than in front of the completed backdrop as illustrated in the book). While this would not be desirable for a production site, it is fine for our current purposes. As such, you do not need to address this issue at this time, as long as the completed backdrop appears once the alert dialog has been cleared by the user. At the completion of each phase, take a screenshot (or a clear photo) of the resulting test screen (which should look very similar to the figures in the book). Note that two screenshots will be needed at the end of each phase. At the end of phase one, you will need one screenshot that shows the alert dialog and another that shows the completed page unobstructed by the alert dialog. Using whatever extension is appropriate to the image type, name the first of these files quizninja_ch01_alert and the second  quizninja_ch01_page . At the end of phase two, you will need one screenshot that shows the question being asked and one that shows the user’s response being presented to them. Name these files quizninja_ch02_question and quizninja_ch02_response , respectively.

Since there is no way to control the labels on the buttons in a confirm() dialog, you should simply treat the OK button as a true response and the Cancel button as a false response.

When you have completed the second phase (and generated the associated screenshots), modify the results to add a second question to the quiz (that appears after the first question’s answer has been displayed). This second question should be a true/false question; it should be presented to the user using the   confirm() function/method; and it should display the user’s response as the word   true or    false . Once you have it working, take two more screenshots, one showing the question being asked and the other showing the user’s response. Name the screenshot files quizninja_ch02_tfquestion and quizninja_ch02_tfresponse (again, using whatever extension is appropriate for the image type).

 

 

1. (11 points) Submit six image files representing the requested screenshots.

 

The point of the questions in this section is to get you started understanding how this type coercion works with respect to Boolean values. Below are several values and the results of coercing each to a Boolean value. Examine the contents of the list closely and use it when answering the questions that follow.

1. 1. 0 coerces to false

b. +0 coerces to false

1. -0 coerces to false
2. 1 coerces to  true
3. 2 coerces to  true
4. -1 coerces to  true
5. -2 coerces to  true
6. "" (an empty double-quoted string) coerces to false
7. '' (an empty single-quoted string) coerces to false
8. `` (an empty backtick-quoted string) coerces to false
9. " " (a double-quoted string consisting of a single space) coerces to true
10. ' ' (a single-quoted string consisting of a single space) coerces to true
11. ` ` (a backtick-quoted string consisting of a single space) coerces to true
12. "0" (a double-quoted string consisting of a zero) coerces to true
13. true coerces to true
14. false coerces to  false
15. "true" coerces to  true
16. "false" coerces to  true
17. null coerces to false
18. undefined coerces to false
19. NaN coerces to false
20. [] (an empty array) coerces to true
21. "five" coerces to true
22. 5 coerces to true

 

1. (3 points) Do these results coincide with your understanding of the rules for Boolean type coercion in JavaScript? What, if any, aspects of these results seemed inconsistent with that understanding?
2. (3 points) How do these results correspond to your knowledge of Boolean conversion rules in other programming languages? What, if any, differences do you see? Be sure to make it clear what other language(s) you are referencing.
3. (1 point) Explain the results for (q) and (r).

 

Soft and hard equality

JavaScript has two different forms of equality, soft equality and hard equality. Soft equality is represented by the == operator (remember that the = operator is used for assignment, not equality!) and hard equality is represented by the === operator. Understanding the difference between these two forms of equality can help you avoid (and/or more easily identify) bugs that may arise in your code.

When you use hard equality, JavaScript compares the two operands directly, without applying any type coercion. When you use soft equality, JavaScript will attempt to coerce the data types of the operands in order to make their values equal, returning false only when it finds that it cannot do so successfully. To explore the potential impact of this, examine the contents of the lists below closely and use them when answering the questions that follow.

 

 

Soft equality

 

sa.  0 == false is   true sb.  "" == false is  true sc.  '' == false is  true sd.  [] == false is  true se. NaN == false is false sf. NaN == true is  false sg. NaN == NaN is false

sh. null == false is false

si. undefined == false is false

sj. 5 == 5 is true

sk.   5 == "5" is  true

sl. 5 == "five" is false sm. 5 == false is false sn. " " == 0 is true

so. " " == "0" is false sp. "0" == false is true sq. "1" == true is  true sr. "2" == true is false ss. 2 == true is false

st. "true" == true is false

su. undefined == undefined is true

sv. null == null is true

sw. null == undefined is true

sx. +0 == -0 is true

 

 

Hard equality

 

ha.  0 === false is   false hb.  "" === false is  false hc.  '' === false is  false hd. [] === false is  false he. NaN === false is false hf.  NaN === true is  false hg.  NaN === NaN is   false hh. null === false is false

hi. undefined === false is false

hj. 5 === 5 is true

hk.   5 === "5" is  false

hl. 5 === "five" is false hm. 5 === false is false hn. " " === 0 is false

ho. " " === "0" is  false hp. "0" === false is false hq. "1" === true is false hr. "2" === true is  false hs. 2 === true is false

ht. "true" === true is false

hu. undefined === undefined is true

hv. null === null is true

hw. null === undefined is false

hx. +0 === -0 is true

 

 

1. (5 points) Pick another programming language with which you are familiar (presumably the one you studied in the programming prerequisite for this course). Perform similar experiments using the equality operator(s) of that language and write a brief summary of your results and how they compare to the JavaScript results shown in the lists above, focusing in particular on results that differ. Be sure to tell me the language to which you are comparing JavaScript.
2. Study the algorithm described under the heading “About Coercion” on the following page: http://webreflection.blogspot.com/2010/10/javascript-coercion-demystified.html before responding to the following questions:
   1. (2 point) How does the algorithm explain the results for (sd)?
   2. (2 point) How does the algorithm explain the results for (sn)?
   3. (2 point) How does the algorithm explain the results for (so)?
   4. (2 point) How does the algorithm explain the results for (sp)?
3. (4 points) Notice that the second list demonstrates comparisons of the same pairings of operands as the first list, just using the strict (or hard) equality operator instead of the soft equality operator. Also notice that most of the results in the second list are false . For (hj), (hu), (hv), and (hx), explain why the result is true .
4. (1 point) What can you conclude by comparing the results of (sw) and (hw)?
5. (1 point) What can you conclude from the results of (se), (sf), (sg), (he), (hf), and (hg)?

 

Exploring the fringes

While they don’t often factor into real-world programming scenarios, there are some rather unusual behaviors at the fringes of JavaScript, and in this section you’re going to explore some of them. Use your preferred JavaScript console to complete the following tasks and then answer the corresponding questions.

 

1. (3 points) Evaluate the expression 7 + null . What result do you get? What does this tell you about how JavaScript interprets the value of null ? Do you feel this is consistent with the result of (q) in the “Data types” section above? Why or why not?
2. (3 points) Evaluate the expression 7 + undefined . What result do you get? What does this tell you about how JavaScript interprets the value of undefined ? Do you feel this is consistent with the result of (p) in the “Data types” section above? Why or why not?
3. (3 points) Evaluate the expression 7/0 . What result do you get? How does this result compare with your experiences in other programming languages? How does this result compare with standard mathematical understanding of attempting to divide a value by zero? Can you think of an alternative value for this expression that might be more consistent with the standard mathematical practice?
4. The largest positive value that JavaScript can represent is 1.7976931348623157e+308 .
   1. (1 point) What value do you get if you take the largest positive value and evaluate it with the 7 that appears just before the e changed to an 8 ?
   2. (2 points) What value do you get if you evaluate an expression that adds 1e292 to the largest positive value? Mathematically, this should be the same as changing the 7 that appears just before the e in the largest positive value to an 8 , yet the result is different. Why do you think this is the case?
   3. (2 points) What value do you get if you evaluate an expression that adds 1e291 to the largest positive value? Why do you think this result differs from that you observed previously in completing

(b) above?