.
authorKim Nguyễn <kn@lri.fr>
Tue, 14 Oct 2014 10:54:12 +0000 (12:54 +0200)
committerKim Nguyễn <kn@lri.fr>
Tue, 14 Oct 2014 10:54:12 +0000 (12:54 +0200)
fds/fds.xhtml
unix_prog_web/unix_prog_web_06.xhtml

index d8e5182..cc83fe7 100644 (file)
@@ -47,9 +47,9 @@
 
     <div class="sws-slide">
       <h1> Comment fonctionne un ordinateur ? </h1>
-      <div style="text-align:center;vertical-align:center">
-      <img id="id_eniac" style="width:75%"
-      src="http://www.fi.edu/learn/case-files/eckertmauchly/ENIAC_Image_2.jpg"
+      <div style="text-align:left;vertical-align:center">
+      <img id="id_eniac" style="margin-left:10pt;width:70%"
+      src="http://upload.wikimedia.org/wikipedia/commons/4/4e/Eniac.jpg"
       />
       </div>
     </div>
     </div>
     <div class="sws-slide">
       <h1> Compter avec des 0 et des 1 ? </h1>
-      <iframe class="sws-onframe-0_1" src="cartes.html"
+      <iframe class="sws-onframe-0_1" src="anim/cartes.html"
       style="padding-left:5%;width:90%; height:50vh;border-width:0;"  />
       <p class="sws-onframe-1" >
         On groupe les <i>bits</i> par paquets de 8 qu'on appelle des <em>octets</em>!
     </div>
     <div class="sws-slide">
       <h1> Dessiner avec des 0 et des 1 ? </h1>
-      <iframe class="sws-onframe-0_1" src="dessin.html"
+      <iframe class="sws-onframe-0_1" src="anim/dessin.html"
       style="padding-left:5%;width:90%; height:75vh;border-width:0;"  />
     </div>
   </body>
index 892c59a..ecdcfdc 100644 (file)
@@ -14,6 +14,8 @@
     <!-- Load jQuery -->
     <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
     <!-- Load the library -->
+    <script src="../libs/raphael-min.js" type="text/javascript" ></script>
+
     <script src="../simpleWebSlides.js" type="text/javascript" ></script>
 
     <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css"  media="all" />
     </script>
   </head>
   <body>
-    <a href="prog_internet_05.xhtml" class="sws-previous"/>
+    <a href="unix_prog_web_05.xhtml" class="sws-previous"/>
 
     <div class="sws-slide sws-cover sws-option-nofooter">
-      <h1>Programmation Internet</h1>
+      <h1>Unix et Programmation Web</h1>
       <h1>Cours 6</h1>
       <a href="mailto:kn@lri.fr">kn@lri.fr</a><br/>
       <a href="http://www.lri.fr/~kn/">http://www.lri.fr/~kn</a>
@@ -83,6 +85,8 @@
         <li> <em>Intégration avec HTML</em> : PHP supporte
         des <em><i>templates</i></em> (modèles/patrons) HTML contenant
         du PHP</li>
+       <li> <em>Expose des Web simplement</em> (ports, URL, requêtes
+       HTTP, …)</li>
       </ul>
       <p>Exemple: fichier <tt>heure.php</tt> : </p><code><![CDATA[      <html>
         <head><title>Heure</title></head>
         <li>autre chose</li>
       </ul>
     </div>
+    <div class="sws-slide">
+      <h1>Un mot sur les langages de programmation (subjectif)</h1>
+      <ol>
+       <li> Il n'y a pas d'excellent langage de programmation. Par
+       contre il y a d'excellents programmeurs</li>
+       <li> Connaître plusieurs langages aide à devenir un bon
+         programmeur (en particulier plusieurs paradigmes différents :
+         impératifs, objet, fonctionnel, logique, déclaratif, …).
+       </li>
+       <li> On ne peut pas vraiment se faire plaisir en informatique
+         en étant un mauvais programmeur</li>
+       <li>Il y a de très mauvais langages, le plus mauvais étant
+         PHP</li>
+      </ol>
+    </div>
+
+
     <h1>Types de base et expressions simples</h1>
     <div class="sws-slide">
       <h1>Entiers (<tt>integer</tt>)</h1>
@@ -505,6 +526,183 @@ données du formulaires sont envoyées au serveur. Exemple, fichier
      </html>
       ]]></code>
 </div>
