/lesson

lesson

CSS

##LO's

  • Construct a CSS rule using selectors, declarations, properties, and values
  • Articulate the pros and cons of stylesheets, styles in the head, and in-line styles
  • Define "cascading" in the context of CSS specificity
  • Style the size, color, border, text, and font of all elements of a given tag on a page
  • Demonstrate the use of class and ID selectors to target specific element(s)
  • Distinguish between block and inline display values
  • Identify the components of the box model
  • Differentiate between the border-box and content-box values for box-sizing
  • Apply knowledge of the box model to adjust spacing between and around elements on a page
  • Bookmark 2-3 good resources that developers can use refer to for CSS help

Separation of Concerns

It is possible to style web pages using html alone. We did this in the early 2000s using mostly images and table borders. CSS allows us to separate the styles of our website/app from the content and behavior:

  • HTML
    • Content
  • CSS
    • Styles
  • JS
    • Behavior

In-line vs head vs stylesheets

Not a codealong let class know they're welcome to but may be better just to pay attention to the first hour instead of typing everything out. All notes available in lesson plan

At the crux of it all, the primary concept of CSS is to select an HTML element and then do something to it. IE. I want to take the body element, and I want to apply a background color to it.

Let's get started by creating a new html webpage that we'll call index.html Let's throw some dummy content into HTML inside our index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>CSS!</title>
</head>
<body>
  <h1>Hello world!</h1>
  <p>This is some fake dummy content. It doesn't matter what it is! Whatever you want! Smelly fish create beautiful works of art in order to achieve world peace.</p>
  <!-- http://hipsum.co/ -->
</body>
</html>

Whiteboard definitions as they come up

So one way we can style elements in HTML is in the tag itself. These are called inline-styles:

<p style="background:blue;"></p>

What's the best way? External stylesheets! Let's create a new file called styles.css:

In our index.html let's go ahead and link to that stylesheet in the <head>:

<head>
  <title>CSS!</title>
  <link rel='stylesheet' href='styles.css'>
</head>

In styles.css:

p{
  background:blue;
}

That seems like a lot more work. And you might be right initially. But we're talking about 1 <p> right now. What if we're talking about 100 <p>'s and now those elements were spread across multiple web pages. Now all of a sudden this last method is less work.

CSS Selectors

As you can see, there's more than one place to target elements. There's also multiple WAYS you can target elements. Let's throw some additional content in index.html:

<body>
  <h1>Hello world!</h1>
  <p>This is some fake dummy content. It doesn't matter what it is! Whatever you want! Smelly fish create beautiful works of art in order to achieve world peace.</p>
  <p class="red">This paragraph tag element has a class of "red"</p>
  <p class="red" id="green">This paragraph tag element has an id of "green"</p>
  <div class="red">This div tag element has a class of "red"</div>
</body>

All I did here was add two <p> elements and added a class of "red" to both and an id of "green" to the last. Additionally I added a <div> element with a class of red.

The first thing I want to do is make it so all elements with the class of "red" has a background of red. In our styles.css:

.red {
  background: red;
}

Awesome, but I think I want just the <p> elements with that class name to have a background of red. So in styles.css:

p.red{
  background: red;
}

Finally to select an element with an id you use #. I'm going to change the background color of the p element with class "green" in our styles.css:

#green{
  background: green;
}

whiteboard common selectors as well as let them know about references at the bottom of the page

CSS Specificity

If I change the css selector from p.red back to .red you'll notice that the paragraph element with the id of green is still green. This is because of CSS Specificity. While CSS cascades from top to bottom. The CSS that is applied depends on Specificity as well. Take the following example:

#green {
  background: green;
}
.red {
  background: blue;
}

.red {
  background: red;
}

In this example the elements that have the class red, will ultimately have a background of red even though blue was set first because it takes the last declared property. However, even though the #green selector was written first, it has a higher specificity and therefore overides the following background properties.

