Développement Web

L’objet String

  permet de représenter les chaînes de caractères

 attributs :

 length longueur de la chaîne

 Méthodes:

 integer charAt(index) //accéder à un caractère isolé d'une chaîne!  String concat(s1,s2,...)!  integer indexOf(search[,fromIndex]) // renvoie la position d'une

chaîne partielle à partir d'une position déterminée (en commençant au début de la chaîne principale soit en position 0).!

 integer lastIndexOf(search[,fromIndex]) //renvoie la position

d'une chaîne partielle à partir d'une position déterminée (en commençant à la fin soit en position length moins 1). !

 Array split(separator[,limit]) !  String substr(start,length) !  String substring(x,y) //renvoie un string partiel situé entre l position x et

la position y-1.

 String toLowerCase()!  String toUpperCase()!

TBM 2014-15

page 17

Exemple avec String

TBM 2014-15

page 18

L’objet Date

  permet de représenter les dates

 Date()  Date(milliseconds)  Date(y,m,d)  getDay(), getMonth(), getYear(), getFullYear()  getHours(), getMinutes(), getSeconds()  toGMTString  toLocaleString  toUTCString

TBM 2014-15

page 19

Objet Array

  permet de représenter et traiter les tableaux

 attributs :  length

 Méthodes:

 Array concat(array1,array2)  push : ajoute un nouvel élément à la fin  unshift : ajoute un nouvel élément au début  pop : supprime et retourne le dernier élément  shift : supprime et retourne le premier élément  reverse : inverse l’ordre des éléments  Array(n) : construit un tableau de longueur n  Array(n1,...,nk) : construit un tableau dont les éléments sont n1,...,nk  slice(begin, end) : extrait une partie du tableau  splice(index,howMany,e1, ..., en) : ajoute et supprime de nouveaux éléments  sort() : tri des éléments  sort(compare function) : tri suivant la fonction

TBM 2014-15

page 20

Exemple avec Array

TBM 2014-15

page 21

Gérer la structure du document

TBM 2014-15

page 22

Un exemple pour commencer

TBM 2014-15

page 23

Sélectionner un Element du DOM

  getElementById() // permet d'accéder à un élément en

connaissant son ID qui est simplement l'attribut id

  getElementsByTagName() // Cette méthode permet de

récupérer, sous la forme d'un tableau, tous les éléments de la famille

  getElementsByName() // permet de ne récupérer que les éléments qui possèdent un attribut name que vous spécifiez

  querySelector() et querySelectorAll() // simplifient

la sélection d'éléments dans l'arbre DOM prennent pour paramètre une chaîne de caractères qui doit être un sélecteur CSS comme ceux que vous utilisez dans vos feuilles de style

TBM 2014-15

page 24

Notion d’héritage

  un élément <div> est un objet

HTMLDivElement, mais un objet, en Javascript, peut appartenir à différents groupes.

  Ainsi, <div> est un HTMLDivElement, qui est un sous-objet d'HTMLElement qui est lui-même un sous-objet d'Element.

  Element est enfin un sous-objet de

Node.

  Node possède des propriétés et des méthodes qui pourront être utilisées depuis un de ses sous-objets. Les sous- objets héritent des propriétés et méthodes de leurs objets parents.

TBM 2014-15

page 25

Editer les éléments HTML

  Changer les attributs d’un élément

 getAttribute() et setAttribute() permettant respectivement

de récupérer et d'éditer un attribut

  Modifier l’attribut class

 Modifier alors le paramètre className

TBM 2014-15

page 26

Modifier le contenu HTML d’un élément

  innerHTML permet de récupérer le code HTML enfant d'un

élément sous forme de texte  Récupération

 Modification

InnerText (IE) et innerContent : Texte sans balise

TBM 2014-15

page 27

Naviguer entre les nœuds (1/2)

  La propriété parentNode permet d'accéder à l'élément

parent d'un élément

  nodeType et nodeName servent respectivement à vérifier le

type d'un nœud et le nom d'un nœud.  nodeType retourne un entier (1 = Nœud élément, 2 = Nœud attribut, 3

= Nœud texte ,etc.)

 nodeName, retourne simplement le nom de l'élément en majuscule

  firstChild et lastChild servent respectivement à

accéder au premier et au dernier enfant d'un nœud (élément html et #text).

  firstElementChild et lastElementChild servent

