70 480 JavaScript and HTML5

download 70 480 JavaScript and HTML5

of 22

Transcript of 70 480 JavaScript and HTML5

Back in the summer I took the 71-480 (Beta exam Programming in HTML5 with JavaScript and CSS3) and failed it. This is one of the new line of Microsoft developer certifications for both the web platform and for developing Windows Store (formerly known as Metro) applications. At that time I had very little experience in developing HTML5 applications or in using jQuery. Since then I have been using it professionally for about six months. I had a background in HTML and JavaScript before the advent of HTML5 but most of my professional experience was in the data access and what you might consider dev ops Windows Server administration, SQL Server, IIS, and of course SharePoint.HTML5 (Windows) Reference

La etiqueta < address > define la informacin de contacto del autor / propietario de un documento o un artculo.Si el elemento es < address > dentro del elemento , representa la informacin de contacto para el documento.Si el elemento < address > est dentro de un elemento , representa la informacin de contacto de ese artculo.

Internet Explorer 9 Windows Internet Explorer 9 (abbreviated as IE9) was released to the public on March 14, 2011 at 21:00 PDT.....

La etiqueta especifica el contenido independiente, autnomo.Un artculo debe tener sentido por s mismo y que debera ser posible distribuir de forma independiente del resto del sitio.

My family and I visited The Epcot center this summer.

Epcot Center The Epcot Center is a theme park in Disney World, Florida.

La etiqueta define algn contenido al margen de los contenidos que se coloca pulgEl contenido de un lado debe estar relacionado con el contenido circundante.

Your browser does not support the audio tag.

autoplayNewautoplaySpecifies that the audio will start playing as soon as it is ready

controlsNewcontrolsSpecifies that audio controls should be displayed (such as a play/pause button etc).

loopNewloopSpecifies that the audio will start over again, every time it is finished

mutedNewmutedSpecifies that the audio output should be muted

preloadNewautometadatanoneSpecifies if and how the author thinks the audio should be loaded when the page loads

srcNewURLSpecifies the URL of the audio file

EjemploAislar los nombres de usuario de los ajustes de texto de direccin alrededores:

  • User hrefs: 60 points
  • User jdoe: 80 points
  • User : 90 points

BDI es sinnimo de aislamiento bidireccional.La etiqueta asla una parte de texto que pueda ser formateada en una direccin distinta de otro texto fuera de ella.Este elemento es til al incrustar el contenido generado por el usuario con una direccionalidad desconocido.

EjemploDibuja un cuadrado rojo, sobre la marcha, y mostrarlo dentro del elemento :

Your browser does not support the HTML5 canvas tag.

var c=document.getElementById('myCanvas');var ctx=c.getContext('2d');ctx.fillStyle='#FF0000';ctx.fillRect(0,0,80,100);

La etiqueta se utiliza para dibujar grficos, sobre la marcha, a travs de secuencias de comandos (normalmente JavaScript).La etiqueta es slo un contenedor de grficos, debe utilizar un script para llamar la realidad de los grficos.AttributeValueDescription

heightNewpixelsSpecifies the height of the canvas

widthNewpixelsSpecifies the width of the canvas

EjemploUn elemento puede ser marcado de la siguiente manera:

function save(){alert("Some javaScript....");}

Save

Note: The command element is currently only supported in IE9.

La etiqueta define un comando (una casilla, una casilla de verificacin o un botn de comando) que el usuario puede invocar.Un comando puede ser parte de un men contextual o la barra de herramientas, utilizando el elemento , o se puede poner en cualquier otro lugar de la pgina, para definir un atajo de teclado.AttributeValueDescription

checkedNewcheckedSpecifies that the command should be checked when the page loads. Only for type="radio" or type="checkbox"

disabledNewdisabledSpecifies that the command should be disabled

iconNewURLSpecifies an image that represents the command

labelNewtextRequired. Specifies the name of the command, as shown to the user

radiogroupNewgroupnameSpecifies the name of the group of commands that will be toggled when the command itself is toggled. Only for type="radio"

typeNewcheckboxcommandradioSpecifies the type of command

Note: The datalist tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.

La etiqueta especifica una lista de opciones predefinidas para un elemento .La etiqueta se utiliza para proporcionar una funcin de "autocompletar" en elementos .Los usuarios podrn ver una lista desplegable de opciones predefinidas como datos que de entrada.Utilice atributo de lista del elemento para ligarlo con un elemento .

