JavaScript

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

 

Syntaxe de base

On écrit du JS entre des balises 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.

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.

Variable

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

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

Affichage et saisie

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

Dans la console

 

Les conditions

Les boucles

Les tableaux

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

Parcours

 

Les fonctions

Comme en PHP

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.

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.

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.

 

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

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.

Modifier le CSS

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

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.

 

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 $

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

index.html

index.php

Autre exemple

Programmation Objet

Classes, constructeur, variables d’instances et accesseur

Variables et méthodes static (MDN)

Héritage

 

2018-07-18T15:47:47+00:00By |Tags: |

Leave A Comment