0% found this document useful (0 votes)

14 views

Java Script

Une documentation sur javascript

Uploaded by

poleinformatiquedmbl

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

14 views

Java Script

Une documentation sur javascript

Uploaded by

poleinformatiquedmbl

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 96

JavaScript

Présentation:
est un langage de programmation créé en 1995 , il va nous permettre de
créer des pages interactives et vivantes à l’aide de script.
Script, suite d'instructions qui vont être interprétées par une programme,
ainsi pour lire un code javascript il va nous valoir un interpréteur.
Tous les navigateurs possèdent déjà leur propre interpréteur javascript.
Le javascript est aussi un langage qui est dit majoritairement client-side,
il existe deux types de langages client-side et server-side.
Le client-side va s’exécuter du coté du client, sur l’ordinateur qui va
demander la page web;
Server-side, au contraire, va s’exécuter du côté serveur, sorte
d’ordinateur très puissant qui va stocker des pages webs puis les
envoyées au client s’il fait la demande.
Il est également un langage orienté objet à prototype, cela veut dire que
javascript va utiliser des objets dans son fonctionnement global et que
ces objets sont prototyper. Un objet correspond à un bloc cohérent de
code qui sert à effectuer telle ou telle opération.
Ce qui fait toute la puissance du javascript, on va pouvoir l’utiliser pour
manipuler dynamiquement le code HTML d’une page.

L’environnement de Travail:
Pour coder en javascript, il me faut un éditeur de texte,

Où écrire le Code JavaScript?.

On peut placer notre code javascript en différentes lieux:
➔ Dans l’élément head d’une page HTML;
➔ Dans l’élément body d’une page HTML;
➔ Dans un fichier .js séparé.

Etude de chaque cas disponible:

● Dans l’élément head d’une page HTML:
mettre le javascript dans l’élément head avant la fermeture de la
partie, en ouvrant une balise html SCRIPT.
● Dans l’élément body d’une page HTML:
mettre le javascript dans l’élément body avant la fermeture de la
partie, en ouvrant une balise html SCRIPT.
● Dans un fichier .js séparé, méthode recommandé notamment dans
le cas de gros projet, qui permet une meilleure maintenabilité du
code grâce à la séparation des langages, on pourra utiliser le
même code javascript dans plusieurs fichiers HTML.
On va devoir lier html et javascript avec la balise source.
Syntaxe et Commentaire
Chaque instruction en javascript doit se terminer par un point
virgule ( ; ).
Pour écrire du texte agrafé par des guillemets (“”) ou (‘’) le texte,
Ce ne serait pas nécessaire pour des chiffres.
Indentation, est une question d’organisation, d'ordre de notre code.
Commenter, laisser des messages ou des indications au sein de
votre code qui sert à expliquer le déroulement de notre code, il ne
sera pas visible pour les navigateurs
Ex: //je suis un commentaire monoligne; /*je suis un
commentaire multiligne*/
Découverte des variables
Une variable est un conteneur qui va servir à stocker
temporairement une information comme un nombre, chaîne de
caractère, ou un texte. Comme son nom l’indique le propre d’une
variable est de pouvoir varier, de pouvoir stocker différente valeur
dans le temps en écrasant à chaque fois sa valeur précédente.
En Javascript on va déclarer une variable avec un mot clef “var”
qui va être suivi du nom de notre variable.
Chaque nouvelle variable doit avoir un nom unique qu’on appelle
en anglais Identifiant, pour identifier plus précisément chaque
variable.
Le nom des variables en javascript observe différente règles:
● doit commencer par une lettre
● peut contenir que des lettre non accentué
● des chiffres ou des signes index cor.
Les types de valeurs des variables
Les variables peuvent contenir plusieurs types de valeurs. On peut
avoir différentes valeurs en chiffre, en chaîne de caractère ou en
texte.
● Type de valeur number, qui va contenir toute variable
nombre ou chiffre (positive ou négative)/(entier ou en
virgule); on utilise ni guillemet ni apostrophe.
● Type de valeur string, les chaînes de caractère c'est-à-dire
texte, entourez le chaine de caractère par guillemet ou
apostrophe, qui nous permet de définir que ce variable est
un valeur string.
● Type de valeur booléen, en algèbre un booléen est un valeur
soit 0 et 1, en informatique la valeur d’un variable de type
booléen est soit OUI ou NON.NB: Sans guillemet et sans
apostrophe
● Type de valeur "NULL" et "undefined", Null qui correspond à
la valeur nulle, non connaissance de la valeur; "undefined"
qui correspond au fait de ne pas définir une valeur dans
notre variable.
● NB: on peut nommer une nouvelle valeur d’un variable
déclaré déjà, cependant la nouvelle valeur du variable
écrasera l’autre.
● Une fonction typeof, nous permet de tester un type que
contient une variable.
● APPLICATION
<script>
var x = 25;
var y = -75;
var z = 3.14;

var prenom = "Pierre";

var nom = "Giraud";
var sexe = "Je suis un homme";

var dpt = "je vis dans le \"83\"";

var dpt2 = 'je vis dans le "83"';
var ville = 'J\'habite à Toulon';
var ville2= "J'habite à Toulon";

var a =true, b = false;

var c = "true";

var n = null;
var u = undefined;
var nn = NaN;

x = "quatre";

alert("variable x : " + typeof(x) +

"\nvariables y : " + typeof(y) +
"\nvariables a : " + typeof(a) +
"\nvariables n : " + typeof(n) +
"\nvariables u : " + typeof(u) +
"\nvariables nn : " + typeof(nn));
</script>

Opérations Sur les variables

Le base des variables en javascript est de pouvoir les manipuler
facilement et faire des opérations entre variables.
Pour les variables stockants number, on peut faire des opérations
mathématiques c'est-à- dire des calculs (additions, soustraire,
multiplier).
Application
<script>
var x = 5, y = 10, Z = -2;

/*x = x + 1;
x += 2; // x = x + 2
x -= 3; // x = x - 3
x = x - 2;

y = y * 2;
y *= x; // y = y * x;
y /= 2; // y = y / 2;

y %= x; //y = y % X.

var mult = x * y;
var divi = y / Z;
var mod = 13 % 3;*/
var priorite = x + y / ( 4 + Z) % 3;
alert /*("variable mult : " + mult +
"\nvariable divi : " + divi +
"\nvariables mod : " + mod);*/
(priorite);
</script>
La concaténation
signifie mettre bout à bout deux chaînes de caractère pour former une
troisième nouvelle, c’est additionner des chaînes de caractères.
On va concaténer avec le signe PLUS (+) en javascript.
NB: Si on concaténé un chaine de caractère plus une variable number,
tout ce qui suit la chaîne de caractère s'affiche comme chaîne de
caractère.

alert("variable x : " + x + typeof(x) +

"\nvariable y : " + y +
"\nvariable z : " + z);
/*var prenom = 'pierre', espace = ' ', nom = 'Giraud';
var moi = prenom + espace + nom;
var toi = 'victor' + ' ' + 'Giraud';

var sport = 'courir';

var hobbie = "j'aime" + sport;

alert("Contenu de la variable moi : " + moi +

"\nContenu de la variable toi : " + toi +
"\nContenu de la variable hobbie : " + hobbie);*/

</script>

Présentation des conditions

Les conditions en JavaScript nous permettent de réaliser des actions

dans des paramètres qui permettent une interaction.

● Présentation des comparaisons

Symbole Signification

== Est égal à (en valeur)

!= Est différent de (en valeur)
=== Est égal à (en valeur et en type)
!== Est différent de ( en valeur ou en type )
< Est Strictement inférieur à
<= Est inférieur ou égal à
> Est Strictement supérieur à
>= Est Supérieur ou égal à
<script>
var x = 7, y = 14;

var vrai = x < y;

var faux = 14 <= 7;

var egalval = 4 == "4";

var egalvaltype = 4 === "4";

var difval = 4 != "4";

var difvaltype = 4 !== "4";

alert("vrai stocke : " + vrai +

"\nfaux stocke: " + faux +
"\negalval stocke : " + egalval +
"\negalvaltype stocke : " + egalvaltype +
"\ndifval stocke : " + difval +
"\ndifvaltype stocke : " + difvaltype);
</script>

● Conditions if, if...else, if…else if, if...else

if, signifie “si”
var heure = 15;

if (heure <= 18 == true){

alert("Bonjour");
}
if...else, si....sinon nous permet d’exécuter l’action si on a la valeur
attendu et sinon quand on avait pas la valeur attendu;
var heure = "neuf";
if (typeof (heure) == "number" == true) {
if (heure < 12 == true) {
alert("C'est le matin");
}
else if (heure == 12 == true) {
alert("Il est midi");
}
else if (heure <= 18 == true) {
alert("C'est l'aprés midi");
}
else {
alert("C'est le soir");
}
}
else {
alert("Mauvais type de valeur")
}
/*var heure = 21;

if (heure <= 18 == true){

alert("Bonjour");
}
else{
alert("bonsoir");
}*/

Les opérateurs logiques

Nous avons trois opérateurs logique que nous pouvons utiliser:

Opérateur Logique Symbole

ET (AND) &&
OU (OR)
||

NON !
On va pouvoir utiliser ces opérateurs logiques au sein des conditions
pour effectuer plusieurs comparaisons. Donc plus précisément
l’opérateur logique va nous permettre de créer un intervalle de
comparaison pour une variable.
● Opérateur logique ET/&&
<script>
var heure = 19;
if (heure >= 0 && heure < 12 == true) {
alert("C'est le matin");
}
else if (heure === 12 == true) {
alert("Il est midi pile");
}
else if (heure > 12 && heure <= 24 == true) {
alert("C'est l'après midi ou le soir");
}
else{
alert("La valeur entrée ne semble pas valide");
}
</script>

● Opérateur logique OU/ | |

● Opérateur logique !
<script>
var heure = 26;
if (!(heure <= 16) == true){
alert("Il est plus de 16h");
}
else{
alert("Il est moins de 16h");
}
</script>

Evaluation / Simplification Des Conditions

C’est la simplification de nos écritures de conditions et comprendre
l’évaluation de javascript
SIMPLIFICATION:
<script>
var heure = 18
if (!(heure < 12)){
alert("Il est midi passé");
}
/*if (heure < 12 == false){
alert("Il est midi passé");
}*/
</script>
Une valeur peut évaluer comme true ou false même sans opérateur de
comparaison par le javascript. Ainsi toutes valeurs différentes nul ,
indéfinie, none , 0 , et la zone de caractère vide soit évalué par défaut
par le javascript à true.
<script>
var x =6, y = "";
if (x){
alert("X est évalué à true par le javascript");
}
if (y){
alert("Y est évaluée à true");
}else{
alert("Yest évaluée à false");
}

</script>

Les Conditions Ternaires

Correspond à un très raccourci des conditions. Pour construire une
ternaire on va utiliser le ?.
<script>
var heure = 12, bon = "";

bon = (heure <= 18) ? "Bonjour" : "Bonsoir";

