JavaScript

Le JavaScript est un langage de programmation destiné au HTML. Il s’exécute dans le navigateur du client (visiteur). Il n’a rien a voir avec le Java sinon qu’ils ont était créer par la même entreprise.

Spécificité du JavaScript

Le javascript fait parti des 3 langages indispensable au développeur web. Le HTML défini le contenu, le CSS l’apparence, le JavaScript permet lui de modifier le comportement de la page.

Utilisation du JavaScript

Le JavaScript peut s’utiliser dans une balise <script> en écrivant directement le code dans le document HTML ou via un fichier externe <script src="monJavaScript.js>.

Si votre code ne prend que quelques ligne vous pouvez le laisser dans le HTML mais si le code devient volumineux il est recommandé d’utiliser un fichiers externe qui permettra la mise en cache.

Fonctionnalité du JavaScript

Le JavaScript permet de modifier le HTML une fois qu’il est affiché par le navigateur.

Cela permet de reprendre le code HTML pour y ajouter du contenu, modifier la dimension d’un élément, ajouter des attributs les supprimer ou encore les alterner.

Il est important de prendre en compte le fait que le code javascript est exécuté par le navigateur du visiteur. Les contraintes de sécurités limitent donc sont utilisation à des opérations de dynamisation de la page.

Par exemple on peut utiliser le javascript pour afficher une fenêtre d’identification, mais la vérification du mot de passe doit se faire sur le serveur pour assurer une sécurité fiable.

Installation de Javascript

Aucune le javascript et à la charge du navigateur vous n’avez rien a faire 😉

Utilisation de Javascript

Il est recommandé de charger les JavaScript à la fin du document HTML, car l’exécution de JS retarde l’affichage des informations.

Sortie (réponse) de JavaScript

Le résultats d’une fonction JS peut s’afficher de différentes façon :

  • Directement à l’intérieur d’une balise HTML via innerHTML.
  • Dans une page HTML via document.write().
  • Dans une boite de message via window.alert().
  • Dans la console du navigateur via console.log().

La syntaxe Javascript

Comme pour le CSS le javascript utilise la structure HTML (appelé le DOM) pour cibler les éléments. Les déclaration JS sont séparé par des ‘;’.

document.getElementById("demo");

Inner-HTML

Ici on cible l’élément ayant un ID égal « demo » Comme avec le CSS cibler ne suffit pas il faut maintenant déterminer le mode de sortie.

document.getElementById("demo").innerHTML = 5 + 6;

Ainsi nous allons remplacer le contenu de la balise « demo » par le résultat de 5+6, soit 11.

Document.write()

Assez semblable à ECHO en PHP l’output document.write() retourne le résultat du script à l’emplacement du script sur la page.

document.write("salut");

Attention Document.write() ne doit être utilisé que pour tester votre code, l’utilisation systématique de cette fonction n’est pas une bonne habitude à prendre on lui préférera InnerHTML, qui défini avec précision l’emplacement de la sortie.

A lire  Effet SCSS

Window.alert()

Affiche une fenêtre système contenant l’information retourné par le script.

window.alert("attention !!");

Console.log()

Enfin il est aussi possible d’afficher le résultat du script dans la console du navigateur, accessible avec le touche F12 sur chrome ou via l’inspecteur d’éléments.

console.log("très utile pour déboguer votre code");

Valeurs

Les chiffres peuvent être à virgule, mais comme le langage prend l’anglais en référence, la virgule est un point. Pour les valeurs décimale JS ne retourne que les valeurs significative, 10.50 deviendra 10.5.

String

Js peut aussi manipuler des chaines de caractères (STRING). pour définir une chaîne de caractères on peut utiliser indifféremment l’apostrophe ou les guillemets.

