HTML Lists, CSS Boxes, JS Control Flow
HTM
List
Duckett’s HTML talks about lists on pages 62-73. Lists are an important way to represent statements as bullet points in 3 main different formats.
-
The ordered list : a list of items with a numerical value assigned in ascending order from top to bottom.
-
The unordered list : a list without numbers and bullet poits marking the beginning of each list item.
-
The defenition list : a list with definitions that is followed by a definition term, described by the definition describing it.
List can also be nested, so that list item elements can be further specified within a given bullet: useful when a list has specifications within a given point.
CSS
Boxes
Each element in HTML lives in a box; this is called the box model: the idea that each element is self-contained in the web page.
The “box” of an element consist of the margin at the outside, the border separating it from the padding inside, the padding around the content, and the content nested inside of the “box.” Each one of the different components of the box can be targeted differently by css and even content can be changed by targeting the element with JS. A webpage can be modified by using the DOM (document object model) targeting the nodes inside the html document.
The styles of a box defining any given element have strict rules in CSS to guide what will be presented, and how to make it compatible to a given layout.
For one thing, borders can be targeted, but if not done correctly they might not display or display as expected. One example is the way that certain styles can be written shorthand, and so the top, bottom, left and right have to specify in a certain order.
A border too is a style that can be shorthanded and defining the outline of the padding on a box of the element, and while it can be used to define quickly in one statement unless the style of the border is defined along the width and color, a border will not display.
Knowing how to define the styling rules correctly is key for proper functionality and organization of the boxed model.
Javascript
Loops are a very important tool for our JS programing needs: they allow us to run a program’s steps multiple times while under certain predefined conditions.
for loops
For loops have a set timer variable and a condition to define the number of times a loop will run.
**For example:
for (var I = 0; I < 3; i++){
loop code;
}
This loop will run and repeat while variable I is less than 3 but not equal to 3, also, the i++ inside the for loop declaration means that each time the loop run, the I variable increments by 1. This is usefull when we know how many times we need to run a loop.
while loops
These are usefull when we need a lopp to run but we don’t know home many times we need to run it. It sounds hard to understand at first, but lets say that we want to make a smoothie, but we don’t know how many we need to make: well instead of just making x amount of smoothies each time, we need to know how many people we need to make them for and not waste resources.
A while loop needs the counter to be set before hand.
Var smoothiesNeeded = 3;
While (smoothiesNeeeded > 0) {
Code body;
smoothiesNeeded –;
}
This would mean that we don’t know how many times we need to run the loop until we define the counter outside the loop.
Do while
A do while loop means that just like a while loop, we won’t automatically know what to do, but we want it to work at always once. If this was the smoothie example, let’s just say that it would ensure that one smoothie is made and ready to go.