+
+
+    <h1>Définitions de fonctions</h1>
+
+    <div class="sws-slide">
+      <h1>Fonctions</h1>
+      <p>Les fonctions sont déclarées à l'aide du
+      mot-clé <tt><em>function</em></tt>. On renvoie des résultats à
+      l'aide du mot-clé  <tt><em>return</em></tt>.</p>
+        <code><![CDATA[
+   <?php
+    ]]><em>function</em> double ($x)
+      <em>{</em>
+         <em>return</em> $x + $x;
+      <em>}</em>
+
+      echo double(10);
+  <![CDATA[?>]]>
+        </code>
+    </div>
+
+
+    <div class="sws-slide">
+      <h1>Portée des variables locales et globales
+        <b style="color:red">&#9888;</b>
+      </h1>
+      <div id="cont2" style="width:100%;position:relative;"
+           onresize="draw_arrows();" >
+        <div id="left2" style="display:inline-block;width:50%; position:relative;
+                               box-sizing:border-box;
+                               padding: 0 1em 0 2em;
+                               border-style:dashed;
+                               border-width: 0 1pt 0 0;
+                               border-color:gray; float:left;">
+<code>  &lt;?php
+  <em style="color:red">$a</em> = 42;
+  function add_a($x)
+  {
+        <span id="leftend" />
+    return $x + <em style="color:red">$a</em>;<span id="leftstart" />
+  }
+  echo add_a(10);
+  ?&gt;
+</code>
+        </div>
+        <div id="right2" style="display:inline-block;
+                                width:50%; position:relative;
+                                box-sizing:border-box;
+                                padding: 0 2em 0 1em;
+                                vertical-align:text-top;
+                                ">
+<code >  &lt;?php
+  <em>$a</em> = 42;<span id="rightend"/>
+  function add_a($x)
+  {
+    <em>global $a</em>;<span id="rightmid"/>
+    return $x + <em>$a</em>;<span id="rightstart"/>
+  }
+  echo add_a(10);
+  ?&gt;
+</code>
+        </div>
+      </div>
+
+      <script type="text/javascript">
+
+        function overlay(id) {
+        var w = $("#" + id)[0].offsetWidth;
+        var h = $("#" + id)[0].offsetHeight;
+        $("#svg_"+id).remove();
+        var paper = Raphael(id, w, h);
+        paper.canvas.id = "svg_" + id;
+        return paper;
+        };
+
+        function curve_to(paper, start, end, style) {
+        var x1 = $(start)[0].offsetLeft;
+        var y1 = $(start)[0].offsetTop;
+        var x2 = $(end)[0].offsetLeft;
+        var y2 = $(end)[0].offsetTop;
+
+        var path_cmd =
+        "M" + x1 + " " + y1 + " S" + x1 + " " + y2 + " " + x2 + " " +   y2;
+        var p1 = paper.path(path_cmd);
+        p1.attr(style);
+
+        };
+
+        function draw_arrows(x) {
+
+        var paper = overlay("left2");
+        $("#svg_left2").css ( { 'z-index': '2', 'top':'0', 'left':'0', 'position':'absolute' } );
+
+        curve_to (paper, "#leftstart", "#leftend", { 'stroke': "red",
+        'stroke-dasharray' : "-",
+        'stroke-width': 2,
+        'arrow-end' : "block-wide-long" });
+
+        var paper = overlay("right2");
+        $("#svg_right2").css({ 'z-index': '2', 'top':'0', 'right':'0', 'position':'absolute' });
+
+        curve_to (paper, "#rightstart", "#rightmid", { 'stroke': "green",
+        'stroke-width': 2,
+        'arrow-end' : "block-wide-long" });
+        curve_to (paper, "#rightmid", "#rightend", { 'stroke': "green",
+        'stroke-width': 2,
+        'arrow-end' : "block-wide-long" });
+        };
+        SWS.Presentation.registerCallback(0, draw_arrows);
+      </script>
+      <p>Le code de gauche <em style="color:red">affiche 10</em> !
+      Les variables ont une portée <em style="color:red">locale</em>
+      par défaut. Si <tt>$a</tt> n'est pas définie dans le corps de la
+      fonction, sa valeur est <tt style="color:red">NULL</tt>
+      (variable non définie). <span >Pour référencer
+      des variables globales, on utilise le mot clé <tt><em>global</em></tt>.</span>
+      </p>
+    </div>
+    <div class="sws-slide">
+      <h1>Fonction : définition <b style="color:red">&#9888;</b></h1>
+      <p>On peut utiliser une fonction <s>« avant »</s> de la définir :</p>
+      <code>   &lt;?php
+        echo next(10);
+        echo &lt;br/&gt;;
+
+        function next($x)
+        {
+          return $x + 1;
+        }
+   ?&gt;</code>
+      <p>On définira <em>toujours</em> des fonctions <em>avant</em> de
+      les utiliser. On ne peut pas définir deux fonctions avec le même
+      nom.
+      </p>
+    </div>
+    <div class="sws-slide">
+      <h1>Fonctions : passage par référence</h1>
+      <div style="position:relative;margin-top:20pt;">
+        <div style="margin-left:20pt;display:inline-block;vertical-align:top;float:left;">
+            <code>&lt;?php
+  function add_a($tab)
+  {
+    $tab["a"] = 42;
+  }
+
+  $mytab = array();
+  add_a($mytab);
+  echo $mytab["a"];
+  //<s>n'affiche rien (car NULL ⇝ "")</s>
+?&gt;</code>
+        </div>
+        <div style="margin-left:20pt;display:inline-block;vertical-align:top;">
+          <code>&lt;?php
+  function add_a(<em>&amp;</em>$tab)
+  {
+    $tab["a"] = 42;
+  }
+
+  $mytab = array();
+  add_a($mytab);
+  echo $mytab["a"];
+  //<em>affiche 42</em>
+?&gt;</code>
+        </div>
+
+      </div>
+      <br/>
+      <p style="position:relative">On utiliser le modificateur <tt><em>&amp;</em></tt> devant
+      un paramètre de fonction pour indiquer que ce dernier est passé
+      par référence.</p>
+
+      <p style="position:relative">Lorsque l'on veut <em>modifier</em> un argument de la
+      fonction (plutot que de renvoyer une version modifiée, par
+      ex. mise à jour d'un tableau, d'une chaîne, …), on doit le
+      passer  par référence.
+      </p>
+    </div>
   </body>
 
 </html>