respectivement à accéder au premier et au dernier enfant qui sont des éléments html.

  nodeValue retourne le contenu d’un nœud s’il s’agit de texte sinon on accède au données du nœud avec la propriété data!

TBM 2014-15

page 28

Naviguer entre les nœuds (2/2)

  La propriété childNodes retourne un tableau contenant la

liste des enfants d'un élément.

  nextSibling et previousSibling sont deux propriétés

qui permettent d'accéder respectivement au nœud suivant et au nœud précédent.

TBM 2014-15

page 29

Créer et insérer des éléments

  Avec le DOM, l'ajout d'un élément HTML se fait en 3 temps :

 On crée l'élément ;  On lui affecte des attributs ;  On l'insère dans le document,

TBM 2014-15

page 30

Cloner, remplacer, supprimer …

  cloneNode() : permet de cloner un nœud avec (true) ou

sans (false) ses enfants et ses différents attributs.  Il faut penser à l’ajouter après son clonage

  replaceChild()

  removeChild()

TBM 2014-15

page 31

Autres actions

  hasChildNodes() : vérifie la présence d'éléments enfants

  insertBefore() : permet d'insérer un élément avant un

autre.  Elle reçoit deux paramètres : le premier est l'élément à insérer, tandis que le deuxième est l'élément avant lequel l'élément va être inséré.

TBM 2014-15

page 32

Les événements

TBM 2014-15

page 33

Définitions

  Les événements sont des actions de l'utilisateur, qui vont

pouvoir donner lieu à une interactivité.

  L'événement par excellence est le clic de souris, car c'est

le seul que le HTML gère.

  Grâce au Javascript il est possible d'associer des

fonctions, des méthodes à des événements tels que le passage de la souris au-dessus d'une zone, le changement d'une valeur, …

  Exemple : onClick="window.alert(‘bonjour’)"!

TBM 2014-15

page 34

Liste des évènements Évènement

Quand l’utilisateur

onBlur

enlève le focus du composant

onChange

change la valeur d'un texte ou d'un composant à options

onClick

clique sur un composant ou un hyperlien

onFocus

donne le focus au composant

Balise

text, textarea, select

text, textarea, select

button, checkbox, radio, reset, submit

text, textarea, select

onLoad

charge la page dans le navigateur

body, frameset

onMouseOut

la souris quitte un lien ou une ancre

<a href..>, <area href..>

onMouseOver bouge la souris sur un lien ou une ancre

<a href..>, <area href..>

onReset

efface les saisies d'un formulaire

<input type=« Reset »>

onSelect

sélectionne une zone d'édition d'un formulaire

text, textarea

onSubmit

soumet un formulaire

onUnload

quitte la page

TBM 2014-15

<input type=«Submit»>

body, frameset

page 35

Rappel - La balise <area>

TBM 2014-15

page 36

L’objet Window – Boite de dialogue

TBM 2014-15

page 37

Créer un objet window

option

description

directories = yes/no Affiche ou non les boutons de navigation

location = yes/no

Affiche ou non la barre d'adresse

menubar = yes/no

Affiche ou non la barre de menu

resizable = yes/no Définit si la taille de la fenêtre est modifiable ou

non

scrollbars = yes/no Affiche ou non les ascenceurs

status = yes/no

Affiche ou non la barre d'état

toolbar = yes/no

Affiche ou non la barre d'outils

width=largeur px

Définit la largeur

Height = hauteur px Définit l’hauteur

TBM 2014-15

page 38

Formulaire

  Accès à un formulaire:

 window.document.nom_du_formulaire !  window.document.forms[i] // ième + 1 formulaire !

  Accès à un objet du formulaire :

 window.document.nom_du_formulaire.nom_du_champ !  window.document.forms[i].elements[j] // le jème + 1

élement du ième+1 formulaire !

TBM 2014-15

page 39

Exemple 1

TBM 2014-15

page 40

Exemple 2

TBM 2014-15

page 41

Exemple : radiobutton

TBM 2014-15

page 42

Exemple : CheckBox

TBM 2014-15

page 43

Exemple : Select

TBM 2014-15

page 44

Ajax

TBM 2014-15

page 45

Ajax

  Asynchronous JAvascript and XML   introduit par Jesse James Garrett en 2005, réunion de

trois technologies

  afin de créer des interfaces utilisateur riches (RUI)

 Javascript pour l’interaction côté client  XMLHttpRequest pour les requêtes asynchrones  XML pour l’échange de données client-serveur

  Mais repose également sur

 DOM CSS

