Tag: HTML5

HTML5 Series - Array

If your going to do any sort of JavaScript programming it's not going to be long until you have to work with an array, so there's a few array functions you need to know about.

Push and Pop
Push and Pop are functions that add and remove items from an array. The easiest way to understand what they are doing is to imagine your array as a stack of paper. When you push and item onto the array it's the same as putting it on the top of your pile. When you Pop an item off it's the same as taking the top item from the pile.

1var myArray = [] // Declare a new array
2myArray.push("Red");
3myArray.push("Blue");
4
5var value1 = myArray.pop();
6var value2 = myArray.pop();
7
8alert(value1); // should alert the value Blue
9alert(value2); // should alert the value Red

Foreach loop
Probably one of the most useful functions for an array is the for each loop. A for each loop is essentially calling a function for each item in the array (hence for each). This is particularly useful in all kinds of scenarios.

1var myArray = ["blue", "red", "green"];
2
3myArray.forEach(function (x) {
4 alert(x);
5});

Filter
As the name suggests filtering is a way to find items in your array. If you know C# then it works in a similar way to a lambda expression. The filter function takes a parameter of a function. Like the forEach loop the function is called on each item in the array, the function must then returns either true or false depending on if the filter criteria matched.

In this example notice that the result of myArray.filter is being assigned to another variable. This is because applying the filter wont actually remove items from the myArray array.

1var myArray = ["blue", "red", "green"];
2
3var results = myArray.filter(function(x) {
4 if (x == "blue")
5 return true;
6 else
7 return false;
8})
9
10results.forEach(function (x) {
11 alert(x);
12});

Some, Every
The some and every functions can be used to see if some items in the array match a criteria of if all of them do. They return either true or false.

Like the filter function, a function is passed as the criteria and returns either true or false.

1var myArray = ["blue", "red", "green"];
2
3alert(myArray.some(function (x) {
4 if (x == "blue")
5 return true;
6 else
7 return false;
8})); // Alerts true as 1 item in the array is blue
9
10alert(myArray.every(function (x) {
11 if (x == "blue")
12 return true;
13 else
14 return false;
15})); // Alerts false as not every item in the array is blue

Concat
Concat is used to combine 2 arrays into 2 new array.

1var myArray = ["blue", "red", "green"];
2var myArray2 = ["yellow", "orange"];
3
4var myArray3 = myArray.concat(myArray2);

Slice
Slice lets you create a new array from an existing by letting you specify the start and end item. Those items and the others between then form the new array.

1var myArray = ["blue", "red", "green"];
2var myArray2 = myArray.slice(2, 3); // selects red and green
3

Splice
Splice can be used to add and remove items in an array. The function has the syntax:

arrayName.splice(index, how many, items to add);

Note: the index value starts at 0.

For example in our colour array we could add yellow and orange in between red and green with the following:

1var myArray = ["blue", "red", "green"];
2myArray.splice(2, 0, "yellow", "orange");
3
4myArray.forEach(function (x) {
5 alert(x);
6});

Alternatively we could replace red and green with yellow and orange.

1var myArray = ["blue", "red", "green"];
2myArray.splice(1, 2, "yellow", "orange");
3
4myArray.forEach(function (x) {
5 alert(x);
6});

A couple of others

Sort - Sorts the array into alphabetical order

Reverse - Reverses the order of the array

HTML5 Series - Web Storage

One of the best benefits of HTML5 particularly for Web Apps is the ability to store data locally within the users browser. This means in many places you can speed your Web App up by fetching data once and then retrieving it locally in the future, rather than going back to a server each time.

There are 2 types of storage available localStorage and sessionStorage. The simple difference is that localStorage doesn't expire while sessionStorage expires at the end of the users session.

Both types store data in a key/value list and could not be simpler:

1// local storage
2localStorage.variableName = value;
3
4// session storage
5sessionStorage.variableName = value;

One thing to note though is you can only store text. If you want to store something more complex the simple solution is to convert it to and from JSON. E.g.

1var myColours = [ 'red', 'blue', 'green', 'yellow'];
2
3// Save to local storage
4localStorage.colours = JSON.stringify(myColours)
5
6// Retrieve from local storage
7var retrievedColorus = JSON.parse(localStorage.colours);

HTML5 Series - Error Handling

