Embedded Files
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
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
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
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
Events
The DOM has many different events. We have seen the click event, but some more useful ones include:
keypress (keydown, keyup)
and many mouse events
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!
Report abuse