To Lecture Notes

IT 231 -- Jan 16, 2024

Review Exercises

  1. For each of these pairs of hex color components, which component is larger? Recall that hex digits can have any one of 16 values:
    0 1 2 3 4 5 6 7 8 9 A B C D E F
    The digits 0 through 9 have the same values as their corresponding base 10 digits. The digits A through F represent the values 10 through 15 (A==10, B==11, C==12, D==13, E==14, F==15)
    (05,09) (0C,05) (45,3A)
(98,D2) (B8,BC) (FA,BE)
    Answer: 05<09 0C>05 45>3A 98<D2 FA>BE
    Remember that for a two digit hex (base 16) number, the left digit is the sixteens place and the right digit is the ones place.  BE represents the number B*16 + E = 11*16 + 14 = 190.  The way you compare 2 two-digit hex numbers is to first look at the left digits.  The number with the larger hex digit is larger.  If the left digits are equal, the number with the larger right digit is larger.  If both digits are equal, obviously the two numbers are the same and equal.
  2. What is the difference between an attribute and a property?
    Answer: an attribute is part of an HTML element, for example:
    <img id="img1" src="mypic.jpg">
    id and src are properties of the img element.
    Let image1 be the JavaScript object defined by
    var image1 = document.getElementById("img1");
    If we set
    image1.src = "andromeda.jpg";
    src is a property of the JavaScript img object image1.
  3. Display an image element on an HTML page with width:300px and height:200px. However, wait to display the image file until the image element is clicked. Your image element should work something like this:



    Answer:
    The index file with HTML, CSS, and JavaScript all in the same file. There are two solutions presented here: (1) the traditional solution setting event handler by using the onclick attribute of the button, and (2) the modern solution that creates a JavaScript button object and attaches an event handler to the button object like this:
    var image1 = document.getElementById("img1");
image1.addEventListener("click", showImage);
    Solution 1 (traditional solution):
    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Display Image</title>
        <style>
        body { background-color: aliceblue;
               color: navy; }
               img { width: 300px;
               height: 200px; }
        </style>
        <script>
        function showImage( ) {
            var image1 = document.getElementById("img1");
            image1.src = "images/andromeda.jpg";
        }
        </script>
    </head>
    <body>
        <h1>Display Image</h1>
        <img id="img1" onclick="showImage( )">
    </body>
</html>
    Solution 2 (modern solution):
    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Display Image</title>
        <style>
        body { background-color: aliceblue;
               color: navy; }
               img { width: 300px;
               height: 200px; }
        </style>
        <script>
        function showImage( ) {
            var image1 = document.getElementById("img1");
            image1.src = "images/andromeda.jpg";
        }
        function init( ) {
            var image1 = document.getElementById("img1");
            image1.addEventListener("click", showImage);
        }
        window.addEventListener("load", init);
        </script>
    </head>
    <body>
        <h1>Display Image</h1>
        <img id="img1">
    </body>
</html>
  4. Show how to use this CSS class:
    .large-red { font-size: 200%; color: red; }
    Answer: apply this CSS class to an h2 tag like this:
    <h2 class="large-red">Text of the h2 Header Element</h2>
  5. Read the CSS Shorthand Styles section in the Jan 11 Notes (or look up this topic in W3Schools). Then rewrite these CSS styles as shorthand styles.
    /* Style a */
p { font-family: arial, sans-serif;
    font-size: 20px;
    font-weight: bold; }
/* Answer: */
p { font: bold 20px arial, sans-serif; }

/* Style b */
img { padding-bottom: 20px; 
      padding-top: 10px; 
      padding-left: 25px; 
      padding-right: 15px; }
/* Answer: */
img { padding: 10px 15px 20px 15px; }
    With four distances, start at the top and proceed clockwise: top, east, south, west. 
    /* Style c */
img { border-width: 10px; 
      border-style: solid; 
      border-color: red; }
/* Answer: */
img { border: 10px solid red; }

Installing Node

Intro to Node.js

JavaScript Review Questions

  1. Write a statement that writes the message "Hello" to the Node console.
    Answer:
    console.log("Hello");
  2. What is the output when this statement is entered at the Node console?
    var n = 3 + 2 * 7;
console.log(n);
// Answer:
17 because * has higher precedence than +.
  3. Write statements that declare three JavaScript variables x, s, and b, and initializes them to the values 9.6372, "apple", and true, respectively. Answer:
    var x = 9.6372;
var s = "apple";
var b = true;
console.log(x);
console.log(s);
console.log(b);
// Output:
9.6372
apple
true
  4. What are the datatypes of the values in Exercise 2? Check them with the JavaScript operator typeof. Answer:
    console.log(typeof x);
console.log(typeof s);
console.log(typeof b);
// Output:
number
string 
boolean

Practice Quiz 2a

More JavaScript Review Questions

  1. Write a statement that declares the JavaScript constant PI, and initializes it to the value 3.14159265. Answer:
    const PI = 3.14159265;
  2. List the JavaScript operators that you know. Answer:
    Arithmetic: + - * / %
    Comparison: <  <=  >  >=  ==  !=  ===  !===
    Logical: && (and)  || (or)
    Assignment: =  +=  -=  *=  /=  %=
    Increment/decrement: ++  --
  3. What is lower camel casing?
    Answer: it means that the first letter of the variable name is lower case and that every new word in the variable name is upper case. (The uppercase letters in the variable name are the humps of the camel.) For example:
    var numberOfCustomers = 25;

Math Methods Example