One thing you can say for certain about writing code is at some point your going to write something that error's. It may be picked up in code reviews, or by a tester, and then fixed but for certain as you are human at some point you will make a mistake. What's important though is what happens after the mistake.

If your a C# developer then good news JavaScript has the same try, catch, finally functionality that C# has and it works in the same way.

Wrap you code that could error with a try statement and curly braces and following it add in a catch statement with the code that you want to execute in the event of an error. Finally if you want some code to execute either way after both, place this in the finally block.

1try
2{
3 functionThatDoesntExists();
4}
5catch (err)
6{
7 alert(err.message);
8}
9finally
10{
11 //Code to execute at the end
12}

Notice the catch section is passed a parameter and I am then alerting a property of this called message. The error parameter can be useful for debugging what actually went wrong and contains a few other parameters.

  • Description
  • Message
  • Name
  • Number
  • Stack

Sometimes you may also want to cause an error to be thrown. You may be asking why, but consider people calling your functions may in-fact pass values that are not valid. You could detect this and throw an error containing some useful information before there incorrect parameter values causes your code to error and a less helpful message given.

1var err = new Error(1, "Oh dear, that's not going to work"); // First parameter is the error number, second is the message
2throw err;

HTML5 Series - Grid

There was a time when an HTML page layout mainly consisted of tables, and lots of them. Tables went inside other tables and complex layouts were achieved through the use of colspans and rowspans. The only problem though was it was a mess.

By using tables the HTML mark-up was dictating the design/layout of the page and if you ever wanted to change anything it was a huge task to undertake. Since then the world has moved on and now most webpages consist mainly of div's. But what if you did want to quite a rigid layout with columns and rows?

HTML5 introduces the Grid style through CSS. Your page can still consist mainly of div's (or anything for that matter), but in your css you set a display property of grid (for now in IE it's -ms-grid). You can then specify a grid-columns and grid-rows property to create a grid within your div.

Child items can be placed in grid cells through grid-row and grid-column properties in the CSS, and if you want something to span more than one cell you can use grid-row-span or grid-column-span.

If you've done any XMAL programming (WPF/Silverlight/Win8/Windows Phone) then this should all sound very similar to XMAL's Grid control.

The example below creates something like this:

1<style>
2 /* Set a grid with 3 columns and 2 rows */
3 div {
4 display: -ms-grid;
5 -ms-grid-columns:200px 200px 200px;
6 -ms-grid-rows:200px 200px;
7 }
8
9 /* Position the child div's in the grid */
10 div:nth-child(1) {
11 -ms-grid-row: 1;
12 -ms-grid-column: 1;
13 }
14 div:nth-child(2) {
15 -ms-grid-row: 2;
16 -ms-grid-column: 1;
17 }
18 div:nth-child(3) {
19 -ms-grid-row: 1;
20 -ms-grid-column: 2;
21 -ms-grid-row-span:2; /* The middle cell spans 2 rows */
22 }
23 div:nth-child(4) {
24 -ms-grid-row: 1;
25 -ms-grid-column: 3;
26 }
27 div:nth-child(5) {
28 -ms-grid-row: 2;
29 -ms-grid-column: 3;
30 }
31
32 /* Add a border to the cells */
33 div>div {
34 border: solid 1px black;
35 }
36</style>
37<div class="myGrid">
38 <div></div>
39 <div></div>
40 <div></div>
41 <div></div>
42 <div></div>
43</div>

It's also worth noting that the column/row sizes can be specified using fractions rather than fixed sizes. e.g. The following will produce a grid 600px wide where the middle column is twice the width of the other 2.

1<style>
2 /* Set a grid with 3 columns and 2 rows */
3 div {
4 display: -ms-grid;
5 width:600px;
6 -ms-grid-columns:1fr 2fr 1fr;
7 -ms-grid-rows:200px 200px;
8 }
9</style>

For another great example check out this hands on page from Microsoft Hands on: CSS3 Grid

HTML5 Series - Fonts

It's an all to common story, designer designs a website hands it to a developer who then goes, "what kind of font is that?" and get's the response of some completely unheard of name. The developer then try's to explain what a web safe font is and they agree to use Arial.

With CSS3 custom fonts are now a reality. On the item you are styling you still set the font family in the same way but additionally in your CSS you specify a @font-face rule so the browser can find out what the font is. The @font-face rule should specify a name and the src of the font. e.g.

