correctifs URL

Author: ms-studio

00-javascript.md

@@ -1,11 +1,15 @@
 ---
 layout: page
 title: JavaScript
-permalink: /js/
+permalink: index.html
 ---
 
 **JavaScript** est un langage de programmation...
-* **scripté** (interprété) - pas de compilateur à proprement parler.* **côté client** - s’exécute dans un navigateur en général(il existe des environnements côté serveur : NodeJS).* **asynchrone** - plusieurs « morceaux » peuvent s’exécuter en parallèle.
+
+* **scripté** (interprété) - pas de compilateur à proprement parler.
+* **côté client** - s’exécute dans un navigateur en général
+(il existe des environnements côté serveur : NodeJS).
+* **asynchrone** - plusieurs « morceaux » peuvent s’exécuter en parallèle.
 
 Une meilleure définition: le rôle du JavaScript consiste typiquement à sélectionner des parties d'un document, et à décrire ce qui doit changer quand un certain événement se produit (selon [Paul Robert Lloyd](https://paulrobertlloyd.com/2018/05/javascript)).
 
@@ -19,23 +23,30 @@ Que permet le JavaScript?
 Le JavaScript, s'il a été utilisé initialement pour ajouter de "petites fonctionalités" aux navigateurs, comme p.ex. ouvrir des fenêtres pop-up, est néanmoins un langage de programmation à part entière. 
 
 Dans un navigateur JavaScript, permet :
-* de spécifier des changements sur le document :* sur le contenu, la structure, le style* en interceptant des événements (souris, clavier, doigts...)
+
+* de spécifier des changements sur le document :
+* sur le contenu, la structure, le style
+* en interceptant des événements (souris, clavier, doigts...)
 
 Mais également (API HTML5) :