Copyright 1999-2011. - by Refsnes Data. All Rights Reserved.All content and graphics on this web site are the property of the company Refsnes Data.

Note: The details tag is currently only supported in Chrome and in Safari 6.

La etiqueta especifican otros detalles, que el usuario puede ver o esconder bajo demanda.La etiqueta puede utilizar para crear un widget de interactivo que el usuario puede abrir y cerrar.Cualquier tipo de contenido se puede poner dentro de la etiqueta .El contenido de un elemento no debe ser visible a menos que se establece el atributo abierto.

Note: The dialog tag is only supported in Chrome and Safari 6.

January This is an open dialog windowFebruaryMarch

312831

La etiqueta define cuadro de dilogo aa, inpector o ventana.AttributeValueDescription

openNewopenSpecifies that the dialog element is active and that the user can interact with it

La etiqueta define un contenedor para una aplicacin externa o contenido interactivo (un plug-in).

AttributeValueDescription

heightNewpixelsSpecifies the height of the embedded content

srcNewURLSpecifies the address of the external file to embed

typeNewMIME_typeSpecifies the MIME type of the embedded content

widthNewpixelsSpecifies the width of the embedded content

The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.

Fig.1 - A view of the pulpit rock in Norway.

La etiqueta define un ttulo para unelemento.El elemento puede ser colocado como el primer o el ltimo hijo del elemento .

The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.

La etiqueta especifica contenido autnomo, como ilustraciones, diagramas, fotos, listas de cdigos, etcMientras que el contenido del elemento est relacionada con el flujo principal, su posicin es independiente de la corriente principal, y si se quita no debera afectar el flujo del documento.

Posted by: Hege Refsnes Contact information: [email protected].

La etiqueta define un pie de pgina de un documento o seccin.Un elemento debe contener informacin acerca de su elemento contenedor.A pie de pgina suele contener el autor del documento, informacin de copyright, enlaces a trminos de uso, informacin de contacto, etcUsted puede tener varios elementos en un solo documento.

Internet Explorer 9 Windows Internet Explorer 9 (abbreviated as IE9) was released to the public on March 14, 2011 at 21:00 PDT.....

La etiqueta especifica un encabezado de un documento o seccin.El elemento debe utilizarse como un contenedor para el contenido de introduccin o un conjunto de enlaces de navegacin.Usted puede tener varios elementos en un solo documento.Nota:Una etiqueta no puede ser colocado dentro de un , u otro elemento .

Username: Encryption:

Note: The keygen tag is not supported in Internet Explorer.

La etiqueta especifica un campo generador de par de claves utilizado para formularios.Cuando se enva el formulario, la clave privada se almacena localmente, y la clave pblica se enva al servidor.AttributeValueDescription

autofocusNewautofocusSpecifies that a element should automatically get focus when the page loads

challengeNewchallengeSpecifies that the value of the element should be challenged when submitted

disabledNewdisabledSpecifies that a element should be disabled

formNewform_idSpecifies one or more forms the element belongs to

keytypeNewrsadsaecSpecifies the security algorithm of the key

nameNewnameDefines a name for the element

Do not forget to buy milk today.

La etiqueta define el texto marcado.Utilice la etiqueta si quieres resaltar partes del texto.

Display a gauge:2 out of 10
60%

Note: The meter tag is not supported in Internet Explorer.

La etiqueta define una medida escalar dentro de un rango conocido, o un valor fraccionario.Esto tambin se conoce como un indicador.Ejemplos: uso de disco, la importancia de un resultado de la consulta, etcNota:La etiqueta no se debe utilizar para indicar el progreso (como en una barra de progreso).Para las barras de progreso, utilice eltag.AttributeValueDescription

formNewform_idSpecifies one or more forms the element belongs to

highNewnumberSpecifies the range that is considered to be a high value

lowNewnumberSpecifies the range that is considered to be a low value

maxNewnumberSpecifies the maximum value of the range

minNewnumberSpecifies the minimum value of the range

optimumNewnumberSpecifies what value is the optimal value for the gauge

valueNewnumberRequired. Specifies the current value of the gauge

HTML |CSS |JavaScript |jQuery