1@font-face {
2 font-family: myFont;
3 src: url('myFontFileName.ttf');
4}

One point to note different browsers support different font type. Luckily though you can specify multiple sources for your font.

HTML5 Series - Video

Like Audio embedding Video in an HTML5 web page is really simple to do and has a very similar syntax.

The video tag can contain multiple source tags to specify videos in different formats as not all browsers support the same ones, and some text to be displayed if the browser does not support any. The video tag can also have a controls element specified to instruct the browser to display controls for the playback.

1<video controls>
2 <source src="URL of video.mp4" type="video/mp4">
3 <source src="URL of alternate video.ogg" type="video/ogg">
4 Your browser doesn't support viodes
5</video>

You can also set the following tags:

autoplay - Specifies that the video should begin playback immediately

loop - Sets the video to repeat

muted - Mutes the audio on playback

poster - Specifies an image to be shown what the video is downloading

preload - Specifies if an how the video should be loaded when the page loads

It is also possible to control a videos playback through JavaScript. You can reload the element, play and pause that track.

1var v = document.getElementById("myVideo");
2v.play();
3v.pause();
4v.load();

HTML5 Series - Location

Being able to get a users location opens up some great functionality especially when used on mobile devices that could be anywhere. HTML5 makes it really easy to capture the users latitude and longitude in just a couple of lines of JavaScript.

What's important to remember though is the user always has the option of denying your request for their location so error handling is very important.

First you need to check to see if the device actually support geolocation by doing navigator.geolocation

1if (navigator.geolocation) {
2 // success code to go here
3} else {
4 alert("location not supported");
5}

Next we need to call navigator.geolocation.getCurrentPosition to get the current location. As capturing a location isn't something that happens instantly (first the browser will check with the user that this is ok and then it may take a few seconds for the device to actually work out the location) you need to provide a function that will be called when the location has been established.

After that accessing the location is easy just look at the coords.latitude and cords.longitude properties on the object that was returned to your callback function.

1<script>
2 function getLocation() {
3 if (navigator.geolocation) {
4 navigator.geolocation.getCurrentPosition(function (location) {
5 document.getElementById("latitude").innerText = location.coords.latitude;
6 document.getElementById("longitude").innerText = location.coords.longitude;
7 }, function (error) {
8 alert(error.code);
9 });
10 } else {
11 alert("location not supported");
12 }
13 }
14</script>
15
16Latitude: <span id="latitude"></span>
17Logitude: <span id="longitude"></span>
18
19<button onclick="getLocation();">Get location</button>
20

HTML5 Series - Audio

Traditionally if you wanted Audio on your page you would embed it in a Flash object. But when Steve Jobs declared that the iPhone would never support Flash or any other plug in's, there was suddenly a demand that browsers would need to support this natively and in a consistent way between browsers.

In HTML5 we can do this using the Audio tag. e.g.

1<audio controls>
2 <source src="url of the file" type="audio/mp3">
3 Your browser doesn't support audio.
4</audio>

The above example demonstrates setting the file source for the audio with the source tag, the controls tag tells the browser to show audio controls and there is also some text that will be displayed if the browser doesn't support audio.

It is also possible to set multiple source tags to reference different file formats as not all browsers support the same ones. Alternatively when setting just one source, a src tag can be placed on the actual audio node rather than as a child element.

Other settings which could be set include:

autoplay - determines if the file should start playing on the page load
loop - specifies that the file should repeat when it's finished
preload - instructs the browser to start downloading the audio file when the page has loaded

HTML5 Series - Flexbox

If you've ever done any WPF, Silverlight, Windows Phone or Windows 8 development using xmal then you will appreciate how good it is to have controls like the StackPanel and Grid, and that HTML is rather lacking in its layout functionality. True you can produce most layouts but it just seems needlessely harder.

Thankfully HTML5 improves on this situation by introducing some new CSS properties.
The first is flexbox. When you define a div as a flexbox you can set its containing items to either space themselves out evenly, or you can set ratio values on each item to say how big it should be compared to the other items in the flexbox and they will stretch to fill the flebox.

Examples
In this example the flexbox is set to distributive which means the containing items will keep there size but distribute themselves evenly in the flexbox.

