Logs
Consultez les logs.
OK
Liste des données
Consultez la liste des données.
OK
Loading...
Formulaire
Saisissez vos données.
Enregistrer
Annuler
ReadyDev
Présentation
Admin
Le but de ce tutoriel est de vous apprendre à programmer en JavaScript.
Produit par Gérard KESSE.
Introduction
JavaScript souvent abrégé en JS, est un langage de programmation qui est l'une des technologies de base du World Wide Web, aux côtés de HTML et CSS. La majorité des sites Web utilisent JavaScript côté client pour modifier le comportement des pages Web, incorporant souvent des bibliothèques tierces. Tous les principaux navigateurs Web ont un moteur JavaScript dédié pour exécuter le code sur les appareils des utilisateurs. JavaScript est un langage compilé de haut niveau, conforme à la norme ECMAScript. Il a un typage dynamique, une orientation objet basée sur un prototype et des fonctions de première classe. Il est multiparadigme, prenant en charge les styles de programmation événementiels, fonctionnels et impératifs. Il dispose d'interfaces de programmation d'applications (API) pour travailler avec du texte, des dates, des expressions régulières, des structures de données standard et le modèle d'objet de document (DOM).
Programme principal
La balise (script) permet d'intégrer un fichier JavaScript dans un projet web.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript | ReadyDev</title>
</head>
<body>
<script src="/js/scripts.js"></script>
</body>
</html>Fonctions
L'opérateur (function) permet de créer une fonction.
Une fonction peut ne pas retourner un résultat.
//===============================================
function mainJs() {
runAceJS();
}
//===============================================Une fonction peut retourner un résultat.
//===============================================
function utf8_to_b64(_data) {
return encodeURIComponent(btoa(_data));
}
//===============================================Prototypes
L'opérateur (prototype) permet d'ajouter une méthode à un objet.
//===============================================
String.prototype.removeCharAt = function(i) {
var tmp = this.split('');
tmp.splice(i , 1);
return tmp.join('');
}
//===============================================Débogage
Le navigateur (Chrome) permet de déboguer un programme JavaScript.
Ouverture du débogueur.
Cliquer sur le menu.
Cliquer sur Plus d'outils.
Cliquer sur Outils de développement pour l'outil de débogage.
Ouverture d'un fichier source JavaScript.
Cliquer sur Sources.
Cliquer sur une source (scripts.js) pour le déboguer.
Placement d'un point d'arrêt.
Cliquer sur un numéro pour placer un point d'arrêt.
Actualiser la page pour le déboguer.
Suppression d'un point d'arrêt.
Cliquer sur le point d'arrêt pour le supprimer.
Classe
L'opérateur (class) permet de créer une classe.
Création d'une classe.
//===============================================
class GObject {
}
//===============================================Une classe peut posséder un constructeur.
La méthode (constructor) permet de créer le constructeur d'une classe.
//===============================================
class GObject {
//===============================================
constructor() {
}
//===============================================
}
//===============================================Ce qu'il faut savoir:
La méthode (constructor) est appelée à chaque nouvelle création.
JavaScript ne prend pas en charge la surcharge de constructeurs.
Une classe JavaScript ne peut posséder qu'un seul constructeur.
Une classe peut posséder des attributs.
L'opérateur (this) permet créer des attributs dans le constructeur.
//===============================================
class GObject {
//===============================================
constructor() {
this.m_logs = new GLog();
this.m_dataLogs = new GLog();
this.m_map = [];
}
//===============================================
}
//===============================================Ce qu'il faut savoir:
L'opérateur (this) permet d'accéder à un attribut au sein d'une méthode.
Une classe peut posséder des méthodes.
//===============================================
class GObject {
//===============================================
toWidth() {
var lWidth = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
return lWidth;
}
//===============================================
}
//===============================================Ce qu'il faut savoir:
L'opérateur (this) permet d'accéder à une méthode au sein d'une autre méthode.
Héritage de classe
Définition de la classe mère.
//===============================================
class GObject {
//===============================================
constructor() {
this.m_logs = new GLog();
this.m_dataLogs = new GLog();
this.m_map = [];
}
//===============================================
}
//===============================================L'opérateur (extends) permet de créer un héritage de classe.
La méthode (super) permet de bénéficier des attributs et des méthodes de la classe mère.
Création d'un héritage de classe.
//===============================================
class GTest extends GObject {
//===============================================
constructor() {
super();
}
//===============================================
}
//===============================================Accès à un attribut de la classe mère.
//===============================================
class GTest extends GObject {
//===============================================
run(_method, _obj, _data) {
if(_method == "") {
this.m_logs.addError("La méthode est obligatoire.");
}
else if(_method == "xml") {
this.onXml();
}
else {
this.m_logs.addError("La méthode est inconnue.");
}
}
//===============================================
}
//===============================================Polymorphisme de classe
Définition de la classe mère.
//===============================================
class GObject {
//===============================================
clone() {return new GObject();}
setObj(_obj) {}
//===============================================
}
//===============================================Définition de la classe fille.
//===============================================
class GPage extends GObject {
//===============================================
clone() {
return new GPage();
}
//===============================================
setObj(_obj) {
this.m_root = _obj.m_root;
this.m_path = _obj.m_path;
this.m_name = _obj.m_name;
this.m_content = _obj.m_content;
this.m_defaultAddress = _obj.m_defaultAddress;
this.m_defaultPage = _obj.m_defaultPage;
}
//===============================================
}
//===============================================Utilisation du polymorphisme.
L'opérateur (this) permet d'identifier l'objet lui-même.
//===============================================
class GPage extends GObject {
//===============================================
deserialize(_data, _code) {
var lDom = new GCode();
lDom.getMap(_code, this.m_map, this);
}
//===============================================
}
//===============================================Appels des méthodes polymorphes.
//===============================================
class GCode extends GXml {
//===============================================
getMap(_code, _map, _obj) {
for(var i = 0; i < lSize; i++) {
var lObj = _obj.clone();
lObj.deserialize(lData, _code);
_map.push(lObj);
}
}
//===============================================
}
//===============================================Ce qu'il faut savoir:
JavaScript possède un typage dynamique.
Toutes les méthodes en JavaScript sont polymorphes.
Ajax
La classe (XMLHttpRequest) permet de réaliser des appels asynchrones vers le serveur.
La classe (XMLHttpRequest) fournit la fonction de rappel (onreadystatechange) qui est appelé à chaque changement d'état du traitement.
La classe (XMLHttpRequest) fournit la propriété (readyState) qui permet de déterminer l'état actuel du traitement.
La classe (XMLHttpRequest) fournit la propriété (status) qui permet de déterminer le statut actuel du traitement.
La classe (XMLHttpRequest) fournit la propriété (responseText) qui permet de récupérer le résultat du traitement.
La classe (XMLHttpRequest) fournit la méthode (open) qui permet d'ouvrir un point de connexion vers le serveur.
La classe (XMLHttpRequest) fournit la méthode (setRequestHeader) qui permet d'initialiser les entêtes de la requête à envoyer au serveur.
La classe (XMLHttpRequest) fournit la méthode (setRequestHeader) qui permet d'initialiser les entêtes de la requête à envoyer au serveur.
La classe (XMLHttpRequest) fournit la méthode (send) qui permet d'envoyer une requête au serveur.
Envoi d'une requête POST au serveur.
//===============================================
callServer(_data, _callback) {
var lXhttp = new XMLHttpRequest();
lXhttp.onreadystatechange = function() {
if(this.readyState == 4 && this.status == 200) {
var lData = this.responseText;
_callback(lData);
}
}
var lMethod = "POST";
var lUrl = "/php/req/server.php";
var lAsync = true;
var lUser = null;
var lPassword = null;
lXhttp.open(lMethod, lUrl, lAsync, lUser, lPassword);
lXhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var lReq = "";
lReq += sprintf("req=%s", _data);
lXhttp.send(lReq);
}
//===============================================XML
La classe (DOMParser) permet de manipuler des documents XML.
La classe (DOMParser) fournit la méthode (parseFromString) qui permet de charger des données XML.
La classe (Document) fournit la propriété (documentElement) qui permet de récupérer le noeud racine d'un document XML.
Création d'un document XML.
//===============================================
createDoc() {
var lXml = "";
lXml += sprintf("<?xml version='1.0' encoding='UTF-8'?>\n");
lXml += sprintf("<root></root>\n");
var lParser = new DOMParser();
this.m_doc = lParser.parseFromString(lXml, "text/xml");
if(!this.m_doc) return false;
this.m_node = this.m_doc.documentElement;
return true;
}
//===============================================La classe (Document) fournit la méthode (createElement) qui permet de créer un noeud XML.
La classe (Element) fournit la propriété (childNodes) qui pointe la liste des noeuds enfant.
Chargement d'un noeud à partir de données XML.
//===============================================
loadNode(_root, _data) {
var lDom = _root.m_doc.createElement("template");
lDom.innerHTML = _data;
var lNodes = lDom.childNodes;
while(lNodes[0]) {
this.m_node.appendChild(lNodes[0]);
}
return true;
}
//===============================================La classe (Element) fournit la méthode (appendChild) qui permet d'ajouter un nouveau à un noeud existant.
Ajout d'un nouveau noeud.
//===============================================
addObj(_root, _name) {
var lNode = _root.m_doc.createElement(_name);
this.m_node.appendChild(lNode);
return lNode;
}
//===============================================La classe (Element) fournit la propriété (innerHTML) qui permet d'ajouter un contenu à un noeud.
Ajout d'un nouveau noeud avec un contenu.
//===============================================
addValue(_root, _name, _value) {
lNode = _root.m_doc.createElement(_name);
lNode.innerHTML = _value;
this.m_node.appendChild(lNode);
return this.m_node;
}
//===============================================La classe (Document) fournit la méthode (createCDATASection) qui permet créer une section CData.
Ajout d'un contenu CData à un noeud.
//===============================================
setValue(_root, _value) {
var lCData = _root.m_doc.createCDATASection(_value);
this.m_node.appendChild(lCData);
}
//===============================================La classe (Element) fournit la propriété (innerHTML) qui permet de récupérer le contenu d'un noeud.
Récupération du contenu d'un noeud XML.
//===============================================
getValue() {
lData = this.m_node.innerHTML;
return lData;
}
//===============================================La classe (Element) fournit la propriété (firstElementChild) qui permet de récupérer le premier noeud enfant d'un noued existant.
La classe (Element) fournit la propriété (nodeValue) qui permet de récupérer le contenu d'un noeud XML.
Récupération du contenu CData d'un noeud XML.
//===============================================
getValue() {
lData = this.m_node.firstElementChild.nodeValue;
return lData;
}
//===============================================La classe (Document) fournit la méthode (evaluate) qui permet récupérer le noeud lié à une requête XPath.
Récupération du noeud lié à une requête XPath.
//===============================================
getNode(_path) {
var lNode = this.m_node;
var lNodes = this.m_doc.evaluate(_path, lNode, null, XPathResult.ANY_TYPE, null);
lNodeI = lNodes.iterateNext();
return lNodeI;
}
//===============================================Comptage du nombre de noeuds liés à une requête XPath.
//===============================================
countNode(_path) {
var lNode = this.m_node;
var lNodes = this.m_doc.evaluate(_path, lNode, null, XPathResult.ANY_TYPE, null);
while(1) {
var lNodeI = lNodes.iterateNext();
if(!lNodeI) break;
lCount++;
}
return lCount;
}
//===============================================La classe (Element) fournit la propriété (outerHTML) qui permet récupérer le contenu d'un noeud XML.
Conversion d'un document XML en chaîne de caractères.
//===============================================
toString() {
var lData = this.m_doc.documentElement.outerHTML;
lData = sprintf("<?xml version='1.0' encoding='UTF-8'?>\n%s", lData);
return lData.toXml();
}
//===============================================Conversion d'un noeud XML en chaîne de caractères.
//===============================================
toNode() {
var lData = this.m_node.outerHTML;
return lData.toXml();
}
//===============================================