Reading notes for Code Fellows!
There are tree types of list elements in HTML which are all indented by default when rendered in the browser:
<ol> - The list entries (<li>) in these lists are preceded by numbers. An example for use might be the steps of a baking recipe.<ul> - The list entries (<li>) in these lists are preceded by bullets. An example for usse might be the list of ingredients for the previously mentioned baking recipe.<dl> - The entries for these lists come in pairs (typically) of <dt> and <dd> elements. The <dt> elements are indented once and represent the defined term. The <dd> elements are further indented and represent the definition(s) of the defined terms.Lists can also be nested inside of other lists…
<ul>
<li>item a</li>
<li>item b</li>
<li>item c</li>
<ul>
<li>sub-item 1</li>
<li>sub-item 2</li>
</ul>
<li> item d</li>
</ul>
CSS treaats all HTML elements like they are all contained in their own individual boxes for purposes of styling. Several properties can be used to alter the appearance of these “boxes”.
By default, a box is sized just large enough to hold the contained content. However, these defaults can be overridden.
If the height and width designated for a box is too small to hold all of the content, the content will expand out of the box and look messy. When this occurs, the overflow property can control what happens in a couple of ways:
Every “box” has these three properties.
border:3px solid green;
margin:5px 10px;
padding:6px 24px 12px 24px;
Padding and margins are helpful for adding “white space” between various items on the page.
In order to center a box on the page or within the element in which it sits, we must first set a width for the box and then set the margin-left and margin-right properties to auto.
IE6 Box Model
Reference page 316 of the book to read about quirks concerning boxes, margins and padding in IE6.
The display property allows us to change inline elements into block elements and vice versa. It also allows us to hide an element from the page. The possible values are:
inline - causes a block-level element to behave like an inline elementblock - causes an inline element to behave like a block-level elementinline-block - causes a block-level element to flow like an inline element while retaining other features of a block-level elementnone - hides the element from the page as though it isn’t thereThe visibility property allows us to hide boxes from users while leaving a space where the element would have been displayed. The values are:
hidden - hides the elementvisible - shows the elementborder-image
Takes a background image and slices it into nine-pieces and then applies those pieces to the border of any box. The four corner pieces are always positioned at the corners of the box, but we have an option on whether the side pieces are stretched or repeated. The property requires the following pieces of information:
stretch , repeat , round)The box must also have a border width for the image to be shown.
box-shadow
Allows us to add a drop shadow around the box. The information we can include is:
Horizontal Offset
Vertical Offset
Blur Distance
Spread of Shadow
Color
If the inset keyword is inserted before the values, they will create an ‘inner’ shadow.
border-radius
Used to create rounded corners on any box. The value indicates the number of pixels the radius of the rounded corner should be. This can also be designated as a percentage of the height/width of the box as well. One value can be given and applied to all of the corners of the box, or different corners can be targeted individually with varying values. For instance:
article {
border-top-left:20px;
border-bottom-right:10px;
}
A switch statement starts with a variable called the switch value. Each case indicates a possible value for this variable and the code that should run if the variable matches that value.
switch (level) {
case 'One':
title = 'Level 1';
break;
case 'Two':
title = 'Level 2';
break;
default:
title = 'Test';
break;
}
| If… (Else) | Switch |
|---|---|
| No need to provide an else option. (can use only an if statement) | There is a default option that is run if none of the cases match. |
| If there are a series of if statements, they are all checked even if a match has been found. | If a match is found, that code is run; then the break statement stops the rest of the switch statement from running. |
| Slower than a switch | Better performance than multiple if statements. |
If we use a data type that JavaScript is not expecting, it tries to make sense of the operation rather than throw an error.
JavaScript can convert data types behind the scenes. Because JavaScript uses weak typing the data type for a value can change in a process known as type coercion. For instance a numeral in a string could be converted to a number and evaluate the statement '1' > 0 as true. For this reason, when evaluating whether two values are equal we should the use strictly equal operators - === and !== rather than == and !=.
Due to type coercion, every value in JavaScript can be treated as if it were true or false.
Falsy values are treated as if they are false and can also be treated as the number 0. Examples:
falseTruthy values are treated as if they are true and can also be treated as the number 1. Examples:
trueLogical operators are processed left to right. They short-circuit (stop) as soon as they have a result - but they return the value that stopped the processing (not necessarily true or false).
Loops are programming tools that check for a condition and run a specified block of code if the condition returns true. After executing the block of code, the loop checks the condition again and continues to repeat the block of code until a check returns false. Then the loop is exited.
There are three common types of loops:
The for lopp uses a counter as a condition to instruct the code to run a specified number of times. The counter of a for loop consists of three parts: initialization, condition and update and is contained in the parenthesis following the for keyword. Here is an example of a for loop set up:
for (var i = 0; i < 10; i++) {
// Code goes here
}
var i = 0 - initialization the variable i is created only one time when the for loop is first run.i < 10 - condition the loop should continue to run until it reaches the specified number.i++ - update every time the loop completes the block of code it increments the counter.