Lab 1: basic in-browser JavaScript

Programming the Web: An Introduction (Spring 2021)

Lab 1


Goals


Instructions


Part I: JavaScript console basics

  1. A warm up. Using the browser’s JavaScript console, try these examples in order, one at a time:

      > 59
    
      > 33 + 47
    
      > 33 - 47
    
      > 3 * 7
    
      > 23 * 34
    
      > 782 / 34
    
      > 7 / 3
    
      > 782 % 34
    
      > 7 % 3
    
      > x
    
      > let x = 5;
    
      > x
    
      > x = x + 1;
    
      > x
    
      > alert('x');
    
      > alert(x);
    
      > alert('the value of x is ' + x);
  2. String exercises. Try these in order (again, using the browser’s JavaScript console), one at a time:

      > let word = 'the';
    
      > word.length
    
      > alert(word);
    
      > let phrase = word + ' time';
    
      > alert(phrase);
    
      > phrase = 'now is ' + phrase;
    
      > alert(phrase);
    
      > phrase.length
  3. Inputting numbers. Again, using the browser’s JavaScript console, try the three examples below, one at a time:

      > prompt('type something: ') 
        [type: 34]
    
      > parseFloat(prompt('type something: '))
        [type: 34]
    
      > parseFloat(prompt('type something: '))
        [type: thirty-four]

    You should be able to explain why the results produced are different in each case.

  4. Experiment more with the JavaScript console. Identify cases where the console’s response is not what you would expect.


Part II: writing small JavaScript functions

To work on the remaining problems:

The problems themselves.

  1. Complete the function doubleWord so that it asks the user (using prompt) to enter a word (really any piece of text) and then displays (using alert) the word repeated twice consecutively. For example, if the user enters chi it should display chichi.

  2. Complete the function threeN1 so that it asks the user to enter a number and then computes and displays one more than three times that number. For example, if the user enters 7 it should display:

    Result: 22
  3. Modify the function phraseLength so that after it asks the user to enter a phrase (really any string of text) it reports not only the phrase itself, but the length of the phrase. For example, if the user enters Hello world! the function should display:

    The phrase "Hello world!" is 12 characters long.

    Only modify the line marked with // ... and remove that comment when done.

  4. Consider the function add3. It has a bug! Spot the bug and fix it so that the function correctly asks the user for a number and displays three more than that number. Modify the way it displays the result so that instead of saying something of the form: “wrong answer …” it says “Three more than … is …” as in:

    Three more than 17 is 20.

    Only modify the lines that have // ... comments on them. (Remove those comments as you make your modifications.)

  5. Complete the function milesToInches so that it asks the user to enter a number of miles and then computes and displays the equivalent number of inches. For example, If the user enters 6, it should report:

    There are 380160 inches in 6 miles.

    (There are 12 inches in a foot and 5280 feet in a mile.)

  6. An algorithm’s inverse. Below is a function that converts Celsius to Fahrenheit:

    
      function c2f() {
          let c = parseFloat(prompt('What is the Celsius temperature?'));
          let f = (9/5 * c) + 32;
          alert(c + ' degrees Celsius is ' + f + ' degrees Fahrenheit.');
      }

    (You can try it here.)

    Complete the function f2c so that it is structured similarly to c2f and so that it achieves the inverse: it converts Fahrenheit to Celsius. For example, if the user enters 212 it should report:

    212 degrees Fahrenheit is 100 degrees Celsius.
  7. Complete the function proseProblem so that it corresponds to the following prose description:

    Take a number called x. Output the difference between the square of two more than x and the square of one more than x.

    Use variables and assignments. Keep your arithmetic expressions simple: no more than a single arithmetic operation per assignment statement. The goal is to be literal - follow the steps implied by the prose description. (It is true that if you apply some algebra then this computation can be simplified. But no need - let the computer do the work!)

  8. Hermione goes apple picking. Complete the function applesForTeachers so that it asks how many apples Hermione brings to school and then how many teachers she has. It should then report how many apples she gives to each teacher and how many apples she has left over to share with the Gryffindor common room. Assume that she gives the same number of apples to each teacher and she gives as many apples to her teachers as she can. (In other words, use division, remainder and subtraction.) For example, if Hermione brings 50 apples total to give to her 11 teachers the function should first report:

    Hermione gives 4 apples to each teacher.

    and then report:

    She has 6 apples left to share with her pals.
  9. Hours, minutes, seconds [courtesy of Jim Marshall]. Complete the function seconds so that it asks the user for a total number of seconds, and converts this to the corresponding number of hours, minutes, and seconds. (Hint: the remainder operator % might come in handy here.) Examples: If the user enters 250 seconds, the

    That is 0 hours 4 minutes and 10 seconds.

    If the user enters 10000 seconds, the function should output:

    That is 2 hours 46 minutes and 40 seconds.
  10. Complete the function repeats so that it asks the user to enter a word (really any piece of text) and then displays the word 25 times, once per line. For example if the user enters cool the function should display a result like this:

    “cool” repeated 25 times

    Use varable assignment and string concatenation (and the newline character \n) to make your code compact. (For my solution, the body of the function is 6 lines and 124 characters, not including comments and indentation.) The idea is to use symbolic abstraction - where a variable stands in for a computation, in this case to avoid some redundancy in the code.

  11. Challenge. Write a function from scratch (call it whatever you think appropriate) such that it asks the user for a number and then rounds the number down to the nearest whole number. If that rounded number is even, it displays one half the rounded number; if the rounded number is odd it displays one more than three times the rounded number. For example, if the user enters 7.2, it reports 22 since 7.2 rounds down to 7 which is odd. If the user enters 24.3 it reports 12 since 24 is even. You should only use variable assignment and the five arithmetic operations we have covered (+, -, *, /, and %). Hints: use remainder and subtraction to round down; use remainder to help determine if a number is even or odd; take advantage of two convenient properties of multiplication: anything times one is itself and anything times zero is zero; and subtracting 0 from 1 is 1 and subtracting 1 from 1 is 0. In order to test your function you will likely want to modify lab1.html so it contains an additional button that invokes your function when clicked. (Follow the model of the other buttons in lab1.html.)