View reading-notes on GitHub

Read: 03 HTML Lists, CSS Boxes, JS Control Flow

  1. Materials
    • HTML lists 62-73 Boxes 300-329
    • JS Basic JS 70-73 Decsions and Loops 162-182 Lists boxes and loops are apart of every webpage and can be seen all over the place. Getting a good understanding of something so widely used will help create better performing products.

Lists

  1. Ordered lists - each item in the list is numbered. Uses numbers
    • ol> - ordered list
    • li> - list item
  2. Unordered lists - lits that begin with a bullet. Uses bullets
    • ul> - unordered list
    • li> - list item
  3. Definition lists - made up with aset of terms, also with the terms definitions. Uses defined terms
    • dl> - definition list - consits of a series of terms and definitions
  • dt> - defined terms
  • dd> - Definition

Lists can be nested inside onanother

Boxes

  1. Bordering, Margin and padding
    • Every box has 3 available properties that can be adjusted to control its appererance.
    • Border
    • Margin
    • Padding
  2. White space and vertical margin
    • padding and margin properties are helpful in adding space between items on the page.
    • CSS treats each HTML element as if it has its own box
    • You can use CSS to control the dimensions of a box
    • you can control the boarders, margins and padding for each box with CSS
    • Its possible to hide elements using the display and visibility properties
    • Block-level boxes can be made into inline boxes, and inline boxes made into block-level boxes
    • Legibility can be improved by controling the width of boxes containing text and the leading.
    • CSS3 has introduced the ability to creat inage boarders and rounded boarders
    • Arrays store not just one value but a list of values
    • Use an array if you are working with a list of related values
    • Two different types of ways to create an array, array literal var coffee , coffee = [‘black’, ‘capi’] and array constructor(uses the keyword (new)before the array. ex new Array()

  2. Switch statement starts with a variable called the switch value. Each case indicates a possible value for this var and the code that should run if the var matches that value.

  3. if else
    • There is no need to provide an else option( you can use jus the if if you need to)
    • With a series of if statements they are all checked even if a match has been found, it performs slower than switch
  • VS
  1. Switch
    • You have a default option that is run if none of the cases match
    • If a match is found that code is run, then the break statement stops the rest of the switch statement running, providing better performance than multiple if statements
  2. Decisions and Loops
    • Conditional statements allow your code to make decsions about what to do next
    • Comparision operator(===, !==, ==, !=, <,>, <=,=>) are used to compare two operands
    • Logical operators allow you to combine more than one set of comparison operators
    • if… else statements allow you to run one set of code if a condition is true and another if it is faluse
    • switch statements allow you to compare a value against possible outcoomes, and also privoes a default option if none match
    • Data types can be coerced from one type to another
    • all values evaluate to either truthy or falsy
    • ther are 3 type sof loop: for, while and do…while. Each repeats a set of statements

Things I want to know more about

  1. Switch statements and seeing some in real time
  2. Get a better understand of if..else statements

Java Script & Jquery, Jon Duckett