Retour d'un niveau
Retour à l'accueil
Le langage JavaScript peut être intégré aux pages HTML de différentes façons.
Le JavaScript est un langage de programmation (qui fait de l'interprétation) il est donc interprété au fur et à mesure. Donc il n'est pas compilé comme le Java, C, etc L'inconvénient est que le code peut être interprété différemment en fonction des navigateurs !
une instruction c'est un ordre, une action
lorsque l'on écrit les instructions sur plusieurs lignes le ; n'est pas obligatoire mais il est conseillé.
Les variables en js ne sont pas typées (entier, booléen, string) c'est le mot clé var qui permet de déclarer une variable et sa valeur définit sont type.
la souplesse du JS permet de ne pas déclarer les variables, on appelle cela la déclaration implicite
cette méthode n'est pas conseillée
test = 10; test = document.BD.prop.value;
var test;
var test = 10;
La déclaration des variables peut se faire sur une ou plusieurs lignes
var texte = 'bonjour'; var i = 1, j = 2;
Si vous affectez une valeur à une variable que vous n'avez pas déclaré.
a = 3; window.console.log(a);
La variable est implicitement déclarée comme une variable globale (nous verrons plus tard le concept de variable globale).
Si vous lisez une variable non déclaré.
window.console.log(a);
Les variables n'existent que le temps du script, ce qui veut dire que les variables définies dans une page ne sont pas visibles dans une autre page.
La valeur undefined est convertie en NaN (pour Not a Number : « n'est pas un nombre ») lorsqu'elle est utilisée dans un contexte numérique.
Une variable valant null sera toujours considérée comme 0 dans un contexte numérique et comme false dans un contexte booléen.
Lorsqu'une variable est déclarée avec var en dehors des fonctions, elle est appelée variable globale car elle est disponible pour tout le code contenu dans le document.
Lorsqu'une variable est déclarée dans une fonction, elle est appelée variable locale car elle n'est disponible qu'au sein de cette fonction.
Un autre chose peut paraître étrange en JavaScript : il est possible, sans recevoir d'exception, de faire référence à une variable qui est déclarée plus tard.
Ce concept est appelé « remontée » (hoisting en anglais) car, d'une certaine façon, les variables sont remontées en haut de la fonction ou de l'instruction.
En revanche, les variables qui n'ont pas encore été initialisées renverront la valeur undefined.
C'est pourquoi il est conseillé de placer les instructions var dès que possible dans le code.
De plus, cette bonne pratique aide à rendre le code plus lisible.
Les variables globales sont en réalité des propriétés de l'objet global.
Dans les pages web, l'objet global est window, et on peut donc accéder ou modifier la valeur de variables globales en utilisant la syntaxe suivante : window.variable .
Ainsi, il est possible d'accéder à des variables déclarées dans une fenêtre ou dans un cadre depuis une autre fenêtre ou depuis un autre cadre (frame) en spécifiant son nom.
Si, par exemple, une variable appelée numTéléphone est déclarée dans un document FRAMESET, il est possible d'y faire référence, depuis un cadre fils, avec la syntaxe parent.numTéléphone.
var monNom = "Vanderbiesen"; console.log(monNom[0]); // renvoi "V" console.log(monNom[8]); // renvoi "e"
Il est possible de créer des constantes en lecture seule en utilisant le mot-clé const.
La syntaxe d'un identifiant pour une constante est la même que pour les variables (il doit débuter avec une lettre, un tiret bas, un symbole dollar et peut contenir des caractères numériques, alphabétiques et des tirets bas voire des caractères Unicode).
const préfixe = '212';
Une constante ne peut pas changer de valeur grâce à une affectation ou être re-déclarée pendant l'exécution du script.
Les règles de portée des constantes sont les mêmes que pour les variables, à l'exception du mot-clé const qui est obligatoire.
S'il est oublié, l'identifiant sera considéré comme celui d'une variable.
Il est impossible de déclarer une constante avec le même nom qu'une autre variable ou fonction dans la même portée.
La dernière version du standard ECMAScript définit sept types de données :
Six types de données primitifs :
JavaScript est un langage à typage dynamique. Cela signifie qu'il n'est pas nécessaire de spécifier le type de données d'une variable lorsque de sa déclaration. Les types de données sont convertis automatiquement durant l'exécution du script.
Ainsi, il est possible de définir une variable de cette façon :
var réponse = 42;
Et plus tard, d'affecter une chaîne de caractères à cette même variable :
réponse = "Merci pour le dîner...";
JavaScript utilisant un typage dynamique, cette dernière instruction ne renverra pas d'erreur.
Lorsque des expressions impliquent des chaînes de caractères et des valeurs numériques ainsi que l'opérateur +, JavaScript convertit les nombres en chaînes de caractères :
x = "La réponse est " + 42; // "La réponse est 42" y = 42 + " est la réponse"; // "42 est la réponse"
Avec des instructions impliquant d'autres opérateurs, JavaScript ne convertit pas nécessairement les valeurs numériques en chaînes de caractères.
Ainsi, on aura :
"37" - 7; // 30 "37" + 7; // "377"
Si un nombre est représenté en mémoire par une chaîne de caractères, il y a des méthodes pour effectuer la bonne conversion :
La fonction parseInt() analyse une chaîne de caractère fournie en argument et renvoie un entier exprimé dans une base donnée.
parseInt() renverra uniquement des nombres entiers, étant ainsi inappropriée pour la manipulation de nombre décimaux.
Une bonne pratique pour cette fonction est de toujours inclure l'argument qui indique dans quelle base numérique le résultat doit être renvoyé (base 2, base 10…).
La fonction parseFloat() permet de transformer une chaîne de caractères analysée en un nombre flottant (parsing).
Une autre méthode pour récupérer une nombre à partir d'une chaîne de caractères consiste à utiliser l'opérateur +. “1.1” + “1.1” = “1.11.1”
La fonction isNaN() permet de déterminer si une valeur est NaN.
On notera que cette fonction utilise des règles de conversion différentes de Number.
isNaN(), défini dans ECMAScript 6.
Il est aussi possible d'utiliser typeof() afin de déterminer si une valeur vaut NaN (qui signifie « n'est pas un nombre »).
Les littéraux sont utilisés pour représenter des valeurs en JavaScript.
Ce sont des valeurs fixes, pas des variables, qui sont fournies littéralement au script.
Cette section décrit les différents types de littéraux :
Pour faire apparaître des guillemets dans une chaîne de caractères il suffit de mettre un backslash \ devant le guillemet pour qu'il soit interprété comme du texte
document.write(Bonjour et bienvenue dans l'univers de \"JavaScript\" et de html);
Chaque élément d'une page HTML est accessible via un chemin hiérarchique logique: dans le document, on trouve un formulaire accueil dans lequel on trouve le champ message. On atteint donc la valeur du champs par le chemin: document.accueil.message.value
\b touche de suppression
\f saut de ligne d'impression
\n retour à la ligne
\r appui sur la touche ENTREE (retour chariot)
\t tabulation
\“ guillemets doubles
\' guillemets simples
\\ caractère antislash
Les chaînes de caractères peuvent être placées entre des guillemets simples ou double ( ' ou ” )
"je suis une chaîne" "c'est une chaîne aussi" guillemet simple à l'intérieur de guillemets doubles 'c\'est une chaîne aussi' simple à l'intérieur de simples "je suis une ""chaîne"" aussi' double à l'intérieur de simples "1ère ligne \n 2ième ligne" \n : saut de ligne "début \t plus loin" \t : tabulation
Pour combiner on doit concaténer avec le signe +
Integer chaine.length L'indice commence à 1 la propriété .length retourne le nombre de caractères d'une chaîne
String chaine.charAt(Integer i)
la méthode chartAt(n) récupère le caractère n. var chaine = azerty; chaine.chartAt(1); retourne “z”
Attention, le premier caractère commence à l'indice 0
String chaine.substring(Integer debut [, Integer fin])
L'indice commence à 0
Il est utile de pouvoir extraire un morceau d'une chaîne.
Par exemple, déclarons la variable date=“15/08/2000”.
La question est de récupérer le jour, le mois et l'année dans 3 variables différentes.
var date = "15/08/2000"; var jour = date.substring(0,2); vaut 15 var mois = date.substring(3,5); vaut 08 var annee = date.substring(6,10); vaut 2000
Après ce script, jour vaut 15, mois vaut 08 et annee vaut 2000.
Cliquez sur ce bouton pour voir le résultat du script : La méthode substring() attend 2 paramètres :
Si les deux paramètres sont inversés, javascript rétablit l'ordre logique :
chaine.substring(6,10) et chaine.substring(10,6) auront le même effet.
Si le deuxième paramètre est omis, la chaine retournée commence à l'indice indiqué et se termine à la fin de la chaîne.
window.alert(jour + "/" + mois + "/" + annee);
Integer chaine.indexOf(String sous chaine, Integer debut)
Retourne la position d'une sous-chaîne sous-chaine dans une chaîne, à partir de la position début
Si la sous-chaîne n'est pas trouvée, indexOf() retourne -1
var url="http://www.toutjavascript.com/magicmenu/index.html"; var domaine=url.substring(7,url.indexOf("/",7)); document.write("Le domaine de "+url+" est "+domaine);
retourne : Le domaine de http://www.toutjavascript.com/magicmenu/index.html est www.toutjavascript.com
Integer chaine.lastIndexOf(String sous-chaine)\
Si sous-chaine n'est pas trouvée, lastIndexOf() retourne -1
var domaine="www.toutjavascript.com"; var extension=domaine.substring(domaine.lastIndexOf(".")); document.write(extension);
retourne : .com
Deux méthodes permettent de retrouver une sous-chaîne d'une chaîne.
Ces méthodes retrouvent la position d'une chaîne et retourne son indice.
Par exemple, vous avez dans une variable javascript un nom de domaine et vous souhaitez retrouver l'extension :
var domaine="www.toutjavascript.com"; var extension=domaine.substring(domaine.lastIndexOf(".")); vaut .com Voici un formulaire pour voir le résultat combiné de substring et lastIndexOf La méthode lastIndexOf(souschaine) retourne l'indice de la dernière occurrence de sous-chaine. __Si la sous-chaîne n'est pas trouvé, **lastIndexOf()** retourne -1__ window.alert(extension);
retourne : .com
Il existe une autre méthode très proche qui retourne l'indice de la première occurrence de sous-chaine trouvée à partir du caractère début de chaine.
chaine.indexOf(souschaine,debut)
Cette méthode permet par exemple d'extraire le domaine d'une url complète :
var url="http://www.toutjavascript.com/magicmenu/index.html"; var domaine=url.substring(7,url.indexOf("/",7)); //La variable domaine contient dans cet exemple www.toutjavascript.com qui est une sous-chaine de url qui commence au caractère 7 et qui se termine au premier slash (/) après "http://". window.alert(domaine);
retourne: www.toutjavascript.com
JavaScript offre deux méthodes pour transformer les lettres (et uniquement les lettres) d'un mot en majuscules ou en minuscules.
var chaine="Ceci est un texte"; var maj=chaine.toUpperCase(); var min=chaine.toLowerCase();
Ils sont insérées dans les balises de liens avec la syntaxes suivantes:
<a href="javascript:alert('Coucou !!')">Mon Lien</a>
tronquer du texte
.substr(0,6); prend les lettres de 0 à 5
Voici un exemple de concaténation de chaînes de caractères un peu particulier : vous allez concaténer un nombre et une chaîne de caractères…
var nombre ; var texte ; var resultat ; nombre = 3; // variable de type numérique texte = "Nombre de BD gagnées : " ; // variable de type texte resultat = texte + nombre ;
A votre avis, le résultat est de type ?
- Texte
Lorsque le programme effectue l’opération “+”, il convertit lui-même la variable de type numérique en type texte. C’est ce que l’on appelle la conversion implicite.La variable resultat est de type texte et sa valeur est “Nombre de BD gagnées : 3”
[texte] + [texte] = concaténation [nombre] + [nombre] = addition [nombre] + [texte] = concaténation avec conversion implicite du nombre en texte
Vous avez vu que le JavaScript peut convertir automatiquement un nombre en texte grâce à la conversion implicite.
Voici un exemple provoquant l’effet inverse : une conversion implicite de texte en nombre.
var nombre; var texte; var resultat; nombre = 100; // variable de type numérique texte = "40.3399" ; // variable de type texte resultat = texte * nombre ;
A votre avis, le résultat est de type ?
- Numérique
Lorsque le programme effectue l’opération “*”, il convertit lui-même la variable de type texte en type numérique. Il y a là conversion implicite d’un texte en nombre.
La variable resultat est de type numérique et sa valeur est 4033.99.
Pour les opérations mathématiques (sauf addition, “+”):
[nombre] * [nombre] = opération mathématique
[nombre] * [texte] = opération mathématique avec conversion implicite du texte en nombre
Remarque : si le texte ne peut pas être converti, vous obtiendrez la valeur NaN, Not A Number (pas un nombre)
Type texte ou type numérique ?
Vous n’êtes plus certain du type d’une variable ?
L’opérateur typeof vous affiche le type d’une variable : typeof
var num ; num = "3"; alert(typeof num); // la variable num est de type TEXTE num = parseFloat(num); alert(typeof num); // la variable num est de type NUMERIQUE
L’opérateur typeof peut retourner les types suivants :
une condition est toujours vraie ou fausse!
égalité double égale == lorsque l’on veut comparer l’égalité de deux éléments, il ne vérifie que la valeur
égalité triple égale === permet de vérifier la valeur en plus du type
objet Math, méthode random
Math.random() est une commande qui prend toujours un nombre décimal au hazard entre 0 et 1 ! ensuite on le multiplie par ce que l'on veut
exemple: entre 0 et 100 et ensuite on l'arrondi
nombre = Math.round(Math.random()*100);
objet Math, méthode round
Math.round() est une commande qui va arrondir un nombre avec des décimales et faire en sorte de virer les décimales
exemple pour i = i + 1;
i++; i += 1;
exemple pour i = i - 1;
i--; i -= 1;
exemple: un programme qui demande (via un formulaire) un nombre à l’utilisateur.
Le programme se met à afficher tous les nombres de 1 à 100.
S’il rencontre le nombre introduit par l’utilisateur, il s’arrête, sinon il continue jusqu’à 100.
var demande_chiffre;// = parseFloat(document.break.demande_chiffre.value); function Controle_chiffre(){ demande_chiffre = parseFloat(document.break.demande_chiffre.value); for(i = 1; i < 101; i++){ if(i == demande_chiffre){ document.write("Votre chiffre est le " + demande_chiffre); //on affiche le chiffre break; //et on sort de la boucle } else{ document.write("<b>i = </b>" + i + "<br>"); } } }
on utilise souvent les variable i, j, cpt
var test = true; while(test === true) ou while(test) c'est identiquement pareil !!
Tant que c'est vrai, tu recommence, sinon tu sors !
Pour rentrer dans la boucle il faut que la condition soit vrai
while(condition){instruction}
Exemple:
var mdp = ""; while(mdp != "Fidelio"){ // tant que mdp est différent de "Fidelio" mdp = window.prompt("Entrez votre mot de passe"); //tu redemandes le mdp
Fait tant que !
do{instruction}while(condition); ! ne pas oublier le point-virgule
dans une fonction avec des return à chaque cas)
var retour = function (film) { switch(film) { case ""Toy Story 2"": return ("Bon film, j'adore les cowboys !"); break; case ""Nemo"": return ("Bonne animation, les tortues sont cool."); break; case ""Le Roi Lion"": return ("Super musiques."); break; default : return ("Je ne sais pas !"); break; } }; retour(window.prompt("Quelle film ?"));" // appel de la fonction
- déclaration de la variable
var spirou = new Array(); // déclaration de la variable spirou qui sera de type tableau
- assignation de l'ensemble des valeurs dans le tableau
spirou = ["Dis Bonjour à la dame !","Tu veux mon doigt ?","Mais ! Qu’est-ce que tu fabriques ?", "C’est pour ton bien !","Merci qui ?","N’oublie pas ta capuche !","Demande à ton père !", "T’as qu’à t’retenir !","C’est pas de ton âge !","Tu comprendras quand tu seras grand !"] ;
On remarque l'indexation d'un tableau commence à 0.
Un tableau qui contient 10 valeurs à un indice qui va de 0 à 9 !
Spirou
0 "Dis Bonjour à la dame !"
1 "Tu veux mon doigt ?"
2 "Mais ! Qu’est-ce que tu fabriques ?"
3 "C’est pour ton bien !"
4 "Merci qui ?"
5 "N’oublie pas ta capuche !"
6 "Demande à ton père !"
7 "T’as qu’à t’retenir !"
8 "C’est pas de ton âge !"
9 "Tu comprendras quand tu seras grand !"
var spirou = new Array(); // déclaration de la variable spirou qui sera de type tableau
var spirou = new Array; spirou[0]="Dis Bonjour à la dame !"; spirou[1]="Tu veux mon doigt ?"; spirou[2]="Mais ! Qu’est-ce que tu fabriques ?"; spirou[3]="C’est pour ton bien !"; spirou[4]="Merci qui ?"; spirou[5]="N’oublie pas ta capuche !"; spirou[6]="Demande à ton père !";
( on accède toujours à un tableau par son indice )
alert("Le titre correspondant au numéro est :" + spirou[2]) ;
numero = parseFloat(document.BD.numero.value) – 1 ; // on diminue le nombre introduit pour connaître l’indice alert("Le titre correspondant au numéro est :" + spirou[numero]) ;
cela permet de calculer le nombre maximum d'éléments du tableau )
spirou.length; // ceal renverra le nombre 10
indiceMax = spirou.length -1; ce qui renverra l'indice maximum qui est 9
( par ordre alphabétique ) avec la méthode sort();
spirou = spirou.sort();
Déclaration d’un tableau
var mois = new Array() ;
Alimentation du tableau
mois = "janvier","février","mars","avril","mai","juin","juillet","août","septembre","octobre","novembre","décembre"] ;
Atteindre la première valeur du tableau
mois[0]
Atteindre la troisième valeur du tableau
mois[2]
Taille d’un tableau
mois.length
Parcourir toutes les données d’un tableau
for( i=0 ; i < mois.length ; i = i + 1 ){ document.write(mois[i]) ; }
ou
for( i=0 ; i <= mois.length-1 ; i = i + 1 ){ document.write(mois[i]) ; }
Il existe différentes méthodes de création de tableau.
Voici 3 méthodes équivalentes.
var jour = new Array() ; jour = ["dimanche","lundi","mardi","mercredi","jeudi","vendredi","samedi"] ;
OU
var jour = new Array("dimanche","lundi","mardi","mercredi","jeudi","vendredi","samedi") ;
OU
var jour = new Array() ; jour[0] = ""dimanche"" ; jour[1] = ""lundi"" ; jour[2] = ""mardi"" ; jour[3] = ""mercredi"" ; jour[4] = ""jeudi"" ; jour[5] = ""vendredi"" ; jour[6] = ""samedi"" ; "
Afficher la date :Avec le JavaScript, il est possible d’afficher la date du jour dans le document.var
aujourdhui = new Date() ; document.write(aujourdhui) ; Voici le résultat obtenu à l’écran :
Thu Apr 24 11:47:14 UTC+0200 2003
Comme vous pouvez le remarquer, le format de la date n’est pas très joli !
On peut néanmoins effectuer des traitements sur la date pour obtenir un format plus adéquat.
function NomDeLaFonction(){ instructions }
Généralement, on différencie un nom de fonction d'un nom de variable en le commençant par une majuscule. Ce n’est pas une obligation, c’est une convention de programmeur !
Les parenthèses sont obligatoires, elles ont un rôle important dans une fonction, elles sont utilisées pour transmettre un ou plusieurs paramètres ( arguments )
si on oublie de déclarer une variable, cette variable sera déclarée automatiquement comme variable globale
En JavaScript l'objet window est l'objet père de document (dans le DOM)
Initialisateur d'objet
Un initialisateur d'objet est une liste contenant plusieurs propriétés avec leurs valeurs associées, cette liste étant entourée d'accolade { }
En utilisant un initialisateur ou (la notation LITTERALE, objet littérale (c'est simplement la création d'objet grâce et entre des accollades { } )
On utilise alors la notation JASON (JavaScript Object Notation).
- Un objet JASON est un ensemble d'éléments nom/valeurs
- l'ensemble commence par une accolade ouvrante { et se termine par une accolade fermante }
- chaque élément est sépéré par une virgule.
- le nom de l'élément est suivi par deux points : pour associer la valeur au nom de lélément
- il faut un point virgule à l'accolade fermante { };
var BMW = { nom : "BMW", cout : "trop cher", vitesse : 220, pays : "Allemagne" };
var jules = { job: "developpeur", fiance: false, // ajout de la méthode parle parle: function(message) { if(message === "super"){ console.log("Salut, je me sens très bien"); } else if(message === "pas mal"){ console.log("Salut, je me sens pas trop mal"); } } }; jules.parle("super"); jules.parle("pas mal");
ou
var jules = { job: "développeur", fiance: false, disJob: function() { // complétez cette méthode //console.log("Salut, je travaille comme " + jules.job); // ou console.log("Salut, je travaille comme " + jules["job"]); } }; // premier job de jules jules.disJob(); // changez le job de jules pour mettre "super développeur" ici jules["job"] = "super développeur"; // second job de jules jules.disJob();
var jules = { job: "développeur", fiance: false }; // donnez pour valeur le premier nom de propriété de "jules" var unePropriete = "job"; // affichez la valeur de la première propriété de "jules" en utilisant la variable "unePropriete" console.log(jules[unePropriete]);
var nyc = { nom: "New York City", maire: "Bill de Blasio", population: 8000000, quartiers: 5 }; // Écrivez une boucle for pour afficher les valeurs des propriétés de nyc for(var propriete in nyc){ console.log(propriete + " : " + nyc[propriete]); }
Les notations
- new Object();
- Object.create();
Une propriété peut être vue comme une variable attachée à l'objet.
nomObjet.nomPropriété
On crée l'objet maVoiture en utilisant new Object();
var maVoiture = new Object();
On définit les propriétés en leurs affectant une valeur avec (la notation pointée)
maVoiture.fabricant = "Ford"; maVoiture.modèle = "Mustang"; maVoiture.année = 1969;
maVoiture; Object { fabricant: "Ford", modèle: "Mustang", année: 1969 } ===accéder à une seule propriété en affichant sa valeur=== <code javascript> maVoiture.fabricant; "Ford"
maVoiture.fabricant = "Peugot"; "Peugot"
maVoiture.couleur = "rouge"; "rouge"
var age; undefined maVoiture.age = 40; 40 maVoiture; Object { fabricant: "Ford", modèle: "Mustang", année: 1969, age: 40 }
[maVoiture]; Array [ Object ]
On peut aussi définir ou accéder à des propriétés en utilisant (la notation entre les crochets [ ] )
maVoiture["fabricant"] = "Ford"; maVoiture["modèle"] = "Mustang"; maVoiture["année"] = 1969;"
maVoiture;
maVoiture["fabricant"]; "Ford"
maVoiture["fabricant""] + " " + maVoiture["modèle"]; "Ford Mustang"