TBM 2014-15

page 46

Pourquoi Ajax ?

  Ajax permet de modifier partiellement la page affichée par le

navigateur sans avoir à recharger la page entière.  Par exemple le contenu d'un champ de formulaire peut être changé, sans

avoir à recharger la page avec le titre, les images, le menu, etc.

  Ajax est une technique qui fait usage des éléments suivants:

 HTML pour l'interface.  CSS (Cascading Style-Sheet) pour la présentation de la page.  JavaScript (EcmaScript) pour les traitements locaux, et DOM (Document

Object Model) qui accède aux éléments de la page ou du formulaire ou aux éléments d'un fichier XML chargé sur le serveur.

 L'objet XMLHttpRequest lit des données ou fichiers sur le serveur de façon

asynchrone.

 PHP ou un autre langage de scripts peut être utilisé coté serveur.

TBM 2014-15

page 47

Exemple

TBM 2014-15

page 48

Asynchronous

  Asynchrone en français, signifie que l'exécution de

JavaScript continue sans attendre la réponse du serveur qui sera traitée quand elle arrivera.

  Tandis qu'en mode synchrone, le navigateur serait gelé

en attendant la réponse du serveur.

  Dynamic HTML est aussi un ensemble de techniques, qui

comprend: HTML, CSS, JavaScript.  Cela permet de modifier le contenu d'une page selon les commandes de l'utilisateur, à partir de données préalablement fournies ou avec un texte tapé par l'utilisateur.

  Ajax est DHTML plus l'objet XHR pour communiquer avec

le serveur.

TBM 2014-15

page 49

XMLHttpRequest - XHR

  Développé par Microsoft en 1998 en tant qu’objet ActiveX

  repris par Mozilla en 2002, puis autres navigateurs

  devenu une recommandation du W3C en 2006

  permet d’envoyer une requête asynchrone au serveur

  une fois les données reçues on met à jour le DOM

TBM 2014-15

page 50

Comment ça fonctionne ?

  Pour recueillir des informations sur le serveur l'objet XHR

dispose de deux méthodes:  open: établit une connexion.  send: envoie une requête au serveur.

  Les données fournies par le serveur seront récupérées

dans les champs de l'objet XMLHttpRequest  responseXml pour un fichier XML ou  responseText pour un fichier de texte brute.

  Il faut attendre la disponibilité des données, et l'état est donné par l'attribut readyState (seul le dernier est utile):  0: non initialisé.  1: connexion établie.  2: requête reçue.  3: réponse en cours.  4: terminé.

TBM 2014-15

page 51

XMLHttpRequest

  attributs de XMLHttpRequest

 Status : statut sous forme numérique (ex 200 OK, 404 Not Found)  statusText : statut sous format texte  readyState : état de l’objet

 0=uninitialized,  1=open,  2=sent,  3=receiving,  4=loaded

 Onreadystatechange : permet d’attacher un gestionnaire d’événement  responseText : réponse du serveur sous forme texte (HTML ou JSON)  responseXML : réponse du serveur sous forme XML

  Attention

 lorsque l’on a reçu les données du serveur et qu’elles sont prêtes à ^te

tretraitées:

TBM 2014-15

 readyState = 4  Status = 200

page 52

XMLHttpRequest

  Méthodes

 ouverture d’une connexion pour envoi ou réception de données (GET,

POST) : open(method, url, async)  envoi d’une requête : send(content)  mettre fin à la requête : abort()

TBM 2014-15

page 53

Etape 1 : Créer un objet XHR

  OU

TBM 2014-15

page 54

Etape 2 : attendre et traiter la réponse

 Le traitement de la réponse et les traitements qui suivent sont inclus

dans une fonction, et la valeur de retour de cette fonction sera assignée à l'attribut onreadystatechange de l'objet précédemment créé.

TBM 2014-15

page 55

Etape 3 : exécuter la requête

  Deux méthodes de XMLHttpRequest sont utilisées:  open: commande GET ou POST, URL du document, true pour

asynchrone.

 send: avec POST seulement, données à envoyer au serveur.

TBM 2014-15

page 56

Exemple 2 avec PHP

TBM 2014-15

page 57

Exemple 2 avec PHP

TBM 2014-15

page 58

Exemple 2 avec PHP

TBM 2014-15

page 59