alert(bon);
/* if (heure <= 18) {
bon = "bonjour";
}
else{
bon = "Bonsoir";
}
alert(bon);
</script>
Le Switch
Présentation du switch et exemple:
Instruction de type switch, est une semblable à une condition dont on va
pouvoir générer autant d’issue que l’on souhaite, ces issues appelées
case.
ATTENTION:A une limite important du switch, ces instructions ne peut
traiter que l’égalité des valeurs et non pas l’inégalité
<script>
var heure = 10 ;

switch(heure){
case 8 :
alert("Il est 8h");
break;
case 9 :
alert("Il est 9h");
break;
case 10 :
alert("Il est 10h");
break;
case 11 :
alert("Il est 11h");
break;
case 12 :
alert("Il est 12h");
break;
default :
alert("Rien à afficher pour cette valeur");
}
</script>

Les boucles
Les boucles nous permettent d’exécuter un bloc de codes une certaine
fois tant qu’une certaine condition ne soit pas remplie.
l'exécution continue tant que nous n’aurons pas eu la valeur du variable
exécuter.
While: Qui signifie tant que;
<script>
var heure = 0;

while(x < 10){

alert('X contient la valeur : ' + x);
x++;
}
</script>
Incrémentation et décrémentation:
L’incrémentation et la décrémentation peuvent être prioritaires par
rapport au variable déclaré (l’opération); de même qu’il peut aussi être le
contraire.
EX:
<script>
var x = 0, xprime = 0, alpha = 10, alphaprime = 10;

var y = x++;
var beta = alpha--;

var yprime = ++xprime;

var betaprime = --alphaprime;

alert(" y : " + y +
"\nx : " + x +
"\nbeta : " + beta +
"\nalpha : " + alpha +
"\nyprime : " + yprime +
"\nxprime : " + xprime +
"\nbetaprime : " + betaprime +
"\nalphaprime : " + alphaprime);
</script>

Do...While: qui signifie, faire tant-que.

Contrairement au boucle while (tant que le test n’est pas vrai, l’opération
ne passe pas) ; le boucle Do...while passe une seule fois sur l’opération
même si la boucle est fausse.
<script>
var x = 0;

do{
alert(" x vaut : " + x);
x--;
}
while (x > 10);
</script>
For: signifie pour, va nous permettre de répéter une série d'instructions
à partir d’une valeur donnée jusqu’à une certaine valeur seule.Il est plus
utilisé en javascript parce que qu’il est plus simple à écrire, lisible et la
plus performante.
initier un variable > poser la condition > incrémenter et décrémenter.
<script>
var i = "";

for(i=0; i < 10; i++){

alert("i contient la valeur : " + i);
}
</script>

Les Fonctions
Une fonction correspond à une bloc de code dont le but est d'effectuer
une tâche précise.
Ex: alert(“”); : qu’on a utilisé dans les exemples précédents, pour afficher
des messages dans des boîtes de dialogue.
Une fois la fonction créée, on n’a besoin que de l’appeler et non d'en
écrire une autre.
On peut dissocier deux grandes types de fonction en javascript: fonction
native d’une part et les fonctions qu’on va créer par nous même.
Fonction native, créer par d’autres développeurs et instaurer par le
langage javascript lui-même.
Ex: alerte, nous l’appelons pour l'utiliser, nous n'avons jamais défini son
code.
Cependant nous aurons à créer des tâches qui seront à notre besoin.
Pour créer une fonction:

function nom-de-la-fonction(paramètre){
le code qui va s'exécuter quand on va appeler notre fonction
}
Les fonctions n’ont pas obligatoirement besoin de paramètre mais les parenthèses sont
obligatoires.Dans les paramètres nous avons ce qu’on appelle témoin et argument.
function multiplication(x,y){
return x * y;
alert("Ce message ne sera jamais affiché");
}
var resultat1 = multiplication(5,10);
var resultat2 = multiplication(-4,60);
resultat1 += 2;
alert(resultat1);

Découvertes des objets:

En javascript quasiment tout est en objet, les variables , les fonctions, les tableaux,
les expressions régulières…
Un objet en javascript va contenir un ensemble de propriétés et de méthodes qui
vont définir ce qu’est un objet en javascript. Les propriétés en javascript peuvent être
assimilées à des variables.
Une propriété est constituée d’un nom et une valeur, séparé par deux points (:);
Les méthodes sont assimilées à des fonctions javascript.Ils vont être stockés dans
des propriétés.
<script>
var primitive = "Je suis une valeur primitive";

var moi = {
prenom : "Pierre",
nom : "Giraud",
age : 25,

identite : function(){
return 'Prénom : ' + this.prenom +
'\nNom : ' + this.nom +
'\nAge : ' + this.age;
}
}

alert(moi.identite());
</script>
Valeurs Primitives et objets:
En javascript, il existe des objets natifs,c'est-à-dire ceux qui possèdent déjà des
propriétés et méthodes, et sont prés pour l’emploi.
Quelques un de ces objets:
string(ch. caractère), number(nombre),booléen,array.
Les valeurs primitives sont de formidable simplification qui sont ajoutées dans le
javascript pour simplifier, alléger.(Ils sont traités comme des objets).
<script>
var primitive = "Je suis une valeur primitive";
var longueur_prim = primitive.length;
var maj_prim = primitive.toUpperCase();

var chaine = new String("Je suis un objet");

var maj_chain = chaine.toUpperCase();
alert('Longueur de primitive : ' + longueur_prim +
'\nPrimitive en majuscule : ' + maj_prim +
'\nChaine en majuscule : ' + maj_chain);
</script>

Création des Objets:

Trois manières de construire des Objets:
● Utilisant la syntaxe new (object), déconseillé pour des raisons performant du
code:
<script>
var obj_string = new String("Je suis un objet");
var obj_cree = new Object();

obj_cree.prenom = "Pierre";
obj_cree.nom = "Giraud";
obj_cree.age = 25;

alert(obj_cree.prenom);
</script>
● Créer un objet littéral, recommandé pour créer un objet et c’est la manière la
plus simple:
<script>
var moi = {
prenom : 'Ndiawar',
nom : 'DIOP',
age : '24',
id: function() {
return this.prenom + ' ' + this.nom
}
};
alert(moi.id());
</script>
● Créer un objet à partir d’un constructeur:crée d’abord un constructeur et créer
l’objet à partir de ce constructeur.Notre constructeur va lui-même contenir des
méthodes et des propriétés, que va imiter l’objet.
Le constructeur est une fonction qui va être déclarée avec le mot clef
“function”, ensuite dans cette fonction, nous allons définir des propriétés et
des méthodes.
<script>
function identite(p,n,a){
this.prenom = p;
this.nom = n;
this.age = a;
}

var Ndiawar = new identite("Ndiawar", "Diop", 25);

var BCMID = new identite("BCMID", "Diop", 24);

alert('Age de Pierre: ' + Ndiawar.age +

'\nAge de BCMID: ' + BCMID.age);
</script>
● Remarque sur l’identité des objets: ils sont reconnus par des
références et non par des valeurs comme les primitives.
<script>
function identite(p,n,a){
this.prenom = p;
this.nom = n;
this.age = a;
}

var Ndiawar = new identite("Ndiawar", "Diop", 25);

var BCMID = Ndiawar;

BCMID.prenom = 'dsfjkl';

alert('Prenom de Ndiawar: ' + Ndiawar.prenom +

'\nPrénom de BCMID: ' + BCMID.prenom);
</script>

Les Méthodes de l’objet String:

L’objet string est l’objet qui gère les chaînes de caractères.Il est caractérisé
par trois(3) propriétés et plus de vingtaine de méthodes.
Les propriétés de l’objets string:
Length: qui va nous permettre de connaître la longueur d’une chaine de
caractère;
Prototype: qui nous permet d’ajouter de nouvelles propriétés ou méthodes à
un objet;
Constructeur: qui va retourner la fonction qui a créé le prototype de l’objet
string.
Les méthodes couramment utilisées de l’objet String, les deux méthodes
suivants nous permet de changer une chaine de caractère en minuscule ou
en majuscule, ne vont pas se nécessiter de paramètre pour fonctionner:
La méthode ToLowercase, La méthode ToUpperCase:
<script>
var texte = "J'apprend le JAVASCRIPT";

var texte_min = texte.toLowerCase();

var texte_maj = texte.toUpperCase();

alert('Texte de Base : ' + texte +

'\nTexte en miniscule : ' + texte_min +
'\nTexte majuscule : ' + texte_maj);
</script>

La méthode charAt, qui va retourner le caractère situé à une position donnée,

cette méthode va prendre comme paramètre obligatoire une position.
le compte commence par 0 et tous les caractères du string vont partir du
compte (espace, spéciaux…)
<script>
var texte = "J'apprend le JAVASCRIPT";

var pos0 = texte.charAt(0);

var pos3 = texte.charAt(3);
var pos11 = texte.charAt(11);

alert('Position 0 : ' + pos0 +

'\nPosition 3 : ' + pos3 +
'\nPosition 11 : ' + pos11);
</script>
La méthode Indexof et lastindexof:
Indexof, va retourner la première position à laquelle un caractère ou séquence
de caractère donné a été retrouvé dans une chaîne, on parlera de première
occurrence du caractère ou séquence de caractère.
lastindexof, va retourner la dernière position à laquelle un caractère ou
séquence de caractère donné a été retrouvé dans une chaîne.
ils auront besoin de paramètre, qui va être le caractère ou la chaîne à
rechercher.
Si le position n’est pas retourné, il donne un résultat (-1), qui montre que c’est
pas trouvé.
<script>
var texte = "J'apprend le JAVASCRIPT";

var premiere = texte.indexOf('p');

var derniere = texte.lastIndexOf('p');
var sequence = texte.indexOf('le');
alert('Première "p" trouvé en position : ' + premiere +
'\nDernier "p" trouvé en position : ' + derniere +
'\nPremier "le" trouvé en position : ' + sequence);
</script>
Nb: Un paramètre facultatif peut être ajouté à cette méthode, pour indiquer
une position là où on peut démarrer la recherche et les caractères précèdent
de la recherche seront comptés.
<script>
var texte = "J'apprends le JAVASCRIPT";

var premiere = texte.indexOf('J', 1);

var derniere = texte.lastIndexOf('p');
var sequence = texte.indexOf('le');

alert('Un "J" majuscule trouvé en position : ' + premiere +

'\nDernier "p" trouvé en position : ' + derniere +
'\nPremier "le" trouvé en position : ' + sequence);
</script>
La Méthode Replace, va nous permettre de recherché un caractère et de le
remplacer par une autre.
<script>
var texte = "J'apprends le JAVASCRIPT";

alert(texte.replace("JAVASCRIPT", "PHP"));
</script>
La méthode slice, qui va extraire une partie d’une chaîne et la mettre comme
nouvelle chaine.Il a besoin de deux paramètres, la position de début et la
position de fin de l'extradition.
<script>
var texte = "J'apprends le JAVASCRIPT";

var texteTronque = texte.slice(0, 10);

alert(texte.slice(0, 10));
</script>

On peut tronquer de -1, pour récupérer le dernier mot dans la chaîne, en

trichant par un espace(‘ ‘):
<script>
var texte = "J'apprends le JAVASCRIPT ";
var texteTronque = texte.slice(-11, -1);

alert(texte.slice(-11, -1));
</script>

La méthode trim, va supprimer les espaces superflus en début et en fin de

chaîne, il n’a besoin d'aucun paramètre pour fonctionner:
<script>
var texte = " J'apprends le JAVASCRIPT ";

var texteNettoye = texte.trim();

alert('Avant Trim : ' + texte +

'\nAprés Trim : ' + texteNettoye);
</script>

Objet Number: Méthodes, Propriété.

Sert à gérer les objets nombres: Propriété et méthode.
Nous préférons utiliser les valeurs primitives, plutôt de créer un nouvel objet
de type number mais on peut utiliser des propriétés et des méthodes sur des
valeurs primitives de type number.
Il possède 5 propriétés qui lui appartiennent exclusivement c’est à dire qu’on
peut l’utiliser uniquement sur l’objet number et non sur d’autres objets.
Propriétés:
MIN_VALUE et MAX_VALUE, qui vont respectivement retournée le plus petit
et plus grande nombre possible en javascript;
NEGATIVE_INFINITY et POSITIVE_INFINITY, qui vont pointer l’infini côté
négatif et côté positif;
NaN, qui représente une valeur qui n’est pas une nombre.
<script>
var min = Number.MIN_VALUE;
var max = Number.MAX_VALUE;
var infneg = Number.NEGATIVE_INFINITY;
var infpos = Number.POSITIVE_INFINITY;
var notnumber = Number.NaN;

alert('Min : ' + min +

'\nMax : ' + max +
'\nInfinity Négatif : ' + infneg +
'\nInfinity Positif : ' + infpos +
'\nPas un nombre : ' + notnumber);
</script>
Méthodes:
ToString,La méthode toString() renvoie une chaîne de caractères représentant
l'objet
<script>
var x = 10;

var t = x.toString();

alert('Type x : ' + typeof(x) +

'\nType t : ' + typeof(t));
</script>

ToFixed, renvoie nombre de décimal utilisé en chaîne de caractère;

Une chaîne de caractères qui représente le nombre indiqué avec une notation à
point fixe.
<script>
var x = 10.4531;

var d = x.toFixed(2);

alert('Valeur de d : ' + d +
'\nType de d : ' + typeof(d));
</script>

ToPrecision,La méthode toPrecision() renvoie une chaîne de caractères

représentant un nombre avec la précision donnée.
<script>
var x = 10.4531;

var d = x.toPrecision(3);

alert('Valeur de d : ' + d +
'\nType de d : ' + typeof(d));
</script>

ToExponential, la méthode toExponential() renvoie une chaîne de caractères,

représentant l'objet Number en notation exponentielle.
<script>
var x = 10.4531;

var d = x.toExponential(3);

alert('Valeur de d : ' + d +
'\nType de d : ' + typeof(d));
</script>

Quelques méthodes globales: javascript contient des fonctions globales, qui peuvent
être utiles à tous les types de données.Certaines de ces fonctions peuvent être
utilisées comme des méthodes avec des données de type number notamment.
Function number, Function parsefloat, Function parseint;
La méthode Number, qui va être utilisé pour convertir certaine variable javascript en
nombre comme des booléens ou des variables de types DATE:
<script>
var t = true;
var f = false;
var d = new Date();

alert('True : ' + Number(t) +

'\nFalse : ' + Number(f) +
'`\nDate : ' + Number(d));
</script>

La méthode ParseFloat et ParseInt, qui vont retourner respectivement un nombre

entier et un nombre entier ou décimal à partir d’une chaine de caractère.
<script>
var x = "10.4531";

var int = parseInt(x);

var dec = parseFloat(x);

alert('ParseInt() : ' + int + ' - ' + typeof(int) +

'\nParseFloat() : ' + dec + ' - ' + typeof(dec));
</script>

Objet Array
L'objet global Array est utilisé pour créer des tableaux. Les tableaux sont des
objets de haut niveau (en termes de complexité homme-machine) similaires à des
listes.
Array, est un type de variable spécial qui peut contenir plusieurs valeurs.Il possède
ces propres propriétés et méthodes.
Un indice ou une clé numérique unique va être automatiquement indexé à chaque
valeur du tableau. La première valeur va être indexée par l’indice ou la clé ZÉRO
0.L’association automatique d’une clé numérique est une valeur, est très pratique
pour cibler et pour travailler pour chaque valeur du tableau.
Syntaxe: New Array();
autre méthode pour créer un tableau:
var prenoms = ['Pierre', 'Victor', 'Julia', 'Claire'];

alert(prenoms[2]);//Victor
pour mettre des valeurs textuelles dans un tableau on met le texte entouré des
guillemets et apostrophes et si on veut mettre un nom dans tableau les guillemets et
apostrophes sont pas nécessaire.
Pour récupérer, une valeur dans un tableau, on cite l’index du clé dans le tableau.
Pour modifier, on appelle la clé du valeur du tableau à modifier et changer la valeur.
<script>
var prenoms = ['Pierre', 'Victor', 'Julia', 'Claire'];

prenoms[0] = 'Paul';

alert(prenoms[0]);//Victor
</script>

Pour connaître le nombre d’éléments se trouve dans une tableau:

alert('Notre Tableau Contient : ' + prenoms.length + '

éléments');//Victor
</script>

Pour Ajouter un élément en fin de tableau:

prenoms[prenoms.length] = 'Florian';
prenoms[prenoms.length] = 'Chloé';

alert('On a ajouté : ' + prenoms[4] +' et ' + prenoms[5] + ' à

notre tableau ');//ajout valeur au tableau
</script>

Pour parcourir un tableau est affiché tous ces éléments, on utilise boucle for qui
permet de parcourir chaque valeur dans une tableau et length à l’intérieur de cette
boucle pour sortir dans cette boucle à tout moment.
<script>
var prenoms = ['Pierre', 'Victor', 'Julia', 'Claire'], p = '';

for(var i=0; i < prenoms.length; i++){

p+= 'Prenom n°' + (i+1) + ' : ' + prenoms[i] + '\n';
}
alert(p);
</script>

Pour créer un tableau associatif, on utilise un objet littéral.

Un objet littéral n’est pas un objet de type Array, les propriétés et méthodes de type
Array ne fonctionnent pas avec les objets littéraux.
<script>
var prenoms = {
prenom1 : 'Pierre',
prenom2 : 'Victor',
prenom3 : 'Julia',
prenom4 : 'Claire'
};

alert(prenoms.prenom1);
</script>

Pour parcourir un objet littéral est affiché ces valeurs, on utilise une nouvelle boucle
for (…...in), cette boucle va parcourir ces objets idéales selon ces clés en utilisant un
alias qui est un mot choisi, qui va ensuite remplacer par les différentes clés de notre
objet.
<script>
var prenoms = {
prenom1 : 'Pierre',
prenom2 : 'Victor',
prenom3 : 'Julia',
prenom4 : 'Claire'
}, p = '';

for(var clefs in prenoms){

p+= clefs + ' : ' + prenoms[clefs] + '\n';
}
alert(p);
</script>

Les Méthodes de l’Objet Array

L’objet Array possède plus de 10 méthodes , ces méthodes puissantes nous
permettent d’effectuer toutes sortes d'opérations sur notre tableau.
La majorité de l’objet Array:
Push, Pour ajouter des éléments en fin de tableau;
<script>
var prenoms = ['Baye', 'Cheikh', 'Mamour', 'Insa', 'Diop'],
p='';

var taille = prenoms.push('Ruhu', 'Lahi');

for(var i=0; i < prenoms.length; i++){

p+= 'Prenom n°' + (i+1) + ' : ' + prenoms[i] + '\n';
}

alert('Le Tableau contient ' + taille + ' éléments : \n\n' +

p);
</script>

Pop,Pour supprimer des éléments en fin de tableau;

var suppr = prenoms.pop();

for(var i=0; i < prenoms.length; i++){

p+= 'Prenom n°' + (i+1) + ' : ' + prenoms[i] + '\n';
}

alert(p + ' \n\nNous avons supprimé ' + suppr + ' Du Tableau');

</script>

En plus de supprimer et d’ajouter des éléments dans un tableau vont

également retourner des informations relatives à notre tableau ainsi la
méthode push, va retourner la taille du tableau tandis que la méthode pop va
retourner dans une chaine de caractère la valeur relative à l’élément
supprimé.
Ces méthodes vont faire double emploi.
Shift et Unshift, sont le contraire de push et pop permettent d’ ajouter
(unshift) et de supprimer (shift), l’élément première dans un tableau, ainsi la
méthode unshift, va retourner la taille du tableau tandis que la méthode shift
va retourner dans une chaine de caractère la valeur relative à l’élément
supprimé.
Shift
<script>
var prenoms = ['Baye', 'Cheikh', 'Mamour', 'Insa', 'Diop'],
p='';

var suppr = prenoms.shift();

for(var i=0; i < prenoms.length; i++){

p+= 'Prenom n°' + (i+1) + ' : ' + prenoms[i] + '\n';
}

alert('Nouveau tableau : \n' + p + '\n\nPrénom Supprimé : ' +

suppr);
</script>
Unshift:
<script>
var prenoms = ['Baye', 'Cheikh', 'Mamour', 'Insa', 'Diop'],
p='';

var taille = prenoms.unshift('Ruhu', 'Lahi');

for(var i=0; i < prenoms.length; i++){

p+= 'Prenom n°' + (i+1) + ' : ' + prenoms[i] + '\n';
}

alert('Notre tableau contient ' + taille + ' prénoms : \n\n' +

p);
</script>

La méthode Splice:
Elle nous permet de supprimer et d’ajouter, un élément n’importe où dans la
tableau, elle a besoin au minimum deux (2) paramètre pour être utilisé, une
paramètre POSITION, à laquelle les éléments vont être ajoutés et combien
d’éléments vont être AJOUTER, vont se placer juste à la place de l’indice
donné.
Après ces deux paramètres obligatoires, on peut ajouter autant d’autres
paramètres qu’on peut insérer de valeurs.
<script>
var prenoms = ['Baye', 'Cheikh', 'Mamour', 'Insa', 'Diop'],
p='';

prenoms.splice(1,0, 'RUHU','Lahi');

for(var i=0; i < prenoms.length; i++){

p+= 'Prenom n°' + (i+1) + ' : ' + prenoms[i] + '\n';
}

alert('Nouveau Tableau :\n\n' +p);

</script>

La méthode sort
Permet de classer les éléments dans un tableau; Elle trie les éléments d’un
tableau selon l’ordre alphabétique de leurs valeurs, les valeurs en majuscules
sont classées avant celle en minuscule.
<script>
var prenoms = ['Baye', 'Cheikh', 'Mamour', 'Insa', 'Diop'],
p='';

prenoms.sort();

for(var i=0; i < prenoms.length; i++){

p+= 'Prenom n°' + (i+1) + ' : ' + prenoms[i] + '\n';
}

alert('Nouveau Tableau :\n\n' +p);

</script>
La méthode Reverse:
Qui va nous permettre d’inverser l’ordre des éléments d’un tableau, classé les
valeurs à l’ordre inverse de l’alphabétisation.
<script>
var prenoms = ['Baye', 'Cheikh', 'Mamour', 'Insa', 'Diop'],
p='';

prenoms.sort();
prenoms.reverse();

for(var i=0; i < prenoms.length; i++){

p+= 'Prenom n°' + (i+1) + ' : ' + prenoms[i] + '\n';
}

alert('Nouveau Tableau :\n\n' +p);

</script>
La méthode Join:
Qui va retourner les différentes valeurs d’un tableau sous forme de chaîne de
caractères.On peut choisir les types de séparateurs voulues entre les
différentes valeurs du tableau comme un espace, un virgule etc.Cette
méthode va prendre la séparateur en argument.
NB: cette méthode ne modifie pas le tableau, mais renvoie une chaîne de
caractère créé à partir de notre tableau. Notre variable tableau reste inchangé
et non modifié après l’utilisation de la méthode join.
<script>
var prenoms = ['Baye', 'Cheikh', 'Mamour', 'Insa', 'Diop'],
p='';

var chaine = prenoms.join('/');

for(var i=0; i < prenoms.length; i++){

p+= 'Prenom n°' + (i+1) + ' : ' + prenoms[i] + '\n';
}

alert('Notre Tableau :\n' + p +

'\n\nLa chaine renvoyée par join() : ' + chaine);
</script>
La méthode Slice:
Nous permettre de créer un nouveau tableau à partir des éléments du tableau
de base. Elle aura besoin de deux paramètres: une position de départ et une
position de fin pour couper. On peut utiliser seul un premier paramètre, celui
de la position de départ.
<script>
var prenoms = ['Baye', 'Cheikh', 'Mamour', 'Insa', 'Diop'],
p='';

var serign = prenoms.slice(0,4);

for(var i=0; i < prenoms.length; i++){

p+= 'Prenom n°' + (i+1) + ' : ' + prenoms[i] + '\n';
}

alert('Notre Tableau de base :\n' + prenoms +

'\n\nLe tableau créé par slice() : ' + serign);
</script>
La méthode concat:
Qui va nous permettre de concaténer différents tableaux c'est-à -dire de les
fusionner pour en créer un nouveau. On peut modifier autant de tableaux
qu’on veut sans que les tableaux de base ne soient modifiés.
<script>
var garcons = ['Pierre', 'Victor', 'Florian'];
var filles = ['Julia', 'Claire'];
var animaux = ['Bubulle', 'Minouche']

var fusion = garcons.concat(filles, animaux);

alert('Contenu de notre fusion : \n ' + fusion);

</script>

L’OBJET DATE:
L’objet DATE, est un objet native en javascript qui va nous permettre de
manipuler bien évidemment des dates. Ils peuvent être écrits littéralement soit
sous forme de chaînes de caractères soit sous forme de timestamp (Le
Timestamp Unix correspond au nombre de secondes écoulées depuis le premier
janvier 1970 à minuit UTC ou GMT (c’est-à-dire minuit selon l’heure de Londres).)
● Date actuelle;
Sous forme littéral, on utilise la fonction constructeur Date().
Sous forme de nombre milliseconde, on va utiliser la méthode Now() de l’objet
Date = Date.Now();
<script>
var datlit = Date();
var dateMS = Date.now();
alert('Date littéral : ' + datlit +
'\nDate en milliseconde : ' + dateMS);
</script>
Pour créer un objet de type date nous serons obligés d’utiliser le constructeur
Date avec le mot clé new().
1 exemple création avec new date ();
<script>
var d = new Date();

alert(d);
</script>
</body>
2 exemple;date littéral en argument notre constructeur Date(date en anglais et
au bon format pour que javascript reconnais.
<script>
var d = new Date("August 12, 2021 19:55:00");

alert(d);
</script>
3 exemple, un nombre en argument de notre constructeur, par milliseconde
écoulé depuis 1970
<script>
var d = new Date(604800000);

alert(d);
</script>
4 exemple,créer un objet de type Date en indiquant 7 nombres comme
argument pour notre constructeur Date: (7 nombres=AAAA,MM,JJ)
<script>
var d1 = new Date(2021,8,12,12,30,28,110);

var d2 = new Date(2021,8,12);

alert('Date 1 : ' + d1 +
'\nDate 2 : ' + d2);
</script>

Il existe plusieurs écritures valident lorsqu’on précise une Date littéral en

javascript, donc le javascript reconnaît en effet quatre grand types de format
de date littéral: format ISO, format court, format long, format complet.
<script>
var diso1 = new Date("2021-08-12");
var diso2 = new Date("2021-08-12T12:00:00");

var dcourte = new Date("06/05/2021");

var dlongue = new Date("August 12 2021 09:00:00");

var dcomp = new Date("Sun Jan 25 2015 09:00:00 GMT");

alert('Date ISO courte : ' + diso1 +

'\nDate ISO longue : ' + diso2 +
'\nDate courte : ' + dcourte +
'\nDate Longue : ' + dlongue +
'\nDate complet : ' + dcomp);
</script>
Les Méthodes de l’objet Date:
Deux ensemble de méthodes avec les getters d’un côté et les setters d’autre
côté.
Les getters vont être des méthodes qui récupèrent une information relative à
une date.(get…();)
<script>
var d = new Date();

var des = d.getTime();

var dy = d.getFullYear();
var dmo = d.getMonth();
var ddate = d.getDate();
var dday = d.getDate();

var dh = d.getHours();
var dmi = d.getMinutes();
var ds = d.getSeconds();
var dMs = d.getMilliseconds();

alert('Nous sommes le : ' + ddate +'/'+ dmo +'/'+ dy +

'\nIl est actuellement : ' + dh +':'+ dmi +':'+ ds
+':'+ dMs);
</script>

Les setters vont être des méthodes pour définir une date.(set…();)
Notez que ce système de « getters » et de « setters » n’est pas propre à l’objet Date
en JavaScript mais est une convention partagée par de nombreux langages de
programmation.
<script>
var d = new Date();

d.setFullYear(2021,8,13);
d.setHours(19);
d.setMinutes(39);
d.setSeconds(25);

alert('Date définie : ' + d);

</script>
Formater une date pour afficher en francais:
<script>
var d = new Date();

var dy = d.getFullYear();
var dmo = d.getMonth();
var dday = d.getDay();
var ddate = d.getdate();
var dh = d.getHours();
var dmi = d.getMinutes();
var ds = d.getSeconds();
var mois = ['janvier','février', 'mars', 'avril', 'mai',
'juin', 'juillet', 'aout', 'septembre', 'octobre', 'novembre',
'décembre'];
var jour = ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi',
'vendredi', 'samedi'];

alert('Le : ' + jour[dday] + ' ' + ddate + ' ' + mois[dmo] + '
' + dy +
'Il est : ' + dh +'h ' + dmi +'mn et ' + ds +'s. ');
</script>
</body>

L’objet MATH et ses méthodes:

Il va nous permettre de réaliser plusieurs opérations sur des nombres, il ne
possède pas de constructeur et qu’ainsi nous ne créerons pas d’objet de type
MATH, mais des méthodes sont appliquées à l’objet math.
La méthode random, va retourner un nombre décimal aléatoire entre 0 et 1;
<script>
var x = Math.random();
var y = Math.random();

alert('Le contenu de x : ' + x +

'\nLe contenu de y : ' + y);
</script>

La méthode Round, qui va permettre d’arrondir un nombre donné ;

alert('Le contenu de x : ' + x +

'\nLe contenu ARRONDI de X : ' + y);
</script>
La méthode floor et ceil, permettent d’arrondir un entier décimal mais un
entier inférieur pour la méthode floor et entier supérieur pour la méthode ceil;
<script>
var x = Math.random()*1000;
var inf = Math.floor(x);
var sup = Math.ceil(x);

alert('Le contenu de x : ' + x +

'\nARRONDI de inférieur de X : ' + inf +
'\nARRONDI supèrieur de x : ' + sup);
</script>
La méthode Min et Max, permettant de retourner respectivement le nombre
le plus petit et le nombre le plus grand parmi une série de nombre, vont
prendre autant d'arguments qu’il y’a de nombres à réaliser;
<script>
var min = Math.min(0, -10, 200, 75, 25);
var max = Math.max(0, -10, 200, 75, 25);

alert('Plus petite nombre : ' + min +

'\nPlus grand nombre : ' + max);
</script>
La méthode Abs, permettant de retourner la valeur absolue d’un nombre,
valeur positive d’un nombre;
<script>
var x = 2;
var y = -10;

var absx = Math.abs(x);

var absy = Math.abs(y);

alert('Valeur de x : ' + x + ', Valeur absolue de x : ' + absx

+
'\nValeur de y : ' + y + ', Valeur absolue de y : ' +
absy);
</script>
Autres méthodes de l’objet MATH/
La méthode .E ou .POW (exposant), .SQRT (racine carré),.COS (pour le
cosinus), SIN (pour le sinus), .PI ( pour valeur pi, soit environ 3,14159);
<script>
var x = 5, y = 3, z = 0.5;

var power = Math.pow(x,y);

var rac = Math.sqrt(x);
var cos = Math.cos(z);
var sin = Math.sin(z);
var pi = Math.PI;

alert('Resultat de pow() : ' + power +

'\nRacine de 5 : ' + rac +
'\nCosinus de 0.5 : ' + cos +
'\nSinus de 0.5 : ' + sin +
'\nApproximation de PI : ' + pi);
</script>

La Portée En Javascript:
Désigne la possibilité d'accéder ou non à certaine variable, fonction ou
objet contenu à l’intérieur de variable.
Les variables peuvent définir soit localement ou globalement. Une
variable est dite local si il est enregistré sur une fonction, il est joignable
que localement un endroit spécifique dans le script.
<script>
function locale(){
var x = 5;
alert(x);
}
locale();
</script>
Une variable globale est définie dans l’espace global d’un script. C’est à
dire qu'en dehors de toute fonction, il va avoir une portée globale et va
être accessible dans tout le script.
<script>
var x = 4
function locale(){
alert(x);
}
locale();
alert(x);
</script>
Il est généralement interdit de constituer des variables globales dans le
contexte local, pour des clartés dans le script, pour bien énumérer et de
savoir chaque variable appartient à cette fonction dans le
script(Lisibilité).
<script>
var x = 4
function locale(){
var x = 7
return x;
}
locale();
alert('X globale : ' + x +
'\nX local : ' + locale());
</script>
Les Fonctions Anonymes:
Comme son nom l’indique, ce sont des fonctions sans nom.
<script>
var carre = function(x) {
alert('Carré de ' + x + ' = ' + x*x);
};

var y = prompt('Entrez un nombre');

carre(y);
</script>
Les Fonctions AUTO-INVOQUÉES
Des fonctions qui vont s’appeler ou encore s'exécuter eux même, pour
créer un auto-invoquées à partir d’une fonction, il va falloir ajouter un
premier couple de parenthèses autour de la fonction et un seconde
après la fonction.
Les closures en JavaScript
Une closure ou une fermeture est une fonction qui va récupérer et
pouvoir utiliser les variables d’environnement dans lequel elle a été
créée. Il nous permet d’isoler ou d’enfermer une partie du code et de
pouvoir utiliser et de récupérer des variables qui ne sont accessibles
normalement que depuis l’intérieur de ce code.
<script>
function compteur() {
var i = 0;

return function(){
return i++;
}
}

var plusUn = compteur();

alert('Premier Tour : ' + plusUn() +

'\nDeuxième Tour : ' + plusUn() +
'\nTroisième Tour : ' + plusUn());
</script>

Découverte Du DOM HTML:

(Document Object Model) est séparé en trois (3) partie:partie XML,
partie HTML, et une partie cœur (accessible pour XML et HTML).
Il va être créé automatiquement par le navigateur au chargement de la
page.
DOM HTML, est un standard de programmation reconnu par tous, gère
les éléments HTML comme des objets, ainsi ces éléments possèdent
des propriétés et des méthodes.
DOM HTML,va permettre de déclencher ce qu’on appelle des
événements( à voir=permet de créer une dynamisme dans notre page
web).
La structure du DOM HTML, tout dans une page HTML va se considérer
comme un nœud ou node. Node est un terme générique qui sert à
désigner tous les objets contenus dans le DOM. Tous les objets
appartenant à un DOM sont noeud ou un node, il y a plusieurs types de
nœuds qui correspondent aux différents objets HTML: type element
node(element html), type text node(pour le texte)etc.
Le DOM va être construit comme une hiérarchie de nœud de cette
manière on va prendre image comme une arbre pour représenter une
page HTML point de vue du DOM.
Le DOM est une interface de programmation qui nous permet de
manipuler le code HTML d’une page de façon dynamique en utilisant un
langage de script et en l'occurrence du javascript.

Accéder à un élément HTML:

Il existe différentes moyens d’accéder aux éléments HTML, on passe
toujours par l’objet document et non pas par l’objet element:
La méthode getElementById: est une méthode de l’objet document, va
nous permettre de cibler un élément HTML possédant un ID.
<body>
<h1 id="gros_titre"> Découverte du DOM HTML</h1>
<P>Du texte et <a href="http://pierre-giraud.com">un lien</a> </P>

var titre = document.getElementById('gros_titre');

alert(titre);
</script>
</body>
getElementsByTagName: donner toutes les informations relatives à tous
les éléments html, exemple élément p dans un tableau, il va prendre le
nom du type de l’élément à récupérer et on récupère l’élément par un
indice.
<body>
<h1 id="gros_titre"> Découverte du DOM HTML</h1>
<P>Du texte et <a href="http://pierre-giraud.com">un lien</a> </P>
<p>Deuxiéme paragraphe</p>

var tableau = document.getElementsByTagName('p');

alert('Notre page contient : ' + tableau.length + '

paragraphes');
</script>
</body>

getElementsByClassName: va nous permettre d’accéder aux éléments

HTML disposant un attribut classe, est une méthode de l’objet
document, il a une similarité avec “getElementsByTagName” renvoie les
informations en tableau.
<body>
<h1 id="gros_titre"> Découverte du DOM HTML</h1>
<P>Du texte et <a href="http://pierre-giraud.com">un lien</a> </P>
<p class="para">Deuxiéme paragraphe</p>

var tableau = document.getElementsByClassName('para');

alert('Notre page contient : ' + tableau.length + ' paragraphes

portant la classe para');
</script>
</body>
QuerySelector et QuerySelectorAll: vont nous permettre d’accéder aux
éléments HTML par des sélecteurs CSS (id, class, attribut…)
QuerySelector, va sélectionner le premier sélecteur élément CSS
sélectionné et va renvoyer ces informations tandis que QuerySelectorAll,
va sélectionner toutes les éléments du sélecteur CSS sélectionné et va
envoyer les informations sur un tableau.Ce sont des éléments de
méthodes document.
<body>
<h1 id="gros_titre"> Découverte du DOM HTML</h1>
<P class="para">Du texte et <a href="http://pierre-giraud.com">un
lien</a> </P>
<p class="para">Deuxiéme paragraphe</p>

alert('Informations dans le lien : ' + lien +

'\n Dans p[0]: ' + p[0] +
'\n Dans p[1] : ' + p[1]);
</script>
</body>
InnerHtml: retourne tout ce qui y’a à l’intérieur d’un élément
HTML,contenu qui se situe à l’intérieur d’un balise (ouvrante et fermant)
<body>
<h1 id="gros_titre"> Découverte du DOM HTML</h1>
<P class="para">Du texte et <a href="http://pierre-giraud.com">un
lien</a> </P>
<p class="para">Deuxiéme paragraphe</p>

alert('Contenu du titre de page : ' + titre_page +

'\nContenu de page : ' + page +
'\nContenu de lien : ' + lien[0]);
</script>
</body>

Modifier du Contenu HTML:

On modifie une propriété HTML en passant par le DOM et les méthodes
d'accès de documents et d’éléments.
La partie sélection:
<body>
<h1 id="gros_titre"> Découverte du DOM HTML</h1>
<P class="para">Du texte et <a href="http://pierre-giraud.com">un
lien</a> </P>
<p class="para">Deuxiéme paragraphe</p>

var textePara = document.querySelector('.para').textContent;

alert('Titre : ' + texteTitre +

'\nParagraphe 1 : ' + textePara);
</script>
</body>
Pour Modifier: InnerHTML, va nous servir à modifier un élément, en
sélectionnant avec innerHTML dans l’élément et mettre le contenu à
modifier.
<body>
<h1 id="gros_titre"> Découverte du DOM HTML</h1>
<P class="para">Du texte et <a href="http://pierre-giraud.com">un
lien</a> </P>
<p class="para">Deuxiéme paragraphe</p>

Ajouter / Insérer des éléments HTML:

Pour créer un nouvel élément en javascript nous utilisons généralement
de l’objet document, cette méthode va prendre en argument le nom de
l’élément HTML que l’on souhaite créer.
<body>
<h1 id="gros_titre"> Découverte du DOM HTML</h1>
<P class="para">Du texte et <a href="http://pierre-giraud.com">un
lien</a> </P>
<p class="para">Deuxiéme paragraphe</p>

var texte = document.createTextNode('Inséré');

newPara.appendChild(texte);

document.body.appendChild(newPara);
</script>
</body>
AppendChild, elle va toujours insérer un objet en tant que dernier enfant
de type de l’élément indiqué;
Parfois, on voudra insérer un élément dans une position précise dans
notre page HTML.
<body>
<h1 id="gros_titre"> Découverte du DOM HTML</h1>
<P class="para">Du texte et <a href="http://pierre-giraud.com">un
lien</a> </P>
<p class="para">Deuxiéme paragraphe</p>

var texte = document.createTextNode('Inséré');

newPara.appendChild(texte);

var para1 = document.querySelector('.para');

document.body.insertBefore(newPara, para1);
</script>
</body>
Modifier / Supprimer des éléments HTML
Pour retirer un élément HTML d’une page en javascript, la méthode
removechild est une méthode de l’objet élément, elle va prendre
l’élément à retirer en argument.
<body>
<h1 id="gros_titre"> Découverte du DOM HTML</h1>
<P class="para">Du texte et <a href="http://pierre-giraud.com">un
lien</a> </P>
<p class="para">Deuxiéme paragraphe</p>

parent.removeChild(titre);
</script>
</body>
Pour modifier ou remplacer un élément HTML d’une page JavaScript, on
utilise la méthode replaceChild de l’objet élément. Elle va prendre deux
arguments, la valeur de remplacement et le nom de remplacement.
<body>
<h1 id="gros_titre"> Découverte du DOM HTML</h1>
<P class="para">Du texte et <a href="http://pierre-giraud.com">un
lien</a> </P>
<p class="para">Deuxiéme paragraphe</p>

var nouveauTitre = document.createElement('h2');

nouveauTitre.id = 'Titre_moyen';
nouveauTitre.innerHTML = 'Titre modifié en Js';

parent.replaceChild(nouveauTitre, titre);
</script>
</body>

Naviguer Dans Le Dom:

Nous allons vouloir accéder aux noeuds parents ou aux enfants mais
nous ne pouvons pas le faire directement. Ainsi, il existe des propriétés
spécialisées qui vont nous permettre de nous déplacer entre les nœuds
très simplement.
Nous allons étudier les propriétés suivants:
ParentNode:
Nous permet d’accéder au nœud parent d’un certain nœud et de nous
déplacer dans le DOM de notre page HTML, elle est une propriété
d’objet élément et nous devons l’appliquer à un objet de type élément.
<body>
<h1 id="gros_titre">Le DOM: Navigation</h1>
<div>
<p class="para">Du texte</p>
<p class="para">Un Deuxième paragraphe</p>
</div>
<script>
var p = document.querySelector('.para');
var div = p.parentNode;

div.style.color = 'orange';
</script>
</body>

childNode et nodeValue:
Nous permet d’accéder au noeud d’enfant dans certain noeud HTML, la
propriété va renvoyer un tableau contenant les enfants d’un certain
noeuds, on va soit recupérer tous les enfants à un coup à travers d’une
boucle ou soit accéder à un élément en particulier en passant par une
clé à childNode ou au résultat envoyé par childNode.
NB/-1/ Cependant un nœud élément ne contient pas de texte mais plutôt
des nœuds de type de texte qui contient eux même une valeur qui est
du texte.Pour accéder à ces valeurs textuelles, on doit soit utiliser en
plus la propriété NodeValue (valeur contenu dans un noeud) avec
childNode ou utiliser directement innerHTML ou TextContent.
NB/-2/ Très important pour l'exploitation de ChildNodes, les espaces
dans le code sont considérés comme des nœuds textuels enfants.
<body>
<h1 id="gros_titre">Le DOM: Navigation</h1>

<div>
<p class="para">Du texte</p>
<p class="para">Un Deuxième paragraphe</p>
</div>
<script>
var b = document.body;

var div = b.childNodes[3];

var p1 = div.childNodes[1];

var texte = p1.childNodes[0].nodeValue;

alert(texte);
</script>
</body>
firstChild et LastChild:
Nous permet d’accéder respectivement au premier et au dernier enfant
d’un nœud. Les espaces entre les éléments sont considérés comme du
texte et le texte comme du nœud de type texte.
<body>
<h1 id="gros_titre">Le DOM: Navigation</h1>

<div>
<p class="para">Du texte</p>
<p class="para">Un Deuxième <strong>paragraphe</strong></p>
</div>
<script>
var p2 = document.querySelectorAll('.para')[1];

var premier = p2.firstChild;

var dernier = p2.lastChild;

var inner1 = premier.nodeValue;

var inner2 = dernier.innerHTML;

alert('Le Contenu du première enfant : ' + inner1 +

'\nLe Contenu du dernier enfant : ' + inner2);
</script>
</body>

var inner1 = premier.nodeValue;

var inner2 = dernier.childNodes[0].nodeValue;

var premier = p2.firstChild;
var dernier = p2.lastChild;

var inner1 = premier.nodeValue;

var inner2 = dernier.innerHTML;

alert('Le Contenu du première enfant : ' + premier +

'\nLe Contenu du dernier enfant : ' + dernier);
</script>
</body>
nextSibling et previousSibling:
Nous permet d'accéder respectivement au nœud frère c’est à dire au
nœud de même niveau suivant le nœud ciblé ou précèdent le nœud
ciblé. Ces deux propriétés appartiennent à l’objet élément. Les espaces
sont considérés comme des nœuds textuels.
<body>
<h1 id="gros_titre">Le DOM: Navigation</h1>

<div>
<p class="para">Du texte</p>
<p class="para">Un Deuxième <strong>paragraphe</strong></p>
</div>
<script>
var titre = document.getElementById('gros_titre');

var div = titre.nextSibling.nextSibling;

div.innerHTML = '<p>div totalement modifié</p>';

</script>
</body>

Les Événements En JavaScripts

Ce sont des actions effectuées soit par un utilisateur soit par le
navigateur. Si l’utilisateur clique sur un bouton HTML ou si le navigateur
fait une rafraîchir de la page, on parle d’événement.
On peut créer des actions spécifiques à un événement comme par
exemple modifier la taille des textes d’une page HTML lorsqu’un
utilisateur clique sur un button. Pour faire cela nous utiliserons des
attributs HTML de type événement et ensuite créer en javascript le code
correspondant à l’action qu’on souhaite attaché à notre événement.
Les Attributs les plus utilisés:
OnClick: qui se déclenche lorsque l’utilisateur clique sur un élément;
OnMouseOver: qui se déclenche lorsque l’utilisateur passe le curseur
sur un élément;
OnMouseOut: qui se déclenche lorsque l’utilisateur sort son curseur
dans l’élément;
OnQuit Down: lorsque l’utilisateur appuie sur une touche de son clavier
sans le relâcher avec le curseur sur l’élément.
exemple:
<h1>Introduction sur les Evenements</h1>
<p onclick="alert('Bravo');">Cliquez-Moi, Cliquez-Moi</p>

L’utilisation du mot clé This dans la gestion des éléments. , This nous
sert de référence à différents objets selon le contexte.
Dans le contexte de la gestion d’événements This va faire référence à
l’objet qui représente l’élément HTML qui est le sujet de l’événement
<p onclick="alert('Bravo');">Cliquez-Moi, Cliquez-Moi</p>
Le paragraphe en exemple est le sujet de l’événement car c’est lui qui
possède l’attribut d’événements et le code associé qui va déclencher
une action lors du clique d’un utilisateur.
<p onclick="this.textContent='Merci !'">Cliquez-Moi, Cliquez-Moi</p>
La gestion des événements va devenir intéressante si on commence à
réagir les événements via le DOM HTML.
Le DOM HTML, va nous permettre d’assigner des gestionnaires
d’événements spécifiques à des éléments HTML en utilisant javascript.
Nous allons utiliser du code javascript plutôt que des attributs HTML
pour créer des événements.
Il existe deux manières pour la construction d’événements en
JavaScripts: soit utilisé des propriétés qui vont assignés un gestionnaire
d’événements à un élément spécifique en HTML;
Soit utiliser la méthode AddEventlistener. La première, l’utilisation des
propriétés et une ancienne méthode qui possède des limitations. L’une
des plus importantes d’entre elles est que on ne peut pas assigner
plusieurs fois le même gestionnaire d’événements à un élément HTML.
Ancien Manière:
<body>
<p>Cliquez-moi, Cliquez-moi!</p>
<p>Un deuxiéme paragraphe</p>

p1. onclick = Bravo;

function Bravo(){
this.innerHTML = '<strong>Bravo ! </strong>';
this.style.color = 'orange';
};
</script>
</body>

La Méthode ADDEVENTLISTENER():
Cette méthode est appelée gestionnaire d’événement car nous permet
de lier un code à un événement. Le code lié va être exécuté dès le
déclenchement de l’événement. Ca appartient à l’objet element et a
besoin de deux arguments pour fonctionner, le nom de l’événement
déclencheur de l’action et le code de l’action à exécuter. Les
événements vont avoir des noms similaires aux attributs HTML mais ne
vont plus être procédé du On.

La méthode Onclick devient avec ADDEventListener()=> click

<body>
<h1 id="gros_titre">Les événements</h1>
<p>Cliquez-moi</p>
<p>Un deuxiéme <strong>paragraphe</strong></p>

p1.addEventListener('click',changeTexte);

function changeTexte(){
this.innerHTML = '<strong>Bravo !</strong>';
this.style.color = 'orange';
};
</script>
</body>

Avec une Fonction Anonyme:

<body>
<h1 id="gros_titre">Les événements</h1>
<p>Cliquez-moi</p>
<p>Un deuxiéme <strong>paragraphe</strong></p>

p1.addEventListener('click',function(){
this.innerHTML = '<strong>Bravo !</strong>';
this.style.color = 'orange';
});
</script>
</body>

L’un des grands avantages de la méthode AddEventListener()

est de pouvoir lier plusieurs gestionnaires d’événement de même
type sur un élément HTML.
Par exemple, on pourrait envoyer plusieurs messages en un clic, ce
qui est impossible sans cette méthode.
Événements Mouseover, si l’utilisateur passe la souris sur l’élément
HTML, l’événement se déclenche.
Événement MouseDown, si l’utilisateur reste cliqué sur l’élément
HTML, l’événement se déclenche.
<body>
<h1 id="gros_titre">Les événements</h1>
<p>Cliquez-moi</p>
<p>Un deuxiéme <strong>paragraphe</strong></p>

p1.addEventListener('mouseover',Fonction1);
p1.addEventListener('mousedown',Fonction2);

function Fonction1(){
this.innerHTML = 'Cliquez moi Maintenant';
this.style.backgroundColor = 'orange';
}

function Fonction2(){
this.innerHTML = 'Bravo';
this.style.Color = '#26C';
this.style.fontWeight = 'bold';
this.style.fontSize = '24px';
}
</script>
</body>

Mouseout,l’utilisateur déplace son souris en dort de l’élément

l’événement s'exécute;
Mouseup,l’utilisateur relâche le clic dans l’élément, l’événement se
déclenche.
On va attacher deux fonctions de type reset() à ces deux éléments
afin de rendre le comportement d’origine de l’élément.
<body>
<h1 id="gros_titre">Les événements</h1>
<p>Passez sur moi</p>
<p>Un deuxiéme <strong>paragraphe</strong></p>

p1.addEventListener('mouseover',Fonction1);
p1.addEventListener('mouseout',Reset1);
p1.addEventListener('mousedown',Fonction2);
p1.addEventListener('mouseup',Reset2);

function Fonction1(){
this.innerHTML = 'Cliquez moi Maintenant';
this.style.backgroundColor = 'orange';
}

function Reset1(){
this.innerHTML = 'Passez sur moi';
this.style.backgroundColor = '';
}

function Fonction2(){
this.innerHTML = 'Bravo';
this.style.Color = '#26C';
this.style.fontWeight = 'bold';
this.style.fontSize = '24px';
}

function Reset2(){
this.innerHTML = 'Passer sur moi';
this.style.Color = '';
this.style.fontWeight = '';
this.style.fontSize = '';
}
</script>
</body>

Propagation d’événements:
Signifie l’ordre dans lequel deux événements vont se déclencher.
Exemple un élément <p> qui se contient dans l’élément <div>, quand on
passe notre souris dans l’élément <p>, l’élément parent <div> se
déclenche en même temps que l’élément <p>. La solution qu’on peut
amener à ce problème est de définir l’ordre de déclenchement de quel
élément va se déclencher en premier.
<body>
<h1 id="gros_titre">Les événements : Propagation</h1>
<div id="div">
<p>Un premier paragraphe</p>
<p>Une deuxiémé paragraphe</p>
</div>

div.addEventListener('click' ,MessageDiv);
p1.addEventListener('click' ,MessageP);

function MessageDiv(){
alert('Evénement du DIV');
}

function MessageP(){
alert('Evénement du P');
}
</script>
</body>
Troisième argument de déclenchement booléen d’événement dans
l’exemple précédente:
La propagation d’un événement par de la racine pour aller trouver en
profondeur un élément qui contient un gestionnaire relatif à l’événement
(phase de la capture) et ensuite remonté le long de la rondom(phase de
bouillonnement). Les événements qui vont répondre à la phase de
capture sont les premiers à déclencher après celle des événements à la
phase de bouillonnement.
<body>
<h1 id="gros_titre">Les événements:
Propagation(Capture/bouillonnement)</h1>
<div id="div1">
<p id="p1">Phase de bouillonnement utilisée</p>
</div>
<div id="div2">
<p id="p2">Phase de Capture utilisée</p>
</div>
<script>
var div1 = document.getElementById('div1');
var p1 = document.getElementById('p1');
var div2 = document.getElementById('div2');
var p2 = document.getElementById('p2');

//Phase de bouillonnement pour div1 et p1

div1.addEventListener('click', MessageDiv1);
p1.addEventListener('click', MessageP1);
function MessageDiv1(){alert('Evénement du div 1');};
function MessageP1(){alert('Evénement du paragraphe p1');};

//Phase de capture pour div2 et p2

div2.addEventListener('click', MessageDiv2, true);
p2.addEventListener('click', MessageP2, true);
function MessageDiv2(){alert('Evénement du div 2');};
function MessageP2(){alert('Evénement du paragraphe p 2');};
</script>
</body>

L’objet EVENT:
L’objet event possède des propriétés et des méthodes qui vont nous
informer sur le contexte de l’événement déclenché ou qui vont impacter
l’environnement. Il est accessible que durant le déclenchement d’un
événement et il faut y accéder au sein de la fonction qui va servir une
action lors du déclenchement de l’événement.
Il possède plus de dizaines de propriétés:
● Target:retourne l'élément (objet) enfant le plus profond (du plus
bas niveau hiérarchique) survolé lors du déclenchement de
l'événement.”retourne le type de l’élément qui a déclenché
l’événement”
● currentTarget: retourne l'élément (objet) qui a déclenché
l'événement. “retourne le type de l’élément qui porte le
gestionnaire de l’événement déclenché”
<body>

<h1 id="gros_titre">Les événements:

Propagation(Capture/bouillonnement)</h1>

<p id="p1">UN exemple plus <strong>Complexe</strong></p>

</div>

var div1 = document.getElementById('div1');

var p1 = document.getElementById('p1');

div1.addEventListener('click', Message);

function Message(event){

this.innerHTML = 'Element déclencheur : ' + event.target +

'<br>Elément portant l\'événement : ' +

event.currentTarget;

</script>

</body>
● Type: cette propriété va retourner le type d’élément qui a été
déclenchée, il va s’utiliser de façon analogue aux propriétés
précédentes.
<body>
<h1 id="gros_titre">Les événements:
Propagation(Capture/bouillonnement)</h1>
<div id="div1">
<p id="p1">UN exemple plus <strong>Complexe</strong></p>
</div>
<script>
var div1 = document.getElementById('div1');
var p1 = document.getElementById('p1');
div1.addEventListener('click', Message);

function Message(event){
this.innerHTML = 'Type d\événement déclenché : ' +
event.type;
}
</script>
</body>
● On peut empêcher la propagation d’un événement par la méthode
StopPropagation (méthode event).
stopPropagation(): Cette méthode empêche la propagation du flux
d'événement. Si le flux se propage automatiquement sur les deux
phases qu'on a vu dans le paragraphe précédent, la méthode
stopPropagation() permet de rompre ce flux de telle sorte à empêcher
la capture répétée de l'événement par les objets qui s’emboîtent les uns
dans les autres et exécuter la même fonction plusieurs fois.
<body>
<h1 id="gros_titre">Les événements:
Propagation(Capture/bouillonnement)</h1>
<div id="div1">
<p id="p1">UN exemple plus <strong>Complexe</strong></p>
</div>
<script>
var div1 = document.getElementById('div1');
var p1 = document.getElementById('p1');

div1.addEventListener('click', TexteD, true);

p1.addEventListener('click', TexteP, true);

function TexteD(e){
alert('Stop à la propagation');
e.stopPropagation();
}

function TexteP(){
alert('Ceci ne s\'affichera pas');
}
</script>
</body>
● preventDefault(): Cet événement fonctionne seulement avec les
événements qu’on peut stopper l’action donc pas avec tous les
événements.Elle ne va pas stopper la propagation d’un événement
mais stopper un événement sur un événement ciblé.
Cette méthode empêche le navigateur d'entamer une action par défaut.
Par exemple, le fait de cliquer sur un bouton de type submit redirige le
navigateur vers la page définie dans l'attribut action du formulaire, ce
qui représente le comportement par défaut. Or, si on déclare
convenablement la méthode preventDefault(), le navigateur n'entame
pas la redirection.
<body>
<h1 id="gros_titre">Les événements:
Propagation(Capture/bouillonnement)</h1>
<div id="div1">
<p id="p1">UN exemple plus <strong>Complexe</strong></p>
</div>
<script>
var div1 = document.getElementById('div1');
var p1 = document.getElementById('p1');

div1.addEventListener('click', TexteD, true);

p1.addEventListener('click', TexteP, true);

function TexteD(e){
e.preventDefault();
}

function TexteP(){
alert('La méthod preventDefault n\'empéche pas la
propagation');
}
</script>
</body>

Le BOM et L’Objet Window

Browser Objet Modal, va nous permettre d’accéder au navigateur et
notamment la fenêtre ouverte actuellement en javascript.
L’objet le plus célèbre du BOM est le window, va tout simplement
représenter la fenêtre du navigateur, toutes les fonctions, variables et
objet logo appartiennent automatiquement à l’objet window.Il est
implicite, nous aurons pas besoin de le mentionner pour utiliser les
méthodes ou les fonctions global et les propriétés ou les variables
globales qui lui appartienne. Ex: la fonction Alert.
<body>
<h1 id="gros_titre">Le BOM</h1>

alert('Sans window');
</script>
</body>
Quelques méthodes importants de l’objet window:
La méthode Open: va nous servir à ouvrir un nouvel onglet ou une
nouvelle fenêtre, il a quatre argument, toute optionnel.(utilisée sans
argument cet argument va ouvrir une onglet vide).
ARGUMENT:
url de destination, peut être une url de page web, image, vidéo etc.
Où doit souffrir une page,dans l’onglet courant, dans une fenêtre, dans
une page web ou dans un nouvel onglet etc. La valeur argument que
nous intéressons ici est la valeur blank, qui nous permet d'ouvrir une
nouvelle fenêtre comme avec l’élément a en HTML. Avec cet argument
nous pouvons donner un nom à notre fenêtre qui lui est propre, pour
pouvoir le manipuler à l’avenir.
3éme argument de l’objet open va être une liste d’éléments qui vont
nous permettre d’agir directement dans la fenêtre ouverte, par exemple
la largeur, hauteur de la fenêtre, l’affichage, position, affichage d’une
barre de menu ou pas etc.
Le dernier argument va être un booléen, qui va spécifier si la nouvelle
fenêtre ouverte doit remplacer la fenêtre actuelle dans l’historique des
navigations ou être ajouter à celui-ci.
<body>
<h1 id="gros_titre">Le BOM</h1>
<p>Cliquez pour ouvrir un nouvel onglet (méthode open)</p>
<script>
var para = document.querySelector('p');

para.addEventListener('click', fenetre);

function fenetre(){
window.open('http://pierre-giraud.com', '_blank', 'width =
500, height = 300');
}
</script>
</body>
La méthode close: Nous permet de fermer une fenêtre ou un onglet,
elle n’a pas besoin d’argument. et la méthode contraire d’open.
<body>
<h1 id="gros_titre">Le BOM</h1>
<button id="ouvrir">Ouvrir une nouvelle fenètre</button>
<button id="fermer">Refermer la fenètre</button>
<script>
var ouvrir = document.getElementById('ouvrir');
var fermer = document.getElementById('fermer');
var fenetre = '';

ouvrir.addEventListener('click', fouvrir);
fermer.addEventListener('click', ffermer);

function fouvrir(){
fenetre = window.open('http://pierre-giraud.com', '_blank',
'width = 500');
}
function ffermer(){
fenetre.close();
}
</script>
</body>
La méthode resize to: va nous permettre de redimensionner une
fenêtre ou un onglet. Elle prend comme argument la largeur et la
hauteur en pixel.
<body>
<h1 id="gros_titre">Le BOM</h1>
<button id="ouvrir">Ouvrir une nouvelle fenètre</button>
<button id="fermer">Refermer la fenètre</button>
<button id="modifier">Changer La taille</button>
<script>
var ouvrir = document.getElementById('ouvrir');
var fermer = document.getElementById('fermer');
var modifier = document.getElementById('modifier');
var fenetre = '';
ouvrir.addEventListener('click', fouvrir);
modifier.addEventListener('click', fmodifier);
fermer.addEventListener('click', ffermer);

var para = document.querySelector('p');

para.innerHTML =
'Hauteur de l\'écran : ' + hauteur +
'<br> Hauteur disponible : ' + hauteurDispo +
'<br>Résolution : ' + reso + ' bits/px';
</script>
</body>
L’Objet Navigator: Nous montre les informations sur le
navigateur de nos utilisateurs en soi ainsi que sur des
préférences enregistrés comme la langue.
Nb: Ces informations proviennent de l’utilisateur et ne sont
donc jamais fiable, de plus il vaudra demander une autorisation
à l’utilisateur avant de récupérer certaines de ces informations.
Il possède 10 propriétés:
Langage: qui retourne la langue définit par le navigateur;
Géolocation: qui définit la géolocalisation utilisé par le
navigateur;
Product: le nom du moteur utilisé par le navigateur;
CookieEnabled: qui détermine si les cookie sont utilisées ou
non;
AppName: qui retourne le nom du navigateur;
AppCodeName: qui retourne le nom de code du navigateur;
AppVersion: qui retourne la version du navigateur utilisé;
Online: qui détermine si le navigateur est en ligne ou pas;
Plateforme: qui détermine pour quel plateforme le navigateur
est compliqué;
UserAdgent: qui retourne l'entête du fichier useradgent utilisé
par le navigateur au serveur.
De plus, il possède une méthode intéressante qui est la
méthode JavaEnabled qui détermine si java a été installé dans
mon navigateur ou pas.
<body>
<h1 id="gros_titre">Le BOM : L'Objet Navigator</h1>
<p></p>

var para = document.querySelector('p');

para.innerHTML =
'Langue utilisée : ' + langue +
'<br>Nom du Navigateur : ' + navigateur +
'<br>Version : ' + version +
'<br>Moteur : ' + moteur +
'<br>COOKIE ? : ' + cookieA;
</script>
</body>

Le BOM : L'Objet Navigator

Langue utilisée : fr-FR

Nom du Navigateur : Netscape

Version : 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML,

like Gecko) Chrome/92.0.4515.159 Safari/537.36

Moteur : Gecko

COOKIE ? : true

Pour pouvoir utiliser, la localisation de nos visiteurs, on utilise la

propriété geolocation, qui est un propriété un peu complexe à
utiliser puisqu’il va renvoyer un objet géolocalisation qui va être
inexploitable tel quel est.Nous allons donc utilisé la méthode
getCurrentPosition de l’objet géolocalisation pour obtenir
un résultat exploitable, on va donner aussi une autre méthode
en argument de getCurrentPosition qui sera chargé de
renvoyer la Latitude et la Longitude de l’utilisateur si on y a
accès.
<body>
<h1 id="gros_titre">Le BOM : L'Objet Navigator</h1>
<p></p>

L’Objet Location:
Il est un objet appartenant à window, nous fournie des
informations de l’url de la page actuelle. Il possède 9
propriétés:
H, qui retourne la partie ancre d’une url;
search, qui retourne la partie recherche d’une url;
Pathname, qui retourne le chemin de l’url;
href, qui retourne l’url complète;
Hostname, qui retourne le nom de l'hôte;
Port, qui retourne le port de l’url;
Protocole, retourne le protocole de l’url;
Host, qui retourne le nom de l'hôte et le port relative à l’url;
Origin, qui retourne l'hôte, le port et le protocole de l’url.
Il possède trois (3) méthodes important:
Esend, qui va charger un nouveau document;
reload, qui va recharger un nouveau document;
replace, qui va remplacer le document actuel par un autre.
<body>
<h1 id="gros_titre">Le BOM : L'Objet Location</h1>
<button id="charger">charger un nouveau document</button>
<button id="recharger">Recharger le document</button>
<button id="changer">Remplacer le document</button>
<p></p>
<script>
var para = document.querySelector('p');
var charger = document.getElementById('charger');
var recharger = document.getElementById('recharger');
var changer = document.getElementById('changer');
charger.addEventListener('click', charge);
recharger.addEventListener('click', recharge);
changer.addEventListener('click', chang);
function charge(){
location.assign('http://pierre-giraud.com');
}
function recharge(){
location.reload();
}
function chang(){
location.replace('http://youtube.com');
}
var url = location.href;
var chemin = location.pathname;
para.innerHTML = 'URL : ' + url + '<br>Chemin : ' + chemin;
</script>
</body>

L’Objet History:
Appartient à l’objet window, va nous permettre de nous
déplacer dans l'histoire de nos visiteurs et de nous donner des
informations relatives à celui-ci.
Il possède une propriété et trois (3) méthodes:
La propriété Lens, qui nous permette de connaître le nombre
d’url dans l’historique;
La méthode back, qui nous permet de charger la dernière l’url
disponible dans l’historique, la plus récente;
La méthode forward, permette de charger l’url suivant une
première url dans l’historique, directement la plus récente par
rapport à une première;
La méthode Go, permet de charger l’url spécifique dans
l’historique.
<body>
<h1 id="gros_titre">Le BOM : L'Objet Location</h1>
<button id="precedent">charge la dernière page visitée</button>
<button id="suivant">Charge la page suivante dans
l'historique</button>
<button id="specefique">3 pages en arrière</button>
<p></p>

precedent.addEventListener('click', arriere);
suivant.addEventListener('click', avant);
specefique.addEventListener('click', spec);
function arriere(){
history.back();
}
function avant(){
history.forward();
}
function spec(){
history.go(-3);
}
var histo = history.length;
para.innerHTML = 'URLs : ' + histo;
</script>
</body>

Les Expressions Régulière ou REGEX:

Forment un langage régulier appart qui n’appartient exclusivement pas à
JavaScript et qui ne constitue pas un langage de programmation
proprement dit.Le grand intérêt de regex est que on va pouvoir les
utiliser conjointement avec de nombreux autres langages comme la
javascript ou le PHP par exemple.
Un expression régulière va consister en une suite de caractères qui vont
former ensemble un schéma de recherche.
Ils vont nous permettre de vérifier la présence de certain caractère ou
enchaînement de caractère dans une expression.
Ex: Il nous permet de vérifier si un utilisateur a bien mentionné la suite
de 10 chiffres dans le champ numéro tél d’un formulaire.
Le JavaScript va supporter les expressions régulières via son objet
RegEx qui va nous permettre d’exploiter toute la puissance des
expressions régulières.
L’objet RegExp, apporte des propriétés et des méthodes qui vont nous
permettre de créer ou de manipuler les expressions régulières.

Syntaxe Général des REGEX:

De préciser une séquence de caractère et d’entourer cette séquence par des
caractères d’encadrement. Écrire le même caractère d’encadrement au début et à la
fin de la séquence de caractère.
<script>
var r = /pierre/;
</script>
On utilise les méthodes de l’objet REGEX ou String pour rechercher ou remplacer un
séquence de caractère;
Il peut contenir des options ou des modificateurs, les options vont être représentées
par un caractère ex: i, sont les seuls à être placé en dehors des encadrements enfin
de REGEX, le caractère i par exemple signifie que notre REGEX ignore la cache de
notre séquence de caractère. “i”, signifie caché insensitive
<script>
var r = /pierre/i;
</script>

Recherches et Remplacements:
Nous allons pouvoir utiliser certaines méthodes des objets
String et Regex sur nos expressions régulières afin justement
de faire des recherches ou des remplacements.
Méthode Math, de rechercher des caractères dans une
séquence de caractères, un argument de la séquence de
caractère à recharger.
<body>
<h1>Regex: Recherches et Remplacements</h1>
<p>Engagez vous qu'ils disaient, rengagez vous qu'ils disaient</p>
<p id="reg"></p>
<script>
var expr = document.querySelector('p');

var r1 = /engagez/i;
var r2 = /engagez/ig;
var res1 = expr.textContent.match(r1);
var res2 = expr.textContent.match(r2);

var reslutat = document.getElementById('reg');

reslutat.innerHTML = 'Résultat match() sur regex 1 : ' + res1 +
'<br>Résultat match() sur regex 2 : ' + res2;
</script>
</body>

Méthode search de l’objet String, va retourner la position à

laquelle a été trouvée la première occurrence de l’expression
recherchée dans une chaîne de caractère ou le chiffre -1, si
elle n’a pas été trouvé.
<body>
<h1>Regex: Recherches et Remplacements</h1>
<p>Engagez vous qu'ils disaient, rengagez vous qu'ils disaient</p>
<p id="reg"></p>
<script>
var expr = document.querySelector('p');

var r1 = /engagez/i;
var r2 = /engagez/;

var res1 = expr.textContent.search(r1);

var res2 = expr.textContent.search(r2);

var reslutat = document.getElementById('reg');

reslutat.innerHTML = 'Résultat match() sur regex 1 : ' + res1 +
'<br>Résultat match() sur regex 2 : ' + res2;
</script>
</body>

La méthode Replace, va nous permettre de rechercher une

expression et de la remplacer par un autre. Deux arguments, le
regex et l'expression de remplacement.
<body>
<h1>Regex: Recherches et Remplacements</h1>
<p>Engagez vous qu'ils disaient, rengagez vous qu'ils disaient</p>
<p id="reg"></p>
<script>
var expr = document.querySelector('p');

var r1 = /vous/;
var r2 = /vous/g;

var res1 = expr.textContent.replace(r1, 'moi');

var res2 = expr.textContent.replace(r2, 'moi');

var reslutat = document.getElementById('reg');

reslutat.innerHTML = 'Résultat 1 : ' + res1 +
'<br>Résultat 2 : ' + res2;
</script>
</body>

La méthode Test de l’objet Regex,va rechercher une séquence

de caractère dans une chaine de caractère, si la recherche est
trouvée le séquence va envoyer un booléen true sinon un
booléen false, elle appartient à Regex et non à l’objet string;
Prend comme argument la chaîne de caractère à rechercher.
<body>
<h1>Regex: Recherches et Remplacements</h1>
<p>Engagez vous qu'ils disaient, rengagez vous qu'ils disaient</p>
<p id="reg"></p>
<script>
var rec = document.querySelector('p').textContent;

var r1 = /ENGAGEZ/;
var r2 = /ENGAGEZ/i;

var res1 = r1.test(rec);

var res2 = r2.test(rec);

var resultat = document.getElementById('reg');

resultat.innerHTML = 'Résultat 1 : ' + res1 +
'<br>Résultat 2 : ' + res2;
</script>
</body>

La méthode d’objet Regex, va chercher un chaine de caractère

et va renvoyer le texte trouvé ou nul si il n’a pas trouvé
<body>
<h1>Regex: Recherches et Remplacements</h1>
<p>Engagez vous qu'ils disaient, rengagez vous qu'ils disaient</p>
<p id="reg"></p>
<script>
var rec = document.querySelector('p').textContent;
var r1 = /aient/;

var res1 = r1.exec(rec);

var resultat = document.getElementById('reg');

resultat.innerHTML = 'Résultat : ' + res1;
</script>
</body>

Les Quantifieurs et Options:

Les quantifieurs vont être des signes qui vont généralement
nous permettre de définir une quantité d’une certaine séquence
à rechercher. Par exemple, les quantifieurs plus (+), vont se
placer juste avant ou après la séquence qu’il doit être appliqué.
<body>
<p>1, 10, 100</p>
<p id="reg"></p>

var r1 = /10+/g;

var res1 = rec.match(r1);

var resultat = document.getElementById('reg');

resultat.innerHTML = 'Résultat : ' + res1;
</script>
</body>

Quantifieur Sens

a? On veut 0 ou 1 <<a>>

a+ On veut au moins un <<a>>

n* On veut 0, 1 ou plusieurs <<a>>

^a + On veut un <<a>> en début de chaîne

a$ On veut un <<a>> en fin de chaîne

On veut une séquence de X <<a>>

a{X}
On veut une séquence de X à Y fois <<a>>
a{X,Y}

On veut une séquence d’au moins X fois <<a>>

a{X,}

a(?=b) On veut un <<a>> suivi d’un <<b>>

a(?!b) On veut un <<a>> non suivi d’un <<b>>

<body>
<p>On apprend à utiliser les regex en JavaScript</p>
<p id="reg"></p>

var r1 = /x+/;
var res1 = r1.test(rec);

var r2 = /e(nd)?/g;
var res2 = rec.match(r2);

var r3 = /e$/i;
var res3 = r3.test(rec);

var r4 = /p{2}/;
var res4 = r4.test(rec);

var r5 = /Java(?=Script)/;
var res5 = r5.test(rec);

var resultat = document.getElementById('reg');

resultat.innerHTML =
'Présence d\'un "X" : ' + res1 +
'<br>Occurence de "e" ou "end" : ' + res2 +
'<br>Chaine finit par un "e" ? ' + res3 +
'<br>Contient deux "p" à la suite ? ' + res4 +
'<br>Présence de "Java" suivie de "Script" ? :' + res5;
</script>
</body>

On apprend à utiliser les regex en JavaScript

Présence d'un "X" : true

Occurrence de "e" ou "end" : end,e,e,e,e,e

Chaîne finit par un "e" ? false

Contient deux "p" à la suite ? true

Présence de Java suivie de "Script" ? :true

Les options qu’on appelle aussi modificateur, vont servir à ajouter des
options à notre recherche. Représenter par des lettres qu’on va écrire
après le deuxième caractère encadrement de notre regex. Il existe
trois(3) options:
i, nous permet de ne pas tenir compte de la case de notre regex, crypte
tous les combinaisons minuscule et majuscule représentant la séquence
de notre regex;
g, sert à exécuter les recherches globales plutôt de s'arrêter au premier
résultat trouvé;
n, va nous permettre de détecter notre recherche dans plusieurs lignes,
va considérer chaque retour à la ligne comme la fin d’une première ligne
et le début d’une deuxième ligne.
<body>
<p>On apprend à utiliser les regex en JavaScript</p>
<p id="reg"></p>

var r1 = /on/i;
var res1 = rec.match(r1);

var r2 = /e/g;
var res2 = rec.match(r2);

var r3 =/^d/;
var res3 = r3.test(rec2);

var r4 = /^d/m;
var res4 = r4.test(rec2);
var resultat = document.getElementById('reg');
resultat.innerHTML =
'Résultat regex 1 : ' + res1 +
'<br>Résultat regex 2 : ' + res2 +
'<br>Résultat regex 3 : ' + res3 +
'<br>Résultat regex 4 : ' + res4;
</script>
</body>

On apprend à utiliser les regex en JavaScript

Résultat regex 1 : On

Résultat regex 2 : e,e,e,e,e,e

Résultat regex 3 : false

Résultat regex 4 : false

Les Classes de caractères / Métacaractères:

Les classes de caractères vont nous permettre de mentionner des
plages de caractères pour effectuer nos recherches. Pour déclarer une
classe de caractère nous utiliserons des paires crochets ([]), sauf dans
un cas particulier nous utiliserons des parenthèses ().
Exemple:
<body>
<p>On apprend à utiliser les regex en JavaScript</p>
<p id="reg"></p>
<script>
var rec = document.querySelector('p').textContent;

var r1 = /aeiouy/g;
var res1 = rec.match(r1);

var r2 = /[aeiouy]/g;
var res2 = rec.match(r2);

var resultat = document.getElementById('reg');

resultat.innerHTML = 'Recherche sans classe : ' + res1 +
'<br>Recherche avec classe : ' + res2;
</script>
</body>
On apprend à utiliser les regex en JavaScript

Recherche sans classe : null

Recherche avec classe : a,e,u,i,i,e,e,e,e,e,a,a,i

Classe SENS

Trouve tous les caractères à l’intérieur des crochets

[abcde]

Trouve tout caractère ne se situent pas entre les crochets

[^abcde]

Trouve n’importe qu’elle lettre entre a et z

[a-z]

Trouve n’importe quel caractère qui n’est pas une lettre minuscule de l’alphabet
[^a-z]

Trouve n’importe quel nombre entre 0 et 9

[0-9]

Trouve n’importe quel caractère qui n’est pas un nombre compris entre 0 et 9
[^0-9]

Trouve jour et soir

[jour | soir]

<body>
<p>On apprend à utiliser les regex en JavaScript</p>
<p id="reg"></p>
<script>
var rec = document.querySelector('p').textContent;

var r1 = /[C-X]/g;
var res1 = rec.match(r1);

var r2 = /[^aeiou]/g;
var res2 = rec.match(r2);

var r3 = /[0-9]/g;
var res3 = rec.match(r3);

var r4 = /^[A-Z]/;
var res4 = r4.test(rec);
var r5 = /[0-9]{4}/;
var res5 = rec.match(r5);

var resultat = document.getElementById('reg');

resultat.innerHTML =
'Majuscule entre C et X : ' + res1 +
'<br>Tout sauf voyelles minuscules : ' + res2 +
'<br>Tous les chiffres : ' + res3 +
'<br>Majuscule en début de chaîne : ' + res4 +
'<br>Succession de 4 chiffres : ' + res5 ;
</script>
</body>

On apprend à utiliser les regex en JavaScript

Majuscule entre C et X : O,J,S

Tout sauf voyelles minuscules : O,n, ,p,p,r,n,d, ,à, ,t,l,s,r, ,l,s, ,r,g,x, ,n, ,J,v,S,c,r,p,t

Tous les chiffres :

Majuscule en début de chaîne : true

Succession de 4 chiffres : null

On apprend à utiliser les regex en JavaScript en 2016

Majuscule entre C et X : O,J,S

Tout sauf voyelles minuscules : O,n, ,p,p,r,n,d, ,à, ,t,l,s,r, ,l,s, ,r,g,x, ,n, ,J,v,S,c,r,p,t, ,n, ,2,0,1,6

Tous les chiffres : 2,0,1,6

Majuscule en début de chaîne : true

Succession de 4 chiffres : 2016

Recherché dans plusieurs intervalle à la fois: préciser plusieurs intervalle de

recherche à l’intérieur de notre classe de caractère ou un intervalle plus
certain caractères par exemple.
<body>
<p>On apprend à utiliser les [regex] en JavaScript en 2016</p>
<p id="reg"></p>
<script>
var rec = document.querySelector('p').textContent;
var r1 = /[a-zàéè]/g;
var res1 = rec.match(r1);

var r2 = /[a-zA-Z0-9]/g;
var res2 = rec.match(r2);

var r3 = /[^a-zA-Z]/g;
var res3 = rec.match(r3);

var resultat = document.getElementById('reg');

resultat.innerHTML =
'Lettre miniscule plus à, é et è : ' + res1 +
'<br>Lettre miniscule, majuscule et chiffre : ' + res2 +
'<br>Tout sauf a-z et A-Z : ' + res3;
</script>
</body>

On apprend à utiliser les [regex] en JavaScript en 2016

Lettre minuscule plus à, é et è : n,a,p,p,r,e,n,d,à,u,t,i,l,i,s,e,r,l,e,s,r,e,g,e,x,e,n,a,v,a,c,r,i,p,t,e,n

Lettre minuscule, majuscule et chiffre :

O,n,a,p,p,r,e,n,d,u,t,i,l,i,s,e,r,l,e,s,r,e,g,e,x,e,n,J,a,v,a,S,c,r,i,p,t,e,n,2,0,1,6

Tout sauf a-z et A-Z : , ,à, , , ,[,], , , , ,2,0,1,6

NB: Par rapport aux caractères spéciaux () ``'' ``'' {[}]$§ etc, pour
rechercher ces genres de caractère il va falloir les échapper avec un
antislash. Valable même en dehors des classes de caractères pour
nombre de classe de caractères spéciaux.
Ex:
<body>
<p>On apprend à utiliser les [regex] en JavaScript en 2016 - ?</p>
<p id="reg"></p>
<script>
var rec = document.querySelector('p').textContent;

var r1 = /\[regex\]/g;
var res1 = rec.match(r1);

var r2 = /[e\[\]]/g;
var res2 = rec.match(r2);
var r3 = /[0-9-]/g;
var res3 = rec.match(r3);

var r4 = /\?$/;
var res4 = rec.match(r4);

var resultat = document.getElementById('reg');

resultat.innerHTML =
'Recherche "[regex] : ' + res1 +
'<br>Recherche "e", "[", "]" : ' + res2 +
'<br>Recherche 0-9 et "-" : ' + res3 +
'<br>Recherche "?" en fin de chaîne : ' + res4;
</script>
</body>

On apprend à utiliser les [regex] en JavaScript en 2016

Recherche "[regex] : [regex]

Recherche "e", "[", "]" : e,e,e,[,e,e,],e,e

Recherche 0-9 et "-" : 2,0,1,6

Recherche "?" en fin de chaîne : null

On apprend à utiliser les [regex] en JavaScript en 2016 - ?

Recherche "[regex] : [regex]

Recherche "e", "[", "]" : e,e,e,[,e,e,],e,e

Recherche 0-9 et "-" : 2, 0,1,6,-

Recherche "?" en fin de chaîne : ?

Les métacaractères ou classes abrégés, vont être des caractères qui portent
une signification spéciale.La spécificité des métacarctères et qu’ils vont
toujours commencés par un antislash sauf pour le métacaractère (.) point. Ils
vont très souvent correspondre à des classes qui sont couramment utilisés et
vont donc nous servir à écrire ces classes plus rapidement sur des raccourcis
des classes.
La liste des métacaractères les plus utilisés:
META SENS
CARACTÈRE

. Seul méta-caractère ne possédant pas

d'un antislash.Trouve tout caractère sauf
un retour à la ligne

\w
Trouve toute lettre. Équivalent à [a-zA-Z]

\W
Trouve tout ce qui n’est pas une lettre.
Équivalent à [^a-zA-Z]

\d Trouve n’importe quel chiffre.Équivalent

à [0-9]

\D Trouve tout sauf un chiffre. Équivalent à

[^0-9]

\s Trouve un espace

\S Trouve tout sauf un espace

\ba Trouve tout <<a>> situé en début ou en

fin d’un mot

\Ba Trouve tout <<a>> non situé en début ou

en fin de mot

\n Trouve un retour à la ligne (le <<\n>>

en JavaScript)
<body>
<p>On apprend à utiliser les [regex] en JavaScript en 2016 - ?</p>
<p id="reg"></p>
<script>
var rec = document.querySelector('p').textContent;

var r1 = /./g;
var res1 = rec.match(r1);

var r2 = /\d/g;
var res2 = rec.match(r2);

var r3 = /\D/g;
var res3 = rec.match(r3);

var r4 = /\br/;
var res4 = r4.test(rec);
var resultat = document.getElementById('reg');
resultat.innerHTML =
'Tout sauf une nouvelle ligne : ' + res1 +
'<br>Tous les chiffres : ' + res2 +
'<br>Tout sauf [0-9] : ' + res3 +
'<br>r en début ou fin de mot ? : ' + res4;
</script>
</body>

On apprend à utiliser les [regex] en JavaScript en 2016 - ?

Tout sauf une nouvelle ligne : O,n, ,a,p,p,r,e,n,d, ,à, ,u,t,i,l,i,s,e,r, ,l,e,s,
,[,r,e,g,e,x,], ,e,n, ,J,a,v,a,S,c,r,i,p,t, ,e,n, ,2,0,1,6, ,-, ,?

Tous les chiffres : 2,0,1,6

Tout sauf [0-9] : O,n, ,a,p,p,r,e,n,d, ,à, ,u,t,i,l,i,s,e,r, ,l,e,s, ,[,r,e,g,e,x,], ,e,n,
,J,a,v,a,S,c,r,i,p,t, ,e,n, , ,-, ,?

r en début ou fin de mot ? : true

Rappels Sur Les Formulaires HTML:

Les formulaires vont nous servir à recevoir des donnés envoyées par
les utilisateurs.Par Exemple, un formulaire client nous permet de
recevoir des informations sur un client.
Les formulaires vont être faites en HTML mise en forme en CSS puis les
informations envoyées et donc récoltées vont être analysées et stockées
par d’autres langages comme le PHP ou le MySql.
Il Va devoir créer un squelette du formulaire, avec un élément form qui
va définir le formulaire en soi, nous allons donner deux attributs à cette
élément form, tout d’abord l’attribut method, qui va nous permettre la
méthode d’envoie des données (post, get) et l’attribut action qui va être
indispensable pour préciser la page qui doit effectuer les traitements de
données. Et aussi avec les éléments input (tel, texte,date,mail etc.).
<h1>lES formulairs en HTML</h1>
<form method='POST'action="traitement.php">
<label for="prenom">Entrez votre prènom : </label>
<input type="text" name="prenom" id="prenom"><br>
<label for="mail">Entrez votre E-mail :</label>
<input type="email" name="mail" id="mail"><br>

<label for="tel">Numéro de téléphone :</label>

<input type="submit" value="valider">

</form>

Validation HTML des Formulaires:

L’importance de vérification des données envoyées par les utilisateurs:
C'est-à-dire de vérifier toujours la structure des données envoyées par
les utilisateurs, en les forçant à respecter le remplissage de chaque
champ par les valeurs appropriées.
Les attributs HTML qui nous le permette:
Required, rend obligatoire le remplissage d’un champ;
min-length et max-length, vont nous permettre de définir la taille d’un
champ d’un type input texte;
min et max, définit la taille d’un champ de types number et date.
Validation JavaScript des formulaires
JavaScript peut être un moyen puissant pour la validation des
formulaires de données envoyées par les utilisateurs.Il va vérifier avant
l’envoi des données sur serveur (côté client).
<body>
<h1>lES formulairs en HTML</h1>
<form method='POST'action="traitement.php">
<label for="prenom">Entrez votre prènom : </label>
<input type="text" name="prenom" id="prenom"
required='required' maxlength="23">
<span id="prenom_manquant"></span><br>

<label for="mail">Entrez votre E-mail :</label>

<label for="tel">Numéro de téléphone :</label>

<input type="submit" value="valider"id='bouton_envoi'>

</form>
<script>
var validation = document.getElementById('bouton_envoi');
var prenom = document.getElementById('prenom');
var prenom_m = document.getElementById('prenom_manquant');
validation.addEventListener('click', f_valid);

function f_valid(e){
if (prenom.validity.valueMissing) {
e.preventDefault();
prenom_m.textContent = 'Prénom MANQUANT';
prenom_m.style.color = 'red';
}
}
</script>
</body>

Dans cet exemple le formulaire a été bloqué, nous avons bloqué le formulaire
et non le chrome en soi. Nous avons bloqué le formulaire dans notre code
script avec le preventDefault();et un msg rouge s’affiche Prénom manquant

les formulairs en HTML

Entrez votre prénom : Prénom MANQUANT
Entrez votre E-mail :
Numéro de téléphone :

Nous pouvons aussi vérifier la qualité des donnés envoyés, par

exemple, nous pourrions autoriser que les lettres, les apostrophes, les
espaces, les tirets pour le champ prénom, et l’utilisation des majuscules
qu’en début de mot:
<script>
var validation = document.getElementById('bouton_envoi');
var prenom = document.getElementById('prenom');
var prenom_m = document.getElementById('prenom_manquant');
var prenom_v =
/^[a-zA-ZéèiïÈÏÎ][a-zéèêàçîï]+([-'\s][a-zA-ZéèiïÈÏÎ][a-zéèêàçîï]+)?/;
validation.addEventListener('click', f_valid);

function f_valid(e){
if (prenom.validity.valueMissing) {
e.preventDefault();
prenom_m.textContent = 'Prénom MANQUANT';
prenom_m.style.color = 'red';
}else if (prenom_v.test(prenom.value) == false) {
event.preventDefault();
prenom_m.textContent = 'Format incorrect';
prenom_m.style.color = 'blue';
}else {

}
}
</script>

les formulairs en HTML

Entrez votre prénom : Être Format incorrect
Entrez votre E-mail :
Numéro de téléphone :
Découverte de l’élément CANVAS
L’élément HTML CANVAS va nous permettre de dessiner et de créer
des figures géométriques dans une page web au sein de CANVAS.
L’élément CANVAS ne va servir que de conteneur pour les graphiques.
Les graphiques vont être créés à l’aide d’un langage de script.
Nous allons créer des graphiques avec JavaScript à l’aide de méthodes
et de propriétés de l’objet JavaScript CANVAS. L’élément CANVAS va
être lui représenté par une zone rectangulaire dans une page HTML,
cette élément n’a ni bordure ni contenu par défaut .
Il faut préciser la largeur et une hauteur pour notre CANVAS en tant
qu’attribut au sein de la balise ouvrante de l’élément CANVAS et sans
utiliser d’unité. Va lui même convertir des chiffres que nous lui donnons
en pixel.
<style>
body{
margin: 0px;
padding: 0px;
}
#canvas1{
background-color: sienna;
}
</style>
</head>
<body>
<h1>Découverte de l'élément CANVAS</h1>

<canvas id="canvas1" width="250" height="100"></canvas>

</body>

Dessiner Des Rectangles:

Pour dessiner un rectangle dans un élément CANVAS en HTML,
nous devons tout d’abord accéder à notre élément JavaScript, puis
récupérer son contexte avec getcontext();, et pour dessiner notre
rectangle nous allons utiliser la méthode fillstyle et la méthode
fillrect pour faire un rectangle plein, et toujours placer la méthode
fillstyle avant celle de fillrect, plus précisément la propriété doit
s'exécuter en premier lieu avant la fonction.
La méthode fillstyle, définit la couleur de remplissage du rectangle
en nom de couleur, en hexadecimal ou une notation rgb ou rgba;
La méthode fillrect, définit la taille et la position du rectangle, il
prend 4 arguments, les deux premiers correspond au retrait gauche
et du haut de notre rectangle par rapport à notre CANVAS, tandis
que les deux autres correspond à la largeur et une hauteur de notre
rectangle.
Exemple Rectangle Plein:
<body>
<h1>Découverte de l'élément CANVAS</h1>

<canvas id="canvas1" width="250" height="100"></canvas>

contexte.fillStyle = '#0AA';
contexte.fillRect(50, 0, 200, 100);
</script>
</body>

Exemple Rectangle Vide:

Pour dessiner un rectangle vide en CANVAS, nous allons utiliser la
propriété strokeStyle et strokeRect, ces deux méthodes
fonctionnent de la même manière que fillStyle et fillRect, à la
différence strokeStyle, gère la couleur des bordures du rectangles
puisque c’est un rectangle vide.Pour déterminer la taille de la
bordure, nous utiliserons la propriété linewidth qui va prendre un
nom déterminant l'épaisseur de notre bordure.
<body>
<h1>Découverte de l'élément CANVAS</h1>

<canvas id="canvas1" width="250" height="100"></canvas>

contexte.linewidth = '5';
contexte.strokeStyle = '#0AA';
contexte.strokeRect(50,10, 150, 80);
</script>
</body>

Dessiner des Lignes:

Dans ce chapitre nous allons apprendre à dessiner des lignes de
couleurs et d’épaisseur différentes dans notre CANVAS. Pour
dessiner des lignes, nous allons avoir besoin des méthodes
moveTo et LineTo, qui vont définir le point de départ et le dernier
point de notre ligne.Les deux méthodes ont chacune avoir besoin
de deux chiffres qui vont représenter respectivement la distance du
point par rapport au bord gauche et au bord supérieur du CANVAS,
la couleur de la ligne grâce à la propriété strokeStyle et pour tracer
la ligne entre les deux points nous aurons besoin du méthode
stroke.
<body>
<canvas id='canvas1' width='400' height='200'></canvas>

contexte.moveTo(20,20);
contexte.lineTo(300,150);

contexte.stroke();
</script>
</body>

Dessiner plusieurs lignes dans notre CANVAS, nous aurons deux

façons de faire: soit de définir une ligne avec moveTo et lineTo, soit
nous définissons plusieurs fois d'affilée la méthode lineTo.
<body>
<canvas id='canvas1' width='400' height='200'></canvas>

contexte.strokeStyle = '#48C';

contexte.moveTo(50,50);
contexte.lineTo(350,150);
contexte.lineTo(50,150);
contexte.lineTo(50,50);

contexte.stroke();
</script>
</body>

Pour définir à chaque ligne son propre couleur ou une épaisseur

différente, on doit avant tout utiliser la méthode beginPath(); qui va
définir le début d’un nouveau tracé et après définir l'épaisseur de la
ligne avec la propriété lineWidth.
<script>
var canvas = document.getElementById('canvas1');
var contexte = canvas.getContext('2d');

contexte.beginPath();
contexte.lineWidth = '5';
contexte.strokeStyle ='#48C';
contexte.moveTo(100,50);
contexte.lineTo(300,150);
contexte.stroke();

contexte.beginPath();
contexte.lineWidth = '5';
contexte.strokeStyle = '#C24';
contexte.moveTo(300,160);
contexte.lineTo(100,160);
contexte.stroke();

contexte.beginPath();
contexte.lineWidth = '5';
contexte.strokeStyle = '#A4A';
contexte.moveTo(100,150);
contexte.lineTo(300,50);
contexte.stroke();
</script>

Dessiner des ARCS DE CERCLE:

Pour dessiner les arcs de cercle nous allons utiliser la méthode
beginPath() pour créer un tracé et arced pour créer l’arc de cercle;
Il faut 5 arguments pour créer un arc de cercle à la méthode arc,
tout d’abord le décalage du point central de l’arc de cercle par
rapport au bord gauche du CANVAS, ensuite le décalage du point
central de l’arc de cercle par rapport au bord supérieur du
CANVAS, en troisième argument la taille du rayon, en quatrième
l’ongle de départ qui sera exprimé en radian et en dernier argument
l’ongle de fin qui sera exprimé en radian.
1 tour de cercle = 2.Pi Radian; ½ cercle = Pi radian etc. On le
trouve dans le sens d’un tour de montre et que le point de départ (0
Pi radian) se situe au niveau du point le plus adroite de l’arc du
cercle.alors pour récupérer la point de Pi, on utilise l’objet MATH et
pour créer un cercle complet il faut faire un tour complet de Pi
radian.
</head>
<body>
<canvas id='canvas1' width='400' height='200'></canvas>

contexte.beginPath();
contexte.lineWidth = '5';
contexte.strokeStyle = '#A4A';
contexte.arc(200, 100, 50, 0, 2*Math.PI);
contexte.stroke();

contexte.beginPath();
contexte.lineWidth = '5';
contexte.strokeStyle = '#48C';
contexte.arc(325, 100, 50, Math.PI, 2*Math.PI);
contexte.stroke();
</script>
</body>

Pour créer des arcs plein à la différence de celle- précédente, on

utilise fillStyle à la place de strokeStyle.

Créer des dégradés:

Le CANVAS nous permet de faire des dégradés linéaires et des
dégradés radiaux. Pour créer des dégradés en CANVAS, on va
procéder en trois étapes: définir le comportement et le type de
dégradé, le nombre et l’emplacement des transitions de couleurs
avec les couleurs proprement parlées et on va finir par prendre le
dégradé créé pour remplir une forme géométrique.
Pour créer un dégradé linéaire, on utilise la méthode
createLinearGradient, cette méthode va prendre 4 arguments:
première l’emplacement de début du dégradé par rapport au bord
gauche du CANVAS, deuxième argument le placement de début du
dégradé par rapport au bord supérieur du CANVAS, troisième
argument l’emplacement de la fin du dégradé par rapport au bord
gauche du CANVAS et le quatrième argument l’emplacement de la
fin du dégradé par rapport au bord supérieur du CANVAS. Pour
définir et effectuer les transitions de couleur au sein de notre
dégradé, nous utiliserons la méthode addColorStop, il va prendre
deux arguments, tout d’abord la position où démarre la couleur
Stop entre 0 et 1 et puis la couleur en deuxiéme argument.
<style>

#canvas1{
border: 2px solid orange;
}
</style>
</head>
<body>
<canvas id='canvas1' width='400' height='200'></canvas>

var lineaire = contexte.createLinearGradient(100, 50, 300,

150);

lineaire.addColorStop(0, '#4C8');
lineaire.addColorStop(0.5, '#48C');
lineaire.addColorStop(1, '#A4A');

contexte.fillStyle = lineaire;
contexte.fillRect(100, 50, 100, 100);
</script>
</body>

Pour créer un dégradé radial, on va utiliser la méthode

createRadialGradient.
Besoin de six argument:
● Emplacement point central du dégradé par rapport au bord
gauche du CanVas;
● Emplacement point central de départ du dégradé par rapport
au bord supérieur du CANVAS;
● Le rayon et la taille du point central du départ du dégradé;
● Emplacement du point central de fin de dégradé par rapport
au bord gauche du CANVAS;
● Emplacement du point central de fin de dégradé par rapport
au bord supérieur du CANVAS;
● Rayon et la taille du point central de fin de dégradé.
<body>
<canvas id='canvas1' width='400' height='200'></canvas>

var radial = contexte.createRadialGradient(200, 100, 20, 200,

100, 75);

radial.addColorStop(0, '#4C8');
radial.addColorStop(0.25, '#48C');
radial.addColorStop(1, '#A4A');

contexte.beginPath();
contexte.fillStyle = radial;
contexte.arc(200, 100, 75, 0, 2*Math.PI);
contexte.fill();
</script>
</body>

Insérer du texte / des images:

Pour écrire du texte dans le CANVAS, on utilise font, pour définir
l’apparence du texte ( sa taille, sa police etc. ).On peut aussi utiliser
la méthode strokeStyle et strokeText pour mettre un texte creux.
Soit fillStyle et fillText pour avoir un texte plein.
StrokeText et fillText, ont besoin de trois arguments:
● Texte;
● un nombre qui correspond à la distance entre le début du
texte et le bord gauche du canvas;
● un nombre qui correspond à la distance entre le début du
texte et bord supérieur du canvas.
<body>
<canvas id='canvas1' width='400' height='200'></canvas>

contexte.font = "bold 20px Verdana, Arial, serif";

contexte.strokeStyle = '#48B';
contexte.strokeText('Texte creux', 25, 100);

contexte.font = "bold 20px Verdana, Arial, serif";

contexte.fillStyle = '#48B';
contexte.fillText('Texte plein', 225, 100);
</script>
</body>

Pour insérer une image, on va utiliser la méthode drawImage, notre

image doit être déclarée en HTML avec l’élément <img>, soit en
JavaScript en créant un nouvel objet de type image. Utiliser
l’événement unlock, pour attendre le chargement complet de
l’image avant d'effectuer tout autre opération. On va devoir indiqué
trois arguments à la méthode drawImage:
● L’image utilisé;
● La distance par rapport au bord gauche du canvas;
● La distance par rapport au bord supérieur du canvas.
On va utiliser des arguments facultatifs qui vont nous permettre de
redimensionner l’image utilisée pour qu’il ne dépasse pas le
canvas.
<style>

#canvas1{
border: 2px solid orange;
}
#image{
display: none;
}
</style>
</head>
<body>
<img id="image" src="keita.jfif" alt="dessert">
<canvas id='canvas1' width='600' height='400'></canvas>

image.addEventListener('load', affiche);
function affiche(){
contexte.drawImage(image, 50, 25, 500, 350);
}
</script>
</body>

Incliner Un Dessin:
Pour incliner un dessin dans notre canvas, nous avons besoin de
deux méthodes Rotate et Translate.
La méthode rotate a besoin comme argument la valeur de l’angle
de rotation en radian. Il doit être exécuté avant la création du
dessin.
<style>

#canvas1{
border: 2px solid orange;
}
#image{
display: none;
}
</style>
</head>
<body>
<canvas id='canvas1' width='600' height='400'></canvas>

contexte.fillStyle = '#A8A'
contexte.fillRect(150, 25, 75, 75);

contexte.rotate(Math.PI/9);
contexte.fillStyle = 'RGBa(64,192,128,0.6)';
contexte.fillRect(150, 25, 75, 75);

contexte.rotate(Math.PI/9);
contexte.fillStyle = 'RGBa(192,64,192,0.6)';
contexte.fillRect(150, 25, 75, 75);
</script>
</body>

Nous utiliserons la méthode translate pour incliner le dessin dans

un autre point autre que le gauche du méthode rotate.
<body>
<canvas id='canvas1' width='600' height='400'></canvas>

contexte.fillStyle = '#48A'
contexte.fillRect(10, 10, 75, 75);

contexte.translate(75,75);

contexte.fillStyle ='RGBa(64,192,128)';
contexte.fillRect(10,10,75,75);
</script>
</body>

Autres Exemple:
var canvas = document.getElementById('canvas1');
var contexte = canvas.getContext('2d');

contexte.translate(300,200);

contexte.fillStyle = '#48A'
contexte.fillRect(0, 0, 75, 75);

contexte.rotate(Math.PI/2);
contexte.fillStyle = 'RGBa(64,192,126)';
contexte.fillRect(0,0,75,75);

contexte.rotate(Math.PI/2);
contexte.fillStyle = '#A3A';
contexte.fillRect(0,0,75,75);

contexte.rotate(Math.PI/2);
contexte.fillStyle = '#E85';
contexte.fillRect(0,0,75,75);
Gestion du Délai D’exécution
Le javascript nous permet d'exécuter des blocs de code à un
certain moment donné ou à répétition avec un intervalle de temps
fixe entre chaque répétition. Pour gérer le délai d'exécution d'un
code, on utilise la méthode setInterval() et setTimeout().
La méthode setInterval(),est une méthode window elle va nous
permettre d'exécuter un bloc de code en couple en précisant
l’intervalle de temps dans chaque répétition. Cette méthode va
prendre en argument le bloc de code et l’intervalle en milliseconde.
<body>
<p>Horloge actualisée en direct : Il est <span
id="temps"></span></p>
<button id="stop">Arrêter le temps</button>
<script>
var heure = document.getElementById('temps');
var stop = document.getElementById('stop');
var tempsReel = setInterval(horloge, 1000);

function horloge(){
var d = new Date();
heure.innerHTML = d.toLocaleTimeString();
}

stop.addEventListener('click', arret);
function arret(){
clearInterval(tempsReel);
}
</script>
</body>

setTimeOut, nous permet d'exécuter un bloc de code après un

certain moment donné, appartient à l’objet window et il va avec
deux arguments, le fonction à exécuter et le nombre en
milliseconde précisant à quel moment à exécuter la fonction à
partir de l’exécution de setTimeOut.
<body>
<button id="btn">Cliquez</button>
<script>
var body = document.body;
var btn = document.getElementById('btn');

btn.addEventListener('click', couleur);

Les Cookies en JavaScript:

Un cookie est un petit fichier qui va contenir généralement une seule
donnée qui va être stockée sur l’ordinateur de vos utilisateurs. Elle
permet de conserver des informations et de pouvoir en resservir,
normalement une fois la page web envoyée, il y’a aucun moyen de se
souvenir des données envoyées par l’utilisateur. Grâce au PI, on va
pouvoir se rappeler du nom de l'utilisateur et des préférences qu’il a
indiqué. Les cookies ne sont pas dangereux en soi, mais ce qui pourrait
être dangereux est qui si un programme malveillant arrive à intercepter
des informations qu’il contient (sensible comme un mot de passe). Elle
ne dure jamais éternellement car on leur donne une durée de vie et
l’utilisateur peut à tout moment supprimer les cookies de son ordinateur.
Pour créer un cookie en javascript, on utilise cookie de l’objet document,
on lui donne un nom et une valeur.
<body>
<p id="cook"></p>
<script>
document.cookie = 'prenom1=Pierre; expires=Thu, 17 sept 2021
12:00:00 UTC; path=/';
document.cookie = 'prenom2=Victor; expires=Thu, 17 sept 2021
12:00:00 UTC; path=/';

var c = document.cookie;
document.getElementById('cook').innerHTML = c;
</script>
</body>
Pour modifier un cookie, il suffit d’appeler les mêmes noms et de
modifier les valeurs qu’on veut modifier.
<body>
<p id="cook"></p>
<script>
document.cookie = 'prenom1=Pierre; expires=Thu, 17 sept 2021
12:00:00 UTC; path=/';
document.cookie = 'prenom2=Victor; expires=Thu, 17 sept 2021
12:00:00 UTC; path=/';

document.cookie ='prenom1=Julie; expires=Thu, 17 sept 2021

12:00:00 UTC; path=/';
document.cookie = 'prenom2=Victor; expires=Thu, 10 sept
2021 12:00:00 UTC; path=/';
var c = document.cookie;
document.getElementById('cook').innerHTML = c;
</script>
</body>

Fonction pour automatisation ou suppression, création de cookie;

<body>
<p id="cook"></p>
<script>
function creerCookie(nom, valeur, jour) {
//Si les jours ont bien été définis
if (jour) {
//On crée un objet date stockant la date actuelle
var date = new Date();
//On définit la date d'expiration du cookie
date.setTime(date.getTime()+(jour*24*60*60*1000));
//On met la date au bon format pour un cookie
var exp = '; expires='+date.toGMTString();
}
//Si les jours n'ont pas été définis, pas besoin de calcul
else{
var exp = '';
}
document.cookie = nom+'='+valeur+exp+';path=/';
}

function supprimerCookie(nom){
/*On donne le nom du cookie à supprimer, puis on utilise
creerCookie() pour indiquer une date
*d'expiration passée*/
creerCookie(nom,'',-1);
}
//On crée deux cookies
creerCookie('Cookie1','Je suis le premier cookie', 7);
creerCookie('Cookie2','Je suis un autre cookie', 7);

