HTML5 (HF)

<aside>

<aside> is handy for all kinds of things that are chunks of content outside the main flow of your page, like a sidebar, a pull quote, or an after-thought.

<footer>

<footer> is for the bottoms of things. things like <section>s, <article>s and <div>s. You might think you're only allowed one on a page; in fact, you can use it whenever you need footer content on a section of your page (like a bio or references for an article).

<header>

<header> is for the topics of elements like <section> and <article>. You might also use <header> at the top of the body to create the main header for your page.

<nav>

<nav> is navigation and for links. But not just any links: use <nav> when you have a group of links, like navigation for your site, or a blogroll. Don't use it for single links in paragraphs.

<progress>

<progress> represents how far along you are in completing a task. Use a little CSS and JS for some nice effects.

API

A Javascript API is an Application Programming Interface. APIs make it possible to control all aspects of HTML5, like 2D drawing, video playback, and more.

DOM

Document Object Model - The DOM is the browser's internal representation of a web page. Using JavaScript, you can access elements , change elements, and add new elements to the DOM.

HTML5

Markup + Javascript APIs + CSS

innerHTML

Use the innerHTML property of an element to change the element's content.

How many workers can you run?

You can use multiple workers for large computations that can be split into multiple tasks, such as computing a fractal visualization or ray tracing an image. Each worker runs in its own thread, so if your computer has a multicore processor, the workers are run in parallel, which increases the speed of the computation.

localStorage

You can use the Web Storage API (localStorage) to store data in a user's browser.

Math.floor

converts a floating-point number to an integer by dropping all the digits after the decimal point.

Math.random

returns a floating point number between 0 and 1 (but never 1 precisely)

global variables

variables defined outside of functions are known as global variables.

<section>

A <section> is a "generic document". You could use section to mark up, a guide to HTML or to enclose the HTML for a game. A section is not a generic container - that's <div>'s job. And remember, use <div> if you're just grouping elements together for styling purposes.

function

A JavaScript function is a block of code designed to perform a particular task. A JavaScript function is executed when "something" invokes it (calls it). Functions can be named or anonymous. To invoke a function, use its name and pass any arguments it needs. function myFunction(p1, p2) { return p1 * p2; // The function returns the product of p1 and p2 } Functions are values that can be assigned to variables, passed to other functions, stored in arrays, and assigned to object properties.

constructor

A constructor is a function that makes objects. The job of a constructor is to create a new object and initialize its properties. To invoke a constructor to create an object, use the new keyword. For example: new person() Example: function person(first, last, age, eye) { this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eye; } var myFather = new person("John", "Doe", 50, "blue"); var myMother = new person("Sally", "Rally", 48, "green");

this

A method can use a special keyword, this, to refer to the object on which it was invoked.

Web Workers

A web worker is a JavaScript running in the background, without affecting the performance of the page. When executing scripts in an HTML page, the page becomes unresponsive until the script is finished. A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page. You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background. var worker = new Worker("worker.js");

drawImage method

Add an image to your canvas the drawImage method. To add an image, you first need to create an image object and make sure it's completely loaded.

<article>

An <article> is a self-contained chunk of content that you might want to share with another page or website. Perfect for blog posts and news articles.

HTTP Response

An HTTP Response includes a response code that indicates if there was an error with the request. The HTTP response code 200 means the request had no errors.

JSONP

An alternative to XMLHttpRequest for accessing data hosted by web services is JSONP. Use JSONP when you need to access data hosted by a web service on a remote server (assuming the web service supports JSONP). A web service is a web API that is accessed by HTTP. JSONP is a method of retrieving data by using <script> elements. JSONP is JSON data wrapped in Javascript; typically, a function call.

array

An array is a special variable, which can hold more than one value at a time. If you have a list of items (a list of car names, for example), storing the cars in an array could look like this: var cars = ["Saab", "Volvo", "BMW"]; Use an array to store more than one value. To access a value in an array, use an index. An index is an integer number that is the position of the item in the array (starting at 0). The length property of an array tells you how many items are in the array. By combining loops and arrays, you can access each item of an array sequentially.

Undefined/Null

An unassigned variable has the value undefined. Undefined and null are two different values. Undefined means a variable hasn't been assigned a value; null means the variable has the no value.

window.onload

Assign a function to the window.ondownload property to run the code in that function after the browser has finished loading the web page.

document.getElementById

Get access to an element in your web page using document.getElementById. document.getElementbyId uses the id of an element to find the element in the DOM.

events

HTML events are "things" that happen to HTML elements. When JavaScript is used in HTML pages, JavaScript can "react" on these events. An HTML event can be something the browser does, or something a user does. Here are some examples of HTML events: An HTML web page has finished loading An HTML input field was changed An HTML button was clicked Often, when events happen, you may want to do something. JavaScript lets you execute code when events are detected. HTML allows event handler attributes, with JavaScript code, to be added to HTML elements.

shadow variable

If you declare a local variable with the same name as a global variable, the local variable shadows the global variable.

complex data in localStorage

If you need to store more complex data, you can use JavaScript objects and convert them to strings before storing using JSON.stringify, and back to objects after retrieving using JSON.parse.

jQuery

JQuery is a JS library that is aimed at reducing and simplifying much of the JS code and syntax that is needed to work with the DOM, use Ajax and add visual effects to your pages.

JSONP security

JSONP is no more (or less) secure than linking to Javascript libraries using the <script> element. Use caution whenever you link to third-party JavaScript.

strings

JavaScript strings are used for storing and manipulating text. A JavaScript string simply stores a series of characters like "John Doe". A string can be any text inside quotes. You can use single or double quotes: var carname = "Volvo XC60"; var carname = 'Volvo XC60';

Local Storage

Local Storage means your app can store data in the browser to reduce the communication needed with the server. Browsers provide at least 5 mb of storage. The store is persistent, even if you close or quit the browser. Use localStorage.setItem(key) to add a value to the store. Use localStorage.getItem(key) to retrieve a value from the store.

methods

Methods are actions that can be performed on objects. Methods are stored in properties as function definitions.

Modernizr

Modernizr is an open source JavaScript library that provides a uniform interface for detecting browser support. Modernizer takes care of all the details of the different means of detection, even factoring in all the edge cases around browser type so you can see which APIs a site is using.

How do you receive messages back from workers?

Receive message back from workers by setting the worker's onmessage property to a handler function.

Session Storage

Session storage is the same as local storage but only for a session. Session storage items are removed when you close or quit the browser.

<script>

The <script> tag is used to define a client-side script (JavaScript). The <script> element either contains scripting statements, or it points to an external script file through the src attribute. Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content. <script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script>

<source>

The <source> tag is used to specify multiple media resources for media elements, such as <video> and <audio>. The <source> tag allows you to specify alternative video/audio files which the browser may choose from, based on its media type or codec support. <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>

var

The <var> tag is a phrase tag. It defines a variable. Number, boolean and string are primitive types of variables.

<video>

The <video> tag specifies video, such as a movie clip or other video streams. Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg. Tip: Any text between the <video> and </video> tags will be displayed in browsers that do not support the <video> element. <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>

<canvas>

The HTML <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript). The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images. A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content. The markup looks like this: <canvas id="myCanvas" width="200" height="100"></canvas>

