reading-notes

Code Fellows 201

Day 03 Notes

Home

Reading

Learn HTML

Ordered and Unordered lists.

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. 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.

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

• type: This attribute sets the bullet style for the list. The values defined under HTML3.2 and the transitional version of HTML 4.0/4.01 are:
  • circle
  • disc
  • square
  • triangle - A fourth bullet type has been defined in the WebTV interface, but not all browsers support it.

If not present and if no CSS list-style-type property applies to the element, the user agent selects a bullet type depending on the nesting level of the list

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

• When order matters such as a, b, c, d or 1, 2, 3, 4

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

• type: 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”?

• 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.

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

• Making up a block box in CSS we have the:

  • 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?

• In an array we can store various data types — strings, numbers, objects, and even other arrays. We can also mix data types in a single array — we do not have to limit ourselves to storing only numbers in one array, and in another only strings.

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

• Yes, simply reference the row index first then item index, or vertical then horizontal. So Smith is people[1][0]; accountant would be [1][2]

const people = [[‘pete’, 32, ‘librarian’, null], [‘Smith’, 40, ‘accountant’, ‘fishing:hiking:rock_climbing’], [‘bill’, null, ‘artist’, null]];

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

• Assignment x = f() means: x = f()
• Addition assignment x += f() means x = x + f()
• Subtraction assignment x -= f() means x = x - f()
• Multiplication assignment x *= f() means x = x * f()
• Division assignment x /= f() means x = x / f()

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

let a = 10; let b = ‘dog’; let c = false;

// evaluate this (a + c) + b;

The result would be 10dog because c is a boolean value and will not print (return a value to console with other data types) and a and b are different data typs so they are simple concanated.

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

• Anytime you need to have the algorithim make a choice, such as making sure a prompt is not empty.

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

• loops are useful when you know how many times code must run; such as looping through an array to find a value within the array