11 |
12 |
14 |
15 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/ex1/js/libs/modernizr-1.7.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * Modernizr v1.7
3 | * http://www.modernizr.com
4 | *
5 | * Developed by:
6 | * - Faruk Ates http://farukat.es/
7 | * - Paul Irish http://paulirish.com/
8 | *
9 | * Copyright (c) 2009-2011
10 | * Dual-licensed under the BSD or MIT licenses.
11 | * http://www.modernizr.com/license/
12 | */
13 |
14 |
15 | /*
16 | * Modernizr is a script that detects native CSS3 and HTML5 features
17 | * available in the current UA and provides an object containing all
18 | * features with a true/false value, depending on whether the UA has
19 | * native support for it or not.
20 | *
21 | * Modernizr will also add classes to the element of the page,
22 | * one for each feature it detects. If the UA supports it, a class
23 | * like "cssgradients" will be added. If not, the class name will be
24 | * "no-cssgradients". This allows for simple if-conditionals in your
25 | * CSS, giving you fine control over the look & feel of your website.
26 | *
27 | * @author Faruk Ates
28 | * @author Paul Irish
29 | * @copyright (c) 2009-2011 Faruk Ates.
30 | * @contributor Ben Alman
31 | */
32 |
33 | window.Modernizr = (function(window,document,undefined){
34 |
35 | var version = '1.7',
36 |
37 | ret = {},
38 |
39 | /**
40 | * !! DEPRECATED !!
41 | *
42 | * enableHTML5 is a private property for advanced use only. If enabled,
43 | * it will make Modernizr.init() run through a brief while() loop in
44 | * which it will create all HTML5 elements in the DOM to allow for
45 | * styling them in Internet Explorer, which does not recognize any
46 | * non-HTML4 elements unless created in the DOM this way.
47 | *
48 | * enableHTML5 is ON by default.
49 | *
50 | * The enableHTML5 toggle option is DEPRECATED as per 1.6, and will be
51 | * replaced in 2.0 in lieu of the modular, configurable nature of 2.0.
52 | */
53 | enableHTML5 = true,
54 |
55 |
56 | docElement = document.documentElement,
57 | docHead = document.head || document.getElementsByTagName('head')[0],
58 |
59 | /**
60 | * Create our "modernizr" element that we do most feature tests on.
61 | */
62 | mod = 'modernizr',
63 | modElem = document.createElement( mod ),
64 | m_style = modElem.style,
65 |
66 | /**
67 | * Create the input element for various Web Forms feature tests.
68 | */
69 | inputElem = document.createElement( 'input' ),
70 |
71 | smile = ':)',
72 |
73 | tostring = Object.prototype.toString,
74 |
75 | // List of property values to set for css tests. See ticket #21
76 | prefixes = ' -webkit- -moz- -o- -ms- -khtml- '.split(' '),
77 |
78 | // Following spec is to expose vendor-specific style properties as:
79 | // elem.style.WebkitBorderRadius
80 | // and the following would be incorrect:
81 | // elem.style.webkitBorderRadius
82 |
83 | // Webkit ghosts their properties in lowercase but Opera & Moz do not.
84 | // Microsoft foregoes prefixes entirely <= IE8, but appears to
85 | // use a lowercase `ms` instead of the correct `Ms` in IE9
86 |
87 | // More here: http://github.com/Modernizr/Modernizr/issues/issue/21
88 | domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
89 |
90 | ns = {'svg': 'http://www.w3.org/2000/svg'},
91 |
92 | tests = {},
93 | inputs = {},
94 | attrs = {},
95 |
96 | classes = [],
97 |
98 | featurename, // used in testing loop
99 |
100 |
101 |
102 | // todo: consider using http://javascript.nwbox.com/CSSSupport/css-support.js instead
103 | testMediaQuery = function(mq){
104 |
105 | var st = document.createElement('style'),
106 | div = document.createElement('div'),
107 | ret;
108 |
109 | st.textContent = mq + '{#modernizr{height:3px}}';
110 | docHead.appendChild(st);
111 | div.id = 'modernizr';
112 | docElement.appendChild(div);
113 |
114 | ret = div.offsetHeight === 3;
115 |
116 | st.parentNode.removeChild(st);
117 | div.parentNode.removeChild(div);
118 |
119 | return !!ret;
120 |
121 | },
122 |
123 |
124 | /**
125 | * isEventSupported determines if a given element supports the given event
126 | * function from http://yura.thinkweb2.com/isEventSupported/
127 | */
128 | isEventSupported = (function(){
129 |
130 | var TAGNAMES = {
131 | 'select':'input','change':'input',
132 | 'submit':'form','reset':'form',
133 | 'error':'img','load':'img','abort':'img'
134 | };
135 |
136 | function isEventSupported(eventName, element) {
137 |
138 | element = element || document.createElement(TAGNAMES[eventName] || 'div');
139 | eventName = 'on' + eventName;
140 |
141 | // When using `setAttribute`, IE skips "unload", WebKit skips "unload" and "resize", whereas `in` "catches" those
142 | var isSupported = (eventName in element);
143 |
144 | if (!isSupported) {
145 | // If it has no `setAttribute` (i.e. doesn't implement Node interface), try generic element
146 | if (!element.setAttribute) {
147 | element = document.createElement('div');
148 | }
149 | if (element.setAttribute && element.removeAttribute) {
150 | element.setAttribute(eventName, '');
151 | isSupported = is(element[eventName], 'function');
152 |
153 | // If property was created, "remove it" (by setting value to `undefined`)
154 | if (!is(element[eventName], undefined)) {
155 | element[eventName] = undefined;
156 | }
157 | element.removeAttribute(eventName);
158 | }
159 | }
160 |
161 | element = null;
162 | return isSupported;
163 | }
164 | return isEventSupported;
165 | })();
166 |
167 |
168 | // hasOwnProperty shim by kangax needed for Safari 2.0 support
169 | var _hasOwnProperty = ({}).hasOwnProperty, hasOwnProperty;
170 | if (!is(_hasOwnProperty, undefined) && !is(_hasOwnProperty.call, undefined)) {
171 | hasOwnProperty = function (object, property) {
172 | return _hasOwnProperty.call(object, property);
173 | };
174 | }
175 | else {
176 | hasOwnProperty = function (object, property) { /* yes, this can give false positives/negatives, but most of the time we don't care about those */
177 | return ((property in object) && is(object.constructor.prototype[property], undefined));
178 | };
179 | }
180 |
181 | /**
182 | * set_css applies given styles to the Modernizr DOM node.
183 | */
184 | function set_css( str ) {
185 | m_style.cssText = str;
186 | }
187 |
188 | /**
189 | * set_css_all extrapolates all vendor-specific css strings.
190 | */
191 | function set_css_all( str1, str2 ) {
192 | return set_css(prefixes.join(str1 + ';') + ( str2 || '' ));
193 | }
194 |
195 | /**
196 | * is returns a boolean for if typeof obj is exactly type.
197 | */
198 | function is( obj, type ) {
199 | return typeof obj === type;
200 | }
201 |
202 | /**
203 | * contains returns a boolean for if substr is found within str.
204 | */
205 | function contains( str, substr ) {
206 | return (''+str).indexOf( substr ) !== -1;
207 | }
208 |
209 | /**
210 | * test_props is a generic CSS / DOM property test; if a browser supports
211 | * a certain property, it won't return undefined for it.
212 | * A supported CSS property returns empty string when its not yet set.
213 | */
214 | function test_props( props, callback ) {
215 | for ( var i in props ) {
216 | if ( m_style[ props[i] ] !== undefined && ( !callback || callback( props[i], modElem ) ) ) {
217 | return true;
218 | }
219 | }
220 | }
221 |
222 | /**
223 | * test_props_all tests a list of DOM properties we want to check against.
224 | * We specify literally ALL possible (known and/or likely) properties on
225 | * the element including the non-vendor prefixed one, for forward-
226 | * compatibility.
227 | */
228 | function test_props_all( prop, callback ) {
229 |
230 | var uc_prop = prop.charAt(0).toUpperCase() + prop.substr(1),
231 | props = (prop + ' ' + domPrefixes.join(uc_prop + ' ') + uc_prop).split(' ');
232 |
233 | return !!test_props( props, callback );
234 | }
235 |
236 |
237 | /**
238 | * Tests
239 | * -----
240 | */
241 |
242 | tests['flexbox'] = function() {
243 | /**
244 | * set_prefixed_value_css sets the property of a specified element
245 | * adding vendor prefixes to the VALUE of the property.
246 | * @param {Element} element
247 | * @param {string} property The property name. This will not be prefixed.
248 | * @param {string} value The value of the property. This WILL be prefixed.
249 | * @param {string=} extra Additional CSS to append unmodified to the end of
250 | * the CSS string.
251 | */
252 | function set_prefixed_value_css(element, property, value, extra) {
253 | property += ':';
254 | element.style.cssText = (property + prefixes.join(value + ';' + property)).slice(0, -property.length) + (extra || '');
255 | }
256 |
257 | /**
258 | * set_prefixed_property_css sets the property of a specified element
259 | * adding vendor prefixes to the NAME of the property.
260 | * @param {Element} element
261 | * @param {string} property The property name. This WILL be prefixed.
262 | * @param {string} value The value of the property. This will not be prefixed.
263 | * @param {string=} extra Additional CSS to append unmodified to the end of
264 | * the CSS string.
265 | */
266 | function set_prefixed_property_css(element, property, value, extra) {
267 | element.style.cssText = prefixes.join(property + ':' + value + ';') + (extra || '');
268 | }
269 |
270 | var c = document.createElement('div'),
271 | elem = document.createElement('div');
272 |
273 | set_prefixed_value_css(c, 'display', 'box', 'width:42px;padding:0;');
274 | set_prefixed_property_css(elem, 'box-flex', '1', 'width:10px;');
275 |
276 | c.appendChild(elem);
277 | docElement.appendChild(c);
278 |
279 | var ret = elem.offsetWidth === 42;
280 |
281 | c.removeChild(elem);
282 | docElement.removeChild(c);
283 |
284 | return ret;
285 | };
286 |
287 | // On the S60 and BB Storm, getContext exists, but always returns undefined
288 | // http://github.com/Modernizr/Modernizr/issues/issue/97/
289 |
290 | tests['canvas'] = function() {
291 | var elem = document.createElement( 'canvas' );
292 | return !!(elem.getContext && elem.getContext('2d'));
293 | };
294 |
295 | tests['canvastext'] = function() {
296 | return !!(ret['canvas'] && is(document.createElement( 'canvas' ).getContext('2d').fillText, 'function'));
297 | };
298 |
299 | // This WebGL test false positives in FF depending on graphics hardware. But really it's quite impossible to know
300 | // wether webgl will succeed until after you create the context. You might have hardware that can support
301 | // a 100x100 webgl canvas, but will not support a 1000x1000 webgl canvas. So this feature inference is weak,
302 | // but intentionally so.
303 | tests['webgl'] = function(){
304 | return !!window.WebGLRenderingContext;
305 | };
306 |
307 | /*
308 | * The Modernizr.touch test only indicates if the browser supports
309 | * touch events, which does not necessarily reflect a touchscreen
310 | * device, as evidenced by tablets running Windows 7 or, alas,
311 | * the Palm Pre / WebOS (touch) phones.
312 | *
313 | * Additionally, Chrome (desktop) used to lie about its support on this,
314 | * but that has since been rectified: http://crbug.com/36415
315 | *
316 | * We also test for Firefox 4 Multitouch Support.
317 | *
318 | * For more info, see: http://modernizr.github.com/Modernizr/touch.html
319 | */
320 |
321 | tests['touch'] = function() {
322 |
323 | return ('ontouchstart' in window) || testMediaQuery('@media ('+prefixes.join('touch-enabled),(')+'modernizr)');
324 |
325 | };
326 |
327 |
328 | /**
329 | * geolocation tests for the new Geolocation API specification.
330 | * This test is a standards compliant-only test; for more complete
331 | * testing, including a Google Gears fallback, please see:
332 | * http://code.google.com/p/geo-location-javascript/
333 | * or view a fallback solution using google's geo API:
334 | * http://gist.github.com/366184
335 | */
336 | tests['geolocation'] = function() {
337 | return !!navigator.geolocation;
338 | };
339 |
340 | // Per 1.6:
341 | // This used to be Modernizr.crosswindowmessaging but the longer
342 | // name has been deprecated in favor of a shorter and property-matching one.
343 | // The old API is still available in 1.6, but as of 2.0 will throw a warning,
344 | // and in the first release thereafter disappear entirely.
345 | tests['postmessage'] = function() {
346 | return !!window.postMessage;
347 | };
348 |
349 | // Web SQL database detection is tricky:
350 |
351 | // In chrome incognito mode, openDatabase is truthy, but using it will
352 | // throw an exception: http://crbug.com/42380
353 | // We can create a dummy database, but there is no way to delete it afterwards.
354 |
355 | // Meanwhile, Safari users can get prompted on any database creation.
356 | // If they do, any page with Modernizr will give them a prompt:
357 | // http://github.com/Modernizr/Modernizr/issues/closed#issue/113
358 |
359 | // We have chosen to allow the Chrome incognito false positive, so that Modernizr
360 | // doesn't litter the web with these test databases. As a developer, you'll have
361 | // to account for this gotcha yourself.
362 | tests['websqldatabase'] = function() {
363 | var result = !!window.openDatabase;
364 | /* if (result){
365 | try {
366 | result = !!openDatabase( mod + "testdb", "1.0", mod + "testdb", 2e4);
367 | } catch(e) {
368 | }
369 | } */
370 | return result;
371 | };
372 |
373 | // Vendors have inconsistent prefixing with the experimental Indexed DB:
374 | // - Firefox is shipping indexedDB in FF4 as moz_indexedDB
375 | // - Webkit's implementation is accessible through webkitIndexedDB
376 | // We test both styles.
377 | tests['indexedDB'] = function(){
378 | for (var i = -1, len = domPrefixes.length; ++i < len; ){
379 | var prefix = domPrefixes[i].toLowerCase();
380 | if (window[prefix + '_indexedDB'] || window[prefix + 'IndexedDB']){
381 | return true;
382 | }
383 | }
384 | return false;
385 | };
386 |
387 | // documentMode logic from YUI to filter out IE8 Compat Mode
388 | // which false positives.
389 | tests['hashchange'] = function() {
390 | return isEventSupported('hashchange', window) && ( document.documentMode === undefined || document.documentMode > 7 );
391 | };
392 |
393 | // Per 1.6:
394 | // This used to be Modernizr.historymanagement but the longer
395 | // name has been deprecated in favor of a shorter and property-matching one.
396 | // The old API is still available in 1.6, but as of 2.0 will throw a warning,
397 | // and in the first release thereafter disappear entirely.
398 | tests['history'] = function() {
399 | return !!(window.history && history.pushState);
400 | };
401 |
402 | tests['draganddrop'] = function() {
403 | return isEventSupported('dragstart') && isEventSupported('drop');
404 | };
405 |
406 | tests['websockets'] = function(){
407 | return ('WebSocket' in window);
408 | };
409 |
410 |
411 | // http://css-tricks.com/rgba-browser-support/
412 | tests['rgba'] = function() {
413 | // Set an rgba() color and check the returned value
414 |
415 | set_css( 'background-color:rgba(150,255,150,.5)' );
416 |
417 | return contains( m_style.backgroundColor, 'rgba' );
418 | };
419 |
420 | tests['hsla'] = function() {
421 | // Same as rgba(), in fact, browsers re-map hsla() to rgba() internally,
422 | // except IE9 who retains it as hsla
423 |
424 | set_css('background-color:hsla(120,40%,100%,.5)' );
425 |
426 | return contains( m_style.backgroundColor, 'rgba' ) || contains( m_style.backgroundColor, 'hsla' );
427 | };
428 |
429 | tests['multiplebgs'] = function() {
430 | // Setting multiple images AND a color on the background shorthand property
431 | // and then querying the style.background property value for the number of
432 | // occurrences of "url(" is a reliable method for detecting ACTUAL support for this!
433 |
434 | set_css( 'background:url(//:),url(//:),red url(//:)' );
435 |
436 | // If the UA supports multiple backgrounds, there should be three occurrences
437 | // of the string "url(" in the return value for elem_style.background
438 |
439 | return new RegExp("(url\\s*\\(.*?){3}").test(m_style.background);
440 | };
441 |
442 |
443 | // In testing support for a given CSS property, it's legit to test:
444 | // `elem.style[styleName] !== undefined`
445 | // If the property is supported it will return an empty string,
446 | // if unsupported it will return undefined.
447 |
448 | // We'll take advantage of this quick test and skip setting a style
449 | // on our modernizr element, but instead just testing undefined vs
450 | // empty string.
451 |
452 |
453 | tests['backgroundsize'] = function() {
454 | return test_props_all( 'backgroundSize' );
455 | };
456 |
457 | tests['borderimage'] = function() {
458 | return test_props_all( 'borderImage' );
459 | };
460 |
461 |
462 | // Super comprehensive table about all the unique implementations of
463 | // border-radius: http://muddledramblings.com/table-of-css3-border-radius-compliance
464 |
465 | tests['borderradius'] = function() {
466 | return test_props_all( 'borderRadius', '', function( prop ) {
467 | return contains( prop, 'orderRadius' );
468 | });
469 | };
470 |
471 | // WebOS unfortunately false positives on this test.
472 | tests['boxshadow'] = function() {
473 | return test_props_all( 'boxShadow' );
474 | };
475 |
476 | // FF3.0 will false positive on this test
477 | tests['textshadow'] = function(){
478 | return document.createElement('div').style.textShadow === '';
479 | };
480 |
481 |
482 | tests['opacity'] = function() {
483 | // Browsers that actually have CSS Opacity implemented have done so
484 | // according to spec, which means their return values are within the
485 | // range of [0.0,1.0] - including the leading zero.
486 |
487 | set_css_all( 'opacity:.55' );
488 |
489 | // The non-literal . in this regex is intentional:
490 | // German Chrome returns this value as 0,55
491 | // https://github.com/Modernizr/Modernizr/issues/#issue/59/comment/516632
492 | return /^0.55$/.test(m_style.opacity);
493 | };
494 |
495 |
496 | tests['cssanimations'] = function() {
497 | return test_props_all( 'animationName' );
498 | };
499 |
500 |
501 | tests['csscolumns'] = function() {
502 | return test_props_all( 'columnCount' );
503 | };
504 |
505 |
506 | tests['cssgradients'] = function() {
507 | /**
508 | * For CSS Gradients syntax, please see:
509 | * http://webkit.org/blog/175/introducing-css-gradients/
510 | * https://developer.mozilla.org/en/CSS/-moz-linear-gradient
511 | * https://developer.mozilla.org/en/CSS/-moz-radial-gradient
512 | * http://dev.w3.org/csswg/css3-images/#gradients-
513 | */
514 |
515 | var str1 = 'background-image:',
516 | str2 = 'gradient(linear,left top,right bottom,from(#9f9),to(white));',
517 | str3 = 'linear-gradient(left top,#9f9, white);';
518 |
519 | set_css(
520 | (str1 + prefixes.join(str2 + str1) + prefixes.join(str3 + str1)).slice(0,-str1.length)
521 | );
522 |
523 | return contains( m_style.backgroundImage, 'gradient' );
524 | };
525 |
526 |
527 | tests['cssreflections'] = function() {
528 | return test_props_all( 'boxReflect' );
529 | };
530 |
531 |
532 | tests['csstransforms'] = function() {
533 | return !!test_props([ 'transformProperty', 'WebkitTransform', 'MozTransform', 'OTransform', 'msTransform' ]);
534 | };
535 |
536 |
537 | tests['csstransforms3d'] = function() {
538 |
539 | var ret = !!test_props([ 'perspectiveProperty', 'WebkitPerspective', 'MozPerspective', 'OPerspective', 'msPerspective' ]);
540 |
541 | // Webkit’s 3D transforms are passed off to the browser's own graphics renderer.
542 | // It works fine in Safari on Leopard and Snow Leopard, but not in Chrome in
543 | // some conditions. As a result, Webkit typically recognizes the syntax but
544 | // will sometimes throw a false positive, thus we must do a more thorough check:
545 | if (ret && 'webkitPerspective' in docElement.style){
546 |
547 | // Webkit allows this media query to succeed only if the feature is enabled.
548 | // `@media (transform-3d),(-o-transform-3d),(-moz-transform-3d),(-ms-transform-3d),(-webkit-transform-3d),(modernizr){ ... }`
549 | ret = testMediaQuery('@media ('+prefixes.join('transform-3d),(')+'modernizr)');
550 | }
551 | return ret;
552 | };
553 |
554 |
555 | tests['csstransitions'] = function() {
556 | return test_props_all( 'transitionProperty' );
557 | };
558 |
559 |
560 | // @font-face detection routine by Diego Perini
561 | // http://javascript.nwbox.com/CSSSupport/
562 | tests['fontface'] = function(){
563 |
564 | var
565 | sheet, bool,
566 | head = docHead || docElement,
567 | style = document.createElement("style"),
568 | impl = document.implementation || { hasFeature: function() { return false; } };
569 |
570 | style.type = 'text/css';
571 | head.insertBefore(style, head.firstChild);
572 | sheet = style.sheet || style.styleSheet;
573 |
574 | var supportAtRule = impl.hasFeature('CSS2', '') ?
575 | function(rule) {
576 | if (!(sheet && rule)) return false;
577 | var result = false;
578 | try {
579 | sheet.insertRule(rule, 0);
580 | result = (/src/i).test(sheet.cssRules[0].cssText);
581 | sheet.deleteRule(sheet.cssRules.length - 1);
582 | } catch(e) { }
583 | return result;
584 | } :
585 | function(rule) {
586 | if (!(sheet && rule)) return false;
587 | sheet.cssText = rule;
588 |
589 | return sheet.cssText.length !== 0 && (/src/i).test(sheet.cssText) &&
590 | sheet.cssText
591 | .replace(/\r+|\n+/g, '')
592 | .indexOf(rule.split(' ')[0]) === 0;
593 | };
594 |
595 | bool = supportAtRule('@font-face { font-family: "font"; src: url(data:,); }');
596 | head.removeChild(style);
597 | return bool;
598 | };
599 |
600 |
601 | // These tests evaluate support of the video/audio elements, as well as
602 | // testing what types of content they support.
603 | //
604 | // We're using the Boolean constructor here, so that we can extend the value
605 | // e.g. Modernizr.video // true
606 | // Modernizr.video.ogg // 'probably'
607 | //
608 | // Codec values from : http://github.com/NielsLeenheer/html5test/blob/9106a8/index.html#L845
609 | // thx to NielsLeenheer and zcorpan
610 |
611 | // Note: in FF 3.5.1 and 3.5.0, "no" was a return value instead of empty string.
612 | // Modernizr does not normalize for that.
613 |
614 | tests['video'] = function() {
615 | var elem = document.createElement('video'),
616 | bool = !!elem.canPlayType;
617 |
618 | if (bool){
619 | bool = new Boolean(bool);
620 | bool.ogg = elem.canPlayType('video/ogg; codecs="theora"');
621 |
622 | // Workaround required for IE9, which doesn't report video support without audio codec specified.
623 | // bug 599718 @ msft connect
624 | var h264 = 'video/mp4; codecs="avc1.42E01E';
625 | bool.h264 = elem.canPlayType(h264 + '"') || elem.canPlayType(h264 + ', mp4a.40.2"');
626 |
627 | bool.webm = elem.canPlayType('video/webm; codecs="vp8, vorbis"');
628 | }
629 | return bool;
630 | };
631 |
632 | tests['audio'] = function() {
633 | var elem = document.createElement('audio'),
634 | bool = !!elem.canPlayType;
635 |
636 | if (bool){
637 | bool = new Boolean(bool);
638 | bool.ogg = elem.canPlayType('audio/ogg; codecs="vorbis"');
639 | bool.mp3 = elem.canPlayType('audio/mpeg;');
640 |
641 | // Mimetypes accepted:
642 | // https://developer.mozilla.org/En/Media_formats_supported_by_the_audio_and_video_elements
643 | // http://bit.ly/iphoneoscodecs
644 | bool.wav = elem.canPlayType('audio/wav; codecs="1"');
645 | bool.m4a = elem.canPlayType('audio/x-m4a;') || elem.canPlayType('audio/aac;');
646 | }
647 | return bool;
648 | };
649 |
650 |
651 | // Firefox has made these tests rather unfun.
652 |
653 | // In FF4, if disabled, window.localStorage should === null.
654 |
655 | // Normally, we could not test that directly and need to do a
656 | // `('localStorage' in window) && ` test first because otherwise Firefox will
657 | // throw http://bugzil.la/365772 if cookies are disabled
658 |
659 | // However, in Firefox 4 betas, if dom.storage.enabled == false, just mentioning
660 | // the property will throw an exception. http://bugzil.la/599479
661 | // This looks to be fixed for FF4 Final.
662 |
663 | // Because we are forced to try/catch this, we'll go aggressive.
664 |
665 | // FWIW: IE8 Compat mode supports these features completely:
666 | // http://www.quirksmode.org/dom/html5.html
667 | // But IE8 doesn't support either with local files
668 |
669 | tests['localstorage'] = function() {
670 | try {
671 | return !!localStorage.getItem;
672 | } catch(e) {
673 | return false;
674 | }
675 | };
676 |
677 | tests['sessionstorage'] = function() {
678 | try {
679 | return !!sessionStorage.getItem;
680 | } catch(e){
681 | return false;
682 | }
683 | };
684 |
685 |
686 | tests['webWorkers'] = function () {
687 | return !!window.Worker;
688 | };
689 |
690 |
691 | tests['applicationcache'] = function() {
692 | return !!window.applicationCache;
693 | };
694 |
695 |
696 | // Thanks to Erik Dahlstrom
697 | tests['svg'] = function(){
698 | return !!document.createElementNS && !!document.createElementNS(ns.svg, "svg").createSVGRect;
699 | };
700 |
701 | tests['inlinesvg'] = function() {
702 | var div = document.createElement('div');
703 | div.innerHTML = '';
704 | return (div.firstChild && div.firstChild.namespaceURI) == ns.svg;
705 | };
706 |
707 | // Thanks to F1lt3r and lucideer
708 | // http://github.com/Modernizr/Modernizr/issues#issue/35
709 | tests['smil'] = function(){
710 | return !!document.createElementNS && /SVG/.test(tostring.call(document.createElementNS(ns.svg,'animate')));
711 | };
712 |
713 | tests['svgclippaths'] = function(){
714 | // Possibly returns a false positive in Safari 3.2?
715 | return !!document.createElementNS && /SVG/.test(tostring.call(document.createElementNS(ns.svg,'clipPath')));
716 | };
717 |
718 |
719 | // input features and input types go directly onto the ret object, bypassing the tests loop.
720 | // Hold this guy to execute in a moment.
721 | function webforms(){
722 |
723 | // Run through HTML5's new input attributes to see if the UA understands any.
724 | // We're using f which is the element created early on
725 | // Mike Taylr has created a comprehensive resource for testing these attributes
726 | // when applied to all input types:
727 | // http://miketaylr.com/code/input-type-attr.html
728 | // spec: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#input-type-attr-summary
729 | ret['input'] = (function(props) {
730 | for (var i = 0, len = props.length; iВыполненное упражнение 1
13 |
18 |
19 |
21 |
22 |
23 |
27 |
28 |
29 |
32 |
33 |
34 |
35 |
36 | Выполненное упражнение 11
20 |
37 |
42 |
47 |
48 |
49 |
55 |
56 |
57 |
58 |
--------------------------------------------------------------------------------
/ex11/js/libs/modernizr-1.7.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * Modernizr v1.7
3 | * http://www.modernizr.com
4 | *
5 | * Developed by:
6 | * - Faruk Ates http://farukat.es/
7 | * - Paul Irish http://paulirish.com/
8 | *
9 | * Copyright (c) 2009-2011
10 | * Dual-licensed under the BSD or MIT licenses.
11 | * http://www.modernizr.com/license/
12 | */
13 |
14 |
15 | /*
16 | * Modernizr is a script that detects native CSS3 and HTML5 features
17 | * available in the current UA and provides an object containing all
18 | * features with a true/false value, depending on whether the UA has
19 | * native support for it or not.
20 | *
21 | * Modernizr will also add classes to the element of the page,
22 | * one for each feature it detects. If the UA supports it, a class
23 | * like "cssgradients" will be added. If not, the class name will be
24 | * "no-cssgradients". This allows for simple if-conditionals in your
25 | * CSS, giving you fine control over the look & feel of your website.
26 | *
27 | * @author Faruk Ates
28 | * @author Paul Irish
29 | * @copyright (c) 2009-2011 Faruk Ates.
30 | * @contributor Ben Alman
31 | */
32 |
33 | window.Modernizr = (function(window,document,undefined){
34 |
35 | var version = '1.7',
36 |
37 | ret = {},
38 |
39 | /**
40 | * !! DEPRECATED !!
41 | *
42 | * enableHTML5 is a private property for advanced use only. If enabled,
43 | * it will make Modernizr.init() run through a brief while() loop in
44 | * which it will create all HTML5 elements in the DOM to allow for
45 | * styling them in Internet Explorer, which does not recognize any
46 | * non-HTML4 elements unless created in the DOM this way.
47 | *
48 | * enableHTML5 is ON by default.
49 | *
50 | * The enableHTML5 toggle option is DEPRECATED as per 1.6, and will be
51 | * replaced in 2.0 in lieu of the modular, configurable nature of 2.0.
52 | */
53 | enableHTML5 = true,
54 |
55 |
56 | docElement = document.documentElement,
57 | docHead = document.head || document.getElementsByTagName('head')[0],
58 |
59 | /**
60 | * Create our "modernizr" element that we do most feature tests on.
61 | */
62 | mod = 'modernizr',
63 | modElem = document.createElement( mod ),
64 | m_style = modElem.style,
65 |
66 | /**
67 | * Create the input element for various Web Forms feature tests.
68 | */
69 | inputElem = document.createElement( 'input' ),
70 |
71 | smile = ':)',
72 |
73 | tostring = Object.prototype.toString,
74 |
75 | // List of property values to set for css tests. See ticket #21
76 | prefixes = ' -webkit- -moz- -o- -ms- -khtml- '.split(' '),
77 |
78 | // Following spec is to expose vendor-specific style properties as:
79 | // elem.style.WebkitBorderRadius
80 | // and the following would be incorrect:
81 | // elem.style.webkitBorderRadius
82 |
83 | // Webkit ghosts their properties in lowercase but Opera & Moz do not.
84 | // Microsoft foregoes prefixes entirely <= IE8, but appears to
85 | // use a lowercase `ms` instead of the correct `Ms` in IE9
86 |
87 | // More here: http://github.com/Modernizr/Modernizr/issues/issue/21
88 | domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
89 |
90 | ns = {'svg': 'http://www.w3.org/2000/svg'},
91 |
92 | tests = {},
93 | inputs = {},
94 | attrs = {},
95 |
96 | classes = [],
97 |
98 | featurename, // used in testing loop
99 |
100 |
101 |
102 | // todo: consider using http://javascript.nwbox.com/CSSSupport/css-support.js instead
103 | testMediaQuery = function(mq){
104 |
105 | var st = document.createElement('style'),
106 | div = document.createElement('div'),
107 | ret;
108 |
109 | st.textContent = mq + '{#modernizr{height:3px}}';
110 | docHead.appendChild(st);
111 | div.id = 'modernizr';
112 | docElement.appendChild(div);
113 |
114 | ret = div.offsetHeight === 3;
115 |
116 | st.parentNode.removeChild(st);
117 | div.parentNode.removeChild(div);
118 |
119 | return !!ret;
120 |
121 | },
122 |
123 |
124 | /**
125 | * isEventSupported determines if a given element supports the given event
126 | * function from http://yura.thinkweb2.com/isEventSupported/
127 | */
128 | isEventSupported = (function(){
129 |
130 | var TAGNAMES = {
131 | 'select':'input','change':'input',
132 | 'submit':'form','reset':'form',
133 | 'error':'img','load':'img','abort':'img'
134 | };
135 |
136 | function isEventSupported(eventName, element) {
137 |
138 | element = element || document.createElement(TAGNAMES[eventName] || 'div');
139 | eventName = 'on' + eventName;
140 |
141 | // When using `setAttribute`, IE skips "unload", WebKit skips "unload" and "resize", whereas `in` "catches" those
142 | var isSupported = (eventName in element);
143 |
144 | if (!isSupported) {
145 | // If it has no `setAttribute` (i.e. doesn't implement Node interface), try generic element
146 | if (!element.setAttribute) {
147 | element = document.createElement('div');
148 | }
149 | if (element.setAttribute && element.removeAttribute) {
150 | element.setAttribute(eventName, '');
151 | isSupported = is(element[eventName], 'function');
152 |
153 | // If property was created, "remove it" (by setting value to `undefined`)
154 | if (!is(element[eventName], undefined)) {
155 | element[eventName] = undefined;
156 | }
157 | element.removeAttribute(eventName);
158 | }
159 | }
160 |
161 | element = null;
162 | return isSupported;
163 | }
164 | return isEventSupported;
165 | })();
166 |
167 |
168 | // hasOwnProperty shim by kangax needed for Safari 2.0 support
169 | var _hasOwnProperty = ({}).hasOwnProperty, hasOwnProperty;
170 | if (!is(_hasOwnProperty, undefined) && !is(_hasOwnProperty.call, undefined)) {
171 | hasOwnProperty = function (object, property) {
172 | return _hasOwnProperty.call(object, property);
173 | };
174 | }
175 | else {
176 | hasOwnProperty = function (object, property) { /* yes, this can give false positives/negatives, but most of the time we don't care about those */
177 | return ((property in object) && is(object.constructor.prototype[property], undefined));
178 | };
179 | }
180 |
181 | /**
182 | * set_css applies given styles to the Modernizr DOM node.
183 | */
184 | function set_css( str ) {
185 | m_style.cssText = str;
186 | }
187 |
188 | /**
189 | * set_css_all extrapolates all vendor-specific css strings.
190 | */
191 | function set_css_all( str1, str2 ) {
192 | return set_css(prefixes.join(str1 + ';') + ( str2 || '' ));
193 | }
194 |
195 | /**
196 | * is returns a boolean for if typeof obj is exactly type.
197 | */
198 | function is( obj, type ) {
199 | return typeof obj === type;
200 | }
201 |
202 | /**
203 | * contains returns a boolean for if substr is found within str.
204 | */
205 | function contains( str, substr ) {
206 | return (''+str).indexOf( substr ) !== -1;
207 | }
208 |
209 | /**
210 | * test_props is a generic CSS / DOM property test; if a browser supports
211 | * a certain property, it won't return undefined for it.
212 | * A supported CSS property returns empty string when its not yet set.
213 | */
214 | function test_props( props, callback ) {
215 | for ( var i in props ) {
216 | if ( m_style[ props[i] ] !== undefined && ( !callback || callback( props[i], modElem ) ) ) {
217 | return true;
218 | }
219 | }
220 | }
221 |
222 | /**
223 | * test_props_all tests a list of DOM properties we want to check against.
224 | * We specify literally ALL possible (known and/or likely) properties on
225 | * the element including the non-vendor prefixed one, for forward-
226 | * compatibility.
227 | */
228 | function test_props_all( prop, callback ) {
229 |
230 | var uc_prop = prop.charAt(0).toUpperCase() + prop.substr(1),
231 | props = (prop + ' ' + domPrefixes.join(uc_prop + ' ') + uc_prop).split(' ');
232 |
233 | return !!test_props( props, callback );
234 | }
235 |
236 |
237 | /**
238 | * Tests
239 | * -----
240 | */
241 |
242 | tests['flexbox'] = function() {
243 | /**
244 | * set_prefixed_value_css sets the property of a specified element
245 | * adding vendor prefixes to the VALUE of the property.
246 | * @param {Element} element
247 | * @param {string} property The property name. This will not be prefixed.
248 | * @param {string} value The value of the property. This WILL be prefixed.
249 | * @param {string=} extra Additional CSS to append unmodified to the end of
250 | * the CSS string.
251 | */
252 | function set_prefixed_value_css(element, property, value, extra) {
253 | property += ':';
254 | element.style.cssText = (property + prefixes.join(value + ';' + property)).slice(0, -property.length) + (extra || '');
255 | }
256 |
257 | /**
258 | * set_prefixed_property_css sets the property of a specified element
259 | * adding vendor prefixes to the NAME of the property.
260 | * @param {Element} element
261 | * @param {string} property The property name. This WILL be prefixed.
262 | * @param {string} value The value of the property. This will not be prefixed.
263 | * @param {string=} extra Additional CSS to append unmodified to the end of
264 | * the CSS string.
265 | */
266 | function set_prefixed_property_css(element, property, value, extra) {
267 | element.style.cssText = prefixes.join(property + ':' + value + ';') + (extra || '');
268 | }
269 |
270 | var c = document.createElement('div'),
271 | elem = document.createElement('div');
272 |
273 | set_prefixed_value_css(c, 'display', 'box', 'width:42px;padding:0;');
274 | set_prefixed_property_css(elem, 'box-flex', '1', 'width:10px;');
275 |
276 | c.appendChild(elem);
277 | docElement.appendChild(c);
278 |
279 | var ret = elem.offsetWidth === 42;
280 |
281 | c.removeChild(elem);
282 | docElement.removeChild(c);
283 |
284 | return ret;
285 | };
286 |
287 | // On the S60 and BB Storm, getContext exists, but always returns undefined
288 | // http://github.com/Modernizr/Modernizr/issues/issue/97/
289 |
290 | tests['canvas'] = function() {
291 | var elem = document.createElement( 'canvas' );
292 | return !!(elem.getContext && elem.getContext('2d'));
293 | };
294 |
295 | tests['canvastext'] = function() {
296 | return !!(ret['canvas'] && is(document.createElement( 'canvas' ).getContext('2d').fillText, 'function'));
297 | };
298 |
299 | // This WebGL test false positives in FF depending on graphics hardware. But really it's quite impossible to know
300 | // wether webgl will succeed until after you create the context. You might have hardware that can support
301 | // a 100x100 webgl canvas, but will not support a 1000x1000 webgl canvas. So this feature inference is weak,
302 | // but intentionally so.
303 | tests['webgl'] = function(){
304 | return !!window.WebGLRenderingContext;
305 | };
306 |
307 | /*
308 | * The Modernizr.touch test only indicates if the browser supports
309 | * touch events, which does not necessarily reflect a touchscreen
310 | * device, as evidenced by tablets running Windows 7 or, alas,
311 | * the Palm Pre / WebOS (touch) phones.
312 | *
313 | * Additionally, Chrome (desktop) used to lie about its support on this,
314 | * but that has since been rectified: http://crbug.com/36415
315 | *
316 | * We also test for Firefox 4 Multitouch Support.
317 | *
318 | * For more info, see: http://modernizr.github.com/Modernizr/touch.html
319 | */
320 |
321 | tests['touch'] = function() {
322 |
323 | return ('ontouchstart' in window) || testMediaQuery('@media ('+prefixes.join('touch-enabled),(')+'modernizr)');
324 |
325 | };
326 |
327 |
328 | /**
329 | * geolocation tests for the new Geolocation API specification.
330 | * This test is a standards compliant-only test; for more complete
331 | * testing, including a Google Gears fallback, please see:
332 | * http://code.google.com/p/geo-location-javascript/
333 | * or view a fallback solution using google's geo API:
334 | * http://gist.github.com/366184
335 | */
336 | tests['geolocation'] = function() {
337 | return !!navigator.geolocation;
338 | };
339 |
340 | // Per 1.6:
341 | // This used to be Modernizr.crosswindowmessaging but the longer
342 | // name has been deprecated in favor of a shorter and property-matching one.
343 | // The old API is still available in 1.6, but as of 2.0 will throw a warning,
344 | // and in the first release thereafter disappear entirely.
345 | tests['postmessage'] = function() {
346 | return !!window.postMessage;
347 | };
348 |
349 | // Web SQL database detection is tricky:
350 |
351 | // In chrome incognito mode, openDatabase is truthy, but using it will
352 | // throw an exception: http://crbug.com/42380
353 | // We can create a dummy database, but there is no way to delete it afterwards.
354 |
355 | // Meanwhile, Safari users can get prompted on any database creation.
356 | // If they do, any page with Modernizr will give them a prompt:
357 | // http://github.com/Modernizr/Modernizr/issues/closed#issue/113
358 |
359 | // We have chosen to allow the Chrome incognito false positive, so that Modernizr
360 | // doesn't litter the web with these test databases. As a developer, you'll have
361 | // to account for this gotcha yourself.
362 | tests['websqldatabase'] = function() {
363 | var result = !!window.openDatabase;
364 | /* if (result){
365 | try {
366 | result = !!openDatabase( mod + "testdb", "1.0", mod + "testdb", 2e4);
367 | } catch(e) {
368 | }
369 | } */
370 | return result;
371 | };
372 |
373 | // Vendors have inconsistent prefixing with the experimental Indexed DB:
374 | // - Firefox is shipping indexedDB in FF4 as moz_indexedDB
375 | // - Webkit's implementation is accessible through webkitIndexedDB
376 | // We test both styles.
377 | tests['indexedDB'] = function(){
378 | for (var i = -1, len = domPrefixes.length; ++i < len; ){
379 | var prefix = domPrefixes[i].toLowerCase();
380 | if (window[prefix + '_indexedDB'] || window[prefix + 'IndexedDB']){
381 | return true;
382 | }
383 | }
384 | return false;
385 | };
386 |
387 | // documentMode logic from YUI to filter out IE8 Compat Mode
388 | // which false positives.
389 | tests['hashchange'] = function() {
390 | return isEventSupported('hashchange', window) && ( document.documentMode === undefined || document.documentMode > 7 );
391 | };
392 |
393 | // Per 1.6:
394 | // This used to be Modernizr.historymanagement but the longer
395 | // name has been deprecated in favor of a shorter and property-matching one.
396 | // The old API is still available in 1.6, but as of 2.0 will throw a warning,
397 | // and in the first release thereafter disappear entirely.
398 | tests['history'] = function() {
399 | return !!(window.history && history.pushState);
400 | };
401 |
402 | tests['draganddrop'] = function() {
403 | return isEventSupported('dragstart') && isEventSupported('drop');
404 | };
405 |
406 | tests['websockets'] = function(){
407 | return ('WebSocket' in window);
408 | };
409 |
410 |
411 | // http://css-tricks.com/rgba-browser-support/
412 | tests['rgba'] = function() {
413 | // Set an rgba() color and check the returned value
414 |
415 | set_css( 'background-color:rgba(150,255,150,.5)' );
416 |
417 | return contains( m_style.backgroundColor, 'rgba' );
418 | };
419 |
420 | tests['hsla'] = function() {
421 | // Same as rgba(), in fact, browsers re-map hsla() to rgba() internally,
422 | // except IE9 who retains it as hsla
423 |
424 | set_css('background-color:hsla(120,40%,100%,.5)' );
425 |
426 | return contains( m_style.backgroundColor, 'rgba' ) || contains( m_style.backgroundColor, 'hsla' );
427 | };
428 |
429 | tests['multiplebgs'] = function() {
430 | // Setting multiple images AND a color on the background shorthand property
431 | // and then querying the style.background property value for the number of
432 | // occurrences of "url(" is a reliable method for detecting ACTUAL support for this!
433 |
434 | set_css( 'background:url(//:),url(//:),red url(//:)' );
435 |
436 | // If the UA supports multiple backgrounds, there should be three occurrences
437 | // of the string "url(" in the return value for elem_style.background
438 |
439 | return new RegExp("(url\\s*\\(.*?){3}").test(m_style.background);
440 | };
441 |
442 |
443 | // In testing support for a given CSS property, it's legit to test:
444 | // `elem.style[styleName] !== undefined`
445 | // If the property is supported it will return an empty string,
446 | // if unsupported it will return undefined.
447 |
448 | // We'll take advantage of this quick test and skip setting a style
449 | // on our modernizr element, but instead just testing undefined vs
450 | // empty string.
451 |
452 |
453 | tests['backgroundsize'] = function() {
454 | return test_props_all( 'backgroundSize' );
455 | };
456 |
457 | tests['borderimage'] = function() {
458 | return test_props_all( 'borderImage' );
459 | };
460 |
461 |
462 | // Super comprehensive table about all the unique implementations of
463 | // border-radius: http://muddledramblings.com/table-of-css3-border-radius-compliance
464 |
465 | tests['borderradius'] = function() {
466 | return test_props_all( 'borderRadius', '', function( prop ) {
467 | return contains( prop, 'orderRadius' );
468 | });
469 | };
470 |
471 | // WebOS unfortunately false positives on this test.
472 | tests['boxshadow'] = function() {
473 | return test_props_all( 'boxShadow' );
474 | };
475 |
476 | // FF3.0 will false positive on this test
477 | tests['textshadow'] = function(){
478 | return document.createElement('div').style.textShadow === '';
479 | };
480 |
481 |
482 | tests['opacity'] = function() {
483 | // Browsers that actually have CSS Opacity implemented have done so
484 | // according to spec, which means their return values are within the
485 | // range of [0.0,1.0] - including the leading zero.
486 |
487 | set_css_all( 'opacity:.55' );
488 |
489 | // The non-literal . in this regex is intentional:
490 | // German Chrome returns this value as 0,55
491 | // https://github.com/Modernizr/Modernizr/issues/#issue/59/comment/516632
492 | return /^0.55$/.test(m_style.opacity);
493 | };
494 |
495 |
496 | tests['cssanimations'] = function() {
497 | return test_props_all( 'animationName' );
498 | };
499 |
500 |
501 | tests['csscolumns'] = function() {
502 | return test_props_all( 'columnCount' );
503 | };
504 |
505 |
506 | tests['cssgradients'] = function() {
507 | /**
508 | * For CSS Gradients syntax, please see:
509 | * http://webkit.org/blog/175/introducing-css-gradients/
510 | * https://developer.mozilla.org/en/CSS/-moz-linear-gradient
511 | * https://developer.mozilla.org/en/CSS/-moz-radial-gradient
512 | * http://dev.w3.org/csswg/css3-images/#gradients-
513 | */
514 |
515 | var str1 = 'background-image:',
516 | str2 = 'gradient(linear,left top,right bottom,from(#9f9),to(white));',
517 | str3 = 'linear-gradient(left top,#9f9, white);';
518 |
519 | set_css(
520 | (str1 + prefixes.join(str2 + str1) + prefixes.join(str3 + str1)).slice(0,-str1.length)
521 | );
522 |
523 | return contains( m_style.backgroundImage, 'gradient' );
524 | };
525 |
526 |
527 | tests['cssreflections'] = function() {
528 | return test_props_all( 'boxReflect' );
529 | };
530 |
531 |
532 | tests['csstransforms'] = function() {
533 | return !!test_props([ 'transformProperty', 'WebkitTransform', 'MozTransform', 'OTransform', 'msTransform' ]);
534 | };
535 |
536 |
537 | tests['csstransforms3d'] = function() {
538 |
539 | var ret = !!test_props([ 'perspectiveProperty', 'WebkitPerspective', 'MozPerspective', 'OPerspective', 'msPerspective' ]);
540 |
541 | // Webkit’s 3D transforms are passed off to the browser's own graphics renderer.
542 | // It works fine in Safari on Leopard and Snow Leopard, but not in Chrome in
543 | // some conditions. As a result, Webkit typically recognizes the syntax but
544 | // will sometimes throw a false positive, thus we must do a more thorough check:
545 | if (ret && 'webkitPerspective' in docElement.style){
546 |
547 | // Webkit allows this media query to succeed only if the feature is enabled.
548 | // `@media (transform-3d),(-o-transform-3d),(-moz-transform-3d),(-ms-transform-3d),(-webkit-transform-3d),(modernizr){ ... }`
549 | ret = testMediaQuery('@media ('+prefixes.join('transform-3d),(')+'modernizr)');
550 | }
551 | return ret;
552 | };
553 |
554 |
555 | tests['csstransitions'] = function() {
556 | return test_props_all( 'transitionProperty' );
557 | };
558 |
559 |
560 | // @font-face detection routine by Diego Perini
561 | // http://javascript.nwbox.com/CSSSupport/
562 | tests['fontface'] = function(){
563 |
564 | var
565 | sheet, bool,
566 | head = docHead || docElement,
567 | style = document.createElement("style"),
568 | impl = document.implementation || { hasFeature: function() { return false; } };
569 |
570 | style.type = 'text/css';
571 | head.insertBefore(style, head.firstChild);
572 | sheet = style.sheet || style.styleSheet;
573 |
574 | var supportAtRule = impl.hasFeature('CSS2', '') ?
575 | function(rule) {
576 | if (!(sheet && rule)) return false;
577 | var result = false;
578 | try {
579 | sheet.insertRule(rule, 0);
580 | result = (/src/i).test(sheet.cssRules[0].cssText);
581 | sheet.deleteRule(sheet.cssRules.length - 1);
582 | } catch(e) { }
583 | return result;
584 | } :
585 | function(rule) {
586 | if (!(sheet && rule)) return false;
587 | sheet.cssText = rule;
588 |
589 | return sheet.cssText.length !== 0 && (/src/i).test(sheet.cssText) &&
590 | sheet.cssText
591 | .replace(/\r+|\n+/g, '')
592 | .indexOf(rule.split(' ')[0]) === 0;
593 | };
594 |
595 | bool = supportAtRule('@font-face { font-family: "font"; src: url(data:,); }');
596 | head.removeChild(style);
597 | return bool;
598 | };
599 |
600 |
601 | // These tests evaluate support of the video/audio elements, as well as
602 | // testing what types of content they support.
603 | //
604 | // We're using the Boolean constructor here, so that we can extend the value
605 | // e.g. Modernizr.video // true
606 | // Modernizr.video.ogg // 'probably'
607 | //
608 | // Codec values from : http://github.com/NielsLeenheer/html5test/blob/9106a8/index.html#L845
609 | // thx to NielsLeenheer and zcorpan
610 |
611 | // Note: in FF 3.5.1 and 3.5.0, "no" was a return value instead of empty string.
612 | // Modernizr does not normalize for that.
613 |
614 | tests['video'] = function() {
615 | var elem = document.createElement('video'),
616 | bool = !!elem.canPlayType;
617 |
618 | if (bool){
619 | bool = new Boolean(bool);
620 | bool.ogg = elem.canPlayType('video/ogg; codecs="theora"');
621 |
622 | // Workaround required for IE9, which doesn't report video support without audio codec specified.
623 | // bug 599718 @ msft connect
624 | var h264 = 'video/mp4; codecs="avc1.42E01E';
625 | bool.h264 = elem.canPlayType(h264 + '"') || elem.canPlayType(h264 + ', mp4a.40.2"');
626 |
627 | bool.webm = elem.canPlayType('video/webm; codecs="vp8, vorbis"');
628 | }
629 | return bool;
630 | };
631 |
632 | tests['audio'] = function() {
633 | var elem = document.createElement('audio'),
634 | bool = !!elem.canPlayType;
635 |
636 | if (bool){
637 | bool = new Boolean(bool);
638 | bool.ogg = elem.canPlayType('audio/ogg; codecs="vorbis"');
639 | bool.mp3 = elem.canPlayType('audio/mpeg;');
640 |
641 | // Mimetypes accepted:
642 | // https://developer.mozilla.org/En/Media_formats_supported_by_the_audio_and_video_elements
643 | // http://bit.ly/iphoneoscodecs
644 | bool.wav = elem.canPlayType('audio/wav; codecs="1"');
645 | bool.m4a = elem.canPlayType('audio/x-m4a;') || elem.canPlayType('audio/aac;');
646 | }
647 | return bool;
648 | };
649 |
650 |
651 | // Firefox has made these tests rather unfun.
652 |
653 | // In FF4, if disabled, window.localStorage should === null.
654 |
655 | // Normally, we could not test that directly and need to do a
656 | // `('localStorage' in window) && ` test first because otherwise Firefox will
657 | // throw http://bugzil.la/365772 if cookies are disabled
658 |
659 | // However, in Firefox 4 betas, if dom.storage.enabled == false, just mentioning
660 | // the property will throw an exception. http://bugzil.la/599479
661 | // This looks to be fixed for FF4 Final.
662 |
663 | // Because we are forced to try/catch this, we'll go aggressive.
664 |
665 | // FWIW: IE8 Compat mode supports these features completely:
666 | // http://www.quirksmode.org/dom/html5.html
667 | // But IE8 doesn't support either with local files
668 |
669 | tests['localstorage'] = function() {
670 | try {
671 | return !!localStorage.getItem;
672 | } catch(e) {
673 | return false;
674 | }
675 | };
676 |
677 | tests['sessionstorage'] = function() {
678 | try {
679 | return !!sessionStorage.getItem;
680 | } catch(e){
681 | return false;
682 | }
683 | };
684 |
685 |
686 | tests['webWorkers'] = function () {
687 | return !!window.Worker;
688 | };
689 |
690 |
691 | tests['applicationcache'] = function() {
692 | return !!window.applicationCache;
693 | };
694 |
695 |
696 | // Thanks to Erik Dahlstrom
697 | tests['svg'] = function(){
698 | return !!document.createElementNS && !!document.createElementNS(ns.svg, "svg").createSVGRect;
699 | };
700 |
701 | tests['inlinesvg'] = function() {
702 | var div = document.createElement('div');
703 | div.innerHTML = '';
704 | return (div.firstChild && div.firstChild.namespaceURI) == ns.svg;
705 | };
706 |
707 | // Thanks to F1lt3r and lucideer
708 | // http://github.com/Modernizr/Modernizr/issues#issue/35
709 | tests['smil'] = function(){
710 | return !!document.createElementNS && /SVG/.test(tostring.call(document.createElementNS(ns.svg,'animate')));
711 | };
712 |
713 | tests['svgclippaths'] = function(){
714 | // Possibly returns a false positive in Safari 3.2?
715 | return !!document.createElementNS && /SVG/.test(tostring.call(document.createElementNS(ns.svg,'clipPath')));
716 | };
717 |
718 |
719 | // input features and input types go directly onto the ret object, bypassing the tests loop.
720 | // Hold this guy to execute in a moment.
721 | function webforms(){
722 |
723 | // Run through HTML5's new input attributes to see if the UA understands any.
724 | // We're using f which is the element created early on
725 | // Mike Taylr has created a comprehensive resource for testing these attributes
726 | // when applied to all input types:
727 | // http://miketaylr.com/code/input-type-attr.html
728 | // spec: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#input-type-attr-summary
729 | ret['input'] = (function(props) {
730 | for (var i = 0, len = props.length; i
11 |
12 |
14 |
15 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/ex2/js/tutorial.js:
--------------------------------------------------------------------------------
1 | console.info("Ваша консоль работает")
2 |
3 | var canvas = document.getElementById("main");
4 | var context = canvas.getContext("2d");
5 | context.fillStyle = "red";
6 | context.fillRect(0,0,20,20);
7 |
8 | context.font = "bold 24px sans-serif";
9 | context.fillStyle = "blue";
10 | context.fillText("HTML5",100,100);
11 |
--------------------------------------------------------------------------------
/ex3/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Выполненное упражнение 2
13 |
11 |
12 |
14 |
15 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/ex3/js/tutorial.js:
--------------------------------------------------------------------------------
1 | console.info("You have a working console");
2 |
3 | var canvas = document.getElementById("main");
4 | var context = canvas.getContext("2d");
5 | context.fillStyle = "red";
6 | context.fillRect(0,0,20,20);
7 |
8 | context.font = "bold 24px sans-serif";
9 | context.fillStyle = "blue";
10 | context.fillText("HTML5",100,100);
11 |
12 | var img = new Image();
13 | img.src = "media/water.jpg";
14 | img.onload = function() {
15 | context.drawImage(img,0,110);
16 | };
17 |
18 | var characters = new Image();
19 | characters.src = "media/characters.gif";
20 | characters.onload = function() {
21 | context.drawImage(characters,33,0,32,32,30,20,64,64);
22 | };
23 |
--------------------------------------------------------------------------------
/ex3/media/characters.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivliaspiration/html5tutorial/30310c8b6e425ee37f9aa14a82e3dc2487ba329e/ex3/media/characters.gif
--------------------------------------------------------------------------------
/ex3/media/water.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivliaspiration/html5tutorial/30310c8b6e425ee37f9aa14a82e3dc2487ba329e/ex3/media/water.jpg
--------------------------------------------------------------------------------
/ex4/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Выполненное упражнение 3
13 |
11 |
12 |
14 |
15 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/ex4/js/tutorial.js:
--------------------------------------------------------------------------------
1 | var canvas = document.getElementById("main");
2 | var context = canvas.getContext("2d");
3 |
4 | var characters = new Image();
5 | characters.src = "media/characters.gif";
6 |
7 | characters.onload = function() {
8 | $(window).keyup(move);
9 | };
10 |
11 | var x, y;
12 | x = y = 0;
13 |
14 | var height = $(canvas).height();
15 | var width = $(canvas).width();
16 |
17 | function move(event) {
18 | switch (event.which) {
19 | case 38:
20 | if (y > 0) { y -= 10; }
21 | break;
22 | case 40:
23 | if (y < height) { y += 10; }
24 | break;
25 | case 37:
26 | if (x > 0) { x -= 10; }
27 | break;
28 | case 39:
29 | if (x < width) { x += 10; }
30 | break;
31 | default:
32 | break;
33 | }
34 |
35 | context.clearRect(0,0,width,height);
36 | context.drawImage(characters,33,0,32,32,x,y,32,32);
37 | }
38 |
--------------------------------------------------------------------------------
/ex4/media/characters.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivliaspiration/html5tutorial/30310c8b6e425ee37f9aa14a82e3dc2487ba329e/ex4/media/characters.gif
--------------------------------------------------------------------------------
/ex4/media/water.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivliaspiration/html5tutorial/30310c8b6e425ee37f9aa14a82e3dc2487ba329e/ex4/media/water.jpg
--------------------------------------------------------------------------------
/ex5/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Выполненное упражнение 4
13 |
11 |
12 |
14 |
15 |
16 |
17 |
18 |
21 |
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/ex5/js/tutorial.js:
--------------------------------------------------------------------------------
1 | var canvas = document.getElementById("main");
2 | var context = canvas.getContext("2d");
3 |
4 | var characters = new Image();
5 | characters.src = "media/characters.gif";
6 |
7 | characters.onload = function() {
8 | $(window).keyup(move);
9 | };
10 |
11 | var x, y;
12 | x = y = 0;
13 | var sizeAmt = 32;
14 |
15 | var height = $(canvas).height();
16 | var width = $(canvas).width();
17 |
18 | function move(event) {
19 | switch (event.which) {
20 | case 38:
21 | if (y > 0) { y -= 10; }
22 | break;
23 | case 40:
24 | if (y < height) { y += 10; }
25 | break;
26 | case 37:
27 | if (x > 0) { x -= 10; }
28 | break;
29 | case 39:
30 | if (x < width) { x += 10; }
31 | break;
32 | default:
33 | break;
34 | }
35 |
36 | draw();
37 | }
38 |
39 | var sizeEl = $('#size');
40 |
41 | sizeEl.change(function() {
42 | sizeAmt = Number(sizeEl.val());
43 | draw();
44 | });
45 |
46 | function draw() {
47 | context.clearRect(0,0,width,height);
48 | context.drawImage(characters,33,0,32,32,x,y,sizeAmt,sizeAmt);
49 | }
50 |
--------------------------------------------------------------------------------
/ex5/media/characters.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivliaspiration/html5tutorial/30310c8b6e425ee37f9aa14a82e3dc2487ba329e/ex5/media/characters.gif
--------------------------------------------------------------------------------
/ex5/media/water.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivliaspiration/html5tutorial/30310c8b6e425ee37f9aa14a82e3dc2487ba329e/ex5/media/water.jpg
--------------------------------------------------------------------------------
/ex6/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Выполненное упражнение 5
13 |
11 |
12 |
14 |
15 |
16 |
17 |
18 |
21 |
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/ex6/js/tutorial.js:
--------------------------------------------------------------------------------
1 | var canvas = document.getElementById("main");
2 | var context = canvas.getContext("2d");
3 |
4 | var characters = new Image();
5 | characters.src = "media/characters.gif";
6 |
7 | characters.onload = function() {
8 | $(window).keyup(move);
9 | };
10 |
11 | var x, y;
12 | x = y = 0;
13 | var sizeAmt = 32;
14 |
15 | var height = $(canvas).height();
16 | var width = $(canvas).width();
17 |
18 | function move(event) {
19 | switch (event.which) {
20 | case 38:
21 | if (y > 0) { y -= 10; }
22 | break;
23 | case 40:
24 | if (y < height) { y += 10; }
25 | break;
26 | case 37:
27 | if (x > 0) { x -= 10; }
28 | break;
29 | case 39:
30 | if (x < width) { x += 10; }
31 | break;
32 | default:
33 | break;
34 | }
35 |
36 | draw();
37 | }
38 |
39 | var sizeEl = $('#size');
40 |
41 | sizeEl.change(function() {
42 | sizeAmt = Number(sizeEl.val());
43 | draw();
44 | });
45 |
46 | function draw() {
47 | context.clearRect(0,0,width,height);
48 | context.drawImage(characters,33,0,32,32,x,y,sizeAmt,sizeAmt);
49 | }
50 |
51 | var nameEl = $('#username');
52 | var name = localStorage.getItem('username');
53 |
54 | nameEl.change(function() {
55 | name = nameEl.val();
56 | localStorage.setItem('username',name);
57 | });
58 |
59 | if (name !== "null") {
60 | nameEl.val(name);
61 | }
62 |
--------------------------------------------------------------------------------
/ex6/media/characters.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivliaspiration/html5tutorial/30310c8b6e425ee37f9aa14a82e3dc2487ba329e/ex6/media/characters.gif
--------------------------------------------------------------------------------
/ex6/media/water.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivliaspiration/html5tutorial/30310c8b6e425ee37f9aa14a82e3dc2487ba329e/ex6/media/water.jpg
--------------------------------------------------------------------------------
/ex7/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Выполненное упражнение 6
13 |
18 |
19 |
21 |
22 |
23 |
24 |
27 |
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/ex7/js/tutorial.js:
--------------------------------------------------------------------------------
1 | var canvas = document.getElementById("main");
2 | var context = canvas.getContext("2d");
3 |
4 | var characters = new Image();
5 | characters.src = "media/characters.gif";
6 |
7 | characters.onload = function() {
8 | $(window).keyup(move);
9 | };
10 |
11 | var height = $(canvas).height();
12 | var width = $(canvas).width();
13 |
14 | var x = 0;
15 | var y = 0;
16 | draw();
17 |
18 | function move(event) {
19 | switch (event.which) {
20 | case 38:
21 | if (y > 0) { y -= 10; }
22 | break;
23 | case 40:
24 | if (y < height) { y += 10; }
25 | break;
26 | case 37:
27 | if (x > 0) { x -= 10; }
28 | break;
29 | case 39:
30 | if (x < width) { x += 10; }
31 | break;
32 | default:
33 | break;
34 | }
35 |
36 | draw();
37 | }
38 |
39 | function draw() {
40 | context.clearRect(0,0,width,height);
41 | context.drawImage(characters,33,0,32,32,x,y,32,32);
42 | }
43 |
44 | var nameEl = $('#username');
45 | var name = localStorage.getItem('username');
46 |
47 | nameEl.change(function() {
48 | name = nameEl.val();
49 | localStorage.setItem('username',name);
50 | });
51 |
52 | if (name !== "null") {
53 | nameEl.val(name);
54 | }
55 |
--------------------------------------------------------------------------------
/ex7/media/characters.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivliaspiration/html5tutorial/30310c8b6e425ee37f9aa14a82e3dc2487ba329e/ex7/media/characters.gif
--------------------------------------------------------------------------------
/ex7/media/water.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivliaspiration/html5tutorial/30310c8b6e425ee37f9aa14a82e3dc2487ba329e/ex7/media/water.jpg
--------------------------------------------------------------------------------
/ex8/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Выполненное упражнение 7
20 |
18 |
19 |
21 |
22 |
23 |
24 |
27 |
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/ex8/js/tutorial.js:
--------------------------------------------------------------------------------
1 | var canvas = document.getElementById("main");
2 | var context = canvas.getContext("2d");
3 |
4 | var characters = new Image();
5 | characters.src = "media/characters.gif";
6 |
7 | var ws = new WebSocket("ws://exp.subelsky.com:8011");
8 |
9 | ws.onopen = function() {
10 | console.info("socket открыт");
11 | };
12 |
13 | ws.onclose = function() {
14 | console.info("socket закрыт");
15 | };
16 |
17 | ws.onerror = function(a,b) {
18 | console.error(a,b);
19 | };
20 |
21 | characters.onload = function() {
22 | $(window).keyup(move);
23 | draw();
24 |
25 | ws.onmessage = handleMessage;
26 | };
27 |
28 | var height = $(canvas).height();
29 | var width = $(canvas).width();
30 |
31 | var x = 0;
32 | var y = 0;
33 |
34 | function handleMessage(event) {
35 | var msg = JSON.parse(event.data);
36 | console.info(msg);
37 | }
38 |
39 | function move(event) {
40 | switch (event.which) {
41 | case 38:
42 | if (y > 0) { y -= 10; }
43 | break;
44 | case 40:
45 | if (y < height) { y += 10; }
46 | break;
47 | case 37:
48 | if (x > 0) { x -= 10; }
49 | break;
50 | case 39:
51 | if (x < width) { x += 10; }
52 | break;
53 | default:
54 | break;
55 | }
56 |
57 | ws.send(JSON.stringify({ name: name, x: x, y: y, type: "move" }));
58 | draw();
59 | }
60 |
61 | function draw() {
62 | context.clearRect(0,0,width,height);
63 | context.drawImage(characters,33,0,32,32,x,y,32,32);
64 | }
65 |
66 | var nameEl = $('#username');
67 | var name = localStorage.getItem('username');
68 |
69 | nameEl.change(function() {
70 | name = nameEl.val();
71 | localStorage.setItem('username',name);
72 | });
73 |
74 | if (name !== "null") {
75 | nameEl.val(name);
76 | }
77 |
--------------------------------------------------------------------------------
/ex8/media/characters.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivliaspiration/html5tutorial/30310c8b6e425ee37f9aa14a82e3dc2487ba329e/ex8/media/characters.gif
--------------------------------------------------------------------------------
/ex8/media/water.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivliaspiration/html5tutorial/30310c8b6e425ee37f9aa14a82e3dc2487ba329e/ex8/media/water.jpg
--------------------------------------------------------------------------------
/ex9/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Выполненное упражнение 8
20 |
18 |
19 |
21 |
22 |
23 |
27 |
28 |
29 |
32 |
33 |
34 |
35 |
36 | Выполненное упражнение 9
20 |
37 |
42 |
47 |
48 |
49 |
54 |
55 |
56 |
57 |
--------------------------------------------------------------------------------
/ex9/js/tutorial.js:
--------------------------------------------------------------------------------
1 | $('a').click(function(evt) {
2 | $('#'+evt.target.getAttribute('data-soundname'))[0].play();
3 | });
4 |
5 | var canvas = document.getElementById("main");
6 | var context = canvas.getContext("2d");
7 |
8 | var characters = new Image();
9 | characters.src = "media/characters.gif";
10 |
11 | characters.onload = function() {
12 | $(window).keyup(move);
13 | };
14 |
15 | var height = $(canvas).height();
16 | var width = $(canvas).width();
17 |
18 | var x = 0;
19 | var y = 0;
20 |
21 | draw();
22 |
23 | var ws = new WebSocket("ws://localhost:8080");
24 | ws.onmessage = handleMessage;
25 |
26 | function handleMessage(event) {
27 | var msg = JSON.parse(event.data);
28 | console.info(msg);
29 | }
30 |
31 | function move(event) {
32 | switch (event.which) {
33 | case 38:
34 | if (y > 0) { y -= 10; }
35 | break;
36 | case 40:
37 | if (y < height) { y += 10; }
38 | break;
39 | case 37:
40 | if (x > 0) { x -= 10; }
41 | break;
42 | case 39:
43 | if (x < width) { x += 10; }
44 | break;
45 | default:
46 | break;
47 | }
48 |
49 | ws.send(JSON.stringify({ name: name, x: x, y: y, type: "move" }));
50 | draw();
51 | }
52 |
53 | function draw() {
54 | context.clearRect(0,0,width,height);
55 | context.drawImage(characters,33,0,32,32,x,y,32,32);
56 | }
57 |
58 | var nameEl = $('#username');
59 | var name = localStorage.getItem('username');
60 |
61 | nameEl.change(function() {
62 | name = nameEl.val();
63 | localStorage.setItem('username',name);
64 | });
65 |
66 | if (name !== "null") {
67 | nameEl.val(name);
68 | }
69 |
--------------------------------------------------------------------------------
/ex9/media/bubble.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivliaspiration/html5tutorial/30310c8b6e425ee37f9aa14a82e3dc2487ba329e/ex9/media/bubble.mp3
--------------------------------------------------------------------------------
/ex9/media/bubble.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivliaspiration/html5tutorial/30310c8b6e425ee37f9aa14a82e3dc2487ba329e/ex9/media/bubble.ogg
--------------------------------------------------------------------------------
/ex9/media/bubble.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivliaspiration/html5tutorial/30310c8b6e425ee37f9aa14a82e3dc2487ba329e/ex9/media/bubble.wav
--------------------------------------------------------------------------------
/ex9/media/characters.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivliaspiration/html5tutorial/30310c8b6e425ee37f9aa14a82e3dc2487ba329e/ex9/media/characters.gif
--------------------------------------------------------------------------------
/ex9/media/ray_gun.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivliaspiration/html5tutorial/30310c8b6e425ee37f9aa14a82e3dc2487ba329e/ex9/media/ray_gun.mp3
--------------------------------------------------------------------------------
/ex9/media/ray_gun.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivliaspiration/html5tutorial/30310c8b6e425ee37f9aa14a82e3dc2487ba329e/ex9/media/ray_gun.ogg
--------------------------------------------------------------------------------
/ex9/media/ray_gun.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivliaspiration/html5tutorial/30310c8b6e425ee37f9aa14a82e3dc2487ba329e/ex9/media/ray_gun.wav
--------------------------------------------------------------------------------
/ex9/media/short.mov:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivliaspiration/html5tutorial/30310c8b6e425ee37f9aa14a82e3dc2487ba329e/ex9/media/short.mov
--------------------------------------------------------------------------------
/ex9/media/short.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivliaspiration/html5tutorial/30310c8b6e425ee37f9aa14a82e3dc2487ba329e/ex9/media/short.mp4
--------------------------------------------------------------------------------
/ex9/media/short.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivliaspiration/html5tutorial/30310c8b6e425ee37f9aa14a82e3dc2487ba329e/ex9/media/short.ogg
--------------------------------------------------------------------------------
/ex9/media/water.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivliaspiration/html5tutorial/30310c8b6e425ee37f9aa14a82e3dc2487ba329e/ex9/media/water.jpg
--------------------------------------------------------------------------------
/js/libs/json2.js:
--------------------------------------------------------------------------------
1 | /*
2 | http://www.JSON.org/json2.js
3 | 2011-02-23
4 |
5 | Public Domain.
6 |
7 | NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
8 |
9 | See http://www.JSON.org/js.html
10 |
11 |
12 | This code should be minified before deployment.
13 | See http://javascript.crockford.com/jsmin.html
14 |
15 | USE YOUR OWN COPY. IT IS EXTREMELY UNWISE TO LOAD CODE FROM SERVERS YOU DO
16 | NOT CONTROL.
17 |
18 |
19 | This file creates a global JSON object containing two methods: stringify
20 | and parse.
21 |
22 | JSON.stringify(value, replacer, space)
23 | value any JavaScript value, usually an object or array.
24 |
25 | replacer an optional parameter that determines how object
26 | values are stringified for objects. It can be a
27 | function or an array of strings.
28 |
29 | space an optional parameter that specifies the indentation
30 | of nested structures. If it is omitted, the text will
31 | be packed without extra whitespace. If it is a number,
32 | it will specify the number of spaces to indent at each
33 | level. If it is a string (such as '\t' or ' '),
34 | it contains the characters used to indent at each level.
35 |
36 | This method produces a JSON text from a JavaScript value.
37 |
38 | When an object value is found, if the object contains a toJSON
39 | method, its toJSON method will be called and the result will be
40 | stringified. A toJSON method does not serialize: it returns the
41 | value represented by the name/value pair that should be serialized,
42 | or undefined if nothing should be serialized. The toJSON method
43 | will be passed the key associated with the value, and this will be
44 | bound to the value
45 |
46 | For example, this would serialize Dates as ISO strings.
47 |
48 | Date.prototype.toJSON = function (key) {
49 | function f(n) {
50 | // Format integers to have at least two digits.
51 | return n < 10 ? '0' + n : n;
52 | }
53 |
54 | return this.getUTCFullYear() + '-' +
55 | f(this.getUTCMonth() + 1) + '-' +
56 | f(this.getUTCDate()) + 'T' +
57 | f(this.getUTCHours()) + ':' +
58 | f(this.getUTCMinutes()) + ':' +
59 | f(this.getUTCSeconds()) + 'Z';
60 | };
61 |
62 | You can provide an optional replacer method. It will be passed the
63 | key and value of each member, with this bound to the containing
64 | object. The value that is returned from your method will be
65 | serialized. If your method returns undefined, then the member will
66 | be excluded from the serialization.
67 |
68 | If the replacer parameter is an array of strings, then it will be
69 | used to select the members to be serialized. It filters the results
70 | such that only members with keys listed in the replacer array are
71 | stringified.
72 |
73 | Values that do not have JSON representations, such as undefined or
74 | functions, will not be serialized. Such values in objects will be
75 | dropped; in arrays they will be replaced with null. You can use
76 | a replacer function to replace those with JSON values.
77 | JSON.stringify(undefined) returns undefined.
78 |
79 | The optional space parameter produces a stringification of the
80 | value that is filled with line breaks and indentation to make it
81 | easier to read.
82 |
83 | If the space parameter is a non-empty string, then that string will
84 | be used for indentation. If the space parameter is a number, then
85 | the indentation will be that many spaces.
86 |
87 | Example:
88 |
89 | text = JSON.stringify(['e', {pluribus: 'unum'}]);
90 | // text is '["e",{"pluribus":"unum"}]'
91 |
92 |
93 | text = JSON.stringify(['e', {pluribus: 'unum'}], null, '\t');
94 | // text is '[\n\t"e",\n\t{\n\t\t"pluribus": "unum"\n\t}\n]'
95 |
96 | text = JSON.stringify([new Date()], function (key, value) {
97 | return this[key] instanceof Date ?
98 | 'Date(' + this[key] + ')' : value;
99 | });
100 | // text is '["Date(---current time---)"]'
101 |
102 |
103 | JSON.parse(text, reviver)
104 | This method parses a JSON text to produce an object or array.
105 | It can throw a SyntaxError exception.
106 |
107 | The optional reviver parameter is a function that can filter and
108 | transform the results. It receives each of the keys and values,
109 | and its return value is used instead of the original value.
110 | If it returns what it received, then the structure is not modified.
111 | If it returns undefined then the member is deleted.
112 |
113 | Example:
114 |
115 | // Parse the text. Values that look like ISO date strings will
116 | // be converted to Date objects.
117 |
118 | myData = JSON.parse(text, function (key, value) {
119 | var a;
120 | if (typeof value === 'string') {
121 | a =
122 | /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/.exec(value);
123 | if (a) {
124 | return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4],
125 | +a[5], +a[6]));
126 | }
127 | }
128 | return value;
129 | });
130 |
131 | myData = JSON.parse('["Date(09/09/2001)"]', function (key, value) {
132 | var d;
133 | if (typeof value === 'string' &&
134 | value.slice(0, 5) === 'Date(' &&
135 | value.slice(-1) === ')') {
136 | d = new Date(value.slice(5, -1));
137 | if (d) {
138 | return d;
139 | }
140 | }
141 | return value;
142 | });
143 |
144 |
145 | This is a reference implementation. You are free to copy, modify, or
146 | redistribute.
147 | */
148 |
149 | /*jslint evil: true, strict: false, regexp: false */
150 |
151 | /*members "", "\b", "\t", "\n", "\f", "\r", "\"", JSON, "\\", apply,
152 | call, charCodeAt, getUTCDate, getUTCFullYear, getUTCHours,
153 | getUTCMinutes, getUTCMonth, getUTCSeconds, hasOwnProperty, join,
154 | lastIndex, length, parse, prototype, push, replace, slice, stringify,
155 | test, toJSON, toString, valueOf
156 | */
157 |
158 |
159 | // Create a JSON object only if one does not already exist. We create the
160 | // methods in a closure to avoid creating global variables.
161 |
162 | var JSON;
163 | if (!JSON) {
164 | JSON = {};
165 | }
166 |
167 | (function () {
168 | "use strict";
169 |
170 | function f(n) {
171 | // Format integers to have at least two digits.
172 | return n < 10 ? '0' + n : n;
173 | }
174 |
175 | if (typeof Date.prototype.toJSON !== 'function') {
176 |
177 | Date.prototype.toJSON = function (key) {
178 |
179 | return isFinite(this.valueOf()) ?
180 | this.getUTCFullYear() + '-' +
181 | f(this.getUTCMonth() + 1) + '-' +
182 | f(this.getUTCDate()) + 'T' +
183 | f(this.getUTCHours()) + ':' +
184 | f(this.getUTCMinutes()) + ':' +
185 | f(this.getUTCSeconds()) + 'Z' : null;
186 | };
187 |
188 | String.prototype.toJSON =
189 | Number.prototype.toJSON =
190 | Boolean.prototype.toJSON = function (key) {
191 | return this.valueOf();
192 | };
193 | }
194 |
195 | var cx = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,
196 | escapable = /[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,
197 | gap,
198 | indent,
199 | meta = { // table of character substitutions
200 | '\b': '\\b',
201 | '\t': '\\t',
202 | '\n': '\\n',
203 | '\f': '\\f',
204 | '\r': '\\r',
205 | '"' : '\\"',
206 | '\\': '\\\\'
207 | },
208 | rep;
209 |
210 |
211 | function quote(string) {
212 |
213 | // If the string contains no control characters, no quote characters, and no
214 | // backslash characters, then we can safely slap some quotes around it.
215 | // Otherwise we must also replace the offending characters with safe escape
216 | // sequences.
217 |
218 | escapable.lastIndex = 0;
219 | return escapable.test(string) ? '"' + string.replace(escapable, function (a) {
220 | var c = meta[a];
221 | return typeof c === 'string' ? c :
222 | '\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
223 | }) + '"' : '"' + string + '"';
224 | }
225 |
226 |
227 | function str(key, holder) {
228 |
229 | // Produce a string from holder[key].
230 |
231 | var i, // The loop counter.
232 | k, // The member key.
233 | v, // The member value.
234 | length,
235 | mind = gap,
236 | partial,
237 | value = holder[key];
238 |
239 | // If the value has a toJSON method, call it to obtain a replacement value.
240 |
241 | if (value && typeof value === 'object' &&
242 | typeof value.toJSON === 'function') {
243 | value = value.toJSON(key);
244 | }
245 |
246 | // If we were called with a replacer function, then call the replacer to
247 | // obtain a replacement value.
248 |
249 | if (typeof rep === 'function') {
250 | value = rep.call(holder, key, value);
251 | }
252 |
253 | // What happens next depends on the value's type.
254 |
255 | switch (typeof value) {
256 | case 'string':
257 | return quote(value);
258 |
259 | case 'number':
260 |
261 | // JSON numbers must be finite. Encode non-finite numbers as null.
262 |
263 | return isFinite(value) ? String(value) : 'null';
264 |
265 | case 'boolean':
266 | case 'null':
267 |
268 | // If the value is a boolean or null, convert it to a string. Note:
269 | // typeof null does not produce 'null'. The case is included here in
270 | // the remote chance that this gets fixed someday.
271 |
272 | return String(value);
273 |
274 | // If the type is 'object', we might be dealing with an object or an array or
275 | // null.
276 |
277 | case 'object':
278 |
279 | // Due to a specification blunder in ECMAScript, typeof null is 'object',
280 | // so watch out for that case.
281 |
282 | if (!value) {
283 | return 'null';
284 | }
285 |
286 | // Make an array to hold the partial results of stringifying this object value.
287 |
288 | gap += indent;
289 | partial = [];
290 |
291 | // Is the value an array?
292 |
293 | if (Object.prototype.toString.apply(value) === '[object Array]') {
294 |
295 | // The value is an array. Stringify every element. Use null as a placeholder
296 | // for non-JSON values.
297 |
298 | length = value.length;
299 | for (i = 0; i < length; i += 1) {
300 | partial[i] = str(i, value) || 'null';
301 | }
302 |
303 | // Join all of the elements together, separated with commas, and wrap them in
304 | // brackets.
305 |
306 | v = partial.length === 0 ? '[]' : gap ?
307 | '[\n' + gap + partial.join(',\n' + gap) + '\n' + mind + ']' :
308 | '[' + partial.join(',') + ']';
309 | gap = mind;
310 | return v;
311 | }
312 |
313 | // If the replacer is an array, use it to select the members to be stringified.
314 |
315 | if (rep && typeof rep === 'object') {
316 | length = rep.length;
317 | for (i = 0; i < length; i += 1) {
318 | if (typeof rep[i] === 'string') {
319 | k = rep[i];
320 | v = str(k, value);
321 | if (v) {
322 | partial.push(quote(k) + (gap ? ': ' : ':') + v);
323 | }
324 | }
325 | }
326 | } else {
327 |
328 | // Otherwise, iterate through all of the keys in the object.
329 |
330 | for (k in value) {
331 | if (Object.prototype.hasOwnProperty.call(value, k)) {
332 | v = str(k, value);
333 | if (v) {
334 | partial.push(quote(k) + (gap ? ': ' : ':') + v);
335 | }
336 | }
337 | }
338 | }
339 |
340 | // Join all of the member texts together, separated with commas,
341 | // and wrap them in braces.
342 |
343 | v = partial.length === 0 ? '{}' : gap ?
344 | '{\n' + gap + partial.join(',\n' + gap) + '\n' + mind + '}' :
345 | '{' + partial.join(',') + '}';
346 | gap = mind;
347 | return v;
348 | }
349 | }
350 |
351 | // If the JSON object does not yet have a stringify method, give it one.
352 |
353 | if (typeof JSON.stringify !== 'function') {
354 | JSON.stringify = function (value, replacer, space) {
355 |
356 | // The stringify method takes a value and an optional replacer, and an optional
357 | // space parameter, and returns a JSON text. The replacer can be a function
358 | // that can replace values, or an array of strings that will select the keys.
359 | // A default replacer method can be provided. Use of the space parameter can
360 | // produce text that is more easily readable.
361 |
362 | var i;
363 | gap = '';
364 | indent = '';
365 |
366 | // If the space parameter is a number, make an indent string containing that
367 | // many spaces.
368 |
369 | if (typeof space === 'number') {
370 | for (i = 0; i < space; i += 1) {
371 | indent += ' ';
372 | }
373 |
374 | // If the space parameter is a string, it will be used as the indent string.
375 |
376 | } else if (typeof space === 'string') {
377 | indent = space;
378 | }
379 |
380 | // If there is a replacer, it must be a function or an array.
381 | // Otherwise, throw an error.
382 |
383 | rep = replacer;
384 | if (replacer && typeof replacer !== 'function' &&
385 | (typeof replacer !== 'object' ||
386 | typeof replacer.length !== 'number')) {
387 | throw new Error('JSON.stringify');
388 | }
389 |
390 | // Make a fake root object containing our value under the key of ''.
391 | // Return the result of stringifying the value.
392 |
393 | return str('', {'': value});
394 | };
395 | }
396 |
397 |
398 | // If the JSON object does not yet have a parse method, give it one.
399 |
400 | if (typeof JSON.parse !== 'function') {
401 | JSON.parse = function (text, reviver) {
402 |
403 | // The parse method takes a text and an optional reviver function, and returns
404 | // a JavaScript value if the text is a valid JSON text.
405 |
406 | var j;
407 |
408 | function walk(holder, key) {
409 |
410 | // The walk method is used to recursively walk the resulting structure so
411 | // that modifications can be made.
412 |
413 | var k, v, value = holder[key];
414 | if (value && typeof value === 'object') {
415 | for (k in value) {
416 | if (Object.prototype.hasOwnProperty.call(value, k)) {
417 | v = walk(value, k);
418 | if (v !== undefined) {
419 | value[k] = v;
420 | } else {
421 | delete value[k];
422 | }
423 | }
424 | }
425 | }
426 | return reviver.call(holder, key, value);
427 | }
428 |
429 |
430 | // Parsing happens in four stages. In the first stage, we replace certain
431 | // Unicode characters with escape sequences. JavaScript handles many characters
432 | // incorrectly, either silently deleting them, or treating them as line endings.
433 |
434 | text = String(text);
435 | cx.lastIndex = 0;
436 | if (cx.test(text)) {
437 | text = text.replace(cx, function (a) {
438 | return '\\u' +
439 | ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
440 | });
441 | }
442 |
443 | // In the second stage, we run the text against regular expressions that look
444 | // for non-JSON patterns. We are especially concerned with '()' and 'new'
445 | // because they can cause invocation, and '=' because it can cause mutation.
446 | // But just to be safe, we want to reject all unexpected forms.
447 |
448 | // We split the second stage into 4 regexp operations in order to work around
449 | // crippling inefficiencies in IE's and Safari's regexp engines. First we
450 | // replace the JSON backslash pairs with '@' (a non-JSON character). Second, we
451 | // replace all simple value tokens with ']' characters. Third, we delete all
452 | // open brackets that follow a colon or comma or that begin the text. Finally,
453 | // we look to see that the remaining characters are only whitespace or ']' or
454 | // ',' or ':' or '{' or '}'. If that is so, then the text is safe for eval.
455 |
456 | if (/^[\],:{}\s]*$/
457 | .test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, '@')
458 | .replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']')
459 | .replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) {
460 |
461 | // In the third stage we use the eval function to compile the text into a
462 | // JavaScript structure. The '{' operator is subject to a syntactic ambiguity
463 | // in JavaScript: it can begin a block or an object literal. We wrap the text
464 | // in parens to eliminate the ambiguity.
465 |
466 | j = eval('(' + text + ')');
467 |
468 | // In the optional fourth stage, we recursively walk the new structure, passing
469 | // each name/value pair to a reviver function for possible transformation.
470 |
471 | return typeof reviver === 'function' ?
472 | walk({'': j}, '') : j;
473 | }
474 |
475 | // If the text is not JSON parseable, then a SyntaxError is thrown.
476 |
477 | throw new SyntaxError('JSON.parse');
478 | };
479 | }
480 | }());
481 |
--------------------------------------------------------------------------------
/js/worker.js:
--------------------------------------------------------------------------------
1 | function factorizer(num) {
2 | var factors = [];
3 | var output = [];
4 | var x,c,d;
5 |
6 | for (x=1; x <= num; x++) {
7 | c = num / x;
8 | d = Math.floor(c);
9 |
10 | if (c === d){
11 | factors.push(x);
12 | }
13 | }
14 |
15 | return "множители " + num + " - " + factors.join(", ");
16 | }
17 |
18 | self.addEventListener('message', function(e) {
19 | var num = e.data;
20 | self.postMessage(factorizer(num));
21 | },false);
22 |
--------------------------------------------------------------------------------
/manifest/demo.manifest:
--------------------------------------------------------------------------------
1 | CACHE MANIFEST
2 | index.html
3 | favicon.ico
4 | js/libs/modernizr-1.7.js
5 | js/libs/jquery-1.5.2.js
6 | media/water.jpg
7 |
--------------------------------------------------------------------------------
/manifest/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivliaspiration/html5tutorial/30310c8b6e425ee37f9aa14a82e3dc2487ba329e/manifest/favicon.ico
--------------------------------------------------------------------------------
/manifest/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
18 |
19 |
21 |
22 | 
23 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/manifest/js/tutorial.js:
--------------------------------------------------------------------------------
1 | var canvas = document.getElementById("main");
2 | var context = canvas.getContext("2d");
3 |
4 | var characters = new Image();
5 | characters.src = "media/characters.gif";
6 |
7 | characters.onload = function() {
8 | $(window).keyup(move);
9 | };
10 |
11 | var height = $(canvas).height();
12 | var width = $(canvas).width();
13 |
14 | var x = Math.round(Math.random(height) * 1000);
15 | var y = Math.round(Math.random(width) * 1000);
16 |
17 | draw();
18 |
19 | function move(event) {
20 | switch (event.which) {
21 | case 38:
22 | if (y > 0) { y -= 10; }
23 | break;
24 | case 40:
25 | if (y < height) { y += 10; }
26 | break;
27 | case 37:
28 | if (x > 0) { x -= 10; }
29 | break;
30 | case 39:
31 | if (x < width) { x += 10; }
32 | break;
33 | default:
34 | break;
35 | }
36 |
37 | draw();
38 | }
39 |
40 | function draw() {
41 | context.clearRect(0,0,width,height);
42 | context.drawImage(characters,33,0,32,32,x,y,32,32);
43 | }
44 |
45 | var nameEl = $('#username');
46 | var name = localStorage.getItem('username');
47 |
48 | nameEl.change(function() {
49 | name = nameEl.val();
50 | localStorage.setItem('username',name);
51 | });
52 |
53 | if (name !== "null") {
54 | nameEl.val(name);
55 | }
56 |
57 | $('a').click(function(evt) {
58 | $('#'+evt.target.dataset.soundname)[0].play();
59 | });
60 |
--------------------------------------------------------------------------------
/manifest/media/water.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivliaspiration/html5tutorial/30310c8b6e425ee37f9aa14a82e3dc2487ba329e/manifest/media/water.jpg
--------------------------------------------------------------------------------
/media/bubble.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivliaspiration/html5tutorial/30310c8b6e425ee37f9aa14a82e3dc2487ba329e/media/bubble.mp3
--------------------------------------------------------------------------------
/media/bubble.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivliaspiration/html5tutorial/30310c8b6e425ee37f9aa14a82e3dc2487ba329e/media/bubble.ogg
--------------------------------------------------------------------------------
/media/bubble.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivliaspiration/html5tutorial/30310c8b6e425ee37f9aa14a82e3dc2487ba329e/media/bubble.wav
--------------------------------------------------------------------------------
/media/characters.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivliaspiration/html5tutorial/30310c8b6e425ee37f9aa14a82e3dc2487ba329e/media/characters.gif
--------------------------------------------------------------------------------
/media/ray_gun.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivliaspiration/html5tutorial/30310c8b6e425ee37f9aa14a82e3dc2487ba329e/media/ray_gun.mp3
--------------------------------------------------------------------------------
/media/ray_gun.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivliaspiration/html5tutorial/30310c8b6e425ee37f9aa14a82e3dc2487ba329e/media/ray_gun.ogg
--------------------------------------------------------------------------------
/media/ray_gun.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivliaspiration/html5tutorial/30310c8b6e425ee37f9aa14a82e3dc2487ba329e/media/ray_gun.wav
--------------------------------------------------------------------------------
/media/short.mov:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivliaspiration/html5tutorial/30310c8b6e425ee37f9aa14a82e3dc2487ba329e/media/short.mov
--------------------------------------------------------------------------------
/media/short.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivliaspiration/html5tutorial/30310c8b6e425ee37f9aa14a82e3dc2487ba329e/media/short.mp4
--------------------------------------------------------------------------------
/media/short.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivliaspiration/html5tutorial/30310c8b6e425ee37f9aa14a82e3dc2487ba329e/media/short.ogg
--------------------------------------------------------------------------------
/media/water.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivliaspiration/html5tutorial/30310c8b6e425ee37f9aa14a82e3dc2487ba329e/media/water.jpg
--------------------------------------------------------------------------------
/server/Gemfile:
--------------------------------------------------------------------------------
1 | source "http://rubygems.org"
2 |
3 | gem "em-websocket", "0.2.1"
4 |
--------------------------------------------------------------------------------
/server/Gemfile.lock:
--------------------------------------------------------------------------------
1 | GEM
2 | remote: http://rubygems.org/
3 | specs:
4 | addressable (2.2.5)
5 | em-websocket (0.2.1)
6 | addressable (>= 2.1.1)
7 | eventmachine (>= 0.12.9)
8 | eventmachine (0.12.10)
9 |
10 | PLATFORMS
11 | ruby
12 |
13 | DEPENDENCIES
14 | em-websocket (= 0.2.1)
15 |
--------------------------------------------------------------------------------
/server/server.rb:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env ruby
2 | require "logger"
3 | require "json"
4 | require "rubygems"
5 | require "bundler/setup"
6 |
7 | Bundler.require(:default)
8 |
9 | class TutorialServer
10 |
11 | def initialize(host,port)
12 | @host = host
13 | @port = port
14 | @logger = Logger.new(STDOUT)
15 | @sockets = {}
16 | end
17 |
18 | def run
19 | @logger.info "Запускаю сервер"
20 |
21 | EventMachine.run do
22 | @logger.info "Слушаю #{@host}:#{@port}"
23 |
24 | EventMachine::WebSocket.start(:host => @host, :port => @port) do |socket|
25 | socket.onopen do
26 | @logger.debug "сокет #{socket.object_id} открыт"
27 | @sockets[socket] = 1
28 | end
29 |
30 | socket.onmessage do |msg|
31 | @logger.info "получено: #{msg}"
32 | broadcast(msg)
33 | end
34 |
35 | socket.onerror do |s|
36 | @logger.debug "ошибка: #{s.inspect} #{s.backtrace}"
37 | end
38 |
39 | socket.onclose do
40 | @logger.debug "сокет #{socket.object_id} закрыт"
41 | @sockets.delete(socket)
42 | end
43 | end
44 |
45 | EventMachine::add_periodic_timer(10) { broadcast(JSON.generate({ :type => "ping" })) }
46 |
47 | trap("INT") do
48 | exit
49 | end
50 | end
51 | end
52 |
53 | def broadcast(msg)
54 | @sockets.keys.each { |socket| socket.send(msg) }
55 | end
56 | end
57 |
58 | puts $0
59 |
60 | if File.basename(__FILE__) == $0
61 | TutorialServer.new('0.0.0.0',8011).run
62 | end
63 |
--------------------------------------------------------------------------------
/start/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Работа с манифестом
20 |
23 |
26 |
11 |
12 |
14 |
15 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/start/js/tutorial.js:
--------------------------------------------------------------------------------
1 | console.info("Ваша консоль работает")
2 |
--------------------------------------------------------------------------------
/tutorial.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | HTML5 Больше, чем модная фишка: Основа
13 |HTML5: Больше, чем модная фишка
38 |ЗАДАЧИ
39 | 40 |Цель этого практикума - показать, как новые возможности HTML5 могут быть использованы в современных веб-приложениях без участия дополнительных зависимостей и противоречий с уже существующим кодом. Курс рассчитан на то, чтобы дать вам достаточно знаний для самостоятельного использования новых возможностей в своих приложениях.
41 | 42 |ПРЕДВАРИТЕЛЬНЫЕ ТРЕБОВАНИЯ
43 | 44 |-
45 |
Все упражнения проверялись в последних версиях браузера Chrome, но они должны работать и в последних версиях Safari и Firefox. Некоторые упражнения работают в Firefox не так, как задумано, из-за ограничений браузера. 46 | Я не проверял работоспособность в IE или Opera, но большая часть кода должна работать и там.
47 | Ваш браузер должен иметь консоль JavaScript. Такая консоль уже имеется в Safari и Chrome. Если вы используете Firefox, не забудьте установить Firebug.
48 | Вам понадобится текстовый редактор (Vi, Emacs, Textmate, Notepad, etc.) для внесения изменений в файлы проекта.
49 |
УСТАНОВКА
53 | 54 |-
55 |
Скопируйте папку
startиз этого проекта в какое-нибудь другое место. Эта папка содержит все необходимые зависимости и послужит основой для игры, которую мы будем делать.
56 | Изучите файл index.html в скопированной директории
57 | 58 |start. Он представляет собой упрощенный шаблон, основанный на HTML5 Boilerplate. Здесь вы можете найти полный шаблон. Это отличный способ изучить особенности HTML5.Обратите внимание на DOCTYPE, с которого начинается этот файл. Это все, что нужно, чтобы указать браузеру, что вы используете последнюю, самую современную версию HTML. 59 | Кроме того, в шаблоне используются новые семантические тэги
<header>и<footer>. Их можно использовать вместо менее семантической разметки вроде<div id="header"></div>.
60 | Откройте index.html в вашем браузере. Затем откройте консоль JavaScript (в Chrome это делается через меню Вид > Инструменты > Консоль Javascript; в Safari достаточно нажать option-Apple-C). В консоли должно быть сообщение "Ваша консоль работает". Если вы не видите это сообщение, попробуйте установить Firebug или открыть файл в другом браузере. Без работающей консоли следовать этому руководству крайне затруднительно.
61 | 62 |Это сообщение было отправлено в консоль в файле
js/tutorial.js. Я буду использовать этот файл для всего кода приложения.
63 |
УПРАЖНЕНИЕ 1
67 | 68 |Определение возможностей
69 | 70 |-
71 |
Изучите файл
js/libs/modernizr. Это библиотека Modernizr, которая выполняет определение возможностей браузера и помогает применять стили к новым семантическим элементам HTML5. Пока рано полагаться на то, что браузеры полностью поддерживают новые возможности, поэтому крайне важно проводить определение возможностей браузера и выдавать осмысленные сообщения об ошибках в случае необходимости.
72 | Чтобы подключить Modernizr, откройте текстовый редактор и добавьте в тэг
73 | 74 |<HEAD>файлаindex.htmlследующую строку:
75 | 76 |<script src="js/libs/modernizr-1.7.js"></script>Затем добавьте класс
no-jsк тэгу<HTML>во второй строке файла index.html.
77 | Откройте
index.htmlв браузере и посмотрите на тэг<HTML>. Обратите внимание на то, что классno-jsбыл заменен на ряд объявлений CSS. Эти объявления можно использовать, чтобы показывать сообщения об ошибках или для стилизации контента, предъявлемого при недоступности некоторого функционала.
78 | Откройте консоль JavaScript и изучите объект Modernizr. Вы сможете выполнить все упражнения этого учебника, если все нижеприведенные свойства будут иметь значение true:
79 | 80 |-
81 |
- Modernizr.canvas 82 |
- Modernizr.websockets 83 |
- Modernizr.audio 84 |
- Modernizr.geolocation 85 |
- Modernizr.localstorage 86 |
Если какие-либо из этих свойств не имеют значения "true", установите браузер Chrome.
90 |
Дополнительное задание
94 | 95 |Используя только CSS и HTML и полагаясь на классы touch и no-touch элемента <HEAD>, выведите соотвествующее сообщение о том, поддерживает ли устройство пользователя тач-интерфейс. Если у вас установлен симулятор мобильной ОС (например, iOS Simulator), проверьте оба случая.
УПРАЖНЕНИЕ 2
98 | 99 |Основы рисования на canvas
100 | 101 |-
102 |
Добавьте тэг
<canvas id="main" width="400" height="400"></canvas>сразу после открывающего тэга<body>в файлеindex.html.
103 | Чтобы нарисовать на canvas прямоугольник, добавьте в js/tutorial.js следующий код: 104 |
var canvas = document.getElementById("main"); 105 | var context = canvas.getContext("2d"); 106 | context.fillRect(0,0,20,20);107 | 108 |Рисование на canvas осуществляется в контексте canvas, а не на самом объекте canvas. В настоящее время доступен только контекст "2d". В будущем возможно появление 3D-контекста.
109 | Откройте
index.htmlв браузере. Вы должны увидеть черный прямоугольник.
110 | Вместо
fillRectвызовитеstrokeRectи обновите страницу в браузере. Теперь прямоугольник не закрашен.
111 | Задайте свойству
112 | 113 |fillStyleконтекста какой-нибудь цвет CSS, например, красный - "red", нарисуйте закрашенный прямоугольник и обновите страницу. Вы увидите красный прямоугольник.context.fillStyle = "red";
114 | Чтобы отобразить текст, добавьте в
115 | 116 |tutorial.jsследующий код и обновите страницу.context.font = "bold 24px sans-serif"; 117 | context.fillStyle = "blue"; 118 | context.fillText("HTML5",100,100);
119 |
Дополнительное задание
123 | 124 |Попробуйте залить прямоугольник градиентом. Для этого сначала вам нужно создать градиент (что объяснено здесь: Dive Into HTML5), а затем установить этот градиент значением свойства fillStyle.
125 | 126 |УПРАЖНЕНИЕ 3
127 | 128 |Работа с изображениями на canvas
129 | 130 |-
131 |
Скопируйте файл
media/water.jpgиз папкиmediaпрактикума в папкуmediaвашего проекта. (Это изображение распростряняется на условиях лицензии Creative Commons-licensed)
132 | Выведите это изображение на canvas, добавив следующий код в
133 | 134 |tutorial.js:var img = new Image(); 135 | img.src = "media/water.jpg"; 136 | img.onload = function() { 137 | context.drawImage(img,0,110); 138 | };
139 | Обновите страницу в браузере, чтобы увидеть картинку.
140 | Добавьте два дополнительных параметра после 3 уже имеющихся, ширину и высоту области вывода для картинки:
141 | 142 |context.drawImage(img,0,110,200,100);
143 | Обновите страницу. Размер картинки будет другим.
144 | Для нашей простой игры нам понадобится файл со спрайтами
media/characters.gif. Скопируйте его в папкуmediaвашего проекта. (Я получил этот файл, лицензированный на условиях CC, от David E. Gervais, участника проекта TomeTik)
145 | Чтобы вырезать одного персонажа из файла и отобразить его на canvas, вам придется вызвать
146 | 147 |drawImageс 9 аргументами:drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);
148 | 149 |Назначение каждого из этих агрументов объяснено на картинке: 150 |
151 | 152 |
Каждый спрайт имеет ширину и высоту в 32 пикселя. Таким образом, если вы хотите вырезать второго персонажа в верхнем ряду, да-да, этого, в красном капюшоне, вам нужно вызвать
153 | 154 |drawImageс такими параметрами:-
155 |
- sx = 33 156 |
- sy = 0 157 |
- sw = 32 158 |
- sh = 32 159 |
Добавьте dx, dy, dw и dh по вкусу, затем обновите страницу. Если что-то не получается, посмотрите решение в папке
ex3.
163 |
УПРАЖНЕНИЕ 4
167 | 168 |Простая анимация
169 | 170 |-
171 |
Скопируйте
js/libs/jquery-1.5.2.jsв папкуjs/libsвашего проекта. jQuery понадобится нам для обработки событий клавиатуры и некоторых других задач.
172 | Чтобы подключить jQuery, добавьте следующий тэг в конец файла index.html, перед загрузкой файла
173 | 174 |tutorial.js:<script src="js/libs/jquery-1.5.2.js"></script>
175 | Закомментируйте большую часть кода, отвечающего за рисование. В этом упражнении мы начнем с чистого листа. Оставшийся в
176 | 177 |tutorial.jsкод должен выглядеть примерно так:var canvas = document.getElementById("main"); 178 | var context = canvas.getContext("2d"); 179 | 180 | var characters = new Image(); 181 | characters.src = "media/characters.gif";
182 | Задайте значения переменных
xиyравными нулю. В этих переменных будет храниться текущая позиция игрока.
183 | Задайте переменные для хранения ширины и высоты canvas. В дальнейшем мы будем менять размеры canvas, поэтому имеет смысл не задавать эти переменные константами.
184 | 185 |var height = $(canvas).height();
186 |var width = $(canvas).width();
187 | Задайте обработчик для обработки события
188 | 189 |onloadобъектаcharacters. После загрузки изображения персонажа клавиатурные события будут обрабатываться функцией, которую мы напишем на следующем шаге:$(window).keyup(move);
190 | Напишите функцию
191 | 192 |move, которая изменяет позицию персонажа на экране в зависимости от нажатой кнопки. На предыдущем шаге мы задали обрабочик клавиатурных событий. Этот обработчик должен принимать объектevent, передаваемый jQuery. Этот объект имеет свойствоwhich, указывающий на то, какая клавиша была нажата.Коды клавиш:
193 | 194 |-
195 |
- Вверх = 38 196 |
- Вниз = 40 197 |
- Влево = 37 198 |
- Вправо = 39 199 |
Увеличивайте значение
203 | 204 |xилиyна 10, в зависимости от того, какая клавиша была нажата. Проверяйте значенияxиyна предмет выхода за границы canvas (значения не должны быть меньше нуля или больше размеров canvas).Если вы запутались, посмотрите как реализована эта функция в файле
ex4/js/tutorial.js.
205 | В конце тела функции
206 | 207 |moveвызовитеcontext.drawImage, чтобы вырезать изображение из файла со спрайтами и отобразить его на canvas в координатах, заданныхxиy.Если вы запутались, посмотрите, как это сделано в файле
ex4/js/tutorial.js.
208 | Обновите страницу и опробуйте анимацию. Персонаж должен неторопливо перемещаться по экрану при нажатии на клавиши со стрелками.
209 | Персонаж оставляет за собой некрасивый след. Исправить это можно путем очистки экрана перед каждым выводом персонажа. Добавьте следующий код перед вызовом
210 | 211 |drawImage:context.clearRect(0,0,width,height);
212 | Если хотите, заставьте персонажа перемещаться на большее расстояние при каждом нажатии клавиши.
213 |
Дополнительное задание
217 | 218 |Попробуйте создать цикл анимации, который осуществлял бы вывод на экран несколько раз в секунду. Это поможет отделить обработку событий клавиатуры от отображения. Для запуска цикла вам понадобится что-то вроде:
219 | 220 |setInterval(runLoopFunction,interval);
Где runLoopFunction - имя вашей функции, а interval - количество миллисекунд, которые браузер должен выдерживать между вызовами функции.
УПРАЖНЕНИЕ 5
225 | 226 |Работаем с формами
227 | 228 |-
229 |
Если мы сделаем нашу игру многопользовательской, нам нужно будет знать, как зовут игроков. Давайте добавим поле, которое принимает имя пользователя и использует новые возможности HTML5. Добавьте в файл
230 | 231 |index.htmlследующую строку:<input id="username" placeholder="Ваше имя">
232 | Обновите страницу. Если вы не видите текста "Ваше имя" в поле, проверьте значение
Modernizr.input.placeholderв консоли JavaScript.
233 | Добавьте к полю ввода аттрибут
autofocusи обновите страницу. Если браузер поддерживает такую возможность, поле автоматически получит фокус.
234 | Опробуем в деле новый элемент формы, ползунок, с помощью которого мы можем изменять размеры персонажа. Добавьте в
235 | 236 |index.htmlследующий код (1):<input id="size" type="range" min="4" max="320" step="8" value="32">
237 | Добавьте обработчик событий ползунка в файл
238 | 239 |tutorial.js. Обработчик должен изменять размер изображения, выводимого вызовомdrawImage. Задать обработчик можно так:
240 | 241 |$('#size').change(function() { ... });Получить значение ползунка можно с помощью
$('#size').val()
242 |
(1) Firefox не отображает этот элемент. Выполните задание в Safari или Chrome.
246 | 247 |Дополнительное задание
248 | 249 |Попробуйте использовать другие элементы формы, описанные в книге Dive Into HTML5. В HTMl5 есть даже элемент для выбора цвета!
250 | 251 |УПРАЖНЕНИЕ 6
252 | 253 |Локальное хранилище
254 | 255 |Примечание: Это упражнение работает некорректно в Firefox из-за бага в обработке ссылок file://. Если вы хотите, чтобы все заработало и в Firefox, придется отдавать веб-страницу с сервера. Подробности
256 | 257 |-
258 |
Сохраните значение в локальном хранилище из консоли JavaScript:
259 | 260 |localStorage.setItem('shaz','bot')
261 | Закройте страницу, затем откройте ее в новом окне и введите в консоли JavaScript такую команду:
262 | 263 |localStorage.getItem('shaz')264 | 265 |Если ваш браузер поддерживает локальные хранилища, функция должна вернуть значение
shaz.
266 | Попробуйте проделать то же самое с объектом
sessionStorage. ЧемsessionStorageотличается отlocalStorage? Что происходит, если вы просто обновляете страницу? Одинаково ли ведут себя объекты?
267 | Вызовите
localStorage.clear()и попробуйте еще раз найти элемент 'shaz'.
268 | Добавьте обработчик события
269 | 270 |changeдля поля ввода имени пользователя, которое мы создали в упражнении 5:$('#username').change(function() { ... });
271 | В обработчике сохраните имя пользователя с помощью
localStorage. Чтобы вызвать событиеchangeвам, возможно, нужно будет снять фокус с поля ввода. Чтобы получить значение поля ввода, используйте$("#username").val().
272 | Добавьте в
tutorial.jsкод для получения имени пользователя изlocalStorage(которое мы сохранили на предыдущем шаге) при загрузке страницы. Если имя пользователя найдено в хранилище, восстановите ранее сохраненное имя пользователя в поле ввода, например так:$("#username").val(nameStr).
273 | Обновите страницу. Введите имя пользователя, снимите фокус с поля (чтобы убедиться, что событие
changeвызвано), затем снова обновите страницу. На этот раз поле ввода должно содержать имя пользователя вместо текста по умолчанию.
274 | Попробуйте сохранять и извлекать из локального хранилища числа и хэши. Сохраняет ли локальное хранилище тип?
275 |
Консоль JavaScript может обладать функцией просмотра локального хранилища и хранилища сессии. В инструменте для разработчиков движка WebKit содержимое хранилищ можно посмотреть на соответствующей вкладке.
279 | 280 |Дополнительное задание
281 | 282 |-
283 |
Добавьте к объекту
windowобработчик событияstorage, чтобы отслеживать добавление новых элементов в локальное хранилище. Если не знаете, с чего начать, начните отсюда: Dive Into HTML5.
284 | Что произойдет, если попытаться обратиться к элементу, которые не был сохранен в хранилище?
285 |
УПРАЖНЕНИЕ 7
289 | 290 |Очистка canvas
291 | 292 |-
293 |
Прежде, чем добавить в нашу "игру" возможности мультиплеера, поработаем над ее внешним видом. Установим для canvas темный фон. Добавьте этот код в тэг
294 | 295 |<head>файлаindex.html:<style> 296 | canvas { 297 | background-color: black; 298 | } 299 | 300 | input { display: block; } 301 | </style> 302 |
303 | Если хотите, можно увеличить ширину и высоту canvas.
304 | Увеличьте скорость перемещения персонажа так, чтобы он перемещался на 5 или 10 пикселей на одно нажатие клавиши.
305 |
УПРАЖНЕНИЕ 8
309 | 310 |Web Sockets
311 | 312 |Примечание: WebSockets не работают в Firefox. Вы можете исправить это (частично) с помощью socket.io.
313 | 314 |-
315 |
Подключим websocket-сервер для обмена информацией с другими игроками. Добавьте в
316 | 317 |tutorial.jsкод, приведенный ниже. Я заметил, что если этот код выполняется до загрузкиcharacters.gif, это иногда приводит к ошибкам. Возможно, имеет смысл вставить этот код в обработчик событияonloadкартинки. Если вам непонятно, о чем речь, загляните в решение для упражнения 8.var ws = new WebSocket("ws://exp.subelsky.com:8011"); 318 | ws.onmessage = handleMessage; 319 | 320 | function handleMessage(event) { 321 | console.info(event.data); 322 | }
323 | Обновите страницу. Каждые 10 секунд с сервера должно приходить сообщение "ping". Обратите внимание, что это сообщение - JSON-строка, поэтому прежде чем работать с ней, ее надо десериализовать.
324 | Откройте
server/server.rb, чтобы понять, к чему мы подключаемся.
325 | Измените функцию
326 | 327 |handleMessage, добавив разбор JSON-строки. Если ваш браузер не имеет встроенной поддержки JSON, подключите к проекту скриптjs/libs/json2.js.var msg = JSON.parse(event.data); 328 | console.info(msg);
329 | Обновите страницу, подождите 10 секунд и проверьте консоль. Вы должны увидеть десериализованный JSON-объект.
330 | Измените функцию
331 | 332 |move, добавив в нее отправку JavaScript-объекта в websocket каждый раз при перемещении персонажа. Воспользуйтесь методомwebsocket.send:ws.send(JSON.stringify({ name: name, x: x, y: y, type: "move" }));
333 | Посмотрите логи сервера, выводимые на экран. Каждый раз при нажатии клавиши перемещения в логе должны появляется сообщения о перемещении персонажа.
334 |
Если вы подумываете о создании приложения с использованием websocket, обязательно посмотрите проект Pusher. Возможно, вам не придется писать собственный сервер.
338 | 339 |Дополнительное задание
340 | 341 |Сервер передает события передвижения всему классу (практикум проводился на конференции, компьютеры студентов были объединены в сеть - прим. пер.). Чтобы отобразить перемещения других студентов на экране, нужно отследить их имена и координаты x и y (реализовать это лучше с помощью кэша, ключами которого будут имена пользователей, а значениями - координаты). Измените вывод handleMessage так, чтобы он давал информацию о нескольких игроках, показывая другую картинку для чужих персонажей.
Мы не проверяем имена пользователей на уникальность, поэтому постарайтесь сразу договориться с другими студентами о разных именах.
344 | 345 |УПРАЖНЕНИЕ 9
346 | 347 |Работа с мультимедия (и пользовательскими аттрибутами)
348 | 349 |Добавим в игру звуковые эффекты и воспользуемся пользовательскими аттрибутами HTML5 для упрощения управления.
350 | 351 |-
352 |
Добавьте в тело
353 | 354 |index.htmlтакой список:<ul> 355 | <li><a href="#" data-soundname='bubble'>Бульк</a></li> 356 | <li><a href="#" data-soundname='ray_gun'>Пыщь</a></li> 357 | </ul> 358 |
359 | С помощью jQuery добавьте обработчик события
360 | 361 |clickдля тэга<a>. Определить, какой звук требуется проиграть, можно спомощью значения пользовательского аттрибута события, как это показано ниже. Здесь я использовал кросс-браузерное решение, а также вариант, предложенный в спецификации HTML5, который, похоже, поддерживает только Chrome.
369 | 370 |$('a').click(function(evt) { 362 | // не слишком элегантно, зато работает во всех браузерах 363 | $('#'+evt.target.getAttribute('data-soundname'))[0].play(); 364 | 365 | // спецификация HTML5 предлагает изящный API, но работает это, по-видимому, только в Chrome 366 | // $('#'+evt.target.dataset.soundname)[0].play(); 367 | }); 368 |Не стоит путать пользовательские аттрибуты с микроданными - они не предназначены для внешней обработки. Подробне о микроданных можно почитать в Dive Into HTML5.
371 | Обновите страницу. Щелкните каждую ссылку, чтобы убедиться, что свойство
datasetдоступно и получает нужное значение.
372 | Воспроизведение звука и видео в HTML5 подразумевает возню с кодеками. Обычно контент делают доступным в нескольких форматах. Я добавил звуковые файлы в четырех разных форматах. Скопируйте звуковые файлы из папки
373 | 374 |mediaв ваш проект. Если вы отдаете эти файлы с сервера (а не через file://), возможно, вам придется повозиться с MIME, так как HTML5 не будет воспроизводить файлы, отданные с неверным MIME типом. Подробнее см. MIME Types.Следующий код должен работать для большинства пользователей. Спецификация предприсывает браузеру воспроизводить первый источник, который он способен воспроизвести.
375 | 376 |
390 | 391 |<div style="display:hidden"> 377 | <audio id="bubble" preload> 378 | <source src="media/bubble.ogg"> 379 | <source src="media/bubble.mp3"> 380 | <source src="media/bubble.wav"> 381 | </audio> 382 | 383 | <audio id="ray_gun" preload> 384 | <source src="media/ray_gun.ogg"> 385 | <source src="media/ray_gun.mp3"> 386 | <source src="media/ray_gun.wav"> 387 | </audio> 388 | </div> 389 |Я решил добавить звуковые файлы прямо в страницу. В этом случае, если HTML5-аудио не сработает, браузер обработает их как обычно. А вообще аудио-объекты можно создавать также, как и картинки:
392 | 393 |var audio = new Audio; 394 | audio.src = "http://..."; 395 |
396 | Обновите страницу. Попробуйте проиграть оба файла в консоли:
397 | 398 |$('#bubble')[0].play() 399 | $('#ray_gun')[0].play()
400 | Измените ссылку так, чтобы указанные файлы воспроизводились автоматически. Воспользуйтесь кодом из предыдущего шага.
401 | Чтобы посмотреть, как выглядят элементы управления звуком по умолчанию, уберите стиль
display:hiddenдля<div>и добавьте аттрибутcontrolsпослеpreload. Обновите страницу.
402 | Вставка видео происходит также. Для обеспечения совместимости придется предоставить несколько форматов видео. Скопируйте файлы
403 | 404 |short.mov,short.mp4,short.ogvиshort.webmиз папкиmediaв папкуmediaвашего проекта.Видео было сконвертировано из файла QuickTime с помощью
ffmpeg2theora,ffmpegиHandBrakeCLI. Настройки конвертации были подсмотрены в Dive Into HTML5.
405 | Добавьте в конец
406 | 407 |index.html:<video width="320" height="240" preload controls> 408 | <source src="media/short.ogg" type='video/ogg; codecs="theora, vorbis"' /> 409 | <source src="media/short.mp4" /> 410 | <source src="media/short.mov" /> 411 | </video> 412 |
413 | Обновите страницу. Один из видеофайлов должен отобразиться в вашем браузере.
414 | 415 |Потрясающий пример использования canvas для манипулирования изображением из видео можно найти здесь. В этом демо показано использование событий вставленного медиаконтента для отображения таймера.
416 |
Дополнительное задание
420 | 421 |Если воспроизведение мультимедия на поддерживается браузером, воспользуйтесь флеш-плеером FlowPlayer (для этого нужно добавить тэг <object> после тэгов <source>. Подробно эта техника освещена в статье Video for Everybody).
УПРАЖНЕНИЕ 10
424 | 425 |Геолокация
426 | 427 |-
428 |
Введите эту команду в консоль JavaScript:
429 | 430 |navigator.geolocation.getCurrentPosition(function(loc) { console.info(loc.coords) }, function(err) { console.error(err) })
431 | Посмотрите на объект локации в консоле. Если поискать эти координаты на Google Maps, то результат окажется довольно точным! Интегрировать геолокацию с Google Maps очень легко, и это позволит показывать положение пользователя на карте. К сожалению, из-за особенностей аутентификации Google Maps API сделать это с localhost не получится. 432 | Здесь расположено простое демо - обязательно изучите исходный код страницы.
433 | 434 |Первая функция обратного вызова вызывается, если браузер может определить свое положения, вторая - если не может. На моей машине вторая функция вызывается в Safari, если компьютер подключен к сети через Ethernet.
435 |
Дополнительное задание
439 | 440 |Посмотрите на SimpleGeo примеры того, что можно сделать, если знать примерные координаты пользователя.
441 | 442 |УПРАЖНЕНИЕ 11
443 | 444 |Web Workers
445 | 446 |-
447 |
Изучите файл
js/worker.jsи скопируйте его в свой проект. Это простой алгоритм перебора, призванный найти все множители данного целого числа.
448 | Обновите страницу и введите в консоль JavaScript следующие команды:
449 | 450 |var worker = new Worker('js/worker.js'); 451 | 452 | worker.addEventListener('message', function(e) { 453 | console.info(e.data); 454 | },false); 455 | 456 | worker.postMessage(100);457 | 458 |Если вы используете Chrome, при открытии
460 | 461 |index.htmlкак file:// будет вызвано исключение безопасности. Отключить его можно, запустив Chrome из консоли с особым ключом. 459 | На OS X это выглядит так:open -n -a 'Google Chrome.app' --args --allow-file-access-from-files
462 | 463 |А можно просто воспользоваться другим браузером.
464 | Worker должен отправить в консоль сообщение. Попробуйте передадать в
worker.postMessageбольшее число. Достаточно большое число (например, 1 000 000) приведет к длительным вычислениям. Обратите внимание, что страница останется отзывчивой при выполнении такого фонового задания.
465 |
Вот более сложный пример использования webworker.
469 | 470 |УПРАЖНЕНИЕ 12
471 | 472 |Оффлайновые приложения
473 | 474 |-
475 |
Изучите файл
index.htmlв папкеmanifest. Это сокращенная версия решения упражнения 11. Обратите внимание на тэг<html>, который в этой версии содержит ссылку наdemo.manifest.
476 | Изучите
demo.manifest.
477 | Если у вас установлен сниффер, натравите его на порт 80. Если сниффера нет, убедитесь, что консоль JavaScript отслеживает сетевой траффик.
478 | Зайдите на http://files.subelsky.com/manifestdemo/index.html
479 | Посмотрите в сниффере или консоли JavaScript, какие файлы скачиваются. Обратите внимание на MIME-тип файла
demo.manifest(text/cache-manifest).
480 | Теперь обновите страницу. Если все заработает как надо, траффик будет состоять из единственного запроса проверки файла
481 | 482 |demo.manifest, который даже не будет скачан, т.к. он не изменялся (о чем свидетельствует статус304HTTP-ответа).Используя эту технику, можно "установить" HTML5-приложение на смартфон.
483 |
Дополнительное задание
487 | 488 |Запустите manifest/index.html на локальном сервере. Папка с приложением должна отдаваться с веб-сервера (а не через файл file://), а файл с манифестом должен иметь правильный MIME-тип. В Apache это достигается следующей директивой в httpd.conf:
AddType text/cache-manifest .manifest
491 | СЛИШКОМ ПРОСТО?
494 | 495 |Вот еще несколько возможностей HTML5, о который стоит знать, если этот практикум вам не подошел, или если вы считаете, что пока эти технологии слишком нестабильны для практического применения:
496 | 497 |-
498 |
- 499 |
- 500 |
- 501 |
- 502 |
Polyfills, или как добавить кросс-браузерную поддержку HTML5, также посмотрите Uber
503 | Возможности CSS3: закругленные углы, 2D-преобразования и т.д.
504 |
ПОЛЕЗНЫЕ ССЫЛКИ
508 | 509 |-
510 |
- 511 |
- 512 |
- 513 |
- 514 |
- 515 |
- 516 |
БЛАГОДАРНОСТИ
520 | 521 |Автор благодарит Jeff Casimir за помощь в подготовке этого практикума и Mark Pilgrim за написание книги Dive Into HTML5, которая стала большим подспорьем. Разумеется, все ошибки в этом практикуме на совести самого автора!
522 | 523 |ОБРАТНАЯ СВЯЗЬ
524 | 525 |Спасибо за то, что заинтересовались этим практикумом. Связаться со мной можно тут: mike@subelsky.com, или в твиттере: @subelsky. Я обожаю разговоры о HTML5, поэтому не стесняйтесь связываться со мной, если у вас возникли вопросы, или вы хотите обсудить интересные задачи.
526 | 527 |Большинству приемов, которые обсуждаются в этом практикуме, я научился во время работы над игрой для программистов, использующей возможности HTML5. Игра эта называется EXP, и нам нужны бета-тестеры. Заявку на участие можно оставить здесь: exp.subelsky.com.
528 | 529 | 530 | 531 | -------------------------------------------------------------------------------- /tutorial.markdown: -------------------------------------------------------------------------------- 1 | # HTML5: Больше, чем модная фишка 2 | 3 | # ЗАДАЧИ 4 | 5 | Цель этого практикума - показать, как новые возможности HTML5 могут быть использованы в современных веб-приложениях без участия дополнительных зависимостей и противоречий с уже существующим кодом. Курс рассчитан на то, чтобы дать вам достаточно знаний для самостоятельного использования новых возможностей в своих приложениях. 6 | 7 | # ПРЕДВАРИТЕЛЬНЫЕ ТРЕБОВАНИЯ 8 | 9 | - Все упражнения проверялись в последних версиях браузера Chrome, но они должны работать и в последних версиях Safari и Firefox. Некоторые упражнения работают в Firefox не так, как задумано, из-за ограничений браузера. 10 | Я не проверял работоспособность в IE или Opera, но большая часть кода должна работать и там. 11 | 12 | - Ваш браузер должен иметь консоль JavaScript. Такая консоль уже имеется в Safari и Chrome. Если вы используете Firefox, не забудьте установить [Firebug](http://getfirebug.com). 13 | 14 | - Вам понадобится текстовый редактор (Vi, Emacs, Textmate, Notepad, etc.) для внесения изменений в файлы проекта. 15 | 16 | # УСТАНОВКА 17 | 18 | 1. Скопируйте папку `start` из этого проекта в какое-нибудь другое место. Эта папка содержит все необходимые зависимости и послужит основой для игры, которую мы будем делать. 19 | 20 | 2. Изучите файл index.html в скопированной директории `start`. Он представляет собой упрощенный шаблон, основанный на [HTML5 Boilerplate](http://html5boilerplate.com/). Здесь вы можете найти [полный шаблон](https://github.com/paulirish/html5-boilerplate/blob/master/index.html). Это отличный способ изучить особенности HTML5. 21 | 22 | Обратите внимание на DOCTYPE, с которого начинается этот файл. Это все, что нужно, чтобы указать браузеру, что вы используете последнюю, самую современную версию HTML. 23 | Кроме того, в шаблоне используются новые семантические тэги `