Cours 10 : Inter-agir
Bootstrap suite
animation suite
Comment hacker du javascript ?
Connaître assez de javascript pour être dangeureux
C’est quoi ? Ou le trouve-t-on ? Essayer dans l’inspecteur
Quel jour fait-il ?
Rendez-vous sur la page de l’artiste Davide Balula et inspecter le code source.
On y trouve une fonction javascript qui affiche le jour d’aujourdhui.
<script>
// La fonction execute ses instruction quand elle est appelée plus bas avec tomorrowIs()
function tomorrowIs() {
// représente une variable (boîte) dans laquelle sont stoquée la liste des jours de la semaine
var weekDays = [
"MONDAY",
"TUESDAY",
"WEDNESDAY",
"THURSDAY",
"FRIDAY",
"SATURDAY",
"SUNDAY",
];
// le numéro du de la semaine
var today = new Date().getDay();
// va rechercher dans la variable weekDays le jour qui correspond à l’index que l’on a stoqué dans la variable today.
document.write(weekDays[today]);
}
</script>
Pour afficher le résultat de cette fonction sur notre paqe html, il nous faut l’appeller.
<p>
Aujourd’hui, c’est
<script>
tomorrowIs();
</script>
</p>
Exercice: Remplacer les jours de la semaine par des vers de poésies (à défaut, quelques unes du http://www.pipotron.free.fr)
Les cent mille milliards de poèmes (Raymond Queneau)
Nous pouvons reprendre le même code et changer la méthode de sélection en applicant un nombre aléatoire:
<script>
// La fonction execute ses instruction quand elle est appelée plus bas avec tomorrowIs()
function randomPoems() {
// représente une variable (boîte) dans laquelle sont stoquée la liste des jours de la semaine
var poems = [
"En ce qui concerne la restriction que nous constatons, il serait bon de favoriser la globalité des ouvertures possibles, avec beaucoup de recul.",
"Compte tenu de la baisse de confiance observée, on ne peut se passer d'examiner l'ensemble des améliorations réalisables, depuis longtemps.",
"En ce qui concerne la dualité de la situation que nous constatons, il est nécessaire de considérer la totalité des options opportunes, pour longtemps.",
"Nonobstant cette inflexion intrinsèque, il ne faut pas s'interdire de caractériser systématiquement les actions de bon sens, de toute urgence.",
"Malgré la situation de ces derniers temps, je suggère fortement d'uniformiser l'ensemble des modalités opportunes, parce que les mêmes causes produisent les mêmes effets.",
"Quelle que soit complexité de ces derniers temps, il est préférable d'inventorier les principales modalités optimales, même si nous devons en tirer des conséquences.",
"Où que nous mène l'austérité intrinsèque, il est nécessaire de façonner les relations des améliorations envisageables, à l'avenir.",
];
// le numéro du de la semaine
var random = Math.floor(Math.random() * poems.length);
// va rechercher dans la variable weekDays le jour qui correspond à l’index que l’on a stoqué dans la variable today.
document.write(poems[random]);
}
</script>
Nous avons donc maintenant un générateur de poéme aléatoire mais cela ne reste qu’une phrase à la fois. Pour avoir plusieurs générateurs sur la même page, il nous suffira de dupliquer le code situé dans les script tag et de changer le nom des foncions
Un example à 2 fonctions de 2 vers ressemblera à ceci:
<script>
function randomPoems1() {
var poems = [
"En ce qui concerne la restriction que nous constatons, il serait bon de favoriser la globalité des ouvertures possibles, avec beaucoup de recul.",
"Compte tenu de la baisse de confiance observée, on ne peut se passer d'examiner l'ensemble des améliorations réalisables, depuis longtemps.",
];
var random = Math.floor(Math.random() * poems.length);
document.write(poems[random]);
}
function randomPoems2() {
var poems = [
"Nonobstant cette inflexion intrinsèque, il ne faut pas s'interdire de caractériser systématiquement les actions de bon sens, de toute urgence.",
"Malgré la situation de ces derniers temps, je suggère fortement d'uniformiser l'ensemble des modalités opportunes, parce que les mêmes causes produisent les mêmes effets.",
];
var random = Math.floor(Math.random() * poems.length);
document.write(poems[random]);
}
</script>
<p>
<script>
randomPoems1();
</script>
</p>
<p>
<script>
randomPoems2();
</script>
</p>
Alterner des classes sur plusieurs balises
Cliquez sur le paragraphe
;- Recup js from http://davide.balula.free.fr/