Différences entre versions de « 2018-065 »

De Mi caja de notas
 
(29 versions intermédiaires par le même utilisateur non affichées)
Ligne 5 : Ligne 5 :
  
 
== Mobilités ==
 
== Mobilités ==
−
 
  
 
> Les vélos en libre service, qui sont là pour longtemps, nous donnent une belle occasion de repenser la mobilité et l’espace public. A condition de ne pas se crisper, de ne pas renoncer (à réguler), et de faire preuve d’imagination. - [https://medium.com/@vvraiment/bye-bye-gobee-et-merci-1f144c0555fc Bye Bye Gobee, et merci] - 2018-03-02
 
> Les vélos en libre service, qui sont là pour longtemps, nous donnent une belle occasion de repenser la mobilité et l’espace public. A condition de ne pas se crisper, de ne pas renoncer (à réguler), et de faire preuve d’imagination. - [https://medium.com/@vvraiment/bye-bye-gobee-et-merci-1f144c0555fc Bye Bye Gobee, et merci] - 2018-03-02
−
 
  
  
Ligne 18 : Ligne 16 :
  
 
[https://ploum.net/comment-facebook-gagne-de-largent/ Comment FB gagne de l'argent] - Ploum - 2018-02-28
 
[https://ploum.net/comment-facebook-gagne-de-largent/ Comment FB gagne de l'argent] - Ploum - 2018-02-28
 +
 +
 +
== Culture Code : Bug et histoire du Debugging ==
 +
 +
http://theinstitute.ieee.org/tech-history/technology-history/did-you-know-edison-coined-the-term-bug
  
 
== Révision [[JavaScript]] ==
 
== Révision [[JavaScript]] ==
Ligne 33 : Ligne 36 :
  
 
=== exemple 1 ===
 
=== exemple 1 ===
−
 
+
<!--
 
<html>
 
<html>
 
<h2 id="test">testeur</h2>
 
<h2 id="test">testeur</h2>
Ligne 46 : Ligne 49 :
 
<p>Pour un test, que se passe-t-il si je retire la balise script au-dessus ? Et si j'ai deux éléments avec id = "test"</p>
 
<p>Pour un test, que se passe-t-il si je retire la balise script au-dessus ? Et si j'ai deux éléments avec id = "test"</p>
 
</html>
 
</html>
−
 
+
-->
 
=== variables ===
 
=== variables ===
  
 
cf https://codepen.io/ColleenEMc/pen/zvpxGE
 
cf https://codepen.io/ColleenEMc/pen/zvpxGE
−
 
+
<!--
 
<html>
 
<html>
 
<script>
 
<script>
Ligne 66 : Ligne 69 :
 
</html>
 
</html>
  
 +
-->
  
 +
=== types de data ===
 +
==== Nombre ====
 +
valeurs numériques avec ou sans décimales
  
−
=== types de data ===
 
−
* Nombre : valeurs numériques avec ou sans décimales
 
 
> var pi = 3.1416
 
> var pi = 3.1416
  
 
var width = window.innerWidth;
 
var width = window.innerWidth;
 +
 +
 +
<html>
 +
<script>
 +
var largeur = window.innerWidth;
 +
alert("la largeur de cette fenêtre est de "+ largeur + " pixels")
 +
</script>
 +
</html>
 +
 +
 +
==== Chaîne ====
 +
 +
Une chaîne est une collection de caractères (lettres, nombres, ponctuation, ...)
 +
 +
Pour créer une chaîne, placer la valeur entre guillemets "..."
 +
 +
    var location = window.location;
 +
    var name = "xtof";
 +
<!--
 +
<html>
 +
<script>
 +
var location = window.location;
 +
alert("l'URL est " + location);
 +
var name = "xtof";
 +
</script>
 +
</html>
 +
-->
 +
 +
==== Booléen ====
 +
En programmation, une valeur booléenne est une valeur qui est soit vraie ou fausse
 +
 +
 +
    var status=false;
 +
    var windowStatus=window.closed;
  
 
<html>
 
<html>
 
<script>
 
<script>
−
var width = window.innerWidth;
+
var status=false;
 +
var windowStatus=window.closed;
 +
document.write(windowStatus);
 +
</script>
 +
</html>
 +
 
 +
==== Objet ====
 +
 
 +
Parfois les variables sont plus complexes :
 +
 
 +
* Un noeud dans le DOM est un bon exemple
 +
 
 +
 
 +
    var topic = document.getElementById('monID');
 +
 
 +
* Les noeuds sont plus qu'une valeur unique, ils ont des attributs.
 +
 
 +
==== Array (liste) ====
 +
 
 +
Comment une fonction peut renvoyer plus d'une valeur ?
 +
 
 +
 
 +
   
 +
    var liens = document.getElementsByTagName('a');
 +
 
 +
 
 +
 
 +
<html>
 +
<script>
 +
var liens=document.getElementsByTagName('a');
 +
document.write(liens[0]);
 
</script>
 
</script>
 
</html>
 
</html>
 +
 +
 +
=== Opérateurs et Expressions ===
 +
 +
slides : [[:File:01.06.JS_OperatorsandExpressions.pdf]]
 +
 +
    ++
 +
    --
 +
    +=
 +
 +
 +
===  Fonctions ===
 +
 +
Code semaine 2 : https://codepen.io/collection/Adbwgo/#
 +
 +
Les petits morceaux de code qu'on peut réutiliser... Syntaxe spéciale pour la déclaration :
 +
 +
 +
    function nomFonction(params){
 +
          code à faire tourner
 +
    }
 +
 +
    function messageAccueil(msg){
 +
          alert(msg);
 +
    }
 +
 +
 +
Appel de fonction :
 +
- déclarer une fonction ne produit en fait rien
 +
- besoin d'appeler la fonction
 +
- appeler une fonction change le flow du programme
 +
 +
 +
    var x = "bonjour";
 +
    messageAccueil(x);
 +
    x = "Au revoir";
 +
    messageAccueil(x);
 +
 +
 +
 +
    function messageAccueil(msg) {
 +
          alert(msg);
 +
    }
 +
 +
 +
=== Placement du code ===
 +
 +
 +
- body
 +
- head
 +
- Fichier externe
 +
 +
cf Slides [[:File:02.02.JS_CodePlacement.pdf]]
 +
 +
Lorsque vous écrivez du code, il est important d'adopter les bonnes habitudes d'organisation de votre code. Bien qu'il n'y ait pas de règles spécifiques sur comment et où placer votre code, il y a certainement des conventions. (Les conventions sont des suggestions que la plupart des programmeurs suivent, de cette façon les autres programmeurs peuvent rapidement et facilement comprendre leur code.)
 +
 +
L'organisation la plus commune est d'avoir un dossier principal avec vos fichiers html. Il existe également trois sous-dossiers (dossiers dans le dossier principal) pour vos fichiers CSS, image et JavaScript.
 +
 +
![Organisation du Code](https://d3c33hcgiwev3.cloudfront.net/imageAssetProxy.v1/ZcYNfJ1UEeWtOgrji8llcw_c7b2bac3ae7ffd2f40e9f4f799bad120_folderStructure.png?expiry=1520467200000&hmac=DICJNORCHYhqWf6E6D56REQadMtiI2eK9Jgj8E28pl8)
 +
 +
Lorsque nous utilisons CodePen, nous utilisons cette idée de séparer notre code. Cependant, sachez que CodePen n'exige pas beaucoup de choses que vous devriez avoir dans votre code. Par exemple, dans les fichiers HTML, il ignore toutes les informations de la section <head>. Donc, si vous développez dans CodePen, assurez-vous de tester votre code plus tard en utilisant la bonne structure de dossier / fichier. Vous devrez inclure des liens vers les feuilles de style, les images et les fichiers JavaScript externes.
 +
 +
=== Structure du Dossier pour Organiser le Code ===
 +
 +
slides [[:File:02.03.JS_FolderStrucutreOrganizingYourCode.pdf]]
 +
 +
 +
=== Evénements JS  ===
 +
 +
Ajouter de l'interactivité avec JS
 +
 +
- Il nous appartient de décider du moment où les fonctions devraient s'exécuter
 +
- Ce serait mieux si les fonctions étaient appelées sur des "événements" spéciaux
 +
- l'API JavaScript nous permet d'ajouter des appels de fonctions dynamiques
 +
 +
==== événements ====
 +
 +
Tout élément peut réagir à un événement. Il faut ajouter l'événement à la balise et inclure ce que vous voulez qu'il arrive.
 +
 +
; onclick: l'utilisateur clique sur un élément HTML
 +
; onmouseover: l'utilisateur bouge la souris sur un élément HTML
 +
; onresize: la fenêtre du navigateur est retaillée
 +
; onload: le navigateur finit de charger la page
 +
 +
    <div onclick = "message()"> Cliquer sur cette Div invoquera une fonction JavaScript</div>
 +
 +
 +
Utiliser les guillemets
 +
 +
- Vous pouvez utiliser des guillemets simples ou doubles pour le résultat de l'événement.
 +
- Les doubles guillemets facilitent si vous pouvez passer des paramètres de chaîne :
 +
   
 +
    <div onclick = "message('Salut')">
 +
 +
- Soyez prudents au moment de copier et coller les guillemets !
 +
 +
 +
 +
===== plus d'événements  =====
 +
 +
; Souris : onclick, ondblclick, onmousedown, onmouseenter, onmouseleave, on mousemove, onmouseout,....
 +
; Clavier : onkeydown, onkeypress, onkeyup
 +
; Fenêtre : onload, onresize, onscroll, onerror,...
 +
; Liste compréhensible : https://developer.mozilla.org/fr/docs/Web/Events
 +
 +
 +
=== Session de code avec événements  ===
 +
 +
Source : https://www.coursera.org/learn/javascript/lecture/Ch7Pn/code-with-me-events
 +
 +
 +
Modifier le DOM : https://codepen.io/ColleenEMc/pen/vNdXKz
 +
 +
 +
=== this ===
 +
 +
à suivre sur https://www.coursera.org/learn/javascript/lecture/2fCqw/this

Version actuelle datée du 6 mars 2018 à 19:30

Quartidi
4
Frimaire
CCXXXIII

mardi 6 mars 2018

« Il n’y a que deux façons de voir la vie. L’une en faisant comme si rien n’était un miracle. L’autre en faisant comme si tout était un miracle. »

— Albert Einstein


Mobilités

> Les vélos en libre service, qui sont là pour longtemps, nous donnent une belle occasion de repenser la mobilité et l’espace public. A condition de ne pas se crisper, de ne pas renoncer (à réguler), et de faire preuve d’imagination. - Bye Bye Gobee, et merci - 2018-03-02


> Les vélos en libre-service, une double « tragédie des communs » - Lionel Maurel - 2018-03-05


Silo Facebook

Comment FB gagne de l'argent - Ploum - 2018-02-28


Culture Code : Bug et histoire du Debugging

http://theinstitute.ieee.org/tech-history/technology-history/did-you-know-edison-coined-the-term-bug

Révision JavaScript

slides

exemple 1

variables

cf https://codepen.io/ColleenEMc/pen/zvpxGE

types de data

Nombre

valeurs numériques avec ou sans décimales

> var pi = 3.1416

var width = window.innerWidth;



Chaîne

Une chaîne est une collection de caractères (lettres, nombres, ponctuation, ...)

Pour créer une chaîne, placer la valeur entre guillemets "..." 

   var location = window.location;
   var name = "xtof";

Booléen

En programmation, une valeur booléenne est une valeur qui est soit vraie ou fausse 


   var status=false;
   var windowStatus=window.closed;

Objet

Parfois les variables sont plus complexes :

  • Un noeud dans le DOM est un bon exemple


   var topic = document.getElementById('monID');
  • Les noeuds sont plus qu'une valeur unique, ils ont des attributs.

Array (liste)

Comment une fonction peut renvoyer plus d'une valeur ? 


   var liens = document.getElementsByTagName('a');



Opérateurs et Expressions

slides : File:01.06.JS_OperatorsandExpressions.pdf 

   ++
   -- 
   +=


Fonctions

Code semaine 2 : https://codepen.io/collection/Adbwgo/#

Les petits morceaux de code qu'on peut réutiliser... Syntaxe spéciale pour la déclaration : 


   function nomFonction(params){
         code à faire tourner
   }

   function messageAccueil(msg){
         alert(msg);
   }


Appel de fonction : - déclarer une fonction ne produit en fait rien - besoin d'appeler la fonction - appeler une fonction change le flow du programme 


   var x = "bonjour";
   messageAccueil(x);
   x = "Au revoir";
   messageAccueil(x);



   function messageAccueil(msg) {
         alert(msg);
   }


Placement du code

- body - head - Fichier externe

cf Slides File:02.02.JS_CodePlacement.pdf

Lorsque vous écrivez du code, il est important d'adopter les bonnes habitudes d'organisation de votre code. Bien qu'il n'y ait pas de règles spécifiques sur comment et où placer votre code, il y a certainement des conventions. (Les conventions sont des suggestions que la plupart des programmeurs suivent, de cette façon les autres programmeurs peuvent rapidement et facilement comprendre leur code.)

L'organisation la plus commune est d'avoir un dossier principal avec vos fichiers html. Il existe également trois sous-dossiers (dossiers dans le dossier principal) pour vos fichiers CSS, image et JavaScript.

![Organisation du Code](https://d3c33hcgiwev3.cloudfront.net/imageAssetProxy.v1/ZcYNfJ1UEeWtOgrji8llcw_c7b2bac3ae7ffd2f40e9f4f799bad120_folderStructure.png?expiry=1520467200000&hmac=DICJNORCHYhqWf6E6D56REQadMtiI2eK9Jgj8E28pl8)

Lorsque nous utilisons CodePen, nous utilisons cette idée de séparer notre code. Cependant, sachez que CodePen n'exige pas beaucoup de choses que vous devriez avoir dans votre code. Par exemple, dans les fichiers HTML, il ignore toutes les informations de la section <head>. Donc, si vous développez dans CodePen, assurez-vous de tester votre code plus tard en utilisant la bonne structure de dossier / fichier. Vous devrez inclure des liens vers les feuilles de style, les images et les fichiers JavaScript externes.

Structure du Dossier pour Organiser le Code

slides File:02.03.JS_FolderStrucutreOrganizingYourCode.pdf


Evénements JS

Ajouter de l'interactivité avec JS

- Il nous appartient de décider du moment où les fonctions devraient s'exécuter - Ce serait mieux si les fonctions étaient appelées sur des "événements" spéciaux - l'API JavaScript nous permet d'ajouter des appels de fonctions dynamiques

événements

Tout élément peut réagir à un événement. Il faut ajouter l'événement à la balise et inclure ce que vous voulez qu'il arrive.

onclick
l'utilisateur clique sur un élément HTML
onmouseover
l'utilisateur bouge la souris sur un élément HTML
onresize
la fenêtre du navigateur est retaillée
onload
le navigateur finit de charger la page
Cliquer sur cette Div invoquera une fonction JavaScript


Utiliser les guillemets

- Vous pouvez utiliser des guillemets simples ou doubles pour le résultat de l'événement. - Les doubles guillemets facilitent si vous pouvez passer des paramètres de chaîne :

- Soyez prudents au moment de copier et coller les guillemets !


plus d'événements
Souris
onclick, ondblclick, onmousedown, onmouseenter, onmouseleave, on mousemove, onmouseout,....
Clavier
onkeydown, onkeypress, onkeyup
Fenêtre
onload, onresize, onscroll, onerror,...
Liste compréhensible
https://developer.mozilla.org/fr/docs/Web/Events


Session de code avec événements

Source : https://www.coursera.org/learn/javascript/lecture/Ch7Pn/code-with-me-events


Modifier le DOM : https://codepen.io/ColleenEMc/pen/vNdXKz


this

à suivre sur https://www.coursera.org/learn/javascript/lecture/2fCqw/this

Récupérée de « https://ducamp.me/index.php?title=2018-065&oldid=8103 »