JavaScript - M Frébourg

– support stone thrones otelo finder ristoo zoo tickoon finder

Présentation

Crée en 1995, JavaScript ou JS est un langage de scripts. Il sert principalement à contrôler les données saisies dans des formulaires ou modifier le code HTML. Le JS est exécuté coté client par le navigateur. Le code est donc accessible par l’utilisateur dans son ensemble. Il est toutefois possible d’écrire du JS coté serveur.

JS ne fonctionne pas de la même façon que Java. NetScape, fondateur de JavaScript était partenaire de Sun, créateur de Java. Pour des raisons commerciales, ils ont choisi ce nom. JS peut être remplacé par des technologies similaires comme Ruby, Python ou Dart qui sont des langages de scripts

Avantages

le plus rapide
à la mode
indépendant de l’OS

Inconvénients

différent des langages classiques

Métiers

developer Back-end (NodeJS)
developer Front-end (jQuery, VueJS, AngularJS, React)
developer Full-stack (NodeAtlas)
lead developer
chief technology officer ( CTO )

Syntaxe de base

On écrit du JS entre des balises script.

<script>
alert(‘coucou’) ;
</script>

Il est nécessaire de finir les lignes d’instructions par des ; même si leurs oublis fonctionnent. Certains problème peuvent dans ce cas apparaître.
On évitera le code suivant qui générera une erreur car l’interpréteur va comprendre le code comme deux lignes d’instructions séparées.

var a = b 
+c ;

Lien externe

Pour des raisons d’architecture, on préférera séparer le code JS du HTML en appelant un fichier. On ne met pas les balises <script> dans le fichier JS.

<script src="monFichier.js"></script>

Variable

JS fonctionne comme PHP, les variables sont typés dynamiquement. Nous n’avons donc pas besoin de déclarer les types.

let username= 12 ;

La concaténation de chaine de caractère fonctionne avec des + comme en Java

let a ="youhou"+b ;

Affichage et saisie

On utilise la commande prompt pour la saisie et alert pour l’affichage avec l’utilisateur

let maVar= prompt(‘Entrez une valeur) ;
alert(maVar);
confirm("message")

Dans la console

console.log("youhou");

Les conditions

if (confirm("dans le if")) {
    alert("dans if');
} else {
    alert("dans else");
}

var choix = parseInt(prompt('1 ou 2'));
switch (choix) {
    case 1:
        alert("choix 1");
        break;
    case 2:
        alert("choix 2");
        break;
    default:
        alert("aucun choix");
}

Les boucles

let somme = 0, valeur = 0;
while (valeur != -1) {
    valeur = parseInt(prompt(‘valeur’))
    ;
    if (valeur != -1) {
        somme += valeur;
    }
}

alert(somme);
for (let i = 0; i < 10; i++) {
    alert(i);
}

Les tableaux

var nombres= [5,8,12];
alert(nombres[2]);

Pour ajouter un élément à la fin du tableau

nombres.push(45) ;

Parcours

nombres.forEach(function(item, index, array) {
  console.log(item, index);
});

Les fonctions

Comme en PHP

function f(){}

Il existe des fonctions anonymes, i.e. une fonction qui n’a pas de nom. La variable maFonction possède la référence de la fonction anonyme.

var maFonction = function(message){
alert(message);
};
maFonction('ceci est un test');

Porté des variables

Les variables var sont connus à l’intérieur des fonctions où elles sont déclarées et dans les sous fonctions.
Les variables let sont connues dans le bloc uniquement.

var x = 1;

function h(){
  var x = 2;

  console.log(x);
  // expected output: 2
}
h();
console.log(x);
// expected output: 1

let x = 1;

if (x === 1) {
  let x = 2;

  console.log(x);
  // expected output: 2
}

console.log(x);
// expected output: 1

var x = 1;

if (x === 1) {
  var x = 2;

  console.log(x);
  // expected output: 2
}

console.log(x);
// expected output: 2

Encapsulation

JavaScript ne propose pas nativement de fonctionnalité d’espace de nommage. Pour éviter les collisions de noms, entre autres par l’utilisation d’importation de code externe, une méthode consiste à encapsuler la bibliothèque dans une fonction anonyme. Les variables et fonctions n’ont plus dans ce cas une portée globale mais réduite à la portée de la fonction.

Pour ce faire, la déclaration “function() {}” permet de définir la fonction anonyme.
L’ajout de “()” à la fin de la déclaration permet son exécution immédiate.
La grammaire de JavaScript ne permettant cependant pas cette écriture, il faut donc encadrer la fonction anonyme avec des parenthèses.

var maVariable = 'I am global';

(function () {
    var maVariable = 'I am not global';
    alert(maVariable);
.
//Affiche 'I am not global'
})();


alert(maVariable);
//Affiche 'I am global'

Les évènements

Il existe plusieurs évènements qui sont récupérables via JS.

click	Cliquer (appuyer puis relâcher) sur l’élément
dblclick	Double-cliquer sur l’élément
mouseover	Faire entrer le curseur sur l’élément
mouseout	Faire sortir le curseur de l’élément
mousedown	Appuyer (sans relâcher) sur le bouton gauche de la souris sur l’élément
mouseup	Relâcher le bouton gauche de la souris sur l’élément
mousemove	Faire déplacer le curseur sur l’élément
keydown	Appuyer (sans relâcher) sur une touche de clavier sur l’élément
keyup	Relâcher une touche de clavier sur l’élément
keypress	Frapper (appuyer puis relâcher) une touche de clavier sur l’élément
focus	« Cibler » l’élément
blur	Annuler le « ciblage » de l’élément
change	Changer la valeur d’un élément spécifique aux formulaires (input,checkbox, etc.)
select	Sélectionner le contenu d’un champ de texte (input, textarea, etc.)

Version DOM 0

<span onclick="alert('Hello !');">Cliquez-moi !</span>

Version DOM 2

On « écoute » l’évènement sur un élément. Ceci est très proche de la plupart des langages de programmation objet.

<span id = "clickme" > Cliquez - moi! </span>
<script>
var element = document.getElementById('clickme');
element.addEventListener('click', function (e) {   alert("Vous m'avez cliqué !" + e.type); }, false);
</script>

Modifier le CSS

On peut aussi modifier le style d’un élément via JS.

#text {
color: red;
}

