JS Bin
http://daneden.github.io/animate.css/
Environnement
Environnement
Navigateurs
Mozilla
Chrome
Internet Explorer
Opera
|
Les navigateurs WEB nous sont aujourd’hui familiers.
Découvrons ensemble des fonctionnalités moins connues et apprenons à maîtriser leurs boîtes à outils de développement.
les Navigateurs
|
++
|
La miage d'Evry était présente à la conférence fossa. Une matinée était consacrée à l'enseignement du libre. Evry est Mondialement reconnue comme leader de l'enseignement des technologie de pointe. Malgré notre partenariat priviégié avec Mozilla, nous allons nous focaliser sur le navigateur Chrome.
Personnaliser et ContrôlerLa barre d’adresse
Lancez le navigateur Chrome. Dans la barre d’adresse tapez successivement
 
Il est inutile de connaitre ces codes, nous disposons d’un icône en haut à droite pour Personnaliser et Contrôler Chrome.
Cliquer sur l’icône et aller dans Paramêtres. Nous obtenons les mêmes résultats que la commande chrome://settings/.
L’aide
Avez vous lu la remarque en bas de page de l’aide “Vous utilisez un appareil Google Chrome au travail ou dans un établissement scolaire ? Votre administrateur réseau a peut-être configuré vos paramètres de page d'accueil à votre place. Si tel est le cas, vous ne pourrez pas les modifier à cet endroit. En savoir plus sur l'utilisation d'un appareil Chrome géré.”
Option avancée
Rechercher comment prendre en compte un proxy.
 Les extensions
Les extensions permettent d'ajouter de nouvelles fonctionnalités à un navigateur.
Tapez dans la barre d’adresse chrome://extensions/ ou rechercher dans extensions.
Prenez le controle de Youtube en installant http://www.tubeenhancer.com/
 Mot de passe
Pour eviter la saisie sistématique d’un mot de passe, les navigateurs proposent de les mémoriser.
Il est important de pouvoir effacer un mot de passe associé à un site.
Lancez le navigateur Chrome. Dans la barre d’adresse tapez successivement
 |
|
++
++
++ dev phone | Outils de développement
Tous les navigateurs possédent aujourd’hui de formidables outils de dévellopement.
Modification du DOM
A l’aide de code écrit en JavaScript on peut facilement modifier la structure d’une page WEB.
Nous allons nous amuser à remplacer le logo de google par notre photo !
Dans la nouvelle fenêtre recherchez l’onglet console
Dans la console tapez le code suivant :
Ce code est écrit en Javascript, sa fonctionnalité peut se résumer ainsi
Etude du réseau
Tapez l’adresse https://www.ibisc.univ-evry.fr/~dupont/. Dans la console, placez vous maintenant sur l’onglet NetWork, actualiser
 la page et observer le temps de chargement des images. Web SQL
On ne sera pas surpris d’apprendre que le navigateur disposent d’une base de données
 Inspection des éléments
Pour la suite nous allons utiliser le navigateur Mozilla.
La maîtrise du code HTML et CSS passe forcement par l’autoapprentissage. L’outil “inspecteur” facilite cette démarche. Cette partie est essentielle à la suite de votre formation.
Inspecter les codes pour
Simuler la position hover
Aller dans la démo sur l’effet hover.
Inspectez la liste et à droite cliquez sur la partie jaune.
Ensuite, cocher hover pour simuler le comportement de la souris sur l’objet.
 Debugger un programmeTravail personnelDernières inovations |
