1. Doug Holland Sr. Architect Evangelist Microsoft Corporation doug.holland@microsoft.com Html 5 & EcmaScript 5 Windows Internet Explorer 9 & 10

2. Agenda  Windows Internet Explorer 9  Html 5  EcmaScript 5  Windows Internet Explorer 10 Platform Preview  Q&A

3. Windows Internet Explorer 9

4. 2 Million downloads in 2 days!

5. IE9 Pillars Clean Putting the focus on your sites Trusted Secure, reliable, and private Interoperable HTML5 & 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 Fast All around fast using the power of your whole PC

6. Multi-System Performance

7. Using The Full Power of Your PC

8. Windows Internet Explorer 9 Source Code ParserASTInterpreterByteCode Foreground The JavaScript Engine

9. Source Code ParserASTInterpreterByteCode Foreground Windows Internet Explorer 9 Background Background Compiler Native Code Compiled JavaScriptIn The BackgroundUsing Multiple Cores New JavaScript Engine – codename “Chakra”

10. Windows Internet Explorer 9 IE Test Drive Website

11. Windows Internet Explorer 9 Site Mode & Pinning on Windows 7

12. Putting the focus on your sites Your sites shine Seamless with Windows 7 Smarter address bar Streamlined & quieted

13. Build My Pinned Site

14. U.S. Navy Blue Angeles Taking Pinned Sites to Mach 2!

15. Html 5

16. 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 & Silverlight Microsoft’s Position on Html5 & Silverlight

17. A block element that allows developers to draw 2d graphics using JavaScript  Methods for drawing include: paths, boxes, circles, text and rasterized images Your browser doesn’t support Canvas, sorry. var example = document.getElementById("myCanvas"); var context = example.getContext("2d"); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50); Html5

18. Canvas Pad

19. Html5  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

20. Html5

21. Html5  Industry-standard MP3 and AAC audio  Fully scriptable via the DOM

22. Html5

23. 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

24. CSS3 Media Queries Selectively style page based on properties of the media

25. 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

26. @font-face { font-family:MyFontName; src: url('FontFile.woff'); } This will render using MyFontName in FontFile.woff 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

27. EcmaScript 5

28. Quick JavaScript Primer – Variables, Types & Objects EcmaScript 5

33. Quick JavaScript Primer – Operators EcmaScript 5

37. Quick JavaScript Primer – Functions EcmaScript 5

39. Quick JavaScript Primer – Objects + Functions = Methods EcmaScript 5

43. Quick JavaScript Primer – Constructors & Prototypes EcmaScript 5

45. Quick JavaScript Primer – instanceof Keyword EcmaScript 5

47. Quick JavaScript Primer – in Keyword EcmaScript 5

50. EcmaScript Reserved Words breakdeletefunctionreturntypeof casedoifswitchvar catchelseinthisvoid continuefalseinstanceofthrowwhile debuggerfinallynewtruewith defaultfornulltry

51. EcmaScript Reserved Words Additional reserved for future use, not used within EcmaScript 5 today! classenumexportsimport constexportextendssuper

52. EcmaScript Reserved Words EcmaScript 3 Reserves Java Keywords abstractdoublegotonativestatic booleanenumimplementspackagesuper byteexportimportprivate synchronized charextendsintprotectedthrows classfinalinterfacepublictransient constfloatlongshortvolatile While EcmaScript 5 relaxes these rules it is recommended to continue to avoid their usage.

54. EcmaScript 5 What’s New?

55. EcmaScript 5 1999 EcmaScript 3 rd Edition (ES3) 2009 EcmaScript 5 th 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

56. 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

57. 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

58. 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

59. EcmaScript 5 Infinity NaN undefined New Constants (formerly variables in ES3)

60. EcmaScript 5 parseInt(‘08’) == 8 // not 0 as in ES3 parseInt has been fixed

61. 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

63. 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

64. EcmaScript 5 Array.prototype.reduce Array.prototype.reduceRight Array.prototype.some Date.now() Date.prototype.toISOString Array.isArray Object.keys Brand New Methods

65. Windows Internet Explorer 10

66. IE Test Drive Website

67. EcmaScript 5 Strict Mode While legal using ordinary EcmaScript, the following are reserved in strict mode implementsletprivatepublicyield interfacepackageprotectedstatic argumentseval While not fully reserved, the following are not allowed as variable, function, or parameter names in strict mode.

68. 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

69. Q&A