-* d’échanger avec un serveur (AJAX)* de dessiner (canvas - bitmap - ou svg - vectoriel)* de se géolocaliser* d’enregistrer localement du contenu (cache ou bdd)
-* de jouer des fichiers audio ou video
+
+* d’échanger avec un serveur (AJAX)
+* de dessiner (canvas - bitmap - ou svg - vectoriel)
+* de se géolocaliser
+* d’enregistrer localement du contenu (cache ou bdd)
+* de jouer des fichiers audio ou video
 
 <h3>Des applications en JavaScript</h3>
 
 JavaScript est utilisé par des applications comme [Figma](https://www.figma.com/) (éditeur graphique, dont le code est [écrit en C++](https://medium.com/figma-design/building-a-professional-design-tool-on-the-web-6332ed4f1fcc#.8egblptg3) puis converti en JavaScript), ou pour simuler dans le navigateur des ordinateurs historiques (cf. [Internet Arcade](https://archive.org/details/internetarcade)).
 
 JavaScript permet aussi de construire un éditeur 3D, comme ThreeJS:
 
-![ThreeJS editor](/cours-javascript/img/threejs-editor.jpg)
+![ThreeJS editor](img/threejs-editor.jpg)
 
 Entre ces deux extrêmes, le JavaScript peut être utilisé pour développer des extensions de navigateur - par exemple l'extension Firefox [Add-Art](https://github.com/slambert/Add-Art) qui remplace les bannières publicitaires par des travaux d'artistes - ou pour étendre les fonctionalités de logiciels comme [Adobe InDesign](https://forums.adobe.com/community/indesign/indesign_scripting), [Max](https://docs.cycling74.com/max7/tutorials/javascriptchapter01) ou [Sketch](http://developer.sketchapp.com/introduction/plugin-scripts/). 
 
-![La galaxie javascript, par Olivier Le Goaër](/cours-javascript/img/galaxie-javascript.jpg)
+![La galaxie javascript, par Olivier Le Goaër](img/galaxie-javascript.jpg)
 
 Le standard JavaScript est révisé régulièrement. La 6ème version (ES6 ou ES2015) a été finalisée en juin 2015 et la 7ème (ES7 ou ES2016) en juin 2016. Juriy Zaytev propose un [tableau récapitulatif](http://kangax.github.io/compat-table/) des fonctionnalités supportées par les différentes implémentations et navigateurs.
 
@@ -50,7 +61,7 @@ De nombreux utilitaires ont été construits sur la base du JavaScript:
 - **Ember** est un autre *framework* front-end JavaScript.
 - **React** est encore un *framework* JavaScript front-end, créé par les développeurs de Facebook.
 
-![Frameworks JavaScript](/cours-javascript/img/js-frameworks.jpg)
+![Frameworks JavaScript](img/js-frameworks.jpg)
 
 Une application web contemporaine, au lieu d'utiliser **LAMP** (**L**inux, **A**pache, **M**ySQL, **P**HP), pourrait tourner sur **MEAN**, acronyme pour l'utilisation de **M**ongoDB (base de données), **E**xpress.js, **A**ngular.js, et **N**ode.js - une base logicielle entièrement codée en JavaScript.
 

10-base-js.md

@@ -1,7 +1,7 @@
 ---
 layout: page
 title: Bases JavaScript
-permalink: /js/bases/
+permalink: bases.html
 ---
 
 Quelques bases JavaScript...
@@ -74,7 +74,7 @@ La console est un outil intégré à votre navigateur. Voici comment l'afficher:
 
 Si vous effectuez cela sur Facebook, vous constaterez que cette plateforme n'apprécie pas que ses utilisateurs ouvrent la console développeur:
 
-![Message d’avertissement de Facebook apparaissant dans la console](/cours-javascript/img/fb-console.jpg)
+![Message d’avertissement de Facebook apparaissant dans la console](img/fb-console.jpg)
 
 L'artiste James Bridle a [écrit un article](http://booktwo.org/notebook/welcome-js/) et développé un script  - [welcome.js](https://github.com/stml/welcomejs/) - en résponse à cette pratique.
 

20-manipulation.md

@@ -65,26 +65,40 @@ window.document.write("<b>Bienvenue à l'université de Pau</b>");
 
 DOM: Document Object Model
 
-Représentation d'un document x(ht)ml sous saforme 100% objet
+Représentation d'un document x(ht)ml sous sa
+forme 100% objet
 
-* Les balises sont des noeuds et leurs imbrications forment une arborescence* Cette structure d'arbre est ensuite facile à manipuler
+* Les balises sont des noeuds et leurs imbrications forment une arborescence
+* Cette structure d'arbre est ensuite facile à manipuler
 
 L'arbre DOM est chargé dans le navigateur
 
-* L'arbre est parcouru par le moteur de rendu du navigateur afin de produire l'affichage graphique* Chaque modification ultérieure de cet arbre force le rafraîchissement de l'affichage graphique
+* L'arbre est parcouru par le moteur de rendu du navigateur afin de produire l'affichage graphique
+* Chaque modification ultérieure de cet arbre force le rafraîchissement de l'affichage graphique
 
 Document XHTML : exemple
 
 ```html
 <!DOCTYPE html>
-<html><head>  <title>Bienvenue</title>  <script src="essai.js"></script></head>
-<body>  <p id="intro">    Pour me contacter : <a href="mailto:[email protected]">cliquez ici</a>
-    <ul>      <li>Uniquement en semaine</li>
-    </ul>  </p>  <h1 class="joli1">S'inscrire à la Newsletter</h1>
-  <form>    <input type="text" name="news_email"/>
-  </form></body>
+<html>
+<head>
+  <title>Bienvenue</title>
+  <script src="essai.js"></script>
+</head>
+<body>
+  <p id="intro">
+    Pour me contacter : <a href="mailto:[email protected]">cliquez ici</a>
+    <ul>(img
+      <li>Uniquement en semaine</li>
+    </ul>
+  </p>
+  <h1 class="joli1">S'inscrire à la Newsletter</h1>
+  <form>
+    <input type="text" name="news_email"/>
+  </form>
+</body>
 </html>
-```
+```(img
 
 Arbre du document XHTML:
 
@@ -94,7 +108,15 @@ Arbre du document XHTML:
 
 **Popriétés** | **Commentaires**
 childNodes | nœuds enfants (Array)
-firstChild | premier nœud enfantlastChild | dernier nœud enfantnextSibling | prochain nœud d'un type (nœud de même niveau)parentNode | nœud parentpreviousSibling | nœud précédent d'un type (nœud de même niveau)nodeName | nom du nœudnodeValue | valeur / contenu du nœudnodeType | type du nœudinnerHTML | contenu littéral html du noeud
+firstChild | premier nœud enfant
+lastChild | dernier nœud enfant
+nextSibling | prochain nœud d'un type (nœud de même niveau)
+parentNode | nœud parent
+previousSibling | nœud précédent d'un type (nœud de même niveau)
+nodeName | nom du nœud
+nodeValue | valeur / contenu du nœud
+nodeType | type du nœud
+innerHTML | contenu littéral html du noeud
 
 Navigation dans l'arbre DOM
 
@@ -119,7 +141,8 @@ var result = document.getElementById("intro") ;
 ```  
 
 Par la valeur de **l'attribut class** (si il existe)
-```javascript
+
+```javascript
 var result = document.getElementsByClassName("joli1") ;
 // Renverra 0 ou n résultats
 ```      
@@ -141,7 +164,8 @@ var result = document.getElementsByName("news_email") ;
 ```  
 
 Par **les sélecteurs CSS**  
-```javascript
+
+```javascript
 var result = document.querySelector("p#intro") ;
 // Renverra 0 ou 1 résultat, le premier trouvé
 ```  
@@ -171,26 +195,38 @@ Accès par navigation dans l'arbre DOM:
 
 ```html
 <html>
-  <head>    <title>Bienvenue</title>    <script>
+  <head>
+    <title>Bienvenue</title>
+    <script>
       function changeColor() {
         var htmlTag = document.childNodes[0];
         var bodyTag = htmlTag.lastChild;
         var pTag = bodyTag.firstChild;
         pTag.style.color="#0000FF";
       }
-    </script>  </head>  <body onload="changeColor();">    <p>Lorem Ipsum</p>
-  </body></html>
+    </script>
+  </head>
+  <body onload="changeColor();">
+    <p>Lorem Ipsum</p>
+  </body>
+</html>
 ```
 
 Accès direct, par l'attribut ID('foo'): 
 
 ```html
 <html>
-  <head>    <title>Bienvenue</title>    <script>
+  <head>
+    <title>Bienvenue</title>
+    <script>
       function changeColor() {
         var pTag = document.getElementById('foo');
         pTag.style.color="#0000FF";
-      }    </script>  </head>  <body onload="changeColor();">    <p id="foo">Lorem Ipsum</p>
+      }
+    </script>
+  </head>
+  <body onload="changeColor();">
+    <p id="foo">Lorem Ipsum</p>
   </body>
 </html>
 ```
@@ -199,7 +235,8 @@ Objets HTML
 ===
 
 Après avoir navigué et atteint le nœud de son choix, il faut agir dessus
-Pour cela, il est nécessaire de connaître sa véritable nature (son type)
+
+Pour cela, il est nécessaire de connaître sa véritable nature (son type)
 
 nœud ```<body>``` ? nœud ```<h1>``` ?, nœud ```<img>``` ? Etc.
 

70-visualisation.md

@@ -8,7 +8,7 @@ permalink: /js/visualisation
 
 - [Programming Design Systems](https://programmingdesignsystems.com/), un livre digital gratuit et open-source, en cours d'écriture par [Rune Madsen](https://runemadsen.com/) (enseignant au [ITP à New York University](https://tisch.nyu.edu/about/directory/itp/1490791702)). Les exercices et exemples de code sont en Javascript (et utilisent **P5**, une bibliothèque de dessin vectoriel).
 
-![Travaux d'étudiants de Rune Madsen](/cours-javascript/img/rune-students.jpg)
+![Travaux d'étudiants de Rune Madsen](img/rune-students.jpg)
 
 Bibliothèques de dessin vectoriel et de visualisation:
 
@@ -23,19 +23,19 @@ Bibliothèques de dessin vectoriel et de visualisation:
 - [PixiJS](http://www.pixijs.com/) - "a fast lightweight 2D rendering library" Utilise le language WebGL.
 - [Three.js](https://threejs.org/) - permet la création d'animations 3D dans le navigateur. Utilise le language WebGL.
 
-![Call me Adele - détail](/cours-javascript/img/call-me-adele-alt.jpg)
+![Call me Adele - détail](img/call-me-adele-alt.jpg)
 
 Analyse de données provenant de SMS, dessinant l'évolution d'une relation amoureuse sur quatre années, généré avec Rune.js. [Call me Adele](https://medium.com/@wipaweeeeee/call-me-adele-f37162b6ffe5#.padbmd6fd), Travail de l'artiste Wipawe Sirikolkarn
 
-![Infinitown](/cours-javascript/img/infinitown.jpg)
+![Infinitown](img/infinitown.jpg)
 
 Infinitown, une ville dont le plan infini est généré aléatoirement. Développé avec Three.js, par le studio [Little Workshop](https://www.littleworkshop.fr/projects/infinitown/).
 
-![Runeterra interactive map](/cours-javascript/img/runeterra-interactive-map.jpg)
+![Runeterra interactive map](img/runeterra-interactive-map.jpg)
 
 Carte interactive du monde imaginaire Runeterra (dans l'univers du jeu League of Legends), programmée avec Three.js & React ([source](https://twitter.com/felixturner/status/1021849617896337408)).
 
-![ThreeJS editor](/cours-javascript/img/threejs-editor.jpg)
+![ThreeJS editor](img/threejs-editor.jpg)
 
 Un élément créé dans l'editeur 3D inclus dans Three.js ([source](https://twitter.com/thespite/status/1021855786719498240)).
 

_config.yml

@@ -0,0 +1,4 @@
+remote_theme: coursweb/jk-theme
+title: Newsletters
+description: Support de cours JavaScript.
+lang: fr-FR