CSS and JavaScript

Knowing Your Toolkit

Overview

The basic usage of each: HTML, CSS, and JavaScript
Knowing when to use CSS or JavaScript

Hy·per·Text Mark·up Lan·guage

/ˈhīpərˌtekst ˈmärˌkəp ˈlaNGɡwij/

Car Analogy:

What components are needed to build a car?

What components are on a webpage?

In an web page (HTML document) every element (aka: tag) is an object that lives in the Document Object Model (DOM).

HTML: Content Structure

Hierarchy
Classification and Grouping

<h3>Welcome!</h3>
<p>We've got awesome content:</p>
<ul>
  <li><a href="#">Click Bait Title</a></li>
  <li><a href="#">Clearly a virus</a></li>
            </ul>

Welcome!

We've got awesome content:

Common HTML Elements

Tag	Description
`<header>`	The header section of the webpage
`<h1>`	Most important heading
`<p>`	Paragraph
`<ul>`	Unordered list
`<li>`	List item
`<img>`	Image, requires a source (`src`) attribute
`<a>`	Link, requires a hypertext reference (`href`) attribute
`<div>`	Generic block element
`<span>`	Generic inline element

Additional Resources:
DOM Introduction | HTML element reference

Cas·cad·ing Style Sheet

/kaˈskādiNG stīl SHēt/

Car Analogy:

What attributes belong to the components of our car?

What attributes belong to our web components?

In CSS, these attributes are called properties.

CSS: User Interface

Layout and Positioning
Design and Styles

<h3>Header</h3>
<p id="subtitle">Subtitle</p>
<p class="special">Paragraph</p>
<p class="special">Another paragraph</p>

h3{ color: #f00; }

p{ letter-spacing: 5px }

#subtitle{ font-style: italic; }

.special{ border-top: 1px solid #0f0; }

Header

Subtitle

Paragraph

Another paragraph

Useful CSS Selectors

Selector	Description
`x`	HTML Tag, such as `p`, `header`, `h3`, etc.
`x y`	Descendent
`.x`	Class
`#x`	ID
`[x]`	Attribute
`[x="y"]`	Attribute with value
`::before`	Pseudo Element
`:hover`	Pseudo Class
`x + y`	Immediate sibling

Additional Resource: 30 CSS Selectors You Must Memorize

Useful CSS Properties

Property	Description
`text-align`	Alignment of text; cascades
`font-size`	Size of text; cascades
`display`	How an element renders, if at all (ex. block, inline, none)
`color`	Text color; cascades
`background-color`	Background color
`padding`	Space around an element
`margin`	Space against other elements

Additional Resources:
Box Model | CSS Reference

Ja·va·Script

/ˈjävəskript,ˈjavə-/

Car Analogy:

What actions can we perform on our car?

What actions can we take on our web page?

In JavaScript, these actions are called events. In our JavaScript, we can listen to these events to execute code in response.

JS: User Experience

User Interaction
Event Handling
External Communication

// HTML
<h3>Coin Toss:</h3>
<p id="result">...</p>
<button id="coin-toss-button">Toss Coin</button>

// Javascript
var button = document.getElementById('coin-toss-button');
var result = document.getElementById('result');

button.addEventListener('click', function(){
  result.textContent = Date.now() % 2 ? 'heads' : 'tails';
});

Coin Toss:

...

Remedial jQuery (aka: $)

jQuery is a JavaScript library that allows you to use CSS selectors in your Javascript. (It also can do a lot more, but that's a whole other presentation).

jQuery is aliased as $, so you can use either one, but $ is shorter and easier to follow, so it's pretty rare to see just jQuery.

// HTML
<h3>Coin Toss:</h3>
<p id="result">...</p>
<button id="coin-toss-button">Toss Coin</button>

// JavaScript with jQuery
$('#coin-toss-button').on('click', function(){
  $('#result').text(Date.now() % 2 ? 'heads' : 'tails');
});

Coin Toss:

...

Useful jQuery Methods

Function	Description
`$( selector )`	Get chainable jQuery object
`.on()`	Listen to events (ex. click, hover, mouseover)
`.data()`	Get/set data attributes
`.text()`	Get/set text content
`.html()`	Get/set html content
`.hide()`	Hide elements
`.show()`	Show elements
`.animate()`	Animate elements

Additional Resource: jQuery API

The Law of the instrument

"I suppose it is tempting, if the only tool you have is a hammer,
to treat everything as if it were a nail."

- Abraham Maslow

Requirements:

Show an element's hidden content when hovered.

// HTML
<div class="js-hover">Hello
  <span class="hidden">World!</span>
</div>

// JavaScript
$('.hidden').css('opacity', 0);
$('.js-hover').on('mouseover', function(){
  $('.hidden').stop(true).animate({opacity: 1}, 2000);
}).on('mouseout', function(){
  $('.hidden').stop(true).animate({opacity: 0}, 2000);
});

Hello

Shortcomings

We need to manually handle the animation queue
Need to manually set and reset default state

Ultimately, this simple effect belongs in the CSS.

// HTML
<div class="hoverable">Hello
  <span class="hidden">World!</span>
</div>

// CSS
.hidden{
  opacity: 0;
  transition-property: opacity;
  transition-duration: 2s;
}

.hoverable:hover .hidden{
  opacity: 1;
}

Hello

Why is this better?

Simpler Code
Easy to maintain in the CSS
No animation queue

Requirements:

Create tabs to show and hide content.

Design:

1st Tab 2nd Tab

First Content

JavaScript Implementation

// HTML
<a href="javascript:;" class="js-tab" data-tab="content-1">
  1st Tab
</a>
<a href="javascript:;" class="js-tab" data-tab="content-2">
  2nd Tab
</a>

<p class="js-tab-content" id="content-1">First Content</p>
<p class="js-tab-content" id="content-2">Second Content</p>

 // JavaScript
$('.js-tab-content').not(':first').hide();

$('.js-tab').on('click', function(){
  $('.js-tab-content').hide();

  var content_id = $(this).data('tab');
  $('#' + content_id).show();
});

Javascript Tabs

1st Tab 2nd Tab

First Content

Second Content

CSS Implementation

// HTML
<label for="tab-1">1st Tab</label>
<label for="tab-2">2nd Tab</label>

<input type="radio" id="tab-1" name="tabs" checked>
<p class="tab-content">First Content</p>

<input type="radio" id="tab-2" name="tabs">
<p class="tab-content">Second Content</p>

// CSS
.tab-content,
[name="tabs"]{
  display: none;
}
[name="tabs"]:checked + .tab-content{
  display: block;
}

CSS Tabs

1st Tab 2nd Tab

First Content

Second Content

Reflection

What are the Pros and Cons of each solution?

(Tip: JavaScript is better here.)

Updated Requirements:

Create tabs to show and hide content.
Animate content on change.