Doug Holland

Sr. Architect Evangelist

Microsoft Corporationdoug.holland@microsoft.com

Html 5 & EcmaScript 5 Windows Internet Explorer 9 & 10

Agenda Windows Internet Explorer 9 Html 5 EcmaScript 5 Windows Internet Explorer 10 Platform

Preview Q&A

Windows Internet Explorer 9

2 Million downloadsin 2 days!

IE9 Pillars

CleanPutting the focus on your sites

TrustedSecure, reliable, and private

InteroperableHTML5 & same markup

Full hardware acceleration of all graphics and text

New JavaScript engine

Clean web-centric UI

Seamless with Windows 7

New tab page experience

One Box

Quieter notifications

Download manager with SmartScreen protection

Hang resistance

Add-on performance protection

HTML 5 and modern web standards support

Leading with the W3C

Comprehensive standards tests

FastAll around fast using the power of your whole PC

Multi-System Performance

Using The Full Power of Your PC

Windows Internet Explorer 9

Source Code

Parser AST InterpreterByteCod

e

Foreground

The JavaScript Engine

Source Code Parser AST InterpreterByteCode

Foreground

Windows Internet Explorer 9

BackgroundBackground Compiler

Native Code

Compiled JavaScript In The Background Using Multiple Cores

New JavaScript Engine – codename “Chakra”

Windows Internet Explorer 9IE Test Drive Website

Windows Internet Explorer 9Site Mode & Pinning on Windows 7

Putting the focus on your sites

Your sites shine Seamless with

Windows 7

Smarter address bar Streamlined & quieted

Build My Pinned Site

U.S. Navy Blue AngelesTaking Pinned Sites to Mach 2!

Html 5

• Microsoft is committed to open Web standards such as Html5 and

EcmaScript.

• Microsoft remains committed also to the Silverlight platform and has

recently announced the availability of Silverlight 5 and Silverlight,

along with XNA, is pivotal for Windows Phone development.

• We believe that it is simply a case of using the right tool for the job and

that both technologies are important in our future.

Html5 & SilverlightMicrosoft’s Position on Html5 & Silverlight

A block element that allows developers to draw 2d graphics using

JavaScript

Methods for drawing include: paths, boxes, circles, text and rasterized

images

<canvas id=“SampleCanvas" width="200" height="200"> Your browser doesn’t support Canvas, sorry.</canvas>

<script type="text/javascript"> var example = document.getElementById("myCanvas"); var context = example.getContext("2d"); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50); </script>

Html5 <canvas/>

Html5 <canvas/>Canvas Pad

Html5 <video/>

Industry-standard MPEG-4/H.264 video

Video can be composited with anything else on the

page

HTML content, images, SVG graphics

Hardware accelerated, GPU-based decoding

<video src="video.mp4" id="videoTag" width="640px" height="360px"> <!-- Only shown when browser doesn’t support video --> <!-- You Could Embed Silverlight Video Here --></video>

Html5 <video/>

<audio src="audio.mp3" id="audioTag" autoplay controls> <!-- Only shown when browser doesn’t support audio --> <!-- You could embed Silverlight audio here --></audio>

Html5 <audio/>

Industry-standard MP3 and AAC audio

Fully scriptable via the DOM

Html5 <audio/>

Scalable Vector Graphics

Create and draw 2D vector graphics using XML

Vector images are composed of shapes instead of pixels

Based on SVG 1.1

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"> <rect fill="red" x="20" y="20" width="100" height="75" /> <rect fill="blue" x="50" y="50" width="100" height="75" /></svg>

CSS3 Media Queries

Selectively style page based on properties of the media

<link href="DoNotDisplay.css" rel="stylesheet" media="screen and (max-width:1199px)" type=“ text/css" /> <link href="DoNotDisplay.css" rel="stylesheet" media="screen and (min-width:1301px)" type="text/css" /> <link href="Presentation.css" rel="stylesheet" media="screen and (min-width:1200px) and (max- width: 1300px)" type="text/css" />

div.top { background-color: rgba(0, 0, 0, 0.5);}div.bottom { background-color: hlsa(0, 0%, 0%, 0.5);}

CSS3 Colors & Opacity CSS3 Color

Alpha color with rgba() and hsla() color functions Transparency control with the opacity property

CSS3 Backgrounds and Borders Round corners with the border-radius property Multiple background images per element box-shadow property on block elements

<style type="text/css"> @font-face { font-family:MyFontName; src: url('FontFile.woff'); } </style>