Correction
Divers Code
Site
http://jsbin.com/jeremadiyo/1http://jsbin.com/zevopi/3/edit
exercice 1 1
- "Click sur div=1"
- "Click sur div=1"
version corrigée
var ps = document.getElementsByTagName("div");
for (var i = 0; i < ps.length; i++) {
(function(x){
ps[x].addEventListener("click",
function() {
console.log("Click sur div=" + x);
}, false);
})(i);
}
exercice 1 2
object Window
exercice 1 3
"Nb de clics : NaN"
version corrigée
CompteurDeClics = function(id) {
this.unElementHTML = document.getElementById(id);
this.nb = 0;// Le nombre de clics
var current = this;// Stocker en variable locale l'objet courant
this.unElementHTML.onclick = function() {
current.nb++;// Utiliser cette variable
console.log("Nb de clics sur le textarea : " + current.nb);
}
}
new CompteurDeClics("button");
exercice 1 4
- "cliq"
- "cliq"
- "cliq"
Il ne se passe rien, le paramêtre couleur est l’evenement
correction
myelement.onclick=(function (couleur) {
return function () {
console.log('cliq');
this.style.color=couleur;
};
}(couleur));
Menu (JS)
var sousMenus = document.getElementsByClassName("ssmenu");
for (i=0;i<sousMenus.length;i++){
sousMenus[i].style.display="none";
sousMenus[i].parentElement.addEventListener("mouseover",
function(){this.firstElementChild.style.display="block";},false);
sousMenus[i].parentElement.addEventListener("mouseout",
function(){this.firstElementChild.style.display="none";},false);
}
et autre version avec toggle voir cours !
var sousMenus = document.querySelectorAll("li ul");
for (i=0;i<sousMenus.length;i++){
sousMenus[i].classList.add('invisible');
sousMenus[i].parentElement
.addEventListener("click",
function(){this.firstElementChild
.classList
.toggle('invisible')},false);
}
Problème III
function cal(current) {
var val = parseInt(current.value);
if (val){
var subtotal = val * priceData[current.name];
var next=current.nextElementSibling;
var soustot=next.children;
soustot[0].innerHTML=subtotal;
}
else{
current.style.background="#f58809";
}
}
--- bonus
function calculateTotal() {
var total = 0;
var ssTot = document.querySelectorAll("span.subtotal span:not(#total)");
for (var i=0; i<ssTot.length;i++){
total +=parseInt(ssTot[i].textContent);
}
document.getElementById('total').innerHTML="$"+total;
}
/* en jquery
$('span.subtotal span').not('#total').each(function(index, elem) {
total += Number($(elem).text());
})
$('#total').text("$" + total);
$(document).ready(function() {
//$('.latent').show();
$('input').bind("change keyup", function() {
//reste à faire
$(this).siblings("span").children("span").text(subtotal)
calculateTotal();
})
})
function calculateTotal() {
var total = 0;
$('span.subtotal span').not('#total').each(function(index, elem) {
total += Number($(elem).text());
})
$('#total').text("$" + total);
}
*/
function mettreAuPluriel(singulier) {
return singulier + "s";
}
var singuliers = ["pied", "main", "tête"];
var pluriels = singuliers.map(mettreAuPluriel);
// pluriels vaut ["pieds", "mains", "têtes"]
// singuliers ne change pas
Activer et tester ECMAScript 6
Pour tester les nouvelles fonctionnalités de ECMAScript 6, il faut activer une option dans chrome.
- tapez chrome://flags/#enable-javascript-harmony dans la barre d'adresse.
- Redémarrer (ou aller tout en bas)
Tester dans la console.
[1, 2, 3].map(n => n * 2);
> [2,4,6]
Prototype sur les objets du langage
Idée :
Nous pouvons utiliser la propriété prototype pour proposer de nouvelles méthodes sur les objets du langage.Illustration :
String.prototype.repeat = function( num ){
return new Array( num + 1 ).join( this );
}
Exemple :
"-".repeat(100);
Préparation examen 2015
Considérons le code HTML suivant
<body>
<div id="button">cliq</div>
</body>
</html>
Donner et commenter les code suivants :
1- var ps = document.getElementsByTagName("div");
for (var i = 0; i < ps.length; i++) {
ps[i].addEventListener("click",
function() {
console.log("Click sur div=" + i);
}, false);
}
|
2- function afficheThis(){
alert(this);
};
var button = document.getElementById("button");
button.onclick = function() {
afficheThis();
};
|
3- var myelement = document.getElementById("button");
couleur = 'red';
myelement.onclick=function(couleur){
console.log('cliq');
this.style.color=couleur;
}
|
II) soit un tableau var singuliers = ["pied", "main", "tête"];
Ecrire une fonction qui crée un tableau pluriels = ["pieds", "mains", "têtes"]
III)
Donner le code HTML et CSS pour avoir un site avec un entête/piedpage et un bloc contenant un menu et un contenu
entête
| |
menu
|
contenu
|
pied
| |
IV)
var priceData = {
camembert: 18,
tomme: 19,
morbier: 9
}
var nodeListInput = document.getElementsByTagName('input');
for (var i = 0; i < nodeListInput.length; ++i) {
console.log("input =" + i);
var item = nodeListInput[i];
func=(function(x){
return function(){
cal(x);
// calculateTotal();
}
})(item);
item.addEventListener('keyup', func, false);
}
function cal(current) {
A completer
}//permet de calculer chaque sous total
Inscription à :
Articles (Atom)