supprimerCookie('Cookie1');

var affiche = document.getElementById('cook');

affiche.innerHTML = 'Valeur : ' + lireCookie('Cookie1');
</script>
</body>

La Gestion des erreurs

Lorsqu’un code s’exécute y’a une forte possible que des erreurs
surviennent. Les erreurs peuvent provenir de différents facteurs,
tout d’abord une erreur faite dans le code par le développeurs, une
utilisateur qui envoie une mauvaise valeur, un facteur de
l’environnement interne déficient etc. Il est important de gérer les
cas d’erreurs potentielles afin d’éviter tout code autour de l'erreur
plante, affiche un résultat non souhaité ou même affiche des
informations sensibles qui nous votre site ou même vous.
Pour gérer les erreurs, on utilise trois blocs try, catch, et throw.
Le principe est de tester le code dans le bloc try et si le code est
valide, elle va être exécuter;
Si une erreur est détecté dans le code lors de son exécution, on va
lancer ou jeter c’est-à-dire throw en anglais une exception et le bloc
throw va nous permettre de créer un message d’erreur
personnalisé et d’obtenir les informations sur erreur rencontré;
Et donc finalement on va attraper catch en anglais notre erreur ou
notre exception dans notre bloc catch afin d’afficher les
informations relatives à celle-ci. Ce dernier bloc va contenir le code
à exécuter en cas d’erreur.
On peut ajouter une quatrième bloc qui est optionnelle qui est le
bloc Finally, qui permet d'exécuter le code quelque soit le résultat
suite au bloc try et catch, on peut par exemple utiliser Finally pour
réinitialiser le champ où l’utilisateur entre la valeur qui est une
utilisation fréquente de la bloc Finally.
<body>
<label for="nb">Entrez un nombre entre 1 et 10</label>
<input type="number" min='1' max='10' id="nb" name="nombre">
<button type="button" id="test">Valider</button>
<p id="msg"></p>

