Week 3

Resources

• JS Intro (view source)
• CSS Quiz (view source):
  • Set 1
  • Set 2
  • Set 3
  • Set 4
  • Set 5
• In-class examples:
  • Fixed position header
  • Fixed position header
  • CSS classes with buttons
  • Highlight class with span
• Position according to MDN
• Display according to MDN
• Normalize CSS
• MDN's list of CSS pseudo-classes
• Absolute Positioning Tutorial
• CSS Specificity Calculator
• MDN on HTML Link Element

CSS Layouts

The way we've managed CSS layouts has evolved over the years. In chronological order:

• Tables: using the <table> tag, you can create columns and rows. This (sort of) allows you to manage complex layouts, but it's really clunky and has some limitations
• Floats: using the CSS property float:left; or float:right; pulls elements out of the layout flow. This has been used to create column layouts, but floating has some idiosyncrasies that require proactive management. Floated elements must be "cleared", and this can cause problems.
• Flexbox: using the CSS property display:flex; is the modern way to manage complex layouts with CSS. It allows you to flexibly size child elements using some special CSS properties such as flex. You can find more info at MDN.

CSS selectors

CSS selectors are how you get things on the page to style them in your CSS. There are a few basic ways to do this:

• by element: a { color: red; }
• by class: .danger { color: red; }
• by id: #warning-text { color: red; }

Remember:

• Classes may be applied to many elements on the page.
• Elements can have many classes!
• An id should be unique to an element on the page (i.e. multiple elements on your page should not share the same id)
• id's should be used sparingly (if at all)... classes are usually a better way to select elements!
• An element can have only one id

Select on multiple things on a single element by chaining selectors together without a space, for example: a.danger.btn { color: red; }

Descendant CSS selectors

You can select nested elements by putting a space between selectors. For example: header a selects all the <a> tags in the header.

Some rules of thumb when nesting CSS selectors:

• Keep it shallow! Deeply nested selectors can get confusing.
• Omit any unnecessary selectors. Keep it as simple as possible!

Why do we need programming languages?

• branching/condtionals: if a certain state is observed, do a thing
• loops: doing the same thing to a whole list of things
• input/output: consuming data and doing something with it

Variables

In programming languages, information is stored in things called variables.

in Javascript variables are created using the keyword var. For example: var x = 1;

Variables can store different types of data, for example:

• Numbers: sometimes called integers (without a decimal) and floats (with a decimal). In Javascript we just call them all numbers
• Strings: some text, programming languages like Javascript are good at manipulating text

Javascript Language Rules

• Lines end with a semicolon (;)
• Some words are reserved, for example var. You can't use them as variable names.
• Variable names can't start with numbers, but they can contain numbers.
• Variable names cannot contain special characters, such as */+-@"
• Variable names cannot contain spaces

Javascript Language Conventions

• Variable names should be camel case for example: forExample

Operators

In the above example (var x = 1;), we call the equals sign (=) the "operator". The operator = assigns a value to a variable. The above example assigns the value 1 to the variable x.

There are other operators used to manipulate values, for example: +, -, *, etc.

Functions

Functions fundamentally have three parts:

• Take in some information. We call this input information 'arguments'. You can supply a function with as many arguments as you like.
• Do something, probably using the information that has been 'passed in' as arguments.
• Return something. Functions in Javascript always return something. If they don't return a specific value, they return a value called undefined.

For example:

function sum(a, b) {
  var result = a + b;
  return result;
}

Functions are called with parentheses, for example, the following returns the number 5:

sum(2, 3);

Javascript and the browser provide you with a bunch of functions you can use to do things. You can find a complete list at MDN. Some examples (try them out!):

• parseInt
• alert
• prompt