Code 201, Foundations of Software Development

Class 03 - Reading Notes

Readings: HTML Lists, Control Flow with JS, and the CSS Box Model

Learn HTML

Ordered and Unordered

When should you use an unordered list in your HTML document?

-  The <ul> element is for grouping a collection of items that do not have a numerical ordering, and their order in the list is meaningless. 

How do you change the bullet style of unordered list items?

-  Typically, unordered-list items are displayed with a bullet, which can be of several forms, like a dot, a circle, or a square. The bullet style is not defined in the HTML description of the page, but in its associated CSS, using the list-style-type property.

When should you use an ordered list vs an unordered list in your HTML document?

-   The <ol> and <ul> elements both represent a list of items. They differ in that, with the <ol> element, the order is meaningful. To determine which one to use, try changing the order of the list items; if the meaning is changed, the <ol> element should be used, otherwise you can use <ul>.

Describe two ways you can change the numbers on list items provided by an ordered list?

Sets the numbering type:
    -   a, for lowercase letters
    -   A, for uppercase letters
    -   i, for lowercase Roman numerals
    -   I, for uppercase Roman numerals
    -   1, for numbers (default)

The specified type is used for the entire list unless a different type attribute is used on an enclosed <li> element..

Learn CSS

The Box Model

Describe the CSS properties of margin and padding as characters in a story. What is their role in a story titled: “The Box Model”?

-   There once was a young element named Content, Content had 3 friends, Padding, Border, and Margin.  Element and Padding were the closest while border always remain neutral in arguments.  Then there was Margin.  Margin was jealous because she was always on the outside and felt like she could never get close to content because padding was always in the way.  She was cool with border though.  He was a bit of an outsider himself but he never got jealous of padding. Content was content with being the center of attention but was always with Padding there is no where that Content would go that Padding wouldn't.  Margin vehemently hated Padding for this reason. Border would never allow Margin and Padding to fight, he was always there keeping the peace.  To this day if you look at the box model you will see that they have never changed.. 

List and describe the four parts of an HTML elements box as referred to by the box model.

-  Content box: The area where your content is displayed; size it using properties like inline-size and block-size or width and height.

-   Padding box: The padding sits around the content as white space; size it using padding and related properties.

-   Border box: The border box wraps the content and any padding; size it using border and related properties.

-   Margin box: The margin is the outermost layer, wrapping the content, padding, and border as whitespace between this box and other elements; size it using margin and related properties.

Learn JS

Arrays, Operators and Expressions, Conditionals, Loops

What data types can you store inside of an Array?

- Arrays are basically single objects that contain multiple values, stored in a list, under a singular variable. 

Is the people array a valid JavaScript array? If so, how can I access the values stored? If not, why?

-  You can access individual items in the array using bracket notation and supplying the item's index, in the same way that you accessed the letters in a string.

List five shorthand operators for assignment in javascript and describe what they do.

-   x = f() Assignment

-   x += f() Addition assignment

-   x -= f() Subtraction assignment

-   x *= f() Multiplication assignment

-   x /= f() Division assignment

Read the code below and evaluate the last expression and explain what the result would be and why.

-  when you declare the variable (c) as false, it's a boolean and will result in the entire expression reading false .

Describe a real world example of when a conditional statement should be used in a JavaScript program.

- Conditional statements are used to decide the flow of execution based on different conditions. So, if you needed data input to diverge, dependent on user input, conditional statements would facilitate by directing the varying answers into the correct path.

Give an example of when a Loop is useful in JavaScript.

-  they repeat an action some number of times and the various loop mechanisms offer different ways to determine the start and end points of the loop.

Things I want to know more about:

https://chrisjohnston1986.github.io/reading-notes/201class03reading