function testValeur(){
var p = document.getElementById('msg');
var x = document.getElementById('nb').value;

try{
if ((isNaN(x)) || (x == '')) {
throw 'vous n\'avez pas rentré de nombre valide';
}
else if ((x < 1) || (x > 10)) {
throw 'Valeur trop grande ou trop petite';
}
else{
msg.innerHTML = 'Nombre Ok';
}
}
catch(e){
msg.innerHTML = e;
}

finally{
document.getElementById('nb').value = '';
}
}
</script>
</body>

Le Mode STRICT
Est un mode qui va contenir un schématique légèrement différent et en
l'occurrence plus strict que le JavaScript normal, on peut activer le mode
strict de JavaScript grâce à l’expression ”use script”. Si on utilise cette
expression à l’intérieur d’une fonction, seul le code à l’intérieur de cette
fonction est exécuté en mode strict tandis que si on utilise cette
expression dans une espace global du script, le mode strict sera
appliqué à tout le script. En effet le mode strict va transformer certaines
syntaxe non recommandé en véritable erreur, par exemple si on déclare
une variable sans préciser le mot clé var en JavaScript normal cette
variable va devenir globale et aucune erreur ne sera
déclenchée.L'intérêt du mode Strict va être de renvoyer une erreur et
d'empêcher l’exécution d’un script dans certain cas ou le JavaScript
normal n'envoyez pas d’erreur et le script pourrait être exécuté
normalement.
Parmis ces cas, il y’a normalement déclaré une variable sans le mot clé
var, le cas où on tente d’assigner une valeur à une variable ou une
propriété qui est en lecture seule, le cas où on tente de supprimer une
variable ou une propriété qui n’est pas supprimable, le cas où on tente
de définir une variable ou une propriété plus d’une fois, le cas où on
tente de dupliquer le nom d’un paramètre et finalement le cas où on
tente d’utiliser un syntaxe optal ou caractère déjà pend.
<body>
<h1>Test use strict en espace global</h1>
<br>
<br>
<p id="varX"></p>
<p id="varY"></p>