var = x;
x = "ma chaîne de caractères"
x = 'ma chaîne de caractères'
//cela permet d'utiliser des guillemets ou des apostrophes 
//dans la chaîne
x = "c'est cool"
x = 'presque "pratique"'
//Et si vous voulez utiliser des guillemets et des apostrophes
x = "c'est \"possible\""
x = `ici on peut écrire une chaîne
sur plusieurs ligne
avec la combinaison alt gr + 7
c'est un caractères d'accentuation comme ^ 
il faut soit appuyer deux fois soit saisir
un caractères pour que les crochets d'affichent`

Le backslash (alt gr + 8 « \ ») est un caractère d’échappement qui permet au langage de traiter le caractères qui le suit directement comme un caractères normal.

Les variables Js

Contrairement au PHP il faut déclarer les variables avant de les appeler.

var x, y, z;
x = 3;
y = 6;
z = x + y;

Déclarer le type des variables

Lors de la déclaration des éléments il est possible de définir le type de valeur contenu par la variable.

var x = new String();
// Défini la valeur comme une chaîne de caractère
var y = new Number();
// Défini la valeur comme une nombre
var z = new Boolean();
// Défini la valeur comme booléenne.

Les objets Js

Les objet en Js sont semblables au array() en PHP, il permettent de stocker plusieurs valeurs dans une variable en associant une clé.

var car = {type:"Fiat", model:"500", color:"white"};
//on peut rappeler les valeurs de deux façon.
car.type
//ou
car["type"]

Il ne faut pas définir le type de variable dans le cas d’un objet JS

Chapitre détaillé des objets Js

Les arrays

Les array en Js sont différents des objets car il n’exigent pas de clé pour les différents champs.

var cars = ["Saab", "Volvo", "BMW"];

On accède au données de la même façon qu’en PHP.

var name = cars[0];
//affichera Saab.

Il est aussi possible d’afficher toute les valeur d’un array grâce à toString().

document.getElementById("demo").innerHTML = cars.toString();
// affichera : Saab, Volvo, BMW

Pour plus de personnalisation on peut utiliser join(), qui permet de définir le ou les caractères de séparation.

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
//affichera : Banana * Orange * Apple * Mango

pop()

Pour manipuler les arrays on peut utiliser la commande pop() qui permet de retirer le dernier de l’array().

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();
// retire le dernier élément ("Mango") de la variable fruits

push()

Push() permet d’ajouter un élément dans la chaîne.

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
//  Ajoute ("Kiwi") à fruits

shift()

Retire le premier élément de la liste.

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();
//Retire le premier élément "Banana" de fruits

unshift()

Ajoute un élément au début de la liste.

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");
//Ajoute "Lemon" au début de fruits

Les opérateurs Js

JavaScript permet d’effectuer des opérations mathématiques simple, multiplications, addition, soustraction etc..

A lire  CSS

Attention le signe égal « = » permet d’attribuer une valeur à une variable pas d’afficher le résultat !

Les commentaires

Les commentaires fonctionnent exactement comme avec le PHP.

var x = 5;   // je suis un commentaire.
// var x = 6;   la valeur de x est 5.
/*permet des commentaires
sur plusieurs
lignes*/

Identifieurs

Ce sont les noms des fonctions des variables ou autres.

Vous ne pouvez utiliser de chiffres comme premier caractères pour un identifieur.

Cela évite de confondre valeur et variables. De plus de signe moins « – » ne doit pas être utiliser pour nommer vos identifieurs il doit être réservé pour les soustractions. on utilise l’underscore à la place « _ »

Sensibilité à la case

Le Js est sensible à la case, cela signife de la variable « Nom » et différente de « nom« .

Le paradigme du dromadaire

Du fait de la sensibilité à la case et de l’impossibilité d’utilisé – on utilise des majuscule pour signifier un nouveau mot dans une chaîne de caractère.

NomDeVotreVariable

Fonction Js

Comme pour le PHP le JS utilise des fonctions ce qui permet d’exécuter une succession d’opérations en appelant la fonction.

var x = mafonction(4, 3);    
//la fonction est appelé et le résultat est stocké dans la variable x