<div style="font: 24pt MyFontName, sans-serif;"> This will render using MyFontName in FontFile.woff</div>

WOFF Fonts WOFF == Web Open Font Format No longer limited to the “web safe” font list! Web Open Font Format allows you to package and deliver fonts

as needed, per site Designed for web use with the @font-face declaration A simple repackaging of OpenType or TrueType font data

EcmaScript 5

Quick JavaScript Primer – Variables, Types & Objects

EcmaScript 5

Quick JavaScript Primer – Operators

EcmaScript 5

Quick JavaScript Primer – Functions

EcmaScript 5

Quick JavaScript Primer – Objects + Functions = Methods

EcmaScript 5

Quick JavaScript Primer – Constructors & Prototypes

EcmaScript 5

Quick JavaScript Primer – instanceof Keyword

EcmaScript 5

Quick JavaScript Primer – in Keyword

EcmaScript 5

EcmaScript Reserved Words

break delete function return typeof

case do if switch var

catch else in this void

continue false instanceof throw while

debugger finally new true with

default for null try

EcmaScript Reserved WordsAdditional reserved for future use, not used within EcmaScript 5 today!

class enum exports import

const export extends super

EcmaScript Reserved WordsEcmaScript 3 Reserves Java Keywords

abstract double goto native static

boolean enum implements package super

byte export import private

synchronized

char extends int protected

throws

class final interface public

transient

const float long short volatile

While EcmaScript 5 relaxes these rules it is recommended to continue to avoid their usage.

http://channel9.msdn.com/events/MIX/MIX11/EXT13

EcmaScript 5 What’s New?

EcmaScript 5

• 1999 EcmaScript 3rd Edition (ES3)

• 2009 EcmaScript 5th Edition (ES5)

• Default

• Strict

• For the short term, work in the intersection of ES3 and

ES5/Strict.

• For the long term, work with ES5/Strict.

• Avoid ES5/Default.

What’s New

EcmaScript 5

• EcmaScript 5 conforms better to reality.

• Browsers will conform better to each other.

• Where browsers disagree, EcmaScript 5 took license to correct the

standard.

• Interoperability is improved.

• If you program well, changes in EcmaScript 5 should have little

impact on you.

What’s New

EcmaScript 5

• Don’t (try not to) break the Web!

• Improve the language for the users of the language, not critics of

the language.

• Third-Party security (mashups).

• Protect stupid people from themselves.

• No new syntax.

Goals for EcmaScript 5

EcmaScript 5

• Don’t (try not to) break the Web!

• Improve the language for the users of the language, not critics of

the language.

• Third-Party security (mashups).

• Protect stupid people from themselves.

• No new syntax.

Goals for EcmaScript 5

EcmaScript 5

• Infinity

• NaN

• undefined

New Constants (formerly variables in ES3)

EcmaScript 5

• parseInt(‘08’) == 8 // not 0 as in ES3

parseInt has been fixed

EcmaScript 5

• Methods can be added without breaking syntax.

• On EcmaScript 5 based browsers, such as Internet Explorer 10, the

native versions of new methods can be used which are very fast.

• On earlier browsers you can add these methods yourself to ensure

your code behaves as expected (although likely slower).

Brand New Methods

EcmaScript 5

• Function.prototype.bind

• String.prototype.trim

• Array.prototype.every

• Array.prototype.filter

• Array.prototype.forEach

• Array.prototype.indexOf

• Array.prototype.lastIndexOf

• Array.prototype.map

Brand New Methods

EcmaScript 5

• Array.prototype.reduce

• Array.prototype.reduceRight

• Array.prototype.some

• Date.now()

• Date.prototype.toISOString

• Array.isArray

• Object.keys

Brand New Methods

Windows Internet Explorer 10

Windows Internet Explorer 10IE Test Drive Website

EcmaScript 5 Strict ModeWhile legal using ordinary EcmaScript, the following are reserved in strict mode

implements let private public

yield

interface package protected static

arguments eval

While not fully reserved, the following are not allowed as variable, function, or parameter names in strict mode.

Resources

HTML5 and Site Mode Demos www.beautyoftheweb.com

IE9 Site Mode Developer Guide http://msdn.microsoft.com/library/

gg131029(VS.85).aspx IE9 HTML5 Developer Guide

http://msdn.microsoft.com/en-us/ie/ff468705.aspx

IE10 Testdrive www.ietestdrive.com

Q&A