Getting Started with Front-End Web Development

Presenter Notes

View Slides Here

http://bit.ly/pearlhacks2015

Presenter Notes

HTML Reference

https://developer.mozilla.org/en-US/docs/Web/HTML

Presenter Notes

HTML Overview

Basis of all web pages
A markup language for documents
Other technologies enhance the page (such as CSS, JavaScript, Flash, AJAX)

Presenter Notes

History

Originally designed by Tim Berners-Lee at CERN for reading rich text documents on work stations
Various versions for years, HTML5 is standard ~everywhere for past few years

Presenter Notes

Semantics

HTML is content
Content is separate from presentation
Consists of a pre-defined set of elements

Presenter Notes

HTML Tags

Tags use angle brackets, such as <p>
Often have a corresponding closing tag, such as </p>
Can be nested within each other

<!DOCTYPE html>
<html>
    <head>
        <title>Title of the page in the browser window</title>
    </head>
    <body>
        <p>The simplest possible web page</p>
    </body>
</html>

Presenter Notes

JSFiddle

http://jsfiddle.net/qpqfvdrL/

Presenter Notes

HTML Attributes

Tags can have attributes.

<a href="www.google.com">A link to google</a>

The href="" part is an attribute

Presenter Notes

Example Content Tags

<h1>A very large heading</h1>
<h2>A smaller heading</h2>
<h3>Smaller heading still</h3>
<p>A paragraph</p>
<a href="http://www.twitter.com">A link to twitter</a>
<img alt="Google" src="http://www.google.com/images/srpr/logo11w.png"/>

Presenter Notes

Nesting Warning

Tags should be closed appropriately when nesting. E.g:

<!-- Valid -->
<a href="www.google.com">
    <h1> Nice heading</h1>
</a>

<!-- Invalid -->
<a href="www.google.com">
    <h1> Nice heading</a>
</h1>

Presenter Notes

HTML Entities

Can't put <p> in the middle of your text. It will be used as a tag
Must use entities

&gt; >
&lt; <
&amp; &
&quot; "

Presenter Notes

Pause

Presenter Notes

Semantic Tags

<div id="content">
    <p>Content <span class="inline-emphasis">here</span></p>
</div>

Div - A section or block that goes together
span - Like a div, but inline

Presenter Notes

Id vs. Class

id - unique on page, like a user
class - not unique, like a group
Used with CSS and JavaScript:
- Choose the element with an id
- Choose the elements with a class

Presenter Notes

CSS

A declarative language for specifying how a document is presented
"styling"

Presenter Notes

Reference

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started

Presenter Notes

CSS Syntax

selector
property
value

Presenter Notes

CSS Syntax Example

p {
    text-align: left;
}

p - selector
text-align - property
left - value

Presenter Notes

CSS Semantics

For content matching this selector:
- Set the property to this value

p {
    text-align: left;
}

For content in a p tag, set the text-alignment to left

Presenter Notes

Id vs. Class

<p class='emphasized' id='desc'>Information</p>

// All elements with emphasized class will be bold
.emphasized {
    font-weight: bold;
}

// The element with desc id will have a margin
#desc {
    margin: 4px 2px;
}

Presenter Notes

CSS Selectors

Combining tags, class, and id

<p class="emphasized">Content</p>
<p id="desc">Content</p>

// A p tag with emphasized class
p.emphasized {
    font-weight: bold;
}

// A p tag with desc id
p#desc {
    margin: 4px 2px;
}

Presenter Notes

CSS Selector Group

Combine selectors into comma-separated list

// elements with either class
.emphasized, .interesting {
    font-size: 10px;
}

, - OR

Presenter Notes

CSS Descendant Combinator

