Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Naoual ABDALLAH / JavaScript 1 PRATIQUE DE JAVASCRIPT Pour étendre les possibil

Naoual ABDALLAH / JavaScript 1 PRATIQUE DE JAVASCRIPT Pour étendre les possibilités des pages HTML, pour les rendre interactives et pour effectuer certains traitements au niveau du client avant de soumettre la page web à un serveur, le développeur utilise des scripts. Javascript est actuellement le langage de scripts le plus utilisé. Il est léger et orienté objet et il est supporté par la plupart des navigateurs sur le marché. Remarque : Les langages de scripts contrairement aux langages de programmation n’ont pas besoin d’un programme spécial et d’un compilateur pour s’exécuter. Les instructions écrites par un langage de programmation sont interprétées directement par le processeur de la machine mais les instructions écrites dans un langage de script sont interprétés par un autre programme (le navigateur) et n’ont pas besoin d’un compilateur spécial. UTILISATION Les Scripts JavaScript sont intégrés dans une page web de plusieurs manières :  En écrivant le script entre une balise <Script> et </Script> : <Script type="text/javascript">  <NoScript> Traitement si le navigateur n'accepte pas les scripts </NoScript> </Script>  En associant le script à un événement : <NomBalise…..onEvénement="Ecriture Script">  En associant le script à un lien : <a href="JavaScript:Ecriture Script"…>…</a> Remarque : Pour empêcher que le script dans href ne remplace le document courant, on applique l'opérateur void, qui neutralise toute valeur ou tout effet de retour : <a href="JavaScript:void(Ecriture Script)">…</a>  En écrivant le script dans un fichier ayant l'extension .js et en l'appelant dans la page web à l'aide de l'instruction : <Script type="text/javascript" src="FichierScript.js></Script> Remarque:  Les Scripts peuvent être placés dans le Head ou dans le Body. Dans le Head ils seront reconnus dès le chargement de la page.  Un gestionnaire d'événement est la procédure particulière attachée à un événement dans une balise HTML  Il est possible d'utiliser plusieurs gestionnaires d'événements dans une même balise CONCEPTS DE PROGRAMMATION Insertion de commentaires  Sur une ligne : //Commentaire  Sur plusieurs lignes : /*Commentaire Commentaire*/ Utilisation des variables Pour déclarer une variable : var Variable1 [=Valeur_initiale1], Variable2 [=Valeur_initiale2], … Remarque : La déclaration se fait de manière implicite si une variable est utilisée dans le script mais qu'elle n'a pas été déclarée à l'aide de var. Utilisation des tableaux (objet Array)  Déclaration: - Tableaux à une dimension :  Le nombre d'éléments du tableau est inconnu : Naoual ABDALLAH / JavaScript 2 var tableau=new Array()  Le nombre d'éléments du tableau est connu mais le contenu est non connu : var tableau=new Array(NombreEléments)  Le nombre d'éléments du tableau est connu et le contenu est connu : var Tableaux=new Array(ElémentTableau1, ElémentTableau2,…) ou var Tableaux=[ElémentTableau1, ElémentTableau2,…] - Tableaux à plusieurs dimensions : Ils sont gérés comme des tableaux de tableaux à une dimension var Tableau =new Array(Vide|Nombre_Elément|ListeEléments) Tableau[0]=new array(Vide|Nombre_Eléments|ListeEléments) Tableau[1]=new array(Vide|Nombre_Eléments|ListeEléments) …  Remplissage - Tableaux à une dimension : Tableau[position]=valeur ou Tableau[position]= new array(Vide|Nombre_Eléments|ListeEléments) - Tableaux à plusieurs dimensions : Tableau[positionLigne][PositionColonne]=valeur ou Tableau[positionLigne][PositionColonne]= new array(Vide|Nombre_Eléments|ListeEléments) Remarque : Le premier élément du tableau commence à l'indice 0  Quelques propriétés - length : Retourne le nombre d'éléments du tableau (Tableau.length)  Quelques méthodes - join() : Regroupe tous les éléments avec un caractère de séparation aléatoire (Tableau.join()) - join(car) : Regroupe tous les éléments avec un caractère de séparation car (Tableau.join(car)) - reverse() : Inverse l'ordre des éléments contenus dans le tableau (Tableau.reverse()) - sort() : Trie le suivant l'ordre croissant (Tableau.sort()) Structures conditionnelles  if if (condition) {Instructions} else {Instructions}  switch switch(expression) { case const1: instructions break case const2: Instructions break ... default: Instructions }  ? (Condition)?Instructions si condition réalisée : Instructions si condition non réalisée Structures répétitives  for - for (Initialisation de la boucle ; Condition de répétition ; Variation des compteurs de la boucle) {Instructions} - for (variable in tableau) Naoual ABDALLAH / JavaScript 3 {Instructions} - for (variable in objet) {Instructions}  while while (condition) {Instructions}  do {Instructions} while (condition) Gestion des exceptions La gestion des exceptions permet de prévenir les erreurs qui risquent de se produire et de prendre les mesures adéquates. L’instruction Try Catch est utilisée pour cela :  try {….bloc d’instructions. En cas d’erreur le bloc catch le plus adapté traitera l’erreur } catch (identificateur) {//traitement en cas d’erreur et affichage d’informations sur l’erreur (identificateur pour le numéro de l’erreur, identificateur.name pour le nom de l’erreur et identificateur.message pour le message d’erreur)} finaly {Code à exécuter dans tous les cas} Le bloc catch ne sera exécuté que s’il y a une erreur dans le bloc d’instructions. Le bloc finaly est toujours exécuté qu’il y ait ou qu’il n’y ait pas d’erreur (Bloc facultatif). Une exception peut se déclencher automatiquement mais on peut aussi la forcer. Pour forcer une exception : throw "Message". L’exception levée ainsi doit être capturée par un bloc catch fonctions  Déclaration function nom_Fonction(argument1, argument2…) { instructions [return valeur] }  Appel L'appel se fait : A partir d'une autre fonction : NomFonction(…) ou Suite à un événement : <NomBalise …..onEvénement="NomFonction(….)"> ou Si la fonction retourne une valeur, à partir d'une variable : Variable=NomFonction(….) Remarque :  Les variables déclarées dans des fonctions sont considérées comme locales si l'instruction var est utilisée dans leur déclaration sinon elles sont considérées comme globales.  Les variables déclarées au niveau du Script sont considérées comme globales (des variables attachées à l’objet window qu’on traitera plus tard. En cas de conflit entre une variable locale et une variable globale portant le même nom, la variable globale sera appelée par : window.Nom_Variable).   Création d’un prototype Il est possible de créer en javascript des objets tels qu’ils sont définis en orienté objet. Pour cela on crée un prototype. Le prototype est une fonction qui va servir de constructeur au nouvel objet et où seront déclarées les différentes propriétés de l’objet. function nom_prototype (propriété1_objet, propriété2_objet, propriété3_objet…) { this.propriété1=valeurPropriété1 this.propriété1=valeurPropriété2 Naoual ABDALLAH / JavaScript 4 this.propriété1=valeurPropriété3 … }  Utilisation d’un prototype Pour créer un objet en se basant sur ce prototype : var monobjet=new nom_prototype("valeur1","valeur2","valeur3",…) Manipulation des chaînes de caractères (objet String) Une chaîne de caractères est composée d'une suite de caractères quelconques, y compris des balises HTML. Des caractères spéciaux peuvent aussi être insérés dans les chaînes :\n (nouvelle ligne), \r (Entrée), \t (tabulation), \f (saut de page), \b (retour arrière), \' pour une apostrophe… Pour concaténer deux chaînes de caractères on utilise le symbole +  Quelques propriétés - length : Retourne la longueur d'une chaîne de caractère (chaîne.length)  Quelques méthodes - toLowerCase() : Convertit une chaîne de caractères en minuscules(chaîne.toLowerCase()) - toUpperCase() : Convertit une chaîne de caractères en majuscules(chaîne.toUpperCase()) - charAt(p) : Retourne le caractère à la position p (chaîne.charAt(p) - indexOf(Ch) : Retourne la position de ch dans une chaîne de caractères (Chaine1.indexOf(Chaîne2)) - indexOf(Ch, p ) : Retourne la position de ch dans une chaîne de caractères en commençant la recherche par la position p (Chaine1.indexOf(Chaîne2, p)) - lastIndexOf(Ch) : Retourne la position de ch dans une chaîne de caractères en commençant la recherche par la fin(Chaine1.lastIndexOf(Chaîne2)) - lastIndexOf(Ch, p ) : Retourne la position de ch dans une chaîne de caractères en commençant la recherche par la fin et en s'arrêtant à la position p (Chaine1.lastIndexOf(Chaîne2, p)) - substring(p1,p2) : Retourne une sous-chaîne allant de la position p1 à la position p2-1 (chaîne.substring(p1,p2)) - split(séparateur) : Fractionne une chaîne de caractères en se basant sur le séparateur et retourne les différentes parties dans un tableau de chaînes de caractères (Tabelau=Chaîne.split(séparateur)) Utilisation des fonctions date et heure (objet Date)  Pour manipuler la date en cours Variable =new Date() Remarque : La date qui sera stockée dans variable est sous la forme suivante : "NomJour Mois jourMois Année Heure:Minutes:Secondes"  Pour manipuler une autre date Variable =new Date(date) date peut être donnée sous les formes : - "année, mois, jour" - "année, mois, jour, heures, minutes , secondes" - "NomMois JourMois , Année Heures:Minutes:Secondes"  Méthodes - getYear() : Retourne l'année d'une date (UneDate.getYear())(rajoutez 1900) - setYear(année) : Modifie l'année d'une date (UneDate.setYear(année)) - getMonth : Retourne le mois (entre 0 et 11) d'une date (UneDate.getMonth()) - setMonth(mois) : Modifie le mois d'une date (UneDate.setMonth(mois)) - getDate() : Retourne le numéro du jour du mois (entre 1 et 31) d'une date (UneDate.getDate()) - setDate(jourMois) : Modifie le jour du mois d'une date (UneDate.setDate(jourMois)) - getDay() : Retourne le jour de la semaine (entre 0 et 6) d'une date (UneDate.getDay()) - setDay(jourSemaine) : Modifie le jour de semaine d'une date (UneDate.setDay(jourSemaine)) - getHours() : Retourne l'heure (entre 0 et 23) d'une date (UneDate.getHours()) - setHours(heure) : Modifie l'heure d'une date (UneDate.setHours(heure)) - getMinutes() : Retourne les minutes( entre 0 et 59) d'une date (UneDate.getMinutes()) Naoual ABDALLAH / JavaScript 5 - setMinutes(minutes) : Modifie les minutes d'une date (UneDate.setMinutes(minutes)) - getSeconds() : Retourne les secondes (entre 0 et 59) d'une date (UneDate.getSeconds()) - setSeconds(secondes) : Modifie les secondes d'une date (UneDate.setSeconds(secondes)) - getTime() : Retourne le nombre de Millisecondes écoulées depuis le 1 janvier 1970 00:00:00 (UneDate.getTime()) - setTime (nombreMillisecondes) : uploads/Litterature/ ok-pratique-de-javascript.pdf