The following list of selector types is by increasing specificity:

  • Universal selectors (e.g., '*')
  • Type selectors (e.g., h1)
  • Class selectors (e.g., .example)
  • Attributes selectors (e.g., [type="radio"])
  • Pseudo-classes (e.g., :hover)
  • ID selectors (e.g., #example)
  • Inline style (e.g., style="font-weight:bold")

You can read more about CSS specificity here You can access a CSS specificty calculator here

The Box Model

One of the tricky things about CSS at first is the Box Model. But it's actually really simple. Let's break it down.

Any HTML element can be considered a box, and so the box model applies to all HTML elements. If you select an element prescribe it a height and width, the content itself will be that height and width.

What the size doesn't include:

  • padding
  • border
  • margin

Let's go into our existing index.html and styles.css and add some stuff to illustrate what I mean. In index.html:

<p>This is a paragraph</p>
<p class="padding">This is a paragraph</p>

In styles.css:

p {
  background: red;
  height: 100px;
  width: 20%;
}

Lets check this out in our chrome browser with the developer tools. As you can see, everything is identical. Which makes sense. Let's go ahead and add some padding to the html element with class "padding". In styles.css:

p {
  background: red;
  height: 100px;
  width: 20%;
}

p.padding {
  padding:10px;
}

Well that's certainly interesting. Even though the dimensions are the same. The element with padding is larger.

Let go ahead and add margin: 10px; and border: 10px solid black; to the padding class as well. Let's inspect that element in the browser and you can see Chrome's clear depiction of content, padding, border and margin.

All these different sizings can be confusing. This can especially be frustrating when you think something's 20 % when in actuality it isn't. Enter box-sizing.

At the top of our styles.css:

* {
  box-sizing: border-box;
}

Now when we refresh, all of our 20% widths are the same regardless of padding. It also includes border! However, it does not include the margin.

CSS Properties and values

References

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference https://css-tricks.com

HTML, CSS and Javascript (20min)

HTML (content), CSS (style) and Javascript (behavior) as the main components of front-end web development.

  • HTML: Structure

  • CSS: Styling

  • JS: ???

  • Javascript defines what happens on a page depending on how you interact with it.

  • When I comment on a post, Facebook is able to process my new comment and render it on the page without refreshing the entire page.

  • Gives the page a much smoother user experience compared to a static page that doesn't have this sort of functionality.

  • Javascript is somehow telling a server that (a) a user has done something, (b) save that interaction and (c) display the results of that interaction to all other users.

So, to the main three components of front-end web development up in one word each...

  • HTML: Structure

  • CSS: Styling

  • Javascript: Behavior

    • “Read-Eval-Print Loop”.
    • Programming environment that lets us run Javascript code one line at a time.
    • What does it do?
      1. (R)eads our code.
      2. (E)valuates it.
      3. (P)rints it to the console.
      4. Then it (L)oops back to the beginning, ready to (R)ead the next line of code we feed it.

Primitive Data Types

Intro (5min)

Primitive data types are the building blocks of Javascript.

  • Whenever you do anything in Javascript, you are creating and changing these basic pieces of information.

There are five primitive data types.

ST-wg: What are they?

  1. Numbers
  2. Strings
  3. Booleans
  4. Undefined
  5. Null

We store data types in variables. A variable is a "bucket" that holds data. You can pass the bucket around, empty it, refill it, etc.

// For example...
var myClass = "WDI6";

// After instantiation you can then reference variables by just their name, without "var".
myClass;
=> "WDI6"

// Variables can not only store single data types but also expressions.
var multiplication = 5 * 2;
=> 10

  • Javascript is a "dynamic" or "untyped" language, meaning a variable can switch between data types.

    // This change is valid in Javascript.
var myFavoriteNumber = 5;
var myFavoriteNumber = "five";

Numbers (10min)

In Javascript, numbers are numerical values -- straightforward!

  • All numbers are of type "number," regardless of format (e.g., integer, float/decimal).
// The "typeof" operator returns the data type of a value
typeof 5;
=> "number"

typeof 5.5;
=> "number"

Operations

  • Math in Javascript follows the same rules you've known since elementary school math.

  • Basic operators: +, -, *, /

    // Addition
10 + 2;
=> 12

// Subtraction
10 - 2;
=> 8

// Multiplication
10 * 2;
=> 20

// Division
10 / 2;
=> 5

  • Order of precedence: P(E)MDAS (Parentheses, Multiplication, Division, Addition, Subtraction)

    // This would be interpreted as...
// Go through step by step with class.
( 4 + 2 ) * ( 12 / 3 );
=> 6 * 4
=> 24

// How would this be interpreted?
// Like operators are processed from left-to-right. In this case, division happens before multiplication.
( 8 / 4 * 2 ) + 1
=> ( 2 * 2 ) + 1
=> 5

  • % (Modulus)

    • Returns the remainder of a division operation.

      // What is the remainder of 12 / 5?
12 % 5;
=> 2

    • Q: Modulus has a pretty handy use case: to check if a number is even.

      • A number is even if it is divisible by 2.

      • Check if a number is even: NUMBER % 2

        • What should this return?
        // Returns 0 if even.
4 % 2;
=> 0

// Returns 1 if odd.
5 % 2;
=> 1

NaN ("Not a number")

  • A special number...that's not a number?

    typeof NaN
=> "number"

    • You usually get NaN when the result of a math operation is not real (e.g., dividing 0 by 0, multiplying strings together).

      0/0;
=> NaN

  • You can test whether a value is a valid number using the isNaN() function.

// isNaN returns false if used on a valid number.
var myFavoriteNumber = 5;
isNaN( myFavoriteNumber );
=> false

Undefined & Null (5min)

Values that indicate the lack of a meaningful value.

  • Anybody else find that weird? How is there more than one data type for nothing?
  • Q: What's the difference?

Undefined: automatically applied to a variable with no value.

// A primitive data type of type undefined with only one value: "undefined".
typeof undefined;
=> "undefined"

// Any property that has not been assigned a value is "undefined".
var nothing;
=> undefined

// A function with no defined return value has a return value of "undefined".

// You won't find yourself assigning "undefined" to a value. That's where "null" comes in.
var nothing = undefined;

Null: an explicitly-assigned non-value.

  • Javascript will never set anything to null by itself. null only appears when you tell it to.

So the main difference between undefined and null is intention. Other than that, they're both...nothing.

Type Coercion

Javascript will try to make sense of any strange operations you throw at it.

  • By "strange", I mean subtracting a number from a string, or multiplying null by 100.
  • It does this through something called "type coercion" -- converting data types.

You might encounter this when dealing with numerical values but for whatever reason some of them are in string form.

  • Q: Have students guess what the results of the following code examples are...
// In some cases Javascript is helpful and converts strings to numbers in the correct way.
"3" - "2"
=> 1

// ...but sometimes it doesn't. In this example, the + operator acts as if it's concatenating two strings.
"3" + "2"
=> 32

// And this?
"five" * 5;
=> NaN

When in doubt, convert data types that should be numbers using parseInt().

// parseInt converts a string to a number value, if available.
parseInt( "3" );
=> 3

parseInt( "burrito" );
=> NaN

There are other examples of type coercion, but the point here isn't to remember them all. Just be aware that sometimes Javascript will fire weird results back at you with no explanation. Sometimes, type coercion might be the culprit.

Strings (10min)

Strings are words in javascript!

We instantiate strings using the "string literal" form.

// Can use single quotes to instantiate a string...
var greeting = 'Hello!';

/// ...or double quotes.
var greeting = "Hi there!";

Escape sequences

  • Sometimes you will need to use special characters or formatting in strings that can't be entered the same way as you would in a word processor. In these cases, you use "escape sequences".

  • Syntax: backslash + letter (e.g., "\n").

  • Examples:

    // "\n" = new line
"Hello\nGoodbye"
=>"Hello"
=>"Goodbye"

// "\t" = tab
"\tOnce upon a time..."
=> "     Once upon a time..."

  • More examples here.

Concatenation

  • Like numbers, you can add strings together using +.

    var city = "Washington, ";
var state = "DC";
var location = city + state;
=> "Washington, DC"

  • You can't, however, use other math operators on strings.

    // Q: What do you think happens when we try to subtract strings from each other?
// When using the "-" operator, the operands are treated as numbers.
"hamburger" - "ham"
=> NaN

// The same goes for multiplication and division.
"hamburger" * 3
=> NaN

String methods

  • Javascript comes with methods you can use to inspect and modify strings.

  • Examples:

    // .search(): find the starting index of a string value.
// String indexes are 0-based, so the index of a string's first character is 0.
var greetings = "Hi there Andy!";
greetings.search( "Andy" );
=> 9

// .slice(): return and store a portion of a string.
var greetings = "Hi there Andy!";
var buddy = greetings.slice( 9, 13 );

    JS: Pega and JS

    ClientCache API

    find(propRefOrHandle)

    Finds and returns an instance of tracked Clipboard entity (a Client Cache entity, either of ClientCacheProperty / ClientCachePage / ClientCacheList) if you pass its fully qualified property reference / ins key

    createPage(pageName)

    Creates a top level page with the supplied name and sets it's value as the passed object. If no object is passed then a blank object is created. If the page already exists, it will be overwritten by new empty page.

    getName()

    Returns name of the property / page / list

    getValue()

    Gets the value of the property

Example:

 EnubeCB.Who_VLDN = function() {
   var isDKRefVisible = EnubeCB.getIsDKRefVisible();
   try {
     if (isDKRefVisible){
       var answer = pega.ui.ClientCache.find("pyWorkPage.Respondent.DoesKnowResident");
       EnubeCB.Required("pyWorkPage.Respondent.DoesKnowPerson","pyWorkPage.Responder.Who");
     } else {
       EnubeCB.Required("pyWorkPage.Respondent.DoesKnowPerson");
     }
   } catch(e) {
       alert("***EnubeCB Error -" + e.message);

   }
};
 function EnubeCB_Who_POST() {
 var workPage = pega.ui.ClientCache.find("pyWorkPage");
 EnubeCB.Who_VLDN();
 if(!workPage.hasMessages()) {
   var rPage = pega.ui.ClientCache.find("pyWorkPage.Responder");
   var qFlags = pega.ui.ClientCache.find("pyWorkPage.Flags");
   var answer = respPage.get("DoesKnowPerson").getValue();
   if(answer == "yes") {
     questFlags.put("NextQuestion","PopCount");
   } else {
     questFlags.put("NextQuestion","ExitPop_status");
   }
 }
}