JSON.parse method

The JSON response to an XMLHttpRequest is placed in the request's responseText property. To convert the reponseText string to JSON, use the JSON.parse method.

arc method

The arc() method creates an arc/curve (used to create circles, or parts of circles). To create a circle with arc(): Set start angle to 0 and end angle to 2*Math.PI. JavaScript: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(100,75,50,0,2*Math.PI); ctx.stroke();

Where do you add a web worker?

The code for a Web Workers is in a separate file from your page's code. You don't link directly with a worker JS file, you reference that file when you write the worker code. Web Workers don't have access to any of the functions in the code in your page or the DOM.

Web Worker messages

The code in your page and the Web Worker communicate via messages. To send a message to a worker, use postMessage.

callback

The function call that wraps the JSON data in JSONP is referred to as a "callback." Specify the callback function as a URL query parameter in a JSONP request.

unique keys in localStorage

The keys for each localStorage item must be unique. If you use the same key as an existing item, you'll overwrite the value of that item. One way to generate a unique key is to use the current time in milliseconds since 1970, using the Date object's getTime() method.

replaceChild

The method replaceChild replaces an element in the DOM with another element.

properties

The name:values pairs (in JavaScript objects) are called properties. var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

input text value property

The value property sets or returns the value of the value attribute of a text field. The value property contains the default value OR the value a user types in (or a value set by a script). document.getElementById("myText").value = "Johnny Bravo";

<audio>

There is now an audio element and an audio API. It is very similar to the video API.

<hgroup>

This one can be tricky. Unlike <header>, which can contain any element related to a header, <hgroup> is specifically for grouping headings (<h1>...<h6>) together inside a <header>. Good for outlines.

document.createElement

To add a new element to the DOM, you first need to create the element and then add it as a child of an element. Use document.createElement to create a new element. Pass the tag name (e.g. "li") into the function call to indicate what elements to create.

appendChild

To add an element as a child of a parent element in the DOM, get a reference to the parent, and call appendChild on the parent, passing in the child element you're adding. If you add multiple children to a parent by using appendChild, each new child is appended after the other children, so they appear after or below the other children in the page (assuming you're not changing the layout with CSS).

strokeRect

To create a rectangle outline, use strokeRect instead of fillRect.

fillRect

To draw a rectangle in the canvas, use the context.fillRect method. This creates a rectangle filled with color.