The key CSS is where the class example 1 sets the display to -ms-flexbox which makes example 1 div a flexbox container, and -ms-flex-pack: distribute, which set the flex mode to distribute the containing items evenly.

1 <style type="text/css">
2 .Example1 {
3 display:-ms-flexbox;
4 -ms-flex-pack:distribute;
5 width:400px;
6 border:solid 1px black;
7 }
8 .Example1 div:nth-child(1) {
9 background-color: red;
10 min-width:80px;
11 min-height:80px;
12 }
13 .Example1 div:nth-child(2) {
14 background-color: green;
15 min-width:80px;
16 min-height:80px;
17 }
18 .Example1 div:nth-child(3) {
19 background-color: blue;
20 min-width:80px;
21 min-height:80px;
22 }
23
24 </style>
25<div class="Example1">
26 <div></div>
27 <div></div>
28 <div></div>
29 </div>

In the next example the containing items have had ratios set so that the second item is twice the width of the first and the third remains at a fixed size.

The key CSS to look at here is on the child div's styles where it says -ms-flex: 1 or -ms-flex: 2.

1<style type="text/css">
2 .Example2 {
3 display:-ms-flexbox;
4 width:400px;
5 border:solid 1px black;
6 }
7 .Example2 div {
8 min-width: 80px;
9 min-height: 80px;
10 }
11 .Example2 div:nth-child(1) {
12 background-color: red;
13 -ms-flex: 1 0 auto;
14 }
15 .Example2 div:nth-child(2) {
16 background-color: green;
17 -ms-flex: 2 0 auto;
18 }
19 .Example2 div:nth-child(3) {
20 background-color: blue;
21 min-width:80px;
22 }
23</style>
24
25<div class="Example2">
26 <div></div>
27 <div></div>
28 <div></div>
29</div>

The third example shows how these techniques also work vertically as well as horizontally. See -ms-flex-direction:column on the containing div style.

1<style type="text/css">
2 .Example3 {
3 display:-ms-flexbox;
4 -ms-flex-direction:column;
5 width:400px;
6 border:solid 1px black;
7 }
8 .Example3 div {
9 min-width: 80px;
10 min-height: 80px;
11 }
12 .Example3 div:nth-child(1) {
13 background-color: red;
14 -ms-flex: 1 0 auto;
15 }
16 .Example3 div:nth-child(2) {
17 background-color: green;
18 -ms-flex: 2 0 auto;
19 }
20 .Example3 div:nth-child(3) {
21 background-color: blue;
22 min-width:80px;
23 }
24</style>
25<div class="Example3">
26 <div></div>
27 <div></div>
28 <div></div>
29</div>

Lastly in the fourth example I've shown how items can be set to wrap when they fill up a line with -ms-flex-wrap:wrap;

1<style type="text/css">
2 .Example4 {
3 display:-ms-flexbox;
4 -ms-flex-wrap:wrap;
5 width:400px;
6 border:solid 1px black;
7 }
8 .Example4 div {
9 min-width: 80px;
10 min-height: 80px;
11 }
12 .Example4 div:nth-child(1) {
13 background-color: red;
14 }
15 .Example4 div:nth-child(2) {
16 background-color: green;
17 }
18 .Example4 div:nth-child(3) {
19 background-color: blue;
20 }
21 .Example4 div:nth-child(4) {
22 background-color: yellow;
23 }
24 .Example4 div:nth-child(5) {
25 background-color: orange;
26 }
27 .Example4 div:nth-child(6) {
28 background-color: violet;
29 }
30</style>
31<div class="Example4">
32 <div></div>
33 <div></div>
34 <div></div>
35 <div></div>
36 <div></div>
37 <div></div>
38 <div></div>
39</div>

HTML5 SERIES – COLUMNS

I'm not sure I've ever needed to add columns where text flows from one into the other, but if your doing Windows 8 development where you would want a sideways scroll rather than vertical this could be quite useful.

To create columns using CSS3 you simply set the columns property to either the number of columns you want or the width each columns should be. e.g. This would produce 4 columns.

1<style type="text/css">
2 div {
3 columns: 4;
4 }
5</style>

There are a couple other properties that are also quite useful when using columns.

Column-Gap - Specifies the size of the gap between columns

Column-Fill - Can either be set to auto where columns are filled sequentially and have different lengths, or balance in which case the text will be balanced so each column is even. The default is balance.