Skip to content

Latest commit

 

History

History
88 lines (61 loc) · 3.41 KB

class-03.md

File metadata and controls

88 lines (61 loc) · 3.41 KB
Raw

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
  1. Unordered lists - lits that begin with a bullet. Uses bullets
  • ul> - unordered list
  • li> - list item
  1. 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
  1. 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()

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

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