Combine selectors into space-separated list
A B {... -> B is a descendant of A

// Element with interesting class, inside element with emphasized class
.emphasized .interesting {
    font-style: italic;
}

Presenter Notes

CSS Selectors

Combining tags, class, and id

<p class="emphasized">Content</p>

<span class="emphasized><p>Content</p></span>

// A p tag with emphasized class
p.emphasized {
    font-weight: bold;
}

// A p tag of an emphasized class element (likely div or span)
p .emphasized {
    font-weight: bold;
}

Presenter Notes

Fiddle with Box Model

http://jsfiddle.net/qpqfvdrL/1/

http://www.w3schools.com/css/css_boxmodel.asp

Presenter Notes

Pause

Presenter Notes

Local Setup

Create a file in a text editor. Save as filename.html
Go to file:///path/to/filename.html in a browser

Presenter Notes

Chrome Inspector Tools

Presenter Notes

JavaScript

Presenter Notes

Reference

https://developer.mozilla.org/en-US/docs/Web/JavaScript

http://superherojs.com/

https://github.com/airbnb/javascript

Presenter Notes

JavaScript

Original purpose - animations and effects
Allows for programming that runs in a browser
Can now run outside of a browser (Node.js)

Presenter Notes

JavaScript Design

Somewhat OOP, somewhat FP
Dynamic and weakly typed
Syntax is C/Java-like
Closer to Python/Ruby than C/Java in semantics

Presenter Notes

JavaScript Syntax

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

{}- block
; - statement

Presenter Notes

JavaScript Data

Numbers, Strings, Booleans, null, undefined

var a = 3;
var b = 3.4;
var c = 'Oh hai';
var d = null;
var e = undefined;

Presenter Notes

Functions

function(arg) {
    console.log(arg);
    return arg;
}

Presenter Notes

Functions

// Function declaration
function func(arg) {
    console.log(arg);
    return arg;
}

// Function expression
var func = function (arg) {
    console.log(arg);
    return arg;
}

Presenter Notes

Inline Function

var sidebar = document.getElementById('sidebar');

sidebar.onclick = function(event) {
    console.log(event, 'clicked');
};

Presenter Notes

DOM

Document Object Model
HTML + CSS in a tree data structure
JavaScript queries DOM and updates it

var sidebar = document.getElementById('sidebar');

console.log(sidebar.outerHTML);
console.log(sidebar.innerHTML);
sidebar.innerHTML = '<p>New content</p>';
sidebar.hide();
sidebar.show();

Dom Overview Reference

http://www.w3schools.com/js/js_htmldom_navigation.asp

var sidebar = $('#sidebar');
sidebar.html('<p>New Content</p>');

Presenter Notes

JQuery

Library for simpler DOM API
Ajax, animation, other features added in.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

N.B. CDN

Presenter Notes

Pause

Presenter Notes

JavaScript Animation Example

Change body to

<body>
    <p id="message">JavaScript is Fun</p>
    <button id="bounce">Click here to bounce</button>
    <script>
        $("button#bounce").click(function() {
            $("p#message").slideUp(500).slideDown(500);
        });
    </script>
</body>

Presenter Notes

JQuery Animation Callbacks

Change script tag to:

$("button#bounce").click(function() {
    $("p#message")
        .slideUp(500)
        .slideDown(500, function() {
            $(this).css('color', 'red');
        });
});

Presenter Notes

JQuery Animation Callbacks Continued

Change script tag to:

$("button#bounce").click(function() {
    $("p#message")
        .css('color', 'red')
        .slideUp(500)
        .slideDown(500, function() {
            $(this).css('color', 'black');
        });
});

Presenter Notes

JQuery Animation Future-Proofing

$("button#bounce").click(function(){
    var $el = $('p#message'),
        el_orig_color = $el.css('color');
    $el
        .css('color', 'red')
        .slideUp(500)
        .slideDown(500, function(){
            $(this).css('color', el_orig_color);
        });
});

Presenter Notes

Pause

Presenter Notes

JavaScript Chain Select Example

Saved in a fiddle - http://jsfiddle.net/sz7n3vrj/

Be sure jQuery is loaded

// HTML body
<form>
  <label>Make:</label>
  <select name="make">
      <option value="ford">Ford</option>
      <option value="chev">Chevrolet</option>
      <option value="toyo">Toyota</option>
      <option value="volk">Volkswagen</option>
  </select>
  <br/>
  <label>Model:</label>
  <select name="model">
      <option value="NA">--Please choose a Make--</option>
  </select>
  <input type="submit" value="Submit">
</form>

Presenter Notes

JavaScript Chain Select Continued

// JavaScript
var make_model_lookup = {
  'ford': [
      ['taur', 'Taurus'],
      ['esco', 'Escort']
  ],
  'chev': [
      ['cava', 'Cavalier'],
      ['volt', 'Volt']
  ],
  'toyo': [
      ['camr', 'Camry'],
      ['coro', 'Corolla']
  ],
  'volk': [
      ['jett', 'Jetta'],
      ['golf', 'Golf']
  ]
};

Presenter Notes

More JS

$('select[name=make]').change(function() {
  var $select_model = $('select[name=model]'),
      make_value = this.value,
      model_options_list = make_model_lookup[make_value];
  $select_model.find('option').remove();
  for(var i = 0; i < model_options_list.length; i++) {
      var model_value = model_options_list[i][0],
          model_display_value = model_options_list[i][1];
      var model_option =
          '<option value="' + model_value + '">' +
          model_display_value + '</option>';
      $select_model.append(model_option);
  }
});

Presenter Notes

JavaScript Chain Select

select "Make" - On change event, sets options for model select
.change() - Takes a function as an argument.
hardcoded lookup table - Might be AJAX in context
N.B. select options for "make" must line up with lookup table

Presenter Notes

Pause

Presenter Notes

JavaScript Warts

Presenter Notes

JavaScript Variables

global by default - use var

x = 3
// ...
var weird_add = function(a, b) {
    x = a + 1;
    y = b + 1;
    return x + y - 2;
}
console.log(weird_add(10, 20));
console.log(x);

var x = 3
// ...
var weird_add = function(a, b) {
    var x = a + 1;
    var y = b + 1;
    return x + y - 2;
}
console.log(weird_add(10, 20));
console.log(x);

Presenter Notes

JavaScript Weak Types

"37" - 7 // 30
"37" + 7 // "377"

Presenter Notes

JavaScript Equality

https://www.bram.us/2015/01/18/equality-in-javascript/

Presenter Notes

JavaScript this

this can be window

  $("button#bounce").click(function() {
      $("p#message")
          .slideUp(500)
          .slideDown(500, function() {
              // Here, this is the current element
              $(this).css('color', 'red');
          });
  });

// Here, this is the window
this === window; // true
this.document === document; // true

unless using "use string";

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

Presenter Notes

JavaScript 'use strict'

Add the following

// top of file
'use strict';

// OR

function func(arg) {
    'use strict';
    // ... function body
    return x
}

Table of Contents	t
Exposé	ESC
Full screen slides	e
Presenter View	p
Source Files	s
Slide Numbers	n
Toggle screen blanking	b
Show/hide slide context	c
Notes	2
Help	h

Dom Overview Reference

Table of Contents

Help