La etiqueta define un conjunto de vnculos de navegacin.No todos los enlaces de un documento debe estar en un elemento .El elemento es slo para grandes bloques de vnculos de navegacin.Los navegadores, tales como lectores de pantalla para usuarios con discapacidad, puedan utilizar este elemento para determinar si se debe omitir la prestacin inicial de este contenido.

0100+=

Note: The output tag is not supported in Internet Explorer.

La etiqueta representa el resultado de un clculo (como uno realizado por un script).

AttributeValueDescription

forNewelement_idSpecifies the relationship between the result of the calculation, and the elements used in the calculation

formNewform_idSpecifies one or more forms the output element belongs to

nameNewnameSpecifies a name for the output element

Downloading progress:

Note: The progress tag is not supported in Internet Explorer 9 and earlier versions.

La etiqueta representa el progreso de una tarea.Consejo:Utilice la etiqueta conjuntamente con JavaScript para mostrar el progreso de una tarea.Nota: La etiqueta no es adecuado para la representacin de un indicador (por ejemplo, uso de espacio en disco o relevancia de un resultado de consulta).Para representar un indicador, utilice eletiqueta en su lugar.AttributeValueDescription

maxNewnumberSpecifies how much work the task requires in total

valueNewnumberSpecifies how much of the task has been completed

WWF The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.

WWF's Panda symbol The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.

La etiqueta define las secciones de un documento, como captulos, encabezados, pies de pgina o cualquier otra seccin del documento.

Your browser does not support the audio element.

La etiqueta se utiliza para especificar mltiples recursos de los medios para los elementos multimedia, como y .La etiqueta permite especificar video alternativo / archivos de audio que el navegador puede elegir, en funcin de su tipo de papel o soporte codec.AttributeValueDescription

mediaNewmedia_querySpecifies the type of media resource

srcNewURLSpecifies the URL of the media file

typeNewMIME_typeSpecifies the MIME type of the media resource

Copyright 1999-2011. - by Refsnes Data. All Rights Reserved.All content and graphics on this web site are the property of the company Refsnes Data.

Note: The summary element is currently supported only in Chrome and Safari 6.

La etiqueta define un visible en direccin a laelemento.El ttulo se puede hacer clic para ver / ocultar los detalles.

We open at 10:00 every morning.

I have a date on Valentines day.

Note: The time element does not render as anything special in any of the major browsers.

La etiqueta define bien una hora (reloj de 24 horas), o una fecha en el calendario gregoriano, opcionalmente con un tiempo y un desplazamiento de la zona horaria.Este elemento puede utilizarse como una manera de codificar fechas y horas en una forma legible por mquina de modo que, por ejemplo, los agentes de usuario pueden ofrecer para aadir recordatorios de cumpleaos o eventos programados para el calendario del usuario, y los motores de bsqueda pueden producir resultados ms inteligente de bsqueda.AttributeValueDescription

datetimeNewdatetimeGives the date/time being specified. Otherwise, the date/time is given by the element's contents

< track >

La etiqueta especifica pistas de texto para los elementos multimedia ( y ).Este elemento se utiliza para especificar subttulos, archivos de subttulos u otros archivos que contienen texto, que debe ser visible cuando los medios de comunicacin se est reproduciendo.AttributeValueDescription

defaultNewdefaultSpecifies that the track is to be enabled if the user's preferences do not indicate that another track would be more appropriate

kindNewcaptionschaptersdescriptionsmetadatasubtitlesSpecifies the kind of text track

labelNewtextSpecifies the title of the text track

srcNewURLRequired. Specifies the URL of the track file

srclangNewlanguage_codeSpecifies the language of the track text data (required if kind="subtitles")

< wbr >

Try to shrink the browser window, to view how the word "XMLHttpRequest" in the paragraph below will break:

To learn AJAX, you must be familiar with the XMLHttpRequest Object.

Note: The wbr element is not supported in IE.

El (Word rotura Opportunity) etiqueta especifica que en un texto que estara bien aadir un salto de lnea.Consejo:Cuando una palabra es demasiado largo, o tienes miedo de que el navegador va a romper sus lneas en el lugar equivocado, puede utilizar el elemento aadir palabra oportunidades de quiebre.

