Introduction to HTML5 and JavaScript

A closer look at the fundamentals of web applications

Introduction

Agenda

Topics Covered:

  • Basic HTML
  • Basic JavaScript


HTML and JavaScript Overview

Basic HTML

  • HTML Page Skeleton
  • Elements and Attributes
  • Review
  • Sample HTML document


JavaScript

  • What is JavaScript?
  • HTML DOM and Dot Notation
  • Event Handlers
  • Review

Basic HTML5

HTML Page Skeleton

Components of an HTML Page

  • All HTML pages in their simplest form contain a similar skeleton.
  • At the minimum, the skeleton is comprised of the following fields:
    • <!DOCTYPE HTML>
    • <html>
    • <head>
    • <body>

<!DOCTYPE HTML>

  • The top of the HTML document will always display the doctype declaration.
  • This declaration does not contain code but instead informs the webpage what type of HTML the document is written in.

<html>

  • All content outside of the doctype declaration should be enclosed in the html tag

<head>

  • The head tag is contained within the html tag.
  •  Content that is not displayed on the web page, such as styling features and JavaScript, are housed here.

<body>

  • The body tag is also contained within the html tag and should appear after the closing of the head tag.
  • Content that the user sees on the webpage is contained here.

Elements and Attributes

Elements vs. Attributes

HTML elements provide structure to the webpage by defining its components. Attributes are built on top of elements and provide additional detail for the corresponding element.

Elements

Each element contains an open and close tag which holds all associated attributes and content.

Examples of elements include:

  • <h1> </h1> - heading 1 open and close tags
  • <p> </p>- paragraph open and close tags

Attributes

Attributes can be added to elements to provide additional detail to help define the element or they are required to provide the necessary content.

Examples of attributes include:

  • id= ""- added to an element to give the element a unique name
  • href=""- required when adding a link using <a> element to define the location of the link 

Review

  • The doctype declaration defines the color of the webpage.
  • Attributes are used to provide additional information about an element.
  • Attributes are required for all elements.
  • The body tags are not contained within the html tags.
  • Elements are identified by using <> </>.

HTML Sample Document

Basic JavaScript

What is JavaScript?

What is JavaScript?

  • JavaScript is used to manipulate webpages allowing a user to interact with the environment.
  • JavaScript can call elements from HTML and change the associated attributes or styles.
  • Scripts can be incorporated: 
    • Inline within HTML tags 
    • In a <script> block within the <head> 
    • In an external file

HTML DOM and Dot Notation

HTML DOM

The Document Object Model (DOM) is the browser's view of all elements in relation to each other. Each HTML element is referred to as an object within the DOM and the relationships between the objects can be seen within the hierarchy.

JavaScript uses the DOM to identify the appropriate element within the document structure and then change, add or delete the element.

Dot Notation

Objects within the DOM are identified using dot notation. To identify, the highest level object should be referenced first, working down the hierarchy until the desired object is located.

  • The highest level is always the window
  • Objects can be referenced by either their name/id or their position
    • window.document.loginform
    • window.document.forms [0] - the number in the brackets references the specific form on the page where 0 = the first instance of a form on the page

Event Handlers

Event Handlers

Scripts are often written which cause elements to listen for certain events to happen on the webpage.

These actions are known as event handlers and include:

  • onclick- listens for a button to be clicked
  • onload- listens for all frames to be loaded
  • onmouseover- listens for a pointer to move over

Once the action has occurred, it will cause a set reaction from JavaScript (i.e. the background color changes).


getElementbyId( )

Event handlers are written for a specific object within the DOM.

An easy way to identify an object is by:

  1. Giving the object a unique name by using the id= " " attribute in the HTML
  2. Using the getElementbyId( ) method to referene the unique name.

Review

  • Event Handler
    Listen for an event to occur on the webpage
  • DOM
    Document Object Model
  • JavaScript
    Used to manipulate the webpage making it interactive to the user
  • Dot Notation
    Used to identify objects within the DOM

Review

Review Scenario