CS 1100: Web Development: Client-Side Coding

Function 1: Logging Arrays

Write a function named log(array). When users call this function, they will give it an array of values that your function will call array. The function displays each item in array to the console, one per line.

For example:

let strArray = ['Eugene', 'sez', 'good job'];
log(strArray);

will display this in the console:

[Log] Eugene
[Log] sez
[Log] good job

Hints for starting:

• Use the standard for statement for looping over the elements in a collection.
• Inside the loop: Use console.log() to display the value of the current item.

Function 2: Preprocessing Strings for a Page

Write a function named addDollarSign(numArray). When users call this function, they will give it an array of numbers that your function will call numArray.

Have addDollarSign() return numArray after changing each element to be a string with $ followed by the number in the array.

For example:

> let arr = [1, 2, 3, 4];
> addDollarSign(arr);
["$1", "$2", "$3", "$4"]
> arr
["$1", "$2", "$3", "$4"]

Hints for starting:

• Use the standard for statement for looping over the elements in a collection.
• Inside the loop: Use an assignment statement to change the value of the current item to be a string of '$' plus its current value.
• After the loop: return the value of numArray.

Script 1: Highlighting List Items Based on Content

Write a script that loops over all of the li list items in a web page. If a list item contains the string 'element', the script:

• changes the item's font size to '20px'
• changes the item's background color to 'cyan'

For example, see that the list item that contains 'element' is styled, while the others are not:

Hints for starting:

• Use the standard querySelectorAll() to get a list of all the list items on the page.
• Use the standard for statement for looping over the elements in a collection.
• Write an expression to check whether the innerText of the current item contains the string 'element'. Use the string method includes() to write the test.
• Inside the loop: Write an if statement that uses your test. If the test is true, use the current item's style property to change its fontSize and backgroundColor.

Script 2: Trimming Long Paragraphs

Write a script that loops over all of the p paragraphs in a web page. If a paragraph is more than 150 characters long, the script:

• replaces its inner text with a string consisting of its first 100 characters followed by '...'
• adds a border of 'solid blue 1px'
• adds padding of '3px'

For example, see that the paragraph in this image has been cropped to end with '...' and has a blue border around it:

Hints for starting:

• Use the standard querySelectorAll() to get a list of all the paragraphs on the page.
• Use the standard for statement for looping over the elements in a collection.
• Write an expression to check whether the length of the current item's innerText is greater than 150. Use the string's length property to write the test.
• Inside the loop: Write an if statement that uses your test. If the test is true, use the current item's style property to change its border and padding.
• Also inside the if statement: Use an assignment statement to change the innerText of the current item. The new value is the first 100 characters of the current text plus the string '...'. Use the string method slice() to get the first 100 characters of the current text.

Script 3: Changing Relative Links to Absolute Links

This may look like a tougher problem. Fear not! You can do it. Pay close attention to the hints, and ask if you have any questions.

Write a script that loops over all of the a links in a web page. If the href for the link does not start with 'http', the script:

• adds 'https://www.cs.uni.edu/~wallingf/teaching/cs1100/readings/' to the front of the href string
• changes the color of the text to 'green'

For example, notice that the links in this image are all green, because they were relative links to pages in a subdirectory and they have now been changed to absolute links to the server:

Hints for starting:

• Use the standard querySelectorAll() to get a list of all the anchor elements on the page.
• Create a variable named path and initialize it to the value 'https://www.cs.uni.edu/~wallingf/teaching/cs1100/readings/'.
• Use the standard for statement for looping over the elements in a collection.
• Inside the loop: Create a variable named url and initialize it to value of the current item's href attribute. Use the method getAttribute('href') to access that value.
• Write an expression to check whether url starts with the string 'http'. Use the string method startsWith('http') to write the expression. Assign its value to a new variable named absoluteLink.
• Write an expression to check whether absoluteLink is false — that is, that url does not start with. Use the operator ! to negate the value of the variable: (! absoluteLink).
• Inside the loop: Write an if statement that uses your test. If the test passes, use the current item's style property to change the color of its text.
• Also inside the if statement: Use an assignment statement to change the value of url to be path plus url. Then use the method setAttribute('href') to change the link's href to the new value of url.