This page started with the Sample Bootstrap Page and added a bunch of Javascript behaviors into it.
The main purpose of this page is to give you examples of how to use
different ways to edit the way a page's different elements react to
user input. Most of the input has to do with mouse events that then
tell the page to run some code. Since this course isn't about making
websites that deal with data from some server but rather just the
look and feel of pages, most of the reactions that we'll be doing
are interface or visual effects. These serve to give users feedback
and make the page feel responsive and like it acknowledges that the
user has done something. With CSS, you could do some of this already
with built-in event detectors like the hover state of a
text element. And actually, we've cheated a little bit already with
Bootstrap since it does already have some simple visual effects that
use Javascript, like collapsing blocks of code (by toggling its
visibility--and actually, technically, there's at least
one way to collapse an element through pure
CSS...).
Javascript is an actual programming language where you define functions for the page to execute when something happens. Often when you want it to do something, you also want to throw in some conditional logic. For example, let's say your user clicks on a cell in a table that displays a calendar month, and you want some pop-up text to let the user know they clicked on the cell but you also want it to know whether the date is even or odd or if it is a weekend day rather than a weekday and intelligently display text in the pop-up depending on those conditions. If you didn't have Javascript, you'd have to define different class styles for each set of conditions and remember to make sure each cell has the right classes. Then you'd have to create a button in each cell or something and have the user click on the button for the pop-up to appear.
With Javascript, you could instead have one class defined for every
cell in the table (or actually not even have to define a class) and
then add in an onclick event to whatever element you
want clickable. The code will then execute and identify what's in
the cell to determine if it's an odd or even number and which day it
is. Then it'll throw a pop-up and the text will be different
depending on what it detected.
In order to do the above intelligent pop-up, the code needs to identify text that is different in each cell and then remember it when it spits out the pop-up box. This is done by defining a variable and setting it to some value, depending on what was clicked.
The logic, in English, would be something like:
Generally, you want to plan out your functionality this way for each bit of behavior that you want to program into the webpage. And, hey, that list of things to do is actually called a "function!"
This way of thinking, where each step is spelled out and is required for subsequent steps could be called a "logical flow," and being able to do this well extends way past programming. Good research and persuasive writing requires a logical flow of arguments to be convincing. Playing strategy games requires some understanding of conditions and consequences. Etc. This is why a lot of educational researchers say that coding should be taught in K12 schools. It's not so much that they want kids to be able to program stuff; the real benefit is to help kids be able to think formally and logically.
After actually coding in the calendar below, the actual order of operations is:
This page has the example clickable calendar so you can look at the code; I tried to put in intelligible comments. There is soooo much to Javascript and programming, though, and it's much more complex and complicated than straight up HTML and CSS. I feel like the best way to learn would be follow a robust tutorial, so please confer the Resources Page and especially follow the Javascript tutorials at w3schools.com. See the Assignments Page for what you should try to understand and include in your work.
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|