User Tools

Site Tools


frontend:js

JS

logo

Site référence

Présentation

JavaScript est un langage de programmation de scripts principalement employé dans les pages web interactives mais aussi pour les serveurs avec l'utilisation (par exemple) de Node.js.

C'est un langage orienté objet à prototype, c'est-à-dire que les bases du langage et ses principales interfaces sont fournies par des objets qui ne sont pas des instances de classes, mais qui sont chacun équipés de constructeurs permettant de créer leurs propriétés, et notamment une propriété de prototypage qui permet de créer des objets héritiers personnalisés. En outre, les fonctions sont des objets de première classe. Le langage supporte le paradigme objet, impératif et fonctionnel. JavaScript est le langage possédant le plus large écosystème grâce à son gestionnaire de dépendances npm, avec environ 500 000 paquets en août 2017

Concepts de programmation

Le propos de JavaScript est de manipuler de façon simple des objets, au sens informatique, fournis par une application hôte. Par exemple dans un navigateur web, un script écrit en javascript peut être utilisé pour apporter une touche interactive ou dynamique à un applicatif (page ou site web), qui sans cela serait une page statique figée. Le langage Javascript permet par exemple d'écrire des scripts pour afficher ou cacher un paragraphe, une image ou un popup, selon les interactions de l'utilisateur, ou d'informer le serveur du temps passé à lire une page.

Sécurité

JavaScript et la structure DOM des pages HTML/XML fournissent un potentiel accès à des auteurs mal intentionnés de livrer par le web des scripts qui s'exécutent sur l'ordinateur cible de l'utilisateur du Web. Les fournisseurs de navigateurs tentent de réduire ce risque avec deux restrictions : L'une est de faire exécuter ces scripts dans un espace à part des autres données (sandbox) dans lequel seules des actions relatives au web (mouvements de souris, affichage de pixel, communications) peuvent être exécutées, sans avoir accès au système de fichier principal.
Une seconde est de n'exécuter les scripts que selon les contraintes de same-origin policy : dans cet esprit, un site Web ne doit pas avoir accès aux informations telles que les noms d'utilisateur et mot de passe ou cookies reçus des autres sites visités. Les vulnérabilités de JavaScript sont bien souvent des brèches d'au moins l'un de ces deux principes.

AJAX