<span id="text"></span>
var text = document.getElementById('text'),
color = getComputedStyle(text, null).color;
alert(color);

LocalStorage et sessionStorage

Il est possible d’enregister des variables persistantes avec JavaScript. Les variables de sessions sont disponibles dans une instance de navigateur. Les variables local n’expirent pas. Pour un enregistrement d’information et accès coté serveur, on utilisera des cookies.

sessionStorage.setItem('token', data);
var token = sessionStorage.getItem('token');

localStorage.setItem("username", "John");
var username = localStorage.getItem('username');

sessionStorage.removeItem('token');
localStorage.clear();

jQuery

jQuery est une bibliothèque JavaScript qui permet d’agir sur le code HTML, CSS, JavaScript. jQuery est indépendant des navigateurs. http://api.jquery.com/
La bibliothèque jQuery peut être appelée de deux manières différentes jQuery ou $

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        alert("Value: " + $("#test").val());
    });
});
</script>

Ajax

Ajax, basé sur du JavaScript permet de faire communiquer le navigateur avec un serveur Web sans occasionner le rechargement d’une page.

Fonctionnement sans Ajax

Le navigateur envoie une requête – via une URL – au serveur. Le serveur répond en renvoyant au navigateur le code HTML de la page ainsi que tout ce qui lui est associé comme les scripts JavaScript, les images ou les éventuels médias et autres objets embarqués – donc la réponse du serveur est volumineuse.

Avec Ajax

La première requête est la même. Lorsque la page nécessite de nouvelle information, le navigateur via JS peut appeler le serveur web et obtenir ce dont il a besoin sans les autres données. On peut effectuer un envoie sélectif de données et rafraichir une partie de la page. Il revient au développeur de réaliser le code spécifique coté navigateur et serveur Web.

Exemple avec jQuery, cliquer sur le bouton, bonjour Ajax devrait s’afficher. JS vient d’appeler le contenu de index.php

index.js

$(document).ready(function () {
//click sur l'id btn
    $('#btn').click(function () {
        $.ajax("http://localhost/index.php",//appel de index.php sur le serveur web
            {
                type: "GET",
                success: function (resultat) {
                    $("#result").html(resultat);
                }
            });
    });
});

index.html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
</head>