HTML5 LabsIE Developer DocumentationChannel 9 HTML5 Jump Start for 70-480 and MS Virtual Academy: Developing in HTML5 with JavaScript and CSS3 Jump Start.JavaScript Design Patterns A book by Addy OsmaniPluralSight.com (Paid developer training, but they do have a free trial and a starter subscription for MSDN members)Implement and Manipulate Document Structures and Objects (24%)Create the Document Structure.This objective may include but is not limited to: structure the UI by using semantic markup, including for search engines and screen readers (Section, Article, Nav, Header, Footer, and Aside); create a layout container in HTMLHTML5 Semantic Tag Reference W3 SchoolsLearn HTML5 in 5 Minutes MSDNFork this JSFiddle and play with it.Write Code that Interacts with UI Controls.This objective may include but is not limited to: programmatically add and modify HTML elements; implement media controls; implement HTML5 canvas and SVG graphics

Apply styling to HTML elements programmatically.This objective may include but is not limited to: change the location of an element; apply a transform; show and hide elementsImplement HTML5 APIs.This objective may include but is not limited to: implement storage APIs, AppCache API, and Geolocation APIEstablish the scope of objects and variables.This objective may include but is not limited to: define the lifetime of variables; keep objects out of the global namespace; use the this keyword to reference an object that fired an event; scope variables locally and globallyCreate and implement objects and methods.This objective may include but is not limited to: implement native objects; create custom objects and custom properties for native objects using prototypes and functions; inherit from an object; implement native methods and create custom methodsImplement Program Flow (25%)Implement Program Flow.This objective may include but is not limited to: iterate across collections and array items; manage program decisions by using switch statements, if/then, and operators; evaluate expressionsMost of this section is exceptionally basic. The most important links are probably those on the comparison operators. Because JavaScript has some quirks in this area it is possible that those quirks will appear on the exam. Of course having a good understanding of those quirks is also essential to being a successful web developer. If you have a few months of professional experience with developing JavaScript apps you can likely skip this section entirely.W3 Schools OperatorsMSDN Comparison OperatorsW3 Schools Comparison and Logical OperatorsW3 Schools IfElseW3 Schools Switch StatementW3 Schools For LoopW3 Schools While LoopW3 Schools Break and ContinueIve not added a JSFiddle since the W3 Schools tutorials all contain similar functionality on each page with the Try It section.Raise and Handle an Event.This objective may include but is not limited to: handle common events exposed by DOM (OnBlur, OnFocus, OnClick); declare and handle bubbled events; handle an event by using an anonymous function.Im really not sure why anyone would want to use anything other than jQuery for this, but its always good to cover the basics as this will give you the ability to debug the library of your choice when you need to. From an exam perspective it is possible that MS Learning could include questions covering both standard JavaScript event handling and jQuery-based events. It is a good idea to go into the exam understanding both scenarios well.W3 Schools JavaScript DOM EventsStackOverflow - What is event bubbling and capturing?MSDN Understanding the Event ModelJSFiddle onclick and window.event.srcElementjQuery Events APIJSFiddle Adding Event Listeners using standard JavaScript and jQuery Implement Exception Handling.This objective may include but is not limited to: set and respond to error codes; throw an exception; request for null checks; implement try-catch-finally blocksIt should be noted that this is a Microsoft exam and I am therefore covering some IE specific aspects of error handling. Even considering that, most of what the objectives cover is cross platform. From a test perspective and a Windows 8 development perspective please be aware of the IE specific details. From a practical perspective for web development in general, be aware of the broader picture.MSDN Try, Catch, FinallyMSDN Throw StatementMSDN Error ObjectMSDN Error Object Properties and MethodsA Cross Platform Look at the Error Object.An instructive StackOverflow discussion of JavaScript Error Handling.IE Blog Diagnosing Error Faster with Error.stackJSFiddle Try/Catch, Throw and Error Object REQUIRES IE. The important thing here is to fork the fiddle and play with the code until you understand the sub-objective as much as possible.MSDN Null and Undefined ValuesMSDN typeof OperatorMSDN Debug and debugger StatementsPractical Not Specifically Test Related: Visual Studio Blog JavaScript Debugging EnhancementsImplement a Callback.This objective may include but is not limited to: receive messages from the HTML5 WebSocket API; use jQuery to make an AJAX call; wire up an event; implement a callback by using anonymous functions; handle the this pointerUnderstanding Callback Functions in JavaScriptjQuery .ajax()JavaScript EventsjQuery EventsjQuery PromisesWinJS Promises Since this exam targets both the web platform and Windows Store app developers it is unlikely that this topic will be covered to any great extent in the exam. But if you intention is to complete the MCSD: Windows Store Apps you should start getting your head around this now.Create a web worker process.This objective may include but is not limited to: start and stop a web worker; pass data to a web worker; configure timeouts and intervals on the web worker; register an event listener for the web worker; limitations of a web workerAccess and Secure Data (26%)Validate user input by using HTML5 elements.This objective may include but is not limited to: choose the appropriate controls based on requirements; implement HTML input types and content attributes (for example, required) to collect user inputValidate User Input by Using JavaScript.This objective may include but is not limited to: evaluate a regular expression to validate the input format; validate that you are getting the right kind of data type by using built-in functions; prevent code injectionWeb to Windows 8: SecurityConsume Data.This objective may include but is not limited to: consume JSON and XML data; retrieve data by using web services; load data or get data from other sources by using XMLHTTPRequestSerialize, Deserialize, and Transmit Data.This objective may include but is not limited to: binary data; text data (JSON, XML); implement the jQuery serialize method; Form. Submit; parse data; send data by using XMLHTTPRequest; sanitize input by using URI/form encoding