Ajax (de l'anglais Asynchronous JavaScript And XML) est un ensemble de techniques découplant l'échange de données entre le navigateur et le serveur web de l'affichage d'une page web, ce qui permet de modifier le contenu des pages web sans les recharger. Grâce à l'objet JavaScript XMLHTTPRequest, cette méthode permet d'effectuer des requêtes HTTP sur le serveur web depuis le navigateur web, et permet également de traiter les réponses HTTP du serveur web pour modifier le contenu de la page web.
La réponse était en général au format XML qui tend aujourd'hui à être remplacé par le format JSON qui a l'avantage d'être natif en JavaScript. Le script manipule l'ensemble d'objets DOM qui représente le contenu de la page web. Les technologies XMLHTTPRequest, XML et DOM ont été ajoutées aux navigateurs web entre 1995 et 2005. La méthode Ajax permet de réaliser des applications Internet riches, offrant une maniabilité et un confort supérieur ; c'est un des sujets phares du mouvement Web 2.0.

JSON

JSON (JavaScript Object Notation) est un format utilisant la notation des objets JavaScript pour transmettre de l'information structurée, d'une façon plus compacte et plus proche des langages de programmation, que XML.
Malgré l'existence du DOM et l'introduction récente de E4X dans la spécification du langage JavaScript, JSON reste le moyen le plus simple d'accéder à des données, puisque chaque flux JSON n'est rien d'autre qu'un objet JavaScript sérialisé. De plus, malgré son lien historique (et technique) avec JavaScript, JSON reste un format de données structurées, et peut être utilisé facilement par tous les langages de programmation.

Depuis 2009, les navigateurs commencent à intégrer un support natif du format JSON, ce qui facilite sa manipulation, la sécurité (contre l'évaluation de scripts malveillants inclus dans une chaine JSON), et la rapidité de traitement. Ainsi les navigateurs Firefox et IE l'intègrent respectivement dès les versions 3.5 et 8.

ECMAScript

ECMAScript est un ensemble de normes concernant les langages de programmation de type script et standardisées par Ecma International dans le cadre de la spécification ECMA-262. Il s'agit donc d'un standard, dont les spécifications sont mises en œuvre dans différents langages de script, comme JavaScript ou ActionScript. C'est un langage de programmation orienté prototype.\

E4X

ECMAScript pour XML ou E4X est une extension du langage de programmation ECMAScript. Il rend l'utilisation de XML plus facile. Il se veut une alternative à l'interface DOM, afin de permettre l'accès à un document XML de manière plus simple, et plus intuitive aux développeurs.

Base


Voir la vidéo de Grafikart Apprendre le JavaScript depuis le PHP

On n'est pas obliger de mettre ; à la fin d'une instruction.

Les variables

Généralités

En JavaScript, tous les types de base sont des objets.

Il n'y a pas $ devant, mais il faut les déclarer avec var (ce n'est pas obligatoire mais c'est mieux pour la compréhension) :

var maVariable = 1

On peut enchainer les déclarations :

var maPremiereVariable = 1, maDeuxiemeVariable = 10;

Il existe 7 types de valeurs différents. Chaque valeur qu'on va pouvoir créer et manipuler en JavaScript va obligatoirement appartenir à l'un de ces types. Ces types sont les suivants :

  • String
    • Il n'y a pas de différence entre les ' et les
    • Les sauts de lignes doivent être fait avec \n
    • La concaténation se fait avec +
  • Number
  • Boolean
  • Null
  • Undefined
  • Symbol
  • Object

Portées des variables

Les variable ont une portée limitée uniquement dans les fonctions :

Les variables déclarées dans une fonction, ne sont pas accessible en dehors.
Les fonctions ont accès aux variables définis à l'extérieur
On peut redéfinir une variable de l'extérieur dans une fonction, en utilisant var, cela modifiera sa valeur dans la fonction mais pas à l'extérieur.

.

Hoisting

Le javascript va effectuer toutes les déclarations de variables faites avec var avant de lancer le script, peut importe a quelle ligne dans le code la déclaration est faite.

Déclaration

On peut déclarer plusieurs variables sur une même ligne :

var a, b, c

Les tableaux

Les tableaux se définissent avec les [ ] :

Pour récupérer le premier élément du tableau on fait :

tab[0]

Les tableaux associatifs avec des indexes n'existent pas en javascript, par contre il existe des objets (qui n'ont rien à voir avec la POO) :

var eleve = {
    nom : 'Jean',
    moyenne : 15
}

Pour récupérer le nom de l'éleve, on peut utiliser la notation PHP :

eleve['nom']

Mais on ne la verra presque jamais, il faut utiliser :

eleve.nom

Les conditions

Généralités

Les conditions s'écrivent comme en PHP, il y a aussi du ternaire.
La seule différence concerne le elseif qui s'écrit en 2 mots : else if

Les boucles

Il faut déclarer les variables et on peut utiliser break pour sortir des boucles :

for (var i = 0, i < 3, i++) {
  ...
  break
  ...
}

Pour parcourir un tableau, le foreach n'existe pas, il faut utiliser la fonction lenght :

for (var i = 0, i < tab.lenght, i++) {
  ...
}

Il existe une methode pour les objets array qui est forEach :

arr.forEach(callback, thisArg)

La méthode forEach()permet d'exécuter une fonction donnée sur chaque élément du tableau.

Les fonctions

Déclaration

Elle peuvent se déclarer comme en PHP mais ce n'est pas la meilleure solution :

function demo (a, b) {
  ...
}

On déclarera plutôt la fonction dans une variable (on peut également le faire en PHP):

var demo = function (a, b) {
  ...
}

On ne peut pas indiquer la valeur par défaut d'un paramètre d'une fonction

Appel

On l'appelle comme en PHP :

demo(1, 2)

On peut ne passer qu'un paramètre à la fonction, JS définira l'autre variable commme == undefined, on peut alors gérer le cas :

var demo = function (a, b) {
  if (b == undefined) {
    b = 2
  }
 
}
// On l'appellera comme ceci :
demo(1);

A noter que undefined est la valeur par défaut d'une variable (alors que c'est Null en PHP).