<body>

 <button class="btn btn-primary" id="btn">Valider</button>
 <div id="result"></div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>
</html>

index.php

<?php  echo "bonjour Ajax";

Autre exemple

$(document).ready(function () {
    $('#btn').click(function () {
        $.ajax("http://localhost/index.php",
            {
                type: "GET",
                data: 'nom=' + nom + '&prenom=' + prenom,
                success: function (data, textStatus, jqXHR) {
                    $("#result").html(resultat);
                },
                error: function (data, textStatus, jqXHR) {
                    console.log(jqXHR.statusCode());
                },
                complete: function (data, textStatus, jqXHR) {
                    console.log("finito");
                }
            });
    });
});

Programmation Objet

Classes, constructeur, variables d’instances et accesseur

class Fruit{
  constructor(couleur, grammes) {
    this.couleur= couleur;
     this.grammes= grammes;
  }
  
  get kilo(){
    return this.grammes/1000;
  }

}

let monFruit = new Fruit();
console.log(monFruit.kilo);

Variables et méthodes static (MDN)

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  static distance(a, b) {
    const dx = a.x - b.x;
    const dy = a.y - b.y;
    return Math.hypot(dx, dy);
  }
}

const p1 = new Point(5, 5);
const p2 = new Point(10, 10);

//variable static
Point.couleur="noir";

console.log(Point.distance(p1, p2));
console.log(Point.couleur);

Héritage

class Personne{ 
  constructor(nom) {
    this.nom = nom;
  }
  
  mange() {
    console.log(this.nom + ' mange.');
  }
}

class Etudiant extends Personne{
  constructor(nom) {
    super(nom); 
  }
  mange() {
    console.log(this.nom + ' mange beaucoup.');
  }
}

Vue.js

On pourra utiliser Vue.js à la place de JQuery.

On utilise un cdn pour obtenir la version 2 en mode débogage.
https://fr.vuejs.org/v2/guide/installation.html

tutoriel https://www.grafikart.fr/formations/vuejs
comparaison avec JQuery https://scotch.io/bar-talk/vuejs-vs-jquery-use-cases-and-comparison-with-examples

La div app definit la zone où vue.js s’exécutera.
{{maVariable}} contient des variables qui seront interpreté grâce à data
v-bind ou : permet de remplacer un attribut html
v-if v-else est interprété selon la valeur de l’attribut
v-on:click ou @click permet d’exécuter une fonction dans methods au click
v-model (v-bind:value) pour lier la value d’un formulaire avec une variable

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8"/>
    <title> mon tableau </title>
</head>
<body>
<div id="app">
  <a v-bind:href="link"  :title="title">{{message}}</a>

  <div v-if="success">
   message selon condition
   <div v-on:click="close">test click</div>
    </div>
    <div v-else="success">
  pas de message !
    </div>

     <div v-show="tarte">
   message selon condition2
    </div>
    <ul>
    	<li v-for="p in tb">{{p}}</li>
    </ul>
    <input v-model="message2" placeholder="modifiez-moi">
     <p>Le message est : {{ message2 }}</p>


<br ><div v-bind:class="classObject"></div> </br >

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  
new Vue({
  //div ou est executé vuejs
  el:'#app',

  data: {
    //variable
    message:"youhou",
    //liaison avec un input
    message2:"test",
    //attribut html
    title:"titre",
    //href
    link:'https://frebourg.es',
    //affichage de la div v-if
    success: true,
        //affichage de la div v-show
    tarte:false,
    //affichage d'un tableau
    tb:['Angular','React'],

    
  //changer de class
  classObject: {
       active: true,
       'text-danger': false
    }
  },

  methods:{
    close: function(){
      //changement de la valeur de success de data
      this.success=false;
    }
  }
})

</script>
</body>
</html>

Ajax avec axios

https://github.com/axios/axios

<div id="app">
  {{ info }}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
        axios({
      method: 'get',
      url: 'https://api.coindesk.com/v1/bpi/currentprice.json',
      responseType: 'json',
     /* data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
      }*/
    })
       .then(async res => { 
       	if(res.status === 200) { 
       	      alert('Ok!');
       	      this.info=res;
       	 } else if(res.status === 400) { 
       	 	  let errorResponse = await res.json(); this.errors.push(errorResponse.error); }

       });
  }
})
</script>