Avertissement pour les débutants

Désolé, cet exemple de code n'est pas pour vous. Il s'agit simplement d'un code utilisant les dernières nouveautés. Vous devrez découvrir, déchiffrer et comprendre les codes de cet exemple seul.

Avertissement pour les experts

Je découvre et je teste des nouveautés, je serais sans doute incapable de répondre à vos questions.

Je travaille toujours dans un même environnement que j'appelle ma page de test. Bien entendu, le code de cette page évolue et se complexifie en fonction des nouveautés et de mes besoins futurs. Je viens d'écrire et de tester une nouvelle version.

L'adoption d'une page de test, pour l'instant, uniquement utilisable sous Chrome 36 et plus semblera prématurée à beaucoup, mais j'ai toujours eu la chance de travailler uniquement pour l'avenir sans avoir à me soucier des navigateurs obsolètes. Je vais devoir tester des codes jQuery dans ce contexte. Je fais aussi le pari que Firefox deviendra très rapidement compatible.

Avec les outils du développeur, il vous sera très facile de consulter et de récupérer une copie de tous les fichiers mis en oeuvre. Voici le fichier principal :

Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0">
    <meta name="author" content="Daniel Hagnoul">
    <title>Page de test v2.0</title>
 
    <!-- Doit être le premier import : fontes, headjs, css et scripts -->
    <link rel="import" href="http://danielhagnoul.developpez.com/lib/dvjh/dvjhHead.php">
 
    <!-- Exemple : composant web "clock-face" -->
    <link rel="import" href="http://danielhagnoul.developpez.com/lib/dvjh/dvjhClockFace.php">
 
    <!-- Doit être le dernier import : debugBool et QUnit -->
    <link rel="import" href="http://danielhagnoul.developpez.com/lib/dvjh/dvjhFoot.php">
 
    <style>
        /* Nota bene : ici 1 rem est égal à 10 px, voir le fichier dvjhRemBase.css */
        
/*-- Début code du test --*/
 
 
/*-- Fin code du test --*/
 
    </style>
    <script>
        "use strict";
        
        // Doit être true, sauf en production pour une version finale.
        var debugBool = true;
        
        head.ready( [ "jquery", "jqueryui", "datefr" ], function(){
            
/*-- Début code du test --*/
            
$( function(){
    
    
    
});
 
/*-- Fin code du test --*/
 
        });
    </script>
</head>
<body>
    <header>
        <h1>Page de test, nouvelle version</h1>
        <h2>Le 2014-08-24, la version 2.0 n'est utilisable que sur Chrome 36 et plus.</h2>
    </header>
    <section class="conteneur">
        <article>
 
<!-- Début code du test -->
 
<p>Hello!</p>
 
<!-- Fin code du test -->
 
        </article>
        <article>
 
            <!-- Exemple : composant web "clock-face" -->
            <clock-face style="height: 200px; width: 200px;"></clock-face>
 
        </article>
    </section>
    <footer>
        <!-- 
            Qunit ne fonctionne pas dans le "#shadow-root" d'un composant web.
            Les divisions "qunit" et "qunit-fixture" doivent être ici.
        -->
        <article class="qunit">
            <div id="qunit"></div>
            <div id="qunit-fixture"></div>
        </article>
        <article class="h-entry">
            <!-- 
                Ne pas oublier la mise à jour de "dt-published" pour la version finale.
                Une version en débogage affichera automatiquement la date du jour.
            -->
            <time class="dt-published" datetime="2014-01-22T10:36:43.443+0100">2014-01-22T10:36:43.443+0100</time>
            <a class="p-author h-card" href="http://www.developpez.net/forums/u285162/danielhagnoul/">Daniel Hagnoul</a>
            <a class="u-url" href="http://danielhagnoul.developpez.com/">Mon cahier d’exercices</a>
            <a class="u-url" href="http://javascript.developpez.com/faq/jquery/">FAQ</a>
            <a class="u-url" href="http://javascript.developpez.com/cours/?page=frameworks#jquery">Tutoriels</a> 
        </article>
    </footer>
</body>
</html>