TD: mai 2015

Vous disposez des outils pour simuler l'orientation d'un téléphone dans Chrome !

test :

JS Bin

Besoin d'un script dans jsbin

Créer un bin sans HTML et noter son adresse :

JS Bin

Créer un second bin et créer simplement un lien sur ce fichier !
<script src="http://output.jsbin.com/diyore.js"></script>

JS Bin

L'utilisation de Jquery pour AJAX facilite l'écriture des programme

$.ajax({
type: "GET",
url: "http://jsbin.com/juxilu/1.js",
dataType: "json",
success: function(videos) {

for (var i = 0; i < videos.length; i++) {
addVideoElement(videos[i]);
}
})

Exemple
JS Bin Exemple

JS Bin

Jsbin : AJAX

Comment faire de l'AJAX avec jsbin ?

Exemple construction de fichier AJAX

JS Bin
Ne rien mettre dans le html

Construction de votre test

JS Bin

youtube : objet static

var youtube = {
    
    /**
     * Expects an argument that is either a youtube URL or a ID,
     * and returns back the ID.
     */
    getIdFromUrl: function(videoIdOrUrl) {
        if (videoIdOrUrl.indexOf('http') === 0) {
            return videoIdOrUrl.split('v=')[1];
        } else {
            return videoIdOrUrl;
        }
    },
    
    /**
     * Expects an argument that is either a youtube URL or a ID,
     * and returns back the URL of the thumbnail for that video.
     */
    generateThumbnailUrl: function(videoIdOrUrl) {
        return 'http://i3.ytimg.com/vi/' + youtube.getIdFromUrl(videoIdOrUrl) + '/default.jpg';
    },

    /**
     * Expects an argument that is either a youtube URL or a ID,
     * and returns back the URL for that video.
     */
    generateWatchUrl: function(videoIdOrUrl) {
        return 'https://www.youtube.com/watch?v=' + youtube.getIdFromUrl(videoIdOrUrl);
    },
    
    /**
     * Expects an argument that is either a youtube URL or a ID,
     * and returns back the embed URL for that video.
     */
    generateEmbedUrl: function(videoIdOrUrl) {
        return 'http://www.youtube.com/embed/' + youtube.getIdFromUrl(videoIdOrUrl);
    }

}

lien

Correction examen 2015

Remarque : il s’agissait uniquement de ne pas écrire la propriété position : absolute.
cours https://jsbin.com/tisana/1/edit?html,css,output

les sous listes apparaissent en dessous en décalant le menu vers le bas et non sur le côté sans décalage.

selecteur
p + p + p https://output.jsbin.com/tisana/2/

p[2] et p:nth-of-type(-n+2) https://output.jsbin.com/tisana/3/

p:nth-child(2) https://output.jsbin.com/tisana/4/

Création page

L'utilisation de flex est obligatoire.
https://output.jsbin.com/gikado/4/
https://output.jsbin.com/gikado/5/
https://output.jsbin.com/gikado/7/
https://output.jsbin.com/gikado/8
Menu
code en action

Test simple : assert

Mise en place d'une fonction de test simple : assert

function assert(test, message) {
if (!test) {
throw "ERROR: " + message;
}
return true;
}

Exemples

Objet static

JS Bin

Constructeur

JS Bin

cssText : facile

Vous avez un grand nombre de propriétés CSS à écrire, outre le fait que vous pouvez associer une classe, utiliser cssText.

Intégrer du HTML dans une page


Source HTML

<body>
 <section data-html="welcome.html"></section>

...

</body>


Source welcome.html

<h2>Welcome!</h2>


<h3> my name is Denis </h2>

code JS

(function () {
    var queryHtml = function () {
        var sections = document.querySelectorAll('[data-html]'),
            section, j, jlen;

        for (j = 0, jlen = sections.length; j < jlen; j++) {
            section = sections[j];

            if (section.dataset.html) {


                var xhr = new XMLHttpRequest(),
                    url = section.dataset.html,
                    cb = function () {
                        if (xhr.readyState === 4) {
                            if (
                                (xhr.status >= 200 && xhr.status < 300) ||
                                xhr.status === 0
                                ) {
                                section.innerHTML = xhr.responseText;
                            } else {
                                section.outerHTML = '

ERROR: The attempt to fetch ' + url + ' failed with the HTTP status ' + xhr.status + '. Check your browser\'s JavaScript console for more details.
';
                            }
                        }
                    };

                xhr.onreadystatechange = cb;

                xhr.open('GET', url, false);
                try {
                    xhr.send();
                } catch (e) {
                    alert('Failed to get file' + url + '.' + e);
                }
            }
        }
    };

    queryHtml();
})();

Exemple :

http://gdichicago.com/classes/js205/slideshow/#/

Gérer la taille d'un fond

http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover

Exemple :

JS Bin

Numéroter des sections

HTML

	<article>
	<section> ... </section> <section> ... </section>
	...
	</article>

	CSS

	article{
	counter-reset: sections;
	}

	section{
	counter-increment: sections;
	}

	section:before{
	content: ' Section ' counter(sections) ' - ';
	} code

Fuite mémoire ?

https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript#Memory_leaks

Expression régulière : la force est avec vous !

Objectif

Vous connaissez les expressions régulières : elles sont utilisées dans de très nombreux langages de programmation. Elles permettent de vérifier la saisie d'un utilisateur (email, nom, date ... ).

Voici un exemple concret d'utilisation des expressions régulières. Nous recherchons des mots réservés d'un langage pour en permettre une meilleurs lectures.

Exemple d'utilisation

Revenons sur l'expression : match = keywords.exec(text) utilisée dans l'exemple.

match = keywords.exec(text)

var keywords = /(ch)/g; // on recherche "ch" dans le text

var text = "je recherche les prochaines occurrences"; // le texte à vérifier

console.log("========== 1 ==========");

var match = keywords.exec(text);

console.log(" match = " + match); // l'expression trouvée

console.log(" match.index = " + match.index); // la position de la première

console.log(" keywords.lastIndex =" + keywords.lastIndex);

console.log("========== 2 ==========");

match = keywords.exec(text);

console.log(" match = " + match); // l'expression trouvée

console.log(" match.index = " + match.index); // la position de la deuxième

console.log(" keywords.lastIndex =" + keywords.lastIndex);

console.log("========== 3 ==========");

match = keywords.exec(text);

console.log(" match = " + match);

console.log(" match.index = " + match.index);

console.log(" keywords.lastIndex =" + keywords.lastIndex);

console.log("========== 4 ==========");

match = keywords.exec(text);

console.log(" match = " + match);

console.log(" match.index = " + match.index);

console.log(" keywords.lastIndex =" + keywords.lastIndex);

Fichier test : https://output.jsbin.com/beqebi/2/

Utilisation classique dans le DOM

D'après le code précédent, l'écriture d'une simple boucle permettra de rechercher et traiter toutes les occurrences.

Fichier test : https://output.jsbin.com/duveqi/1/

TD

Pages

tout en un : JS

Closure : one more time

le boss !

test : portable

Cour

Besoin d'un script dans jsbin

AJAX : Jquery

Jsbin : AJAX

Exemple construction de fichier AJAX

Construction de votre test

youtube : objet static

Correction examen 2015

Création page

Test simple : assert

Exemples

cssText : facile

Intégrer du HTML dans une page

Source HTML

Source welcome.html

code JS

Gérer la taille d'un fond

Exemple :

Numéroter des sections

HTML

CSS

code

Fuite mémoire ?

Expression régulière : la force est avec vous !

Objectif

match = keywords.exec(text)

Utilisation classique dans le DOM