example-website/error-handling.html at master · leelichtsinn/example-website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html>
<body>

  <p>Please input a number between 5 and 10:</p>

  <input id="demo" type="text">
  <button type="button" onclick="myFunction()">Test Input</button>
  <p id="message"></p>

  <script>
  // an input value is valid if it is a number and it is between 5 and 10 (x > 5 and x < 10)

  // valid =
  // x is a number
  // AND x > 5
  // AND x < 10

  // invalid =
  // x is NOT a number (valid: '3', '4', '45') (invalid: 'asfadsf', '')
  //     === isNaN(x) is true
  // OR x <= 5
  // OR x >= 10

  // contrapositive: x && y && z  opposite of !x || !y || !z
  // !x || !y || !z means x && y && z is not true
  // x && y && z true means that !x || !y || !z is not true

  // mutability
  // Number does not "mutate" x


  function myFunction() {
      var message, x;
      message = document.getElementById("message");
      message.innerHTML = "";
      x = document.getElementById("demo").value;
      // try {
      //   if (isNaN(x)) {
      //     throw 'not a number';
      //   }
      //   // everything from here onward is a number
      //   x = Number(x);

      //   if (x <= 5) {
      //     throw 'out of range, too low!';
      //   }
      //   // everything here onward is > 5
      //   if (x >= 10) {
      //     throw 'out of range, too high!';
      //   }
      //   // x is valid
      //   message.innerHTML = 'This is valid! ' + x;
      // } catch(errorUnicorns) {
      //     // populate the p#message with text from the error when the input is not valid.
      //     message.innerHTML = "Input is " + errorUnicorns;
      // }
      if (x <= 5 || x >= 10 || isNaN(x)) {
        throw 'This is not good!';
      }
  }
  </script>


<!-- // order of execution
// raising an exception vs a return statement
// using isNaN
// x === NaN

// chaining ||, order of evaluation
// ? ternary operator
 -->
</body>
</html>