Introduction to (Web) Programming

Lab 4: one string leads to another

shortcut to main problems

shortcut to console exercises


Goals


Instructions


ASCII

Examine this simple ASCII table and this more extensive set of tables (which includes some history).


JavaScript console exercises

Using the browser’s JavaScript console, try these examples, in order, one at a time:

> null

> let phrase = 'May the Force be with you.';
> phrase.length

> phrase.charAt(0)

> phrase.charAt(3)

> phrase.charAt(24)

> phrase.charAt(25)

> phrase.charAt(26)

> let i = 0;
> while (i < phrase.length) {
      console.log(phrase.charAt(i));
      i++;
  }


> phrase = 'Abc';

> phrase.charCodeAt(0)

> phrase.charCodeAt(1)

> phrase.charCodeAt(2)

> phrase.charCodeAt(3)


> String.fromCharCode(33)

> String.fromCharCode(50)

> String.fromCharCode(65)

> String.fromCharCode(97)

> let j = 48;
> while (j < 58) {
      console.log(j + ' : ' + String.fromCharCode(j));
      j++;
  }

> j = 97;
> while (j < 110) {
      console.log(j + ' : ' + String.fromCharCode(j));
      j++;
  }

Examples to study

The examples consist of pure functions that make use of charAt, charCodeAt, and String.fromCharCode. Look them over and try them out in the console as in:

> shiftSimple('HAL', 1)
"IBM"
> shiftSimple('Zoo', 3)
"]rr"
> doubleChar('What!')
"WWhhaatt!!"
> countOccurrences('here and there', 'e')
4

(Merely loading this page in the console should output some examples.)


Main exercises

Solve these problems by working lab4.js and reloading lab4.html in your browser as you make changes.

  1. Complete the function randomLetter so that it returns a random lowercase letter. Use the supplied Math.floor, Math.random and String.fromCharCode. (You are welcome to look at the randomRange example we have used previously.) If you are clever about using charCodeAt, you need not know the ASCII value of 'a' (nor any other letter). Test it by clicking on the random1 button. It should produce a single, random lowercase letter in the output box.

  2. Complete randomString(size) so that it returns a string of length size consisting of randomly generated lowercase letters. Use a while loop and randomLetter. Test it by indicating the size of the string to generate in the stop/size input field and then clicking on the random button. It should produce a random string of lowercase letters in the output box.

  3. Complete isUpperChar(c) so that it returns true if c is an uppercase character (so it must have an uppercase letter in its position 0 and be of length 1) and false otherwise. Test it by entering a single character in the source text area and clicking on the upper1 button.

  4. Complete shiftChar(c, k) so that if c is an uppercase letter, it returns another uppercase letter that is shifted k letters further in the alphabet. Important distinction from version developed in class: it should only work on uppercase letters (use isUpperChar) and if necessary the resulting letters must “wrap around” from 'Z' back to 'A' and so on. (Hint: you can achieve that wrapping effect nicely by using the % operator.) If c is not uppercase it should return c as is. Test it by entering a single character in the source text area, specifying a shift amount in the start/shift input field, and clicking on the shift1 button.

  5. Write a function shift(s, k) so that it returns a string which is like s but with all the uppercase letters shifted k places in the alphabet. For example, shift('HAL', 1) should return 'IBM' and shift('BRONX Cheer!', 5) should return 'GWTSC Hheer!'. Test it by entering a string in the source text area, specifying a shift amount in the start/shift input field, and clicking on the shift button.

  6. Complete slice(s, start, stop) so that it returns the slice (a.k.a. substring) of s that starts at position start and runs up to but does not include position stop. Assume s is a string and start and stop are nonnegative integers. For example, slice('hello world!', 3, 7) should return 'lo w'. Test by entering a string in the source text area, specifying start and stop values, and clicking on the slice button.

  7. Complete indexOfChar(s, searchChar) so that it returns the first position in s where searchChar occurs. If it does not occur, it should return null. Test by entering a string in the source text area, specifying the search character in the search text input field, and clicking on the find1 button.


    The last two problems are intended to be a bit more challenging.

  8. Complete indexOf(s, searchText, start) so that it returns the position in s where searchText next occurs at or after the start position. Note: unlike in the previous problem, searchText (as opposed to searchChar) can be an arbitrary string (it need not be a single character). If it does not occur, it should return null. Use slice. Test by entering a string in the source text area, specifying the search text and the start position, and clicking on the find button.

  9. Write function replaceAll(s, searchText, replaceText) so that it returns a string like s but where every occurrence of searchText is replaced by replaceText. For example:

     > replaceAll("The theater tickets were worth the price!", "th", "WHAT?")
     "The WHAT?eater tickets were worWHAT? WHAT?e price!"

    Use slice and indexOf. Test by entering a string in the source text area, specifying the search and replace strings, and clicking on the replace button.


To experiment more directly with my solutions, you can open up a console while viewing this page and try examples such as:

> shift('try SHIFTING this', 8)
"try APQNBQVO this"

> slice('Alphabet', 2, 6)
"phab"

> indexOfChar('where is the x?', 'x')
13

> indexOf('is there there?', 'there', 2)
3

> indexOf('is there there?', 'there', 7)
9