CS 1100: Web Development: Client-Side Coding

Part 1: Trace Code — Variables and Assignments

Write the value of variable a after executing each snippet of code. Each problem is worth one point, for a total of two points.

1. Value of a =

   function mystery(x) {
     let y = x + 1;
     return y;
   }
   
   let a = 1;
   a = mystery(a);
   

2. Value of a =

   let b = '5';
   let c = '2';
   let a = b + c;
   

Part 2: Trace Code — Statements

What is the result of executing each of the following snippets of code?

• If something is displayed, say specifically what is displayed.
• If a variable ends up with a value, explicitly say what it is.
• If anything else happens, say what happens.

Each problem is worth one point, for a total of three points.

1. Result:

   let border = 0;
   let margin = 10;
   if (margin/2 > 4) {
     border = 2;
   }
   else {
     border = 1;
   }
   

2. Result:

   for (let i = 0; i < 5; i++) {
     console.log(i);
   }
   

3. Result:

   let names = ['alice', 'bob', 'carol'];
   let s = '';
   for (let i = 0; i < names.length; i++) {
     s = s + ' ' + names[i];
   }
   console.log(s);
   

Part 3: Short Answer

Provide short answers to the following questions (at most one or two sentences each). Each question is worth two points, for a total of ten points.

1. We say that strings, arrays, and Math are objects. List the two kinds of things stored in an object that we can use when working with the object. Give an example of each.
2. What is a function? Why do we need them?
3. You have learned about two ways to attach an event listener to an HTML element. Give an example of each for attaching a function named react() to an element's click event.
4. You have learned how to create an array of elements from a string. List at least two new features of strings that we used in such code.
5. List two methods we can use to modify the attributes of an HTML element. Give an example of each for modifying an element named catImage.

Part 4: Write Code

For each question, write the requested code. Each question is worth five points, for a total of thirty-five points.

You may find some of these functions, methods, and properties useful:

• prompt() and alert()
• querySelector() and querySelectorAll()
• getAttribute() and setAttribute()
• innerText and innerHTML

Each solution is relatively short. Do not feel that you need to write a lot of code for any of the problems.

1. Write a loop that asks the user for a number smaller than 10, and keeps asking until the response is smaller than 10. At the end of your code, the variable choice should hold the answer.
2. Write a script that finds the HTML element with an id of request and adds these styles to the element:
   • changes the item's font style to italic
   • changes the item's left margin to 50px
3. Write a script that that modifies every element of an array named schools. Each element in the array is a string. Your script should replace each item 'x' with '<li>x</li>'.
   
   For example, if before your code schools contains

   ['Luther', 'Coe', 'Simpson', 'Central', 'Wartburg']
   

   then after running your script it will contain

   ['<li>Luther</li>', '<li>Coe</li>', '<li>Simpson</li>', '<li>Central</li>', '<li>Wartburg</li>']
   

4. Write a function named logInvalidBytes(arr). When users call this function, they will give it an array of numbers that your function will call arr. The\ function should log all array elements that are larger than 255.
   
   For example:

   > let bytes = [1, 260, 5, 233, 255, 256, 0];
   > logInvalidBytes(bytes);
   

   will write 260 and 256 to the console.
5. Define a function changeLink(linkNumber, url) that changes the destination of a link. linkNumber is the number of the link to change, and url is the new destination (a string).
   
   For example, suppose a web page contains 100 links. Calling changeLink(42, 'http://uni.edu') should change the 42nd link on the page to point to the UNI homepage.
   
   Hints:
   • This should work on any page, so we can't use CSS selectors like :nth-child(). Access all of the a elements to get the anchor tags.
   • The destination of a hyperlink is the value of its href attribute.
6. Consider the following simplified HTML:

   <body>
     <div id='request'>I want extra credit!</div>
   </body>
   

   Write a short script that enables the following: When the user clicks on the words "I want extra credit!", the page displays an alert saying "You got it!" Hint: You will need to create a one-line function as part of your code.
7. Define a function createOrderedList(items) that creates an HTML list element. items is an array of strings that will be the items in the list.
   
   For example, if courses equals ['CS 1100', 'CS 2100'], then calling createOrderedList(courses) will create and return an ol element with two list items, 'CS 1100' and 'CS 2100'.
   
   Hints:
   • You will need to add list items to a list element, but you will not add the list element to any other element. The function simply returns it.

That is all!