context

To draw on a canvas, you first need to create a context. Currently, a 2D context is your only option. A context is needed to draw in the canvas because it provides a specific kind of interface.

fillText

To draw text in canvas, use the fillText method. When you draw text in canvas, you need to specify the position, style and other properties using context properties.

HTTP Request

To get HTML files or data from a server, the browser sends an HTTP request.

importScripts

To include and use JavaScript libraries in your worker file, use importScripts. You can also use importScripts with JSONP. Implement the callback you pass in the URL query in the worker file.

Loop

To repeat blocks of code, use a for or a while loop. For loops and while loops can do the same thing; use whichever one works best for the situation. To end a for or a while loop, the conditional test must be false at some point.

XMLHttpRequest (AJAX)

To send an HTTP request from Javascript, use the XMLHttpRequest object. The XMLHttpRequest object's onload handler handles getting the response from the server. XMLHttpRequest is used in application to update content, such as maps and email, without requiring a page reload. IT can be used to retrieve any kind of text content, such as XML, JSON and more.

<mark>

Use <mark> to mark words, for highlighting or editing. A good one to use with search engine results.

if/else statements

Use if/else statements to make a decision based on a conditional test. Conditional tests are boolean expressions. The if/else statement executes a block of code if a specified condition is true. If the condition is false, another block of code can be executed. The if/else statement is a part of JavaScript's "Conditional" Statements, which are used to perform different actions based on different conditions. In JavaScript we have the following conditional statements: Use if to specify a block of code to be executed, if a specified condition is true Use else to specify a block of code to be executed, if the same condition is false Use else if to specify a new condition to test, if the first condition is false Use switch to select one of many blocks of code to be executed

Web Sockets

Web Sockets is a new API that allows you to keep an open connection with a web service so that any time new data is available the service can just send it to you (and your code can be notified).

Web Storage

Web Storage is a store in your browser and API you can use to save and retrieve items from the store. Web storage consists of local storage and session storage. Web storage is organized by origin (think domain). Each domain has a separate storage, so items stored in one origin are not visible to web pages in another origin.

How does a Web Worker send back a result?

When a worker is ready to send back a result, it calls postMessage and passes the results as the argument. Worker results are encapsulated in an event object and placed in the data property.

Selectors API

With HTML5, we now have a new way of selecting elements from the DOM, inspired by jQuery. You can now use the same selectors you use in CSS to select elements for styling your JavaScript to select elements from DOM with the document.querySelector method.

single-threaded

Without web workers, Javascript is single-threaded, meaning it can only do one thing at a time.

onerror property for workers

Workers also have an onerror property. You can set this to an error handling function that will be called if your worker has a script error.

Can workers use XMLHttpRequest (aka Ajax) and Local Storage?

Yes, but they do not have access to the DOM.

Accessing Object Methods

You access an object method with the following syntax: objectName.methodName() Example name = person.fullName();

Accessing Object Properties

You can access object properties in two ways: objectName.propertyName or objectName["propertyName"]

<abbr>

You can create an abbreviation for that long word. Great for search, because search engines aren't always as smart about abbreviations as we are.

removeItem

You can delete items from localStorage in code use the removeItem(key) method and the clear method. Note that the clear method deletes everything in localStorage at the origin where you do the clear.

How do you see which Web Worker sent a message?

You can find out which worker sent the message using the event.target property. Messages are copied, not shared, between the main page code and the worker.

<time>

You can mark up your times with <time>. There are several valid formats for <time>.

canPlayType

You can programmatically ask the video object if it can play a format with canPlayType. The canPlayType method returns empty string (no support for format), maybe (if it might be able to play the format) or probably (if it confidently thinks it can play the format).

What kind of messages can you send to a Web Worker?

You can send strings and objects to a worker via postMessage. You can't send functions to a worker.

How do you terminate a worker?

You can terminate a worker by calling worker.terminate() from the code in your page. This will abort the worker script. A worker can also stop itself by calling close().

scratch buffer

You can use a scratch buffer to process video before copying it to the display.

localStorage.length

localStorage.length is the number of items in localStorage at a given origin.

objects

objects are collections of properties. For example, a car is an object. A car has properties like weight and color, and methods like start and stop. All cars have the same properties, but the property values differ from car to car. All cars have the same methods, but the methods are performed at different times. Objects are variables too. But objects can contain many values. This code assigns many values (Fiat, 500, white) to a variable named car: var car = { type:"Fiat", model:"500", color:"white" };

setInterval

setInterval is a timer that calls a function at a specified interval. You can use setInterval to make repeated JSONP requests to a server to retrieve new data.

local variables

variables defined in functions, including parameters, are known as local variables. local variables are not visible outside the function in which they are defined. This is known as the scope of a variable.

Numbers

variables that can be integers or floating point numbers.

Boolean

variables that have a value of true and false.