function mafonction(a, b) {
    return a * b;            
//la fonction retourne le produit de a multiplié par b
}

La vocation des fonctions est de permettre la réutilisation du code sur plusieurs occurrences. Pour être efficace une fonctions doit traiter des variables prenons le cas d’une fonction convertissant les degrés Fahrenheit en Celsius.

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);

Attention : les parenthèses sont indispensable, si vous les oubliez lors de la rédaction de vos pages, Js affichera la formule de votre fonction est non le résultat attendu.

Attribuer une fonctions à une variable

En Js vous avez la possibilité d’attribuer une fonction à une variable de ce fait la variable se comporte comme la fonction.

var func = function maFonction() {
console.log("ça marche");
}
//ainsi les lignes suivantes seront équivalentes.
maFonction();
func();

Fonctions récursives

Une fonction peu s’appeler elle même, c’est ce qu’on appelle une fonction récursive.

function boucle(x) {
  if (x >= 10) // "x >= 10" représente la condition d'arrêt (équivalent à "!(x < 10)")
    return;
  // faire quelque chose
  boucle(x + 1); // l'appel récursif
}
boucle(0);

Fonctions imbriqués

Une fonction peut contenir des fonctions :

function ajouteCarrés(a, b) {
  function carré(x) {
    return x * x;
  }
  return carré(a) + carré(b);
}
a = ajouteCarrés(2,3); // renvoie 13
b = ajouteCarrés(3,4); // renvoie 25
c = ajouteCarrés(4,5); // renvoie 41

Il est aussi possible de définir les paramètres pour les fonctions inclus dans une fonction :

function parente(x) {
  function fille(y) {
    return x + y;
  }
  return fille;
}
fn_fille = parente(3); // Fournit une fonction qui ajoute 3 à ce qu'on lui donnera
résultat = fn_fille(5); // renvoie 8

résultat1 = parente(3)(5); // renvoie 8

 

A lire  Construire une page en HTML5

Js et les objets

En javascript les objets sont au cœur du langage, et nous en avons déjà utiliser sans le savoir. En effet la commande document.write() utilise l’objet document, et la fonction write().

Créer un object Js

Voyons pour commencer les différentes syntaxe utilisable pour créer un objet :

//création de notre objet.
var joueur = {nom:"paul",age:"30",ligue:"argent"};
// les espace et les retour à la ligne sont insignifiant.
var joueur = 
{
	nom:"paul",
	age:"30",
	ligue:"argent"
};

Notre objet contient 3 propriétés qui sont nom, age et ligue.

Une fois notre objet créé nous pouvons accéder aux informations de ce dernier de plusieurs façon :

joueur.nom
joueur["nom"]
joueur[0]
//ces trois syntaxe retournerons le même résultat.

Constructeur d’objets

La vocation d’un objet est d’être utiliser à plusieurs reprise, pour en facilité la syntaxe, on utilise une fonction qui construira notre objet rapidement afin de l’utiliser efficacement.

function joueur(nom,age,ligue) {
	this.nom = nom;
	this.age= age;
	this.ligue= ligue;
	}
//pour créer notre objet nous utiliserons la fonction joueur
var j1 = new joueur ("paul",32,"argent");

Pour bien appréhender les objets Js, et leurs usages il faut comprendre une notion primordiale avec le JavaScript le DOM pour Document Object Model.

DOM

En HTML nous avons vu que les balises contenaient des informations ainsi que d’autres balises et le DOM c’est justement cette structure HTML transposé sous la forme d’un ARRAY, un grand et complexe ARRAY

Afin de sélectionner et ou de modifier les informations de la page il nous faudra donc explorer le tableau (array) de notre DOM(page) pour sélectionner nos balises en utilisant une méthode assez proche des sélecteurs CSS.

Le DOM c’est l’ensemble des balises visible de la page, donc tout le contenu de la balise <body>.

 

 

 

© 2018 Occitaweb formation WordPress et média sociaux