Microsoft Certification Exam Michael Van Cleave Planet Technologies

Objectives Implement and Manipulate Data Structures (24%) Implement Program Flow (25%) Access Secure Data (26%) Use CSS3 in Applications (25%) Reference:

HTML5 Differences New elements improve the semantic structure of a document. New form controls and built-in validation. Native audio and video support so users do not have to rely on browser plug-ins. The element and the associated JavaScript API provides a freeform area in a page to draw on, and the JavaScript commands to do the drawing, importing, and exporting.

HTML5 Differences – Cont. File Uploads Support for uploading files to a web server. Drag/Drop Support for dragging and dropping elements on the page. Offline Support enables web applications to continue running when the browser is offline. Local Data Storage over and above that provided by cookies. A formalization of the JavaScript object that underpins AJAX by using the XmlHttpRequest object.

HTML5 Differences – Cont. – Cont. Web Sockets Support for continuous communication between browser and web server. Web Workers Support for using multiple threads to handle processing for a web page. GeoLocation Support for accessing a device's GPS capabilities.

HTML5 Basics Contains new “Semantic” elements the divorce meaning from presentation. se·man·tics – the study of meaning (linguistics) Makes HTML structure more declarative in nature. Helps with other tools that decipher the structure of the page, such as Screen Readers

New and Old Elements HTML5 Notable Additions HTML5 Notable Removals AcronymApplet BasefontBig CenterDir FontFrame FramesetNoFrames StrikeTt

Input Elements (but better) Login Details Username: Password:

New Input Types color date datetime datetime-local month number range search tel time url week

New Attributes For Specifies the relationship between the element and another element on the page. Placeholder Specifies a hint to the user as to the kind of input that is expected. List Specifies the ID of a DataList element that provides values for the element. Required Specifies the user must enter a value. Pattern Specifies a Regular Expression pattern for the purposes of validation

Getting Crazy with HTML5 Contact Form Elements Attributes DataList Input Types Other Features GeoLocation Drag Drop Audio/Video

CSS3 Differences CSS3 is completely backwards compatible with CSS2. CSS3 is broken in to smaller modules Selectors Box Model Backgrounds and Borders Text Effects 2D/3D Transformations Animations Multiple Column Layout User Interface CSS3 keywords and effects work differently depending on browser! Remember Mileage May Vary so check W3 for supportability.

New Selectors ~ Selects every ^= Begins with $= Ends with *= Contains substring :first-of-type Selects first of specified element within the parent :last-of-type Selects last of specified element within the parent :0nly-of-type Selects only of type that is the only type in the parent :only-child :nth-child(n) :nth-last-child(n) :nth-of-type(n) :nth-last-0f-type(n) :last-child :root :empty :target :enabled :disabled :checked :not(selector) ::selection

Borders and Background Borders Border-Radius (Rounded Corners) Box-Shadow (Drop Shadow) Border-Image (Image used for border) Background Background-Size Background-Origin (Box Model) Background-Clip (Box Model) Content-Box Border-Box Padding-Box

Text Effects and Transitions Text-Shadow Text-Shadow Word-Wrap Styles for how to break large words Moving from one style to another over a set period of time. All CSS3, no Flash or JavaScript needed.

2D/3D Transformations 2D Transformations 2D Transformations Translate() Rotate() Scale() Skew() Matrix() Transforms on the X and Y Axis 3D Transformations 3D Transformations Rotate3D() Scale3D() Translate3D() Perspective() Matrix3D() Transforms on the X, Y, and Z axis

Animations Similar to Transitions, but not the same. Uses rule Specify the keyframe and duration to the animation.

Komma Crazy med CSS3

Namespace Best Practices Namespaces are used to logically separate objects and prevent naming collisions. Keep your objects out of the Global JavaScript namespace.

Data Types String var myString = “Simple String”; Number var myNumber = 42; Boolean var myBoolean = true; (false, 1, 0) Array var arrVersions = new Array(2003, 2007, 2010, 2013); Object var person{firstname: ”Mike”, lastname: “Van Cleave”} Null var x = null; (setting it to empty) Undefined var x; (variable has no value)

Concepts JavaScript objects are Dictionary Objects Type Safety? Not so much. Functions are First Class Objects Operators Get very familiar with what they do Exactly = vs. == vs. === = assignment (x = “5”) == evaluate value, not type ( 5 == x) - true === evaluates value and type (5 === x) - false

Advanced Concepts Anonymous Functions Technically a Function without a name, therefore being anonymous. Prototypes Sort of an inheritance model that each object has a reference back to its “prototype” object

Як вар'ят з JavaScript

Reference – Definitive Guide

Additional References Exam Information W3 Schools – Reference Information Code Academy – Play/Learn Object Oriented JavaScript