Introduction à JavaScript

class: main-title

<h1>Web: Client 2</h1>

<h2>Introduction à JavaScript</h2>

---

<ul>
<li>Introduction à JavaScript</li>
<li>Démonstration</li>
<li>Exercices</li>
</ul>

---
class: section-title

<h1>Introduction à JavaScript</h1>

---

<h1 class="slide-only">Introduction à JavaScript</h1>

<p>Langage de programmation polyvalent</p>

<ul>
<li>Interprété</li>
<li>Dynamique</li>
<li>Faiblement typé</li>
</ul>

<pre><code class="language-javascript">function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}

let text = 'The temperature is ' + toCelsius(77) + ' Celsius';
console.log(text);
</code></pre>

<ul>
<li><a href="https://developer.mozilla.org/bm/docs/Web/JavaScript" target="_blank" rel="noopener noreferrer">MDN - JavaScript</a></li>
<li><a href="https://wesbos.com/javascript" target="_blank" rel="noopener noreferrer">JavaScript Notes</a></li>
<li><a href="https://www.w3schools.com/js/js_intro.asp" target="_blank" rel="noopener noreferrer">W3schools</a></li>
</ul>

---

<h1>ECMAScript vs JavaScript</h1>

<ul>
<li>ECMAScript est la spécification qui définie la structure standard d'un langage de script.

<ul>
<li>JavaScript est <em>un des langages</em> qui se conforme au standard ECMAScript.</li>
<li><a href="https://codeburst.io/javascript-wtf-is-es6-es8-es-2017-ecmascript-dca859e4821c" target="_blank" rel="noopener noreferrer">What is ES6, ES8, ES 2017, ECMAScript… ?</a><br><br></li>
</ul></li>
<li>Donc, ES5 ou ES6 font référence à une version moderne de JavaScript.</li>
</ul>

---

<h1 class="menu">Syntaxe</h1>

<ul>
<li>Point-virgule après chaque instruction <strong>;</strong></li>
<li>Commentaires <strong>//</strong>,  <strong>/* */</strong></li>
<li>Structures de contrôle, opérateurs et fonctions<br>
if … else, for, while, +, *, =, etc…

<ul>
<li><a href="https://www.w3schools.com/js/js_statements.asp" target="_blank" rel="noopener noreferrer">W3Schools - Instructions</a></li>
<li><a href="https://www.w3schools.com/js/js_function_definition.asp" target="_blank" rel="noopener noreferrer">W3Schools - Fonctions</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements" target="_blank" rel="noopener noreferrer">MDN - Instructions</a></li>
</ul></li>
</ul>

---

<h1 class="slide-only">Syntaxe</h1>

<ul>
<li>Variables <strong>faiblement typées</strong><br>(on ne donne pas <em>explicitement</em> un type comme en C++)

<ul>
<li>Le <a href="https://www.w3schools.com/js/js_datatypes.asp" target="_blank" rel="noopener noreferrer">type</a> est déduit à l'exécution:<br>
7, 2.5, 'allo', true, ['a', 'b', 'c'], [7, 'allo', true]</li>
</ul></li>
</ul>

<pre><code class="language-javascript">'5' + 2 + 3; // = 523 → '5' + '2' + '3'
2 + 3 + '5'; // = 55 → (2 + 3) + '5' → 5 + '5' → '5' + '5'
5 + Number('5'); // = 10 →  on peut convertir les variables: Number(), String(), Boolean()

let name = 'James';
name = 7; // pas de problème, name peut contenir n’importe quel type

let message = `Valeur: ${name}`; // 'Bonjour 7' =&gt; avec les backtick, ${interpolation}
</code></pre>

<ul>
<li>On peut vérifier le type des variables qu'on manipule</li>
</ul>

<pre><code class="language-javascript">typeof(name), isNaN(name), Array.isArray(name), Number.isInteger(name)
</code></pre>

---

<h1 class="menu">const, let, var</h1>

<ul>
<li><strong>const</strong> déclare une <strong>constante</strong> accessible dans le <strong>bloc</strong> courant( { ... } )</li>
<li><strong>let</strong> déclare une <strong>variable</strong> accessible dans le <strong>bloc</strong> courant</li>
<li><strong>var</strong> déclare une <strong>variable</strong> accessible dans la <strong>fonction</strong> courante</li>
</ul>

<pre><code class="javascript marked">
function doSomething(value) {
    if (value) {
<mark>       let message = 'There is a value';</mark>
        console.log(message); // ok
    }

<mark>  console.log(message); // ERREUR</mark>
}
</code></pre>

</div>

<pre><code class="javascript marked">
function doSomething(value) {
    if (value) {
<mark>       var message = 'There is a value';</mark>
    }

<mark>    console.log(message); // ok</mark>
}
</code></pre>

</div>

<ul>
<li>On <strong>favorise <em>const</em> et <em>let</em></strong>, on délaisse <em>var</em></li>
</ul>

---

<h1 class="menu">Sortie à la console</h1>

<p>La console permet un affichage textuel simple et rapide</p>

<pre><code class="language-javascript">console.log('allo');

console.table(['a', 'b', 'c']);

// Avec une variable
let name = 'James';

console.log(name);

// ou une interpolation
console.log(`Bonjour ${name}`);
</code></pre>

---
class: section-title

---

<p>Télécharger l'outil <a href="https://github.com/lukehaas/RunJS/releases/tag/v1.15.1" target="blank">RunJS <b>VERSION 1.15</b></a></p>

<ul>
<li><strong>Attention</strong> <em>Dans la version d'essai récente, RunJS n'autorise pas l'ouverture/sauvegarde de fichiers. Il faut copier/coller manuellement dans un fichier pour conserver les changements. Ne <strong>PAS</strong> faire les mise à jour de RunJS.</em></li>
</ul>

<p>Modifier les paramètres, Menu > Files > Preferences</p>

<ul>
<li><strong>General</strong>:    Line Wrap et Line Numbers</li>
<li><strong>Advanced</strong>:   Uniquement Loop Protection</li>
</ul>

<p class="slide-only">
    <br>
    👉 <a href=/sessions/2023H/1SU/documentation/1.1-introduction-a-javascript/#demo-menu target="_blank" rel="noopener noreferrer">Démarche</a>
</p>

---
class: section-title

<h1>Exercices</h1>

<p>👉 <a href=/sessions/2023H/1SU/documentation/1.2-exercices target="_blank" rel="noopener noreferrer">Énoncé</a></p>