var x = 5;
y = 10;

afficheX.innerHTML = x;
afficheY.innerHTML = y;
</script>
</body>

<body>
<h2>Le mode strict</h2>
<h1>Test use strict à l'interieur du fonction</h1>
<br>
<br>
<p id="varX"></p>
<p id="varY"></p>

function affX(){
'use strict';
var x = 5;
alert(x);
}

function affY(){
'use strict';
y = 10;
alert(y);
}

affX();
affY();
</script>
</body>
CONCLUSION
Mélanger différente notion appris dans cette cours pour créer des
scripts;
Essayer de maîtriser en pratiquant et en se confrontant au difficulté;
Au niveau du bonne pratique, pensons à indenter, à commenter, à bien
organiser pour rendre notre code lisible et plus compréhensible;
Déclarer tous les variables globales en début de script afin d’avoir une
bonne vision sur celle-ci et toutes les variables vont être déclaré par le
mot clé var et doit être initialiser c’est à dire de leur donner une valeur;
De même lorsqu’ on crée une nouvelle objet n’utiliser le mot clé new()
que si c’est strictement nécessaire;
Penser à traiter les erreurs potentiels de notre code et particulièrement à
vérifier les donnés envoyés par les utilisateurs et les vérifiés côté
serveurs (php par exemple);
L’utilisation d’un fichier séparé avec point extension (.js);
Ce cours à traiter les fonctionnalités de bases et principales du
JavaScript;
Parfaire les connaissances acquises et se tenir au courant des nouvelles
tendances en matière de programmation pour devenir un bon
développeurs car ce sont des langage vivants qui évoluent très vite;
Être au courant des nouvelles versions, des nouvelles fonctions ou
fonctions dépréciés;
Se renseigner des librairies JavaScripts: Json, Jquery et Prototype

