4.6 - HTML, JS, Strings & Other Things

Coding is like working with Lego. You have pieces with specific colours, shape, and size. You are given a task - it's up to you to select the proper pieces and put them together in a logical manner.

JavaScript Legos

At this point you should have a firm grasp of the following:

  • Input, processing, and output

  • Variables and how to use them to your advantage

    • Numbers vs. booleans vs. Strings

  • If-statements and using them to control logic

    • else if

    • else

  • Loops

    • for (start; condition; counter control)

    • do/while (condition)

  • Functions

    • Creating your own

    • Parameters / arguments [optional]

    • return statement [optional]

  • The difference between console.log() and return (this one is so very important and I think some people are still struggling with it)

  • Arrays (and Strings)

    • .length

    • Addressing using indexes [] (starts at zero)

    • .push()

    • .pop()

HTML Legos

In addition, you should be comfortable with HTML documents and how to add some elements to the <body> section. We have seen the following HTML elements:

  • Paragraphs <p></p>

  • Bold and Italics <b></b> <i></i>

  • Images <img src="">

  • Break line <br>

  • Horizontal rule <hr>

  • Anchor tags <a href=""> </a>

  • Ordered lists <ol> </ol>

  • Unordered lists <ul> </ul>

  • List items <li> </li>

  • Tables <table> </table>

    • Table rows <tr> </tr>

    • Table header cells <th> </th>

    • Table data cells <td> </td>

  • Buttons <button> </button>

  • Input boxes <input type="">

  • Divisions <div> </div>


Keep in mind, - you have just started with HTML, so have patience.

Combining the Legos: HTML & JS

We know how to give HTML elements a unique identifier with the id="" attribute. That allows us to talk to or modify the HTML from JavaScript.

<div id="menu"> {content here} </div>


We can also attach event listeners to elements so that they react to interactions (clicking, typing, etc). That happens in the JS:

document.getElementById("ok_button").addEventListener("click", clickedOK);


function clickedOK() {

// Code goes here

}

Events

The DOM has many different events. We have seen the click event, but some more useful ones include:

Today's Task

As always, our task is in Replit. I do want to take this time, however, to explain that Replit is not the only place people write code. It just happens to be the online tool we use because we're all on different devices - most of them cloud devices. Typical development is done right on your computer and if you'd like to know more about that, just ask!