Use CSS3 in Applications (25%)W3 Schools CSS3 TutorialStyle HTML Text Properties.This objective may include but is not limited to: apply styles to text appearance (color, bold, italics); apply styles to text font (WOFF and @font-face, size); apply styles to text alignment, spacing, and indentation; apply styles to text hyphenation; apply styles for a text drop shadow.@font-face W3 SchoolsText 2D Transforms W3 SchoolsWeb Safe Fonts W3 Schools

Style HTML Box Properties.This objective may include but is not limited to: apply styles to alter appearance attributes (size, border and rounding border corners, outline, padding, margin); apply styles to alter graphic effects (transparency, opacity, background image, gradients, shadow, clipping); apply styles to establish and change an elements position (static, relative, absolute, fixed)Create a Flexible Content Layout.This objective may include but is not limited to: implement a layout using a flexible box model; implement a layout using multi-column; implement a layout using position floating and exclusions; implement a layout using grid alignment; implement a layout using regions, grouping, and nesting-ms-grid - Hands On: CSS3 Grid LayoutIE 10 and the Future of CSS Layout

Create an Animated and Adaptive UI.This objective may include but is not limited to: animate objects by applying CSS transitions; apply 3-D and 2-D transformations; adjust UI based on media queries (device adaptations for output formats, displays, and representations); hide or disable controlsjQuery Example in JSFiddle: display:none, fadeIn(), toggle(), on([event], function(){})jQuery API EffectsCSS3 Transitions, Transforms, Animation, Filters and more!CSS3 2D Transforms W3SchoolsCSS3 transform Property W3SchoolsCSS3 Transforms WC3.orgCreating Adaptive Layouts with CSS Part I and Part II MSDNFind Elements by Using CSS Selectors and jQuery.This objective may include but is not limited to: choose the correct selector to reference an element; define element, style, and attribute selectors; find elements by using pseudo-elements and pseudo-classes (for example, :before, :first-line, :first-letter, :target, :lang, :checked, :first-child)CSS3 Selector Test Drive from the IE Test Drive site. Use IE 10!Cascading Style Sheets (Internet Explorer) Reference: You will want to refer to this link repeatedly for information throughout this study guide.See also the How to Get Anything links in the following section.Structure a CSS File by Using CSS Selectors.This objective may include but is not limited to: reference elements correctly; implement inheritance; override inheritance by using !important; style an element based on pseudo-elements and pseudo-classes (for example, :before, :first-line, :first-letter, :target, :lang, :checked, :first-child)I am grouping the two sections above because I dont think they can be separated didactically. Developing HTML5 Apps Jump Start (02a): CSS Selectors and Style Properties, Part 1Developing HTML5 Apps Jump Start (02b): CSS Selectors and Style Properties, Part 2The Cascade, Specificity, and InheritanceCSS Specificity And Inheritance If you take nothing else from this section, study this article.jQuery Selectors W3 SchoolsHow to Get Anything you Want Part I.How to Get Anything you Want Part II.JSFiddle Show What you have Learned.