Learn JavaScript in 24 Hours
From Everand
Learn JavaScript in 24 Hours
Alex Nordeen
3.5/5 (5)
VSP Vmware Cloud Foundation 4.0 2020 - Assessment: A B C D
No ratings yet
VSP Vmware Cloud Foundation 4.0 2020 - Assessment: A B C D
4 pages
Quiz 4 CS50 2020
No ratings yet
Quiz 4 CS50 2020
3 pages
Learning Javascript Data Structures and Algorithms
83% (6)
Learning Javascript Data Structures and Algorithms
307 pages
Js My Notes
No ratings yet
Js My Notes
6 pages
Javascri P
No ratings yet
Javascri P
77 pages
Javascript Blocks
No ratings yet
Javascript Blocks
5 pages
4 Datatype
No ratings yet
4 Datatype
23 pages
Web Tech 2
No ratings yet
Web Tech 2
93 pages
Web Application Development: Javascript
No ratings yet
Web Application Development: Javascript
71 pages
JavaScript Cheat Sheet - A Basic Guide to JavaScript
No ratings yet
JavaScript Cheat Sheet - A Basic Guide to JavaScript
44 pages
JavaScript Notes
No ratings yet
JavaScript Notes
33 pages
javascript
No ratings yet
javascript
78 pages
Chapter-3 Javascript
No ratings yet
Chapter-3 Javascript
59 pages
Iw 7
No ratings yet
Iw 7
49 pages
Java Script
No ratings yet
Java Script
51 pages
About JavaScript
No ratings yet
About JavaScript
49 pages
Web Designing and Internet Applications - CS201-JavaScript
No ratings yet
Web Designing and Internet Applications - CS201-JavaScript
54 pages
From Pseudocode To "Real" Code
No ratings yet
From Pseudocode To "Real" Code
5 pages
L04 Javascript1
No ratings yet
L04 Javascript1
62 pages
Core JavaScript Notes
No ratings yet
Core JavaScript Notes
62 pages
Chapter 3 PDF
No ratings yet
Chapter 3 PDF
42 pages
ExNo05 (Lena)
No ratings yet
ExNo05 (Lena)
11 pages
Distributed Systems
No ratings yet
Distributed Systems
41 pages
lecture3 of the javascript file system
No ratings yet
lecture3 of the javascript file system
9 pages
Javascript session 2
No ratings yet
Javascript session 2
16 pages
JS Notes
No ratings yet
JS Notes
48 pages
Javascript - An
No ratings yet
Javascript - An
65 pages
Javascript
No ratings yet
Javascript
144 pages
JavaScript_Snippet_Practice_Questions
No ratings yet
JavaScript_Snippet_Practice_Questions
8 pages
JS Notes
No ratings yet
JS Notes
46 pages
03 1 of 2 JavaScript - Variables & Data Types
No ratings yet
03 1 of 2 JavaScript - Variables & Data Types
14 pages
JavaScript (Control Statement)
No ratings yet
JavaScript (Control Statement)
19 pages
javascript theory
No ratings yet
javascript theory
48 pages
JavaScript Best Practices
No ratings yet
JavaScript Best Practices
16 pages
Java Script
No ratings yet
Java Script
38 pages
JS Notes 1
No ratings yet
JS Notes 1
38 pages
Javascript Notes
No ratings yet
Javascript Notes
24 pages
Intro&Basics.pptx
No ratings yet
Intro&Basics.pptx
73 pages
Lesson 3 Variables, Operators & Statements
No ratings yet
Lesson 3 Variables, Operators & Statements
34 pages
MCA KCA021 Notes Unit-2
No ratings yet
MCA KCA021 Notes Unit-2
47 pages
JavaScript Notes
No ratings yet
JavaScript Notes
46 pages
Lecture 10 JS Basics
No ratings yet
Lecture 10 JS Basics
23 pages
Javascript The Basics
No ratings yet
Javascript The Basics
58 pages
JS Notes
No ratings yet
JS Notes
48 pages
JavaScript Notes
No ratings yet
JavaScript Notes
23 pages
JS Notes
No ratings yet
JS Notes
47 pages
Introduction To JavaScript
No ratings yet
Introduction To JavaScript
137 pages
Chapter 5
No ratings yet
Chapter 5
20 pages
JavaScript Interview Questions For Freshers
No ratings yet
JavaScript Interview Questions For Freshers
69 pages
Js-Variables-and-Data-Type 3
No ratings yet
Js-Variables-and-Data-Type 3
7 pages
Javascript
No ratings yet
Javascript
71 pages
JavaScript Fundamentals Overview
No ratings yet
JavaScript Fundamentals Overview
14 pages
JavaScript Notes - CodeHyp
No ratings yet
JavaScript Notes - CodeHyp
46 pages
RELIM Data Structure and Algorithms Information Sheet 2
No ratings yet
RELIM Data Structure and Algorithms Information Sheet 2
9 pages
String in JavaScript
No ratings yet
String in JavaScript
92 pages
Lecture No 5
No ratings yet
Lecture No 5
69 pages
BCA Computer Concept & C Programming SEMESTER - 1 ST Assignment
29% (7)
BCA Computer Concept & C Programming SEMESTER - 1 ST Assignment
7 pages
JAVASCRIPT
No ratings yet
JAVASCRIPT
35 pages
Introduction To Javascript
No ratings yet
Introduction To Javascript
10 pages
Javascript: Prof.N.Nalini Ap (SR) Scope Vit
No ratings yet
Javascript: Prof.N.Nalini Ap (SR) Scope Vit
35 pages
PHP programming
From Everand
PHP programming
Nino Paiotta
No ratings yet
Smart Library Management System
No ratings yet
Smart Library Management System
9 pages
V8i Update
No ratings yet
V8i Update
91 pages
System - Parameter TwinCAT CNC
No ratings yet
System - Parameter TwinCAT CNC
6 pages
CV Faisal
No ratings yet
CV Faisal
3 pages
05 CSharp Advanced Functional Programming Exercises
No ratings yet
05 CSharp Advanced Functional Programming Exercises
5 pages
Digital Transformation in Healthcare
75% (4)
Digital Transformation in Healthcare
19 pages
OSS Fundamentals: Prof. Jayakumar Sadhasivam, Vellore Institute of Technology, Vellore
No ratings yet
OSS Fundamentals: Prof. Jayakumar Sadhasivam, Vellore Institute of Technology, Vellore
64 pages
Made Easy Engineering Mathematics
No ratings yet
Made Easy Engineering Mathematics
537 pages
LAB505 FactoryTalk Batch and LBSM Lab
100% (4)
LAB505 FactoryTalk Batch and LBSM Lab
449 pages
It101 Midterm Lab Exer 1
No ratings yet
It101 Midterm Lab Exer 1
2 pages
15 The Welding Simulation Solution Guidelines
No ratings yet
15 The Welding Simulation Solution Guidelines
152 pages
FS OP-CRM-TrackingL-SAP VF01 1
No ratings yet
FS OP-CRM-TrackingL-SAP VF01 1
6 pages
Information Age
100% (4)
Information Age
16 pages
Cybersecurity for Industrial Internet of Things: Architecture, Models and Lessons Learned
No ratings yet
Cybersecurity for Industrial Internet of Things: Architecture, Models and Lessons Learned
20 pages
important question answer
No ratings yet
important question answer
12 pages
Ial Ict 2019 Unit 1 QP
No ratings yet
Ial Ict 2019 Unit 1 QP
16 pages
RSG 311 (2 Units) : Course Contents
No ratings yet
RSG 311 (2 Units) : Course Contents
67 pages
BSIT (Evening) Final Year Projects Proposal Evaluation Report
No ratings yet
BSIT (Evening) Final Year Projects Proposal Evaluation Report
3 pages
ICT Chapter 1 Notes
No ratings yet
ICT Chapter 1 Notes
4 pages
4M Change Format
100% (1)
4M Change Format
1 page
XI Chap.s 1,2 QB Pls
No ratings yet
XI Chap.s 1,2 QB Pls
2 pages
Abap Prgs - Sample
No ratings yet
Abap Prgs - Sample
57 pages
Sheet Metal Tutorial Old
No ratings yet
Sheet Metal Tutorial Old
7 pages
Animal-Face AI Test
No ratings yet
Animal-Face AI Test
1 page
AT&T General Practices: 002-290-475
No ratings yet
AT&T General Practices: 002-290-475
4 pages
Job Description For An HR Supervisor
No ratings yet
Job Description For An HR Supervisor
2 pages
Heart Disease Prediction Using Machine Learning
No ratings yet
Heart Disease Prediction Using Machine Learning
7 pages
Procedure To Trigger Events in Remote System Using An ABAP Program PDF
No ratings yet
Procedure To Trigger Events in Remote System Using An ABAP Program PDF
10 pages