utilisation

Les variables sont des objets sur lesquels ont va appliquer des propriétés et des méthodes à l'aide du ., ce sont les fonctions en JavaScript :

"test".lenght
// retourne : 4
"test".toUpperCase()
// retourne : TEST
[1, 2, 3].lenght
// retourne : 3
[1, 2, 3].push(4)
// donne : [1, 2, 3, 4]

Les prototypes

Déclaration

Il n'y a pas de classes, on utilise un système de prototypes :
Les prototypes sont un mécanisme au sein de JavaScript qui permettent aux objets JavaScript d'hériter des propriétés d'autres objets. Les prototypes implémentent un héritage différent de celui rencontré dans les langages de programmation objets habituels.

On peut imbriquer les prototypes les uns dans les autres.

Il n'y a pas ces notions comme celles existantes en PHP :
- public, private, protected
- static
- héritage (à proprement parlé)
- interfaces et traits
- namespace

En PHP on ferait :

// CODE PHP
class Eleve {
  public $nom;
  public function __construct($nom) {
    $this->nom = $nom;
  }
  public function moyenne() {
    return 10;
  }
}
// on l'utilise :
$eleve = new Eleve('Jean)'

En JavaScript on aura :

// CODE JAVASCRIPT
var eleve = {
  nom: 'Eleve',
  moyenne: function () {
    return 10
  }
}
// on l'utilise :
var jean = Object.create(eleve)
jean.nom = "Jean"

this

On utilise this à la place de $this pour parler de la variable :

var eleve = {
  nom: 'Eleve',
  moyenne: function () {
    return 10
  },
  present: function () {
    return this.nom + "present"
  }
}

this fait toujours référence à l'objet global (Window), sauf dans une fonction où il fait référence à l'objet parent

On pourra utiliser une astuce qui consiste a déclarer une variable self pour faire être sûr de faire référence à la variable dans laquelle on se trouve :

var eleve = {
    nom: 'Doe',
    present: function () {
        var self = this
        var demo = {
            demo: function() {
                prenom: 'John'
                console.log(self.nom + " " + this.prenom)
            }
        }
        demo.demo()
    }
}
 
eleve.present()

Création d'un constructeur

Il faut créer une fonction :

var Eleve = function (nom) {
  this.nom = nom
}
// on l'utilise :
var jean = new Eleve('Jean')

On peut aussi ajouter une fonction au prototype :

var Eleve = function (nom) {
  this.nom = nom
}
Eleve.prototype.moyenne = function () {
  return 10
}
// on l'utilise :
var jean = new Eleve('Jean')

Cela donne dans la console de l'inspecteur :

Eleve {nom: "Jean"}
  nom: "Jean"
  __proto__:
    moyenne: ƒ ()
    constructor: ƒ (nom)
    __proto__: Object

jean est une instance du type Eleve

En résumé, lorsqu'on veut créer de nouveaux types de variables :

- On défini le constructeur sous forme de fonction au niveau de la déclaration de la variable

- On défini les méthodes au niveau du prototype.

Modification du prototype

On peut modifier le prototype quand on veut dans le code, ce n'est pas figé.

Javascript côté navigateur

On crée des fichiers .js et on met ce code dans le code HTML :

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

On peut mettre ce code dans la partie <HEAD> ou la fin de </BODY>, ce qui est mieux pour ne pas ralentir l'affichage de la page.

Window

C'est un super objet, quand on crée un variable, elle se retrouve comme propriété de Window.

Fonctions indispensables

Afficher une alerte qui bloque l'éxécution du script :

window.alert("Salut")

Afficher une alerte qui bloque l'éxécution du script avec un texte à remplir par l'utilisateur :

window.prompt("Salut")

Afficher une alerte qui bloque l'éxécution du script avec un bouton Ok (qui renvoie true) et un bouton Annuler (qui renvoie false) :

window.confirm("Salut")
frontend/js.txt · Last modified: 2020/09/17 22:30 (external edit)