28 September 2021

Last Time We learned about three types of popups. All three are created by functions; you can pass all of them a string as an argument which gets displayed on the popup.

Conditional Logic: Selection

Simple if A simple if looks like this.


if(predicate)
{  
    //block o'code
}

Here are its features.

We use a simple if to create an absolute value function.


function foo(x)
{
    //if predicate is false, block is skipped.
    if( x < 0)
    {
        x = -x;
    }
    return x
}

if with else Here we have an if-else progression. 


if(predicate)
{  
    //true_code
}
else
{
    //false_code
}

Here are its features.

else if


if(predicate)
{  
    //code0
}
else if(predicate1)
{
    //code1
}
else if(predicate2)
{
    //code2
}
else if(predicate3)
{
    //code3
}

. 
.
.

else if(predicateN)
{
    //codeN
}
else
{
    //default_code
}

Here are its features.

Here we make a signum function.


function sgn(x)
{
    if(x > 0)
    {
        return 1;
    }
    else if(x < 0)
    {
        return -1;
    }
    else
    {
        return 0;
    }
}

Here we compute a letter grade.


function compute_grade(score)
{
    if( score >= 90)
    {
        return "A";
    }
    else if(score >= 80)
    {
        return "B";
    }
    else if(score >= 70)
    {
        return "C";
    }
    else if(score >= 60)
    {
        return "D";
    }
    else
    {
        return "F";
    }
}

Puzzler Implement this.

$$ f(x) = \begin{cases} -x, &\text{ if}\ x\leq 0\\ x^2, &\text{ if}\ 0\lt x\leq 1\\ 2x-1, &\text{ if}\ x\geq 1\\ \end{cases} $$

Going Overboard Suppose we want to create a function monthName that accepts an integer 1-12 and which returns "Jan" for 1, "Feb" for 2, etc. We could do this with a conditional contstruct. It's an easy exercise to create it. OR we could do this.


function monthName(n)
{
    // 1 for Jan, 2 for feb, etc.
    names = ["", "Jan", "Feb", "Mar", "Apr", "May",
             "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
    return names[n]
}
console.log(monthName(9));

The Inside Dope on addEventListener

The addEventListener method can be called on any page element. This method requires two arguments: the first is an event type, and the second is a function to be called when the event of the specified type occurs in the element.

So far, the way we get page elements is via document.getElementById.

We met these event types.

Here are some more.

The The W3Schools DOM Event Reference has the whole enchilada.


<!doctype html>
<!--Author: Morrison-->
<html>
<head>
<title>eventdemo</title>
<link rel="stylesheet" href="eventdemo.css"/>
<script src="eventdemo.js">
</script>
</head>
<body>
<h1 id="headline">Event Demonstration</h1>

<p>Can you make the list items bold when then they are moused
over and unbold otherwise?</p>

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>three</li>
    <li>three</li>
    <li>three</li>
    <li>three</li>
    <li>three</li>
    <li>three</li>
    <li>three</li>
    <li>three</li>
    <li>three</li>
    <li>three</li>
    <li>three</li>
    <li>three</li>
    <li>three</li>
    <li>three</li>
    <li>three</li>
    <li>three</li>
    <li>three</li>
    <li>three</li>
    <li>three</li>
    <li>three</li>
</ul>
</body>
</html>


/*Author: Morrison*/
h1, h2, .display
{
    text-align:center;
}


/*Author: Morrison*/
window.addEventListener("load", main);
function makeYellow()
{
    let headline = document.getElementById("headline");
    headline.style.backgroundColor = "yellow";   
    //  background-color  -> backgroundColor
}
function unmakeYellow()
{
    let headline = document.getElementById("headline");
    headline.style.backgroundColor = "white";   
}
function makeBold()
{
    this.style.fontWeight = "bold";
}
function unmakeBold()
{
    this.style.fontWeight = "normal";
}
function main()
{
    let headline = document.getElementById("headline");
    headline.addEventListener("mouseenter", makeYellow);
    headline.addEventListener("mouseleave", unmakeYellow);
    //code smell: repetition!
    /*li1 = document.getElementById("li1");
    li2 = document.getElementById("li2");
    li3 = document.getElementById("li3");
    li1.addEventListener("mouseover", makeBold);
    li2.addEventListener("mouseover", makeBold);
    li3.addEventListener("mouseover", makeBold);
    li1.addEventListener("mouseleave", unmakeBold);
    li2.addEventListener("mouseleave", unmakeBold);
    li3.addEventListener("mouseleave", unmakeBold);*/
    let listItems = document.getElementsByTagName("li");
    //this allows us to avoid the duplication we
    //saw above and, if you add items to the list,
    //the event handling code is automatically
    //added.
    for(let k = 0; k < listItems.length; k++)
    {
        listItems[k].addEventListener("mouseover", makeBold);
        listItems[k].addEventListener("mouseleave", unmakeBold);
    }
}

The The W3Schools DOM Event Reference has the whole enchilada.

Replacing Text and HTML in an Element

Sometimes you will want to alter text or HTML inside of a page's element. Here is how to replace text.


    let element = document.getElementById("someId");
    element.innerText = "new text";

Here is how to replace HTML.


    let element = document.getElementById("someId");
    element.innerHTML = "new HTML";