Code 201: Class 03 - HTML Lists, CSS Boxes, JS Control Flow

---

HTML Text: 62-73

Lists

• <ol></ol> Ordered List
• <ul></ul> Unordered List
• <li></li> List Item
• <dl></dl> Definition List usually consists of a series of terms and their definition
  • <dt></dt> Contains the term being defined
  • <dd></dd> Definition

Lists can be nested inside one-another

HTML Text: 300-329

Box Dimensions

• Can be defined in terms of px, %, or ems, % and ems are better in terms of fitting multiple screen sizes
• The min-width and max-width properties can be used to set bounds on a box size given different screen sizes
  • min-height and max-height work in a similar fashion
• overflow property can be set to hidden or scroll the first hides any text that doesn’t fit in the box, the later adds a scroll bar to give user access

Padding, Border, Margin

• From inside to outside goes in the following order
  • Content
  • Padding
  • Border
  • Margin

Border Width

• border-width can be given the following values
  • thin, medium, thick
  • 5px a specific pixel thickness
  • Can indicate each boarder individually border-width-top etc.
  • Can indicate all at once border-width: 1px 2px 3px 4px will render the borders in the following order top, right, bottom, left
  • border-style can be set to determine the appearance of the border
  • border-color sets border color
  • Short hand border border: 5px dotted red;

To center a box, set a width value then set margin-left: auto; and margin-right: auto;

Display *display property can change an inline element to a block or vice versa

• display: inline; causes a block element to act like inline
• display: block; causes an inline element to act like a block
• display: inline-block; causes block element to flow like inline but retain other block features
• display: none; will hide the content of the element

Visibility

• visibility: hidden; leaves a blank place where the element should be
• visibility: visible shows an element

Border Radius

• border-radius: 10px; gives all 4 corners a radius of 10px, can define each corner individually or in shorthand form
• border-radius: 10x 20x; gives an elliptical corner radius, if using short hand indicate all four horizontal values then all vertical values

JS Text: 70-73

Arrays special variable that stores a list of values

Array a variable that stores a list of values

• Programmer does not have to specificity how many variables it will hold
• Declare an array similar to other variables, but assign the value using [] and comma separated items
  • Example: var colors = ['white', 'black', 'custom']; this format is known as an array literal, this is the preferred method
  • Example: var colors = new Array('white', 'black', 'custom'); this format is know as an array conductor
• Can use different data types in the same array
• Items in an array are automatically assigned an index number indicating its position, count starts with 0 not 1
  • From the example above: Index 0 is 'white', 1 is 'black', and 2 is 'custom'
• To access a specific item in an array use the form arrayName[index number]
  • Example: var itemThree = colors[2] sets variable itemThree to 'custom'
• Number of items in an array is a property of each array to access it use arrayName.length;
  • Example: var numColors = colors.length;
• To change a specific value in an array arrayName[index number] = 'new value';
  • Example: colors[2] = 'beige'; changes the third array item from 'custom' to 'beige'

JS Text: 162-182

Switch Statement a variable given the switch value is used to indicate which code to run

switch(level) {
    case 'One':
        title = 'Level 1';
        break;
    case 'Two':
        title = 'Level 2';
        break;
    case 'Three':
        title = 'Level 3';
        break;
    default:
        title = 'test';
        break;
}

Switch run faster than if else statements because they don’t have to check all cases, just run until true and then break out

Type Coercion when data types are changed unexpectedly

• JS is said to be weak typing because of the possibility of type coercion
• Other languages that require a variable to have a specified data type are said to be strong typed

Loops

Loops check a condition, if it returns true a code block will run then will check again, if still true, code block will run again, until no longer true

• For good for running a loop a specified number of times, uses a counter as a condition
• While good for running loops that when you don't know how many times it should run
• Do While similar to the while loop, but will always run the statements in the curly braces at least once even if the condition evaluates to false

for (var i = 0; i < 10; i++) {
    document.write(i);
}

The preceding loop will write 0123456789 to the page.

• for keyword indicating a for loop
• (var i = 0; i < 10; i++) Condition (Counter)
• document.write(i); Code to execute during loop

Loop Counter

• var i = 0; Initialization *creates a variable and sets it to 0
• i < 10; Condition loop will continue to run until it reaches a specified number, may also use a variable that holds a number
• i++ Update every time the loop is run it adds one to the counter

break; Exits a loop

continue; Causes the loop to stop the current iteration and then update and check the condition again, if true runs loop again

While Loop will continue as long as the condition in the () is true

var i = 1; //set counter to 1
var msg = ' '; // message

//store 5 times table in a variable
while (i < 10) {
    msg += i + ' x 5 = ' + (i * 5) + '<br />;
    i++;
}

document.getElementByID('answer').innerHTML = msg;

Loop returns the following:

1 x 5 = 5
2 x 5 = 10
3 x 5 = 15
4 x 5 = 20
5 x 5 = 25
6 x 5 = 30
7 x 5 = 35
8 x 5 = 40
9 x 5 = 45

Do While Loop statements come before the condition so the code will run at least once

---

Return to reading-notes Deployed Site

Return to reading-notes Mark Down