Record class

HTML5 Semantic Tags

Semantic HTML adds readability to your HTML tags. There aren't strict rules around

What do semantic tags look like?

    
Page Title
    

        
Home
        
Contact
        
FAQ
    


    

    
Page Title
    


    

section

A section declares a basic grouping of similar content.

• Base Tag <section></section>
• Display type block
• Examples:
  • Grouping of images
  • About an author
  • Group of blog categories

article

Use of the article tag represents a block of content that can be read independently from the rest of the site.

• Base Tag <article></article>
• Display type block
• Examples:
  • News Article
  • User submitted comment
  • Twitter Post

aside

Aside contains content related to the surrounding content.

• Base Tag <aside></aside>
• Display type block
• Examples:
  • Sidebar
  • Notes

header

The header element identifies basic information about the following content.

• Base Tag <header></header>
• Display type block
• Cannot be placed within a footer or another header
• Examples:
  • Site header
  • Header of an article

footer

The footer element identifies basic information about the following content.

• Base Tag <footer></footer>
• Display type block
• Examples:
  • article author information
  • article related documents
  • Website footer links.

nav

The nav element is used to define a list of major navigation links.

• Base Tag <nav></nav>
• Display type block
• Examples:
  • Main site navigation
  • List of reference articles in an article

JavaScript

What is JavaScript

JavaScript is a client side programming language that is executed by the browser. It can be used to build interactive web pages that respond to user input.

Brief History

• Introduced by Netscape in 1995.
• Officially standardized in 1997.
• ES 4 - 2009
• 5th Version - ES 2015 - 2015
• 6th Version - ES 2016 - 2016
• Newest 8th version - ECMAScript 2017 - June 2017

Adding JavaScript to your page

You add JavaScript in a similar way that you add CSS to your page.

• JavaScript can be placed anywhere in your HTML document
• JavaScript is consumed and executed when the browser consumes it.
• JavaScript is event driven.

Inside a script tag

Including a reference to a external script file

    

    
    <script src="script/main.js"></script>

JavaScript Syntax

How JavaScript is properly formatted.

Separating Statements

Each block of JavaScript needs to be separated by a semi colon.

Comments in JavaScript

Easy Outputs

You can use the following methods to easily output information onto the screen.

    <script>
        //Writes to just below the body tag.
        document.write('Hello World');
        //Displays a popup message
        alert('message');
        //Displays to your dev tool's console
        console.log('Hello World');
    </script>

Variables

JavaScript variables are used to store information for later use.

Naming Variables

• Variable names should be unique.
• Variable names are case sensitive.
• The value of a variable

Declaring a Variable

    var foo;
    var bar;

    var foo  = "Hello World";

Variables can be used before they are declared. It makes the code harder to follow.

Naming Variables

• The name of your variable immediately follows the var keyword
• Variable names are case sensitive.
• The only special characters allowed in a variable name are $ and _
• Names must start with a letter or one of the special characters
• The rest of the variable name can include numbers
• It is helpful to use camel casing or _ on multi word variables.

Naming Variables

It's important to give your variables a name that is descriptive of it's purpose.

    var foo  = "Hello World"; //What the heck is a foo?

    var message = "Hello World"; //A message of some sort

    var timeofday = "9:00pm";  //Can be hard to read

    var timeOfDay = "jon.middaugh"; //A little bit easier to read

    var user_name = "jon.middaugh"; //underscore example

    var $foo  = "Hello World"; //Valid

    var pixels80 = "80px"; //Valid

    var 80px = "80px";  //Invalid

    var _name = "Jon";  //Valid

Using a variable in JavaScript

    var message  = "Hello World";

    console.log(message);

JavaScript variable types

We are going to cover the three main primitive types

Boolean

Numeric

String

Boolean

A boolean variable represents a true or false value

    var isBlack = true;
    var isBlue = false;

Booleans are incredibly simple, but we use them all over the place in code.

Numeric Values

Numeric values in JavaScript can be represented in integer or float values.

    var ten = 10;
    var pi = 3.14159265359;

String Variables

String variables are composed of text inside single or double quotes

    var myName = "Jon Middaugh" //Using Double Quotes;
    var yourName = 'John Doe';  //Using single quotes

    var foo = 'You'll be there tomorrow'; //Invalid
    var bar = 'You cannot do this";  //Invalid

What if I need to use an apostrophe or quote in my string?

    var phrase = "I said \"Hello!\"";

    var phrase2 = 'I\'m the best fit';

Create a Pen

Using what we've learned, recreate the website located here

Use Chrome's developer tools to get the information you need to recreate. Try to minimize your work by reusing classes and properties.

Do the following in the JS panel.

• Create 3 variables and populate them
  • Your Name
  • A number between 1 and 100.
  • A boolean value
• Output the 3 variables to the console.

Challenge

• Create two integer variables, add them together and output the sum to the console.
• Create three string variables. Join them together in code and output them to the console.
• Create a Date variable and output the date to the console in the following format "Thursday August 17 2017"
• Retreive the document's title and output it to the console

Super Challenge

• Import a font of your choice from Google's Font library
• Add CSS Media query to display the content like the picture found here here. Make the break point around 600 pixels.