Review chapters [JS, 19-25] and [HTMLCSS, 13-18]. Make sure that you have done all the problems listed on the website at the end of each chapter.
Please create a new webpage for each problem. For inputs of arrays, have the user to enter a value into the prompt until the user has entered nothing. This way, the user can insert an unknown number of values into an array. The user will input the values via the prompt function. The script will display the output on the webpage by using the document.write function.
For these problems, do not use built-in functions unless specified otherwise.
A. Built-In String Functions
For all of your implementations, you are not allowed to use any built-in function unless specified otherwise. However, you are allowed to use string's length, string's charAt() function or simply the [ ] operator, and the concat() function or simply the + operator. To learn how to use strings properly is to not use arrays at all.
slice (1-loop)
Implement the built-in JavaScript string function, slice, by using string operations and loops. Your input shall be a string, the first index, and the second index. The output shall be the sliced string. Compare your implementation against the built-in function "string.slice(firstIndex, secondIndex)."
indexOf (2-loops)
Implement the built-in JavaScript string function, indexOf, by using string operations, string length, and two for-loops. Your first input will be a haystack string. Your second input will be a needle string. Your third input will be an offset index, in which the search will start from that index. The output shall be the index of the needle string appeared in the haystack string. However, if the needle string is not found in the haystack string, simply output a -1. There are three parts:
a) Implement indexOf by using just the slice built-in function. This implementation needs one loop.
b) Implement indexOf without the slice function or any other built-in function. This needs two-loops.
c) Compare both your implementations against the built-in function "haystack.indexOf(needle, offset)."
replace (1-or-2-loops)
There are two parts for this problem. You need three inputs: haystack string, needle string, and the new string. The output will be the replaced string that basically replaces all the needle strings appearing in the haystack string with the new string.
a) Using indexOf() and slice() function, output a new string so long as the index is non-negative that has had all the strings replaced. Because you need to treat every occurrence of the needle string in the haystack string, you will need to use a loop until indexOf has returned a negative value.
b) Without using any built-in function, output a new string that has all of your needle strings replaced with your new string. This will necessitate two-nested-loops.
c) Compare both your implementations against "haystack.replace(needle, newString)."
B. For-Loops (HTML)
HTML encodings
Prompt the user to enter a string. Output the text properly on the webpage by having some special characters displayed correctly on your browser. You may use the built-in function, replace. Apply the following rules:
• Replace "<" with "<"
• Replace ">" with ">"
• Replace "&" with "&"
• If there are two or more spaces, replace it with a regular space followed by the correct number of hard spaces ( ). For example, " " (5-spaces) will be replaced with " " (one regular space plus four hard spaces)
Input Output
Hello, 9 < 10 + 1 > 10. You & me. Hello, 9 < 10 + 1 > 10. You & me.
Bold, Underline, Italics (1-or-2-loops)
Output HTML styles from a string of text. In the old days, we use certain symbols in the text to bold, italicize, and underline certain words within the text. That is, a text that is surrounded by two "*" will be bolded. A text surrounded by two "/" will be italicized. And, a text surrounded by two "_" will be underlined. We will assume that no overlaps are allowed, i.e. *_this is allowed_* but *_this is not allowed*_.
Input: The *Quick _Brown Fox_* /Jumps Over/ the Lazy Dog.
HTML: Quick Brown Fox Jumps Over the Lazy Dog.
You see: The Quick Brown Fox Jumps Over the Lazy Dog.